/* app.css — NOSECOUNT shell tokens + page frame + border classes (DESIGN.md §0, §2, §3, §4b) */

:root{
  --unit: calc(100vw / 1920); /* 1 unit = 1 css px at 1920 (LUAT 50) */

  --paper: #93F91B;
  --ink: #080808;
  --card: #F8F3DF;
  --raspberry: #EC1764;
  --indigo: #272572;
  --thread-red: #E0201B;
  --muted: #5B691A;
  --link-blue: #3177FA;

  --bg: var(--paper);
  --a: var(--raspberry);
  --b: var(--indigo);

  --font-display: "Knewave", cursive;
  --font-body: "Khula", Arial, sans-serif;
  --font-mono: "Iceberg", "Arial Narrow", sans-serif;

  --gutter-l: calc(54 * var(--unit));
  --gutter-r: calc(58 * var(--unit));
  --container: calc(1806 * var(--unit));
}

html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--font-body)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:400}
.mono,[data-cell]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- ONE PAGE FRAME (LUAT 53 / USER FIX, frame.json) ---- */
.page{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding-left:var(--gutter-l);
  padding-right:var(--gutter-r);
  background:var(--paper);
  box-sizing:border-box;
}

/* ---- SHARED DESKTOP TYPE TOKENS (USER FIX scale — shared tokens, not raw mockup px) ---- */
:root{
  --fs-hero: max(34px, calc(69 * var(--unit)));
  --fs-sub: max(14px, calc(25 * var(--unit)));
  --fs-display-number: max(28px, calc(56 * var(--unit))); /* oversized clicker readouts */
  --fs-stat-number: max(15px, calc(28 * var(--unit)));    /* ledger-adjacent stats */
  --fs-body: max(13px, calc(16 * var(--unit)));
  --fs-nav: max(12px, calc(17 * var(--unit)));
  --fs-label: max(11px, calc(16 * var(--unit)));
  --fs-footer: max(11px, calc(15 * var(--unit)));
}

