/* ---- the brand's fonts (Option A): Bodoni Moda for titles and headline money, Jost for everything else -------------------
   Both are served by this site (public/fonts, Latin letters, SIL Open Font License); nothing loads from Google. Bodoni Moda is
   one variable file with optical sizes (its strokes thicken at small sizes) and weights 400–900; Jost is variable, 300–700.
   The rules for using them are in "Refinish Studio fonts - rules.md" on the Desktop. */
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  /* ---- design tokens: the "Navy coat" palette (navy blazer, camel coat, ivory) ------------------- */
  /* Every text/background pair below is AA (4.5:1) or better; muted is for secondary text only. Camel as a fill carries
     dark ink (5.7:1); camel as a line or a chart bar uses --gold-strong (4.9:1 on ivory). */
  --bg: #f8f4ee;            /* ivory */
  --panel: #fffdf9;
  --sunken: #f0e9de;
  --ink: #1f2430;           /* navy-black */
  --ink-2: #444a57;
  --muted: #5f6472;
  --line: #e5dccd;
  --line-strong: #cdbfaa;
  --edge: #9a8a72;          /* the outline of anything you can tap: 3:1 on ivory and panel (WCAG 1.4.11) */
  --sel-bg: var(--accent-soft); /* a chosen tile's fill */
  --knob: var(--panel);     /* a switch's knob */
  --accent: #1c2a3f;        /* navy: main buttons, chosen tabs, links */
  --accent-hover: #2a3d5c;
  --accent-soft: #e4e8ef;
  --accent-ink: #f8f4ee;
  --gold: #b98b5e;          /* camel: the one call to action a screen leads with, highlights */
  --gold-hover: #a97c51;
  --gold-ink: #1e1914;
  --gold-strong: #8a6238;   /* camel as text, a line or a chart bar */
  --gold-soft: #eadbc8;
  --good: #2e6b4e;          /* money made (a gain, a refund); red is money lost */
  --good-soft: #e3efe8;
  --own-bar: #1c2a3f;       /* charts: your own numbers (navy) */
  --mkt-bar: #8a6238;       /* charts: the local market (camel) */
  --out-bar: #9a9081;       /* charts: money out (one quiet gray) */
  --mkt-ink: #6b4a28;
  --mkt-soft: #eadbc8;
  --hero: #1c2a3f;          /* the navy summary cards */
  --hero-ink: #f5eee6;
  --hero-sub: #c9b79c;
  --hero-good: #9fd8b8;    /* money made, on navy */
  --hero-bad: #ffb3a8;     /* a loss or act now, on navy */
  --hero-mid: #f2c46b;     /* waiting a while (31–60 days), on navy */
  --warn: #8a5300;
  --warn-soft: #fbefd9;
  --danger: #a4262c;
  --danger-soft: #fbeaea;
  --focus: #2f6fdb;
  --overlay: rgba(14, 20, 30, .5);
  --scrim: rgba(14, 20, 30, .72);   /* behind white text and buttons on a photo */
  /* edges that must be seen (WCAG 1.4.11, 3:1 or more): a box you type in, the ring round a color dot, a red button's text */
  --field-border: #8c8273;
  --dot-ring: rgba(31, 36, 48, .55);
  --danger-ink: #ffffff;
  --bar-fill: #eadbc8;
  /* type scale; the serif is for money and titles (built into iPhones and Macs: nothing to download) */
  --t-xs: 12px; --t-sm: 13px; --t: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 24px;
  --font: "Jost", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;   /* raw prompts and code only */
  --serif-w: 400;                                       /* the serif's weight: one step heavier at night so it doesn't fade */
  --caps: .14em;            /* letter spacing of the small capital labels */
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* shape and depth: squarer corners, tailored rather than bubbly */
  --r-sm: 4px; --r: 6px; --r-lg: 10px;
  --shadow: 0 1px 2px rgba(31, 36, 48, .05), 0 2px 8px rgba(31, 36, 48, .05);
  --shadow-lg: 0 12px 40px rgba(14, 20, 30, .24);
  /* every button, field and tab is at least 44px, so fingers and mice both hit them */
  --tap: 44px;
  --top-h: 68px; /* (the top bar's height on a computer: the logo, name and section tabs) */
  --toast-action: #d2b48c; /* (Undo on a toast: the toast is dark in light mode) */
  --star-on: #ffd166;       /* (a starred photo's star, over a photo or a card: the same in both modes) */
  --hero-field-ink: #1f2430; --hero-field-bg: #fffdf9; /* (a menu opened from the navy band: the system draws it light) */
  --eh-seg0: #f5eee6; --eh-seg1: #c9a27a; --eh-seg2: #8fa0ba; --eh-seg3: #56667f; /* (the spending bar on the navy band) */
  --overlay-bg: rgba(14, 20, 30, .82); --overlay-bg-hover: rgba(14, 20, 30, .95); --overlay-ink: #ffffff; --overlay-shadow: rgba(0, 0, 0, .35); /* (chips over photos: the same in light and dark) */
  /* the little room pictures in step 5 (Background): the same in light and dark, like a photo */
  --ill-old: #b9ad9b; --ill-old-line: #8f8370; --ill-old-mark: #7d725f; --ill-wall: #e9dfcf; --ill-floor: #c8ab86; --ill-plant: #7c9a74;
  --ill-win: #f7f3ea; --ill-win-line: #cdbfaa; --ill-paper: #ffffff; --ill-shadow: rgba(28, 42, 63, .18); --ill-piece: #1c2a3f; --ill-piece-line: rgba(255, 255, 255, .55); --ill-gold: #b98b5e;
  --ill-back: #e9cfc6; --ill-back-2: #dfc2b8; --ill-dark-wall: #3b4043; --ill-dark-floor: #5b4838; --ill-glow: rgba(255, 210, 140, .5); --ill-plaster: #efe7dc;
  --hw-mark-dark: #23201d; --hw-mark-silver: #c9ccd0; --hw-mark-white: #f6f4ef; --hw-mark-edge: rgba(255, 255, 255, .75); /* (hardware marks while dragging, like a photo: the same in light and dark) */
  /* (the finishes as little dots in the Hardware picker: like the metal, the same in light and dark) */
  --fin-brass: #c6a258; --fin-antique: #85663a; --fin-champagne: #cfb68c; --fin-black: #1e1e1f; --fin-gunmetal: #4b4e53; --fin-nickel: #b4b7ba;
  --fin-chrome: #e2e5e9; --fin-bronze: #3a2a20; --fin-copper: #b6714c; --fin-wood: #c8a374; --fin-walnut: #5a3d2b; --fin-leather: #a5764a;
  --fin-painted: #9aa5ad; --fin-white: #f3f1ec; --fin-ceramic: #fafaf8; --fin-glass: #dce6ec; --fin-sheen: rgba(255, 255, 255, .5); --fin-edge: rgba(0, 0, 0, .28);
  --ill-oak: #dcc39f; --ill-art: #c58d6c; --ill-siding: #f3f0e9; --ill-siding-line: #d3cabc; --ill-porch: #a9aba8; --ill-rattan: #c39a62;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-h: 64px;
  /* older names, so nothing breaks while screens are moved over */
  --chip: var(--sunken);
  --radius: var(--r);
  --ok: var(--good);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e141e;          /* night navy */
    --panel: #161e2b;
    --sunken: #1c2535;
    --ink: #f1e9df;
    --ink-2: #d4cbbe;
    --muted: #a69e92;
    --line: #283244;
    --line-strong: #3a4659;
    --edge: #5d6a80;
    --sel-bg: #1f2a3c;      /* (a lifted navy, not a brown wash) */
    --knob: #d4cbbe;
    --accent: #d2b48c;      /* camel leads at night: navy would vanish into the background */
    --accent-hover: #ddc29e;
    --accent-soft: #2e2a25;
    --accent-ink: #1e1914;
    --gold: #c9a27a;
    --gold-hover: #d6b18b;
    --gold-ink: #1e1914;
    --gold-strong: #d2b48c;
    --gold-soft: #3a3026;
    --serif-w: 500;
    --good: #7fc4a0;
    --good-soft: #17332a;
    --own-bar: #8fa9cf;
    --mkt-bar: #d2b48c;
    --out-bar: #6f7a8c;
    --mkt-ink: #d2b48c;
    --mkt-soft: #3a3026;
    --hero: #223250;
    --hero-ink: #f1e9df;
    --hero-sub: #c9b79c;
    --hero-good: #9fd8b8;
    --hero-bad: #ffb3a8;
    --hero-mid: #f2c46b;
    --warn: #f2b45a;
    --warn-soft: #3b2c10;
    --danger: #ff8d7d;
    --danger-soft: #3d1c18;
    --focus: #7aa7ff;
    --overlay: rgba(0, 0, 0, .72);
    --toast-action: #6b4a28; /* (the toast is light in dark mode) */
    --scrim: rgba(5, 8, 14, .78);
    --field-border: #6e7787;
    --dot-ring: rgba(241, 233, 223, .6);
    --danger-ink: #2b0d09;
    --bar-fill: #3a3026;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t)/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { margin: 0 0 var(--s2); line-height: 1.25; }
a { color: var(--accent); }
img { max-width: 100%; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-weight: 400; font-size: var(--t-xs); }
.error { color: var(--danger); margin: var(--s2) 0 0; min-height: 1em; }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skips a { position: absolute; left: var(--s2); top: -100px; z-index: 100; background: var(--ink); color: var(--bg); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-weight: 650; }
.skips a:focus { top: var(--s2); }
#resultsCol:focus, #actionBar:focus { outline: none; }

/* One visible focus ring everywhere (keyboard users only). */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- buttons: one shape, a few jobs ----------------------------------------- */
.btn {
  font: inherit; font-size: var(--t-sm); font-weight: 650; line-height: 1.2;
  min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--edge); background: var(--panel); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  transition: background-color .12s, border-color .12s, transform .06s;
}
.btn:hover { border-color: var(--muted); background: var(--sunken); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary-ghost { color: var(--accent); border-color: var(--accent); }
.btn.quiet { background: var(--sunken); border-color: transparent; }
.btn.quiet:hover { background: var(--line); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.lg { min-height: 48px; font-size: var(--t-md); padding: 0 var(--s5); border-radius: 10px; }
.btn.small { font-size: var(--t-xs); padding: 0 var(--s3); min-height: var(--tap); }
@media (max-width: 760px), (pointer: coarse) { .btn.small { min-height: var(--tap); } }
/* (no double-tap zoom on anything you tap: on an iPhone, two quick taps on a button zoomed the page in) */
button, .btn, [role="button"], a, label, select, summary { touch-action: manipulation; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: default; pointer-events: none; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent-ink); border-top-color: transparent; animation: spin .8s linear infinite; }
.btn:not(.primary).loading::after { border-color: var(--ink); border-top-color: transparent; }
.btn.on-stock, .btn.star.on { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.iconbtn { width: var(--tap); height: var(--tap); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 18px; cursor: pointer; display: inline-grid; place-items: center; padding: 0; text-decoration: none; }
.iconbtn:hover { background: var(--sunken); }
.iconbtn svg { width: 22px; height: 22px; }

/* ---- fields ---------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=date], input:not([type]), select, textarea {
  font: inherit; font-size: var(--t); min-height: var(--tap); padding: 0 var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--field-border); background: var(--panel); color: inherit; width: 100%;
}
textarea { padding: var(--s2) var(--s3); min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
input[aria-invalid=true] { border-color: var(--danger); }
/* 16px stops iPhones zooming in when a box is tapped */
@media (max-width: 760px), (pointer: coarse) {
  input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=date], input:not([type]), select, textarea { font-size: 16px; }
}
input[type=color] { min-height: var(--tap); min-width: var(--tap); padding: 2px; border: 1px solid var(--field-border); border-radius: var(--r-sm); background: var(--panel); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 20px; height: 20px; margin: 0; flex: none; }
.check { display: flex; flex-direction: row; gap: var(--s3); align-items: flex-start; cursor: pointer; min-height: var(--tap); padding: calc((var(--tap) - 20px) / 2) 0; }
.check input { margin-top: 0; }
label > select, label > input, label > textarea { margin-top: var(--s1); }
.field { display: flex; flex-direction: column; gap: var(--s1); font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
.field > .hint { font-weight: 400; }

/* ---- segmented control, chips, badges --------------------------------------- */
.seg { display: inline-flex; background: var(--sunken); border-radius: 10px; padding: 2px; gap: 2px; max-width: 100%; }
.seg button { font: inherit; font-size: var(--t-sm); font-weight: 650; min-height: var(--tap); padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.seg button[aria-pressed="true"] :is(.hint, .ab-cost, .n) { color: inherit; }
.seg.fill { display: flex; }
.seg.fill button { flex: 1; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0; }
.tabs button, .chip {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--t-sm); font-weight: 650; min-height: var(--tap);
  padding: 0 var(--s3); border-radius: 999px; border: 1px solid transparent; background: var(--sunken); color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.tabs button:hover, .chip:hover { background: var(--line); }
.tabs button[aria-pressed="true"], .chip.on, .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.chip .n, .tabs .n { font-weight: 500; }
.scrollrow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: var(--s2) calc(var(--s4) * -1); padding: 0 var(--s4); }
.scrollrow::-webkit-scrollbar { display: none; }
.scrollrow > * { flex: none; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); white-space: nowrap; letter-spacing: .02em; }
.badge.final { background: var(--accent-soft); color: var(--accent); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.pill { font-size: var(--t-xs); padding: 4px 10px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); font-weight: 600; white-space: nowrap; display: inline-block; }
/* A short thing that must never break over two lines: an amount, a date, a place. */
.nw { white-space: nowrap; }
.er-date, .er-amt { white-space: nowrap; }
.pill.ok { color: var(--accent); background: var(--accent-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); flex: none; display: inline-block; }

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 1s linear infinite; margin: 0 auto var(--s2); }
.spinner.small { width: 12px; height: 12px; border-width: 2px; margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 0; }

/* ---- cards and panels --------------------------------------------------------- */
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.panel { padding: var(--s4); }
.label-caps { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---- spinners and skeletons ----------------------------------------------------- */
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton { background: linear-gradient(100deg, var(--sunken) 30%, var(--line) 50%, var(--sunken) 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }






/* ===== app shell: top bar, sections, tab bar ===================================== */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s3);
  min-height: var(--top-h); padding: calc(var(--s2) + var(--safe-t)) var(--s5) var(--s2); background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); min-width: var(--tap); font-weight: 800; font-size: var(--t-md); color: var(--ink); text-decoration: none; }
.logo { width: 38px; height: 38px; flex: none; background: url('/icons/logo.svg?v=ladder1') center / contain no-repeat; }
.switcher {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 12px 5px 5px; border: 1px solid var(--edge); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; max-width: 320px; min-width: 0; text-align: left;
}
.switcher:hover { background: var(--sunken); }
.switcher img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; background: var(--sunken); flex: none; }
.switcher .sw-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.switcher b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher small { color: var(--muted); font-size: var(--t-xs); }
.switcher .caret { color: var(--muted); margin-left: auto; }
.view-title { margin: 0; font-size: var(--t-lg); }
.top-start { display: flex; align-items: center; gap: var(--s3); flex: none; width: clamp(300px, 34vw, 520px); min-width: 0; }
.top-start .switcher { flex: 0 1 auto; }
.top-start .brand { flex: none; } .top-start .switcher { min-width: 0; } /* (the name keeps its width; the piece picker shrinks and trims) */
.nav { display: flex; gap: 6px; margin: 0 auto 0 0; }
.nav button { font: inherit; font-size: var(--t-md); font-weight: 650; min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.nav button:hover { background: var(--sunken); }
.nav button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.count:not(:empty) { font-size: var(--t-xs); font-weight: 600; font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); margin-left: 4px; } /* (a quiet count, not a camel alert: nothing here needs doing) */
.top-end { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
.nav + .top-end { margin-left: 0; }
.spend { font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.view { padding: var(--s5); }
#main { outline: none; }

.tabbar { display: none; }
@media (max-width: 760px) {
  .top { padding: calc(var(--s2) + var(--safe-t)) var(--s3) var(--s2); gap: var(--s2); min-height: 56px; }
  .brand-name, .nav, .spend { display: none; }
  .brand { gap: 0; }
  .top-start { flex: 1; width: auto; gap: var(--s2); }
  .switcher, .view-title { flex: 1; min-width: 0; max-width: none; }
  .top-end { margin-left: 0; }
  .view { padding: var(--s3) var(--s4) calc(var(--bar-h) + var(--safe-b) + var(--s5)); }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--bar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--panel); border-top: 1px solid var(--line);
  }
  .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 650; color: var(--muted); cursor: pointer; min-height: var(--bar-h); }
  .tabbar button[aria-pressed="true"] { color: var(--accent); }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar .count { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }
  .typing .tabbar { display: none; }
}
@media (min-width: 761px) and (max-width: 1000px) { .nav button { padding: 0 var(--s3); } }
@media (min-width: 761px) and (max-width: 1199px) { .top .brand-name { display: none; } } /* (the name shows only where it fits beside the piece picker) */
@media (min-width: 1001px) and (max-width: 1150px) { .nav button { padding: 0 13px; } .nav { gap: 4px; } } /* (the bigger tabs still fit beside the name just above tablet width) */

/* ===== sheets and menus: bottom sheets on phones, dropdown panels on a computer ======= */
dialog.drop-panel { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(380px, calc(100vw - 24px)); max-height: min(80vh, 640px); overflow: auto; background: var(--panel); color: var(--ink); }
dialog.drop-panel#piecesDlg { margin: calc(var(--top-h) + var(--safe-t)) auto auto var(--s5); }
dialog.drop-panel#menuDlg { margin: calc(var(--top-h) + var(--safe-t)) var(--s5) auto auto; width: min(300px, calc(100vw - 24px)); }
.sheet-grab { display: none; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto var(--s3); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.sheet-head h2 { margin: 0; font-size: var(--t-lg); }
@media (max-width: 760px) {
  dialog.drop-panel, dialog.drop-panel#piecesDlg, dialog.drop-panel#menuDlg {
    margin: auto 0 0 0; width: 100%; max-width: none; max-height: 86vh; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: var(--s2) var(--s4) calc(var(--s4) + var(--safe-b));
  }
  .sheet-grab { display: block; }
}
dialog form, dialog .stack { gap: var(--s3); }
.projects { display: flex; flex-direction: column; gap: 6px; margin: var(--s3) 0; }
.proj { display: flex; gap: var(--s3); align-items: center; padding: 6px; min-height: 60px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.proj:hover { background: var(--sunken); }
.proj.active { background: var(--accent-soft); border-color: var(--accent); }
.proj img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: var(--sunken); flex: none; }
.proj .name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* the piece list: a search and a sort above short rows (a 48 px photo, the name on one line, a short line under it) */
.pick-tools { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.pick-tools input[type=search] { flex: 1 1 auto; min-width: 0; }
.pick-sort { flex: 0 0 auto; }
.pick-sort select { width: auto; max-width: 150px; min-height: var(--tap); }
.projects { gap: 2px; }
.proj { min-height: 56px; padding: 4px 6px; gap: var(--s2); }
.proj img { width: 44px; height: 44px; }
.proj-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.proj-meta { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.small-pill { padding: 1px 7px; font-size: 11px; }
#projects > [role=listitem] { content-visibility: auto; contain-intrinsic-size: auto 58px; }
#projects .pad { padding: var(--s3) var(--s2); margin: 0; }
.menu-who { display: flex; flex-direction: column; padding: var(--s1) var(--s2) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); }
.menu-who b { font-size: var(--t-md); }
.menu-note { margin: 0 0 var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm); background: var(--sunken); color: var(--ink-2); }
.menu-note.warn { background: var(--warn-soft); color: var(--warn); }
.menu-note.ok { color: var(--muted); }
.menu-items { display: flex; flex-direction: column; }
.menu-item { text-align: left; font: inherit; font-weight: 600; min-height: 48px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; }
.menu-item:hover { background: var(--sunken); }
a.menu-item { display: flex; align-items: center; text-decoration: none; } /* (Privacy and terms: a page of its own) */
#piecesDlg::backdrop, #menuDlg::backdrop { background: var(--overlay); }
/* (on the page, kept in view under the top bar: a message about a tap far down the page was shown at the top, out of sight, 2026-10-27;
   inside an open sheet it stays at the sheet's top, where dialogs.js puts it) */
body > #banner:not(:empty) { position: sticky; top: calc(var(--top-h) + var(--s2)); z-index: 40; }

/* messages */
#banner:not(:empty) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s3) var(--s5) 0; padding: var(--s3) var(--s4); border-radius: var(--r);
  background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--ink);
}
#banner.ok:not(:empty) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (max-width: 760px) { #banner:not(:empty) { margin: var(--s3) var(--s4) 0; } }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--s5) + var(--safe-b)); z-index: 90; display: flex; flex-direction: column; gap: var(--s2); align-items: center; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
@media (max-width: 760px) { #toasts { bottom: calc(var(--bar-h) + var(--safe-b) + 76px); } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-weight: 600; animation: toast-in .18s ease-out; }
.toast .toast-undo { margin-left: auto; font: inherit; font-weight: 700; min-height: var(--tap); padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--toast-action); cursor: pointer; }
/* (a toast is dark in light mode and light in dark mode, so Undo needs its own color in each) */
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
#dropOverlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--overlay); color: #fff; font-size: var(--t-xl); font-weight: 700; pointer-events: none; }
#dropOverlay > div { padding: var(--s6) var(--s6); border: 3px dashed #fff; border-radius: var(--r-lg); }
.empty { text-align: center; padding: var(--s6) var(--s4); max-width: 520px; margin: var(--s6) auto; }

/* ===== the Studio: Make (left) and Results (right) ===================================== */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 600px) { .two { grid-template-columns: 1fr; } }
.studio { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); gap: 0; align-items: start; }
body[data-view="studio"] .view#studioView { padding: 0; }
/* (the empty screen's top margin stays inside the Studio instead of moving the whole section down; when the first piece arrives,
   nothing jumps) */
