/* Learnium Consulting — portal.css (T8 client portal, on top of ../css/style.css) */

/* Colours come from tokens.css only (python3 tools/check_tokens.py). Load order: style.css, tokens.css, components.css, portal.css. */

.portal-body { background: var(--bg); color: var(--fg); font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; }
/* Base look for any form control no rule below styles (zero specificity, so every specific rule still wins). */
.portal-body :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"])) {
  font: inherit; font-size: 14px; color: var(--fg); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 0; padding: 8px 12px;
}
/* style.css paints the kicker in the raw brand purple (4.0:1 on a dark surface): use the text token in the portal. */
.portal-body .kicker { color: var(--accent-text); font-size: 12px; }
.portal-body ::placeholder { color: var(--fg-subtle); opacity: 1; }
/* style.css gives .field input:focus a white background (public site); in the portal it follows the surface token. */
.portal-body .field input:focus, .portal-body .field select:focus, .portal-body .field textarea:focus { background: var(--surface); }
/* style.css gives .btn a display value, which would defeat the hidden
   attribute portal.js relies on — restore hidden's meaning everywhere. */
.portal-body [hidden] { display: none !important; }
.portal-main { flex: 1; padding: 56px 0 80px; }

/* Header: "liquid glass" chrome (proposal 3.5). An approximation of Apple's Liquid Glass for the web; Apple documents
   it for its platforms only. A 72 % surface fill over a 16 px blur, a 1 px top highlight and the usual hairline;
   text keeps full-opacity --fg so contrast is unchanged. The logo SVG uses currentColor, so it follows --fg. */
