/* The FCRF look of every component, built only from tokens.css (no colour, font or size is typed here).
   Loaded after app.css, which holds the layout. Montserrat throughout; Cinzel only where .brand-serif is used. */

/* ---------- base */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.6 var(--body); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
::selection { background: var(--accent-soft); color: var(--fg); }
:focus-visible { outline: none; box-shadow: var(--ring); }
h1 { font: 600 var(--fs-3xl)/1.15 var(--display); color: var(--head); letter-spacing: -.01em; margin: 0; }
h2 { font: 600 var(--fs-xl)/1.25 var(--display); color: var(--head); letter-spacing: 0; text-transform: none; margin: 0; }
h3 { font: 600 var(--fs-lg)/1.3 var(--display); color: var(--head); }
.brand-serif, .hello h1, .login h1 { font-family: var(--brand-serif); font-weight: 400; text-transform: lowercase; letter-spacing: var(--ls-head); }
.sub { color: var(--muted); font-size: var(--fs-md); }
.meta { color: var(--muted); font-size: var(--fs-sm); }
.eyebrow { margin: 0 0 var(--s1); font: 600 var(--fs-xs)/1.4 var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-ink); }
kbd { font: 600 var(--fs-xs) var(--body); padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--panel); color: var(--muted); }
.wrap { max-width: var(--wrap); padding: var(--s5) var(--s4) var(--s7); gap: var(--s5); }

/* ---------- top bar: navy, the FCRF logo, two places to go, tools on the right */
.topbar { background: var(--topbar); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); backdrop-filter: saturate(180%) blur(12px); }
.topbar .in { max-width: var(--wrap); padding: var(--s2) var(--s4); gap: var(--s2) var(--s5); min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.brand img { height: 36px; width: auto; display: block; }
.brand .bname { font: 500 var(--fs-sm)/1 var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--on-topbar);
  padding-left: var(--s3); border-left: 1px solid color-mix(in srgb, var(--on-topbar) 35%, transparent); }
.nav { gap: var(--s1); margin-right: auto; }
.nav a { position: relative; color: var(--on-topbar); font: 600 var(--fs-sm)/1 var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: var(--s3) var(--s3); border-radius: 0; background: none; transition: color var(--t-fast); }
.nav a:hover { color: var(--on-topbar-strong); }
.nav a.on { background: none; color: var(--on-topbar-strong); }
.nav a.on::after { content: ''; position: absolute; left: var(--s3); right: var(--s3); bottom: 2px; height: 2px; background: var(--accent); }
.tools { display: inline-flex; align-items: center; gap: var(--s2); }
.iconbtn { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: 36px; min-width: 36px; justify-content: center; padding: 0 var(--s2);
  border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--on-topbar); cursor: pointer; font: 500 var(--fs-sm) var(--body);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.iconbtn:hover, .iconbtn[aria-expanded="true"] { color: var(--on-topbar-strong); background: color-mix(in srgb, var(--on-topbar) 12%, transparent); }
.iconbtn.search { border-color: color-mix(in srgb, var(--on-topbar) 30%, transparent); padding: 0 var(--s2) 0 var(--s3); min-width: 180px; justify-content: flex-start; }
.iconbtn.search kbd { margin-left: auto; background: transparent; color: var(--on-topbar); border-color: color-mix(in srgb, var(--on-topbar) 35%, transparent); }
.iconbtn .badge, .nav .badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; margin: 0; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font: 700 10px/17px var(--body); text-align: center; }
.me { color: var(--on-topbar-strong); border-radius: var(--r-pill); font-weight: 600; }
.me.on, .me:hover { background: color-mix(in srgb, var(--on-topbar) 14%, transparent); border-color: transparent; }
.me img, .me .ini { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--accent); }
.ini { background: var(--accent-soft); color: var(--accent-ink); }
.pop { position: relative; }
.popmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 260px; padding: var(--s1); background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-modal); }
.popmenu a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--fg); text-decoration: none; font-weight: 500; }
.popmenu a:hover, .popmenu a.on { background: var(--hover); color: var(--fg); }
.popmenu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s1) 0; }
.popmenu .pad { padding: var(--s3); margin: 0; }
.pmhead { padding: var(--s2) var(--s3); font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.bellmenu { width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; }
.bellmenu .note { display: flex; gap: var(--s3); align-items: flex-start; }
.bellmenu .note small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.ni { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.k-changes .ni { background: var(--warn-soft); color: var(--warn); }
.k-tag .ni { background: var(--info-soft); color: var(--info); }
.themepick { display: flex; gap: var(--s1); padding: var(--s1) var(--s3) var(--s2); }
.themepick button { flex: 1; font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; padding: var(--s2); border: 1px solid var(--line-strong);
  background: none; color: var(--muted); cursor: pointer; border-radius: var(--r-control); }
.themepick button[aria-pressed="true"] { background: var(--selected); color: var(--on-selected); border-color: var(--selected); }

/* ---------- buttons: square, uppercase, gold for the main action */
.primary, .ghost, .bulkbar button, a.ghost, a.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 38px; padding: 0 var(--s4);
  font: 600 var(--fs-xs)/1.2 var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border-radius: var(--r-control); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.primary, a.primary { background: var(--accent-strong); color: var(--on-solid); border: 1px solid var(--accent-strong); }
.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.primary:disabled { background: var(--soft); border-color: var(--line); color: var(--placeholder); opacity: 1; }
.ghost, a.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
.ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.ghost.sm, .primary.sm, a.ghost.sm { min-height: 30px; padding: 0 var(--s3); font-size: 10.5px; }
.ghost.danger { color: var(--bad); }
.ghost.danger:hover:not(:disabled) { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.ghost.ok, .primary.ok { background: var(--ok); border-color: var(--ok); color: var(--on-solid); }
.ghost.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
button.is-busy::after { border-color: currentColor; border-right-color: transparent; }

/* ---------- fields: a line under them, as on the FCRF tools */
.card input, .card select, .card textarea, .revbar input, .revbar select, .fl select, .fl input, .cpnew textarea, .cact .creply,
.aedit input, .aedit textarea, .averdict input, .login input, .cselect {
  font: 400 var(--fs-md) var(--body); color: var(--fg); background: var(--raised); border: 0; border-bottom: 1px solid var(--line-strong);
  border-radius: 0; padding: var(--s2) var(--s2); min-height: var(--field-h); transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); }
.card textarea, .cpnew textarea, .aedit textarea { min-height: 120px; line-height: 1.65; border: 1px solid var(--line); border-bottom-color: var(--line-strong); }
.card input:focus, .card textarea:focus, .revbar input:focus, .fl input:focus, .cpnew textarea:focus, .cact .creply:focus, .aedit input:focus,
.aedit textarea:focus, .averdict input:focus, .cselect:focus-visible, .cselect[aria-expanded="true"], .cinput:focus {
  outline: none; border-bottom-color: var(--accent); background: var(--panel); box-shadow: 0 2px 0 -1px var(--accent); }
::placeholder { color: var(--placeholder); }
.card label, .aedit label { font: 600 var(--fs-xs)/1.4 var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.cselect::after { border-color: var(--muted); }
.cmenu { border-radius: var(--r-card); box-shadow: var(--shadow-modal); border-color: var(--line); background: var(--panel); }
.cmenu [role=option].on { background: var(--hover); }
.cmenu [role=option].sel { color: var(--accent-ink); }
.switch input:checked + span { background: var(--accent); }
.hlwrap .hlback, .hlwrap textarea { font: 400 var(--fs-md)/1.65 var(--body); }
.hlwrap .hlback { background: var(--raised); border-color: var(--line); border-bottom-color: var(--line-strong); border-radius: 0; }

/* ---------- segmented controls and tabs */
.seg { border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--panel); }
.seg button { font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); padding: var(--s2) var(--s3); min-height: 34px; }
.seg button:hover { color: var(--fg); background: var(--hover); }
.seg button[aria-pressed="true"] { background: var(--selected); color: var(--on-selected); }
.seg button + button { border-left-color: var(--line); }
.seg .n { font: 600 var(--fs-xs) var(--body); opacity: .75; }
.card > .seg { justify-self: start; }   /* a card is a grid: without this the control stretches across it */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) var(--s3) var(--s2); text-decoration: none; white-space: nowrap;
  font: 600 var(--fs-sm) var(--body); letter-spacing: .02em; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.tab .tn { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font: 700 var(--fs-xs) var(--body); color: var(--muted); }
.tab[aria-selected="true"] .tn { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
.tab .tc { min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font: 700 var(--fs-xs)/20px var(--body); text-align: center; }
.tab .tbar { position: absolute; left: 0; bottom: -1px; height: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); pointer-events: none; }
.tab[aria-selected="true"] .tbar { display: none; }

/* ---------- surfaces: cards, panels, sale blocks */
.card, .panel, .sale, .alotbox, .quiet, .revbar, .hcardbtn, .bulkbar {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.panel { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); align-content: start; }  /* side by side panels: content stays at the top */
.phead { display: flex; align-items: center; gap: var(--s3); justify-content: space-between; }
.phead h2 { font-size: var(--fs-lg); }
.phead .count { margin-right: auto; min-width: 24px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--soft); color: var(--muted); font: 700 var(--fs-xs)/22px var(--body); text-align: center; }
.card { padding: var(--s4) var(--s5); }
.card h2 { font-size: var(--fs-lg); }
.emptynote { margin: 0; padding: var(--s3) 0; color: var(--muted); font-size: var(--fs-sm); }
.pagehead { align-items: flex-end; }
.checked { text-decoration: none; }
.checked::before { content: '● '; color: var(--ok); }

/* ---------- pills */
.pill, .v, .chip { font: 600 var(--fs-xs)/1.5 var(--body); border-radius: var(--r-pill); padding: 2px var(--s2); letter-spacing: .02em; }
.chip { background: var(--soft); color: var(--text); }
.pill.live, .pill.ok, .pill.st-approved, .v.natural { background: var(--ok-soft); color: var(--ok); }
.pill.preview, .pill.st-changes, .v.untested { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.none, .pill.st-draft, .pill.st-not_started { background: var(--soft); color: var(--muted); }
.pill.st-in_review, .v.mention { background: var(--info-soft); color: var(--info); }
.pill.st-writing, .v.likely { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- houses */
.plate { border-color: var(--line); border-radius: var(--r-sm); }
.logo .nm { font: 600 var(--fs-md) var(--body); color: var(--fg); }
.hcardbtn { padding: var(--s4); gap: var(--s3); transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.hcardbtn:hover { border-color: var(--accent); box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.hcardbtn.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-raised); }
.hnums b { font: 600 var(--fs-2xl)/1 var(--body); color: var(--head); }
.hnums small { font: 600 10px var(--body); letter-spacing: var(--ls-caps); color: var(--muted); }

/* ---------- Today */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3) var(--s5); flex-wrap: wrap;
  padding: var(--s5) var(--s5); border-radius: var(--r-card); background: var(--navy); color: var(--on-topbar); position: relative; overflow: hidden; }
.hello::after { content: ''; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); pointer-events: none; }
.hello h1 { color: var(--on-topbar-strong); font-size: var(--fs-3xl); }
.hello .sub { color: var(--on-topbar); max-width: 60ch; margin-top: var(--s2); }
.hello .eyebrow { color: var(--accent); }
.hello .checked { color: var(--on-topbar); position: relative; z-index: 1; }
.homegrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); }
.needrow, .freshrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s2);
  border-radius: var(--r-sm); text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
