/* Shop POS — web portal.
 *
 * Dark only, on purpose: this lives on a shop counter and on a phone at
 * 6am, and a white panel at either is a flashbang. No second palette to
 * keep in step and no toggle to get stuck half-applied.
 *
 * The look is deliberately quiet. A register is read at a glance, in a
 * hurry, often by someone mid-conversation with a customer — so the
 * chrome recedes and the numbers carry the weight. The only saturated
 * colour in the whole interface is the primary action and anything that's
 * gone wrong.
 *
 * GLASS. Surfaces are translucent and blur what's behind them, over a
 * background carrying a faint green wash for them to pick up. That's an
 * approximation of Apple's Liquid Glass, not the real thing: genuine
 * Liquid Glass refracts and throws specular highlights in real time, and
 * a browser can't do that — `backdrop-filter` blurs and tints, and stops
 * there. The native SwiftUI app gets the actual material for free with
 * `.glassEffect()`; this is the closest a web page gets.
 *
 * Because every blurring surface costs the compositor, glass is spent
 * where depth actually reads — the bar, panels, dialogs, the login card —
 * and nowhere else. It also degrades cleanly: browsers without
 * `backdrop-filter` fall back to opaque surfaces via @supports.
 *
 * Still sized for a front-desk iPad first: nothing needs a precise mouse,
 * and every target clears 44px.
 */

:root {
  color-scheme: dark;

  /* Four greys a step apart, so depth reads without outlines. The
     surfaces are translucent — the alpha is what lets the blur show. */
  --bg:        #08090b;
  --surface:   rgba(22, 25, 29, .72);
  --surface-solid: #16191d;
  --raised:    rgba(38, 43, 50, .55);
  --hover:     rgba(52, 58, 67, .68);

  --ink:       #f2f4f7;
  --ink-dim:   #a8b0bd;
  /* 5.4:1 on --bg, 4.8:1 on a panel — AA for the 13px notes (#6b7482 was
     about 4:1; 2026-09-24 audit, L19). */
  --ink-faint: #7d8695;

  --hairline:  rgba(255, 255, 255, .07);
  --hairline-strong: rgba(255, 255, 255, .13);

  /* Apple's system green. Dark ink on it, not white: white on this green
     is about 2:1 contrast and unreadable at a glance; near-black is 11:1. */
  --accent:      #30d158;
  --accent-deep: #28b84c;
  --accent-ink:  #06210e;
  --accent-glow: rgba(48, 209, 88, .22);

  --good: #3ddc9a;
  --bad:  #ff6b6b;
  --warn: #ffc457;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* The lit top edge is what makes a translucent panel read as a pane of
     something rather than a flat transparent rectangle. */
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.07);
  --blur: saturate(180%) blur(22px);
}

* { box-sizing: border-box; }

/* An explicit `display` beats the browser's own `[hidden] {display:none}`,
   so `.login-wrap { display: grid }` would leave the login screen sitting
   on top of the signed-in app forever. Say it louder than the rule it's
   fighting. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /* Glass needs something behind it or it just looks grey. Three washes
     of the shop's glow colour — top left, top right, and up from the
     bottom so it reaches right across the page — fixed so they don't
     slide around under scrolling panels. The colour and brightness are an
     admin's to set (Admin → Background glow, 081); app.js writes these
     three variables, and the values here are the default (green, 40%). */
  --glow-rgb: 48, 209, 88;
  --glow-a: .14;
  background:
    radial-gradient(1500px 1000px at 0% -12%, rgba(var(--glow-rgb), var(--glow-a)), transparent 66%),
    radial-gradient(1300px 950px at 100% 0%, rgba(var(--glow-rgb), calc(var(--glow-a) * .7)), transparent 64%),
    radial-gradient(1600px 900px at 50% 118%, rgba(var(--glow-rgb), calc(var(--glow-a) * .55)), transparent 66%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100dvh;
}

/* Headings and totals in the rounded system face — SF Pro Rounded on
   Apple hardware, which is what this runs on. Softer than the text face
   without costing any legibility at a glance, and it needs no webfont, so
   nothing waits on a download or breaks when the shop is offline. */
h1, h2, h3, .stat.big .v, .login h1, nav button, .tile {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system,
               BlinkMacSystemFont, "Segoe UI Variable Display", system-ui,
               sans-serif;
}

/* Money and quantities line up in columns or they're useless at a glance. */
.mono, .amount, .stat .v, td.num, th.num,
input[inputmode="decimal"], input[inputmode="numeric"] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

::selection { background: var(--accent-deep); color: #fff; }

/* ---- Top bar ---------------------------------------------------- */

header.bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 56px;
  background: rgba(10, 12, 14, .62);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--glass-edge);
  position: sticky;
  /* Pinned just below the offline / Tekmetric strips, whose holder sets
     --bars-h to its height (app.js topBar; 2026-09-24 audit, M7). */
  top: var(--bars-h, 0px);
  z-index: 30;
}

header.bar h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}

nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }

nav button {
  background: none;
  border: 0;
  padding: 7px 13px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-dim);
  white-space: nowrap;
  min-height: 44px;              /* a thumb target (2026-09-24 audit, L16) */
  transition: background .16s var(--ease), color .16s var(--ease);
}
nav button:hover { background: var(--raised); color: var(--ink); }
nav button.on {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(48,209,88,.3), 0 2px 12px var(--accent-glow);
}

.who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.who #whoami { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* An admin's name · role opens Admin (2026-09-26). */
.who #whoami.link { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,.35);
  text-underline-offset: 3px; }
.who #whoami.link:hover { color: var(--accent); }

/* Signing out is the least important thing on screen and was the loudest
   button on it. Quiet until you go looking for it. */
.who button.btn {
  min-height: 44px;              /* was 34px: under a thumb (L16) */
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
}
.who button.btn:hover { background: var(--raised); color: var(--ink); border-color: transparent; }

/* Mobile Safari zooms the page in whenever a focused field's text is
   under 16px, and then leaves it zoomed — so tapping the RO number on a
   phone left the counter looking at a magnified half of the register.
   The desktop keeps 15px, which is what the rest of the type is set to. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px; }
}

/* Between a phone and a desktop the bar holds the brand, the nav, the
   badge, the name, three buttons and sometimes the Work/View banner — more
   than one line's worth. It wraps instead of running off the side
   (2026-09-24 audit, L17). */
@media (max-width: 900px) {
  header.bar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 6px 16px; row-gap: 4px; }
  .who { flex-wrap: wrap; white-space: normal; justify-content: flex-end; row-gap: 4px; }
}

/* Narrow screens: the bar wraps rather than squashing the nav. */
@media (max-width: 620px) {
  header.bar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  header.bar h1 { font-size: 14px; }
  .who { font-size: 12px; gap: 8px; }
  .who #whoami { max-width: 130px; }
  nav { order: 3; width: 100%; }
  main { padding: 16px 14px 48px; }
  .panel { padding: 18px 16px; border-radius: 14px; }
  .row > * { flex: 1 1 100%; }
}

main { padding: 24px 20px 64px; max-width: 1180px; margin: 0 auto; }

/* ---- Panels ----------------------------------------------------- */

.panel {
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge), 0 1px 3px rgba(0,0,0,.28);
  padding: 22px;
  margin-bottom: 18px;
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* The note directly under a heading is a subtitle, not a paragraph. */
.panel h2 + .note { margin: 0 0 18px; }
.panel h2:only-child, .panel h2:last-child { margin-bottom: 16px; }

.panel h3 {
  margin: 26px 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 170px; }

.split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---- Controls --------------------------------------------------- */

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background .16s var(--ease), border-color .16s var(--ease),
              box-shadow .16s var(--ease);
}
input:hover, select:hover, textarea:hover { background: var(--hover); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* Every control shows where the keyboard is (2026-10-14 audit, U4). */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--hover);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

select {
  appearance: none; -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7482' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
input[type="date"] { -webkit-appearance: none; appearance: none; }
input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); }

button.btn {
  min-height: 44px;
  padding: 11px 18px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .08s var(--ease), opacity .16s var(--ease);
}
button.btn:hover { background: var(--hover); border-color: #3a4149; }
button.btn:active { transform: scale(.985); }

button.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
  box-shadow: 0 2px 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
button.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

button.btn.danger { color: var(--bad); border-color: rgba(255,107,107,.28); background: transparent; }
button.btn.danger:hover { background: rgba(255,107,107,.09); border-color: rgba(255,107,107,.45); }

button.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
button.btn.wide { width: 100%; }

/* A label and a tight group of buttons — not a form row, which would
   stretch and wrap them raggedly on a phone. */
.dl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.dl-row button.btn { min-height: 44px; padding: 8px 16px; font-size: 13.5px; }

/* ---- Quick-item tiles ------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }

.tile {
  padding: 15px 14px;
  min-height: 68px;
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              transform .08s var(--ease);
}
.tile:hover { background: var(--hover); border-color: var(--hairline-strong); }
.tile:active { transform: scale(.985); }
.tile .sub {
  display: block;
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 400;
}

/* ---- Tables ----------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  padding: 0 12px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }

tbody tr.click { cursor: pointer; transition: background .12s var(--ease); }
tbody tr.click:hover { background: var(--raised); }

.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* ---- Stat rows -------------------------------------------------- */

.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.stat:last-child { border-bottom: 0; }
.stat .k { color: var(--ink-dim); font-size: 14px; }
.stat .v { font-size: 15px; }

.stat.big {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 0;
}
.stat.big .k { font-size: 15px; color: var(--ink); font-weight: 550; }
.stat.big .v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }

/* History's cash panel. The totals used to sit in the table's own
   colours at the foot of the list and read as three more rows (Jay,
   2026-09-09: "need to be separated from the rest"). Now they are a
   tally of their own — darker backing, a stronger green wash — and the
   dim text in this panel is lifted so a time or a reason can be read at
   a glance. */