.portal-body .site-header {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  border-bottom: 1px solid var(--border);
}
.portal-body .site-header.scrolled { box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portal-body .site-header { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .portal-body .site-header { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.portal-body .site-header .brand, .portal-body .site-header .brand-logo, .portal-body .site-header .brand-name { color: var(--fg); }
.portal-body .site-header .brand-logo svg [fill]:not([fill="none"]) { fill: currentColor; }
.portal-body .site-header .brand-tag { color: var(--fg-muted); font-size: 12px; letter-spacing: 0.14em; }
.portal-header { border-bottom: 1px solid var(--border); }
.portal-back { font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); white-space: nowrap; }
.portal-back:hover { color: var(--ink); }
/* Narrow screens: the signed-in name must never run under the brand
   (it did at 375px: "Learnium Consulting" is nowrap and overflowed the
   shrunken brand box). The name truncates with an ellipsis (full name in
   the title tooltip, set by portal.js), the brand text yields to the
   logo once someone is signed in, and nothing scrolls sideways. */
.portal-header .nav-cta { min-width: 0; }
.portal-header .brand > span:last-child { min-width: 0; overflow: hidden; }
.portal-header .brand-name { overflow: hidden; text-overflow: ellipsis; }
.portal-body .btn-signout { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* Demo banner */
.demo-banner { background: var(--night); color: var(--on-night); padding: 8px 0; font-size: 13px; }
.demo-banner strong { color: var(--gold-light); font-weight: 700; margin-right: 4px; }

/* Login */
.login-card {
  max-width: 460px; margin: 40px auto; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 44px 40px;
}
.login-card h1 { font-size: 32px; margin: 8px 0 12px; }
.login-lead { color: var(--ink-soft); font-size: 16px; margin-bottom: 24px; }
.login-card .field { margin-bottom: 16px; }
.login-card label { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
.login-card input[type="email"] {
  width: 100%; padding: 12px 12px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 16px; border-radius: var(--radius);
}
.login-card input[type="email"]:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
#google-signin { margin-top: 12px; }
.login-msg { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent-text); }
.login-msg.error { color: var(--danger-text); }
.login-help { margin-top: 24px; font-size: 13px; color: var(--ink-soft); line-height: 1.9; }
.login-help a { color: var(--accent-text); font-weight: 600; }

/* Sign-up */
.login-card input[type="text"] {
  width: 100%; padding: 12px 12px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 16px; border-radius: var(--radius);
}
.login-card input[type="text"]:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.login-card .consent-field { margin: 4px 0 16px; }
.signup-next { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.next-steps { margin: 4px 0 0 16px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.next-steps a { color: var(--accent-text); font-weight: 600; }

.demo-roles { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.demo-roles-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.demo-roles-row { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-roles-row .btn { flex: 1; padding: 0 8px; }

/* style.css colours the form note for the dark public footer (#8a88a0, 3.4:1 on white): the portal uses the muted token. */
.portal-body .newsletter-note { color: var(--fg-muted); font-size: 12px; }
.portal-body .newsletter-note a { color: var(--accent-text); }
.portal-body .newsletter-note a:hover { color: var(--fg); }

/* Shared page scaffolding */
.portal-page-head { margin-bottom: 32px; }
.portal-page-head h1 { font-size: 32px; margin: 8px 0 8px; }
.portal-sub { color: var(--ink-soft); font-size: 14px; max-width: 640px; }
.portal-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; margin-bottom: 24px; align-items: start; }
.portal-stack { display: grid; gap: 24px; }
.portal-panel {
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: 28px; margin-bottom: 24px;
}
.portal-grid .portal-panel, .portal-stack .portal-panel { margin-bottom: 0; }
.portal-panel h2 { font-size: 20px; margin-bottom: 16px; }
.portal-panel h2 + .portal-sub { margin: -8px 0 16px; }

/* Progress timeline */
.stage-timeline { list-style: none; }
.stage-timeline li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.stage-timeline li:last-child { border-bottom: 0; }
.stage-timeline .mark {
  width: 12px; height: 12px; flex: none; border: 1px solid var(--line);
  background: var(--paper); align-self: center;
}
.stage-timeline li.done .mark { background: var(--violet); border-color: var(--violet); }
.stage-timeline li.current .mark { background: var(--paper); border: 3px solid var(--violet); }
.stage-timeline .stage-name { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.stage-timeline li.done .stage-name { color: var(--ink); }
.stage-timeline li.current .stage-name { color: var(--ink); font-weight: 800; }
.stage-timeline .now-chip {
  margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-text); background: var(--violet-soft); padding: 4px 8px;
}

/* Waiting lists */
.waiting-list { list-style: none; }
.waiting-list li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.waiting-list li:last-child { border-bottom: 0; }
.waiting-list li::before { content: ""; width: 8px; height: 8px; background: var(--violet); flex: none; margin-top: 4px; }
.waiting-list li.empty::before { background: var(--line); }

/* Status chips */
.chip {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 8px; white-space: nowrap;
}
.chip.missing      { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); }
.chip.uploaded     { background: var(--accent-soft); color: var(--accent-soft-text); }
.chip.under_review { background: var(--warning-soft); color: var(--warning-text); }
.chip.approved     { background: var(--success-soft); color: var(--success-text); }
.chip.rejected     { background: var(--danger-soft); color: var(--danger-text); }

/* Student document list */
.doc-list { display: grid; }
.doc-group-title {
  font-size: 16px; margin: 24px 0 4px; padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
}
.doc-group-title:first-child { margin-top: 4px; }
.doc-group-note { font-size: 13px; color: var(--ink-soft); margin: 8px 0 4px; line-height: 1.7; }
.doc-instructions a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.doc-instructions a:hover { color: var(--violet); }
/* Keyboard access (2026-10-24): the file input inside a label.btn is clipped to 1px instead of
   display:none, so Tab reaches it and the label shows the focus ring (:focus-within below). */
.doc-row label.btn, .billing-card label.btn, .fin-attach, .drop-zone { position: relative; }
.doc-row input[type="file"], .billing-card input[type="file"], .fin-attach input[type="file"], .drop-zone input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.portal-body label:focus-within:has(input[type="file"]) { outline: 2px solid var(--violet); outline-offset: 2px; }
.portal-body .btn:focus-visible, .portal-body button:focus-visible, .portal-body a:focus-visible,
.portal-body summary:focus-visible, .portal-body select:focus-visible, .portal-body [role="dialog"] button:focus-visible {
  outline: 2px solid var(--violet); outline-offset: 2px;
}

/* Admin: review queue */
.review-queue { display: grid; gap: 12px; }
.queue-card { border: 1px solid var(--line); padding: 16px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--paper); }
.queue-card .q-info { flex: 1; min-width: 220px; }
.queue-card .q-doc { font-weight: 700; font-size: 16px; }
.queue-card .q-student { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.queue-card .q-file { font-size: 12px; color: var(--accent-text); margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.queue-card .q-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.queue-card .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.portal-body .btn-approve { background: var(--success); border-color: var(--success); color: var(--on-success); }
.portal-body .btn-approve:hover:not(:disabled) { background: var(--success-hover); border-color: var(--success-hover); }
.portal-body .btn-reject { border-color: var(--danger); color: var(--danger-text); background: transparent; }
.portal-body .btn-reject:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.queue-empty { color: var(--ink-soft); font-size: 14px; padding: 4px 0; }
.count-chip { display: inline-block; min-width: 22px; text-align: center; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 800; padding: 4px 8px; vertical-align: middle; margin-left: 4px; }

/* Admin: students table */
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table .student-cell strong { display: block; }
.admin-table .student-cell span { font-size: 13px; color: var(--ink-soft); }
.admin-table select {
  font: inherit; font-size: 13px; padding: 8px 12px; border: 1px solid var(--border-strong);
  background: var(--surface); border-radius: var(--radius); max-width: 220px;
}
.admin-table select:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.doc-mini { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

/* Audit list */
.audit-list { list-style: none; font-size: 14px; color: var(--ink-soft); }
.audit-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.audit-list li:last-child { border-bottom: 0; }
.audit-list strong { color: var(--ink); }

/* Getting-started guide */
.guide .portal-panel, .guide .portal-page-head { max-width: 860px; }
.step-num {
  display: inline-flex; width: 26px; height: 26px; flex: none; background: var(--accent);
  color: var(--accent-fg); font-size: 14px; align-items: center; justify-content: center;
  margin-right: 8px; vertical-align: 2px; font-family: var(--font-body); font-weight: 800;
}
.guide-list { list-style: none; }
.guide-list li { padding: 10px 0 10px 20px; position: relative; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.guide-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; background: var(--violet); }
.guide-list strong, .guide-list em { color: var(--ink); }
.guide-list .guide-list li { padding: 4px 0 4px 20px; }
.guide-list .guide-list li::before { top: 12px; }
.guide-note p { margin: 0 0 6px; }
.guide-note .guide-list li { padding: 4px 0 4px 20px; }
.guide-note .guide-list li::before { top: 12px; }
.guide-note { font-size: 14px; color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: 12px; margin-top: 12px; }
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-top: 4px; }
.guide-h3 { font-size: 16px; margin: 8px 0 4px; padding-bottom: 4px; border-bottom: 2px solid; }
.guide-h3.good { border-color: var(--ok); color: var(--success-text); }
.guide-h3.bad { border-color: var(--danger); color: var(--danger-text); }
.guide-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.guide-help { border-left: 3px solid var(--violet); }
@media (max-width: 700px) { .guide-cols { grid-template-columns: 1fr; } }

/* Onboarding / intake form */
.intake .portal-page-head, .intake-section, .intake-footer, .intake .intake-status { max-width: 760px; }
.intake-field { margin-bottom: 16px; }
.intake-field > label, .intake-field > legend { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; padding: 0; }
fieldset.intake-field { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.intake-field input[type="text"], .intake-field input[type="email"], .intake-field input[type="date"], .intake-field textarea {
  width: 100%; padding: 12px 12px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 14px; border-radius: var(--radius);
}
.intake-field textarea { min-height: 110px; resize: vertical; }
.intake-field input:focus, .intake-field textarea:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.field-hint { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.6; }
.choice-group { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0; }
.choice-group.stacked { flex-direction: column; gap: 8px; }
.choice { display: flex; gap: 8px; align-items: baseline; font-size: 14px; font-weight: 500; cursor: pointer; }
.choice input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; transform: translateY(2px); }
.field-missing > label, .field-missing > legend { color: var(--danger-text); }
.field-missing input[type="text"], .field-missing input[type="email"], .field-missing input[type="date"],
.field-missing textarea, .field-missing .choice-group { outline: 2px solid var(--danger); outline-offset: 2px; }
/* Per-field messages (S-10): the text names the problem, so colour is never the only signal. */
.intake-field .field-error { font-weight: 600; }
.intake-field .field-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; border: 1.5px solid currentColor; font-size: 10px; line-height: 1; }
.field-warn { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--warning-text); }
.field-warn:not([hidden]) { display: block; }
.intake-field select {
  width: 100%; padding: 12px 8px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 14px; border-radius: var(--radius); color: var(--ink);
}
.intake-field select:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
/* Repeatable rows (course list) */
.intake-rows-list { display: flex; flex-direction: column; gap: 8px; }
.intake-row {
  display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) auto;
  gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line);
}
.intake-row:first-child { border-top: 0; padding-top: 0; }
.intake-row-num { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.intake-field .intake-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
.intake-cell-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.intake-field .intake-cell input[type="text"], .intake-field .intake-cell select { padding: 8px 8px; font-size: 14px; }
.intake-row-remove {
  background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--accent-text); text-decoration: underline; cursor: pointer; align-self: end;
}
.intake-row-add { margin-top: 12px; }
.field-missing .intake-rows-list { outline: 2px solid var(--danger); outline-offset: 4px; }
@media (max-width: 700px) {
  .intake-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0; }
  .intake-cell.wide { grid-column: 1 / -1; }
  .intake-row-remove { grid-column: 1 / -1; justify-self: start; align-self: start; padding: 4px 0; }
}
.intake-draft-note { font-size: 13px; font-weight: 600; color: var(--accent-text); min-height: 18px; margin-bottom: 8px; }
.intake-status { border-left: 3px solid var(--ok); }
#intake-error { margin-bottom: 12px; }

/* Onboarding stepper (R5 wave 2C, proposal 6.2): rail or progress bar, one section per screen, review step. */
.intake-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.intake-saved { margin: 0; font-size: var(--fs-dense); line-height: var(--lh-dense); font-weight: 600; color: var(--success-text); min-height: 18px; }
.intake-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.intake-layout { display: block; }
.intake-main { min-width: 0; max-width: 760px; }
.intake-main .intake-section, .intake-main .intake-review, .intake-main .intake-footer { max-width: none; }
.intake-stepping .intake-section:not([data-current]), .intake-stepping .intake-review:not([data-current]) { display: none; }
.intake-section h2:focus, .intake-review h2:focus { outline: none; }
.intake-rail { display: none; }
.intake-progress { margin: 0 0 16px; }
.intake-progress-text { margin: 0 0 8px; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 600; color: var(--fg); }
.intake-progress-track { height: 4px; background: var(--border); }
.intake-progress-fill { height: 100%; width: 0; background: var(--accent); transition: width var(--dur) var(--ease-out); }
@media (min-width: 900px) {
  .intake-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 32px; align-items: start; }
  .intake-rail { display: block; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
  .intake-progress { display: none; }
}
.intake-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.intake-rail-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; background: transparent;
  border: 0; border-left: 2px solid var(--border); color: var(--fg-muted); font: inherit; font-size: var(--fs-ui); line-height: var(--lh-ui); cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.intake-rail-btn:hover { background: var(--bg-subtle); color: var(--fg); }
.intake-rail-btn[aria-current="step"] { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 600; }
.intake-rail-mark { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-meta); border: 1px solid var(--border-strong); }
.intake-rail-btn.is-done .intake-rail-mark { background: var(--success); border-color: var(--success); color: var(--on-success); }
.intake-rail-name { min-width: 0; }
.intake-rail-btn.is-missing .intake-rail-mark { border-color: var(--danger); color: var(--danger-text); font-weight: 700; }
.intake-rail-flag { margin-left: auto; flex: none; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--danger-text); font-weight: 600; }
.review-group { margin: 20px 0 0; }
.review-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.review-group-head h3 { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); }
.review-list { margin: 0; }
.review-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.review-item dt { grid-column: 1; font-size: var(--fs-dense); line-height: var(--lh-dense); color: var(--fg-muted); }
.review-item dd { grid-column: 1; margin: 0; font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--fg); overflow-wrap: anywhere; }
.review-item .review-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.review-missing { color: var(--danger-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .intake-progress-fill { transition: none; } }

/* ============ Contract & payment (billing) ============ */

/* Colored page-top alert (payment reminders) */
.billing-alert { padding: 12px 16px; font-size: 14px; font-weight: 600; margin-bottom: 24px; border-left: 4px solid; }
.billing-alert.overdue  { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger); }
.billing-alert.due      { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning); }
.billing-alert.proof    { background: var(--info-soft); color: var(--info-text); border-color: var(--info); }
.billing-alert.confirmed{ background: var(--success-soft); color: var(--success-text); border-color: var(--success); }