#studioView, #main { display: flow-root; }
.make { position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.make-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); overscroll-behavior: contain; }
.results-col { padding: var(--s4) var(--s5) var(--s6); min-width: 0; }
.studio-tabs { display: none; }
.step { padding: var(--s3) var(--s4); box-shadow: none; }
.step h3 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: var(--t-md); }
.step h3 .seg { margin-left: auto; }
.num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; flex: none; }
.piece-row { display: flex; gap: var(--s3); align-items: center; }
.photo-btn { flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sunken); cursor: zoom-in; }
.photo-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.piece-row .meta { flex: 1; min-width: 0; }
.piece-row .meta b { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--t-md); }
.piece-row .meta .pm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.piece-row .meta .muted { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (the piece's links under it: Size, Crop, Costs, Piece details; they wrap onto a second line rather than scroll out of sight) */
.links { display: flex; flex-wrap: wrap; gap: 0 var(--s1); margin: var(--s1) 0 0 calc(var(--s2) * -1); }
.links::-webkit-scrollbar { display: none; }
.links.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.links .linkbtn { white-space: nowrap; flex: none; }
.linkbtn { font: inherit; font-size: var(--t-sm); font-weight: 650; color: var(--accent); background: none; border: 0; padding: 0 var(--s2); min-width: var(--tap); min-height: var(--tap); cursor: pointer; border-radius: var(--r-sm); }
.linkbtn:hover { text-decoration: underline; }
.hint-bar { margin-top: var(--s3); display: flex; gap: var(--s3); align-items: center; justify-content: space-between; font-size: var(--t-sm); background: var(--sunken); padding: var(--s2) var(--s3); border-radius: var(--r-sm); }
.size-editor { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.size-editor .hint { margin: 0; }
.dims { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
@media (max-width: 420px) { .dims { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dims input { padding: 0 var(--s2); }

/* colors */
#picked { margin: 0 0 var(--s2); flex-wrap: nowrap; }
.pick-chip { background: var(--accent-soft); color: var(--accent); }
.kind-switch { margin-bottom: var(--s1); }
#families { flex-wrap: nowrap; margin-top: var(--s2); margin-bottom: var(--s2); }
/* The lists row: "Try all my paints" first (one tap, always in view), then the lists, which scroll sideways; a fade and an arrow
   say there are more than fit. */
.tabs-wrap { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; min-width: 0; }
.tabs-wrap #brandTabs { flex: 1 1 auto; min-width: 0; margin: 0; }
#brandTabs.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
#brandTabs.more-right.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.scroll-more { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--edge); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; }
.scroll-more:hover { background: var(--sunken); }
.scroll-more[hidden] { display: none; }
.chip.try-mine { flex: none; min-height: var(--tap); white-space: nowrap; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.chip.try-mine .n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.chip.try-mine { padding: 0 var(--s3); gap: 4px; }
#families:empty { display: none; }
#families button { font-size: var(--t-xs); }
#families button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
#colorSearch { margin-bottom: var(--s2); }
.swatch-scroll { position: relative; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.sw-more { width: 100%; margin-top: var(--s2); }
.swatch-scroll .pad { padding: var(--s3); margin: 0; }
.swatch {
  display: flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s3) 0 var(--s2); min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; text-align: left;
}
.swatch:hover { border-color: var(--muted); }
.swatch .dot { width: 22px; height: 22px; }
.swatch .sw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.swatch .sw-name .hint { font-weight: 400; }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--sel-bg); }
.swatch[aria-pressed="true"]::after { content: '✓'; color: var(--accent); font-weight: 800; margin-left: auto; }
.swatch .have { color: var(--accent); font-weight: 800; font-size: var(--t-xs); }
.swatch .x { color: var(--muted); margin-left: var(--s1); padding: 0 var(--s2); }
#brandNote { margin: var(--s2) 0 0; }
.custom-color { margin-top: var(--s2); }
.custom-color summary { cursor: pointer; color: var(--accent); font-weight: 650; font-size: var(--t-sm); min-height: var(--tap); display: flex; align-items: center; }
.custom { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.custom input[type=text] { flex: 1; min-width: 140px; width: auto; }

/* options */
.summary-row { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 48px; }
.summary-row .what { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-sm); color: var(--ink-2); }
.summary-row .what b { color: var(--ink); font-size: var(--t); }
.summary-row .what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opts-body { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.opt { display: flex; flex-direction: column; gap: var(--s1); }
.opt h4 { margin: 0 0 var(--s1); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.distress-opts { padding-left: 32px; display: flex; flex-direction: column; gap: var(--s2); }
.distress-opts.two { display: grid; }
@media (max-width: 600px) { .distress-opts { padding-left: 0; } }
.marks-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; grid-column: 1 / -1; }
.marks-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.marks-row > span { display: flex; flex-direction: column; gap: var(--s2); }
.marks-row label.check { font-size: var(--t); font-weight: 400; }

/* the action bar: one row (what will be made and what it costs · the quality · Generate) */
.actionbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4);
  background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(14, 20, 30, .07);
}
.ab-q { position: relative; }
.ab-qbtn { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--s3); white-space: nowrap; }
.ab-qbtn .ab-cost { color: var(--muted); }
.ab-pop { position: absolute; bottom: calc(100% + var(--s2)); right: 0; z-index: 50; width: min(260px, calc(100vw - 32px)); padding: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.ab-pop[hidden] { display: none; }
.ab-pop-head { margin: var(--s1) var(--s2) var(--s2); font-weight: 700; font-size: var(--t-sm); }
.seg.col { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.seg.col button { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; padding: var(--s1) var(--s3); text-align: left; }
.seg.col .q-l { display: flex; flex-direction: column; line-height: 1.2; }
.seg.col .q-l .hint { font-weight: 400; font-size: var(--t-xs); }
.seg.col .ab-cost { font-weight: 700; }
.qb-caret { flex: none; }
#generate:disabled, .btn.primary:disabled { opacity: 1; background: var(--sunken); border-color: transparent; color: var(--muted); cursor: not-allowed; } /* (plainly not ready: no outline, so it can't pass for a button you can press) */
.ab-info { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-sm); color: var(--ink-2); }
.ab-info b { font-size: var(--t-md); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-cost { font-weight: 500; }
.ab-msg { grid-column: 1 / -1; margin: 0; font-size: var(--t-sm); color: var(--danger); }
.ab-msg.warn { color: var(--warn); background: var(--warn-soft); padding: var(--s2) var(--s3); border-radius: var(--r-sm); }
.ab-msg:not(.warn):not(.error) { color: var(--ink-2); }

@media (max-width: 1000px) { .studio { grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .studio { display: block; }
  /* (Make / Results scroll away with the page: the bars that stay put are the top bar, the Generate bar and the section tabs) */
  .studio-tabs { display: block; padding: var(--s1) var(--s4); background: var(--bg); }
  /* (a piece with no versions has nothing under Results yet, so the switch is not shown until it does) */
  .studio[data-empty][data-pane="make"] .studio-tabs { display: none; }
  .studio[data-empty][data-pane="make"] .make-scroll { padding-top: 12px; }
  .tabs-wrap { margin: var(--s1) 0; }
  #colorSearch { margin-bottom: var(--s2); }
  /* (the tips line plus its space is exactly the height of the Make / Results switch, 56 px: when the first version arrives one takes
     the other's place and nothing below moves) */
  .make-scroll .firstrun { padding-top: 0; padding-bottom: 0; min-height: var(--tap); }
  /* (the top bar on a phone is one 44 px row: the switcher, add, and the menu) */
  .top { min-height: 0; padding-top: calc(6px + var(--safe-t)); padding-bottom: 6px; }
  .top .switcher { min-height: var(--tap); padding-top: 2px; padding-bottom: 2px; }
  .top .switcher img { width: 34px; height: 34px; }
  #stepColors h3 { margin-bottom: var(--s1); }
  .make { position: static; height: auto; border: 0; background: none; }
  .make-scroll { overflow: visible; padding: 0 var(--s4) calc(var(--ab-h, 140px) + var(--bar-h) + var(--safe-b) + var(--s4)); } /* (the action bar sits above the section tabs, so both are cleared) */
  .actionbar { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-h) + var(--safe-b)); z-index: 35; padding: var(--s2) var(--s4); }
  .typing .actionbar { bottom: 0; }
  .actionbar #generate { padding: 0 var(--s3); }
  .ab-info { font-size: var(--t-xs); }
  .studio[data-pane="results"] .make { display: none; }
  .studio[data-pane="make"] .results-col { display: none; }
  .results-col { padding: var(--s3) var(--s4) calc(var(--bar-h) + var(--safe-b) + var(--s5)); }
  .step { padding: var(--s3); }
}
.how { list-style: none; display: flex; gap: var(--s4); justify-content: center; padding: 0; margin: var(--s4) 0; flex-wrap: wrap; font-weight: 650; }
.how b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 12px; margin-right: 6px; }
.empty-art { font-size: 44px; }

/* ===== results gallery ============================================================ */
.results-head { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.results-head h2 { margin: 0 var(--s2) 0 0; font-size: var(--t-lg); }
.results-head h2 .hint { font-size: var(--t-sm); }
.results-head .tabs { margin: 0; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
.results-head .tabs button.flag:not([aria-pressed="true"]) { color: var(--warn); background: var(--warn-soft); }
.results-actions { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .results-head .tabs { flex-basis: 100%; order: 3; margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); } }
.v { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.v.sel { outline: 3px solid var(--accent); outline-offset: -1px; }
.v-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.v-open:focus-visible { outline-offset: -3px; }
.v .ph { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--sunken); overflow: hidden; }
.v .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Save to Photos, on a card: a solid dark circle with a white ring, so it shows on a white photo (the dark circle) and on a dark one (the
   ring); 36 px on a computer, 44 px where it is tapped. */
.v-star { position: absolute; top: 6px; right: 6px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(14, 20, 30, .82); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.v-star:hover { background: rgba(14, 20, 30, .95); }
/* a card's Before chip (hold to see the original) and Download, in the same dark chip style as the star */
.v-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 10px; border: 2px solid var(--overlay-ink); border-radius: 999px; background: var(--overlay-bg); color: var(--overlay-ink); font: inherit; font-size: var(--t-xs); font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 1px 4px var(--overlay-shadow); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.v-chip:hover { background: var(--overlay-bg-hover); }
.v-before { top: 8px; left: 8px; }
/* (full screen: under the star) */
.v-full { top: 48px; right: 6px; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
@media (max-width: 760px), (pointer: coarse) { .v-full { top: 54px; right: 4px; width: var(--tap); height: var(--tap); } }
.v-dl { top: 48px; right: 8px; width: 32px; padding: 0; }
.v .ph { position: relative; }
.v .ph .ph-before { position: absolute; inset: 0; opacity: 0; transition: opacity .12s; pointer-events: none; }
.v .ph-tag { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: var(--overlay-bg); color: var(--overlay-ink); font-size: var(--t-xs); font-weight: 600; opacity: 0; transition: opacity .12s; pointer-events: none; }
.v.show-before .ph-before, .v.show-before .ph-tag { opacity: 1; }
.v.show-before .v-before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.v .v-open img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .v .ph .ph-before, .v .ph-tag { transition: none; } }
.v-star.on { color: var(--star-on); }
@media (max-width: 760px), (pointer: coarse) { .v-star { width: var(--tap); height: var(--tap); top: 4px; right: 4px; font-size: 20px; } }
.v-pick { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: rgba(14, 20, 30, .5); color: #fff; display: grid; place-items: center; font-weight: 800; pointer-events: none; }
.v-pick.on { background: var(--accent); }
.v .bd { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: 4px; }
.v .nm { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-sm); min-width: 0; }
.v .nm .st-end { margin-left: auto; flex: none; }
.v .nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.v .st { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: var(--t-xs); min-height: 18px; }
.v .st .ok, .ok { color: var(--accent); font-weight: 700; }
.warn { color: var(--warn); font-weight: 700; }
.v.pending .ph, .v.failed .ph { text-align: center; color: var(--muted); font-size: var(--t-sm); font-weight: 600; padding: var(--s3); }
.v .status { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.v .status .err { color: var(--danger); font-weight: 400; font-size: var(--t-xs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.v.failed .bd .row { margin-top: var(--s1); }
.empty-results { grid-column: 1 / -1; text-align: center; padding: var(--s6) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.empty-results h3 { margin: 0; }
.empty-results p { margin: 0; max-width: 360px; }
.only-phone { display: none; }
@media (max-width: 760px) { .only-phone { display: inline-flex; } }

/* ===== version details: side panel / full-screen sheet ================================= */
dialog.detail { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100vw); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.detail[open] { display: flex; flex-direction: column; animation: slide-in .2s ease-out; }
dialog.detail::backdrop { background: var(--overlay); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
@media (max-width: 760px) { dialog.detail { inset: 0; width: 100%; border: 0; } dialog.detail[open] { animation-name: sheet-in; } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
.dt-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: 'title prev next close' 'count prev next close'; align-items: center; column-gap: var(--s2); padding: var(--s3) var(--s4); padding-top: calc(var(--s3) + var(--safe-t)); border-bottom: 1px solid var(--line); }
.dt-head h2 { grid-area: title; margin: 0; min-width: 0; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-lg); outline: none; }
.dt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-count { grid-area: count; white-space: nowrap; }
#dtPrev { grid-area: prev; } #dtNext { grid-area: next; } #dtClose { grid-area: close; }
.dt-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s4); padding-bottom: calc(var(--s5) + var(--safe-b)); display: flex; flex-direction: column; gap: var(--s4); }
.ba { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sunken); touch-action: pan-y; flex: none; --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ba .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.ba .handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #1c1b18; display: grid; place-items: center; font-weight: 800; box-shadow: var(--shadow); }
.ba .tag { position: absolute; bottom: 10px; font-size: 11px; font-weight: 700; background: rgba(14, 20, 30, .75); color: #fff; padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.ba .tag.l { left: 10px; } .ba .tag.r { right: 10px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.dt-meta { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.checkline { font-size: var(--t-sm); background: var(--accent-soft); color: var(--accent); padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-weight: 600; display: flex; flex-direction: column; gap: var(--s2); }
.checkline.ok { flex-direction: row; }
.checkline.warn { background: var(--warn-soft); color: var(--warn); font-weight: 400; }
.checkline.warn b { display: block; }
.checkline.warn ul, .checkline.none ul { margin: 0; padding-left: 18px; }
.checkline.none, .checkline.wait { background: var(--sunken); color: var(--ink-2); font-weight: 500; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.checkline.none summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; align-items: center; width: 100%; }
.dt-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.dt-primary > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.dt-primary .btn { width: 100%; }
.tweak-box { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap input { flex: 1; min-width: 0; }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.ideas .chip { min-height: var(--tap); font-size: var(--t-xs); }
@media (max-width: 760px) { .ideas .chip { min-height: var(--tap); } }
.more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.more-grid .btn, .more-grid .pill { justify-content: flex-start; }
.more-grid .pill.planned { display: inline-flex; align-items: center; min-height: var(--tap); }
.dt-danger { padding-top: var(--s2); border-top: 1px solid var(--line); }
.shop { font-size: var(--t-sm); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 var(--s3); }
.shop summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; min-height: var(--tap); }
.shop ul { margin: 0 0 var(--s2); padding-left: 18px; }
.shop li { margin-bottom: 4px; }
.shop p { margin: 0 0 var(--s2); }
.prompt-details { font-size: var(--t-xs); color: var(--muted); }
.prompt-details summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.prompt-details pre { white-space: pre-wrap; font: 12px/1.5 var(--mono); background: var(--sunken); padding: var(--s3); border-radius: var(--r-sm); margin: 0; }
.have-note { color: var(--accent); }

dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 20px; width: min(480px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
dialog label { display: flex; flex-direction: column; font-weight: 600; }
.viewer { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }
.compare figure { margin: 0; }
.compare img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; background: var(--chip); display: block; }
.compare figcaption { text-align: center; color: var(--muted); font-size: 12px; margin-top: 4px; }

.piece { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.piece h4, .opts h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.piece label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); }
.dims { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.dims input { padding: 6px 7px; }

.picked { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.picked:empty { display: none; }


.kit { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.kit h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.kit-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .kit-grid { grid-template-columns: 1fr; } }
.kit-grid section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kit-grid label { display: flex; flex-direction: column; font-weight: 600; }
.kit-grid label.check { flex-direction: row; font-weight: 400; }
.kit-grid label.btn { display: inline-flex; flex-direction: row; font-weight: 600; }
#kitCanvas { width: 100%; height: auto; border-radius: 8px; background: var(--chip); display: block; }
.kit-controls { display: flex; flex-direction: column; gap: 8px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 600px) { .three { grid-template-columns: 1fr; } }
.scene:not(:empty) { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--chip); }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 700px) { .scene-grid { grid-template-columns: 1fr 1fr; } }
.scene label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); }
.scene label.check { flex-direction: row; font-size: 14px; font-weight: 400; color: inherit; }
.tabs.families:empty { display: none; }
.tabs.families { margin-top: -4px; }
.tabs.families button { font-size: 12px; padding: 3px 9px; }
.tabs.families button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tabs.families button[aria-pressed="true"] .hint { color: inherit; opacity: .8; }
#swatches { max-height: 420px; overflow: auto; }

.archive-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.archive-bar .tabs { margin: 0; }
.archive-bar input[type=text] { width: auto; flex: 1; min-width: 180px; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.arch-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.arch-img { border: 0; padding: 0; background: var(--chip); aspect-ratio: 1; cursor: zoom-in; display: block; width: 100%; }
.arch-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arch-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.arch-card .label { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.arch-card .label .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
.arch-card .tags { font-size: 12px; color: var(--muted); }
.arch-card .kind { font-weight: 600; color: var(--ink); }
.arch-card .row { margin-top: auto; padding-top: 4px; }
/* Rename: the photo's name is the button: a click turns it into a field with Save and Cancel (on the card, and the viewer's title) */
.name-edit { cursor: text; border-radius: var(--r-sm); }
/* (a full tap's height, 44 px, in the room of the name's line: the hover and focus tint stays on the name itself) */
button.name-edit { font: inherit; color: inherit; background: none; border: 0; padding: 12px 0; margin: -12px 0; background-clip: content-box; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#photoTitle.name-edit { padding: 12px 6px; margin: -12px 0 -12px -6px; background-clip: content-box; }
.name-edit:hover, .name-edit:focus-visible { background: var(--sunken); }
.name-edit::after { content: '✎'; margin-left: 6px; font-size: .85em; color: var(--muted); opacity: 0; }
.name-edit:hover::after, .name-edit:focus-visible::after { opacity: 1; }
@media (pointer: coarse) { #photoTitle.name-edit::after { opacity: 1; } }
.arch-rename { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; align-content: flex-start; align-self: center; min-width: 0; flex: 1; }
.arch-rename input { flex: 1 1 100%; min-width: 0; height: var(--tap); min-height: var(--tap); padding: 0 10px; font: inherit; font-size: var(--t-md); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.arch-rename input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#photoView .sheet-head .arch-rename { margin-right: var(--s2); }
.arch-img.collage img { object-fit: contain; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.tile .tv { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tile .tv.text { font-size: 16px; line-height: 1.3; min-height: 28px; display: flex; align-items: center; }
/* Sales: Net profit first and largest; rows of equal length on a computer (--cols is set by the page); on a phone four tiles and
   "More numbers" for the rest. */
#salesTiles { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
#salesTiles .tile.main { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
#salesTiles .tile.main .tv { font-size: 28px; }
#salesTiles .t-sub { font-size: var(--t-xs); }
#salesTiles .tile-more { display: none; }
@media (max-width: 760px) {
  #salesTiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  #salesTiles .tile { padding: 10px 12px; }
  #salesTiles .tile .tv { font-size: 20px; }
  #salesTiles .tile.main { grid-column: 1 / -1; }
  #salesTiles .tile.main .tv { font-size: 26px; }
  #salesTiles:not(.open) .tile.more { display: none; }
  #salesTiles .tile-more { display: flex; align-items: center; justify-content: center; gap: 4px; font: inherit; font-weight: 650; color: var(--accent); cursor: pointer; min-height: var(--tap); }
}
.gain { color: var(--good); }
.loss { color: var(--danger); }
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-wrap:has(table:empty) { display: none; }
.sales-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sales-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sales-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sales-table tr:last-child td { border-bottom: 0; }
.sales-table img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display: block; background: var(--chip); }
.sales-table .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }
.sales-table .actions { white-space: nowrap; }
.sales-table .actions .btn + .btn { margin-left: 4px; }
.sale-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.profit-preview { padding: 10px 12px; border-radius: 8px; background: var(--chip); }

.stock-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.stock-head label.btn { display: inline-flex; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 500px) { .stock-grid { grid-template-columns: 1fr; } }
.stock-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; }
/* (the photos carry the rounded corners, so the card itself lets the "…" menu show past its edge) */
.stock-card .pair { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; overflow: hidden; }
.stock-card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.stock-card figure { margin: 0; position: relative; aspect-ratio: 4 / 3; background: var(--chip); }
/* (no planned look yet: the photo takes the room, and a small "+ Planned look" tile sits beside it, not a big empty box) */
.stock-card .pair.noplan { grid-template-columns: 1fr minmax(96px, 32%); }
.plan-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: var(--panel); color: var(--accent); font: inherit; font-size: var(--t-sm); font-weight: 650; cursor: pointer; padding: var(--s2); text-align: center; min-height: var(--tap); }
.plan-add span { font-size: 22px; line-height: 1; }
.plan-add:hover { background: var(--accent-soft); }
.sc-btns { flex-wrap: nowrap; gap: var(--s2); }
.stock-card .body { min-width: 0; }
.stock-card .sc-look { overflow-wrap: anywhere; }
.stock-card .cost-so-far { margin-left: calc(var(--s2) * -1); }
.stock-card .sc-est { margin-left: calc(var(--s2) * -1); min-height: 32px; text-align: left; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.stock-card .sc-est b { font-weight: 650; }
@media (max-width: 760px) { .stock-card figure { aspect-ratio: 16 / 9; } .stock-card .body { padding: 8px 12px 12px; gap: 4px; } }
.sc-btns .primary { flex: 1 1 auto; }
.menu-wrap { position: relative; display: inline-flex; }
.more-btn { min-width: var(--tap); font-weight: 800; letter-spacing: .05em; }
.menu-list { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40; min-width: 210px; padding: var(--s1); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.menu-list[hidden] { display: none; }
.menu-row { text-align: left; font: inherit; font-weight: 600; min-height: var(--tap); padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; white-space: nowrap; }
.menu-row:hover, .menu-row:focus-visible { background: var(--sunken); }
.menu-row.danger { color: var(--danger); }
.stock-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stock-card figcaption { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(14, 20, 30,.65); padding: 3px 8px; border-radius: 999px; }
.stock-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.stock-card .tags { font-size: 13px; color: var(--muted); }
.stock-card .dot, .plan-opt .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }
.stock-card .row { margin-top: auto; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.pick { display: grid !important; grid-template-columns: auto 48px 1fr 90px; gap: 10px; align-items: center; font-weight: 400 !important; padding: 6px; border-radius: 8px; border: 1px solid var(--line); cursor: pointer; }
.pick img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.pick input[type=checkbox] { accent-color: var(--accent); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.plan-opt { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; border: 2px solid var(--line); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-opt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.plan-opt.chosen { border-color: var(--accent); }


/* Phones: the sales table becomes cards. */
@media (max-width: 600px) {
  .sales-table thead { display: none; }
  .sales-table, .sales-table tbody, .sales-table tr { display: block; width: 100%; }
  .sales-table tr { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .sales-table td { border: 0; padding: 0; }
  .sales-table td.thumb { grid-row: span 2; }
  .sales-table td.name { grid-column: 2 / -1; }
  .sales-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .sales-table td.actions { grid-column: 1 / -1; }
}
.distress-opts label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); }

.marks-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.marks-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.marks-row > span { display: flex; flex-direction: column; gap: 6px; }
.kind-switch { margin: 8px 0 4px; }
.top-stain { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--muted); max-width: 320px; }
.distress-opts label.check, .marks-row label.check { flex-direction: row; font-size: 14px; font-weight: 400; color: inherit; }

.tt-paint { display: flex; flex-direction: column; gap: 4px; }
.combo { position: relative; display: flex; align-items: center; }
.combo > .dot { position: absolute; left: 10px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); pointer-events: none; }
.combo > .dot.empty { border-style: dashed; }
.combo input { padding-left: 34px; }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 280px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,24,40,.16); padding: 4px; }
.combo-opt { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.3; }
.combo-opt:hover, .combo-opt.active { background: var(--chip); }
.combo-opt[aria-selected="true"] { font-weight: 600; }
.combo-opt .dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
.combo-empty { padding: 8px; }

.compare-dlg { width: min(1400px, calc(100vw - 32px)); }
.compare-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 12px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-grid figure { margin: 0; }
.compare-grid img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--sunken); border-radius: 8px; display: block; }
.compare-grid figcaption { margin-top: 6px; font-size: 13px; }
.compare-grid .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.15); }

/* My paints */
.paints-add { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.paints-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin-top: 8px; max-height: 320px; overflow: auto; }
.paint-result { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: inherit; font: inherit; cursor: pointer; }
.paint-result:hover:not(:disabled) { border-color: var(--accent); }
.paint-result:disabled { opacity: .6; cursor: default; }
.paint-result .dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex: none; }
.paint-result .add { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.paints-custom { margin-top: 10px; }
.paints-custom summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.paints-custom .row { margin-top: 8px; }
.paints-custom input[type=color] { width: 44px; height: 36px; padding: 2px; }
.paints-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.paint-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.paint-card .paint-chip { height: 90px; border-bottom: 1px solid var(--line); }
.paint-card .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.swatch .have { color: var(--accent); font-weight: 700; font-size: 12px; margin-left: 2px; }
.ask-dlg { max-width: 460px; }

/* Piece check on a card */
.pc-warn { color: var(--warn); }

/* Sign-in page and people (website version) */

/* ===== tool dialogs: crop and highlighter (full screen on phones) ======================= */
dialog.tool-dlg { width: min(1100px, calc(100vw - 32px)); max-width: none; height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.tool-dlg[open] { display: flex; flex-direction: column; gap: var(--s3); }
dialog.tool-dlg::backdrop { background: var(--overlay); }
.tool-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.tool-head strong { font-size: var(--t-md); }
.tool-extra { display: flex; flex-direction: column; gap: var(--s3); }
/* The picture fits the room its box really has (the box takes what the controls leave). It was sized to the window less 330 px, so with
   taller controls its bottom, and the crop box's corners, were cut off: 131 of 263 px at 375×667, 94 px at 1280×800 (2026-10-27). */
.tool-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: var(--sunken); border-radius: var(--r-sm); overflow: hidden; }
.tool-stage canvas { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; touch-action: none; cursor: crosshair; display: block; }
.tool-stage canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.tool-bar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.tool-nums summary { cursor: pointer; font-weight: 650; font-size: var(--t-sm); min-height: var(--tap); display: flex; align-items: center; }
.tool-nums .nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.quick-areas { display: flex; flex-direction: column; gap: var(--s1); }
.quick-areas .tabs { margin: 0; }
.field.wide { grid-column: 1 / -1; }
.field.wide .tabs { margin: var(--s1) 0 0; }
@media (max-width: 760px) {
  dialog.tool-dlg { inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: calc(var(--s3) + var(--safe-t)) var(--s3) calc(var(--s3) + var(--safe-b)); }
  .tool-bar { position: sticky; bottom: 0; background: var(--panel); padding: var(--s2) 0; }
  .tool-bar .btn { flex: 1; }
  .tool-nums .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== first run, keyboard hint ================================================== */
.firstrun { display: flex; align-items: center; gap: var(--s2); flex-wrap: nowrap; background: var(--accent-soft); color: var(--accent); border-radius: var(--r); padding: var(--s2) var(--s2) var(--s2) var(--s4); font-size: var(--t-sm); font-weight: 600; }
.firstrun .fr-text { flex: 1 1 140px; font-weight: 500; }
.fr-x { width: var(--tap); height: var(--tap); margin-left: auto; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--accent); font-size: 16px; font-weight: 800; cursor: pointer; }
.fr-x:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.menu-hint { margin: var(--s3) var(--s2) 0; }

.own-chip { background: transparent !important; border: 1px dashed var(--edge) !important; color: var(--accent) !important; }
@media (min-width: 761px) { .firstrun { padding: var(--s1) var(--s1) var(--s1) var(--s3); } }
.summary-row { min-height: 44px; }

.piece-row .num { align-self: flex-start; margin-top: 2px; }
.step#stepOptions { padding-top: var(--s1); padding-bottom: var(--s1); }

/* ===== sign-in page ===================================================================== */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--s4) + var(--safe-t)) var(--s4) calc(var(--s4) + var(--safe-b)); background: var(--bg); }
.login-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--s5); }
.login-card .brand { margin-bottom: var(--s4); }
.login-card h1 { font-size: var(--t-xl); margin: 0 0 var(--s1); }
.login-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); margin: var(--s3) calc(var(--s2) * -1) 0; }
.login-card #loginDone { margin-top: var(--s3); }
.login-card .hint { font-size: var(--t-sm); }
.login-terms { margin: var(--s3) 0 0; }
.login-terms a { color: var(--accent); }
.login-card form { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.login-card input { font-size: 16px; }
.login-card .btn.primary { width: 100%; margin-top: var(--s1); }
.login-card .row { margin-top: var(--s3); }
.login-card p a.btn { width: 100%; margin-top: var(--s3); }

/* ===== settings ========================================================================== */
dialog.settings-dlg { width: min(640px, calc(100vw - 32px)); padding: 0; }
dialog.settings-dlg[open] { display: flex; flex-direction: column; }
.settings-dlg form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 32px); }
.settings-dlg .tool-head { padding: var(--s4) var(--s4) var(--s2); }
.settings-dlg h2 { margin: 0; font-size: var(--t-lg); }
.settings-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); overscroll-behavior: contain; }
.settings-body > #ownerSettings { display: flex; flex-direction: column; gap: var(--s3); }
.set-section { background: var(--sunken); border-radius: var(--r); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.set-section h3 { margin: 0; font-size: var(--t); }
.set-section p { margin: 0; }
.set-section .btn { align-self: flex-start; }
.set-section .row .btn, .set-section .row.nowrap .btn { align-self: auto; }
.set-more summary { cursor: pointer; font-weight: 650; min-height: var(--tap); display: flex; align-items: center; }
.settings-foot { padding: var(--s3) var(--s4) calc(var(--s4) + var(--safe-b)); border-top: 1px solid var(--line); background: var(--panel); }
.settings-foot .error { margin: 0 0 var(--s2); min-height: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.people li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.people li:last-child { border-bottom: 0; }
.people .row { gap: var(--s1); }
@media (max-width: 760px) {
  dialog.settings-dlg { width: 100%; }
  .settings-dlg form { max-height: 100dvh; height: 100dvh; }
  .settings-dlg .tool-head { padding-top: calc(var(--s3) + var(--safe-t)); }
}
.paints-custom summary { min-height: var(--tap); display: flex; align-items: center; }
.tabs button, .chip { min-width: var(--tap); justify-content: center; }

/* disclosure arrows for every <details> (the default marker is hidden by our flex rows) */
.shop summary::after, .prompt-details summary::after, .set-more summary::after, .tool-nums summary::after, .paints-custom summary::after, .checkline.none summary::after { content: '▾'; margin-left: var(--s2); font-size: 11px; color: var(--muted); transition: transform .12s; }
details[open] > summary::after { transform: rotate(180deg); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.login-card .brand { gap: var(--s2); }
.login-card .brand-name { display: inline; }

/* ===== the rest of the dialogs: forms and sheets on tokens, full screen on phones ========= */
dialog { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); padding: var(--s4); width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: var(--overlay); }
dialog label { color: var(--ink-2); }
dialog form { gap: var(--s3); }
.viewer-head { gap: var(--s3); }
.viewer-head strong { font-size: var(--t-md); }
dialog.kit, dialog.viewer { width: min(1200px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.ask-dlg { width: min(440px, calc(100vw - 32px)); }
.ask-dlg p { color: var(--ink); font-size: var(--t-md); }
@media (max-width: 760px) {
  dialog:not(.drop-panel):not(.detail):not(.tool-dlg):not(.ask-dlg) {
    inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; overflow-y: auto;
    padding: calc(var(--s3) + var(--safe-t)) var(--s4) calc(var(--s4) + var(--safe-b));
  }
  .ask-dlg { margin: auto var(--s4) calc(var(--s4) + var(--safe-b)); width: calc(100vw - 32px); }
  .viewer-head { position: sticky; top: calc(-1 * (var(--s3) + var(--safe-t))); background: var(--panel); padding: var(--s2) 0; z-index: 2; }
}
.pick { grid-template-columns: auto 48px 1fr 90px; min-height: 60px; }

.v .st-end { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .step h3 .hint { display: none; } }

/* tablets (portrait iPads): two-up gallery, a roomier piece switcher */
@media (min-width: 761px) and (max-width: 1000px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
  .switcher { min-width: 200px; max-width: 420px; }
  /* (the sections are in the bottom tab bar here, so the top bar's left part takes the room) */
  .top-start { flex: 1; width: auto; }
  .results-head .tabs { flex-basis: 100%; order: 3; }
  /* the sections move to a bottom tab bar here too (there's no room for them on top) */
  .nav, .spend, .brand-name { display: none; }
  .brand { gap: 0; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--bar-h) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--panel); border-top: 1px solid var(--line); }
  .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 650; color: var(--muted); cursor: pointer; min-height: var(--bar-h); }
  .tabbar button[aria-pressed="true"] { color: var(--accent); }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar .count { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }
  .typing .tabbar { display: none; }
  .view { padding-bottom: calc(var(--bar-h) + var(--safe-b) + var(--s5)); }
  body[data-view="studio"] .view#studioView { padding-bottom: 0; }
  .make { height: calc(100dvh - 60px - var(--bar-h) - var(--safe-b)); }
  .results-col { padding: var(--s4) var(--s3) calc(var(--bar-h) + var(--safe-b) + var(--s6)); }
  #toasts { bottom: calc(var(--bar-h) + var(--safe-b) + var(--s4)); }
}

/* ===== sales: pieces / expenses ============================================================ */
.sales-top { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.sales-top select { width: auto; margin-left: auto; }
.exp-cats { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.exp-cat {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(90deg, var(--bar-fill) var(--share, 0%), var(--panel) var(--share, 0%));
  color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 650; cursor: pointer; overflow: hidden;
}
.exp-cat:hover { border-color: var(--muted); }
.exp-cat[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.exp-cat .ec-amt { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* the navy summary: period, count, the total in serif, where it went */
.exp-hero { background: var(--hero); color: var(--hero-ink); border-radius: var(--r); padding: var(--s4) var(--s4) var(--s3); margin-bottom: var(--s3); max-width: 880px; }
@media (prefers-color-scheme: dark) { .exp-hero { border: 1px solid var(--line-strong); } }
.eh-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.eh-period { position: relative; display: inline-flex; align-items: center; }
.eh-period select { appearance: none; -webkit-appearance: none; width: auto; min-height: var(--tap); margin: 0; padding: 0 28px 0 var(--s3); border: 1px solid rgba(245, 238, 230, .35); border-radius: var(--r-sm); background: transparent; color: var(--hero-ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.eh-period::after { content: ''; position: absolute; right: 11px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid var(--hero-sub); border-bottom: 1.5px solid var(--hero-sub); transform: rotate(45deg); pointer-events: none; }
.eh-period select option { color: var(--hero-field-ink); background: var(--hero-field-bg); text-transform: none; }
.eh-count { color: var(--hero-sub); }
.exp-hero .es-total { font-size: 44px; line-height: 1.1; margin: var(--s3) 0 var(--s2); font-variant-numeric: lining-nums tabular-nums; }
.eh-bar { display: flex; gap: 2px; height: 5px; margin: var(--s3) 0 var(--s2); border-top: 1px solid var(--gold); padding-top: var(--s3); box-sizing: content-box; }
.eh-bar:empty { display: none; }
.eh-seg { display: block; flex: 1 1 0; min-width: 3px; border-radius: 1px; }
.eh-seg0 { background: var(--eh-seg0); } .eh-seg1 { background: var(--eh-seg1); } .eh-seg2 { background: var(--eh-seg2); } .eh-seg3 { background: var(--eh-seg3); }
.eh-legend, .eh-line { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; font-size: var(--t-sm); color: var(--hero-sub); }
.eh-legend:empty, .eh-line:empty { display: none; }
.eh-line { margin-top: var(--s2); color: var(--hero-ink); }
.eh-line .icon { vertical-align: -2px; color: var(--hero-sub); }
.eh-key { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 1px; }
/* the actions: the camel call to action, then the small ones, then the search field */
.exp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); max-width: 880px; }
.exp-actions .btn .icon { flex: none; }
.exp-search { position: relative; flex: 1 1 240px; display: block; min-width: 0; }
.exp-search .es-icon { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.exp-search input { width: 100%; margin: 0; padding-left: 38px; min-height: var(--tap); border-radius: var(--r-sm); }
.exp-foot { margin: var(--s3) 0 0; }
/* each expense: its category's icon, what, when and where, and the amount in serif */
.er-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); color: var(--accent); background: var(--panel); }
.er-supplies, .er-tools { color: var(--gold-strong); border-color: color-mix(in srgb, var(--gold-strong) 45%, var(--line)); }
.er-what .hint .icon { vertical-align: -2px; }
.er-what .er-date { color: var(--ink-2); font-weight: 600; }
.exp-list { max-width: 880px; display: flex; flex-direction: column; gap: var(--s4); }
.exp-month h3 { display: flex; justify-content: space-between; margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.exp-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; width: 100%; min-height: 60px; padding: var(--s2) var(--s3);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: inherit; font: inherit; text-align: left; cursor: pointer; margin-bottom: 6px;
}
.exp-row:hover { border-color: var(--muted); background: var(--sunken); }
.er-date { color: var(--muted); font-size: var(--t-sm); font-weight: 600; }
.er-what { display: flex; flex-direction: column; min-width: 0; }
.er-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-what .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sales-top .seg { flex: 1; }
  .sales-top .seg button { flex: 1; }
  .exp-cats { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--s4) * -1); margin-right: calc(var(--s4) * -1); padding: 0 var(--s4); scrollbar-width: none; }
  .exp-cats::-webkit-scrollbar { display: none; }
  .exp-cat { flex: none; min-width: 150px; }

  .exp-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  /* (a phone: Snap a receipt across; under it "Photo or PDF" and "Add by hand" side by side, with their words: as bare icons the pencil
     read as "edit", and typing an expense needed a guess, 2026-10-27; then the search field) */
  .exp-actions:has(#expCamera:not([hidden])) #expCamera { flex: 1 1 100%; }
  .exp-actions:has(#expCamera:not([hidden])) :is(#expScan, #expAdd) { flex: 1 1 0; justify-content: center; }
  .exp-actions .exp-search { flex: 1 1 100%; }
  .exp-hero .es-total { font-size: 40px; }
  .exp-cat { min-width: 0; }
}

#expenseForm > .row > span.row { margin-left: auto; }

/* ===== scan a receipt: the review sheet ===================================================== */
dialog.receipt-dlg { width: min(1040px, calc(100vw - 32px)); }
.receipt-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s1); margin: calc(var(--s1) * -1); }
.receipt-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--line); background: var(--panel);
}
.receipt-foot[hidden] { display: none; }
.rc-summary { margin: 0; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 2px; }
.rc-summary .rc-ok { color: var(--accent); font-weight: 650; font-size: var(--t-sm); }
.rc-summary .rc-bad { color: var(--warn); font-weight: 650; font-size: var(--t-sm); }
.receipt-foot .error { flex: 1 1 100%; order: -1; margin: 0; min-height: 0; }
.receipt-foot .error:empty { display: none; }
.receipt-foot .btn { min-width: 140px; }
.rc-reading { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s5); align-items: center; padding: var(--s4) 0; }
.rc-photo-box { display: grid; place-items: center; background: var(--sunken); border-radius: var(--r-sm); overflow: hidden; min-height: 160px; }
.rc-photo-box img { display: block; max-width: 100%; max-height: 50dvh; object-fit: contain; }
.rc-photo-box.small { max-width: 200px; margin-bottom: var(--s3); }
.rc-photo-box.small img { max-height: 160px; }
.rc-photo-wait { width: 100%; height: 200px; background: linear-gradient(90deg, var(--sunken), var(--line), var(--sunken)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.rc-wait { display: flex; flex-direction: column; gap: var(--s2); }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.rc-problem { max-width: 560px; }
.rc-problem h3 { margin: 0 0 var(--s2); }
.rc-layout { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.rc-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--s2); }
.rc-thumb { padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); cursor: zoom-in; overflow: hidden; display: grid; place-items: center; min-height: var(--tap); }
.rc-thumb img { display: block; max-width: 100%; max-height: 65dvh; object-fit: contain; }
.rc-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.rc-note { padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--sunken); color: var(--ink); font-size: var(--t); }
.rc-note.warn { border-color: var(--warn); background: var(--warn-soft); }
.rc-top, .rc-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.rc-top label, .rc-money label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-sm); }
.rc-h { margin: var(--s2) 0 0; font-size: var(--t-md); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.rc-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.rc-item {
  display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) minmax(130px, 170px) 104px; gap: var(--s2); align-items: center;
  padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
}
.rc-item.off { background: var(--sunken); }
.rc-item.off .rc-what, .rc-item.off .rc-cat, .rc-item.off .rc-amt { opacity: .6; }
.rc-on { display: grid; place-items: center; width: var(--tap); height: var(--tap); margin: 0; cursor: pointer; }
.rc-on input { width: 22px; height: 22px; }
.rc-amt { text-align: right; font-variant-numeric: tabular-nums; }
.rc-final { grid-column: 2 / -1; margin-top: calc(var(--s1) * -1); min-height: 0; }
.rc-final:empty { display: none; }
.rc-item [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.rc-tax { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); margin: 0; }
.rc-tax legend { font-size: var(--t-sm); font-weight: 650; padding: 0 var(--s1); color: var(--ink-2); }
.rc-radio { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); flex-direction: row; font-weight: 400; cursor: pointer; }
.rc-check { padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--sunken); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-check.good { border-color: var(--good); background: var(--good-soft); }
.rc-check.bad { border-color: var(--warn); background: var(--warn-soft); }
.rc-pdftile { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s4); text-align: center; overflow-wrap: anywhere; }
.rc-pdftile > span:first-child { font-size: 40px; line-height: 1; }
.rc-pdf { width: 100%; height: min(62dvh, 640px); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); }
.rc-open { height: auto; min-height: var(--tap); padding-top: var(--s2); padding-bottom: var(--s2); justify-content: center; flex-wrap: wrap; gap: 0 var(--s2); text-align: center; }
.rc-open .hint { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .rc-layout { grid-template-columns: 1fr; gap: var(--s3); }
  .rc-pdf { display: none; }
  .rc-side .rc-open { flex: 1; }
  .rc-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rc-side > .hint { flex: 1 1 0; min-width: 0; }
  .rc-side .rc-more { flex: 1 1 100%; }
  .rc-thumb { width: 96px; flex: none; }
  .rc-thumb img { max-height: 96px; }
  .rc-reading { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rc-item { grid-template-columns: var(--tap) minmax(0, 1fr) 104px; }
  .rc-item .rc-on { grid-row: 1 / span 2; align-self: start; }
  .rc-item .rc-what { grid-column: 2 / -1; grid-row: 1; }
  .rc-item .rc-cat { grid-column: 2; grid-row: 2; }
  .rc-item .rc-amt { grid-column: 3; grid-row: 2; }
  .rc-item .rc-final { grid-column: 2 / -1; grid-row: 3; }
  .rc-item .rc-for { grid-column: 2 / -1; grid-row: 4; }
  .rc-item .rc-to { grid-column: 2 / -1; grid-row: 5; }
  .rc-item .rc-extra { grid-column: 2 / -1; grid-row: 6; }
  .receipt-foot { position: sticky; bottom: 0; flex-direction: column; align-items: stretch; padding-bottom: var(--s1); }
  .receipt-foot .btn { width: 100%; }
}

/* ===== charts (Sales → Charts) ============================================================== */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s4); margin-top: var(--s4); align-items: start; }
.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); min-width: 0; }
.chart-card.wide { grid-column: 1 / -1; }
.chart-card h3 { margin: 0 0 var(--s1); font-size: var(--t-md); }
.chart-note { margin: 0 0 var(--s3); color: var(--ink-2); font-size: var(--t-sm); }
.chart-steps { margin: 0; padding-left: 1.2em; color: var(--ink-2); font-size: var(--t); }
.chart-steps li { margin: var(--s2) 0; }
.chart-empty { margin: var(--s4) 0 var(--s2); color: var(--muted); }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s2); padding: 0; font-size: var(--t-sm); color: var(--ink-2); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lg-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg-sw.ch-in { background: var(--accent); }
.lg-sw.ch-pc { background: repeating-linear-gradient(45deg, var(--muted) 0 3px, var(--panel) 3px 5px); border: 1px solid var(--muted); }
.lg-sw.ch-px { background: radial-gradient(circle at 50% 50%, var(--panel) 0 1.4px, var(--warn) 1.8px) 0 0 / 5px 5px; border: 1px solid var(--warn); }
.lg-sw.ch-pa { background: repeating-linear-gradient(45deg, var(--focus) 0 2px, var(--panel) 2px 4px), repeating-linear-gradient(-45deg, var(--focus) 0 2px, var(--panel) 2px 4px); background-blend-mode: multiply; border: 1px solid var(--focus); }
.lg-sw.ch-goal-sw { width: 18px; height: 0; border: 0; border-top: 2px dashed var(--ink-2); border-radius: 0; background: none; }.lg-sw.ch-exp { background: var(--warn); }
.lg-sw.lg-line { width: 18px; height: 3px; border-radius: 2px; background: var(--ink); }
.chart-wrap { width: 100%; min-height: 40px; overflow: hidden; }
.chart-svg { display: block; max-width: 100%; touch-action: pan-y; }
.chart-svg .ch-in, .chart-svg .ch-pos { fill: var(--accent); }
.chart-svg .ch-exp { fill: var(--warn); }
.chart-svg .ch-neg { fill: var(--danger); }
.chart-svg .ch-net { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .ch-line { stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .ch-area { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.chart-svg .ch-dot { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.chart-svg .ch-dot-line { stroke: var(--accent); }
.chart-svg .ch-grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .ch-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-svg .ch-text { fill: var(--ink-2); }
.chart-svg .ch-year { fill: var(--muted); }
.chart-svg .ch-val { fill: var(--ink); font-weight: 650; }
.chart-svg .ch-halo { paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.chart-svg .ch-hit { fill: transparent; }
.chart-svg .ch-hit.on { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.chart-readout { min-height: calc(var(--lines, 1) * 1.5em); margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-data summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--t-sm); font-weight: 650; color: var(--accent); }
.chart-data > div { overflow-x: auto; }
.chart-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: var(--s2) var(--s2); border-top: 1px solid var(--line); text-align: left; font-weight: 400; white-space: nowrap; }
/* A long name (even one with no spaces) wraps instead of pushing the table off the screen. */
.chart-table th[scope=row] { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
[data-table] { overflow-x: auto; }
#salesCharts { overflow-wrap: anywhere; }
.chart-table thead th { font-weight: 650; color: var(--ink-2); border-top: 0; }
.chart-table th[scope=row] { font-weight: 600; }
.chart-table .num { text-align: right; }
@media (max-width: 760px) {
  .charts { gap: var(--s3); }
  .chart-card { padding: var(--s3); }
  /* the headline numbers: three across and smaller, so the first chart isn't pushed off the screen */
  #chartTiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
  #chartTiles .tile { padding: var(--s2) var(--s3); }
  #chartTiles .tile .tv { font-size: 18px; }
}

/* ===== charts, round two: switches, comparisons, findings, drill-down, states ================== */
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s2); }
.chart-controls .check { min-height: var(--tap); }
.chart-basis-hint { margin: 0 0 var(--s3); max-width: 70ch; }
.chart-warn { margin: 0 0 var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--warn); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); }
#chartTiles { position: relative; }
/* A figure never breaks across lines (a lone minus sign on its own line looked like a bug); long ones are made smaller by fitTiles(). */
#chartTiles .tile .tv { white-space: nowrap; }
.tile .delta { margin-top: 2px; font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tile .delta.good { color: var(--good); }
.tile .delta.bad { color: var(--danger); }
.tile .tile-spark { margin-top: var(--s1); height: 22px; }
.spark { display: block; }
.spark .spark-line { stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-dot { fill: var(--ink); }
.tiles-note { grid-column: 1 / -1; margin: 0; }
.chart-findings { margin: 0 0 var(--s3); }
.finding-title { margin: 0 0 var(--s2); font-size: var(--t-md); }
.finding-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s2); }
.finding { display: flex; flex-direction: column; gap: var(--s1); width: 100%; min-height: var(--tap); padding: var(--s3); text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm); cursor: pointer; }
.finding:hover { background: var(--sunken); }
.finding .f-go { color: var(--accent); font-size: var(--t-sm); font-weight: 650; }
.finding-none { margin: 0; padding: var(--s3); color: var(--ink-2); background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }
.chart-view { margin: 0 0 var(--s2); }
.chart-view button { min-height: var(--tap); }
.chart-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.chart-svg .ch-hit[data-direct] { cursor: pointer; }
.chart-svg .ch-hit[data-direct]:hover { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.chart-readout .link-btn { min-height: var(--tap); padding: 0 var(--s2); background: none; border: 0; color: var(--accent); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.chart-svg .pat-pc { fill: var(--muted); }
.chart-svg .pat-px { fill: var(--warn); }
.chart-svg .pat-pa { fill: var(--focus); }
.chart-svg .pat-line { stroke: var(--panel); }
.chart-svg .pat-dot { fill: var(--panel); }
.chart-svg .ch-goal { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-svg .ch-goal-label { fill: var(--ink-2); }
.nudges { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.nudges li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); font-size: var(--t-sm); }
.nudges li span { flex: 1 1 260px; color: var(--ink); }
.meters { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.meter-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); font-size: var(--t-sm); font-weight: 600; }
.meter, .goal-bar { height: 10px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; margin-top: 6px; }
.meter span, .goal-bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.goal { margin: var(--s3) 0 0; }
.goal-text { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.goal-set { margin-top: var(--s2); }
.goal-set summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--t-sm); font-weight: 650; color: var(--accent); }
.goal-form { display: flex; flex-direction: column; gap: var(--s2); max-width: 360px; }
.tax-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.tax-controls label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-sm); font-weight: 650; }
.tax-print { margin-top: var(--s3); }
.tax-table th, .tax-table td { white-space: normal; }
.tax-table .tax-strong th, .tax-table .tax-strong td { font-weight: 700; border-top: 2px solid var(--line-strong); }
.tax-table .tax-sub th { padding-left: var(--s5); color: var(--ink-2); font-weight: 400; }
.drill-dlg[open] { display: flex; flex-direction: column; }
.drill-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: calc(var(--s3) + var(--safe-t)) var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.drill-head h2 { margin: 0; font-size: var(--t-lg); outline: none; min-width: 0; overflow-wrap: anywhere; }
.drill-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s3) var(--s4) calc(var(--s5) + var(--safe-b)); }
.drill-total { margin: 0 0 var(--s3); font-weight: 650; font-variant-numeric: tabular-nums; }
.drill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.drill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; width: 100%; min-height: 56px; padding: var(--s2) var(--s3); text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.drill-row:hover { background: var(--sunken); border-color: var(--muted); }
.dr-main { display: flex; flex-direction: column; min-width: 0; }
.dr-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-main .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-amt { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.skeleton.sk-line { height: 14px; margin: 10px 0; border-radius: 6px; }
.skeleton.sk-line.short { width: 40%; }
.skeleton.sk-line.big { height: 26px; width: 70%; }
.skeleton.sk-block { height: 200px; border-radius: var(--r-sm); }
.skeleton.sk-block.short { height: 120px; }
.skeleton.sk-find { height: 68px; margin-top: var(--s2); border-radius: var(--r-sm); }
#chartTiles .tile.skel { min-height: 96px; }
.chart-error p { margin: var(--s2) 0 var(--s3); color: var(--ink-2); }
@media (max-width: 760px) {
  .chart-controls .seg { flex: 1 1 100%; }
  .chart-controls .seg button { flex: 1; }
  .finding-list { grid-template-columns: 1fr; }
  .tax-controls .btn { flex: 1 1 auto; }
}
/* With the system's high-contrast colors on, bars take the system colors and lines are drawn plainly. */
@media (forced-colors: active) {
  .chart-svg .ch-in, .chart-svg .ch-pos { fill: Highlight; }
  /* Keep the stripes, dots and crosses (shape still tells the three costs apart) and give each its own system color. */
  .chart-svg .pat-pc { fill: GrayText; }
  .chart-svg .pat-px { fill: LinkText; }
  .chart-svg .pat-pa { fill: VisitedText; }
  .chart-svg .pat-line { stroke: Canvas; }
  .chart-svg .pat-dot { fill: Canvas; }
  /* The legend swatches are backgrounds, which this mode would blank out. */
  .lg-sw { forced-color-adjust: none; border: 1px solid CanvasText; }
  .lg-sw.ch-in { background: Highlight; }
  .lg-sw.ch-pc { background: repeating-linear-gradient(45deg, GrayText 0 3px, Canvas 3px 5px); }
  .lg-sw.ch-px { background: radial-gradient(circle at 50% 50%, Canvas 0 1.4px, LinkText 1.8px) 0 0 / 5px 5px; }
  .lg-sw.ch-pa { background: repeating-linear-gradient(45deg, VisitedText 0 2px, Canvas 2px 4px), repeating-linear-gradient(-45deg, VisitedText 0 2px, Canvas 2px 4px); background-blend-mode: multiply; }
  .lg-sw.lg-line { background: CanvasText; }
  .chart-svg .ch-neg { fill: Mark; }
  .chart-svg .ch-exp { fill: LinkText; }
  .chart-svg .ch-net, .chart-svg .ch-dot { stroke: CanvasText; }
  .chart-svg .ch-dot { fill: Canvas; }
  .chart-svg .ch-line { stroke: Highlight; }
  .chart-svg .ch-text, .chart-svg .ch-val { fill: CanvasText; }
  .chart-svg .ch-hit.on { fill: none; stroke: Highlight; stroke-width: 2; }
  .meter span, .goal-bar span { background: Highlight; }
}
/* Printing the year summary: only the summary. */
@media print {
  body.printing-tax * { visibility: hidden; }
  body.printing-tax .tax-print, body.printing-tax .tax-print * { visibility: visible; }
  body.printing-tax .tax-print { position: absolute; left: 0; top: 0; width: 100%; }
}

.basis-help { margin: 0 0 var(--s2); }
.basis-help summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--t-sm); font-weight: 650; color: var(--accent); }
.basis-help .chart-basis-hint { margin: 0 0 var(--s2); }
@media (max-width: 760px) {
  .chart-controls > .hint { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chart-controls { gap: var(--s1) var(--s3); }
  .tile .tile-spark { height: 18px; margin-top: 2px; }
  .finding { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); }
  .finding .f-go { flex: none; }
}

