/* ============================================================
   app.css — global stylesheet for the client portal
   Loaded after tokens.css. Owns reset + layout primitives
   + component classes that every screen reuses.
   ============================================================ */

/* ---------- reset (modern, light-touch) ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--paper);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ---------- typography primitives ---------- */
.serif    { font-family: var(--font-display); font-feature-settings: "ss01" on; letter-spacing: var(--tracking-tight); }
.mono     { font-family: var(--font-mono);    font-feature-settings: "tnum" on, "zero" on; }
.tnum     { font-feature-settings: "tnum" on, "zero" on; }
.eyebrow  { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--t-xs); color: var(--text-mute); font-weight: 500; }
.subtle   { color: var(--text-soft); }
.mute     { color: var(--text-mute); }

h1.page   { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--ink-950); }
@media (min-width: 900px) { h1.page { font-size: var(--t-3xl); } }
h2.section { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--ink-900); }
h3.card   { font-size: var(--t-md); font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; }

/* ---------- layout shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100dvh;
}
@media (min-width: 900px) {
  .shell { grid-template-columns: var(--rail-w) 1fr; }
}

/* desktop left rail */
.rail {
  display: none;
  border-right: 1px solid var(--rule);
  padding: var(--s-6) var(--s-4);
  background: var(--paper);
  position: sticky; top: 0; height: 100dvh;
}
@media (min-width: 900px) { .rail { display: flex; flex-direction: column; gap: var(--s-6); } }

.rail-brand {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s-2) var(--s-2);
}
.rail-brand .mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--ink-950);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 16px; line-height: 1;
}
.rail-brand .name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  color: var(--ink-950);
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--text-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail-nav a:hover { background: var(--paper-sunk); color: var(--ink-900); }
.rail-nav a[aria-current="page"] {
  background: var(--paper-sunk);
  color: var(--ink-950);
  font-weight: 500;
}
.rail-nav .ico {
  width: 16px; height: 16px;
  color: var(--text-mute);
  flex-shrink: 0;
}
.rail-nav a[aria-current="page"] .ico { color: var(--accent); }
.rail-section {
  margin-top: auto;
  padding: var(--s-3);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
}
.rail-section .avatar {
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--accent-200); color: var(--accent-800);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.rail-section .who { font-size: var(--t-sm); }
.rail-section .who small { display:block; color: var(--text-mute); font-size: 11px; }

/* mobile top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.topbar .brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  color: var(--ink-950);
}
.topbar .brand .mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--ink-950); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 13px;
}
.topbar .right { display: flex; align-items: center; gap: 14px; }
.topbar .right .avatar {
  width: 28px; height: 28px; border-radius: var(--r-full);
  background: var(--accent-200); color: var(--accent-800);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
@media (min-width: 900px) { .topbar { display: none; } }

/* mobile bottom tabs */
.tabs {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px;
  font-size: 11px; color: var(--text-mute);
}
.tabs a .ico { width: 18px; height: 18px; }
.tabs a[aria-current="page"] { color: var(--ink-950); }
.tabs a[aria-current="page"] .ico { color: var(--accent); }
@media (min-width: 900px) { .tabs { display: none; } }

/* main column */
.main {
  padding: var(--s-6) var(--s-5);
  padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .main { padding: var(--s-10) var(--s-12); }
}
.col {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.col.wide { max-width: var(--content-wide); }

/* ---------- page header pattern ---------- */
.page-head {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-8);
}
.page-head .meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-soft); font-size: var(--t-sm);
}
.page-head .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }

/* ---------- card / surface ---------- */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.card-quiet {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

/* hairline list — the workhorse */
.hl-list { display: flex; flex-direction: column; }
.hl-list > * { padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.hl-list > *:first-child { border-top: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--ink-950); color: var(--paper); }
.btn-primary:hover { background: var(--ink-800); }
.btn-secondary {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  color: var(--ink-900);
}
.btn-secondary:hover { background: var(--paper-sunk); }
.btn-ghost { color: var(--text-soft); }
.btn-ghost:hover { color: var(--ink-900); background: var(--paper-sunk); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-700); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--t-xs); }
.btn-lg { height: 44px; padding: 0 18px; font-size: var(--t-base); }

