:root {
    --ink: #182230;
    --muted: #5c6673;
    --faint: #5c6673;
    --line: #e3e8ed;
    --bg: #f6f8fa;
    --card: #ffffff;
    /* Surfaces and states that change with the theme. Use these, not hex. */
    --sunken: #f9fafb;
    --hover: #f4f8fd;
    --tint: #eaf1fb;
    --selected: #eef2f6;
    --line-strong: #c7d0d9;
    /* Status: one background, border and text colour per meaning. */
    --warn-bg: #fff8e6;
    --warn-tag: #fff1d6;
    --warn-line: #f5e3b3;
    --warn-line-strong: #dcb54e;
    --warn-ink: #7a4f00;
    --ok-bg: #e6f5ec;
    --ok-line: #bfe3cc;
    --danger-bg: #fde8ec;
    --danger-line: #f3c6cf;
    --danger-hover: #fff5f7;
    --danger-ink: #8c001c;
    --neutral-bg: #e9edf2;
    --neutral-ink: #425367;
    --orange-bg: #fff0e8;
    --orange-ink: #b33d00;
    /* The posting button: Avis red, deepened on hover. */
    --action: var(--avis);
    --action-hover: #b30023;
    --action-disabled: #5c6673;
    --on-disabled: #ffffff;
    --chip-off: #f2f5f9;
    --avis: #d4002a;
    --orange: #ed5506;
    --budget: #0a4ea2;
    --ok: #1d7a44;
    --radius: 10px;
    --serif: Baskerville, "Baskerville Old Face", "EB Garamond", Georgia, "Times New Roman", serif;
  }
  * { box-sizing: border-box; }
  /* The portal's face: Hanken Grotesk, served by the Worker because the CSP
     allows no outside fonts. Variable, 400 to 700. */
  @font-face { font-family: "Hanken Grotesk"; src: url("/fonts/HankenGrotesk.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 15px/1.55 "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    /* Crisp type: greyscale antialiasing stops light-on-dark text blooming
       on macOS, and real kerning and ligatures come from the font. */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; font-kerning: normal; font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  }
  button, input, select, textarea { font-family: inherit; }
  header {
    background: var(--card); border-bottom: 1px solid var(--line);
    padding: 18px 24px 0;
  }
  .masthead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  /* The wordmark is the short name; what the console is for sits beneath it
     in the interface face, small and quiet. */
  h1 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0;
       letter-spacing: .18em; line-height: 1.25; text-transform: uppercase; }
  .masthead-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.3; color: var(--muted); }
  .rule { display: flex; width: 118px; height: 5px; margin-top: 6px; }
  .rule i { flex: 1; }
  .rule i:nth-child(1) { background: var(--avis); }
  .rule i:nth-child(2) { background: var(--orange); }
  .rule i:nth-child(3) { background: var(--budget); }
  .header-actions {
    margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
    gap: 12px; flex-wrap: wrap;
  }
  .support-action {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 14px 8px 9px;
    color: var(--ink); background: var(--sunken); border: 1px solid var(--line); border-radius: 10px;
    text-decoration: none; box-shadow: 0 1px 2px rgba(24, 34, 48, .05);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .support-action:hover {
    border-color: var(--line-strong); box-shadow: 0 3px 10px rgba(24, 34, 48, .09); transform: translateY(-1px);
  }
  .support-action:focus-visible { outline: 2px solid var(--budget); outline-offset: 2px; }
  .support-icon {
    display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
    color: #fff; background: var(--action); border-radius: 8px;
  }
  .support-icon svg { width: 17px; height: 17px; }
  .support-copy { min-width: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; color: var(--muted); }
  .support-copy strong { display: block; margin-top: 4px; color: var(--ink); font-size: 14px; }
  .notice-support { align-self: start; }
  /* Theme switch: Auto, Light or Dark, in the header on every screen. */
  .theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; margin: 0; background: var(--card); }
  .theme-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-switch label { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 11px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
  .theme-switch input { position: absolute; opacity: 0; pointer-events: none; }
  .theme-switch svg { width: 14px; height: 14px; flex: none; }
  .theme-switch label:hover { color: var(--ink); }
  .theme-switch label:has(input:checked) { background: var(--ink); color: var(--card); }
  .theme-switch label:has(input:focus-visible) { outline: 2px solid var(--budget); outline-offset: 2px; }
  /* On a phone the three-way switch folds to one button that steps Auto,
     Light, Dark: a setting changed rarely should not lead the header. */
  .theme-cycle { display: none; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink); cursor: pointer; }
  .theme-cycle svg { width: 18px; height: 18px; }
  .theme-cycle:hover { background: var(--hover); }
  @media (max-width: 520px) { .theme-switch { display: none; } .theme-cycle { display: inline-grid; order: 2; } .header-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 10px; } .who .badge { white-space: nowrap; } }
  @media (prefers-reduced-motion: reduce) { .theme-switch label { transition: none; } }
  .who { text-align: right; font-size: 13px; color: var(--muted); }
  .who strong { display: block; color: var(--ink); font-size: 14px; }
  .badge {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
    font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  }
  .badge.group { background: var(--danger-bg); color: var(--avis); }
  .badge.location { background: var(--orange-bg); color: var(--orange-ink); }
  .badge.site { background: var(--tint); color: var(--budget); }

  nav { display: flex; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
  nav button {
    appearance: none; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--muted); padding: 9px 14px;
    border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0;
  }
  nav button:hover { color: var(--ink); background: var(--bg); }
  nav button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--avis); }
  .mobile-nav { display: none; margin: 14px 0; }
  .notice-views { display: flex; gap: 6px; margin-bottom: 18px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
  .notice-views button { flex: 1; min-height: 44px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; cursor: pointer; padding: 8px 12px; }
  .notice-views button[aria-selected="true"] { background: var(--ink); color: var(--card); font-weight: 600; }
  .view-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 5px; border-radius: 5px; background: rgba(128,128,128,.15); font-size: 12px; }
  .notice-disclosure { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
  .band-card.off-view { display: none; }
  .notice-disclosure > summary, .band-card > summary { min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 600; }
  .notice-disclosure > summary { margin: -10px -12px; padding: 10px 12px; }
  .notice-disclosure[open] > summary, .band-card[open] > summary { margin-bottom: 14px; }
  .editor-tools { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin-top: 8px; }
  .editor-tools > details { margin: 0; flex: 1 1 120px; }
  .editor-tools > details[open] { flex-basis: 100%; }
  .editor-tools summary { min-height: 44px; }
  .editor-tools > button, .preview-actions button { min-height: 44px; }
  .notice-controls .checks label { min-height: 44px; }
  .draft-actions { align-items: center; }
  .draft-actions > button { flex: 0 0 auto; min-height: 44px; }
  /* The attachment drop zone: one file, shown before it is posted. */
  .attach-drop { border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 14px; background: var(--card); cursor: pointer; transition: border-color .15s, background .15s; }
  .attach-drop:hover, .attach-drop:focus-visible, .attach-drop.dragging { border-color: var(--budget); background: var(--hover); outline: none; }
  .attach-drop.busy { cursor: progress; }
  .attach-empty strong { display: block; margin-bottom: 2px; }
  .attach-link { color: var(--budget); text-decoration: underline; }
  .attach-current { display: flex; align-items: center; gap: 12px; }
  .attach-thumb { flex: none; width: 72px; height: 54px; border: 1px solid var(--line); border-radius: 4px; background: #111 center/cover no-repeat; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .attach-info { min-width: 0; flex: 1; }
  .attach-info strong { display: block; overflow-wrap: anywhere; }
  .attach-current .action { flex: none; }
  .bell-choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
  .bell-choice input { margin-top: 4px; }
  .attach-optional { font-weight: 400; color: var(--muted); }
  .assurance-choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
  .assurance-choice input { margin-top: 4px; }
  .preflight { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); }
  .preflight-grid { display: grid; gap: 6px; margin-top: 6px; }
  .preflight-counter { display: flex; justify-content: space-between; gap: 12px; }
  .preflight-counter.warn { color: var(--warn-ink); }
  .delivery-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0 6px; }
  .delivery-stage { padding: 5px 6px; border-top: 3px solid var(--line-strong); color: var(--muted); font-size: 12px; }
  .delivery-stage.done { border-color: var(--ok); color: var(--ok); font-weight: 600; }

  /* --- Shift preview, 17 Oct 2026 -------------------------------------------
     The counter's second look, transcribed from ABGC/Shift*.swift at the same
     1180x820 point grid as the classic stage and scaled down as one piece.
     Registers from ShiftPalette.swift; sizes, paddings and radii from the
     views. Change the Swift and this is wrong until it is changed to match. */
  .choice-hint { margin: 4px 0 0 26px; }
  .link-button { appearance: none; border: 0; padding: 0 2px; margin: 0; background: none; font: inherit; color: var(--budget); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 28px; }
  /* The one confirmation dialog, for actions that cannot be undone. Cancel
     takes focus first, so Return never destroys anything. */
  #confirmDialog { width: min(440px, calc(100% - 24px)); padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); }
  #confirmDialog::backdrop { background: rgba(16,24,32,.64); }
  #confirmDialog h2 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; }
  #confirmDialog p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
  .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
  .confirm-actions .action { min-height: 44px; }
  .review-screen-note { margin: -6px 0 16px; }
  .review-screen-note:empty { display: none; }
  /* --- Counter display, 17 Oct 2026 -----------------------------------------
     Which of the two screens a message is shown in, chosen by whoever writes
     it: Original or New, one tile each, each carrying a miniature of the
     board it produces, so the choice shows its result instead of describing it. The preview beside the composer
     follows the tile; it has no switch of its own. Miniatures are drawn in
     the boards' own registers (CounterView, ShiftPalette), which do not
     change with the portal's light or dark theme. */
  .look-field { --ease-out: cubic-bezier(.22, 1, .36, 1); }
  .look-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 540px; }
  .look-tile {
    position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0;
    padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
    cursor: pointer; font-weight: 400;
    transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
  }
  .look-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .look-tile:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(24, 34, 48, .45); }
  .look-tile:has(input:checked) {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink), 0 14px 28px -18px rgba(24, 34, 48, .55);
  }
  .look-tile:has(input:focus-visible) { outline: 2px solid var(--budget); outline-offset: 3px; }
  /* The selected mark: an ink disc with a drawn tick, sitting on the miniature. */
  .look-tile::before, .look-tile::after { content: ""; position: absolute; z-index: 1; opacity: 0; transform: scale(.6); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
  .look-tile::before { top: 11px; right: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
  .look-tile::after { top: 15px; right: 17px; width: 4px; height: 8px; border: solid var(--card); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg) scale(.6); }
  .look-tile:has(input:checked)::before { opacity: 1; transform: scale(1); }
  .look-tile:has(input:checked)::after { opacity: 1; transform: rotate(45deg) scale(1); }
  .look-field { margin: 18px 0 4px; }
  .look-name { margin-top: 8px; padding: 0 3px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .look-tile:not(:has(input:checked)) .look-name { color: var(--muted); font-weight: 500; }
  /* Three tiles share a phone's width: tighter gaps keep "Departures" whole. */
  @media (max-width: 520px) { .look-tiles { gap: 8px; } .look-name { padding: 0 1px; } }
  /* Flap colour: a row of single flaps under the tiles, shown while Departures is chosen. */
  .flap-field { margin: 14px 0 0; }
  .flap-field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .flap-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
  .flap-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 7px 8px 8px; min-width: 62px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--muted);
    transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
  .flap-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .flap-swatch:hover { border-color: var(--line-strong); }
  .flap-swatch:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
  .flap-swatch:has(input:focus-visible) { outline: 2px solid var(--budget); outline-offset: 3px; }
  .flap-swatch i { position: relative; width: 30px; height: 42px; border-radius: 3px; display: grid; place-items: center; overflow: hidden;
    font: 700 28px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; font-stretch: condensed; font-style: normal;
    color: var(--fi); background: linear-gradient(var(--ff) 0 50%, color-mix(in srgb, var(--ff) 88%, #000) 50%); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .flap-swatch i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(0,0,0,.6); }
  .flap-swatch[data-flap=""] i { --ff: #171815; --fi: #FFD640; }
  /* With the colour on the lettering, each swatch shows coloured letters on the board's own flap. */
  #flapColourField[data-style="letters"] .flap-swatch i { background: linear-gradient(#171815 0 50%, #10110E 50%); color: var(--ff); }
  #flapColourField[data-style="letters"] .flap-swatch[data-flap=""] i { color: #FFD640; }
  .flap-where { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: 13px; }
  .flap-where label { display: flex; align-items: center; gap: 7px; margin: 0; min-height: 28px; font-weight: 500; color: var(--ink); cursor: pointer; }
  .flap-where input { margin: 0; }
  .flap-swatch[data-flap="red"] i { --ff: #D40029; --fi: #FFFFFF; }
  .flap-swatch[data-flap="amber"] i { --ff: #FFAA28; --fi: #111214; }
  .flap-swatch[data-flap="green"] i { --ff: #1C9A5B; --fi: #FFFFFF; }
  .flap-swatch[data-flap="blue"] i { --ff: #1F6FEB; --fi: #FFFFFF; }
  .flap-swatch[data-flap="white"] i { --ff: #FBFAF6; --fi: #111214; }
  .look-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
  .look-desc strong { color: var(--ink); font-weight: 600; }
  .look-desc strong::after { content: "·"; margin: 0 2px 0 6px; color: var(--muted); font-weight: 400; }

  /* Text size: a slider from the automatic size to twice it, between a small
     and a large letter so its direction reads without a label. The value
     pill says Auto until it is moved. */
  .size-row { --ease-out: cubic-bezier(.22, 1, .36, 1); }
  .layout-v2 .size-row { margin-top: 14px; }
  .size-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .size-head label { margin: 0 0 4px; }
  .size-value { min-width: 52px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
    color: var(--ink); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
  .size-value.size-set { border-color: var(--ink); }
  .size-control { display: flex; align-items: center; gap: 12px; min-height: 44px; }
  .size-glyph { flex: none; font-family: var(--serif); color: var(--muted); line-height: 1; user-select: none; }
  .size-glyph-small { font-size: 13px; }
  .size-glyph-large { font-size: 24px; }
  #textSize { --fill: 0%; flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
    -webkit-appearance: none; appearance: none; }
  #textSize:focus { outline: none; }
  #textSize::-webkit-slider-runnable-track { height: 4px; border-radius: 999px;
    background: linear-gradient(90deg, var(--ink) var(--fill), var(--line) var(--fill)); }
  #textSize::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); }
  #textSize::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--ink); }
  #textSize::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
    background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 3px 10px -3px rgba(24, 34, 48, .45);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
  #textSize::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink);
    box-shadow: 0 3px 10px -3px rgba(24, 34, 48, .45); transition: transform .18s var(--ease-out); }
  #textSize:hover::-webkit-slider-thumb, #textSize:active::-webkit-slider-thumb { transform: scale(1.1); }
  #textSize:hover::-moz-range-thumb, #textSize:active::-moz-range-thumb { transform: scale(1.1); }
  #textSize:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--budget); }
  #textSize:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--budget); }
  @media (prefers-reduced-motion: reduce) {
    #textSize::-webkit-slider-thumb, #textSize::-moz-range-thumb { transition: none; }
  }

  /* Miniature boards, at the counter's own 1180x820 proportions. */
  .mini { position: relative; display: block; aspect-ratio: 1180 / 820; border-radius: 7px; overflow: hidden; background: #050607;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
  .mini-board { position: absolute; inset: 0; display: block; }
  .mini-board i { position: absolute; display: block; }
  .mini-classic { background: #050607; }
  .mini-classic::before, .mini-classic::after { content: ""; position: absolute; left: 7%; right: 7%; height: 1px; background: #4aa3ff; opacity: .85; }
  .mini-classic::before { top: 17%; }
  .mini-classic::after { bottom: 14%; }
  .mini-classic i { left: 9%; height: 3.5%; border-radius: 1px; background: #38ff73; box-shadow: 0 0 4px rgba(56, 255, 115, .45); }
  .mini-classic i:nth-child(1) { top: 27%; width: 16%; }
  .mini-classic i:nth-child(1)::after { content: ""; position: absolute; left: 130%; top: 0; width: 220%; height: 100%; background: inherit; border-radius: inherit; }
  .mini-classic i:nth-child(2) { top: 38%; width: 74%; }
  .mini-classic i:nth-child(3) { top: 48%; width: 62%; }
  .mini-classic i:nth-child(4) { top: 58%; width: 70%; }
  .mini-classic i:nth-child(5) { top: 68%; width: 38%; }
  .mini-shift { background: #0B0E14; }
  .mini-shift::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5%;
    background: linear-gradient(90deg, #FF3B5C 0 33.3%, #FF7A33 33.3% 66.6%, #4D9BFF 66.6%); }
  .mini-shift i { border-radius: 2px; }
  .mini-shift i:nth-child(1) { left: 6%; top: 22%; width: 55%; height: 52%; background: #F4F5F8; }
  .mini-shift i:nth-child(2) { left: 65%; top: 22%; width: 29%; height: 24%; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(110, 242, 196, .7); }
  .mini-shift i:nth-child(3) { left: 65%; top: 50%; width: 29%; height: 24%; background: rgba(255, 170, 40, .22); }
  .mini-shift i:nth-child(4) { left: 6%; right: 6%; bottom: 12%; height: 3.5%; border-radius: 9px;
    background: linear-gradient(90deg, transparent 0 28%, rgba(255, 170, 40, .7) 28% 46%, transparent 46% 50%, #6EF2C4 50% 72%, transparent 72%); }
  .mini-departures { background: #000000; }
  .mini-departures::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5%;
    background: linear-gradient(90deg, #FF3B5C 0 33.3%, #FF7A33 33.3% 66.6%, #4D9BFF 66.6%); }
  .mini-departures i { left: 6%; right: 6%; height: 8%; background: repeating-linear-gradient(90deg, #2A2B30 0 4.6%, transparent 4.6% 5.6%); }
  .mini-departures i:nth-child(1) { top: 20%; height: 4%; background: linear-gradient(90deg, #FFC93C 0 12%, transparent 12% 20%, #FFC93C 20% 40%, transparent 40%); opacity: .8; }
  .mini-departures i:nth-child(2) { top: 31%; }
  .mini-departures i:nth-child(2)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16%; background: repeating-linear-gradient(90deg, #FFD640 0 17.6%, transparent 17.6% 21.6%); }
  .mini-departures i:nth-child(3) { top: 43%; }
  .mini-departures i:nth-child(4) { top: 55%; }
  .mini-departures i:nth-child(5) { top: 67%; }
  /* Which miniature each tile shows. */
  .look-tile[data-look="classic"] .mini-shift, .look-tile[data-look="shift"] .mini-classic { display: none; }

  /* The preview's caption: which board the little screen is drawing, and why. */
  .preview-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .pv-caption { margin: 10px 0 0; color: var(--ink); font-weight: 500; }
  .pv-caption:empty { display: none; }
  .pv-look-pill { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
  .pv-look-pill[hidden] { display: none; }
  .pv-look-pill::before { content: ""; width: 22px; height: 15px; border-radius: 999px; background: #050607;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
  .pv-look-pill[data-look="classic"]::before { background: linear-gradient(#38ff73, #38ff73) 5px 5px / 9px 2px no-repeat, linear-gradient(#38ff73, #38ff73) 5px 9px / 12px 2px no-repeat, #050607; }
  .pv-look-pill[data-look="departures"]::before { background: repeating-linear-gradient(90deg, #2A2B30 0 3px, transparent 3px 4px) 3px 4px / 16px 7px no-repeat, #08090B; }
  .pv-look-pill[data-look="shift"]::before { background: linear-gradient(#F4F5F8, #F4F5F8) 4px 4px / 8px 7px no-repeat, linear-gradient(#6EF2C4, #6EF2C4) 14px 4px / 4px 7px no-repeat, #0B0E14; }
  .pv-look-pill[data-look="cycle"]::before { background: linear-gradient(#38ff73, #38ff73) 4px 6px / 6px 2px no-repeat, linear-gradient(#F4F5F8, #F4F5F8) 13px 4px / 6px 7px no-repeat, linear-gradient(90deg, #050607 0 50%, #1B2230 50%); }

  @media (prefers-reduced-motion: reduce) {
    .look-tile, .look-tile::before, .look-tile::after { transition: none; }
    .look-tile:hover { transform: none; }
  }
  .sh-stage { --field: #0B0E14; --text: #F3F5F8; --t: 243,245,248; --muted: #9AA3B5; --dim: #5B6372; --soft: #C9D0DC;
    --line: rgba(255,255,255,.08); --card: rgba(255,255,255,.05); --paper: #F4F5F8; --ink: #0B0E14; --i: 11,14,20;
    --paper-muted: #5B6372; --mint: #6EF2C4; --m: 110,242,196; --amber: #FFAA28; --a: 255,170,40; --amber-text: #FFCF70;
    --priority: #D40029; --avis: #FF3B5C; --orange: #FF7A33; --budget: #4D9BFF;
    position: absolute; top: 0; left: 0; width: 1180px; height: 820px; transform-origin: 0 0; overflow: hidden;
    display: flex; flex-direction: column; background: var(--field); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.2; }
  .sh-stage.sh-reversed { --field: #F4F5F8; --text: #0B0E14; --t: 11,14,20; --muted: #5B6372; --dim: #7A8294; --soft: #2A3140;
    --line: rgba(0,0,0,.1); --card: rgba(0,0,0,.05); --paper: #0B0E14; --ink: #F3F5F8; --i: 243,245,248; --paper-muted: #9AA3B5;
    --mint: #0E8C64; --m: 14,140,100; --amber: #A35F00; --a: 163,95,0; --amber-text: #7A4600; --avis: #D40029; --orange: #ED5405; --budget: #0A4FA3; }
  .sh-stage[hidden], .crt-stage[hidden] { display: none; }
  /* --- Departures preview, 18 Oct 2026 -----------------------------------------
     The counter's third look, transcribed from ABGC/DeparturesBoard*.swift: a
     split-flap board on the same 1180x820 grid, laid out by the same rules
     (dpGrid, dpLines, dpPages mirror DeparturesBoardLogic). It
     borrows the Shift stage's chrome and status line, as the iPad does. */
  .dp-stage { --housing: #000000; --flap-top: #171815; --flap-bottom: #10110E; --hinge: #000000; --flap-ink: #FFD640;
    --heading: #FFD640; --text: #FFD640; --t: 255,214,64; --muted: rgba(255,214,64,.8); --dim: rgba(255,214,64,.6); --soft: #FFD640;
    --dp-rule: rgba(255,255,255,.07); --dp-pri: #D40029; --dp-pri-bottom: #BA0024; --dp-pri-ink: #FFFFFF;
    --dp-adv: #FFAA28; --dp-adv-bottom: #E0961F; --dp-adv-ink: #111214;
    --dp-flap-red: #D40029; --dp-flap-red-ink: #FFFFFF; --dp-flap-amber: #FFAA28; --dp-flap-amber-ink: #111214; --dp-flap-green: #1C9A5B; --dp-flap-green-ink: #FFFFFF; --dp-flap-blue: #1F6FEB; --dp-flap-blue-ink: #FFFFFF; --dp-flap-white: #FBFAF6; --dp-flap-white-ink: #111214;
    --dp-ink-red: #FF4D6A; --dp-ink-amber: #FFAA28; --dp-ink-green: #3DDC84; --dp-ink-blue: #5AA9FF; --dp-ink-white: #FFFFFF; background: var(--housing); }
  .dp-stage.sh-reversed { --housing: #E4E1D8; --flap-top: #FBFAF6; --flap-bottom: #F0EEE7; --hinge: #B9B5AA; --flap-ink: #111214;
    --heading: #7A5A00; --dp-rule: rgba(0,0,0,.1); --dp-pri: #D40029; --dp-pri-bottom: #BA0024; --dp-pri-ink: #FFFFFF;
    --dp-adv: #FFAA28; --dp-adv-bottom: #E0961F; --dp-adv-ink: #111214;
    --dp-flap-red: #D40029; --dp-flap-red-ink: #FFFFFF; --dp-flap-amber: #FFAA28; --dp-flap-amber-ink: #111214; --dp-flap-green: #1C9A5B; --dp-flap-green-ink: #FFFFFF; --dp-flap-blue: #1F6FEB; --dp-flap-blue-ink: #FFFFFF; --dp-flap-white: #171815; --dp-flap-white-ink: #111214;
    --dp-ink-red: #D40029; --dp-ink-amber: #A35F00; --dp-ink-green: #0E8C64; --dp-ink-blue: #0A4FA3; --dp-ink-white: #FFFFFF; }
  .dp-stage .dp-eyebrow { color: var(--heading); }
  .dp-clock { display: flex; justify-content: flex-end; }
  .dp-area { flex: 1; min-height: 0; padding: 22px 40px 0; display: flex; flex-direction: column; }
  .dp-heads { flex: none; height: 34px; display: flex; font-size: 13px; font-weight: 800; letter-spacing: 2.2px; color: var(--heading); white-space: nowrap; }
  .dp-heads .dp-page { margin-left: auto; font: 12px "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0; opacity: .7; }
  .dp-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .dp-rows, .dp-clock { --cw: 28px; --ch: 40px; --gap: 3px; --row-gap: 8px; }
  .dp-clock { --cw: 30px; --ch: 44px; --gap: 4px; gap: var(--gap); }
  .dp-row { position: relative; display: flex; flex: none; gap: var(--gap); height: var(--ch); }
  .dp-row + .dp-row { margin-top: var(--row-gap); }
  .dp-gutter { flex: none; width: var(--cw); }
  .dp-row.dp-starts::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--dp-rule); top: calc(var(--row-gap) / -2); }
  .dp-accent { position: absolute; left: -14px; top: 0; bottom: 0; width: 4px; border-radius: 2px; }
  .dp-c { position: relative; flex: none; width: var(--cw); height: var(--ch); font-size: calc(var(--ch) * .82); display: grid; place-items: center; overflow: hidden; border-radius: 3px; color: var(--flap-ink);
    background: linear-gradient(var(--flap-top) 0 50%, var(--flap-bottom) 50%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; font-stretch: condensed; font-weight: 700; line-height: 1; }
  .dp-c::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--hinge); }
  /* The time flaps carry the notice type, as DeparturesPageView.timeTone does: red for a priority, amber for an advisory. */
  .dp-c.dp-pri { color: var(--dp-pri-ink); background: linear-gradient(var(--dp-pri) 0 50%, var(--dp-pri-bottom) 50%); }
  .dp-c.dp-adv { color: var(--dp-adv-ink); background: linear-gradient(var(--dp-adv) 0 50%, var(--dp-adv-bottom) 50%); }
  .dp-half { position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(var(--flap-top) 0 50%, var(--flap-bottom) 50%); }
  .dp-pri .dp-half { background: linear-gradient(var(--dp-pri) 0 50%, var(--dp-pri-bottom) 50%); }
  .dp-adv .dp-half { background: linear-gradient(var(--dp-adv) 0 50%, var(--dp-adv-bottom) 50%); }
  /* A chosen colour on the lettering of every row, as DeparturesPalette.letterTones draws it. */
  .dp-c.dp-ink-red { color: var(--dp-ink-red); }
  .dp-c.dp-ink-amber { color: var(--dp-ink-amber); }
  .dp-c.dp-ink-green { color: var(--dp-ink-green); }
  .dp-c.dp-ink-blue { color: var(--dp-ink-blue); }
  .dp-c.dp-ink-white { color: var(--dp-ink-white); }
  /* White lettering on the inverted board sits on black flaps, as the white face turns black there. */
  .sh-reversed .dp-c.dp-ink-white, .sh-reversed .dp-ink-white .dp-half { background: linear-gradient(#171815 0 50%, #10110E 50%); }
  /* A chosen flap colour on every row of a message, as DeparturesPalette.flapTones draws it. */
  .dp-c.dp-flap-red { color: var(--dp-flap-red-ink); background: linear-gradient(var(--dp-flap-red) 0 50%, color-mix(in srgb, var(--dp-flap-red) 88%, var(--housing)) 50%); }
  .dp-flap-red .dp-half { background: linear-gradient(var(--dp-flap-red) 0 50%, color-mix(in srgb, var(--dp-flap-red) 88%, var(--housing)) 50%); }
  .dp-c.dp-flap-amber { color: var(--dp-flap-amber-ink); background: linear-gradient(var(--dp-flap-amber) 0 50%, color-mix(in srgb, var(--dp-flap-amber) 88%, var(--housing)) 50%); }
  .dp-flap-amber .dp-half { background: linear-gradient(var(--dp-flap-amber) 0 50%, color-mix(in srgb, var(--dp-flap-amber) 88%, var(--housing)) 50%); }
  .dp-c.dp-flap-green { color: var(--dp-flap-green-ink); background: linear-gradient(var(--dp-flap-green) 0 50%, color-mix(in srgb, var(--dp-flap-green) 88%, var(--housing)) 50%); }
  .dp-flap-green .dp-half { background: linear-gradient(var(--dp-flap-green) 0 50%, color-mix(in srgb, var(--dp-flap-green) 88%, var(--housing)) 50%); }
  .dp-c.dp-flap-blue { color: var(--dp-flap-blue-ink); background: linear-gradient(var(--dp-flap-blue) 0 50%, color-mix(in srgb, var(--dp-flap-blue) 88%, var(--housing)) 50%); }
  .dp-flap-blue .dp-half { background: linear-gradient(var(--dp-flap-blue) 0 50%, color-mix(in srgb, var(--dp-flap-blue) 88%, var(--housing)) 50%); }
  .dp-c.dp-flap-white { color: var(--dp-flap-white-ink); background: linear-gradient(var(--dp-flap-white) 0 50%, color-mix(in srgb, var(--dp-flap-white) 88%, var(--housing)) 50%); }
  .dp-flap-white .dp-half { background: linear-gradient(var(--dp-flap-white) 0 50%, color-mix(in srgb, var(--dp-flap-white) 88%, var(--housing)) 50%); }
  .dp-upper { clip-path: inset(0 0 50% 0); }
  .dp-lower { clip-path: inset(50% 0 0 0); }
  .dp-falling { transform-origin: center; filter: brightness(.88); }
  .dp-c { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 2px rgba(0,0,0,.5); }
  .dp-c::after { z-index: 1; }
  .dp-chip { position: absolute; top: 0; bottom: 0; left: calc(6 * (var(--cw) + var(--gap))); box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; border-radius: 10px;
    background: var(--housing); box-shadow: inset 0 0 0 1px rgba(var(--t),.12); font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
  .dp-chip span { color: var(--muted); font-weight: 600; }
  .sh-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-ligatures: none; }
  .sh-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .sh-rule { display: flex; height: 4px; flex: none; }
  .sh-rule i { flex: 1; }
  .sh-rule i:nth-child(1) { background: var(--avis); } .sh-rule i:nth-child(2) { background: var(--orange); } .sh-rule i:nth-child(3) { background: var(--budget); }
  .sh-top { display: flex; align-items: flex-end; gap: 32px; padding: 22px 40px 0; flex: none; }
  .sh-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.6px; color: var(--muted); }
  .sh-site { font-size: 38px; font-weight: 700; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-clockbox { margin-left: auto; text-align: right; flex: none; }
  .sh-clock { font-size: 40px; line-height: 1; }
  .sh-dayrow { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
  .sh-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--dim); }
  .sh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(var(--m),.18); }
  .sh-live { color: var(--text); }
  .sh-catch { height: 36px; display: flex; align-items: center; margin: 18px 40px 0; font-size: 14px; font-weight: 600; color: var(--muted); flex: none; }
  .sh-board { flex: 1; min-height: 0; display: flex; gap: 18px; margin: 18px 40px 0; }
  .sh-hero { position: relative; flex: none; width: calc((100% - 18px) * 2 / 3); display: flex; flex-direction: column; gap: 18px;
    padding: 28px 32px 26px; border-radius: 24px; background: rgba(var(--t),.06); border: 1px solid rgba(var(--t),.12); min-height: 0; }
  .sh-hero.sh-solo { width: 100%; }
  .sh-hero.sh-paper, .sh-card.sh-paper { background: var(--paper); border-color: transparent; color: var(--ink); }
  .sh-hero.sh-advisory, .sh-card.sh-advisory { background: rgba(var(--a),.09); border-color: rgba(var(--a),.35); }
  .sh-row { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
  .sh-meta { font-size: 14px; font-weight: 600; color: var(--muted); }
  .sh-paper .sh-meta, .sh-paper .sh-time { color: var(--paper-muted); }
  .sh-body { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; letter-spacing: -.01em; }
  .sh-hero .sh-body { flex: 1; min-height: 0; max-width: 680px; overflow: hidden; line-height: 1.16; }
  .sh-foot { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
  .sh-bell { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
  .sh-bell svg { width: 15px; height: 15px; }
  .sh-life { flex: 1; height: 6px; border-radius: 3px; background: rgba(var(--t),.1); position: relative; overflow: hidden; }
  .sh-paper .sh-life { background: rgba(var(--i),.1); }
  .sh-life i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 6px; border-radius: 3px; background: var(--text); }
  .sh-paper .sh-life i { background: var(--ink); }
  .sh-time { font-size: 13px; color: var(--muted); }
  .sh-stream { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
  .sh-page[hidden] { display: none; }
  .sh-page { display: flex; flex-direction: column; gap: 14px; }
  .sh-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; border-radius: 20px;
    background: var(--card); border: 1px solid rgba(var(--t),.1); }
  .sh-card.sh-new { border-color: rgba(var(--m),.55); }
  .sh-stage:not(.sh-reversed) .sh-card.sh-new { box-shadow: 0 0 18px rgba(var(--m),.16); }
  .sh-card .sh-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.22; }
  .sh-card .sh-time { font-size: 12px; }
  .sh-more { font-size: 12px; color: var(--dim); text-align: right; }
  .sh-accent { position: absolute; left: 14px; top: 28px; bottom: 28px; width: 5px; border-radius: 2px; }
  .sh-card .sh-accent { left: 10px; top: 18px; bottom: 18px; width: 4px; }
  .sh-pill { display: inline-block; padding: 5px 9px; border-radius: 7px; font-weight: 800; text-transform: uppercase; white-space: nowrap; line-height: 1.1; }
  .sh-pill.priority { background: var(--priority); color: #fff; }
  .sh-pill.advisory { background: rgba(var(--a),.22); color: var(--amber-text); }
  .sh-pill.plain { background: rgba(var(--t),.08); color: var(--muted); }
  .sh-pill.new { background: var(--mint); color: var(--ink); }
  .sh-pill.updated { background: var(--text); color: var(--ink); }
  .sh-paper .sh-pill.plain { background: rgba(var(--i),.06); color: var(--paper-muted); }
  .sh-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 12px;
    background: rgba(var(--t),.06); border: 1px solid rgba(var(--t),.1); font-size: 13px; font-weight: 700; }
  .sh-chip span { font-weight: 600; color: var(--muted); }
  .sh-chip b { width: 28px; height: 28px; border-radius: 6px; background: rgba(var(--t),.08) center / cover no-repeat; }
  .sh-paper .sh-chip { background: rgba(var(--i),.06); border-color: rgba(var(--i),.1); }
  .sh-ribbon { margin: 18px 40px 0; flex: none; }
  .sh-ribbon-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  .sh-ribbon-head strong { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; color: var(--muted); }
  .sh-ribbon-head hr { flex: 1; border: 0; height: 1px; background: var(--line); margin: 0; }
  .sh-ribbon-head .sh-mono { font-size: 12px; color: var(--muted); }
  .sh-track { position: relative; height: 54px; }
  .sh-bar { position: absolute; height: 10px; border-radius: 5px; background: var(--mint); }
  .sh-bar.priority { background: var(--paper); } .sh-bar.advisory { background: rgba(var(--a),.55); }
  .sh-now { position: absolute; top: -6px; display: flex; gap: 6px; font-size: 11px; color: var(--text); }
  .sh-now i { width: 2px; height: 54px; border-radius: 1px; background: var(--text); }
  .sh-hour { position: absolute; top: 40px; width: 24px; text-align: center; font-size: 11px; color: var(--dim); }
  .sh-status { margin-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; padding: 14px 40px 18px; flex: none; }
  .sh-status-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-status-text.sh-band { color: var(--soft); }
  .sh-status .sh-mono { font-size: 12px; color: var(--dim); white-space: nowrap; }
  .sh-clear { flex: 1; min-height: 0; margin: 36px 40px 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding-bottom: 8px; }
  .sh-clear-tag { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: 2.8px; color: var(--muted); }
  .sh-clear-tag svg { width: 26px; height: 26px; color: var(--mint); }
  .sh-clear-title { font-size: 92px; font-weight: 700; line-height: .98; letter-spacing: -.02em; }
  .sh-clear-sub { font-size: 18px; font-weight: 600; color: var(--muted); max-width: 560px; line-height: 1.4; }
  .sh-confetti { position: absolute; inset: 0; width: 1180px; height: 820px; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .sh-confetti { display: none; } }

  /* --- Layout v2, 12 Sep 2026: the composer as four steps ---------------
     Scoped to body.layout-v2, which applyLayoutV2() sets once the account
     is known. Trialled on the owner's login, then rolled out to everyone.
     Removing the class (or the call) restores the earlier page. Nothing
     here changes what the page can do - only the order things come in and
     how much prose sits beside them. */
  .layout-v2 [role="tabpanel"]:focus:not(:focus-visible) { outline: none; }
  .layout-v2 [role="tabpanel"]:focus-visible { outline: 2px solid var(--budget); outline-offset: 4px; }
  /* The card itself is the grid, so the preview column starts level with
     the "Post a notice" heading rather than with the first step beneath it.
     The old composer grid becomes transparent (display: contents) and its
     two children take their places in the card's areas. */
  .layout-v2 .notice-composer-card {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .8fr);
    grid-template-areas: "head previewhead" "controls preview";
    column-gap: 32px; align-items: start;
  }
  /* The device frame starts level with the message box, not 43px above it.
     The heading block is taller than the preview's label row, so while the
     preview was one item spanning both rows the frame began at the top of
     the first row and the box at the top of the second. Splitting the column
     puts the label beside the heading and the frame beside the box, so the
     two line up top and bottom however tall either heading grows. */
  .layout-v2 .notice-preview { display: contents; }
  .layout-v2 .preview-actions { grid-area: previewhead; }
  .layout-v2 .preview-body { grid-area: preview; min-width: 0; position: sticky; top: 16px; }
  .layout-v2 .notice-composer-head { grid-area: head; grid-template-columns: minmax(0, 1fr); }
  .layout-v2 .notice-composer-grid { display: contents; }
  .layout-v2 .notice-controls { grid-area: controls; }
  .layout-v2 .notice-composer-head .hint { margin-bottom: 8px; }
  .layout-v2 .notice-controls { display: flex; flex-direction: column; }
  .layout-v2 .notice-controls > [data-step] {
    display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 16px; row-gap: 0;
    margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  }
  .layout-v2 .notice-controls > [data-step] > * { grid-column: 2; min-width: 0; }
  .layout-v2 .notice-controls > [data-step]::before {
    content: attr(data-step); grid-column: 1; grid-row: 1 / span 40;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 6px;
  }
  .layout-v2 .notice-controls > [data-step]::after {
    content: attr(data-sub); grid-column: 1; grid-row: 1; align-self: start; margin-top: 26px; padding-right: 8px;
    font-size: 12px; color: var(--muted); line-height: 1.3;
  }
  /* No padding above the first step: it is what puts the message box level
     with the device frame beside it, to the pixel. */
  .layout-v2 .notice-controls > [data-step="Message"] { order: 1; border-top: 0; padding-top: 0; }
  .layout-v2 .notice-controls > [data-step="Counters"] { order: 2; }
  .layout-v2 .notice-controls > [data-step="Timing"] { order: 3; }
  .layout-v2 .notice-controls > [data-step="Extras"] { order: 4; }
  .layout-v2 [data-step] > label.step-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The box opens at two thirds of the preview frame beside it (287px, the
     frame's measured height at the 1080px main cap): tall enough to draft in
     without scrolling, short enough that the type and colour chips sit up
     under it instead of a screen away. Still drag-resizable from the corner,
     and a drag wins over this. */
  .layout-v2 #body { font-family: var(--serif); font-size: 19px; line-height: 1.4; min-height: 191px; }
  /* Notice type: four plain chips under the message, no emoji. */
  .layout-v2 .type-row { margin: 8px 0 0; }
  /* The colour row is the type row's twin - same chip, same hidden radio, same
     checked state - because the two are one decision about how a notice looks.
     The swatches carry the ink they set, in the value the board actually draws:
     lifted for a black screen, not the brand's own white-background hex. */
  .layout-v2 .accent-row #accentLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .layout-v2 #accentChoices { gap: 6px; }
  .layout-v2 .font-row { margin-top: 12px; }
  .font-row select { width: 100%; min-height: 44px; }
  @font-face { font-family: "Plex Notice"; font-weight: 400; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-display: swap; }
  @font-face { font-family: "Courier Prime"; font-weight: 400; src: url("/fonts/CourierPrime-Regular.ttf") format("truetype"); font-display: swap; }
  @font-face { font-family: "JetBrains Mono"; font-weight: 400; src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-display: swap; }
  .layout-v2 #accentChoices label { min-height: 30px; padding: 3px 9px; font-size: 13px; color: var(--muted); border-radius: 6px; gap: 6px; }
  .layout-v2 #accentChoices label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .layout-v2 #accentChoices label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; background: linear-gradient(135deg, #D4002A 33%, #ED5506 33% 66%, #0A4EA2 66%); }
  .layout-v2 #accentChoices label:has(input[value="avis"])::before { background: #FF0031; }
  .layout-v2 #accentChoices label:has(input[value="orange"])::before { background: #F7681E; }
  .layout-v2 #accentChoices label:has(input[value="budget"])::before { background: #4296FC; }
  .layout-v2 #accentChoices label:has(input:checked) { color: var(--ink); border-color: var(--ink); background: var(--card); font-weight: 600; }
  .layout-v2 .type-row #profileLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .layout-v2 #profileChoices { gap: 6px; }
  .layout-v2 #profileChoices label { min-height: 30px; padding: 3px 9px; font-size: 13px; color: var(--muted); border-radius: 6px; gap: 6px; }
  .layout-v2 #profileChoices label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .layout-v2 #profileChoices label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #38ff73; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
  .layout-v2 #profileChoices label:has(input[value=advisory])::before { background: #ff9e0a; }
  .layout-v2 #profileChoices label:has(input[value=priority])::before { background: #f2f2f2; box-shadow: 0 0 0 1px #999 inset; }
  .layout-v2 #profileChoices label:has(input[value=celebration])::before { background: #e0559f; }
  .layout-v2 #profileChoices label:has(input:checked) { color: var(--ink); border-color: var(--ink); background: var(--card); font-weight: 600; }
  .layout-v2 .editor-tools { margin-top: 8px; gap: 6px; align-items: center; }
  .layout-v2 .editor-tools > details { flex: 0 0 auto; }
  .layout-v2 .editor-tools > details[open] { flex-basis: 100%; }
  .layout-v2 .editor-tools #draftStatus { flex-basis: 100%; order: 10; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
  .layout-v2 .editor-tools #draftStatus:empty { display: none; }
  .layout-v2 .editor-tools #discardDraft { margin-left: auto; min-height: 30px; padding: 3px 10px; font-size: 13px; border: 0; color: var(--muted); background: none; }
  .layout-v2 .editor-tools #discardDraft:hover { color: var(--ink); background: var(--bg); }
  .layout-v2 .draft-actions { display: none; }
  .layout-v2 .editor-tools .notice-disclosure { margin: 0; padding: 0; border: 0; }
  .layout-v2 .editor-tools .notice-disclosure > summary { margin: 0; padding: 5px 10px; min-height: 32px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; }
  .layout-v2 .editor-tools .notice-disclosure[open] > summary { color: var(--ink); border-color: var(--ink); margin-bottom: 8px; }
  .layout-v2 .editor-tools .notice-disclosure[open] { flex-basis: 100%; }
  .layout-v2 .editor-tools .notice-disclosure[open] > *:not(summary) { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
  .layout-v2 .draft-actions { margin-top: 6px; }
  .layout-v2 .draft-actions > button { min-height: 32px; font-size: 13px; }
  .layout-v2 #draftStatus { margin: 0; font-size: 12px; }
  /* Counters: a tidy grid of equal-width tiles rather than ragged pills, so
     the eye can scan down a column. "All counters" takes a row of its own
     above them, which also keeps the risky option apart from the rest. */
  .layout-v2 #noticeSiteSearch { margin-bottom: 10px; padding: 8px 11px; font-size: 14px; }
  .layout-v2 #noticeSites {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    max-height: none; overflow: visible; padding: 0; gap: 8px;
  }
  .layout-v2 #noticeSites label, .layout-v2 .notice-controls .checks label { min-height: 36px; padding: 5px 10px 5px 9px; font-size: 14px; gap: 8px; }
  .layout-v2 #noticeSites label { border-radius: 8px; justify-content: flex-start; }
  .layout-v2 #noticeSites label.all-counters { grid-column: 1 / -1; }
  .layout-v2 #noticeSites label input { width: 15px; height: 15px; margin: 0; flex: none; }
  .layout-v2 #noticeSites .empty { grid-column: 1 / -1; }
  .layout-v2 .selection-summary { margin-top: 8px; }
  /* Timing: the send and take-down controls on one line, no disclosure. */
  .layout-v2 #noticeOptions > summary { display: none; }
  .layout-v2 #noticeOptions > .row, .layout-v2 #noticeOptions > .field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
  .layout-v2 #noticeOptions > .row { margin-bottom: 10px; }
  .layout-v2 #noticeOptions > .row > * { flex: 0 0 auto; }
  .layout-v2 #noticeOptions .field { margin: 0; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
  .layout-v2 #noticeOptions label { display: inline-block; margin: 0; font-size: 14px; font-weight: 500; flex: 0 0 96px; }
  .layout-v2 #noticeOptions .assurance-choice { display: flex; flex: 1 1 100%; align-items: flex-start; }
  .layout-v2 #noticeOptions select, .layout-v2 #noticeOptions input[type="datetime-local"] { width: auto; min-width: 0; padding: 6px 28px 6px 10px; font-size: 14px; }
  .layout-v2 #noticeOptions #scheduleField label { flex-basis: auto; }
  /* Fixed widths so "Take it down" and its two selects share one line: the
     longest option ("24 hours (maximum)") no longer sets the box. */
  .layout-v2 #noticeOptions #sendTiming { width: 150px; }
  .layout-v2 #noticeOptions #expiryMode { width: 170px; }
  .layout-v2 #noticeOptions #expiry { width: 120px; }
  .layout-v2 #noticeOptions label[for="expiry"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .layout-v2 #noticeOptions .countdown { margin: 0; flex-basis: 100%; }
  /* Extras: the owner's two options as one quiet strip. */
  .layout-v2 .step-extras > .field { margin: 0; }
  .layout-v2 .step-extras > .field + .field { margin-top: 10px; }
  .layout-v2 #attachLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .layout-v2 .attach-drop { padding: 10px 12px; }
  .layout-v2 .attach-empty strong { font-size: 14px; font-weight: 500; }
  .layout-v2 .attach-hint { font-size: 12px; }
  .layout-v2 .bell-choice { font-weight: 500; font-size: 14px; }
  /* The rule of the road as one line beside the button, detail a click away. */
  .layout-v2 .posting-summary .privacy-note { margin: 4px 0 0; padding: 0; background: none; border: 0; color: var(--muted); font-size: 12px; }
  .layout-v2 .posting-summary .privacy-note strong { display: inline; font-weight: 500; font-size: 12px; }
  .layout-v2 .posting-summary .privacy-note details { display: inline; margin: 0; }
  .layout-v2 .posting-summary .privacy-note summary { display: inline; color: var(--budget); cursor: pointer; list-style: none; }
  .layout-v2 .posting-summary .privacy-note summary::-webkit-details-marker { display: none; }
  .layout-v2 .posting-summary .privacy-note p { margin: 4px 0 0; max-width: 70ch; }
  .layout-v2 .posting-summary #postingTiming { margin-top: 2px; }
  /* Support under the preview, as a line rather than a card. */
  .layout-v2 .notice-preview .notice-support { margin-top: 16px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; width: auto; gap: 8px; }
  .layout-v2 .notice-preview .notice-support:hover { transform: none; box-shadow: none; }
  .layout-v2 .notice-preview .support-icon { width: 22px; height: 22px; flex-basis: 22px; border-radius: 5px; }
  .layout-v2 .notice-preview .support-icon svg { width: 12px; height: 12px; }
  .layout-v2 .notice-preview .support-copy { font-size: 13px; }
  .layout-v2 .notice-preview .support-copy strong { display: inline; margin-left: 5px; font-weight: 600; color: var(--budget); }
  /* The tabs, grouped: post · set up · people · records. */
  .layout-v2 #nav-screens, .layout-v2 #nav-managers, .layout-v2 #nav-records { margin-left: 10px; padding-left: 16px; border-left: 1px solid var(--line); border-radius: 0; }
  /* Enrol a device: a collapsed card at the top of Devices. */
  .enrol-card > summary { cursor: pointer; font-size: 16px; font-weight: 600; min-height: 44px; display: list-item; padding-top: 9px; }
  .enrol-card > summary .enrol-sub { display: inline; margin: 0 0 0 8px; font-weight: 400; }
  .enrol-card[open] > summary { margin-bottom: 12px; }
  /* Live notices as a list: the message, a few tags, quiet text actions. */
  .layout-v2 .notice { border-left: 0; padding: 16px 0; margin: 0; border-top: 1px solid var(--line); }
  .layout-v2 .notice:first-child { border-top: 0; padding-top: 4px; }
  .layout-v2 .notice .body { font-size: 18px; }
  .layout-v2 .notice .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
  /* Room between the text actions, and the destructive one set apart at the
     end so a miss on Send reminder cannot take a notice down. */
  .layout-v2 .notice-actions { margin-left: auto; gap: 10px; }
  .layout-v2 .notice-actions [data-withdraw], .layout-v2 .notice-actions [data-cancel-scheduled] { margin-left: 10px; }
  .layout-v2 .notice-actions .action.ghost.small { border: 0; background: none; color: var(--budget); padding: 4px 8px; min-height: 0; font-weight: 500; }
  .layout-v2 .notice-actions .action.ghost.small:hover { background: var(--bg); }
  /* Taking down and cancelling are drawn in ink, underlined: Avis red is the
     posting colour and means nothing else on the page. */
  .layout-v2 .notice-actions [data-withdraw], .layout-v2 .notice-actions [data-cancel-scheduled] { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  .layout-v2 .notice-actions .action.danger.small { border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; padding: 4px 8px; min-height: 0; }
  .layout-v2 .notice .countdown[data-delivery] { flex-basis: 100%; margin: 2px 0 0; }
  .layout-v2 .delivery-detail { border: 0; padding: 0; margin: 4px 0 0; }
  .layout-v2 .delivery-detail > summary { font-size: 13px; font-weight: 500; color: var(--budget); padding: 4px 0; }
  .layout-v2 .attach-line { margin: 2px 0 4px; }
  @media (max-width: 760px) {
    .layout-v2 .notice-controls > [data-step] { grid-template-columns: 1fr; }
    .layout-v2 .notice-controls > [data-step]::before { grid-row: auto; padding-top: 0; margin-bottom: 8px; }
    .layout-v2 .notice-controls > [data-step]::after { grid-row: auto; margin: -6px 0 8px; }
    .layout-v2 .notice-controls > [data-step] > * { grid-column: 1; }
  }
  .attach-hint { margin-top: 2px; }
  .attach-line { font-size: 13px; color: var(--muted); margin: 4px 0 6px; }
  .attach-line a { color: var(--budget); }
  .privacy-note details { margin-top: 4px; }
  .privacy-note summary { cursor: pointer; padding: 4px 0; }
  #noticeSiteSearch { margin-bottom: 8px; }
  #noticeSites { max-height: 176px; overflow-y: auto; padding: 3px; gap: 7px; }
  #noticeSites label { min-height: 44px; }
  .selection-summary { margin: 7px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
  .notice-action { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; margin-inline: auto; width: min(1032px, calc(100% - 48px)); padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 18px rgba(24,34,48,.1); display: flex; align-items: center; gap: 16px; }
  .posting-summary { flex: 1; min-width: 0; font-size: 13px; }
  .posting-summary strong { display: block; overflow-wrap: anywhere; }
  .posting-summary p { margin: 3px 0 0; color: var(--muted); }
  .posting-summary details { margin-top: 3px; color: var(--muted); }
  .posting-summary details summary { cursor: pointer; }
  .posting-summary details p { max-height: 100px; overflow-y: auto; }
  .notice-action .action { flex: 0 0 auto; min-height: 44px; }
  body.composing main { padding-bottom: calc(var(--posting-bar-height, 140px) + 24px); }
  html:has(body.composing) { scroll-padding-bottom: calc(var(--posting-bar-height, 140px) + 16px); }
  .preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .preview-actions label { margin: 0; }
  .editor-tools .preview-mobile { display: none; }
  #previewDialog { width: min(1000px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border: 1px solid var(--line); border-radius: 12px; padding: 20px; color: var(--ink); }
  #previewDialog::backdrop { background: rgba(24,34,48,.65); }
  .preview-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
  .preview-dialog-head h2 { margin: 0; font-size: 18px; }
  #previewDialog .notice-preview { display: block; position: static; }
  #previewDialog .preview-actions { display: none; }
  .preview-readable { display: none; }
  .preview-readable .body { font-size: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
  #previewDialog .preview-readable { display: block; }
  .band-card > summary { font-size: 16px; min-height: 44px; display: list-item; padding-top: 9px; }
  button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
    outline: 2px solid var(--budget); outline-offset: 2px;
  }

  main { max-width: 1080px; margin: 24px auto 80px; padding: 0 24px; }
  [hidden] { display: none !important; }
  .card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px; margin-bottom: 18px;
  }
  .card h2 { margin: 0 0 4px; font-size: 16px; }
  .card p.hint { margin: 0 0 16px; color: var(--muted); font-size: 14px; }

  label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 5px; }
  textarea, input[type=text], input[type=search], input[type=email], input[type=date], input[type=time], input[type=datetime-local], select {
    width: 100%; padding: 9px 11px; font: inherit; color: var(--ink);
    border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  }
  textarea { min-height: 92px; resize: vertical; }
  #body { font-family: var(--serif); font-size: 19px; line-height: 1.35; }
  /* The notice editor is the one control every manager must find - it wears
     a heavy ruled border where everything else stays hairline. */
  #body { border: 3px solid var(--ink); border-radius: 10px; padding: 12px 14px; }
  textarea:focus, input:focus, select:focus { outline: 2px solid var(--budget); outline-offset: 1px; border-color: transparent; }
  #body:focus { outline: 3px solid var(--budget); outline-offset: 2px; border-color: var(--ink); }
  .row { display: flex; gap: 14px; flex-wrap: wrap; }
  .row > * { flex: 1 1 200px; min-width: 0; }
  .field { margin-bottom: 14px; }

  .notice-composer-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
    align-items: start; gap: 28px; margin-bottom: 16px;
  }
  .notice-composer-head .hint { margin-bottom: 0; }
  .notice-composer-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
    grid-template-areas: "controls preview";
    align-items: start; gap: 0 28px;
  }
  .notice-controls { grid-area: controls; min-width: 0; }
  .notice-preview { grid-area: preview; min-width: 0; position: sticky; top: 16px; }

  .template-loader { display: flex; gap: 8px; align-items: stretch; }
  .template-loader select { min-width: 0; }
  .template-loader .action { flex: none; white-space: nowrap; }
  /* The emoji bar: chrome quiet enough that the glyphs are the only colour
     in the row, and a target big enough to hit on a touchscreen. */
  .emoji-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .emoji-bar button {
    appearance: none; cursor: pointer; font: inherit; font-size: 17px; line-height: 1;
    min-width: 44px; min-height: 44px; padding: 8px; border-radius: 7px; border: 1px solid transparent; background: none;
  }
  .emoji-bar button:hover { background: var(--bg); border-color: var(--line); }
  .emoji-bar button:focus-visible { outline: 2px solid var(--budget); outline-offset: 1px; }
  .emoji-bar .emoji-more {
    font-size: 13px; color: var(--muted); font-weight: 600; padding: 5px 9px;
  }
  .privacy-note {
    margin: -2px 0 16px; padding: 11px 14px; border-radius: 8px;
    background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 13px;
  }
  .privacy-note strong { display: block; font-weight: 700; font-size: 14px; }
  .privacy-note p { margin: 6px 0 0; }
  .notice-preview .ipad-frame { max-width: none; }
  .notice-preview > .hint { margin-top: 8px; }
  .restricted-access-note {
    margin-top: 14px; padding: 14px 16px;
    background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--avis);
    border-radius: 10px; box-shadow: 0 3px 12px rgba(18, 27, 39, .07);
  }
  .restricted-access-note strong {
    display: block; margin-bottom: 7px; color: var(--ink);
    font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
  }
  .restricted-access-note p {
    margin: 0 0 7px; color: var(--ink); font-size: 13px; line-height: 1.45;
  }
  .restricted-access-note p:last-child { margin-bottom: 0; }

  .checks { display: flex; gap: 10px; flex-wrap: wrap; }
  .checks label {
    display: inline-flex; align-items: center; gap: 7px; font-weight: 500;
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
    cursor: pointer; margin: 0; background: var(--card);
  }
  .checks label:has(input:checked) { border-color: var(--ink); background: var(--selected); color: var(--ink); font-weight: 600; }
  .checks label.all-counters { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
  .checks label.all-counters:has(input:checked) { border-color: var(--warn-line-strong); background: var(--warn-tag); color: var(--warn-ink); font-weight: 600; }

  button.action, a.action {
    appearance: none; border: 0; border-radius: 8px; cursor: pointer;
    font: inherit; font-weight: 600; padding: 10px 18px;
    background: var(--action); color: #fff; text-decoration: none; display: inline-block;
  }
  button.action:hover, a.action:hover { background: var(--action-hover); }
  button.action:disabled { background: var(--action-disabled); color: var(--on-disabled); cursor: default; }
  button.action.ghost:disabled { background: var(--card); color: var(--muted); border-color: var(--line); }
  button.ghost, a.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
  button.ghost:hover, a.ghost:hover { background: var(--bg); }
  /* Destructive buttons: ink text, the danger border and hover tint as the
     cue. Avis red stays the one colour that means "post". */
  button.danger { background: var(--card); color: var(--ink); border: 1px solid var(--danger-line); }
  button.danger:hover { background: var(--danger-hover); }
  button.small, a.small { padding: 5px 11px; font-size: 13px; }

  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .table-scroll { max-width: 100%; overflow-x: auto; }
  .table-scroll table { min-width: 680px; }
  .table-hint { display: none; color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
  .refresh-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .refresh-status .hint { flex: 1 1 240px; margin: 0; color: var(--muted); font-size: 14px; }
  .refresh-status .stale { color: var(--warn-ink); }
  th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); padding: 0 10px 8px 0; font-weight: 600; }
  td { padding: 11px 10px 11px 0; border-top: 1px solid var(--line); vertical-align: top; }
  tr.revoked td { color: var(--faint); }
  .tag { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--bg); color: var(--muted); }
  .tag.live { background: var(--ok-bg); color: var(--ok); }
  .tag.dead { background: var(--danger-bg); color: var(--danger-ink); }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

  /* The mini counter: a true scale model of the iPad app's CounterView, not
     an impression of it. The stage is laid out at the counter iPad's own
     point grid (1180x820, 11-inch iPad, landscape) using the same numbers
     CounterView.swift uses - type sizes, kerning, paddings, colours - then
     scaled down as one piece, so wrapping, paging and type scale land
     exactly where the real screen puts them. */
  .ipad-frame { background: #1c1c1e; border-radius: 22px; padding: 16px 18px; max-width: 640px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  /* The board reads in IBM Plex Mono (ABGC/WizardFont.swift), so the preview
     does too - a preview in a different face misdescribes the screen it is a
     picture of. Subset to the printable range the board draws and served by
     the Worker, because the portal's CSP forbids external requests. Falls back
     to the system mono, which is what the preview drew before. */
  @font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
  @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
  @font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); }
  .crt-clip { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 1180 / 820; overflow: hidden;
    border-radius: 6px; background: #000; }
  .crt-stage { --ph: rgb(56,255,115); --lb: rgb(74,163,255);
    /* Color.accentColor in the app's forced-dark scheme: the dark variant. */
    --accent: #f0244e;
    /* CounterView.intensified and the advisory amber. */
    --white: rgb(242,242,242); --amber: rgb(255,158,10);
    position: absolute; top: 0; left: 0; width: 1180px; height: 820px;
    transform-origin: 0 0; display: flex; flex-direction: column; background: #000;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ph); }
  /* CounterView.header: 17pt semibold mono, kerning 3, blue rule below. */
  .crt-head { flex: none; padding-top: 14px; }
  .crt-head-row { display: flex; align-items: baseline; padding: 0 28px;
    font-size: 17px; font-weight: 600; letter-spacing: 3px; white-space: pre; }
  .crt-head-label { color: var(--lb); }
  .crt-head-station { margin-left: auto; display: flex; align-items: baseline; gap: 14px; }
  .crt-head-site { color: var(--ph); text-shadow: 0 0 6px rgba(56,255,115,.55); }
  .crt-head-online { margin-left: 6px; color: var(--lb); font-size: 15px;
    font-weight: 500; letter-spacing: 2px; }
  .crt-head-rule { height: 1px; background: rgba(74,163,255,.8); margin-top: 10px; }
  /* The notice board: CounterView.noticePages' GeometryReader area. */
  .crt-area { position: relative; flex: 1; min-height: 0; }
  .crt-board { position: absolute; inset: 0; display: flex; flex-direction: column; }
  .crt-pages { flex: 1; min-height: 0; position: relative; overflow: hidden; }
  .crt-pagestrip { position: absolute; inset: 0; display: flex; }
  /* The CRT wipe, the counter's only page turn: the strip snaps to the new
     page beneath, a copy of the old page is cut away top to bottom behind a
     raster line, and the fresh page blooms before it settles. */
  .crt-ghost { position: absolute; inset: 0; display: flex; background: #000; pointer-events: none;
    animation: crt-hide .52s linear forwards; }
  .crt-raster { position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none;
    background: var(--ph); box-shadow: 0 0 10px 3px rgba(56,255,115,.85), 0 0 34px 10px rgba(56,255,115,.35);
    animation: crt-sweep .52s linear forwards; }
  .crt-page.crt-bloom { animation: crt-bloom .9s ease-out forwards; }
  @keyframes crt-hide { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
  @keyframes crt-sweep { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  @keyframes crt-bloom { 0%, 30% { filter: brightness(1.75) saturate(.8); } 100% { filter: none; } }
  .crt-page { flex: 0 0 100%; min-width: 0; display: flex; align-items: center;
    justify-content: center; padding: 0 32px 40px; overflow: hidden; }
  /* A page too full for even the smallest readable type reads from the top:
     centred overflow cut the first line off, and that is the one line a
     message cannot afford to lose. */
  .crt-page.crt-page-top { align-items: flex-start; }
  .crt-page-content { width: 100%; max-width: 1014.8px; } /* width * 0.86 */
  /* NoticeCard.poster / .listItem. */
  .crt-poster { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .crt-item { display: flex; gap: 26px; align-items: baseline; }
  .crt-item-bullet { color: var(--lb); font-weight: 700; flex: none; }
  .crt-item-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .crt-item-tail { display: flex; align-items: center; gap: 12px; }
  .crt-text { color: var(--ph); font-weight: 700; line-height: 1.33;
    text-shadow: 0 0 7px rgba(56,255,115,.5); white-space: pre-wrap; word-break: break-word; }
  /* Advisory: the amber register the screen already speaks for "degraded". */
  .crt-text.crt-advisory { color: var(--amber); text-shadow: 0 0 7px rgba(255,158,10,.5); }
  /* Scaled down to a thumbnail the glow scales with it and swamps the
     strokes, so a preview under ~60% of the iPad keeps a tighter halo. */
  @container (max-width: 700px) {
    .crt-stage:not(.crt-reversed) .crt-text, .crt-stage:not(.crt-reversed) .crt-head-site { text-shadow: 0 0 2px rgba(56,255,115,.35); }
    .crt-stage:not(.crt-reversed) .crt-text.crt-advisory { text-shadow: 0 0 2px rgba(255,158,10,.35); }
    .crt-stage:not(.crt-reversed) .crt-text.crt-intensified { text-shadow: 0 0 2px rgba(242,242,242,.3); }
  }
  /* Priority: the pinned ATTENTION band - intensified white, boxed, above
     the rotation and never part of it. */
  .crt-alertband { flex: none; display: flex; flex-direction: column; gap: 14px;
    padding: 18px 28px 6px; }
  .crt-alert { border: 2px solid var(--white); padding: 20px; display: flex;
    flex-direction: column; align-items: flex-start; gap: 14px; }
  .crt-alert-head { display: flex; align-items: center; gap: 12px; }
  .crt-alert-label { color: var(--white); font-size: 14px; font-weight: 800;
    letter-spacing: 3px; white-space: pre; }
  .crt-text.crt-intensified { color: var(--white); text-shadow: 0 0 7px rgba(242,242,242,.45); }
  /* BoardPalette.reversed: the whole screen, not one card. Hue is kept from
     the register above and only lightness moves - data 6.0:1, chrome 7.1:1,
     advisory 6.5:1, intensified 18.9:1 against this field - and the glow
     goes, because a halo the colour of the paper is a smudge. */
  .crt-stage.crt-reversed { background: #f2f2f2; }
  .crt-reversed .crt-text { color: #056b29; text-shadow: none; }
  .crt-reversed .crt-text.crt-advisory { color: #854700; }
  .crt-reversed .crt-text.crt-intensified { color: #000; text-shadow: none; }
  .crt-reversed .crt-meta,
  .crt-reversed .crt-head-label,
  .crt-reversed .crt-head-online,
  .crt-reversed .crt-prompt-mark,
  .crt-reversed .crt-item-bullet { color: #0a4ea2; }
  .crt-reversed .crt-head-site { color: #056b29; text-shadow: none; }
  .crt-reversed .crt-head-rule { background: rgba(10,78,162,.8); }
  .crt-reversed .crt-cursor { background: #056b29; }
  .crt-reversed .crt-alert { border-color: #000; }
  .crt-reversed .crt-alert-label { color: #000; }
  .crt-reversed .crt-alert .crt-text.crt-intensified { color: #000; }
  .crt-idle { flex: 1; display: flex; align-items: center; padding: 0 32px 40px; position: relative; }
  /* The attachment chip: CounterView.attachmentChips. Pinned under the header
     rule at the right, outside the text flow, so a notice with a file sets
     exactly as one without. 165 x 124 is 14% of the 1180 board, the size
     approved from the mockup of 12 Sep 2026. */
  .crt-chips { position: absolute; top: 22px; right: 28px; display: flex; flex-direction: column; gap: 14px; pointer-events: none; }
  /* A page with chips on screen starts below the chip column (pvChipInset,
     set inline per page), so a tile never sits on the first line of a full
     page. A page without one is untouched. */
  .crt-attach { width: 165px; display: flex; flex-direction: column; gap: 6px; }
  .crt-attach-thumb { width: 165px; height: 124px; box-sizing: border-box; border: 1px solid rgba(74,163,255,.8);
    background: #0a0a0a center/cover no-repeat; box-shadow: inset 0 0 10px rgba(74,163,255,.22); display: grid; place-items: center; }
  .crt-attach-doc { width: 42%; aspect-ratio: 3 / 4; background: var(--white); position: relative; box-shadow: 0 0 10px rgba(242,242,242,.25); }
  .crt-attach-doc::before { content: ""; position: absolute; right: 0; top: 0; width: 22%; aspect-ratio: 1; background: #0a0a0a; clip-path: polygon(0 0, 100% 100%, 0 100%); }
  .crt-attach-doc i { position: absolute; left: 14%; right: 14%; height: 4.5%; background: #bbb; }
  .crt-attach-doc i:nth-child(1) { top: 30%; width: 50%; } .crt-attach-doc i:nth-child(2) { top: 42%; } .crt-attach-doc i:nth-child(3) { top: 52%; } .crt-attach-doc i:nth-child(4) { top: 62%; right: 30%; }
  .crt-attach-label { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--lb); white-space: nowrap; }
  .crt-attach-label b { color: var(--white); font-weight: 600; }
  .crt-new { background: var(--accent); color: #fff; font-size: 13px; font-weight: 800;
    letter-spacing: 2.5px; padding: 4px 12px; border-radius: 999px; flex: none;
    align-self: flex-start; }
  .crt-meta { color: var(--lb); font-size: 13px; font-weight: 500; letter-spacing: 2px;
    white-space: pre; }
  .crt-divider { height: 1px; background: rgba(74,163,255,.35); margin: 34px 0; }
  .crt-prompt { display: flex; align-items: center; gap: 14px; margin-top: 44px; }
  .crt-prompt-mark { color: var(--lb); font-size: 26px; font-weight: 600; }
  .crt-cursor { width: 17px; height: 32px; background: var(--ph); flex: none;
    box-shadow: 0 0 6px rgba(56,255,115,.6); animation: crt-blink 1.06s steps(1) infinite; }
  @keyframes crt-blink { 50% { opacity: 0; } }
  .crt-pagefoot { flex: none; text-align: center; color: var(--lb); font-size: 15px;
    font-weight: 500; letter-spacing: 2px; padding-bottom: 12px; white-space: pre; }
  /* CounterView.allClearState: the one screen in the system typeface. */
  .crt-allclear { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
  .crt-allclear svg { width: 76px; height: 76px; color: rgba(235,235,245,.3); }
  .crt-allclear-title { font-size: 44px; font-weight: 500; color: rgba(235,235,245,.6); }
  .crt-allclear-site { font-size: 20px; color: rgba(235,235,245,.3); }
  /* WizardStatusLine. */
  .crt-foot { flex: none; }
  .crt-ticker { flex: 1; min-width: 0; overflow: hidden; color: #fff; white-space: nowrap; }
  .crt-ticker[hidden] { display: none; }
  .crt-ticker-track { display: flex; width: max-content; gap: 64px; }
  .crt-ticker-track.moving { animation: ticker-drift var(--ticker-duration) linear infinite; animation-delay: 2s; }
  @keyframes ticker-drift { to { transform: translateX(var(--ticker-travel)); } }
  @media (prefers-reduced-motion: reduce) { .crt-ticker-track.moving { animation: none; } .crt-ticker-copy { display: none; } }
  .crt-foot-rule { height: 1px; background: var(--lb); }
  .crt-foot-row > span { flex-shrink: 0; }
  #pvVtam { flex: 1; text-align: right; color: #fff; }
  .crt-foot-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 8px 18px;
    background: rgba(74,163,255,.10); color: var(--lb); font-size: 14px;
    font-weight: 500; letter-spacing: 2px; white-space: pre; }
  /* The 2.5-second attention wash the app paints when a new notice lands. */
  .crt-flash { position: absolute; inset: 0; background: var(--accent); opacity: 0;
    transition: opacity .45s ease-in-out; pointer-events: none; }
  .crt-flash.on { opacity: .16; }
  /* Sized and placed over the rotation by pvUpdateConfetti: the counter
     overlays its storm on noticePages, never on the pinned band. */
  .crt-confetti { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }

  .notice { padding: 2px 0; margin-bottom: 18px; }
  .notice + .notice { border-top: 1px solid var(--line); padding-top: 18px; }
  .notice .body { font-family: var(--serif); font-size: 21px; font-weight: 500;
    line-height: 1.35; max-width: 46em; white-space: pre-wrap; }
  .notice .meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
  .current-band { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .current-band .body { overflow-wrap: anywhere; }
  .current-band .meta { margin-top: 6px; font-size: 13px; color: var(--muted); }
  .repush-status { font-size: 13px; color: var(--muted); }
  .repush-status:not(:empty) { margin-top: 8px; }
  .repush-status.failed { color: var(--warn-ink); }
  .notice-actions { display: inline-flex; gap: 6px; margin-left: 6px; }
  .notice-edit { margin-top: 12px; max-width: 720px; }
  .notice-edit textarea { min-height: 76px; }
  .notice-edit-buttons { display: flex; gap: 8px; margin-top: 8px; }
  .notice-extend { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .notice-extend > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
  .flex-end { display:flex; align-items:flex-end; }

  /* Screen saver tab. */
  .saver-summary { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
  .checks label:has(input:checked) .saver-summary { color: var(--ink); }
  /* A screen and its time are one card: ticking the screen opens its time. */
  .saver-screens { display: flex; flex-direction: column; gap: 10px; }
  .saver-screen-option { display: grid; grid-template-columns: var(--saver-mini) minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .saver-screen-body { display: flex; flex-direction: column; min-width: 0; }
  /* What a ticked screen needs (its airports, its reminders) opens inside its card. */
  .saver-screen-settings { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; min-width: 0; }
  .saver-screen-settings[hidden] { display: none; }
  .saver-card-settings h4 { margin: 0 0 4px; font-size: 14px; }
  .saver-card-settings > .hint:first-child, .saver-card-settings > h4:first-child + .hint { margin-top: 0; }
  .saver-screen-option:has(input[name="saverScreen"]:checked) .saver-screen-settings input,
  .saver-screen-option:has(input[name="saverScreen"]:checked) .saver-screen-settings select { background-color: var(--card); }

  .saver-screen-option:has(input[name="saverScreen"]:focus-visible) { outline: 3px solid var(--budget); outline-offset: 3px; }
  .saver-screen-body > label { display: flex; align-items: flex-start; gap: 7px; margin: 0; min-height: 44px; font-weight: 500; cursor: pointer; }
  .saver-screen-body:has(input[name="saverScreen"]:checked) > label { color: var(--ink); font-weight: 600; }
  .saver-screen-body > label span { display: flex; flex-direction: column; gap: 2px; }
  .saver-screen-body > label small { font-weight: 400; color: var(--muted); font-size: 13px; line-height: 1.4; }
  .saver-screen-dwell { margin-top: 8px; padding: 0; border-top: 0; display: flex; flex-direction: column; gap: 4px; max-width: 280px; }
  .saver-screen-dwell[hidden] { display: none; }
  .saver-screen-dwell label, .saver-screen-dwell-label { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
  .saver-reminder-round { font-size: 14px; color: var(--ink); line-height: 1.4; min-height: 24px; display: flex; align-items: center; }
  .saver-screen-card .saver-design-preview { max-width: none; }
  .saver-cycle { margin-top: 10px; }
  .saver-cycle span { color: var(--ink); font-weight: 600; }
  .saver-cycle span:empty { display: none; }
  /* Mockups of the idle screens, drawn from the iPad app's ShiftPalette and
     scaled by container width so each reads as a small counter. */
  /* Small iPad previews stay beside their controls on desktop. */
  #tab-screensaver { --saver-mini: 240px; }
  /* The frame is the container, so the mockup's own padding and type scale to it too. */
  .saver-mini { margin: 0; width: var(--saver-mini); min-width: 0; container-type: inline-size; }
  .saver-mini .saver-screen, .saver-mini .saver-design-preview { border-radius: 6px; }
  .saver-mini-row { display: grid; grid-template-columns: var(--saver-mini) minmax(0, 1fr); gap: 14px; align-items: center; }
  .saver-mini-row .field { margin: 0; }
  /* The reminder designs, scaled to the thumbnail like the screens are. */
  .saver-mini .saver-design-preview { container-type: inline-size; padding: 5cqw; }
  .saver-mini .saver-design-preview header { font-size: 3.4cqw; padding-bottom: 2.4cqw; }
  .saver-mini .saver-design-preview strong { font-size: 8.4cqw; margin: 2cqw 0; line-height: 1.08; }
  .saver-mini .saver-design-preview p { font-size: 3.6cqw; }
  .saver-mini .saver-design-preview small { font-size: 2.8cqw; }
  .saver-mini .saver-design-preview footer { font-size: 2.8cqw; }
  .saver-mini .saver-brand-marks { gap: 1.2cqw; }
  .saver-mini .saver-brand-marks::before, .saver-mini .saver-brand-marks::after { width: 7cqw; height: 1cqw; }
  .saver-mini .saver-design-arrow { align-self: flex-start; font-size: 5cqw; padding: .4cqw 2cqw; border-radius: 1.2cqw; }
  .saver-mini .saver-design-copy br { display: none; }
  .saver-mini .saver-design-preview, .saver-mini .saver-screen { height: auto; }
  .saver-mini .saver-design-copy, .saver-mini .saver-classic { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
  .saver-screen { container-type: inline-size; aspect-ratio: 4 / 3; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 5cqw 5cqw 4cqw; border-radius: 10px; background: #0b0e14; color: #f3f5f8; font: 500 2.6cqw/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .saver-screen header { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; padding: 0; background: none; color: inherit; border: 0; position: relative; }
  .saver-screen header > span:first-child { display: flex; flex-direction: column; gap: .6cqw; }
  .saver-screen header small, .saver-screen footer, .saver-weather small, .saver-weather-origins small { font: 1.9cqw ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: #9aa3b5; }
  .saver-screen header b { font-size: 4cqw; font-weight: 600; min-height: 1.2em; }
  .saver-screen header b.heavy { font-weight: 800; }
  .saver-screen-clock { display: flex; align-items: baseline; gap: 1.6cqw; font-size: 5.4cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
  .saver-screen-clock small { font: 500 2.4cqw -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; color: #c9d0dc; }
  .saver-screen footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; position: relative; }
  .saver-screen footer.stacked { flex-direction: column; align-items: stretch; gap: 2.4cqw; }
  .saver-screen footer > span { display: inline-flex; align-items: center; gap: 1.4cqw; }
  .saver-dot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #6ef2c4; display: inline-block; }
  .saver-soft { color: #c9d0dc; }
  .saver-weather { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 4cqw; align-items: center; }
  .saver-weather-now { display: flex; flex-direction: column; gap: 2cqw; min-width: 0; }
  .saver-weather-big { display: flex; align-items: center; gap: 3cqw; }
  .saver-weather-big svg { width: 13cqw; height: 13cqw; color: #4d9bff; flex: none; }
  .saver-weather-big span { display: flex; flex-direction: column; }
  .saver-weather-big b { font-size: 15cqw; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
  .saver-weather-big i, .saver-weather-hours i { font-style: normal; }
  .saver-weather-big i { font-size: 3.6cqw; font-weight: 600; }
  .saver-weather-hours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
  .saver-weather-hours li { display: flex; flex-direction: column; gap: .6cqw; padding: 1.6cqw 1.4cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.05); }
  .saver-weather-hours b { font-size: 3.2cqw; font-weight: 600; }
  .saver-weather-hours i { font-size: 1.8cqw; color: #9aa3b5; }
  .saver-weather-hours i.rain { color: #4d9bff; }
  .saver-weather-origins { padding: 2.6cqw; border-radius: 2.4cqw; background: rgba(255,255,255,.05); }
  .saver-weather-origins > b { display: block; font-size: 2.6cqw; font-weight: 600; line-height: 1.25; }
  .saver-weather-origins ul { list-style: none; margin: 1.4cqw 0 0; padding: 0; }
  .saver-weather-origins li { display: flex; align-items: center; gap: 1.6cqw; padding: 1.3cqw 1cqw; margin: 0 -1cqw; border-top: 1px solid rgba(255,255,255,.08); border-radius: 1cqw; font-size: 2.5cqw; }
  .saver-weather-origins li.lit { background: rgba(243,245,248,.08); font-weight: 600; }
  .saver-weather-origins em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 2.9cqw; }
  .saver-screen-aurora::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(circle at 22% 14%, rgba(212,0,41,.5), transparent 38%),
    radial-gradient(circle at 86% 94%, rgba(255,59,92,.42), transparent 40%),
    radial-gradient(circle at 55% 48%, rgba(107,0,23,.4), transparent 30%); filter: blur(2cqw); }
  .saver-classic { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw; max-width: 82%; }
  .saver-classic small { font: 1.9cqw ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
  .saver-classic strong { font-size: 6.4cqw; font-weight: 500; line-height: 1.12; }
  .saver-classic p { margin: 0; font-size: 2.8cqw; }
  .saver-progress { gap: 1cqw !important; color: #c9d0dc; }
  .saver-progress i { width: .9cqw; height: .9cqw; border-radius: 1cqw; background: rgba(243,245,248,.35); display: inline-block; }
  .saver-progress i.on { width: 4cqw; background: #f3f5f8; }
  .saver-routes { flex: 1; width: 100%; min-height: 0; margin: 1cqw 0; }
  .saver-routes .land { fill: #161c28; stroke: #232b3b; stroke-width: 1; }
  .saver-routes .route { stroke: #ff7a33; stroke-width: 2.2; stroke-linecap: round; }
  .saver-routes .route.faint { stroke-opacity: .4; stroke-width: 1.2; }
  .saver-routes .pin { fill: #ff7a33; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
  .saver-routes .pin text { fill: #c9d0dc; }
  .saver-routes .pin.faint { opacity: .5; }
  .saver-routes .plane { fill: #f3f5f8; }
  .saver-routes .home { fill: #f3f5f8; }
  .saver-map-home { fill: #f3f5f8; font: 9px ui-monospace, monospace; }
  .saver-routes .home-ring { stroke: #ff7a33; stroke-opacity: .6; }
  .saver-clock { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 24cqw; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .saver-handover { padding: 2cqw 2.6cqw; border-radius: 2.2cqw; background: rgba(243,245,248,.08); color: #f3f5f8; font: 500 3cqw/1.25 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; gap: 2cqw !important; }
  .saver-handover em { flex: none; font: normal 1.7cqw ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; padding: .6cqw 1.3cqw; border-radius: 99px; background: #6ef2c4; color: #0b0e14; }
  .saver-block { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
  .saver-block h3 { margin: 0 0 4px; font-size: 15px; }
  .saver-origins { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
  .saver-origins li { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 12px; background: var(--card); }
  .saver-origins .mono { font-weight: 600; }
  .saver-design-preview { aspect-ratio: 4 / 3; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #d6d5d0; border-radius: 10px; overflow: hidden; color: #17212a; background: #f4f0e7; }
  .saver-design-preview header { display: flex; justify-content: space-between; gap: 8px; padding: 0 0 10px; color: inherit; background: transparent; border-bottom: 1px solid #8b8e91; font-size: 12px; }
  .saver-design-preview strong { display: block; font: 600 clamp(20px, 2.5vw, 36px)/1.05 Georgia, serif; margin: 10px 0; }
  .saver-design-preview p { font-size: 12px; line-height: 1.4; margin: 0; }
  .saver-design-preview small { font: 10px ui-monospace, monospace; letter-spacing: .06em; }
  .saver-design-preview footer { display: flex; justify-content: space-between; font: 10px ui-monospace, monospace; }
  .saver-brand-marks { display: inline-flex; gap: 5px; }
  .saver-brand-marks::before, .saver-brand-marks::after { content: ""; width: 28px; height: 4px; background: #dc0032; }
  .saver-brand-marks::after { background: #0a4fa3; }
  .saver-design-preview.airport { background: #101a29; color: #f3f5f8; border-color: #101a29; }
  .saver-design-preview.airport header { border: 0; }
  .saver-design-preview.airport strong, .saver-design-preview.colour-block strong { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 750; }
  .saver-design-arrow { display: inline-block; padding: 2px 9px; border-radius: 5px; background: #226fd9; color: white; font-size: 22px; }
  .saver-design-preview.colour-block { background: linear-gradient(to right, #fafaf7 78%, #177b4e 78%); position: relative; }
  .saver-design-preview.colour-block header { border: 0; }
  .saver-design-preview.colour-block header span:last-child { color: white; }
  .saver-design-preview.colour-block .saver-design-copy { padding-right: 24%; }
  .saver-design-key { position: absolute; right: 5%; top: 43%; width: 12%; height: 30%; color: white; }
  /* Every configured reminder has its own preview beside its own controls. */
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .saver-reminders-heading { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
  .saver-reminders-heading .saver-screen-dwell { margin: 0; padding: 0; border: 0; text-align: right; }
  .saver-reminders-section > .saver-screen-settings { padding-top: 0; border-top: 0; }
  .saver-reminders { margin: 12px 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .saver-reminders li { display: grid; grid-template-columns: var(--saver-mini) minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .saver-reminder-settings { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .saver-reminder-settings h4 { margin: 0; font-size: 15px; }
  .saver-reminder-words { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .saver-reminder-words label, .saver-reminder-controls legend, .saver-reminder-seconds label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
  .saver-reminder-words input { width: 100%; box-sizing: border-box; }
  .saver-reminder-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
  .saver-reminder-controls > .saver-reminder-seconds { flex: 1 1 160px; }
  .saver-reminder-controls > button { margin-left: auto; }
  .saver-reminder-seconds { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
  .saver-reminder-seconds select { width: 100%; }
  .saver-reminder-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--muted); font-size: 11px; }
  .saver-swatches { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; gap: 6px; }
  .saver-reminders:empty { margin: 0; }
  .saver-reminder-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .saver-reminder-actions > button { min-height: 44px; }
  .saver-reminder-actions > details { flex: 1 1 240px; margin: 0; }
  .saver-reminder-actions > details[open] { flex-basis: 100%; }
  .saver-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
  .saver-actions .hint { margin: 0; color: var(--muted); font-size: 14px; }
  @media (max-width: 720px) {
    #tab-screensaver { --saver-mini: 190px; }
    .saver-reminders li { gap: 16px; padding: 14px; }
  }
  @media (max-width: 560px) {
    #tab-screensaver { --saver-mini: min(100%, 280px); }
    .saver-screen-option, .saver-reminders li, .saver-mini-row { grid-template-columns: minmax(0, 1fr); }
    .saver-reminders-heading { flex-direction: column; gap: 0; }
    .saver-reminders-heading .saver-screen-dwell { text-align: left; padding-left: 22px; }
    .saver-reminder-controls { gap: 10px; }
    .saver-reminder-controls > button { margin-left: 0; }
  }
  .post-confirm-wrap { padding:0; border:0; background:none; }
  /* Outranks .warn, which is declared later: a completed action reads green. */
  .warn.post-confirm { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
  .subtle-label { font-weight:400; color:var(--muted); }
  .manager-status { margin-top:14px; }
  .nowrap { white-space:nowrap; }
  .history-body { max-width:30em; }

  .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
  .activity-scroll { max-height: 330px; overflow: auto; border-top: 1px solid var(--line); }
  .activity-scroll table { font-size: 13px; }
  .activity-scroll th { position: sticky; top: 0; background: var(--card); padding-top: 7px; z-index: 1; }
  .activity-scroll td { padding-top: 6px; padding-bottom: 6px; }
  .history-site { border-top: 1px solid var(--line); }
  .history-site:first-child { border-top: 0; }
  .history-site summary { cursor: pointer; padding: 12px 2px; font-size: 15px; font-weight: 600; }
  .history-site summary:hover { color: var(--budget); }
  .history-site summary .tag { margin-left: 7px; }
  .history-site table, .history-site .empty { margin-bottom: 14px; }

  .muted { color: var(--muted); }
  label.check-row { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 500; }
  .tag.warn { background: var(--warn-tag); color: var(--warn-ink); }
  .tag-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Counters table: the counter and its manager are the two things anyone
     reads, so they get room to breathe; the short columns stay short. */
  #sites table { min-width: 860px; }
  #sites .counter-cell { min-width: 200px; padding-right: 24px; }
  #sites .counter-cell .name { font-weight: 600; color: var(--ink); }
  #sites .counter-cell .tag { display: inline-block; margin-top: 5px; }
  #sites .manager-cell { min-width: 230px; padding-right: 24px; }
  #sites .manager-list { display: flex; flex-direction: column; gap: 10px; }
  #sites .manager { display: flex; align-items: flex-start; gap: 9px; }
  #sites .manager .initials { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--budget);
    font-size: 12px; font-weight: 700; letter-spacing: .3px; display: inline-flex; align-items: center; justify-content: center; }
  #sites .manager.suspended .initials { background: var(--bg); color: var(--faint); }
  #sites .manager .person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  #sites .manager .name { font-weight: 500; color: var(--ink); white-space: nowrap; }
  #sites .manager.suspended .name { color: var(--faint); }
  #sites .manager .email { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  #sites .manager .tag { align-self: flex-start; margin-top: 2px; }
  #sites .no-manager { color: var(--faint); font-style: italic; }
  /* A counter's look. Only Shift is labelled; classic is every counter's default. */
  #sites .no-manager a { display: inline-block; padding: 13px 6px; margin: -13px -6px; color: var(--muted); font-style: normal; text-decoration: underline; text-underline-offset: 2px; }
  #sites .no-manager a:hover { color: var(--ink); }
  #sites td.num { font-variant-numeric: tabular-nums; }
  tr.device-detail > td { background: var(--bg); padding: 14px 12px; }
  .device-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
  .device-facts dt { color: var(--muted); font-weight: 600; }
  .device-facts dd { margin: 0; }
  .device-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .device-toolbar .hint { flex: 1; margin: 0; color: var(--muted); font-size: 13px; }
  .device-site { border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; overflow: hidden; }
  .device-site > summary { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; padding: 13px 15px; background: var(--bg); list-style: none; }
  .device-site > summary::-webkit-details-marker { display: none; }
  /* The disclosure mark stays on the first line beside the counter's name,
     whatever the tags after it do on a narrow screen. */
  .device-site > summary::before { content: "▸"; flex: none; width: 12px; line-height: 1.5; color: var(--muted); }
  .device-site[open] > summary::before { content: "▾"; }
  .device-site > summary:focus-visible { outline: 2px solid var(--budget); outline-offset: -2px; }
  .device-site-heading { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
  .device-site-title { font-weight: 600; overflow-wrap: anywhere; }
  .device-site-table { padding: 14px; overflow-x: auto; }
  .device-site table { min-width: 710px; }
  .device-name { overflow-wrap: anywhere; }
  .device-site td:first-child { width: 30%; }
  .device-site .row-actions { min-width: 155px; }
  .device-rename > td { background: var(--bg); padding: 14px; }
  .device-rename form { max-width: 520px; }
  .device-rename label { margin-bottom: 8px; }
  .device-rename input { margin-top: 5px; }
  .device-rename .row-actions { justify-content: flex-start; }
  .device-rename-error { color: var(--danger-ink); font-size: 13px; margin-bottom: 8px; }
  #deviceStatus { color: var(--ok); font-size: 13px; }
  #deviceStatus:empty { display: none; }
  @media (min-width: 900px) {
    .device-facts { grid-template-columns: max-content 1fr max-content 1fr; }
  }

  .codebox { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 16px;
    background: var(--bg); border-radius: var(--radius); padding: 20px; }
  .codebox svg { display: block; width: 232px; height: 232px; border-radius: 6px; }
  .code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 34px; font-weight: 700; letter-spacing: 5px; color: var(--ink);
  }
  .countdown { font-size: 13px; color: var(--muted); margin-top: 6px; }
  .warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: 11px 14px; border-radius: 8px; font-size: 14px; }
  .warn.compact { padding: 6px 11px; font-size: 13px; margin-top: 8px; }
  .success { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); padding: 11px 14px; border-radius: 8px; font-size: 14px; }
  .err { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-ink); padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
  .empty { color: var(--faint); padding: 22px 0; text-align: center; }
  .loading { color: var(--faint); padding: 40px 0; text-align: center; }
  .login-card { max-width: 470px; margin: 8vh auto 0; }
  .login-card .code { font-size: 22px; letter-spacing: 3px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .support-action { transition: none; }
    .crt-cursor { animation: none; }
    .crt-flash, .crt-confetti { display: none !important; }
  }
  @media (max-width: 760px) { .table-hint { display: block; } }

  @media (max-width: 860px) {
    button.action, a.action { min-height: 44px; }
    button.action.small, a.action.small { min-height: 44px; min-width: 44px; padding: 10px 12px; }
    .notice-composer-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    /* Match the v2 selector's specificity so its two-column desktop grid
       cannot collapse the controls column on narrow screens. */
    .layout-v2 .notice-composer-card { display: block; }
    .layout-v2 .notice-composer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "controls";
      gap: 4px;
    }
    /* The desktop area names would otherwise conjure an implicit second
       column here and squeeze the controls into a sliver. */
    .layout-v2 .notice-composer-head, .layout-v2 .notice-preview { grid-area: auto; }
    .notice-preview { display: none; }
    .editor-tools .preview-mobile { display: inline-block; }
    .notice-composer-head { display: block; }
    .notice-support { margin-top: 12px; min-height: 44px; padding: 6px 10px; }
    .notice-support .support-icon { width: 28px; height: 28px; flex-basis: 28px; }
    .notice-support .support-copy strong { display: inline; margin-left: 5px; }
    nav { display: none; }
    .mobile-nav { display: block; }
    .notice-action { width: calc(100% - 24px); }
    .mobile-nav select,
    textarea, input[type=text], input[type=search], input[type=email], input[type=date], input[type=time], input[type=datetime-local], select {
      min-height: 44px;
      font-size: 16px;
    }
    .layout-v2 #profileChoices label,
    .layout-v2 #noticeSites label,
    .layout-v2 .notice-controls .checks label,
    .layout-v2 .editor-tools .notice-disclosure > summary,
    .layout-v2 .editor-tools #discardDraft,
    .layout-v2 #noticeOptions select,
    .layout-v2 #noticeOptions input[type="datetime-local"],
    .layout-v2 .notice-actions .action.ghost.small,
    .layout-v2 .notice-actions .action.danger.small,
    .layout-v2 .delivery-detail > summary {
      min-height: 44px;
    }
    /* A phone has no preview column beside the box, so there is nothing to
       match: it opens shorter, tall enough to draft in and short of pushing
       the counters off the screen. */
    .layout-v2 #body { min-height: 150px; }
    #attentionCard > details > summary { min-height: 44px; padding: 10px 0; }
    /* The visual preview is intentionally hidden on phones, but its support
       link must remain reachable after layout v2 moves it into this column. */
    .notice-preview { display: block; position: static; grid-area: auto; min-width: 0; margin-top: 12px; }
    /* Layout v2 splits this column into two grid items; a phone has no second
       column, so it collapses back to one block. The support link moved inside
       .preview-body, so the wrapper has to survive the cull that hides the
       frame and its prose - otherwise the link goes down with them. */
    .layout-v2 .notice-preview { display: block; }
    .layout-v2 .preview-body { grid-area: auto; position: static; }
    .notice-preview > :not(.notice-support):not(.preview-body) { display: none; }
    .preview-body > :not(.notice-support) { display: none; }
    .layout-v2 .notice-preview .notice-support {
      display: flex; width: 100%; min-height: 44px; padding: 8px 10px;
      border: 1px solid var(--line); background: var(--sunken);
    }
  }
  @media (max-width: 520px) {
    main { padding: 0 12px; margin-top: 16px; }
    header { padding: 14px 16px 0; }
    .notice-views { gap: 2px; margin-bottom: 12px; }
    .notice-views button { padding: 8px 5px; font-size: 13px; }
    .notice-action { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 8px; flex-wrap: wrap; }
    .posting-summary { flex-basis: 100%; }
    .notice-action .action { width: 100%; }
    #previewDialog { padding: 14px; }
    .ipad-frame { padding: 8px; border-radius: 12px; }
    .card { padding: 16px; }
    .template-loader { flex-direction: column; }
    .template-loader .action { width: 100%; }
    .header-actions { width: 100%; margin-left: 0; justify-content: space-between; }
    .who { text-align: left; }
    .codebox { padding: 12px; gap: 12px; }
    .codebox > * { max-width: 100%; min-width: 0; }
    .codebox svg { max-width: 100%; height: auto; }
    .code { font-size: 26px; letter-spacing: 3px; overflow-wrap: anywhere; }
    .notice-actions { flex-wrap: wrap; margin-left: 0; }
  }
  @media (max-width: 520px) and (max-height: 700px) {
    /* A fixed two-row posting bar can consume a third of a short phone screen,
       especially while the software keyboard is open. Keep it in document flow
       on short viewports so the editor remains usable. */
    .notice-action { position: static; grid-column: 1; width: 100%; transform: none; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
    body.composing main { padding-bottom: 0; }
    html:has(body.composing) { scroll-padding-bottom: 16px; }
  }
  .template-sync-error { color: var(--danger-ink); }
  .delivery-detail { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; }
  .delivery-detail > summary { cursor: pointer; padding: 11px 0; font-size: 14px; font-weight: 600; }
  .delivery-detail .delivery-filter { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
  .delivery-detail .delivery-filter input { width: 18px; height: 18px; }
  .delivery-devices { margin: 8px 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
  .delivery-device { padding: 12px; background: var(--bg); border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; }
  .delivery-device-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
  .delivery-device p { margin: 4px 0 0; color: var(--muted); }
  .delivery-badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 5px; background: var(--neutral-bg); color: var(--neutral-ink); }
  .delivery-badge.reported { background: var(--ok-bg); color: var(--ok); }
  .delivery-badge.pending { background: var(--warn-tag); color: var(--warn-ink); }
  .delivery-note { font-size: 13px; color: var(--muted); margin: 6px 0 12px; }

  /* Records and device health: keep status and actions together on smaller screens. */
  .record-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 14px; margin: 14px 0; }
  .record-filters .field { margin: 0; min-width: 0; }
  .record-filters label { font-size: 13px; }
  .record-filter-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .record-filter-actions label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
  .record-filter-actions input[type="checkbox"] { width: 18px; height: 18px; }
  .record-summary { color: var(--muted); font-size: 13px; margin: 10px 0 16px; }
  /* Counter health reads as a sentence first; a tile appears only for a
     count that needs attention, so a row of zeros never leads the card. */
  .health-headline { margin: 12px 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; }
  .health-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 240px)); gap: 12px; margin: 14px 0; }
  .health-summary:empty { display: none; }
  .health-summary > div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--bg); }
  .health-summary strong { display: block; font-size: 24px; line-height: 1.2; }
  .health-summary span { display: block; font-size: 13px; margin-top: 5px; }
  .health-summary .health-unknown { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
  .health-summary .health-issues { border-color: var(--warn-line-strong); }
  #attentionItems > ul { padding-left: 22px; }
  #attentionItems li + li { margin-top: 8px; }
  #deviceHealthChecked { margin-bottom: 12px; }
  #history .history-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  @media (max-width: 860px) {
    #history .table-scroll, #sites.table-scroll, #operators.table-scroll, .device-site-table, #audit.activity-scroll { overflow: visible; max-height: none; }
    .records-table, .table-scroll .records-table, .device-site .records-table { display: block; width: 100%; min-width: 0; }
    .records-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .records-table tbody { display: block; width: 100%; }
    .records-table tr:not([hidden]) { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0 0 12px; }
    .records-table td { display: block; width: 100%; max-width: none; border: 0; padding: 7px 0; white-space: normal; overflow-wrap: anywhere; }
    .records-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
    .device-site .records-table td:first-child { width: 100%; }
    .records-table .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    #sites table { min-width: 0; }
    #sites .counter-cell, #sites .manager-cell { min-width: 0; padding-right: 0; }
    #sites .manager .name { white-space: normal; }
    .records-table .row-actions { justify-content: flex-start; min-width: 0; gap: 8px; }
    .records-table .action.small, .record-filter-actions .action.small, #attentionCard .action.small, .device-toolbar .action.small,
    .notice-actions .action.small, .delivery-detail .action.small, .editor-tools .action.small, .template-loader .action.small { min-height: 44px; min-width: 44px; padding: 10px 12px; }
    .records-table .action.danger { background: transparent; }
    .records-table tr.device-detail, .records-table tr.device-rename { background: var(--bg); }
    .device-facts { grid-template-columns: minmax(95px, .4fr) minmax(0, 1fr); gap: 8px 12px; }
    .device-facts dd { overflow-wrap: anywhere; }
    .device-site-table { padding: 12px; }
    .health-summary { gap: 8px; }
    .health-summary > div { padding: 10px; }
  }
  @media (max-width: 380px) { .health-summary { grid-template-columns: 1fr; } .health-summary strong { font-size: 24px; } }

  /* Phone posting: the message leads, optional tools disclose, and one
     compact action opens an explicit review before any notice is sent. */
  .mobile-review-action, .mobile-counter-summary, .colour-toggle { display: none; }
  .notice-action .mobile-review-action { display: none; }
  ::placeholder { color: var(--muted); opacity: 1; }
  .checks label:has(input:focus-visible) { outline: 3px solid var(--budget); outline-offset: 3px; }
  #previewDialog { background: var(--card); }
  #previewDialog .preview-body { display: block; position: static; }
  #previewDialog .preview-body > .pv-look { display: flex; }
  #previewDialog .preview-body > .ipad-frame,
  #previewDialog .preview-body > .hint { display: block; }
  #reviewDialog { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
  #reviewDialog::backdrop { background: rgba(16,24,32,.64); }
  .review-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
  .review-head h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
  .review-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: .75rem; }
  .review-head .action { min-height: 44px; font-size: .875rem; flex-shrink: 0; }
  #reviewIntro { color: var(--muted); font-size: .9375rem; }
  .review-message { margin: 20px 0; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); padding: 14px 16px; font: 1.25rem/1.5 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
  /* The counter screen inside the review: the moment of commitment shows the
     picture, with the counter switcher above it when several are ticked. */
  .review-screen:empty { display: none; }
  .review-screen { margin: 0 0 16px; }
  .review-screen .ipad-frame { max-width: none; padding: 10px 12px; border-radius: 16px; }
  .pv-counter-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
  .pv-counter-pick label { margin: 0; font-weight: 600; color: var(--ink); }
  .pv-counter-pick select { width: auto; min-width: 0; max-width: 100%; padding: 6px 28px 6px 10px; font-size: 14px; }
  #previewDialog .preview-body > .pv-counter-pick { display: flex; }
  .review-facts { margin: 0; }
  .review-facts > div { padding: 12px 0; border-top: 1px solid var(--line); }
  .review-facts dt { font-size: .8125rem; color: var(--muted); }
  .review-facts dd { margin: 3px 0 0; font-size: 1rem; overflow-wrap: anywhere; }
  .review-privacy { font-size: .8125rem; color: var(--muted); }
  .review-privacy summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
  .review-actions { padding-top: 8px; }
  .review-actions .action { width: 100%; min-height: 48px; font-size: 1rem; }
  #reviewDialog .preflight-counter { flex-direction: column; gap: 4px; }
  #reviewDialog .preflight { font-size: .875rem; }
  #reviewDialog .countdown { font-size: .8125rem; }

  @media (max-width: 860px) {
    body { font-size: 1rem; }
    header { padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
    h1 { font-size: 1.25rem; letter-spacing: .08em; }
    .masthead-sub { display: none; }
    .masthead { display: flex; flex-wrap: wrap; gap: 10px; }
    .header-actions { width: auto; min-width: 0; flex: 1 1 9rem; margin-left: 0; }
    .who { text-align: right; max-width: 100%; overflow-wrap: anywhere; font-size: .75rem; }
    .who strong { font-size: .8125rem; }
    .who .badge { font-size: .6875rem; } /* 11px: the phone minimum, never below. */
    .mobile-nav { margin: 10px 0 12px; }
    .mobile-nav select { font-size: 1rem; }
    .mobile-nav > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .notice-views { flex-wrap: wrap; }
    .notice-views button { flex: 1 1 5.5rem; font-size: .875rem; padding: 8px 4px; overflow-wrap: anywhere; }
    .view-count { font-size: .75rem; }
    .card h2 { font-size: 1.125rem; }
    .card p.hint, .countdown, .selection-summary, label, .layout-v2 .editor-tools #draftStatus { font-size: .875rem; }
    .layout-v2 #body { font: 1.125rem/1.5 var(--serif); min-height: 160px; }
    .layout-v2 .notice-controls > [data-step] { grid-template-columns: minmax(0, 1fr); }
    .layout-v2 .notice-controls > [data-step] > * { grid-column: 1; }
    .layout-v2 .notice-controls > [data-step]::before { grid-row: auto; font-size: .8125rem; padding: 0; margin-bottom: 8px; }
    .layout-v2 .notice-controls > [data-step]::after { display: none; }
    .layout-v2 #profileChoices, .layout-v2 #accentChoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: 8px; }
    .layout-v2 #profileChoices label, .layout-v2 #accentChoices label { min-width: 0; min-height: 44px; font-size: .875rem; padding: 9px 10px; }
    .layout-v2 #profileChoices label::before, .layout-v2 #accentChoices label::before { flex: none; }
    .colour-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--budget); font: inherit; font-size: .875rem; text-align: left; cursor: pointer; }
    .colour-toggle::after { content: '+'; font-size: 1.125rem; }
    .colour-toggle[aria-expanded="true"]::after { content: '−'; }
    .layout-v2 #accentChoices { display: none; }
    .layout-v2 .accent-row.colour-open #accentChoices { display: grid; }
    .layout-v2 .editor-tools { gap: 8px; }
    .layout-v2 .editor-tools .notice-disclosure > summary, .layout-v2 .editor-tools #discardDraft, .editor-tools .action.small { min-height: 44px; font-size: .875rem; padding: 10px; }
    .editor-tools .emoji-more { display: none; }
    .layout-v2 #noticeSites { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
    .layout-v2 #noticeSites label { min-height: 48px; padding: 10px 12px; font-size: 1rem; }
    /* Every chip row, not only the composer's: the Status band's counters and
       the Managers form use the same .checks chips. The guided type and accent
       chips set their own height, so they are named here to win it back. */
    .checks label { min-height: 44px; }
    .layout-v2 #noticeSites label input { width: 18px; height: 18px; }
    .layout-v2 #noticeSiteSearch,
    .layout-v2 #noticeOptions select, .layout-v2 #noticeOptions input[type="datetime-local"],
    input[type="email"], input[type="text"], input[type="search"], select { font-size: 1rem; min-height: 48px; max-width: 100%; }
    .layout-v2 #noticeOptions > .row, .layout-v2 #noticeOptions > .field, .layout-v2 #noticeOptions .field { display: block; }
    .layout-v2 #noticeOptions label { display: block; margin: 12px 0 6px; font-size: .875rem; }
    .layout-v2 #noticeOptions #sendTiming, .layout-v2 #noticeOptions #expiryMode, .layout-v2 #noticeOptions #expiry,
    .layout-v2 #noticeOptions input[type="datetime-local"] { width: 100%; }
    .layout-v2 #noticeOptions label[for="expiry"] { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
    .layout-v2 #noticeOptions .assurance-choice { display: flex; }
    .layout-v2 #noticeOptions .countdown { margin-top: 6px; }
    .preflight-counter { flex-direction: column; gap: 4px; }
    .preflight { font-size: .875rem; }
    .layout-v2 .bell-choice { min-height: 44px; font-size: .9375rem; }
    .layout-v2 .attach-empty strong, .layout-v2 .attach-hint { font-size: .875rem; }
    .layout-v2 .notice-preview .support-copy, .layout-v2 .notice-preview .support-copy strong { font-size: .8125rem; }
    .notice-action { width: 100%; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); gap: 10px; border-radius: 0; flex-wrap: nowrap; }
    .notice-action .posting-summary { flex: 1 1 auto; font-size: .8125rem; }
    #postingCounterSummary { display: none; }
    .mobile-counter-summary { display: block; }
    .notice-action #postingTiming, .notice-action #postingCounterDetails, .notice-action .privacy-note, .notice-action #publish { display: none; }
    .notice-action .mobile-review-action { display: block; width: auto; max-width: 55%; min-height: 48px; font-size: 1rem; }
    #reviewDialog { padding: 20px 16px max(20px, env(safe-area-inset-bottom)); }
    .review-head { flex-wrap: wrap; gap: 12px; }
    #previewDialog .preview-dialog-head { flex-wrap: wrap; }
    #previewDialog .preview-dialog-head h2 { font-size: 1.125rem; }
    #previewDialog .preview-readable .body { font-size: 1.125rem; }
    body.keyboard-open .notice-action { position: static; transform: none; margin-top: 16px; box-shadow: none; border: 1px solid var(--line); border-radius: 10px; }
    body.keyboard-open.composing main { padding-bottom: 0; }
  }
  @media (max-width: 860px) and (max-height: 700px) {
    .notice-action { position: static; width: 100%; transform: none; margin-top: 16px; box-shadow: none; border: 1px solid var(--line); border-radius: 10px; }
    body.composing main { padding-bottom: 0; }
    html:has(body.composing) { scroll-padding-bottom: 16px; }
  }
  /* Dark theme: chosen in the header, or the system's when Auto. */
  :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1117; --card: #161c24; --sunken: #0b1117; --hover: #1d2530; --tint: #1b2b44; --selected: #2b3747; --chip-off: #233042;
    --line-strong: #6b7c90;
    --warn-bg: #332b1b; --warn-tag: #332b1b; --warn-line: #927b50; --warn-line-strong: #c9a85a; --warn-ink: #ffdb95;
    --ok-bg: #19382a; --ok-line: #416e50;
    --danger-bg: #40212b; --danger-line: #905563; --danger-hover: #40212b; --danger-ink: #ffb5c2;
    --neutral-bg: #344256; --neutral-ink: #dae6f4;
    --orange-bg: #3d2617; --orange-ink: #ffb894;
    --action: #bd1737; --action-hover: #a3122f; --action-disabled: #425367; --on-disabled: #edf2f7; --ink: #edf2f7; --muted: #b1c0d1; --faint: #b1c0d1; --line: #425367; --budget: #8bbaff; --avis: #ff7891; --ok: #7bdaa2; }
  :where(:root[data-theme="dark"]) .look-tile:hover { box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .8); }
  :where(:root[data-theme="dark"]) .look-tile:has(input:checked) { box-shadow: 0 0 0 1px var(--ink), 0 14px 28px -18px rgba(0, 0, 0, .9); }
  @media (prefers-contrast: more) {
    :root { --line: #728094; }
    button:focus-visible, a:focus-visible, summary:focus-visible, .checks label:has(input:focus-visible) { outline-width: 3px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .crt-ghost, .crt-raster { display: none; }
    .crt-page.crt-bloom { animation: none; }
  }

  /* Simplified portal: visible task navigation and a single notice form. */
  body.layout-simple #nav { display: flex; flex-wrap: wrap; align-items: start; gap: 4px; overflow: visible; }
  body.layout-simple #mobileNav { display: none; }
  #managementNav { border: 0; padding: 0; margin: 0; }
  #managementNav > summary { padding: 14px 18px; min-height: 44px; cursor: pointer; }
  #managementNav.selected > summary { font-weight: 700; color: var(--budget); }
  .management-items { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 4px; }
  body.layout-simple #nav button { margin: 0; border-left: 0; padding: 12px 14px; min-height: 44px; }
  body.layout-simple .notice-controls { display: flex; flex-direction: column; gap: 24px; }
  body.layout-simple .notice-controls > [data-step] { order: 0; display: block; border: 0; margin: 0; padding: 0; }
  body.layout-simple .notice-controls [data-step]::before, body.layout-simple .notice-controls [data-step]::after { content: none; }
  body.layout-simple .notice-controls label.step-title { position: static; width: auto; height: auto; clip: auto; }
  body.layout-simple #noticeSites { max-height: 180px; overflow-y: auto; }
  body.layout-simple #body { min-height: 160px; font: inherit; font-size: 18px; line-height: 1.5; }
  body.layout-simple .type-row #profileLabel { position: static; width: auto; height: auto; clip: auto; }
  body.layout-simple #profileChoices label { min-height: 44px; padding: 9px 12px; font-size: 14px; }
  body.layout-simple #noticeOptions { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--line); }
  body.layout-simple .simple-options { border: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .simple-options > summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: 600; }
  .simple-options > summary .hint { display: block; font-weight: 400; margin: 4px 0; }
  .simple-options > .field { margin-top: 20px; }
  body.layout-simple #accentChoices { display: flex; flex-wrap: wrap; }
  body.layout-simple #colourToggle { display: none; }
  body.layout-simple .simple-options label { position: static; width: auto; height: auto; clip: auto; }
  body.layout-simple .notice-views button { min-width: 0; }
  .add-disclosure > summary { cursor: pointer; min-height: 44px; font-weight: 600; }
  .add-disclosure > .card { border: 0; padding: 16px 0 0; margin: 0; box-shadow: none; }
  body.layout-simple .notice-preview { opacity: 1; }
  body.layout-simple .preview-body { position: static; align-self: start; }
  @media (max-width: 760px) {
    body.layout-simple #nav { padding: 0 12px; }
    #managementNav > summary { padding: 12px; }
    #managementNav[open] { flex: 1 1 100%; }
    body.layout-simple .notice-views { display: flex; flex-wrap: wrap; }
    body.layout-simple .notice-views button { flex: 1 1 auto; padding: 10px 8px; }
    body.layout-simple .notice-controls { gap: 20px; }
    body.layout-simple #noticeSites { max-height: 200px; overflow-y: auto; }
    body.layout-simple .simple-options input, body.layout-simple .simple-options select { font-size: 16px; }
  }


  /* Message first, then the three live layout choices, then delivery controls. */
  body.layout-message-first main { max-width: 1280px; }
  body.layout-message-first .notice-composer-card { display: block; }
  body.layout-message-first .notice-composer-grid { display: block; }
  body.layout-message-first .notice-composer-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.layout-message-first .notice-controls { gap: 24px; }
  body.layout-message-first .notice-controls > .field[data-step="Message"] { padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; }
  body.layout-message-first .notice-controls [data-step] > label.step-title { white-space: normal; overflow: visible; position: static; width: auto; height: auto; clip: auto; }
  body.layout-message-first label[for="body"] { white-space: normal; font-size: 21px; font-weight: 650; margin-bottom: 12px; }
  body.layout-message-first #body { border: 0; border-radius: 0; min-height: 110px; padding: 0; font-size: 21px; line-height: 1.5; }
  body.layout-message-first #body:focus { outline: 0; box-shadow: none; }
  body.layout-message-first .notice-controls > .field[data-step="Message"]:focus-within { outline: 2px solid var(--budget); outline-offset: 2px; }
  .notice-type-control { display: flex; align-items: center; gap: 8px; }
  body.layout-message-first .notice-type-control label { margin: 0; font-size: 13px; color: var(--muted); font-weight: 500; }
  .notice-type-control select { width: auto; min-height: 44px; font-size: 14px; padding: 7px 28px 7px 10px; }
  body.layout-message-first #lookField { margin: 0; }
  body.layout-message-first #lookLabel { font-size: 19px; font-weight: 650; margin-bottom: 14px; }
  body.layout-message-first #lookChoices { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  body.layout-message-first .look-tile { padding: 14px; gap: 12px; }
  body.layout-message-first .look-tile:hover { transform: none; }
  body.layout-message-first .look-tile::before, body.layout-message-first .look-tile::after { content: none; }
  body.layout-message-first .look-tile:has(input:checked) { border-color: var(--budget); box-shadow: 0 0 0 1px var(--budget); }
  .layout-choice-heading { display: flex; align-items: center; gap: 10px; min-height: 30px; }
  body.layout-message-first .look-tile input { position: static; opacity: 1; pointer-events: auto; width: 18px; height: 18px; margin: 0; accent-color: var(--budget); }
  body.layout-message-first .look-name { padding: 0; margin: 0; font-size: 16px; color: var(--ink); font-weight: 600; }
  .layout-selected { margin-left: auto; visibility: hidden; color: var(--budget); font-size: 12px; font-weight: 600; }
  .look-tile:has(input:checked) .layout-selected { visibility: visible; }
  .layout-sample { display: block; width: 100%; min-width: 0; overflow: hidden; pointer-events: none; }
  body.layout-message-first .layout-sample .ipad-frame { display: block; width: 100%; max-width: none; padding: 7px; border-radius: 13px; box-shadow: none; }
  .layout-sample-caption { color: var(--muted); font-size: 13px; line-height: 1.4; }
  .layout-sample-help { margin: 14px 0 0; font-size: 13px; }
  .layout-sample-render-host { position: fixed; left: -20000px; top: 0; width: 1180px; height: 820px; visibility: hidden; pointer-events: none; }
  .layout-sample-render-host .ipad-frame { display: block !important; width: 1180px; max-width: none; padding: 0; }
  .full-counter-preview { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
  .full-counter-preview > summary { min-height: 44px; cursor: pointer; font-weight: 600; padding: 10px 0; }
  .full-counter-preview > summary .hint { font-weight: 400; margin-left: 10px; }
  body.layout-message-first .full-counter-preview .notice-preview { display: block; position: static; margin-top: 16px; }
  body.layout-message-first .full-counter-preview .preview-body { display: block; }
  body.layout-message-first .full-counter-preview .ipad-frame { display: block; max-width: 720px; }
  body.layout-message-first .notice-action { position: static; width: 100%; margin: 24px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 20px 0 0; }
  body.layout-message-first.composing main { padding-bottom: 0; }
  @media (max-width: 850px) {
    body.layout-message-first #lookChoices { grid-template-columns: 1fr; }
    body.layout-message-first .look-tile { width: 100%; max-width: 540px; margin-inline: auto; }
    .notice-type-control { flex-basis: 100%; }
    .notice-type-control select { font-size: 16px; }
    body.layout-message-first #body { font-size: 18px; min-height: 130px; }
    body.layout-message-first label[for="body"] { font-size: 19px; }
    body.layout-message-first .notice-controls > .field[data-step="Message"] { padding: 16px; }
    .full-counter-preview > summary .hint { display: block; margin: 4px 0; }
    .layout-selected { margin-left: auto; }
  }


  /* Bulletin: the same 1180 x 820 logical canvas as BulletinBoardView. */
  .mini-bulletin { background: #F7F5F0; border-top: 3px solid #0A4FA3; }
  .mini-bulletin i { left: 12%; right: 12%; height: 9%; background: #182027; }
  .mini-bulletin i:nth-child(1) { top: 30%; }
  .mini-bulletin i:nth-child(2) { top: 46%; }
  .mini-bulletin i:nth-child(3) { top: 62%; right: 35%; }
  .pv-look-pill[data-look="bulletin"]::before { background: #F7F5F0; border-left: 3px solid #0A4FA3; }
  .bu-stage { --bu-field: #F7F5F0; --bu-ink: #182027; --bu-muted: #606773; --bu-accent: #0A4FA3;
    background: var(--bu-field); color: var(--bu-ink); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
  .bu-stage.bu-dark { --bu-field: #182027; --bu-ink: #F7F5F0; --bu-muted: #B9C1CA; --bu-accent: #4D9BFF; }
  .bu-content { display: flex; flex: 1; min-height: 0; flex-direction: column; border-top: 6px solid var(--bu-accent); }
  .bu-top { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 30px; padding: 22px 18px; border-bottom: 1px solid #88909955; }
  .bu-wordmark { font-size: 24px; font-weight: 700; }
  .bu-wordmark span { font-size: 22px; font-weight: 400; color: var(--bu-muted); margin-left: 18px; }
  .bu-site { font-size: 31px; font-weight: 500; margin-top: 16px; line-height: 1.2; }
  .bu-clock { font-size: 58px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; text-align: right; }
  .bu-day { font-size: 16px; color: var(--bu-muted); text-align: right; margin-top: 5px; }
  .bu-main { flex: 1; min-height: 0; padding: 32px 48px 24px; display: flex; gap: 36px; }
  .bu-rule { width: 10px; flex: 0 0 10px; background: var(--bu-accent); }
  .bu-message { flex: 1; min-width: 0; }
  .bu-label { height: 26px; display: flex; gap: 18px; align-items: center; color: var(--bu-muted); font-size: 17px; font-weight: 600; letter-spacing: 1.5px; }
  .bu-tag { font-size: 13px; letter-spacing: 1px; padding: 4px 8px; border: 1px solid currentColor; border-radius: 4px; }
  .bu-tag.priority { color: #FFF; background: #D40029; border-color: #D40029; }
  .bu-tag.advisory { color: #7A4600; background: #FFF1D6; border-color: #B26A00; }
  .bu-dark .bu-tag.advisory { color: #FFCF70; background: #47330B; border-color: #FFCF70; }
  .bu-body, .bu-measure { width: 1000px; height: 320px; margin-top: 22px; font-weight: 700; line-height: 1.24; white-space: pre-wrap; overflow-wrap: anywhere; }
  .bu-measure { position: absolute; height: auto; visibility: hidden; pointer-events: none; margin: 0; }
  .bu-attachment { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; margin-top: 22px; font-size: 16px; color: var(--bu-ink); border: 1px solid #88909988; border-radius: 10px; }
  .bu-attachment small { color: var(--bu-muted); }
  .bu-footer { margin: 0 30px; padding: 18px; border-top: 1px solid #88909955; color: var(--bu-muted); font-size: 16px; }
  .bu-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .bu-band { font: 14px "IBM Plex Mono", monospace; letter-spacing: 2px; color: var(--bu-ink); height: 31px; padding-bottom: 12px; overflow: hidden; white-space: nowrap; }
  .bu-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #0E8C64; }
  .bu-empty { font-size: 76px; font-weight: 700; padding: 48px; flex: 1; }


  /* --- High-end face, 27 Oct 2026 --------------------------------------------
     The console as a precision tool. One sans typeface throughout; a white
     masthead with the three-bar ABG rule as a mark beside the wordmark and
     the sections on the same line; segmented tabs; the composer as a white
     sheet of quiet sections with a posting rail beside it that carries the
     summary, the Avis-red button and the help line; bordered buttons where
     the earlier faces used text. It takes the brand's own cues from
     avis.co.nz: the red (#D4002A) for the one action that matters, white
     sheets on a grey ground, and labels set bold and small.

     This block is a layer over the rules above, as the luxury face it
     replaces was: it retokens the page and restyles the chrome, and leaves
     every counter preview, board and behaviour rule exactly as it was.
     Delete this block and the earlier face returns. */
  :root {
    --ink: #0B0C10; --muted: #5B5E6B; --faint: #5B5E6B;
    --line: #E4E4E8; --line-strong: #CFCFD6;
    --bg: #F4F4F6; --card: #FFFFFF; --sunken: #F7F7F9; --hover: #F0F0F3; --tint: #EEF3FB; --selected: #F0F0F3; --chip-off: #E9E9EC;
    --avis: #D4002A; --budget: #0A4FA3;
    --action: #D4002A; --on-action: #FFFFFF; --action-hover: #B50024; --action-disabled: #9A9DA8; --on-disabled: #FFFFFF;
    --neutral-bg: #EDEDF0; --neutral-ink: #4A4D58;
    --radius: 12px;
    /* Flat: sheets carry a hairline and no shadow; a raised segment is a
       hairline ring. */
    --shadow-card: none;
    --shadow-raised: 0 0 0 1px var(--line-strong);
  }
  :root[data-theme="dark"] {
    --bg: #0E0F12; --card: #15171B; --sunken: #0E0F12; --hover: #1E2128; --tint: #1B2740; --selected: #23262D; --chip-off: #23262D;
    --line: #2A2D34; --line-strong: #4A4E58;
    --ink: #F2F2F4; --muted: #A7AAB5; --faint: #A7AAB5;
    --action: #E11A42; --on-action: #FFFFFF; --action-hover: #C7123A; --action-disabled: #3A3E46; --on-disabled: #B7BAC4;
    --neutral-bg: #2A2D34; --neutral-ink: #D6D8DE;
    --avis: #FF7891; --budget: #8BBAFF;
    --shadow-card: none;
    --shadow-raised: 0 0 0 1px var(--line-strong);
  }
  body { font-variant-numeric: tabular-nums; }
  ::placeholder { color: var(--muted); opacity: .7; }

  /* Masthead: one 60px line. The wordmark with the rule as its mark, the
     sections beside it, the person and the theme switch at the right. */
  header { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 20px; min-height: 60px; padding: 0 32px; background: var(--card); border-bottom: 1px solid var(--line); }
  .masthead { display: contents; }
  .masthead > div:first-child { display: flex; align-items: center; gap: 12px; min-height: 60px; }
  h1 { font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1; text-transform: none; color: var(--ink); }
  .rule { order: -1; flex-direction: column; gap: 2px; width: 22px; height: 16px; margin: 0; }
  .rule i { border-radius: 1px; }
  .masthead-sub { margin: 0; padding-left: 12px; border-left: 1px solid var(--line); font-size: 13px; line-height: 1; color: var(--muted); }
  nav, body.layout-simple #nav { order: 1; margin: 0; padding: 0; gap: 2px; align-items: stretch; }
  nav button, body.layout-simple #nav button { min-height: 60px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--muted); box-shadow: inset 0 -2px 0 transparent; }
  nav button:hover { color: var(--ink); background: transparent; }
  nav button[aria-selected="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
  .layout-v2 #nav-screens, .layout-v2 #nav-managers, .layout-v2 #nav-records { margin-left: 0; padding-left: 0; border-left: 0; }
  #managementNav { display: flex; flex-wrap: wrap; align-items: stretch; }
  #managementNav > summary { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--muted); list-style: none; box-shadow: inset 0 -2px 0 transparent; }
  #managementNav > summary::-webkit-details-marker { display: none; }
  #managementNav > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s ease; }
  #managementNav[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
  #managementNav > summary:hover { color: var(--ink); }
  #managementNav.selected > summary { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
  .management-items { border: 0; border-radius: 0; background: transparent; padding: 0; gap: 2px; }
  .header-actions { order: 2; align-self: center; margin-left: auto; gap: 14px; }
  .mobile-nav { order: 3; }
  .who { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; line-height: 1.3; color: var(--muted); }
  .who strong { font-size: 13px; font-weight: 600; }
  header .badge { font-size: 10px; letter-spacing: .08em; padding: 2px 7px; border-radius: 4px; }
  .theme-switch { gap: 0; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--chip-off); }
  .theme-switch label { width: 32px; height: 28px; padding: 0; justify-content: center; border-radius: 6px; color: var(--muted); }
  .theme-switch label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-switch label:hover { color: var(--ink); }
  .theme-switch label:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: var(--shadow-raised); }
  .theme-switch svg { width: 15px; height: 15px; }
  .theme-cycle { width: 40px; height: 36px; border-color: var(--line); border-radius: 8px; background: var(--chip-off); color: var(--ink); }
  .theme-cycle:hover { background: var(--hover); }
  .mobile-nav select { border-radius: 8px; }

  /* Page and cards: a grey ground, white sheets with a hairline and a long
     soft shadow. */
  main { max-width: 1200px; margin: 28px auto 72px; padding: 0 32px; }
  .card { border-radius: 14px; padding: 28px 32px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
  .card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
  .card p.hint { font-size: 14px; }
  label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  textarea, input[type=text], input[type=search], input[type=email], input[type=date], input[type=time], input[type=datetime-local], select {
    min-height: 38px; padding: 8px 12px; border-color: var(--line-strong); border-radius: 9px;
  }
  button.action, a.action { border: 1px solid transparent; border-radius: 9px; padding: 11px 18px; font-weight: 600; letter-spacing: 0; background: var(--action); color: var(--on-action); }
  button.action:hover, a.action:hover { background: var(--action-hover); }
  button.action:disabled { background: var(--action-disabled); color: var(--on-disabled); border-color: transparent; }
  button.ghost, a.ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
  button.ghost:hover, a.ghost:hover { background: var(--hover); }
  button.action.ghost:disabled { background: transparent; color: var(--faint); border-color: var(--line); }
  button.danger { background: var(--card); color: var(--danger-ink); border-color: var(--danger-line); }
  button.danger:hover { background: var(--danger-hover); }
  button.small, a.small { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
  .tag { border-radius: 4px; background: var(--chip-off); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; }
  .preflight { border-radius: 10px; background: var(--sunken); }
  .delivery-detail, .notice-disclosure, .warn, .success, .err, .delivery-device { border-radius: 10px; }
  th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 16px 10px 0; }
  td { padding: 12px 16px 12px 0; }
  #sites .manager .initials { background: var(--selected); color: var(--ink); }

  /* Notice views as a segmented control: a grey track, the chosen view
     raised in white, counts as small pills. */
  .notice-views { display: inline-flex; gap: 2px; margin-bottom: 20px; padding: 3px; border: 0; border-radius: 10px; background: var(--chip-off); }
  .notice-views button { flex: 0 0 auto; min-height: 34px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
  .notice-views button:hover { color: var(--ink); }
  .notice-views button[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raised); }
  .view-count { min-width: 0; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.4; }
  .notice-views button[aria-selected="true"] .view-count { background: var(--ink); color: var(--card); }

  /* The composer: a white sheet of sections divided by hairlines, with the
     posting rail beside it and the full preview beneath. */
  body.layout-message-first main { max-width: 1200px; }
  body.layout-message-first .notice-composer-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.layout-message-first .notice-composer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "controls rail" "preview rail"; gap: 20px 24px; align-items: start; }
  body.layout-message-first .notice-controls { grid-area: controls; gap: 0; padding: 28px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); }
  body.layout-message-first .notice-controls > * + *, body.layout-message-first .notice-controls > * + [data-step] { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
  body.layout-message-first .notice-controls > .field { margin-bottom: 0; }
  body.layout-message-first .notice-controls > .field[data-step="Message"] { padding: 0; border: 0; border-radius: 0; }
  body.layout-message-first .notice-controls > .field[data-step="Message"]:focus-within { outline: 0; }
  body.layout-message-first .notice-controls label.step-title, body.layout-message-first #lookLabel, body.layout-message-first label[for="body"] {
    margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink);
  }
  body.layout-simple #body, body.layout-message-first #body { min-height: 96px; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
  body.layout-message-first #body:focus { outline: 0; box-shadow: none; border-bottom-color: var(--ink); }
  .layout-v2 .editor-tools { margin-top: 12px; gap: 8px; align-items: center; }
  .layout-v2 .editor-tools .notice-disclosure { flex: 0 0 auto; margin: 0; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); }
  .layout-v2 .editor-tools .notice-disclosure[open] { flex-basis: 100%; padding-bottom: 12px; border-radius: 10px; }
  .layout-v2 .editor-tools .notice-disclosure > summary { display: flex; align-items: center; min-height: 32px; margin: -6px -12px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
  .layout-v2 .editor-tools .notice-disclosure[open] > summary { margin-bottom: 6px; }
  .notice-type-control label { font-size: 13px; font-weight: 500; color: var(--muted); }
  .notice-type-control select { min-height: 32px; padding: 5px 28px 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; }
  .layout-v2 .editor-tools #discardDraft { margin-left: auto; background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
  .layout-v2 .editor-tools #discardDraft:hover { color: var(--ink); background: var(--hover); }
  body.layout-message-first #lookChoices { gap: 12px; }
  body.layout-message-first .look-tile { padding: 8px; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  body.layout-message-first .look-tile:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
  body.layout-message-first .look-tile input { accent-color: var(--ink); }
  body.layout-message-first .layout-sample .ipad-frame { padding: 0; border: 0; border-radius: 8px; }
  .layout-choice-heading { padding: 0 4px; }
  body.layout-message-first .look-name { font-size: 13px; font-weight: 600; }
  .layout-selected { padding: 1px 7px; border-radius: 999px; background: var(--chip-off); color: var(--ink); font-size: 11px; font-weight: 600; }
  .layout-sample-caption { padding: 0 4px 2px; font-size: 12px; }
  .layout-sample-help { font-size: 13px; }
  #noticeSiteSearch { margin-bottom: 10px; }
  .checks { gap: 8px; }
  .checks label { min-height: 38px; padding: 8px 14px 8px 12px; border-color: var(--line-strong); border-radius: 9px; font-weight: 500; }
  .checks label:has(input:checked) { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); font-weight: 600; }
  .checks label input { order: -1; accent-color: var(--ink); }
  .checks label.all-counters { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); }
  .checks label.all-counters:has(input:checked) { background: var(--warn-bg); border: 1px solid var(--warn-line-strong); color: var(--warn-ink); }
  /* A brand dot on each counter chip: Avis red, Budget blue, both for a
     dual desk. renderSiteChoices sets data-brand. */
  #noticeSites label[data-brand]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--avis) 50%, var(--budget) 50%); }
  #noticeSites label[data-brand="avis"]::before { background: var(--avis); }
  #noticeSites label[data-brand="budget"]::before { background: var(--budget); }
  .selection-summary { font-size: 13px; }
  body.layout-message-first #noticeOptions > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 0; margin: 0 0 14px; padding: 0; font-size: 15px; font-weight: 600; color: var(--ink); list-style: none; pointer-events: none; }
  body.layout-message-first #noticeOptions > summary::-webkit-details-marker { display: none; }
  body.layout-message-first #noticeOptions > summary .countdown { flex: none; margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
  /* Send and Take it down on one line: applySimpleLayout moves the Send row
     into the removal field, and these rules flatten both into one wrapping
     row of label and control pairs, the removal time on a line of its own. */
  .layout-v2 #noticeOptions > .field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
  .layout-v2 #noticeOptions > .field > .row, .layout-v2 #noticeOptions > .field > .row > .field { display: contents; }
  .layout-v2 #noticeOptions label { margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
  .layout-v2 #noticeOptions select, .layout-v2 #noticeOptions input[type="datetime-local"] { width: auto; min-height: 38px; margin-right: 14px; padding: 6px 32px 6px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card); font-size: 14px; font-weight: 500; }
  .layout-v2 #noticeOptions select:focus, .layout-v2 #noticeOptions input[type="datetime-local"]:focus { border-color: transparent; }
  .layout-v2 #noticeOptions .countdown { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
  .simple-options > summary { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--ink); list-style: none; }
  .simple-options > summary::-webkit-details-marker { display: none; }
  .simple-options > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s ease; }
  .simple-options[open] > summary::before { transform: rotate(45deg); }
  .simple-options > summary .hint { display: inline; margin: 0; font-weight: 400; color: var(--muted); }
  .simple-options > .field { margin-top: 18px; }
  .full-counter-preview > summary { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 0; font-size: 15px; font-weight: 600; list-style: none; }
  .full-counter-preview > summary::-webkit-details-marker { display: none; }
  .full-counter-preview > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 0 1px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s ease; }
  .full-counter-preview[open] > summary::before { transform: rotate(45deg); }
  .full-counter-preview > summary .hint { margin: 0; font-weight: 400; }
  body.layout-message-first .full-counter-preview { grid-area: preview; margin: 0; padding: 20px 32px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }

  /* The posting rail: what will happen, the rule of the road, the button
     and the help line. */
  body.layout-message-first .notice-action { grid-area: rail; position: sticky; top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }
  body.layout-message-first .notice-action::before { content: "Ready to post"; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
  .posting-summary { font-size: 13px; }
  .posting-summary > strong { display: block; padding-bottom: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; }
  .posting-summary #postingTiming, .layout-v2 .posting-summary #postingTiming { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }
  .posting-summary details { margin: 0 0 10px; }
  .layout-v2 .posting-summary .privacy-note { margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1.5; }
  .layout-v2 .privacy-note strong { font-size: 12px; font-weight: 600; color: var(--ink); }
  .layout-v2 .privacy-note p { margin: 4px 0 0; }
  .layout-v2 .privacy-note summary { cursor: pointer; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .notice-action .action { width: 100%; margin-top: 16px; min-height: 46px; font-size: 15px; }
  .notice-action .notice-support { align-self: stretch; width: auto; min-height: 0; margin-top: 16px; padding: 16px 0 0; gap: 12px; align-items: flex-start; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .notice-action .notice-support:hover { transform: none; box-shadow: none; }
  .notice-action .notice-support:hover .support-copy strong { text-decoration: underline; text-underline-offset: 3px; }
  .notice-action .support-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 50%; background: var(--ink); color: var(--card); }
  .notice-action .support-icon svg { width: 14px; height: 14px; }
  .notice-action .support-copy { font-size: 12px; line-height: 1.5; color: var(--muted); }
  .notice-action .support-copy strong { display: block; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); }

  /* Live and scheduled notices: a list of hairline rows, the message in
     heavier type and the actions as real buttons. */
  .refresh-status { justify-content: space-between; margin-bottom: 4px; }
  .refresh-status .hint { font-size: 13px; }
  #liveNotices, #scheduledNotices { margin-top: 8px; border-top: 1px solid var(--line); }
  .notice { margin-bottom: 0; padding: 20px 0; }
  .notice + .notice { padding-top: 20px; }
  .layout-v2 .notice .body { font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.005em; line-height: 1.35; }
  .notice .meta { margin-top: 8px; }
  .notice .meta .tag { margin-right: 6px; }
  .notice .meta .countdown { margin-top: 8px; }
  .notice-actions, .layout-v2 .notice-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
  .layout-v2 .notice-actions .action.ghost.small, .layout-v2 .notice-actions .action.danger.small { min-height: 0; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 500; text-decoration: none; }
  .layout-v2 .notice-actions .action.ghost.small:hover, .layout-v2 .notice-actions .action.danger.small:hover { background: var(--hover); }
  .layout-v2 .notice-actions [data-withdraw], .layout-v2 .notice-actions [data-cancel-scheduled], .layout-v2 .notice-actions .action.danger.small { margin-left: 0; color: var(--danger-ink); border-color: var(--danger-line); text-decoration: none; }
  .layout-v2 .notice-actions [data-withdraw]:hover, .layout-v2 .notice-actions [data-cancel-scheduled]:hover, .layout-v2 .notice-actions .action.danger.small:hover { background: var(--danger-hover); }
  /* The posting confirmation's card is bare until a notice goes up. */
  .post-confirm-wrap { padding: 0; border: 0; background: none; box-shadow: none; }
  .post-confirm-wrap:has(> [hidden]) { margin: 0; }
  .notice-extend, .notice-edit { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); }
  .empty { color: var(--muted); }

  /* Sign in, dialogs. */
  .login-card { max-width: 440px; margin: 10vh auto 0; padding: 36px; }
  .login-card h2 { font-size: 24px; }
  .login-card input[type=email], .login-card input.code { min-height: 46px; font-size: 16px; }
  .login-card input.code { font-size: 22px; letter-spacing: 3px; }
  .login-card .field { margin-bottom: 18px; }
  .login-card #sendLoginCode { width: 100%; min-height: 46px; font-size: 15px; }
  .restricted-access-note { margin-top: 24px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .restricted-access-note strong { font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--muted); }
  .restricted-access-note p { color: var(--muted); font-size: 13px; }
  #reviewDialog, #confirmDialog, #previewDialog { padding: 28px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .45); }
  #reviewDialog::backdrop, #confirmDialog::backdrop, #previewDialog::backdrop { background: rgba(11, 12, 16, .5); }
  .review-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); }
  .review-head h2, #confirmDialog h2, .preview-dialog-head h2 { font-family: inherit; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
  .review-message { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); font-family: inherit; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
  .review-facts > div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
  .review-facts dt { flex: none; color: var(--muted); }
  .review-facts dd { margin: 0; font-weight: 600; text-align: right; }

  /* Management as a settings sheet: a grey sidebar listing the sections,
     the open section beside it on white, each card flattened to a
     hairlined block and each records table to hairline rows. buildNav
     makes the sidebar; select() shows it while a management section is
     open and marks the current section. */
  body.management-open { background: var(--card); }
  body.management-open main { display: grid; grid-template-columns: 272px minmax(0, 1fr); max-width: none; min-height: calc(100vh - 61px); margin: 0; padding: 0; }
  body.management-open #app { min-width: 0; padding: 28px 40px 48px; }
  body.management-open .management-items { display: none; }
  #managementSidebar { display: flex; flex-direction: column; gap: 4px; padding: 28px 16px 24px 24px; background: var(--bg); border-right: 1px solid var(--line); }
  .sidebar-head { padding: 0 12px 20px; }
  .sidebar-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
  .sidebar-head p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
  .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar-nav button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 12px 0 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
  .sidebar-nav button:hover { background: var(--hover); }
  .sidebar-nav button:focus-visible { outline: 2px solid var(--budget); outline-offset: 2px; }
  .sidebar-nav button[aria-current="page"] { padding-left: 12px; background: var(--card); font-weight: 600; box-shadow: var(--shadow-raised); }
  .sidebar-nav button[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--avis); flex: none; }
  .sidebar-help { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 20px 12px 0; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; }
  .sidebar-help:hover { text-decoration: underline; text-underline-offset: 3px; }
  body.management-open .card { padding: 0 0 28px; margin: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  body.management-open #app > section > .card:last-child { border-bottom: 0; margin-bottom: 0; }
  body.management-open .card > h2 { padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: 14px; }
  body.management-open .card > h2 + p.hint { margin-top: -6px; }
  body.management-open .add-disclosure { padding: 0; margin: 0 0 20px; border: 0; }
  body.management-open .add-disclosure > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); font-size: 13px; font-weight: 500; list-style: none; }
  body.management-open .add-disclosure > summary::-webkit-details-marker { display: none; }
  body.management-open .add-disclosure > summary::before { content: "+"; font-size: 16px; line-height: 1; margin-top: -1px; }
  body.management-open .add-disclosure[open] > summary { background: var(--hover); }
  body.management-open .add-disclosure > .card { padding: 20px 0 0; border: 0; margin: 0; }
  body.management-open .enrol-card > summary, body.management-open .band-card > summary { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
  body.management-open .enrol-card > summary .enrol-sub { font-size: 13px; font-weight: 400; letter-spacing: 0; }
  body.management-open table { font-size: 14px; }
  body.management-open th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
  body.management-open td { padding: 14px 16px 14px 0; border-top: 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
  body.management-open .counter-cell .name { font-size: 15px; font-weight: 600; }
  body.management-open .tag.mono { padding: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  body.management-open .tag.live, body.management-open .tag.dead { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  body.management-open .tag.live { color: var(--ok); }
  body.management-open .tag.dead { color: var(--muted); }
  body.management-open .tag.live::before, body.management-open .tag.dead::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  body.management-open .table-scroll { margin-top: 4px; }
  @media (max-width: 1000px) {
    body.management-open main { display: block; min-height: 0; }
    body.management-open #app { padding: 20px 16px 40px; }
    #managementSidebar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
    .sidebar-head { flex: 1 1 100%; padding: 0; }
    .sidebar-head h2 { font-size: 18px; }
    .sidebar-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .sidebar-nav button, .sidebar-nav button[aria-current="page"] { width: auto; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); box-shadow: none; }
    .sidebar-nav button[aria-current="page"] { border-color: var(--ink); box-shadow: inset 0 0 0 .5px var(--ink); }
    .sidebar-help { display: none; }
  }

  @media (max-width: 1000px) {
    body.layout-message-first .notice-composer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "controls" "rail" "preview"; }
    body.layout-message-first .notice-action { position: static; }
  }
  @media (max-width: 860px) {
    header { gap: 0 12px; min-height: 0; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
    .masthead > div:first-child { min-height: 56px; }
    .masthead-sub { display: none; }
    nav, body.layout-simple #nav { order: 3; flex: 1 1 100%; padding: 0; margin: 0 -4px; }
    nav button, body.layout-simple #nav button, #managementNav > summary { min-height: 46px; padding: 0 10px; font-size: 13px; }
    #managementNav[open] { flex: 0 0 auto; }
    body.management-open #managementNav[open] { flex: 0 0 auto; }
    main { margin: 20px auto 64px; padding: 0 16px; }
    .card, body.layout-message-first .notice-controls { padding: 20px 18px; border-radius: 12px; }
    body.layout-message-first .notice-action, body.layout-message-first .full-counter-preview { padding: 18px; border-radius: 12px; }
    body.layout-message-first .notice-controls > * + * { padding-top: 20px; margin-top: 20px; }
    body.layout-simple #body, body.layout-message-first #body { font-size: 20px; }
    .notice-views button { min-height: 36px; }
    .layout-v2 #noticeOptions label { flex: 0 0 100%; margin-top: 4px; }
    .layout-v2 #noticeOptions select, .layout-v2 #noticeOptions input[type="datetime-local"] { flex: 1 1 auto; margin-right: 0; font-size: 16px; }
    .simple-options > summary, .full-counter-preview > summary { flex-wrap: wrap; }
    .simple-options > summary .hint, .full-counter-preview > summary .hint { flex: 0 0 100%; padding-left: 19px; }
    .notice-action .mobile-review-action { width: 100%; max-width: none; }
    .layout-v2 .notice-actions .action.ghost.small, .layout-v2 .notice-actions .action.danger.small { min-height: 44px; }
    .login-card { margin-top: 4vh; padding: 24px 20px; }
    #reviewDialog, #confirmDialog, #previewDialog { padding: 20px; border-radius: 12px; }
  }
  @media (max-width: 520px) {
    .header-actions { flex: 1 1 auto; gap: 10px; }
    .who { gap: 2px 8px; }
    header .badge { white-space: normal; }
  }