/* ===== where you sell, selling fees and refunds (the sale form) ============================== */
.place-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: calc(var(--s1) * -1) 0 var(--s2); }
.place-chips:empty { display: none; }
.place-chips .chip { min-height: var(--tap); }
#placesEdit { align-self: flex-start; margin-bottom: var(--s2); min-height: var(--tap); }
.places-rows { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.place-row { display: grid; grid-template-columns: 1fr 96px var(--tap); gap: var(--s2); align-items: end; }
.er-amt.refund { color: var(--good); }

/* ===== your week, what to pay, what things sell for ============================================= */
.week-lines { margin: 0 0 var(--s3); padding-left: 1.2em; }
.week-lines li { margin: var(--s1) 0; }
.week-copy { align-items: center; gap: var(--s3); }
.advice-margin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); }
.advice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.advice { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r-sm); padding: var(--s3); background: var(--panel); }
.advice p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--t); }
.advice-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s3); }
.advice-big { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.goal-pace { margin-top: var(--s1); }

/* ===== progress while pictures are being made ================================================ */
.v .status .wait-text { line-height: 1.35; }
.v .status .wait-text.slow { color: var(--warn); }
.v .status .wait-text.late { color: var(--danger); }

/* ---- color match and failure next steps ---- */
.v .cm { font-size: var(--t-xs); font-weight: 650; margin-top: 2px; }
.v .cm.good { color: var(--ok); }
.v .cm.close { color: var(--warn); }
.v .cm.off { color: var(--danger); }
.colorline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3); border-radius: 10px; background: var(--sunken); border: 1px solid var(--line); margin: var(--s2) 0; }
.colorline.close { border-color: var(--warn); }
.colorline.off { border-color: var(--danger); }
.colorline .cl-text { flex: 1 1 14em; min-width: 0; }
.colorline .cm-pair { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); flex: none; }
.colorline .cm-pair span { width: 28px; height: 28px; display: block; }
.v.failed .row { flex-wrap: wrap; }
.runs { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-sm); }
.runs li { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: 4px 0; border-bottom: 1px solid var(--line); }
.runs li .when { color: var(--muted); min-width: 4.5em; }
.runs li.ok b { color: var(--ok); }
.runs li.bad b { color: var(--danger); }
/* a failed version's message is the point of the card: show all of it, whatever the width */
.v.failed .ph { aspect-ratio: auto; min-height: 120px; place-items: start center; }
.v.failed .status .err { display: block; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; text-align: left; }
/* the winner */
.v.winner { outline: 3px solid var(--accent); outline-offset: -1px; }
.v .v-open { position: relative; }
.v .v-win { position: absolute; left: var(--s2); top: var(--s2); display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--t-xs); padding: 3px 9px 3px 6px; border-radius: 999px; box-shadow: 0 0 0 2px #fff; }
.v .v-win .ribbon { width: 14px; height: 14px; }
.win-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.win-btn .ribbon, .wb-text .ribbon, .win-pill .ribbon, .stock-card figcaption .ribbon { vertical-align: -3px; }
.wb-text b { display: inline-flex; align-items: center; gap: 4px; }
.win-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s2); vertical-align: middle; color: var(--accent); background: var(--accent-soft); }
.stock-card figcaption .ribbon { width: 12px; height: 12px; }
.winner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); margin-bottom: var(--s3); border-radius: 10px; border: 1px solid var(--accent); background: var(--sunken); }
.winner-bar[hidden] { display: none; }
.winner-bar .wb-btns { display: inline-flex; gap: var(--s2); }
.compare-grid figcaption .btn { margin-top: var(--s2); }
.trash { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s2); }
.trash li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
/* Short phones (an iPhone SE, 568 px tall): the section tabs are a little lower and the piece's size line folds away (it is under Size). */
@media (max-width: 760px) and (max-height: 600px) {
  :root { --bar-h: 56px; }
  #pieceMeta { display: none; }
}
/* The smallest phones (320 px): the bar keeps one row; the quality button drops its price (the menu still shows every price). */
@media (max-width: 359px) {
  .ab-qbtn .ab-cost { display: none; }
  .ab-qbtn { padding: 0 var(--s2); }
}
/* With the system's high-contrast colors on, a chosen button, tab, swatch or filter must still look chosen: a transparent background
   would be drawn the same as an unchosen one. Chosen ones take the system's highlight colors, and the little color dots keep theirs. */
@media (forced-colors: active) {
  button[aria-pressed="true"], button[aria-selected="true"], [role="tab"][aria-selected="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline: 2px solid CanvasText; outline-offset: -4px;
  }
  .v-open[aria-pressed="true"] { background: none; color: inherit; outline: 4px solid Highlight; outline-offset: -4px; }
  .dot, .cm-pair span, .sw-dot { forced-color-adjust: none; border: 1px solid CanvasText; }
  .v.winner { outline: 4px solid Highlight; }
  .v .v-win { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  :focus-visible { outline: 3px solid Highlight; }
}
/* When the keyboard (or a screen reader) moves to a control, the page scrolls it clear of the bars that stay on screen: the header at the
   top, the action bar and the section tabs at the bottom. */
@media (max-width: 760px) {
  html { scroll-padding-top: calc(57px + var(--safe-t, 0px) + 12px); scroll-padding-bottom: calc(var(--ab-h, 0px) + var(--bar-h, 0px) + var(--safe-b, 0px) + 16px); }
}
@media (min-width: 761px) {
  html { scroll-padding-top: 76px; }
}

/* A photo that is being saved, shown from the phone at once (beside the Studio, not over it) */
#pendingHost .saving { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
#pendingHost .saving img { max-width: min(100%, 520px); max-height: 52dvh; object-fit: contain; border-radius: var(--radius); background: var(--sunken); }
#pendingHost .saving .pend-line { display: flex; gap: var(--s2); align-items: center; justify-content: center; margin: 0; font-size: 1.05rem; }
#pendingHost .saving p.muted { margin: 0; }

/* A tool that is waiting for its photo: "Loading the photo…", with the parts that need the photo held back */
.tool-load { display: grid; place-items: center; gap: var(--s2); padding: var(--s5) var(--s3); text-align: center; position: relative; }
.tool-load img { max-width: 100%; max-height: calc(100dvh - 330px); object-fit: contain; border-radius: var(--r-sm); opacity: .55; }
.tool-load-msg { margin: 0; font-weight: 600; }
.tool-load-msg.bad { color: var(--danger, #b3261e); }
.tool-load img:not([hidden]) + .tool-load-msg { position: absolute; background: var(--panel); padding: var(--s2) var(--s3); border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.tool-dlg.waiting .tool-bar, .tool-dlg.waiting .tool-nums, .kit.waiting .kit-controls { opacity: .5; }
.kit.waiting #kitCanvas { display: none; }
.viewer-note { margin: 0 0 var(--s2); font-weight: 600; text-align: center; }
.viewer-note.bad { color: var(--danger, #b3261e); }
.tool-dlg.waiting .tool-stage canvas { display: none; }
.tool-dlg.waiting .tool-head [data-needs-photo] { opacity: .5; }


/* The Costs sheet: what a piece has cost, as lines */
dialog.costs-dlg { width: min(520px, calc(100vw - 24px)); }
.costs-dlg h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-md, 1rem); }
.cost-sum { display: grid; gap: 2px; padding: var(--s3); background: var(--sunken); border-radius: var(--r-sm); }
.cost-big { font-size: 1.6rem; letter-spacing: -.01em; }
.cost-add { display: grid; gap: var(--s2); }
.cost-add h3 { margin-bottom: 0; }
.cost-add .chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.cost-add .chips select { min-height: var(--tap); border-radius: 999px; padding: 0 var(--s3); font: inherit; border: 1px solid var(--edge); background: var(--panel); color: var(--ink); }
.cost-list, .cost-break { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cost-line { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); overflow: hidden; }
.cost-row { display: flex; width: 100%; gap: var(--s3); align-items: center; justify-content: space-between; min-height: var(--tap); padding: var(--s2) var(--s3); background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cost-what { display: grid; gap: 2px; min-width: 0; }
.cost-what strong { overflow-wrap: anywhere; }
.cost-amt { font-weight: 700; white-space: nowrap; }
.cost-tag { display: inline-block; margin-left: var(--s2); padding: 1px 8px; border-radius: 999px; font-size: var(--t-xs); font-weight: 650; background: var(--chip); color: var(--muted); vertical-align: 1px; }
.cost-tag.estimate { background: var(--warn-soft, #fdf1d8); color: var(--warn); }
.cost-edit { display: grid; gap: var(--s2); padding: var(--s3); border-top: 1px solid var(--line); background: var(--sunken); }
.cost-break li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.row.end { justify-content: flex-end; }
.field.grow { flex: 1; }
.cost-so-far { font-weight: 650; }
.cost-add .two, .cost-edit .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.cost-add .chips .chip { padding: 0 14px; }
.costs-dlg .sheet-head .iconbtn { flex: none; min-width: 44px; }
.costs-dlg .sheet-head h2 { min-width: 0; overflow-wrap: anywhere; }
.costs-dlg .field { margin: 0; }

/* Charging a cost to pieces */
.split-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.split-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 2px var(--s3); min-height: var(--tap); }
.split-list .check { margin: 0; flex: 1; min-height: var(--tap); }
.split-amt { width: 96px; min-height: var(--tap); }
.rc-for { grid-column: 2 / -1; width: 100%; min-height: var(--tap); }
.rc-to { grid-column: 2 / -1; margin-top: calc(var(--s1) * -1); }
.rc-to:empty { display: none; }
.rc-extra { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: var(--t-sm); }
.rc-extra:empty { display: none; }
.rc-extra label.rc-can-l { display: inline-flex; flex-direction: row; align-items: center; gap: var(--s2); }
.rc-can { min-height: var(--tap); }
.rc-count { width: 4.5em; min-height: var(--tap); }
.rc-use-l { min-height: var(--tap); }

/* ---- businesses: the site owner's list, the email check, closing ---- */
.site-list li { flex-wrap: wrap; align-items: flex-start; }
.site-list .site-edit { flex-wrap: wrap; align-items: flex-end; gap: var(--s2); width: 100%; }
.site-list .field.small { flex: 1 1 100px; min-width: 90px; font-size: var(--t-sm); }
.site-list h4, #siteRequests h4 { margin: var(--s2) 0 var(--s1); font-size: var(--t-sm); }
#emailCheckBox { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken); }
#emailCheckBox[hidden] { display: none; }
#storageInfo.warn { color: var(--warn); font-weight: 650; }
.ask-row > input { flex: 1 1 240px; min-width: 0; }
.ask-row > .btn { flex: 1 1 auto; }

/* ===== one look for every dialog (UX research, wave 1) ======================================
   ✕ at the top right closes; the main button is at the bottom right, in a footer that stays in view while the rest scrolls. */
.dlg-foot { position: sticky; bottom: calc(-1 * var(--s4)); z-index: 3; margin: var(--s2) calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: var(--s3) var(--s4); background: var(--panel); border-top: 1px solid var(--line); gap: var(--s2); }
.dlg-foot .row { gap: var(--s2); }
dialog.tool-dlg .dlg-foot { margin-top: 0; }
.sheet-head h2, .tool-head h2 { margin: 0; font-size: var(--t-lg); min-width: 0; overflow-wrap: anywhere; }
.sheet-head .iconbtn, .tool-head .iconbtn { flex: none; margin-left: auto; }
.tool-head { flex-wrap: nowrap; }
#photoImg { display: block; width: 100%; max-height: 74vh; object-fit: contain; border-radius: 8px; background: var(--sunken); }
@media (max-width: 760px) {
  .dlg-foot { bottom: calc(-1 * (var(--s4) + var(--safe-b))); margin-bottom: calc(-1 * (var(--s4) + var(--safe-b))); padding-bottom: calc(var(--s3) + var(--safe-b)); }
  dialog.tool-dlg .dlg-foot { bottom: calc(-1 * (var(--s3) + var(--safe-b))); margin: 0 calc(-1 * var(--s3)) calc(-1 * (var(--s3) + var(--safe-b))); padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-b)); }
  .tool-bar { position: static; }
  .dlg-foot .btn { flex: 1 1 0; }
  .dlg-foot > .row { flex: 1 1 auto; justify-content: flex-end; }
}
/* the yes/no question: a short title over it; a red button when it deletes */
.ask-dlg h2 { margin: 0 0 var(--s2); font-size: var(--t-lg); }
.ask-dlg p { margin: 0 0 var(--s4); }
.btn.danger-fill { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.btn.danger-fill:hover { background: color-mix(in srgb, var(--danger) 85%, var(--ink)); border-color: var(--danger); }
/* every color dot has a ring that shows on its card, light or dark (a white dot on white, a black one on charcoal) */
body .dot, body .combo > .dot { border: 1px solid var(--dot-ring) !important; }
.v .v-win { box-shadow: 0 0 0 2px var(--panel); }
/* dark: a sheet stands off the page it covers */
@media (prefers-color-scheme: dark) {
  dialog { border-color: var(--line-strong); }
}
/* (a full-screen sheet on a phone: its footer sits at the bottom of the screen even when there is little above it) */
@media (max-width: 760px) {
  dialog:not(.drop-panel):not(.detail):not(.tool-dlg):not(.ask-dlg)[open] { display: flex; flex-direction: column; }
  dialog:not(.drop-panel):not(.detail):not(.tool-dlg):not(.ask-dlg)[open] > form { flex: 1 0 auto; }
  .dlg-foot { margin-top: auto; }
}
/* ===== money boxes and the Sales rows (UX research, wave 2) ===================================== */
/* a "$" inside every box that takes money, so "30" reads as $30 */
.money { position: relative; display: block; margin-top: var(--s1); }
.money::before { content: '$'; position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-2); font-weight: 600; pointer-events: none; }
.money input { padding-left: calc(var(--s3) + 12px); margin-top: 0; }
#salePreview .warn { font-weight: 600; }
/* a piece not sold yet has no Sold, Profit or Days: a dash on a computer, nothing on a phone */
.sales-table td.na::after { content: '—'; color: var(--muted); }
.sales-table .actions .row.nowrap { gap: var(--s1); justify-content: flex-end; }
.sales-table .actions .btn + .btn { margin-left: 0; }
.table-wrap:has(.menu-list:not([hidden])) { overflow: visible; }
@media (max-width: 600px) {
  .sales-table td.na { display: none; }
  .sales-table .actions .row.nowrap { justify-content: stretch; }
  .sales-table .actions [data-sale] { flex: 1; }
}
.tile .spark-span { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ===== the version viewer (UX research, wave 3): one main button; Previous / Next at the bottom ======== */
.dt-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title close' 'count close'; }
.dt-head .win-pill { font-size: var(--t-xs); }
.dt-main .btn { width: 100%; }
.dt-more { border: 1px solid var(--line); border-radius: var(--r); padding: 0 var(--s3); }
.dt-more summary { cursor: pointer; font-weight: 650; min-height: var(--tap); display: flex; align-items: center; }
.dt-more summary::after { content: '▾'; margin-left: var(--s2); font-size: 11px; color: var(--muted); transition: transform .12s; }
.dt-more .more-grid { padding-bottom: var(--s3); }
.dt-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s4) calc(var(--s2) + var(--safe-b)); border-top: 1px solid var(--line); background: var(--panel); }
.dt-foot[hidden] { display: none; }
.dt-foot .btn { min-width: 120px; }
/* ===== Compare (UX research, wave 3) =========================================================== */
/* picking: a big round ring in the corner, hollow until picked, then filled with a tick (the winner's badge keeps the other corner) */
.v-pick { left: auto; right: 6px; top: 6px; width: var(--tap); height: var(--tap); border: 3px solid #fff; background: rgba(14, 20, 30, .35); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .35); }
.v-pick.on { background: var(--accent); color: var(--accent-ink); }
.compare-hint { margin: 0; padding: 0; background: none; color: var(--ink); font-weight: 600; font-size: var(--t-sm); }
/* Results: the featured version (the winner, or the newest) big, with its before/after and main buttons; then "Other versions" */
.results-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr); gap: var(--s4); align-items: center; padding: var(--s3); margin-bottom: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.results-hero[hidden] { display: none; }
.rh-ba { aspect-ratio: 4 / 3; }
.rh-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rh-cap { text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; color: var(--gold-strong); display: inline-flex; align-items: center; gap: 4px; }
.rh-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-xl); }
.rh-name .dot { width: 18px; height: 18px; flex: none; }
.rh-meta { margin: 0; }
.rh-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.rh-btns .btn.primary { flex: 1 1 100%; }
.results-sub { margin: 0 0 var(--s3); font-size: var(--t-md); }
.results-sub .hint { font-family: var(--font); font-size: var(--t-xs); font-weight: 500; }
@media (max-width: 760px) { .results-hero { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s2); } .rh-name { font-size: var(--t-lg); } }
/* the Before chip on each card: shown on hover where there is hover (a press and hold works anywhere, the hint says so) */
@media (hover: hover) { .v .v-before, .v .v-full { opacity: 0; transition: opacity .12s; } .v:hover .v-before, .v:hover .v-full, .v .v-before:focus-visible, .v .v-full:focus-visible, .v.show-before .v-before { opacity: 1; } }
@media (hover: none) { .v .v-before { display: none; } }
/* picking versions to compare: a bar stuck to the bottom with what to do and the buttons */
.compare-bar { position: sticky; bottom: var(--s3); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-top: var(--s4); padding: var(--s2) var(--s3); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.compare-bar[hidden] { display: none; }
.cb-btns { display: inline-flex; gap: var(--s2); }
@media (max-width: 760px) { .compare-bar { bottom: calc(var(--bar-h) + var(--safe-b) + var(--s2)); } }
#downloadAll[aria-disabled=true], #compareMode:disabled { opacity: .5; pointer-events: none; }
.cmp-cost { font-weight: 700; color: var(--ink-2); font-size: var(--t-sm); }
/* a phone: the versions side by side (two across; three or four make a 2×2), so they're compared at a glance, not one under the other */
@media (max-width: 700px) {
  .compare-grid { grid-template-columns: 1fr 1fr !important; gap: var(--s2); }
  .compare-grid img { max-height: 46vh; aspect-ratio: 3 / 4; object-fit: contain; }
  .compare-grid figcaption { font-size: var(--t-sm); line-height: 1.3; }
  .compare-grid figcaption .hint { display: none; }
  .compare-grid figcaption br + .hint + br { display: none; }
  .compare-grid figcaption .btn { width: 100%; padding: 0 6px; }
}
/* result cards on a phone: a long color name takes two lines instead of being cut off ("Forest gr…"); the badge keeps its own corner */
@media (max-width: 760px) {
  .v .nm { align-items: flex-start; }
  .v .nm .dot { margin-top: 2px; }
  .v .nm-t { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
}
.dt-more .label-caps { margin: 0 0 var(--s2); }
.dt-more .ideas { margin-bottom: var(--s3); }
.dt-more .dt-danger { padding-bottom: var(--s3); }
.wb-text .dot { margin: 0 4px; vertical-align: -2px; }
.dt-meta .dt-crop { float: right; margin: -12px -8px 0 var(--s2); }
/* ===== the Studio (UX research, wave 4) ========================================================== */
/* a color: its name (whole, up to two lines), and under it the brand and code */
.swatch { height: auto; min-height: 44px; padding-top: 3px; padding-bottom: 3px; }
.swatch .sw-name { display: flex; flex-direction: column; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; } /* (1.3: Jost's letters need it to sit inside their line) */
.swatch .sw-n { overflow-wrap: anywhere; min-width: 0; }
.swatch .sw-b { overflow-wrap: anywhere; min-width: 0; }
.swatch .sw-b { font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); margin-top: 1px; }
.swatch[aria-pressed="true"] .sw-b { color: inherit; }
/* a ✕ in the color search (an iPhone's search box has none) */
.search-wrap { position: relative; }
.search-wrap input { padding-right: var(--tap); }
.search-x { position: absolute; right: 0; top: 0; width: var(--tap); height: var(--tap); border: 0; background: none; color: var(--ink-2); font-size: 16px; cursor: pointer; border-radius: var(--r-sm); }
.search-wrap #colorSearch { margin-bottom: 0; }
.search-wrap { margin-bottom: var(--s2); }
/* the piece's links look like buttons you can tap */
.links { gap: var(--s1); margin-left: 0; margin-top: var(--s1); }
.links .linkbtn { background: var(--sunken); color: var(--ink); border-radius: 999px; padding: 0 var(--s3); font-weight: 650; }
.links .linkbtn:hover { text-decoration: none; background: var(--line); }
/* the options' one-line summary may take two lines instead of being cut off */
.summary-row .what span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* a computer: the Make column a little wider, and room under the last step so the Generate bar never sits over it */
@media (min-width: 1200px) { .studio { grid-template-columns: minmax(400px, 440px) minmax(0, 1fr); } }
@media (min-width: 761px) { .make-scroll { padding-bottom: var(--s5); scroll-padding-bottom: var(--s5); } }
@media (max-width: 760px) { .ab-info b { font-size: var(--t); } }
/* the narrowest phones: the bar's count may take two lines (whole), and the picked names give it the room */
@media (max-width: 359px) { .ab-info b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; } .ab-info #abNames { display: none; } }
/* ===== Settings in sections (UX research, wave 5) ================================================== */
.set-jump { position: sticky; top: 0; z-index: 2; display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s4) * -1); padding: var(--s2) var(--s4); background: var(--panel); border-bottom: 1px solid var(--line); }
.set-jump::-webkit-scrollbar { display: none; }
.set-jump .chip { flex: none; }
.set-section h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.set-tag { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.set-tag.now { background: var(--warn-soft); color: var(--warn); }
.set-section h3:focus { outline: none; }
/* ===== Photos (UX research, wave 5) ================================================================ */
.photos-bar { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center; }
.photos-bar #archTabs { grid-column: 1; }
.photos-bar #archZip { grid-column: 3; }
.photos-bar .kinds-row { grid-column: 1 / -1; margin: 0; flex-wrap: nowrap; }
.photos-bar #archSearch { grid-column: 1 / 3; }
.photos-bar:has(#archArchivedWrap[hidden]) #archSearch { grid-column: 1 / -1; }
.photos-bar #archArchivedWrap { grid-column: 3; white-space: nowrap; }
.photos-bar #openSaved { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 761px) { .photos-bar { grid-template-columns: auto auto minmax(200px, 1fr) auto; } .photos-bar .kinds-row { grid-column: 2; } .photos-bar #archSearch { grid-column: 3; } .photos-bar #archZip { grid-column: 4; } }
.kinds-row button { min-height: var(--tap); font-size: var(--t-sm); }
@media (max-width: 760px) {
  .kinds-row { margin: 0 !important; }
  .kinds-row button { min-height: var(--tap); }
  /* a phone: three photos across, the photo is the card (its words and buttons are in the viewer) */
  .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0 calc(var(--s4) * -1); }
  .arch-card { border: 0; border-radius: 0; box-shadow: none; position: relative; }
  .arch-card .body { display: none; }
  .arch-card.starred::after { content: '★'; position: absolute; right: 4px; bottom: 2px; color: var(--star-on); font-size: 15px; text-shadow: 0 0 3px rgba(0, 0, 0, .8); pointer-events: none; }
}
/* the viewer: the photo big; ‹ › on its sides; Star, Download and Open piece at the bottom */
.photo-stage { position: relative; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: 64px; border: 0; border-radius: var(--r-sm); background: rgba(14, 20, 30, .55); color: #fff; font-size: 28px; cursor: pointer; }
.photo-nav.prev { left: 6px; } .photo-nav.next { right: 6px; }
.photo-where { text-align: center; margin: var(--s2) 0 0; }
#photoView .dlg-foot { flex-wrap: wrap; }
@media (max-width: 760px) { #photoImg { max-height: calc(100dvh - 210px); } }
/* ===== My paints (UX research, wave 5): a list, every box labeled ====================================== */
.paints-grid { display: flex; flex-direction: column; gap: var(--s2); max-width: 820px; }
.paint-card { flex-direction: row; align-items: flex-start; gap: var(--s3); padding: var(--s3); overflow: visible; }
.paint-card .paint-dot { width: 40px; height: 40px; margin-top: 2px; }
.paint-card .body { flex: 1; min-width: 0; padding: 0; gap: var(--s2); }
.paint-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.paint-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 520px) { .paint-fields { grid-template-columns: 1fr; } }
.mine-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--s2); align-items: end; margin-top: var(--s2); }
@media (max-width: 600px) { .mine-row { grid-template-columns: 1fr 1fr; } .mine-row .mine-name { grid-column: 1 / -1; } .mine-row #mineAdd { grid-column: 1 / -1; } }
.mine-row input[type=color] { width: 100%; }
.paints-add .field > .hint { font-weight: 400; }
.empty-line { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
@media (min-width: 761px) { .photos-bar #archArchivedWrap { grid-column: 1 / -1; justify-self: start; } .photos-bar:has(#archArchivedWrap[hidden]) #archSearch, .photos-bar #archSearch { grid-column: 3; } }
.set-jump { flex: none; }
/* ===== the listing kit (UX research, wave 6): three steps, in order ================================== */
.kit-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: 's1 s3' 's2 s3'; }
.kit-grid > .kit-step:nth-child(1) { grid-area: s1; } .kit-grid > .kit-step:nth-child(2) { grid-area: s2; } .kit-grid > .kit-step:nth-child(3) { grid-area: s3; }
@media (max-width: 860px) { .kit-grid { grid-template-columns: 1fr; grid-template-areas: 's1' 's2' 's3'; } }
.kit-step { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); }
.kit-h { display: flex; align-items: center; gap: var(--s2); margin: 0; font-size: var(--t-md); }
.kit-out { display: flex; flex-direction: column; gap: var(--s1); }
.kit-out-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.kit-out-head label { font-weight: 650; }
.kit-check summary { cursor: pointer; font-weight: 650; min-height: var(--tap); display: flex; align-items: center; }
.kit-checklist { list-style: none; margin: 0; padding: 0; }
.kit-checklist .check { font-weight: 400; }
#kitWrite { min-width: 180px; }
@media (max-width: 760px) { #kitWrite { width: 100%; } }
/* In stock: a piece listed two weeks or more */
.sc-nudge { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--ink); font-size: var(--t-sm); }
.sc-nudge + .btn { align-self: flex-start; }
.stock-card .pair.noplan { grid-template-columns: 1fr minmax(88px, 28%); }
/* receipts: a line being typed in stays above the sticky footer */
.receipt-body, dialog.receipt-dlg { scroll-padding-bottom: 170px; }
/* sign-in: a Show button in the password box; on a phone the card starts at the top, so Sign in is above the keyboard */
.pass-wrap { position: relative; display: block; margin-top: var(--s1); }
.pass-wrap input { padding-right: 76px; }
.pass-show { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-height: 40px; min-width: 64px; border: 0; border-radius: var(--r-sm); background: var(--sunken); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 650; cursor: pointer; }
@media (max-width: 760px) { .login-page { place-items: start center; padding-top: calc(var(--s5) + var(--safe-t)); } }
/* ===== empty screens and words for a computer only (UX research, wave 6) ========================== */
.empty-icon { color: var(--accent); margin: 0 auto var(--s2); display: block; }
.empty .row .btn { margin-top: var(--s2); }
/* keyboard words (shortcuts, "drop photos", keyboard help) are not shown on a touch screen */
@media (pointer: coarse) { .no-touch { display: none !important; } }
/* the "+" says "New piece" on a computer */
.add-btn .add-word { display: none; }
@media (min-width: 1001px) { .add-btn { width: auto; padding: 0 var(--s3) 0 var(--s2); gap: 6px; display: inline-flex; align-items: center; } .add-btn .add-word { display: inline; font-size: var(--t-sm); font-weight: 650; } .add-btn svg { width: 20px; height: 20px; } }
.pass-show { top: 0; right: 0; transform: none; height: var(--tap); min-height: var(--tap); border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 1px solid var(--field-border); }

/* (a grid cell is as wide as its contents unless told otherwise: the row of kinds scrolls inside its cell, the page never goes sideways) */
.photos-bar > * { min-width: 0; }
/* ===== a generated picture, full screen ================================================================ */
dialog.full-view { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; color: #fff; }
dialog.full-view::backdrop { background: #000; }
.fv-stage { position: absolute; inset: 0; display: grid; place-items: center; touch-action: pinch-zoom; }
.fv-stage img { grid-area: 1 / 1; max-width: 100vw; max-height: 100dvh; width: auto; height: auto; object-fit: contain; }
.fv-top, .fv-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); background: linear-gradient(rgba(0, 0, 0, .55), transparent); transition: opacity .15s; }
.fv-top { top: 0; padding-top: calc(var(--s3) + var(--safe-t)); }
.fv-bottom { bottom: 0; padding-bottom: calc(var(--s3) + var(--safe-b)); background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
#fvLabel { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.fv-where { font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.fv-btn { min-width: var(--tap); min-height: var(--tap); padding: 0 var(--s3); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font: inherit; font-weight: 650; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fv-btn[aria-pressed=true] { background: #fff; color: #000; }
.fv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap); height: 64px; font-size: 28px; padding: 0; border-radius: var(--r-sm); transition: opacity .15s; }
.fv-nav.prev { left: var(--s2); } .fv-nav.next { right: var(--s2); }
.fv-nav[hidden], .fv-btn[hidden] { display: none; }
dialog.full-view.bare .fv-top, dialog.full-view.bare .fv-bottom, dialog.full-view.bare .fv-nav { opacity: 0; pointer-events: none; }
/* the ⤢ on the before/after picture in the viewer */
.ba-full { position: absolute; top: 8px; right: 8px; z-index: 2; width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: rgba(14, 20, 30, .75); color: #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.compare-grid img { cursor: zoom-in; }
.split-share { font-weight: 650; font-variant-numeric: tabular-nums; }
/* ===== costs per piece: what it went on, and the shelf (2026-10-14) ===================================== */
.cost-kinds { list-style: none; margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; font-size: var(--t-sm); }
.cost-kinds li { display: flex; justify-content: space-between; gap: var(--s3); font-variant-numeric: tabular-nums; }
.shelf-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.shelf-use { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'dot what what' 'dot sqft cost' 'use use use'; gap: var(--s1) var(--s2); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shelf-use.match { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.shelf-use .dot { grid-area: dot; width: 22px; height: 22px; align-self: start; margin-top: 2px; }
.su-what { grid-area: what; min-width: 0; overflow-wrap: anywhere; }
.su-sqft { grid-area: sqft; display: flex; align-items: center; gap: var(--s1); flex-direction: row; font-weight: 400; }
.su-sqft input { width: 6em; }
.su-cost { grid-area: cost; font-weight: 700; text-align: right; }
.shelf-use [data-use] { grid-area: use; justify-self: end; min-width: 96px; }
@media (min-width: 600px) { .shelf-use { grid-template-columns: auto minmax(0, 1fr) auto auto auto; grid-template-areas: 'dot what sqft cost use'; } }
.shelf-more summary { cursor: pointer; font-weight: 650; min-height: var(--tap); display: flex; align-items: center; color: var(--accent); }
.cost-tag.shelf { background: var(--accent-soft); color: var(--accent); }
/* My paints → On the shelf */
.shelf-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s4); box-shadow: var(--shadow); max-width: 820px; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.shelf-head h2 { margin: 0; font-size: var(--t-lg); }
.shelf-list { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; gap: var(--s2); }
.shelf-item { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.shelf-item .dot { width: 32px; height: 32px; margin-top: 2px; }
.si-body { flex: 1; min-width: 0; display: grid; gap: var(--s1); }
.si-lots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-size: var(--t-sm); color: var(--ink-2); }
.si-lots li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); align-items: center; }
.si-cover { display: inline-flex; flex-direction: row; align-items: center; gap: var(--s1); font-weight: 400; }
.si-cover input { width: 5.5em; }
.shelf-add summary { cursor: pointer; font-weight: 650; min-height: var(--tap); display: flex; align-items: center; color: var(--accent); }
.shelf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); align-items: end; }
.shelf-form .shelf-name, .shelf-form .error, .shelf-form .btn { grid-column: 1 / -1; }
.shelf-form .error:empty { display: none; }

