/* The Pitch Report — glassy sidebar UI, dark by default, ivory/bronze/teal accents. */
:root {
  --bg: #f6f4ef;
  --bg-glow-1: rgba(23, 143, 133, 0.10);
  --bg-glow-2: rgba(160, 131, 72, 0.12);
  --card: rgba(255, 253, 249, 0.86);
  --card-solid: #fffdf9;
  --card-edge: #e6dfd2;
  --text: #2b2a26;
  --muted: #8b8474;
  --gold: #8a6f45;
  --gold-soft: #cbbc9a;
  --accent: #178f85;
  --accent-soft: rgba(23, 143, 133, 0.14);
  --good: #4c7a58;
  --bad: #a4453d;
  --warn: #8a6f45;
  --radius: 16px;
  --side-w: 74px;
  --side-w-open: 250px;
  --shadow-rest: 0 1px 2px rgba(90, 76, 46, 0.05), 0 1px 6px rgba(90, 76, 46, 0.05);
  --shadow-lift: 0 2px 6px rgba(90, 76, 46, 0.07), 0 10px 26px rgba(90, 76, 46, 0.09);
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --serif: "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
/* Soft gradient washes behind everything (the Helios-style glow). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46rem 30rem at 8% -6%, var(--bg-glow-1), transparent 60%),
    radial-gradient(50rem 34rem at 104% 108%, var(--bg-glow-2), transparent 62%);
}

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Entrance motion ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* --hero-in offsets the whole page entrance; the intro raises it so the
   page arrives as the splash leaves (see "Intro splash" below). */
:root { --hero-in: 0s; }
.page-head, .seg-chips, .msg, .login-wrap, .stat-strip,
.rail > *, .main-col > *, .account-grid > * {
  animation: rise 0.5s var(--ease-out) both;
  animation-delay: var(--hero-in);
}
.rail > :nth-child(2), .main-col > :nth-child(1), .account-grid > :nth-child(2) { animation-delay: calc(var(--hero-in) + 0.05s); }
.rail > :nth-child(3), .main-col > :nth-child(2), .account-grid > :nth-child(3) { animation-delay: calc(var(--hero-in) + 0.1s); }
.main-col > :nth-child(3), .account-grid > :nth-child(4) { animation-delay: calc(var(--hero-in) + 0.15s); }
.main-col > :nth-child(4), .account-grid > :nth-child(5) { animation-delay: calc(var(--hero-in) + 0.19s); }
.cards .card { animation: rise 0.5s var(--ease-out) both; }
.cards .card:nth-child(1) { animation-delay: calc(var(--hero-in) + 0.03s); }
.cards .card:nth-child(2) { animation-delay: calc(var(--hero-in) + 0.07s); }
.cards .card:nth-child(3) { animation-delay: calc(var(--hero-in) + 0.11s); }
.cards .card:nth-child(4) { animation-delay: calc(var(--hero-in) + 0.15s); }
.cards .card:nth-child(5) { animation-delay: calc(var(--hero-in) + 0.19s); }
.cards .card:nth-child(6) { animation-delay: calc(var(--hero-in) + 0.23s); }

/* ---------- Intro splash ----------
   A five-beat sequence over ~2.4s: hold, brand entrance, the mark drawing
   itself, the splash wiping away, and the page arriving underneath while it
   goes. The site is fully rendered the whole time — the splash only covers
   it — so nothing is actually being waited for. */
.splash { display: none; }
html.has-splash { --hero-in: 2.05s; }
html.has-splash .splash {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  pointer-events: none;  /* decorative, and never a click trap */
  /* Beat 4: wipe upward and lift away, revealing the page beneath. The
     final keyframe hides it outright, so the layer is gone even if the
     cleanup script never runs. */
  animation: splash-exit 0.6s cubic-bezier(0.7, 0, 0.2, 1) 1.8s both;
}
html.has-splash .splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38rem 26rem at 50% 42%, var(--accent-soft), transparent 65%),
    radial-gradient(30rem 22rem at 50% 100%, var(--bg-glow-2), transparent 70%);
}
@keyframes splash-exit {
  from { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1;
         visibility: visible; }
  99%  { visibility: visible; }
  to   { clip-path: inset(0 0 100% 0); transform: scale(1.04); opacity: 0;
         visibility: hidden; }
}

.splash-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  /* Beat 2: enters from slightly small, soft and transparent. */
  animation: splash-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.92); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.splash-mark { height: 96px; width: auto; overflow: visible; }
/* Beat 3: the mark assembles — stem first, then each ring drawn around it. */
.s-stem {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: draw 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.42s both;
}
.s-ring { fill: none; transform-box: fill-box; transform-origin: center; }
.s-ring-a {
  stroke-dasharray: 33;
  stroke-dashoffset: 33;
  animation: draw 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.85s both,
             ring-settle 0.5s var(--ease-spring) 0.85s both;
}
.s-ring-b {
  stroke-dasharray: 43;
  stroke-dashoffset: 43;
  animation: draw 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1.02s both,
             ring-settle 0.55s var(--ease-spring) 1.02s both;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring-settle { from { transform: scale(0.72); } to { transform: none; } }

/* A glow travels down the mark once it is drawn. */
.splash-mark::after { content: none; }
html.has-splash .splash-stage::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: 190px;
  height: 130px;
  margin-left: -95px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent), transparent 70%);
  opacity: 0;
  filter: blur(22px);
  animation: sheen 0.9s ease-in-out 1.05s both;
}
@keyframes sheen {
  0%   { opacity: 0; transform: translateY(-26px) scale(0.7); }
  45%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(34px) scale(1.15); }
}