.needrow:last-child, .freshrow:last-child { border-bottom: 0; }
.needrow:hover, .freshrow:hover { background: var(--hover); }
.needrow b, .freshrow b { font-weight: 600; display: block; }
.needrow small, .freshrow small { color: var(--muted); font-size: var(--fs-sm); }
.go { color: var(--accent-ink); font-weight: 700; transition: transform var(--t-fast); }
.needrow:hover .go, .freshrow:hover .go, .salerow:hover .go { transform: translateX(3px); }
.freshrow .logo .nm { display: none; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.feed li { display: flex; flex-wrap: wrap; gap: 0 var(--s2); align-items: baseline; padding-bottom: var(--s2); border-bottom: 1px dashed var(--line); }
.feed .who { font-weight: 600; color: var(--fg); }

/* ---------- a sale as a row (Today, Sales) */
.salelist { display: grid; }
.salerow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px 150px 110px; gap: var(--s2) var(--s4); align-items: center;
  padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); transition: background var(--t-fast); }
.srwrap:last-child > .salerow { border-bottom: 0; }
.salerow:hover { background: var(--hover); }
.salerow.late { box-shadow: inset 3px 0 0 var(--bad-line); }
.sr-title { display: block; color: var(--fg); font-weight: 600; font-size: var(--fs-md); line-height: 1.35; }
.sr-main small, .sr-when small { color: var(--muted); font-size: var(--fs-sm); }
.sr-when { text-align: right; display: grid; }
.sr-when b { color: var(--fg); font-weight: 600; }
.latetxt { color: var(--bad) !important; font-weight: 600; }
.sr-next { font-size: var(--fs-sm); color: var(--accent-ink); font-weight: 600; }
.sr-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.sr-steps .step { position: relative; height: 22px; background: var(--soft); overflow: hidden; }
/* a step in progress fills a thin gold line along its bottom, so its word stays readable on the light cell;
   a finished step turns solid green with light text */
.sr-steps .step i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.sr-steps .step em { position: absolute; inset: 0; display: grid; place-items: center; font: 600 9px var(--body); letter-spacing: .06em; text-transform: uppercase;
  font-style: normal; color: var(--muted); }
.sr-steps .step.part em { color: var(--accent-ink); }
.sr-steps .step.full { background: var(--ok); }
.sr-steps .step.full i { display: none; }
.sr-steps .step.full em { color: var(--on-solid); }

/* ---------- the sale workspace */
.salehead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s5); align-items: start; padding: var(--s5);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.salehead.late { box-shadow: inset 3px 0 0 var(--bad-line), var(--shadow); }
.salehead h1 { font-size: var(--fs-2xl); margin: var(--s2) 0 var(--s1); }
.sh-when { text-align: right; display: grid; }
.sh-when b { font: 600 var(--fs-xl) var(--body); color: var(--head); }
.sh-when span { color: var(--muted); font-size: var(--fs-sm); }
.sh-people { display: flex; gap: var(--s4); flex-wrap: wrap; }
.sh-people label { display: grid; gap: var(--s1); font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); min-width: 190px; }
.sh-actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; align-self: end; }
.tabpanel { display: grid; gap: var(--s4); }
.tabpanel[hidden] { display: none; }
.lot.cur { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-soft); }
.keys { margin: 0; }
.pubsum { margin: 0; }
.publist { display: grid; border-top: 1px solid var(--line); }
.pubrow { display: grid; grid-template-columns: 90px auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.pubrow:hover { background: var(--hover); }
.pubrow.ok .pubmiss { color: var(--ok); font-weight: 600; }
.pubmiss { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.pubmiss .miss { color: var(--warn); background: var(--warn-soft); border-radius: var(--r-sm); padding: 1px var(--s2); font-size: var(--fs-sm); font-weight: 600; }
.pubgo { color: var(--accent-strong); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.pubrest { margin: 0; color: var(--muted); }
.pubrest a { margin-left: var(--s2); font-weight: 600; }
.pubbar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; padding-top: var(--s2); }

/* ---------- the lot sheet */
.sheet { position: fixed; inset: 0; z-index: 45; }
.sheet[hidden] { display: none; }
.sheetbg { position: absolute; inset: 0; background: var(--backdrop); animation: fade var(--t) var(--ease); }
.sheetbox { position: absolute; top: 0; right: 0; bottom: 0; width: min(1180px, 94vw); background: var(--bg); box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column; animation: slidein var(--t-slow) var(--ease); }
.sheetx { position: absolute; top: var(--s3); right: var(--s4); z-index: 2; background: var(--panel); }
.sheetbody { flex: 1; overflow: auto; padding: var(--s5) var(--s5) var(--s7); display: grid; gap: var(--s5); align-content: start; }
body.sheet-open { overflow: hidden; }
@keyframes fade { from { opacity: 0; } }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }

/* ---------- lot rows, the review board */
.lot { border-bottom-color: var(--line); transition: background var(--t-fast); }
.lot:hover { background: var(--raised); }
.lot.relevant { background: color-mix(in srgb, var(--ok-soft) 60%, transparent); }
.no b { font: 600 var(--fs-xl) var(--body); color: var(--head); }
.t { color: var(--fg); font-weight: 600; }
.est { font: 600 var(--fs-sm) var(--body); color: var(--fg); }
.est .open { background: var(--accent-strong); color: var(--on-solid); border-radius: var(--r-control); font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps);
  text-transform: uppercase; box-shadow: none; padding: var(--s2) var(--s3); }
.est .open:hover { background: var(--accent); filter: none; }
.vx button { border-radius: var(--r-control); border-color: var(--line-strong); background: var(--panel); color: var(--muted); }
.info { border-color: var(--accent); color: var(--accent-ink); font-family: var(--brand-serif); }
.info:hover { background: var(--accent); color: var(--on-solid); }
.pick { border-color: var(--line-strong); border-radius: var(--r-control); }
.pick button { font: 600 var(--fs-sm) var(--body); background: var(--panel); color: var(--muted); }
.pick button:hover { background: var(--hover); color: var(--fg); }
.pick button[aria-pressed="true"] { background: var(--accent-strong); color: var(--on-solid); }
.score { border-bottom-color: var(--line); }

/* ---------- the article (lot preview and the sale's article): reads like the published page */
.preview #preview, .apreview { font: 400 var(--fs-md)/1.75 var(--body); color: var(--text); }
.apreview .pl b, .preview .pl b { font: 600 var(--fs-lg) var(--body); color: var(--head); }
.abar { background: var(--raised); border-bottom-color: var(--line); }
.abar .alot { font: 600 var(--fs-lg) var(--body); color: var(--head); }
.alotbox.incomments { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.doc { border-radius: var(--r-control); background: var(--panel); border-color: var(--line-strong); color: var(--accent-ink); }
table.va td { border-bottom: 1px solid var(--line); padding: var(--s1) var(--s5) var(--s1) 0; }
.cutmark { color: var(--accent-ink); border-top-color: var(--accent); }
.saletools { background: var(--bg); }
.saletoc a { border-radius: var(--r-pill); font: 600 var(--fs-xs) var(--body); background: var(--panel); border-color: var(--line); color: var(--muted); }
.saletoc a:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---------- comments panel, modals, toast */
.cpanel { background: var(--panel); border-left-color: var(--line); box-shadow: var(--shadow-modal); }
.cphead b, #scp .cphead b { font: 600 var(--fs-lg) var(--body); color: var(--head); }
.cth { border-radius: var(--r-card); background: var(--raised); border-color: var(--line); }
.cth.focus { border-color: var(--mark-line); }
.mention { color: var(--accent-ink); background: var(--accent-soft); }
dialog.infobox, .palette { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--text); box-shadow: var(--shadow-modal); }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.infohead h2 { font-size: var(--fs-xl); }
.palette { width: min(640px, 94vw); padding: 0; margin-top: 12vh; }
.palette .pin { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--muted); }
.palette input { flex: 1; border: 0; background: none; font: 500 var(--fs-lg) var(--body); color: var(--fg); outline: none; min-height: 36px; }
.pres { max-height: 55vh; overflow: auto; padding: var(--s2); }
.pgroup { padding: var(--s2) var(--s2) var(--s1); font: 700 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.pitem { display: grid; padding: var(--s2) var(--s3); border-radius: var(--r-sm); text-decoration: none; color: var(--fg); }
.pitem b { font-weight: 600; }
.pitem small { color: var(--muted); }
.pitem.on, .pitem:hover { background: var(--accent-soft); }
.toast { background: var(--navy); color: var(--on-topbar-strong); border-radius: var(--r-card); box-shadow: var(--shadow-modal); font: 500 var(--fs-md) var(--body);
  display: flex; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); border-left: 3px solid var(--accent); }
.toast.bad { background: var(--bad); color: var(--on-solid); border-left-color: var(--bad-line); }
.toast.withact { pointer-events: auto; }
.tact { background: none; border: 0; color: var(--accent-hover); font: 700 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; cursor: pointer; padding: var(--s1) 0; }
#busybar::before { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }

/* ---------- tables */
table.grid th, table.flow th { background: transparent; font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); color: var(--muted); border-bottom: 1px solid var(--line-strong); }
table.grid td, table.flow td { border-bottom-color: var(--line); }
table.flow tr:hover td { background: var(--hover); }

