/* BayCall shared styles. No external dependencies. Loaded by the login page, the owner app and the tech app; the customer pages carry their
   own copy of the light tokens. The typeface is Inter (variable, self-hosted, SIL Open Font License: see fonts/OFL.txt); until it has
   loaded the system font stands in. Every colour below is a token from the design (docs/superpowers/specs, §4), so night mode is a token
   swap at the end of the file plus the four things a swap cannot express. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/shared/fonts/inter-latin-wght-normal.woff2) format('woff2'); }
:root {
  --bg: #f3f2ee; --panel: #ffffff; --soft: #f7f6f3; --chip: #ecebe6; --line: #e4e2dc; --line-2: #d3d0c8;
  --ink: #17191d; --ink-2: #3c4047; --muted: #6b7078;
  --brand: #b3182b; --brand-2: #8f1222; --focus: #2563eb;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(23,25,29,.06); --shadow-2: 0 1px 2px rgba(23,25,29,.05), 0 8px 24px rgba(23,25,29,.08);
  /* status colours: text on a soft background; the text colour is also the edge of a toned card or tile */
  --st-red: #b3182b; --st-red-bg: #fbe9ec; --st-green: #166534; --st-green-bg: #e7f5ec; --st-amber: #92400e; --st-amber-bg: #fdf1dc;
  --st-blue: #1d4ed8; --st-blue-bg: #e8eefc; --st-neutral: #4b5563; --st-neutral-bg: #ecebe6; --st-dark: #ffffff; --st-dark-bg: #17191d;
  --st-night: #fbbf24; --st-night-bg: #1f2937;
  /* --green --amber --red --blue are aliases of the status text colours, kept so rules written before the tokens existed still work; new
     rules use --st-*. A var() resolves where it is declared, so body.night and .tech declare the aliases again to get their own values. */
  --green: var(--st-green); --amber: var(--st-amber); --red: var(--st-red); --blue: var(--st-blue);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--st-blue); }
h1, h2, h3, h4 { line-height: 1.2; }
h1, h2, .hero h2, .big-total, .loc { letter-spacing: -0.01em; }
/* money, time, hours, ages and counts line up */
.age, .clock, .amt, .r, .totals, .timeline .t, .stat b, .big-total { font-variant-numeric: tabular-nums; }
::placeholder { color: var(--muted); opacity: .8; }

/* ---------- header ---------- */
.top { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--panel); border-bottom: 1px solid var(--line); }
.top img { height: 32px; width: auto; }
.top .title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; }
.top .sub { color: var(--muted); font-size: 12px; }
.top .spacer { flex: 1; }
.top .clock { color: var(--muted); font-size: 13px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.switch i { width: 40px; height: 22px; border-radius: 11px; background: var(--line-2); position: relative; transition: background-color .15s; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.switch.on i { background: var(--ink); }
.switch.on i::after { left: 20px; }

/* ---------- buttons: 36 px tall (.sm 30, .big 56), one primary call to action per screen ---------- */
.btn { display: inline-block; vertical-align: middle; text-align: center; text-decoration: none; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: var(--radius-sm); padding: 9px 12px; font-weight: 600; font-size: 13px; line-height: 16px; transition: background-color .15s, box-shadow .15s, transform .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--soft); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.brand:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn.green { background: #15803d; color: #fff; border-color: #15803d; }
.btn.green:hover { background: #14532d; border-color: #14532d; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--soft); border-color: var(--line-2); }
.btn.sm { padding: 6px 10px; font-size: 12.5px; line-height: 16px; }
.btn.big { width: 100%; padding: 17px 16px; font-size: 17px; line-height: 20px; }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; height: calc(100% - 56px); }
.pane { min-height: 0; }
.owner { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); display: flex; flex-direction: column; min-width: 0; }
.owner .tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); }
.owner .tab { border: 0; background: transparent; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; transition: color .15s, border-color .15s; }
.owner .tab:hover { color: var(--ink-2); }
.owner .tab.active { color: var(--ink); border-bottom-color: var(--brand); }
.owner .tab .n { background: var(--chip); color: var(--ink-2); border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 6px; }
.owner .body { flex: 1; overflow: auto; padding: 14px; min-height: 0; }
@media (max-width: 1279px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; height: auto; }
  .owner { min-height: 70vh; }
}

