/* PlugSheet design system — dark charcoal + gold accent, Ssense/End/ALD tier.
   Every customer page loads this single stylesheet. Design tokens live in :root;
   component classes are composable, not page-specific. Keep this file
   authoritative — no page-scoped <style> blocks except for one-off exceptions. */

:root {
  /* ---- Color ---- */
  --bg:            #0b0b0d;
  --bg-elev-1:     #131316;
  --bg-elev-2:     #1a1a1e;
  --bg-elev-3:     #232328;
  --edge:          #26262b;
  --edge-hi:       #34343a;
  --edge-focus:    #4d4d55;

  --ink:           #f4f2ee;
  --ink-2:         #d8d5cf;
  --ink-3:         #b0aca4;
  --dim:           #8f8b83;
  --dimmer:        #5f5d58;
  --dimmest:       #3d3b37;

  --accent:        #c3a877;
  --accent-hi:     #d9be89;
  --accent-lo:     #9f8659;
  --accent-ink:    #1a1408;

  --live:          #7ee0a0;
  --live-bg:       rgba(126,224,160,0.08);
  --live-edge:     rgba(126,224,160,0.25);
  --warn:          #e0a0a0;
  --warn-bg:       rgba(224,160,160,0.06);
  --warn-edge:     rgba(224,160,160,0.22);
  --info:          #a8c4e8;
  --red:           #e0a0a0;
  --danger:        #cc0044;

  /* ---- Type ---- */
  --font-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-hero:        clamp(36px, 5.5vw, 60px);
  --t-h1:          clamp(28px, 4vw, 42px);
  --t-h2:          clamp(21px, 2.5vw, 28px);
  --t-h3:          17px;
  --t-body:        15px;
  --t-small:       13px;
  --t-micro:       11px;

  --lh-tight:      1.08;
  --lh-headings:   1.2;
  --lh-body:       1.6;

  --ls-tight:      -0.025em;
  --ls-h2:         -0.015em;
  --ls-micro:      0.08em;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---- Radius ---- */
  --r-sm: 6px;   --r-md: 10px;  --r-lg: 14px;
  --r-xl: 20px;  --r-pill: 999px;

  /* ---- Motion ---- */
  --dur-fast:   0.12s;
  --dur-med:    0.2s;
  --dur-slow:   0.32s;
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layout ---- */
  --wrap-narrow: 640px;
  --wrap:        1120px;
  --wrap-wide:   1280px;
  --pad-x:       clamp(18px, 4vw, 32px);
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--fw-regular) var(--t-body)/var(--lh-body) var(--font-sans);
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* Focus rings — keyboard only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Layout wrappers ---- */
.wrap        { max-width: var(--wrap);        margin: 0 auto; padding: var(--s-8) var(--pad-x) var(--s-20); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: var(--s-8) var(--pad-x) var(--s-20); }
.wrap-wide   { max-width: var(--wrap-wide);   margin: 0 auto; padding: var(--s-8) var(--pad-x) var(--s-20); }

/* ---- Top nav (brand + pill nav) ---- */
.topbar {
  display: flex; align-items: center;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-12);
}
.topbar > .topnav         { flex: 0 1 auto; justify-content: flex-start; min-width: 0; }
.topbar > .topbar-search  { flex: 1 1 220px; margin-left: auto; }
.topbar > .topbar-actions { flex: 0 0 auto; }
@media (max-width: 900px) {
  .topbar { gap: var(--s-3); justify-content: space-between; }
  .topbar > .brand          { order: 1; }
  .topbar > .topbar-actions { order: 2; flex: 0 0 auto; }
  .topbar > .topbar-search  { order: 3; flex: 1 0 100%; margin-left: 0; }
  .topbar > .topnav         { order: 4; flex: 1 0 100%; justify-content: flex-start; }
}
.brand {
  font-weight: var(--fw-medium);
  font-size: 16px; letter-spacing: -0.01em;
  color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
}
.brand::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}
.brand:hover { color: var(--accent-hi); }