/* Billing status chips (invoice + contract) */
.chip.b-none      { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); }
.chip.b-sent      { background: var(--warning-soft); color: var(--warning-text); }
.chip.b-signed    { background: var(--success-soft); color: var(--success-text); }
.chip.b-unpaid    { background: var(--warning-soft); color: var(--warning-text); }
.chip.b-overdue   { background: var(--danger); color: var(--on-danger); }
.chip.b-proof     { background: var(--info-soft); color: var(--info-text); }
.chip.b-confirmed { background: var(--success); color: var(--on-success); }
.chip.b-void      { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); text-decoration: line-through; }

/* Student cards */
.billing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
/* chips are 12 px now: a long one ("Waiting for signature in Documenso") must wrap on a phone instead of widening the card */
.billing-card .chip, .billing-row .chip { white-space: normal; max-width: 100%; }
.billing-card { border: 1px solid var(--line); padding: 20px; background: var(--paper); }
.billing-card h3 { font-size: 16px; margin-bottom: 4px; }
.billing-card .chip { margin: 4px 0 12px; }
.billing-facts { font-size: 14px; color: var(--ink-soft); display: grid; gap: 4px; margin-bottom: 12px; }
.billing-facts b { color: var(--ink); font-weight: 700; }
.billing-facts .deadline-overdue { color: var(--danger-text); font-weight: 700; }
.billing-facts .deadline-soon { color: var(--warning-text); font-weight: 700; }
.billing-empty { font-size: 14px; color: var(--ink-soft); }
.billing-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.proof-note { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }
.proof-note b { color: var(--ink); }
.link-view {
  background: none; border: 0; padding: 0; margin-left: 8px; cursor: pointer;
  color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-view:hover { color: var(--violet); }

/* Load failures (2026-10-24): an honest panel with Retry, never a false empty state. */
.load-error { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 16px; margin: 0 0 16px; background: var(--danger-soft); color: var(--danger-text); border-left: 4px solid var(--danger); font-size: 14px; font-weight: 600; }
.load-error .btn { min-height: 32px; padding: 0 12px; font-size: 13px; border-color: var(--danger); color: var(--danger-text); background: transparent; }
.load-error .btn:hover { background: var(--danger); color: var(--on-danger); }
tr.load-error-row td { padding: 0; border: 0; }
.stage-text { font-size: 14px; }

/* Confirm dialog (.lc-dialog): see components.css. */

/* In-page document viewer (quick look) */
.file-viewer {
  position: fixed; inset: 0; z-index: 1000; background: var(--overlay-strong);
  display: flex; flex-direction: column; padding: 3vh 4vw;
}
.file-viewer .fv-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.file-viewer .fv-title {
  color: var(--on-night); font-size: 13px; font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow-wrap: anywhere; min-width: 0;
}
.file-viewer .fv-close {
  background: var(--on-night); color: var(--night); border: 0; padding: 8px 16px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; flex: none;
}
.file-viewer .fv-close:hover { background: var(--accent); color: var(--accent-fg); }
.file-viewer .fv-body {
  flex: 1; min-height: 0; background: var(--night); display: flex;
  align-items: center; justify-content: center; overflow: auto;
}
.file-viewer .fv-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-viewer .fv-body iframe { width: 100%; height: 100%; border: 0; background: var(--white); }

/* Contract e-sign form */
.sign-form { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.sign-form label.sig-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.sign-form input[type="text"] {
  width: 100%; padding: 12px 12px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 16px; border-radius: var(--radius); margin-bottom: 8px; color: var(--fg);
}
.sign-form input[type="text"]:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.sign-consent { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; cursor: pointer; }
.sign-consent input { accent-color: var(--accent); flex: none; transform: translateY(2px); }
.sign-msg { font-size: 14px; font-weight: 600; color: var(--accent-text); margin-top: 8px; }
.sign-msg.error { color: var(--danger-text); }
.signed-box { border-left: 3px solid var(--ok); padding-left: 12px; font-size: 14px; color: var(--ink-soft); }
.signed-box b { color: var(--ink); font-family: var(--font-head); font-size: 16px; display: block; }

/* Admin billing manager */
.billing-admin { display: grid; gap: 12px; }
.billing-row { border: 1px solid var(--line); padding: 16px 16px; background: var(--paper); }
.billing-row .b-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.billing-row .b-head strong { font-size: 16px; }
.billing-row .b-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.billing-row .b-col h4 { font: 500 12px/16px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.billing-row .b-line { font-size: 14px; color: var(--ink-soft); margin-bottom: 4px; }
.billing-row .b-line b { color: var(--ink); }
.billing-row .b-line.b-waiting { color: var(--warning-text); }   /* an invoice request waiting for the admin, or sent back */
.stat-money { font-variant-numeric: tabular-nums; }
.billing-row .b-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.billing-row .btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.issue-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 4px; }
.issue-form > div { display: grid; gap: 4px; }
.issue-form label { font: 500 13px/18px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--fg); }
.issue-form input {
  padding: 8px 8px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 13px; border-radius: var(--radius); width: 130px;
}
.issue-form input:focus { outline: 2px solid var(--violet); outline-offset: -1px; }

@media (max-width: 700px) {
  .billing-grid { grid-template-columns: minmax(0, 1fr); }
  .billing-row .b-cols { grid-template-columns: 1fr; }
}

/* Portal footer */
.portal-footer { background: var(--night); color: var(--on-night-muted); font-size: 13px; padding: 24px 0; }
.portal-footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portal-footer a { color: var(--on-night); }
.portal-footer a:hover { color: var(--white); }

@media (max-width: 920px) {
  .portal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .login-card { padding: 32px 24px; margin-top: 16px; }
  .portal-main { padding-top: 36px; }
  /* One back link stays on phones: the link carrying data-short shows its short text. */
  .portal-back:not([data-short]) { display: none; }
  .portal-back[data-short] { font-size: 0; letter-spacing: 0; }
  .portal-back[data-short]::after { content: attr(data-short); font-size: 13px; letter-spacing: 0.04em; }
}

/* ============ Dashboard v2 (2026-10-04): next step first ============ */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.dash-head .guide-cta { margin-top: 0; }
.next-step {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  background: var(--night); color: var(--on-night); padding: 28px 32px; margin-bottom: 24px; position: relative;
  border-left: 4px solid var(--violet);
}
.next-step.urgent { background: var(--danger-night); border-left-color: var(--on-night); }
.next-step.clear { background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-left: 4px solid var(--success); }
.next-step .next-text { flex: 1; min-width: 240px; display: grid; gap: 4px; }
.next-label { font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-night-accent); }
.next-step.urgent .next-label { color: var(--on-night); }
.next-step.clear .next-label { color: var(--success-text); }
.next-step h2 { font-size: 24px; line-height: 1.2; }
.next-step p { color: var(--on-night-muted); font-size: 16px; max-width: 640px; }
.next-step.urgent p { color: var(--on-night); }
.next-step.clear p { color: var(--fg-muted); }
.next-step .btn { flex: none; }
/* The next-step card already says "pay" or "sign": hide the duplicate bars. */
.has-next-step .billing-alert.overdue, .has-next-step .billing-alert.due { display: none; }

