/* ICL brand system — Phase 8 UX (plan D28)
   ------------------------------------------------------------
   Tokens, type and the three screens from the Claude Design handoff
   (design_handoff_icl_brand/README.md): pupil home, teacher in lesson,
   SENCO pupil report header.

   Everything here is scoped to .icl-* class names and is loaded only by the
   three pages that carry those screens, so the existing design system in
   styles.css is untouched on every other page.

   Hard rules carried through from the brief:
     • Nothing may suggest a recording: no red dots, no pulsing, no camera
       glyphs, and the mark is never animated.
     • No red or green on the wellbeing scale — one hue, five lightness steps.
     • Copy is sentence case, no exclamation marks, no dashes as punctuation.
     • Pupil screens: body text never below 17px, hit targets at least 44px.
     • No shadows anywhere. */

:root {
  /* Core */
  --icl-moss: #2e4a3f;      /* primary, 8.9:1 on Linen */
  --icl-lamp: #e3b74c;      /* default Join colour */
  --icl-soil: #1f2a22;      /* text, 14.8:1 on Linen */
  --icl-stone: #5c6660;     /* secondary text, 5.2:1 on Linen */
  --icl-thread: #d8d6ce;    /* borders and dividers */
  --icl-linen: #f6f5f0;     /* surface */
  --icl-body: #3e4842;      /* body text on screens */
  --icl-white: #ffffff;     /* page ground in reports only */

  /* Wellbeing scale: one hue, five lightness steps, read as weight */
  --icl-wb-1: #dfe7e1;      /* Heavy */
  --icl-wb-2: #bcccc1;      /* Unsettled */
  --icl-wb-3: #8fa99a;      /* Okay */
  --icl-wb-4: #5c7a6a;      /* Settled */
  --icl-wb-5: #2e4a3f;      /* Ready */

  /* Join colours (all take Soil text above 7:1). Lamp is the default; each
     pupil's own choice is on the pupil record (back office, 10 Oct 2026) and
     the pupil home sets the button from it. */
  --icl-join-lamp: #e3b74c;
  --icl-join-sky: #7fa7c9;
  --icl-join-heather: #c9a0b4;
  --icl-join-sage: #9db89a;

  /* Dark chrome (teacher view) */
  --icl-dark-divider: #35443a;
  --icl-dark-stroke: #8fa99a;
  --icl-caption-plate: rgba(31, 42, 34, 0.92);

  --icl-font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* A full-screen screen covers the page, so the page behind it must not scroll:
   otherwise its scrollbar steals width from the screen on top, which is what
   pushed the question tray tab in from the right edge of the video. */
html.icl-screen-open,
html.icl-screen-open body {
  overflow: hidden;
}

/* Transitions are 160ms ease out. No bounces, no springs. */

/* Several parts of these screens are laid out with flex or grid AND toggled
   with the `hidden` attribute, which would otherwise win over the browser's
   own [hidden] rule. Keep hidden meaning hidden. */
.icl-home[hidden],
.icl-stage[hidden],
.icl-home [hidden],
.icl-stage [hidden],
.icl-lesson [hidden],
.icl-report [hidden] {
  display: none;
}

/* Focus: 2px Soil on light surfaces, 2px Linen on dark chrome. */
.icl-home :focus-visible,
.icl-signin :focus-visible,
.icl-report :focus-visible {
  outline: 2px solid var(--icl-soil);
  outline-offset: 2px;
}
.icl-stage :focus-visible,
.icl-lesson :focus-visible {
  outline: 2px solid var(--icl-linen);
  outline-offset: 2px;
}
/* Inside a sheet the ground is Linen again, so the ring goes back to Soil. */
.icl-sheet :focus-visible,
.icl-confirm :focus-visible {
  outline: 2px solid var(--icl-soil);
  outline-offset: 2px;
}

/* Hover: buttons darken 6 percent, links underline. */
.icl-join:not(:disabled):hover,
.icl-btn-moss:hover,
.icl-btn-primary:hover,
.icl-btn-linen:hover,
.icl-btn-outline:hover {
  filter: brightness(0.94);
}

/* ============================================================
   1. PUPIL HOME
   The pupil's only landing screen. One button. Nothing else.
   ============================================================ */
.icl-home {
  position: fixed;
  inset: 0;
  z-index: 41; /* above the lesson screen, so the after check covers it */
  background: var(--icl-linen);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  display: flex;
  overflow: auto;
}
/* The screen itself. It fills a phone and a 640 wide Chromebook exactly as the
   handoff draws it, and is capped and centred beyond that so a large monitor
   does not push the mark and the Join button into opposite corners. */
.icl-home-inner {
  position: relative;
  flex: 1;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.icl-home-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icl-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icl-lockup-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--icl-moss);
  letter-spacing: -0.02em;
}
/* On a phone the top row is the mark alone; the lockup appears from the
   laptop and Chromebook width upwards. */
.icl-home .icl-lockup-text { display: none; }
.icl-home-day {
  font-size: 14px;
  color: var(--icl-stone);
}

.icl-home p { margin: 0; }
.icl-home-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.icl-greeting {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.icl-eyebrow {
  font-size: 14px;
  color: var(--icl-stone);
  margin-top: 12px;
}
.icl-lesson-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
}
.icl-countdown {
  font-size: 17px;
  color: var(--icl-body);
  line-height: 1.5;
  margin-top: 10px;
}

