/* ==========================================================================
   Order Desk — ops console styling. Light + dark, no external assets.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Neutral greys, so the only colour on screen is colour that means something.
     Accent is the pale blue at a darkness that reads on white; the same blue
     goes pale again in dark mode, where it sits on near-black. */
  --bg:            #f7f7f8;
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --surface-3:     #f1f1f3;
  --sidebar:       #0a0a0b;
  --sidebar-text:  #8e8e94;
  --sidebar-hi:    #ffffff;

  --text:          #18181b;
  --text-soft:     #55555c;
  --text-dim:      #85858c;
  --line:          #e4e4e7;
  --line-soft:     #efeff1;

  --accent:        #1668c4;
  --accent-hi:     #12559f;
  --accent-soft:   #e8f1fb;
  --accent-text:   #ffffff;
  --brand:         #e91e63;

  --good:   #0f7b52;  --good-bg:   #e3f5ec;
  --warn:   #9a6206;  --warn-bg:   #fdf1dc;
  --bad:    #b02525;  --bad-bg:    #fce9e9;
  --info:   #1d5fbf;  --info-bg:   #e6effc;
  --neutral:#4b5162;  --neutral-bg:#eceef2;
  --muted:  #6b7280;  --muted-bg:  #f1f2f5;
  --extra:  #0f766e;  --extra-bg:  #e4f4f2;
  --half:   #7d6800;  --half-bg:   #f7f2dc;
  --purple: #6d28d9;  --purple-bg: #f0e9fd;

  --radius:    10px;
  --radius-sm: 7px;
  --shadow:    0 1px 2px rgb(10 10 11 / .05), 0 1px 3px rgb(10 10 11 / .04);
  --shadow-lg: 0 4px 16px rgb(10 10 11 / .08), 0 1px 3px rgb(10 10 11 / .06);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* A card, a lifted strip, a pressed control: three steps, deliberately
       close together. */
    --bg:          #09090b;
    --surface:     #101012;
    --surface-2:   #161619;
    --surface-3:   #1d1d21;

    /* The sidebar is the same black as the page; the hairline divides them. */
    --sidebar:     #09090b;
    --sidebar-text:#a1a1a8;
    --sidebar-hi:  #ededf0;

    /* Three ink stops, measured on this ground: 16.4:1, 7.5:1 and 3.8:1. The
       third is for 11-12px labels and column headings, never for a sentence. */
    --text:        #ededf0;
    --text-soft:   #a1a1a8;
    --text-dim:    #71717a;

    /* Hairlines as alpha rather than as a grey, so a box sitting on a box
       still shows an edge instead of matching whatever is behind it. */
    --line:        rgb(255 255 255 / .11);
    --line-soft:   rgb(255 255 255 / .07);

    /* Pale blue reads at 12:1 on this background. Anything filled with it
       therefore carries near-black text, never white. */
    --accent:      #a5d4ff;
    --accent-hi:   #c4e3ff;
    --accent-soft: #142433;
    --accent-text: #0a0a0b;
    --brand:       #e91e63;

    --good:   #4ade9f;  --good-bg:   #0f2a20;
    --warn:   #f0be62;  --warn-bg:   #2c2312;
    --bad:    #f38080;  --bad-bg:    #311717;
    --info:   #7fb0f5;  --info-bg:   #13223a;
    --neutral:#a8a8ad;  --neutral-bg:#212124;
    --muted:  #85858a;  --muted-bg:  #1b1b1e;
    --extra:  #5ec8c0;  --extra-bg:  #0f2624;
    --half:   #d3c877;  --half-bg:   #26230f;
    --purple: #b79cf5;  --purple-bg: #1c1630;

    --shadow:    0 1px 2px rgb(0 0 0 / .5);
    --shadow-lg: 0 8px 28px rgb(0 0 0 / .55);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.012em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

.dim { color: var(--text-dim); }
.mono { font-family: var(--mono); font-size: .92em; }
.nowrap { white-space: nowrap; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background: var(--sidebar);
  /* The sidebar is the same black as the page, so the hairline is the divide. */
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--sidebar-hi);
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand);
  display: grid; place-items: center; color: #fff; flex: none;
}
.brand-mark svg { width: 16px; height: 16px; }

/* The nav still scrolls when a short viewport cannot fit every item, so the
   account panel below it stays reachable — but the bar itself is hidden. */
.nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 8px 12px 6px;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge */
}
.nav::-webkit-scrollbar { width: 0; height: 0; }
.nav-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: rgb(255 255 255 / .35); padding: 11px 10px 3px;
}
.nav-group:first-child { padding-top: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-weight: 500;
  transition: background .12s, color .12s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav-item:hover { background: rgb(255 255 255 / .05); color: var(--sidebar-hi); text-decoration: none; }
.nav-item.is-active { background: var(--surface-2); color: var(--sidebar-hi); }

/* Attached to the bottom of the rail, divided by a hairline rather than
   drawn as a card that floats above it. */
.sidebar-foot {
  margin-top: auto; flex: 0 0 auto;
  border-top: 1px solid var(--line-soft);
  padding: 7px 8px;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgb(255 255 255 / .09);
  color: var(--sidebar-hi); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

/* Signed-in panel: identity row with a settings gear, then a sign-out row. */
.me { background: none; border: 0; border-radius: 0; overflow: visible; }
.me-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  color: inherit; transition: background .12s;
}
.me-row:hover { background: var(--surface-2); text-decoration: none; }
.me-row.is-active { background: var(--surface-2); }
.me-row:hover .me-gear, .me-row.is-active .me-gear { color: var(--sidebar-hi); }
.who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.who-text strong { color: var(--sidebar-hi); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-text small { color: var(--sidebar-text); font-size: 11px; }
.me-gear {
  margin-left: auto; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--sidebar-text);
  transition: color .12s;
}
.me-gear svg { width: 16px; height: 16px; }
.me-out { margin: 0; }
.me-signout {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 8px;
  background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--bad); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background .12s;
}
.me-signout svg { width: 15px; height: 15px; flex: none; }
.me-signout:hover { background: var(--bad-bg); }
.me-signout:focus-visible, .me-row:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
@media (max-height: 790px) {
  .brand { padding: 10px 20px 8px; }
  .nav { padding-top: 5px; }
  .brand-mark { width: 26px; height: 26px; }
  .nav-group { padding: 7px 10px 2px; }
  .nav-item { padding: 4px 10px; }
  .nav-item svg { width: 16px; height: 16px; }
  .sidebar-foot { padding: 5px 8px; }
  .me-row { padding: 4px 8px; }
  .me-signout { padding: 5px 8px; }
  .avatar { width: 27px; height: 27px; }
}

.inline { display: inline; }

.main { flex: 1; min-width: 0; padding: 28px 32px 64px; max-width: 1180px; }
.main-wide {
  max-width: 1400px; padding-bottom: 22px;
  display: flex; flex-direction: column;
}

/* ---------- Page head ---------- */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-head p { margin: 4px 0 0; color: var(--text-soft); font-size: 13px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-body { padding: 16px; }
.card + .card { margin-top: 18px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow);
}
.stat:hover { text-decoration: none; border-color: var(--accent); }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 650; margin-top: 5px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-accent .stat-value { color: var(--accent); }

