/* ═══════════════════════════════════════════════════════════════════════════
   AGENT DASH — the clean rebuild (C2C 233 §C + §D, Dom 2026-08-22)
   Route: /dashboard        View: /assets/js/views/agent-dash.js

   MOBILE-FIRST. §D: "AGENT DASH = mobile-first (375 designed first, desktop is
   the wide version; expand-push grid collapses to a single column; every door
   thumb-reachable)". Everything below the first line is the 375 design; the
   only breakpoints WIDEN it.

   A7 — one visual language with the cockpit: Onest, the shared token ladder
   (--sp-*, --r-*, --line, --ink-*), the 16 category chips (--cat-*) for status
   coding, and the same rail/topbar chrome mountAppNav() already paints. No new
   colours, no new radii, no new spacing system is invented here.

   Scoped under `.ad` so nothing here can leak into another view.
   ═══════════════════════════════════════════════════════════════════════════ */

.ad {
  --ad-gut: var(--sp-4);            /* page gutter — A10: tight, on the ladder */
  --ad-card-w: 258px;               /* property card width at 375 */
  --ad-card-h: 376px;               /* photo card + the 44px wallet peek */
  font-family: var(--font-sans);
  color: var(--ink);
}
@media (min-width: 900px) { .ad { --ad-gut: var(--sp-5); --ad-card-w: 300px; --ad-card-h: 392px; } }

.ad-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sp-4) var(--ad-gut) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);                  /* A8: compact, not crowded — air between groups */
}
/* ── Section shell ──────────────────────────────────────────────────────────
   Dom's phone mock: stacked cards with air between them, fewer borders, no
   boxes inside boxes.
   A14 — NO OLIVE TINTS. The section wash is gone; a card is a card, and the
   category colour lives in the dot, the pill and the chip only. */
.ad-sec {
  scroll-margin-top: 66px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  overflow: hidden;
}
.ad-sec-h {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  min-height: 40px;
}
.ad-sec-h h2 {
  margin: 0; display: flex; align-items: center; gap: var(--sp-2);
  font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-2);
}
.ad-sec-h .ad-sub { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); letter-spacing: .04em; }
.ad-sec-h .ad-spacer { margin-left: auto; }
.ad-sec-b { padding: 0 var(--sp-4) var(--sp-4); }
.ad-sec-b.is-flush { padding: 0; }

/* Category dot — the A1 chip colour as a landmark, never a fill. */
.ad-dot { width: 8px; height: 8px; border-radius: var(--r-round); flex: none; background: var(--cat-grey); }

/* ── Pills / chips (A12: headline only, detail on hover) ────────────────── */
.ad-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-btn);
  border: 1px solid color-mix(in srgb, var(--pc, var(--cat-grey)) 34%, transparent);
  background: var(--pcs, var(--cat-grey-soft));
  color: var(--pc, var(--cat-grey));
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; line-height: 1.35;
  white-space: nowrap;
  cursor: default;
}
.ad-pill .d { width: 6px; height: 6px; border-radius: var(--r-round); background: currentColor; flex: none; }
.ad-pill[data-tip] { cursor: help; }

.ad-newtag {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--r-btn);
  background: var(--cat-new); color: var(--cat-ink);
  font-size: calc(10.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ── Buttons — the portal's own .btn ladder, restated at Dash density ───── */
.ad-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px;                       /* thumb-reachable at 375 */
  padding: 0 var(--sp-4);
  border-radius: var(--r-btn);            /* A2: never a bean */
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: 600 calc(13px * var(--text-scale, 1))/1 var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  /* SITE STYLE RULING 20b (Dom 2026-08-29) — a Dash button label is ONE line.
   * Shorten the label, widen the control, or use an icon. See STYLEBOARD.md. */
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ad-btn:hover { background: var(--bg-hover); }
.ad-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ad-btn[disabled], .ad-btn.is-off { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ad-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }   /* ink from the token: near-black on emerald, white on GV grape */
.ad-btn-primary svg { color: var(--brand-ink); }
/* Primary = whatever --brand resolves to (the merge-A lane is moving it to
   #FF0016 with near-black ink). Never a literal here. */
.ad-btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--brand-ink); }
.ad-btn-sm { min-height: 34px; padding: 0 var(--sp-3); font-size: calc(12.5px * var(--text-scale, 1)); }

.ad-sel {
  min-height: 40px; padding: 0 var(--sp-3);
  border-radius: var(--r-btn); border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink);
  font: 500 calc(13px * var(--text-scale, 1))/1 var(--font-sans);
  max-width: 100%;
}
.ad-note { font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3); line-height: var(--leading-body); }
.ad-note a, .ad-link { color: var(--brand); }

/* ── C7 · Referral banner (top of the Dash) ─────────────────────────────────
   Dom 2026-08-22, FINAL: "one line only, no card, no paragraph". Single row,
   <= 48px on desktop, wrapping to two rows at mobile widths. The four rules
   live behind "How it works" and PUSH the page down when opened (A11) — they
   are never an overlay. */
.ad-ref {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);   /* the primary token, never a literal */
  background: var(--bg-elevated);
  border-radius: var(--r-3);
  overflow: hidden;
}
.ad-ref-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
}
@media (min-width: 900px) { .ad-ref-row { flex-wrap: nowrap; height: 48px; padding: 0 var(--sp-3); } }
/* 375: TWO control rows — headline (+ the temporary status pill) on the first,
   link + Copy + the expander on the second. Below 560px the expander keeps its
   chevron and hands its label to aria-label, which is the only way link, Copy
   and expander fit one row inside the ~285px a phone actually leaves. */
@media (min-width: 900px) { .ad-ref-h { flex: 0 1 auto; } }
@media (max-width: 559px) {
  .ad-ref-more .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ad-ref-more { padding: 4px 6px; }
  .ad-ref-ctl { gap: 6px; }
}
.ad-ref-row > svg { flex: none; width: 17px; height: 17px; color: var(--brand); }
.ad-ref-h {
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.01em; line-height: 1.35; color: var(--ink);
  flex: 1 1 calc(100% - 25px); min-width: 0;   /* shares row 1 with the icon */
}
/* The temporary "not live yet" marker rides INSIDE the headline so it can never
   become a third row on a phone. It disappears with the /r/ route. */
.ad-ref-h .ad-pill { margin-left: 6px; vertical-align: 1px; }
/* url + Copy + expander travel together: ONE row of controls that can never
   split three ways on a phone. */
.ad-ref-ctl { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
@media (min-width: 900px) { .ad-ref-ctl { flex: 1 1 auto; } }
.ad-ref-url {
  flex: 1 1 60px; min-width: 0;
  font: 500 calc(12.5px * var(--text-scale, 1))/calc(30px * var(--text-scale, 1)) var(--font-sans);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--bg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-ref .ad-btn-sm { min-height: 30px; }
.ad-ref-more {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 4px 2px;
  color: var(--ink-2); font: 600 calc(12.5px * var(--text-scale, 1)) var(--font-sans);
  cursor: pointer; white-space: nowrap;
}
.ad-ref-more:hover { color: var(--ink); }
.ad-ref-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-1); }
.ad-ref-more svg { transition: transform var(--t-fast) var(--ease); }
.ad-ref-more.is-open svg { transform: rotate(180deg); }

