/* Student entry and session controls share the student workspace's brand.
   Every colour comes from the light/dark semantic palette in tokens.css, and
   every corner, gap and type size from the scales beside it: cards and dialogs
   take --r-card, fields and the panels nested in a card --r-sm, buttons
   --r-btn.

   The join card keeps its teal edge, which is what marks it as the student's
   way in, but at the same weight as every other card's border and with the
   same faint shadow ("Thin borders, 12–14px corners, almost no shadow"). */
.gate-card:has(#join-form) {
  border: 1px solid var(--c-teal);
  border-radius: var(--r-card);
  background: var(--card);
  padding: clamp(var(--sp-24), 3.5vw, var(--sp-32));
  box-shadow: var(--shadow-card);
}
.gate-card:has(#join-form) .gate-card-title {
  font-family: var(--font-play);
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  margin-bottom: var(--sp-8);
}
.gate-card:has(#join-form) .gate-card-text {
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: var(--sp-16);
}
.gate-card:has(#join-form) .gate-form,
#addclass-modal .gate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-16);
}
.gate-card:has(#join-form) .t-input,
#addclass-modal .t-input {
  width: 100%;
  min-height: 56px;
  padding: .75rem var(--sp-16);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--field);
  font-size: 1.05rem;
}
.gate-card:has(#join-form) .join-code-input,
#addclass-modal .join-code-input {
  text-align: center;
  font-family: var(--font-play);
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: .2em;
  padding-inline-start: calc(var(--sp-16) + .2em);
}

/* The PIN, set like the code above it: large, centred, spaced, because it is
   copied off a card a digit at a time. Show sits inside the field it governs,
   the way a password reveal does, so it reads as part of the box rather than
   as a third button in a column of them. The inline padding is mirrored so the
   digits stay centred with Show on one side, and the start side carries the
   extra letter-spacing the last digit trails, as the code field does. */
.join-pin-field {
  position: relative;
  min-width: 0;
}
.gate-card:has(#join-form) .join-pin-input,
#addclass-modal .join-pin-input {
  text-align: center;
  font-family: var(--font-play);
  font-size: 1.45rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
  padding-inline: calc(5rem + .3em) 5rem;
}
/* Masked with a text-security glyph rather than type="password", which would
   hand shared-laptop browsers a name and PIN to save (see index.html). The
   placeholder is left readable: "PIN" as three dots says nothing. */
.join-pin-input { -webkit-text-security: disc; }
.join-pin-input.is-shown { -webkit-text-security: none; }
.join-pin-input::placeholder { -webkit-text-security: none; letter-spacing: .12em; }
.join-pin-show {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--sp-8);
  height: fit-content;
  margin-block: auto;
  min-width: 4.2rem;
}
.gate-card:has(#join-form) .join-pin-show,
#addclass-modal .join-pin-show {
  min-height: 44px;
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
}
/* The helper belongs to the field above it, so it sits closer than the other
   notes in this card do. */
#join-pick #join-pin-help { margin-top: var(--sp-8); }