.splash-word {
  position: relative;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  animation: word-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both;
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); letter-spacing: 0.42em; }
  to   { opacity: 1; transform: none; filter: blur(0); letter-spacing: 0.2em; }
}

/* Beat 5: the page's own entrance is pushed back to just before the splash
   finishes leaving, so the two overlap. Done with a delay rather than by
   pausing: the timing is pure CSS, so a failed or throttled script can
   never leave the page sitting invisible. */
html.has-splash .sidebar { animation: rise 0.6s var(--ease-out) 2.05s both; }
html.has-splash .userchip { animation: rise 0.6s var(--ease-out) 2.15s both; }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 30;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 0.85rem calc(1rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--card-solid) 72%, transparent);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-right: 1px solid color-mix(in srgb, var(--card-edge) 80%, transparent);
  overflow: hidden;
  transition: width 0.32s var(--ease-spring), box-shadow 0.32s ease,
              transform 0.3s var(--ease-out);
}
.sidebar:hover, .sidebar:focus-within {
  width: var(--side-w-open);
  box-shadow: var(--shadow-lift);
}
.side-label {
  opacity: 0;
  transform: translateX(-6px);
  white-space: nowrap;
  transition: opacity 0.22s ease 0.06s, transform 0.28s var(--ease-out) 0.06s;
}
.sidebar:hover .side-label, .sidebar:focus-within .side-label,
.sidebar.open .side-label {
  opacity: 1;
  transform: none;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.55rem 0.9rem;
  text-decoration: none;
  color: var(--text);
}
.brand-mark { height: 30px; width: auto; display: block; flex-shrink: 0; }
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.side-nav { display: flex; flex-direction: column; gap: 0.3rem; }
.side-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--card-edge) 70%, transparent);
}
.side-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.62rem 0.72rem;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s var(--ease-out);
}
.side-item:hover { color: var(--text); background: var(--accent-soft); }
.side-item:active { transform: scale(0.97); }
.side-ico { width: 19px; height: 19px; flex-shrink: 0; }
.side-active {
  color: var(--text);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--gold) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.inline-form { display: contents; }

/* Hamburger + scrim (mobile drawer) */
.side-toggle {
  display: none;
  position: fixed;
  top: calc(0.8rem + env(safe-area-inset-top));
  left: 0.9rem;
  z-index: 40;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-solid) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  cursor: pointer;
}
.side-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(10, 12, 12, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media (max-width: 860px) {
  .side-toggle { display: inline-flex; }
  .sidebar {
    transform: translateX(-102%);
    width: min(78vw, 300px);
    box-shadow: var(--shadow-lift);
  }
  .sidebar.open { transform: none; }
  .sidebar .side-label { opacity: 1; transform: none; }
  .side-scrim.open { display: block; }
}

/* ---------- User chip (top right) ---------- */
.userchip {
  position: fixed;
  top: calc(0.8rem + env(safe-area-inset-top));
  right: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--card-edge) 85%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-solid) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-rest);
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.userchip:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.userchip-avatar {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.userchip-meta { display: flex; flex-direction: column; line-height: 1.15; }
.userchip-meta strong { font-size: 0.8rem; font-weight: 600; }
.userchip-meta small { font-size: 0.68rem; color: var(--muted); }
@media (max-width: 620px) {
  .userchip { padding: 0.3rem; }
  .userchip-meta { display: none; }
}

/* ---------- Floating back / forward arrows ---------- */
.pagenav {
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  gap: 0.45rem;
  animation: rise 0.45s var(--ease-out) both;
}
.pagenav[hidden] { display: none; }
.pagenav-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--card-edge) 85%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-solid) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: var(--muted);
  cursor: pointer;
  box-shadow: var(--shadow-rest);
  transition: color 0.18s ease, background 0.18s ease,
              opacity 0.25s ease, transform 0.22s var(--ease-spring),
              box-shadow 0.25s ease;
}
.pagenav-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.pagenav-btn:active:not(:disabled) { transform: scale(0.9); }
.pagenav-btn:disabled { opacity: 0.28; cursor: default; }

/* Smooth cross-page transitions; shoe photos morph between pages via their
   per-style view-transition-name (Apple-style liquid move). */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.userchip { view-transition-name: userchip; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.24s; }
::view-transition-group(*) {
  animation-timing-function: cubic-bezier(0.32, 0.72, 0.22, 1);
  animation-duration: 0.38s;
}

/* ---------- Layout ---------- */
.container { max-width: 660px; margin: 0 auto; padding: 1.6rem 1.25rem 4rem; }
.container-auth { padding-top: calc(3.6rem + env(safe-area-inset-top)); }
.layout { display: flex; flex-direction: column; gap: 1.7rem; }
.main-col { display: flex; flex-direction: column; gap: 1.8rem; min-width: 0; }
@media (min-width: 861px) {
  .container-auth {
    max-width: none;
    margin: 0;
    padding: 2.6rem 3.2rem 5rem calc(var(--side-w) + 3.2rem);
  }
  .container-auth > * { max-width: 1220px; }
}
@media (min-width: 960px) {
  .layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
  .rail { position: sticky; top: 2.4rem; }
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.85rem;
  letter-spacing: -0.005em;
  margin: 0.4rem 0 0.1rem;
}
h1 .accent { color: var(--accent); }
h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--card-edge) 60%, transparent);
}
.page-head { margin-bottom: 2.4rem; }
.page-head::after {
  content: "";
  display: block;
  width: 68px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold-soft));
  border-radius: 2px;
  margin-top: 0.75rem;
}
.updated { color: var(--muted); font-size: 0.78rem; margin: 0.35rem 0 0; }
.hint { color: var(--muted); font-size: 0.72rem; font-weight: 400; font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.hint-bad { color: var(--bad); }

/* Sell-through: a % with a fill bar and the sold/stock counts, used on the
   style page and the Insights per-article list. */
.st-bar { display: block; height: 6px; border-radius: 999px;
  background: var(--accent-soft); overflow: hidden; }
.st-fill { display: block; height: 100%; border-radius: 999px;
  background: var(--accent); }
.st-pct { font-weight: 700; color: var(--accent); white-space: nowrap; }
.sellthrough-card .st-head { display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 0.5rem; }
.sellthrough-card .st-pct { font-size: 1.15rem; }
.sellthrough-card .st-bar { margin-bottom: 0.4rem; }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0;
  border-bottom: 1px solid var(--card-edge); }
