/* ============================================================================
   THE CODEX — application stylesheet
   ----------------------------------------------------------------------------
   One file, no build step. Built on the Nocturne design system: every color,
   size, radius and shadow comes from the tokens in :root. Never hard-code a
   hex or a px value a token already carries.

   Sections
     1. Tokens
     2. Base + type
     3. Design-system components  (.btn .input .tag .card .table .hr .dialog)
     4. Application layer         (shell, card list, cart, sheets, ads, states)
     5. Responsive                (<= 720px: rail becomes a tab bar)
   ==========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100:#f3f5fe; --color-neutral-200:#e4e7f5; --color-neutral-300:#cfd3e5;
  --color-neutral-400:#b2b6ca; --color-neutral-500:#9397ab; --color-neutral-600:#75798c;
  --color-neutral-700:#595d6c; --color-neutral-800:#3f424d; --color-neutral-900:#292b31;

  --color-accent-100:#f5f4ff; --color-accent-200:#e7e5fe; --color-accent-300:#d2cefd;
  --color-accent-400:#b5abfc; --color-accent-500:#968ae0; --color-accent-600:#796cbf;
  --color-accent-700:#5d5294; --color-accent-800:#423a6a; --color-accent-900:#2b2741;

  /* Saturated field — the landing stat band only. Never interface chrome. */
  --color-section: #262a60;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --font-heading-weight: 500;

  --space-1:2.8px; --space-2:5.6px; --space-3:8.4px;
  --space-4:11.2px; --space-6:16.8px; --space-8:22.4px;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,.65);

  /* App metrics */
  --rail-w: 176px;
  --dock-w: 208px;
  --wrap: 1180px;
  --touch: 44px;
}

/* ── 2. Base + type ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html { background: var(--color-bg); }
body {
  margin:0; min-height:100vh;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size:15px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height:1.12; letter-spacing:-.015em; margin:0 0 var(--space-2);
}
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px}
h4{font-size:20px} h5{font-size:16px}
h6{font-size:13px; letter-spacing:.08em; text-transform:uppercase}
p{margin:0 0 var(--space-3)}
a{color:var(--color-accent); text-decoration:none; text-underline-offset:3px}
a:hover{color:var(--color-accent-400); text-decoration:underline}
img{display:block; max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}

.muted{color:var(--color-neutral-400)}
.mono{font-family:var(--font-mono)}
.kicker{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-accent-300);
}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--space-8)}
.stack{display:flex; flex-direction:column; gap:var(--space-3)}
.row{display:flex; align-items:center; gap:var(--space-3)}
.spacer{margin-left:auto}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Fading rule — a Nocturne signature. Freestanding rules fade at the ends. */
.hr{
  height:1px; border:0; margin:var(--space-4) 0;
  background:linear-gradient(to right, transparent,
    var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}

/* ── 3. Design-system components ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none;
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:14px; line-height:1.2; color:var(--color-text);
  background:transparent; border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3)*1.2); border-radius:var(--radius-md);
  min-height:36px;
}
.btn:hover{text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.btn-primary{color:var(--color-accent); border-color:var(--color-accent)}
.btn-primary:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent); color:var(--color-accent)}
.btn-primary:active{background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent); color:var(--color-text)}
.btn-secondary:active{background:color-mix(in srgb,var(--color-text) 14%,transparent)}
.btn-ghost{color:var(--color-accent); padding-inline:var(--space-1)}
.btn-ghost:hover{background:color-mix(in srgb,var(--color-accent) 10%,transparent)}
.btn-icon{width:36px; height:36px; padding:0}
.btn-block{width:100%}
.btn-sm{min-height:28px; font-size:12px; padding:var(--space-1) var(--space-3)}
/* PRO-locked action: readable, obviously gated, not hidden. */
.btn-pro{border-color:var(--color-accent-800); color:var(--color-accent-300)}
.btn-pro::after{content:"PRO"; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; opacity:.8}

.field > label{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-neutral-500); margin-bottom:5px;
}
.input{
  width:100%; min-height:40px; padding:8px 11px; font:inherit; font-size:14px;
  color:var(--color-text); caret-color:var(--color-accent);
  background:var(--color-surface);
  border:1px solid var(--color-divider); border-radius:var(--radius-md);
}
.input::placeholder{color:var(--color-neutral-600)}
.input:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
.input:focus-visible{border-color:var(--color-accent); outline-offset:0}
.field-hint{font-size:11px; color:var(--color-neutral-500); margin-top:4px}

