/*
 * The four student auth screens: sign-in, first login, lockout, day one.
 *
 * Its own file rather than more of student.css, which is already 2,200 lines
 * and covers the whole learn loop. These four screens share a shell, a keypad
 * and nothing else with the rest of the app, so they read and change as a
 * unit.
 *
 * LIGHT, like the parent portal. These screens used to be a dark ink shell,
 * which marked "you are not signed in on this one". That signal cost more
 * than it bought: a child, a parent and a member of staff each met a
 * different-looking product at the door, and the child's was the odd one out.
 * They now sit on the same paper surface, with the same cards, fields and
 * buttons, that parents.css uses -- see app/views/parents/sessions/new for
 * the reference.
 *
 * Every value comes from tokens.css, through the --a-* names below so the
 * surface can be re-themed in one place rather than in thirty declarations.
 */

.sikai-student:has(.s-auth) {
  --a-page:    var(--sk-page);
  --a-surface: var(--sk-surface);
  --a-text:    var(--sk-ink);
  /* --sk-text-2, never --sk-text-muted: muted is #9A9EA6, which is under
     4.5:1 on paper at the sizes these labels and ledes use. */
  --a-text-2:  var(--sk-text-2);
  --a-line:    var(--sk-fill-4);
  --a-field:   var(--sk-fill-1);
  --a-field-2: var(--sk-fill-3);
}

/* The shell is the whole screen, so the column that holds it has to get out
   of the way. (It was a dark shell when this was written; the reasoning about
   the column is unchanged by the surface being paper now.)

   .s-auth renders inside <main class="s-screen">, which student.css gives
   `max-width: 560px; padding: 20px 16px 32px`. On a 360px phone that padding
   inset the "full-screen" panel to a 328px card with gutters down
   both sides, and its 100dvh fill then measured 100dvh PLUS the 52px of
   vertical padding plus the header -- 314px taller than the viewport, which
   pushed the keypad on the primary sign-in screen roughly 300px below the
   fold. Full-bleeding the column fixes the gutters; making body/main/.s-auth
   one flex chain fixes the overflow, and does it by *measuring* the header
   rather than subtracting a guessed height from 100dvh (the header is 47px
   signed out and 68px signed in, and grows again with a safe-area inset).

   `main.s-screen` rather than `.s-screen`: student.css loads after this file
   and declares `.sikai-student:has(.s-tabs) .s-screen` at the same
   specificity a bare `:has()` clause here would have, so the element name is
   what makes this decisive without an !important. */
.sikai-student:has(.s-auth) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.sikai-student:has(.s-auth) main.s-screen {
  flex: 1;
  max-width: none;
  padding: 0;
  /* student.css paints this column paper (--s-page) with an inline hairline
     from 900px up, because from that element down "the page" means the
     column. On an auth screen the panel is the raised card and the page
     behind it is plain paper, so the column's own fill and hairline are one
     surface too many.

     This reset was not needed while .s-auth was full-bleed and 100dvh tall:
     the panel covered `main` completely, so the paper underneath it was
     simply never visible. The moment `main` became a centred grid with its
     own padding, that hidden paper became a white slab around the card, with
     the brand column's white text sitting invisibly on top of it. */
  background: transparent;
  border-inline: 0;
}

/* The four auth screens draw their own 520px column (.s-auth below) instead
   of sitting on .s-screen's, so the header above them has to be told about
   it -- otherwise on a laptop the wordmark in the bar and the wordmark on
   the panel, which are 24px apart on a phone, sit 130px apart. Set on
   the same element that owns the column everywhere else, so the header
   needs no special case. */
.sikai-student:has(.s-auth) {
  --s-column: 520px;
  --s-gutter: 20px;
}

/* Past 640px the panel stops filling the viewport, so the page behind it
   needs a colour of its own -- otherwise the card floats on whatever the
   browser default is. Paper, the same --sk-page the parent portal uses.

   The panel keeps its own background rather than relying on this one: below
   640px, and in any browser without :has(), it is the only thing painting
   these screens at all. */
