:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1d2433;
  --dim: #6a7385;
  --line: #dde1e8;
  --brand: #12355b;
  --brand-ink: #ffffff;
  --accent: #1f6feb;
  --accent-soft: #e7f0ff;
  --ok: #1a7f37;
  --warn-bg: #fff4d6;
  --warn-ink: #6b4e00;
  --err-bg: #fde8e8;
  --err-ink: #9b1c1c;
  --void: #b42318;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font: system-ui, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  color-scheme: light;
}
/* Themes (header picker, public/theme.js). "Modern" = no data-theme attribute: follows Windows light/dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f141b; --card: #171d26; --ink: #e5e9f0; --dim: #93a0b4; --line: #2a3340;
    --brand: #0b2440; --accent: #58a6ff; --accent-soft: #14263f;
    --warn-bg: #3a2f0b; --warn-ink: #f5d77a; --err-bg: #3b1515; --err-ink: #ffb4b4; --void: #ff8a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141b; --card: #171d26; --ink: #e5e9f0; --dim: #93a0b4; --line: #2a3340;
  --brand: #0b2440; --accent: #58a6ff; --accent-soft: #14263f;
  --warn-bg: #3a2f0b; --warn-ink: #f5d77a; --err-bg: #3b1515; --err-ink: #ffb4b4; --void: #ff8a80;
  color-scheme: dark;
}
/* Classic 5250: green on black, all monospace, square corners */
:root[data-theme="classic"] {
  --bg: #000000; --card: #000000; --ink: #33ff66; --dim: #2fbf5a; --line: #1d4a2a;
  --brand: #001400; --brand-ink: #33ff66; --accent: #40e0ff; --accent-soft: #052a33; --ok: #ffffff;
  --warn-bg: #2a2a00; --warn-ink: #ffff55; --err-bg: #2a0000; --err-ink: #ff5555; --void: #ff5555;
  --font: "Cascadia Mono", Consolas, "IBM Plex Mono", monospace;
  --shadow: none;
  color-scheme: dark;
}
/* Warm: soft paper look, easy on the eyes for long days */
:root[data-theme="warm"] {
  --bg: #f3efe6; --card: #fffdf8; --ink: #2b2620; --dim: #7a6f60; --line: #e2d9c8;
  --brand: #4a3426; --brand-ink: #fff7ec; --accent: #b4532a; --accent-soft: #f7e6da; --ok: #4d7c2a;
  color-scheme: light;
}
/* High contrast: black on white, strong borders, bigger text */
:root[data-theme="contrast"] {
  --bg: #ffffff; --card: #ffffff; --ink: #000000; --dim: #222222; --line: #000000;
  --brand: #000000; --brand-ink: #ffffff; --accent: #0033cc; --accent-soft: #ffff66; --ok: #005500;
  --warn-bg: #ffff66; --warn-ink: #000000; --err-bg: #ffdddd; --err-ink: #990000; --void: #cc0000;
  --shadow: none;
  color-scheme: light;
}
/* ---- Easy on the eyes ---- */
/* Night Shift: warm, dim, low blue light for evening and night shifts */
:root[data-theme="nightshift"] {
  --bg: #1d1915; --card: #26211b; --ink: #e8d9c2; --dim: #a8977e; --line: #3b3329;
  --brand: #2e2418; --brand-ink: #f0ddbf; --accent: #e0a458; --accent-soft: #3a2d1d; --ok: #9cbf6e;
  --warn-bg: #3a2f14; --warn-ink: #f2cf86; --err-bg: #3f1d17; --err-ink: #f0a594; --void: #f08a74;
  color-scheme: dark;
}
/* Sepia: paper-like, soft contrast for long reading */
:root[data-theme="sepia"] {
  --bg: #efe6d2; --card: #f8f1e1; --ink: #3d3326; --dim: #7b6c56; --line: #dccdb0;
  --brand: #5b4632; --brand-ink: #fbf3e3; --accent: #8a5a2b; --accent-soft: #eadcc0; --ok: #5d7a34;
  color-scheme: light;
}
/* Sage: muted green-grey, calm in daylight */
:root[data-theme="sage"] {
  --bg: #e9eee8; --card: #f6f8f4; --ink: #26332b; --dim: #66756b; --line: #d2dccf;
  --brand: #3f5a4a; --brand-ink: #f2f7f2; --accent: #3f7a5c; --accent-soft: #dcebe1; --ok: #3f7a5c;
  color-scheme: light;
}