.topnav {
  display: flex; gap: 2px; flex-wrap: wrap;
  align-items: center;
}
.topnav a {
  display: inline-block;
  padding: 7px 11px;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  font-weight: var(--fw-medium);
  color: var(--dim);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.topnav a:hover { color: var(--ink); border-color: var(--edge-hi); }
.topnav a.on {
  color: var(--ink);
  border-color: var(--edge-hi);
  background: var(--bg-elev-2);
}

/* Right-side actions: cart + account. Rendered by PS.renderTopbar into every
   [data-topbar] on every page — no page can drift because there is no per-page
   copy of this markup. */
.topbar-actions {
  display: inline-flex; align-items: center; gap: var(--s-2);
}

.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 13px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  border: 0; cursor: pointer;
  font: var(--fw-semibold) 12px/1 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.cart-btn:hover { background: var(--accent-hi); }
.cart-btn .cart-icon {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.cart-btn .cart-icon svg { display: block; }
.cart-btn .cart-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--accent-ink); color: var(--accent);
  border-radius: var(--r-pill); font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0;
}
.cart-btn.is-empty {
  background: transparent; color: var(--ink);
  border: 1px solid var(--edge-hi);
}
.cart-btn.is-empty:hover { border-color: var(--dim); background: var(--bg-elev-1); }
.cart-btn.is-empty .cart-n { display: none; }

.account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-micro);
  font-weight: var(--fw-medium);
  color: var(--ink);
  border-radius: var(--r-pill);
  border: 1px solid var(--edge-hi);
  background: var(--bg-elev-1);
  text-decoration: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
}
.account-btn:hover { border-color: var(--dim); background: var(--bg-elev-2); }
.account-btn.signed-out {
  padding: 7px 14px;
  color: var(--dim);
  background: transparent;
  border-color: var(--edge);
}
.account-btn.signed-out:hover { color: var(--ink); border-color: var(--edge-hi); background: transparent; }
.account-btn .account-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
}
.account-btn .account-label { line-height: 1; }

/* ---- Topbar: More menu + search ---- */
/* 2026-09-19 redesign: primary nav collapses to Shop/Requests/Drops; the rest
   fold into a "More" dropdown. Search sits in the actions strip so cold ad
   traffic sees a shop, not a directory. */
.topnav-menu { position: relative; display: inline-flex; }
.topnav-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  font: inherit; font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: var(--ls-micro);
  font-weight: var(--fw-medium);
  color: var(--dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.topnav-menu-btn:hover { color: var(--ink); border-color: var(--edge-hi); }
.topnav-menu-btn[aria-expanded="true"] {
  color: var(--ink); border-color: var(--edge-hi); background: var(--bg-elev-2);
}
.topnav-menu-btn.on {
  color: var(--ink); border-color: var(--edge-hi); background: var(--bg-elev-2);
}
.topnav-menu-btn .chev { font-size: 9px; line-height: 1; margin-top: 1px; opacity: 0.8; }
.topnav-menu-panel {
  position: absolute; top: calc(100% + var(--s-2)); left: 0;
  z-index: 30;
  min-width: 180px;
  padding: var(--s-2);
  background: var(--bg-elev-1);
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 2px;
}
.topnav-menu-panel a {
  display: block;
  padding: 9px 12px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.topnav-menu-panel a:hover { color: var(--ink); background: var(--bg-elev-3); }

/* Topbar search — real affordance even before the search API ships. Enter
   routes to /?q=... which the shop page reads to filter. */
.topbar-search {
  position: relative;
  display: inline-flex; align-items: center;
  min-width: 220px; max-width: 320px; flex: 0 1 auto;
}
.topbar-search input[type="search"] {
  width: 100%;
  padding: 9px 12px 9px 32px;
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  -webkit-appearance: none; appearance: none;
}
.topbar-search input[type="search"]::placeholder { color: var(--dimmer); }
.topbar-search input[type="search"]:focus {
  border-color: var(--edge-focus);
  background: var(--bg-elev-2);
  outline: none;
}
.topbar-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--dim); font-size: 14px; line-height: 1; pointer-events: none;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
  .topbar-search { min-width: 0; max-width: none; }
}
@media (max-width: 620px) {
  .topnav-menu-panel { right: 0; left: auto; min-width: 200px; }
  .cart-btn .cart-label { display: none; }
  .account-btn .account-label { display: none; }
  .account-btn { padding: 6px; }
  .account-btn.signed-out { padding: 7px 12px; }
  .account-btn.signed-out .account-label { display: inline; }
}