/* ---------- sign-in */
.login { max-width: 400px; padding: 0 0 var(--s6); overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-raised); border: 1px solid var(--line); text-align: center; }
.loginbrand { background: var(--navy); padding: var(--s6) var(--s5) var(--s5); }
.loginbrand img { height: 84px; width: auto; }
.login h1 { margin-top: var(--s5); font-size: var(--fs-2xl); color: var(--head); }
.login .sub, .login .gbtn, .login .err, .login .warnline { margin-left: var(--s5); margin-right: var(--s5); }
.gbtn { border-radius: var(--r-control); border-color: var(--line-strong); font: 600 var(--fs-sm) var(--body); }
.gbtn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- small screens */
@media (max-width: 1000px) {
  .homegrid { grid-template-columns: 1fr; }
  .salerow { grid-template-columns: 110px minmax(0, 1fr) 100px; }
  .salerow .sr-steps { grid-column: 1 / -1; grid-row: 2; }
  .salerow .sr-next { grid-column: 2; grid-row: 3; }
  .salerow .sr-when { grid-column: 3; grid-row: 1; }
  .iconbtn.search { min-width: 0; }
  .iconbtn.search .ktext, .iconbtn.search kbd { display: none; }
}
@media (max-width: 760px) {
  .topbar .in { padding: var(--s2) var(--s3) 0; min-height: 0; }
  .brand .bname { display: none; }
  .brand img { height: 30px; }
  .nav { margin-right: 0; }
  .nav a.on::after { bottom: 4px; }
  .hello { padding: var(--s4); }
  .hello h1, h1 { font-size: var(--fs-2xl); }
  .panel, .card { padding: var(--s3); }
  .salerow { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s3) 0; }
  .salerow .sr-house { grid-column: 1; grid-row: 1; }
  .salerow .sr-main { grid-column: 1 / -1; grid-row: 2; }
  .salerow .sr-steps { grid-row: 3; }
  .salerow .sr-next { grid-column: 1; grid-row: 4; }
  .salerow .sr-when { grid-column: 2; grid-row: 1; }
  .salehead { grid-template-columns: 1fr; padding: var(--s4); }
  .sh-when { text-align: left; }
  .sh-actions { justify-content: stretch; }
  .sh-actions button { flex: 1; }
  .sh-people label { min-width: 0; flex: 1 1 140px; }
  .tab { padding: var(--s3) var(--s3) var(--s3) var(--s1); }
  .pubrow { grid-template-columns: 70px minmax(0, 1fr); }
  .pubrow .pubmiss { grid-column: 1 / -1; }
  .sheetbox { width: 100vw; }
  .sheetbody { padding: var(--s4) var(--s3) var(--s7); }
  .toast { left: var(--s3); right: var(--s3); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* =====================================================================================================
   Calm and clear (after "nothing is clear"): one question per screen, words in sentence case, few lines,
   more air. Overrides the busier rules above; still tokens only.
   ===================================================================================================== */
body { font-size: 15px; }
.primary, .ghost, .bulkbar button, a.ghost, a.primary, .seg button, .tab, .nav a, .est .open {
  text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; }
.ghost.sm, .primary.sm, a.ghost.sm { font-size: 12.5px; }
.nav a { font-size: 14px; }
.card label, .aedit label, .sh-people label, .pmhead, .eyebrow { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.card, .panel, .sale, .alotbox, .quiet, .revbar, .hcardbtn { box-shadow: none; }
.wrap { gap: var(--s5); }
.back { display: inline-block; font-weight: 600; text-decoration: none; color: var(--muted); }
.back:hover { color: var(--accent-ink); }
.urgent { color: var(--bad) !important; font-weight: 600; }
.quietword { color: var(--placeholder); }

/* page title and the one line under it */
.intro { display: grid; gap: var(--s2); }
.intro h1 { font: 600 30px/1.2 var(--display); color: var(--head); letter-spacing: -.01em; }
.lede { margin: 0; color: var(--muted); font-size: 16px; max-width: 70ch; }
.saleintro .logo .nm { color: var(--muted); }

/* a plain block: a heading and its list, no box around it */
.block { display: grid; gap: var(--s3); }
.block h2, .bhead h2 { font: 600 18px var(--display); color: var(--head); }
.bhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.bhead a { font-weight: 600; text-decoration: none; }

/* Today: the to-do list, one line per thing, one button */
.todo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s5);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.todo + .todo { margin-top: calc(var(--s2) * -1 + var(--s1)); }
.todo b { display: block; font-size: 16px; color: var(--fg); font-weight: 600; }
.twhere { color: var(--muted); font-size: 13.5px; }
.twhen { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.todo .primary { min-width: 100px; }
.todo.k-review, .todo.k-changes, .todo.k-tag { border-left: 3px solid var(--accent); }

/* Today: the coming sales, quiet rows */
.simplelist { display: grid; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.simplerow { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.simplerow:last-child { border-bottom: 0; }
.simplerow:hover { background: var(--hover); }
.srow-title { font-weight: 600; }
.srow-when { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.foot { text-align: center; }

/* Sales: a sale is one calm row: house, title, what is next, when */
.salerow { grid-template-columns: 150px minmax(0, 1fr) 260px 170px; padding: var(--s4) var(--s3); }
.sr-next b { display: block; color: var(--fg); font-weight: 600; font-size: 14px; }
.sr-next small { color: var(--muted); font-size: 12.5px; }
.salerow.late { box-shadow: inset 3px 0 0 var(--bad-line); }

/* the sale: four numbered steps that say what each is for and how much is left */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.stp { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color var(--t-fast), background var(--t-fast); }
.stp:hover { border-color: var(--line-strong); }
.stp[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); background: var(--panel); }
.stp .sn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-strong);
  font-weight: 700; color: var(--muted); }
.stp[aria-selected="true"] .sn { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-solid); }
.stp.done .sn { background: var(--ok); border-color: var(--ok); color: var(--on-solid); }
.stp .st { display: grid; gap: 1px; min-width: 0; }
.stp .st b { color: var(--fg); font-size: 15px; }
.stp .st small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.stp .st em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); margin-top: 2px; }
.stp.done .st em { color: var(--ok); }

/* the line that says what a step is for, with its one action */
.hint { display: grid; gap: var(--s1); padding: var(--s4) var(--s5); background: var(--accent-soft); border-radius: var(--r-card); color: var(--text); }
.hint[hidden] { display: none; }
.hint b { color: var(--fg); font-size: 15px; }
.hint span { font-size: 13.5px; color: var(--muted); }
.hintact { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s2); }
.hintact label { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 600; color: var(--fg); font-size: 13.5px; }
.hintact .cselect, .hintact select { min-width: 200px; background: var(--panel); }
.tri { background: var(--panel); }

@media (max-width: 1000px) {
  .salerow { grid-template-columns: 110px minmax(0, 1fr) 150px; }
  .salerow .sr-next { grid-column: 2 / -1; grid-row: 2; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .intro h1 { font-size: 24px; }
  .todo { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s3); }
  .todo .twhen { grid-column: 1; grid-row: 2; }
  .todo .primary { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .simplerow { grid-template-columns: minmax(0, 1fr) auto; }
  .simplerow .logo { grid-column: 1 / -1; }
  .salerow { grid-template-columns: minmax(0, 1fr) auto; }
  .salerow .sr-main, .salerow .sr-next { grid-column: 1 / -1; }
  .stepper { gap: var(--s1); }
  .stp { padding: var(--s2) var(--s3); }
  .stp .st small { display: none; }
  .hint { padding: var(--s3); }
}

/* Sales: the three lists, the house picks, the search box */
.views3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.views3 .sn { width: auto; min-width: 30px; padding: 0 8px; border-radius: var(--r-pill); }
.houses3 { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hpick { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--panel); cursor: pointer; }
.hpick .logo .nm { display: none; }
.hpick:hover { border-color: var(--line-strong); }
.hpick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.searchbox { flex: 1 1 220px; max-width: 340px; font: 400 14px var(--body); color: var(--fg); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-control); padding: 0 var(--s3); min-height: 38px; }
.searchbox:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.subhead { font: 600 15px var(--display); color: var(--muted); margin-top: var(--s3); }
.salesview[hidden] { display: none; }
.simplelist .salerow { border-bottom: 1px solid var(--line); }
.simplelist .srwrap:last-child > .salerow, .simplelist .qrow:last-child { border-bottom: 0; }
.emptynote.pad { padding: var(--s4); }
@media (max-width: 760px) { .views3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .views3 .st small { display: none; } .searchbox { max-width: none; } }
/* which lots a step shows, and the switch to see them all */
.stepfilter { margin: 0; color: var(--muted); font-size: 14px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--accent); }
.alotbox[hidden] { display: none; }
/* the lot sheet scrolls inside itself (a flex child needs min-height 0 to scroll rather than grow past the screen) */
.sheetbox { overflow: hidden; }
.sheetbody { min-height: 0; overscroll-behavior: contain; }
/* the lots of a sale use the full width; the article text inside keeps a readable line length */
.article { max-width: none; }
.apreview > * { max-width: 920px; }

/* our confirmation window (window.ask), instead of the browser's alert */
.askbox { width: min(440px, 92vw); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--fg); box-shadow: var(--shadow-modal); }
.askbox::backdrop { background: var(--backdrop); }
.asktext { margin: 0 0 var(--s4); font-size: 15px; line-height: 1.55; white-space: pre-line; }  /* a question may carry a list, line by line */
.askact { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }   /* three choices wrap rather than run out of the box */
.askbox.askwide { width: min(580px, 92vw); }

/* full editor: the Save / Cancel bar stays on top while scrolling (under the top bar on the page, at the top in the sheet) */
.editbar { position: sticky; top: var(--top, 60px); z-index: 7; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4);
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r-card); box-shadow: var(--shadow-raised); }
.editbar .grow { flex: 1; }
.sheetbody .editbar { top: calc(var(--s5) * -1); }
.sheetx { right: calc(var(--s4) + 230px); }
@media (max-width: 760px) { .editbar .meta { display: none; } .editbar button { flex: 1; } .sheetx { right: var(--s3); top: auto; bottom: var(--s3); } }
.sheetbody .editbar { top: 0; }

/* full editor: the review row and Save / Cancel are ONE row that stays on top while scrolling
   (under the top bar on the page, at the top of the sheet). Replaces the separate .editbar. */
.editbar { display: none; }
.lotbar { position: sticky; top: var(--top, 60px); z-index: 7; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-raised); }
.lotbar .revbar { flex: 1 1 520px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.lotbar .edbtns { display: flex; gap: var(--s2); margin-left: auto; padding-left: var(--s3); border-left: 1px solid var(--line); }
.sheetbody .lotbar { top: 0; }
.sheetx { right: var(--s4); }
.sheetbody { padding-top: calc(var(--s5) + 34px); }
@media (max-width: 760px) { .lotbar .edbtns { flex: 1 1 100%; border-left: 0; padding-left: 0; } .lotbar .edbtns button { flex: 1; } }
/* the row sits fixed at the bottom of the screen instead (always in reach while writing); the page keeps room for it */
.lotbar { position: fixed; top: auto; bottom: var(--s4); left: 50%; transform: translateX(-50%); width: min(1200px, calc(100vw - 32px)); z-index: 30;
  border-color: var(--accent); box-shadow: var(--shadow-modal); }
.sheetbody .lotbar { top: auto; left: auto; right: var(--s4); transform: none; width: min(1140px, calc(94vw - 32px)); }
main.wrap:has(.lotbar), .sheetbody:has(.lotbar) { padding-bottom: 140px; }
.sheetbody { padding-top: var(--s5); }
.sheetx { right: var(--s4); top: var(--s3); }
@media (max-width: 760px) {
  .lotbar, .sheetbody .lotbar { left: var(--s2); right: var(--s2); bottom: var(--s2); width: auto; transform: none; }
  main.wrap:has(.lotbar), .sheetbody:has(.lotbar) { padding-bottom: 220px; }
}
/* messages rise above the bottom row instead of hiding behind it */
body:has(.lotbar) .toast { bottom: 110px; }
/* with the lot sheet open, messages show over it, centred in the sheet rather than on the dimmed page beside it */
body.sheet-open .toast { z-index: 50; }
@media (min-width: 761px) { body.sheet-open .toast { left: calc(100% - min(1180px, 94vw) / 2); } }
@media (max-width: 760px) { body:has(.lotbar) .toast { bottom: 190px; } }
/* editing a lot on the sale page: the fields use the full width (reading keeps the 920px line) */
.apreview.aedit > * { max-width: none; }
/* the full editor's own header row, so Close never sits on top of the page's buttons */
.sheethead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4);
  background: var(--panel); border-bottom: 1px solid var(--line); }
.sheethead b { font-size: 14px; color: var(--muted); font-weight: 600; }
.sheetx, .sheetbody .sheetx { position: static; top: auto; right: auto; bottom: auto; }
@media (max-width: 760px) { .sheetx { position: static; } }
/* phone: the bottom row folds to the lot's status, More, Cancel and Save, all small; More opens the rest */
.lb-more { display: none; }
@media (max-width: 760px) {
  .lotbar { padding: var(--s2); gap: var(--s2); }
  .lotbar .lb-more { display: inline-flex; }
  .lotbar .edbtns { flex: 1 1 auto; border-left: 0; padding-left: 0; gap: var(--s1); }
  .lotbar .edbtns button, .lotbar .revbar button, .lotbar .revbar .btnlink { min-height: 32px; padding: 0 var(--s2); font-size: 12px; flex: 1; }
  .lotbar .revbar { flex: 0 0 auto; gap: var(--s1); }
  .lotbar:not(.open) .revbar > :not(.pill) { display: none; }
  .lotbar.open { flex-direction: column; align-items: stretch; }
  .lotbar.open .revbar { flex: 1 1 auto; display: flex; flex-wrap: wrap; }
  .lotbar.open .revbar select, .lotbar.open .revbar input { flex: 1 1 100%; min-height: 34px; font-size: 16px; }
  main.wrap:has(.lotbar), .sheetbody:has(.lotbar) { padding-bottom: 110px; }
  body:has(.lotbar) .toast { bottom: 80px; }
}
/* review: a lot's bar is one line (status, comments, ask for changes, approve); the note joins it on an open lot */
.averdict { flex-basis: auto; flex-wrap: nowrap; align-items: center; }
.averdict input { flex: 0 1 260px; min-height: 30px; }
@media (max-width: 760px) { .averdict { flex-basis: 100%; flex-wrap: wrap; } .averdict input { flex: 1 1 100%; } }
/* the lot bar's buttons: line icons alone, in one row (the name is the tooltip, and stays for screen readers); the
   comments button also shows its count. On a phone the lot, its status and who come first, then the icons */