/* ---------- inputs ---------- */
.input, .textarea {
  width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--t-base);
  color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-100);
}
.textarea { min-height: 100px; line-height: var(--lh-normal); resize: vertical; }

/* ---------- status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.pill-planned   { background: var(--ink-100); color: var(--ink-700); }
.pill-progress  { background: var(--accent-100); color: var(--accent-800); }
.pill-shipped   { background: var(--ok-bg); color: var(--ok-fg); }
.pill-paid      { background: var(--ok-bg); color: var(--ok-fg); }
.pill-due       { background: var(--paper-sunk); color: var(--ink-700); }
.pill-overdue   { background: var(--danger-bg); color: var(--danger-fg); }
.pill-open      { background: var(--accent-100); color: var(--accent-800); }
.pill-reviewing { background: var(--warn-bg); color: var(--warn-fg); }
.pill-resolved  { background: var(--ok-bg); color: var(--ok-fg); }

/* ---------- progress ---------- */
.bar { height: 6px; background: var(--paper-sunk); border-radius: var(--r-full); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }

/* big "headline number" */
.figure {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-950);
  font-feature-settings: "tnum" on, "lnum" on;
}
.figure small { font-size: 0.45em; color: var(--text-mute); letter-spacing: 0; margin-left: 6px; font-family: var(--font-body); }

/* tabular row */
.row {
  display: grid; gap: var(--s-4);
  align-items: center;
}

/* table */
table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
table.ledger th {
  text-align: left;
  font-weight: 500;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--t-xs);
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
}
table.ledger td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-900);
  vertical-align: middle;
}
table.ledger td.num, table.ledger th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: var(--t-sm); }
table.ledger tr:hover td { background: var(--paper-sunk); }

/* ---------- avatars ---------- */
.avatar-sm {
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--accent-200); color: var(--accent-800);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}

/* ---------- subtle dividing rule ---------- */
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s-8) 0; }

/* ---------- icons (currentColor svgs) ---------- */
.ico { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; }

/* utility */
.flex { display: flex; }
.row-c { display: flex; align-items: center; gap: var(--s-3); }
.row-c-tight { display: flex; align-items: center; gap: var(--s-2); }
.col-v { display: flex; flex-direction: column; gap: var(--s-2); }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.grow { flex: 1; }
.center { display: grid; place-items: center; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ============================================================
   Screen-specific patterns
   These could live in their own files but at this size they
   are easier to maintain together.
   ============================================================ */

/* ---- dashboard ---- */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 900px) { .stat-grid { grid-template-columns: 2fr 1fr; gap: var(--s-6); } }
.bundle-card { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .bundle-card { grid-template-columns: 1fr 2fr auto; align-items: center; gap: var(--s-6); } }
.bundle-card:first-of-type { border-top: 0; }
.bundle-card .name { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink-900); }
.bundle-card .sub { color: var(--text-mute); font-size: var(--t-xs); margin-top: 2px; }
.bundle-card .pct { font-family: var(--font-mono); font-size: var(--t-base); color: var(--ink-900); font-variant-numeric: tabular-nums; text-align: right; }
.bundle-card .pct small { color: var(--text-mute); font-size: var(--t-xs); }
.activity { display: grid; grid-template-columns: 90px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.activity:first-of-type { border-top: 0; padding-top: 0; }
.activity .date { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-mute); padding-top: 2px; font-variant-numeric: tabular-nums; }
.activity .text { font-size: var(--t-sm); color: var(--ink-800); line-height: var(--lh-snug); }
.activity .text strong { font-weight: 500; color: var(--ink-950); }
.money-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.money-row:first-of-type { border-top: 0; padding-top: 0; }
.money-row .label { font-size: var(--t-sm); color: var(--text-soft); }
.money-row .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-md); color: var(--ink-950); }
.money-row .num.due { color: var(--ink-700); }
.money-row .num.overdue { color: var(--danger-fg); }
.next-milestone { background: var(--paper-sunk); border-radius: var(--r-lg); padding: var(--s-5); border: 1px solid var(--rule); }
.next-milestone .when { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-mute); letter-spacing: 0.02em; }
.next-milestone h3 { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--ink-950); margin-top: 4px; line-height: var(--lh-snug); letter-spacing: -0.01em; }
.next-milestone p { font-size: var(--t-sm); color: var(--text-soft); margin-top: var(--s-2); }