.st-row:last-child { border-bottom: 0; }
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  gap: 0.28rem; }
.st-row .st-pct { min-width: 3.4ch; text-align: right; }

/* ---------- Cards (glass) ---------- */
.card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--card-edge) 85%, transparent);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-rest);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.list-card:hover, .chart-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

/* Metric rows: name | today | previous */
.col-labels, .card.metric {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 0.5rem;
  align-items: center;
}
.col-labels {
  padding: 0 1.1rem 0.5rem;
  color: var(--gold);
  font-size: 0.69rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.col-labels span:not(:first-child), .metric-now, .metric-prev { text-align: right; }
.cards { display: flex; flex-direction: column; gap: 1.05rem; margin-bottom: 2.4rem; }
.card.metric { transition: box-shadow 0.25s var(--ease-out), border-color 0.25s ease; }
.card.metric:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow-lift); }
.metric-name { font-size: 0.81rem; color: var(--muted); }
.metric-now {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-prev { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Segment chips ---------- */
.seg-chips {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0.15rem 0.15rem 0.5rem;
  margin: 0 -0.15rem 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.seg-chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 0.5rem 1.05rem;
  text-transform: uppercase;
  font-size: 0.68rem !important;
  letter-spacing: 0.11em;
  font-weight: 500;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease,
              transform 0.18s var(--ease-spring), box-shadow 0.18s var(--ease-out);
}
.chip:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-rest);
}
.chip:active { transform: translateY(0) scale(0.96); }
.chip-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.chip-active:hover { color: var(--bg); border-color: var(--text); }

/* ---------- Ranked lists ---------- */
.list-grid { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1rem; }
.list-card { padding-bottom: 0.7rem; }
.ranked { list-style: none; counter-reset: rank; margin: 0; padding: 0; transition: opacity 0.14s ease, transform 0.14s ease; }
.ranked.paging { opacity: 0; transform: translateY(4px); }
.ranked li {
  counter-increment: rank;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.55rem;
  margin: 0 -0.55rem;
  border-radius: 10px;
  border-top: 1px solid color-mix(in srgb, var(--card-edge) 55%, transparent);
  font-size: 0.84rem;
  transition: background 0.16s ease;
}
.ranked li:hover { background: var(--accent-soft); }
.ranked li:first-child { border-top: none; }
.ranked li::before {
  content: counter(rank);
  font-family: var(--serif);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.85rem;
  min-width: 1.1rem;
}
.ranked-bad li::before { color: var(--bad); }
/* Paged lists keep their true position across pages (set by the pager JS) */
.ranked li[data-rank]::before { content: attr(data-rank); }
.rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-value { font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--serif); }
.rank-sub { display: block; color: var(--muted); font-size: 0.71rem; margin-top: 0.1rem; }

/* Pager (reorder alerts & long lists) */
.pager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.7rem; }
.pager-head h2 { flex: 1; }
.pager-arrows {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-top: 0.1rem;
}
.pager-arrows[hidden] { display: none; }
.pager-count { color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: center; }
.pager-btn {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, opacity 0.2s ease, transform 0.18s var(--ease-spring);
}
.pager-btn:hover:not(:disabled) { color: var(--text); background: var(--accent-soft); transform: translateY(-1px); }
.pager-btn:active:not(:disabled) { transform: scale(0.9); }
.pager-btn:disabled { opacity: 0.3; cursor: default; }

/* Product thumbnails (sensitive: served only behind login) */
.thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--card-edge);
  background: #fff;
  flex-shrink: 0;
  cursor: zoom-in;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-out);
}
.ranked li:hover .thumb { transform: scale(1.7); box-shadow: var(--shadow-lift); }

/* ---------- Reorder & messages ---------- */
.reorder-empty { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0.1rem; }

