/* Sonus Student — additions over app.css (same tokens, same Jane look). */

.brand-sub { font-weight: 300; color: var(--muted); margin-left: .25rem; }

/* Logo — inline SVG; the dark "Sonus" letters take the theme text color. */
.sonus-logo { display: block; height: 100%; width: auto; color: var(--text); }
.topbar .brand-logo { display: inline-flex; align-items: center; gap: .6rem; height: 100%;
                      padding: .55rem 0; letter-spacing: 0; }
.topbar .brand-logo .sonus-logo { height: 100%; }
.brand-edition { color: var(--muted); font-weight: 400; font-size: .95rem; letter-spacing: .02em;
                 white-space: nowrap; }
.topbar .brand-logo .brand-edition { border-left: 1px solid var(--border); padding-left: .6rem; }
.brand-block { display: flex; flex-direction: column; align-items: center; gap: .15rem;
               margin: .2rem 0 1rem; }
.brand-block .sonus-logo { height: 4.2rem; }
.login-card h1 { text-align: center; }
@media (max-width: 900px) { .topbar .brand-logo .brand-edition { display: none; } }
.student-canvas { max-width: 1180px; margin: 0 auto; width: 100%; }
.student-foot { margin: 2rem 0 .5rem; text-align: center; }

.login-card-wide { max-width: 26rem; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.new-case { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.new-case select { min-width: 10rem; }

.practice-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .practice-grid { grid-template-columns: 1fr; } }

.practice-inputs h2, .answer-grid .card h2 { margin-top: 0; }
/* One grid for the whole table (rows are display: contents) so every row's direction
   buttons share a column — the Co box sits under the +/− buttons, Ax under FA's box. */
.factor-table { display: grid; grid-template-columns: max-content auto 1fr; align-items: center; gap: .4rem .5rem; }
.factor-line { display: contents; }
.factor-line > .factor-name { grid-column: 1; padding-right: .5rem; }   /* each name starts a new row (Simple hides the number cells) */
.factor-line .factor-name { color: var(--muted); font-size: .92rem; }
.factor-line .unit { color: var(--muted); font-size: var(--fs-caption); }
.factor-line .unit.deg { font-size: 1.3rem; line-height: 1; position: relative; top: -.3rem; }
.seg-ghost { visibility: hidden; }   /* keeps FCAb and Co/Ax lined up with the other numbers */
.factor-line input[type="number"] { width: 100%; min-width: 0; }
.factor-line select { width: 100%; }

/* Direction buttons (R/L, A/P, +/−) — a segmented control over hidden radios. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill);
       overflow: hidden; background: var(--surface); }
.seg-opt { position: relative; cursor: pointer; margin: 0; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
/* "> span": a button's label may hold a nested terminology span ({% term %}). */
.seg-opt > span { display: inline-block; min-width: 2.4rem; padding: .3rem .55rem; text-align: center;
                  font-weight: 600; font-size: .92rem; color: var(--muted); user-select: none; }
.seg-opt + .seg-opt > span { border-left: 1px solid var(--border); }
.seg-opt:hover > span { background: var(--accent-tint); color: var(--text); }
.seg-opt input:checked + span { background: var(--accent); color: #fff; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
/* A stack of buttons: the questions beside the stick figure (James, 2026-10-27). */
.seg-vert { flex-direction: column; border-radius: .7rem; flex-wrap: nowrap; }
.seg-vert .seg-opt > span { display: block; }
.seg-vert .seg-opt + .seg-opt > span { border-left: 0; border-top: 1px solid var(--border); }
.seg-mode .seg-opt > span { min-width: 4.5rem; font-weight: 500; }
/* The level icons show once the top bar is cramped (James, 2026-10-28 / 11-01). */
.seg-mode .mode-icon { display: none; vertical-align: middle; }
html.bar-compact .seg-mode .mode-icon { display: inline-block; }
html.bar-compact .seg-mode .mode-word { display: none; }
html.bar-compact .seg-mode .seg-opt > span { min-width: 2.8rem; }
.seg-terms .seg-opt > span { min-width: 3.2rem; font-weight: 500; }

.inputs-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
               flex-wrap: wrap; margin-bottom: .6rem; }
.inputs-head h2 { margin: 0; }
.factor-line .num { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; }
.factor-line .num input[type="number"] { width: 4rem; padding-left: .45rem; padding-right: .3rem; }
.factor-table .seg-opt > span { min-width: 2.1rem; padding: .3rem .45rem; }
/* cFAC: a plain label under FCAb (calculated, not typed), its number lined up with the boxes'
   numbers; a rule between FA and Co/Ax (James, 2026-10-18). */
.calc-box { display: inline-flex; align-items: center; min-height: 2rem; color: var(--text); font-weight: 600; }
.calc-side { justify-self: start; position: relative; }
.calc-deg { width: 4rem; padding-left: calc(.45rem + 1px); }
.factor-rule { grid-column: 1 / -1; height: 0; border-top: 1px solid var(--border); margin: .15rem 0; }
.factor-table .seg, .factor-line .num { justify-self: start; }
/* Co: exactly the width of the button column (width 0 so the box never widens the column). */
.factor-line .co-box { display: flex; justify-self: stretch; width: 0; min-width: 100%; }
.factor-line .co-box input[type="number"] { width: 100%; }
.factor-line .hint { white-space: nowrap; }

/* Simple view: directions only — every number box and number-only row hides. */
.practice-inputs[data-mode="simple"] .num, .dash[data-mode="simple"] .num { display: none; }
.practice-inputs[data-mode="complex"] .simple-only, .dash[data-mode="complex"] .simple-only { display: none; }

.live-figure-wrap { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.live-figure-wrap h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 500; }
#live-figure { max-width: 20rem; margin: 0 auto; }
#live-figure svg { width: 100%; height: auto; }
#live-figure.htmx-request { opacity: .6; transition: opacity .15s; }
.figure-empty { text-align: center; }

.practice-check { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.practice-check h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 500; }
/* The clinic footer is sticky; here it would sit on top of the live figure on a phone. */
.practice-inputs .form-footer { position: static; display: flex; gap: .5rem; flex-wrap: wrap;
                                margin: 1rem 0 0; padding: .8rem 0 0; }

.answer-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.answer-subtype { font-size: 1.15rem; }
.answer-cfac { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem;
               border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--text);
               font-weight: 600; }
.answer-cfac-key { color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.answer-grid .card.vectors { grid-column: 1 / -1; }
@media (max-width: 1100px) { .answer-grid { grid-template-columns: 1fr; } }

.verdict { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: .8rem;
           border: 1px solid var(--border); }
.verdict-ok { background: var(--success-tint); border-color: var(--success); }
.verdict-miss { background: var(--warning-tint); border-color: var(--warning); }

.fig-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.fig-row .fig { flex: 1 1 12rem; min-width: 0; max-width: 22rem; }
.fig-row svg { width: 100%; height: auto; }

.vec-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vec-tables h3 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 500; color: var(--muted); }
@media (max-width: 700px) { .vec-tables { grid-template-columns: 1fr; } }

.empty-state h2 { margin-top: 0; }

/* Mastoid picture as an input: drag the TP marker and the anterior-mastoid line. */
.live-mastoid-wrap { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.live-mastoid-wrap h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 500; }
#live-mastoid svg { display: block; width: 100%; max-width: 15rem; height: auto; margin: 0 auto;
                    touch-action: none; }