/* ---- Type utilities ---- */
.eyebrow {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--accent);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-3);
}
.eyebrow.dim { color: var(--dimmer); }

.h-hero {
  font-size: clamp(40px, 5.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-4);
  color: var(--ink);
}
.h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-3);
}
.h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-3);
}
.h3 {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-2);
}
.section-label {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--dimmer);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--s-4);
}
.lede {
  color: var(--dim);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: 60ch;
}
.lede strong { color: var(--ink-2); font-weight: var(--fw-medium); }

.muted { color: var(--dim); }
.dimmer { color: var(--dimmer); }
.mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num    { font-variant-numeric: tabular-nums; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill); border: 0;
  font: var(--fw-semibold) 14px/1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform 0.06s;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hi); }
.btn.secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--edge-hi);
}
.btn.secondary:hover:not(:disabled) { border-color: var(--dim); background: var(--bg-elev-1); }
.btn.ghost {
  background: transparent; color: var(--dim);
  border: 1px solid var(--edge);
}
.btn.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--edge-hi); }
.btn.danger {
  background: transparent; color: var(--warn);
  border: 1px solid var(--warn-edge);
}
.btn.danger:hover:not(:disabled) { background: var(--warn-bg); }
.btn.sm { padding: 8px 14px; font-size: 12px; }
.btn.lg { padding: 15px 26px; font-size: 15px; }
.btn.block { display: flex; width: 100%; }

/* ---- Skeleton shimmer ----
   Global loading placeholder — .skeleton on any element renders a subtle
   left-to-right shimmer over the elevated bg color. Sized by the caller
   (see .checkout-skeleton or .shop-grid skeletons). Kept in the design
   system so every page shares one shimmer identity. */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elev-1) 0%, var(--bg-elev-2) 50%, var(--bg-elev-1) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ---- Cards ---- */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.card.tight { padding: var(--s-4); }
.card.roomy { padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) clamp(18px, 3vw, 28px); }
.card.interactive {
  transition: border-color var(--dur-fast), background var(--dur-fast), transform 0.06s;
  display: block; color: inherit;
}
.card.interactive:hover { border-color: var(--edge-hi); background: var(--bg-elev-2); }
.card.interactive:active { transform: translateY(1px); }

.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.card-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--edge);
  font-size: var(--t-small); color: var(--dim);
}

/* Elevated hero surface for big page-tops — richer gradient, hairline
   gold top accent, more air. Used on every page's landing surface: how-
   it-works, about, plus, requests, etc. Lifts them all in one edit. */
.surface {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(195,168,119,0.06) 0%, transparent 45%),
    linear-gradient(180deg, #17171b 0%, var(--bg-elev-1) 100%);
  border: 1px solid var(--edge);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4.5vw, 56px);
  overflow: hidden;
}
.surface::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.surface.text-center { text-align: center; }
.surface.text-center .lede { margin-left: auto; margin-right: auto; }