@media (min-width: 640px) {
  .sikai-student:has(.s-auth) {
    background: var(--a-page);
  }
}

/* THE CARD BAND: 640px to 900px.

   640px is where the page takes its own colour and the panel stops filling the
   viewport. Until this rule existed, everything from there to 900px was the
   one state nobody had designed -- a ~400px column of content stranded in
   the middle of the page, with the full-bleed phone treatment no longer
   true and the two-column desktop one not yet. A tablet, a small laptop and
   a half-width browser window all landed in it.

   The panel becomes a card here rather than at 900px, so the only thing the
   wider breakpoint adds is the second column. min-height and the flex growth
   from the top of this file are both released: left in place they stretch
   the card back to the viewport. */
@media (min-width: 640px) {
  .sikai-student:has(.s-auth) main.s-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
  }

  .sikai-student .s-auth,
  .sikai-student:has(.s-auth) .s-auth {
    flex: none;
    min-height: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 36px 32px;
    border: 1px solid var(--sk-fill-3);
    border-radius: 24px;
    /* White on paper, the same card treatment .p-card uses on the parent
       surface -- the panel is the raised thing, the page behind it is not. */
    background: var(--a-surface);
  }
}

.sikai-student .s-auth {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Fallback for a WebView with no :has() support, where the flex chain above
     never applies and this is the only thing making the shell full height.
     100dvh needs roughly Chrome 108+, so the 100vh line stands in wherever
     the browser drops the dvh one. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Full-bleed below the card band, and the width is stated rather than left
     to the flex container.

     `max-width: 520px; margin: 0 auto` used to live here, and on a
     column-flex parent auto side margins cancel the default stretch -- so the
     panel sized itself to its CONTENT, not to the max-width. It measured
     404px, which is the natural width of the keypad, and every viewport
     between roughly 520px and 900px drew that 404px column floating in the
     middle of the page. The centring the margin was there for was the thing
     preventing it.

     Below 640px the page is still paper, so a bounded panel would be the
     narrow strip this file's own header calls out. It fills instead; the
     card band takes over at 640px, where the page takes its own colour. */
  width: 100%;
  max-width: none;
  margin: 0;
  /* The safe-area top inset is PLAT-02's, kept through the merge that
     rewrote the rest of this rule. The auth screens carry their own brand
     block instead of a screen header, and this panel is the topmost thing on
     them at every width -- the deskbar renders only for a signed-in child.
     The layout sets viewport-fit=cover, so without this the wordmark lands
     under the notch in the native shell. Same inset .s-screen takes in
     student.css, for the same reason. */
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--a-surface);
  color: var(--a-text);
}

/* Where :has() works, the fill comes from the flex chain and the 100dvh above
   has to stand down -- left in place it would add a viewport's height *below*
   the header instead of sharing one with it, which is the overflow this fix is
   about. `min-height: 0` also lets the keypad's `margin-top: auto` push
   against a real, viewport-bounded height rather than an ever-growing box. */
.sikai-student:has(.s-auth) .s-auth {
  flex: 1;
  min-height: 0;
}

/* /welcome is the one auth screen a signed-in child sees, so it is the one
   that renders the fixed tab bar over the bottom of this shell. student.css
   keeps content clear of that bar with `padding-bottom: 96px` on .s-screen,
   which the full-bleed rule above has just zeroed -- so the clearance moves
   here, onto the element that now owns the padding. Without it the last
   control on the screen ("Decide later") sits under the bar on a short
   phone. */
