/* app.css — one stylesheet, mobile-first (section 9).
   Character: a paper ledger for a law college — parchment paper, ink navy,
   brass rules, a serif for headings and figures, a quiet sans for controls.
   High contrast, buttons at least 44 px tall, no external assets. */

:root {
    --ink: #1c2333;
    --ink-soft: #5d6474;
    --paper: #f6f1e6;
    --card: #fffdf7;
    --line: #e2d9c6;
    --line-strong: #c9bda3;
    --navy: #22375c;
    --navy-deep: #16243d;
    --navy-soft: #e9edf5;
    --brass: #9a6f24;
    --brass-soft: #f2e5c8;
    --accent: var(--navy);
    --accent-ink: #fffdf7;
    --ok: #1f5c3d;
    --ok-bg: #e8f1ea;
    --risk: #8a5a12;
    --risk-bg: #f8eed6;
    --bad: #8a1f2d;
    --bad-bg: #f8e6e6;
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 0 rgba(28, 35, 51, 0.04), 0 10px 24px -22px rgba(28, 35, 51, 0.55);
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* The sticky chrome bands keep their own inks so they read as furniture,
       not as part of the paper. */
    --topbar-bg: #22375c;
    --topbar-ink: #f6f1e6;
    --topbar-sub: #e7c98a;
    --footer-bg: #ece2cb;
    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    background-image: radial-gradient(circle at 18% 0%, rgba(154, 111, 36, 0.07), transparent 42%);
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.16em;
}

.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

.page.wide { max-width: 980px; }

/* ---- Top bar: the college seal and the way home ------------------------- */
/* ---- Top bar: sticky navy band with the college seal --------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 -16px 22px;
    background: var(--topbar-bg);
    color: var(--topbar-ink);
    border-bottom: 1px solid rgba(231, 201, 138, 0.28);
    box-shadow: 0 2px 12px rgba(9, 14, 26, 0.24);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: #e7c98a;
    color: #22375c;
    box-shadow: inset 0 0 0 2px rgba(34, 55, 92, 0.35);
}

.brand-mark .icon { width: 22px; height: 22px; }

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-college {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--topbar-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52vw;
}

.brand-app {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--topbar-sub);
    font-weight: 700;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--topbar-ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.topbar-link:hover { background: rgba(246, 241, 230, 0.1); text-decoration: none; }

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3 {
    line-height: 1.25;
    margin: 0 0 12px;
}

h1 {
    font-family: var(--serif);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h2 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
}

h3 {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
}

.page-header h1 { margin: 8px 0 18px; }

.content > h1:first-child {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}

/* Title block: icon tile, heading, one clarifying line. */
.title-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 12px;
    background: var(--brass-soft);
    color: var(--navy);
    box-shadow: inset 0 0 0 1px rgba(154, 111, 36, 0.18);
}

.title-icon .icon { width: 26px; height: 26px; }

.title-text { min-width: 0; }

.title-block h1 { margin: 0; }

.title-sub {
    margin: 3px 0 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

/* The role label above a heading, e.g. "Admin". */
.eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--brass);
    margin: 0 0 2px;
}

.content { width: 100%; }

.muted { color: var(--ink-soft); }

/* ---- Cards -------------------------------------------------------------- */
.card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin: 0 0 14px;
    box-shadow: var(--shadow);
}

details.card summary {
    cursor: pointer;
    font-weight: 650;
    display: flex;
    align-items: center;
    gap: 8px;
}

details.card summary .icon { width: 1.1em; height: 1.1em; color: var(--brass); }

/* One stacked button per student when a mobile + DOB matches more than one. */
.choice-form { display: block; margin: 0 0 8px; }

.choice-form button { width: 100%; justify-content: flex-start; }

details.card summary::marker { color: var(--brass); }

/* ---- Forms -------------------------------------------------------------- */
label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    margin: 14px 0 5px;
}

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], select, textarea {
    display: block;
    width: 100%;
    font: inherit;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fffefb;
    color: var(--ink);
}

input:hover, select:hover, textarea:hover { border-color: #b6a884; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
    border-color: var(--navy);
}

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px 14px;
    margin: 14px 0;
}

legend { font-weight: 700; font-size: 0.9rem; padding: 0 6px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn, button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    margin: 8px 4px 8px 0;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.2;
    border: 1px solid var(--navy);
    border-radius: var(--radius-sm);
    background: var(--navy);
    color: var(--accent-ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease;
}

.btn:hover, button:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

.btn:active, button:active { transform: translateY(1px); }

.btn.secondary {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--line-strong);
}