/* ---- Grid ---- */
.grid { display: grid; gap: var(--s-4); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-4);
}
@media (min-width: 720px) {
  .grid.auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); }
}
.grid.auto-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
@media (max-width: 640px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .grid.sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge.live     { background: var(--live-bg); color: var(--live); border: 1px solid var(--live-edge); }
.badge.sourcing { background: #251f14; color: var(--accent); border: 1px solid #3d3320; }
.badge.closed   { background: #25202a; color: #a08fb6; border: 1px solid #3f2f4a; }
.badge.warn     { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-edge); }
.badge.info     { background: rgba(168,196,232,0.06); color: var(--info); border: 1px solid rgba(168,196,232,0.2); }
.badge.mine     { background: var(--live-bg); color: var(--live); border: 1px solid var(--live-edge); }
.badge.plus     { background: #1e1a24; color: #c9a8ff; border: 1px solid #382a4a; }

/* ---- Form controls ---- */
.field { display: block; }
.field + .field { margin-top: var(--s-4); }
.field .label {
  display: block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--dimmer);
  font-weight: var(--fw-medium);
  margin-bottom: 6px;
}
.field .help {
  font-size: 12px; color: var(--dimmer); line-height: 1.5;
  margin-top: 6px;
}
.input, .textarea, .select {
  width: 100%;
  padding: 12px 14px;
  background: #0e0e11;
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  font: var(--fw-regular) var(--t-body)/1.4 var(--font-sans);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: #4a4a52; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  background: #111114;
  box-shadow: var(--sh-focus, 0 0 0 3px rgba(195,168,119,0.18));
}
.textarea { resize: vertical; min-height: 96px; line-height: var(--lh-body); }

.form-grid { display: grid; gap: var(--s-3); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; }
}

.form-msg {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--t-small);
  line-height: 1.5;
}
.form-msg.ok   { background: var(--live-bg); color: var(--live); border-color: var(--live-edge); }
.form-msg.err  { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-edge); }
.form-msg.info { background: rgba(168,196,232,0.06); color: var(--info); border-color: rgba(168,196,232,0.2); }

/* ---- Timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 90px 12px 1fr;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-small); line-height: 1.4;
  position: relative;
}
.timeline li + li::before {
  content: "";
  position: absolute;
  top: -8px; bottom: 50%;
  left: 95px; width: 1px;
  background: var(--edge);
}
.timeline .stamp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--dimmer);
  font-size: 12px;
  padding-top: 4px;
}
.timeline .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dimmest);
  margin-top: 5px; justify-self: center;
  z-index: 1;
}
.timeline li.done .dot     { background: var(--accent-lo); }
.timeline li.current .dot  { background: var(--live); box-shadow: 0 0 0 4px rgba(126,224,160,0.18); }
.timeline .label { color: var(--dim); padding-top: 3px; }
.timeline li.done .label    { color: var(--ink-2); }
.timeline li.current .label { color: var(--ink); font-weight: var(--fw-medium); }

/* ---- Progress bar (steppy) ---- */
.progress {
  display: flex; gap: 3px;
  height: 6px; overflow: hidden;
  border-radius: 3px;
}
.progress .step {
  flex: 1 1 0;
  background: #25252b;
  border-radius: 2px;
  transition: background var(--dur-med);
}
.progress .step.done    { background: var(--accent-lo); }
.progress .step.current { background: var(--live); box-shadow: 0 0 8px rgba(126,224,160,0.35); }

/* ---- Stat rows ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  padding: var(--s-4) var(--s-4);
  background: var(--bg-elev-1);
  text-align: center;
}
.stat .n {
  display: block;
  font-size: 24px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat .l {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--dimmer);
  margin-top: 4px;
  font-weight: var(--fw-medium);
}

/* ---- Empty & error states ---- */
.empty, .err, .loading {
  padding: var(--s-8) var(--s-6);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: var(--t-small);
  line-height: 1.6;
}
.empty   { background: var(--bg-elev-1); border: 1px dashed var(--edge); color: var(--dim); }
.err     { background: var(--warn-bg); border: 1px solid var(--warn-edge); color: var(--warn); }
.loading { background: var(--bg-elev-1); border: 1px solid var(--edge); color: var(--dim); }

/* Structured loading skeletons — use instead of text-only "Loading..." for
   any list that will resolve into cards. Keeps first paint visually anchored. */