.abtns { display: inline-flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.abtns > :is(button, a) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 34px; height: 32px; padding: 0; }
.abtns > [data-act="comments"] { width: auto; padding: 0 var(--s2); }
.abtns .bi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.abtns .bn { font-weight: 600; }
.abtns .bl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .abar .grow { display: none; }
  .abar .meta { flex-basis: 100%; }
  .abtns { flex: 1 1 100%; }
  .abtns > :is(button, a) { width: 38px; height: 34px; }
  .abtns > [data-act="comments"] { width: auto; }
}

/* ---------- a sale the team does not analyse */
.skipline { margin: var(--s2) 0 0; }
.skipbar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; padding: var(--s3) var(--s4);
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--muted); }
.skipbar b { color: var(--fg); }
.skipbar button { margin-left: auto; }
.srwrap { position: relative; }
.srwrap.skipped .salerow, .salerow-lite.skipped > :not(.srskip) { opacity: .55; }
/* the switch sits at the row's right edge, under the date, outside the link */
.srwrap .srskip { position: absolute; right: var(--s4); bottom: var(--s2); }
.srwrap:has(.srskip) .salerow { padding-bottom: calc(var(--s3) + 28px); }
.salerow-lite { grid-template-columns: 150px minmax(0, 1fr) auto auto; }
@media (max-width: 760px) { .salerow-lite { grid-template-columns: 1fr; } .salerow-lite .srskip { justify-self: start; } }
.pill.previewtag { display: inline-block; margin-top: var(--s1); background: var(--warn-soft); color: var(--warn); white-space: normal; }
.stp.off { opacity: .45; cursor: not-allowed; }
.stp.off:hover { border-color: var(--line); }

/* ---------- Today: the month calendar (grid on wide screens, a list of days on a phone) */
.calnav { display: inline-flex; align-items: center; gap: var(--s2); }
.calnav b { min-width: 130px; text-align: center; color: var(--fg); }
/* a clear frame and day lines, so the month stands out from the page */
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: var(--r-card);
  overflow: hidden; background: var(--line-strong); gap: 1px; box-shadow: var(--shadow); }
.cwd { background: var(--soft); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--ls-caps); padding: var(--s1) var(--s2); }
.cday { background: var(--panel); min-height: 96px; padding: var(--s1); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cday.pad { background: var(--soft); }
.cday.past { background: var(--soft); }
.cday.past .cchip { opacity: .65; }
.cnum { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); padding: 0 2px; }
.cday.today .cnum { color: var(--on-solid); background: var(--accent-strong); border-radius: var(--r-pill); padding: 0 var(--s2); align-self: flex-start; }
.cchip { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-xs); line-height: 1.3; color: var(--fg);
  text-decoration: none; padding: 2px 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.cchip:hover { border-color: var(--accent); }
.cchip { flex-wrap: wrap; row-gap: 0; border-left-width: 3px; }
.cchip.christies { border-left-color: var(--house-christies); }
.cchip.sothebys { border-left-color: var(--house-sothebys); }
.cchip.phillips { border-left-color: var(--house-phillips); }
.cchip.bonhams { border-left-color: var(--house-bonhams); }
.cchip .ch { font-weight: 700; flex: none; }
.cchip.christies .ch { color: var(--house-christies); }
.cchip.sothebys .ch { color: var(--house-sothebys); }
.cchip.phillips .ch { color: var(--house-phillips); }
.cchip.bonhams .ch { color: var(--house-bonhams); }
.cchip .ck { flex: none; color: var(--muted); }
.cchip .ct { flex: 1 1 100%; order: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cchip .cn { margin-left: auto; flex: none; font-weight: 700; color: var(--accent-ink); }
.cchip.notyet { border-style: dashed; }
.cchip.skipped { opacity: .5; }
.cchip.legend { display: inline-flex; padding: 0 4px; }
.cdot { flex: none; width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); }
.cdot.christies { background: var(--house-christies); }
.cdot.sothebys { background: var(--house-sothebys); }
.cdot.phillips { background: var(--house-phillips); }
.cdot.bonhams { background: var(--house-bonhams); }
.callegend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
.calagenda { display: none; }
@media (max-width: 760px) {
  .calgrid { display: none; }
  .calagenda { display: grid; gap: var(--s2); }
  .cagday { display: grid; gap: var(--s1); padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
  .cagday.today { border-color: var(--accent); }
  .cagday.past { opacity: .7; }
  .cagday .cchip { font-size: var(--fs-sm); padding: var(--s1) var(--s2); }
  .calnav b { min-width: 0; }
}

/* ---------- seen before in the Auction Genie: the strip at the top of a lot, and the badge on the sale page */
.seen { background: var(--soft); border: 1px solid var(--line-strong); border-left: 6px solid var(--line-strong); border-radius: var(--r-card);
  padding: var(--s4) var(--s5); display: grid; gap: var(--s2); box-shadow: var(--shadow); }
/* the same stone was at auction before: the strip has to be seen first */
.seen.sure { background: var(--accent-soft); border: 2px solid var(--accent-strong); border-left-width: 8px; box-shadow: var(--shadow-raised); }
.seenhead { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: space-between; color: var(--fg); }
.seenhead > b { font-size: var(--fs-lg); }
.seenhead > b::before { content: '↺ '; color: var(--accent-strong); }
.seen.sure .seenhead > b { font-size: var(--fs-xl); color: var(--accent-ink); }
.seen.sure #seen-open { background: var(--accent-strong); color: var(--on-solid); border-color: var(--accent-strong); }
.seensub { margin: var(--s1) 0 0; }
.seenrow { display: grid; grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.seenrow.maybe { color: var(--muted); }
.seenrow .sd { font-weight: 600; }
.seenrow .remark, .seenart .remark { color: var(--remark); }
.seenlinks { display: flex; gap: var(--s3); justify-content: flex-end; white-space: nowrap; }
.seenall { display: grid; gap: var(--s3); margin-top: var(--s2); }
.seenart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); }
.seenart h3 { margin: 0 0 var(--s1); font-size: var(--fs-md); }
.seentext { white-space: pre-line; line-height: 1.6; }
/* which pictures go into the article: a switch under each picture; GIA certificates are tagged */
.housepics { align-items: flex-start; }
.hpwrap { position: relative; flex: none; display: grid; gap: 3px; justify-items: center; width: 92px; }
.hpwrap .hp { width: 92px !important; height: 72px !important; }
.giatag { position: absolute; top: 3px; left: 3px; padding: 0 5px; border-radius: var(--r-sm); background: var(--info); color: var(--on-solid);
  font: 700 var(--fs-xs)/1.6 var(--body); letter-spacing: .04em; pointer-events: none; }
.artpick { width: 100%; padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--panel);
  color: var(--muted); font: 600 var(--fs-xs) var(--body); cursor: pointer; white-space: nowrap; }
.artpick.on { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-solid); }
.thumb .artpick { margin-top: var(--s1); }
/* the full editor: how the lot's result is written (pc or total) */
.pricebasis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.pricebasis .pblabel { font-weight: 600; }
.pricebasis small { flex-basis: 100%; color: var(--muted); }
/* the sale's hero, under the article button: one photo for the whole sale */
.heropick { width: 100%; margin-top: 3px; padding: 2px 4px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); background: var(--panel);
  font: 600 var(--fs-xs) var(--body); color: var(--muted); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.heropick:hover { color: var(--fg); border-style: solid; }
.heropick.on { border: 1px solid var(--accent); background: var(--accent); color: var(--on-solid); }

/* Visual assets: the two choices under the title, as two even rows (label, then a switch of the same width) */
.vamodes { display: grid; gap: var(--s2); margin: var(--s2) 0 var(--s3); padding: var(--s3); background: var(--soft);
  border: 1px solid var(--line); border-radius: var(--r-card); }
.moderow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3); align-items: center; }
.moderow[hidden] { display: none; }
.moderow > span { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.moderow .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.moderow .seg button { width: 100%; }
@media (max-width: 760px) { .moderow { grid-template-columns: 1fr; gap: var(--s1); } }
#remarks-box { display: grid; gap: var(--s1); }
.sgremark { display: grid; gap: 2px; margin-top: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--remark); }
.sgremark input { font-weight: 500; }
/* "For the article": a description for each stone of a lot of several */
.descstones { display: grid; gap: var(--s1); }
.descstones[hidden] { display: none; }
.descstones .dshead { font-weight: 600; }
.descstones .dshead small { font-weight: 400; color: var(--muted); }
.descstone { margin: 0; padding: var(--s2) var(--s3); background: var(--soft); border-radius: var(--r-control); }
.seennone { margin: 0; padding: var(--s3) var(--s4); background: var(--info-soft); border: 1px solid var(--info); border-left: 6px solid var(--info);
  border-radius: var(--r-card); color: var(--info); font-size: var(--fs-md); font-weight: 600; }
.pill.seenpill { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; border: 1px solid var(--accent); }
@media (max-width: 760px) {
  .seenrow { grid-template-columns: 1fr auto; }
  .seenrow > :nth-child(n+3) { grid-column: 1 / -1; }
}

/* ---------- the sale's five steps (the fifth is Results) */
.stepper:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .stepper:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .stepper:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Results: one card per auctiongenies record */
.genie { display: grid; gap: var(--s3); }
.grec { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-card);
  padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
.grec.ready { border-left-color: var(--ok); }
.grec.check { border-left-color: var(--warn); }
.grec.missing { border-left-color: var(--bad); }
.grec.out { opacity: .6; }
.grhead { display: flex; gap: var(--s3); align-items: center; }
.grhead .gacts { margin-left: auto; flex: none; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.gwhy.done { color: var(--muted); text-decoration: line-through; }
.gchecked { margin: 0; color: var(--ok); font-size: var(--fs-sm); font-weight: 600; }
.gpic { flex: none; width: 56px; height: 56px; object-fit: contain; background: var(--photo-bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
.grtitle { min-width: 0; }
.gpicbtn { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-sm); }
.gpicbtn:hover .gpic { border-color: var(--accent); }

/* a picture shown large (shell.js showPictures) */
.picbox { border: 0; padding: 0; background: none; max-width: 96vw; max-height: 94vh; overflow: visible; }
.picbox::backdrop { background: var(--media-bg); opacity: .85; }
.picbox img { display: block; max-width: 92vw; max-height: 88vh; object-fit: contain; background: var(--photo-bg); border-radius: var(--r-card); }
.picbox .pbx, .picbox .pbn { position: fixed; border: 0; border-radius: var(--r-pill); background: var(--photo-bg); color: var(--topbar);
  font: 600 var(--fs-lg) var(--body); width: 40px; height: 40px; cursor: pointer; }
.picbox .pbx { top: var(--s4); right: var(--s4); }
.picbox .pbn { top: 50%; transform: translateY(-50%); font-size: 26px; }
.picbox .prev { left: var(--s4); }
.picbox .next { right: var(--s4); }
.picbox .pbc { position: fixed; bottom: var(--s4); left: 50%; transform: translateX(-50%); color: var(--on-topbar-strong); font: 600 var(--fs-sm) var(--body); }
.grtitle .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.res-sold, .pill.gs-ready { background: var(--ok-soft); color: var(--ok); }
.pill.res-unsold, .pill.res-withdrawn, .pill.res-open, .pill.gs-out { background: var(--soft); color: var(--muted); }
.pill.gs-check { background: var(--warn-soft); color: var(--warn); }
.pill.gs-missing { background: var(--bad-soft); color: var(--bad); }
.pill.gs-pushed { background: var(--info-soft); color: var(--info); }
.pill.gs-pushed.live, .pushrow.live { background: var(--ok-soft); color: var(--ok); }
.pushes { display: grid; gap: var(--s1); }
.cpnew[hidden] { display: none; }   /* a new comment needs selected words first */
/* the bottom bar of a lot: what happened across the top, then one row of every action, the review ones (send,
   approve) on the left and Cancel / Save on the right, together */
.lotbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.lotbar .revbar { display: contents; }
.lotbar .revbar .rvtop { grid-column: 1 / -1; }
.lotbar .revbar .rvacts { grid-column: 1; }
.lotbar .edbtns { grid-column: 2; }
/* the lot's review bar: what happened on one line, the actions on the next, so nothing jumps around */
.revbar { display: grid; gap: var(--s2); }
.revbar .rvtop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); min-width: 0; }
.revbar .rvtop .meta { min-width: 0; }
/* History: a small button at the top of the lot; the card opens under it */
.rvhistwrap.top { position: relative; align-self: start; }
.rvhistwrap.top:empty { display: none; }
.rvhistcard { position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 40; width: min(420px, 86vw); max-height: 50vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-modal);
  padding: var(--s3) var(--s4); font-size: var(--fs-sm); }