.btn.secondary:hover { background: var(--navy-soft); border-color: var(--navy); }

.btn .icon, button .icon { width: 1.05em; height: 1.05em; }

.btn:focus-visible, button:focus-visible, a:focus-visible {
    outline: 3px solid var(--brass);
    outline-offset: 2px;
}

/* ---- Links -------------------------------------------------------------- */
a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: rgba(34, 55, 92, 0.35);
    text-underline-offset: 3px;
}

a:hover { color: var(--navy-deep); text-decoration-color: var(--brass); }

/* ---- Messages ----------------------------------------------------------- */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-left: 4px solid var(--navy);
    background: var(--navy-soft);
    padding: 11px 14px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 14px 0;
    color: var(--ink);
}

.notice.warn { border-color: var(--bad); background: var(--bad-bg); }

.warn-text { color: var(--bad); font-weight: 600; }

.banner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border-left: 4px solid currentColor;
    background: var(--card);
}

.tone-eligible { color: var(--ok); background: var(--ok-bg); }
.tone-risk { color: var(--risk); background: var(--risk-bg); }
.tone-short { color: var(--bad); background: var(--bad-bg); }
.tone-none { color: var(--ink-soft); background: var(--navy-soft); }

.banner .icon { width: 1.25em; height: 1.25em; }

/* A short status word on a table row or card. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid currentColor;
}

.error-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--bad);
    border-radius: var(--radius);
    padding: 24px 18px;
    margin-top: 32px;
}

/* ---- Tables ------------------------------------------------------------- */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    margin: 12px 0 16px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th, td {
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

th {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: #f3ecdc;
    border-bottom: 1px solid var(--line-strong);
}

tbody tr:last-child td, tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: rgba(154, 111, 36, 0.05); }

.short-cell { font-weight: 700; color: var(--bad); }

/* ---- Metrics ------------------------------------------------------------ */
.tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

.tile {
    flex: 1 1 140px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--card);
}

.tile strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--navy);
}

/* ---- Hub: the staff home screen ---------------------------------------- */
.welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 4px 0 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}

.welcome h1 { margin: 0; }

.welcome-meta { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.95rem; }

.welcome-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.welcome-actions form { display: inline-flex; margin: 0; }

.welcome-actions .btn, .welcome-actions button { margin: 0; }

.hub-group { margin-top: 26px; }

.hub-group > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.08rem;
    margin: 0 0 10px;
}

.hub-group > h2 .icon { width: 1rem; height: 1rem; color: var(--brass); }

.hub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.hub-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: inherit;
    text-decoration: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.hub-tile:hover {
    border-color: var(--brass);
    box-shadow: 0 6px 18px -16px rgba(28, 35, 51, 0.8);
    transform: translateY(-1px);
    text-decoration: none;
}

.hub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    background: var(--brass-soft);
    color: var(--navy);
}

.hub-icon .icon { width: 20px; height: 20px; }

.hub-text { display: flex; flex-direction: column; min-width: 0; }

.hub-label { font-weight: 650; font-size: 0.97rem; }

.hub-meta { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; }

/* ---- Sign-in ------------------------------------------------------------ */
.auth-hero {
    padding: 10px 0 6px;
    margin-bottom: 18px;
}

.auth-hero h1 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}

.auth-hero .lede {
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0;
}

.auth-card h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
}

.auth-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 12px;
    font-size: 0.92rem;
}

.auth-switch a { font-weight: 650; }

.signin-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Calendar ----------------------------------------------------------- */
.month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.month .dow,
.month .empty,
.month .day {
    min-height: 44px;
    text-align: center;
    padding: 8px 0;
}

.month .dow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.month .day {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
}

.month .day:hover { border-color: var(--brass); text-decoration: none; }

.month .today { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.month .picked { background: var(--navy); color: var(--accent-ink); }

/* ---- Attendance screens ------------------------------------------------- */
.day-list { padding-left: 1.2rem; }
.day-list li { margin: 2px 0; }

.confirm-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.tap-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 2px 10px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}

.tap-row:nth-child(odd) { background: rgba(34, 55, 92, 0.035); }
.tap-row:hover { border-color: var(--line); }
.tap-row input { width: auto; min-height: 24px; accent-color: var(--bad); }

.week { display: flex; flex-wrap: wrap; gap: 12px; }
.week-col { flex: 1 1 16rem; max-width: 100%; }

.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px;
    background: var(--navy-soft);
    border-radius: var(--radius-sm);
    margin: 14px 0;
}

.tabs a, .tabs strong {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    text-decoration: none;
}

