/* ==========================================================================
   R7 — Oversight, account and timetable pages, in the pigeonhole style.
   Prototype: .scratch/phase-1-rollout/prototypes/pigeonhole-app.html (no mocks
   for these pages, so they follow the system: PageHeading, paper cards with
   occasional tape, slips + stamps for "things", navy/ghost/mustard buttons,
   tl-inp inputs, torn-label section heads, generous spacing).

   Pages (each wraps its view in `.ov-page` plus a page class):
     .ov-hub       T&L Hub               src/pages/tl_hub.rs
     .ov-teachers  Teachers list         src/pages/manage_teachers.rs
     .ov-teacher   Teacher page (both the full and the walks-only one), incl.
                   TeacherDropInSummary (src/pages/drop_in.rs, `.ov-dropins`)
     .ov-lw        Learning walks list   src/pages/learning_walks.rs
     .ov-admin     Admin                 src/pages/admin.rs
     .ov-account   My account            src/pages/account.rs
     .ov-tt        My timetable          src/pages/timetable.rs

   The Give feedback wizard (R5, styles/feedback.css) renders inside some of
   these pages; nothing here targets bare `.btn` / `.tl-card` descendants, so
   it is untouched. Everything is prefixed `ov-` or scoped under an ov- class.
   ========================================================================== */

/* ── shared by the R7 pages (candidates for teachloop.css later) ────────── */

/* The pages sit in .main-content (1080px); widen to the prototype's 1120 wrap. */
.main-content:has(.ov-page) { max-width: 1120px; }
.ov-page { padding-bottom: 40px; }
/* main-content's 32px top padding already gives the room above the heading. */
.ov-page > .tl-ph { margin-top: 6px; }

/* Plain text on paper. */
.ov-text { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.ov-muted { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .72; }
.ov-dim { opacity: .68; }
.ov-small { font-size: 13px; }
.ov-gap { margin-top: 12px !important; }
.ov-err { margin: 10px 0 0; font-size: 14px; }
.ov-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.45; opacity: .72; }
.ov-note { margin: 16px 0 0; font-size: 14.5px; }
.ov-nowrap { white-space: nowrap; }
.ov-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ov-wrap-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-strong { font-weight: 600; }
.ov-opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }
.ov-chev { font-size: 14px; opacity: .6; }
.ov-loading { margin-top: 24px; }
/* A plain sentence under a page heading (lines up with the torn label). */
.ov-lede { margin: 2px 0 0 90px; max-width: 640px; font-size: 15px; line-height: 1.5; opacity: .8; }

/* Paper cards: `.tl-card` from the system; .ov-card only keeps them shrinkable
   inside grids. Section labels inside are `.tl-k`. */
.ov-card { min-width: 0; }

/* Section heads on the board: a small torn label, count in coral. */
.tl-label.ov-sh { font-size: 19px; margin: 0 0 16px; }
.tl-label.ov-sh b { font: inherit; margin-left: 6px; color: var(--tl-coral-text); }
/* Empty queue / section: a handwritten note on the board. */
.tl-hand.ov-none { padding-left: 4px; margin: -4px 0 26px; font-size: 21px; }

/* Stamps that sit inline with a name. */
.tl-stamp.ov-stamp-inline { margin-left: 6px; padding: 3px 5px; font-size: 9.5px; vertical-align: 2px; }

/* Slips (list items that are "things"): contain the floated corner stamp, keep
   names navy, and lift the hovered slip so its hover panel (.fbtg-tip /
   .wtw-tip) isn't painted under the next, also-transformed, slip. */
