/* ------------------------------------------------------------------------
 * Anonymous student onboarding (/dashboard/student/?obd=1) — issue #547.
 *
 * Live's page is a MUI/emotion React bundle (progression_onboarding_modern);
 * its styles are injected at runtime, so this stylesheet reproduces the
 * COMPUTED styles captured logged-out from live on 2026-07-07
 * (plan/_recon/play-obd/computed-styles.json). Every color / size / gradient
 * below is the live value, not an invention:
 *   page bg     : bg-texture-start.png over
 *                 linear-gradient(#4c13cb 0%, #6825fd 50%, #360777 100%),
 *                 body underlay #222841, font Montserrat.
 *   pill        : 50px, radius 5px, 2px white border; unselected white/#707070;
 *                 selected linear-gradient(#02bcd4, #4e85fb) white text with a
 *                 white 20px check badge (color #1ebbd1) at top:5px/left:5px.
 *   learn cards : identical pill styling at 200px tall, two half-width columns.
 *   continue    : uppercase, Arial 700 ~18.66px, #fefefe on
 *                 linear-gradient(90deg, #e56000 15%, #ce003e 85%),
 *                 1px solid #ce003e border, radius 5px — right-of-center
 *                 (live puts it flush-right in the right half of the grid).
 * Section pitch is MUI spacing: 40px between sections (spacing-5), 16px
 * heading->row and pill->pill (spacing-2); headings carry padding-bottom 40px.
 * ------------------------------------------------------------------------ */

.obd-body {
  margin: 0;
  background-color: #222841; /* live body underlay behind the gradient */
}

.obd {
  position: fixed;
  inset: 0;
  font-family: 'Montserrat', sans-serif;
  background-image:
    url('/image/dashboard/student/launchpad/bg-texture-start.png'),
    linear-gradient(180deg, #4c13cb 0%, #6825fd 50%, #360777 100%);
  background-size: contain, contain;
  background-repeat: repeat, repeat;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Live positions the column absolutely: 50px from the top, centered, 720px
 * wide with 15px side padding (computed-styles.json .css-oc87cl). */
.obd__content {
  width: 720px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 50px auto 0;
  padding: 0 15px;
}

/* 40px pitch between the age section / learn section / continue row. */
.obd__section + .obd__section,
.obd__actions {
  margin-top: 40px;
}

.obd__heading {
  color: #fff;
  font-size: 1.4rem;         /* live computes 22.4px */
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 16px;       /* MuiGrid spacing-2 gap under the heading */
  padding-bottom: 24px;      /* 24 + 16 = the live 40px heading padding */
}

.obd__row {
  display: flex;
  gap: 16px;                 /* MuiGrid spacing-2 between pills */
  justify-content: center;
}

/* ---- The selectable pill (age) / card (learn) ---- */
.obd__pill {
  flex: 1 1 0;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 5px;
  background: #fff;
  color: #707070;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.obd__pill.is-selected {
  background: linear-gradient(180deg, #02bcd4 0%, #4e85fb 100%);
  color: #fff;
}

.obd__pill--card {
  height: 200px;
}

/* White circular check badge — only on the selected pill/card. */
.obd__check {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  color: #1ebbd1;
}

.obd__pill.is-selected .obd__check {
  display: block;
}

.obd__check svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- CONTINUE TO DASHBOARD — flush-right in the right half, i.e. the
 * button's right edge sits on the content column's right edge. ---- */
.obd__actions {
  display: flex;
  justify-content: flex-end;
}

.obd__continue {
  font-family: Arial, sans-serif;
  font-size: 18.66px;
  font-weight: 700;
  line-height: 25.66px;
  text-transform: uppercase;
  text-align: center;
  color: #fefefe;
  background: linear-gradient(90deg, #e56000 15%, #ce003e 85%);
  border: 1px solid #ce003e;
  border-radius: 5px;
  padding: 11.66px 14px;
  cursor: pointer;
}

/* ---- Small screens: stack the pills (MuiGrid xs-12 behavior). ---- */
@media (max-width: 720px) {
  .obd__row {
    flex-direction: column;
  }
  .obd__pill {
    flex: none;
  }
}