/* Fit Scout — ledger redesign.
   Drop-in replacement for internal/web/static/app.css.
   Every class hook app.js relies on is preserved (.dim/.slider/.slider-fill/
   .thumb-min/.thumb-max/.num-min/.num-max/.card/.card-media/.title/.price .now/
   .price .was/.ship-from/.retailer-select), so the existing JS keeps working. */

/* ── self-hosted webfonts ────────────────────────────────────────────────
   Newsreader and IBM Plex Mono are served from our own origin instead of
   fonts.gstatic.com. Loading them from Google put a third-party DNS + TLS
   handshake on the critical path to first paint AND handed every visitor's
   IP address to Google on every page view — the practice German courts have
   already ruled on, and a thing we'd have to disclose in the privacy policy
   for no benefit. Both families are SIL OFL 1.1 (fonts/Newsreader-OFL.txt,
   fonts/IBMPlexMono-OFL.txt); these are byte-for-byte the same woff2 subsets
   Google was serving, so the rendering is unchanged.

   Paths are relative to /static/app.css, so they resolve to /static/fonts/…
   and go through the same embedded-FS asset handler as everything else.
   Each filename carries the upstream Google Fonts release (v26 / v20) — that
   is what makes it safe for staticAssetHandler to mark them immutable rather
   than revalidating on every page load: a newer upstream release would land
   under a new filename.

   Newsreader is one variable file per style (weight 400–600 roman / 400–500
   italic, optical size 6–72, applied automatically by font-optical-sizing);
   IBM Plex Mono ships one static file per weight. The unicode-range split is
   Google's own, so a visitor downloads only the ranges the page renders —
   the Vietnamese subsets exist because we carry Vietnamese brands. */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/newsreader-v26-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/newsreader-v26-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/newsreader-v26-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(fonts/newsreader-v26-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(fonts/newsreader-v26-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap;
  src: url(fonts/newsreader-v26-italic-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-400-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-500-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-mono-v20-600-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

:root {
  --paper:      #efeadf;  /* page */
  --paper-hi:   #f6f2ea;  /* radial highlight */
  --sheet:      #f4f0e8;  /* the bordered sheet */
  --surface:    #fbf8f1;  /* inputs / wells */
  --ink:        #1a1712;
  --ink-2:      #5a5247;
  --muted:      #8a8070;
  --faint:      #a89e8e;
  --line:       #ded6c6;
  --line-2:     #e0d8c8;
  --line-3:     #cab9a0;
  --indigo:     #2e3a66;  /* in-range / primary */
  --indigo-soft:rgba(46,58,102,.16);
  --rust:       #9c5a3c;  /* out of range / sale */
  --green:      #2e7d5b;  /* measured */
  --tile:       #ece6da;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* The dark theme swaps the serif for a UI grotesque. No webfont is loaded
     for it — this is deliberately the platform's own face (Segoe UI, SF Pro,
     Roboto…). These rules used to name "Inter" first, which was never loaded
     from anywhere and silently fell through to exactly this stack. */
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  background-image: radial-gradient(120% 80% at 50% -10%, var(--paper-hi) 0%, var(--paper) 60%);
  background-attachment: fixed;
  line-height: 1.5;
  padding: 38px 28px 64px;
}
a { color: inherit; }
::selection { background: var(--indigo); color: var(--sheet); }
input[type=number]::-webkit-inner-spin-button { opacity: .25; }

/* The whole app is ONE bordered card floating on the radial paper bg. */
.sheet {
  max-width: 1340px;
  margin: 0 auto;
  background: var(--sheet);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 50px -28px rgba(40,32,18,.45);
}
.site-header { padding: 34px 44px 0; }

/* ── masthead ───────────────────────────────────────────────────────── */
.masthead-top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
}
.masthead-meta {
  font-size: 10px; letter-spacing: .16em; color: var(--faint);
  text-align: right; white-space: nowrap;
}
/* Account row in the masthead: who's signed in + a log out / log in link. */
.account { display: inline-flex; align-items: center; gap: 9px; }
.account-who {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted);
  max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none;
}
.account-who:hover { text-decoration: underline; }
.account-logout { display: inline; margin: 0; }
.account-logout button, .account-login {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; padding: 0; cursor: pointer;
  white-space: nowrap; text-decoration: underline; text-underline-offset: 3px;
}
/* "Save my fit" row in the fit form (signed-in only) + its inline confirmation. */
.save-fit-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.save-fit {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-3);
  border-radius: 7px; padding: 6px 12px; cursor: pointer;
}
.save-fit:hover { border-color: var(--muted); }
.save-msg, .save-ok { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }

/* Standalone auth pages (login / forgot password / reset password). Shared by
   login.html, forgot.html, reset.html — all load app.css. */