.rvhistcard[hidden] { display: none; }
.rvhistcard ol { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.rvhistcard li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.rvhistcard .hwhen { color: var(--muted); font-variant-numeric: tabular-nums; }
.rvhistcard .hnote { display: block; color: var(--muted); font-style: italic; }
.revbar .rvacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.revbar .rvacts select, .revbar .rvacts .cselect { min-width: 200px; }
@media (max-width: 760px) {
  .lotbar { grid-template-columns: minmax(0, 1fr); }
  .lotbar.open .revbar { display: contents; }
  .lotbar .revbar .rvacts, .lotbar .edbtns { grid-column: 1; }
  .lotbar:not(.open) .revbar > .rvtop { display: flex; }
  .lotbar:not(.open) .revbar .rvtop > :not(.pill), .lotbar:not(.open) .revbar .rvacts { display: none; }
  .revbar .rvacts > * { flex: 1 1 calc(50% - var(--s2)); }
}
/* "Read as the article": the lots one after another, without the work around them */
body.readmode #article .abar, body.readmode .stepfilter, body.readmode .tabpanel[data-panel="article"] > .hint,
body.readmode .selcomment, body.readmode #scp { display: none !important; }
body.readmode #article mark { background: none; color: inherit; }
body.readmode #read-article { background: var(--accent-strong); color: var(--on-solid); border-color: var(--accent-strong); }
.pgbox { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r-card); }
.pgbox .pgtext { font-size: var(--fs-sm); color: var(--fg); }
.pgbar { height: 8px; background: var(--soft); border-radius: var(--r-pill); overflow: hidden; }
.pgbar i { display: block; height: 100%; background: var(--accent-strong); border-radius: var(--r-pill); transition: width var(--t) var(--ease); }
.pushrow { margin: 0; padding: var(--s2) var(--s3); background: var(--info-soft); color: var(--info); border-radius: var(--r-card); font-weight: 600; font-size: var(--fs-sm); }
.gwhy { margin: 0; padding-left: var(--s5); color: var(--warn); font-size: var(--fs-sm); }
.gfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s2) var(--s3); }
.gf { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--muted); }
.gf input, .gf select { font: 500 var(--fs-md) var(--body); font-variant-numeric: tabular-nums; min-height: 32px; padding: 0 var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); color: var(--fg); min-width: 0; }
.gf input:focus, .gf select:focus { border-color: var(--accent); outline: none; }
.gf.ed span { color: var(--accent-ink); font-weight: 600; }
.gf.ed input, .gf.ed select { border-color: var(--accent); }
.gdesc { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .grec { padding: var(--s3); }
  .gfields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gf input, .gf select { font-size: 16px; }  /* no zoom on focus */
}

/* ---------- comments on words while editing
   The analysis box is see-through over a copy of its text (.hlback) in which the commented words are marked. The
   field styles above gave it a background, which hid the marks, and a different padding, which moved them off their
   words: both are set here for the box and its copy alike. */
.card .hlwrap textarea, .card .hlwrap textarea:focus, .aedit .hlwrap textarea, .aedit .hlwrap textarea:focus { background: transparent; padding: var(--s2) var(--s3); }
.hlwrap .hlback { padding: var(--s2) var(--s3); }
.hlwrap:focus-within .hlback { background: var(--panel); }

/* ---------- the comments panel beside the lot, not over it
   In the sheet the panel is a column of its own at the sheet's right (sale.js moves it there), and the sheet widens
   by its width; on the lot page the bottom bar keeps clear of it. Below 1100px it stays a full overlay. */
@media (min-width: 1101px) {
  .sheetbox:has(> .cpanel:not([hidden])) { display: grid; grid-template: auto auto minmax(0, 1fr) / minmax(0, 1fr) min(400px, 30vw); width: min(1580px, 100vw); }
  .sheetbox:has(> .cpanel:not([hidden])) > .sheethead, .sheetbox:has(> .cpanel:not([hidden])) > .lotprog { grid-column: 1 / -1; }
  .sheetbox > .cpanel { position: static; width: auto; min-height: 0; z-index: auto; box-shadow: none; animation: none; }
  .sheetbox:has(> .cpanel:not([hidden])) .sheetbody .lotbar { right: calc(min(400px, 30vw) + var(--s4)); width: min(1140px, calc(100vw - min(400px, 30vw) - 32px)); }
  body.cp-open:not(.sheet-open) .lotbar { left: auto; right: calc(400px + var(--s4)); transform: none; width: min(1200px, calc(100vw - 400px - 32px)); }
}
body.sheet-open.cp-open main.wrap { margin: 0 auto; }   /* the sale behind the sheet does not make room for it */

/* Full edit: a stone's True Face-Up, edited in place from its ✎ */
.tfuline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tfuline .pencil { padding: 0 var(--s2); min-height: 0; line-height: 1.6; }
.tfuline .tfuinput { flex: 1 1 260px; min-width: 0; font: 400 var(--fs-md) var(--body); color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-bottom-color: var(--accent); padding: var(--s1) var(--s2); }
.tfuline .tfuinput:focus { outline: none; box-shadow: 0 2px 0 -1px var(--accent); }

/* the whole lot bar folds or opens the lot; its buttons and links keep their own pointer */
.abar { cursor: pointer; }
.abar :is(a, button, input, select, label) { cursor: revert; }

/* a comment's reply row: the reply field takes the whole width, its buttons sit under it at the right, so none is
   cut off in a narrow panel */
.cact { flex-wrap: wrap; justify-content: flex-end; }
.cact .creply { flex: 1 1 100%; }

/* phone: a comment panel opened from words or a part is a pop-up by them, above or below (tags.js sets its top or
   bottom and its height); the whole width less a margin, its list scrolling inside it */
@media (max-width: 760px) {
  .cpanel.pop, #scp.pop { left: var(--s2); right: var(--s2); width: auto; height: auto; border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--shadow-modal); overflow: hidden; }
  .cpanel.pop .cplist { min-height: 0; }
}

/* phone: the lot's icons start at the left */
@media (max-width: 760px) { .abtns { justify-content: flex-start; } }

/* the analysis box and the copy behind it (where the commented words are marked) must set their text exactly alike,
   or the marks slide off their words: the edit-field styles above give the box its own size, line height and
   padding (15px / 1.6, 16px on a phone), so both are set here once, above every one of those rules */
.hlwrap > .hlback, .hlwrap > textarea, .apreview.aedit .hlwrap > textarea, .card .hlwrap > textarea {
  font: 400 var(--fs-md)/1.65 var(--body); letter-spacing: 0; padding: var(--s2) var(--s3); border-width: 1px; border-style: solid; }
@media (max-width: 760px) {
  .hlwrap > .hlback, .hlwrap > textarea, .apreview.aedit .hlwrap > textarea, .card .hlwrap > textarea { font-size: 16px; }
}

/* phone, editing: the one comment the cursor stands on, in a small pop-up above its words (no header, no new comment) */
@media (max-width: 760px) {
  #scp.pop.one .cphead { padding: var(--s1) var(--s2); }
  #scp.pop.one .cphead b, #scp.pop.one #scp-sub { display: none; }
  #scp.pop.one .cplist { padding: var(--s2); }
  #scp.pop.one .cth .cton { display: none; }
}

/* Choose lots: $ results only (not analysed; its result goes to the Genie), in blue between ✓ and ✕ */
.vx button.res:hover, .vx button.res.on { background: var(--info); border-color: var(--info); color: var(--on-solid); }
.bulkbar .res { background: var(--info); border-color: var(--info); color: var(--on-solid); }
.lot.results { background: color-mix(in srgb, var(--info-soft) 60%, transparent); }

/* ---------- WP view: the article as it will go to WordPress (sale page) */
dialog.wpdlg { width: min(1100px, calc(100vw - 32px)); height: calc(100dvh - 48px); max-height: none; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--panel); color: var(--fg); box-shadow: var(--shadow-modal); }
dialog.wpdlg[open] { display: flex; flex-direction: column; }
.wphead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.wphead b { font: 600 var(--fs-lg) var(--body); color: var(--head); }
.wphead .wpall { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.wpbody { flex: 1; min-height: 0; overflow: auto; padding: var(--s4); }
.wpbody > [data-wppane="preview"] { height: 100%; }
#wp-frame { width: 100%; height: 100%; min-height: 70dvh; border: 1px solid var(--line); background: #fff; }
.wpfields { border-collapse: collapse; width: 100%; }
.wpfields th { text-align: left; vertical-align: top; width: 160px; padding: var(--s2) var(--s3) var(--s2) 0; color: var(--muted); font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.wpfields td { padding: var(--s2) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.wpbody h3 { font: 600 var(--fs-md) var(--body); color: var(--head); margin: var(--s4) 0 var(--s1); }
.wpmiss { margin: 0; padding-left: var(--s4); color: var(--warn); }
.wpcopy { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s2); }
#wp-html { margin: 0; padding: var(--s3); background: var(--raised); border: 1px solid var(--line); font: 12px/1.5 ui-monospace, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  dialog.wpdlg { width: 100vw; height: 100dvh; border-radius: 0; }
  .wphead .wpall { margin-left: 0; }
  .wpfields th { width: 110px; }
}
.wpsent, .wpdone { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--ok); background: var(--ok-soft); border-radius: var(--r-card); }
.wpdone .meta { margin: var(--s1) 0 0; }

/* the article as a whole, in every step: Read as the article and WP view, under the steps */
.articletools { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; margin: calc(-1 * var(--s2)) 0 0; }

/* ---------- the lot editor, friendlier
   On top while scrolling: how far the lot is (a bar that fills, a chip per part, ✓ when it is in place; a chip jumps
   to its card). A part that just got done glows on its chip and its card; a saved field says so for a moment; the
   stone cards say what the stone is; with everything in place a small "ready" note comes in. */
.lotprog { position: sticky; top: var(--top, 60px); z-index: 6; display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); margin: 0 0 var(--s3); background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.sheetbody .lotprog { top: 0; }
.lpbar { grid-column: 1 / -1; height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.lpbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--ok));
  transition: width var(--t-slow) var(--ease); }
.lpcount { font: 600 var(--fs-sm) var(--body); color: var(--muted); white-space: nowrap; }
.lotprog.complete .lpcount { color: var(--ok); }
.lpchips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }
.lpchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--raised); color: var(--muted); font: 600 var(--fs-xs) var(--body); text-decoration: none;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast) var(--ease); }
.lpchip:hover { color: var(--head); border-color: var(--accent); transform: translateY(-1px); }
.lpchip i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--line-strong);
  font-style: normal; font-size: 10px; line-height: 1; }