.tag{
  display:inline-flex; align-items:center; font-size:11px; letter-spacing:.02em;
  padding:3px 10px; border-radius:calc(var(--radius-md)*.75); white-space:nowrap;
}
.tag-accent{background:var(--color-accent-800); color:var(--color-accent-100)}
.tag-neutral{background:var(--color-neutral-900); color:var(--color-neutral-300)}
.tag-outline{border:1px solid var(--color-accent); color:var(--color-accent)}

.card{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-3); border-radius:var(--radius-md); background:var(--color-surface);
}
.card-kicker{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent)}
.card-title{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:17px; line-height:1.2}
.card-body{margin:0; font-size:13px; opacity:.8}
.elev-sm{box-shadow:var(--shadow-sm)}
.elev-md{box-shadow:var(--shadow-md)}
.elev-lg{box-shadow:var(--shadow-lg)}

.table{width:100%; border-collapse:collapse; font-size:14px}
.table th{
  text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-neutral-500);
  padding:var(--space-2); border-bottom:1px solid transparent; white-space:nowrap;
}
.table td{padding:var(--space-2); border-bottom:1px solid transparent}
.table thead tr{
  background:linear-gradient(to right,transparent,var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px),transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr{
  background:linear-gradient(to right,transparent,
    color-mix(in srgb,var(--color-text) 8%,transparent) 48px,
    color-mix(in srgb,var(--color-text) 8%,transparent) calc(100% - 48px),transparent)
    no-repeat bottom / 100% 1px;
}
.table tbody tr:hover{
  background:
    linear-gradient(color-mix(in srgb,var(--color-text) 4%,transparent),
                    color-mix(in srgb,var(--color-text) 4%,transparent)) no-repeat 0 0/100% 100%,
    linear-gradient(to right,transparent,
      color-mix(in srgb,var(--color-text) 8%,transparent) 48px,
      color-mix(in srgb,var(--color-text) 8%,transparent) calc(100% - 48px),transparent)
      no-repeat bottom / 100% 1px;
}
.table-num{text-align:right; font-family:var(--font-mono); font-size:12px}

.dialog-backdrop{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--space-4);
  background:color-mix(in srgb,var(--color-neutral-900) 50%,transparent);
}
.dialog{
  width:min(440px,100%); display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-4); border-radius:var(--radius-lg);
  background:var(--color-surface); box-shadow:var(--shadow-lg);
}
.dialog-title{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:20px}
.dialog-actions{display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-2)}

/* ══ 4. APPLICATION LAYER ═══════════════════════════════════════════════ */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.app{display:flex; min-height:100vh; align-items:stretch}
.main{flex:1; min-width:0; display:flex; flex-direction:column}

.rail{
  width:var(--rail-w); flex:none; display:flex; flex-direction:column;
  gap:var(--space-1); padding:var(--space-4) var(--space-3);
  background:var(--color-neutral-900);
}
.rail-brand{
  display:flex; align-items:center; gap:8px; margin-bottom:var(--space-4);
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:14px; color:var(--color-text); text-decoration:none;
}
.rail-brand:hover{text-decoration:none; color:var(--color-text)}
.rail-mark{width:16px; height:16px; flex:none; border-radius:var(--radius-sm); border:1px solid var(--color-accent)}
.rail-group{display:flex; flex-direction:column; gap:2px; margin-bottom:var(--space-4)}
.rail-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
  color:var(--color-neutral-600); padding:0 6px 4px;
}
.rail-link{
  font-size:12px; padding:5px 6px; border-radius:var(--radius-sm);
  color:var(--color-neutral-300); text-decoration:none;
}
.rail-link:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent); color:var(--color-text); text-decoration:none}
.rail-link[aria-current="page"]{color:var(--color-accent); background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:var(--space-2)}

.topbar{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
}
.topbar-rule{
  height:1px;
  background:linear-gradient(to right,transparent,var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px),transparent);
}
.qbar{
  flex:1; min-width:0; min-height:34px; display:flex; align-items:center;
  padding:0 11px; font-family:var(--font-mono); font-size:12px;
  color:var(--color-neutral-500); background:var(--color-surface);
  border:1px solid var(--color-accent); border-radius:var(--radius-md);
  cursor:text;
}
.qbar kbd{
  margin-left:auto; font-family:var(--font-mono); font-size:10px;
  color:var(--color-neutral-600); border:1px solid var(--color-divider);
  border-radius:var(--radius-sm); padding:1px 5px;
}
.page{padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-6)}
.page-head{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
.page-head h1,.page-head h2{margin:0}
.with-dock{display:flex; gap:var(--space-6); align-items:flex-start}
.with-dock > .col-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-6)}
.dock{width:var(--dock-w); flex:none; display:flex; flex-direction:column; gap:var(--space-4)}