.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.progress-head h2 { margin-bottom: 0; }
.stage-label { font-size: 14px; color: var(--ink-soft); }
.stage-label strong { color: var(--ink); }
.stage-label .stage-next { margin-left: 12px; color: var(--accent-text); font-weight: 600; }

.portal-grid.even { grid-template-columns: 1fr 1fr; }
.waiting-list a { color: var(--ink); font-weight: 600; }
.waiting-list a:hover { color: var(--accent-text); }
.waiting-list li.more::before { background: transparent; border: 1px solid var(--violet); }
.waiting-list li.more a { color: var(--accent-text); }

.doc-group + .doc-group { margin-top: 16px; }
.doc-group-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
summary.doc-group-title { cursor: pointer; list-style: none; }
summary.doc-group-title::-webkit-details-marker { display: none; }
summary.doc-group-title > span:first-child::before { content: "+"; display: inline-block; width: 18px; color: var(--accent-text); }
details[open] > summary.doc-group-title > span:first-child::before { content: "−"; }
.doc-count { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

@media (max-width: 920px) {
  .portal-grid.even { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .next-step { padding: 24px 24px; }
  .next-step .btn { width: 100%; }
}

/* ============ Log in / sign up: brand panel + form (2026-10-04) ============ */
.login-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); max-width: 1000px; margin: 8px auto 0; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.login-split .login-card { margin: 0; border: 0; box-shadow: none; max-width: none; }
.login-aside {
  position: relative; overflow: hidden; color: var(--on-night); padding: 48px 44px; display: grid; align-content: start; gap: 24px;
  background: radial-gradient(520px 360px at 100% 0%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%), var(--night);
}
.login-aside .kicker { color: var(--on-night-accent); }
.login-aside .kicker::before { background: var(--on-night-accent); }
.login-aside h2 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.15; }
.login-aside ul { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.login-aside li { padding: 16px 0; border-bottom: 1px solid var(--line-dark); display: grid; gap: 4px; }
.login-aside li strong { font-weight: 700; font-size: 16px; }
.login-aside li span { color: var(--on-night-muted); font-size: 14px; }
.login-aside::after { content: ""; position: absolute; right: 32px; bottom: 32px; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--on-night) 35%, transparent); }
.login-aside::before { content: ""; position: absolute; right: 22px; bottom: 22px; width: 20px; height: 20px; background: var(--accent); }
@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; }
  .login-aside { padding: 32px 24px 40px; }
  .login-aside ul { display: none; }
  .login-aside::before, .login-aside::after { display: none; }
}

/* Staff dashboard: at-a-glance numbers */
.staff-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--paper); margin-bottom: 24px; }
.staff-stats .stat { padding: 16px 20px; display: grid; gap: 4px; }
.staff-stats .stat + .stat { border-left: 1px solid var(--line); }
.staff-stats strong { font-family: var(--font-head); font-weight: 400; font-size: 32px; line-height: 1.1; }
.staff-stats span { font-size: 13px; color: var(--ink-soft); }
.staff-stats .stat.alert strong { color: var(--danger-text); }
@media (max-width: 860px) {
  .staff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-stats .stat + .stat { border-left: 0; }
  .staff-stats .stat { border-top: 1px solid var(--line); }
}

/* ============ Contract e-signature via Documenso (2026-10-07) ============ */
.esign-form { margin: 8px 0 4px; }
.esign-form input[type="file"] { width: 190px; padding: 4px; font-size: 12px; }
.esign-form input[name="ref"] { width: 240px; }
.billing-row .b-line a { color: var(--accent-text); font-weight: 700; }

/* ============ Finance (bookkeeping, admins only, 2026-10-07) ============ */
.fin-filter { padding-top: 20px; padding-bottom: 20px; }
.fin-range { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.fin-range > div { display: grid; gap: 4px; }
.fin-range label, .fin-field label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.fin-range input, .fin-field input, .fin-field select {
  padding: 8px 8px; border: 1px solid var(--border-strong); background: var(--surface);
  font: inherit; font-size: 14px; border-radius: var(--radius); width: 100%; min-width: 0;
}
.fin-range input { width: 160px; }
.fin-range input:focus, .fin-field input:focus, .fin-field select:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.fin-field input[readonly] { background: var(--gray-bg); color: var(--ink-soft); }
.fin-quick { display: flex !important; gap: 8px; flex-wrap: wrap; }
#fin-csv { margin-left: auto; }
.fin-range-note { font-size: 13px; color: var(--ink-soft); margin-top: 12px; }
.fin-stats strong { font-size: 24px; overflow-wrap: anywhere; }
.fin-pending { display: grid; gap: 8px; }
.fin-forms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; align-items: start; }
#fin-app .portal-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#fin-app .portal-panel { min-width: 0; }
.fin-forms .portal-panel { margin-bottom: 0; }
.fin-form { display: grid; gap: 12px; }
.fin-field { display: grid; gap: 4px; min-width: 0; }
.fin-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fin-row .fin-field:only-child { grid-column: 1 / -1; }
.fin-form .fin-row:has(> .fin-field:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
.fin-field input[type="file"] { padding: 8px; font-size: 13px; }
.fin-pkr { font-size: 14px; font-weight: 700; color: var(--accent-text); }
.fin-replacing { font-size: 13px; background: var(--warning-soft); color: var(--warning-text); padding: 8px 12px; border-left: 3px solid var(--warning); }
.fin-form .btn { justify-self: start; }
.fin-msg { font-size: 14px; font-weight: 600; color: var(--success-text); }
.fin-msg.error { color: var(--danger-text); }
.fin-table th.num, .fin-table td.num { text-align: right; white-space: nowrap; }
.fin-table td.neg { color: var(--danger-text); }
.fin-table tfoot td { font-weight: 800; border-top: 2px solid var(--ink); border-bottom: 0; }
.fin-table .fin-empty { color: var(--ink-soft); font-size: 14px; }
.fin-table .nowrap { white-space: nowrap; }
.fin-entries { font-size: 13px; }
.fin-entries td { padding: 8px 8px; }
.fin-entries tr.is-void td { color: var(--ink-soft); }
.fin-entries tr.is-void td:not(.fin-status) { text-decoration: line-through; }
.fin-status { white-space: nowrap; }
.fin-status .btn { min-height: 28px; padding: 0 8px; font-size: 12px; }
.fin-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; background: var(--accent-soft); color: var(--accent-soft-text); margin-right: 4px; }
.fin-tag.void { background: var(--danger-soft); color: var(--danger-text); }
.fin-void-reason { display: block; white-space: normal; font-size: 12px; color: var(--ink-soft); margin-top: 4px; max-width: 220px; }
.fin-attach { margin-left: 0; }
.fin-cats { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px; margin-bottom: 16px; }
.fin-cats li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fin-cats li.retired span { color: var(--ink-soft); text-decoration: line-through; }
@media (max-width: 920px) {
  .fin-forms, #fin-app .portal-grid.even { grid-template-columns: minmax(0, 1fr); }
  #fin-csv { margin-left: 0; }
}
@media (max-width: 540px) {
  .fin-row { grid-template-columns: 1fr; }
  .fin-form .fin-row:has(> .fin-field:nth-child(2):last-child) { grid-template-columns: 1fr; }
  .fin-range input { width: 100%; }
  .fin-range > div { width: 100%; }
}