@keyframes ps-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, #16161a 0%, #1c1c22 50%, #16161a 100%);
  background-size: 800px 100%;
  animation: ps-shimmer 1.4s linear infinite;
}
.skeleton-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.skeleton-card {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elev-1);
}
.skeleton-photo { width: 100%; aspect-ratio: 1 / 1; }
.skeleton-lines { padding: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.skeleton-line { height: 12px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

/* ---- Utility ---- */
.stack        { display: flex; flex-direction: column; }
.row          { display: flex; align-items: center; }
.row.between  { justify-content: space-between; }
.row.gap-2    { gap: var(--s-2); }
.row.gap-3    { gap: var(--s-3); }
.row.gap-4    { gap: var(--s-4); }
.row.wrap     { flex-wrap: wrap; }
.stack.gap-1  { gap: var(--s-1); }
.stack.gap-2  { gap: var(--s-2); }
.stack.gap-3  { gap: var(--s-3); }
.stack.gap-4  { gap: var(--s-4); }
.stack.gap-6  { gap: var(--s-6); }

/* Atomic utilities. Added 2026-09-18 for D6 CSP unsafe-inline drop — every
   inline style=""" that decomposed cleanly into single-property declarations
   uses these instead of a per-page class. Kept alphabetical by group. */
.m-0             { margin: 0; }
.mt-0            { margin-top: 0; }
.mt-2            { margin-top: var(--s-2); }
.mt-3            { margin-top: var(--s-3); }
.mt-4            { margin-top: var(--s-4); }
.mt-6            { margin-top: var(--s-6); }
.mt-8            { margin-top: var(--s-8); }
.mb-0            { margin-bottom: 0; }
.mb-2            { margin-bottom: var(--s-2); }
.mb-3            { margin-bottom: var(--s-3); }
.mb-4            { margin-bottom: var(--s-4); }
.mb-6            { margin-bottom: var(--s-6); }
.mb-8            { margin-bottom: var(--s-8); }
.mb-6px          { margin-bottom: 6px; }
.ml-8px          { margin-left: 8px; }

.fs-11           { font-size: 11px; }
.fs-12           { font-size: 12px; }
.fs-12-5         { font-size: 12.5px; }
.fs-13           { font-size: 13px; }
.fs-13-5         { font-size: 13.5px; }
.fs-14           { font-size: 14px; }
.fs-15           { font-size: 15px; }
.fs-16           { font-size: 16px; }
.fs-18           { font-size: 18px; }
.fs-20           { font-size: 20px; }

.fw-medium       { font-weight: var(--fw-medium); }
.fw-semibold     { font-weight: var(--fw-semibold); }
.font-mono       { font-family: var(--font-mono); }

.color-accent    { color: var(--accent); }
.color-ink       { color: var(--ink); }
.color-live      { color: var(--live); }
.color-red       { color: var(--red); }
.color-warn      { color: var(--warn); }
.color-dim       { color: var(--dim); }
.color-dimmer    { color: var(--dimmer); }
.color-inherit   { color: inherit; }

.items-center    { align-items: center; }
.items-baseline  { align-items: baseline; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.inline-block    { display: inline-block; }
.display-block   { display: block; }
.display-none    { display: none; }
.display-flex    { display: flex; }
.flex-basis-full { flex-basis: 100%; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.cursor-pointer  { cursor: pointer; }

.uppercase       { text-transform: uppercase; }
.tracking-wide   { letter-spacing: 0.08em; }
.no-underline    { text-decoration: none; }
.ws-pre          { white-space: pre-wrap; }
.ws-nowrap       { white-space: nowrap; }
.list-none       { list-style: none; }
.lh-15           { line-height: 1.5; }
.minh-12em       { min-height: 1.2em; }

.maxw-720        { max-width: 720px; }
.maxw-16ch       { max-width: 16ch; }
.maxw-85p        { max-width: 85%; }

/* Additional atoms added 2026-09-18 for D6c JS-inline-style rewrite. */
.fs-24           { font-size: 24px; }
.fw-500          { font-weight: 500; }
.fw-600          { font-weight: 600; }
.mt-1            { margin-top: var(--s-1); }
.mb-1            { margin-bottom: var(--s-1); }
.mt-2px          { margin-top: 2px; }
.mt-3px          { margin-top: 3px; }
.mt-4px          { margin-top: 4px; }
.mt-6px          { margin-top: 6px; }
.mr-6px          { margin-right: 6px; }
.pt-3            { padding-top: var(--s-3); }
.pt-4            { padding-top: var(--s-4); }
.p-3-4           { padding: var(--s-3) var(--s-4); }
.py-6px          { padding: 6px 0; }
.bt-edge         { border-top: 1px solid var(--edge); }
.bb-edge         { border-bottom: 1px solid var(--edge); }
.flex-col        { flex-direction: column; }
.flex-auto       { flex: 1 1 auto; }
.flex-none       { flex: 0 0 auto; }
.flex-shrink-0   { flex-shrink: 0; }
.minw-0          { min-width: 0; }
.minw-260        { min-width: 260px; }
.tabular         { font-variant-numeric: tabular-nums; }
.capitalize      { text-transform: capitalize; }
.color-ink-2     { color: var(--ink-2); }
.color-edge-hi   { color: var(--edge-hi); }
.underline       { text-decoration: underline; }
.lh-14           { line-height: 1.4; }
.lh-155          { line-height: 1.55; }
.lh-16           { line-height: 1.6; }
.g-1             { gap: var(--s-1); }
.g-2             { gap: var(--s-2); }
.g-3             { gap: var(--s-3); }
.g-4             { gap: var(--s-4); }
.gap-8px         { gap: 8px; }

/* Cookie consent banner — hoisted out of plugsheet.js's inline el.style.cssText +
   innerHTML template so a locked-down style-src doesn't kill the banner. Hardcoded
   colors (not design tokens) intentional — this banner needs to work before the
   theme system is anything the user has personalized. */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: #111; color: #fff; padding: 16px 20px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
  display: flex; gap: 16px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.cookie-banner__content { flex: 1; min-width: 260px; }
.cookie-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banner__link { color: #fff; text-decoration: underline; }
.cookie-banner__btn { padding: 8px 14px; border-radius: 6px; font: inherit; cursor: pointer; }
.cookie-banner__btn--deny { background: transparent; color: #fff; border: 1px solid #888; }
.cookie-banner__btn--accept { background: #fff; color: #111; border: none; font-weight: 600; }
/* D-2026-09-21-25 US-permissive slim variant: shorter padding, smaller font, less visual weight. */
.cookie-banner--slim { padding: 8px 16px; font-size: 12.5px; line-height: 1.4; }
.cookie-banner--slim .cookie-banner__btn { padding: 5px 12px; font-size: 12.5px; }

/* 2026-09-22 free-shipping promo bar: above-the-fold conversion lever. Slim
   dark strip pinned to the very top. Dismissible per-browser. Non-blocking. */
.promo-bar {
  position: relative; z-index: 100;
  background: #111; color: #fff; padding: 8px 16px;
  font: 12.5px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  display: flex; gap: 12px; align-items: center; justify-content: center;
  text-align: center;
}
.promo-bar__content { flex: 1; }
.promo-bar__accent { font-weight: 600; }
.promo-bar__dismiss {
  background: transparent; color: #fff; border: none; font-size: 18px;
  line-height: 1; padding: 0 4px; cursor: pointer; opacity: 0.7;
}
.promo-bar__dismiss:hover { opacity: 1; }

/* D6c helpers for CSSOM → classList refactor. Strict style-src blocks
   element.style.X = ... at runtime, so form-status color swaps + interaction
   toggles now live as class flips. */
.color-danger { color: var(--danger); }
.no-events { pointer-events: none; }
.no-select { user-select: none; }
.fs-26 { font-size: 26px; }

.section      { margin-top: var(--s-12); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.section-head .count {
  font-size: var(--t-small); color: var(--dim);
  font-variant-numeric: tabular-nums;
}

hr.rule { border: 0; height: 1px; background: var(--edge); margin: var(--s-8) 0; }

/* ---- Footer ---- */
.footer {
  margin-top: var(--s-20);
  padding-top: var(--s-6);
  border-top: 1px solid var(--edge);
  font-size: 12px; color: var(--dimmer);
  display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: space-between;
}
.footer a { color: var(--dim); }
.footer a:hover { color: var(--ink); }