/* ---- bundle detail ---- */
.crumbs { font-size: var(--t-sm); color: var(--text-mute); margin-bottom: 4px; }
.crumbs a { color: var(--text-soft); }
.crumbs span { margin: 0 8px; color: var(--ink-300); }
.bundle-header { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-8); }
.bundle-progress-row { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 700px) { .bundle-progress-row { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-8); } }
.feature { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .feature { grid-template-columns: 1fr 120px 160px 120px; align-items: center; gap: var(--s-5); } }
.feature:first-of-type { border-top: 0; }
.feature .title { font-size: var(--t-base); color: var(--ink-950); font-weight: 500; }
.feature .desc { font-size: var(--t-sm); color: var(--text-soft); margin-top: 2px; line-height: var(--lh-snug); }
.feature .updated { font-size: var(--t-xs); color: var(--text-mute); font-family: var(--font-mono); }
.feature .pct { font-family: var(--font-mono); font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--ink-900); }
.feature .pct-bar { display: flex; align-items: center; gap: 8px; }
.feature .pct-bar .bar { flex: 1; }
.feature a.preview { font-size: var(--t-xs); color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.filter-row { display: flex; gap: 6px; margin-bottom: var(--s-4); flex-wrap: wrap; }
.chip { font-size: var(--t-xs); padding: 4px 10px; border-radius: var(--r-sm); color: var(--text-soft); background: transparent; border: 1px solid var(--rule-strong); }
.chip[aria-pressed="true"] { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); }
.chip .ct { color: var(--text-mute); margin-left: 6px; font-family: var(--font-mono); }
.chip[aria-pressed="true"] .ct { color: var(--on-dark-mute); }

/* ---- payments ---- */
.summary-tiles { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-8); }
@media (min-width: 700px) { .summary-tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-raised); }
.tile.due { background: var(--paper-sunk); }
.tile.danger { background: var(--danger-bg); border-color: var(--danger-rule); }
.tile .label { font-size: var(--t-xs); color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase; }
.tile .value { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--ink-950); margin-top: var(--s-2); line-height: 1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.tile.danger .value { color: var(--danger-fg); }
.tile .value small { font-family: var(--font-body); font-size: 0.45em; color: var(--text-mute); letter-spacing: 0; margin-left: 4px; }
.tile .ctx { font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-3); font-family: var(--font-mono); }
table.ledger td .iv { color: var(--text-mute); font-family: var(--font-mono); font-size: var(--t-xs); display: block; margin-top: 2px; }
table.ledger td.actions { white-space: nowrap; }
table.ledger td.actions a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-xs); margin-right: var(--s-3); }
table.ledger td.actions a:last-child { margin-right: 0; }
@media (max-width: 699px) {
  table.ledger { display: none; }
  .pay-card { display: block; padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
  .pay-card:first-of-type { border-top: 0; }
  .pay-card .top { display: flex; justify-content: space-between; align-items: baseline; }
  .pay-card .top .amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-md); font-weight: 500; color: var(--ink-950); }
  .pay-card .meta { color: var(--text-mute); font-size: var(--t-xs); margin-top: 4px; font-family: var(--font-mono); }
  .pay-card .row-c { margin-top: var(--s-3); }
  .pay-card a.link { color: var(--accent); font-size: var(--t-xs); text-decoration: underline; text-underline-offset: 2px; }
}
@media (min-width: 700px) { .pay-cards { display: none; } }