.auth-wrap { max-width: 26rem; margin: 4rem auto; padding: 0 1.25rem; }
.auth-card { border: 1px solid var(--rule, #d9d4c8); border-radius: .5rem; padding: 1.75rem; background: var(--card, #fff); }
.auth-card h1 { font-family: Newsreader, Georgia, serif; font-size: 1.5rem; margin: 0 0 .25rem; }
.auth-sub { color: #7a756a; margin: 0 0 1.25rem; font-size: .9rem; }
.auth-field { display: block; margin: 0 0 .85rem; }
.auth-field span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #7a756a; margin-bottom: .3rem; }
.auth-field input { width: 100%; box-sizing: border-box; padding: .55rem .65rem; border: 1px solid var(--rule, #cfc9bb); border-radius: .35rem; font: inherit; }
.auth-btn { width: 100%; padding: .6rem; border: none; border-radius: .35rem; background: #1c1a17; color: #fff; font: inherit; cursor: pointer; }
.auth-btn.secondary { background: transparent; color: #1c1a17; border: 1px solid #1c1a17; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; box-sizing: border-box; padding: .55rem; border: 1px solid var(--rule, #cfc9bb); border-radius: .35rem; text-decoration: none; color: inherit; background: #fff; }
.auth-sep { display: flex; align-items: center; gap: .75rem; color: #9a948a; font-size: .78rem; margin: 1.1rem 0; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--rule, #e3ded2); }
.auth-tabs { display: flex; gap: 1.25rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--rule, #e3ded2); }
.auth-tab { background: none; border: none; padding: .4rem 0; font: inherit; color: #7a756a; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.auth-tab.active { color: #1c1a17; border-bottom-color: #1c1a17; }
.auth-err { background: #fcebea; border: 1px solid #e7b8b4; color: #8a2820; padding: .6rem .75rem; border-radius: .35rem; font-size: .85rem; margin: 0 0 1rem; }
.auth-ok { background: #eaf6ec; border: 1px solid #b6dcbd; color: #1f5b2e; padding: .6rem .75rem; border-radius: .35rem; font-size: .85rem; margin: 0 0 1rem; }
.auth-forgot { display: inline-block; margin-top: .75rem; font-size: .82rem; color: #7a756a; text-decoration: underline; }
.auth-back { display: block; text-align: center; margin-top: 1.25rem; font-size: .85rem; color: #7a756a; }
.auth-hide { display: none; }

/* Account page (/account) — wider than the other auth-* cards to fit a fit-window
   section per category. */
.account-wrap { max-width: 40rem; margin: 4rem auto; padding: 0 1.25rem; }
.account-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule, #e3ded2); }
.account-h { font-family: Newsreader, Georgia, serif; font-size: 1.1rem; margin: 0 0 .5rem; }
.account-catfit { border-bottom: 1px solid var(--rule, #e3ded2); padding: .6rem 0; }
.account-catfit:last-of-type { border-bottom: none; }
.account-catfit .dim:first-of-type { margin-top: 14px; }

.danger-zone .account-h { color: #8a2820; }
.danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule, #e3ded2);
}
.danger-row:last-child { border-bottom: none; }
.danger-row p.hint { margin: .2rem 0 0; }
.danger-btn {
  flex: 0 0 auto; font: inherit; font-size: .82rem; padding: .5rem .9rem;
  border: 1px solid #c8564a; border-radius: .35rem; background: transparent;
  color: #8a2820; cursor: pointer; white-space: nowrap;
}
.danger-btn:hover { background: #fcebea; }
.danger-btn-solid { background: #8a2820; color: #fff; border-color: #8a2820; }
.danger-btn-solid:hover { background: #6f2019; }

/* Email-verification flash + "please verify" banner (above the catalog). */
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0; padding: 8px 12px; border-radius: 6px; font-size: 13px;
  background: #eaf6ec; border: 1px solid #b6dcbd; color: #1f5b2e;
}
.flash-close {
  flex: none; border: 0; background: transparent; cursor: pointer; color: inherit;
  font-size: 16px; line-height: 1; padding: 0 2px; opacity: .55; transition: opacity .12s;
}
.flash-close:hover { opacity: 1; }
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; padding: 9px 13px; border-radius: 6px; font-size: 13px; background: #fff7e6; border: 1px solid #e7d5a8; color: #6b541d; }
.verify-resend { margin: 0; }
.verify-resend button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-3);
  border-radius: 6px; padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
/* The wordmark is the page's <h1> (it was a <div>, so no page had a heading at
   all). margin:0 keeps the browser's default h1 margin from moving it. */
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 42px;
  letter-spacing: -0.015em;
  line-height: .95;
  margin: 0;
}
a.wordmark { text-decoration: none; display: inline-block; }
.wordmark::first-letter { color: inherit; }
.tagline {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  letter-spacing: .04em;
}

/* ── category tabs ──────────────────────────────────────────────────── */
.cats {
  display: flex;
  gap: 28px;
  margin-top: 26px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--ink);
  overflow-x: auto;
}
.cat {
  text-decoration: none;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cat:hover { color: var(--ink); }
.cat.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--indigo); }

/* ── layout ─────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 282px 1fr;
  align-items: stretch;
  padding: 0;
}

/* ── sidebar / fit form ─────────────────────────────────────────────── */
.panel { border-right: 1px solid var(--line); }
.fit-form {
  padding: 30px 30px 40px;
  /* Pinned beside the results, scrolling with the page; on short viewports it
     scrolls within itself, but the scrollbar chrome is hidden (see below). */
  max-height: calc(100vh - 64px);
  position: sticky;
  top: 24px;
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge/IE */
}
.fit-form::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit/Blink */
.fit-form h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.hint {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── set-from-size presets (sit above the dimension sliders) ───────── */
.size-band { margin: 22px 0 4px; }
.size-band-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.size-band-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.size-band-clear { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--indigo); background: none; border: 0; padding: 0; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
.size-band.has-sel .size-band-clear { opacity: 1; visibility: visible; pointer-events: auto; }
/* flex-wrap so numeric waist runs (jeans/bottoms) wrap to multiple rows rather
   than squashing into one illegible strip; flex-basis 38px lets them wrap. */
.size-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.size-btns button { flex: 1 1 38px; min-width: 38px; height: 36px; padding: 0; border: 1px solid var(--line-3); border-radius: 2px; background: var(--surface); font-family: var(--mono); font-size: 12px; color: var(--ink); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.size-btns button:hover { border-color: var(--indigo); color: var(--indigo); }
.size-btns button.sel, .size-btns button.sel:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.size-band-note { margin: 9px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--faint); min-height: 15px; }
.size-band-note b { color: var(--ink-2); font-weight: 600; font-family: var(--mono); }

.dim { margin-top: 23px; }
.dim:first-of-type { margin-top: 24px; }
.dim-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.dim-label {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}
.dim-note {
  display: block;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: .02em;
  margin-top: 1px;
}

/* number fields live in the head row, mirror the slider */
.dim-fields { display: flex; align-items: center; gap: 5px; }
.dim-fields input {
  width: 46px;
  padding: 3px 0 4px;
  border: none;
  border-bottom: 1px solid var(--indigo);
  background: transparent;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--indigo);
  text-align: center;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.dim-fields input::-webkit-outer-spin-button,
.dim-fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dim-fields input:focus { border-bottom-width: 2px; }
.dim-dash { font-size: 12px; color: var(--faint); }
.dim-unit { font-size: 11px; color: var(--faint); }

/* dual-thumb slider — thin rail, indigo band, small round thumbs */
.slider { position: relative; height: 16px; margin: 18px 6px 4px; }
.slider-rail, .slider-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 3px;
}
.slider-rail { left: 0; right: 0; background: #e0d8c8; }
.slider-fill { left: 0; right: 0; background: var(--indigo); }
.thumb {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 16px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; pointer-events: none;
}
.thumb::-webkit-slider-runnable-track { background: transparent; border: none; }
.thumb::-moz-range-track { background: transparent; border: none; }
.thumb::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--indigo);
  box-shadow: 0 1px 2px rgba(0,0,0,.2); cursor: grab;
}
.thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--indigo);
  box-shadow: 0 1px 2px rgba(0,0,0,.2); cursor: grab;
}
.thumb:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.thumb:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.1); }
.thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--indigo); outline-offset: 2px; }
.thumb:focus-visible::-moz-range-thumb { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Touch devices: the 13px mouse-tuned thumb is well under the ~24-44px
   touch-target minimum (Apple HIG / Material), so fingers routinely miss it.
   `pointer: coarse` targets real touchscreens regardless of viewport width. */
@media (pointer: coarse) {
  .slider { height: 26px; margin: 20px 6px 8px; }
  .thumb { height: 26px; }
  .thumb::-webkit-slider-thumb { width: 26px; height: 26px; }
  .thumb::-moz-range-thumb { width: 26px; height: 26px; }
}

/* sort + checkboxes */
.controls {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
}
.ctl {
  display: flex; flex-direction: column; gap: 9px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ctl select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 9px 28px 9px 12px;
  border: 1px solid var(--line-3); border-radius: 2px;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a89e8e' stroke-width='1.4'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.check {
  display: flex; align-items: center; gap: 11px;
  font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.check input[type=checkbox] { accent-color: var(--indigo); width: 15px; height: 15px; }
.btn {
  margin-top: 12px; padding: 9px 14px;
  background: var(--indigo); color: var(--sheet);
  border: 0; border-radius: 2px; font-family: var(--mono);
  font-size: 12px; cursor: pointer;
}

/* filters */
.filters {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid; gap: 16px;
}
.filters-h {
  margin: 0; font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted);
}
details.filter-group { display: block; }
details.filter-group > summary.filter-title {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0; user-select: none;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
details.filter-group > summary.filter-title::-webkit-details-marker { display: none; }
details.filter-group > summary.filter-title::after {
  content: "+"; color: var(--faint); font-weight: 600; font-size: 14px; line-height: 1;
}
details.filter-group[open] > summary.filter-title::after { content: "\2212"; }
details.filter-group[open] > summary.filter-title { margin-bottom: 11px; }
.filter-opts { display: grid; gap: 11px; max-height: 180px; overflow-y: auto; padding-right: 2px; }
.filter-opts .check { font-size: 12px; }
.price-range { display: flex; align-items: flex-end; gap: 8px; }
.num {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.num input {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--line-3); border-radius: 2px;
  background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: 13px;
}
.num input:focus-visible { outline: 2px solid var(--indigo); outline-offset: 0; }
.price-range .dash { color: var(--faint); padding-bottom: 8px; }

/* ── results column ─────────────────────────────────────────────────── */
.results-wrap { padding: 24px 40px 36px; min-width: 0; }
.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px; gap: 16px;
}
.count { font-family: var(--serif); font-size: 17px; color: var(--ink-2); }
.count strong { color: var(--ink); font-weight: 600; }
.count .showing { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); }
/* the right-hand "SHOWING N" tally carries both classes on one element, so the
   descendant rule above doesn't reach it — give it the same faint mono caps. */
.count.showing { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .1em; color: var(--faint); }

/* ledger column header + legend */
.ledger-cols {
  display: grid;
  grid-template-columns: 52px 246px 1fr 116px 54px;
  gap: 18px; align-items: end;
  padding: 0 0 10px; border-bottom: 1px solid var(--ink);
}
.ledger-cols span { font-size: 9px; letter-spacing: .16em; color: var(--faint); }
.ledger-cols .r { text-align: right; }
.legend {
  display: flex; gap: 22px; align-items: center;
  padding: 10px 0 4px; font-size: 9.5px; color: var(--muted); letter-spacing: .03em;
}
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; }
.legend .swatch-band { width: 22px; height: 6px; background: var(--indigo-soft); }
.legend .swatch-in { width: 2px; height: 11px; background: var(--indigo); }
.legend .swatch-out { width: 2px; height: 11px; background: var(--rust); }
.legend .swatch-est { width: auto; height: auto; font-style: normal; color: var(--faint); font-size: 11px; line-height: 1; }

/* the loading bar */
.loading-bar {
  height: 2px; margin: 0 0 6px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--indigo), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  transition: opacity .15s ease;
}
.loading-bar.htmx-request { opacity: 1; animation: loadingslide .9s linear infinite; }
@keyframes loadingslide { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

/* ── a product row (kept as .card so app.js hooks still resolve) ─────── */
.grid { display: block; }
.card {
  display: grid;
  grid-template-columns: 52px 246px 1fr 116px 54px;
  gap: 18px; align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
}
.card:hover { background: rgba(46,58,102,.035); }
.card.is-oos { opacity: .55; }

/* monogram / image tile */
.card-media {
  position: relative;
  width: 52px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile); border: 1px solid var(--line-2);
  text-decoration: none; overflow: hidden;
}
.monogram {
  font-family: var(--serif); font-size: 17px; line-height: 1;
  color: var(--accent, #4a5365);
}
.card-media.has-img .monogram { display: none; }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* badges from the old card layout are folded into other columns now */
.card-media .fit-badge, .card-media .tag { display: none; }

/* garment column */
.card-body { min-width: 0; }
.brand { font-size: 9px; letter-spacing: .13em; color: var(--faint); text-transform: uppercase; }
.title {
  display: block; font-family: var(--serif); font-size: 18px; font-weight: 500;
  margin: 2px 0 0; line-height: 1.12; text-decoration: none; color: var(--ink);
}
.title:hover { color: var(--indigo); }
.verdict { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 10px; }
.verdict .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.verdict.in   { color: var(--indigo); }
.verdict.in   .dot { background: var(--indigo); }
.verdict.out  { color: var(--rust); }
.verdict.out  .dot { background: var(--rust); }

.sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.size {
  font-size: 9.5px; padding: 2px 6px;
  border: 1px solid var(--line-3); background: transparent; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.size.instock.fit { background: var(--indigo); border-color: var(--indigo); color: var(--sheet); }
.size.instock.nofit { color: var(--ink); border-color: var(--line-3); }
.size.oos { color: var(--line-3); border-color: var(--line-2); text-decoration: line-through; }
.size.oos.fit { color: var(--indigo); border-color: var(--indigo); }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 9px; font-size: 9px; color: var(--faint); letter-spacing: .04em;
}
.meta .sep { color: var(--line-3); }
.prov { color: var(--rust); }
.prov.is-measured { color: var(--green); }
.colorway { color: var(--faint); }

/* offers picker — keep .retailer-select / .ship-from for app.js */
.offers { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.offers-label { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.retailer-select {
  font-family: var(--mono); font-size: 11px; padding: 6px 8px;
  border: 1px solid var(--line-3); border-radius: 2px;
  background: var(--surface); color: var(--ink); cursor: pointer; max-width: 260px;
}
.retailer-select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 0; }
.ship-from { font-size: 9px; color: var(--muted); letter-spacing: .04em; }

/* fit-vs-window bars (one per dimension) */
.fits { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.fitline {
  display: grid; grid-template-columns: 36px 1fr 72px;
  align-items: center; gap: 10px;
}
.fit-dim { font-size: 8px; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }
.fitbar { position: relative; height: 5px; background: #e4ddcf; }
.fitbar-band { position: absolute; top: 0; bottom: 0; background: var(--indigo-soft); }
/* one notch per fitting size; margin-left centers each on its %, and the slight
   transparency lets adjacent notches read as a denser cluster rather than a blur. */
.fitbar-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; opacity: .85; }
.fitbar-tick.in  { background: var(--indigo); }
.fitbar-tick.out { background: var(--rust); }
.fit-val { font-size: 10px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.fit-val.out { color: var(--rust); }
/* estimated (synthesized) dimension: mark the label and mute the value, kept
   orthogonal to the in/out rust colour so a dim can read as both at once. */
.fit-dim .est { color: var(--faint); margin-left: 1px; }
/* estimated values read italic; mute only the in-range ones so an estimated AND
   out-of-range value keeps its rust .fit-val.out colour. */
.fitline.synth .fit-val { font-style: italic; }
.fitline.synth .fit-val:not(.out) { color: var(--muted); }

/* price column */
.price { text-align: right; display: block; margin: 0; }
.price-top { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.price .now { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.card.on-sale .price .now { color: var(--rust); }
.price .disc { font-size: 9px; color: var(--rust); letter-spacing: .04em; }
.price .was {
  display: block; font-size: 10px; color: var(--faint);
  text-decoration: line-through; margin-top: 2px; min-height: 13px;
}
.spark-wrap { display: block; margin-top: 6px; }
.spark { width: 58px; height: 16px; display: inline-block; }
.spark polyline { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark-down { color: var(--green); }
.spark-up { color: var(--rust); }
.spark-flat { color: var(--faint); }

/* score column */
.score { text-align: right; }
.score .n {
  font-family: var(--serif); font-style: italic; font-size: 27px; line-height: .85;
  color: var(--ink-2);
}
.score.hi .n { color: var(--indigo); }
.score .d { font-size: 7.5px; letter-spacing: .16em; color: var(--faint); margin-top: 3px; }

/* "load more" sentinel — the last child of .grid. It posts the same query with
   an offset and swaps itself for the next page plus a new sentinel, so the
   cards above it are never re-rendered (see results.html). */
.load-more { display: flex; justify-content: center; padding: 26px 0 6px; }
.load-more-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-3);
  border-radius: 2px; padding: 10px 20px; cursor: pointer;
}
.load-more-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.load-more-btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.load-more-left { color: var(--faint); letter-spacing: .06em; margin-left: 7px; }
/* htmx marks the requesting element with .htmx-request for the fetch's life. */
.load-more-btn.htmx-request { color: var(--muted); border-color: var(--line-2); cursor: progress; }

/* empty state */
.empty { padding: 48px 0; text-align: center; }
.empty p { margin: 0; }
.empty p:first-child { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink); }
.empty-hint { margin-top: 8px !important; font-size: 11px; color: var(--muted); }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-footer {
  padding: 18px 44px;
  border-top: 1px solid var(--line);
  font-size: 9.5px; color: var(--faint); line-height: 1.7; letter-spacing: .02em;
}
.badge { color: var(--indigo); font-weight: 500; margin-right: 6px; }
.badge::before { content: "● "; }
.site-footer strong { color: var(--ink-2); font-weight: 500; }
.site-footer em { color: var(--green); font-style: normal; }
/* Price/stock refresh runs twice a week, so "live" needs a real date next to it
   rather than an implied "just now" — see PageData.PricesChecked. */
.stamp { color: var(--ink-2); }
.site-footer-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px; }
.site-footer-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer-links a:hover { color: var(--ink-2); }

/* ── legal pages (/privacy, /terms) ─────────────────────────────────────
   Plain prose inside the same bordered sheet as the app, so they read as part
   of the site rather than a bolted-on document. */
.legal { padding: 8px 44px 40px; max-width: 62ch; }
.legal h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; margin: 26px 0 6px; }
.legal h2 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 30px 0 6px; }
.legal p, .legal li { font-size: 12px; line-height: 1.85; color: var(--ink-2); }
.legal ul { padding-left: 18px; margin: 8px 0; }
.legal li { margin-bottom: 5px; }
.legal a { color: var(--indigo); text-underline-offset: 3px; }
.legal-updated { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 4px; }
/* Anything the site owner still has to decide/fill in is marked, not faked. */
.legal .todo { background: rgba(156,90,60,.12); color: var(--rust); padding: 1px 5px; border-radius: 2px; font-style: normal; }
[data-view="dark"] .legal .todo { background: rgba(235,87,87,.14); }

/* focus visibility */
.cat:focus-visible, .title:focus-visible, .ctl select:focus-visible,
.check input:focus-visible, .btn:focus-visible, summary.filter-title:focus-visible {
  outline: 2px solid var(--indigo); outline-offset: 2px;
}

/* colour picker — colourways of one style share fit, so the picker swaps only
   image/price/stock/links client-side (app.js reads .colorway-select). */
.colorways { display: inline-flex; align-items: center; gap: 8px; }
.colorway-select {
  font-family: var(--mono); font-size: 11px; padding: 2px 6px;
  border: 1px solid var(--line-3); border-radius: 2px;
  background: var(--surface); color: var(--ink); cursor: pointer; max-width: 150px;
}
.colorway-select:focus-visible { outline: 2px solid var(--indigo); outline-offset: 0; }
.colorway-count { font-size: 9px; color: var(--faint); letter-spacing: .04em; }

/* image crop overlay — when a content box was detected, clip the tile to it
   (trimming the photo's whitespace) instead of object-fit:cover. The inline
   styles (ImageCropOuter/Inner) size the clip box and place the image in it. */
.card-crop { position: relative; width: 100%; height: 100%; overflow: hidden; }
.crop-img { position: absolute; max-width: none; object-fit: fill; }

/* ── phone fit drawer ───────────────────────────────────────────────────
   Hidden everywhere by default. Both controls only appear under .has-drawer
   (set by app.js) at phone widths, so with JS off the panel keeps rendering in
   full and neither the summary bar nor the drawer footer is reachable. */
.fit-summary, .fit-apply { display: none; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .layout { grid-template-columns: 240px 1fr; }
  .results-wrap { padding: 20px 22px 30px; }
  .card, .ledger-cols { grid-template-columns: 44px 1fr 150px 64px 46px; }
  .card-media { width: 44px; height: 56px; } /* match the narrowed first column */
}
@media (max-width: 760px) {
  body { padding: 0; }
  .site-header { padding: 24px 20px 0; }
  .masthead-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .masthead-meta { text-align: left; }
  .cats { margin-top: 18px; padding: 0 0 12px; gap: 18px; }
  .layout { grid-template-columns: 1fr; }
  .panel { border-right: none; border-bottom: 1px solid var(--line); }
  .fit-form { position: static; max-height: none; }
  /* stack the ledger into simple blocks on phones */
  .ledger-cols, .legend { display: none; }
  .card { grid-template-columns: 44px 1fr; row-gap: 12px; }
  .fits, .price, .score { grid-column: 2 / -1; }
  .price { text-align: left; }
  .price-top { justify-content: flex-start; }
  .score { text-align: left; }
  /* Higher specificity than the unconditional `.mast-right` rule below (which
     sets flex-end for desktop) so this override actually wins on mobile —
     a same-specificity, later-in-source rule was silently clobbering it. */
  .masthead-top .mast-right { align-items: flex-start; }

  /* Collapsed, the panel is just the summary bar, stuck to the top of the
     results for the whole scroll (sticky inside the .layout grid, so no fixed
     positioning and no body offset). Open, the form becomes a drawer that
     scrolls inside itself and leaves the bar in place. */
  .has-drawer .panel { position: sticky; top: 0; z-index: 20; background: var(--sheet); }
  [data-view="dark"] .has-drawer .panel { background: #0a0b0d; }
  .has-drawer .fit-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 12px 20px; border: 0; background: transparent;
    font-family: var(--mono); font-size: 11px; color: var(--ink); text-align: left; cursor: pointer;
  }
  .has-drawer .fit-summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; }
  .fit-summary-win { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fit-summary-right { display: flex; align-items: center; gap: 10px; flex: none; }
  .fit-summary-count { color: var(--muted); white-space: nowrap; }
  .fit-summary-edit { color: var(--indigo); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .has-drawer .panel:not(.is-open) .fit-form { display: none; }
  .has-drawer .panel.is-open .fit-form {
    max-height: 72vh; overflow-y: auto;
    padding: 6px 20px 0; border-top: 1px solid var(--line);
    box-shadow: 0 20px 34px -24px rgba(40,32,18,.65);
  }
  .has-drawer .panel.is-open .fit-apply {
    display: block; position: sticky; bottom: 0; width: 100%;
    margin: 18px 0 0; padding: 13px; border: 0; border-radius: 2px;
    background: var(--indigo); color: var(--sheet);
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em; cursor: pointer;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   View switch chrome (shown in BOTH views) — the Light / Dark toggle.
   ════════════════════════════════════════════════════════════════════════ */
.mast-right { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.viewtoggle {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--line-3); border-radius: 7px; background: var(--surface);
}
.viewtoggle button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; border-radius: 5px;
  padding: 4px 10px; cursor: pointer; transition: color .12s, background .12s;
}
.viewtoggle button:hover { color: var(--ink); }
.viewtoggle button.on { background: var(--indigo); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE. Re-skins the SAME ledger markup when <html data-view="dark">.
   The default (light) view is entirely unaffected.
   ════════════════════════════════════════════════════════════════════════ */
[data-view="dark"] {
  --paper:#08090a; --paper-hi:#0e0f11; --surface:#16171a;
  --ink:#eceef1; --ink-2:#8a8f98; --muted:#8a8f98; --faint:#62666d;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.06); --line-3:rgba(255,255,255,.14);
  --indigo:#5e6ad2; --indigo-soft:rgba(94,106,210,.18);
  --rust:#eb5757; --green:#4cb782; --tile:#16171a;
  --serif: var(--sans);
  /* --sheet kept light: it is used as text-on-indigo (size chips, btn) */
  --sheet:#e9eaed;
}
[data-view="dark"] body {
  background: #08090a;
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
[data-view="dark"] body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 440px; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 100% at 50% 0%, rgba(94,106,210,.16), transparent 70%);
}
[data-view="dark"] .sheet { position: relative; z-index: 1; background: transparent; border-color: transparent; box-shadow: none; }

/* masthead */
[data-view="dark"] .wordmark { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; display: flex; align-items: center; }
[data-view="dark"] .wordmark::first-letter { color: inherit; }
[data-view="dark"] .wordmark::before { content: ""; width: 18px; height: 18px; border-radius: 5px; margin-right: 9px; background: linear-gradient(150deg, #7c8aed, #5e6ad2); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
[data-view="dark"] .tagline { font-size: 12.5px; }

/* nav: pill tabs instead of the light ledger baseline */
[data-view="dark"] .cats { border-bottom: 1px solid var(--line); padding-bottom: 14px; gap: 4px; }
[data-view="dark"] .cat { border-bottom: none; padding: 5px 11px; border-radius: 7px; }
[data-view="dark"] .cat:hover { background: rgba(255,255,255,.04); }
[data-view="dark"] .cat.active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line) inset; }

/* sidebar inputs → boxed (Linear style) */
[data-view="dark"] .size-btns button { border-radius: 6px; }
[data-view="dark"] .dim-fields input { border: 1px solid var(--line); border-bottom-width: 1px; border-radius: 5px; background: var(--surface); color: var(--ink); padding: 3px 2px; }
[data-view="dark"] .slider-rail { background: rgba(255,255,255,.08); }
[data-view="dark"] .ctl select { color: var(--ink); }
[data-view="dark"] .check input[type=checkbox] { accent-color: var(--indigo); }

/* results header + rows */
[data-view="dark"] .ledger-cols { border-bottom: 1px solid var(--line); }
[data-view="dark"] .card:hover { background: rgba(255,255,255,.025); }
[data-view="dark"] .card-media { border: none; border-radius: 7px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 60%, #3a3a42), color-mix(in srgb, var(--accent) 60%, #1a1a1f)); }
[data-view="dark"] .monogram { color: #fff; font-family: var(--sans); font-weight: 700; }
[data-view="dark"] .title { font-family: var(--sans); font-weight: 550; }
[data-view="dark"] .fitbar { background: rgba(255,255,255,.08); }

/* verdict → pill */
[data-view="dark"] .verdict { display: inline-flex; align-items: center; gap: 7px; padding: 2px 8px; border: 1px solid; border-radius: 6px; }
[data-view="dark"] .verdict.in { background: var(--indigo-soft); border-color: rgba(94,106,210,.32); }
[data-view="dark"] .verdict.out { background: rgba(235,87,87,.12); border-color: rgba(235,87,87,.28); }

/* size chips + retailer + sale pill, rounded */
[data-view="dark"] .size { border-radius: 5px; }
[data-view="dark"] .retailer-select { border-radius: 6px; }
[data-view="dark"] .price .disc { color: var(--green); background: rgba(76,183,130,.12); border: 1px solid rgba(76,183,130,.28); border-radius: 5px; padding: 1px 6px; }
[data-view="dark"] .price .now { font-family: var(--sans); }

/* score → progress ring driven by --score on the .score element */
[data-view="dark"] .score { display: flex; justify-content: flex-end; }
[data-view="dark"] .score .n {
  --rc: var(--indigo);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-style: normal; font-weight: 700; font-size: 13px; color: var(--ink);
  background:
    radial-gradient(closest-side, #0a0b0d 70%, transparent 72%),
    conic-gradient(var(--rc) calc(var(--score, 0) * 1%), rgba(255,255,255,.10) 0);
}
[data-view="dark"] .score:not(.hi) .n { --rc: #8a8f98; color: #9aa0a8; }
[data-view="dark"] .score .d { display: none; }

/* verify-status flash */
[data-view="dark"] .flash { background: rgba(76,183,130,.12); border: 1px solid rgba(76,183,130,.28); color: var(--green); }

/* footer */
[data-view="dark"] .badge { color: var(--indigo); }

/* ═══════════════════════════════════════════════════════════════════════
   GARMENT DETAIL PAGE (/p/<slug>, templates/product.html).
   The one screen that shows the measurements themselves. Reuses the sheet,
   the type scale and every colour variable above; adds only what a full
   per-size chart needs. Dark-mode overrides live at the very bottom.
   ═══════════════════════════════════════════════════════════════════════ */

a.wordmark { text-decoration: none; display: inline-block; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 22px 0 14px; border-bottom: 1px solid var(--ink);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--line-3); }
.crumbs a:hover { color: var(--indigo); border-color: var(--indigo); }
.crumb-sep { color: var(--line-3); }
.crumb-here { color: var(--ink-2); }

.product { padding: 0 44px 40px; min-width: 0; }

/* ── hero: image, name, price, buy ──────────────────────────────────── */
.p-hero {
  display: grid; grid-template-columns: 208px 1fr; gap: 30px;
  align-items: start; padding: 28px 0 26px; border-bottom: 1px solid var(--line);
}
.p-media {
  position: relative; aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile); border: 1px solid var(--line-2); overflow: hidden;
}
.p-media .monogram { font-size: 44px; }
.p-media.has-img .monogram { display: none; }
.p-media .card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.p-head { min-width: 0; }
.p-title {
  font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.08;
  margin: 3px 0 0; letter-spacing: -.01em;
}
.p-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 11px; font-size: 9.5px; color: var(--faint); letter-spacing: .04em;
}
.p-meta .sep { color: var(--line-3); }
.p-pricerow { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.p-price { font-family: var(--serif); font-size: 27px; color: var(--ink); }
.p-pricerow .was { font-size: 12px; color: var(--faint); text-decoration: line-through; }
.p-pricerow .disc { font-size: 10px; color: var(--rust); letter-spacing: .04em; }
.p-oos { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rust); }

.buy-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 11px 20px; background: var(--indigo); color: var(--sheet);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-decoration: none; border-radius: 2px;
}
.buy-btn:hover { background: var(--ink); }
.buy-arrow { font-size: 13px; }
.buy-sub { margin-top: 7px; font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }
.p-head .verdict { margin-top: 14px; font-size: 11px; }

/* ── sections ───────────────────────────────────────────────────────── */
.p-section { padding: 26px 0; border-bottom: 1px solid var(--line); }
.p-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.p-section h2 {
  font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 0;
}
.p-secnote { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.p-note { margin: 8px 0 0; font-size: 10.5px; color: var(--muted); line-height: 1.6; max-width: 78ch; }

/* ── the fit window, editable without JS ────────────────────────────── */
.p-window { margin-top: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.p-window > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 9px 13px; cursor: pointer; list-style: none;
  font-size: 10px; color: var(--muted); letter-spacing: .04em;
}
.p-window > summary::-webkit-details-marker { display: none; }
.p-window-label { text-transform: uppercase; letter-spacing: .12em; font-size: 9px; color: var(--faint); }
.p-window-vals { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.p-window-cue { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.p-window[open] .p-window-cue { text-decoration: none; }
.p-window-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 4px 13px 15px; border-top: 1px solid var(--line-2);
}
.p-wdim { display: flex; flex-direction: column; gap: 4px; }
.p-wdim-label { font-size: 10px; color: var(--ink-2); }
.p-wdim .dim-note { display: block; font-size: 8.5px; color: var(--faint); letter-spacing: .04em; }
.p-wcur select {
  font-family: var(--mono); font-size: 11px; padding: 3px 4px;
  background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-3);
}
.p-wbtn { margin-top: 0; }

/* ── the measurement table ──────────────────────────────────────────── */
.p-tablewrap { margin-top: 16px; overflow-x: auto; }
table.measure {
  border-collapse: collapse; width: 100%; min-width: 520px;
  font-variant-numeric: tabular-nums;
}
table.measure th, table.measure td {
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
table.measure thead th {
  vertical-align: bottom; border-bottom: 1px solid var(--ink);
  font-weight: 400; padding-bottom: 9px;
}
table.measure th.m-size { text-align: left; }
.m-dim { display: block; font-size: 10.5px; color: var(--ink); letter-spacing: .02em; }
.m-note { display: block; font-size: 8.5px; color: var(--faint); letter-spacing: .03em; margin-top: 2px; }
.m-window { display: block; font-size: 8.5px; color: var(--indigo); letter-spacing: .03em; margin-top: 3px; }
table.measure thead th.m-windowed { background: var(--indigo-soft); }
table.measure tbody th.m-size {
  font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink);
}
table.measure tbody tr:hover { background: rgba(46,58,102,.045); }
.row-oos th.m-size, .row-oos td { color: var(--muted); }
.row-fits th.m-size { color: var(--indigo); }
.m-val { font-size: 12px; }
.m-delta { font-size: 9.5px; margin-left: 4px; color: var(--rust); }
.m-in { background: var(--indigo-soft); }
.m-in .m-val { color: var(--indigo); }
.m-out .m-val { color: var(--rust); }
.m-dash { color: var(--faint); }
.m-empty { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(0,0,0,.03) 5px 6px); }
/* estimated (synthesized) value — the same ∗ vocabulary the cards use. */
table.measure .est { color: var(--faint); font-style: normal; margin-left: 2px; }
.m-stock { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.in-stock { color: var(--green); }
.out-stock { color: var(--faint); }
.m-score { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); }
.m-score.hi { color: var(--indigo); }
.p-legend { flex-wrap: wrap; gap: 18px; }

/* ── price history ──────────────────────────────────────────────────── */
.pc-wrap { margin-top: 16px; height: 150px; color: var(--ink-2); }
.pc-wrap.pc-down { color: var(--green); }
.pc-wrap.pc-up { color: var(--rust); }
.pricechart { width: 100%; height: 100%; display: block; }
.pc-line {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.pc-area { fill: currentColor; opacity: .09; stroke: none; }
.pc-dot { fill: currentColor; }
.pc-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 10px; color: var(--muted); letter-spacing: .03em;
}
.pc-legend .sep { color: var(--line-3); }
.pc-legend strong { color: var(--ink); font-weight: 500; }

/* ── retailers & colourways ─────────────────────────────────────────── */
.offer-list, .colour-list { list-style: none; margin: 14px 0 0; padding: 0; }
.offer, .colour {
  display: grid; grid-template-columns: 1fr 52px 110px 190px; gap: 14px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: 11px;
}
.offer-name { font-family: var(--serif); font-size: 15px; text-decoration: none; }
.offer-name:hover { color: var(--indigo); }
.offer-region, .offer-stock, .colour-stock {
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.offer-price, .colour-price { text-align: right; font-variant-numeric: tabular-nums; }
.offer-price .was, .colour-price .was { color: var(--faint); text-decoration: line-through; font-size: 10px; }
.offer.is-oos, .colour.is-oos { color: var(--muted); }
.colour a { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.colour-name { font-family: var(--serif); font-size: 15px; }
.colour a:hover .colour-name { color: var(--indigo); }
.colour .swatch {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--swatch, #4a5365); border: 1px solid var(--line-3);
}
.product .auth-back { text-align: left; margin-top: 22px; font-size: 10px; letter-spacing: .06em; }

/* the card's link through to this page (results.html) */
.detail-link { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.detail-link:hover { color: var(--indigo); }

@media (max-width: 860px) {
  .product { padding: 0 22px 30px; }
  .p-hero { grid-template-columns: 132px 1fr; gap: 20px; }
  .p-title { font-size: 26px; }
  .offer, .colour { grid-template-columns: 1fr auto; row-gap: 3px; }
}

/* ── dark mode ──────────────────────────────────────────────────────── */
[data-view="dark"] .crumbs { border-bottom: 1px solid var(--line); }
[data-view="dark"] .p-media {
  border: none; border-radius: 9px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 60%, #3a3a42), color-mix(in srgb, var(--accent) 60%, #1a1a1f));
}
[data-view="dark"] .p-title,
[data-view="dark"] .offer-name,
[data-view="dark"] .colour-name { font-family: "Inter", sans-serif; font-weight: 600; }
[data-view="dark"] .p-price { font-family: "Inter", sans-serif; }
[data-view="dark"] .buy-btn { border-radius: 7px; }
[data-view="dark"] .buy-btn:hover { background: #7c8aed; }
[data-view="dark"] .p-window { border-radius: 8px; }
[data-view="dark"] .p-window-form input {
  border: 1px solid var(--line); border-radius: 5px; background: var(--sheet); color: var(--ink); padding: 3px 4px;
}
[data-view="dark"] .p-wcur select { color: var(--ink); }
[data-view="dark"] table.measure thead th { border-bottom: 1px solid var(--line); }
[data-view="dark"] table.measure tbody tr:hover { background: rgba(255,255,255,.03); }
[data-view="dark"] table.measure tbody th.m-size { font-family: "Inter", sans-serif; font-weight: 600; font-size: 13px; }
[data-view="dark"] .m-empty { background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.04) 5px 6px); }
[data-view="dark"] .m-score { font-family: "Inter", sans-serif; font-style: normal; font-weight: 700; font-size: 13px; }