/* =============================================================================
 * Shared chrome for the teacher pages.
 *
 * The admin pages each inline their own copy of this. Four more copies was not
 * worth it: these screens sit next to each other and a teacher moves between
 * them in one sitting, so a divergence between them reads as a bug rather than
 * as a style.
 *
 * From v1.27.0 this is the light look every page shares — paper, white cards,
 * navy and the serif headings — and every colour here is a role named in
 * css/site.css (--line, --muted, --good-soft) rather than a value. The dark
 * navy glass these pages wore until then was chosen to match admin/; the owner
 * chose one look for the whole site instead, and a colour typed out here would
 * be the first thing to drift from it.
 *
 * The other half of v1.27.0 is the phone. A teacher marks a telling with the
 * student in front of them, which is to say on the phone in their hand, and
 * every one of these pages was a desktop table in a 300px box: the register
 * showed three of its eight columns, the memory-verse Pass and Fail buttons sat
 * off the right edge, and Save on the mark sheet was 2,900px below the grade it
 * saved. Under 720px:
 *   - tables become one card per row (site.css's `table.stack`, or the
 *     register's own denser card below)
 *   - every button is at least --tap (44px) tall
 *   - the stat tiles go two across, folded to the ones that lead
 *   - the mark sheet's Save is pinned above the tab bar
 *
 * Needs css/site.css linked first. Cached by the .htaccess FilesMatch rule for
 * js|css, which revalidates on Last-Modified rather than serving a stale copy.
 * ========================================================================== */

body { padding: 0; }

.container { max-width: var(--w-wide); margin: 0 auto; padding: 0 24px 48px; }
.container.narrow { max-width: var(--w-main); }

h1 { font-size: 2rem; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h2.section-title { font-size: 1.3rem; margin: 0 0 4px; }
.subtitle { color: var(--muted); font-size: .95rem; margin: 0; }
p { margin: 0; }

.page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head .who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* The way back. A 15px text link was the only route from a test back to the
   student it belongs to; it is a button-sized target now, and says where it
   goes. */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 2px -10px; font-size: .92rem; }
.crumbs a {
    display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 10px;
    border-radius: 10px; color: var(--navy); text-decoration: none; font-weight: 600;
}
.crumbs a:hover { background: var(--paper-2); }
.crumbs .sep { display: inline-flex; align-items: center; color: var(--faint); }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.card.flush { padding: 0; overflow: hidden; }
.card-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 12px 16px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.card.flush > .card-header { padding: 18px 20px 0; }
.card-title { font: 600 1.25rem/1.2 var(--serif); color: var(--ink); }
.card-note { font-size: .88rem; color: var(--muted); margin-top: 4px; line-height: 1.5; max-width: 70ch; }

/* Buttons -------------------------------------------------------------- */
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button, .btn {
    font-family: var(--sans); font-size: .92rem; font-weight: 600;
    /* 44px and 12px, as on every other page (v1.28.0); these were 40 and 10. */
    min-height: var(--tap); padding: 0 16px; border-radius: 12px;
    border: 1.5px solid var(--navy); background: var(--card); color: var(--navy);
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
}
button:hover, .btn:hover { background: var(--navy-soft); }
button.primary, .btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--navy-2); }
button.quiet, .btn.quiet { border-color: var(--line); color: var(--ink); }
button.quiet:hover, .btn.quiet:hover { background: var(--paper-2); }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Withdrawing a student is reversible — their marks are kept — but it is not
   something to press by accident on the way to Mark a telling. */