.lpchip.done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.lpchip.done i { border: 0; background: var(--ok); color: var(--on-solid); }
.lpchip.pop { animation: chippop .6s var(--ease); }
@keyframes chippop { 0% { transform: scale(1); } 35% { transform: scale(1.12); box-shadow: 0 0 0 6px var(--ok-soft); } 100% { transform: scale(1); } }

/* a card whose part just got done, or that a chip jumped to */
.work .card { scroll-margin-top: 140px; transition: box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease); }
.work .card:hover { box-shadow: var(--shadow-raised); }
.work .card.justdone { animation: cardglow 1.4s var(--ease); }
@keyframes cardglow { 0% { box-shadow: 0 0 0 0 var(--ok-soft); border-color: var(--ok); } 40% { box-shadow: 0 0 0 8px var(--ok-soft); border-color: var(--ok); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* "✓ Saved" by the field itself, for a moment */
.work label.fsaved, .work .fsaved { position: relative; }
.work .fsaved::after { content: '✓ Saved'; position: absolute; top: 0; right: 0; padding: 0 6px; border-radius: var(--r-pill); background: var(--ok-soft);
  color: var(--ok); font: 600 10px/16px var(--body); letter-spacing: 0; text-transform: none; animation: savedin 1.6s var(--ease) forwards; pointer-events: none; }
@keyframes savedin { 0% { opacity: 0; transform: translateY(3px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* the stones: a head that says what the stone is, and a green edge once it is fully described and fetched */
.stone { border-radius: var(--r-lg); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.stone.complete { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--ok); }
.sttitle { display: inline-flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.stsum { font: 500 var(--fs-sm) var(--body); color: var(--muted); }
.stone.complete .stsum::before { content: '✓ '; color: var(--ok); font-weight: 700; }

/* every part in place: the note comes in once, with a little bounce */
.lotready { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
  border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  background: linear-gradient(100deg, var(--ok-soft), color-mix(in srgb, var(--accent-soft) 70%, var(--ok-soft))); color: var(--fg); }
.lotready[hidden] { display: none; }
.lotready .lrburst { font-size: 22px; }
.lotready button { margin-left: auto; }
.lotready.arrive { animation: readyin .7s var(--ease); }
.lotready.arrive .lrburst { display: inline-block; animation: burst 1s var(--ease); }
@keyframes readyin { 0% { opacity: 0; transform: translateY(-8px) scale(.98); } 60% { opacity: 1; transform: translateY(2px); } 100% { transform: none; } }
@keyframes burst { 0% { transform: scale(.4) rotate(-20deg); } 50% { transform: scale(1.35) rotate(10deg); } 100% { transform: none; } }

@media (max-width: 760px) {
  .lotprog { grid-template-columns: 1fr; padding: var(--s2); }
  .lpchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .lpchip { flex: none; }
  .lotready button { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lpchip.pop, .work .card.justdone, .lotready.arrive, .lotready.arrive .lrburst, .work .fsaved::after { animation: none; }
  .lpbar i { transition: none; }
}

/* in the side window the progress strip is part of the window's head (sale.js moves it under the "Full editor"
   title, out of the scrolling), edge to edge: always there, from the first moment */
.sheetbox > .lotprog { position: static; flex: none; margin: 0; border-radius: 0; border-width: 0 0 1px; backdrop-filter: none;
  background: var(--panel); box-shadow: 0 6px 14px -10px rgba(13, 25, 73, .25); z-index: 1; }
.sheetbody .work .card { scroll-margin-top: var(--s4); }   /* the strip is outside the scrolling now */

/* the photos card was set static (app.css .media), so its 💬 button left the card for the window's corner, over
   Close: the card holds its own button again */
section.media.commentable { position: relative; }

/* the estimate in dollars: the rate it was turned at, on its own line under it */
.fxrate { display: block; }

/* the comments panel comes in with a light slide from the right (a column in the side window too); on a phone, as a
   pop-up by the words, it fades up instead. It runs each time the panel shows (it was hidden until then) */
.cpanel:not([hidden]) { animation: cpin var(--t-slow) var(--ease); }
.sheetbox > .cpanel:not([hidden]) { animation: cpcol var(--t-slow) var(--ease); }
.cpanel.pop:not([hidden]) { animation: cppop var(--t) var(--ease); }
@keyframes cpin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpcol { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes cppop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cpanel:not([hidden]), .sheetbox > .cpanel:not([hidden]), .cpanel.pop:not([hidden]) { animation: none; } }

/* the comments icon (window.CICON, the cicon() macro): line drawn, sized and coloured by the text it sits in */
.ci { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.22em; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.cbtn .ci { width: 14px; height: 14px; vertical-align: -2px; }
.cbtn { gap: 4px; }
.saletoc .ci { width: 12px; height: 12px; vertical-align: -1px; color: var(--warn); }

/* ...and it goes the way it came: a short slide out to the right (a fade down on a phone) */
.cpanel.closing { animation: cpout var(--t) var(--ease) forwards; pointer-events: none; }
.cpanel.pop.closing { animation: cppopout var(--t-fast) var(--ease) forwards; }
@keyframes cpout { to { transform: translateX(24px); opacity: 0; } }
@keyframes cppopout { to { transform: translateY(6px) scale(.98); opacity: 0; } }
.sheetbox > .cpanel.closing { animation: cpout var(--t) var(--ease) forwards; }   /* outranks the column's opening rule */
.wppulled { margin: 0 0 var(--s2); padding-left: var(--s4); color: var(--accent-ink); }

/* Full edit: $ (results only, no analysis), a quiet square beside Cancel; blue, as $ in Choose lots */
.edbtns .ed-res { min-width: 38px; font-weight: 700; }
.edbtns .ed-res:hover { background: var(--info); border-color: var(--info); color: var(--on-solid); }

/* "analyse" in Choose lots: a magnifying glass over a diamond (aicon(), window.AICON), drawn like the other icons */
.ai { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.22em; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.vx button .ai { width: 22px; height: 22px; vertical-align: middle; }
.seg .ai, .bulkbar .ai { margin-right: 4px; }

/* the icons' tooltip (tags.js): a small navy bubble with a short text and an arrow to the icon; it fades in */
/* a short tip stays on one line (max-content); a longer one wraps inside 280px instead of running out of its box */
.tip { position: fixed; z-index: 1200; width: max-content; max-width: 280px; padding: 5px 10px; border-radius: var(--r-control); background: var(--fg); color: var(--bg);
  font: 600 var(--fs-xs)/1.35 var(--body); letter-spacing: .01em; white-space: normal; overflow-wrap: break-word; pointer-events: none; opacity: 0;
  box-shadow: var(--shadow-modal); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.tip.above { transform: translateY(3px); }
.tip.below { transform: translateY(-3px); }
.tip.show { opacity: 1; transform: none; }
.tip::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 5px); border: 5px solid transparent; }
.tip.above::after { top: 100%; border-top-color: var(--fg); }
.tip.below::after { bottom: 100%; border-bottom-color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* ---------- the comments panel, friendlier (both panels; the threads come from tags.js commentThread / commentList) */
.cpanel .cphead { padding: var(--s3) var(--s4); align-items: center; }
.cptitle { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.cptitle > .ci { width: 22px; height: 22px; color: var(--accent); }
.cptitle b { font: 600 var(--fs-lg) var(--body); color: var(--head); }
.cpsub { margin-top: 2px; font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.copen, .cclear { display: inline-flex; padding: 1px 8px; border-radius: var(--r-pill); font: 600 var(--fs-xs)/1.5 var(--body); }
.copen { background: var(--warn-soft); color: var(--warn); }
.cclear { background: var(--ok-soft); color: var(--ok); }
.cpclose { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.cpanel .cplist { padding: var(--s3); gap: var(--s3); background: var(--bg); }

/* a thread: who and when on top, the words it is on, the comment, the replies, then reply / resolve */
.cpanel .cth { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.cpanel .cth.focus { border-color: var(--mark-line); box-shadow: 0 0 0 3px var(--mark-soft); }
.cpanel .cth.resolved { background: var(--raised); box-shadow: none; }
.cpanel .cth.resolved .ctext, .cpanel .cth.resolved .cquote { opacity: .75; }
.cthhead { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.cwho { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.cwho b { font: 600 var(--fs-sm) var(--body); color: var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cwho time { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.cav { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; }
.cav.ini { display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font: 700 10px var(--body); }
.cdone { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 5px; border-radius: var(--r-pill); background: var(--ok-soft);
  color: var(--ok); font: 600 var(--fs-xs)/1.6 var(--body); white-space: nowrap; }
.cdone .ci { width: 14px; height: 14px; }
.cpanel .cton { justify-self: start; font: 600 var(--fs-xs) var(--body); color: var(--accent-ink); text-decoration: none; padding: 1px 8px;
  border-radius: var(--r-pill); background: var(--accent-soft); }
.cpanel .cquote { display: block; width: 100%; text-align: left; margin: 0; padding: var(--s1) var(--s3); border: 0; border-left: 3px solid var(--mark-line);
  border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--mark-soft); color: var(--fg); font: italic 400 var(--fs-sm)/1.5 var(--body);
  cursor: pointer; }
.cpanel .cquote:hover { background: var(--mark); }
.cpanel .cquote.static { cursor: default; }
.cpanel .cquote.lost { text-decoration: line-through; border-left-color: var(--line-strong); opacity: .7; }
.ctext { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--fs-md)/1.55 var(--body); color: var(--fg); }
.creplies { display: grid; gap: var(--s2); margin-left: var(--s3); padding-left: var(--s3); border-left: 2px solid var(--line); }
.creply1 { display: grid; gap: 2px; }
.creply1 .cav { width: 20px; height: 20px; font-size: 9px; }
.creply1 .ctext { font-size: var(--fs-sm); }

/* reply in a rounded field with its send arrow inside; Resolve and the bin under it at the right */
.cpanel .cact { display: grid; gap: var(--s2); justify-content: stretch; }
.creplybox { position: relative; display: flex; }
.cpanel .cact .creply { flex: 1; min-height: 36px; padding: 0 40px 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--raised); font: 400 var(--fs-sm) var(--body); }
.cpanel .cact .creply:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); outline: none; }
.csend { position: absolute; right: 3px; top: 3px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--accent);
  color: var(--on-solid); display: grid; place-items: center; cursor: pointer; transition: transform var(--t-fast) var(--ease); }
.csend:hover { transform: scale(1.06); }
.csend .ci { width: 15px; height: 15px; }
.cbtns { display: flex; justify-content: flex-end; gap: var(--s2); }
.cbtns .ghost { display: inline-flex; align-items: center; gap: 5px; }
.cbtns .cresolve:hover { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.cbtns .cdel { padding-inline: var(--s2); }
.cbtns .cdel:hover { color: var(--bad); border-color: var(--bad); }

/* the resolved ones, folded under the open ones */
.cresolved { display: grid; gap: var(--s3); }
.cresolved > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0;
  font: 600 var(--fs-xs) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.cresolved > summary::-webkit-details-marker { display: none; }
.cresolved > summary::before { content: '▸'; transition: transform var(--t-fast) var(--ease); }
.cresolved[open] > summary::before { transform: rotate(90deg); }
.cresolved:not([open]) > .cth { display: none; }

/* nothing here yet */
.cempty { display: grid; justify-items: center; gap: var(--s1); padding: var(--s6) var(--s4); text-align: center; color: var(--muted); }
.cempty > .ci { width: 34px; height: 34px; color: var(--accent); opacity: .8; margin-bottom: var(--s1); }
.cempty b { color: var(--head); font: 600 var(--fs-md) var(--body); }
.cempty span { font-size: var(--fs-sm); max-width: 260px; }
.cempty.small { padding: var(--s3); }

/* the new comment: what it is on, the words (✕ drops them), the box, then Comment */
.cpanel .cpnew { gap: var(--s2); padding: var(--s3) var(--s4); background: var(--panel); border-top: 1px solid var(--line); }
.cpon { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font: 600 var(--fs-xs) var(--body); color: var(--accent-ink); }
.cpx { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); cursor: pointer; }
.cpx[hidden] { display: none; }
.cpx:hover { color: var(--bad); border-color: var(--bad); }
.cpanel .cpnew textarea { min-height: 84px; border-radius: var(--r-card); resize: vertical; }
.cpfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.cpfoot .meta { font-size: var(--fs-xs); }
@media (max-width: 760px) { .cpfoot .meta { display: none; } .cpanel .cpnew .primary { width: 100%; } .cpfoot { justify-content: stretch; } }

/* Settings > WhatsApp: the connect form and the test message, one field per line */
.waform, .watest { display: grid; gap: var(--s2); max-width: 640px; }
.waform input, .watest input, .watest select { width: 100%; }
.waform .primary, .watest .primary { justify-self: start; }
.waparams { display: grid; gap: var(--s2); }
.wabody { margin: 0; padding: var(--s2) var(--s3); border-left: 3px solid var(--ok); background: var(--ok-soft); white-space: pre-wrap; }

/* the workspace's dropdowns (combobox.js): a long list gets a search field that stays on top while the list scrolls;
   the option under the mouse is highlighted like the one the arrow keys reach; the menu opens with a short drop */
.cmenu { display: flex; flex-direction: column; max-height: 340px; overflow: hidden; padding: 0; }
.cmenu .cmlist { overflow-y: auto; padding: 4px; min-height: 0; overscroll-behavior: contain; }
.cmenu .cmsw { flex: none; padding: 6px; border-bottom: 1px solid var(--line); background: var(--panel); }
.cmenu .cmsw[hidden] { display: none; }
.cmenu .cms { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--raised);
  font: 400 var(--fs-sm) var(--body); color: var(--fg); }
.cmenu .cms:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel); }
.cmenu [role=option] { transition: background var(--t-fast) var(--ease); }
.cmenu [role=option].on { background: var(--hover); }
.cmenu.opening { animation: cmdrop var(--t) var(--ease); transform-origin: top; }
@keyframes cmdrop { from { opacity: 0; transform: translateY(-4px) scaleY(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cmenu.opening { animation: none; } }
@media (max-width: 760px) { .cmenu .cms { font-size: 16px; } }

/* a table's pages: Newer / 1-10 of N / Older */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); margin-top: var(--s2); }
.pager:empty { display: none; }

/* the sale's messages to the customers (broadcast.js): Announce on Publish, Live results on Results */
.bcbox { margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.bcbox:empty { display: none; }
#live.bcbox, #announce.bcbox { margin: 0 0 var(--s4); }
/* the live watch page (broadcast.js initLiveProbe) */
.lpnow { margin-bottom: var(--s3); }
.lpcur { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border: 2px solid var(--accent); border-radius: var(--r-card); background: var(--panel); }
.lpcur img { width: 120px; height: 120px; object-fit: contain; background: #fff; border-radius: var(--r-control); }
.lpno { font: 600 var(--fs-md) var(--head); }
.lpcounts { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.lptable td { vertical-align: middle; }
.lptable .lptitle { max-width: 380px; font-size: var(--fs-sm); }
.lpthumb { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; }
.lptable tr.lpon td { background: var(--accent-soft); }
.lptable tr.lpmine td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lptable .lpsw { margin: 0; }
.switch:has(input:disabled) { cursor: not-allowed; opacity: .55; }   /* already sent: the lot can no longer be taken off */
/* the head, the lot on the block and the counts stay under the top bar while the lots scroll */
.lpstick { position: sticky; top: var(--top, 60px); z-index: 6; margin: 0 calc(-1 * var(--s3)); padding: var(--s2) var(--s3) var(--s1);
  background: var(--bg); border-bottom: 1px solid var(--line); }
.lpstick .pagehead { margin-bottom: var(--s2); }
.lpstick .lpcounts { margin-bottom: 0; }
.lpstick .lpcur img { width: 72px; height: 72px; }
/* the head: the house's logo, the title and its "i"; the "i" opens how the house is followed, in a modal */
/* the logo sits in the title's line at the title's height, so the head is no taller than before (.lptitlerow: .lphead
   is the WhatsApp panel's head, further down) */
.lptitlerow { display: flex; align-items: center; gap: var(--s2); flex-wrap: nowrap; min-width: 0; }
.lptitlerow h1 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lptitlerow .logo .nm { display: none; }
.lptitlerow .plate { height: 24px; padding: 0 6px; }
.lptitlerow .plate img { max-height: 13px; }
.lptitlerow .plate.christies, .lptitlerow .plate.sothebys { width: 24px; padding: 0; }
.lptitlerow .plate.christies img, .lptitlerow .plate.sothebys img { max-height: 24px; max-width: 24px; border-radius: 4px; }
.lptitlerow .plate.phillips img { width: 64px; height: 9px; }
.lptitlerow .info { margin: 0; flex: none; width: 18px; height: 18px; font-size: 11px; line-height: 16px; vertical-align: 0; }
/* the "i": four cards, each with its own mark and colour (what runs, the backup, the checks, what goes out) */
dialog.lphowdlg { width: min(760px, calc(100vw - 32px)); padding: var(--s4); }
.lphowhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.lphowhead h2 { margin: 0; }
.lphow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s3); font-size: var(--fs-sm); }
.lphowcard { --c: var(--accent); padding: var(--s3); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r-card); background: var(--bg); }
.lphowcard.backup { --c: #5b7fa6; }
.lphowcard.checks { --c: var(--ok); }
.lphowcard.sends { --c: #25a35a; }
.lphowcard h3 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font: 600 var(--fs-sm) var(--body); color: var(--fg); }
.lphowcard h3 .ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.lphowcard h3 svg { width: 16px; height: 16px; }
.lphowcard ul { margin: 0; padding: 0; list-style: none; }
.lphowcard li { position: relative; padding-inline-start: 14px; line-height: 1.45; }
.lphowcard li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.lphowcard li + li { margin-top: 6px; }
/* the arrows at the bottom left (the WhatsApp phone opens on the right): down to the lot on the block, up to the top */
.lpjump { position: fixed; left: var(--s4); bottom: var(--s4); z-index: 7; display: flex; flex-direction: column; gap: var(--s2); }
.lpjump button { width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 18px; line-height: 1;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer; }
.lpjump button:hover { border-color: var(--accent); color: var(--accent-ink); }
.lpjump button[hidden] { display: none; }
/* the page keeps its full width: the WhatsApp phone opens over it, it does not push it */
.lp { display: block; }
.lpwa { position: sticky; top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); }
.lpwa h3 { margin: 0 0 var(--s1); font-family: var(--head); }
.lpwacard { display: flex; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.lpwacard img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 4px; flex: none; }
.lpwastats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.lpwastats b { color: var(--fg); }
.lpopen { display: block; margin: var(--s2) 0; }
/* the side: the scan's clock, then a phone with the messages as they arrive */
/* the live watch's panel head: a state line, three clock tiles, our lots; its foot: the two timings, editable */
.waside.lpwide { width: min(560px, 100vw); }
/* the phone in the middle of the space between the head and the foot, both ways (auto margins: when the panel is
   too short it still starts at the top and scrolls, instead of being cut) */
#waside.lpwide .wsbody .iphone { margin: auto; }
/* the live watch's panel head: the state with its live line, the run of the sale, our lots */
.lphead { display: grid; gap: var(--s3); margin-top: var(--s2); }
.lpstate { display: flex; align-items: flex-start; gap: var(--s3); }
.lpstate b { display: block; font: 600 var(--fs-lg) var(--display); color: var(--head); line-height: 1.2; }
.lptags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); margin-left: auto; }
.lpdot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--line-strong); }
.lp-on .lpdot { background: var(--ok); animation: lppulse 1.8s var(--ease) infinite; }
.lp-sleep .lpdot { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
@keyframes lppulse { 0% { box-shadow: 0 0 0 0 rgba(31, 140, 90, .45); } 100% { box-shadow: 0 0 0 10px rgba(31, 140, 90, 0); } }
@media (prefers-reduced-motion: reduce) { .lp-on .lpdot { animation: none; } }
.lptimer { display: flex; flex-wrap: wrap; gap: 2px var(--s3); margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.lptimer span { color: var(--fg); }
/* the run of the sale: four stops on one line, filled as they pass, the next one ringed */
.lprun { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--s1) 0 0; padding: 0; }
.lprun li { position: relative; display: grid; gap: 2px; padding-top: 22px; padding-right: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.lprun li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line); }
.lprun li:last-child::before { right: auto; width: 14px; }
.lprun li.done::before { background: var(--accent); }
.lprundot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line-strong); }
.lprun li.done .lprundot { background: var(--accent); box-shadow: none; }
.lprun li.now .lprundot { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft); }
.lprun li.bad .lprundot { background: var(--bad); box-shadow: none; }
.lprun b { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); line-height: 1.25; }
.lprun li:not(.done):not(.now) b { color: var(--muted); }
.lprun span { font-variant-numeric: tabular-nums; }
.lpours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.lpours > span:first-child { margin-right: var(--s1); color: var(--muted); }
.lpours em { color: var(--muted); }
/* the panel's foot: the two timings that can change, each with the words the customer reads and a stepper */
#waside.lpwide .wsfoot { padding: 0; }
.lpsets { display: grid; }
.lpset { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); }
.lpset + .lpset { border-top: 1px solid var(--line); }
.lpsettext { display: grid; gap: 3px; min-width: 0; flex: 1; font-size: var(--fs-sm); }
.lpsettext b { color: var(--fg); }
.lpsettext q { quotes: '“' '”'; color: var(--fg); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpsettext .meta, .lpsettext .lpok, .lpsettext .bad { font-size: var(--fs-xs); }
.lpok { color: var(--ok); font-weight: 600; }
.lpsetctl { flex: none; display: grid; justify-items: end; gap: 3px; }
.lpstep { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--panel); }
.lpstep button { width: 30px; border: 0; background: none; color: var(--fg); font: 600 var(--fs-md) var(--body); cursor: pointer; }
.lpstep button:hover { background: var(--hover); }
.lpstep button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lpstep input { width: 2.8em; padding: 4px 0; border: 0; border-inline: 1px solid var(--line); background: none; box-shadow: none;
  font: 600 var(--fs-md) var(--body); text-align: center; font-variant-numeric: tabular-nums; }