.ov-slips { margin-bottom: 0; }
.ov-slip { display: flow-root; }
.ov-slip:hover, .ov-slip:focus-within { z-index: 3; }
.ov-slip .tl-slip-t a { color: var(--tl-ink); }
.ov-slip .tl-slip-row { align-items: flex-start; }
.ov-slip .tl-slip-row > .tl-stamp { flex: none; margin-top: 2px; }
.ov-slip-body { flex: 1; min-width: 0; }
@media (max-width: 520px) {
    .ov-slip .tl-slip-row { flex-wrap: wrap; }
    .ov-slip-body { flex: 1 1 180px; }
    .ov-slip .tl-slip-row > .tl-stamp { margin-left: 44px; }
}
.ov-slip-body .tl-slip-d, .ov-slip .tl-slip-d { overflow-wrap: anywhere; }
.ov-slip-q { margin-top: 5px; font-size: 14px; font-style: italic; opacity: .8; overflow-wrap: anywhere; }
.ov-slip .tl-acts { margin-top: 12px; }
.ov-ago { margin-left: 8px; font-size: 13px; font-weight: 400; opacity: .65; white-space: nowrap; }
.ov-shoe { flex: none; transform: rotate(-7deg); }
/* Deep-linked (?walk=…) slip: a mustard ring that flashes once. */
.tl-slip.ov-hl {
    box-shadow: 0 0 0 3px var(--tl-mustard), 0 10px 22px -12px rgba(29,36,72,.6);
    animation: ov-hl-flash 1.6s ease-out 1;
}
@keyframes ov-hl-flash {
    0%, 30% { background: #fbeccb; }
    100% { background: var(--tl-paper); }
}

/* Follow-up / check-in controls inside a slip or the step card. */
.ov-ctl { margin-top: 12px; }
.ov-ctl .tl-acts { margin-top: 0; }
.ov-ctl > * + * { margin-top: 8px; }
.ov-said { display: block; margin: 0 0 8px; font: 700 20px/1.25 var(--tl-font-hand); color: #24408d; overflow-wrap: anywhere; }

/* Inputs laid out in a row (label above each). */
.ov-inline-form { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.ov-inline-form .tl-field { margin-bottom: 0; }
.ov-inline-form input.tl-inp, .ov-inline-form select.tl-inp { width: auto; min-width: 220px; }
.ov-search { margin: 0 0 16px; }
/* A checkbox + its label on one line (labels are block in the legacy CSS). */
label.ov-tick {
    display: inline-flex; gap: 8px; align-items: center; margin: 0;
    font-size: 14px; font-weight: 500; color: var(--tl-ink); cursor: pointer;
}
label.ov-tick input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--tl-ink); }

/* Tables: a paper card with clean dashed rows; scroll sideways in the card. */
.ov-table-card { padding: 26px 28px 16px; }
.ov-table th {
    padding: 0 12px 12px; border-bottom: 1.5px solid var(--tl-ink);
    font: 600 12px/1 var(--tl-font-body); letter-spacing: .1em; text-transform: uppercase;
    color: rgba(29,36,72,.72);
}
.ov-table td { padding: 14px 12px; border-bottom: 1px dashed var(--tl-dash); vertical-align: top; font-size: 14.5px; }
.ov-table th:first-child, .ov-table td:first-child { padding-left: 4px; }
.ov-table tbody tr:last-child td { border-bottom: 0; }
.ov-table tr.row-link:hover td { background: var(--tl-white); }
.ov-table tr.row-link:hover .dial::before { background: var(--tl-white); }

/* Modals opened from these pages (enrolment request, timetable slot). */
.modal-overlay.ov-overlay { background: rgba(29,36,72,.5); }
.modal.ov-modal {
    position: relative; width: min(520px, 100%); color: var(--tl-ink);
    background: var(--tl-paper); border: 0; border-radius: 4px; padding: 34px 32px 26px;
    box-shadow: 0 24px 48px -18px rgba(29,36,72,.65);
}
/* The modal scrolls, so the tape sits on its top edge rather than over it. */
.ov-modal > .tl-tape { top: 0; }
.ov-modal-h { font: 400 22px/1.2 var(--tl-font-slab); letter-spacing: 0; font-synthesis: none; margin: 4px 0 18px; }
.ov-modal .tl-field { margin-bottom: 16px; }
.ov-modal-acts { justify-content: flex-end; margin-top: 20px; }
.ov-modal .combo-toggle { color: var(--tl-ink); }
.ov-modal input.combo-input.tl-inp { padding-right: 40px; }
.ov-modal .combo-menu { background: var(--tl-white); border: 1.5px solid var(--tl-ink); border-radius: 4px; box-shadow: 0 10px 22px -12px rgba(29,36,72,.6); }
.ov-modal .combo-item:hover, .ov-modal .combo-item.is-sel { background: #eef5f4; color: var(--tl-ink); }
.btn.ov-btn-warn { border-color: var(--tl-coral-text); color: var(--tl-coral-text); }
@media (max-width: 640px) {
    .modal.ov-modal { border-radius: 0; box-shadow: none; padding: 30px 18px 24px; }
}

/* ── T&L Hub ────────────────────────────────────────────────────────────── */
.ov-hub-cols { margin-top: 26px; }
.ov-col { min-width: 0; }
/* "Do · act now" / "Know · insight": handwritten column notes. */
.ov-col-h { margin: 0 0 18px; font: 700 28px/1 var(--tl-font-hand); letter-spacing: 0; color: var(--tl-teal); }
.ov-queue { margin-bottom: 32px; }
.ov-queue .tl-hand.ov-none { margin-bottom: 0; }

/* "Recent replies" under the follow-up slips. */
.ov-recent { margin: 22px 0 0; padding: 22px 24px 18px; }
.ov-line-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ov-line-head a { color: var(--tl-ink); }
.ov-line-head .ov-ago { margin-left: 0; }
.ov-line-head .tl-stamp { margin-left: auto; }
.ov-recent .ov-said { margin: 4px 0 0; font-size: 19px; }

/* Who to walk next: people rows with stamps. */
.ov-ppl { flex-wrap: wrap; }
.ov-ppl .tl-who { min-width: 160px; }
.ov-ppl .tl-who a { color: var(--tl-ink); }
.ov-ppl .tl-who small { overflow-wrap: anywhere; margin-top: 2px; }
.ov-dept { font-size: 13px; font-weight: 400; opacity: .65; }
.ov-ppl-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.ov-wtw .wtw-tip, .ov-hub .fbtg-tip { font-size: 13px; }

/* New users. */
.ov-disclose {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.ov-disclose .tl-k { margin-bottom: 0; }
.ov-nu-list { margin-top: 14px; }
.ov-nu-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px dashed var(--tl-dash); }
.ov-nu-who { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ov-nu-pick { display: flex; gap: 8px; align-items: center; }
.ov-nu-pick .tl-flab { margin: 0; white-space: nowrap; }
.ov-nu-pick select.tl-inp { width: auto; min-width: 180px; }
.ov-nu-all { margin-top: 12px; }
.ov-nu-list > .ov-muted { margin-bottom: 4px; }

/* Activity counts: four small paper tiles with slab numbers. */
.ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.ov-stat {
    background: var(--tl-paper); padding: 14px 14px 12px; border-top: 4px solid var(--tl-sky);
    box-shadow: 0 8px 18px -12px rgba(29,36,72,.5);
}
.ov-stat:nth-child(2) { border-top-color: var(--tl-teal); }
.ov-stat:nth-child(3) { border-top-color: var(--tl-mustard); }
.ov-stat:nth-child(4) { border-top-color: var(--tl-sage); }
.ov-stat:nth-child(odd) { transform: rotate(-.4deg); }
.ov-stat:nth-child(even) { transform: rotate(.35deg); }
.ov-stat-n { line-height: 1; margin-bottom: 8px; white-space: nowrap; }
.ov-stat-n b { font: 400 30px/1 var(--tl-font-slab); font-synthesis: none; }
.ov-stat .tl-mini { font-size: 11.5px; }
.ov-delta { margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--tl-grey-text); }
.ov-delta.up { color: var(--tl-sage-text); }
.ov-delta.down { color: var(--tl-coral-text); }

/* Charts: the bars and their colours are unchanged; only the frame is restyled. */
.ov-bars { display: grid; gap: 16px; }
.ov-bar-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.ov-bar-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.ov-bar-n { font: 400 16px/1 var(--tl-font-slab); font-synthesis: none; }
.ov-track { flex: 1; min-width: 24px; height: 13px; overflow: hidden; border-radius: 2px; background: var(--tl-white); box-shadow: inset 0 0 0 1px var(--tl-rule); }
.ov-track-lg { height: 16px; }
.ov-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
.ov-legend-i { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; opacity: .85; }
.ov-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.ov-hbars { display: grid; gap: 9px; }
.ov-hbar { display: flex; align-items: center; gap: 10px; }
.ov-hbar-name { flex: 0 0 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ov-fill { height: 100%; background: var(--tl-teal); }
.ov-hbar-n { flex: 0 0 26px; text-align: right; font-size: 13.5px; font-weight: 600; }

/* Feedback coverage: the dial on a taped white card. */
.ov-cov-btn {
    display: flex; gap: 16px; align-items: center; width: 100%; padding: 0;
    background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.dial.ov-dial { margin-left: 0; width: 76px; height: 76px; }
.ov-cov .dial::before { background: var(--tl-white); }
.ov-dial .dial-num { font: 400 16px/1 var(--tl-font-slab); font-synthesis: none; }
.ov-cov-text { font-size: 14.5px; line-height: 1.45; }
.ov-cov-more { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--tl-coral-text); }
.ov-cov-list { max-height: 300px; overflow-y: auto; margin-top: 16px; border-top: 1.5px solid var(--tl-ink); }
.ov-cov-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ov-cov-what { min-width: 0; font-size: 14px; }

/* Leaderboard. */
.ov-board-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px dashed var(--tl-dash); }
.ov-board-head { padding-top: 0; border-top: 0; }
.ov-board-head + .ov-board-row { border-top: 1.5px solid var(--tl-ink); }
.ov-board-head .tl-mini { font: 400 11px/1 var(--tl-font-body); }
.ov-board-name { flex: 1; min-width: 0; font-size: 14.5px; }
.ov-board-wk { flex: 0 0 92px; text-align: right; font-size: 14px; }
.ov-board-ever { flex: 0 0 44px; text-align: right; font: 400 18px/1 var(--tl-font-slab); font-synthesis: none; }

/* Enrolment request modal. */
.ov-req-reason { margin: 14px 0 0; }

@media (max-width: 520px) {
    .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-ppl-tags { justify-content: flex-start; width: 100%; padding-left: 54px; }
    .ov-nu-pick { width: 100%; }
    .ov-nu-pick select.tl-inp { flex: 1; min-width: 0; }
}

/* ── Teachers list ──────────────────────────────────────────────────────── */
.ov-teachers .ov-search { margin: 24px 0 26px; }
input.tl-inp.ov-search-short { display: block; max-width: 380px; }
.ov-swaps { margin: 26px 0 0; }
.ov-cell-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.ov-cell-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ov-cell-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ov-name { font-weight: 600; }
.ov-walk-date { font-size: 14px; font-weight: 500; }
.ov-snip { font-size: 13px; font-style: italic; opacity: .75; }
/* Below 860px the legacy .table-stack turns rows into labelled blocks. */
@media (max-width: 860px) {
    table.ov-table.table-stack tr { padding: 12px 0; border-bottom: 1px dashed var(--tl-dash); }
    table.ov-table.table-stack tr:last-child { border-bottom: 0; }
    table.ov-table.table-stack td { padding: 4px 4px; }
    table.ov-table.table-stack td::before { color: rgba(29,36,72,.7); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
}

/* ── Teacher page (full + walks-only) ───────────────────────────────────── */
.ov-crumbs { margin-bottom: 0; }
.tl-ph.ov-person { margin-top: 14px; align-items: flex-start; }
.ov-person > img { margin-top: 4px; }
.ov-person-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Stamps on the board get a paper wash so they stay legible. */
.ov-person-row .tl-stamp { margin-left: 0; background: rgba(251,248,241,.75); font-size: 10.5px; padding: 4px 6px; vertical-align: 0; }
.ov-subject { display: flex; align-items: center; gap: 8px; padding-left: 10px; margin-top: 4px; font-size: 15px; }
.ov-subject .tl-mini { opacity: .7; }
.btn.ov-pen { padding: 2px 8px; line-height: 1.3; background: transparent; }
.ov-subject-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0 10px; }
.ov-subject-edit select.tl-inp { width: auto; min-width: 200px; }

.ov-layout { margin-top: 28px; }
.ov-side .tl-card { padding: 24px 20px 20px; margin-bottom: 24px; }
.ov-rail .tl-k { margin-bottom: 8px; }
.ov-rail .side-link { color: var(--tl-ink); font-weight: 500; font-size: 14.5px; border-radius: 0; padding: 7px 10px; }
.ov-rail .side-link:hover { background: var(--tl-white); color: var(--tl-ink); border-left-color: var(--tl-mustard); }
.ov-side-acts > * + * { margin-top: 10px; }
.btn.ov-side-btn { width: 100%; justify-content: flex-start; }
.ov-reveal { padding: 4px 0 6px; }
.ov-reveal-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ov-reveal-row > .btn { align-self: flex-start; }
.ov-buddy-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--tl-dash); }