.sikai-student:has(.s-tabs) .s-auth {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

/* THE BRAND COLUMN, and everything that turns these four screens into a
   two-column layout, lives in the one media query at the bottom of this file.
   Nothing above it changes on a phone. */
.sikai-student .s-authside {
  /* Hidden by default, revealed at 900px -- the opposite way round from the
     usual desktop-first instinct, and deliberately so: a phone is the device
     this product is actually used on, and it should not have to pay for a
     rule it then has to undo. */
  display: none;
}

.sikai-student .s-auth__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sikai-student .s-auth__brand-mark {
  /* 32x26 -- the mark's own 119:96, not a square. See landing.css. */
  width: 32px;
  height: 26px;
  /* The mark itself, not a coloured square standing in for it. The square
     was a placeholder from the imported design file; this is
     app/assets/images/sikai-mark.png, the seedling in the open book,
     cropped tight out of the 512 icon and quantized to 2 KB. Kept as a
     background rather than an <img> so the element, its size and its
     aria-hidden all stay exactly as they were. */
  background: url("/assets/sikai-mark-64ad84a4.png") center / contain no-repeat;
}

/* An <img> now, not a word: these classes size the drawn wordmark instead
   of setting type. Height only, width auto, so the asset keeps its own
   proportions at whatever height each surface wants. */
.sikai-student .s-auth__brand-word {
  height: 18px;
  width: auto;
  display: block;
}

.sikai-student .s-auth__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--a-text);
}

.sikai-student .s-auth__lede,
.sikai-student .s-auth__way {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--a-text-2);
}

.sikai-student .s-auth__eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-text-2);
}

/* The folded school code. Styled as a quiet link rather than a button: it is
   an escape hatch for the minority of children who need a code, and giving it
   button weight would put it back in competition with the username field the
   disclosure exists to promote. */
.sikai-student .s-auth__disclosure-summary {
  /* 44px of tap target on a phone, which is the floor everywhere else in this
     stylesheet -- a summary is only as tall as its text by default, and this
     one is tapped by a seven-year-old. */
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--a-text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keyboard focus has to survive the marker being restyled: without this the
   only visible focus ring on this control is the browser default, which the
   custom marker below can suppress. */
.sikai-student .s-auth__disclosure-summary:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Space between the summary and the field it reveals, applied only when open
   so a shut disclosure does not leave a gap under itself. */
.sikai-student .s-auth__disclosure[open] .s-auth__eyebrow {
  display: block;
  margin-top: 12px;
}

.sikai-student .s-auth__field {
  width: 100%;
  min-height: 48px;
  padding: 15px 16px;
  border: 1.5px solid var(--a-line);
  border-radius: 14px;
  background: var(--a-field);
  color: var(--a-text);
  font-family: var(--s-font);
  font-size: 14px;
}

/* The "@" prefix is decorative (aria-hidden in the view) so it is laid over
   the field with absolute positioning rather than sitting in the tab order
   or the accessible name -- the field's own <label> already names it
   "Username". */
.sikai-student .s-auth__input-group {
  position: relative;
}

.sikai-student .s-auth__prefix {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-family: var(--s-font);
  font-size: 14px;
  color: var(--a-text-2);
  pointer-events: none;
}

.sikai-student .s-auth__field--prefixed {
  padding-left: 28px;
}

/* The gold retry tone, never red, here: tokens.css reserves --sk-error for
   staff surfaces, and D-02's ban only lifts under .sikai-student--secondary
   (D-A). That class comes from secondary_student?, which reads
   current_student -- and every screen this rule reaches (sign-in, lockout)
   runs before a session exists, so the register is never known and this
   stays gold-only regardless of the account's actual grade. The countdown
   text carries the severity instead of the colour. */
.sikai-student .s-auth__error {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--sk-gold);
  border-radius: 14px;
  background: var(--sk-warning-tint);
}

.sikai-student .s-auth__error-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--sk-warning);
}

.sikai-student .s-auth__countdown {
  font-family: var(--s-font);
  font-size: 15px;
  color: var(--sk-warning);
}

/* The lockout screen has no keypad pushing content to the bottom (no
   `margin-top: auto` element inside it), so plain .s-auth would leave its
   five lines hugging the top of a full-height panel. Centering reads as
   the deliberate "let's wait a moment" pause the copy describes, rather than
   an unstyled remnant. */
.sikai-student .s-auth--locked {
  justify-content: center;
}

