/* Dark mode for pro.css: MADE BY tools/make-dark.js, do not change by hand. Change pro/pro.css or tools/dark/pro.css, then run
   node tools/make-dark.js. Only on a screen, and only when theme.js has set <html data-theme="dark">: printing is always light. */
@media screen {
:root[data-theme=dark] { color-scheme: dark }
:root[data-theme=dark] { --ink: #B5DEEE; --ink2: #AED3E1; --act: #0F9ED5; --act-dk: #0B7FAD; --line: #20576D; --warn: #B3541E; --good: #2E7D32; color-scheme: dark }
:root[data-theme=dark] body { color: var(--ink); background: radial-gradient(ellipse at 0% 0%, #183552, rgba(24,53,82,0) 60%), radial-gradient(ellipse at 100% 100%, #1A4B5A, rgba(26,75,90,0) 60%) #132C42 }
:root[data-theme=dark] button, :root[data-theme=dark] input { color: inherit }
:root[data-theme=dark] .testbar { background: #372E15; color: #EEDDB7 }
:root[data-theme=dark] header.band { background: rgba(31,41,51,0.65); border-bottom: 2px solid rgba(31,41,51,0.8) }
:root[data-theme=dark] header .who { color: var(--ink2) }
:root[data-theme=dark] .panel { background: rgba(31,41,51,0.8); box-shadow: 0 4px 14px rgba(0,0,0,0.33) }
:root[data-theme=dark] .status { color: var(--ink2) }
:root[data-theme=dark] label.f span.hint { color: var(--ink2) }
:root[data-theme=dark] input[type=text], :root[data-theme=dark] input[type=email], :root[data-theme=dark] input[type=password], :root[data-theme=dark] input[type=tel] { border: 1px solid var(--line); background: #13191E }
:root[data-theme=dark] input:focus-visible, :root[data-theme=dark] button:focus-visible { outline: 3px solid #245F7A }
:root[data-theme=dark] .btn { border: 0; background: var(--act); color: #FFFFFF }
:root[data-theme=dark] .btn:hover { background: var(--act-dk) }
:root[data-theme=dark] .btn.light { background: #132732; color: var(--ink) }
:root[data-theme=dark] .btn.light:hover { background: #122E3E }
:root[data-theme=dark] .btn.warn { background: #352415; color: var(--warn) }
:root[data-theme=dark] .linkbtn { background: none; border: 0; color: var(--act-dk) }
:root[data-theme=dark] .err { color: #E9A3A6; background: #311313 }
:root[data-theme=dark] .ok { color: #B5E7BA; background: #193019 }
:root[data-theme=dark] .testcode { background: #372E15; color: #EEDDB7 }
:root[data-theme=dark] .child { border-top: 1px solid #224659 }
:root[data-theme=dark] .child:first-of-type { border-top: 0 }
:root[data-theme=dark] .child .av { background: #152A36 }
:root[data-theme=dark] .child .sub { color: var(--ink2) }
:root[data-theme=dark] .soon { color: var(--ink2) }
:root[data-theme=dark] .muted { color: var(--ink2) }
:root[data-theme=dark] .toast { background: #074F69; color: #FFFFFF; box-shadow: 0 6px 18px rgba(0,0,0,0.44) }
:root[data-theme=dark] input[type=date], :root[data-theme=dark] select { border: 1px solid var(--line); background: #13191E; color: inherit }
:root[data-theme=dark] textarea { border: 1px solid var(--line) }
:root[data-theme=dark] .tabs button { border: 1px solid var(--line); background: #13191E; color: var(--ink) }
:root[data-theme=dark] .tabs button[aria-pressed=true] { background: var(--act); border-color: var(--act); color: #FFFFFF }
:root[data-theme=dark] .entry { border: 1px solid #224659; background: #13191E }
:root[data-theme=dark] .entry .top .ref { color: var(--ink2) }
:root[data-theme=dark] .entry dt { color: var(--ink2) }
:root[data-theme=dark] .entry .by { color: var(--ink2) }
:root[data-theme=dark] .req { border-top: 1px solid #224659 }
:root[data-theme=dark] .pill { background: #132732 }
:root[data-theme=dark] .pill.good { background: #193019; color: #B5E7BA }
:root[data-theme=dark] .pill.no { background: #311313; color: #E9A3A6 }
:root[data-theme=dark] .pill.wait { background: #372E15; color: #EEDDB7 }
:root[data-theme=dark] .rate button { border: 1px solid var(--line); background: #13191E; color: inherit }
:root[data-theme=dark] .rate button span { color: var(--ink2) }
:root[data-theme=dark] .rate button[aria-pressed=true] { background: var(--act); border-color: var(--act); color: #FFFFFF }
:root[data-theme=dark] .rate button[aria-pressed=true] span { color: #FFFFFF }
:root[data-theme=dark] label.f.bad input, :root[data-theme=dark] label.f.bad select, :root[data-theme=dark] label.f.bad textarea { border: 2px solid #C0392B !important; box-shadow: 0 0 0 4px rgba(0,0,0,0.33); background: #2D1412 }
:root[data-theme=dark] label.f .fixme { color: #E9A3A6 }
:root[data-theme=dark] header.band::before { background: linear-gradient(rgba(31,133,200,0.55), rgba(31,41,51,0.05)) }
:root[data-theme=dark] .backtop { border: 0; background: rgba(31,41,51,0.8); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.33) }
:root[data-theme=dark] .backtop:hover { background: #13191E }
:root[data-theme=dark] .pkrow { border-top: 1px solid #224659 }
:root[data-theme=dark] .pkrow:first-of-type { border-top: 0 }
:root[data-theme=dark] .pkrow .sub { color: var(--ink2) }
:root[data-theme=dark] .panel.offer { border: 2px solid #215872 }
@media (hover: none) {
  :root[data-theme=dark] .btn:hover { background: var(--act) }
  :root[data-theme=dark] .btn.light:hover { background: #132732 }
  :root[data-theme=dark] .btn.warn:hover { background: #352415 }
  :root[data-theme=dark] .backtop:hover { background: rgba(31,41,51,0.8) }
}
:root[data-theme=dark] .btn:not(:disabled):active { background: var(--act-dk) }
:root[data-theme=dark] .btn.light:not(:disabled):active { background: #122E3E }
:root[data-theme=dark] .btn.warn:not(:disabled):active { background: #422813 }
:root[data-theme=dark] .seg { background: #132732 }
:root[data-theme=dark] .seg button { border: 0; background: none; color: var(--ink) }
:root[data-theme=dark] .seg button[aria-pressed=true] { background: #13191E; box-shadow: 0 1px 4px rgba(0,0,0,0.22) }
:root[data-theme=dark] .cb input.cbx { border: 2px solid #20576D; background: #13191E; color: var(--ink); caret-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.176) }
:root[data-theme=dark] .cb input.cbx:focus, :root[data-theme=dark] .cb input.cbx:focus-visible { outline: none; border-color: #0F9ED5; background: #12252E; box-shadow: 0 0 0 4px rgba(0,0,0,0.484) }
:root[data-theme=dark] .cb input.cbx.on { border-color: #24637D; background: #12252E }
:root[data-theme=dark] .cb.full input.cbx { border-color: #4EA72E; background: #1D3113; box-shadow: 0 0 0 3px rgba(0,0,0,0.352) }
:root[data-theme=dark] label.f.bad .cb input.cbx { border-color: #C0392B; background: #2D1412 }
:root[data-theme=dark] .cbsrc { border: 0 !important }

/* the hand-made touches (tools/dark/pro.css) */
/* "Night sky, less blue" (Sam chose 8 Nov 2026), the same as the staff app */
:root[data-theme=dark] { --ink: #E4F2FA; --ink2: #A3C0D0; --act: #1E95D4; --act-dk: #4CB2EC; --line: #2C4558; --warn: #F0A070; --good: #6FD08A }
:root[data-theme=dark] body { background: radial-gradient(ellipse at 0% 0%, rgba(30,120,210,.22), rgba(30,120,210,0) 60%), radial-gradient(ellipse at 100% 100%, rgba(20,170,200,.14), rgba(20,170,200,0) 60%) #0C1218; background-attachment: fixed }
:root[data-theme=dark] header.band { background: rgba(12,18,24,.85); border-bottom: 1px solid rgba(200,220,235,.14); box-shadow: 0 3px 10px rgba(0,0,0,.35) }
:root[data-theme=dark] header.band::before { background: rgba(12,18,24,.6) }
:root[data-theme=dark] img.logo { content: url(logo-dark.svg) }
:root[data-theme=dark] .testbar { background: #3A2E0C; color: #F7DC8A }
:root[data-theme=dark] .panel { background: rgba(255,255,255,.065); border: 1px solid rgba(200,220,235,.12); box-shadow: 0 6px 18px rgba(0,0,0,.35) }
:root[data-theme=dark] .btn.light { background: rgba(255,255,255,.09); color: var(--ink) } :root[data-theme=dark] .btn.light:hover { background: rgba(255,255,255,.15) }
:root[data-theme=dark] .btn.warn { background: rgba(224,122,58,.18); color: #F7B58A }
:root[data-theme=dark] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]) { background-color: #0D1A25; color: var(--ink); border-color: #35546B }
:root[data-theme=dark] a { color: #8FD6FF }
:root[data-theme=dark] .toast { background: #E4F2FA; color: #0C1218 }
:root[data-theme=dark] .seg { background: rgba(255,255,255,.07) }
:root[data-theme=dark] .seg button[aria-pressed=true] { background: #E9F4FA; color: #0C1218; box-shadow: 0 1px 6px rgba(0,0,0,.4) }
/* six-box code entry: a bright ring round the box being typed in, a green glow when all six are in */
:root[data-theme=dark] .cb input.cbx:focus, :root[data-theme=dark] .cb input.cbx:focus-visible { box-shadow: 0 0 0 4px rgba(15,158,213,.35) }
:root[data-theme=dark] .cb.full input.cbx { box-shadow: 0 0 0 3px rgba(78,167,46,.3) }
}