/* ---- BORDER TABLE CLASSES (DESIGN.md §4b, hairlines max(1px, value)) ---- */
.rule-nav-pill{border:max(1px, calc(2 * var(--unit))) solid var(--ink);border-radius:999px}
.rule-stat-sheet{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink);border-radius:calc(12 * var(--unit))}
.rule-rank-table{border-bottom:max(1px, calc(2.3 * var(--unit))) solid var(--ink)}
.rule-rank-row{border-bottom:max(1px, calc(1.1 * var(--unit))) solid var(--ink)}
.rule-rank-row:last-child{border-bottom:0}
.rule-source-rail{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink);border-radius:calc(12 * var(--unit))}
.rule-swarm-tick{border:max(1px, calc(2.3 * var(--unit))) solid var(--raspberry)}
.rule-evidence-table{border:max(1px, calc(3.2 * var(--unit))) solid var(--ink)}
.rule-evidence-row{border-bottom:max(1px, calc(1 * var(--unit))) solid var(--ink)}
.rule-evidence-row:last-child{border-bottom:0}
.rule-curve-panel{border:max(1px, calc(4.8 * var(--unit))) solid var(--ink)}
.rule-ledger-row{border-bottom:max(1px, calc(1.1 * var(--unit))) solid var(--ink)}
.rule-ledger-row:last-child{border-bottom:0}
.rule-ledger-head{border-top:max(1px, calc(1.1 * var(--unit))) solid var(--ink)}
/* a selected row draws its own frame: the row above drops its shared bottom rule (no doubled edge) */
:is(.rule-evidence-row,.rule-row,.rule-ledger-row,.rule-rank-row,.rule-recount-row):has(+ .rule-swarm-tick){border-bottom-color:transparent}
:is(.rule-evidence-row,.rule-row,.rule-ledger-row,.rule-rank-row,.rule-recount-row):is(:has(> i.rule-swarm-tick),:has(+ * > i.rule-swarm-tick)){border-bottom-color:transparent}
.rule-lookup-card{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink);border-radius:calc(12 * var(--unit))}
.rule-wallet-modal{border:max(1px, calc(2.3 * var(--unit))) double var(--ink);border-radius:calc(12 * var(--unit))}
.rule-evidence-grid{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink)}
.rule-evidence-grid-col{border-left:max(1px, calc(1.1 * var(--unit))) solid var(--ink)}
.rule-slider{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink)}
.rule-recount-strip{border:max(1px, calc(3 * var(--unit))) solid var(--ink)}
.rule-recount-row{border-bottom:max(1px, calc(1 * var(--unit))) solid var(--ink)}
.rule-recount-row:last-child{border-bottom:0}
.rule-export-card{border:max(1px, calc(1.4 * var(--unit))) solid var(--ink);border-radius:calc(12 * var(--unit))}
.rule-format-tabs{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink);border-radius:999px}
.rule-sheet-grid-row{border-bottom:max(1px, calc(1.6 * var(--unit))) solid var(--muted)}
.rule-panel{border:max(1px, calc(2.3 * var(--unit))) solid var(--ink);background:var(--card)}
.rule-row{border-bottom:max(1px, calc(1.5 * var(--unit))) solid var(--ink)}
.rule-row:last-child{border-bottom:0}
.rule-input{border:max(1px, calc(2 * var(--unit))) solid var(--ink);background:var(--card);box-sizing:border-box}
.rule-slider-card{border:max(1px, calc(2.2 * var(--unit))) solid #E9E9E2}
:where(button,input,select){border:0;font:inherit;background:none}

/* ---- NAV (chrome/nav.html verbatim, repainted #92fc01 -> #93F91B per DESIGN §9) ---- */
[data-chrome="nav"]{
  position:sticky;top:0;z-index:30;box-sizing:border-box;width:100%;
  height:max(64px, calc(96 * var(--unit)));
  background:var(--paper);color:var(--ink);
  display:grid;grid-template-columns:minmax(0,360px) 1fr minmax(0,360px);align-items:center;
  padding:0 var(--gutter-r) 0 var(--gutter-l);
  font-family:var(--font-body);
  border-bottom:max(1px, calc(2 * var(--unit))) solid var(--ink);
}
[data-chrome="nav"] *{box-sizing:border-box}
.nc-brand{display:flex;align-items:center;gap:calc(16 * var(--unit));font:700 var(--fs-nav) var(--font-body);letter-spacing:-.02em;min-width:0}
.nc-brand img{height:max(48px, calc(50 * var(--unit)));width:auto;object-fit:contain;flex:none}
.nc-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-routes{justify-self:center;display:flex;align-items:center;padding:calc(4 * var(--unit));border-radius:999px;background:var(--card);gap:2px}
.nc-routes a{position:relative;color:var(--ink);text-decoration:none;font:600 var(--fs-nav) var(--font-body);padding:calc(8 * var(--unit)) calc(17 * var(--unit));border-radius:999px;white-space:nowrap}
.nc-routes a.is-active{background:var(--ink);color:#fff}
.nc-routes a.is-active:before{content:"";display:inline-block;width:calc(10 * var(--unit));height:calc(10 * var(--unit));border-radius:50%;background:var(--paper);margin-right:calc(8 * var(--unit))}
.nc-actions{justify-self:end;display:flex;align-items:center;gap:calc(12 * var(--unit))}
.nc-actions a,.nc-connect{height:max(34px, calc(42 * var(--unit)));border-radius:999px;display:grid;place-items:center;color:#fff;background:var(--ink);text-decoration:none;font:600 var(--fs-nav) var(--font-body);cursor:pointer}
.nc-actions a{width:max(34px, calc(42 * var(--unit)))}
.nc-actions .tg{width:auto;padding:0 calc(16 * var(--unit))}
.nc-connect{padding:0 calc(20 * var(--unit))}
.nc-connect.is-connected{background:var(--raspberry)}
.nc-menu{display:none}
.nc-drawer{display:none}
@media (max-width:1023px){
  [data-chrome="nav"]{grid-template-columns:1fr auto;padding:0 20px}
  .nc-routes,.nc-actions{display:none}
  .nc-menu{display:grid;place-items:center;height:40px;width:40px;border-radius:999px;background:var(--ink);color:#fff;border:0;cursor:pointer;justify-self:end}
  .nc-drawer{position:fixed;inset:64px 0 auto 0;background:var(--card);border-bottom:2px solid var(--ink);display:flex;flex-direction:column;padding:12px 20px 20px;gap:8px;z-index:29}
  .nc-drawer[hidden]{display:none}
  .nc-drawer a{color:var(--ink);text-decoration:none;font:600 15px var(--font-body);padding:10px 4px}
  .nc-drawer a.is-active{color:var(--raspberry)}
  .nc-drawer-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
  .nc-drawer-actions a,.nc-drawer-actions .nc-connect{height:38px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;padding:0 14px;text-decoration:none;font:600 13px var(--font-body);border:0}
}

/* ---- FOOTER (chrome/footer.html verbatim, repainted) ---- */
[data-chrome="footer"]{
  box-sizing:border-box;width:100%;min-height:max(90px, calc(118 * var(--unit)));
  background:var(--paper);color:var(--ink);
  border-top:max(1px, calc(2 * var(--unit))) solid var(--ink);
  padding:calc(18 * var(--unit)) var(--gutter-r) calc(20 * var(--unit)) var(--gutter-l);
  font:500 var(--fs-footer) var(--font-body);text-align:center;
}
.nc-foot-mark{height:36px;width:auto;object-fit:contain;margin:0 auto 10px}
.nc-credits{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px calc(20 * var(--unit));line-height:1.35}
.nc-credits span:after{content:"•";margin-left:calc(20 * var(--unit))}
.nc-credits span:last-child:after{content:"";margin:0}
.nc-social{margin-top:calc(10 * var(--unit));display:flex;justify-content:center;gap:calc(18 * var(--unit));font-weight:700}
.nc-social a{color:var(--ink);text-decoration:none}

/* ---- WALLET / COMING-SOON MODALS (shared across routes, SITE_SPEC §1 wallet) ---- */
.wallet-modal,.soon-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
.wallet-modal[hidden],.soon-modal[hidden]{display:none}
.wallet-scrim{position:absolute;inset:0;background:rgba(8,8,8,.55)}
.wallet-dialog{position:relative;width:min(420px, calc(100vw - 40px));background:var(--card);border-radius:calc(12 * var(--unit));padding:24px;font-family:var(--font-body)}
.wallet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wallet-head h2{font-family:var(--font-body);font-size:20px;font-weight:700;margin:0}
.wallet-x{background:transparent;border:0;cursor:pointer;font:600 13px var(--font-body);color:var(--ink)}
.wallet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wallet-list button{width:100%;text-align:left;padding:12px 14px;border-radius:999px;background:#fff;border:max(1px, calc(2 * var(--unit))) solid var(--ink);font:600 15px var(--font-body);cursor:pointer}
.wallet-msg{margin:10px 0 0;font-size:13px;color:var(--muted)}
.wallet-lede{margin:0;font-size:14px;line-height:1.4}

/* ---- MOTION (DESIGN.md §10 — signature motions, transform/opacity only) ---- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .3s ease-out,transform .3s ease-out}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}