/* 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: #fff; --body: #3f3e3b; --head: #6b6a66; --faint: #6b6a66; --chev: #c9c7c4; --fill: #e6e4e1; --subtle: #faf9f8; /* 12 October 2026 (Carl: "remove the frame around the border, so it should just be a full screen application with no frame"): the app is the whole window, so the desk, which was the grey #dedbd7 around a floating frame, is white, the colour at the window's top edge. It is the ground of the page (what iOS reads for its bars), the gate, the phone notice and the onboarding; the theme-color metas say the same. */
  --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). 12 October 2026 (Carl): the app uses --r1 and nothing else for a box (buttons, fields, cards, menus, tabs, tags, bars, the pills that used to be 999px); 0 stays 0 (the brand tiles); 50% stays only on true circles (status dots, avatars, radio and check discs). --r2 is the alternate and the app has no use for it yet: do not add a third value. */
  --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);
  --nudge-ink: oklch(54% .14 50); /* 16 October 2026 (Carl: "no alerts yet should have a different accent color, maybe some type of orange/red"): an orange at hue 50, near the split complement of the brand blue (264 + 150), so it calls without clashing; 30 degrees from --risk-ink's red (25) so an unset alert never reads as a loss; in gamut, #ac5107, 5.3:1 on --desk and 5.0:1 on --row-alt (WCAG AA). theme-dark.css has its dark value */
  --mg-l0: 47%; --mg-c0: .15; --mg-xs: .15; /* 13 October 2026 (Carl): the Watchlist Margin tile's scale (.c-wl-margin.mg0 to .mg10): its numeral's lightness and chroma, and how much of the red steps' deeper wash shows on this page (theme-dark.css has the dark page's) */
  --row-alt: #f8f7f5; --row-alt-hover: #f5f4f2; /* The app's one alternating off-white (the Watchlist's long view, the Calendar's day ledger, their skeletons); tiles use --wlc-card. 15 October 2026 (Carl: "Ensure the off white alternating is consistent across entire project ... should be a subtler"): 2.7 L* off the white page, was 3.8 (#f5f4f2, now the hover; the hover was #f1efed). */
  --tile-shadow: 0 2px 4px rgba(32,30,29,.06), 0 10px 24px -8px rgba(32,30,29,.12); /* White tiles stand off the page with a neutral contact shadow and a soft lift. */
}
* { 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; }
/* Agent C, 12 October 2026 (Carl: "the drop-down arrow has no margin on the right"): every native select draws one chevron, 10px in from its right edge, with 30px of right padding so no option text runs under it. Only the closed control is drawn here; the menu, the keyboard and the pickers stay the browser's. A component rule gives its select background-color and a padding with 30px on the right, never the background shorthand, which would wipe the chevron. A data URI cannot read a var(): #6b6a66 is --muted, and the blue one on .cf.set (the calendar's narrowing filters) is #0859ac, --scan-ink. */
select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236b6a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; }
/* Carl, 12 October 2026: "This highlight around the box on dropdown is a bit dated and not in theme of website, remove it." No ring, outline or glow on a select (this outranks the :focus-visible outline above; a select matches it on a plain click). Focus shows only as the field's own border going --blue; an open menu (aria-expanded, set by the site's dropdown while it is open) keeps a neutral edge (below) and turns the chevron up. A component rule that sets its own border colour repeats the border-color for :focus. */
select:focus-visible { outline: none; }
select:focus { border-color: var(--blue); }
/* Open (16 October 2026, Carl: "dropdwon doesn't ned that blue outline on drop", "not seamless between, border radiuses dont match"): the field keeps a neutral edge, the colour shared/select.css gives its list, and squares its corners on the side the list hangs from (data-ui-sel-side, set by select.js), so the two are one box. !important because every component's :hover/:focus blue (up to `#calendar .cf.set select:focus`) also matches an open select, which keeps focus. */
select[aria-expanded="true"] { border-color: color-mix(in srgb, var(--ink) 22%, transparent) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
select[aria-expanded="true"][data-ui-sel-side="above"] { border-radius: 0 !important; border-bottom-left-radius: var(--r1) !important; border-bottom-right-radius: var(--r1) !important; }
select[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%236b6a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l4-4 4 4'/%3E%3C/svg%3E"); }
@media (forced-colors: active) { select:focus-visible { outline: 2px solid; } } /* where colours are forced a border cannot carry focus: the system's ring */
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. No border-radius here (12 October 2026): the ring follows the focused element's own corners, so a focused circle (.rail-avatar, a dot, an avatar) stays a circle and a square stays square. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rail :focus-visible { outline-color: var(--paper); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes pageIn { from { opacity: 0 } to { opacity: 1 } } /* 15 October 2026 (Carl: "When switching between search calendar and watchlist, the pages jump a bit on load ... remove that but keep the rest where the pages kinda fade in"): a view's arrival fades in where it stands; nothing rises */
@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) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ── shell ─────────────────────────────────────────────────────────── */
.desk { position: relative; height: 100dvh; height: calc(100dvh - var(--ac-consent-h, 0px)); padding: 0; 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. 12 October 2026 (Carl): no margin around the frame (it was 18px, 12px under 900px), so the frame is the window. */
.frame { flex: 1; min-width: 0; display: grid; grid-template-columns: 54px minmax(0,1fr); position: relative; overflow: hidden; background: #fff; } /* 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. 12 October 2026 (Carl): no border, no shadow and no rounded corners: the app is the whole window, the rail touches its top, left and bottom edges. */

.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: opacity .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 { opacity: .82; }
.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: var(--r1); 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); }
.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); }
.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 { 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: pageIn .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: var(--r1); 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); }
.btn-31 { height: 31px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.26); border-radius: var(--r1); 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: var(--r1); 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 { background: var(--blue-hover); color: #fff; } /* 16 October 2026 (Carl: the catalogue link's hover "jumps, remove that animation and replace with another more subtle and check other instances of site"): no button, chip or card in the app moves on hover any more; each keeps only its colour, edge or shadow change (rail, Guide, composer, chips, plans, onboarding too) */ /* 2026-09-23: the label stays white on hover; on an <a> button the global a:hover colour used to win */
a.btn-34, a.btn-34:hover { text-decoration: none; } /* 14 October 2026 (Carl, on the drawer's "View catalogue": "no underline"): a link drawn as a button carries no underline, wherever it sits */
.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: var(--r1); 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: pageIn .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: var(--r1); background: #fff; text-align: left; transition: border-color .18s, transform .18s, box-shadow .18s; }
.starter:hover { border-color: var(--blue); 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: var(--r1); 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: var(--r1); background: var(--ink); color: var(--paper); font: 400 15px/1.5 var(--sans); animation: fadeUp .35s var(--ease) both; } /* 16 October 2026 (Carl: the chat's words "a bit bigger"): the person's message, the reply (.msg-body > p) and the Assistant's answer (.as-text) are 15px, from 13.5 and 14 */
/* 16 October 2026: a message sent with a photo, as ChatGPT shows one: the photo at the right, the words in their bubble under it. */
/* Later that day (Carl's screenshot, "Emulate this UI/UX"): the photo is a square thumbnail, cropped to fill, with a hairline
   edge, and a clear gap before the words. The app's one radius (--r1) stays. */
.msg-user-set { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 64%; }
.msg-user-set .msg-user { max-width: 100%; box-sizing: border-box; }
.msg-photo { display: block; box-sizing: border-box; width: 172px; max-width: 100%; aspect-ratio: 1; height: auto; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background: var(--paper); object-fit: cover; 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 15px/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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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 { 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: var(--r1); 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: var(--r1); 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: var(--r1); 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 { 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); background: rgba(32,30,29,.09); overflow: hidden; }
.rc-bar .fill { display: block; height: 100%; width: 0; border-radius: var(--r1); 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: var(--r1); 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; }
/* 15 October 2026 (Carl, after ElevenLabs' Shimmering Text): the reading wait is one line of words a light passes through, left to right, every
   2s (views/chat.js readingHtml, READ_PHRASES), across the words only; the words are the faint ink (5.4:1) and the light is the full ink, so it reads in dark too. A new phrase
   fades in over the old (.swap). Without motion: the words, still. */
.msg.pl-msg .pl.ai-wait { padding: 0 0 8px; } /* 16 October 2026 (Carl: the answer "jumps" in): the waiting line sits where the answer's first line will (no top padding, a 22.5px line, below), so the swap moves nothing */
.ai-shimmer { align-self: flex-start; display: inline-block; font: 500 14px/1.4 var(--sans); color: transparent; background: linear-gradient(90deg, var(--faint) 0%, var(--faint) 40%, var(--ink) 50%, var(--faint) 60%, var(--faint) 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: aiShimmer 2s linear infinite; transition: opacity .18s; }
.ai-shimmer.swap { opacity: 0; }
@keyframes aiShimmer { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ai-shimmer { animation: none; color: var(--muted); background: none; } }

.summary { margin: 0; font: 400 15px/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: var(--r1); 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; -webkit-text-stroke: .015em currentColor; } /* 16 October 2026 (Carl: "a bit bolder than the rest"): a hairline stroke, as on .c-wl-title. */ /* 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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 { filter: brightness(.93); }
.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: var(--r1); 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); }
/* 16 October 2026 (Carl: "Alarm should be a button available for every item everywhere on the site, but a square button that is tinted red
   with just the icon that opens the panel"): every lot's bell (alert-panel.js buttonHtml). A red wash with a red bell; a lot with alerts set
   is marked as below (.has), its count in the button's name. --risk-ink is the app's red and has its dark value. */
.ap-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in oklch, var(--risk-ink) 30%, transparent); border-radius: var(--r1); background: color-mix(in oklch, var(--risk-ink) 9%, var(--desk)); color: var(--risk-ink); cursor: pointer; transition: background-color .16s, border-color .16s, color .16s; }
.ap-btn svg { flex: none; width: 16px; height: 16px; }
.ap-btn:hover, .ap-btn[aria-expanded="true"] { border-color: color-mix(in oklch, var(--risk-ink) 60%, transparent); background: color-mix(in oklch, var(--risk-ink) 16%, var(--desk)); }
/* 16 October 2026 (Carl: "The red alarm is too bright i like the unarmed state but when there's an alarm need better way to show it"): a lot with
   alerts keeps the quiet square and says so the way a phone's bell does: the bell is filled red, the edge and the tint a step stronger. No solid
   red block. Then (Carl: "Alarms if not armed outline, if armed red fill, but no dot"): the corner dot is gone; no alerts is the outline bell. */
.ap-btn.has { border-color: color-mix(in oklch, var(--risk-ink) 55%, transparent); background: color-mix(in oklch, var(--risk-ink) 13%, var(--desk)); color: var(--risk-ink); }
.ap-btn.has svg path:first-child { fill: currentColor; }
.ap-btn.has:hover, .ap-btn.has[aria-expanded="true"] { border-color: color-mix(in oklch, var(--risk-ink) 75%, transparent); background: color-mix(in oklch, var(--risk-ink) 19%, var(--desk)); }
/* The bell rings (16 October 2026, Carl: "After alert is set, bell should tilt a bit and sound particles show to indicate it's set then turn red. This
   happens after the window closes"): alert-panel.js marks the lot's bells .ap-ring as the window that set an alert closes, with --ap-ring-t (0, or how
   far in a redrawn bell is, as a negative delay). The bell swings from its top for 0.65s, two sound waves open either side of it, and only then does it
   take the set look (the filled bell, the stronger edge and tint), which it holds back as the plain one until then. Reduced motion: no swing and no
   waves, the set look at once. */
.ap-btn.ap-ring { position: relative; overflow: hidden; } /* 16 October 2026 (Carl: "sound particles shouldnt extend out of the box they're in"): the ring is drawn inside the square only */
/* 16 October 2026 (Carl: "the bell should tilt right and have just 2 small sound waves come off before it settles back red"): one tilt to
   the right from its top, held while two small arcs leave its right side one after the other, then back upright (a small give past
   upright) as it turns red. The arcs are the button's ::before and ::after (a coarse pointer's larger target, the ::after, waits out the ring). */
.ap-btn.ap-ring svg { transform-origin: 50% 12%; animation: apSwing .65s linear var(--ap-ring-t, 0ms) both; }
/* (Carl, later: "the alarm animation bell should rotate to the right not left and sound particles shouldnt extend out of the box"): hung from its top, a
   positive turn swung the bell's body left; it is a negative turn now, so the body swings right, towards the arcs. The arcs end inside the square's
   edge on the smallest bell (28px: 13px from the middle to the inner edge), and the square clips the ring besides (.ap-btn.ap-ring overflow). */
/* 19 October 2026 (Carl: "the bell should just swing slightly to the right and then swing back to the left at about half the distance ... and then go
   back to center and turn red as it does this"): no held tilt. A rock: 12deg right, 6deg left, upright, each leg eased like a pendulum; the red
   (apSet, apFill) comes in over the same 0.65s instead of after it. */
@keyframes apSwing { 0% { transform: rotate(0); animation-timing-function: ease-out; } 30% { transform: rotate(-12deg); animation-timing-function: ease-in-out; } 68% { transform: rotate(6deg); animation-timing-function: ease-in-out; } 100% { transform: rotate(0); } }
/* 19 October 2026 (Carl: "Remove the sound particles on the alarm animation"): the two sound-wave arcs (::before, ::after, apWaves) are gone; the swing and the red stay */
.ap-btn.has.ap-ring { animation: apSet .65s ease-in-out var(--ap-ring-t, 0ms) backwards; }
@keyframes apSet { from { border-color: color-mix(in oklch, var(--risk-ink) 30%, transparent); background-color: color-mix(in oklch, var(--risk-ink) 9%, var(--desk)); } }
.ap-btn.has.ap-ring svg path:first-child { animation: apFill .65s ease-in-out var(--ap-ring-t, 0ms) backwards; }
@keyframes apFill { from { fill: transparent; } }
@media (prefers-reduced-motion: reduce) { .ap-btn.ap-ring svg, .ap-btn.has.ap-ring, .ap-btn.has.ap-ring svg path:first-child { animation: none; } }
@media (pointer: coarse) { .ap-btn { position: relative; } .ap-btn::after { content: ""; position: absolute; inset: -6px; } } /* a 44px target round the 32px square */
.btn-exec { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border: 0; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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; }
/* 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: 12px 14px; margin-top: 8px; padding: 14px 16px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: #fff; animation: popIn .3s var(--ease) both; }
/* 13 October 2026 (Carl, on a screenshot of this panel under a Watchlist row: "better, more aesthetic alert box ... this blue tint isn't doing it for me"). It was a violet card (--alert-tint, --alert-edge) with violet text, borders and radios. It is now what the two panels that open beside it under a row are (.lr, .c-wl-sales): a white card on a hairline, ink and muted text, the label report's chips for the time presets, and blue only where something is chosen or pressed (the chip, the focused field, Add alert). --alert-* is not used inside this panel any more; the row's alert pill, .btn-alert and the calendar's .cal-block.want still take it. */
.alert-form label { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--sans); color: var(--ink); }
.alert-form .amt { display: inline-flex; align-items: center; gap: 6px; }
.alert-form input[type="number"] { width: 110px; height: 30px; padding: 0 10px; border: 1.5px solid rgba(32,30,29,.2); border-radius: var(--r1); background: #fff; font: 600 13px/1 var(--sans); color: var(--ink); appearance: textfield; -moz-appearance: textfield; }
.alert-form input[type="number"]::-webkit-inner-spin-button, .alert-form input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* no native spinner (the Up and Down keys still step), as in the onboarding's .ob-money */
.alert-form input[type="number"]::placeholder { color: var(--muted); font-weight: 400; }
.alert-form input[type="number"]:focus { border-color: var(--blue); }
/* 13 October 2026 (Carl, on a screenshot of this box with the bid field focused: "same problem on highlight ... remove highlight"). F-11 had left these two fields the
   global :focus-visible ring as the keyboard cue, and it draws a second frame 2px outside the border that already darkens on focus: a double box, as on the Value editor
   (.c-val-edit, below). No ring on them, as on the selects and the calendar filters (the first rules of this file): the darker border is the mark. The radios and the
   buttons keep the ring; nothing else shows where the keyboard is on them. */
.alert-form input[type="number"]:focus-visible { outline: none; }
@media (forced-colors: active) { .alert-form input[type="number"]:focus-visible { outline: 2px solid; } } /* where colours are forced a border cannot carry focus: the system's ring */
.alert-form input[type="number"]:disabled { opacity: .5; cursor: not-allowed; } /* no currency stated, so no bid to compare with */
.alert-form .amt b { font: 500 12.5px/1 var(--sans); color: var(--muted); }
.alert-form .chk { position: relative; height: 30px; padding: 0 12px; border: 1.5px solid rgba(32,30,29,.2); border-radius: var(--r1); background: #fff; font: 600 12px/1 var(--sans); color: var(--body); cursor: pointer; transition: border-color .16s, background .16s, color .16s; } /* the label report's chip (.lr-chip). The radio is still the control: laid over the chip, invisible, so a click, the arrow keys and a screen reader work as before; the chip shows its state (:checked) and keeps the ring for the keyboard */
.alert-form .chk:hover { border-color: var(--blue); }
.alert-form .chk:has(input:checked) { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
.alert-form .chk:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.alert-form .chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.alert-form .acts { display: inline-flex; gap: 7px; margin-left: auto; }
.alert-form .footnote { flex-basis: 100%; margin: 0; font: 400 11.5px/1.45 var(--sans); color: var(--muted); }
.alert-form .footnote:first-child { font-size: 13px; line-height: 1.5; } /* the panel's first line: this lot's rules, or none yet */
.alert-form .footnote:first-child b { color: var(--ink); }
.alert-form .footnote .btn-30 { height: auto; padding: 0; border: 0; background: none; font: 500 12px/1.4 var(--sans); color: var(--muted); text-decoration: underline; text-decoration-color: rgba(32,30,29,.3); text-underline-offset: 3px; } /* a rule's Remove, in the line: quiet text like "Wrong label?" (.lr-open), not a 30px button */
.alert-form .footnote .btn-30:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 1100px) { .alert-form .footnote:first-child + label { flex-basis: 100%; } } /* a window this narrow: the bid on a row of its own, the presets under it as a set (they wrapped one at a time) */
/* R151 (17 October 2026): a time alert's condition on the bid, a row of its own under the times; and when a rule goes out, quiet beside its words */
.alert-form .ap-cond { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 500 13px/1.4 var(--sans); color: var(--ink); }
.alert-form .ap-cond .chk:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.alert-form .ap-due { font: 400 12px/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: var(--r1); 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: var(--r1); 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: var(--r1); 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 15px/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: var(--r1); 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: var(--r1); 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; }
/* 16 October 2026 (Carl: the "no match, watch for one" box "can go, it should be replaced with a hyperlink blue text at the end of the initial
   text"): views/chat.js nearestCard. The offer is a link in the summary's own sentence, in the brand blue, underlined on hover and focus; once
   pressed, one quiet line says what is watched. */
.want-link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .16s, color .16s; }
.want-link:hover, .want-link:focus-visible { color: var(--blue-hover); text-decoration-color: currentColor; }
.want-arrow { display: inline-block; margin-left: .25em; text-decoration: none; } /* 16 October 2026 (Carl: "add an up arrow to the right as in other places on the site"): "Watch for one ↗", the arrow outside the underline */
.want-link.busy { color: var(--muted); cursor: default; text-decoration: none; }
.want-line .na { color: var(--red); }
span.want-line[role="status"] { color: var(--muted); }
/* 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: var(--r1); 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) */
/* PR-D10: the standing want on an empty or refined result (14 September); since 16 October 2026 a link in the summary (.want-link above) */
/* 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); }
.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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); background: var(--blue); color: #fff; transition: transform .16s, background .16s; }
.send:hover { background: var(--blue-hover); }
/* 16 October 2026 (Carl: "Add speach to text icon and ability here in the search"): speech.js's mic, Send's size, quiet until it listens. */
.mic { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background: transparent; color: var(--muted); transition: color .16s, border-color .16s, background .16s; }
.mic:hover { color: var(--ink); border-color: rgba(32,30,29,.3); }
.mic.on { border-color: var(--blue); background: rgba(65,105,225,.1); color: var(--blue); animation: micListen 1.4s ease-in-out infinite; }
@keyframes micListen { 50% { background: rgba(65,105,225,.2); } }
@media (prefers-reduced-motion: reduce) { .mic.on { animation: none; } }
.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: var(--r1); 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 { box-shadow: 0 4px 12px rgba(32,30,29,.12); }
.tchip.on { font-weight: 600; }

/* ── calendar ──────────────────────────────────────────────────────── */
/* Panoramic month (12 October 2026, Carl: "implement this as the new calendar design"): the header is the serif month with its sub-line at the left, the mode switch and the month stepper at the right, for all three modes. .cal-head and .cal-nav are the Calendar's alone; .cal-modes, .cal-btn, .cal-filters and .cf are Prices' too, so their new look is scoped to #calendar further down. */
.cal-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.cal-titles { min-width: 0; }
.cal-head h2 { margin: 0; font: 400 36px/1.1 var(--serif); letter-spacing: -.005em; }
.cal-head .sub { font: 400 12px/1 var(--sans); color: var(--faint); }
.cal-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; margin-left: auto; }
.cal-nav { margin-left: auto; display: flex; gap: 6px; }
.cal-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--scan-edge); border-radius: var(--r1); background: #fff; color: var(--scan-ink); font-size: 14px; transition: border-color .16s, background-color .16s, color .16s; } /* Agent C, 12 October 2026: blue edges, the app's one action hue, on the month and week steppers */
.cal-btn.wide { width: auto; height: 30px; padding: 0 13px; font: 600 12.5px/1 var(--sans); }
.cal-btn:hover { border-color: var(--blue); background-color: var(--tint); }
.cal-wrap { border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); 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); background: color-mix(in srgb, var(--blue) 15%, var(--desk)); } /* today is a tinted cell, never a disc (Carl, 12 October 2026) */
.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 { color: var(--blue-hover); }
.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: var(--r1); border-left: 3px solid; overflow: hidden; cursor: pointer; transition: transform .16s, box-shadow .16s; animation: popIn .3s var(--ease) both; }
.cal-block:hover { 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: var(--r1); 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: var(--r1); 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: var(--r1); 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 { 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 0; font: 400 13px/1.5 var(--sans); color: var(--faint); }
/* Agent C, 12 October 2026 (Carl: "everything is white. There should be color added to better visualize what does what"). Blue is the app's one action hue: the mode switch is a blue track with the mode on screen solid blue; "Current" / "This week" (the one jump back) is a tinted blue action until it has nowhere to go, then the faded neutral it always was; a filter that narrows the list turns blue (.cf.set); Reset alone is red, the risk hue, and grey while there is nothing to clear. */
.cal-modes { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: var(--r1); background: var(--tint); box-shadow: inset 0 0 0 1px var(--scan-edge); }
.cal-modes .cal-btn, .cal-modes .cal-btn:hover { border-color: transparent; background: transparent; color: var(--muted); }
.cal-modes .cal-btn:hover { color: var(--scan-ink); }
.cal-modes .cal-btn.on { background: var(--blue); color: #fff; box-shadow: 0 1px 3px rgba(65,105,225,.32); }
.cal-modes + .cal-nav { margin-left: 0; }
.cal-nav .cal-btn.wide { background-color: var(--tint); }
.cal-btn:disabled, .cal-btn:disabled:hover, .cal-nav .cal-btn.wide:disabled { border-color: rgba(32,30,29,.18); background-color: #fff; color: var(--ink); opacity: .45; cursor: default; }
.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); transition: color .16s; }
.cf input, .cf select { height: 30px; padding: 0 9px; border: 1.5px solid var(--scan-edge); border-radius: var(--r1); background-color: #fff; color: var(--ink); font: 400 12.5px/1 var(--sans); min-width: 0; max-width: 190px; transition: border-color .16s, background-color .16s, color .16s; }
.cf select { padding-right: 30px; } /* the chevron's room (the select base rule, top of file) */
.cf input { max-width: none; }
.cf input:hover, .cf select:hover { border-color: var(--scan-mid); }
.cf input:focus, .cf select:focus { border-color: var(--blue); } /* F-26: as F-11, on the four calendar filters. Since 12 October (Carl: no "highlight around the box") this border is the only focus mark in the filter row: the search box drops the ring too. */
.cf input:focus-visible { outline: none; }
/* .set (calendar.js syncFilters): this filter is narrowing the list; caption, field and chevron go blue */
.cf.set > span { color: var(--scan-ink); }
.cf.set input, .cf.set select { border-color: var(--blue); background-color: var(--tint); color: var(--scan-ink); font-weight: 600; }
.cf.set select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%230859ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); }
.cf.set select[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%230859ac' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5l4-4 4 4'/%3E%3C/svg%3E"); }
.cf.set input:focus, .cf.set select:focus { border-color: var(--ink); } /* a set filter's border is blue already, so its focus mark is ink: still the border alone */
.cal-filters .btn-30 { align-self: end; }
/* Reset: the one "clear" control, so the risk hue (25); disabled, quiet grey, while no filter is set. .k is the count of filters it would clear. */
.cal-reset { align-self: end; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 1.5px solid oklch(80% .09 25); border-radius: var(--r1); background: oklch(96% .03 25); color: var(--risk-ink); font: 600 12.5px/1 var(--sans); white-space: nowrap; transition: border-color .16s, background-color .16s, color .16s; }
.cal-reset:hover { border-color: oklch(70% .13 25); background: oklch(93% .05 25); }
.cal-reset svg { flex: none; }
.cal-reset .k { font-variant-numeric: tabular-nums; }
.cal-reset .k:empty { display: none; }
.cal-reset:disabled, .cal-reset:disabled:hover { border-color: rgba(32,30,29,.14); background: var(--subtle); color: rgba(32,30,29,.55); cursor: default; }
/* ── calendar: the Panoramic month's header and toolbar, all three modes (12 October 2026) ──
   Scoped to #calendar because Prices uses .cal-modes, .cal-btn, .cal-filters and .cf and keeps its own look. Palette from the app's tokens: text --ink, secondary --faint (5.4:1 on white; the design's #787872 is 4.4:1, under the app's AA rule), accent --blue, the selected-day wash --tint. A divider is the literal rgba(32,30,29,.12) (about the design's #E5E5E0): theme.js recolours a literal rgba(32,30,29,a) in dark, never a custom property. Radius --r1 or 0; no outline or glow on a field (its border colour is its focus mark). */
#calendar.pane { padding: 26px 30px 100px; }
#calendar .cal-modes { margin-left: 0; gap: 0; padding: 3px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r1); background: color-mix(in srgb, var(--ink) 3.5%, var(--desk)); box-shadow: none; } /* a pale track; the mode on screen is the white pill with blue text */
#calendar .cal-modes .cal-btn, #calendar .cal-modes .cal-btn:hover { width: auto; min-width: 66px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r1); background: transparent; color: var(--faint); font: 500 13.5px/1 var(--sans); box-shadow: none; }
#calendar .cal-modes .cal-btn:hover { color: var(--ink); }
#calendar .cal-modes .cal-btn.on, #calendar .cal-modes .cal-btn.on:hover { background: var(--desk); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(32,30,29,.08); }
#calendar .cal-nav .cal-btn { width: 36px; height: 40px; border: 1px solid rgba(32,30,29,.12); background-color: var(--desk); color: var(--ink); font-size: 18px; line-height: 1; }
#calendar .cal-nav .cal-btn.wide { width: auto; min-width: 74px; padding: 0 14px; font: 500 13.5px/1 var(--sans); background-color: var(--desk); }
#calendar .cal-nav .cal-btn:hover { border-color: rgba(32,30,29,.32); background-color: var(--subtle); }
#calendar .cal-btn:disabled, #calendar .cal-btn:disabled:hover { border-color: rgba(32,30,29,.12); background-color: var(--desk); color: var(--ink); opacity: .45; cursor: default; }
/* 14 October 2026 (Carl: "In calender should be more intuitive way to change months"): the stepper beside the title, and the title a button that
   opens the month picker under it (views/calendar.js pickerHtml): the year between two steps, then its months three to a row, the month on
   screen filled blue and the current one ringed. A press outside it or Escape closes it. In the week mode the title is plain text. On a phone
   (the phones block below) the picker spans the top card. */
#calendar .cal-title-row { position: relative; display: flex; align-items: center; gap: 10px 18px; }
#calendar .cal-title-row .cal-nav { margin-left: 0; }
#calendar .cal-nav:empty { display: none; } /* R146 (17 October 2026, Henry): the month and the agenda have no stepper, so no room is kept for one */
#calendar .cal-pick { display: inline-flex; align-items: center; gap: 8px; margin: -2px -8px; padding: 2px 8px; border: 0; border-radius: var(--r1); background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: background-color .16s; }
#calendar .cal-pick-t { display: grid; justify-items: start; font-variant-numeric: tabular-nums; } /* the title and, unseen in the same cell, every title it can take this year: the cell keeps the widest's room (calendar.js sizerTitles) */
#calendar .cal-pick-v { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* the title and its chevron, which follows the words */
#calendar .cal-pick-size { display: contents; }
#calendar .cal-pick-size > span { grid-area: 1 / 1; padding-right: 22px; white-space: nowrap; visibility: hidden; } /* 22px: the chevron and its gap */
#calendar .cal-pick-i { flex: none; margin-top: 4px; color: var(--faint); transition: transform .18s var(--ease), color .16s; }
#calendar .cal-pick:hover { background-color: var(--subtle); }
#calendar .cal-pick:hover .cal-pick-i, #calendar .cal-pick[aria-expanded="true"] .cal-pick-i { color: var(--blue); }
#calendar .cal-pick[aria-expanded="true"] .cal-pick-i { transform: rotate(180deg); }
#calendar .cal-pick:disabled { cursor: default; background: none; }
#calendar .cal-pick:disabled .cal-pick-i { display: none; }
#calendar .cal-picker { position: absolute; z-index: 30; top: calc(100% + 8px); left: -8px; width: 288px; padding: 12px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: var(--desk); box-shadow: 0 12px 32px rgba(20,24,40,.16), 0 2px 6px rgba(20,24,40,.08); }
#calendar .cal-picker[hidden] { display: none; }
/* 18 October 2026 (Carl: "introduce the same opening/closing animation used across site when panel unfolds"): the dropdown list's unfold (shared/select.css),
   200ms down out of the title, 120ms back up. CSS only: @starting-style gives the opening a shut first frame, and display waits out the closing
   (allow-discrete), so calendar.js's hidden still does the showing. A browser without either shows and hides it at once, as before. */
#calendar .cal-picker { opacity: 1; clip-path: inset(-40px -40px -60px -40px); transition: clip-path 200ms var(--ease), opacity 200ms var(--ease), display 200ms allow-discrete; }
#calendar .cal-picker[hidden] { opacity: 0; clip-path: inset(0 -40px 100% -40px); transition-duration: 120ms; }
@starting-style { #calendar .cal-picker:not([hidden]) { opacity: 0; clip-path: inset(0 -40px 100% -40px); } }
@media (prefers-reduced-motion: reduce) { #calendar .cal-picker { transition: none; } }
#calendar .cal-pk-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#calendar .cal-pk-head b { font: 400 22px/1 var(--serif); color: var(--ink); }
#calendar .cal-pk-head .cal-btn { width: 34px; height: 34px; border: 1px solid rgba(32,30,29,.12); background-color: var(--desk); color: var(--ink); font-size: 17px; }
#calendar .cal-pk-head .cal-btn:hover { border-color: rgba(32,30,29,.32); background-color: var(--subtle); }
#calendar .cal-pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#calendar .cal-pk-m { height: 38px; padding: 0; border: 1px solid transparent; border-radius: var(--r1); background: none; color: var(--ink); font: 500 13.5px/1 var(--sans); cursor: pointer; transition: background-color .16s, border-color .16s; }
#calendar .cal-pk-m:hover { background-color: var(--subtle); }
#calendar .cal-pk-m.now { border-color: color-mix(in srgb, var(--blue) 45%, transparent); color: var(--blue); }
#calendar .cal-pk-m.on, #calendar .cal-pk-m.on:hover { border-color: var(--blue); background-color: var(--blue); color: #fff; }
/* 14 October 2026 (Carl: "if they want rolexes they can put rolex there and it should highlight all days with rolexes going that day"): while the
   Calendar's search is on, a day it found something on (a sale's name, house, country or category, or one of its lots: calendar.js visible())
   carries a blue dot at its top right, and the other days' numerals step back. The day's wash still says how many sales matched. */
#calendar .pano-grid.searching .pcell.hit::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-hover); box-shadow: 0 0 0 2px var(--desk); pointer-events: none; }
#calendar .pano-grid.searching .pcell:not(.hit):not(.blank) .pnum { color: var(--faint); }
#calendar .cal-filters { flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
#calendar .cf { position: relative; display: block; flex: 0 0 auto; }
#calendar .cf.grow { flex: 1 1 280px; max-width: none; }
#calendar .cf > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the labels stay in the DOM for screen readers, out of sight */
#calendar .cf input, #calendar .cf select { display: block; width: 100%; max-width: none; height: 39px; padding: 0 14px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r1); background-color: var(--desk); color: var(--ink); font: 400 13.5px/1 var(--sans); }
#calendar .cf select { width: 164px; padding-right: 36px; background-position: right 14px center; }
#calendar .cf #cal-country { width: 174px; }
#calendar .cf input[type="search"] { -webkit-appearance: none; appearance: none; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b6a66' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.6'/%3E%3Cpath d='M10.4 10.4L14 14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 16px 16px; }
#calendar .cf input::placeholder { color: var(--faint); opacity: 1; }
#calendar .cf input:hover, #calendar .cf select:hover { border-color: rgba(32,30,29,.32); }
#calendar .cf input:focus, #calendar .cf select:focus { border-color: var(--blue); }
#calendar .cf.set input, #calendar .cf.set select { border-color: var(--blue); background-color: var(--tint); color: var(--scan-ink); font-weight: 500; }
#calendar .cf.set input:focus, #calendar .cf.set select:focus { border-color: var(--ink); }
#calendar .cal-reset { height: 39px; padding: 0 14px 0 12px; border-width: 1px; font: 500 13.5px/1 var(--sans); }
#calendar.pano-mode .cal-reset:disabled { display: none; } /* nothing set: the row is the reference's, search and three selects */
.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; }
/* A refresh dims the calendar where it is and puts nothing into it (calendar.js update). The dim waits 120ms, so an answer that comes straight back never shows it; the body fades up over 140ms when the answer lands, whatever markup replaced the old meanwhile. Reduced motion has no transitions, so it gets no dim rather than a flash. */
.cal-body { transition: opacity .14s ease; }
.cal-body.loading { opacity: .55; transition: opacity .2s ease .12s; }
@media (prefers-reduced-motion: reduce) { .cal-body.loading { opacity: 1; } }
.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; }
/* The month's old boxed grid (.mcal-grid, .mcell and its three heat steps) went with the Panoramic month below: calendar.js no longer writes them and nothing else in public/app or test names them. */
/* ── calendar: the Panoramic month (12 October 2026; Carl's panoramic-month.png + implementation-instructions.md) ──
   #calendar.pano-mode (set by calendar.js while the month is shown) turns the pane into a flex column that fills the view: header, filters, #cal-body (takes what is left), footer. #cal-body holds .pano: a two-row grid, the calendar block (61.8% of the body, plus the legend line that hangs under the grid) over the selected day's detail (the rest). Each row has a minimum, so a short screen scrolls the pane instead of clipping. The month is ONE seven-column grid with 1px shared dividers (the grid's own background shows through a 1px gap), equal-height rows for 4, 5 or 6 weeks (--pano-rows, set by calendar.js). White cells, no heat tints: blue is the active view, today's marker, a day's count, the selected date and a narrowing filter, and nothing else. */
#calendar.pano-mode { display: flex; flex-direction: column; padding: 26px 30px 0; } /* an ID, so it outranks the #calendar.pane padding above */
.pano-mode .cal-head, .pano-mode .cal-filters, .pano-mode .pano-foot { flex: none; }
#calendar.pano-mode .cal-filters { margin-bottom: 0; }
/* The filter row never changes height when Reset comes or goes. From 900px up it stays on one line and the search box gives way (at 1024px a set filter wrapped Reset onto a second row, 88px against 39px, so clearing it moved the grid 49px: the jump Carl reported on Reset). Below 900px the row wraps by design and Reset joins the selects' line. */
@media (min-width: 900px) {
  #calendar.pano-mode .cal-filters { flex-wrap: nowrap; }
  #calendar.pano-mode .cf.grow { flex: 1 1 0; min-width: 120px; }
  #calendar.pano-mode .cal-reset { flex: none; }
}
#calendar.pano-mode .cal-body { flex: 1 1 0; display: flex; flex-direction: column; min-height: auto; }
.pano { --pano-legend: 44px; --pano-row-min: 48px; --pano-detail-min: 208px; --pano-dow: 53px; flex: 1 1 0; min-height: calc(var(--pano-dow) + var(--pano-rows, 5) * (var(--pano-row-min) + 1px) + 1px + var(--pano-legend) + var(--pano-detail-min)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(min-content, calc(61.8% + var(--pano-legend))) minmax(var(--pano-detail-min), 1fr); } /* the min-height is the two blocks' minimums added up: a flex item with a zero basis would otherwise be squeezed below them and overlap the footer; the pane scrolls instead */
.pano:has(.pano-sessions[data-expanded="true"]) { --pano-detail-min: 340px; grid-template-rows: minmax(min-content, calc(38.2% + var(--pano-legend))) minmax(var(--pano-detail-min), 1fr); } /* "View all": the shares swap, and the open list gets room for two rows of cards before it scrolls inside itself (on a short screen the pane scrolls instead) */
.pano-cal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pano-dow { flex: none; height: var(--pano-dow); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-content: start; gap: 1px; padding: 25px 1px 0; }
.pano-dow span { padding: 0 12px; font: 500 11px/14px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pano-grid { flex: 1 1 0; min-height: calc(var(--pano-rows, 5) * (var(--pano-row-min) + 1px) + 1px); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--pano-rows, 5), minmax(var(--pano-row-min), 1fr)); gap: 1px; border: 1px solid rgba(32,30,29,.12); background: rgba(32,30,29,.12); background-clip: padding-box; }
.pcell { container-type: size; container-name: pcell; position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 0; margin: 0; padding: 7px 12px 6px; border: 0; border-radius: 0; background: var(--desk); color: var(--ink); font: inherit; text-align: left; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background-color .14s; }
.pcell.blank { background: color-mix(in srgb, var(--ink) 3.5%, var(--desk)); }
button.pcell { cursor: pointer; }
button.pcell:hover { background: var(--subtle); }
.pnum { flex: none; display: inline-grid; place-items: center start; height: 20px; font: 400 14px/20px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.pcell.today { background: color-mix(in srgb, var(--blue) 15%, var(--desk)); } /* 12 October 2026, Carl: "today's date should be tinted blue rather than have the blue circle. So it immediately lets you know where you are". Today is the one tinted cell (a fill); the day shown below is a ring (.selected), never a fill, so the two cannot be mistaken for each other */
button.pcell.today:hover { background: color-mix(in srgb, var(--blue) 21%, var(--desk)); }
.pcell.today .pnum { display: inline-flex; align-items: baseline; gap: 8px; width: auto; margin: 0; color: var(--blue-hover); font-weight: 600; }
.pcell.today .pnum::after { content: "Today"; font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; } /* a word on the cell, not a legend to look up; generated, so the grid's markup is as it was */
.pcell.today .pcount { color: var(--blue-hover); } /* --blue on the wash is 4.1:1, under AA; --blue-hover measures 5.8:1 */
.plabel { flex: none; max-width: 100%; margin-top: auto; font: 400 11.5px/14px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcount { flex: none; max-width: 100%; display: inline-flex; align-items: baseline; margin-top: 2px; font: 400 11.5px/14px var(--sans); color: var(--blue); white-space: nowrap; }
.pnum + .pcount { margin-top: auto; }
.pcount::before { content: "\2022"; margin-right: 6px; }
.pcount b { font-weight: 500; margin-right: .3em; }
.pcell.selected { z-index: 1; box-shadow: 0 0 0 2px var(--blue); } /* the day shown below: a ring over the divider and no fill, because the fill is today's */
.pcell.selected .pcount { color: var(--blue-hover); }
.pcell:focus-visible { outline: none; z-index: 2; box-shadow: inset 0 0 0 2px var(--blue); }
.pcell.selected:focus-visible { box-shadow: 0 0 0 2px var(--blue), inset 0 0 0 2px var(--blue); } /* focus on the shown day thickens the ring from inside */
.pcell.locked { background: repeating-linear-gradient(135deg, var(--subtle) 0 6px, var(--desk) 6px 12px); color: var(--faint); }
.pcell.locked .pnum { color: var(--faint); }
@container pcell (max-height: 49px) { .plabel { display: none; } } /* a row too short for number, label and count keeps the number and the count */
@container pcell (max-width: 95px) { .plabel { display: none; } }
@container pcell (max-width: 95px) { .pcell.today .pnum::after { display: none; } } /* a cell too narrow for the word keeps the tint and the blue number */
.pano-legend { flex: none; display: flex; align-items: flex-start; gap: 8px 26px; height: var(--pano-legend); padding-top: 13px; font: 400 12px/16px var(--sans); color: var(--faint); }
.pano-hint { margin-left: auto; }
.pano-key { display: inline-flex; align-items: center; gap: 8px; }
.pano-key i { flex: none; width: 14px; height: 14px; border-radius: var(--r1); }
.pano-today i { background: color-mix(in srgb, var(--blue) 15%, var(--desk)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 32%, transparent); } /* the grid's two marks, drawn as they are: today's tint, and the ring on the day the strip shows */
.pano-shown i { background: var(--desk); box-shadow: inset 0 0 0 2px var(--blue); }
.pano-detail { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 27.7fr) minmax(0, 72.3fr); grid-template-rows: minmax(0, 1fr); padding: 19px 0 20px; border-top: 1px solid rgba(32,30,29,.12); }
.pano-day { min-width: 0; padding-right: 24px; }
.pano-eyebrow { margin: 0; font: 500 12px/16px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pano-headline { margin: 8px 0 0; font: 400 34px/1.12 var(--serif); letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.pano-count { margin: 2px 0 0; font: 400 14px/1.4 var(--sans); color: var(--blue); }
.pano-sessions { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: -6px 0 -6px -10px; padding: 6px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent; }
.pano-detail[data-state="day"] .pano-sessions { margin: 0; padding: 0 10px 0 0; overflow: visible; } /* the day state scrolls its cards (below), never the button under them. The 10px on the right takes the cards' 10px bleed (.pcards), so #cal-body no longer overflows by 10px; the last card's text ends 10px in, as the reference's does */
.pcards { flex: 1 1 auto; min-height: 0; list-style: none; margin: -6px -10px 0; padding: 6px 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 35%, transparent) transparent; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; align-content: start; background: linear-gradient(var(--desk) 40%, transparent) top / 100% 30px no-repeat local, linear-gradient(transparent, var(--desk) 60%) bottom / 100% 30px no-repeat local, linear-gradient(color-mix(in srgb, var(--ink) 12%, transparent), transparent) left 2px top 2px / calc(100% - 4px) 10px no-repeat scroll, linear-gradient(transparent, color-mix(in srgb, var(--ink) 12%, transparent)) left 2px bottom 2px / calc(100% - 4px) 10px no-repeat scroll; } /* the scroll edge shows only while there is more to reach (the covers are solid over the 10px shadows): a fade, not only a thin scrollbar */
.pcards > li { min-width: 0; display: flex; }
.pano-sessions[data-expanded="false"] .pcards > li:nth-child(n+4) { display: none; } /* three across; "View all N sessions" shows the rest */
.pano-sessions[data-expanded="false"] .pcards { align-content: stretch; } /* one row takes the height there is, so a card's meta sits at its foot and the button under the first card sits at the foot of the block, as in the reference */
.pcard { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; min-width: 0; margin: -6px -10px; padding: 6px 10px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .14s; }
.pcard:hover { background: var(--subtle); }
.pcard:focus-visible { outline: none; background: var(--subtle); box-shadow: inset 0 0 0 2px var(--blue); } /* the keyboard mark: an inset 2px border, not a halo */
.pcard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 400 12px/16px var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); }
.pcard-title { margin-top: 8px; font: 400 15px/20px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.pcard-meta { margin-top: auto; padding-top: 10px; font: 400 12px/16px var(--sans); color: var(--faint); overflow-wrap: anywhere; }
.pcard-tags { margin-top: 4px; font: 400 11px/16px var(--sans); color: var(--faint); }
.pcard-tags .tags { display: block; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-tags .tag, .pcard-tags .tag.type { display: inline; padding: 0; background: none; font: inherit; color: inherit; white-space: nowrap; }
.pcard-tags .tag + .tag::before { content: "\00b7"; margin: 0 6px; }
.pcard-tags .tag.stale { color: oklch(47% .15 70); } /* "May be out of date" keeps its warning hue */
.pano-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-top: 20px; padding: 0 16px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r1); background: var(--desk); color: var(--blue); font: 500 13.5px/1 var(--sans); white-space: nowrap; transition: background-color .14s, border-color .14s; }
.pano-more:hover { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
.pano-more svg { flex: none; transition: transform .16s; }
.pano-more[aria-expanded="true"] svg { transform: rotate(-90deg); }
.pano-more { flex: none; }
/* the other states (calendar.js sets data-state on .pano-detail; both children are always there, so the layout never changes shape) */
.pano-note { margin: 0; max-width: 62ch; font: 400 15px/1.5 var(--sans); color: var(--body); }
.pano-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.pano-acts .btn-34 { text-decoration: none; }
.pano-acts .btn-34.outline[aria-pressed="true"] { border-color: var(--blue); color: var(--blue-hover); }
/* 19 October 2026: a session's bell after its Save (calendar.js panoSession and the agenda's drawer), level with the 34px buttons beside it */
#calendar :is(.pano-acts, .mdrawer .acts) > .ap-btn { width: 34px; height: 34px; }
.pano-title { font-size: 28px; line-height: 1.15; }
.pano-orig { margin: 8px 0 0; font: italic 400 13px/1.45 var(--sans); color: var(--faint); overflow-wrap: anywhere; }
.pano-countdown { margin: 10px 0 0; font: 600 13px/1.3 var(--sans); color: var(--ink); }
.pano-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 16px; margin: 0; font: 400 14px/1.45 var(--sans); }
.pano-kv dt { color: var(--faint); }
.pano-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.pano-kv em { color: var(--faint); font-style: normal; }
.pano-detail[data-state="session"] .pano-acts { margin-top: 14px; }
@media (min-width: 1100px) { .pano-detail[data-state="session"] .pano-kv { grid-template-columns: 92px minmax(0, 1fr) 92px minmax(0, 1fr); gap: 6px 16px; } }
.pano-detail[data-state="loading"] { --sk: color-mix(in srgb, var(--ink) 7%, transparent); }
.pano-detail[data-state="loading"] .pano-day { background: linear-gradient(var(--sk), var(--sk)) 0 3px / 42% 10px no-repeat, linear-gradient(var(--sk), var(--sk)) 0 28px / 86% 30px no-repeat, linear-gradient(var(--sk), var(--sk)) 0 72px / 52% 14px no-repeat; }
.pano-detail[data-state="loading"] .pano-sessions { background: linear-gradient(var(--sk), var(--sk)) 0 4px / 30% 10px no-repeat, linear-gradient(var(--sk), var(--sk)) 0 28px / 84% 16px no-repeat, linear-gradient(var(--sk), var(--sk)) 0 100px / 44% 12px no-repeat; }
.pano-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 0; padding: 13px 0 10px; border-top: 1px solid rgba(32,30,29,.12); font: 400 12px/14px var(--sans); color: var(--faint); }
.pano-foot:empty, #cal-foot { display: none; }
.pano-mode #cal-foot { display: flex; }
.pano-foot-l:empty, .pano-foot-r:empty { display: none; }
.pano-foot-r { margin-left: auto; }
/* The Guide pill (#guide-open: measured 61.5px wide, 34px tall, 11px in from the window's right and bottom edges, shown only while the tour is closed) floats over the foot of the column. The footer's right text stops 9px short of it at every width (the pane's 30px plus this 52px, against the pill's 72.5px); with the tour open the pill is hidden and nothing is reserved. The Runs handle (26px at the window's right edge) is 4px clear of the 30px margin and needs nothing. */
body:has(#guide-open:not([hidden])) #calendar.pano-mode .pano-foot { padding-right: 52px; }
/* The first-run Guide bar (#guide: 460px wide, 49px tall, centred, 11px up) stands over the foot of the page while the tour runs. Measured against .pano-more it covered the button by 2px at 1440x900 and by 14px at 1280x720 and 1024x768 (session 30's dark review), and its band reaches the footer. While it is shown the column ends 66px up, so the strip, its View all button and the footer all sit above it; a short screen scrolls the pane for that, as the old 100px foot did. */
body:has(#guide:not([hidden])) #calendar.pano-mode { padding-bottom: 66px; }
/* Short desktop screens (Carl: "reduce spacing before reducing legibility"): tighter air above and between, the type kept. */
@media (min-width: 641px) and (max-height: 819px) {
  #calendar.pane, #calendar.pano-mode { padding-top: 16px; }
  #calendar .cal-head { margin-bottom: 12px; }
  #calendar .cal-head h2 { font-size: 32px; } /* Carl's range is 32-36px: spacing gives way first, the title keeps its size */
  #calendar .cal-subline { margin-top: 4px; }
  #calendar .cal-filters { margin-bottom: 14px; }
  .pano { --pano-dow: 40px; --pano-legend: 34px; --pano-detail-min: 194px; }
  .pano-dow { padding-top: 14px; }
  .pano-legend { padding-top: 9px; }
  .pano-detail { padding: 14px 0; }
  .pano-headline { font-size: 30px; }
  .pano-foot { padding: 9px 0 8px; }
  .pano-sessions[data-expanded="false"] .pcard-tags { display: none; } /* three across with no tags until the list is opened: a two-line title still fits the card */
}
/* Below about 900px the title and the filters wrap, the month stays full width and the day's block stacks under it: the date and count above, the cards across below. */
@media (max-width: 899px) {
  #calendar.pane, #calendar.pano-mode { padding-left: 20px; padding-right: 20px; }
  .cal-head { gap: 12px 16px; }
  .cal-controls { width: 100%; margin-left: 0; justify-content: space-between; }
  #calendar .cf.grow { flex: 1 1 100%; }
  #calendar .cf:not(.grow) { flex: 1 1 140px; }
  #calendar .cf select, #calendar .cf #cal-country { width: 100%; }
  .pano { --pano-detail-min: 330px; }
  .pano-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 14px; }
  .pano-day { padding-right: 0; }
  .pano-headline br { display: none; }
}
/* Phones (12 October 2026, Carl, with a screenshot of a phone calendar: "The calender should look like this on mobile version. However, the general aesthetic of current site should be preserved, just emulate the layout where the calender is up top and you can click days to see all auctions on that day. Use proper padding, border."). The same query as the gate (phone.js PHONE_QUERY; app.css above lifts the notice for this view). A phone's Calendar is two bordered cards on the page: the top one holds the controls and the month (title with its stepper, the three modes, the search box and a Filters button that opens the selects, then the month edge to edge); the one under it is the day picked: its heading in the card's own band, with the blue bar on its left, and EVERY session of that day as a row with its time at the left. The page scrolls (one column, no golden ratio). Targets are 44px, and a field is 16px so that iOS does not zoom the page when one is focused. The desktop strip's "View all" is not drawn here (calendar.js lists every session on a phone). A divider is the literal rgba(32,30,29,a) (theme.js recolours that in dark, never a custom property). */
.cal-ftoggle { display: none; } /* a phone's button (the phones block below shows it); from 700px up the selects are in the row */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #calendar.pane, #calendar.pano-mode { display: block; padding: 6px max(16px, calc((100% - 640px) / 2)) 28px; }
  /* The top card: .cal-head, .cal-filters and (month) .pano-cal are siblings with matching borders, so it reads as one box */
  #calendar .cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; padding: 16px 16px 14px; border: 1px solid rgba(32,30,29,.14); border-bottom: 0; border-radius: var(--r1) var(--r1) 0 0; background: var(--desk); }
  #calendar .cal-titles, #calendar .cal-controls { display: contents; }
  #calendar .cal-head { position: relative; } /* the month picker's frame: its title row is no box here */
  #calendar .cal-title-row { display: contents; }
  #calendar .cal-picker { top: 64px; left: 16px; right: 16px; width: auto; }
  #calendar .cal-pk-m { height: 44px; }
  #calendar .cal-head h2 { order: 1; flex: 1 1 auto; min-width: max-content; margin: 0; font: 400 26px/1.1 var(--serif); }
  #calendar .cal-nav { order: 2; flex: none; margin: 0 0 0 auto; gap: 6px; }
  #calendar .cal-nav .cal-btn { width: 40px; height: 44px; }
  #calendar .cal-nav .cal-btn.wide { width: auto; min-width: 68px; padding: 0 14px; }
  #calendar .cal-subline { order: 3; flex: 1 1 100%; margin: 0; font: 400 12.5px/1.4 var(--sans); }
  #calendar .cal-modes { order: 4; flex: 1 1 100%; margin: 12px 0 0; }
  #calendar .cal-modes .cal-btn, #calendar .cal-modes .cal-btn:hover { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 6px; font-size: 14px; } /* :hover too: a touch screen keeps it on the button just tapped, and the desktop hover rule (an ID, three classes) would shrink the mode on screen to 32px */
  #calendar .cal-filters { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 0; padding: 0 16px 14px; border: solid rgba(32,30,29,.14); border-width: 0 1px; background: var(--desk); }
  #calendar:not(.pano-mode) .cal-filters { border-width: 0 1px 1px; border-radius: 0 0 var(--r1) var(--r1); margin-bottom: 14px; }
  #calendar .cf.grow { flex: 1 1 0; min-width: 0; max-width: none; }
  #calendar .cf input, #calendar .cf select, #calendar .cal-reset, #calendar .cal-ftoggle { height: 44px; font-size: 16px; }
  #calendar .cf input[type="search"] { padding: 0 8px 0 38px; background-position: 13px center; } /* the placeholder fits whole beside the Filters button at 16px */
  #calendar .cal-ftoggle { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; padding: 0 14px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r1); background: var(--desk); color: var(--ink); font-weight: 500; transition: border-color .14s, background-color .14s; }
  #calendar .cal-ftoggle:active { background: var(--subtle); }
  #calendar .cal-ftoggle[aria-expanded="true"] { border-color: var(--blue); }
  #calendar .cal-ftoggle.set { border-color: var(--blue); background: var(--tint); color: var(--scan-ink); }
  #calendar .cal-ftoggle .k { position: absolute; top: -7px; right: -7px; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r1); background: var(--blue); color: #fff; font: 600 12px/1 var(--sans); } /* a corner badge, so the button (and the search box beside it) keeps its width whether or not a filter is set */
  #calendar .cal-ftoggle .k:empty { display: none; }
  #calendar .cal-filters:not(.open) .cf:not(.grow), #calendar .cal-filters:not(.open) .cal-reset { display: none; }
  .pano-detail[data-state="locked"] .pano-acts { display: none; } /* "See Pro plans" opens Settings, which has no phone layout yet: no button to a dead end */
  #calendar .cal-filters.open .cf:not(.grow) { flex: 1 1 100%; }
  #calendar .cal-filters.open .cal-reset { flex: none; margin-left: auto; } /* a compact button at the right, not a full-width red bar */
  @media (max-width: 389px) { #calendar .cal-ftoggle { width: 44px; padding: 0; } #calendar .cal-ftoggle > span:not(.k) { display: none; } } /* a narrow phone: the button is its icon and its count, so the search box keeps its whole placeholder */
  #calendar.pano-mode .cal-body { flex: none; display: block; }
  .pano { display: block; min-height: 0; --pano-dow: auto; --pano-legend: auto; }
  .pano-cal { display: block; margin: 0; border: 1px solid rgba(32,30,29,.14); border-radius: 0 0 var(--r1) var(--r1); background: var(--desk); overflow: hidden; }
  .pano-dow { height: auto; gap: 1px; padding: 10px 0 9px; }
  .pano-dow span { padding: 0; text-align: center; font-size: 11px; letter-spacing: .04em; }
  .pano-grid { min-height: 0; border: 0; border-top: 1px solid rgba(32,30,29,.12); grid-template-rows: repeat(var(--pano-rows, 5), 54px); }
  .pcell { align-items: center; padding: 7px 2px 6px; }
  .pnum { place-items: center; height: 22px; font-size: 15px; line-height: 22px; }
  .plabel { display: none; }
  .pcount { font-size: 0; margin-top: auto; }
  .pcount::before { display: none; }
  .pcount b { margin: 0; font: 600 12px/14px var(--sans); }
  .pcell.selected, .pcell.selected:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); } /* inside the cell, so the card's edge does not cut it */
  button.pcell:hover { background: var(--desk); }
  button.pcell.today:hover { background: color-mix(in srgb, var(--blue) 15%, var(--desk)); }
  button.pcell:active { background: var(--tint); }
  .pano-legend { height: auto; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px 11px; border-top: 1px solid rgba(32,30,29,.12); font-size: 11.5px; line-height: 16px; }
  .pano-hint { display: none; }
  /* The day card */
  .pano-detail { display: block; margin: 12px 0 0; padding: 0; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: var(--desk); overflow: hidden; }
  .pano-day { padding: 14px 16px 13px; background: var(--subtle); box-shadow: inset 3px 0 0 var(--blue); border-bottom: 1px solid rgba(32,30,29,.12); }
  .pano-day:empty { display: none; }
  .pano-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--ink); } /* which day this is, said first and darkest */
  .pano-headline { margin: 4px 0 0; font-size: 24px; line-height: 1.15; }
  .pano-count { margin: 4px 0 0; font-size: 13px; }
  .pano-sessions, .pano-detail[data-state="day"] .pano-sessions { display: block; margin: 0; padding: 0; overflow: visible; }
  .pano-detail:not([data-state="day"]):not([data-state="loading"]) .pano-sessions { padding: 14px 16px 16px; }
  .pcards { display: block; margin: 0; padding: 0; overflow: visible; background: none; }
  .pcards > li { display: block; }
  .pano-sessions[data-expanded="false"] .pcards > li:nth-child(n+4) { display: block; }
  .pcard { display: grid; grid-template-columns: 74px minmax(0, 1fr) 10px; column-gap: 12px; align-items: start; width: 100%; min-height: 64px; margin: 0; padding: 14px 16px; border-top: 1px solid rgba(32,30,29,.1); }
  .pcards > li:first-child .pcard { border-top: 0; }
  .pcard:hover { background: transparent; }
  .pcard:active { background: var(--subtle); }
  .pcard-top { display: contents; }
  .pcard-time { grid-column: 1; grid-row: 1 / span 3; font: 600 13px/21px var(--sans); color: var(--ink); }
  .pcard-n { display: none; }
  .pcard-title, .pcard-meta, .pcard-tags { grid-column: 2; }
  .pcard-title { margin: 0; font-size: 15px; line-height: 21px; }
  .pcard-meta { margin: 3px 0 0; padding: 0; font-size: 12.5px; line-height: 17px; }
  .pcard-tags { margin: 3px 0 0; font-size: 12px; }
  .pcard-tags .tags { white-space: normal; overflow: visible; text-overflow: clip; } /* the whole line, wrapped: the lots count is what an eye is after */
  .pcard-tags .tag + .tag::before { content: none; }
  .pcard-tags .tag:not(:last-child)::after { content: "\00b7\200B"; margin: 0 6px; } /* the dot ends a tag and a zero-width space follows it: the tags have no whitespace between them, so this is where a line may break */
  .pcard::after { content: ""; grid-column: 3; grid-row: 1 / span 3; align-self: center; width: 8px; height: 14px; background: var(--chev); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6.5 7l-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6.5 7l-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* a row opens its session: the chevron says so */
  .pano-more { display: none; }
  .pano-note { font-size: 14px; }
  .pano-title { font-size: 22px; line-height: 1.2; }
  .pano-kv, .pano-detail[data-state="session"] .pano-kv { grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; }
  .pano-acts { gap: 10px; margin-top: 16px; }
  .pano-acts .btn-34 { flex: 1 1 auto; justify-content: center; height: 44px; }
  .pano-acts .btn-34[data-act="cal-back"] { flex-basis: 100%; } /* Open and Save share a line; the way back has its own */
  /* Agenda and Week (the same top card): rows read as the month's day card does, and the empty drawer is not drawn (a pick opens it) */
  #calendar .aday-head { padding: 14px 16px 8px; } /* (an ID: the agenda's own rules come later in this file) */
  #calendar .aday-head h3 { font-size: 19px; }
  #calendar .mrow { grid-template-columns: 70px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 13px 16px; }
  #calendar .mrow .time { font-size: 13px; line-height: 21px; }
  #calendar .mrow .title { font: 400 15px/21px var(--sans); white-space: normal; overflow: visible; }
  #calendar .mrow .meta { margin-top: 3px; font-size: 12.5px; line-height: 17px; white-space: normal; overflow: visible; }
  #calendar .mrow .tags { grid-column: 2; justify-content: flex-start; margin-top: 6px; }
  #calendar .mdrawer:not(.open) { display: none; }
  #calendar .mdrawer { position: static; margin-top: 14px; padding: 16px; }
  #calendar .mdrawer .acts .btn-34 { height: 44px; }
  .pano-detail[data-state="loading"] .pano-day { display: block; min-height: 104px; background-color: var(--subtle); background-origin: content-box; } /* the bars of the desktop skeleton, inside the card's padding */
  .pano-detail[data-state="loading"] .pano-sessions { min-height: 132px; padding: 16px; background-origin: content-box; }
  @media (hover: none) { #calendar .cal-nav .cal-btn:hover { border-color: rgba(32,30,29,.12); background-color: var(--desk); } #calendar .cal-modes .cal-btn:hover { color: var(--faint); } #calendar .btn-34:hover { transform: none; } } /* a touch screen keeps :hover on the last thing tapped: no stuck border, no button left raised */
  .pano-foot { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 2px 0; border-top: 0; }
  body:has(#guide-open:not([hidden])) #calendar.pano-mode .pano-foot { padding: 14px 2px 0; } /* no pill to leave room for: it is not drawn on a phone */
  .pano-foot-r { margin-left: 0; }
  body:has(#guide:not([hidden])) #calendar.pano-mode { padding-bottom: 28px; }
}
.mcal-agenda { border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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-list .mrow:has(> .cal-peek) { grid-template-columns: 64px minmax(0,1fr) auto; } /* 15 October 2026 (Carl, the week's day list: "same deal as the monthly thing"): the sale's peek, three photos and "+N more", at the row's right */
@media (max-width: 699px) { .mdrawer-list .mrow:has(> .cal-peek) { grid-template-columns: 64px minmax(0,1fr); } .mdrawer-list .mrow > .cal-peek { display: none; } } /* a phone's row has no room beside its words, as in the month */
/* 15 October 2026 (Carl, the week's day list "overflows too much, there should be 10 per page"): calendar.js pages it, and this is the pager under it */
.mdrawer-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font: 500 12px/16px var(--sans); font-variant-numeric: tabular-nums; color: var(--faint); }
.mdrawer-pager .btn-34 { display: inline-flex; align-items: center; justify-content: center; width: 34px; padding: 0; }
.mdrawer-pager .btn-34[data-arg="-1"] svg { transform: scaleX(-1); }
.mdrawer-pager .btn-34:disabled { opacity: .4; cursor: default; }
.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) ── */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); 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 { background: var(--tint); }
.wk-head[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue); } /* the day shown below the week is a ring, as in the month; the fill is today's */
.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 { background: color-mix(in srgb, var(--blue) 15%, var(--desk)); }
.wk-day.today .wk-head:hover { background: color-mix(in srgb, var(--blue) 21%, var(--desk)); }
.wk-day.today .wk-head b { color: var(--blue-hover); }
.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: var(--r1); 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: var(--r1); 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.today .aday-head { background: color-mix(in srgb, var(--blue) 15%, var(--desk)); }
.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); }

/* ── Calendar colour roles, 13 October 2026 ───────────────────────────────────────────────────────────────────────────
   Carl (02:11): "Calender not intuitive, too much of same color or white/black depending on which mode. Recolor/design it to be a bit
   more intuitive and easy to approach, understand without redesigning it". Blue was every mark at once (today, the day shown, the mode,
   every count, every session card) and every other cell was the page's own colour. Now each colour has one job and nothing moved:
   - BLUE = where you are: today's wash, the ring on the day shown, the mode on screen, the Today / This week button.
   - TEAL (--watch, the app's own hue for watch sessions) = an auction closes here. A day's wash deepens with its sessions in five steps
     (--h1 to --h5), so the busy days read before any number does; the same teal is the count, Week's session cards and Agenda's count
     chip. The steps are fixed (third pass, 21:33, Carl: "large days of 50+ auctions ... should be the highest level/color"): 1-4, 5-9,
     10-24, 25-49 and 50 or more sessions in a day, the same in every month and under every filter (calendar.js, HEAT_BREAKS and heatLevel
     put the step in data-heat). The Agenda takes the same; the key under the month names both ends and its title the ranges
     (calendar.js, .pano-heat).
   - GREY = nothing here: days that have closed fade (the numeral, and half the wash), weekends carry a faint wash.
   Fourth pass (14 October, Carl: "Pick better color scheme for the calender days showing differetn # of auctions and a better way to
   show which is today rather than a slightly different color tile"): the five steps were all pale and close together (a light teal at
   most 66% over the page), so the ramp now runs from a hint to the deep teal of --watch-ink (dark: up to the bright --watch-mid), each
   step clearly darker than the last; the 50+ day's numerals turn to the page colour (--on-hot) and a 25-49 day's count to ink, where
   the teal count text no longer reads. Today is a solid blue day with page-coloured numerals (--today, --on-today), not a 15% tint, so
   it reads against any step. The day shown keeps its blue ring, now set off by a 2px gap of the page colour, and the keyboard's ring
   carries the same gap inside the day: a blue ring on or beside the deep steps fell under 3:1, and a ring on a gap reads on all of them.
   Every colour is a token or a mix of tokens, so the dark theme only needs its own percentages (theme-dark.css), never a literal.
   The block sits after the Week and Agenda rules and starts every selector with #calendar, so it outranks the rules it recolours (the
   phone block's too) without editing them: delete it and the Calendar is as it was. */
#calendar { --ramp: var(--watch-ink); --ramp-line: var(--watch-mid); --ramp-ink: var(--watch-ink); --h1: 8%; --h2: 19%; --h3: 34%; --h4: 54%; --h5: 88%; --fade-cap: 10%; --wknd: 1.8%; --ring-teal: var(--blue); --on-hot: var(--desk); --today: var(--blue-hover); --on-today: var(--desk); } /* a day's wash is this much of --ramp over the page, by its step 1 to 5 (data-heat); a day that has closed fades to .55 of it but never past --fade-cap, the deepest wash its --faint numeral still clears 4.5:1 on; --ring-teal is the ring drawn inside a teal day (dark takes a lighter blue) */
#calendar .pcell { --cell: var(--desk); --cap: 100%; }
#calendar .pcell:where(:nth-child(7n+6), :nth-child(7n)):where(:not(.blank)) { --cell: color-mix(in srgb, var(--ink) var(--wknd), var(--desk)); }
#calendar .pcell.has { --heat: var(--h3); } /* a day with no step named below keeps the middle one */
#calendar .pcell.has[data-heat="1"] { --heat: var(--h1); }
#calendar .pcell.has[data-heat="2"] { --heat: var(--h2); }
#calendar .pcell.has[data-heat="4"] { --heat: var(--h4); }
#calendar .pcell.has[data-heat="5"] { --heat: var(--h5); }
#calendar .pcell.has { --cell: color-mix(in srgb, var(--ramp) min(calc(var(--heat) * var(--fade, 1)), var(--cap)), var(--desk)); }
#calendar .pcell:has(~ .pcell.today) { --fade: .55; --cap: var(--fade-cap); } /* every cell before today's has closed: its wash fades (and stops at the cap) and its numeral too */
#calendar .pcell:has(~ .pcell.today) .pnum { color: var(--faint); }
#calendar .pcell:not(.blank):not(.today):not(.locked) { background: var(--cell); } /* blank, today and locked keep their own fills */
@media (hover: hover) { #calendar button.pcell:not(.blank):not(.today):not(.locked):hover { background: color-mix(in srgb, var(--ink) 5%, var(--cell)); } } /* hover keeps the wash and darkens it a step (it used to swap in --subtle, which wiped the colour) */
@media (hover: hover) { #calendar button.pcell:has(~ .pcell.today):hover .pnum { color: var(--ink); } } /* a closed day's --faint numeral is 4.0:1 on that darker wash (dark, the capped step): under the pointer it is ink */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { #calendar button.pcell:not(.blank):not(.today):not(.locked):active { background: var(--tint); } } /* the phone block's press flash, which the fill rule above would otherwise outrank */
#calendar .pcell.has:not(.today):focus-visible { --blue: var(--ring-teal); } /* the keyboard's ring sits inside the day: --blue on the deepest dark teal is 2.36:1, a focus mark needs 3:1 (today's wash is made from --blue, so today keeps it) */
#calendar .pcell.selected:not(.today) { --blue: var(--ring-teal); } /* and the day shown, whose ring sits on the teal or beside it (inside the day on a phone, over its edge on a wide screen): --blue on or beside the deepest dark step is 1.9:1. Today keeps --blue: its wash is made from it */
#calendar .pcell.has .pnum { font-weight: 600; }
#calendar .pcell.has:not(.today) .pcount { color: color-mix(in srgb, var(--ramp-ink) 62%, var(--ink)); } /* 62% toward the teal text, the rest toward --ink: 4.5:1 or better on every step, in both themes */
#calendar .pano-detail .pano-count { color: var(--ramp-ink); }
#calendar .pcell.has[data-heat="4"]:not(.today):not(:has(~ .pcell.today)) .pcount { color: var(--ink); } /* the teal count is under 4.5:1 on the two deep steps: ink on 25-49 */
#calendar .pcell.has[data-heat="5"]:not(.today):not(:has(~ .pcell.today)) :is(.pnum, .pcount) { color: var(--on-hot); } /* and the page colour on 50+ (a closed day's wash stops at --fade-cap, so it keeps the dark text) */
/* today: a solid blue day, whatever its step (its count is in the strip below as well) */
#calendar .pcell.today { background: var(--today); }
@media (hover: hover) { #calendar button.pcell.today:hover { background: color-mix(in srgb, var(--today) 88%, var(--desk)); } }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { #calendar button.pcell.today:hover, #calendar button.pcell.today:active { background: var(--today); } }
#calendar .pcell.today :is(.pnum, .pcount) { color: var(--on-today); }
#calendar .pano-today i { background: var(--today); box-shadow: none; }
/* the day shown: its ring stands off the day by a gap of the page colour; the keyboard's ring the same, inside the day */
#calendar .pcell.selected { box-shadow: 0 0 0 2px var(--desk), 0 0 0 4px var(--blue); }
#calendar .pcell:focus-visible { box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 4px var(--desk); }
#calendar .pcell.selected:focus-visible { box-shadow: 0 0 0 2px var(--desk), 0 0 0 4px var(--blue), inset 0 0 0 2px var(--blue), inset 0 0 0 4px var(--desk); }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { #calendar .pcell.selected, #calendar .pcell.selected:focus-visible { box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 4px var(--desk); } } /* on a phone the ring is inside the day, as the phone block draws it */
#calendar .pano-detail:is([data-state="day"], [data-state="empty"], [data-state="locked"]) .pano-eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: var(--r1); box-shadow: inset 0 0 0 2px var(--blue); } /* the ring the legend and the grid draw: this is the day it is on */
#calendar .pano-heat { gap: 6px; }
#calendar .pano-heat .pano-heat-t { margin-right: 3px; }
#calendar .pano-heat .pano-ramp { display: inline-flex; gap: 2px; }
#calendar .pano-heat i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
#calendar .pano-heat i.h1 { background: color-mix(in srgb, var(--ramp) var(--h1), var(--desk)); }
#calendar .pano-heat i.h2 { background: color-mix(in srgb, var(--ramp) var(--h2), var(--desk)); }
#calendar .pano-heat i.h3 { background: color-mix(in srgb, var(--ramp) var(--h3), var(--desk)); }
#calendar .pano-heat i.h4 { background: color-mix(in srgb, var(--ramp) var(--h4), var(--desk)); }
#calendar .pano-heat i.h5 { background: color-mix(in srgb, var(--ramp) var(--h5), var(--desk)); }
/* the Today / This week button is the blue of the cell it takes you to */
#calendar .cal-nav .cal-btn.wide:not(:disabled) { background-color: color-mix(in srgb, var(--blue) 12%, var(--desk)); border-color: color-mix(in srgb, var(--blue) 30%, transparent); color: var(--blue-hover); }
@media (hover: hover) { #calendar .cal-nav .cal-btn.wide:not(:disabled):hover { background-color: color-mix(in srgb, var(--blue) 20%, var(--desk)); border-color: var(--blue); } }
/* Week: a session is teal as in the month (a "from" session, which closes across days, keeps its label and gets a dashed edge), the day's count too */
#calendar .wk-card, #calendar .wk-card.rolling { border-left-color: var(--ramp-line); background: color-mix(in srgb, var(--ramp) var(--h1), var(--desk)); }
#calendar .wk-card.rolling { border-left-style: dashed; }
#calendar .wk-card:hover, #calendar .wk-card.active, #calendar .wk-card.rolling:hover, #calendar .wk-card.rolling.active { box-shadow: 0 0 0 1.5px var(--ramp-line); }
#calendar .wk-head .n { background: color-mix(in srgb, var(--ramp) var(--h2), var(--desk)); color: color-mix(in srgb, var(--ramp-ink) 62%, var(--ink)); }
#calendar .wk-day:nth-child(n+6):not(.today):not(.past) { background: color-mix(in srgb, var(--ink) var(--wknd), var(--desk)); }
#calendar .wk-day.today .wk-head .dow { color: var(--blue-hover); } /* --faint on today's wash was 4.46:1 */
/* Agenda: the day's count is a chip, deeper for a busier day (the same step as the month's cell: data-heat on the day) */
#calendar .aday-head .count { padding: 3px 7px; border-radius: var(--r1); background: color-mix(in srgb, var(--ramp) var(--h1), var(--desk)); color: color-mix(in srgb, var(--ramp-ink) 62%, var(--ink)); font-weight: 600; }
#calendar .aday[data-heat="2"] .aday-head .count { background: color-mix(in srgb, var(--ramp) var(--h2), var(--desk)); }
#calendar .aday[data-heat="3"] .aday-head .count { background: color-mix(in srgb, var(--ramp) var(--h3), var(--desk)); }
#calendar .aday[data-heat="4"] .aday-head .count { background: color-mix(in srgb, var(--ramp) var(--h4), var(--desk)); }
#calendar .aday[data-heat="5"] .aday-head .count { background: color-mix(in srgb, var(--ramp) var(--h5), var(--desk)); }
#calendar .aday[data-heat="4"] .aday-head .count { color: var(--ink); }
#calendar .aday[data-heat="5"] .aday-head .count { color: var(--on-hot); }
/* ── end of Calendar colour roles ── */

/* ── Calendar mode switch (14 October 2026, Carl: "Add nice smooth transition when switching between month week and agenda") ──
   calendar.js (modeSwitch) paints the switch inside a view transition with html.cal-vt on. The body is its own group: the old view
   fades out quickly and the new one fades up 8px into place, the group easing from the old view's box to the new one's. The rest of
   the page (title, pressed mode, the filter row, which is laid out differently per mode) changes at once: a cross-fade there showed
   both rows at the same time. */
html.cal-vt #cal-body { view-transition-name: cal-body; }
html.cal-vt::view-transition-old(root) { animation: none; opacity: 0; }
html.cal-vt::view-transition-new(root) { animation: none; }
html.cal-vt::view-transition-group(cal-body) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
html.cal-vt::view-transition-old(cal-body) { animation: cal-vt-out .14s ease-in both; }
html.cal-vt::view-transition-new(cal-body) { animation: cal-vt-in .3s cubic-bezier(.2, 0, 0, 1) .06s both; }
/* 15 October 2026: Search <-> Assistant (app.js swapMode). One cross-fade of the whole page: what the two modes share is drawn
   in the same place, so only the words that differ are seen to change. 16 October 2026 (Carl: "should be faster"): .22s to
   .12s, eased out so it lands at once. */
html.mode-vt::view-transition-group(root) { animation-duration: .12s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
@keyframes cal-vt-out { to { opacity: 0; } }
@keyframes cal-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ── watchlist ─────────────────────────────────────────────────────── */
.wl-table { border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); 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: var(--r1); }
.wl-bar i { display: block; height: 100%; border-radius: var(--r1); }
.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: var(--r1); text-align: center; }
.empty .glyph { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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); border-color: transparent; }

/* ── runs ──────────────────────────────────────────────────────────── */
.run-table { border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); background: var(--scan-solid); color: #fff; font: 600 13px/1 var(--sans); transition: filter .16s; }
.plan-hero .btn-36:hover { filter: brightness(.93); }
.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: var(--r1); 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: var(--r1); background: rgba(32,30,29,.09); overflow: hidden; }
.set-row .bar i { display: block; height: 100%; border-radius: var(--r1); }
.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: var(--r1); 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: var(--r1); 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: var(--r1); background: #fff; color: var(--ink); font: 600 12.5px/1 var(--sans); transition: transform .16s, border-color .16s; }
.lim-chip:hover { 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: var(--r1); background: var(--subtle); }
.lim-locked .glyph { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r1); 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: var(--r1); 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; transition: width .24s var(--ease), box-shadow .24s var(--ease); } /* 12 October 2026 (Carl): the frame's corners are square, so the dock's outer edge is too; its handle now rests on the window's own right edge and is pressed there */
.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: var(--r1) 0 0 var(--r1); 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: var(--r1); 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: var(--r1); background: rgba(32,30,29,.1); overflow: hidden; }
.run-card .bar i { display: block; height: 100%; width: 0; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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; }

/* 12 October 2026 (Carl: no frame): the frame's 19px margin (18px padding, 1px border) is gone, so the toast, the guide pill and the Guide button each take 19px off their offset from the window (96px to 77px, 30px to 11px). From the main column they sit exactly where they did, so every clearance measured against them still holds: the composers' 70px foot, the compare bar's 72px lift and 100px stop, the Assistant row's 40px. */
.toast { position: absolute; left: 50%; bottom: 77px; z-index: 13; 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: var(--r1); 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: 11px; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 13px; padding: 8px 8px 8px 17px; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); background: rgba(243,242,242,.14); color: var(--paper); transition: background .16s, transform .16s; }
.guide-prev:hover { background: rgba(243,242,242,.26); }
.guide-next { display: flex; align-items: center; gap: 7px; height: 33px; padding: 0 16px; border: 0; border-radius: var(--r1); background: var(--paper); color: var(--ink); font: 600 12.5px/1 var(--sans); transition: transform .16s, background .16s; }
.guide-next:hover { background: #fff; }
.guide-close { display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: var(--r1); 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); }
/* 16 October 2026 (Carl: "The guide should be a diagonal on the bottom right of the screen. when hovering over it, should come
   into view as a box in the bottom right saying guide that you can click but initially out of the way"). At rest the pill is a
   28px dark triangle in the window's corner, and the clip-path keeps the rest of the button out of reach, so only the triangle
   answers the pointer. Hovering it (or tabbing to it) opens the clip and the box fades in where the pill always was (11px in,
   34px tall). The button itself never moves, so the pointer that opened it is still inside it and it stays open. The box is
   ::before and the triangle ::after; the button sits flush in the corner and its 11px of right and bottom padding are the gap.
   Without hover (a touch screen) the box is simply shown.
   Later the same day (Carl: "Bottom right corner needs work should be more box seen and possibly a little icon showing to
   hover"): the corner is 44px, not 28px, and carries a small "?" in the page's paper colour, so it reads as a thing to point at.
   The icon is the triangle's own background image, so it fades with it when the box comes in. */
.guide-open { position: absolute; right: 0; bottom: 0; z-index: 10; isolation: isolate; height: 45px; padding: 0 25px 11px 14px; border: 0; background: none; color: transparent; font: 600 12px/1 var(--sans); cursor: pointer;
  clip-path: polygon(100% calc(100% - 44px), 100% calc(100% - 44px), 100% 100%, calc(100% - 44px) 100%);
  transition: clip-path .34s cubic-bezier(.22,1,.36,1), color .2s ease .06s; }
.guide-open::before { content: ""; position: absolute; inset: 0 11px 11px 0; z-index: -1; border-radius: var(--r1); background: rgba(32,30,29,.95); box-shadow: 0 12px 30px rgba(32,30,29,.35); opacity: 0; transform: translate(6px, 6px) scale(.96); transform-origin: bottom right; transition: opacity .22s ease, transform .34s cubic-bezier(.22,1,.36,1); }
.guide-open::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: 44px; height: 44px; background-color: rgba(32,30,29,.95); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f3f2f2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.6'/%3E%3Cpath d='M6.2 6.3a1.85 1.85 0 1 1 2.7 1.65c-.6.3-.9.7-.9 1.35'/%3E%3Ccircle cx='8' cy='11.5' r='.55' fill='%23f3f2f2' stroke='none'/%3E%3C/svg%3E"); background-position: right 6px bottom 6px; background-size: 15px 15px; background-repeat: no-repeat; clip-path: polygon(100% 0, 100% 100%, 0 100%); transition: opacity .16s ease; }
.guide-open:hover, .guide-open:focus-visible { color: var(--paper); clip-path: polygon(-40px -40px, calc(100% + 40px) -40px, calc(100% + 40px) calc(100% + 40px), -40px calc(100% + 40px)); }
.guide-open:hover::before, .guide-open:focus-visible::before { opacity: 1; transform: none; }
.guide-open:hover::after, .guide-open:focus-visible::after { opacity: 0; }
@media (hover: none) {
  .guide-open { color: var(--paper); clip-path: none; }
  .guide-open::before { opacity: 1; transform: none; }
  .guide-open::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .guide-open, .guide-open::before, .guide-open::after { transition: none; } }
/* Keyboard focus rings the visible box, not the button's transparent 11px of padding around it. */
.guide-open:focus-visible { outline: none; }
.guide-open:focus-visible::before { outline: 2px solid var(--blue); outline-offset: 2px; }

/* gate + notice: same frame, nothing else */
.gate { 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: var(--r1); } /* 2026-09-23: the gate's buttons were square (Henry); 12 October 2026 (Carl: one border radius for the whole site) they take --r1 like every other box */
.gate-card .who { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: var(--r1); background: var(--subtle); border: 1px solid rgba(32,30,29,.1); font: 500 12px/1 var(--sans); color: var(--muted); }
/* Compact phone shell; all routes remain accessible. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  html.phone-view .frame { grid-template-columns: minmax(0, 1fr); }
  html.phone-view .rail, html.phone-view .tabs, html.phone-view .sample, html.phone-view .tray-dock, html.phone-view .guide, html.phone-view .guide-open { display: none; }
  html.phone-view .hdr { padding: 16px 16px 6px; border-bottom: 0; }
  html.phone-view .crumb { display: flex; align-items: center; gap: 10px; font: 400 28px/1.1 var(--serif); letter-spacing: -.005em; color: var(--ink); } /* the page's name is the title, as a phone's header has it; the month is the card's */
  html.phone-view .crumb::before { content: ""; flex: none; width: 30px; height: 30px; background: url("/assets/brand/auctioneer-icon-ink.svg") center / contain no-repeat; }
  html.phone-view .crumb .root { display: inline; } /* the 1000px rule above shows the leaf only; here the root is the title */
  html.phone-view .crumb .sep, html.phone-view .crumb .leaf { display: none; }
}
@media (max-width: 899px) { .gate-card { padding: 22px 20px 20px; } } /* 12 October 2026 (Carl): the desk's 12px padding under 900px went with the frame's margin */


/* ===== [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: var(--r1); 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: var(--r1); 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 15px/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: var(--r1); 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 { 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: var(--r1); 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: var(--r1); 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: var(--r1); 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 130px; 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; align-items: center; gap: 6px; } /* Watch and the lot's bell (16 October 2026: the last column is 130px, Watch's 92 + 6 + the 32px bell) */
.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 130px; } .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: var(--r1); }
.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: var(--r1); 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: var(--r1); background: var(--fill); }
.sc-opt { min-height: 30px; padding: 0 11px; border: 0; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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. */
/* 19 October 2026 (Carl: "Some of the margins when they are in N/A are gray and some are white. All of them should be white"): both read N/A now, so the disputed one wears the pending one's outline, not the unvalued grey */
.badge.lc-pill:is([data-lc="pending"], [data-lc="disputed"]) { 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: var(--r1); background: var(--fill); overflow: hidden; }
.pl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r1); 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: var(--r1); }
.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: var(--r1); background: #fff; font: 600 12.5px/1 var(--sans); color: var(--ink); transition: border-color .16s, background .16s, color .16s; }
.c-btn:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--blue); background: var(--tint); }
.c-btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; border-radius: var(--r1); }
.c-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.c-btn.primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.c-btn.danger:not(:disabled):not([aria-disabled="true"]):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: var(--r1); 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: var(--r1); background: var(--fill); transition: background .16s; cursor: pointer; }
.c-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r1); 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: var(--r1); 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: 34px; padding: 0 15px; border: 1.5px dashed rgba(32,30,29,.28); border-radius: var(--r1); background: transparent; font: 600 14px/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-wl-actions .c-ceil { height: 26px; padding: 0 10px; border-width: 1.5px; font-size: 12px; }
.c-wl-actions .c-ceil-edit input { width: 96px; height: 26px; font-size: 12px; }
.c-ceil-edit input { width: 104px; height: 32px; padding: 0 8px; border: 1.5px solid var(--blue); border-radius: var(--r1); background: #fff; font: 600 13.5px/1 var(--sans); color: var(--ink); }

/* Watchlist */
/* 12 October 2026 (Carl, on a screenshot of this page): "the images should be bigger to show more detail ... flip through the images", "enlarge the name so they know exactly what the name of it is", and the right side, "a little bit of information overload ... redesign these using color, formatting, different font sizes, padding", with nothing cut yet. A lot is a card of three zones: its photos (wl-gallery.js, the closing time on them), its name with its facts and the person's own controls, and its figures as a ledger, each under a label of its own. Every word the row had is still in it at every width: below 1360px the ledger moves under the name, so the rule that hid the photo, the ceiling and the Margin at 1100px is gone. The zone sizes are the --wl-* properties on the row. A Margin is green or red only when it is not indicative (R63), as before. */
.c-wl-table { background: var(--desk); border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); overflow: hidden; }
.c-wl-row { --wl-stage-h: 150px; --wl-gal: 236px; --wl-led: clamp(560px, 42%, 620px); display: grid; grid-template-columns: var(--wl-gal) minmax(0,1fr) var(--wl-led); grid-template-rows: auto auto 1fr auto; align-items: start; gap: 0 20px; padding: 12px 20px; border-top: 1px solid rgba(32,30,29,.08); } /* 12 October 2026 (Carl: "at least 4 visible at a time"): the long view is the default look, a compact row: the photos (a stage and a column of previews) at the left, the name and its facts, the ledger at the right and the controls in a strip under both. --wl-stage-h is the stage's height, its width is 4:3 of it */ /* 13 October 2026 (Carl, on a screenshot of the list bar and the first rows: "more margin/padding surrounding these just a bit more space to breathe"): the row's padding went from 8px 16px to 12px 20px, the ledger's cells took 8px 16px 9px (were 6px 12px 7px), the controls strip 7px under the ledger (was 5px), the list bar 8px above the rows (was 4px) and the foot 12px 20px, so everything keeps the row's left edge. The stage grew from 124 to 126px and the gallery from 202 to 204px (4:3 of the stage, 6px, 30px of previews) so the photos still end where the controls end. A row is about 150px now (was 140): four are still fully visible at 1470x772 and 1633x858. A tile keeps its 12px sides (the Value tile's kind line fits one line at 1470 only so), and gets 12px above and below. */
.c-wl-row:first-child { border-top: 0; }
.c-wl-row:hover { background: var(--subtle); }
/* 13 October 2026 (Carl, on a screenshot of the Watchlist: "tiles should alternate between off white white, clear distinction but subtle and in dark same concept to better differentiate between them"): every second card is off-white (--row-alt) and the others stay white, so one card ends and the next begins at a glance. The ledger is --subtle on a white card, so on an off-white one it is white, the pairing a hovered or open card already had. A hovered card goes one step deeper than its own colour (--row-alt-hover for the off-white ones); an open one keeps the --subtle it always had, which is why .c-wl-row.open further down has to stay after these. The cards are the table's children and the list is filtered before it is drawn, so "every second" counts what is on screen, and the foot after them does not shift it. test/wl-zebra.test.mjs pins all of it. */
.c-wl-row:nth-child(even) { background: var(--row-alt); }
.c-wl-row:nth-child(even) .c-wl-figures { background: var(--desk); }
.c-wl-row:nth-child(even):not(.open):hover { background: var(--row-alt-hover); }

/* zone one: the photos, with the closing time on them */
.c-wl-gal { position: relative; grid-column: 1; grid-row: 1 / span 4; min-width: 0; }
.c-wl-when { position: absolute; z-index: 2; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(var(--wl-stage-h) * 4 / 3 - 12px); padding: 4px 7px 4px 6px; border-radius: var(--r1); background: color-mix(in oklch, currentColor 11%, var(--desk)); color: var(--watch-ink); font: 600 11.5px/1.15 var(--sans); box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.c-wl-when.soon { color: var(--risk-ink); }
.c-wl-when.near { color: oklch(47% .15 70); }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { .c-wl-when:has(> .c-na) { display: none; } } /* 16 October 2026 (Carl, on a phone: "remove if closing time not known on mobile"): the chip only when there is a time (Search, the Watchlist's lots and sessions); phone.js PHONE_QUERY */
.c-wl-when.over { color: var(--faint); }
.c-wl-when svg { flex: none; }
.c-wl-when .c-na { font-weight: 400; }
.wlg { display: grid; grid-template-columns: minmax(0, calc(var(--wl-stage-h) * 4 / 3)) 30px; gap: 6px; height: var(--wl-stage-h); }
.wlg-stage { position: relative; height: 100%; overflow: hidden; border-radius: var(--r1); background: var(--fill); touch-action: pan-y; }
.wlg-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wlg-open:focus-visible { outline-offset: -3px; }
.wlg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .24s var(--ease); }
.wlg-img.on { opacity: 1; }
.wlg.auto .wlg-img { transition-duration: 1.2s; transition-timing-function: ease-in-out; } /* 16 October 2026: the 5-second cycle's fade (wl-gallery.js cycle, AUTO_FADE_MS); a press keeps the quick .24s */
.wlg-img.bad, .wlg-th img.bad { visibility: hidden; }
.wlg-fail { position: absolute; inset: 0; display: none; place-items: center; padding: 10px; text-align: center; font: 400 11.5px/1.4 var(--sans); color: var(--muted); }
.wlg-stage:has(.wlg-img.on.bad) .wlg-fail { display: grid; }
.wlg-nav { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 26px; height: 38px; margin-top: -19px; padding: 0; border: 0; border-radius: var(--r1); background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .16s, background .16s; }
.wlg-nav.prev { left: 5px; }
.wlg-nav.next { right: 5px; }
.wlg-nav.prev svg { transform: rotate(180deg); }
.wlg-nav:hover { background: rgba(0,0,0,.72); }
.wlg:hover .wlg-nav, .wlg:focus-within .wlg-nav { opacity: 1; }
@media (hover: none) { .wlg-nav { opacity: 1; } }
.wlg-count { position: absolute; right: 5px; bottom: 5px; z-index: 1; padding: 3px 6px; border-radius: var(--r1); background: rgba(0,0,0,.55); color: #fff; font: 600 10.5px/1 var(--sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.wlg-strip { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(5, minmax(0,1fr)); gap: 3px; min-height: 0; }
.wlg-strip.ghost { visibility: hidden; }
.wlg-th { position: relative; display: block; min-height: 0; padding: 0; border: 0; border-radius: var(--r1); overflow: hidden; background: var(--fill); opacity: .66; transition: opacity .16s; }
.wlg-th img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wlg-th:hover, .wlg-th[aria-current="true"] { opacity: 1; }
.wlg-th[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--blue); border-radius: var(--r1); pointer-events: none; }
.wlg-th:focus-visible { outline-offset: 1px; }
.wlg.none { display: grid; place-items: center; grid-template-columns: none; width: calc(var(--wl-stage-h) * 4 / 3); border: 1px dashed rgba(32,30,29,.2); border-radius: var(--r1); background: var(--subtle); }
.wlg-none { font: 400 12.5px/1 var(--sans); color: var(--faint); }
.c-wl-row.closed .wlg-img, .c-wl-row.closed .wlg-th img { filter: grayscale(.8); }

/* zone two: the name, its facts, and the person's own controls */
.c-wl-main { display: contents; } /* long view: its two children, the text and the controls, are cells of the row's own grid (the tiles make it a column again) */
.c-wl-text { display: contents; } /* its parts are cells of the row's grid: the name, its facts and the label check in the second column, Recorded sales at the right end of the strip */
.c-wl-title { grid-column: 2; grid-row: 1; font: 400 24px/1.14 var(--serif); letter-spacing: -.004em; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; -webkit-text-stroke: .015em currentColor; } /* Shared with Search: fuller titles, slightly smaller than the mockup, up to three lines. 16 October 2026 (Carl: "Make the header text showing watch name in the watchlist and search a bit bolder than the rest"): Instrument Serif has one weight, so a hairline stroke in the title's own colour (.36px at 24px) thickens it; dark mode follows through currentColor. */
.c-wl-title a { color: inherit; text-decoration: none; }
.c-wl-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.c-wl-meta { grid-column: 2; grid-row: 2; margin-top: 6px; font: 400 13px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; } /* D8: an unbroken meta line must not push the row past its cell */
/* Both views use lot-card.js and these rules for the title and two metadata lines. */
.c-wl-meta-primary, .c-wl-meta-details { display: block; }
.c-wl-meta-details { margin-top: 3px; }
.c-wl-meta .tag-chip { vertical-align: middle; }
.c-wl-meta .c-dot { margin: 0 5px; }
@media (max-width: 699px) {
  .c-wl-title { font-size: 20px; }
}
.c-wl-house { color: var(--ink); font-weight: 600; }
.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 { grid-column: 2 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; margin-top: 7px; padding-right: var(--wl-reserve, 134px); } /* the right --wl-reserve is the pair's (.c-wl-tools): Recorded sales' 134px, or 272px in a row that has the list picker as well (set with .c-wl-tools below); 30px is the pair's tallest control (the picker's), so the row is as tall with the pair as without */
.c-wl-ceiling { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.c-ceil-sub { font: 400 11px/1.3 var(--sans); color: var(--muted); }
.c-wl-actions .c-btn.sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
.c-wl-actions .c-btn.danger { color: var(--muted); }
.c-wl-actions .c-btn.danger:not(:disabled):not([aria-disabled="true"]):hover { color: var(--red); }
.c-wl-actions .lr-open { margin-left: 0; }
/* Watchlist: the cool palette (13 October 2026), the label check's two parts, here with their neighbours (test/label-report.test.mjs keeps these rules out of the end of the sheet): the line under the facts, and the link in the strip. The palette's own block is at the end of the sheet. */
.c-wl-main .c-wl-text .lc-line { color: var(--wlc-body, var(--body)); }
.c-wl-main .c-wl-text .lc-line.quiet { color: var(--wlc-muted, var(--muted)); }
.c-wl-actions .lr-open { color: var(--wlc-muted, var(--muted)); text-decoration-color: var(--wlc-muted, rgba(32,30,29,.3)); }
.c-wl-actions .lr-open:hover { color: var(--wlc-ink, var(--ink)); text-decoration-color: currentColor; }
/* ── Watchlist long view: the controls strip sits at one x on every card (13 October 2026) ── */
/* Carl, 13 October 2026, with a screenshot of three cards: "These buttons ceiling remove alert should be same across each card, no different positions, uniformity needed". Each control took the width of its own words: the ceiling's figure ("$14,000" is 68.5px, "€1,400" 61.3, the placeholder "set a ceiling" 88.6) and the alerts button ("2 alerts" is 82.5px, "no alerts yet" 109.4) moved everything after them, so the caption, the alerts button, Remove and "Wrong label?" started up to 45px apart from one card to the next. Now the ceiling button is never narrower than 96px (room for "CHF 125,000", 94.3px, as well as "set a ceiling"), the alerts button never narrower than "no alerts yet" (112px: 109.4px in Chromium and 110.4px in WebKit, its words centred), and the ceiling's group (button and caption, 253.3px at rest) never narrower than 254px, so the caption, the alerts button, Remove and "Wrong label?" keep their place while a ceiling is typed (the editor is shorter than the group). The long view only: the tiles' strip is the block "what is inside a tile lines up" (its own 90px and 110px). Minimums only, no width or maximum: a figure wider than 96px is never cut, it makes its own button wider and moves what follows on that card. test/wl-strip-uniform.test.mjs pins each. */
.c-wl-table:not([data-view="tiles"]) .c-wl-actions .c-ceil { min-width: 96px; }
.c-wl-table:not([data-view="tiles"]) .c-wl-ceiling { min-width: 216px; } /* 16 October 2026 (Carl): the caption is the short "Your Ceiling", so the floor is the editor's 214px, not button + the old caption's 254 */
/* ── end of Watchlist long view: the controls strip ── */
/* ── Watchlist long view: the alerts button and Remove start where the ledger starts (13 October 2026) ── */
/* Carl, 13 October 2026, with a screenshot of one card's controls strip under its Current bid and Value: "Here the 2 buttons should be in line vertically with the left side of 'current bid' box". From 1360px the ledger is the row's third column and the strip spans the second and the third, so the strip's first item, the ceiling's group (the ceiling button and its caption, 254px at least), decided where the alerts button and Remove began: 83px short of the ledger's left edge at 1470px, 45px at 1360, 198px at 1633. The group now takes the second column and its gap, less the strip's own 8px, so the two buttons begin on the ledger's left edge at every width from 1360px, on every card, and Remove and "Wrong label?" stay at one x. The group's width is the strip's room (100%, its content) plus the reserve the strip keeps for the pair, less 8px, less the ledger's width. The ledger is --wl-led's clamp taken of the ROW's content, which is 100% plus the reserve, the gallery column and the column gap. --wl-led is a percentage and would be taken of the strip's content here, so its numbers, and the row's column gap, are written out again below for the row's three widths; test/wl-strip-align.test.mjs holds them equal to the row's and works the sum out at a spread of widths. Under 1360px the ledger sits under the strip and none of this applies; the tiles' strip is not touched. */
.c-wl-row { --wl-led-k: .42; --wl-led-lo: 560px; --wl-led-hi: 620px; --wl-col-gap: 20px; }
@media (min-width: 1600px) { .c-wl-row { --wl-led-k: .4; --wl-led-hi: 660px; } }
@media (min-width: 1360px) and (max-width: 1439px) { .c-wl-row { --wl-led-k: .44; --wl-led-lo: 560px; --wl-col-gap: 14px; } }
@media (min-width: 1360px) {
  .c-wl-table:not([data-view="tiles"]) .c-wl-ceiling { width: calc(100% + var(--wl-reserve, 134px) - 8px - clamp(var(--wl-led-lo), calc(var(--wl-led-k) * (100% + var(--wl-reserve, 134px) + var(--wl-gal) + var(--wl-col-gap))), var(--wl-led-hi))); }
}
/* ── end of Watchlist long view: the alerts button and Remove ── */
.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 beside 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 { grid-column: 2; grid-row: 3; margin-top: 3px; font: 400 11.5px/1.4 var(--sans); color: var(--body); }
.c-wl-text .lc-line.quiet { font-size: 11.5px; color: var(--muted); }
.c-wl-report { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* zone three: the figures, a ledger. Bid and value side by side, the Margin under them, each under its label. */
/* 14 October 2026 (Carl: "move the margin box into the value box as a secondary piece of information. doesn't need it's own box. and with extra space on left, the image should be larger and take up more space on the left"): the ledger is two cells, the bid and the value, and the Margin is a line at the foot of the value cell under a hairline (the markup puts .c-wl-margin inside .c-wl-value); its colour step (.mg0 to .mg10) shades the numeral only, with no wash. The two-cell ledger is narrower in the long view (no narrower than the controls strip under it needs: the alerts button, Remove and "Wrong label?" on one line beside the list picker and Recorded sales) (--wl-led and its -k/-lo/-hi twins below), and the room it gives is the photos': a larger stage in both views (--wl-stage-h, and --wl-gal = the stage's 4:3 width + the 30px strip + its 6px gap). */
.c-wl-figures { grid-column: 3; grid-row: 1 / span 3; display: grid; grid-template-columns: minmax(0,205fr) minmax(0,306fr); min-width: 0; background: var(--subtle); border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); overflow: hidden; }
.c-wl-row:hover .c-wl-figures, .c-wl-row.open .c-wl-figures { background: var(--desk); }
.c-fig-k, .c-wl-margin .c-marg-label { display: block; font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--head); }
.c-wl-bid, .c-wl-value { min-width: 0; padding: 8px 16px 9px; }
.c-wl-bid { border-right: 1px solid rgba(32,30,29,.1); font-variant-numeric: tabular-nums; }
.c-wl-bid b, .c-val b { display: block; margin-top: 2px; font: 600 18px/1.1 var(--sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.c-fig-n, .c-val > span { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--sans); color: var(--body); overflow-wrap: anywhere; text-wrap: balance; }
.c-fig-n + .c-fig-n, .c-val > span + span { margin-top: 1px; color: var(--muted); font-size: 11px; }
.c-val .c-val-line.fx { font-size: 11px; }
.c-wl-bid .c-na { display: block; margin-top: 4px; font-size: 12px; }
.c-val { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.c-val b { display: inline-block; border-bottom: 1.5px dashed rgba(32,30,29,.3); }
.c-wl-value .c-val { display: flex; flex-direction: column; align-items: flex-start; } /* 14 October 2026: the value cell, with the Margin in it, is now what sets a ledger's height, and as a block this button was 39.7px in Chromium and 40.6 in WebKit (the dashed inline-block figure on its line); as a column it is 39.7 in both, so the skeleton's measured heights hold in both */
.c-val:hover b { color: var(--blue); border-bottom-color: var(--blue); }
.c-val.empty { margin-top: 4px; width: auto; font: 600 14px/1.3 var(--sans); color: var(--blue); border-bottom: 1.5px dashed currentColor; }
.c-val-set { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-val-set .c-na { flex-basis: 100%; font-size: 11.5px; }
.c-val-chip { padding: 2px 8px; border: 1px solid rgba(32,30,29,.2); border-radius: var(--r1); background: var(--desk); font: 600 12px/1.4 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: 6px; align-items: center; margin-top: 4px; }
.c-val-edit input { width: 108px; height: 34px; padding: 0 9px; border: 1.5px solid var(--blue); border-radius: var(--r1); background: var(--desk); font: 600 14px/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: left; font: 400 11.5px/1.4 var(--sans); color: var(--faint); }
/* 14 October 2026 (Carl: "Changing the value ... changes the size of the layout and causes the image to move a bit. It should be constant and
   unchanging"): the figure keeps its place while it is edited, unseen (.c-val-hold, inert in the markup), and the editor lies over it on the
   cell's own ground, from under the label to the cell's foot, over the Margin line too. Nothing in the card moves or changes size. The cell
   (position: relative, below) is the frame: 17.5px is its 8px top padding and the 9.5px label, the sides and the foot its padding. Where the
   cell is too short for the hint, the hint is left out whole rather than cut: the editor is a wrapping column, so what does not fit goes to
   a second column, outside the cell's width, and is clipped. */
.c-val-hold { visibility: hidden; }
.c-val-slot > .c-val-edit { position: absolute; z-index: 2; inset: 17.5px 16px 9px; margin-top: 4px; flex-flow: column wrap; align-items: flex-start; align-content: flex-start; column-gap: 100%; overflow: hidden; background: var(--desk); }
.c-wl-table[data-view="tiles"] .c-val-slot > .c-val-edit { inset-inline: 12px; }
.c-val-slot > .c-val-edit > .c-val-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.c-val-slot > .c-val-edit > .c-val-hint { flex-basis: auto; }
/* 13 October 2026 (Carl: "When entering this value it has unaesthetic highlight of box"). The value, ceiling and list-name editors already carry a blue
   border while they are open, and the global :focus-visible ring (2px, 2px off) drew a second blue frame round it: a double box. No ring on any of them, as
   on the selects and the calendar filters (the first rules of this file): the border is the mark. (.wl-name is here and not with its own rules because
   test/wl-lists.test.mjs keeps that region to .wl- selectors.) And no native spinner on the two money fields, as on the onboarding's
   (shared/onboarding.css): a value is typed, not stepped, and the arrow keys still step it. */
.c-val-edit input:focus-visible, .c-ceil-edit input:focus-visible, .wl-name:focus-visible { outline: none; }
.c-val-edit input, .c-ceil-edit input { -moz-appearance: textfield; appearance: textfield; }
.c-val-edit input::-webkit-inner-spin-button, .c-val-edit input::-webkit-outer-spin-button, .c-ceil-edit input::-webkit-inner-spin-button, .c-ceil-edit input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (forced-colors: active) { .c-val-edit input:focus-visible, .c-ceil-edit input:focus-visible, .wl-name:focus-visible { outline: 2px solid; } } /* where colours are forced a border cannot carry focus: the system's ring */
.c-wl-margin { grid-column: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; padding: 6px 0 0; border: 0; border-top: 1px solid rgba(32,30,29,.1); text-align: left; }
.c-wl-margin .c-marg-label { margin: 0; }
.c-wl-margin b { font: 600 15px/1 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.c-wl-margin .lc-pill, .c-wl-margin .c-marg-ind { margin: 0; }
.c-wl-margin .c-marg-info { appearance: none; margin: 0; padding: 0; } /* 14 October 2026 (Carl): the note ("against auction results ... read 5 October") is the popup of this "i" (wl-tip.js), not a line under the Margin; the "i" is the app's own source mark (.src) */
.c-wl-margin .c-na { font: italic 400 12px/1.3 var(--sans); }
/* 13 October 2026 (Carl, on a screenshot of this tile, one green and three grey: "Different margins should have colors ranging from dark
   red (very bad to Best +30% and up for now) for this specific box, should be shaded like the green one"). The tile is shaded by its Margin
   on eleven steps, .mg0 the darkest red (-30% and below) to .mg10 the best green (+30% and up); marginTone in ui.js picks the step, and
   MARGIN_BEST and MARGIN_WORST there are the two ends. A step is one colour, --mg, at its hue (--mg-h): the numeral is that colour and the
   wash behind it is 8% of it, as the green one always was. The red end is darker (--mg-dl, --mg-dc) and its wash deeper (--mg-x, scaled
   by --mg-xs: the light page carries less of it, so the small labels stay readable on it). This replaces the .up and .down shading,
   which only a banded Margin had: an indicative one is shaded by its value too (R63, below). */
.c-wl-margin:is(.mg0, .mg1, .mg2, .mg3, .mg4, .mg5, .mg6, .mg7, .mg8, .mg9, .mg10) {
  --mg: oklch(calc(var(--mg-l0) + var(--mg-dl, 0%)) calc(var(--mg-c0) + var(--mg-dc, 0)) var(--mg-h));
}
.c-wl-margin:is(.mg0, .mg1, .mg2, .mg3, .mg4, .mg5, .mg6, .mg7, .mg8, .mg9, .mg10) b { color: var(--mg); }
.c-wl-margin.mg0 { --mg-h: 25; --mg-dl: -6%; --mg-dc: .04; --mg-x: 14%; }
.c-wl-margin.mg1 { --mg-h: 25; --mg-dl: -4%; --mg-dc: .03; --mg-x: 10%; }
.c-wl-margin.mg2 { --mg-h: 26; --mg-dl: -2%; --mg-dc: .02; --mg-x: 6%; }
.c-wl-margin.mg3 { --mg-h: 30; --mg-x: 3%; }
.c-wl-margin.mg4 { --mg-h: 42; --mg-x: 1%; }
.c-wl-margin.mg5 { --mg-h: 58; }
.c-wl-margin.mg6 { --mg-h: 78; }
.c-wl-margin.mg7 { --mg-h: 105; }
.c-wl-margin.mg8 { --mg-h: 128; }
.c-wl-margin.mg9 { --mg-h: 140; }
.c-wl-margin.mg10 { --mg-h: 150; }
.c-wl-margin.live b { opacity: .7; }
/* 16 October 2026 (Carl, on a screenshot of the Value cell: "Depending on margin this bottom div holding the margin should be tinted
   that color as well"): a shaded Margin line is a band at the foot of the value cell, edge to edge and down to the cell's floor, washed
   in its step's colour: the 8% the green one always had plus the red steps' deeper share (--mg-x by --mg-xs), the wash the contrast tests
   in test/margin-tone.test.mjs already work out. The cell is a column so the band sits on its floor however tall the row makes it; the
   line above the band keeps the 7px it had. A Margin with no step (none yet, a disputed label) stays a plain line. */
.c-wl-value { --cell-x: 16px; --cell-b: 9px; display: flex; flex-direction: column; } /* the cell's side and foot padding (8px 16px 9px above), which the band bleeds through */
.c-wl-table[data-view="tiles"] .c-wl-value { --cell-x: 12px; } /* a tile's cells keep their 12px sides */
.c-wl-value > .c-wl-margin { margin-top: auto; }
.c-wl-value > :has(+ .c-wl-margin) { margin-bottom: 7px; }
/* 16 October 2026 (Carl: "underneath the current bid ... the time left here as a 24-hour clock showing how many days, hours, minutes are
   left until close"): the bid cell's foot is the time left (lot-card.js timeLeftHtml), set as the Margin line is at the value cell's
   foot, on the same floor: "Time left 2d 14:05". Under a day it turns the risk colour, as the photo's closing badge does; closed, faint. */
.c-wl-bid { display: flex; flex-direction: column; }
.c-wl-bid > .c-wl-left { margin-top: auto; }
.c-wl-bid > :has(+ .c-wl-left) { margin-bottom: 7px; }
.c-wl-left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0 0; border-top: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); }
.c-wl-left .c-fig-k { margin: 0; }
/* 16 October 2026 (Carl: "No time left, just bigger time showing time left"): the clock alone, at the card's figure size (.c-wl-bid b, 18px);
   "Time left" stays for screen readers, visually hidden as .sr-only is. A sale's start (.starts) still says "Sale starts in". */
.c-wl-left:not(.starts) > .c-fig-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 16 October 2026 (Carl: "fix the center alignment", on "SALE STARTS IN" beside the countdown): centring the two boxes put the 9px capitals
   above the middle of the figures, whose box has more room above them than below. On one baseline, the figures go down by half their cap
   height (Instrument Sans: .73em) less half the label's (about 3.3px at 9 to 9.5px), so the two middles meet whatever the figures' size (18px
   here, 15px in mobile.css). Measured on the ink in Chromium: level at 18px, within a pixel at 15px. */
.c-wl-left.starts { align-items: baseline; }
.c-wl-left.starts > b { position: relative; top: calc(.365em - 3.3px); }
.c-wl-left b { font: 600 18px/1.1 var(--sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; color: var(--ink); }
.c-wl-left.soon b { color: var(--risk-ink); }
.c-wl-left.over b { color: var(--faint); font-weight: 500; }
.c-wl-value > .c-wl-margin:is(.mg0, .mg1, .mg2, .mg3, .mg4, .mg5, .mg6, .mg7, .mg8, .mg9, .mg10) {
  margin-inline: calc(-1 * var(--cell-x)); margin-bottom: calc(-1 * var(--cell-b)); padding: 7px var(--cell-x) var(--cell-b);
  background: color-mix(in oklch, var(--mg) calc(8% + var(--mg-x, 0%) * var(--mg-xs)), transparent);
}
.c-wl-foot { padding: 12px 20px; border-top: 1px solid rgba(32,30,29,.07); background: var(--subtle); font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
/* R152 (17 October 2026): the ended lots, in a group of their own under the lots still to close (wl-ended.js) */
.wl-ended { margin-top: 20px; }
.wl-ended-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--wlc-hair); }
.wl-ended-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; border: 0; background: none; font: 600 14px/1.2 var(--sans); color: var(--wlc-ink); cursor: pointer; }
.wl-ended-n { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--wlc-fill); font: 600 11.5px/1.3 var(--sans); color: var(--wlc-body); text-align: center; font-variant-numeric: tabular-nums; }
.wl-ended-chev { color: var(--wlc-muted); transition: transform .16s var(--ease); }
.wl-ended.open .wl-ended-chev { transform: rotate(180deg); }
.wl-ended-why { flex: 1 1 260px; min-width: 0; font: 400 12.5px/1.4 var(--sans); color: var(--wlc-muted); }
.wl-ended-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--wlc-hair); border-radius: var(--r1); background: var(--wlc-soft); font: 400 13px/1.4 var(--sans); color: var(--wlc-ink); }
.wl-ended-confirm span { flex: 1 1 220px; min-width: 0; }
.wl-ended-none { margin: 2px 0 0; font: 400 13px/1.4 var(--sans); color: var(--wlc-muted); }
@media (prefers-reduced-motion: reduce) { .wl-ended-chev { transition: none; } }

/* the zones at other widths: from 1360px the ledger sits at the right of the name; below it the ledger goes under the name, three across, with the photos beside the whole of it; nothing is hidden */
@media (min-width: 1600px) { .c-wl-row { --wl-led: clamp(560px, 40%, 660px); } }
@media (min-width: 1360px) and (max-width: 1439px) { .c-wl-row { --wl-stage-h: 120px; --wl-gal: 196px; --wl-led: clamp(560px, 44%, 620px); column-gap: 14px; } } /* the narrowest long view: a smaller stage and a wider ledger, so the figures' words still take three lines and a row stays near 150px */
@media (max-width: 1359px) {
  .c-wl-row { --wl-stage-h: 128px; --wl-gal: 207px; grid-template-columns: var(--wl-gal) minmax(0,1fr); grid-template-rows: auto auto 1fr auto auto; }
  .c-wl-gal { grid-row: 1 / span 5; }
  .c-wl-row .c-wl-tools { grid-column: 2; } /* the row's class outranks the pair's own rule further down the sheet */
  .c-wl-figures { grid-column: 2; grid-row: 5; grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 8px; }
}
@media (max-width: 899px) {
  .c-wl-row { grid-template-columns: minmax(0,1fr); }
  .c-wl-gal, .c-wl-title, .c-wl-meta, .c-wl-text .lc-line, .c-wl-actions, .c-wl-row .c-wl-tools, .c-wl-figures { grid-column: 1; grid-row: auto; }
  .c-wl-row .c-wl-tools { justify-self: start; }
  .c-wl-actions { padding-right: 0; }
}

/* Watchlist: arrival (13 October 2026, Carl: "On load of the watchlist, create a quick, staggered fade in animation for the
   tiles, or cards to create a better looking intro affect"). The cards of the long view and the tiles of the grid fade in one
   after another, each rising a few pixels, the footnote last: the first after --wl-intro-lead (the pane's own 0.4 s fade is
   under way and would hide it), then --wl-intro-gap apart, --wl-intro-dur each (wl-intro.js holds the same numbers as LEAD_MS,
   GAP_MS and DUR_MS, and a test holds them together). Only a table marked [data-intro] moves: wl-intro.js
   marks it while the list is arriving (a visit, a finished load) and for the redraws inside that window, and sets
   --wl-intro-elapsed, the ms the arrival has run, which comes off every delay, so a card drawn again mid-arrival picks up where
   the one it replaces had got to. Outside the window the table is drawn unmarked and nothing animates, however often it is
   redrawn. The keyframes name no end, so a card finishes on its own opacity and place, and `backwards` holds it hidden through
   its delay and lets it go at the end: nothing stays on a card for the hover, the open row or the photo viewer to fight with.
   Cards come in STAGGERED steps (the ones past the last step start with it), and past ANIMATED cards nothing moves. Under
   prefers-reduced-motion the global rule at the top drops the motion. */
@keyframes wlIntro { from { opacity: 0; } } /* 15 October 2026 (Carl, the pages jumping on load): the cards still come in one after another, fading where they stand */
.c-wl-table[data-intro] { --wl-intro-lead: 80ms; --wl-intro-gap: 60ms; --wl-intro-dur: .34s; }
.c-wl-table[data-intro] > :is(.c-wl-row, .c-wl-foot) { animation: wlIntro var(--wl-intro-dur) var(--ease) backwards; animation-delay: calc(var(--wl-intro-lead) + var(--wl-intro-gap) * var(--wl-intro-n, 0) - var(--wl-intro-elapsed, 0ms)); }
.c-wl-table[data-intro] > :nth-child(2) { --wl-intro-n: 1; }
.c-wl-table[data-intro] > :nth-child(3) { --wl-intro-n: 2; }
.c-wl-table[data-intro] > :nth-child(4) { --wl-intro-n: 3; }
.c-wl-table[data-intro] > :nth-child(5) { --wl-intro-n: 4; }
.c-wl-table[data-intro] > :nth-child(6) { --wl-intro-n: 5; }
.c-wl-table[data-intro] > :nth-child(7) { --wl-intro-n: 6; }
.c-wl-table[data-intro] > :nth-child(n+8) { --wl-intro-n: 7; }
.c-wl-table[data-intro] > :nth-child(n+13) { animation: none; }
/* The Calendar's day (16 October 2026, Carl: "when loading multiple sessions in a day use same unfolding animation as watchlist on
   load"): the day's rows (.pcards, views/calendar.js panoDetail) arrive on the same clock and keyframes as the cards above. Later that
   day (Carl: "should be a bit faster"): about a third quicker than the Watchlist's, 50ms lead, 40ms apart, 0.24s each; all inside
   wl-intro.js's WINDOW_MS, so a redraw mid-arrival still picks up where it was. */
.pcards[data-intro] { --wl-intro-lead: 50ms; --wl-intro-gap: 40ms; --wl-intro-dur: .24s; }
.pcards[data-intro] > li { animation: wlIntro var(--wl-intro-dur) var(--ease) backwards; animation-delay: calc(var(--wl-intro-lead) + var(--wl-intro-gap) * var(--wl-intro-n, 0) - var(--wl-intro-elapsed, 0ms)); }
.pcards[data-intro] > :nth-child(2) { --wl-intro-n: 1; }
.pcards[data-intro] > :nth-child(3) { --wl-intro-n: 2; }
.pcards[data-intro] > :nth-child(4) { --wl-intro-n: 3; }
.pcards[data-intro] > :nth-child(5) { --wl-intro-n: 4; }
.pcards[data-intro] > :nth-child(6) { --wl-intro-n: 5; }
.pcards[data-intro] > :nth-child(7) { --wl-intro-n: 6; }
.pcards[data-intro] > :nth-child(n+8) { --wl-intro-n: 7; }
.pcards[data-intro] > :nth-child(n+13) { animation: none; }

/* Watchlist: layout switch, long view, tiles (wl-view.js) */
/* 12 October 2026 (Carl: "have option in top right next to refresh where you can switch between this and tiles ... the long view skeleton grid and also greyed out 2x2 tiles"): the switch is two buttons in the head, each a skeleton glyph of solid blocks; the layout in use is dark, the other is grey (it clears 3:1 on the head's ground and is plainly lighter). The long view is the compact row above and the default look; the tiles are a grid of two cards from 880px of width, one below it, and every card has the same parts as a row. */
.wl-view { margin-left: auto; align-self: center; display: inline-flex; gap: 4px; }
.wl-view-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r1); background: transparent; color: color-mix(in oklch, var(--ink) 50%, var(--desk)); transition: color .16s, background .16s; }
.wl-view-btn:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); }
.wl-view-btn[aria-pressed="true"] { color: var(--ink); background: color-mix(in oklch, var(--ink) 9%, transparent); }
.wl-view-btn svg { display: block; }

/* tiles: cards in a grid of two columns (a column of 432px or more each, so from 880px of width; the minimum is half the width, so a third never fits) */
.c-wl-table[data-view="tiles"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(432px, calc(50% - 8px)), 1fr)); gap: 16px; align-items: start; border: 0; border-radius: 0; background: none; overflow: visible; }
.c-wl-table[data-view="tiles"] .c-wl-row { --wl-stage-h: 144px; --wl-gal: 228px; grid-template-columns: var(--wl-gal) minmax(0,1fr); grid-template-rows: auto auto auto 1fr auto auto; gap: 0 14px; padding: 12px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--wlc-card); box-shadow: var(--tile-shadow); }
.c-wl-table[data-view="tiles"] .c-wl-row:first-child { border-top: 1px solid rgba(32,30,29,.1); }
/* 13 October 2026 (Carl: "All the tiles and tile view on the watch list should have the same height and width. Right now, some are shorter than the others"). The two columns were always equal, so every tile has a column's width; the heights were each tile's own words. wl-view.js measures the tiles after every draw and puts the tallest resting tile's height on the table as --wl-tile-h, and every tile is at least that tall: one size, the difference in a shorter tile taken up by its 1fr row (between the name's facts and the controls under them). A tile with a panel open or being edited is not measured and may be taller. Before the first measure, and without script, the minimum is 0 and the tiles are as they were. */
.c-wl-table[data-view="tiles"] .c-wl-row { min-height: var(--wl-tile-h, 0px); }
/* 13 October 2026 (Carl, on the tiles once they were one size: "All elements within each tile should be same as others, right now ones in left are different"). A tile's ledger and controls strip took the lines their own words needed, so two tiles side by side had a ledger of 83px and one of 103px, and the pair of selects above it (at the foot of the card's 1fr row) at different heights. wl-view.js also puts the tallest ledger and the tallest strip of the tiles at rest on the table (--wl-ledger-h, --wl-strip-h): these two rules make them every ledger's and strip's minimum, so the pair, the ledger and the strip are in the same place with the same size in every tile (the ledger's cells stretch with it). The longer selectors are on purpose: the tests read the first rule with the shorter ones, which belong to the rules further down. The strip's 30px is the pair's height and the strip's own minimum, so it is the fallback. */
.c-wl-table[data-view="tiles"] .c-wl-row .c-wl-figures { min-height: var(--wl-ledger-h, 0px); }
.c-wl-table:not([data-view="tiles"]) .c-wl-row .c-wl-figures > .c-wl-value { min-height: calc(var(--wl-ledger-h, 2px) - 2px); } /* 14 October 2026: the long view's ledgers are one height too (wl-view.js equalise: the ledger's height, less its two 1px edges), now that the Margin is a line of the value cell and a ledger is as tall as its words. On the cell and not on the ledger: a minimum on the ledger, which spans the row's 1fr track, was counted whole into that track in Chromium (rows 40px too tall) */
.c-wl-table[data-view="tiles"] .c-wl-row .c-wl-actions { min-height: var(--wl-strip-h, 30px); }
.c-wl-table[data-view="tiles"] .c-wl-figures { background: var(--wlc-soft); } /* 13 October 2026 (Carl, on the tile view: "we don't need alternating between white and off-white ... make them a bit off-white and add shadows to contrast against the background"): no alternation in tiles, every tile is --row-alt with --tile-shadow under it. The ledger is --subtle on a white card, so on an off-white tile it is white, the pairing the long view's off-white cards have; an open tile keeps the off-white (the panel inside has its own --desk surface). The long view still alternates (.c-wl-row:nth-child(even) above); test/wl-zebra.test.mjs pins both */
.c-wl-table[data-view="tiles"] .c-wl-row:hover { background: var(--wlc-soft); }
.c-wl-table[data-view="tiles"] .c-wl-row:hover .c-wl-figures { background: color-mix(in srgb, var(--wlc-soft) 94%, #000); } /* 14 October 2026 (Carl: "Hoevering on a tile should slightly darken it just as with the long view does on hover"): a hovered tile takes the long view's hovered row, --wlc-soft, and its ledger (--wlc-soft at rest, the same colour) goes a step deeper so it stays apart from the card (--desk would whiten it in light) */
.c-wl-table[data-view="tiles"] .c-wl-gal { grid-row: 1 / span 4; }
.c-wl-table[data-view="tiles"] .c-wl-tools { grid-column: 2; grid-row: 4; justify-self: start; align-self: end; margin-top: 4px; min-height: 0; flex-wrap: wrap; }
.c-wl-table[data-view="tiles"] .c-wl-figures { grid-column: 1 / -1; grid-row: 5; margin-top: 6px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.c-wl-table[data-view="tiles"] :is(.c-wl-bid, .c-wl-value) { padding-inline: 12px; } /* 13 October 2026: the long view's ledger cells have 16px sides; a tile's three cells are narrower, and at 1470 a wider side wraps the Value cell's kind line ("auction results · premium not stated") onto two lines and makes a tile 14px taller, so a tile keeps the 12px it had */
.c-wl-table[data-view="tiles"] .c-wl-actions { grid-column: 1 / -1; grid-row: 6; margin-top: 4px; padding-right: 0; }
.c-wl-table[data-view="tiles"] .c-ceil-sub { max-width: 96px; } /* "your ceiling · never used to bid" on two lines (the strip keeps its 30px, the pair's height), so the whole strip is one line in a tile */
.c-wl-table[data-view="tiles"] .c-wl-foot { grid-column: 1 / -1; border: 1px solid rgba(32,30,29,.07); border-radius: var(--r1); }
/* a tile with a panel open (the recorded sales, the alerts, the label report) takes the whole width, as the panel does in the long view; the tiles after it move down, and the tile before it, when it was the left one, stands alone on its line */
.c-wl-table[data-view="tiles"] .c-wl-row.open { grid-column: 1 / -1; }
.c-wl-table[data-view="tiles"] .c-wl-row:has(> .c-wl-alerts, > .c-wl-report, > .c-wl-sales) { grid-column: 1 / -1; }
/* ── Watchlist tiles: what is inside a tile lines up (13 October 2026) ── */
/* Carl, 13 October 2026, with a screenshot of two tiles: "All elements within each tile should be same as others, right now ones in left are different on watchlist". wl-view.js gives every tile, its ledger and its strip one height (--wl-tile-h, --wl-ledger-h, --wl-strip-h); this block is the x and y of what sits INSIDE them, which no height can fix. Tiles only (the long view is untouched), and no height, minimum or maximum is set here: those are wl-view.js's. (1) The Margin cell: its first column is never narrower than the "indicative" pill (70.5px, so 71px: wider and the note, which sets the tallest tile, gets a line more), so the note starts at one x in every tile (it started at 540 with the pill and 521 without), and the number and the note are top-aligned and the rows are not stretched to the cell's height (centred and stretched, they sat 2 to 5px lower in a cell taller than its words). (2) The foot strip: the ceiling button is never narrower than "set a ceiling" (88.6px, so 90) and the alerts button never narrower than "no alerts yet" (109.4px, so 110), so the ceiling's words, the alerts button, Remove and "Wrong label?" start at one x whatever the ceiling's figure or the number of alerts (they moved by up to 45px), and its lines stay at the top of the strip, so a strip made taller to match another tile's second line does not float the buttons of a one-line one down. (3) The id chip no longer makes the facts line taller than the same line without one (20.8px against 16.1px put the house and "checked" words 2px lower in a tile with a chip). (4) The name always has its two lines (the title is clamped to two): a one-line name used to pull the facts line, and the ledger's words under it, 20px up the tile, so the house and "checked" words started at y=36 in one tile and y=57 in the next; 2.28em is two lines of the title's 18px at 1.14, the gallery is the taller column in a tile so no tile gets taller, and one line to delete (the last rule) gives the old close-up back. test/wl-tile-inner.test.mjs pins each. */
.c-wl-table[data-view="tiles"] .c-wl-actions { align-content: flex-start; }
.c-wl-table[data-view="tiles"] .c-wl-actions .c-ceil { min-width: 90px; }
.c-wl-table[data-view="tiles"] .c-wl-meta .tag-chip { vertical-align: middle; margin-block: -4px; }
.c-wl-table[data-view="tiles"] .c-wl-title { min-height: 3.42em; }
/* ── end of Watchlist tiles: what is inside a tile lines up ── */
/* ── Watchlist tiles: Recorded sales at the tile's bottom right (13 October 2026) ── */
/* Carl, 13 October 2026: "Recorded sales should on the tile should be in bottom right of tile, not in middle next to rolex hunt". A tile drew the pair, the list picker and Recorded sales, together at the foot of its name column. The pair is no box in a tile now (display: contents), so its two parts are cells of the tile's own grid: the picker keeps the place and look the pair gave it (the name column's row 4, at its foot), and Recorded sales takes the strip's row (6), at its right end and foot, so on the tile's bottom right and level with the ledger's right edge. With a panel open it stays there, in the strip's row, above the panel. The strip's box runs under it, so it has a z-index (the strip comes later in the markup), and the strip keeps 134px at its right for it (the button's 118.5px, the strip's 8px gap and a little over; the long view's reserve for it is the same 134px), so Remove or "Wrong label?" wrap a line earlier between about 1110px and 1360px of window width, as they already do under 1110px, and the tiles' heights follow equalise(). The button is painted at 30px and keeps its 30px; the -2px margin it has is the strip's way of centring its buttons in a line, and this one is placed by its edges. The long view, where the pair sits at the strip's right end, is not touched. wl-zones.js reads the pair's box, which a tile has no more; see the hand-over for what that changes in a tile's zones. */
.c-wl-table[data-view="tiles"] .c-wl-tools { display: contents; }
.c-wl-table[data-view="tiles"] .c-wl-tools > .wl-pick { grid-column: 2; grid-row: 4; justify-self: start; align-self: end; margin-top: 4px; }
.c-wl-table[data-view="tiles"] .c-wl-more { grid-column: 1 / -1; grid-row: 6; justify-self: end; align-self: end; z-index: 1; margin-block: 0; }
.c-wl-table[data-view="tiles"] .c-wl-row .c-wl-actions { padding-right: 134px; }
/* ── end of Watchlist tiles: Recorded sales at the bottom right ── */
/* ── Watchlist tiles: the photo runs down the tile's left side (14 October 2026) ── */
/* Carl, 14 October 2026, on a tile with a box drawn from the photo's top to the ledger's foot: "the two boxes should compress more to the right
   side and the watch image should take up a taller height". Where a tile is wide enough (the table 1200px and up, two tiles of about 590px), the
   ledger moves from under both columns to the name's column, and the gallery spans every row above the strip, its stage as tall as that span.
   Size containment makes the gallery add no height of its own, so the name, the picker and the ledger set the rows and the photo fills them. */
.c-wl-table[data-view="tiles"] { container: wl-tiles / inline-size; }
@container wl-tiles (min-width: 1200px) {
  .c-wl-table[data-view="tiles"] .c-wl-row { --wl-stage-h: 168px; --wl-gal: 260px; } /* a wider stage too (224px, the 4:3 width of 168), so a tall stage crops the photo less */
  .c-wl-table[data-view="tiles"] .c-wl-gal { grid-row: 1 / span 5; align-self: stretch; contain: size; }
  .c-wl-table[data-view="tiles"] .c-wl-gal .wlg { height: 100%; }
  .c-wl-table[data-view="tiles"] .c-wl-figures { grid-column: 2; }
  /* Carl, 14 October 2026: "Between the image and the set a ceiling ... your ceiling never used to bid no padding", then "Still no gap between
     bottom of the photo and text section underneath it": the strip stands a tile's padding (12px) under the photo and the ledger */
  .c-wl-table[data-view="tiles"] .c-wl-actions { margin-top: 12px; }
}
/* Carl, 14 October 2026: "The three images on tile view should be placed on the bottom left of the actual image to scroll through. Ensure the
   aspect ratio is good and also there is no margin/padding between these sections". At every tile width the previews are a row of 4:3 thumbnails
   laid on the stage's bottom-left corner, edge to edge and flush with it (at most 40px wide, and five of them leave the count's corner free), and the stage takes the gallery's whole width (in a narrow tile the
   gallery is the stage's own 4:3 width, so the photo keeps the shape it had). Previews not shown are dimmed, not see-through. */
.c-wl-table[data-view="tiles"] .c-wl-row { --wl-gal: calc(var(--wl-stage-h) * 4 / 3); }
@container wl-tiles (min-width: 1200px) { .c-wl-table[data-view="tiles"] .c-wl-row { --wl-gal: 260px; } }
.c-wl-table[data-view="tiles"] .wlg { position: relative; grid-template-columns: minmax(0,1fr); gap: 0; }
.c-wl-table[data-view="tiles"] .wlg-strip { --wl-th: min(40px, calc((var(--wl-gal) - 44px) / 5)); position: absolute; left: 0; bottom: 0; z-index: 1; grid-template: calc(var(--wl-th) * 3 / 4) / none; grid-auto-flow: column; grid-auto-columns: var(--wl-th); gap: 0; overflow: hidden; border-radius: 0 0 0 var(--r1); }
.c-wl-table[data-view="tiles"] .wlg-th { border-radius: 0; background: #000; opacity: 1; }
.c-wl-table[data-view="tiles"] .wlg-th[aria-current="true"]::after { border-radius: 0; }
.c-wl-table[data-view="tiles"] .wlg-th img { transition: opacity .16s; }
.c-wl-table[data-view="tiles"] .wlg-th:not([aria-current="true"]):not(:hover) img { opacity: .62; }
/* ── end of Watchlist tiles: the photo runs down the tile's left side ── */
/* and the panels sit a little way under the row's last line (the rows no longer have a row gap of their own) */
.c-wl-row > .c-wl-alerts, .c-wl-row > .c-wl-report, .c-wl-row > .c-wl-sales { margin-top: 10px; }

/* Alerts */
.c-al-rules, .c-al-log { background: #fff; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); 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-row:nth-child(even) { background: var(--row-alt); } /* 16 October 2026 (Carl: "Multiple alerts should have that alternating off white tint"): the app's one off-white on every second alert */
.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; }

/* ── Watchlist tiles: a tile with a panel stretches over its row-mate (13 October 2026) BEGIN ── */
/* Carl, 13 October 2026, 16:23: "On the tile page in the watchlist, when expanding, the tile should go to the left and extend to the right, the other cards should fade behind as it expands to fill the screen, similar to the layout in first when the card expands." The two rules above give a tile with a panel a whole grid row of its own, which sent a right-hand tile to the next row and left its row-mate alone beside a hole. This block replaces them, with two columns, by: the tile stays in its row and stretches over its row-mate (to the left from the right column, to the right from the left one), the row-mate is hidden behind it, every other tile is dimmed, and no other tile moves. Which tile is which is a fact of the grid that a selector cannot know, so wl-open-anim.js puts marks on the table after every draw (data-wl-panel on a tile with a panel, data-wl-wide="start" or "end" on one that stretches, data-wl-behind on its row-mate, data-wl-focus on the table) and animates from the old drawing to the new one; with no marks (that module not run, one column, both tiles of a row open) the two rules above are all there is. The stretch is the tile's own margin: a percentage margin of a grid item is of its grid area, so -100% is its cell and the 16px is the tiles' gap (in the tiles grid, above in this sheet), which together fill the table to the pixel at any width (test/wl-tile-open.test.mjs holds the two 16px together). The rules are as heavy as the full-width ones above and later, so they win. The stretch, the hiding and the lift are for two columns only: they are inside `@media (min-width: 986px)`, the window at which the grid has two columns (2 x 432px and the 16px gap are 880px of table, which is the window less the 54px rail and the pane's 26px on each side, 106px: 986), so when the window is made narrower the margins stop in the very frame the grid becomes one column, before wl-open-anim.js has drawn the marks again (a percentage margin of a one-column cell is the whole table). --wl-behind is how far the other tiles dim (1 for none). The last rule is the tile's own six rows (as above: auto auto auto 1fr auto auto) with a floor under the 1fr one, --wl-r4, which wl-open-anim.js draws on a tile that has a panel: that row is stretched by the tiles' one height and handed the stretch back the moment a panel is taller than it (18px), which was a hop of the ledger and the strip at the first frame of an opening and the last of a closing; with the floor they stay where they are, with the panel below them, and `auto` (the same as 1fr) where nothing has set it. */
@media (min-width: 986px) {
  .c-wl-table[data-view="tiles"] > .c-wl-row[data-wl-wide] { grid-column: auto; position: relative; z-index: 1; }
  .c-wl-table[data-view="tiles"] > .c-wl-row[data-wl-wide="start"] { margin-left: calc(-100% - 16px); }
  .c-wl-table[data-view="tiles"] > .c-wl-row[data-wl-wide="end"] { margin-right: calc(-100% - 16px); }
  .c-wl-table[data-view="tiles"] > .c-wl-row[data-wl-behind] { visibility: hidden; }
}
.c-wl-table[data-view="tiles"][data-wl-focus] > .c-wl-row:not([data-wl-panel]) { opacity: var(--wl-behind, .45); }
.c-wl-table[data-view="tiles"] > .c-wl-row[data-wl-panel] { grid-template-rows: auto auto auto minmax(var(--wl-r4, auto), 1fr) auto auto; }
/* 14 October 2026: the motion is a container transform (wl-open-anim.js, "THE MOTION"): while a tile changes shape, an empty box with the tile's own frame, the shell, goes from the old rectangle to the new one under it, placed in the table's own coordinates. Its frame and geometry are drawn on it by the module; here only what it is. */
.c-wl-table[data-view="tiles"] { position: relative; }
.c-wl-table[data-view="tiles"] > .c-wl-shell { position: absolute; z-index: 1; box-sizing: border-box; pointer-events: none; }
/* ── end of Watchlist tiles: a tile with a panel stretches over its row-mate ── */

/* Watchlist sort and currency (wl-sort.js) BEGIN */
/* 13 October 2026 (Carl: "Up here we need filters so that they can filter by margin, highest to lowest, lowest to highest and we also need a currency converter so they can click view in currency ... price ... value ... that I can click and toggle between"): two labelled selects in the head, in the hand of the lot rows' List control (.wl-pick above): a small caption and a 30px select, the border blue on hover, focus and open. From 1100px they sit on the head's own line, left of the layout switch; below it they take a line under the title, so the switch and Refresh keep the top right. The note under the head (what the figures are shown in, and the rates' source) is one quiet line. */
#watchlist .view-head { flex-wrap: wrap; row-gap: 10px; }
.wl-sortbar { order: 3; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wl-sortbar[hidden] { display: none; }
.wl-ctl { display: inline-flex; align-items: center; gap: 6px; height: 30px; cursor: pointer; }
.wl-ctl-k { font: 600 11.5px/1 var(--sans); color: var(--muted); }
.wl-ctl select { height: 30px; padding: 0 30px 0 9px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r1); background-color: var(--desk); color: var(--ink); font: 600 12px/1 var(--sans); text-overflow: ellipsis; cursor: pointer; transition: border-color .16s; }
.wl-ctl-sort select { width: 176px; }
.wl-ctl select:hover, .wl-ctl select:focus { border-color: var(--blue); }
.wl-ctl select:disabled { border-color: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--faint); cursor: not-allowed; }
@media (min-width: 1100px) {
  .wl-sortbar { order: 0; flex: none; align-self: center; margin-left: auto; }
  .wl-sortbar + .wl-view { margin-left: 0; }
  .wl-sortbar[hidden] + .wl-view { margin-left: auto; }
}
.wl-fxnote { margin: -6px 0 12px; font: 400 12px/1.4 var(--sans); color: var(--faint); }
.wl-fxnote:empty { height: 0; margin: 0; overflow: hidden; } /* a live region has to stay rendered to be announced, so empty it has no height instead of being hidden */
/* Watchlist sort and currency (wl-sort.js) END */

/* Watchlist converted-figure popup (wl-tip.js) BEGIN */
/* 13 October 2026 (Carl: "If the user selects another currency, they should be able to hover over the amount and see a small popup informational window showing listed price in native currency"): one small popup, on <body> because a tile clips what overflows it (the dropdown list is mounted there for the same reason), fixed at the place wl-tip.js gives it. It is a surface like the usage chip's popover, so it takes the page's white, hairline and shadow, and dark mode recolours it with them. It is measured while shut (visibility, never display: none), its width does not depend on where it sits, and it takes no pointer until it is open, so a shut one is in nobody's way. z-index 14: over the guide (10) and the palette (12), under the dropdown list (15) and the gate and notice (20). The Bid tile's figure is a block, so the ring of its tab stop would be as wide as the tile: it is as wide as its words instead. */
.wl-tip { position: fixed; z-index: 14; top: 0; left: 0; box-sizing: border-box; width: max-content; max-width: min(260px, calc(100vw - 16px)); margin: 0; padding: 9px 12px 10px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r1); background: var(--desk); color: var(--ink); box-shadow: 0 8px 26px rgba(32,30,29,.14); text-align: left; opacity: 0; visibility: hidden; transform: translateY(3px); pointer-events: none; transition: opacity .12s var(--ease), transform .12s var(--ease), visibility 0s linear .12s; }
.wl-tip[data-side="above"] { transform: translateY(-3px); }
.wl-tip[data-state="open"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
/* 16 October 2026 (Carl: "Checked 2h ago", after half a second): a figure's "i" (src-tip.js) borrows this popup for one short line, and is never in the pointer's way. */
.src-tip { padding: 6px 9px; font: 500 12px/1.3 var(--sans); color: var(--ink); white-space: nowrap; }
.src-tip[data-state="open"] { pointer-events: none; }
.wl-tip-k { display: block; font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--head); }
.wl-tip-v { display: block; margin-top: 6px; font: 600 18px/1.1 var(--sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.wl-tip-r { display: block; margin-top: 5px; font: 400 11px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.wl-tip-r + .wl-tip-r { margin-top: 1px; }
.wl-tip-a { display: block; margin-top: 6px; font: 500 11px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* 14 October 2026: the house's terms, under a Margin's note */
.c-wl-bid b[data-wl-tip] { width: fit-content; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .wl-tip { transition: none; transform: none; } }
/* Watchlist converted-figure popup (wl-tip.js) END */

/* Watchlist converted-figure cue (wl-tip.js) BEGIN */
/* 13 October 2026 (Carl, with a screenshot of the converted-price popup: "If the listed price is in another currency there should be a small grey i circle to let them know and on hover the pop up shows"): the two headline tiles of a card, the Current bid and the Value, wear the app's own small grey i circle (.src above: 13px, a 28% hairline, the letter in --muted) at the right end of their caption line while "View in" shows their figure converted, so a visitor can see there is a listed price to hover for. It is drawn here and not in the markup: views/watchlist.js and wl-tip.js do not change, a figure "View in" did not convert has no data-wl-tip and so no circle, and the circle is a part of its figure, so the pointer on it is the pointer on the figure and the popup opens as it always did. It stands on the caption line and not beside the figure: a converted figure can fill its tile (JPY, CHF, HUF, HKD, SEK and more do at 1000 to 1150px in the tiles) and a circle after it landed on the neighbour, while the caption line is short and always has the room. It is aligned with the content edge, the tile's own side padding: 16px in the long view, 12px in the tiles (the ledger rule that sets padding-inline there). It is out of the flow, so it moves nothing: not the tile, not the controls strip (its x is pinned, wl-strip-uniform.test.mjs). The Margin tile is positioned with the other two so the three keep painting in their own order (a positioned Value tile alone would paint over the Margin tile, and a figure that overruns its cell would show its last digit there). Left without one, for want of room: the all-in line (it fills its tile), the ceiling's chip (the strip's floors) and the house estimate (inside a line that wraps); their popups work as they did. */
.c-wl-bid, .c-wl-value, .c-wl-margin { position: relative; }
.c-wl-bid b[data-wl-tip]::after, .c-val b[data-wl-tip]::after { content: "i"; content: "i" / ""; position: absolute; top: 6px; right: 16px; box-sizing: border-box; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid rgba(32,30,29,.28); border-radius: 50%; font: 600 8.5px/1 var(--sans); font-style: normal; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; color: var(--muted); background: #fff; }
.c-wl-table[data-view="tiles"] .c-wl-bid b[data-wl-tip]::after, .c-wl-table[data-view="tiles"] .c-val b[data-wl-tip]::after { right: 12px; }
.c-wl-bid b[data-wl-tip]:hover::after, .c-wl-bid b[data-wl-tip]:focus-visible::after, .c-wl-bid b[data-wl-tip][aria-describedby]::after, .c-val b[data-wl-tip]:hover::after, .c-val b[data-wl-tip][aria-describedby]::after { border-color: var(--ink); color: var(--ink); }
/* Watchlist converted-figure cue (wl-tip.js) END */

/* Watchlist: named lists (wl-lists.js) */
/* 12 October 2026 (Carl: "ui to switch between watchlists specifically, like they have custom watchlist names they enter and can filter between these"). The bar above the rows is one line that never wraps: 36px high with 8px under it (13 October 2026, Carl: "a bit more space to breathe"; the contract allowed 40px with 4px under the bar, and the rows below still fit four at 1470x772), the 4px around the 28px chips being the room their focus ring needs inside a sideways scroll. More chips than fit scroll sideways under "+ New list", which stays at the right end. The chosen chip wears the app's chosen-chip colours (.lr-chip, .lim-chip). The refusal's words hang under the name field (wl-lists.js sets their left through CSSOM). The row's List control is at most 140 by 30px. Tokens only, so dark mode follows; one radius. */
.wl-listbar { position: relative; margin: 0 -4px 8px; }
.wl-chips { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; overscroll-behavior-x: contain; }
.wl-chips::-webkit-scrollbar { width: 0; height: 0; }
/* 16 October 2026 (Carl: "Pill boxes for selecting watchlist should be drop down instead"): the chips are one select, the head's own .wl-ctl (Sort's look), its popup list the site's (select.js, counts right-aligned). */
.wl-ctl-list { flex: none; }
.wl-ctl-list select { min-width: 150px; max-width: 260px; text-overflow: ellipsis; }
.wl-tools, .wl-confirm, .wl-field { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.wl-confirm { gap: 6px; padding-left: 2px; }
.wl-confirm-q { font: 400 12.5px/1 var(--sans); color: var(--body); }
.wl-tool { flex: none; height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r1); background: none; color: var(--muted); font: 600 12px/1 var(--sans); transition: border-color .16s, background-color .16s, color .16s; }
.wl-tool:hover { border-color: color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); }
.wl-tool.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.wl-tool.primary:hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; }
.wl-tool.danger { border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.wl-tool.danger:hover { border-color: var(--red); color: var(--red); }
.wl-tool[aria-disabled="true"] { opacity: .62; cursor: progress; }
.wl-add { position: sticky; right: 0; z-index: 1; flex: none; display: inline-flex; align-items: center; padding: 0 4px 0 8px; background: var(--desk); }
.wl-new { height: 28px; padding: 0 10px; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); border-radius: var(--r1); background: var(--desk); color: var(--muted); font: 600 12.5px/1 var(--sans); transition: border-color .16s, color .16s; }
.wl-new:hover { border-color: var(--blue); color: var(--blue-hover); }
.wl-name { width: 200px; height: 28px; padding: 0 9px; border: 1px solid var(--blue); border-radius: var(--r1); background: var(--desk); color: var(--ink); font: 400 13px/1 var(--sans); }
.wl-name::placeholder { color: var(--faint); }
.wl-field.busy .wl-name { color: var(--muted); cursor: progress; }
.wl-name[aria-invalid="true"] { border-color: var(--red); }
.wl-msg { position: absolute; top: calc(100% - 2px); left: 0; z-index: 3; max-width: 360px; margin: 0; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); border-left: 3px solid var(--red); border-radius: var(--r1); background: var(--desk); color: var(--red); font: 500 12px/1.35 var(--sans); white-space: normal; }
.wl-pick { flex: none; display: inline-flex; max-width: 140px; height: 30px; }
.wl-pick-in { display: inline-flex; align-items: center; gap: 6px; height: 30px; cursor: pointer; }
.wl-pick-k { font: 600 11.5px/1 var(--sans); color: var(--muted); }
.wl-pick select { width: 104px; height: 30px; padding: 0 30px 0 9px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r1); background-color: var(--desk); color: var(--ink); font: 600 12px/1 var(--sans); text-overflow: ellipsis; cursor: pointer; transition: border-color .16s; }
.wl-pick select:hover, .wl-pick select:focus { border-color: var(--blue); }

/* Runs */
.c-run-table { background: #fff; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); background: var(--fill); }
.c-choice button { height: 26px; padding: 0 11px; border: 0; border-radius: var(--r1); 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: var(--r1); background: #fff; font: 600 12px/1 var(--sans); color: var(--ink); }

@media (max-width: 1100px) {
  .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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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-strip-top > .ap-btn { margin-left: auto; } /* 16 October 2026: the lot's bell at the strip's right */
.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: var(--r1); 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: var(--r1); 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: var(--r1); 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:is([data-lc="pending"], [data-lc="disputed"]) { 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:is([data-lc="pending"], [data-lc="disputed"]) { 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: var(--r1); background: #fff; font: 600 13px/1 var(--sans); color: var(--body); }
/* the rewind: small and square (36px, the app's one radius) 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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; }
/* 14 October 2026 (Carl: "When the user clicks the watch to view photos fullscreen, you should be able to hover mouse over and view in finer detail with a little extra zoomed in window"): pv-loupe.js's window, a 220px square centred on a mouse pointer over the photo, holding the photo 2 times as large; it takes no clicks */
.pv-loupe { position: fixed; left: 0; top: 0; z-index: 1; width: 220px; height: 220px; overflow: hidden; pointer-events: none; border-radius: var(--r1); border: 1px solid rgba(243,242,242,.7); background: #0f0e0e; box-shadow: 0 10px 30px rgba(0,0,0,.55); will-change: transform; }
.pv-loupe[hidden] { display: none; }
.pv.pv-zooming .pv-fig img { cursor: none; } /* the pointer is hidden while the window shows (Carl: "Mouse should disappear"); 2x since his "zoom out just a bit too far in" (was 2.5) */
.pv-loupe img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
/* 17 October 2026 (Carl: "have preview below showing the image they're on"): Search's viewer (chat.js) carries a strip of previews.
   Phones only: it sits on the bottom row between previous and next, scrolls sideways, and the photo on screen is the one ringed. */
.pv-strip { display: none; }
@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; }
  .pv-strip { position: absolute; left: 64px; right: 64px; bottom: 12px; display: flex; gap: 6px; padding: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pv-strip::-webkit-scrollbar { display: none; }
  .pv-th { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(243,242,242,.22); border-radius: var(--r1); background: rgba(243,242,242,.08); overflow: hidden; opacity: .55; cursor: pointer; }
  .pv-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .pv-th[aria-current="true"] { opacity: 1; border: 2px solid var(--paper); }
  .pv-th:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
}

/* 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: var(--r1); 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 ECB line, 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: 9px 0 0; font: 400 28px/1.08 var(--serif); letter-spacing: -.015em; } /* Search's .first-run h1, so switching between them moves nothing */
.as-lede { flex: none; margin: 8px 0 0; max-width: 440px; font: 400 13px/1.5 var(--sans); color: var(--muted); } /* R87, R121: the one line a state without the web keeps (emptyHtml); the others have none */
.as-starters { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; width: 100%; max-width: 600px; }
.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: var(--r1); 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: var(--r1); 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: var(--r1); 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 15px/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: var(--r1); 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: var(--r1); 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: var(--r1); background: #fff; }
.as-lot-img { flex: none; display: block; width: 72px; height: 72px; overflow: hidden; border-radius: var(--r1); 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; }
/* R149 (17 October 2026): a recorded sale's card says Sold first; and the photos the answer shows above its words, each
   lot's first photo large and its others small, a row that scrolls sideways when it is wider than the answer */
.as-lot-sold { padding: 1px 6px; border-radius: var(--r1); background: var(--fill); font: 600 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.as-gallery { display: flex; gap: 12px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; scroll-snap-type: x proximity; }
.as-g-item { flex: 0 0 200px; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; scroll-snap-align: start; }
.as-g-main { display: block; width: 200px; aspect-ratio: 1; overflow: hidden; border-radius: var(--r1); background: var(--fill); }
.as-g-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-g-more { display: flex; gap: 6px; }
.as-g-small { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: var(--r1); background: var(--fill); }
.as-g-thumb { display: block; width: 100%; height: 100%; object-fit: cover; }
.as-g-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 400 12px/1.35 var(--sans); color: var(--muted); }
.as-g-cap .tag-mono { align-self: flex-start; }
.as-g-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.as-g-line { color: var(--body); font-variant-numeric: tabular-nums; }

/* 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: var(--r1); 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: var(--r1); 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: var(--r1); 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 13px; border: 1.5px solid rgba(32,30,29,.16); border-radius: var(--r1); 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 13.5px/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: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(32,30,29,.08); }
.as-deep { display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 11px 0 7px; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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: 27px; padding: 0 10px; border: 0; border-radius: var(--r1); 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: var(--r1); 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-x { gap: 20px; } /* 16 October 2026 (Carl, on a phone: "a bit more padding there as well between messages"): the question's bubble and the answer under it, 12px at full width */
  .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: var(--r1); background: #fff; }
.mode-opt { height: 26px; padding: 0 12px; border: 0; border-radius: var(--r1); 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 { outline: 2px solid var(--blue); outline-offset: 1px; } /* the model select left this rule 12 October: a select has no ring (select base rule) */
.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 30px 0 10px; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background-color: #fff; font: 600 12px/1 var(--sans); color: var(--ink); cursor: pointer; } /* 30px right: the chevron's room (select base rule) */
.as-model select:hover { border-color: rgba(32,30,29,.4); }
.as-model select:focus { border-color: var(--blue); } /* a select's focus mark (select base rule) */
@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: default; -webkit-user-select: none; user-select: none; } /* 13 October 2026 (Carl, clicking around on the cards: "i highlight some text i don't want to ... accidently trigger the unfolding of the charts below"): a card is not a page of text, so a click, a double click or a drag across it highlights nothing, and only what answers a click shows the pointing hand (the Recorded sales button above all). Three exemptions follow */
.c-wl-row :is(input, textarea) { -webkit-user-select: text; user-select: text; } /* a field keeps its caret and its own selection (Safari refuses the caret in a field under a no-select ancestor) */
.c-wl-row .c-wl-sales { -webkit-user-select: text; user-select: text; } /* the open panel's words are data to copy: a price, a house, a lot title */
.c-wl-row .c-ls-chart { -webkit-user-select: none; user-select: none; } /* but not the chart's own axis text, which a double click on a dot would pick up */
.c-wl-row.wl-zone { cursor: pointer; } /* 13 October 2026 (Carl, a screenshot of a card with three boxes drawn on it: "Expanding to extra info here should be clickable in only these select areas"): the pointing hand shows where a click opens the panel besides the button: wl-zones.js puts .wl-zone on the card while the pointer is on its empty space (since 14 October anywhere on the card that is not a word, a control, a photo or an open panel; it was the right end of the name area and the strip's empty stretch) */
.c-wl-row.open { background: var(--subtle); }
/* 13 October 2026 (Carl: "Find a better place to put the list for the watches ... it's just a bit crowded on the actual overall view card, and the list does not sync up with each card"). The list picker was the strip's last control, so it sat wherever the controls before it ended: a different x on every card. It now sits with Recorded sales, as a pair in the cell Recorded sales had to itself (the strip's right end in the long view, under the name in a tile): the same place on every card, and the strip keeps only what is done to the lot. The pair is one grid item, so the placement rules that were Recorded sales' own (the two media blocks and the tiles' rule above) are the pair's; margin-top is the strip's, so the two lines of controls share a centre, and Recorded sales has one width open or closed (min-width, the wider label's), so the picker beside it never moves when a panel opens. */
.c-wl-tools { grid-column: 3; grid-row: 4; justify-self: end; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 7px; }
.c-wl-row:has(.wl-pick) { --wl-reserve: 272px; } /* with the picker the pair is 256px wide, and the strip keeps 16px clear of it, as it did of Recorded sales alone; without it (an API with no lists) the strip is as it was */
.c-wl-more { flex: none; display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 118.5px; height: 26px; padding: 0 10px; border: 1.5px solid rgba(32,30,29,.2); border-radius: var(--r1); background: transparent; font: 600 11.5px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .16s, color .16s; }
.c-wl-more:hover, .c-wl-more[aria-expanded="true"] { border-color: var(--blue); color: var(--blue-hover); }
.c-wl-more::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .16s; } /* a chevron that turns over when the sales are open */
.c-wl-more[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
/* ==== Past sales panel (13 October 2026): BEGIN. The Watchlist's "Recorded sales" dropdown, redrawn as "Past sales, at a glance." (Carl, 13 October 01:26: the chart on the left, the comps on the right, and a hover that writes the dot's price and date on the two axes).
   Every colour here is a --ls-* property on .c-ls (the dark values are one block at the end of theme-dark.css), so a recolour has nothing to miss. The rules the Prices view shares (.c-ls-table, .c-ls-amt, .c-ls-note, .c-ls-tip) sit below, untouched; the panel's own amt, orig and note are scoped under .c-ls.
   No rule in this block hides a part of a card at any width: under 1100px the card reflows. No hex colour outside the --ls-* properties; no @container. ==== */
.c-wl-sales { grid-column: 1 / -1; min-width: 0; padding: 24px 28px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--desk); cursor: default; }
.c-ls { --ls-sale: #4169E1; --ls-value: #2F51B8; --ls-band: #4169E1; --ls-bid: #eb6834; --ls-bid-ink: #b43f0a; --ls-lit: #2F51B8; --ls-grid: rgba(32,30,29,.08); --ls-axis: #6b6a66; --ls-ring: var(--subtle); --ls-zone: rgba(32,30,29,.045); --ls-area-a: .1; --ls-band-a: .1; --ls-chip: #2F51B8; --ls-chip-ink: #fff; display: flex; flex-direction: column; gap: 22px; } /* the blue, its darker blue and the orange are the three validated together (colour-blind safe, 3:1 as marks on the card); --ls-bid-ink is the orange dark enough to read as text; --ls-area-a is the tint under the lines (0 removes it) */
/* the head: the small caps line, the watch under it, the sentence under that; the two buttons at the right (no headline: Carl, 13 October 02:45, "Past Sales at a glance unnecessary. Remove that") */
.c-ls-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.c-ls-head > :first-child { flex: 1 1 420px; min-width: 0; }
.c-ls-eyebrow { margin: 0 0 10px; font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* the small caps line over the watch, as the app's other captions (.refine .wtag) */
.c-ls-head:has(> .c-ls-headtext > .c-ls-eyebrow:only-child) { align-items: center; } /* 13 October 2026, with the headline cut: where the caption is all the head has on its left (loading, an error, a lot with no model) it sits level with the two buttons, not at their top edge; with the model line or the sentence under it the head is top-aligned, as before */
.c-ls-eyebrow:only-child { margin-bottom: 0; }
.c-ls-model { margin: 6px 0 0; font: 400 14px/1.4 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.c-ls-sub { margin: 4px 0 0; max-width: 72ch; font: 400 13.5px/1.55 var(--sans); color: var(--muted); }
.c-ls-acts { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.c-ls-acts .c-btn.sm { height: 30px; padding: 0 12px; font-size: 12px; }
/* the strip: the key to the chart, with the figures, between two hairlines; the count at the right */
.c-ls-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 14px 0; border-top: 1px solid rgba(32,30,29,.1); border-bottom: 1px solid rgba(32,30,29,.1); }
.c-ls-key { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1.3 var(--sans); color: var(--muted); }
.c-ls-swatch { flex: none; display: block; overflow: visible; }
.c-ls-key-median .c-ls-swatch line { stroke: var(--ls-value); stroke-width: 2; }
.c-ls-key-band .c-ls-swatch rect { fill: var(--ls-band); fill-opacity: .22; }
.c-ls-key-bid .c-ls-swatch line { stroke: var(--ls-bid); stroke-width: 2; stroke-dasharray: 6 4; }
.c-ls-keyfig { font: 600 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.c-ls-key-bid .c-ls-keyfig { color: var(--ls-bid-ink); }
.c-ls-count { margin-left: auto; font: 400 13px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
/* the two columns: the chart (it follows the person down the comps), then the comps */
.c-ls-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.c-ls-chartcol { min-width: 0; }
.c-ls-compscol { display: flex; flex-direction: column; align-self: stretch; min-width: 0; min-height: 0; contain: size; } /* Carl, 13 October 02:21: "the right side should be scroller so no overflow". contain: size takes the comps out of the row's height, so the chart column alone sets it (its height follows its width), and the column stretches to that height (the grid is align-items: start, so the stretch is needed); the list inside scrolls */
.c-ls-compscol .c-ls-colhead, .c-ls-compscol .c-ls-fold { flex: none; }
.c-ls-compscol .c-ls-fold { align-self: flex-start; }
.c-ls-compscol .c-ls-rows { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: -2px -6px -2px -2px; padding: 2px 6px 2px 2px; } /* the 2px and 6px of padding (and the matching negative margin) give a card's border and its badge room inside the scroller's clip */
.c-ls-colhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(32,30,29,.1); }
.c-ls-coltitle { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.c-ls-colnote { font: 400 11.5px/1.3 var(--sans); color: var(--muted); text-align: right; }
.c-ls-chartcard { padding: 12px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--subtle); }
.c-ls-chart { position: relative; width: 100%; min-height: 300px; }
.c-ls-svg { display: block; overflow: visible; font: 400 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.c-ls-grid line { stroke: var(--ls-grid); stroke-width: 1; }
.c-ls-zone { fill: var(--ls-zone); }
.c-ls-zoneedge { stroke: var(--ls-axis); stroke-width: 1; stroke-dasharray: 3 4; }
.c-ls-area-bid { fill: var(--ls-bid); fill-opacity: var(--ls-area-a); }
.c-ls-area-value { fill: var(--ls-value); fill-opacity: var(--ls-area-a); }
.c-ls-band { fill: var(--ls-band); fill-opacity: var(--ls-band-a); }
.c-ls-base, .c-ls-axisline, .c-ls-tick { stroke: var(--ls-axis); stroke-width: 1; }
.c-ls-median { stroke: var(--ls-value); stroke-width: 2; }
.c-ls-bid { stroke: var(--ls-bid); stroke-width: 2; stroke-dasharray: 7 6; }
.c-ls-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .12s; }
.c-ls-chart:not([data-show]) .c-ls-guide { opacity: 0; }
.c-ls-axis text { fill: var(--ls-axis); }
.c-ls-axis .c-ls-under { opacity: 0; } /* the tick label an axis chip sits on: gone while the chip is shown */
.c-ls-axtitle { fill: var(--ls-axis); } /* "↑ Sold for (USD)" over the price column; the date axis has no title, its labels say it (lot-sales.js, 17 October 2026) */
.c-ls-linelbl { fill: var(--ls-bid-ink); font-weight: 600; } /* "Current bid" (or "Opening price") on top of the dashed line (Carl, 13 October 13:01), in the orange dark enough to read as text, the strip's own figure colour; the dark value is in theme-dark.css's --ls-* block */
/* the dots: real buttons, numbered like their cards; a lit or pinned one grows and takes a ring in the card's own colour */
.c-ls-pt { position: absolute; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--ls-sale); color: var(--ls-chip-ink); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; transform: translate(-50%, -50%); cursor: pointer; transition: background-color .12s; }
.c-ls-pt::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* a hit area a little wider than the dot */
.c-ls-ptn { position: relative; z-index: 1; pointer-events: none; }
.c-ls-pt.lit, .c-ls-pt.sel { z-index: 4; width: 26px; height: 26px; border: 2px solid var(--ls-ring); background: var(--ls-lit); font-size: 12px; }
.c-ls-pt.lit::before, .c-ls-pt.sel::before { inset: -9px; background: var(--ls-lit); opacity: .22; } /* the halo of the mock-up: a pale disc round the lit or pinned dot (the dot's own colour at 22%, so it adds nothing over the dot itself) */
.c-ls-pt.sel::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--ls-lit); border-radius: 50%; pointer-events: none; } /* pinned: a second, outer ring */
.c-ls-chart[data-dense="1"] .c-ls-pt { width: 12px; height: 12px; font-size: 0; } /* over twelve sales: small dots, the number only on the lit or pinned one */
.c-ls-chart[data-dense="1"] .c-ls-pt.lit, .c-ls-chart[data-dense="1"] .c-ls-pt.sel { width: 26px; height: 26px; font-size: 12px; }
.c-ls-chip { position: absolute; z-index: 5; padding: 2px 7px; border-radius: var(--r1); background: var(--ls-chip); color: var(--ls-chip-ink); font: 600 12px/18px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; animation: lsChip .12s ease-out; }
.c-ls-chip-y { transform: translate(-100%, -50%); }
.c-ls-chip-x { transform: translate(-50%, 0); }
@keyframes lsChip { from { opacity: 0; } to { opacity: 1; } }
.c-ls-readout { min-height: 20px; margin: 12px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.c-ls-readout b { font-weight: 600; color: var(--ink); }
/* the comps: a card each; the lit or pinned one on the tint with a blue edge */
.c-ls-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.c-ls-row { --ls-row: var(--subtle); display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "ph what amt" "ph what links"; gap: 0 14px; align-items: start; padding: 12px 16px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--ls-row); transition: background-color .12s, border-color .12s; }
.c-ls-row.lit, .c-ls-row[aria-current="true"] { --ls-row: var(--tint); border-color: var(--blue); }
.c-ls-row[aria-current="true"] { padding-left: 15px; border-left-width: 2px; }
.c-ls-ph { position: relative; grid-area: ph; width: 96px; height: 72px; }
.c-ls .c-ls-ph .sp-photo { width: 96px; height: 72px; }
.c-ls-num { position: absolute; z-index: 2; top: -8px; left: -8px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--ls-row); border-radius: 50%; background: var(--ls-sale); color: var(--ls-chip-ink); font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.c-ls-what { grid-area: what; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.c-ls-house { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.c-ls-date { font: 400 13px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--body); }
.c-ls-detail, .c-ls-lot { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.c-ls-what > .c-ls-detail, .c-ls-what > .c-ls-lot, .c-ls-what > .c-ls-orig { flex: 1 1 100%; min-width: 0; }
.c-ls-lot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ls .c-ls-orig { display: block; font: 400 12px/1.4 var(--sans); color: var(--muted); }
.c-ls .c-ls-row .c-ls-amt { grid-area: amt; text-align: right; }
.c-ls .c-ls-row .c-ls-amt b { display: block; font: 600 22px/1.15 var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.c-ls-links { grid-area: links; align-self: end; margin-top: 6px; font: 600 12.5px/1.3 var(--sans); text-align: right; white-space: nowrap; }
.c-ls-links a { margin-left: 12px; color: var(--blue-hover); text-decoration: none; }
.c-ls-links a:first-child { margin-left: 0; }
.c-ls-links a:hover { text-decoration: underline; }
.c-ls-fold { display: inline-block; margin-top: 12px; padding: 0; border: 0; background: none; font: 600 12.5px/1.3 var(--sans); color: var(--blue); cursor: pointer; }
.c-ls-fold:hover { color: var(--blue-hover); }
.c-ls .c-ls-note { margin: 0; font: 400 12.5px/1.55 var(--sans); color: var(--muted); }
.c-ls .c-ls-note.warn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--red); }
@media (max-width: 1100px) {
  .c-ls-cols { gap: 28px; }
}
@media (max-width: 879px) {
  .c-ls-cols { grid-template-columns: minmax(0, 1fr); } /* below 880px: one column, the chart first, then the comps in the page's own flow (no inner scroller) */
  .c-ls-compscol { display: block; align-self: auto; contain: none; }
  .c-ls-compscol .c-ls-rows { overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 1100px) and (min-width: 880px), (max-width: 640px) {
  .c-ls-row { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "ph what" "ph amt" "ph links"; } /* a narrow card: the price under the text, the links under the price, nothing left out */
  .c-ls .c-ls-row .c-ls-amt { margin-top: 6px; text-align: left; }
  .c-ls-links { margin-top: 4px; text-align: left; }
}
@media (max-width: 640px) {
  .c-wl-sales { padding: 18px 16px; }
  .c-ls { gap: 18px; }
  .c-ls-acts { width: 100%; }
  .c-ls-acts .c-btn.sm { flex: 1 1 auto; height: 34px; }
  .c-ls-count { margin-left: 0; flex-basis: 100%; }
  .c-ls-row { padding: 10px 12px; }
  .c-ls-row[aria-current="true"] { padding-left: 11px; }
}
/* ==== Past sales panel: END ==== */
.c-ls-tip { position: absolute; z-index: 3; max-width: 280px; padding: 8px 10px; border-radius: var(--r1); 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-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; }
@media (max-width: 1100px) {
  .c-ls-table th:nth-child(4), .c-ls-table td.c-ls-kind { display: none; }
  .c-ls-table th:nth-child(5) { width: 84px; }
}
/* R51: under 1100px the row's actions used to take their own line under the title. 12 October 2026: the row's zones reflow in the Watchlist block above (under 1360px the figures go under the name), so nothing is hidden or moved by a rule down here. */

/* 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: var(--r1); 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: var(--r1); 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 30px 0 8px; border: 1.5px solid rgba(32,30,29,.22); border-radius: var(--r1); background-color: #fff; font: 500 12.5px/1 var(--sans); color: var(--ink); cursor: pointer; } /* 30px right: the chevron's room (select base rule) */
.su-select:hover { border-color: rgba(32,30,29,.4); }
.su-select:focus { border-color: var(--blue); } /* a select's focus mark (select base rule) */
.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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); }
.u-limit-label { font: 600 11px/1 var(--sans); }
.u-tip { position: absolute; z-index: 3; max-width: 240px; padding: 8px 10px; border-radius: var(--r1); 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: var(--r1); }
.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: var(--r1); 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: var(--r1); 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: var(--r1); background: var(--tint); overflow: hidden; }
.uc-meter i { display: block; height: 100%; border-radius: var(--r1); background: var(--blue); }
.uc-seg { display: flex; gap: 2px; height: 8px; margin-top: 8px; border-radius: var(--r1); 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: var(--r1); }
.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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); background: var(--fill); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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, and 11px since 12 October 2026 with no frame: the same place on the pane) 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: var(--r1); 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: var(--r1); 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 { background: #fff; }
.pr-cmp-x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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.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: var(--r1); 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: var(--r1); 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); } }
/* 14 October 2026 (Carl: flipping through photos fullscreen, "add a loading animation for the placeholder as the image is fetching"): while
   the viewer's photo is on its way (photo-viewer.js keeps it .pv-pending until it loads or fails), a square placeholder sits in the middle
   of the photo's box with the skeleton's sheen running across it. It fades in after 150ms, so a photo already in the cache never shows it;
   under reduced motion app.css stops every animation and it is simply there, still. */
@keyframes pvPhIn { from { opacity: 0; } }
@keyframes pvPhSheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sp-viewer .pv-fig { position: relative; }
.sp-viewer .pv-fig:has(> img.pv-pending)::before {
  --pv-ph: min(calc((100vw - 152px) * .7), calc((100vh - 150px) * .7));
  content: ""; position: absolute; left: 50%; top: calc((100vh - 150px) / 2); width: var(--pv-ph); height: var(--pv-ph); transform: translate(-50%, -50%); pointer-events: none;
  border-radius: var(--r1); background: linear-gradient(100deg, transparent 36%, rgba(243,242,242,.14) 50%, transparent 64%) 100% 0 / 300% 100% no-repeat rgba(243,242,242,.08);
  animation: pvPhIn .2s ease-out .15s both, pvPhSheen 1.8s cubic-bezier(.45, 0, .25, 1) .15s infinite;
}
@media (max-width: 640px) { .sp-viewer .pv-fig:has(> img.pv-pending)::before { --pv-ph: min(calc((100vw - 32px) * .8), calc((100vh - 170px) * .7)); top: calc((100vh - 170px) / 2); } }
/* 13 October 2026: the watchlist's recorded sales were a table here (R51's columns, one place to the right of the photo: the .c-ls-table.ph rules, the small copies of the price and the links, the fold button, and the media rules that hid the kind and stacked the links). They are cards now, in the one block between the Past sales panel BEGIN and END markers near R51 above; the photo box itself (.sp-photo) is still this block's. */
/* 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); 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: var(--r1); background: #fff; text-align: center; transition: border-color .16s, background .16s, transform .16s; }
.cu-card:hover { border-color: rgba(32,30,29,.32); }
.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.
   12 October 2026 (no frame): the figures above are from the window's edge, which the frame stood 19px inside. The
   column now reaches the window's edge and the pill sits 11px in from it (see .toast), the same place on the column, so
   the 40px and the clearance stand (measured with the old rules and the new: 10.5px from the row's last button). */
.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; }
.chat .msg > .ava { margin-top: calc((1.5 * 15px - 26px) / 2); } /* 16 October 2026: the messages are 15px now (Carl: "a bit bigger"), so the centre is on a 15px/1.5 line */ /* 15 October 2026 (Carl, a screenshot of the mark beside "12 lots for": "This is off center"): the 26px mark is centred on the first 13.5px/1.5 line of Search's messages, not hung 2px under its top (it sat 5px low) */
.chat .msg.pl-msg > .ava { margin-top: calc((1.5 * 15px - 26px) / 2); } /* 16 October 2026: centred on the same 15px/1.5 line as the answer's, so the mark does not move when the answer replaces the waiting line */
/* 16 October 2026 (Carl: "Remove the agent icon from search text"): Search's replies carry no mark, and no room is kept for one under later lines
   (.ava-gap), so the words start at the column's edge. The markup stays (avaHtml is shared, and keyed for the live turn); the Assistant keeps its mark. */
.chat .msg > :is(.ava, .ava-gap) { display: none; }
.chat .msg.pl-msg .ai-shimmer { line-height: calc(1.5 * 15px); }
/* the answer's own entrance: no slide; its words fade in where they stand (views/chat.js wordIn) */
.chat #summary-real { animation: none; }
.w-in { animation: wordIn .42s ease-out var(--d, 0ms) both; }
@keyframes wordIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .w-in { animation: none; } } /* 15 October 2026 (Carl, a screenshot of the mark beside "Looking through the index for Rolex…": "it's off center when initially searching"): the waiting line is one 14px/1.4 line under the block's 6px top padding (.pl.ai-wait), so the mark is centred on that line, not on a 13.5px/1.5 one */
/* 16 October 2026 (Carl: "While the search is loading, next to the ai text the avatar (circle of circles) should be pulsing, spinning to show it's working"):
   while Search works its mark (busy, chat.js avaHtml) turns once every 2.4s and breathes 12% larger at the half turn; marks.js speeds its own motion too.
   The global reduced-motion rule (top of file) stops it. */
@keyframes avaWork { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
.chat .ava auc-mark[busy] { animation: avaWork 2.4s cubic-bezier(.45, .05, .55, .95) infinite; transform-origin: 50% 50%; }
/* 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. */
.first-run .starter .drum-line { top: calc(9px + .65em); } /* 15 October 2026, Carl chose "both two-line height": Search's one-line suggestions sit centred in the Assistant's two-line chip, so switching between them changes no box */
.as-starter .drum, .first-run .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; }

/* ── Search and the Assistant grow with the window (12 October 2026) ──────────────────────────────────────────────
   Carl, with two screenshots of Search on a 1470px window: "Lots of white space here on the search page, the text,
   preset buttons and all should be bigger and more dimensional proportionate to page."
   Two units, on :root. --u is the first run's: 1px on a small window (every size below is then what it was) and up
   to 2.1px on a large one, from whichever of the window's width and height runs out first, so the first run never
   outgrows the room above the composer (940 and 560 are the window it was drawn for, about 940 x 560). --v is the
   composer's, a little over half as far, so the bar under the first run does not take the room the first run grew
   into. A size is written N * var(--u) or N * var(--v), N being its old px; the mark, the heading and the starters'
   width carry the page and have their clamp of their own. The drum's window is as tall as its chip's padding (--sp),
   as it always was.
   13 October 2026, Carl, on the Assistant (#assistant): "font and middle stuff too big, make a tad smaller". The Assistant
   takes .7 of the growth Search takes. --ua and --va are --u and --v with the growth cut to that share (and the composer's
   .55 of it), and `.as` points --u and --v at them, so every size below that the Assistant shares with Search (the mark,
   the heading, the chips, the composer) follows with no rule of its own. Search keeps --u and --v; a small window is
   still what it was. */
:root { --u: clamp(1px, min(100vw / 940, (100vh - 330px) / 330), 2.1px); --v: calc(1px + (var(--u) - 1px) * .55); --ua: calc(1px + (var(--u) - 1px) * .7); --va: calc(1px + (var(--ua) - 1px) * .55); }
@media (min-width: 641px) { /* the phone sizes above 641px's own (36px and 40px targets) are left as they are */
  .as-thread > :not(.as-empty) { --u: var(--ua); --v: var(--va); } /* the Assistant's own, smaller units (above): what its conversation shares with Search below is sized by them. 15 October 2026, later (Carl: "when switching between search and assistant, the size of the text and blue circle icon is changing, should be consistent and same place, and size of the 4 boxes is changing"): its empty state is not one of them either; the mark, heading and chips take Search's units and numbers. 15 October 2026 (Carl: "when switching between search and assisttant, the design is consistent, no change. as of now the buttons and box change sizes slightly"): its composer is not one of them; it keeps Search's units, and its numbers below are Search's composer's */
  .fr-pen { --fr-mark: min(230px, calc(clamp(72px, 15vh, 120px) + 120 * (var(--u) - 1px))); } /* R67's mark (15% of the height, 72 to 120px) and what the unit has grown by */
  .first-run h1, .as-empty h1 { font-size: min(66px, calc(28px + 45 * (var(--u) - 1px))); margin-top: calc(9 * var(--u)); }
  .as-lede { margin-top: calc(8 * var(--u)); max-width: calc(440 * var(--u)); font-size: calc(13 * var(--u)); }
  .first-run .starters, .as-empty .as-starters { gap: calc(8 * var(--u)); margin-top: calc(18 * var(--u)); max-width: calc(600 * var(--u)); }
  .as-thread:has(> .as-empty) { padding-bottom: 6px; } /* Search's .thread foot, so the empty state centres in the same box */
  .starter { --sp: calc(9 * var(--u)); gap: calc(9 * var(--u)); padding: var(--sp) calc(12 * var(--u)); }
  .starter i { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .starter i svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
  .starter span { font-size: calc(12.5 * var(--u)); }
  .starter .drum { height: calc(1.3em + 2 * var(--sp)); margin: calc(-1 * var(--sp)) 0; }
  .starter .drum-line { top: var(--sp); }
  .first-run .starter .drum-line { top: calc(var(--sp) + .65em); }
  .as-starter .drum, .first-run .starter .drum { height: calc(2.6em + 2 * var(--sp)); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--sp), #000 calc(100% - var(--sp)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--sp), #000 calc(100% - var(--sp)), transparent); }
  /* the Search composer */
  .composer { padding: calc(11 * var(--v)) calc(13 * var(--v)); }
  .composer-top { gap: calc(8 * var(--v)) calc(12 * var(--v)); margin-bottom: calc(9 * var(--v)); }
  .mode-opt { height: calc(26 * var(--v)); padding: 0 calc(12 * var(--v)); font-size: calc(12 * var(--v)); }
  .uc-chip { gap: calc(6 * var(--v)); height: calc(26 * var(--v)); padding: 0 calc(10 * var(--v)); font-size: calc(11.5 * var(--v)); }
  .uc-chip .u-ring { width: calc(16 * var(--v)); height: calc(16 * var(--v)); }
  .composer-row { gap: calc(10 * var(--v)); }
  .composer input { font-size: calc(13.5 * var(--v)); }
  .send { width: calc(32 * var(--v)); height: calc(32 * var(--v)); }
  .tool-chips { gap: calc(6 * var(--v)); margin-top: calc(10 * var(--v)); padding-top: calc(9 * var(--v)); }
  .tchip { gap: calc(5 * var(--v)); height: calc(27 * var(--v)); padding: 0 calc(10 * var(--v)); font-size: calc(11.5 * var(--v)); }
  .explainer { width: calc(270 * var(--v)); padding: calc(11 * var(--v)) calc(13 * var(--v)); }
  .ex-name { font-size: calc(12.5 * var(--v)); }
  .explainer p { font-size: calc(12 * var(--v)); }
  .explainer .foot { font-size: calc(11 * var(--v)); }
  .su-line-bar { gap: calc(8 * var(--v)); margin-bottom: calc(8 * var(--v)); padding: calc(7 * var(--v)) calc(8 * var(--v)) calc(7 * var(--v)) calc(14 * var(--v)); } /* "Set up your defaults", above the composer */
  .su-line-link b { font-size: calc(13 * var(--v)); }
  .su-line-link span { font-size: calc(12 * var(--v)); }
  .su-line-x { width: calc(28 * var(--v)); height: calc(28 * var(--v)); font-size: calc(18 * var(--v)); }
  /* the Assistant's */
  .as-composer { padding: calc(11 * var(--v)) calc(13 * var(--v)); }
  .as-field { gap: calc(10 * var(--v)); }
  .as-input { max-height: calc(180 * var(--v)); padding: calc(5 * var(--v)) 0; font-size: calc(13.5 * var(--v)); }
  .as-row { gap: calc(6 * var(--v)); margin-top: calc(10 * var(--v)); padding-top: calc(9 * var(--v)); }
  .as-deep { gap: calc(7 * var(--v)); height: calc(27 * var(--v)); padding: 0 calc(11 * var(--v)) 0 calc(7 * var(--v)); font-size: calc(12 * var(--v)); }
  .as-switch { width: calc(24 * var(--v)); height: calc(14 * var(--v)); }
  .as-switch::after { top: calc(2 * var(--v)); left: calc(2 * var(--v)); width: calc(10 * var(--v)); height: calc(10 * var(--v)); }
  .as-deep[aria-pressed="true"] .as-switch::after { transform: translateX(calc(10 * var(--v))); }
  .as-hint, .as-count { font-size: calc(11.5 * var(--v)); }
  .as-new { height: calc(27 * var(--v)); padding: 0 calc(10 * var(--v)); font-size: calc(12 * var(--v)); }
  .as-stop { gap: calc(7 * var(--v)); height: calc(32 * var(--v)); padding: 0 calc(13 * var(--v)); font-size: calc(12.5 * var(--v)); }
  .as-model { gap: calc(7 * var(--v)); font-size: calc(12 * var(--v)); }
  .as-model select { height: min(calc(30 * var(--v)), calc(26 * var(--v) + 6px)); padding-left: calc(10 * var(--v)); font-size: calc(12 * var(--v)); } /* never taller than the Search/Assistant switch beside it (26 + its 6px frame), so the composer's top row is Search's height */
}

/* ── 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; Discover's card is muted and says it in
   words, and so did the Watchlist's figure until 13 October 2026 (Carl: every Watchlist Margin is shaded by its value,
   .c-wl-margin.mg0 to .mg10 in the Watchlist block; its pill, dotted edge and title still say it is indicative). 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 .c-marg-ind { display: inline-flex; padding: 3px 8px; border: 1px dotted rgba(32,30,29,.42); border-radius: var(--r1); background: rgba(32,30,29,.04); font: 600 11px/1 var(--sans); letter-spacing: .02em; color: var(--body); }
.g-margin.ind b { color: rgba(243,242,242,.8); }
.g-card.band .g-margin.ind b { color: var(--body); }

/* ── Watchlist: the cool palette (13 October 2026): BEGIN ── */
/* 14 October 2026: Carl selected the white elevated card concept. Neutral borders and shadows separate white tiles from the white page; pale gray data sections replace the blue tint. Existing layout, controls, margin states, and action colors remain token-based. */
:root {
  --wlc-card: #fff;       /* The selected white elevated card design. */
  --wlc-soft: #f7f6f4;      /* a white row's hover, an open card's ground, the foot */
  --wlc-bid: #f7f6f4;       /* the Current bid cell */
  --wlc-hair: #e4e1dd;      /* hairlines: the table's and a tile's edge, the ledger's frame and dividers, the foot's edge */
  --wlc-edge: #ccc8c2;      /* a control's border */
  --wlc-ink: #201e1d;       /* the name, the house, the figures, a control's words */
  --wlc-body: #3f3e3b;      /* the facts line, a note under a figure, the ceiling's caption */
  --wlc-muted: #6b6a66;     /* labels, the quiet buttons and links, the second note */
  --wlc-dot: #aaa59e;       /* the "·" between facts */
  --wlc-dash: #bdb8b1;      /* the dashed edge under the Value figure */
  --wlc-btn: #fff;       /* a quiet button's top: it fades to the page's white at its foot */
  --wlc-fill: #ece9e4;      /* behind a photo that has not loaded, and a lot with no photo */
  --wlc-navy: #173c6f; --wlc-navy-hover: #0f2e5a; --wlc-on-navy: #fff; /* the action still to take */
  --wlc-when-bg: #f3f2f0; --wlc-when-ink: #625d56; /* the closing badge when the lot is not about to close */
}

/* the table, the cards, the lines between them; a white row's hover and an open card's ground */
.c-wl-table { border-color: var(--wlc-hair); }
.c-wl-row { border-top-color: var(--wlc-hair); }
.c-wl-table[data-view="tiles"] > .c-wl-row { border-color: var(--wlc-hair); }
.c-wl-table[data-view="tiles"] > .c-wl-row:first-child { border-top-color: var(--wlc-hair); }
.c-wl-row:hover, .c-wl-row.open { background: var(--wlc-soft); } /* an open row is --wlc-soft whatever its parity (it was --subtle); a hovered even row and every tile keep their own: the rules above are heavier */

/* the ledger: a white frame whose first cell is blue; the Margin cell is its own wash, or white where the lot has no Margin */
.c-wl-figures { background: var(--desk); border-color: var(--wlc-hair); }
.c-wl-bid { background: var(--wlc-bid); border-right-color: var(--wlc-hair); }
.c-wl-margin { border-top-color: var(--wlc-hair); }
.c-fig-k, .c-wl-margin .c-marg-label { color: var(--wlc-muted); }
.c-wl-bid b, .c-val b { color: var(--wlc-ink); }
.c-val b { border-bottom-color: var(--wlc-dash); }
.c-fig-n, .c-val > span { color: var(--wlc-body); }
.c-fig-n + .c-fig-n, .c-val > span + span { color: var(--wlc-muted); }
.c-wl-row .c-na { color: var(--wlc-muted); }

/* the name and its facts */
.c-wl-title, .c-wl-house { color: var(--wlc-ink); }
/* 19 October 2026 (Carl: the Calendar's open session turns its title blue, "Implement this for the search and the watch list as well. This should
   be a default thing"): an open lot or session card's title is blue, as #calendar .session-preview-row.is-open's is; mobile.css repeats it for its own title rule.
   Then (Carl: "keep this effect for everything but the watch list"): not in the Watchlist */
.c-wl-row.open .c-wl-title:not(#watchlist *) { color: var(--blue); }
.c-wl-meta { color: var(--wlc-body); }
.c-wl-row .c-dot { color: var(--wlc-dot); }
.c-wl-row .src, .c-wl-bid b[data-wl-tip]::after, .c-val b[data-wl-tip]::after { border-color: var(--wlc-edge); color: var(--wlc-muted); }
.c-wl-row .src:hover, .c-wl-row .src:focus-visible { border-color: var(--wlc-ink); color: var(--wlc-ink); }
.c-wl-bid b[data-wl-tip]:hover::after, .c-wl-bid b[data-wl-tip]:focus-visible::after, .c-wl-bid b[data-wl-tip][aria-describedby]::after, .c-val b[data-wl-tip]:hover::after, .c-val b[data-wl-tip][aria-describedby]::after { border-color: var(--wlc-ink); color: var(--wlc-ink); } /* the cue's own hover, focus and open states (b2's block after the popup's), listed with the same selectors so the weight is the same and this, later, wins */
.c-wl-meta .tag-chip { border-color: var(--wlc-edge) !important; color: var(--wlc-body) !important; } /* the lot's id chip is drawn with an inline style (ui.js CHIP, shared with Search and the chat), which only !important outranks: the Watchlist's chips, colour only, the one use of it here */
.c-wl-margin .c-marg-ind { border-color: color-mix(in srgb, var(--wlc-ink) 38%, transparent); background: color-mix(in srgb, var(--wlc-ink) 5%, var(--wlc-card)); color: var(--wlc-body); } /* 16 October 2026 (Carl: "indicative box should always be that gray color"): a solid grey, the 5% ink on the card's own white, so the Margin's red or green wash behind it never tints it */

/* the photos: the closing badge, the ground behind them */
.c-wl-when:not(.soon, [class~="near"], .over) { /* [class~=] is .near: onboarding v4 owns the bare .near (test/r117) */ background: var(--wlc-when-bg); color: var(--wlc-when-ink); }
.c-wl-when .c-na { color: inherit; }
.wlg-stage, .wlg-th { background: var(--wlc-fill); }
.wlg.none { border-color: var(--wlc-edge); background: var(--wlc-soft); }
.wlg-none, .wlg-fail { color: var(--wlc-muted); }

/* the pair: List and Recorded sales are white controls with a blue-grey edge and navy words */
.wl-pick select { border-color: var(--wlc-edge); color: var(--wlc-ink); }
.wl-pick-k { color: var(--wlc-muted); }
.c-wl-more { border-color: var(--wlc-edge); background: var(--desk); color: var(--wlc-ink); }

/* the strip: the quiet buttons, the ceiling, the label link */
.c-wl-actions .c-btn.sm, .c-val-edit .c-btn.sm { border-color: var(--wlc-edge); background: linear-gradient(180deg, var(--wlc-btn), var(--desk)); color: var(--wlc-ink); }
.c-wl-actions .c-btn.sm:not(:disabled):not([aria-disabled="true"]):hover, .c-val-edit .c-btn.sm:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--blue); background: var(--tint); }
.c-wl-actions .c-btn.danger { color: var(--wlc-muted); }
.c-wl-actions .c-btn.danger:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--red); background: var(--desk); color: var(--red); }
/* 16 October 2026 (Carl: "Alerts buttons should be in top right corner of tile instead of a button"; later: "a square button that is tinted
   red with just the icon"): the bell (.ap-btn) is level with the strip's 30px controls in the long view and Search, and in the tiles it is
   pinned to the tile's top-right corner. The name keeps clear of it. */
.c-wl-actions .ap-btn { width: 30px; height: 30px; margin-block: -2px; }
.c-wl-table[data-view="tiles"] > .c-wl-row { position: relative; }
.c-wl-table[data-view="tiles"] .c-wl-actions .ap-btn { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; margin: 0; }
.c-wl-table[data-view="tiles"] .c-wl-title { padding-right: 36px; }
.c-wl-actions .c-ceil { border-color: var(--wlc-edge); background: var(--desk); color: var(--wlc-ink); }
.c-wl-actions .c-ceil:hover { border-style: solid; border-color: var(--blue); }
.c-wl-actions .c-ceil.over { border-color: color-mix(in oklch, var(--risk-ink) 55%, transparent); color: var(--risk-ink); }
.c-wl-actions .c-ceil:has(> .c-na) { border-style: solid; border-color: var(--wlc-navy); background: var(--wlc-navy); color: var(--wlc-on-navy); }
.c-wl-actions .c-ceil:has(> .c-na):hover { border-color: var(--wlc-navy-hover); background: var(--wlc-navy-hover); }
.c-wl-actions .c-ceil > .c-na { color: inherit; font-style: normal; }
.c-ceil-sub { color: var(--wlc-body); }
:is(.c-wl-main, .c-wl-figures) .c-btn.primary { border-color: var(--wlc-navy); background: var(--wlc-navy); color: var(--wlc-on-navy); } /* Save in the ceiling's and the value's editors: the same navy */
:is(.c-wl-main, .c-wl-figures) .c-btn.primary:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--wlc-navy-hover); background: var(--wlc-navy-hover); }

/* one control height, painted only: the pair above the ledger is 30px (the List select), and the mockup draws Recorded sales and the strip's buttons level with it. A button is 30px high with -2px above and below, so its margin box, which is what the strip and the pair lay out, is the 26px it was; the ceiling's editor, which replaces the chip while a figure is typed, takes its input and its two buttons the same way, so they stay level (undo: delete this rule) */
.c-wl-actions .c-btn.sm, .c-wl-actions .c-ceil, .c-wl-actions .c-ceil-edit input, .c-wl-more { height: 30px; margin-block: -2px; }

/* the two editors (the ceiling's and the value's): the typed figure, the currency and the hint are the palette's words; their blue border is the mark and stays */
.c-wl-actions .c-ceil-edit input, .c-val-edit input { color: var(--wlc-ink); }
.c-val-edit b, .c-val-hint { color: var(--wlc-muted); }

/* the foot under the cards */
.c-wl-foot { border-top-color: var(--wlc-hair); background: var(--wlc-soft); color: var(--wlc-muted); }
.c-wl-table[data-view="tiles"] > .c-wl-foot { border-color: var(--wlc-hair); }
/* ── Watchlist: the cool palette: END ── */

/* ── 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: var(--r1); 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-said.nx-muted { color: var(--muted); } /* R146: nothing left to watch, all of the lots have closed: said, not a warning */
.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; }
/* R141 (16 October 2026): the pulse's chart (prices-chart.js drawPulse), its note on the brands summed, and Google's citation where a Trends series shows */
.pr-pchart { position: relative; min-width: 0; }
.pr-pchart .pr-bsvg { display: block; margin-top: 2px; }
.pr-pulse-note { margin: 0; max-width: 72ch; font: 400 11.5px/1.45 var(--sans); }
.pr-cite { margin: 8px 0 0; font: 400 11.5px/1.45 var(--sans); }
/* 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); }
/* R146 (17 October 2026): a brand card's tint and its words' colours arrive as custom properties from views/prices.js, with the
   dark values beside them (theme-dark.css takes those); a card with none is the page's own surface with muted words. */
.pr-tile { background: var(--tile-bg, var(--subtle)); }
.pr-tile-chg, .pr-tile-sub { color: var(--tile-c, var(--muted)); }
.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); }
/* R146 (17 October 2026): each spark keeps its 80px (the price spark was squeezed to nothing beside the second), and the cell
   clips at its own edge rather than drawing over Last sale; views/prices.js widens the column to TREND_TWO for the pair. */
.pr-c-trend { min-width: 0; overflow: hidden; }
.pr-c-trend .pr-spark, .pr-c-trend .pr-int, .pr-tag-brand { flex: none; }
.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; }
/* Calendar + daily ledger: keep the month visible beside every session of the selected day.
   Existing serif, blue selection, teal volume scale, and theme tokens stay authoritative. */
#calendar .pano.ledger-layout { --pano-row-min: 58px; --pano-dow: 36px; --pano-legend: auto; min-height: 540px; grid-template-columns: minmax(300px, .38fr) minmax(0, .62fr); grid-template-rows: minmax(0, 1fr); gap: 28px; padding-top: 22px; }
#calendar .ledger-layout .pano-cal { align-self: start; }
/* 15 October 2026 (Carl: "the search bar should be confined to the left side along with those country and platform filters ... Move
   the right side up"): from 1000px, where the month and the day sit side by side, the header and the filters keep to the month's
   column and the day's panel runs from the top of the pane. The pane is the grid: #cal-body and .pano give their boxes up (display:
   contents), so the month block and the day panel are its cells; the columns are the ledger's own. The search takes the filters'
   first line, Country and Platform share the second. The refresh dim, which lived on #cal-body's box, is put on its two cells. */
@media (min-width: 1000px) {
  #calendar.pano-mode { display: grid; grid-template-columns: minmax(300px, .38fr) minmax(0, .62fr); grid-template-rows: auto auto minmax(auto, 1fr) auto; column-gap: 28px; } /* the month's row is never shorter than the month: on a short window the pane scrolls, as before */
  #calendar.pano-mode > .cal-head { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; } /* the title and its stepper on the first line, the sub-line and Month / Agenda on the second */
  #calendar.pano-mode .cal-titles { display: contents; }
  #calendar.pano-mode .cal-title-row { grid-column: 1 / -1; }
  #calendar.pano-mode .cal-subline { grid-column: 1; margin: 0; }
  #calendar.pano-mode .cal-controls { grid-column: 2; margin: 0; }
  /* 15 October 2026 (Carl: "boxes aren't lining up and off center"): the stepper and Month / Agenda make one column at the right,
     flush with the search and the filters under them and as wide as each other: the title row shares the head's columns (subgrid),
     ‹ › keep their size and Today takes the rest, and the two modes split the width evenly. The month picker still hangs from the
     title row, which stays a box. */
  #calendar.pano-mode .cal-title-row { display: grid; grid-template-columns: subgrid; column-gap: normal; } /* normal: the head's own gap */
  #calendar.pano-mode .cal-title-row .cal-nav { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; }
  #calendar.pano-mode .cal-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  #calendar .cal-modes { display: grid; grid-template-columns: 1fr 1fr; } /* every mode, not the month alone: the switch keeps one shape whichever mode is on (Carl, 15 October: "when switching between month agenda it changes shape should be constant") */
  /* 15 October 2026, later (Carl: "Month agenda button toggle should go in top right opposite the date", then, with an arrow drawn to the
     page's far right: "still over there"): Month / Agenda sits at the top right of the whole pane, on the day panel's first line, its right
     edge on the panel's. It is placed from the pane (#calendar, positioned): no top, so it keeps the head's top (an absolute child of a grid
     takes its parent's start edge), and the pane's own 30px side padding from the right. The day's eyebrow and headline keep clear of it.
     The stepper keeps the head's right column, on the title's line. */
  #calendar.pano-mode { position: relative; }
  #calendar.pano-mode .cal-controls { position: absolute; z-index: 2; right: 30px; align-self: start; } /* start: the head's top, not its middle */
  #calendar .cal-modes .cal-btn, #calendar .cal-modes .cal-btn:hover { min-width: 76px; }
  #calendar.pano-mode .pano-day > .pano-eyebrow, #calendar.pano-mode .pano-day > .pano-headline { padding-right: 190px; }
  #calendar.pano-mode > .cal-filters { grid-area: 2 / 1; min-width: 0; flex-wrap: wrap; }
  #calendar.pano-mode .cf.grow { flex: 1 1 100%; }
  #calendar.pano-mode .cf:not(.grow) { flex: 1 1 0; min-width: 0; }
  #calendar.pano-mode .cf select, #calendar.pano-mode .cf #cal-country { width: 100%; }
  #calendar.pano-mode > .cal-body, #calendar.pano-mode .pano.ledger-layout { display: contents; }
  #calendar.pano-mode .ledger-layout .pano-cal { grid-area: 3 / 1; min-height: auto; padding-top: 22px; }
  #calendar.pano-mode .ledger-layout .pano-detail { grid-area: 1 / 2 / 4 / 3; }
  #calendar.pano-mode > .pano-foot { grid-area: 4 / 1 / 5 / 3; }
  #calendar.pano-mode .cal-body .pano > * { transition: opacity .14s ease; }
  #calendar.pano-mode .cal-body.loading .pano > * { opacity: .55; transition: opacity .2s ease .12s; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) { #calendar.pano-mode .cal-body.loading .pano > * { opacity: 1; } }
#calendar .ledger-layout .pano-dow { height: 30px; padding: 0; align-content: center; }
#calendar .ledger-layout .pano-dow span { padding: 0; text-align: center; }
#calendar .ledger-layout .pano-grid { flex: none; grid-template-rows: repeat(var(--pano-rows, 5), 66px); min-height: 0; }
#calendar .ledger-layout .pcell { padding: 8px 6px; align-items: center; }
#calendar .ledger-layout .plabel { display: none; }
#calendar .ledger-layout .pcount { font-size: 0; margin-top: auto; }
#calendar .ledger-layout .pcount::before { display: none; }
#calendar .ledger-layout .pcount b { margin: 0; font: 500 12px/16px var(--sans); }
#calendar .ledger-layout .pnum { font-size: 15px; }
#calendar .ledger-layout .pano-legend { height: auto; flex-wrap: wrap; gap: 10px 18px; padding: 16px 0; }
#calendar .ledger-layout .pano-hint { width: 100%; margin: 0; }
#calendar .ledger-layout .pano-detail { display: flex; flex-direction: column; padding: 0 0 20px 28px; border-top: 0; border-left: 1px solid rgba(32,30,29,.12); min-height: 0; overflow: hidden; }
#calendar .ledger-layout .pano-day { flex: none; padding: 0 0 16px; }
#calendar .ledger-layout .pano-headline { margin-top: 6px; font-size: 40px; line-height: 1.05; text-wrap: auto; } /* 15 October (Carl: "bolder, more prominent"): the day's header leads the panel; Instrument Serif has one weight, so it is larger, not heavier */
#calendar .ledger-layout .pano-eyebrow { font-weight: 600; font-size: 12.5px; color: var(--ink); }
#calendar .ledger-layout .pano-count { margin-top: 8px; font: 600 16px/1.35 var(--sans); }
#calendar .ledger-layout .pano-sessions { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 0; overflow: auto; }
#calendar .ledger-layout .pano-detail[data-state="day"] .pano-sessions { overflow: hidden; }
#calendar .ledger-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; flex: none; margin-bottom: 14px; }
#calendar .ledger-tools .cf.grow { flex: 1 1 180px; }
#calendar .ledger-tools .cf:not(.grow) { flex: 1 1 120px; }
#calendar .ledger-tools .cf > span { position: static; display: block; width: auto; height: auto; margin: 0 0 5px; overflow: visible; clip: auto; font: 400 11px/16px var(--sans); color: var(--faint); }
#calendar .ledger-tools .cf input, #calendar .ledger-tools .cf select { width: 100%; height: 36px; font-size: 13px; }
#calendar .ledger-tools input[type="search"] { padding-left: 12px; background-image: none; }
#calendar .ledger-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 16px; margin-bottom: 13px; flex: none; font: 400 12px/16px var(--sans); color: var(--faint); }
#calendar .ledger-summary > span:first-child { color: var(--blue); font-weight: 500; }
#calendar .ledger-columns { flex: none; display: grid; grid-template-columns: 88px minmax(0, 1fr) 36px; gap: 14px; padding: 9px 15px 9px 0; border-bottom: 1px solid rgba(32,30,29,.12); font: 500 10.5px/16px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
#calendar .ledger-layout .pcards { display: block; flex: 1 1 0; min-height: 0; margin: 0; padding: 0 12px 0 0; background: none; overflow-y: auto; } /* 14 October (Carl, "overlapping"): the right 12px keep a Mac's overlay scrollbar off the Save button; .ledger-columns takes the same 12 (+3 for Save's margin) so SAVE stays over it */
#calendar .ledger-layout .pcards > li, #calendar .ledger-layout .pano-sessions[data-expanded="false"] .pcards > li:nth-child(n+4) { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid rgba(32,30,29,.1); }
#calendar .ledger-layout .pcard { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 3px 14px; width: 100%; min-height: 76px; margin: 0; padding: 13px 4px 13px 0; border: 0; }
/* 15 October 2026 (Carl, a screenshot of the day's ledger: "alternate off white to show better", then "consistent across entire project ... subtler"):
   every second row is the app's one alternating off-white, --row-alt, as the Watchlist's long view is, and a hovered row takes --row-alt-hover across
   its whole width (it was the words' button only, which stopped short of the photos and Save). The rows and the column heads take 10px at each side,
   so the words do not touch a tinted edge. */
#calendar .ledger-layout .pcards > li:nth-child(even) { background: var(--row-alt); }
#calendar .ledger-layout .pcards > li:hover { background: var(--row-alt-hover); }
#calendar .ledger-layout .pcards > li:nth-child(even) .cal-peek-more { background: var(--row-alt-hover); } /* the "+N more" tile is --subtle, all but the row's own tone there: a step deeper keeps it a tile */
#calendar .ledger-layout .pcard:hover { background: transparent; }
@media (min-width: 700px) { #calendar .ledger-layout .pcards > li { padding: 0 10px; } #calendar .ledger-columns { padding-left: 10px; padding-right: 25px; } } /* a phone's rows keep their own padding */
#calendar .ledger-layout .pcard-top { display: contents; }
#calendar .ledger-layout .pcard-time { grid-column: 1; grid-row: 1 / span 3; color: var(--ink); font: 500 12px/19px var(--sans); }
#calendar .ledger-layout .pcard-n, #calendar .ledger-layout .pcard::after { display: none; }
#calendar .ledger-layout .pcard-title, #calendar .ledger-layout .pcard-meta, #calendar .ledger-layout .pcard-tags { grid-column: 2; margin: 0; padding: 0; }
#calendar .ledger-layout .pcard-title { font: 400 14px/19px var(--sans); }
#calendar .ledger-layout .pcard-meta { font: 400 12px/17px var(--sans); }
#calendar .ledger-layout .pcard-tags { display: block; font: 400 11px/16px var(--sans); }
#calendar .ledger-layout .pcard-tags .tags { white-space: normal; overflow: visible; }
#calendar .ledger-save { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 36px; min-height: 36px; margin-right: 3px; padding: 4px; border: 1px solid rgba(32,30,29,.12); border-radius: var(--r1); background: var(--desk); color: var(--body); font: 400 11px/16px var(--sans); }
#calendar .ledger-save:hover, #calendar .ledger-save[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); background: var(--tint); }
#calendar .ledger-save:disabled { opacity: .45; }
#calendar .ledger-save:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Save mark. 15 October 2026 (Carl: "Button should just be the bookmark icon that animates blue and sparkles a bit when clicked"):
   the details' Save is the bookmark alone, one fixed square, so saving changes no width; blue once saved. A save (calendar.js,
   patchSaves) adds .just-saved: the bookmark fills in blue and settles cleanly, on the details' mark and the ledger rows' alike. */
.save-mark { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid rgba(32,30,29,.28); border-radius: var(--r1); background: var(--desk); color: var(--ink); transition: color .2s, border-color .2s, background .2s; }
.save-mark:hover { border-color: var(--ink); }
.save-mark[aria-pressed="true"] { color: var(--blue); border-color: var(--blue); background: var(--tint); }
.save-mark.cf-armed { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--desk)); animation: cfArm .18s var(--ease) both; } /* 19 October 2026: armed to remove (confirm.js), the saved square turns a red x in place */
.save-mark:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#calendar .ledger-save { position: relative; }
/* A clean save: the blue ink fills upward inside the outline, with a tiny settling press.
   Both tracks finish together so the existing animationend cleanup stays deterministic. */
:is(.save-mark, #calendar .ledger-save).just-saved svg {
  transform-box: fill-box; transform-origin: center;
  animation: bookmark-settle 260ms cubic-bezier(.2,.7,.2,1);
}
:is(.save-mark, #calendar .ledger-save).just-saved .bookmark-fill {
  animation: bookmark-ink 260ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bookmark-ink {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes bookmark-settle {
  0% { transform: translateY(1px) scale(.94); }
  70%,100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.save-mark, #calendar .ledger-save).just-saved svg,
  :is(.save-mark, #calendar .ledger-save).just-saved .bookmark-fill { animation: none; }
}
/* 14 October 2026 (Carl, a ledger row's blank right half: "3 pictures plus a 4th that says +x more (depending on how many more items are there)"): cal-peek.js's
   peek at a session's lots, between the row's words and Save: three 48px photos and a tile of the same size with "+N more"; it opens the session as the row does */
#calendar .cal-peek { flex: none; display: flex; gap: 4px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
#calendar .cal-peek[hidden] { display: none; }
#calendar .cal-peek-th, #calendar .cal-peek-more { width: 48px; height: 48px; border-radius: var(--r1); overflow: hidden; background: var(--subtle); }
#calendar .cal-peek-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
#calendar .cal-peek-th.bad img { visibility: hidden; }
#calendar .cal-peek-more { display: grid; place-items: center; padding: 0 2px; font: 500 11px/13px var(--sans); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
/* 14 October 2026 (Carl: "the +x more should be slightly smaller than the others"): the tile is 40px beside the 48px photos, centred on them, its words a step smaller */
#calendar .cal-peek { align-items: center; }
#calendar .cal-peek-more { width: 40px; height: 40px; font-size: 10px; line-height: 12px; }
#calendar .cal-peek:hover .cal-peek-more { color: var(--blue); }
#calendar .cal-peek:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 699px) { #calendar .cal-peek { display: none; } } /* a phone's row has no room beside its words */
/* 14 October 2026 (Carl: "Pull those as keywords and allow them to search through all the day's auctions for specific items"): cal-lot-search.js.
   The day's keywords, chips under the day's search (a maker or a model family and how many of the day's lots carry it); a row whose lots match
   the search says how many in blue, and its peek shows those lots, framed in blue */
#calendar .ledger-kw { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
#calendar .ledger-kw-k { margin-right: 4px; font: 400 11px/16px var(--sans); color: var(--faint); }
#calendar .ledger-kw-chip { display: inline-flex; align-items: baseline; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid rgba(32,30,29,.14); border-radius: var(--r1); background: var(--desk); color: var(--ink); font: 400 12px/24px var(--sans); cursor: pointer; }
#calendar .ledger-kw-chip span { color: var(--faint); font-variant-numeric: tabular-nums; }
#calendar .ledger-kw-chip:hover { border-color: var(--blue); color: var(--blue); }
#calendar .ledger-kw-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
#calendar .ledger-kw-chip[aria-pressed="true"] span { color: inherit; }
#calendar .ledger-kw-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#calendar .ledger-layout .pcard-hits { grid-column: 2; font: 500 12px/17px var(--sans); color: var(--blue); }
#calendar .cal-peek.hits .cal-peek-th { outline: 1.5px solid var(--blue); outline-offset: -1.5px; } /* an outline is painted over the photo */
#calendar .ledger-empty { padding: 16px 0; }
#calendar .ledger-empty button { margin-top: 10px; }
#calendar .ledger-layout .sk-calendar-strip { margin: 0; padding: 0; }
#calendar .ledger-layout .sk-calendar-strip > .sk-body { display: block; }
#calendar .ledger-layout .sk-calendar-day { padding: 0 0 20px; }
#calendar .ledger-layout .sk-calendar-cards { display: block; padding: 0; }
#calendar .ledger-layout .sk-calendar-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 14px; margin: 0; padding: 16px 0; border-top: 1px solid rgba(32,30,29,.1); }
#calendar .ledger-layout .sk-calendar-ctop { grid-column: 1; grid-row: 1 / span 3; }
#calendar .ledger-layout .sk-calendar-ctitle, #calendar .ledger-layout .sk-calendar-cmeta, #calendar .ledger-layout .sk-calendar-ctags { grid-column: 2; margin: 0; padding: 0; }
#calendar .ledger-layout .sk-calendar-n { display: none; }
@media (max-width: 999px) {
  #calendar.pano-mode .cal-body { flex: none; display: block; }
  #calendar .pano.ledger-layout { display: block; min-height: 0; padding-top: 18px; }
  #calendar .ledger-layout .pano-detail { margin-top: 12px; padding: 20px 0; border-left: 0; border-top: 1px solid rgba(32,30,29,.12); overflow: visible; }
  #calendar .ledger-layout .pano-sessions, #calendar .ledger-layout .pano-detail[data-state="day"] .pano-sessions, #calendar .ledger-layout .pcards { flex: none; overflow: visible; }
}
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #calendar .pano.ledger-layout { padding-top: 0; }
  #calendar .ledger-layout .pano-detail { padding: 0; border: 1px solid rgba(32,30,29,.14); }
  #calendar .ledger-layout .pano-day { padding: 14px 16px; }
  #calendar .ledger-layout .pano-headline { font-size: 30px; }
  #calendar .ledger-layout .pano-grid { grid-template-rows: repeat(var(--pano-rows, 5), 54px); }
  #calendar .ledger-layout .pano-legend { padding: 12px 16px; }
  #calendar .ledger-layout .pano-hint { display: none; }
  #calendar .ledger-layout .pano-detail[data-state="day"] .pano-sessions { display: flex; padding: 14px 16px 0; }
  #calendar .ledger-tools .cf input, #calendar .ledger-tools .cf select { height: 44px; font-size: 16px; }
  #calendar .ledger-tools .cf.grow { flex-basis: 100%; }
  #calendar .ledger-columns { grid-template-columns: 65px minmax(0, 1fr) 44px; gap: 10px; font-size: 10px; }
  #calendar .ledger-layout .pcard { grid-template-columns: 65px minmax(0, 1fr); gap: 3px 10px; }
  #calendar .ledger-layout .pcards > li { gap: 10px; }
  #calendar .ledger-save { width: 44px; min-height: 44px; }
  #calendar .ledger-layout .sk-calendar-strip { padding: 14px 16px; }
}

/* Session catalogue dropdown: the month calendar and collapsed rows keep their layout. */
#calendar .ledger-layout .pcards > li.session-preview-row { flex-wrap: wrap; }
#calendar .session-preview-row > .pcard { flex: 1 1 0; min-width: 0; }
#calendar .session-preview-row.is-open > .pcard .pcard-title { color: var(--blue); }
#calendar .session-catalogue { flex: 0 0 100%; min-width: 0; margin: 0 0 12px; padding: 12px; border: 1px solid var(--line, rgba(32,30,29,.14)); border-radius: var(--r1); background: var(--desk); box-shadow: 0 3px 12px rgba(32,30,29,.05); animation: session-preview-in 180ms ease-out; }
#calendar .session-catalogue-top, #calendar .session-catalogue-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; font: 400 12px/18px var(--sans); color: var(--muted); }
#calendar .session-catalogue-top { margin-bottom: 10px; }
#calendar .session-preview-close { border: 0; padding: 4px 0 4px 10px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
#calendar .session-mosaic { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#calendar .session-feature { margin: 0; min-width: 0; }
.session-feature { position: relative; }
#calendar .session-feature.main { grid-row: auto; }
#calendar .session-feature-photo { position: relative; min-height: 0; aspect-ratio: 1.618; max-height: 110px; background: var(--subtle); border-radius: var(--r1); overflow: hidden; }
#calendar .session-feature.main .session-feature-photo { aspect-ratio: 1.618; min-height: 0; }
#calendar .session-feature-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
#calendar .session-feature figcaption { font: 400 12px/17px var(--sans); color: var(--ink); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#calendar .session-image-missing { display: none; }
#calendar .session-feature-photo.unavailable .session-image-missing { display: grid; place-items: center; height: 100%; font: 400 12px/18px var(--sans); color: var(--muted); }
#calendar .session-catalogue-foot { border-top: 1px solid var(--line, rgba(32,30,29,.14)); margin-top: 12px; padding-top: 12px; flex-wrap: wrap; }
/* 15 October 2026 (Carl: "more pronounced and obvious"): the way out to the sale is the preview's one solid button (cal-featured.js) */
#calendar .session-catalogue-link { flex: none; max-width: 100%; }
#calendar .session-catalogue-link span { font-size: 15px; transition: transform .16s; }
@media (max-width: 699px) { #calendar .session-catalogue-link { width: 100%; justify-content: center; } }
#calendar .session-preview-note { font: 400 13px/20px var(--sans); color: var(--muted); padding: 20px 0; }
#calendar .session-mosaic[data-items="1"] { grid-template-columns: minmax(0, 160px); }
#calendar .session-mosaic[data-items="1"] .main .session-feature-photo { aspect-ratio: 1.618; min-height: 0; }
/* 15 October 2026 (Carl: "load more images/sets of images and scroll through completely. maybe arrow buttons to load 5 new lots"): over the
   photos, which five these are and two steps back and on (cal-featured.js pagerHtml) */
#calendar .session-pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: -4px 0 8px; font: 400 12px/18px var(--sans); color: var(--muted); }
#calendar .session-page-at { margin-right: 6px; font-variant-numeric: tabular-nums; }
#calendar .session-page { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(32,30,29,.16); border-radius: var(--r1); background: var(--desk); color: var(--ink); font: 400 17px/1 var(--sans); cursor: pointer; transition: border-color .16s, background-color .16s; }
#calendar .session-page:hover:not(:disabled) { border-color: var(--blue); background: var(--tint); color: var(--blue-hover); }
#calendar .session-page:disabled { opacity: .4; cursor: default; }
@keyframes session-preview-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #calendar .session-catalogue { animation: none; } }
#calendar :is(.week-session, .session-catalogue).still { animation: none; } /* 15 October 2026: drawn again while on screen (a page of photos, a refresh), it does not enter again (calendar.js keepStill) */
/* 19 October 2026 (Carl: "should just show three at a time in mobile with the option to click to see more"): a page is three lots on a phone
   (cal-featured.js PHONE_PAGE, the same query as phone.js), set in three equal columns across the card instead of a row that scrolled sideways */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  #calendar .session-catalogue { padding: 10px; }
  #calendar .session-mosaic, #calendar .session-mosaic[data-items="1"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  #calendar .session-feature-photo, #calendar .session-feature.main .session-feature-photo { aspect-ratio: 1.618; min-height: 0; }
}

#calendar button.session-feature-photo { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }
#calendar button.session-feature-photo:hover { box-shadow: inset 0 0 0 1px var(--blue); }
#calendar button.session-feature-photo:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Weekly overview: compact neutral columns and a full-width session beneath. */
#calendar .mcal.week.week-overview, #calendar .mcal.week.week-overview.with-drawer { display: flex; flex-direction: column; gap: 16px; }
#calendar .week-overview .wk { grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--desk); min-height: 240px; }
#calendar .week-overview .wk-day, #calendar .week-overview .wk-day.past { background: var(--desk); }
#calendar .week-overview .wk-head, #calendar .week-overview .wk-day.today .wk-head { background: var(--desk); }
#calendar .week-overview .wk-head:hover { background: var(--subtle); }
#calendar .week-overview .wk-head .n { background: var(--subtle); color: var(--muted); }
/* 14 October (Carl: "Today should be tinted", with a swatch of the app's today tint): today's whole column takes it, head and sessions */
#calendar .week-overview .wk-day.today, #calendar .week-overview .wk-day.today .wk-head, #calendar .week-overview .wk-day.today .wk-card { background: color-mix(in srgb, var(--blue) 15%, var(--desk)); }
#calendar .week-overview .wk-day.today .wk-head:hover { background: color-mix(in srgb, var(--blue) 21%, var(--desk)); }
#calendar .week-overview .wk-list { max-height: 240px; overflow-y: auto; scrollbar-width: thin; gap: 0; padding: 6px 0; }
#calendar .week-overview .wk-day.past .wk-list { opacity: 1; }
#calendar .week-overview .wk-card, #calendar .week-overview .wk-card.rolling { background: var(--desk); border: 0; border-bottom: 1px solid rgba(128,128,128,.15); padding: 8px 14px; border-radius: 0; }
/* 14 October (Carl: "When hovering should not have padding but jug edges of sides and also not be so rounded"): the list has no side
   padding, so a session's box runs from one column edge to the other (its words keep their place in the card's own 14px), square; the
   keyboard's ring is the same box, not the page's offset outline, which drew a second, rounder box outside it */
#calendar .week-overview .wk-card:hover, #calendar .week-overview .wk-card.active, #calendar .week-overview .wk-card.rolling:hover, #calendar .week-overview .wk-card.rolling.active { box-shadow: inset 0 0 0 1.5px var(--blue); border-radius: 0; }
#calendar .week-overview .wk-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
#calendar .week-overview .wk-card.active .title { color: var(--blue); }
#calendar .week-overview .mdrawer, #calendar .week-overview .week-session { width: 100%; } /* 15 October 2026 (Carl, on the details stopping two thirds across: "Why this one over here"): the overview is a column that does not stretch its children, so the opened sale's details took their own content's width; they span the week as the empty drawer did */
#calendar .week-session { min-width: 0; padding: 18px; border: 1px solid rgba(128,128,128,.22); border-radius: var(--r1); background: var(--desk); animation: session-preview-in 180ms ease-out; }
#calendar .week-session-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
#calendar .week-session-head h2 { margin: 4px 0; font: 400 30px/1.1 var(--serif); }
#calendar .week-session-meta { margin: 6px 0 0; color: var(--muted); font: 400 13px/20px var(--sans); }
#calendar .week-session-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#calendar .week-session-facts { display: flex; gap: 16px; align-items: start; margin-top: 16px; }
#calendar .week-session .pano-kv { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin: 0; }
#calendar .week-session .pano-kv dt { font: 400 11px/16px var(--sans); color: var(--muted); }
#calendar .week-session .pano-kv dd { font: 400 12px/18px var(--sans); margin: 0; }
#calendar .week-session-status { margin: 0; font: 500 12px/18px var(--sans); }
#calendar .week-session-source { font: 400 11px/17px var(--sans); color: var(--muted); margin: 10px 0; }
#calendar .week-session .session-catalogue { border: 0; border-top: 1px solid rgba(128,128,128,.18); border-radius: 0; padding: 12px 0 0; margin: 0; box-shadow: none; animation: none; }
#calendar .week-session .session-catalogue-top { display: none; }
#calendar .week-session .session-mosaic { grid-template-columns: repeat(5, minmax(0,1fr)); }
#calendar .week-session .session-feature-photo { height: 100px; aspect-ratio: auto; }
@media (max-width: 1179px) {
  #calendar .week-overview .wk { grid-template-columns: repeat(7, minmax(145px, 1fr)); overflow-x: auto; }
  #calendar .week-overview .wk-day { border-top: 0; border-left: 1px solid rgba(128,128,128,.15); }
  #calendar .week-overview .wk-day:first-child { border-left: 0; }
}
@media (max-width: 699px) {
  #calendar .week-session { padding: 12px; }
  #calendar .week-session-head { align-items: start; flex-direction: column; }
  #calendar .week-session .pano-kv { grid-template-columns: 80px minmax(0,1fr); }
  #calendar .week-session-facts { flex-direction: column; }
  #calendar .week-session .session-feature-photo { height: 70px; }
}
@media (prefers-reduced-motion: reduce) { #calendar .week-session { animation: none; } }

/* Auction facts: keep each label directly over its value, with timing grouped separately. */
#calendar .week-session-timing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; border-top: 1px solid rgba(128,128,128,.2); border-bottom: 1px solid rgba(128,128,128,.2); margin-top: 18px; padding: 14px 0; }
#calendar .week-session-timing dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
#calendar .week-fact { min-width: 0; }
#calendar .week-fact dt { color: var(--muted); font: 400 10px/16px var(--sans); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 4px; }
#calendar .week-fact dd { color: var(--ink); font: 500 13px/20px var(--sans); margin: 0; overflow-wrap: anywhere; }
#calendar .week-session-timing .week-fact dd { font-size: 15px; line-height: 22px; }
#calendar .week-session-timing .week-fact + .week-fact { border-left: 1px solid rgba(128,128,128,.18); padding-left: 20px; }
#calendar .week-session-timing .week-session-status { align-self: center; padding: 5px 9px; border: 1px solid var(--blue); border-radius: var(--r1); color: var(--blue); white-space: nowrap; }
#calendar .week-session-timing .week-session-source { grid-column: 1 / -1; margin: 0; }
#calendar .week-session .week-session-facts { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px 20px; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(128,128,128,.2); }
#calendar .week-session-facts .week-fact + .week-fact { border-left: 1px solid rgba(128,128,128,.18); padding-left: 20px; }
#calendar .week-preview-title { font: 400 21px/26px var(--serif); margin: 12px 0 8px; }
#calendar .week-session .session-catalogue { border-top: 0; padding-top: 0; }
@media (max-width: 699px) {
  #calendar .week-session-timing { grid-template-columns: minmax(0,1fr); }
  #calendar .week-session-timing dl { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #calendar .week-session-timing .week-fact + .week-fact { border-left: 0; padding-left: 0; }
  #calendar .week-session-timing .week-session-status { justify-self: start; }
  #calendar .week-session .week-session-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #calendar .week-session-facts .week-fact + .week-fact { border-left: 0; padding-left: 0; }
}

#calendar .week-session-timing { grid-template-columns: minmax(0,1fr); }
#calendar .week-session-timing .week-fact dd { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
#calendar .week-session-timing .week-session-status { font: 500 12px/18px var(--sans); }

/* Dividers meet the section boundaries rather than stopping at padded text blocks. */
#calendar .week-session-timing { position: relative; padding: 0; }
#calendar .week-session-timing dl { gap: 0; padding: 14px 0 0; }
#calendar .week-session-timing .week-fact + .week-fact { border-left: 0; padding-left: 20px; }
#calendar .week-session-timing:has(dl > .week-fact:nth-child(2))::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(128,128,128,.2); pointer-events: none; }
#calendar .week-session-timing .week-session-source { padding-bottom: 14px; }
#calendar .week-session .week-session-facts { gap: 0; padding: 0; align-items: stretch; }
#calendar .week-session-facts .week-fact { padding: 16px 20px; }
#calendar .week-session-facts .week-fact:first-child { padding-left: 0; }
#calendar .week-session-facts .week-fact + .week-fact { border-left: 1px solid rgba(128,128,128,.2); padding-left: 20px; }
@media (max-width: 699px) {
  #calendar .week-session-timing:has(dl > .week-fact:nth-child(2))::after { display: none; }
  #calendar .week-session-timing dl { gap: 12px; }
  #calendar .week-session-timing .week-fact + .week-fact { padding-left: 0; }
  #calendar .week-session-facts .week-fact { padding: 12px; }
  #calendar .week-session-facts .week-fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  #calendar .week-session-facts .week-fact:nth-child(even) { padding-left: 12px; }
  #calendar .week-session-facts .week-fact:nth-child(n+3) { border-top: 1px solid rgba(128,128,128,.2); }
}
/* 15 October 2026 (Carl, with a picture of the facts with short dividers: "reimplement dividing lines as is centered with margin"): the
   vertical dividers stand clear of the rules above and below them (14px each end), centred in the gap between two facts. They are drawn
   on the fact (::before) instead of as its border, so they can stop short. On a phone the facts are two to a row and keep their own rules. */
#calendar .week-session-facts .week-fact { position: relative; }
#calendar .week-session-facts .week-fact + .week-fact { border-left: 0; }
#calendar .week-session-facts .week-fact + .week-fact::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(128,128,128,.2); pointer-events: none; }
#calendar .week-session-timing:has(dl > .week-fact:nth-child(2))::after { top: 14px; bottom: 14px; }
@media (max-width: 699px) {
  #calendar .week-session-facts .week-fact:nth-child(odd)::before { display: none; }
}

/* Catalogue captions mirror the compact three-line reference. */
#calendar .session-feature figcaption { display: block; margin-top: 5px; overflow: visible; -webkit-line-clamp: unset; }
#calendar .session-feature figcaption > span { display: block; }
#calendar .session-lot-name { font: 500 12px/16px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#calendar .session-lot-detail, #calendar .session-lot-number { font: 400 11px/16px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Auction detail typography: title, primary timing, facts, then supporting metadata. */
#calendar .week-session-head h2 { font: 400 clamp(30px, 2.4vw, 38px)/1.12 var(--serif); letter-spacing: -.02em; margin: 5px 0 8px; }
#calendar .week-session-head .eyebrow { font: 600 10px/15px var(--sans); letter-spacing: .12em; color: var(--muted); }
#calendar .week-session-meta { font: 400 13px/20px var(--sans); }
#calendar .week-fact dt { font: 500 10px/15px var(--sans); letter-spacing: .1em; margin-bottom: 6px; }
#calendar .week-fact dd { font: 500 14px/21px var(--sans); }
#calendar .week-session-timing .week-fact dd { font: 400 clamp(18px, 1.45vw, 23px)/1.25 var(--serif); }
#calendar .week-session-timing .week-session-status { font: 600 11px/17px var(--sans); }
#calendar .week-session-source { font: 400 11px/17px var(--sans); color: var(--muted); }
#calendar .week-preview-title { font: 400 24px/29px var(--serif); margin: 15px 0 10px; }
#calendar .session-lot-name { font: 600 13px/18px var(--sans); }
#calendar .session-lot-detail { font: 400 11px/17px var(--sans); }
#calendar .session-lot-number { font: 400 10px/16px var(--sans); }
@media (max-width: 699px) {
  #calendar .week-session-head h2 { font-size: 28px; }
  #calendar .week-session-timing .week-fact dd { font-size: 19px; }
  #calendar .week-preview-title { font-size: 22px; }
  #calendar .session-lot-name { font-size: 12px; }
}

/* Soft, proportionate preview placeholders, then a gentle image reveal. */
#calendar .session-feature-photo.is-loading { background: color-mix(in srgb, var(--ink) 4%, var(--desk)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 3%, transparent); }
#calendar .session-feature-photo.is-loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--desk) 65%, transparent) 48%, transparent 76%); background-size: 240% 100%; animation: catalogue-photo-shimmer 1.8s ease-in-out infinite; pointer-events: none; }
#calendar .session-feature-photo img { opacity: 1; transition: opacity 220ms ease; }
#calendar .session-feature-photo.is-loading img { opacity: 0; }
#calendar .session-caption-skeleton { padding-top: 3px; }
#calendar .session-feature .session-caption-skeleton > span { height: 7px; border-radius: 2px; margin: 4px 0 7px; background: color-mix(in srgb, var(--ink) 7%, var(--desk)); width: 76%; }
#calendar .session-feature .session-caption-skeleton > span:nth-child(2) { width: 60%; opacity: .65; }
#calendar .session-feature .session-caption-skeleton > span:nth-child(3) { width: 28%; opacity: .5; }
@keyframes catalogue-photo-shimmer { from { background-position: 140% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { #calendar .session-feature-photo.is-loading::before { animation: none; } #calendar .session-feature-photo img { transition: none; } }

/* Compact personal week, in normal flow above watchlist controls. */
#watchlist > .view-head > h2 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.wl-week { margin:0 0 16px; border:1px solid var(--fill); border-radius:var(--r1); background:var(--desk); color:var(--ink); font:12px/1.35 var(--sans); }
.wl-week button,.wl-week a { font:inherit; }
.wl-week button { cursor:pointer; }
.wl-week-tools { display:flex; align-items:center; gap:10px; min-height:34px; padding:3px 8px; border-bottom:1px solid var(--fill); }
.wl-week-tools button { border:0; background:transparent; color:var(--muted); padding:4px 7px; min-height:28px; border-radius:var(--r1); }
.wl-week-tools button:hover { background:var(--subtle); color:var(--blue); }
.wl-week-chev { display:inline-grid; place-items:center; width:14px; height:14px; margin-left:3px; vertical-align:middle; transform:rotate(90deg); } /* Expand/Collapse: one chevron in a fixed box that turns over in place (was two glyphs, ⌄ and ⌃, sitting at different heights) */
[aria-expanded="true"] > .wl-week-chev { transform:rotate(-90deg); }
.wl-week-nav { display:flex; align-items:center; gap:3px; white-space:nowrap; }
.wl-week-nav > span { font-weight:600; }
.wl-week-nav small { margin-left:4px; font-weight:400; color:var(--muted); } /* 4px on top of the space: the year stands apart from the range (Carl, 16 Oct: "more padding here?") */
.wl-week-zone { margin-left:auto; color:var(--muted); white-space:nowrap; font-size:10px; }
.wl-week-tools > a { white-space:nowrap; text-decoration:none; font-size:11px; }
.wl-week-selection { color:var(--blue); font-size:11px; }
.wl-week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.wl-week-day { min-width:0; padding:3px 8px 6px; border-right:1px solid var(--fill); }
.wl-week-day:last-child { border-right:0; }
.wl-week-day.today { background:var(--tint); }
.wl-week-day.selected { box-shadow:inset 0 2px var(--blue); }
.wl-week-datebar { display:flex; align-items:center; gap:4px; margin:0 -8px 4px; padding:0 8px 2px; border-bottom:1px solid var(--fill); } /* 15 October 2026 (Carl: "make sure the header of each day has divider between them and events"): a rule under each day's heading, across its column */
.wl-week-date { flex:1; min-width:0; display:flex; align-items:center; gap:6px; min-height:28px; width:100%; padding:2px 0; background:transparent; border:0; color:var(--ink); text-align:left; }
.wl-week-date > span { color:var(--muted); font-size:10px; text-transform:uppercase; }
.wl-week-date b { font-size:13px; }
.wl-week-date em,.wl-week-date i { font:10px var(--sans); color:var(--blue); margin-left:auto; }
.wl-week-date[aria-pressed=true] b { color:var(--blue); }
.wl-week-events { min-height:52px; max-height:160px; overflow-y:auto; scrollbar-width:thin; }
.wl-week-events[hidden] { display:none; }
.wl-week-event { display:flex; align-items:center; gap:4px; width:100%; min-height:24px; padding:3px 2px; margin-bottom:0; border:0; border-radius:var(--r1); color:var(--ink); background:transparent; text-align:left; text-decoration:none; }
.wl-week-event > span { flex:1; min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:11px; }
.wl-week-event time { font-variant-numeric:tabular-nums; font-weight:400; margin-right:3px; }
.wl-week-event small { flex:none; display:block; font-size:10px; color:var(--muted); }
/* 15 October 2026 (Carl: "stacked sessions in watchlist calender are also have that alternating off white pattern to show distinction"): a day's
   events run edge to edge in its column, every second one on an off-white band (a wash of the ink, so it reads on today's tint and in dark too) */
.wl-week-events { margin-inline:-8px; }
.wl-week-event { padding-inline:8px; border-radius:0; }
.wl-week-events > .wl-week-event:nth-child(even) { background:color-mix(in srgb, var(--ink) 4.5%, transparent); }
.wl-week-events > .wl-week-empty { padding-inline:8px; } /* the day's "No scheduled events" keeps its inset */
button.wl-week-event:hover,a.wl-week-event:hover,.wl-week-event[aria-pressed=true] { background:var(--scan-tint); color:var(--scan-ink); }
.wl-week-event.elapsed > span { color:var(--muted); }
.wl-week-empty { display:block; padding:5px 0; color:var(--muted); font-size:10px; }
.wl-week-more { flex:none; white-space:nowrap; background:transparent; border:0; padding:2px 4px; color:var(--blue); font-size:10px !important; }
.wl-week-note { padding:4px 10px; border-top:1px solid var(--fill); color:var(--muted); font-size:10px; }
.wl-week-note button { border:0; background:transparent; color:var(--blue); text-decoration:underline; }
.wl-week.collapsed .wl-week-day { padding-bottom:3px; }
@media (max-width:1000px) { .wl-week-days { overflow-x:auto; grid-template-columns:repeat(7,minmax(125px,1fr)); } .wl-week-tools { flex-wrap:wrap; gap:4px; } .wl-week-selection { order:5; flex-basis:100%; } }
@media (max-width:600px) { .wl-week-zone { display:none; } .wl-week-tools > a { margin-left:auto; } .wl-week-nav small { display:none; } }

/* ── Search's results as the Watchlist's cards (15 October 2026) BEGIN ──
   15 October 2026 (Carl: "For the search feature when items are loaded, i want to emulate the watchlist rows and tile layout. A bit like this
   but should be a bit smaller to show more rows, and 2x2 grid on tiles. Also ensure the animations are consistent across watchlist and search
   feature"). A result is the Watchlist's card (views/chat.js rowHtmlReal: .c-wl-row and its zones, on a table marked .sr-table), so the
   Watchlist's rules above draw it: the gallery and its closing badge, the ledger, the palette, the zebra and the hover, the arrival
   ([data-intro]) and, in tiles, the grid of two, the equal heights and the stretch over the row-mate. This block is only what Search's card has
   that the Watchlist's has not (the pills over the name, the attributes, why it matched, the panel under the card) and its smaller sizes:
   a stage of 112px against 150, so a card is about 145px at 1440 x 900 against the Watchlist's 196. Every rule starts with .sr-table, so none
   of it reaches the Watchlist; the long view's are under :not([data-view="tiles"]) and the tiles keep the Watchlist's own layout. */
.sr-head { display: flex; align-items: center; justify-content: flex-end; margin: 10px 0 14px; } /* 16 October 2026 (Carl, a screenshot of Sort over the first card: "bit more padding here make it natural"): 16px from Sort to the first card, was 8. The 14px meets #results-real's own 8px top margin through the empty #widened-real, and the larger is the one kept */
.sr-head[hidden] { display: none; }
.sr-table { margin-top: 8px; }
.sr-table > :is(.thead, .sk-wrap) { grid-column: 1 / -1; } /* a lot opened by its code: the old table's head and skeleton row, while it is asked for */
.sr-table .c-wl-row { -webkit-user-select: text; user-select: text; cursor: auto; } /* a search card's words can be selected and copied */
.sr-table .c-wl-row.wl-zone { cursor: pointer; } /* 15 October 2026 (Carl: "same deal in search"): its empty space opens its panel, as a Watchlist card's does (wl-zones.js) */
/* 18 October 2026 (Carl: Price comparison and About this watch "should only be shown in the watchlist"): a Search card has no panel, so on a wider
   screen it has no Details button and no hand over its space (app.js row-toggle-real opens a card on a phone only). The query is phone.js's, negated; on a wider screen only Search draws .sr-table (the Watchlist's phone card is a phone's). */
@media (min-width: 700px) and (min-height: 501px), (min-width: 700px) and (pointer: fine), (min-width: 700px) and (pointer: none) {
  .sr-table .c-wl-actions > .c-wl-more { display: none; }
  .sr-table .c-wl-row.wl-zone { cursor: auto; }
}
.sr-table .c-wl-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sr-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 17px; margin-bottom: 3px; }
.sr-rank { min-width: 12px; font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--wlc-muted, var(--head)); }
.sr-sub { margin-top: 1px; font: 400 12px/1.35 var(--sans); color: var(--wlc-body, var(--body)); overflow-wrap: anywhere; }
.sr-sub:empty { display: none; }
.sr-table .c-wl-when .src { margin-left: 0; }
/* the ledger: the bid and the comparable value, half and half, the Margin and the label check at the value's foot */
.sr-table .c-wl-figures { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sr-table :is(.c-wl-bid, .c-wl-value) { padding: 6px 12px 7px; }
.sr-bid, .sr-table .c-wl-value > b { display: block; margin-top: 2px; font: 600 17px/1.1 var(--sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wlc-ink, var(--ink)); }
.sr-bid.na { margin-top: 4px; font: 400 12px/1.3 var(--sans); letter-spacing: 0; color: var(--wlc-muted, var(--muted)); }
.sr-table .c-wl-value > b.sr-none { font-size: 14px; }
.sr-bid-n { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--sans); color: var(--wlc-body, var(--body)); overflow-wrap: anywhere; } /* the bid's notes (bids, all-in): a .c-fig-n of its own, which is left out when there is nothing to say */
.sr-bid-n:empty { display: none; }
.sr-wait { display: block; margin-top: 4px; font: italic 400 12px/1.3 var(--sans); }
.sr-table .sr-margin { margin-top: 5px; padding-top: 4px; }
/* the strip: Add to watchlist, the source, and Compare sales at its right end (the Watchlist's Recorded sales button) */
.sr-table .c-wl-actions { margin-top: 6px; padding-right: 0; }
.sr-table .c-wl-actions .sr-source { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
/* 16 October 2026 (Carl: "Add to Watchlist buttons should be replaced with the save icon bookmark square and ensure they all have the effects of when
   saving they sparkle"): Add to watchlist is the save mark (the Calendar's, "Save mark" above: the bookmark alone, blue and filled once watched, a pop
   and six blue specks on watching), square at the strip's 30px. The rules for the old worded button (its two words in one width, its navy hover) are gone. */
.sr-table .c-wl-actions > .sr-watch { width: 30px; height: 30px; }
.sr-row .watched-pill { animation: none; } /* 15 October 2026 (Carl: "When watching an item in search and you open the drop down, Watched flashes like it's reloading"): a card drawn anew (its panel opening or closing) shows the tag as it stands */
.sr-row .watched-pill.arrive { animation: pageIn .2s ease-out; } /* only the tag the Watch press adds fades in (pageIn: a fade, no scale) */
@media (prefers-reduced-motion: reduce) { .sr-row .watched-pill.arrive { animation: none; } }
.sr-table .c-wl-actions .sr-source svg { flex: none; }
.sr-table .c-wl-actions span.sr-source { font: 400 11.5px/1.3 var(--sans); }
/* the panel: the card that opened under the row, now under the card, as the Watchlist's Past sales are; wl-open-anim.js moves it */
.sr-table .c-wl-row > .expand { grid-column: 1 / -1; margin-top: 10px; padding: 14px 18px; border: 1px solid var(--wlc-hair, rgba(32,30,29,.1)); border-radius: var(--r1); background: var(--desk); animation: none; cursor: auto; }
/* the long view: the photos, the words, and the ledger at their right; the strip under the words and the ledger */
.sr-table:not([data-view="tiles"]) .c-wl-row { --wl-stage-h: 112px; --wl-gal: calc(var(--wl-stage-h) * 4 / 3 + 36px); grid-template-columns: var(--wl-gal) minmax(0,1fr) clamp(330px, 38%, 440px); grid-template-rows: auto 1fr auto; column-gap: 16px; padding: 12px; } /* 15 October 2026 (Carl: "margin off here, the watches are further away, make uniform and consistent"): one inset on every side, so the photo sits as far from the card's left edge as from its top */
.sr-table:not([data-view="tiles"]) .c-wl-gal { grid-column: 1; grid-row: 1 / span 3; }
.sr-table:not([data-view="tiles"]) .c-wl-text { grid-column: 2; grid-row: 1 / span 3; }
.sr-table:not([data-view="tiles"]) .c-wl-figures { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; } /* 15 October 2026 (Carl): More Info went and the ledger fills the card down to the strip, which is under it now */
.sr-table:not([data-view="tiles"]) .c-wl-actions { grid-column: 3; grid-row: 3; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 8px; } /* 15 October 2026 (Carl: "move the add watch list and open source buttons under that where that button was and they should extend to match the length of the current bid and full value"): the strip sits under the ledger, one button under each box, as wide as it */
.sr-table:not([data-view="tiles"]) .c-wl-actions > * { justify-content: center; min-width: 0; }
/* 16 October 2026 (Carl: "three buttons in that space on right ... the third is a similar 'More info' button as exactly shown in the watchlist, all three
   lined up with left and right of above element"): the Watchlist's .c-wl-more joins the strip, three equal cells spanning the ledger's width */
.sr-table:not([data-view="tiles"]) .c-wl-actions { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sr-table:not([data-view="tiles"]) .c-wl-actions > .c-wl-more { justify-content: space-between; }
/* Later that day (Carl, the strip with its alert bell: "These buttons should be in a row, with alert as a square the others equal sizes and all
   taking up the same width as row above it"): with the bell the strip is one row of four, the bell a 30px square in the second place and
   Add to watchlist, Open source and More Info three equal cells sharing the rest of the ledger's width. */
.sr-table:not([data-view="tiles"]) .c-wl-actions:has(> .ap-btn) { grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr) minmax(0,1fr); }
/* 16 October 2026: Add to watchlist is a 30px save mark now, so it takes a square cell too: the bookmark, the bell, then Open source and More Info
   sharing the rest of the ledger's width. */
.sr-table:not([data-view="tiles"]) .c-wl-actions:has(> .sr-watch) { grid-template-columns: 30px minmax(0,1fr) minmax(0,1fr); }
.sr-table:not([data-view="tiles"]) .c-wl-actions:has(> .sr-watch):has(> .ap-btn) { grid-template-columns: 30px 30px minmax(0,1fr) minmax(0,1fr); }
.sr-table:not([data-view="tiles"]) .c-wl-actions > .ap-btn { width: 30px; height: 30px; }
.sr-table:not([data-view="tiles"]) .c-wl-actions:has(> .ap-btn) { container-type: inline-size; }
.sr-table:not([data-view="tiles"]) .c-wl-actions:has(> .ap-btn) > :not(.ap-btn) { white-space: nowrap; overflow: hidden; }
/* a narrow ledger (under 420px, the cells under ~110px): the words keep one line; the eye and the chevrons give their room up */
@container (max-width: 420px) {
  .sr-table .c-wl-actions > :is(.sr-source, .c-wl-more) { padding-inline: 7px; font-size: 11px; }
  .sr-table .c-wl-actions > .sr-source { gap: 0; column-gap: 0; }
  .sr-table .c-wl-actions > .sr-source > svg { width: 0; }
  .sr-table .c-wl-actions > .c-wl-more { justify-content: center; }
  .sr-table .c-wl-actions > .c-wl-more::after { content: none; }
}
@media (max-width: 1099px) {
  .sr-table:not([data-view="tiles"]) .c-wl-row { grid-template-columns: var(--wl-gal) minmax(0,1fr); grid-template-rows: auto auto 1fr auto; }
  .sr-table:not([data-view="tiles"]) .c-wl-gal { grid-row: 1 / span 4; }
  .sr-table:not([data-view="tiles"]) .c-wl-text { grid-row: 1; }
  .sr-table:not([data-view="tiles"]) .c-wl-figures { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .sr-table:not([data-view="tiles"]) .c-wl-actions { grid-column: 2; grid-row: 4; }
}
/* the tiles: the Watchlist's grid of two and its tile, a smaller photo, and the words in the name's column */
.sr-table[data-view="tiles"] .c-wl-row { --wl-stage-h: 124px; }
.sr-table[data-view="tiles"] .c-wl-text { grid-column: 2; grid-row: 1 / span 4; }
.sr-table[data-view="tiles"] .c-wl-row .c-wl-actions { padding-right: 0; }
@container wl-tiles (min-width: 1200px) { .sr-table[data-view="tiles"] .c-wl-row { --wl-gal: 220px; } }
/* a phone: one column, in either layout */
@media (max-width: 699px) {
  .sr-table.c-wl-table[data-view="tiles"] { grid-template-columns: minmax(0,1fr); } /* the Watchlist's tiles are never narrower than 432px, wider than a phone */
  .sr-table.c-wl-table[data-view] .c-wl-row { grid-template-columns: minmax(0,1fr); grid-template-rows: none; padding: 10px 12px; }
  .sr-table.c-wl-table[data-view] :is(.c-wl-gal, .c-wl-text, .c-wl-figures, .c-wl-actions) { grid-column: 1; grid-row: auto; }
  .sr-table.c-wl-table[data-view] .c-wl-gal { contain: none; }
  .sr-table.c-wl-table[data-view] .c-wl-figures { margin-top: 8px; }
  .sr-table.c-wl-table[data-view] .c-wl-actions { order: 1; } /* the strip under the ledger, as in the mock, and the panel under both */
  .sr-table.c-wl-table[data-view] .c-wl-row > .expand { order: 2; }}
.sr-head .sr-sortbar { order: 0; flex: none; margin: 0 16px 0 0; } /* 16 October 2026: the Watchlist's Sort, on the head's one line, before the layout switch */
/* ── Search's results as the Watchlist's cards END ── */

/* Shared Search / Watchlist editorial information panel. */
.wi-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line,#ddd);margin-bottom:14px;flex-wrap:wrap}
.wi-tabs button{font:inherit;font-weight:500;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 10px;cursor:pointer} /* 16 October 2026 (Carl, a reference screenshot: "emulate this right now it's off"): the tab not shown is muted, the shown one blue and semibold, and its bar lies on the hairline, not above it */
.wi-tabs button:hover{color:var(--ink)}
.wi-tabs button[aria-pressed="true"]{color:var(--blue,#4365e8);font-weight:600;border-bottom-color:currentColor}
.wi-tabs button:focus-visible,.wi-layout a:focus-visible{outline:2px solid var(--blue,#4365e8);outline-offset:3px}
.wi-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:32px;padding:0;color:inherit;line-height:1.65} /* 16 October 2026 (Carl, the facts box: "more margin at bottom than top"): no padding under the layout, so the box has as much room under it as the 14px over it, to the tabs */
.wi-layout h3,.wi-layout h4{font-family:var(--font-serif,Georgia,serif);font-weight:400;line-height:1.2;margin:0 0 14px}
.wi-layout h3{font-size:clamp(27px,3vw,44px)}.wi-layout h4{font-size:24px}.wi-layout p{margin:0 0 16px}
/* 16 October 2026 (Carl: "Further reading ... Ask about this watch should be removed ... the box then should be centered with the left box"): the facts panel and the story share one middle line, whichever is the taller (the earlier tops rule, a 24px story padding, went with it) */
.wi-layout > .wi-story{align-self:stretch;display:grid;grid-template-rows:minmax(min-content,1.618fr) minmax(min-content,1fr)} /* 16 October 2026 (Carl: the story "should be smaller, and the top section should be bigger of golden ratio. Y axis", then "Split panel 61.8 / 38.2"): the column runs the panel's full height in two rows, the overview (.wi-top) 61.8% and the story 38.2%, so the story's rule sits at the golden line; each row still grows to fit its own words, and where the column itself sets the height the rows keep 1.618 to 1 */
.wi-layout .wi-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:9px} /* .wi-layout: the card's own .expand p rule outranked it */.wi-muted,.wi-facts header span{font-size:12px;opacity:.65}
.wi-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:23px 0} /* 16 October 2026 (Carl: "golden ratio here between these two sections y axis"): 37px from the photos to the story's rule, 23px from the rule to its heading (the 1px rule and .wi-history's 22px), 37 / 23 = 1.61: the golden ratio, so the rule sits with the section it opens. Later that day (Carl: "This section vertically should be golden ratio"): every gap down the column is a step of one scale, 9, 14, 23, 37, each 1.618 times the last: the eyebrow to the title 9, the title to its line 14, that line to the photos 23, the photos to the rule 37, then back down, the rule to the story's heading 23 and the heading to its line 14 (the photos to the rule is now whatever the golden split leaves, 23 at the least: .wi-story) */.wi-images figure{margin:0;min-width:0}.wi-images img{width:100%;height:180px;object-fit:cover;border-radius:var(--r1)}.wi-images figcaption{font-size:12px;opacity:.7;margin-top:6px}
.wi-history{border-top:1px solid var(--line,#ddd);padding-top:22px}.wi-layout a{color:var(--blue,#4365e8)}
/* 16 October 2026 (Carl, a screenshot of the panel's foot: "Ensure all these are fixed"): View listing details is a button like Ask about this watch, its words centred in it, not a blue underlined link sitting on its top edge */
.wi-layout a.wi-link{color:var(--ink)}.wi-layout a.wi-link:hover{color:var(--ink)}
.wi-facts{padding:24px;background:rgba(128,128,128,.06);border-radius:var(--r1);align-self:center}.wi-facts header{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.wi-facts dl{margin:0 0 24px}.wi-facts dl>div{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;border-bottom:1px solid rgba(128,128,128,.18);padding:9px 0;font-size:14px}.wi-facts dd{margin:0;overflow-wrap:anywhere}.wi-facts dt{opacity:.7}.wi-link{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;margin-top:16px;box-sizing:border-box;text-decoration:none}.wi-reading{border-top:1px solid var(--line,#ddd);padding-top:20px;margin-top:24px}
@media(max-width:800px){.wi-layout{grid-template-columns:1fr;gap:20px}.wi-story{padding-top:0}.wi-facts{padding:18px}.wi-images img{height:150px}}


/* 16 October: information-panel detail review, shared by both host views. */
.wi-layout h3,.wi-layout h4{font-family:var(--serif,Georgia,serif)}
.wi-tabs,.wi-layout{--line:color-mix(in srgb,var(--ink) 14%,transparent)}
.wi-layout>*,.wi-facts dl>div>*{min-width:0}
.wi-layout h3,.wi-layout h4,.wi-layout a{overflow-wrap:anywhere}
.wi-layout .wi-muted,.wi-facts header span,.wi-images figcaption,.wi-facts dt{color:var(--muted);opacity:1}
.wi-images img{object-fit:contain;background:var(--subtle);display:block}
.wi-facts header{flex-wrap:wrap;gap:6px 12px}
.wi-layout a:hover{color:var(--blue-hover);text-decoration:underline;text-underline-offset:3px}
.wi-layout a.wi-link:hover{text-decoration:none}
.wi-tabs button::after{content:attr(data-label);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:600}
.wi-panel:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:420px){.wi-tabs{gap:4px}.wi-tabs button{padding-inline:8px}.wi-facts dl>div{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}}
/* 16 October 2026 (Carl: "At a glance should be more prominent but not too much to show hierarchy"): the facts' heading takes a
   step between the page's title (h3, up to 44px) and the 24px section heads ("This example" under it, "The story behind the
   model" beside it), so it reads as the panel's lead without competing with the title. Mirrored in watch-info.css. */
.wi-facts header h4{font-size:clamp(26px,2.2vw,32px);line-height:1.1;margin-bottom:18px}
/* 17 October 2026 (Carl: "the view listing detail should be a different tint or color to make it stand out from the page without being too
   different"): View listing details in the app's blue wash, its words and edge in the selected-row blue (--tint, --scan-ink, --scan-edge,
   which the dark theme redefines), a step deeper on hover. Mirrored in watch-info.css. */
.wi-layout a.wi-link{background:var(--tint);border-color:var(--scan-edge);color:var(--scan-ink)}
.wi-layout a.wi-link:hover{background:var(--scan-tint);border-color:var(--blue);color:var(--scan-ink)}

/* Utility actions keep their visible size and gain a larger pointer target. */
button.src,.lr-open{position:relative}
button.src::before,.lr-open::before{content:"";position:absolute;inset:-6px;min-width:24px;min-height:24px}
button:disabled{cursor:not-allowed}
button:disabled:hover{transform:none;box-shadow:none}


/* Compact alert editor shared by Search and Watchlist. */
.alert-form.ap-panel{display:block;max-width:760px;padding:14px 16px;animation:none;background:var(--desk);color:var(--ink)}
.alert-form .ap-existing{margin:0 0 12px;font-size:12px}
.alert-form .ap-saved-title{color:var(--muted);font-size:11px;margin-bottom:4px}
.alert-form .ap-rules{list-style:none;padding:0;margin:0}
.alert-form .ap-rules li{display:flex;align-items:center;gap:8px;min-height:28px;padding:3px 0 3px 8px;border-radius:var(--r1)}
/* 16 October 2026 (Carl: "Multiple alerts should have that alternating off white tint"): every second alert is the app's one
   off-white (--row-alt, as the Watchlist, the Calendar's ledger and Sessions), in place of the hairline between them. */
.alert-form .ap-rules li:nth-child(even){background:var(--row-alt)}
.alert-form .ap-rule-kind{display:none}
.alert-form .ap-saving{color:var(--muted);font-size:11px}
.alert-form .ap-rules b{flex:1;min-width:0;color:var(--ink);font-weight:400;overflow-wrap:anywhere}
.alert-form .ap-rules .btn-30{padding:4px 0 4px 8px}
.alert-form .ap-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 16px}
.alert-form .ap-field{display:flex;min-width:0;flex-direction:column;align-items:stretch;gap:5px}
.alert-form .ap-field>span:first-child{font-size:11.5px;font-weight:500;color:var(--body)}
.alert-form .ap-field .amt{width:100%;min-width:0;gap:7px}
.alert-form .ap-field input[type="number"]{width:100%;min-width:0;flex:1}
.alert-form.ap-panel input[type="number"],.alert-form.ap-panel select{height:30px;background-color:var(--desk);font-size:12px}
.alert-form.ap-panel select{width:100%;min-width:0;padding:0 30px 0 9px;border:1.5px solid rgba(32,30,29,.2);border-radius:var(--r1);color:var(--ink);font-family:var(--sans)}
.alert-form.ap-panel select:focus{border-color:var(--blue)}
.alert-form .ap-custom{display:none}
.alert-form:has(.ap-timing option[value="custom"]:checked) .ap-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(110px,.6fr)}
.alert-form:has(.ap-timing option[value="custom"]:checked) .ap-custom{display:flex}
.alert-form .ap-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:12px}
.alert-form .ap-footer .footnote{flex:1;font-size:11px;line-height:1.4}
.alert-form .ap-footer .acts{flex:none;margin:0;gap:6px}
.alert-form .ap-footer button{height:28px;padding-inline:10px;font-size:12px}
@media(max-width:600px){.alert-form.ap-panel{padding:12px}.alert-form .ap-fields,.alert-form:has(.ap-timing option[value="custom"]:checked) .ap-fields{grid-template-columns:minmax(0,1fr)}.alert-form .ap-footer{flex-wrap:wrap}.alert-form .ap-footer .acts{margin-left:auto}.alert-form .ap-head{flex-wrap:wrap;gap:4px}}

/* The notification center uses the same compact form controls. */
#alerts .view-head{gap:10px;margin-bottom:12px;flex-wrap:wrap}
#alerts .view-head h2{font:600 16px/1.3 var(--sans)}
#alerts .al-view{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:12px}
#alerts .al-view-select{height:30px;min-width:130px;padding:0 30px 0 9px;border:1.5px solid rgba(32,30,29,.2);border-radius:var(--r1);background-color:var(--desk);color:var(--ink);font:400 12px/1 var(--sans)}
#alerts .al-view-select:focus{border-color:var(--blue)}
#alerts .c-al-rule{gap:10px;padding:8px 12px}
#alerts .c-al-rule-kind{font-size:12px}
#alerts .c-al-rule-scope{margin-top:1px;font-size:11px}
#alerts .c-al-log-row{gap:10px;padding:8px 12px}
#alerts .set-note{margin-top:10px;font-size:11px;line-height:1.4}
@media(max-width:600px){#alerts .c-al-rule{flex-wrap:wrap}#alerts .c-al-rule-actions,#alerts .c-ceil-edit{margin-left:42px}#alerts .al-view{margin-left:0}}


/* 18 October 2026 (Carl: "change alert ui so it's just a small window that appear under the alert with basic info for setting it"): the
   shared alert editor is a small non-modal window under the lot's bell (alert-panel.js placeDialog sets left/top and --ap-caret, the
   bell's centre), with a caret pointing at the bell; no backdrop, nothing behind it dims. Only the fields the chosen condition needs show. */
.ap-dialog{position:fixed;inset:auto;z-index:1000;width:min(300px,calc(100vw - 24px));max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.ap-dialog .alert-form.ap-panel{position:relative;width:100%;max-width:none;max-height:min(420px,calc(100dvh - 24px));margin:0;padding:12px;overflow:auto;border:1px solid rgba(32,30,29,.14);border-radius:var(--r1);box-shadow:0 10px 28px rgba(32,30,29,.16);animation:apPop .14s ease-out both}
.ap-dialog::before{content:"";position:absolute;z-index:1;left:calc(var(--ap-caret,50%) - 6px);top:-5px;width:10px;height:10px;background:var(--desk);border:1px solid rgba(32,30,29,.14);border-width:1px 0 0 1px;transform:rotate(45deg)}
.ap-dialog[data-side="above"]::before{top:auto;bottom:-5px;border-width:0 1px 1px 0}
@keyframes apPop{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.ap-dialog .alert-form.ap-panel{animation:none}}
.ap-dialog .alert-form:focus-visible{outline:none}
.ap-dialog .alert-form .ap-existing{margin:0 0 8px;font-size:11px}
.ap-dialog .alert-form .ap-condition{margin:0 0 8px}
.ap-dialog .alert-form .ap-fields{grid-template-columns:minmax(0,1fr);gap:8px}
.ap-dialog .alert-form:has(.ap-condition-select option[value="crosses"]:checked) .ap-time{display:none}
.ap-dialog .alert-form .ap-footer{margin-top:10px;justify-content:flex-end}
/* 19 October 2026: a session's window (alert-panel.js sessionPanelHtml) names its session on its first line, in ink, one line; the window has no other heading */
.alert-form .ap-title{margin:0 0 6px;overflow:hidden;color:var(--ink);font-size:12px;font-weight:600;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.alert-form .ap-condition{margin:10px 0}
.alert-form:has(.ap-condition-select option[value="time"]:checked) .ap-amount{display:none}
.alert-form:has(.ap-condition-select option[value="time"]:checked) .ap-fields{grid-template-columns:minmax(0,1fr)}

/* 16 October 2026 (Carl: "Add UI for adding images, enable drag to drop on the search and when clicked a screen like alert (pop up)
   shows window where you have large area to drag and drop a file or select upload from computer"): photo-drop.js. The dialog is
   the alert panel's kind (native modal, same backdrop and shadow); the veil covers the Search view while a file is dragged over it;
   the tray is the held photo at the composer's left. Colours are app.css's own whites and rgba(32,30,29,a), so dark recolours them. */
.pd-dialog{width:min(560px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.pd-dialog::backdrop{background:rgba(0,0,0,.32)}
/* Opening: the window fades in evenly over 300ms while it rises and settles over 420ms; closing is quicker (220ms) so it never
   holds the person up. The fade has its own gentler curve: on the rise's curve it was three quarters visible within 65ms. */
.pd-dialog[open] .pd-panel{animation:pdRise .42s cubic-bezier(.22,1,.36,1) both,pdFade .3s cubic-bezier(.4,0,.6,1) both}
.pd-dialog[open]::backdrop{animation:pdFade .36s ease-out both}
.pd-dialog.closing .pd-panel{animation:pdOut .22s cubic-bezier(.4,0,1,1) both}
.pd-dialog.closing::backdrop{animation:pdFade .22s ease-in reverse both}
@keyframes pdRise{from{transform:translateY(18px) scale(.97)}to{transform:none}}
@keyframes pdOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes pdFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.pd-dialog .pd-panel,.pd-dialog::backdrop{animation:none!important}}
.pd-panel{padding:18px 20px 20px;border-radius:var(--r1);background:#fff;box-shadow:0 16px 56px rgba(0,0,0,.22)}
.pd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pd-head h4{margin:0;font:600 15px/1.2 var(--sans);color:var(--ink)}
.pd-close{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:var(--r1);background:none;color:var(--muted)}
.pd-close:hover{background:rgba(32,30,29,.06);color:var(--ink)}
.pd-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:280px;padding:28px 20px;border:1.5px dashed rgba(32,30,29,.24);border-radius:var(--r1);background:rgba(32,30,29,.025);text-align:center;cursor:pointer;transition:border-color .16s,background .16s}
.pd-zone:hover,.pd-zone:focus-visible{border-color:rgba(65,105,225,.6)} /* keyboard focus keeps the app's 2px outline (design rules section 6) */
.pd-zone.over{border-color:var(--blue);background:rgba(65,105,225,.07)}
.pd-art{color:var(--muted);margin-bottom:4px}
.pd-zone.over .pd-art{color:var(--blue)}
.pd-big{margin:0;font:600 14px/1.3 var(--sans);color:var(--ink)}
.pd-or{margin:0;font:400 12px/1 var(--sans);color:var(--muted)}
.pd-hint{margin:6px 0 0;font:400 11.5px/1.4 var(--sans);color:var(--muted)}
.pd-error{margin:12px 0 0;font:500 12.5px/1.4 var(--sans);color:var(--red)}
.chat:has(> .pd-veil){position:relative}
.pd-veil{position:absolute;inset:12px;z-index:20;display:grid;place-items:center;border:2px dashed var(--blue);border-radius:var(--r1);background:color-mix(in srgb,var(--desk) 88%,transparent);pointer-events:none}
.pd-veil[hidden]{display:none}
.pd-veil-box{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--blue)}
.pd-veil-box p{margin:0;font:600 14px/1.3 var(--sans);color:var(--ink)}
.pd-tray{flex:none;display:inline-flex;align-items:center;gap:7px;max-width:220px;height:32px;padding:0 4px 0 3px;border:1px solid rgba(32,30,29,.16);border-radius:var(--r1);background:#fff}
.pd-tray[hidden]{display:none}
.pd-thumb{flex:none;width:26px;height:26px;border-radius:var(--r1);overflow:hidden;background:rgba(32,30,29,.08)}
.pd-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pd-thumb img.bad{visibility:hidden}
.pd-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px/1 var(--sans);color:var(--body)}
.pd-remove{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border:0;border-radius:var(--r1);background:none;color:var(--muted)}
.pd-remove:hover{background:rgba(32,30,29,.06);color:var(--ink)}
/* Remove's confirmation, 16 October 2026 (Carl: "Remove on sessions and lots should have confirmation", then "The remove confirmation
   button should be within the button not a pop up"): confirm.js arms the Remove button itself. Armed, it is the one red, filled
   button reading "Confirm remove"; the !important is there because the card's quiet-danger rules (.c-wl-actions .c-btn.danger and
   their :hover with two :not()s) outrank any plain selector for it. */
.c-btn.cf-armed{border-color:var(--red)!important;background:var(--red)!important;color:#fff!important;animation:cfArm .18s var(--ease) both}
.c-btn.cf-armed:hover{filter:brightness(.92)}
@keyframes cfArm{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.c-btn.cf-armed{animation:none}}
/* Search's "@" card, 16 October 2026 (Carl: "a small square window in the search bar to paste the code"): lot-code.js. A
   square over the bar's left end, in the explainer's place; the field is the code's own mono face. */
/* 16 October 2026 (Carl: "should just be like a small box like this [the 9KQ2-PM3X tag] ... Placed inside search bar"): the
   square card became the lot tag's own box (.tag-chip: 1px edge, mono 11px, .06em) at the start of the bar's row, sized to a code. */
.lc-pop{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 2px 0 7px;border:1px solid rgba(32,30,29,.18);border-radius:var(--r1);background:#fff;transition:border-color .16s;animation:popIn .16s var(--ease) both}
.lc-pop[hidden]{display:none}
.lc-pop:focus-within{border-color:rgba(65,105,225,.6)}
.lc-pop.ok{border-color:var(--blue)}
.lc-pop.bad{border-color:var(--red)}
.lc-at{font:600 11px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);color:var(--muted)}
.composer .lc-input{flex:none;box-sizing:content-box;width:9.6ch;height:24px;padding:0;border:0;background:none;font:600 11px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--body);outline:none}
.lc-x{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--r1);background:none;color:var(--muted)}
.lc-x:hover{background:rgba(32,30,29,.06);color:var(--ink)}
/* The tagged lots, before the box: each the lot tag's own box, fixed, with a ×. */
.lc-tags{flex:none;display:inline-flex;align-items:center;gap:6px;max-width:55%;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px} /* the padding holds popIn's 3% overshoot inside the scroll box, which clipped a new tag's edge */
.lc-tags[hidden]{display:none}
.lc-tag{flex:none;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 2px 0 7px;box-sizing:border-box;border:1px solid rgba(32,30,29,.18);border-radius:var(--r1);background:#fff;font:600 11px/1 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);letter-spacing:.06em;color:var(--body);white-space:nowrap;animation:popIn .16s var(--ease) both}
.lc-tag-x{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--r1);background:none;color:var(--muted)}
.lc-tag-x:hover{background:rgba(32,30,29,.06);color:var(--ink)}
/* Touch (design rules section 11: about 44px to aim at, compact to look at): the small × buttons of the "@" box, the tagged
   lots and the held photo keep their size and take a larger invisible target. */
@media (pointer: coarse){.lc-x,.lc-tag-x,.pd-remove{position:relative}.lc-x::after,.lc-tag-x::after,.pd-remove::after{content:"";position:absolute;inset:-12px}}
@media (prefers-reduced-motion: reduce){.lc-tag{animation:none}}
.lc-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.lc-pop{animation:none}}

/* Saved sessions: same 3px boxes, hairlines and typography as the lot ledger. */
.wl-content-tabs { display:flex; gap:20px; border-bottom:1px solid var(--wlc-hair); margin:0 0 20px; }
.wl-content-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:12px 10px; margin-bottom:-1px; color:var(--muted); font:500 13.5px var(--sans); border-radius:0; }
.wl-content-tabs button[aria-selected="true"] { color:var(--blue); border-bottom-color:currentColor; font-weight:600; }
.wl-tab-count { display:inline-block; min-width:18px; padding:0 4px; margin-left:4px; border-radius:var(--r1); background:var(--subtle); color:var(--muted); font-size:12px; }
.wl-tab-count:empty { display:none; }
.wl-session-tools { display:flex; gap:12px; align-items:end; margin-bottom:12px; }
.wl-session-tools label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }
.wl-session-tools label:first-child { flex:1; max-width:540px; }
.wl-session-tools input,.wl-session-tools select { height:34px; border:1px solid var(--wlc-edge); border-radius:var(--r1); background-color:var(--desk); color:var(--ink); font:inherit; padding:0 10px; min-width:0; }
.wl-session-tools select { padding-right:30px; }
.wl-session-tools .btn-30 { height:34px; }
/* 16 October 2026 (Carl: "Show dropdown in sessions watchlist should be changed to match others on site"): Show is the head's
   .wl-ctl, as Sort and the list picker are: its word beside the field, the field's 600 12px face and edge, the site's popup list
   (wl-sessions.js enhance). It keeps this toolbar's 34px so it lines up with the search field and Refresh. */
.wl-session-tools label.wl-ctl { flex-direction:row; align-items:center; gap:6px; height:34px; font-size:inherit; }
.wl-session-tools .wl-ctl select { height:34px; min-width:170px; padding:0 30px 0 9px; border:1px solid color-mix(in srgb, var(--ink) 22%, transparent); font:600 12px/1 var(--sans); }
/* 16 October 2026 (Carl: "Search bars in both session and lots should be identical, no highlight"): the Sessions search is the Lots search's own
   markup (.wl-session-tools.wl-lot-tools, a label over the field), so the two are drawn by the rules above; neither shows a ring or a coloured
   edge when it has the focus, as on the app's other fields. */
.wl-session-tools input[type="search"]:focus, .wl-session-tools input[type="search"]:focus-visible { outline:none; box-shadow:none; border-color:var(--wlc-edge); }
/* 16 October 2026 (Carl: "lot size text should be more pronounced right now small in the sessions watchlist"): the Lots count is the
   ledger's figure, as the Closed/Closes date beside it is (.c-wl-bid b) and as Search's value cell does (.sr-table .c-wl-value > b). */
#wl-sessions-panel .c-wl-value > b { display:block; margin-top:2px; font:600 18px/1.1 var(--sans); letter-spacing:-.012em; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--wlc-ink, var(--ink)); }
.wl-session-list { border:1px solid var(--wlc-hair); border-radius:var(--r1); overflow:hidden; }
.wl-session-row + .wl-session-row { border-top:1px solid var(--wlc-hair); }
.wl-session-row:nth-child(even) { background:var(--row-alt); }
.wl-session-summary { display:flex; align-items:center; gap:20px; padding:16px; }
.wl-session-date { display:flex; flex:0 0 66px; flex-direction:column; align-items:center; padding:8px 4px; background:var(--tint); border-radius:var(--r1); color:var(--blue); font-size:11px; }
.wl-session-date strong { font:400 30px/1.2 var(--serif); }
.wl-session-info { flex:1; min-width:0; }
.wl-session-info h3 { margin:0 0 4px; font:400 24px/1.15 var(--serif); overflow-wrap:anywhere; }
.wl-session-info p { margin:3px 0; }
.wl-session-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.wl-session-link { display:inline-flex; align-items:center; text-decoration:none; }
.wl-session-loading { padding:24px 16px; border:1px solid var(--wlc-hair); border-radius:var(--r1); color:var(--muted); }
#watchlist .session-catalogue { margin:0 16px 16px; padding:14px; border-top:1px solid var(--wlc-hair); }
#watchlist .session-catalogue-top,#watchlist .session-catalogue-foot,#watchlist .session-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
/* 16 October 2026 (Carl, a screenshot: "these arrows are spread apart"): space-between put ‹ in the middle and › at the far right. The
   lots line keeps the left and the two steps sit together at the right, 6px apart, as the Calendar's pager does. */
#watchlist .session-pager { justify-content:flex-end; gap:6px; }
#watchlist .session-pager .session-page-at { margin-right:auto; }
#watchlist .session-catalogue-foot { margin:12px 0 0; flex-wrap:wrap; }
#watchlist .session-mosaic { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
#watchlist .session-feature { margin:0; min-width:0; }
#watchlist .session-feature-photo { display:block; width:100%; aspect-ratio:1.4; padding:0; border:0; border-radius:var(--r1); overflow:hidden; background:var(--subtle); }
#watchlist .session-feature-photo img { width:100%; height:100%; object-fit:contain; }
#watchlist .session-image-missing { display:none; }
#watchlist .session-feature-photo.unavailable .session-image-missing { display:block; }
#watchlist .session-feature figcaption span { display:block; font-size:12px; color:var(--muted); }
#watchlist .session-feature figcaption .session-lot-name { color:var(--ink); margin-top:6px; }
#watchlist .session-preview-close,#watchlist .session-page { background:var(--desk); border:1px solid var(--wlc-edge); border-radius:var(--r1); padding:5px 8px; color:var(--ink); }
/* 16 October 2026 (Carl: "the sessions entry should copy the lots items"): a session is a lot card (.c-wl-row); its View session is a link drawn as the card's buttons are */
#watchlist .wl-session-card a.c-btn { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
@media(max-width:900px) { .wl-session-summary { flex-wrap:wrap; gap:12px; } .wl-session-actions { width:100%; justify-content:flex-start; padding-left:78px; } }
@media(max-width:600px) { .wl-session-tools { flex-wrap:wrap; } .wl-session-tools label:first-child { flex-basis:100%; } .wl-session-actions { padding-left:0; } .wl-session-actions .btn-30,.wl-content-tabs button { min-height:44px; } #watchlist .session-mosaic { display:flex; overflow-x:auto; } #watchlist .session-feature { flex:0 0 140px; } #wl-sessions-panel .view-head { flex-wrap:wrap; } }
/* 17 October 2026 (Carl: "Whenever the search or assistant talks, include the 'thought' time just as chatgpt. Thought for x time when clicked
   can show steps the agent took"): a quiet line over each answer (views/chat.js thoughtHtml); pressed, it opens the turn's steps under a
   hairline. Muted ink and the type of the notes, so it reads as about the answer and not as part of it. */
.thought-slot:empty { display: none; }
.thought { margin: 0 0 6px; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.thought-head { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; list-style: none; cursor: pointer; border-radius: var(--r1); -webkit-user-select: none; user-select: none; }
div.thought-head { cursor: auto; }
.thought-head::-webkit-details-marker { display: none; }
.thought-head:hover { color: var(--ink); }
.thought-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.thought-head svg { flex: none; transition: transform .16s var(--ease); }
.thought[open] .thought-head svg { transform: rotate(90deg); }
.thought-steps { margin: 4px 0 8px 5px; padding: 0 0 0 14px; border-left: 1px solid color-mix(in oklch, var(--ink) 14%, transparent); list-style: none; }
.thought-steps li { padding: 2px 0; overflow-wrap: anywhere; }
.rcard > .thought-live { margin-bottom: 8px; }
.thought-live .thought-k { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .thought-head svg { transition: none; } }
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { summary.thought-head { min-height: 44px; } .thought { margin-bottom: 0; } }
/* 17 October 2026 (Carl: "The dropdown for thinking should just be panel unfolding, not like a list of items, it shold be the same as when you
   click the card and it opens"): the steps unfold as a card's panel does, by wl-open-anim.js unfold (views/chat.js calls it on the head's
   press), in every browser. While they fold, data-closing turns the chevron back with them. */
.thought[data-closing] .thought-head svg { transform: none; }

/* The chart key belongs with Price over time, outside the plotting area. */
.c-ls-chartcol > .c-ls-colhead { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.c-ls-chartcol > .c-ls-colhead > .c-ls-coltitle { flex: none; order: 0; }
.c-ls-chartcol > .c-ls-colhead > .c-ls-colnote { flex: none; order: 1; margin-left: auto; }
.c-ls-chartcol .c-ls-colhead .c-ls-strip { flex: 1 1 340px; order: 2; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 14px; padding: 0; border: 0; }
.c-ls-chartcol .c-ls-colhead .c-ls-key { display: inline-flex; flex-wrap: wrap; min-width: 0; max-width: 100%; gap: 4px 6px; font-size: 11px; line-height: 1.5; white-space: normal; }
.c-ls-chartcol .c-ls-colhead .c-ls-keyname { overflow-wrap: anywhere; }
.c-ls-chartcol .c-ls-colhead .c-ls-keyfig { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.c-ls-chartcol .c-ls-colhead .c-ls-swatch { width: 20px; height: 10px; }
.c-ls-chartcol .c-ls-colhead .c-ls-count { margin-left: 0; font-size: 11px; line-height: 1.5; white-space: nowrap; }

/* Keep action announcements available to assistive technology without a popup banner. */
#toast .toast { position:absolute; width:1px; height:1px; min-width:0; max-width:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; box-shadow:none; animation:none; }

/* 19 October 2026 (Carl: "Additional photos for all cards should be shown in bottom right of each image in small photos that show cycling
   through"): photo-cycle.js. At every card photo's bottom left, against the corner (Carl, the same day: "bottom left of the preview snuck against the corner ... the same border radius as everything else"), the small photos: the one showing outlined in the middle, the one before and
   the one after; a press shows that one. The Calendar card's photos are slides in its hero, as a gallery's are in its stage, with the same
   slow fade when the cycle moves them. */
.pc-thumbs { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; gap: 2px; padding: 2px; border-radius: var(--r1); background: rgb(0 0 0 / 40%); cursor: pointer; }
.pc-thumbs > i { display: block; flex: none; width: 16px; height: 16px; overflow: hidden; border-radius: var(--r1); opacity: .7; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); transition: opacity .24s var(--ease); }
.pc-thumbs > i.on { opacity: 1; box-shadow: 0 0 0 1.5px #fff; }
.pc-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .pc-thumbs { gap: 3px; padding: 3px; } .pc-thumbs > i { width: 22px; height: 22px; } }
.session-media-hero .pc-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .24s var(--ease); }
.session-media-hero .pc-slide.on { opacity: 1; }
.session-media-hero.auto .pc-slide { transition-duration: 1.2s; transition-timing-function: ease-in-out; }
@media (prefers-reduced-motion: reduce) { .pc-thumbs > i, .session-media-hero .pc-slide { transition: none; } }

/* Sort trigger: a distinct neutral control, with room for the sort icon and chevron. */
#watchlist .wl-sortbar .wl-ctl-sort select,
.chat .sr-head .wl-ctl-sort select,
.wl-session-tools .wl-ctl-sort select {
  background-color: light-dark(#fff, #242830);
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
  color: var(--ink); padding-left: 34px; width: 210px; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717c8b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v14m-3-3 3 3 3-3M11 5h10M11 10h7M11 15h4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23717c8b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
  background-position: 11px center, right 10px center;
  background-size: 16px 16px, 10px 6px; background-repeat: no-repeat;
}
#watchlist .wl-sortbar .wl-ctl-sort select:hover,
.chat .sr-head .wl-ctl-sort select:hover { border-color: color-mix(in srgb, var(--ink) 48%, transparent); }
#watchlist .wl-sortbar .wl-ctl-sort select[aria-expanded="true"],
.chat .sr-head .wl-ctl-sort select[aria-expanded="true"],
.wl-session-tools .wl-ctl-sort select[aria-expanded="true"] {
  background-color: light-dark(#f8f9fb, #282d36);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717c8b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v14m-3-3 3 3 3-3M11 5h10M11 10h7M11 15h4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23717c8b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 5 4-4 4 4'/%3E%3C/svg%3E");
}
@media (max-width: 700px) { #watchlist .wl-sortbar .wl-ctl-sort select { width:100%; } }

/* List controls share Sort's distinct neutral surface. */
#watchlist #c-wl-lists .wl-ctl-list select,
#watchlist #c-wl-lists .wl-new {
  background-color: light-dark(#fff, #242830);
  border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
  color: var(--ink);
}
#watchlist #c-wl-lists .wl-ctl-list select:hover,
#watchlist #c-wl-lists .wl-new:hover {
  border-color: color-mix(in srgb, var(--ink) 48%, transparent);
}
#watchlist #c-wl-lists .wl-ctl-list select[aria-expanded="true"] {
  background-color: light-dark(#f8f9fb, #282d36);
}

/* Mobile header logo: true black/white rather than the brand tile's warm ink. */
html.phone-view:not([data-theme="dark"]) .crumb::before { filter:grayscale(1) contrast(20) invert(1); }
html.phone-view[data-theme="dark"] .crumb::before { filter:grayscale(1) contrast(20); }

/* The open Watchlist card (19 October 2026). Carl, with watchlistmockup.png: "Extended watchlist item should match this one to one, remove any
   old features of the extended watchlist item and only implement this exact 1 to 1". Every number below is a pixel of that picture, whose card is
   1354px across: --u is one of those pixels (1px at that width, less on a narrower card, never more), so the card keeps the picture's proportions
   at any width from a laptop up. Under 800px it is the stacked card at the foot of this block. The card's markup is expandedRow() in
   views/watchlist.js; nothing here is shared with the closed rows, so the colours are this card's own (--wlx-*, with dark values after them). */
#watchlist .c-wl-table[data-view] > .c-wl-row.wl-expanded.wl-expanded {
  --wlx-ink: #06080c; --wlx-sub: #222833; --wlx-key: #5a616b; --wlx-soft: #5d646e; --wlx-quiet: #6e747e; --wlx-link: #1049d1; --wlx-navy: #031c58;
  --wlx-hair: #e8e8ea; --wlx-edge: #e6e2df; --wlx-card: #fefdfc; --wlx-well: #f8f8f9; --wlx-dash: #dfe0e5; --wlx-field: #d2d6db;
  --wlx-btn: #2b3037; --wlx-on-btn: #fefefe; --wlx-btn-edge: #b2b5ba; --wlx-bell: #a51a22; --wlx-up: #0a4a1c; --wlx-up-bg: #dff0d9; --wlx-down-bg: oklch(95.5% .035 25); --wlx-flat-bg: rgba(32,30,29,.06); --wlx-dot: rgba(32,30,29,.4); --wlx-glyph: #30353e; --wlx-bars: #acb0b5; --wlx-focus: var(--blue);
  container: wlx / inline-size;
  display: block; grid-column: 1 / -1; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 1px solid var(--wlx-edge); border-radius: 18px; background: var(--wlx-card); color: var(--wlx-ink);
  box-shadow: 0 1px 2px rgba(60,50,40,.04), 0 12px 32px rgba(60,50,40,.08);
  cursor: default; overflow: visible; text-align: left; -webkit-user-select: text; user-select: text;
}
html[data-theme="dark"] #watchlist .c-wl-table[data-view] > .c-wl-row.wl-expanded.wl-expanded {
  --wlx-ink: #ecebe9; --wlx-sub: #d3d6dc; --wlx-key: #9aa1ad; --wlx-soft: #a8afba; --wlx-quiet: #8e95a1; --wlx-link: #8fb0ff; --wlx-navy: #9fb8ff;
  --wlx-hair: rgba(243,242,242,.13); --wlx-edge: rgba(243,242,242,.14); --wlx-card: #191c22; --wlx-well: #1f232a; --wlx-dash: rgba(243,242,242,.16); --wlx-field: rgba(243,242,242,.24);
  --wlx-btn: #ecebe9; --wlx-on-btn: #14161b; --wlx-btn-edge: rgba(243,242,242,.34); --wlx-bell: #ff8a8a; --wlx-up: #9be3b0; --wlx-up-bg: rgba(87,200,120,.17); --wlx-down-bg: rgba(255,120,110,.16); --wlx-flat-bg: rgba(243,242,242,.09); --wlx-dot: rgba(243,242,242,.4); --wlx-glyph: #ecebe9; --wlx-bars: #6b727e;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
#watchlist .wl-expanded > :is(.wlx-head, .wlx-body) { --wxu: clamp(.62px, calc(100cqw / 1352), 1px); }
#watchlist .wl-expanded :is(h3, h4, p, dl, dd, dt, footer, aside) { margin: 0; padding: 0; }
#watchlist .wl-expanded :focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: 2px; }

/* in the tiles the open card is a row of its own, so the tile that shared its row is not covered: it stays, dimmed (the alerts box and the label report still stretch over theirs) */
#watchlist .c-wl-table[data-view="tiles"]:has(> .wl-expanded) > .c-wl-row[data-wl-behind]:not(.wl-expanded) { visibility: visible; }

/* the header: the photo, the name and the house, the two icons, the three figures */
#watchlist .wl-expanded .wlx-head {
  display: grid; grid-template-columns: calc(353 * var(--wxu)) calc(36 * var(--wxu)) minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  grid-template-areas: "photo . id tools" "photo . stats stats";
  padding: calc(23 * var(--wxu)) calc(27 * var(--wxu)) calc(24 * var(--wxu)) calc(26 * var(--wxu));
}
#watchlist .wl-expanded .wlx-photo { grid-area: photo; position: relative; width: 100%; aspect-ratio: 353 / 359; align-self: start; overflow: hidden; border-radius: calc(16 * var(--wxu)); background: var(--wlx-well); }
#watchlist .wl-expanded .wlx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#watchlist .wl-expanded .wlx-photo img.bad { visibility: hidden; }
#watchlist .wl-expanded .wlx-nophoto { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(20 * var(--wxu))/1.2 var(--sans); color: var(--wlx-key); }
#watchlist .wl-expanded .wlx-id { grid-area: id; min-width: 0; padding-top: calc(26 * var(--wxu)); }
#watchlist .wl-expanded .wlx-id h3 { font: 400 calc(62 * var(--wxu))/1.04 var(--serif); letter-spacing: .018em; color: var(--wlx-ink); -webkit-text-stroke: .024em currentColor; text-wrap: balance; overflow-wrap: anywhere; }
#watchlist .wl-expanded[data-tl="m"] .wlx-id h3 { font-size: calc(46 * var(--wxu)); line-height: 1.06; }
#watchlist .wl-expanded[data-tl="l"] .wlx-id h3 { font-size: calc(36 * var(--wxu)); line-height: 1.1; }
#watchlist .wl-expanded[data-tl="x"] .wlx-id h3 { font-size: calc(30 * var(--wxu)); line-height: 1.12; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#watchlist .wl-expanded .wlx-id p { margin-top: calc(6 * var(--wxu)); font: 400 calc(30.7 * var(--wxu))/1.2 var(--sans); word-spacing: .15em; color: var(--wlx-sub); }
#watchlist .wl-expanded .wlx-tools { grid-area: tools; display: flex; gap: calc(11 * var(--wxu)); align-self: start; margin-top: calc(9 * var(--wxu)); }
#watchlist .wl-expanded .wlx-tools > button {
  all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
  width: calc(82 * var(--wxu)); height: calc(82 * var(--wxu)); border: calc(1.5 * var(--wxu)) solid var(--wlx-edge); border-radius: calc(17 * var(--wxu)); background: var(--wlx-card);
}
#watchlist .wl-expanded .wlx-tools > button:hover { background: color-mix(in srgb, var(--wlx-ink) 4%, var(--wlx-card)); }
#watchlist .wl-expanded .wlx-tools > button:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: 2px; }
#watchlist .wl-expanded .wlx-tools > .wlx-save { color: var(--wlx-glyph); }
#watchlist .wl-expanded .wlx-save.cf-armed { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--wlx-card)); animation: none; }
#watchlist .wl-expanded .wlx-save svg { width: calc(48 * var(--wxu)); height: calc(48 * var(--wxu)); }
#watchlist .wl-expanded .wlx-save.cf-armed svg { width: calc(30 * var(--wxu)); height: calc(30 * var(--wxu)); }
#watchlist .wl-expanded .wlx-tools > .ap-btn { color: var(--wlx-bell); }
#watchlist .wl-expanded .wlx-tools > .ap-btn.has svg path:first-child { fill: currentColor; }
#watchlist .wl-expanded .wlx-tools > .ap-btn.has::before { content: none; }
#watchlist .wl-expanded .wlx-tools > .ap-btn svg { width: calc(38 * var(--wxu)); height: calc(43 * var(--wxu)); }
#watchlist .wl-expanded .wlx-tools > .ap-btn svg path:last-child { fill: currentColor; }
#watchlist .wl-expanded .wlx-tools > .ap-btn.has svg { stroke-width: 1; }
#watchlist .wl-expanded .wlx-tools > .ap-btn:hover, #watchlist .wl-expanded .wlx-tools > .ap-btn[aria-expanded="true"] { border-color: var(--wlx-edge); background: color-mix(in srgb, var(--wlx-ink) 4%, var(--wlx-card)); }
#watchlist .wl-expanded .wlx-stats { grid-area: stats; align-self: end; margin-bottom: calc(62 * var(--wxu)); display: grid; grid-template-columns: 311fr 310fr 290fr; min-width: 0; }
#watchlist .wl-expanded .wlx-stats > div { min-width: 0; padding-top: calc(3 * var(--wxu)); }
#watchlist .wl-expanded .wlx-stats > div + div { border-left: 1px solid var(--wlx-hair); padding-left: calc(49 * var(--wxu)); }
#watchlist .wl-expanded .wlx-stats dt { font: 500 calc(19.4 * var(--wxu))/1 var(--sans); letter-spacing: .055em; text-transform: uppercase; color: var(--wlx-key); }
#watchlist .wl-expanded .wlx-stats dd { display: flex; align-items: center; min-height: calc(72 * var(--wxu)); margin-top: calc(11 * var(--wxu)); font: 700 calc(52.5 * var(--wxu))/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--wlx-ink); white-space: nowrap; }
#watchlist .wl-expanded .wlx-stats > div:nth-child(2) dd { font-weight: 560; word-spacing: -.06em; }
#watchlist .wl-expanded .wlx-stats dd .c-wl-left.c-wl-left, #watchlist .wl-expanded .wlx-stats dd .c-wl-left.c-wl-left.soon { display: inline; align-self: center; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
#watchlist .wl-expanded .wlx-stats .c-wl-left-m { display: inline; }
#watchlist .wl-expanded .wlx-stats dd .c-wl-left.c-wl-left .c-wl-in.c-wl-in { display: inline; font: inherit; font-size: inherit !important; font-weight: inherit !important; font-style: normal; letter-spacing: inherit; color: inherit; }
#watchlist .wl-expanded .wlx-stats .marg-pill { box-sizing: border-box; height: calc(72 * var(--wxu)); padding: 0 calc(27 * var(--wxu)) !important; border-radius: calc(29 * var(--wxu)) !important; font: 670 calc(46 * var(--wxu))/1 var(--sans) !important; letter-spacing: .05em; }
#watchlist .wl-expanded .wlx-stats .marg-ind-w { display: none; }
#watchlist .wl-expanded .wlx-stats dt i { font-style: normal; text-transform: lowercase; letter-spacing: .02em; }
#watchlist .wl-expanded .wlx-margin.up .marg-pill:not(.ind) { background: var(--wlx-up-bg) !important; color: var(--wlx-up) !important; }
#watchlist .wl-expanded .wlx-margin.down .marg-pill:not(.ind) { background: var(--wlx-down-bg) !important; }
#watchlist .wl-expanded .wlx-margin.flat .marg-pill:not(.ind), #watchlist .wl-expanded .wlx-stats .marg-pill.ind { background: var(--wlx-flat-bg) !important; }
#watchlist .wl-expanded .wlx-stats .marg-pill.ind { border: 1px dotted var(--wlx-dot) !important; }
#watchlist .wl-expanded .wlx-na, #watchlist .wl-expanded .wlx-stats .c-na { font: 400 calc(24 * var(--wxu))/1.25 var(--sans); letter-spacing: 0; color: var(--wlx-key); white-space: normal; }

/* the details: Your settings, the tabs and their panel, the three controls */
#watchlist .wl-expanded .wlx-body {
  display: grid; grid-template-columns: calc(352 * var(--wxu)) minmax(0, 1fr); grid-template-areas: "set main" "foot foot";
  box-sizing: border-box; width: auto; max-width: none; margin: 0 calc(27 * var(--wxu)) 0 calc(26 * var(--wxu)); padding: calc(30 * var(--wxu)) 0 0; border: 0; border-top: 1px solid var(--wlx-hair); border-radius: 0; background: none; cursor: default;
}
#watchlist .wl-expanded .wlx-set { grid-area: set; box-sizing: border-box; min-width: 0; padding-right: calc(25 * var(--wxu)); border-right: 1px solid var(--wlx-hair); }
#watchlist .wl-expanded .wlx-set h4 { height: calc(44 * var(--wxu)); font: 400 calc(35 * var(--wxu))/1 var(--serif); letter-spacing: .017em; color: var(--wlx-ink); -webkit-text-stroke: .018em currentColor; }
#watchlist .wl-expanded .wlx-row { box-sizing: border-box; height: calc(97.5 * var(--wxu)); border-bottom: 1px solid var(--wlx-hair); }
#watchlist .wl-expanded .wlx-row.wlx-list { height: calc(130 * var(--wxu)); }
#watchlist .wl-expanded .wlx-row.wlx-edit { height: auto; min-height: calc(97.5 * var(--wxu)); padding: calc(24 * var(--wxu)) 0 calc(18 * var(--wxu)); }
#watchlist .wl-expanded .wlx-k, #watchlist .wl-expanded .wl-pick-k { display: block; font: 430 calc(18.1 * var(--wxu))/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--wlx-key); }
#watchlist .wl-expanded .wlx-cell { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding-top: calc(22 * var(--wxu)); cursor: pointer; text-align: left; }
#watchlist .wl-expanded .wlx-cell:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: -2px; }
#watchlist .wl-expanded .wlx-cell > :is(b, .wlx-add) { display: block; margin-top: calc(9 * var(--wxu)); font: 400 calc(22.8 * var(--wxu))/1.2 var(--sans); letter-spacing: 0; color: var(--wlx-link); }
#watchlist .wl-expanded .wlx-cell.over > b { color: var(--risk-ink); }
#watchlist .wl-expanded .wlx-cell:hover > :is(b, .wlx-add) { text-decoration: underline; text-underline-offset: 3px; }
#watchlist .wl-expanded .wlx-edit .wlx-k { margin-bottom: calc(10 * var(--wxu)); }
#watchlist .wl-expanded .wlx-edit .c-wl-ceiling, #watchlist .wl-expanded .wlx-edit .c-wl-value { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
#watchlist .wl-expanded .wlx-edit .c-val-hold { display: none; }
#watchlist .wl-expanded .wlx-edit .c-val-slot > .c-val-edit, #watchlist .wl-expanded .wlx-edit .c-ceil-edit { position: static; inset: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
#watchlist .wl-expanded .wlx-edit input { flex: 1 1 120px; min-width: 0; }
#watchlist .wl-expanded .wlx-list .wl-pick { display: block; width: 100%; max-width: none; height: auto; padding-top: calc(24 * var(--wxu)); }
#watchlist .wl-expanded .wlx-list .wl-pick-in { display: block; height: auto; margin: 0; cursor: default; }
#watchlist .wl-expanded .wlx-list select { display: block; box-sizing: border-box; width: 100%; max-width: none; height: calc(59 * var(--wxu)); min-height: 0; margin-top: calc(12 * var(--wxu)); padding: 0 calc(46 * var(--wxu)) 0 calc(21 * var(--wxu)); border: 1px solid var(--wlx-field); border-radius: calc(5 * var(--wxu)); background-color: var(--wlx-card); background-repeat: no-repeat; background-position: right calc(24 * var(--wxu)) center; background-size: calc(17 * var(--wxu)) auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23424a56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l8 8 8-8'/%3E%3C/svg%3E"); cursor: pointer; appearance: none; -webkit-appearance: none; color: var(--wlx-ink); font: 400 calc(23.7 * var(--wxu))/1.2 var(--sans); }
#watchlist .wl-expanded .wlx-source { display: flex; align-items: center; gap: calc(12 * var(--wxu)); width: max-content; max-width: 100%; position: relative; top: calc(4 * var(--wxu)); height: calc(15 * var(--wxu)); margin-top: calc(17 * var(--wxu)); font: 400 calc(19.8 * var(--wxu))/1 var(--sans); color: var(--wlx-soft); text-decoration: none; }
#watchlist .wl-expanded .wlx-source u { text-decoration: underline; text-underline-offset: calc(3 * var(--wxu)); text-decoration-thickness: 1px; }
#watchlist .wl-expanded .wlx-source svg { flex: none; width: calc(15 * var(--wxu)); height: calc(15 * var(--wxu)); color: var(--wlx-ink); }
#watchlist .wl-expanded .wlx-source:hover { color: var(--wlx-ink); }

#watchlist .wl-expanded .wlx-main { grid-area: main; min-width: 0; padding-left: calc(41 * var(--wxu)); }
#watchlist .wl-expanded .wlx-main .wi-tabs { display: flex; gap: calc(26 * var(--wxu)); box-sizing: border-box; height: calc(53 * var(--wxu)); margin: 0; padding: 0; border-bottom: 1px solid var(--wlx-hair); flex-wrap: nowrap; }
#watchlist .wl-expanded .wlx-main .wi-tabs button { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; height: calc(100% + 1px); padding: calc(2 * var(--wxu)) calc(6 * var(--wxu)) 0; border-bottom: calc(3 * var(--wxu)) solid transparent; font: 400 calc(21.4 * var(--wxu))/1.2 var(--sans); color: var(--wlx-soft); cursor: pointer; white-space: nowrap; }
#watchlist .wl-expanded .wlx-main .wi-tabs button::after { display: none; }
#watchlist .wl-expanded .wlx-main .wi-tabs button:hover { color: var(--wlx-ink); }
#watchlist .wl-expanded .wlx-main .wi-tabs button[aria-pressed="true"] { color: var(--wlx-ink); font-weight: 500; font-size: calc(21.8 * var(--wxu)); border-bottom-color: var(--wlx-navy); }
#watchlist .wl-expanded .wlx-main .wi-tabs button:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: -2px; }
#watchlist .wl-expanded .wlx-main .wi-panel { margin-top: calc(25 * var(--wxu)); min-width: 0; }
#watchlist .wl-expanded .wlx-main .wi-panel:focus-visible { outline-offset: 4px; }
#watchlist .wl-expanded .c-ls-well {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(305 * var(--wxu)); padding: calc(20 * var(--wxu)) calc(43 * var(--wxu)) calc(20 * var(--wxu)) calc(20 * var(--wxu)); text-align: center;
  border-radius: calc(8 * var(--wxu)); background-color: var(--wlx-well);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%23dfe0e5' stroke-width='2' stroke-dasharray='6 3.5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] #watchlist .wl-expanded .c-ls-well { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%23353a43' stroke-width='2' stroke-dasharray='6 3.5'/%3E%3C/svg%3E"); }
#watchlist .wl-expanded .c-ls-well > svg { flex: none; width: calc(34 * var(--wxu)); height: calc(42 * var(--wxu)); margin-bottom: calc(26 * var(--wxu)); color: var(--wlx-bars); }
#watchlist .wl-expanded .c-ls-well > b { font: 400 calc(24.5 * var(--wxu))/1.2 var(--sans); color: var(--wlx-ink); }
#watchlist .wl-expanded .c-ls-well > span { margin-top: calc(14 * var(--wxu)); font: 400 calc(20.3 * var(--wxu))/1.3 var(--sans); color: var(--wlx-quiet); }
#watchlist .wl-expanded .c-ls-well.warn > span { color: var(--risk-ink); }
#watchlist .wl-expanded .c-ls-well > .c-btn { margin-top: calc(16 * var(--wxu)); }

#watchlist .wl-expanded .wlx-foot { grid-area: foot; display: grid; grid-template-columns: 498fr 509fr 253fr; column-gap: calc(18.5 * var(--wxu)); align-items: center; margin-top: calc(18 * var(--wxu)); padding: calc(18 * var(--wxu)) 0 calc(21 * var(--wxu)); border-top: 1px solid var(--wlx-hair); }
#watchlist .wl-expanded .wlx-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: calc(60 * var(--wxu)); padding-top: calc(5 * var(--wxu)); border: 1px solid var(--wlx-btn-edge); border-radius: calc(4 * var(--wxu)); background: var(--wlx-card); color: var(--wlx-ink); font: 500 calc(19.8 * var(--wxu))/1 var(--sans); text-align: center; cursor: pointer; }
#watchlist .wl-expanded .wlx-btn:hover { background: color-mix(in srgb, var(--wlx-ink) 4%, var(--wlx-card)); }
#watchlist .wl-expanded .wlx-btn.wlx-ask { border-color: var(--wlx-btn); background: var(--wlx-btn); color: var(--wlx-on-btn); }
#watchlist .wl-expanded .wlx-btn.wlx-ask:hover { background: color-mix(in srgb, var(--wlx-btn) 88%, var(--wlx-card)); }
#watchlist .wl-expanded .wlx-btn:focus-visible, #watchlist .wl-expanded .wlx-fold:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: 2px; }
#watchlist .wl-expanded .wlx-fold { all: unset; box-sizing: border-box; justify-self: end; display: flex; align-items: center; gap: calc(12 * var(--wxu)); height: calc(60 * var(--wxu)); padding-bottom: calc(9 * var(--wxu)); font: 400 calc(21.5 * var(--wxu))/1 var(--sans); color: var(--wlx-soft); cursor: pointer; }
#watchlist .wl-expanded .wlx-fold svg { flex: none; width: calc(19 * var(--wxu)); height: calc(19 * var(--wxu)); }
#watchlist .wl-expanded .wlx-fold:hover { color: var(--wlx-ink); }
html[data-theme="dark"] #watchlist .wl-expanded .wlx-list select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23c4c9d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l8 8 8-8'/%3E%3C/svg%3E"); }

/* the editors, in the card's scale */
#watchlist .wl-expanded .wlx-edit .c-val-edit, #watchlist .wl-expanded .wlx-edit .c-ceil-edit { margin: calc(12 * var(--wxu)) 0 0; gap: calc(10 * var(--wxu)); }
#watchlist .wl-expanded .wlx-edit .c-val-row { display: flex; align-items: center; gap: calc(10 * var(--wxu)); width: 100%; }
#watchlist .wl-expanded .wlx-edit input { flex: 1 1 calc(120 * var(--wxu)); min-width: 0; height: max(40px, calc(52 * var(--wxu))); padding: 0 calc(14 * var(--wxu)); border: 1px solid var(--wlx-field); border-radius: calc(5 * var(--wxu)); background: var(--wlx-card); color: var(--wlx-ink); font: 400 max(15px, calc(22.8 * var(--wxu)))/1 var(--sans); }
#watchlist .wl-expanded .wlx-edit input:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: 0; }
#watchlist .wl-expanded .wlx-edit .c-val-row > b { flex: none; font: 500 max(12px, calc(18 * var(--wxu)))/1 var(--sans); letter-spacing: .03em; color: var(--wlx-key); }
#watchlist .wl-expanded :is(.wlx-edit, .c-ls-well) .c-btn { height: max(36px, calc(44 * var(--wxu))); padding: 0 calc(18 * var(--wxu)); border: 1px solid var(--wlx-btn-edge); border-radius: calc(4 * var(--wxu)); background: var(--wlx-card); color: var(--wlx-ink); font: 500 max(13px, calc(17 * var(--wxu)))/1 var(--sans); }
#watchlist .wl-expanded .wlx-edit .c-btn.primary { border-color: var(--wlx-btn); background: var(--wlx-btn); color: var(--wlx-on-btn); }
#watchlist .wl-expanded .wlx-edit .c-val-hint { flex-basis: 100%; font: 400 max(12px, calc(14 * var(--wxu)))/1.4 var(--sans); color: var(--wlx-quiet); }
#watchlist .wl-expanded .wlx-photo:has(> img.bad)::after { content: "Photo not loaded"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(20 * var(--wxu))/1.2 var(--sans); color: var(--wlx-key); }


/* Mobile reference composition: scale every part from the same 1352px card, without desktop size floors. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded > :is(.wlx-head,.wlx-body) { --wxu:calc(100cqw / 1352); }
/* the header: the photo, the name and the house, the two icons, the three figures */
#watchlist .wl-expanded.wl-expanded .wlx-head {
  display: grid; grid-template-columns: calc(353 * var(--wxu)) calc(36 * var(--wxu)) minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  grid-template-areas: "photo . id tools" "photo . stats stats";
  padding: calc(23 * var(--wxu)) calc(27 * var(--wxu)) calc(24 * var(--wxu)) calc(26 * var(--wxu));
}
#watchlist .wl-expanded.wl-expanded .wlx-photo { grid-area: photo; position: relative; width: 100%; aspect-ratio: 353 / 359; align-self: start; overflow: hidden; border-radius: calc(16 * var(--wxu)); background: var(--wlx-well); }
#watchlist .wl-expanded.wl-expanded .wlx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#watchlist .wl-expanded.wl-expanded .wlx-photo img.bad { visibility: hidden; }
#watchlist .wl-expanded.wl-expanded .wlx-nophoto { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(20 * var(--wxu))/1.2 var(--sans); color: var(--wlx-key); }
#watchlist .wl-expanded.wl-expanded .wlx-id { grid-area: id; min-width: 0; padding-top: calc(26 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-id h3 { font: 400 calc(62 * var(--wxu))/1.04 var(--serif); letter-spacing: .018em; color: var(--wlx-ink); -webkit-text-stroke: .024em currentColor; text-wrap: balance; overflow-wrap: anywhere; }
#watchlist .wl-expanded[data-tl="m"] .wlx-id h3 { font-size: calc(46 * var(--wxu)); line-height: 1.06; }
#watchlist .wl-expanded[data-tl="l"] .wlx-id h3 { font-size: calc(36 * var(--wxu)); line-height: 1.1; }
#watchlist .wl-expanded[data-tl="x"] .wlx-id h3 { font-size: calc(30 * var(--wxu)); line-height: 1.12; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#watchlist .wl-expanded.wl-expanded .wlx-id p { margin-top: calc(6 * var(--wxu)); font: 400 calc(30.7 * var(--wxu))/1.2 var(--sans); word-spacing: .15em; color: var(--wlx-sub); }
#watchlist .wl-expanded.wl-expanded .wlx-tools { grid-area: tools; display: flex; gap: calc(11 * var(--wxu)); align-self: start; margin-top: calc(9 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-tools > button {
  all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer;
  width: calc(82 * var(--wxu)); height: calc(82 * var(--wxu)); border: calc(1.5 * var(--wxu)) solid var(--wlx-edge); border-radius: calc(17 * var(--wxu)); background: var(--wlx-card);
}
#watchlist .wl-expanded.wl-expanded .wlx-tools > button:hover { background: color-mix(in srgb, var(--wlx-ink) 4%, var(--wlx-card)); }
#watchlist .wl-expanded.wl-expanded .wlx-tools > button:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: 2px; }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .wlx-save { color: var(--wlx-glyph); }
#watchlist .wl-expanded.wl-expanded .wlx-save.cf-armed { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 9%, var(--wlx-card)); animation: none; }
#watchlist .wl-expanded.wl-expanded .wlx-save svg { width: calc(48 * var(--wxu)); height: calc(48 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-save.cf-armed svg { width: calc(30 * var(--wxu)); height: calc(30 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn { color: var(--wlx-bell); }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn.has svg path:first-child { fill: currentColor; }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn.has::before { content: none; }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn svg { width: calc(38 * var(--wxu)); height: calc(43 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn svg path:last-child { fill: currentColor; }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn.has svg { stroke-width: 1; }
#watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn:hover, #watchlist .wl-expanded.wl-expanded .wlx-tools > .ap-btn[aria-expanded="true"] { border-color: var(--wlx-edge); background: color-mix(in srgb, var(--wlx-ink) 4%, var(--wlx-card)); }
#watchlist .wl-expanded.wl-expanded .wlx-stats { grid-area: stats; align-self: end; margin-bottom: calc(62 * var(--wxu)); display: grid; grid-template-columns: 311fr 310fr 290fr; min-width: 0; }
#watchlist .wl-expanded.wl-expanded .wlx-stats > div { min-width: 0; padding-top: calc(3 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-stats > div + div { border-left: 1px solid var(--wlx-hair); padding-left: calc(49 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-stats dt { font: 500 calc(19.4 * var(--wxu))/1 var(--sans); letter-spacing: .055em; text-transform: uppercase; color: var(--wlx-key); }
#watchlist .wl-expanded.wl-expanded .wlx-stats dd { display: flex; align-items: center; min-height: calc(72 * var(--wxu)); margin-top: calc(11 * var(--wxu)); font: 700 calc(52.5 * var(--wxu))/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--wlx-ink); white-space: nowrap; }
#watchlist .wl-expanded.wl-expanded .wlx-stats > div:nth-child(2) dd { font-weight: 560; word-spacing: -.06em; }
#watchlist .wl-expanded.wl-expanded .wlx-stats dd .c-wl-left.c-wl-left, #watchlist .wl-expanded.wl-expanded .wlx-stats dd .c-wl-left.c-wl-left.soon { display: inline; align-self: center; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
#watchlist .wl-expanded.wl-expanded .wlx-stats .c-wl-left-m { display: inline; }
#watchlist .wl-expanded.wl-expanded .wlx-stats dd .c-wl-left.c-wl-left .c-wl-in.c-wl-in { display: inline; font: inherit; font-size: inherit !important; font-weight: inherit !important; font-style: normal; letter-spacing: inherit; color: inherit; }
#watchlist .wl-expanded.wl-expanded .wlx-stats .marg-pill { box-sizing: border-box; height: calc(72 * var(--wxu)); padding: 0 calc(27 * var(--wxu)) !important; border-radius: calc(29 * var(--wxu)) !important; font: 670 calc(46 * var(--wxu))/1 var(--sans) !important; letter-spacing: .05em; }
#watchlist .wl-expanded.wl-expanded .wlx-stats .marg-ind-w { display: none; }
#watchlist .wl-expanded.wl-expanded .wlx-stats dt i { font-style: normal; text-transform: lowercase; letter-spacing: .02em; }
#watchlist .wl-expanded.wl-expanded .wlx-margin.up .marg-pill:not(.ind) { background: var(--wlx-up-bg) !important; color: var(--wlx-up) !important; }
#watchlist .wl-expanded.wl-expanded .wlx-margin.down .marg-pill:not(.ind) { background: var(--wlx-down-bg) !important; }
#watchlist .wl-expanded.wl-expanded .wlx-margin.flat .marg-pill:not(.ind), #watchlist .wl-expanded.wl-expanded .wlx-stats .marg-pill.ind { background: var(--wlx-flat-bg) !important; }
#watchlist .wl-expanded.wl-expanded .wlx-stats .marg-pill.ind { border: 1px dotted var(--wlx-dot) !important; }
#watchlist .wl-expanded.wl-expanded .wlx-na, #watchlist .wl-expanded.wl-expanded .wlx-stats .c-na { font: 400 calc(24 * var(--wxu))/1.25 var(--sans); letter-spacing: 0; color: var(--wlx-key); white-space: normal; }

/* the details: Your settings, the tabs and their panel, the three controls */
#watchlist .wl-expanded.wl-expanded .wlx-body {
  display: grid; grid-template-columns: calc(352 * var(--wxu)) minmax(0, 1fr); grid-template-areas: "set main" "foot foot";
  box-sizing: border-box; width: auto; max-width: none; margin: 0 calc(27 * var(--wxu)) 0 calc(26 * var(--wxu)); padding: calc(30 * var(--wxu)) 0 0; border: 0; border-top: 1px solid var(--wlx-hair); border-radius: 0; background: none; cursor: default;
}
#watchlist .wl-expanded.wl-expanded .wlx-set { grid-area: set; box-sizing: border-box; min-width: 0; padding-right: calc(25 * var(--wxu)); border-right: 1px solid var(--wlx-hair); }
#watchlist .wl-expanded.wl-expanded .wlx-set h4 { height: calc(44 * var(--wxu)); font: 400 calc(35 * var(--wxu))/1 var(--serif); letter-spacing: .017em; color: var(--wlx-ink); -webkit-text-stroke: .018em currentColor; }
#watchlist .wl-expanded.wl-expanded .wlx-row { box-sizing: border-box; height: calc(97.5 * var(--wxu)); border-bottom: 1px solid var(--wlx-hair); }
#watchlist .wl-expanded.wl-expanded .wlx-row.wlx-list { height: calc(130 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-row.wlx-edit { height: auto; min-height: calc(97.5 * var(--wxu)); padding: calc(24 * var(--wxu)) 0 calc(18 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-k, #watchlist .wl-expanded.wl-expanded .wl-pick-k { display: block; font: 430 calc(18.1 * var(--wxu))/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--wlx-key); }
#watchlist .wl-expanded.wl-expanded .wlx-cell { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding-top: calc(22 * var(--wxu)); cursor: pointer; text-align: left; }
#watchlist .wl-expanded.wl-expanded .wlx-cell:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: -2px; }
#watchlist .wl-expanded.wl-expanded .wlx-cell > :is(b, .wlx-add) { display: block; margin-top: calc(9 * var(--wxu)); font: 400 calc(22.8 * var(--wxu))/1.2 var(--sans); letter-spacing: 0; color: var(--wlx-link); }
#watchlist .wl-expanded.wl-expanded .wlx-cell.over > b { color: var(--risk-ink); }
#watchlist .wl-expanded.wl-expanded .wlx-cell:hover > :is(b, .wlx-add) { text-decoration: underline; text-underline-offset: 3px; }
#watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-k { margin-bottom: calc(10 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-edit .c-wl-ceiling, #watchlist .wl-expanded.wl-expanded .wlx-edit .c-wl-value { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
#watchlist .wl-expanded.wl-expanded .wlx-edit .c-val-hold { display: none; }
#watchlist .wl-expanded.wl-expanded .wlx-edit .c-val-slot > .c-val-edit, #watchlist .wl-expanded.wl-expanded .wlx-edit .c-ceil-edit { position: static; inset: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
#watchlist .wl-expanded.wl-expanded .wlx-edit input { flex: 1 1 120px; min-width: 0; }
#watchlist .wl-expanded.wl-expanded .wlx-list .wl-pick { display: block; width: 100%; max-width: none; height: auto; padding-top: calc(24 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-list .wl-pick-in { display: block; height: auto; margin: 0; cursor: default; }
#watchlist .wl-expanded.wl-expanded .wlx-list select { display: block; box-sizing: border-box; width: 100%; max-width: none; height: calc(59 * var(--wxu)); min-height: 0; margin-top: calc(12 * var(--wxu)); padding: 0 calc(46 * var(--wxu)) 0 calc(21 * var(--wxu)); border: 1px solid var(--wlx-field); border-radius: calc(5 * var(--wxu)); background-color: var(--wlx-card); background-repeat: no-repeat; background-position: right calc(24 * var(--wxu)) center; background-size: calc(17 * var(--wxu)) auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23424a56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l8 8 8-8'/%3E%3C/svg%3E"); cursor: pointer; appearance: none; -webkit-appearance: none; color: var(--wlx-ink); font: 400 calc(23.7 * var(--wxu))/1.2 var(--sans); }
#watchlist .wl-expanded.wl-expanded .wlx-source { display: flex; align-items: center; gap: calc(12 * var(--wxu)); width: max-content; max-width: 100%; position: relative; top: calc(4 * var(--wxu)); height: calc(15 * var(--wxu)); margin-top: calc(17 * var(--wxu)); font: 400 calc(19.8 * var(--wxu))/1 var(--sans); color: var(--wlx-soft); text-decoration: none; }
#watchlist .wl-expanded.wl-expanded .wlx-source u { text-decoration: underline; text-underline-offset: calc(3 * var(--wxu)); text-decoration-thickness: 1px; }
#watchlist .wl-expanded.wl-expanded .wlx-source svg { flex: none; width: calc(15 * var(--wxu)); height: calc(15 * var(--wxu)); color: var(--wlx-ink); }
#watchlist .wl-expanded.wl-expanded .wlx-source:hover { color: var(--wlx-ink); }

#watchlist .wl-expanded.wl-expanded .wlx-main { grid-area: main; min-width: 0; padding-left: calc(41 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-tabs { display: flex; gap: calc(26 * var(--wxu)); box-sizing: border-box; height: calc(53 * var(--wxu)); margin: 0; padding: 0; border-bottom: 1px solid var(--wlx-hair); flex-wrap: nowrap; }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-tabs button { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; height: calc(100% + 1px); padding: calc(2 * var(--wxu)) calc(6 * var(--wxu)) 0; border-bottom: calc(3 * var(--wxu)) solid transparent; font: 400 calc(21.4 * var(--wxu))/1.2 var(--sans); color: var(--wlx-soft); cursor: pointer; white-space: nowrap; }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-tabs button::after { display: none; }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-tabs button:hover { color: var(--wlx-ink); }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-tabs button[aria-pressed="true"] { color: var(--wlx-ink); font-weight: 500; font-size: calc(21.8 * var(--wxu)); border-bottom-color: var(--wlx-navy); }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-tabs button:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: -2px; }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-panel { margin-top: calc(25 * var(--wxu)); min-width: 0; }
#watchlist .wl-expanded.wl-expanded .wlx-main .wi-panel:focus-visible { outline-offset: 4px; }
#watchlist .wl-expanded.wl-expanded .c-ls-well {
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(305 * var(--wxu)); padding: calc(20 * var(--wxu)) calc(43 * var(--wxu)) calc(20 * var(--wxu)) calc(20 * var(--wxu)); text-align: center;
  border-radius: calc(8 * var(--wxu)); background-color: var(--wlx-well);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%23dfe0e5' stroke-width='2' stroke-dasharray='6 3.5'/%3E%3C/svg%3E");
}
html[data-theme="dark"] #watchlist .wl-expanded.wl-expanded .c-ls-well { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='8' fill='none' stroke='%23353a43' stroke-width='2' stroke-dasharray='6 3.5'/%3E%3C/svg%3E"); }
#watchlist .wl-expanded.wl-expanded .c-ls-well > svg { flex: none; width: calc(34 * var(--wxu)); height: calc(42 * var(--wxu)); margin-bottom: calc(26 * var(--wxu)); color: var(--wlx-bars); }
#watchlist .wl-expanded.wl-expanded .c-ls-well > b { font: 400 calc(24.5 * var(--wxu))/1.2 var(--sans); color: var(--wlx-ink); }
#watchlist .wl-expanded.wl-expanded .c-ls-well > span { margin-top: calc(14 * var(--wxu)); font: 400 calc(20.3 * var(--wxu))/1.3 var(--sans); color: var(--wlx-quiet); }
#watchlist .wl-expanded.wl-expanded .c-ls-well.warn > span { color: var(--risk-ink); }
#watchlist .wl-expanded.wl-expanded .c-ls-well > .c-btn { margin-top: calc(16 * var(--wxu)); }

#watchlist .wl-expanded.wl-expanded .wlx-foot { grid-area: foot; display: grid; grid-template-columns: 498fr 509fr 253fr; column-gap: calc(18.5 * var(--wxu)); align-items: center; margin-top: calc(18 * var(--wxu)); padding: calc(18 * var(--wxu)) 0 calc(21 * var(--wxu)); border-top: 1px solid var(--wlx-hair); }
#watchlist .wl-expanded.wl-expanded .wlx-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: calc(60 * var(--wxu)); padding-top: calc(5 * var(--wxu)); border: 1px solid var(--wlx-btn-edge); border-radius: calc(4 * var(--wxu)); background: var(--wlx-card); color: var(--wlx-ink); font: 500 calc(19.8 * var(--wxu))/1 var(--sans); text-align: center; cursor: pointer; }
#watchlist .wl-expanded.wl-expanded .wlx-btn:hover { background: color-mix(in srgb, var(--wlx-ink) 4%, var(--wlx-card)); }
#watchlist .wl-expanded.wl-expanded .wlx-btn.wlx-ask { border-color: var(--wlx-btn); background: var(--wlx-btn); color: var(--wlx-on-btn); }
#watchlist .wl-expanded.wl-expanded .wlx-btn.wlx-ask:hover { background: color-mix(in srgb, var(--wlx-btn) 88%, var(--wlx-card)); }
#watchlist .wl-expanded.wl-expanded .wlx-btn:focus-visible, #watchlist .wl-expanded.wl-expanded .wlx-fold:focus-visible { outline: 2px solid var(--wlx-focus); outline-offset: 2px; }
#watchlist .wl-expanded.wl-expanded .wlx-fold { all: unset; box-sizing: border-box; justify-self: end; display: flex; align-items: center; gap: calc(12 * var(--wxu)); height: calc(60 * var(--wxu)); padding-bottom: calc(9 * var(--wxu)); font: 400 calc(21.5 * var(--wxu))/1 var(--sans); color: var(--wlx-soft); cursor: pointer; }
#watchlist .wl-expanded.wl-expanded .wlx-fold svg { flex: none; width: calc(19 * var(--wxu)); height: calc(19 * var(--wxu)); }
#watchlist .wl-expanded.wl-expanded .wlx-fold:hover { color: var(--wlx-ink); }
html[data-theme="dark"] #watchlist .wl-expanded.wl-expanded .wlx-list select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23c4c9d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2l8 8 8-8'/%3E%3C/svg%3E"); }


 #watchlist .wl-expanded.wl-expanded .wlx-id h3,#watchlist .wl-expanded.wl-expanded[data-tl] .wlx-id h3 { font-size:calc(62 * var(--wxu)); line-height:1.04; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
 #watchlist .wl-expanded.wl-expanded .wlx-cell { height:auto; min-height:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-set { align-self:start; }
 #watchlist .wl-expanded.wl-expanded .wlx-row.wlx-edit { min-height:0; height:auto; }
 #watchlist .wl-expanded.wl-expanded .wlx-stats dd { white-space:nowrap; }
 #watchlist .wl-expanded.wl-expanded .wlx-expand { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; min-height:24px; padding:4px; border:0; border-top:1px solid var(--wlx-hair); background:none; color:var(--wlx-soft); font:400 9px/1.2 var(--sans); cursor:pointer; }
 #watchlist .wl-expanded.wl-expanded .wlx-expand svg { width:10px; height:10px; transform:rotate(90deg); }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-cols { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-colhead { gap:4px; margin:0 0 5px; padding:0 0 5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-coltitle { font-size:9px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-colnote { font-size:8px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-strip { flex:1 1 100%; justify-content:flex-start; gap:3px 6px; padding:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-key { gap:3px; font-size:7px; line-height:1.3; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-keyfig { font-size:8px; line-height:1.3; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-swatch { width:10px; height:5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-count { font-size:7px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chartcard { padding:4px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chart { --ls-chart-height:82px; min-height:82px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-svg { max-width:100%; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-pt { width:12px; height:12px; font-size:7px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-readout { min-height:0; margin:4px 0 0; font-size:7px; line-height:1.35; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-rows { max-height:none; gap:4px; overflow:visible; margin:0; padding:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-row { grid-template-columns:28px minmax(0,1fr); grid-template-areas:"ph what" "ph amt" "ph links"; padding:5px; gap:3px 5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-row .c-ls-amt b { font-size:10px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-row :is(.c-ls-house,.c-ls-date,.c-ls-detail,.c-ls-lot,.c-ls-links,.c-ls-orig) { font-size:8px; line-height:1.3; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-num { width:12px; height:12px; font-size:7px; }
}

@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-list select { font-size:calc(23.7 * var(--wxu))!important; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-svg text { font-size:8px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chip { font-size:8px; padding:2px 3px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-compscol { contain:none; display:block; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-ph,#watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-ph .sp-photo { width:28px; height:24px; }
}

/* Miniature comparison and About panels belong to the mobile card, not a full page. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-main { min-width:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chartcard { max-width:100%; padding:3px; border-width:.5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chart { width:100%; max-width:100%; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-svg { width:100%; max-width:100%; height:auto; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-svg text { font-size:6px; font-weight:400; }
 #watchlist .wl-expanded.wl-expanded .wlx-main :is(.c-ls-base,.c-ls-axisline,.c-ls-tick,.c-ls-grid line,.c-ls-guide) { stroke-width:.5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-median { stroke-width:1px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-bid { stroke-width:1px; stroke-dasharray:3 3; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-pt { width:8px; height:8px; font-size:5px; font-weight:500; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chip { font-size:6px; line-height:10px; padding:1px 2px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-strip { gap:2px 4px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-key { font-size:6px; gap:2px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-keyfig { font-size:6.5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-swatch { width:8px; height:4px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-readout { font-size:6px; margin-top:3px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; max-width:100%; max-height:160px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; font-size:7px; line-height:1.35; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout > .wi-story { display:block; min-width:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout h3 { font-size:11px; line-height:1.15; margin:0 0 5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout h4,#watchlist .wl-expanded.wl-expanded .wlx-main .wi-facts header h4 { font-size:9px; line-height:1.2; margin:0 0 4px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout p { font-size:7px; line-height:1.35; margin:0 0 5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout .wi-eyebrow { font-size:6px; letter-spacing:.06em; margin-bottom:3px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-images { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:6px 0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-photo { display:block; width:100%; height:36px; padding:0; border:0; background:transparent; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-images img { display:block; width:100%; height:36px; object-fit:contain; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-history { padding-top:5px; margin-top:5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-facts { min-width:0; padding:5px; align-self:start; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-facts dl { margin:0 0 5px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-facts dl > div { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:4px; padding:3px 0; font-size:7px; line-height:1.25; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout :is(.wi-muted,a,figcaption) { font-size:7px; line-height:1.3; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout .wi-link { min-height:0; height:22px; padding:3px; margin-top:5px; border-width:.5px; font-size:7px; }
}

/* The chart starts at its heading; both information tabs share one stable viewport. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-panel { box-sizing:border-box; height:120px; min-height:120px; max-height:120px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .wi-layout { height:auto; min-height:0; max-height:none; overflow:visible; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-colhead { position:relative; margin:0 0 3px; padding:0; border:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-colhead .c-ls-strip { position:absolute; width:1px; height:1px; min-width:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chartcard { margin-top:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-well { min-height:120px; }
}

/* Idle chart instructions are omitted; selected-sale readouts remain available. */
.c-ls-readout:empty { display:none; }

/* Reclaim chart canvas within the unchanged information-tab frame. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chartcol > .c-ls-colhead { margin-bottom:1px; padding:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chartcard { padding:1px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-chart { --ls-chart-height:100px; min-height:100px; }
 #watchlist .wl-expanded.wl-expanded .wlx-main .c-ls-readout { margin-top:1px; }
}

/* Watchlist reuses Search cards; only the dropdown carries the mockup styling. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-mobile-details { --wlx-ink: #06080c; --wlx-sub: #222833; --wlx-key: #5a616b; --wlx-soft: #5d646e; --wlx-quiet: #6e747e; --wlx-link: #1049d1; --wlx-navy: #031c58;
  --wlx-hair: #e8e8ea; --wlx-edge: #e6e2df; --wlx-card: #fefdfc; --wlx-well: #f8f8f9; --wlx-dash: #dfe0e5; --wlx-field: #d2d6db;
  --wlx-btn: #2b3037; --wlx-on-btn: #fefefe; --wlx-btn-edge: #b2b5ba; --wlx-bell: #a51a22; --wlx-up: #0a4a1c; --wlx-up-bg: #dff0d9; --wlx-down-bg: oklch(95.5% .035 25); --wlx-flat-bg: rgba(32,30,29,.06); --wlx-dot: rgba(32,30,29,.4); --wlx-glyph: #30353e; --wlx-bars: #acb0b5; --wlx-focus: var(--blue); grid-column:1/-1; grid-row:3; min-width:0; width:100%; margin:8px 0 0; padding:0; border:0; background:none; }
 html[data-theme="dark"] #watchlist .wl-mobile-details { --wlx-ink: #ecebe9; --wlx-sub: #d3d6dc; --wlx-key: #9aa1ad; --wlx-soft: #a8afba; --wlx-quiet: #8e95a1; --wlx-link: #8fb0ff; --wlx-navy: #9fb8ff;
  --wlx-hair: rgba(243,242,242,.13); --wlx-edge: rgba(243,242,242,.14); --wlx-card: #191c22; --wlx-well: #1f232a; --wlx-dash: rgba(243,242,242,.16); --wlx-field: rgba(243,242,242,.24);
  --wlx-btn: #ecebe9; --wlx-on-btn: #14161b; --wlx-btn-edge: rgba(243,242,242,.34); --wlx-bell: #ff8a8a; --wlx-up: #9be3b0; --wlx-up-bg: rgba(87,200,120,.17); --wlx-down-bg: rgba(255,120,110,.16); --wlx-flat-bg: rgba(243,242,242,.09); --wlx-dot: rgba(243,242,242,.4); --wlx-glyph: #ecebe9; --wlx-bars: #6b727e; }
 #watchlist .wl-mobile-details > .wl-expanded { container:wlx/inline-size; display:block; min-width:0; width:100%; }
 #watchlist .wl-mobile-details .wlx-body { --wxu:calc(100cqw / 1352); }
 #watchlist .wl-mobile-details .wl-expanded.wl-expanded .wlx-body { margin:0; padding-top:8px; }
}

/* Alarm activation: a slight shake and red outline, never a red background wash. */
html body .ap-btn {
 background-color:var(--wlc-btn,var(--desk))!important;
 color:var(--wlc-ink,var(--ink))!important;
 border-color:var(--wlc-hair,var(--fill))!important;
}
html body .ap-btn.has {
 color:var(--risk-ink)!important;
 border-color:var(--risk-ink)!important;
 background-color:var(--wlc-btn,var(--desk))!important;
}
html body .ap-btn.ap-ring { animation:none!important; }
html body .ap-btn svg { visibility:visible; }
html body .ap-btn.has::before { content:none!important; }
html body .ap-btn.has svg path:first-child { fill:none!important; }
html body .ap-btn.ap-ring svg path { animation:none!important; }
html body .ap-btn.ap-ring svg {
 transform-origin:50% 12%;
 animation:apSwing .65s linear var(--ap-ring-t,0ms) both!important;
}
@media (prefers-reduced-motion:reduce) {
 html body .ap-btn.ap-ring svg { animation:none!important; }
}
/* Reserve a dedicated lane for the sort icon, regardless of mobile field padding. */
#view .wl-sortbar .wl-ctl-sort select {
 padding-inline:36px 30px!important;
 background-position:11px center,right 10px center;
}
/* 19 October 2026 (Carl, of the open card's List: "this should be same as other dropdowns, no highlight"): the card's focus ring
   (#watchlist .wl-expanded :focus-visible) outranked the app's no-ring rule for selects; the List is now every other dropdown. */
#watchlist .wl-expanded.wl-expanded select:focus-visible { outline: none; }
/* 19 October 2026 (Carl: "your settings in watchist mobile textremove"): on a phone the open card's settings start with Your ceiling,
   no "Your settings" heading (mobile.css's phone query); the heading stays on wider screens. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) { #watchlist .wl-expanded.wl-expanded .wlx-set > h4 { display: none; } }

/* Ceiling and own-value editors use the compact settings scale on phones. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-edit { padding:5px 0; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit :is(.c-ceil-edit,.c-val-edit) { display:flex; flex-wrap:wrap; width:100%; gap:3px; margin:3px 0 0; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit input { box-sizing:border-box; flex:1 1 100%; width:100%; min-width:0; max-width:100%; height:22px; min-height:22px; padding:2px 4px; border-width:.5px; border-radius:2px; font:400 10px/1.2 var(--sans)!important; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit input:focus-visible { outline-width:1px; outline-offset:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .c-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; flex:1 1 0; width:auto; min-width:0; height:20px; min-height:20px; padding:2px 3px; border-width:.5px; border-radius:2px; font:500 8px/1.2 var(--sans)!important; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .c-val-row { display:flex; flex-wrap:nowrap; width:100%; min-width:0; gap:3px; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .c-val-row input { flex:1 1 0; width:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .c-val-row > b { font-size:7px; line-height:1.2; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .c-val-hint { font-size:6px; line-height:1.3; }
}

/* A shared, in-place money editor for ceiling and value. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-row[data-setting] { box-sizing:border-box; }
 #watchlist .wl-expanded.wl-expanded .wlx-row.wlx-edit { padding:5px 0; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-inline-editor { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; margin-top:4px; width:100%; }
 #watchlist .wl-expanded.wl-expanded .wlx-amount { display:flex; align-items:center; min-width:0; height:24px; border:1px solid var(--wlx-field); border-radius:3px; background:var(--wlx-card); transition:border-color .16s,box-shadow .16s; }
 #watchlist .wl-expanded.wl-expanded .wlx-amount:focus-within { border-color:var(--wlx-link); box-shadow:0 0 0 1px color-mix(in srgb,var(--wlx-link) 16%,transparent); }
 #watchlist .wl-expanded.wl-expanded .wlx-currency { flex:none; padding-left:4px; color:var(--wlx-key); font:500 6px/1 var(--sans); }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-amount input { flex:1 1 0; width:0; height:22px; min-height:22px; padding:2px 3px; border:0; border-radius:3px; background:transparent; box-shadow:none; font-size:10px!important; appearance:textfield; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-amount input::-webkit-inner-spin-button { appearance:none; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-amount input:focus-visible { outline:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-editor-actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-editor-actions .c-btn { width:100%; height:20px; min-height:20px; padding:2px; border-radius:3px; font-size:8px!important; transition:background-color .15s,border-color .15s,color .15s; }
}

/* Stable inline money fields: editing changes controls, never the card geometry. */
@media (max-width:699px), (max-height:500px) and (pointer:coarse) {
 #watchlist .wl-expanded.wl-expanded .wlx-row[data-setting="ceiling"],
 #watchlist .wl-expanded.wl-expanded .wlx-row[data-setting="value"] { height:48px; min-height:48px; max-height:48px; padding:3px 0; }
 #watchlist .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell { box-sizing:border-box; height:100%; min-height:0; padding:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell > :is(b,.wlx-add) { display:flex; align-items:center; box-sizing:border-box; height:20px; margin-top:2px; padding:2px 3px; border:1px solid transparent; font-size:9px; line-height:1.2; border-radius:3px; transition:color .12s,border-color .12s,background-color .12s; }
 #watchlist .wl-expanded.wl-expanded .wlx-row[data-setting] .wlx-cell:hover > :is(b,.wlx-add) { border-color:var(--wlx-field); background:var(--wlx-well); text-decoration:none; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-k { margin-bottom:0; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-inline-editor { gap:3px; margin-top:2px; }
 #watchlist .wl-expanded.wl-expanded .wlx-amount { height:20px; box-shadow:none; transition:border-color .12s; }
 #watchlist .wl-expanded.wl-expanded .wlx-amount:focus-within { box-shadow:none; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-amount input { height:18px; min-height:18px; padding:1px 3px; font-size:9px!important; }
 #watchlist .wl-expanded.wl-expanded .wlx-editor-actions { gap:3px; }
 #watchlist .wl-expanded.wl-expanded .wlx-edit .wlx-editor-actions .c-btn { height:16px; min-height:16px; padding:1px 2px; font-size:7px!important; transition:background-color .12s,border-color .12s,color .12s; }
}
@media (prefers-reduced-motion:reduce) {
 #watchlist .wl-expanded.wl-expanded .wlx-set :is(.wlx-amount,.wlx-cell > b,.wlx-add,.c-btn) { transition:none; }
}
/* ── An auction house's page (R162, 20 October 2026, views/house.js): BEGIN ──
   The design's Main board (handoffs/houses/house-pages-design-handoff-2026-10-20.md) in the app's own tokens: white tiles
   with the hairline, --r1 and --tile-shadow; the Calendar's alternating rows for the sales; the Watchlist tile, cut to the
   house page, for a standout; one series on one axis for the weeks, 36px bars that shrink to 6px with 4px caps square at
   the baseline. theme.js recolours the white and the rgba(32,30,29,a) lines for dark, as everywhere in this sheet.
   sk:house in skeleton.css mirrors these numbers. */
.hs { display: flex; flex-direction: column; gap: 16px; }
.hs-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hs-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.hs-id-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hs-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hs-name { margin: 0; font: 400 26px/1 var(--serif); letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
.hs-place { font: 400 12px/1 var(--sans); color: var(--muted); }
.hs-counts { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.hs-logo { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--fill); overflow: hidden; }
.hs-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hs-logo.mono { background: var(--subtle); font: 400 24px/1 var(--serif); color: var(--ink); }
.hs-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 13px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: #fff; color: var(--ink); font: 600 13px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.hs-btn:hover { border-color: var(--blue); color: var(--blue-hover); }
.hs-btn.pri { border-color: var(--blue); background: var(--blue); color: #fff; }
.hs-btn.pri:hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; }
.hs-btn.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.hs-btn:disabled, .hs-btn:disabled:hover { border-color: rgba(32,30,29,.1); border-style: dashed; color: var(--muted); cursor: default; }
.hs-nosite { padding: 0 4px; font: 400 13px/1 var(--sans); color: var(--muted); }
.hs-later { display: inline-flex; align-items: center; gap: 6px; }
.hs-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: #fff; font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hs-tag.dashed { border-style: dashed; }
.hs-tile { border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: #fff; box-shadow: var(--tile-shadow); }
.hs-k { display: block; margin: 0; font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-k-row { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.hs-n { font: 600 12px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.hs-empty { margin: 0; font: 400 13.5px/1.5 var(--sans); color: var(--muted); }
.hs-pad { padding: 18px 14px; }
.hs-empty-tile { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.hs-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 14px 10px; }
.hs-tile-head.hs-ruled { border-bottom: 1px solid rgba(32,30,29,.1); }
.hs-tz, .hs-why { font: 400 12px/1.3 var(--sans); color: var(--muted); }
/* the About tile: the prose, the watch note and the numbered sources, beside the facts at a glance (the photo column, 280px, waits for photos) */
.hs-about-tile { padding: 18px 20px 16px; }
.hs-about { display: grid; grid-template-columns: 280px minmax(0, 1fr) 330px; gap: 0 32px; }
.hs-about.nophotos { grid-template-columns: minmax(0, 1fr) 330px; }
.hs-about.nophotos.noglance { grid-template-columns: minmax(0, 1fr); }
.hs-about-text { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hs-prose { margin: 0; max-width: 72ch; font: 400 13.5px/1.55 var(--sans); color: var(--body); overflow-wrap: anywhere; }
.hs-src { margin-left: 1px; font: 600 10px/1 var(--sans); color: var(--muted); }
.hs-part { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(32,30,29,.1); }
.hs-part p { margin: 0; max-width: 72ch; font: 400 13px/1.5 var(--sans); color: var(--body); overflow-wrap: anywhere; }
.hs-sources { margin: 0; padding: 0 0 0 18px; font: 400 12px/1.5 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hs-glance { align-self: start; min-width: 0; }
.hs-glance > .hs-k { padding: 9px 0; }
.hs-glance dl { margin: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 12px; font: 400 13px/1.4 var(--sans); }
.hs-glance dl > div { display: contents; }
.hs-glance dt { padding: 9px 0; border-top: 1px solid rgba(32,30,29,.1); color: var(--muted); }
.hs-glance dd { margin: 0; padding: 9px 0; border-top: 1px solid rgba(32,30,29,.1); color: var(--ink); overflow-wrap: anywhere; }
/* the sales: the Calendar's ledger rows, 46px, every second on --row-alt */
.hs-sales { overflow: hidden; }
.hs-rows { border-top: 1px solid rgba(32,30,29,.1); }
.hs-sale { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px 110px auto; align-items: center; gap: 0 16px; min-height: 46px; padding: 7px 14px; border-top: 1px solid rgba(32,30,29,.1); }
.hs-sale:first-child { border-top: 0; }
.hs-sale:nth-child(even) { background: var(--row-alt); }
.hs-sale:hover { background: var(--subtle); }
.hs-sale:nth-child(even):hover { background: var(--row-alt-hover); }
.hs-sale-facts { display: contents; }
.hs-sale-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px/1.35 var(--sans); color: var(--ink); }
.hs-sale-when, .hs-sale-lots { font: 400 13px/1.3 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.hs-sale-when { white-space: nowrap; }
.hs-when-k { color: var(--muted); }
.hs-sale-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.hs-lnk { display: inline-flex; align-items: center; min-height: 30px; padding: 0 6px; border: 0; border-radius: var(--r1); background: none; color: var(--blue); font: 600 12.5px/1 var(--sans); }
.hs-lnk:hover { background: var(--tint); color: var(--blue-hover); }
/* a standout: the Watchlist tile cut to the house page */
.hs-lots-sec { display: flex; flex-direction: column; gap: 12px; }
.hs-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 0 0; }
.hs-lots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hs-lot { display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0 14px; padding: 12px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--row-alt); box-shadow: var(--tile-shadow); }
.hs-lot:hover { background: var(--row-alt-hover); }
.hs-ph { position: relative; grid-row: 1 / span 3; width: 160px; height: 120px; border-radius: var(--r1); background: var(--fill); overflow: hidden; }
.hs-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hs-ph-none { position: absolute; inset: 0; display: grid; place-items: center; font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hs-ph img + .hs-ph-none[hidden] { display: none; }
.hs-chip { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 4px 6px; border-radius: var(--r1); background: #fff; color: var(--ink); font: 600 11.5px/1.15 var(--sans); box-shadow: 0 1px 3px rgba(0,0,0,.22); font-variant-numeric: tabular-nums; }
.hs-lot-why { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-lot-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 7px; }
.hs-lot-title { margin: 0; font: 400 18px/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); overflow-wrap: anywhere; }
.hs-lot-title a { color: inherit; text-decoration: none; }
.hs-lot-title a:hover { text-decoration: underline; }
.hs-lot-meta { margin: 0; font: 400 12px/1.4 var(--sans); color: var(--body); }
.hs-lot-where { align-self: end; font: 400 11.5px/1.3 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.hs-led { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 205fr) minmax(0, 306fr); margin-top: 10px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: #fff; overflow: hidden; }
.hs-led > div { min-width: 0; padding: 8px 12px 9px; }
.hs-led-bid { border-right: 1px solid rgba(32,30,29,.1); }
.hs-led-est { display: flex; flex-direction: column; }
.hs-led b { display: block; margin-top: 2px; font: 600 18px/1.1 var(--sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.hs-led-est b { font-size: 15px; line-height: 1.2; white-space: normal; }
.hs-led-n { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--sans); color: var(--body); font-variant-numeric: tabular-nums; }
.hs-led-margin { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(32,30,29,.1); }
.hs-led-margin .hs-k { display: inline; }
.hs-margin { font: 600 12.5px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.hs-margin.up { color: var(--good-ink); }
.hs-margin.down { color: var(--risk-ink); }
.hs-ind { display: inline-flex; align-self: center; padding: 2px 6px; border: 1px dotted rgba(32,30,29,.35); border-radius: var(--r1); font: 600 10.5px/1 var(--sans); letter-spacing: .02em; color: var(--muted); } /* R175: an indicative Margin, as the Market's card and the Watchlist mark one */
.hs-na { display: block; margin-top: 2px; font: 400 12px/1.2 var(--sans); color: var(--muted); }
.hs-led-margin .hs-na { display: inline; margin-top: 0; }
/* the weeks: one series on one axis; the tallest week's count printed, every week's on hover; Chart or Table */
.hs-weekly { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 12px; }
.hs-weekly .hs-tile-head { align-items: center; padding: 0; }
.hs-seg { display: inline-flex; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); overflow: hidden; }
.hs-seg button { min-height: 30px; padding: 0 12px; border: 0; background: #fff; color: var(--muted); font: 600 12px/1 var(--sans); }
.hs-seg button + button { border-left: 1px solid rgba(32,30,29,.1); }
.hs-seg button.on { background: var(--tint); color: var(--blue-hover); }
.hs-chart { padding-top: 22px; overflow-x: auto; }
.hs-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid rgba(32,30,29,.14); }
.hs-bar { position: relative; flex: 0 1 36px; min-width: 6px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hs-bar .bb { display: block; background: var(--blue); border-radius: 4px 4px 0 0; }
.hs-bar .n { position: absolute; left: 50%; transform: translateX(-50%); font: 600 11.5px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.hs-bar.top .n, .hs-bar:hover .n { opacity: 1; }
.hs-bar:hover .bb { background: var(--blue-hover); }
.hs-labels { display: flex; gap: 2px; padding-top: 6px; }
.hs-labels span { flex: 0 1 36px; min-width: 6px; text-align: center; font: 400 10.5px/1.2 var(--sans); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-tbl-wrap { overflow-x: auto; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); }
.hs-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hs-tbl th { padding: 8px 12px; border-bottom: 1px solid rgba(32,30,29,.1); text-align: left; font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-tbl td { padding: 9px 12px; border-top: 1px solid rgba(32,30,29,.1); font: 400 13px/1.3 var(--sans); color: var(--ink); }
.hs-tbl .num { text-align: right; }
.hs-tbl tr:nth-child(even) td { background: var(--row-alt); }
.hs-cap { margin: 0; font: 400 12px/1.4 var(--sans); color: var(--muted); }
.hs-blank { height: 72px; border-bottom: 1px solid rgba(32,30,29,.14); }
/* the page could not load, or the address names no house */
.hs-alert { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border: 1px solid rgba(32,30,29,.1); border-radius: var(--r1); background: var(--subtle); }
.hs-alert > svg { flex: none; margin-top: 2px; color: var(--muted); }
.hs-alert h3 { margin: 0; font: 400 20px/1.2 var(--serif); color: var(--ink); }
.hs-alert p { max-width: 60ch; margin: 6px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--body); }
.hs-alert .hs-alert-why { font-size: 12px; color: var(--muted); }
.hs-alert-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* a house's name in the Calendar's sale details, a way in to its page (houses.js) */
.house-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(32,30,29,.3); text-underline-offset: 2px; }
.house-link:hover { color: var(--blue-hover); text-decoration-color: currentColor; }
@media (max-width: 1180px) { .hs-lots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hs-about.nophotos { grid-template-columns: minmax(0, 1fr) 280px; } }
@media (max-width: 1000px) {
  .hs-about, .hs-about.nophotos { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  .hs-sale { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title acts" "facts acts"; row-gap: 4px; padding: 9px 14px; }
  .hs-sale-title { grid-area: title; }
  .hs-sale-facts { grid-area: facts; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .hs-sale-acts { grid-area: acts; }
}
@media (max-width: 860px) { .hs-lots { grid-template-columns: minmax(0, 1fr); } }
/* On a phone, by mobile.css's own test, since Carl's layouts (#144) open every view there, this one too: a sale's row stacks, its
   title in full over its facts and its actions; a standout's photo is 120 by 90, the same shape, so its tag and title have the
   room; a tag that still cannot fit wraps inside its tile. */
@media (max-width: 699px), (max-height: 500px) and (pointer: coarse) {
  .hs-sale { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "facts" "acts"; row-gap: 6px; padding: 12px 14px; }
  .hs-sale-title { white-space: normal; }
  .hs-sale-acts { justify-content: flex-start; flex-wrap: wrap; }
  .hs-lot { grid-template-columns: 120px minmax(0, 1fr); }
  .hs-ph { width: 120px; height: 90px; }
  .hs-tag { white-space: normal; }
}
/* ── An auction house's page: END ── */