/* The Auctioneer app (signed-in surface), 2026-09-10. Built 1:1 from
   design_handoff_auctioneer_assistant: the waitlist identity (waitlist.css
   tokens) plus the hue system. Values are the handoff's, not rounded. */
:root {
  --ground: #0f0e0e; --ink: #201E1D; --paper: #F3F2F2; --blue: #4169E1; --blue-hover: #2F51B8; --tint: #EEF2FC; --red: #9b2c2c; --muted: #6b6a66;
  /* F-4, F-7, F-8 (instance F, 14 September): --head was #8a8884 and --faint was #a3a19e, 3.36:1 and 2.58:1 on the grounds they sit on, both under the WCAG 2.1 AA floor of 4.5:1. Both are text-only tokens. #6b6a66 is the value --muted already uses, and the lightest grey clearing 4.5:1 on every one of those grounds, including rgba(32,30,29,.08) under .btn-exec. */
  --desk: #dedbd7; --body: #3f3e3b; --head: #6b6a66; --faint: #6b6a66; --chev: #c9c7c4; --fill: #e6e4e1; --subtle: #faf9f8;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Instrument Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --r1: 3px; --r2: 14px; /* U, 6 October 2026 (Henry): the two roundings, as on the landing page (waitlist.css) */
  --scan-ink: oklch(47% .15 255); --scan-solid: oklch(52% .15 255); --scan-tint: oklch(95.5% .035 255); --scan-edge: oklch(78% .10 255); --scan-mid: oklch(62% .16 255);
  --watch-ink: oklch(47% .15 215); --watch-solid: oklch(52% .15 215); --watch-tint: oklch(95.5% .035 215); --watch-edge: oklch(78% .10 215); --watch-mid: oklch(62% .16 215);
  --alert-ink: oklch(47% .15 285); --alert-solid: oklch(52% .15 285); --alert-tint: oklch(95.5% .035 285); --alert-edge: oklch(78% .10 285); --alert-mid: oklch(62% .16 285);
  --risk-ink: oklch(47% .15 25); --good-ink: oklch(47% .15 150);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 13.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; }