/* Admin -> Consultants and permissions (014) */
.consultant-card { border: 1px solid var(--line); padding: 16px; margin-top: 12px; }
.consultant-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.consultant-email { color: var(--ink-soft); font-size: 14px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.perm-group { border: 0; margin: 0; padding: 0; }
.perm-group legend { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.perm-row { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 1.35; padding: 4px 0; cursor: pointer; }
.perm-row input { margin-top: 4px; accent-color: var(--accent); }
.consultant-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 4px 0 4px; }
.consultant-add label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; flex: 1 1 260px; }
.consultant-add input { padding: 12px 12px; border: 1px solid var(--border-strong); background: var(--surface); font: inherit; }
.consultant-add .portal-sub { flex-basis: 100%; margin: 0; font-size: 14px; }
.consultant-head .btn-reject { margin-left: auto; }

/* ============================================================
   IMAT Practice (imat.html, js/imat-page.js) — owner ruling 2026-10-11:
   a separately sold product inside the portal.
   ============================================================ */
.imat-notice { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 8px 12px; margin: -12px 0 24px; font-size: 14px; }
.imat-notice.is-error { background: var(--danger-soft); border-left-color: var(--danger); }
.imat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.imat-stat { background: var(--paper); border: 1px solid var(--line); padding: 16px 16px; display: grid; gap: 4px; }
.imat-stat-k { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.imat-stat-v { font-family: var(--font-head); font-size: 32px; font-weight: 400; color: var(--ink); line-height: 1.1; }
.imat-stat-sub { font-size: 13px; color: var(--ink-soft); }
.imat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; align-items: center; }
.portal-panel .imat-actions { margin-bottom: 0; }
.imat-topic-list { display: grid; gap: 8px; }
.imat-topic { display: grid; grid-template-columns: minmax(0, 1fr) 140px 46px auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.imat-topic:first-child { border-top: 0; }
.imat-topic-info { display: grid; min-width: 0; }
.imat-topic-sub { font-size: 13px; color: var(--ink-soft); }
.imat-bar { height: 8px; background: var(--gray-bg); border: 1px solid var(--line); }
.imat-bar span { display: block; height: 100%; background: var(--violet); }
.imat-pct { font-weight: 700; font-size: 14px; text-align: right; }
.imat-table td, .imat-table th { white-space: nowrap; }
.imat-filters { display: grid; gap: 16px; max-width: 620px; }
.imat-field { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.imat-field select { font: inherit; font-size: 16px; font-weight: 400; color: var(--fg); padding: 8px 12px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 0; }
.imat-diffs, .imat-modes { border: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.imat-modes { display: grid; gap: 8px; }
.imat-diffs legend, .imat-modes legend { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding: 0 4px; }
.imat-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.imat-check input { margin-top: 4px; accent-color: var(--accent); }
.imat-count { font-size: 14px; color: var(--ink-soft); margin: 0; }
.imat-topbar { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--paper); border: 1px solid var(--line); padding: 8px 12px; margin-bottom: 12px; font-size: 14px; position: sticky; top: var(--header-h); z-index: 5; }
.imat-topbar > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imat-clock { font-family: var(--font-head); font-size: 16px; font-variant-numeric: tabular-nums; }
.imat-clock.is-over { color: var(--danger-text); }
.imat-panel { padding: 24px 28px; }
.imat-q-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.imat-chip { font-size: 12px; padding: 4px 8px; background: var(--accent-soft); color: var(--accent-soft-text); font-weight: 700; }
.imat-chip-soft { background: var(--surface-2); color: var(--fg-muted); }
.imat-diff { letter-spacing: 1px; }
.imat-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--accent-text); margin: 0 0 8px; }
.imat-stem { font-size: 16px; line-height: 1.6; }
.imat-stem p { margin: 0 0 8px; }
.imat-stem .attrib { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.imat-stem .olitem { margin: 4px 0 4px 4px; }
.imat-stem .qlist { margin: 4px 0 8px 20px; }
.imat-stem img.qfig { display: block; max-width: 100%; max-height: 260px; margin: 8px 0; }
.imat-stem img.qfig.large { max-height: 520px; }
.imat-stem .qtable, .imat-rich .ltable { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.imat-stem .qtable td, .imat-rich .ltable th, .imat-rich .ltable td { border: 1px solid var(--line); padding: 4px 8px; vertical-align: top; text-align: left; }
.imat-rich .ltable th { background: var(--accent-soft); }
img.math { display: inline-block; }
.imat-opts { display: grid; gap: 8px; margin: 16px 0 4px; }
.imat-opt { display: flex; gap: 12px; align-items: baseline; text-align: left; width: 100%; padding: 12px 12px; background: var(--surface); border: 1px solid var(--border-strong); font: inherit; font-size: 16px; color: var(--fg); cursor: pointer; }
.imat-opt:hover { border-color: var(--accent-text); }
.imat-opt.is-chosen { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.imat-opt.is-right { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); background: var(--success-soft); }
.imat-opt.is-wrong { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background: var(--danger-soft); }
.is-checked .imat-opt { cursor: default; }
.imat-opt-l { font-weight: 700; min-width: 18px; }
.imat-opt-t { min-width: 0; }
.imat-result { margin: 12px 0 4px; padding: 12px 12px; font-size: 16px; }
.imat-result.is-right { background: var(--success-soft); border-left: 4px solid var(--success); }
.imat-result.is-wrong { background: var(--danger-soft); border-left: 4px solid var(--danger); }
.imat-expl { display: grid; gap: 12px; margin-top: 12px; }
.imat-box { padding: 12px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.imat-box h4, .imat-det summary { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-soft); margin: 0 0 4px; }
.imat-box-mine { border-left-color: var(--danger); background: var(--danger-soft); }
.imat-box-quick { border-left-color: var(--success); background: var(--success-soft); }
.imat-box p, .imat-rich p { margin: 4px 0; }
.imat-det { border: 1px solid var(--border); background: var(--surface); padding: 8px 16px; }
.imat-det summary { cursor: pointer; margin: 0; color: var(--accent-text); }
.imat-det[open] summary { margin-bottom: 8px; }
.imat-fb { padding: 4px 0; border-top: 1px solid var(--line); font-size: 16px; }
.imat-fb p { display: inline; margin: 0; }
.imat-rich { font-size: 16px; line-height: 1.6; }
.imat-rich ul, .imat-rich ol { margin: 4px 0 8px 24px; }
.imat-hook { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 8px 12px; margin: 0; }
.imat-source { font-size: 12px; color: var(--ink-soft); margin: 0; }
.imat-hint { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
.imat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; margin-top: 16px; }
.imat-grid-b { font: inherit; font-size: 13px; padding: 8px 0; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; color: var(--fg); }
.imat-grid-b.is-done { background: var(--accent-soft); border-color: var(--accent-text); }
.imat-grid-b.is-cur { box-shadow: inset 0 0 0 2px var(--violet); font-weight: 700; }
.imat-score { font-size: 32px; margin: 8px 0 4px; }
.imat-review { display: grid; gap: 8px; }
.imat-rev { border: 1px solid var(--border); background: var(--surface); padding: 8px 12px; border-left-width: 4px; }
.imat-rev-right { border-left-color: var(--success); }
.imat-rev-wrong { border-left-color: var(--danger); }
.imat-rev-blank { border-left-color: var(--line); }
.imat-rev summary { display: flex; gap: 12px; align-items: baseline; cursor: pointer; font-size: 14px; }
.imat-rev-n { font-weight: 700; min-width: 22px; }
.imat-rev-st { margin-left: auto; color: var(--ink-soft); white-space: nowrap; }
.imat-rev[open] summary { margin-bottom: 8px; }
.imat-mock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
/* "Watch it" animations (js/imat-visual.js). The card is always light: the figures' black and white
   squares and the face colours must keep their real colours whatever the page theme. The island tokens
   (tokens.css) are theme-independent and the standard tokens are re-pointed to them inside the card, so
   buttons and text in it stay readable in dark. */
.imat-watch-body { min-width: 0; }
.imat-vis {
  --surface: var(--island-bg); --surface-2: var(--island-bg); --bg: var(--island-bg); --bg-subtle: var(--island-bg);
  --fg: var(--island-fg); --fg-muted: var(--island-muted); --fg-subtle: var(--island-muted);
  --border: var(--island-border); --border-strong: var(--island-muted); --accent-text: var(--island-accent);
  --ink: var(--island-fg); --ink-soft: var(--island-muted); --paper: var(--island-bg); --line: var(--island-border);
  --violet-dark: var(--island-accent); --violet-light: var(--island-accent);
  background: var(--island-bg); color: var(--island-fg); border: 1px solid var(--island-border); padding: 12px; color-scheme: light;
}
.imat-vis-stage { min-width: 0; }
.imat-vis-svg { display: block; width: 100%; height: auto; max-height: 460px; }
.imat-vis-lbl { font-family: var(--font-head); font-size: 16px; fill: var(--island-fg); }
.imat-vis-lbl.is-spare { fill: var(--island-accent); font-weight: 700; }
.imat-vis-3d { position: relative; }
.imat-vis-canvas { display: block; width: 100%; touch-action: pan-y; cursor: grab; }
.imat-vis-canvas:active { cursor: grabbing; }
.imat-vis-inset { display: flex; justify-content: center; align-items: flex-end; gap: 24px; min-height: 118px; margin-top: 4px; }
.imat-vis-inset.is-empty { visibility: hidden; }
.imat-vis-fig { margin: 0; display: grid; justify-items: center; gap: 4px; }
.imat-vis-fig figcaption { font-size: 13px; font-weight: 700; color: var(--island-ok); }
.imat-vis-fig.is-bad figcaption { color: var(--island-bad); }
.imat-vis-view { width: 104px; height: auto; display: block; }
.imat-vis-vlbl { font-family: var(--font-head); font-size: 20px; font-weight: 700; fill: var(--island-bg); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: color-mix(in srgb, var(--island-fg) 80%, transparent); stroke-width: 3px; }
.imat-vis-head { font-weight: 700; margin: 12px 0 4px; }
.imat-vis-head:first-child { margin-top: 0; }
.imat-vis-view-wide { width: auto; max-width: 100%; height: 140px; }
.imat-vis-hint { font-size: 12px; color: var(--island-muted); margin: 4px 0 0; }
.imat-vis-cap { min-height: 4.8em; margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
.imat-vis-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.imat-vis-count { font-size: 13px; color: var(--island-muted); margin-left: auto; }
@media (max-width: 480px) {
  .imat-vis { padding: 8px; }
  .imat-vis-count { margin-left: 0; width: 100%; }
}
.imat-access-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
@media (max-width: 640px) {
  .imat-topic { grid-template-columns: minmax(0, 1fr) auto; }
  .imat-topic .imat-bar { grid-column: 1 / -1; order: 3; }
  .imat-panel { padding: 16px 16px; }
  .imat-rev summary { flex-wrap: wrap; }
  .imat-rev-st { margin-left: 0; width: 100%; }
}

/* Website enquiries (admin.html, renderLeads) */
.lead-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lead-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lead-card { border: 1px solid var(--border); padding: 16px; background: var(--surface); }
.lead-card.is-new { border-left: 3px solid var(--accent); }
.lead-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lead-date { margin-left: auto; color: var(--ink-soft); font-size: 14px; }
.lead-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 0; }
.lead-facts dt { color: var(--ink-soft); }
.lead-facts dd { margin: 0; overflow-wrap: anywhere; }
.lead-message { margin: 12px 0 0; white-space: pre-wrap; }
.lead-work { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; margin-top: 12px; align-items: start; }
@media (max-width: 600px) {
  .lead-work { grid-template-columns: 1fr; }
  .lead-date { margin-left: 0; width: 100%; }
}

/* One-time code step under the sent-link message (log-in and sign-up). 44 px field, brand field styles. */
.login-card .code-step { margin-top: 16px; }
.portal-body .login-card .code-step .field input.code-input[inputmode] {
  height: 44px; font: 400 20px/28px var(--font-body); letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums;
}
.portal-body .login-card .code-step .field input.code-input[inputmode]::placeholder { letter-spacing: 0; }

/* ============ Student Home, Documents, Contract and payment (R5 wave 1A, proposal 6.2) ============ */
.home-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
.home-main, .home-side { display: grid; gap: 24px; min-width: 0; }
.home-main .portal-panel, .home-side .portal-panel { margin-bottom: 0; }
.home-main .portal-grid.even { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; gap: 24px; }

/* Hero: the next step, one primary button, a deadline chip */
.next-step h2 { font-size: 44px; line-height: 48px; }
.next-step .btn { flex: none; }
.next-chip { display: inline-block; justify-self: start; margin-top: 8px; padding: 2px 8px; border: 1px solid var(--on-night-muted); color: var(--on-night); font: 500 12px/18px var(--font-body); }
.next-step.clear .next-chip { border-color: var(--border-strong); color: var(--fg); }

/* Journey rail: square nodes on a line; only the current node shows its name (the others on hover) */
.stage-rail { list-style: none; display: flex; margin: 16px 0 44px; padding: 0; }
.stage-rail li { flex: 1; position: relative; height: 14px; display: block; padding: 0; border: 0; }
.stage-rail li:last-child { flex: 0 0 14px; }
.stage-rail li::after { content: ""; position: absolute; left: 14px; right: 0; top: 6px; height: 2px; background: var(--border-strong); }
.stage-rail li:last-child::after { display: none; }
.stage-rail li.done::after { background: var(--accent); }
.stage-rail .mark { position: absolute; left: 0; top: 0; width: 14px; height: 14px; box-sizing: border-box; border: 2px solid var(--border-strong); background: var(--surface); z-index: 1; }
.stage-rail li.done .mark { background: var(--accent); border-color: var(--accent); }
.stage-rail li.current .mark { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stage-rail .stage-name { position: absolute; top: 24px; left: 0; white-space: nowrap; font: 500 12px/16px var(--font-body); color: var(--fg-muted); opacity: 0; pointer-events: none; z-index: 2; background: var(--surface); padding: 0 2px; }
.stage-rail li:nth-child(n+7) .stage-name { left: auto; right: 0; }
.stage-rail li.current .stage-name { opacity: 1; color: var(--fg); font-weight: 600; }
.stage-rail li:hover .stage-name { opacity: 1; }

/* Waiting on you: a checklist; What we are doing: a quiet timeline */
.check-list, .quiet-timeline { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 14px; }
.check-list li:first-child { border-top: 0; padding-top: 0; }
.check-box { width: 16px; height: 16px; flex: none; box-sizing: border-box; border: 2px solid var(--border-strong); background: var(--surface); }
.check-title { flex: 1; min-width: 0; color: var(--fg); font-weight: 500; }
a.check-title:hover { color: var(--accent-text); }
.check-due { flex: none; padding: 2px 8px; background: var(--warning-soft); color: var(--warning-text); font: 500 12px/18px var(--font-body); }
.check-list li.empty, .check-list li.more { color: var(--fg-muted); }
.check-list li.empty { padding: 0; }
.quiet-timeline li { position: relative; padding: 0 0 14px 20px; margin-left: 4px; border-left: 2px solid var(--border); font-size: 14px; color: var(--fg-muted); }
.quiet-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.quiet-timeline li::before { content: ""; position: absolute; left: -5px; top: 5px; background: var(--surface); border: 2px solid var(--border-strong); box-sizing: content-box; width: 4px; height: 4px; }
.quiet-timeline li.now { color: var(--fg); }
.quiet-timeline li.now::before { background: var(--accent); border-color: var(--accent); }

/* Stats (label over value) and the Home summary cards */
.stat-label { display: block; font: 500 12px/16px var(--font-body); color: var(--fg-muted); }
.stat-value { display: block; font-family: var(--font-head); font-weight: 400; font-size: 32px; line-height: 36px; color: var(--fg); font-variant-numeric: tabular-nums; }
.summary-card h2 { font-size: 16px; line-height: 24px; margin-bottom: 12px; }
.summary-empty { font-size: 14px; color: var(--fg-muted); }
.summary-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.summary-due { font-size: 13px; color: var(--warning-text); font-weight: 500; }
.summary-due.is-overdue { color: var(--danger-text); }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-stat { display: grid; gap: 4px; padding: 12px; background: var(--surface-2); border: 1px solid transparent; color: var(--fg); }
.mini-stat:hover { border-color: var(--accent); }
.mini-stat .stat-value { font-size: 24px; line-height: 28px; }
.summary-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--accent-text); }
.summary-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Documents: header stat row (filters), chips, one table per group */
.doc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { text-align: left; display: grid; gap: 4px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; font: inherit; color: var(--fg); }
.stat-tile:hover { background: var(--surface-2); }
.stat-tile.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.doc-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip { height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); font: 500 13px/1 var(--font-body); cursor: pointer; }
.filter-chip:hover { background: var(--surface-2); }
.filter-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-soft-text); }
.doc-list { display: grid; gap: 16px; }
.doc-group { background: var(--surface); border: 1px solid var(--border); padding: 0 0 8px; margin: 0; }
.doc-group + .doc-group { margin-top: 0; }
.doc-group .doc-group-title { margin: 0; padding: 16px; border-bottom: 0; font-size: 16px; }
.doc-group .doc-group-note { margin: 0; padding: 0 16px 12px; max-width: 80ch; }
.doc-empty { padding: 8px 16px 12px; font-size: 14px; color: var(--fg-muted); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.doc-table th { text-align: left; padding: 8px 16px; font: 500 12px/16px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--border); background: var(--surface); }
.doc-table td { padding: 10px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.doc-table tbody tr:first-child td { border-top: 0; }
.doc-table tbody tr { cursor: pointer; }
.doc-table tbody tr:hover td { background: var(--surface-2); }
.doc-name { background: none; border: 0; padding: 0; text-align: left; font: 500 14px/20px var(--font-body); color: var(--fg); cursor: pointer; }
.doc-name:hover { color: var(--accent-text); }
.doc-stored { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--fg-muted); word-break: break-all; }
.doc-none { color: var(--fg-subtle); }
.doc-reason { font-size: 12px; line-height: 16px; color: var(--danger-text); margin-top: 6px; max-width: 34ch; }
.doc-cell-updated { white-space: nowrap; color: var(--fg-muted); }
.doc-cell-action { text-align: right; white-space: nowrap; }
.doc-cell-status { min-width: 140px; }
.doc-row label.btn { margin: 0; }