/* ---------- Filters ---------- */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow);
}
.filters .field { margin: 0; }
.filters .field-search { flex: 1 1 220px; min-width: 180px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label, .field > .label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.field .hint { font-size: 11.5px; color: var(--text-dim); }

input[type=text], input[type=password], input[type=search], input[type=url], select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
/* app.js grows every textarea to fit its content. Without it these stay
   ordinary scrollable, resizable boxes, so nothing is ever unreadable. */
textarea { resize: vertical; min-height: 0; line-height: 1.55; }
select { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Focus: a plain accent border, no halo. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: none;
}
/* The native control is kept for the form to post, but a <label for> opens the
   dialog on its own, so nothing here depends on scripting. */
.file-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-pick {
  display: flex; align-items: center; gap: 8px;
  /* Same box as input[type=text], so it sits level with the row it is in. */
  padding: 8px 10px; width: 100%;
  /* font: inherit alone, so the box measures exactly like a text input. */
  font: inherit;
  color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.file-pick:hover { border-color: var(--text-dim); color: var(--text); }
.file-pick svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.file-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick.has-file { color: var(--text); border-color: var(--text-dim); }
.file-native:focus-visible + .file-pick,
.file-pick:focus-within { outline: none; border-color: var(--accent); }
::placeholder { color: var(--text-dim); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.form-actions {
  display: flex; gap: 8px; align-items: center;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line-soft);
}
.form-actions .spacer { flex: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 550; font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-dim); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn svg { width: 15px; height: 15px; flex: none; color: var(--text-dim); margin: 0 -3px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-primary svg, .btn-danger svg { color: inherit; opacity: .85; }
.btn:hover svg { color: inherit; }
.btn-primary:hover svg, .btn-danger:hover svg { color: inherit; }

/* ---------- Badges ---------- */
/* An outlined pill: the colour carries the text and a thin ring, over only a
   trace of fill. Reads cleanly against a near-black surface without glowing. */
.badge {
  display: inline-block;
  padding: 1.5px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}
.tone-good    { color: var(--good);    background: color-mix(in srgb, var(--good) 9%, transparent);    border-color: color-mix(in srgb, var(--good) 38%, transparent); }
.tone-warn    { color: var(--warn);    background: color-mix(in srgb, var(--warn) 9%, transparent);    border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.tone-bad     { color: var(--bad);     background: color-mix(in srgb, var(--bad) 9%, transparent);     border-color: color-mix(in srgb, var(--bad) 38%, transparent); }
.tone-info    { color: var(--info);    background: color-mix(in srgb, var(--info) 9%, transparent);    border-color: color-mix(in srgb, var(--info) 38%, transparent); }
.tone-neutral { color: var(--neutral); background: color-mix(in srgb, var(--neutral) 9%, transparent); border-color: color-mix(in srgb, var(--neutral) 34%, transparent); }
.tone-muted   { color: var(--muted);   background: color-mix(in srgb, var(--muted) 9%, transparent);   border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.tone-extra   { color: var(--extra);   background: color-mix(in srgb, var(--extra) 9%, transparent);   border-color: color-mix(in srgb, var(--extra) 38%, transparent); }
.tone-half    { color: var(--half);    background: color-mix(in srgb, var(--half) 9%, transparent);    border-color: color-mix(in srgb, var(--half) 38%, transparent); }
.tone-purple  { color: var(--purple);  background: color-mix(in srgb, var(--purple) 9%, transparent);  border-color: color-mix(in srgb, var(--purple) 38%, transparent); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim);
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
thead th a { color: inherit; }
thead th a:hover { color: var(--accent); }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
.cell-ref { font-family: var(--mono); font-size: 12px; color: var(--text-soft); }
.cell-strong { font-weight: 570; }
.cell-actions { text-align: right; white-space: nowrap; }
.truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

.ext { white-space: nowrap; }
.ext-arrow { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-left: 3px; opacity: .6; }

/* ---------- Empty / flash ---------- */
.empty { padding: 52px 20px; text-align: center; color: var(--text-soft); }
.empty strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 5px; }

.flash {
  padding: 10px 14px; border-radius: var(--radius-sm);
  margin-bottom: 18px; font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
}
.flash-success { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 25%, transparent); }
.flash-error   { background: var(--bad-bg);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.flash-info    { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.timeline .when { margin-left: auto; color: var(--text-dim); font-size: 12px; white-space: nowrap; }

/* ---------- Attachments ---------- */
.files { display: flex; flex-wrap: wrap; gap: 10px; }
.file {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; background: var(--surface-2); font-size: 12.5px;
}
.file-thumb { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; background: var(--line); }
.file-meta { display: flex; flex-direction: column; line-height: 1.35; }
.file-meta small { color: var(--text-dim); font-size: 11px; }

/* ---------- Pagination ---------- */
.pager { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--text-soft); }
.pager-links { display: flex; gap: 6px; }

/* ---------- Auth screens ---------- */
body.centered { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--bg); }
.auth { width: 100%; max-width: 380px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 22px; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.auth-brand .brand-mark { width: 32px; height: 32px; }
.auth-brand .brand-mark svg { width: 18px; height: 18px; }
.auth .card-body { padding: 24px; }
.auth h1 { font-size: 17px; margin-bottom: 4px; }
.auth .sub { color: var(--text-soft); font-size: 13px; margin: 0 0 20px; }
.auth .btn { width: 100%; justify-content: center; padding: 10px; }
.auth-note { text-align: center; margin-top: 16px; font-size: 12px; color: var(--text-dim); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 12px;
  }
  .brand { padding: 0 8px 0 0; }
  .brand-name { display: none; }
  .nav { flex: 1 1 auto; min-width: 0; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; }
  .nav-group { display: none; }
  .nav-item span { display: none; }
  .nav-item { padding: 8px; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 10px; }
  .me { display: flex; align-items: center; background: none; border: 0; border-radius: 0; overflow: visible; }
  .me-row { padding: 0; }
  .who-text { display: none; }
  .me-gear { margin-left: 4px; }
  .me-signout { width: auto; padding: 6px; border: 0; border-radius: var(--radius-sm); }
  .me-signout span { display: none; }
  .main { padding: 18px 14px 48px; }
}

/* ==========================================================================
   Reporting: numbers, charts, meters
   ========================================================================== */

/* ---------- Numbers ---------- */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num, td.num, .bar-cell { text-align: right; }
th.num a { color: inherit; }
.num-pos  { color: var(--good); }
.num-neg  { color: var(--bad); }
.num-warn { color: var(--warn); }
.num-info { color: var(--info); }
.num-zero { color: var(--text-dim); }

tfoot td {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-weight: 600;
  padding: 11px 14px;
}

/* ---------- Utilities (kept as classes so style-src can stay strict) ------- */
.m0 { margin: 0; }
.mt-6 { margin-top: 6px; }
.stats-tight { margin-bottom: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.self-center { align-self: center; }
.narrow { max-width: 420px; }
.user-cell { display: flex; align-items: center; gap: 9px; }
.secret { user-select: all; font-weight: 700; }
.file-thumb-doc { display: grid; place-items: center; }
.section-head { margin: 26px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

/* ---------- Range tabs ---------- */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tab {
  padding: 5px 11px; border-radius: 5px; font-size: 12.5px; font-weight: 550;
  color: var(--text-soft); white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; background: var(--surface); }
.tab.is-active { background: var(--accent); color: var(--accent-text); }
.tab.is-active:hover { background: var(--accent-hi); }

/* ---------- Two-column layout ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px; align-items: start; }
.grid-2 .card + .card { margin-top: 0; }
/* Every stacked section keeps the same breathing room as card-after-card. */
.card + .grid-2, .grid-2 + .card, .grid-2 + .grid-2, .callout + .grid-2, .flash + .grid-2 { margin-top: 18px; }

/* ---------- Split counters ---------- */
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.split-4 { grid-template-columns: repeat(4, 1fr); }
.split-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.split-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); font-weight: 600; }
.split-value { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- Definition rows ---------- */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 0; }
.kv dt { padding: 8px 0; color: var(--text-soft); font-size: 13px; border-top: 1px solid var(--line-soft); }
.kv dd { padding: 8px 0; margin: 0; text-align: right; font-weight: 550; border-top: 1px solid var(--line-soft); }

/* ---------- Bar chart ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .bar { fill: var(--accent); opacity: .85; }
.chart .bar-today { fill: var(--accent); opacity: 1; }
.chart .bar-future { fill: var(--line); opacity: .6; }
.chart .bar-value { fill: var(--text-soft); font-size: 12px; font-weight: 600; font-family: var(--font); }
.chart .bar-label { fill: var(--text-dim); font-size: 12px; font-family: var(--font); }
.chart .bar-label.is-today { fill: var(--accent); font-weight: 700; }

/* ---------- Inline table bars ---------- */
.minibar { width: 76px; height: 8px; display: inline-block; vertical-align: middle; }
.minibar-track { fill: var(--line-soft); }
.minibar-fill { fill: var(--accent); }

/* ---------- Recovery meter ---------- */
.meter { margin-bottom: 14px; }
.meter-svg { width: 100%; height: 10px; display: block; }
.meter-track { fill: var(--bad-bg); }
.meter-fill { fill: var(--good); }
.meter-caption { display: block; margin-top: 6px; font-size: 12px; color: var(--text-soft); }

/* ---------- Ratio chips ---------- */
.ratio { display: flex; gap: 3px; }
.chip {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 22px; padding: 0 6px;
  border-radius: 5px; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chip { border: 1px solid transparent; }
.chip-muted { color: var(--muted);   background: color-mix(in srgb, var(--muted) 9%, transparent);  border-color: color-mix(in srgb, var(--muted) 30%, transparent); }
.chip-warn  { color: var(--warn);    background: color-mix(in srgb, var(--warn) 9%, transparent);   border-color: color-mix(in srgb, var(--warn) 38%, transparent); }
.chip-info  { color: var(--info);    background: color-mix(in srgb, var(--info) 9%, transparent);   border-color: color-mix(in srgb, var(--info) 38%, transparent); }
.chip-good  { color: var(--good);    background: color-mix(in srgb, var(--good) 9%, transparent);   border-color: color-mix(in srgb, var(--good) 38%, transparent); }
.chip-bad   { color: var(--bad);     background: color-mix(in srgb, var(--bad) 9%, transparent);    border-color: color-mix(in srgb, var(--bad) 38%, transparent); }

/* ---------- Inline rate editor ---------- */
.rate-form { display: flex; gap: 5px; align-items: center; justify-content: flex-end; }
.rate-form input { width: 62px; padding: 5px 7px; font-size: 12px; text-align: right; }
.rate-form .rate-mode { width: auto; min-width: 88px; padding: 5px 24px 5px 7px; font-size: 12px; background-position: right 8px center, right 4px center; }

/* ==========================================================================
   The worker's own dashboard. Everything here answers one of four questions:
   what is live, how is the day going, what has it paid, and who is ahead.
   Bars are SVG because the CSP forbids inline styles and a geometry attribute
   is not one.
   ========================================================================== */

/* The band under the head: shift state and the two countdowns. */
.wk-band {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  padding: 12px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.wk-band.is-on { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.wk-band-item { display: flex; flex-direction: column; gap: 2px; }
.wk-band-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim);
}
.wk-band-value {
  font-size: 15px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.wk-band.is-on .wk-band-item:first-child .wk-band-value { color: var(--good); }

/* Stat cards, one accent each so the eye can find the one it wants. */
.wk-stats { margin-bottom: 14px; }
.wk-stat .stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wk-icon {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  color: var(--text-soft); background: var(--surface-2);
}
.wk-icon svg { width: 16px; height: 16px; }
.wk-sub { margin-top: 5px; font-size: 12px; }
.wk-sub .num-pos, .wk-sub .num-neg, .wk-sub .num-warn { display: inline-flex; align-items: center; gap: 3px; }
.wk-delta-icon { width: 13px; height: 13px; }
.wk-live .wk-icon  { color: var(--warn);   background: color-mix(in srgb, var(--warn) 14%, transparent); }
.wk-pay .wk-icon   { color: var(--good);   background: color-mix(in srgb, var(--good) 14%, transparent); }
.wk-place .wk-icon { color: var(--half);   background: color-mix(in srgb, var(--half) 14%, transparent); }

.wk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }

/* The week, one column a day. Today is filled, days not yet reached are hollow. */
.wk-chart { display: block; width: 100%; height: 150px; }
.wc-col { fill: var(--accent); opacity: .55; transition: opacity .15s; }
.wc-past { opacity: .45; }
.wc-today { fill: var(--good); opacity: 1; }
.wc-future { fill: var(--text-dim); opacity: .22; }
.wk-axis {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  margin-top: 6px; font-size: 11px; color: var(--text-dim); text-align: center;
}
.wk-axis .is-today { color: var(--good); font-weight: 700; }

/* The board. Your own row is the one that has to be findable without reading. */
.lb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px 44px;
  align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.lb-row.is-me {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.lb-place {
  display: grid; place-items: center; width: 24px; height: 24px;
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  background: var(--surface-2); border-radius: 50%;
}
.lb-place svg { width: 14px; height: 14px; }
.lb-gold   { color: #1a1508; background: #e3b341; }
.lb-silver { color: #17181a; background: #c2c7ce; }
.lb-bronze { color: #1d1206; background: #cd8b4a; }
.lb-name { font-size: 13.5px; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you {
  margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.lb-meter { min-width: 0; }
.lb-bar { display: block; width: 100%; height: 6px; }
.lb-track { fill: var(--surface-2); }
.lb-fill.lb-me { fill: var(--accent); }
.lb-fill.lb-other { fill: var(--text-dim); opacity: .55; }
.lb-count { text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }

/* What the week paid, line by line, so the total is never a bare assertion. */
.wk-pay { display: flex; flex-direction: column; }
.wk-pay-line, .wk-pay-total {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.wk-pay-line span:first-child, .wk-pay-total span:first-child { color: var(--text-soft); font-size: 13px; }
.wk-pay-line strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.wk-pay-total { border-bottom: 0; grid-template-columns: 130px minmax(0, 1fr) auto; padding-top: 12px; }
.wk-pay-total span:first-child { color: var(--text); font-weight: 650; font-size: 14px; }
.wk-pay-total strong { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wk-compare {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 13px;
}
.wk-compare strong { font-variant-numeric: tabular-nums; color: var(--text); }

/* Who is on the floor, on the admin dashboard. */
.floor { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.floor-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding: 8px 9px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.floor-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.floor-name { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floor-time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.floor-out { margin: 0; }

/* ---------- Computed output ---------- */
.computed {
  display: block;
  font-size: 20px; font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .split, .split-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Keep the week chart from dominating the card on very wide screens. */
.chart { max-width: 980px; margin: 0 auto; }

/* Rate hints inside table cells sit on one line so payroll rows stay compact. */
td .hint { white-space: nowrap; }

/* ==========================================================================
   Monitoring
   ========================================================================== */
.callout {
  padding: 12px 15px; margin-bottom: 18px;
  background: var(--info-bg); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
  border-radius: var(--radius); font-size: 13px; line-height: 1.55;
}
.callout strong { color: var(--info); }

.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 500; color: var(--text); }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

.filter-inline { display: flex; gap: 6px; align-items: center; }
.filter-inline > select, .filter-inline > input { width: auto; padding: 6px 9px; font-size: 12.5px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.shot {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2); color: var(--text);
}
.shot:hover { border-color: var(--accent); text-decoration: none; }
.shot-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line); }
.shot-meta { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; font-size: 12px; }
.shot-meta strong { font-weight: 600; }
.shot-meta span { color: var(--text-dim); }

/* Settings */
.narrow-lg { max-width: 520px; }
.subhead { margin: 22px 0 4px; font-size: 14px; }

/* ==========================================================================
   Refund requests
   ========================================================================== */
.mt-14 { margin-top: 14px; }
.item-row { display: grid; grid-template-columns: 1fr 140px 36px; gap: 8px; margin-bottom: 8px; }
.item-row input { margin: 0; }
.item-row [data-item-remove] { padding: 0; justify-content: center; color: var(--text-dim); }
.item-row [data-item-remove] svg { margin: 0; }
.item-row [data-item-remove]:hover { color: var(--bad); border-color: var(--bad); }

.calc-box {
  margin-top: 14px; padding: 12px 15px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-width: 360px;
}
.calc-box > div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.calc-box span { color: var(--text-soft); font-size: 13px; }
.calc-box strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.calc-owed { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px !important; }
.calc-owed strong { font-size: 20px; color: var(--accent); }
.refund-section { margin-top: 6px; }

/* Payments */
.tabs-spaced { margin-bottom: 14px; }
.tab-count { display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:9px;
  background: color-mix(in srgb, currentColor 15%, transparent); font-size:11px; font-weight:700; }
.tab.is-active .tab-count { background: rgba(255,255,255,.25); }
.link-form { display:inline-flex; gap:5px; align-items:center; }
.link-form input { width:130px; padding:5px 8px; font-size:12px; margin:0; }

/* One-PC lock */

/* Customer pickup confirmation (public page) */
.pickup-card { width: 100%; max-width: 440px; }
.pickup-body { padding: 28px; text-align: center; }
.pickup-body h1 { font-size: 20px; margin-bottom: 8px; }
.pickup-body .sub { color: var(--text-soft); margin: 0 0 22px; line-height: 1.5; }
.btn-big { width: 100%; justify-content: center; padding: 14px; font-size: 15px; }
.pickup-done { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--good-bg); color: var(--good); display: grid; place-items: center; font-size: 30px; font-weight: 700; }
.linklike { background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; margin-top: 16px; text-decoration: underline; }
.copybox { margin: 10px 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow-x: auto; }
.copybox code { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }

/* Operations-closed banner */

/* Track-delivery button on the public pickup page */
.btn-track { width: 100%; justify-content: center; margin-bottom: 12px; }

/* ==========================================================================
   Custom controls. Progressive: the native <select> / <input type=date> stays
   in the DOM (visually hidden) and still holds the value that gets submitted.
   ========================================================================== */
[hidden] { display: none !important; }

.sel-native, .dp-native {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  opacity: 0; pointer-events: none;
}

/* ---------- Dropdown ---------- */
.sel { position: relative; display: block; width: 100%; }
.sel-btn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  width: 100%;
  font: inherit; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer;
  transition: border-color .12s;
}
.sel-btn:hover { border-color: var(--text-dim); }
.sel-btn:focus { outline: none; border-color: var(--accent); }
.sel-open .sel-btn { border-color: var(--accent); }
.sel.is-disabled .sel-btn { cursor: default; opacity: .6; }
.sel.is-disabled .sel-btn:hover { border-color: var(--line); }
.sel-value, .sel-sizer { grid-area: 1 / 1; min-width: 0; }
.sel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The closed control is filled and ringed in its own meaning colour, the same
   wash the badge for that value uses, so a status reads at a glance. */
.sel-btn.tint-good { background: color-mix(in srgb, var(--good) 9%, var(--surface)); border-color: color-mix(in srgb, var(--good) 38%, transparent); color: var(--good); }
.sel-btn.tint-warn { background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); }
.sel-btn.tint-bad { background: color-mix(in srgb, var(--bad) 9%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 38%, transparent); color: var(--bad); }
.sel-btn.tint-info { background: color-mix(in srgb, var(--info) 9%, var(--surface)); border-color: color-mix(in srgb, var(--info) 38%, transparent); color: var(--info); }
.sel-btn.tint-neutral { background: color-mix(in srgb, var(--neutral) 9%, var(--surface)); border-color: color-mix(in srgb, var(--neutral) 38%, transparent); color: var(--neutral); }
.sel-btn.tint-muted { background: color-mix(in srgb, var(--muted) 9%, var(--surface)); border-color: color-mix(in srgb, var(--muted) 38%, transparent); color: var(--muted); }
.sel-btn.tint-accent { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent); }
.sel-btn.tint-extra { background: color-mix(in srgb, var(--extra) 9%, var(--surface)); border-color: color-mix(in srgb, var(--extra) 38%, transparent); color: var(--extra); }
.sel-btn.tint-half { background: color-mix(in srgb, var(--half) 9%, var(--surface)); border-color: color-mix(in srgb, var(--half) 38%, transparent); color: var(--half); }
.sel-btn.tint-purple { background: color-mix(in srgb, var(--purple) 9%, var(--surface)); border-color: color-mix(in srgb, var(--purple) 38%, transparent); color: var(--purple); }
.sel-btn[class*="tint-"]:hover { border-color: var(--text-dim); }

.sel-value.is-placeholder { color: var(--text-dim); }
.sel-sizer { visibility: hidden; pointer-events: none; }
.sel-sizer > span { display: block; height: 0; overflow: hidden; white-space: nowrap; }
.sel-chev { grid-area: 1 / 2; width: 14px; height: 14px; color: var(--text-dim); transition: transform .15s, color .12s; }
.sel-open .sel-chev { transform: rotate(180deg); color: var(--accent); }

.sel-menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%;
  display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 4px;
}
.sel-open .sel-menu { display: flex; }
.sel-up .sel-menu { top: auto; bottom: calc(100% + 4px); }
.sel-right .sel-menu { left: auto; right: 0; }
.sel-search { padding: 2px 2px 4px; }
.sel-search input { padding: 6px 9px; font-size: 12.5px; }
.sel-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.sel-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 5px;
  font-size: 13px; color: var(--text); white-space: nowrap; cursor: pointer;
}
.sel-opt.is-active { background: var(--accent-soft); }
.sel-opt.is-selected { font-weight: 600; }
.sel-opt.is-selected:not([class*="opt-"]) { color: var(--accent); }
.sel-opt.is-selected::after {
  content: ''; margin-left: auto; margin-right: 3px;
  width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sel-opt.is-disabled { color: var(--text-dim); cursor: default; }
.sel-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-dim); }

/* ---------- Calendar ---------- */
.dp { position: relative; display: block; width: 100%; }
.dp-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer;
  transition: border-color .12s;
}
.dp-btn:hover { border-color: var(--text-dim); }
.dp-btn:focus { outline: none; border-color: var(--accent); }
.dp-open .dp-btn { border-color: var(--accent); }
.dp-ico { width: 15px; height: 15px; flex: none; color: var(--text-dim); }
.dp-open .dp-ico { color: var(--accent); }
.dp-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-value.is-placeholder { color: var(--text-dim); }

.dp-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 272px;
  display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 12px;
}
.dp-open .dp-pop { display: block; }
.dp-up .dp-pop { top: auto; bottom: calc(100% + 6px); }
.dp-right .dp-pop { left: auto; right: 0; }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.dp-title { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.dp-nav {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text-dim); cursor: pointer; font: inherit;
  transition: background .12s, color .12s;
}
.dp-nav svg { width: 15px; height: 15px; }
.dp-nav:hover { background: var(--accent-soft); color: var(--text); }
.dp-nav:focus-visible { outline: none; background: var(--accent-soft); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.dp-dow { text-align: center; font-size: 11px; font-weight: 500; color: var(--text-dim); padding: 2px 0 6px; }
.dp-blank { height: 32px; }
.dp-day {
  height: 32px; width: 100%; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--text);
  font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background .1s;
}
.dp-day:hover { background: var(--accent-soft); }
.dp-day:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.dp-day.is-today { font-weight: 700; color: var(--accent); }
.dp-day.is-in-range { background: var(--accent-soft); border-radius: 0; }
.dp-day.is-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.dp-day.is-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dp-day.is-start.is-end { border-radius: var(--radius-sm); }
.dp-day.is-selected, .dp-day.is-selected:hover { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.dp-time { display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.dp-time-label { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-right: auto; }
.dp-time input[type=text] { width: 42px; padding: 5px 4px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.dp-colon { color: var(--text-dim); font-weight: 600; }
.dp-ampm {
  margin-left: 3px; min-width: 42px; padding: 5px 8px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.dp-ampm:hover { color: var(--text); border-color: var(--text-dim); }
.dp-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.dp-foot .spacer { flex: 1; }
.dp-caption { font-size: 12px; color: var(--text-soft); }
.dp-link {
  background: none; border: 0; padding: 4px 6px; margin: 0 -6px;
  font: inherit; font-size: 12.5px; font-weight: 550; color: var(--text-soft);
  border-radius: 5px; cursor: pointer;
}
.dp-link:hover { color: var(--text); background: var(--surface-2); }
/* Clear is flush with the left edge, so what it says lines up with the
   calendar above it; the caption follows, clear of the button. */
.dp-foot .dp-link + .dp-caption { margin-left: 8px; }
.dp-link.is-primary { color: var(--accent); margin-left: 0; }
.dp-link.is-primary:hover { background: var(--accent-soft); }

/* Range tabs: the Custom tab opens the calendar under the tab bar. */
.tabs-wrap { position: relative; display: inline-block; }
.tabs-wrap .dp-pop { top: calc(100% + 8px); }
.tab-custom { cursor: pointer; }

/* Compact variants inside the inline card-head filter. */
.filter-inline .sel, .filter-inline .dp { width: auto; }
.filter-inline .sel-btn, .filter-inline .dp-btn { padding: 6px 9px; font-size: 12.5px; }
.filters .sel { min-width: 132px; }
.truncate-lg { max-width: 300px; }

/* Two-column cards: slightly tighter cells so the payment-method table fits without a scrollbar. */
.grid-2 thead th, .grid-2 tbody td, .grid-2 tfoot td { padding-left: 10px; padding-right: 10px; }
.grid-2 .minibar { width: 44px; }

/* ==========================================================================
   Dashboard stat cards: label + icon, value, period-over-period delta
   ========================================================================== */
.stat { display: flex; flex-direction: column; gap: 5px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-icon { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.stat-icon svg { display: block; width: 100%; height: 100%; }
.stat .stat-value { margin-top: 0; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.delta svg { width: 13px; height: 13px; flex: none; }
.delta-good { color: var(--good); }
.delta-bad  { color: var(--bad); }
.delta-flat { color: var(--text-dim); }
.delta-note { color: var(--text-dim); font-weight: 500; margin-left: 3px; }

/* Recovery-rate cell: percentage then a proportional bar. */
.rate { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 8px; }
.minibar-good { fill: var(--good); }
.minibar-bad  { fill: var(--bad); }

/* ==========================================================================
   Settings: section icons, worker-initial tag and its colour picker
   ========================================================================== */
.card-head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.head-icon { width: 16px; height: 16px; flex: none; color: var(--text-dim); }

/* Purple, to round out the badge palette a worker can choose from. */
.tone-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }

.tag-initial { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.who-text strong { display: flex; align-items: center; gap: 6px; }
.who-text strong .tag-initial { flex: none; }

/* ---------- Tag colour picker ---------- */
.picker { position: relative; display: inline-block; }
.picker-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 10px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .12s;
}
.picker-trigger:hover { border-color: var(--text-dim); }
.picker-trigger:focus-visible { outline: none; border-color: var(--accent); }
.picker-open .picker-trigger { border-color: var(--accent); }
.picker-chip { min-width: 34px; text-align: center; }
.picker-hex { font-size: 12.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .02em; }
.picker-chev { width: 14px; height: 14px; color: var(--text-dim); transition: transform .15s; }
.picker-open .picker-chev { transform: rotate(180deg); }

.picker-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 246px;
  display: none; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
}
.picker-open .picker-pop { display: block; }
.picker-up .picker-pop { top: auto; bottom: calc(100% + 6px); }

.picker-area {
  position: relative; height: 132px; border-radius: 8px; overflow: hidden;
  cursor: crosshair; touch-action: none; background-color: #f00;
}
.picker-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-sat, .picker-val { position: absolute; inset: 0; }
.picker-sat { background: linear-gradient(to right, #fff, rgb(255 255 255 / 0)); }
.picker-val { background: linear-gradient(to top, #000, rgb(0 0 0 / 0)); }
.picker-thumb {
  position: absolute; width: 13px; height: 13px; margin: -7px 0 0 -7px;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .35);
  pointer-events: none;
}

.picker-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.picker-eye {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text-soft); cursor: pointer;
}
.picker-eye svg { width: 15px; height: 15px; }
.picker-eye:hover { color: var(--text); border-color: var(--text-dim); }

.picker-hue {
  position: relative; flex: 1; height: 12px; border-radius: 999px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.picker-hue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-hue-thumb {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / .35);
  background: transparent; pointer-events: none;
}

.picker-hash { color: var(--text-dim); font-size: 13px; }
.picker-input { text-transform: uppercase; letter-spacing: .04em; padding: 6px 9px; font-size: 13px; }

.picker-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.preset {
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  border: 1px solid rgb(0 0 0 / .18); cursor: pointer;
}
.preset:hover { transform: scale(1.12); }
.preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.preset-slate  { background: #6b7280; }
.preset-blue   { background: #2f7fe0; }
.preset-teal   { background: #14b8a6; }
.preset-green  { background: #10b981; }
.preset-amber  { background: #f59e0b; }
.preset-red    { background: #ef4444; }
.preset-pink   { background: #ec4899; }
.preset-purple { background: #7c7cf0; }

/* ==========================================================================
   Fast order logging: a left-to-right row in the order the team already works,
   with everything the account already knows shown as context rather than input.
   ========================================================================== */
.log-context {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  padding: 11px 14px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.log-context > div { display: flex; flex-direction: column; gap: 1px; }
.log-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.log-value { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text); }

.log-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.log-row .field { margin: 0; min-width: 0; }
.log-row .f-name  { flex: 1 1 160px; }
.log-row .f-link  { flex: 2.4 1 240px; }
.log-row .f-pick  { flex: 1 1 148px; }
.log-row .f-money { flex: 1 1 116px; }
.computed-sm { font-size: 15px; padding: 8px 10px; }

.payer-other { margin-top: 6px; }

/* A note is somewhere to write, so it opens at the size of a note rather than
   as one line. app.js still grows it past this as the writing runs on. */
.field-note textarea { min-height: 112px; }

/* Item costs are a run of amounts. Only the money is asked for, so each row is
   a box and the small cross that drops it. */
.item-costs { display: flex; flex-wrap: wrap; gap: 6px; }
.item-row { display: flex; align-items: center; gap: 4px; }
.item-row input { width: 104px; }
.btn-icon {
  flex: none; width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  color: var(--text-dim); background: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: color .12s, background .12s, border-color .12s;
}
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon:hover { color: var(--bad); background: var(--surface-2); border-color: var(--line); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mt-8 { margin-top: 8px; }

.log-more { margin-top: 18px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.log-more > summary {
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.log-more > summary::-webkit-details-marker { display: none; }
.log-more > summary::before {
  content: ''; width: 5px; height: 5px; flex: none;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform .15s;
}
.log-more[open] > summary::before { transform: rotate(45deg); }
.log-more > summary:hover { color: var(--text); }
.log-more .log-row { margin-top: 14px; }

/* Click-to-pick pills for short lists (Service, Payment) — one click instead
   of open-then-choose. Native radios underneath, so arrow keys still work. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-opt { position: relative; display: inline-flex; }
.chip-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip-opt span {
  display: inline-block; padding: 8px 12px;
  font: inherit; font-size: 13px; font-weight: 550; line-height: 1.15;
  color: var(--text-soft); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.chip-opt span:hover { color: var(--text); border-color: var(--text-dim); }
.chip-opt input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600;
}
.chip-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.log-row .f-chips   { flex: 2 1 250px; min-width: auto; }
.log-row .f-chips-2 { flex: 1.2 1 176px; min-width: auto; }
.log-row .f-num { flex: 0 1 96px; }

/* The breakdown reads like the team's sheet: money in green, money out red,
   and the label stays quiet so the figure is what the eye lands on. */
.calc-in strong  { color: var(--good); }
.calc-out strong { color: var(--bad); }
.calc-box .calc-owed span { color: var(--text); font-weight: 600; }

/* The logging breakdown. The Difference is the figure the eye lands on, so it
   carries the meaning colour rather than the accent the refund box uses. */
/* A block box at a set width, so it does not shrink around short amounts. */
.calc-log { margin-top: 16px; width: 320px; max-width: 100%; }
.calc-log .calc-owed strong { font-size: 19px; color: var(--text); }
.calc-log .calc-owed strong.num-pos { color: var(--good); }
.calc-log .calc-owed strong.num-neg { color: var(--bad); }

/* A taskbar-style clock: the day and time on top, the numeric date beneath. */
.log-when { display: flex; flex-direction: column; gap: 1px; }
.log-when-time {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
}
.log-when-date { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Order count sits in the corner of the strip, drawn like inline code: the
   value is what matters and it is almost always 1. */
.log-count { margin-left: auto; }
input.code-input, .code-value {
  padding: 3px 10px;
  font-family: var(--mono); font-size: 12.5px; text-align: center;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 5px;
  transition: border-color .12s;
}
input.code-input { width: 56px; }
input.code-input:hover { border-color: var(--text-dim); }
input.code-input:focus { outline: none; border-color: var(--accent); }

/* The card fills the space between the page head and the bottom of the window,
   and its parts share the slack, so a short form reads as a page rather than as
   a strip with a screen's worth of nothing below it. */
.log-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.log-card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.log-card form { flex: 1 1 auto; display: flex; flex-direction: column; }
.log-card .log-group { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.log-card .log-pair { flex: 1 0 auto; }
.log-card .log-pair .log-group { height: 100%; }
.log-card .form-actions { margin-top: auto; }

/* The logging form in four readable parts, each a quiet panel, so the eye lands
   on a section before it lands on a field. */
.log-group {
  margin-top: 10px; padding: 9px 12px 11px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
/* The three amounts sit against a taller breakdown, so they centre on it
   rather than leaving a block of nothing under them. */
.log-money { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.log-money .log-row { flex: 1 1 300px; }
.log-money .calc-log { flex: 1 1 300px; max-width: 460px; margin-top: 0; width: auto; }

/* Status and Notes share a row; neither fills one on its own. */
.log-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: 10px; margin-top: 10px; }
.log-pair .log-group { margin-top: 0; }

/* Service reads down a column per platform: DD, UE, GH across; Delivery above
   Pickup. Each cell stretches so the columns line up. */
.chips-rows-2 {
  display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr); gap: 6px;
}

/* Payment reads across instead of down: Zelle beside Venmo, PayPal beside
   Crypto, which is the order the team says them in. */
.chips-cols-2 {
  display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 6px;
}

.chips-rows-2 .chip-opt, .chips-cols-2 .chip-opt { display: block; }
.chips-rows-2 .chip-opt span, .chips-cols-2 .chip-opt span {
  display: block; width: 100%; text-align: center;
}

@media (max-width: 1400px) {
  /* Chrome the form does not need, given up before a row is. */
  .main-wide { padding-top: 18px; padding-bottom: 16px; }
  .main-wide .page-head { margin-bottom: 12px; }
  .main-wide .form-actions { margin-top: 0; padding-top: 8px; }
  .log-group { margin-top: 7px; padding: 7px 10px 9px; }
  .log-pair { gap: 7px; margin-top: 7px; }
  .log-context { padding: 9px 12px; margin-bottom: 11px; }
  .log-row { gap: 9px 12px; }
}

@media (max-width: 900px) {
  .log-row .f-chips, .log-row .f-chips-2 { min-width: 0; }
  .chips-rows-2 { grid-auto-columns: minmax(0, 1fr); }
  .chips-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-opt span { padding: 8px 6px; font-size: 12.5px; }
}

/* A chosen status wears its own colour, in the closed control and in the list,
   so it matches the badge the same value gets in the table. */
.opt-good    { color: var(--good); }
.opt-warn    { color: var(--warn); }
.opt-bad     { color: var(--bad); }
.opt-info    { color: var(--info); }
.opt-neutral { color: var(--neutral); }
.opt-muted   { color: var(--muted); }
.opt-accent  { color: var(--accent); }
.opt-extra   { color: var(--extra); }
.opt-half    { color: var(--half); }
.opt-purple  { color: var(--purple); }
.sel-value.is-placeholder { color: var(--text-dim); }
.sel-opt.is-selected { font-weight: 650; }

/* A read-only figure in the same inline-code box as an editable one. */
.code-value { display: inline-block; text-align: center; font-weight: 600; white-space: nowrap; }

/* >>> PORTED DESIGN BLOCK >>> */
/* ==========================================================================
   PORTED FROM THE PREVIOUS DASHBOARD (C:/Users/user/Desktop/app/dashboard.css)
   Radii, shapes, buttons, inputs, cards, tables, badges, chips, menus, stat
   tiles, hover and focus grammar, type base. Line numbers in the comments are
   that file's. Rules the owner set for this app win over the source and are
   noted where they do: the #a5d4ff primary, outlined 999px badges, no helper
   text, field focus as a border, the hidden rail scrollbar, the red Sign out.
   This block sits last so it overrides what came before it.
   ========================================================================== */

/* --- Tokens: three radii and no shadows (69-70, 17-20) ------------------- */
:root {
  --r: 8px;        /* a control */
  --r-lg: 12px;    /* a card */
  --r-sm: 6px;     /* a badge, a nav row */
  --rail: 236px;
  --radius: var(--r-lg);
  --radius-sm: var(--r);
  --shadow: none;
  --sidebar-hover: #161619;
  --scroll: #d4d4d8; --scroll-hi: #bdbdc4;
  --sw-track: #dfdfe0; --sw-knob: #7f7f81;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow: none; --shadow-lg: none;
    --scroll: #2a2a2f; --scroll-hi: #3a3a41;
    --sw-track: #2e2e34; --sw-knob: #8a8a93;
  }
}

/* --- Type base (115-118, 249): 13.5 body, tight tracking, 19px titles ------ */
body {
  font-size: 13.5px; line-height: 1.5; letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1 { font-size: 19px; line-height: 1.25; letter-spacing: -.022em; }
.page-head p { margin: 3px 0 0; }
.mono { font-family: var(--mono); font-size: inherit; font-variant-numeric: tabular-nums; }

/* Labels beside a figure are sentence case in the third ink (41-44). */
.section-head { margin: 26px 0 12px; font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-soft); }
.split-label, .wk-band-label, .log-label, .stat-label {
  font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-dim);
}

/* Browser defaults are the loudest thing on a dark surface (77-98). */
::selection { background: color-mix(in srgb, var(--text) 22%, transparent); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); background-clip: padding-box; }
* { scrollbar-color: var(--scroll) transparent; scrollbar-width: thin; }
/* Owner: the rail's own bar stays hidden. */
.nav { scrollbar-width: none; }
.nav::-webkit-scrollbar { width: 0; height: 0; }

/* Keyboard focus is a plain line, never a blur (84, 406-407). Fields keep a
   border only, which the earlier rules already do. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.sel-btn:focus-visible, .dp-btn:focus-visible, .picker-trigger:focus-visible, .file-pick:focus-within {
  outline: none; border-color: var(--accent);
}
.me-row:focus-visible, .me-signout:focus-visible, .btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Buttons (256-272, 306-311): fixed 32px, fill one step up ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; letter-spacing: -.008em;
  white-space: nowrap; cursor: pointer;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
  transform: none;
}
.btn:hover { background: var(--surface-3); border-color: color-mix(in srgb, var(--text) 16%, transparent); text-decoration: none; }
.btn:active { transform: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-text); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hi); border-color: transparent; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
/* Red is for the moment of the press, not for a button at rest (306-311). */
.btn-danger { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.btn-icon { width: 28px; height: 28px; border-radius: var(--r-sm); }
.btn.icon-btn { width: 32px; padding: 0; display: grid; place-items: center; }

/* Hover on any other control is a fill step; the border is for focus (2562). */
.file-pick:hover, .sel-btn:hover, .dp-btn:hover, .picker-trigger:hover { background: var(--surface-3); border-color: var(--line); }
.file-pick:hover { color: var(--text); }
.sel-btn[class*="tint-"]:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); }
.sel-btn[class*="tint-"]:focus,
.sel-open .sel-btn[class*="tint-"] { border-color: currentColor; outline-color: currentColor; }
.sel-open .sel-btn[class*="tint-"] .sel-chev { color: inherit; }
input.code-input:hover, .picker-eye:hover, .dp-ampm:hover { background: var(--surface-3); border-color: var(--line); color: var(--text); }

/* --- Inputs: the 34px box, one step up from the card (385-391, 3523) -------- */
input[type=text], input[type=password], input[type=search], input[type=url], input[type=date], select {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13.5px;
  transition: border-color .12s ease;
}
select { padding-right: 30px; }
.file-pick { height: 34px; padding: 0 11px; border-radius: var(--r); background: var(--surface-2); }
textarea {
  min-height: 34px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 13.5px; line-height: 18px;
  transition: border-color .12s ease;
}
.field-note textarea { min-height: 112px; }
input:disabled, select:disabled, textarea:disabled { color: var(--text-soft); cursor: not-allowed; }
input.bad, select.bad, textarea.bad, .field.bad input, .field.bad select, .field.bad textarea { border-color: var(--bad); }
.chip-opt input:disabled + span { opacity: .5; cursor: not-allowed; }
/* Compact editors inside table cells. */
.link-form input, .rate-form input, .dp-time input[type=text], .picker-input { height: 28px; padding: 0 8px; font-size: 12.5px; }
.rate-form .rate-mode { height: 28px; padding: 0 24px 0 7px; }
.dp-time input[type=text] { padding: 0 4px; }
input.code-input, .code-value { height: auto; padding: 3px 10px; border-radius: var(--r-sm); }

/* --- Fields: label above, as a row (355-357, 373-378) ----------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > .btn, .field > .tabs { align-self: flex-start; }
/* Direct labels only: the file picker and the choice pills are labels too, and are controls. */
.field > label:not(.switch):not(.file-pick), .field > .label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--text-soft);
}
.field > label .dim { flex: none; font-size: 11px; font-weight: 400; color: var(--text-dim); }
.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-actions > .to-end { margin-left: auto; }
.form-actions > .foot-full { flex: 1 0 100%; }
.form-actions.ruled { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 14px; }
.form-msg { font-size: 12.5px; line-height: 1.4; color: var(--text-soft); }
.form-msg.bad { color: var(--bad); }
.form-msg.ok { color: var(--good); }

/* --- Switch: a 34x20 track whose knob goes green when on (343-348) --------- */
.switch { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 400; color: var(--text); cursor: pointer; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 34px; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 99px;
  background: var(--sw-track); position: relative; cursor: pointer; transition: background .16s ease;
}
.switch input::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 99px;
  background: var(--sw-knob); transition: transform .16s ease, background .16s ease;
}
.switch input:checked { background: color-mix(in srgb, var(--good) 25%, transparent); }
.switch input:checked::before { transform: translateX(14px); background: var(--good); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Range tabs: a segmented control, level with a button (324-330) -------- */
.tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); }
.tab {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: var(--r-sm); font-size: 12.5px; font-weight: 450; color: var(--text-soft);
  white-space: nowrap; transition: background .1s ease, color .1s ease;
}
.tab:hover { color: var(--text); background: none; text-decoration: none; }
.tab.is-active, .tab.is-active:hover { background: var(--surface-3); color: var(--text); font-weight: 500; }
.tab-count { display: inline; min-width: 0; padding: 0; margin-left: 6px; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tab.is-active .tab-count { color: var(--text-soft); background: none; }

/* --- Choice pills: the chosen one wears the outlined shape (280-282) -------- */
.chip-opt span { border-radius: var(--r); }
.chip-opt input:checked + span {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent); font-weight: 500;
}
.chip-opt input:checked + span:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 36%, transparent);
}
.chip-opt input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- Badges: fixed 21px so a column's right edge stays straight (1153-1169) - */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px; border: 1px solid transparent; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; letter-spacing: -.004em; line-height: 1; white-space: nowrap;
}
.badge i { width: 5px; height: 5px; border-radius: 99px; flex: none; background: currentColor; }
.tone-plain { color: var(--text-dim); background: transparent; border-color: transparent; }
/* A rank is a square, not a pill (1175-1185). */
.chip {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: var(--r-sm); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}

/* --- Cards (886-901): one step up and a hairline, 12px, no shadow ----------- */
.card { border-radius: var(--radius); box-shadow: none; }
.card-head { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.card-head .btn-row { align-items: center; justify-content: flex-end; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sub-head { padding: 14px 16px 8px; border-top: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--text-dim); }
.card-head + .sub-head { border-top: 0; }

/* --- Tables (916-939): quiet headings, nowrap cells, faint row hover -------- */
thead th {
  text-align: left; padding: 8px 16px;
  font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-dim); background: none; border-bottom: 1px solid var(--line-soft); white-space: nowrap;
}
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; line-height: 1.35; white-space: nowrap; }
tbody tr:hover { background: color-mix(in srgb, var(--text) 2%, transparent); }
tfoot td { border-top: 1px solid var(--line); background: none; font-weight: 450; font-size: 12.5px; color: var(--text-soft); padding: 12px 16px; }
tfoot td.num, tfoot .cell-strong { color: var(--text); font-weight: 550; }
.cell-ref { font-family: var(--mono); font-size: 12px; color: var(--text-soft); letter-spacing: -.01em; }
.cell-ref a { color: inherit; text-decoration: none; }
tbody tr.go { cursor: pointer; }
tbody tr.go:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
tbody tr.go:hover .cell-ref, tbody tr.go:hover .plain { color: var(--text); }
table .plain { color: inherit; text-decoration: none; }
tbody tr.group td { padding: 14px 16px 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .02em; color: var(--text-dim); }
tbody tr.group:first-child td { padding-top: 4px; }
tr.group .count { color: var(--text-dim); font-variant-numeric: tabular-nums; margin-left: 8px; }
td .sub { display: block; margin-top: 2px; color: var(--text-dim); font-size: 12px; overflow-wrap: anywhere; }
td .sub.bad { color: var(--bad); }
.approx { color: var(--text-dim); margin-right: 1px; }
.foot-note { padding: 12px 16px; border-top: 1px solid var(--line-soft); color: var(--text-dim); font-size: 12.5px; }
@media (max-width: 760px) {
  thead th, tbody td, tfoot td { padding-left: 12px; padding-right: 12px; }
  tbody td:first-child { white-space: normal; }
  .drop { display: none; }
}

/* --- Filter bar is a bare row; the search carries its button (968-1012) ---- */
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.card > .filters { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.filters .found { font-size: 13px; color: var(--text-soft); white-space: nowrap; }
.filters .sel, .filters .dp, .filters select { width: 172px; min-width: 0; flex: none; }
.filters .btn, .filters .btn-sm { height: 34px; }
.filter-inline > select, .filter-inline > input, .filter-inline .sel-btn, .filter-inline .dp-btn { height: 34px; padding: 0 11px; font-size: 13.5px; }
.search { position: relative; display: flex; align-items: center; }
.search input { padding-right: 34px; }
.search-go { position: absolute; right: 3px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s; }
.search-go:hover { background: var(--surface-3); color: var(--text); }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 14px 16px; border-top: 0; font-size: 12.5px; color: var(--text-soft); }

/* --- Empty states (1020-1035): the sentence, and the quiet line ------------ */
.empty { padding: 40px 16px; text-align: center; color: var(--text-soft); font-size: 13px; }
.empty.bad { color: var(--bad); }
.empty p + p { margin-top: 6px; color: var(--text-dim); }
.empty .btn, .empty-acts { margin-top: 12px; }
.nothing { padding: 12px 16px; font-size: 13px; color: var(--text-dim); }
.card-body > .nothing { padding: 0; }

/* --- Stat tiles (2686-2698): a gapped column, 25/600 tabular figure --------- */
.stats { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; box-shadow: none; }
.stat:hover { background: var(--surface); border-color: var(--line); }
a.stat:hover { background: var(--surface-2); border-color: var(--line); text-decoration: none; }
.stat-value { font-size: 25px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin-top: 0; font-variant-numeric: tabular-nums; color: var(--text); }
.delta { font-size: 12.5px; font-weight: 450; }
.delta-note { font-weight: inherit; }
.wk-sub { margin-top: 8px; font-size: 12px; font-weight: 450; color: var(--text-dim); }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats.five, .stats.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .stats.three, .stats.five, .stats.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- The rail (68-75, 143-176, 184-193, 2224-2229) --------------------------- */
.shell { min-height: 100vh; min-height: 100dvh; }
.sidebar { width: var(--rail); flex: 0 0 var(--rail); }
.brand { gap: 9px; padding: 15px 16px 14px; font-size: 14px; font-weight: 600; letter-spacing: -.015em; }
.brand-mark { width: 22px; height: 22px; border-radius: var(--r-sm); }
.brand-mark svg { width: 14px; height: 14px; }
.nav { gap: 0; padding: 8px 8px 8px; }
.nav-group { padding: 14px 8px 5px; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--text-dim); }
.nav-group:first-child { padding-top: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 6px 8px;
  border-radius: var(--r-sm); color: var(--sidebar-text);
  font-size: 13px; font-weight: 450; letter-spacing: -.008em;
  transition: background .1s ease, color .1s ease;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: 1; color: var(--text-dim); transition: color .1s ease; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-hi); text-decoration: none; }
.nav-item:hover svg { color: var(--sidebar-text); }
.nav-item.is-active { background: var(--sidebar-hover); color: var(--sidebar-hi); font-weight: 500; }
.nav-item.is-active svg { color: var(--accent); }
.sidebar-foot { padding: 8px; }
.avatar { width: 24px; height: 24px; background: var(--surface-3); color: var(--sidebar-text); font-size: 10.5px; }
.me-row { gap: 9px; padding: 7px 8px; border-radius: var(--r-sm); transition: background .1s ease; }
.me-row:hover, .me-row.is-active { background: var(--sidebar-hover); }
.who-text { line-height: 1.25; }
.who-text strong { font-size: 12.5px; font-weight: 500; }
.who-text small { font-size: 11.5px; color: var(--text-dim); }
.me-signout {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 6px 8px;
  background: none; border: 0; border-radius: var(--r-sm);
  /* Owner: red at rest, as on the previous dashboard's own rail. */
  color: var(--bad); font: inherit; font-size: 13px; font-weight: 450; letter-spacing: -.008em;
  cursor: pointer; text-align: left; transition: background .1s ease, color .1s ease;
}
.me-signout:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* The rail on a phone: every tab as a chip with its word, one row that
   scrolls sideways (2154-2214). */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .brand { padding: 0 8px 0 0; border-bottom: 0; }
  .nav { flex: 1 1 auto; min-width: 0; flex-direction: row; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 8px 0; overflow-x: auto; overflow-y: hidden; }
  .nav > * { flex: none; }
  .nav-group { display: none; }
  .nav-item { background: var(--surface); white-space: nowrap; padding: 6px 10px; }
  .nav-item span { display: inline; }
  .main { padding: 16px 14px 40px; }
  .sel-menu { right: 0; width: auto; max-width: none; }
  .sel-opt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* --- Page frame (247) -------------------------------------------------------- */
.main { padding: 22px 24px 40px; }

/* --- Sign-in door (globals 23-75): one card, centred, no glow ----------------- */
html, body { height: 100%; }
body.centered { min-height: 100vh; min-height: 100dvh; }
.auth { max-width: 392px; }
.auth .card { border-color: var(--line-soft); border-radius: var(--r-lg); box-shadow: none; }
.auth .card-body { padding: 28px; }
.auth-brand .brand-mark { width: 30px; height: 30px; border-radius: var(--r); }
.auth-brand .brand-mark svg { width: 16px; height: 16px; }
.auth h1 { font-size: 17px; letter-spacing: -.018em; text-align: center; }
.auth .sub { text-align: center; margin: 4px 0 22px; }
.auth .btn { width: 100%; justify-content: center; height: 36px; margin-top: 20px; font-size: 13.5px; font-weight: 600; }

/* --- Small parts ------------------------------------------------------------- */
.timeline .dot, .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); align-self: flex-start; margin-top: 6px; flex: none; }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.floor { gap: 0; }
.floor-row { padding: 9px 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line-soft); }
.floor-row:last-child { border-bottom: 0; }
.floor-name { font-weight: 500; }
.kv dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.kv dd a:hover { text-decoration-color: var(--text); }
.file { border-radius: var(--r); padding: 6px 8px 6px 10px; font-size: 12px; }
.minibar { width: 140px; }
.minibar-track { fill: var(--line); }
.minibar-fill { fill: var(--text-soft); }
.grid-2 .minibar { width: 44px; }
.row-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.row-acts .said { flex: 1 0 100%; text-align: right; margin-top: -2px; }

/* --- The dropdown, which is every menu (2545-2650) ---------------------------- */
.sel-btn, .dp-btn { height: 34px; padding: 0 11px; border-radius: var(--r); background: var(--surface-2); font-size: 13.5px; }
.picker-trigger { height: 34px; padding: 0 11px; border-radius: var(--r); background: var(--surface-2); }
.sel.is-disabled .sel-btn { color: var(--text-soft); cursor: not-allowed; opacity: 1; }
.sel-chev { width: 16px; height: 16px; }
.sel-open .sel-chev { transform: rotate(180deg); color: inherit; }
.sel-menu {
  top: calc(100% + 5px); min-width: 100%; max-width: 320px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: none; padding: 0; overflow: hidden;
}
.sel-list { max-height: 264px; overscroll-behavior: contain; padding: 4px; }
.sel-search { padding: 0; }
.sel-search input { height: 38px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; font-size: 13.5px; }
.sel-search input:focus { border-color: var(--line-soft); }
.sel-opt { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.sel-opt.is-active { background: var(--surface-3); }
.sel-opt.is-selected { font-weight: 500; }
.sel-opt.is-selected::after { border-color: var(--text-soft); }
.sel-empty { padding: 14px 12px; font-size: 13px; color: var(--text-dim); }
@media (max-width: 640px) { .sel-list { max-height: 208px; } }

/* --- Calendar popover (1826-1844) ------------------------------------------- */
.dp-pop, .picker-pop { border-radius: var(--r-lg); box-shadow: none; }
.dp-pop { padding: 9px; max-width: calc(100vw - 28px); }
.dp-grid { gap: 0; }
.dp-nav { width: 24px; height: 24px; border-radius: var(--r-sm); }
.dp-nav:hover { background: var(--surface-2); color: var(--text); }
.dp-day { height: 30px; border-radius: var(--r-sm); color: var(--text-soft); }
.dp-day:hover { background: var(--surface-2); color: var(--text); }
.dp-day:disabled { color: color-mix(in srgb, var(--text-dim) 45%, transparent); cursor: not-allowed; }
.dp-day.is-in-range { background: var(--surface-3); border-radius: 0; }
.dp-day.is-selected, .dp-day.is-selected:hover { font-weight: 550; }
.dp-link { border-radius: var(--r-sm); }

/* Smaller radii on the small things (69-70). */
.me-gear, .btn-icon, .dp-link, .lb-place { border-radius: var(--r-sm); }

/* --- One rhythm (247, 495): the page is a column with one gap, and nothing
   carries a margin of its own. Blocks are 18px apart, tiles 12px, the label
   and its control 6px, fields 14px, the parts of the log 12px. -------------- */
.main { display: flex; flex-direction: column; gap: 18px; }
.page-head, .stats, .card, .filters, .grid-2, .wk-band, .wk-stats, .wk-grid,
.ops-banner, .flash, .callout, .split, .tabs-spaced, .tabs-wrap, .pickup-card {
  margin-top: 0; margin-bottom: 0;
}
.card + .card, .card + .grid-2, .grid-2 + .card, .grid-2 + .grid-2, .callout + .grid-2, .flash + .grid-2 { margin-top: 0; }
/* A section heading belongs to the card under it: 26px above, 10px below. */
.section-head { margin: 8px 0 -8px; }
.stats, .wk-stats, .split { gap: 12px; }
.grid-2, .wk-grid { gap: 18px; }

/* Inside a card that is a form (495): 14px between fields, 6px inside one. */
.field { gap: 6px; margin-bottom: 14px; }
.form-grid { gap: 14px; }
.form-grid .field, .log-row .field, .filters .field { margin-bottom: 0; }
.form-actions { margin-top: 2px; padding-top: 0; border-top: 0; }
.form-actions.ruled { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.log-row { gap: 14px; }

/* The log: the strip, the groups and the actions are a column 12px apart. */
.log-card form { display: flex; flex-direction: column; gap: 12px; }
.log-context { padding: 12px 14px; margin: 0; }
.log-group { margin: 0; padding: 12px 14px 14px; }
.log-pair { gap: 12px; margin: 0; }
.log-card .form-actions { margin-top: auto; }
@media (max-width: 1400px) {
  .log-card form { gap: 8px; }
  .log-context { padding: 9px 12px; margin: 0; }
  .log-group { margin: 0; padding: 9px 12px 10px; }
  .log-pair { gap: 8px; margin: 0; }
  .log-row { gap: 10px 12px; }
}

/* The worker's band and the floor keep the same measures as a card. */
.wk-band { padding: 12px 16px; gap: 10px 30px; }
.wk-pay-line, .wk-pay-total { padding: 9px 0; }

/* --- Tags sit in FRONT of the name (".z Jericho"), one fixed gap ------------ */
.badge { vertical-align: middle; }
.badge + .badge { margin-left: 4px; }
.tag-initial { margin: 0 6px 0 0; }
.who-text strong .tag-initial, .card-head .tag-initial { margin: 0; }
.lb-name .tag-initial { margin-right: 7px; }

/* Two facts about one account read down, not across: the name over the contact. */
.stack { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; max-width: 400px; }
.stack .field { margin: 0; }
/* A two-column pill group is as wide as four pills, never the rest of the row. */
/* Two pills side by side, each as wide as a pill in the three-column Service group (119px),
   so every pill on a form is the same size whichever group it sits in. */
.log-row .f-chips-2 { flex: 0 1 246px; min-width: auto; max-width: 246px; }
/* And the three-column group is three of the same pill, so nothing on a form
   squeezes one group to pay for another. Text fields take whatever is left. */
.log-row .f-chips:not(.f-chips-2) { flex: 0 1 372px; min-width: auto; max-width: 372px; }

/* Tags are rounded squares, not pills (69-70: "6 for a badge"). The owner chose the
   source rule here over the 999px pill. Dots and avatars stay round; they are not tags. */
.badge, .tag-initial, .lb-you, .lb-place, .tone-plain { border-radius: var(--r-sm); }

/* --- The race: workers as lines climbing through the week ------------------ */
.race { display: block; width: 100%; height: auto; margin-bottom: 12px; font-family: var(--font); }
.race-grid { stroke: var(--line-soft); stroke-width: 1; }
.race-y, .race-x { fill: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.race-line .race-path { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.race-line .race-area { stroke: none; }
.race-line circle { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.race-line .race-tag { fill: currentColor; font-size: 11.5px; font-weight: 600; }
.race-line.race-me .race-path { stroke-width: 3; opacity: 1; }
.race-line.race-me circle { fill: currentColor; }
.race-line:hover .race-path { opacity: 1; stroke-width: 3; }
.race-list { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.wk-grid-race { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .wk-grid-race { grid-template-columns: minmax(0, 1fr); } }
.race { margin-bottom: 0; }
.wk-chart { height: 104px; }

/* --- The overview in the same shape: tone chips on tiles, a money curve ------ */
.wk-tone-good .wk-icon   { color: var(--good);   background: color-mix(in srgb, var(--good) 14%, transparent); }
.wk-tone-warn .wk-icon   { color: var(--warn);   background: color-mix(in srgb, var(--warn) 14%, transparent); }
.wk-tone-bad .wk-icon    { color: var(--bad);    background: color-mix(in srgb, var(--bad) 14%, transparent); }
.wk-tone-info .wk-icon   { color: var(--info);   background: color-mix(in srgb, var(--info) 14%, transparent); }
.wk-tone-purple .wk-icon { color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, transparent); }
.race-accent { color: var(--accent); }
.lb-sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.lb-money { text-align: right; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.lb-row:has(.lb-money) { grid-template-columns: 30px minmax(0, 1fr) auto; }

/* --- Settings as rows that open (a native <details> each) ------------------- */
.acc-list { display: flex; flex-direction: column; }
.acc-list > form { display: contents; }
.acc { border-top: 1px solid var(--line-soft); }
.acc-list > .acc:first-child, .acc-list > form:first-child > .acc:first-child { border-top: 0; }
.acc-list > form + .acc, .acc-list > .acc + form > .acc, .acc-list > form + form > .acc { border-top: 1px solid var(--line-soft); }
.acc > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--text);
  transition: background .1s ease;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm); }
.acc > summary .head-icon { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.acc-title { flex: 1 1 auto; min-width: 0; }
.acc-chev { width: 16px; height: 16px; flex: none; color: var(--text-dim); transition: transform .15s ease; }
.acc[open] > summary .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 2px 16px 16px; }
.acc-body .form-actions { margin-top: 2px; }
.acc-body .acc-table { margin: 0 -16px 12px; }
.acc-body .timeline { margin: 0; }
/* A control with the worker's tag in front of it. */
.with-tag { display: flex; align-items: center; gap: 8px; }
.with-tag .tag-initial { margin: 0; flex: none; }
.with-tag input { flex: 1 1 auto; min-width: 0; }
.with-tag input.initial-box { flex: 0 0 74px; width: 74px; text-align: center; font-family: var(--mono); }

/* --- The identity line: the initial as its own tag, a pencil for its colour,
   the name, and Save at the end, all level ------------------------------ */
.id-row { display: flex; align-items: center; gap: 8px; }
.id-row .id-picker { display: flex; align-items: center; gap: 4px; flex: none; }
/* The name box is as long as a name, not as long as the row; Save sits right after it. */
.id-row input#username { flex: 0 1 340px; width: 340px; min-width: 0; }
.id-row .btn-primary { flex: none; }
input.initial-box {
  flex: none; width: 64px; height: 34px; padding: 0 8px; text-align: center;
  font-family: var(--mono); font-weight: 600; letter-spacing: .01em;
  border-radius: var(--r); transition: border-color .12s ease;
}
input.initial-box:focus-visible { outline: none; border-color: currentColor; }
.picker-pencil { width: 34px; height: 34px; border-radius: var(--r); color: var(--text-dim); }
.picker-pencil:hover { color: var(--text); background: var(--surface-3); border-color: var(--line); }
.id-picker .picker-pop { left: 0; }

/* --- A password box with Show inside it ------------------------------------- */
.reveal { position: relative; display: flex; align-items: center; }
.reveal input { padding-right: 62px; }
.reveal-btn {
  position: absolute; right: 5px; height: 24px; padding: 0 9px;
  border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-soft);
  cursor: pointer; transition: background .1s ease, color .1s ease;
}
.reveal-btn:hover { color: var(--text); background: var(--surface-3); }
.reveal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field > .form-msg { margin: 0; }

/* --- Heavier settings boxes: a titled head, a firm edge, tall rows ---------- */
.acc-card { border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.acc-card > .card-head { padding: 15px 18px; }
.acc-card > .card-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--text); }
.acc-card > .card-head form { margin: 0; }
.acc { border-top: 1px solid var(--line); }
.acc-card > .card-head + .acc, .acc-card > .card-head + form > .acc:first-child { border-top: 0; }
.acc > summary { padding: 14px 18px; min-height: 50px; font-size: 14.5px; font-weight: 500; }
.acc > summary .head-icon { width: 17px; height: 17px; }
.acc-chev { width: 18px; height: 18px; }
.acc-body { padding: 4px 18px 18px; }
.acc-body .acc-table { margin: 0 -18px 12px; }
table.activity td, table.activity th { padding-left: 18px; padding-right: 18px; }

/* --- A dense list: fourteen columns that fit without a sideways scroll ---------- */
.table-dense thead th { padding: 7px 8px; font-size: 11px; }
.table-dense tbody td { padding: 7px 8px; font-size: 13px; line-height: 1.3; }
.table-dense .cell-ref { font-size: 11.5px; }
.table-dense .badge { height: 20px; padding: 0 7px; font-size: 11px; }
.table-dense .tag-initial { margin-right: 5px; }
.table-dense .num, .table-dense .money { white-space: nowrap; }
.truncate-sm { max-width: 110px; }
.cell-icon { width: 36px; text-align: center; }
.icon-link {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm);
  color: var(--accent); transition: background .1s ease;
}
.icon-link svg { width: 15px; height: 15px; }
.icon-link:hover { background: var(--surface-3); text-decoration: none; }
.cell-clip { width: 13px; height: 13px; vertical-align: -2px; margin: 0 2px 0 6px; }

/* --- The colour picker is a floating panel on its own surface, so its corners
   read as corners wherever it lands; every box inside it is a control ------ */
.picker-pop {
  width: 246px; padding: 12px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* The layers draw their own rounded edges, so the box neither clips nor
   isolates them: a clipped corner comes out jagged, a drawn one is smooth. */
.picker-area { border-radius: var(--r); overflow: visible; isolation: auto; }
.picker-sat, .picker-val { border-radius: inherit; }
.picker-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker-eye {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-soft);
}
.picker-eye:hover { background: var(--surface-4, var(--surface-3)); border-color: var(--line-strong, var(--line)); color: var(--text); }
.picker-pop .picker-input { background: var(--surface-3); }
.picker-pop .picker-input:focus-visible { background: var(--surface-3); }

/* The pencil is an outlined control, level with the initial box and the name. */
.picker-pencil {
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-soft);
}
.picker-pencil svg { width: 15px; height: 15px; }
.picker-pencil:hover { background: var(--surface-3); border-color: var(--line); color: var(--text); }
.picker-open .picker-pencil { border-color: var(--accent); color: var(--text); }

/* The hue is painted on the white layer, so the box behind it stays clear. */
.picker-area { background: transparent; }
/* One layer draws the hue, the white and the black together. Two stacked rounded
   layers left a bright hairline along the bottom corners where their soft edges met. */
.picker-sat {
  background-color: #f00;
  background-image: linear-gradient(to top, #000, rgb(0 0 0 / 0)), linear-gradient(to right, #fff, rgb(255 255 255 / 0));
}
.picker-val { display: none; }

/* --- The pay table: eleven columns on one screen -------------------------- */
.pay-table .hint { font-size: 11px; }
.pay-table .ratio { gap: 2px; }
.pay-table .chip { min-width: 22px; height: 20px; padding: 0 5px; font-size: 11px; }
.pay-table .rate-form { gap: 4px; }
.pay-table .rate-form input { width: 54px; }
.pay-table .rate-form .rate-mode { width: auto; min-width: 0; }
.pay-table .rate-form .btn-sm { padding: 0 9px; }
.pay-table td.cell-actions { padding-right: 10px; }

/* --- The filter bar is one even row: every box shares the width, the search
   takes twice its share, and the buttons sit level with the boxes ---------- */
.filters { flex-wrap: nowrap; align-items: flex-end; gap: 10px; }
.filters > .field { flex: 1 1 120px; min-width: 0; }
.filters > .field-search { flex: 2 1 200px; min-width: 160px; }
.filters .sel, .filters .dp, .filters select, .filters input[type=search] { width: 100%; min-width: 0; flex: none; }
.filters > .btn { flex: none; }
@media (max-width: 1100px) { .filters { flex-wrap: wrap; } .filters > .field { flex-basis: 150px; } }

/* --- Focus is an accent ring on the box itself, the way the reference
   design rings its boxes in white --------------------------------------- */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.sel-btn:focus-visible, .dp-btn:focus-visible, .picker-trigger:focus-visible, .file-pick:focus-within,
.sel-open .sel-btn, .dp-open .dp-btn, .picker-open .picker-trigger {
  border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0;
}
input.initial-box:focus-visible { border-color: currentColor; outline: 1px solid currentColor; outline-offset: 0; }
.picker-pop .picker-input:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); }

/* --- The proof box: one control, three ways in -------------------------------- */
.proof-box {
  display: flex; align-items: center; height: 34px; padding: 0 4px 0 0;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .1s ease, background .1s ease;
}
.proof-box:focus-within { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; }
.proof-box.is-over { border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.proof-box.has-file { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.proof-pick {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--text-soft); cursor: pointer; border-right: 1px solid var(--line-soft);
  border-radius: 7px 0 0 7px; transition: background .1s ease, color .1s ease;
}
.proof-pick:hover { color: var(--text); background: var(--surface-3); }
.proof-pick svg { width: 16px; height: 16px; }
.proof-box .proof-link { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 9px; border: 0; background: none; border-radius: 0; }
.proof-box .proof-link:focus-visible { outline: none; border: 0; }
.proof-file { flex: 0 1 auto; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text); padding: 0 6px; }
.proof-clear {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; background: none; color: var(--text-dim); border-radius: var(--r-sm); cursor: pointer;
}
.proof-clear:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.proof-clear svg { width: 13px; height: 13px; }

/* The red X on a cost row is filled like a chosen pill, in its own colour. */
.item-row .btn-icon[data-item-remove] {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  border-color: color-mix(in srgb, var(--bad) 28%, transparent);
}
.item-row .btn-icon[data-item-remove]:hover {
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
}

/* Two proofs, checkout above refund, beside the statuses; the note beside them
   is as tall as the pair. */
.proof-stack { display: flex; flex-direction: column; gap: 12px; }
.proof-stack .field { margin: 0; }
.log-row .proof-stack.f-name { flex: 1 1 200px; }
.log-row .f-link textarea { height: 100%; min-height: 34px; resize: vertical; }
.log-row .f-link { display: flex; flex-direction: column; }
.log-row .f-link textarea { flex: 1 1 auto; }
.file-meta small .badge { margin-right: 4px; vertical-align: -5px; }

/* The note fills its group, so the right half of the pair is as tall as the
   proofs on the left and nothing floats in the middle. */
.log-card .log-pair .log-group > .log-row { flex: 1 1 auto; align-items: stretch; }
.log-card .log-pair .log-group > .log-row > .field:not(.f-link) { align-self: flex-start; }
.log-card .log-pair .log-group > .log-row > .f-link { display: flex; flex-direction: column; }
.log-card .log-pair .log-group > .log-row > .f-link textarea { flex: 1 1 auto; min-height: 34px; }

/* --- Team: press a name or a tag to change it; Save shows once it differs ----- */
.id-row-sm { gap: 6px; }
.id-row-sm .id-picker { gap: 3px; }
input.initial-box-sm { width: 44px; height: 28px; padding: 0 4px; font-size: 12px; border-radius: var(--r-sm); }
.picker-pencil-sm { width: 28px; height: 28px; border-radius: var(--r-sm); }
.picker-pencil-sm svg { width: 13px; height: 13px; }
input.press-edit {
  width: 160px; height: 28px; padding: 0 7px; margin: 0;
  font-weight: 600; color: var(--text); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background .1s ease, border-color .1s ease;
}
input.press-edit:hover { background: var(--surface-2); border-color: var(--line); }
input.press-edit:focus-visible { background: var(--surface-2); border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; }
.press-save { height: 28px; }
.press-live:not(.is-dirty) .press-save { display: none; }

/* A table whose rows open panels (the Team page) must not clip them. */
.table-wrap-open { overflow: visible; }
.table-wrap-open .picker-pop { z-index: 70; }

/* --- Pages fill the screen: no width cap on the main column ------------------- */
.main, .main-wide { max-width: none; }
.chart { max-width: none; }

/* A reference never breaks at its hyphen, however tight the table. */
tbody td.cell-ref, tbody td.cell-ref a, tbody td.nowrap, thead th.nowrap { white-space: nowrap; }

/* --- One accent all the way through: the brand mark wears the accent, not pink --- */
:root { --brand: var(--accent); }
.brand-mark { background: var(--accent); color: var(--accent-text); }

/* --- Adding an account is one row in the Settings look: tag, colour, name, role,
   password, Create; it wraps on a narrow window ---------------------------------- */
.id-row-create { flex-wrap: wrap; }
.id-row-create + .id-row-create { margin-top: 8px; }
.id-row-create .col-a { flex: none; width: 132px; }
.id-row-create input#new-username, .id-row-create input#new-password { flex: 0 1 340px; width: 340px; min-width: 160px; }
.id-row-create .role-chips { width: 132px; max-width: 132px; }
.id-row-create .role-chips .chip-opt span { min-width: 0; padding-left: 6px; padding-right: 6px; }

/* --- The site asks in its own box, not the browser's ------------------------------ */
dialog.ask {
  width: min(440px, calc(100vw - 32px)); padding: 0; margin: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: var(--r-lg);
}
dialog.ask::backdrop { background: rgb(0 0 0 / .6); }
.ask-box { margin: 0; padding: 20px 22px 18px; }
.ask-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -.012em; color: var(--text); }
.ask-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.gift-slot { display: contents; }

/* --- Looking at the desk as a worker ---------------------------------------
   Loud enough that nobody wonders where the admin pages went, quiet enough to
   sit above real work without being the first thing read. */
.as-worker {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--warn); font-size: 12.5px; font-weight: 500; line-height: 1.2;
}
/* The icon has no intrinsic size, so without this it grows to whatever the
   row will give it - which on a full-width banner was most of the screen. */
.as-worker svg { width: 15px; height: 15px; flex: none; }
.as-worker > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.as-worker form { margin-left: auto; flex: none; }

/* --- Pickup links, made from Supplies ------------------------------------- */
.pk-new { display: flex; gap: 8px; align-items: center; }
.pk-new input { flex: 1 1 320px; min-width: 0; }
.pk-new .btn { flex: none; }
.pk-rows { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pk-row { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.pk-row:first-child { padding-top: 0; border-top: 0; }
.pk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-top .spacer { flex: 1; }
.pk-name { font-weight: 600; font-size: 13.5px; }
.pk-order, .pk-age { font-size: 12px; }

/* --- Sign-up and approval --------------------------------------------------------- */
.auth-alt { margin: 14px 0 0; text-align: center; font-size: 13px; }
.auth-alt a { color: var(--text-soft); }
.auth-alt a:hover { color: var(--text); }
/* The button sits close under the last box. */
.auth form > .field:last-of-type { margin-bottom: 0; }
.auth form > .btn { margin-top: 12px; }
.auth .id-row input#username { flex: 1 1 auto; width: auto; }
.auth .id-picker .picker-pop { left: 0; }
.pending-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.pending-row + .pending-row { border-top: 1px solid var(--line-soft); }
.pending-row .id-row-pending { flex: 1 1 auto; }
.pending-tag { height: 28px; min-width: 44px; padding: 0 6px; font-size: 12px; }
.pending-name { font-weight: 600; }
.pending-when { font-size: 12.5px; margin-right: auto; }
.role-tags { width: 132px; max-width: 132px; }
.role-tags .chip-opt span { min-width: 0; padding-left: 6px; padding-right: 6px; height: 26px; font-size: 12px; }

/* Sign-up: Initial over the tag box, then Username over its own box below. */
.signup-row { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 14px; }
.signup-row .field { margin: 0; }
.signup-row .field-initial { flex: none; }
.signup-row .field-username { flex: 1 1 auto; min-width: 0; }
.signup-row .field-username input { width: 100%; }

/* The rows save themselves; the button is only for a page without scripting. */
.press-live .press-save { display: none; }
/* A pending sign-up's tag sits centred like every other tag. */
.pending-tag {
  display: inline-grid; place-items: center; width: 44px; height: 28px; padding: 0;
  font-family: var(--mono); font-weight: 600; font-size: 12px; border-radius: var(--r-sm);
}

/* --- The week card turns over: bars in front, a day's breakdown behind ----------- */
.wk-flip { perspective: 1200px; }
.wk-flip-inner { position: relative; transition: transform .55s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.wk-flip.is-flipped .wk-flip-inner { transform: rotateY(180deg); }
.wk-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.wk-front { position: relative; }
/* Both faces share one cell, so the card is as tall as its taller face and nothing is cut off. */
.wk-flip-inner { display: grid; }
.wk-face { grid-area: 1 / 1; }
.wk-back { transform: rotateY(180deg); display: flex; flex-direction: column; }
.wk-back-pay .wk-pay-line, .wk-back-pay .wk-pay-total { padding-top: 6px; padding-bottom: 6px; }
.wk-plot { position: relative; }
.wk-hits { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.wk-hit { position: relative; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: var(--r-sm); }
.wk-hit:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.wk-tip {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  padding: 2px 7px; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  font-size: 11.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .1s ease;
}
.wk-hit:hover .wk-tip, .wk-hit:focus-visible .wk-tip { opacity: 1; }
.wk-axis span { font-size: 11px; }
.wk-back-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13.5px; }
.wk-back-title { font-size: 14px; }
.wk-back-pay { flex: 1 1 auto; }

/* --- Supplies: the three ways to get something, side by side --------------------- */
.supply-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.supply-grid .card { min-width: 0; }
@media (max-width: 1100px) { .supply-grid { grid-template-columns: 1fr; } }
.card-head .tabs { margin: 0; }

/* --- Supplies, the fast way: one press gets a thing, one press copies it ------ */
.get-bar { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 18px; align-items: start; }
.get-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.get-group > .label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.get-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.get-form { display: flex; gap: 8px; align-items: center; flex: 1 1 220px; min-width: 200px; }
.get-form input { flex: 1 1 auto; min-width: 0; }
.get-btn { height: 34px; padding: 0 14px; gap: 7px; }
.get-btn svg { width: 15px; height: 15px; }
.get-count { font-weight: 500; opacity: .75; }
@media (max-width: 1100px) { .get-bar { grid-template-columns: 1fr; } }

.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .latest-grid { grid-template-columns: 1fr; } }
.latest .card-body { display: flex; flex-direction: column; gap: 8px; }
.latest-main { font-size: 16px; font-weight: 600; }
.latest-main .mono { font-size: 16px; }
.latest-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }

.copy-wrap { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.copy-wrap > .mono, .copy-wrap > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn { width: 24px; height: 24px; color: var(--text-dim); position: relative; }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn .copy-done { display: none; color: var(--good); }
.copy-btn.is-copied svg:not(.copy-done) { display: none; }
.copy-btn.is-copied .copy-done { display: block; }
.copy-btn:hover { color: var(--text); background: var(--surface-3); }

.order-link { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
input.press-edit-sm { width: 118px; height: 26px; font-size: 12px; font-weight: 500; padding: 0 6px; margin: 0; }
.order-link .icon-link { width: 24px; height: 24px; }
.order-link .press-save { height: 26px; }

/* Crypto is white; a claimed payment shows who has it. */
.tone-white { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); border-color: color-mix(in srgb, var(--text) 38%, transparent); }
.claimed-by { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.opt-white  { color: var(--text); }
.opt-accent { color: var(--accent); }

/* The daily bonus tiers: orders on the left, the bonus on the right, two columns of rows. */
.tier-grid { display: flex; flex-direction: column; gap: 6px; }
.tier-row { display: flex; align-items: center; gap: 8px; }
.tier-row input { width: 110px; flex: none; }
.tier-row input[data-money] { width: 120px; }

/* Save sits at the far right of every settings row. */
.acc-body .form-actions { justify-content: flex-end; }
.tier-remove { width: 26px; height: 26px; color: var(--text-dim); flex: none; }
.tier-remove:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }

/* The timezone box with Detect beside it. */
.tz-row { display: flex; gap: 8px; align-items: center; }
.tz-row .sel, .tz-row select { flex: 1 1 auto; min-width: 0; }
.tz-row .btn { flex: none; }

/* Saved for later: the pinkish-white glow the owner liked, and the wine it sat on. Not used yet. */
:root { --rose-glow: #f2cfe0; --rose-glow-soft: rgb(242 207 224 / .35); --rose-wine: #3a1a2a; }

/* The value itself copies, not only the icon. */
.copy-wrap { cursor: pointer; }
.copy-wrap:hover > .mono, .copy-wrap:hover > span:first-child { color: inherit; }

/* --- The breakdown of one worker, for an administrator ----------------------- */
.bd-card .card-head { align-items: center; }
/* The breakdown range: the same four tabs as everywhere else, so the Custom
   calendar can hang off it. The two date boxes and their Go button that used
   to sit beside them are gone. */
.bd-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bd-range .tabs, .bd-range .tabs-wrap { margin: 0; }
.bd-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .bd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .bd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bd-tile { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.bd-tile span { font-size: 12px; color: var(--text-soft); }
.bd-tile strong { font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-tile strong em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-soft); margin-left: 4px; }
.bd-tile small { font-size: 11.5px; }
.bd-span { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 12px; white-space: nowrap; margin: 1px 0; }
.bd-card tr.is-today td:first-child strong { color: var(--good); }

/* --- The three big cards: get it in the head, the newest one large below ------- */
.latest .card-head { flex-wrap: wrap; gap: 10px; }
.latest .card-head .get-row { margin-left: auto; }
.latest .card-body { gap: 12px; }
.latest-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.latest-label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.latest-field > .copy-wrap > .mono, .latest-field > .copy-wrap > span:first-child { font-size: 15px; font-weight: 600; }
.latest-field:first-child > .copy-wrap > .mono { font-size: 19px; letter-spacing: .01em; }
.latest-row { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.latest-when { font-size: 12px; display: flex; align-items: center; gap: 8px; }

/* Every big card is a plain list of rows, the same height of head on each. */
.latest .card-head { min-height: 50px; }
.latest .card-body { gap: 10px; }
.latest-field > .copy-wrap > .mono, .latest-field > .copy-wrap > span:first-child { font-size: 15px; }
.latest-field:first-child > .copy-wrap > .mono { font-size: 17px; }

/* --- The race, redrawn: glow, motion, chips, a rung to the next racer --------- */
.race { display: block; width: 100%; height: auto; margin: 0; overflow: visible; }
.race-today { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
.race-grid { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.race-x.is-today { fill: var(--accent); font-weight: 700; }
.race-line .race-path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.race-line.race-me .race-path { stroke-width: 3.4; opacity: 1; }
.race-line .race-dot { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.race-line .race-now { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.race-line .race-pulse { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }
.race-line .race-lead { stroke: currentColor; stroke-width: 1; opacity: .5; }
.race-chip rect { fill: color-mix(in srgb, currentColor 14%, var(--surface)); stroke: color-mix(in srgb, currentColor 45%, transparent); stroke-width: 1; }
.race-chip text { fill: currentColor; font-size: 11.5px; font-weight: 700; font-family: var(--mono); }
.race-chip .race-chip-n { font-family: var(--font); font-weight: 600; }
.race-line.race-me .race-chip rect { fill: color-mix(in srgb, currentColor 26%, var(--surface)); stroke: currentColor; }
.race-trophy { color: #f5c542; }
.race-trophy path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.race-rung line { stroke: var(--text-soft); stroke-width: 1.2; }
.race-rung text { fill: var(--text-soft); font-size: 11px; font-weight: 600; }
.race-caption { text-align: right; }

/* Motion: the lines draw themselves in, one after another; today's point breathes. */
@media (prefers-reduced-motion: no-preference) {
  .race-line .race-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: race-draw 1.3s cubic-bezier(.45, 0, .2, 1) forwards; }
  .race-line .race-area, .race-line .race-dot, .race-line .race-now, .race-line .race-chip, .race-line .race-lead, .race-rung { opacity: 0; animation: race-in .5s ease forwards 1.1s; }
  .race-line:nth-child(n+1) .race-path { animation-delay: .1s; }
  .race-line:nth-child(n+2) .race-path { animation-delay: .25s; }
  .race-line:nth-child(n+3) .race-path { animation-delay: .4s; }
  .race-line:nth-child(n+4) .race-path { animation-delay: .55s; }
  .race-line.race-me .race-path { animation-delay: .7s; }
  .race-line .race-pulse { animation: race-pulse 2.2s ease-out 1.6s infinite; }
}
@keyframes race-draw { to { stroke-dashoffset: 0; } }
@keyframes race-in { to { opacity: 1; } }
@keyframes race-pulse { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
.race-line .race-area { opacity: 1; }

/* --- Standings: trophies you can see, orders under the name, money on the right --- */
.lb-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; }
.lb-place { width: 34px; height: 34px; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 1px solid transparent; border-radius: var(--r); }
.lb-place svg { width: 20px; height: 20px; stroke-width: 2.4; }
.lb-gold   { color: #f5c542; background: color-mix(in srgb, #f5c542 16%, transparent); border-color: color-mix(in srgb, #f5c542 45%, transparent); }
.lb-silver { color: #c9ced8; background: color-mix(in srgb, #c9ced8 14%, transparent); border-color: color-mix(in srgb, #c9ced8 40%, transparent); }
.lb-bronze { color: #d9925a; background: color-mix(in srgb, #d9925a 16%, transparent); border-color: color-mix(in srgb, #d9925a 45%, transparent); }
.lb-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-sub { font-size: 11.5px; color: var(--text-soft); }
.lb-meter { margin-top: 2px; }
.lb-count { font-size: 15px; font-weight: 700; }
.race-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.race-tabs { margin: 0; }

/* --- Suppliers and their accounts, a tree the owner tends ------------------ */
.sup-list { display: flex; flex-direction: column; gap: 12px; }
.sup-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 10px 18px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.sup-row.is-off { opacity: .6; }
/* A row with a drag handle has four things in it, not three. Without this the
   handle took the first column, everything shuffled one to the right, and the
   buttons fell to a second line. */
.sup-row.has-grip { grid-template-columns: 18px 220px 1fr auto; }
.sup-name { display: flex; align-items: center; gap: 6px; margin: 0; }
.sup-name input.press-edit { width: 160px; font-size: 14px; }
.sup-accounts { display: flex; flex-direction: column; gap: 4px; }
.sup-account { display: flex; align-items: center; gap: 6px; margin: 0; }
.sup-arrow { font-size: 16px; line-height: 1; }
.sup-count { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sup-remove { width: 24px; height: 24px; color: var(--text-dim); }
.sup-remove:hover:not(:disabled) { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.sup-remove:disabled { opacity: .35; cursor: default; }
.sup-add { margin-top: 2px; }
.sup-actions { display: flex; gap: 6px; }
.sup-new { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.sup-new input { width: 260px; }

/* Standings rows breathe at the ends: the highlight box is wider than its contents. */
.lb-row { padding: 10px 14px; border-radius: var(--r); }
.lb-row.is-me { margin: 0 -4px; padding: 10px 18px; }

/* The chip at the end of a line: a numbered medal, the tag, the orders and
   the money, in one box the line's own colour. */
.race-chip rect { fill: color-mix(in srgb, currentColor 14%, var(--surface)); stroke: color-mix(in srgb, currentColor 45%, transparent); }
.race-chip .race-chip-tag { fill: currentColor; font-family: var(--mono); font-size: 11.5px; font-weight: 700; }
.race-chip .race-chip-n { fill: var(--text-soft); font-family: var(--font); font-size: 11.5px; font-weight: 600; }
.race-chip .race-chip-m { fill: var(--text); font-family: var(--font); font-size: 11.5px; font-weight: 700; }
.race-medal path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.race-place-1 .race-medal { color: #f5c542; }
.race-place-2 .race-medal { color: #c9ced8; }
.race-place-3 .race-medal { color: #d9925a; }
.race-trophy { display: none; }

/* Standings places: bold trophies on gold, silver and bronze tiles. */
.lb-row { grid-template-columns: 36px 1fr auto; }
.lb-place { width: 36px; height: 36px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.lb-place svg { width: 22px; height: 22px; stroke-width: 2.6; }

/* A titled card head, the way the reference does it: title over a line of
   context, an icon tile at the right. */
.card-head-titled { align-items: center; }
.head-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.head-stack h2 { font-size: 14px; font-weight: 600; }
.head-sub { font-size: 12px; color: var(--text-soft); }
.head-tile { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); flex: none; }
.head-tile svg { width: 16px; height: 16px; }
.head-tile-gold { color: #f5c542; background: color-mix(in srgb, #f5c542 14%, transparent); border-color: color-mix(in srgb, #f5c542 35%, transparent); }

/* Email and number providers: one line each. */
.prov-row { grid-template-columns: 1fr auto auto; align-items: center; }
.prov-row .sup-name { flex-wrap: wrap; }
input.prov-country { width: 56px; }
/* Narrow: a supply price is cents, not a salary. */
input.prov-price { width: 72px; }
/* The order a group is tried in, and the arrows that change it. */
.prov-rung { display: inline-block; min-width: 26px; margin-right: 8px; font-weight: 600; color: var(--text-soft); }
.prov-move { width: 24px; height: 24px; }
.prov-move svg { width: 14px; height: 14px; }
.prov-move:disabled { opacity: .3; cursor: not-allowed; }
/* The handle, and the row while it is being carried. With scripting on the
   arrows go: two ways to do one thing is one too many, and the arrows are
   only there so the order can still be changed with scripting off. */
.prov-grip { display: inline-flex; align-items: center; color: var(--text-dim); cursor: grab; flex: none; }
.prov-grip svg { width: 15px; height: 15px; }
.prov-row[draggable="true"] .prov-grip:active { cursor: grabbing; }
.prov-row.is-dragging { opacity: .45; }
.prov-row.is-over { box-shadow: inset 0 2px 0 0 var(--accent); }
html:not(.has-drag) .prov-grip { display: none; }
.has-drag .prov-move { display: none; }
/* Numbers, grouped by who sells them: the key at the top of each group, the
   services it buys underneath. */
.vend-list { display: flex; flex-direction: column; gap: 18px; }
.vend { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 12px 14px 14px; background: var(--surface-2); }
.vend-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.vend-name { margin: 0; font-size: 13.5px; font-weight: 600; }
.vend-key { display: flex; align-items: center; gap: 8px; }
.vend-key input { width: 260px; max-width: 100%; }
.vend .sup-list { margin-bottom: 10px; }
.vend.is-off { opacity: .55; }
.vend-acts { margin-left: auto; }
.vend .sup-accounts { display: flex; flex-direction: column; gap: 6px; }
.vend .sup-account { display: flex; align-items: center; gap: 8px; }
.sup-new input.prov-price { width: 82px; }
.sup-new input.prov-code { width: 140px; }
.sup-new input.prov-country { width: 56px; }

/* Details in the latest boxes are tiles: press anywhere on one to copy it. */
.latest-field > .copy-wrap, .latest-field > [data-sms-code] > .copy-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-3) 45%, transparent);
  transition: border-color .12s ease, background .12s ease;
}
/* Hovering a copy tile only says the cursor is here: the icon comes up and
   the edge firms, with no accent wash. A whole row of tiles lighting up read
   as a row of buttons rather than as the values they are. */
.latest-field > .copy-wrap:hover, .latest-field > [data-sms-code] > .copy-wrap:hover {
  border-color: var(--line);
}
.latest-field > .copy-wrap:hover .copy-btn { color: var(--text); }
.latest-field > .copy-wrap > .mono, .latest-field > .copy-wrap > span:first-child,
.latest-field > [data-sms-code] > .copy-wrap > .mono { font-size: 19px; font-weight: 650; flex: 1 1 auto; }
.latest-field:first-child > .copy-wrap > .mono { font-size: 21px; }
.latest-field .copy-btn { width: 30px; height: 30px; flex: 0 0 auto; }
.latest-field .copy-btn svg { width: 18px; height: 18px; }
.latest-field > [data-sms-code] { display: block; }
.latest .card-body { gap: 12px; }

/* The week chart fills its card, however tall the back of the card is. */
.wk-front { display: flex; flex-direction: column; }
.wk-front .wk-plot { flex: 1 1 auto; min-height: 104px; }
.wk-front .wk-chart { position: absolute; inset: 0; height: 100%; }

/* A place, 1st to 3rd: a filled star in the place's colour with the number cut out of it. */
.place-mark { width: 22px; height: 22px; display: block; }
.place-star { fill: currentColor; stroke: none; }
.place-digit { fill: var(--bg); stroke: none; font-family: var(--font); font-size: 7.6px; font-weight: 800; }
.race-medal .place-star { fill: currentColor; stroke: none; }
.race-medal .place-digit { fill: var(--surface); font-size: 7.6px; font-weight: 800; }
.lb-place .place-mark { width: 24px; height: 24px; }

/* The ink cut out of a place star: dark on every palette, so gold and silver stay readable. */
:root { --place-ink: #101012; }
.place-digit, .race-medal .place-digit { fill: var(--place-ink); }

/* Each line ends in a star of its own colour with the worker's initial in it. */
.race-line .race-star-shape { fill: currentColor; stroke: var(--surface); stroke-width: 1.4; stroke-linejoin: round; }
.race-line .race-star-initial { fill: var(--place-ink); stroke: none; font-family: var(--font); font-size: 9.5px; font-weight: 800; }
.race-line:hover .race-star-shape { stroke: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .race-line .race-star { opacity: 0; animation: race-in .5s ease forwards 1.1s; }
}

/* Bigger stars, the tag in the site's mono, a heavier outline. */
.race-line .race-star-shape { stroke-width: 1.1; }
.race-line .race-star-initial { font-family: var(--mono); font-size: 7.4px; font-weight: 800; letter-spacing: -.03em; }
.race-line.race-me .race-star-shape { stroke: currentColor; filter: url(#race-glow); }

/* The tag in a race star reads on the tag colour of either palette: white on
   the deep light-mode colours, near-black on the bright dark-mode ones. */
:root { --star-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --star-ink: #101012; } }
.race-line .race-star-initial { fill: var(--star-ink); }
.race-end .race-lead { display: none; }

/* A block of text with a copy button; the whole block is the button. */
.copy-block { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface-3) 45%, transparent); }
.copy-block:hover { border-color: var(--accent); }
.copy-text { margin: 0; flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: 13px; line-height: 1.45; color: var(--text); }
.copy-block .copy-btn { flex: 0 0 auto; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Pickups: the card of links waiting on customers, and what they did lately. */
.pk-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; }
@media (max-width: 900px) { .pk-body { grid-template-columns: 1fr; } }
.pk-title { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.pk-list, .pk-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pk-list { gap: 12px; }
.pk-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.pk-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pk-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.pk-act { display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.pk-act:last-child { border-bottom: 0; }
.pk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.pk-dot.tone-good { background: var(--good); }
.pk-dot.tone-warn { background: var(--warn); }
.pk-when { white-space: nowrap; }

/* Notices in the corner: a customer confirmed, or took it back. */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 36px)); }
.toast { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .35s ease, transform .35s ease; }
.toast-good { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.toast-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.toast.is-gone { opacity: 0; transform: translateY(6px); }

/* Used, Return, Bad: a short row under the item, right-aligned in a table cell. */
.supply-acts { margin-top: 4px; }
.cell-actions .supply-acts { justify-content: flex-end; flex-wrap: nowrap; margin: 0; }

/* Who settled a refund, and when, next to its status. */
.refund-by { display: inline-block; margin-left: 8px; font-size: 12px; }
.log-count .refund-by { display: block; margin: 4px 0 0; }

/* Three prices in a row, the Save on the far right like every other Save. */
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions-end { justify-content: flex-end; }

/* Money: four period tiles, a stacked day chart, the ledger. */
.mo-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
@media (max-width: 1100px) { .mo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mo-big { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mo-sub { margin-top: 4px; font-size: 12.5px; }
.mo-lines { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.mo-lines li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.mo-lines b { font-variant-numeric: tabular-nums; font-weight: 600; }
.mo-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-dim); }
.mo-zelle { background: var(--purple); fill: var(--purple); }
.mo-venmo { background: var(--accent); fill: var(--accent); }
.mo-paypal { background: var(--info); fill: var(--info); }
.mo-crypto { background: var(--text); fill: var(--text); }
.mo-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mo-bar { opacity: .85; }
.mo-grid { stroke: var(--line); }
.mo-x, .mo-y, .mo-v { fill: var(--text-dim); font-size: 10.5px; font-family: var(--font); }
.mo-x.is-today { fill: var(--good); font-weight: 700; }
.mo-v { fill: var(--text-soft); font-weight: 600; }

/* 2FA: the code big, a bar that runs down with the seconds. */
.tf-code > .mono { font-size: 30px; font-weight: 700; letter-spacing: .12em; }
.tf-timer { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; }
.tf-bar { flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.tf-fill { display: block; height: 100%; width: 100%; background: var(--accent); transition: width 1s linear; }
.tf-fill.is-low { background: var(--warn); }
.tf-rules { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tf-limits { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.tf-limits input { width: 64px; text-align: right; }

/* Mailboxes: one line each, with the things done to it at the end. */
.mb-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.mb-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.mb-last { flex-basis: 100%; }
.mb-row.is-off .cell-strong { color: var(--text-dim); }
.mb-pass { display: inline-flex; gap: 6px; }
.mb-pass input { width: 170px; height: 28px; font-size: 12.5px; }
.mb-new { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.form-grid-addr { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 720px) { .form-grid-addr { grid-template-columns: 1fr; } }
.mb-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 12px; }
.mb-foot .dim { font-size: 12px; line-height: 1.5; }

/* The crypto check: one long box and its button; our wallet rows lit. */
.crypto-form { display: flex; gap: 8px; }
.crypto-form input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); }
tr.is-ours td { background: color-mix(in srgb, var(--good) 6%, transparent); }
.wallet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wallet-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* The code line: who is in it, where you stand, the code when it is yours. */
.cq-list { display: flex; flex-direction: column; gap: 14px; }
.cq { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.cq:last-child { border-bottom: 0; padding-bottom: 0; }
.cq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cq-line { display: inline-flex; gap: 4px; }
.cq-who { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: var(--mono); font-size: 11.5px; color: var(--text-soft); }
.cq-who.is-up { border-color: var(--good); color: var(--good); }
.cq-who.is-me { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cq-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cq-said { font-size: 13.5px; color: var(--text-soft); }
.cq-code > .mono { font-size: 26px; font-weight: 700; letter-spacing: .12em; }
.cq-join { display: inline-flex; gap: 6px; }
.cq-join input { width: 72px; height: 28px; text-transform: uppercase; }
.sup-codes { display: inline-flex; gap: 6px; align-items: center; }
.sup-codes select { height: 28px; font-size: 12.5px; }

/* The three supply cards are one row of equal boxes, and whatever a worker
   can do with what is in hand sits along the bottom edge of each, in equal
   widths, so the three cards line up however many buttons each carries. */
.latest-grid > .latest { display: flex; flex-direction: column; }
.latest > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.latest .supply-acts {
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
}
.latest .supply-acts form { display: block; }
.latest .supply-acts .btn { width: 100%; height: 36px; padding: 0 10px; font-size: 13px; }

/* One font on the desk. A value you copy is set in the page's own face, not
   in a second one: an address, a card number and a code are read here, not
   compared down a column, and two families on one card reads as two products.
   Tabular figures keep the digits in line, which is the part the mono face
   was actually doing. */
.copy-wrap > .mono, .copy-wrap > span:first-child,
.tf-code > .mono, .cq-code > .mono, .latest-field .mono {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.006em;
}
.tf-code > .mono, .cq-code > .mono { letter-spacing: .06em; }

/* Used, Return and Bad are three filled buttons, each in the colour of what
   it means and carrying the icon that says it: a tick for the ordinary end,
   the turn-back arrow for putting it in the pool again, the warning triangle
   for taking it out. Filled rather than outlined because these three are the
   whole point of the card they sit on, and the ink is the ground so the fill
   can be the bright half. */
.btn.btn-used, .btn.btn-return, .btn.btn-bad { border-color: transparent; font-weight: 600; }
.btn.btn-used { background: var(--good); color: #09090b; }
.btn.btn-used:hover { background: color-mix(in srgb, var(--good) 82%, #ffffff); border-color: transparent; }
.btn.btn-return { background: var(--accent); color: var(--accent-text); }
.btn.btn-return:hover { background: var(--accent-hi); border-color: transparent; }
.btn.btn-bad { background: var(--bad); color: #1a0606; }
.btn.btn-bad:hover { background: color-mix(in srgb, var(--bad) 82%, #ffffff); border-color: transparent; }
.btn.btn-used svg, .btn.btn-return svg, .btn.btn-bad svg { color: inherit; opacity: .9; }
.btn.btn-used:hover svg, .btn.btn-return:hover svg, .btn.btn-bad:hover svg { color: inherit; }

/* The race, as a climb. The mountain is the record for the week and every
   worker stands on it at their own total; the standings sit under it in the
   same card, so a name and a pin are one press apart. */
.race-card .race-stage-wrap { padding: 8px 10px 0; }
.race-stage { display: block; width: 100%; height: auto; overflow: visible; color: var(--text-soft); }
.st-body { stroke: none; }
.st-contour { stroke: color-mix(in srgb, var(--text) 7%, transparent); stroke-width: 1; }
.st-ridge { fill: none; stroke: #b9b9c3; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-base { stroke: var(--line); stroke-width: 1; }
.st-ahead { fill: none; stroke: var(--text-dim); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.st-ahead-band { fill: color-mix(in srgb, var(--text) 3%, transparent); }
.st-tick { stroke: var(--line); stroke-width: 1; }
.st-tick.is-today { stroke: var(--accent); }
.st-post, .st-note, .st-summit-sub, .st-back { fill: var(--text-dim); font-family: var(--font); }
.st-post { font-size: 12.5px; font-weight: 600; }
.st-post.is-today { fill: var(--accent); }
.st-post.is-ahead, .st-note.is-ahead { fill: var(--text-dim); opacity: .7; }
.st-note { font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }
.st-note.is-today { fill: var(--accent); }
.st-summit { fill: var(--text); font-family: var(--font); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-summit-sub { font-size: 10.5px; }

/* A rider: the tag on a pin, in the worker's own colour. */
.st-rider .st-tag { fill: color-mix(in srgb, currentColor 12%, var(--surface)); stroke: color-mix(in srgb, currentColor 55%, transparent); stroke-width: 1; }
.st-rider .st-tag-text { fill: currentColor; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.st-rider .st-stem { stroke: currentColor; stroke-width: 1.5; opacity: .75; }
.st-rider .st-dot { fill: currentColor; stroke: var(--surface); stroke-width: 2; }
.st-rider .st-back { fill: var(--text-soft); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-rider.is-me .st-back { fill: var(--accent); font-weight: 600; }
.st-rider.is-me .st-stem, .st-rider.is-me .st-dot { stroke: var(--surface); }
.race-card.has-hot .st-rider:not(.is-hot) { opacity: .35; }
.race-card.has-hot .st-rider.is-hot .st-back { fill: var(--text); }
.st-rider { transition: opacity .18s ease; }

/* The standings under the climb. */
.race-board { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.race-board th { padding: 8px 16px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 11.5px; font-weight: 500; text-align: left; color: var(--text-dim); }
.race-board th.num, .race-board td.num { text-align: right; }
.race-board td { padding: 9px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--text); }
.race-board tbody tr:last-child td { border-bottom: 0; }
.race-board tbody tr.is-hot td, .race-board tbody tr:hover td { background: var(--surface-2); }
.race-board .rb-place { width: 1%; padding-right: 4px; font-size: 15px; font-weight: 700; color: var(--text-soft); }
.race-board tbody tr:first-child .rb-place { color: var(--text); }
.race-board .rb-who { display: flex; align-items: center; gap: 8px; }
.race-board .rb-tag { display: inline-grid; place-items: center; min-width: 26px; height: 21px; padding: 0 5px; border: 1px solid; border-radius: var(--r-sm); background: color-mix(in srgb, currentColor 12%, transparent); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.race-board tbody tr { color: var(--text); }
@media (max-width: 860px) { .race-board th, .race-board td { padding-left: 12px; padding-right: 12px; } }

/* The accent as a badge tone, so a supply back in the pool wears the colour
   of the button that put it there. */
.tone-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.tone-white { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }

/* The refund queue: one block a request, with what it takes to pay it and
   the two presses that close it. */
.rq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rq { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.rq:last-child { border-bottom: 0; padding-bottom: 0; }
.rq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rq-amount .copy-wrap > span:first-child { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rq-pay { display: flex; flex-direction: column; gap: 8px; }
.rq-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-label { font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.rq-field .copy-wrap > span:first-child { font-size: 13.5px; font-weight: 600; }
.rq-field .copy-wrap + .copy-wrap { margin-top: 2px; }
.rq-note { margin: 0; font-size: 12.5px; }
.rq-acts { gap: 8px; }
.settle-row { align-items: center; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.settle-row .dim { margin-right: auto; font-size: 12.5px; }

/* Every badge is soft.
   A tinted fill of its own colour and the colour in the text, and no ring at
   all: a column of statuses reads as a column of values rather than a column
   of little outlined objects. The .badge shape above already resets the
   border to transparent; these keep the ones defined elsewhere from putting
   an edge back on and making one method look unlike the rest. */
.tone-good, .tone-warn, .tone-bad, .tone-info, .tone-neutral, .tone-muted,
.tone-extra, .tone-half, .tone-purple, .tone-accent, .tone-white, .tone-plain {
  border-color: transparent;
}
.sender-block { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.sender-block:last-child { border-bottom: 0; }
.sender-block textarea { width: 100%; min-height: 52px; font-family: var(--mono, monospace); font-size: 12.5px; resize: vertical; }
.sender-builtin summary { cursor: pointer; font-size: 12px; padding: 4px 0; }
.sender-builtin p { font-size: 11.5px; line-height: 1.6; word-break: break-all; padding: 4px 0 0; }

.mo-out { color: var(--bad); }
.ac-id { margin-left: 8px; font-size: 12px; }
.ac-loose td { border-top: 1px solid var(--line-soft); }

.ms-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.ms-tile .card-head { align-items: center; }
.ms-tile .card-body { padding-top: 6px; }

.fmt-list { display: flex; flex-direction: column; gap: 2px; }
.fmt-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.fmt-row:last-child { border-bottom: 0; }
.fmt-main { min-width: 0; }
.fmt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fmt-sample { margin: 6px 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--text); border-left: 2px solid var(--line); padding-left: 10px; }
.fmt-from { margin: 0; font-size: 11.5px; }
.fmt-known { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fmt-known summary { cursor: pointer; font-size: 12.5px; padding: 2px 0; }
.mb-selfsigned { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mb-selfsigned .dim { font-size: 11.5px; }
.mb-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; }
.cc-form { display: flex; gap: 10px; align-items: flex-end; }
.cc-form .field { flex: 1; margin: 0; }
.cc-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.cc-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.cc-anyway { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 10px; }
.cc-wallets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.cc-wallets li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mono-wrap { font-family: var(--mono, monospace); font-size: 11.5px; word-break: break-all; }
.latest-wide { grid-column: 1 / -1; }
.eno-form { display: flex; gap: 10px; align-items: flex-end; }
.eno-form .field { margin: 0; }
.eno-form input { width: 120px; text-transform: uppercase; letter-spacing: 2px; }
.eno-said { margin: 10px 0 0; font-size: 12.5px; }
.ms-body td { padding-top: 0; border-top: 0; }
.ms-body summary { cursor: pointer; font-size: 11.5px; padding: 2px 0 6px; }
.ms-text { margin: 0 0 10px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; padding: 10px 12px; background: var(--bg-sunken, rgba(255,255,255,.03)); border-radius: 6px; }
.ms-hint { width: 90px; text-transform: uppercase; }

/* The filter bar is a box again.
   The skin had stripped its background, border and padding and centred its
   contents, so a row of labelled fields sat loose on the page with the buttons
   floating at a different height from the inputs they act on. */
.filters {
  align-items: flex-end;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  gap: 10px;
}
.filters .field { margin: 0; }
.filters .field label { white-space: nowrap; }
/* The fields share the width rather than each demanding a fixed slice, so
   the row never pushes Apply off the end of its own box. */
.filters { flex-wrap: wrap; }
/* A floor, so a narrow window wraps the row instead of squeezing every field
   into a sliver and clipping the button on the end of it. */
.filters .field { flex: 1 1 130px; min-width: 118px; }
.filters select, .filters input, .filters .sel, .filters .dp { width: 100%; min-width: 0; }
.filters .field-search { flex: 2 1 190px; min-width: 160px; }
/* The buttons keep their own size whatever else happens. */
.filters > .btn { flex: 0 0 auto; white-space: nowrap; }
/* The buttons sit on the input line, not halfway up the labels. */
.filters > .btn { align-self: flex-end; }
.card > .filters { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; border-bottom: 1px solid var(--line-soft); }

/* The row of buttons under a form needs air above it.
   The skin redefined .form-actions from scratch and dropped the padding the
   base sheet gave it, so Save ended up flush against the field it saves. */
.form-actions { margin-top: 16px; }
.acc-body .form-actions { margin-top: 18px; }
.acc-body > form:last-child .form-actions { margin-bottom: 2px; }
.cc-refused td { opacity: .6; }
/* <<< PORTED DESIGN BLOCK <<< */

/* >>> CHOMPLY SKIN >>> */
/* The operator's dark instrument panel, always. The OS theme no longer picks
   a palette: the desk is near-black with one hairline between surfaces, one
   accent for the primary action and the four state colours for everything
   that means something. Tokens, type and the shape of controls follow the
   Chomply dashboard; the ice-blue accent stays ours. */
:root {
  color-scheme: dark;
  --bg:            #09090b;
  --surface:       #101012;
  --surface-2:     #161619;
  --surface-3:     #1d1d21;
  --sidebar:       #09090b;
  --sidebar-text:  #a1a1a8;
  --sidebar-hi:    #ededf0;

  --text:          #ededf0;
  --text-soft:     #a1a1a8;
  --text-dim:      #71717a;
  /* Hairlines as alpha, so a box on a box still shows an edge. */
  --line:          rgba(255, 255, 255, .11);
  --line-soft:     rgba(255, 255, 255, .07);

  --accent:        #a5d4ff;
  --accent-hi:     #c4e3ff;
  --accent-soft:   rgba(165, 212, 255, .12);
  --accent-text:   #09090b;
  --brand:         #a5d4ff;

  --good:   #3ecf8e;  --good-bg:   rgba(62, 207, 142, .1);
  --warn:   #f5b544;  --warn-bg:   rgba(245, 181, 68, .1);
  --bad:    #f87171;  --bad-bg:    rgba(248, 113, 113, .1);
  --info:   #7c9cff;  --info-bg:   rgba(124, 156, 255, .1);
  --neutral:#a1a1a8;  --neutral-bg:rgba(255, 255, 255, .06);
  --muted:  #8a8a93;  --muted-bg:  rgba(255, 255, 255, .05);
  --extra:  #5ec8c0;  --extra-bg:  rgba(94, 200, 192, .1);
  --half:   #e0b341;  --half-bg:   rgba(224, 179, 65, .1);
  --purple: #b39dfa;  --purple-bg: rgba(179, 157, 250, .12);

  /* 8 for a control, 12 for a card, 6 for a badge or a nav row. */
  --radius:    12px;
  --radius-sm: 8px;
  --r:         8px;
  --r-lg:      12px;
  --r-sm:      6px;
  --shadow:    none;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .5);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* The parts the browser draws. */
::selection { background: rgba(165, 212, 255, .28); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2f; border: 3px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a41; background-clip: padding-box; }

/* Type: Inter at the dashboard's size, with its UI alternates on. */
body {
  font-size: 13.5px; line-height: 1.5; letter-spacing: -.006em;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1 { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.022em; }
h2 { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
h3 { font-size: 13px; font-weight: 500; letter-spacing: -.008em; }
.page-head p, .page-head .sub { margin-top: 3px; font-size: 13px; color: var(--text-soft); }
.num, .stat-value, .lb-money, .mo-big, .split-value { font-variant-numeric: tabular-nums; }

/* The rail: quiet rows, a fill plus a brighter icon for where you are. */
.sidebar { width: 236px; flex-basis: 236px; border-right-color: var(--line-soft); }
.brand { padding: 15px 16px 14px; font-size: 14px; font-weight: 600; letter-spacing: -.015em; border-bottom: 0; }
.brand-mark { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-text); }
.brand-mark svg { width: 13px; height: 13px; }
.nav { padding: 2px 8px 8px; gap: 1px; }
.nav-group { padding: 14px 8px 5px; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--text-dim); }
.nav-item { min-height: 30px; padding: 6px 8px; gap: 9px; border-radius: var(--r-sm); font-size: 13px; font-weight: 450; letter-spacing: -.008em; color: var(--sidebar-text); }
.nav-item svg { width: 16px; height: 16px; opacity: 1; color: var(--text-dim); transition: color .1s ease; }
.nav-item:hover { background: var(--surface-2); color: var(--sidebar-hi); }
.nav-item:hover svg { color: var(--text-soft); }
.nav-item.is-active { background: var(--surface-2); color: var(--sidebar-hi); font-weight: 500; }
.nav-item.is-active svg { color: var(--accent); }
.sidebar-foot { border-top-color: var(--line-soft); }
.who-text strong { font-size: 12.5px; font-weight: 500; }
.who-text small { font-size: 11.5px; }
.avatar { width: 24px; height: 24px; background: var(--surface-3); font-size: 10.5px; }

/* Boxes: one step up, one hairline, 12px corners, nothing floats. */
.card, .stat, .filters, .latest, .bd-card { box-shadow: none; border-radius: var(--radius); border-color: var(--line-soft); background: var(--surface); }
.card-head { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.card-head h2 { font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; }
.card-body { padding: 16px; }
.stat { padding: 14px 16px 15px; }
.stat:hover { border-color: var(--line); }
.stat-label { font-size: 12.5px; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--text-soft); }
.stat-value { font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.028em; margin-top: 9px; }
.split-item { background: var(--surface-2); border-color: var(--line-soft); border-radius: var(--r); }
.split-label, .sub-head, .wk-band-label, .log-label, .latest-label, .pk-title, .bd-tile span, .mo-tile .stat-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-soft);
}
.split-value { font-size: 20px; font-weight: 600; letter-spacing: -.024em; }

/* Controls: 32px buttons with a hairline, 34px inputs one step up, focus is a border. */
.btn { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: -.008em; }
.btn:hover { background: var(--surface-3); border-color: rgba(255, 255, 255, .16); }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-text); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hi); border-color: transparent; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn-danger { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.btn-danger:hover { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .3); color: #f89b9b; }
.btn svg { color: var(--text-dim); }
.btn:hover svg, .btn-primary svg { color: inherit; }
input[type=text], input[type=password], input[type=search], input[type=url], input[type=date], input[type=datetime-local], select, textarea {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); color: var(--text); font-size: 13.5px;
}
input[type=text]:focus-visible, input[type=password]:focus-visible, input[type=search]:focus-visible, input[type=url]:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
.field label, .field > .label { font-size: 12.5px; font-weight: 500; color: var(--text-soft); }

/* Tabs are pills; the chosen one sits on the pressed grey. */
.tabs { display: inline-flex; gap: 4px; padding: 0; background: none; border: 0; border-radius: 0; }
.tab { height: 28px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 450; color: var(--text-soft); }
.tab:hover { background: var(--surface-2); color: var(--text); }
.tab.is-active, .tab.is-active:hover { background: var(--surface-3); color: var(--text); font-weight: 500; }

/* Badges: a pill the height of a line, tinted, with its ring. */
.badge { height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: -.004em; }

/* Tables: quiet headings in the third ink, a row hover that only says the cursor is here. */
thead th { padding: 8px 16px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-dim); border-bottom: 1px solid var(--line-soft); }
tbody td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .017); }
.table-dense tbody td { padding: 9px 14px; }
.table-dense thead th { padding: 7px 14px; }

/* Everything else that draws a box. */
.copybox, .copy-block, .latest-field > .copy-wrap, .latest-field > [data-sms-code] > .copy-wrap { border-radius: var(--r); border-color: var(--line-soft); background: var(--surface-2); }
.flash { border-radius: var(--r); }
.toast, dialog.ask { border-radius: var(--r-lg); border-color: var(--line); background: var(--surface); }
.callout, .empty, .nothing { border-radius: var(--r); }
.me-row, .btn-icon, .chip { border-radius: var(--r-sm); }
/* <<< CHOMPLY SKIN <<< */

/* Rows nested inside a row - the API keys. They run to the card edges like
   their parents do, and step in far enough to read as belonging to it. */
.acc-sub { margin: 4px -18px -18px; }
.acc-sub > .acc { border-top: 1px solid var(--line-soft); }
.acc-sub > .acc > summary { padding-left: 41px; font-weight: 450; }
.acc-sub > .acc > .acc-body { padding-left: 41px; }

/* How a worker's claims have gone. The seven counts, the outcome bar drawn in
   the same left-to-right order as the last three of them, and what it was
   worth. Partial has its own colour because it is its own answer: some money
   came back and some did not. */
.num-half { color: var(--half); }

.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(84px, 100%), 1fr)); gap: 12px; }
.cl-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-label { font-size: 12px; color: var(--text-dim); }
.cl-value { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }

.cl-split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.cl-legend { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 7px; }
.cl-bar { display: block; width: 100%; height: 8px; }
.cl-bar-sm { height: 5px; max-width: 240px; margin-top: 6px; }
.cl-track { fill: var(--surface-2); }
.cl-good { fill: var(--good); }
.cl-half { fill: var(--half); }
.cl-bad  { fill: var(--bad); }
.cl-note { font-size: 12px; margin-top: 7px; }

.cl-money { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.cl-money .cl-label { display: block; margin-bottom: 8px; }
.cl-money-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; font-size: 14px; }
.cl-money-row strong { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cl-stake { margin-left: auto; font-size: 13px; }

/* The one-line form, for a row in the accounts table. */
.cl-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; line-height: 1.7; }
.cl-part { white-space: nowrap; font-variant-numeric: tabular-nums; }

.cl-cell-td { max-width: 320px; }
.cl-cell-td .cl-note { display: block; margin-top: 5px; }

/* The money box on the order form, once the four boxes that used to sit
   beside it were folded into it. Each line is a label and a figure typed in
   place, so a number is read where it was entered rather than checked against
   a copy of itself. */
.calc-edit { width: 100%; max-width: 420px; margin-top: 0; }
.calc-edit > div { padding: 5px 0; gap: 12px; align-items: center; }
.calc-edit label { color: var(--text-soft); font-size: 13px; cursor: pointer; }
.calc-entry { display: inline-flex; align-items: center; gap: 4px; }
.calc-sign { color: var(--bad); font-size: 15px; }
.calc-field {
  width: 118px; height: 30px; margin: 0; padding: 0 8px;
  text-align: right; font-size: 15px; font-variant-numeric: tabular-nums;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.calc-in .calc-field  { color: var(--good); }
.calc-out .calc-field { color: var(--bad); }
.calc-field:hover { border-color: var(--line); }
.calc-field:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; }
/* Difference is worked out, not typed. It keeps the plain look the figures no
   longer have, so nobody presses it waiting for a cursor. */
.calc-edit .calc-owed { padding-top: 10px !important; }

/* The search box at the top of the rail. A real form, so it still works with
   scripting off - the icon is decoration and the input is the whole control. */
.rail-search { position: relative; margin: 0 12px 10px; }
.rail-search-icon {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--text-dim); pointer-events: none;
}
.rail-search input {
  width: 100%; height: 32px; margin: 0; padding: 0 10px 0 30px;
  font-size: 13px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.rail-search input:hover { border-color: var(--line); }
.rail-search input:focus-visible { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 0; }

/* Said to a screen reader, shown to nobody. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The note folds away until it is wanted. */
.note-drop > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.note-drop > summary::-webkit-details-marker { display: none; }
.note-open {
  height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500;
  color: var(--text-soft); background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); width: max-content;
}
.note-open:hover { color: var(--text); border-color: var(--line); }
.note-open svg { width: 15px; height: 15px; }
.note-drop[open] > summary { margin-bottom: 10px; }
.note-drop[open] .note-open { color: var(--text); }
.note-drop textarea { margin: 0; }

/* The shared logins, behind one press in the toolbar. */
.auth-drop { position: relative; }
.auth-drop > summary { list-style: none; cursor: pointer; }
.auth-drop > summary::-webkit-details-marker { display: none; }
.auth-drop[open] > .auth-open { border-color: var(--accent); color: var(--text); }
.auth-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 232px; padding: 8px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.auth-list { display: flex; flex-direction: column; gap: 2px; }
.auth-pick { margin: 0; }
.auth-pick button {
  width: 100%; height: 32px; margin: 0; padding: 0 10px; text-align: left;
  font-size: 13px; color: var(--text-soft); background: transparent;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.auth-pick button:hover { color: var(--text); background: var(--surface-2); }
.auth-pick button.is-on { color: var(--accent); }
.auth-code { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.auth-name { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.auth-code .tf-code { font-size: 24px; }
.auth-code .tf-timer { margin-top: 8px; }
.auth-again { margin: 10px 0 0; }
.auth-again button { width: 100%; justify-content: center; }

.auth-none { margin: 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.6; }

/* The order form, tightened.

   The two halves of the middle row were each filling their own space badly:
   the left column ran out of fields before it ran out of box, and the money
   sat hard against the left edge of a half that is nearly twice its width. */
.log-money { justify-content: center; }
/* One column, whatever the window is doing. */
/* With the press hidden the disclosure is just a labelled field. It takes the
   spacing .field already gives every other label from its own flex gap - the
   override here added a margin on top of that gap, so Why sat twice as far
   from its box as Refund amount does from its own. */
.note-drop > summary[hidden] + .field { margin-top: 0; }
.log-details .note-drop:has(> summary[hidden]) { margin-top: 0; }

/* Owed carries a rule along its top to separate it from the working above. On
   a reason with no items there is nothing above it, so the rule would draw a
   line under nothing. */
.calc-in[hidden] + .calc-owed { border-top: 0; margin-top: 0; padding-top: 0 !important; }

/* Cash-out and adjustment: rarely used, so they live behind a press in the
   toolbar rather than holding half the page open between the chart and the
   ledger. */
.mo-drop { position: relative; }
.mo-drop > summary { list-style: none; cursor: pointer; }
.mo-drop > summary::-webkit-details-marker { display: none; }
.mo-drop[open] > summary { border-color: var(--accent); color: var(--text); }
.mo-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: 320px; max-width: 86vw; padding: 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.mo-pop .field { margin-bottom: 12px; }
.mo-pop .form-actions { margin: 0; }
.mo-pop .form-actions .btn { width: 100%; justify-content: center; }

/* The week as a row of days that turn over. The turn is a checkbox, not a
   script: the desk works with scripting off, and a day whose breakdown could
   not be opened would be half a chart. */
.mo-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: 8px; }
.mo-day { perspective: 700px; }
.mo-cardface {
  position: relative; display: block; height: 132px; cursor: pointer;
  transform-style: preserve-3d; transition: transform .38s ease;
}
.mo-flip:checked + .mo-cardface { transform: rotateY(180deg); }
.mo-flip:focus-visible + .mo-cardface { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
.mo-front, .mo-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; padding: 10px 8px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r);
}
.mo-front { align-items: center; justify-content: space-between; }
.mo-back { transform: rotateY(180deg); gap: 3px; justify-content: center; }
.mo-when { font-size: 12px; color: var(--text-soft); }
.mo-when.is-today { color: var(--good); font-weight: 600; }
.mo-spark { width: 10px; height: 46px; }
.mo-sum { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mo-line { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-soft); }
.mo-line strong { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text); }
.mo-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.mo-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .mo-cardface { transition: none; } }

/* Which way the amount goes: two submit buttons on one form, so the figure and
   the method are typed once. */
.mo-way { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mo-way .btn { width: 100%; justify-content: center; margin: 0; }
/* Minus is red standing still, not only under the pointer: it is the button
   that takes money off, and which one that is should be readable before it is
   hovered. Set here rather than with .btn-danger, which a later rule turns
   neutral until hover. */
/* Minus is filled red the way Add is filled blue: they are the two halves of
   one decision, so one of them washed out reads as the lesser option. */
.mo-minus { background: var(--bad); border-color: var(--bad); color: var(--accent-text); }
.mo-minus svg { color: inherit; opacity: .85; }
.mo-minus:hover { background: color-mix(in srgb, var(--bad) 86%, #000); border-color: color-mix(in srgb, var(--bad) 86%, #000); color: var(--accent-text); }

/* ── The search palette ─────────────────────────────────────────────────
   The rail's box is still a form; pressing it opens this over the page. The
   tabs are always there and narrow as you type, and what the desk finds comes
   in under them. */
.pal { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: center; }
.pal-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 55%); }
.pal-box {
  position: relative; width: min(560px, calc(100vw - 32px));
  max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 55%);
}
.pal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.pal-head-icon { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.pal-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  color: var(--text); font: inherit; font-size: 15px; padding: 0;
}
.pal-input::placeholder { color: var(--muted); }
.pal-input::-webkit-search-cancel-button { display: none; }
.pal-body { overflow-y: auto; padding: 6px; }
.pal-sec + .pal-sec { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 6px; }
.pal-sec-head { padding: 8px 12px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pal-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none;
}
.pal-row:hover, .pal-row.is-on { background: var(--surface-2); }
.pal-icon { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.pal-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-who { margin-left: auto; color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.pal-none { padding: 14px 12px; color: var(--muted); }
@media (max-width: 640px) { .pal-box { max-height: 84vh; } }

/* ── The timezone picker ────────────────────────────────────────────────
   Four hundred names is a scroll and a guess, so the offset sits beside each
   one and a box narrows the list. Every row is a submit button, which is what
   keeps it working with scripting off. */
.tzp { position: relative; max-width: 460px; }
.tzp > summary { list-style: none; cursor: pointer; }
.tzp > summary::-webkit-details-marker { display: none; }
.tzp-trigger {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text);
}
.tzp[open] > .tzp-trigger { border-color: var(--accent); }
.tzp-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzp-chev { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.tzp-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  display: flex; flex-direction: column; max-height: 320px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 14px 40px rgb(0 0 0 / 50%);
}
.tzp-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.tzp-search-icon { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.tzp-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  color: var(--text); font: inherit; padding: 0;
}
.tzp-search input::-webkit-search-cancel-button { display: none; }
.tzp-list { overflow-y: auto; padding: 4px; }
.tzp-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 8px; border: 0; border-radius: 7px; background: none;
  color: var(--text); font: inherit; cursor: pointer;
}
.tzp-row:hover, .tzp-row:focus-visible { background: var(--surface-2); }
.tzp-tick { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); visibility: hidden; }
.tzp-tick svg { width: 16px; height: 16px; display: block; }
.tzp-row.is-on .tzp-tick { visibility: visible; }
.tzp-city { flex: 0 0 auto; }
.tzp-region { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzp-off { margin-left: auto; color: var(--muted); font-size: 12px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tzp-trigger .tzp-region { margin-left: 8px; }

/* ══ Narrow screens ═══════════════════════════════════════════════════════
   The rail becomes a bar across the top, and the tabs scroll sideways in it.

   This is stated again down here on purpose. The block that does it lives at
   line 1625, above a later pass that re-states the rail's width as a plain
   class rule - and a plain rule further down the file beats an identical one
   inside a media query. So below 900px the rail stayed 236px wide but turned
   on its side, and a brand, a search box and thirteen tabs were squeezed into
   it: the nav collapsed to sixteen pixels and everything past Refunds was
   unreachable. Restating it after the last rule that touches .sidebar is what
   makes it hold. */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex: 0 0 auto; flex-basis: auto; height: auto; max-height: none;
    position: static; flex-direction: row; align-items: center; gap: 10px;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line-soft);
  }
  .nav { flex: 1 1 auto; min-width: 0; width: auto; }

  /* An icon rather than a box: the palette it opens is the same either way,
     and a text field this wide leaves the tabs no room. */
  .rail-search { flex: 0 0 32px; margin: 0; }
  .rail-search input { width: 32px; padding: 0; color: transparent; }
  .rail-search-icon { left: 50%; transform: translate(-50%, -50%); }

  .sidebar-foot { margin: 0 0 0 auto; flex: 0 0 auto; border: 0; padding: 0; }
  .me-signout { width: auto; }
}

/* Below the width of a phone the account block's words go too, leaving the
   avatar and the sign-out arrow. */
@media (max-width: 560px) {
  .brand-name { display: none; }
  .who-text { display: none; }
  .me-signout span { display: none; }
  .sidebar { gap: 6px; padding: 8px; }
}

/* The rail's box is an icon here, so the word inside it should not show
   through the transparent text. */
@media (max-width: 900px) {
  .rail-search input::placeholder { color: transparent; }
}

/* Seven day cards across a phone are 88px wide and "Zelle $250.00" is not: the
   figure ran out over the card beside it. The label and the amount stack
   instead, and the card grows to hold two lines a method - the week still
   reads Monday to Sunday in one row, which is the point of it. */
@media (max-width: 900px) {
  .mo-cardface { height: 168px; }
  .mo-line { flex-wrap: wrap; row-gap: 0; }
  .mo-line strong { margin-left: 11px; }
}

/* A table that is allowed to spill so a popover inside it can escape its box.
   On a phone that spill is the whole page sliding sideways, and a menu that
   overlaps the row below is the smaller problem. */
@media (max-width: 900px) {
  .table-wrap-open { overflow-x: auto; }
}

/* ── The crypto checker: when it happened ─────────────────────────────────
   The date is the loudest thing in the block. Every other signal on the page
   can be green for a payment that was sent last week, and only this one says
   it was not for the order in front of you. */
.cc-when { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-when-time { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.cc-when-ago { font-size: 12px; }
.cc-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* A callout in the colour of what it is saying. The plain one is information;
   these two are not.

   Only the lead line takes the colour and the line of its own. A <strong> in
   the middle of a sentence - the date, the number of days - is emphasis inside
   the prose and has to stay inside it; making every strong a block broke the
   warning into three stacked fragments. */
.callout-warn {
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border-color: color-mix(in srgb, var(--warn) 38%, transparent);
}
.callout-bad {
  background: color-mix(in srgb, var(--bad) 9%, transparent);
  border-color: color-mix(in srgb, var(--bad) 38%, transparent);
}
.callout-warn strong, .callout-bad strong { color: var(--text); font-weight: 600; }
.callout-warn > strong:first-child, .callout-bad > strong:first-child {
  display: block; margin-bottom: 2px;
}
.callout-warn > strong:first-child { color: var(--warn); }
.callout-bad > strong:first-child { color: var(--bad); }

/* The week of numbers: a day at a time, and how long ago each one was. */
.num-days { margin-left: auto; margin-right: 10px; flex-wrap: wrap; gap: 4px; }
.num-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.num-ago { font-size: 12px; }
@media (max-width: 900px) {
  .num-days { margin: 6px 0 0; width: 100%; }
}

/* ==========================================================================
   The order form, laid out for logging: the money and Create on the left,
   where the hand already is once the amounts are typed; statuses, links,
   proofs and the note on the right, sized to what is in them rather than to
   the window, so the whole order fits on one screen with nothing empty.
   ========================================================================== */
.log-card .log-group { flex: 0 0 auto; justify-content: flex-start; }
.log-card .log-pair-log { flex: 1 0 auto; }
.log-pair-log { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.log-title { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.log-money-group { display: flex; flex-direction: column; }
.log-money-group .calc-log { margin: 0; width: 100%; max-width: 420px; }
.log-money-group .form-actions { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.log-details { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.log-details > .log-row { flex-wrap: nowrap; }
.log-details .f-pick { flex: 1 1 160px; min-width: 0; }
.log-details .field { margin: 0; }
.log-details .note-drop { margin-top: 2px; }
.log-details .note-open { height: 30px; font-size: 12.5px; }
.log-details .note-drop textarea { min-height: 64px; }
.calc-hint { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
/* A figure worked out rather than typed keeps the box, drawn dashed. */
.calc-field.is-computed, input.is-computed { border-style: dashed; color: var(--text-soft); cursor: default; }

/* --- Service chips wear the platform's colour ------------------------------
   A dot of it on every chip, so the three platforms read apart before one is
   picked; the chosen chip takes the full tint from /tags.css. */
.chip-opt .svc-pick { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.chip-opt .svc-pick::before { content: ""; width: 7px; height: 7px; border-radius: 999px; flex: none; opacity: .9; }
.chips-rows-2 .chip-opt .svc-pick { display: flex; }

/* --- The parts of a split order -------------------------------------------- */
.splits { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface-2); }
.split-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.split-head .label { font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
.split-head .hint { font-size: 11.5px; color: var(--text-dim); flex: 1 1 200px; }
.split-count { display: inline-flex; align-items: center; gap: 2px; }
.split-count .code-value { min-width: 34px; }
.split-count .btn-icon { font-size: 15px; line-height: 1; }
.split-cols, .split-row {
  display: grid; grid-template-columns: 58px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 104px 28px;
  gap: 8px; align-items: center;
}
.split-cols { font-size: 11.5px; color: var(--text-dim); padding: 2px 0 0; }
.split-cols .num { text-align: right; }
.split-rows { display: flex; flex-direction: column; gap: 6px; }
.split-row .field { margin: 0; min-width: 0; }
.split-num { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--info); white-space: nowrap; }
.split-num b {
  width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent); border: 1px solid color-mix(in srgb, var(--info) 38%, transparent);
}
.split-row .calc-entry { justify-content: flex-end; }
.split-row .calc-field { width: 100%; }
.split-row .btn-icon:disabled, .split-count .btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.splits > .btn { align-self: flex-start; }
@media (max-width: 1400px) {
  .split-cols, .split-row { grid-template-columns: 52px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 96px 28px; gap: 6px; }
}
@media (max-width: 1100px) {
  .log-pair-log { grid-template-columns: minmax(0, 1fr); }
  .split-cols { display: none; }
  .split-row { grid-template-columns: 52px minmax(0, 1fr) 96px 28px; }
  .split-row .field:nth-child(3), .split-row .field:nth-child(4) { grid-column: 2 / -1; }
}

/* Nothing in the details column stretches to fill it: the rows sit at the
   top, 12px apart, and the slack goes to the bottom. */
.log-details > *, .log-card .log-pair .log-details > .log-row { flex: 0 0 auto; }

/* In the logging form the details column is half the window, so a part takes
   two lines: the link and the cost, then its two proofs underneath. */
.log-details .split-cols { display: none; }
.log-details .split-rows { gap: 10px; }
.log-details .split-row {
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 96px 28px;
  grid-template-rows: auto auto; row-gap: 6px;
}
.log-details .split-row .split-num { grid-row: 1; grid-column: 1; }
.log-details .split-row .field:nth-child(2) { grid-row: 1; grid-column: 2 / 4; }
.log-details .split-row .field:nth-child(3) { grid-row: 2; grid-column: 2; }
.log-details .split-row .field:nth-child(4) { grid-row: 2; grid-column: 3; }
.log-details .split-row .calc-entry { grid-row: 1; grid-column: 4; }
.log-details .split-row .btn-icon { grid-row: 1; grid-column: 5; }
.log-details .split-row + .split-row { padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ==========================================================================
   The two dashboards, each on one screen.
   ========================================================================== */

/* --- Your day: one strip of six, the climb beside its board, three cards --- */
.wk-six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 0; }
.wk-six .stat-value { font-size: 24px; }
.wk-six .wk-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-shift-on .wk-icon { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.wk-shift-on .stat-value { color: var(--good); }
.race-compact { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: stretch; }
.race-compact .race-main { min-width: 0; }
.race-compact .race-side { border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.race-compact .race-stage-wrap { padding: 4px 10px 0; }
.race-compact .race-stage { height: 200px; }
.race-compact .race-board { margin: 0; }
.wk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.wk-grid-3 .pk-card { max-width: none; }
.wk-grid-3 .pk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wk-grid-3 .wk-chart { height: 130px; }
@media (max-width: 1280px) {
  .wk-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .race-compact { grid-template-columns: minmax(0, 1fr); }
  .race-compact .race-side { border-left: 0; border-top: 1px solid var(--line-soft); }
  .wk-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
}

/* --- Admin Dashboard: the answer first, the tables behind tabs -------------- */
.stats-answer { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
.stat-hero { background: color-mix(in srgb, var(--good) 6%, var(--surface)); border-color: color-mix(in srgb, var(--good) 25%, var(--line)); }
.stat-hero .stat-label { color: var(--good); }
.stat-hero .stat-value { font-size: 34px; }
.stat-hero.is-neg { background: color-mix(in srgb, var(--bad) 6%, var(--surface)); border-color: color-mix(in srgb, var(--bad) 25%, var(--line)); }
.stat-hero.is-neg .stat-label { color: var(--bad); }
.stat-hero .wk-sub { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ov-panels-head { padding: 8px 12px; }
.ov-panels-head .tabs { flex-wrap: wrap; }
button.tab { font: inherit; border: 0; background: none; cursor: pointer; }
.ov-panel > .table-wrap { border: 0; }
.panel-note { padding: 10px 16px 0; font-size: 12.5px; }
@media (max-width: 1280px) {
  .stats-answer { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .stat-hero { grid-column: 1 / -1; }
}
/* The collected-over-time curve, short enough that the tabs sit on the same screen. */
.wk-grid-race .race { height: 190px; }

/* A server's cut, typed on its own row. */
.prov-pct { display: inline-flex; align-items: center; gap: 4px; }
.prov-pct input { width: 62px; text-align: right; }

/* Payment chips wear their method's colour - the same one the badges in the
   tables and the dots on the Money page already use - so a payment reads the
   same way while it is being typed in as it does once it is filed.

   Every selector here is qualified with the element as well as the class:
   ".chip-opt span" sets the chip's colour and outranks a bare ".pay-zelle" on
   specificity, so the first attempt at this changed nothing at all. */
.chip-opt span.pay-pick { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.chip-opt span.pay-pick::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.chip-opt span.pay-zelle  { color: var(--purple); }
.chip-opt span.pay-venmo  { color: var(--accent); }
.chip-opt span.pay-paypal { color: var(--info); }
.chip-opt span.pay-crypto { color: var(--text); }
.chip-opt span.pay-pick:hover { border-color: currentColor; }

/* Chosen: the same outlined pill every other chip wears, in the method's own
   colour rather than the desk's generic accent - so which one is picked and
   which method it is are the same piece of information. The percentages are
   the generic rule's, so a payment chip and a service chip sit at the same
   weight beside each other. */
.chip-opt input:checked + span.pay-zelle {
  background: color-mix(in srgb, var(--purple) 10%, transparent);
  border-color: color-mix(in srgb, var(--purple) 28%, transparent);
  color: var(--purple);
}
.chip-opt input:checked + span.pay-venmo {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}
.chip-opt input:checked + span.pay-paypal {
  background: color-mix(in srgb, var(--info) 10%, transparent);
  border-color: color-mix(in srgb, var(--info) 28%, transparent);
  color: var(--info);
}
.chip-opt input:checked + span.pay-crypto {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-color: color-mix(in srgb, var(--text) 28%, transparent);
  color: var(--text);
}
.chip-opt input:checked + span.pay-pick:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 36%, transparent);
}

/* The single-order fields wear the same panel the split parts do, so changing
   the order status swaps what is in the box rather than whether there is one.
   Same border, same fill, same corners as .splits above. */
.single-fields {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--surface-2);
}
.single-fields > .gift-slot, .single-fields > .log-row { margin: 0; }

/* Chips on a small screen.
   The 900px rule already lets the columns shrink, but a column can only shrink
   so far before 'DD Delivery' stops fitting in it - so below a phone's width
   the grids stop trying to hold their shape and wrap instead: three across
   becomes two, and two becomes one. The order the chips read in is preserved
   either way. */
@media (max-width: 640px) {
  .chips-rows-2 {
    grid-template-rows: none; grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chips-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-opt span { padding: 8px 5px; font-size: 12px; }
  /* The money panel's figures stop pushing the panel wider than the screen. */
  .calc-box, .calc-owed, .log-group, .log-row { min-width: 0; }
  .calc-owed { flex-wrap: wrap; gap: 2px 8px; }
}
@media (max-width: 430px) {
  .chips-rows-2, .chips-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .note-drop > summary, .single-fields, .splits { min-width: 0; }
}

/* A worker's pay for the week, at the top of its card and large.
   It was the bottom line of a table, which is where a figure goes when
   somebody is checking it. This is a figure meant to be felt. */
.wk-earned { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.wk-earned-label { font-size: 12px; }
.wk-earned-big { font-size: 30px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wk-earned-note { font-size: 11.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) { .wk-earned-big { font-size: 26px; } }

/* Marking a server's commission paid: the amount is a box, not a fixed
   figure, because what actually gets handed over is not always what the
   card worked out. */
.comm-pay { display: inline-flex; align-items: center; gap: 6px; }
.comm-amount { width: 84px; text-align: right; height: 28px; padding: 0 8px; font-size: 12.5px; }