/* ---- Pastel ---- */
:root[data-theme="pastel"] {
  --bg: #f6f2fb; --card: #ffffff; --ink: #3b3550; --dim: #8a83a3; --line: #e6def3;
  --brand: #b9a7e8; --brand-ink: #2c2445; --accent: #7a64c9; --accent-soft: #efe9fb; --ok: #4f9c84;
  --warn-bg: #fff3d9; --warn-ink: #7a5a12; --err-bg: #fde4ea; --err-ink: #a3324f; --void: #c2456a;
  color-scheme: light;
}
:root[data-theme="mint"] {
  --bg: #eefaf5; --card: #ffffff; --ink: #24443a; --dim: #6f9286; --line: #d3eee2;
  --brand: #9fdcc4; --brand-ink: #173a2f; --accent: #2f9a76; --accent-soft: #dcf4ea; --ok: #2f9a76;
  color-scheme: light;
}
:root[data-theme="peach"] {
  --bg: #fff4ee; --card: #ffffff; --ink: #4a3329; --dim: #a07f70; --line: #f6dfd2;
  --brand: #f7c4a8; --brand-ink: #4a2a1b; --accent: #d9734a; --accent-soft: #fde8dc; --ok: #5c9a62;
  color-scheme: light;
}
:root[data-theme="pastel"] .bar .tool, :root[data-theme="mint"] .bar .tool, :root[data-theme="peach"] .bar .tool {
  background: rgba(255,255,255,.45); border-color: rgba(0,0,0,.12);
}

/* ---- Fun ---- */
/* Kingpin Road: Kingpin black, red and white, with fleet photos from example.com behind frosted cards.
   theme.js picks photo 1-3 per page (data-photo); without one it falls back to the drawn rig (bg-truck.svg). */
