/* FuelBoard. Plain, readable on a phone in a truck. */
/* Western Direct's colours since 2026-10-20 (Indigo's logo guide, June 2021): Royal #204E8E for the
   chrome, Flame #F26600 for the one thing to press. Green is kept for "verified" alone, red for "not". */
:root {
  --ink: #1a1f2b; --muted: #5c6677; --line: #d6dce6; --bg: #f4f6f9; --card: #ffffff;
  --brand: #204E8E; --brand-ink: #ffffff; --accent: #F26600; --accent-ink: #ffffff;
  --ok: #2f7d4f; --warn: #b7791f; --bad: #b3261e; --amber: #fff4d6; --up: #b3261e; --down: #2f7d4f;
  --soft: #e6eaf1; --soft-2: #f1f4f8; --tint: #e8eef8;
  --def: #cfe3f5; --def-ink: #123a63;   /* DEF chip: light blue (Steve, Oct 20); not a brand colour, not green */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
/* Exo 2 (the brand face) for headings and the words that have to hit someone in the face; numbers stay in the system face for its tabular figures. */
h1, h2, .flag .word, .daycol .head b, #post-card .postline .when b, .lookup .cust b { font-family: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1180px; margin: 0 auto; padding: 16px; }
.foot { max-width: 1180px; margin: 24px auto 0; padding: 12px 16px 20px; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); }
.foot a { color: inherit; }
h1 { font-size: 1.35rem; margin: 6px 0 12px; }
h1 .muted { font-size: .95rem; font-weight: normal; margin-left: 8px; }
h2 { font-size: 1.05rem; margin: 16px 0 8px; }
.muted { color: var(--muted); }
.error { color: var(--bad); }
.pill { font-size: .7rem; padding: 2px 7px; border-radius: 999px; background: var(--amber); color: #6b4a00; vertical-align: middle; font-weight: 600; }
a { color: var(--brand); }

/* Top bar (2026-10-19): two tabs everyone uses, an Office menu, and the person's own menu. One row on a phone. */
/* The staging copy (STAGING=1 on the server) wears a red band on every screen, login included, so nobody quotes from it. */
#staging-band { background: var(--bad); color: #fff; text-align: center; font-weight: 800; letter-spacing: .04em; padding: 6px 12px; font-size: .9rem; }
#topbar { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--brand); color: var(--brand-ink); }
#topbar a.brand { color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 0; opacity: 1; background: none; display: inline-flex; align-items: center; gap: 8px; }
/* The wordmark from the logo (blue "Fuel", orange "Board") on a white tab so it reads on the royal bar. */
#topbar a.brand img { display: block; height: 24px; width: auto; background: #fff; padding: 4px 8px; border-radius: 6px; box-sizing: content-box; }
#topbar .brand small { font-weight: 400; opacity: .8; margin-left: 6px; }
#topbar nav { display: flex; gap: 2px; align-items: center; }
#topbar a, #topbar summary { color: inherit; text-decoration: none; padding: 6px 10px; border-radius: 6px; opacity: .85; cursor: pointer; white-space: nowrap; list-style: none; }
#topbar summary::-webkit-details-marker { display: none; }
#topbar summary::after { content: " ▾"; font-size: .8em; opacity: .8; }
#topbar a.active, #topbar a:hover, #topbar summary.active, #topbar summary:hover, #topbar details[open] > summary { background: rgba(255,255,255,.15); opacity: 1; }
#topbar details.menu { position: relative; }
#topbar details.menu.me { margin-left: auto; }
/* Office logins on a phone: five tabs do not fit beside the wordmark and the name, so app.js
   measures the bar and, only when it overflows, the tabs take a row of their own. */
#topbar.wrap { flex-wrap: wrap; row-gap: 2px; }
#topbar.wrap nav { order: 3; width: 100%; flex-shrink: 1; justify-content: flex-start; }
#topbar details.menu > div { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 190px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 6px 24px rgba(26, 31, 43, .18); display: flex; flex-direction: column; }
#topbar details.menu.me > div { left: auto; right: 0; }
#topbar details.menu > div a, #topbar details.menu > div button.link { display: block; text-align: left; padding: 9px 12px; border-radius: 6px; opacity: 1; color: var(--ink); text-decoration: none; font: inherit; width: 100%; }
#topbar details.menu > div a.active { background: var(--tint); color: var(--brand); font-weight: 600; }
#topbar details.menu > div a:hover, #topbar details.menu > div button.link:hover { background: var(--soft-2); }
#topbar details.menu > div .pill { margin-left: 6px; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
#topbar details.menu > div button.link { text-decoration: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.login-wrap { max-width: 360px; margin: 48px auto 0; }
.login-wrap h1 { text-align: center; margin-bottom: 4px; }
/* The logo on the login screen (2026-10-18): a transparent PNG, blue and orange, replaces the word. */
.login-wrap h1.logo { margin: 0 auto 6px; padding: 0; line-height: 0; max-width: 300px; }
.login-wrap h1.logo img { display: block; width: 100%; height: auto; }
.login-wrap > p { text-align: center; margin: 0 0 18px; }
.login-wrap .card { padding: 20px; }
.login-wrap .card label { display: block; margin-bottom: 14px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.login-wrap .card input { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font-size: 1rem; }
.login-wrap .card button { width: 100%; padding: 11px; font-size: 1rem; margin-top: 4px; }
.login-wrap .card .error { margin: 10px 0 0; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; }
.grid label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.grid label.check { flex-direction: row; align-items: center; gap: 8px; }
.grid .wide { grid-column: 1 / -1; }
.grid .actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.grid p.muted { margin: 0; font-size: .85rem; }
.sub { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
input, select { font: inherit; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
button { font: inherit; padding: 8px 14px; border: 0; border-radius: 6px; background: var(--brand); color: var(--brand-ink); cursor: pointer; }
button[type=button], .tabs button { background: var(--soft); color: var(--ink); }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button.active { background: var(--brand); color: #fff; }
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar h1 { margin: 0; }
label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--muted); }
.row-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
details.card summary { cursor: pointer; color: var(--muted); }
details.card[open] summary { margin-bottom: 10px; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cols-2 > form.grid { align-content: start; }
body.viewer .admin-only { display: none; }

#flash { position: sticky; top: 8px; z-index: 5; padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; background: var(--brand); color: #fff; }
#flash.bad { background: var(--bad); }
.warnings { background: var(--amber); border: 1px solid #e8d49a; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem; }
.warnings p { margin: 2px 0; }

/* Board */
.fuel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.fuel h2 { margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.fuel h2 small { color: var(--muted); font-weight: normal; font-size: .85rem; }
/* The base strip (Oct 28): what the day is built on, what the other base would be, and the switch. Amber when the supply average is on. */
.base-strip { background: var(--soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: .9rem; }
.base-strip.on { background: var(--amber); border-color: #e8d49a; }
.base-strip .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.base-strip .text { min-width: 0; flex: 1 1 320px; }
.base-strip .others { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.base-strip .others b { color: var(--ink); }
.base-strip details.help p + p { margin-top: 6px; }
.base-strip .tomorrow-note { font-size: .85rem; margin-top: 2px; }
.base-strip button.switch { background: var(--brand); color: #fff; white-space: nowrap; flex: 0 0 auto; }
/* The ON/OFF switch: knob left and grey = off, knob right and green = on. A button for a settings login, a span for the rest. */
.base-strip .toggle { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 6px 12px 6px 6px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--muted); font: inherit; cursor: default; }
.base-strip button.toggle { cursor: pointer; }
.base-strip button.toggle:hover:not([disabled]) { border-color: var(--brand); }
.base-strip button.toggle[disabled] { opacity: .55; cursor: not-allowed; }
.base-strip .toggle .knob { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #c9ced6; flex: 0 0 auto; transition: background .15s; }
.base-strip .toggle .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.base-strip .toggle.on .knob { background: var(--ok); }
.base-strip .toggle.on .knob::after { left: 23px; }
.base-strip .toggle .word { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.base-strip .toggle .word b { font-size: 1rem; margin-left: 2px; }
.base-strip .toggle.on { color: var(--ok); border-color: var(--ok); }
.base-strip .toggle.off .word b { color: var(--ink); }
.base-strip details.help { margin: 4px 0 0; font-size: .82rem; }
.base-strip details.help summary { color: var(--muted); cursor: pointer; }
.base-strip details.help p { margin: 4px 0 0; color: var(--muted); }
.base-strip form.inline-edit { margin-top: 8px; }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.daycol { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.daycol.tomorrow { border-color: var(--accent); }
.daycol .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.daycol .head b { font-size: .95rem; }
.daycol .head small { color: var(--muted); }
.big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.big div { padding: 6px 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.big .lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.big .val { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.big .delta { font-size: .8rem; font-weight: 600; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--muted); }
/* Rack trend charts (Oct 26). Two series only: Edmonton in a blue near Royal, Prince George in Flame;
   the pair passed the colour-blind check (ΔE 26 protan) and each line is named at its end. */
:root { --s1: #2F62AE; --s2: #F26600; }
.rack-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin: 12px 0; }
.rack-chart { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rack-chart h3 { font-size: .95rem; margin: 0 0 4px; }
.rack-chart h3 .muted { font-weight: normal; font-size: .8rem; margin-left: 6px; }
.rack-chart .legend { float: right; font-weight: normal; font-size: .78rem; color: var(--muted); }
.rack-chart .legend .key { margin-left: 10px; } .rack-chart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.rack-chart svg { width: 100%; height: auto; display: block; font: 11px system-ui, -apple-system, "Segoe UI", sans-serif; }
.rack-chart .grid { stroke: var(--line); stroke-width: 1; }
.rack-chart .tick { fill: var(--muted); }
.rack-chart .end { fill: var(--ink); font-weight: 600; } .rack-chart .end .name { fill: var(--muted); font-weight: 400; }
.rack-chart .cross { stroke: var(--muted); stroke-width: 1; }
.rack-chart .tip-box { fill: var(--ink); } .rack-chart .tip { fill: #fff; }
.rack-chart .hit { cursor: crosshair; }
.daycol.empty { color: var(--muted); display: flex; align-items: center; justify-content: center; min-height: 110px; text-align: center; }
.built { margin-top: 12px; }
table.lines { width: 100%; border-collapse: collapse; }
table.lines td, table.lines th { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .92rem; }
table.lines td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lines tr.subtotal td { font-weight: 700; background: var(--soft-2); }
table.lines td.src { color: var(--muted); font-size: .8rem; white-space: nowrap; }
table.lines tr.src-row { cursor: pointer; }
table.lines tr.src-row:hover td { background: #f8fafd; }
table.lines tr.detail td { background: #fbf8ec; color: var(--muted); font-size: .82rem; font-family: ui-monospace, Menlo, monospace; }
.onhand { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.stat b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.stat span { font-size: .78rem; color: var(--muted); }
.stat.good b { color: var(--ok); } .stat.bad b { color: var(--bad); }
.context { font-size: .85rem; color: var(--muted); margin-top: 8px; }

/* tables */
.scroll { overflow-x: auto; }
table.plain { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--card); }
table.plain th, table.plain td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.plain th { background: #edf1f6; font-size: .8rem; }
table.plain th.num { text-align: right; }
table.plain td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.plain tr.big-move td { background: var(--amber); }
table.loads td { white-space: normal; vertical-align: top; }
table.loads td.note { max-width: 320px; font-size: .85rem; color: var(--muted); }
table.loads tr.estimated td { background: #fffbef; }
table.loads tr.lockrow td { background: var(--soft-2); }
table.loads button.lock { padding: 5px 9px; font-size: .85rem; }
.stat b .tag { vertical-align: middle; font-size: .65rem; }
.tag { font-size: .7rem; padding: 1px 6px; border-radius: 4px; background: var(--soft); color: var(--muted); }
.tag.shell { background: #fde9c9; color: #7a4e00; } .tag.manual { background: #e3ecf8; color: #1d4b83; }
.tag.ok { background: #e2f1e6; color: var(--ok); } .tag.mismatch, .tag.error { background: #fbe3e1; color: var(--bad); } .tag.hand { background: var(--amber); color: #6b4a00; }

/* settings */
.setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.setting { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.setting .cur { display: flex; justify-content: space-between; align-items: baseline; }
.setting .cur b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.setting .cur small { color: var(--muted); }
.setting details { margin-top: 6px; font-size: .85rem; }
.setting details summary { color: var(--muted); cursor: pointer; }
.setting table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.setting td { padding: 3px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* tanks */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.tank { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.tank .row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.tank .name { font-weight: 700; }
.bar { height: 12px; background: var(--soft); border-radius: 6px; overflow: hidden; margin: 6px 0; }
.bar i { display: block; height: 100%; background: var(--ok); }
.tank.low .bar i { background: var(--warn); } .tank.empty .bar i { background: var(--bad); } .tank.offline .bar i { background: #999; }
.badge { font-size: .72rem; padding: 2px 7px; border-radius: 999px; background: var(--soft); text-transform: uppercase; letter-spacing: .03em; }
.badge.low { background: var(--warn); color: #fff; } .badge.empty { background: var(--bad); color: #fff; } .badge.offline { background: #666; color: #fff; }
.tank small { color: var(--muted); }
.tank small.warn { color: var(--bad); font-weight: 600; }
.tank.stale .bar i { opacity: .45; }
.badge.stale, .badge.none { background: #666; color: #fff; }
.tank .row.sort { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: .85rem; }
.tank .row.sort select { padding: 3px 6px; font-size: .85rem; }
.tank input.label-edit { width: 100%; margin-top: 6px; padding: 5px 8px; font-size: .9rem; }
.tank-tools { margin-bottom: 10px; }
.tank-tools p.muted { margin: 6px 0 0; font-size: .85rem; }
input.search.small { font-size: 1rem; padding: 9px 12px; margin: 8px 0 0; }
/* Filter chips (tanks, customers): one row that wraps on a phone; the count sits in the chip. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 11px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: .9rem; }
.chip b { font-weight: 700; margin-left: 2px; }
.chip.active { background: var(--brand); color: #fff; }
/* Today / Tomorrow beside a From date, in every change form. */
.from-chips { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.from-chips .chip { padding: 3px 9px; font-size: .78rem; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.from-chips .chip:hover { background: var(--soft); }

/* Customer tiers under the big numbers */
table.tiers { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .9rem; }
table.tiers th { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--line); }
table.tiers th:first-child { text-align: left; }
table.tiers td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.tiers td:first-child { white-space: nowrap; }
table.tiers td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.tiers td small { color: var(--muted); font-weight: normal; margin-left: 4px; }
table.tiers tr.medium td { background: var(--soft-2); }
.phone table.tiers { font-size: 1rem; }
.phone table.tiers td.num { font-size: 1.1rem; }

/* Customer lookup (phone) and customers (admin) */
input.search { width: 100%; font-size: 1.1rem; padding: 12px 14px; margin-bottom: 8px; }
.pick-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pick-list button { text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); padding: 12px 14px; font-size: 1.05rem; border-radius: 8px; }
.pick-list button.active { border-color: var(--brand); background: var(--tint); }
.pick-list .none { color: var(--muted); padding: 8px 4px; }
.lookup .cust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lookup .cust b { font-size: 1.25rem; }
/* Five cells since 2026-10-20 (clear, dyed, farm diesel; gas, farm gas): three across on a phone, so diesel sits on one row. */
.lookup .three { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.lookup .three > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px; text-align: center; min-width: 0; }
.lookup .three .lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; min-height: 2.2em; }
.lookup .three .val { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lookup.unposted .three > div, .lookup.changed .three > div { border: 3px solid var(--bad); background: #fdf3f2; }
.lookup.verified .three > div { border: 3px solid var(--ok); background: #f0f8f3; }
table.plain select, table.plain input[type=text] { padding: 4px 6px; font-size: .9rem; }
table.plain tr.inactive td { color: var(--muted); }

/* The verified flag. Red until the morning post, green after. It has to hit a salesperson in the face on a phone. */
.flag { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.flag.unposted, .flag.changed { background: var(--bad); }
.flag.verified { background: var(--ok); }
/* DEF: a typed price on its own light-blue chip, the same for every tier. */
.def { background: var(--def); color: var(--def-ink); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.def .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.05rem; }
.def .row b { font-family: "Exo 2", system-ui, sans-serif; letter-spacing: .04em; }
.def small { color: var(--def-ink); opacity: .8; }
.def button.edit { margin-left: auto; background: #fff; color: var(--def-ink); padding: 3px 8px; }
.def form { margin-top: 8px; background: #fff; border-radius: 8px; padding: 10px; }
.lookup .def { margin: 10px 0 0; }
/* No signal: grey, never green. The prices are dimmed so they do not read as today's. */
.flag.offline { background: #4a4f5a; }
#board.offline .daycol { border-color: #9aa0ab; background: #eef0f3; }
#board.offline .daycol .val, #board.offline table.tiers td.num { color: #5c6677; }
#board.offline .daycol.offline .head b::after { content: " · offline"; font-weight: 500; color: #5c6677; font-size: .8em; }
.rollout { margin-bottom: 10px; }
.rollout .progress { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--amber); color: #6b4a00; font-size: .95rem; }
.rollout .progress.done { background: #e2f1e6; color: var(--ok); }
.rollout input.search.small { margin-top: 8px; }
.nudge { background: var(--tint); color: var(--brand); border: 1px solid #c7d4ea; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: .9rem; }
.nudge a { font-weight: 600; }
.nudge button.link { color: var(--muted); margin-left: 6px; }
.flag .word { font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.flag small { font-weight: 500; opacity: .92; }
.flag.chip { padding: 5px 10px; margin: 0 0 8px; font-size: .85rem; border-radius: 8px; }
.flag.chip .word { font-size: .85rem; }
.daycol.unposted, .daycol.changed { border: 3px solid var(--bad); background: #fdf3f2; }
.daycol.verified { border: 3px solid var(--ok); background: #f0f8f3; }
/* Phone board for prices-only logins */
.phone .daycol { padding: 12px; }
.phone .big .val { font-size: 1.7rem; }
.phone .big .lbl { font-size: .78rem; }
/* The morning post card (admins) */
#post-card .card { border-left: 5px solid var(--bad); }
#post-card .card.verified { border-left-color: var(--ok); }
#post-card table.plain td.live { color: var(--muted); }
#post-card .postrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
#post-card .postrow input { flex: 1; min-width: 180px; }
#post-card .postrow button { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
#post-card .postrow button.again { background: var(--brand); }
#post-card .pullrow { justify-content: space-between; }
#post-card .pullrow button { background: var(--soft); color: var(--ink); }
#post-card tr.check td { font-size: .88rem; }

@media (max-width: 640px) { .lookup .three .val { font-size: 1.5rem; } .prices { grid-template-columns: minmax(0, 1fr); } .big .val { font-size: 1.3rem; } .phone .big .val { font-size: 1.55rem; } }

/* Supply lanes */
table.rank td.best { background: #e2f1e6; font-weight: 700; }
table.rank tr.incomplete td { opacity: .65; }
table.rank td.lane small { font-weight: 400; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; white-space: nowrap; }
.seg button { padding: 3px 7px; background: var(--card); color: var(--ink); font-size: .78rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; }
/* The rank table must fit a desktop without a sideways scroll (Axel, Oct 26): tighter cells, and only the lane cell may wrap. */
table.rank th, table.rank td { padding: 5px 6px; }
table.rank td.lane { white-space: normal; min-width: 170px; max-width: 250px; }
.seg button:last-child { border-right: 0; }
.seg button.active { background: var(--brand); color: #fff; }
.lane { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; scroll-margin-top: 64px; }
.lane.inactive { opacity: .6; }
/* The card a lane link just jumped to. */
.lane.flash { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color 1.2s ease .3s; }
table.rank td.lane a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--muted); }
table.rank button.link.off { font-size: .75rem; color: var(--muted); margin-left: 6px; }
.lane .head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 8px; }
.lane .head input[type=text] { min-width: 150px; }
.lane .head input[data-field=name] { min-width: 280px; font-weight: 600; }
.lane .setting-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lane-hint:empty { display: none; }

/* Phone fit and polish (2026-10-12). Nothing may be wider than the card it sits in. */
.card, .fuel, .setting, .lane, .tank { box-shadow: 0 1px 2px rgba(26, 31, 43, .04); }
.big .val { line-height: 1.1; letter-spacing: -.01em; }
table.tiers { table-layout: fixed; }
table.tiers th:first-child, table.tiers td:first-child { width: 34%; }
table.tiers td:first-child { white-space: normal; }
@media (max-width: 640px) {
  main { padding: 12px; }
  .fuel { padding: 12px; border-radius: 12px; }
  .fuel h2 { font-size: 1.15rem; }
  .daycol, .phone .daycol { padding: 12px 10px; }
  .big { gap: 6px; }
  .big .lbl { font-size: .68rem; letter-spacing: .03em; }
  .big .val, .phone .big .val { font-size: 1.45rem; }
  table.tiers, .phone table.tiers { font-size: .95rem; }
  table.tiers td, table.tiers th { padding: 6px 4px; }
  table.tiers td.num, .phone table.tiers td.num { font-size: 1rem; }
  table.tiers td small { display: block; margin-left: 0; font-size: .75rem; }
  .flag { padding: 12px 14px; gap: 8px; }
  .flag .word { font-size: 1.1rem; }
  .flag small { font-size: .8rem; line-height: 1.3; }
  .flag.chip small { white-space: normal; }
  .toolbar { gap: 8px 12px; }
}
/* Morning post card on a phone: the Live / Draft / Change columns must stay on screen. */
@media (max-width: 640px) {
  #post-card table.plain { table-layout: fixed; width: 100%; font-size: .85rem; }
  #post-card table.plain th, #post-card table.plain td { white-space: normal; padding: 5px 4px; overflow-wrap: anywhere; }
  #post-card table.plain th:first-child, #post-card table.plain td:first-child { width: 38%; }
  #post-card table.plain th.num small { display: none; }
  #post-card tr.check td { font-size: .78rem; }
  #post-card tr.check td:first-child small { display: block; }
  #post-card .postrow input { min-width: 0; width: 100%; }
  #post-card .postrow button { width: 100%; }
}

/* Users and password (2026-10-12) */
.perm-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 12px; }
.perm-picks.small { margin-top: 6px; grid-template-columns: 1fr; gap: 2px; }
.perm-picks label.pick { display: flex; gap: 6px; align-items: baseline; font-size: .85rem; white-space: normal; }
.perm-picks label.pick small { display: block; }
table.users td { white-space: normal; vertical-align: top; }
/* QuickBooks: the sync log's detail line and a customer's QuickBooks note wrap instead of side-scrolling. */
#qbo-card details { margin-top: 10px; font-size: .9rem; }
#qbo-card details summary { cursor: pointer; color: var(--muted); }
#qbo-card table.plain td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
#qbo-card table.plain td:not(:last-child) { white-space: nowrap; }
#customers-table td.qnote { white-space: normal; max-width: 340px; overflow-wrap: anywhere; color: var(--muted); }
/* The Fixed tier's deal under the tier select (2026-10-20) */
.fixed-deal { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: .85rem; }
.fixed-deal label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.fixed-deal input[type=number] { width: 96px; padding: 4px 6px; font-size: .9rem; }
.fixed-deal small { flex-basis: 100%; }
table.users button.reset { padding: 5px 9px; font-size: .85rem; background: var(--soft); color: var(--ink); }
.card.temp { border-left: 5px solid var(--ok); }
.card.temp code.pw.long, details.prime code.pw { font-size: .85rem; word-break: break-all; }
.card.temp code.pw { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; background: var(--soft-2); padding: 4px 8px; border-radius: 6px; }
body.must-change #topbar nav { display: none; }
.users { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.user { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.user.inactive { opacity: .6; }
.user .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.user button.reset { padding: 5px 9px; font-size: .85rem; background: var(--soft); color: var(--ink); }
.perm-picks.small label.pick { font-size: .9rem; }
.perm-picks.small label.pick small { display: inline; }

/* Monday pass (2026-10-19): prices first, one flag per day, forms folded away, dates in words. */
.daynav { display: inline-flex; align-items: center; gap: 4px; }
.daynav button { padding: 6px 10px; font-size: 1.1rem; line-height: 1; background: var(--soft); color: var(--ink); }
.daynav input[type=date] { padding: 6px 8px; }
.daynav span { margin-left: 6px; font-size: .9rem; }
/* Which day this is (Axel, Oct 26: too easy to end up four days back without noticing): "Today · Mon, Oct 26"; anything but today reads amber. */
.daynav { flex-wrap: wrap; }
.daynav span b.now { color: var(--ink); } .daynav span b.off { color: var(--warn); }
details.help { margin: -4px 0 12px; font-size: .9rem; }
details.help summary { color: var(--muted); cursor: pointer; }
details.help p { color: var(--muted); margin: 6px 0 0; max-width: 80ch; }
details.card.add > summary { cursor: pointer; font-weight: 600; color: var(--brand); }
details.card.add > summary::before { content: "+ "; }
details.card.add[open] > summary::before { content: "− "; }
details.card.add > .tabs { margin: 10px 0 12px; }
/* The admin board's folds under the prices */
details.more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
details.more > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
details.more > summary b { color: var(--ink); font-variant-numeric: tabular-nums; }
details.more > summary b.good { color: var(--ok); } details.more > summary b.bad { color: var(--bad); }
details.more[open] > summary { margin-bottom: 8px; }
details.more .built { margin-top: 0; }
details.more .onhand { margin-top: 4px; }
/* The post line: flag, date, button on one row */
#post-card .card.post { padding: 10px 14px; }
#post-card .postline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#post-card .postline .when { min-width: 150px; }
#post-card .postline .when b { font-size: 1.05rem; }
#post-card .postline .when small { color: var(--muted); margin-left: 6px; }
#post-card .postline .flag.chip { margin: 0; flex: 1; min-width: 200px; }
#post-card .postline .postrow { margin: 0; flex: 0 1 auto; }
#post-card .postline .postrow input { min-width: 160px; }
#post-card .postline .postrow button.link { background: none; color: var(--brand); text-decoration: underline; padding: 0; }
#post-card .card.post .warnings { margin: 10px 0 0; }
#post-card details.compare { margin-top: 8px; }
#post-card details.compare > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
#post-card details.compare[open] > summary { margin-bottom: 8px; }
#post-card details.sources { margin: 4px 0 14px; font-size: .9rem; }
#post-card details.sources > summary { cursor: pointer; color: var(--muted); }
#post-card details.sources p { margin: 6px 0; }
#post-card details.sources .warnings { margin-top: 8px; }
/* Dated cards: the change form behind a small button */
.row-wrap.tight { gap: 6px 14px; margin: 6px 0 0; align-items: flex-start; }
.row-wrap.tight > details { font-size: .85rem; flex: 1 1 100%; }
.setting details.change { flex: 0 0 auto !important; }
.setting details.change > summary { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--soft); color: var(--ink); font-size: .85rem; cursor: pointer; list-style: none; }
.setting details.change > summary::-webkit-details-marker { display: none; }
.setting details.change[open] { flex: 1 1 100% !important; }
.setting details.change[open] > summary { background: var(--brand); color: #fff; margin-bottom: 8px; }
.setting details.change form.change { margin-top: 2px; }
/* The build, editable in place (2026-10-20): red minus, ✎ per setting line, a form row under it. */
.neg { color: var(--bad); }
table.lines button.edit, table.also button.edit { padding: 1px 7px; font-size: .85rem; line-height: 1.4; background: var(--soft); color: var(--ink); margin-left: 8px; vertical-align: middle; }
table.lines tr.edit-row td { background: #fbf8ec; padding: 8px 10px; }
form.inline-edit { gap: 8px 12px; }
form.inline-edit .sub { margin: 0; }
form.inline-edit .sub small { text-transform: none; letter-spacing: 0; font-weight: 400; }
form.inline-edit .actions button.cancel { background: var(--soft); color: var(--ink); }
.tabs.small { margin: 0 0 8px; }
.tabs.small button { padding: 5px 12px; font-size: .85rem; }
.also-head { margin: 14px 0 4px; }
table.lines.also td:first-child { width: 50%; }
details.rack-typed { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: .9rem; }
details.rack-typed > summary { cursor: pointer; color: var(--muted); }
details.rack-typed[open] > summary { margin-bottom: 8px; }
details.rack-typed form p.muted { margin: 0; }
/* Rack status */
.card.status p { margin: 0 0 6px; }
.card.status p:last-child { margin-bottom: 0; }
.warnings.held button[type=button] { background: var(--brand); color: #fff; margin-left: 6px; }
.warnings.held button.link { background: none; color: inherit; margin-left: 4px; }
@media (max-width: 640px) {
  #topbar { padding: 6px 10px; gap: 6px; }
  #topbar .brand small { display: none; }
  #topbar a.brand img { height: 17px; padding: 3px 6px; }
  #topbar a, #topbar summary { padding: 6px 8px; }
  #topbar nav { flex-shrink: 0; }
  #topbar details.menu { position: static; }
  #topbar details.menu > div { top: calc(100% - 2px); left: 8px; right: 8px; min-width: 0; }
  #topbar details.menu.me { min-width: 0; overflow: hidden; }
  #topbar details.menu.me > summary { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
  #topbar details.menu.me[open] { overflow: visible; }
  .toolbar .daynav { width: 100%; }
  .daynav input[type=date] { flex: 1; min-width: 0; }
  #post-card .postline .when { min-width: 0; }
  #post-card .postline .postrow { flex: 1 1 100%; }
  #post-card .postline .postrow input { min-width: 0; width: 100%; }
}
.base-status.on { color: #6b4a00; background: var(--amber); border-radius: 6px; padding: 6px 10px; }

/* The help bubble and panel (public/help-widget.js). Royal bubble bottom right; the panel goes
   full screen on a phone. Hidden while a temporary password is being changed. */
.hw-root { font-size: 15px; line-height: 1.45; color: var(--ink); }
.hw-launch { position: fixed; right: 18px; bottom: 18px; z-index: 1000; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px rgba(16, 32, 64, .3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hw-launch svg { width: 30px; height: 30px; fill: currentColor; }
.hw-launch:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(16, 32, 64, .35); }
.hw-launch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.must-change .hw-root { display: none; }
.hw-panel { position: fixed; right: 18px; bottom: 18px; z-index: 1000; width: 390px; max-width: calc(100vw - 24px); height: 620px; max-height: calc(100vh - 36px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(16, 32, 64, .3); overflow: hidden; }
.hw-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 16px; background: var(--brand); color: var(--brand-ink); }
.hw-head-txt { flex: 1; min-width: 0; }
.hw-title { font-family: "Exo 2", system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; }
.hw-sub { font-size: .8rem; opacity: .9; margin-top: 1px; }
.hw-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.4rem; line-height: 1; padding: 0; cursor: pointer; }
.hw-x:hover { background: rgba(255, 255, 255, .18); }
.hw-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--soft-2); }
.hw-tab { flex: 1; padding: 9px 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.hw-tab.active { color: var(--brand); border-bottom-color: var(--accent); background: var(--card); }
.hw-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hw-guide { overflow-y: auto; padding: 4px 16px 18px; }
.hw-guide h3 { font-family: "Exo 2", system-ui, sans-serif; font-size: 1rem; margin: 18px 0 6px; color: var(--brand); }
.hw-guide h4 { font-size: 1.05rem; margin: 14px 0 4px; }
.hw-guide h5 { font-size: .95rem; margin: 10px 0 2px; }
.hw-guide p, .hw-guide li { font-size: .92rem; }
.hw-guide p { margin: 6px 0; }
.hw-guide ul, .hw-guide ol { margin: 4px 0 8px; padding-left: 22px; }
.hw-msgs { flex: 1; overflow-y: auto; padding: 14px 12px 6px; }
.hw-msg { max-width: 88%; margin: 0 0 10px; padding: 9px 12px; border-radius: 14px; overflow-wrap: anywhere; }
.hw-msg p { margin: 0 0 8px; } .hw-msg p:last-child { margin-bottom: 0; }
.hw-msg ol, .hw-msg ul { margin: 4px 0 8px; padding-left: 22px; } .hw-msg li { margin: 0 0 5px; }
.hw-msg code { font-family: Menlo, Consolas, monospace; font-size: .85em; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.hw-user { margin-left: auto; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.hw-bot { margin-right: auto; background: var(--soft-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.hw-note { color: var(--muted); font-size: .82rem; text-align: center; margin: 4px 0 12px; }
.hw-typing { display: inline-flex; align-items: center; height: 18px; }
.hw-typing i { width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--muted); opacity: .4; animation: hwDot 1.2s infinite; }
.hw-typing i:nth-child(2) { animation-delay: .2s; } .hw-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes hwDot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.hw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; }
.hw-chip { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: .85rem; text-align: left; cursor: pointer; }
.hw-chip:hover { border-color: var(--brand); color: var(--brand); }
.hw-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line); background: var(--soft-2); }
.hw-input { flex: 1; min-height: 42px; max-height: 110px; resize: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; line-height: 1.35; }
.hw-input:focus { outline: none; border-color: var(--brand); }
.hw-send { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 1.1rem; cursor: pointer; }
.hw-send[disabled] { opacity: .5; cursor: default; }
.hw-foot { padding: 4px 14px 9px; background: var(--soft-2); color: var(--muted); font-size: .74rem; text-align: center; }
@media (max-width: 600px) {
  .hw-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}
@media print { .hw-root { display: none; } }
.hw-note.hw-off { margin: 24px 16px; font-size: .92rem; }