.sikai-student .s-auth__ways {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sikai-student .s-recents__row {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sikai-student .s-recents__chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  background: var(--a-field);
  color: var(--a-text);
  font-family: var(--s-font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sikai-student .s-recents__initial {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--sk-accent);
  /* White on the accent fill, not the panel's ink -- this square is the one
     saturated surface on the screen. */
  color: #fff;
}

/* .s-dots/.s-dot and .s-keypad/.s-key already exist in student.css, styled
   light for the "Working" spinner (deep_lessons/_state.html.erb) and the
   pre-design sign-in screen it used to share the names with. student.css
   loads after this file alphabetically, so an equal-specificity
   `.sikai-student .s-dots` here would lose the cascade to that light theme
   and the keypad would render white on the dark shell. Qualifying with the
   `.s-auth` ancestor these elements are actually nested inside -- true of
   every one of the four auth screens -- raises specificity just enough to
   win without touching student.css or renaming anything the brief specifies. */
.sikai-student .s-auth .s-dots {
  display: flex;
  gap: 12px;
}

.sikai-student .s-auth .s-dot {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--sk-fill-5);
  border-radius: 50%;
}

.sikai-student .s-auth .s-dot.is-filled {
  border-color: var(--sk-accent);
  background: var(--sk-accent);
}

.sikai-student .s-auth .s-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: auto;
}

.sikai-student .s-auth .s-key {
  min-height: 56px;
  border: 1px solid var(--a-line);
  border-radius: 14px;
  background: var(--a-field);
  color: var(--a-text);
  font-family: var(--s-font);
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sikai-student .s-auth .s-key:active {
  background: var(--a-field-2);
}

.sikai-student .s-auth .s-key--quiet {
  color: var(--a-text-2);
  font-size: 16px;
}

/* student.css's base .s-button (filled --s-blue, i.e. the same blue as
   --sk-accent, white text) renders correctly here unmodified -- no override
   needed. Its .s-button--secondary variant is a solid white chip with
   near-black text, right for the light screens it was written for, but on
   this shell it sits directly under "Go" as a second solid, high-contrast
   pill -- exactly what student.css's own header comment for this section
   rules out ("there is never more than one [filled] on a screen... everything
   else is an outline or a plain link"). Restyled to the same translucent-
   white outline treatment already used for every other quiet control here
   (the fields, the keypad, the recents chips), qualified by .s-auth so it
   beats student.css's rule on specificity rather than depending on file
   load order.

   --ghost and --back are on the same student.css rule as --secondary (one
   selector list, one white/near-black treatment) and were left out of this
   override, so /welcome's "Decide later" -- a skip -- rendered as the single
   loudest control on the screen, louder than the three goals it skips past.
   Overriding one of the three names in a shared rule and not the other two is
   the same omission in another costume, so all three are named here. */
.sikai-student .s-auth .s-button--secondary,
.sikai-student .s-auth .s-button--ghost,
.sikai-student .s-auth .s-button--back {
  background: var(--a-field);
  border: 1px solid var(--a-line);
  color: var(--a-text);
}

.sikai-student .s-auth .s-button--secondary:hover,
.sikai-student .s-auth .s-button--ghost:hover,
.sikai-student .s-auth .s-button--back:hover {
  background: var(--a-field-2);
}

/* Quieter still than the outline the other two get. Matching --secondary
   exactly would fix the inverted hierarchy only halfway: "Decide later" would
   then look identical to the three real choices, and a skip that is as loud
   as the thing it skips is still the wrong emphasis. Same border, no fill,
   dimmed label -- the treatment .s-auth__lede already uses for text that is
   there when you look for it. */
.sikai-student .s-auth .s-button--ghost {
  background: transparent;
  color: var(--a-text-2);
}

/* Choice button layout: stacks title above duration with distinct visual hierarchy. */
.sikai-student .s-auth .s-auth__choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.sikai-student .s-auth .s-auth__choice-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--a-text);
}

.sikai-student .s-auth .s-auth__choice-meta {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--a-text-2);
}


