/* fwdonor: the zr.ax workbench palette, type and table rules
   (zrax-isa-workbench/web/workbench.css), adapted to a scrolling page. */
:root {
  font-size: 125%;
  --void: #080706; --ink-900: #12100e; --ink-800: #1a1714; --ink-700: #241f1b; --ink-600: #2e2823;
  --ink-500: #3d352e; --ink-400: #4d443c; --ink-300: #6b6058;
  --paper-000: #ffffff; --paper-100: #f5efe8; --paper-200: #d8cec3; --paper-300: #b8ada1; --paper-400: #8c8177; --paper-500: #6b6058;
  --mag-100: #ffd0e2; --mag-300: #ff6aa5; --mag-500: #ff3d8b; --mag-700: #d92b71; --mag-900: #3d0f24;
  --sig-ok: #4ade5e; --sig-ok-dim: #12331a; --sig-warn: #ffb000; --sig-warn-dim: #33260a;
  --sig-err: #ff4d3d; --sig-err-dim: #3b1310; --sig-info: #4dc4ff; --sig-info-dim: #0e2733;
  --surface-page: var(--ink-900); --surface-panel: var(--ink-800); --surface-inset: var(--void);
  --surface-raised: var(--ink-700); --surface-hover: var(--ink-600); --surface-selected: var(--mag-900);
  --text-primary: var(--paper-100); --text-secondary: var(--paper-300); --text-muted: var(--paper-400);
  --text-disabled: var(--ink-300); --text-accent: var(--mag-500);
  --line-hairline: var(--ink-600); --line-default: var(--ink-500); --line-strong: var(--ink-300);
  --accent: var(--mag-500); --accent-hover: var(--mag-300); --accent-wash: var(--mag-900);
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Martian Mono', var(--font-mono);
}
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/dm-mono-regular.ttf?v=27f43e87ff3e12c0') format('truetype'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/dm-mono-medium.ttf?v=27f43e87ff3e12c0') format('truetype'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/martian-mono-regular.ttf?v=27f43e87ff3e12c0') format('truetype'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/martian-mono-medium.ttf?v=27f43e87ff3e12c0') format('truetype'); }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--surface-page); color: var(--text-primary); }
body { font: 400 0.8125rem/1.5 var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
a { color: var(--text-link, var(--accent)); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; border: 0.0625rem solid transparent; padding: 0.125rem 0.5rem; line-height: 1.5; }
button:hover { background: var(--surface-hover); }
button:focus-visible, a:focus-visible { outline: 0.0625rem solid var(--accent); outline-offset: -0.0625rem; }
input { background: var(--surface-inset); border: 0.0625rem solid var(--line-default); padding: 0.25rem 0.5rem; border-radius: 0; min-width: 0; }
input:focus { outline: 0.0625rem solid var(--accent); }
input:invalid { border-color: var(--sig-err); }
::selection { background: var(--accent); color: var(--void); }
.muted { color: var(--text-muted); }
.accent-text, em { color: var(--accent); font-style: normal; }
small { font-size: 0.6875rem; }
strong { font-weight: 500; }
h1, h2 { margin: 0; font-size: 0.6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.spacer { flex: 1; }

.page { min-height: 100dvh; display: flex; flex-direction: column; border: 0.0625rem solid var(--line-default); }
.bar { min-height: 2.25rem; display: flex; align-items: center; gap: 0.625rem; padding: 0 0.75rem; border-bottom: 0.0625rem solid var(--line-default); white-space: nowrap; overflow: hidden; }
.brand strong { font-family: var(--font-display); letter-spacing: -.02em; }
.brand .home { color: var(--text-primary); }
.brand .slash { color: var(--text-disabled); margin: 0 -0.25rem; }
.brand .muted { font-size: 0.6875rem; }
.main { flex: 1; width: 100%; max-width: 78rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }

.intro { display: flex; flex-direction: column; gap: 0.5rem; max-width: 52rem; }
.intro p { margin: 0; color: var(--text-secondary); }
.intro p.muted { color: var(--text-muted); font-size: 0.75rem; }

.controls { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.donor { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem; border: 0.0625rem solid var(--line-hairline); background: var(--surface-panel); }
.donor > span { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.dropzone { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-height: 7rem; padding: 1rem 1.25rem; border: 0.0625rem dashed var(--line-default); color: var(--text-secondary); text-align: left; }
.dropzone strong { font: 500 1rem var(--font-display); color: var(--text-primary); }
.dropzone small { color: var(--text-muted); }
.dropzone:hover { border-color: var(--accent); background: var(--surface-panel); }
.dropzone:disabled { opacity: .5; cursor: not-allowed; }

.error-banner { padding: 0.5rem 0.75rem; border: 0.0625rem solid var(--sig-err); background: var(--sig-err-dim); color: var(--paper-100); }
.error-banner.warn { border-color: var(--sig-warn); background: var(--sig-warn-dim); }
.error-banner button { margin-left: 0.5rem; border-color: currentColor; }

.thanks { padding: 1rem 1.25rem; border: 0.0625rem solid var(--accent); background: var(--accent-wash); display: flex; flex-direction: column; gap: 0.25rem; }
.thanks strong { font: 500 1.125rem var(--font-display); color: var(--paper-000); }
.thanks span { color: var(--paper-200); }

.results { display: flex; flex-direction: column; border: 0.0625rem solid var(--line-default); background: var(--surface-page); min-width: 0; }
.results-bar { display: flex; align-items: baseline; gap: 1rem; padding: 0.5rem 0.75rem; border-bottom: 0.0625rem solid var(--line-hairline); flex-wrap: wrap; }
.results-bar button { font-size: 0.6875rem; color: var(--text-secondary); }
.tallies { font-size: 0.6875rem; color: var(--text-muted); display: flex; gap: 0.875rem; flex-wrap: wrap; }
.tallies b { font-weight: 400; color: var(--text-secondary); }
#progress { display: block; width: 100%; height: 0.1875rem; appearance: none; border: 0; background: var(--surface-inset); accent-color: var(--accent); }
#progress::-webkit-progress-bar { background: var(--surface-inset); }
#progress::-webkit-progress-value { background: var(--accent); }
#progress::-moz-progress-bar { background: var(--accent); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 56rem; border-collapse: collapse; white-space: nowrap; }
.table th { text-align: left; font-weight: 400; font-size: 0.6875rem; color: var(--text-muted); background: var(--surface-panel); position: sticky; top: 0; }
.table th, .table td { padding: 0.375rem 0.75rem; border-bottom: 0.0625rem solid var(--line-hairline); vertical-align: top; }
.table tbody tr:hover { background: var(--surface-hover); }
.table .num { text-align: right; }
.table .st { width: 2.5rem; color: var(--text-disabled); }
.table .name { display: block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.table .sub { display: block; font-size: 0.6875rem; color: var(--text-muted); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.state-col { width: 17rem; }
.state { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 15rem; }
.state small { color: var(--text-muted); white-space: normal; max-width: 17rem; }
.meter { width: 100%; height: 0.1875rem; background: var(--surface-inset); }
.meter > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }

tr.queued .st, tr.queued .state { color: var(--text-disabled); }
tr.working .st, tr.working .state { color: var(--accent); }
tr.ok .st, tr.ok .state { color: var(--sig-ok); }
tr.dup .st, tr.dup .state { color: var(--sig-info); }
tr.skip td { color: var(--text-disabled); }
tr.skip .state small { color: var(--text-disabled); }
tr.bad .st, tr.bad .state { color: var(--sig-err); }

.status-bar { display: flex; align-items: center; min-height: 1.375rem; border-top: 0.0625rem solid var(--line-default); white-space: nowrap; overflow: hidden; font-size: 0.6875rem; }
.status-bar > span:not(.spacer) { padding: 0 0.5rem; border-right: 0.0625rem solid var(--line-default); overflow: hidden; text-overflow: ellipsis; }
.status-bar > span:last-child { border-right: 0; }
.status-mode { background: var(--accent); color: var(--void); flex: none; }

.drag-overlay { position: fixed; inset: 0; background: rgba(8, 7, 6, .86); padding: 0.75rem; z-index: 30; pointer-events: none; display: flex; }
.drag-overlay > div { border: 0.0625rem dashed var(--accent); padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.375rem; }
.drag-overlay strong { font: 500 1.25rem var(--font-display); }

@media (max-width: 760px) {
  :root { font-size: 112.5%; }
  .controls { grid-template-columns: 1fr; }
  .main { padding: 1rem 0.5rem 1.5rem; }
}