.tabs strong { background: var(--card); box-shadow: var(--shadow); }

/* ---- Student: percentages, meters, cards -------------------------------- */
.pct {
    font-family: var(--serif);
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1.05;
    margin: 2px 0;
}

.meter {
    height: 10px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0;
}

.meter span { display: block; height: 10px; background: currentColor; border-radius: 999px; }

a.subject-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-left: 4px solid currentColor;
}

a.subject-card:hover { border-color: var(--brass); text-decoration: none; }

a.subject-card > p:first-child,
a.subject-card .subject-name {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.profile-card { padding: 14px 18px; }

.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 0;
}

.facts dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.facts dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--navy);
}

.session-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--ink-soft); }

.student-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.student-actions form { display: inline-flex; margin: 0; }
.student-actions .btn, .student-actions button { margin: 0; }

.subject-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin: 4px 0;
}

.subject-count, .subject-advice { margin: 4px 0; font-size: 0.9rem; }
.subject-advice { color: var(--ink-soft); }

.subject-credit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--brass);
    font-weight: 650;
}

.pct-sm { font-size: 1.7rem; }

.past-card { border-left: 4px solid currentColor; }
.past-subject {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.past-detail { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.record-list li { margin: 3px 0; }

.page.student { padding-bottom: 92px; }

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 6px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background: var(--card);
    border-top: 1px solid var(--line);
    z-index: 30;
}

.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    max-width: 160px;
    min-height: 48px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 650;
}

.bottom-nav a .icon { width: 20px; height: 20px; color: var(--navy); }
.bottom-nav a:hover { background: var(--navy-soft); text-decoration: none; }

/* ---- Footer ------------------------------------------------------------- */
/* The health-check strip is the last row of the footer band: tone-on-tone,
   separated by a hairline instead of floating as a card. */
.system-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0 0;
    border-top: 1px solid var(--line-strong);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

.status-indicator { display: inline-flex; align-items: center; gap: 6px; }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bad);
}

.status-dot.ok { background: var(--ok); }
.status-dot.warn { background: var(--risk); }

.status-text { font-weight: 600; }

.page-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    margin: 26px -16px -40px;                 /* full-bleed band over the page padding */
    background: var(--footer-bg);
    border-top: 3px double var(--line-strong);
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* Student pages have the fixed bottom-nav, so their footer stops above it. */
.page.student .page-footer {
    margin-bottom: 0;
}

.footer-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-brand { font-weight: 600; color: var(--ink); }

.footer-mark {
    display: inline-flex;
    color: var(--brass);
}

.footer-mark .icon { width: 18px; height: 18px; }

.footer-version { font-size: 0.75rem; }

.footer-note { font-size: 0.75rem; }

/* Compact rows: brand on the left, small controls on the right. */
.footer-brandline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.footer-pill {
    min-height: 34px;
    padding: 3px 12px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 650;
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    gap: 5px;
}

.footer-pill .icon { width: 0.95em; height: 0.95em; color: var(--brass); }

.footer-pill:hover {
    background: var(--brass-soft);
    border-color: var(--brass);
    text-decoration: none;
}

.footer-pill[aria-expanded="true"] {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--accent-ink);
}

.footer-pill[aria-expanded="true"] .icon { color: inherit; }

.footer-panel { margin-top: 10px; }

.footer-panel .faq-accordion { margin-top: 0; }