#live-mastoid [data-handle] { cursor: grab; }
#live-mastoid [data-handle]:active { cursor: grabbing; }
/* The anterior-mastoid line only slides sideways: a left-right arrow (James, 2026-10-17). */
#live-mastoid [data-handle="aml"], #live-mastoid [data-handle="aml"]:active { cursor: ew-resize; }
.mastoid-readout { text-align: center; margin: .4rem 0 0; font-variant-numeric: tabular-nums; }
.mastoid-hint { text-align: center; margin: .1rem 0 0; font-size: var(--fs-caption); }

/* --- Practice board: a top bar, then movable cards (James, 2026-10-15 / 10-17) ---
   Three layouts (James, 2026-11-01), set by the cards' minimum widths: the board from 1200px (its narrowest
   default column, 5 of 24, stays about 240px wide), two cards side by side from 700px (two 340px cards), one
   column below. On the board student-board.js places the cards on a 24-column grid of 2px rows. */
.student-canvas:has(.dash) { max-width: 1500px; padding-bottom: .8rem; }
.dash { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }   /* 8px, like the card gaps (James, 2026-10-18) */
.dash .card { margin: 0; }
.dash-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
            padding: .55rem .9rem; }
.dash-bar .dash-bar-group { display: inline-flex; align-items: center; gap: .4rem; }
.dash-bar .field-label { margin: 0; }
.dash-bar-actions { display: inline-flex; flex-wrap: wrap; gap: .4rem; }   /* on a phone Check wraps to a second row (James, 2026-11-01) */
/* Study / Test: aria-pressed="true" = Test (answers hidden). */
.btn-test { font-weight: 600; }
.btn-test[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* The filter box: a labelled group so the eye reads "Generate → with these → View". */
.dash-bar .filters { display: flex; gap: 1.1rem; margin: 0; padding: .1rem .9rem .5rem;
                     border: 1px solid var(--border); border-radius: var(--radius-pill);
                     background: var(--surface-2); }
.dash-bar .filters legend { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
                            color: var(--muted); padding: 0 .35rem; }
.dash-bar .filters .legend-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.dash-bar .filter { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; }
.dash-bar .filter-cap { font-size: .72rem; color: var(--muted); letter-spacing: .02em; }
.seg-small .seg-opt > span { min-width: 2.2rem; padding: .22rem .5rem; font-size: .85rem; }
.seg-opt input:disabled + span { opacity: .4; cursor: not-allowed; }

/* Stick figure: one clearly different color per part, so each section reads at a glance
   (James, 2026-10-18) — the clinic app keeps the workbook's slate/green look.
   FC + FAC blue, FS + FAS violet, FA green, HAC band coral, FAx amber. */
.dash { --chart-acd: #2563eb; --chart-cs: #8b5cf6; --chart-fa: #16a34a; --chart-hac-fill: #f08a6c; }
:root[data-theme="dark"] .dash { --chart-acd: #60a5fa; --chart-cs: #c4a5ff; --chart-fa: #5fd17f; --chart-hac-fill: #f4977c; }
.fig-term { display: none; pointer-events: none; }
.dash[data-fig-terms="on"] .fig-term { display: inline; }
.fig-menu { position: relative; margin-left: auto; }
.fig-menu > summary { list-style: none; cursor: pointer; }
.fig-menu > summary::-webkit-details-marker { display: none; }
.fig-menu > summary svg { transition: transform .15s; }
.fig-menu[open] > summary { color: var(--accent); background: var(--accent-tint); }
.fig-menu[open] > summary svg { transform: rotate(180deg); }
.fig-menu-panel { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 25;   /* under the sticky top bar (30) */ display: grid; gap: .45rem;
                  min-width: 15rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--border);
                  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.fig-menu-row { display: flex; align-items: center; gap: .7rem; }
.fig-menu-label { flex: 0 0 3.6rem; font-size: .85rem; color: var(--muted); }

/* Simple view: the Complex-only cards (Calculated factors, Instrument vectors). */
.dash[data-mode="simple"] .complex-only, .dash[data-mode="simple"] .mag-only { display: none; }

/* The board and its cards. */
.board { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 700px) and (max-width: 1199px) {
  .board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .5rem; }
}
.dash { overflow-x: clip; }   /* the centering shift (student-board.js) never adds a sideways scrollbar */
.board-card { min-width: 0; padding: .65rem .9rem .8rem; position: relative; }
/* Card titles sit on their own shaded band, edge to edge, so a title reads as a title
   (James, 2026-10-18). The negative margins cancel the card's padding. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
             min-height: 40px; margin: -.65rem -.9rem .6rem; padding: .35rem .9rem;   /* same height with or without an eye */
             background: var(--surface-2); border-bottom: 1px solid var(--border);
             border-radius: var(--radius) var(--radius) 0 0; }
.card-head h2 { margin: 0; font-size: .82rem; font-weight: 600; color: var(--muted);
                text-transform: uppercase; letter-spacing: .05em; }
.card-head > :not(h2) { flex-shrink: 0; }   /* the header's buttons keep their size; the title wraps first */
.card-head { gap: .35rem; }
.card-body { min-width: 0; }
.board-card .empty-state { padding: 0; text-align: left; }   /* short "still needed" line, not a big empty state */
/* Card eye: hides the body, keeps the header (remembered per device). */
.card-eye { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
            width: 28px; height: 28px; padding: 0; border-radius: 999px; cursor: pointer;
            background: transparent; border: 1px solid transparent; color: var(--muted); }
.card-eye:hover { border-color: var(--border); color: var(--accent); }
.card-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-eye .eye-shut { display: none; }
.card-eye[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
.card-eye[aria-pressed="true"] .eye-open { display: none; }
.card-eye[aria-pressed="true"] .eye-shut { display: inline; }
/* An answer card's "Test" button; in whole-page Test every card is already in Test, so it steps aside. */
.card-eye.card-test { width: auto; height: 26px; padding: 0 .6rem; font-size: .78rem; font-weight: 600;
                      border-color: var(--border); }
.card-eye.card-test[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash[data-answer="hidden"] .card-eye.card-test { display: none; }
.board-card.is-hidden { height: auto !important; padding-bottom: 0; }
.board-card.is-hidden .card-body { display: none !important; }   /* beats .is-fixed's flex */
.board-card.is-hidden .card-head { margin-bottom: 0; border-bottom: 0; border-radius: var(--radius); }
/* Answers-only eye (Corrective positioning, Types of patterns — James, 2026-10-18): the labels
   stay, each answer becomes a blank bar. */
.board-card.answers-off dl.positioning dd:not(:empty):not(.step):not(.quiz-dd),
.board-card.answers-off[data-card="patterns"] dl.summary dd:not(.quiz-dd),
.board-card.answers-off[data-card="patterns"] .meta strong {
  color: transparent; background: var(--surface-2); border-radius: 4px; user-select: none; }
.board-card.answers-off .positioning-close { visibility: visible; }
/* A resized card keeps its height; what does not fit scrolls inside it. */
.board-card.is-fixed { display: flex; flex-direction: column; overflow: hidden; }
.board-card.is-fixed .card-body { flex: 1 1 auto; min-height: 0; overflow: auto;
                                  display: flex; flex-direction: column; }
/* A card stretched to the board's foot (student-board.js, 2026-10-19): same column flex, no
   scrolling, so nothing changes inside it but the empty room at the bottom. */
.board-card.is-stretched { display: flex; flex-direction: column; }
.board-card.is-stretched .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.board-card.is-stretched .fig-box { flex: 1 1 auto; }
.board-card.is-stretched .fig-box svg { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; }

/* The global answer eye: answer content hides; each answer card says so in one line. */
.answer-part { display: flex; flex-direction: column; gap: .6rem; }
.answer-hidden-line { display: none; margin: 0; }
/* The top-bar eye blanks the answers the same way the card eyes do (James, 2026-10-19: "just
   hiding the information the user needs to practice on"): every card stays open with its labels,
   each answer becomes a blank bar. What it hides (James, 2026-10-20): the positioning rows, the
   patterns and subtype, and the stick figure drawing. The instrument setting stays: Test gives it
   (James, 2026-10-31).
   Calculated factors and the vector tables stay as they are. */
.dash[data-answer="hidden"] dl.positioning dd:not(:empty):not(.step):not(.quiz-dd),
.dash[data-answer="hidden"] [data-card="patterns"] dl.summary dd:not(.quiz-dd),
.dash[data-answer="hidden"] [data-card="patterns"] .meta strong {
  color: transparent; background: var(--surface-2); border-radius: 4px; user-select: none; }
.dash[data-answer="hidden"] .positioning-close { visibility: visible; }
/* With the answers hidden the student draws the figure instead (backlog #36). */
.dash[data-answer="hidden"] #live-figure, .board-card.answers-off #live-figure { display: none; }

/* Measured factors / Head angles inputs. */
.dash .factor-table { gap: .3rem .5rem; }
.head-table { grid-template-columns: max-content auto 1fr; }
.head-table .num input[type="number"] { width: 3.4rem; }     /* thinner (James, 2026-10-18) */
.head-readout { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); }
/* Head angles readout: patient / table vector components, then the instrument vector. */
.head-parts { margin: 0; display: grid; gap: .1rem; }
.head-parts dt { color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .04em; margin-top: .35rem; }
.head-parts dt:first-child { margin-top: 0; }
.head-parts dd { margin: 0 0 0 1rem; font-variant-numeric: tabular-nums; }   /* indented under its heading */
.head-parts dd strong { color: var(--accent); }

/* The two live pictures: as big as the card allows. */
.board-card .fig-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
#live-figure { max-width: none; width: 100%; }
#live-figure svg { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; }
#live-mastoid svg { max-width: 15rem; }
.board-card.is-fixed .fig-box { flex: 1 1 auto; }
.board-card.is-fixed .fig-box svg { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; }
#live-mastoid .mastoid-readout, #live-mastoid .mastoid-hint { flex: 0 0 auto; }

/* Grid mode (set by student-board.js, 1200px and wider). */
@media (min-width: 1200px) {
  .board.is-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: 2px;
                   column-gap: 8px; row-gap: 0; align-items: start; }
  .board.board-pending { visibility: hidden; }      /* until the first placement (no jump) */
}
.board-ghost { display: none; }
.board.is-grid .board-ghost.is-on { display: block; border: 2px dashed var(--accent); border-radius: var(--radius);
                                    background: var(--accent-tint); }
.card-resize { display: none; }
/* Edit mode (pencil in the top bar): dashed outlines, drag by the header, resize at the corner. */
.board-editing .board.is-grid .board-card { outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
                                            outline-offset: 2px; }
.board-editing .board.is-grid .card-head { cursor: grab; touch-action: none; user-select: none; }
.board-editing .board.is-grid .card-head .card-eye { cursor: pointer; }
.board-editing .board.is-grid .card-resize { display: block; position: absolute; right: 0; bottom: 0;
                                             width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 55%, var(--accent) 55% 62%, transparent 62% 72%,
                                      var(--accent) 72% 79%, transparent 79%); }
