/* ═══════════════════════════════════════════════════════════════════════════
   css/fb.css — ForwardBook house style
   ═══════════════════════════════════════════════════════════════════════════
   Visual lineage: ForwardBook BaseAppV0.1 (warm sand · ink navy · clay ·
   the 13%→18% orange→green rate scale · Space Grotesk + IBM Plex Mono) with
   the IncomeBlaster chrome (header, hamburger, chips, modal, statement).
   Trust aesthetics — sturdy SaaS confidence, no gimmicks (Cannister §10).
   Attribution: written by GLM-5.3 (Z.ai) · producer Joseph de Castelnau · 2026.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #14213d;
  --ink-soft: #375a7f;
  --sand: #f3e9d2;
  --clay: #d5b892;
  --accent: #e76f51;
  --accent-soft: #f4a261;
  --ok: #1f7a53;
  --warn: #b08900;
  --danger: #c0392b;
  --card: #fffaf0;
  --line: #e3d5ca;
  --mono: 'IBM Plex Mono', Consolas, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --shadow: 0 12px 30px rgba(20, 33, 61, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 20%, #fff3db 0%, transparent 35%),
    radial-gradient(circle at 80% 10%, #ffd7ba 0%, transparent 40%),
    linear-gradient(130deg, #f6efe3 0%, #f0e4cf 45%, #e8ddcd 100%);
}
img { max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { letter-spacing: -.02em; }
.mono { font-family: var(--mono); }
/* FULL-WIDTH — the producer order 2026-09-30: fill 1080p wide with a slim
   margin (≈10px) each side; the matrix earns every pixel. Forms stay
   readable via their own max-width. */
.wrap { width: 100%; margin: 0 auto; padding: 0 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) { .wrap { padding: 0 8px; } }