.gate-card:has(#join-form) .btn,
#addclass-modal .btn,
#student-profile-modal .btn,
#rec-modal .btn,
#pin-modal .btn {
  min-height: 50px;
  border-radius: var(--r-btn);
  font-family: var(--font-play);
  font-size: var(--fs-16);
  font-weight: 650;
}
.gate-card:has(#join-form) .btn-primary,
#addclass-modal .btn-primary,
#student-profile-modal .btn-primary,
#rec-modal .btn-primary,
#pin-modal .btn-primary {
  --btn-lift: 3px;
}
.gate-card:has(#join-form) .btn-primary:disabled,
#addclass-modal .btn-primary:disabled {
  opacity: 1;
  color: var(--fg-muted);
  background: var(--bg-soft);
  box-shadow: 0 3px 0 var(--border);
}
.gate-card:has(#join-form) .gate-note,
#addclass-modal .gate-note {
  font-size: var(--fs-14);
  line-height: 1.55;
  margin-top: var(--sp-16);
  overflow-wrap: anywhere;
}
.gate-card:has(#join-pick:not([hidden])) > .gate-card-text,
.gate-card:has(#join-pick:not([hidden])) #join-form,
.gate-card:has(#join-confirm:not([hidden])) > .gate-card-text,
.gate-card:has(#join-confirm:not([hidden])) #join-form,
#addclass-modal:has(#addclass-pick:not([hidden])) #addclass-form,
#addclass-modal:has(#addclass-confirm:not([hidden])) #addclass-form {
  display: none;
}
#join-pick-head,
#addclass-head {
  padding: var(--sp-16);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-16);
}
#join-back,
#addclass-back {
  min-height: 44px;
  margin-top: var(--sp-16);
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--fs-14);
}
/* Step three. The sentence is the whole screen: the class and the name are
   what the child is checking, so they carry the weight, and the two ways back
   sit quietly under the one way in. Same soft ground as "Class found" on step
   two, because it is the same kind of answer, only larger. */
.join-confirm-line {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-16);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--fg);
  font-family: var(--font-play);
  font-size: var(--fs-18);
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.join-confirm-line strong { color: var(--c-accent-ink); font-weight: 700; }
.join-confirm > .btn-primary { width: 100%; }
.gate-card:has(#join-form) .join-confirm-miss,
#addclass-modal .join-confirm-miss { margin: 0 0 var(--sp-8); }
.join-confirm-alt {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}
.join-confirm-alt .btn-quiet {
  min-height: 44px;
  padding: var(--sp-8) var(--sp-16);
  font-size: var(--fs-14);
}

/* The class is a home control, and the avatar consistently opens a profile.
   The recording disclosure remains visible at every breakpoint. */
#student-bar {
  gap: var(--sp-16);
  min-width: 0;
  min-height: 48px;
}
#student-class {
  min-height: 44px;
  max-width: min(40vw, 28rem);
  padding: var(--sp-8) .75rem;
  gap: var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-play);
  font-size: var(--fs-16);
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  background: var(--accent-soft);
}
#student-class:hover { border-color: var(--c-teal); }
#student-class .student-home-chev {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
  color: var(--c-accent-ink);
}
#student-recording {
  padding: var(--sp-4) var(--sp-8);
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  gap: var(--sp-8);
}
#student-who {
  min-height: 44px;
  padding: var(--sp-4) .75rem var(--sp-4) var(--sp-4);
  gap: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
}
#student-who:hover { border-color: var(--c-teal); background: var(--accent-soft); }
#student-who .acct-avatar {
  width: 32px;
  height: 32px;
  color: var(--c-accent-ink);
  background: var(--accent-soft);
  border: 0;
  font-size: var(--fs-13);
}
#student-who .acct-avatar.is-emoji { font-size: var(--fs-20); }
#student-who .t-account-who {
  max-width: 18ch;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-14);
}

/* Put scrolling on the visible dialog panel. This keeps the heading and last
   action reachable on short screens and reserves scrollbar space there. */
#student-profile-modal .modal-body,
#rec-modal .modal-body,
#addclass-modal .modal-body,
#pin-modal .modal-body {
  width: min(480px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(var(--sp-24), 4vw, var(--sp-32));
  text-align: left;
}
#student-profile-modal .profile-head {
  gap: var(--sp-16);
  margin-bottom: var(--sp-24);
}
#student-profile-modal .profile-avatar {
  width: 64px;
  height: 64px;
  color: var(--c-accent-ink);
  background: var(--accent-soft);
  border: 0;
  font-size: 1.4rem;
}
#student-profile-modal .profile-avatar.is-emoji { font-size: var(--fs-32); }
#student-profile-modal .profile-id { min-width: 0; }
#student-profile-modal .modal-title,
#rec-modal .modal-title,
#addclass-modal .modal-title,
#pin-modal .modal-title {
  font-family: var(--font-play);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#student-profile-modal .profile-email {
  margin-top: var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}