.ad-ref-drop {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 200ms var(--ease);
}
.ad-ref-drop.is-open { grid-template-rows: 1fr; }
.ad-ref-drop > .in { overflow: hidden; min-height: 0; }
.ad-ref-rules {
  margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 14px);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  display: flex; flex-direction: column; gap: 6px;
  list-style: decimal;
}
.ad-ref-rules li {
  font-size: calc(13px * var(--text-scale, 1)); line-height: var(--leading-body); color: var(--ink-2);
  padding-left: 2px;
}
@media (prefers-reduced-motion: reduce) { .ad-ref-drop { transition: none; } }
/* ── Identity block — Dom's phone mock: big, top-left, date under the name ─ */
.ad-hey { padding: var(--sp-3) 2px var(--sp-1); }
.ad-hey h1 { margin: 0; font-size: calc(26px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.03em; line-height: 1.12; }
.ad-hey .ad-date { display: block; margin-top: 4px; font-size: calc(15px * var(--text-scale, 1)); font-weight: 550; color: var(--ink-2); letter-spacing: -.01em; }
.ad-hey p { margin: 7px 0 0; font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3); }
@media (min-width: 900px) { .ad-hey h1 { font-size: calc(32px * var(--text-scale, 1)); } .ad-hey .ad-date { font-size: calc(16px * var(--text-scale, 1)); } }

/* ── C1 · Property row — WALLET CARDS (Dom 2026-08-22, 4th pass) ────────────
   Photo card with a settings card stacked behind it, sticking out 44px with a
   centred "See details" label and a grabber — the phone-mock stack: rounded
   top, slight shadow, one hop up and it stays.
   The back is ONE DROPDOWN LIST: the row IS the control, chevron at the right,
   no per-row button chrome, no coloured bars (A14). */
.ad-prow {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-4) var(--sp-3);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ad-pcard {
  scroll-snap-align: start;
  position: relative;
  flex: 0 0 var(--ad-card-w);
  width: var(--ad-card-w);
  height: var(--ad-card-h);
  overflow: hidden;
  border-radius: var(--r-2);
}
.ad-pmain {
  position: absolute; inset: 0 0 44px 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.ad-pshot {
  flex: 1 1 auto; min-height: 0; width: 100%;
  background: var(--bg-sunken) center/cover no-repeat;
  position: relative; display: grid; place-items: center;
}
.ad-pshot .ph { font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-4); letter-spacing: .04em; text-transform: uppercase; }
.ad-pshot .ad-newtag { position: absolute; top: 8px; left: 8px; }

/* A15 typography — label 15/600, meta 13 eyebrow. */
.ad-pbody { flex: none; padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ad-pbody b {
  font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-pbody .m {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase;
}

/* The card behind. Closed it is bottom-aligned and pushed down by its own
   height less the 44px that must stay visible; open it hops to 6% of the card
   and STAYS until the label is tapped again. */
.ad-pwallet {
  position: absolute; left: 5px; right: 5px; bottom: 0;
  height: calc(100% - 6px);
  display: flex; flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--r-3) var(--r-3) 0 0;
  box-shadow: 0 -8px 22px rgba(0,0,0,.30);
  transform: translateY(calc(100% - 44px));
  transition: transform 350ms var(--ease-out);
  will-change: transform;
}
.ad-pcard.is-open .ad-pwallet { transform: translateY(6%); }
@media (prefers-reduced-motion: reduce) { .ad-pwallet { transition: none; } }

.ad-pwallet-h {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2); font: 600 calc(13px * var(--text-scale, 1))/1 var(--font-sans);
  letter-spacing: .04em;
}
.ad-pwallet-h .grip { width: 30px; height: 3px; border-radius: var(--r-round); background: var(--ink-4); }
.ad-pwallet-h:hover { color: var(--ink); }
.ad-pwallet-h:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; border-radius: var(--r-2); }