.msg {
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 0.7rem;
  border: 1px solid;
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.msg pre { margin: 0; white-space: pre-wrap; font-family: inherit; }
.msg-success { border-color: var(--good); color: var(--good); }
.msg-error { border-color: var(--bad); color: var(--bad); }
.msg-warn { border-color: var(--gold-soft); color: var(--warn); }

/* ---------- Forms ---------- */
label { display: block; font-size: 0.85rem; margin: 0.95rem 0 0.4rem; }
input, select.style-picker {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 11px;
  border: 1px solid var(--card-edge);
  background: color-mix(in srgb, var(--card-solid) 92%, transparent);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select.style-picker:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.btn {
  display: inline-block;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.85rem;
  border: none;
  border-radius: 11px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s var(--ease-spring), box-shadow 0.2s var(--ease-out);
}
.btn:hover { background: #403e36; box-shadow: var(--shadow-lift); }
.btn:active { transform: scale(0.98); background: var(--accent); box-shadow: none; }
.btn-small { width: auto; padding: 0.5rem 1rem; font-size: 0.78rem; margin-top: 0.9rem; }
.btn-ghost { background: none; border: 1px solid var(--card-edge); color: var(--muted); }
/* My Users rows: a per-person "set password" box sits beside Remove. The
   row wraps rather than squeezing the input on narrow screens. */
.user-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.inline-reset { display: flex; align-items: center; gap: 0.35rem; }
.inline-reset input {
  width: 11rem;
  max-width: 40vw;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  background: var(--card-solid);
  color: var(--text);
}
.ranked-users > li { flex-wrap: wrap; gap: 0.5rem; }
.btn-ghost:hover { background: none; color: var(--accent); border-color: var(--accent); box-shadow: none; }
.linklike {
  color: var(--muted);
  background: none;
  border: none;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  transition: color 0.16s ease;
}
.linklike:hover { color: var(--text); }
.link-danger:hover { color: var(--bad); }

/* ---------- Charts ---------- */
.chart-card { padding-bottom: 0.7rem; }
.chart-svg { max-width: 100%; }
/* Insights is a reading column, not a full-bleed grid: charts
   stay legible instead of stretching across a wide monitor. */
.insights-col { max-width: 880px; display: flex; flex-direction: column; gap: 1.6rem; }
.chart-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.chart-svg [data-tip] { transition: opacity 0.15s ease; cursor: default; }
.chart-svg path[data-tip]:hover { opacity: 0.85; }
/* Charts arrive rather than appear: bars grow from the baseline, arcs and
   the trend line sweep in. Subtle, and only once per page load. */
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes col-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes arc-in { from { opacity: 0; transform: scale(0.9) rotate(-8deg); }
                    to { opacity: 1; transform: none; } }
@keyframes dot-pulse { 0%, 100% { r: 3.2; opacity: 1; }
                       50% { r: 4.4; opacity: 0.75; } }
.chart-svg .bar-grow {
  transform-box: fill-box; transform-origin: left center;
  animation: bar-grow 0.75s var(--ease-out) both;
}
.chart-svg .col-grow {
  transform-box: fill-box; transform-origin: bottom center;
  animation: col-grow 0.65s var(--ease-out) both;
}
.chart-svg .arc-grow {
  transform-box: view-box; transform-origin: center;
  animation: arc-in 0.6s var(--ease-out) both;
}
.chart-svg .line-draw {
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: line-draw 1.5s var(--ease-out) forwards;
}
@keyframes line-draw { to { stroke-dashoffset: 0; } }
.chart-svg .pulse-dot { animation: dot-pulse 2.6s ease-in-out infinite 1.4s; }
.chart-svg [data-drill] { cursor: pointer; }
.chart-svg [data-drill]:hover { opacity: 0.8; }
.chart-svg .drill-active {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}

/* Press a category bar -> its franchise break-up expands underneath. */
.drill-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-spring);
}
.drill-panel > .drill-inner { overflow: hidden; min-height: 0; }
.drill-panel .card {
  margin-bottom: 1.1rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease 0.08s, transform 0.32s var(--ease-out) 0.08s;
}
.drill-panel.open { grid-template-rows: 1fr; }
.drill-panel.open .card { opacity: 1; transform: none; }
.viz-tip {
  display: none;
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(43, 42, 38, 0.3);
}

/* ---------- Audit log ---------- */
.audit-card { padding: 0.4rem 0.6rem; }
.audit-scroll { overflow-x: auto; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.audit-table th {
  text-align: left; padding: 0.55rem 0.6rem; color: var(--gold);
  font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.11em;
  border-bottom: 1px solid var(--card-edge); white-space: nowrap;
}
.audit-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--card-edge) 55%, transparent); vertical-align: top; }
.audit-table tr { transition: background 0.15s ease; }
.audit-table tbody tr:hover { background: var(--accent-soft); }
.audit-table tr:last-child td { border-bottom: none; }
.audit-ts { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-detail { color: var(--muted); max-width: 420px; overflow-wrap: anywhere; }
.audit-badge {
  display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--card-edge); font-size: 0.72rem; white-space: nowrap;
}
.audit-login .audit-badge, .audit-upload_ok .audit-badge { border-color: var(--good); color: var(--good); }
.audit-login_rejected .audit-badge, .audit-code_failed .audit-badge,
.audit-upload_failed .audit-badge { border-color: var(--bad); color: var(--bad); }

