/* DecodeDesk app styles. No third-party fonts or trackers: student pages load nothing off-site. */
:root {
  --bg: #f6f5f1; --surface: #ffffff; --surface-2: #f1f0eb; --ink: #1c2321; --muted: #5d6865; --line: #e2e0d8;
  --primary: #0f766e; --primary-ink: #ffffff; --primary-soft: #d6efec; --accent: #d97706;
  --ok: #15803d; --ok-soft: #dcfce7; --mid: #b45309; --mid-soft: #fef3c7; --bad: #b91c1c; --bad-soft: #fee2e2;
  --st-I-bg: #dbeafe; --st-I: #1e40af; --st-P-bg: #fef3c7; --st-P: #92400e; --st-M-bg: #dcfce7; --st-M: #166534; --st-R-bg: #fee2e2; --st-R: #991b1b;
  --read-bg: #ffffff; --read-ink: #1c2321;
  --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  --read-font: Verdana, Geneva, sans-serif; --read-scale: 1; --read-letter: .05em; --read-line: 1.6;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111615; --surface: #1a201f; --surface-2: #222a28; --ink: #e8ecea; --muted: #9aa6a2; --line: #2e3836;
    --primary: #2dd4bf; --primary-ink: #04201d; --primary-soft: #0f3a36; --accent: #fbbf24;
    --ok: #4ade80; --ok-soft: #12351f; --mid: #fbbf24; --mid-soft: #3a2c0c; --bad: #f87171; --bad-soft: #3d1717;
    --st-I-bg: #1e3a5f; --st-I: #bfdbfe; --st-P-bg: #4a3710; --st-P: #fde68a; --st-M-bg: #14432a; --st-M: #bbf7d0; --st-R-bg: #4c1d1d; --st-R: #fecaca;
    --read-bg: #1f2624; --read-ink: #f2f4f3; --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111615; --surface: #1a201f; --surface-2: #222a28; --ink: #e8ecea; --muted: #9aa6a2; --line: #2e3836;
  --primary: #2dd4bf; --primary-ink: #04201d; --primary-soft: #0f3a36; --accent: #fbbf24;
  --ok: #4ade80; --ok-soft: #12351f; --mid: #fbbf24; --mid-soft: #3a2c0c; --bad: #f87171; --bad-soft: #3d1717;
  --st-I-bg: #1e3a5f; --st-I: #bfdbfe; --st-P-bg: #4a3710; --st-P: #fde68a; --st-M-bg: #14432a; --st-M: #bbf7d0; --st-R-bg: #4c1d1d; --st-R: #fecaca;
  --read-bg: #1f2624; --read-ink: #f2f4f3; --shadow: none; color-scheme: dark;
}
:root[data-tint="cream"] { --read-bg: #fbf5e3; --read-ink: #222; }
:root[data-tint="blue"] { --read-bg: #e6f0fa; --read-ink: #1a2330; }
:root[data-tint="green"] { --read-bg: #e8f5e6; --read-ink: #1b261a; }
:root[data-contrast="1"] { --read-bg: #ffffff; --read-ink: #000000; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--ui-font); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); }
h1 { font-size: 1.6rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: .2rem 0 .4rem; }
h4 { margin: .6rem 0 .3rem; font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.reading { font-family: var(--read-font); letter-spacing: var(--read-letter); line-height: var(--read-line); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: .8em; background: var(--surface); }

/* layout */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; padding: 0 8px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.side nav a:hover { background: var(--surface-2); }
.side nav a.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.side-foot { margin-top: auto; font-size: .8rem; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.sync { color: var(--muted); display: flex; gap: 6px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot.green { background: var(--ok); } .dot.amber { background: var(--accent); } .dot.grey { background: var(--muted); }
.trial-pill { background: var(--mid-soft); color: var(--mid); padding: 4px 10px; border-radius: 99px; text-decoration: none; font-weight: 600; text-align: center; }
main { padding: 28px 32px 60px; max-width: 1280px; width: 100%; outline: none; }
.demo-bar { background: var(--primary); color: var(--primary-ink); padding: 8px 16px; text-align: center; font-size: .9rem; }
.demo-bar a, .demo-bar .linkbtn { color: inherit; font-weight: 700; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.crumb { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.end { justify-content: flex-end; } .row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 16px 18px; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-head h2 { margin-bottom: .6rem; }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 9px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 38px; }
.btn:hover { border-color: var(--primary); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.danger-text { color: var(--bad) !important; }
.btn.small { padding: 4px 10px; min-height: 30px; font-size: .85rem; }
.btn.big { padding: 12px 20px; font-size: 1.05rem; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label, label.inline { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .88rem; flex: 1; }
label.inline { flex-direction: row; align-items: center; gap: 8px; flex: none; }
label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 38px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 2px solid var(--primary-soft); }
.hint { font-size: .8rem; color: var(--muted); margin: -6px 0 0; font-weight: 400; }
fieldset { border: 1px solid var(--line); border-radius: 8px; }
.err { color: var(--bad); min-height: 1em; margin: 0; }
.ok-msg { background: var(--ok-soft); color: var(--ok); padding: 12px; border-radius: 8px; }

/* chips / badges / status */
.chip, .badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid transparent; }
.badge.warn { background: var(--mid-soft); color: var(--mid); }
.st-none { background: var(--surface); color: var(--muted); border: 1px dashed var(--line) !important; }
.st-I { background: var(--st-I-bg) !important; color: var(--st-I) !important; }
.st-P { background: var(--st-P-bg) !important; color: var(--st-P) !important; }
.st-M { background: var(--st-M-bg) !important; color: var(--st-M) !important; }
.st-R { background: var(--st-R-bg) !important; color: var(--st-R) !important; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-chip { border: 1px solid transparent; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.phase + .phase { margin-top: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c); background: color-mix(in srgb, var(--c) 68%, #000); color: #fff; display: inline-grid; place-items: center; font-weight: 700; flex: none; }

/* dashboard */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; }
.stat span { color: var(--muted); font-size: .82rem; } .stat strong { font-size: 1.7rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.student-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.student-card header { display: flex; gap: 10px; align-items: center; }
.student-card header h3 { margin: 0; } .student-card header h3 a { color: var(--ink); text-decoration: none; }
.student-card header .badge { margin-left: auto; }
.student-card .next { display: flex; flex-direction: column; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.empty { text-align: center; padding: 32px; }
.alerts { display: flex; flex-direction: column; gap: 10px; }
.alert { border-radius: 10px; padding: 12px 14px; border-left: 4px solid var(--muted); background: var(--surface); border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.alert.high { border-left-color: var(--bad); } .alert.med { border-left-color: var(--accent); } .alert.good { border-left-color: var(--ok); }
.alert p { margin: .3rem 0; } .alert ul { margin: .3rem 0; padding-left: 1.2rem; }
.alert-top { display: flex; justify-content: space-between; gap: 8px; }
details summary { cursor: pointer; color: var(--primary); font-size: .88rem; }

/* tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: .8rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { display: flex; align-items: center; gap: 8px; }
.bar { height: 6px; background: var(--surface-2); border-radius: 9px; overflow: hidden; width: 140px; } .bar i { display: block; height: 100%; background: var(--primary); }

/* goals */
.goal { display: flex; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.goal:last-child { border-bottom: 0; }
.goal p { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.goal-text { flex: 1; }
.goal-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.goal.met { background: var(--ok-soft); }
.spark .series, .chart .series { fill: none; stroke: var(--primary); stroke-width: 2.2; }
.spark .goal-line, .chart .goal-line { stroke: var(--accent); stroke-dasharray: 4 4; stroke-width: 1.5; }
.spark .dotc, .chart .dotc { fill: var(--primary); }
.chart { width: 100%; height: auto; max-height: 240px; }
.chart .grid { stroke: var(--line); } .chart .axis { fill: var(--muted); font-size: 11px; font-family: var(--ui-font); } .chart .goal-lbl { fill: var(--accent); }
.note { margin-bottom: 8px; }

/* matrix */
.matrix-wrap { overflow: auto; max-height: calc(100vh - 180px); }
.matrix { border-collapse: separate; border-spacing: 0; }
.matrix th.rot { height: 150px; white-space: nowrap; vertical-align: bottom; padding: 0; width: 38px; }
.matrix th.rot span { display: inline-block; transform: rotate(-60deg); transform-origin: 10px 0; width: 30px; font-size: .78rem; font-weight: 600; border-bottom: 3px solid; padding-bottom: 2px; position: relative; left: 12px; bottom: 8px; }
.matrix .sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left; padding: 6px 12px; white-space: nowrap; border-right: 1px solid var(--line); }
.matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.matrix thead th.sticky { z-index: 3; }
.matrix td { padding: 2px; }
.skill-chip.cell { width: 34px; height: 30px; padding: 0; font-size: .8rem; }

/* planner */
.plan-grid { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.ps-head { display: flex; gap: 12px; align-items: flex-start; }
.ps-head > div { flex: 1; }
.num { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.item-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 38px; align-items: center; }
.ichip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 7px; padding: 3px 4px 3px 9px; font-family: var(--read-font); }
.ichip i { color: var(--accent); font-style: normal; }
.ichip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.add-word input { min-height: 30px; padding: 3px 8px; width: 120px; }
.plan-step select, .concept-mini, .passage-preview { margin-left: 38px; margin-top: 8px; }
.passage-preview { font-family: var(--read-font); color: var(--muted); font-size: .9rem; }
.graph-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.gcard { min-width: 56px; padding: 8px 12px; border-radius: 10px; background: var(--read-bg); color: var(--read-ink); border: 2px solid var(--line); font-size: 1.6rem; text-align: center; display: inline-flex; flex-direction: column; align-items: center; }
.gcard small { font-size: .7rem; color: var(--muted); letter-spacing: 0; }
.graph-row.big .gcard { font-size: calc(3rem * var(--read-scale)); min-width: 110px; }

/* live session */
body.live-mode { overflow: hidden; }
.live { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.live-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.clock { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; }
.live-body { display: grid; grid-template-columns: 240px 1fr auto; min-height: 0; }
.live-steps { border-right: 1px solid var(--line); background: var(--surface); padding: 10px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.lstep { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; text-align: left; border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--ink); }
.lstep .num { grid-row: span 2; } .lstep .t { font-weight: 600; font-size: .9rem; } .lstep .m { font-size: .78rem; color: var(--muted); }
.lstep:hover { background: var(--surface-2); } .lstep.on { background: var(--primary-soft); }
.kb { margin-top: auto; padding: 8px; }
.live-main { overflow: auto; padding: 18px 26px 40px; }
.live-tools { width: 380px; border-left: 1px solid var(--line); background: var(--surface); overflow: auto; padding: 14px; }
.step-head h2 { margin: 0; } .step-head p { margin: .2rem 0 1rem; }
.stage-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.stage { background: var(--read-bg); color: var(--read-ink); border: 2px solid var(--line); border-radius: 18px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; gap: 8px; }
.stage-text { font-size: calc(4.2rem * var(--read-scale)); font-weight: 600; word-break: break-word; }
.stage.oral .stage-text { font-size: calc(1.8rem * var(--read-scale)); }
.stage-sub { color: var(--muted); font-size: .95rem; }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tally button { border: 2px solid var(--line); border-radius: 14px; padding: 14px 6px; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; background: var(--surface); color: var(--ink); min-height: 76px; }
.tally b { font-size: 1.8rem; line-height: 1; }
.tally .t-ok { border-color: var(--ok); } .tally .t-ok b { color: var(--ok); } .tally .t-ok.on { background: var(--ok-soft); }
.tally .t-mid { border-color: var(--mid); } .tally .t-mid b { color: var(--mid); } .tally .t-mid.on { background: var(--mid-soft); }
.tally .t-bad { border-color: var(--bad); } .tally .t-bad b { color: var(--bad); } .tally .t-bad.on { background: var(--bad-soft); }
.err-row { display: flex; flex-wrap: wrap; gap: 6px; }
.err-row .chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface); padding: 6px 10px; font-size: .82rem; }
.err-row .chip.on { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.item-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; }
.item-list button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; cursor: pointer; color: var(--ink); display: flex; gap: 6px; align-items: center; font: inherit; }
.item-list button.on { outline: 2px solid var(--primary); }
.item-list em { font-style: normal; font-weight: 700; }
.res-ok { background: var(--ok-soft) !important; } .res-ok em { color: var(--ok); }
.res-mid { background: var(--mid-soft) !important; } .res-mid em { color: var(--mid); }
.res-bad { background: var(--bad-soft) !important; } .res-bad em { color: var(--bad); }
.concept { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.concept .lead { font-size: 1.05rem; }
.examples { font-size: calc(1.4rem * var(--read-scale)); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 7px 12px; cursor: pointer; font: inherit; font-size: .88rem; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--primary); color: var(--primary-ink); font-weight: 600; }

/* fluency */
.fluency { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.timer-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ftime { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 110px; }
.passage { background: var(--read-bg); color: var(--read-ink); border-radius: 14px; border: 2px solid var(--line); padding: 20px 24px; font-size: calc(1.45rem * var(--read-scale)); }
.passage .w { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.passage .w:hover { background: var(--primary-soft); }
.passage .w.err { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; }
.passage .w.last { outline: 2px solid var(--primary); }
.passage .w.unread { opacity: .35; }
.fl-result { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.fl-result > div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; display: flex; flex-direction: column; min-width: 90px; }
.fl-result span { font-size: .75rem; color: var(--muted); } .fl-result strong { font-size: 1.4rem; }
.fl-result .hl { background: var(--primary-soft); border-color: var(--primary); }
.fl-result.compact strong { font-size: 1.2rem; }
ul.plain { list-style: none; padding: 0; }

/* manipulatives */
.tools { display: flex; flex-direction: column; gap: 12px; }
.tray { min-height: 96px; background: var(--read-bg); border: 2px dashed var(--line); border-radius: 14px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px; }
.tile { border: 0; border-radius: 10px; background: #fff7df; color: #1c2321; box-shadow: 0 2px 0 #d7c9a0; font-family: var(--read-font); font-size: calc(2.2rem * var(--read-scale)); padding: 4px 14px; cursor: pointer; min-width: 52px; }
.tile.v { background: #fde2e4; box-shadow: 0 2px 0 #e7a8ae; }
.tile.small { font-size: 1.1rem; min-width: 40px; padding: 4px 8px; }
.bank { display: flex; flex-wrap: wrap; gap: 6px; }
.boxes { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 8px 0; flex-wrap: wrap; }
.sbox { width: 72px; height: 72px; border: 3px solid var(--ink); background: var(--read-bg); color: var(--read-ink); border-radius: 6px; cursor: pointer; font-size: calc(1.8rem * var(--read-scale)); }
.token { color: var(--accent); font-size: 2rem; }
.silent { font-size: 1.6rem; color: var(--muted); text-decoration: line-through; }
.syl { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; font-size: calc(2.2rem * var(--read-scale)); padding: 10px; background: var(--read-bg); border-radius: 12px; color: var(--read-ink); }
.sl { display: inline-flex; flex-direction: column; align-items: center; }
.sl small { font-size: .8rem; color: var(--muted); font-family: var(--ui-font); letter-spacing: 0; }
.lt.v { color: var(--bad); }
.cut { width: 12px; align-self: stretch; border: 0; background: transparent; cursor: pointer; border-radius: 4px; }
.cut:hover { background: var(--primary-soft); }
.cut.on { background: var(--primary); width: 5px; margin: 0 5px; }
.syl-parts { text-align: center; font-size: 1.3rem; }
.tools form input { flex: 1; min-width: 0; }

/* modal / toast */
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: 16px; padding: 22px 24px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal h2 { margin-top: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 10px; opacity: 0; transition: .25s; z-index: 60; font-weight: 600; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--bad); color: #fff; }
#ruler { position: fixed; left: 0; right: 0; height: 56px; pointer-events: none; z-index: 40; box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }

/* settings */
.prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.preview-read { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--read-bg); color: var(--read-ink); font-size: calc(1.3rem * var(--read-scale)); border: 1px solid var(--line); }
section.card { margin-bottom: 16px; } section.card h2 { margin-top: 0; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 12px 0; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.plan.current { border-color: var(--primary); background: var(--primary-soft); }
.plan .price { font-size: 1.8rem; font-weight: 800; } .plan .price span { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan ul { padding-left: 1.1rem; margin: 4px 0 10px; font-size: .9rem; }

/* auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.auth-card { width: min(420px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.auth-card .brand { padding: 0; }

/* reports */
.report, .practice { max-width: 900px; }
.rhead { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--primary); padding-bottom: 12px; margin-bottom: 8px; }
.rhead h1 { font-size: 1.4rem; } .rhead p { margin: .2rem 0; }
.brand-sm { font-weight: 700; color: var(--primary); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.rstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.rstats div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; }
.rstats span { font-size: .75rem; color: var(--muted); } .rstats strong { font-size: 1.4rem; } .rstats small { font-size: .8rem; color: var(--muted); font-weight: 500; }
.rgoal { border-left: 3px solid var(--primary); padding-left: 12px; margin-bottom: 16px; }
.rgoal h4 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: .95rem; }
.ok-text { color: var(--ok); }
.hbars { display: flex; flex-direction: column; gap: 6px; }
.hb { display: grid; grid-template-columns: 200px 1fr 40px; gap: 10px; align-items: center; font-size: .88rem; }
.hb div { background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; } .hb i { display: block; height: 100%; background: var(--accent); }
.rnotes { width: 100%; }
.print-notes { display: none; white-space: pre-wrap; }
.rfoot { display: flex; justify-content: space-between; margin: 30px 0 10px; gap: 20px; flex-wrap: wrap; }
.rule-box { background: var(--surface-2); border-radius: 12px; padding: 4px 16px 12px; }
.rule-box p { font-size: 1.1rem; }
.ptable { border-collapse: collapse; width: 100%; }
.ptable th, .ptable td { border: 1px solid var(--line); padding: 8px; text-align: center; }
.ptable .pw { font-size: calc(1.6rem * var(--read-scale)); text-align: left; padding-left: 16px; }
.box { display: inline-block; width: 22px; height: 22px; border: 2px solid var(--muted); border-radius: 4px; }
.red-row { display: flex; gap: 12px; flex-wrap: wrap; }
.red-card { border: 3px solid #dc2626; color: #b91c1c; border-radius: 10px; padding: 8px 22px; font-size: 1.8rem; background: #fff; }
.sentence { font-size: 1.5rem; }
.write-line { border-bottom: 2px solid var(--muted); height: 48px; margin-top: 8px; }
.tips ul { padding-left: 1.2rem; }

/* responsive */
@media (max-width: 1100px) {
  .grid-2, .plan-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .rstats { grid-template-columns: repeat(3, 1fr); }
  .live-body { grid-template-columns: 200px 1fr; }
  .live-tools { position: fixed; right: 0; top: 58px; bottom: 0; box-shadow: -8px 0 24px rgba(0,0,0,.15); z-index: 20; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: fixed; bottom: 0; top: auto; left: 0; right: 0; height: auto; flex-direction: row; padding: 6px; z-index: 30; border-right: 0; border-top: 1px solid var(--line); }
  .side .brand, .side-foot { display: none; }
  .side nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .side nav a { flex-direction: column; gap: 2px; font-size: .7rem; padding: 6px; }
  main { padding: 18px 16px 90px; }
  .students-table th:nth-child(3), .students-table td:nth-child(3) { display: none; }
  .live-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .live-steps { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .lstep { flex: none; } .lstep .m, .kb { display: none; }
  .live-main { padding: 14px 16px 40px; }
  .live-tools { width: 100%; top: auto; height: 60vh; }
  .stage-text { font-size: calc(3rem * var(--read-scale)); }
  .rstats { grid-template-columns: repeat(2, 1fr); }
  .hb { grid-template-columns: 110px 1fr 30px; }
}

/* print: reports & practice sheets */
@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --line: #bbb; }
  body { background: #fff; }
  .side, .demo-bar, .no-print, .toast, #ruler { display: none !important; }
  .layout { display: block; } main { padding: 0; max-width: none; }
  .card { border: 0; box-shadow: none; } .pad { padding: 0; }
  .rnotes { display: none; } .print-notes { display: block; }
  .avoid-break { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 14mm; }
}

/* ---------- shared additions ---------- */
.help-link { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 700; text-decoration: none; vertical-align: middle; margin-left: 6px; }
.help-link:hover { border-color: var(--primary); color: var(--primary); }
.badge.okb, .chip.okb { background: var(--ok-soft); color: var(--ok); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.warn-text { color: var(--mid); }
.filters { margin: 16px 0 8px; } .filters input[type=search] { flex: 1; min-width: 200px; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
code { font-size: .85em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }

/* materials */
.mat-table td:first-child { display: table-cell; width: 36px; }
.mat-info { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mat-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.mat-info dt { color: var(--muted); font-size: .85rem; } .mat-info dd { margin: 0; font-weight: 600; }
.qr { background: #fff; border-radius: 4px; }
tr.hl td { background: var(--mid-soft); }
.log li { padding: 4px 0; border-bottom: 1px solid var(--line); }
ul.pull { list-style: none; padding: 0; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 8px; }
ul.pull li { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
ul.pull label.check { align-items: flex-start; }
.scanv { width: 100%; border-radius: 10px; background: #000; max-height: 50vh; }
.kit-need li { margin-bottom: 8px; }

/* labels: Avery 5160 / 8160 (US Letter, 3 × 10, 2.625in × 1in) */
.label-sheet { display: grid; grid-template-columns: repeat(3, 2.625in); grid-auto-rows: 1in; column-gap: .125in; background: #fff; padding: .5in .1875in; width: 8.5in; box-shadow: var(--shadow); border: 1px solid var(--line); color: #000; }
.label { display: flex; align-items: center; gap: .08in; padding: .06in .12in; overflow: hidden; outline: 1px dashed #ddd; }
.label .qr { width: .82in; height: .82in; flex: none; }
.ltxt { display: flex; flex-direction: column; min-width: 0; font-family: Arial, sans-serif; line-height: 1.15; }
.ltxt strong { font-size: 9pt; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ltxt span { font-size: 7pt; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltxt code { font-size: 8pt; background: none; padding: 0; font-weight: 700; }
@media print {
  .label-sheet { box-shadow: none; border: 0; margin: 0; }
  .label { outline: 0; }
  body:has(.label-sheet) main { padding: 0; }
  @page { size: letter; margin: 0; }
}

/* library */
.lib-tabs { margin-bottom: 6px; } .lib-tabs a { padding: 8px 14px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; }
.lib-tabs a + a { border-left: 1px solid var(--line); } .lib-tabs a.on { background: var(--primary); color: var(--primary-ink); }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.act-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.act-card header { display: flex; justify-content: space-between; gap: 8px; }
.act-card h3 { margin: 0; } .act-card header a { color: var(--ink); text-decoration: none; }
.act-card p { margin: 0; flex: 1; }
.act-meta { display: flex; gap: 12px; color: var(--muted); } .act-meta abbr { text-decoration: none; font-weight: 700; }
.star { border: 0; background: none; font-size: 1.3rem; color: var(--line); cursor: pointer; line-height: 1; padding: 0 2px; }
.star.on { color: #f59e0b; }
.act-detail ol, .act-detail ul { padding-left: 1.3rem; } .act-detail li { margin-bottom: 6px; }
.tpl-grid, .kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tpl header, .kit header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tpl-bar { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; margin: 8px 0; }
.tpl-bar i { background: var(--primary); opacity: .75; } .tpl-bar i:nth-child(even) { opacity: .45; }
.tpl-steps { list-style: none; padding: 0; margin: 0 0 10px; } .tpl-steps li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.tpl-steps li.skip { color: var(--muted); text-decoration: line-through; }
.kit p { margin: .3rem 0; }
.kit .btn { margin-top: 8px; }

/* planner additions */
.min-in { width: 58px; min-height: 26px; padding: 1px 6px; font-size: .85rem; }
.act-pick { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.act-pick select { min-height: 30px; padding: 3px 6px; max-width: 280px; }
.plan-step.skipped { opacity: .55; }
.act-live { background: var(--primary-soft); border-radius: 10px; padding: 8px 12px; margin: -6px 0 14px; max-width: 760px; }
.act-live ol { margin: 6px 0 0; padding-left: 1.2rem; }

/* help wiki */
.help-layout { display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
.hnav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.hnav input { width: 100%; margin-bottom: 10px; }
.hnav-sec h4 { margin: 12px 0 4px; }
.hnav a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.hnav a:hover { background: var(--surface-2); } .hnav a.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.help-article { max-width: 820px; line-height: 1.65; }
.help-article h2 { font-size: 1.15rem; margin-top: 1.4em; }
.help-article li { margin-bottom: 4px; }
.tip { background: var(--mid-soft); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.walk { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 6px; }
.walk-shot { display: block; position: relative; width: 100%; padding: 0; margin: 8px 0 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card, #fff); cursor: zoom-in; }
.walk-shot img, .walk-big { display: block; width: 100%; height: auto; }
.walk-zoom { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; padding: 3px 8px; border-radius: 6px; }
.walk-steps { list-style: none; counter-reset: wt; padding-left: 0; }
.walk-steps li { counter-increment: wt; position: relative; padding-left: 38px; margin-bottom: 10px; min-height: 26px; }
.walk-steps li::before { content: counter(wt); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: #c62828; color: #fff; font: bold 14px/26px Arial, sans-serif; text-align: center; }
.modal:has(.walk-big) { max-width: min(1140px, 96vw); width: 96vw; }
.walk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.walk-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background: var(--card, #fff); }
.walk-card:hover, .walk-card:focus-visible { border-color: var(--brand, #0f766e); }
.walk-card img { width: 100%; height: 130px; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); }
.walk-card > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.hrel { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; } .hrel .chip { text-decoration: none; margin: 0 4px 4px 0; }
.pnotes { margin-top: 20px; background: var(--surface-2); border-radius: 12px; padding: 12px 16px; }
.pnotes textarea { width: 100%; margin: 6px 0; }
.hresults { list-style: none; padding: 0; } .hresults li { padding: 10px 0; border-bottom: 1px solid var(--line); } .hresults p { margin: 4px 0 0; }
.help-public { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }
.help-public > .brand { margin-bottom: 16px; }
@media (max-width: 860px) { .help-layout { grid-template-columns: 1fr; } .hnav { position: static; max-height: none; } }

/* narrow-screen overflow guards */
main, .live-main, .help-article { min-width: 0; }
.card:has(> table) { overflow-x: auto; }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters > * { flex: 1 1 140px; min-width: 0; }
  .mat-table th:nth-child(3), .mat-table td:nth-child(3) { display: none; }
  .label-sheet { transform-origin: top left; }
}
.plan-grid > *, .grid-2 > *, .plan-step, .ps-head > div { min-width: 0; }
select { max-width: 100%; }
.report section, .practice section { overflow-x: auto; }
@media (max-width: 1100px) { .plan-grid, .grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .item-chips, .plan-step select, .concept-mini, .passage-preview { margin-left: 0; }
  .rhead { flex-wrap: wrap; }
  .page-head .row { flex-wrap: wrap; }
}
.act-pick label.inline { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.act-pick select { min-width: 0; flex: 1 1 160px; }
main:has(.label-sheet) { overflow-x: auto; }

/* assessments */
.chip.badb { background: var(--bad-soft); color: var(--bad); }
.script { margin: 8px 0; padding: 10px 14px; border-left: 4px solid var(--primary); background: var(--primary-soft); border-radius: 0 10px 10px 0; font-style: italic; font-size: 1.05rem; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ev-grid.wide { grid-template-columns: 1fr; }
.ev-item { border: 2px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.ev-item.st-ok { border-color: var(--ok); background: var(--ok-soft); } .ev-item.st-bad { border-color: var(--bad); background: var(--bad-soft); } .ev-item.st-sc { border-color: var(--mid); background: var(--mid-soft); }
.ev-text { font-size: 1.35rem; font-weight: 600; }
.ev-grid.wide .ev-text { font-size: 1.05rem; font-weight: 500; }
.ev-exp { font-size: .8rem; color: var(--muted); }
.ev-ctl { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-ctl button { flex: 1; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); }
.ev-ctl button.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.ev-ctl button.ok.on { background: var(--ok); border-color: var(--ok); color: #fff; } .ev-ctl button.bad.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.ev-said, .ev-err { min-height: 32px; padding: 4px 8px; font-size: .88rem; }
.stat.pass { border-color: var(--ok); } .stat.pass strong { color: var(--ok); } .stat.nmp { border-color: var(--bad); } .stat.nmp strong { color: var(--bad); }
.err-list { padding-left: 2rem; } .err-list li { margin-bottom: 4px; }
.table.profile td, .table.profile th { text-align: center; } .table.profile td:first-child, .table.profile th:first-child { text-align: left; display: table-cell; }
.pcell { background: var(--ok-soft); } .ncell { background: var(--mid-soft); }
.bsec header { margin-bottom: 8px; } .bsec label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .85rem; margin-bottom: 8px; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
textarea.mono { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; }
/* printable record form & student pages */
.psec { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; } .psec h3 { margin: 0 0 4px; }
.pscript { font-style: italic; margin: 2px 0; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 12px; margin: 6px 0; }
.pgrid.wide { grid-template-columns: 1fr; }
.pcell-item { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); padding: 3px 0 5px; min-height: 42px; }
.pcell-item .it { font-weight: 600; } .pcell-item .ex { font-size: .75rem; color: var(--muted); } .pcell-item .mk { font-size: .85rem; }
.pcell-item.x .it { text-decoration: line-through; text-decoration-color: var(--bad); }
.spage { background: #fff; color: #000; border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px; margin-bottom: 18px; min-height: 60vh; }
.spage-h { font: 600 .85rem var(--ui-font); color: #555; margin-bottom: 24px; }
.spage-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 32px 24px; font-size: 2.4rem; text-align: center; }
.spage-items.para { grid-template-columns: 1fr; font-size: 1.6rem; text-align: left; gap: 18px; }
@media print { .spage { border: 0; break-after: page; min-height: 0; } .record-form .psec { break-inside: avoid; } }

/* scheduler */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 180px; display: flex; flex-direction: column; gap: 6px; }
.day.today { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.day h3 { font-size: .85rem; margin: 0 0 4px; color: var(--muted); display: flex; justify-content: space-between; } .day h3 span { color: var(--ink); font-size: 1.05rem; }
.appt { text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 8px; background: var(--surface-2); padding: 6px 8px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.appt small { color: var(--muted); } .appt .chip { align-self: flex-start; font-size: .7rem; }
.appt.s-cancelled, .appt.s-rescheduled { opacity: .55; text-decoration: line-through; }
.appt.conflict { outline: 2px solid var(--bad); }
.agenda { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.agenda-item { display: grid; grid-template-columns: 80px 1fr auto auto auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.chip.warn { background: var(--mid-soft); color: var(--mid); }
.print-only { display: none; }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } .day { min-height: 0; } .agenda-item { grid-template-columns: 70px 1fr auto; } }
@media print { .print-only { display: block; } .week { grid-template-columns: repeat(7, 1fr); gap: 4px; } .day { border-color: #999; } }

/* reports center */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.rc-card h3 { margin-top: 0; } .rc-card .row select { flex: 1; min-width: 0; }
.letter { max-width: 760px; font-size: 1.02rem; line-height: 1.65; } .letter h2 { font-size: 1.1rem; }
.big-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.big-stats div { background: var(--surface-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.big-stats strong { font-size: 1.8rem; color: var(--primary); } .big-stats span { font-size: .85rem; color: var(--muted); line-height: 1.3; }
.disclaimer { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 16px; }
.goals-table td { vertical-align: top; } .goals-table td:first-child { display: table-cell; max-width: 320px; } .spark-cell { margin-top: 6px; }
.rnotes.small { font-size: .85rem; min-width: 160px; }
@media (max-width: 760px) {
  .side nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .side nav::-webkit-scrollbar { display: none; }
  .side nav a { flex: none; min-width: 68px; text-align: center; white-space: nowrap; }
}

/* billing */
.chip.info { background: var(--st-I-bg); color: var(--st-I); }
.table.compact td, .table.compact th { padding: 6px 8px; }
.gn-prev { max-height: 260px; overflow: auto; }
.pre { white-space: pre-line; }
.invoice-doc { max-width: 860px; }
.inv-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--primary); padding-bottom: 10px; margin-bottom: 14px; }
.inv-head h1 { letter-spacing: .12em; color: var(--primary); margin: 0; }
.inv-to { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .inv-to p { margin: 2px 0 0; }
.inv-lines input { min-height: 30px; padding: 3px 6px; } .inv-lines td:first-child { display: table-cell; }
.inv-lines td:nth-child(2) input { width: 100%; }
.inv-totals { margin: 12px 0 12px auto; max-width: 340px; display: flex; flex-direction: column; gap: 4px; }
.inv-totals div { display: flex; justify-content: space-between; gap: 16px; }
.inv-totals .tot { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 700; }
.inv-totals .bal { background: var(--primary-soft); padding: 8px 10px; border-radius: 8px; font-weight: 800; font-size: 1.1rem; }
.inv-foot { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 8px; }
.mbars { display: flex; gap: 8px; align-items: flex-end; height: 160px; margin-bottom: 8px; }
.mbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; } .mbar span { font-size: .75rem; color: var(--muted); }
.mbar .bars { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; }
.mbar i, .key { display: inline-block; border-radius: 3px 3px 0 0; } .mbar i { flex: 1; min-height: 2px; }
.mbar i.b, .key.b { background: var(--primary); opacity: .45; } .mbar i.c, .key.c { background: var(--primary); }
.key { width: 12px; height: 12px; vertical-align: middle; margin: 0 4px 0 10px; border-radius: 3px; }
@media print { .no-print-inline { border: 0; padding: 0; } .invoice-doc { max-width: none; } }

/* student history */
.hgrid-wrap { overflow-x: auto; } .hgrid input, .hgrid select { min-height: 32px; padding: 3px 6px; min-width: 70px; } .hgrid td:first-child { display: table-cell; }
.hgrid td:nth-child(3) select { min-width: 170px; } .hgrid td:last-child input { min-width: 160px; }
.hdom { margin-bottom: 6px; } .hdom input[name=dn] { flex: 1; } details.paste { margin-top: 12px; } #hpaste { width: 100%; }

/* remote student screen */
.screen-share { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.screen-code { font: 800 2.6rem/1 ui-monospace, Consolas, monospace; letter-spacing: .25em; background: var(--primary-soft); color: var(--primary); border-radius: 12px; padding: 12px 16px; text-align: center; margin: 6px 0 10px; }
.screen-qr .qr { width: 150px; height: 150px; }
.screen-badge { cursor: pointer; border: 0; font: inherit; font-weight: 700; }
@media (max-width: 600px) { .screen-share { grid-template-columns: 1fr; } .screen-qr { justify-self: center; } }

/* interactive student screen: teacher strip */
.stu-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--primary-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; max-width: 900px; }
.stu-label { font-weight: 700; } .stu-act { flex: 1; min-width: 180px; } .stu-ctl { display: flex; gap: 6px; flex-wrap: wrap; }
/* video call panel (teacher app and student screen) */
.dd-video { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 260px; background: #111; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.35); color: #fff; font: 13px system-ui, sans-serif; }
.dd-video.big { width: min(520px, 90vw); }
.dd-video .v-stage { position: relative; aspect-ratio: 4 / 3; background: #222; }
.dd-video .v-remote { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd-video .v-local { position: absolute; right: 6px; bottom: 6px; width: 30%; border-radius: 8px; border: 2px solid rgba(255,255,255,.7); background: #333; transform: scaleX(-1); }
.dd-video .v-status { position: absolute; inset: auto 8px 8px 8px; background: rgba(0,0,0,.6); padding: 6px 8px; border-radius: 8px; text-align: center; }
.dd-video .v-bar { display: flex; justify-content: space-around; padding: 6px; background: #1a1a1a; }
.dd-video .v-bar button { background: #2c2c2c; color: #fff; border: 0; border-radius: 50%; width: 38px; height: 38px; font-size: 16px; cursor: pointer; }
.dd-video .v-bar button.off { background: #b91c1c; } .dd-video .v-bar .v-end { background: #b91c1c; } .dd-video .v-bar button:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) { .dd-video { width: 180px; right: 8px; bottom: 76px; } }

/* family messages (teacher side) */
.tthread { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow: auto; margin-bottom: 10px; }
.tthread .h-msg { max-width: 85%; padding: 8px 12px; border-radius: 14px; } .tthread .h-msg small { display: block; font-size: .72rem; opacity: .7; margin-top: 3px; }
.tthread .h-msg.me { align-self: flex-end; background: var(--primary-soft); } .tthread .h-msg.them { align-self: flex-start; background: var(--surface-2); }

/* decodable passage library + printables */
.psg-snip { margin: 0; color: var(--muted); font-size: .95rem; }
.psg-opts { margin: 0 0 12px; gap: 12px; }
.psg-page { max-width: 820px; }
.psg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); margin-bottom: 12px; }
.psg-head h1 { margin: 0 0 6px; }
.psg-red { background: var(--surface-2); padding: 6px 10px; border-radius: 8px; }
.psg-text { font-size: 1.35rem; line-height: 2; margin: 16px 0 22px; }
.size-m .psg-text, .size-m .psg-lines { font-size: 1.1rem; } .size-xl .psg-text, .size-xl .psg-lines { font-size: 1.7rem; line-height: 2.2; }
.psg-lines { width: 100%; border-collapse: collapse; font-size: 1.3rem; line-height: 2; margin: 12px 0; }
.psg-lines td { padding: 0 6px; border-bottom: 1px dotted var(--line); } .psg-lines td.wc { width: 3.2em; text-align: right; font-family: system-ui, sans-serif; font-size: .8rem; color: var(--muted); font-weight: 700; }
.psg-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; font-size: .95rem; }
.psg-q ol { padding-left: 1.4rem; } .psg-q li { margin-bottom: 10px; } .psg-q li p { margin: 0 0 4px; font-size: 1.05rem; }
.ans-lines i { display: block; border-bottom: 1px solid var(--muted); height: 30px; }
.psg-q .ans { color: var(--primary); font-size: .95rem; }
.psg-key { border-top: 1px dashed var(--line); margin-top: 18px; padding-top: 8px; }
.psg-foot { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 6px; }
.psg-live-q { margin-top: 12px; } .psg-live-q ol { margin: 8px 0; padding-left: 1.3rem; }
.deck-form .deck-types { margin-bottom: 6px; flex-wrap: wrap; }
.deck-form .row { margin: 8px 0; gap: 12px; }
.deck-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.deck-phase { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px 8px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.deck-phase legend { font-weight: 700; padding: 0 4px; }
.deck-out { margin-top: 16px; }
.deck-page { background: #fff; color: #000; display: grid; gap: 0; width: 7.5in; max-width: 100%; margin: 0 auto 18px; border: 1px solid var(--line); box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1)); }
.deck-page.s6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 3.1in; }
.deck-page.s8 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 2.35in; }
.deck-page.s12 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 2.35in; }
.deck-page.calling { grid-auto-rows: 1.1in; } .calling-h { grid-column: 1 / -1; margin: 8px; font-size: 1rem; }
.dcard { position: relative; border: 1px dashed #999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; overflow: hidden; }
.dcard.back { background: #fafafa; }
.dc-big { font-size: 5rem; font-weight: 700; line-height: 1; } .s12 .dc-big { font-size: 3.6rem; }
.dc-word { font-size: 2.6rem; font-weight: 600; } .s12 .dc-word, .calling .dc-word { font-size: 1.8rem; }
.dc-kw { font-size: 2.2rem; } .dc-snd { font-size: 1.4rem; color: #444; margin-top: 6px; }
.dc-mark { position: absolute; top: 6px; right: 10px; font-size: 1.2rem; color: #666; }
.dc-heart { color: #c2185b; font-size: 1.4rem; } .dc-ph { position: absolute; bottom: 6px; right: 10px; font-size: .7rem; color: #777; }
.bingo-sheet { display: flex; flex-direction: column; align-items: center; }
.bingo-board { background: #fff; color: #000; width: 7.5in; max-width: 100%; padding: .3in; margin: 0 auto 18px; border: 1px solid var(--line); text-align: center; }
.bingo-board h2 { letter-spacing: .6em; font-size: 2.2rem; margin: 0 0 12px; }
.bingo { display: grid; border: 3px solid #000; }
.bingo.g3 { grid-template-columns: repeat(3, 1fr); } .bingo.g4 { grid-template-columns: repeat(4, 1fr); } .bingo.g5 { grid-template-columns: repeat(5, 1fr); }
.bingo div { aspect-ratio: 1; border: 1.5px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.8rem; padding: 4px; word-break: break-word; }
.bingo.g5 div { font-size: 1.35rem; } .bingo.g3 div { font-size: 2.4rem; }
.bingo .free { font-size: 2rem; color: #c2185b; } .bingo .free small { font-size: .8rem; color: #000; }
.roll-board { background: #fff; color: #000; width: 7.5in; max-width: 100%; padding: .3in; margin: 0 auto 18px; border: 1px solid var(--line); }
.roll-board h2 { margin: 0 0 4px; }
table.roll { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.roll th { font-size: 2.4rem; line-height: 1; padding: 4px; border: 2px solid #000; }
table.roll td { border: 1.5px solid #000; text-align: center; height: .95in; font-size: 1.35rem; padding: 2px; word-break: break-word; }
.h-qs { text-align: left; background: rgba(255,255,255,.6); border-radius: 12px; padding: 8px 14px; margin: 8px 0; }
@media print {
  .deck-page, .bingo-board, .roll-board { border: 0; box-shadow: none; margin: 0 auto; break-after: page; }
  .deck-page:last-child, .bingo-board:last-child, .roll-board:last-child { break-after: auto; }
  body:has(.deck-out) main, body:has(.psg-page) main { padding: 0; }
  body:has(.deck-out) .page-head, body:has(.deck-out) .lib-tabs { display: none; }
  .psg-page { max-width: none; }
}
.lib-tabs { max-width: 100%; overflow-x: auto; white-space: nowrap; }
.bingo.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bingo.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bingo.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bingo-board, .roll-board { box-sizing: border-box; }
@media (max-width: 600px) {
  .bingo div { font-size: 1.05rem; } .bingo.g5 div { font-size: .85rem; } .bingo.g3 div { font-size: 1.4rem; }
  .bingo-board { padding: 10px; } .bingo-board h2 { font-size: 1.4rem; }
  .roll-board { padding: 10px; } table.roll td { font-size: .9rem; height: 56px; } table.roll th { font-size: 1.6rem; }
  .dc-big { font-size: 3rem; } .dc-word { font-size: 1.5rem; } .dc-kw { font-size: 1.3rem; }
  .deck-page.s6, .deck-page.s8, .deck-page.s12 { grid-auto-rows: 120px; }
  .psg-text { font-size: 1.15rem; }
}
.psg-opts .check { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* progress monitoring */
.mon-chart .nb { fill: var(--primary); opacity: .10; }
.mon-chart .n50 { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8; }
.mon-chart .n10 { fill: none; stroke: #c2410c; stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .7; }
.mon-chart .aim { stroke: #7c3aed; stroke-width: 2; stroke-dasharray: 8 5; }
.mon-chart .trend { stroke: #0f172a; stroke-width: 1.6; opacity: .55; }
.mon-chart .goalpt { fill: #7c3aed; }
.mon-chart .dotc.bm { r: 5.5; stroke: #fff; stroke-width: 1.5; }
.mon-chart .nlbl { fill: var(--primary); }
.mon-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; color: var(--muted); }
.mon-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; }
.mon-legend .lg-series { border-color: var(--primary); } .mon-legend .lg-band { height: 8px; border: 0; background: var(--primary); opacity: .2; }
.mon-legend .lg-50 { border-top-style: dashed; border-color: var(--primary); } .mon-legend .lg-10 { border-top-style: dotted; border-color: #c2410c; }
.mon-legend .lg-aim { border-top-style: dashed; border-color: #7c3aed; } .mon-legend .lg-trend { border-color: #0f172a; opacity: .55; }
.mon-sum { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.mon-sum strong { display: block; font-size: 1.6rem; } .mon-sum span { color: var(--muted); font-size: .85rem; }
.mon-dec { padding: 8px 12px; border-radius: 8px; background: var(--surface-2); margin: 10px 0; }
.mon-dec.bad { background: var(--bad-soft); } .mon-dec.ok { background: var(--ok-soft); } .mon-dec.warn { background: #fef3c7; }
.norms td, .norms th { text-align: center; } .ncell { width: 64px; padding: 4px 6px; }
.table-wrap { overflow-x: auto; max-width: 100%; }

/* passage writer + AI */
.wr-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .wr-grid { grid-template-columns: 1fr; } }
.wr-grid select[multiple] { min-height: 150px; }
.wr-q { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; } .wr-q legend { font-weight: 700; padding: 0 4px; }
.wr-q .row { gap: 8px; margin: 6px 0; } .wr-q .row input { flex: 1; min-width: 0; }
.wr-check.ok { border-left: 4px solid var(--ok); padding-left: 10px; } .wr-check.bad { border-left: 4px solid var(--bad); padding-left: 10px; }
.chip.bad { background: var(--bad-soft); color: var(--bad); border: 0; cursor: pointer; font: inherit; font-size: .8rem; }
.wr-preview { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; line-height: 1.9; margin-top: 8px; max-height: 320px; overflow: auto; }
.wr-preview mark.flag { background: #fecaca; color: #7f1d1d; border-radius: 3px; padding: 0 2px; }
.ai-box { border: 1px dashed var(--primary); } .ai-box h3 { margin-top: 0; }
.ask { margin-bottom: 16px; } .ask-ans { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .ask-ans ul { padding-left: 1.2rem; }

/* calendar & video */
.meet-f { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; } .meet-f legend { font-weight: 700; padding: 0 4px; }
.meet-f .row { gap: 8px; align-items: center; }

/* card payments */
.card-pay { margin-top: 16px; } .card-pay ol { padding-left: 1.2rem; }
.pay-online { background: var(--primary-soft); padding: 8px 12px; border-radius: 8px; }

/* security */
.tf-qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 10px 0; } .tf-qr svg { background: #fff; padding: 8px; border-radius: 8px; }
.tf-qr > div { display: flex; flex-direction: column; gap: 4px; } .tf-key { font-size: 1rem; letter-spacing: .05em; word-break: break-all; }
.tf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0; } .tf-codes code { font-size: 1rem; padding: 6px 10px; text-align: center; }
.tf-steps { padding-left: 1.2rem; } .warn-row td { background: var(--bad-soft); } .nowrap { white-space: nowrap; }

/* tenant console */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.danger-zone { border: 1px solid var(--bad); } .grow { flex: 1; } ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { padding: 2px 0; }

/* import */
.imp-scroll { overflow-x: auto; max-width: 100%; } .imp-map select { min-width: 150px; font-size: .85rem; }
.skip-row td { opacity: .5; } .file-btn { cursor: pointer; } #imp-paste { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }

/* operations */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ops-grid .attn { border-left: 4px solid var(--mid, #d97706); }
.wrap-code { display: block; word-break: break-all; white-space: normal; font-size: .75rem; flex: 1; }
.err-log { max-height: 320px; overflow: auto; margin-top: 8px; } .err-log > div { border-bottom: 1px solid var(--line); padding: 6px 0; }
.ops-grid pre { white-space: pre-wrap; max-height: 220px; overflow: auto; }

.env-bar { background: #7c2d12; color: #fff; text-align: center; padding: 6px 12px; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }

/* group lessons */
.gsel { width: 34px; }
.gtally { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.gt-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.gt-row.turn { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.gt-row.absent { opacity: .5; }
.gt-name { flex: 1; min-width: 140px; text-align: left; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.gt-btns { display: flex; gap: 6px; } .gt-btns button { width: 48px; height: 40px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.gt-btns .t-ok.on { background: var(--ok); color: #fff; border-color: var(--ok); } .gt-btns .t-mid.on { background: #d97706; color: #fff; border-color: #d97706; } .gt-btns .t-bad.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.gt-err { font-size: .85rem; }
.roster { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; } .roster h4 { margin: 0 0 4px; }
.grp-avatars { display: flex; } .grp-avatars > * { margin-right: -8px; border: 2px solid var(--surface); }

/* audio */
.snd-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: .9rem; }
.snd-btn:hover { border-color: var(--primary); } .stage-snd { margin-top: 10px; font-size: 1.1rem; } .card-snd { display: block; margin: 6px auto 0; font-size: .8rem; }
.aud-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 860px) { .aud-grid { grid-template-columns: 1fr; } }
.aud-list { max-height: 70vh; overflow: auto; }
.aud-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.aud-row.rec { background: var(--bad-soft); } .aud-label { font-size: 1.4rem; font-weight: 600; } .aud-btns { display: flex; gap: 4px; } .aud-st { display: flex; gap: 4px; }
@media (max-width: 560px) { .aud-row { grid-template-columns: 56px minmax(0, 1fr); } .aud-st, .aud-btns { grid-column: 2; } }

.seg a { display: inline-block; padding: 7px 12px; text-decoration: none; color: var(--ink); font-size: .88rem; background: var(--surface); }
.seg a + a { border-left: 1px solid var(--line); } .seg a.on { background: var(--primary); color: var(--primary-ink); font-weight: 600; }

/* accessibility */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--primary); color: var(--primary-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* screening */
.scr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.scr-grid label { font-weight: 600; } .scr-grid label span { display: block; font-weight: 400; }
.scr-list li { margin: 2px 0; } table.scb .ncell { width: 58px; } table.scb th { text-align: center; font-size: .75rem; }

/* mini-books */
.mb { display: flex; flex-direction: column; gap: 18px; }
.mb-sheet { display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: #000; border: 1px solid var(--line); width: 100%; max-width: 10.3in; aspect-ratio: 11 / 8.5; margin: 0 auto; }
.mb-page { position: relative; display: flex; flex-direction: column; padding: .35in; gap: 12px; border-right: 1px dashed #999; overflow: hidden; }
.mb-page:last-child { border-right: 0; }
.mb-draw { flex: 1; border: 2px dashed #bbb; border-radius: 12px; min-height: 1.2in; }
.mb-text { font-size: 1.45rem; line-height: 1.8; margin: 0; } .mb.size-xl .mb-text { font-size: 1.8rem; } .mb.size-m .mb-text { font-size: 1.2rem; }
.mb-cover h1 { text-align: center; font-size: 2rem; margin: 0; } .mb-cover p { text-align: center; }
.mb-num { position: absolute; bottom: .15in; right: .25in; font-size: .8rem; color: #666; }
.mb-end ol { padding-left: 1.2rem; font-size: 1.1rem; } .mb-end li { margin-bottom: 10px; } .mb-log { list-style: none; padding: 0; font-size: 1.1rem; }
.mb-blank .mb-draw { display: none; }
@media print { .mb { gap: 0; } .mb-sheet { border: 0; max-width: none; width: 100%; height: 7.8in; aspect-ratio: auto; break-after: page; } .mb-sheet:last-child { break-after: auto; } body:has(.mb) main { padding: 0; } body:has(.mb) .page-head { display: none; } }
@media (max-width: 700px) { .mb-sheet { grid-template-columns: 1fr; aspect-ratio: auto; } .mb-page { border-right: 0; border-bottom: 1px dashed #999; min-height: 360px; } }

/* spelling */
.spell-doc { max-width: 820px; } .spell-grid td.pw { font-size: 1.3rem; }
.spell-test, .spell-sent { font-size: 1.2rem; } .spell-test li, .spell-sent li { margin: 14px 0; } .spell-line { display: inline-block; width: 60%; border-bottom: 1.5px solid #555; height: 1.2em; } .spell-line.long { width: 92%; }
.spell-key { columns: 2; font-size: 1.2rem; } .spell-key li { margin: 4px 0; }

/* word parts */
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wp-card p { margin: 6px 0; } .wp-form { font-size: 1.6rem; font-weight: 700; } .wp-mean { font-weight: 600; }
.wp-doc { max-width: 820px; }
.wp-matrix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; border: 2px solid #333; border-radius: 6px; margin: 12px 0; font-size: 1.4rem; }
.wp-col { display: flex; flex-direction: column; padding: 8px 14px; } .wp-col span { padding: 3px 0; border-bottom: 1px solid #ccc; } .wp-col span:last-child { border-bottom: 0; }
.wp-base { font-size: 2rem; font-weight: 700; padding: 18px 22px; border-left: 2px solid #333; border-right: 2px solid #333; align-self: stretch; display: flex; align-items: center; background: #fff8dc; color: #000; }
.wp-sums { columns: 2; font-size: 1.1rem; } .wp-sums li { margin: 5px 0; break-inside: avoid; }
.ws-part { display: inline-block; padding: 0 5px; border: 1px solid #bbb; border-radius: 4px; }
.wp-lines { font-size: 1.2rem; } .wp-lines li { margin: 14px 0; } .wp-word { display: inline-block; min-width: 9em; }
.wp-match { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; font-size: 1.1rem; } .wp-match li { margin: 10px 0; } .wp-form-sm { display: inline-block; min-width: 5em; font-weight: 700; } .wp-match .abc { list-style: none; padding: 0; }
@media (max-width: 600px) { .wp-sums { columns: 1; } .wp-match { grid-template-columns: 1fr; } .wp-matrix { font-size: 1.1rem; } .wp-base { font-size: 1.4rem; padding: 10px; } }

/* vocabulary & comprehension */
.word-bank { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 2px solid #333; border-radius: 6px; padding: 10px 14px; margin: 10px 0; font-size: 1.2rem; }
.frayer { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 820px; margin-bottom: 16px; padding: 0 !important; overflow: hidden; }
.fr-q { border: 1px solid #999; min-height: 1.9in; padding: 8px 12px; } .fr-q h4 { margin: 0 0 6px; font-size: .9rem; }
.fr-word { position: absolute; top: calc(1.9in - 38px); left: 50%; transform: translateX(-50%); background: #fff; color: #000; border: 2px solid #333; border-radius: 50%; padding: 18px 26px; font-size: 1.5rem; font-weight: 700; text-align: center; }
.fr-word small { display: block; font-size: .7rem; font-weight: 400; }
.fr-sent { grid-column: 1 / -1; padding: 10px 12px; margin: 0; border-top: 1px solid #999; }
.qchip { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: 10px; background: var(--surface-2, #eef); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.go-grid { display: grid; gap: 10px; margin: 10px 0; } .go-grid.g2 { grid-template-columns: 1fr 1fr; } .go-grid.g3 { grid-template-columns: repeat(3, 1fr); } .go-grid.g2c { grid-template-columns: 1fr auto 1fr; align-items: center; }
.go-box { border: 1.5px solid #555; border-radius: 8px; padding: 8px 12px; margin: 8px 0; break-inside: avoid; } .go-box h4 { margin: 0 0 4px; font-size: .92rem; }
.go-box .ans-lines i { display: block; border-bottom: 1px solid #aaa; height: 1.7em; }
.go-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .go-chain .go-box { flex: 1 1 150px; } .go-arrow { font-size: 1.4rem; }
.go-top { background: #fff8dc; color: #000; } .go-table td { height: 2.2em; }
.stem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .stem-grid ul { padding-left: 18px; margin: 4px 0; }
.comp-q { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 6px 0; } .seg.sm button { padding: 3px 10px; }
@media (max-width: 600px) { .go-grid.g2, .go-grid.g3 { grid-template-columns: 1fr; } .go-grid.g2c { grid-template-columns: 1fr; } .frayer { grid-template-columns: 1fr; } .fr-word { position: static; transform: none; border-radius: 8px; margin: 8px; } .comp-q { flex-direction: column; align-items: flex-start; } }

/* text messages */
.chip.warnb { background: var(--warn-soft, #fff3cd); color: var(--warn, #8a5a00); }
input.mono { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; width: min(100%, 560px); }

/* online booking */
.bk-req { margin-bottom: 10px; } .bk-req h3 { margin: 0 0 4px; }
.bk-hours input[type=time] { width: 8.6em; } .bk-qr svg { width: 120px; height: 120px; background: #fff; }
.bk-type { display: block; width: 100%; text-align: left; margin: 8px 0; }
.bk-day { margin: 12px 0; } .bk-day h3 { margin: 0 0 6px; font-size: 1rem; } .bk-times { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button.link { background: none; border: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; padding: 0 4px; }

/* superbills */
.sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sb-grid th { width: 42%; font-weight: 600; }
.sb-blank { display: inline-block; min-width: 12em; border-bottom: 1px solid #777; height: 1em; } .sb-blank.long { min-width: 22em; } .sb-blank.hide { display: none; }
.sb-lines td, .sb-lines th { font-size: .85rem; } .sb-dx { font-size: 1.05rem; font-weight: 600; }
.sb-sign { display: flex; gap: 30px; margin-top: 28px; flex-wrap: wrap; }
@media (max-width: 700px) { .sb-grid { grid-template-columns: 1fr; } .sb-lines { display: block; overflow-x: auto; } }

/* single sign-on */
.sso-btns { margin-top: 10px; } .sso-or { display: flex; align-items: center; gap: 10px; color: var(--muted, #667); font-size: .85rem; margin: 10px 0; }
.sso-or::before, .sso-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; text-decoration: none; }
.sso-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; font-size: .8rem; color: #fff; }
.sso-google .sso-ic { background: #4285f4; } .sso-microsoft .sso-ic { background: #2f2f2f; } .sso-clever .sso-ic { background: #1464ff; }

.screen-send { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* staff profiles */
.pf-photo { border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2, #e8efed); }
.pf-ini { display: inline-grid; place-items: center; font-weight: 700; color: var(--primary, #0f766e); background: var(--primary-soft, #dff3ef); }
.pf-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .pf-head h2 { margin: 0; } .pf-title { font-weight: 600; margin: 2px 0; }
.pf-links { display: flex; flex-wrap: wrap; gap: 6px 14px; } .pf-links a { text-decoration: none; }
.pf-list { list-style: none; padding: 0; } .pf-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pf-card { text-align: center; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; } .pf-card h3 { margin: 6px 0 0; }
.pf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.pf-linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.who { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; } .who-ph { border-radius: 50%; object-fit: cover; }
.pf-portal { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0; } .pf-portal h3 { margin: 0; }
.pf-pub { display: flex; gap: 20px; align-items: flex-start; } .pf-pub h2 { margin: 0 0 4px; }
@media (max-width: 600px) { .pf-pub { flex-direction: column; align-items: center; } }

.bk-teacher { display: flex; align-items: center; gap: 12px; } .bk-teacher .pf-photo { width: 44px; height: 44px; }

/* setup checklist + progress notes */
.setup-card h2 { margin: 0; }
.su-bar { height: 8px; background: var(--line, #e5e5e5); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.su-bar span { display: block; height: 100%; background: var(--ok); }
.su-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.su-list li { display: flex; gap: 10px; align-items: flex-start; }
.su-list li.ok { opacity: .7; }
.su-box { flex: 0 0 22px; height: 22px; border: 2px solid var(--muted, #888); border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.su-list li.ok .su-box { background: var(--ok); border-color: var(--ok); color: #fff; }
.note-add { border-left: 3px solid var(--accent); padding: 4px 10px; margin: 10px 0; font-size: .95em; }
.note-sec { border-top: 1px solid var(--line, #ddd); padding-top: 8px; margin-top: 12px; }
.note-sec h4, article h4 { margin: 10px 0 2px; }

/* intake forms */
.ff-form .ff { display: block; margin: 10px 0; }
.ff-form fieldset.ff { border: 0; padding: 0; }
.ff-form legend { font-weight: 600; margin-bottom: 4px; }
.ff-opt { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; font-weight: 400; }
.ff-agree.strong { font-weight: 600; }
.ff-h { margin: 18px 0 4px; border-bottom: 1px solid var(--line, #ddd); padding-bottom: 4px; }
.ff-p { background: var(--soft, #f6f6f4); padding: 10px 12px; border-radius: 8px; }
.ff-ro { display: grid; grid-template-columns: minmax(160px, 40%) 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--line, #ddd); }
.ff-ro span { color: var(--muted, #666); }
.ff-sigbox { margin-top: 18px; border-top: 2px solid var(--line, #ddd); padding-top: 10px; }
.sigpad { display: block; width: 100%; max-width: 520px; height: 150px; border: 2px dashed var(--muted, #999); border-radius: 8px; background: #fff; margin: 6px 0; }
.ff-sig img { border-bottom: 1px solid #333; max-width: 300px; height: auto; background: #fff; }
.req { color: var(--bad, #b91c1c); }
#ffe td textarea, #ffe td input:not([type=checkbox]) { width: 100%; min-width: 280px; box-sizing: border-box; }
#ffe td:nth-child(2) { width: 100%; }
.ff-es summary { cursor: pointer; color: var(--primary); }

.hw-item { border-top: 1px solid var(--line, #e5e5e5); padding: 8px 0; }
.hw-k { align-items: center; gap: 10px; }

.cls-att th, .cls-att td { padding: 4px 6px; }
@media print { .cls-att input[type=checkbox] { width: 16px; height: 16px; } }

/* invitations */
.iv-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.iv-preset { display: flex; flex-direction: column; gap: 2px; border: 2px solid var(--line, #e5e5e5); border-radius: 12px; padding: 12px; cursor: pointer; position: relative; }
.iv-preset input { position: absolute; opacity: 0; }
.iv-preset:has(input:checked) { border-color: var(--primary); background: var(--primary-soft, #ecfdf5); }
.iv-preset.off { opacity: .55; cursor: not-allowed; }
.iv-ic { font-size: 1.4rem; }
.iv-frame { width: 100%; height: 900px; border: 1px solid var(--line, #ddd); border-radius: 10px; background: #f4f1ea; }
.iv-kind { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.iv-kind label { position: relative; border: 2px solid var(--line, #e5e5e5); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.iv-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iv-kind label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft, #ecfdf5); }
.iv-kind label:has(input:focus-visible), .iv-preset:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.wn-card { border-left: 4px solid var(--primary); }
.wn-list { margin: 6px 0 0; padding-left: 18px; } .wn-list li { margin: 5px 0; }

/* conference packet */
.packet-cover { text-align: center; padding: 40px 20px; }
.packet-cover h1 { font-size: 2rem; margin: 14px 0; } .packet-cover ol { display: inline-block; text-align: left; } .packet-who { font-size: 1.3rem; }
.packet-sec { margin-top: 18px; border-top: 2px dashed var(--line, #ddd); padding-top: 12px; }
@media print { .packet-sec { break-before: page; border: 0; margin: 0; padding: 0; } .packet-cover { break-after: auto; } }

/* accessibility: headings kept in order but styled like the smaller level */
h2.h3 { font-size: 1rem; margin: .2rem 0 .4rem; }
h3.h4 { margin: .6rem 0 .3rem; font-size: .9rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.day h2.dayh { font-size: .85rem; margin: 0 0 4px; color: var(--muted); display: flex; justify-content: space-between; } .day h2.dayh span { color: var(--ink); font-size: 1.05rem; }