.icl-join {
  height: 64px;
  border-radius: 32px;
  border: 0;
  width: 100%;
  background: var(--icl-join-lamp); /* default; pupil.js overrides with the pupil's own */
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-weight: 500;
  font-size: 18px;
  cursor: pointer;
  /* Opens with a fade from 40 to 100 percent. The only motion on this screen. */
  transition: opacity 300ms ease-out;
}
/* Not open yet: 40 percent opacity, no colour change. */
.icl-join:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Laptop and Chromebook: the same screen widens. Nothing is added. */
@media (min-width: 640px) {
  .icl-home-inner {
    padding: 32px 48px;
    /* Top row across the top; the text and the Join button share the row
       below it, both aligned to the end. Nothing is added at wider sizes. */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-content: space-between;
    column-gap: 32px;
    row-gap: 32px;
  }
  .icl-home .icl-lockup-text { display: block; }
  .icl-home-top { grid-column: 1 / -1; align-self: start; }
  .icl-home-text { grid-column: 1; align-self: end; }
  .icl-home-text .icl-eyebrow { margin-top: 8px; }
  .icl-home-text .icl-countdown { margin-top: 6px; }
  .icl-lesson-title { font-size: 36px; }
  .icl-join { grid-column: 2; align-self: end; width: auto; padding: 0 40px; white-space: nowrap; }
  .icl-home-check { grid-column: 1 / -1; }
}

/* Wider than the content needs: hold it at 720 and centre it both ways. The
   720 by 400 box keeps the handoff's proportions, so the greeting still sits
   away from the top row and the button still sits at the foot of the block. */
@media (min-width: 720px) {
  .icl-home {
    align-items: center;
    justify-content: center;
    padding: 32px;
  }
  .icl-home-inner {
    flex: none;
    width: 100%;
    max-width: 720px;
    min-height: 400px;
    max-height: 100%;
  }
}

/* The wellbeing check after Join and before the video (plan D31). It is a step
   of its own on the Linen ground, never part of the home screen itself. */
.icl-home-check {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.icl-home-check > * { width: 100%; max-width: 520px; }

/* The check's behaviour is unchanged (it is not one of the three screens);
   on the home ground it is simply presented in the brand's own tokens rather
   than the admin design system's card. Pupil rules hold: body text at 17px,
   hit targets at least 44px, and no option highlighted by default. */
.icl-home-check .wellbeing {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--icl-font);
}
.icl-home-check .wb-q {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--icl-soil);
  margin: 0;
}
.icl-home-check .wb-sub,
.icl-home-check .wb-thanks {
  font-size: 17px;
  line-height: 1.5;
  color: var(--icl-body);
  margin: 0;
}
.icl-home-check .wb-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.icl-home-check .wb-btn,
.icl-home-check .wb-readaloud,
.icl-home-check .wb-skip {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 1.5px solid var(--icl-thread);
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
}
.icl-home-check .wb-skip {
  border-color: transparent;
  background: none;
  color: var(--icl-stone);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.icl-home-check .wb-readaloud { font-size: 15px; min-height: 44px; }

/* The understanding check (Phase 4) is a step on this ground too once the
   lesson is over (D32). Its behaviour is untouched: optional, skippable, and
   never a score, a percentage, a cross or a failure word. */
.icl-home-check .check {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-family: var(--icl-font);
  width: 100%;
}
.icl-home-check .check-intro {
  font-size: 17px;
  line-height: 1.5;
  color: var(--icl-body);
  margin: 0;
}
.icl-home-check #checkBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.icl-home-check .check-q {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--icl-thread);
  background: none;
}
.icl-home-check #checkBody > .check-q:first-child { border-top: 0; padding-top: 0; }
.icl-home-check .check-qtext {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--icl-soil);
  margin: 0;
}
.icl-home-check .check-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.icl-home-check .check-feedback {
  font-size: 15px;
  line-height: 1.5;
  color: var(--icl-body);
  margin: 0;
}
.icl-home-check .btn-primary {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 22px;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

/* ============================================================
   2. TEACHER IN LESSON
   The live feed with minimal chrome, so the teacher can ignore it.
   ============================================================ */
.icl-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--icl-soil);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  display: flex;
  flex-direction: column;
}
.icl-stage p { margin: 0; }

/* Video and question tray share the row above the bar. */
.icl-stage-main {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.icl-stage-video {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--icl-soil);
}
/* The feed letterboxes inside whatever room it is given; it never sets the
   size of the layout. */
.icl-stage-video video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  object-fit: contain;
  background: var(--icl-soil);
}
/* D107: the stage while the teacher shares. Linen on Soil like the label;
   centred, nothing to press, the bar below holds Stop sharing. */
.icl-share-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  max-width: 480px;
  text-align: center;
  color: var(--icl-linen);
}
.icl-share-card[hidden] { display: none; }
.icl-share-card-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}
.icl-share-card-note {
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.85;
}
.icl-stage-label {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--icl-linen);
}
.icl-caption-plate {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: center;
}
.icl-caption-plate > span {
  background: var(--icl-caption-plate);
  color: var(--icl-linen);
  font-size: 20px;
  line-height: 1.4;
  padding: 10px 18px;
  border-radius: 8px;
  max-width: 760px;
  text-align: center;
}

.icl-stage-bar {
  height: 72px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--icl-dark-divider);
  flex: none;
  min-width: 0;
}
.icl-stage-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--icl-linen);
  min-width: 0;
  overflow: hidden;
}
.icl-stage-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
/* D94: three controls on a narrow laptop or a phone wrap rather than overflow. */
@media (max-width: 760px) {
  .icl-stage-bar { height: auto; padding: 12px 20px; flex-wrap: wrap; }
  .icl-stage-controls { flex-wrap: wrap; }
}