/* The privacy notice text inside its footer panel. */
.privacy-inline {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 12px 16px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.privacy-inline p { margin: 0 0 6px; }
.privacy-inline p:last-child { margin-bottom: 0; }

.privacy-full-link { margin-top: 8px !important; font-weight: 600; }

/* The privacy notice under the sign-in form (spec 8.7: small text under the
   form). The stored text is self-labelling ("Privacy notice. This college…"),
   so the UI adds no second heading above it. */
.privacy-note {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.privacy-note p { margin: 0 0 6px; }
.privacy-note p:last-child { margin-bottom: 0; }

.page-footer { gap: 8px; padding-top: 12px; }

.faq-accordion {
    margin-top: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    overflow: hidden;
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }

.faq-question {
    width: 100%;
    justify-content: space-between;
    text-align: left;
    padding: 12px 16px;
    margin: 0;
    min-height: 46px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.faq-question:hover { background: rgba(34, 55, 92, 0.05); }

.faq-question::after {
    content: '+';
    font-size: 1.3rem;
    line-height: 1;
    color: var(--brass);
}

.faq-question.open::after { content: '−'; }

.faq-answer {
    padding: 0 16px 12px;
    color: var(--ink-soft);
    line-height: 1.55;
    display: none;
}

.faq-item.open .faq-answer { display: block; }

.developer-info { font-size: 0.75rem; }
.privacy-link { font-size: 0.75rem; }

/* ---- Theme -------------------------------------------------------------- */
.theme-toggle {
    position: static;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(246, 241, 230, 0.35);
    background: rgba(246, 241, 230, 0.06);
    color: var(--topbar-ink);
    border-radius: 50%;
}

.theme-toggle:hover {
    background: rgba(246, 241, 230, 0.14);
    border-color: rgba(246, 241, 230, 0.6);
}

.theme { display: none; align-items: center; justify-content: center; }
.theme .icon { width: 20px; height: 20px; }

.light-mode .icon-moon { display: inline-flex; }
.dark-mode .icon-sun { display: inline-flex; }

/* With scripting off, the OS preference still picks the visible glyph. */
@media (prefers-color-scheme: dark) {
    html:not(.light-mode) .icon-sun { display: inline-flex; }
}

.dark-mode {
    color-scheme: dark;
    --ink: #f1eee5;
    --ink-soft: #b9b4a6;
    --paper: #121723;
    --card: #1a2130;
    --line: #2e3747;
    --line-strong: #445064;
    --navy: #9db8df;
    --navy-deep: #c3d4ee;
    --navy-soft: #202a3b;
    --brass: #d8b26a;
    --brass-soft: #2b2a24;
    --accent: #9db8df;
    --accent-ink: #111823;
    --ok: #8fd3a8;
    --ok-bg: #16281f;
    --risk: #e2bd7a;
    --risk-bg: #2a2418;
    --bad: #f0a3a3;
    --bad-bg: #2c1b1e;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 10px 24px -20px rgba(0, 0, 0, 0.9);
    --topbar-bg: #070c14;
    --topbar-ink: #f1eee5;
    --topbar-sub: #d8b26a;
    --footer-bg: #1b2434;
}

@media (prefers-color-scheme: dark) {
    html:not(.light-mode) {
        color-scheme: dark;
        --ink: #f1eee5;
        --ink-soft: #b9b4a6;
        --paper: #121723;
        --card: #1a2130;
        --line: #2e3747;
        --line-strong: #445064;
        --navy: #9db8df;
        --navy-deep: #c3d4ee;
        --navy-soft: #202a3b;
        --brass: #d8b26a;
        --brass-soft: #2b2a24;
        --accent: #9db8df;
        --accent-ink: #111823;
        --ok: #8fd3a8;
        --ok-bg: #16281f;
        --risk: #e2bd7a;
        --risk-bg: #2a2418;
        --bad: #f0a3a3;
        --bad-bg: #2c1b1e;
        --topbar-bg: #070c14;
        --topbar-ink: #f1eee5;
        --topbar-sub: #d8b26a;
        --footer-bg: #1b2434;
    }
}

.light-mode {
    color-scheme: light;
    --ink: #1c2333;
    --ink-soft: #5d6474;
    --paper: #f6f1e6;
    --card: #fffdf7;
    --line: #e2d9c6;
    --line-strong: #c9bda3;
    --navy: #22375c;
    --navy-deep: #16243d;
    --navy-soft: #e9edf5;
    --brass: #9a6f24;
    --brass-soft: #f2e5c8;
    --accent: #22375c;
    --accent-ink: #fffdf7;
    --ok: #1f5c3d;
    --ok-bg: #e8f1ea;
    --risk: #8a5a12;
    --risk-bg: #f8eed6;
    --bad: #8a1f2d;
    --bad-bg: #f8e6e6;
    --topbar-bg: #22375c;
    --topbar-ink: #f6f1e6;
    --topbar-sub: #e7c98a;
    --footer-bg: #ece2cb;
}

.dark-mode input, .dark-mode select, .dark-mode textarea {
    background: #141a26;
    color: var(--ink);
    border-color: var(--line-strong);
}

/* ---- Small pieces ------------------------------------------------------- */
form.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

form.inline input.roll-input {
    width: 5rem;
    min-height: 38px;
    padding: 6px 8px;
}

/* Asterisk on a required setup field. */
.required {
    color: var(--bad);
    font-weight: 700;
}

.inline input { width: auto; min-height: 38px; padding: 6px 8px; }

input.mass-lecture, input.record-day { width: 20px; min-height: 20px; accent-color: var(--navy); }

.mass-lecture { margin-right: 6px; }

.record-day { margin-right: 8px; }

.print-btn, .snapshot-png { min-height: 40px; padding: 8px 14px; }

/* ---- Motion ------------------------------------------------------------- */
.content {
    animation: rise 260ms ease-out both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    button, .btn, .hub-tile, .content { transition: none; animation: none; }
}

/* ---- Wider screens ------------------------------------------------------ */
@media (min-width: 640px) {
    .page { padding: 0 24px 48px; }
    .page-header h1 { font-size: 2rem; }
    .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar { margin: 0 -24px 24px; padding: 14px 24px; }
    .page-footer { margin: 26px -24px -48px; padding-left: 24px; padding-right: 24px; }
    .brand-college { max-width: none; }
}

@media (min-width: 900px) {
    .hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Print -------------------------------------------------------------- */
@media print {
    @page { size: A4; margin: 12mm; }

    .no-print, .bottom-nav, .btn, button, .page-footer, .theme-toggle,
    .system-status, .topbar, .faq-accordion { display: none !important; }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .page { max-width: none; padding: 0; }
    .card, .table-scroll { border: 1px solid #999; box-shadow: none; }
    .print-head { display: block; }
    thead { display: table-header-group; }
    tr { break-inside: avoid; }
}

/* ---- Meters: one class per whole percent (the app prints p0..p100) ------- */
.p0 { width: 0%; }
.p1 { width: 1%; }
.p2 { width: 2%; }
.p3 { width: 3%; }
.p4 { width: 4%; }
.p5 { width: 5%; }
.p6 { width: 6%; }
.p7 { width: 7%; }
.p8 { width: 8%; }
.p9 { width: 9%; }
.p10 { width: 10%; }
.p11 { width: 11%; }
.p12 { width: 12%; }
.p13 { width: 13%; }
.p14 { width: 14%; }
.p15 { width: 15%; }
.p16 { width: 16%; }
.p17 { width: 17%; }
.p18 { width: 18%; }
.p19 { width: 19%; }
.p20 { width: 20%; }
.p21 { width: 21%; }
.p22 { width: 22%; }
.p23 { width: 23%; }
.p24 { width: 24%; }
.p25 { width: 25%; }
.p26 { width: 26%; }
.p27 { width: 27%; }
.p28 { width: 28%; }
.p29 { width: 29%; }
.p30 { width: 30%; }
.p31 { width: 31%; }
.p32 { width: 32%; }
.p33 { width: 33%; }
.p34 { width: 34%; }
.p35 { width: 35%; }
.p36 { width: 36%; }
.p37 { width: 37%; }
.p38 { width: 38%; }
.p39 { width: 39%; }
.p40 { width: 40%; }
.p41 { width: 41%; }
.p42 { width: 42%; }
.p43 { width: 43%; }
.p44 { width: 44%; }
.p45 { width: 45%; }
.p46 { width: 46%; }
.p47 { width: 47%; }
.p48 { width: 48%; }
.p49 { width: 49%; }
.p50 { width: 50%; }
.p51 { width: 51%; }
.p52 { width: 52%; }
.p53 { width: 53%; }
.p54 { width: 54%; }
.p55 { width: 55%; }
.p56 { width: 56%; }
.p57 { width: 57%; }
.p58 { width: 58%; }
.p59 { width: 59%; }
.p60 { width: 60%; }
.p61 { width: 61%; }
.p62 { width: 62%; }
.p63 { width: 63%; }
.p64 { width: 64%; }
.p65 { width: 65%; }
.p66 { width: 66%; }
.p67 { width: 67%; }
.p68 { width: 68%; }
.p69 { width: 69%; }
.p70 { width: 70%; }
.p71 { width: 71%; }
.p72 { width: 72%; }
.p73 { width: 73%; }
.p74 { width: 74%; }
.p75 { width: 75%; }
.p76 { width: 76%; }
.p77 { width: 77%; }
.p78 { width: 78%; }
.p79 { width: 79%; }
.p80 { width: 80%; }
.p81 { width: 81%; }
.p82 { width: 82%; }
.p83 { width: 83%; }
.p84 { width: 84%; }
.p85 { width: 85%; }
.p86 { width: 86%; }
.p87 { width: 87%; }
.p88 { width: 88%; }
.p89 { width: 89%; }
.p90 { width: 90%; }
.p91 { width: 91%; }
.p92 { width: 92%; }
.p93 { width: 93%; }
.p94 { width: 94%; }
.p95 { width: 95%; }
.p96 { width: 96%; }
.p97 { width: 97%; }
.p98 { width: 98%; }
.p99 { width: 99%; }
.p100 { width: 100%; }