/* homeschool.html — the page's own rules. Moved out of its inline <style>
   (Phase 8 of the shell plan, 2026-10-11); linked where the block stood, so
   the cascade order is unchanged. Shared looks live in style.css /
   doorway.css — a rule here is this page's alone. */

/* The shell — rail, top bar, crumb trail, drawer — belongs to
   app-header.js now (`<body data-app-shell>` below), so ~170 lines that
   lived here are in style.css, scoped under that attribute.

   ⚠️ The muted-text token STAYS: it is used by this page's own small text
   (tiles, table sub-lines), not only by the chrome. var(--ink-3) measures
   ~2.9:1 on the cream card, which axe flags serious at these sizes. */
:root { --hms-mut: #5a5a6e; }

.page-title { margin: 0 0 2px; }
/* A state's heading is its message ("No homeschool family linked yet"),
   not the page's title — so it is NOT .page-title, which the shell hides
   (the crumb is the title). As .page-title it left a parent who reached
   one of these states looking at an emoji and nothing else (Phase 3s). */
.hms-state-title { font-size: 1.2rem; margin: 0 0 6px; }
.page-subtitle { margin: 0 0 18px; }

/* ── Page header ────────────────────────────────────────────────────── */
.hms-pagehead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hms-pagehead .page-subtitle { margin: 0; max-width: 66ch; }
.hms-acts { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }

/* ── Roster ─────────────────────────────────────────────────────────── */
/* The toolbar is the shared .page-toolbar (Phase 3s); these rules keep
   only what this page's controls need beyond it. */
.hmsp-toolbar input[type="search"] { flex: 0 1 320px; }
/* The sort select sits with the search box, before the filter tiles —
   matching the six roster pages, where the control that re-orders the
   table lives beside the one that narrows it. */
/* ⚠️ `width: auto` is LOAD-BEARING, not tidiness. revival-ui.css styles bare
   `select` with a full width, it is served from assets.revival.tv and loads
   AFTER this page's <style>, and a rule that declares no `width` of its own
   simply inherits it — so the select rendered 1000px wide on its own row,
   pushing the filter tiles down a line. (The stylesheet is cross-origin, so
   `document.styleSheets` cannot enumerate it: the rule is invisible to a
   DevTools-style probe and only the computed width gives it away.) The
   `.app-menu` collision recorded in CLAUDE.md is the same hazard on a class
   name; this is its bare-element twin. */
.hmsp-toolbar select { width: auto; max-width: 100%; cursor: pointer; }
.hmsp-toolbar select:focus-visible { outline: 2px solid var(--accent, #1f4e5f); outline-offset: 1px; }

.hmp-tabs .hmsp-tile .n { font-weight: 700; color: var(--ink); margin-right: 5px; font-variant-numeric: tabular-nums; }
/* .hmsp-tile is the Photos view's tab and student pills now; the four
   filtering views draw .stat-tile doors and the filter bar's chip row
   (Phase 4d2). */

/* The table is the shared .data-table (style.css, 2026-10-11); the scroll box is .data-table-scroll; only the rows' own layout is here. */
/* The severity rail: colour is never the only signal — the Paperwork
   column says the same thing in words. */
.hmsp-row td:first-child { box-shadow: inset 3px 0 0 transparent; }
.hmsp-row.is-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn, #9a5800); }
.hmsp-row.is-idle td:first-child { box-shadow: inset 3px 0 0 var(--ink-3); }
.hmsp-cell-name { display: flex; align-items: center; gap: 10px; }
.hmsp-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--border); background: var(--bg-subtle, #f1f1f4); }
.hmsp-who { min-width: 0; }
.hmsp-row-name { font-weight: 600; display: block; }
.hmsp-row-name a { color: inherit; text-decoration: none; }
.hmsp-row-name a:hover { text-decoration: underline; }
.hmsp-row-sub { font-size: .76rem; color: var(--hms-mut); margin-top: 1px; display: block; }
.hmsp-mut { font-size: .76rem; color: var(--hms-mut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hmsp-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.hmsp-go { white-space: nowrap; }
td.hmsp-act { text-align: right; }
/* The shared cluster (style.css) is a flex row; on a table it hugs the
   right edge with the balance column, and on the stacked mobile layout
   below it goes back to reading left with the rest of the card. */
td.hmsp-act .row-acts { justify-content: flex-end; }


/* ── Family detail ──────────────────────────────────────────────────── */
.hmsd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 18px; align-items: start; }
.hmsd-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 68px; }
.hmsd-side .hmsd-card { margin-bottom: 0; padding: 13px 15px; }
.hmsd-side-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hms-mut); font-weight: 600; margin: 0 0 9px; }
.hmsd-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .84rem; }
.hmsd-stat + .hmsd-stat { border-top: 1px solid var(--border); }
.hmsd-stat b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.hmsd-stat b.warn { color: #8a4b09; }
.hmsd-sideacts { display: flex; flex-direction: column; gap: 7px; }
.hmsd-sideacts .rui-btn { width: 100%; justify-content: center; }

.hmsd-paper { font-size: .78rem; color: var(--hms-mut); margin: 0 0 10px; }
.hmsd-paper .miss { color: #8a4b09; font-weight: 600; }
.hmsd-household { font-size: .8rem; color: var(--hms-mut); background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px 13px; margin-bottom: 14px; }
.hmsd-strip { background: #fdf3e4; color: #7a4f0e; border: 1px solid #f0ddb8; border-radius: var(--radius); padding: 9px 13px; font-size: .82rem; margin-bottom: 14px; }
.hmsd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hmsd-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--border); background: var(--bg-subtle, #f1f1f4); }
.hmsd-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(14px, 3vw, 20px); margin-bottom: 12px; }
.hmsd-student-h { font-weight: 600; margin: 0 0 8px; font-size: 1rem; }
.hmsd-recs { display: flex; flex-direction: column; gap: 6px; }
.hmsd-rec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: .9rem; background: #fff; }
.hmsd-rec-t { font-weight: 600; }
.hmsd-rec-m { color: var(--hms-mut); font-size: .8rem; }
.hmsd-rec-acts { margin-left: auto; display: flex; gap: 6px; }
.hmsd-empty { color: var(--hms-mut); padding: 6px 2px; }

/* New-form panel — labels are sentences, not captions (style.css
   uppercases <label>). */
.hmsd-card label.hms-label { display: block; text-transform: none; letter-spacing: normal; font-weight: 600; font-size: .82rem; margin-bottom: 4px; color: var(--ink); }
.hms-newgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
/* display:grid outranks the UA's [hidden] rule — the F2 defect; every
   display-setting rule owes its [hidden] companion. */
.hms-newgrid[hidden] { display: none; }
.hms-newgrid input, .hms-newgrid select, .hms-form input, .hms-form select, .hms-form textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; background: #fff; box-sizing: border-box;
}
.hms-formpick { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.hms-formpick > div { flex: 1 1 240px; }

/* ── Form editor ────────────────────────────────────────────────────── */
.hms-form-section { margin-bottom: 18px; }
.hms-form-section h2 { font-size: 1rem; margin: 0 0 8px; }
.hms-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.hms-fields .full { grid-column: 1 / -1; }
.hms-hint { font-size: .75rem; color: var(--hms-mut); margin-top: 2px; }
.hms-tablewrap { overflow-x: auto; }
table.hms-grid { border-collapse: collapse; width: 100%; font-size: .88rem; }
.hms-grid th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hms-mut); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.hms-grid td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--bg-subtle, #f1f1f4); }
.hms-grid td.rowlabel { font-weight: 600; white-space: nowrap; padding-right: 12px; }
.hms-grid input { width: 100%; min-width: 90px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; box-sizing: border-box; }
.hms-grid td.narrow input { min-width: 56px; }

/* Attendance grid */
table.hms-att { border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.hms-att th { font-size: .64rem; color: var(--hms-mut); padding: 2px 0; font-weight: 600; min-width: 20px; text-align: center; }
.hms-att td.mo { font-weight: 600; white-space: nowrap; padding: 2px 8px 2px 0; }
.hms-att td.tot { font-weight: 700; color: var(--accent, #1f4e5f); padding: 2px 4px; text-align: right; }
.hms-att button.day {
  width: 21px; height: 24px; padding: 0; margin: 1px 0; border: 1px solid var(--border);
  border-radius: 4px; background: #fff; font: inherit; font-size: .68rem; cursor: pointer; color: var(--ink);
}
.hms-att button.day:disabled { visibility: hidden; }
.hms-att button.day[data-code="P"] { background: #e9f4ea; border-color: #bcd9be; }
.hms-att button.day[data-code="F"] { background: #e9f0f8; border-color: #bccfe6; }
.hms-att button.day[data-code="A"] { background: #faece9; border-color: #ecc4bc; }
.hms-att button.day[data-code="W"] { background: var(--bg-subtle, #f1f1f4); color: var(--hms-mut); }
.hms-att button.day[data-code="V"], .hms-att button.day[data-code="H"] { background: #fdf3e4; border-color: #ecd9b6; }
.hms-att-legend { font-size: .78rem; color: var(--hms-mut); margin-top: 8px; }

.hms-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hms-form-note { color: var(--ink-3); font-size: .8rem; flex: 1 1 260px; }

/* The save bar sticks to the bottom of the viewport while the form
   scrolls, so the sentence saying what a save DOES sits next to the
   button rather than at the end of a 31-column grid. */
.hms-form-foot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 2px solid var(--accent); border-radius: var(--radius);
  padding: 11px 15px; margin-top: 14px; box-shadow: var(--shadow-md);
}
.hms-form-note { color: var(--hms-mut); font-size: .8rem; flex: 1 1 260px; }
.hms-formhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hms-tag { border: 1px solid var(--border); background: var(--bg-card); border-radius: 999px; padding: 2px 10px; font-size: .74rem; color: var(--ink-2); }
.hms-formsaved { margin-left: auto; }
/* The school the form belongs to — by the student's grade (K-8 Revival
   Homeschool, 9-12 Revival High School), the same name the PDF prints. */
.hms-school { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hms-mut); margin-bottom: 2px; }
.hms-startfrom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.hms-startfrom select { width: auto; max-width: 100%; }
.hms-copy { margin-top: 14px; }
.hms-copyrow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; min-height: 44px; border-top: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.hms-copyrow input { width: 18px; height: 18px; margin: 0; flex: none; }
.hms-copyrow .nm { flex: 1 1 auto; }
.hms-copyrow .st { font-size: .78rem; color: var(--hms-mut); }
.hms-copyrow .st.warn { color: #8a4b0f; font-weight: 600; }
.hms-copyrow.off { cursor: default; color: var(--hms-mut); background: var(--bg-subtle, #f4f4f6); }

/* ── Homeschool Ledger ────────────────────────────────────────────────────────
   The money half. Every amount is tabular-nums so digits line up down a
   column, and colour is never the only signal — a state pill says the
   same thing in words beside it. */
.hmst-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.hmst-money.zero { color: var(--hms-mut); font-weight: 500; }
.hmst-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--border); }
.hmst-big .amt { font-size: clamp(26px, 5vw, 34px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hmst-big .lbl { font-size: .84rem; color: var(--hms-mut); }

.hmst-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden; }
.hmst-panelhead { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--border); background: rgba(31,78,95,.04); }
.hmst-panelhead h2 { margin: 0; font-size: .92rem; font-weight: 700; font-family: var(--font-sans, inherit); }
.hmst-panelhead .cnt { font-size: .7rem; font-weight: 700; background: #fdf3e4; color: #8a4b09; border: 1px solid #f0ddb8; border-radius: 999px; padding: 1px 8px; }
.hmst-panelnote { padding: 9px 15px; font-size: .8rem; color: var(--hms-mut); border-bottom: 1px solid var(--border); }
.hmst-panelfoot { padding: 10px 15px; font-size: .78rem; color: var(--hms-mut); background: rgba(31,78,95,.03); border-top: 1px solid var(--border); }
.hmst-miss { color: #8a4b09; font-weight: 600; }
/* The tuition-late panel's batch button rides the panel head, on the
   far side of the count — one primary for the whole list, beside the
   heading that says what the list is. */
.hmst-panelhead .hmst-headact { margin-left: auto; white-space: nowrap; }
/* Waive all rides first and takes the auto margin; Apply all follows it. */
.hmst-panelhead .hmst-headact + .rui-btn { white-space: nowrap; margin-left: 8px; }
/* Apply is the row's one solid primary; Waive is the quiet ghost beside
   it — the same two-verb shape as the intake rows (✓ / 🚫), because
   "don't charge this one" is a decision the panel exists for, so it
   stays visible rather than hiding in a menu. */
.hmst-feeacts { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
/* The fees the office set aside. Muted and folded — they are a record,
   not work — but each keeps a way back, since a waiver is a decision
   that can be wrong. */
.hmst-waived { border-top: 1px solid var(--border); font-size: .8rem; }
.hmst-waived summary { cursor: pointer; padding: 9px 15px; color: var(--hms-mut); font-weight: 600; }
.hmst-waived summary:hover { color: var(--ink); }
.hmst-waived-row { display: flex; gap: 10px; align-items: center; padding: 6px 15px 8px; }
.hmst-waived-row + .hmst-waived-row { border-top: 1px dashed var(--border); }
.hmst-waived-row .who { flex: 1; min-width: 0; }
.hmst-waived-row .why { display: block; color: var(--hms-mut); font-size: .76rem; margin-top: 1px; }
.hmst-waived-row .rui-btn { flex: none; }

/* ── The invoice recipient picker ─────────────────────────────────────
   On the shared openDialog frame (utils.js, PR 4c of the shell plan's four
   gaps) — the overlay, Esc, outside-click and focus are its — and still
   deliberately NOT grown onto openConsequenceModal: it loads a plan
   asynchronously, carries its own loading and error states, and blocks on a
   selection — a decision SURFACE, which is exactly where the shared panel's
   contract stops (the application-intake judgment). It resolves, then hands
   off to the shared panel to confirm. These rules style only its body and
   its own footer. */
.hmsi-dlg .hmsi-tally { margin-right: auto; font-size: .8rem; color: var(--hms-mut); }
.hmsi-monthrow { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; flex-wrap: wrap; }
.hmsi-monthrow label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--hms-mut); }
.hmsi-monthrow select { font: inherit; font-size: .86rem; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--ink); flex: 1 1 220px; }
.hmsi-grp { margin-bottom: 15px; }
.hmsi-grp:last-child { margin-bottom: 0; }
.hmsi-grphead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hmsi-grphead h3 { margin: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--hms-mut); font-weight: 600; font-family: var(--font-sans, inherit); }
.hmsi-grphead .cnt { font-size: .7rem; font-weight: 600; background: #eef0f3; color: #4a5a6a; border: 1px solid #dfe3e9; border-radius: 999px; padding: 1px 8px; }
.hmsi-total { font-size: .72rem; font-weight: 600; color: var(--hms-mut); }
.hmsi-grpnote { margin: 0 0 7px; font-size: .77rem; color: var(--hms-mut); max-width: 62ch; }
.hmsi-list { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
/* ⚠️ `text-transform: none` overrides style.css's blanket `label` rule —
   a sendable row is a real `<label>` so the whole row is the tap target,
   and without this the family's NAME and their email address both render
   shouted (the equip.html lesson). The skipped rows are plain divs and
   never showed the bug, which is exactly how it hid in review. */
.hmsi-row { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-bottom: 1px solid var(--border); background: var(--bg-card); text-transform: none; letter-spacing: normal; }
.hmsi-row:last-child { border-bottom: 0; }
.hmsi-row.off { background: rgba(31,78,95,.03); }
.hmsi-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent, #1f4e5f); flex: none; cursor: pointer; }
.hmsi-row input[type="checkbox"]:disabled { cursor: not-allowed; }
.hmsi-who { flex: 1 1 auto; min-width: 0; }
.hmsi-name { display: block; font-weight: 600; font-size: .85rem; }
.hmsi-sub { display: block; font-size: .74rem; color: var(--hms-mut); margin-top: 1px; line-height: 1.4; }
.hmsi-row.off .hmsi-name, .hmsi-row.off .hmsi-amt { color: var(--hms-mut); }
.hmsi-amt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.hmsi-selall { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
/* Real controls, not underlined prose. They shipped as text links and read
   as a caption — asked for by name on 2026-08-28 by somebody looking at a
   screenshot of the panel that already had them. */
.hmsi-selbtn {
  font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer;
  background: var(--bg-card); color: var(--ink-2, #3d3d52);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px;
}
.hmsi-selbtn:hover { background: var(--accent-lt, #e8f0f2); border-color: var(--accent, #1f4e5f); color: var(--accent, #1f4e5f); }
.hmsi-selbtn:focus-visible { outline: 2px solid var(--accent, #1f4e5f); outline-offset: 1px; }
/* The test door sits at the far LEFT of the footer; the tally's own
   margin-right:auto is what pushes Cancel/Continue away from it. */
.hmsi-test { margin-right: 4px; }
.hmsi-state { padding: 22px 4px; text-align: center; font-size: .85rem; color: var(--hms-mut); }
.hmsi-empty { border: 1px solid var(--border); border-radius: 9px; background: rgba(31,78,95,.04);
  padding: 12px 14px; font-size: .84rem; line-height: 1.5; color: var(--ink-2, #3d3d52); margin-bottom: 15px; }
.hmsi-expand { margin-top: 7px; }
/* Coarse pointers get the 44px row target the rest of the page uses. */
@media (pointer: coarse) {
  .hmsi-row { padding: 11px; min-height: 44px; }
  .hmsi-row input[type="checkbox"] { width: 20px; height: 20px; }
}

table.hmst-stmt { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hmst-stmt th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--hms-mut); font-weight: 600; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--border); }
.hmst-stmt th.r, .hmst-stmt td.r { text-align: right; padding-right: 0; }
.hmst-stmt td { padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(26,26,46,.055); vertical-align: top; }
.hmst-stmt tr:last-child td { border-bottom: 0; }
.hmst-stmt .dt { color: var(--hms-mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hmst-stmt .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.hmst-stmt .amt.cr { color: #2c6247; }
.hmst-stmt .run { font-variant-numeric: tabular-nums; color: var(--hms-mut); white-space: nowrap; }
.hmst-stmt .memo b { display: block; font-weight: 600; }
.hmst-stmt .memo span { display: block; font-size: .74rem; color: var(--hms-mut); margin-top: 1px; }
.hmst-stmt tr.rev td { opacity: .72; }

.hmst-tag { display: inline-flex; align-items: center; border-radius: 4px; padding: 1px 6px; font-size: .62rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.hmst-tag-enrollment { background: #eef1f4; color: #4a5a6a; border-color: #dde3e9; }
/* Arrears paid down — amber like the late fee, since both are what a
   family owes for being behind rather than what the school charges. */
.hmst-tag-overdue { background: #fdf3e4; color: #8a4b09; border-color: #f0ddb8; }
.hmsd-payform { margin-top: 4px; }
.hmsd-paylbl { display: block; text-transform: none; font-weight: 600; margin-bottom: 6px; }
.hmsd-payrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hmsd-paycur { font-weight: 600; }
.hmsd-payset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.hmsd-payitem { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border, #e5e0d8);
  text-transform: none; font-weight: 400; cursor: pointer; }
.hmsd-payitem input { margin-top: 3px; flex: none; }
.hmsd-payitem-l { flex: 1; min-width: 0; }
.hmsd-payitem-s { display: block; font-size: .82rem; color: var(--hms-mut, #5a5a6e); }
.hmsd-payitem-n { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hmsd-payall { font-weight: 600; }
@media (pointer: coarse) { .hmsd-payitem { min-height: 44px; } .hmsd-payitem input { width: 20px; height: 20px; } }
.hmsd-payerr { color: #a3261b; margin: 8px 0 0; font-size: .9rem; }
.hmsd-payerr[hidden] { display: none; }
.hmst-tag-account { background: var(--accent-lt); color: var(--accent); border-color: #c9dde3; }
.hmst-tag-tuition { background: var(--accent-lt); color: var(--accent); border-color: #c9dde3; }
.hmst-tag-late-fee { background: #fdf3e4; color: #8a4b09; border-color: #f0ddb8; }
.hmst-tag-other { background: #eef1f4; color: #4a5a6a; border-color: #dde3e9; }

/* An arrangement is neither a warning nor a success — it is an agreement
   being kept, and the page must not imply the family is in trouble. */
.hmsd-strip.arr { background: var(--blue-lt, #e8f0fb); color: #1e4c86; border-color: #c6d9f0; }
/* "Nothing billed yet" — deliberately NOT the green paid-up strip and not
   the amber default: a family who has never been billed has neither done
   something right nor been warned about anything. */
.hmsd-strip.calm { background: #f3f3f6; color: #45454f; border-color: #e0e0e6; }
/* The staff Family View frame (2026-09-30). The totals are FIGURES, not
   filters, so they are not .hmsp-tile buttons; ⚠️ .n/.l are display:block
   or they run together and read "$1,200.00Charges" (the womens-texts
   tile lesson). */
.hmsfv-who { display: grid; gap: 4px; font-size: .86rem; margin: 2px 0 12px; }
.hmsfv-who b { font-weight: 600; }
.hmsfv-who .mut { color: var(--hms-mut); }
.hmsfv-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.hmsfv-tot { background: var(--bg-subtle, #f6f6f8); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 12px; }
.hmsfv-tot .n { display: block; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hmsfv-tot .l { display: block; font-size: .76rem; color: var(--hms-mut); }
.hmsfv-tot.bal { border-color: var(--accent, #1f4e5f); }
.hmsfv-replica { border-top: 2px dashed var(--border); padding-top: 14px; }
/* The Family View's four views (2026-10-16): the shared .segmented, links. */
.hmsfv-views.segmented { margin: 0 0 14px; }
.hmsfv-replica .hmsd-payform[aria-disabled="true"] { opacity: 1; }

/* Earlier arrangements — a record, not a status. Muted on purpose: an
   agreement that has ended must not compete with the live one. */
.hmst-hist { list-style: none; margin: 0; padding: 0; }
.hmst-hist li { padding: 7px 0; font-size: .8rem; }
.hmst-hist li + li { border-top: 1px solid var(--border); }
.hmst-hist b { font-variant-numeric: tabular-nums; }
.hmst-hist span { display: block; font-size: .74rem; color: var(--hms-mut); margin-top: 2px; }

.hmst-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.hmst-form[hidden] { display: none; }   /* display:grid outranks [hidden] — the F2 defect */
.hmst-form label { display: block; text-transform: none; letter-spacing: normal; font-weight: 600; font-size: .78rem; margin-bottom: 4px; color: var(--ink); }
.hmst-form input, .hmst-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; background: #fff; box-sizing: border-box; }
.hmst-formacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hmst-formacts[hidden] { display: none; }

@media (pointer: coarse) {
  .hms-att button.day { width: 30px; height: 34px; }
}
@media (max-width: 1080px) {
  .hmsd-grid { grid-template-columns: 1fr; }
  .hmsd-side { position: static; }
}
@media (max-width: 700px) {
  .hms-newgrid { grid-template-columns: 1fr 1fr; }
  .hmsp-table thead { display: none; }
  .hmsp-table.data-table, .hmsp-table.data-table tbody, .hmsp-row, .hmsp-table.data-table td { display: block; width: auto; }
  .hmsp-row { border-bottom: 1px solid var(--border); padding: 4px 0; }
  .hmsp-row:last-child { border-bottom: 0; }
  .hmsp-table.data-table td { border-bottom: 0; padding: 3px 14px; }
  .hmsp-row td:first-child { padding-top: 10px; }
  td.hmsp-act { text-align: left; padding-bottom: 12px; }
  td.hmsp-act .row-acts { justify-content: flex-start; }
}

/* ── Access (?view=access) ─────────────────────────────────────────── */
/* Who can sign in as a family, and why somebody cannot. The chips carry
   their state in WORDS; colour is never the only signal. */
.hmsac-list { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card); }
.hmsac-row { padding: 10px 14px; border-top: 1px solid var(--border); }
.hmsac-row:first-child { border-top: 0; }
.hmsac-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hmsac-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.hmsac-name:hover { text-decoration: underline; }
.hmsac-top .hmsac-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.hmsac-mail { font-size: .82rem; color: var(--ink-2); margin-top: 3px; }
.hmsac-mail.sent { color: #1f6a3d; }
.hmsac-mail.none { color: #915414; }
.hmsac-why { font-size: .84rem; line-height: 1.45; color: var(--ink-2); margin-top: 3px; }
.hmsac-check { font-size: .84rem; line-height: 1.45; margin-top: 7px; padding: 8px 10px; border-radius: 6px;
  background: var(--bg, #faf7f2); border-left: 3px solid var(--border); }
.hmsac-check.ok { border-left-color: #1f6a3d; }
.hmsac-check.warn { border-left-color: var(--warn, #9a5800); }
.hmsac-check.bad { border-left-color: var(--error, #c0392b); }
.hmsac-h2 { font-size: 1rem; margin: 18px 0 8px; }
.hmsac-model { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
  padding: 12px 16px; font-size: .9rem; line-height: 1.55; }
.hmsac-model ol { margin: 6px 0 0; padding-left: 22px; }
.hmsac-model li { margin-bottom: 8px; }
.hmsac-model ul { margin: 4px 0; padding-left: 18px; }
.hmsac-warn { color: #9b2c1f; }
.hmsac-note { font-size: .82rem; color: var(--ink-2); }
@media (pointer: coarse) { .hmsac-top .rui-btn, .hms-acts .rui-btn { min-height: 44px; } }

/* ── Attendance (?view=attendance) ─────────────────────────────────── */
/* ⚠️ COLOUR IS ON THE RECORD AXIS, not the turnout axis — the same rule as
   the card. Green means somebody took attendance, gold means the meeting
   finished and nobody did, hollow means it has not happened. How many came
   is carried by the bar height and, always, by the figure in the row. */
.hmsa-weeknav { display: inline-flex; align-items: center; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.hmsa-weeknav .rui-btn { border: 0; border-radius: 0; }
.hmsa-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; padding: 11px 13px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.hmsa-li { display: flex; gap: 8px; align-items: flex-start; font-size: .79rem; color: var(--hms-mut); max-width: 260px; }
.hmsa-li b { color: var(--ink); display: block; font-size: .8rem; }

.hmsa-grp { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 8px; flex-wrap: wrap; }
.hmsa-grp h2 { font-size: 1rem; margin: 0; }
.hmsa-grp .meta { font-size: .78rem; color: var(--hms-mut); }

.hmsa-list { display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.hmsa-row { display: grid; grid-template-columns: minmax(180px, 2.1fr) 96px minmax(110px, 1fr) 130px auto;
  gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.hmsa-row:last-child { border-bottom: 0; }
.hmsa-nm { min-width: 0; }
.hmsa-nm .n { font-weight: 700; font-size: .89rem; display: block; }
.hmsa-nm .p { font-size: .75rem; color: var(--hms-mut); }
.hmsa-roster { font-size: .79rem; color: var(--hms-mut); font-variant-numeric: tabular-nums; }
.hmsa-roster b { color: var(--ink); font-weight: 700; }

/* The term strip — one square per meeting. This is the sparkline of the
   feature: a teacher who stopped taking attendance reads at a glance. */
.hmsa-strip { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.hmsa-sq { width: 17px; height: 22px; border-radius: 3px; border: 1px solid var(--border);
  position: relative; overflow: hidden; background: var(--bg); flex: 0 0 17px; }
.hmsa-sq .fill { position: absolute; inset: auto 0 0 0; background: #15703f; }
/* ⚠️ Recorded, but with NO student rows at all — only leaders were ticked.
   It gets the recorded colour (it IS recorded) and deliberately NO bar,
   because a full bar would assert that every student was present when
   nobody marked a single one. */
.hmsa-sq.recnos { border-color: #15703f; background: #e4efe6; }
.hmsa-sq.gap { border-color: #8a5a0b; border-style: dashed;
  background-image: repeating-linear-gradient(45deg, #f7edda 0 3px, transparent 3px 6px); }
.hmsa-sq.soon { border-style: dashed; background: transparent; }
.hmsa-sq.unk { border-style: dotted; background: transparent; }
.hmsa-sq.off { background: transparent; opacity: .5; }

.hmsa-fig { font-size: .8rem; font-variant-numeric: tabular-nums; }
.hmsa-fig b { font-weight: 700; }
.hmsa-fig .sub { display: block; font-size: .73rem; color: var(--hms-mut); }
.hmsa-fig.warn b { color: #8a5a0b; }

.hmsa-wal { background: #f7edda; border: 1px solid #8a5a0b; border-radius: 10px;
  padding: 13px 15px; margin: 14px 0 4px; }
.hmsa-wal h2 { font-size: .95rem; margin: 0 0 4px; }
.hmsa-wal p { margin: 0; font-size: .84rem; color: var(--ink); line-height: 1.5; }

.hmsa-stab { width: 100%; border-collapse: collapse; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: .84rem; }
.hmsa-stab th { text-align: left; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--hms-mut); font-weight: 700; padding: 9px 13px; border-bottom: 1px solid var(--border); background: var(--bg); }
.hmsa-stab td { padding: 10px 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.hmsa-stab tr:last-child td { border-bottom: 0; }
.hmsa-stab td.n { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .hmsa-row { grid-template-columns: 1fr; gap: 7px; }
  .hmsa-stab { display: block; overflow-x: auto; }
}

/* ── Overview (?view=home) — needs list + area cards ──────────────── */
.hmsh-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin: 0 0 14px; overflow: hidden; }
.hmsh-panelhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 16px 8px; }
.hmsh-panelhead h2 { margin: 0; font-size: 1.05rem; flex-grow: 1; }
.hmsh-panelhead span { font-size: .78rem; color: var(--hms-mut); }
.hmsh-needs { list-style: none; margin: 0; padding: 0; }
.hmsh-need { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 44px; box-sizing: border-box;
  border-top: 1px solid var(--border); text-decoration: none; color: inherit; }
.hmsh-need:hover { background: rgba(31, 78, 95, .05); }
.hmsh-need:focus-visible { outline: 2px solid var(--accent, #1f4e5f); outline-offset: -2px; }
.hmsh-need .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent, #1f4e5f); }
.hmsh-need.is-warn .dot { background: #c98a1b; }
.hmsh-need.is-bad .dot { background: var(--error, #c0392b); }
.hmsh-need .n { font-weight: 700; min-width: 34px; font-variant-numeric: tabular-nums; }
.hmsh-need .t { flex-grow: 1; min-width: 0; }
.hmsh-need .w { font-size: .76rem; color: var(--hms-mut); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hmsh-need .w .ic { width: 14px; height: 14px; margin: 0; }
.hmsh-need .go { font-size: .8rem; font-weight: 600; color: var(--accent, #1f4e5f); white-space: nowrap; }
.hmsh-clear, .hmsh-blind { margin: 0; padding: 10px 16px 14px; font-size: .85rem; color: var(--hms-mut); border-top: 1px solid var(--border); }
.hmsh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; margin-bottom: 14px; }
.hmsh-card { display: flex; flex-direction: column; gap: 12px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 15px 16px 14px; min-width: 0; }
/* Unavailable reads off the SURFACE, never opacity (the .hmsr-card lesson). */
.hmsh-card.off { background: transparent; border-style: dashed; box-shadow: none; }
.hmsh-cardhead { display: flex; align-items: flex-start; gap: 10px; }
.hmsh-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(31, 78, 95, .09); color: var(--accent, #1f4e5f); }
.hmsh-icon .ic { width: 18px; height: 18px; margin: 0; }
.hmsh-name { flex-grow: 1; min-width: 0; }
.hmsh-name h2 { margin: 0; font-size: 1.05rem; }
.hmsh-name h2 a { color: inherit; text-decoration: none; }
.hmsh-name h2 a:hover { text-decoration: underline; }
.hmsh-name p, .hmsh-why { margin: 2px 0 0; font-size: .8rem; color: var(--hms-mut); }
.hmsh-open { font-size: .82rem; font-weight: 600; color: var(--accent, #1f4e5f); text-decoration: none; white-space: nowrap; padding-top: 2px; }
.hmsh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hmsh-stat .v { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hmsh-stat .l { display: block; font-size: .76rem; color: var(--hms-mut); }
.hmsh-stat.is-warn .v { color: #8a5a10; }
.hmsh-stat.is-bad .v { color: #a12d22; }
.hmsh-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.hmsh-acts a { color: var(--accent, #1f4e5f); font-weight: 600; text-decoration: none; padding: 4px 0; }
.hmsh-acts a:hover { text-decoration: underline; }
@media (pointer: coarse) { .hmsh-acts a, .hmsh-open { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 640px) {
  .hmsh-grid { grid-template-columns: 1fr; }
  .hmsh-need { flex-wrap: wrap; }
  .hmsh-need .w { order: 4; }
}

/* ── Reporting (?view=reports) ─────────────────────────────────────── */
.hmsr-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.hmsr-card {
  display: flex; flex-direction: column; gap: 7px; text-align: left; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 15px 16px 14px; color: inherit; font: inherit; cursor: pointer;
}
.hmsr-card:hover { border-color: var(--accent, #1f4e5f); }
.hmsr-card:focus-visible { outline: 2px solid var(--accent, #1f4e5f); outline-offset: 2px; }
.hmsr-card .n { font-size: clamp(20px, 3.4vw, 27px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hmsr-card .n.mute { color: var(--hms-mut); font-size: 20px; }
.hmsr-card .l { font-size: .76rem; color: var(--hms-mut); }
.hmsr-card h2 { margin: 4px 0 0; font-size: .95rem; font-weight: 700; font-family: var(--font-sans, inherit); }
.hmsr-card .why { font-size: .78rem; color: var(--hms-mut); margin: 0; }
.hmsr-card .go { margin-top: auto; padding-top: 6px; font-size: .8rem; font-weight: 600; color: var(--accent, #1f4e5f); }
/* ⚠️ NOT `opacity`. It was, and it dropped this card's own 11px muted
   text (.l and .why — which on an unavailable card is the SENTENCE SAYING
   WHY) from 4.5:1 to 3.8:1, which axe flags serious. Opacity multiplies
   against whatever is behind it, so muted text is exactly where it does
   the most damage — the rk-room-status contrast lesson, one surface on.
   The unavailable state now reads off the SURFACE instead: a flatter
   background and a dashed border, with every text colour untouched.
   Latent on the Reporting shelf for as long as `.off` existed and never
   caught, because against stubbed PCO that page renders its error state
   and axe never saw a card. The overview populates either way, which is
   what surfaced it. */
.hmsr-card.off { background: var(--bg); border-style: dashed; box-shadow: none; }

.hmsr-why { background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 9px 13px; font-size: .8rem; color: var(--hms-mut); margin-bottom: 13px; max-width: 86ch; }
.hmsr-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; }
.hmsr-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 9px 14px; min-width: 118px; }
.hmsr-stat .n { display: block; font-size: 1.22rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hmsr-stat .l { display: block; font-size: .74rem; color: var(--hms-mut); margin-top: 3px; }
.hmsr-stat.warn { border-color: #f0ddb8; background: #fdf9f2; }
.hmsr-stat.warn .n { color: #8a4b09; }
.hmsr-stat.ok .n { color: #2c6247; }
.hmsr-notes { margin: 12px 0 0; padding: 0; list-style: none; max-width: 96ch; }
.hmsr-notes li { font-size: .78rem; color: var(--hms-mut); padding: 4px 0 4px 14px; text-indent: -14px; }
.hmsr-table.data-table td { font-variant-numeric: tabular-nums; }
.hmsr-table.data-table td:first-child { font-variant-numeric: normal; }
.hmsr-table.data-table td.r { text-align: right; }
.hmsr-table.data-table th.r { text-align: right; }
.hmsr-count { font-size: .78rem; color: var(--hms-mut); margin: 10px 0 0; }
/* The per-student transcript — a DOCUMENT, so it reads like paper: a
   centred masthead, a two-column identity block, ruled year tables, and
   the signature lines a receiving school expects. */
.hmsr-doc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: clamp(18px, 4vw, 36px); max-width: 860px; }
.hmsr-dochead { text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 16px; }
.hmsr-dochead .school { font-size: clamp(18px, 3vw, 23px); font-weight: 700; letter-spacing: .01em; }
.hmsr-dochead .doctitle { font-size: .92rem; color: var(--hms-mut); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .12em; }
.hmsr-docfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 22px; margin-bottom: 20px; }
.hmsr-docfield { display: flex; gap: 8px; font-size: .86rem; padding: 3px 0;
  border-bottom: 1px solid var(--bg-subtle, #f1f1f4); }
.hmsr-docfield .l { color: var(--hms-mut); min-width: 92px; }
.hmsr-docfield .v { font-weight: 600; }
.hmsr-block { margin-bottom: 18px; }
.hmsr-block h2 { font-size: .9rem; font-weight: 700; margin: 0 0 4px; font-family: var(--font-sans, inherit); }
.hmsr-blocknote { font-size: .78rem; color: var(--hms-mut); margin: 0 0 7px; }
.hmsr-table.data-table th.c, .hmsr-table.data-table td.c { text-align: center; }
.hmsr-cert { font-size: .8rem; color: var(--hms-mut); border-top: 1px solid var(--border);
  padding-top: 12px; margin: 20px 0 0; }
.hmsr-sigs { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 30px; }
.hmsr-sig { flex: 1 1 210px; }
.hmsr-sig .line { display: block; border-bottom: 1px solid var(--ink); height: 26px; }
.hmsr-sig .l { display: block; font-size: .74rem; color: var(--hms-mut); margin-top: 4px; }

@media print {
  .hms-acts { display: none !important; }
  /* On paper the document IS the page — the card chrome around it is
     screen furniture, and a printed transcript should look posted. */
  .hmsr-doc { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .hmsr-strip, .hmsr-why { display: none !important; }
  .hmsr-block { break-inside: avoid; }
  .hmsr-card, .hmsp-tablewrap { box-shadow: none; }
}