/* Captions toggle: a 30 x 18 switch, Linen label, no colour alarm. */
.icl-btn-outline {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1.5px solid var(--icl-dark-stroke);
  background: none;
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.icl-switch {
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: var(--icl-dark-stroke);
  position: relative;
  flex: none;
  transition: background 160ms ease-out;
}
.icl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--icl-soil);
  transition: transform 160ms ease-out;
}
/* Off: the knob slides to the left. The track keeps one hue. */
.icl-switch.is-off::after { transform: translateX(-12px); }

.icl-btn-linen {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 0;
  background: var(--icl-linen);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* End lesson asks for one confirmation. Geometry is not in the handoff; it is
   built from the same tokens (Linen panel, radius 12, no shadow). */
.icl-confirm {
  position: absolute;
  inset: 0;
  background: var(--icl-caption-plate);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.icl-confirm-card {
  background: var(--icl-linen);
  color: var(--icl-soil);
  border-radius: 12px;
  padding: 28px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.icl-confirm-card p {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.icl-confirm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.icl-btn-primary {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 0;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.icl-btn-quiet {
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 1.5px solid var(--icl-thread);
  background: none;
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  cursor: pointer;
}

/* ============================================================
   3. SENCO PUPIL REPORT HEADER
   Top of a pupil report credible enough for an EHCP panel.
   ============================================================ */
.icl-report {
  background: var(--icl-white);
  border: 1px solid var(--icl-thread);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  /* The reference artboard's radius 12 is not carried into the page. */
  /* The header folds on its OWN width, not the window's: it sits inside the
     admin shell, which takes a sidebar's worth of the page. */
  container-type: inline-size;
}
/* D34: the header has no app bar of its own. The admin shell's top bar and
   sidebar stay above it, so the page has one set of chrome, not two. */
.icl-report-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.icl-report-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.icl-report-id {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.icl-report-kicker { font-size: 14px; color: var(--icl-stone); }
/* Rule 9 (handoff v4): the Join dot sits before the name wherever a pupil is named. */
.icl-report-name { font-size: 32px; font-weight: 500; line-height: 1.1; display: flex; align-items: center; gap: 10px; }
.icl-report-meta { font-size: 15px; color: var(--icl-body); }

.icl-report-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.icl-select {
  max-width: 100%;
  height: 44px;
  padding: 0 36px 0 16px;
  border-radius: 8px;
  border: 1.5px solid var(--icl-thread);
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  /* The chevron: an 8px square rotated 45 degrees, Stone, drawn as a border. */
  background-image: linear-gradient(45deg, transparent 50%, var(--icl-stone) 50%),
    linear-gradient(135deg, var(--icl-stone) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 1px), calc(100% - 15px) calc(50% - 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Export PDF is a secondary, not the page's primary (handoff v4 rule 7, D78):
   Thread outline, Soil text. The header keeps its 44 px, radius 8 shape. */
.icl-export {
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1.5px solid var(--icl-thread);
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.icl-export:hover { background: var(--icl-linen); }
.icl-custom-range {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--icl-stone);
}
.icl-custom-range input {
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1.5px solid var(--icl-thread);
  font-family: var(--icl-font);
  font-size: 15px;
  color: var(--icl-soil);
  background: var(--icl-white);
}

/* Score panel: the score is never shown without its parts. */
.icl-score-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
  padding: 24px 28px;
  border: 1px solid var(--icl-thread);
  border-radius: 12px;
  background: var(--icl-linen);
}
.icl-score-left { display: flex; flex-direction: column; gap: 4px; }
.icl-score-label { font-size: 14px; color: var(--icl-stone); }
.icl-score-value { display: flex; align-items: baseline; gap: 8px; }
.icl-score-number {
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.icl-score-of { font-size: 16px; color: var(--icl-stone); }
.icl-score-method {
  font-size: 15px;
  color: var(--icl-moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--icl-font);
  cursor: pointer;
  text-align: left;
}

.icl-score-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.icl-cell { display: flex; flex-direction: column; gap: 4px; }
.icl-cell-label { font-size: 13px; color: var(--icl-stone); }
.icl-cell-value {
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.icl-cell-note { font-size: 13px; color: var(--icl-body); margin-top: 4px; }

/* Wellbeing on arrival: the same tint ramp the pupil sees, with the marked
   step outlined. No judgement colour, no red, no green. */
.icl-ramp { display: flex; gap: 3px; margin-top: 8px; }
.icl-ramp span {
  flex: 1;
  height: 14px;
  border-radius: 3px;
}
.icl-ramp span.is-marked {
  outline: 2px solid var(--icl-soil);
  outline-offset: 1px;
}

/* The score method, opened in place below the panel. */
.icl-method { border: 1px solid var(--icl-thread); border-radius: 12px; padding: 20px 24px; }
.icl-method h3 { margin: 0 0 12px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.icl-method table { width: 100%; border-collapse: collapse; font-size: 14px; }
.icl-method th, .icl-method td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--icl-thread);
}
.icl-method th { font-weight: 500; color: var(--icl-stone); }
.icl-method p { font-size: 14px; color: var(--icl-body); margin: 12px 0 0; }

/* Four cells across need about 860px of header. Below that the score sits
   above its parts and the parts fold to a tidy two by two. */
@container (max-width: 860px) {
  .icl-score-panel { grid-template-columns: 1fr; gap: 24px; }
  .icl-score-cells { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 560px) {
  .icl-report-body { padding: 24px 20px; }
  .icl-score-cells { grid-template-columns: 1fr; }
}

/* ============================================================
   4. SIGN IN
   The front door, on the same ground as the pupil home. One primary
   action; the demo logins sit below the form, out of its way.
   ============================================================ */
.icl-signin {
  margin: 0;
  min-height: 100vh;
  background: var(--icl-linen);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
}
.icl-signin,
.icl-signin * { box-sizing: border-box; }
.icl-signin p,
.icl-signin h1,
.icl-signin h2 { margin: 0; }

.icl-signin-inner {
  /* auto margins centre it, and give way rather than clip when the page is
     taller than the window. */
  margin: auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Wordmark: mark + name, with the handoff's own proportions (gap 0.29 D and
   the name at 34/56 of the mark's diameter). */
.icl-wordmark {
  display: flex;
  align-items: center;
  gap: 9px; /* 0.29 x 32 */
}
.icl-wordmark-text {
  font-size: 20px; /* 34 at D 56, scaled to D 32 */
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--icl-moss);
  line-height: 1.2;
}
.icl-signin-head { display: flex; flex-direction: column; gap: 10px; }
.icl-signin-tagline {
  font-size: 17px;
  line-height: 1.5;
  color: var(--icl-body);
}

.icl-card {
  border: 1px solid var(--icl-thread);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.icl-card-title { font-size: 32px; font-weight: 500; line-height: 1.1; }
.icl-card-subtitle { font-size: 20px; font-weight: 500; line-height: 1.3; }

.icl-form { display: flex; flex-direction: column; gap: 8px; }
.icl-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--icl-stone);
  line-height: 1.5;
}
.icl-label + .icl-input { margin-bottom: 12px; }
.icl-input {
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--icl-thread);
  border-radius: 8px;
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 17px;
  width: 100%;
}
.icl-btn-moss {
  height: 48px;
  margin-top: 8px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
.icl-error {
  font-size: 15px;
  line-height: 1.5;
  color: var(--icl-soil);
}

/* "or": a Thread rule either side of a quiet label. */
.icl-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--icl-stone);
}
.icl-or::before,
.icl-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--icl-thread);
}

.icl-oauth { display: flex; flex-direction: column; gap: 10px; }
.icl-oauth-btn {
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--icl-thread);
  border-radius: 8px;
  background: none;
  color: var(--icl-soil);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.icl-oauth-btn:hover { text-decoration: none; filter: brightness(0.97); }
.icl-oauth-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--icl-thread);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--icl-stone);
  flex: none;
}
/* login.js marks a provider that is not configured yet. */
.icl-oauth-btn.is-disabled { opacity: 0.4; cursor: default; }

.icl-note { font-size: 14px; line-height: 1.5; color: var(--icl-stone); }

.icl-demo-list { display: flex; flex-direction: column; gap: 8px; }
.icl-demo-list .demo-login {
  min-height: 48px;
  padding: 10px 16px;
  border: 1.5px solid var(--icl-thread);
  border-radius: 8px;
  background: none;
  font-family: var(--icl-font);
  color: var(--icl-soil);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
.icl-demo-list .demo-login:hover { filter: brightness(0.97); }
.icl-demo-list .demo-login strong { font-size: 17px; font-weight: 500; }
.icl-demo-list .demo-login span { font-size: 14px; color: var(--icl-stone); }

.icl-signin-foot {
  font-size: 13px;
  line-height: 1.5;
  color: var(--icl-stone);
}

@media (max-width: 420px) {
  .icl-signin { padding: 32px 20px; }
  .icl-card { padding: 24px 20px; }
}

/* ============================================================
   2b. TEACHER QUESTION TRAY (D37)
   Questions arrive as text on the teacher's own laptop, never projected.
   The teacher answers aloud to the room, or not at all. There is no reply
   field here, and nothing uses red, a dot or a circle that could read as a
   recording control.
   ============================================================ */
.icl-tray {
  width: 320px;
  flex: none;
  background: #243029;
  border-left: 1px solid var(--icl-dark-divider);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* D38: it opens itself when a question arrives. One short ease out, no
     sound, nothing announced anywhere else on the screen. */
  transition: width 160ms ease-out;
}
.icl-tray.is-collapsed {
  width: 0;
  border-left-width: 0;
}
/* The contents keep their width while the tray collapses around them, so the
   rows slide out of view instead of reflowing on the way. */
.icl-tray-head,
.icl-tray-list {
  width: 320px;
  flex: none;
  box-sizing: border-box;
}
.icl-tray-list { flex: 1 1 auto; }
.icl-tray-head {
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--icl-dark-divider);
  flex: none;
}
.icl-tray-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--icl-linen);
}
.icl-tray-hide {
  font-size: 14px;
  color: var(--icl-dark-stroke);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--icl-font);
  cursor: pointer;
}
.icl-tray-list { overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
  .icl-tray { transition: none; }
}
.icl-tray-row {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--icl-dark-divider);
}
.icl-tray-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
/* Stone fails AA on dark chrome, so the dark secondary stands in for it. */
.icl-tray-who { font-size: 14px; color: var(--icl-dark-stroke); }
.icl-tray-when { font-size: 13px; color: var(--icl-dark-stroke); }
.icl-tray-text {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--icl-linen);
  margin: 0;
}
.icl-tray-actions { display: flex; gap: 8px; }
.icl-tray-pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1.5px solid var(--icl-dark-stroke);
  background: none;
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 14px;
  cursor: pointer;
}
.icl-tray-pill:hover { filter: brightness(0.94); }
/* Answered: quieted, and the pills give way to the word itself. */
.icl-tray-row.is-answered { opacity: 0.45; gap: 8px; }