/* ===== brand: "Navy coat" (navy blazer, camel coat, ivory; chosen 2026-10-14) ========================================
   Serif for titles and money (Didot / Bodoni, built into Apple devices), small spaced capitals for labels, squarer corners,
   navy for what you press, camel for the one thing a screen leads with. */
.view-title, .brand-name, .sheet-head h2, .tool-head h2, .chart-card h3 { font-family: var(--serif); font-weight: var(--serif-w); letter-spacing: .01em; }
.view-title { font-size: 26px; }
.sheet-head h2, .tool-head h2 { font-size: 22px; }
.chart-card h3 { font-size: 19px; }
.brand-name { font-size: var(--t-xl); white-space: nowrap; }
.tile .tv:not(.text), .es-total, #salesTiles .tile.main .tv { font-family: var(--serif); font-weight: var(--serif-w); letter-spacing: .01em; }
.exp-month h3, .caps { text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; }
.exp-month h3 > span:last-child { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 400; color: var(--ink-2); }
.er-amt { font-family: var(--serif); font-weight: var(--serif-w); font-size: 18px; }
/* (one filled button style for the main action: navy by day, camel at night; "gold" buttons are main buttons too, not a second fill) */
.btn.gold { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.gold:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* the chosen tab carries a camel rule, like a hem */
.tabbar button[aria-pressed="true"]::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--gold-strong); }
.seg button[aria-pressed="true"] { letter-spacing: .02em; }
/* (on Expenses the period is chosen in the navy summary, so the one at the top steps aside) */
#salesView:has(#salesExpenses:not([hidden])) .sales-top > #salesRange { display: none; }
/* section titles in serif too (the plain bold stays for small labels and forms) */
.view h2:not(.sr-only), .panel-head h2, .shelf-box h2, .shelf-box h3, #resultsCol h2 { font-family: var(--serif); font-weight: var(--serif-w); letter-spacing: .01em; }
/* a piece's "cost so far" is the navy money card, like Expenses' */
.cost-sum { background: var(--hero); color: var(--hero-ink); padding: var(--s3) var(--s4); border-radius: var(--r); }
@media (prefers-color-scheme: dark) { .cost-sum { border: 1px solid var(--line-strong); } }
.cost-sum .hint, .cost-sum .muted { color: var(--hero-sub); }
.cost-sum .cost-big { font-family: var(--serif); font-weight: var(--serif-w); font-size: 34px; color: var(--hero-ink); }
.cost-sum .cost-kinds { border-top-color: var(--gold); color: var(--hero-ink); }
.cost-sum a, .cost-sum button.linkish { color: var(--hero-ink); }
/* Costs sheet → Estimated profit: likely price, costs and profit in a row, then why, then ways to make more */
.est-box { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); }
.est-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.est-figs div, .est-tips { display: grid; gap: 1px; min-width: 0; }
.est-figs small, .est-tips small { text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; color: var(--muted); }
.est-figs b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.est-figs b.gain { color: var(--good); } .est-figs b.loss { color: var(--danger); }
.est-figs span { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.est-why { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: var(--t-sm); }
.est-chip { display: inline-flex; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.est-chip b { font-weight: 600; color: var(--ink); }
.est-warn { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--t-sm); }
.est-tips ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-sm); }
.est-tips li { display: flex; justify-content: space-between; gap: var(--s3); }
.est-tips li b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.est-foot { align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.est-foot .hint { flex: 1 1 14em; font-size: var(--t-xs); }
.est-box > .hint { margin: 0; }
@media (max-width: 420px) { .est-figs b { font-size: 19px; } }
.finding-title { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; letter-spacing: .01em; }
/* (the Studio keeps its chosen chips as they were: ink, not the brand's navy) */
.studio :is(.tabs button[aria-pressed="true"], .chip.on, .chip[aria-pressed="true"]) { background: var(--ink); color: var(--panel); }

/* ---- Charts tab, rebuilt for the flipper (verdict + action cards, know your numbers, buy smarter, the market) ----------------------- */
/* One meaning per color: navy your own numbers, camel the local market, quiet gray money out, red a loss or "act now", green a gain. */
.chart-svg .ch-in, .chart-svg .ch-pos { fill: var(--own-bar); }
.chart-svg .ch-out { fill: var(--out-bar); }
.chart-svg .ch-mkt { fill: var(--mkt-bar); }
.chart-svg .ch-dot-neg { stroke: var(--danger); }
.chart-svg .ch-tag { fill: var(--muted); }
.chart-svg .ch-none { fill: var(--muted); font-style: italic; }
.chart-svg .ch-label { fill: var(--ink); font-weight: 650; }
.lg-sw.ch-in { background: var(--own-bar); }
.lg-sw.ch-out { background: var(--out-bar); }
.lg-sw.ch-mkt { background: var(--mkt-bar); }
.mkt-tag { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--mkt-soft); color: var(--mkt-ink); font-size: var(--t-xs); font-weight: 650; letter-spacing: .02em; line-height: 1.6; vertical-align: 1px; font-family: inherit; }

/* The top: one line of verdict, then three cards that open the pieces */
.chart-top { margin: 0 0 var(--s4); }
.verdict { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--own-bar); border-radius: var(--r-sm); font-size: var(--t-md); line-height: 1.4; }
.verdict strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 20px; letter-spacing: .01em; }
.verdict.v-good { border-left-color: var(--good); }
.verdict.v-good strong { color: var(--good); }
.verdict.v-behind { border-left-color: var(--danger); }
.verdict.v-behind strong { color: var(--danger); }
.act-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 96px; padding: var(--s3); text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--own-bar); border-radius: var(--r-sm); cursor: pointer; }
.act:hover { background: var(--sunken); }
.act:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.act-n { font-family: var(--serif); font-weight: var(--serif-w); font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.act-t { font-weight: 650; font-size: var(--t); line-height: 1.25; }
.act-s { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.3; }
.act.act-now { border-top-color: var(--danger); }
.act.act-now .act-n { color: var(--danger); }
.act.act-good { border-top-color: var(--good); }
.act.act-good .act-n { color: var(--good); }
.act.act-calm { border-top-color: var(--line); }
.act.act-calm .act-n { color: var(--muted); }
.act.skel { cursor: default; }
@media (max-width: 480px) {
  .act { padding: var(--s2); min-height: 92px; }
  .act-n { font-size: 26px; }
  .act-t { font-size: var(--t-sm); }
  .act-s { font-size: var(--t-xs); }
  .verdict { padding: var(--s2) var(--s3); font-size: var(--t); }
  .verdict strong { font-size: 18px; }
}

/* Know your numbers: four tiles, one caption for the row */
.know { margin: 0 0 var(--s3); }
.know-title { margin: 0 0 var(--s2); font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; letter-spacing: .01em; }
#chartTiles.know-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 720px) { #chartTiles.know-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile .tile-sub { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-2); }
.tile.tile-none .tv.text { color: var(--muted); font-size: var(--t-md); min-height: 0; font-family: inherit; }
.know .tiles-note { margin-top: var(--s1); }

/* How costs are counted: the switch with its one-line meaning beside it */
.chart-controls .chart-basis-hint { margin: 0; flex: 1 1 220px; }
.chart-controls > .hint.chart-basis-hint { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
@media (max-width: 560px) { .chart-controls .chart-basis-hint { flex-basis: 100%; } }

/* The cards stretch to the height of their row: no ragged gaps */
#chartsBody { align-items: stretch; }
#chartsBody > .more-charts { grid-column: 1 / -1; }
.chart-card .focus-sub { margin: var(--s4) 0 var(--s1); font-size: var(--t-md); font-family: var(--serif); font-weight: var(--serif-w); letter-spacing: .01em; }
.none { color: var(--muted); font-style: italic; }

/* Buy smarter */
.buy-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s3); }
.buy { border: 1px solid var(--line); border-left: 4px solid var(--own-bar); border-radius: var(--r-sm); padding: var(--s3); background: var(--panel); }
.buy-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s3); }
.buy-head strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; }
.buy-pay { font-size: var(--t); color: var(--ink-2); }
.buy-pay b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; color: var(--ink); }
.buy-figs { margin: var(--s2) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--s2); }
.buy-figs .bf { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.buy-figs dt { color: var(--ink-2); font-size: var(--t-xs); line-height: 1.5; }
.buy-figs dd { margin: 0; display: flex; flex-direction: column; }
.buy-figs dd b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 20px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.buy-figs .bf-mkt dd b { color: var(--mkt-ink); }
.buy-figs dd .hint { font-size: var(--t-xs); line-height: 1.35; }
.buy-figs .mkt-word { color: var(--mkt-ink); font-weight: 650; }
.buy-work { margin: var(--s2) 0 0; font-size: var(--t); color: var(--ink); line-height: 1.45; }
.buy-work.buy-mkt { margin-top: var(--s1); color: var(--ink-2); }
.buy p.hint { margin: var(--s1) 0 0; }

/* Where to focus, and the market's finish / color / pair table */
.table-scroll { overflow-x: auto; }
.focus-table { width: 100%; border-collapse: collapse; font-size: var(--t); font-variant-numeric: tabular-nums; }
.focus-table th, .focus-table td { padding: var(--s2) var(--s1); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.focus-table thead th { font-size: var(--t-sm); color: var(--ink-2); font-weight: 650; }
.focus-table .fnum { text-align: right; white-space: nowrap; }
.focus-table tbody th { font-weight: 650; min-width: 9em; }
.focus-table td .hint { display: block; font-size: var(--t-xs); }
.focus-table tbody th .hint { display: block; font-weight: 400; font-size: var(--t-xs); }
.focus-table tr.sub th { padding-left: var(--s4); font-weight: 400; }
.focus-table tr.grp th { padding-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); border-bottom: 0; }
.focus-table .fnum .mkt-tag { margin-left: 2px; }
.focus-kinds { margin: var(--s2) 0; }

/* Where the money goes: stores and the paint shelf */
.store-list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .chart-card.wide .store-list { columns: 2; column-gap: var(--s5); } .chart-card.wide .store-list li { break-inside: avoid; } }
.store-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center; width: 100%; min-height: var(--tap); padding: var(--s1) var(--s1); font: inherit; color: var(--ink); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.store-row:hover { background: var(--sunken); }
.store-row strong { font-variant-numeric: tabular-nums; }
.shelf-bar { height: 14px; border-radius: 4px; background: var(--out-bar); overflow: hidden; margin: var(--s2) 0; }
.shelf-bar span { display: block; height: 100%; background: var(--own-bar); }

/* More charts: folded by default */
.more-charts { margin-top: var(--s2); border-top: 1px solid var(--line-strong); }
.more-charts > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); min-height: var(--tap); padding: var(--s3) 0; cursor: pointer; list-style: none; }
.more-charts > summary::-webkit-details-marker { display: none; }
.more-charts > summary::before { content: '▸'; color: var(--accent); align-self: center; }
.more-charts[open] > summary::before { content: '▾'; }
.more-charts .mc-title { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; letter-spacing: .01em; color: var(--ink); }
.more-charts .more-body { margin-top: 0; }

@media (forced-colors: active) {
  .chart-svg .ch-out { fill: GrayText; }
  .chart-svg .ch-mkt { fill: LinkText; }
  .lg-sw.ch-out { background: GrayText; }
  .lg-sw.ch-mkt { background: LinkText; }
  .act { border: 1px solid CanvasText; }
}

/* One tap to any answer: the row of links under the numbers */
.chart-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.chart-jump:empty { display: none; }
.chart-jump .jump { min-height: var(--tap); padding: 0 var(--s3); font: inherit; font-size: var(--t-sm); font-weight: 650; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: 999px; cursor: pointer; }
.chart-jump .jump:hover { background: var(--sunken); }
.chart-jump .jump:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#chartsBody .chart-card { scroll-margin-top: 84px; }
#chartsBody .chart-card h3:focus { outline: none; }
@media (max-width: 480px) { .chart-jump { gap: 6px; } .chart-jump .jump { padding: 0 10px; } }
.chart-jump .jump.skel { display: inline-flex; align-items: center; color: transparent; background: var(--sunken); border-color: var(--line); cursor: default; }

/* Round 2: the half-width cards flow in two columns on a computer (no gaps beside short cards) */
#chartsBody > .chart-cols { grid-column: 1 / -1; columns: 1; column-gap: var(--s4); }
#chartsBody > .chart-cols > .chart-card { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 var(--s4); vertical-align: top; }
@media (min-width: 900px) { #chartsBody > .chart-cols { columns: 2; } }
@media (max-width: 480px) { #chartsBody > .chart-cols > .chart-card { margin-bottom: var(--s3); } }
/* the row of links: one line that scrolls sideways on a phone, so it never pushes the charts down */
@media (max-width: 560px) { .chart-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; } .chart-jump::-webkit-scrollbar { display: none; } .chart-jump .jump { flex: none; } }
.gain-note { color: var(--good); }
.focus-table .fnum .none { white-space: normal; }
.recent-row { grid-template-columns: 1fr auto auto; }
.recent-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.recent-row .gain { color: var(--good); } .recent-row .loss { color: var(--danger); }
#chartControls { margin: var(--s2) 0 0; }
.skel-copy, .skel-copy * { color: transparent !important; } .skel-copy .verdict, .skel-copy .act { background: var(--sunken); border-color: var(--line); }
/* the cards' sheets: the whole name and the reason are read, so they wrap rather than cut off */
.act-list .drill-row { grid-template-columns: 1fr; gap: var(--s1); }
.act-list li:has(.drill-listed) { display: flex; align-items: center; gap: var(--s2); }
.act-list li:has(.drill-listed) .drill-row { flex: 1; min-width: 0; }
.act-list .drill-listed { flex: none; }
.act-list .dr-main strong, .act-list .dr-main .hint { white-space: normal; overflow: visible; }
.act-list .dr-amt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
/* round 3: a market figure from under 10 sales is an outline, as on the market page */
.chart-svg .ch-hint { fill-opacity: .28; stroke: var(--mkt-bar); stroke-width: 1.5; stroke-dasharray: 3 2; }
.lg-sw.ch-hint-sw { background: transparent; border: 1.5px dashed var(--mkt-bar); }

/* ---- fonts everywhere (Option A), the Studio included -------------------------------------------------------------------- */
/* Money figures line up in columns and keep full-height digits, in both faces. (Jost's heaviest weight is 700; a heavier ask shows 700.) */
body { font-variant-numeric: lining-nums; }
.num, .fnum, td.num, .tv, .es-total, .er-amt, .act-n, .cost-big, .buy-pay b, .buy-figs dd b, .ledger td, .chart-table td { font-variant-numeric: tabular-nums lining-nums; }
/* The Studio's step titles and section headings in the serif, with their numbers, hints and controls kept in the sans. */
.card.step > h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; letter-spacing: .01em; }
.card.step > h3 :is(.num, .hint, .seg, button, select, label) { font-family: var(--font); font-weight: 600; font-size: var(--t-sm); letter-spacing: 0; }
.card.step > h3 .num { font-size: 12px; }
/* Small uppercase labels: Jost at 600 with a little spacing (never the serif). */
.caps, .eyebrow { font-family: var(--font); }

/* ---- liveliness (2026-10-15): the shared parts ------------------------------------------------------------------------- */
/* The sign-in page: a navy band with the brand and a before/after, the form card overlapping it. */
.login-page { display: block; place-items: initial; padding: 0 0 calc(var(--s5) + var(--safe-b)); }
.login-band { background: var(--hero); color: var(--hero-ink); padding: calc(var(--s5) + var(--safe-t)) var(--s4) 76px; }
.lb-inner { max-width: 440px; margin: 0 auto; display: grid; gap: var(--s2); }
.login-band .brand { color: var(--hero-ink); min-height: 0; }
.login-band .brand-name { display: inline; font-size: 30px; line-height: 1.1; }
.login-band .logo { width: 58px; height: 58px; margin: -7px -4px -7px -7px; } /* (the tile melts into the navy band, so the chair itself is shown larger) */
.lb-tag { margin: 0; color: var(--hero-sub); font-size: var(--t-md); }
.lb-ba { margin: var(--s3) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.lb-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; max-width: 100%; }
.lb-photo svg, .lb-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-photo span { position: absolute; left: 6px; bottom: 6px; padding: 1px 7px; border-radius: 3px; background: color-mix(in srgb, var(--hero) 82%, transparent); color: var(--hero-ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.login-page .login-card { margin: -56px auto 0; position: relative; max-width: 440px; width: calc(100% - 2 * var(--s4)); }
.login-card h1 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 28px; letter-spacing: .01em; }
@media (min-width: 900px) { .login-band { padding-top: calc(var(--s6) + var(--safe-t)); } }

/* One navy hero per page: the page's key number first (the Expenses pattern, for any page). */
.page-hero { background: var(--hero); color: var(--hero-ink); border-radius: var(--r); padding: var(--s4); margin: 0 0 var(--s3); display: grid; gap: var(--s1); max-width: 880px; }
@media (prefers-color-scheme: dark) { .page-hero { border: 1px solid var(--line-strong); } }
.ph-cap { text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; color: var(--hero-sub); }
.ph-big { font-family: var(--serif); font-weight: var(--serif-w); font-size: 44px; line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; }
.ph-big.loss { color: var(--hero-bad); }
.ph-big.gain { color: var(--hero-good); }
.ph-sub { color: var(--hero-sub); font-size: var(--t-sm); margin: 0; }
.ph-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); border-top: 1px solid var(--gold); padding-top: var(--s3); margin-top: var(--s2); }
.ph-trio div { display: grid; gap: 1px; min-width: 0; }
.ph-trio small { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 600; color: var(--hero-sub); }
.ph-trio b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 21px; font-variant-numeric: tabular-nums lining-nums; }
.ph-trio b.gain { color: var(--hero-good); }
.ph-trio b.loss { color: var(--hero-bad); }
.ph-band { display: flex; gap: 2px; height: 9px; border-radius: 5px; overflow: hidden; margin-top: var(--s3); }
.ph-band i { display: block; min-width: 4px; }
.ph-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-sm); color: var(--hero-sub); margin: var(--s1) 0 0; padding: 0; list-style: none; }
.ph-legend li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c); }
.ph-band .young, .ph-legend .young { --c: var(--hero-good); background: var(--hero-good); }
.ph-band .mid, .ph-legend .mid { --c: var(--hero-mid); background: var(--hero-mid); }
.ph-band .old, .ph-legend .old { --c: var(--hero-bad); background: var(--hero-bad); }
.ph-legend li { background: none !important; }

/* Section titles: a short camel rule under them (a tailoring detail; used on page sections, not on every card). */
.ruled::after { content: ''; display: block; width: 34px; height: 2px; background: var(--gold); margin-top: 6px; }

/* Empty states: an icon in a soft camel circle, one sentence, the one button that fills the page. */
.empty-state { grid-column: 1 / -1; margin: var(--s3) auto; display: grid; justify-items: center; text-align: center; gap: var(--s2); padding: var(--s5) var(--s3); }
.empty-state .es-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-strong); display: grid; place-items: center; }
.empty-state .es-ic .icon { width: 30px; height: 30px; }
.empty-state h3 { margin: 0; font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; letter-spacing: .01em; }
.empty-state p { margin: 0; max-width: 34ch; color: var(--ink-2); }
.empty-state .row { justify-content: center; }

/* Status chips: color that means something (sold, in stock, how long a piece has waited). */
.st-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: var(--t-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; }
.st-chip.sold, .st-chip.young { background: var(--good-soft); color: var(--good); }
.st-chip.stock { background: var(--accent-soft); color: var(--ink); }
.st-chip.mid { background: var(--warn-soft); color: var(--warn); }
.st-chip.old { background: var(--danger-soft); color: var(--danger); }
.st-chip .sw { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dot-ring); }

/* In stock: an age stripe on each card (as the hero), the name in the serif, and its chips. */
.stock-card { border-left: 5px solid var(--line-strong); }
.stock-card[data-age="young"] { border-left-color: var(--good); }
.stock-card[data-age="mid"] { border-left-color: var(--warn); }
.stock-card[data-age="old"] { border-left-color: var(--danger); }
.stock-card .label strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* My paints: the shelf as cans in the hero, the colors as tiles with their color as a band across the top. */
.paints-hero .cans { list-style: none; margin: var(--s2) 0 0; padding: 0 0 2px; display: flex; gap: var(--s4); overflow-x: auto; }
.can-item { display: grid; justify-items: center; text-align: center; gap: 2px; min-width: 76px; max-width: 110px; font-size: var(--t-xs); }
.can-item b { font-size: var(--t-sm); font-weight: 600; color: var(--hero-ink); overflow-wrap: anywhere; }
.can-item small { color: var(--hero-sub); }
.paints-colors-title { margin: var(--s4) 0 var(--s2); font-size: 24px; }
.paints-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); max-width: 880px; }
.paint-card { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.paint-card .paint-dot { display: block; width: 100%; height: 64px; margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.paint-card .body { padding: var(--s3); }
.paint-card .paint-head strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
.shelf-item .dot { width: 40px; height: 40px; border-radius: var(--r-sm); }
.shelf-empty { list-style: none; }
.login-band .brand { gap: 12px; }

/* Sales: the lead number is the page's navy hero (the same as Expenses); pieces show their name in the serif and a status chip. */
#salesTiles .tile.main { grid-column: 1 / -1; background: var(--hero); border-color: var(--hero); color: var(--hero-ink); padding: var(--s4); box-shadow: none; }
#salesTiles .tile.main .hint, #salesTiles .tile.main .t-sub { color: var(--hero-sub); text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; }
#salesTiles .tile.main .tv { font-size: 44px; line-height: 1.05; color: var(--hero-ink); }
#salesTiles .tile.main .tv.loss { color: var(--hero-bad); }
#salesTiles .tile.main .tv.gain { color: var(--hero-good); }
@media (max-width: 760px) { #salesTiles .tile.main .tv { font-size: 40px; } }
@media (prefers-color-scheme: dark) { #salesTiles .tile.main { border-color: var(--line-strong); } }
.sales-table td.name strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 17px; letter-spacing: .01em; }
.sales-table td.thumb img { border-radius: var(--r-sm); }

/* Photos: the newest look, big, with its name over a navy band. */
.arch-hero { position: relative; max-width: 880px; margin: 0 0 var(--s3); border-radius: var(--r); overflow: hidden; background: var(--hero); }
.arch-hero .ah-img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.arch-hero .ah-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; max-width: 100%; }
.arch-hero .ah-cap { display: grid; gap: 2px; padding: var(--s3) var(--s4); color: var(--hero-ink); }
.arch-hero .ah-cap b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; letter-spacing: .01em; }
.arch-hero .ah-sub { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; color: var(--hero-sub); font-size: var(--t-sm); }

/* Settings: the shop as a navy header card; each section on a light panel, headed by an icon and a serif title. */
.set-shop { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); align-items: center; background: var(--hero); color: var(--hero-ink); border-radius: var(--r); padding: var(--s3) var(--s4); }
.set-shop .ss-mark { width: 48px; height: 48px; border-radius: 10px; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; }
.set-shop .ss-text { display: grid; min-width: 0; }
.set-shop b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 21px; letter-spacing: .01em; overflow-wrap: anywhere; }
.set-shop small { color: var(--hero-sub); font-size: var(--t-sm); }
.set-section { background: var(--panel); border: 1px solid var(--line); }
.set-section > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
.set-section > h3 .set-tag { font-family: var(--font); letter-spacing: 0; }
.set-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--ink); display: inline-grid; place-items: center; flex: none; }

/* Charts: the verdict is the page's navy hero; the action cards carry an icon; What to pay folds its reasons under one line. */
.verdict { background: var(--hero); color: var(--hero-ink); border-color: var(--hero); border-left-color: var(--hero-sub); padding: var(--s3) var(--s4); font-size: var(--t-md); }
.verdict strong { font-size: 24px; color: var(--hero-ink); }
.verdict.v-good { border-left-color: var(--hero-good); }
.verdict.v-good strong { color: var(--hero-good); }
.verdict.v-behind { border-left-color: var(--hero-bad); }
.verdict.v-behind strong { color: var(--hero-bad); }
@media (prefers-color-scheme: dark) { .verdict { border-color: var(--line-strong); } }
.act { position: relative; }
.act-ic { position: absolute; right: 8px; top: 8px; color: var(--muted); }
.act.act-now .act-ic { color: var(--danger); }
.act.act-good .act-ic { color: var(--good); }
.buy-why { margin-top: var(--s1); }
.buy-why > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }

/* Expenses: category chips carry their color from the hero bar; months are set off by a camel line. */
.exp-cat .ec-name .eh-key { vertical-align: 0; border: 1px solid var(--line-strong); }
.exp-month h3 { border-bottom: 1px solid var(--gold); padding-bottom: var(--s1); }

