/* ============================================================================
   CLASSROOM TOOLS — 02-components.css
   Every playful effect runs through --display-face, --lift, --press, --pill.
   Never hard-code a shadow, a radius or a press travel in here.
   ========================================================================= */

@layer chrome {

  /* ------------------------------------------------------------- MARQUEE */
  .marquee {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    background: var(--c-surface);
    border-bottom: var(--bw) solid var(--c-line);
  }
  .marquee__mark {
    font: 800 var(--fs-400)/1 var(--display-face);
    color: var(--c-accent); letter-spacing: -.01em; white-space: nowrap;
  }
  .marquee__screen  { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
  .marquee__actions { flex: 0 0 auto; }

  /* ---------------------------------------------------------------- RAIL */
  .rail {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-width: 0; max-width: 100%;
    padding: 2px var(--sp-3);
    background: var(--c-surface-2);
    border: var(--bw) solid var(--c-line); border-radius: var(--pill);
    font: 700 var(--fs-100)/1.8 var(--font-num);
  }
  .rail__led {
    width: 10px; height: 10px; flex: none; border-radius: 50%;
    border: 2px solid var(--c-line); background: var(--c-surface);
  }
  .rail__led[data-state="synced"]       { background: var(--mint); }
  .rail__led[data-state="offline"],
  .rail__led[data-state="error"]        { background: var(--amber); }
  .rail__led[data-state="auth_expired"] { background: var(--coral); }
  .rail__word  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail__queue { flex: none; font-weight: 800; }

  /* ----------------------------------------------------------------- NAV */
  .nav {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--c-surface);
    border-top: var(--bw) solid var(--c-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: var(--bottom-chrome);
    background: none; border: 0; cursor: pointer; color: var(--c-fg-2);
  }
  .nav__label { font: 800 var(--fs-100)/1 var(--display-face); letter-spacing: .04em; }
  .nav__item[aria-current="page"] { color: var(--c-fg); }
  .nav__item[aria-current="page"]::before {
    content: ""; position: absolute; margin-top: -34px;
    width: 42px; height: 4px; border-radius: var(--pill); background: var(--c-accent-2);
  }
  .spr { width: 18px; height: 18px; border-radius: 6px; border: 2.5px solid currentColor; }
  .nav__item[aria-current="page"] .spr { background: var(--c-accent-2); }
  .record .spr, [data-child-data] .spr, .doc .spr { display: none; }
}

@layer components {

  .panel   { padding: var(--sp-4); display: grid; gap: var(--sp-4); }
  .stepper {
    font: 800 var(--fs-200)/1 var(--display-face);
    color: var(--c-fg-2); padding: var(--sp-1) var(--sp-1) 0;
  }

  /* ---------------------------------------------------------------- CARD */
  .card {
    background: var(--c-surface);
    border: var(--bw) solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--lift);
    padding: var(--sp-4);
  }
  .card__title { font: 800 var(--fs-400)/var(--lh-tight) var(--display-face); margin-bottom: var(--sp-1); }
  .card__meta  { font: 700 var(--fs-200)/1.4 var(--font-body); color: var(--c-fg-2); }

  .eyebrow {
    display: flex; align-items: center; gap: var(--sp-3);
    font: 800 var(--fs-100)/1 var(--display-face);
    letter-spacing: .08em; color: var(--c-fg-3); margin-bottom: var(--sp-2);
  }
  .eyebrow::after {
    content: ""; flex: 1 1 auto; height: 3px; border-radius: var(--pill);
    background: var(--c-surface-2); border: 2px solid var(--c-line); border-width: 0 0 3px;
  }

  /* --------------------------------------------------------------- CHIPS */
  .chips { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
  @media (min-width: 480px) { .chips { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

  .chips--dense { grid-template-columns: repeat(2, 1fr); }
  .chips--dense .chip { padding-inline: var(--sp-3); gap: var(--sp-2); }
  .chips--dense .chip__label { font-size: var(--fs-200); }
  @media (min-width: 480px) { .chips--dense { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }

  .chip {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; min-height: var(--tap-row);
    padding: var(--sp-2) var(--sp-4);
    text-align: left; cursor: pointer;
    background: var(--c-surface); color: var(--c-fg);
    border: var(--bw) solid var(--c-line); border-radius: var(--pill);
    box-shadow: var(--lift);
    font: 800 var(--fs-300)/var(--lh-tight) var(--font-body);
    transition: transform .08s ease, box-shadow .08s ease;
  }
  .chip__label { flex: 1 1 auto; min-width: 0; }
  .chip__tick  { margin-left: auto; visibility: hidden; flex: none; }

  .chip:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--ink); }

  /* Selected: luminance inversion + a tick + aria-pressed. Never colour alone. */
  .chip[aria-pressed="true"] {
    background: var(--c-sel-bg); color: var(--c-sel-fg);
    border-color: var(--c-line);
  }
  .chip[aria-pressed="true"] .chip__tick { visibility: visible; }

  .pupil { display: grid; gap: var(--sp-2); }

  /* Pure-CSS tick. */
  .tick { position: relative; width: 18px; height: 18px; }
  .tick::before {
    content: ""; position: absolute; left: 3px; top: 9px;
    width: 4px; height: 4px; border-radius: 1px; background: currentColor;
    box-shadow: 4px 4px 0 0 currentColor, 8px 0 0 0 currentColor,
                12px -4px 0 0 currentColor, 16px -8px 0 0 currentColor;
  }

  /* --------------------------------------------------------------- GROUP */
  .group {
    border: var(--bw) solid var(--c-line); border-radius: var(--r-card);
    background: var(--c-surface); box-shadow: var(--lift); overflow: hidden;
    margin-block: var(--sp-2);
  }
  .group__summary {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
    cursor: pointer; list-style: none;
    font: 800 var(--fs-300)/var(--lh-tight) var(--font-body);
  }
  .group__summary::-webkit-details-marker { display: none; }
  .group__summary::after { content: "+"; margin-left: auto; font: 800 var(--fs-500)/1 var(--font-num); }
  .group[open] > .group__summary::after { content: "–"; }
  .group__count {
    margin-left: auto; padding: 1px var(--sp-3);
    background: var(--c-accent); color: var(--c-on-accent);
    border-radius: var(--pill); font: 800 var(--fs-100)/1.7 var(--font-num);
  }
  .group[open] > .group__summary { border-bottom: var(--bw) solid var(--c-line); }
  .group > .chips { padding: var(--sp-3); }

  /* ------------------------------------------------------------ SEVERITY */
  .sev {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4); min-height: var(--tap-row); width: 100%;
    border: var(--bw) solid var(--c-line); border-radius: var(--pill);
    background: var(--c-surface); box-shadow: var(--lift);
    font: 800 var(--fs-300)/1 var(--font-body) !important;
  }
  .sev__word { color: var(--c-fg); }
  .sev__swatch {
    width: 22px; height: 22px; flex: none;
    border: 2.5px solid var(--c-line); border-radius: 7px;
    background-repeat: repeat;
  }
  /* Texture, not a bar that fills. Severity can never read as a meter. */
  .sev[data-sev="1"] .sev__swatch { background-color: var(--c-sev-1);
    background-image: radial-gradient(rgb(36 31 51 / .55) 1px, transparent 1.2px); background-size: 7px 7px; }
  .sev[data-sev="2"] .sev__swatch { background-color: var(--c-sev-2);
    background-image: radial-gradient(rgb(36 31 51 / .55) 1.1px, transparent 1.3px); background-size: 5px 5px; }
  .sev[data-sev="3"] .sev__swatch { background-color: var(--c-sev-3);
    background-image: repeating-conic-gradient(rgb(36 31 51 / .5) 0 25%, transparent 0 50%); background-size: 6px 6px; }
  .sev[data-sev="3"] { border-width: var(--bw-lg); }
  /* Severity never animates, pulses or flashes. */
  .sev, .sev * { animation: none !important; transition: none !important; }

  /* ------------------------------------------------------------- BUTTONS */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: var(--tap); padding: var(--sp-2) var(--sp-5);
    cursor: pointer; text-align: center;
    background: var(--c-surface); color: var(--c-fg);
    border: var(--bw) solid var(--c-line); border-radius: var(--pill);
    box-shadow: var(--lift);
    font: 800 var(--fs-300)/1 var(--font-body) !important;
    transition: transform .08s ease, box-shadow .08s ease;
  }
  .btn:active { transform: translateY(var(--press)); box-shadow: 0 0 0 var(--ink); }
  .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
  .btn--primary   { background: var(--c-accent); color: var(--c-on-accent); }
  .btn--secondary { background: var(--amber); color: var(--ink); }
  .btn--danger    { background: var(--coral); color: var(--ink); }
  .btn--ghost     { background: transparent; box-shadow: none; }
  .btn--lg        { min-height: 56px; padding-inline: var(--sp-6); font-size: var(--fs-400) !important; }

  .actionbar {
    position: fixed; inset: auto 0 0 0; z-index: 25;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--c-surface); border-top: var(--bw) solid var(--c-line);
  }
  .actionbar .btn--primary, .actionbar .btn--lg { flex: 1 1 auto; }

  /* --------------------------------------------------------------- FORMS */
  .field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
  .field__label { font: 800 var(--fs-200)/1 var(--font-body) !important; }
  .field__input, .field__select {
    min-height: var(--tap); width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-surface-2); color: var(--c-fg);
    border: var(--bw) solid var(--c-line); border-radius: var(--r-field);
    font: 700 var(--fs-300)/1.3 var(--font-body);
  }
  .field__hint  { font: 700 var(--fs-200)/1.4 var(--font-body); color: var(--c-fg-2); }
  .field__error { font: 800 var(--fs-200)/1.4 var(--font-body); color: var(--coral); }
  .field--error .field__input, .field--error .field__select { border-width: var(--bw-lg); }

  /* --------------------------------------------------------------- TOAST */
  .toast {
    position: fixed; z-index: 40;
    left: var(--sp-3); right: var(--sp-3);
    bottom: calc(var(--bottom-chrome) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-surface); color: var(--c-fg);
    border: var(--bw) solid var(--c-line); border-radius: var(--r-card);
    box-shadow: var(--lift-lg);
    font: 800 var(--fs-300)/1.3 var(--font-body);
  }
  .toast--error { background: var(--coral); }
  .toast--draft { border-color: var(--c-violet); }

  /* --------------------------------------------------------- EMPTY/LOAD */
  .empty {
    text-align: center; padding: var(--sp-6) var(--sp-4);
    border: var(--bw) dashed var(--c-line); border-radius: var(--r-card);
    color: var(--c-fg-2);
  }
  .empty__head { font: 800 var(--fs-400)/1.2 var(--display-face); color: var(--c-fg); }
  .empty__body { font: 700 var(--fs-200)/1.5 var(--font-body); }
  .loading__head { font: 800 var(--fs-300)/1 var(--display-face); }
}