/* Collapsed: a tab on the right edge. Empty means the tab alone, no text. */
.icl-tray-tab {
  width: 44px;
  flex: none;
  background: #243029;
  border: 0;
  border-left: 1px solid var(--icl-dark-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.icl-tray-tab span {
  font-size: 14px;
  font-weight: 500;
  color: var(--icl-linen);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--icl-font);
}

/* The end-lesson dialog, to the handoff: 320 wide, buttons right aligned. */
.icl-confirm-card { width: 320px; max-width: 100%; gap: 16px; padding: 24px; }
.icl-confirm-card p { font-size: 20px; font-weight: 500; line-height: 1.3; }
.icl-confirm-note {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--icl-body);
}
.icl-confirm-actions { justify-content: flex-end; gap: 10px; }
.icl-btn-outline-moss {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1.5px solid var(--icl-moss);
  background: none;
  color: var(--icl-moss);
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.icl-btn-outline-moss:hover { filter: brightness(0.94); }
.icl-btn-primary { padding: 0 18px; }

/* ============================================================
   4. PUPIL IN LESSON (D37)
   What the pupil looks at for the whole lesson, as calm as the home screen.
   One way delivery: no pupil camera, no raise hand, no chat. The only action
   is a written question. No name, no greeting, no live badge or dot.
   ============================================================ */
.icl-lesson {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--icl-soil);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  display: flex;
  flex-direction: column;
}
.icl-lesson p { margin: 0; }