.board-editing .board.is-grid .board-card.is-hidden .card-resize { display: none; }
.board-card.is-dragging { z-index: 5; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); cursor: grabbing; }
.board-card.is-dragging .card-head { cursor: grabbing; }

/* Top-bar tools: pencil (edit layout), and Done / Reset layout while editing. */
.board-tools { display: inline-flex; align-items: center; gap: .4rem; }
.board-tools .board-edit-only { display: none; }
.board-editing .board-tools .board-edit-only { display: inline-flex; }
.board-tools [data-board-edit][aria-pressed="true"] { color: var(--accent); border-color: var(--accent);
                                                      background: var(--accent-tint); }
@media (max-width: 1199px) { .board-tools { display: none; } }

/* Calculated factors: grouped, the height factor shown as a sum. */
dl.factors .sub { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; font-weight: 600;
                  text-transform: uppercase; letter-spacing: .04em; margin-top: .3rem; }
dl.factors .rule { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: .05rem 0; }
dl.factors .rule.sum { border-top-color: var(--muted); margin-left: 1rem; }
dl.factors dt.in { padding-left: 1.1rem; }
/* Numbers line up on the decimal point (James, 2026-10-20): side letter | integer, right-aligned |
   fraction | unit, each in its own column of the same width on every row. */
dl.factors dd.dec { display: grid; grid-template-columns: 1.2rem 3.5ch auto auto; justify-content: start;
                    align-items: baseline; font-variant-numeric: tabular-nums; }
dl.factors dd.dec .d-int { text-align: right; }
dl.factors dt.plus::before { content: "+"; display: inline-block; width: 1.1rem; margin-left: -1.1rem;
                             color: var(--muted); }
/* Vector tables: a narrow, zebra-striped table with a heavier rule every fifth level (0, 5, 10 ...);
   the row for the current head height is tinted and bold. */
.card.vectors table.listing { max-width: 22rem; }
/* a short window onto -10..40, header pinned; practice.html centers the current row */
.card.vectors .vec-scroll { max-height: 17.5rem; overflow-y: auto; max-width: 22rem; position: relative;
                            overscroll-behavior: contain; border-bottom: 1px solid var(--border); }