#student-profile-modal .mono-label {
  font-family: var(--font-play);
  font-size: var(--fs-16);
  font-weight: 650;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: var(--sp-8);
}
#student-profile-modal .t-field { margin-bottom: var(--sp-24); }
#student-profile-modal .sprofile-emoji {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-8);
}
#student-profile-modal .sprofile-emoji-btn {
  min-width: 44px;
  width: 100%;
  height: 46px;
  border-radius: var(--r-btn);
  border: 2px solid transparent;
  background: var(--bg-soft);
  font-size: var(--fs-24);
}
#student-profile-modal .sprofile-emoji-btn.is-letters { font-size: var(--fs-14); }
#student-profile-modal .sprofile-emoji-btn:hover { border-color: var(--border-strong); }
#student-profile-modal .sprofile-emoji-btn.is-on {
  border-color: var(--c-accent-ink);
  background: var(--accent-soft);
}
#student-profile-modal .sprofile-emoji-note {
  font-size: var(--fs-13);
  line-height: 1.5;
  margin-top: var(--sp-8);
}
#student-profile-modal .theme-choice { gap: var(--sp-8); }
#student-profile-modal .theme-btn { min-height: 44px; font-size: var(--fs-14); }
#student-profile-modal .profile-static {
  padding: var(--sp-16);
  border: 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  line-height: 1.6;
}
#student-profile-modal .profile-note { font-size: var(--fs-13); line-height: 1.55; }
#student-profile-modal .sprofile-details {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#student-profile-modal .sprofile-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 48px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-play);
  font-size: var(--fs-16);
  font-weight: 650;
  color: var(--fg);
}
#student-profile-modal .sprofile-details > summary::-webkit-details-marker { display: none; }
#student-profile-modal .sprofile-details > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: var(--sp-8);
  border-right: 2px solid var(--c-accent-ink);
  border-bottom: 2px solid var(--c-accent-ink);
  transform: rotate(45deg);
}
#student-profile-modal .sprofile-details[open] > summary::after { transform: rotate(225deg); }
#student-profile-modal .sprofile-details[open] { padding-bottom: var(--sp-16); }
#student-profile-modal .sprofile-details[open] > summary { margin-bottom: var(--sp-8); }
#student-profile-modal .profile-zone {
  margin-top: var(--sp-16);
  padding: var(--sp-16) 0 0;
  border: 0;
  border-radius: 0;
}
#student-profile-modal .profile-zone-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
#student-profile-modal .profile-zone-actions .btn-quiet {
  min-height: 44px;
  padding: var(--sp-8) .75rem;
  font-size: var(--fs-13);
}
#student-profile-modal .profile-zone .sprofile-emoji-note { margin: 0 0 var(--sp-16); }
#student-profile-modal .modal-actions { margin-top: var(--sp-24); }
#rec-modal .rec-icon { margin: 0 0 var(--sp-16); width: 56px; height: 56px; }
#rec-modal .rec-icon svg { width: 26px; height: 26px; }
#rec-modal .modal-text { font-size: .96rem; line-height: 1.7; }
#rec-modal .rec-list {
  padding: var(--sp-16);
  gap: var(--sp-8);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
}
#rec-modal .rec-list li { font-family: var(--font-sans); font-size: var(--fs-14); line-height: 1.6; }
#rec-modal .rec-next { margin-top: var(--sp-16); color: var(--fg); font-weight: 600; }

/* The demo's one-line notice. Quieter than the class notice because nothing
   is being kept, but set apart from the hero text with the same microphone
   the class notice carries, so it reads as the same kind of thing. */