.icl-lesson-video {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--icl-soil);
  min-height: 0;
}
.icl-lesson-video video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  object-fit: contain;
  background: var(--icl-soil);
}
/* Waiting and Ended are plain Soil: no stripes, nothing to look at. */
.icl-lesson-video.is-plain video { display: none; }
.icl-lesson-state {
  position: absolute;
  left: 20px;
  right: 20px;
  font-size: 17px;
  color: var(--icl-linen);
  text-align: center;
}
/* Connection lost: the last frame held and dimmed, one fade, no spinner. */
.icl-lesson-dim {
  position: absolute;
  inset: 0;
  background: rgba(31, 42, 34, 0.7);
  animation: icl-fade-in 160ms ease-out;
}
@keyframes icl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.icl-lesson-bar {
  height: 72px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--icl-dark-divider);
  flex: none;
  min-width: 0;
}
/* The left group gives way before Leave does, so Leave is always whole and
   always inside the viewport. */
.icl-lesson-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.icl-lesson .icl-btn-linen { flex: none; }
.icl-pill {
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  border: 1.5px solid var(--icl-linen);
  background: none;
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
.icl-pill:hover { filter: brightness(0.94); }
/* While its sheet is open the pill is filled. */
.icl-pill.is-open {
  background: var(--icl-linen);
  color: var(--icl-soil);
}
/* After sending, the Ask pill gives way to a plain line for four seconds. */
.icl-sent {
  height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--icl-linen);
  white-space: nowrap;
}

/* Sheets sit over the video, anchored to the bottom. Never a new page. */
.icl-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
}
.icl-sheet-card {
  width: 560px;
  max-width: 100%;
  background: var(--icl-linen);
  color: var(--icl-soil);
  border-radius: 16px 16px 0 0;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
.icl-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.icl-sheet-title { font-size: 17px; font-weight: 500; color: var(--icl-soil); }
.icl-sheet-close {
  font-size: 15px;
  color: var(--icl-moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--icl-font);
  cursor: pointer;
}
.icl-ask-field {
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--icl-thread);
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 17px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
  width: 100%;
}
.icl-ask-field::placeholder { color: var(--icl-stone); }
.icl-ask-send {
  height: 52px;
  border-radius: 26px;
  border: 0;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 160ms ease-out;
}
.icl-ask-send:disabled { opacity: 0.4; cursor: default; }
.icl-ask-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--icl-stone);
}

.icl-res-list { display: flex; flex-direction: column; }
.icl-res-row {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--icl-thread);
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 8px 0;
  font-family: var(--icl-font);
  font-size: 17px;
  color: var(--icl-soil);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.icl-res-row:last-child { border-bottom: 1px solid var(--icl-thread); }
.icl-res-row:hover { filter: brightness(0.97); }
.icl-res-kind { font-size: 14px; color: var(--icl-stone); flex: none; }

/* The iOS tap-to-start fallback, in the brand's own pill rather than the
   admin system's black box. Only shown when a track is actually playing. */
.icl-lesson .tap-to-watch {
  position: absolute;
  height: 52px;
  padding: 0 24px;
  border-radius: 26px;
  border: 0;
  background: var(--icl-linen);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 17px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}

/* Leave: one confirmation, 280 wide. */
.icl-leave-card { width: 280px; }