/* Side panel content (documents and receipt) */
.dp-status { margin-bottom: 12px; }
.dp-reason { margin: 0 0 12px; padding: 12px; background: var(--danger-soft); color: var(--danger-text); font-size: 13px; line-height: 18px; }
.dp-h { font: 500 12px/16px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin: 24px 0 8px; }
.dp-note { font-size: 13px; line-height: 18px; color: var(--fg-muted); margin: 8px 0 0; }
.side-panel-body .doc-instructions { font-size: 14px; line-height: 20px; color: var(--fg); }
.side-panel-body .doc-points { margin: 0; padding: 0; }
.side-panel-body .doc-points li { padding: 6px 0 6px 18px; font-size: 14px; line-height: 20px; color: var(--fg); }
.side-panel-body .doc-points li::before { top: 13px; width: 6px; height: 6px; background: var(--accent); }
.dp-rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.dp-rule { padding: 12px; background: var(--surface-2); }
.dp-rule h4 { font: 500 13px/16px var(--font-body); margin: 0 0 6px; }
.dp-rule.do h4 { color: var(--success-text); }
.dp-rule.dont h4 { color: var(--danger-text); }
.dp-rule ul { margin: 0 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 12px; line-height: 18px; color: var(--fg-muted); }
.dp-rule .scan-list li { padding: 2px 0; }
.dp-guide { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--accent-text); }
.dp-hist { display: grid; gap: 4px; }
.dp-hist-meta { font-size: 12px; color: var(--fg-muted); }
.drop-zone { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 24px 16px; border: 2px dashed var(--border-strong); background: var(--surface); cursor: pointer; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop-title { font-size: 14px; font-weight: 500; color: var(--fg); }
.drop-hint { font-size: 12px; color: var(--fg-muted); }

/* Contract and payment: the card with an action is accent-bordered, the other stays quiet */
.billing-card { padding: 24px; background: var(--surface); border: 1px solid var(--border); }
.billing-card.is-action { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.billing-card.is-quiet { background: var(--surface); }
.billing-card-hd { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.billing-card-hd h3 { font-size: 16px; line-height: 24px; margin: 0; }
.billing-card-hd .status-chip { white-space: normal; height: auto; min-height: 22px; padding-top: 4px; padding-bottom: 4px; line-height: 14px; }
.status-chip.is-void { text-decoration: line-through; }
.esign-box { border: 1px solid var(--border); background: var(--surface-2); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; color: var(--fg-muted); }
.esign-box summary { cursor: pointer; font-weight: 500; color: var(--fg); }
.esign-box ol { margin: 8px 0 0 20px; padding: 0; display: grid; gap: 4px; }
.paid-line { color: var(--success-text); font-weight: 600; }
.void-line { color: var(--fg-muted); }

@media (max-width: 920px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .next-step h2 { font-size: 28px; line-height: 32px; }
  .next-step .btn { width: 100%; }
  .stage-rail { margin-bottom: 40px; }
  .doc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-rules { grid-template-columns: minmax(0, 1fr); }
  .check-list li { flex-wrap: wrap; }
  /* Documents become cards: name, status chip with the reviewer's reason, the one action */
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; }
  .doc-table thead { display: none; }
  .doc-table tbody tr { padding: 12px 16px; border-top: 1px solid var(--border); }
  .doc-table tbody tr:first-child { border-top: 0; }
  .doc-table td { padding: 2px 0; border: 0; }
  .doc-table tbody tr:hover td { background: transparent; }
  .doc-table td.doc-cell-saved, .doc-table td.doc-cell-updated { display: none; }
  .doc-table td.doc-cell-status { min-width: 0; padding: 6px 0; }
  .doc-table td.doc-cell-action { text-align: left; padding-top: 6px; }
  .doc-cell-action .btn, .doc-cell-action label.btn { width: 100%; min-height: 44px; }
  .doc-reason { max-width: none; }
  .billing-card { padding: 16px; }
}
/* style.css gives every <section> 56 to 92 px of vertical padding (public site); on the student dashboard a routed view has none. */
.portal-body[data-portal-page="student"] .page > .view { padding-top: 0; padding-bottom: 0; }
.filter-clear { height: 32px; padding: 0 12px; border: 1px solid transparent; background: transparent; color: var(--accent-text); font: 500 13px/1 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; order: 99; }

/* My data (settings): stacked cards, a two-column grid from tablet up; the profile list is read-only. */
.mydata-grid { display: grid; gap: 16px; max-width: 720px; }
.mydata-grid .card { margin: 0; }
.mydata-grid .card-hd { margin-bottom: 12px; }
.mydata-grid .portal-sub { margin: 0 0 12px; }
.mydata-list { margin: 0 0 12px; display: grid; gap: 8px; }
.mydata-list > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; }
.mydata-list dt { font-size: 12px; font-weight: 500; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .04em; }
.mydata-list dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--fg); overflow-wrap: anywhere; }