.ov-main { min-width: 0; }
.ov-sec { margin-top: 36px; }
.ov-sec:first-child, .ov-sec.ov-sec-first { margin-top: 0; }
.ov-sec > .tl-card { margin-bottom: 0; }

/* Action step: Home's taped index card. */
.ov-step { margin-bottom: 0; }
.ov-step .tl-big { color: var(--tl-ink); overflow-wrap: anywhere; }
.ov-step-empty { margin: 0; font-size: 17px; line-height: 36px; }
.ov-refl-link { margin: 12px 0 0; font-size: 14px; }
.ov-refl-link a { color: var(--tl-ink); text-decoration: underline; text-underline-offset: 3px; }
.ov-step-ctl { margin-top: 16px; }
.ov-next { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--tl-dash); font-size: 14.5px; }
.ov-next .tl-mini { margin-right: 6px; }
.ov-proposal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Feedback / shared reflections / journal: the shared JournalEntryCard, stacked. */
.ov-entries { display: grid; gap: 14px; }
.ov-entries .card { margin-bottom: 0; }

/* Current focus (full page): worked-on card + the step card. */
.focus-top.ov-focus { gap: 24px; margin-bottom: 0; }
.ov-focus .tl-card { margin-bottom: 0; }
.ov-worked-top { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ov-worked-title { margin: 4px 0 16px; font: 400 24px/1.15 var(--tl-font-slab); letter-spacing: 0; font-synthesis: none; }
.ov-worked-title a { color: var(--tl-ink); }
.ov-worked-stats { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ov-worked .stat-value { font: 400 30px/1 var(--tl-font-slab); font-synthesis: none; }
.ov-worked .dial::before { background: var(--tl-white); }

/* Drop-ins: dated lines, like Home's "My drop-ins". */
.ov-dropins { margin-bottom: 0; }
.ov-dropins .tl-k img { margin: -14px -4px -14px 0; transform: rotate(6deg); }
.ov-dropins .tl-line { overflow-wrap: anywhere; }
.ov-dropins-note { margin-top: 14px; }

@media (max-width: 860px) {
    .ov-layout { gap: 8px; }
}

/* ── Learning walks list ────────────────────────────────────────────────── */
.ov-lw-card { margin-top: 30px; }
.ov-lw-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ov-lw-k { margin-bottom: 0; }
.ov-filter { align-items: center; gap: 7px; margin-bottom: 10px; }
.ov-filter .tl-chip { padding: 5px 12px; font-size: 13.5px; }
.tl-flab.ov-filter-lab { display: inline-block; margin: 0 4px 0 0; }
.ov-chip-sep { width: 1.5px; height: 20px; margin: 0 4px; background: var(--tl-dash); }
.ov-lw-feed { margin-top: 8px; }
/* Date rules stick below the 60px header (they used to hide under it). */
.ov-lw .daterule {
    top: 60px; margin: 22px 0 4px; padding: 7px 0;
    background: var(--tl-paper); color: var(--tl-ink);
    font: 600 12px/1 var(--tl-font-body); letter-spacing: .12em;
}
.ov-lw .daterule::after { height: 1.5px; background: var(--tl-ink); opacity: .8; }
/* Each walk: a compact row with a slip's coloured stub (coral = feedback to
   come, teal = given). */
.ov-lw .lw-row {
    gap: 12px; padding: 12px 6px 12px 14px;
    border-bottom: 1px dashed var(--tl-dash); border-left: 5px solid var(--tl-sky);
}
.ov-lw .lw-row.is-pending { border-left-color: var(--tl-coral); }
.ov-lw .lw-row.is-given { border-left-color: var(--tl-teal); }
.ov-lw .lw-row:hover { background: var(--tl-white); }
.ov-lw-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.ov-lw-date { flex: 0 0 auto; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.ov-lw-name { font-weight: 600; }
.ov-lw-ctx { font-size: 14px; opacity: .75; }
.ov-lw-snip { font-size: 13.5px; font-style: italic; opacity: .7; overflow-wrap: anywhere; }
.ov-lw-side { display: flex; gap: 10px; align-items: center; flex: none; white-space: nowrap; }
.ov-lw .lw-detail.ov-lw-detail {
    display: grid; gap: 14px; margin: 0; padding: 16px 18px 18px;
    background: var(--tl-white); border-radius: 0;
    border-bottom: 1px dashed var(--tl-dash); border-left: 5px solid var(--tl-rule);
}
.ov-lw-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ov-lw-notes { display: flex; gap: 10px; flex-wrap: wrap; }
.ov-lw .lw-note {
    flex: 1 1 220px; display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px; border-radius: 0; background: var(--tl-paper);
    border-left: 4px solid var(--tl-sage); font-size: 14.5px;
}
.ov-lw .lw-note.is-area { border-left-color: var(--tl-mustard); }
.ov-lw .lw-lbl { font: 600 11.5px/1.2 var(--tl-font-body); letter-spacing: .1em; color: rgba(29,36,72,.72); }
.ov-lw-crucial, .ov-lw-lf { display: flex; flex-direction: column; gap: 5px; }
.ov-lw-crucial .ov-pre { font-size: 15px; line-height: 1.55; }
.ov-lw-acts { margin-top: 0; }
@media (max-width: 600px) {
    .ov-lw .lw-row { flex-direction: column; align-items: stretch; }
    .ov-lw-side { justify-content: space-between; }
    .ov-lw .lw-detail.ov-lw-detail { padding: 14px 12px 16px; }
}

/* ── Admin ──────────────────────────────────────────────────────────────── */
/* Rollout phase: the page's consequential card — white index card, two tapes,
   a mustard torn label. */
.ov-rollout { margin-top: 30px; padding-top: 34px; }
.ov-rollout .tl-label.ov-rollout-h { background: var(--tl-mustard); margin: 0 0 14px; }
.ov-rollout-lede { max-width: 760px; }
.ov-rollout-set { margin-top: 4px; }
label.ov-tick.ov-tick-lg { font-size: 15px; padding-bottom: 12px; }
.ov-rollout-k { margin: 26px 0 0; padding-top: 20px; border-top: 1px dashed var(--tl-dash); }
.ov-rollout-acts { margin-top: 4px; }
.ov-confirm { margin-top: 26px; padding-top: 22px; font-size: 15px; line-height: 1.5; }
.ov-confirm .tl-lab { background: var(--tl-coral); }
.ov-confirm .tl-acts { margin-top: 14px; }
.ov-admin-cols { margin-top: 0; }
.ov-admin .ov-table { min-width: 680px; }
.ov-role-cell { white-space: nowrap; }
.ov-table select.tl-inp.ov-role {
    display: inline-block; width: auto; min-width: 130px; vertical-align: middle;
    padding: 6px 34px 6px 10px; font-size: 14px;
}
.ov-role-cell label.ov-tick { margin-left: 12px; vertical-align: middle; font-size: 13.5px; }

/* ── My account ─────────────────────────────────────────────────────────── */
.ov-account-card { margin-top: 30px; max-width: 760px; }
.ov-account-card .tl-k { margin-bottom: 20px; }
.ov-account .tl-acts .ov-push { margin-left: auto; }
.ov-buddy { max-width: 760px; }
.ov-buddy .ov-text { margin: 0; }
.ov-buddy-ask { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.ov-buddy-ask input.tl-inp { flex: 1 1 220px; width: auto; }
@media (max-width: 600px) {
    .ov-account .tl-acts .ov-push { margin-left: 0; }
}

/* ── My timetable ───────────────────────────────────────────────────────── */
/* .tt-* grid rules live in index.html (shared with Open Doors' picker); these
   only repaint this page's grid. The narrow-screen Week 1/2 toggle is a pair
   of tl-chips (`.tl-chips` would otherwise always show it). */
.ov-tt-card { margin-top: 26px; padding-top: 28px; }
.ov-tt .tt-toggle { display: none; margin-bottom: 18px; }
.ov-tt-wk { margin: 0 0 10px; }
.ov-tt .tt-week { margin-bottom: 28px; }
.ov-tt .tt-week:last-child { margin-bottom: 0; }
.ov-tt .tt-grid { grid-template-columns: 70px repeat(5, minmax(0, 1fr)); gap: 6px; }
.ov-tt .tt-h { font: 600 11.5px/1 var(--tl-font-body); letter-spacing: .1em; color: rgba(29,36,72,.68); }
.ov-tt .tt-cell {
    min-height: 60px; padding: 5px 4px; color: var(--tl-ink);
    border: 1.5px dashed rgba(29,36,72,.28); border-radius: 3px; background: rgba(255,255,255,.4);
    transition: background .12s, border-color .12s;
}
.ov-tt .tt-cell:hover { border-color: var(--tl-ink); background: var(--tl-white); }
/* A taught lesson: a white slip with a teal stub. */
.ov-tt .tt-cell.filled {
    border: 0; border-left: 5px solid var(--tl-teal); background: var(--tl-white);
    box-shadow: 0 6px 12px -9px rgba(29,36,72,.6);
}
.ov-tt .tt-cell.filled:hover { box-shadow: 0 0 0 1.5px var(--tl-ink), 0 6px 12px -9px rgba(29,36,72,.6); }
/* The lesson happening now: a mustard ring. */
.ov-tt .tt-cell.now, .ov-tt .tt-cell.filled.now { box-shadow: 0 0 0 3px var(--tl-mustard), 0 6px 12px -9px rgba(29,36,72,.6); }
.ov-tt .tt-subj { font-size: 13px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.ov-tt .tt-room { margin-top: 2px; font-size: 11.5px; color: var(--tl-ink); opacity: .65; }
.ov-tt .tt-add { font-size: 20px; color: var(--tl-ink); opacity: .32; }
/* A feedback slot: a mustard-washed slip with a coral stub. */
.ov-tt .tt-cell.fb {
    border: 0; border-left: 5px solid var(--tl-coral); background: #fff4e0;
    box-shadow: 0 6px 12px -9px rgba(29,36,72,.6);
}
.ov-tt .tt-cell.fb:hover { box-shadow: 0 0 0 1.5px var(--tl-ink), 0 6px 12px -9px rgba(29,36,72,.6); }
.ov-tt .tt-fb { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--tl-coral-text); }
/* Before / after school rows: a little quieter than the teaching periods. */
.ov-tt .tt-h.tt-h-x { opacity: .6; }
.ov-tt-modal .tt-kind { margin: -4px 0 16px; }
.ov-tt-modal .tt-hide { display: none; }
.tt-fb-note { margin: 0 0 16px; font-size: 14px; opacity: .75; }
@media (max-width: 860px) {
    .ov-tt .tt-toggle { display: flex; }
}
@media (max-width: 600px) {
    .ov-lede { margin-left: 0; }
}
@media (max-width: 560px) {
    .ov-tt .tt-grid { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 4px; }
    .ov-tt .tt-cell { min-height: 54px; padding: 3px 2px; }
    .ov-tt .tt-cell.filled { border-left-width: 3px; }
    .ov-tt .tt-subj { font-size: 11px; }
    .ov-tt .tt-room { font-size: 10px; }
    .ov-tt .tt-h { font-size: 9px; letter-spacing: 0; }
}

/* ── phones: tighter paper, as on Home ─────────────────────────────────── */
@media (max-width: 560px) {
    .ov-page .tl-card.ov-card { padding: 26px 18px 22px; }
    .ov-page .ov-card .tl-lines { margin: 0 -18px; padding: 0 18px 1px; }
    .ov-table-card { padding: 22px 14px 12px; }
    .modal.ov-modal { padding: 30px 16px 22px; }
}