/* Phone: the bar wraps to two rows and Leave is always last. */
@media (max-width: 560px) {
  .icl-lesson-bar {
    height: auto;
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .icl-lesson-bar-left {
    display: contents; /* so every pill wraps as its own item */
  }
  .icl-pill, .icl-btn-outline { padding: 0 16px; }
  .icl-lesson .icl-btn-linen { margin-left: auto; }
  .icl-lesson .icl-caption-plate { left: 16px; right: 16px; bottom: 16px; }
  .icl-lesson .icl-caption-plate > span { font-size: 18px; padding: 10px 16px; }
  .icl-sheet-card { width: 100%; border-radius: 16px 16px 0 0; padding: 20px 20px 24px; }
}

/* ---------- Later group, and the end-of-lesson summary (D39) ---------- */

/* Later questions leave the open list and gather in a quiet group at the foot
   of the tray, so what is still waiting on the teacher stays obvious. */
.icl-later-group {
  border-top: 1px solid var(--icl-dark-divider);
  margin-top: auto; /* sits at the bottom even when the tray is near empty */
}
.icl-later-head {
  width: 100%;
  min-height: 44px;
  padding: 12px 20px;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--icl-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--icl-dark-stroke);
  cursor: pointer;
  text-align: left;
}
.icl-later-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--icl-dark-stroke);
  border-bottom: 1.5px solid var(--icl-dark-stroke);
  transform: rotate(-45deg);
  margin-top: 2px;
  transition: transform 160ms ease-out;
  flex: none;
}
.icl-later-group.is-open .icl-later-chevron {
  transform: rotate(45deg);
  margin-top: -2px;
}
/* Greyed: still readable, plainly not the live list. */
.icl-tray-row.is-later { opacity: 0.55; gap: 8px; }

/* The summary the teacher settles the lesson on. Same ground and the same
   tokens as the tray it follows. */
.icl-summary {
  position: fixed;
  inset: 0;
  z-index: 42;
  background: var(--icl-soil);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.icl-summary p { margin: 0; }
.icl-summary-head {
  padding: 28px 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--icl-dark-divider);
  flex: none;
}
.icl-summary-title { font-size: 20px; font-weight: 500; line-height: 1.3; }
.icl-summary-note { font-size: 15px; line-height: 1.5; color: var(--icl-dark-stroke); }
.icl-summary-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 32px;
}
.icl-summary-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--icl-dark-divider);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}
.icl-summary-row.is-settled { opacity: 0.45; }
.icl-summary-who { font-size: 14px; color: var(--icl-dark-stroke); }
.icl-summary-text { font-size: 17px; line-height: 1.5; color: var(--icl-linen); }
.icl-summary-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.icl-summary-done {
  font-size: 14px;
  color: var(--icl-dark-stroke);
}
.icl-summary-foot {
  padding: 20px 32px;
  border-top: 1px solid var(--icl-dark-divider);
  display: flex;
  justify-content: flex-end;
  flex: none;
}

/* ============================================================
   5. ADMIN SHELL (D41)
   One frame the whole back office sits inside: app bar, optional demo
   banner, sidebar, page. Page internals keep their own markup and simply
   inherit the tokens and Lexend from here.
   ============================================================ */
.icl-shell {
  margin: 0;
  min-height: 100vh;
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
.icl-shell * { box-sizing: border-box; }

.icl-appbar {
  height: 56px;
  padding: 0 24px;
  background: var(--icl-linen);
  border-bottom: 1px solid var(--icl-thread);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
}
.icl-appbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.icl-appbar-left .icl-lockup { text-decoration: none; }
.icl-appbar-left .icl-lockup:hover { text-decoration: none; }
.icl-appbar-title {
  font-size: 14px;
  color: var(--icl-stone);
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icl-appbar-right { display: flex; align-items: center; gap: 16px; flex: none; }
.icl-appbar-user { font-size: 14px; color: var(--icl-stone); white-space: nowrap; }
.icl-link {
  font-size: 14px;
  color: var(--icl-moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--icl-font);
  cursor: pointer;
  white-space: nowrap;
}
.icl-start-lesson {
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 0;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.icl-start-lesson:hover { filter: brightness(0.94); }

/* The monthly "upload this month's export" nudge. Quiet and factual. */
.icl-reminder {
  min-height: 36px;
  padding: 8px 16px;
  margin: 0 0 16px;
  background: var(--icl-linen);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--icl-stone);
}

.icl-shell-row { flex: 1 1 auto; display: flex; min-height: 0; }

.icl-sidebar {
  width: 240px;
  flex: none;
  background: var(--icl-linen);
  border-right: 1px solid var(--icl-thread);
  padding: 8px 0;
}
.icl-group-head {
  width: 100%;
  height: 44px;
  padding: 0 20px;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--icl-soil);
  cursor: pointer;
  text-align: left;
}
.icl-group-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--icl-stone);
  border-bottom: 1.5px solid var(--icl-stone);
  transform: rotate(-45deg); /* closed: points right */
  margin-top: 2px;
  flex: none;
  transition: transform 160ms ease-out;
}
.icl-group.is-open .icl-group-chevron {
  transform: rotate(45deg); /* open: points down */
  margin-top: -2px;
}
.icl-nav-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 400;
  color: var(--icl-soil);
  text-decoration: none;
  border-left: 3px solid transparent;
  padding-left: 17px; /* the bar's width, so current text never shifts */
}
.icl-nav-item:hover { text-decoration: none; filter: brightness(0.97); }
.icl-nav-item.is-current {
  color: var(--icl-moss);
  border-left-color: var(--icl-moss);
}

.icl-page {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--icl-white);
  padding: 32px;
}
/* Page internals were written before this frame existed, and some are wider
   than a phone. They scroll inside the page rather than widening it. */
.icl-page-inner { max-width: 1120px; margin: 0 auto; min-width: 0; overflow-x: auto; }