/* Profile check (case-views.js, STUDENT_AWARE_FINDER_PLAN.md §3): one status row per item; the chip says it in words, colour only helps. */
.pc-ctx { margin: 0 0 8px; }
.pc-rows { list-style: none; margin: 0; padding: 0; }
.pc-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 8px 0; border-top: 1px solid var(--border); }
.pc-row:first-child { border-top: 0; }
.pc-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; min-width: 0; }
.pc-date { font-size: 12px; color: var(--fg); white-space: nowrap; }
.pc-source { max-width: 220px; }
.status-chip.pc-chip { height: auto; min-height: 22px; padding-top: 4px; padding-bottom: 4px; line-height: 14px; white-space: normal; }
.status-chip.pc-have { background: var(--success-soft); color: var(--success-text); }
.status-chip.pc-todo { background: var(--warning-soft); color: var(--warning-text); }
.status-chip.pc-missing { background: var(--danger-soft); color: var(--danger-text); }
.status-chip.pc-na { background: var(--surface-2); color: var(--fg-muted); border-color: var(--border); }
@media (max-width: 600px) {
  .pc-side { justify-content: flex-start; }
  .pc-source { max-width: none; }
}
/* Month and Year picker for the questionnaire's month-year answers (portal.js monthYearWidget). */
.intake-monthyear { display: flex; gap: 8px; flex-wrap: wrap; }
.intake-monthyear select { flex: 1 1 140px; min-width: 0; }
/* Login: Student, Consultant or Admin (portal.js wireLoginAs). */
.login-as { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-strong); margin-bottom: 24px; }
.login-as-btn { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 8px; background: var(--surface); color: var(--ink); border: 0; border-left: 1px solid var(--border-strong); border-radius: 0; cursor: pointer; }
.login-as-btn:first-child { border-left: 0; }
.login-as-btn:hover { background: var(--surface-2); }
.login-as-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.login-as-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* The router moves focus to the page heading for screen readers; the heading never needs a visible ring. */
.portal-body h1[tabindex="-1"]:focus, .portal-body h1[tabindex="-1"]:focus-visible { outline: none; }