/* Public / marketing chrome */
.nav{display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-8)}
.nav-brand{
  display:flex; align-items:center; gap:8px; margin-right:auto;
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:18px; color:var(--color-text); text-decoration:none;
}
.nav a{color:inherit; text-decoration:none; font-size:14px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--color-accent); text-decoration:none}
.site-foot{padding:var(--space-8) 0 var(--space-6)}
.foot-cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--space-8) var(--space-6)}
.foot-col{display:flex; flex-direction:column; gap:7px}
.foot-col h6{margin:0; color:var(--color-neutral-500)}
.foot-col a{font-size:12.5px; color:var(--color-neutral-300)}
.foot-note{font-size:11.5px; color:var(--color-neutral-500); max-width:32ch; line-height:1.5}

/* ── Verdict block — the report header ─────────────────────────────────── */
.verdict{display:flex; gap:var(--space-4); align-items:flex-start}
.verdict-art{width:104px; aspect-ratio:.72; flex:none; border-radius:var(--radius-sm); background:var(--color-neutral-900)}
.verdict-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-2)}
.verdict-title{font-size:27px; margin:0}
.verdict-facts{display:flex; flex-wrap:wrap; gap:6px}
.meter-row{display:flex; align-items:center; gap:var(--space-3)}
.meter{flex:1; max-width:260px; height:6px; border-radius:3px; background:var(--color-neutral-800); overflow:hidden}
.meter-fill{height:100%; background:var(--color-accent)}
.meter-label{font-family:var(--font-mono); font-size:11px; color:var(--color-neutral-300)}
.big-figure{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:22px; letter-spacing:-.015em}

/* ── Card list — THE shared component ──────────────────────────────────────
   Used by the commander report, the deck editor and the public deck page.
   Identical markup in all three so ownership never disappears between them.  */
.clist{display:flex; flex-direction:column; gap:var(--space-4)}
.clist-2col{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-6)}
.cgroup{display:flex; flex-direction:column; gap:4px}
.cgroup-head{
  display:flex; align-items:baseline; gap:8px;
  padding-bottom:5px; border-bottom:1px solid var(--color-divider);
}
.cgroup-name{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:13px}
.cgroup-meta{font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-500)}
.cgroup-gap{margin-left:auto; font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-500)}

.crow{
  display:grid; grid-template-columns:14px 1fr 78px 56px 14px;
  gap:var(--space-3); align-items:center;
  padding:3px 0; border-bottom:1px solid color-mix(in srgb,var(--color-text) 6%,transparent);
  background:none; border-left:0; border-right:0; border-top:0;
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
}
.crow:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}
.crow[aria-expanded="true"]{background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.crow-name{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crow-state{font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-500)}
.crow-price{font-family:var(--font-mono); font-size:11px; color:var(--color-neutral-300); text-align:right}
.crow-chev{font-family:var(--font-mono); font-size:13px; color:var(--color-neutral-600); text-align:center}
.crow-handle{font-family:var(--font-mono); font-size:11px; color:var(--color-neutral-600); cursor:grab}
.crow.is-dragging{opacity:.4}

/* Ownership glyph. One column, three states — this is what lets 99 rows read. */
.mark{font-family:var(--font-mono); font-size:11px; text-align:center; line-height:1}
.mark[data-state="owned"]{color:var(--color-neutral-300)}
.mark[data-state="owned"]::before{content:"\25CF"}
.mark[data-state="missing"]{color:var(--color-neutral-600)}
.mark[data-state="missing"]::before{content:"\25CB"}
.mark[data-state="sub"]{color:var(--color-accent-300)}
.mark[data-state="sub"]::before{content:"\25D0"}

/* Price that could not be refreshed. Never hard-fail on price data. */
.price-stale::before{content:"~"; color:var(--color-neutral-600)}
.price-none{color:var(--color-neutral-600)}

/* ── Cart panel — the revenue surface ──────────────────────────────────── */
.cart{
  display:flex; flex-direction:column; gap:8px; padding:var(--space-3);
  border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-md);
}
.cart-row{display:flex; align-items:baseline; gap:6px; font-family:var(--font-mono); font-size:11px}
.cart-row .v-name{flex:1; color:var(--color-neutral-300)}
.cart-row .v-count{color:var(--color-neutral-500)}
.cart-total{display:flex; align-items:baseline; gap:6px}
.cart-total .t-label{flex:1; font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-500)}
.cart-total .t-sum{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:18px}
.affiliate-note{font-family:var(--font-mono); font-size:9px; line-height:1.4; color:var(--color-neutral-600)}