/* The Studio (owner's yes, 2026-10-15; layout and buttons unchanged): a bigger piece photo, the picked colors as large swatches, and
   the picked colors as dots in the Generate bar. */
.photo-btn { width: 88px; height: 88px; border-radius: var(--r); }
.photo-btn img { object-fit: cover; }
@media (max-width: 760px) { .photo-btn { width: 80px; height: 80px; } }
.piece-row .meta .pm-name { font-family: var(--serif); font-weight: var(--serif-w); font-size: 20px; letter-spacing: .01em; }
@media (max-width: 360px), (max-height: 600px) { .photo-btn { width: 56px; height: 56px; } .piece-row .meta .pm-name { font-size: 18px; line-height: 1.15; } } /* (the smallest phones keep the old size, so a row of colors still fits on the first screen) */
.pick-chip { min-height: var(--tap); padding-left: 5px; gap: var(--s2); }
.pick-chip .dot { width: 32px; height: 32px; border-radius: var(--r-sm); margin: 0; box-shadow: inset 0 0 0 1px var(--dot-ring); }
.ab-dots { display: inline-flex; gap: 3px; margin-right: 6px; vertical-align: -2px; }
.ab-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* The sale form: section titles, and the live money as a navy panel with big figures (right under the price, as before). */
.sale-sec { margin: var(--s2) 0 0; font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
#saleDlg .profit-preview { background: var(--hero); color: var(--hero-ink); padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
#saleDlg .profit-preview .sp-figs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
#saleDlg .profit-preview .sp-fig { display: grid; }
#saleDlg .profit-preview .sp-fig small { text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 600; color: var(--hero-sub); }
#saleDlg .profit-preview .sp-fig b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
#saleDlg .profit-preview .gain { color: var(--hero-good); }
#saleDlg .profit-preview .loss { color: var(--hero-bad); }
#saleDlg .profit-preview .sp-line { font-size: var(--t-sm); color: var(--hero-sub); }
#saleDlg .profit-preview .sp-line strong { color: var(--hero-ink); }
#saleDlg .profit-preview .sp-line .gain, #saleDlg .profit-preview .sp-line .loss { color: inherit; }
#saleDlg .profit-preview .hint, #saleDlg .profit-preview .warn { color: var(--hero-sub); }
/* The Sold sheet's footer: "the materials are an estimate · I had them already: count $0" above Cancel and Save */
.sale-foot { display: grid; gap: var(--s1); }
.sale-estfix { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.sale-estfix .linkbtn { padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; }

/* The piece sheet: the piece's best look with its name and status over a navy band, then its three numbers. */
.ps-head { position: relative; border-radius: var(--r); overflow: hidden; background: var(--hero); }
.ps-head img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; max-width: 100%; }
.ps-cap { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); color: var(--hero-ink); }
.ps-cap b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; letter-spacing: .01em; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--s2); }
.ps-figs div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3); display: grid; align-content: start; }
.ps-figs small { font-size: var(--t-xs); color: var(--muted); }
.ps-figs b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; font-variant-numeric: tabular-nums lining-nums; }
.ps-figs b.gain { color: var(--good); }
.ps-figs b.loss { color: var(--danger); }
.ps-figs .ps-sub { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
/* The sign-in page on a phone: the band stays short enough that the Sign in button is above where the keyboard comes up
   (the before/after becomes a wide strip, the drawing centred in it; a real photo fills it). */
@media (max-width: 600px) {
  .login-band { padding: calc(var(--s3) + var(--safe-t)) var(--s4) 64px; }
  .login-band .brand-name { font-size: 26px; }
  .lb-tag { font-size: var(--t-sm); }
  .lb-ba { margin-top: var(--s1); }
  .lb-photo { aspect-ratio: 5 / 2; }
  .lb-photo svg { width: auto; margin: 0 0 0 auto; overflow: visible; } /* (to the right, clear of the Before / After label) */
  .login-page .login-card { padding: var(--s4); }
  .login-card h1 { font-size: 24px; }
  .login-card form { margin-top: var(--s3); }
  .login-card .error:empty { min-height: 0; margin: 0; }
  .login-card .btn.primary { margin-top: 0; }
}
/* The paint can: tin and outline from the theme, the fill is the paint's own color. */
.can-svg .can-handle { fill: none; stroke: var(--muted); stroke-width: 2; }
.can-svg .can-lid { fill: var(--line-strong); }
.can-svg .can-tin { fill: var(--sunken); }
.can-svg .can-rim { fill: none; stroke: var(--muted); stroke-width: 1.5; }
/* On a computer the headlines sit side by side with their picture, so they don't become tall empty slabs. */
@media (min-width: 760px) {
  .paints-hero { grid-template-columns: auto 1fr; column-gap: var(--s5); align-items: center; }
  .paints-hero > .ph-cap, .paints-hero > .ph-big, .paints-hero > .ph-sub { grid-column: 1; }
  .paints-hero .cans { grid-column: 2; grid-row: 1 / span 3; margin: 0; justify-content: flex-end; }
  .arch-hero:not([hidden]) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; }
  .arch-hero .ah-img img { aspect-ratio: 4 / 3; max-height: 340px; }
  .arch-hero .ah-cap { padding: var(--s5); }
}