/* ---- the portal as an app (js/pwa.js, 2026-11-03): the sign-in line, the guide panel, the offline page ---- */
.login-app .btn-text { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.login-app .btn-text:hover { color: var(--accent-hover); }
.login-app .btn-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.app-guide h3 { margin: 20px 0 6px; font: 600 14px/20px var(--font-body); color: var(--fg); }
.app-guide p { margin: 0 0 10px; color: var(--fg-muted); font-size: 14px; line-height: 1.6; }
.app-guide .app-guide-lead { color: var(--fg); }
.app-steps { list-style: decimal; margin: 0 0 12px; padding-left: 22px; color: var(--fg); font-size: 14px; line-height: 1.6; }
.app-steps li + li { margin-top: 6px; }
.app-benefits { list-style: disc; margin: 0; padding-left: 18px; color: var(--fg-muted); font-size: 14px; line-height: 1.6; }
.app-benefits li + li { margin-top: 4px; }
.offline-body { min-height: 100vh; display: flex; align-items: center; background: var(--bg); color: var(--fg); }
.offline-card { max-width: 520px; padding: 48px 24px; }
.offline-card h1 { margin: 8px 0 12px; }
.offline-card p { color: var(--fg-muted); line-height: 1.6; }

/* ============ Staff second step (080): full-screen card over the page until the authenticator code passes ============ */
.mfa-gate { position: fixed; inset: 0; z-index: 2000; overflow-y: auto; background: var(--bg); display: flex; align-items: flex-start; justify-content: center; padding: 16px; }
.mfa-gate .login-card { width: 100%; margin: 24px auto; }
.mfa-steps { margin: 0 0 16px 20px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.mfa-qr { display: flex; justify-content: center; align-items: center; min-height: 224px; margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); text-align: center; }
.mfa-qr img { background: #FFFFFF; padding: 12px; border: 1px solid var(--line); max-width: 100%; height: auto; } /* tokens-ok: a QR code must stay dark on white in both themes */
.mfa-qr.is-error { color: var(--danger-text); font-weight: 600; }
.mfa-secret { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); }
.mfa-secret summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.mfa-key { display: block; margin-top: 8px; padding: 8px 12px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: 0.08em; overflow-wrap: anywhere; user-select: all; color: var(--fg); }
.mfa-form .field { margin-bottom: 16px; }
.mfa-form input.code-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); font: 400 20px/28px var(--font-body); letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; border-radius: var(--radius); }
.mfa-form input.code-input:focus { outline: 2px solid var(--violet); outline-offset: -1px; }
.mfa-alt { margin-top: 16px; display: flex; justify-content: center; }
@media (max-width: 600px) { .mfa-gate { padding: 0; } .mfa-gate .login-card { margin: 0; border: 0; box-shadow: none; padding: 32px 20px; min-height: 100%; } }