/* rmedia-barber — barber app chrome. Dark shell, gradient header, floating pill nav.
   Overrides the paper tokens for this page only; /book, /m and /me stay on paper. */

body.app {
  --paper-0:   #2a2b2f;      /* panels + rows */
  --paper-50:  #1c1d21;      /* app ground */
  --paper-100: #34353a;      /* hover */
  --paper-200: #3d3e44;
  --line:      #3a3b40;
  --line-soft: #303136;
  --ink-900:   #ececed;
  --ink-800:   #dcdcde;
  --ink-700:   #c6c6ca;
  --ink-600:   #aeaeb4;
  --ink-500:   #96969c;
  --ink-400:   #7c7c83;
  --accent:      #2a68a8;    /* action blue — 5.8:1 with white (QA-W5) */
  --accent-ink:  #7ab5ea;
  --accent-weak: #23364a;
  --money:     #2f7a45;      /* 5.3:1 with white (QA-W5) */
  --money-dim: #1f3326;
  /* Reisinger Media royal blue on a very dark navy, so the white-to-blue RM mark pops.
     A mid-blue bar kills the logo — hence the deep end sits under it. */
  --grad-a:    #032084;      /* header + pill: deep royal → bright royal */
  --grad-b:    #3b61ff;
  --snpz-yellow: #ffc629;   /* the marketing site's tile yellow */
  /* calendar surfaces, swapped wholesale by the theme */
  --cal-work:   #26272c;
  --cal-off:    #1c1d21;
  --cal-none:   #3a2f24;
  --cal-line:   #34363c;
  --cal-hour:   #4a4d55;
  --cal-chrome: #202126;
  --cal-ink:    #ececed;
  /* SERVICE CATEGORY FILLS — the only definition of these colours anywhere. The calendar
     block, the checkout menu tile and the sign-in grid all resolve to this line, so there
     is no surface that can be left behind when one of them changes. White block text has
     to clear 4.5:1 on each (Vagaro's own blue is 3.48 and their green 2.07); the gold
     carries dark ink instead, which is why it gets to be a real gold. */
  /* PENTAD (Grady 9/4, docs/POLISH.md s11): five hues 72 deg apart in CIE LCh around our
     blue; dE 20 under deuteranopia. mens/combo/personal carry white; kids/womens/other ink. */
  --cat-mens:   #3053b2;     /* white */
  --cat-kids:   #e0a03a;     /* dark ink */
  --cat-combo:  #0a6f36;     /* white */
  --cat-womens: #d9557f;     /* dark ink */
  --cat-other:  #3fb4cc;     /* add-ons, dark ink */
  --cat-personal: #8a6a56;   /* white */
  /* A dark fill that white text can sit on. --ink-800 is a TEXT colour in this app, and
     using it as a background is what made the Today buttons invisible (QA-W2). */
  --fill-dark:  #3a3f47;
  --tbh:       52px;         /* header height */
  /* CALENDAR GEOMETRY — one source of truth. week.css draws the grid from these and
     gate.js reads the same three back off getComputedStyle, so the grid you drift over on
     the sign-in page and the grid you land on are literally the same grid.
     Measured off refs a14/a16. Those are 2000px-wide captures of a 2560 CSS px window, so
     every number read off them is multiplied by 1.28 to get real pixels; two independently
     documented computed styles (52px top bar, 120px/hour) land exactly on that factor. */
  --cal-sidebar: 0px;        /* desktop left rail — none below 1024 */
  --cal-rail:   56px;        /* hour rail down the left of the grid */
  --cal-whorow: 40px;        /* barber-name row above the columns */
  --cal-topnav: 52px;
  --cal-toolbar: 56px;
  --cal-bar:    15px;        /* the scrollbar the grid reserves (scrollbar-gutter) */
  color-scheme: dark;
  background: var(--paper-50);
  color: var(--ink-900);
  overscroll-behavior-y: none;
}

@media (min-width: 1024px) {
  body.app { --cal-sidebar: 222px; --cal-whorow: 58px; --cal-toolbar: 64px; --cal-bar: 8px; }
}

/* the shared components inherit the dark tokens; these few need a nudge */
body.app .btn { background: var(--accent); color: #fff; min-height: 52px; font-size: 16px;
  padding: 0 24px; border-radius: 10px; }