/* ---- liveliness round 2 (after the first two raters) ---- */
/* Placeholders read as examples, never as typed answers. */
input::placeholder, textarea::placeholder { font-weight: 400; }
/* Expenses category chips: the share is a bar along the bottom, so it never cuts through the amount. */
.exp-cat { background: linear-gradient(var(--bar-fill), var(--bar-fill)) left bottom / var(--share, 0%) 4px no-repeat, var(--panel); }
/* "In stock" on the piece sheet is the same green as the In stock chip. */
.btn.on-stock { color: var(--good); border-color: var(--good); background: var(--good-soft); }
/* Settings tags: one quiet style; the words say which saves at once. */
.set-tag, .set-tag.now { background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line); }
/* In stock: "Mark as sold" outlined, so a screen of cards is not a wall of navy buttons (the headline is the one navy block). */
.stock-card .sc-btns .btn.sold-btn { background: var(--panel); color: var(--accent); border-color: var(--accent); }
.stock-card .sc-btns .btn.sold-btn:hover { background: var(--accent-soft); }
/* Charts: the action cards share one quiet top edge; only "act now" keeps its red. */
.act, .act.act-good, .act.act-calm { border-top-color: var(--line-strong); }
/* Charts: stock age in the same three colors as In stock. */
.chart-svg .ch-age-young { fill: var(--good); }
.chart-svg .ch-age-mid { fill: var(--warn); }
.chart-svg .ch-age-old { fill: var(--danger); }
/* The paint cans on the navy headline: an ivory tin, so a dark paint still shows. */
.paints-hero .can-tin { fill: var(--hero-ink); }
.paints-hero .can-lid, .paints-hero .can-handle, .paints-hero .can-rim { stroke: var(--hero-sub); }
.paints-hero .can-lid { fill: var(--hero-sub); }
/* A paint color band always has an edge, so a dark color still shows on a dark card. */
.paint-card .paint-dot { box-shadow: inset 0 0 0 1px var(--dot-ring); }
/* On a computer the headlines run the width of the page, lining up with the cards under them. */
@media (min-width: 760px) { .page-hero, .exp-hero, .arch-hero { max-width: none; } }
@media (prefers-color-scheme: dark) { .page-hero, .arch-hero, #salesTiles .tile.main, #saleDlg .profit-preview, .ps-head { border: 1px solid var(--line-strong); } }
.empty-state.compact { padding: var(--s3); margin: 0; } .empty-state.compact h3 { font-size: 18px; }
#shelfAddWrap.no-items:not([open]) { display: none; } /* (the empty shelf's own button opens it) */
.sale-thumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--sunken); border: 1px solid var(--line); }
#saleDlg .sheet-head h2 { flex: 1; min-width: 0; }
@media (min-width: 761px) { .view-title:not(:empty) { margin-left: var(--s2); padding-left: var(--s4); border-left: 1px solid var(--line-strong); line-height: 1.2; } } /* (the page name set apart from the brand) */
/* ---- liveliness round 3 ---- */
/* In stock: an empty planned-look slot is a quiet invitation, not half the card. */
.stock-card .plan-add { background: var(--bg); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; }
.stock-card .plan-add span { font-size: 18px; color: var(--accent); }
/* Charts: only an "act now" card keeps a colored edge. */
.act.act-now { border-top-color: var(--danger); }
/* Sales: the explanation under the list keeps its distance. */
#salesHint { margin-top: var(--s3); }
/* Sign-in: no empty error line on any screen, and the drawing clear of its label. */
.login-card .error:empty { min-height: 0; margin: 0; }
/* Photos, nothing starred: the newest looks to star with one tap. */
.es-recent { display: grid; gap: var(--s2); width: 100%; max-width: 380px; margin-top: var(--s3); }
.es-recent-t { margin: 0; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.es-recent-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.es-look { position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--sunken); cursor: pointer; aspect-ratio: 1; min-height: var(--tap); }
.es-look img { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-look span { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); color: var(--gold-strong); font-size: 14px; box-shadow: 0 0 0 1px var(--line); }
.es-look:hover span, .es-look:focus-visible span { background: var(--gold-soft); }
/* Sale form: each pair (amount and its date) stays side by side on a phone, so the form is half as tall and the profit panel comes up. */
@media (min-width: 340px) and (max-width: 600px) { #saleDlg .two { grid-template-columns: 1fr 1fr; gap: var(--s2); } #saleDlg input[type="date"] { min-width: 0; padding-inline: 8px; } /* (16 px stays: smaller makes iPhone zoom in) */ }
/* ---- liveliness round 4 ---- */
/* The cans on the navy headline stand on a small ivory tile, so even a navy paint reads. */
.paints-hero .can-svg { background: var(--hero-ink); border-radius: var(--r-sm); padding: 4px 6px; box-sizing: content-box; }
/* Charts: a card that needs acting on says so with its red number; no colored edges at all. */
.act.act-now { border-top-color: var(--line-strong); }
/* Photos, nothing starred: the "newest looks" label lines up with its photos. */
.es-recent { justify-items: stretch; }
.es-recent-t { text-align: left; }
/* My paints on a computer: the shelf card runs the page width like the cards around it. */
@media (min-width: 760px) { .shelf-box { max-width: none; } }
/* Sales: "Mark as sold" outlined in the list too, so the rows are not a column of navy buttons. */
.btn.sold-btn { background: var(--panel); color: var(--accent); border-color: var(--accent); }
.btn.sold-btn:hover { background: var(--accent-soft); }

/* ---- the Studio screens (approved 2026-10-15 from the preview, as shown): color and type only, nothing moved ---- */
/* Results: each version's paint color as a band under its photo. */
.v .ph { border-bottom: 8px solid var(--pv, transparent); }
/* Compare: the same band under each photo, the color names larger in Bodoni Moda. */
.compare-dlg figure img { border-bottom: 10px solid var(--pv, transparent); }
.compare-dlg figcaption strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
.compare-dlg figcaption .dot { width: 16px; height: 16px; }
/* Costs: an empty list in the shape of the other empty screens; titles in Bodoni Moda. */
.costs-empty { margin-top: var(--s2); }
.costs-empty .es-ic { width: 56px; height: 56px; }
.costs-dlg h3 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
/* Listing kit: the version it is for, at the top. */
.kit-head { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); margin: 0 0 var(--s3); background: var(--hero); color: var(--hero-ink); border-radius: var(--r); }
.kit-head:empty { display: none; }
.kit-head img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--sunken); }
.kit-head b { display: block; font-family: var(--serif); font-weight: var(--serif-w); font-size: 21px; line-height: 1.15; }
.kit-head small { display: inline-flex; gap: 6px; align-items: center; color: var(--hero-sub); text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; }
.kit-head small i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dot-ring); }
@media (prefers-color-scheme: dark) { .kit-head { border: 1px solid var(--line-strong); } }
.kit .kit-h { position: relative; padding-bottom: var(--s2); font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; letter-spacing: .01em; }
.kit .kit-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--gold); }
/* Full-screen photo: the color as a larger square by a bigger Bodoni name; a good color check as a clear green verdict. */
#dtTitle .dot { width: 22px; height: 22px; border-radius: var(--r-sm); }
#dtTitle .dt-name { font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; letter-spacing: .01em; }
.colorline.good { background: var(--good-soft); border-left: 4px solid var(--good); }
.colorline.good b { color: var(--good); }
/* Your own hardware, from a photo (Studio → Options → Hardware). */
.hw-photo { position: relative; display: inline-block; }
.hw-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--sunken); }
.hw-col { display: grid; gap: var(--s2); align-content: start; }
.hw-photos { margin-top: 0; }
.hw-x { position: absolute; top: -12px; right: -12px; width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink); font: inherit; }
.hw-x span { width: 26px; height: 26px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong); display: grid; place-items: center; font-size: 13px; }
.hw-x:hover span, .hw-x:focus-visible span { background: var(--danger-soft); color: var(--danger); }
.hw-add { position: relative; cursor: pointer; }
.hw-start { justify-self: start; gap: 6px; }
/* "Your hardware" on the Options card: in view even with Options closed. */
.hw-quick { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.hw-quick .hw-q-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-strong); }
.hw-quick .hw-q-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.hw-quick .hw-q-text b { font-weight: 600; }
.hw-quick .hw-q-text .hint { font-size: var(--t-sm); }
.hw-quick .btn { flex: none; }
.hw-quick .hw-add, .hw-start { gap: 6px; }
.hw-thumbs { display: flex; gap: 6px; flex: none; }
.hw-thumbs .hw-photo img { width: 44px; height: 44px; }
/* The hardware choices (Studio → Options → Hardware → New hardware): 30 knobs and pulls, each a small studio render in its finish. */
.hw-q-btns { display: flex; gap: var(--s2); flex: none; }
@media (max-width: 520px) { .hw-quick:has(.hw-q-btns) { flex-wrap: wrap; } .hw-quick .hw-q-btns { width: 100%; padding-left: 56px; } }
.two .hw-col.wide { grid-column: 1 / -1; }
.hw-quick .hwc-ic { background: var(--sunken); }
/* The hardware pass's line in the version viewer. */
.hwline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: var(--t-sm); }
.hwline.ok { background: var(--good-soft); border-left: 4px solid var(--good); }
.hwline.warn { background: var(--warn-soft); border-left: 4px solid var(--warn); }
.hwline span { flex: 1 1 200px; }
.hwline.three { background: var(--gold-soft); border-left: 4px solid var(--gold); }
.hwline.three > span .pill { margin: 0 var(--s1); }
.hwline.three select { width: auto; min-height: var(--tap); margin: 0; }
.hwx-on .hwx-on-pic .hwc-draw { width: 56px; height: auto; aspect-ratio: 8 / 5; object-fit: contain; display: block; background: var(--panel); border-radius: 4px; }
.hwx-on .hwx-on-pic { flex: none; }
.hwline.three .hw3d-erase { flex: 1 1 100%; display: flex; flex-direction: row; align-items: center; gap: var(--s2); min-height: var(--tap); font-size: var(--t-sm); }
.hwline.three .hw3d-erase input { width: 20px; height: 20px; margin: 0; }
/* ---- Place the hardware yourself (Studio → Hardware → Place them yourself; public/js/hwplace.js) ---- */
.hwp-dlg .tool-head h2 { margin: 0; }
.hwp-dlg .tool-head .hint { display: block; font-size: var(--t-sm); }
.hwp-hint { margin: 0; font-size: var(--t-sm); line-height: 1.45; min-height: calc(2 * 1.45em); color: var(--ink-2); } /* (two lines kept, so the photo doesn't jump when the hint changes) */
.hwp-stage { touch-action: none; user-select: none; -webkit-user-select: none; }
.hwp-stage svg { display: block; width: 100%; height: auto; max-height: calc(100dvh - 400px); touch-action: none; }
.hwp-front { fill: none; stroke: var(--gold); stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .75; }
.hwp-guide { stroke: var(--gold-strong); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.hwp-guide-tag { fill: var(--accent-ink); font-family: var(--font); font-weight: 700; text-anchor: middle; }
.hwp-guide-pill { fill: var(--accent); pointer-events: none; }
/* (the arrows and Type exact a group of their own, the precise tools, a little apart from Center and Copy) */
@media (min-width: 900px) { #hwpExact { margin-left: var(--s2); } }
.hwp-metal { fill: var(--hw-mark, var(--gold)); stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.hwp-mk.f-black .hwp-metal, .hwp-mk.f-bronze .hwp-metal, .hwp-mk.f-gunmetal .hwp-metal { fill: var(--hw-mark-dark); stroke: var(--hw-mark-edge); }
.hwp-mk.f-nickel .hwp-metal, .hwp-mk.f-chrome .hwp-metal, .hwp-mk.f-glass .hwp-metal { fill: var(--hw-mark-silver); stroke: var(--hw-mark-edge); }
.hwp-mk.f-ceramic .hwp-metal { fill: var(--hw-mark-white); stroke: var(--hw-mark-edge); }
.hwp-hit { fill: transparent; }
.hwp-mk { cursor: grab; outline: none; }
.hwp-mk:active { cursor: grabbing; }
.hwp-ring { fill: none; stroke: var(--gold-strong); stroke-width: 2.5px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px var(--panel)) drop-shadow(0 0 1px var(--panel)); }
.hwp-mk:focus-visible .hwp-ring, .hwp-mk:focus-visible .hwp-metal { stroke: var(--focus); stroke-width: 3px; }
.hwp-panel { display: grid; gap: var(--s2); }
.hwp-count { flex: 1; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
/* Customize hardware (Studio step 3): four big choices; under a new style or your own hardware, your piece with the hardware marked
   where it goes and the big button to adjust it; your own hardware's photos with a big place to add one. */
#stepHardware[data-open] > h3 { margin-bottom: var(--s3); }
.hwx-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.hwx-mode { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 72px; padding: var(--s2); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); cursor: pointer; text-align: center; line-height: 1.2; }
.hwx-mode:hover { border-color: var(--accent); }
.hwx-mode[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--sel-bg); }
/* Step 5, Background: four pictures to tap, like the hardware choices */
/* Step 6: remove the trim / distress as cards you tap, lit up when on (like the hardware and background choices) */
#stepOptions .opt > label.check { border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; margin: 0 0 var(--s2); }
#stepOptions .opt > label.check:hover { border-color: var(--accent); }
#stepOptions .opt > label.check:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
/* Step 2: the search, then two small menus (List: the color lists, Try mine, your own color; Finish: matte / satin / gloss) */
.color-tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.ct-menu { position: relative; }
.ct-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ct-btn:hover, .ct-btn[aria-expanded="true"] { border-color: var(--accent); }
.ct-k { color: var(--muted); font-weight: 500; }
.ct-btn b { font-weight: 650; }
.ct-caret { color: var(--muted); font-size: var(--t-xs); }
.ct-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: min(300px, calc(100vw - 40px)); max-height: min(60vh, 440px); overflow: auto; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.ct-pop[hidden] { display: none; }
.ct-list { display: flex; flex-direction: column; gap: 2px; }
.ct-opt, .ct-act { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: 6px 10px; font: inherit; font-size: var(--t-sm); color: var(--ink); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.ct-opt { justify-content: space-between; font-weight: 600; }
.ct-opt .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.ct-opt:hover, .ct-act:hover, .ct-opt:focus-visible, .ct-act:focus-visible { background: var(--sunken); }
.ct-opt[aria-pressed="true"] { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--accent); }
.ct-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.ct-ic { width: 22px; text-align: center; color: var(--gold-strong); font-weight: 700; flex: none; }
.ct-t { display: flex; flex-direction: column; line-height: 1.25; }
.ct-t b { font-weight: 650; }
.ct-t .hint { font-size: var(--t-xs); }
#finishPop .seg.col button { min-height: 48px; }
.bgx-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s2); }
.bgx-mode { display: grid; justify-items: center; align-content: start; gap: 3px; padding: var(--s2) var(--s2) 10px; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); cursor: pointer; text-align: center; line-height: 1.2; }
.bgx-mode:hover { border-color: var(--accent); }
.bgx-mode[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--sel-bg); }
.bgx-art { display: block; width: 100%; max-width: 132px; }
.bgx-art svg { display: block; width: 100%; height: auto; }
.bgx-l { font-size: var(--t-sm); font-weight: 650; margin-top: 4px; }
.bgx-sub { font-size: var(--t-xs); color: var(--muted); }
.bga-o { fill: var(--ill-old); stroke: var(--line-strong); } .bga-g { stroke: var(--ill-old-line); stroke-width: 1.5; fill: none; } .bga-c { stroke: var(--ill-old-mark); stroke-width: 1.5; fill: none; }
.bga-w { fill: var(--ill-wall); } .bga-f { fill: var(--ill-floor); } .bga-a { fill: none; stroke: var(--ill-gold); stroke-width: 1.4; } .bga-g2 { fill: var(--ill-plant); }
.bga-win { fill: var(--ill-win); stroke: var(--ill-win-line); } .bga-white { fill: var(--ill-paper); stroke: var(--line); } .bga-sh { fill: var(--ill-shadow); }
.bga-p { fill: var(--ill-piece); stroke: var(--ill-piece); stroke-width: 1; } .bga-l { stroke: var(--ill-piece-line); stroke-width: 1; fill: none; }
.bga-back { fill: var(--ill-back); } .bga-back2 { fill: var(--ill-back-2); } .bga-dark { fill: var(--ill-dark-wall); } .bga-darkf { fill: var(--ill-dark-floor); } .bga-glow { fill: var(--ill-glow); }
.bga-mull { stroke: var(--ill-win-line); stroke-width: 1; fill: none; } .bga-rat { fill: none; stroke: var(--ill-rattan); stroke-width: 1.6; } .bga-plaster { fill: var(--ill-plaster); } .bga-oak { fill: var(--ill-oak); }
.bga-frame { fill: var(--ill-paper); stroke: var(--ill-gold); stroke-width: 1; } .bga-art { fill: var(--ill-art); } .bga-art2 { fill: var(--ill-plant); }
.bga-siding { fill: var(--ill-siding); } .bga-sl { stroke: var(--ill-siding-line); stroke-width: .8; fill: none; } .bga-porch { fill: var(--ill-porch); } .bga-fern { fill: none; stroke: var(--ill-plant); stroke-width: 1.6; stroke-linecap: round; } .bga-pot { fill: var(--ill-old); }
#stepBackground .scene:not(:empty) { margin-top: var(--s3); }
.hwx-ic { display: grid; place-items: center; width: 28px; height: 28px; font-size: 18px; line-height: 1; color: var(--gold-strong); }
.hwx-body { margin-top: var(--s3); display: grid; gap: var(--s3); }
.hwx-body > .hint { margin: 0; }
.hwx-style { display: flex; align-items: center; gap: var(--s3); }
.hwx-style-pic .hwc-draw { width: 96px; height: auto; aspect-ratio: 8 / 5; object-fit: contain; display: block; background: var(--sunken); border-radius: var(--r-sm); }
.hwx-style-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hwx-style-text b { font-weight: 600; }
.hwx-style-text .hint { font-size: var(--t-sm); }
.hwx-place { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3); border: 2px solid var(--gold); border-radius: var(--r-lg); background: var(--gold-soft); }
.hwx-pic { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.hwx-frame { position: relative; display: inline-block; line-height: 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow); }
.hwx-frame img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; }
.hwx-mark { position: absolute; transform: translate(-50%, -50%); background: var(--gold); border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.hwx-mark.knob { width: 12px; height: 12px; border-radius: 50%; }
.hwx-mark.pull { width: 28px; height: 9px; border-radius: 5px; }
.hwx-mark.pull.v { width: 9px; height: 28px; }
.hwx-place-side { display: grid; gap: var(--s2); align-content: center; }
.hwx-where { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; }
.hwx-place-side .hint { font-size: var(--t-sm); }
.hwx-adjust { width: 100%; min-height: 52px; font-size: var(--t-md); gap: var(--s2); }
.hwx-drop { display: grid; justify-items: center; gap: 6px; padding: var(--s5) var(--s4); text-align: center; border: 2px dashed var(--gold); border-radius: var(--r-lg); background: var(--gold-soft); color: var(--ink); cursor: pointer; }
.hwx-drop svg { color: var(--gold-strong); }
.hwx-drop b { font-size: 17px; font-weight: 600; }
.hwx-drop .hint { max-width: 34ch; font-size: var(--t-sm); }
.hwx-drop:hover, .hwx-drop:focus-within { border-color: var(--accent); }
.hwx-mine { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hwx-photo { position: relative; }
.hwx-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }
.hwx-photo .hw-x { position: absolute; top: -8px; right: -8px; }
.hwx-add { display: grid; place-items: center; align-content: center; gap: 4px; width: 96px; height: 96px; border: 2px dashed var(--line-strong); border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.hwx-add:hover, .hwx-add:focus-within { border-color: var(--accent); }
@media (max-width: 560px) {
  .hwx-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hwx-frame img { max-height: 300px; }
  .hwx-style { flex-wrap: wrap; }
}
.hwp-own { cursor: default; }
.hwp-own .hwc-draw { object-fit: cover; }
.hwp-ownkind { align-self: center; flex: none; }

/* the Hardware screen: the 3D picture over the photo, the styles as pictures, the tools */
.hwp-stage { position: relative; }
.hwp-loupe { position: fixed; z-index: 30; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 3px solid var(--panel); box-shadow: var(--shadow); pointer-events: none; background: var(--sunken); }
.hwp-loupe svg { display: block; width: 100%; height: 100%; }
.hwp-cross { fill: none; stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.hwp-tag { position: fixed; z-index: 31; transform: translateX(-50%); max-width: min(340px, calc(100vw - 24px)); white-space: normal; text-align: center; padding: 3px 10px; border-radius: var(--r-sm); line-height: 1.3; background: var(--accent); color: var(--accent-ink); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); font-variant-numeric: tabular-nums lining-nums; }
.hwp-whererow { flex-basis: 100%; display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); }
.hwp-whererow .linkbtn { flex: none; font-size: var(--t-xs); padding-inline: var(--s1); }
.hwp-modes { flex-basis: 100%; display: grid; }
.hwp-mode { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 6px; }
.hwp-mode.off { visibility: hidden; }
.hwp-where { flex: 1; min-width: 0; min-height: 2.7em; display: flex; align-items: center; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.hwp-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 var(--s2) var(--s2); }
.hwp-sel[hidden] { display: none; }
.hwp-custom { display: inline-flex; align-items: center; padding: 0 var(--s3); font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); background: var(--accent); border-radius: inherit; }
.hwp-custom[hidden] { display: none; }
.hwp-exact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0 var(--s2) var(--s2); padding: var(--s2); border: 1px solid var(--gold); border-radius: var(--r-sm); background: var(--gold-soft); font-size: var(--t-sm); }
.hwp-exact[hidden] { display: none; }
.hwp-exact label, dialog .hwp-exact label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
.hwp-exact input { width: 80px; min-height: var(--tap); margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.hwp-exact select { width: auto; min-height: var(--tap); margin: 0; }
.hwp-holechips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hwp-sw.hole { padding: 0 10px; }
.hwp-tick { stroke: var(--gold-strong); stroke-linecap: round; pointer-events: none; }
.hwp-tick-halo { stroke: var(--panel); stroke-linecap: round; opacity: 0.4; pointer-events: none; }
.hwp-snapto { display: inline-flex; gap: 2px; }
/* (the fine-tuning's groups and their names: on a computer; on a phone the buttons as they were) */
.hwp-tlabel, .hwp-pickfirst, .hwp-fs-kind, .hwp-dk, .hwp-modetabs, .hwp-placeside, .hwp-modetip, .hwp-moremenu, .hwp-ask-sub, .hwp-more-l, .hwp-which, .hwp-perl, .hwp-fincap, .hwp-ask-open, .hwp-xs { display: none; }
.hwp-grp, .hwp-grp-row { display: contents; }
.hwp-snapto > .btn { min-width: var(--tap); }
.hwp-snapto > .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hwp-wherehint { flex: 1 1 100%; margin: 0; font-size: var(--t-xs); min-height: 26px; }
.hwp-break { display: none; }
.hwp-ask-guess { display: none; font-weight: 400; color: var(--ink-2); font-size: var(--t-xs); }
@media (min-width: 900px) { .hwp-break { display: block; flex-basis: 100%; height: 0; } }
/* (the finish and holes chips folded into one line that says what is picked, on a phone: unfolded they took 400 px above the cards) */
.hwp-filtsum { display: flex; flex: 1 1 100%; justify-content: space-between; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
/* (a computer has the room: its chips stay out, one tap each; a phone folds them) */
@media (min-width: 900px) { .hwp-filtsum { display: none; } }
@media (max-width: 899px) { .hwp-finsets:not(.open) > :not(.hwp-filtsum):not(.hwp-nmatch):not([data-clear]) { display: none; } }
/* (on a computer, in a panel under 440 px wide: the finish and holes folded into the one line too, and the kinds on one row that swipes,
   so the styles start near the top: wrapped, they took 330 px over them and on a laptop only the cards' tops showed) */
@container (max-width: 600px) {
  .hwp-panel .hwp-filtsum { display: flex; }
  .hwp-panel .hwp-finsets:not(.open) > :not(.hwp-filtsum):not(.hwp-nmatch):not([data-clear]) { display: none; }
  /* (the kinds said in that line too, chips only once it's opened, wrapped in full: a row that swiped cut "Cup pulls" off mid-word) */
  .hwp-panel .hwp-fs-kind { display: inline; }
  .hwp-panel .hwp-kinds:has(+ .hwp-finsets:not(.open)) { display: none; }
  .hwp-panel .hwp-kinds { flex-wrap: wrap; overflow: visible; }
  /* (the old-holes guess said by its link alone (the guess in its tooltip)) */
  .hwp-panel .hwp-holetext { display: none; }
  .hwp-panel .hwp-holehint { margin: 0; }
}
/* (the same, over the styles: the cover-up on one line, its warning in its tooltip, the column being two cards wide) */
@media (min-width: 900px) {
  .hwp-dlg .hwp-cover .hint { display: none; }
}
/* (a button's short label on a phone, its full one on a computer) */
.hwp-short { display: none; }
.hwp-dims .hwp-dim { stroke: var(--gold-strong); }
.hwp-dims .hwp-dim-halo { stroke: var(--panel); opacity: .85; }
.hwp-dims, .hwp-guide-tag { pointer-events: none; } /* (taps go through to the pull and the photo) */
.hwp-dims .hwp-dim-pill { fill: var(--accent); }
.hwp-dims text { fill: var(--accent-ink); font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.hwp-sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
.hwp-remove { margin-left: auto; } /* (away from Undo: a slip shouldn't delete it) */
/* (room for the line and its links row whether or not a link shows, so the photo never shrinks when one is tapped: the Measure link
   waits while the width is asked at the top) */
.hwp-whererow { flex-wrap: wrap; row-gap: 2px; min-height: 68px; align-items: flex-start; align-content: flex-start; }
.hwp-whererow > .hwp-where { flex: 1 1 100%; min-height: 2.6em; } /* (the line its two lines' room, its links on a line of their own under it: nothing jumps) */
.hwp-whererow > .linkbtn { min-height: 26px; } /* (two lines' room always: the line and its links may wrap when one is tapped, and nothing should jump) */
.hwp-measure { white-space: nowrap; color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hwp-step { position: absolute; top: -13px; left: 0; right: 0; font-size: 11px; color: var(--muted); text-align: center; line-height: 1; pointer-events: none; }
.hwp-fin.face { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink-2); }
.hwp-howto { font-size: var(--t-xs); color: var(--ink-2); }
.hwp-howto summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.hwp-sizes { flex-wrap: nowrap; }
.hwp-nudge { position: relative; display: inline-grid; grid-template-columns: repeat(4, minmax(var(--tap), auto)); gap: 4px; }
.hwp-nudge .btn { min-width: var(--tap); padding-inline: 0; justify-content: center; }
.hwp-busy { position: absolute; top: var(--s2); right: var(--s2); padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; box-shadow: var(--shadow); }
.hwp-mk.ghost .hwp-hit { fill: transparent; }
.hwp-kinds { margin: 0; }
.hwp-strip { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px 2px var(--s1); scroll-snap-type: x proximity; }
.hwp-shape { flex: none; box-sizing: border-box; width: 138px; display: grid; gap: 6px; align-content: start; scroll-snap-align: start; }
/* (cards off screen aren't laid out until they come near it: sixty cards with their drawings, laid out as the screen opened, held a phone
   up a tenth of a second) */
.hwp-strip > .hwp-shape { content-visibility: auto; contain-intrinsic-size: auto 138px auto 240px; }
.hwp-style { box-sizing: border-box; width: 100%; position: relative; display: grid; gap: 2px; align-content: start; padding: 4px; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.hwp-style .hwc-draw { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; background: var(--sunken); border-radius: 4px; display: block; }
.hwp-style .hwp-sn { font-size: var(--t-xs); font-weight: 600; line-height: 1.25; }
.hwp-style .hwp-sf { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.25; }
.hwp-cmp-go { justify-self: start; }
.hwp-cmp-tile .hwp-onit { position: absolute; top: 8px; left: 8px; }
.hwp-compare { display: grid; gap: var(--s1); padding: var(--s2); background: var(--sunken); border-radius: var(--r-sm); }
.hwp-cmp-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-size: var(--t-sm); }
/* (every finish in view at once, two across, each big enough to tell satin brass from antique) */
.hwp-cmp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); padding: 2px; }
.hwp-cmp-tile { position: relative; display: grid; gap: 2px; padding: 4px; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.hwp-cmp-tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.hwp-cmp-tile .hwp-sf, .hwp-cmp-tile .hwp-sz { font-size: var(--t-xs); line-height: 1.25; }
.hwp-cmp-tile .hwp-sf { color: var(--ink); font-weight: 600; }
.hwp-cmp-tile .hwp-sz { color: var(--muted); }
.hwp-cmp-pic { display: block; aspect-ratio: 8 / 5; background: var(--line); border-radius: 4px; overflow: hidden; }
.hwp-cmp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hwp-cmp-pic.failed { background: var(--sunken); }
.hwp-style .hwp-sz { font-size: var(--t-xs); color: var(--muted); line-height: 1.25; font-variant-numeric: tabular-nums lining-nums; }
.hwp-style:hover { border-color: var(--line-strong); }
.hwp-style[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.hwp-onit { position: absolute; z-index: 1; top: 6px; left: 6px; white-space: nowrap; padding: 1px 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: 999px; }
.hwp-fins { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.hwp-fin { flex: none; box-sizing: border-box; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--fin-edge); background-image: linear-gradient(140deg, var(--fin-sheen), transparent 60%); cursor: pointer; }
i.hwp-fin { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; cursor: inherit; }
.hwp-fin[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
.hwp-fin.dim { opacity: .35; }
.hwp-fin:hover { border-color: var(--line-strong); }
.fin-brass { background-color: var(--fin-brass); } .fin-antique { background-color: var(--fin-antique); } .fin-champagne { background-color: var(--fin-champagne); }
.fin-black { background-color: var(--fin-black); } .fin-gunmetal { background-color: var(--fin-gunmetal); } .fin-nickel { background-color: var(--fin-nickel); }
.fin-chrome { background-color: var(--fin-chrome); } .fin-bronze { background-color: var(--fin-bronze); } .fin-copper { background-color: var(--fin-copper); }
.fin-wood { background-color: var(--fin-wood); } .fin-walnut { background-color: var(--fin-walnut); } .fin-leather { background-color: var(--fin-leather); }
.fin-painted { background-color: var(--fin-painted); } .fin-white { background-color: var(--fin-white); } .fin-ceramic { background-color: var(--fin-ceramic); } .fin-glass { background-color: var(--fin-glass); }
.hwp-finsets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); padding: 2px; }
.hwp-pick, dialog label.hwp-pick { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; padding-right: 26px; cursor: pointer; }
.hwp-pick::after { content: '▾'; position: absolute; right: 10px; pointer-events: none; }
.hwp-pick select { appearance: none; -webkit-appearance: none; width: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 0; margin: 0; cursor: pointer; max-width: 9.5em; field-sizing: content; }
.hwp-pick > span { font-weight: 500; }
.hwp-pick select:focus-visible { outline: none; }
.hwp-pick:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.hwp-swatches { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hwp-sw { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid transparent; background: var(--sunken); color: var(--ink-2); font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer; white-space: nowrap; }
.hwp-sw .hwp-fin { flex: none; width: 18px; height: 18px; margin: 0; cursor: inherit; }
.hwp-sw.any { padding: 0 10px; }
.hwp-sw[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.hwp-famname { font-size: var(--t-xs); font-weight: 600; color: var(--ink); }
.hwp-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 2px; font-size: var(--t-xs); }
.hwp-sizes-l { color: var(--muted); white-space: nowrap; }
/* (no label: the card's own line says "Holes … apart" just above) */
.hwp-sizes .hwp-sizes-l { display: none; }
.hwp-size small { font-size: inherit; font-weight: 400; color: var(--muted); }
.hwp-size[aria-pressed="true"] small { color: inherit; }
.hwp-finname .hwp-cmp-go { font-size: var(--t-xs); }
.hwp-copylist { font-size: var(--t-sm); }
a.hwp-copylist { display: inline-flex; align-items: center; text-decoration: none; }
/* (the buy line with its two links beside it on a computer, under it on a phone) */
.hwp-buy { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s2); }
.hwp-buy .hwp-count { flex: 0 1 auto; }
.hwp-buylinks { display: inline-flex; gap: var(--s1); }
/* (the picture, with its hole spacing drawn under it at the picture's own scale: the cup shapes' size difference reads at a glance) */
.hwp-pic { position: relative; display: block; }
.hwp-ruler { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); height: 7px; border: 1.5px solid var(--muted); border-top: 0; box-sizing: border-box; pointer-events: none; }
.hwp-ruler > span { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 0 4px; border-radius: 6px; background: var(--sunken); color: var(--ink-2); font-size: calc(var(--t-xs) * 0.85); font-weight: 600; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.hwp-size { min-width: 34px; min-height: 30px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; cursor: pointer; }
.hwp-size[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hwp-size.dim { opacity: .4; }
/* (the Compare link's tap height centered on the finish name's line, so the line sits right under its dots) */
.hwp-finname { display: flex; align-items: center; gap: var(--s1); font-size: var(--t-xs); color: var(--ink-2); padding: 0 2px; min-height: 1.3em; line-height: 1.3; }
.hwp-finname .hwp-cmp-go { margin: -12px 0; padding: 0 4px; }
.hwp-fits { position: absolute; top: 6px; right: 6px; z-index: 1; white-space: nowrap; padding: 1px 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--good); background: var(--good-soft); border-radius: 999px; }
.hwp-nmatch { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.hwp-holehint { margin: 0; font-size: var(--t-xs); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* (in the bar at the bottom, beside the total: floating over the screen, it covered cards, dots and tiles) */
.hwp-mini { flex: none; width: 64px; height: 40px; align-self: center; padding: 0; border: 2px solid var(--panel); border-radius: var(--r-sm); background: var(--sunken); box-shadow: 0 4px 14px var(--line-strong); cursor: pointer; overflow: hidden; }
.hwp-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hwp-none { margin: var(--s2) 0; }
.hwp-under { display: grid; gap: var(--s2); }
/* "Show on": the piece's photo and each version, to see the hardware on any color */
.hwp-on { display: flex; flex: none; align-items: center; gap: var(--s2); margin: 0; padding: 2px 0; overflow-x: auto; }
.hwp-on[hidden] { display: none; }
.hwp-onl { flex: none; font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.hwp-onb { flex: none; display: grid; justify-items: center; gap: 2px; width: 72px; padding: 3px; font: inherit; font-size: var(--t-xs); font-weight: 600; line-height: 1.2; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.hwp-onb img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; display: block; }
.hwp-onb span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hwp-onb:hover { border-color: var(--line-strong); }
.hwp-onb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.hwp-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) var(--s3); border: 1px solid var(--gold); border-radius: var(--r-sm); background: var(--gold-soft); font-size: var(--t-sm); }
.hwp-ask-q { flex: 1 1 220px; min-width: 0; }
.hwp-ask-q .hint { color: var(--ink-2); }
.hwp-ask-in { display: flex; flex-direction: row; align-items: center; gap: var(--s1); font-weight: 600; }
.hwp-ask-in input { width: 84px; min-height: var(--tap); margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.hwp-ask-x { display: none; }
/* (on a phone: one short line, so the photo and the tools under it stay on screen; the why is in the hint under the photo) */
@media (max-width: 899px) {
  /* (one line on a phone: the question, the field, Set, Not now; it pushed the photo 190 px down) */
  .hwp-ask { flex-wrap: nowrap; gap: var(--s1); padding: var(--s1) var(--s2); }
  .hwp-ask-q { flex: 1 1 auto; white-space: nowrap; }
  .hwp-ask-q .hint { display: none; }
  .hwp-ask-in input { width: 64px; }
  .hwp-ask-guess { display: inline; }
  .hwp-long { display: none; }
  #hwpFine .btn.small { padding-left: 9px; padding-right: 9px; }
  .hwp-whererow > .linkbtn { min-height: 36px; }
  .hwp-whererow { min-height: 78px; }
  #hwpFine { column-gap: 4px; }
  .hwp-short { display: inline; }
  .hwp-ask-in input { width: 64px; }
  .hwp-ask .btn { flex: none; min-width: var(--tap); }
}
.hwp-width { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: var(--s2); font-size: var(--t-sm); font-weight: 600; }
.hwp-width input { width: 84px; min-height: var(--tap); margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.hwp-width .hint { font-weight: 400; }
.hwp-width.guess input { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.hwp-tools { flex-wrap: wrap; }
.hwp-cover { font-size: var(--t-sm); }
.hw-quick .hwc-ic { width: auto; height: auto; border-radius: var(--r-sm); background: var(--sunken); padding: 2px; }
.hw-quick.hw-in { margin: 0; padding: 0; border: 0; width: 100%; }
/* (on a wide screen: the photo on the left, as tall as it fits; the styles and tools beside it) */
@media (min-width: 900px) {
  dialog.hwp-dlg { width: min(1880px, calc(100vw - 32px)); }
  /* (the photo and its tools on the left, on their own; which version it's shown on up in the title bar; the width question and the
     cover-up over the styles: in one window-tall column, the hint, the width question and the row of versions above the photo took the
     height, and on a 600 px window it was drawn 0 px tall, its tools spilling out) */
  dialog.hwp-dlg[open] { display: grid; grid-template-columns: minmax(0, 1fr) var(--hwp-side-w, clamp(320px, 30vw, 440px)); grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "head head" "left tabs" "left side" "err err" "foot foot"; column-gap: var(--s4); row-gap: var(--s2); height: calc(100dvh - 32px); }
  .hwp-dlg > .tool-head { grid-area: head; }
  .hwp-left { grid-area: left; display: flex; flex-direction: column; min-height: 0; }
  .hwp-left > .hwp-stage { flex: 0 1 auto; min-height: 0; align-content: start; background: none; overflow: visible; }
  .hwp-dlg > .hwp-hint { display: none; }
  .hwp-dlg > .hwp-on { grid-area: head; justify-self: end; align-self: center; max-width: calc(100% - 420px); margin: 0 60px 0 0; padding: 2px; }
  .hwp-dlg > .hwp-ask, .hwp-dlg > .hwp-under { grid-area: side; } /* (until they're moved in with the tools: hwplace.js sideTools) */
  /* (the right column's two modes, switched at its top: the styles, or the tools for placing them with the width and the cover-up) */
  .hwp-dlg > .hwp-modetabs { grid-area: tabs; display: flex; margin: 0; }
  .hwp-dlg > .hwp-modetabs > button { flex: 1 1 0; min-height: 40px; font-size: var(--t-sm); font-weight: 600; }
  .hwp-dlg > .hwp-modetabs > button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
  .hwp-modetabs .n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; }
  .hwp-panel > .hwp-modetip { display: block; margin: 0; font-size: var(--t-xs); color: var(--ink-2); }

  .hwp-dlg > .hwp-placeside { grid-area: side; display: flex; flex-direction: column; gap: var(--s2); min-height: 0; overflow-y: auto; padding: 2px 2px var(--s2); }
  .hwp-dlg[data-mode="style"] > .hwp-placeside, .hwp-dlg[data-mode="place"] > .hwp-panel { display: none; }
  .hwp-placeside > .hwp-sel, .hwp-placeside > .hwp-exact { width: 100%; }
  .hwp-dlg.side .hwp-placeside > .hwp-sel { padding: 0; }
  .hwp-dlg > .tool-head { flex-wrap: nowrap; }
  .hwp-dlg .tool-head > .hwp-ask { margin: 0 auto 0 var(--s5); align-self: center; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 540px); flex-wrap: nowrap; }
  .hwp-dlg .tool-head > .hwp-ask .hint { display: none; }
  .hwp-dlg .tool-head > .hwp-ask .hwp-ask-q { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hwp-placeside > .hwp-sel { max-width: 480px; }
  .hwp-placeside .hwp-grp-row:has(> .hwp-snapto) { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s2); } /* (the exact spot beside the three snap points, not on a row of its own) */
  .hwp-placeside .hwp-modes, .hwp-placeside .hwp-mode, .hwp-placeside .hwp-grp, .hwp-placeside .hwp-grp-row, .hwp-placeside .hwp-nudge, .hwp-placeside .hwp-snapto { width: 100%; box-sizing: border-box; }
  .hwp-placeside > .hwp-under { margin-top: var(--s1); }
  /* (the exact spot as a link under the three snap points: a fourth button wrapped onto a row of its own) */
  .hwp-dlg.side #hwpExact { min-height: 24px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; justify-content: flex-start; flex: none; align-self: flex-start; text-align: left; }
  .hwp-dlg > .hwp-panel { grid-area: side; align-content: start; overflow-y: auto; min-height: 0; container-type: inline-size; }
  .hwp-dlg > .error { grid-area: err; }
  .hwp-dlg > .error:empty { display: none; }
  .hwp-dlg > .dlg-foot { grid-area: foot; }
  /* (as big as the column is wide, and as tall as the column leaves room for with the tools under it in sight: worked out from what
     is measured there (hwplace.js: sideTools), a guess either cut the tools off or the photo short) */
  .hwp-stage svg { width: auto; max-width: 100%; height: var(--hwp-photo-h, auto); max-height: none; margin: 0 auto; }
  /* (the tools under it compact: one line for what it's on, the fine-tuning on one line where the column allows, short names, the
     total on one line with the buttons) */
  .hwp-whererow { min-height: 0; }
  .hwp-wherehint { display: none !important; }
  .hwp-break { display: none; }
  .hwp-long { display: none; }
  .hwp-short { display: inline; }
  #hwpFine .btn.small, #hwpAll .btn.small { padding-left: 9px; padding-right: 9px; }
  .hwp-nudge { grid-template-columns: repeat(4, minmax(36px, auto)); }
  .hwp-nudge .btn, .hwp-snapto > .btn { min-width: 36px; }
  .hwp-dlg .dlg-foot { flex-wrap: nowrap; }
  .hwp-dlg .hwp-buy { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); }
  .hwp-dlg .hwp-count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hwp-dlg .hwp-buylinks { flex: none; display: inline-flex; gap: var(--s2); white-space: nowrap; }
  /* (the tools' buttons 36 px tall: a mouse doesn't need a finger's 44, and beside the photo they all fit a laptop's height) */
  .hwp-sel .btn.small, .hwp-sel .seg > button { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  .hwp-whererow { gap: 2px var(--s2); }
  /* (both rows of tools in sight: the layout, Undo and Clear for all of them; the fine-tuning for the one picked, greyed out until one
     is: hidden until a pull was clicked, nobody found them) */
  .hwp-modes { display: flex; flex-direction: column; gap: 6px; }
  .hwp-mode.off { visibility: visible; }
  .hwp-sel .btn:disabled { opacity: 1; color: var(--ink-2); background: var(--sunken); border-color: var(--line); box-shadow: none; }
  /* (until one is picked, said in so many words over the greyed-out buttons) */
  #hwpFine .hwp-pickfirst { display: block; flex: 1 1 100%; font-size: var(--t-xs); color: var(--ink-2); }
  #hwpFine.idle .hwp-pickfirst { font-size: var(--t-sm); font-weight: 600; color: var(--ink); padding: 6px 10px; border-left: 3px solid var(--gold); border-radius: var(--r-sm); background: var(--gold-soft); }
  #hwpFine .hwp-undo { display: none; }
  /* (the tools beside the photo, when that shows it bigger (hwplace.js: sideTools): its height set from there, so it fits the column) */
  .hwp-dlg.side .hwp-stage { display: flex; justify-content: center; align-items: flex-start; padding: 0; }
  .hwp-dlg.side .hwp-stage > .tool-load { grid-column: 1 / -1; }
  .hwp-dlg.side .hwp-stage > svg { grid-column: 1; grid-row: 1 / span 3; width: var(--hwp-photo-w, auto); max-width: none; margin: 0; }
  .hwp-dlg.side .hwp-exact { margin: var(--s2) 0 0; }
  .hwp-dlg.side .hwp-sel { padding: var(--s2) 0; }
  .hwp-dlg.side .hwp-busy { right: auto; left: var(--s2); }
  /* (each group of tools named over it: what the arrows move and by how much, where on its drawer, the exact spot, this pull; the
     buttons alone left people guessing) */
  .hwp-grp { display: inline-flex; flex-direction: column; gap: 3px; }
  .hwp-grp-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .hwp-tlabel { display: block; font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink-2); line-height: 1.2; }
  .hwp-mode { align-items: flex-end; column-gap: var(--s3); }
  #hwpFine .hwp-break { display: none; }
  /* (beside the photo: one group under another, each the column's width, nothing left alone on a row) */
  .hwp-dlg.side .hwp-modes { gap: var(--s2); }
  .hwp-dlg.side .hwp-mode { flex-direction: column; align-items: stretch; row-gap: var(--s2); }
  .hwp-dlg.side .hwp-grp { display: flex; }
  .hwp-dlg.side .hwp-grp-row > .btn { flex: 1 1 auto; }
  .hwp-dlg.side #hwpAll .hwp-grp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .hwp-dlg.side #hwpLayout { grid-column: 1 / -1; }
  .hwp-dlg.side #hwpLayout > button { flex: 1 1 0; }
  .hwp-dlg.side .hwp-nudge { grid-template-columns: repeat(4, 1fr); }
  .hwp-dlg.side .hwp-snapto { display: grid; grid-template-columns: repeat(3, 1fr); }
  /* (which version it's shown on, small, in the title bar) */
  .hwp-dlg .hwp-onb { width: 58px; padding: 2px; }
  .hwp-dlg .hwp-onb img { width: 52px; height: 34px; }
  .hwp-dlg .hwp-onb span { max-width: 60px; font-size: 10px; }
  .hwp-dlg .hwp-onb { width: auto; min-width: 58px; }
  /* (the width question on one slim line over the styles, closed with the same ✕ at every size: two lines took the styles' best spot) */
  .hwp-ask { flex-wrap: nowrap; gap: 4px var(--s1); padding: var(--s1) var(--s2); align-items: center; background: var(--panel); border-color: var(--line); }
  .hwp-ask-q { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); }
  .hwp-ask-long { display: none; }
  .hwp-ask-x { display: inline; }
  .hwp-ask .btn { flex: none; }
  .hwp-ask-q .hint { display: none; }
  .hwp-ask-in input { width: 64px; }
  .hwp-ask-guess { display: none; }
  .hwp-ask-in input { width: 52px; padding-inline: 6px; }
  /* (the picked pull's spot in words, two lines' room always and no "All pulls" link under it: both rows of tools are in sight, and
     the link pushed them down when one was clicked) */
  #hwpDone { display: none; }
  #hwpSub { display: none; }
  .hwp-dk { display: inline; }
  .hwp-ph { display: none; }
  /* (on a big monitor the tools a size up: at 12 px they read small beside a photo that size) */
  @media (min-width: 1600px) { .hwp-sel .btn.small, .hwp-sel .seg > button { min-height: 44px; font-size: var(--t); } .hwp-tlabel { font-size: var(--t-xs); } .hwp-where, #hwpFine .hwp-pickfirst { font-size: var(--t); } .hwp-shape { font-size: var(--t); } }
  .hwp-dlg > .hwp-panel.more::after { content: '▾ More styles below'; position: sticky; bottom: 0; z-index: 1; display: block; margin-top: -40px; padding: 48px 0 var(--s1); text-align: center; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); background: linear-gradient(to bottom, transparent, var(--panel) 55%); pointer-events: none; }
  .hwp-dlg.side .hwp-where { min-height: 2.6em; }
  .hwp-under .hwp-cover, .hwp-under .hwp-width { font-size: var(--t-xs); }

  .hwp-strip { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px; }
  /* (three cards across in a panel wide enough for a card's sizes and dots: two across showed only four cards on the screen; two in a
     narrower one, on a smaller window) */
  .hwp-shape { width: calc((100% - var(--s2)) / 2); }
  @container (min-width: 470px) { .hwp-shape { width: calc((100% - 2 * var(--s2)) / 3); } }
  .hwp-finsets { margin: 0; padding: 0; }
  /* (the finishes and the holes each wrapped in full, compact: a row that swiped hid the 5 in and 6¼ in spacings behind a fade) */
  .hwp-panel > * { min-width: 0; }
  .hwp-swatches, .hwp-holechips { flex: 1 1 100%; min-width: 0; gap: 4px; }
  .hwp-sw { min-height: 30px; }
  .hwp-kinds { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .hwp-dlg .hwp-kinds > button { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
  .hwp-ask .btn { min-height: 36px; }
  .hwp-ask-in input { min-height: 36px; }
}
/* (on a phone or a narrow window: the photo at its own height and the screen scrolls, compact tools, the count on its own line) */
@media (max-width: 899px) {
  dialog.hwp-dlg[open] { overflow-y: auto; }
  .hwp-left { display: contents; }
  .hwp-dlg .hwp-stage { flex: none; }
  .hwp-stage svg { max-height: min(62dvh, 560px); width: auto; max-width: 100%; margin: 0 auto; }
  .hwp-tools .btn, .hwp-tools .seg { flex: none; }
  .hwp-dlg .dlg-foot { flex-wrap: wrap; position: sticky; bottom: calc(-1 * var(--s3)); background: var(--panel); padding-top: var(--s2); }
  .hwp-dlg .hwp-buy { flex: 1 1 calc(100% - 90px); }
  .hwp-dlg .hwp-count { flex: 1 1 100%; min-width: 0; align-self: center; font-size: var(--t-xs); }
  .hwp-dlg .hwp-count[data-short]:not([data-short='']) { font-size: 0; }
  .hwp-dlg .hwp-count[data-short]:not([data-short=''])::after { content: attr(data-short); font-size: var(--t-xs); }
  .hwp-buylinks .linkbtn { padding-inline: 0 var(--s2); }
  /* (two rows on a phone, not three: the buy line with Copy list, then the three buttons a third each) */
  .hwp-dlg .dlg-foot > .btn { flex: 1 1 28%; min-width: 0; padding-left: var(--s1); padding-right: var(--s1); }
  .hwp-dlg > .hwp-on { order: 0; margin: 0 calc(-1 * var(--s3)); padding: 2px var(--s3); }
  .hwp-dlg > .hwp-panel { order: 2; }
  .hwp-dlg > .hwp-under { order: 4; }
  .hwp-dlg > .error, .hwp-dlg > .tool-live { order: 5; }
  .hwp-dlg > .dlg-foot { order: 6; }
  .hwp-kinds { margin: 0 calc(-1 * var(--s3)); padding: 0 var(--s3); flex-wrap: nowrap; }
  /* (the cards two across, wrapping, inside the margins: a sideways row hid 26 of the 29 and cut the third card's name and price off) */
  .hwp-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; margin: var(--s2) 0; padding: 2px; }
  .hwp-strip .hwp-shape { width: auto; }
  .hwp-strip .hwp-none { grid-column: 1 / -1; }
  .hwp-pick select { font-size: 16px; max-width: 7.5em; } /* (a phone zooms in on a smaller menu when it opens) */
  .hwp-exact input, .hwp-exact select { font-size: 16px; }
  /* (the finishes and the holes each one row that swipes, fading at the edge so it reads as one: wrapped, they filled the first screen) */
  .hwp-panel > * { min-width: 0; } /* (a row that swipes mustn't widen the panel, and the cards with it) */
  .hwp-finsets { max-width: 100%; }
  .hwp-swatches { flex: 1 1 100%; min-width: 0; }
  /* (wrapped, every spacing in sight: swiped, the 5 in and 6¼ in chips hid behind a fade) */
  .hwp-holechips { flex: 1 1 100%; min-width: 0; gap: 4px; }
  .hwp-nmatch { flex-basis: 100%; }
}
/* (the drawers' outlines only while placing by hand or dragging: over the 3D picture they would be clutter) */
.hwp-dlg.live .hwp-front { opacity: 0; }
.hwp-dlg.live .hwp-front.sel { opacity: .9; }
.hwp-dlg.live.dragging .hwp-front { opacity: .75; }
@media (max-width: 700px) {
  .hwp-stage svg { max-height: calc(100dvh - 420px); }
  .hwp-dlg .hwp-tools { position: static; }
  }

/* ---- Two-tone (Studio step 4, twotone.js): looks drawn in your colors, a drawing to tap, the second color ---- */
.tt-body > .hint:first-child { margin: 0 0 var(--s1); }
.tt-looks { gap: var(--s2); padding-bottom: 2px; }
/* (all six looks in sight, three across: a row that scrolled hid Contrast drawers and Black base behind the edge) */
.tt-looks.scrollrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.tt-looks .tt-look { width: auto; position: relative; padding: 4px 4px 6px; }
.tt-looks .tt-look .ttd { max-height: 38px; }
.tt-looks .tt-look-note { font-size: 9px; line-height: 1; }
.tt-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: center; margin: 0 0 var(--s2); }
.tt-hero > .tt-stage { padding: 6px; }
.tt-hero .ttd.big { max-height: 150px; }
.tt-hero { margin-top: var(--s3); padding: var(--s2); border-radius: var(--r); background: var(--sunken); }
.tt-hero > .tt-stage { background: var(--panel); }
.tt-hero > .tt-stage { grid-row: 1; grid-column: 1; }
.tt-markbtn { justify-self: start; min-height: 32px; font-size: var(--t-xs); }
.tt-hero.marked { grid-template-columns: 1fr; }
.tt-hero-r { display: grid; gap: 6px; min-width: 0; }
.tt-hero-r > .tt-cap { margin: 0; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
button.tt-pair-c { font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
button.tt-pair-c:hover { border-color: var(--accent); }
.tt-head { font-size: var(--t); font-weight: 650; color: var(--ink); }
.tt-look { flex: none; width: 94px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s1) var(--s1) var(--s2); font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink); line-height: 1.2; text-align: center; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r); cursor: pointer; }
.tt-look:hover { border-color: var(--accent); }
.tt-look[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--sel-bg); }
.tt-look .ttd { width: 100%; height: auto; pointer-events: none; }
.tt-look-note { font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--gold-strong); }
.ttd-blank { fill: var(--panel); stroke: var(--line-strong); }
.ttd-knob { fill: var(--gold); }
/* (the drawing beside the parts, small: full width it was 520 px tall on a phone and pushed the second color two screens down) */
/* (the stains two across, compact: one big pill each made a column taller than the screen) */
.tt-second .tt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tt-second .tt-chip { min-height: 40px; padding-right: var(--s2); }
.tt-second .tt-chip > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-second .tt-chip .dot, .tt-second .tt-wood { width: 24px; height: 24px; }
.tt-more { justify-self: start; align-self: flex-start; min-height: 36px; font-size: var(--t-sm); }
.tt-second { border-top: 1px solid var(--line); padding-top: var(--s3); }
#ttPaintDot.empty { visibility: hidden; }
.tt-second { margin-top: var(--s3); padding-top: 0; border-top: 0; }
.tt-stage { background: var(--sunken); border-radius: var(--r-lg); padding: var(--s3) var(--s2); }
.ttd.big { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.ttd.big .ttd-zone { cursor: pointer; }
.ttd.big .ttd-zone:hover rect { filter: brightness(1.08); }
.tt-cap { margin: var(--s2) 0 0; }
.tt-marked { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.tt-marked img { width: 100%; max-height: 220px; object-fit: contain; border-radius: var(--r); background: var(--sunken); }
.tt-markfirst { display: grid; justify-items: center; gap: 4px; width: 100%; padding: var(--s4) var(--s3); font: inherit; color: var(--ink); text-align: center; background: var(--sunken); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); cursor: pointer; }
.tt-markfirst:hover { border-color: var(--accent); }
.tt-markfirst > span:first-child { font-size: var(--t-xl); }
.tt-second { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s2); }
.tt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.tt-sub { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--s3) 0 6px; font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 22px; cursor: pointer; }
.tt-chip:hover { border-color: var(--accent); }
.tt-chip[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--sel-bg); font-weight: 600; }
.tt-chip .dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--dot-ring); flex: none; }
.tt-wood { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--dot-ring); flex: none; background: repeating-linear-gradient(172deg, transparent 0 4px, var(--g) 4px 5px, transparent 5px 9px), var(--c); }
.tt-good { color: var(--gold-strong); font-size: var(--t-xs); }
.tt-brand select { font-weight: 400; }
.tt-warn { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); font-size: var(--t-sm); color: var(--warn); background: var(--warn-soft); border-radius: var(--r); }
.tt-market { margin: var(--s2) 0 0; color: var(--mkt-ink); }
/* (a mark dropped off the piece: it isn't added, so it shows faded and dashed) */
.hwp-mk.off .hwp-metal { opacity: .45; stroke: var(--danger); stroke-dasharray: 3 2; }

/* ---- Steps 3–6 fold to one line that says what's chosen; tap to open ---- */
.card.step.fold:not([data-open]) > h3 { margin: 0; cursor: pointer; }
.card.step.fold[data-open] > h3 { margin-bottom: var(--s3); }
.card.step.fold > h3 .step-fold { margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; max-width: 64%; min-height: 44px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; }
.card.step.fold > h3 .step-fold:hover { border-color: var(--line-strong); background: var(--panel); }
.step-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.step-chev { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--accent); transition: transform .18s; }
.card.step.fold[data-open] .step-chev { transform: rotate(180deg); }
.card.step.fold[data-open] > h3 .step-fold { background: transparent; border-color: transparent; }
.card.step.fold[data-open] > h3 .step-sum { color: var(--muted); }
@media (max-width: 760px) { .card.step.fold > h3 .step-fold { max-width: 58%; } .card.step.fold[data-open] > h3 .step-sum { display: none; } .card.step.fold[data-open] > h3 .step-fold { padding-left: 8px; } }
@media (prefers-reduced-motion: reduce) { .step-chev { transition: none; } }

/* The bar's line of what the batch will look like, and the jump to step 2 when nothing's picked */
.ab-info .ab-spec { font-size: var(--t-xs); color: var(--muted); }
.ab-jump { padding: 14px 0; margin-block: -14px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); } /* (a full tap's height in a line's room) */
.ab-jump:hover { color: var(--accent-hover); }
@media (max-width: 359px) { .ab-info .ab-spec { display: none; } }

/* ---- The piece's photo (step 1): a "Change" badge on it; a tap opens the photo menu ---- */
.ph-wrap { position: relative; flex: none; align-self: flex-start; }
.photo-btn { position: relative; display: block; cursor: pointer; }
.photo-btn:hover { border-color: var(--gold); }
.photo-badge { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 0; border-radius: 999px; background: var(--overlay-bg); color: var(--overlay-ink); font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 1.2; pointer-events: none; }
.photo-btn.busy img { opacity: .55; }
.photo-btn.busy .photo-badge { font-size: 0; gap: 0; }
.photo-btn.busy .photo-badge svg { display: none; }
.photo-btn.busy .photo-badge::after { content: 'Saving…'; font-size: 11px; }
.photo-pop { width: min(320px, calc(100vw - 40px)); }
/* dropping a photo: what will happen, and the piece card lit when the drop would replace its photo */
#dropOverlay > div { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; max-width: min(560px, calc(100vw - 48px)); }
#dropOverlay > div span { font-size: var(--t-md); font-weight: 500; opacity: .9; }
#dropOverlay.replace { background: transparent; align-items: end; padding-bottom: 14vh; }
#dropOverlay.replace > div { padding: var(--s4) var(--s5); font-size: var(--t-lg); background: var(--overlay-bg); }
#dropOverlay.replace > div span { font-size: var(--t-sm); }
#stepPiece.drop-on { position: relative; z-index: 81; box-shadow: 0 0 0 3px var(--gold), var(--shadow-lg); }