/* ---------- Login ---------- */
.login-wrap { max-width: 400px; margin: 11vh auto 0; }
.login-title { text-align: center; margin-bottom: 0.4rem; line-height: 1.35; font-size: 2rem; letter-spacing: 0.14em; }
.login-sub {
  text-align: center;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
}
.login-mark {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto 1.1rem;
  animation: rise 0.6s var(--ease-out) both;
}
.login-card { padding: 1.5rem 1.6rem 1.6rem; border-radius: 18px; }
.login-card label { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.login-card label:first-of-type { margin-top: 0.1rem; }
.login-card input { padding: 0.8rem 0.9rem; border-radius: 12px; font-size: 1rem; }
.login-card .btn { margin-top: 1.35rem; border-radius: 12px; padding: 0.9rem; }
.login-note { color: var(--muted); font-size: 0.8rem; margin: 0.85rem 0 0; text-align: center; }
.login-link { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
.login-link:hover { text-decoration: underline; }
.login-alt { text-align: center; margin-top: 0.6rem; }

.empty-state { text-align: center; padding: 2.25rem 1rem; }
.empty-state .btn { width: auto; padding: 0.78rem 1.7rem; }

/* Wider screens: lists side by side */
@media (min-width: 560px) {
  .list-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .list-grid .list-card:last-child { grid-column: 1 / -1; }
}

/* ---------- Account page ---------- */
.account-grid { display: flex; flex-direction: column; gap: 1.1rem; max-width: 860px; }
@media (min-width: 760px) {
  .account-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
.export-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.15rem 0.8rem;
  margin: 0.6rem 0 0.2rem;
}
.export-picks .check-label { margin: 0.25rem 0; font-size: 0.84rem; }
.export-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.theme-toggle-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.member-add { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 0.7rem; align-items: end; margin-top: 0.6rem; }
.member-add label { margin: 0; }
@media (max-width: 560px) { .member-add { grid-template-columns: 1fr; } }

/* ---------- Upload dropzones ---------- */
.filedrop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px dashed var(--card-edge);
  border-radius: 12px;
  padding: 0.4rem 0.6rem;
  min-height: 3rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.filedrop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.filedrop.has-file { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.filedrop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.filedrop::before {
  content: attr(data-empty);
  color: var(--muted);
  font-size: 0.82rem;
  padding-left: 0.2rem;
}
.filedrop.has-file::before { content: ""; padding: 0; }
.filedrop-name { flex: 1; font-size: 0.85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filedrop-clear {
  position: relative;
  z-index: 2;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: var(--card-solid);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.filedrop-clear:hover { color: var(--bad); border-color: var(--bad); }
.filedrop-clear[hidden] { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Chart palette: ivory / bronze / teal (light values) ---------- */
:root {
  --viz-ink: #2b2a26;
  --viz-muted: #8b8474;
  --viz-grid: #e9e3d6;
  --viz-surface: #fffdf9;
  --viz-axis: #d9d1c0;
  --viz-cell-empty: #f1ece0;
  --viz-neutral-bar: #d8d0bf;
  --viz-trend: #178f85;
  --viz-s1: #12857b; --viz-s2: #e8735e; --viz-s3: #2aa79a; --viz-s4: #f0a08c;
  --viz-s5: #0b5f58; --viz-s6: #c4553f; --viz-s7: #66c6bc; --viz-s8: #7d8b8f;
}

/* ---------- Dark mode (the default) ---------- */
html[data-theme="dark"] {
  --bg: #0c1113;
  --bg-glow-1: rgba(43, 224, 208, 0.07);
  --bg-glow-2: rgba(201, 168, 106, 0.07);
  --card: rgba(22, 28, 31, 0.72);
  --card-solid: #161c1f;
  --card-edge: #253034;
  --text: #e8eef0;
  --muted: #8d9ba0;
  --gold: #c9a86a;
  --gold-soft: #6d5a35;
  --accent: #2be0d0;
  --accent-soft: rgba(43, 224, 208, 0.1);
  --good: #5fc08d;
  --bad: #e07a70;
  --warn: #d8b45a;
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 26px rgba(0, 0, 0, 0.4);
  --viz-ink: #e8eef0;
  --viz-muted: #8d9ba0;
  --viz-grid: #212b2e;
  --viz-surface: #161c1f;
  --viz-axis: #2e3b3f;
  --viz-cell-empty: #1b2325;
  --viz-neutral-bar: #2e3b3f;
  --viz-trend: #2be0d0;
  --viz-s1: #2be0d0; --viz-s2: #ff8f78; --viz-s3: #5fd1c4; --viz-s4: #ffb3a1;
  --viz-s5: #17a99c; --viz-s6: #e5654a; --viz-s7: #96e8e0; --viz-s8: #9aa8ae;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(46rem 30rem at 8% -6%, var(--bg-glow-1), transparent 60%),
    radial-gradient(50rem 34rem at 104% 108%, var(--bg-glow-2), transparent 62%),
    linear-gradient(160deg, #0d1315 0%, #0c1113 55%, #10151a 100%);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select.style-picker { background: #101617; }
html[data-theme="dark"] .btn { background: var(--accent); color: #04211e; }
html[data-theme="dark"] .btn:hover { background: #52ead9; }
html[data-theme="dark"] .btn:active { background: #17c2b1; }
html[data-theme="dark"] .chip-active { background: var(--accent); border-color: var(--accent); color: #04211e; }
html[data-theme="dark"] .chip-active:hover { color: #04211e; border-color: var(--accent); }
html[data-theme="dark"] .thumb, html[data-theme="dark"] .style-photo { background: #e8eef0; }
html[data-theme="dark"] .viz-tip { background: #e8eef0; color: #0d1112; }
html[data-theme="dark"] .userchip-avatar { color: #04211e; }
html[data-theme="dark"] .page-head::after { background: linear-gradient(90deg, var(--accent), var(--gold)); }

/* ---------- Row links & badges ---------- */
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { color: var(--accent); }
.badge {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid;
}
.badge-bad { color: var(--bad); border-color: var(--bad); }
.badge-ok { color: var(--good); border-color: var(--good); }

/* ---------- Restock calendar ---------- */
.cal { display: flex; flex-direction: column; gap: 4px; }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head .cal-cell {
  min-height: auto;
  padding: 0.2rem 0.3rem;
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: none;
}
.cal-cell {
  min-height: 62px;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 0.25rem 0.35rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  overflow: hidden;
}
.cal-empty { border-style: dashed; opacity: 0.35; }
.cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-day { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.cal-ev {
  display: block;
  font-size: 0.66rem;
  line-height: 1.25;
  margin-top: 0.15rem;
  padding: 0.1rem 0.25rem;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-ev-restock { background: rgba(95, 192, 141, 0.16); color: var(--good); }
.cal-ev-stockout { background: rgba(224, 122, 112, 0.15); color: var(--bad); }

/* ---------- "In beta" lock (restock calendar) ---------- */
.beta-wrap { position: relative; }
.beta-content {
  filter: saturate(0.75);
  opacity: 0.82;
  transition: filter 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.beta-wrap:hover .beta-content { filter: none; opacity: 1; }
.beta-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.95rem 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-solid) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: var(--shadow-rest);
  animation: beta-glow 3.4s ease-in-out infinite;
}
.beta-lock { display: inline-flex; }
/* The shackle lifts and drops, as if the lock keeps trying to open. */
.beta-shackle {
  transform-origin: 12px 10px;
  animation: beta-shackle 3.4s var(--ease-out) infinite;
}
@keyframes beta-shackle {
  0%, 62%, 100% { transform: translateY(0); }
  70% { transform: translateY(-2.5px); }
  78% { transform: translateY(-2.5px); }
  86% { transform: translateY(0); }
}
@keyframes beta-glow {
  0%, 100% { box-shadow: var(--shadow-rest); }
  70% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
}
@media (max-width: 620px) {
  .beta-badge { top: 0.6rem; right: 0.6rem; padding: 0.35rem 0.7rem 0.35rem 0.55rem; }
  .beta-text { display: none; }
}

/* ---------- Status form ---------- */
.status-form { margin-top: 0.3rem; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.7rem; min-width: 0; }
.status-grid label { font-size: 0.8rem; color: var(--muted); min-width: 0; }
.status-grid input { min-width: 0; width: 100%; }
.status-grid .check-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-size: 0.9rem;
  margin: 0.4rem 0 0.2rem;
}
.check-label { display: flex; align-items: center; gap: 0.5rem; }
.check-label input[type="checkbox"] { width: auto; accent-color: var(--accent); transform: scale(1.15); }
.status-actions { display: flex; gap: 0.6rem; }
.style-picker { font-size: 0.9rem; padding: 0.6rem 0.7rem; }
input[type="date"] { -webkit-appearance: none; appearance: none; }
input[type="file"] { padding: 0.55rem; font-size: 0.85rem; }

/* ---------- Style detail ---------- */
.style-hero { display: flex; gap: 1.3rem; align-items: center; margin-bottom: 0.5rem; }
.style-photo {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--card-edge);
  background: #fff;
  box-shadow: var(--shadow-rest);
  cursor: zoom-in;
}
.legend { display: flex; gap: 1rem; margin: -0.2rem 0 0.4rem; }
.legend-key { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); }
.legend-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ---------- Lightbox ---------- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 10, 10, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 4vmin;
}
.lightbox.open { display: flex; animation: rise 0.25s var(--ease-out) both; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ---------- Smart search (inside the sidebar) ---------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.2rem 0.72rem 0.55rem;
  color: var(--muted);
}
.search .side-ico { flex-shrink: 0; }
.search input {
  width: 100%;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: color-mix(in srgb, var(--card-solid) 85%, transparent);
  color: var(--text);
  font-size: 0.84rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              opacity 0.22s ease 0.06s, transform 0.28s var(--ease-out) 0.06s;
}
.search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0.7rem;
  right: 0.7rem;
  background: var(--card-solid);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  z-index: 40;
  animation: rise 0.18s var(--ease-out) both;
}
.search-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--card-edge) 55%, transparent);
}
.search-item:first-child { border-top: none; }
.search-item:hover, .search-item.active { background: var(--accent-soft); }
.search-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-sub { color: var(--muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Stat strip (yesterday / 7 days / month) ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.9rem 0.5rem;
  margin-bottom: 2.3rem;
  text-align: center;
  border-left: none;
}
.stat-strip-solo { grid-template-columns: 1fr; }
.stat { padding: 0 1rem; }
.stat + .stat { border-left: 1px solid color-mix(in srgb, var(--card-edge) 70%, transparent); }
.stat-label {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.55rem;
}
/* Restrained by design: the figure is set in the text face at a size that
   sits in the layout rather than shouting over it. */
.stat-value {
  display: block;
  font-family: var(--sans);
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.stat-sub { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.4rem; }
.stale-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  color: var(--warn);
  font-size: 0.72rem;
}
@media (max-width: 620px) {
  .stat-strip { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.2rem 1rem; }
  .stat + .stat { border-left: none; border-top: 1px solid color-mix(in srgb, var(--card-edge) 70%, transparent); padding-top: 1.1rem; }
}

/* ---------- Assumptions ---------- */
.assumptions { display: flex; flex-direction: column; gap: 0.8rem; max-width: 760px; }
.assumption { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.assumption-main label { margin: 0 0 0.25rem; font-weight: 600; font-size: 0.95rem; }
.assumption-default { opacity: 0.75; }
.assumption-control input[type="number"] { width: 90px; text-align: center; }
/* The launch-day list holds several dates, so it needs room to show them. */
.assumption-control input[type="text"] { width: 220px; }
.assumptions .btn { max-width: 300px; }

/* iOS-style switch */
.switch { position: relative; display: inline-block; width: 52px; height: 31px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-edge) 80%, transparent);
  transition: background 0.25s ease;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.25s var(--ease-spring);
}
.switch input:checked + .switch-track { background: #34c759; }
.switch input:checked + .switch-track::after { transform: translateX(21px); }

/* ---------- Upload processing overlay ---------- */
.upload-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 1.1rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.upload-overlay.open { display: flex; animation: rise 0.3s var(--ease-out) both; }
.spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.upload-overlay p { color: var(--muted); font-size: 0.9rem; letter-spacing: 0.04em; }

/* ---------- Photo grid ---------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}
.photo-tile {
  margin: 0;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: rise 0.4s var(--ease-out) both;
}
.photo-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.photo-tile img, .photo-missing {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--card-edge);
}
.photo-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
}
.photo-name { display: block; font-size: 0.84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-meta { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Product-state badges ----------
   One shape for every state so they read as a family; colour carries the
   meaning. Kept small enough to sit inline after a style name without
   pushing the row height around. */
.pill {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.pill-oos      { background: rgba(164, 69, 61, 0.12);  color: var(--bad); }
.pill-core     { background: rgba(138, 111, 69, 0.14); color: var(--gold); }
.pill-upcoming { background: var(--accent-soft);       color: var(--accent); }
.pill-reorder  { background: rgba(138, 111, 69, 0.10); color: var(--muted); }
.pill-hold     { background: var(--accent-soft);       color: var(--accent);
                 box-shadow: inset 0 0 0 1px var(--accent); }
/* A drop day is a fact about the calendar, not a problem with the product,
   so this reads as a neutral marker rather than an alert. */
.pill-drop     { background: rgba(138, 111, 69, 0.10); color: var(--muted);
                 box-shadow: inset 0 0 0 1px rgba(138, 111, 69, 0.35); }

.upcoming-head { margin-top: 1.4rem; }

/* Movers gender switch */
.movers-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.6rem 0 0.6rem;
}
.movers-head h2 { margin: 0; }
.seg-switch { display: inline-flex; gap: 0.25rem; }
.seg-btn {
  border: 1px solid var(--card-edge);
  background: var(--card-solid);
  color: var(--muted);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.seg-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================ REFIT ========
   This is a tool someone opens every morning to decide what to reorder — a
   pit wall, not a printed report. Three things were making it read as a
   document, and each is answered here.

   1. A serif display face on every heading and figure. Handsome, and wrong:
      serifs say "read me once, in order". Headings and figures move to the
      UI sans with tabular numerals, so columns of numbers line up and scan
      like an instrument readout instead of prose.
   2. Nothing responded to the pointer. A page where nothing reacts is a
      picture of an app. Rows, bars and controls now have real hover, active
      and focus states.
   3. Air where density was wanted. Tighter rhythm so more of the decision
      fits above the fold, without crowding.

   Kept: the dark ground and the cyan, which are the brand's own mark
   colours and the one place this is allowed to be loud.
   ========================================================================= */

/* `hidden` must actually hide. The attribute only carries display:none from
   the browser's default stylesheet, so ANY author rule that sets display
   beats it — .list-grid{display:flex} and .ranked li{display:flex} both did,
   which is why the toggles changed which button looked active while leaving
   every pane and row on screen. Three components already worked around this
   one at a time; this settles it for all of them and for anything added
   later. */
[hidden] { display: none !important; }

h1, h2, .brand-name, .ranked li::before, .rank-value, .metric-now,
.stat-value {
  font-family: var(--sans);
}

/* Figures are the content. Tabular so they align down a column, tightened
   so they read as data rather than headline. */
.metric-now, .stat-value, .rank-value, .seg-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.metric-now { font-weight: 650; }
.stat-value { font-weight: 650; letter-spacing: -0.02em; }

h1 { letter-spacing: -0.025em; font-weight: 640; }
h2 {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 660;
  color: var(--muted);
}
/* The rank numeral is a label, not a flourish. */
.ranked li::before {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.65;
}

/* ---- Things that respond ---- */
.ranked li {
  border-radius: 10px;
  transition: background 0.14s ease, transform 0.14s var(--ease-out);
}
.ranked li:hover { transform: translateX(2px); }
.row-link { text-decoration: none; }
.row-link:hover { color: var(--accent); }

/* A bar you can walk into. The hit area covers the whole row, so a short
   bar is still a target you can actually hit. */
.bar-link { cursor: pointer; }
.bar-link .bar-hit { transition: fill 0.14s ease; }
.bar-link:hover .bar-hit { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.bar-link:focus-visible { outline: none; }
.bar-link:focus-visible .bar-hit {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.bar-link:hover .bar-grow { filter: brightness(1.12); }
.chart-card { position: relative; }

/* ---- Segmented controls ---- */
.seg-switch-wrap { flex-wrap: wrap; margin: 0 0 0.75rem; }
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 560;
  letter-spacing: 0.01em;
}
.seg-btn:active { transform: scale(0.97); }
.seg-count {
  font-size: 0.68rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: inherit;
  min-width: 1.15rem;
  text-align: center;
}
.seg-btn.seg-on .seg-count { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- Density ---- */
.card { padding: 1rem 1.1rem; }
.ranked li { padding-top: 0.42rem; padding-bottom: 0.42rem; }
.rank-value small { font-size: 0.68em; opacity: 0.6; margin-left: 1px; }
.decide-empty { color: var(--muted); font-size: 0.84rem; padding: 0.6rem 0; }
.movers-head { margin-top: 1.9rem; }

@media (prefers-reduced-motion: reduce) {
  .ranked li, .seg-btn, .bar-link .bar-hit { transition: none; }
  .ranked li:hover { transform: none; }
}

/* ---------- Toggling is not arriving ----------
   The panes are direct children of .main-col, which carries the page-load
   entrance: `animation: rise 0.5s both` delayed by --hero-in. Unhiding an
   element restarts that animation, so every press of Men or Women replayed a
   half-second fade — and during a session where the intro splash runs,
   --hero-in is 2.05s, so the pane sat invisible for two seconds first. The
   reorder filter felt instant by comparison because plain list rows carry no
   entrance animation.

   Arriving on a page and switching a view are different events and should
   not share a motion. Entrances are removed here; switching gets its own
   much shorter movement, fast enough to feel like the content was already
   there. */
.movers-pane { animation: none !important; }
.movers-pane.pane-in { animation: pane-swap 0.16s var(--ease-out) both; }
@keyframes pane-swap {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* The same movement, once, for a filtered list — the rows themselves are
   never animated individually, which at 30-odd rows would stagger into
   something slower than the thing it replaced. */
.decide-list.list-swap { animation: pane-swap 0.13s var(--ease-out) both; }

/* Pressing a control should acknowledge instantly, before anything moves. */
.seg-btn { transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.seg-btn:active { transform: scale(0.96); transition-duration: 0.05s; }

/* Charts: the bars already grow on load. Keep that to the first paint only,
   so a chart revealed by a toggle is simply there. */
.movers-pane .bar-grow, .decide-list .bar-grow { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .movers-pane.pane-in, .decide-list.list-swap { animation: none; }
  .seg-btn:active { transform: none; }
}

.movers-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.rank-name .rank-sub { display: block; }

/* ---------- Insights: colour performance ----------
   Best and worst read as a pair, so they sit side by side on anything wider
   than a phone and stack in that order below it. */
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.colour-split { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-top: 0.9rem; }
@media (min-width: 860px) { .colour-split { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.colour-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.colour-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.colour-head-best::before { background: var(--good); }
.colour-head-worst::before { background: var(--bad); }
.ranked-compact li { padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 0.86rem; }
.ranked-compact li::before { display: none; }
.colour-panel + .colour-panel { margin-top: 1.1rem; }
/* The insights column reads as one flow rather than a stack of documents. */
.insights-col { display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- Stat strip timeframe ----------
   The control sits with the figures it describes, right-aligned, so the
   timeframe reads as a property of those three numbers rather than of the
   page. Entrance animation off for the same reason as the movers panes:
   switching is not arriving. */
.stat-strip { position: relative; animation: none !important; }
.stat-strip.pane-in { animation: pane-swap 0.16s var(--ease-out) both !important; }
.stat-when { color: var(--muted); font-weight: 500; }

/* ============================================ STAT STRIP, RECONSIDERED =====
   The switch was landing centred because .stat-strip is a three-column grid:
   a fourth child does not float to the right, it takes the next cell. Lifting
   it out of the flow puts it where a control of this kind belongs — quietly
   in the corner of the panel it governs — and leaves the three figures to
   divide the width evenly between themselves, which is the whole point of the
   strip.

   The strip is the first thing read each morning, so it carries the weight:
   larger figures, quieter labels, hairline dividers rather than boxes. */
.stat-strip {
  position: relative;
  padding: 2.4rem 0.5rem 2rem;
  align-items: start;
}
.strip-switch {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  margin: 0;
  gap: 0.2rem;
}
.strip-switch .seg-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  border-color: transparent;
  background: transparent;
}
.strip-switch .seg-btn:hover { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.strip-switch .seg-btn.seg-on {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.stat-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
}
.stat-value {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  margin: 0.45rem 0 0.3rem;
  display: block;
}
.stat-sub { font-size: 0.78rem; color: var(--muted); }
.stat-when { text-transform: none; letter-spacing: 0.01em; font-weight: 500; }
.stat + .stat {
  border-left: 1px solid color-mix(in srgb, var(--card-edge) 45%, transparent);
}

@media (max-width: 720px) {
  .stat-strip { grid-template-columns: 1fr; padding-top: 3.4rem; gap: 1.4rem; }
  .stat + .stat { border-left: none; border-top: 1px solid color-mix(in srgb, var(--card-edge) 45%, transparent); padding-top: 1.1rem; }
  .strip-switch { top: 0.8rem; right: 0.8rem; }
}

/* ---- Premium is restraint, not decoration ----
   One hairline of light along the top edge of a card reads as material
   thickness; a heavier shadow just reads as a heavier shadow. */
.card {
  border-radius: 14px;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset,
              var(--shadow-rest);
}
.list-card:hover, .chart-card:hover { box-shadow:
  0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, var(--shadow-lift); }
.page-head h1 { font-size: clamp(1.5rem, 3vw, 1.95rem); }
.page-head .updated { color: var(--muted); font-size: 0.84rem; }
.pill { font-size: 0.63rem; letter-spacing: 0.05em; }

/* ---------- Availability ---------- */
.avail-list li { align-items: flex-start; }
.avail-actions { margin-left: auto; }
.avail-form .status-grid { margin-top: 0.4rem; }
.avail-form select.style-picker { width: 100%; }

/* Gender belongs next to the article, not inferred from the name. */
.gender-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.34rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  vertical-align: middle;
}
.metric-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 0.25rem; color: var(--accent); }
.metric-str .metric-now { color: var(--accent); }

.sell-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 0.5rem; }
.sell-summary .stat-value { font-size: 1.5rem; }
.sell-summary .stat-label, .sell-summary .stat-sub { display: block; }
@media (max-width: 600px) { .sell-summary { grid-template-columns: 1fr; gap: 1rem; } }

/* A caveat belongs on the number it qualifies, not in a footnote nobody
   reaches. Small enough to sit inside a label without changing its weight. */
.beta-chip {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.34rem;
  border-radius: 4px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- Layout ----------
   The dashboard was one long column of equal-weight cards, so everything
   asked for attention at once and the eye had nowhere to start. The rail
   sticks while the main column scrolls, headline figures get more room than
   supporting lists, and the whole thing stops short of full width so lines
   of numbers stay scannable on a wide screen. */
.layout { align-items: start; gap: 1.6rem; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .rail { position: sticky; top: 1.2rem; }
}
.main-col { min-width: 0; }
.main-col > section + section { margin-top: 1.1rem; }
.cards { gap: 0.7rem; }
.metric { padding: 0.85rem 1rem; }
.metric-name { font-size: 0.7rem; letter-spacing: 0.04em; }
.chart-card { padding-bottom: 0.6rem; }
.chart-svg { display: block; width: 100%; height: auto; }