/* 14423160 Canada Foundation: large and readable; colour-coded raised buttons (owner, 2026-11-01). No pictures other than the two logos. */
:root { --level-orange: #ffd8a8; --level-orange-edge: #c75000; --level-yellow: #fff2a0; --level-yellow-edge: #c79a00;
        --ink: #1b1b1b; --muted: #5a5a5a; --line: #d8d2c8; --bg: #ffffff; --soft: #f6f2ea;
        --gold: #8a6a12; --red: #c62828; --amber: #8f5400; --green: #2e7d32; --focus: #1a56db; }
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; color: var(--ink); background: var(--bg); line-height: 1.5;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif; }
/* Owner, 2026-11-06: one logo at each end of the top row with the buttons between them, all on one centre line. When the
   buttons do not fit (below), the logos stay on the first row and the buttons take a full-width row under them. */
.topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "left middle right";
          align-items: center; gap: .5rem 1rem; padding: .5rem 1rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.logo-left { grid-area: left; } .logo-right { grid-area: right; }
.logo { display: block; line-height: 0; }
.logo img { display: block; width: 120px; height: 56px; object-fit: contain; background: #fff; border-radius: 4px; }
.topbar > .tools { grid-area: middle; justify-content: center; }
.topbar > .print-agency { grid-area: middle; text-align: center; }
@media screen and (max-width: 1100px) { .topbar { grid-template-areas: "left . right" "middle middle middle"; } }
@media screen and (max-width: 1300px) { .topbar:has(.header-search) { grid-template-areas: "left . right" "middle middle middle"; } }
@media screen and (max-width: 1750px) { html.large .topbar { grid-template-areas: "left . right" "middle middle middle"; } }
.tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
/* Owner, 2026-11-06: every control the same height on the same centre line, with even gaps. */
.tools button, .tools .button, .tools input[type=search] { height: 44px; min-height: 44px; padding-block: 0; }
.tools button, .tools .button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.tools button, .tools .button, .tools .text-size { font-size: .9rem; }
.tools .text-size { display: inline-flex; align-items: center; height: 44px; }
.tools form { margin: 0; display: flex; gap: .5rem; align-items: center; }
main { max-width: 1000px; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.6rem; margin: .5rem 0 1rem; }
/* Owner, 2026-11-06: the page is off-white on a PC, pure white on a phone and on paper; boxes and tables stay white. */
@media screen and (min-width: 720px) { body { background: #f8f6f1; } main table { background: var(--bg); } body.contrast { background: #fff; } }
h2 { font-size: 1.2rem; margin-top: 1.5rem; }
/* Owner, 2026-11-06: a section heading is a band, on every page. Not a heading inside a small component: a foldable card's
   summary, a banner level, the dashboard's group of tiles. Plain on paper. */
main h2:not(summary h2, .banner-level h2, .tile-group) {
  background: #cfdff5; color: #0a2f66; border-left: 6px solid #0d3f86; border-bottom: 1px solid #9db8dd; border-radius: 4px;
  padding: .4rem .75rem; margin-top: 1.75rem; margin-bottom: .65rem; overflow-wrap: anywhere; }
/* Owner, 2026-11-06: each section in one panel (site.js wraps a heading of main and what follows it); its band runs the full width,
   flush at the top, so its left edge lines up with the page's heading. Plain on paper. */
.section-panel { background: #fff; border: 1px solid #e4dfd6; border-radius: 6px; padding: 0 .9rem .7rem; margin: 1.25rem 0; min-width: 0; }
main .section-panel > h2:not(.tile-group) { margin: 0 -.9rem .65rem; border-radius: 5px 5px 0 0; }
body.contrast .section-panel { border-color: #000; }
@media print { .section-panel { border: 0; border-radius: 0; padding: 0; margin: .75rem 0; background: none; }
  main .section-panel > h2:not(.tile-group) { margin: 0 0 .3rem; border: 0; border-radius: 0; padding: 0; background: none; color: #000; } }
body.contrast main h2:not(summary h2, .banner-level h2, .tile-group) { background: #fff; color: #000; border-color: #000; }
@media print { main h2:not(summary h2, .banner-level h2, .tile-group) { background: none; color: #000; border: 0; border-radius: 0; padding: 0; } }
.lead { font-size: 1.2rem; }
a { color: var(--focus); }
button, .button { font: inherit; font-size: 1rem; padding: .6rem 1.1rem; border-radius: 8px; border: 1px solid #888;
                  background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
button.small { padding: .3rem .6rem; font-size: .9rem; }
.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.danger { border-color: var(--red); color: var(--red); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin: 1rem 0; }
.tile { display: flex; align-items: center; justify-content: center; min-height: 84px; padding: .75rem; text-align: center;
        font-size: 1.15rem; font-weight: 600; border: 2px solid var(--ink); border-radius: 12px; color: var(--ink);
        text-decoration: none; background: #fff; }
a.tile:hover { background: var(--soft); }
.tile.off { border-color: var(--line); color: #9a9a9a; font-weight: 500; }
/* minmax(0, 1fr): a list with a long choice must not push the form wider than a phone. */
.form { display: grid; gap: .8rem; max-width: 460px; grid-template-columns: minmax(0, 1fr); }
.form label { display: grid; gap: .25rem; grid-template-columns: minmax(0, 1fr); }
/* Owner, 2026-11-06: a tick box or a choice in a form: on the left, its words beside it, whether or not the label says "check". */
/* :where keeps this weak: a folded section (.sig-typed and the like) must still hide what it holds. */
.form label.check, .form label:where(:has(> input[type=checkbox]), :has(> input[type=radio])) { display: flex; gap: .5rem; align-items: center; }
input, select, textarea { font: inherit; font-size: 1rem; padding: .5rem; border: 1px solid #888; border-radius: 6px; }
select { max-width: 100%; }
.inline { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.actions form { margin: 0; }
.filter { display: flex; gap: .4rem; margin: .5rem 0; flex-wrap: wrap; }
.filter label { min-width: 0; max-width: 100%; }   /* a long name in a list stays inside a phone's width */
table { border-collapse: collapse; width: 100%; margin: .5rem 0; }
td, th { border-bottom: 1px solid var(--line); padding: .4rem; text-align: start; vertical-align: top; }
table.small { font-size: .85rem; }
/* Owner, 2026-11-06: a table with no rows shows only its one line ("None yet."), no column headings. */
table:has(> thead th + th):has(> tbody > tr:only-child > td:only-child) > thead { display: none; }
.messages, .banner { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li, .banner > li { padding: .6rem .8rem; border-radius: 8px; margin-bottom: .4rem; border-inline-start: 6px solid var(--muted); background: var(--soft); }
.banner > li.red, .messages li.error, .notices li.notice-closed { border-color: var(--red); background: #fdecea; }
.banner > li.amber, .messages li.warning { border-color: var(--amber); background: #fff4e0; }
.banner > li.ok, .messages li.success { border-color: var(--green); background: #edf7ee; }
.reminders { margin: 0 0 1rem; }
.reminders summary { cursor: pointer; font-weight: 600; }
.reminders ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.reminders li { padding: .5rem .7rem; border-radius: 8px; margin-bottom: .3rem; background: var(--soft); }
/* Owner, 2026-11-06: the path at the top of a page: plain, no bar or tint or bold; a link underlines on hover and on focus. */
.trail { display: inline-block; max-width: 100%; font-size: .85rem; font-weight: 400; color: #5a5a5a; margin: 0 0 .5rem;
         padding: .15rem .55rem; border: 1px solid #d8d2c8; border-radius: 4px; overflow-wrap: anywhere; }
.trail a { color: #1565c0; text-decoration: none; }
.trail a:hover, .trail a:focus, .trail a:focus-visible { text-decoration: underline; }
.trail [aria-current] { color: inherit; font-weight: 400; text-decoration: none; }
body.contrast .trail { color: #000; border-color: #000; }
body.contrast .trail a { color: #000; text-decoration: underline; }
.error { color: var(--red); font-weight: 600; }
.ok { color: var(--green); }
.note { color: var(--muted); font-size: .9rem; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin: .6rem 0; }   /* screens review F19 */
.date-words { margin-inline-start: .5em; font-weight: 600; white-space: nowrap; }
.date-words:empty { display: none; }
.show-password { margin-inline-start: .4em; }
.form-language-box > summary { cursor: pointer; margin: 0; }
.not-english { outline: 2px solid var(--red); }
.hp { position: absolute; inset-inline-start: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Numbers, dates, emails and codes read left to right inside Urdu text. */
[dir=rtl] .num, [dir=rtl] code, [dir=rtl] input[type=email], [dir=rtl] input[type=tel],
[dir=rtl] input[type=date], [dir=rtl] input[type=number] { direction: ltr; unicode-bidi: isolate; }
.secret { padding: .8rem; border: 2px dashed var(--gold); border-radius: 8px; margin: 1rem 0; display: grid; gap: .3rem; }
.secret code { font-size: 1.1rem; word-break: break-all; }
dl.facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: .3rem 1rem; }
dl.facts dt { color: var(--muted); overflow-wrap: anywhere; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 480px) { dl.facts { grid-template-columns: minmax(0, 1fr); } dl.facts dd { margin-bottom: .4rem; } }
code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; }
@media (max-width: 600px) { html { font-size: 17px; } .logo img { width: 94px; height: 44px; }
  /* Phones: everything to tap at least 44 px high. */
  button, .button, select, input:not([type=checkbox]):not([type=radio]) { min-height: 44px; } }
.print-only { display: none; }
@media print {
  /* Second review UI-M7: everything printed carries the agency's name and contact (spec 1 and 9). */
  .tools, .actions, form, .filter, .urgent-strip, .messages { display: none !important; }
  .print-only { display: block !important; }
  .screen-only { display: none !important; }   /* sixth review REG6-L1 */
  .print-agency { font-size: .85rem; }
  .topbar { background: none; border: 0; }
  main { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}
/* Intake review: original on the left, decisions on the right. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.split .original { max-height: 85vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #888; }
.split .original img { display: block; width: 100%; height: auto; margin-bottom: 4px; background: #fff; }
.form.wide { max-width: none; }
.page-text textarea { width: 100%; }
.page-text > button { justify-self: start; }
table.review tr.missing td:nth-child(2) { color: var(--red); }
table.review tr.unclear td:nth-child(2) { background: #fff4e0; }
table.review tr.different td:nth-child(3) { background: #fdecea; }
.tile.stat { flex-direction: column; font-size: 1.6rem; }
.tile.stat small { font-size: .85rem; font-weight: 500; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; }
main:has(.split) { max-width: 1500px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .original { max-height: 60vh; } }
/* Money: right-aligned, digits lined up. Wide tables scroll inside their box on a phone. */
.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.button.off { border-color: var(--line); color: #9a9a9a; cursor: default; }
tr.red td { background: #fdecea; }
tr.amber td { background: #fff4e0; }
/* Seventh review UI7-L11: a warning in a line of text stands out; a removed, replaced or cancelled row reads as such. */
p.red, span.red, strong.red, .note.red { color: var(--red); font-weight: 600; }
p.amber, span.amber, strong.amber, .note.amber { color: var(--amber); font-weight: 600; }
.banner > li.red, .banner > li.amber, li.red, li.amber { font-weight: 600; }
.banner > li.linked > a, .banner > li.linked > [role="alert"] > a { color: inherit; display: block; }   /* owner, 2026-10-27: the whole line opens its page; R43-UI-4: a red line's alert sits inside the item */
tr.muted td { color: var(--muted); text-decoration: line-through; }
span.muted, details.muted > summary { color: var(--muted); }
.scroll { overflow-x: auto; max-width: 100%; min-width: 0; }
/* Attendance: one tappable card per child, large enough to use with one thumb. */
.child-card { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin: .6rem 0; }
.child-card .name { font-size: 1.15rem; font-weight: 600; }
.child-card button { margin-top: .4rem; }
.depart-panel { margin-top: .6rem; display: grid; gap: .5rem; }
.handover { padding: 1rem; }   /* attendance.js moves it out of <main>, so it keeps a margin of its own */
/* WCAG 2.5.8: nothing to tap under 24 px. */
input[type=checkbox], input[type=radio] { min-width: 24px; min-height: 24px; }
summary { min-height: 24px; }
.sigpad { border: 1px solid #888; border-radius: 8px; background: #fdfdfb; width: fit-content; }
.sig-canvas { display: block; touch-action: none; width: 300px; height: 130px; }
/* Owner, 2026-11-04: the typed signature: closed, its fields are gone from the page; open, each fits a narrow phone. */
.sig-typed:not([open]) > :not(summary), .child-left:not([open]) > :not(summary),
.attendance-comment:not([open]) > :not(summary), .card-quiet:not([open]) > :not(summary) { display: none; }
.sig-typed { margin: .4rem 0; max-width: 100%; }
.sig-typed > summary { min-height: 44px; padding: .6rem 0; box-sizing: border-box; cursor: pointer; }
.sig-typed label { display: block; margin: .4rem 0; }
.sig-typed input:not([type=checkbox]) { display: block; width: 100%; box-sizing: border-box; min-height: 44px; }
.queued-chip { color: var(--amber); font-weight: 600; }
.offline-flag { padding: .5rem .8rem; border-radius: 8px; border-inline-start: 6px solid var(--amber); background: #fff4e0; }
.popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 1rem; }
.popup-box { background: var(--bg); border: 2px solid var(--red); border-radius: 10px; padding: 1.2rem;
  max-width: 420px; width: 100%; }
/* Forms: one question per screen, choices as large buttons. */
.choices { display: grid; gap: .5rem; max-width: 460px; margin: .6rem 0; }
.choice { display: flex; gap: .6rem; align-items: center; padding: .7rem .9rem; border: 2px solid var(--ink);
  border-radius: 10px; font-size: 1.1rem; background: #fff; cursor: pointer; }
.choice input { width: 1.3rem; height: 1.3rem; }
section.q input.value, section.q textarea.value { width: 100%; max-width: 460px; font-size: 1.1rem; }
/* Binder bundle: one form per printed page. */
.binder-page { break-after: page; page-break-after: always; }
.binder-page:last-child { break-after: auto; page-break-after: avoid; }
/* Instead of style attributes, which the Content-Security-Policy (style-src 'self') does not allow. */
.inline-form { display: inline; margin: 0; }
.post-photo { max-width: 300px; width: 100%; height: auto; }
.narrow-number { width: 5em; }
.tag { display: inline-block; padding: 0 .35rem; border: 1px solid var(--line); border-radius: 3px; }
.tag.red { border-color: var(--red); background: #fdecea; }
.tag.amber { border-color: var(--amber); background: #fff4e0; }
.tag.ok { border-color: var(--green); background: #edf7ee; }
tr.new > td { background: #fff9ec; }   /* owner, 2026-10-31: a message unread until this opening of Messages */
.side-by-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.side-by-side figure { margin: 0 0 1rem; }
.page-image { max-width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
/* "Question this payment": a small ? button that opens a short form under the row. */
details.question { display: inline-block; vertical-align: top; }
details.question > summary { list-style: none; cursor: pointer; min-width: 2.5em; text-align: center; font-weight: 700; }
details.question > summary::-webkit-details-marker { display: none; }
details.question[open] { display: block; margin-top: 0.5em; }

/* Quality basics (spec section 8): larger text, chosen with Text size - / + (owner, 2026-11-01: no Contrast). */
/* Final review U4: rem sizes follow the root, so A+ scales the root font (everything grows by a quarter). */
html.large { font-size: 22.5px; }
body.large .small, body.large table.small { font-size: 0.9rem; }
.tools form.display button[aria-pressed="true"] { outline: 2px solid var(--focus); }

/* Final review screen Lows: forms that stack on a phone, wide tables scroll inside the page (never the page),
   and the signed-out / paper notices styled like the others. */
form.stack label { display: block; margin: .5rem 0; }
form.stack input[type=text], form.stack input[type=date], form.stack select, form.stack textarea { display: block; width: 100%; max-width: 32rem; box-sizing: border-box; }
@media (max-width: 700px) {
  .sigpad canvas { max-width: 100%; }
}
/* static/js/table-scroll.js puts each wide table in a .scroll box; with no script the table itself scrolls. */
@media (scripting: none) and (max-width: 1000px) { main table { display: block; overflow-x: auto; max-width: 100%; } }
@media print { .scroll { overflow: visible; } }
.notice-box { padding: .6rem .9rem; border-radius: 8px; border-inline-start: 6px solid var(--focus); background: #eef3fd; margin: .5rem 0; }
.mono { font-family: ui-monospace, Consolas, monospace; } textarea.mono { width: 100%; box-sizing: border-box; white-space: pre; overflow-x: auto; }
.tile-group { font-size: 1rem; margin: 1.6rem 0 0; color: #1d4f91; font-weight: 700; border-left: 4px solid #2f6fbf; padding-left: .5rem; }   /* owner, 2026-11-07: a blue bar, no line */
body.contrast .tile-group { color: #000; border-left-color: #000; }
.grid.small-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-top: .5rem; }
.grid.small-tiles .tile { min-height: 52px; font-size: .95rem; }
/* Second review UI-L10: nothing wider than a 375 px phone, also with larger text. */
input, select, textarea { max-width: 100%; box-sizing: border-box; }
input[type=file] { width: 100%; }
main img:not(.sig-img), main video { max-width: 100%; height: auto; }
.sig-img { max-width: 100%; }   /* owner, 2026-10-28: a saved signature keeps its own height (48/80px set
  where it is shown), not the full size of the canvas it was drawn on */
main p, main li { overflow-wrap: anywhere; }
main { overflow-wrap: break-word; }   /* a long one-word name breaks rather than pushing the page sideways */
/* Screens review F20: a box hidden from sight that the keyboard still reaches (a file box inside its button label). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
label.button:focus-within { outline: 3px solid #1a5fb4; outline-offset: 2px; }
/* Screens review IMPROVEMENT 6: a keyboard user skips the header; shown only when it has the focus. */
.skip-link { position: absolute; inset-inline-start: .5rem; top: -3rem; background: var(--bg); padding: .4rem .8rem;
             border: 1px solid var(--line); z-index: 100; }
.skip-link:focus { top: .5rem; }
/* Owner, 2026-11-01: the search box in the header, its drop-down list of matches, and the everything-on-file page. */
.tools form.header-search { position: relative; }
.tools { min-width: 0; max-width: 100%; }
.tools form.header-search { min-width: 0; max-width: 100%; }
.header-search input[type="search"] { width: 12rem; min-width: 0; max-width: 100%; }
.header-search-list { position: absolute; top: 100%; inset-inline-start: 0; z-index: 50; min-width: 100%;
  width: max-content; max-width: min(28rem, 90vw); margin: .15rem 0 0; padding: .25rem 0; list-style: none;
  background: var(--bg, #fff); color: inherit; border: 1px solid #888; border-radius: .25rem;
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .2); }
.header-search-list li { padding: .35rem .6rem; cursor: pointer; }
.header-search-list li[aria-selected="true"], .header-search-list li:hover { background: #e4ecf7; }
.header-search-list .kind { font-size: .8em; font-weight: bold; margin-inline-end: .4rem; }
.header-search-list .detail { display: block; font-size: .85em; opacity: .8; }
.found-section { margin-block: 1rem; }
@media print { .header-search { display: none; } }

/* Owner, 2026-10-31: the banner box (every page's banner lines: web/_banner_box.html) - at most 3 lines, +N more opens the rest; a red line not resolved 15 minutes
   after its acknowledgement (or never acknowledged) flashes; with reduced motion, a strong outline instead. */
.banner-box { margin: 0 0 1rem; }
.banner-box .banner { margin-bottom: .4rem; }
.banner > li.deferred { opacity: .75; }
.banner > li > .line-state { display: block; font-weight: 600; }
.banner > li > .line-state:empty { display: none; }
.banner > li > .line-action { margin-top: .3rem; }
.banner-more > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
@keyframes jdm-banner-flash { 0%, 100% { background: #fdecea; } 50% { background: #f5b7b1; } }
.banner > li.flashing { animation: jdm-banner-flash 1s steps(2, jump-none) infinite; outline: 3px solid var(--red); }
@media (prefers-reduced-motion: reduce) {
  .banner > li.flashing { animation: none; background: #f5b7b1; outline: 4px solid var(--red); outline-offset: 2px; }
}
.notices li.notice-closed { list-style: none; padding: .6rem .8rem; border-radius: 8px; border-inline-start: 6px solid var(--red); }

/* Owner, 2026-11-01: Text size - / + in the header. */
.tools .text-size { margin-inline-end: .25rem; }
.tools form.display button[disabled] { opacity: .45; cursor: default; }

/* Owner, 2026-11-01 (banners v2): three boxes side by side (red Urgent, yellow Attention, white Low priority), each its
   count and its oldest item; a box opens its list. Side by side on a mobile too, smaller. System: a small grey link. */
.bboxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: .5rem; align-items: stretch; margin: 0 0 .6rem; }
.bbox { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .45rem .6rem; border: 2px solid var(--muted); border-radius: 8px; background: #fff; color: inherit; }
.bbox.red { border-color: var(--red); background: #fdecea; }
/* Owner, 2026-11-06: Urgent red, Attention orange, Low priority yellow ("white blends too well with page colour"), in the
   boxes and in the lines of each level's list; the text stays dark. */
.bbox.amber, .banner > li.amber { border-color: var(--level-orange-edge); background: var(--level-orange); color: var(--ink); }
.bbox.low, .banner > li.low { border-color: var(--level-yellow-edge); background: var(--level-yellow); color: var(--ink); }
body.contrast .bbox.amber, body.contrast .banner > li.amber, body.contrast .bbox.low, body.contrast .banner > li.low { color: #000; border-width: 3px; }
.bbox.empty { opacity: .7; }
.bbox .bbox-head { font-weight: 700; color: inherit; text-decoration: none; display: flex; justify-content: space-between; gap: .3rem; }
.bbox .bbox-count { font-variant-numeric: tabular-nums; }
.bbox .bbox-first { font-size: .9rem; color: inherit; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bbox .bbox-first.rich { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.bbox .bbox-first.rich ul { margin: .2rem 0; padding-inline-start: 1.1rem; }
.bbox.locked { opacity: .7; cursor: not-allowed; }
.bbox-lock { font-weight: 600; }
.bbox.system { align-self: start; border-color: #b0b0b0; background: #eee; color: #555; font-size: .85rem; white-space: nowrap; text-decoration: none; padding: .3rem .5rem; }
.bboxes:not(:has(.system)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@keyframes jdm-box-flash { 0%, 100% { filter: none; } 50% { filter: brightness(.82); } }
.bbox.flashing { animation: jdm-box-flash 1s steps(2, jump-none) infinite; outline: 3px solid var(--red); }
.bbox.amber.flashing { outline-color: var(--level-orange-edge); }
.banner > li.locked { opacity: .7; }
.banner-level h2 { margin-top: .4rem; }
.red-bar { background: #fdecea; border-inline-start: 6px solid var(--red); padding: .5rem .8rem; border-radius: 8px; margin: 0 0 .5rem; font-weight: 600; }
/* Owner, 2026-11-06: the relay down: a small marker, floated so that it does not push the page down. */
.site-offline { float: inline-end; margin: 0 0 .25rem .5rem; }
.site-offline > * { display: inline-flex; align-items: center; min-height: 32px; padding: .1rem .7rem; border-radius: 8px; font-size: .9rem;
                    font-weight: 600; color: var(--red); background: #fdecea; border: 1px solid var(--red); }
.site-offline > a { min-height: 44px; }
.system-daily { background: #eef2f7; border: 1px solid #b8c4d4; padding: .55rem .8rem; border-radius: 8px; margin: 0 0 .5rem; width: 100%; box-sizing: border-box; }
.blocker { border: 3px solid var(--red); background: #fdecea; border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1rem; }
@media (max-width: 600px) {
  .bboxes { gap: .3rem; }
  .bbox { padding: .3rem .35rem; }
  .bbox .bbox-head { font-size: .8rem; flex-direction: column; gap: 0; }
  .bbox .bbox-first { font-size: .72rem; }
  .bbox.system { font-size: .7rem; padding: .2rem .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bbox.flashing { animation: none; outline-width: 4px; }
}
/* Owner, 2026-11-01 ("crispness and colour ... buttons clear ... 3D effects ... up down action with sound"): raised,
   colour-coded buttons that press down when tapped. Colour by job: main action blue, danger red, arrival green,
   departure orange, everything else white. Motion is turned off for anyone whose device asks for less motion. */
:root { --btn-yellow: #f9c22e; --btn-yellow-edge: #a67c00; --btn-blue: #1565c0; --btn-blue-edge: #0d3f86; --btn-red: #c62828; --btn-red-edge: #8e1a1a;
        --btn-green: #2e7d32; --btn-green-edge: #1b5220; --btn-orange: #e65100; --btn-orange-edge: #a33a00;
        --btn-white-edge: #b9b2a6; }
button, .button { border-radius: 10px; border: 1px solid var(--btn-white-edge); background: linear-gradient(#ffffff, #f1ede6);
                  box-shadow: 0 3px 0 var(--btn-white-edge), 0 4px 8px rgba(0,0,0,.12); font-weight: 600;
                  transition: transform .06s ease, box-shadow .06s ease, filter .12s ease; position: relative; top: 0; }
button:hover:not([disabled]), .button:hover { filter: brightness(1.04); }
button:active:not([disabled]), .button:active, button.pressed, .button.pressed {
  transform: translateY(3px); box-shadow: 0 0 0 var(--btn-white-edge), 0 1px 3px rgba(0,0,0,.18); }
/* Owner, 2026-11-06: blue for positive or ordinary actions, red (.danger) only for one with no way back in the app. So a
   button in a page's content is blue unless it says otherwise (no specificity here: .danger and the tap colours win). The
   helpers of a tool (clear a signature, back, cancel, the hand-over keypad) stay white. The top bar is outside main. */
.primary, button.primary, .button.primary,
:where(main) button:where(:not(.sig-clear, .tap-cancel, .back, .refused-clear, .ho-key, .ho-back, .ho-sign-cancel)),
:where(main) :is(a, summary, label).button:where(:not(.off, .danger, .caution)) {
  color: #fff; border-color: var(--btn-blue-edge);
  background: linear-gradient(#1a6fd0, var(--btn-blue)); box-shadow: 0 3px 0 var(--btn-blue-edge), 0 4px 10px rgba(21,101,192,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.primary:active:not([disabled]), .primary.pressed,
main .button:active:not(.off, .danger, .caution),
main button:active:not([disabled]):not(.danger, .caution, .tap-in, .tap-out-open, .tap-out-confirm, .sig-clear, .tap-cancel, .back, .refused-clear, .ho-key, .ho-back, .ho-sign-cancel) {
  box-shadow: 0 0 0 var(--btn-blue-edge), 0 1px 3px rgba(0,0,0,.25); }
.danger, button.danger, .button.danger { color: #fff; border-color: var(--btn-red-edge);
  background: linear-gradient(#e04040, var(--btn-red)); box-shadow: 0 3px 0 var(--btn-red-edge), 0 4px 10px rgba(198,40,40,.3);
  text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.danger:active:not([disabled]), .danger.pressed { box-shadow: 0 0 0 var(--btn-red-edge), 0 1px 3px rgba(0,0,0,.25); }
/* Owner, 2026-11-06: a row of choices: every one an ordinary blue button; the one chosen looks pressed in, darker and underlined,
   so it shows by more than colour. */
.choices-label { align-self: center; font-weight: 600; }
:where(main) .button.choice[aria-current] { background: var(--btn-blue-edge); border-color: #082a5a; text-decoration: underline; text-underline-offset: .2em;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5); transform: translateY(3px); }
/* Owner, 2026-11-06: a form as on Settings: label column, then the fields in one straight line, one width, the hint beneath. */
.field-rows { display: grid; grid-template-columns: max-content minmax(0, 28rem); gap: .6rem .75rem; align-items: start; }
.field-rows > label { font-weight: 600; padding-top: .5rem; }
.field-box { display: grid; gap: .2rem; min-width: 0; }
.field-box > input, .field-box > textarea { width: 100%; }
.field-rows > .field-go { grid-column: 2; justify-items: start; }
.field-stack input[type=text], .field-stack textarea { display: block; width: 100%; }
@media (max-width: 719px) { .field-rows { grid-template-columns: minmax(0, 1fr); } .field-rows > .field-go { grid-column: 1; } .field-rows > label { padding-top: 0; } }
/* Owner, 2026-11-06: yellow, with dark text: a careful action that destroys nothing ("Clear sign-in locks"). */
.caution, button.caution, .button.caution { color: var(--ink); border-color: var(--btn-yellow-edge);
  background: linear-gradient(#ffd75e, var(--btn-yellow)); box-shadow: 0 3px 0 var(--btn-yellow-edge), 0 4px 10px rgba(176,132,0,.3); }
.caution:active:not([disabled]), .caution.pressed { box-shadow: 0 0 0 var(--btn-yellow-edge), 0 1px 3px rgba(0,0,0,.25); }
button.tap-in { border-color: var(--btn-green-edge); background: linear-gradient(#3fa046, var(--btn-green));
  box-shadow: 0 3px 0 var(--btn-green-edge), 0 4px 10px rgba(46,125,50,.35); }
button.tap-in:active { box-shadow: 0 0 0 var(--btn-green-edge), 0 1px 3px rgba(0,0,0,.25); }
button.tap-out-open, button.tap-out-confirm { border-color: var(--btn-orange-edge); background: linear-gradient(#f57c1f, var(--btn-orange));
  box-shadow: 0 3px 0 var(--btn-orange-edge), 0 4px 10px rgba(230,81,0,.35); }
button.tap-out-open:active, button.tap-out-confirm:active { box-shadow: 0 0 0 var(--btn-orange-edge), 0 1px 3px rgba(0,0,0,.25); }
button[disabled], .button.off { box-shadow: none; filter: grayscale(.6); }
/* Dashboard tiles: raised cards. Owner, 2026-11-06: one calm neutral edge on every tile: colour means something in this app. */
.tile { border: 1px solid var(--line); border-top: 4px solid var(--btn-white-edge); border-radius: 14px;
        background: linear-gradient(#ffffff, #f8f6f1); box-shadow: 0 4px 0 #d9d3c8, 0 6px 14px rgba(0,0,0,.08);
        transition: transform .06s ease, box-shadow .06s ease; }
a.tile:active, a.tile.pressed { transform: translateY(4px); box-shadow: 0 0 0 #d9d3c8, 0 1px 4px rgba(0,0,0,.12); }
.topbar { background: linear-gradient(#fbf8f2, var(--soft)); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
@media (prefers-reduced-motion: reduce) {
  button, .button, .tile { transition: none; }
  button:active, .button:active, a.tile:active, .pressed { transform: none; }
}
@media print {
  button, .button, .tile { box-shadow: none !important; background: #fff !important; color: #000 !important; text-shadow: none !important; }
}
/* Owner, 2026-11-01: the Audit page's summary, "Needs a look" box and folded day-and-person groups. */
/* Owner, 2026-11-06: the audit filter in one block: Action, Object, Who, then From, To, Show under them; a date in words sits under
   its box. One column on a phone. */
.audit-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; align-items: start; }
.audit-filter > input { width: 100%; }
.audit-filter > label { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem .4rem; align-items: center; }
.audit-filter > label > input { width: 100%; }
.audit-filter > label > .date-words { grid-column: 2; margin: 0; }
.audit-filter > button { justify-self: start; }
@media (max-width: 719px) { .audit-filter { grid-template-columns: minmax(0, 1fr); } }
.audit-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; }
.audit-summary h3 { margin: .2rem 0 .3rem; }
.audit-summary ul { margin: 0; padding: 0; list-style: none; }
.audit-summary li { padding: .1rem 0; }
.audit-events { list-style: none; padding: 0; margin: .3rem 0; }
.audit-events li { padding: .35rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.audit-events li.audit-event { padding: .6rem; }   /* owner, 2026-11-06: no stripes, only more space */
.audit-look { border-inline-start: 6px solid var(--amber); }
/* Owner, 2026-11-06: the technical line under an event folds behind "Details"; the human line stays. */
.audit-raw > summary { cursor: pointer; font-size: .85rem; color: var(--focus); }
.audit-raw > .mono { display: block; overflow-wrap: anywhere; }
details.audit-day { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; margin: .4rem 0; }
details.audit-day > summary { cursor: pointer; font-weight: 600; }
/* Owner, 2026-11-06: a page's opening note, split into short lines. */
.page-note { margin: .4rem 0 1rem; padding-inline-start: 1.2rem; }
.page-note li { margin: .1rem 0; }
/* Owner, 2026-11-06 ("all data fields should be vertically aligned visually within the main box"): from 720 px a form's fields
   stand in one straight line: its label column, then the field, the hint under the field, the button on the field line. As on
   Settings and Support. Signing screens, the long wording forms and a form in a table cell stay as they are; a phone stays one column. */
@media screen and (min-width: 720px) {
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) { --field-at: 14rem; max-width: 46rem; }
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])),
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > p > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])),
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > div > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])),
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > fieldset > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])),
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > div > fieldset > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])) {
    display: grid; grid-template-columns: var(--field-at) minmax(0, 1fr); column-gap: .75rem; align-items: baseline; }
  /* In a fieldset the column gives back the fieldset's edge and padding, so the fields stay on the one line. */
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > fieldset, main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > div > fieldset { margin-inline: 0; padding-inline: .8rem; border-width: 1px; }
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > fieldset > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])),
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) > div > fieldset > label:not(.check, :has(> input[type=checkbox]), :has(> input[type=radio])) {
    grid-template-columns: calc(var(--field-at) - .8rem - 1px) minmax(0, 1fr); }
  main :is(.form:not(.wide, .inline, .sign-and-submit, table *), form.stack:not(.sign-and-submit, table *)) label:not(.check) > :not(input, select, textarea) { grid-column: 2; }
  main form.stack:not(.sign-and-submit, table *) label > :is(input, select, textarea) { max-width: none; }
  /* The hint and the button stand on the field line, in a form that has fields in that line. */
  main .form:not(.wide, .inline, .sign-and-submit, table *):has(> label > :is(input:not([type=checkbox], [type=radio]), select, textarea)) > :is(button, a.button, p.note, ul.note) {
    margin-inline-start: calc(var(--field-at) + .75rem); }
  main .form:not(.wide, .inline, .sign-and-submit, table *):has(> label > :is(input:not([type=checkbox], [type=radio]), select, textarea)) > :is(button, a.button) { justify-self: start; }
  /* A row form or a filter: each label beside its own field. */
  main :is(.inline, .filter):not(.audit-filter) > label:not(:has(> input[type=checkbox]), :has(> input[type=radio])) { display: inline-flex; align-items: center; gap: .4rem; }
}
/* Owner, 2026-11-06: a PC screen, from 1024 px: smaller type and slimmer buttons, no lower than 40 px. Depends on the screen only:
   phones and tablets are as they were. The tap screens and the hand-over keep their size; Text size + (html.large) still wins. */
@media screen and (min-width: 1024px) {
  html { font-size: 16px; }
  :where(button, .button):not(.tap-in, .tap-out-open, .tap-out-confirm, .tap-cancel, .ho-key, .ho-back, .ho-sign-cancel, .sig-clear) { padding: .4rem .95rem; min-height: 40px; }
}
/* Owner, 2026-11-07: the monthly report's yes-or-no questions show their box only once Yes is chosen. */
@supports selector(:has(a)) {
  .yes-no .if-yes { display: none; }
  .yes-no:has(input[value="yes"]:checked) .if-yes { display: block; }
}
/* Owner, 2026-11-07 (evening): the registration step bar. A list down the page on a phone; a line of circles across
   it from 720px. Each stop says its state in words (Done, Next, Waiting, To do); colour only repeats it. */
.stepbar { margin: .5rem 0 1.25rem; }
.stepbar ol { list-style: none; margin: 0; padding: 0; }
.stepbar .step { display: flex; gap: .6rem; align-items: flex-start; position: relative; padding: 0 0 .9rem; }
.stepbar .step::before { content: ""; position: absolute; inset-inline-start: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.stepbar .step:last-child::before { display: none; }
.stepbar .step-done::before { background: var(--green); }
.step-dot { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
            justify-content: center; font-weight: 700; font-size: .85rem; border: 2px solid var(--muted); background: var(--bg);
            color: var(--muted); position: relative; z-index: 1; }
.step-done .step-dot { background: var(--green); border-color: var(--green); color: #fff; }
.step-next .step-dot { border-color: var(--btn-blue); color: var(--btn-blue); box-shadow: 0 0 0 4px rgba(21,101,192,.2); }
.step-waiting .step-dot { border-color: var(--amber); color: var(--amber); border-style: dashed; }
.step-text { display: flex; flex-direction: column; min-width: 0; }
.step-label { font-weight: 600; }
.step-next .step-label { color: var(--btn-blue); }
.step-state { font-size: .85rem; color: var(--muted); }
.step-detail { margin: .25rem 0 0; padding-inline-start: 1.1rem; font-size: .85rem; color: var(--amber); }
.stepbar-count { margin: 0 0 .5rem; }
@media screen and (min-width: 720px) {
  .stepbar ol { display: flex; }
  .stepbar .step { flex: 1 1 0; flex-direction: column; align-items: center; text-align: center; padding: 0 .25rem; }
  .stepbar .step::before { inset-inline-start: calc(50% + 16px); inset-inline-end: calc(-50% + 16px); top: 15px; bottom: auto; width: auto; height: 2px; }
  .step-text { align-items: center; }
  .step-detail { text-align: start; }
}
/* Inside a form: on a phone a row of small circles with only the part shown named (the other parts' names and states are
   hidden from sight but read by a screen reader), so the question stays near the top;
   from 720px the parts wrap in rows (a form can have a dozen). */
.form-steps ol { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.form-steps .step { padding: 0; }
.form-steps .step::before { display: none; }
.form-steps .step-dot { flex-basis: 26px; width: 26px; height: 26px; font-size: .75rem; }
/* Forty-first review R41-UI-L4: the other parts' names are hidden from sight only, so a screen reader still reads them. */
.form-steps .step:not(.step-next) .step-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                                               overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form-steps .step-next { flex-direction: row; align-items: center; text-align: start; }
.form-steps .step-next .step-text { flex-direction: row; gap: .4rem; align-items: baseline; }
@media screen and (min-width: 720px) {
  .form-steps ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem .75rem; }
  .form-steps .step, .form-steps .step-next { flex-direction: row; align-items: center; text-align: start; gap: .4rem; }
  .form-steps .step:not(.step-next) .step-text { position: static; width: auto; height: auto; margin: 0;
                                                 overflow: visible; clip: auto; white-space: normal; }
  .form-steps .step-text, .form-steps .step-next .step-text { flex-direction: column; align-items: flex-start; gap: 0; }
  .form-steps .step-label { font-size: .85rem; }
}
body.contrast .step-dot { border-color: #000; color: #000; }
body.contrast .step-done .step-dot { background: #000; color: #fff; }
/* Thirtieth review CSS30-L1: the hidden attribute always hides - whatever display a rule above gives the element
   (buttons, .button, labels, grids, print rules); kept last so it wins. */
[hidden] { display: none !important; }