:root[data-theme="highway"] {
  --bg: #f4f4f4; --card: rgba(255,255,255,.9); --ink: #111111; --dim: #555555; --line: rgba(0,0,0,.14);
  --brand: rgba(10,10,10,.94); --brand-ink: #ffffff; --accent: #c8102e; --accent-soft: rgba(200,16,46,.09); --ok: #1a7f37;
  --void: #c8102e; --err-ink: #a30d25;
  --page-bg: linear-gradient(160deg, #111 0%, #3a0d12 60%, #8a1020 120%) fixed, #1a1a1a;
  --shadow: 0 8px 28px rgba(0,0,0,.35);
  color-scheme: light;
}
:root[data-theme="highway"][data-photo="1"] { --page-bg: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45)) fixed, #1a1a1a; }
:root[data-theme="highway"][data-photo="2"] { --page-bg: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45)) fixed, #1a1a1a; }
:root[data-theme="highway"][data-photo="3"] { --page-bg: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.45)) fixed, #1a1a1a; }
:root[data-theme="highway"] .bar { border-bottom: 4px solid #c8102e; }
:root[data-theme="highway"] button.primary { background: #c8102e; }
:root[data-theme="highway"] .logo, :root[data-theme="highway"] .logo-lg { filter: hue-rotate(140deg) saturate(1.4); }
:root[data-theme="highway"] .num, :root[data-theme="highway"] .code { color: #c8102e; }
:root[data-theme="highway"] .msg { background: rgba(255,255,255,.92); color: #111; border-left: 4px solid #c8102e; }
:root[data-theme="highway"] .card { backdrop-filter: blur(6px); }
:root[data-theme="highway"] .keys { background: rgba(255,255,255,.9); backdrop-filter: blur(6px); }

/* Lone Star: Texas navy, red and white with a faint star field */
:root[data-theme="lonestar"] {
  --bg: #f5f6fa; --card: #ffffff; --ink: #0d1b3e; --dim: #5a6585; --line: #dde1ec;
  --brand: #002868; --brand-ink: #ffffff; --accent: #bf0a30; --accent-soft: #fbe7eb; --ok: #1a7f37;
  --page-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 42l5 15h16l-13 9 5 15-13-9-13 9 5-15-13-9h16z' fill='%23002868' fill-opacity='.05'/%3E%3C/svg%3E"), #f5f6fa;
  color-scheme: light;
}
:root[data-theme="lonestar"] .bar { border-bottom: 5px solid #bf0a30; box-shadow: 0 5px 0 #fff, 0 10px 0 #002868; }

/* Synthwave: neon highway at midnight */
:root[data-theme="synthwave"] {
  --bg: #1a0f2e; --card: rgba(30,16,56,.88); --ink: #f3e9ff; --dim: #b49bd8; --line: #4a2c78;
  --brand: #12081f; --brand-ink: #ff7ad9; --accent: #00e5ff; --accent-soft: #2a1650; --ok: #6dffb3;
  --warn-bg: #3b1d4a; --warn-ink: #ffd27a; --err-bg: #4a1630; --err-ink: #ff8fb3; --void: #ff5c8a;
  --page-bg: linear-gradient(180deg, #12081f 0%, #2b0f4c 55%, #ff3d8b 120%) fixed;
  --shadow: 0 0 18px rgba(255,61,139,.25);
  color-scheme: dark;
}
:root[data-theme="synthwave"] h1 { text-shadow: 0 0 10px rgba(255,122,217,.6); }
:root[data-theme="synthwave"] .bar { border-bottom: 2px solid #ff3d8b; box-shadow: 0 0 16px #ff3d8b; }
:root[data-theme="synthwave"] button.primary { background: linear-gradient(90deg, #ff3d8b, #8a4dff); }

/* Amber terminal: the other classic monitor */
:root[data-theme="amber"] {
  --bg: #0d0a05; --card: #0d0a05; --ink: #ffb000; --dim: #c98a00; --line: #4a3300;
  --brand: #1a1205; --brand-ink: #ffb000; --accent: #ffd27a; --accent-soft: #2b1e05; --ok: #ffe39e;
  --warn-bg: #2b2205; --warn-ink: #ffd27a; --err-bg: #2b0f05; --err-ink: #ff7a3d; --void: #ff7a3d;
  --font: "Cascadia Mono", Consolas, monospace;
  --shadow: none;
  color-scheme: dark;
}
:root[data-theme="amber"] *, :root[data-theme="amber"] *::before { border-radius: 0 !important; }
:root[data-theme="amber"] input { background: #000; color: #ffb000; border-color: #ffb000; }
:root[data-theme="amber"] button.primary { color: #000; }

/* Ocean: deep blue with teal */
:root[data-theme="ocean"] {
  --bg: #e8f3f8; --card: #ffffff; --ink: #0f2e40; --dim: #557488; --line: #cfe3ec;
  --brand: #0b4f6c; --brand-ink: #ffffff; --accent: #0a8ea0; --accent-soft: #dcf1f4; --ok: #1a8a5a;
  --page-bg: linear-gradient(180deg, #e8f3f8 0%, #d4ebf3 100%) fixed;
  color-scheme: light;
}

/* Rodeo: denim and saddle leather */
:root[data-theme="rodeo"] {
  --bg: #f3ece2; --card: #fffaf3; --ink: #2a2118; --dim: #7d6a55; --line: #e3d5c1;
  --brand: #2f4b6e; --brand-ink: #fdf6ea; --accent: #9a5b26; --accent-soft: #f2e2cf; --ok: #4f7a2f;
  color-scheme: light;
}
:root[data-theme="rodeo"] .bar { border-bottom: 4px solid #9a5b26; }

:root[data-theme="classic"] *, :root[data-theme="classic"] *::before { border-radius: 0 !important; }
:root[data-theme="classic"] input { background: #000; color: #33ff66; border-color: #33ff66; }
:root[data-theme="classic"] button.primary { color: #000; }
:root[data-theme="contrast"] body { font-size: 1.0625rem; }
:root[data-theme="contrast"] .card, :root[data-theme="contrast"] .party { border-width: 2px; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page-bg, var(--bg)); color: var(--ink);
  font: .9375rem/1.45 var(--font); /* rem, so A-/A+ (html font-size) scales everything */
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); }
main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 16px 90px; }

.bar {
  background: var(--brand); color: var(--brand-ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; flex-wrap: wrap;
}
.bar-left, .bar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bar-mid { flex: 1 1 360px; justify-content: center; flex-wrap: wrap; }
.bar-right { gap: 10px; }
.brand { font-weight: 700; letter-spacing: .02em; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; font-size: 1.05rem; }
.logo { width: 1.35em; height: 1.35em; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.login-brand b { display: block; font-size: 1.5rem; letter-spacing: .02em; }
.login-brand span { color: var(--dim); font-size: .85rem; }
.logo-lg { width: 44px; height: 44px; }
.co { opacity: .85; }
.who { font-family: var(--mono); }
/* User menu (click the user ID) */
.who-pop { width: min(300px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.who-head { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.who-head b { display: block; }
.who-head span { font-size: .8rem; color: var(--dim); font-family: var(--mono); }
.who-list { list-style: none; margin: 0; padding: 6px; }
.who-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 6px; padding: 6px 8px; color: var(--ink);
  font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer;
}
.who-item:hover, .who-item:focus-visible { background: var(--accent-soft); outline: none; }
.who-item .k { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.who-keys { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 4px 8px 6px; font-size: .78rem; }
.who-keys[hidden] { display: none; }
.who-keys dt { font-family: var(--mono); color: var(--accent); }
.who-keys dd { margin: 0; color: var(--dim); }
.who-off { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); }
.who-off button { width: 100%; }
.clock { opacity: .8; font-family: var(--mono); }
.bar .link { color: var(--brand-ink); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; box-shadow: var(--shadow);
}

/* Header tools: theme picker + notepad */
.tools { display: flex; align-items: center; gap: 8px; position: relative; }
.tool {
  background: rgba(255,255,255,.12); color: var(--brand-ink); border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: 4px 10px; font: inherit; font-size: .88rem; cursor: pointer;
}
.tool:hover, .tool[aria-expanded="true"] { background: rgba(255,255,255,.22); }
select.tool { appearance: auto; }
select.tool option { color: #000; background: #fff; }
.popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(380px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: 12px;
}
.popover[hidden] { display: none; }
.popover h3 { margin: 0 0 8px; font-size: .95rem; }
.popover textarea {
  width: 100%; min-height: 9em; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink);
  font: .875rem/1.4 var(--mono);
}
.popover textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.popover .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.popover .status { font-size: .8rem; color: var(--dim); }
.popover .tool { color: var(--ink); background: var(--bg); border-color: var(--line); }
.popover .tool:hover { background: var(--accent-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.popover .warnline { font-size: .78rem; color: var(--dim); margin: 6px 0 0; }

/* Go box */
.gobox { display: flex; gap: 4px; margin: 0; }
.gobox input {
  width: 15em; margin: 0; padding: 4px 10px; font-size: .88rem;
  background: rgba(255,255,255,.95); color: #1d2433; border: 1px solid rgba(255,255,255,.4);
}
:root[data-theme="classic"] .gobox input { background: #000; color: #33ff66; }

/* Shortcuts list */
.popover h3 + .sc-list { margin-bottom: 12px; }
.sc-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; }
.sc-list li.dim { font-size: .85rem; padding: 4px 6px; }
button.sc-go {
  display: flex; gap: 10px; width: 100%; text-align: left; align-items: baseline;
  background: none; border: 0; border-radius: 6px; padding: 5px 6px; color: var(--ink);
}
button.sc-go:hover, button.sc-go:focus-visible { background: var(--accent-soft); outline: none; }
.sc-path { font-family: var(--mono); font-size: .8rem; color: var(--accent); min-width: 6.5em; }

/* Menu favorite stars */
ol.menu li { display: flex; align-items: center; }
ol.menu li form { flex: 1; min-width: 0; }
button.star {
  background: none; border: 0; color: var(--dim); font-size: 1.05rem; line-height: 1;
  padding: 4px 6px; border-radius: 6px; opacity: .35;
}
ol.menu li:hover button.star, button.star:focus-visible, button.star.on { opacity: 1; }
button.star.on { color: #e3a008; }
button.star:hover { background: var(--accent-soft); }
.star-space { width: 30px; flex: none; }

/* Idle countdown */
.idle { font-family: var(--mono); font-size: .85rem; opacity: .8; }
.idle.soon { color: #ffd166; opacity: 1; font-weight: 700; }
.idle-warn {
  position: sticky; top: 0; z-index: 30; display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 10px 16px; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--line);
}
.idle-warn[hidden] { display: none; }

/* Inquiry Print / Copy */
.actions { margin-left: auto; display: flex; gap: 6px; }
.btn2 {
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; font-size: .85rem;
}
.btn2:hover { background: var(--accent-soft); }

/* ---------- Split screen (desk page) ---------- */
body.desk-page { height: 100vh; overflow: hidden; }
body.desk-page main { max-width: none; padding: 4px; display: flex; flex-direction: column; min-height: 0; }
/* Everything in one header row: shorter labels, no company name / date */
body.desk-page .bar { padding: 5px 10px; gap: 8px; flex-wrap: nowrap; }
body.desk-page .bar-mid { flex: 1 1 auto; gap: 6px; }
body.desk-page .co, body.desk-page .clock, body.desk-page .lbl { display: none; }
body.desk-page .gobox input { width: 13em; }
.hgroup { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-left: 1px solid rgba(255,255,255,.25); }
.hgroup .tool { padding: 3px 7px; }
.lay[aria-checked="true"] { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.7); }
.act-no {
  font-family: var(--mono); font-weight: 700; min-width: 1.6em; height: 1.6em; display: grid; place-items: center;
  border-radius: 4px; background: var(--accent); color: #fff; margin-right: 2px;
}
.ico { display: inline-grid; width: 20px; height: 14px; gap: 2px; vertical-align: middle; }
.ico i { background: currentColor; opacity: .55; border-radius: 1px; }
.ico.l1 { grid-template: 1fr / 1fr; }
.ico.l2 { grid-template: 1fr / 1fr 1fr; }
.ico.l3 { grid-template: 1fr 1fr / 1fr 1fr; }
.ico.l3 i:first-child { grid-column: 1 / 3; }
.ico.l4 { grid-template: 1fr 1fr / 1fr 1fr; }

.desk { flex: 1; min-height: 0; display: grid; gap: 4px; }
.desk[data-layout="1"] { grid-template: "a" 1fr / 1fr; }
.desk[data-layout="2"] { grid-template: "a b" 1fr / 1fr 1fr; }
.desk[data-layout="3"] { grid-template: "a a" 1fr "b c" 1fr / 1fr 1fr; }
.desk[data-layout="4"] { grid-template: "a b" 1fr "c d" 1fr / 1fr 1fr; }
.pane[data-pane="1"] { grid-area: a; }
.pane[data-pane="2"] { grid-area: b; }
.pane[data-pane="3"] { grid-area: c; }
.pane[data-pane="4"] { grid-area: d; }
.desk[data-layout="1"] .pane:nth-child(n+2),
.desk[data-layout="2"] .pane:nth-child(n+3),
.desk[data-layout="3"] .pane:nth-child(n+4) { display: none; }
.desk.maxed { grid-template: "m" 1fr / 1fr; }
.desk.maxed .pane { display: none; }
.desk.maxed .pane.max { display: flex; grid-area: m; }

.pane {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border: 2px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card);
}
.pane.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Screen number: a small badge in the corner instead of a bar */
.pane-no {
  position: absolute; top: 4px; right: 4px; z-index: 2; cursor: pointer;
  font-family: var(--mono); font-weight: 700; font-size: .75rem; width: 1.7em; height: 1.7em;
  display: grid; place-items: center; border-radius: 4px;
  background: var(--line); color: var(--ink); opacity: .75;
}
.pane.active .pane-no { background: var(--accent); color: #fff; opacity: 1; }
.pane iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }

/* Pages inside a screen: no header, tighter spacing, plain background (the desk shows the picture once) */
body.in-pane { background: var(--bg); }
body.in-pane main { max-width: none; padding: 6px 8px 52px; }
body.in-pane .card { padding: 10px 12px; border-radius: 6px; }
body.in-pane .screen-head { margin-bottom: 8px; padding-right: 26px; }
body.in-pane .screen-head h1 { font-size: 1.1rem; }
body.in-pane .optline { margin: 0 0 8px; }
body.in-pane .keys { padding: 4px 8px; gap: 6px; }
body.in-pane .fkey { padding: 3px 9px; font-size: .82rem; }
body.in-pane ol.menu { columns: 2 280px; }
body.in-pane button.opt { padding: 4px 8px; }

@media (max-width: 1100px) {
  body.desk-page .bar { flex-wrap: wrap; }
}
@media (max-width: 800px) {
  body.desk-page { height: auto; overflow: auto; }
  .desk, .desk[data-layout] { display: flex; flex-direction: column; }
  .desk .pane { min-height: 70vh; }
}

@media print {
  :root { --bg: #fff; --card: #fff; --ink: #000; --dim: #444; --line: #999; --accent: #000; --accent-soft: #fff; }
  .bar .tools, .bar .link, .idle, .idle-warn, .keys, .actions, .msg, .search button, .hint { display: none !important; }
  .bar { background: #fff; color: #000; border-bottom: 2px solid #000; padding: 4px 0; }
  main { padding: 8px 0; max-width: none; }
  .card { border: 0; padding: 0; box-shadow: none; }
  .tablewrap { overflow: visible; border: 0; }
  .grid tbody tr[data-href] { cursor: auto; }
}
.card.narrow { max-width: 440px; margin: 40px auto; }
h1 { font-size: 1.35rem; margin: 0 0 6px; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin: 0 0 6px; }
.hint { color: var(--dim); font-size: .9rem; }
.dim { color: var(--dim); }

.screen-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.screen-head h1 { margin: 0; }
.menu-id { font-family: var(--mono); font-size: .8rem; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.crumbs { margin-left: auto; font-family: var(--mono); font-size: .85rem; color: var(--dim); }
.pill { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 600; }
.pill.void { background: var(--err-bg); color: var(--void); }

label { display: block; font-size: .85rem; color: var(--dim); margin: 0 0 12px; }
input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink);
  font: .9375rem var(--mono); text-transform: uppercase;
}
input[type=password] { text-transform: none; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button { font: inherit; cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 9px 18px; font-weight: 600; }
button.link { background: none; border: 0; padding: 0; text-decoration: underline; }
form.inline { display: inline; margin: 0; }

.msg { background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.err { background: var(--err-bg); color: var(--err-ink); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }

/* Menu */
.optline { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.optline label { margin: 0; white-space: nowrap; color: var(--ink); font-weight: 600; }
.optline input { width: 5.5em; margin: 0; text-align: center; font-size: 1.1rem; }
ol.menu { list-style: none; margin: 0; padding: 0; columns: 2 340px; column-gap: 28px; }
ol.menu li { break-inside: avoid; }
ol.menu li.heading { font-weight: 700; color: var(--dim); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; padding: 12px 8px 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
ol.menu li form { display: block; }
button.opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 6px; padding: 6px 8px; color: var(--ink);
}
button.opt:hover, button.opt:focus-visible { background: var(--accent-soft); outline: none; }
.num { font-family: var(--mono); font-weight: 700; color: var(--accent); min-width: 2.2em; text-align: right; }
.txt { flex: 1; }
.tag { font-size: .72rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--dim); white-space: nowrap; }
.tag.web { border-color: var(--ok); color: var(--ok); font-weight: 700; }
.tag.dim { opacity: .7; }
.tag.lock { border: 0; }
li.green .txt { color: var(--dim); }

/* Freight bill */
.search { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.search label { margin: 0; }
.search input { width: auto; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.grid { border-collapse: collapse; width: 100%; font-size: .92rem; }
.grid th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); background: var(--bg); }
.grid th, .grid td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid tbody tr[data-href] { cursor: pointer; }
.grid tbody tr[data-href]:hover { background: var(--accent-soft); }
.grid tr.void td { color: var(--void); }
.grid tfoot td { font-weight: 700; border-bottom: 0; }
.r, .grid th.r { text-align: right; }
.grid td.num { font-family: var(--mono); color: var(--ink); min-width: 0; text-align: right; font-weight: 400; }
.neg { color: var(--void); }
.total { font-size: 1.05rem; }

dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; margin: 0 0 16px; }
dl.facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
dl.facts dd { margin: 0; font-family: var(--mono); }
dl.facts.small { margin-top: 4px; }
.parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.party { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.party address { font-style: normal; font-family: var(--mono); font-size: .88rem; }
.code { font-family: var(--mono); color: var(--accent); text-transform: none; letter-spacing: 0; }
dl.mini { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-family: var(--mono); font-size: .9rem; }
dl.mini dt { color: var(--dim); }
dl.mini dd { margin: 0; }

/* Order history (DISHIS) */
h2.section { font-size: .85rem; margin: 22px 0 8px; color: var(--ink); text-transform: uppercase; letter-spacing: .05em; }
.grid td.mono, .mono { font-family: var(--mono); }
.grid td.wrap { white-space: normal; min-width: 18em; }
.tag.warn { border-color: var(--void); color: var(--void); font-weight: 700; text-transform: none; letter-spacing: 0; }
.disp { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.disp-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.disp[open] > .disp-head { margin-bottom: 8px; }
/* Accordion (comments, dispatches): <details>/<summary> with a ▸ / ▾ marker */
.acc-bar { display: flex; gap: 8px; justify-content: flex-end; margin: 18px 0 -8px; }
details.acc > summary, details.disp > summary { cursor: pointer; list-style: none; }
details.acc > summary::-webkit-details-marker, details.disp > summary::-webkit-details-marker { display: none; }
details.acc > summary h2 { display: inline-block; }
details.acc > summary::before, details.disp > summary::before { content: '▸'; color: var(--accent); font-family: var(--mono); margin-right: 6px; }
details.acc[open] > summary::before, details.disp[open] > summary::before { content: '▾'; }
details.acc > summary:hover h2, details.disp > summary:hover b { color: var(--accent); }
.sum-calls { margin-left: auto; font-size: .85rem; }
@media print { .acc-bar, .disp-keys { display: none; } }
.disp-keys { display: flex; gap: 6px; justify-content: flex-end; margin: -2px 0 6px; }
.disp-keys .btn2 b, .fkey b { font-family: var(--mono); }
/* DISHIS function-key screens: SO0002 stopoffs, ORDINS, RLYMNT */
table.stops tr.stop td { border-top: 2px solid var(--line); font-weight: 600; }
table.stops tr.sub th { font-size: .7rem; }
table.stops tr.sub td { font-size: .85rem; }
tr.hl-ri td { background: var(--accent-soft); }
tr.hl-yellow td { background: color-mix(in srgb, #e6c200 22%, transparent); }
tr.hl-red td { background: color-mix(in srgb, var(--void) 18%, transparent); }
.st-pending, tr.st-pending td { color: #c2185b; }
.st-sent, tr.st-sent td { color: #1e63c4; }
.st-released, tr.st-released td { color: var(--ok); }
.st-nosend, tr.st-nosend td { color: #00838f; }
.st-missing, tr.st-missing td { color: var(--dim); font-style: italic; }
.legend span { margin-right: 12px; white-space: nowrap; }
tr.grp td { color: #00838f; }
tr.relay-row td { color: #00838f; font-weight: 600; }
.route { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 10px; font-family: var(--mono); font-size: .85rem; }
.route .stop { border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; background: var(--bg); }
.route .stop b { color: var(--accent); }
.route .arrow { color: var(--dim); }
table.calls tr.call-D td, table.calls tr.call-L td, table.calls tr.call-E td, table.calls tr.call-T td { font-weight: 600; }
table.calls tr.call-E td:nth-child(4), table.calls tr.call-T td:nth-child(4) { color: var(--ok); }

/* Function-key bar */
.keys {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card); border-top: 1px solid var(--line);
  display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; justify-content: center;
}
.fkey {
  display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px;
  background: var(--bg); color: var(--ink); text-decoration: none; font-size: .9rem;
}
.fkey b { font-family: var(--mono); color: var(--accent); }

@media (max-width: 600px) {
  .crumbs { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .search label { flex: 1 1 140px; }
}