/* A resized vectors card: the table box fills the card and is the only scrollbar (James, 2026-10-18). */
.board-card.is-fixed[data-card="vectors"] .card-body { overflow: hidden; }
.board-card.is-fixed[data-card="vectors"] #part-vectors,
.board-card.is-fixed[data-card="vectors"] .tab-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.board-card.is-fixed[data-card="vectors"] .vec-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
.card.vectors .vec-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.card.vectors table.listing th, .card.vectors table.listing td { padding: .12rem .6rem; line-height: 1.3; }   /* shorter (James, 2026-10-18) */
.card.vectors tbody tr:nth-child(even) td { background: var(--surface-2); }
/* thick line BELOW 0, 5, 10, 15, 20 (James, 2026-10-18) */
.card.vectors tbody tr.mark td { border-bottom: 2px solid var(--muted); }
.card.vectors tbody tr[data-n] { cursor: pointer; }
.card.vectors tbody tr[data-n]:hover td { background: var(--accent-tint-strong); }
/* The current head-height row: solid accent, readable in light and dark (James, 2026-10-17). */
.card.vectors tbody tr.current td, .card.vectors tbody tr.current:hover td {
  background: var(--accent); color: #fff; font-weight: 700; }
/* ZX vs ZY: the form's data-vec-tab picks the table and the matching rows elsewhere. */
.dash:not([data-vec-tab="three"]) [data-panel="three"], .dash:not([data-vec-tab="three"]) [data-axis="three"],
.dash[data-vec-tab="three"] [data-panel="two"], .dash[data-vec-tab="three"] [data-axis="two"] { display: none !important; }
/* Patient positioning: step-by-step groups, then a closing banner. */
.positioning-sub { margin: 0; font-style: italic; }
.positioning-group .sub { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase;
                          letter-spacing: .04em; margin: .4rem -.9rem .3rem; padding: .25rem .9rem;
                          background: var(--surface-2); border-block: 1px solid var(--border); }
/* section headings: a full-width shaded band, edge to edge like the card titles (James, 2026-10-18) */
dl.summary.positioning { row-gap: .25rem; }
dl.positioning dt.step { grid-column: 1 / -1; color: var(--text); font-weight: 600; margin-top: .15rem; }
dl.positioning dd.step { display: none; }
dl.positioning dt.in { padding-left: .9rem; }
dl.summary.positioning:empty { display: none; }
/* "Mastoid support & neutral spine": a fold-out with the deck's steps (James, 2026-10-18). */
.setup-guide { margin: .15rem 0 .1rem; }
.setup-guide summary { cursor: pointer; font-weight: 600; color: var(--text); padding: .1rem 0; }
.setup-guide summary:hover { color: var(--accent); }
.setup-guide summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.setup-guide .guide-part { margin: .45rem 0 .15rem .9rem; color: var(--muted); font-size: .78rem; font-weight: 600;
                           text-transform: uppercase; letter-spacing: .04em; }
.setup-guide ol { margin: 0 0 .2rem; padding-left: 2.1rem; display: grid; gap: .2rem; font-size: .88rem; line-height: 1.4; }
/* The adjustment: head-angle boxes indented like the step rows; words instead in Directional view. */
.adjust-block .head-table { padding-left: .9rem; margin-bottom: .25rem; }
.adjust-block .instrument-setting { padding-left: .9rem; margin: .1rem 0 .3rem; }
/* label like "A/P angle"; the setting itself larger and centered (James, 2026-10-18) */
.adjust-block .instrument-setting dt { color: var(--muted); font-size: .92rem; font-weight: 400;
                                       text-transform: none; letter-spacing: 0; margin-top: .1rem; }
.adjust-block .instrument-setting dd { margin: .1rem 0 0; text-align: center; font-size: 1.2rem; }
/* "Z:" over "X:", values in one column, the pair centered (James, 2026-10-18) */
.adjust-block .instrument-setting dd.setting-grid { display: grid; grid-template-columns: auto auto auto auto; justify-content: center;
                                                    column-gap: .4rem; text-align: left; font-variant-numeric: tabular-nums; }
/* label | side | sign | number: the signs share a column and the numbers are right-aligned, so the
   decimal points line up too (James, 2026-10-20 — a gap between the sign and a short number is fine) */
.adjust-block .instrument-setting dd.setting-grid > span:first-child,
.adjust-block .instrument-setting dd.setting-grid > span:nth-child(5) { padding-right: .6rem; }   /* room after "Z:" / "X:" */
.adjust-block .instrument-setting dd.setting-grid > .setting-num { text-align: right; }
.dash:not([data-mode="simple"]) .simple-only { display: none; }
.card-body:has(#part-positioning .empty-state) .adjust-block { display: none; }
/* Measured factors and Types of patterns: rows indented under the card title (James, 2026-10-18). */
.practice-inputs .factor-table { padding-left: .9rem; }
[data-card="patterns"] .card-body { padding-left: .9rem; }
/* Figure colors popup. */
.fig-colors { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
              color: var(--text); padding: 1rem 1.1rem; width: min(22rem, calc(100vw - 2rem)); box-shadow: var(--shadow); }
.fig-colors::backdrop { background: rgba(0, 0, 0, .35); }
.fig-colors h3 { margin: 0 0 .7rem; font-size: .95rem; }
.fig-colors-hint { margin: -.3rem 0 .7rem; }
.fig-colors-list { display: grid; gap: .45rem; }
/* name | suggestion dots | color button — only the button opens the picker (James, 2026-10-19) */
.fig-color-row { display: flex; align-items: center; gap: .7rem; }
.fig-color-name { flex: 1 1 auto; }
.fig-color-picks { display: inline-flex; gap: .3rem; }
.fig-color-pick { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .3);
                  cursor: pointer; transition: transform .12s; }
.fig-color-pick:hover { transform: scale(1.25); }
.fig-color-pick.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); }   /* the one in use */
.fig-color-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fig-colors-list input[type="color"] { width: 3rem; height: 1.9rem; padding: 2px; border: 1px solid var(--border);
                                       border-radius: 6px; background: var(--surface-2); cursor: pointer; }
.fig-colors-actions { display: flex; justify-content: space-between; gap: .5rem; margin-top: .9rem; }
.positioning-close { margin: .2rem 0 0; padding: .5rem .75rem; border-radius: var(--radius);
                     background: var(--accent-tint); border-left: 3px solid var(--accent);
                     color: var(--text); font-size: .92rem; }
/* Head angles readout (the official vector). */
.head-vector { margin: 0; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.head-vector strong { color: var(--accent); }

/* ZX / ZY switch: the same pill buttons as Simple / Complex, so it reads as clickable. */
.vec-switch { margin-bottom: .6rem; align-self: flex-start; width: max-content; }
.card-head .vec-switch { margin: 0 0 0 auto; align-self: center; }
.card-head .vec-switch .vec-tab { padding-top: .15rem; padding-bottom: .15rem; font-size: .8rem; }
.vec-tab { background: transparent; border: 0; font: inherit; font-weight: 600; font-size: .92rem;
           min-width: 3.4rem; padding: .3rem .8rem; color: var(--muted); cursor: pointer; }
.vec-tab + .vec-tab { border-left: 1px solid var(--border); }
.vec-tab:hover { background: var(--accent-tint); color: var(--text); }
.vec-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash:not([data-vec-tab="three"]) .vec-tab[data-tab="two"],
.dash[data-vec-tab="three"] .vec-tab[data-tab="three"] { background: var(--accent); color: #fff; }

/* Generate + down arrow; the filters fold out beneath it (James, 2026-10-18). */
.gen-split { position: relative; display: inline-flex; }
.gen-split .gen-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gen-split .gen-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: .45rem; padding-right: .45rem;
                        border-left: 1px solid rgba(255, 255, 255, .35); display: inline-flex; align-items: center; }
.gen-split .gen-caret svg { transition: transform .15s; }
.gen-split .gen-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.dash-bar .gen-split .filters { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 40;
  flex-wrap: wrap; width: max-content; max-width: calc(100vw - 2rem); padding: .4rem 1rem .75rem;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), 0 8px 24px rgba(0, 0, 0, .25); }
.dash-bar .gen-split .filters[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .gen-split .gen-caret svg { transition: none; } }

/* Fields and buttons stand off the card a little (James, 2026-10-19: "they blur into the
   background — just needs to be subtle"): a hair-darker edge, a faint lift, and the unpicked
   direction letters in the text color rather than gray. */