@layer record {
  /* Records are calm: no sticker shadow, no pill, no candy accent. All four
     switches are already neutralised by the .record scope in tokens.css. */
  .record {
    background: var(--c-surface);
    border: var(--bw) solid var(--c-line);
    border-left-width: 8px;
    border-radius: var(--pill);
    padding: var(--sp-4);
  }
  .record[data-sev="1"] { border-left-color: var(--c-sev-1); }
  .record[data-sev="2"] { border-left-color: var(--c-sev-2); }
  .record[data-sev="3"] { border-left-color: var(--c-sev-3); }

  .record > .record__name { display: block; font-size: var(--fs-400); margin-bottom: var(--sp-1); }
  .record > .card__meta   { display: block; margin-bottom: var(--sp-3); }
  .record > .sev          { display: inline-flex; width: auto; margin-bottom: var(--sp-3); }
  .record > .btn          { display: flex; width: 100%; }
  .record + .record       { margin-top: var(--sp-3); }
}

/* =========================================================== DASHBOARD
   Student detail: stat tiles, tallies, risk flags, advice, history.
   All inside [data-child-data] so play switches are already neutralised.
   ======================================================================== */
@layer components {
  .student-head__name { font: 800 var(--fs-600)/1.1 var(--font-body); }
  .subhead { font: 800 var(--fs-200)/1 var(--font-body); color: var(--c-fg-2);
             margin: var(--sp-4) 0 var(--sp-2); }

  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
  @media (max-width: 420px) { .stats { grid-template-columns: repeat(2, 1fr); } }
  .stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--sp-3) var(--sp-2);
    background: var(--c-surface); border: var(--bw) solid var(--c-line);
    border-radius: var(--r-field);
  }
  .stat__n { font: 800 var(--fs-500)/1 var(--font-num); }
  .stat__k { font: 700 var(--fs-100)/1 var(--font-body); color: var(--c-fg-2); text-align: center; }

  .tallies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
  .tallies li { display: flex; justify-content: space-between; gap: var(--sp-3);
                padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2);
                border-radius: var(--r-field); font-weight: 700; }
  .tallies b { font-variant-numeric: tabular-nums; }

  /* Risk flags — clear but never lurid. No animation, dignified wording. */
  .card--flag { border-width: var(--bw-lg); }
  .flagrow { padding: var(--sp-3); border-radius: var(--r-field);
             background: var(--c-surface-2); margin-bottom: var(--sp-2);
             border-left: 8px solid var(--c-fg-3); }
  .flagrow--urgent  { border-left-color: var(--coral); }
  .flagrow--concern { border-left-color: var(--amber); }
  .flagrow--watch   { border-left-color: var(--blue); }
  .flagrow__label  { font: 800 var(--fs-300)/1.2 var(--font-body); }
  .flagrow__action { font: 700 var(--fs-200)/1.4 var(--font-body); margin-top: var(--sp-1); }

  .flag { font: 800 var(--fs-100)/1.3 var(--font-body); padding: var(--sp-1) var(--sp-3);
          border-radius: var(--pill); display: inline-block; margin-bottom: var(--sp-2);
          background: var(--c-surface-2); border-left: 6px solid var(--c-fg-3); }
  .flag--urgent  { border-left-color: var(--coral); }
  .flag--concern { border-left-color: var(--amber); }
  .flag--watch   { border-left-color: var(--blue); }

  .advice { margin-bottom: var(--sp-4); }
  .advice__msg  { font: 800 var(--fs-300)/1.4 var(--font-body); margin-bottom: var(--sp-2); }
  .advice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .advice__list li { padding: var(--sp-3); background: var(--c-surface-2);
                     border-radius: var(--r-field); border-left: 4px solid var(--c-accent);
                     font-weight: 700; line-height: 1.45; }

  .histrow { display: flex; align-items: center; gap: var(--sp-3); width: 100%;
             min-height: var(--tap); padding: var(--sp-2) var(--sp-3);
             background: var(--c-surface-2); border: var(--bw) solid var(--c-line);
             border-radius: var(--r-field); margin-bottom: var(--sp-2); cursor: pointer;
             font: 700 var(--fs-200)/1.2 var(--font-body); text-align: left; }
  .histrow__date { font-variant-numeric: tabular-nums; min-width: 56px; color: var(--c-fg-2); }
  .histrow__evt  { flex: 1 1 auto; }
  .histrow .sev  { width: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .histrow .sev__swatch { width: 18px; height: 18px; }
}