:root {
  /* Brand — shared */
  --font-app: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --page-bg: #f5f7fb;
  --card-bg: #ffffff;
  --card-border: #e4e9f2;   /* the hairline, navy-tinted to match the page */

  /* SEMANTIC SURFACES. A card's colour is a property of what it MEANS, never of where it sits,
     so a page with two cards and a page with fifteen use the same five values and no page needs
     a rule of its own.

     Each tint comes with a border, and the border is not decoration. Five pale fills cannot be
     told apart by fill alone: white down to the lightest fill a card can carry spans about
     1.31:1 in total, so five steps inside it are ~1.06 each, and these land as close as 1.009:1
     (info vs success). The borders run 4.5:1 to 5.7:1 against their own fill, which is where a
     reader actually gets the distinction -- including a reader who cannot separate the hues. */
  --surface-sunken: #f3f6fc;     /* inset INTO a card: the ribbon, objective cards. Not darker:
                                    #eef2f9 put five existing text colours at 4.37-4.47:1, under
                                    AA. This is still 1.08:1 against the white card it sits in,
                                    which is MORE separation than the #f7f8fc it replaces. */
  --surface-accent: #e8effb;     /* the accent at its lightest: icon chips, stat chips */

  --surface-success: #e3f5ea;   --border-success: #0f7a4f;
  --surface-attention: #fbe7ea; --border-attention: #c92a4b;

  /* CHART WEIGHT, not text weight. --border-advice is #92610a, dark enough to carry small
     type on a pale tint and, as a 9px ring or a bar, mud. These two already existed as
     literals on the mastery tiles, where they mean exactly what a chart means by them:
     secure, and on the way. Text never uses them -- #ef9f27 on white is 1.97:1 -- so every
     bar and ring drawn in them also states its number in words beside it. */
  --chart-secure: #1d9e75;
  --chart-partial: #ef9f27;
  --surface-info: #e9f0fd;      --border-info: #185fa5;
  --surface-advice: #fdf2de;    --border-advice: #92610a;
  --shadow-soft: 0 10px 30px rgba(38, 33, 92, 0.08);

  /* Kids (learner) accent — friendly violet */
  --kid: #6d65be;
  --kid-strong: #534ab7;
  --kid-deep: #26215c;
  --kid-tint: #eeedfe;

  /* Parent accent — calm blue */
  --parent: #378add;
  --parent-strong: #185fa5;
  --parent-deep: #042c53;
  --parent-tint: #e6f1fb;

  /* Text ramp. These three were REFERENCED by the learner trail and defined nowhere, so those
     colours were never applied — a var() that resolves to nothing fails silently. The values are
     the ones the contrast work settled on: 14.4:1, 5.6:1 and 4.5:1 at worst against every surface
     text sits on, so anything adopting them is readable by construction. */
  --text-primary: #1b2a42;
  --text-secondary: #3f5070;   /* navy rather than grey; 8.1:1 on white */
  --text-muted: #5b6b86;       /* 5.4:1 on white, 5.1:1 on the page */
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

html, body {
    min-height: 100%;
}

body {
    background: var(--page-bg);
    font-family: var(--font-app);
}

/* ===================================================================
   Themeable auth (kids + parents share these; theme class picks accent)
   =================================================================== */

.theme-kid {
    --accent: var(--kid);
    --accent-strong: var(--kid-strong);
    --accent-deep: var(--kid-deep);
    --accent-tint: var(--kid-tint);
    --accent-grad: linear-gradient(160deg, #6d65be 0%, #534ab7 60%, #3c3489 100%);
    --accent-shadow: rgba(127, 119, 221, 0.35);
    --accent-ring: rgba(127, 119, 221, 0.16);
}

.theme-parent {
    --accent: var(--parent);
    --accent-strong: var(--parent-strong);
    --accent-deep: var(--parent-deep);
    --accent-tint: var(--parent-tint);
    --accent-grad: linear-gradient(160deg, #378add 0%, #185fa5 60%, #0c447c 100%);
    --accent-shadow: rgba(55, 138, 221, 0.35);
    --accent-ring: rgba(55, 138, 221, 0.16);
}

/* Split shell */
.auth-split {
    width: 100%;
    max-width: 940px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    display: flex;
    animation: auth-rise 0.5s ease both;
}

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Left promo panel */
.auth-promo {
    flex: 1 1 46%;
    position: relative;
    overflow: hidden;
    background: var(--accent-grad);
    color: #fff;
    padding: 2.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
}

.auth-blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.auth-blob-1 { width: 190px; height: 190px; top: -70px; right: -45px; }
.auth-blob-2 { width: 130px; height: 130px; bottom: -40px; left: -35px; background: rgba(255, 255, 255, 0.08); }

.auth-mascot {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    animation: auth-float 3.6s ease-in-out infinite;
}
.auth-mascot svg { display: block; }
.auth-mascot img { display: block; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }

@keyframes auth-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.auth-icon-tile {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.auth-promo-headline { position: relative; z-index: 1; }
.auth-promo-headline h2 {
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0;
}
.auth-rotator {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    min-height: 1.5rem;
    transition: opacity 0.4s ease;
}

.auth-features {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.auth-features li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 600;
    font-size: 1rem;
}
.auth-feature-ico {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gamification teaser */
.auth-streak {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1rem;
    align-self: flex-start;
}
.auth-streak-ico {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-streak strong { display: block; font-size: 1rem; font-weight: 800; }
.auth-streak span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); font-weight: 600; }

/* Right form panel */
.auth-form-panel {
    flex: 1 1 54%;
    padding: 2.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-form-head { margin-bottom: 1.5rem; }
.auth-form-head h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-deep);
    margin: 0;
}
.auth-form-head p {
    color: var(--text-muted);
    font-weight: 600;
    margin: 0.25rem 0 0;
}

.auth-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 0.4rem;
}

.auth-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 54px;
    border: 2px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0 0.9rem;
    background: var(--card-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.auth-field > svg {
    color: var(--accent);
    flex: none;
}

.auth-input {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    width: 100%;
    padding: 0;
    color: #111827;
}
.auth-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: normal;
}

.auth-eye {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    margin-left: auto;
}
.auth-eye:hover { color: var(--accent-strong); }

.btn-auth {
    height: 54px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-strong);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: transform 0.08s ease, background 0.15s ease;
    box-shadow: 0 8px 18px var(--accent-shadow);
}
.btn-auth:hover { background: var(--accent-strong); color: #fff; }
.btn-auth:active { transform: scale(0.98); }

.auth-hint {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    font-weight: 600;
}
.auth-alt {
    text-align: center;
    margin-top: 1.25rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.auth-alt a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

.auth-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    font-weight: 600;
}
.auth-check a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.auth-check a:hover { text-decoration: underline; }

.auth-links {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.92rem;
    color: var(--text-muted);
    text-align: center;
}
.auth-links a { color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }

/* Passwordless quick sign-in (trusted device) — Netflix-style "who's learning?" picker */
.quick-label { font-weight: 800; color: var(--kid-deep); font-size: 1.05rem; margin: 0 0 0.75rem; }
.quick-signin-list { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; }
.quick-signin { margin: 0; }
.quick-tile { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; text-decoration: none; }
.quick-tile.selected .quick-avatar { outline-color: var(--accent, #6d65be); }
.quick-tile.selected .quick-name { color: var(--kid-deep); }
.quick-avatar { width: 88px; height: 88px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 2.8rem; color: #fff; outline: 3px solid transparent; outline-offset: 2px; transition: transform 0.12s ease, outline-color 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 6px 16px rgba(30, 27, 75, 0.18); }
.quick-tile:hover .quick-avatar,
.quick-tile:focus-visible .quick-avatar { transform: scale(1.06); outline-color: var(--accent, #6d65be); }
.quick-tile:active .quick-avatar { transform: scale(0.98); }
.quick-name { font-weight: 700; font-size: 0.9rem; color: var(--text-muted); max-width: 96px; transition: color 0.12s ease; }
.quick-tile:hover .quick-name,
.quick-tile:focus-visible .quick-name { color: var(--kid-deep); }
.auth-or { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; margin: 0.25rem 0 1rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #eef0f4; }

/* Stack on small screens */
@media (max-width: 820px) {
    .auth-split { flex-direction: column; max-width: 440px; }
    .auth-promo { padding: 2rem 1.75rem; gap: 1.2rem; }
    .auth-promo-headline h2 { font-size: 1.6rem; }
    .auth-features, .auth-streak { display: none; }
    .auth-mascot svg { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-split, .auth-mascot { animation: none; }
    .auth-rotator { transition: none; }
}

/* ===== Legacy centered card (Register, Forgot/Reset password, etc.) ===== */
.auth-page {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 2rem;
}

    .auth-card h1 {
        font-weight: 700;
    }

.form-control-lg {
    border-radius: var(--radius-sm);
}

.btn-lg {
    border-radius: var(--radius-sm);
}

.navbar-brand {
    font-weight: 700;
}

.parent-shell {
    display: flex;
    min-height: calc(100vh - 120px);
}

.parent-sidebar {
    width: 260px;
    background: var(--card-bg);
    border-right: 1px solid var(--card-border);
    padding: 1.25rem;
    box-sizing: border-box;        /* so width IS the width: -260px must clear it exactly */
    overflow-x: hidden;            /* labels do not spill while the width animates */
    transition: width .22s ease, padding .22s ease, margin-left .22s ease;
}

/* ── THE COLLAPSED MENU ───────────────────────────────────────────────────────
   Collapsed is a rail of icons, not a disappearance. The destinations stay on
   screen and reachable, and the content beside it widens by 188px rather than
   jumping the full 260.

   The state is a class on <html>, not on the aside, for one reason: it is read
   from localStorage by a script in <head>, which runs before the sidebar exists.
   Putting it on the element would mean waiting for the end of <body>, and the
   menu would paint expanded and snap shut in front of the viewer every load. */
.nav-rail .parent-sidebar { width: 72px; padding: 1.25rem .6rem; }
.nav-rail .sidebar-link { justify-content: center; gap: 0; padding: .7rem 0; }

/* Clipped rather than display:none. display:none would take the label out of the
   accessibility tree too, leaving each icon with nothing to announce; this keeps
   the name for a screen reader while the eye sees only the glyph. The title
   attribute is the sighted equivalent, on hover. */
.nav-rail .sidebar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A section heading with no room for its words becomes the rule it was drawing
   anyway: the groups stay separated, which is what the heading was there for. */
.nav-rail .sidebar-title { margin: 1rem .35rem; border-top: 1px solid var(--card-border); }
.nav-rail .sidebar-title span { display: none; }
.nav-rail .sidebar-title:first-child { display: none; }

/* Under 576px even 72px is a fifth of the screen, so collapsed means gone there. */
@media (max-width: 575.98px) {
    .nav-rail .parent-sidebar { width: 260px; margin-left: -260px; padding: 1.25rem; }
    .nav-rail .sidebar-label { position: static; width: auto; height: auto; clip-path: none; }
}

.sidebar-title {
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.35rem;
    border-radius: var(--radius-sm);
    color: #374151;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-link svg {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--text-muted);
    transition: color 0.15s ease;
}
.sidebar-link:hover {
    background: var(--accent-tint, #f3f4f6);
    color: var(--accent-strong, #111827);
}
.sidebar-link:hover svg { color: var(--accent-strong, var(--text-muted)); }
.sidebar-link.active {
    background: var(--accent-strong, #4b5563);
    color: #fff;
}
.sidebar-link.active svg { color: #fff; }

/* A flex column ONLY so <main> can stretch. Pages that want the full height ask for it with
   min-height: 100%; everything else is unaffected, because main stays a block and its own
   children keep behaving exactly as they did. */
.parent-content {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.parent-content > main { flex: 1; min-height: 0; }

/* ── DEVICES & SECURITY ───────────────────────────────────────────────────────
   Full width rather than a 760px column: the page is three independent things —
   what gets emailed, which devices open the parent's own account, and which
   devices each child uses — and stacking them in a narrow strip made a short
   page scroll. The first two pair up; the children take the whole measure below,
   because that is the part that grows with the family.

   Colours come entirely from the shared tokens, so this page is the first built
   on the system rather than converted to it. */
.dv-wrap { max-width: none; margin: 0; }

.dv-head { position: relative; display: flex; align-items: flex-start; gap: 16px; overflow: hidden;
           border-radius: var(--radius-lg); padding: 1.1rem 1.3rem 1.2rem; margin-bottom: 18px; }
.dv-head-ico { width: 56px; height: 56px; flex: 0 0 auto; display: inline-flex; align-items: center;
               justify-content: center; border-radius: var(--radius-md);
               background: var(--surface-accent); color: var(--parent-strong); }
.dv-head-ico svg { width: 28px; height: 28px; }
.dv-head h1 { font-size: 1.9rem; font-weight: 900; color: var(--text-primary); margin: 0; letter-spacing: -.02em; }
.dv-head p { color: var(--text-secondary); font-weight: 600; margin: .25rem 0 0; }
/* Decorative only, and the first thing to go when the measure gets tight. */
.dv-art { position: absolute; right: 8px; top: -6px; width: 230px; height: 130px; pointer-events: none; }
@media (max-width: 1100px) { .dv-art { display: none; } }

.dv-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 1000px) { .dv-top { grid-template-columns: 1fr; } }

.dv-card { display: flex; flex-direction: column; }
.dv-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1rem; }
.dv-card-ico { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center;
               justify-content: center; border-radius: var(--radius-sm);
               background: var(--surface-accent); color: var(--parent-strong); }
.dv-card-ico svg { width: 23px; height: 23px; }
.dv-card-head h2 { font-size: 1.22rem; font-weight: 900; color: var(--text-primary); margin: 0; }
.dv-card-head p { color: var(--text-secondary); font-weight: 600; font-size: .9rem; margin: .15rem 0 0; }
.dv-card-count { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
                 font-size: .9rem; font-weight: 800; color: var(--text-secondary); }
.dv-card-count svg { width: 18px; height: 18px; }

/* ── the two notification switches ──────────────────────────────────────────── */
.dv-rows { display: flex; flex-direction: column; gap: 10px; }
.dv-row { display: flex; align-items: center; gap: 13px; background: var(--surface-sunken);
          border-radius: var(--radius-md); padding: .9rem 1rem; }
.dv-row-ico { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center;
              justify-content: center; border-radius: var(--radius-sm);
              background: var(--card-bg); color: var(--parent-strong); }
.dv-row-ico svg { width: 21px; height: 21px; }
.dv-row-main { flex: 1; min-width: 0; }
.dv-row-main b { display: block; font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.dv-row-main span { display: block; font-size: .86rem; font-weight: 600; color: var(--text-secondary); line-height: 1.45; }

/* A submit button that looks like a switch. It stays a button because the state
   is a round trip to the server, not something the browser can toggle alone. */
.dv-switch { flex: 0 0 auto; width: 58px; height: 32px; border-radius: 999px; border: 0; cursor: pointer;
             position: relative; background: #cbd5e1; transition: background .15s ease; }
.dv-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px;
                    border-radius: 50%; background: var(--card-bg); transition: transform .15s ease;
                    box-shadow: 0 1px 3px rgba(16, 24, 40, .3); }
.dv-switch.on { background: var(--border-success); }
.dv-switch.on::after { transform: translateX(26px); }

/* ── device rows, used for the parent's own and for each child's ────────────── */
.dv-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dv-device { display: flex; align-items: center; gap: 12px; background: var(--surface-sunken);
             border-radius: var(--radius-md); padding: .75rem .9rem; }
.dv-device-ico { width: 36px; height: 36px; flex: 0 0 auto; display: inline-flex; align-items: center;
                 justify-content: center; border-radius: 50%; background: var(--card-bg);
                 color: var(--parent-strong); }
.dv-device-ico svg { width: 20px; height: 20px; }
.dv-device-main { flex: 1; min-width: 0; }
.dv-device-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-weight: 800;
                  color: var(--text-primary); font-size: .97rem; }
.dv-device-meta { font-size: .85rem; font-weight: 600; color: var(--text-secondary); }
.dv-device-act { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; flex-wrap: wrap; }

.dv-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800;
            border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; }
.dv-badge svg { width: 14px; height: 14px; }
.dv-badge.ok { background: var(--surface-success); color: var(--border-success); }
.dv-badge.pending { background: var(--surface-advice); color: var(--border-advice); }
.dv-badge.here { background: var(--surface-success); color: var(--border-success); }

.dv-btn { border: 0; border-radius: var(--radius-sm); padding: .5rem 1rem; font-size: .86rem;
          font-weight: 800; cursor: pointer; }
.dv-btn.remove { background: var(--surface-attention); color: var(--border-attention); }
.dv-btn.approve { background: var(--surface-success); color: var(--border-success); }

/* ── sign out everywhere else ───────────────────────────────────────────────── */
.dv-signout { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; }
.dv-signout-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--card-bg);
                  border: 2px solid var(--border-attention); color: var(--border-attention);
                  border-radius: var(--radius-sm); padding: .75rem 1.15rem; font-weight: 800;
                  font-size: .95rem; cursor: pointer; }
.dv-signout-btn svg { width: 19px; height: 19px; }
.dv-signout-note { flex: 1; min-width: 200px; font-size: .88rem; font-weight: 600;
                   color: var(--text-secondary); line-height: 1.5; }

/* ── one card per child ─────────────────────────────────────────────────────── */
.dv-kids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .dv-kids { grid-template-columns: 1fr; } }
.dv-kid { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 1rem 1.05rem 1.05rem; }
.dv-kid.highlight { border-color: var(--parent-strong); box-shadow: 0 0 0 3px var(--surface-accent); }
.dv-kid-head { display: flex; align-items: center; gap: 11px; margin-bottom: .8rem; }
.dv-avatar { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center;
             justify-content: center; border-radius: 50%; background: var(--surface-accent); font-size: 1.5rem; }
.dv-kid-name { display: inline-flex; align-items: center; gap: 5px; font-size: 1.1rem; font-weight: 900;
               color: var(--text-primary); text-decoration: none; }
.dv-kid-name svg { width: 16px; height: 16px; }
.dv-kid-name:hover { color: var(--parent-strong); }
.dv-kid-count { margin-left: auto; font-size: .88rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }

.dv-back { margin-top: 1.4rem; font-weight: 700; color: var(--text-secondary); }

@media (max-width: 560px) {
    .dv-device { flex-wrap: wrap; }
    .dv-device-act { width: 100%; }
    .dv-head h1 { font-size: 1.5rem; }
}

/* ── LEARNERS ─────────────────────────────────────────────────────────────────
   A card each instead of a table row each. The table gave seven columns equal
   weight when a parent is really looking for one child, and the two things they
   do here -- open a learner, read the PIN out -- were links at the far right of
   a row. The card leads with the face, because that is how a parent finds their
   own child in a list.

   The cards are NOT tinted in rotation. A colour that means `the second one`
   means nothing; the variants are kept for the states that are worth seeing from
   across the page -- a PIN that has run out, or one about to. */
.lr-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.lr-head-ico { width: 60px; height: 60px; flex: 0 0 auto; display: inline-flex; align-items: center;
               justify-content: center; border-radius: var(--radius-md);
               background: var(--surface-accent); color: var(--parent-strong); }
.lr-head-ico svg { width: 30px; height: 30px; }
.lr-head h1 { font-size: 1.9rem; font-weight: 900; color: var(--text-primary); margin: 0; letter-spacing: -.02em; }
.lr-head p { color: var(--text-secondary); font-weight: 600; margin: .25rem 0 0; }
.lr-head-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.lr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 18px; align-items: stretch; }

.lr-card { position: relative; display: flex; flex-direction: column; background: var(--card-bg);
           border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; }

.lr-top { padding: 1.4rem 1.1rem 1.1rem; text-align: center; }
.lr-avatar { width: 108px; height: 108px; margin: 0 auto .8rem; border-radius: 50%; display: flex;
             align-items: center; justify-content: center; font-size: 3.4rem; line-height: 1;
             background: var(--surface-accent); }
.lr-name { font-size: 1.3rem; font-weight: 900; color: var(--text-primary); line-height: 1.2; }
.lr-meta { font-size: .92rem; font-weight: 600; color: var(--text-secondary); margin-top: .2rem; }
.lr-school { display: inline-block; margin-top: .45rem; font-size: .8rem; font-weight: 700; }
.lr-status { display: inline-flex; align-items: center; gap: 7px; margin-top: .7rem; font-size: .86rem;
             font-weight: 800; border-radius: 999px; padding: .32rem .85rem; }
.lr-status i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.lr-status.on { background: var(--surface-success); color: var(--border-success); }
.lr-status.off { background: var(--surface-sunken); color: var(--text-muted); }

/* The overflow menu is a <details>, so it opens with no script and closes on Escape. */
.lr-menu { position: absolute; top: 10px; right: 10px; }
.lr-menu > summary { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
                     display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.lr-menu > summary::-webkit-details-marker { display: none; }
.lr-menu > summary:hover { background: var(--surface-sunken); color: var(--text-primary); }
.lr-menu > summary svg { width: 20px; height: 20px; }
.lr-menu-items { position: absolute; right: 0; top: 38px; z-index: 5; min-width: 168px; padding: 6px;
                 background: var(--card-bg); border: 1px solid var(--card-border);
                 border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(23, 31, 56, .14); }
.lr-menu-items a { display: block; padding: .5rem .7rem; border-radius: 8px; font-size: .9rem;
                   font-weight: 700; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.lr-menu-items a:hover { background: var(--surface-sunken); color: var(--text-primary); }

.lr-facts { border-top: 1px solid var(--card-border); padding: .9rem 1.1rem; display: flex;
            flex-direction: column; gap: .75rem; }
.lr-fact { display: flex; align-items: flex-start; gap: 11px; }
.lr-fact-ico { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center;
               justify-content: center; border-radius: var(--radius-sm);
               background: var(--surface-accent); color: var(--parent-strong); }
.lr-fact-ico svg { width: 19px; height: 19px; }
.lr-fact-main { flex: 1; min-width: 0; }
.lr-fact-label { font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.lr-fact-value { font-size: 1rem; font-weight: 800; color: var(--text-primary); word-break: break-word; }
.lr-fact-sub { font-size: .84rem; font-weight: 600; color: var(--text-secondary); }
.lr-fact-sub.soon { color: var(--border-advice); }
.lr-fact-sub.gone { color: var(--border-attention); }
.lr-copy { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; padding: 4px;
           border-radius: 7px; color: var(--text-muted); }
.lr-copy:hover { background: var(--surface-sunken); color: var(--parent-strong); }
.lr-copy svg { width: 18px; height: 18px; display: block; }

.lr-actions { margin-top: auto; padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 10px; }
.lr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
          border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .96rem; font-weight: 800;
          text-decoration: none; cursor: pointer; }
/* Full width in the card footer, where the two buttons stack; natural width in the header,
   where they sit side by side. The width belonged to the place, not to the button. */
.lr-actions .lr-btn { width: 100%; }
.lr-btn svg { width: 18px; height: 18px; }
.lr-btn.primary { background: var(--accent-strong); color: var(--card-bg); border: 0; }
.lr-btn.secondary { background: var(--card-bg); color: var(--text-secondary); border: 1px solid var(--card-border); }
.lr-btn.secondary:hover { border-color: var(--parent-strong); color: var(--parent-strong); }

.lr-copied { font-size: .8rem; font-weight: 800; color: var(--border-success); }

@media (max-width: 560px) { .lr-head-actions { margin-left: 0; width: 100%; } }

/* ── THE ANSWER CHOICES, ON THE QUIZ PAGE ─────────────────────────────────────
   Scoped to .qz-ask on purpose. `.opt` is also used by the two landing pages for
   a decorative mock answer in the hero, and the same partial is rendered by Admin
   from its own stylesheet; neither should move because the learner quiz changed.

   Three states that cannot be confused:
     normal   pale blue-grey fill, grey-blue edge -- `these are the choices`
     hover    same fill, lavender edge            -- `this row is clickable`
     selected lavender fill, 2px violet edge, filled badge -- `this is my answer`

   Hover deliberately keeps the normal fill. Giving it the selected fill and a
   lighter border made passing the mouse over a row look like choosing it.

   There is no correct/incorrect state here, and there must not be: this page does
   not tell a learner whether a single answer was right. */
.qz-ask .opt-box {
    min-height: 74px;
    gap: 1.1rem;
    padding: .85rem 1.25rem;
    margin-bottom: .7rem;
    background: var(--surface-sunken);
    border: 1.5px solid #d7dbe8;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
}
/* The question is the bold thing on this screen; the answers are what you weigh up. */
/* Derived from the accent rather than hand-picked: a lavender light enough to read as a hint
   does not exist in the palette, and inventing a 201st colour for a hover state is how the
   drift started. Where color-mix is unsupported the declaration drops and hover keeps the
   normal edge, which is a weaker cue, not a broken one. */
.qz-ask .opt:hover .opt-box { background: var(--surface-sunken);
                              border-color: color-mix(in srgb, var(--accent) 45%, var(--card-bg)); }
.qz-ask .opt input:checked + .opt-box {
    background: var(--accent-tint);
    border: 2px solid var(--accent-strong);
    padding: calc(.85rem - .5px) calc(1.25rem - .5px);  /* hold the row still as the edge thickens */
}
.qz-ask .opt-letter {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 700;
}
.qz-ask .opt input:checked + .opt-box .opt-letter { background: var(--accent-strong); color: var(--card-bg); }

/* ── INTERACTIVE SCENES, ON THE QUIZ PAGE ─────────────────────────────────────
   The widget caps its drawing scenes at 460-560px, which was right when the quiz
   lived in a 760px column and is not now that the column is 1100. A line graph a
   child has to TAP ON was rendering at about a third of the width available, with
   axis labels too small to read and lattice points too close together to hit.

   Scoped under .qz-ask, and by specificity rather than by order: these two-class
   selectors outrank the widget's own one-class rules wherever its <style> block
   ends up, so Admin and the review pages keep the sizes they were built for.

   680px rather than the full 1100: these scenes keep their aspect, so the width is
   also the height, and a graph taller than the viewport is worse than a small one. */
.qz-ask .pl-wrap,
.qz-ask .pb-wrap,
.qz-ask .bal-wrap,
.qz-ask .bs-wrap,
.qz-ask .be-bars,
.qz-ask .ps-rows,
.qz-ask .fw-rows { max-width: 680px; width: 100%; }

/* width:100% is doing real work there, not padding the rule out. These wrappers carry
   `margin: .3rem auto`, and an auto cross-axis margin on a flex item suppresses the stretch
   it would otherwise get — so the wrapper shrank to the SVG's intrinsic 301px and the
   max-width it was given never came into play. */

/* The prompt and the how-to that come with a scene, at the page's scale rather than
   the widget's. .sort-hint at .85rem was the smallest text on a page whose question
   is 29px, and it is the sentence telling a child how to answer. */
.qz-ask .sort-prompt { font-size: 1.25rem; margin: .2rem 0 .4rem; }
.qz-ask .sort-hint { font-size: 1.05rem; line-height: 1.5; color: var(--text-secondary); margin-bottom: 1rem; }

/* Undo and Clear are controls a child uses mid-answer, so they get a real target. */
.qz-ask .pl-ctrl button,
.qz-ask .pb-ctrl button,
.qz-ask .rb-ctrl button,
.qz-ask .sc-ctrl button,
.qz-ask .es-ctrl button,
.qz-ask .ft-undo button { font-size: 1.05rem; padding: .6rem 1.25rem; min-height: 46px; }
.qz-ask .pl-readout,
.qz-ask .pb-readout { font-size: 1.05rem; }

/* ── THE QUIZ PAGE ────────────────────────────────────────────────────────────
   One card: a violet band across the top holding everything about the SESSION --
   where you are, how many are done, how long is left -- and a white body holding
   the single question. Before this the page was a 960px column with the picture
   stacked above the stem, so on a wide screen a diagram and the question it was
   about could not be seen together without scrolling between them.

   The body is two columns only when there is something to show. A question with
   no picture takes the full measure rather than leaving half the card empty. */
/* The whole measure AND the whole height. A question card sitting in the top third of an
   empty screen makes the question feel like a footnote; filling the page makes it the thing
   the child is doing. */
.quiz-wrap { max-width: none; margin: 0; min-height: 100%; display: flex; flex-direction: column; }
.qz-card { flex: 1; display: flex; flex-direction: column; }
.qz-body { flex: 1; }
/* Two zones. The trail is pinned to the top, because "where am I" is read before the question
   and not alongside it. Everything else — question, answers, the button — centres in what is
   left, so the thing being read and the thing being clicked stay together. */
.qz-ask { display: flex; flex-direction: column; }
.qz-middle { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.qz-ask form { display: flex; flex-direction: column; }
.qz-figure { display: flex; flex-direction: column; justify-content: center; }

/* With a picture the two halves of a wide card are both useful. WITHOUT one, a single column
   at full width would run an answer row the width of the screen, and the eye loses the start
   of the line on the way back from the end of it. The card still fills the page; its reading
   column does not. */
.qz-body.solo .qz-ask { max-width: 1100px; margin: 0 auto; width: 100%; }

.qz-card { background: var(--card-bg); border: 1px solid var(--card-border);
           border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }

/* ── the band ───────────────────────────────────────────────────────────────── */
.qz-band { background: var(--accent-grad, linear-gradient(120deg, var(--kid), var(--kid-strong)));
           color: var(--card-bg); padding: 1rem 1.3rem 1.1rem; }
.qz-band-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qz-where { min-width: 0; }
.qz-where b { display: block; font-size: 1.3rem; font-weight: 700; }
.qz-where span { display: block; font-size: .95rem; font-weight: 500; opacity: .82; }

.qz-pips { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.qz-pip { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
          justify-content: center; font-size: 1rem; font-weight: 800; flex: 0 0 auto;
          border: 2px solid rgba(255, 255, 255, .55); color: var(--card-bg); }
.qz-pip.done { background: var(--card-bg); border-color: var(--card-bg); color: var(--accent-strong); }
.qz-pip.done svg { width: 19px; height: 19px; }
.qz-pip.now { background: var(--accent-deep); border-color: var(--accent-deep); }

.qz-timer { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; font-size: 1.35rem;
            font-weight: 800; font-variant-numeric: tabular-nums; color: var(--card-bg);
            background: rgba(255, 255, 255, .18); border-radius: var(--radius-sm); padding: .45rem .9rem; }
.qz-timer svg { width: 24px; height: 24px; }
/* THE CLOCK GOES RED THE MOMENT IT HAS SOMETHING TO SAY. White states were kept for the first two
   marks on the argument that they were pacing rather than warning; seen on the page, a white pill
   beside the words `Half your time is left` just looks like the clock has not noticed. If it is
   worth telling a child about, it is worth showing on the clock they are watching.

   The progression stays, inside red: a pale fill with dark red type at the half mark, then solid
   red from three quarters on. 4.52:1 for the first, 4.9:1 for the other two. */
.qz-timer.half { background: var(--surface-attention); color: var(--border-attention); }
.qz-timer.most,
.qz-timer.low { background: var(--border-attention); color: var(--card-bg); }

/* Said once, in words, under the bar. It is polite rather than modal: a child mid-thought
   should not have to dismiss something to carry on answering. */
.qz-heads-up {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: .7rem;
    padding: .5rem .8rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .18);
    color: var(--card-bg);
    font-size: 1rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
}
.qz-heads-up.show { opacity: 1; transform: none; }
.qz-heads-up svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .qz-heads-up { transition: none; } }
.qz-sep { width: 1px; align-self: stretch; min-height: 34px; background: rgba(255, 255, 255, .35); }

.qz-track { height: 11px; border-radius: 999px; background: rgba(255, 255, 255, .3); overflow: hidden; margin-top: .9rem; }
.qz-fill { height: 100%; border-radius: 999px; background: var(--accent-deep); transition: width .3s ease; }

/* ── the body ───────────────────────────────────────────────────────────────── */
/* stretch, not start: with `start` the columns were only as tall as their own content, so the card
   could fill the page while the question column sat in the top of it and the Next button floated
   half way up. Both columns take the card's height now, and the picture panel grows with it. */
.qz-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
.qz-body.solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .qz-body { grid-template-columns: minmax(0, 1fr); } }

.qz-figure { position: relative; padding: 1.2rem; }
.qz-figure-inner { border: 1px solid var(--card-border); border-radius: var(--radius-md);
                   background: var(--card-bg); padding: 1rem; display: flex; align-items: center;
                   justify-content: center; min-height: 260px; }
.qz-figure img { max-width: 100%; max-height: 420px; }
.qz-zoom { position: absolute; top: 1.7rem; right: 1.7rem; width: 40px; height: 40px; border-radius: var(--radius-sm);
           border: 1px solid var(--card-border); background: var(--card-bg); color: var(--accent-strong);
           display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qz-zoom svg { width: 20px; height: 20px; }

.qz-ask { padding: 1.7rem 1.6rem 1.8rem; border-left: 1px solid var(--card-border); }
.qz-body.solo .qz-ask { border-left: 0; }
@media (max-width: 900px) { .qz-ask { border-left: 0; border-top: 1px solid var(--card-border); } }

.qz-trail { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.1rem;
            font-weight: 600; color: var(--text-secondary); margin-bottom: .2rem; }
.qz-trail svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-muted); }
.qz-trail b { font-weight: 700; color: var(--text-secondary); }

.qz-stem { font-size: 1.85rem; font-weight: 700; color: var(--accent-deep); line-height: 1.25;
           letter-spacing: -.01em; margin-bottom: 1.4rem; }
@media (max-width: 620px) { .qz-stem { font-size: 1.45rem; } }

.qz-actions { display: flex; justify-content: flex-end; padding-top: 1.4rem; }
.qz-actions .btn-quiz { width: auto; min-width: 220px; font-size: 1.1rem; padding: .9rem 1.6rem; }

/* ── the enlarged picture ───────────────────────────────────────────────────── */
.qz-lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
.qz-lightbox::backdrop { background: rgba(23, 31, 56, .72); }
.qz-lightbox img { display: block; max-width: 92vw; max-height: 84vh; border-radius: var(--radius-md);
                   background: var(--card-bg); padding: 1rem; }
.qz-lightbox-close { display: block; margin: .8rem auto 0; border: 0; border-radius: var(--radius-sm);
                     background: var(--card-bg); color: var(--text-primary); font-weight: 800;
                     padding: .6rem 1.4rem; cursor: pointer; }

/* ── HOW MANY STEPS THE QUESTION TOOK ─────────────────────────────────────────
   One row per band, on both the learner's performance page and the parent's
   overview, so the two surfaces say the same thing in the same shape.

   A band with too few answers keeps its row and loses its bar. That is the point
   of the design: dropping the row would hide that the band exists, and drawing a
   bar would put a number on three answers. The empty track shows there is a place
   for it and nothing in it yet. */
.pf-steps, .po-steps { display: flex; flex-direction: column; gap: .7rem; margin-top: .3rem; }
.pf-step, .po-step { display: flex; align-items: center; gap: 12px; }
.pf-step-label, .po-step-label { flex: 0 0 auto; min-width: 86px; font-weight: 800; color: var(--text-primary); }
.pf-step-track, .po-step-track { flex: 1; height: 12px; border-radius: 999px;
                                 background: var(--surface-sunken); overflow: hidden; }
.pf-step-track span, .po-step-track span { display: block; height: 100%; border-radius: 999px; }
.pf-step > b, .po-step > b { flex: 0 0 auto; min-width: 52px; text-align: right;
                             font-weight: 800; color: var(--text-primary); }
.pf-step-n, .po-step-n { flex: 0 0 auto; min-width: 96px; text-align: right;
                         font-size: .85rem; font-weight: 600; color: var(--text-muted); }

/* Still gathering: the row is quieter, and the figure says what is missing rather
   than standing in for an answer. */
.pf-step.is-thin .pf-step-label, .po-step.is-thin .po-step-label { color: var(--text-secondary); font-weight: 700; }
.pf-step-waiting, .po-step-waiting { font-size: .82rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

.pf-reading, .po-step-reading { margin: .9rem 0 0; font-size: .95rem; font-weight: 700;
                               color: var(--accent-deep); }
.pf-sub { font-size: .9rem; font-weight: 600; color: var(--text-secondary); margin: .15rem 0 0; }

@media (max-width: 560px) {
    .pf-step-n, .po-step-n { display: none; }
}

/* ── REVIEWING A QUIZ ─────────────────────────────────────────────────────────
   The same card and band as taking it, so looking back feels like retracing the
   quiz rather than reading a transcript. One question at a time; the page used to
   be a single column you scrolled, which on a five-question quiz was a metre of
   page and no sense of where you were in it. */
.review-wrap { max-width: none; margin: 0; }
.rv-card { margin-bottom: 1.2rem; }
.rv-body { padding: 1.4rem 1.5rem 0; }
.rv-item { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }

/* In review the result is already known, so a pip is not `done or to come` — it is
   right or wrong, and it is a button, because the question you want is the one you
   got wrong and you should be able to go straight to it. */
.rv-pip { cursor: pointer; }
.rv-pip.ok { background: var(--border-success); border-color: var(--border-success); color: var(--card-bg); }
.rv-pip.no { background: var(--border-attention); border-color: var(--border-attention); color: var(--card-bg); }
.rv-pip.now { outline: 3px solid var(--card-bg); outline-offset: 2px; }
.rv-score { flex: 0 0 auto; font-size: 1.05rem; font-weight: 800; color: var(--card-bg); }

.rv-nav { display: flex; align-items: center; gap: 14px; padding: 1.2rem 1.5rem 1.4rem;
          border-top: 1px solid var(--card-border); margin-top: 1.2rem; }
.rv-nav .lr-btn { min-width: 150px; }
.rv-nav .lr-btn[disabled] { opacity: .4; cursor: default; }
.rv-count { flex: 1; text-align: center; font-weight: 800; color: var(--text-secondary); }

/* ── the diagram, marked up ─────────────────────────────────────────────────── */
.rv-diagram { position: relative; max-width: 460px; margin: 0 auto; }
.rv-diagram > svg { display: block; width: 100%; height: auto; }
.rv-pins { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rv-pin circle { fill: none; stroke-width: 4; }
.rv-pin path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.rv-pin-right circle, .rv-pin-right path { stroke: var(--chart-secure); }
.rv-pin-wrong circle, .rv-pin-wrong path { stroke: var(--border-attention); }

.rv-tapline { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
              margin-top: .7rem; font-size: .95rem; font-weight: 600; color: var(--text-secondary); }
.rv-key { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto; border: 3px solid; }
.rv-key-right { border-color: var(--chart-secure); }
.rv-key-wrong { border-color: var(--border-attention); }
.rv-tapline b { color: var(--text-primary); }

/* ── PAST PERFORMANCE ─────────────────────────────────────────────────────────
   Four headline numbers, then the charts that explain them, then every quiz as a
   row. The page was a single table before, which answered `what did I score` and
   nothing else.

   Every colour here is a token. The tiers reuse .tier-easy/-medium/-hard, which
   the quiz ribbon already uses for the same three words. */
.pf-wrap { max-width: none; margin: 0; }

.pf-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-head h1 { font-size: 2rem; font-weight: 900; color: var(--accent-deep); margin: 0; letter-spacing: -.02em; }
.pf-head p { color: var(--text-secondary); font-weight: 600; font-size: 1.05rem; margin: .3rem 0 0; }
.pf-period { margin-left: auto; display: inline-flex; background: var(--card-bg);
             border: 1px solid var(--card-border); border-radius: 999px; padding: 4px; gap: 2px; }
.pf-period-btn { border: 0; background: transparent; border-radius: 999px; padding: .5rem 1.1rem;
                 font-size: .95rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.pf-period-btn.is-on { background: var(--accent-strong); color: var(--card-bg); }

/* The subject switcher. Named for what it is rather than for the first page that needed it:
   the learner dashboard and past performance both show it, and a `pf-` prefix on the learner
   dashboard would be a lie about where it belongs. */
.subject-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.subject-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
              background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md);
              padding: .7rem 1.2rem; color: var(--text-secondary); }
.subject-tab span { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.subject-tab small { font-size: .85rem; font-weight: 600; color: var(--text-muted); }
.subject-tab.is-on { background: var(--accent-strong); border-color: var(--accent-strong); }
.subject-tab.is-on span, .subject-tab.is-on small { color: var(--card-bg); }

/* ── the four numbers ───────────────────────────────────────────────────────── */
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 18px; }
.pf-tile { display: flex; align-items: center; gap: 14px; background: var(--card-bg);
           border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; }
.pf-tile-ico { width: 52px; height: 52px; flex: 0 0 auto; display: inline-flex; align-items: center;
               justify-content: center; border-radius: var(--radius-sm);
               background: var(--accent-tint); color: var(--accent-strong); }
.pf-tile-ico svg { width: 26px; height: 26px; }
.pf-tile b { display: block; font-size: 1.8rem; font-weight: 900; color: var(--text-primary); line-height: 1.1; }
.pf-tile > div > span { display: block; font-size: .95rem; font-weight: 600; color: var(--text-secondary); }
.pf-delta { display: block; font-size: .88rem; font-weight: 700; font-style: normal; margin-top: .2rem; }
.pf-delta.up { color: var(--border-success); }
.pf-delta.down { color: var(--border-attention); }
.pf-delta.flat { color: var(--text-muted); }

.pf-donut { width: 56px; height: 56px; flex: 0 0 auto; }
.pf-donut-track { fill: none; stroke: var(--surface-sunken); stroke-width: 9; }
.pf-donut-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.pf-donut.tone-good .pf-donut-fill { stroke: var(--chart-secure); }
.pf-donut.tone-fair .pf-donut-fill { stroke: var(--chart-partial); }
.pf-donut.tone-weak .pf-donut-fill { stroke: var(--border-attention); }

/* ── the panels ─────────────────────────────────────────────────────────────── */
/* Six columns so a row can be halves OR thirds, which two columns cannot do. The chart and the
   level bars take three each; the level mix, the timings and the step bands take two each; the
   topics take all six. Every row fills, and nothing is left beside an empty cell. */
.pf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pf-half { grid-column: span 3; }
.pf-third { grid-column: span 2; }
.pf-wide { grid-column: 1 / -1; }

/* A third of the width is not enough for label, bar, figure and count on one line, so the bar
   drops to its own line underneath rather than being squeezed to a stub. The count stays: it is
   how a reader knows whether to believe the figure beside it. */
.pf-third .pf-step { flex-wrap: wrap; gap: 8px 10px; }
.pf-third .pf-step-label { flex: 1 1 auto; min-width: 0; }
.pf-third .pf-step-n { min-width: 0; }
.pf-third .pf-step-track { order: 3; flex: 1 1 100%; }

@media (max-width: 1180px) { .pf-half, .pf-third { grid-column: span 3; } }
@media (max-width: 760px) { .pf-half, .pf-third { grid-column: 1 / -1; } }
.pf-panel { display: flex; flex-direction: column; }
.pf-panel-head { display: flex; align-items: center; gap: 11px; margin-bottom: 1rem; }
.pf-panel-ico { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center;
                justify-content: center; border-radius: var(--radius-sm);
                background: var(--accent-tint); color: var(--accent-strong); }
.pf-panel-ico svg { width: 21px; height: 21px; }
.pf-panel-head h2 { font-size: 1.2rem; font-weight: 800; color: var(--accent-deep); margin: 0; }
.pf-empty { color: var(--text-muted); font-weight: 600; font-size: .95rem; margin: 0; }
.pf-big { font-size: 1.9rem; font-weight: 900; color: var(--text-primary); line-height: 1.1; margin-bottom: .9rem; }
.pf-big small { font-size: .95rem; font-weight: 600; color: var(--text-secondary); }

.pf-chart { width: 100%; height: auto; }
.pf-gridlines line { stroke: var(--card-border); stroke-width: 1; }
.pf-gridlines text { font-size: 12px; font-weight: 700; fill: var(--text-muted); }
.pf-line { fill: none; stroke: var(--accent-strong); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pf-dot { fill: var(--card-bg); stroke: var(--accent-strong); stroke-width: 3; }
.pf-axis { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; color: var(--text-muted); }

/* ── the difficulty bars ────────────────────────────────────────────────────── */
.pf-bars { display: flex; align-items: flex-end; gap: 18px; justify-content: space-around; }
.pf-bar { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.pf-bar > b { font-size: 1.15rem; font-weight: 900; color: var(--text-primary); }
.pf-bar-track { width: 100%; max-width: 76px; height: 150px; display: flex; align-items: flex-end;
                background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.pf-bar-fill { width: 100%; border-radius: var(--radius-sm); min-height: 4px; }
.pf-bar-name { font-size: .95rem; font-weight: 800; color: var(--text-primary); }
.pf-bar-sub { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.tone-good { background: var(--chart-secure); }
.tone-fair { background: var(--chart-partial); }
.tone-weak { background: var(--border-attention); }

/* ── the level mix ──────────────────────────────────────────────────────────── */
.pf-mixbar { display: flex; height: 22px; border-radius: 999px; overflow: hidden;
             background: var(--surface-sunken); margin-bottom: 1rem; }
.pf-mixbar span { display: block; }
.pf-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pf-keys li { display: flex; align-items: center; gap: 9px; font-size: .98rem; font-weight: 600; color: var(--text-secondary); }
.pf-keys b { margin-left: auto; font-weight: 800; color: var(--text-primary); }

/* ── the time histogram ─────────────────────────────────────────────────────── */
.pf-hist { display: flex; align-items: flex-end; gap: 10px; }
.pf-hist-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.pf-hist-col > b { font-size: .95rem; font-weight: 800; color: var(--text-primary); }
.pf-hist-track { width: 100%; height: 110px; display: flex; align-items: flex-end;
                 background: var(--surface-sunken); border-radius: var(--radius-sm); overflow: hidden; }
.pf-hist-track span { width: 100%; background: var(--accent); border-radius: var(--radius-sm); min-height: 3px; }

/* ── the topic bars ─────────────────────────────────────────────────────────── */
.pf-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.pf-topics h3 { font-size: 1rem; font-weight: 800; color: var(--text-secondary); margin: 0 0 .8rem; }
.pf-topic { display: flex; align-items: center; gap: 12px; margin-bottom: .7rem; }
.pf-topic-name { flex: 0 0 38%; font-size: .98rem; font-weight: 700; color: var(--text-primary); }
.pf-topic-track { flex: 1; height: 12px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.pf-topic-track span { display: block; height: 100%; border-radius: 999px; }
.pf-topic > b { flex: 0 0 auto; font-size: .95rem; font-weight: 800; color: var(--text-primary); min-width: 44px; text-align: right; }

/* ── the table ──────────────────────────────────────────────────────────────── */
.pf-table-card { margin-top: 16px; }

/* Two orders, no search box. A learner does not know a quiz by name — they know it as `the one I
   did badly at`, which is a sort. */
.pf-sorts { margin-left: auto; display: inline-flex; background: var(--surface-sunken);
            border-radius: 999px; padding: 4px; gap: 2px; }
.pf-sort { border: 0; background: transparent; border-radius: 999px; padding: .45rem 1rem;
           font-size: .9rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.pf-sort.is-on { background: var(--card-bg); color: var(--accent-deep); box-shadow: 0 1px 2px rgba(23, 31, 56, .08); }

.pf-more { display: flex; align-items: center; gap: 14px; margin-top: 1rem; }
.pf-more-count { font-size: .9rem; font-weight: 600; color: var(--text-muted); }

@media (max-width: 620px) { .pf-sorts { margin-left: 0; } }
.pf-table { width: 100%; border-collapse: collapse; }
.pf-table th { text-align: left; font-size: .82rem; font-weight: 800; text-transform: uppercase;
               letter-spacing: .04em; color: var(--text-muted); padding: 0 .7rem .6rem;
               border-bottom: 1px solid var(--card-border); white-space: nowrap; }
.pf-table td { padding: .85rem .7rem; border-bottom: 1px solid var(--surface-sunken);
               font-size: .98rem; font-weight: 600; color: var(--text-secondary); }
.pf-cell-title { font-weight: 800; color: var(--text-primary); }
.pf-cell-act { text-align: right; white-space: nowrap; }
.pf-muted { color: var(--text-muted); }
.pf-table tr.is-unfinished td { color: var(--text-muted); }
.pf-level { display: inline-block; border-radius: 999px; padding: .25rem .75rem; font-size: .85rem;
            font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.pf-review { font-weight: 800; color: var(--accent-strong); text-decoration: none; }
.pf-review:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .pf-period { margin-left: 0; }
    .pf-topic-name { flex-basis: 50%; }
}

/* ===== App shell (nav) ===== */
.app-navbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}
.app-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--kid-deep);
    text-decoration: none;
}
.app-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, #6d65be, #534ab7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: none;
}
.app-brand-logo {
    height: 34px;
    width: auto;
    display: block;
}
.app-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1.1rem;
    border-radius: var(--radius-sm);
    background: #234E70;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    border: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}
.app-home-btn:hover {
    background: #1b3d59;
    color: #fff;
    transform: translateY(-1px);
}
.app-home-btn svg { flex: none; }

/* Parent devices & security page */
.device-settings { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--card-border); border-radius: var(--radius-sm); margin-bottom: 1.25rem; }
.device-muted { color: var(--text-muted); font-size: 0.85rem; }
.btn-toggle { border: 0; border-radius: 999px; padding: 0.4rem 1.1rem; font-weight: 800; cursor: pointer; color: #fff; }
.btn-toggle.on { background: #11823b; }
.btn-toggle.off { background: #6a717b; }
.device-section-label { font-weight: 800; color: #234E70; font-size: 1.02rem; margin: 1.5rem 0 0.65rem; }
.btn-signout-others { border: 1.5px solid #eecccc; background: var(--card-bg); color: #b91c1c; border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 800; font-size: .85rem; cursor: pointer; transition: background .12s ease; }
.btn-signout-others:hover { background: #fef2f2; }

/* Parent per-child overview */
.po-wrap { max-width: 1180px; margin: 0 auto; }
.po-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.po-head-id { display: flex; align-items: center; gap: 12px; }
.po-avatar { width: 44px; height: 44px; border-radius: 50%; background: #eef2fb; color: #5c6e99; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.po-kicker { font-size: .78rem; color: var(--text-muted); font-weight: 700; }
.po-title { font-size: 1.35rem; font-weight: 900; color: #234E70; line-height: 1.1; }
.po-sub { font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.po-pickers { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.po-picker { display: flex; flex-direction: column; gap: 4px; }
.po-picker label { font-size: .75rem; color: var(--text-muted); font-weight: 700; }
.po-picker select { border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 700; color: #234E70; background: var(--card-bg); min-width: 150px; }

.po-summary { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(135deg, #f3f1ff 0%, #eaf1ff 100%); border: 1px solid #e6e6fb; border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 1.4rem; }
.po-summary-emoji { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.po-summary-body { flex: 1; }
.po-summary-text { font-size: 1.05rem; font-weight: 700; color: #234E70; line-height: 1.5; }
.po-summary-win { margin-top: 6px; font-size: .9rem; font-weight: 800; color: #166534; }
.po-summary-meta { margin-top: 6px; font-size: .82rem; font-weight: 700; color: var(--text-muted); }

.po-arrow { font-weight: 900; }
.arrow-up { color: #11823b; }
.arrow-down { color: #d42424; }
.arrow-flat { color: var(--text-muted); }

.po-details > summary { list-style: none; cursor: pointer; font-size: 1.15rem; font-weight: 800; color: #234E70; display: flex; align-items: baseline; gap: 8px; }
.po-details > summary::-webkit-details-marker { display: none; }
/* The glyph is a CSS escape, not a literal: this rule held a double-encoded "â–¸" and rendered it
   verbatim on the page. An escape cannot be mangled by whatever writes the file next. */
.po-details > summary::before { content: "\25B8"; color: var(--text-muted); font-size: .9rem; transition: transform .15s ease; }
.po-details[open] > summary::before { transform: rotate(90deg); }
.po-details > summary .po-muted { font-size: .82rem; font-weight: 600; }

.po-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 1.4rem; }
.po-card { background: var(--surface-sunken); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 16px 18px; }
.po-card-label { font-size: .85rem; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
.po-card-num { font-size: 1.6rem; font-weight: 900; color: #234E70; display: flex; align-items: center; gap: 8px; }
.po-card-foot { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.po-up { color: #11823b; }

.po-band { font-size: .8rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.po-band.band-great { background: #dcfce7; color: #166534; }
.po-band.band-good { background: #fef2cf; color: #92610a; }
.po-band.band-weak { background: #fee2e2; color: #b91c1c; }
.po-band.band-none { background: #eef0f4; color: var(--text-muted); }

.po-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.po-col { display: flex; flex-direction: column; gap: 1.6rem; }
.po-block-head { display: flex; align-items: center; gap: 10px; }
.po-block h2 { font-size: 1.15rem; font-weight: 800; color: #234E70; margin: 0; }
.po-muted { color: var(--text-muted); font-size: .86rem; font-weight: 600; margin: .2rem 0 .7rem; }

.po-attention { border-left: 4px solid #f59e0b; padding: .2rem 0 .2rem 16px; }
.po-attention.band-weak { border-left-color: #d42424; }
.po-attention.band-good { border-left-color: #f59e0b; }
.po-attention.band-great { border-left-color: #11823b; }
.po-att-crumb { font-size: .8rem; color: var(--text-muted); font-weight: 700; }
.po-att-title { font-size: 1.15rem; font-weight: 800; color: #234E70; margin: 3px 0 6px; }
.po-att-reason { font-size: .9rem; color: var(--text-muted); font-weight: 500; line-height: 1.55; margin: 0 0 10px; }
.po-att-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.po-att-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-att-primary { background: #1f2733; color: #fff; border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 800; font-size: .85rem; text-decoration: none; border: 0; }
.btn-att-primary:hover { background: #111827; }
.btn-att-soft { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 800; font-size: .85rem; color: #374151; cursor: pointer; }

.po-mistakes { margin-top: 12px; border-top: 1px solid var(--card-border); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.po-mistake-q { font-size: .86rem; color: #34435a; font-weight: 600; }
.po-mistake-a { font-size: .82rem; font-weight: 700; margin-top: 2px; }
.po-x { color: #b91c1c; margin-right: 10px; }
.po-ok { color: #166534; }

.po-trend { display: block; max-width: 460px; }

.po-strand { margin-bottom: 18px; }
.po-idle-name { color: var(--text-muted); font-weight: 700; }

.cap-banner { text-align: center; background: var(--surface-advice); border: 1px solid #f5deb0; border-radius: var(--radius-md); padding: 1.6rem 1.4rem; margin-bottom: 1rem; }
.cap-banner-ico { font-size: 2rem; }
.cap-banner strong { display: block; color: #234E70; font-size: 1.05rem; margin-top: .4rem; }
.cap-banner p { color: #7a6a4a; font-weight: 600; margin: .4rem 0 0; line-height: 1.5; }
.po-strand-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.po-strand-name { font-weight: 800; color: #234E70; font-size: .95rem; }
.po-strand-val { font-weight: 800; font-size: .9rem; color: #374151; }
.po-strand-bar { height: 9px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.po-strand-fill { height: 100%; border-radius: 999px; }
.po-strand-fill.band-great { background: #11823b; }
.po-strand-fill.band-good { background: #f59e0b; }
.po-strand-fill.band-weak { background: #d42424; }

.po-subs { margin: 9px 0 2px; padding-left: 14px; border-left: 2px solid var(--card-border); display: flex; flex-direction: column; gap: 9px; }
.po-sub-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.po-sub-name { font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.po-sub-val { font-size: .8rem; font-weight: 800; color: #374151; }
.po-sub-bar { height: 6px; background: #eef0f4; border-radius: 999px; overflow: hidden; }
.po-sub-fill { height: 100%; border-radius: 999px; }
.po-sub-fill.band-great { background: #11823b; }
.po-sub-fill.band-good { background: #f59e0b; }
.po-sub-fill.band-weak { background: #d42424; }

.po-help { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.po-help-ico { font-size: 1.15rem; flex: 0 0 auto; }
.po-help b { display: block; color: #234E70; font-size: .92rem; }
.po-help span { color: var(--text-muted); font-size: .86rem; font-weight: 500; line-height: 1.5; }

.po-empty { text-align: center; background: var(--surface-sunken); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 2.4rem 1.5rem; }
.po-empty-emoji { font-size: 2.4rem; }
.po-empty-title { font-weight: 900; font-size: 1.2rem; color: #234E70; margin-top: .4rem; }
.po-empty-sub { color: var(--text-muted); font-weight: 600; margin-top: .3rem; max-width: 420px; margin-left: auto; margin-right: auto; }

@media (max-width: 760px) { .po-cards { grid-template-columns: 1fr; } .po-grid { grid-template-columns: 1fr; } }

/* ── PARENT OVERVIEW LAYOUT ───────────────────────────────────────────────────
   State on the left, do-this-next on the right. The rail holds uniform action
   cards so a third subject or a second priority adds a card rather than a
   redesign, and a parent in a hurry can read only the right column.

   EVERY PANEL IS A CARD WITH A VISIBLE EDGE. The blocks were transparent, so the
   page read as one long column of grey text with nothing to separate a heading
   from the thing above it. */
/* Full width of whatever contains it. The 1180px cap left a wide screen mostly empty while the
   two columns inside were cramped — the layout already has its own proportions, so the page does
   not need a second one imposed from outside. */
/* The palette this page was built against now lives in :root, so it is the app's and not
   this page's. Nothing here defines a colour of its own any more. */
.po-wrap {
    max-width: none; margin: 0; padding: 1.1rem 1.2rem 2rem;
    background: var(--page-bg); border-radius: var(--radius-lg);
}

/* The chart fills its card. It was capped at 460px, so on a wide card the line stopped halfway and
   the rest of the panel sat empty. The height comes from the viewBox, which is a wide 1000x220 —
   that keeps the aspect close to the card's own at full width, so the drawing fills it without
   `preserveAspectRatio="none"` and the point markers stay circles instead of stretching to
   ellipses. */
.po-trend { width: 100%; max-width: none; height: auto; }

/* The rail carries the priority card now, so it earns a little more width; the main column is
   never split again, which is what was squeezing the map until its tiles wrapped mid-strand and
   folding every objective claim onto three lines. */
/* Two halves across the top. Left: the chart, with "how you can help" under it — the chart needs
   width to be a chart, and the advice reads as the conclusion of the line above it. Right: a 2x2
   of short cards, worth-a-look beside the last quiz, the dormant subject beside the habit. The
   progress table and the objectives then take the whole measure below.
   The left column sets the height and the 2x2 divides it: with align-items:start the right half
   ended wherever its content did, which read as gaps rather than as a grid. */
.po-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.po-colstack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.po-colstack > .card--advice { flex: 1 1 auto; }
.po-sidegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; align-content: stretch; min-width: 0; }
/* The wake card only exists for a dormant subject, so the count is 3, 4 or 5. An odd
   last card would sit alone against a hole; let it take the row instead. */
.po-sidegrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Spans both columns: the objective cards need the width, and the rail ends higher up
   anyway, so a full-width row below both is the honest use of the space. */
.po-fullspan { grid-column: 1 / -1; }

.po-block {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.35rem 1.3rem;
    box-shadow: 0 1px 2px rgba(23, 31, 56, .04), 0 8px 24px rgba(23, 31, 56, .035);
}
.po-block > .po-muted:first-of-type { margin-top: .15rem; }
.po-block-head { margin-bottom: .5rem; justify-content: flex-start; align-items: flex-start; }
.po-block-head > a, .po-block-head > .po-prog-all { margin-left: auto; }
.po-block h2 { font-size: 1.22rem; letter-spacing: -.01em; }

/* The hero: the one place every subject appears, as a line each. */
.po-hero .po-trend { margin-top: .4rem; }
.po-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: .2rem 0 .2rem; }
.po-legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
.po-legend-ink { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.po-hero-foot { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.po-chip-stat { background: var(--surface-accent); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 700; color: #1f4e8c; }

/* Period: a segmented control, not a dropdown. Three options that a parent switches between
   constantly should cost one click, not two, and should show the alternatives without opening. */
.po-seg { display: inline-flex; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 4px; gap: 2px; box-shadow: 0 1px 2px rgba(23,31,56,.04); }
.po-seg-btn { border: 0; background: transparent; border-radius: 999px; padding: .4rem 1.05rem; font-size: .85rem; font-weight: 800; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.po-seg-btn:hover { color: var(--text-primary); }
.po-seg-btn.is-on { background: #1b2a42; color: #fff; }

/* The header controls sit on the page tint, so they need their own edge too. */
.po-picker select { border-radius: 999px; padding: .5rem 1rem; border-color: var(--card-border); box-shadow: 0 1px 2px rgba(23,31,56,.04); }
.po-head { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 1rem 1.3rem; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(23,31,56,.04); }
.po-summary { border-radius: var(--radius-lg); }

/* Thicker, softer bars — the reference reads as pastel tracks, not hairlines. */
.po-strand-bar { height: 12px; background: #f0f1f8; }
.po-strand-fill.band-great { background: #5dcaa5; }
.po-strand-fill.band-good { background: #f3b55c; }
.po-strand-fill.band-weak { background: #ef8e8e; }
.po-strand-fill.band-none { background: transparent; }
.po-sub-bar { height: 8px; background: #f4f5fa; }
.po-strand { margin-bottom: 14px; }
.po-strand-name, .po-sub-name { font-weight: 800; color: var(--text-primary); }
.po-idle-name { color: var(--text-muted); font-weight: 700; }

/* Expand affordance, as in the reference: a quiet rounded square at the card's top right. */
.po-expand {
    width: 34px; height: 34px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card-bg);
    color: var(--text-muted); text-decoration: none; font-size: 1rem; line-height: 1;
}
.po-expand:hover { color: var(--text-primary); border-color: #dde0ec; }

/* ── HEADER: identity, then the four numbers that answer "how is this going" ──
   They were scattered down the page (coverage in the banner, the rest inside the
   progress card); the header is where a parent looks first. */
.po-avatar-big { width: 58px; height: 58px; font-size: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-accent); }
.po-headstats { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; border-left: 1px solid var(--card-border); padding-left: 1.2rem; margin-left: .2rem; }
.po-hstat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 1.1rem; text-align: center; min-width: 92px; }
.po-hstat + .po-hstat { border-left: 1px solid #f1f2f8; }
.po-hstat-ico { color: var(--text-muted); height: 20px; }
.po-hstat-ico svg { width: 19px; height: 19px; }
.po-hstat b { font-size: 1.15rem; font-weight: 900; color: var(--text-primary); line-height: 1.1; }
.po-hstat span:last-child { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); line-height: 1.2; }

/* ── BANNER: the sentence, the coverage, and one thing to do ─────────────────*/
.po-summary { align-items: center; gap: 18px; }
.po-summary-body { flex: 1; min-width: 180px; }
.po-summary-cover { flex: 0 0 auto; display: grid; grid-template-columns: 110px auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; }
.po-summary-bar { grid-row: 1; height: 9px; border-radius: 999px; background: #dfe4f3; overflow: hidden; }
.po-summary-bar span { display: block; height: 100%; border-radius: 999px; background: #4f6ef7; }
.po-summary-cover-num { grid-row: 1; font-size: 1.05rem; font-weight: 900; color: var(--text-primary); }
.po-summary-cover-cap { grid-row: 2; grid-column: 1 / -1; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.po-summary-cta { flex: 0 0 auto; background: #2d6bdd; color: #fff; border-radius: 999px; padding: .75rem 1.3rem; font-size: .88rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.po-summary-cta:hover { background: #2259c4; }

@media (max-width: 1100px) {
    .po-headstats { border-left: 0; padding-left: 0; width: 100%; justify-content: flex-start; }
    .po-hstat { padding: 0 .9rem 0 0; }
    .po-hstat + .po-hstat { border-left: 0; }
}

/* ── DIFFICULTY RIBBON ────────────────────────────────────────────────────────
   The missing half of a ceiling score. "25 of 25 right" and "25 of 25 right,
   every one at easy" are different facts, and the tier was already on every
   question. */
.po-ribbon { margin-top: .8rem; padding: .7rem .85rem .75rem; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.po-ribbon-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: .45rem; }
.po-ribbon-label { font-size: .82rem; font-weight: 800; color: #4b5873; }
.po-ribbon-bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: #e7e9f2; }
.po-tier { height: 100%; }
.tier-easy { background: #bfdbfe; }
.tier-medium { background: #60a5fa; }
.tier-hard { background: #1d4ed8; }
.po-ribbon-keys { display: flex; flex-wrap: wrap; gap: 14px; margin-top: .5rem; font-size: .76rem; font-weight: 700; color: var(--text-muted); }
.po-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.po-ribbon-note { margin: .5rem 0 0; font-size: .8rem; font-weight: 700; color: #1f4e8c; }

/* ── CURRICULUM MAP ───────────────────────────────────────────────────────────
   One tile per objective. A list of 25 "not started" rows carries no more than
   the number 25 and reads as a backlog; the map answers "how much is left" at a
   glance and still fits a fifty-objective stage. */
.po-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .9rem; }
.po-count { background: var(--surface-sunken); border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; font-weight: 700; color: var(--text-primary); }
.po-count b { font-weight: 900; }
.po-count-quiet { background: transparent; color: var(--text-muted); padding-left: .25rem; }

/* The name column fits the longest strand on one line ("Interpretation of Graphs and Data"), and
   the tiles no longer wrap now that the row has the full column width. */
.po-maprow { display: grid; grid-template-columns: 190px 1fr 66px; align-items: center; gap: 12px; margin-bottom: .5rem; }
.po-mapname { font-size: .85rem; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.po-maprow.is-idle .po-mapname, .po-maprow.is-idle .po-mapcount { color: var(--text-muted); font-weight: 700; }
.po-maptiles { display: flex; flex-wrap: wrap; gap: 11px; }
.po-mapgroup { display: inline-flex; gap: 4px; }
/* One tile is one learning objective and its colour is the whole point of the row, so it is
   sized to be read rather than counted. The sub-strand gap stays wider than the tile gap. */
.po-tile { display: inline-block; width: 19px; height: 19px; border-radius: 5px; background: #e7e9f2; }
.po-tile.state-secure { background: var(--chart-secure); }
.po-tile.state-started { background: var(--chart-partial); }
.po-dot.state-secure { background: var(--chart-secure); }
.po-dot.state-started { background: var(--chart-partial); }
.po-dot.state-none { background: #e7e9f2; }
.po-mapcount { font-size: .76rem; font-weight: 700; color: var(--text-muted); text-align: right; }

/* ── CARD ICONS ───────────────────────────────────────────────────────────────
   Every card leads with a tinted glyph, which is what gives the reference its
   rhythm: the eye finds the card before it reads the heading. */
.po-cardico { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.po-cardico svg { width: 22px; height: 22px; }
.po-cardico, .po-objico, .po-prow-icon { background: var(--surface-accent); color: var(--parent-strong); }

.po-act { position: relative; }
.po-act .po-cardico { width: 36px; height: 36px; border-radius: var(--radius-sm); margin-bottom: .5rem; }
.po-act .po-cardico svg { width: 19px; height: 19px; }


/* ── THE ATTEMPTED OBJECTIVES AS A ROW ────────────────────────────────────────
   One card each, side by side, instead of a vertical list — the sub-strand is
   the card's kicker rather than a heading above a stack. */
.po-objrow { display: flex; flex-wrap: wrap; gap: 12px; }
.po-objcard { flex: 1 1 190px; min-width: 190px; background: var(--surface-sunken); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: .85rem .9rem 1rem; }
.po-objcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: .55rem; }
.po-objico { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.po-objico svg { width: 18px; height: 18px; }
.po-objrow .po-objgroup { margin: 0 0 .3rem; }
.po-objrow .po-obj-claim { font-size: .84rem; line-height: 1.45; }
.po-objrow .po-obj-meta { margin-top: .4rem; }

/* ── THE PROGRESS CARD ────────────────────────────────────────────────────────
   A table: strand, its objectives as tiles, a fraction with a bar, a status. The
   tile map stays the heart of it — the columns around it turn "how much is left"
   into something a parent can read a row at a time. */
.po-prog-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
.po-prog-icon { width: 46px; height: 46px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--surface-accent); color: var(--parent-strong); }
.po-prog-icon svg { width: 24px; height: 24px; }
.po-prog-id { flex: 1; min-width: 0; }
.po-prog-id h2 { font-size: 1.3rem; }
.po-prog-all { flex: 0 0 auto; border: 1px solid #dfe3ee; border-radius: 999px; padding: .55rem 1.1rem; font-size: .84rem; font-weight: 800; color: #2f4d8a; text-decoration: none; background: var(--card-bg); }
.po-prog-all:hover { border-color: #c3cce0; }

.po-prog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 1.1rem; }
.po-stat { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-sm); padding: .7rem .9rem; border: 1px solid transparent; }
.po-stat div { display: flex; flex-direction: column; line-height: 1.15; }
.po-stat b { font-size: 1.45rem; font-weight: 900; color: var(--text-primary); }
.po-stat span { font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
.po-stat.stat-secure { background: #eaf7f1; border-color: #d5ece1; }
.po-stat.stat-started { background: #fdf3e3; border-color: #f6e4c6; }
.po-stat.stat-none { background: #f3f4f9; border-color: var(--card-border); }

/* Fractions, not fixed widths. The tiles never needed 900px, so the slack all pooled to the
   right of them while the bar and the pill stayed pinned in a narrow strip at the edge. The
   minmax floors keep every column readable before the fractions start sharing what is left. */
.po-prog-cols, .po-prow { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(0, 1.5fr) minmax(200px, 1.25fr) minmax(120px, .65fr); align-items: center; gap: 18px; }
.po-prog-cols { padding: 0 .2rem .5rem; border-bottom: 1px solid var(--card-border); font-size: 0.75rem; font-weight: 800; color: var(--text-muted); }
.po-prow { padding: .55rem .2rem; border-bottom: 1px solid #f3f4f9; }
.po-prow-name { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 800; color: var(--text-primary); line-height: 1.25; }
.po-prow.is-idle .po-prow-name { color: var(--text-muted); font-weight: 700; }
.po-prow-icon { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; }
.po-prow-icon svg { width: 17px; height: 17px; }

.po-mapsep { display: inline-block; width: 1px; align-self: stretch; min-height: 16px; background: #d7dbe8; margin: 0 2px; }
.po-prow-prog { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: #4b5873; }
.po-prow-prog b { font-weight: 800; white-space: nowrap; min-width: 46px; }
.po-prow-bar { flex: 1; height: 8px; border-radius: 999px; background: #eef0f6; overflow: hidden; min-width: 40px; }
.po-prow-fill { display: block; height: 100%; border-radius: 999px; }
.po-prow-fill.fill-secure { background: #12b76a; }
.po-prow-fill.fill-started { background: #3b82f6; }
.po-prow-fill.fill-none { background: transparent; }
.po-prow-pct { font-weight: 700; color: var(--text-muted); min-width: 34px; text-align: right; }

.po-pill { justify-self: start; font-size: .86rem; font-weight: 800; border-radius: 999px; padding: .42rem 1rem; white-space: nowrap; }
.po-pill.pill-secure { background: #eaf7f1; color: #0f7a4f; }
.po-pill.pill-started { background: #fdf3e3; color: #9d6307; }
.po-pill.pill-none { background: #f3f4f9; color: var(--text-muted); }

.po-rec { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #eff4fe; border: 1px solid #dde7fb; border-radius: var(--radius-md); padding: .9rem 1rem; margin-top: 1.1rem; }
.po-rec-icon { width: 42px; height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--card-bg); color: #2d6bdd; }
.po-rec-icon svg { width: 22px; height: 22px; }
.po-rec-body { flex: 1; min-width: 190px; }
.po-rec-kicker { font-size: .78rem; font-weight: 800; color: #2d6bdd; }
.po-rec-title { font-size: 1rem; font-weight: 900; color: var(--text-primary); line-height: 1.35; margin-top: .1rem; }
.po-rec-sub { font-size: .8rem; font-weight: 600; color: var(--text-secondary); margin-top: .15rem; }
.po-rec-btn { flex: 0 0 auto; background: #2d6bdd; color: #fff; border-radius: var(--radius-sm); padding: .7rem 1.2rem; font-size: .86rem; font-weight: 800; text-decoration: none; }
.po-rec-btn:hover { background: #2259c4; }

.po-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--card-border); }
.po-legend-cell { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text-muted); }
.po-legend-cell b { font-weight: 800; color: #3c4761; }
.po-legend-cell .po-dot { width: 19px; height: 19px; border-radius: 5px; margin: 0; }
.po-legend-sep { min-height: 14px; margin: 0; }
.po-legend-div { width: 1px; height: 22px; background: #e4e7f0; }

@media (max-width: 900px) {
    .po-prog-cols { display: none; }
    .po-prow { grid-template-columns: 1fr; gap: 6px; }
}

/* ── THE ATTEMPTED OBJECTIVES ─────────────────────────────────────────────────
   Detail belongs only to work that exists. Sub-strand is a heading here rather
   than another tap — three levels of structure, two of interaction. */
.po-objgroup { margin: .9rem 0 .4rem; font-size: 0.75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
/* At full column width a claim fits on one or two lines instead of four, so the list stops being
   the tallest thing on the page. */
.po-obj { display: flex; align-items: center; gap: 12px; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: .55rem .8rem; margin-bottom: .4rem; }
.po-obj-main { flex: 1; min-width: 0; }
.po-obj-claim { font-size: .88rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.po-obj-meta { font-size: .76rem; font-weight: 600; color: var(--text-muted); margin-top: .2rem; }
.po-medal { flex: 0 0 auto; font-size: 0.75rem; font-weight: 800; border-radius: 999px; padding: .15rem .6rem; text-transform: capitalize; }
.medal-gold { background: #fdf0d2; color: #845309; }
.medal-silver { background: #eef1f6; color: #4a5568; }
.medal-bronze { background: #fae7da; color: #8a4b20; }
.medal-none { background: #fff3e0; color: #92610a; }

.po-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--card-border); margin-top: .8rem; padding-top: .8rem; }
.po-next-main { flex: 1; min-width: 190px; }
.po-next-count { font-size: .88rem; font-weight: 800; color: var(--text-primary); }
.po-next-claim { font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-top: .15rem; }

/* Subject scope for everything below the hero. Rendered only when there is more
   than one subject — a control with a single option looks interactive and is not. */
.po-scope { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.po-scope-label { font-size: .82rem; font-weight: 700; color: var(--text-muted); margin-right: .2rem; }
.po-scope-btn { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 999px; padding: .32rem .9rem; font-size: .84rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.po-scope-btn:hover { border-color: #c9d1e0; }
.po-scope-btn.is-on { background: #234E70; border-color: #234E70; color: #fff; }

/* Action cards: one shape, repeated, each on its own soft tint so the rail scans as a list of
   distinct things rather than a stack of identical white boxes. */
.po-act {
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 1.05rem 1.15rem 1.15rem;
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 1px 2px rgba(23, 31, 56, .03);
}
/* ── SEMANTIC CARD VARIANTS ───────────────────────────────────────────────────
   Put one of these on ANY card, on any page, and it takes its colour from what it
   means. Deliberately not tied to .po-act or to this page: a billing card saying a
   payment failed is the same `attention` as a subject nobody has practised.

   Never assign these by position. The moment card 3 is red because it is third,
   red has stopped meaning anything and the next page has to re-learn the rule. */
/* The doubled class is deliberate. A page's own <style> block is served after site.css, so any
   base card rule it carries -- .bill-card { background: var(--card-bg) } -- beats a single-class
   variant on source order alone, and the variant silently does nothing. That is exactly how the
   billing pending card came out white. Two classes outrank one from anywhere. */
.card--success.card--success     { background: var(--surface-success);   border-color: var(--border-success); }
.card--attention.card--attention { background: var(--surface-attention); border-color: var(--border-attention); }
.card--info.card--info           { background: var(--surface-info);      border-color: var(--border-info); }
.card--advice.card--advice       { background: var(--surface-advice);    border-color: var(--border-advice); }

/* 2px, because the border is carrying the distinction the fills cannot -- and `solid`, because a
   variant that sets only border-color draws nothing on an element that never declared a border.
   The billing error panel came out edgeless that way: the colour was right and invisible. */
.card--success, .card--attention, .card--info, .card--advice { border-width: 2px; border-style: solid; }

/* On a tinted card the icon chip goes white and takes the variant's own colour, so the
   glyph stays the strongest mark on the card instead of competing with the fill. */
.card--success .po-cardico   { background: var(--card-bg); color: var(--border-success); }
.card--attention .po-cardico { background: var(--card-bg); color: var(--border-attention); }
.card--info .po-cardico      { background: var(--card-bg); color: var(--border-info); }
.card--advice .po-cardico    { background: var(--card-bg); color: var(--border-advice); }
.po-act-kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.po-act-title { font-weight: 900; font-size: 1.05rem; color: var(--text-primary); margin-top: .25rem; line-height: 1.3; letter-spacing: -.01em; }
.po-act-body { color: var(--text-secondary); font-weight: 600; font-size: .86rem; margin: .45rem 0 .85rem; line-height: 1.5; }
.po-act .btn-att-primary, .po-act .btn-att-soft { border-radius: 999px; padding: .6rem 1.15rem; }
.po-act .btn-att-soft { background: var(--card-bg); border-color: var(--card-border); }
.po-act .btn-att-primary, .po-act .btn-att-soft { display: inline-block; }
.po-act .po-mistakes { margin-top: .6rem; }

@media (max-width: 1080px) { .po-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .po-sidegrid { grid-template-columns: 1fr; } }
.device-group { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.device-group.highlight { border-color: #27C5D9; box-shadow: 0 0 0 3px rgba(39,197,217,0.15); }
.device-group-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.device-group-head strong { font-size: 1.05rem; }
.device-group-head .device-muted { margin-left: auto; }
.device-warn { background: var(--surface-advice); border: 1px solid #ffe28a; color: #7a5b00; border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.88rem; margin-bottom: 0.7rem; line-height: 1.4; }
.device-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.device-info { display: flex; flex-direction: column; gap: 0.15rem; }
.device-name { font-weight: 700; }
.device-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; }
.device-badge.pending { background: #fde68a; color: #7a5b00; }
.device-badge.ok { background: #dcfce7; color: #166534; }
.device-actions { display: flex; gap: 0.4rem; flex: none; }
.btn-mini { border: 0; border-radius: var(--radius-sm); padding: 0.35rem 0.8rem; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
.btn-mini.approve { background: #11823b; color: #fff; }
.btn-mini.remove { background: #fee2e2; color: #b91c1c; }

/* Parent "set quizzes" (assignments) page */
.assign-suggest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #eafafc; border: 1px solid #b8ecf2; border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; margin-bottom: 1.1rem; }
.assign-form { display: flex; flex-direction: column; gap: 0.25rem; }
.assign-row { display: flex; gap: 0.75rem; }
.assign-row .setup-field { flex: 1; }
.assign-schedule { display: flex; gap: 1.2rem; margin: 0.3rem 0; }
.assign-radio { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; cursor: pointer; }
.assign-sub { margin-top: 0.4rem; }
.assign-days { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.assign-day { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; font-size: 0.85rem; font-weight: 700; cursor: pointer; }

/* Assignment options: questions / timing / when */
.opt-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.opt-chip { position: relative; cursor: pointer; }
.opt-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-chip > span { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 52px; padding: 0.55rem 0.95rem; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); font-weight: 800; color: #374151; background: var(--card-bg); transition: all 0.12s ease; }
.opt-chip:hover > span { border-color: var(--accent); }
.opt-chip input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-ring); }
.opt-chip-wide > span { min-width: auto; }

.opt-inline { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.opt-minutes { display: inline-flex; align-items: center; gap: 0.45rem; }
.opt-num { width: 68px; height: 42px; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); padding: 0 0.65rem; font-weight: 800; text-align: center; color: #374151; }
.opt-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.opt-suffix { color: var(--text-muted); font-weight: 800; font-size: 0.85rem; }

.opt-seg { display: inline-flex; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 0.2rem; }
.opt-seg-btn { position: relative; cursor: pointer; }
.opt-seg-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-seg-btn > span { display: inline-block; padding: 0.55rem 1.2rem; font-weight: 800; color: var(--text-muted); background: var(--card-bg); transition: all 0.12s ease; }
.opt-seg-btn + .opt-seg-btn > span { border-left: 1.5px solid var(--card-border); }
.opt-seg-btn input:checked + span { background: var(--accent-strong); color: #fff; }

.opt-sub { margin-top: 0.6rem; }
.opt-hint { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.35rem; }
.opt-date { height: 44px; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); padding: 0 0.85rem; font-weight: 700; color: #374151; }
.opt-date:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.opt-days { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opt-day { position: relative; cursor: pointer; }
.opt-day input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-day > span { display: inline-block; min-width: 44px; text-align: center; padding: 0.4rem 0.65rem; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); font-weight: 800; font-size: 0.84rem; color: #374151; background: var(--card-bg); transition: all 0.12s ease; }
.opt-day input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }

/* Learner dashboard: strand tiles -> sub-strand cards -> topic cards */
/* Cheerful rotating palette (applied to strand tiles + sub-strand cards) */
.ld-c0 { --c: #6d65be; --cbg: #f1f0fe; --cbd: #ddd9fb; }
.ld-c1 { --c: #0fb5a4; --cbg: #e2faf6; --cbd: #bff0e8; }
.ld-c2 { --c: #f59e0b; --cbg: #fff4dd; --cbd: #fbe4b8; }
.ld-c3 { --c: #ec4899; --cbg: #fdeaf3; --cbd: #f8cfe2; }
.ld-c4 { --c: #3b82f6; --cbg: #e9f2ff; --cbd: #cbdefb; }

.ld-subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 1.75rem; }
.ld-subj { display: flex; flex-direction: column; justify-content: center; min-height: 150px; background: var(--card-bg); border: 2px solid var(--cbd, var(--card-border)); border-radius: var(--radius-lg); padding: 22px 24px; text-decoration: none; color: #234E70; box-shadow: 0 6px 16px rgba(35,78,112,.06); transition: transform .12s ease, box-shadow .12s ease; }
.ld-subj:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35,78,112,.14); }
.ld-subj.is-selected { border-color: var(--c, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #6d65be) 22%, transparent); }
.ld-subj-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ld-subj-ico { width: 50px; height: 50px; border-radius: var(--radius-md); background: var(--cbg, #f1f0fe); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.ld-subj-name { font-weight: 800; font-size: 1.2rem; }
.ld-meter { height: 10px; background: #edf0f4; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.ld-meter-fill { height: 100%; background: var(--c, var(--accent)); border-radius: 999px; }
.ld-subj-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-comp { font-size: .82rem; color: var(--text-muted); font-weight: 700; }
.ld-badge { font-size: .8rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.band-great { background: #dcfce7; color: #166534; }
.band-good { background: #fff3d6; color: #986500; }
.band-weak { background: #fee2e2; color: #b91c1c; }
.band-none { background: #eef0f4; color: var(--text-muted); }

.ld-detail { margin-top: .5rem; }
.ld-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ld-crumb { font-size: 1.05rem; color: var(--text-muted); font-weight: 700; }
.ld-crumb b { color: #234E70; font-weight: 900; font-size: 1.15rem; }
.ld-crumb-sep { margin: 0 4px; color: var(--text-muted); }

.ld-block { border-top: 1px solid var(--card-border); padding: 14px 0; }
.ld-block:first-of-type { border-top: 0; }
.ld-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ld-block-name { font-weight: 800; font-size: 1rem; }
.ld-block-metrics { display: flex; align-items: center; gap: 10px; }

.ld-row { padding: 9px 0; border-top: 1px solid #f2f4f8; }
.ld-row:first-child { border-top: 0; }
.ld-row-name { font-size: .95rem; font-weight: 700; color: #34435a; line-height: 1.35; margin-bottom: 6px; max-width: 720px; }
.ld-row-name.is-locked { color: var(--text-muted); font-weight: 600; }
.ld-row-bottom { display: flex; align-items: center; gap: 18px; }
.ld-bar { position: relative; height: 22px; flex: 0 1 460px; background: #eef0f4; border-radius: var(--radius-sm); overflow: hidden; }
.ld-bar-practice { position: absolute; left: 0; top: 0; height: 100%; background: #c6cdd8; }
.ld-bar-success { position: absolute; left: 0; top: 7px; height: 8px; border-radius: 4px; }
.ld-bar-success.band-great { background: #11823b; }
.ld-bar-success.band-good { background: #f59e0b; }
.ld-bar-success.band-weak { background: #d42424; }
.ld-bar-tick { position: absolute; left: 75%; top: 0; height: 100%; width: 2px; background: #334155; }
.ld-row-meta { flex: 0 0 auto; font-size: .85rem; color: var(--text-muted); font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ld-row-meta b { color: #234E70; }
.ld-locked { color: var(--text-muted); }
.ld-check { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: #11823b; color: #fff; font-size: 0.75rem; font-weight: 900; }

.ld-legend { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: .78rem; color: var(--text-muted); font-weight: 700; }
.ld-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lk-swatch { display: inline-block; border-radius: 5px; }
.lk-practice { width: 22px; height: 10px; background: #c6cdd8; }
.lk-success { width: 22px; height: 6px; background: #f59e0b; }
.lk-tick { display: inline-block; width: 2px; height: 14px; background: #334155; }
.lk-bands .band-weak { background: none; color: #d42424; padding: 0; }
.lk-bands .band-good { background: none; color: #b45309; padding: 0; }
.lk-bands .band-great { background: none; color: #166534; padding: 0; }

.ld-empty { text-align: center; background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; }
.ld-empty-emoji { font-size: 2.6rem; }
.ld-empty-title { font-weight: 900; font-size: 1.3rem; color: #234E70; margin-top: .5rem; }
.ld-empty-sub { color: var(--text-muted); font-weight: 600; margin-top: .3rem; }

/* Subject headline (rich hero) + strand section + sub-strand accordion */
.ld-hero2 { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; background: linear-gradient(135deg, #f3f1ff 0%, #eaf1ff 100%); border: 2px solid #e6e6fb; border-radius: var(--radius-lg); padding: 22px 32px; margin-bottom: 1.5rem; box-shadow: 0 8px 22px rgba(35,78,112,.06); }
.ld-hero2-lead { display: flex; align-items: center; gap: 16px; }
.ld-hero2-illus { width: 76px; height: 76px; border-radius: 20px; background: linear-gradient(160deg, #8b82e6, #6157c4); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; box-shadow: 0 8px 18px rgba(127,119,221,.35); flex: 0 0 auto; }
.ld-hero2-id { min-width: 150px; }
.ld-hero2-name { font-weight: 900; font-size: 1.7rem; color: #234E70; line-height: 1.1; }
.ld-hero2-sub { font-size: .9rem; color: var(--text-muted); font-weight: 700; margin-top: 5px; }

.ld-hero2-sec { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 22px; border-left: 1.5px solid var(--card-border); }
.ld-hero2-ring svg { width: 108px; height: 108px; filter: drop-shadow(0 5px 6px rgba(35,78,112,.16)); }
.ld-hero2-caption { font-size: .95rem; color: var(--text-muted); font-weight: 800; }

.ld-shield { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; }
.ld-shield.band-great { background: #11823b; }
.ld-shield.band-good { background: #b28806; }
.ld-shield.band-weak { background: #d42424; }
.ld-shield.band-none { background: #6a717b; }
.ld-shield-txt { font-weight: 800; font-size: .95rem; }
.ld-shield-txt.band-great { color: #166534; }
.ld-shield-txt.band-good { color: #92610a; }
.ld-shield-txt.band-weak { color: #b91c1c; }
.ld-shield-txt.band-none { color: var(--text-muted); }

.ld-hero2-stats { flex-direction: row; gap: 18px; }
.hstat { background: var(--card-bg); border-radius: var(--radius-md); padding: 12px 16px; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 3px 9px rgba(35,78,112,.07); }
.hstat-ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 2px; }
.hi-blue { background: #e3effe; }
.hi-green { background: #e0f6e7; }
.hi-amber { background: #fde9d5; }
.hi-purple { background: #efeafe; }
.hstat b { font-size: 1.35rem; color: #234E70; line-height: 1; }
.hstat-lbl { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; line-height: 1.15; text-align: center; }

.ld-hero2-cta { border-left: 0; padding-left: 0; }
.btn-continue { display: inline-block; background: linear-gradient(160deg, #8b82e6, #6157c4); color: #fff; border-radius: var(--radius-md); padding: 13px 24px; font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 6px 16px rgba(127,119,221,.4); text-align: center; transition: transform .12s ease, filter .12s ease; }
.btn-continue:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ld-hero2-next { font-size: .8rem; color: var(--text-muted); font-weight: 700; margin-top: 8px; text-align: center; }

/* Quiz-quality pie charts + shared key */
.ld-pie { gap: 7px; }
.ld-pie-cap { font-size: 0.75rem; color: var(--text-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.ld-pie-svg { display: block; width: 108px; height: 108px; filter: drop-shadow(0 6px 7px rgba(35,78,112,.28)) drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.ld-pie-legend { display: flex; gap: 12px; font-size: .9rem; font-weight: 800; }
.ld-pie-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ld-pie-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pl-well { color: #166534; } .pl-well::before { background: #11823b; }
.pl-fair { color: #92610a; } .pl-fair::before { background: #b28806; }
.pl-low { color: #b91c1c; } .pl-low::before { background: #d42424; }

.ld-hero2-key { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: .76rem; color: var(--text-muted); font-weight: 700; }
.ld-hero2-key span { display: inline-flex; align-items: center; gap: 6px; }
.ld-hero2-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.k-well { background: #11823b; } .k-fair { background: #b28806; } .k-low { background: #d42424; }

/* Parent passwordless quick sign-in tile + trust option */
.quick-parent-btn { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 2px solid var(--accent); border-radius: var(--radius-md); padding: 14px 16px; cursor: pointer; text-align: left; color: #234E70; transition: background .12s ease, transform .12s ease; }
.quick-parent-btn:hover { background: var(--accent-tint); transform: translateY(-1px); }
.quick-parent-ava { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-strong); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; flex: 0 0 auto; }
.quick-parent-txt { display: flex; flex-direction: column; flex: 1; }
.quick-parent-txt b { font-weight: 800; font-size: 1rem; }
.quick-parent-txt small { color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.auth-or { text-align: center; color: var(--text-muted); font-size: .82rem; font-weight: 700; margin: 16px 0; position: relative; }
.auth-or::before, .auth-or::after { content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: #e9edf3; }
.auth-or::before { left: 0; } .auth-or::after { right: 0; }
.auth-trust { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 16px; font-size: .85rem; color: #4a5568; font-weight: 600; cursor: pointer; }
.auth-trust small { color: var(--text-muted); font-weight: 500; }

@media (max-width: 720px) {
    .ld-hero2-sec { border-left: 0; padding-left: 0; }
    .ld-hero2-cta { margin-left: 0; }
}

.ld-section-label { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .7rem 4px; }

/* Strand hero banner */
.ld-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #fef5ff 0%, #eef3ff 100%); border: 2px solid #ece5fb; border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 18px; flex-wrap: wrap; box-shadow: 0 6px 16px rgba(35,78,112,.05); }
.ld-hero-ico { width: 60px; height: 60px; border-radius: var(--radius-md); background: var(--card-bg); box-shadow: 0 3px 8px rgba(127,119,221,.18); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; flex: 0 0 auto; }
.ld-hero-name { font-weight: 900; font-size: 1.55rem; color: #234E70; }
.ld-hero-metrics { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Strand card: coloured header band + white body holding the sub-strand cards */
.ld-strand { background: var(--card-bg); border: 2px solid var(--cbd, #e6e6fb); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(35,78,112,.06); }
.ld-strand-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--cbg, #f3f1ff); border-bottom: 2px solid var(--cbd, #e6e6fb); padding: 18px 22px; }
.ld-strand-head .ld-hero-ico { box-shadow: 0 3px 8px color-mix(in srgb, var(--c, #6d65be) 25%, transparent); }
.ld-strand-body { background: var(--card-bg); padding: 16px; }
.ld-strand-body .ld-ss:last-child { margin-bottom: 0; }

/* Sub-strand card: coloured header band + white body of topic tiles */
.ld-ss { background: var(--card-bg); border: 2px solid var(--cbd, var(--card-border)); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; }
.ld-ss-head { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--cbg, var(--surface-sunken)); border: 0; padding: 15px 20px; cursor: pointer; text-align: left; font: inherit; }
.ld-ss.is-open .ld-ss-head { border-bottom: 2px solid var(--cbd, var(--card-border)); }
.ld-ss-head:hover .ld-ss-name { color: var(--c, var(--accent-deep)); }
.ld-ss-ico { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--card-bg); box-shadow: 0 2px 6px color-mix(in srgb, var(--c, #234E70) 22%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex: 0 0 auto; }
.ld-ss-name { font-weight: 800; font-size: 1.18rem; color: #234E70; }
.ld-ss-metrics { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ld-ss-caret { color: var(--c, var(--text-muted)); transition: transform .15s ease; font-size: 1.15rem; font-weight: 900; flex: 0 0 auto; }
.ld-ss.is-open .ld-ss-caret { transform: rotate(180deg); }
.ld-ss-body { display: none; background: var(--card-bg); padding: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ld-ss.is-open .ld-ss-body { display: grid; }

/* Blue completion bar */
.ld-comp2 { color: #2d6ad2; font-weight: 800; font-size: .82rem; white-space: nowrap; }
.ld-tbar { height: 9px; width: 150px; background: #e4e9f1; border-radius: 999px; overflow: hidden; }
.ld-tbar-lg { width: 200px; }
.ld-tbar-fill { height: 100%; background: linear-gradient(90deg, #4b93ff, #2d6ad2); border-radius: 999px; }

/* Success star badge */
.ld-star { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .84rem; padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.ld-star .st { font-size: .95rem; line-height: 1; }
.ld-star.band-great { background: #dcfce7; color: #166534; }
.ld-star.band-great .st { color: #11823b; }
.ld-star.band-good { background: #fef2cf; color: #92610a; }
.ld-star.band-good .st { color: #b28806; }
.ld-star.band-weak { background: #fee2e2; color: #b91c1c; }
.ld-star.band-weak .st { color: #d42424; }
.ld-star.band-none { background: #eef0f4; color: var(--text-muted); }

/* Mastery medal — depth across difficulty levels (separate from the accuracy star) */
.ld-medal { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .8rem; padding: 5px 12px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.ld-medal-bronze { background: #f7ede3; color: #8a5a2b; border-color: #e6cfb6; }
.ld-medal-silver { background: #eef1f5; color: #566072; border-color: #d3dae3; }
.ld-medal-gold { background: #fdf4d0; color: #896c09; border-color: #efd98a; }

/* Topic tile (sits in the white body) */
.ld-tcard { display: flex; flex-direction: column; background: #f3f5f8; border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 16px 17px; }
.ld-tcard.is-locked { background: #eef0f4; }
.ld-tcard-title { font-weight: 700; font-size: .92rem; line-height: 1.4; color: #2f3d52; flex: 1 0 auto; margin-bottom: 12px; }
.ld-tcard.is-locked .ld-tcard-title { color: var(--text-secondary); font-weight: 600; }
.ld-tstart { font-size: .82rem; color: var(--text-muted); font-weight: 700; }
.ld-tcard-quizzes { font-size: .8rem; color: var(--text-muted); font-weight: 700; margin-bottom: 7px; }
.ld-tcard .ld-tbar { width: 100%; margin-bottom: 10px; }
.ld-tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.ld-tcard-actions { display: flex; align-items: center; gap: 8px; }
.ld-lock-circle { width: 32px; height: 32px; border: 2px dashed #c3ccd8; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; filter: grayscale(1); opacity: .7; }
.ld-tbtn { border: 0; color: #fff; background: var(--c, var(--accent-strong)); border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 800; font-size: .82rem; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 9px color-mix(in srgb, var(--c, #6d65be) 40%, transparent); transition: filter .12s ease, transform .12s ease; }
.ld-tbtn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* Legend (dots) */
.ld-legend2 { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 6px; font-size: .82rem; color: var(--text-muted); font-weight: 700; }
.ld-legend2 > span { display: inline-flex; align-items: center; gap: 7px; }
.lg-line { width: 22px; height: 4px; border-radius: 2px; background: #2d6ad2; }
.lg-dot { width: 11px; height: 11px; border-radius: 50%; }
.lg-weak { background: #d42424; }
.lg-good { background: #b28806; }
.lg-great { background: #11823b; }

@media (max-width: 560px) {
    .ld-row-bottom { flex-wrap: wrap; gap: 8px 14px; }
    .ld-bar { flex: 1 1 100%; }
}
.tp-mastery { margin-left: 0.45rem; font-size: 0.75rem; font-weight: 800; border-radius: 999px; padding: 0.05rem 0.45rem; }
.tp-mastery.m-strong { background: #dcfce7; color: #166534; }
.tp-mastery.m-ok { background: var(--surface-advice); color: var(--border-advice); }
.tp-mastery.m-weak { background: #fee2e2; color: #b91c1c; }
.tp-mastery.m-new { background: #eef0f4; color: var(--text-muted); }

/* Child "tasks from your grown-up" on the setup page */
.task-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.task-card { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; text-align: left; border: 2px solid #ffd27a; background: var(--surface-advice); border-radius: var(--radius-sm); padding: 0.85rem 1rem; cursor: pointer; font: inherit; }
.task-card:hover { border-color: #f5b53d; }
.task-card.overdue { border-color: #f59e0b; background: #fff3d6; }
.task-main { display: flex; flex-direction: column; gap: 0.15rem; }
.task-title { font-weight: 800; color: #7a5b00; }
.task-reason { font-size: 0.8rem; color: #b45309; font-weight: 700; }

/* On-demand explainer (animated step-through) */
.explainer { max-width: 720px; margin: 0 auto; }
.exp-back { margin-bottom: 0.5rem; }
.exp-head { text-align: center; margin-bottom: 1rem; }
.exp-head h1 { font-weight: 900; margin: 0 0 0.3rem; }
.exp-head p { color: var(--text-muted); font-weight: 600; margin: 0; }
.exp-stage { display: flex; justify-content: center; margin: 0 auto 1.25rem; }
.exp-image { max-width: 100%; height: auto; border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--card-bg); padding: 0.75rem; }
.exp-stage { flex-direction: column; align-items: center; gap: 0.5rem; }
.exp-clockwrap { position: relative; width: 220px; max-width: 70vw; }
.exp-clock { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(38,33,92,0.12)); }
.exp-clock-time { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); background: #26215c; color: #fff; font-weight: 900; border-radius: 999px; padding: 0.2rem 0.9rem; font-size: 1rem; letter-spacing: 0.02em; }
.exp-clock-caption { color: var(--text-muted); font-weight: 700; font-size: 0.92rem; margin-top: 0.5rem; }
.exp-clock-caption strong { color: #234E70; }
.exp-steps { display: flex; flex-direction: column; gap: 0.6rem; }
.exp-step { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card-bg); opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.exp-step.is-shown { opacity: 1; transform: none; }
.exp-step.is-current { border-color: #6d65be; box-shadow: 0 8px 22px rgba(127,119,221,0.18); }
.exp-step.exp-result.is-shown { background: var(--surface-success); border-color: #86efac; }
.exp-step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #6d65be; color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 0.9rem; }
.exp-step.exp-result .exp-step-num { background: #11823b; }
.exp-step-body { display: flex; flex-direction: column; gap: 0.35rem; }
.exp-text { font-weight: 700; color: #26215c; }
.exp-math { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.exp-expr { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; background: #f5f6fb; border-radius: 8px; padding: 0.15rem 0.55rem; font-weight: 700; color: #4a44a0; }
.exp-value { font-weight: 900; color: #11823b; }
.exp-answer { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; margin: 1.25rem 0 0; text-align: center; font-size: 1.15rem; padding: 0.9rem; border-radius: var(--radius-sm); background: var(--surface-advice); border: 1px solid #ffe28a; }
.exp-answer.is-shown { opacity: 1; transform: none; }
.exp-answer strong { color: #234E70; }
.exp-controls { display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
.exp-controls button:disabled { opacity: 0.4; cursor: default; }
.app-user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 700;
    color: #374151;
    font-size: 0.9rem;
}
.app-user-chip svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.app-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-weight: 700;
    text-decoration: none;
}
.app-logout:hover { color: #111827; }
.app-menu-btn {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    cursor: pointer;
}
.app-menu-btn:hover { background: var(--surface-sunken); }

/* ===== Themed solo card (register, forgot, reset, confirm) ===== */
.auth-solo {
    max-width: 480px;
    box-shadow: var(--shadow-soft);
    border: 0.5px solid var(--card-border);
    animation: auth-rise 0.5s ease both;
}
.auth-solo-head {
    text-align: center;
    margin-bottom: 1.5rem;
}
.auth-solo-ico {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.85rem;
    border-radius: 20px;
    background: var(--accent-tint);
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-solo-head h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-deep);
    margin: 0;
}
.auth-solo-head p {
    color: var(--text-muted);
    font-weight: 600;
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
}
.btn-auth-soft {
    height: 50px;
    border: 2px solid var(--accent-tint);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--accent-strong);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: background 0.15s ease;
}
.btn-auth-soft:hover { background: var(--accent-tint); }
.auth-divider {
    border: 0;
    border-top: 1px solid var(--card-border);
    margin: 1.5rem 0;
}

/* ===== Dashboard streak banner ===== */
.streak-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--accent-grad, linear-gradient(160deg, #6d65be, #534ab7));
    color: #fff;
    border-radius: var(--radius-md);
    padding: 1.1rem 1.4rem;
    box-shadow: 0 8px 18px var(--accent-shadow, rgba(127, 119, 221, 0.3));
}
.streak-flame {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}
.streak-num {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}
.streak-label {
    font-weight: 700;
    opacity: 0.95;
    margin-top: 0.2rem;
}

/* ===== Learner dashboard ===== */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.dash-head h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--accent-deep, #111827);
    margin: 0;
}
.dash-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.dash-chip {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: #4b5563;
}
.dash-chip strong { color: var(--accent-strong, #111827); }

.btn-dash {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-strong, #4b5563);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px var(--accent-shadow, rgba(0, 0, 0, 0.15));
    transition: transform 0.08s ease, background 0.15s ease;
}
.btn-dash:hover { background: var(--accent-strong); color: #fff; }
.btn-dash:active { transform: scale(0.98); }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-tile {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-soft);
}
.stat-ico {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.stat-num { font-size: 1.9rem; font-weight: 800; line-height: 1; color: #111827; }
.stat-label { font-weight: 700; color: var(--text-muted); font-size: 0.9rem; margin-top: 0.3rem; }
.ico-violet { background: #eeedfe; color: #534ab7; }
.ico-green { background: #eafaf0; color: #11823b; }
.ico-amber { background: #fef6e7; color: #ab5e04; }
.ico-blue { background: #e6f1fb; color: #185fa5; }

/* Flip tiles */
.flip-tile {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    perspective: 1000px;
    height: 152px;
    width: 100%;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.flip-tile.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.flip-back { transform: rotateY(180deg); }
.flip-hint {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    color: #d1d5db;
    display: flex;
}
.flip-tile:hover .flip-hint { color: var(--accent, var(--text-muted)); }
.flip-back-title { font-weight: 800; color: #111827; font-size: 0.9rem; margin-bottom: 0.5rem; }
.flip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.28rem 0;
}
.flip-row + .flip-row { border-top: 1px solid #f5f6f8; }
.flip-row b { color: #111827; font-size: 1.05rem; }
.flip-dot { display: inline-flex; align-items: center; gap: 0.45rem; }
.flip-dot span { width: 10px; height: 10px; border-radius: 3px; flex: none; }

@media (prefers-reduced-motion: reduce) {
    .flip-inner { transition: none; }
}

/* Generic auto-height flip (donut, subject cards) */
.flipc {
    perspective: 1200px;
    cursor: pointer;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    width: 100%;
    display: block;
}
.flipc-inner {
    position: relative;
    display: grid;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.flipc.flipped .flipc-inner { transform: rotateY(180deg); }
.flipc-face {
    grid-area: 1 / 1;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.flipc-back { transform: rotateY(180deg); }
.flip-hint.br { top: auto; bottom: 0.75rem; right: 0.85rem; }
.flip-highlight {
    border-top: 1px solid #f1f2f6;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}
.flip-highlight b { color: #111827; }

@media (prefers-reduced-motion: reduce) {
    .flipc-inner { transition: none; }
}

.dash-section { margin-top: 1.75rem; }
.dash-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recommend-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    background: linear-gradient(160deg, #ffffff, #faf9ff);
    border: 1.5px solid var(--accent-tint, #eee);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow-soft);
}
.recommend-left { display: flex; align-items: center; gap: 1rem; }
.recommend-ico {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--accent-tint);
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}
.recommend-card h4 { margin: 0; font-weight: 800; color: var(--accent-deep); font-size: 1.05rem; }
.recommend-card p { margin: 0.15rem 0 0; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }

.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.subject-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-soft);
}
.subject-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.subject-name { font-weight: 800; color: #111827; }
.subject-score { font-size: 1.6rem; font-weight: 800; color: #111827; }
.subject-meta { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-top: 0.55rem; }

.status-badge { font-size: 0.75rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.status-strong { background: #eafaf0; color: #11823b; }
.status-practice { background: #fef6e7; color: #b45309; }
.status-needs { background: #fdecec; color: #d42424; }

.progress-track { height: 10px; border-radius: 999px; background: #f1f2f6; overflow: hidden; margin-top: 0.7rem; }
.progress-fill { height: 100%; border-radius: 999px; }
.fill-strong { background: #11823b; }
.fill-practice { background: #f59e0b; }
.fill-needs { background: #ef4444; }

.topic-card { overflow: hidden; }
.topic-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.topic-table thead th {
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    font-weight: 800;
    padding: 0.7rem 1rem;
    background: var(--surface-sunken);
}
.topic-table tbody td { padding: 0.8rem 1rem; border-top: 1px solid #f1f2f6; vertical-align: middle; }
.topic-title { font-weight: 800; color: #111827; }
.topic-sub { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; }

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.badge-tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: linear-gradient(160deg, #fffdf5, #ffffff);
    border: 1px solid #f3ecd3;
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-soft);
}
.badge-medal {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--radius-sm);
    background: #fff4d6;
    color: #936800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.badge-tile h5 { margin: 0; font-weight: 800; font-size: 0.98rem; color: #111827; }
.badge-tile p { margin: 0.1rem 0 0; color: var(--text-muted); font-weight: 600; font-size: 0.83rem; }

.dash-empty {
    color: var(--text-muted);
    font-weight: 600;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}

@media (max-width: 600px) {
    .stat-num { font-size: 1.6rem; }
    .dash-head h1 { font-size: 1.4rem; }
}

/* ===== Dashboard analytics (donut, radar, map, trend, focus) ===== */
.insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}
.insight-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
}
.insight-title { font-weight: 800; color: #111827; margin-bottom: 0.9rem; font-size: 1rem; }

.donut-wrap { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.donut-legend { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9rem; }
.legend-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-weight: 700; }
.legend-item b { color: #111827; }
.legend-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }

.subject-bars { display: flex; flex-direction: column; gap: 0.75rem; }
.sbar-top { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; color: #374151; margin-bottom: 0.3rem; }

.map-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.map-col-title { font-size: 0.8rem; font-weight: 800; margin-bottom: 0.6rem; }
.map-chips { display: flex; flex-direction: column; gap: 0.45rem; }
.map-chip { font-size: 0.82rem; font-weight: 700; padding: 0.4rem 0.7rem; border-radius: 9px; }
.map-strong { background: #eafaf0; color: #166534; }
.map-practice { background: #fef6e7; color: #92400e; }
.map-needs { background: #fdecec; color: #991b1b; }
.col-strong { color: #11823b; }
.col-practice { color: #b45309; }
.col-needs { color: #d42424; }
.map-empty { font-size: 0.8rem; color: #c4c8cf; font-weight: 600; }

.focus-card {
    background: linear-gradient(160deg, #faf9ff, #ffffff);
    border: 1.5px solid var(--accent-tint, #eee);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
}
.focus-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; }
.focus-item + .focus-item { border-top: 1px solid #f1f2f6; }
.focus-badge {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}
.fb-practice { background: #eeedfe; color: #534ab7; }
.fb-help { background: #fdecec; color: #d42424; }
.fb-review { background: #fff4d6; color: #936800; }
.focus-text { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.focus-text b { color: var(--accent-deep, #26215c); }

.trend-caption { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-top: 0.4rem; }

@media (max-width: 760px) {
    .insight-grid { grid-template-columns: 1fr; }
    .map-grid { grid-template-columns: 1fr; }
}

/* ===== Year at a glance (coverage + pacing) ===== */
.year-hero {
    background: var(--accent-grad, linear-gradient(160deg, #6d65be, #534ab7));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: 0 10px 30px var(--accent-shadow, rgba(38, 33, 92, 0.18));
    margin-bottom: 1.5rem;
}
.yh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.yh-title { font-size: 1rem; font-weight: 700; opacity: 0.9; }
.yh-big { font-size: 2rem; font-weight: 800; margin-top: 0.15rem; }
.yh-big span { font-size: 1.05rem; font-weight: 700; opacity: 0.85; }
.yh-sub { font-size: 0.85rem; opacity: 0.8; margin-top: 0.15rem; }
.yh-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.yh-chip { background: rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.82rem; font-weight: 800; display: flex; align-items: center; gap: 0.4rem; }
.yh-bar { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; display: flex; margin: 1rem 0 0.6rem; }
.yh-seg { height: 100%; }
.yh-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; font-weight: 700; opacity: 0.95; }
.yh-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 0.35rem; }
.yh-foot { display: flex; gap: 1.75rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.yh-stat b { font-size: 1.25rem; font-weight: 800; display: block; }
.yh-stat span { font-size: 0.8rem; opacity: 0.85; font-weight: 700; }

/* ===== Subject panels (coverage + study flow) ===== */
.subj-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.subj-panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
}
.subj-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.subj-name { font-weight: 800; color: #111827; display: flex; align-items: center; gap: 0.55rem; }
.subj-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-tint); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; flex: none; }
.subj-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.subj-cov-track { height: 8px; border-radius: 999px; background: #f1f2f6; overflow: hidden; display: flex; margin: 0.6rem 0 0.9rem; }
.subj-cov-seg { height: 100%; }
.strand-row { margin-bottom: 0.7rem; }
.strand-name { font-size: 0.75rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.35rem; }
.node-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.node { width: 16px; height: 16px; border-radius: 50%; background: #e5e7eb; display: inline-block; }
.node.mastered { background: #11823b; }
.node.developing { background: #f59e0b; }
.node.growing { background: #ef4444; }
.node.notstarted { background: #e5e7eb; }
.node.next { width: 18px; height: 18px; border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.subj-next { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.subj-next b { color: var(--accent-deep); }

@media (max-width: 760px) {
    .subj-grid2 { grid-template-columns: 1fr; }
}

/* ===== Tabs + compact multi-visual grid ===== */
.tabs {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--card-border);
    margin: 1.5rem 0 1.1rem;
}
.tab-btn {
    border: 0;
    background: transparent;
    padding: 0.6rem 0.95rem;
    font: inherit;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.tab-btn:hover { color: var(--accent-strong); }
.tab-btn.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.mini-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.1rem;
}
.mini-card.span2 { grid-column: span 2; }
.mini-title { font-weight: 800; color: #111827; font-size: 0.92rem; margin-bottom: 0.7rem; }
.mini-center { display: flex; align-items: center; justify-content: center; }

/* Gauge + doughnut share the SVG; helpers below */
.gauge-num { font-size: 1.9rem; font-weight: 800; }

/* Scrollable activity list */
.act-list { display: flex; flex-direction: column; max-height: 250px; overflow-y: auto; }
.act-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 0.5px solid #f1f2f6; }
.act-row:last-child { border-bottom: 0; }
.act-badge { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; background: var(--accent-tint); color: var(--accent-strong); }
.act-main { flex: 1; min-width: 0; }
.act-topic { font-size: 0.85rem; color: #111827; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-sub { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.act-score { font-weight: 800; font-size: 0.9rem; }

/* Mini bar chart */
.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 130px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.35rem; height: 100%; }
.bar { width: 100%; max-width: 28px; border-radius: 6px 6px 0 0; background: var(--accent); min-height: 3px; }
.bar-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
.bar-val { font-size: 0.75rem; color: var(--text-muted); font-weight: 800; }

/* Horizontal subject bars */
.hbar-row { margin-bottom: 0.6rem; }
.hbar-top { display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; color: #374151; margin-bottom: 0.25rem; }

/* ===== Treasure map (two-tier) ===== */
.treasure {
    background: var(--accent-grad, linear-gradient(160deg, #6d65be, #534ab7));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: 0 10px 30px var(--accent-shadow, rgba(38, 33, 92, 0.18));
    margin-bottom: 1.5rem;
}
.treasure-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.treasure-title { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.treasure-streak { background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 800; }

/* Tier 1 — overworld islands */
.islands { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.5rem; }
.island {
    flex: none;
    width: 118px;
    border: 0;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.6rem;
    color: #fff;
    font: inherit;
    transition: background 0.15s ease;
}
.island:hover { background: rgba(255, 255, 255, 0.24); }
.island.current { background: var(--card-bg); color: #26215c; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.island-ico { font-size: 1.4rem; line-height: 1; }
.island-name { font-size: 0.78rem; font-weight: 800; margin-top: 0.3rem; line-height: 1.15; }
.island-prog { font-size: 0.75rem; font-weight: 700; opacity: 0.85; margin-top: 0.2rem; }
.island.current .island-prog { color: #6d65be; opacity: 1; }
.island-strand { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.7; margin-top: 0.25rem; }

/* Tier 2 — the trail */
.island-trail { display: none; margin-top: 1rem; }
.island-trail.active { display: block; }
.trail-caption { font-size: 0.85rem; opacity: 0.92; margin-bottom: 0.4rem; }
.trail-caption b { font-weight: 800; }
.trail {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: 3rem 0 0.25rem;
}
.trail-stop {
    flex: none;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}
.trail-stop:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 50%;
    width: 100%;
    border-top: 3px dotted rgba(255, 255, 255, 0.45);
    z-index: 0;
}
.trail-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}
.trail-dot.mastered { background: #25d07d; color: #0b3d24; }
.trail-dot.developing { background: #ffcf5c; color: #5a3d05; }
.trail-dot.growing { background: #ff8f6b; color: #4a1b0c; }
.trail-dot.notstarted { background: rgba(255, 255, 255, 0.18); border: 1px dashed rgba(255, 255, 255, 0.6); }
.trail-dot.next { width: 42px; height: 42px; background: var(--card-bg); color: #534ab7; border: 4px solid #ffcf5c; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.trail-dot.treasure { width: 42px; height: 42px; border-radius: var(--radius-sm); background: linear-gradient(160deg, #ffd27a, #f5b53d); color: #5a3d05; }
.trail-label { font-size: 0.75rem; font-weight: 700; margin-top: 0.4rem; line-height: 1.15; }
.trail-score { font-size: 0.75rem; opacity: 0.85; }
.trail-nugget {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -105%);
    background: var(--card-bg);
    color: #26215c;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.55rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    min-width: 110px;
    white-space: nowrap;
}
.trail-nugget .tn-topic { font-size: 0.75rem; font-weight: 800; }
.trail-nugget .tn-go { font-size: 0.75rem; font-weight: 800; color: #534ab7; text-decoration: none; }

/* Treasure trail — separate light tile + wavy path */
.treasure { margin-bottom: 0.75rem; }
.treasure-trails {
    background: var(--card-bg);
    border: 0.5px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}
.island-trail { margin-top: 0; }
.trail-caption { color: var(--text-secondary); opacity: 1; font-weight: 600; }
.trail-caption b { color: var(--accent-deep); }
.trail-scroll { overflow-x: auto; width: 100%; }
.trail-canvas { position: relative; min-width: 100%; height: 170px; }
.trail-path { position: absolute; inset: 0; }
.trail-node { position: absolute; transform: translate(-50%, -18px); width: 104px; text-align: center; z-index: 1; }
.trail-node .trail-dot { margin: 0 auto; }
.trail-dot { background: #eef0f4; color: var(--text-muted); }
.trail-dot.notstarted { background: #e5e7eb; border: 1px dashed #b9bdc9; color: var(--text-secondary); }
.trail-node .trail-label { color: var(--text-primary); margin-top: 0.35rem; }
.trail-node .trail-score { color: var(--text-muted); }

/* ===== Quiz setup (Take Quiz) ===== */
.quiz-setup {
    max-width: 580px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.75rem;
}
.quiz-setup-head { text-align: center; margin-bottom: 1.5rem; }
.quiz-setup-ico {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--accent-tint);
    color: var(--accent-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}
.quiz-setup-head h1 { font-size: 1.5rem; font-weight: 800; color: var(--accent-deep); margin: 0; }
.quiz-setup-head p { color: var(--text-muted); font-weight: 600; margin: 0.25rem 0 0; }

.setup-field { margin-bottom: 1.25rem; }
.setup-label { display: block; font-size: 0.9rem; font-weight: 800; color: #374151; margin-bottom: 0.5rem; }

.setup-select {
    width: 100%;
    height: 52px;
    border: 2px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0 2.4rem 0 0.9rem;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    background-color: var(--card-bg);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
}
.setup-select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.setup-select:disabled { background-color: var(--surface-sunken); color: var(--text-muted); }

.level-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.level-btn {
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
    min-width: 100px;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: #374151;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.level-btn:hover { border-color: var(--accent); }
.level-btn.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
.level-btn .level-stars { font-size: 1.05rem; line-height: 1; }
.level-btn small { display: block; font-weight: 700; margin-top: 0.2rem; }
.level-empty { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }

.qty-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.qty-chip { position: relative; margin: 0; }
.qty-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qty-chip span {
    display: block;
    border: 2px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.15rem;
    font-weight: 800;
    color: #374151;
    cursor: pointer;
}
.qty-chip input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
.qty-chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-ring); }

/* Seven controls that live in pages' own <style> blocks and so had never been checked: they set
   cursor:pointer and showed a keyboard user nothing. The ring lives here with the other 43 rather
   than in each page, so there is one definition of what focus looks like. The label-wrapping ones
   take :focus-within, because the thing that receives focus is the input inside them. */
.learner-pick:focus-within,
.plan-card:focus-within,
.pick-tile:focus-within,
.st-colsel:focus-within,
.term-card:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 2px; }



.setup-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface-sunken);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
}
.setup-switch .form-check-input { width: 2.6rem; height: 1.45rem; margin: 0; cursor: pointer; }
.setup-switch label { font-weight: 700; color: #374151; margin: 0; cursor: pointer; }

.btn-quiz {
    height: 54px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-strong);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-shadow: 0 8px 18px var(--accent-shadow);
    transition: background 0.15s ease, transform 0.08s ease;
}
.btn-quiz:hover { background: var(--accent-strong); color: #fff; }
.btn-quiz:active { transform: scale(0.98); }

/* Suggestions */
.setup-step-label { font-size: 0.78rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.suggest-list { display: flex; flex-direction: column; gap: 0.5rem; }
.suggest-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--card-bg);
    border: 1.5px solid var(--accent-tint);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    font: inherit;
    width: 100%;
    text-align: left;
    transition: border-color 0.12s ease;
}
.suggest-card:hover { border-color: var(--accent); }
.suggest-card.current { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-tint, #eef0ff); }
.suggest-ico { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.1rem; }
.si-continue { background: #eeedfe; }
.si-close { background: #fef6e7; }
.si-refresh { background: #eafaf0; }
.si-practice { background: #fdecec; }
.suggest-main { flex: 1; min-width: 0; }
.suggest-topic { font-weight: 800; color: #111827; font-size: 0.95rem; }
.suggest-reason { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.suggest-go { color: var(--accent-strong); font-weight: 800; font-size: 0.85rem; flex: none; }

.setup-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; margin: 1.25rem 0; }
.setup-divider::before, .setup-divider::after { content: ""; flex: 1; height: 1px; background: #eef0f4; }

/* Drill-down */
.strand-cards { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.strand-card {
    flex: 1;
    min-width: 130px;
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 0.9rem 0.6rem;
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: #374151;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.strand-card:hover { border-color: var(--accent); }
.strand-card.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }
.strand-card .sc-ico { font-size: 1.4rem; line-height: 1; }
.strand-card .sc-name { font-size: 0.85rem; font-weight: 800; margin-top: 0.25rem; }
.strand-card .sc-count { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-top: 0.15rem; }
.strand-card.active .sc-count { color: var(--accent-strong); }

.chip-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip {
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
}
.chip:hover { border-color: var(--accent); }
.chip.active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-deep); }

.topic-pills { display: flex; flex-direction: column; gap: 0.5rem; }
.topic-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font: inherit;
    color: #111827;
    text-align: left;
    width: 100%;
}
.topic-pill:hover { border-color: var(--accent); }
.topic-pill.active { border-color: var(--accent); background: var(--accent-tint); }
.topic-pill .tp-name { font-weight: 700; font-size: 0.95rem; }
.topic-pill .tp-meta { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; flex: none; }

/* Coach split layout on the quiz setup page */
.coach-split {
    display: flex;
    max-width: 960px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 0.5px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.coach-panel {
    flex: 1 1 36%;
    background: var(--accent-grad, linear-gradient(160deg, #6d65be, #534ab7));
    color: #fff;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.coach-main { flex: 1 1 64%; min-width: 0; padding: 1.75rem; }
.coach-hi { font-size: 1.4rem; font-weight: 800; }
.coach-streak {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-weight: 800;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.coach-stat { background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); padding: 0.9rem 1rem; }
.coach-stat b { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1; }
.coach-stat span { font-size: 0.85rem; opacity: 0.9; font-weight: 700; }
.coach-card { background: rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.coach-card-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; font-weight: 800; margin-bottom: 0.3rem; }
.coach-tip { transition: opacity 0.4s ease; }

@media (max-width: 820px) {
    .coach-split { flex-direction: column; }
    .coach-main { padding: 1.25rem; }
}

/* "Mix it up" (strand) card */
.mix-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(160deg, #faf9ff, #ffffff);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    cursor: pointer;
    margin-bottom: 1rem;
    width: 100%;
    font: inherit;
    text-align: left;
}
.mix-card:hover { background: var(--accent-tint); }
.mix-ico { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-strong); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.2rem; }
.mix-main { flex: 1; min-width: 0; }
.mix-title { font-weight: 800; color: var(--accent-deep); font-size: 0.95rem; }
.mix-sub { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.mix-go { color: var(--accent-strong); font-weight: 800; font-size: 0.85rem; flex: none; }

/* Big Challenge (exam) paper cards */
.paper-cards { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.paper-card {
    flex: 1;
    min-width: 150px;
    border: 2px solid var(--accent-tint);
    background: linear-gradient(160deg, #faf9ff, #ffffff);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.paper-card:hover { border-color: var(--accent); }
.paper-title { font-weight: 800; color: var(--accent-deep); font-size: 1rem; }
.paper-meta { font-size: 0.82rem; color: #374151; font-weight: 700; margin-top: 0.2rem; }
.paper-calc { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-top: 0.1rem; }

/* Coach live summary rows */
.cs-row { font-size: 0.9rem; font-weight: 700; padding: 0.15rem 0; }

/* ── QUIZ RESULT ──────────────────────────────────────────────────────────────
   The card used to be a solid violet block holding four lines, and it said what
   happened without saying anything ABOUT it. The score keeps the top, because that
   is what a child looks for first, and three facts sit under it -- how many
   questions, how long it took, which part of the subject -- so the page answers
   "how did I do" and "at what" in one glance.

   White card, violet ink. The old solid fill meant every value on the card was
   white-on-violet and nothing could be emphasised over anything else. */
/* The whole measure, like every other page now. The 720px cap left a result floating in a
   column while the rest of the app ran edge to edge.

   Full height too, with the card's contents centred in it: a result is one thing to look at,
   so it should sit in the middle of the screen rather than clinging to the top of it. */
.result-wrap { max-width: none; margin: 0; min-height: 100%; display: flex; flex-direction: column; }
.result-card { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.result-card {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 2rem 1.6rem 1.7rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
/* Confetti, behind everything and inert: decoration must never catch a tap. */
.result-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.result-card > *:not(.result-confetti) { position: relative; }

.result-emoji { font-size: 3.4rem; line-height: 1; }
.result-title { font-size: 2.1rem; font-weight: 900; color: var(--accent-deep); margin-top: .3rem; letter-spacing: -.02em; }

.result-scorebox { display: inline-block; min-width: 230px; margin: 1rem auto 0; padding: .9rem 1.6rem 1rem;
                   background: var(--accent-tint); border-radius: var(--radius-md); }
.result-score { font-size: 2.9rem; font-weight: 900; color: var(--accent-deep); line-height: 1; }
.result-pct { font-size: 1.05rem; font-weight: 800; color: var(--accent-strong); margin-top: .3rem; }
.result-sub { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); margin-top: .4rem; }

/* Subject > strand > sub-strand. The topic itself is the line under it and the third tile. */
.result-trail { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
                margin-top: 1rem; font-size: 1.05rem; font-weight: 600; color: var(--text-secondary); }
.result-trail svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ── the three facts ──────────────────────────────────────────────────────── */
/* The facts and the closing note keep a readable measure inside a full-width card: three tiles
   stretched to 1400px would put a word at each end of the screen. */
.result-facts, .result-done { max-width: 1000px; margin-left: auto; margin-right: auto; }
.result-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 1.3rem; text-align: left; }
@media (max-width: 620px) { .result-facts { grid-template-columns: 1fr; } }
.result-fact { display: flex; align-items: center; gap: 14px; border: 1px solid var(--card-border);
               border-radius: var(--radius-md); padding: 1.1rem 1.2rem; }
.result-fact-ico { width: 48px; height: 48px; flex: 0 0 auto; display: inline-flex; align-items: center;
                   justify-content: center; border-radius: var(--radius-sm);
                   background: var(--accent-tint); color: var(--accent-strong); }
.result-fact-ico svg { width: 25px; height: 25px; }
.result-fact-main { min-width: 0; }
.result-fact-value { font-size: 1.22rem; font-weight: 800; color: var(--text-primary); line-height: 1.25; word-break: break-word; }
.result-fact-label { font-size: .98rem; font-weight: 600; color: var(--text-muted); }

/* ── the closing note ─────────────────────────────────────────────────────── */
.result-done { display: flex; align-items: center; gap: 18px; text-align: left; margin-top: 1.3rem;
               background: var(--accent-tint); border-radius: var(--radius-md); padding: 1.3rem 1.4rem; }
.result-done-face { font-size: 3rem; line-height: 1; flex: 0 0 auto; }
.result-done b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--accent-deep); }
.result-done span { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); line-height: 1.55; }

.result-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.result-actions .btn-dash, .result-actions .btn-dash-soft { padding: .8rem 1.5rem; font-size: 1rem; }
.btn-dash-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 1.2rem;
    border: 2px solid var(--accent-tint);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--accent-strong);
    font-weight: 800;
    text-decoration: none;
}
.btn-dash-soft:hover { background: var(--accent-tint); }

.bd-row { padding: 0.6rem 0; border-top: 1px solid #f1f2f6; }
.bd-row:first-child { border-top: 0; }
.bd-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #111827; margin-bottom: 0.35rem; }
.bd-meta { font-size: 0.8rem; color: var(--text-muted); font-weight: 700; margin-top: 0.35rem; }

/* ===== Program on-track pill (parent Assignments) ===== */
.prog-pill { display: inline-block; font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.prog-pill.ontrack { background: #dcfce7; color: #166534; }
.prog-pill.behind { background: #fef3c7; color: #b45309; }
.prog-pill.neu { background: #eef0f4; color: var(--text-muted); }

/* ===== Assignments: two-column status + setup, segmented control ===== */
.asg-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 820px) {
    .asg-grid.has-status { grid-template-columns: 1fr 1fr; }
    .asg-grid.has-status .asg-col-status { position: sticky; top: 1rem; }
}
.asg-col { min-width: 0; }   /* let grid children shrink instead of overflowing */
.asg-status { border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface-sunken); margin-bottom: 0; }
.asg-status .asg-h { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 0 0 .5rem; }
.asg-status .asg-h + .asg-h { margin-top: 1rem; }
.asg-status .device-list { margin: 0; }
.asg-status .device-list { max-height: 420px; overflow-y: auto; }
/* Zebra striping for the Active tasks list — flush rows so the stripes read as one scannable block. */
.asg-status .asg-tasks { gap: 0; border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow-y: auto; }
.asg-status .asg-tasks .device-row { border-radius: 0; padding: 10px 12px; }
.asg-status .asg-tasks .device-row:nth-child(odd) { background: var(--card-bg); }
.asg-status .asg-tasks .device-row:nth-child(even) { background: #eef4f9; }
.asg-seg { display: inline-flex; gap: 4px; padding: 4px; background: #eef0f4; border-radius: var(--radius-sm); margin-bottom: 1.2rem; }
.asg-seg-btn { border: none; background: transparent; font: inherit; font-weight: 700; color: var(--text-muted); padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: background .12s, color .12s; }
.asg-seg-btn.active { background: var(--card-bg); color: #234E70; box-shadow: 0 1px 3px rgba(35,78,112,.12); }
.asg-panel[hidden] { display: none; }
/* Program form: two fields per row on wider screens, halving the form's height. */
.asg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.asg-form-grid .setup-field { margin-bottom: 1rem; }
.asg-form-grid .asg-span2 { grid-column: 1 / -1; }
@media (max-width: 520px) { .asg-form-grid { grid-template-columns: 1fr; } }
.asg-settings { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--card-border); }
.tf-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; color: #234E70; }
.tf-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: #cfd6df; transition: background .15s; }
.tf-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--card-bg); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.tf-toggle input:checked + .tf-track { background: #27C5D9; }
.tf-toggle input:checked + .tf-track::after { transform: translateX(18px); }
.tf-toggle input:focus-visible + .tf-track { outline: 2px solid #234E70; outline-offset: 2px; }

/* ===== Learner "tasks first" soft nudge (escapable overlay) ===== */
.tf-nudge { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(35,78,112,.45); backdrop-filter: blur(2px); animation: tf-fade .15s ease-out; }
@keyframes tf-fade { from { opacity: 0; } to { opacity: 1; } }
.tf-nudge-card { max-width: 400px; width: 100%; background: var(--card-bg); border-radius: 20px; padding: 28px 26px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.tf-nudge-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: .5rem; }
.tf-nudge-card h2 { font-size: 1.25rem; font-weight: 900; color: #234E70; margin: 0 0 .5rem; }
.tf-nudge-card p { color: #4b5563; font-size: .96rem; margin: 0 0 1.3rem; }
.tf-nudge-actions { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
.tf-nudge-actions .btn-auth { margin: 0; }
.tf-nudge-skip { border: none; background: transparent; font: inherit; font-weight: 700; color: var(--text-muted); text-decoration: underline; cursor: pointer; padding: 6px; }
.tf-nudge-skip:hover { color: #234E70; }

/* ===== Reusable confirm modal (site.js) ===== */
.cf-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.cf-modal[hidden] { display: none; }
.cf-backdrop { position: absolute; inset: 0; background: rgba(30, 27, 75, .55); backdrop-filter: blur(3px); }
.cf-card { position: relative; background: var(--card-bg); border-radius: var(--radius-md); max-width: 420px; width: 100%; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); animation: cf-pop .16s ease; }
@keyframes cf-pop { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } }
.cf-msg { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1.1rem; line-height: 1.4; }
.cf-actions { display: flex; gap: .6rem; justify-content: flex-end; }
.cf-btn { font-family: inherit; font-weight: 800; border-radius: var(--radius-sm); padding: .6rem 1.2rem; cursor: pointer; border: 1px solid transparent; font-size: .95rem; }
.cf-cancel { background: #eef0f4; color: #374151; }
.cf-cancel:hover { background: #e2e6ec; }
.cf-ok { background: var(--accent-strong, #6d65be); color: #fff; }
.cf-ok:hover { filter: brightness(.95); }
@media (prefers-reduced-motion: reduce) { .cf-card { animation: none; } }

/* What is left of the old quiz screen. The rest of this block -- a second .quiz-wrap capping the
   page at 960px, the old progress bar, card and stem -- was replaced by .qz-* and nothing rendered
   it any more, but the duplicate .quiz-wrap came LATER in the file and so still won. The new rule
   set max-width:none 2000 lines above and the page stayed 960px wide.
   .quiz-image survives because the review screen still uses it. */
.quiz-image { text-align: center; margin-bottom: 1.25rem; }
.quiz-image img { max-height: 420px; max-width: 100%; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card-bg); padding: 0.5rem; }

.opt { display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: #111827;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.opt:hover .opt-box { border-color: var(--accent); }
.opt input:checked + .opt-box { border-color: var(--accent); background: var(--accent-tint); }
.opt input:focus-visible + .opt-box { box-shadow: 0 0 0 4px var(--accent-ring); }
.opt-letter {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #eef0f4;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    flex: none;
}
.opt input:checked + .opt-box .opt-letter { background: var(--accent-strong); color: #fff; }


/* Sticky, hide-on-scroll top bar */
.app-header { position: sticky; top: 0; z-index: 50; transition: transform 0.25s ease; }
.app-header.nav-hidden { transform: translateY(-100%); }

/* ── THE NAME CHIP IS A LINK ──────────────────────────────────────────────────
   It is the only route to the avatar picker and it looked like a name label: no
   edge, no affordance, nothing to suggest tapping it did anything. A child who
   wants to change their avatar has nowhere else to try.

   An outline rather than a fill, so it reads as a control without competing with
   Logout beside it, and a pencil that comes up to the accent on hover. The words
   `change your avatar` are in the link text for anyone who cannot see the glyph —
   a title attribute is not read by most screen readers and never on touch. */
.app-user-chip-link {
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--card-border);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.app-user-chip-link .chip-edit { width: 15px; height: 15px; flex: none; color: var(--text-muted); transition: color .15s ease; }
.app-user-chip-link:hover,
.app-user-chip-link:focus-visible { background: var(--accent-tint); border-color: var(--accent-strong); color: var(--accent-deep); }
.app-user-chip-link:hover .chip-edit,
.app-user-chip-link:focus-visible .chip-edit { color: var(--accent-strong); }
.app-user-chip-link:active { transform: translateY(1px); }
.chip-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--kid-tint); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex: none; }

/* ── AVATAR PICKER ────────────────────────────────────────────────────────────
   The whole measure. At 520px the catalogue was six emoji wide and a very long
   scroll; across the page it is three times as wide and a third as tall, which
   is the difference between browsing a set and paging through one.

   Not centred any more either: a centred column of three header lines pushed the
   first row of faces half a screen down. */
.avatar-card {
    max-width: none;
    margin: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: 1.6rem 1.8rem 1.8rem;
}

.av-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.av-head-id { min-width: 0; }
.av-back { margin-left: auto; }
@media (max-width: 620px) { .av-back { margin-left: 0; } }
.avatar-current {
    font-size: 3.4rem;
    width: 110px;
    height: 110px;
    line-height: 1;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 50%;
    background: var(--accent-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-card h1 { font-size: 1.8rem; font-weight: 900; color: var(--accent-deep); margin: 0; letter-spacing: -.02em; }
.avatar-card p { color: var(--text-secondary); font-weight: 600; font-size: 1.05rem; margin: .25rem 0 0; }
.avatar-saved { color: var(--border-success); font-weight: 800; margin-top: .4rem; }
/* auto-fill, not auto-fit: with auto-fit a short category — the two left over at the end of
   `Birds & sea` — stretches its tiles across the whole row, so the same emoji is twice the
   size in one group as in the next. auto-fill keeps the empty tracks and the tiles uniform. */
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .7rem; }

/* ── the categories, as named groups ────────────────────────────────────────── */
.av-group + .av-group { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--card-border); }
.avatar-opt {
    font-size: 2rem;
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    cursor: pointer;
    aspect-ratio: 1;
    line-height: 1;
}
.avatar-opt:hover { border-color: var(--accent); }
.avatar-opt.active { border-color: var(--accent); background: var(--accent-tint); }

/* ===== Answer review ===== */
.review-link { color: var(--accent-strong); font-weight: 800; text-decoration: none; white-space: nowrap; }
.review-link:hover { text-decoration: underline; }
.review-q {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.review-num { font-weight: 800; color: var(--text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; }
.review-badge { font-size: 0.75rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.review-correct { background: #eafaf0; color: #11823b; }
.review-wrong { background: #fdecec; color: #d42424; }
.review-stem { font-weight: 800; color: #111827; font-size: 1.05rem; margin-bottom: 0.75rem; line-height: 1.35; }
.review-opt { display: flex; align-items: center; gap: 0.6rem; border: 2px solid var(--card-border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; font-weight: 600; color: #111827; }
.review-opt.is-correct { border-color: #11823b; background: #eafaf0; }
.review-opt.is-chosen-wrong { border-color: #ef4444; background: #fdecec; }
.review-opt-mark { margin-left: auto; font-weight: 800; font-size: 0.82rem; white-space: nowrap; }
.review-typed { font-weight: 700; color: #111827; line-height: 1.6; }
.review-explain { background: var(--accent-tint); color: var(--accent-deep); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; margin-top: 0.7rem; font-weight: 600; font-size: 0.92rem; line-height: 1.5; }
.review-explain-label { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.8; margin-bottom: 0.25rem; }

/* The learner's own working, shown above the explanation. Quieter than the explanation on purpose:
   it is what they did, not what they should learn. The flagged line carries the only colour. */
.review-working { border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-top: 0.7rem; background: var(--card-bg); }
.review-working-label { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.7; margin-bottom: 0.35rem; }
.review-working ol { margin: 0; padding-left: 1.4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; line-height: 1.9; }
.review-working li.rw-fault { color: #b45309; }
.review-working .rw-why { margin-left: 0.6rem; font-family: inherit; font-size: 0.78rem; font-weight: 700; color: #b45309; }

/* ===== Parent: learner cards ===== */
.learner-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.learner-top { display: flex; align-items: center; gap: 0.85rem; }
.learner-avatar { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-tint); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex: none; }
.learner-id { flex: 1; min-width: 0; }
.learner-name { font-weight: 800; color: #111827; font-size: 1.05rem; }
.learner-meta { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.learner-stats { display: flex; gap: 0.6rem; }
.learner-stat { flex: 1; background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 0.6rem; text-align: center; }
.learner-stat b { display: block; font-size: 1.05rem; font-weight: 800; color: #111827; }
.learner-stat span { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
.learner-actions { display: flex; gap: 0.5rem; }
.learner-actions .btn-dash, .learner-actions .btn-dash-soft { height: 40px; padding: 0 0.9rem; font-size: 0.9rem; flex: 1; justify-content: center; }

.parent-form-card { max-width: 520px; }

/* ===== Trends: sparklines + heatmap ===== */
.spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.spark-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 1rem 1.1rem;
}
.spark-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.spark-name { font-weight: 800; color: #111827; }
.spark-cur { font-weight: 800; color: #111827; }
.spark-delta { font-size: 0.78rem; font-weight: 800; margin-top: 0.3rem; }
.spark-up { color: #11823b; }
.spark-down { color: #d42424; }
.spark-flat { color: var(--text-muted); }

.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 300px; }
.hm-cell { aspect-ratio: 1; border-radius: 4px; background: #eef0f4; }
.hm-1 { background: var(--accent-tint); }
.hm-2 { background: var(--accent); }
.hm-3 { background: var(--accent-strong); }
.hm-legend { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin-top: 0.75rem; }
.hm-legend .hm-cell { width: 14px; height: 14px; aspect-ratio: auto; display: inline-block; }
.code-reveal { background: var(--accent-tint); color: var(--accent-deep); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-top: 1.25rem; text-align: center; }
.code-reveal .code-value { font-size: 1.6rem; font-weight: 800; letter-spacing: 2px; margin: 0.35rem 0; }

/* TableInput (9th answer format) — type a frequency into each row */
.tbl-input { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.tbl-input th, .tbl-input td { border: 1px solid var(--card-border); padding: .55rem .75rem; text-align: left; font-size: 1rem; }
.tbl-input thead th { background: #f1f5f9; font-weight: 700; }
.tbl-input .tbl-lbl { font-weight: 600; }
.tbl-input .tbl-cell { width: 5.5rem; padding: .4rem .5rem; border: 1.5px solid #cbd5e1; border-radius: .5rem; font-size: 1rem; }
.tbl-input .tbl-cell:focus { outline: none; border-color: #7c6df2; box-shadow: 0 0 0 3px rgba(124,109,242,.18); }
.tbl-input tfoot .tbl-total { font-weight: 800; color: #4c3fd0; }

/* A school's front door (Organisation.Domain): the school's logo and name on the login panel, the brand beneath. */
.auth-mascot img.auth-school-logo { background: var(--card-bg); border-radius: var(--radius-lg); padding: 10px; }
.auth-powered { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .6rem; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.8); letter-spacing: .02em; }
.auth-powered img { height: 18px; width: auto; opacity: .95; }

/* A form rejected for a stale anti-forgery token is reloaded with ?stale=1 (StaleFormFilter): one calm line, never a bare 400. */
.stale-form-notice { max-width: 720px; margin: 1rem auto 0; background: var(--surface-advice); border: 1.5px solid #fcd34d; color: #78350f; border-radius: var(--radius-sm); padding: .7rem 1rem; font-weight: 600; text-align: center; }

/* A child enrolled by a school (Organisation): shown beside the grade on the parent's lists so a school child and a retail child are never confused. */
.school-chip { display: inline-block; margin-top: .25rem; font-size: 0.75rem; font-weight: 800; border-radius: 999px; padding: .15rem .6rem; background: #eef2ff; color: #3730a3; white-space: nowrap; }

/* Avatar picker categories (AvatarCatalog.Categories): a small heading above each group, like a sticker picker. */
.avatar-cat { text-align: left; font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 0 0 .8rem; }
.task-card.upcoming { opacity: .75; cursor: default; }

/* Add-a-learner: the plan for the term, chosen at sign-up */
.plan-choices { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.plan-choice { position: relative; cursor: pointer; }
.plan-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.plan-choice > span { display: block; padding: 0.7rem 0.9rem; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card-bg); transition: all 0.12s ease; }
.plan-choice > span b { display: block; font-weight: 800; color: #374151; }
.plan-choice > span small { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-top: 0.15rem; }
.plan-choice input:checked + span { border-color: var(--accent); background: var(--accent-tint); }
.plan-choice input:checked + span b { color: var(--accent-deep); }
.plan-choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--accent-ring); }
.code-reveal .plan-set { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid rgba(0,0,0,0.08); font-weight: 600; }
.code-reveal .plan-set b { display: block; margin-bottom: 0.2rem; }
.code-reveal .plan-set a { text-decoration: underline; }

/* Sign-up: the mandatory Terms and Privacy acceptance */
.auth-consent { margin: .2rem 0 1rem; font-size: .88rem; font-weight: 600; color: #4b5563; }
.auth-consent label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.auth-consent input { flex: none; width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--accent); }
.auth-consent a { color: var(--accent-strong); font-weight: 700; text-decoration: underline; }
.auth-consent .text-danger { display: block; margin-top: .3rem; }

/* Sign-up: the Terms panel that must be scrolled to its end before the acceptance box unlocks */
.terms-gate { margin: .2rem 0 .9rem; }
.terms-gate-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.terms-gate-hint { font-size: .8rem; font-weight: 700; color: #b45309; }
.terms-gate-hint.done { color: #15803d; }
.terms-panel { height: 260px; overflow-y: auto; border: 1.5px solid var(--card-border); border-radius: var(--radius-sm); padding: .9rem 1rem; background: var(--surface-sunken); font-size: .84rem; line-height: 1.55; color: #4b5563; }
.terms-panel:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.terms-panel h2 { font-size: .95rem; font-weight: 800; color: var(--text-primary); margin: 1rem 0 .3rem; }
.terms-panel p, .terms-panel li { margin: .35rem 0; }
.terms-panel ul { padding-left: 1.1rem; }
.terms-panel a { color: var(--accent-strong); text-decoration: underline; }
.terms-panel-meta { font-weight: 700; color: var(--text-muted); font-size: .78rem; margin-bottom: .2rem; }
.terms-panel-end { text-align: center; font-weight: 800; color: var(--text-muted); margin-top: 1.2rem; }
.auth-consent.locked { opacity: .55; }
.auth-consent.locked label { cursor: not-allowed; }

/* Development only: the sticky ?__school override is on for this browser */
.dev-school-banner { background: #1f2937; color: #fde68a; font-size: .85rem; font-weight: 700; text-align: center; padding: .45rem 1rem; }
.dev-school-banner b { color: #fff; }
.dev-school-banner a { color: #93c5fd; text-decoration: underline; margin-left: .6rem; }

/* ── FOCUS IS VISIBLE ON EVERYTHING YOU CAN REACH ─────────────────────────────
   THE FIRST LINE DOES THE WORK. Every natively focusable element gets the ring, so a button or a
   link written tomorrow is covered the moment it exists and nothing has to be added here for it.
   26 class selectors have been removed from this list for exactly that reason: each named a
   <button> or an <a> the first line already covered, so each was a line that looked like it was
   doing something and was not. Three of them were added by me in the last three commits, one per
   new page, which is how a list like this grows.

   What follows is only what the element line cannot reach: labels wrapping an input, which take
   :focus-within, and the two custom controls built on a div and a span.

   :focus-visible rather than :focus, so a mouse click does not leave a ring behind. WCAG 2.4.7. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.assign-day:focus-visible,
.assign-radio:focus-visible,
.auth-consent label:focus-visible,
.auth-trust:focus-visible,
.btn-signout-others:focus-visible,
.btn-toggle:focus-visible,
.cf-btn:focus-visible,
.chip:focus-visible,
.flip-tile:focus-visible,
.flipc:focus-visible,
.island:focus-visible,
.level-btn:focus-visible,
.opt-chip:focus-visible,
.opt-day:focus-visible,
.opt-seg-btn:focus-visible,
.opt:focus-visible,
.plan-choice:focus-visible,
.po-details > summary:focus-visible,
.qty-chip input:focus-visible,
.qty-chip span:focus-visible,
.setup-switch label:focus-visible,
.strand-card:focus-visible,
.tab-btn:focus-visible,
.task-card:focus-visible,
.tf-toggle:focus-visible,
.topic-pill:focus-visible {
    outline: 3px solid #2d6bdd;
    outline-offset: 2px;
    border-radius: inherit;
}