/* Step 2: "2 colors → 2 separate versions" (every screen size), with the switch to two-tone */
.pick-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); margin: 6px 0 var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.pick-note .linkbtn { font-weight: 600; color: var(--accent); }
.ab-info .ab-spec { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ab-info .ab-spec .ab-spec-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-reset { flex: none; padding: 10px 6px; margin: -10px -6px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ab-info .ab-spec[hidden] { display: none; }

/* the piece's name in step 1 opens Piece details (a button that reads as the title) */
.piece-row .meta .pm-name { padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color .15s; }
/* (a full tap's height, 44 px, reaching into the room above and below the name: it looks and sits the same, the line under it is plain text) */
.piece-row .meta button.pm-name { padding-block: 12px; margin-block: -12px; }
.piece-row .meta .pm-name:hover, .piece-row .meta .pm-name:focus-visible { text-decoration-color: var(--gold); }
button.pm-name { font: inherit; }

/* sale form: what saving will do, just above the buttons */
.sale-effect { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--gold-soft); color: var(--ink); }
/* phones: the batch's price is never cut off (the count may take two lines); with the summary line showing, the picked colors' names
   give way (they're the chips in step 2, and the dots stay in the summary's place) */
@media (max-width: 760px) {
  .ab-info b#abCount { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  .ab-info:has(.ab-spec:not([hidden])) #abNames:has(.ab-dots) { display: none; }
}

/* ---- Hardware screen on a phone: the photo, the styles right under it, then the tools; width & cover-up folded ---- */
.hwp-more { display: grid; gap: var(--s2); }
.hwp-more > summary { display: flex; align-items: baseline; gap: var(--s2); min-height: var(--tap); align-items: center; cursor: pointer; font-size: var(--t-sm); font-weight: 600; list-style: none; }
.hwp-more > summary::-webkit-details-marker { display: none; }
.hwp-more > summary::before { content: '▸'; color: var(--accent); transition: transform .15s; }
.hwp-more[open] > summary::before { transform: rotate(90deg); }
.hwp-more > summary .hint { font-weight: 400; }
@media (min-width: 900px) { .hwp-more > summary { display: none; } }
/* (a short window: less margin round the screen, for the photo) */
/* (a small laptop's window: the whole window, its margins and the corners' room given to the photo; the versions smaller; the width
   question on one line; the total in its short form) */
@media (min-width: 900px) and (max-height: 760px), (min-width: 900px) and (max-width: 1150px) {
  dialog.hwp-dlg { width: 100vw; max-height: none; border-radius: 0; border: 0; padding: var(--s3); }
  dialog.hwp-dlg[open] { height: 100dvh; column-gap: var(--s3); }
  .hwp-dlg .hwp-onb img { width: 44px; height: 28px; }
  .hwp-dlg .hwp-onl { font-size: 10px; }
  .hwp-dlg .hwp-onb { width: auto; min-width: 50px; }
  .hwp-dlg .hwp-onb span { max-width: none; }
  .hwp-ask-guess { display: none; }
  .hwp-ask-in input { width: 52px; }
  .hwp-dlg .hwp-count[data-short]:not([data-short='']) { font-size: 0; }
  .hwp-dlg .hwp-count[data-short]:not([data-short=''])::after { content: attr(data-short); font-size: var(--t-sm); }
  .hwp-dlg .dlg-foot { padding-top: var(--s2); }
}
@media (max-width: 899px) {
  .hwp-dlg > .hwp-panel { order: 2; }
  .hwp-dlg > .hwp-under { order: 4; }
  .hwp-dlg > .error, .hwp-dlg > .tool-live { order: 5; }
  .hwp-dlg > .dlg-foot { order: 6; position: sticky; bottom: calc(-1 * (var(--s3) + var(--safe-b))); margin: 0 calc(-1 * var(--s3)) calc(-1 * (var(--s3) + var(--safe-b))); padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-b)); background: var(--panel); border-top: 1px solid var(--line); z-index: 2; }
  .hwp-stage svg { max-height: min(48dvh, 520px); }
  /* (the photo near the top: one line of title, the width question slim, which version it's on under the photo; the subtitle and the
     how-to took 290 px of an iPhone SE before the photo began) */
  #hwpSub, .hwp-dlg > .hwp-hint { display: none; }
  .hwp-dlg > .hwp-ask { order: 3; }
  .hwp-dlg > .hwp-on { order: 3; }
  .hwp-dlg .hwp-stage { background: none; width: 100%; }
  .hwp-dlg > .tool-head, .hwp-dlg > .hwp-ask, .hwp-dlg > .hwp-on { align-self: stretch; }
  /* (only the row in use takes room: the bar along the bottom holds the other, so nothing below the photo jumps when one is tapped) */
  .hwp-mode.off { display: none; }
  .hwp-dlg:not(.hwp-picked) .hwp-whererow { min-height: 0; }
  .hwp-wherehint:not(:has(.hwp-fixone)) { display: none !important; }
  .hwp-ask-guess, .hwp-ask-x { display: none; }
  .hwp-ask-long { display: inline; }
  .hwp-ask-in input { width: 56px; min-height: 40px; }
  /* (the width question one slim line, not a banner; gone while one pull is being fine-tuned) */
  .hwp-ask { gap: 6px; padding: 4px 4px 4px var(--s2); background: var(--sunken); border-color: transparent; }
  .hwp-ask .btn { min-height: 40px; padding: 0 10px; }
  .hwp-ask .hwp-ask-q { white-space: normal; line-height: 1.25; }
  /* (one slim line until Measure is tapped: what it's using, Measure, Not now) */
  .hwp-ask:not(.open) .hwp-ask-in, .hwp-ask:not(.open) #hwpAskSet { display: none; }
  .hwp-ask:not(.open) .hwp-ask-open { display: inline-flex; }
  .hwp-ask-sub { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--ink-2); }
  .hwp-panel .hwp-holehint { display: none !important; }
  .hwp-kinds { -webkit-mask-image: linear-gradient(to right, black 85%, transparent); mask-image: linear-gradient(to right, black 85%, transparent); }
  .hwp-dlg.hwp-picked > .hwp-ask, .hwp-dlg.hwp-picked > .hwp-on, .hwp-dlg.hwp-picked > .hwp-panel, .hwp-dlg.hwp-picked > .hwp-under { display: none; } /* (the bar over nothing but the photo while one is fine-tuned: the style chips and cards peeked out between them) */
  .hwp-onb { width: auto; min-width: 64px; }
  .hwp-onb img { width: 56px; height: 40px; }
  .hwp-onb span { max-width: none; }
  /* (the footer one row: what it comes to, Save picture, Done; Cancel is the ✕ at the top, the store links under the tools) */
  .hwp-dlg .dlg-foot { flex-wrap: nowrap; align-items: center; gap: var(--s2); }
  #hwpCancel { display: none; }
  /* (the all-pulls row one line at 375 px: the two layouts, Undo, and ⋯ for Clear and the store links) */
  #hwpLayout > button { padding: 0 10px; }
  #hwpAll .btn.small { padding: 0 10px; }
  .hwp-perl { display: inline; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
  #hwpAll .hwp-segl { display: none; }
  #hwpLayout > button { min-width: 44px; padding: 0 12px; font-size: var(--t-md); }
  #hwpAll .hwp-undo, .hwp-moremenu > summary { padding: 0 12px; justify-content: center; }
  #hwpAll .hwp-undo:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
  #hwpAll .hwp-grp-row { flex: 1 1 auto; }
  #hwpAll .hwp-grp-row > .hwp-undo { margin-left: auto; }
  #hwpAll .hwp-grp-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
  .hwp-moremenu { display: block; position: relative; }
  .hwp-moremenu > summary { list-style: none; min-width: var(--tap); justify-content: center; font-size: var(--t-md); }
  .hwp-moremenu > summary::-webkit-details-marker { display: none; }
  .hwp-moremenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 7; display: grid; gap: 4px; min-width: 200px; padding: var(--s2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
  .hwp-moremenu-list > *, .hwp-moremenu-list .hwp-buylinks > * { display: flex; align-items: center; min-height: var(--tap); width: 100%; justify-content: flex-start; padding: 0 var(--s2); font-size: var(--t-sm); }
  .hwp-moremenu-list .hwp-buylinks { display: grid; gap: 4px; padding: 0; }
  .hwp-moremenu-list > #hwpClear { border: 0; background: none; }
  .hwp-dlg .dlg-foot > .btn { flex: none; padding-left: var(--s3); padding-right: var(--s3); }
  .hwp-dlg .hwp-buy { flex: 1 1 auto; min-width: 0; }
  .hwp-dlg .hwp-count[data-tiny]:not([data-tiny='']) { font-size: 0; }
  .hwp-dlg .hwp-count[data-tiny]:not([data-tiny=''])::after { content: attr(data-tiny); font-size: var(--t-sm); font-weight: 600; }
  .hwp-dlg .hwp-count, .hwp-dlg .hwp-count[data-short]:not([data-short=''])::after { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; }
  .hwp-stage > .hwp-buylinks { display: flex; gap: var(--s3); justify-self: start; padding: 0 var(--s1); }
  .hwp-stage > .hwp-buylinks .linkbtn { min-height: 40px; padding: 0 var(--s3); font-size: var(--t-sm); font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--r-sm); text-decoration: none; display: inline-flex; align-items: center; }
  /* (the one tapped: its tools in a bar along the bottom, in place of the footer, in reach and in sight; the screen leaves room for
     it so the photo scrolls clear of it) */
  .hwp-dlg.hwp-picked > .dlg-foot, .hwp-dlg.hwp-picked .hwp-stage > .hwp-buylinks { display: none; }
  .hwp-dlg.hwp-picked #hwpSel { position: fixed; left: 0; right: 0; top: var(--hwp-sheet-top, auto); bottom: auto; z-index: 6; margin: 0; padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-b)); background: var(--panel); }
  .hwp-dlg.hwp-picked.hwp-docked #hwpSel { border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .hwp-dlg.hwp-picked #hwpSel .hwp-whererow { min-height: 0; align-items: center; }
  .hwp-dlg.hwp-picked #hwpWhere { flex: 1 1 100%; order: 3; min-width: 0; min-height: 0; font-size: var(--t-xs); }
  .hwp-dlg.hwp-picked #hwpSel .hwp-whererow { flex-wrap: wrap; row-gap: 4px; }
  .hwp-dlg.hwp-picked .hwp-which { display: flex; align-items: center; gap: 6px; order: 1; }
  .hwp-dlg.hwp-picked .hwp-which .btn { min-width: 44px; min-height: 40px; padding: 0; font-size: var(--t-md); }
  .hwp-dlg.hwp-picked .hwp-which-n { font-weight: 600; font-size: var(--t-sm); min-width: 6.5em; text-align: center; }
  .hwp-dlg.hwp-picked #hwpDone { order: 2; }
  .hwp-dlg.hwp-picked { padding-bottom: calc(var(--hwp-sheet-h, 200px) + var(--s3)); }
  /* (the bar's rows: the arrows each saying ⅛″; where across its drawer, in words, with the exact spot; this pull's own buttons) */
  .hwp-dlg.hwp-picked #hwpFine { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
  .hwp-dlg.hwp-picked #hwpFine .hwp-grp, .hwp-dlg.hwp-picked #hwpFine .hwp-grp-row, .hwp-dlg.hwp-picked #hwpFine .hwp-nudge, .hwp-dlg.hwp-picked #hwpFine .hwp-snapto { display: contents; }
  .hwp-dlg.hwp-picked #hwpFine .hwp-break, .hwp-dlg.hwp-picked #hwpFine .hwp-pickfirst { display: none; }
  .hwp-dlg.hwp-picked #hwpFine .btn { grid-column: span 3; min-width: 0; min-height: 48px; margin: 0; padding: 0 4px; }
  .hwp-dlg.hwp-picked #hwpFine [data-nudge]::after { content: ' ⅛″'; font-size: var(--t-xs); font-weight: 600; }
  .hwp-dlg.hwp-picked #hwpFine .hwp-dk { display: inline; }
  /* (the cards' finishes and sizes big enough for a finger: 26 px dots and 30 px chips were under a comfortable touch) */
  .hwp-strip .hwp-shape:not(.on) :is(.hwp-sizes, .hwp-fins, .hwp-finname) { display: none; }
  .hwp-strip .hwp-shape:not(.on) .hwp-more-l { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--accent); font-weight: 600; }
  .hwp-strip .hwp-shape.on { grid-column: 1 / -1; }
  .hwp-strip .hwp-shape.on > .hwp-style { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); column-gap: var(--s3); align-items: center; }
  .hwp-strip .hwp-shape.on > .hwp-style > .hwp-pic { grid-row: 1 / span 4; }
  .hwp-strip .hwp-shape.on > .hwp-style > :not(.hwp-pic):not(.hwp-onit):not(.hwp-fits) { grid-column: 2; }
  .hwp-strip .hwp-shape.on > .hwp-style .hwp-sn { font-size: var(--t-sm); }
  .hwp-strip .hwp-shape.on .hwp-fins { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 30px 6px; padding-bottom: 26px; justify-items: center; }
  .hwp-strip .hwp-shape.on .hwp-fin { position: relative; }
  .hwp-strip .hwp-shape.on .hwp-fincap { display: block; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); width: 62px; font-family: var(--font); font-size: 11px; line-height: 1.15; font-weight: 500; color: var(--ink-2); text-align: center; white-space: normal; pointer-events: none; }
  .hwp-strip .hwp-fins { gap: 8px; }
  .hwp-strip button.hwp-fin { width: 40px; height: 40px; }
  .hwp-strip .hwp-size { min-height: 36px; }
  .hwp-strip .hwp-cmp-go { display: inline-flex; align-items: center; min-height: 36px; margin: 4px 0 0; padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); text-decoration: none; }
  .hwp-dlg.hwp-picked #hwpFine .hwp-ph { display: none; }
  .hwp-dlg.hwp-picked #hwpFine .btn { white-space: normal; line-height: 1.15; }
  .hwp-dlg.hwp-picked #hwpFine .hwp-undo { display: inline-flex; }
  .hwp-dlg.hwp-picked #hwpDone { margin-left: auto; min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--accent); border-radius: var(--r-sm); font-weight: 650; text-decoration: none; background: var(--accent); color: var(--accent-ink); }
  .hwp-dlg.hwp-picked #hwpFine .btn[aria-pressed="true"] { background: var(--panel); color: var(--accent); border: 2px solid var(--accent); box-shadow: none; }
  .hwp-dlg.hwp-picked #hwpFine .btn[aria-pressed="true"]::before { content: '✓ '; }
  /* (a swipe that starts on the photo scrolls the screen; the hardware itself still drags) */
  .hwp-stage, .hwp-stage svg { touch-action: pan-y; }
  .hwp-mk { touch-action: none; }
  .hwp-sel { touch-action: manipulation; }
}

/* ---- My paints: one list; a paint's cans (what's left, for Costs) inside its row ---- */
.paint-card .si-can { display: grid; gap: 4px; margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--sunken); }
.paint-card .si-can .si-left { font-size: var(--t-sm); font-variant-numeric: tabular-nums lining-nums; }
.paint-card .si-more > summary { cursor: pointer; font-size: var(--t-xs); color: var(--ink-2); min-height: 32px; display: flex; align-items: center; }
.paint-card .add-can { padding-left: 0; text-align: left; }
.paint-card .add-can .hint { font-weight: 400; }
.paint-card.just-added { box-shadow: 0 0 0 3px var(--gold); transition: box-shadow .3s; }
.paints-colors-title .hint { font-family: var(--font); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; }

/* step 1: "What is it?" leads the Type & size editor; the line under the name opens it (and says when the type isn't chosen yet) */
.type-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--s2) 0; }
.type-pick .tp-q { font-size: var(--t-sm); font-weight: 600; margin-right: 4px; }
/* On a computer the free previews' row always says what to do (or that the photo is being read), right by the colors: the first-run line
   above it said the same thing again, and pushed the colors down (on a phone the row folds away until a color is picked, so it stays) */
@media (min-width: 761px) { .firstrun.fr-instant { display: none; } }
.piece-row .meta .piece-meta { display: block; max-width: 100%; font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piece-row .meta .piece-meta.unset { color: var(--accent); font-weight: 600; }
/* (a piece whose kind isn't set yet: its "Type & size" button stands out, as the line above it says to pick it below) */
.links .linkbtn.unset { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.shelf-add > summary { flex-wrap: wrap; }
.shelf-add > summary .hint { flex-basis: 100%; font-weight: 400; }

/* step 4: the one on/off for two-tone, inside the step (the header keeps one control: the line that says Off or what's chosen) */
/* (once it's on, one slim line: the drawing and the colors under it say the rest) */
/* step 2 on a phone: the quick picks as five-across tiles (a big swatch, its name under it), two rows instead of five */
@media (max-width: 760px) {
  .sw-grid.tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .sw-grid.tiles .swatch { position: relative; flex-direction: column; justify-content: flex-start; gap: 5px; height: auto; min-height: 84px; padding: 8px 2px 6px; text-align: center; }
  .sw-grid.tiles .swatch .dot { width: 38px; height: 38px; }
  .sw-grid.tiles .swatch .sw-name { flex: none; width: 100%; white-space: normal; font-size: 11px; line-height: 1.2; font-weight: 600; }
  .sw-grid.tiles .swatch .sw-b { display: none; }
  .sw-grid.tiles .swatch[aria-pressed="true"]::after { position: absolute; top: 4px; right: 5px; margin: 0; font-size: 12px; }
}
/* (phone, Make: the tabs slide away while scrolling down; the Generate bar takes their place) */
@media (max-width: 760px) {
  .tabbar { transition: transform .2s ease; }
  .actionbar { transition: transform .2s ease; }
  .tabs-away .tabbar { transform: translateY(100%); }
  .tabs-away .actionbar { transform: translateY(var(--bar-h)); } /* (it stops above the home bar) */
  body:has(.tabbar :focus) .tabbar, body:has(.tabbar :focus) .actionbar { transition: none; } /* (back at once for the keyboard) */
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .tabbar, .actionbar { transition: none; } }

/* ---- the featured version: one main button, then Star, Download and ⋯ as icons, all on one row ---- */
.icon-btn { width: var(--tap); min-width: var(--tap); padding: 0; font-size: 18px; line-height: 1; }
.btn.small.icon-btn { width: var(--tap); padding: 0; }
.rh-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* (two text buttons, "Make final · 21¢" and "Listing kit": the row wraps rather than cutting their words; it showed "ake final ·") */
.rh-btns > .btn:not(.icon-btn) { flex: 1 1 auto; min-width: max-content; }
.rh-icons { display: flex; flex: none; gap: 6px; }
.rh-icons .rh-star.on { color: var(--gold-strong); }
.rh-menu { right: 0; left: auto; }
/* Results' header: Compare and ⋯, side by side at the start of the row */
.results-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.results-actions .menu-list { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; } /* (near the top of the screen: it opens downward) */

/* ---- In stock on a phone: compact rows (the photo and its planned look stacked small on the left, the facts and buttons beside them),
   so a screen shows two or three pieces instead of one, and "Choose a planned look" is a small button, not a third of the card ---- */
@media (max-width: 760px) {
  .stock-grid { gap: var(--s2); }
  .stock-card { flex-direction: row; align-items: stretch; }
  .stock-card .pair, .stock-card .pair.noplan { flex: none; width: 104px; grid-template-columns: 1fr; align-content: start; border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px); }
  .stock-card figure { aspect-ratio: 1 / 1; }
  .stock-card figcaption { left: 4px; top: 4px; padding: 2px 5px; font-size: 9px; }
  .stock-card .plan-add { flex-direction: row; gap: 4px; min-height: var(--tap); padding: 4px; font-size: 11px; line-height: 1.15; text-align: left; }
  .stock-card .plan-add span { font-size: 16px; }
  .stock-card .body { padding: 8px 10px 10px; gap: 4px; }
  .stock-card .label strong { font-size: 17px; }
  .stock-card .sc-btns { flex-wrap: nowrap; gap: 6px; }
  .stock-card .sc-btns .btn { padding: 0 10px; }
}

/* ---- Settings: the section chips wrap (every section in view); Advanced folds away the rarely needed; the saved line by Done ---- */
.set-jump { flex-wrap: wrap; overflow: visible; }
.set-adv > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); cursor: pointer; list-style: none; min-height: var(--tap); }
.set-adv > summary::-webkit-details-marker { display: none; }
.set-adv > summary h3 { margin: 0; }
.set-adv > summary h3::after { content: ' ▸'; color: var(--accent); }
.set-adv[open] > summary h3::after { content: ' ▾'; }
.set-adv > summary .hint { flex-basis: 100%; }
.set-adv > .set-section { margin-top: var(--s3); border: 0; padding-left: 0; padding-right: 0; }
.set-saved { margin-right: auto; color: var(--good); font-weight: 600; }
/* (the Star in the featured version's row is an ordinary icon button there, not the corner star of a card) */
.rh-icons .btn.v-star { position: static; inset: auto; width: var(--tap); height: var(--tap); border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); box-shadow: none; font-size: 18px; }
.rh-icons .btn.v-star.on { color: var(--gold-strong); }

/* ---- layout slips (10-18 re-rating): sheets reach both edges, empty text spans its grid, links line up, tool rows don't strand a button ---- */
@media (max-width: 760px) { dialog.costs-dlg { width: 100%; } }
.plan-empty { grid-column: 1 / -1; }
.pick-note .linkbtn { padding-left: 0; min-width: 0; }
.hwp-tools { flex-wrap: nowrap; gap: 6px; }
.hwp-tools .btn { padding: 0 var(--s3); }
.hwp-tools .seg button { padding: 0 10px; }

/* ---- Mark as sold: the short sheet (the rest of the record a tap away) ---- */
#saleForm.quick #saleBoughtBlock, #saleForm.quick #saleMoreBox { display: none; }
#saleForm.quick #saleSoldBlock > h3 { display: none; }
.sale-more-btn { padding-left: 0; text-align: left; }
.sale-more #saleRemove { margin-top: var(--s3); }
#saleForm .place-chips { margin-top: var(--s2); }

/* ---- Settings: a list of sections; each opens on its own page ---- */
.set-off { display: none !important; }
#setJump:has(.set-list), #setJump:has(.set-back) { position: static; display: block; margin: 0; padding: 0; background: none; border: 0; }
.set-list { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.set-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--s3); min-height: 60px; padding: var(--s2) var(--s3); border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.set-row:first-child { border-top: 0; }
.set-row:hover, .set-row:focus-visible { background: var(--sunken); }
.set-row-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sunken); color: var(--accent); }
.set-row-t { display: grid; gap: 1px; min-width: 0; }
.set-row-t b { font-weight: 600; }
.set-row-t small { font-size: var(--t-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-row-go { color: var(--muted); font-size: 22px; line-height: 1; }
.set-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 var(--s2) 0 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.set-back span { font-size: 22px; line-height: 1; }
/* (a color swatch reads as paint, not an empty radio: a rounded square with a hairline edge and a little shading) */
.swatch .dot { border-radius: 30%; box-shadow: inset 0 0 0 1px var(--dot-ring), inset 0 -8px 12px -8px var(--dot-ring); }
.pick-chip .dot { border-radius: 30%; box-shadow: inset 0 0 0 1px var(--dot-ring); }

/* ---- listing kit: its one job at the bottom, always in reach (Write listing, then Copy listing) ---- */
.kit-bar { position: sticky; bottom: calc(-1 * var(--s4)); z-index: 3; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); margin: var(--s3) calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: var(--s3) var(--s4) calc(var(--s3) + var(--safe-b)); background: var(--panel); border-top: 1px solid var(--line); }
.kit-bar .hint { margin-right: auto; font-size: var(--t-xs); }
.kit-bar .btn { min-width: 150px; }

/* Results: the three ideas named once, under the filters */
.results-legend { flex-basis: 100%; margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-2); }
.results-legend b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.results-legend .ribbon { width: 12px; height: 12px; vertical-align: -2px; }
.studio[data-empty] .results-legend { display: none; }
/* step 1 on a phone: one chip fewer (Crop lives in the photo's menu there too) */
@media (max-width: 760px) {
  #cropOpen { display: none; }
  .piece-row { align-items: flex-start; }
}
/* (phone: the photo beside the name and the line under it; the chips run full width under both, on one row) */
@media (max-width: 760px) {
  .piece-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); row-gap: 2px; align-items: center; }
  .piece-row > .meta { display: contents; }
  .piece-row > .ph-wrap { grid-row: 1 / span 2; }
  .piece-row .meta > b, .piece-row .meta > #pieceMeta { grid-column: 2; }
  .piece-row .meta > .links { grid-column: 1 / -1; margin: var(--s2) 0 0; gap: 6px; }
  .piece-row .meta > .links .linkbtn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Time sheet: steps, timer, $ an hour (public/js/time.js) ---- */
.tm-hero { display: grid; gap: var(--s2); background: var(--hero); color: var(--hero-ink); padding: var(--s3) var(--s4) var(--s4); border-radius: var(--r); }
@media (prefers-color-scheme: dark) { .tm-hero { border: 1px solid var(--line-strong); } }
.tm-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s3); }
.tm-rate { display: grid; gap: 2px; min-width: 0; }
.tm-rate small, .tm-figs small, .tm-days small, .tm-timer small { text-transform: uppercase; letter-spacing: var(--caps); font-size: 11px; font-weight: 600; }
.tm-rate small, .tm-figs small { color: var(--hero-sub); }
.tm-rate b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 40px; line-height: 1.05; color: var(--hero-good); font-variant-numeric: tabular-nums lining-nums; }
.tm-rate b.loss { color: var(--hero-bad); }
.tm-rate span { font-size: var(--t-sm); color: var(--hero-sub); font-variant-numeric: tabular-nums lining-nums; }
.tm-figs { display: flex; gap: var(--s4); }
.tm-figs div { display: grid; gap: 1px; }
.tm-figs b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 18px; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tm-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--hero-ink) 18%, transparent); overflow: hidden; }
.tm-bar span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.tm-goal, .tm-note { margin: 0; font-size: var(--t-sm); color: var(--hero-sub); }
.tm-goal.ok { color: var(--hero-good); } .tm-goal.low { color: var(--hero-mid); }
.tm-goal b { color: var(--hero-ink); }
.tm-timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--gold); background: var(--gold-soft); color: var(--ink); border-radius: var(--r); }
.tm-timer .tm-what { display: grid; flex: 1 1 6em; min-width: 0; }
@media (max-width: 420px) { .tm-timer .btn { flex: 1 1 auto; } }
.tm-timer small { color: var(--gold-strong); }
.tm-clock { font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; font-variant-numeric: tabular-nums lining-nums; }
.tm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; animation: tm-pulse 1.6s ease-in-out infinite; display: inline-block; }
@keyframes tm-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tm-dot { animation: none; } }
.tm-howto { margin: 0; }
.tm-howto .icon { vertical-align: -1px; }
.tm-group h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.tm-group h3 .hint { font-family: var(--font); font-size: var(--t-sm); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.tm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tm-step { border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-sm); }
.tm-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s2); padding: 4px var(--s2) 4px 6px; }
.tm-check { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--edge); background: var(--panel); color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.tm-step.done .tm-check { background: var(--good); border-color: var(--good); }
.tm-check:disabled { opacity: .4; cursor: default; }
.tm-name { text-align: left; background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 1px; min-width: 0; min-height: var(--tap); align-content: center; }
.tm-name b { font-weight: 600; }
.tm-name .hint { font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-min { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.tm-min .est { color: var(--muted); font-size: var(--t-xs); }
.tm-min.over { color: var(--warn); }
.tm-go { min-width: 40px; padding-inline: 10px; }
.tm-go.on { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); }
.tm-step.done .tm-name b { color: var(--muted); }
.tm-step.doing { border-color: var(--gold); }
.tm-step.running { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.tm-step.skipped { background: var(--sunken); }
.tm-step.skipped .tm-name b { text-decoration: line-through; color: var(--muted); }
.tm-more { display: grid; gap: var(--s2); padding: var(--s2) var(--s3) var(--s3) 44px; border-top: 1px solid var(--line); }
.tm-more .hint { margin: 0; }
.tm-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--t-sm); }
.tm-entries li { display: flex; align-items: center; gap: var(--s2); font-variant-numeric: tabular-nums lining-nums; }
.tm-entries li .hint { flex: 1; }
dialog.drop-panel.time-dlg { width: min(560px, calc(100vw - 24px)); max-height: min(90vh, 980px); }
.time-dlg .sheet-head h2 { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { dialog.drop-panel.time-dlg { width: 100%; max-height: 92vh; } }
.time-dlg h3 { margin: var(--s3) 0 var(--s2); font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; }
.tm-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: end; gap: var(--s2); }
.tm-add .field { margin: 0; min-width: 0; }
.tm-add .field input { width: 100%; }
@media (max-width: 420px) { .tm-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .tm-add .btn { grid-column: 1 / -1; } }
.tm-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding: var(--s3); background: var(--sunken); border-radius: var(--r-sm); }
.tm-days div { display: grid; gap: 1px; }
.tm-days small { color: var(--muted); }
.tm-days b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 18px; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 420px) { .tm-rate b { font-size: 34px; } .tm-figs { gap: var(--s3); } .tm-more { padding-left: var(--s3); } }
/* the bar while a timer runs, on every screen */
.timer-pill { position: fixed; right: max(var(--s4), env(safe-area-inset-right, 0px)); bottom: calc(var(--s4) + var(--safe-b)); z-index: 60; display: flex; align-items: stretch; background: var(--hero); color: var(--hero-ink); border-radius: 99px; box-shadow: var(--shadow-lg); overflow: hidden; max-width: min(360px, calc(100vw - 24px)); }
.timer-pill[hidden] { display: none; }
@media (max-width: 760px) { .timer-pill { bottom: calc(var(--bar-h) + var(--safe-b) + var(--s2)); } }
.timer-pill button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.tp-open { display: flex; align-items: center; gap: var(--s2); padding: 8px 6px 8px 14px; min-width: 0; min-height: var(--tap); text-align: left; }
.tp-what { display: grid; min-width: 0; line-height: 1.2; }
.tp-what b { font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-what span { font-size: var(--t-xs); color: var(--hero-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-clock { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; padding-left: var(--s1); }
.tp-stop { padding: 0 14px 0 10px; display: grid; place-items: center; min-width: var(--tap); border-left: 1px solid color-mix(in srgb, var(--hero-ink) 20%, transparent) !important; }
/* the time line on an In stock card, the piece sheet's tile and the Costs sheet's line */
.stock-card .sc-time { margin-left: calc(var(--s2) * -1); min-height: 32px; text-align: left; font-weight: 500; color: var(--ink-2); display: block; font-variant-numeric: tabular-nums lining-nums; }
.stock-card .sc-time .icon { vertical-align: -3px; }
.stock-card .sc-time b { font-weight: 650; color: var(--good); }
.stock-card .sc-time b.loss { color: var(--danger); }
.stock-card .sc-time.timing { color: var(--ink); }
.ps-fig-btn { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: var(--s2) var(--s3); display: grid; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ps-fig-btn small { font-size: var(--t-xs); color: var(--muted); }
.ps-fig-btn b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; font-variant-numeric: tabular-nums lining-nums; }
.ps-fig-btn b.gain, .ps-fig-btn b.est-fig { color: var(--good); } .ps-fig-btn b.loss { color: var(--danger); }
.ps-fig-btn .ps-sub { font-size: var(--t-xs); color: var(--muted); }
.est-hour { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); font-size: var(--t-sm); }
.est-hour .linkbtn { min-height: var(--tap); margin-block: -6px; } /* (a full tap's height that takes a 32-px line's room) */
/* Time sheet, round 2: the range, the condition, selling taps, what raises $ an hour */
.tm-range { font-size: var(--t-sm); font-weight: 600; color: var(--hero-ink); font-variant-numeric: tabular-nums lining-nums; }
.tm-cond { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.tm-cond-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.tm-cond-head h3 { margin: 0; }
.tm-src { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--caps); color: var(--gold-strong); }
.tm-src.muted { color: var(--muted); }
.tm-check-photo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); background: var(--gold-soft); border-radius: var(--r-sm); }
.tm-check-photo .hint { margin: 0; flex: 1 1 16em; color: var(--ink-2); }
.tm-saw { margin: 0; }
.tm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-chips .chip { min-height: 36px; }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tm-lab { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); min-width: 5.5em; }
.tm-row select { flex: 1 1 12em; max-width: 20em; min-height: 40px; }
.tm-reps summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); padding: 6px 0; min-height: 36px; display: flex; align-items: center; gap: var(--s2); }
.tm-reps summary .hint { font-weight: 400; }
.tm-reps .tm-chips { padding-top: 4px; }
.tm-taps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 var(--s2) var(--s2) 44px; }
.tm-taps .hint { margin-right: 2px; }
.tm-taps .chip { min-height: 34px; }
@media (max-width: 420px) { .tm-taps { padding-left: var(--s2); } }
.tm-raise { padding: var(--s3); border-radius: var(--r); background: var(--good-soft); }
.tm-raise h3 { margin: 0 0 var(--s2); }
.tm-raise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.tm-raise li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); font-size: var(--t-sm); }
.tm-raise li > span { display: grid; gap: 1px; min-width: 0; }
.tm-raise li .hint { font-size: var(--t-xs); }
.tm-raise li > b { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }

/* ---- Settings, round 2 (2026-10-19 review): grouped list with status, a header with the section's name, switches, money boxes,
   choice cards, AI spending tiles, the plan ---- */