.lpstep input:focus { outline: none; background: var(--accent-soft); }
.lpunit { font-size: var(--fs-xs); color: var(--muted); }
.lpkind { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.lpconv { flex-basis: 100%; color: var(--fg); }
/* the running chat in the side panel: messages from the top, each with WATI's counts under it */
#ws-chat:has(.lpmsgstats) { justify-content: flex-start; }
.lpmsgstats { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 3px 4px var(--s2) 32px; font-size: 10.5px; color: var(--wa-sub); }
.lpmsgstats .lpwastats { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; font-size: 10.5px; }
.lpmsgstats .bad { color: var(--bad); }
.lpbefore { width: 3.2em; padding: 1px 4px; text-align: center; }
.lpwastats .bad b, .lpwastats .bad { color: var(--bad); }
@media (max-width: 1000px) { .lp { grid-template-columns: 1fr; } .lpwa { position: static; } }
/* tabs inside a step (Publish: the article in WordPress / Tell the customers) */
/* sideways scroll only on a narrow screen; no vertical scroll (the tabs' -1px underline overlap made one) */
.subtabs { display: flex; gap: var(--s1); margin: 0 0 var(--s3); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs button { flex: none; padding: var(--s2) var(--s3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none;
  font: 600 var(--fs-sm) var(--body); color: var(--muted); cursor: pointer; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.subtabs button:hover { color: var(--fg); }
.subtabs button[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.subtabs .tc { margin-left: var(--s1); font-weight: 400; color: var(--muted); }
.settabs { margin-bottom: var(--s4); }
.setpane[hidden] { display: none; }
.setpane > .settings, .setpane > section + section, .setpane > fieldset + section { margin-top: 0; }
.setpane { display: grid; gap: var(--s4); }
.setpane > .settings { display: grid; gap: var(--s4); border: 0; padding: 0; margin: 0; min-width: 0; }
.bchead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.bchead h3 { margin: 0; font-family: var(--head); }
.bchead .switch { margin: 0 0 0 auto; }
.bcrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.bcrow > b { min-width: 110px; }
.bcact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-left: auto; }
.bcmail { display: grid; gap: 2px; padding: var(--s2) 0 var(--s2) var(--s4); }
.bccheck { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.bclink { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bclink code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--muted); }
.bcmsgs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s2) 0 var(--s3); }
.bcnext { display: inline-flex; align-items: center; gap: var(--s1); }
.bcnext input { width: 3.5em; text-align: center; }
.bclots td { vertical-align: middle; }
/* where the sale stands: the lot on the block, and how far our next lot is */
.bcblock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s3); }
.bcblock > div { display: grid; gap: 1px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--bg); }
.bcblock > div.now { border-color: var(--accent); background: var(--accent-soft); }
.bcblock small { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bcblock b { font: 600 var(--fs-md) var(--head); }
.bcblock span { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcall { margin: 0 0 var(--s2); }
.bclots tr.bcnotours td { color: var(--muted); font-size: var(--fs-sm); }
.bclots .bctitle { max-width: 320px; color: var(--muted); font-size: var(--fs-sm); }
.bclots select, .bclots input { padding: 4px 6px; }
.bcpaid { display: inline-flex; gap: var(--s1); margin: 0 var(--s1); }
.bcpaid[hidden] { display: none; }
.bcpaid input { width: 8em; }
.bcpaid input.cur { width: 3.6em; text-transform: uppercase; }
.bclog { margin-top: var(--s2); font-size: var(--fs-sm); }
.bclog summary { cursor: pointer; color: var(--muted); }
.bclog div { padding: 2px 0; }
#bc-views select { min-width: 240px; }
/* Settings > Zoho CRM: the e-mail segments, Open and Closed side by side */
.segcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 1100px) { .segcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.linkish { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.segcol { display: grid; gap: 4px; align-content: start; }
.segcol > b { margin-bottom: var(--s1); }
.segfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.segadd { display: inline-flex; gap: var(--s1); margin-left: auto; }
.segadd input { width: 11em; }
@media (max-width: 760px) { .segcols { grid-template-columns: 1fr; } .segadd { margin-left: 0; } }
@media (max-width: 760px) {
  .bcbox { padding: var(--s3); }
  .bcact { margin-left: 0; }
  .bclots .bctitle { display: none; }
  .bcpaid input { font-size: 16px; }
}

/* a WhatsApp message before it is sent: a side panel with an iPhone showing it as the customer will (broadcast.js).
   The phone's colours are WhatsApp's and Apple's own, kept here as the phone's local values */
.waside { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0, 0, 0, .14);
  transform: translateX(100%); transition: transform var(--t) var(--ease); }
.waside.open { transform: none; }
.wshead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.wshead b { font-family: var(--head); font-size: var(--fs-md); }
.wsbody { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: var(--s4) var(--s3); background: var(--soft); }
.wsfoot { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.wsact { display: flex; justify-content: flex-end; gap: var(--s2); }
.wsfail { margin: var(--s4) var(--s3); }

.iphone { --wa-bg: #f3eee6; --wa-bar: #f6f5f3; --wa-btn: #1b8a5a; --wa-mic: #1daa61; --wa-in: #ffffff; --wa-ink: #111b21; --wa-sub: #6b6b6b; --wa-link: #027eb5;
  flex: none; width: 320px; height: 660px; padding: 11px; border-radius: 54px; background: #1b1b1d;
  box-shadow: 0 0 0 2px #3a3a3c, 0 24px 50px rgba(0, 0, 0, .28), inset 0 0 0 1px #000; }
.ipscreen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 43px; background: var(--wa-bg);
  font: 400 14px/1.35 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; color: var(--wa-ink); }
.ipstatus { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 26px 0 30px;
  background: var(--wa-bar); font-weight: 600; font-size: 14px; }
.ipisland { position: absolute; left: 50%; top: 10px; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; }
.ipicons { display: inline-flex; align-items: center; gap: 5px; }
.ipicons svg { fill: var(--wa-ink); }
.ipbatt { position: relative; width: 24px; height: 11px; border: 1.5px solid var(--wa-ink); border-radius: 3.5px; opacity: .9; }
.ipbatt::after { content: ''; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: var(--wa-ink); }
.ipbatt i { position: absolute; inset: 1.5px; right: 5px; border-radius: 1.5px; background: var(--wa-ink); }
.wabar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px 6px; background: var(--wa-bar); border-bottom: 1px solid #dadada; }
.wabk { font-size: 30px; line-height: 1; color: var(--wa-link); padding: 0 4px; }
.waav { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #1b2140; }
.wanm { display: grid; line-height: 1.2; }
.wanm b { font-size: 15px; }
.wanm small { font-size: 11.5px; color: var(--wa-sub); }
.wavf { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #25d366; color: #fff; font-size: 9px; vertical-align: 1px; }
.wachat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 8px 12px;
  background-color: var(--wa-bg); background-image: radial-gradient(rgba(120, 100, 70, .07) 1.2px, transparent 1.4px), radial-gradient(rgba(120, 100, 70, .05) 1px, transparent 1.2px);
  background-size: 22px 22px, 15px 15px; background-position: 0 0, 7px 9px; }
.waday { width: max-content; margin: 2px auto 10px; padding: 4px 10px; border-radius: 8px; background: #fff; color: var(--wa-sub); font-size: 11.5px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.waload { text-align: center; color: var(--wa-sub); }
/* the message as it really arrives (iOS): a wide white bubble with large corners and its tail at the bottom right,
   the round grey forward button beside it, the picture on white, the time under the text, the green link button */
.warow { display: flex; align-items: center; gap: 6px; animation: wain var(--t) var(--ease); }
.wafwd { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(140, 140, 140, .55); }
.wamsg { position: relative; flex: 1; min-width: 0; border-radius: 16px 16px 4px 16px; background: var(--wa-in); box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
.wamsg::after { content: ''; position: absolute; right: -6px; bottom: 0; width: 12px; height: 12px; background: var(--wa-in);
  clip-path: polygon(0 0, 0 100%, 100% 100%); }
.waimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; max-height: 250px; margin: 0 auto; padding: 8px 8px 0; }
.waimg img { max-width: 100%; max-height: 100%; object-fit: contain; }
.watxt { padding: 8px 12px 6px; white-space: pre-wrap; word-wrap: break-word; font-size: 15px; line-height: 1.3; }
.watxt code { font: 13px ui-monospace, Consolas, monospace; }
.wafoot { margin-top: 4px; color: var(--wa-sub); font-size: 12.5px; }
.watime { margin-top: 3px; color: var(--wa-sub); font-size: 11.5px; }
.wabtn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px 10px; border-top: 1px solid #e6e6e6;
  color: var(--wa-btn); font-size: 15.5px; text-decoration: none; }
.wabtn:hover { background: #f7f7f7; border-radius: 0 0 4px 16px; }
.wainput { display: flex; align-items: center; gap: 12px; padding: 7px 10px 26px; background: var(--wa-bar); color: #111; }
.wafield { flex: 1; display: flex; align-items: center; justify-content: flex-end; height: 32px; padding: 0 9px; border: 1px solid #cfcfcf;
  border-radius: 18px; background: #fff; }
.wamic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wa-mic); }
.iphome { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: #111; }
/* an e-mail in the side panel: wider, an inbox line, the message in a frame as wide as a mail app shows it */
.waside.wide { width: min(720px, 100vw); }
/* Settings > Integrations: one card per service, its state on the right; the card opens its settings in the side panel */
.integs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.integ { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); color: inherit; font: inherit;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.integ:hover, .integ:focus-visible { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.integic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--soft); font-weight: 700; }
.integtx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.integtx small { color: var(--muted); }
.integ .pill { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integbody { flex: 1; overflow-y: auto; padding: var(--s3); background: var(--soft); }
.integbody > .card { margin: 0; }
.integbody > .card > h2:first-child { display: none; }   /* the panel's own head already names it */
.integbody .segcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* four columns do not fit the panel */
.integgroup { margin: var(--s4) 0 var(--s2); }
.integgroup:first-of-type { margin-top: var(--s2); }
.zoviews .switch { margin: 0; }
/* Scans > Health: one line per check, worst first */
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.hlagain { margin-left: auto; }
.hlist { list-style: none; margin: 0; padding: 0; display: grid; }
.hlist li { display: grid; grid-template-columns: 74px 150px minmax(0, 1fr); align-items: baseline; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.hlist li:first-child { border-top: 0; }
.hlist li .pill { justify-self: start; }
@media (max-width: 760px) { .hlist li { grid-template-columns: 74px minmax(0, 1fr); } .hlist li .meta { grid-column: 2; } }
.bctiming { display: grid; gap: var(--s2); }
.bctiming input[type=number] { width: 5.5em; margin: 0 var(--s1); text-align: center; }
/* the segment lists: toggles in a tighter, smaller row than a settings switch */
.segcol .switch, .segpicklist .switch { gap: var(--s2); padding: 3px 0; font-size: var(--fs-sm) !important; line-height: 1.3; }
.mailbody { padding: var(--s3); }
.mailwin { display: flex; flex-direction: column; width: 100%; max-width: 660px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.mailtop { padding: var(--s3); border-bottom: 1px solid var(--line); }
.mailtop:empty { display: none; }
.mailfrom { display: flex; gap: var(--s2); align-items: center; }
.mailav { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #1b2140; color: #fff; font-weight: 700; }
.mailsubj { margin-top: 2px; font-weight: 600; }
.mailwin iframe { flex: 1; width: 100%; min-height: 70vh; border: 0; background: #fff; }
/* the sale's e-mail campaigns: one card each, name / state / actions on top, its segments as chips */
.bcmails { display: grid; gap: var(--s2); margin: var(--s1) 0 var(--s2); }
.bcmails .bcmail { display: grid; gap: 6px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
.bcmailtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.bcmailhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.bcmails .bcmail .bcact { margin: 0; }
.bcstats { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: var(--fs-sm); color: var(--muted); }
.bcstats b { color: var(--fg); }
.segline { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.seglbl { margin-right: var(--s1); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.segchip { padding: 2px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); white-space: nowrap; }
/* how many a segment's e-mail reaches (≈ N), the why on hover */
.segn { margin-inline-start: 4px; color: var(--muted); font-variant-numeric: tabular-nums; cursor: help; }
.segn.none { opacity: .7; }
.segedit { margin-left: auto; }
/* the checklist under the chips: small, three or four columns */
.segpick { padding: var(--s2) var(--s3); border-radius: var(--r-control); background: var(--panel); border: 1px dashed var(--line-strong); }
.segpick[hidden] { display: none; }
.segpick > .meta { margin: 0 0 var(--s2); }
.segpicklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3px var(--s3); font-size: var(--fs-sm); }
.segpick .linkish { margin-top: var(--s2); font-size: var(--fs-sm); }
@keyframes wain { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .waside { transition: none; } .wamsg { animation: none; } }
@media (max-width: 760px) {
  .waside { width: 100vw; }
  .iphone { width: 300px; height: 610px; }
}