/* ---------------------------------------------------------------------------
   THE DESKTOP SPLIT

   These four screens were a phone column standing in a flat dark field: at
   1440px the sign-in panel measured 323px wide with 559px of empty ink either
   side, and the page and the panel shared a background, so there was not even
   a card -- just a strip.

   Everything here is inside one min-width query, so a phone, a low-end
   Android WebView and both Hotwire Native shells never evaluate any of it.
   900px rather than the 640px used above: 640 is where the ink moves to the
   page, but two columns need room for a 520px panel AND a brand column wide
   enough to set two lines of copy without hyphenating.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* The column pair. `main.s-screen` already owns the full-bleed and the flex
     chain that gives these screens their height (see the top of this file);
     it becomes the grid rather than a new wrapper being introduced, so the
     chain is unbroken and no view gains a div. */
  .sikai-student:has(.s-auth) main.s-screen {
    display: grid;
    grid-template-columns: 1fr minmax(420px, 520px);
    align-items: center;
    gap: 72px;
    /* Bounded and centred, so the two columns stay a pair on a very wide
       monitor instead of drifting to opposite edges. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px;
  }

  .sikai-student .s-authside {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }


  .sikai-student .s-authside__brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Reuses .s-auth__brand-mark/-word from the panel, one size up: the same
     mark, not a second one drawn slightly differently. */
  .sikai-student .s-authside .s-auth__brand-mark {
    width: 42px;
    height: 34px;
  }

  .sikai-student .s-authside .s-auth__brand-word {
    height: 24px;
  }

  .sikai-student .s-authside__line {
    margin: 0;
    /* Sized to hold "One topic a day." on one line at the top of the clamp:
       an em dash of extra measure here and the promise breaks in half, which
       is the one thing this column exists to say. */
    max-width: 18ch;
    font-family: var(--s-font);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--a-text);
  }

  /* The support under the claim. Same muted white the panel uses for its own
     secondary text (.s-auth__lede), so the two columns read as one surface. */
  .sikai-student .s-authside__sub {
    margin: 0;
    max-width: 32ch;
    font-family: var(--s-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--a-text-2);
  }


  /* At this width the card is a grid cell, so it gives up the centring
     margin the single-column band gives it. */
  .sikai-student .s-auth,
  .sikai-student:has(.s-auth) .s-auth {
    max-width: none;
    margin: 0;
  }

  /* The lockout screen centres its own content vertically on a phone because
     it has no keypad pushing anything down. In a centred grid cell that is
     already true, and the rule would only add empty card. */
  .sikai-student .s-auth--locked {
    justify-content: flex-start;
  }

  /* /welcome is the one auth screen a signed-in child sees, so on a phone it
     clears the fixed tab bar. There is no tab bar at this width -- the shell
     switches to the desktop top nav -- so the clearance is dead space. */
  .sikai-student:has(.s-tabs) .s-auth {
    padding-bottom: 36px;
  }

  /* The panel's own wordmark would be the second "Sikai" on screen, 72px from
     the first. The brand column carries it now. */
  .sikai-student .s-auth__brand {
    display: none;
  }
}

/* A 13-inch laptop is wide enough for two columns and short enough that the
   sign-in panel -- which carries a keypad -- plus 96px of outer padding runs
   past the viewport. The columns are already centred, so the padding is the
   part that can give. Height-only, so a tall monitor keeps the breathing
   room. */
@media (min-width: 900px) and (max-height: 860px) {
  .sikai-student:has(.s-auth) main.s-screen {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sikai-student .s-auth {
    padding: 28px 32px;
  }
}

/* The brand rows became links (they are the way back to the landing page),
   so they have to stop looking like body links and start showing focus. */
.sikai-student .s-auth__brand,
.sikai-student .s-authside__brand {
  color: inherit;
  text-decoration: none;
}

.sikai-student .s-auth__brand:focus-visible,
.sikai-student .s-authside__brand:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 4px;
  border-radius: 8px;
}