.cash-panel td.note, .cash-panel .stat .k { color: #c9d0da; }
.cash-tally {
  margin-top: 18px;
  padding: 6px 18px 14px;
  border-radius: var(--r-md, 12px);
  border: 1px solid rgba(48, 209, 88, .28);
  background:
    linear-gradient(135deg, rgba(48, 209, 88, .20), rgba(48, 209, 88, .05) 55%, transparent),
    rgba(0, 0, 0, .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.cash-tally .stat { border-bottom-color: rgba(255,255,255,.08); }
.cash-tally .stat .k { color: var(--ink); }
.cash-tally .stat.big { border-top-color: rgba(48, 209, 88, .35); }

/* What the printer has to say, said where the button is. */
.printer-line { margin: 0 0 10px; }
.printer-line.good { color: var(--good); }
.printer-line.bad { color: var(--bad); }
button.btn.small { padding: 4px 10px; font-size: 12px; min-height: 44px; }   /* a thumb target (audit 2026-09-15/20) */
.slip-preview { display: block; max-width: 360px; width: 100%; margin: 14px auto 0; background: #fff; padding: 8px; border-radius: 6px; }

/* A mid-day count: one row, and a list of the day's counts. */
/* 148: the closing count pop-up's calculator. */
.cc-calc { margin-top: 10px; border: 1px solid var(--line, #333); border-radius: 10px; padding: 8px 10px; }
.cc-calc summary { cursor: pointer; font-weight: 600; }
.cc-calc-show { width: 100%; font: 600 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; margin: 8px 0; }
.cc-calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cc-calc-keys .btn { min-height: 40px; font-size: 16px; }
/* 147: the big-cash count ask (a bar along the top, dismissible) and the Drawer accuracy gauge (Mac Battery's look). */
.count-ask { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 900; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px;
  background: #1c1c1e; color: #e5e5ea; border: 1px solid #3a3a3c; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.count-ask[hidden] { display: none; }
.count-ask-inline { opacity: .85; }   /* a gentle nudge, not a warning (Jay: "if you have time") */
.acc-gauge { background: #111; color: #fff; border-radius: 16px; padding: 16px 18px; margin: 8px 0 12px; max-width: 520px; }
.acc-label { font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.8px; color: #9a9a9a; }
.acc-number { font: 800 88px/1 ui-rounded, system-ui, sans-serif; letter-spacing: -4px; margin: 6px 0; }
.acc-pct { font-size: 32px; letter-spacing: 0; color: #9a9a9a; margin-left: 2px; }
.acc-battery { position: relative; height: 26px; border: 2.5px solid rgba(255,255,255,.9); border-radius: 9px; padding: 3px; margin-right: 8px; }
.acc-fill { height: 100%; border-radius: 6px; }
.acc-nub { position: absolute; right: -8px; top: 6px; width: 4px; height: 10px; border-radius: 0 3px 3px 0; background: rgba(255,255,255,.9); }
.acc-detail { font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #9a9a9a; margin-top: 10px; }
.spot-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.spots { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.spot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px;
  border-radius: var(--r-sm); background: var(--raised); font-size: 13px; }
.spot.off { opacity: .55; }
.spot .t { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.spot .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.spot .note { flex-basis: 100%; margin: 0; }
button.btn.danger.small { margin-left: auto; }

/* Offline: the queue is the whole record, and the screen says so. */
.offline-only { margin: 0 0 12px; }
.queued { padding: 10px 12px; margin-top: 8px; border-radius: var(--r-sm); background: var(--raised); }
.queued .note { margin: 2px 0 0; }

/* A report opens on its figures. */
.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.report-tile { padding: 12px 14px; border-radius: var(--r-md, 12px); background: var(--surface); border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 4px; }
.report-tile .k { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .05em; }
.report-tile .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.report-tile.good .v { color: var(--good); }
.report-tile.bad .v { color: var(--bad); }

/* ---- Small bits ------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 550;
  background: var(--raised);
  color: var(--ink-dim);
  margin: 2px 4px 2px 0;
}
.pill.on    { background: rgba(48,209,88,.14);   color: #86e8a4; }
.pill.admin { background: rgba(255,196,87,.13);  color: var(--warn); }
.pill.bad   { background: rgba(255,107,107,.13); color: var(--bad); }
/* Something incomplete rather than something wrong — a deposit. */
.pill.warn  { background: rgba(255,196,87,.13);  color: var(--warn); }

.note { color: var(--ink-faint); font-size: 13px; }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }

.msg {
  padding: 12px 15px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}
.msg.err { background: rgba(255,107,107,.09);  color: #ffb0b0; border-color: rgba(255,107,107,.24); }
.msg.warn { background: rgba(255,196,87,.09);  color: #ffd98a; border-color: rgba(255,196,87,.26); }
.msg.ok  { background: rgba(61,220,154,.08);   color: #8ceac4; border-color: rgba(61,220,154,.22); }

/* ---- Login ------------------------------------------------------ */

.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

.login {
  width: 100%;
  max-width: 348px;
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: var(--glass-edge), var(--shadow);
}
.login h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.login .note { margin: 0 0 22px; }

.pin-dots { display: flex; gap: 11px; justify-content: center; margin: 20px 0 22px; }
.pin-dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--hover);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.pin-dots i.filled {
  background: var(--accent);
  transform: scale(1.15);
  box-shadow: 0 0 10px var(--accent-glow);
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button {
  padding: 0;
  height: 58px;
  font-size: 22px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .12s var(--ease), transform .08s var(--ease);
}
.keypad button:hover { background: var(--hover); }
.keypad button:active { background: var(--hairline-strong); transform: scale(.95); }

/* ---- Receipt ---------------------------------------------------- */

.receipt-shot {
  max-width: 330px;
  width: 100%;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-sm);
  image-rendering: crisp-edges;
  /* The receipt genuinely is black ink on white paper, so it stays white
     — knocked back so it isn't a glare against everything else. */
  filter: brightness(.9) contrast(1.02);
  box-shadow: var(--shadow);
}

/* ---- Dialog ----------------------------------------------------- */

dialog {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  padding: 0;
  max-width: 620px;
  width: 92%;
  background: rgba(26, 30, 35, .78);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  color: var(--ink);
  box-shadow: var(--glass-edge), 0 24px 70px rgba(0,0,0,.62);
}
dialog::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
dialog .body { padding: 24px; max-height: 86dvh; overflow-y: auto; }
dialog h2 { margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
            padding-right: 36px; }   /* room for the × */

/* The × every pop-up carries (Jay, 2026-09-30). It stays put while the
   body scrolls. The guide has its own Close in the same corner. */
.dialog-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: #1f242a;                    /* solid: a scrolled body passes under it cleanly */
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  z-index: 1;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.dialog-x:hover, .dialog-x:focus-visible { color: var(--ink); background: #2b3037; }
dialog:has(.guide-viewer) .dialog-x { display: none; }

.dialog-actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

/* Without backdrop-filter the translucent surfaces would show the page
   straight through and turn to mush, so fall back to solid ones. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --surface: var(--surface-solid);
    --raised:  #22262c;
    --hover:   #2b3037;
  }
  header.bar { background: #0d0f12; }
  dialog { background: #1a1e23; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* The amount preview, shown while typing: digits are dollars, a point starts the cents (the till rule was retired 2026-09-05). */
.amount-preview { min-height: 16px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* The quantity prompt: what the line comes to, priced live, with the
   tank-minimum choice inline when there is one to make. */
.qty-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 44px; }
.qty-rule { flex: 1 1 auto; }
.qty-total { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qty-waive { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--raised); cursor: pointer; font-size: 14px; }
.qty-waive input { width: auto; margin: 0; }

/* Change to hand back: the total in large type, the sentence, and a tile
   per bill in the app's own colours. */
/* The picture guide (openGuide in app.js): one card at a time, fitted to the
   screen, Back / Next under it, the text guide folded away below. */
.guide-viewer .guide-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.guide-viewer .guide-top h2 { margin: 0; flex: 1 1 auto; }
.guide-viewer .guide-count { color: var(--ink-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.guide-viewer .guide-stage { display: flex; justify-content: center; touch-action: pan-y; }
.guide-viewer .guide-card { display: block; max-width: 100%; max-height: 66dvh; height: auto;
  border-radius: var(--r-md, 12px); user-select: none; -webkit-user-drag: none; }
.guide-viewer .guide-nav { display: flex; gap: 9px; justify-content: space-between; margin-top: 12px; }
.guide-viewer .guide-nav .btn { flex: 1 1 0; }
.guide-viewer .guide-more { margin-top: 16px; }
/* The guides (Lane G, 2026-10-16): the list, the checklist page, the video, Print. */
.guide-viewer .guide-list { display: grid; gap: 10px; }
.guide-viewer .guide-full { text-align: left; }
/* The whole workflow on one page (Jay, 2026-11-01): real text, readable at a glance, searchable. */
.guide-long { max-height: 72dvh; overflow-y: auto; padding-right: 6px; }
.guide-long h3 { margin: 18px 0 4px; }
.guide-long h4 { margin: 14px 0 4px; }
.guide-long .wf-toc li, .guide-long .wf-quick li { margin: 4px 0; }
.guide-long .wf-card { margin: 14px 0 22px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.guide-long .wf-card p { margin: 4px 0; max-width: 62ch; }
.guide-long .wf-kw { font-size: 12px; }
.guide-long .wf-img { display: block; max-width: min(100%, 420px); height: auto; margin-top: 8px; border-radius: var(--r-sm); background: var(--raised); min-height: 80px; }
.guide-viewer .guide-top { flex-wrap: wrap; }
.guide-viewer .guide-top .guide-title-full { order: 5; flex: 1 1 100%; font-size: 19px; }
.guide-viewer .guide-top .guide-count { margin-left: auto; }
.guide-viewer .guide-pick { display: flex; gap: 8px; align-items: stretch; }
.guide-viewer .guide-open { flex: 1 1 auto; text-align: left; display: grid; gap: 4px; padding: 14px 16px;
  min-height: 44px; border-radius: 14px; border: 1px solid var(--line, #2a2f37); background: var(--panel, #12151a);
  color: var(--ink); font: inherit; cursor: pointer; }
.guide-viewer .guide-open:focus-visible { outline: 2px solid var(--accent, #30d158); outline-offset: 2px; }
.guide-viewer .guide-pick-title { font-weight: 650; font-size: 17px; }
.guide-viewer .guide-pick .btn.small { min-height: 44px; }
.guide-viewer .guide-check { width: 100%; max-width: 560px; padding: 8px 4px; }
.guide-viewer .guide-check ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide-viewer .guide-check label { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; }
.guide-viewer .guide-check input { width: 22px; height: 22px; flex: none; }
.guide-viewer .guide-video { display: block; max-width: 100%; max-height: 66dvh; border-radius: 16px; background: #000; }
.guide-viewer .guide-tools { display: flex; gap: 9px; margin-top: 10px; }
.guide-viewer .guide-tools .btn { flex: 1 1 0; }
#guide-print { display: none; }
@media print {
  body.printing-guide > *:not(#guide-print) { display: none !important; }
  body.printing-guide #guide-print { display: block; color: #000; background: #fff; font: 12pt/1.35 -apple-system, sans-serif; }
  #guide-print h1 { font-size: 20pt; margin: 0 0 10pt; }
  #guide-print figure { break-inside: avoid; display: inline-block; width: 48%; margin: 0 1% 12pt; vertical-align: top; }
  #guide-print figure img { width: 100%; height: auto; filter: grayscale(1) contrast(1.15); }
  #guide-print figcaption { margin-top: 4pt; }
  #guide-print .guide-print-check { break-inside: avoid; }
  #guide-print .guide-print-check ul { list-style: none; padding: 0; font-size: 14pt; }
}

.guide-viewer .guide-more summary { cursor: pointer; color: var(--ink-dim); }
.guide-viewer .guide-text { white-space: pre-wrap; max-height: 60vh; overflow: auto; font-size: 13px; }

.change-guide { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-md, 12px);
  background: rgba(48, 209, 88, .08); border: 1px solid rgba(48, 209, 88, .30); }
.change-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.change-head .k { color: var(--ink-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.change-head .v { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.change-say { margin: 8px 0 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.change-note { margin: 8px 0 0; }
.change-note.warn { color: var(--warn); }
.money-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.bill-tile { position: relative; width: 128px; height: 58px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(48,209,88,.55), rgba(48,209,88,.28));
  border: 1.5px solid rgba(48,209,88,.7); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; }
.bill-tile::after { content: ''; position: absolute; inset: 6px; border-radius: 5px; border: 1px solid rgba(6,33,14,.35); }
.bill-tile .c { position: absolute; font-size: 12px; font-weight: 800; opacity: .8; }
.bill-tile .tl { top: 7px; left: 9px; } .bill-tile .tr { top: 7px; right: 9px; }
.bill-tile .bl { bottom: 7px; left: 9px; } .bill-tile .br { bottom: 7px; right: 9px; }
.bill-tile .big, .coin-tile .big { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; }
.coin-tile { position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.18));
  border: 1.5px solid rgba(255,255,255,.6); color: var(--ink);
  display: flex; align-items: center; justify-content: center; }
.coin-tile .big { font-size: 15px; }
.bill-tile .qty, .coin-tile .qty { position: absolute; top: -9px; right: -7px; padding: 2px 7px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Card brands as marks to click, not a menu. */
.card-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.card-tile {
  min-height: 62px; padding: 8px 4px;
  background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r);
  color: var(--ink-dim); font-family: inherit; font-size: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.card-tile.on { border-color: var(--accent); border-width: 2px; color: var(--ink); background: rgba(255,255,255,.09); }
.card-tile .mark { height: 24px; display: flex; align-items: center; justify-content: center; }
.mark-visa { font: italic 900 18px/1 system-ui, sans-serif; color: #1c4fd9; letter-spacing: .5px; }
.mark-mc { position: relative; width: 38px; height: 24px; }
.mark-mc i { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; }
.mark-mc i:first-child { left: 0; background: #eb001b; }
.mark-mc i:last-child { left: 14px; background: rgba(247,158,27,.92); }
.mark-disc { font: 900 12px/1 system-ui, sans-serif; color: var(--ink); display: flex; align-items: center; gap: 3px; }
.mark-disc i { width: 12px; height: 12px; border-radius: 50%; background: #f46f21; display: inline-block; }
.mark-amex { font: 900 12px/1 system-ui, sans-serif; color: #fff; background: #0070bf; padding: 4px 7px; border-radius: 4px; }

/* A split bill: each payment is its own block, numbered. */
.tender { padding: 12px 0 4px; }
.tender + .tender { border-top: 2px solid var(--hairline); margin-top: 8px; padding-top: 14px; }
.tender .n { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }

/* Two-way switches and pick-one chips, for the drawer. */
.tabs { display: flex; background: var(--raised); border-radius: var(--r); padding: 3px; gap: 3px; }
.tab { flex: 1; min-height: 44px; border: 0; border-radius: calc(var(--r) - 3px); background: transparent;
       color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; }
.tab.on { background: var(--accent); color: #06210e; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { padding: 11px 12px; min-height: 44px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--raised);
        color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.chip.on { background: var(--accent); color: #06210e; border-color: var(--accent); }
/* 139: the payment direction switch — one pill with three spots, like a light switch. */
.direction-switch { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--hairline); border-radius: 999px;
  padding: 3px; background: var(--raised); max-width: 100%; }
.direction-switch .chip { border: 0; background: transparent; }
.direction-switch .chip.on { background: var(--accent); }
.direction-switch .chip#autolog-resume { margin-left: 6px; border: 1px solid var(--hairline); }
.num.good { color: #86e8a4; } .num.bad { color: var(--bad); }

/* A repair order is waiting at the counter. No words; the count is the message. */
.pending-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; min-height: 44px; min-width: 44px; border-radius: 999px;
  border: 0; background: var(--accent); color: #06210e; font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; margin-right: 10px; }
.pending-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #06210e; opacity: .8; }

/* Counting the drawer by bill. */
.bills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bill { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; align-items: center;
        gap: 2px 8px; padding: 8px 10px; background: var(--raised); border-radius: var(--r); }
.bill .d { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.bill input { grid-column: 2; grid-row: 1; width: 100%; }
.bill .sub { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.bills .stat.big { grid-column: 1 / -1; }
.bill-est { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 8px 0; }
.est { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--r);
       background: var(--raised); }
.est .d { font-size: 12px; color: var(--ink-dim); }
.est .q { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.est.low { background: rgba(255,196,87,.13); } .est.low .q { color: var(--warn); }

/* One control split down the middle: a secondary action and a green one. */
.split-btn { display: flex; border-radius: var(--r); overflow: hidden; }
.split-btn .btn { flex: 1; border-radius: 0; }
.split-btn .btn + .btn { border-left: 1px solid rgba(0,0,0,.25); }

/* Which database the server is on — on every screen, always. */
.db-banner { font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; margin-left: 10px; }
.db-banner.live { background: rgba(48,209,88,.16); color: var(--good, #30d158); }
.db-banner.view { background: rgba(120,160,255,.14); color: #bcd0ff; border-color: rgba(120,160,255,.35); }
.db-banner.work { background: rgba(255,120,120,.16); color: #ffb3b3; border-color: rgba(255,120,120,.4); }
.db-banner.staging { background: rgba(191,90,242,.18); color: #d9a6ff; border-color: rgba(191,90,242,.4); }
.db-banner.test { background: rgba(255,179,71,.18); color: var(--warn, #ffb347); }
.db-table td.num { text-align: right; }

/* Audit Manager */
.au-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--good, #30d158); margin-right:6px; box-shadow: 0 0 0 0 rgba(48,209,88,.6); animation: au-pulse 2s infinite; }
@keyframes au-pulse { 0% { box-shadow: 0 0 0 0 rgba(48,209,88,.5); } 70% { box-shadow: 0 0 0 7px rgba(48,209,88,0); } 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); } }
.au-new td { animation: au-in 1.6s ease-out; }
@keyframes au-in { from { background: rgba(48,209,88,.22); } to { background: transparent; } }
.au-person.on { outline: 2px solid var(--accent); }

/* A button that reads as a link, for small actions inside a note. */
.linkish { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; color: var(--accent);
           text-decoration: underline; cursor: pointer; }


/* The offline strip, above everything, for as long as it lasts.
   Permanent on purpose: a toast is a message somebody can miss, and the
   thing being missed is "the money you are taking is on this computer and
   nowhere else". */
/* One sticky holder for both strips (app.js topBar): they stack, and the
   header's `top` follows the holder's height (2026-09-24 audit, M7). */
#top-bars {
  position: sticky;
  top: 0;
  z-index: 91;
}

.offline-bar {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #7a5c00;
  background: #fff3cd;
  border-bottom: 1px solid #e0c76b;
}
.offline-bar.bad {
  color: #7f1d1d;
  background: #fee2e2;
  border-bottom-color: #f1a3a3;
}
.offline-bar .btn { margin-left: 6px; padding: 2px 10px; font-size: 12px; }
.offline-bar .note { opacity: .8; }

.dupe-bar {
  /* A day of unlogged payments is many rows: it scrolls inside itself
     rather than covering the screen. */
  max-height: 38vh;
  overflow-y: auto;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #7a4a00;
  background: #ffe8cc;
  border-bottom: 1px solid #e6b877;
}
.dupe-bar .note { opacity: .85; }
.dupe-bar .dupe-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.dupe-bar .dupe-item span { flex: 1; }
.dupe-bar .dupe-item .btn { padding: 2px 10px; font-size: 12px; }

/* The drawer's expected cash, folded away from whoever counts it, so the
   count stays blind (2026-09-24 audit, M4). */
details.expected-cash { margin: 4px 0 6px; }
details.expected-cash > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* A panel folded shut by default — Admin's Service credentials (Jay,
   2026-09-26: "a big block of text I don't need day to day"). */
details.panel.fold > summary { cursor: pointer; list-style: none; display: flex;
  align-items: baseline; gap: 10px; min-height: 44px; }
details.panel.fold > summary::-webkit-details-marker { display: none; }
details.panel.fold > summary h2 { margin: 0; }
details.panel.fold > summary::before { content: "▸"; color: var(--ink-faint); }
details.panel.fold[open] > summary::before { content: "▾"; }

/* Ringing with no drawer open (Jay, 2026-09-26): the red flag across the
   top of the register. The sale still rings — into the after-hours
   envelope. */
.after-hours-flag { border: 2px solid #ff453a; background: rgba(255,69,58,.16); }
.after-hours-flag h2 { color: #ff6961; margin-top: 0; }

/* Admin → Background glow: a swatch big enough to tap. */
#glow-color { width: 64px; min-width: 64px; height: 44px; padding: 4px; cursor: pointer; }
#glow-strength { width: 100%; min-height: 44px; accent-color: var(--accent); }

/* Why the drawer is off from Tekmetric (Jay, 2026-09-30; Lane D; said
   simply 2026-10-01): under the Tekmetric line, at most two short lines
   for everyone, then an admin's "Details", closed by default. Each line
   inside: RO and customer, which side it moves, amount · tender · time,
   the reason, and the existing fixes. */
.tw-host { margin: 2px 0 8px; }
/* Jay's live test 10-29: how the expected cash is worked out, on the close's confirm step. */
.expected-why { margin: 2px 0 8px; }
.expected-lines { margin: 4px 0 0; padding-left: 18px; font-variant-numeric: tabular-nums; }
/* Jay's live test 10-29: the short Tekmetric summary — one line of figures, at most three reasons. */
.tek-short { margin: 2px 0 8px; }
.tek-short-head { margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.tek-short-lines { margin: 0; padding-left: 18px; }
.tek-short-lines li { margin: 2px 0; font-variant-numeric: tabular-nums; }
.tek-staff { margin: -4px 0 6px; }
.tek-staff-line { margin: 2px 0; color: var(--ink); }
.tw-counter, .tw-summary { margin: 2px 0 6px; }
details.tw-box { border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  background: var(--raised); padding: 4px 10px 8px; }
details.tw-box > summary { cursor: pointer; min-height: 44px; display: list-item; padding: 12px 0;
  font-size: 13px; line-height: 1.4; color: var(--ink-dim); }
details.tw-box > summary b { color: var(--ink); }
.tw-lines { list-style: none; margin: 4px 0 0; padding: 0; }
.tw-line { padding: 8px 0; border-top: 1px solid var(--hairline); min-width: 0; }
.tw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  flex-wrap: wrap; }
.tw-what { font-weight: 600; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.tw-side { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-dim);
  white-space: nowrap; }
.tw-side.tw-pos { color: var(--warn); }
.tw-side.tw-tek { color: var(--bad); }
.tw-side.tw-cash { color: var(--ink-dim); font-style: italic; }
.tw-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; overflow-wrap: anywhere; }
.tw-reason { font-size: 13px; color: var(--ink); margin: 4px 0 0; line-height: 1.4; }
.tw-receipts { margin-top: 4px; overflow-wrap: anywhere; }
.tw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tw-total { font-size: 13px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--hairline); }
.tw-total.good { color: var(--good); }
.tw-total.bad { color: var(--bad); }
.tw-cash { margin: 6px 0 0; }

/* The Parts page (Lane I, 084): parts grouped by RO, a vendor colour each. */
.pb-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.pb-head h2 { margin: 0; }
.pb-head .btn { margin-left: auto; }
.pb-head .btn + .btn { margin-left: 6px; }
/* Open / Invoiced (Lane P, 2026-10-29): a segmented control, unlike the filter chips under it. */
#pb-tabs { display: inline-flex; gap: 0; border: 1px solid var(--hairline-strong); border-radius: 10px; overflow: hidden; margin: 12px 0 0; }
.pb-tab { border: 0; background: var(--raised); color: var(--ink); padding: 8px 18px; font: inherit; font-size: 15px;
          font-weight: 600; cursor: pointer; min-height: 40px; }
.pb-tab + .pb-tab { border-left: 1px solid var(--hairline-strong); }
.pb-tab span { color: var(--ink-dim); margin-left: 4px; font-weight: 400; }
.pb-tab.on { background: var(--accent); color: var(--accent-ink); }
.pb-tab.on span { color: inherit; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.pb-chip { border: 1px solid var(--hairline-strong); background: var(--raised); color: var(--ink);
           border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.pb-chip span { color: var(--ink-dim); margin-left: 2px; }
.pb-chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pb-chip.on span { color: inherit; }
.pb-filters { margin-bottom: 10px; }
.pb-ro { border: 1px solid var(--hairline); border-radius: var(--r); margin: 12px 0; overflow: hidden; }
.pb-ro > header { padding: 8px 12px; background: var(--raised); border-bottom: 1px solid var(--hairline);
                  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pb-part { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 230px); gap: 12px; padding: 10px 12px;
           border-top: 1px solid var(--hairline); align-items: start; }
.pb-ro > header + .pb-part { border-top: 0; }
.pb-img { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; font-size: 26px;
          background: color-mix(in srgb, var(--vc) 22%, transparent); border: 2px solid var(--vc); }
.pb-name { font-weight: 600; overflow-wrap: anywhere; }
.pb-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.vchip { color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pb-badge { color: var(--warn); font-size: 13px; margin-top: 4px; }
.pb-sync { font-size: 13px; margin-top: 4px; color: var(--ink-dim); }
.pb-sync.ok { color: var(--good); }
.pb-sync.bad { color: var(--bad); }
.pb-sync .btn { margin-left: 6px; padding: 2px 10px; }
.pb-status { font-weight: 600; }
.pb-status.late { color: var(--bad); }
.pb-status.st-credit_received, .pb-status.st-in_car { color: var(--good); }
.pb-status.st-marked_return, .pb-status.st-return_shipped { color: var(--warn); }
.pb-detail { margin-top: 2px; }
.pb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pb-menu { display: grid; gap: 8px; margin: 10px 0; }
.pb-menu .btn { text-align: left; }
@media (max-width: 640px) {
  .pb-part { grid-template-columns: 44px minmax(0, 1fr); }
  .pb-img { width: 44px; height: 44px; font-size: 22px; }
  .pb-side { grid-column: 1 / -1; }
}

/* §9 Logs screen (2026-10-04): an error or a failed job/call stands out. */
tr.err-row td { color: var(--bad); }

/* What's new (release notes, 2026-10-04): a readable column, a dot on the
   header button while this browser hasn't seen the newest note. */
.whats-new { max-width: 640px; }
.whats-new h2 { margin-top: 0; }
.whats-new-note { border-top: 1px solid rgba(127,127,127,.25); padding-top: 10px; margin-top: 12px; }
.whats-new-note h3 { margin: 0 0 4px; font-size: 16px; }
.whats-new-note h4 { margin: 10px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.whats-new-note ul { margin: 0; padding-left: 20px; }
.whats-new-note li { margin: 3px 0; line-height: 1.4; }
.whats-new-img { display: block; max-width: 100%; margin: 10px 0; border-radius: 8px; border: 1px solid rgba(127,127,127,.25); }
.whats-new-older summary { cursor: pointer; margin-top: 14px; }
#open-whats-new.has-news { position: relative; }
#open-whats-new.has-news::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
  border-radius: 50%; background: #e5484d; }
/* An RO number that opens its work order in Tekmetric (2026-10-14). */
.ro-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; cursor: pointer; }
.ro-link:hover { text-decoration-style: solid; }

/* ------------------------------------------------------------------ *
 * "What are you doing here?" (Jay, 2026-10-16 19:37): a side-eye that
 * plays while the drawer opens after hours with a PIN. Our own drawing —
 * no outside GIF. Tap, Esc, × or 4 seconds closes it.
 * ------------------------------------------------------------------ */
.sideeye-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999;
  display: flex; align-items: center; justify-content: center; animation: sideeye-in .2s ease-out; }
.sideeye-card { position: relative; background: #fff; color: #111; border-radius: 22px; padding: 26px 30px 22px;
  text-align: center; max-width: 340px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.sideeye-card .x { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 26px; cursor: pointer; }
.sideeye-face { width: 170px; height: 170px; margin: 0 auto 10px; display: block; animation: sideeye-tilt 1.6s ease-in-out infinite; }
.sideeye-face .pupil { animation: sideeye-look 1.6s ease-in-out infinite; }
.sideeye-face .brow { animation: sideeye-brow 1.6s ease-in-out infinite; transform-origin: center; }
.sideeye-line { font-size: 22px; font-weight: 700; margin: 4px 0 2px; }
.sideeye-sub { color: #666; font-size: 14px; }
@keyframes sideeye-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sideeye-look { 0%, 15% { transform: translateX(0); } 35%, 70% { transform: translateX(-9px); } 85%, 100% { transform: translateX(6px); } }
@keyframes sideeye-brow { 0%, 25% { transform: translateY(0) rotate(0); } 40%, 75% { transform: translateY(-4px) rotate(-6deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes sideeye-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  .sideeye-face, .sideeye-face .pupil, .sideeye-face .brow, .sideeye-scrim { animation: none; }
}

/* 136: the Tekmetric mirror (tekmirror.js) */
.tm-diff { font-family: ui-monospace, Menlo, monospace; font-size: 12px; max-height: 40vh; overflow: auto;
  border: 1px solid var(--line, #333); border-radius: 8px; padding: 8px; white-space: pre-wrap; word-break: break-all; }
.tm-diff .tm-add { color: #3fbf6f; }
.tm-diff .tm-del { color: #e5534b; }
.tm-body { font-size: 12px; max-height: 40vh; overflow: auto; white-space: pre-wrap; word-break: break-all; }
tr.tm-new td { font-weight: 600; }

/* Jay 10-30: last night's close on the Drawer screen before the till opens (read-only). */
.last-close-bills .bill { display: flex; align-items: center; gap: 8px; }
.last-close-bills .bill .q { font-weight: 600; min-width: 2ch; text-align: right; }
.last-close-bills .bill.empty { opacity: .45; }

/* ===== Looks and layouts (Jay, 2026-10-31; migration 152). 'classic' = no rules at all; the owner picks one in the
   Look dropdown, everyone else stays on classic unless the "Everyone uses this look" tick is used. ===== */
body[data-look="ledger"] {
  --bg: #0c1110; --surface: #121a18; --surface-solid: #121a18; --raised: #1a2623; --hover: #1a2623;
  --ink: #e8efec; --ink-dim: #9db0aa; --ink-faint: #7c8f89;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #5fd37a; --accent-deep: #5fd37a; --accent-ink: #07110b; --accent-glow: rgba(95,211,122,.22);
  --r-sm: 8px; --r: 12px; --r-lg: 14px;
  --blur: none; --glass-edge: none;
  background: #0c1110; font-family: "Inter",-apple-system,system-ui,sans-serif;
}
body[data-look="ledger"] header.bar { background: #121a18; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="ledger"] nav button.on { box-shadow: none; }
body[data-look="cards"] {
  --bg: #0d0f1a; --surface: #161a2b; --surface-solid: #161a2b; --raised: #1f2540; --hover: #1f2540;
  --ink: #eceffc; --ink-dim: #a3abc8; --ink-faint: #8089a8;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #8b9cff; --accent-deep: #8b9cff; --accent-ink: #0d0f1a; --accent-glow: rgba(139,156,255,.22);
  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --blur: none; --glass-edge: none;
  background: #0d0f1a; font-family: "DM Sans",-apple-system,system-ui,sans-serif;
}
body[data-look="cards"] header.bar { background: #161a2b; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="cards"] nav button.on { box-shadow: none; }
body[data-look="console"] {
  --bg: #080b0c; --surface: #0e1415; --surface-solid: #0e1415; --raised: #16201f; --hover: #16201f;
  --ink: #d7ece9; --ink-dim: #86a7a3; --ink-faint: #6b8884;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #3ddbd0; --accent-deep: #3ddbd0; --accent-ink: #04201e; --accent-glow: rgba(61,219,208,.22);
  --r-sm: 2px; --r: 4px; --r-lg: 6px;
  --blur: none; --glass-edge: none;
  background: #080b0c; font-family: ui-monospace,"SF Mono",Menlo,monospace;
}
body[data-look="console"] header.bar { background: #0e1415; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="console"] nav button.on { box-shadow: none; }
body[data-look="slate"] {
  --bg: #0b1118; --surface: #111b26; --surface-solid: #111b26; --raised: #1a2837; --hover: #1a2837;
  --ink: #e6eef7; --ink-dim: #9fb2c6; --ink-faint: #7f93a8;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #4aa3ff; --accent-deep: #4aa3ff; --accent-ink: #04121f; --accent-glow: rgba(74,163,255,.22);
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --blur: none; --glass-edge: none;
  background: #0b1118; font-family: -apple-system,system-ui,sans-serif;
}
body[data-look="slate"] header.bar { background: #111b26; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="slate"] nav button.on { box-shadow: none; }
body[data-look="ink"] {
  --bg: #000000; --surface: #0a0a0a; --surface-solid: #0a0a0a; --raised: #161616; --hover: #161616;
  --ink: #f5f5f0; --ink-dim: #b5b5ad; --ink-faint: #8a8a84;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #f5f5f0; --accent-deep: #f5f5f0; --accent-ink: #000000; --accent-glow: rgba(245,245,240,.22);
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --blur: none; --glass-edge: none;
  background: #000000; font-family: ui-serif,Georgia,serif;
}
body[data-look="ink"] header.bar { background: #0a0a0a; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="ink"] nav button.on { box-shadow: none; }
body[data-look="ember"] {
  --bg: #150b0e; --surface: #201217; --surface-solid: #201217; --raised: #2d1a21; --hover: #2d1a21;
  --ink: #fbecef; --ink-dim: #d0a7b0; --ink-faint: #a98089;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #ff6f91; --accent-deep: #ff6f91; --accent-ink: #2a0610; --accent-glow: rgba(255,111,145,.22);
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --blur: none; --glass-edge: none;
  background: #150b0e; font-family: -apple-system,system-ui,sans-serif;
}
body[data-look="ember"] header.bar { background: #201217; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="ember"] nav button.on { box-shadow: none; }
body[data-look="forest"] {
  --bg: #0a110c; --surface: #111b14; --surface-solid: #111b14; --raised: #1a2a1f; --hover: #1a2a1f;
  --ink: #e7f0e5; --ink-dim: #a2b8a0; --ink-faint: #7f967d;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #a6d96a; --accent-deep: #a6d96a; --accent-ink: #0c1704; --accent-glow: rgba(166,217,106,.22);
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --blur: none; --glass-edge: none;
  background: #0a110c; font-family: ui-rounded,-apple-system,sans-serif;
}
body[data-look="forest"] header.bar { background: #111b14; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="forest"] nav button.on { box-shadow: none; }
body[data-look="mono"] {
  --bg: #0e0e0e; --surface: #161616; --surface-solid: #161616; --raised: #222222; --hover: #222222;
  --ink: #ededed; --ink-dim: #a8a8a8; --ink-faint: #828282;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #cfcfcf; --accent-deep: #cfcfcf; --accent-ink: #0e0e0e; --accent-glow: rgba(207,207,207,.22);
  --r-sm: 0px; --r: 2px; --r-lg: 4px;
  --blur: none; --glass-edge: none;
  background: #0e0e0e; font-family: ui-monospace,"SF Mono",Menlo,monospace;
}
body[data-look="mono"] header.bar { background: #161616; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="mono"] nav button.on { box-shadow: none; }
body[data-look="plum"] {
  --bg: #120b1a; --surface: #1b1226; --surface-solid: #1b1226; --raised: #271a38; --hover: #271a38;
  --ink: #f0e9fb; --ink-dim: #b7a6d3; --ink-faint: #917fb0;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #c79bff; --accent-deep: #c79bff; --accent-ink: #190a2b; --accent-glow: rgba(199,155,255,.22);
  --r-sm: 10px; --r: 14px; --r-lg: 20px;
  --blur: none; --glass-edge: none;
  background: #120b1a; font-family: -apple-system,system-ui,sans-serif;
}
body[data-look="plum"] header.bar { background: #1b1226; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="plum"] nav button.on { box-shadow: none; }
body[data-look="ocean"] {
  --bg: #071318; --surface: #0c1e26; --surface-solid: #0c1e26; --raised: #133039; --hover: #133039;
  --ink: #e3f4f8; --ink-dim: #92bcc7; --ink-faint: #70a0ad;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #36d3f0; --accent-deep: #36d3f0; --accent-ink: #02212a; --accent-glow: rgba(54,211,240,.22);
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --blur: none; --glass-edge: none;
  background: #071318; font-family: -apple-system,system-ui,sans-serif;
}
body[data-look="ocean"] header.bar { background: #0c1e26; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="ocean"] nav button.on { box-shadow: none; }
body[data-look="sand"] {
  --bg: #14110c; --surface: #1e1a13; --surface-solid: #1e1a13; --raised: #2b251b; --hover: #2b251b;
  --ink: #f3eadb; --ink-dim: #c3b69d; --ink-faint: #9d9078;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #e6c07b; --accent-deep: #e6c07b; --accent-ink: #241a05; --accent-glow: rgba(230,192,123,.22);
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --blur: none; --glass-edge: none;
  background: #14110c; font-family: ui-serif,Georgia,serif;
}
body[data-look="sand"] header.bar { background: #1e1a13; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="sand"] nav button.on { box-shadow: none; }
body[data-look="neon"] {
  --bg: #020504; --surface: #08100c; --surface-solid: #08100c; --raised: #0f1c15; --hover: #0f1c15;
  --ink: #eafff2; --ink-dim: #8fd7a8; --ink-faint: #6fb089;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #b6ff3b; --accent-deep: #b6ff3b; --accent-ink: #0d1a00; --accent-glow: rgba(182,255,59,.22);
  --r-sm: 0px; --r: 2px; --r-lg: 4px;
  --blur: none; --glass-edge: none;
  background: #020504; font-family: ui-monospace,"SF Mono",Menlo,monospace;
}
body[data-look="neon"] header.bar { background: #08100c; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="neon"] nav button.on { box-shadow: none; }
body[data-look="steel"] {
  --bg: #101214; --surface: #181b1e; --surface-solid: #181b1e; --raised: #23272b; --hover: #23272b;
  --ink: #e9ecef; --ink-dim: #aab0b7; --ink-faint: #868d95;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #8fb4ff; --accent-deep: #8fb4ff; --accent-ink: #0a1428; --accent-glow: rgba(143,180,255,.22);
  --r-sm: 4px; --r: 6px; --r-lg: 8px;
  --blur: none; --glass-edge: none;
  background: #101214; font-family: -apple-system,system-ui,sans-serif;
  --row-pad: 4px;
}
body[data-look="steel"] header.bar { background: #181b1e; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="steel"] nav button.on { box-shadow: none; }
body[data-look="midnight"] {
  --bg: #05060f; --surface: #0b0d1e; --surface-solid: #0b0d1e; --raised: #141735; --hover: #141735;
  --ink: #eef0ff; --ink-dim: #a9aed9; --ink-faint: #858bb8;
  --hairline: rgba(255,255,255,.08); --hairline-strong: rgba(255,255,255,.16);
  --accent: #7aa2ff; --accent-deep: #7aa2ff; --accent-ink: #05102e; --accent-glow: rgba(122,162,255,.22);
  --r-sm: 12px; --r: 16px; --r-lg: 22px;
  --blur: none; --glass-edge: none;
  background: #05060f; font-family: -apple-system,system-ui,sans-serif;
  font-size: 17px;
}
body[data-look="midnight"] header.bar { background: #0b0d1e; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-look="midnight"] nav button.on { box-shadow: none; }

/* the Look / Layout switcher itself (rendered only for the owner) */
#look-switcher { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-dim); flex: none; }
#look-switcher select { font: inherit; font-size: 12px; background: var(--raised); color: var(--ink);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 4px 6px; max-width: 150px; }
#look-switcher .look-share { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* on a phone the menus wrap under the header instead of making the whole page wider than the screen (gate 1029-t: the
   guide cards' History pages came out 481 px wide at 390) */
@media (max-width: 560px) {
  #look-switcher { flex: 1 1 100%; flex-wrap: wrap; max-width: 100%; gap: 6px 10px; }
  #look-switcher label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
  #look-switcher select { max-width: 44vw; }
}

/* tab layouts */
.nav-more, .nav-sec { position: relative; }
.nav-more > summary, .nav-sec > summary { list-style: none; cursor: pointer; padding: 7px 13px; min-height: 44px;
  display: inline-flex; align-items: center; color: var(--ink-dim); border-radius: 999px; font-size: 14px; user-select: none; }
.nav-more > summary::-webkit-details-marker, .nav-sec > summary::-webkit-details-marker { display: none; }
.nav-more > summary::after { content: " ▾"; font-size: 11px; margin-left: 4px; }
.nav-more[open] > summary, .nav-more > summary:hover { background: var(--raised); color: var(--ink); }
.nav-pop { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 200px; display: flex; flex-direction: column;
  background: var(--surface-solid); border: 1px solid var(--hairline-strong); border-radius: var(--r); padding: 6px;
  box-shadow: var(--shadow); }
.nav-pop button { text-align: left; border-radius: var(--r-sm); }
nav:has(.nav-more) { overflow: visible; }
body[data-layout="twolevel"] header.bar { flex-wrap: wrap; height: auto; padding-bottom: 6px; }
body[data-layout="twolevel"] nav { flex-wrap: wrap; flex: 1 1 100%; order: 3; border-top: 1px solid var(--hairline); padding-top: 6px; }
body[data-layout="twolevel"] .nav-sub { flex: 1 1 100%; display: flex; gap: 4px; padding: 4px 0; }
body[data-layout="twolevel"] .nav-sub button { min-height: 34px; font-size: 13px; background: var(--raised); }
body[data-layout="twolevel"] .nav-sub button.on { background: var(--accent); }
body[data-layout="rail"] #app { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: auto 1fr; }
body[data-layout="rail"] header.bar { grid-column: 1 / -1; }
body[data-layout="rail"] nav { grid-column: 1; grid-row: 2; flex-direction: column; overflow: visible; position: sticky;
  top: 56px; align-self: start; padding: 12px 8px; gap: 2px; border-right: 1px solid var(--hairline); height: calc(100vh - 56px); overflow-y: auto; }
body[data-layout="rail"] nav button { text-align: left; border-radius: var(--r-sm); }
body[data-layout="rail"] .nav-sec > summary { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; padding: 10px 10px 4px; min-height: 0; }
body[data-layout="rail"] main#view { grid-column: 2; grid-row: 2; min-width: 0; }
@media (max-width: 760px) { body[data-layout="rail"] #app { display: block; } body[data-layout="rail"] nav { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; } }

/* the People list: one compact line per person, in every look (Jay, 2026-10-31: "I shouldn't have to scroll 2x") */
.people-list table td, .people-list table th { padding-top: var(--row-pad, 6px); padding-bottom: var(--row-pad, 6px); }
.people-list table { font-size: 14px; }
.person-menu > summary { cursor: pointer; list-style: none; display: inline-block; padding: 3px 10px; border-radius: var(--r-sm); background: var(--raised); font-size: 13px; }
.person-menu > summary::-webkit-details-marker { display: none; }
.person-menu[open] > summary { background: var(--hover); }
.person-menu-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.people-list tbody tr { height: 40px; }
.people-inactive > summary { cursor: pointer; padding: 8px 0; color: var(--ink-dim); font-size: 13px; }

/* Settings/Admin layouts: sections folded into one-line rows (see foldSections in app.js) */
body[data-layout="rows"] .fold-row, body[data-layout="attention"] .fold-row, body[data-layout="sideindex"] .fold-row { border-top: 1px solid var(--hairline); }
body[data-layout="rows"] .fold-row > summary, body[data-layout="attention"] .fold-row > summary, body[data-layout="sideindex"] .fold-row > summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  height: 48px; font-size: 15px; font-weight: 600; }
body[data-layout="rows"] .fold-row > summary::after, body[data-layout="attention"] .fold-row > summary::after, body[data-layout="sideindex"] .fold-row > summary::after { content: "›"; color: var(--ink-dim); }
body[data-layout="rows"] .fold-row[open] > summary::after, body[data-layout="attention"] .fold-row[open] > summary::after, body[data-layout="sideindex"] .fold-row[open] > summary::after { content: "⌄"; }
body[data-layout="attention"] .fold-row.needs-look > summary, body[data-layout="sideindex"] .fold-row.needs-look > summary { color: var(--bad); }
body[data-layout="sideindex"] .panel.has-side-index { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 18px; align-items: start; }
body[data-layout="sideindex"] .panel.has-side-index > * { grid-column: 2; }
body[data-layout="sideindex"] .panel.has-side-index > .side-index { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 8px;
  display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 80px); overflow: auto; }
.side-index button { text-align: left; background: transparent; border: 0; color: var(--ink-dim); padding: 6px 10px; border-radius: var(--r-sm); font-size: 13px; min-height: 30px; cursor: pointer; }
.side-index button:hover { background: var(--hover); color: var(--ink); }
.side-index button.needs-look { color: var(--bad); }
@media (max-width: 760px) { body[data-layout="sideindex"] .panel.has-side-index { display: block; }
  body[data-layout="sideindex"] .side-index { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; } }
.fold-row > summary::-webkit-details-marker { display: none; }
body[data-layout="groups"] nav, body[data-layout="tidy"] nav { overflow: visible; }
.nav-x { align-self: flex-end; min-height: 32px !important; padding: 0 10px !important; font-size: 18px; color: var(--ink-dim); }
.nav-x { align-self: flex-end; min-height: 32px !important; padding: 0 10px !important; font-size: 18px; color: var(--ink-dim); }
#look-badge { position: fixed; right: 10px; bottom: 10px; z-index: 60; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  font-variant-numeric: tabular-nums; background: var(--raised); color: var(--ink); border: 1px solid var(--hairline-strong); pointer-events: none; opacity: .85; }
/* Report looks (Jay, 2026-10-31): 22 ways the Reports screen can look. They re-skin only #r-out (variables first, then shape),
   leave every other screen on Classic, and are picked from the same Look menu (ids rpt-*, numbers 16-37). */
body[data-rlook="rpt-ledger"] #r-out { --surface: #0c1110; --surface-solid: #0c1110; --raised: #121a18; --ink: #e8efec; --ink-dim: #9db0aa;
  --hairline: #22302c; --hairline-strong: #22302c; --accent: #5fd37a; --r-md: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-ledger"] #r-out .panel, body[data-rlook="rpt-ledger"] #r-out .report-tile { background: #0c1110; color: #e8efec; border: 1px solid #22302c; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-ledger"] #r-out .report-tile { background: #121a18; }
body[data-rlook="rpt-ledger"] #r-out .report-tile .v, body[data-rlook="rpt-ledger"] #r-out .stat .v, body[data-rlook="rpt-ledger"] #r-out td.num { color: #5fd37a; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-ledger"] #r-out h2, body[data-rlook="rpt-ledger"] #r-out .stat.big .v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-ledger"] #r-out .report-tile, body[data-rlook="rpt-ledger"] #r-out .panel { border-radius: 0; } body[data-rlook="rpt-ledger"] #r-out table { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-cards"] #r-out { --surface: #0d0f1a; --surface-solid: #0d0f1a; --raised: #161a2b; --ink: #eceffc; --ink-dim: #a3abc8;
  --hairline: #2a3050; --hairline-strong: #2a3050; --accent: #8b9cff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-cards"] #r-out .panel, body[data-rlook="rpt-cards"] #r-out .report-tile { background: #0d0f1a; color: #eceffc; border: 1px solid #2a3050; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-cards"] #r-out .report-tile { background: #161a2b; }
body[data-rlook="rpt-cards"] #r-out .report-tile .v, body[data-rlook="rpt-cards"] #r-out .stat .v, body[data-rlook="rpt-cards"] #r-out td.num { color: #8b9cff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-cards"] #r-out h2, body[data-rlook="rpt-cards"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-console"] #r-out { --surface: #080b0c; --surface-solid: #080b0c; --raised: #0e1415; --ink: #d7ece9; --ink-dim: #86a7a3;
  --hairline: #1b2a2d; --hairline-strong: #1b2a2d; --accent: #3ddbd0; --r-md: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-console"] #r-out .panel, body[data-rlook="rpt-console"] #r-out .report-tile { background: #080b0c; color: #d7ece9; border: 1px solid #1b2a2d; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-console"] #r-out .report-tile { background: #0e1415; }
body[data-rlook="rpt-console"] #r-out .report-tile .v, body[data-rlook="rpt-console"] #r-out .stat .v, body[data-rlook="rpt-console"] #r-out td.num { color: #3ddbd0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-console"] #r-out h2, body[data-rlook="rpt-console"] #r-out .stat.big .v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-console"] #r-out .report-tile, body[data-rlook="rpt-console"] #r-out .panel { border-radius: 0; } body[data-rlook="rpt-console"] #r-out table { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-receipt-tape"] #r-out { --surface: #14120e; --surface-solid: #14120e; --raised: #1d1a14; --ink: #efe9d8; --ink-dim: #a79f88;
  --hairline: #4a4536; --hairline-strong: #4a4536; --accent: #efe9d8; --r-md: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-receipt-tape"] #r-out .panel, body[data-rlook="rpt-receipt-tape"] #r-out .report-tile { background: #14120e; color: #efe9d8; border: 1px solid #4a4536; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-receipt-tape"] #r-out .report-tile { background: #1d1a14; }
body[data-rlook="rpt-receipt-tape"] #r-out .report-tile .v, body[data-rlook="rpt-receipt-tape"] #r-out .stat .v, body[data-rlook="rpt-receipt-tape"] #r-out td.num { color: #efe9d8; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-receipt-tape"] #r-out h2, body[data-rlook="rpt-receipt-tape"] #r-out .stat.big .v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-receipt-tape"] #r-out { max-width: 340px; margin: 0 auto; } body[data-rlook="rpt-receipt-tape"] #r-out .panel, body[data-rlook="rpt-receipt-tape"] #r-out .report-tile { border-style: dashed; border-radius: 2px; } body[data-rlook="rpt-receipt-tape"] #r-out .report-tiles { grid-template-columns: 1fr; } body[data-rlook="rpt-receipt-tape"] #r-out .report-tile { flex-direction: row; justify-content: space-between; border: 0; border-bottom: 1px dotted var(--hairline); border-radius: 0; background: transparent; } body[data-rlook="rpt-receipt-tape"] #r-out .report-tile .v { color: var(--ink); font-size: 15px; }
body[data-rlook="rpt-newsprint"] #r-out { --surface: #121110; --surface-solid: #121110; --raised: #1a1917; --ink: #f0ece4; --ink-dim: #a8a296;
  --hairline: #3a3732; --hairline-strong: #3a3732; --accent: #d9d2c3; --r-md: 10px; font-family: Georgia, "Times New Roman", serif; }
body[data-rlook="rpt-newsprint"] #r-out .panel, body[data-rlook="rpt-newsprint"] #r-out .report-tile { background: #121110; color: #f0ece4; border: 1px solid #3a3732; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-newsprint"] #r-out .report-tile { background: #1a1917; }
body[data-rlook="rpt-newsprint"] #r-out .report-tile .v, body[data-rlook="rpt-newsprint"] #r-out .stat .v, body[data-rlook="rpt-newsprint"] #r-out td.num { color: #d9d2c3; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-newsprint"] #r-out h2, body[data-rlook="rpt-newsprint"] #r-out .stat.big .v { font-family: Georgia, "Times New Roman", serif; }
body[data-rlook="rpt-newsprint"] #r-out h2 { font-size: 24px; line-height: 1.1; border-bottom: 3px double var(--ink); padding-bottom: 6px; } body[data-rlook="rpt-newsprint"] #r-out .report-tile { border: 0; border-radius: 0; padding-left: 0; background: transparent; }
body[data-rlook="rpt-big-numbers"] #r-out { --surface: #0b1118; --surface-solid: #0b1118; --raised: #111b26; --ink: #e6eef7; --ink-dim: #9fb2c6;
  --hairline: #1c2a3a; --hairline-strong: #1c2a3a; --accent: #4aa3ff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-big-numbers"] #r-out .panel, body[data-rlook="rpt-big-numbers"] #r-out .report-tile { background: #0b1118; color: #e6eef7; border: 1px solid #1c2a3a; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-big-numbers"] #r-out .report-tile { background: #111b26; }
body[data-rlook="rpt-big-numbers"] #r-out .report-tile .v, body[data-rlook="rpt-big-numbers"] #r-out .stat .v, body[data-rlook="rpt-big-numbers"] #r-out td.num { color: #4aa3ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-big-numbers"] #r-out h2, body[data-rlook="rpt-big-numbers"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-big-numbers"] #r-out .report-tiles { grid-template-columns: 1fr; } body[data-rlook="rpt-big-numbers"] #r-out .report-tile { border: 0; background: transparent; padding: 2px 0; } body[data-rlook="rpt-big-numbers"] #r-out .report-tile .v { font-size: 38px; line-height: 1.1; }
body[data-rlook="rpt-bars"] #r-out { --surface: #0e1210; --surface-solid: #0e1210; --raised: #141b16; --ink: #e7f0e5; --ink-dim: #a2b8a0;
  --hairline: #25402b; --hairline-strong: #25402b; --accent: #a6d96a; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-bars"] #r-out .panel, body[data-rlook="rpt-bars"] #r-out .report-tile { background: #0e1210; color: #e7f0e5; border: 1px solid #25402b; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-bars"] #r-out .report-tile { background: #141b16; }
body[data-rlook="rpt-bars"] #r-out .report-tile .v, body[data-rlook="rpt-bars"] #r-out .stat .v, body[data-rlook="rpt-bars"] #r-out td.num { color: #a6d96a; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-bars"] #r-out h2, body[data-rlook="rpt-bars"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-bars"] #r-out tbody tr { background: linear-gradient(90deg, var(--hairline) 38%, transparent 38%); } body[data-rlook="rpt-bars"] #r-out td { border: 0; }
body[data-rlook="rpt-dense-grid"] #r-out { --surface: #101214; --surface-solid: #101214; --raised: #181b1e; --ink: #e9ecef; --ink-dim: #aab0b7;
  --hairline: #2a2f34; --hairline-strong: #2a2f34; --accent: #8fb4ff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-dense-grid"] #r-out .panel, body[data-rlook="rpt-dense-grid"] #r-out .report-tile { background: #101214; color: #e9ecef; border: 1px solid #2a2f34; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-dense-grid"] #r-out .report-tile { background: #181b1e; }
body[data-rlook="rpt-dense-grid"] #r-out .report-tile .v, body[data-rlook="rpt-dense-grid"] #r-out .stat .v, body[data-rlook="rpt-dense-grid"] #r-out td.num { color: #8fb4ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-dense-grid"] #r-out h2, body[data-rlook="rpt-dense-grid"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-dense-grid"] #r-out { font-size: 12px; } body[data-rlook="rpt-dense-grid"] #r-out .report-tiles { grid-template-columns: repeat(4, 1fr); } body[data-rlook="rpt-dense-grid"] #r-out .report-tile .v { font-size: 15px; } body[data-rlook="rpt-dense-grid"] #r-out td, body[data-rlook="rpt-dense-grid"] #r-out th, body[data-rlook="rpt-dense-grid"] #r-out .stat { padding-top: 3px; padding-bottom: 3px; }
body[data-rlook="rpt-swiss"] #r-out { --surface: #0a0a0a; --surface-solid: #0a0a0a; --raised: #141414; --ink: #f5f5f0; --ink-dim: #b5b5ad;
  --hairline: #2a2a2a; --hairline-strong: #2a2a2a; --accent: #f5f5f0; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-swiss"] #r-out .panel, body[data-rlook="rpt-swiss"] #r-out .report-tile { background: #0a0a0a; color: #f5f5f0; border: 1px solid #2a2a2a; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-swiss"] #r-out .report-tile { background: #141414; }
body[data-rlook="rpt-swiss"] #r-out .report-tile .v, body[data-rlook="rpt-swiss"] #r-out .stat .v, body[data-rlook="rpt-swiss"] #r-out td.num { color: #f5f5f0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-swiss"] #r-out h2, body[data-rlook="rpt-swiss"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-swiss"] #r-out h2 { font-size: 30px; letter-spacing: -.03em; } body[data-rlook="rpt-swiss"] #r-out .report-tile { border: 0; border-top: 4px solid #f5f5f0; border-radius: 0; background: transparent; padding: 6px 0; }
body[data-rlook="rpt-chips"] #r-out { --surface: #120b1a; --surface-solid: #120b1a; --raised: #241838; --ink: #f0e9fb; --ink-dim: #b7a6d3;
  --hairline: #2e2042; --hairline-strong: #2e2042; --accent: #c79bff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-chips"] #r-out .panel, body[data-rlook="rpt-chips"] #r-out .report-tile { background: #120b1a; color: #f0e9fb; border: 1px solid #2e2042; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-chips"] #r-out .report-tile { background: #241838; }
body[data-rlook="rpt-chips"] #r-out .report-tile .v, body[data-rlook="rpt-chips"] #r-out .stat .v, body[data-rlook="rpt-chips"] #r-out td.num { color: #c79bff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-chips"] #r-out h2, body[data-rlook="rpt-chips"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-chips"] #r-out .report-tile { border: 0; border-radius: 999px; padding: 8px 16px; } body[data-rlook="rpt-chips"] #r-out .report-tile .v { color: var(--ink); }
body[data-rlook="rpt-neon"] #r-out { --surface: #020504; --surface-solid: #020504; --raised: #08100c; --ink: #eafff2; --ink-dim: #8fd7a8;
  --hairline: #123020; --hairline-strong: #123020; --accent: #b6ff3b; --r-md: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-neon"] #r-out .panel, body[data-rlook="rpt-neon"] #r-out .report-tile { background: #020504; color: #eafff2; border: 1px solid #123020; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-neon"] #r-out .report-tile { background: #08100c; }
body[data-rlook="rpt-neon"] #r-out .report-tile .v, body[data-rlook="rpt-neon"] #r-out .stat .v, body[data-rlook="rpt-neon"] #r-out td.num { color: #b6ff3b; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-neon"] #r-out h2, body[data-rlook="rpt-neon"] #r-out .stat.big .v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-neon"] #r-out .report-tile, body[data-rlook="rpt-neon"] #r-out .panel { border-radius: 0; } body[data-rlook="rpt-neon"] #r-out table { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-neon"] #r-out .panel, body[data-rlook="rpt-neon"] #r-out .report-tile { box-shadow: 0 0 0 1px #b6ff3b inset, 0 0 18px -6px #b6ff3b; } body[data-rlook="rpt-neon"] #r-out .v { text-shadow: 0 0 8px #b6ff3b; }
body[data-rlook="rpt-blueprint"] #r-out { --surface: #071318; --surface-solid: #071318; --raised: #0c1e26; --ink: #e3f4f8; --ink-dim: #92bcc7;
  --hairline: #14323c; --hairline-strong: #14323c; --accent: #36d3f0; --r-md: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-blueprint"] #r-out .panel, body[data-rlook="rpt-blueprint"] #r-out .report-tile { background: #071318; color: #e3f4f8; border: 1px solid #14323c; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-blueprint"] #r-out .report-tile { background: #0c1e26; }
body[data-rlook="rpt-blueprint"] #r-out .report-tile .v, body[data-rlook="rpt-blueprint"] #r-out .stat .v, body[data-rlook="rpt-blueprint"] #r-out td.num { color: #36d3f0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-blueprint"] #r-out h2, body[data-rlook="rpt-blueprint"] #r-out .stat.big .v { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-blueprint"] #r-out .report-tile, body[data-rlook="rpt-blueprint"] #r-out .panel { border-radius: 0; } body[data-rlook="rpt-blueprint"] #r-out table { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-banded"] #r-out { --surface: #0f1114; --surface-solid: #0f1114; --raised: #171a20; --ink: #e8eaee; --ink-dim: #a0a7b3;
  --hairline: #252932; --hairline-strong: #252932; --accent: #7aa2ff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-banded"] #r-out .panel, body[data-rlook="rpt-banded"] #r-out .report-tile { background: #0f1114; color: #e8eaee; border: 1px solid #252932; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-banded"] #r-out .report-tile { background: #171a20; }
body[data-rlook="rpt-banded"] #r-out .report-tile .v, body[data-rlook="rpt-banded"] #r-out .stat .v, body[data-rlook="rpt-banded"] #r-out td.num { color: #7aa2ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-banded"] #r-out h2, body[data-rlook="rpt-banded"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-banded"] #r-out tbody tr:nth-child(even) { background: #171a20; } body[data-rlook="rpt-banded"] #r-out td { border: 0; }
body[data-rlook="rpt-hours"] #r-out { --surface: #05060f; --surface-solid: #05060f; --raised: #0b0d1e; --ink: #eef0ff; --ink-dim: #a9aed9;
  --hairline: #1c2048; --hairline-strong: #1c2048; --accent: #7aa2ff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-hours"] #r-out .panel, body[data-rlook="rpt-hours"] #r-out .report-tile { background: #05060f; color: #eef0ff; border: 1px solid #1c2048; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-hours"] #r-out .report-tile { background: #0b0d1e; }
body[data-rlook="rpt-hours"] #r-out .report-tile .v, body[data-rlook="rpt-hours"] #r-out .stat .v, body[data-rlook="rpt-hours"] #r-out td.num { color: #7aa2ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-hours"] #r-out h2, body[data-rlook="rpt-hours"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-hours"] #r-out .report-tile { padding: 22px 16px; } body[data-rlook="rpt-hours"] #r-out .report-tile .v { font-size: 30px; }
body[data-rlook="rpt-split"] #r-out { --surface: #14110c; --surface-solid: #14110c; --raised: #1e1a13; --ink: #f3eadb; --ink-dim: #c3b69d;
  --hairline: #352e21; --hairline-strong: #352e21; --accent: #e6c07b; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-split"] #r-out .panel, body[data-rlook="rpt-split"] #r-out .report-tile { background: #14110c; color: #f3eadb; border: 1px solid #352e21; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-split"] #r-out .report-tile { background: #1e1a13; }
body[data-rlook="rpt-split"] #r-out .report-tile .v, body[data-rlook="rpt-split"] #r-out .stat .v, body[data-rlook="rpt-split"] #r-out td.num { color: #e6c07b; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-split"] #r-out h2, body[data-rlook="rpt-split"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-split"] #r-out .report-tiles { grid-template-columns: 1fr; max-width: 260px; float: left; margin-right: 16px; } body[data-rlook="rpt-split"] #r-out .panel { overflow: hidden; }
body[data-rlook="rpt-timeline"] #r-out { --surface: #0b1210; --surface-solid: #0b1210; --raised: #111b17; --ink: #e6efe9; --ink-dim: #9bb2a6;
  --hairline: #24382f; --hairline-strong: #24382f; --accent: #4fd1a1; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-timeline"] #r-out .panel, body[data-rlook="rpt-timeline"] #r-out .report-tile { background: #0b1210; color: #e6efe9; border: 1px solid #24382f; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-timeline"] #r-out .report-tile { background: #111b17; }
body[data-rlook="rpt-timeline"] #r-out .report-tile .v, body[data-rlook="rpt-timeline"] #r-out .stat .v, body[data-rlook="rpt-timeline"] #r-out td.num { color: #4fd1a1; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-timeline"] #r-out h2, body[data-rlook="rpt-timeline"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-timeline"] #r-out .panel { border-left: 2px solid #4fd1a1; border-radius: 0 10px 10px 0; padding-left: 26px; position: relative; } body[data-rlook="rpt-timeline"] #r-out .stat, body[data-rlook="rpt-timeline"] #r-out tbody tr { position: relative; } body[data-rlook="rpt-timeline"] #r-out .stat::before { content: ''; position: absolute; left: -33px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #4fd1a1; box-shadow: 0 0 0 3px #0b1210; }
body[data-rlook="rpt-ticket-stub"] #r-out { --surface: #160d0f; --surface-solid: #160d0f; --raised: #21141a; --ink: #f6e9ea; --ink-dim: #c9a7ab;
  --hairline: #4a2a30; --hairline-strong: #4a2a30; --accent: #ff8a97; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-ticket-stub"] #r-out .panel, body[data-rlook="rpt-ticket-stub"] #r-out .report-tile { background: #160d0f; color: #f6e9ea; border: 1px solid #4a2a30; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-ticket-stub"] #r-out .report-tile { background: #21141a; }
body[data-rlook="rpt-ticket-stub"] #r-out .report-tile .v, body[data-rlook="rpt-ticket-stub"] #r-out .stat .v, body[data-rlook="rpt-ticket-stub"] #r-out td.num { color: #ff8a97; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-ticket-stub"] #r-out h2, body[data-rlook="rpt-ticket-stub"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-ticket-stub"] #r-out .report-tile { position: relative; border-radius: 6px; border-right: 2px dashed #ff8a97; padding-right: 22px; } body[data-rlook="rpt-ticket-stub"] #r-out .report-tile::before, body[data-rlook="rpt-ticket-stub"] #r-out .report-tile::after { content: ''; position: absolute; right: -8px; width: 14px; height: 14px; border-radius: 50%; background: #160d0f; border: 1px solid #4a2a30; } body[data-rlook="rpt-ticket-stub"] #r-out .report-tile::before { top: -8px; } body[data-rlook="rpt-ticket-stub"] #r-out .report-tile::after { bottom: -8px; }
body[data-rlook="rpt-magazine"] #r-out { --surface: #0f1013; --surface-solid: #0f1013; --raised: #16171d; --ink: #ececf1; --ink-dim: #a9abb8;
  --hairline: #2b2d38; --hairline-strong: #2b2d38; --accent: #9fa8ff; --r-md: 10px; font-family: Georgia, "Times New Roman", serif; }
body[data-rlook="rpt-magazine"] #r-out .panel, body[data-rlook="rpt-magazine"] #r-out .report-tile { background: #0f1013; color: #ececf1; border: 1px solid #2b2d38; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-magazine"] #r-out .report-tile { background: #16171d; }
body[data-rlook="rpt-magazine"] #r-out .report-tile .v, body[data-rlook="rpt-magazine"] #r-out .stat .v, body[data-rlook="rpt-magazine"] #r-out td.num { color: #9fa8ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-magazine"] #r-out h2, body[data-rlook="rpt-magazine"] #r-out .stat.big .v { font-family: Georgia, "Times New Roman", serif; }
body[data-rlook="rpt-magazine"] #r-out .panel { column-count: 2; column-gap: 28px; } body[data-rlook="rpt-magazine"] #r-out .panel > h2, body[data-rlook="rpt-magazine"] #r-out .panel > .note, body[data-rlook="rpt-magazine"] #r-out .table-scroll { column-span: all; } body[data-rlook="rpt-magazine"] #r-out .report-tile { border: 0; border-bottom: 3px double var(--hairline-strong); border-radius: 0; background: transparent; }
body[data-rlook="rpt-lined-book"] #r-out { --surface: #0f0f0a; --surface-solid: #0f0f0a; --raised: #161610; --ink: #f1eed9; --ink-dim: #b8b38f;
  --hairline: #33321f; --hairline-strong: #33321f; --accent: #e8d96a; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-lined-book"] #r-out .panel, body[data-rlook="rpt-lined-book"] #r-out .report-tile { background: #0f0f0a; color: #f1eed9; border: 1px solid #33321f; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-lined-book"] #r-out .report-tile { background: #161610; }
body[data-rlook="rpt-lined-book"] #r-out .report-tile .v, body[data-rlook="rpt-lined-book"] #r-out .stat .v, body[data-rlook="rpt-lined-book"] #r-out td.num { color: #e8d96a; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-lined-book"] #r-out h2, body[data-rlook="rpt-lined-book"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-lined-book"] #r-out .panel { background-image: repeating-linear-gradient(transparent 0 27px, #33321f 27px 28px); border-radius: 2px; border-left: 3px double #c0524f; padding-left: 28px; } body[data-rlook="rpt-lined-book"] #r-out .stat, body[data-rlook="rpt-lined-book"] #r-out td { border: 0; padding-top: 4px; padding-bottom: 4px; line-height: 20px; } body[data-rlook="rpt-lined-book"] #r-out .report-tile { background: transparent; border-style: dashed; }
body[data-rlook="rpt-stat-strip"] #r-out { --surface: #0a1014; --surface-solid: #0a1014; --raised: #0f171d; --ink: #e5eff5; --ink-dim: #98b0bd;
  --hairline: #1f3340; --hairline-strong: #1f3340; --accent: #5ec8ff; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-stat-strip"] #r-out .panel, body[data-rlook="rpt-stat-strip"] #r-out .report-tile { background: #0a1014; color: #e5eff5; border: 1px solid #1f3340; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-stat-strip"] #r-out .report-tile { background: #0f171d; }
body[data-rlook="rpt-stat-strip"] #r-out .report-tile .v, body[data-rlook="rpt-stat-strip"] #r-out .stat .v, body[data-rlook="rpt-stat-strip"] #r-out td.num { color: #5ec8ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-stat-strip"] #r-out h2, body[data-rlook="rpt-stat-strip"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-stat-strip"] #r-out .report-tiles { display: flex; flex-wrap: wrap; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; gap: 0; } body[data-rlook="rpt-stat-strip"] #r-out .report-tile { flex: 1 1 130px; border: 0; border-right: 1px solid var(--hairline); border-radius: 0; background: var(--raised); } body[data-rlook="rpt-stat-strip"] #r-out .report-tile .v { font-size: 18px; }
body[data-rlook="rpt-poster"] #r-out { --surface: #0c0c0f; --surface-solid: #0c0c0f; --raised: #14141a; --ink: #f6f6fa; --ink-dim: #adadbd;
  --hairline: #2a2a36; --hairline-strong: #2a2a36; --accent: #ff5fa2; --r-md: 10px; font-family: inherit; }
body[data-rlook="rpt-poster"] #r-out .panel, body[data-rlook="rpt-poster"] #r-out .report-tile { background: #0c0c0f; color: #f6f6fa; border: 1px solid #2a2a36; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-poster"] #r-out .report-tile { background: #14141a; }
body[data-rlook="rpt-poster"] #r-out .report-tile .v, body[data-rlook="rpt-poster"] #r-out .stat .v, body[data-rlook="rpt-poster"] #r-out td.num { color: #ff5fa2; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-poster"] #r-out h2, body[data-rlook="rpt-poster"] #r-out .stat.big .v { font-family: inherit; }
body[data-rlook="rpt-poster"] #r-out .report-tile:first-child { grid-column: 1 / -1; border: 0; background: transparent; padding: 10px 0 18px; } body[data-rlook="rpt-poster"] #r-out .report-tile:first-child .v { font-size: clamp(44px, 9vw, 84px); line-height: 1; letter-spacing: -.04em; } body[data-rlook="rpt-poster"] #r-out .report-tile:first-child .k { font-size: 13px; }
body[data-rlook="rpt-leaders"] #r-out { --surface: #0e1210; --surface-solid: #0e1210; --raised: #151913; --ink: #ece9dc; --ink-dim: #aaa78f;
  --hairline: #3a3a2a; --hairline-strong: #3a3a2a; --accent: #c8d46a; --r-md: 10px; font-family: Georgia, "Times New Roman", serif; }
body[data-rlook="rpt-leaders"] #r-out .panel, body[data-rlook="rpt-leaders"] #r-out .report-tile { background: #0e1210; color: #ece9dc; border: 1px solid #3a3a2a; backdrop-filter: none; box-shadow: none; }
body[data-rlook="rpt-leaders"] #r-out .report-tile { background: #151913; }
body[data-rlook="rpt-leaders"] #r-out .report-tile .v, body[data-rlook="rpt-leaders"] #r-out .stat .v, body[data-rlook="rpt-leaders"] #r-out td.num { color: #c8d46a; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-rlook="rpt-leaders"] #r-out h2, body[data-rlook="rpt-leaders"] #r-out .stat.big .v { font-family: Georgia, "Times New Roman", serif; }
body[data-rlook="rpt-leaders"] #r-out .stat .k { flex: 1; display: flex; gap: 6px; align-items: baseline; } body[data-rlook="rpt-leaders"] #r-out .stat .k::after { content: ''; flex: 1; border-bottom: 2px dotted var(--hairline-strong); transform: translateY(-3px); } body[data-rlook="rpt-leaders"] #r-out .stat { border: 0; }
/* 157: the Discord bell — quiet by design: a small pill, only when there is something, never red, no animation */
.discord-bell { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; min-height: 44px; min-width: 44px;
  border-radius: 999px; border: 1px solid var(--line, #3a3f4b); background: transparent; color: inherit; font-size: 13px; cursor: pointer; }
.discord-bell[hidden] { display: none; }
.dn-item { padding: 10px 0; border-bottom: 1px solid var(--line, #3a3f4b); }
.dn-item.read { opacity: .6; }
.dn-preview { margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dn-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 157: the soft border pulse while something is unread — slow, a calm blue, never red; the overlay itself takes no taps, only the thin edge strips do */
.discord-border { position: fixed; inset: 0; z-index: 50; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(96, 165, 250, .55), inset 0 0 22px rgba(96, 165, 250, .35);
  animation: discord-pulse 4.5s ease-in-out infinite; }
.discord-border .dbe { position: absolute; pointer-events: auto; cursor: pointer; }
.dbe-t, .dbe-b { left: 0; right: 0; height: 8px; }
.dbe-t { top: 0; } .dbe-b { bottom: 0; }
.dbe-l, .dbe-r { top: 0; bottom: 0; width: 8px; }
.dbe-l { left: 0; } .dbe-r { right: 0; }
@keyframes discord-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .discord-border { animation: none; opacity: 1; box-shadow: inset 0 0 0 2px rgba(96, 165, 250, .6); }
}

/* ------------------------------------------------------------------ *
 * Lane U2 (Jay's list, 2026-11-01): Admin/Settings cleanup.
 * ------------------------------------------------------------------ */

/* 7. Admin-only, outside Admin: a soft orange glow (#D97757). One class, added by adminOnly() in app.js and by the
 *    nav for admin-only tabs. Not on the Admin screen itself, where everything is admin-only. */
.admin-only { box-shadow: 0 0 0 1px rgba(217,119,87,.55), 0 0 12px 2px rgba(217,119,87,.35); border-radius: var(--r-sm, 8px); }
/* Jay, 2026-11-01 (Q8): no glow INSIDE an admin-only screen (Admin, Settings' admin hub, Audit, Cookie Monster, Problems,
   Logs, Sales) — everything there is an admin's. Shared screens (Register, Drawer, History, Reports, Parts, Tasks,
   Store credit) and the pop-ups and banners keep it on every admin-only control. */
#view[data-screen="admin"] .admin-only, #view[data-screen="settings"] .admin-only, #view[data-screen="audit"] .admin-only,
#view[data-screen="tekstream"] .admin-only, #view[data-screen="tekmirror"] .admin-only, #view[data-screen="issues"] .admin-only,
#view[data-screen="logs"] .admin-only, #view[data-screen="sales"] .admin-only, #view[data-screen="device"] .admin-only { box-shadow: none; }
/* The admin-only TABS: a subtle glow on the button in the top bar (and the hub's section row), nothing more. */
/* A thin orange underline with a faint glow under it — a ring around a tall tab read as orange brackets (Jay's
   screenshot, 2026-11-01 23:40). */
#nav .admin-only, .hub-tabs .admin-only, #nav-menu .admin-only {
  box-shadow: none; text-decoration: underline 2px rgba(217,119,87,.9); text-underline-offset: 6px;
  text-shadow: 0 0 10px rgba(217,119,87,.35); }
/* "Show the orange admin glow" off (Settings → This computer; per admin, per browser): no glow anywhere. */
body[data-admin-glow="off"] .admin-only { box-shadow: none !important; }
body[data-admin-glow="off"] .admin-only-glow { box-shadow: none !important; border-color: var(--hairline) !important; }

/* 6. An on/off setting is a phone-style switch: a track, a knob, a short label. */
.switch-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; min-height: 36px; border: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.switch-toggle .track { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px;
  background: var(--hairline-strong, #3a3a3a); transition: background .15s; }
.switch-toggle .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: left .15s; }
.switch-toggle.on .track { background: var(--accent); }
.switch-toggle.on .knob { left: 20px; }
.switch-toggle:focus-visible .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 6px 0; }
.toggle-row > * { flex: 0 0 auto; }

/* 6. The Tekmetric ⇄ POS payment direction: a phone-style switch with three spots and a sliding knob look. */
.direction-switch { padding: 3px; gap: 2px; background: var(--hairline-strong, #2b2b2b); border-color: transparent; }
.direction-switch .chip { min-height: 32px; padding: 6px 14px; color: var(--ink-faint, #aaa); border-radius: 999px; }
.direction-switch .chip.on { background: #fff; color: #111; box-shadow: 0 1px 4px rgba(0,0,0,.45); font-weight: 600; }
.direction-switch .chip.on[data-direction="from_tekmetric"], .direction-switch .chip.on[data-direction="to_tekmetric"] {
  background: var(--accent); color: var(--accent-ink, #06210e); }

/* 5. One short line + ⓘ for the rest. */
details.info-note { margin: 4px 0 8px; }
details.info-note > summary { list-style: none; cursor: pointer; display: inline; }
details.info-note > summary::-webkit-details-marker { display: none; }
details.info-note .info-i { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%;
  border: 1px solid var(--hairline-strong, #444); font-size: 11px; color: var(--ink-faint, #aaa); font-style: normal; }
details.info-note[open] > p { margin-top: 4px; }

.more-box { margin-top: 10px; }
.more-box > summary { cursor: pointer; color: var(--ink-faint, #aaa); font-size: 13px; padding: 4px 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.plain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 8px; }
.plain-row .sweep-pick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* 6. Buttons on Admin and Settings: smaller (the register keeps its big touch targets). */
#view[data-screen="admin"] .btn, #view[data-screen="settings"] .btn, #view[data-screen="audit"] .btn {
  min-height: 32px; padding: 6px 12px; font-size: 13px; }
#view[data-screen="admin"] .row > div:has(> .btn:only-child), #view[data-screen="settings"] .row > div:has(> .btn:only-child) { flex: 0 0 auto; }
/* 6: a SETUP warning (Discord not connected, a channel the bot can't see, an owner credential replaced) is amber, not
   red. Only those panels: a real error elsewhere on Admin (Didn't print, PINs off) stays red. */
#admin-discord .note.bad, #admin-discord-notify .note.bad, #admin-discord-test .note.bad, #admin-helpers .pill.bad { color: var(--warn); }

/* 4. The "simple" layout's section row under the top tabs. */
body[data-layout="simple"] .hub-tabs, body[data-layout="classic-merged"] .hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.hub-tabs button { min-height: 32px; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--raised);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.hub-tabs button.on { background: var(--accent); color: var(--accent-ink, #06210e); border-color: var(--accent); }

/* 5. Admin in sections: cards in a grid that folds to one column in a narrow window. */
.admin-section-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; position: sticky; top: 0; z-index: 2;
  padding: 8px 0; background: var(--bg, #0a0f0c); }
.admin-section-index a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink);
  text-decoration: none; font-size: 13px; }
.admin-section { margin: 0 0 22px; }
.admin-section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint, #aaa); margin: 0 0 8px; }
details.admin-section > summary { cursor: pointer; display: flex; align-items: baseline; gap: 10px; }
details.admin-section > summary .admin-section-title { display: inline; }
.admin-section-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.admin-section-grid > * { min-width: 0; margin: 0; }
.admin-section-grid .panel { margin: 0; }
@media (max-width: 640px) {
  .admin-section-grid { gap: 10px; }
  .admin-section-grid .panel { padding: 14px; }
}
.admin-block { padding: 6px 8px; margin: 6px -8px; }
.quick-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.quick-ranges .btn { min-height: 30px; padding: 4px 12px; font-size: 13px; }
.quick-ranges .btn.on { background: var(--accent); color: var(--accent-ink, #06210e); border-color: var(--accent); }
table.total-sales tr.group th { text-align: left; padding-top: 12px; color: var(--ink-faint); font-weight: 600; }
table.total-sales tr.subtotal td { border-top: 1px solid var(--hairline); }
table.total-sales tr.grand td { border-top: 2px solid var(--hairline-strong, #444); font-weight: 700; }
/* Narrow windows (Lane U2): Admin never scrolls sideways — the database table scrolls inside its panel, and a
   person's Manage buttons wrap under their row instead of running off the right edge. */
#db-panel { overflow-x: auto; max-width: 100%; }
@media (max-width: 640px) {
  .person-actions { white-space: normal; }
  .person-menu[open] .person-menu-body { max-width: calc(100vw - 48px); }
  .person-menu-body .btn { flex: 0 1 auto; white-space: normal; }
}

/* Admin-only elements glow in Claude orange (Jay, 2026-11-01); the shared version comes with the Tuesday cleanup. */
.admin-only-glow { border: 1px solid #D97757; box-shadow: 0 0 0 1px rgba(217,119,87,.55), 0 0 14px rgba(217,119,87,.45); }
.range-words { margin: 6px 0 0; min-height: 1em; }
.saved-ranges { display: contents; }
.saved-range { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: 999px; padding-right: 4px; }
.saved-range .btn { border: 0; }
.saved-x { border: 0; background: transparent; color: var(--ink-faint); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.saved-x:hover { color: var(--ink); }
.save-range { border-style: dashed; }
fieldset.sr-kinds { border: 0; padding: 0; margin: 10px 0; display: grid; gap: 6px; }

/* What's new: the staff / Admin notes tabs (admins only) */
.whats-new-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.whats-new-tabs button.on { background: var(--accent); color: var(--accent-ink, #06210e); }
/* The opening's blind-count result (opencheck.js gapHTML) */
.og-line { font-weight: 600; margin-top: 2px; } .og-good { color: #30d158; } .og-warn { color: #ffb340; } .og-bad { color: #ff6961; }