/* ── The dropdown list ──────────────────────────────────────────────────── */
.ad-doors { display: flex; flex-direction: column; padding: 0 var(--sp-3) var(--sp-2); overflow: hidden; }
.ad-row {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 38px; padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: none; width: 100%; text-align: left; text-decoration: none;
  color: var(--ink); font-family: var(--font-sans); cursor: pointer;
  min-width: 0;
}
.ad-row:last-child { border-bottom: 0; }
.ad-row:hover { background: var(--bg-hover); }
.ad-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-1); }
.ad-row .k { font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em; flex: none; }
.ad-row .v {
  margin-left: auto; min-width: 0;
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-chev { margin-left: auto; display: flex; color: var(--ink-4); flex: none; }
.ad-row .v + .ad-chev { margin-left: var(--sp-2); }
.ad-row.is-off { cursor: not-allowed; color: var(--ink-4); }
.ad-row.is-off:hover { background: none; }
.ad-row.is-off .k { color: var(--ink-4); }

/* Website — the one block, because a link needs its own line. */
.ad-web {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--sp-2) 4px var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.ad-web .k { font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em; }
.ad-web-url {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: clip; cursor: help;
}
.ad-web-copy {
  align-self: center; min-height: 30px; padding: 0 var(--sp-4);
  border-radius: var(--r-btn); border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink);
  font: 600 calc(13px * var(--text-scale, 1))/1 var(--font-sans); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ad-web-copy:hover { background: var(--bg-hover); }
.ad-web-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ad-web-copy.is-ok { color: var(--ok); border-color: var(--ok); }

/* Scroll affordance — a rail hint only, no fake control. */
.ad-prow-hint {
  padding: 0 var(--sp-4) var(--sp-3);
  font-size: calc(11.5px * var(--text-scale, 1)); color: var(--ink-4);
}

/* ── C1 · The stats drop (A11 — PUSH, never overlay) ────────────────────────
   The doors moved onto the card, so this carries the one genuinely long thing:
   the numbers. In flow under the row, so it moves the sections below down. */
.ad-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 200ms var(--ease);
}
.ad-detail.is-open { grid-template-rows: 1fr; }
.ad-detail > .in { overflow: hidden; min-height: 0; }
.ad-detail-b { padding: 0 var(--sp-4) var(--sp-4); }
.ad-detail-h { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ad-detail-h .k {
  font-size: calc(10.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cat-stats);
}
/* GV SKIN (Dom 2026-08-29: "all the red on the GV sites replace with this
   purple"). `--cat-stats` is an ALIAS onto the 16-chip palette, and that palette
   is red-family by Dom's 2026-08-22 ruling — so this eyebrow read #A8000E on
   paper / #FFB3BA on dim inside a grape portal. `html.is-gv` re-points the BRAND
   levers and deliberately never the --cat-* family (the composer's green and the
   red highlighter swatch depend on that), so the fix is stated on the RULE, not
   on the token: decoration follows the tenant, the colour CODE does not. CS is
   byte-identical — nothing below is declared for the unskinned portal. */
html.is-gv .ad-detail-h .k { color: var(--brand-deep); }
.ad-detail-h b { font-size: calc(13px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .ad-detail { transition: none; } }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.ad-stats {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) { .ad-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .ad-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ad-stat {
  border: 0; border-radius: var(--r-2);
  background: var(--bg-sunken);
  padding: var(--sp-2) var(--sp-3);
  min-width: 0;                          /* A10: never let a number blow the tile */
  cursor: help;
}
.ad-stat b {
  display: block;
  font-size: calc(18px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;    /* A10 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-stat span { display: block; margin-top: 2px; font-size: calc(11.5px * var(--text-scale, 1)); color: var(--ink-3); }

/* Sample stats — the §D new-agent animation. It must NEVER be mistaken for
   real telemetry, so the whole block is dimmed, dashed and labelled. */
.ad-sample {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--sp-3);
  background: repeating-linear-gradient(135deg, transparent 0 10px, var(--bg-sunken) 10px 11px);
}
.ad-sample-lbl {
  display: flex; align-items: center; gap: 6px;
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: var(--sp-2);
}
.ad-sample .ad-stat { opacity: .72; background: var(--bg); }
.ad-sample .ad-stat b { color: var(--ink-2); }
.ad-sample-bar { height: 4px; border-radius: var(--r-round); background: var(--bg-sunken); overflow: hidden; margin-top: 6px; }
.ad-sample-bar i { display: block; height: 100%; background: var(--cat-stats); width: 0; border-radius: inherit; }
/* The one PROGRESS FILL on this screen — same reasoning as the eyebrow above:
   a filled bar is decoration, so it wears the tenant's colour, not the chip
   palette's red. Stated on the rule; CS is untouched. */
html.is-gv .ad-sample-bar i { background: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .ad-sample-bar i { animation: ad-fill 2.4s var(--ease) infinite alternate; }
  .ad-sample .ad-stat b { animation: ad-pulse 2.4s var(--ease) infinite alternate; }
}
@keyframes ad-fill  { from { width: 8%; } to { width: var(--w, 70%); } }
@keyframes ad-pulse { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ad-sample-bar i { width: var(--w, 70%); }
  .ad-detail { transition: none; }
}

/* Total strip — the bottom of the properties section. */
.ad-total {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.ad-total .lbl {
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.ad-total .t { display: flex; align-items: baseline; gap: 5px; cursor: help; }
.ad-total .t b { font-size: calc(16px * var(--text-scale, 1)); font-weight: 650; font-variant-numeric: tabular-nums; }
.ad-total .t span { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); }

/* ── C2/C8 · Invoices — ONE flat list, all of them (Dom 2026-08-22) ───────── */
/* "ALL the invoices should be exposed, no hidden, we have room." So the
   <details> accordion, the checkbox column, Select-all and the bulk Download
   button are gone; selection lives on /account/invoices where paying happens.
   What is left is a reading of the account: hairline rows, one money column,
   and red spent ONLY on what is late. */

/* The readable red for INK — brand-hover on paper, brand on dark — so one rule
   passes contrast in both themes. Same value the invoices page uses; the two
   screens must not drift. Declared on the section so the header summary and
   the rows can both reach it. */
#ad-billing { --inv-red: var(--brand-hover); }
html[data-theme="dark"] #ad-billing { --inv-red: var(--brand); }

/* The header's right side is a door, not a badge: it names what is wrong and
   goes to the screen where it can be paid. */
.ad-invsum {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 650; letter-spacing: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ink-3); text-decoration: none;
}
.ad-invsum:hover { color: var(--ink); text-decoration: underline; }
.ad-invsum.is-red { color: var(--inv-red); }
.ad-invsum.is-red:hover { color: var(--inv-red); }

.ad-invlist { list-style: none; margin: 0; padding: 0; }

/* Five tracks: id · due · amount · state · actions. Only the id flexes, so the
   four right-hand columns line up down the whole list and the eye reads one
   money column instead of five ragged ones. */
.ad-invrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line-soft);      /* hairline, nothing heavier */
}
.ad-invrow:first-child { border-top: 0; }

.ad-invid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-invnum { font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
/* The PROPERTY, off the invoice lines — not the bill-to address. Long joins
   ("A + B + C") ellipse rather than wrap; the title attribute carries the rest. */
.ad-invprop {
  font-size: calc(12.5px * var(--text-scale, 1)); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-invdue {
  font-size: calc(14px * var(--text-scale, 1)); color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ad-invamt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; }
/* QBO totals are tax-inclusive; this is the number QBO holds, never a pre-tax one. */
.ad-invamt-v { font-size: calc(16px * var(--text-scale, 1)); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.ad-invamt-c { font-size: calc(11.5px * var(--text-scale, 1)); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.ad-invact { display: flex; gap: 6px; justify-content: flex-end; }

.ad-ichip {
  display: inline-block; padding: 3px 9px 4px; border-radius: var(--r-1);
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
/* Overdue is the loudest mark in the card: a SOLID DANGER chip. It rode
   --brand, which became the site emerald on 2026-08-30 — an overdue invoice
   was reading the same green as "paid". --err is the palette red twin. */
.ad-ichip--overdue { background: var(--err); color: #FFFFFF; }
/* Owed but not late yet: red ink on a 10% tint with a hairline outline. */
.ad-ichip--due {
  background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 22%, transparent);
}
/* Paid is the only green in this card. */
.ad-ichip--paid { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }

/* Red touches the LATE row's money and its due date, and nothing else. */
.ad-invrow.is-overdue .ad-invamt-v,
.ad-invrow.is-overdue .ad-invdue { color: var(--inv-red); }

.ad-invfoot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); background: var(--bg);
}
/* Quiet text actions — this card asks for nothing, so neither does its footer. */
.ad-invtext {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 calc(12.5px * var(--text-scale, 1))/1.4 var(--font-sans); color: var(--ink-3); text-decoration: none;
}
.ad-invtext:hover:not(:disabled) { color: var(--ink); text-decoration: underline; }
.ad-invtext:disabled { opacity: .5; cursor: default; }
.ad-invtext:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.ad-invtext--go { margin-left: auto; }
.ad-invmsg { flex-basis: 100%; font-size: calc(11.5px * var(--text-scale, 1)); color: var(--ink-4); }
.ad-invmsg.is-err { color: var(--inv-red); }

@media (max-width: 640px) {
  .ad-invrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'id amt' 'due state' 'act act';
    row-gap: 6px;
  }
  .ad-invid    { grid-area: id; }
  .ad-invamt   { grid-area: amt; }
  .ad-invdue   { grid-area: due; }
  .ad-invstate { grid-area: state; text-align: right; }
  .ad-invact   { grid-area: act; justify-content: flex-start; }
}

/* ── Co-agent ───────────────────────────────────────────────────────────── */
.ad-people { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .ad-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-person {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); padding: var(--sp-3);
  min-width: 0;
}
.ad-person .av {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-round);
  background: var(--bg-sunken) center/cover no-repeat;
  display: grid; place-items: center; font-size: calc(13px * var(--text-scale, 1)); font-weight: 650; color: var(--ink-3);
}
.ad-person .who { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.ad-person .who b { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-person .who span { font-size: calc(12px * var(--text-scale, 1)); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-person .role { margin-top: 4px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ad-person .role label { font-size: calc(11px * var(--text-scale, 1)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ── Book a shoot ───────────────────────────────────────────────────────── */
.ad-bundles {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .ad-bundles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ad-bundles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ad-bundle {
  position: relative; text-align: left;
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--bg); color: inherit; font-family: inherit;
  padding: var(--sp-3); cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ad-bundle:hover { border-color: var(--ink-4); }
.ad-bundle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ad-bundle.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.ad-bundle b { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 650; }
.ad-bundle .p { font-size: calc(17px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ad-bundle .p small { font-size: calc(11px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.ad-bundle .sv { font-size: calc(11.5px * var(--text-scale, 1)); color: var(--ink-3); }
.ad-bundle .save {
  position: absolute; top: 8px; right: 8px;
  font-size: calc(10px * var(--text-scale, 1)); font-weight: 700; color: var(--cat-green);
}
.ad-bookfoot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.ad-bookfoot .tot { font-size: calc(13px * var(--text-scale, 1)); margin-left: auto; }
.ad-bookfoot .tot b { font-variant-numeric: tabular-nums; }

.ad-reshoot {
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.ad-reshoot .row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ── Empty states (no blank sections, ever) ─────────────────────────────── */
.ad-empty {
  padding: var(--sp-6) var(--sp-4); text-align: center;
}
.ad-empty h3 { margin: 0 0 6px; font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 650; }
.ad-empty p { margin: 0 auto; max-width: 46ch; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); line-height: var(--leading-body); }
.ad-empty .ad-btn { margin-top: var(--sp-4); }

.ad-skel { height: 12px; border-radius: var(--r-1); background: var(--bg-sunken); }
@media (prefers-reduced-motion: no-preference) { .ad-skel { animation: ad-pulse 1.1s var(--ease) infinite alternate; } }

/* ══════════════════════════════════════════════════════════════════════════
   A15 — TYPE PASS + C7b referral controls (C2C 233, Dom 2026-08-22)

   APPEND-ONLY. The Dash shipped with fourteen sizes between 10px and 32px;
   this pulls it onto the ONE scale in tokens.css (--ts-*): four levels and a
   meta line, weight and ink doing the work the extra sizes were doing badly.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Greeting block: name (display) · weekday date (strong secondary) ·
      meta line (eyebrow) ─────────────────────────────────────────────────── */
.ad-hey h1 {
  font-size: var(--ts-display); line-height: var(--ts-display-lh);
  letter-spacing: var(--ts-display-tr); font-weight: var(--ts-display-w);
  text-wrap: balance;
}
.ad-hey .ad-date {
  margin-top: 5px;
  font-size: var(--ts-body); line-height: 1.35;
  font-weight: 600; letter-spacing: -.01em; color: var(--ink-2);
}
.ad-hey p {
  margin: 9px 0 0;
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  letter-spacing: var(--ts-meta-tr); font-weight: var(--ts-meta-w);
  text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .ad-hey .ad-date { font-size: var(--ts-body); } }

/* ── Section headers: eyebrow + a count that is not grey ─────────────────── */
.ad-sec-h h2 {
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  letter-spacing: var(--ts-meta-tr); font-weight: var(--ts-meta-w);
  color: var(--ink-2);
}
.ad-sec-h .ad-sub {
  font-size: var(--ts-meta); font-weight: var(--ts-num-w); letter-spacing: 0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ── Lists: label carries the weight, value stays regular ────────────────── */
.ad-card-addr { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.ad-row .k    { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; }
.ad-row .v    { font-size: var(--ts-meta); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ad-web .k    { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; }
.ad-note      { font-size: var(--ts-meta); line-height: var(--ts-body-lh); }
.ad-empty h3  { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); letter-spacing: var(--ts-h3-tr); font-weight: var(--ts-h3-w); }
.ad-empty p   { font-size: var(--ts-meta); line-height: var(--ts-body-lh); }

/* ── Numbers: tabular and 600, everywhere they mean money or a count ─────── */
.ad-stat b, .ad-total .t b, .ad-bundle .p {
  font-variant-numeric: tabular-nums; font-weight: var(--ts-num-w);
}
.ad-stat b { font-size: var(--ts-h3); letter-spacing: -.02em; }

/* ── C7b · the referral code, share menu and counter ─────────────────────── */
/* The code is the thing an agent reads out loud, so it gets the weight. */
.ad-ref-code {
  flex: none;
  font: 700 calc(13px * var(--text-scale, 1))/calc(30px * var(--text-scale, 1)) var(--font-sans);
  letter-spacing: .04em;
  padding: 0 var(--sp-3);
  border-radius: var(--r-btn);
  background: var(--brand);            /* the primary token — never a literal */
  color: var(--brand-ink);
  white-space: nowrap;
}
.ad-ref-sharewrap { position: relative; flex: none; display: inline-flex; }
.ad-ref-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  display: flex; flex-direction: column; min-width: 148px; padding: 5px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
.ad-ref-menu[hidden] { display: none; }
.ad-ref-menu button {
  text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-1);
  background: none; color: var(--ink); cursor: pointer;
  font: 500 var(--ts-body)/1.3 var(--font-sans);
}
.ad-ref-menu button:hover { background: var(--bg-hover, var(--bg)); }
/* The counter — labels and numbers at 600, the connective tissue at 400. */
.ad-ref-count {
  margin: 0; padding: 0 var(--sp-3) var(--sp-2) calc(var(--sp-3) + 25px);
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  font-weight: 500; color: var(--ink-2);
}
.ad-ref-count .ad-ref-n {
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ad-ref-count .sep { opacity: .5; margin: 0 5px; }
.ad-ref-h { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; }
.ad-ref-rules li { font-size: var(--ts-meta); line-height: var(--ts-body-lh); }

@media (max-width: 559px) {
  .ad-ref-count { padding-left: var(--sp-3); }
  .ad-ref-menu { right: auto; left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MINIMALISTIC + PHONE-MOCK SHAPES (Dom 2026-08-22, one word: "minimalistic")

   Shapes from the phone mock Dom sent — stacked rounded cards, generous inner
   padding, meta aligned right, tags as small rounded chips. SHAPES only: the
   ground stays the graphite ladder and the primary stays orange (A14/A1).
   Teal and emerald are gone from this surface entirely — success is the
   palette GREEN chip (--ok is now #27AE60).

   APPEND-ONLY. Everything here overrides by cascade, nothing above is deleted.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The date line is BOLD (Dom): strong secondary size, 700 ─────────────── */
.ad-hey .ad-date { font-weight: 700; color: var(--ink); }
@media (min-width: 900px) { .ad-hey .ad-date { font-weight: 700; } }
/* Big date/identity block, top-left, with room around it. */
.ad-hey { padding: var(--sp-5) 2px var(--sp-3); }

/* ── ONE shadow level across the Dash. Cards are placed by their radius and
      the ground step, not by three tiers of drop shadow. ─────────────────── */
.ad-sec, .ad-pcard, .ad-pmain, .ad-ref { box-shadow: var(--shadow-1); }
.ad-pwallet-h { box-shadow: none; }

/* ── Stacked cards, generous inner padding, no border where spacing does the
      job. The section shell keeps ONE hairline; the rows inside lose theirs. */
.ad-sec { border-color: transparent; border-radius: var(--r-3); }
.ad-sec-h { padding: var(--sp-5) var(--sp-5) var(--sp-2); }
.ad-sec-b { padding: 0 var(--sp-5) var(--sp-5); }
/* Grid, so the sections stack with ONE gap value instead of per-section
 * margins. `min-width:0` on the children is not optional: a grid item's
 * automatic minimum is min-content, and without it the referral row's
 * intrinsic width pushed the whole Dash 15px past a 375 viewport. */
.ad-main  { display: grid; gap: var(--sp-4); }
.ad-main > * { min-width: 0; }

/* ── Rows: no hover chrome, no per-row border. The chevron is the affordance
      and the label is the target. ────────────────────────────────────────── */
.ad-row { border-bottom: 0; padding: var(--sp-3) 2px; }
.ad-row:hover { background: none; }
.ad-row:hover .k { color: var(--ink); }
.ad-row:hover .ad-chev { transform: translateX(2px); }
.ad-chev { transition: transform var(--t-fast) var(--ease); }
.ad-web { border-bottom: 0; padding: var(--sp-3) 2px; }

/* ── Meta aligned RIGHT inside the card (phone mock) ─────────────────────── */
.ad-row .v { margin-left: auto; text-align: right; }
.ad-pbody .m { margin-left: 0; }

/* ── Tags as small rounded chips ─────────────────────────────────────────── */
.ad-pill, .ad-newtag {
  border-radius: var(--r-1);
  padding: 3px 8px 4px;
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* ── Website block: link line, centred Copy, Edit beside it ──────────────── */
.ad-web-acts { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.ad-web-edit {
  min-height: 30px; display: inline-flex; align-items: center; padding: 0 var(--sp-3);
  border-radius: var(--r-btn); color: var(--ink-2); text-decoration: none;
  font: 600 calc(13px * var(--text-scale, 1))/1 var(--font-sans);
}
.ad-web-edit:hover { color: var(--ink); }
/* Success is the palette green chip — never teal, never emerald. */
.ad-web-copy.is-ok { color: var(--ok); border-color: var(--ok); }

.ad-reshoot-h { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; cursor: help; }

/* ══════════════════════════════════════════════════════════════════════════
   C1 · PROPERTY GRID (Dom 2026-08-22: "grid", "cards smaller")

   The row was a horizontal scroller; it is now a WRAPPING GRID, so all of an
   agent's properties are on screen without a sideways swipe: 2 columns at 375,
   5–6 at 1440. The wallet still peeks from BEHIND each card — the peek is the
   back card's top 44px showing under the photo card's bottom edge, one stacked
   object, never a detached strip.
   ══════════════════════════════════════════════════════════════════════════ */
.ad-prow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-4) var(--sp-3);
  overflow: visible;                 /* the open wallet must not be clipped */
  scroll-snap-type: none;
}
@media (min-width: 700px) {
  .ad-prow { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
}

/* Card geometry: the cover is a 4:3 frame, the body is whatever the two lines
   need, and the wallet peek adds its 44px underneath. No fixed pixel height —
   a fixed height is what let the peek drift away from the card. */
.ad-pcard {
  position: relative;
  flex: initial; width: auto; height: auto;
  min-width: 0;
  overflow: visible;
  padding-bottom: 44px;              /* the room the peek occupies */
  scroll-snap-align: none;
}
.ad-pmain {
  position: relative; inset: auto;
  z-index: 2;                        /* the photo card sits IN FRONT of the peek */
  border-radius: var(--r-2);
}
.ad-pshot { flex: none; width: 100%; aspect-ratio: 4 / 3; }
.ad-pbody { padding: var(--sp-3) var(--sp-3) var(--sp-3); gap: 4px; }
.ad-pbody b { font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em; }
.ad-pbody .m { font-size: calc(13px * var(--text-scale, 1)); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* The card BEHIND. Anchored to the card box, overlapping the photo card's
   bottom edge, same width, rounded top, one shadow — a stack, not a strip. */
.ad-pwallet {
  position: absolute; left: 0; right: 0; top: 0; bottom: auto;
  z-index: 1;
  height: auto; min-height: 100%;
  transform: translateY(calc(100% - 44px));
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--r-3) var(--r-3) 0 0;
}
.ad-pcard.is-open { z-index: 5; }
.ad-pcard.is-open .ad-pwallet { transform: translateY(48px); }
.ad-pwallet-h { height: 44px; }

/* A11: an open card's stats drop spans the whole row underneath it. */
.ad-prow > .ad-detail, .ad-prow .ad-detail { grid-column: 1 / -1; }

/* SUCCESS PILL — Dom approved this exact treatment 2026-08-22: a DOT plus the
   word on a low green tint in a rounded rect. Never a filled bean. The green
   is --ok (#27AE60) and it is now the success token for both portals: Live,
   Paid, Link copied, delivered. .ad-pill already renders this shape; these two
   rules only pin the ink so the tint can never wash the label out. */
.ad-pill { border-radius: var(--r-1); }
.ad-pill .d { border-radius: var(--r-round); }

/* Referral: the code is a chip, "Send code" is the one primary action. */
.ad-ref-code {
  flex: 0 0 auto;
  font: 700 calc(13px * var(--text-scale, 1))/calc(28px * var(--text-scale, 1)) var(--font-sans); letter-spacing: .06em;
  padding: 0 var(--sp-3);
  border-radius: var(--r-btn);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  white-space: nowrap;
}
.ad-ref .ad-btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ── The address lives on the peeking card (Dom 2026-08-22) ─────────────────
   Photo card = the cover and the live pill, nothing else. The card behind it
   shows the address and its meta as the visible strip, with the grabber above.
   Net effect: a shorter card — a 4:3 cover plus a ~56px peek. */
.ad-pcard { padding-bottom: 56px; }
.ad-pmain { border-radius: var(--r-2); overflow: hidden; }
.ad-pstatus { position: absolute; left: 8px; bottom: 8px; z-index: 2; }
.ad-pstatus .ad-pill {
  background: color-mix(in srgb, #0b0c0d 62%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ad-pwallet { transform: translateY(calc(100% - 56px)); }
.ad-pcard.is-open .ad-pwallet { transform: translateY(40px); }
.ad-pwallet-h {
  height: auto; min-height: 56px;
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: var(--sp-2) var(--sp-3) var(--sp-3);
  text-align: left;
}
.ad-pwallet-h .grip {
  align-self: center; width: 26px; height: 3px; margin-bottom: 2px;
  background: var(--ink-4); border-radius: var(--r-round);
}
.ad-pw-addr { display: block; min-width: 0; width: 100%; }
.ad-pw-addr b {
  display: block; font-size: calc(15px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.25; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-pw-addr .m {
  display: block; margin-top: 2px;
  font-size: var(--ts-meta); font-weight: var(--ts-meta-w);
  letter-spacing: var(--ts-meta-tr); text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   /book-shoot — the in-portal booking flow, and the SERVICE FLIP CARD it
   shares with the Dash's "Book a shoot" section.

   Dom, 2026-08-22, three passes in one afternoon:
     1. "a quarter of the height" → the compact tile.
     2. "the circles — it's not our style" → the icon row was drawing a fallback
        circle per include, because /agent/api/pricing sends includes as
        {service_key,label} OBJECTS and the row was icon-matching on "[object
        Object]". Row gone; the includes are a line of text on the front.
     3. "small flip cards in the style we have on our CS site. Add more photos
        etc on the other side." → this.

   MODELLED ON capitalshots.ca `.pricing-card-wrap` (measured from the live
   stylesheet): photo shelf on top, name, price, an arrow-bulleted include
   list, 8px radius, a hairline border and a border-colour-only hover at 250ms.
   Two things are ours, not the site's: the colour is our two reds and the
   neutral ladder (never the site's teal), and the card TURNS — reusing the
   .ad-pcard/.ad-flip mechanic this portal already ships for listing cards, so
   there is one motion vocabulary in the product.
   ══════════════════════════════════════════════════════════════════════════ */
.bk-pkgs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-2);
}
@media (min-width: 900px) {
  .bk-pkgs { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
}

.bk-card { position: relative; min-width: 0; perspective: 900px; }
.bk-cflip {
  position: relative; width: 100%;
  aspect-ratio: 22 / 15;                       /* ≈220×150, Dom's number */
  transform-style: preserve-3d;
  transition: transform 250ms var(--ease-out, ease);
}
@media (hover: hover) {
  .bk-card:hover .bk-cflip,
  .bk-card:focus-within .bk-cflip { transform: rotateY(180deg); }
}
.bk-card.is-flipped .bk-cflip { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .bk-cflip { transition: none; } }

.bk-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; min-width: 0;
  margin: 0; padding: var(--sp-3); text-align: left; font: inherit;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-2);
  overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* Only the face you can SEE takes the pointer — backface-visibility is a paint
   rule, not a hit-testing one (the same lesson as .ad-pcard). */
.bk-card .bk-cback { pointer-events: none; transform: rotateY(180deg); }
@media (hover: hover) {
  .bk-card:hover .bk-cback, .bk-card:focus-within .bk-cback { pointer-events: auto; }
  .bk-card:hover .bk-cfront, .bk-card:focus-within .bk-cfront { pointer-events: none; }
}
.bk-card.is-flipped .bk-cback { pointer-events: auto; }
.bk-card.is-flipped .bk-cfront { pointer-events: none; }
.bk-card:hover .bk-face, .bk-card:focus-within .bk-face { border-color: var(--line-strong); }
/* Selected = a 1px red edge, on whichever face is showing. Never a fill. */
.bk-card.is-on .bk-face { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.bk-cfront:focus-visible, .bk-csel:focus-visible, .bk-cturn:focus-visible {
  outline: 2px solid var(--brand); outline-offset: -3px;
}

/* ── front ── name 16/600, price 20/600, one quiet line of what is in it ── */
.bk-cfront { gap: 3px; justify-content: center; cursor: pointer; }
.bk-cfront b { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; }
.bk-cfront .p {
  font-size: calc(20px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.bk-cfront .p small { font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.bk-cfront .inc {
  font-size: calc(13px * var(--text-scale, 1)); line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Dom 2026-08-22: "minimal colours" — the saving is ink, not green. */
.bk-cfront .save { font-size: calc(12px * var(--text-scale, 1)); font-weight: 600; color: var(--ink-2); }
.bk-cfront .save s { color: var(--ink-4); font-weight: 500; margin-left: 4px; }

/* The touch-only turn control. Where hover exists it is display:none, which
   takes it out of the tab order too — a keyboard turns the card by focusing
   it, so a second control would be a duplicate. */
.bk-cturn {
  position: absolute; z-index: 3; right: 6px; bottom: 6px;
  width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  background: var(--bg); color: var(--brand); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-1);
}
.bk-cturn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .bk-cturn { display: none; } }
.bk-card.is-flipped .bk-cturn { color: var(--ink-3); }

/* ── back ── the samples, the list, and a quiet Select ────────────────────── */
/* The back is HEIGHT-BOUND: it is the front's card, turned over, so nothing
   may grow it. Measured to fit 210×143 — strip 46 + three 16px rows + a 26px
   foot. A bundle with more than three parts prints two and "+ N more" rather
   than a fourth line that would be clipped in half. */
.bk-cback { gap: 6px; padding: 0 0 8px; }
.bk-cback .shots { display: flex; gap: 1px; flex: none; }
.bk-cback .shots img {
  display: block; min-width: 0; flex: 1 1 0;
  width: 100%; height: 46px; object-fit: cover; object-position: 50% 40%;
  background: var(--bg-elevated);
}
.bk-cback .binc {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  list-style: none; margin: 0; padding: 0 var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
}
.bk-cback .binc li {
  display: flex; align-items: center; gap: 6px; min-height: 0;
  font-size: calc(13px * var(--text-scale, 1)); line-height: calc(16px * var(--text-scale, 1)); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-cfoot {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
}
.bk-cfoot .mins {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The site's own arrow bullet ("Arrow Right.svg"), in our red. */
.bk-cback .binc svg {
  flex: none; width: 14px; height: 14px;
  fill: none; stroke: var(--brand); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.bk-cback .binc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bk-csel {
  flex: none; margin: 0; padding: 5px var(--sp-3);
  background: none; color: var(--ink); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  font: 600 calc(13px * var(--text-scale, 1))/1.2 var(--font-sans); text-align: center;
}
.bk-csel:hover { border-color: var(--brand); color: var(--brand); }
.bk-card.is-on .bk-csel { border-color: var(--brand); color: var(--brand); }
.bk-card.is-on .bk-cback .binc svg { stroke: var(--brand-deep, var(--brand)); }

/* ── the rest of the booking screen ─────────────────────────────────────── */
.bk-f { display: block; position: relative; margin-bottom: var(--sp-3); }
.bk-f > span, .bk-notes > span, .bk-unit > span {
  display: block; margin-bottom: 5px;
  font-size: var(--ts-meta); font-weight: var(--ts-meta-w);
  letter-spacing: var(--ts-meta-tr); text-transform: uppercase; color: var(--ink-2);
}
.bk-in {
  width: 100%; min-height: 42px; padding: 10px var(--sp-3);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  font: 400 var(--ts-body)/1.4 var(--font-sans);
}
.bk-in:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring-shadow); }
.bk-addr-list {
  position: absolute; left: 0; right: 0; z-index: 30;
  background: var(--bg-elevated); border: 1px solid var(--line-strong);
  border-radius: var(--r-2); box-shadow: var(--shadow-1); overflow: hidden;
}
.bk-addr-list:empty { display: none; }
.bk-unit { display: block; margin-bottom: var(--sp-2); }
.bk-adds { display: grid; gap: var(--sp-2); }
.bk-add {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 2px;
}
.bk-add b { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; }
.bk-add .p { font-size: var(--ts-meta); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bk-add .q { display: flex; align-items: center; gap: 2px; flex: none; }
.bk-add .q button {
  width: 28px; height: 28px; border-radius: var(--r-1);
  border: 1px solid var(--line-strong); background: none; color: var(--ink);
  font: 600 calc(15px * var(--text-scale, 1))/1 var(--font-sans); cursor: pointer;
}
.bk-add .q output { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Date and time: the 4-week grid beside the chosen day's start times ──
 * (Dom 2026-08-22: "is there a calendar etc?") The grid itself is
 * components/cs-minical.js in inline mode; only the two-column arrangement and
 * the chips belong to this screen. Stacks under 720. */
.bk-when { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 720px) {
  /* 244px = the shared month grid's own width (7 × 32px day columns + the row's own edges). The column
     used to be 320, which stretched every day cell into an ellipse — the
     "yo-yo shapes" Dom flagged 2026-08-23. The calendar sizes the column now,
     not the other way round. */
  .bk-when { grid-template-columns: 244px minmax(0, 1fr); gap: var(--sp-5, 24px); }
}
.bk-daylabel {
  margin: 0 0 var(--sp-2);
  font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; color: var(--ink);
}
.bk-daylabel span { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bk-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 9px var(--sp-3); cursor: pointer; font: inherit; text-align: left;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-2);
}
.bk-chip:hover { border-color: var(--line-strong); }
.bk-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bk-chip b { font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bk-chip .f { font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bk-chip.is-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.bk-lines li.is-when > span:first-child { font-weight: 500; color: var(--ink-2); }

.bk-lines { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: 4px; }
.bk-lines li { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--ts-body); }
.bk-lines li > span:first-child { font-weight: 600; letter-spacing: -.01em; }
.bk-lines .n { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bk-total { margin: 0 0 var(--sp-4); font-size: var(--ts-meta); font-weight: 600; color: var(--ink-2); }
.bk-total b { font-size: var(--ts-h2); font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-listnote, .ad-listnote {
  font-size: calc(11.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
.bk-notes { display: block; margin-bottom: var(--sp-4); }
.bk-go { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.bk-note { margin: var(--sp-2) 0 0; font-size: var(--ts-meta); line-height: var(--ts-body-lh); color: var(--ink-3); }
.bk-done b { display: block; font-size: var(--ts-h2); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk-done p { margin: 6px 0 var(--sp-4); font-size: var(--ts-body); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   WALLET CARD — FLOW, not absolute (fix, 2026-08-22)

   The absolute-positioned wallet worked at one fixed card height and broke the
   moment the cards became a wrapping grid with auto height: `translateY(100%)`
   is a percentage of the WALLET's own height, so a card with five doors slid
   its list straight over the row underneath.

   In flow it is simply two stacked cards: the photo card, then the address
   card pulled up under it by the corner radius so it reads as one object
   sticking out from behind. Opening it grows the list, which PUSHES the grid
   row down (A11) instead of covering anything.
   ══════════════════════════════════════════════════════════════════════════ */
.ad-pcard {
  position: relative; display: flex; flex-direction: column;
  padding-bottom: 0; overflow: visible; height: auto; min-width: 0;
}
.ad-pmain { position: relative; z-index: 2; }
.ad-pwallet {
  position: relative; z-index: 1; inset: auto;
  margin-top: -10px;                 /* tucks behind the photo card's bottom edge */
  transform: none;
  height: auto; min-height: 0;
  padding-top: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong); border-top: 0;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.ad-pcard.is-open .ad-pwallet { transform: none; }
.ad-pwallet-h { min-height: 52px; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.ad-doors {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--ease-out);
}
.ad-pcard.is-open .ad-doors { max-height: 520px; }
@media (prefers-reduced-motion: reduce) { .ad-doors { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   C1 · FLIP CARDS (Dom 2026-08-22, reversed from the wallet after seeing it)

   Front = cover + address + city + the green Live pill. Tap anywhere and the
   card turns over; the back is the same card at the same size holding ONE
   dropdown list. Esc turns it back, one card turned at a time.

   The two faces are absolutely positioned inside a fixed-ratio stage so the
   grid row never changes height when a card turns — the flip is the motion,
   not a reflow. `backface-visibility:hidden` keeps the front's photo from
   ghosting through the list.
   ══════════════════════════════════════════════════════════════════════════ */
.ad-pcard {
  position: relative; display: block; min-width: 0;
  padding: 0; overflow: visible; height: auto;
  perspective: 1000px;
}
.ad-flip {
  position: relative; width: 100%;
  aspect-ratio: 3 / 4;                    /* cover 4:3 + the two text lines */
  transform-style: preserve-3d;
  transition: transform 450ms var(--ease-out);
}
.ad-pcard.is-flipped .ad-flip { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .ad-flip { transition: none; } }

.ad-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: stretch;
  width: 100%; height: 100%;
  margin: 0; padding: 0; text-align: left; font: inherit;
  background: var(--bg-elevated); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-2);
  overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: var(--shadow-1);
}
.ad-front { cursor: pointer; }
/* Only the face you can SEE takes the click. `backface-visibility:hidden` is a
 * paint rule, not a hit-testing rule — inside preserve-3d Chrome still hit-tests
 * the hidden face (measured: one of four Copy buttons on a flipped card resolved
 * to the front and flipped it back instead of copying). The JS sets `inert`;
 * this is the same guarantee for anything that does not support it. */
.ad-pcard .ad-back { pointer-events: none; }
.ad-pcard.is-flipped .ad-back { pointer-events: auto; }
.ad-pcard.is-flipped .ad-front { pointer-events: none; }
.ad-front:focus-visible, .ad-back-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.ad-back { transform: rotateY(180deg); background: var(--bg-elevated); }

/* Front */
.ad-front .ad-pshot { flex: none; width: 100%; aspect-ratio: 4 / 3; position: relative; }
.ad-front .ad-pbody { flex: 1 1 auto; padding: var(--sp-3); gap: 3px; justify-content: center; }
.ad-pstatus { position: absolute; left: 8px; bottom: 8px; z-index: 2; }

/* Back */
.ad-back-h { flex: none; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.ad-back-h b {
  display: block; font-size: var(--ts-body); font-weight: 600; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-back-h .m {
  display: block; margin-top: 2px;
  font-size: var(--ts-meta); font-weight: var(--ts-meta-w);
  letter-spacing: var(--ts-meta-tr); text-transform: uppercase; color: var(--ink-3);
}
.ad-back .ad-doors {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
  padding: 0 var(--sp-3);
}
.ad-back-btn {
  flex: none; width: 100%; padding: var(--sp-2) var(--sp-3) var(--sp-3);
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ink-3); font: 600 var(--ts-meta)/1 var(--font-sans);
  letter-spacing: var(--ts-meta-tr); text-transform: uppercase;
}
.ad-back-btn:hover { color: var(--ink); }
.ad-back .ad-row { min-height: 34px; }
.ad-back .ad-web { padding: var(--sp-2) 2px; }
.ad-web-url.is-none { color: var(--ink-4); }

/* No wallet any more — the peek geometry is gone with it. */
.ad-pwallet, .ad-pwallet-h { display: none; }

.ad-livemeta {
  font-size: var(--ts-meta); font-weight: var(--ts-num-w);
  color: var(--ink-2); font-variant-numeric: tabular-nums; cursor: help;
}

/* Card density (Dom: 5–6 across at 1440, 2 at 375). */
@media (min-width: 700px) {
  .ad-prow { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: var(--sp-3); }
}
.ad-pstatus { bottom: 10px; }
.ad-pstatus .ad-pill { padding: 3px 8px 4px; font-size: calc(11.5px * var(--text-scale, 1)); }

/* ── Booked as · the identity the order carries (CS-PLAT-09, Dom 2026-08-22) ─
 * Read-only, from the session — an agent never re-types a name we already
 * hold. First and last are separate rows: never one "Full name" field, and
 * never one "Full name" READ-OUT either, or the split stops being real. */
.bk-who {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: var(--bg-sunken);
}
.bk-who-h {
  display: block; margin-bottom: var(--sp-2);
  font-size: var(--ts-meta); line-height: var(--ts-meta-lh);
  letter-spacing: var(--ts-meta-tr); font-weight: var(--ts-meta-w);
  text-transform: uppercase; color: var(--ink-2);
}
.bk-who-dl { margin: 0; display: grid; gap: 2px; }
.bk-who-dl > div { display: flex; gap: var(--sp-4); align-items: baseline; }
.bk-who-dl dt { flex: 0 0 96px; font-size: calc(13px * var(--text-scale, 1)); color: var(--ink-3); }
.bk-who-dl dd { margin: 0; min-width: 0; font-size: calc(13.5px * var(--text-scale, 1)); color: var(--ink); overflow-wrap: anywhere; }
.bk-who-edit {
  display: inline-block; margin-top: var(--sp-2);
  font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.bk-who-edit:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════════════
   C1 · FLIP CARD — 5th pass (Dom 2026-08-22: "quick access", "details would be
   on the Listings page")

   FRONT  cover · live/draft chip · address · city · shoot date. The whole face
          is one <button>: click, tap, Enter or Space turn it (aria-pressed).
   BACK   the address, a Back icon top-right, one row per destination that
          really exists, and a quiet "Details →" to the listing hub. Nothing
          else — no counts, no amounts, no status prose.

   The rows FLEX to fill whatever height the front established, so the back can
   never grow a scrollbar: three destinations give taller rows, five give
   shorter ones, and the card is the same object either way.
   ══════════════════════════════════════════════════════════════════════════ */
.ad-flip { transition: transform 250ms var(--ease); }   /* 250 ms, no bounce */
@media (prefers-reduced-motion: reduce) { .ad-flip { transition: none; } }

/* Front chip — one neutral pill. Green appears on this screen in exactly one
   place: the live dot. */
.ad-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 4px; border-radius: var(--r-1);
  background: var(--bg-elevated); border: 1px solid var(--line);
  color: var(--ink-2); font: 600 calc(12px * var(--text-scale, 1))/1 var(--font-sans); letter-spacing: -.005em;
  white-space: nowrap;
}
.ad-chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }

/* Back — header row: address + the Back icon-button. */
.ad-back { display: flex; flex-direction: column; }
.ad-back-h {
  flex: none; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.ad-back-h b {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(14.5px * var(--text-scale, 1)); font-weight: 650; letter-spacing: -.01em; line-height: 1.25;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-back-h .m { display: none; }         /* the city belongs on the front */
.ad-back-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 0; border-radius: var(--r-1);
  color: var(--ink-3); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ad-back-x:hover { background: var(--bg-hover); color: var(--ink); }
.ad-back-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* The links. One row = one destination. */
.ad-links {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 var(--sp-2);
}
.ad-dl {
  flex: 1 1 0; min-height: 0;
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--line);
}
.ad-dl:last-child { border-bottom: 0; }
.ad-dl-go {
  flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px; border-radius: var(--r-1);
  color: var(--ink); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.ad-dl-go .i { flex: none; display: flex; color: var(--ink-3); transition: color var(--t-fast) var(--ease); }
.ad-dl-go .n {
  flex: 1 1 auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(14px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em;
}
.ad-dl-go .c { flex: none; display: flex; color: var(--ink-4); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ad-dl-go:hover { color: var(--ink); }
.ad-dl-go:hover .i, .ad-dl-go:hover .c { color: var(--ink-2); }
.ad-dl-go:hover .c { transform: translateX(2px); }
.ad-dl-go:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Dom 2026-08-22 (6th pass) — the Copy control is QUIET. Five red pills in a
 * 166px card was five times too much brand; the whole back face is now the
 * neutral ladder and the ONLY red left on it is the focus ring. */
.ad-dl-copy {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-1);
  background: none; color: var(--ink-2); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ad-dl-copy:hover { background: var(--bg-hover); color: var(--ink); }
.ad-dl-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ad-dl-copy .ic-c { display: flex; }
.ad-dl-copy .ic-k { display: none; }

/* Confirmation, in place and at a FIXED WIDTH: the clipboard becomes a check
 * and the row's own label is swapped for a small "Copied". Nothing moves, and
 * there is no toast to look away for. */
.ad-dl-go .ok {
  display: none; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.005em; color: var(--ink-2);
}
.ad-dl.is-ok .ad-dl-go .n { display: none; }
.ad-dl.is-ok .ad-dl-go .ok { display: block; }
.ad-dl.is-ok .ad-dl-go .c { opacity: 0; }
.ad-dl.is-ok .ad-dl-copy { color: var(--ink); }
.ad-dl.is-ok .ad-dl-copy .ic-c { display: none; }
.ad-dl.is-ok .ad-dl-copy .ic-k { display: flex; }

/* Details → the listing hub, where the counts, the media and the order live. */
.ad-back-det {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--ink-2); text-decoration: none;
  font: 700 calc(12px * var(--text-scale, 1))/1 var(--font-sans); letter-spacing: var(--ts-meta-tr); text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}
.ad-back-det:hover { color: var(--ink); }
.ad-back-det:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* The 4th-pass back face is gone; make sure none of its rules can reach in. */
.ad-back .ad-doors, .ad-back .ad-web, .ad-back-btn { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   C1 · FLIP CARD — v3 (Dom 2026-08-22, from the /dashboard screenshot)

   TWO instructions, and this block is both of them.

   1 · "On the bottom of each card needs to be a smaller button — not too
        small — 'Options'. Click → the card flips."
       The whole-card flip is GONE. The front face is a plain div again
       (cover · live/draft chip · address · city · date) and the only thing
       you can press on it is a 32px quiet button across the footer.

   2 · "On the flip side make it the darker orange I gave you… the layout is
        good but colouristically it needs to look high end."
       The back face ground is --brand-hover #C5121A — the dark red — in BOTH
       themes, and everything on it is white. --brand-ink is deliberately NOT
       used here: it flips to near-black in dark mode, and Dom asked for the
       same dark-red-and-white card in both. ONE colour family on this face:
       dark red + white at four opacities. No gradient, no shadow, no second
       hue. The green live dot stays where it belongs — the FRONT chip.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Front ───────────────────────────────────────────────────────────────── */
.ad-front { cursor: pointer; }
.ad-front .ad-pbody { padding: var(--sp-3) var(--sp-3) 0; }

/* Quiet secondary. Ink on the card's own surface with a 1px hairline — it
   reads as a control, never as a call to action. */
.ad-opt {
  flex: none; display: flex; align-items: center; justify-content: center;
  margin: var(--sp-2) var(--sp-3) var(--sp-3);
  height: 32px; padding: 0 var(--sp-3);
  background: var(--bg-elevated);
  border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--ink-2); cursor: pointer;
  font: 600 calc(13px * var(--text-scale, 1))/1 var(--font-sans); letter-spacing: -.005em;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.ad-opt:hover { background: var(--bg-hover); border-color: var(--line-strong, var(--line)); color: var(--ink); }
.ad-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Back · the black face, red accents (Dom 2026-08-23) ─────────────────── */
.ad-back {
  /* white for reading, red for accents — nothing else on this face */
  --adb-ink:    #FFFFFF;
  --adb-icon:   var(--brand);
  --adb-quiet:  rgba(255, 255, 255, .62);
  --adb-line:   color-mix(in srgb, var(--brand) 22%, transparent);
  --adb-rule:   color-mix(in srgb, var(--brand) 28%, transparent);
  --adb-hover:  color-mix(in srgb, var(--brand) 12%, transparent);
  --adb-accent: var(--brand);

  background: var(--cat-ink, #16181B);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--adb-ink);
}

/* Header — the address, and the way back. */
.ad-back-h { border-bottom: 1px solid var(--adb-rule); }
.ad-back-h b { font-size: calc(16px * var(--text-scale, 1)); font-weight: 600; line-height: 1.25; color: var(--adb-ink); }
.ad-back-x { color: var(--adb-quiet); }
.ad-back-x:hover { background: var(--adb-hover); color: var(--adb-ink); }
.ad-back-x:focus-visible { outline: 2px solid var(--adb-accent); outline-offset: 1px; }

/* Rows — label, icon, chevron, clipboard. Nothing else lives here. */
.ad-dl { border-bottom: 1px solid var(--adb-line); }
.ad-dl:last-child { border-bottom: 0; }
.ad-dl-go { color: var(--adb-ink); }
.ad-dl-go .i { color: var(--adb-icon); }
.ad-dl-go .n { font-size: calc(15px * var(--text-scale, 1)); font-weight: 500; letter-spacing: -.005em; }
.ad-dl-go .c { color: var(--adb-quiet); }
.ad-dl-go:hover { background: var(--adb-hover); color: var(--adb-ink); }
.ad-dl-go:hover .i, .ad-dl-go:hover .c { color: var(--adb-ink); }
.ad-dl-go:focus-visible { outline: 2px solid var(--adb-accent); outline-offset: -2px; }

.ad-dl-copy { color: var(--adb-quiet); }
.ad-dl-copy:hover { background: var(--adb-hover); color: var(--adb-ink); }
.ad-dl-copy:focus-visible { outline: 2px solid var(--adb-accent); outline-offset: 1px; }

.ad-dl-go .ok { font-size: calc(14px * var(--text-scale, 1)); font-weight: 500; color: var(--adb-ink); }
.ad-dl.is-ok .ad-dl-copy { color: var(--adb-ink); }

/* Footer — the one way off this card that is not a destination. */
.ad-back-det {
  border-top: 1px solid var(--adb-line);
  color: var(--adb-accent);
  font: 700 calc(13px * var(--text-scale, 1))/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
}
.ad-back-det:hover { color: var(--adb-ink); }
.ad-back-det:focus-visible { outline: 2px solid var(--adb-accent); outline-offset: -2px; }

/* ── Add-ons waiting to book (Dom 2026-08-24) — parked by the editor, priced
   on the agent's own rates, booked through the real flow. ─────────────────── */
.ad-pending {
  margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--r-2); background: color-mix(in srgb, var(--brand) 5%, transparent);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.ad-pending-h { font: 700 calc(13px * var(--text-scale, 1))/1.2 var(--font-sans); color: var(--ink); letter-spacing: .02em; text-transform: uppercase; }
.ad-pending-grp { display: flex; flex-direction: column; gap: 6px; }
.ad-pending-addr { font: 600 calc(14px * var(--text-scale, 1))/1.3 var(--font-sans); color: var(--ink); }
.ad-pending-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 32px; }
.ad-pending-row .n { font-size: calc(14px * var(--text-scale, 1)); color: var(--ink); }
.ad-pending-row .p { margin-left: auto; font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ad-pending-x {
  width: 28px; height: 28px; border: 0; border-radius: var(--r-1);
  background: none; color: var(--ink-3); cursor: pointer; font-size: calc(16px * var(--text-scale, 1));
}
.ad-pending-x:hover { background: var(--bg-hover); color: var(--ink); }
.ad-pending-go { align-self: flex-start; }

/* ── Single services on the Dash (Dom 2026-08-24: "maybe he will order more") —
   the same rates the booking flow prices; a chip drops the service into the
   cart at /book-shoot. Quiet cards, price is the loudest thing on them. ────── */
.ad-singles { margin: var(--sp-4) 0 var(--sp-2); }
.ad-singles-h {
  display: block; margin-bottom: var(--sp-2);
  font: 700 calc(13px * var(--text-scale, 1))/1.2 var(--font-sans);
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2);
}
.ad-singles-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ad-single {
  display: inline-flex; align-items: baseline; gap: 8px;
  min-height: 44px; padding: 0 var(--sp-3); align-items: center;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ad-single:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.ad-single .n { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 500; }
.ad-single .p { font-size: calc(13.5px * var(--text-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-single .p small { font-weight: 500; color: var(--ink-3); }

/* Co-agent access — one true label, not a dead dropdown (Dom 2026-08-24). */
.ad-role-static {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-1);
  color: var(--ink-2); font: 600 calc(12.5px * var(--text-scale, 1))/1 var(--font-sans);
  cursor: help;
}