/* ── header chrome (IB lineage) ─────────────────────────────────────────── */
.fb-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  background: rgba(255, 250, 240, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #fff; font-weight: 700; font-size: 13px; border-radius: 9px;
  font-family: var(--mono); letter-spacing: -.5px;
}
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.brand-name b { color: var(--accent); }
.brand-name.big { font-size: 22px; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a {
  padding: 8px 12px; border-radius: 9px; text-decoration: none;
  color: var(--ink-soft); font-weight: 600; font-size: 14.5px;
}
.nav a:hover { background: rgba(20, 33, 61, .06); color: var(--ink); }
.nav a.active { background: var(--ink); color: var(--sand); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.flags { display: inline-flex; gap: 3px; align-items: center; }
.flag {
  border: 1px solid var(--line); background: var(--card); border-radius: 6px;
  min-width: 30px; height: 24px; display: grid; place-items: center; cursor: pointer;
  padding: 2px 4px; transition: transform .12s;
}
.flag:hover { transform: translateY(-1px); }
.flag.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(231, 111, 81, .25); }
.ver-pill {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  border: 1px dashed var(--clay); border-radius: 999px; padding: 3px 9px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font: 600 13px var(--sans); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--clay); }
.cart-chip.has { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.burger {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 38px; height: 38px; background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer; padding: 8px;
}
.burger span { height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .ver-pill { display: none; }
}

/* ── the hamburger drawer (NO icons — producer order 2026-09-30) ────────── */
.menu {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 33, 61, .44);
  opacity: 0; transition: opacity .18s;
}
.menu.open { opacity: 1; }
.menu-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--card); border-right: 1px solid var(--line);
  padding: 18px; overflow-y: auto; transform: translateX(-12px); transition: transform .18s;
  box-shadow: 24px 0 60px rgba(20, 33, 61, .18);
}
.menu.open .menu-panel { transform: none; }
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-radius: 11px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 15.5px; width: 100%;
  background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left;
}
.menu-item:hover { background: rgba(231, 111, 81, .09); }
.menu-item.danger { color: var(--danger); }
.mi-arr { color: var(--clay); font-family: var(--mono); }
.menu-sep { height: 1px; background: var(--line); margin: 12px 0; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: flex; gap: 28px; align-items: center; padding: 40px 0 26px;
}
.hero h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 8px 0 10px; line-height: 1.06; }
.hero h1 .t2 { color: var(--accent); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.lead { color: var(--ink-soft); font-size: 16px; max-width: 56ch; margin: 0 0 16px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-note { margin-top: 12px; font-size: 13px; color: var(--ink-soft); }
.hero-art { flex: 1; min-width: 280px; }
.hero-art img { border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (max-width: 900px) { .hero { flex-direction: column; padding-top: 22px; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 11px; padding: 11px 18px; font: 700 14.5px var(--sans);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.btn.primary { background: var(--ink); color: var(--sand); }
.btn.primary:hover { background: #1d2f55; }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--clay); }
.btn.money { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; }
.btn.money:hover { filter: brightness(1.06); }
.btn.ghosty { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn:disabled { opacity: .55; cursor: wait; }

/* ── section heads ───────────────────────────────────────────────────────── */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 26px 0 14px; }
.section-head h2 { margin: 0 0 4px; font-size: 22px; }
.section-head p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 76ch; }

/* ── the editions strip ──────────────────────────────────────────────────── */
.editions { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ed-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .14s, box-shadow .14s, border-color .14s; position: relative;
}
.ed-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ed-card.current { border-color: var(--accent); background: linear-gradient(150deg, #fff6ec, var(--card) 55%); }
.ed-card.locked { border-style: dashed; }
.ed-kicker-row { display: flex; align-items: center; justify-content: space-between; }
.ed-badge {
  font: 700 10px var(--mono); letter-spacing: .12em; padding: 3px 8px; border-radius: 999px;
}
.ed-badge.free { background: rgba(31, 122, 83, .12); color: var(--ok); border: 1px solid rgba(31, 122, 83, .35); }
.ed-badge.current { background: rgba(231, 111, 81, .13); color: var(--accent); border: 1px solid rgba(231, 111, 81, .4); }
.ed-badge.next { background: rgba(176, 137, 0, .12); color: var(--warn); border: 1px solid rgba(176, 137, 0, .35); }
.ed-badge.lock { background: rgba(20, 33, 61, .07); color: var(--ink-soft); border: 1px solid var(--line); }
.ed-title { font-weight: 700; font-size: 16.5px; margin: 0; }
.ed-meta { font: 500 12.5px var(--mono); color: var(--ink-soft); }
.ed-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; flex: 1; }
.ed-actions { display: flex; gap: 8px; margin-top: 4px; }
.ed-actions .btn { padding: 8px 14px; font-size: 13.5px; }

/* ── stats strip ─────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat .k { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.stat .v { font: 700 22px var(--mono); margin-top: 4px; }
.stat .s { font-size: 11.5px; color: var(--ink-soft); }

/* ── the matrix (BaseAppV0.1 lineage — SAME GRID AS IT WAS) ─────────────── */
.matrix-shell { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.matrix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.matrix-head h3 { margin: 0; font-size: 16px; }
.matrix-head .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.legend { display: flex; align-items: center; gap: .5rem; margin: 0; flex-wrap: wrap; font-size: .78rem; padding: 9px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.legend-sep { color: var(--ink-soft); }
#matrixScroll { overflow-x: auto; }
#matrixTable {
  border-collapse: collapse;
  white-space: nowrap;
  font-size: .72rem;
  min-width: 100%;
}
#matrixTable th,
#matrixTable td {
  border: 1px solid #d9cfc3;
  padding: 4px 7px;
  text-align: center;
  min-width: 72px;
}
#matrixTable thead tr:first-child th {
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  padding: 5px 7px;
  position: sticky;
  top: 0;
  z-index: 2;
}
#matrixTable thead tr:first-child th.year-break {
  border-left: 2px solid var(--accent);
}
.seed-row td {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
}
.seed-green  { background: #c6efce; color: #276221; }
.seed-yellow { background: #ffff99; color: #7a6000; }
.seed-amber  { background: #ffe699; color: #7a4500; }
.seed-empty  { background: #f5f5f5; color: #aaa; }
.data-row td {
  font-family: var(--mono);
  font-size: .68rem;
  border-radius: 0;
}
.platform-chip {
  display: inline-block;
  border-radius: 5px;
  padding: 1px 5px;
  color: #fff;
  font-weight: 700;
  font-size: .66rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  cursor: pointer;               /* a chip click feeds the Actionability cart */
}
.platform-chip:hover { outline: 2px solid rgba(20,33,61,.35); }
.fb-badge {
  display: block;
  margin-top: 2px;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: .63rem;
  background: rgba(20,33,61,.08);
  color: var(--ink-soft);
}
/* /guidance/ — module cards + the one-payment lock panel */
.guid-mod .copy{margin:0}
.guid-lock{text-align:center;padding:10px 0 2px}
.guid-lock .btn{margin-top:10px}

tr.guidance-row td {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  background: #f6e3de;
  color: #8c3b28;
}
.matrix-foot { padding: 8px 16px; color: var(--ink-soft); font-size: 12px; border-top: 1px solid var(--line); }

/* ── the tooltip (TotalRecall lineage) ──────────────────────────────────── */
#fbTip {
  position: fixed; z-index: 200; max-width: 320px; pointer-events: auto;
  background: var(--ink); color: #f3e9d2; border-radius: 12px; padding: 12px 14px;
  font-size: 12.5px; box-shadow: 0 18px 50px rgba(20, 33, 61, .35);
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
#fbTip.on { opacity: 1; transform: none; }
.tt-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #fff; }
.tt-row { display: flex; justify-content: space-between; gap: 14px; padding: 1.5px 0; }
.tt-key { color: #9fb0cc; }
.tt-val { font-family: var(--mono); text-align: right; }
.tt-tag { font: 700 10px var(--mono); padding: 2px 7px; border-radius: 999px; margin-right: 4px; }
.tt-tag.bonus { background: rgba(244, 162, 97, .25); color: #f4a261; }
.tt-tag.high-rate { background: rgba(31, 122, 83, .3); color: #7fd3a8; }
.tt-tag.low-rate { background: rgba(231, 111, 81, .25); color: #f0906f; }
.tt-add {
  margin-top: 8px; width: 100%; border: 0; border-radius: 8px; padding: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff;
  font: 700 12px var(--sans); cursor: pointer;
}
.tt-add:hover { filter: brightness(1.08); }

/* ── the offer modal (money gate) ────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 120; background: rgba(20, 33, 61, .5); display: grid; place-items: center; padding: 18px; opacity: 0; transition: opacity .16s; }
.modal.open { opacity: 1; }
.modal-panel {
  background: var(--card); border-radius: 18px; border: 1px solid var(--line);
  max-width: 880px; width: 100%; max-height: 92vh; overflow-y: auto;
  padding: 26px; position: relative; box-shadow: 0 40px 120px rgba(20, 33, 61, .35);
  transform: translateY(8px); transition: transform .16s;
}
.modal.open .modal-panel { transform: none; }
.modal-x { position: absolute; top: 14px; right: 14px; }
.modal-panel h2 { margin: 0 0 6px; }
.modal-panel .sub { color: var(--ink-soft); margin: 0 0 18px; }
.modal-panel .sub .why { color: var(--accent); font-weight: 700; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.offer-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fffdf8; }
.offer-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(231, 111, 81, .15); }
.oc-kicker { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.oc-price { font: 700 26px var(--mono); }
.offer-card p { margin: 0; font-size: 13px; color: var(--ink-soft); flex: 1; }
.oc-have { font-weight: 700; color: var(--ok); text-align: center; padding: 8px; border: 1px dashed rgba(31, 122, 83, .4); border-radius: 9px; }
.offer-note { margin-top: 16px; text-align: center; color: var(--ink-soft); font-size: 12.5px; }

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 16px);
  background: var(--ink); color: var(--sand); border-radius: 12px; padding: 11px 18px;
  font-weight: 600; font-size: 14px; z-index: 300; opacity: 0; pointer-events: none;
  transition: all .2s; box-shadow: 0 16px 50px rgba(20, 33, 61, .3);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── the cloudberry spinner (Cannister §10 — three states) ──────────────── */
.cloudberry-sync {
  position: fixed; top: 64px; right: 18px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center; cursor: default;
  transition: box-shadow .2s, border-color .2s;
}
.cloudberry-sync svg { width: 24px; height: 24px; }
.cloudberry-sync::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid transparent;
}
.cloudberry-sync.syncing { border-color: var(--accent-soft); }
.cloudberry-sync.syncing svg { animation: cloudberry-spin 1.6s linear infinite; }
.cloudberry-sync.syncing::after { border-top-color: var(--accent); animation: cloudberry-spin 1.6s linear infinite; }
.cloudberry-sync.synced { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(31, 122, 83, .15); }
.cloudberry-sync.err { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(192, 57, 43, .18); }
@keyframes cloudberry-spin { to { transform: rotate(360deg); } }

/* ── pages: generic shells ───────────────────────────────────────────────── */
/* longhands only — .wrap owns the horizontal rhythm (10px sides, full-width) */
.page-shell { padding-top: 8px; padding-bottom: 60px; }
.intro { padding: 26px 0 6px; }
.intro h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 6px 0 8px; }
.intro .copy { color: var(--ink-soft); max-width: 70ch; font-size: 15px; }
.trust-line { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; color: var(--ink-soft); font-size: 13px; max-width: 72ch; }
.trust-icon { color: var(--ok); font-weight: 800; }
.content-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); max-width: 860px; margin: 0 auto; }
.card-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.kicker { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.count-pill { font: 700 12px var(--mono); color: var(--ink-soft); border: 1px dashed var(--clay); border-radius: 999px; padding: 3px 10px; }
.nap-fields { display: grid; gap: 14px; }
.nap-field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
.input {
  width: 100%; background: #fffdf8; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; font: 500 14.5px var(--sans); color: var(--ink);
}
.input:focus { outline: 2px solid rgba(231, 111, 81, .35); border-color: var(--accent-soft); }
.corenap-why { margin: 5px 0 0; font-size: 12px; color: var(--ink-soft); }
.nap-address { border: 1px dashed var(--clay); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.nap-address legend { font-weight: 700; font-size: 13.5px; padding: 0 6px; }
.address-city { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.address-note { font-size: 12px; color: var(--ink-soft); margin: 0; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.save-status { font-size: 13px; color: var(--ok); font-weight: 700; }
.auth-nudge { margin-top: 14px; font-size: 13.5px; }
.privacy-note { display: flex; gap: 10px; margin-top: 18px; color: var(--ink-soft); font-size: 12.5px; }
.privacy-mark { color: var(--accent); }
@media (max-width: 640px) { .address-city { grid-template-columns: 1fr; } }

/* ── billings (statement lineage) ────────────────────────────────────────── */
.bill-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .bill-grid { grid-template-columns: 1fr; } }
.bill-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.bill-card h3 { margin: 0 0 10px; font-size: 16.5px; }
.table-wrap { overflow-x: auto; }
table.st { width: 100%; border-collapse: collapse; font-size: 13px; }
table.st th { text-align: left; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--line); padding: 8px 10px; }
table.st td { border-bottom: 1px solid var(--line); padding: 9px 10px; vertical-align: top; }
table.st tr:hover td { background: rgba(231, 111, 81, .04); }
.type-badge { font: 700 10.5px var(--mono); padding: 2px 8px; border-radius: 999px; letter-spacing: .06em; }
.type-purchase { background: rgba(31, 122, 83, .12); color: var(--ok); }
.type-subscription_charge { background: rgba(231, 111, 81, .13); color: var(--accent); }
.type-card_change { background: rgba(176, 137, 0, .13); color: var(--warn); }
.type-refund { background: rgba(192, 57, 43, .1); color: var(--danger); }
.amt { font-family: var(--mono); }
.amt.pos { color: var(--ok); }
.empty-row { text-align: center; color: var(--ink-soft); padding: 22px !important; font-style: italic; }
.card-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.card-line:last-child { border-bottom: 0; }
.sub-line { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sub-line:last-child { border-bottom: 0; }
.okpill { font: 700 10.5px var(--mono); color: var(--ok); background: rgba(31, 122, 83, .12); border-radius: 999px; padding: 2px 9px; }
.dl-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dl-row:last-child { border-bottom: 0; }

/* ── actionability board ─────────────────────────────────────────────────── */
.act-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.act-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow); cursor: grab; position: relative;
}
.act-card.dragging { opacity: .45; border-style: dashed; }
.act-card.drop-target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(231, 111, 81, .18); }
.act-prio { position: absolute; top: -9px; left: 12px; background: var(--ink); color: var(--sand); font: 700 11px var(--mono); border-radius: 999px; padding: 2px 9px; }
.act-title { font-weight: 700; font-size: 14.5px; padding-right: 26px; }
.act-rate {
  position: absolute; top: 12px; right: 14px; font: 700 12.5px var(--mono);
  color: #fff; border-radius: 8px; padding: 3px 9px;
}
.act-meta { display: flex; gap: 14px; flex-wrap: wrap; font: 500 12.5px var(--mono); color: var(--ink-soft); }
.act-meta b { color: var(--ink); }
.act-note {
  border: 1px dashed var(--clay); border-radius: 10px; background: #fffdf6;
  padding: 9px 11px; font-size: 13px; min-height: 40px; color: var(--ink-soft);
}
.act-note:focus { outline: 2px solid var(--accent-soft); border-style: solid; color: var(--ink); }
.act-note.empty::before { content: attr(data-ph); color: #b9ab98; }
.act-foot { display: flex; justify-content: space-between; align-items: center; }
.act-remove { border: 0; background: none; color: var(--danger); font: 600 12px var(--sans); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.act-remove:hover { background: rgba(192, 57, 43, .08); }
.act-grip { color: var(--clay); font-family: var(--mono); font-size: 15px; letter-spacing: 2px; }
.act-empty { text-align: center; color: var(--ink-soft); padding: 46px 10px; font-size: 15px; border: 1px dashed var(--clay); border-radius: 14px; background: rgba(255, 250, 240, .6); }
.act-hint { font-size: 12px; color: var(--ink-soft); margin: 8px 2px 0; }

/* ── selftest ────────────────────────────────────────────────────────────── */
.st-grid { display: grid; gap: 10px; }
.check-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; font: 500 13px var(--mono); }
.check-row .ok { color: var(--ok); font-weight: 700; }
.check-row .bad { color: var(--danger); font-weight: 700; }
pre.report { background: var(--ink); color: #cde3f1; border-radius: 12px; padding: 14px; overflow-x: auto; font-size: 12px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.fb-foot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 26px 10px 34px; color: var(--ink-soft); font-size: 12.5px; }

/* ── checkout (the embedded payment — IB wallet lineage) ─────────────────── */
.stripe-box {
  border: 1px solid var(--line); border-radius: 10px; background: #fffdf8;
  padding: 14px 12px 6px; min-height: 92px;
}
.stripe-box:focus-within { outline: 2px solid rgba(231, 111, 81, .3); border-color: var(--accent-soft); }
.corenap-why.ok { color: var(--ok); font-weight: 700; }

/* ── the PAID chrome: initials avatar + owned-edition pill ────────────────── */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink); color: var(--paper); font: 700 12.5px var(--sans);
  letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(231, 111, 81, .22); padding: 0;
}
.avatar:hover { background: var(--accent); }
.own-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(42, 122, 84, .1); color: var(--ok);
  border: 1px solid rgba(42, 122, 84, .3); border-radius: 999px;
  font: 700 11px var(--mono); letter-spacing: .05em; padding: 5px 10px;
  text-transform: uppercase; white-space: nowrap;
}

/* ── login ───────────────────────────────────────────────────────────────── */
.login-card { max-width: 420px; margin: 40px auto; }
.login-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.login-toggle button { flex: 1; }
.oauth-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--ink-soft); font-size: 12px; }
.oauth-sep::before, .oauth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.chip.oauth { padding: 11px 16px; font-size: 14px; }

/* ── v0.2.8 — Stripe mode note (checkout module): LIVE vs TEST truth ─────── */
.co-mode-note{margin:12px 0 0;font-size:12px;font-weight:600;letter-spacing:.02em;text-align:center}
.co-mode-note.live{color:#1c7c46}
/* ── v0.3.2 — Guidance workspace: pills · drop · board (cards ⇄ columns) ── */
.guid-section{margin-top:26px}
.guid-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.guid-pill{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--card);font:500 13px var(--sans);color:var(--ink);cursor:pointer;transition:transform .15s,border-color .15s}
.guid-pill:hover{border-color:var(--clay);transform:translateY(-1px)}
.guid-pill .gp-n{font:600 10px var(--mono);background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:1px 6px;color:var(--ink-soft)}
.guid-pill.picked{border-color:var(--ok);background:rgba(31,122,83,.08);font-weight:700}
.guid-pill.picked .gp-n{color:var(--ok);border-color:var(--ok)}
.guid-pill.kind-text{border-style:dashed}
.guid-toggle{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.guid-toggle button{border:0;background:transparent;padding:7px 16px;font:600 12px var(--sans);color:var(--ink-soft);cursor:pointer}
.guid-toggle button.on{background:var(--ink);color:#fff}
.guid-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.guid-card h3{font-size:15px;margin:0 0 4px}
.gu-meta{font-size:12px;color:var(--ink-soft);margin:0 0 8px}
.gu-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.gu-chip{font-size:11px}
.gu-text{font-size:12.5px;border-left:3px solid var(--sand);padding-left:8px;margin:6px 0;font-style:italic}
.gs{font:700 12px var(--mono);border-radius:8px;padding:3px 8px;white-space:nowrap}
.gs.hi{background:rgba(31,122,83,.14);color:var(--ok)}
.gs.mid{background:rgba(176,137,0,.14);color:var(--warn)}
.gs.low{background:rgba(192,57,43,.12);color:var(--danger)}
.gs-none{background:var(--sand);color:var(--ink-soft)}
.gu-unmatched{font-size:12px;color:var(--danger)}
.guid-report{border-left:4px solid var(--ok)}
.gu-key{font-size:11px}
.gu-key.matched{border-color:var(--ok);color:var(--ok)}
.gu-key.near{border-color:var(--warn);color:var(--warn)}
.gu-key.new{border-color:var(--line);color:var(--ink-soft)}
/* KickAss zone in the house palette (its injected styles load after fb.css) */
#guidDrop.ka-zone{border-color:var(--line);background:var(--card);border-radius:14px;padding:22px 16px;font-family:var(--sans);color:var(--ink)}
#guidDrop.ka-zone:hover,#guidDrop.ka-zone.ka-over{border-color:var(--ok)}
/* ── v0.3.3 — the producer's note on the guidance cards · AGreatBaseTable ── */
.gu-note{font-size:12.5px;border-left:3px solid var(--warn);padding-left:8px;margin:6px 0}
.agt th{font-family:var(--mono)}
.agt td small b, .gu-meta b{font-weight:600}
/* ── v0.3.4 — the APR badge with the FWB book coloring (cards + column) ──── */
.apr-badge{display:inline-block;font:700 11px var(--mono);border-radius:8px;padding:2px 8px;white-space:nowrap}
/* ── v0.3.6 — /ops/ the intake (edition picker · drop · report · audit) ──── */
.ops-section{margin-top:26px}
.ops-picker{margin:10px 0 6px}
.ops-select{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--card);
  font:600 14px var(--sans);color:var(--ink);min-width:280px;cursor:pointer}
.ops-select:focus{outline:none;border-color:var(--ok)}
.ops-report{border-left:4px solid var(--ok)}
.op-counts b{font-family:var(--mono)}
.op-ok{border-color:var(--ok);color:var(--ok)}
.op-dup{border-color:var(--warn);color:var(--warn)}
.op-bad{border-color:var(--danger);color:var(--danger)}
.op-ref{border-color:var(--ok);color:var(--ok)}
.op-stale{border-color:var(--soft,#7a7368);color:var(--soft,#7a7368)}
.op-stale-note{color:var(--soft,#7a7368)}
.op-view{cursor:pointer;font-size:12px;padding:4px 10px}
.op-view:hover{border-color:var(--ok)}
.op-err{border-left:4px solid var(--danger)}
.op-inv{white-space:pre-wrap;word-break:break-word;font:500 12px/1.55 var(--mono);color:var(--ink);
  background:var(--bg,rgba(0,0,0,.03));border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:8px 0 0}
#opsDrop.ka-zone{border-color:var(--line);background:var(--card);border-radius:14px;padding:22px 16px;
  font-family:var(--sans);color:var(--ink)}
#opsDrop.ka-zone:hover,#opsDrop.ka-zone.ka-over{border-color:var(--ok)}

/* the planned-investment input (guidance board column, v0.3.12) */
.planned-in{width:8ch;background:transparent;border:1px solid var(--line,#3a352d);border-radius:6px;
  color:inherit;font:inherit;padding:2px 6px;text-align:right}
.planned-in:focus{outline:none;border-color:var(--ok)}