/* Phone: the sidebar becomes a sheet under the app bar. */
.icl-menu-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1.5px solid var(--icl-thread);
  background: none;
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  cursor: pointer;
  flex: none;
}
.icl-sheet-foot {
  padding: 8px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.icl-scrim { display: none; }

@media (max-width: 760px) {
  .icl-appbar { padding: 0 16px; }
  .icl-appbar-title { display: none; }
  /* The handoff's phone app bar is Menu, the mark, and Start live lesson.
     Who is signed in, and signing out, live in the sheet instead. */
  .icl-appbar .icl-appbar-user,
  .icl-appbar #signOut { display: none; }
  .icl-appbar-left .icl-lockup-text { display: none; }
  .icl-start-lesson { padding: 0 16px; }
  .icl-shell-row { display: block; position: relative; }
  .icl-sidebar {
    display: none;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--icl-thread);
    padding: 8px 0 12px;
  }
  /* The sheet is stacked above the scrim on purpose. Without this it is a
     static box at z-index auto, the scrim is positioned at z-index 1, and so
     the scrim paints over the sheet: every tap on a menu item lands on the
     scrim, which closes the menu. Nothing navigates, and it only shows up on
     a phone, because the scrim does not exist at desktop widths. */
  .icl-shell.menu-open .icl-sidebar {
    display: block;
    position: relative;
    z-index: 2;
  }
  /* The page beneath dims rather than disappearing, so the sheet reads as
     sitting over the page it belongs to. */
  .icl-shell.menu-open .icl-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--icl-white);
    opacity: 0.6;
    z-index: 1;
  }
  .icl-page { padding: 24px 20px; }
}
@media (min-width: 761px) {
  .icl-menu-btn, .icl-sheet-foot { display: none; }
}

/* Page internals keep their own markup; these soften the sharpest edges of
   the old design system so they sit inside the frame without a rewrite. */
.icl-page h1, .icl-page h2 { font-size: 32px; font-weight: 500; line-height: 1.1; margin: 0 0 16px; }
.icl-page h3 { font-size: 20px; font-weight: 500; line-height: 1.3; margin: 24px 0 12px; }
.icl-page h4 { font-size: 17px; font-weight: 500; margin: 20px 0 8px; }
.icl-page .panel {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 28px;
}
.icl-page .muted, .icl-page .small { color: var(--icl-stone); }
.icl-page table { font-size: 14px; }

/* ============================================================
   6. TEACHER HOME (D41)
   Today's lessons and one button. No sidebar, no stats.
   ============================================================ */
.icl-teacher-home {
  margin: 0;
  min-height: 100vh;
  background: var(--icl-linen);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  padding: 24px 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.icl-teacher-home * { box-sizing: border-box; }
.icl-teacher-home p { margin: 0; }
.icl-th-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.icl-th-links { display: flex; align-items: center; gap: 16px; }
.icl-th-links .icl-link { font-size: 15px; }
.icl-th-greeting { display: flex; flex-direction: column; gap: 4px; }
.icl-th-hello { font-size: 20px; font-weight: 500; line-height: 1.3; }
.icl-th-today { font-size: 14px; color: var(--icl-stone); }

.icl-th-list { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.icl-th-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--icl-thread);
  padding: 4px 0;
}
.icl-th-row:last-child { border-bottom: 1px solid var(--icl-thread); }
.icl-th-time { font-size: 15px; font-variant-numeric: tabular-nums; }
.icl-th-what { font-size: 17px; font-weight: 500; line-height: 1.2; }
.icl-th-room { font-size: 14px; color: var(--icl-stone); }
.icl-th-status { font-size: 15px; color: var(--icl-stone); white-space: nowrap; }
/* A lesson that has been and gone fades, rather than being hidden. */
.icl-th-row.is-finished .icl-th-time,
.icl-th-row.is-finished .icl-th-what,
.icl-th-row.is-finished .icl-th-room { color: var(--icl-stone); font-weight: 400; }
.icl-th-start {
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  border: 0;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.icl-th-start:hover { filter: brightness(0.94); }
.icl-th-empty { min-height: 56px; display: flex; align-items: center; font-size: 17px; color: var(--icl-body); border-top: 1px solid var(--icl-thread); border-bottom: 1px solid var(--icl-thread); }
.icl-th-go {
  height: 64px;
  border-radius: 32px;
  border: 0;
  background: var(--icl-moss);
  color: var(--icl-linen);
  font-family: var(--icl-font);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  flex: none;
}
.icl-th-go:hover { filter: brightness(0.94); }
/* The one field picker, when nothing is scheduled. */
.icl-th-picker { display: flex; flex-direction: column; gap: 12px; }
.icl-th-picker select {
  height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1.5px solid var(--icl-thread);
  background: var(--icl-white);
  color: var(--icl-soil);
  font-family: var(--icl-font);
  font-size: 15px;
  width: 100%;
}

.icl-th-room-stacked { display: none; }
@media (max-width: 560px) {
  .icl-teacher-home { padding: 32px 28px; gap: 20px; }
  .icl-th-row { grid-template-columns: 48px 1fr auto; gap: 12px; }
  .icl-th-stack { display: flex; flex-direction: column; }
  .icl-th-room-stacked { display: block; }
  .icl-th-room-wide { display: none; }
}

/* ---------- Dashboard pupil table (D41, handoff screen 5) ---------- */
.icl-eyebrow-term { font-size: 14px; color: var(--icl-stone); margin: 0 0 4px; }

.icl-filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }
.icl-search {
  flex: 1 1 auto;
  min-width: 240px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--icl-thread);
  border-radius: 8px;
  background: var(--icl-white);
  font-family: var(--icl-font);
  font-size: 15px;
  color: var(--icl-soil);
}
.icl-search::placeholder { color: var(--icl-stone); }
.icl-filters .icl-select { flex: none; }

