/* BarCamp BL apparel: one stylesheet for every page, organizer, door and visitor (the same file in
   designs_tmp/apparel-admin/ and designs_tmp/apparel-visitor/). The terminal look of barcampbl.com with the
   edition-neutral palette of the original terminal mockup (designs_tmp/1-terminal: chrome accent, no edition colour,
   C3), the site's type scale (12 labels and meta, 14 tables and secondary text, 16 text, 18+ display) and its GNU
   screen window list as the top bar. No script; confirmations are HTML popovers. */
@font-face { font-family: "JetBrains Mono"; src: url(jbm-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(jbm-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --bg: #1c2024; --panel: #252a30; --line: #363d45; --fg: #dde2e6; --dim: #85909a; --soft: #aeb7bf;
  --accent: #c9d0d6; --ok: #3fdc6e; --wt: #f5c400; --no: #ff4d4d; --gut: clamp(16px, 3vw, 40px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
       font: 16px/1.5 "JetBrains Mono", ui-monospace, monospace; }
main { flex: 1; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
nav a:focus-visible { outline-offset: -3px; }
nav a[aria-current]:focus-visible { outline-color: #000; }
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dim { color: var(--dim); }
p { margin: 0 0 12px; }

/* ---------- top bar: the site's GNU screen window list ---------- */
.staging { background: var(--wt); color: #000; text-align: center; font-weight: 700; font-size: 12px; padding: 2px; }
nav { position: sticky; top: 0; z-index: 10; background: #2a3037; border-bottom: 1px solid var(--line); font-size: 14px; }
nav .wrap { display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 2px; }
/* session name, like tmux/screen's [name]: home of the logged-in account (organizer: review; door: door) */
nav .sess { padding: 8px 14px 8px 0; color: var(--fg); font-weight: 700; text-decoration: none; white-space: nowrap; }
nav .sess span { color: var(--accent); }
nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
nav ul + ul { border-left: 1px solid var(--line); padding-left: 2px; margin-left: 4px; }
nav ul a { display: block; padding: 8px 12px; color: var(--dim); text-decoration: none; white-space: nowrap; }
/* the "*" marks the active window; its space is reserved on every tab so nothing shifts */
nav ul a::after { content: "*"; visibility: hidden; }
nav ul a[aria-current] { background: var(--ok); color: #000; font-weight: 700; }
nav ul a[aria-current]::after { visibility: visible; }
nav .cnt { color: var(--wt); }
nav a[aria-current] .cnt { color: #000; }
nav .who { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-left: 12px; color: var(--dim); white-space: nowrap; }
nav .who form { margin: 0; }
nav .who button { font: inherit; color: var(--accent); background: none; border: 0; padding: 8px 0; cursor: pointer;
                  text-decoration: underline; text-underline-offset: 3px; }

/* ---------- page head ---------- */
main.wrap { padding-block: 32px 24px; }
h1 { font-size: 20px; margin: 0 0 6px; overflow-wrap: anywhere; }
h1::before { content: "$ "; color: var(--accent); }
.lead { color: var(--soft); font-size: 14px; margin: 0 0 24px; max-width: 90ch; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 24px; }
.head .lead { margin: 0; }
.msg { border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); padding: 8px 12px;
       font-size: 14px; margin: 0 0 20px; }
.msg.err { border-color: var(--no); background: color-mix(in srgb, var(--no) 10%, transparent); }

/* ---------- windows: the site's terminal boxes with a title bar ---------- */
.win { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.win > .bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px;
              padding: 7px 14px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.win > .bar h2 { margin: 0; font-size: 12px; font-weight: 700; color: var(--fg); }
.win > .body { padding: 16px; }
.stackv { display: grid; gap: 20px; align-content: start; min-width: 0; }
h2.sec { font-size: 16px; color: var(--dim); margin: 36px 0 14px; }
h2.sec::before { content: "## "; color: var(--accent); }

/* ---------- controls ---------- */
/* primary button: a white keycap from the chrome scale (top #f4f6f8, edge #7d8791), black bold text; it presses
   down on click. Disabled buttons are never filled: dashed outline, dim text. */
button, .btn { font: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; padding: 8px 16px 10px;
               border: 1px solid #f4f6f8; border-radius: 3px; background: #f4f6f8; color: #000;
               box-shadow: inset 0 -3px 0 #7d8791; cursor: pointer; text-decoration: none; display: inline-block;
               white-space: nowrap; }
button:not(:disabled):active, .btn:active { box-shadow: inset 0 -1px 0 #7d8791; transform: translateY(1px); }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; }
button.danger { background: transparent; color: var(--no); border-color: var(--no); box-shadow: none; }
button.danger.fill { background: var(--no); color: #000; box-shadow: inset 0 -3px 0 #a32424; }
button.sm, .btn.sm { font-size: 12px; padding: 3px 9px; }
button:disabled, button.ghost:disabled { background: transparent; color: var(--dim); border: 1px dashed var(--line);
                                         box-shadow: none; cursor: not-allowed; }
@media (hover: hover) {
  button:not(:disabled):hover, .btn:hover { background: #ffffff; }
  button.ghost:not(:disabled):hover, .btn.ghost:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
  button.danger:not(.fill):not(:disabled):hover { background: color-mix(in srgb, var(--no) 15%, transparent); }
  button.danger.fill:not(:disabled):hover { background: #ff6b6b; }
  nav ul a:not([aria-current]):hover { color: var(--fg); background: var(--line); }
}
label { display: grid; gap: 4px; font-size: 12px; color: var(--dim); min-width: 0; }
input, select { font: inherit; font-size: 14px; color: var(--fg); background: var(--bg); border: 1px solid var(--line);
                border-radius: 0; padding: 7px 10px; width: 100%; min-width: 0; }
input:focus-visible, select:focus-visible { outline-offset: 0; }
input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
label.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fg); cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.hint { font-size: 12px; color: var(--dim); margin: 0; }
code { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); padding: 0 4px; }

/* state chips: one colour per state, "picked up" filled like the active tab */
.st { display: inline-block; font-size: 12px; line-height: 18px; padding: 0 6px; border: 1px solid; border-radius: 3px; white-space: nowrap; }
.st.wait { color: var(--wt); }
.st.ok { color: var(--ok); }
.st.no { color: var(--no); }
.st.done { background: var(--ok); border-color: var(--ok); color: #000; font-weight: 700; }
.tag { font-size: 12px; color: var(--dim); border: 1px dashed var(--line); padding: 0 5px; white-space: nowrap; }

/* ---------- confirmation: a popover, opened and closed by popovertarget, no script ---------- */
.confirm { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--no); border-radius: 6px;
           background: var(--panel); color: var(--fg); font-size: 14px; text-align: left; white-space: normal; }
.confirm::backdrop { background: rgb(12 14 16 / .78); }
.confirm .bar { padding: 7px 14px; border-bottom: 1px solid var(--line); color: var(--no); font-size: 12px; font-weight: 700; }
.confirm .body { padding: 16px; }
.confirm p { margin: 0 0 10px; color: var(--soft); }
.confirm p:first-child { color: var(--fg); font-size: 16px; }
.confirm .actions { margin-top: 16px; }

/* ---------- tables; class "stack" turns each row into a card on phones ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 400; font-size: 12px; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
td.mail { overflow-wrap: anywhere; }
tfoot td { border-bottom: 0; border-top: 1px solid var(--dim); font-weight: 700; }
.zero { color: #4f5861; }
.cmt { color: var(--soft); }
.cmt::before { content: "# "; color: var(--dim); }

/* ---------- stats tiles, as on the site ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line);
         border: 1px solid var(--line); margin-bottom: 24px; }
.stats div { background: var(--bg); padding: 14px 18px; }
.stats b { display: block; font-size: 30px; line-height: 1.15; color: var(--accent); }
.stats b small { font-size: 16px; color: var(--dim); font-weight: 400; }
.stats span { font-size: 12px; color: var(--dim); }

/* ---------- status lines (review): the site's build log, status | key | value ---------- */
.term { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px; font-size: 14px;
        margin: 0 0 24px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 1.5ch; row-gap: 2px; }
.term .ln { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.term .k { color: var(--dim); }
.term .s.ok { color: var(--ok); } .term .s.wt { color: var(--wt); } .term .s.no { color: var(--no); }

/* ---------- review: the queue next to the counts (the review is also the capacity control) ---------- */
.cols { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); } }
.queue { list-style: none; margin: 0; padding: 0; }
.queue > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: start;
            padding: 14px 16px; border-bottom: 1px solid var(--line); }
.queue > li:last-child { border-bottom: 0; }
.queue p { margin: 0; font-size: 14px; }
.queue .who { font-size: 16px; overflow-wrap: anywhere; }
.queue .who a { margin-right: 8px; }
.queue .pcs { color: var(--fg); font-size: 14px; margin: 2px 0; }
.queue .meta { font-size: 12px; color: var(--dim); margin-top: 4px; }
.mini { display: grid; gap: 16px; }
.mini table { font-size: 14px; }
.mini caption { text-align: left; font-weight: 700; padding: 0 0 4px; }
.mini th, .mini td { padding: 4px 8px; }
.mini th:first-child, .mini td:first-child { padding-left: 0; }

/* ---------- orders ---------- */
.filters { display: grid; gap: 12px; align-items: end; margin-bottom: 20px;
           grid-template-columns: minmax(0, 1fr) minmax(130px, 200px) minmax(110px, 160px) auto; }
.count { font-size: 12px; color: var(--dim); margin: 0 0 8px; }
.entries td.id { white-space: nowrap; }
.entries td.when { white-space: nowrap; color: var(--soft); }
.entries td.hand { white-space: nowrap; }
.entries td.hand small { display: block; color: var(--dim); font-size: 12px; }
.entries .who small { display: block; }

/* ---------- order ---------- */
.two { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: 0 0 4px; font-size: 14px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.win .actions.split { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 16px; }
.pieces { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-bottom: 16px; }

/* ---------- log: one list per day, columns kept by subgrid, two lines on phones ---------- */
.day { margin-bottom: 28px; }
.day h2 { font-size: 14px; color: var(--dim); font-weight: 400; margin: 0 0 6px; }
.day h2::before { content: "-- "; } .day h2::after { content: " --"; }
.lines { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid;
         grid-template-columns: 6ch 10ch 24ch 4ch minmax(0, 1fr); column-gap: 2ch; }
.lines li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 5px 0; border-bottom: 1px solid var(--line); }
.lines .t { color: var(--dim); }
.lines .a.ok { color: var(--ok); } .lines .a.no { color: var(--no); } .lines .a.wt { color: var(--wt); }
.lines .d { color: var(--soft); overflow-wrap: anywhere; }
.lines .d.no { color: var(--no); }   /* the code mail failed (F5) */
.lines .e { text-align: right; }

/* ---------- items ---------- */
.sizes-form .layout { display: grid; gap: 20px 40px; align-items: start; }
@media (min-width: 1000px) { .sizes-form .layout { grid-template-columns: minmax(0, 640px) minmax(280px, 420px); } }
.sizes th, .sizes td { padding: 6px 10px; vertical-align: middle; }
.sizes td.nm { width: 16ch; }
.sizes td.nm input { padding: 4px 8px; }
.sizes td.mv { white-space: nowrap; }
.sizes td.mv button { width: 34px; padding-inline: 0; }
.sizes td.del { text-align: right; }
.add { display: grid; gap: 12px; align-content: start; background: var(--bg); border: 1px dashed var(--line); padding: 14px; }
.add .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border-top: 1px dashed var(--line);
        margin-top: 16px; padding-top: 16px; font-size: 12px; color: var(--dim); }
.items { display: grid; gap: 16px; margin-top: 16px; }
.item .body { display: grid; gap: 16px 32px; }
@media (min-width: 900px) {
  .item .body { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
  .item .foot { grid-column: 1 / -1; margin-top: 0; }
}
.item .headf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.item .name input { font-size: 18px; font-weight: 700; }
.item .mv { display: flex; gap: 4px; }
.item .mv button { width: 40px; padding-inline: 0; }
.item .headf .check { grid-column: 1 / -1; }
.ticks { border: 0; margin: 0; padding: 0; min-width: 0; }
.ticks legend { font-size: 12px; color: var(--dim); padding: 0; margin-bottom: 6px; }
.ticks .set { display: flex; flex-wrap: wrap; gap: 8px; }
.tick { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); background: var(--bg);
        font-size: 14px; color: var(--dim); cursor: pointer; }
.tick:has(:checked) { border-color: var(--accent); color: var(--fg); }
.tick sup { color: var(--wt); font-weight: 700; }
/* live feedback without script: a hidden item turns dashed and dim, its name gets a tag */
.item:has(input[name=hidden]:checked) { border-style: dashed; }
.item:has(input[name=hidden]:checked) .ticks, .item:has(input[name=hidden]:checked) .name input { opacity: .55; }
.item .bar .off { display: none; color: var(--wt); }
.item:has(input[name=hidden]:checked) .bar .off { display: inline; }
.legend { font-size: 12px; color: var(--dim); margin: 12px 0 0; }
.legend sup { color: var(--wt); font-weight: 700; }

/* ---------- totals ---------- */
.per-item { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); align-items: start; }

/* ---------- door and the scan answer: phone first, big type ---------- */
.door { max-width: 640px; }
.steps { margin: 0; padding-left: 0; list-style: none; counter-reset: s; font-size: 18px; display: grid; gap: 14px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3ch minmax(0, 1fr); }
.steps li::before { content: counter(s) "."; color: var(--accent); font-weight: 700; }
.answers { display: grid; gap: 10px; }
.answers div { display: grid; grid-template-columns: 14ch minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.answers b { color: #000; text-align: center; padding: 6px 4px; border-radius: 4px; }
.answers .v { background: var(--ok); } .answers .h { background: var(--wt); } .answers .x { background: var(--no); }
.banner { padding: 26px 16px; border-radius: 6px; font-size: 30px; font-weight: 700; text-align: center; color: #000;
          margin-bottom: 16px; line-height: 1.2; }
.banner small { display: block; font-size: 16px; font-weight: 400; margin-top: 6px; }
.banner.valid { background: var(--ok); } .banner.handed { background: var(--wt); } .banner.invalid { background: var(--no); }
/* item lines, count first, the same on every page: "2 × Majica M" (V4); on the door ticked (D2) */
.il { list-style: none; margin: 0; padding: 0; }
.il li + li { margin-top: 2px; }
.il b { font-weight: 700; }
.il.lg { font-size: 16px; margin: 0 0 12px; }
.il.lg li, .il.door li { margin: 0; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.il.lg li:last-child, .il.door li:last-child { border-bottom: 0; }
.il.door { font-size: 22px; font-weight: 700; }
.il.door li { padding: 6px 0; }
.il.door li::before { content: "[x] "; color: var(--ok); }   /* static marks, not tick boxes */
/* empty state: a window with nothing in it */
.empty { margin: 0; padding: 16px; font-size: 14px; color: var(--dim); }
.empty::before { content: "# "; }
.big { width: 100%; font-size: 22px; padding: 18px; margin-top: 16px; }
.after { font-size: 14px; color: var(--dim); margin-top: 16px; }

/* ---------- elements (component sheet) ---------- */
.sheet { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.confirm.static { position: static; display: block; margin: 0; width: 100%; }

footer { border-top: 1px solid var(--line); padding: 18px 0 28px; color: var(--dim); font-size: 12px; margin-top: 32px; }
footer a { color: var(--dim); }

/* ---------- phones ---------- */
@media (max-width: 759px) {
  /* the bar: session and account on the first line, then one line per tab group; not sticky (three lines tall) */
  nav { position: static; }
  nav .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  nav .sess { padding: 10px 0; }
  nav .who { padding-left: 0; grid-row: 1; grid-column: 2; }
  nav ul { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  nav ul + ul { border-left: 0; border-top: 1px solid var(--line); margin: 0; padding: 0; }
  nav ul a { padding: 11px 2px; font-size: 12px; text-align: center; }
  nav .n, nav ul a::after { display: none; }   /* no "N:" and no "*": the green block marks the active tab */
  nav .door-tabs { grid-auto-flow: row; }

  main.wrap { padding-top: 24px; }
  .win > .body { padding: 14px; }
  .term { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; font-size: 12px; }
  .term .s { grid-row: span 2; }
  .term .v { grid-column: 2; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div { padding: 12px 14px; }
  .stats b { font-size: 24px; }

  .queue > li { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .queue .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .queue .actions button { width: 100%; }

  .filters { grid-template-columns: 1fr 1fr; }
  .filters .q { grid-column: 1 / -1; }
  .filters button { grid-column: 1 / -1; }

  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody { display: block; }
  table.stack tr { display: grid; column-gap: 10px; row-gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line);
                   grid-template-columns: 4ch minmax(0, 1fr) auto;
                   grid-template-areas: "id who st" ". pcs pcs" ". cmt cmt" ". hand hand"; }
  table.stack td { border: 0; padding: 0; }
  table.stack td:empty, table.stack td.when { display: none; }
  .entries td.id { grid-area: id; } .entries td.who { grid-area: who; } .entries td.state { grid-area: st; }
  .entries td.pcs { grid-area: pcs; } .entries td.cmt { grid-area: cmt; } .entries td.hand { grid-area: hand; font-size: 12px; }
  .entries td.hand small { display: inline; }

  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dt { font-size: 12px; margin-top: 10px; }
  .kv dt:first-child { margin-top: 0; }
  .actions.split, .actions.split form { display: grid; gap: 8px; }
  .actions.split button { width: 100%; }

  .lines { grid-template-columns: 6ch minmax(0, 1fr) auto; column-gap: 1.5ch; }
  .lines li { grid-template-columns: subgrid; grid-template-areas: "t a e" ". u u" ". d d"; }
  .lines .t { grid-area: t; } .lines .a { grid-area: a; } .lines .e { grid-area: e; }
  .lines .u { grid-area: u; font-size: 12px; color: var(--dim); } .lines .d { grid-area: d; font-size: 12px; }
  .lines .d:empty { display: none; }

  .sizes th.no, .sizes td.no { display: none; }
  .sizes th, .sizes td { padding: 6px 4px; }
  .sizes td.nm { width: auto; }
  .sizes td.mv button { width: 30px; }
  .item .headf { grid-template-columns: minmax(0, 1fr) auto; }
  .tick { padding: 6px 8px; }

  .answers div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

h1.banner::before { content: none; }

/* ---------- items editor (order, add order): each product with its sizes, a quantity per size ---------- */
.qty-prod { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.qty-prod legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 6px; }
.qty-prod legend small { font-weight: 400; font-size: 12px; color: var(--wt); }
.qty { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.qty label { font-size: 12px; color: var(--soft); text-align: center; gap: 2px; }
.qty input { text-align: center; font-size: 16px; padding: 6px 4px; appearance: textfield; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* live feedback without script: a size with a quantity stands out */
.qty input:not(:placeholder-shown) { border-color: var(--accent); }
.qty label:has(input:not(:placeholder-shown)) { color: var(--fg); font-weight: 700; }
details.more { margin: 0 0 16px; font-size: 14px; }
details.more summary { cursor: pointer; color: var(--accent); margin-bottom: 4px; }
details.more[open] summary { margin-bottom: 12px; }
details.more summary small { color: var(--dim); }

/* ---------- analytics: CSS bars, sized by classes the server picks (5 % steps), no script, no style="" ---------- */
.charts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); align-items: start; margin-bottom: 20px; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content;
         gap: 8px 12px; align-items: center; font-size: 14px; }
.hbars li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.hbars .lbl { white-space: nowrap; }
.hbars .sub .lbl { color: var(--soft); }
.hbars .sub .lbl::before { content: "└ "; color: var(--dim); }
.hbars .track { height: 14px; }
.hbars .fill { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.hbars .sub .fill { background: var(--dim); }
.hbars .val { text-align: right; font-variant-numeric: tabular-nums; }
.hbars .val small { color: var(--dim); font-size: 12px; }
.vbars { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.vbars li { display: grid; grid-template-rows: auto 120px auto; text-align: center; font-size: 12px; }
.vbars .v { font-variant-numeric: tabular-nums; min-height: 18px; }
.vbars .plot { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--dim); }
.vbars .fill { width: 100%; max-width: 44px; background: var(--accent); border-radius: 4px 4px 0 0; }
.vbars .x { color: var(--dim); padding-top: 4px; white-space: nowrap; }
.vbars .later .v, .vbars .later .x { color: var(--line); }
.vbars .mark .x { color: var(--wt); }
.chart-note { font-size: 12px; color: var(--dim); margin: 12px 0 0; }
details.data { margin-top: 12px; font-size: 12px; }
details.data summary { cursor: pointer; color: var(--accent); }
details.data table { margin-top: 8px; font-size: 12px; }
details.data th, details.data td { padding: 3px 8px; }
.w-0 { width: 0; } .h-0 { height: 0; }
.w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; } 
.h-5 { height: 5%; } .h-10 { height: 10%; } .h-15 { height: 15%; } .h-20 { height: 20%; } .h-25 { height: 25%; } .h-30 { height: 30%; } .h-35 { height: 35%; } .h-40 { height: 40%; } .h-45 { height: 45%; } .h-50 { height: 50%; } .h-55 { height: 55%; } .h-60 { height: 60%; } .h-65 { height: 65%; } .h-70 { height: 70%; } .h-75 { height: 75%; } .h-80 { height: 80%; } .h-85 { height: 85%; } .h-90 { height: 90%; } .h-95 { height: 95%; } .h-100 { height: 100%; } 

/* ---------- mail, accounts, settings, login ---------- */
.att { font-size: 12px; color: var(--soft); }
.att div + div { margin-top: 2px; }
.acct td { vertical-align: middle; }
.acct .pw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 420px; }
.formgrid { display: grid; gap: 16px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.formgrid .full { grid-column: 1 / -1; }
label.check.warn { color: var(--wt); }
.narrow { max-width: 960px; }
.login { max-width: 440px; margin: 6vh auto 0; }
.login .body { display: grid; gap: 14px; }
.idx { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }
.idx code { margin-left: 8px; }

@media (max-width: 759px) {
  .hbars { grid-template-columns: minmax(0, 1fr) max-content; row-gap: 2px; }
  .hbars li { row-gap: 2px; margin-bottom: 8px; }
  .hbars .lbl { grid-column: 1 / -1; white-space: normal; }
  .vbars li { grid-template-rows: auto 100px auto; }
  .vbars .x { font-size: 11px; }
  /* analytics tables stay tables: headers wrap per word, numbers in narrow columns */
  table.cards th { white-space: normal; font-size: 11px; vertical-align: bottom; }
  table.cards th, table.cards td { padding: 6px 3px; }
  table.cards td { font-size: 13px; }
  table.cards td small { display: block; font-size: 11px; }
  .acct .pw { max-width: none; }
  table.stack.acct tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who del" "role role" "pw pw"; }
  .acct td.who { grid-area: who; font-weight: 700; } .acct td.role { grid-area: role; color: var(--soft); }
  .acct td.pwc { grid-area: pw; padding-top: 6px; } .acct td.del { grid-area: del; }
  table.stack.mails tr { grid-template-columns: 4ch minmax(0, 1fr) auto; grid-template-areas: "id to st" ". kind kind" ". subj subj" ". att att" ". act act"; }
  .mails td.id { grid-area: id; } .mails td.to { grid-area: to; } .mails td.state { grid-area: st; }
  .mails td.kind { grid-area: kind; color: var(--soft); } .mails td.subj { grid-area: subj; } .mails td.att { grid-area: att; }
  .mails td.act { grid-area: act; padding-top: 6px; }
  .mails td.state small { display: none; }
}
.sec-sm { font-size: 12px; font-weight: 400; margin: 20px 0 8px; }
.win.spaced { margin-top: 24px; }
input:disabled { color: var(--dim); border-style: dashed; cursor: not-allowed; }
label.check + label.check { margin-top: 10px; }
label.check + .hint { margin-top: 8px; }
/* orders per day: two series per day, side by side, with a 2px gap; submitted dim grey, confirmed chrome */
.vbars.two .v { display: flex; justify-content: center; gap: 2px; }
.vbars.two .v span { flex: 0 1 22px; }
.vbars.two .plot { gap: 2px; }
.vbars.two .fill { max-width: 22px; }
.vbars .fill.sub { background: var(--dim); }
.key { font-size: 12px; color: var(--soft); margin: 0 0 10px; display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--accent); margin-right: 6px; vertical-align: -1px; }
.sw.sub { background: var(--dim); }
.dl { display: grid; gap: 6px; justify-items: end; max-width: 380px; }
.dl .hint { text-align: right; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: end; }
@media (max-width: 759px) {
  .dl { justify-items: start; max-width: none; }
  .dl .hint { text-align: left; }
  .pair { grid-template-columns: minmax(0, 1fr); }
}
/* "log out" in the bar is a text link look, not a keycap */
nav .who button, nav .who button:not(:disabled):active { box-shadow: none; border-radius: 0; transform: none; }
@media (hover: hover) { nav .who button:not(:disabled):hover { background: none; color: var(--fg); } }

/* ---------- shared form layout (order form, add order), visitor shell, code page, mails ---------- */
nav .ed { padding: 8px 0; color: var(--dim); white-space: nowrap; }
nav .site { margin-left: auto; padding: 8px 0 8px 12px; color: var(--dim); white-space: nowrap; }
@media (hover: hover) { nav .site:hover { color: var(--fg); } }
textarea { font: inherit; font-size: 14px; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 0;
           padding: 7px 10px; width: 100%; min-height: 6em; resize: vertical; }
textarea:focus-visible { outline-offset: 0; }
.field-hint { font-size: 12px; color: var(--dim); margin: 4px 0 0; }
.stack-form { display: grid; gap: 20px; }
/* form page: the form, and beside it how it goes (below it on phones) */
.vgrid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .vgrid { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); } }
.vgrid.mid { max-width: 1180px; }
.limit { font-size: 14px; color: var(--fg); margin: 0 0 14px; }
.limit b { color: var(--fg); }
.win.bad { border-color: var(--no); }
.win.bad > .bar { color: var(--no); }
.field-err { color: var(--no); font-size: 14px; margin: 0 0 12px; }
.send { display: grid; gap: 14px; justify-items: start; }
.send .hint { max-width: 60ch; }
.send altcha-widget { justify-self: stretch; max-width: 320px; }
.big-send { font-size: 16px; padding: 10px 28px 12px; }
/* static stand-in for the ALTCHA widget (the real one is its own script, already in the app) */
.altcha { display: grid; gap: 6px; width: min(100%, 320px); border: 1px solid #5b636b; border-radius: 6px; background: var(--bg);
          padding: 12px 14px 8px; font-size: 14px; }
.altcha .row { display: flex; align-items: center; gap: 10px; }
.altcha .foot2 { font-size: 11px; color: var(--dim); text-align: right; }
.steps-v { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; font-size: 14px; }
.steps-v li { counter-increment: s; display: grid; grid-template-columns: 3ch minmax(0, 1fr); }
.steps-v li::before { content: counter(s) "."; color: var(--accent); font-weight: 700; }
.note-box { font-size: 14px; color: var(--soft); border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 14px; }
.note-box p:last-child { margin-bottom: 0; }
.msgpage { max-width: 760px; }
.msgpage .body p { font-size: 16px; }
.msgpage .body p.sm { font-size: 14px; color: var(--soft); }
/* the public code page: the QR code first, big */
.code { display: grid; gap: 20px; align-items: start; max-width: 1180px; }
@media (min-width: 900px) { .code { grid-template-columns: 320px minmax(0, 1fr); } }
.qr { display: block; width: min(100%, 320px); height: auto; image-rendering: pixelated; background: #fff; padding: 12px; border-radius: 6px; }
/* mails: a neutral, light mail window around the HTML part */
.mailpage { max-width: 860px; }
.mailcap { font-size: 14px; color: var(--soft); margin: 0 0 16px; }
.mailcap b { color: var(--wt); font-weight: 700; }
.mailwin { background: #ffffff; color: #1b1f23; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.mailhead { background: #eef0f2; border-bottom: 1px solid #d5d9dd; padding: 12px 18px; font-size: 13px; display: grid;
            grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; }
.mailhead dt { color: #5c6670; }
.mailhead dd { margin: 0; overflow-wrap: anywhere; }
.mailhead .subj { font-weight: 700; font-size: 15px; }
.mailbody { padding: 20px 18px 28px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5;
            white-space: pre-wrap; overflow-wrap: anywhere; }
.mailbody a { color: #1a5fb4; }
.mailbody img { display: block; width: 256px; max-width: 100%; height: auto; image-rendering: pixelated; }
@media (max-width: 759px) {
  nav .wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
  nav .ed { padding: 10px 0 10px 8px; overflow: hidden; text-overflow: ellipsis; }
  nav .site { padding: 10px 0 10px 8px; }
  .mailhead { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mailhead dt { margin-top: 6px; font-size: 12px; }
  .mailhead dt:first-child { margin-top: 0; }
  .mailbody { padding: 16px 14px 22px; font-size: 13px; }
  .big-send { width: 100%; }
}
.mailhead { margin: 0; }
.mailbody img { display: inline-block; vertical-align: top; }
.win .body > .term { border: 0; padding: 0; margin: 0; background: none; }
.qty-prod + .hint { margin: -4px 0 12px; }
.hint + details.more { margin-top: 4px; }
.nw { white-space: nowrap; }   /* one item line never breaks inside */
/* orders per day over many days (classes dw / dn from the server): only some day labels show (xw-* / xn-*: anchored
   at the column's left edge, middle or right edge), each out of the flow, so a label wider than its column neither
   clips nor widens it. The values on top give way; they stay in the tooltips and the "as a table" fold. */
.vbars.two .x > span { white-space: nowrap; }
@media (min-width: 760px) {
  .vbars.dw { position: relative; }
  .vbars.dw .v span, .vbars.dw .x > span { display: none; }
  .vbars.dw .x { height: calc(1lh + 4px); }
  .vbars.dw :is(.xw-l, .xw-c, .xw-r) .x > span { display: inline; position: absolute; }
  .vbars.dw .xw-l .x { text-align: left; } .vbars.dw .xw-r .x { text-align: right; }
  .vbars.dw .xw-c .x > span { transform: translateX(-50%); } .vbars.dw .xw-r .x > span { transform: translateX(-100%); }
}
@media (max-width: 759px) {
  .vbars.dn { position: relative; }
  .vbars.dn .v span, .vbars.dn .x > span { display: none; }
  .vbars.dn .x { height: calc(1lh + 4px); }
  .vbars.dn :is(.xn-l, .xn-c, .xn-r) .x > span { display: inline; position: absolute; }
  .vbars.dn .xn-l .x { text-align: left; } .vbars.dn .xn-r .x { text-align: right; }
  .vbars.dn .xn-c .x > span { transform: translateX(-50%); } .vbars.dn .xn-r .x > span { transform: translateX(-100%); }
}