.dash { --control-edge: #CBD0D7; --control-lift: 0 1px 2px rgba(16, 24, 40, .09), inset 0 1px 0 rgba(255, 255, 255, .7); }
:root[data-theme="dark"] .dash { --control-edge: #3B414B; --control-lift: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04); }
.dash .seg, .dash input[type="number"], .dash .btn-secondary, .dash .dash-bar .filters {
  border-color: var(--control-edge); box-shadow: var(--control-lift);
}
.dash .seg-opt + .seg-opt > span { border-left-color: var(--control-edge); }
.dash .seg-opt > span { color: var(--text); }
.dash input[type="number"]:focus, .dash .btn-secondary:hover { border-color: var(--accent); }

/* Every measured-factor row the same height in every view (James, 2026-10-19: the rows
   and buttons must not change between Directional and Magnitude). The name cell sets
   the row height, so a row without a number box is as tall as one with it; the rule
   row between FA and Co/Ax has no name and stays thin. */
.practice-inputs .factor-line > .factor-name { display: inline-flex; align-items: center; min-height: 36px; }

/* cFAC side: a ghost L/R pair, buttons invisible, only the computed letter showing — so it sits
   exactly under FAC's L or R (James, 2026-10-19). The dash before FAC is in sits in a third slot. */
.dash .seg-calc { border-color: transparent; background: transparent; box-shadow: none; pointer-events: none; }
.dash .seg-calc .seg-opt + .seg-opt > span { border-left-color: transparent; }
.seg-calc .seg-opt > span { visibility: hidden; }
.seg-calc .seg-opt > span.is-on { visibility: visible; color: var(--text); }
.seg-calc .seg-none { position: absolute; left: 0; top: 0; }
.seg-calc .seg-none > span { visibility: visible; color: var(--muted); font-weight: 600; }

/* ---- Practice check (backlog #35) -------------------------------------------------------
   While an answer is hidden (the top eye, or a card's answers eye) its row shows pick buttons in
   place of the blank bar; Check marks each part right (green ring) or wrong (red ring) and writes
   the right answer beside a miss. Amount buttons show from the Magnitude level, the < / >
   modifier only at Modifications: the same parts the score counts. */
.dash .quiz-dd { display: none; margin: 0; }
.dash[data-answer="hidden"] .quiz-dd, .dash .board-card.answers-off .quiz-dd { display: block; }
.dash[data-answer="hidden"] .ans, .dash .board-card.answers-off .ans { display: none !important; }
.quiz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; max-width: 100%; }
/* Pick buttons wrap inside a narrow card instead of running past its edge (James, 2026-10-26). */
.dash dl.summary dd.quiz-dd { min-width: 0; }
.dash .seg.seg-quiz { flex-wrap: wrap; max-width: 100%; gap: .25rem; border: 1px solid transparent; background: none;
                      box-shadow: none; overflow: visible; border-radius: .5rem; }
.dash .seg.seg-quiz .seg-opt > span { border: 1px solid var(--control-edge); border-radius: .4rem; box-shadow: var(--control-lift); }
.dash .seg.seg-quiz.q-ok, .dash .seg.seg-quiz.q-bad { padding: .15rem; }
.dash .seg.seg-quiz.q-ok { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
.dash .seg.seg-quiz.q-bad { border-color: var(--danger, #e53935); box-shadow: 0 0 0 1px var(--danger, #e53935); }
.subtype-line .quiz-dd { flex-wrap: wrap; max-width: 100%; }
.seg.seg-quiz .seg-opt > span { min-width: 2rem; padding: .18rem .5rem; font-size: .85rem; font-weight: 600; }
.dash[data-mode="simple"] .q-amt, .dash[data-mode="simple"] .q-mod, .dash[data-mode="magnitude"] .q-mod { display: none; }
.seg.seg-quiz.q-ok { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
.seg.seg-quiz.q-bad { border-color: var(--danger, #e53935); box-shadow: 0 0 0 1px var(--danger, #e53935); }
.q-mark { font-weight: 800; font-size: 1rem; line-height: 1; }
.q-mark.ok { color: var(--success); }
.q-mark.bad { color: var(--danger, #e53935); }
.q-want { font-size: .85rem; font-weight: 600; color: var(--success); white-space: nowrap; }
.subtype-line .quiz-dd { display: none; margin-left: .35rem; }
/* Test hides the whole subtype line (James, 2026-10-28); Study shows the answer. */
.dash[data-answer="hidden"] .subtype-line, .dash .board-card.answers-off .subtype-line { display: none; }
/* The Check button and score live in the top bar, only while something is hidden. */
.btn-check, .score-pill { display: none; }
.dash[data-quiz="on"] .btn-check { display: inline-flex; }
.dash[data-quiz="on"] .score-pill:not(:empty) { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; }
.score-num { font-weight: 800; font-variant-numeric: tabular-nums; }
.score-band { padding: .15rem .6rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .82rem; }
.score-band.band-master { background: var(--success-tint); color: var(--success); }
.score-band.band-close { background: var(--accent-tint); color: var(--accent); }
.score-band.band-revisit { background: var(--warning-tint); color: var(--warning); }
.score-band.band-low { background: var(--surface-2); color: var(--muted); }
.score-mastered, .score-note { color: var(--muted); font-size: .85rem; }

/* ---- Classroom (backlog #34) ----------------------------------------------------------- */
.room-bar { padding: .5rem .9rem; }
.room-zone { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.room-zone .room-name { font-size: 1rem; }
.room-select { max-width: 16rem; }
.room-pill { padding: .1rem .55rem; border-radius: var(--radius-pill); background: var(--accent); color: #fff;
             font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.room-poll { display: none; }
.room-students { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.room-student { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .7rem;
                border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2);
                font-size: .9rem; }
.room-student.has-result { background: var(--surface); }
.room-student-name { font-weight: 600; }
.room-empty { margin: 0; }
/* A student's screen: the teacher drives the case, so the case controls step aside. */
.dash[data-room-role="student"] .gen-split, .dash[data-room-role="student"] .btn-test,
.dash[data-room-role="student"] .seg-mode, .dash[data-room-role="student"] [data-board-edit],
.dash[data-room-role="student"] button[name="action"] { display: none !important; }
.dash[data-room-role="student"] #part-measured .seg-opt, .dash[data-room-role="student"] #part-measured input,
.dash[data-room-role="student"] input[name^="head_"] { pointer-events: none; }
.dash[data-room-role="student"] .seg-opt input:disabled + span { opacity: 1; cursor: default; }
.dash[data-room-role="student"] #live-mastoid [data-handle] { pointer-events: none; }
/* Classroom page */
.room-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1rem; }
.room-card h2 { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.room-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.room-join .field, .room-start .field { max-width: 22rem; margin-bottom: .7rem; }
.room-start { margin-top: 1rem; }
.room-list { list-style: none; margin: 0; padding: 0; }
.room-row { display: flex; align-items: center; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.room-row .room-name { font-weight: 600; }
.room-row .btn { margin-left: auto; }

/* ---- Stick figure the student draws (backlog #36) ---------------------------------------- */
.draw-box { display: none; }
.dash[data-answer="hidden"] .draw-box, .board-card.answers-off .draw-box { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.draw-hint { margin: 0; text-align: center; font-size: .85rem; }
.draw-row { display: grid; grid-template-columns: 1fr 2.9rem auto 2.9rem 1fr; grid-template-rows: auto var(--fig-row, auto);
            align-items: center; gap: .2rem .3rem; width: 100%; }
.draw-row .draw-hint { grid-column: 1 / -1; grid-row: 1; }
.draw-col { grid-column: 1; grid-row: 2; justify-self: end; }
.draw-tools { flex: 0 0 auto; }
.draw-canvas { grid-column: 3; grid-row: 2; position: relative; width: 10.4rem; min-width: 0; }
.draw-svg svg { display: block; width: 100%; height: auto; }
.draw-svg { pointer-events: none; }
.draw-half { position: absolute; top: 0; bottom: 0; width: 50%; border: 0; background: transparent; cursor: pointer;
             padding: 0; border-radius: var(--radius, 8px); }
.draw-left { left: 0; }
.draw-right { right: 0; }
/* FA: the top and bottom halves (above / below the atlas line) instead of left and right. */
.draw-top, .draw-bottom { display: none; left: 0; width: 100%; }
.draw-top { bottom: 50%; }
.draw-bottom { top: 50%; }
.draw-canvas[data-how="HL"] .draw-left, .draw-canvas[data-how="HL"] .draw-right { display: none; }
.draw-canvas[data-how="HL"] .draw-top, .draw-canvas[data-how="HL"] .draw-bottom { display: block; }
/* The light sits on ::before, so cFAC lights only its upper quadrant, FAS and FAx their lower one. */
.draw-half::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.draw-half:hover::before { background: var(--accent-tint); }
.draw-canvas[data-how="up"] .draw-half::before { bottom: 50%; }
.draw-canvas[data-how="down"] .draw-half::before { top: 50%; }
.draw-half:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* In a card with a set height the drawing shrinks to the room left, instead of scrolling (James, 2026-10-28). */
@media (min-width: 1200px) {
  .board-card.is-fixed .draw-box, .board-card.is-stretched .draw-box,
  .board-card.is-fixed .draw-row, .board-card.is-stretched .draw-row { flex: 1 1 auto; min-height: 0; }
  .board-card.is-fixed .draw-row .draw-canvas, .board-card.is-stretched .draw-row .draw-canvas {
    flex: 1 1 0; min-height: 4rem; display: flex; justify-content: center; }
  .board-card.is-fixed .draw-svg, .board-card.is-stretched .draw-svg { height: 100%; }
  .board-card.is-fixed .draw-svg svg, .board-card.is-stretched .draw-svg svg {
    display: block; height: 100%; width: auto; max-width: 100%; }
}
.draw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.draw-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .9rem; }
.draw-marks li { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }

/* The stick figure's two styles (James, 2026-10-26), the student's pick while the answers are
   hidden: Lines (draw it) or Quadrants (write the factors on a cross). */
/* One button flips the style; it shows the view it switches to (James, 2026-10-31). */
.card-head .fig-style { margin-left: auto; }
.card-head .fig-clear { display: none; margin-left: auto; }
.dash[data-answer="hidden"] .card-head .fig-clear, .board-card.answers-off .card-head .fig-clear { display: inline-flex; }
.dash[data-answer="hidden"] .card-head .fig-clear + input + .fig-style,
.board-card.answers-off .card-head .fig-clear + input + .fig-style { margin-left: 0; }
.card-head .fig-style + .fig-menu { margin-left: 0; }
.fig-style svg { display: block; }
.fig-style .fig-style-lines, .dash[data-figure="quad"] .fig-style .fig-style-quad { display: none; }
.dash[data-figure="quad"] .fig-style .fig-style-lines { display: block; }
.dash[data-figure="quad"] .draw-box { display: none; }
.read-box { display: none; }
.dash[data-answer="hidden"][data-figure="quad"] .read-box,
.dash[data-figure="quad"] .board-card.answers-off .read-box { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin-top: .6rem; }
/* With the answers showing, the Quadrants style shows the answer as the cross, not the lines (James, 2026-10-27). */
.board-card .cross-box { display: none; }
.dash[data-figure="quad"] #live-figure { display: none; }
.dash[data-figure="quad"] .board-card .cross-box { display: flex; }
.dash[data-answer="hidden"] .board-card .cross-box, .dash .board-card.answers-off .cross-box { display: none; }
.cross-view .read-grid { grid-column: 2; }
.cross-view .read-end { grid-column: 3; }
.cross-view[data-end="L"] .read-end { grid-column: 1; }
.cross-view .read-quad { cursor: default; }
.cross-view .read-quad:hover { background: transparent; }
.cross-view .read-cycle { cursor: default; }
.read-hint { grid-column: 1 / -1; grid-row: 1; margin: 0 0 .2rem; text-align: center; font-size: .85rem; }
/* Phone / tablet: five fixed columns, factors | buttons if cFAC is left | cross | buttons if cFAC is right |
   blank, so the cross never moves when cFAC changes side (James, 2026-11-01). */
.read-cross { display: grid; grid-template-columns: 1fr 2.9rem auto 2.9rem 1fr; grid-template-rows: auto var(--fig-row, auto);
             align-items: center; gap: .2rem .3rem; width: 100%; }
.read-grid { grid-column: 3; grid-row: 2; display: grid; grid-template-columns: 3.6rem 3.6rem; grid-template-rows: 3.6rem 3.6rem; position: relative; }
.read-grid::before, .read-grid::after { content: ""; position: absolute; background: var(--text); pointer-events: none; }
/* The cross in the figure's colors (James, 2026-10-28): FC up, FS down, FA across; the chips match their lines. */
.read-grid::before { left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
                     background: linear-gradient(to bottom, var(--chart-acd) 50%, var(--chart-cs) 50%); }
.read-grid::after { top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--chart-fa); }
.read-chip.read-chip-cfac { color: var(--chart-acd); border-color: color-mix(in srgb, var(--chart-acd) 55%, var(--border)); }
.read-chip.read-chip-fas { color: var(--chart-cs); border-color: color-mix(in srgb, var(--chart-cs) 55%, var(--border)); }
.read-chip.read-chip-fax { color: var(--chart-axsp); border-color: color-mix(in srgb, var(--chart-axsp) 55%, var(--border)); }
/* Show terms names the two arms, beside their ends. */
.read-arm { position: absolute; left: 50%; margin-left: .3rem; font-size: .72rem; font-weight: 700; line-height: 1; pointer-events: none; }
.read-arm-fc { top: 0; color: var(--chart-acd); }
.read-arm-fs { bottom: 0; color: var(--chart-cs); }
.read-quad { display: grid; grid-template-rows: 1fr 1fr; place-items: center; gap: .2rem; border: 0; border-radius: .4rem;
             background: transparent; cursor: pointer; padding: .3rem; color: var(--text); font: inherit; }
.read-quad:hover { background: var(--accent-tint); }
.read-quad.is-at { background: var(--accent-tint); outline: 2px solid var(--accent); outline-offset: -2px; }
.read-quad:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The quadrants stay square; FAx always on the top row of its quadrant and FAS on the bottom row,
   even in different quadrants (James, 2026-10-27). cFAC sits in the middle of its own. */
.read-chip-fax { grid-row: 1; }
.read-chip-fas { grid-row: 2; }
.read-chip-cfac { grid-row: 1 / span 2; }
.read-pick .seg-opt span.is-done { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
.read-pick .seg-opt.is-on span { background: var(--accent); color: #fff; }
.read-left { grid-column: 1; grid-row: 2; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.read-pick { min-width: max-content; }
.draw-tools { min-width: max-content; }
.read-cycle { min-width: 3rem; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: .45rem; background: var(--surface);
              color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.read-cycle:hover { background: var(--accent-tint); color: var(--text); }
.read-cycle.is-set { background: var(--accent); border-color: var(--accent); color: #fff; }
.read-cycle.q-ok { box-shadow: 0 0 0 2px var(--success); }
.read-cycle.q-bad { box-shadow: 0 0 0 2px var(--danger, #e53935); }
.read-pick .seg-opt { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; }
.read-chip { font-weight: 700; font-size: .85rem; padding: .05rem .3rem; border-radius: .35rem; background: var(--surface); border: 1px solid var(--border); }
.read-chip.q-ok { border-color: var(--success); box-shadow: 0 0 0 1px var(--success); }
.read-chip.q-bad { border-color: var(--danger, #e53935); box-shadow: 0 0 0 1px var(--danger, #e53935); }
.read-end { grid-row: 2; grid-column: 4; display: flex; flex-direction: column; gap: .3rem; justify-self: start; }
.read-cross[data-end="L"] .read-end { grid-column: 2; justify-self: end; }
.read-end .read-end-row { flex-direction: column; align-items: center; gap: .1rem; }
.read-end .read-term { font-size: .72rem; line-height: 1; }
.read-end .read-cycle { min-width: 2.6rem; }
/* Waiting on cFAC: only the unset buttons dim; a set one stays the bright blue (James, 2026-10-27). */
.read-end.is-waiting .read-cycle:not(.is-set) { opacity: .55; }
/* On a computer the question buttons run across, above the figure, and the cross holds the middle of the
   card: the FA / HAC buttons take the cFAC side without pushing it over (James, 2026-10-27). */
@media (min-width: 1200px) {
  .draw-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: .45rem; }
  .draw-col { display: contents; }
  .draw-canvas { max-width: 22rem; }
  .draw-row .draw-hint { order: 0; flex: none; }
  .draw-row .draw-tools { order: -1; }
  .read-grid { grid-template-columns: 4.6rem 4.6rem; grid-template-rows: 4.6rem 4.6rem; }
  .read-hint { grid-row: 2; }
  .draw-row .draw-canvas { flex: none; width: 100%; }
  .seg-vert { flex-direction: row; border-radius: var(--radius-pill); }
  .seg-vert .seg-opt + .seg-opt > span { border-top: 0; border-left: 1px solid var(--border); }
  .read-cross { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .read-cycle { min-width: 2.4rem; }
  .read-end .read-end-row, .read-cross[data-end="R"] .read-end .read-end-row { flex-direction: column; align-items: center; gap: .1rem; }
  .read-end .read-term { font-size: .72rem; line-height: 1; }
  .read-left { display: contents; }
  .read-pick { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin: 0 0 .1rem; }
  .read-grid { grid-column: 2; grid-row: 3; }
  .read-end, .read-cross[data-end="L"] .read-end { grid-row: 3; }
  .read-cross[data-end="R"] .read-end { grid-column: 3; justify-self: start; }
  .read-cross[data-end="L"] .read-end { grid-column: 1; justify-self: end; }
}
.read-end-row { display: flex; align-items: center; gap: .3rem; }
.read-term { font-weight: 700; font-size: .8rem; }
.read-term-fa { color: var(--chart-fa); }
.read-term-hac { color: var(--chart-hac-fill); }
/* An A above the atlas line on the anterior side, and FA's + / − below it on the cFAC side (James, 2026-10-26). */
.draw-ap, .draw-sign { position: absolute; font-weight: 800; font-size: 1rem; line-height: 1; pointer-events: none; }
.draw-ap { top: calc(50% - 1.2rem); color: var(--chart-hac-fill, var(--accent)); }
.draw-sign { top: calc(50% + .05rem); color: var(--chart-fa, var(--accent)); font-size: 1.4rem; }
.draw-ap-r { right: 6%; }
.draw-ap-l { left: 6%; }

/* Phone and tablet (one column): the stick figure comes right after the measured factors, and
   stays short enough that both fit on the screen together (James, 2026-10-26). */
@media (max-width: 1199px) {
  .board > .board-card { order: 2; }
  .board > .board-card[data-card="measured"] { order: 0; }
  .board > .board-card[data-card="figure"] { order: 1; }
  #live-figure svg { height: 22vh; width: auto; max-width: 100%; margin: 0 auto; display: block; }
  .board-card[data-card="measured"] .factor-table { row-gap: .2rem; }
  .board-card[data-card="measured"] .seg-opt span, .board-card[data-card="measured"] input[type="number"] { padding-top: .3rem; padding-bottom: .3rem; }
  .draw-hint { font-size: .8rem; }
  .read-grid { grid-template-columns: 5.2rem 5.2rem; grid-template-rows: 5.2rem 5.2rem; }
  .draw-box { gap: .3rem; }
  .dash[data-answer="hidden"][data-figure="quad"] .read-box,
  .dash[data-figure="quad"] .board-card.answers-off .read-box { margin-top: .2rem; gap: .2rem; }
  .dash[data-answer="hidden"] .draw-box, .board-card.answers-off .draw-box { margin-top: .2rem; gap: .2rem; }
  .read-hint { margin: 0; font-size: .8rem; }
  /* Lines and the cross share one row height, factors top-aligned, so the origin and the factors sit in the
     same place in both styles (James, 2026-11-01). */
  .draw-row, .read-cross { --fig-row: 10.4rem; }
  .draw-col, .read-left { align-self: start; }
  /* Lines as long as the cross's arms (James, 2026-11-01): the atlas line (±90 of the figure's 212 wide) spans
     the cross's width, and FC / FS are cut at its height. Only the top and bottom are cut, so the side letter
     can still show beside it. */
  .draw-canvas { height: 10.4rem; clip-path: inset(0 -4rem); }
  /* The figure is drawn 0.9 as tall as wide (the workbook chart's shape); stretched back here so FC and FS
     reach as far as the atlas line does. */
  .draw-svg { position: absolute; left: 50%; top: 50%; width: calc(10.4rem * 212 / 180); transform: translate(-50%, -50%) scaleY(1.1111); }
}
/* A question already answered stays shaded, so the open ones stand out (James, 2026-10-26). */
.draw-tools .seg-opt input:not(:checked) + span.is-done { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }

/* Profile menu in the header (James, 2026-11-01): name, account, Feedback, About, Sign Out; on a phone also
   light / dark, and the terminology once the top bar goes to icons. */
.prefs-menu { display: block; }
.prefs-menu .prefs-row { display: none; }   /* in the top bar on a computer */
.topbar-right .topbar-signout { display: none; }   /* Sign Out is in the profile menu (James, 2026-11-01) */
/* Menu items, not links (James, 2026-11-01): full-width rows that tint on hover. */
.prefs-links { display: grid; gap: .1rem; margin: 0 -.4rem; }
.prefs-links a { display: block; padding: .4rem .5rem; border-radius: .45rem; color: var(--text); font-size: .92rem;
                 text-decoration: none; text-align: right; }
.prefs-links a:hover, .prefs-links a:focus-visible { background: var(--accent-tint); color: var(--text); text-decoration: none; }
.prefs-menu > summary { list-style: none; cursor: pointer; }
.prefs-menu > summary::-webkit-details-marker { display: none; }
.prefs-menu[open] > summary { color: var(--accent); background: var(--accent-tint); }
.prefs-panel { position: fixed; top: 3.6rem; right: .6rem; z-index: 60; display: grid; gap: .55rem;
               min-width: 15rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--border);
               border-radius: .7rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.prefs-who { display: grid; padding-bottom: .45rem; border-bottom: 1px solid var(--border); }
.prefs-who span { color: var(--muted); font-size: .8rem; }
.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.prefs-row[hidden] { display: none; }
.prefs-label { color: var(--muted); font-size: .85rem; }
.prefs-panel button.seg-opt { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.prefs-panel .seg-opt[aria-pressed="true"] > span { background: var(--accent); color: #fff; }
.prefs-signout { margin: 0; justify-self: end; }
@media (max-width: 600px) {
  .prefs-menu .prefs-row { display: flex; }
  .prefs-menu .prefs-row[hidden] { display: none; }
  .topbar-right [data-theme-toggle] { display: none; }
}

/* Account page (James, 2026-11-01): labels left, fields right, tight rows. */
a.who { text-decoration: none; }
a.who:hover strong { color: var(--accent); }
.about-list { display: grid; grid-template-columns: 10rem 1fr; gap: .3rem .8rem; margin: .3rem 0 0; }
.about-list dt { color: var(--muted); }
.about-list dd { margin: 0; }
.account-field textarea, .account-field select { width: 100%; max-width: 22rem; }
.account-wrap { max-width: 34rem; margin: 1.2rem auto; display: grid; gap: .9rem; }
.account-title { margin: 0; font-size: 1.3rem; }
.account-card { margin: 0; padding: .9rem 1.1rem 1rem; }
.account-card h2 { margin: 0 0 .3rem; font-size: 1rem; }
.account-card > .meta { margin: 0 0 .6rem; }
.account-form { display: grid; grid-template-columns: 10rem 1fr; align-items: center; gap: .45rem .8rem; }
.account-form label { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.account-field input { width: 100%; max-width: 18rem; }
.account-field .errorlist { margin: .15rem 0 0; padding: 0; list-style: none; color: var(--error); font-size: .82rem; }
.account-done { margin: 0 0 .6rem; color: var(--success, var(--accent)); font-weight: 600; font-size: .9rem; }
@media (max-width: 420px) {
  .account-form { grid-template-columns: 1fr; gap: .2rem; }
  .account-form > span { display: none; }
  .account-form .account-field { margin-bottom: .35rem; }
}

/* Cramped toolbar (James, 2026-11-01): Generate, Clear and Check become dice, eraser and check mark, the levels
   icons, and the terminology moves into the profile menu. html.bar-compact is set by the page script when the
   words would wrap. */
.dash-bar .bar-icon { display: none; }
html.bar-compact .dash-bar .bar-icon { display: block; }
html.bar-compact .dash-bar .bar-word { display: none; }
html.bar-compact .dash-bar .gen-main, html.bar-compact .dash-bar button[value="clear"], html.bar-compact .dash-bar .btn-check {
  padding-left: .6rem; padding-right: .6rem; display: inline-flex; align-items: center; justify-content: center; }
html.bar-compact .dash-bar .seg-terms { display: none; }
html.bar-compact .prefs-menu [data-prefs-terms-row]:not([hidden]) { display: flex; }

/* Full screen (James, 2026-11-01): one card fills the screen; < > / swipe move between cards. The figure and
   the cross grow to fit (--q is one quadrant's side), with the factors beside them, not above. */
.card-max .max-shut, .card-max[aria-pressed="true"] .max-open { display: none; }
.card-max[aria-pressed="true"] .max-shut { display: block; }
.card-max[aria-pressed="true"] { color: var(--accent); background: var(--accent-tint); }
html.card-max-open, html.card-max-open body { overflow: hidden; }
html.card-max-open .board { transform: none !important; }   /* a transform would pin the full-screen card inside the board */
.board-card.is-max { position: fixed !important; inset: 0; z-index: 90; width: auto !important; height: auto !important;
  max-height: none !important; margin: 0 !important; border-radius: 0; overflow: auto; padding-bottom: 4.5rem;
  display: block !important; --q: clamp(5.2rem, min(33vh, calc((100vw - 16rem) / 2)), 20rem); }
.board-card.is-max .card-head { position: sticky; top: -.65rem; z-index: 2; border-radius: 0; }
.board-card.is-max .card-resize { display: none; }
.board-card.is-max .card-body { display: block !important; max-width: 80rem; margin: 0 auto; height: auto !important; overflow: visible !important; }
.is-max .draw-ap { font-size: calc(var(--q) * .14); }   /* placed on the atlas line end by the page script */
.is-max .draw-sign { font-size: calc(var(--q) * .2); }
.max-nav { position: fixed; left: 50%; bottom: .8rem; transform: translateX(-50%); z-index: 95; display: flex; align-items: center;
  gap: .6rem; padding: .3rem .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.max-nav[hidden] { display: none; }
.max-step { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 0;
  border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.max-step:hover { filter: brightness(1.1); }
.max-where { display: grid; justify-items: center; gap: .2rem; min-width: 8.5rem; }
.max-name { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.max-dots { display: flex; gap: .3rem; }
.max-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--border); }
.max-dot.is-on { background: var(--accent); }
.max-tip { position: absolute; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: .35rem .7rem; border-radius: .5rem; background: var(--accent); color: #fff; font-size: .82rem; font-weight: 600; }
.max-tip[hidden] { display: none; }
/* the figure, full screen: the five columns at any width */
.is-max .draw-row, .is-max .read-cross { display: grid; grid-template-columns: 1fr 4.4rem auto 4.4rem 1fr;
  grid-template-rows: auto calc(2 * var(--q)); align-items: center; gap: .4rem .6rem; }
.is-max .draw-row .draw-hint, .is-max .read-hint { grid-column: 1 / -1; grid-row: 1; font-size: 1rem; margin: 0; }
.is-max .draw-col, .is-max .read-left { display: flex; flex-direction: column; align-items: center; gap: .35rem;
  grid-column: 1; grid-row: 2; justify-self: end; align-self: start; }
.is-max .seg-vert { flex-direction: column; border-radius: .7rem; }
.is-max .seg-vert .seg-opt + .seg-opt > span { border-left: 0; border-top: 1px solid var(--border); }
.is-max .seg-vert .seg-opt > span { font-size: 1.05rem; padding: .45rem .8rem; }
.is-max .read-pick { grid-column: auto; grid-row: auto; margin: 0; }
.is-max .draw-canvas { grid-column: 3; grid-row: 2; width: calc(2 * var(--q)); height: calc(2 * var(--q)); max-width: none;
  clip-path: inset(0 -40vw); flex: none; }
.is-max .draw-svg { position: absolute; left: 50%; top: 50%; width: calc(2 * var(--q) * 212 / 180); height: auto !important; max-width: none;
  transform: translate(-50%, -50%) scaleY(1.1111); }
.is-max .draw-svg svg { width: 100% !important; height: auto !important; max-width: none; }
.is-max .read-grid { grid-column: 3; grid-row: 2; grid-template-columns: var(--q) var(--q); grid-template-rows: var(--q) var(--q); }
.is-max .read-end, .is-max .read-cross[data-end="R"] .read-end { grid-column: 4; grid-row: 2; justify-self: start; }
.is-max .read-cross[data-end="L"] .read-end { grid-column: 2; grid-row: 2; justify-self: end; }
.is-max .read-chip { font-size: 1.25rem; padding: .15rem .5rem; }
.is-max .read-grid::before { width: 4px; margin-left: -2px; }
.is-max .read-grid::after { height: 4px; margin-top: -2px; }
.is-max .read-arm { font-size: 1.1rem; }
.is-max .read-end .read-term { font-size: .95rem; }
.is-max .read-cycle { font-size: 1.15rem; min-width: 3.4rem; padding: .45rem .6rem; white-space: nowrap; }
.is-max #live-figure svg { height: min(72vh, 90vw); width: auto; max-width: 100%; margin: 0 auto; display: block; }
.is-max .cross-view .read-grid { grid-template-columns: var(--q) var(--q); grid-template-rows: var(--q) var(--q); }
.is-max #live-mastoid svg { height: min(70vh, 90vw); width: auto; max-width: 100%; margin: 0 auto; display: block; }
.is-max .fig-stick, .is-max .fig-mastoid { max-width: none; }
/* On the board, the cross grows with the card's width too (a teacher can widen it to show the class). */
@media (min-width: 1200px) {
  .board-card[data-card="figure"] { container-type: inline-size; }
  .board-card[data-card="figure"]:not(.is-max) .read-grid { --qb: max(4.6rem, min(20cqi, 22vh));
    grid-template-columns: var(--qb) var(--qb); grid-template-rows: var(--qb) var(--qb); }
  .board-card[data-card="figure"]:not(.is-max) .draw-canvas { max-width: max(22rem, 70cqi); }
}

/* The top bar (toolbar) always stays on screen, so Test and Check are a tap away from any card; the header
   slides up out of the way while scrolling down and comes back on scrolling up (James, 2026-11-01). */
.student .topbar { transition: transform .3s ease-in-out; }
html.topbar-hidden .student .topbar { transform: translateY(-100%); }
.dash > .dash-bar { position: sticky; top: var(--topbar-h); z-index: 30; transition: top .3s ease-in-out;
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .45); }
html.topbar-hidden .dash > .dash-bar { top: 0; }
@media (prefers-reduced-motion: reduce) { .student .topbar, .dash > .dash-bar { transition: none; } }

/* View: Angles / Quadrants in the figure menu (James, 2026-11-01). */
.fig-view button.seg-opt { border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.fig-view .seg-opt[aria-pressed="true"] > span { background: var(--accent); color: #fff; }