/* AKM pages: the admin dashboard's stylesheet, copied verbatim from the approved mockup
   (akm-admin-mockup-v2, version 43). The gallery page uses it unchanged and adds its own rules
   in gallery.html. Edit the mockup first, then copy it here, so the two never drift. */
  /* Layout: a sticky one-line state bar; then the three answers (state, next, last) as one row of
     equal cards; then a thin health row; then controls; then settings; then the three logs.
     Accent (interactive, blue-ink) is separate from the four state colours (ok / held / busy / fault). */
  :root {
    --bg: #eceeef; --panel: #ffffff; --panel-2: #f5f6f7; --fg: #16191c; --muted: #5f666d; --faint: #80868d; --sub-1: #7a5634; --sub-2: #8a9097; --line: #d3d7db; --line-strong: #a9b0b7;
    --accent: #1f4e8c; --accent-fg: #ffffff; --accent-soft: #e2ebf7;
    --ok: #1f7a3a; --ok-soft: #dcefe1; --warn: #9a5b00; --warn-soft: #f8ead0; --crit: #b3261e; --crit-soft: #f8dcda; --warn-solid: #ffc400; --on-warn: #141414; --crit-solid: #d81e1e; --on-crit: #ffffff; --busy: #1f4e8c; --busy-soft: #e2ebf7;
    --gun-off: #dde1e5; --gun-on: #16191c; --gun-on-fg: #ffffff; --focus: #1f4e8c; --fg-2: #4a5057; --band: #f3f4f6; --col-alt: #3a6188;
    --sans: 'Sometype Mono', ui-monospace, Menlo, Consolas, monospace;
    --mono: 'Sometype Mono', ui-monospace, Menlo, Consolas, monospace;
    --r: 6px;
  }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --bg: #121416; --panel: #1b1e21; --panel-2: #212529; --fg: #e9ebed; --muted: #9ba3ab; --faint: #767e86; --sub-1: #c9a27a; --sub-2: #727a82; --line: #30363c; --line-strong: #4a525a;
    --accent: #7aa7e6; --accent-fg: #0e1420; --accent-soft: #1e2a3b;
    --ok: #5fc47a; --ok-soft: #173322; --warn: #e3a83b; --warn-soft: #3a2b10; --crit: #ef6b63; --crit-soft: #3f1d1b; --warn-solid: #ffc400; --on-warn: #141414; --crit-solid: #ff3b30; --on-crit: #ffffff; --busy: #7aa7e6; --busy-soft: #1e2a3b;
    --gun-off: #30363c; --gun-on: #e9ebed; --gun-on-fg: #121416; --focus: #7aa7e6; --fg-2: #b4bac1; --band: #22262a; --col-alt: #9dbad8; color-scheme: dark } }
  :root[data-theme="dark"] {
    --bg: #121416; --panel: #1b1e21; --panel-2: #212529; --fg: #e9ebed; --muted: #9ba3ab; --faint: #767e86; --sub-1: #c9a27a; --sub-2: #727a82; --line: #30363c; --line-strong: #4a525a;
    --accent: #7aa7e6; --accent-fg: #0e1420; --accent-soft: #1e2a3b;
    --ok: #5fc47a; --ok-soft: #173322; --warn: #e3a83b; --warn-soft: #3a2b10; --crit: #ef6b63; --crit-soft: #3f1d1b; --warn-solid: #ffc400; --on-warn: #141414; --crit-solid: #ff3b30; --on-crit: #ffffff; --busy: #7aa7e6; --busy-soft: #1e2a3b;
    --gun-off: #30363c; --gun-on: #e9ebed; --gun-on-fg: #121416; --focus: #7aa7e6; --fg-2: #b4bac1; --band: #22262a; --col-alt: #9dbad8; color-scheme: dark }

  * { box-sizing: border-box; }
  body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.45;
    padding-block: 0 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .num { font-variant-numeric: tabular-nums; }
  .dim { color: var(--muted); }
  h2 { font: 700 12px/1.2 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--fg); margin: 0; }
  h3 { font: 700 15px/1.3 var(--sans); margin: 0; }
  p { margin: 0; }
  a { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* sticky state bar */
  .pinned { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; }
  .bar { background: var(--bg); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); padding-block: 10px; border-bottom: 1px solid var(--line); }
  .bar-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
  .bar h1 { font: 700 17px/1.2 var(--sans); margin: 0; }
  .bar .clock { margin-left: auto; font-size: 13px; color: var(--muted); }
  .bar .next { font-size: 14px; color: var(--fg); }
  .bar .next .mono { font-weight: 700; }
  .state { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid transparent; }
  .state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
  .state.running { color: var(--ok); background: var(--ok-soft); }
  .state.held { color: var(--warn); background: var(--warn-soft); }
  .state.busy { color: var(--busy); background: var(--busy-soft); }
  .state.fault { color: var(--crit); background: var(--crit-soft); }
  @media (prefers-reduced-motion: no-preference) { .state.busy::before { animation: pulse 1s ease-in-out infinite; } }
  @keyframes pulse { 50% { opacity: .3; } }

  /* one spatial value: 24px between every tile and every section; grouping is carried by borders and headers, not by whitespace */
  .wrap { max-width: 1200px; margin: 0 auto; display: grid; gap: 24px; padding-top: 24px; }
  .wrap > .health { margin-top: 0; }
  .notice { font-size: 13px; color: var(--muted); border-left: 3px solid var(--line-strong); padding-left: 10px; }

  /* the three answers */
  .now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  @media (max-width: 820px) { .now { grid-template-columns: 1fr; } }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px 24px; min-width: 0; display: grid; gap: 12px; align-content: start; border-top: 4px solid var(--line-strong); }
  .card.st-running { border-top-color: var(--ok); } .card.st-held { border-top-color: var(--warn); } .card.st-busy { border-top-color: var(--busy); } .card.st-fault { border-top-color: var(--crit); }
  .card h2 { margin-bottom: 2px; }
  .card .big { font: 700 26px/1.1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .card .big .pill { flex: none; }
  .card .big.mono { font: 700 26px/1.1 var(--mono); }
  .card .sub { font-size: 14px; color: var(--muted); line-height: 1.5; }
  .card .sub > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* two set lines in every card */
  .card .sub > span:first-child { color: var(--sub-1); }   /* first line: near the value ink */
  .card .sub > span + span { color: var(--sub-2); }   /* second line: clearly quieter; the two tones are tuned per theme */   /* two lines reserved, so the divider sits at one height across the row */
  .kv { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 12px 24px; font-size: 14px; line-height: 1.45; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
  .kv dt { color: var(--muted); margin: 0; white-space: nowrap; font-weight: 700; }
  .kv .ln { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* values break only where we chose */
  .kv .ln + .ln { margin-top: 2px; }   /* 12ch fits the longest label: Last warning, Firing order */ .kv dd { margin: 0; min-width: 0; }
  .kv .gap-above { margin-top: 24px; }   /* 12 + 24 = 36: three steps of the row rhythm around the gun grid */
  .tag { display: inline-block; font: 500 11px/1.5 var(--mono); padding: 0 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
  .tag.clock, .tag.phrase { color: var(--accent); border-color: var(--accent); }
  .pill { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1.6 var(--sans); padding: 0 8px; border-radius: 999px; white-space: nowrap; }
  .pill.ok { color: var(--ok); background: var(--ok-soft); } .pill.warn { color: var(--warn); background: var(--warn-soft); } .pill.crit { color: var(--crit); background: var(--crit-soft); } .pill.off { color: var(--muted); background: var(--panel-2); }

  /* gun grid, 5 across by 3 down, channel 0 top left */
  .guns { display: grid; grid-template-columns: repeat(5, var(--cell, 26px)); gap: 4px; }
  .gun { width: var(--cell, 26px); height: var(--cell, 26px); border-radius: 3px; background: var(--gun-off); display: grid; place-items: center; font: 500 11px var(--mono); color: var(--muted); }
  .gun.on { background: var(--gun-on); color: var(--gun-on-fg); }
  .guns.small { --cell: 18px; gap: 3px; } .guns.small .gun { font-size: 0; }

  /* venue banner: full bleed, flush under the bar, one line */
  .venue { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); padding-block: 9px;
    background: var(--panel); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
  .venue-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; overflow: hidden; }
  .venue-in .dim { margin-left: auto; }
  @media (max-width: 820px) { .venue { font-size: 14px; } .venue-in .dim { margin-left: auto; } }
  @media (max-width: 640px) { .venue-in .dim { display: none; } }   /* phone: open state and closing time only; hours live in settings */

  /* health row */
  .health { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .h { background: var(--panel); padding: 18px 16px 20px; min-width: 0; display: grid; grid-template-rows: auto 22px 6px auto; gap: 0; align-content: start; }
  /* label -> value 14px; value -> detail 14px, with the 6px meter slot centred in that gap (4 + 6 + 4) */
  .h .k { margin-bottom: 18px; }
  .h .v { margin-bottom: 13px; }
  .h .slot, .h .meter { height: 6px; }
  /* cells without a meter: centre the value between the label and the detail line (18 above, 32 below, so move 7) */
  @media (min-width: 821px) { .h:has(> .slot) > .v { transform: translateY(7px); } }
  .h .s { margin-top: 13px; }
  .h .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .h .v { font: 700 15px/22px var(--sans); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
  .h .s { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
  .meter { height: 6px; border-radius: 3px; background: var(--gun-off); position: relative; overflow: hidden; align-self: center; }
  .meter > i { position: absolute; inset: 0 auto 0 0; background: var(--fg); border-radius: 3px; }
  .meter > b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--accent); }

  /* panels */
  .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 18px; min-width: 0; display: grid; gap: 14px; }
  .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .panel-head .dim { font-size: 13px; }
  .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  @media (max-width: 820px) { .two { grid-template-columns: 1fr; } }

  /* controls */
  .ctl { display: grid; gap: 12px; }
  .ctl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
  .ctl-row:first-child { border-top: 0; padding-top: 0; }
  .ctl-row .t { font-weight: 700; } .ctl-row .d { font-size: 13px; line-height: 1.5; color: var(--muted); grid-column: 1; }
  .ctl-row .a { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  @media (max-width: 520px) { .ctl-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; } .ctl-row .a { grid-row: 1; align-self: center; } .ctl-row .d { grid-column: 1 / -1; } }
  button { font: 700 14px/1.2 var(--sans); padding: 9px 14px; min-height: 40px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); cursor: pointer; }
  button:hover { background: var(--panel-2); }
  button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  button.primary:hover { filter: brightness(1.08); }
  button.danger { color: var(--crit); border-color: var(--crit); }
  button.danger.solid { background: var(--crit); color: var(--accent-fg); }
  button:disabled { opacity: .45; cursor: not-allowed; }
  button.small { min-height: 32px; padding: 5px 10px; font-size: 13px; }

  /* switch */
  .switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; background: none; border: 0; padding: 4px; min-height: 0; border-radius: var(--r); }
  .switch:hover { background: none; }
  .switch .knob { width: 52px; height: 30px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; transition: background .15s; }
  .switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
  .switch[aria-checked="true"] .knob { background: var(--warn); }
  .switch[aria-checked="true"] .knob::after { transform: translateX(22px); }
  @media (prefers-reduced-motion: reduce) { .switch .knob, .switch .knob::after { transition: none; } }

  /* inline confirmation: replaces the control row's action area, never a browser dialog */
  .confirm { grid-column: 1 / -1; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; }
  .confirm.danger { border-color: var(--crit); }
  .confirm .q { font-weight: 700; }
  .confirm .btns { display: flex; gap: 8px; flex-wrap: wrap; }
  .confirm input[type="text"] { font: 500 15px var(--mono); padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--fg); width: 100%; max-width: 220px; text-transform: uppercase; }
  .chan { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; }
  .chan button { min-height: 44px; padding: 0; font-family: var(--mono); }
  .chan button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .toast { font-size: 13px; padding: 8px 12px; border-radius: var(--r); background: var(--panel-2); border-left: 3px solid var(--ok); }
  .toast.warn { border-left-color: var(--warn); }

  /* settings */
  form.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  @media (max-width: 480px) { form.settings { grid-template-columns: 1fr; } }
  form.settings label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
  form.settings label > span { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  form.settings input, form.settings select { font: 400 15px var(--mono); padding: 8px 10px; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--fg); width: 100%; }
  form.settings .full { grid-column: 1 / -1; }
  form.settings input[type="date"] { display: block; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
  form.settings input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  .rean { font: 500 10px/1.5 var(--mono); color: var(--warn); border: 1px solid var(--warn); border-radius: 3px; padding: 0 5px; letter-spacing: .04em; }
  .preview { grid-column: 1 / -1; background: var(--panel-2); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 20px; font-size: 14px; }
  .preview .k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .preview dl { display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 14px 24px; margin: 0; }
  .preview dt { color: var(--muted); font-weight: 700; white-space: nowrap; } .preview dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }
  .preview .ln { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .preview .ln + .ln { margin-top: 2px; }
  .preview .warnline { color: var(--warn); font-weight: 700; }
  .save { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .save .hint, .save .confirm, .save .toast { flex-basis: 100%; }
  .save .hint { font-size: 13px; color: var(--muted); }

  /* tables */
  .tbl { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }
  table { border-collapse: collapse; width: 100%; font-size: 14px; }
  table { --gutter: 24px; }
  th { text-align: left; font: 700 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
  td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
  th:last-child, td:last-child { padding-right: 12px; }
  td.t, td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  th:first-child, td:first-child { padding-left: 10px; padding-right: 12px; }   /* the # is a row label, not a value */
  td:first-child { color: var(--muted); }
  /* alternate column ink: adjacent columns separate by text colour, black then slate, header and cells alike */
  @media (min-width: 641px) {
    table.strikes td:nth-child(2n+1):not(:first-child), table.upcoming td:nth-child(2n+1):not(:first-child),
    table.strikes th:nth-child(2n+1):not(:first-child), table.upcoming th:nth-child(2n+1):not(:first-child) { color: var(--col-alt); }
  }
  .tbl .tag, .tbl .pill { white-space: nowrap; }
  /* one column per table takes the slack, so every other gutter stays exactly --gutter */
  td.summary { min-width: 260px; width: 100%; }
  th.g, td.g { width: 150px; }
  td.place { white-space: normal; min-width: 9em; }   /* the one free-text column wraps, so wide faces still fit */
  table.strikes th:nth-child(5), table.strikes td.place { width: 100%; }   /* Place takes the slack and wraps only when a wide face needs it */
  .upcoming td.place { width: auto; white-space: normal; min-width: 9em; }   /* here the summary takes the slack */
  @media (max-width: 640px) { .upcoming td.place, table.strikes td.place { white-space: normal; } }
  tr.next td { background: var(--accent-soft); }
  tr.next td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  .tag-note { margin-top: 6px; font-size: 13px; line-height: 1.4; }
  .order-row { font-size: 13px; text-wrap: balance; overflow-wrap: anywhere; }
  /* in the log entries the order is a caption under the mini grid, labelled so it is never bare digits */
  .order { font: 400 11px/1.4 var(--mono); color: var(--muted); margin-top: 10px; max-width: calc(5 * 26px + 4 * 4px); overflow-wrap: anywhere; }

  .order::before { content: "Firing order"; display: block; font: 700 11px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

  /* firing order, everywhere: caption, then the numbers in fixed two-character cells, five per row, so the rows line up as columns and stay within the grid of squares */
  .order, .card .order, .tbl .order { display: grid; grid-template-columns: repeat(5, 2ch); column-gap: 1ch; row-gap: 2px; justify-content: start; justify-items: center;
    font: 400 12px/1.45 var(--mono); color: var(--muted); max-width: none; text-align: left; }
  .order::before { grid-column: 1 / -1; justify-self: start; }
  .card .order { margin-top: 14px; } .tbl .order { margin-top: 10px; }
  .foot { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }

  /* phone: each strike is the same label/value component the status cards use. One left axis, one 12px
     rhythm, labels in the column-header style, the receipt result as the single element on the right. */
  @media (max-width: 640px) {
    .tbl { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
    table.strikes, table.upcoming, table.strikes tbody, table.upcoming tbody { display: block; }
    table.strikes thead, table.upcoming thead { display: none; }
    table.strikes tr, table.upcoming tr { display: grid; grid-template-columns: 7em minmax(0, 1fr); column-gap: 14px; row-gap: 12px;
      padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
    table.strikes tbody tr:last-child, table.upcoming tbody tr:last-child { border-bottom: 0; }
    /* every cell spans both columns and lays its label and value on the row's own columns */
    table.strikes td, table.upcoming td { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: 14px; align-items: baseline;
      padding: 0; border: 0; width: auto; min-width: 0; white-space: normal; line-height: 1.45; }
    table.strikes td > *, table.upcoming td > * { grid-column: 2; justify-self: start; }   /* values never stretch; the order caption sits under the grid */
    table.strikes td::before, table.upcoming td::before { grid-column: 1; font: 700 11px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
    .tbl .order::before { grid-column: 1 / -1; content: "Firing order"; display: block; font: 700 11px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
    table.upcoming tr.next { background: var(--accent-soft); margin-inline: -12px; padding-inline: 12px; border-radius: var(--r); }
    tr.next td { background: transparent; } tr.next td:first-child { box-shadow: none; }
    /* headline row: number in the label column, time in the value column, outcome pill on the right */
    table.strikes td:first-child, table.upcoming td:first-child { grid-row: 1; grid-column: 1; display: block; color: var(--muted); font-weight: 700; }
    table.strikes td:nth-child(2), table.upcoming td:nth-child(2) { grid-row: 1; grid-column: 2; display: block; font-weight: 700; white-space: nowrap; }
    table.strikes td:nth-child(8) { grid-row: 2; } table.strikes td:nth-child(8)::before { content: "Receipt"; }
    /* label/value rows, in reading order */
    table.strikes td:nth-child(5) { grid-row: 3; } table.strikes td:nth-child(5)::before { content: "Place"; }
    table.strikes td:nth-child(6) { grid-row: 4; } table.strikes td:nth-child(6)::before { content: "Deaths"; }
    table.strikes td:nth-child(3) { grid-row: 5; } table.strikes td:nth-child(3)::before { content: "Lag"; }
    table.strikes td:nth-child(4) { grid-row: 6; } table.strikes td:nth-child(4)::before { content: "Archive"; }
    table.strikes td:nth-child(9) { grid-row: 7; } table.strikes td:nth-child(9)::before { content: "Time of day"; }
    table.strikes td:nth-child(7) { grid-row: 8; align-items: start; margin-top: 24px; }   /* 12 + 24 = 36: three steps of the row rhythm */ table.strikes td:nth-child(7)::before { content: "Guns"; }
    table.upcoming td:nth-child(4) { grid-row: 2; } table.upcoming td:nth-child(4)::before { content: "Place"; }
    table.upcoming td:nth-child(5) { grid-row: 3; } table.upcoming td:nth-child(5)::before { content: "Deaths"; }
    table.upcoming td:nth-child(3) { grid-row: 4; } table.upcoming td:nth-child(3)::before { content: "Archive"; }
    table.upcoming td:nth-child(6) { grid-row: 5; } table.upcoming td:nth-child(6)::before { content: "Time of day"; }
    table.upcoming td:nth-child(7) { grid-row: 6; color: var(--muted); font-size: 15px; } table.upcoming td:nth-child(7)::before { content: "Summary"; }
    table.upcoming td:nth-child(7) .dim { display: block; margin-top: 4px; }
    .tbl .guns.small { --cell: 22px; gap: 4px; }
    .tbl .order { max-width: none; font-size: 12px; margin: 24px 0 0; text-align: left; }
  }

  /* event log as a list, fully visible */
  .ev { display: grid; gap: 0; font: 400 13px/1.5 var(--mono); }
  .ev > div { display: grid; grid-template-columns: 14px 112px 70px minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: 8px 10px; border-left: 3px solid transparent; border-bottom: 1px solid var(--line); }
  .ev > div:last-child { border-bottom: 0; }
  .phone-only { display: none; }

  /* phone (<= 820px): iOS reading sizes, one 24px module, grouped inset lists, the two live actions docked within thumb reach */
  @media (max-width: 820px) {
    body { font-size: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    .phone-only { display: block; }
    /* sticky bar: one line, state and countdown only; the clock moves into the Next strike card */
    .bar h1, .bar .clock { display: none; }
    .bar-in { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
    .bar .next { white-space: nowrap; }
    .bar .next { margin-left: auto; font-size: 17px; }
    .state { font-size: 14px; padding: 8px 12px; }
    /* cards and panels: 16px inner padding to match the 16px gutter */
    .card { padding: 18px 16px 20px; }
    .panel { padding: 16px 16px 18px; }
    .card .big { font-size: 32px; }
    .card .big.mono { font-size: 28px; }
    .card .sub { font-size: 15px; }
    .kv { font-size: 15px; grid-template-columns: 12ch minmax(0, 1fr); gap: 12px 24px; }
    .panel-head .dim { font-size: 14px !important; }
    .notice { font-size: 14px; }
    h2 { font-size: 13px; }
    .tag { font-size: 12px; }
    .pill { font-size: 13px; }
    .rean { font-size: 11px; }
    .order { font-size: 12px; max-width: none; }   /* one line under the grid; wrapping the order over two lines is the worse reading */
    /* health: one grouped list, label left, value right, detail below, separators inset to the text edge */
    .health { grid-template-columns: 1fr; gap: 0; background: var(--panel); }
    .h { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 14px 16px 15px; }
    .h + .h { background: linear-gradient(var(--line), var(--line)) 16px 0 / calc(100% - 32px) 1px no-repeat var(--panel); }
    .h .k { font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--fg); margin: 0; }
    .h .v { margin: 0; font-size: 16px; line-height: 1.4; justify-content: flex-end; }
    .h .slot { display: none; }
    .h .meter { grid-column: 1 / -1; margin-top: 10px; }
    .h .s { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; }
    /* controls: 44pt targets, body-size titles, footnote under */
    .ctl-row { padding: 14px 0; }
    .ctl-row .t { font-size: 16px; }
    .ctl-row .d { font-size: 14px; }
    button { min-height: 44px; font-size: 16px; padding: 10px 16px; }
    button.small { min-height: 36px; }
    .switch { padding: 6px; min-height: 44px; }
    .confirm input[type="text"] { font-size: 16px; min-height: 44px; max-width: none; }
    .confirm .q { font-size: 16px; }
    .confirm .dim { font-size: 14px !important; }
    .toast { font-size: 14px; padding: 12px 14px; }
    /* settings: 44pt fields, 14px labels, 16px values */
    form.settings label { font-size: 14px; }
    form.settings input, form.settings select { font-size: 16px; min-height: 44px; }
    .preview { font-size: 15px; }
    .save .hint { font-size: 14px; }
    /* logs */
    table { font-size: 16px; }
    .foot { font-size: 14px; }
    .ev { font-size: 14px; }
    /* the dock: Hold and Fire, fixed above the home indicator */
    .dock { position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; background: var(--panel); border-top: 1px solid var(--line);
      padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
    .dock .switch { padding: 0; gap: 10px; flex: none; min-height: 48px; }
    .dock .switch .lbl { font-size: 16px; line-height: 1.2; text-align: left; }
    .dock .switch .lbl .dim { font-weight: 400; }
    .dock > button:not(.switch) { flex: 1 1 auto; min-height: 48px; }
  }
  .ev .ts { color: var(--muted); white-space: nowrap; } .ev .src { color: var(--muted); }
  .ev .msg { min-width: 0; overflow-wrap: anywhere; }
  .ev .w { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
  .ev .e { border-left-color: var(--crit); background: color-mix(in srgb, var(--crit-soft) 55%, transparent); }
  @media (max-width: 640px) { .ev > div { grid-template-columns: 14px auto minmax(0, 1fr); gap: 6px 10px; padding: 12px 12px; align-items: baseline; } .ev .msg { grid-column: 2 / -1; line-height: 1.45; } }

  /* Doto, the dot-matrix display face: headlines and the health-row values only. Below about 20px its dots stop
     resolving, so labels, values and body stay in Sometype Mono. Weight 900 so the dots read as strokes. */
  .card .big, .card .big.mono, .bar h1, .h .v, .h .v .mono, .h .v .dim { font-family: 'Doto', monospace; font-weight: 900; letter-spacing: .02em; }
  .card .big, .card .big.mono { font-size: 24px; }
  .bar .next .mono { font-weight: 700; }   /* a number inside a phrase is set at the phrase's size; Doto is for headlines and tile values only */
  .h .v { font-size: 19px; line-height: 22px; }
  .h .v .pill { font-family: var(--sans); font-weight: 700; }

  /* ---- status signals: never colour alone. OK = check on soft green (calm, it is the normal case);
     warning = triangle on solid bright yellow with black text; fault = octagon on solid red with white text.
     Yellow and red differ strongly in lightness, so they stay apart for red-green colour blindness, and the
     shapes carry the meaning with no colour at all. ---- */
  .pill.ok::before, .pill.warn::before, .pill.crit::before, .state.running::before, .state.held::before, .state.fault::before {
    content: ""; flex: none; width: 1em; height: 1em; border-radius: 0; background: currentColor;
    -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; animation: none; }
  .pill.ok, .state.running { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 12.5l5 5L20 6.5%22 fill=%22none%22 stroke=%22black%22 stroke-width=%223.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
  .pill.warn, .state.held { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 1.5L23.5 22H.5z M10.6 8.5h2.8v7h-2.8z M10.6 17.2h2.8v2.8h-2.8z%22/%3E%3C/svg%3E"); }
  .pill.crit, .state.fault { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M7 1h10l6 6v10l-6 6H7l-6-6V7z M10.6 5.5h2.8v8.5h-2.8z M10.6 15.8h2.8v2.8h-2.8z%22/%3E%3C/svg%3E"); }
  .pill.warn, .state.held { color: var(--on-warn); background: var(--warn-solid); }
  .pill.crit, .state.fault { color: var(--on-crit); background: var(--crit-solid); }
  .card.st-held { border-top-color: var(--warn-solid); } .card.st-fault { border-top-color: var(--crit-solid); }
  .switch[aria-checked="true"] .knob { background: var(--warn-solid); }
  /* event log: stripe, tint and the same shape before the time */
  .ev .w, .ev .e { border-left-width: 4px; }
  .ev .w { border-left-color: var(--warn-solid); } .ev .e { border-left-color: var(--crit-solid); }
  .ev > div::before { content: ""; width: 14px; height: 14px; align-self: center; }   /* the icon column; empty on ordinary rows */
  .ev .w::before, .ev .e::before { background: currentColor; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain; }
  .ev .w::before { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M12 1.5L23.5 22H.5z M10.6 8.5h2.8v7h-2.8z M10.6 17.2h2.8v2.8h-2.8z%22/%3E%3C/svg%3E"); color: var(--warn); }
  .ev .e::before { --ico: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill-rule=%22evenodd%22 d=%22M7 1h10l6 6v10l-6 6H7l-6-6V7z M10.6 5.5h2.8v8.5h-2.8z M10.6 15.8h2.8v2.8h-2.8z%22/%3E%3C/svg%3E"); color: var(--crit); }
  .ev .msg b { font-weight: 700; color: var(--fg); }