/* ── Card detail: hover popover (pointer) + bottom sheet (touch) ──────────
   ONE partial, two presentations. Never hover-only: half of all sessions
   are touch, and a hover-only feature reads as a bug on a phone.           */
.cd{display:flex; gap:var(--space-3); padding:var(--space-3)}
.cd-art{width:74px; aspect-ratio:.72; flex:none; border-radius:var(--radius-sm); background:var(--color-neutral-900)}
.cd-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.cd-name{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:14px}
.cd-why{font-size:11px; line-height:1.45; color:var(--color-neutral-400)}
.cd-subs{display:flex; flex-direction:column}
.cd-sub{
  display:flex; align-items:center; gap:var(--space-3); min-height:var(--touch);
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 6%,transparent);
}
.cd-sub .s-name{flex:1; min-width:0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-sub .s-fit{font-family:var(--font-mono); font-size:9.5px; color:var(--color-neutral-500)}

.popover{
  position:absolute; z-index:40; width:320px;
  border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-lg);
}
.popover[hidden]{display:none}

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  border-radius:18px 18px 0 0; background:var(--color-surface); box-shadow:var(--shadow-lg);
  transform:translateY(100%); transition:transform .22s ease;
  max-height:86vh; overflow:auto; padding-bottom:env(safe-area-inset-bottom);
}
.sheet.is-open{transform:translateY(0)}
.sheet-grab{width:34px; height:4px; margin:8px auto 2px; border-radius:2px; background:var(--color-neutral-700)}
.sheet-backdrop{
  position:fixed; inset:0; z-index:65;
  background:color-mix(in srgb,var(--color-neutral-900) 55%,transparent);
}
.sheet-backdrop[hidden],.sheet[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .sheet{transition:none} }

/* ── Commercial slots — fixed, never inside a card list ────────────────── */
.adslot{
  display:grid; place-items:center; text-align:center;
  border:1px dashed var(--color-divider); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:10px; line-height:1.4; color:var(--color-neutral-600);
}
.adslot-rail{width:100%; height:250px}
.adslot-leader{width:100%; height:90px; margin-top:var(--space-6)}
.adslot-mobile{width:100%; height:100px}
.is-pro .adslot{display:none}
.sponsor{
  display:flex; flex-direction:column; gap:5px; padding:var(--space-3);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}
.sponsor-label{font-family:var(--font-mono); font-size:9px; letter-spacing:.09em; color:var(--color-neutral-500)}

/* ── States ────────────────────────────────────────────────────────────── */
.empty{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-8) var(--space-6); border-radius:var(--radius-md);
  background:var(--color-surface); box-shadow:var(--shadow-sm);
}
.empty h3{font-size:16px; margin:0; max-width:24ch}
.empty p{margin:0; font-size:12px; line-height:1.5; color:var(--color-neutral-400); max-width:44ch}
.empty-actions{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-2); flex-wrap:wrap}

.skel-line{height:9px; border-radius:3px; background:var(--color-neutral-800)}
.skel-art{width:32px; height:44px; border-radius:var(--radius-sm); background:var(--color-neutral-800)}
@media (prefers-reduced-motion:no-preference){
  .skel-line,.skel-art{animation:skel 1.4s ease-in-out infinite}
  @keyframes skel{0%,100%{opacity:.55} 50%{opacity:.9}}
}
.banner{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); font-size:12px;
}
.banner .b-meta{font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-500)}
.errpage{display:flex; align-items:center; gap:var(--space-6); padding:var(--space-8) 0}
.errcode{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:48px; color:var(--color-neutral-700); letter-spacing:-.02em}

/* ── Progress (import) ─────────────────────────────────────────────────── */
.bar{height:6px; border-radius:3px; background:var(--color-neutral-800); overflow:hidden}
.bar-fill{height:100%; background:var(--color-accent)}
.tally{display:flex; gap:var(--space-2)}
.tally-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--space-3) var(--space-2); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
}
.tally-n{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:17px}
.tally-l{font-family:var(--font-mono); font-size:9px; color:var(--color-neutral-500)}
.tally-item.is-attention{box-shadow:0 0 0 1px var(--color-accent-700)}
.tally-item.is-attention .tally-n{color:var(--color-accent-300)}