/* ---- request thread ---- */
.req-head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); }
.req-meta-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--text-soft); }
.req-meta-row .kv strong { color: var(--ink-900); font-weight: 500; }
.thread { padding-bottom: var(--s-6); }
.msg { display: grid; grid-template-columns: 36px 1fr; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.msg:first-of-type { border-top: 0; }
.msg .avatar { width: 36px; height: 36px; border-radius: var(--r-full); display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600; }
.msg.client .avatar { background: var(--accent-200); color: var(--accent-800); }
.msg.me .avatar { background: var(--ink-900); color: var(--paper); }
.msg .who { font-size: var(--t-sm); display: flex; align-items: baseline; gap: 10px; }
.msg .who strong { color: var(--ink-950); font-weight: 500; }
.msg .who .when { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-mute); }
.msg .body { margin-top: var(--s-2); color: var(--ink-800); font-size: var(--t-base); line-height: var(--lh-normal); text-wrap: pretty; }
.msg .body p + p { margin-top: var(--s-3); }
.attachments { margin-top: var(--s-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.attachment { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-md); font-size: var(--t-xs); color: var(--text-soft); background: var(--paper-sunk); }
.attachment .ico-img { width: 24px; height: 24px; background: var(--ink-200); border-radius: var(--r-sm); }
.reply-card { margin-top: var(--s-6); padding: var(--s-5); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.reply-card label { font-size: var(--t-xs); color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase; }
.reply-card .controls { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-3); gap: var(--s-3); flex-wrap: wrap; }
.reply-card .attach-btns { display: flex; gap: 6px; }
.reply-card .attach-btns button { color: var(--text-soft); font-size: var(--t-xs); border: 1px solid var(--rule); padding: 4px 10px; border-radius: var(--r-sm); }
.quote { border-left: 2px solid var(--accent); padding: 4px 0 4px 12px; color: var(--text-soft); font-size: var(--t-sm); margin-bottom: var(--s-3); }
.req-side { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 700px) { .req-side { grid-template-columns: repeat(3, 1fr); } }
.req-side .kv { font-size: var(--t-sm); }
.req-side .kv .k { color: var(--text-mute); font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.req-side .kv .v { color: var(--ink-900); }

/* ---- releases ---- */
.release-list { position: relative; }
.release { display: grid; grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-8) 0; border-top: 1px solid var(--rule); }
@media (min-width: 800px) { .release { grid-template-columns: 200px 1fr; gap: var(--s-8); padding: var(--s-10) 0; } }
.release:first-of-type { border-top: 0; padding-top: 0; }
.release .when { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--ink-950); letter-spacing: -0.01em; line-height: 1.1; }
.release .when small { display: block; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-mute); letter-spacing: 0.04em; margin-top: 6px; text-transform: uppercase; }
.release .ver { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-2); letter-spacing: 0.02em; }
.release h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); color: var(--ink-950); line-height: var(--lh-snug); letter-spacing: -0.015em; text-wrap: balance; }
.release .lede { font-size: var(--t-md); color: var(--ink-700); margin-top: var(--s-3); line-height: var(--lh-normal); text-wrap: pretty; max-width: 60ch; }
.changes { list-style: none; padding: 0; margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.changes li { display: grid; grid-template-columns: 90px 1fr; gap: var(--s-4); padding: 6px 0; font-size: var(--t-sm); color: var(--ink-800); line-height: var(--lh-snug); }
.changes li .tag { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: 0.05em; text-transform: uppercase; padding-top: 3px; }
.changes li .tag.add { color: var(--ok-fg); }
.changes li .tag.fix { color: var(--accent-700); }
.changes li .tag.chg { color: var(--text-soft); }
.release .refs { margin-top: var(--s-4); display: flex; gap: var(--s-3); flex-wrap: wrap; font-size: var(--t-xs); color: var(--text-mute); font-family: var(--font-mono); }
.release .refs a { color: var(--text-soft); border: 1px solid var(--rule); padding: 3px 8px; border-radius: var(--r-sm); background: var(--paper-sunk); }
.release .refs a:hover { color: var(--accent); }

/* ---- login / auth ---- */
.auth-page { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--paper); }
@media (min-width: 900px) { .auth-page { grid-template-columns: 1fr 1fr; } }
.auth-form-side { display: flex; flex-direction: column; padding: var(--s-8) var(--s-5); min-height: 100dvh; }
@media (min-width: 900px) { .auth-form-side { padding: var(--s-12) var(--s-16); } }
.auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--t-md); color: var(--ink-950); letter-spacing: -0.01em; }
.auth-brand .mark { width: 30px; height: 30px; border-radius: 7px; background: var(--ink-950); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; }
.auth-form-wrap { margin: auto 0; max-width: 380px; width: 100%; }
.auth-title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-2xl); line-height: var(--lh-tight); color: var(--ink-950); letter-spacing: -0.02em; }
@media (min-width: 900px) { .auth-title { font-size: var(--t-3xl); } }
.auth-sub { color: var(--text-soft); font-size: var(--t-md); margin-top: var(--s-3); line-height: var(--lh-snug); text-wrap: pretty; }
.auth-form { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.auth-form label { font-size: var(--t-xs); color: var(--text-mute); letter-spacing: 0.04em; text-transform: uppercase; }
.auth-form .btn-primary { width: 100%; justify-content: center; height: 44px; }
.auth-footer { margin-top: var(--s-8); font-size: var(--t-sm); color: var(--text-mute); line-height: var(--lh-loose); }
.auth-footer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.auth-quote-side { display: none; padding: var(--s-12) var(--s-16); background: var(--ink-950); color: var(--paper); position: relative; overflow: hidden; }
@media (min-width: 900px) { .auth-quote-side { display: flex; flex-direction: column; } }
.auth-quote-side::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse at top right, var(--dark-glow), transparent 60%), repeating-linear-gradient(0deg, var(--dark-line) 0 1px, transparent 1px 22px); pointer-events: none; }
.auth-quote-content { margin: auto 0; max-width: 520px; position: relative; }
.auth-quote { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.25; color: var(--on-dark-text); letter-spacing: -0.015em; text-wrap: pretty; }
.auth-attr { margin-top: var(--s-6); color: var(--on-dark-soft); font-size: var(--t-sm); }
.auth-attr strong { color: var(--on-dark-strong); font-weight: 500; }
.auth-meta { margin-top: auto; padding-top: var(--s-8); display: flex; justify-content: space-between; color: var(--text-mute); font-size: var(--t-xs); font-family: var(--font-mono); }

/* ---- feature row link ---- */
a.feature { color: inherit; text-decoration: none; cursor: pointer; transition: background 120ms ease; border-radius: var(--r-sm); }
a.feature:hover { background: var(--paper-raised); }
a.feature:hover .title { color: var(--accent); }
.comment-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s-3); padding: 2px 8px; background: var(--accent-200); color: var(--accent-800); border-radius: var(--r-full); font-size: var(--t-xs); font-family: var(--font-mono); font-weight: 500; vertical-align: middle; }
.feature .preview { color: var(--text-mute); font-size: var(--t-xs); font-family: var(--font-mono); }
.feature .preview a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---- feature detail ---- */
.feature-head { padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); }
.feature-meta-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--text-soft); }
.feature-meta-row .kv strong { color: var(--ink-900); font-weight: 500; }