button.danger, .btn.danger { border-color: #E2B2AB; color: var(--bad); }
button.danger:hover, .btn.danger:hover { background: var(--bad-soft); }
button.good { border-color: #9BC7AE; color: var(--good); }
button.good:hover { background: var(--good-soft); }

/* The ⋯ on a phone's page head: the page's lesser actions, in a sheet. */
.morebtn { width: var(--tap); min-width: var(--tap); padding: 0; border-color: var(--line); color: var(--ink); font-size: 1.3rem; }
.phone-only { display: none !important; }

/* Filter chips --------------------------------------------------------- */
.chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip, select.chip {
    min-height: 40px; padding: 0 14px; border-radius: 999px; width: auto;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    font: 500 .92rem var(--sans); white-space: nowrap;
}
.chip:hover { background: var(--paper-2); }
.chip.primary, .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip b { font-weight: 700; margin-left: 2px; }
select.chip { padding-right: 30px; cursor: pointer; }

/* Stat tiles ----------------------------------------------------------- */
.tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px; margin-bottom: 18px;
}
.tile {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 16px; min-width: 0;
}
.tile .k { font-size: .8rem; color: var(--muted); }
.tile .v {
    font: 600 1.6rem/1.15 var(--serif); color: var(--ink); margin-top: 2px;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.tile .v small { font: 400 .85rem var(--sans); color: var(--muted); }
/* A lesson's name is a sentence, not a number; set it as one. */
.tile.wide .v { font: 600 1.05rem/1.3 var(--sans); }
.tile.wide { grid-column: span 2; }
.tile.flag { background: var(--bad-soft); border-color: #E9BDB7; }
.tile.flag .v { color: var(--bad); }
.tilefold, .tilefold[hidden] { display: none; }

/* Tables --------------------------------------------------------------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
    text-align: left; font-size: .78rem; color: var(--muted); font-weight: 600;
    padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.warn td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.sname { font-weight: 600; color: var(--ink); text-decoration: none; }
a.sname:hover { color: var(--navy); text-decoration: underline; }
.sid { display: block; font-size: .78rem; color: var(--faint); }
.muted { color: var(--faint); }
.empty { text-align: center; color: var(--faint); padding: 30px 12px; }

.pill {
    display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
    font: 600 .78rem var(--sans); white-space: nowrap;
    background: var(--paper-2); color: var(--muted);
}
.pill.ok { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.navy { background: var(--navy-soft); color: var(--navy); }

/* A lesson only this teacher can finish — it has no test to sit. */
.needs-review {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px;
    font: 600 .8rem var(--sans); background: var(--warn-soft); color: var(--warn);
    white-space: nowrap; text-decoration: none; border: 1px solid #E5CFA4;
}
.needs-review:hover { background: var(--gold-soft); }

/* A reference that opens the reading panel. A button, because it does
   something rather than going somewhere — drawn as the reference chip the
   student pages use, so it reads as something to press. */
.linky, .ref {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 32px; padding: 0 10px; border-radius: 8px; border: 0;
    background: var(--navy-soft); color: var(--navy);
    font: 600 .88rem var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.linky:hover, .ref:hover { background: #D5DEEC; }

/* The note a teacher leaves on a recitation, edited in the row it belongs to.
   The student reads it, so it is a field and not a tooltip. */
.notebox { width: 100%; min-width: 180px; }
/* The lesson's name is the row's name; let it have room to be read. */
table.verses td:first-child { min-width: 190px; }

/* The memory verse on the mark sheet, beside the telling it was recited with. */
.verse-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.verse-body {
    margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
    background: var(--gold-soft); font: 500 1.05rem/1.5 var(--serif); color: var(--ink);
}
.verse-body .vn { font: .7rem var(--sans); color: var(--gold); vertical-align: super; margin-right: 2px; }
.verse-body.muted { background: var(--paper-2); color: var(--muted); font: .92rem var(--sans); }

/* Pass, Fail and Clear belong on one line. Wrapped, Clear lands under Fail and
   the row's height doubles for a button most rows do not have. */
.btnrow.tight { flex-wrap: nowrap; justify-content: flex-end; }
.btnrow.tight button { min-height: 36px; padding: 0 12px; font-size: .85rem; }

.bar { height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; min-width: 70px; }
.bar i { display: block; height: 100%; background: var(--good); border-radius: inherit; }
.bar.bad i { background: var(--bad); }

/* Messages ------------------------------------------------------------- */
.message {
    display: none; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .92rem;
    border: 1px solid transparent;
}
.message.visible { display: block; }
.message.error { background: var(--bad-soft); border-color: #E9BDB7; color: var(--bad); }
.message.success { background: var(--good-soft); border-color: #9BC7AE; color: var(--good); }
.message.info { background: var(--navy-soft); border-color: #C4D0E3; color: var(--navy); }

/* Forms ---------------------------------------------------------------- */
label.field { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=date], select, textarea {
    width: 100%; font-family: var(--sans); font-size: 1rem; min-height: 44px; padding: 8px 12px;
    border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.formgrid { display: grid; gap: 14px; }
@media (min-width: 720px) { .formgrid.two { grid-template-columns: 2fr 1fr; } }

/* The student page's sections ------------------------------------------ */
/* On a wide screen all four sections show, one under the other, and the
   switch between them is not drawn. On a phone it becomes the segmented
   control the mockup shows; see the phone rules below. */
.seg { display: none; }

/* Question review ------------------------------------------------------ */
.qrow {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 14px; display: grid; gap: 12px;
}
.qrow.amended { box-shadow: inset 4px 0 0 var(--good); }
.qrow .qhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.qrow .qn { font: 600 .78rem var(--sans); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.qrow .qq { font: 500 1.15rem/1.4 var(--serif); color: var(--ink); }
.ans { font-size: .95rem; line-height: 1.55; border-left: 3px solid var(--line); padding: 4px 0 4px 12px; }
.ans em {
    display: block; font: 600 .8rem var(--sans); color: var(--muted); font-style: normal; margin-bottom: 2px;
}
.ans.key { border-color: var(--navy); }
.ans.blank { color: var(--faint); font-style: italic; }
.aifb { font-size: .9rem; color: var(--muted); background: var(--paper-2); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.aifb .aiscore { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.grade {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between;
    border-top: 1px solid var(--line); padding-top: 12px;
}
.override { display: flex; gap: 8px; align-items: center; font-size: .88rem; font-weight: 600; color: var(--muted); }
/* A stepper around the recorded mark: − and + move it by five, which is the
   size of the amendments teachers actually make, and the box still takes a
   typed number for anything else. */
.stepper {
    /* The border sits outside the 44px, so each press target keeps all of it. */
    display: inline-grid; grid-template-columns: var(--tap) 84px var(--tap); height: calc(var(--tap) + 2px);
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card);
}
.stepper button {
    min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none;
    color: var(--navy); font-size: 1.2rem;
}
.stepper button:hover { background: var(--paper-2); }
.stepper input {
    min-height: 0; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    border-radius: 0; text-align: center; font-size: 1.05rem; font-weight: 600; padding: 0 4px;
    -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grade .save { min-height: var(--tap); padding: 0 22px; }
.notefield { display: grid; gap: 0; }

/* Rubric --------------------------------------------------------------- */
/* Five rows, one per letter. The whole row picks the grade, as the table row
   did; the full criteria are behind "More" so the five fit on one screen of a
   phone rather than a thousand pixels of it. */
.rubric { display: grid; }
.rubric .grade-row {
    display: grid; grid-template-columns: var(--tap) 1fr auto; gap: 4px 12px; align-items: center;
    min-height: 64px; padding: 10px 16px; border-top: 1px solid var(--line); cursor: pointer;
}
.rubric .grade-row:first-child { border-top: 0; }
.rubric .grade-row:hover { background: var(--paper); }
.rubric .grade-row:focus-visible { outline-offset: -2px; }
.rubric .L {
    width: var(--tap); height: var(--tap); border-radius: 12px; border: 1.5px solid var(--line);
    display: grid; place-items: center; font: 600 1.3rem var(--serif); color: var(--ink);
}
.rubric .sum { font-size: .92rem; line-height: 1.4; color: var(--ink); }
.rubric .end { display: flex; align-items: center; gap: 6px; }
.rubric .more {
    min-height: var(--tap); padding: 0 10px; border: 0; background: none; color: var(--navy);
    font-size: .88rem;
}
.rubric .more:hover { background: var(--navy-soft); }
.rubric ul { display: none; grid-column: 2 / -1; margin: 2px 0 4px; padding-left: 18px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.rubric .grade-row.open ul { display: block; }
.rubric .grade-row.picked { background: #F2F5FA; }
.rubric .grade-row.picked .L { background: var(--navy); border-color: var(--navy); color: #fff; }

.na {
    border: 1px dashed #E2B2AB; border-radius: 12px; padding: 14px 16px;
    background: var(--bad-soft); font-size: .9rem; color: var(--ink); line-height: 1.55;
}
.na b { color: var(--bad); }
.chosen { display: none; }

/* Save on the mark sheet. In the page's flow on a wide screen; pinned to the
   bottom of a phone, see below. */
.dock { display: contents; }

/* ========================================================================
 * Phones
 * ===================================================================== */
@media (max-width: 720px) {
    .container, .container.narrow { padding: 0 16px 24px; }
    h1 { font-size: 1.55rem; }
    .phone-only { display: inline-flex !important; }
    .wide-only { display: none !important; }

    .page-head { margin-bottom: 14px; align-items: stretch; }
    .page-head > .btnrow { width: 100%; }
    .page-head > .btnrow > * { min-height: var(--tap); }
    /* A head whose only action is the ⋯ keeps it beside the heading. */
    .page-head.inline { flex-wrap: nowrap; align-items: flex-start; }
    .page-head.inline > .btnrow { width: auto; flex: none; }
    select.chip { max-width: 200px; }

    .card { padding: 16px; border-radius: 14px; }
    .card.flush > .card-header { padding: 14px 16px 0; }
    .card-title { font-size: 1.15rem; }

    button, .btn { min-height: var(--tap); }
    .btnrow.tight button { min-height: var(--tap); }
    .chip, select.chip { min-height: var(--tap); }
    .linky, .ref { min-height: var(--tap); }
    .needs-review { min-height: var(--tap); }

    /* One row of chips that scrolls within itself, never the page. */
    .chips.one {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-inline: -16px; padding-inline: 16px; width: calc(100% + 32px);
    }
    .chips.one::-webkit-scrollbar { display: none; }
    .chips.one > * { flex: none; }

    /* Two across, and only the ones that lead until asked for the rest. */
    .tiles { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
    .tile { padding: 10px 12px; }
    .tile .v { font-size: 1.35rem; }
    .tile.wide { grid-column: 1 / -1; }
    .tile.wide .v { font-size: .98rem; }
    .tiles.folded .tile:nth-child(n+5) { display: none; }
    .tiles.folded[data-keep="2"] .tile:nth-child(n+3) { display: none; }
    .tilefold:not([hidden]) {
        display: flex; width: 100%; margin: -4px 0 14px; min-height: var(--tap);
        border-color: var(--line); color: var(--navy); background: transparent;
    }

    /* The register: one card per enrolment. The name leads, the grade sits
       at the right of it, and the rest runs underneath in one small line —
       what the mockup shows, and denser than a label per line would be. The
       whole card is the link to the student. */
    table.register thead { display: none; }
    table.register, table.register tbody { display: block; }
    table.register tr {
        position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
        gap: 2px 10px; padding: 12px 40px 12px 16px; border-top: 1px solid var(--line);
    }
    table.register tr:first-child { border-top: 0; }
    table.register tr.warn { box-shadow: inset 4px 0 0 var(--bad); }
    table.register tr.warn td:first-child { box-shadow: none; }
    table.register tr::after {
        content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
        border-right: 2px solid var(--faint); border-top: 2px solid var(--faint);
        transform: translateY(-50%) rotate(45deg);
    }
    table.register td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
    table.register td.empty { flex: 1 1 100%; padding: 24px 0; text-align: center; }
    table.register tr:has(td.empty)::after { content: none; }
    table.register td[data-cell="student"] { order: 1; flex: 1 1 60%; min-width: 0; }
    table.register td[data-cell="grade"] { order: 2; flex: none; margin-left: auto; text-align: right; }
    table.register td[data-cell="grade"] .bar { display: none; }
    table.register td[data-cell="reached"] { order: 3; flex: 1 1 100%; font-size: .9rem; color: var(--muted); }
    table.register td[data-cell="last"], table.register td[data-cell="oral"],
    table.register td[data-cell="active"], table.register td[data-cell="tests"] {
        order: 4; flex: none; font-size: .85rem; color: var(--muted);
    }
    table.register td[data-cell="written"] { display: none; }
    table.register td[data-cell="last"]::before { content: "Last test "; }
    table.register td[data-cell="tests"]::before { content: "Sat "; }
    table.register td[data-cell="active"]::before { content: "Active "; }
    table.register .sname { font-size: 1.02rem; }
    table.register a.sname::after { content: ""; position: absolute; inset: 0; }
    table.register .sid { font-size: .78rem; }

    /* The student page: a segmented control over the four sections, pinned
       under the header, and one section at a time. */
    .seg {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
        position: sticky; top: 56px; z-index: 20;
        margin: 0 -16px 12px; padding: 8px 16px; background: var(--paper);
        border-bottom: 1px solid var(--line);
    }
    .seg button {
        min-height: var(--tap); padding: 0 4px; border: 0; border-radius: 10px;
        background: var(--paper-2); color: var(--muted); font-size: .88rem;
    }
    .seg button[aria-selected="true"] { background: var(--navy); color: #fff; }
    [data-section].off { display: none; }
    .headacts { display: grid; grid-template-columns: 1fr 1fr; }
    .headacts > :first-child { grid-column: 1 / -1; }
    [data-section] { scroll-margin-top: 120px; }

    /* table.stack cards sit on the card's own white; the card around them
       gives up its frame so a card is not drawn inside a card. */
    .card.holds-stack { background: transparent; border: 0; padding: 0; }
    .card.holds-stack > .card-header { padding: 0 2px; }
    table.stack td .sid { display: inline; margin-left: 6px; }
    table.stack td[data-role="actions"] .btn { width: 100%; }

    /* Memory verses: the note on its own line under its label, and Pass and
       Fail side by side at full width. */
    table.verses td[data-cell="note"] { display: block; }
    table.verses td[data-cell="note"]::before { display: block; margin-bottom: 4px; }
    table.verses td[data-role="actions"] .btnrow { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    table.verses td[data-role="actions"] .btnrow button { min-height: 48px; }
    table.verses td[data-role="actions"] .btnrow [data-clearverse] { grid-column: 1 / -1; min-height: var(--tap); }
    table.verses td[data-cell="verse"] { align-items: center; }

    /* Review a test: every question its own card, the full width of the
       screen, with its mark and Save underneath. */
    .qrow { padding: 16px; }
    .qrow .qq { font-size: 1.08rem; }
    .grade { display: grid; grid-template-columns: 1fr auto; }
    .grade .save { grid-column: 1 / -1; width: 100%; min-height: 48px; }

    /* Mark a telling: Save pinned above the tab bar, naming the grade. */
    .dock {
        display: block; position: fixed; left: 0; right: 0; z-index: 40;
        bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px));
        background: var(--card); border-top: 1px solid var(--line);
        padding: 10px 16px;
    }
    .dock button { width: 100%; min-height: 48px; font-size: 1rem; }
    body.has-dock { padding-bottom: calc(var(--tabs-h) + 96px + env(safe-area-inset-bottom, 0px)); }
    body.has-tabs.has-dock #bugReportButton { bottom: calc(var(--tabs-h) + 82px + env(safe-area-inset-bottom, 0px)) !important; }
    .rubric .grade-row { padding: 10px 12px; gap: 4px 10px; }
    .rubric .sum { font-size: .88rem; }
    .chosen { display: block; margin-top: 6px; font-size: .88rem; color: var(--muted); }
    .verse-btns { display: grid; grid-template-columns: 1fr 1fr; }
    .verse-btns button { min-height: 48px; }
    .verse-btns [data-clearverse] { grid-column: 1 / -1; min-height: var(--tap); }
}

@media print {
    .seg, .tilefold, .dock, .morebtn { display: none !important; }
    [data-section] { display: block !important; }
}