/* ---------- full-height app screen (the tech app; there is no phone frame) ---------- */
.screen { height: 100%; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.scroll { flex: 1; overflow: auto; min-height: 0; padding: 10px 12px 20px; -webkit-overflow-scrolling: touch; }

/* tech screen (dark). The surfaces stay here; tech.css refines them. The tech app never has body.night, so the status colours, hairlines
   and focus colour it reads are the night ones, set on .tech itself and on the tech app's body (which carries the pending badge). */
.tech { background: #0f172a; color: #e5e7eb; -webkit-font-smoothing: antialiased; }
.tech, .tech-body {
  --panel: #1f2937; --soft: #0f172a; --chip: #1f2937; --line: #1f2937; --line-2: #374151;
  --ink: #e5e7eb; --ink-2: #c7cdd6; --muted: #9ca3af; --focus: #93c5fd;
  --st-red: #fca5a5; --st-red-bg: rgba(248,113,113,.18); --st-green: #86efac; --st-green-bg: rgba(34,197,94,.16); --st-amber: #fcd34d; --st-amber-bg: rgba(245,158,11,.18);
  --st-blue: #93c5fd; --st-blue-bg: rgba(96,165,250,.18); --st-neutral: #cbd5e1; --st-neutral-bg: #334155; --st-dark: #0f172a; --st-dark-bg: #e5e7eb;
  --st-night: #fbbf24; --st-night-bg: #0b1220;
}
.tech { --green: var(--st-green); --amber: var(--st-amber); --red: var(--st-red); --blue: var(--st-blue); }   /* the aliases, resolved against the values above */
.tech .apphead { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; border-bottom: 1px solid #1f2937; }
.tech .apphead b { font-size: 15px; }
.tech select { background: #1f2937; color: #e5e7eb; border: 1px solid #374151; border-radius: 8px; padding: 6px 8px; }
.tech .card { background: #1f2937; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; border-left: 4px solid transparent; }
.tech .card.hot { border-left-color: var(--brand); }
.tech .card.tap { cursor: pointer; }
.tech .card.tap:active { background: #273244; }
.tech .muted { color: #9ca3af; }
.tech .kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; font-weight: 700; }
.tech .btn { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.tech .btn:hover { background: #273244; }
.tech .btn.primary { background: #e5e7eb; color: #0f172a; border-color: #e5e7eb; }
.tech .btn.green { background: #15803d; color: #fff; border-color: #15803d; }   /* the fill carries white text, so it does not follow --green */
.tech .btn.brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.tech .btn.big + .btn.big { margin-top: 10px; }
.tech input, .tech textarea { width: 100%; background: #111827; border: 1px solid #374151; color: #e5e7eb; border-radius: 10px; padding: 11px 12px; font-size: 15px; }
.tech textarea { min-height: 70px; resize: vertical; }
.tech .row { display: flex; gap: 8px; align-items: center; }
.tech .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tech .chip { display: inline-flex; align-items: center; min-height: 56px; background: #273244; border: 1px solid #374151; color: #e5e7eb; border-radius: 999px; padding: 8px 18px; font-size: 15px; }   /* a phone control: 56 px */
.tech .chip:active { background: #334155; }
.tech .photos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.tech .photo, .owner .photo { width: 92px; height: 92px; border-radius: 10px; background: #334155; flex: 0 0 auto; display: flex; align-items: flex-end; font-size: 10px; padding: 6px; color: #e5e7eb; overflow: hidden; position: relative; background-size: cover; background-position: center; }
.owner .photo { background: var(--chip); color: var(--ink); }
.tech .photo span, .owner .photo span { background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 2px 5px; line-height: 1.2; }
.tech .photo { font-size: 13px; }                                    /* the phone's caption: 13 px, on a scrim dark enough for white words on any picture */
.tech .photo span { background: rgba(0,0,0,.75); }
.tech .pill { background: var(--st-neutral-bg); color: var(--st-neutral); }
.tech .file { position: relative; overflow: hidden; }
.tech .file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tech canvas { width: 100%; height: 190px; background: #fff; border-radius: 12px; touch-action: none; display: block; }
.tech .back { color: #93c5fd; background: none; border: 0; padding: 0; font-weight: 600; font-size: 14px; }
.tech .loc { font-size: 22px; font-weight: 700; line-height: 1.2; }

/* ---------- board ---------- */
/* The board fills the pane and scrolls sideways when the columns do not fit; each column is as tall as the board and scrolls on its own when
   its cards do not fit, so every column keeps its background and its heading stays stuck at the top whatever is scrolled. The board can only
   have a height of its own when the pane's body holds it: then the body lays out as a column and the board takes what the counters leave. */
.owner .body:has(> .board) { display: flex; flex-direction: column; }
.board { display: flex; gap: 10px; flex: 1 1 auto; min-height: 240px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
/* A column with jobs would rather be 232 px wide and gives way down to 168 px, which is what lets seven columns share a 1280 px screen.
   The column has no top padding of its own: the heading carries it, so it sticks flush to the top and covers the cards passing under it. */
.col { flex: 1 1 232px; min-width: 168px; background: var(--soft); border-radius: var(--radius); padding: 0 10px 10px; overflow-y: auto; scrollbar-width: thin; }
.col.empty { flex: 0 0 150px; min-width: 150px; }
.col h4 { position: sticky; top: 0; z-index: 1; background: var(--soft); margin: 0 0 10px; padding: 12px 4px 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.col h4 .n { background: var(--panel); border-radius: 999px; padding: 0 7px; color: var(--ink); font-size: 11px; letter-spacing: 0; }
.col.empty::after { content: "None"; display: block; text-align: center; color: var(--muted); font-size: 13px; padding: 16px 0; }
.card { background: var(--panel); border-radius: 10px; padding: 12px 12px 10px; margin-bottom: 8px; box-shadow: var(--shadow-1); border-left: 4px solid var(--line-2); cursor: pointer; overflow-wrap: break-word; transition: background-color .15s, box-shadow .15s, transform .15s, border-color .15s; }
@media (hover: hover) { .card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } }
.card.sel, .card.sel:hover { box-shadow: 0 0 0 2px var(--brand), var(--shadow-1); }
.card.amber { border-left-color: var(--st-amber); }
.card.red { border-left-color: var(--st-red); animation: pulse 1.3s ease-in-out infinite; }
.card.green { border-left-color: var(--st-green); }
.card.blue { border-left-color: var(--st-blue); }
@keyframes pulse { 0%,100% { box-shadow: var(--shadow-1), 0 0 0 0 rgba(179,24,43,0); } 50% { box-shadow: var(--shadow-1), 0 0 0 5px rgba(179,24,43,.18); } }
.card .num { font-weight: 700; font-size: 14px; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 6px; white-space: nowrap; }
.card .age { font-size: 12px; color: var(--muted); font-weight: 500; text-align: right; }
.card .cust { font-size: 14px; font-weight: 600; margin-top: 2px; }
.card .units { font-size: 13px; color: var(--muted); margin-top: 2px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pill { display: inline-block; vertical-align: middle; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; padding: 3px 8px; border-radius: 999px; background: var(--st-neutral-bg); color: var(--st-neutral); white-space: nowrap; }
.pill.red { background: var(--st-red-bg); color: var(--st-red); }
.pill.green { background: var(--st-green-bg); color: var(--st-green); }
.pill.amber { background: var(--st-amber-bg); color: var(--st-amber); }
.pill.blue { background: var(--st-blue-bg); color: var(--st-blue); }
.pill.dark { background: var(--st-dark-bg); color: var(--st-dark); }
.pill.night { background: var(--st-night-bg); color: var(--st-night); }

/* ---------- forms / detail ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 20px; min-height: 38px; background: var(--panel); color: var(--ink); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.field input[type=checkbox], .field input[type=radio] { width: auto; min-height: 0; padding: 0; }
.field textarea { min-height: 72px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .actions input:focus, .actions select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(37,99,235,.25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 0 14px; min-height: 34px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 0; transition: background-color .15s, color .15s; }
.seg button:hover { background: var(--soft); color: var(--ink-2); }
.seg button.on, .seg button.on:hover { background: var(--ink); color: #fff; }
.seg button:focus-visible { outline-offset: -3px; }                    /* the group clips its corners, so the ring is drawn inside */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
/* the one place uppercase survives: section kickers */
.panel h3, .section h3, .col h4, .kicker, .pay-head { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.section { margin-bottom: 18px; }
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.hero h2 { margin: 0; font-size: 24px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.hero .sub { color: var(--ink-2); font-size: 13.5px; margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.actions select, .actions input { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 10px; line-height: 20px; background: var(--panel); color: var(--ink); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
table.lines { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--ink-2); }
table.lines th { text-align: left; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.lines td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.lines td.r, table.lines th.r { text-align: right; white-space: nowrap; }
table.lines tr.unit td { background: var(--soft); font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.totals { margin-left: auto; width: 320px; font-size: 13px; }
.totals div { display: flex; justify-content: space-between; padding: 4px 8px; }
.totals div > span:first-child { color: var(--muted); }
.totals .grand { font-weight: 800; font-size: 17px; color: var(--ink); border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 8px; }
.totals .grand > span:first-child { color: var(--ink); }
.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.timeline .t { color: var(--muted); font-size: 12px; }
.timeline .who { color: var(--muted); font-size: 12px; }
.photos { display: flex; gap: 8px; overflow-x: auto; }
.note { font-size: 13px; color: var(--ink); }                         /* a handoff note (.item.note); once acknowledged it steps back */
.note.acked { color: var(--muted); }
.callout { border-left: 3px solid var(--st-amber); background: var(--st-amber-bg); color: var(--ink); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 12px; }
.callout.red { border-left-color: var(--st-red); background: var(--st-red-bg); }
.callout.green { border-left-color: var(--st-green); background: var(--st-green-bg); }
.callout.blue { border-left-color: var(--st-blue); background: var(--st-blue-bg); }
.list { display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; transition: background-color .15s, box-shadow .15s, transform .15s, border-color .15s; }
.item.tap { cursor: pointer; }
@media (hover: hover) { .item.tap:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-1px); } }
.item h4 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; font-size: 13px; }
.kv b { color: var(--muted); font-weight: 600; }
.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }
.unitrow { display: grid; grid-template-columns: 110px 70px 1fr 1fr 90px 36px; gap: 8px; align-items: end; margin-top: 8px; }
.unitrow .btn { padding: 9px 8px; }
.checks label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.shift { display: flex; gap: 10px; flex-wrap: wrap; }
.shift .item { flex: 1; min-width: 150px; }
/* KPI tiles: the value leads, a toned tile carries its colour on the edge and the value */
.stat { padding: 12px 16px; }
.stat b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.stat .hint { margin: 0; font-size: 12.5px; white-space: nowrap; }
.stat.red { border-left: 3px solid var(--st-red); }
.stat.amber { border-left: 3px solid var(--st-amber); }
.stat.red b { color: var(--st-red); }
.stat.amber b { color: var(--st-amber); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); margin-right: 6px; }
.dot.on { background: var(--st-green); }
.dot.oncall { background: var(--st-amber); }
.sig-img { height: 70px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* ---------- BayCall additions: toast, pending badge, small screens ---------- */
/* The toast stays in the page when hidden, and the badge sits over the corner: neither may catch a tap meant for what is under it. */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-2); opacity: 0; transition: opacity .2s, transform .2s; z-index: 100; max-width: 90vw; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.error { background: var(--brand); color: #fff; }
body[data-pending]:not([data-pending=""])::after { content: attr(data-pending) " pending"; position: fixed; top: 64px; right: 8px; background: var(--st-amber-bg); color: var(--st-amber); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; padding: 3px 8px; border-radius: 999px; box-shadow: var(--shadow-1); z-index: 99; pointer-events: none; }
@media (max-width: 900px) {
  .grid3, .grid2 { grid-template-columns: 1fr; }
  .unitrow { grid-template-columns: 1fr 1fr; }
}

/* ---------- focus and motion ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- night mode: the same tokens with the night values, then the few things a swap cannot express ---------- */
body.night {
  --bg: #0b0f17; --panel: #111827; --soft: #0f172a; --chip: #1f2937; --line: #1f2937; --line-2: #374151;
  --ink: #e5e7eb; --ink-2: #c7cdd6; --muted: #9ca3af;
  --brand-2: #d12a40; --focus: #93c5fd;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --st-red: #fca5a5; --st-red-bg: rgba(248,113,113,.18); --st-green: #86efac; --st-green-bg: rgba(34,197,94,.16); --st-amber: #fcd34d; --st-amber-bg: rgba(245,158,11,.18);
  --st-blue: #93c5fd; --st-blue-bg: rgba(96,165,250,.18); --st-neutral: #cbd5e1; --st-neutral-bg: #334155; --st-dark: #0f172a; --st-dark-bg: #e5e7eb;
  --st-night: #fbbf24; --st-night-bg: #0b1220;
  --green: var(--st-green); --amber: var(--st-amber); --red: var(--st-red); --blue: var(--st-blue);   /* the aliases, resolved against the night values */
  -webkit-font-smoothing: antialiased;
}
/* the primary button and the chosen segment invert (light on dark becomes dark on light), the switch's knob sits on a light track, and the
   toast is a light slab with dark words */
body.night .btn.primary { color: #0f172a; }
body.night .seg button.on { color: #0f172a; }
body.night .seg button.on:focus-visible { outline-color: #0f172a; }   /* the light focus colour would vanish on the chosen segment's light fill */
body.night .switch.on i::after { background: #0f172a; }
body.night #toast { color: #0f172a; }
body.night #toast.error { color: #fff; }