button, [role="button"] { cursor: pointer; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
b { font-weight: 600; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* focus rings: the waitlist's, reused */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.rail :focus-visible { outline-color: var(--paper); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.9) } 60% { transform: scale(1.03) } 100% { opacity: 1; transform: scale(1) } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(65,105,225,.55) } 100% { box-shadow: 0 0 0 11px rgba(65,105,225,0) } }
@keyframes sweep { to { transform: translateX(340%) } }
@keyframes breathe { 0%, 100% { opacity: .5; transform: scale(.86) } 50% { opacity: 1; transform: scale(1) } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px) } to { opacity: 1; transform: translate(-50%, 0) } }
@keyframes checkPop { 0% { transform: scale(0) } 62% { transform: scale(1.22) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── shell ─────────────────────────────────────────────────────────── */
.desk { position: relative; height: 100dvh; height: calc(100dvh - var(--ac-consent-h, 0px)); padding: 18px; background: var(--desk); display: flex; overflow: hidden; } /* U, 7 October 2026: until the cookie banner is answered the app ends above it (consent.js), so it covers no control */
.frame { flex: 1; min-width: 0; display: grid; grid-template-columns: 54px minmax(0,1fr); position: relative; border: 1px solid rgba(32,30,29,.14); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 16px 48px rgba(32,30,29,.13); } /* R56 (5 October 2026): two columns, the main one the full width; the tray is a drawer over it (.tray-dock), placed on the frame. Every absolute element inside already has a positioned box of its own, so this moves nothing else. */

.rail { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 0; background: var(--ink); }
.rail-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; background: none; flex: none; margin: 7px 0 15px; cursor: pointer; transition: transform .16s; } /* PR-D14 (17 Sept): the mark is a button (home: a new chat), the same handler as the + below it; the rail's paper focus ring applies to it as to every rail button. R36 (4 October 2026): the brand tile itself, at the nav size, with half its height clear above and below */
.rail-mark:hover { transform: scale(1.06); }
.rail-mark img { display: block; width: 40px; height: 40px; } /* hard corners, no border, no shadow: the brand kit's tile as drawn */
.rail-mark:focus-visible { border-radius: 0; }
.rail-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: rgba(243,242,242,.55); transition: background .16s, color .16s, transform .16s; }
.rail-btn:hover { background: rgba(243,242,242,.12); color: var(--paper); transform: scale(1.06); }
.rail-btn.on { background: rgba(243,242,242,.16); color: var(--paper); }
.rail-btn.new { background: var(--blue); color: #fff; }
.rail-btn.new:hover { background: var(--blue-hover); transform: scale(1.08); }
.rail-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); border: 1.5px solid var(--ink); }
.rail-avatar { margin-top: auto; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(243,242,242,.18); color: var(--paper); font: 600 11px/1 var(--sans); transition: transform .16s, box-shadow .16s, background .16s; }
.rail-avatar:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(243,242,242,.18); }
.rail-avatar.on { background: var(--scan-solid); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.view-mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hdr { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid rgba(32,30,29,.1); flex: none; }
.crumb { font: 400 12.5px/1 var(--sans); color: var(--faint); min-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb .sep { margin: 0 7px; color: #d4d2cf; }
.crumb .leaf { color: var(--ink); font-weight: 600; }
.sample { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 9px; border: 1px dashed rgba(32,30,29,.28); border-radius: 999px; font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--subtle); }
.sample i { display: block; width: 6px; height: 6px; border-radius: 50%; background: oklch(62% .16 70); }
@media (max-width: 1000px) { .sample .full { display: none; } }
/* Source tag (api.js sourceTag, PR-D0): the "i" a real figure carries; its title names the source and the as-of time. */
.src { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 4px; border: 1px solid rgba(32,30,29,.28); border-radius: 50%; font: 600 8.5px/1 var(--sans); font-style: normal; color: var(--muted); background: #fff; vertical-align: 1px; cursor: help; text-decoration: none; }
.src:hover, .src:focus-visible { border-color: var(--ink); color: var(--ink); }
.tabs { margin-left: auto; display: flex; gap: 4px; flex: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 7px; background: transparent; font: 600 12.5px/1 var(--sans); color: var(--muted); transition: background .16s, color .16s; }
.tab:hover { background: rgba(32,30,29,.07); }
.tab.on { background: rgba(32,30,29,.09); color: var(--ink); }
.tab .count { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 9.5px/1 var(--sans); font-style: normal; animation: popIn .3s var(--ease); }
.tab .live, .tray-handle .live { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulseDot 1.5s infinite; } /* R56: the drawer's handle wears the same dot */
/* At the 900px floor the header row (crumb + Sample pill + five tabs) was 60px wider than the main
   column and its tail sat under the tray, so the Runs tab could not be clicked (measured 2026-09-11,
   PR-D0). Below 1000px: tighter padding, the crumb shows the leaf only and takes what is left, the
   tabs keep their full width. Nothing changes at 1100px or 1240px. */
@media (max-width: 1000px) {
  .hdr { padding: 12px 14px; gap: 10px; }
  .crumb { flex: 1 1 0; min-width: 40px; }
  .crumb .root, .crumb .sep { display: none; }
  .tab { padding: 6px 8px; }
}

.pane { flex: 1; min-height: 0; overflow: auto; padding: 20px 26px 100px; animation: fadeUp .4s var(--ease) both; }
.view-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.view-head h2 { margin: 0; font: 400 26px/1 var(--serif); }
.view-head .sub { font: 400 12px/1 var(--sans); color: var(--faint); }
.eyebrow { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.eyebrow-blue { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-hover); }

/* buttons */
.btn-30 { height: 30px; padding: 0 13px; border: 1.5px solid rgba(32,30,29,.24); border-radius: 7px; background: #fff; font: 600 12.5px/1 var(--sans); color: var(--ink); transition: border-color .16s, color .16s; }
.btn-30:hover { border-color: var(--ink); }
.btn-30.primary { border: 0; background: var(--blue); color: #fff; transition: background .16s, transform .16s; }
.btn-30.primary:hover { background: var(--blue-hover); transform: translateY(-1px); }
.btn-31 { height: 31px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.26); border-radius: 7px; background: #fff; color: var(--ink); font: 600 12.5px/1 var(--sans); transition: border-color .16s, color .16s; }
.btn-31:hover { border-color: var(--ink); }
.btn-31.danger { color: var(--muted); }
.btn-31.danger:hover { border-color: var(--red); color: var(--red); }
.btn-34 { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: 600 13px/1 var(--sans); box-shadow: 0 6px 16px rgba(65,105,225,.26); transition: transform .16s, background .16s; }
.btn-34:hover { transform: translateY(-2px); background: var(--blue-hover); color: #fff; } /* 2026-09-23: the label stays white on hover; on an <a> button the global a:hover colour used to win */
.btn-34.outline { border: 1.5px solid rgba(32,30,29,.28); background: #fff; color: var(--ink); box-shadow: none; transition: border-color .16s; }
.btn-34.outline:hover { transform: none; border-color: var(--ink); background: #fff; color: var(--ink); }
.btn-locked { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: rgba(32,30,29,.08); color: var(--head); font: 600 13px/1 var(--sans); cursor: not-allowed; }
.btn-locked.h36 { height: 36px; }

/* ── chat ──────────────────────────────────────────────────────────── */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thread { flex: 1; min-height: 0; overflow: auto; padding: 14px 30px 6px; display: flex; flex-direction: column; gap: 15px; }
.first-run { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: fadeUp .45s var(--ease) both; }
.fr-mark { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: var(--paper); animation: breathe 3.4s ease-in-out infinite; }
.first-run h1 { flex: none; margin: 9px 0 0; font: 400 28px/1.08 var(--serif); letter-spacing: -.015em; }
.fr-lede { flex: none; margin: 8px 0 0; max-width: 412px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.starters { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; width: 100%; max-width: 520px; }
.starter { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1.5px solid rgba(32,30,29,.14); border-radius: 10px; background: #fff; text-align: left; transition: border-color .18s, transform .18s, box-shadow .18s; }
.starter:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(65,105,225,.13); }
.starter i { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--tint); color: var(--blue); }
.starter span { font: 600 12.5px/1.3 var(--sans); color: var(--ink); }

.msg-user { align-self: flex-end; box-sizing: content-box; max-width: 64%; padding: 10px 15px; border-radius: 13px 13px 3px 13px; background: var(--ink); color: var(--paper); font: 400 13.5px/1.5 var(--sans); animation: fadeUp .35s var(--ease) both; }
.msg { display: flex; gap: 11px; }
.msg.intro { animation: fadeUp .4s .06s var(--ease) both; }
.msg.enter { animation: fadeUp .38s var(--ease) both; }
.ava { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--paper); margin-top: 2px; }
.ava-gap { flex: none; width: 26px; }
.msg-body { flex: 1; min-width: 0; }
.msg-body > p { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--body); }
.msg-body > p em { color: var(--muted); }
.receipts { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.receipt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(32,30,29,.12); border-radius: 9px; background: rgba(255,255,255,.7); animation: slideIn .32s var(--ease) both; }
.receipt .chk { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--blue); color: #fff; animation: checkPop .38s var(--ease) both; }
.receipt .lab { font: 400 12.5px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.receipt .val { font: 600 12.5px/1 var(--sans); }
.receipt .edit { margin-left: auto; background: none; border: 0; padding: 0; font: 600 12px/1 var(--sans); color: var(--blue); }

.qcard { flex: 1; min-width: 0; padding: 17px 19px 16px; border: 1.5px solid var(--blue); border-radius: 13px; background: #fff; box-shadow: 0 8px 26px rgba(65,105,225,.11); animation: popIn .38s var(--ease) both; }
.qcard.preview { animation-duration: .4s; }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qdots { display: flex; gap: 4px; }
.qdots i { display: block; width: 17px; height: 3px; border-radius: 2px; background: rgba(32,30,29,.15); transition: background .3s; }
.qdots i.on { background: var(--blue); }
.qcard h3 { margin: 10px 0 0; font: 400 24px/1.2 var(--serif); }
.qcard .sub { margin: 6px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.chip-opt { height: 37px; padding: 0 16px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 999px; background: #fff; color: var(--ink); font: 600 13.5px/1 var(--sans); transition: transform .16s, box-shadow .16s, border-color .16s; }
.chip-opt.def { background: var(--tint); border-color: var(--blue); color: var(--blue-hover); }
.chip-opt:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(65,105,225,.16); border-color: var(--blue); }
.skip { height: 37px; padding: 0 14px; margin-left: auto; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 400 13.5px/1 var(--sans); transition: color .16s; }
.skip:hover { color: var(--ink); }
.sentence { margin: 10px 0 0; font: 400 19px/1.4 var(--serif); }
.query { margin-top: 13px; padding: 11px 13px; border-radius: 9px; background: var(--subtle); font: 400 11px/1.7 ui-monospace, Menlo, monospace; color: var(--muted); overflow-wrap: anywhere; }
.btn-send { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font: 600 14px/1 var(--sans); box-shadow: 0 8px 20px rgba(65,105,225,.28); transition: transform .16s, box-shadow .16s, background .16s; }
.btn-send:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(65,105,225,.36); background: var(--blue-hover); }
.btn-edit { height: 40px; padding: 0 16px; border: 1.5px solid rgba(32,30,29,.28); border-radius: 9px; background: #fff; color: var(--ink); font: 600 14px/1 var(--sans); transition: border-color .16s; }
.btn-edit:hover { border-color: var(--ink); }
.btn-want { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1.5px dashed rgba(32,30,29,.28); border-radius: 9px; background: #fff; color: var(--muted); font: 400 13.5px/1 var(--sans); transition: border-color .16s, color .16s; }
.btn-want:hover { border-color: var(--blue); color: var(--blue-hover); }
.footnote { margin: 12px 0 0; font: 400 11.5px/1.5 var(--sans); color: var(--faint); }

.rcard { flex: 1; min-width: 0; padding: 16px 18px; border: 1px solid rgba(32,30,29,.14); border-radius: 13px; background: #fff; animation: fadeUp .35s var(--ease) both; }
.rc-head { display: flex; align-items: center; gap: 11px; }
.rc-label { font: 600 14px/1 var(--sans); }
.rc-pct { margin-left: auto; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--blue-hover); }
.rc-cancel { height: 28px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.24); border-radius: 7px; background: #fff; color: var(--ink); font: 600 12px/1 var(--sans); transition: border-color .16s, color .16s; }
.rc-cancel:hover { border-color: var(--red); color: var(--red); }
.rc-bar { position: relative; height: 5px; margin-top: 12px; border-radius: 3px; background: rgba(32,30,29,.09); overflow: hidden; }
.rc-bar .fill { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--blue); transition: width .3s linear; }
.rc-bar .sweep { position: absolute; inset: 0; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: sweep 1.25s linear infinite; }
.rc-bar[data-pl] .fill { transition: none; } /* R38: the real search card's fill is moved every frame on the progress loader's curve (data-pl); the tour's .3s transition would lag it */
.rc-counters { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.rc-counters span { font: 400 12px/1.35 var(--sans); color: var(--muted); }
.rc-counters b { display: block; font: 600 17px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.rc-counters b.blue { color: var(--blue-hover); }
.rc-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(32,30,29,.08); }
.rc-grid i { display: block; width: 9px; height: 9px; border-radius: 2px; background: rgba(32,30,29,.09); transition: background .25s; }
.rc-grid i.found { background: rgba(65,105,225,.28); }
.rc-grid i.ok { background: var(--blue); }
.rc-note { margin: 13px 0 0; font: 400 12px/1.5 var(--sans); color: var(--muted); }
/* R38: a turn that only reads (chat.js readingHtml) shows the progress loader in a thread message, in the search card's place. The loader's opacity is the module's, frame by frame (200ms skip, 150ms fade in); the mark beside it waits out the same skip and fades in over the same 150ms, so a fast answer never shows even the mark. The loader sits level with the mark instead of in a pane's padding. */
@keyframes plMark { from { opacity: 0; } to { opacity: 1; } }
.msg.pl-msg > .ava { animation: plMark .15s .2s linear both; }
.msg.pl-msg .pl { padding: 2px 0 6px; }

.summary { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--body); animation: fadeUp .35s var(--ease) both; }
.table { margin-top: 12px; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; overflow: hidden; animation: fadeUp .4s .05s var(--ease) both; }
.thead, .trow-main { display: grid; grid-template-columns: 18px minmax(0,1fr) 104px 86px 132px; gap: 10px; align-items: center; } /* PR-F3a (17 Sept): the figure columns were 50/72/84 and wrapped every real figure (US$2,800 plus its source tag, US$500-US$700); sized to the widest figure the index produces, one line each */
@media (max-width: 900px) { #results-real .thead, #results-real .trow-main { grid-template-columns: 18px minmax(0,1fr) 100px 84px; } #results-real .thead > span:last-child, #results-real .trow-main > .est:last-child { display: none; } } /* PR-F3a: under 900px the estimate column goes, the row stays one line; F's five-width pass (window 6) decides the rest */
.thead { padding: 9px 14px; background: var(--subtle); border-bottom: 1px solid rgba(32,30,29,.1); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--head); } /* F-7: 9.5px at .1em was the smallest type in the product; 11px at .14em is the kit caption, section 05 */
.thead .r { text-align: right; }
.thead[hidden] { display: none; } /* PR-D5: no header row over an empty table (F-2) */
.trow { border-bottom: 1px solid rgba(32,30,29,.08); animation: fadeUp .3s var(--ease) both; }
.trow.watched { background: rgba(65,105,225,.05); }
/* F-36, instance F, window 7. The view has written this class on a lot whose sale has ended since the two-shelf PR, and this file has never had a rule for it, so such a row read exactly like a live one. It is written in two places now, the results table and the history list. Measured on the ground below: title 10.17:1, figures 5.15:1, the provenance tag 4.51:1, all over the floor. No opacity on any text; the photograph only. */
.trow.closed .trow-main { background: var(--subtle); }
.trow.closed .lot-title { color: var(--body); }
.trow.closed .bid, .trow.closed .est { color: var(--muted); font-weight: 400; }
.trow.closed .thumb { filter: grayscale(1); opacity: .6; }
.trow-main { width: 100%; padding: 11px 14px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .16s; }
.trow-main:hover { background: var(--subtle); }
.rank { font: 600 12px/1 var(--sans); color: var(--head); }
.lot { display: flex; align-items: center; gap: 9px; min-width: 0; }
.thumb { flex: none; display: block; object-fit: cover; background: var(--fill); }
.trow-photo { flex: none; display: block; cursor: zoom-in; } /* R38: the results row's photo opens the row and the photo, large (chat.js rowPhotoHtml); the rest of the row still opens and closes it */
.lot-text { min-width: 0; }
.lot-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; min-width: 0; }
.lot-title { font: 400 17px/1.25 var(--serif); overflow-wrap: anywhere; } /* F9, window 7: the lot's name is the row's subject and was set below its own meta line's step. 1.22 is tight for a serif over two lines. */
.watched-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--tint); color: var(--blue-hover); font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: .14em; animation: popIn .34s var(--ease); } /* F1, window 7: one tag size and one tag height; uppercase takes the kit caption tracking, section 05 */
.lot-meta { margin-top: 3px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; } /* F9: one step on the app scale, not a half step off it. */
.lot-meta b { font-weight: 600; color: var(--ink); }
.bid { text-align: right; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bid.na { font: 400 11.5px/1 var(--sans); color: var(--faint); } /* PR-F3a: a bid that reads "not available" is set like the other two columns' absent state (the class arrives with PR-D13) */
.bid-kind { display: block; margin-top: 3px; font: 400 11px/1.3 var(--sans); color: var(--muted); } /* U, 6 October 2026: "opening price" under a figure on a lot with no bids, in Search, Margin and the Assistant's table (chat.js openingNote); set as the Margin row's cost line */
.est { text-align: right; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.est.na { font: 400 11.5px/1 var(--sans); color: var(--faint); }
/* R43 (5 October 2026): a sale's time ("sale starts in 2h 59m") is longer than
   a lot's own ("2d 05h"), so its cell wraps onto two lines rather than run
   under the next column. Only those cells: a lot's own time stays one line. */
.est.sale, .mg-closes.sale { white-space: normal; line-height: 1.25; }
.allin { justify-self: end; padding: 4px 7px; border-radius: 6px; white-space: nowrap; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); background: transparent; }
.expand { padding: 0 14px 13px calc(42px + var(--row-photo) + 9px); display: flex; flex-direction: column; gap: 6px; animation: fadeUp .28s var(--ease) both; } /* F9, corrected in the second block: the indent is the row's own offset plus the photo plus the photo's gap, and it is now computed from the token rather than written out, so the two can no longer disagree. The token is the photo the view actually draws. */
.expand-top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-bottom: 4px; }
.headroom { padding: 3px 9px; border: 1px solid rgba(32,30,29,.15); border-radius: 999px; background: rgba(32,30,29,.06); font: 600 11px/1.4 var(--sans); color: var(--muted); }
.comp { font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.comp b { font: 600 13px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.comp b.na { font: 400 11.5px var(--sans); color: var(--faint); }
.expand p { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--body); }
.expand p b { color: var(--ink); }
.expand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.btn-watch { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--watch-solid); color: #fff; font: 600 13px/1 var(--sans); box-shadow: 0 6px 16px oklch(62% .16 215 / .34); transition: transform .16s, box-shadow .16s; }
.btn-watch:hover { transform: translateY(-2px); }
.btn-watch.on { background: var(--watch-tint); color: var(--watch-ink); box-shadow: none; }
.btn-alert { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border: 1.5px solid var(--alert-edge); border-radius: 8px; background: var(--alert-tint); color: var(--alert-ink); font: 600 13px/1 var(--sans); transition: border-color .16s, transform .16s; }
.btn-alert:hover { border-color: var(--alert-mid); transform: translateY(-2px); }
.btn-exec { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border: 0; border-radius: 8px; background: rgba(32,30,29,.08); color: var(--head); font: 600 13px/1 var(--sans); cursor: not-allowed; }
.sources { margin-left: auto; font: 400 11px/1.4 var(--sans); color: var(--faint); }
/* enriched result cards (instance D, PR-D2, 2026-09-11): the badge, the attributes line, the alert mini-form */
.badge { flex: none; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: .02em; white-space: nowrap; } /* F1: the tag that says whether a figure was measured or copied was the smallest thing on the row and smaller than the meta line under it */
.badge.checked { background: oklch(95.5% .035 150); color: var(--good-ink); }
.badge.unchecked { background: oklch(95.5% .035 70); color: oklch(47% .15 70); }
.badge.index { background: rgba(32,30,29,.07); color: var(--muted); }
.badge.pending { background: rgba(32,30,29,.05); color: var(--faint); }
.lot-meta .attrs { color: var(--body); }
.bid .src, .est .src, .comp .src, .countdown .src { margin-left: 5px; }
.expand p code { padding: 1px 5px; border-radius: 4px; background: var(--tint); color: var(--blue-hover); font: 600 11.5px/1.4 var(--sans); }
.btn-exec.link { cursor: pointer; background: var(--tint); color: var(--blue-hover); text-decoration: none; transition: background .16s, transform .16s; }
.btn-exec.link:hover { background: #e2e8fb; transform: translateY(-2px); }
/* R89 (11 October 2026): Set a maximum is a working button, and the locked Business one leads to Billing; "Execute · soon" keeps the look above. */
.btn-exec.ex-set { cursor: pointer; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(32,30,29,.2); color: var(--ink); transition: box-shadow .16s, transform .16s; }
.btn-exec.ex-set:hover { box-shadow: inset 0 0 0 1.5px rgba(32,30,29,.36); transform: translateY(-2px); }
.btn-exec.ex-set[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue-hover); }
.btn-exec.ex-locked { cursor: pointer; }
.alert-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; padding: 12px 14px; border: 1.5px solid var(--alert-edge); border-radius: 10px; background: var(--alert-tint); animation: popIn .3s var(--ease) both; }
.alert-form label { display: inline-flex; align-items: center; gap: 8px; font: 400 12.5px/1.4 var(--sans); color: var(--alert-ink); }
.alert-form .amt { display: inline-flex; align-items: center; gap: 6px; }
.alert-form input[type="number"] { width: 110px; height: 30px; padding: 0 9px; border: 1.5px solid var(--alert-edge); border-radius: 7px; background: #fff; font: 600 13px/1 var(--sans); color: var(--ink); }
.alert-form input[type="number"]:focus { border-color: var(--alert-solid); } /* F-11: the outline reset is gone. The global :focus-visible ring is the keyboard indicator and the border colour stays as the second cue. */
.alert-form .amt b { font: 600 12px/1 var(--sans); color: var(--alert-ink); }
.alert-form .chk input { width: 15px; height: 15px; accent-color: var(--alert-solid); }
.alert-form .acts { display: inline-flex; gap: 7px; margin-left: auto; }
.alert-form .footnote { flex-basis: 100%; margin: 0; font: 400 11px/1.4 var(--sans); color: var(--muted); }
/* R39 (4 October 2026): an open card's label check line, and "Wrong label?" with its form (label-report.js), at the foot of the chat card and the Margin view's card and under a watchlist row. The button stays quiet until pressed: muted text, underlined. */
.lc-line.quiet { font-size: 11.5px; color: var(--muted); }
.lr-slot { margin-top: 4px; }
.lr-slot:empty { display: none; }
.lr-open { padding: 0; border: 0; background: none; font: 400 12px/1.4 var(--sans); color: var(--muted); text-decoration: underline; text-decoration-color: rgba(32,30,29,.3); text-underline-offset: 3px; cursor: pointer; }
.lr-open:hover { color: var(--ink); text-decoration-color: currentColor; }
.lr { display: flex; flex-direction: column; gap: 9px; max-width: 520px; padding: 12px 14px; border: 1px solid rgba(32,30,29,.14); border-radius: 10px; background: #fff; }
.lr .lr-q { margin: 0; font: 600 13px/1.4 var(--sans); color: var(--ink); }
.lr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lr-chip { height: 30px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.2); border-radius: 999px; background: #fff; font: 600 12px/1 var(--sans); color: var(--body); cursor: pointer; transition: border-color .16s, background .16s, color .16s; }
.lr-chip:hover { border-color: var(--blue); }
.lr-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
.lr-note { display: flex; flex-direction: column; gap: 4px; }
.lr-note-head { display: flex; justify-content: space-between; gap: 10px; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.lr-count { font-variant-numeric: tabular-nums; }
.lr-note textarea { width: 100%; min-height: 56px; padding: 7px 9px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 7px; background: #fff; font: 400 13px/1.45 var(--sans); color: var(--ink); resize: vertical; }
.lr-note textarea:focus { border-color: var(--blue); } /* the global :focus-visible ring stays the keyboard's cue */
.lr .lr-error { margin: 0; font: 400 12px/1.45 var(--sans); color: var(--red); }
.lr-acts { display: flex; gap: 7px; }
.lr .c-btn:disabled { opacity: .45; cursor: default; pointer-events: none; } /* Send before a reason is chosen; a press in flight keeps pressed()'s own look */
.lr-done { display: inline-block; max-width: 100%; margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--body); } /* it takes the focus after Send, so its ring hugs the words */
.summary .asum { display: block; margin-bottom: 4px; font: 400 14px/1.5 var(--sans); color: var(--ink); }
.summary .acounts { display: block; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.summary .anotes { margin: 4px 0 0; padding-left: 18px; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.summary .anote { margin: 2px 0 0; } /* PR-D5: a long note is one line with the rest behind a disclosure (F-2) */
.summary .anote summary { cursor: pointer; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.summary .anote pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
/* PR-D6: the two shelves, a near neighbour, and the standing-want card (13 September) */
.lot-meta .shelf { color: var(--muted); }
.near-pill { flex: none; display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid rgba(32,30,29,.25); border-radius: 999px; font: 600 11px/1 var(--sans); letter-spacing: .14em; color: var(--muted); white-space: nowrap; } /* F1: the outline carries the distinction the shape was carrying, and the padding is a pixel tighter than the filled tags so the border lands on their edge and every tag stands the same height */
.nearcard { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; padding: 10px 12px; border: 1px solid rgba(32,30,29,.12); border-radius: 8px; background: var(--subtle); }
.nearcard b { font: 600 13px/1.45 var(--sans); color: var(--ink); }
.nearcard span { font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.nearcard .nearact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
/* PR-D7: the listing's own photos, hot-linked (13 September) */
.thumb.none { background: none; border: 1px dashed rgba(32,30,29,.14); }
.gallery { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.gallery .shot { display: block; width: 112px; height: 112px; overflow: hidden; border: 1px solid rgba(32,30,29,.12); border-radius: 6px; background: var(--subtle); } /* F9 */
@media (max-width: 1100px) { .gallery .shot { width: 96px; height: 96px; } } /* F9: the main column is 754px at this width and the card's own content box 589px, so the larger tile drops to four across; this one keeps six. R56 (5 October 2026): those were with the 254px tray; it is a drawer over the content now and the main column is 1008px here (measured). The rule is kept. */
.gallery .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .shot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.expand .credit, .expand .nophoto { margin: 2px 0 0; font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
/* PR-D8: the refine panel behind the results header (13 September) */
.summary .rf-open { margin-left: 8px; padding: 1px 8px; border: 1px solid rgba(32,30,29,.18); border-radius: 999px; background: #fff; font: 600 11px/1.6 var(--sans); color: var(--ink); cursor: pointer; }
.summary .rf-open:hover { border-color: var(--blue); color: var(--blue); }
.refine { margin: 6px 0 8px; padding: 12px; border: 1px solid rgba(32,30,29,.12); border-radius: 8px; background: #fff; }
.refine .rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.refine label.rf { display: flex; flex-direction: column; gap: 3px; font: 600 11px/1.4 var(--sans); color: var(--muted); }
.refine label.rf input, .refine label.rf select { padding: 6px 8px; border: 1px solid rgba(32,30,29,.18); border-radius: 6px; font: 400 13px/1.4 var(--sans); color: var(--ink); background: #fff; }
.refine .rf-money { display: flex; gap: 6px; }
.refine .rf-money select { flex: 0 0 92px; }
.refine .rf-money input { flex: 1 1 auto; min-width: 0; }
.refine .wtag { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-style: normal; } /* F1: the kit caption, as the table head already is */
.refine .rf-note { margin: 8px 0 0; font: 400 11.5px/1.5 var(--sans); color: var(--muted); }
.refine .rf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.refine .rf-ok { font: 400 11.5px/1.5 var(--sans); color: var(--muted); }
/* PR-D10: the standing want on an empty or refined result (14 September) */
.nearcard.quiet { background: #fff; border-style: dashed; }
/* R40: the server's own sentence when it searched past the person's filter, as a quiet line straight over the table it describes. */
.widened { margin: 4px 0 -4px; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.summary .atools { display: inline-flex; align-items: center; margin-top: 4px; font: 400 11px/1.4 var(--sans); color: var(--faint); }
.run-card .bar .sweep-only { position: relative; width: 28%; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: sweep 1.25s linear infinite; transition: none; }
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--subtle); }
.tfoot .note { font: 400 12px/1 var(--sans); color: var(--muted); }
.tfoot .acts { display: flex; gap: 7px; }

.watchmsg { flex: 1; min-width: 0; padding: 15px 17px; border: 1px solid rgba(65,105,225,.4); border-radius: 13px; background: var(--tint); }
.wm-head { display: flex; align-items: center; gap: 9px; }
.chk-22 { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; animation: checkPop .4s var(--ease) both; }
.wm-title { font: 600 14px/1 var(--sans); color: var(--ink); }
.watchmsg p { margin: 10px 0 0; font: 400 13px/1.55 var(--sans); color: var(--body); }
.wm-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.composer-wrap { flex: none; padding: 0 30px 70px; }
.composer-wrap.no-guide { padding-bottom: 18px; }
.composer { position: relative; padding: 11px 13px; border: 1.5px solid rgba(32,30,29,.16); border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.composer:hover, .composer:focus-within { border-color: rgba(65,105,225,.6); box-shadow: 0 6px 20px rgba(65,105,225,.09); }
.explainer { position: absolute; left: 0; bottom: 100%; margin-bottom: 9px; z-index: 6; width: 270px; padding: 11px 13px; border: 1px solid rgba(32,30,29,.14); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(32,30,29,.16); animation: popIn .16s var(--ease) both; }
.ex-head { display: flex; align-items: center; gap: 8px; }
.ex-dot { display: block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ex-name { font: 600 12.5px/1 var(--sans); color: var(--ink); }
.ex-sel { margin-left: auto; font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.explainer p { margin: 7px 0 0; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.explainer .foot { margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(32,30,29,.08); font: 400 11px/1 var(--sans); color: var(--faint); }
.composer-row { display: flex; align-items: center; gap: 10px; }
.composer input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font: 400 13.5px/1 var(--sans); color: var(--ink); outline: none; }
.composer input::placeholder { color: var(--faint); }
.send { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; transition: transform .16s, background .16s; }
.send:hover { transform: scale(1.07); background: var(--blue-hover); }
.tool-chips { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(32,30,29,.08); }
.tchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px; border: 1px solid rgba(32,30,29,.16); border-radius: 7px; background: #fff; font-family: var(--sans); font-size: 11.5px; line-height: 1; font-weight: 500; color: var(--muted); white-space: nowrap; transition: transform .16s, box-shadow .16s; }
.tchip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(32,30,29,.12); }
.tchip.on { font-weight: 600; }

/* ── calendar ──────────────────────────────────────────────────────── */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-head h2 { margin: 0; font: 400 26px/1 var(--serif); }
.cal-head .sub { font: 400 12px/1 var(--sans); color: var(--faint); }
.cal-nav { margin-left: auto; display: flex; gap: 5px; }
.cal-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; transition: border-color .16s; }
.cal-btn.wide { width: auto; height: 30px; padding: 0 13px; font: 600 12.5px/1 var(--sans); }
.cal-btn:hover { border-color: var(--ink); }
.cal-wrap { border: 1px solid rgba(32,30,29,.14); border-radius: 12px; background: #fff; overflow: hidden; }
.cal-scroll { overflow-x: auto; }
.cal-days { min-width: 820px; display: grid; grid-template-columns: 52px repeat(7, minmax(0,1fr)); border-bottom: 1px solid rgba(32,30,29,.1); }
.cal-day { padding: 9px 4px; text-align: center; font: 600 10px/1.5 var(--sans); color: var(--faint); }
.cal-day.today { color: var(--blue-hover); }
.cal-day.weekend { color: var(--chev); }
.cal-day b { display: block; margin: 3px auto 0; font: 600 13px/20px var(--sans); width: 22px; height: 22px; border-radius: 50%; color: var(--ink); }
.cal-day.today b { background: var(--blue); color: #fff; }
.cal-day.weekend b { color: var(--faint); }
.cal-grid { position: relative; min-width: 820px; display: grid; grid-template-columns: 52px repeat(7, minmax(0,1fr)); grid-template-rows: repeat(5, 62px); }
.cal-hour { grid-column: 1; padding: 3px 8px 0; text-align: right; font: 400 10px/1 var(--sans); color: var(--faint); border-top: 1px solid rgba(32,30,29,.07); }
.cal-col { grid-row: 1 / 6; border-left: 1px solid rgba(32,30,29,.07); }
.cal-col.today { background: rgba(65,105,225,.04); }
.cal-col.weekend { background: rgba(32,30,29,.02); }
.cal-row { grid-column: 2 / 9; border-top: 1px solid rgba(32,30,29,.07); }
.cal-cell { display: flex; gap: 3px; margin: 3px 4px; min-width: 0; }
.cal-block { flex: 1; min-width: 0; padding: 6px 7px; border-radius: 6px; border-left: 3px solid; overflow: hidden; cursor: pointer; transition: transform .16s, box-shadow .16s; animation: popIn .3s var(--ease) both; }
.cal-block:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(32,30,29,.16); }
.cal-block.watch { background: var(--watch-tint); border-color: var(--watch-mid); color: var(--watch-ink); }
.cal-block.want { background: var(--alert-tint); border-color: var(--alert-mid); color: var(--alert-ink); }
.cal-block .t { font: 600 10.5px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block .m { font: 400 9.5px/1.3 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-now { position: absolute; left: 52px; right: 0; height: 1.5px; background: var(--blue); z-index: 2; }
.cal-now i { position: absolute; left: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulseDot 2s infinite; }
.cal-legend { display: flex; align-items: center; gap: 16px; padding: 10px 15px; border-top: 1px solid rgba(32,30,29,.1); background: var(--subtle); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; font: 400 11.5px/1 var(--sans); color: var(--muted); }
.cal-legend .sw { display: block; width: 10px; height: 10px; border-radius: 2px; border-left: 3px solid; }
.cal-legend .sw.watch { background: var(--watch-tint); border-color: var(--watch-mid); }
.cal-legend .sw.want { background: var(--alert-tint); border-color: var(--alert-mid); }
.cal-legend .cue { gap: 6px; color: var(--blue-hover); }
.cal-legend .now { margin-left: auto; color: var(--faint); }
.cal-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 14px; padding: 13px 16px; border: 1px solid rgba(65,105,225,.35); border-radius: 11px; background: var(--tint); }
.cal-conflict .t { font: 600 13.5px/1.4 var(--sans); color: var(--ink); }
.cal-conflict .d { font: 400 12.5px/1.4 var(--sans); color: var(--body); }
.cal-conflict .btn-32 { margin-left: auto; height: 32px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: 600 12.5px/1 var(--sans); box-shadow: 0 6px 16px rgba(65,105,225,.26); transition: transform .16s, background .16s; }
.cal-conflict .btn-32:hover { transform: translateY(-2px); background: var(--blue-hover); }

/* ── calendar: month, agenda, drawer (instance D, 2026-09-11; ported from public/app.js) ── */
.cal-head h2 { white-space: nowrap; }
.cal-subline { margin: -6px 0 12px; font: 400 12px/1.5 var(--sans); color: var(--faint); }
.cal-modes { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 9px; background: rgba(32,30,29,.06); }
.cal-modes .cal-btn { border-color: transparent; background: transparent; color: var(--muted); }
.cal-modes .cal-btn.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(32,30,29,.12); }
.cal-modes + .cal-nav { margin-left: 0; }
.cal-btn:disabled { opacity: .45; cursor: default; }
.cal-btn:disabled:hover { border-color: rgba(32,30,29,.18); }
.cal-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin-bottom: 14px; }
.cf { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf.grow { flex: 1 1 150px; max-width: 260px; }
.cf span { font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.cf input, .cf select { height: 30px; padding: 0 9px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 7px; background: #fff; color: var(--ink); font: 400 12.5px/1 var(--sans); min-width: 0; max-width: 190px; }
.cf input { max-width: none; }
.cf input:focus, .cf select:focus { border-color: var(--blue); } /* F-26: as F-11, on the four calendar filters. */
.cal-filters .btn-30 { align-self: end; }
.mcal { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .mcal { grid-template-columns: minmax(0,1fr); } }
.mcal-main { min-width: 0; }
.mcal.loading .mcal-grid, .mcal.loading .mcal-agenda { opacity: .55; }
.cal-status { padding: 10px 0 12px; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.cal-status.error { color: var(--red); display: flex; align-items: center; gap: 10px; }
.mcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; padding: 10px; border: 1px solid rgba(32,30,29,.14); border-radius: 12px; background: #fff; }
.mcal-grid .dow { padding: 2px 6px 6px; font: 600 10px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mcell { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 66px; padding: 7px 8px; border: 1px solid rgba(32,30,29,.09); border-radius: 9px; background: var(--subtle); text-align: left; transition: border-color .16s, background .16s, transform .16s; }
.mcell.other { border-color: transparent; background: transparent; }
.mcell:not(.other):hover { border-color: var(--ink); transform: translateY(-1px); }
.mcell .dnum { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px 0 0 -3px; border-radius: 50%; font: 600 12px/1 var(--sans); color: var(--muted); }
.mcell .n { align-self: flex-end; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tint); color: var(--blue-hover); font: 600 11px/1 var(--sans); }
.mcell.heat-1 { background: #fff; }
.mcell.heat-2 { background: var(--tint); }
.mcell.heat-2 .n, .mcell.heat-3 .n { background: var(--blue); color: #fff; }
.mcell.heat-3 { background: var(--tint); border-color: rgba(65,105,225,.35); }
.mcell.today .dnum { background: var(--blue); color: #fff; }
.mcell.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(65,105,225,.18); }
.mcell.locked { background: repeating-linear-gradient(135deg, var(--subtle) 0 6px, #fff 6px 12px); color: var(--faint); }
.mcell.locked .dnum { color: var(--faint); }
.mcal-agenda { border: 1px solid rgba(32,30,29,.14); border-radius: 12px; background: #fff; overflow: hidden; }
.aday { border-bottom: 1px solid rgba(32,30,29,.08); }
.aday:last-child { border-bottom: 0; }
.aday-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 15px 6px; }
.aday-head h3 { margin: 0; font: 400 17px/1.2 var(--serif); }
.aday-head .count { font: 400 11.5px/1 var(--sans); color: var(--faint); }
.mrow { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 15px; border-top: 1px solid rgba(32,30,29,.06); cursor: pointer; transition: background .14s; }
.mrow:hover, .mrow.active { background: var(--tint); }
.mrow .time { font: 600 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.mrow .time small { display: block; font: 400 9.5px/1.2 var(--sans); color: var(--faint); }
.mrow .body { min-width: 0; }
.mrow .title { font: 600 13px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .meta { margin-top: 2px; font: 400 11.5px/1.3 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tag { padding: 3px 7px; border-radius: 999px; background: rgba(32,30,29,.07); font: 600 10px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.tag.type { background: var(--tint); color: var(--blue-hover); }
.tag.stale { background: oklch(95.5% .035 70); color: oklch(47% .15 70); }
.mdrawer { position: sticky; top: 0; padding: 16px 18px 18px; border: 1.5px dashed rgba(32,30,29,.18); border-radius: 12px; background: var(--subtle); }
.mdrawer.open { border: 1.5px solid var(--blue); background: #fff; box-shadow: 0 8px 26px rgba(65,105,225,.11); animation: popIn .3s var(--ease) both; }
.mdrawer h2 { margin: 6px 0 0; font: 400 21px/1.2 var(--serif); overflow-wrap: anywhere; }
.mdrawer h3 { margin: 8px 0 0; font: 400 19px/1.2 var(--serif); }
.mdrawer p { margin: 8px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.mdrawer .orig { font-style: italic; }
.mdrawer .countdown { display: flex; align-items: center; margin-top: 8px; font: 600 12.5px/1 var(--sans); color: var(--blue-hover); }
.mdrawer .kv { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 6px 10px; margin: 12px 0 0; font: 400 12.5px/1.45 var(--sans); }
.mdrawer .kv dt { color: var(--faint); }
.mdrawer .kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.mdrawer .kv em { color: var(--muted); font-style: normal; }
.mdrawer .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mdrawer .acts .btn-34 { text-decoration: none; }
.mdrawer .acts .btn-34.outline[aria-pressed="true"] { border-color: var(--blue); color: var(--blue-hover); }
.mdrawer-list { margin: 8px -18px 0; border-top: 1px solid rgba(32,30,29,.08); }
.mdrawer-list .mrow { grid-template-columns: 64px minmax(0,1fr); padding: 9px 18px; }
.mdrawer-list .mrow .tags { display: none; }
.mdrawer-empty { text-align: center; padding: 22px 6px 26px; }
.mdrawer-empty p { max-width: 240px; margin: 6px auto 0; }

/* ── calendar: the real week, and the agenda from today (R33, 4 October 2026) ── */
.mcal.loading .wk { opacity: .55; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border: 1px solid rgba(32,30,29,.14); border-radius: 12px; background: #fff; overflow: hidden; }
.wk-day { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid rgba(32,30,29,.08); }
.wk-day:first-child { border-left: 0; }
.wk-day.past { background: var(--subtle); }
.wk-day.past .wk-list { opacity: .72; }
.wk-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 10px 8px; border: 0; border-bottom: 1px solid rgba(32,30,29,.08); background: transparent; text-align: left; transition: background .14s; }
.wk-head:hover, .wk-head[aria-pressed="true"] { background: var(--tint); }
.wk-head .dow { font: 600 10px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.wk-head b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; font: 600 13px/1 var(--sans); color: var(--ink); }
.wk-day.today .wk-head b { background: var(--blue); color: #fff; }
.wk-head em { font: 400 11px/1 var(--sans); font-style: normal; color: var(--blue-hover); }
.wk-head .n { margin-left: auto; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--tint); color: var(--blue-hover); font: 600 11px/1 var(--sans); }
.wk-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.wk-card { min-width: 0; padding: 7px 8px; border-left: 3px solid var(--blue); border-radius: 7px; background: var(--tint); cursor: pointer; transition: box-shadow .14s; }
.wk-card:hover, .wk-card.active { box-shadow: 0 0 0 1.5px var(--blue); }
.wk-card.rolling { border-left-color: var(--watch-mid); background: var(--watch-tint); }
.wk-card.rolling:hover, .wk-card.rolling.active { box-shadow: 0 0 0 1.5px var(--watch-mid); }
.wk-card .time { font: 600 11px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.wk-card .time small { margin-right: 3px; font: 400 9.5px/1 var(--sans); color: var(--muted); }
.wk-card .title { margin-top: 2px; font: 600 12px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-card .meta { margin-top: 2px; font: 400 10.5px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-none { margin: 0; padding: 10px; font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
/* Seven columns need the page's width. The week's drawer opens only on a pick
   and sits beside the week from 1500px, under it below that; below 1180px the
   days stack, each day's auctions in a row of cards. */
.mcal.week { grid-template-columns: minmax(0,1fr); }
@media (min-width: 1500px) { .mcal.week.with-drawer { grid-template-columns: minmax(0,1fr) 300px; } }
@media (max-width: 1179px) {
  .wk { grid-template-columns: minmax(0,1fr); }
  .wk-day { border-left: 0; border-top: 1px solid rgba(32,30,29,.08); }
  .wk-day:first-child { border-top: 0; }
  .wk-head { border-bottom: 0; padding-bottom: 2px; }
  .wk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
.aearlier { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 15px; border-bottom: 1px solid rgba(32,30,29,.08); background: var(--subtle); }
.aearlier .fine { font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.aday.past { background: var(--subtle); }
.aday.past .mrow { opacity: .78; }
.anone { padding: 14px 15px; }
.anext { display: flex; justify-content: flex-end; padding: 10px 15px; border-top: 1px solid rgba(32,30,29,.08); }

/* ── watchlist ─────────────────────────────────────────────────────── */
.wl-table { border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; overflow: hidden; }
.wl-row { display: grid; grid-template-columns: 74px 40px minmax(0,1fr) 76px max-content; gap: 11px; align-items: center; padding: 13px 15px; border-bottom: 1px solid rgba(32,30,29,.08); animation: fadeUp .32s var(--ease) both; }
.wl-count { font: 400 20px/1 var(--serif); font-variant-numeric: tabular-nums; }
.wl-bar { height: 3px; margin-top: 7px; border-radius: 2px; }
.wl-bar i { display: block; height: 100%; border-radius: 2px; }
.wl-text { min-width: 0; }
.wl-title { font: 400 15.5px/1.22 var(--serif); overflow-wrap: anywhere; }
.wl-meta { margin-top: 3px; font: 400 11.5px/1.35 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.wl-meta .move { color: var(--blue-hover); font-weight: 600; }
.wl-allin { text-align: right; font: 600 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.wl-actions { display: flex; gap: 6px; justify-content: flex-end; }
.wl-foot { padding: 11px 15px; background: var(--subtle); font: 400 12px/1 var(--sans); color: var(--muted); }
.wl-foot b { color: var(--ink); font-weight: 600; }
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 20px; border: 1.5px dashed rgba(32,30,29,.2); border-radius: 12px; text-align: center; }
.empty .glyph { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(32,30,29,.06); color: var(--faint); }
.empty h3 { margin: 15px 0 0; font: 400 21px/1.2 var(--serif); }
.empty p { margin: 7px 0 0; max-width: 320px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.empty .btn-36 { margin-top: 16px; height: 36px; padding: 0 17px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: 600 13px/1 var(--sans); box-shadow: 0 6px 16px rgba(65,105,225,.26); }

/* ── alerts ────────────────────────────────────────────────────────── */
.al-list { display: flex; flex-direction: column; gap: 11px; }
.al-group { border: 1px solid rgba(32,30,29,.12); border-radius: 11px; background: #fff; overflow: hidden; animation: fadeUp .34s var(--ease) both; }
.al-group.unread { border-color: var(--alert-edge); }
.al-head { display: flex; align-items: center; gap: 12px; padding: 12px 15px; }
.al-group.unread .al-head { background: var(--alert-tint); }
.al-text { min-width: 0; flex: 1; }
.al-title-row { display: flex; align-items: center; gap: 8px; }
.al-title { font: 400 16px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-unread { flex: none; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulseDot 2s infinite; }
.al-sub { margin-top: 2px; font: 400 11.5px/1 var(--sans); color: var(--muted); }
.al-bid { flex: none; text-align: right; }
.al-bid b { display: block; font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--blue-hover); }
.al-bid span { display: block; margin-top: 3px; font: 400 10.5px/1 var(--sans); color: var(--faint); }
.al-event { display: grid; grid-template-columns: 8px 78px minmax(0,1fr) auto; gap: 12px; align-items: baseline; padding: 9px 15px; border-top: 1px solid rgba(32,30,29,.07); }
.al-event i { width: 7px; height: 7px; border-radius: 50%; align-self: center; background: rgba(32,30,29,.25); }
.al-event i.blue, .al-event i.red { background: var(--blue); }
.al-event i.red { background: var(--red); }
.al-event .when { font: 400 11px/1.4 var(--sans); color: var(--faint); }
.al-event .txt { font: 400 12.5px/1.45 var(--sans); color: var(--ink); }
.al-event .delta { font: 600 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.al-event .delta.blue { color: var(--blue-hover); }
.al-event .delta.red { color: var(--red); }
.al-foot { display: flex; align-items: center; gap: 7px; padding: 11px 15px; background: var(--subtle); border-top: 1px solid rgba(32,30,29,.07); }
.al-foot .rule { margin-left: auto; font: 400 11px/1 var(--sans); color: var(--faint); }
.btn-31.primary { border: 0; background: var(--blue); color: #fff; padding: 0 13px; transition: background .16s, transform .16s; }
.btn-31.primary:hover { background: var(--blue-hover); transform: translateY(-1px); border-color: transparent; }

/* ── runs ──────────────────────────────────────────────────────────── */
.run-table { border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; overflow: hidden; }
.run-row { display: grid; grid-template-columns: minmax(0,1fr) 100px 120px 96px; gap: 14px; align-items: center; padding: 13px 15px; border-bottom: 1px solid rgba(32,30,29,.08); }
.run-q { font: 600 13.5px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-detail { margin-top: 3px; font: 400 11.5px/1 var(--sans); color: var(--muted); }
.run-when { font: 400 11.5px/1 var(--sans); color: var(--muted); }
.state-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(32,30,29,.08); color: var(--muted); font: 600 11px/1 var(--sans); justify-self: start; }
.state-pill.complete { background: var(--tint); color: var(--blue-hover); }
.run-row .btn-30 { justify-self: end; }

/* ── automations ───────────────────────────────────────────────────── */
.auto-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 6px; }
.auto-head h2 { margin: 0; font: 400 26px/1 var(--serif); }
.auto-head .sub { font: 400 12px/1 var(--sans); color: var(--faint); }
.auto-head .btn-locked { margin-left: auto; }
.auto-intro { margin: 0 0 16px; max-width: 560px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.flows { display: flex; flex-direction: column; gap: 11px; max-width: 660px; }
.flow { border: 1px solid rgba(32,30,29,.12); border-radius: 12px; background: #fff; overflow: hidden; animation: fadeUp .34s var(--ease) both; }
.flow-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.flow-dot { flex: none; display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(32,30,29,.22); }
.flow-name { font: 600 14px/1.2 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-pill { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(32,30,29,.06); color: var(--muted); font: 600 10.5px/1 var(--sans); }
.flow-last { margin-left: auto; flex: none; font: 400 11.5px/1 var(--sans); color: var(--faint); }
.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 15px 14px; }
.flow-step { padding: 5px 10px; border: 1px solid rgba(32,30,29,.12); border-radius: 7px; background: var(--subtle); font: 500 11.5px/1.3 var(--sans); color: var(--body); }
.flow-foot { display: flex; align-items: center; gap: 7px; padding: 10px 15px; border-top: 1px solid rgba(32,30,29,.07); background: var(--subtle); }
.flow-pause { margin-left: auto; background: none; border: 0; padding: 0; font: 600 12.5px/1 var(--sans); color: var(--muted); transition: color .16s; }
.flow-pause:hover { color: var(--risk-ink); }

/* ── settings ──────────────────────────────────────────────────────── */
.settings { flex: 1; min-height: 0; display: grid; grid-template-columns: 164px minmax(0,1fr); animation: fadeUp .4s var(--ease) both; }
.set-nav { display: flex; flex-direction: column; gap: 1px; padding: 18px 10px; border-right: 1px solid rgba(32,30,29,.08); background: var(--subtle); }
.set-nav .eyebrow { padding: 0 10px 10px; }
.set-nav button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; font-family: var(--sans); font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--muted); text-align: left; transition: background .14s; }
.set-nav button:hover { background: rgba(32,30,29,.05); }
.set-nav button.on { background: rgba(32,30,29,.07); color: var(--ink); font-weight: 600; }
.set-pane { min-width: 0; overflow: auto; padding: 22px 26px 100px; }
.set-body { max-width: 540px; }
.set-body h2 { margin: 0; font: 400 27px/1.1 var(--serif); letter-spacing: -.015em; }
.set-body .sub { margin: 7px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.profile { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; }
.profile .avatar { flex: none; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 16px/1 var(--sans); }
.profile .name { font: 600 15px/1.2 var(--sans); }
.profile .email { margin-top: 3px; font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.seat-pill { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--scan-tint); color: var(--scan-ink); font: 600 11px/1 var(--sans); white-space: nowrap; }
.plan-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding: 18px; border: 1px solid var(--scan-edge); border-radius: 13px; background: var(--scan-tint); }
.plan-hero .eyebrow { color: var(--scan-ink); }
.plan-hero .plan { margin-top: 7px; font: 400 23px/1 var(--serif); }
.plan-hero .renew { margin-top: 6px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.plan-hero .btn-36 { flex: none; height: 36px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--scan-solid); color: #fff; font: 600 13px/1 var(--sans); transition: transform .16s; }
.plan-hero .btn-36:hover { transform: translateY(-2px); }
.plan-hero .btn-36[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.set-group { margin-top: 12px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-top: 1px solid rgba(32,30,29,.07); }
.set-row .label { flex: 1; min-width: 0; font: 400 13.5px/1.35 var(--sans); color: var(--muted); }
.set-row .bar { flex: none; width: 74px; height: 4px; border-radius: 2px; background: rgba(32,30,29,.09); overflow: hidden; }
.set-row .bar i { display: block; height: 100%; border-radius: 2px; }
.set-row .value { flex: none; font: 500 13.5px/1.35 var(--sans); color: var(--ink); text-align: right; white-space: nowrap; }
.set-row .value.muted { color: var(--muted); }
.set-row .value.faint { color: var(--faint); }
.set-row .value.good { color: var(--good-ink); }
.set-action { display: block; width: 100%; margin-top: 10px; padding: 13px 16px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; font-family: var(--sans); font-size: 13.5px; line-height: 1; font-weight: 500; color: var(--ink); text-align: left; transition: background .14s; }
.set-action:hover { background: var(--subtle); }
.set-action.danger { color: var(--risk-ink); }
.set-note { margin: 11px 2px 0; font: 400 11.5px/1.5 var(--sans); color: var(--faint); }

/* ── limits ────────────────────────────────────────────────────────── */
.limits { max-width: 640px; }
.limits h2 { margin: 0; font: 400 26px/1 var(--serif); }
.limits .intro { margin: 8px 0 0; font: 400 13.5px/1.55 var(--sans); color: var(--muted); }
.lim-card { margin-top: 11px; padding: 16px 18px; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; }
.lim-card:first-of-type { margin-top: 18px; }
.lim-card .eyebrow { font-size: 10px; color: var(--head); }
.lim-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.lim-note { margin: 10px 0 0; font: 400 12px/1.45 var(--sans); color: var(--muted); } /* R108 (OCT6-11): where each choice is kept */
.lim-chip { height: 33px; padding: 0 14px; border: 1.5px solid rgba(32,30,29,.2); border-radius: 999px; background: #fff; color: var(--ink); font: 600 12.5px/1 var(--sans); transition: transform .16s, border-color .16s; }
.lim-chip:hover { transform: translateY(-2px); border-color: var(--blue); }
.lim-chip[disabled], .lim-chip[disabled]:hover { opacity: .55; transform: none; border-color: rgba(32,30,29,.2); cursor: default; } /* R108: nothing to press before the account's countries are read */
.lim-chip.on { background: var(--tint); border-color: var(--blue); color: var(--blue-hover); }
.lim-locked { display: flex; align-items: center; gap: 12px; margin-top: 11px; padding: 15px 18px; border: 1.5px dashed rgba(32,30,29,.24); border-radius: 11px; background: var(--subtle); }
.lim-locked .glyph { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(32,30,29,.08); color: var(--head); }
.lim-locked .t { font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
.lim-locked .d { margin-top: 3px; font: 400 12px/1.45 var(--sans); color: var(--muted); }
.soon-pill { flex: none; padding: 5px 11px; border-radius: 999px; background: rgba(32,30,29,.08); color: var(--head); font: 600 11px/1 var(--sans); }

/* ── tray ──────────────────────────────────────────────────────────── */
/* R56 (5 October 2026, Henry: "i want the running now thing to be a pop out tab that you pull in and out not permannetly
   there taking space"): the tray is a drawer, no longer the frame's third column. The dock is pinned to the frame's right
   edge, 0 wide while closed and 280px open; the panel inside is always 280px and pinned to the dock's left edge, so it
   moves with that edge and slides in over the content without pushing it. Nothing is ever parked past the frame's edge:
   a panel translated out of the frame made the frame 280px wider than itself, and overflow: hidden lets a script or a
   text-selection drag scroll the frame sideways onto it (measured 5 October). The handle hangs off the dock's left edge,
   so it sits on the frame's edge while closed and rides on the panel's edge while open, half way down, clear of the
   header's tabs, over the panes' right padding (26px, the thread's 30px), never their content. The shadow is the
   dock's, only while open. Under prefers-reduced-motion the global rule at the top drops the slide. */
.tray-dock { position: absolute; top: 0; right: 0; bottom: 0; z-index: 9; width: 0; border-radius: 0 12px 12px 0; transition: width .24s var(--ease), box-shadow .24s var(--ease); }
.tray-dock.open { width: 280px; box-shadow: 0 16px 48px rgba(32,30,29,.13); }
.tray-clip { position: absolute; inset: 0; overflow: hidden; }
.tray-handle { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; width: 26px; padding: 11px 0; border: 1px solid rgba(32,30,29,.14); border-right: 0; border-radius: 9px 0 0 9px; background: var(--paper); color: var(--muted); font: 600 11.5px/1 var(--sans); box-shadow: -5px 4px 14px rgba(32,30,29,.08); transition: background .16s, color .16s; }
.tray-handle:hover { background: #fff; color: var(--ink); }
.tray-handle:focus-visible { outline-offset: -3px; } /* inside: the frame's edge would cut a ring drawn outside */
.tray-handle .lab { writing-mode: vertical-rl; }
.tray-handle .live { visibility: hidden; } /* kept in the flow, so the handle does not change height when a run starts */
.tray-handle.running .live { visibility: visible; }
.tray-handle svg { flex: none; transition: transform .24s var(--ease); }
.tray-dock.open .tray-handle svg { transform: rotate(180deg); }
.tray { display: flex; flex-direction: column; width: 280px; height: 100%; min-height: 0; background: var(--paper); border-left: 1px solid rgba(32,30,29,.1); } /* R56: a fixed width, so nothing in it rewraps as the dock opens */
.tray-run { padding: 14px 16px 13px; border-bottom: 1px solid rgba(32,30,29,.1); font-size: 16px; line-height: normal; }
.run-card { margin-top: 10px; padding: 11px 12px; border: 1px solid rgba(65,105,225,.4); border-radius: 9px; background: #fff; animation: popIn .34s var(--ease) both; }
.run-card .head { display: flex; align-items: center; gap: 8px; }
.run-card .dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none; animation: pulseDot 1.5s infinite; }
.run-card .name { font: 600 12.5px/1 var(--sans); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-card .bar { height: 3px; margin-top: 10px; border-radius: 2px; background: rgba(32,30,29,.1); overflow: hidden; }
.run-card .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--blue); transition: width .3s linear; }
.run-card .line { margin-top: 8px; font: 400 11px/1.45 var(--sans); color: var(--muted); }
.run-idle { margin-top: 10px; padding: 13px 12px; border: 1px dashed rgba(32,30,29,.2); border-radius: 9px; text-align: center; font: 400 11.5px/1.45 var(--sans); color: var(--faint); }
.tray-history { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; }
.hist-strut { font-size: 16px; line-height: normal; }
.hist-eyebrow { display: inline; font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.hist-eyebrow.later { display: block; margin-top: 16px; }
.hist-item { display: block; width: 100%; margin-top: 8px; padding: 9px 11px; border: 0; border-radius: 8px; background: transparent; text-align: left; text-decoration: none; transition: background .16s; }
.hist-item.later + .hist-item.later { margin-top: 3px; }
.hist-item:hover { background: rgba(32,30,29,.05); }
.hist-item.cur { background: #fff; box-shadow: 0 1px 2px rgba(32,30,29,.07); }
.hist-item .t { font: 400 12.5px/1.3 var(--sans); color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item.cur .t { font-weight: 600; color: var(--ink); }
.hist-item .s { margin-top: 3px; font: 400 11px/1.3 var(--sans); color: var(--faint); }
.hist-note { margin: 10px 11px 0; font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.tray-history .pl { padding: 12px 0 0; } /* R38: the threads load (tray.js accountHistory) in the rail's narrow column: it starts where the eyebrow does and takes the column's width, so the label is not cut */

/* ── overlays ──────────────────────────────────────────────────────── */
.palette-overlay { position: absolute; inset: 0; z-index: 12; display: flex; align-items: flex-start; justify-content: center; padding: 74px 20px 20px; background: rgba(32,30,29,.34); backdrop-filter: blur(3px); animation: popIn .14s ease-out both; }
.palette { width: 100%; max-width: 560px; max-height: 100%; display: flex; flex-direction: column; border: 1px solid rgba(32,30,29,.14); border-radius: 14px; background: #fff; box-shadow: 0 30px 70px rgba(32,30,29,.34); overflow: hidden; animation: fadeUp .2s var(--ease) both; }
.pal-bar { flex: none; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid rgba(32,30,29,.1); color: var(--faint); }
.pal-bar input { flex: 1; min-width: 0; border: 0; padding: 0; background: none; font: 400 15px/1 var(--sans); color: var(--ink); outline: none; }
.pal-bar input::placeholder { color: var(--faint); }
.pal-bar kbd { font: 400 10.5px/1 ui-monospace, Menlo, monospace; color: var(--faint); border: 1px solid rgba(32,30,29,.16); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; }
.pal-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 10px; }
.pal-group { padding: 9px 8px 4px; font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.pal-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; text-align: left; transition: background .14s; }
.pal-item:hover, .pal-item.active { background: rgba(32,30,29,.05); }
.pal-item .dot { flex: none; display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(32,30,29,.22); }
.pal-item .txt { min-width: 0; flex: 1; }
.pal-item .t { display: block; font: 600 13px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item .s { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-empty { padding: 18px 10px 14px; font: 400 12.5px/1.5 var(--sans); color: var(--faint); text-align: center; }
.pal-foot { flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid rgba(32,30,29,.1); background: var(--subtle); font: 400 11px/1 var(--sans); color: var(--faint); }
.pal-foot b { color: var(--muted); font-weight: 600; }
.pal-foot .right { margin-left: auto; }

.toast { position: absolute; left: 50%; bottom: 96px; z-index: 9; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(640px, calc(100% - 48px)); box-sizing: border-box; padding: 11px 18px; border-radius: 22px; background: var(--blue); color: #fff; box-shadow: 0 16px 40px rgba(65,105,225,.4); transform: translateX(-50%); animation: toastIn .34s var(--ease) both; }
/* A line is never a control: a press goes through it to what is under it. Rewind is pressed again and again, and its line sits over the actions row. */
.toast { pointer-events: none; }
/* R61 review (S8): the line is a live region that stays in the page; between lines it is empty and faded */
.toast.idle { opacity: 0; pointer-events: none; animation: none; box-shadow: none; }
.toast .chk { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.25); }
.toast span:last-child { font: 600 13.5px/1.35 var(--sans); white-space: normal; overflow-wrap: anywhere; }
/* R87 (11 October 2026): a refusal of the plan's carries the way to Billing, white on the pill, underlined. */
.toast .toast-act { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast .toast-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }

.guide { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 13px; padding: 8px 8px 8px 17px; border-radius: 999px; background: rgba(32,30,29,.95); color: var(--paper); box-shadow: 0 20px 50px rgba(32,30,29,.4); backdrop-filter: blur(12px); }
.guide .step { display: flex; align-items: center; gap: 10px; }
.guide .num { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,242,242,.5); white-space: nowrap; }
.guide .name { font: 600 13px/1 var(--sans); white-space: nowrap; }
.guide-dots { display: flex; gap: 4px; }
.guide-dots button { display: block; width: 15px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(243,242,242,.24); transition: background .22s, transform .16s; }
.guide-dots button:hover { transform: scaleY(1.8); }
.guide-dots button.done { background: var(--paper); }
.guide-dots button.cur { background: var(--blue); }
.guide .acts { display: flex; gap: 5px; }
.guide-prev { display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: 50%; background: rgba(243,242,242,.14); color: var(--paper); transition: background .16s, transform .16s; }
.guide-prev:hover { background: rgba(243,242,242,.26); transform: scale(1.06); }
.guide-next { display: flex; align-items: center; gap: 7px; height: 33px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 12.5px/1 var(--sans); transition: transform .16s, background .16s; }
.guide-next:hover { transform: scale(1.04); background: #fff; }
.guide-close { display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: 50%; background: none; color: rgba(243,242,242,.6); font-size: 16px; line-height: 1; transition: background .16s, color .16s; }
.guide-close:hover { background: rgba(243,242,242,.14); color: var(--paper); }
.guide-open { position: absolute; right: 30px; bottom: 30px; z-index: 10; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(32,30,29,.95); color: var(--paper); font: 600 12px/1 var(--sans); box-shadow: 0 12px 30px rgba(32,30,29,.35); }

/* gate + notice: same frame, nothing else */
.gate, .notice { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--desk); }
.gate-card { width: 100%; max-width: 440px; padding: 26px 28px 24px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: #fff; box-shadow: 0 16px 48px rgba(32,30,29,.13); text-align: center; }
.gate-card .mark { display: block; width: 40px; height: 40px; margin: 0 auto 20px; } /* R36: the brand tile, square, half its height clear above the heading (this margin and the heading's collapse into one) */
.gate-card .bm-lockup { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0 auto 20px; } /* U, 6 October 2026 (Henry): his blue BlueMesa heads the sign-in card, the mark over the name, as on the home page's grey cards; the notice keeps the brand tile */
.gate-card .bm-lockup img { display: block; width: 104px; height: auto; }
.gate-card .bm-word { font: 400 13px/1 var(--serif); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.gate-card h1 { margin: 14px 0 0; font: 400 26px/1.1 var(--serif); letter-spacing: -.015em; }
.gate-card p { margin: 9px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--muted); }
.gate-card .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.gate-card .btn-34 { text-decoration: none; border-radius: 0; } /* 2026-09-23: the gate's buttons are square (Henry) */
.gate-card .who { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--subtle); border: 1px solid rgba(32,30,29,.1); font: 500 12px/1 var(--sans); color: var(--muted); }
/* R64 (7 October 2026), phone phase 0: the full app opens from 700px wide (measured clean at 700, 744, 768 and 820 in the mobile plan). Below that, and on a phone held sideways (a touch screen under 500px tall), the notice is all the desk shows: nothing behind it is displayed, so nothing draws there, and app.js does not start the app under the same query (phone.js PHONE_QUERY; test/r64-phone.test.mjs checks the two agree). */
.notice { display: none; }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .notice { display: flex; }
  .desk > :not(.notice) { display: none; }
}
@media (max-width: 899px) { .desk { padding: 12px; } .gate-card { padding: 22px 20px 20px; } }


/* ===== [F] window 7, second block (instance F, 2026-09-23) ==========================
   Four things: the row photo as a token, so the expanded card's indent cannot drift from it;
   the two components the conversational assistant introduces; the Margin view; and the way
   back that the Alerts head has been owed since the twentieth.
   Three rules hold throughout. Tags are one size and one height, as the first block set them.
   Anything a person presses is at least 44px in its smallest dimension, which is the touch
   floor and is not the same number as the tag scale. And no rule here paints a state that
   cannot happen: where a figure is absent the element is absent, not grey. ===================== */
:root { --row-photo: 48px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* --row-photo is the photo the row view actually draws, and the expanded card's indent is computed from it, so the two can never disagree. It became 48 when the view's own default did, in the same cut; read it back from the view before changing it, never from a note. --mono is the one exception to the kit's single family and it exists for exactly one string, the lot tag: the markup already reached for it and nothing defined it. */

/* The three constants that were inline. The declarations are the ones the view was already
   drawing, brought onto the tag system's size and height; the paints are the second edition's
   tokens rather than the retired generator's. These land BEFORE the markup drops its style
   attributes: an inline style wins, so until then nothing changes on screen. */
.tag-mono, .tag-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 5px; border: 1px solid rgba(32,30,29,.18); background: #fff; font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--body); white-space: nowrap; }
.tag-chip { cursor: pointer; transition: border-color .16s, color .16s, background .16s; }
.tag-chip:hover { border-color: var(--blue); color: var(--blue-hover); }
.tag-chip:active { background: var(--tint); }
.marg-pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.marg-pill[data-marg="up"] { background: #E0F7E4; color: var(--good-ink); }
.marg-pill[data-marg="down"] { background: #F7E3E3; color: var(--red); }
.marg-pill[data-marg="flat"] { background: rgba(32,30,29,.06); color: var(--muted); }
.gate-lot-title { margin-left: 7px; font: 600 13.5px/1.5 var(--sans); color: var(--ink); }

/* The question the assistant asks, as a block in the thread. The four-question card it replaces
   had an option chip of its own; this is that component, kept, because the person is answering
   the same kind of thing and one product should not own two. */
.q-block { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 4px; }
.q-block p { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink); max-width: 62ch; }
.q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.q-opt { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 16px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 999px; background: #fff; color: var(--ink); font: 600 13.5px/1.2 var(--sans); cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s; }
.q-opt:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(65,105,225,.16); border-color: var(--blue); }
.q-opt .n { font: 400 11px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; } /* the bucket's count. A chip whose count the tool did not return carries no line at all: never a dash, never a zero. */
.q-hint { font: 400 11px/1.4 var(--sans); color: var(--muted); margin-top: 6px; }

/* What actually ran, above the results and above a question once a search has run. Read-only,
   so it is set as a statement rather than as controls, and a value is never shortened: the row
   wraps instead. */
.cstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.cstrip-item { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid rgba(32,30,29,.12); border-radius: 999px; background: var(--subtle); font: 600 11px/1 var(--sans); color: var(--muted); white-space: nowrap; }

/* The Margin view. The band pill is the tag system's, with four paints and no fifth: a lot whose
   margin cannot be computed is unvalued, which is a real state with its own word, not a blank. */
.badge.healthy { background: #E0F7E4; color: var(--good-ink); }
.badge.thin { background: #FFEDD7; color: #8D4500; }
.badge.none { background: #F7E3E3; color: var(--red); }
.badge.unvalued { background: rgba(32,30,29,.07); color: var(--muted); }
.mg-tabs { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; margin-bottom: 14px; border-radius: 999px; background: var(--fill); }
.mg-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; font: 600 12.5px/1 var(--sans); color: var(--muted); cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.mg-tab:hover { color: var(--ink); }
.mg-tab.on { background: #fff; border-color: var(--chev); color: var(--ink); }
.mg-tab .n { font: 400 11px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.mg-head, .mg-row { display: grid; grid-template-columns: 108px minmax(0,1fr) 104px 132px 120px 96px 92px; gap: 10px; align-items: center; } /* R23: the last column is fixed, not auto: each row is its own grid, and an auto column as wide as "Watching" in one row and empty in the head put every column out of line */
.mg-head { padding: 9px 14px; background: var(--subtle); border-bottom: 1px solid rgba(32,30,29,.1); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--head); }
.mg-head .r { text-align: right; }
.mg-row { padding: 11px 14px; border-bottom: 1px solid rgba(32,30,29,.08); }
.mg-row:hover { background: var(--subtle); }
.mg-bid, .mg-value { text-align: right; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-value .sample { display: block; margin-top: 3px; font: 400 11px/1.3 var(--sans); font-weight: 400; color: var(--muted); } /* the sample and its level under the figure, never beside it */
.mg-value .sample.mline { white-space: normal; text-wrap: balance; } /* R41: a model line's name may wrap in the 132px column; the sample above it never does */
.mg-value .sample.fx { white-space: normal; text-wrap: balance; } /* R44: "3 of 4 converted at ECB rates" may wrap in the column too */
.mg-bid.na, .mg-value.na { font: 400 11.5px/1 var(--sans); color: var(--faint); }
.mg-bid .mg-cost { display: block; margin-top: 3px; font: 400 11px/1.3 var(--sans); color: var(--muted); white-space: normal; } /* R45: under the bid, the cost on a platform's terms and what it is ("bid + premium + VAT £1,300"), wrapping in the column; its title says what it includes */
.mg-bid .mg-cost .mg-cost-f { white-space: nowrap; } /* R45 review: the figure never breaks; the words break before a "+" (margins.js costFigureHtml) */
.terms-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* R45 review: "its terms" links to the page the platform's terms were read on */
.mg-margin { display: flex; justify-content: flex-end; }
.mg-closes { text-align: right; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-acts { display: flex; justify-content: flex-end; }
.mg-empty { padding: 26px 14px; font: 400 13px/1.55 var(--sans); color: var(--muted); }
@media (max-width: 1100px) { .mg-head, .mg-row { grid-template-columns: minmax(0,1fr) 104px 120px 92px; } .mg-head > .drop, .mg-row > .drop { display: none; } }
/* R23 (3 October 2026): the Margin view's own pieces, beside F's grid. The table is rebuilt when a tab, a sort or a watch changes, so it does not replay the results table's entrance. */
.mg-table { animation: none; }
/* R38 (4 October 2026): a table being read keeps its frame and head, with the progress loader where the rows go (.mg-stage; the view holds the height it replaced). The whole row opens, so the whole row reads as pressable; the row's photo opens the photo. */
.mg-stage-cell { padding: 0 14px; } /* the rows' inset; the loader keeps its own 360px, so a label is never cut short */
.mg-row, .sc-row { cursor: pointer; }
.mg-thumb { display: block; flex: none; line-height: 0; border-radius: 6px; }
.mg-thumb[data-photos] { cursor: zoom-in; }
.mg-value .sample { padding: 0; border: 0; border-radius: 0; background: none; letter-spacing: normal; text-transform: none; } /* .sample is also the Sample data marker (line 65): its pill must not reach the value's sample line */
.mg-plat { font: 400 12px/1.35 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-lot { display: flex; align-items: center; gap: 10px; min-width: 0; border-radius: 6px; cursor: pointer; }
.mg-lot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mg-lot-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.mg-title { font: 400 13px/1.35 var(--sans); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mg-sort { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.mg-sort:hover, .mg-sort.on { color: var(--ink); }
.mg-sort.on { text-decoration: underline; text-underline-offset: 3px; }
.mg-watch { width: 92px; padding: 0; }
.mg-watch.on { border-color: transparent; background: var(--watch-tint); color: var(--watch-ink); }
.mg-meta { display: none; font: 400 12px/1.35 var(--sans); color: var(--muted); }
.mg-row.open { background: var(--subtle); }
.mg-row.closed .mg-title, .mg-row.closed .mg-bid { color: var(--muted); }
.mg-row.closed .thumb { filter: grayscale(1); opacity: .6; }
.mg-card { padding: 2px 14px 14px 132px; border-bottom: 1px solid rgba(32,30,29,.08); background: var(--subtle); }
.mg-card p { margin: 6px 0 0; font: 400 12.5px/1.45 var(--sans); color: var(--body); }
.mg-card .nophoto { color: var(--muted); }
.mg-note { margin: 10px 2px 0; max-width: 760px; font: 400 11.5px/1.5 var(--sans); color: var(--muted); }
@media (max-width: 1100px) { .mg-card { padding-left: 14px; } .mg-meta { display: block; } } /* the platform and the closing time move under the title when their columns drop */
/* R25 (3 October 2026): the scanner. Its bar (window, view, search), its group rows, and the outlined pill for a Margin against the low estimate, which is never a bid band's filled one. */
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.sc-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--fill); }
.sc-opt { min-height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; font: 600 12px/1 var(--sans); color: var(--muted); cursor: pointer; transition: background .16s, color .16s; }
.sc-opt:hover { color: var(--ink); }
.sc-opt.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(32,30,29,.08); }
.sc-q { flex: 1 1 220px; max-width: 320px; height: 34px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 8px; background: #fff; font: 400 13px/1 var(--sans); color: var(--ink); }
.sc-q:focus { outline: none; border-color: var(--blue); }
.sc-table { animation: none; }
.sc-head, .sc-row { display: grid; grid-template-columns: minmax(0,1fr) 64px 96px 150px 132px 132px 24px; gap: 10px; align-items: center; }
.sc-head { padding: 9px 14px; background: var(--subtle); border-bottom: 1px solid rgba(32,30,29,.1); font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--head); }
.sc-head .r { text-align: right; }
.sc-row { padding: 11px 14px; border-bottom: 1px solid rgba(32,30,29,.08); }
.sc-row:hover, .sc-row.open { background: var(--subtle); }
.sc-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; border-radius: 6px; cursor: pointer; }
.sc-name:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sc-label { font: 600 13.5px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sub { font: 400 11.5px/1.35 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-n, .sc-next, .sc-bids { text-align: right; font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-bids { font-weight: 400; color: var(--body); overflow: hidden; text-overflow: ellipsis; }
.sc-bids.na { font-size: 11.5px; color: var(--faint); }
.sc-mixed { font: 400 11.5px/1 var(--sans); color: var(--faint); }
.sc-chev { display: inline-grid; place-items: center; color: var(--faint); transition: transform .16s; }
.sc-row.open .sc-chev { transform: rotate(90deg); }
.sc-lots { padding: 4px 14px 14px; border-bottom: 1px solid rgba(32,30,29,.08); background: var(--subtle); }
.badge.est { padding: 2px 7px; border: 1px dashed currentColor; background: transparent; color: var(--muted); letter-spacing: 0; }
.badge.est.healthy { color: var(--good-ink); }
.badge.est.thin { color: #8D4500; }
.badge.est.none { color: var(--red); }
/* R39 (4 October 2026): a lot's label check (label-report.js). "Label check" is the estimate pill's size and type, outlined solid and muted, never a band's paint; "Label disputed" is the unvalued pill. Beside the Margin, the pair wraps where the column is narrow. */
.badge.lc-pill[data-lc="pending"] { padding: 2px 7px; border: 1px solid rgba(32,30,29,.28); background: transparent; color: var(--muted); letter-spacing: 0; }
.mg-margin.lc { flex-wrap: wrap; gap: 4px; }
@media (max-width: 1100px) { .sc-head, .sc-row { grid-template-columns: minmax(0,1fr) 56px 132px 24px; } .sc-head > .drop, .sc-row > .drop, .sc-head > :nth-child(3), .sc-row > .sc-next { display: none; } }
/* R114 (14 October 2026): a lot's condition, as its own listing states it (condition.js). One quiet pill, the same on
   every surface: outlined as the label check's is, in sentence case at the kit's 11px, its hover the listing's words.
   A lot's open card says it in a line ("Condition: Very good", the listing's words after it in the muted grey). Under a
   Margin row's title it shares a line with the lot's code; on Discover's strip, which starts over the photo, it has the
   strip's own light ground, as the closing time and the code beside it have, so a light photo never washes it out. */
.cond-tag { flex: none; position: relative; display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid rgba(32,30,29,.24); border-radius: 999px; background: #fff; font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: 0; color: var(--body); white-space: nowrap; }
.cond-tag[title] { cursor: help; }
.cond-line .cond-words { color: var(--muted); overflow-wrap: anywhere; }
.mg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.g-strip .cond-tag { border-color: rgba(243,242,242,.92); background: rgba(243,242,242,.92); color: var(--body); }
.g-card.band .g-strip .cond-tag { border-color: rgba(32,30,29,.24); background: #fff; color: var(--body); }
/* The scanner's condition filter, as Chrono24's is: a control in the bar, as tall as the search box beside it, and the
   list it opens under it, the seven grades and then Not stated, each a row whose box is ticked when it is chosen. */
.cd-filter { position: relative; flex: none; }
.cd-ctl { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 8px; background: #fff; font: 600 12px/1 var(--sans); color: var(--body); white-space: nowrap; transition: border-color .16s; }
.cd-ctl:hover { border-color: rgba(32,30,29,.34); }
.cd-ctl.on { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
.cd-chev { display: inline-grid; place-items: center; transform: rotate(90deg); transition: transform .16s; }
.cd-ctl.open .cd-chev { transform: rotate(-90deg); }
.cd-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid rgba(32,30,29,.14); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(32,30,29,.18); }
.cd-opt { position: relative; display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: 600 12.5px/1 var(--sans); color: var(--ink); text-align: left; }
.cd-opt:hover { background: var(--subtle); }
.cd-opt[data-arg="unstated"] { margin-top: 9px; }
.cd-opt[data-arg="unstated"]::after { content: ""; position: absolute; left: 10px; right: 10px; top: -5px; border-top: 1px solid rgba(32,30,29,.1); }
.cd-box { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid rgba(32,30,29,.34); border-radius: 4px; background: #fff; color: #fff; }
.cd-opt.on .cd-box { border-color: var(--blue); background: var(--blue); }
.cd-opt i { margin-left: auto; font-style: normal; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--muted); }
.cd-clear { align-self: flex-start; margin: 4px 0 2px 10px; padding: 6px 0; border: 0; background: none; font: 600 12px/1 var(--sans); color: var(--blue-hover); }
.cd-clear:hover { text-decoration: underline; }

/* The way back from a view that was reached from another one. Henry, 20 September: a big back
   button. It is a control, so it takes the touch floor rather than the row-button height. */
.view-head .c-back { min-height: 44px; padding: 0 15px; gap: 7px; font: 600 13px/1 var(--sans); }
.view-head .c-back svg { flex: none; }
.view-head .c-back:hover { border-color: var(--blue); color: var(--blue-hover); }
/* ===== end [F] window 7 ============================================================= */

/* ===== [C] users / alerts / usage (instance C, watches build 2026-09-11) =====
   Styles for views/watchlist.js, alerts.js, runs.js, settings.js and public/admin/*
   go below this line and nowhere else in this file (D owns everything above). */

/* Shared, used by all four [C] views. Tokens only, no new colours. */
.c-na { color: var(--faint); font-style: italic; }
.c-dot { color: var(--chev); margin: 0 5px; }
.c-flag { color: var(--red); }
.c-q { font-weight: 600; }
.c-loading { padding: 26px 0; color: var(--faint); font-size: 12.5px; }
.c-loading::after { content: "…"; }
/* R38 (4 October 2026): the progress loader (progress-loader.js), Henry's "Progress Loader 2b" handoff, where the loading line used to be. Tokens only: the label --muted, the figure --ink in the serif, the % and the fill --blue, the track --fill. The view sets opacity and the fill's width each frame. A reduced-motion reader gets the track and no counting figure. */
.pl { box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; padding: 26px 0; }
.pl.pl-c { margin: 0 auto; }
.pl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }
.pl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pl-fig { flex: none; font: 400 22px/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.pl-pc { margin-left: 2px; font: 500 11px/1 var(--sans); color: var(--blue); }
.pl-track { position: relative; height: 3px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.pl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--blue); }
.pl-in { animation: fadeUp .35s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .pl-fig { display: none; } }
.c-error { padding: 16px 18px; background: #fff; border: 1px solid rgba(155,44,44,.3); border-left: 3px solid var(--red); border-radius: 8px; }
.c-error p { margin: 0 0 10px; color: var(--red); }

.c-btn { height: 30px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 7px; background: #fff; font: 600 12.5px/1 var(--sans); color: var(--ink); transition: border-color .16s, background .16s, color .16s; }
.c-btn:hover { border-color: var(--blue); background: var(--tint); }
.c-btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; border-radius: 6px; }
.c-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.c-btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.c-btn.danger:hover { border-color: var(--red); background: #fff; color: var(--red); }

.c-tabs { display: inline-flex; gap: 2px; }
.c-tabs button { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; font: 600 12px/1 var(--sans); color: var(--muted); }
.c-tabs button[aria-selected="true"] { background: rgba(32,30,29,.09); color: var(--ink); }

.c-switch { position: relative; width: 34px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 999px; background: var(--fill); transition: background .16s; cursor: pointer; }
.c-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(32,30,29,.25); transition: transform .16s var(--ease); }
.c-switch.on { background: var(--blue); }
.c-switch.on i { transform: translateX(14px); }

.c-pill { display: inline-block; padding: 1px 8px; border: 1px solid rgba(32,30,29,.2); border-radius: 999px; font: 600 10.5px/1.5 var(--sans); color: var(--muted); text-transform: lowercase; }
.c-pill.sent, .c-pill.done { border-color: color-mix(in oklch, var(--good-ink) 45%, transparent); color: var(--good-ink); }
.c-pill.failed, .c-pill.error { border-color: color-mix(in oklch, var(--red) 45%, transparent); color: var(--red); }
.c-pill.queued, .c-pill.running { border-color: color-mix(in oklch, var(--blue) 45%, transparent); color: var(--blue-hover); }

.c-ceil { height: 32px; padding: 0 12px; border: 1.5px dashed rgba(32,30,29,.22); border-radius: 7px; background: transparent; font: 600 13.5px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.c-ceil:hover { border-style: solid; border-color: var(--blue); }
.c-ceil.over { border-color: color-mix(in oklch, var(--risk-ink) 55%, transparent); color: var(--risk-ink); border-style: solid; }
.c-ceil-edit { display: flex; align-items: center; gap: 5px; }
.c-ceil-edit input { width: 104px; height: 32px; padding: 0 8px; border: 1.5px solid var(--blue); border-radius: 7px; background: #fff; font: 600 13.5px/1 var(--sans); color: var(--ink); }

/* Watchlist */
.c-wl-table { background: #fff; border: 1px solid rgba(32,30,29,.1); border-radius: 10px; overflow: hidden; }
.c-wl-row { display: grid; grid-template-columns: 104px 96px minmax(0,1fr) 196px 168px; align-items: center; gap: 18px; padding: 16px 18px; border-top: 1px solid rgba(32,30,29,.07); } /* PR-F3b (17 Sept, Henry): the rows as they are, bigger: 18px gaps, 16px padding, the type a step up. D8 (20 Sept): the photo 72 -> 96, and the bid, the value and the margin share ONE figures column instead of taking three more. Measured at 1240px the row had 91.6px left for its title (grid was 120/72/91.6/140/132/158.4 in 840): three more columns put it under zero. The ceiling moved into the actions cell, which now wraps. F4 settles the final layout. */
.c-wl-row:first-child { border-top: 0; }
.c-wl-row:hover { background: var(--subtle); }
.c-wl-when { font: 600 13px/1.3 var(--sans); color: var(--watch-ink); }
.c-wl-when.soon { color: var(--risk-ink); }
.c-wl-when.near { color: oklch(47% .15 70); }
.c-wl-when.over { color: var(--faint); }
.c-wl-text { min-width: 0; }
.c-wl-title { font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* PR-F3b: two lines then an ellipsis, instead of one line cut at the width */
.c-wl-title a { color: inherit; text-decoration: none; }
.c-wl-title a:hover { text-decoration: underline; }
.c-wl-meta { margin-top: 4px; font: 400 12.5px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; } /* D8: at 900px the text column is 32px and an unbroken meta line pushed the row past its cell. R56 (5 October 2026): 458px since R51's row and the tray's move to a drawer (measured); an unbroken line still needs this */
.c-wl-bid { text-align: right; font-variant-numeric: tabular-nums; }
.c-wl-bid b { display: block; font: 600 16px/1.2 var(--sans); white-space: nowrap; }
.c-wl-bid span { font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.c-wl-ceiling { text-align: right; }
.c-wl-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
/* ── D8 (20 Sept): the figures column ────────────────────────────
   Instance D's declarations, written because F4 had not landed at the demo
   cut and the row needed to be correct before it is beautiful. They use only
   variables app.css already defines and add no new colour. F: replace them. */
.c-wl-figures { display: grid; gap: 7px; justify-items: end; text-align: right; min-width: 0; }
.c-val { display: block; padding: 0; border: 0; background: none; text-align: right; font: inherit; color: inherit; cursor: pointer; }
.c-val b { display: block; font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; border-bottom: 1px dashed rgba(32,30,29,.3); }
.c-val span { font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.c-val:hover b { color: var(--blue); border-bottom-color: var(--blue); }
.c-val.empty { font: 600 13px/1.3 var(--sans); color: var(--blue); border-bottom: 1px dashed currentColor; }
.c-val-set { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; align-items: baseline; }
.c-val-chip { padding: 2px 8px; border: 1px solid rgba(32,30,29,.18); border-radius: 999px; background: #fff; font: 600 11px/1.6 var(--sans); color: var(--ink); white-space: nowrap; cursor: pointer; }
.c-val-chip:hover { border-color: var(--blue); color: var(--blue); }
.c-val-edit { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.c-val-edit input { width: 96px; height: 30px; padding: 0 8px; border: 1.5px solid var(--blue); border-radius: 7px; background: #fff; font: 600 13px/1 var(--sans); color: var(--ink); text-align: right; }
.c-val-edit b { font: 600 11px/1 var(--sans); color: var(--muted); }
.c-val-hint { flex-basis: 100%; text-align: right; font: 400 10.5px/1.4 var(--sans); color: var(--faint); }
.c-wl-margin { text-align: right; }
.c-wl-margin .c-marg-label { display: block; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--head); }
.c-wl-margin b { display: block; font: 600 20px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.c-wl-margin.up b { color: var(--good-ink); }
.c-wl-margin.down b { color: var(--risk-ink); }
.c-wl-margin.live b { opacity: .7; }
.c-wl-margin .c-marg-basis { display: block; font: 400 10.5px/1.35 var(--sans); color: var(--faint); }
.c-ceil-sub { display: block; flex-basis: 100%; margin-top: -2px; font: 400 10px/1.3 var(--sans); color: var(--faint); text-align: right; }
.c-wl-text .ex-rowmax { margin-top: 3px; font: 600 12px/1.4 var(--sans); color: var(--ink); } /* R108 (Henry's R89-3): a row's approved maximum, under its meta line, at every width */
.c-wl-actions .c-btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; } /* PR-F3b: the row's buttons a step up with the row */
.c-wl-alerts { grid-column: 1 / -1; } /* D13 (20 Sept): the create-alert panel opens inline under its row and spans it; the panel itself reuses .alert-form and adds nothing here */
/* R39 (4 October 2026): the label check on a row that never opens: the API's words under the meta line, the pill under the Margin, and the report form under the row, spanning it as the alerts do, at the right under the button that opened it. */
.c-wl-text .lc-line { margin-top: 6px; font: 400 12px/1.45 var(--sans); color: var(--body); }
.c-wl-text .lc-line.quiet { font-size: 11.5px; color: var(--muted); }
.c-wl-margin .lc-pill { margin: 4px 0 2px; }
.c-wl-report { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.c-wl-foot { padding: 12px 18px; border-top: 1px solid rgba(32,30,29,.07); background: var(--subtle); font: 400 12.5px/1.4 var(--sans); color: var(--muted); }

/* Alerts */
.c-al-rules, .c-al-log { background: #fff; border: 1px solid rgba(32,30,29,.1); border-radius: 10px; overflow: hidden; }
.c-al-rule { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid rgba(32,30,29,.07); }
.c-al-rule:first-child { border-top: 0; }
.c-al-rule.off { opacity: .55; }
.c-al-rule-text { min-width: 0; flex: 1; }
.c-al-rule-kind { font: 600 13px/1.3 var(--sans); }
.c-al-rule-scope { margin-top: 2px; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.c-al-rule-actions { display: flex; gap: 6px; }
.c-al-log-row { display: grid; grid-template-columns: 96px minmax(0,1fr) 92px 180px; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid rgba(32,30,29,.07); }
.c-al-log-row:first-child { border-top: 0; }
.c-al-log-when { font: 400 11.5px/1.3 var(--sans); color: var(--muted); }
.c-al-log-text { min-width: 0; }
.c-al-log-title { font: 600 13px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-al-log-title a { color: inherit; text-decoration: none; }
.c-al-log-title a:hover { text-decoration: underline; }
.c-al-log-meta { margin-top: 2px; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.c-al-log-note { font: 400 11px/1.4 var(--sans); color: var(--faint); overflow: hidden; text-overflow: ellipsis; }

/* Runs */
.c-run-table { background: #fff; border: 1px solid rgba(32,30,29,.1); border-radius: 10px; overflow: hidden; }
.c-run-row { display: grid; grid-template-columns: minmax(0,1fr) 86px 76px 46px; align-items: center; gap: 12px; padding: 4px 14px; border-top: 1px solid rgba(32,30,29,.07); }
.c-run-row:first-child { border-top: 0; }
.c-run-row.open { background: var(--subtle); }
.c-run-main { display: block; width: 100%; min-width: 0; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.c-run-q { display: block; font: 600 13.5px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-run-detail { display: block; margin-top: 2px; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.c-run-when { font: 400 11.5px/1.3 var(--sans); color: var(--muted); }
.c-run-units { text-align: right; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); }
.c-run-panel { padding: 4px 14px 16px; background: var(--subtle); border-top: 1px solid rgba(32,30,29,.07); }
.c-run-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; }
.c-run-panel-q { font: 600 13px/1.3 var(--sans); }
.c-run-panel-meta { margin-top: 2px; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.c-run-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.c-run-sources span { padding: 2px 9px; border: 1px solid rgba(32,30,29,.14); border-radius: 999px; background: #fff; font: 400 11px/1.5 var(--sans); color: var(--muted); }
.c-timeline { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid rgba(32,30,29,.1); }
.c-timeline li { display: grid; grid-template-columns: 82px 128px minmax(0,1fr); gap: 10px; align-items: baseline; padding: 5px 0; position: relative; }
.c-timeline li::before { content: ""; position: absolute; left: -19px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--chev); }
.c-timeline li.c-tl-error::before { background: var(--red); }
.c-timeline li.c-tl-comp::before, .c-timeline li.c-tl-check::before { background: var(--watch-mid); }
.c-tl-when { font: 400 11px/1.5 var(--sans); color: var(--faint); }
.c-tl-kind { font: 600 11.5px/1.5 var(--sans); color: var(--body); }
.c-tl-detail { font: 400 12px/1.5 var(--sans); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.c-tl-detail code { font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 1px solid rgba(32,30,29,.12); border-radius: 4px; padding: 0 4px; }

/* Settings controls */
.c-set-ctl { display: flex; align-items: center; gap: 12px; }
.c-set-ctl .label { flex: 1; min-width: 0; }
.c-set-note { font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.c-choice { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--fill); }
.c-choice button { height: 26px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; font: 600 11.5px/1 var(--sans); color: var(--muted); }
.c-choice button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(32,30,29,.12); }
.c-quiet { display: flex; align-items: center; gap: 6px; }
.c-quiet input { height: 28px; padding: 0 8px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 7px; background: #fff; font: 600 12px/1 var(--sans); color: var(--ink); }

@media (max-width: 1100px) {
  .c-wl-row { grid-template-columns: 104px minmax(0,1fr) 132px auto; gap: 14px; padding: 14px 16px; } /* D8: the figures column is one track here too; it carries the bid and the value, and the margin drops with the photo and the ceiling */
  .c-wl-row .thumb, .c-wl-ceiling, .c-wl-margin, .c-val-hint { display: none; }
  .c-al-log-row { grid-template-columns: 84px minmax(0,1fr) 84px; }
  .c-al-log-note { display: none; }
  .c-timeline li { grid-template-columns: 74px minmax(0,1fr); }
  .c-tl-kind { grid-column: 2; }
  .c-tl-detail { grid-column: 2; }
}

/* ===== [G] Discover, the swipe deck (instance G, watches build 2026-09-23) =====
   Window 7, items 2 to 4: the card is the image, the filters are one pinned
   row, and what is left is deck. This is G's own marked block and it is
   rewritten in full here rather than patched, because the card's box model
   changes (the photo was a flex child with the body under it; it is now the
   frame with the figures over it). Nothing above this line moves.

   STRUCTURE ONLY. The sizes, the colours and the type are F10's (item 4:
   "the kit's sizes, colours and type come from F10 and F's commit lands on
   top of yours"). Existing tokens only, no new colours: --paper for text on
   the image, rgba of --ink for the gradient it sits on, --watch-* for the
   Watch side, --risk-ink for Pass.

   Two things F10 chooses by swapping one class, with no change to G's file:
     .g-card          the figures overlay the image on a gradient  (default)
     .g-card.band     the figures sit in a compact band under it
   and the actions row is under the stage by default; `.g-stage.acts-over`
   floats it over the foot of the stack. G's reading, in its status note: the
   band loses the point of an image-led card, and an overlaid actions row
   covers the figures that just moved to the bottom of it, so the default is
   overlay figures with the actions under the stage. */

/* the pane: the one view that must not scroll, so the deck gets the height */
#discover { display: flex; flex-direction: column; overflow: hidden; padding: 20px 0 0; }
#discover .view-head { flex: none; padding: 0 26px; margin-bottom: 10px; }

/* ── item 3: one flat row, pinned ─────────────────────────────────────── */
/* No overflow on the bar at desktop widths: a popover has to escape it, and
   overflow-x:auto forces overflow-y to auto too, which would clip it. Each
   control is capped instead, so the row cannot grow past the pane however
   many countries are chosen. Below 560px the bar does scroll sideways and
   the popover goes fixed, which escapes the scroll container. */
.g-bar { position: sticky; top: 0; z-index: 4; flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 10px 26px 12px; background: #fff; border-bottom: 1px solid rgba(32,30,29,.09); }
.g-ctl-wrap { position: relative; flex: none; }
.g-ctl { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 30px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 12px/1 var(--sans); color: var(--body); }
.g-ctl:hover:not([disabled]) { border-color: rgba(32,30,29,.3); }
.g-ctl.on { border-color: var(--watch-solid); background: var(--watch-tint); color: var(--watch-ink); }
.g-ctl.open { border-color: var(--ink); }
.g-ctl[disabled] { opacity: .8; cursor: default; }

.g-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 12; min-width: 210px; max-width: 420px; max-height: 60vh; overflow-y: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; border: 1px solid rgba(32,30,29,.14); border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(32,30,29,.18); }
.g-pop-none { flex: 1 0 100%; margin: 0; font: 400 11.5px/1.4 var(--sans); color: var(--faint); }

.g-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1.5px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 11.5px/1 var(--sans); color: var(--body); }
.g-chip i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--faint); }
.g-chip:hover:not([disabled]) { border-color: rgba(32,30,29,.3); }
.g-chip.on { border-color: var(--watch-solid); background: var(--watch-tint); color: var(--watch-ink); }
.g-chip.on i { color: var(--watch-ink); }
.g-chip.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.g-clear { height: 28px; padding: 0 8px; border: 0; background: transparent; font: 600 11.5px/1 var(--sans); color: var(--muted); text-decoration: underline; }
.g-ceil-edit { display: inline-flex; align-items: center; gap: 6px; }
.g-ceil-edit input { height: 28px; padding: 0 8px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 7px; background: #fff; font: 600 12px/1 var(--sans); color: var(--ink); }
.g-ceil-edit input[name="g-max-bid"] { width: 104px; }
.g-ceil-edit input[name="g-currency"] { width: 62px; text-transform: uppercase; }

/* ── item 4: the big viewport ─────────────────────────────────────────── */
.g-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 20px 0; }
.g-stack { position: relative; flex: 1; min-height: 0; width: min(480px, 100%); margin: 0 auto; }
.g-foot { flex: none; display: flex; justify-content: space-between; gap: 12px; padding: 8px 26px 12px; font: 400 11.5px/1.4 var(--sans); color: var(--faint); font-variant-numeric: tabular-nums; }
.g-foot-r { white-space: nowrap; }

/* ── item 2: the card is the image ───────────────────────────────────── */
.g-card { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(32,30,29,.14); border-radius: 14px; background: var(--fill); box-shadow: 0 10px 30px rgba(32,30,29,.14); transform: translateY(calc(var(--i) * 10px)) scale(calc(1 - var(--i) * .035)); transition: transform .22s var(--ease), opacity .22s var(--ease); }
.g-card:not(.top) { pointer-events: none; }
.g-card.top { z-index: 3; touch-action: pan-y; cursor: grab; }
.g-card.dragging { transition: none; cursor: grabbing; }
.g-card.closed .g-strip { opacity: .72; }

.g-photo { position: absolute; inset: 0; overflow: hidden; }
.g-photo-fallback { position: absolute; inset: 0; background: var(--fill); }
.g-nophoto { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 20px; text-align: center; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }

/* the mosaic: the layout comes from mosaicLayout(n, aspects), one class per
   kind, so the grid here and the tested function cannot disagree */
.g-mosaic { position: absolute; inset: 0; display: grid; gap: 2px; }
.g-mosaic.single { grid-template-areas: "a1"; }
.g-mosaic.side2 { grid-template-columns: 1fr 1fr; grid-template-areas: "a1 a2"; }
.g-mosaic.stack2 { grid-template-rows: 1fr 1fr; grid-template-areas: "a1" "a2"; }
.g-mosaic.hero2 { grid-template-columns: 1.9fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a1 a2" "a1 a3"; }
.g-mosaic.hero3 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 92px; grid-template-areas: "a1 a1 a1" "a2 a3 a4"; }
.g-tile.a1 { grid-area: a1; } .g-tile.a2 { grid-area: a2; } .g-tile.a3 { grid-area: a3; } .g-tile.a4 { grid-area: a4; }

/* a tile, and the single frame the zoomed view and the cards behind use:
   a landscape shot fills the box, anything else is contained over a blurred
   copy of itself, so a dial is never cropped and the frame is never empty */
.g-tile, .g-one { position: relative; overflow: hidden; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--fill); }
.g-tile { cursor: zoom-in; }
.g-tile::before, .g-one::before { content: ""; position: absolute; inset: -8%; background-image: var(--shot); background-size: cover; background-position: center; filter: blur(18px) saturate(.75); opacity: .5; }
.g-tile.landscape::before, .g-one.landscape::before { display: none; }
.g-tile img, .g-one img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.g-tile.landscape img, .g-one.landscape img { object-fit: cover; }
.g-plus { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(32,30,29,.55); color: var(--paper); font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; }

.g-edge { position: absolute; top: 0; bottom: 34%; width: 26%; border: 0; background: transparent; z-index: 2; cursor: pointer; }
.g-edge.prev { left: 0; } .g-edge.next { right: 0; }
.g-dots { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: center; gap: 4px; z-index: 2; }
.g-dots i { width: 16px; height: 3px; border-radius: 2px; background: rgba(243,242,242,.5); }
.g-dots i.on { background: var(--paper); }
.g-back { position: absolute; top: 8px; left: 10px; z-index: 3; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: rgba(32,30,29,.62); color: var(--paper); font: 600 11px/1 var(--sans); cursor: pointer; }

/* the two drag hints ride the gesture: --g-drag is 0 to 1, --g-dir is ±1 */
.g-hint { position: absolute; top: 14px; z-index: 3; padding: 5px 12px; border: 2px solid currentColor; border-radius: 8px; font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; opacity: 0; }
.g-hint.watch { left: 14px; color: var(--watch-ink); background: var(--watch-tint); opacity: calc(var(--g-drag, 0) * max(var(--g-dir, 0), 0)); }
.g-hint.pass { right: 14px; color: var(--risk-ink); background: #fff; opacity: calc(var(--g-drag, 0) * max(calc(var(--g-dir, 0) * -1), 0)); }

/* the figures, over the foot of the image */
.g-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 34px 14px 12px; color: var(--paper); background: linear-gradient(to top, rgba(32,30,29,.94) 0%, rgba(32,30,29,.82) 52%, rgba(32,30,29,0) 100%); }
.g-strip-top { display: flex; align-items: center; gap: 8px; }
.g-title { margin: 0; font: 400 18px/1.25 var(--serif); color: var(--paper); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-meta { font: 400 12px/1.4 var(--sans); color: rgba(243,242,242,.82); }
.g-meta.attrs { color: rgba(243,242,242,.62); }
.g-dot { margin: 0 2px; color: rgba(243,242,242,.45); }
.g-na { color: rgba(243,242,242,.62); }
.g-when { padding: 3px 9px; border-radius: 999px; background: rgba(243,242,242,.92); font: 600 11.5px/1 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.g-when.soon { color: var(--risk-ink); }
.g-when.over { color: var(--muted); }
.g-tag { padding: 3px 8px; border-radius: 6px; background: rgba(243,242,242,.92); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--ink); }
.g-figures { display: flex; align-items: baseline; gap: 16px; margin-top: 2px; }
.g-bid b, .g-est b { display: block; font: 600 18px/1.2 var(--sans); color: var(--paper); font-variant-numeric: tabular-nums; }
.g-bid b.g-na { font-weight: 400; font-size: 13px; }
.g-bid span, .g-est span { font: 400 11px/1.4 var(--sans); color: rgba(243,242,242,.62); }
.g-est b { font-size: 13px; color: rgba(243,242,242,.86); }
.g-comp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; padding: 7px 10px; border-radius: 9px; background: rgba(243,242,242,.14); }
.g-comp.none { font: 400 11.5px/1.4 var(--sans); color: rgba(243,242,242,.7); }
.g-value b { font: 600 13px/1.2 var(--sans); color: var(--paper); font-variant-numeric: tabular-nums; }
.g-value span, .g-margin span { display: block; font: 400 11px/1.4 var(--sans); color: rgba(243,242,242,.62); }
.g-margin { text-align: right; }
.g-margin b { font: 600 18px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.g-margin.up b { color: oklch(78% .14 150); }
.g-margin.down b { color: oklch(78% .14 25); }
.g-margin.flat b, .g-margin.none b { color: rgba(243,242,242,.8); }
/* R39 (4 October 2026): a pending label's pill beside the Margin's figure; a disputed label's words under the value, where the Margin was. */
.g-margin .lc-pill { margin-left: 6px; vertical-align: 3px; }
.g-strip .badge.lc-pill[data-lc="pending"] { border-color: rgba(243,242,242,.45); color: rgba(243,242,242,.82); }
.g-comp.g-lc-disputed { flex-wrap: wrap; }
.g-comp.g-lc-disputed .g-margin { flex-basis: 100%; text-align: left; }
.g-comp.g-has-cost { flex-wrap: wrap; row-gap: 2px; } /* R45: the cost on a platform's terms, on its own line under the value and the Margin */
.g-comp .g-cost { flex-basis: 100%; text-align: right; font: 400 11px/1.4 var(--sans); color: rgba(243,242,242,.62); }
.g-card.band .g-comp .g-cost { color: var(--faint); }
.g-margin .g-lc-head { font-weight: 600; color: rgba(243,242,242,.86); }
.g-open { margin-top: 2px; font: 600 11.5px/1 var(--sans); color: var(--paper); }
.g-open:hover { color: var(--paper); }

/* F10's alternative: the figures in a band under the image, one class */
.g-card.band { display: flex; flex-direction: column; }
.g-card.band .g-photo { position: relative; flex: 1; min-height: 0; }
.g-card.band .g-strip { position: static; padding: 12px 14px 14px; color: var(--ink); background: #fff; }
.g-card.band .g-title { color: var(--ink); }
.g-card.band .g-meta { color: var(--head); }
.g-card.band .g-meta.attrs, .g-card.band .g-na, .g-card.band .g-bid span, .g-card.band .g-est span, .g-card.band .g-value span, .g-card.band .g-margin span { color: var(--faint); }
.g-card.band .g-dot { color: var(--chev); }
.g-card.band .g-bid b, .g-card.band .g-title, .g-card.band .g-value b, .g-card.band .g-open { color: var(--ink); }
.g-card.band .g-est b { color: var(--body); }
.g-card.band .g-comp { background: var(--subtle); }
.g-card.band .g-comp.none { color: var(--faint); }
.g-card.band .g-margin.up b { color: var(--good-ink); }
.g-card.band .g-margin.down b { color: var(--risk-ink); }
.g-card.band .g-margin.flat b, .g-card.band .g-margin.none b { color: var(--muted); }
.g-card.band .badge.lc-pill[data-lc="pending"] { border-color: rgba(32,30,29,.28); color: var(--muted); } /* R39 */
.g-card.band .g-margin .g-lc-head { color: var(--ink); }
.g-card.band .g-open { color: var(--blue); }

/* the actions: under the stage by default, over it with one class */
.g-acts { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 2px 0 10px; }
.g-stage.acts-over { padding-bottom: 0; }
.g-stage.acts-over .g-acts { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 5; }
.g-act { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 20px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 999px; background: #fff; font: 600 13px/1 var(--sans); color: var(--body); }
/* the rewind: small and round between Pass and Watch; the number is how many swipes it can go back through */
.g-act.undo { position: relative; justify-content: center; gap: 0; width: 36px; height: 36px; padding: 0; color: var(--muted); }
.g-act.undo:not([disabled]) { color: var(--body); }
.g-act.undo svg { display: block; }
.g-rew-n { position: absolute; top: -5px; right: -5px; box-sizing: border-box; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 10px/16px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.g-act.watch { border-color: var(--watch-solid); background: var(--watch-tint); color: var(--watch-ink); }
.g-act.pass { color: var(--risk-ink); }
.g-act[disabled] { opacity: .45; cursor: default; }
.g-empty-acts { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
/* R26: the end of the deck is a card in the stack's box, the size of a lot card */
.g-stack .g-end { position: absolute; inset: 0; padding: 32px 28px; border: 1px solid rgba(32,30,29,.14); border-radius: 14px; background: var(--subtle); box-shadow: 0 10px 30px rgba(32,30,29,.14); }
.g-end p { max-width: 340px; }
.g-end .g-empty-acts { margin-top: 18px; }
.g-end .g-empty-acts .btn-36 { margin-top: 0; }

/* item 8: the three words offered after a pass, on the row already stored */
.g-reasons { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 0 10px; font: 400 11.5px/1 var(--sans); color: var(--faint); }
.g-reason { height: 26px; padding: 0 10px; border: 1.5px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 11.5px/1 var(--sans); color: var(--body); }
/* a rewind takes the row away; its room stays until the next swipe, so the buttons do not move from under the pointer between presses */
.g-reasons.held { height: 36px; padding: 0; visibility: hidden; }
.g-reason:hover { border-color: rgba(32,30,29,.3); }
.g-reason.on { border-color: var(--watch-solid); background: var(--watch-tint); color: var(--watch-ink); }
/* R61 review (B2): decisions still on their way, said in the stage's corner so the stack does not move */
.g-saving { position: absolute; left: 20px; bottom: 18px; margin: 0; font: 400 11.5px/1.3 var(--sans); color: var(--muted); }

@media (max-width: 1100px) {
  .g-bar { padding: 10px 16px 12px; }
  .g-stage { padding: 10px 16px 0; }
  .g-stack { width: min(420px, 100%); }
  .g-foot { padding: 8px 16px 12px; }
}
/* Below 700px (900px before R64) the app shell itself still shows "Built for a larger screen,
   for now" (.notice), so nothing here is reached on a phone today. The card
   is built to work at 390 anyway, because a swipe deck is the one surface
   that belongs on a phone; lifting that gate is D's shell and Henry's call,
   and it is on the outstanding list. */
@media (max-width: 560px) {
  .g-bar { overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
  .g-bar::-webkit-scrollbar { display: none; }
  /* fixed, so the popover escapes the bar's own scroll container */
  .g-pop { position: fixed; left: 8px; right: 8px; top: auto; min-width: 0; max-width: none; }
  .g-stack { width: 100%; }
  .g-mosaic.hero3 { grid-template-rows: 1fr 72px; }
  .g-title { font-size: 16px; }
}

/* R21 (3 October 2026). An answered question stays in the thread, in the body colour, without its chips. */
.q-block.answered p { color: var(--body); }
/* A gallery tile is a button now (it opens the photo viewer), so it drops a button's own padding and says it enlarges. */
.gallery .shot { padding: 0; font: inherit; cursor: zoom-in; }
/* The photo viewer: one layer over everything, the photo as large as the window allows. */
@keyframes pvIn { from { opacity: 0; } to { opacity: 1; } }
.pv { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 56px 76px; background: rgba(15,14,14,.92); animation: pvIn .14s ease-out both; }
.pv-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; cursor: default; }
.pv-fig img { display: block; width: calc(100vw - 152px); height: calc(100vh - 150px); object-fit: contain; } /* the box fills the window and the photo scales to it, up or down, whole */
.pv-cap { color: var(--paper); font: 400 12.5px/1.4 var(--sans); opacity: .85; text-align: center; }
.pv-btn, .pv-close { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(243,242,242,.14); color: var(--paper); cursor: pointer; }
.pv-btn { top: 50%; transform: translateY(-50%); }
.pv-btn.prev { left: 16px; }
.pv-btn.prev svg { transform: scaleX(-1); }
.pv-btn.next { right: 16px; }
.pv-close { top: 16px; right: 16px; }
.pv-btn:hover, .pv-close:hover { background: rgba(243,242,242,.26); }
.pv-btn:focus-visible, .pv-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .pv { padding: 64px 16px 80px; }
  .pv-fig img { width: calc(100vw - 32px); height: calc(100vh - 170px); }
  .pv-btn { top: auto; bottom: 16px; transform: none; }
}

/* R36 (4 October 2026), D2: the app's sign-out buttons are square, to the team's button spec, so they match the
   waiting room's Sign out: 36 high, 16 either side, 14 at weight 500, a transparent outline at 28% of the text
   colour that goes solid on hover over a 6% wash. The app is a light surface, so that colour is ink here where the
   dark pages use paper. Sign out everywhere keeps its danger colour. Matched by action, so every sign-out
   button changes and no other button does. */
.set-action[data-act="signout"], .set-action[data-act="set-logout-all"], .gate-card .btn-34[data-act="signout"] { display: inline-flex; align-items: center; width: auto; height: 36px; padding: 0 16px; border: 1px solid color-mix(in oklch, var(--ink) 28%, transparent); border-radius: 0; background: transparent; box-shadow: none; font: 500 14px/1 var(--sans); color: var(--ink); transition: border-color .16s, background .16s; }
.set-action[data-act="signout"], .set-action[data-act="set-logout-all"] { margin: 12px 8px 0 0; vertical-align: top; }
.set-action[data-act="signout"]:hover, .set-action[data-act="set-logout-all"]:hover, .gate-card .btn-34[data-act="signout"]:hover { border-color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); color: var(--ink); transform: none; }
.set-action.danger[data-act="set-logout-all"] { color: var(--risk-ink); }
.set-action.danger[data-act="set-logout-all"]:hover { border-color: var(--risk-ink); background: color-mix(in oklch, var(--risk-ink) 6%, transparent); color: var(--risk-ink); }
.gate-card .acts { align-items: center; } /* the gate's other buttons are a little shorter; centred, the row still reads as one line */

/* R34 (4 October 2026): every price says what kind it is. Small type, existing tokens, no new colours. A figure the
   API did not label carries none of these classes, so an older response looks as it did. */
.mg-value .sample.pk { font-weight: 600; color: var(--body); } /* the value's kind, under its sample; its premium is the line under it */
.mg-margin.pk { flex-direction: column; align-items: flex-end; gap: 4px; }
.pk-basis { font: 400 11px/1.3 var(--sans); color: var(--muted); white-space: nowrap; } /* "against auction results", under a Margin pill */
.pk-note { font-size: 11px; color: var(--muted); } /* a figure's premium, and "used for margin" */
.expand-top .pk-line { flex-basis: 100%; } /* the chat card: one row per figure, the Margin, then asking prices */
.expand-top .pk-ask.pk-apart { padding-top: 7px; border-top: 1px dashed rgba(32,30,29,.15); } /* asking prices, set apart from the realised figures */
.c-val .c-val-line { display: block; } /* the watchlist value's sample, on its own line under its kind and premium */

/* ── the Assistant (agent mode, 5 October 2026; views/assistant.js) ─────────────────────────────────
   The chat's own pieces where they fit (.thread, .msg, .ava, .msg-user, .starter, .send, .fr-mark, .tag-mono,
   .btn-34, .eyebrow) and a small set of its own, prefixed as-. Existing tokens only, no new colours. Nothing
   here has a fixed width that can push the thread sideways, so it holds in a 360px main column. */
.as { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.as-thread { gap: 26px; padding-bottom: 18px; }
.as-x { display: flex; flex-direction: column; gap: 12px; animation: fadeUp .35s var(--ease) both; }
.as-x .msg-user { white-space: pre-wrap; overflow-wrap: anywhere; animation: none; }
.as-turn .msg-body { display: flex; flex-direction: column; gap: 12px; }

/* the empty state: the chat's first run, with the four starters */
.as-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 0; text-align: center; animation: fadeUp .45s var(--ease) both; }
.as-empty h1 { flex: none; margin: 10px 0 0; font: 400 28px/1.1 var(--serif); letter-spacing: -.015em; }
.as-lede { flex: none; margin: 8px 0 0; max-width: 440px; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.as-starters { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; width: 100%; max-width: 580px; }
.as-starter { min-width: 0; }

/* the working block: the plan, the lookups, the live line; folded to one line once the answer is in */
.as-work.live, .as-work-detail { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid rgba(32,30,29,.12); border-radius: 11px; background: var(--subtle); }
.as-work-detail { margin-top: 10px; }
.as-plan ol, .as-steps, .as-res { list-style: none; margin: 0; padding: 0; }
.as-plan .eyebrow { display: block; margin-bottom: 8px; }
.as-plan ol { display: flex; flex-direction: column; gap: 5px; }
.as-plan li { display: flex; align-items: flex-start; gap: 9px; font: 400 13px/1.45 var(--sans); color: var(--body); }
.as-plan-text { min-width: 0; overflow-wrap: anywhere; }
.as-box { flex: none; display: inline-grid; place-items: center; width: 15px; height: 15px; margin-top: 2px; border: 1.5px solid rgba(32,30,29,.28); border-radius: 4px; background: #fff; color: #fff; }
.as-plan li.doing { color: var(--ink); font-weight: 600; }
.as-plan li.doing .as-box { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
.as-plan li.done { color: var(--muted); }
.as-plan li.done .as-box { border-color: var(--blue); background: var(--blue); }
.as-steps { display: flex; flex-direction: column; gap: 8px; }
.as-step { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.as-ico { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 1.5px; border-radius: 50%; color: #fff; }
.as-step.done .as-ico { background: var(--blue); }
.as-step.error .as-ico { background: var(--red); }
.as-step.stalled .as-ico { border: 1.5px dashed rgba(32,30,29,.32); }
.as-step-body { flex: 1; min-width: 0; font: 400 13px/1.45 var(--sans); }
.as-step-label { color: var(--ink); overflow-wrap: anywhere; }
.as-step-sum { color: var(--muted); }
.as-step-sum::before { content: "\00b7"; margin: 0 6px; color: var(--chev); }
.as-step.error .as-step-sum { color: var(--red); }
.as-res { display: flex; flex-direction: column; gap: 3px; margin: 5px 0 2px; }
.as-res li { font: 400 12px/1.45 var(--sans); overflow-wrap: anywhere; }
.as-res a { color: var(--blue-hover); text-decoration: none; }
.as-res a:hover { text-decoration: underline; }
.as-host { font: 400 11.5px/1.45 var(--sans); color: var(--faint); }
@keyframes asSpin { to { transform: rotate(360deg); } }
.as-spin { flex: none; display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(65,105,225,.22); border-top-color: var(--blue); border-radius: 50%; animation: asSpin .8s linear infinite; }
.as-live { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 12.5px/1.4 var(--sans); color: var(--muted); }
.as-work-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 12px 0 9px; border: 1px solid rgba(32,30,29,.14); border-radius: 999px; background: #fff; font: 500 12px/1 var(--sans); color: var(--muted); transition: border-color .16s, color .16s; }
.as-work-toggle:hover { border-color: rgba(32,30,29,.4); color: var(--ink); }
.as-work-toggle svg { flex: none; transition: transform .16s var(--ease); }
.as-work-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.as-work-toggle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-sum { font: 500 12px/1.4 var(--sans); color: var(--muted); }

/* the answer: markdown-lite text, citation numerals, lot chips */
.as-answer { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.as-text { max-width: 74ch; font: 400 14px/1.6 var(--sans); color: var(--body); overflow-wrap: anywhere; }
.as-text p { margin: 0 0 10px; }
.as-text ul { margin: 0 0 10px; padding-left: 20px; }
.as-text p:last-child, .as-text ul:last-child { margin-bottom: 0; }
.as-text li { margin: 3px 0; }
.as-text li::marker { color: var(--faint); }
.as-text strong { font-weight: 600; color: var(--ink); }
.as-cite { margin: 0 1px 0 2px; font-size: 10px; line-height: 1; vertical-align: super; white-space: nowrap; }
.as-cite a, .as-cite span { display: inline-block; min-width: 14px; padding: 1px 3px; border-radius: 4px; background: var(--tint); color: var(--blue-hover); font: 600 10px/1.25 var(--sans); text-align: center; text-decoration: none; }
.as-cite a + a, .as-cite span + span, .as-cite a + span, .as-cite span + a { margin-left: 2px; }
.as-cite a:hover { background: var(--blue); color: #fff; }
.as-chip { display: inline-flex; align-items: center; margin: 0 1px; padding: 0 6px; border: 1px solid rgba(32,30,29,.18); border-radius: 5px; background: #fff; font: 600 11px/1.55 var(--mono); letter-spacing: .06em; color: var(--body); text-decoration: none; white-space: nowrap; vertical-align: 1px; transition: border-color .16s, color .16s; }
a.as-chip:hover { border-color: var(--blue); color: var(--blue-hover); }

/* a card for each lot the answer names */
.as-lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.as-lot { display: flex; gap: 12px; min-width: 0; padding: 12px; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; }
.as-lot-img { flex: none; display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: var(--fill); }
.as-lot-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-lot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.as-lot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.as-lot-platform { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.3 var(--sans); color: var(--muted); }
.as-lot-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13px/1.35 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.as-lot-title:hover { color: var(--blue-hover); }
.as-lot-figs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 2px 0 0; }
.as-lot-figs dt { font: 600 10px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.as-lot-figs dd { margin: 1px 0 0; font: 600 12.5px/1.35 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.as-lot-when { margin: 0; font: 500 12px/1.35 var(--sans); color: var(--body); }
.as-lot-figs dd.na, .as-lot-when.na { font-weight: 400; font-style: italic; color: var(--faint); }
.as-lot-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.as-lot-links a { font: 600 12px/1.4 var(--sans); color: var(--blue-hover); text-decoration: none; }
.as-lot-links a:hover { text-decoration: underline; }

/* sources, notes, and what stands in for an answer */
.as-sources .eyebrow { display: block; margin-bottom: 8px; }
.as-sources ol { display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 0; padding: 0; }
.as-sources li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 400 12.5px/1.45 var(--sans); }
.as-n { flex: none; min-width: 18px; padding: 1px 4px; border-radius: 4px; background: var(--tint); color: var(--blue-hover); font: 600 10.5px/1.3 var(--sans); text-align: center; }
.as-src { min-width: 0; overflow-wrap: anywhere; }
.as-src a { color: var(--ink); text-decoration: none; }
.as-src a:hover { color: var(--blue-hover); text-decoration: underline; }
.as-notes { margin: 0; padding: 0 0 0 16px; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.as-notes li { margin: 2px 0; }
.as-note { margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.as-note.warn { padding: 9px 12px; border: 1px solid rgba(155,44,44,.22); border-left: 3px solid var(--red); border-radius: 8px; background: #fff; color: var(--body); }
/* R87 (11 October 2026): the quiet line under an answer the plan read without web checks, and its way to Billing. */
.as-note.as-verify { margin-top: 6px; font-size: 12px; }
.as-verify-go { padding: 0; border: 0; background: none; font: 600 12px/1.5 var(--sans); color: var(--blue); cursor: pointer; }
.as-verify-go:hover { color: var(--blue-hover); text-decoration: underline; }
.as-card { max-width: 500px; padding: 16px 18px 17px; border: 1px solid rgba(32,30,29,.14); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(32,30,29,.06); }
.as-card h3 { margin: 0; font: 400 21px/1.2 var(--serif); }
.as-card p { margin: 6px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.as-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.as-card .btn-34 { text-decoration: none; }

/* the composer: a textarea, then Deep research, New conversation and Send (Stop while a turn runs) */
.as-composer-wrap { flex: none; padding: 0 30px 70px; }
.as-composer-wrap.no-guide { padding-bottom: 18px; }
.as-composer { padding: 11px 12px 10px 14px; border: 1.5px solid rgba(32,30,29,.16); border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.as-composer:hover, .as-composer:focus-within { border-color: rgba(65,105,225,.6); box-shadow: 0 6px 20px rgba(65,105,225,.09); }
.as-field { display: flex; align-items: flex-end; gap: 10px; }
.as-input { display: block; flex: 1; min-width: 0; max-height: 180px; margin: 0; padding: 5px 0; border: 0; outline: none; resize: none; background: none; font: 400 14px/1.5 var(--sans); color: var(--ink); }
.as-input::placeholder { color: var(--faint); }
.as-input:disabled { color: var(--muted); cursor: default; }
.as-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(32,30,29,.08); }
.as-deep { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 7px; border: 1px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 12px/1 var(--sans); color: var(--muted); transition: border-color .16s, color .16s, background .16s; }
.as-deep:hover { border-color: rgba(32,30,29,.4); color: var(--ink); }
.as-deep[aria-pressed="true"] { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
.as-switch { position: relative; flex: none; width: 24px; height: 14px; border-radius: 999px; background: rgba(32,30,29,.2); transition: background .16s; }
.as-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform .16s var(--ease); }
.as-deep[aria-pressed="true"] .as-switch { background: var(--blue); }
.as-deep[aria-pressed="true"] .as-switch::after { transform: translateX(10px); }
.as-hint { font: 400 11.5px/1.3 var(--sans); color: var(--faint); }
.as-count { font: 500 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.as-count:empty { display: none; }
.as-count.over { color: var(--red); }
.as-new { margin-left: auto; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: none; font: 600 12px/1 var(--sans); color: var(--muted); transition: background .16s, color .16s; }
.as-new:hover:not(:disabled) { background: rgba(32,30,29,.06); color: var(--ink); }
.as-new:disabled { opacity: .45; cursor: default; }
.as-stop { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1.5px solid rgba(32,30,29,.24); border-radius: 9px; background: #fff; font: 600 12.5px/1 var(--sans); color: var(--ink); transition: border-color .16s, color .16s; }
.as-stop:hover { border-color: var(--red); color: var(--red); }

/* The Assistant tab is the eighth. At the 900px floor eight tabs ran 61px past the main column and Runs sat under the
   tray again, the PR-D0 problem (measured 5 October); the base padding also overflows up to about 1066px. Below 1100px
   the tabs take less padding and gap, which fits all eight from 900 to 1100 (Instrument Sans, no Sample pill). Past
   that the row scrolls sideways instead of running under the tray: its max-width is what the crumb's minimum leaves
   (64px and the 12px gap above 1000px, 40px and 10px below, less the negative margin). The 8px padding, given back by
   the negative margin, keeps focus rings and the Runs tab's live pulse inside the scroll box. 1101px and up: as was.
   R56 (5 October 2026): all of this was measured with the 254px tray beside the main column. The tray is a drawer over
   the content now, so the row has 254px more and the eight tabs fit at 900, 1000 and 1180 with the Sample pill shown
   and nothing scrolling (measured); the rules are kept and the sideways scroll is a fallback only. */
@media (max-width: 1100px) {
  .tabs { flex: none; max-width: calc(100% - 68px); gap: 3px; margin: -8px -8px -8px auto; padding: 8px; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding: 6px; }
}
@media (max-width: 1000px) {
  .tabs { max-width: calc(100% - 46px); gap: 1px; margin: -8px -4px -8px auto; padding: 8px 4px; }
  .tab { padding: 6px 4px; }
}

/* phone width: tighter gutters, one column of starters, the hint on its own line, 40px targets */
@media (max-width: 640px) {
  .as-thread { padding: 12px 14px 14px; gap: 22px; }
  .as-x .msg-user { max-width: 85%; }
  .as-empty h1 { font-size: 24px; }
  .as-starters { grid-template-columns: minmax(0, 1fr); }
  .as-text { font-size: 13.5px; }
  .as-lot-img { width: 60px; height: 60px; }
  .as-composer-wrap { padding-left: 12px; padding-right: 12px; }
  .as-composer-wrap.no-guide { padding-bottom: 12px; }
  .as-hint { order: 9; flex-basis: 100%; }
  .as-input { padding: 9px 0; }
  .as-send { width: 40px; height: 40px; }
  .as-stop, .as-deep, .as-new { height: 40px; }
}

/* R50: Chat and Assistant are two modes of one composer; the switch sits at its top, and in Assistant mode the model picker beside it */
.composer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 9px; }
.mode-switch { display: inline-flex; flex: none; padding: 2px; border: 1px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; }
.mode-opt { height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 600 12px/1 var(--sans); color: var(--muted); transition: background .16s, color .16s; }
.mode-opt:hover { color: var(--ink); }
.mode-opt[aria-pressed="true"] { background: var(--tint); color: var(--blue-hover); }
.mode-opt:focus-visible, .as-model select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.as-model { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--sans); color: var(--muted); }
.as-model select { height: 30px; max-width: 100%; padding: 0 10px; border: 1px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 12px/1 var(--sans); color: var(--ink); cursor: pointer; }
.as-model select:hover { border-color: rgba(32,30,29,.4); }
@media (max-width: 640px) {
  .mode-opt { height: 36px; padding: 0 14px; }
  .as-model select { height: 40px; }
}

/* R51: a watchlist row opens to the recorded sales its value rests on: the chart, the list with links, and the lot sent to the Assistant or Search */
.c-wl-row { cursor: pointer; }
.c-wl-row.open { background: var(--subtle); }
.c-wl-more { justify-self: start; margin-top: 7px; padding: 3px 9px; border: 1px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 11.5px/1.3 var(--sans); color: var(--muted); cursor: pointer; }
.c-wl-more:hover, .c-wl-more[aria-expanded="true"] { border-color: var(--blue); color: var(--blue-hover); }
.c-wl-sales { grid-column: 1 / -1; padding: 16px 18px 14px; border: 1px solid rgba(32,30,29,.1); border-radius: 12px; background: #fff; cursor: default; }
.c-ls-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.c-ls-head h4 { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.c-ls-sub { margin: 4px 0 0; max-width: 72ch; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.c-ls-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.c-ls-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.c-ls-key { display: inline-flex; align-items: center; gap: 6px; }
.c-ls-chart { position: relative; width: 100%; min-height: 220px; }
.c-ls-svg { display: block; overflow: visible; font: 400 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.c-ls-tip { position: absolute; z-index: 3; max-width: 280px; padding: 8px 10px; border-radius: 8px; background: #201E1D; color: #fff; font: 400 12px/1.45 var(--sans); pointer-events: none; box-shadow: 0 8px 24px rgba(32,30,29,.2); }
.c-ls-tip b { display: block; font: 600 13.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.c-ls-tip span { display: block; color: rgba(255,255,255,.82); }
.c-ls-table { width: 100%; margin-top: 10px; border-collapse: collapse; font: 400 12.5px/1.4 var(--sans); color: var(--ink); }
.c-ls-table th { padding: 6px 8px; border-bottom: 1px solid rgba(32,30,29,.1); font: 600 11px/1.3 var(--sans); color: var(--muted); text-align: left; }
.c-ls-table td { padding: 7px 8px; border-bottom: 1px solid rgba(32,30,29,.06); vertical-align: top; }
.c-ls-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-ls-orig, .c-ls-title { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.c-ls-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ls-when { white-space: nowrap; }
.c-ls-links { white-space: nowrap; }
.c-ls-links a { margin-right: 10px; color: var(--blue-hover); font-weight: 600; text-decoration: none; }
.c-ls-links a:hover { text-decoration: underline; }
.c-ls-note { margin: 10px 0 0; font: 400 12px/1.5 var(--sans); color: var(--muted); }
.c-ls-note.warn { color: var(--red); }
/* R51: the list keeps its columns to the panel's width whatever the titles' length: fixed column widths, the title cut to its cell; under 1100px the kind moves under the date and the two links stack */
.c-ls-table { table-layout: fixed; }
.c-ls-table th:nth-child(1) { width: 104px; }
.c-ls-table th:nth-child(2) { width: 116px; }
.c-ls-table th:nth-child(4) { width: 204px; }
.c-ls-table th:nth-child(5) { width: 150px; }
.c-ls-amt .c-ls-orig { white-space: normal; }
.c-ls-kind-sm { display: none; margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: normal; }
@media (max-width: 1100px) {
  .c-ls-table th:nth-child(4), .c-ls-table td.c-ls-kind { display: none; }
  .c-ls-kind-sm { display: block; }
  .c-ls-table th:nth-child(5) { width: 84px; }
  .c-ls-links { white-space: normal; }
  .c-ls-links a { display: block; margin: 0 0 3px; }
}
/* R51: under 1100px the row's actions take their own line under the title. Measured on R50 at 1000px the title column was 29px wide and at 900px 0px, because the auto track for the actions (261px in one line) is filled before the 1fr title column gets any width; now the title has 304px at 1000 and 204px at 900. R56 (5 October 2026): 558px and 458px since the tray became a drawer over the content (measured). */
@media (max-width: 1100px) {
  .c-wl-row { grid-template-columns: 104px minmax(0,1fr) 132px; }
  .c-wl-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* R53 (5 October 2026): Henry's settings pass. Set up, Account, Billing and Usage in Settings, the usage chip and its popover in both composers, and the set-up line in Search. Tokens only, and the chart colours are the ones validated in usage-charts.js. */
.set-body.wide { max-width: 760px; }
.set-group .a-row { flex-wrap: wrap; }
.a-inline, .su-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.a-edit .a-inline { flex: 1 1 260px; justify-content: flex-end; }
.a-note { margin: -6px 0 0; padding: 0 16px 12px; font: 400 11.5px/1.45 var(--sans); color: var(--faint); }
.a-verified { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--good-ink) 40%, transparent); color: var(--good-ink); font: 600 11px/1.5 var(--sans); }
.a-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.su-input { flex: 1 1 150px; min-width: 0; max-width: 300px; height: 30px; padding: 0 9px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 7px; background: #fff; font: 500 13px/1 var(--sans); color: var(--ink); }
.su-input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(65,105,225,.14); }
.su-input.a-code { flex: 0 0 104px; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.su-select { height: 30px; max-width: 220px; min-width: 0; padding: 0 8px; border: 1.5px solid rgba(32,30,29,.22); border-radius: 7px; background: #fff; font: 500 12.5px/1 var(--sans); color: var(--ink); cursor: pointer; }
.su-select:hover { border-color: rgba(32,30,29,.4); }
.c-choice button[disabled] { opacity: .45; cursor: not-allowed; }
.su-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 18px; }
.su-card { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 16px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; }
.su-step { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.su-card h3 { margin: 7px 0 0; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.su-sub { margin: 3px 0 10px; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.su-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.su-body > .c-choice { align-self: flex-start; }
.su-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.su-label { font: 500 12.5px/1.3 var(--sans); color: var(--body); }
.su-chips { margin-top: 0; }
.su-chips .lim-chip { height: 30px; padding: 0 12px; font-size: 12px; }
.su-foot { justify-content: flex-end; }
.su-unsaved { margin-right: auto; font: 500 11.5px/1.4 var(--sans); color: var(--blue-hover); }
.su-money { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 150px; min-width: 0; max-width: 220px; }
.su-cur { font: 600 12px/1 var(--sans); color: var(--muted); }
.su-hint { margin: -4px 0 0; font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.su-finish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.su-finish .su-sub { margin: 0; }
.su-done-btn { height: 36px; padding: 0 22px; font-size: 13px; }
.su-done { margin: 16px 2px 0; font: 500 13px/1.5 var(--sans); color: var(--good-ink); }
/* The set-up line in Search, above the composer. */
.su-line-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 8px 7px 14px; border: 1px solid var(--scan-edge); border-radius: 10px; background: var(--scan-tint); }
.su-line-link { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--ink); text-decoration: none; }
.su-line-link b { font: 600 13px/1.3 var(--sans); color: var(--blue-hover); }
.su-line-link span { font: 400 12px/1.4 var(--sans); color: var(--muted); }
.su-line-link:hover b { text-decoration: underline; }
.su-line-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 400 18px/1 var(--sans); }
.su-line-x:hover { background: rgba(32,30,29,.07); color: var(--ink); }
/* Billing: the plan cards and the comparison. */
.b-now { margin: 16px 2px 0; font: 500 13px/1.5 var(--sans); color: var(--body); }
/* R86 (11 October 2026): four cards (Free, Pro, Pro+, Business), four across while each keeps 175px, enough for a
   price a month on one line, else two by two; never three and one, which a 190px least column gave at every width from
   900 up (the pane is 760px at most). The least column is a quarter of the row while the row is 730px or more, and half
   of it below: (730px - 100%) * 999 outgrows any quarter once the row is under 730px, and the half caps it. Measured:
   four of 183px at 1100 and up; two by two at 1000 (341px), 900 (291px) and 700 (197px; the app opens there, R64). */
.bp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(max(calc((100% - 30px) / 4), calc((730px - 100%) * 999)), calc((100% - 10px) / 2)), 1fr)); gap: 10px; margin-top: 12px; }
.bp-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid rgba(32,30,29,.12); border-radius: 13px; background: #fff; }
.bp-card.current { border-color: var(--scan-edge); background: var(--scan-tint); }
.bp-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.bp-name { font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
.bp-badge { padding: 3px 8px; border: 1px solid var(--scan-edge); border-radius: 999px; background: #fff; color: var(--scan-ink); font: 600 10.5px/1.2 var(--sans); white-space: nowrap; }
.bp-price { font: 600 19px/1.2 var(--sans); color: var(--ink); }
.bp-price.na { font: 500 13px/1.4 var(--sans); color: var(--muted); }
.bp-buy { align-self: flex-start; margin-top: auto; }
.c-btn[disabled] { opacity: .5; cursor: not-allowed; }
.set-action.b-manage { width: auto; display: inline-flex; margin-top: 12px; }
.u-table.bp-table th, .u-table.bp-table td { text-align: left; white-space: normal; vertical-align: top; }
.bp-table tr.marked th, .bp-table tr.marked td { background: var(--subtle); }
.bp-use { color: var(--blue-hover); font-weight: 600; }
.bp-mark { margin-right: 6px; color: var(--blue); font-size: 8px; vertical-align: 2px; }
.b-beta { margin: 10px 2px 0; font: 400 12px/1.5 var(--sans); color: var(--muted); }
/* R87 (11 October 2026): the person's meters, Settings' own rows with a note under each, and the bible's table with
   the person's column in the current card's tint, "Your plan" under its name. */
.bp-meters .set-row { border-top: 0; }
.bp-meter + .bp-meter { border-top: 1px solid rgba(32,30,29,.07); }
.bp-meter-note { margin: -7px 16px 0; padding-bottom: 12px; font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
.bp-plans { margin-top: 14px; }
.bp-plans .bp-mine { background: var(--scan-tint); }
.bp-yours { display: block; width: max-content; margin-top: 4px; padding: 2px 7px; border: 1px solid var(--scan-edge); border-radius: 999px; background: #fff; color: var(--scan-ink); font: 600 10px/1.2 var(--sans); }
/* Billing redesign: a summary strip, a plan picker with each plan's Includes beside it, and Stripe's cards and
   invoices. The pick is a radio and :has(), so there is no handler and no state. Corners are the two roundings, --r1 and --r2 (the radio dot is a circle). */
.bb-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: 16px; padding: 16px 18px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r2); background: var(--subtle); }
.bb-sum-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-k { font: 400 11.5px/1.3 var(--sans); color: var(--muted); }
.bb-v { font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
.bb-pill { display: inline-block; padding: 2px 8px; border-radius: var(--r1); background: var(--fill); font: 600 11px/1.3 var(--sans); color: var(--body); }
.bb-pill.good { background: #e4f3e8; color: #1f6a35; }
.bb-sum-btn { margin-left: auto; }
.bb-h { margin-top: 28px; }
.bb-pricing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 10px; align-items: start; }
@media (max-width: 760px) { .bb-pricing { grid-template-columns: minmax(0, 1fr); } }
.bb-plans { display: flex; flex-direction: column; gap: 10px; }
.bb-plan { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r2); background: #fff; cursor: pointer; transition: background .16s, border-color .16s, color .16s; }
.bb-plan:hover { border-color: var(--scan-edge); }
.bb-radio { flex: none; width: 16px; height: 16px; border: 1.5px solid rgba(32,30,29,.3); border-radius: 50%; background: #fff; box-sizing: border-box; }
.bb-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.bb-plan-price { margin-left: auto; font: 600 17px/1.2 var(--sans); color: var(--ink); text-align: right; }
.bb-plan-price.na { font: 500 12.5px/1.4 var(--sans); color: var(--muted); }
.bb-plan:has(input:checked) { background: var(--blue); border-color: var(--blue); }
.bb-plan:has(input:checked) .bb-plan-name, .bb-plan:has(input:checked) .bb-plan-price { color: #fff; }
.bb-plan:has(input:checked) .bb-radio { border-color: #fff; background: #fff radial-gradient(circle, var(--blue) 0 38%, transparent 42%); }
.bb-plan:has(input:focus-visible) { outline: 2px solid var(--scan-mid); outline-offset: 2px; }
.bb-inc { display: none; padding: 16px 18px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r2); background: #fff; }
.bb-inc h4 { margin: 0 0 8px; font: 600 13px/1.3 var(--sans); color: var(--ink); }
.bb-inc ul { margin: 0 0 14px; padding: 0; list-style: none; }
.bb-inc li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(32,30,29,.07); font: 400 12.5px/1.4 var(--sans); color: var(--body); }
.bb-inc li:first-child { border-top: 0; }
.bb-inc li b { font-weight: 600; color: var(--ink); text-align: right; }
.bb-pricing:has(#bb-pick-free:checked) .bb-inc[data-for="free"],
.bb-pricing:has(#bb-pick-pro_monthly:checked) .bb-inc[data-for="pro_monthly"],
.bb-pricing:has(#bb-pick-pro_annual:checked) .bb-inc[data-for="pro_annual"],
.bb-pricing:has(#bb-pick-business_monthly:checked) .bb-inc[data-for="business_monthly"] { display: block; }
.bb-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; padding: 16px 18px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r2); background: #fff; }
.bb-pay p { flex: 1 1 280px; margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--body); }
/* Usage: tiles, the two charts, the tables. */
.u-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-top: 18px; }
.u-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; }
.u-tile-main { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.u-tile-value { font: 600 22px/1.1 var(--sans); color: var(--ink); }
.u-tile-value.na { font: italic 500 13px/1.3 var(--sans); color: var(--faint); }
.u-tile-label { font: 500 12.5px/1.3 var(--sans); color: var(--body); }
.u-tile-sub { font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
.u-ring { flex: none; display: block; }
.u-card { min-width: 0; margin-top: 12px; padding: 16px 16px 12px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; }
.u-card h3, .u-h { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.u-h { margin: 22px 2px 0; }
.u-sub { margin: 4px 0 0; max-width: 72ch; font: 400 12.5px/1.5 var(--sans); color: var(--muted); }
.u-none { padding: 14px 2px 0; }
.u-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 2px; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.u-key { display: inline-flex; align-items: center; gap: 6px; }
.u-chart { position: relative; width: 100%; min-height: 200px; margin-top: 6px; }
.u-svg { display: block; overflow: visible; font: 400 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.u-svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.u-limit-label { font: 600 11px/1 var(--sans); }
.u-tip { position: absolute; z-index: 3; max-width: 240px; padding: 8px 10px; border-radius: 8px; background: #201E1D; color: #fff; font: 400 12px/1.45 var(--sans); pointer-events: none; box-shadow: 0 8px 24px rgba(32,30,29,.2); white-space: nowrap; }
.u-tip b { display: block; font: 600 13.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.u-tip span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
.u-tip i { display: inline-block; flex: none; width: 10px; height: 2px; border-radius: 1px; }
.u-days { margin-top: 8px; }
.u-days summary { display: inline-block; padding: 4px 0; cursor: pointer; font: 600 12px/1.4 var(--sans); color: var(--blue-hover); }
.u-scroll { max-width: 100%; overflow-x: auto; }
.u-table { width: 100%; margin-top: 8px; border-collapse: collapse; font: 400 12.5px/1.4 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.u-table th, .u-table td { padding: 6px 8px; border-bottom: 1px solid rgba(32,30,29,.07); text-align: right; white-space: nowrap; }
.u-table th:first-child, .u-table td:first-child { text-align: left; }
.u-table thead th { font: 600 11px/1.3 var(--sans); color: var(--muted); border-bottom-color: rgba(32,30,29,.12); }
.u-table tbody th { font-weight: 500; color: var(--body); }
.u-table tbody tr:last-child th, .u-table tbody tr:last-child td { border-bottom: 0; }
.u-models td:last-child, .u-models thead th:last-child { font-weight: 600; }
/* The usage chip, at the right of the composer's top row, and its popover, which opens upward over the thread. */
.uc { position: relative; flex: none; margin-left: auto; }
.uc-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid rgba(32,30,29,.16); border-radius: 999px; background: #fff; font: 600 11.5px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; transition: border-color .16s, color .16s; }
.uc-chip:hover, .uc-chip[aria-expanded="true"] { border-color: var(--blue); color: var(--blue-hover); }
.uc-chip .u-ring { width: 16px; height: 16px; }
.uc-chip.na { font-weight: 500; color: var(--faint); border-style: dashed; cursor: default; }
.uc-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: 300px; max-width: calc(100vw - 48px); padding: 14px; border: 1px solid rgba(32,30,29,.12); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(32,30,29,.18); text-align: left; animation: fadeUp .18s var(--ease) both; }
.uc-sec { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(32,30,29,.08); }
.uc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.uc-eyebrow { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.uc-head b { font: 600 13px/1.3 var(--sans); color: var(--ink); text-align: right; }
.uc-meter { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--tint); overflow: hidden; }
.uc-meter i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.uc-seg { display: flex; gap: 2px; height: 8px; margin-top: 8px; border-radius: 4px; overflow: hidden; }
.uc-seg i { display: block; min-width: 2px; }
.uc-cap { margin: 4px 0 0; font: 400 11px/1.3 var(--sans); color: var(--faint); }
.uc-note { margin: 6px 0 0; font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
.uc-legend { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.uc-legend li { display: flex; align-items: center; gap: 6px; font: 400 12px/1.35 var(--sans); }
.uc-legend i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.uc-model { flex: 1; min-width: 0; color: var(--body); }
.uc-fig { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uc-row { display: flex; justify-content: space-between; gap: 8px; font: 400 12.5px/1.4 var(--sans); color: var(--body); }
.uc-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.uc-more { display: inline-block; margin-top: 12px; font: 600 12.5px/1 var(--sans); color: var(--blue-hover); text-decoration: none; }
.uc-more:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .uc-chip { height: 36px; }
  .su-input, .su-select { height: 40px; }
}
.uc-row.uc-first { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(32,30,29,.08); }
.u-models thead th { white-space: normal; overflow-wrap: anywhere; } /* a model with no name of its own is shown by its id, which is long */
.su-line .c-quiet { flex-wrap: wrap; min-width: 0; } /* the two times and their buttons wrap inside a set-up card rather than leave it */
@media (max-width: 1000px) {
  /* the settings pane is 340px wide at 900: the tables tighten so every column stays in view. R56 (5 October 2026): 592px since the tray became a drawer over the content (measured); kept */
  .u-table th, .u-table td { padding: 6px 5px; }
  .u-table.u-models { font-size: 12px; }
  .u-table.u-models tbody th { white-space: normal; min-width: 72px; }
}

/* ── Prices (R55, 5 October 2026) ────────────────────────────────────
   The watch price screener, direction 1c of Henry's handoff
   (design_handoff_prices_screener): heat tiles, the reference table, a row
   that opens in place, the compare bar and the compare view. Built from the
   tokens and the components above (.view-head, .cal-modes, .cal-filters/.cf,
   .wl-table/.wl-foot, .c-btn, .tag-mono, .tag.type, .eyebrow, the .guide
   pill); views/prices.js lays it out and prices-chart.js draws the marks. */
.pr-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#prices.with-bar { padding-bottom: 150px; }
.pr-head { flex-wrap: wrap; align-items: center; row-gap: 8px; margin-bottom: 12px; }
.pr-head .sample { align-self: center; }
.pr-head-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pr-head .cal-modes { margin-left: 0; }
.pr-filters-btn b { margin-left: 3px; font-weight: 700; }
.pr-note { margin: -4px 0 12px; font: 400 12px/1.5 var(--sans); color: var(--muted); }
/* heat tiles: six across, four under 1180px; the background is the handoff's oklch formula, set per tile */
.pr-heat { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; margin-bottom: 16px; }
@media (max-width: 1180px) { .pr-heat { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.pr-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(32,30,29,.14); border-radius: 7px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.pr-tile:hover { border-color: var(--ink); }
.pr-tile.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.pr-tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.pr-tile-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.25 var(--sans); color: var(--ink); }
.pr-tile-chg { flex: none; font: 700 12.5px/1.25 var(--sans); font-variant-numeric: tabular-nums; }
.pr-tile-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11px/1.3 var(--sans); }
/* the Showing row, its chips, and the Columns and Sort menus */
.pr-showing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font: 400 11.5px/1.3 var(--sans); }
.pr-chip { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; transition: background .16s; }
.pr-chip:hover { background: #dfe6fa; }
.pr-muted { color: var(--muted); }
.pr-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.pr-tool { position: relative; }
.pr-menu-btn { padding: 2px 0; border: 0; background: none; font: 400 11.5px/1.3 var(--sans); color: var(--muted); cursor: pointer; }
.pr-menu-btn:hover, .pr-menu-btn[aria-expanded="true"] { color: var(--ink); }
.pr-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 190px; padding: 6px; border: 1px solid rgba(32,30,29,.14); border-radius: 9px; background: #fff; box-shadow: 0 8px 26px rgba(32,30,29,.14); animation: popIn .2s var(--ease) both; }
.pr-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font: 400 12.5px/1.2 var(--sans); color: var(--ink); text-align: left; white-space: nowrap; cursor: pointer; }
.pr-menu-item:hover { background: rgba(32,30,29,.05); }
.pr-menu-item.on { font-weight: 600; }
.pr-menu-item input { margin: 0; accent-color: var(--blue); }
.pr-menu-note, .pr-arrow { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--muted); }
.pr-filters { margin: 4px 0 12px; }
.pr-minmax { display: flex; align-items: center; gap: 4px; }
.pr-minmax input { width: 78px; }
.pr-minmax i { font-style: normal; color: var(--muted); }
.pr-filters select { max-width: 160px; }
.pr-filters select:disabled { opacity: .55; cursor: not-allowed; }
/* the reference table: one grid template for the head and every row, set by the view from the columns on screen */
.pr-scroll { overflow-x: auto; }
.pr-grid { min-width: var(--pr-min); }
.pr-th, .pr-row { display: grid; grid-template-columns: var(--pr-cols); align-items: center; gap: 10px; padding: 0 12px; }
.pr-th { height: 30px; background: var(--subtle); border-bottom: 1px solid rgba(32,30,29,.1); }
.pr-h { display: block; min-width: 0; padding: 0; border: 0; background: none; font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pr-h { cursor: pointer; }
button.pr-h:hover, .pr-h.on { color: var(--ink); }
.pr-h.r { text-align: right; }
.pr-row { height: 32px; border-bottom: 1px solid rgba(32,30,29,.08); font: 400 12.5px/1.2 var(--sans); color: var(--ink); cursor: pointer; transition: background .12s; }
.pr-row:hover { background: rgba(32,30,29,.03); }
.pr-row.open { background: var(--tint); }
.pr-row > * { min-width: 0; }
.pr-c-chk { display: grid; place-items: center; }
.pr-chk { position: relative; display: grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 1.5px solid rgba(32,30,29,.26); border-radius: 3px; background: #fff; cursor: pointer; }
.pr-chk::after { content: ""; position: absolute; inset: -6px; } /* a hit area larger than the box */
.pr-chk:hover { border-color: var(--blue); }
.pr-chk.on { border-color: var(--blue); background: var(--blue); }
.pr-c-ref { display: flex; min-width: 0; }
.pr-ref { display: inline-block; max-width: 92px; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; cursor: pointer; transition: border-color .16s, color .16s; } /* inline-block: a flex box cannot ellipsize its text */
.pr-ref:hover { border-color: var(--blue); color: var(--blue-hover); }
.pr-watch { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-watch b { font-weight: 600; }
.pr-num { display: block; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pr-med { font-weight: 700; }
.pr-chg.up { color: var(--good-ink); }
.pr-chg.down { color: var(--red); }
.pr-chg.strong { font-weight: 700; }
.pr-na { color: var(--muted); cursor: help; }
.pr-c-trend { display: flex; align-items: center; }
.pr-spark { display: block; color: var(--muted); }
.pr-spark.up { color: var(--good-ink); }
.pr-spark.down { color: var(--red); }
.pr-cc, .pr-small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.pr-small.pr-num { text-align: left; }
.pr-bp { display: flex; align-items: center; gap: 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.pr-bar { display: block; flex: 1; height: 5px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.pr-link { padding: 0; border: 0; background: none; font: 600 12px/1.3 var(--sans); color: var(--blue); cursor: pointer; }
.pr-link:hover { color: var(--blue-hover); }
.pr-link:disabled { color: var(--muted); cursor: default; }
#pr-body.pr-busy { opacity: .55; transition: opacity .2s; } /* a refetch keeps the frame, dimmed, rather than a loader */
/* the open row: the chart and the closed sales; stacked under 1000px */
.pr-panel { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 16px; padding: 14px 16px 16px 44px; background: var(--subtle); border-bottom: 1px solid rgba(32,30,29,.14); cursor: default; animation: fadeUp .3s var(--ease) both; }
@media (max-width: 1000px) { .pr-panel { grid-template-columns: minmax(0,1fr); } }
.pr-left, .pr-right { min-width: 0; }
.pr-hl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pr-big { font: 700 22px/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-hl-sub { font: 400 12px/1.3 var(--sans); color: var(--muted); }
.pr-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-chart { position: relative; height: 150px; margin-top: 8px; }
.pr-svg { display: block; overflow: visible; }
.pr-gl { font: 400 10px/1 var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--subtle); stroke-width: 3px; stroke-linejoin: round; }
.pr-dot { transition: r .12s; }
circle.pr-dot.lit { r: 4.5px; fill: var(--blue); stroke: #fff; stroke-width: 1.5px; }
path.pr-dot.lit { fill: var(--blue); }
.pr-xl { display: flex; justify-content: space-between; margin-top: 2px; font: 400 10.5px/1.3 var(--sans); color: var(--muted); }
.pr-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font: 400 11px/1.3 var(--sans); color: var(--muted); }
.pr-key { display: inline-flex; align-items: center; gap: 5px; }
.pr-tip { position: absolute; z-index: 3; max-width: 290px; padding: 8px 10px; border-radius: 8px; background: #201E1D; color: #fff; font: 400 12px/1.45 var(--sans); pointer-events: none; box-shadow: 0 8px 24px rgba(32,30,29,.2); }
.pr-tip b { display: block; font: 600 13.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.pr-tip span { display: block; color: rgba(255,255,255,.82); }
.pr-tip .pr-tip-h { color: #fff; font-weight: 600; margin-bottom: 2px; }
.pr-tip .pr-tip-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pr-tip .pr-tip-row b { display: inline; font-size: 12.5px; color: #fff; }
.pr-pending { height: 150px; margin-top: 8px; border-radius: 8px; background: var(--fill); }
.pr-pending.list { height: 132px; }
.pr-pending.tall { height: 240px; }
.pr-pending.strip { display: block; width: 100%; height: 30px; margin: 0; }
.pr-right .eyebrow { display: block; margin-bottom: 4px; }
.pr-right .pr-link { margin-top: 8px; }
.pr-sales.all { max-height: 320px; overflow: auto; }
.pr-sale { display: grid; grid-template-columns: 44px minmax(0,1fr) 62px 50px 18px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(32,30,29,.08); font: 400 12px/1.3 var(--sans); }
.pr-sale-d { color: var(--muted); white-space: nowrap; }
.pr-sale-d small { display: block; font-size: 9.5px; line-height: 1.15; white-space: normal; }
.pr-sale-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sale-m { font-size: 10.5px; color: var(--muted); }
.pr-sale-p { font-weight: 700; }
.pr-sale-v { font-size: 11px; }
.pr-sale-v.up { color: var(--good-ink); }
.pr-sale-v.down { color: var(--red); }
.pr-sale-a { text-align: right; text-decoration: none; color: var(--blue); }
.pr-sale-a:hover { color: var(--blue-hover); }
/* the compare bar: the .guide pill's look, pinned to the foot of the pane */
.pr-cmpbar { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 8; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px; border-radius: 999px; background: rgba(32,30,29,.95); color: var(--paper); font: 400 12.5px/1 var(--sans); box-shadow: 0 20px 50px rgba(32,30,29,.4); animation: fadeUp .3s var(--ease) both; }
.pr-cmpbar.lift { bottom: 72px; } /* above the guide pill when it shows */
.pr-cmpbar:not(.lift) { right: 100px; } /* R56 (5 October 2026): the Guide pill (#guide-open, 30px in from the desk's corner) sat over the tray until the tray became a drawer. It now sits over the main column's bottom-right corner, 72px wide from the pane's edge, and covered this bar's × at every width and Compare side by side at 1000 and under (measured). While it shows, which is whenever the tour does not (.lift), the bar ends short of it. */
.pr-cmp-chips { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
@media (max-width: 1000px) { .pr-cmpbar { gap: 8px; padding: 10px 10px 10px 16px; } .pr-cmp-eye { display: none; } .pr-cmp-go { padding: 0 12px; } } /* at the 900px floor the bar holds three chips, + n more and its two buttons */
.pr-cmp-eye { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,242,242,.55); }
.pr-cmp-chip { padding: 3px 7px; border: 1px solid rgba(243,242,242,.4); border-radius: 4px; font: 600 11px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; }
.pr-cmp-more { color: rgba(243,242,242,.55); white-space: nowrap; }
.pr-cmp-go { margin-left: auto; height: 30px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 12.5px/1 var(--sans); white-space: nowrap; transition: transform .16s, background .16s; }
.pr-cmp-go:hover { transform: scale(1.04); background: #fff; }
.pr-cmp-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: rgba(243,242,242,.6); font-size: 16px; line-height: 1; transition: background .16s, color .16s; }
.pr-cmp-x:hover { background: rgba(243,242,242,.14); color: var(--paper); }
/* the compare view: one indexed chart, a stat strip per reference, the table under it */
.pr-compare { animation: fadeUp .3s var(--ease) both; }
.pr-cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; font: 400 12px/1.3 var(--sans); }
.pr-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; font: 400 12px/1.3 var(--sans); }
.pr-leg { display: inline-flex; align-items: center; gap: 6px; }
.pr-cchart { position: relative; height: 240px; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; }
.pr-csvg { display: block; overflow: visible; }
.pr-yl { font: 400 10.5px/1 var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.pr-clab { font: 600 11px/1 var(--mono); fill: var(--ink); }
.pr-strips { display: grid; gap: 8px; margin-top: 12px; }
.pr-strip { display: grid; grid-template-columns: 270px minmax(0,1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(32,30,29,.14); border-radius: 9px; background: #fff; }
@media (max-width: 1180px) { .pr-strip { grid-template-columns: minmax(0,1fr); } }
.pr-strip-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-strip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.pr-stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.pr-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-stat b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.pr-ctable { margin-top: 12px; font: 400 12px/1.4 var(--sans); }
.pr-ctable summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.pr-ctable-scroll { max-height: 280px; overflow: auto; }
.pr-empty .c-btn { margin-top: 14px; }

/* ── Photos on the comparables (R56, 5 October 2026) ─────────────────
   Henry, 5 October: "we need to show big images on comparables in row". The
   recorded sales a value rests on (the watchlist's, lot-sales.js; the Prices
   closed sales, views/prices.js) lead with the sale's first photo, big: a
   button that opens all of the sale's photos in R21's overlay
   (photo-viewer.js, the .pv rules above). Tokens only. Nothing may scroll
   sideways at 900, 1000, 1180 or 1440 with the right tray on screen: measured
   on R55 there, the recorded sales' table is 966, 706, 530 and 430px wide and
   the Prices panel 1040, 780, 600 and 500px. */
/* the box: the lead photo, cut to 4:3, or the same box, dashed, in words */
.sp-photo { position: relative; display: grid; place-items: center; flex: none; width: 120px; height: 90px; padding: 0; border: 1px solid rgba(32,30,29,.14); border-radius: 8px; background: var(--fill); overflow: hidden; color: var(--muted); font: 500 11px/1.3 var(--sans); text-align: center; }
button.sp-photo { cursor: zoom-in; }
.sp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease); }
button.sp-photo:hover img { transform: scale(1.04); }
.sp-photo:focus-visible { border-radius: 8px; } /* the app's focus ring rounds to 4px; the box keeps its own 8 */
.sp-photo.none, .sp-photo.failed { border-style: dashed; background: var(--subtle); }
.sp-photo.none { padding: 6px; }
.sp-fail { display: none; padding: 6px; }
.sp-photo.failed img { display: none; }
.sp-photo.failed .sp-fail { display: block; }
.sp-count { position: absolute; right: 5px; bottom: 5px; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(32,30,29,.78); color: #fff; font: 600 10.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.sp-photo.pr { width: 96px; height: 72px; }
/* the viewer: a photo that will not load is words in its place, never another picture */
.sp-fail-big { display: none; margin: 0; }
.pv-fig.failed img { display: none; }
.pv-fig.failed .sp-fail-big { display: grid; place-items: center; width: calc(100vw - 152px); height: calc(100vh - 150px); padding: 24px; border: 1px dashed rgba(243,242,242,.3); border-radius: 12px; background: var(--ground); color: var(--paper); font: 400 15px/1.5 var(--sans); text-align: center; }
@media (max-width: 640px) { .pv-fig.failed .sp-fail-big { width: calc(100vw - 32px); height: calc(100vh - 170px); } }
/* the watchlist's recorded sales: R51's columns, one place to the right of the photo. R51 sizes them by place (nth-child), so each is sized again here for this table. */
.c-ls-table.ph th:nth-child(1) { width: 136px; }
.c-ls-table.ph th:nth-child(2) { width: 104px; }
.c-ls-table.ph th:nth-child(3) { width: 116px; }
.c-ls-table.ph th:nth-child(4) { width: auto; }
.c-ls-table.ph th:nth-child(5) { width: 204px; }
.c-ls-table.ph th:nth-child(6) { width: 150px; }
.c-ls-amt-sm, .c-ls-links-sm { display: none; }
.c-ls-amt-sm { margin-top: 2px; white-space: normal; }
.c-ls-amt-sm b { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-ls-links-sm { margin-top: 4px; }
.c-ls-links-sm a { margin-right: 10px; color: var(--blue-hover); font-weight: 600; text-decoration: none; }
.c-ls-links-sm a:hover { text-decoration: underline; }
.c-ls-fold { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; font: 600 12px/1.3 var(--sans); color: var(--blue); cursor: pointer; }
.c-ls-fold:hover { color: var(--blue-hover); }
/* under 1320px the kind goes under the date and the links stack, as R51 does under 1100px: with the photo's 136px the full row needs a 846px table, and at 1180 it has 706.
   R56 integration (5 October 2026): those widths were with the 254px tray beside the main column. It is a drawer over the content now, so the
   table is 254px wider at every width (1220, 960, 784 and 684px at 1440, 1180, 1000 and 900). The full row keeps the platform 180px or more
   from 1111px up, so this starts at 1110; below it the platform has 244px or more down to the 900px floor, so the photo stays 120 x 90 and
   the end price keeps its column at every width. */
@media (max-width: 1110px) {
  .c-ls-table.ph th:nth-child(5), .c-ls-table.ph td.c-ls-kind { display: none; }
  .c-ls-table.ph .c-ls-kind-sm { display: block; }
  .c-ls-table.ph th:nth-child(6) { width: 84px; }
  .c-ls-table.ph .c-ls-links { white-space: normal; }
  .c-ls-table.ph .c-ls-links a { display: block; margin: 0 0 3px; }
}
/* R51 hides its 4th header at 1100px and under, which was its kind; here the 4th is the platform, so it stays. R56 integration (5 October 2026):
   until the tray became a drawer, this block also made the photo 96 x 72 and moved the end price and the links under the date and the platform,
   for a 430px table at 900; the table is 684px there now, and the layout above fits it. The small copies (.c-ls-amt-sm, .c-ls-links-sm) stay hidden. */
@media (max-width: 1100px) {
  .c-ls-table.ph th:nth-child(4) { display: table-cell; }
}
/* Prices, on the live service: the sales column takes what the chart leaves over its 360px, from 320 to 480px (420 before), so at 1180 the chart keeps 360; stacked at 1000 and under, as R55 is */
.pr-panel.ph { grid-template-columns: minmax(0,1fr) clamp(320px, calc(100% - 376px), 480px); }
@media (max-width: 1000px) { .pr-panel.ph { grid-template-columns: minmax(0,1fr); } }
.pr-panel.ph .pr-sales.all { max-height: 540px; }
.pr-sale.ph { grid-template-columns: 96px minmax(0,1fr) auto 18px; gap: 10px; padding: 6px 0; }
.pr-sale-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-sale-l1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pr-sale-l1 .pr-sale-h { color: var(--ink); font-weight: 600; }
.pr-sale.ph .pr-sale-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-sale-u { font-size: 9.5px; line-height: 1.15; color: var(--muted); }
.pr-sale-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

/* ── The market today on Prices (B, 13 October 2026) ─────────────────
   Henry, 13 October: popularity beside the prices; the first-party slice
   (views/prices.js, "the market today"). The On sale column (56px after Sales,
   COLS), a line under an opened reference's median with its lots on sale now
   and its rank, its dated sales per week as bars under its chart, and On sale
   in the compare strips. A figure not measured says "not available" in
   Search's own look (.c-na), small enough to sit in the 56px column on two
   lines. Tokens and the chart's own values only. */
.pr-nav { font-size: 10.5px; line-height: 1.1; font-weight: 400; white-space: normal; cursor: help; }
.pr-num .pr-nav { display: block; text-align: right; }
.pr-today { margin-top: 6px; font: 400 12px/1.45 var(--sans); color: var(--body); }
.pr-today-l { margin: 0; }
.pr-today b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-today .pr-nav, .pr-stat .pr-nav { font-size: 12px; line-height: 1.3; }
.pr-weeks { margin-top: 10px; font: 400 10.5px/1.3 var(--sans); color: var(--muted); }
.pr-bars { position: relative; height: 44px; margin-top: 2px; }
.pr-bsvg { display: block; overflow: visible; }
.pr-wbar { transition: fill .12s; }
.pr-wbar.lit { fill: var(--blue-hover); }

/* ── The lots its searches returned (R57, 6 October 2026) ────────────
   Henry, 6 October: "why cant the assistant get the same 20 row search as search". Under an Assistant answer's cards
   (views/assistant.js foundHtml), a compact table of every lot the turn's tools returned: a 48px photo in rowThumb's
   look, the tag and the platform over the title, then the bid, the estimate and the close, "not available" in the
   cards' muted style. Eight rows, then Show all, a pill like the work block's. Tokens and the app's own border values
   only, no new colour. Nothing may scroll sideways at 1440, 1180, 1000 or 900: the tray is a drawer over the content,
   so the table is the answer's own width, 1251, 991, 811 and 711px there (measured on R57), inside the thread's 30px
   right padding, where the drawer's handle hangs. With all five columns the lot's had 197px at 900. */
.as-found { min-width: 0; }
.as-found-table { width: 100%; table-layout: fixed; border-collapse: collapse; font: 400 12.5px/1.4 var(--sans); color: var(--ink); }
.as-found-table caption { padding: 0 0 8px; text-align: left; }
.as-found-table th { padding: 6px 8px; border-bottom: 1px solid rgba(32,30,29,.1); font: 600 11px/1.3 var(--sans); color: var(--muted); text-align: left; }
.as-found-table td { padding: 7px 8px; border-bottom: 1px solid rgba(32,30,29,.06); vertical-align: top; }
.as-found-table th.as-f-ph { width: 64px; }
.as-found-table th.as-f-bid, .as-found-table th.as-f-est, .as-found-table th.as-f-when { width: 150px; }
.as-f-ph a, .as-f-thumb { display: block; width: 48px; }
.as-f-top { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; margin-bottom: 4px; }
.as-f-plat { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.3 var(--sans); color: var(--muted); }
.as-f-in { flex: none; padding: 2px 7px; border-radius: 999px; background: var(--tint); color: var(--blue-hover); font: 600 10.5px/1.3 var(--sans); white-space: nowrap; }
.as-f-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 13px/1.35 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.as-f-title:hover { color: var(--blue-hover); }
td.as-f-bid, td.as-f-est, td.as-f-when { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.as-found .na { font-weight: 400; font-style: italic; color: var(--faint); }
.as-f-sm { display: none; margin-top: 3px; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.as-found-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.as-found-fold { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border: 1px solid rgba(32,30,29,.14); border-radius: 999px; background: #fff; font: 500 12px/1 var(--sans); color: var(--muted); transition: border-color .16s, color .16s; }
.as-found-fold:hover { border-color: rgba(32,30,29,.4); color: var(--ink); }
.as-found-fold svg { flex: none; transform: rotate(90deg); transition: transform .16s var(--ease); }
.as-found-fold[aria-expanded="true"] svg { transform: rotate(-90deg); }
.as-found-listed { font: 400 12px/1.4 var(--sans); color: var(--muted); }
/* 1100px and under the estimate is written under the bid and its column goes, as R51 and R56 write the kind under the date: the lot's column then has 427px at 1000 and 327px at 900 (measured) */
@media (max-width: 1100px) {
  .as-found-table th.as-f-est, .as-found-table td.as-f-est { display: none; }
  .as-found-table th.as-f-bid { width: 170px; }
  .as-f-est-sm { display: block; }
}
/* phone width, behind the shell's notice today: the close goes under the bid too, so the fixed columns never add up to more than the table */
@media (max-width: 640px) {
  .as-found-table th.as-f-when, .as-found-table td.as-f-when { display: none; }
  .as-found-table th.as-f-bid { width: 130px; }
  .as-f-when-sm { display: block; }
}

/* ── The person's mark (R58, 6 October 2026) ─────────────────────────
   Henry, 6 October: one of eight animated marks is the person's picture in the rail and the agent's avatar in Search and
   the Assistant. marks.js draws them in <auc-mark>, a canvas that fills its own box. The discs under a mark are the
   picker's own: #0c0c0e at the small sizes, its .orb-frame (a faint light from above on #0b0b0d, a hairline inner ring)
   at the large. The brand's .fr-mark is unchanged. */
.ava { border-radius: 50%; background: #0c0c0e; }
.ava auc-mark { width: 26px; height: 26px; }
.as-turn > .ava { transition: transform .4s var(--ease); } /* the Assistant's avatar glides to the live line and back (assistant.js glide); the reduced-motion rule at the top drops the ease */
.rail-avatar { background: #0c0c0e; }
.rail-avatar auc-mark { width: 30px; height: 30px; }
.rail-avatar.on, .rail-avatar.on:hover { background: #0c0c0e; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--scan-solid); } /* Settings open: the mark covers the disc, so the state is a ring, the rail's colour between */
.profile .avatar { background: #0c0c0e; }
.profile .avatar auc-mark { width: 50px; height: 50px; }
/* Settings > Customise: the person's mark large, the working pill as the picker draws it, then the eight cards, four
   across while each keeps at least 132px (the 112px disc and its padding), fewer below; 140px each at 900. */
.cu-orb { flex: none; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.045), transparent 55%), #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.cu-orb auc-mark { width: 104px; height: 104px; }
.cu-orb.cu-big { width: 128px; height: 128px; }
.cu-orb.cu-big auc-mark { width: 120px; height: 120px; }
.cu-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 18px; padding: 16px 20px 16px 16px; border: 1px solid rgba(32,30,29,.1); border-radius: 13px; background: #fff; }
.cu-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cu-who .eyebrow { margin-bottom: 5px; }
.cu-who .cu-name { font: 400 26px/1.1 var(--serif); color: var(--ink); }
.cu-who .cu-kind { font: 400 13px/1.4 var(--sans); color: var(--muted); }
.cu-work { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-left: auto; min-width: 0; }
.cu-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: #161618; color: #ececee; font: 500 13.5px/1 var(--sans); white-space: nowrap; box-shadow: 0 8px 24px rgba(32,30,29,.2); }
.cu-pill auc-mark { flex: none; width: 24px; height: 24px; }
.cu-cap { font: 400 12px/1.45 var(--sans); color: var(--muted); }
.cu-error { margin-top: 12px; }
.cu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(132px, calc((100% - 30px) / 4)), 1fr)); gap: 10px; margin-top: 12px; }
.cu-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 14px 8px 13px; border: 1.5px solid rgba(32,30,29,.12); border-radius: 13px; background: #fff; text-align: center; transition: border-color .16s, background .16s, transform .16s; }
.cu-card:hover { border-color: rgba(32,30,29,.32); transform: translateY(-1px); }
.cu-card.on { border-color: var(--blue); background: var(--tint); }
.cu-card .cu-orb { margin-bottom: 10px; }
.cu-card .cu-name { font: 600 13.5px/1.3 var(--sans); color: var(--ink); }
/* The Guide pill's clearance. With the tour closed (.no-guide), the pill (#guide-open, 30px in from the desk's corner)
   sat over the right end of the Assistant composer's bottom row, on New conversation: measured at 1440, 1180, 1000 and
   900, the pill spans 91px to 30px in from the window's right edge and 64px to 30px up from its foot, and the button's
   right edge was 62px in, 78px to 48px up. The row ends 40px short of the composer's edge, as R56 gave the compare bar
   its clearance (.pr-cmpbar:not(.lift)), which leaves 11px to the pill. Search's bottom row is its tool chips, which
   start at the left and end some 250px or more before the pill at every one of those widths, so it needs nothing. */
.as-composer-wrap.no-guide .as-row { padding-right: 40px; }

/* ── The free mark, the first run and its rolling suggestions (R62, 6 October 2026) ─────────────
   Henry, 6 October: the person's mark "released from its cage inside the chat / assistant / search ... a different
   colour from background and roam freely, well within a parameter", the same mark "above the what are you dreaming
   of replacing the logo", the subtext under that heading cut, and the suggestions rolling like a slot-machine reel.
   Tokens only, no new colours.
   The agent's avatar: R58's disc goes, and marks.js draws a free mark in its own colour, the brand's blue (--blue, the
   primary buttons'), roaming inside these bounds, px from where it sits. Its gutter: the thread's 30px left padding,
   the 26px avatar, the message's 11px gap to its body. Left 20px keeps 10px from the thread's edge; right 6px keeps
   the box 5px clear of the body's text and controls; up 6px stays in the gap between blocks (15px in Search, 12px
   and 26px in the Assistant; above an agent's message the person's own sits at the right, never in the gutter);
   down reaches as far as its message runs on beside its body, 40px at most, so it never leaves its own message
   (marks.js reads that room).
   R67 (7 October 2026). Henry, 7 October: "the mark ... should not move around sporadically like i said, can it just
   stay in one place please and go through its animation". Every bound is 0: a free mark stays where it sits, keeps
   its colour and plays its own motion, quicker while it works (marks.js stepRoam holds it at 0 inside bounds of 0). */
.ava { background: none; }
auc-mark[free] { color: var(--blue); }
.ava auc-mark[free] { --roam-left: 0px; --roam-right: 0px; --roam-up: 0px; --roam-down: 0px; --roam-down-max: 0px; }
/* The first run: the mark where the brand's mark was, above the heading. R67: "before anything is searched can we make
   it bigger please the mark, so that it is more prominent": 120px on a tall window, never under 72px on a short one
   (15% of the window's height between), and still, as every free mark is. */
.fr-pen { --fr-mark: clamp(72px, 15vh, 120px); flex: none; display: grid; place-items: center; width: calc(var(--fr-mark) + 8px); height: calc(var(--fr-mark) + 8px); }
.fr-pen auc-mark { width: var(--fr-mark); height: var(--fr-mark); --roam-left: 0px; --roam-right: 0px; --roam-up: 0px; --roam-down: 0px; }
.first-run .starters { margin-top: 18px; max-width: 600px; } /* 236px of line in a chip: the longest suggestion measured, a cap in forints, is 229px */
/* The suggestions' drum (suggest.js). The line sits in a window as tall as the chip inside its border (its 9px of
   padding above and below are the window's too, so the chip keeps its height) and fading at both ends; a roll sends
   the line up and out over the drum's curve and brings the next one up from below, each blurred and faded while it
   moves. One line, so no chip ever changes size. */
.starter .drum { position: relative; flex: 1; min-width: 0; height: calc(1.3em + 18px); margin: -9px 0; overflow: hidden; perspective: 160px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); }
.starter .drum-line { position: absolute; left: 0; right: 0; top: 9px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; backface-visibility: hidden; }
.starter .drum-line.out { animation: drumOut .52s cubic-bezier(.45, 0, .2, 1) both; } /* a reel's turn: it gathers, rolls, and settles; the house --ease is spent in its first 120ms */
.starter .drum-line.in { animation: drumIn .52s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes drumOut { from { transform: translateY(0) rotateX(0); opacity: 1; filter: blur(0); } to { transform: translateY(-115%) rotateX(50deg); opacity: 0; filter: blur(2.5px); } }
@keyframes drumIn { from { transform: translateY(115%) rotateX(-50deg); opacity: 0; filter: blur(2.5px); } to { transform: translateY(0) rotateX(0); opacity: 1; filter: blur(0); } }
/* R69 (7 October 2026): the Assistant's empty state rolls too. Henry, 7 October: "the queries dont cycle for the
   assistant". Its suggestions are questions, two lines in their chips, so its drum holds two lines (the chip keeps
   the height its two lines gave it before) and fades only in the chip's padding, so no line is faded at rest. */
.as-starter .drum { height: calc(2.6em + 18px); perspective: 240px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9px, #000 calc(100% - 9px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 9px, #000 calc(100% - 9px), transparent); }
.as-starter .drum-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }

/* ── Indicative Margins (R63, 7 October 2026) ──────────────────────────────────
   A Margin whose value supports no band (indicative.js; the API's src/margin-bands.js) wears no band's colour. On the
   Margin page its pill has a dotted edge and the word "indicative" under it; the Watchlist's figure and Discover's
   card are muted and say it in words. Each says why in its title. Search's row pill styles itself inline, as every
   pill in chat.js does. */
.badge.indicative { padding: 2px 7px; border: 1px dotted rgba(32,30,29,.42); background: rgba(32,30,29,.04); color: var(--body); letter-spacing: 0; }
.badge.est.indicative { border-style: dashed; background: transparent; color: var(--muted); }
.pk-ind { font: 600 10.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.c-wl-margin.ind b { color: var(--body); }
.c-wl-margin .c-marg-ind { display: block; font: 600 10.5px/1.35 var(--sans); letter-spacing: .02em; color: var(--muted); }
.g-margin.ind b { color: rgba(243,242,242,.8); }
.g-card.band .g-margin.ind b { color: var(--body); }

/* ── Team rings (R65, 7 October 2026) ───────────────────────────────────────────
   Henry, 7 October: the favourite brand "could represent the coulour of a faint outline ring around their PFP". The
   person's team (/shared/teams.js) sets --team on the disc, its colour at 80%: the rail's dark step there, a page's
   light step on Settings' discs. Settings open keeps its own ring outside the team's, the rail's colour between. */
.rail-avatar[data-team] { box-shadow: 0 0 0 1.5px var(--team); }
.rail-avatar[data-team]:hover { box-shadow: 0 0 0 1.5px var(--team), 0 0 0 4.5px rgba(243,242,242,.18); }
.rail-avatar.on[data-team], .rail-avatar.on[data-team]:hover { box-shadow: 0 0 0 1.5px var(--team), 0 0 0 3.5px var(--ink), 0 0 0 5.5px var(--scan-solid); }
.profile .avatar[data-team] { box-shadow: 0 0 0 1.5px var(--team); }
.cu-orb.cu-big[data-team] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 2px var(--team); }
.cu-team { margin-top: 26px; }
.cu-team .cu-cap { margin: 4px 0 0; }
.cu-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cu-team-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border: 1.5px solid rgba(32,30,29,.14); border-radius: 999px; background: #fff; color: var(--ink); font: 600 13px/1 var(--sans); transition: border-color .16s, background .16s; }
.cu-team-btn:hover { border-color: rgba(32,30,29,.32); }
.cu-team-btn.on { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
.cu-team-btn i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #0c0c0e; box-shadow: 0 0 0 1.5px var(--team, rgba(32,30,29,.28)); }

/* ── What next with the lots listed (R83, 9 October 2026) ─────────────────────
   Henry, 9 October: Apollo's options after a search, "but make it more subtle than apollo". One line of small text
   under Search's results and under an Assistant answer's lots (next-steps.js): no box and no fill. Watch all is the
   suggestion, in the brand blue; the rest are in the muted ink, faintly underlined so they read as presses. What a
   press did takes its place: ticked when it did all it could, in the risk ink when something stopped it. */
.nx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; margin: 10px 2px 0; font: 400 12.5px/1.6 var(--sans); color: var(--muted); }
.nx-dot { color: rgba(32,30,29,.3); }
.nx-act { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(32,30,29,.22); text-underline-offset: 3px; }
.nx-act:hover { color: var(--ink); text-decoration-color: currentColor; }
.nx-act.nx-first { color: var(--blue); font-weight: 600; text-decoration-color: rgba(65,105,225,.35); }
.nx-act.nx-first:hover { color: var(--blue-hover); text-decoration-color: currentColor; }
.nx-act:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.nx-said { color: var(--body); }
.nx-said.nx-busy { color: var(--muted); }
.nx-said.nx-warn { color: var(--risk-ink); }
.nx-chk { display: inline-flex; margin-right: 4px; color: var(--good-ink); }

/* ── Placeholders clear on focus (U, 7 October 2026) ────────────────
   Henry, 7 October: "placeholders on text fields should go away after text fields have been clicked on". A field's
   placeholder clears once the field has focus, not at the first letter typed. Last in the file, after every placeholder
   colour above (.composer input, .pal-bar input, .as-input). */
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }

/* ── Prices redesign (14 October 2026) ────────────────────────────────
   Henry's Design canvas, three boards (Main, Reference, Compare; the in-row
   view is its layout B). The market pulse, brand cards tinted by their move
   (the handoff's oklch formula, as R55's tiles), the biggest moves and the
   attention-against-price quadrant over the table; a row opening to layout
   B: the median, four tiles, the chart and the actions on the left, the
   closed sales as 176px photo tiles on the right, two thirds of the width;
   the reference page (the chart at full width, a sale picked by a click,
   the histogram, who sold it, every sale, week by week); the compare view
   as chips, a picker, the indexed chart and a card per reference. Search
   interest is the caution hue (oklch 70) at the app's own steps, apart from
   the chart's blue; the switch dims its marks (.pr-int-off .pr-int). R55's
   rules above stay for the table, the sample state's list and the bar; the
   rules here add to them. Tokens and the chart's own values only. */
.pr-head .pr-int-btn { display: inline-flex; align-items: center; gap: 7px; }
.pr-int-btn.on { border-color: oklch(78% .10 70); background: oklch(95.5% .035 70); }
.pr-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.pr-swatch.blue { background: var(--blue); }
.pr-swatch.int { background: oklch(52% .15 70); }
.pr-swatch.line { width: 18px; height: 3px; border-radius: 2px; }
.pr-swatch.line.dashed { height: 0; background: none; border-top: 2px dashed oklch(52% .15 70); }
.pr-swatch.bars { background: rgba(65,105,225,.35); }
.pr-swatch.dot { width: 12px; height: 12px; border-radius: 50%; }
.pr-int-off .pr-int { opacity: .35; }
.pr-legend .pr-leg { font-size: 12px; color: var(--muted); }
.pr-series-na { display: grid; place-items: center; min-height: 150px; padding: 18px; border: 1.5px dashed rgba(32,30,29,.2); border-radius: 11px; background: var(--subtle); color: var(--muted); font: 400 12.5px/1.5 var(--sans); text-align: center; }
.pr-series-na p { margin: 0; max-width: 520px; }
.pr-series-na.small { min-height: 0; padding: 14px; margin: 0; }
.pr-series-na.in-quad { position: absolute; inset: 36px 12px; min-height: 0; margin: 0; border: 0; background: none; }
/* the sections: a card frame, its head, the section heads */
.pr-card { padding: 16px 18px; border: 1px solid rgba(32,30,29,.14); border-radius: 14px; background: #fff; min-width: 0; }
.pr-card-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.pr-card-head.row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pr-card-head.row > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-card h3, .pr-sec-head h3, .pr-showing-h { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.pr-card-head p { margin: 0; font: 400 12px/1.45 var(--sans); }
.pr-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-sec-title { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
/* the market pulse */
.pr-pulse { display: flex; gap: 22px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 18px; border: 1px solid rgba(32,30,29,.14); border-radius: 14px; background: #fff; }
.pr-pulse-side { flex: 1 1 220px; max-width: 280px; display: flex; flex-direction: column; gap: 10px; }
.pr-pulse-sub { margin: 3px 0 0; font-size: 12px; }
.pr-pcard { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--subtle); }
.pr-pcard.blue { background: var(--tint); }
.pr-pcard.int { background: oklch(95.5% .035 70); }
.pr-pcard-l { display: flex; align-items: center; gap: 7px; font: 400 12px/1.3 var(--sans); color: var(--muted); }
.pr-pcard-v { font: 500 26px/1.15 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-pcard-v .pr-nav { font-size: 13px; line-height: 1.3; font-style: italic; }
.pr-pulse-chart { flex: 3 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-pulse-chart .pr-series-na { flex: 1; min-height: 190px; }
.pr-pulse-legend { margin: 0; }
/* the brand cards: R55's six-across grid, grown to cards that wrap by width */
.pr-brands { margin-bottom: 18px; }
.pr-heat.cards { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 10px; margin-bottom: 0; }
.pr-heat.cards .pr-tile { gap: 8px; padding: 12px 14px; border-radius: 11px; }
.pr-heat.cards .pr-tile-top b { font-size: 14px; }
.pr-tile-chg.up, .pr-tile-chg.down, .pr-tile-chg.flat { padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.55); font-size: 12px; }
.pr-heat.cards .pr-tile-sub { font-size: 11.5px; }
.pr-tile-int { display: flex; align-items: center; gap: 8px; font: 400 11.5px/1.3 var(--sans); color: var(--muted); }
.pr-tile-int .pr-nav { font-size: 11px; }
.pr-tile-int .pr-num { color: var(--ink); }
.pr-bar.int i { background: oklch(52% .15 70); }
.pr-bar.grey i { background: #8a8884; }
.pr-bar.up i { background: var(--good-ink); }
.pr-bar.down i { background: var(--red); }
.pr-bar.tall { height: 12px; border-radius: 4px; }
.pr-bar.tall i { border-radius: 4px; }
/* the biggest moves and the quadrant: two cards side by side, one under 1000px */
.pr-insight { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1000px) { .pr-insight { grid-template-columns: minmax(0,1fr); } }
.pr-movers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.pr-mover-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr-mover-h { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pr-mover-h.up { color: var(--good-ink); }
.pr-mover-h.down { color: var(--red); }
.pr-mover { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pr-mover .pr-bar { height: 8px; border-radius: 4px; }
.pr-mover .pr-bar i { border-radius: 4px; }
.pr-mover-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font: 400 12.5px/1.3 var(--sans); }
.pr-mover-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-mover-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mover .pr-chg { flex: none; font-weight: 600; }
.pr-quad-wrap { display: flex; gap: 8px; }
.pr-quad-y { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 11px/1 var(--sans); color: var(--muted); text-align: center; }
.pr-quad-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-quad { position: relative; height: 240px; border: 1px solid rgba(32,30,29,.14); border-radius: 10px; background: var(--subtle); overflow: hidden; }
.pr-quad-h { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(32,30,29,.22); }
.pr-quad-v { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed rgba(32,30,29,.22); }
.pr-quad-l { position: absolute; font: 600 11px/1 var(--sans); color: var(--muted); }
.pr-quad-l.tr { right: 10px; top: 10px; }
.pr-quad-l.br { right: 10px; bottom: 10px; }
.pr-quad-l.tl { left: 10px; top: 10px; }
.pr-quad-l.bl { left: 10px; bottom: 10px; }
.pr-quad-l.up { color: var(--good-ink); }
.pr-quad-l.down { color: var(--red); }
.pr-quad-x { display: flex; justify-content: space-between; font-size: 11px; }
.pr-qdot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: 500 11px/1 var(--sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.pr-qdot i { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--good-ink); box-shadow: 0 0 0 1px var(--good-ink); }
.pr-qdot.down i { background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.pr-qdot.on { font-weight: 700; }
.pr-qdot.on i { box-shadow: 0 0 0 3px currentColor; }
.pr-qdot:hover span { text-decoration: underline; }
/* the table: the chevron on the watch, the change as a pill, the sales bar, the trend pair */
.pr-showing-h { margin-right: 4px; }
.pr-watch { display: flex; align-items: center; gap: 6px; }
.pr-watch .pr-chev { flex: none; color: var(--chev); transition: transform .15s; }
.pr-watch.open .pr-chev { transform: rotate(90deg); color: var(--blue); }
.pr-chg.pill { display: inline-block; padding: 2px 7px; border-radius: 999px; font: 500 11.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.pr-chg.pill.up { color: var(--good-ink); background: oklch(95.5% .035 150); }
.pr-chg.pill.down { color: var(--red); background: oklch(95.5% .035 25); }
.pr-chg.pill.none { color: var(--muted); background: var(--fill); cursor: help; }
.pr-sales-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pr-sales-cell .pr-num { width: 24px; }
.pr-sales-cell .pr-bar { height: 5px; }
.pr-c-trend.two { gap: 6px; }
.pr-c-trend .pr-int { display: inline-flex; align-items: center; gap: 4px; }
.pr-tag-brand { padding: 1px 5px; border-radius: 999px; background: var(--fill); font: 500 10px/1.3 var(--sans); color: var(--muted); }
.pr-spark.int { color: oklch(52% .15 70); }
.pr-spark.wide { width: 100%; height: 36px; display: block; }
/* the opened row: layout B. R55's .pr-panel rules above stay (the tests read them); these later ones lay the two columns as the board has them, the sales two thirds, stacked at 1180px and under */
.pr-panel, .pr-panel.ph { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); gap: 24px; padding: 18px 20px 22px 44px; border-top: 2px solid var(--blue); }
@media (max-width: 1180px) { .pr-panel, .pr-panel.ph { grid-template-columns: minmax(0,1fr); } }
.pr-hl.b { gap: 10px; }
.pr-panel.b .pr-big { font-size: 30px; font-weight: 600; }
.pr-panel.b .pr-hl-sub { display: block; margin-top: 4px; }
.pr-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.pr-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(32,30,29,.12); border-radius: 9px; background: #fff; }
.pr-kpi.int { background: oklch(95.5% .035 70); border-color: oklch(78% .10 70); }
.pr-kpi-l { font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-kpi.int .pr-kpi-l { color: oklch(47% .15 70); }
.pr-kpi-v { font: 600 15px/1.25 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-kpi-v small, .pr-rkpi-v small { font: 400 11px/1.2 var(--sans); color: var(--muted); }
.pr-kpi-v .pr-nav, .pr-rkpi-v .pr-nav, .pr-stat .pr-nav { font-size: 12px; line-height: 1.3; font-weight: 400; }
.pr-pending.inline { display: inline-block; width: 60px; height: 14px; margin: 0; vertical-align: middle; }
.pr-acts.b { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.pr-right-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pr-right-head .eyebrow { margin: 0; }
.pr-right-head .pr-link { margin: 0; }
/* the closed sales as tiles: the lead photo 176px tall, the date stamped on it, the count on its corner */
.pr-stiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.pr-stile { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; overflow: hidden; transition: border-color .16s; }
.pr-stile:hover { border-color: rgba(32,30,29,.4); }
.pr-ph { position: relative; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: var(--fill); overflow: hidden; color: var(--muted); font: 500 11px/1.3 var(--sans); text-align: center; }
button.pr-ph { cursor: zoom-in; }
.pr-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--ease); }
button.pr-ph:hover img { transform: scale(1.03); }
.pr-ph.none { background: var(--subtle); border-bottom: 1px dashed rgba(32,30,29,.18); }
.pr-ph.failed img { display: none; }
.pr-ph .sp-fail { display: none; }
.pr-ph.failed .sp-fail { display: block; padding: 6px; }
.pr-ph .sp-count { top: 8px; right: 8px; bottom: auto; }
.pr-ph-date { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.92); font: 500 11px/1.3 var(--sans); color: var(--muted); }
.pr-stile-body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 11px; }
.pr-stile-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 400 12px/1.3 var(--sans); }
.pr-stile-l b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); }
.pr-stile-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pr-stile-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.pr-stile-r .pr-sale-p { font-size: 14px; }
.pr-stile-a { position: absolute; right: 8px; bottom: 44px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--blue); font-size: 13px; text-decoration: none; opacity: 0; transition: opacity .16s; }
.pr-stile:hover .pr-stile-a, .pr-stile-a:focus-visible { opacity: 1; }
/* the reference page */
.pr-refpage { display: flex; flex-direction: column; gap: 18px; animation: fadeUp .3s var(--ease) both; }
.pr-ref-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.pr-ref-head .c-back { flex: none; margin-top: 2px; }
.pr-ref-title { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-ref-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.tag-mono.big { padding: 4px 9px; font-size: 13px; }
.pr-ref-h { margin: 0; font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; }
.pr-ref-head .pr-head-acts { flex-wrap: wrap; row-gap: 6px; }
.pr-rkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pr-rkpi { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 11px; background: var(--subtle); }
.pr-rkpi.blue { background: var(--tint); }
.pr-rkpi.int { background: oklch(95.5% .035 70); }
.pr-rkpi-l { display: flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--sans); color: var(--muted); }
.pr-rkpi-v { font: 600 19px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-rkpi-v .pr-big { font-size: 26px; }
.pr-chart.ref { height: 300px; }
.pr-picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--tint); font: 400 13px/1.4 var(--sans); animation: fadeUp .2s var(--ease) both; }
.pr-picked-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-picked-p { font: 600 18px/1.2 var(--sans); }
.pr-picked-r { display: flex; align-items: center; gap: 6px; }
.pr-picked-r a { text-decoration: none; display: inline-flex; align-items: center; }
.pr-ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }
.pr-bins { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 16px; }
.pr-bin { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; padding: 0; border: 0; border-radius: 6px; background: none; font: 400 11px/1 var(--sans); color: var(--muted); cursor: pointer; }
.pr-bin:hover { background: rgba(32,30,29,.05); }
.pr-bin i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: #b9c8f2; transition: background .16s; }
.pr-bin.on i { background: var(--blue); }
.pr-bin.off i { background: #dfe5f6; }
.pr-bins-x { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid rgba(32,30,29,.14); font-size: 11px; }
.pr-bins-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: var(--subtle); font: 400 12.5px/1.4 var(--sans); }
.pr-venues { display: flex; flex-direction: column; gap: 8px; }
.pr-venue { display: grid; grid-template-columns: 110px minmax(0,1fr) 84px; gap: 10px; align-items: center; font: 400 12.5px/1.3 var(--sans); }
.pr-venue-n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-venue .pr-num { text-align: left; white-space: nowrap; }
.pr-cstrip { display: flex; height: 14px; margin-top: 14px; border-radius: 7px; overflow: hidden; }
.pr-cstrip i { display: block; height: 100%; }
.pr-cstrip + .pr-legend { margin-top: 8px; }
.pr-scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.pr-scard { display: grid; grid-template-columns: 104px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.pr-scard:hover { border-color: rgba(32,30,29,.4); }
.pr-scard.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.pr-scard .pr-ph { width: 104px; border-radius: 8px; }
.pr-scard .pr-ph-date { left: 6px; top: 6px; padding: 1px 6px; font-size: 10px; }
.pr-scard-pick { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; font: 400 12px/1.3 var(--sans); color: var(--ink); text-align: left; cursor: pointer; }
.pr-scard-pick > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-scard-l1 { font-size: 13px; }
.pr-scard-pick .small { font-size: 10.5px; }
.pr-scard-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pr-weeks-table h3 { margin-bottom: 8px; }
.pr-weeks-table .c-ls-table { width: 100%; }
/* the compare view: the head, the chips, the picker, the cards */
.pr-cmp-head { align-items: center; gap: 14px; margin-bottom: 14px; }
.pr-cmp-head .pr-head-acts { margin-left: auto; }
.pr-cchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-cchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 6px 4px 12px; border: 1.5px solid rgba(32,30,29,.18); border-radius: 999px; background: #fff; font: 400 12.5px/1 var(--sans); color: var(--ink); }
.pr-cchip.add { border-style: dashed; color: var(--muted); padding-right: 12px; cursor: pointer; }
.pr-cchip.add:hover, .pr-cchip.add[aria-expanded="true"] { border-color: var(--ink); color: var(--ink); }
.pr-cchip-x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background .16s, color .16s; }
.pr-cchip-x:hover { background: var(--ink); color: var(--paper); }
.pr-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; padding: 10px 12px; border: 1px solid rgba(32,30,29,.14); border-radius: 11px; background: var(--subtle); font-size: 12px; animation: fadeUp .2s var(--ease) both; }
.pr-pickbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border: 1px solid rgba(32,30,29,.14); border-radius: 9px; background: #fff; font: 400 12.5px/1.2 var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
.pr-pickbtn:hover { border-color: var(--ink); }
.pr-pickbtn > span:nth-child(2) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-compare > .pr-card { margin-bottom: 14px; }
.pr-compare .pr-cchart { border: 0; }
.pr-strips.cards { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-top: 0; }
.pr-strip.card { grid-template-columns: minmax(0,1fr); gap: 0; padding: 0; border-radius: 14px; overflow: hidden; }
.pr-strip.card .pr-strip-id { padding: 12px 16px; border-bottom: 1px solid rgba(32,30,29,.1); }
.pr-strip.card .pr-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 10px; padding: 14px 16px; }
.pr-strip.card .pr-stat b { font-size: 14px; }
.pr-cs-sparks { display: flex; gap: 14px; padding: 0 16px 14px; }
.pr-cs-spark { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; }
.pr-cs-spark .pr-nav { font-size: 11.5px; }
/* the compare bar's chips carry their own × now */
.pr-cmp-chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.pr-cmp-chip-x { padding: 0 2px; border: 0; background: none; color: rgba(243,242,242,.6); font-size: 13px; line-height: 1; cursor: pointer; }
.pr-cmp-chip-x:hover { color: var(--paper); }
/* the chart's new marks: the band, the bridge, the weekly dots, a lit or faint sale */
.pr-dot.faint { opacity: .18; }
.pr-wk-dot { pointer-events: none; }
.pr-chart.ref .pr-dot { r: 4px; }
.pr-chart.ref circle.pr-dot.lit { r: 6px; }