.demo-mic-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-8);
  max-width: 34rem;
  margin: -.5rem auto var(--sp-24);
  color: var(--fg-muted);
  font-size: var(--fs-14);
  line-height: 1.55;
  text-align: left;
}
.demo-mic-note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .1rem;
  fill: none;
  stroke: var(--c-accent-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A returning student's first paint. The head script in index.html sets
   data-boot="student" before the body exists when this browser holds a
   student session, so the page opens on the loading card rather than the
   join screen. app.js removes the flag in the same task that puts the real
   views into this state, and from then on the hidden attributes decide as
   usual. !important because [hidden] is display:none !important in
   styles.css, and these rules have to beat it for exactly that one frame. The
   topbar is kept, empty, so the loading card does not jump down when the
   student bar fills in. */
html[data-boot="student"] #view-gate,
html[data-boot="student"] #p-screen-start { display: none !important; }
html[data-boot="student"] #view-speak,
html[data-boot="student"] #p-screen-loading { display: block !important; }
html[data-boot="student"] .topbar { display: flex; }
html[data-boot="student"] #student-bar { display: flex !important; visibility: hidden; }
/* Not risen in like other screens. It is put up once by the head script and
   then again by app.js and enterStudentMode(), and show() restarts a
   screen's animation each time, so a rise here played up to three times on a
   reload. A loading card that is simply there is also the calmer one. */
#p-screen-loading { animation: none; }
#addclass-modal .modal-text { margin-bottom: var(--sp-24); line-height: 1.6; }
#addclass-close { min-height: 44px; }

/* The PIN is the one thing on this screen a child has to copy, so it is the
   largest thing on it. The dashed edge is the login card's, the one the
   teacher prints, so the digits look like the card they came from. Padded on
   the start side by the trailing letter-spacing so they sit truly centred. */
#pin-modal .pin-modal-digits {
  margin: var(--sp-16) 0;
  padding: var(--sp-16) var(--sp-16) var(--sp-16) calc(var(--sp-16) + .4em);
  border: 2px dashed var(--c-teal);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-play);
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4em;
  line-height: 1.15;
  text-align: center;
}
#pin-modal .modal-text { color: var(--fg); font-size: .96rem; line-height: 1.7; }
#pin-modal .modal-list {
  padding: var(--sp-16);
  gap: var(--sp-8);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
}
#pin-modal .modal-list li {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.6;
}

/* One on-brand focus ring; the selected emoji border is state, not focus. */
:is(#student-bar, #student-profile-modal, #addclass-modal, #rec-modal, #pin-modal, .gate-card:has(#join-form)) :is(button, input, summary):focus {
  outline: none;
}
:is(#student-bar, #student-profile-modal, #addclass-modal, #rec-modal, #pin-modal, .gate-card:has(#join-form)) :is(button, input, summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ring);
}
@media (max-width: 560px) {
  .gate { padding-top: var(--sp-24); }
  .gate-mark { width: 40px; height: 61px; margin-bottom: var(--sp-8); }
  .gate-title { font-size: 1.8rem; }
  .gate-sub { margin-top: var(--sp-8); margin-bottom: var(--sp-24); font-size: .92rem; }
  #student-bar { gap: var(--sp-8); }
  #student-class { max-width: calc(100% - 5rem); font-size: var(--fs-14); }
  #student-who .t-account-who { max-width: 10ch; font-size: var(--fs-13); }
  /* Inset by the class button's own padding, so the note lines up with its text. */
  #student-recording { order: 3; flex-basis: 100%; padding: 0 .75rem; font-size: var(--fs-13); }
  #student-profile-modal .sprofile-emoji { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  #student-profile-modal .sprofile-emoji { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #student-class { max-width: calc(100% - 4rem); }
  #student-who { padding: var(--sp-4); }
  #student-who .t-account-who { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #student-bar button,
  #student-profile-modal .sprofile-emoji-btn { transition: none; }
  #student-profile-modal .sprofile-emoji-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  #student-profile-modal .sprofile-details { interpolate-size: allow-keywords; }
  #student-profile-modal .sprofile-details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size 220ms var(--ease-out), opacity 180ms var(--ease-out), content-visibility 220ms allow-discrete;
  }
  #student-profile-modal .sprofile-details[open]::details-content { block-size: auto; opacity: 1; }
  #student-profile-modal .sprofile-details > summary::after { transition: transform 180ms var(--ease-out); }
}