.settings-dlg .tool-head { justify-content: flex-start; gap: var(--s2); }
.set-hback { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 var(--s2) 0 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; flex: none; }
.set-hback span { font-size: 24px; line-height: 1; }
.set-hback:not([hidden]) + h2 { font-size: 20px; }
@media (min-width: 761px) { dialog.settings-dlg { margin-top: 6vh; margin-bottom: auto; } .settings-dlg form { max-height: 88vh; } }
.settings-body.set-one .set-section > h3 { display: none; }
.settings-body.set-one .set-section { border: 0; background: none; padding: 0; }
.set-group { margin: var(--s2) 0 var(--s1); font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
#setJump .set-group:first-child { margin-top: 0; }
.set-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
.set-row-st { font-size: var(--t-sm); color: var(--ink-2); text-align: right; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.set-row-st.ok { color: var(--good); }
.set-row-st.warn { color: var(--warn); font-weight: 600; }
@media (max-width: 420px) { .set-row-t small { display: none; } .set-row-st { max-width: 9em; } }
.set-row-ic { background: var(--accent-soft); color: var(--ink); }
/* the first steps, until done */
.set-start { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--gold-soft); color: var(--ink); }
.set-start ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.set-start button { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 40px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; }
.set-start .start-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--edge); font-weight: 700; font-size: var(--t-sm); flex: none; }
.set-start li.done { color: var(--muted); }
.set-start li.done .start-n { background: var(--good); border-color: var(--good); color: var(--accent-ink); }
/* switches: a checkbox with role=switch, drawn as one */
.switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; }
.switch-row > span { display: grid; gap: 1px; order: 1; }
.switch-row > span b { font-weight: 600; font-size: var(--t); }
.switch-row > span small { font-size: var(--t-xs); color: var(--muted); font-weight: 400; }
.switch-row > span b { font-weight: 600; }
.switch-row input[role=switch] { order: 2; appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line-strong); position: relative; margin: 0; cursor: pointer; transition: background .15s; flex: none; }
.switch-row input[role=switch]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow); transition: transform .15s; }
.switch-row input[role=switch]:checked { background: var(--gold); }
.switch-row input[role=switch]:checked::after { transform: translateX(18px); }
.switch-row input[role=switch]:disabled { opacity: .55; cursor: default; }
.switch-row input[role=switch]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch-row input[role=switch], .switch-row input[role=switch]::after { transition: none; } }
.set-switches { display: grid; gap: var(--s1); padding: var(--s2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* money boxes: $ [ 20 ] a month */
.money-in { flex-direction: row; align-items: center; gap: var(--s2); }
.money-in > input, .money-row > input { width: 7em; }
.money-pre, .money-post { color: var(--ink-2); font-weight: 500; }
.money-in.wide-in { flex-direction: column; align-items: stretch; }
.money-row { display: flex; align-items: center; gap: var(--s2); }
.settings-dlg .field select, .settings-dlg .field input { font-weight: 500; }
/* choice cards */
.choice-cards { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.choice-cards legend { font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s1); }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3); border: 1px solid var(--edge); border-radius: var(--r); cursor: pointer; background: var(--panel); }
.choice input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.choice > span { display: grid; gap: 2px; }
.choice b { font-weight: 600; }
.choice small { font-size: var(--t-sm); color: var(--muted); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
/* AI pictures: status, the key, spending tiles and the limit bar */
.ai-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.ai-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-weight: 600; font-size: var(--t-sm); background: var(--sunken); color: var(--ink); }
.ai-pill.ok { background: var(--good-soft); color: var(--good); }
.ai-pill.warn { background: var(--warn-soft); color: var(--warn); }
.ai-acts { display: flex; flex-wrap: wrap; gap: var(--s2); flex-basis: 100%; }
@media (min-width: 640px) { .ai-acts { flex-basis: auto; margin-left: auto; } }
.choice small, .choice b { font-weight: 400; } .choice b { font-weight: 600; }
.key-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 2px; }
.key-edit { display: grid; gap: var(--s2); }
.ai-spend { display: grid; gap: var(--s2); }
.ai-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ai-tiles > div { display: grid; gap: 1px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--sunken); min-width: 0; }
.ai-tiles small { font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.ai-tiles b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.ai-tiles span { font-size: var(--t-xs); color: var(--muted); }
.ai-bar, .plan-meter { display: block; height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.ai-bar span, .plan-meter span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
/* the plan */
.plan-use { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.plan-use li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s3); font-size: var(--t-sm); }
.plan-use li b { font-variant-numeric: tabular-nums lining-nums; }
.plan-use .plan-meter { grid-column: 1 / -1; }
.plan-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
@media (max-width: 640px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-card { display: grid; align-content: start; gap: var(--s1); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.plan-card.current { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.plan-head b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; }
.plan-badge { font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--gold-strong); }
.plan-price { font-family: var(--serif); font-weight: var(--serif-w); font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.plan-price small { font-family: var(--font); font-size: var(--t-sm); color: var(--muted); }
.plan-card ul { margin: var(--s1) 0 0; padding-left: 1.1em; display: grid; gap: 2px; font-size: var(--t-sm); }
.plan-note { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--gold-soft); color: var(--ink-2); }
/* ===== Settings, round 3 (2026-10-19) ===== */
/* the switch: off is an outlined neutral track, on is filled camel, so the two can't be mistaken */
.switch-row input[role=switch] { background: var(--panel); box-shadow: inset 0 0 0 2px var(--line-strong); }
.switch-row input[role=switch]::after { background: var(--muted); box-shadow: none; }
.switch-row input[role=switch]:checked { background: var(--gold); box-shadow: none; }
.switch-row input[role=switch]:checked::after { background: var(--knob); box-shadow: var(--shadow); }
/* no limit on your own key: a camel warning with a one-tap fix */
.cap-warn { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--gold-soft); border-left: 3px solid var(--gold); color: var(--ink); font-size: var(--t-sm); }
.cap-warn .linkbtn { padding: 0; min-height: 0; min-width: 0; display: inline; text-decoration: underline; }
.key-remove { margin: 0; }
.danger-link { color: var(--danger); padding: 0; }
/* plan cards: ask for a plan */
.plan-card > .btn { justify-self: start; margin-top: var(--s1); }
.plan-asked { margin: var(--s1) 0 0; font-weight: 600; color: var(--good); font-size: var(--t-sm); }
.plan-asked .hint { display: block; font-weight: 400; color: var(--muted); }
.plan-lock, .plan-note svg { display: inline-flex; align-items: center; gap: 4px; vertical-align: -2px; }
.plan-note .linkbtn { padding: 0; min-height: 0; min-width: 0; display: inline; text-decoration: underline; }
/* the shop card opens your account (website) */
.set-shop:has(.ss-btn) { padding: 0; }
.ss-btn { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; width: 100%; padding: var(--s3) var(--s4); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r); grid-column: 1 / -1; }
.ss-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ss-go { font-size: var(--t-sm); font-weight: 600; color: var(--hero-sub); white-space: nowrap; }
/* closing the business: last, on its own, in red */
.set-danger { margin-top: var(--s3); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.set-danger .set-row-t b { color: var(--danger); }
.set-danger .set-row-ic { background: var(--danger-soft); color: var(--danger); }
/* Done sits in the header with the saved line; the footer only shows a problem */
.settings-dlg .tool-head { flex-wrap: nowrap; }
.settings-dlg .tool-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-dlg .tool-head .set-saved { margin-left: auto; margin-right: 0; font-size: var(--t-sm); white-space: nowrap; }
.settings-dlg .tool-head .set-done { flex: none; min-height: var(--tap); }
.settings-dlg .tool-head .set-saved:empty + .set-done { margin-left: auto; }
.settings-foot:has(#settingsErr:empty) { display: none; }
/* phone: row subtitles stay, buttons fill the width */
@media (max-width: 420px) {
  .set-row-t small { display: block; white-space: normal; }
  .set-section .btn:not(.small), .set-section .row > .btn:not(.small), .set-section label.btn { align-self: stretch; width: 100%; justify-content: center; }
  .set-section .row { flex-wrap: wrap; }
}
/* How I work: two even columns on a wide screen, the hint under each field */
#workBox .two { align-items: start; }
#workBox .two > .field:only-child { grid-column: 1 / -1; max-width: calc(50% - var(--s3) / 2); }
@media (max-width: 600px) { #workBox .two > .field:only-child { max-width: none; } }
/* ===== Settings, round 4 (2026-10-19) ===== */
/* on a section's page, Done is a quiet text button: "‹ Settings" is the way back */
.settings-dlg.set-in .set-done { background: none; color: var(--accent); border-color: transparent; box-shadow: none; padding-inline: var(--s2); }
.settings-dlg.set-in .set-done:hover { background: var(--accent-soft); }
.set-sub { margin-top: var(--s2) !important; }
/* a locked row: the plan that has it */
.set-row-st.lock { color: var(--gold-strong); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
/* money boxes: the $ sits inside the box */
.money-box { display: inline-flex; align-items: center; border: 1px solid var(--edge); border-radius: var(--r-sm); background: var(--panel); padding-left: 12px; min-height: var(--tap); }
.money-box:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.money-box .money-pre { color: var(--muted); }
.money-box > input { border: 0 !important; outline: none; background: none; width: 6.5em; padding-left: 4px; box-shadow: none; }
/* clearer disclosure arrows */
.set-more summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); margin-left: var(--s3); font-size: 0; }
.set-more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* the spending bar always shows where it starts */
.ai-bar span { min-width: 8px; }
/* tiles and the Connected pill stand out in dark mode too */
.ai-tiles > div { border: 1px solid var(--line); }
.ai-pill.ok { border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); }
#aiWhereBox legend { font-size: var(--t); font-weight: 600; color: var(--ink); }
/* the plan page */
.plan-how { padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--gold-soft); color: var(--ink); display: grid; gap: var(--s1); }
.plan-how ol { margin: 0; padding-left: 1.3em; display: grid; gap: 2px; font-size: var(--t-sm); }
.plan-use { margin-bottom: var(--s1); }
.plan-cards { margin-top: var(--s1); }
.plan-list { list-style: none; padding-left: 0 !important; }
.plan-list li { position: relative; padding-left: 1.4em; }
.plan-list li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 5px; height: 10px; border-right: 2px solid var(--gold-strong); border-bottom: 2px solid var(--gold-strong); transform: rotate(45deg); }
.plan-card.asked { border-color: var(--good); }
.plan-asked { display: grid; gap: 2px; justify-items: start; }
.plan-asked .linkbtn { padding: 0; min-height: 32px; min-width: 0; }
/* The privacy and terms page (public/privacy.html): a page for reading, on the same tokens and fonts */
.doc-page { background: var(--bg); }
.doc-top .brand-name { display: inline; } /* (the app hides the name on phones, beside its tabs; here it is the whole header) */
.doc-top { display: flex; align-items: center; padding: calc(var(--s2) + var(--safe-t)) max(var(--s4), env(safe-area-inset-right, 0px)) var(--s2) max(var(--s4), env(safe-area-inset-left, 0px)); background: var(--panel); border-bottom: 1px solid var(--line); }
.doc { max-width: 64ch; font-size: var(--t-md); margin: 0 auto; padding: var(--s5) max(var(--s4), env(safe-area-inset-right, 0px)) calc(var(--s6) + var(--safe-b)) max(var(--s4), env(safe-area-inset-left, 0px)); }
.doc h1 { font-family: var(--serif); font-weight: var(--serif-w); font-size: clamp(30px, 7vw, 42px); line-height: 1.1; margin: 0 0 var(--s3); text-wrap: balance; }
.doc h2 { font-family: var(--serif); font-weight: var(--serif-w); font-size: 24px; line-height: 1.2; margin: var(--s6) 0 var(--s3); text-wrap: balance; }
.doc p, .doc li { line-height: 1.6; }
.doc p { margin: 0 0 var(--s3); }
.doc ul { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding-left: 1.2em; }
.doc a:not(.btn) { color: var(--accent); }
.doc-lead { font-size: 18px; color: var(--ink-2); }
.doc .hint { font-size: var(--t-sm); }
.doc-short { margin-top: var(--s4); padding: var(--s4) var(--s5); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--r-lg); background: var(--panel); }
.doc-short h2 { margin-top: 0; }
.doc-back { margin-top: var(--s6); }

/* Settings → Feedback (the site runner's): notes people sent, and the problems the site kept, one card each */
.fb-list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.fb-item { display: grid; gap: var(--s1); min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.fb-item > p { margin: 0; }
.fb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); min-width: 0; }
.fb-text, .fb-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-msg { font-weight: 600; }
.fb-code { margin: var(--s1) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--sunken); font-family: var(--mono); font-size: var(--t-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-copy { width: 100%; font-size: var(--t-xs); }
#feedbackKind { margin-bottom: var(--s3); }
/* the site runner's businesses: one card each */
.site-list .biz-card { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); margin-bottom: var(--s2); }
.site-list .biz-card:last-child { border-bottom: 1px solid var(--line); }
.biz-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.biz-head strong { font-family: var(--serif); font-weight: var(--serif-w); font-size: 19px; }
.biz-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--gold-soft); border-left: 3px solid var(--gold); }
.biz-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
@media (max-width: 640px) { .biz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.biz-facts > div { padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--sunken); min-width: 0; }
.biz-facts dt { font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.biz-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.biz-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); }
.biz-edit > .field { min-width: 10em; }
.biz-limits { flex-basis: 100%; }
.biz-limit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
@media (max-width: 640px) { .biz-limit-grid { grid-template-columns: 1fr; } }
.biz-more > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--muted); min-height: 32px; display: inline-flex; align-items: center; }
.biz-more[open] { display: grid; gap: 2px; justify-items: start; }
.hint .linkbtn, .ai-spend .linkbtn { display: inline; padding: 0; min-height: 0; min-width: 0; font-size: inherit; text-decoration: underline; vertical-align: baseline; }
.biz-edit > .field { flex: 0 1 16em; }
.biz-facts dd small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--muted); }
.set-row-st { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.set-row-st.lock { display: inline-flex; }
/* ===== Settings, round 5 (2026-10-19) ===== */
/* one header everywhere: on a section's page "‹ Settings" sits on its own line above the title; Done is the same text button on every screen */
.settings-dlg .tool-head { flex-wrap: wrap; row-gap: 0; }
.settings-dlg .set-hback:not([hidden]) { flex-basis: 100%; min-height: 32px; justify-content: flex-start; }
.settings-dlg .set-hback:not([hidden]) + h2 { font-size: var(--t-lg); }
.settings-dlg .set-done, .settings-dlg.set-in .set-done { background: none; color: var(--accent); border-color: transparent; box-shadow: none; padding-inline: var(--s2); font-weight: 700; }
.settings-dlg .set-done:hover { background: var(--accent-soft); }
/* AI pictures: the key's actions as links, room after the limit box, the rarely-needed options folded */
.ai-acts .linkbtn { padding: 0 var(--s2) 0 0; min-height: 36px; }
#capWrap { margin-bottom: var(--s2); }
.ai-more { display: grid; gap: var(--s3); }
.ai-more[open] > summary { margin-bottom: var(--s1); }
/* a plan the site pays for: credits left, big */
.ai-hero { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.ai-hero b { font-family: var(--serif); font-weight: var(--serif-w); font-size: 40px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.ai-hero span { color: var(--ink-2); font-weight: 500; }
.credit-table { border-collapse: collapse; width: 100%; max-width: 26em; font-size: var(--t-sm); }
.credit-table caption { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
.credit-table th, .credit-table td { padding: 6px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.credit-table td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
/* choice cards: the chosen one in camel, the brand's "on" */
.choice input { accent-color: var(--gold-strong); }
.choice:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--gold-soft); }
/* a switch that is on: the knob in the page's own ground, so it reads in dark mode too */
.switch-row input[role=switch]:checked::after { background: var(--bg); }
/* the runner's contact */
.site-contact { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); margin: 0; display: grid; gap: var(--s2); }
.site-contact legend { font-weight: 600; padding: 0 4px; }
.biz-more > summary { color: var(--ink-2); }
.biz-limits .btn { margin-top: var(--s2); }
.biz-edit > .field { max-width: 22em; width: 100%; }
/* (credits: "1 credit" is wider than "2¢": the price never breaks or overlaps, and the bar's count may take two lines) */
.seg.col .ab-cost { white-space: nowrap; flex: none; margin-left: var(--s2); }
.ab-info b .nw { white-space: nowrap; }
@media (min-width: 761px) { .ab-info b { white-space: normal; overflow: visible; line-height: 1.25; } }
.seg.col .q-l { min-width: 0; flex: 1 1 auto; }
.seg.col .q-l .hint { white-space: normal; }
@media (min-width: 761px) { html[data-credits] .ab-pop { width: 300px; } } /* (a phone keeps the 260 px menu, which fits beside the button; its hints wrap) */
/* ===== round 6 (2026-10-19) ===== */
.seg.col button.q-locked { opacity: .62; cursor: not-allowed; }
.seg.col button.q-locked .ab-cost { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--gold-strong); }
.q-plans { margin: var(--s2) var(--s2) 0; font-size: var(--t-xs); }
.q-plans .linkbtn { display: inline; padding: 0; min-height: 0; min-width: 0; font-size: inherit; text-decoration: underline; }
.plan-lead { margin: 0 0 var(--s2); }
.plan-how-more { margin-top: var(--s2); }
.plan-how-more .plan-how { margin-top: var(--s1); }
#planBody > .hint:last-child { margin-top: var(--s3); }
.biz-pause { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.biz-pause .linkbtn { padding: 0 var(--s2); }
/* sign-up: how experienced the new owner is (their time estimates start from it) */
.level-pick { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.level-pick legend { font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s1); padding: 0; }
.level-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s2) var(--s3); border: 1px solid var(--edge); border-radius: var(--r); background: var(--panel); cursor: pointer; min-height: var(--tap); }
.level-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-strong); }
.level-opt > span { display: grid; gap: 1px; }
.level-opt b { font-weight: 600; color: var(--ink); }
.level-opt small { font-size: var(--t-xs); color: var(--muted); }
.level-opt:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--gold-soft); }
.level-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ===== audit fixes (2026-10-20) ===== */
/* "Show as a table" under a chart: its number cells are plain table cells, not the round step numbers ".num" also names */
.chart-table .num { display: table-cell; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; text-align: right; }
/* a running timer's pill on a phone sits above the Studio's Generate bar, never on it; and pages leave room for it */
@media (max-width: 760px) {
  body[data-view="studio"]:has(.actionbar) .timer-pill { bottom: calc(var(--bar-h) + var(--safe-b) + 84px); }
  body:has(#timerPill:not([hidden])) .view:not(#studioView) { padding-bottom: calc(var(--bar-h) + var(--safe-b) + var(--s5) + 64px); }
}
/* the chosen choice card: its edge and its small print readable on camel */
.choice:has(input:checked), .level-opt:has(input:checked) { border-color: var(--gold-strong); box-shadow: inset 0 0 0 1px var(--gold-strong); }
.choice:has(input:checked) small, .level-opt:has(input:checked) small { color: var(--ink-2); }
/* a finger's worth of room on the small text buttons, without making the rows around them any taller: the tap area reaches past the text */
.stock-card .sc-est, .stock-card .sc-time { position: relative; }
.stock-card .sc-est::after, .stock-card .sc-time::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: var(--tap); transform: translateY(-50%); }
/* ===== Instant image | Enhanced image: the big switch at the top of step 2 ===== */
.img-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: var(--s2) 0 var(--s3); padding: 4px; border-radius: var(--r); background: var(--sunken); border: 1px solid var(--line); }
.img-mode button { display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.img-mode button:hover { background: var(--panel); }
.img-mode button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.img-mode button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.img-mode button:disabled { opacity: 0.6; cursor: not-allowed; background: transparent; } /* (out of tokens: Instant only until the 1st) */
.inst-tile.inst-out .inst-img { background: var(--sunken); border: 1px solid var(--line); }
.inst-tile.inst-out .inst-mid { color: var(--muted); }
.im-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); color: var(--gold); font-size: 17px; line-height: 1; }
.img-mode button[aria-checked="true"] .im-icon { background: var(--gold); color: var(--accent); }
.im-t { display: grid; gap: 1px; min-width: 0; }
.im-t b { font-size: var(--t-md); font-weight: 700; line-height: 1.15; }
.im-t span { font-size: var(--t-xs); opacity: .85; }
@media (max-width: 420px) { .img-mode button { padding: var(--s2); gap: 6px; } .im-icon { width: 26px; height: 26px; font-size: 14px; } .im-t b { font-size: var(--t); } }
#stepColors { container-type: inline-size; container-name: colors; }
@container colors (max-width: 380px) { .img-mode .im-icon { display: none; } .img-mode button { padding: var(--s2) var(--s3); } }
.inst-say { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
/* ===== instant previews (step 2): the picked colors, made here from a version, free ===== */
.instant { display: grid; gap: var(--s2); margin-top: var(--s2); padding: var(--s3); border-radius: var(--r); background: var(--gold-soft); }
.inst-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); }
.inst-head b { font-weight: 600; }
.inst-row { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scroll-snap-type: x mandatory; }
.inst-row > .inst-card { scroll-snap-align: start; }
/* (a computer: the left column holds every pair, two to a line, nothing hidden off to the side) */
@media (min-width: 761px) {
  .inst-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; scroll-snap-type: none; }
  .inst-row .inst-pair { grid-template-columns: 1fr 1fr; }
  .inst-nav { display: none !important; }
}
.inst-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.inst-nav[hidden] { display: none; }
.inst-count { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-right: 2px; }
.inst-nav .btn { min-width: 44px; min-height: 36px; padding: 0 var(--s2); font-size: var(--t-md); line-height: 1; }
.inst-tip { margin: 0; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-2); }
.inst-failed .inst-img { background: var(--warn-soft); border-color: var(--warn); }
.inst-failed .inst-mid { color: var(--ink); gap: 4px; padding-top: 26px; } /* (clear of the ENHANCED label) */
.inst-failed .inst-mid b { color: var(--warn); font-weight: 700; }
.inst-failed .inst-mid small { font-weight: 500; color: var(--ink-2); }
.inst-retry { margin-top: 2px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.inst-card { flex: none; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.inst-pair { display: grid; grid-template-columns: 120px 120px; gap: 4px; }
.inst-tile { position: relative; display: block; padding: 0; border: 0; border-radius: calc(var(--r-sm) - 2px); background: none; color: inherit; font: inherit; cursor: pointer; overflow: hidden; text-align: left; }
span.inst-tile { cursor: default; }
.inst-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.inst-img { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--sunken); }
.inst-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inst-img > .inst-wait { position: absolute; inset: 0; }
.inst-wait { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--sunken), var(--line), var(--sunken)); background-size: 200% 100%; animation: inst-wait 1.2s linear infinite; }
@keyframes inst-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .inst-wait { animation: none; } }
.inst-mid { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px; text-align: center; font-size: var(--t-xs); font-weight: 600; color: var(--muted); }
.inst-mid small { font-size: 11px; font-weight: 500; }
.inst-make .inst-img { background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: inherit; }
.inst-make .inst-mid { color: var(--accent); }
.inst-make:hover .inst-img { background: var(--panel); }
.inst-tag { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase; box-shadow: var(--shadow); }
.inst-tag.ai { background: var(--accent); color: var(--accent-ink); }
.inst-name { display: flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
dialog.instant-dlg { width: min(900px, calc(100vw - 24px)); padding: var(--s3); }
.instant-dlg .tool-head h2 { display: flex; align-items: center; gap: var(--s2); }
.inst-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s2); }
.inst-big { margin: 0; display: grid; gap: 4px; align-content: start; min-width: 0; }
.inst-big img { width: 100%; max-height: 66vh; object-fit: contain; border-radius: var(--r-sm); background: var(--sunken); }
.inst-big figcaption { font-size: var(--t-xs); line-height: 1.35; }
.inst-big figcaption b { font-weight: 600; }
.inst-fixable { cursor: crosshair; touch-action: manipulation; }
.inst-fix { display: grid; gap: 4px; margin-top: 2px; color: var(--ink-2); }
.inst-fix-busy { font-weight: 600; color: var(--ink); }
.inst-fix-busy[hidden] { display: none; }
.inst-fix-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.inst-fix-btns:not(:has(button:not([hidden]))) { display: none; }
.inst-big-make, .inst-big-wait { display: grid; place-content: center; justify-items: center; gap: 4px; aspect-ratio: 3 / 4; max-height: 66vh; width: 100%; border-radius: var(--r-sm); font: inherit; font-weight: 600; }
.inst-big-wait { background: var(--sunken); color: var(--muted); display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.inst-big-make { border: 1px dashed var(--line); background: var(--sunken); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; text-align: center; padding: var(--s3); }
.inst-big-make small { font-weight: 500; color: var(--muted); }
.inst-big-make-t { max-width: 24ch; }
.inst-big-wait.inst-failed { flex-direction: column; text-align: center; padding: var(--s3); background: var(--warn-soft); color: var(--ink); font-weight: 500; }
.inst-big-wait.inst-failed b { color: var(--warn); font-weight: 700; }
/* (a phone: one picture at a time, big enough to tap a spot, and a switch between the two in the same place) */
.inst-which { display: none; }
@media (max-width: 560px) {
  .inst-side { grid-template-columns: 1fr; }
  .inst-which { display: flex; gap: var(--s2); margin-top: var(--s2); }
  .inst-which .btn { flex: 1; min-height: 44px; }
  .inst-which .btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .inst-side[data-show="instant"] > .inst-big:nth-child(2), .inst-side[data-show="enhanced"] > .inst-big:first-child { display: none; }
}

dialog.instant-dlg[open] { height: fit-content; max-height: calc(100dvh - 24px); margin: auto; overflow: auto; }
/* (a phone: the whole screen, from the top, so the picture stays put as messages come and go under it; not a box re-centered each time) */
@media (max-width: 560px) {
  dialog.instant-dlg[open] { inset: 0; width: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; padding: calc(var(--s3) + var(--safe-t)) var(--s3) calc(var(--s3) + var(--safe-b)); }
}
.inst-which small { display: block; font-size: 11px; font-weight: 500; opacity: 0.8; }
/* (a phone's bottom bar: the batch line may take two lines, the two-tone in it whole) */
.ab-info .ab-spec .ab-spec-t { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
.tt-morerow { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-morerow:empty { display: none; }
.tt-price { margin: var(--s2) 0 0; padding: 8px var(--s3); font-size: var(--t-sm); border-radius: var(--r-sm); color: var(--mkt-ink); background: var(--gold-soft); }
.tt-woodnote { margin: 0; font-size: var(--t-sm); font-weight: 600; }

/* Two-tone: which drawers, the second color's sheen, and a third color */
.tt-pattern, .tt-sheen { margin-top: var(--s2); }
.tt-pattern .tt-sub, .tt-sheen .tt-sub { margin: 0; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.tt-third { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.tt-third .hint { font-size: var(--t-xs); }
.tt-third.on { display: grid; gap: var(--s2); }
.tt-third.on .tt-sub { margin: 0; }
.tt-third .tt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tt-third .tt-chip { min-height: 40px; }
.tt-third .tt-chip > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-third .tt-chip .dot, .tt-third .tt-wood { width: 24px; height: 24px; }
.tt-third .tt-row .linkbtn { margin-left: auto; }
@media (min-width: 640px) { .tt-looks.scrollrow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tt-why { flex: 1 1 100%; margin: 4px 0 0; font-size: var(--t-xs); }

/* Two-tone, redesigned: a pinned mini drawing, the colors under the drawing, one list of parts with their colors, picture tiles for
   which drawers, the price as one line */
@media (min-width: 761px) { .card.step.fold > h3 { white-space: nowrap; } }
.tt-hero > .tt-hero-r { display: grid; grid-row: 1; grid-column: 2; align-content: center; gap: 6px; min-width: 0; }
.tt-price { margin: 0; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); }
.tt-price b { color: var(--gold-strong); font-weight: 700; }
.tt-mix { margin: 0; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); }
.tt-mix-t { font-weight: 600; color: var(--ink); }
.tt-mix .linkbtn { min-height: 28px; font-size: var(--t-xs); }
.tt-mini { position: sticky; z-index: 6; display: flex; align-items: center; gap: var(--s2); height: 64px; margin: 0 calc(-1 * var(--s2)) -64px; padding: 4px var(--s2); background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; }
.tt-mini.show { visibility: visible; opacity: 1; }
.tt-mini .ttd { flex: none; width: 72px; height: 54px; }
.tt-mini-t { min-width: 0; font-size: var(--t-xs); font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .tt-mini { transition: none; } }
.tt-ctag { display: inline-grid; place-items: center; min-width: 30px; height: 20px; margin-right: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: var(--caps); text-transform: uppercase; vertical-align: 1px; color: var(--accent-ink); background: var(--accent); }
.tt-ctag.t3 { background: var(--gold-strong); }
.tt-sheen { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px var(--s2); margin-top: var(--s2); }
.tt-sheen .tt-sub { margin: 0; }
.tt-sheen select { min-height: 40px; max-width: 100%; font: inherit; font-size: var(--t-sm); padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.tt-del3 { margin-left: auto; }
.tt-third.on .tt-row { gap: var(--s2); }
.tt-partsbox { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.tt-partsbox > .tt-sub { margin: 0; }
.tt-partsbox .hint { font-weight: 400; }
.tt-plist { display: grid; gap: 6px; }
#tt3PaintDot.empty { visibility: hidden; }
.ab-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 3px; border-radius: 50%; border: 1px solid var(--dot-ring); vertical-align: -1px; }
.tt-partsbox .tt-markbtn { justify-self: start; grid-row: auto; grid-column: auto; }
.tt-pattern { margin-top: var(--s3); display: grid; gap: var(--s2); }
.tt-pattern > .tt-sub { margin: 0; }
.tt-ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tt-ptile { display: grid; justify-items: center; gap: 2px; min-width: 0; min-height: 64px; padding: 6px 4px; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; }
.tt-ptile svg { width: 40px; height: 34px; }
.tt-ptile[aria-checked="true"] { border: 2px solid var(--accent); background: var(--sel-bg); padding: 5px 3px; }
.tt-ptile[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.tt-pattern .tt-why { margin: 0; }
.tt-chip .tt-wood { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--dot-ring); flex: none; }

/* (the parts as rows: the part's name, then one button per color; the chosen one outlined, a part in the 2nd or 3rd color tinted) */
.tt-prow { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 52px; padding: 4px 4px 4px var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.tt-pname { display: grid; flex: 1 1 auto; min-width: 72px; line-height: 1.2; font-size: var(--t-sm); }
.tt-pname b { font-weight: 600; }
.tt-pname small { font-size: 11px; color: var(--ink-2); }
.tt-pcs { display: flex; flex: 0 1 236px; justify-content: flex-end; gap: 4px; min-width: 0; }
.tt-pc { display: grid; justify-items: center; align-content: start; gap: 2px; flex: 1 1 0; min-width: 48px; max-width: 76px; min-height: 52px; padding: 4px 3px; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.15; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; position: relative; }
.tt-pc:hover { border-color: var(--accent); }
.tt-pc .dot, .tt-pc .tt-wood, .tt-legend .dot, .tt-legend .tt-wood { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong) !important; }
.tt-pcn { max-width: 100%; overflow: hidden; text-align: center; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tt-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; font-size: var(--t-xs); color: var(--ink-2); }
.tt-legend > .tt-lg { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 8px 2px 4px; font: inherit; font-size: var(--t-xs); color: var(--ink-2); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.tt-lg:hover { border-color: var(--accent); }
.tt-lg-e { margin-left: 2px; font-weight: 700; color: var(--accent); }
.tt-legend .dot, .tt-legend .tt-wood { width: 14px; height: 14px; }
.tt-legend b { font-size: 11px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--ink); }
.tt-pc[aria-checked="true"] { color: var(--ink); background: var(--sel-bg); border: 2px solid var(--accent); padding: 3px 2px; }
.tt-pc[aria-checked="true"]::after { content: '✓'; position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 700; color: var(--accent); }
.tt-pc[aria-disabled="true"] { opacity: .35; cursor: not-allowed; border-style: dashed; }
.tt-plist .tt-pattern { margin: 0 0 4px var(--s3); padding: var(--s2); border-left: 2px solid var(--accent); }

.ab-info .ab-spec { align-items: flex-start; } /* (the summary's two lines together, Reset beside the first) */

/* ---- The Colors step's first screen: the colors in sight on a phone (they were all under the first screen on every phone) ----
   the search beside the two menus where they fit, Try mine and your own color in sight under the colors, and on a phone the switch on
   one line and the empty instant line folded away (the switch already says "free") */
.im-short { display: none; }
.color-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.color-bar .search-wrap { flex: 1 1 260px; min-width: 0; margin: 0; }
.color-bar .color-tools { margin: 0; }
.color-more { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.color-more .btn { min-height: var(--tap); }
.color-more .try-mine .n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
@media (max-width: 760px) {
  .img-mode { margin: var(--s1) 0 var(--s2); padding: 3px; }
  .img-mode button { min-height: var(--tap); padding: 0 var(--s2); justify-content: center; }
  .img-mode .im-icon, .img-mode .im-long, .img-mode .im-t > span { display: none; }
  .img-mode .im-short { display: inline; }
  .instant.inst-empty { display: none; }
  .color-bar .search-wrap { flex-basis: 100px; }
  /* ("List" and "Finish" said to a screen reader, not shown: the menus show what is chosen) */
  .color-bar .ct-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 760px) {
  /* (the tiles a little shorter: the chip 32 px, the name's two lines tight under it; a row of colors is then 72 px, not 84) */
  .sw-grid.tiles .swatch { min-height: 0; gap: 4px; padding: 6px 2px 4px; }
  .sw-grid.tiles .swatch .dot { width: 32px; height: 32px; }
  /* (the piece's photo 64 px: it opens big when tapped, and its row then takes no more room than the name and the line under it) */
  .photo-btn { width: 64px; height: 64px; }
  #stepColors > h3 { margin-bottom: 0; }
}
/* (the smallest phones keep the 56-px photo they had) */
@media (max-width: 360px), (max-height: 600px) { .photo-btn { width: 56px; height: 56px; } }
/* Short phones (an iPhone SE or 8, 667 px tall, and shorter): the one-line tip folds away and the cards sit a little closer, so two rows
   of colors are on the first screen under the piece (the switch says "free"; the tip is back on a taller screen) */
@media (max-width: 760px) and (max-height: 700px) {
  #firstRun .firstrun { display: none; }
  .studio .step { padding-top: var(--s2); padding-bottom: var(--s2); }
}
/* (a phone: the Instant / Enhanced switch under the colors, with Try mine: every visit starts on Instant, and Enhance in the bar makes the AI
   picture of any color, so the switch is seldom needed before the colors; up top it took a row of the first screen) */
@media (max-width: 760px) {
  #stepColors { display: flex; flex-direction: column; }
  #stepColors > * { order: 1; }
  #stepColors > .img-mode { order: 2; margin: var(--s3) 0 0; }
  #stepColors > .color-more { order: 3; }
}
/* (short phones: the Make / Results switch a finger's height, no more) */
@media (max-width: 760px) and (max-height: 700px) {
  .studio-tabs { padding-top: 0; padding-bottom: 0; }
  .studio-tabs .seg button { min-height: var(--tap); }
}
/* (the narrowest phones: "List" instead of the list's name, so the search fits beside the two menus) */
@media (max-width: 360px) {
  .color-bar #listBtn .ct-k { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--ink); font-weight: 650; }
  .color-bar #listName { display: none; }
  .color-bar .search-wrap { flex-basis: 90px; }
}