/* ── Filters / chips ───────────────────────────────────────────────────── */
.chipbar{display:flex; flex-wrap:wrap; gap:6px}
.filters{width:160px; flex:none; display:flex; flex-direction:column; gap:var(--space-4)}
.filter-group{display:flex; flex-direction:column; gap:5px}
.filter-group h6{margin:0; color:var(--color-neutral-500)}
.check{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--color-neutral-300); min-height:26px; cursor:pointer}
.check input{accent-color:var(--color-accent)}

/* ── Pricing tiers ─────────────────────────────────────────────────────── */
.tiers{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.tier{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4);
  border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-sm)}
.tier-price{display:flex; align-items:baseline; gap:5px}
.tier-price .n{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:26px; letter-spacing:-.015em}
.tier-price .per{font-size:11px; color:var(--color-neutral-500)}
.tier-lines{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
.tier-lines li{display:grid; grid-template-columns:14px 1fr; gap:7px; align-items:baseline; font-size:12px; line-height:1.4; color:var(--color-neutral-300)}
.tier-lines .m{font-family:var(--font-mono); font-size:10px; color:var(--color-neutral-500)}
.tier .btn{margin-top:auto}

/* ── Landing ───────────────────────────────────────────────────────────── */
.hero{display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; padding:var(--space-8) 0}
.hero h1{max-width:22ch; margin:0}
.hero p{max-width:54ch; font-size:14px; color:var(--color-neutral-400)}
/* The single saturated field in the whole product. Nocturne: presence at page scale. */
.statband{background:var(--color-section); padding:var(--space-6) 0}
.statband-inner{display:flex; justify-content:space-between; gap:var(--space-8); flex-wrap:wrap}
.stat{display:flex; flex-direction:column; gap:2px}
.stat-n{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:27px; letter-spacing:-.015em}
.stat-l{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--color-accent-200)}
.featgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4)}

/* Auth */
.auth{width:min(420px,100%); margin:0 auto; padding:var(--space-8) var(--space-6); display:flex; flex-direction:column; gap:var(--space-4)}
.auth-alt{display:flex; align-items:center; gap:var(--space-3); margin:var(--space-1) 0}
.auth-alt::before,.auth-alt::after{content:""; flex:1; height:1px; background:var(--color-divider)}
.auth-alt span{font-family:var(--font-mono); font-size:9px; color:var(--color-neutral-600)}

/* Settings */
.settings{display:flex; align-items:stretch; min-height:60vh}
.settings-nav{width:150px; flex:none; padding:var(--space-4) var(--space-3); background:var(--color-neutral-900); display:flex; flex-direction:column; gap:3px}
.settings-body{flex:1; min-width:0; padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-8)}
.sortable-row{
  display:flex; align-items:center; gap:var(--space-3); min-height:var(--touch);
  padding:0 10px; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
}

/* Mobile tab bar — hidden on desktop, replaces the rail on small screens */
.tabbar{display:none}

/* ── 5. Responsive ─────────────────────────────────────────────────────── */
@media (max-width:720px){
  .rail{display:none}
  .dock{display:none}
  .with-dock{display:block}
  .clist-2col,.tiers,.featgrid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .page{padding:var(--space-4) var(--space-4) 76px}
  .verdict-art{width:56px}
  .verdict-title{font-size:19px}
  h1{font-size:28px} h2{font-size:23px} h3{font-size:19px}

  /* Touch-primary: every row is a target, ownership and price stay visible. */
  .crow{grid-template-columns:14px 1fr 60px 14px; min-height:46px; padding:6px 0}
  .crow-state{display:none}
  .crow-handle{display:none}
  .btn{min-height:var(--touch)}
  .btn-sm{min-height:36px}
  .settings{display:block}
  .settings-nav{width:auto; flex-direction:row; overflow-x:auto}
  .filters{width:auto}

  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    border-top:1px solid var(--color-divider); background:var(--color-neutral-900);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar a{
    flex:1; min-height:52px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    font-family:var(--font-mono); font-size:9px; color:var(--color-neutral-400); text-decoration:none;
  }
  .tabbar a[aria-current="page"]{color:var(--color-accent)}
}
/* Hover affordances only where a real pointer exists. */
@media (hover:none){ .popover{display:none !important} }

@media print{
  .rail,.dock,.tabbar,.adslot,.sponsor,.topbar{display:none}
  body{background:#fff; color:#000}
}