.icl-table { border-top: 1px solid var(--icl-thread); }
.icl-thead,
.icl-trow {
  display: grid;
  grid-template-columns: 1.8fr 0.7fr 1.4fr 1fr 1.2fr 1.3fr;
  gap: 16px;
  padding: 0 8px;
  align-items: center;
}
.icl-thead { height: 40px; font-size: 13px; color: var(--icl-stone); }
.icl-trow {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--icl-thread);
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--icl-font);
  cursor: pointer;
}
.icl-trow:hover { filter: brightness(0.98); }
.icl-tname { font-size: 17px; font-weight: 500; color: var(--icl-soil); }
.icl-tclass { font-size: 15px; color: var(--icl-body); }
.icl-tnum { font-size: 15px; color: var(--icl-soil); font-variant-numeric: tabular-nums; }
.icl-tjoined { font-size: 15px; color: var(--icl-body); font-variant-numeric: tabular-nums; }
.icl-tnone { font-size: 15px; color: var(--icl-stone); }

/* A chip is an outline and a word. Never a fill, never red or green: consent
   is a fact about paperwork, not a judgement on a family. */
.icl-chip {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--icl-thread);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  color: var(--icl-soil);
}
.icl-chip.is-quiet { color: var(--icl-stone); }

.icl-wb { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.icl-wb-square { width: 14px; height: 14px; border-radius: 3px; flex: none; }

.icl-table-note { font-size: 15px; color: var(--icl-stone); padding: 16px 8px; margin: 0; }

/* The EHCP notes this page has always carried, opened from a row. */
.icl-trow-notes { padding: 0 8px 20px; border-bottom: 1px solid var(--icl-thread); }
.icl-trow-notes label { display: block; font-size: 14px; color: var(--icl-stone); margin: 12px 0 4px; }
.icl-trow-notes textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1.5px solid var(--icl-thread);
  border-radius: 8px;
  font-family: var(--icl-font);
  font-size: 15px;
  color: var(--icl-soil);
  background: var(--icl-white);
}

@media (max-width: 900px) {
  .icl-thead { display: none; }
  .icl-trow { grid-template-columns: 1fr auto; row-gap: 4px; padding: 12px 8px; min-height: 0; }
  .icl-trow > :nth-child(n + 3) { grid-column: 1 / -1; }
}

/* Pupil home: the due-questionnaire line (D23, D55) and Sign out (D59, 17 Oct 2026) */
.icl-prompt {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--icl-body);
}
/* D58: after 14 days overdue the same line sits in a quiet card, every sign-in. */
.icl-prompt.icl-prompt-card {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--icl-thread);
  border-radius: 12px;
  background: var(--icl-linen);
}
.icl-prompt-line { margin: 0; }
/* 10d part 2 (D74): the Start button beneath the line. Outlined Moss, so Join
   stays the one filled action on the home. Pupil rules: 17px text, 48px tall. */
.icl-prompt-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.icl-prompt-start { height: 48px; border-radius: 24px; padding: 0 22px; font-size: 17px; }
.icl-prompt-again { font-size: 17px; min-height: 44px; }
.icl-prompt-saved { margin: 6px 0 0; font-size: 14px; color: var(--icl-stone); line-height: 1.5; }
/* D69: the adult signs in on the pupil's device, on its own Linen ground,
   above the questionnaire if one is open behind. */
.icl-unlock { z-index: 60; align-items: center; justify-content: center; padding: 32px 28px; overflow: auto; }
.icl-unlock-inner { width: 100%; max-width: 420px; }
.icl-unlock-eyebrow { font-size: 14px; color: var(--icl-stone); margin: 0 0 8px; }
.icl-unlock-title { font-size: 32px; font-weight: 500; line-height: 1.1; margin: 0 0 12px; color: var(--icl-soil); }
.icl-unlock-body { font-size: 17px; line-height: 1.5; color: var(--icl-body); margin: 0 0 24px; }
.icl-unlock .icl-label { display: block; margin-top: 12px; }
.icl-unlock-error { font-size: 17px; line-height: 1.5; color: var(--danger, #9b3d38); margin: 8px 0 0; min-height: 0; }
.icl-unlock-error:empty { display: none; }
.icl-unlock-go { width: 100%; height: 56px; border-radius: 28px; font-size: 18px; margin-top: 16px; }
.icl-unlock-cancel { display: block; margin: 20px auto 0; font-size: 17px; min-height: 44px; }
@media (max-width: 640px) { .icl-unlock-title { font-size: 28px; } }
.icl-say {
  background: transparent;
  border: 1.5px solid var(--icl-thread);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  color: var(--icl-moss);
  cursor: pointer;
  vertical-align: middle;
  font-size: 12px;
}
.icl-home-foot {
  /* D59: at the foot of the screen, never on the centred block (fix 17 Oct). */
  position: fixed;
  right: 24px;
  bottom: 20px;
}
/* Phone: the home block fills the screen, so the foot sits in flow after the
   last thing on it (Join, or the Start button when a questionnaire is due)
   rather than over it (D74). */
@media (max-width: 639px) {
  .icl-home-foot { position: static; text-align: right; margin-top: 16px; }
}
.icl-home-signout {
  font-size: 14px;
  color: var(--icl-stone);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: var(--icl-font);
  min-height: 44px;
  padding: 0 8px;
}