body.app .btn-sm { min-height: 40px; font-size: 14px; padding: 0 16px; }
body.app .miniadd { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
body.app .btn-ghost { background: transparent; color: var(--ink-900); border-color: var(--line); }
body.app .btn-quiet { background: transparent; color: var(--ink-600); }
body.app .btn-danger { background: transparent; color: #e2705f; border-color: #4a2a25; }
body.app .btn-money { background: var(--money); color: #fff; }
body.app .input { background: #232428; border-color: #43444a; color: var(--ink-900); }
body.app .input::placeholder { color: var(--ink-400); }
body.app .card { background: var(--paper-0); border-color: var(--line); }
body.app .chip { background: #3a3b40; color: var(--ink-700); }
/* Literal ink on a literal fill. --ink-800 flips to near-black under theme-light, which
   painted every avatar dark-grey-on-dark-grey at 1440 (QA-W9). */
body.app .ava { background: #43444a; color: #dcdcde; border-color: #4d4e55; }
body.app .sheet { background: var(--paper-50); }
body.app .sheet-back { background: rgba(0, 0, 0, .6); }
body.app h1, body.app h2, body.app h3 { font-family: var(--font-body); letter-spacing: -0.01em; }

/* ---------- gradient header ---------- */
.tb {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--tbh);
  padding: 0 10px; padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 8px;
  background: var(--snpz-yellow); color: #111;      /* the site's yellow, black ink (was the royal gradient) */
}
.tb .t-title { font-size: 17px; font-weight: 600; }
.tb .t-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tb .t-center { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
.tb button, .tb a {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; height: 44px; padding: 0 4px;
  background: none; border: 0; color: #111; font: inherit; font-size: 15px; cursor: pointer;
  text-decoration: none; border-radius: 8px;
}
.tb button:active { background: rgba(0,0,0,.1); }
.tb .icon { width: 22px; height: 22px; stroke-width: 1.8; }
.tb .t-date { font-size: 17px; font-weight: 500; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* At 375 the six controls fill the row exactly, so the date had ~90px and ellipsised
   whatever we shortened it to (QA-W8). The row is controls; the date is information —
   give it its own line rather than abbreviating a week into one date. */
@media (max-width: 429px) {
  .tb:has(.t-date) { flex-wrap: wrap; padding-bottom: 6px; }
  .tb .t-date { order: 9; flex: 1 0 100%; font-size: 15px; padding-left: 2px;
    margin-top: -4px; opacity: .92; }
}
/* Today and Add are desktop toolbar buttons in the references, not phone header items */
.tb .t-today, .tb .t-add { display: none; }
.tb .t-mode { font-size: 16px; font-weight: 600; }
/* the little date glyph on the left of the week header */
.tb .datechip {
  width: 30px; height: 30px; flex: 0 0 auto; border: 2px solid #111; border-radius: 6px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
  padding-top: 4px; position: relative; font-variant-numeric: tabular-nums;
}
.tb .datechip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #111;
}

/* ---------- page ---------- */
.page {
  min-height: calc(100dvh - var(--tbh));
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.page:focus { outline: none; }
.page.flush { padding-bottom: 0; }
.pagewrap { padding: 12px; }

/* rows — the list shape every Vagaro-ish page uses */
.rows { background: var(--paper-0); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.row2 {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 10px 14px; background: none; border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-900); font: inherit; font-size: 15px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.rows .row2:last-child { border-bottom: 0; }
.row2:active { background: var(--paper-100); }
.row2 .grow { flex: 1; min-width: 0; }
.row2 .amt { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.row2 .chev { color: var(--ink-400); }
.row2 .icon { color: var(--ink-700); }
.row2 .sub { display: block; font-size: 12.5px; color: var(--ink-500); }
.row2[disabled] { opacity: .55; cursor: default; }
.secthead {
  padding: 6px 14px; background: #232428; color: var(--ink-500);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  position: sticky; top: var(--tbh); z-index: 5;
}
.stub { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #e0b558; background: #37301f; border-radius: 4px; padding: 2px 6px; }

/* ---------- floating pill nav ---------- */
.pill {
  position: fixed; z-index: 40;
  left: 10px; right: 84px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  height: 62px; border-radius: 999px;
  background: linear-gradient(100deg, var(--grad-a) 0%, var(--grad-b) 100%);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.pill a {
  position: relative; display: grid; place-items: center; height: 48px; margin: 0 3px;
  border-radius: 999px; color: #fff; text-decoration: none;
}
.pill a[aria-current="page"] { background: rgba(255,255,255,.22); }
.pill .icon { width: 25px; height: 25px; stroke-width: 1.7; }
.pill .badge {
  position: absolute; top: -2px; right: 2px; min-width: 20px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #1c1d21; color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.fab {
  position: fixed; z-index: 40; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(140deg, #5b64b5, #6a6fc0); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
}
.fab .icon { width: 26px; height: 26px; stroke-width: 1.8; }

/* ---------- sign-in ----------
   The background is not "like" the week grid, it IS the week grid: the same cell, the same
   three line weights, the same colours, all read back off the calendar's own custom
   properties by gate.js. The camera drifts down and to the right across it; on sign-in it
   carries on in that direction until the real week view — which is sitting on the same
   surface, up and to the left of the card — fills the viewport. Nothing fades and nothing
   moves on its own clock: one offset per frame drives the grid, the ghosts, the card and
   the real page together. */
.gate {
  --cell-w: 165px; --cell-h: 30px;      /* gate.js overwrites both from the calendar */
  position: relative; overflow: hidden;
  min-height: 100dvh;
  /* #surface and #ghosts are absolutely positioned, so only the card is centred by this. */
  display: grid; place-items: center; justify-content: center; padding: 24px 16px;
  background-color: var(--cal-work);
}
/* THE GRID HAS NO EDGE. It is a repeating paint on a box one viewport plus a few cells
   across, and gate.js only ever translates it within a single cell (the offset is taken
   modulo the cell, and the vertical period is four rows because the hour rule is heavier).
   No amount of drifting can reach the end of it, in either axis. */
#surface {
  position: absolute; z-index: 0; will-change: transform;
  left: calc(var(--cell-w) * -2); top: calc(var(--cell-h) * -8);
  width: calc(100vw + var(--cell-w) * 4); height: calc(100dvh + var(--cell-h) * 16);
  background-color: var(--cal-work);
  /* The rules themselves are painted by the shared selector in week.css. All this does is
     say how big a cell is; there is no second copy of the grid to fall out of step. */
  --grid-h: var(--cell-h);
  --grid-w: var(--cell-w);
}

.gate-card { position: relative; z-index: 2;
  width: 100%; max-width: min(420px, calc(100vw - 32px)); background: var(--paper-0);
  border-radius: 16px; padding: 28px 22px 22px; box-shadow: 0 20px 50px -20px #000; }

/* No serif anywhere on this page — the mark, the name and the line under it. */
.gate-brand { text-align: center; margin-bottom: 4px; }
/* The snpz tile: yellow rounded square, black outline, hard shadow — reads the same in both themes. */
.gate-logo { display: block; width: 36%; max-width: 132px; height: auto; margin: 2px auto 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.app .gate-title {
  font-family: "Space Grotesk", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 30px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0;
}
.gate-slogan { margin: 6px 0 0; color: var(--ink-500); font-size: 15px; }
.hint.ok { color: #6fc98a; }

/* ---------- the fake week drifting behind the card ----------
   These are not lookalikes. gate.js builds them with blockEl(), the calendar's own block
   builder, so they are .apt elements carrying the same data-cat and data-s and picking up
   every colour, size and rule from week.css. Nothing about a block is defined twice — this
   file only says where each one sits. */
#ghosts { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.ghostcell { position: absolute; left: 0; top: 0; will-change: transform; }
.ghostcell .apt { top: 0; height: 100%; }


/* ---------- notifications ---------- */
.payout { margin: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.payout .who { font-size: 15px; color: var(--ink-800); }
.payout .big { font-size: 42px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.payout .big small { font-size: 22px; vertical-align: 14px; }
.payout .sched { color: var(--ink-500); font-size: 14px; margin-bottom: 14px; }
.payout .btn { width: 100%; }
.notirow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ---------- customers ---------- */
.searchbar { padding: 10px 12px; background: var(--paper-50); }
.searchbar .wrapin { position: relative; }
.searchbar .icon { position: absolute; left: 12px; top: 13px; color: var(--ink-400); }
.searchbar input { padding-left: 40px; border-radius: 10px; background: #35363b; border-color: #35363b; }
.azrail {
  position: fixed; right: 2px; top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center;
  font-size: 10.5px; font-weight: 600; color: var(--accent-ink); line-height: 1.35;
}
.azrail button { background: none; border: 0; color: inherit; font: inherit; padding: 0 5px; cursor: pointer; }

/* ---------- checkout ---------- */
.co-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; background: var(--money-dim); color: #6fc98a;
  border-top: 1px solid #3f6a4a; border-bottom: 1px solid #3f6a4a;
  font-size: 16px; font-variant-numeric: tabular-nums;
}
.co-bar {
  position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 35; display: flex; gap: 10px; padding: 10px 12px;
  background: #141518; border-top: 1px solid var(--line);
}
.co-bar .btn { flex: 1; border-radius: 6px; min-height: 46px; font-size: 15px; padding: 0 10px; white-space: nowrap; }
.miniadd {
  border: 1px solid var(--line); background: transparent; color: var(--ink-800);
  border-radius: 4px; font: inherit; font-size: 13px; padding: 3px 9px; cursor: pointer;
}

@media (min-width: 720px) {
  .page, .tb { max-width: 560px; margin-left: auto; margin-right: auto; }
  .pill { left: 50%; transform: translateX(-50%); width: 380px; right: auto; }
  .fab { right: calc(50% - 258px); }
}
/* The calendar is not a phone screen stretched — on a computer it takes the whole width
   and the rows breathe (Vagaro's Expanded density). */
@media (min-width: 900px) {
  body.app:has(.cal) .page, body.app:has(.cal) .tb { max-width: none; }
  .page:has(.cal) { padding-bottom: 0; }
  .tb { min-height: 58px; }
  .tb .t-date { font-size: 19px; }
  .pill { width: 420px; }
  .fab { right: calc(50% - 280px); }
}

/* money card internals */
.payout .split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.payout .split > div { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.payout .split .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.payout .split .k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.payout .drawer { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* update-ready toast carries its own action */
.toast-do {
  margin-left: 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700;
  padding: 4px 12px;
}

/* what a client already owes, at the top of their checkout */
.owed {
  margin: 0; padding: 10px 14px; background: #37301f; color: #e0b558;
  font-size: 14px; font-weight: 600; border-top: 1px solid #4a4029; border-bottom: 1px solid #4a4029;
}
.popupnote { border-color: #6b5a33; background: #2b2617; }

/* the shop's wifi is down and we are showing the last day we saved */
.stalebar {
  padding: 8px 14px; background: #3a2f1a; color: #e8c98a; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid #55452a;
}

/* client-card stat row — four across even on a 375px phone */
.stat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat > div { min-width: 0; }
.stat .v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400);
  margin-top: 2px; }


/* ---------- Appearance: Light / Dark / System (More -> Appearance) ----------
   The desktop references are light, the phone references are dark, and Vagaro ships the
   same three-way switch. Block text stays white in both themes. */
body.app.theme-light {
  --paper-0: #ffffff; --paper-50: #f4f5f7; --paper-100: #ebedf0; --paper-200: #e2e5e9;
  --line: #e0e2e6; --line-soft: #eceef1;
  --ink-900: #23262b; --ink-800: #333840; --ink-700: #474d57; --ink-600: #5c636e;
  /* The light palette's two greys were tuned by eye and both failed AA on the things a
     barber reads most: the hour rail, the day-header numbers, the mini-month weekday
     letters and the inactive rail tabs (2.83-4.15:1). Measured now: 6.1:1 on white,
     5.5:1 on --paper-50, 4.6:1 for the lighter one. */
  --ink-500: #5c636e; --ink-400: #6f7681;
  --cal-work: #ffffff; --cal-off: #dee2e8; --cal-none: #dbbd99;
  --cal-line: #e7e7e7; --cal-hour: #cfd2d6; --cal-chrome: #f8f8f8; --cal-ink: #333333;
  --fill-dark: #2b3038;
  color-scheme: light;
  background: var(--paper-50); color: var(--ink-900);
}
body.app.theme-light .input { background: #fff; border-color: #d6d9de; color: var(--ink-900); }
body.app.theme-light .rows, body.app.theme-light .card { background: #fff; }
body.app.theme-light .secthead { background: #eef0f3; color: var(--ink-600); }
body.app.theme-light .co-total { background: #e8f5ec; color: #1d6b3e; border-color: #bfe0cb; }
body.app.theme-light .co-bar { background: #fff; }
body.app.theme-light .stub { background: #fdf3dd; color: #8a6516; }
body.app.theme-light .dtable th { background: #f2f3f5; color: var(--ink-600); }
body.app.theme-light .dtable tr.total td { background: #f2f3f5; }
body.app.theme-light .gate-card { background: #fff; }

/* The checkout's fixed pay bar and the pill nav both float over the page; without this the
   last lines of the honesty note sit under them with nothing to scroll (QA-W4). */
.co-page { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* ---------- signing in ----------
   No animation lives here any more. gate.js runs one requestAnimationFrame loop and writes
   one offset per frame onto the grid, the ghosts, the card and the real page, so there is
   nothing that can drift out of step with anything else. All this contributes is where the
   real page sits while it is being flown in. */
#gate > #shell {
  position: absolute; left: 0; top: 0; z-index: 3; will-change: transform;
  width: 100vw; height: 100dvh; overflow: hidden; background: var(--paper-50);
}
#gate .gate-card { will-change: transform; }
#gate .gate-card.leaving { pointer-events: none; }

.shell-enter { animation: shellup 380ms cubic-bezier(.16, .84, .32, 1); }
@keyframes shellup {
  from { transform: translate(7vw, 9vh) scale(.97); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-enter { animation: none; }
}

/* ---------------------------------------------------------------- pickers
   A panel never dims the calendar. The thing you clicked lifts out of the
   grid and the panel opens beside it, so you keep your place in the day. */
.popped {
  z-index: 30; box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
  transform: scale(1.06); transform-origin: left center;
  transition: transform 140ms cubic-bezier(.16,.84,.32,1), box-shadow 140ms ease;
}
.slotpop { background: var(--fill-dark, #3a3f47); opacity: .92; }
@media (prefers-reduced-motion: reduce) { .popped { transform: none; transition: none; } }

.panel {
  position: fixed; z-index: 120; width: min(340px, calc(100vw - 24px));
  max-height: min(560px, calc(100dvh - 24px)); display: flex; flex-direction: column;
  background: var(--paper-0); color: var(--ink-900);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.42);
  animation: panelin 150ms cubic-bezier(.16,.84,.32,1);
}
@keyframes panelin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }

.panel-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 12px var(--s-3) 12px var(--s-4); border-bottom: 1px solid var(--line-soft);
}
.panel-head b { flex: 1 1 auto; font-size: var(--t-15); font-weight: 600; }
.panel-x {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  background: none; border: 0; border-radius: 8px; color: var(--ink-500); cursor: pointer;
}
.panel-x:hover { background: var(--paper-100); color: var(--ink-900); }
.panel-body { padding: var(--s-3) var(--s-4) var(--s-4); overflow-y: auto; }
.panel-when {
  margin: 0 0 var(--s-3); font-size: var(--t-13); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-500);
}

/* a row that reads like a filled field and opens the next picker */
.pickrow {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: 52px; padding: 0 var(--s-3); text-align: left; cursor: pointer;
  background: var(--paper-50); border: 1px solid var(--line); border-radius: 10px;
  font: inherit; color: var(--ink-900);
}
.pickrow:hover { border-color: var(--ink-400); background: var(--paper-100); }
.pr-label { flex: none; width: 74px; font-size: var(--t-13); color: var(--ink-500); }
.pr-val { flex: 1 1 auto; min-width: 0; font-size: var(--t-15); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-empty { font-weight: 400; color: var(--ink-400); }
.pr-chev { flex: none; display: grid; color: var(--ink-400); }
.pr-chev .icon { width: 16px; height: 16px; }

/* The reports filter, on a phone. The desktop copy lives in desktop.css. */
.rp-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rp-range { font-size: 13px; color: var(--ink-600); }
.rp-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-0);
  color: var(--ink-900); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.rp-filter .icon { width: 17px; height: 17px; }
.rp-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

.pick-search { display: flex; gap: 8px; align-items: center; }
.pick-search .input { flex: 1; min-width: 0; }
.pick-add { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-100);
  color: var(--ink-900); cursor: pointer; }
.pick-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pick-add .icon { width: 20px; height: 20px; }
.picklist { margin-top: var(--s-2); max-height: 340px; overflow-y: auto; }
.pick {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  min-height: 52px; padding: var(--s-2) var(--s-2); text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px; font: inherit; color: var(--ink-900);
}
.pick:hover { background: var(--paper-100); }
.pick .grow { display: flex; flex-direction: column; gap: 1px; }
.pick-nm { font-size: var(--t-15); font-weight: 600; }
.pick-sub { font-size: var(--t-13); color: var(--ink-500); }
.pick-price { flex: none; font-size: var(--t-15); font-weight: 600; color: var(--money, #2f7a45); }
.pick-sect {
  position: sticky; top: 0; z-index: 1; background: var(--paper-0);
  padding: var(--s-3) var(--s-2) var(--s-1); font-size: var(--t-13); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500);
}
.pick-sect:first-child { padding-top: var(--s-1); }
.pick-empty { padding: var(--s-4) var(--s-2); font-size: var(--t-14); color: var(--ink-500); }