/* app.css — JUKEBOX site shell tokens + chrome (DESIGN.md) */
:root{
  /* colour tokens — DESIGN.md §3, USER_FIXES normalizes ground to binding paper */
  --paper:#5804CC;
  --panel:#18006F;
  --panel-deep:#100052;
  --ink:#F8F5FF;
  --muted:#CFB9F5;
  --violet:#9F61CF; /* structural rule line only — not a brand accent */
  --green:#3AF1BE; /* USER FIX R2: brand accent = new mark mint (median of mark_trim_2048) */
  --mint:#3AF1BE;
  --lime:#B4F66C;
  --brand-grad:linear-gradient(90deg,var(--mint),var(--lime));
  --blue:#2797FF;
  --nav-bg:#3702c8;

  --font-display:'Monoton',sans-serif;
  --font-body:'Niramit',sans-serif;
  --font-mono:'Audiowide',sans-serif;

  --bg:var(--paper);
  --surface:var(--panel);
  --a:var(--violet);
  --b:var(--green);
  --mute:var(--muted);
  --line:var(--violet);

  /* LUAT 50 page scale: 1 unit tied to 100vw/1920, clamped so it stops growing past 2560 / shrinking below 1280 */
  --pxw: clamp(1280px, 100vw, 2560px);
  --u: calc(var(--pxw) / 1920px);

  /* border table (DESIGN.md §4b) — width px at 1920, never disappear when scaled */
  --rule-nav: max(1px, calc(1px * var(--u)));
  --rule-dock: max(1px, calc(2px * var(--u)));
  --rule-footer: max(1px, calc(3px * var(--u)));
  --rule-panel: max(1px, calc(3.4px * var(--u)));
  --rule-panel-double: max(1px, calc(5.9px * var(--u)));
  --rule-slot: max(1px, calc(5px * var(--u)));
  --rule-row: max(1px, calc(3.4px * var(--u)));
  --rule-input: max(1px, calc(2.8px * var(--u)));
  --rule-chip: max(1px, calc(2.6px * var(--u)));
  --rule-hair: max(1px, calc(1.5px * var(--u)));

  --ease-settle: cubic-bezier(.16,.84,.32,1);
}

html{background:var(--paper)}
body{background:var(--paper);font-family:var(--font-body)}

/* ---- one page container (USER FIX: 64px left / 63px right gutter @1920, shared by every route) ---- */
.page{width:100%;padding-left:calc(64px * var(--u));padding-right:calc(63px * var(--u));box-sizing:border-box}

/* ---- shared header: brand row + dock row ---- */
.site-header{position:relative;width:100%;background:var(--nav-bg);border-bottom:var(--rule-nav) solid var(--violet)}
.brand-row{display:flex;align-items:center;height:calc(96px * var(--u));padding:0 calc(96px * var(--u));gap:calc(22px * var(--u))}
.brand-mark{display:flex;align-items:center;gap:calc(22px * var(--u));text-decoration:none;color:var(--ink)}
.brand-mark img{width:auto;height:calc(60px * var(--u));aspect-ratio:1868/2048;object-fit:contain;flex:none}
.brand-mark .word{font:400 calc(43px * var(--u))/1 var(--font-display);color:var(--ink)}
.launch{margin-left:auto;display:flex;align-items:center;gap:calc(24px * var(--u));font-size:calc(17px * var(--u))}
.launch a,.launch span{color:var(--ink);text-decoration:none}
.launch button{font:600 calc(16px * var(--u)) var(--font-body);padding:calc(11px * var(--u)) calc(22px * var(--u));border:max(1px, calc(2px * var(--u))) solid var(--green);border-radius:calc(15px * var(--u));background:#29118d;color:var(--ink);cursor:pointer}
.launch button:hover{box-shadow:0 0 calc(12px * var(--u)) rgba(58,241,190,.45)}
.launch button:hover,.launch a:hover{filter:brightness(1.18);text-decoration:underline}

.dock{display:flex;align-items:center;gap:calc(32px * var(--u));height:calc(70px * var(--u));padding:0 calc(96px * var(--u));background:var(--nav-bg);border-top:var(--rule-dock) solid var(--violet)}
.dock .now{display:flex;align-items:center;gap:calc(12px * var(--u))}
.dock .now img{width:auto;height:calc(36px * var(--u));aspect-ratio:1868/2048;object-fit:contain;flex:none}
.dock .now > div{min-width:0}
.dock .now .eyebrow{display:block;font-size:calc(11px * var(--u));color:var(--muted)}
.dock .now b{font:600 calc(15px * var(--u)) var(--font-body);color:var(--ink)}
.dock .up{min-width:0;display:flex;align-items:center;gap:calc(14px * var(--u));font-size:calc(13px * var(--u));color:var(--muted);white-space:nowrap;overflow:hidden}
.dock .up b{color:var(--ink);margin-right:calc(4px * var(--u))}
.dock .routes{margin-left:auto;display:flex;gap:calc(28px * var(--u));font:600 calc(15px * var(--u)) var(--font-body)}
.dock .routes a{color:var(--muted);text-decoration:none;padding-bottom:calc(4px * var(--u));border-bottom:max(1px, calc(2px * var(--u))) solid transparent;transition:color .15s var(--ease-settle),border-color .15s var(--ease-settle)}
.dock .routes a:hover{color:var(--ink)}
.dock .routes a.is-active{color:var(--ink);border-bottom-color:var(--mint);border-image:var(--brand-grad) 1}

.nav-mobile{background:var(--nav-bg);border-top:var(--rule-hair) solid var(--violet);padding:calc(10px*var(--u)) calc(16px*var(--u))}
.nav-mobile a{color:var(--muted);text-decoration:none;font:600 14px var(--font-body)}
.nav-mobile a.is-active{color:var(--ink)}

/* ---- shared footer (USER FIX R1 #2: one compact selector strip — brand, line, track keys, sources) ---- */
.site-footer{display:flex;align-items:center;gap:calc(36px * var(--u));min-height:calc(84px * var(--u));padding:calc(14px * var(--u)) calc(96px * var(--u));background:var(--nav-bg);border-top:var(--rule-footer) solid var(--violet);color:var(--ink);box-sizing:border-box}
.site-footer p{margin:0}
.f-brand{display:flex;align-items:center;gap:calc(12px * var(--u));flex:none;text-decoration:none;color:var(--ink)}
.f-brand img{width:auto;height:calc(36px * var(--u));aspect-ratio:1868/2048;object-fit:contain;flex:none}
.f-brand .word{font:400 calc(26px * var(--u))/1 var(--font-display);color:#fff;text-shadow:calc(1.5px * var(--u)) 0 var(--lime),calc(-1.5px * var(--u)) 0 var(--mint)}
.f-line{flex:1 1 auto;min-width:0;font:400 calc(16px * var(--u))/1.3 var(--font-body);color:var(--muted)}
.f-keys{display:flex;align-items:center;gap:calc(10px * var(--u));flex:none}
.f-keys a{display:flex;align-items:center;gap:calc(8px * var(--u));height:calc(36px * var(--u));padding:0 calc(14px * var(--u)) 0 calc(6px * var(--u));border-radius:calc(8px * var(--u));background:var(--panel);color:var(--muted);text-decoration:none;font:600 calc(15px * var(--u))/1 var(--font-body);box-shadow:inset 0 0 0 max(1px, calc(1.5px * var(--u))) rgba(159,97,207,.7);transition:color .15s var(--ease-settle),box-shadow .15s var(--ease-settle)}
.f-keys a i{display:flex;align-items:center;justify-content:center;width:calc(34px * var(--u));height:calc(24px * var(--u));border-radius:calc(5px * var(--u));background:var(--panel-deep);font:400 calc(13px * var(--u))/1 var(--font-mono);font-style:normal;color:#e7b6ff}
.f-keys a:hover{color:var(--ink);box-shadow:inset 0 0 0 max(1px, calc(1.5px * var(--u))) var(--mint),0 0 calc(10px * var(--u)) rgba(58,241,190,.45)}
.f-keys a.is-active{color:var(--ink);box-shadow:inset 0 0 0 max(1px, calc(2px * var(--u))) var(--green)}
.f-keys a.is-active i{color:var(--lime)}
.f-src{flex:none;font:400 calc(14px * var(--u))/1.3 var(--font-body);color:var(--muted);white-space:nowrap}
@media (max-width:1279px){.f-line{display:none}}

/* ---- border table classes (DESIGN.md §4b) — route bodies use these, never raw border/outline ---- */
:where(button,input,select,textarea){border:0;outline:0;font-family:inherit}
.rule-panel{border:var(--rule-panel) solid var(--violet);border-radius:calc(16px * var(--u))}
.rule-panel-double{border:var(--rule-panel-double) double var(--violet);border-radius:calc(16px * var(--u));box-shadow:inset 0 0 0 max(2px, calc(3px * var(--u))) var(--green)}
.rule-slot{border:var(--rule-slot) solid var(--violet);border-radius:calc(10px * var(--u))}
.rule-row{border:var(--rule-row) solid var(--violet);border-radius:calc(8px * var(--u))}
.rule-input{border:var(--rule-input) solid var(--violet);border-radius:calc(10px * var(--u));box-sizing:border-box;padding:calc(10px * var(--u)) calc(14px * var(--u))}
.rule-chip{border:var(--rule-chip) solid var(--violet);border-radius:999px}
.rule-row-divider{border-bottom:var(--rule-hair) solid var(--muted)}
/* stacked rows share one edge (no doubled lines): a row after a row draws no top line; a lit row's inset ring is its frame */
.rule-stack > .rule-row:not(:first-child),.rule-stack > :not(:first-child) > .rule-row{border-top-color:transparent}
.rule-row.is-on,.rule-row.now,.rule-row.is-cut{border-color:transparent}
.rule-stack > .rule-row:has(+ .rule-row:is(.is-on,.now,.is-cut)),.rule-stack > :has(+ * > .rule-row:is(.is-on,.now,.is-cut)) > .rule-row{border-bottom-color:transparent}

/* ---- wallet modal (shared chrome) ---- */
.wallet-modal{position:fixed;inset:0;background:rgba(16,0,82,.72);display:flex;align-items:center;justify-content:center;z-index:50}
.wallet-modal[hidden]{display:none}
.wallet-modal-box{background:var(--panel);border:var(--rule-panel) solid var(--violet);border-radius:calc(16px*var(--u));padding:calc(24px*var(--u));width:min(420px, 86vw);color:var(--ink)}
.wallet-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(14px*var(--u))}
.wallet-modal-head button{background:none;color:var(--ink);font-size:20px;cursor:pointer}
.wallet-options{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(8px*var(--u))}
.wallet-options button{width:100%;text-align:left;padding:calc(10px*var(--u)) calc(14px*var(--u));border:var(--rule-input) solid var(--violet);border-radius:calc(10px*var(--u));background:var(--panel-deep);color:var(--ink);cursor:pointer}
.wallet-options button:hover{border-color:var(--green)}

/* ---- motion helpers (signature character — DESIGN.md §8 addendum) ---- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-settle),transform .5s var(--ease-settle)}
  [data-reveal].is-in{opacity:1;transform:translateY(0)}
  [data-reveal-group] > *{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-settle),transform .5s var(--ease-settle)}
  [data-reveal-group].is-in > *{opacity:1;transform:translateY(0)}
  [data-reveal-group].is-in > *:nth-child(1){transition-delay:0ms}
  [data-reveal-group].is-in > *:nth-child(2){transition-delay:60ms}
  [data-reveal-group].is-in > *:nth-child(3){transition-delay:120ms}
  [data-reveal-group].is-in > *:nth-child(4){transition-delay:180ms}
  [data-reveal-group].is-in > *:nth-child(5){transition-delay:240ms}
  main.is-leaving{transition:opacity .12s var(--ease-settle)}
  /* USER FIX R1 #4: blocks already on screen when a route mounts are drawn final at once; entrance motion of the new route is capped to one short beat */
  [data-reveal].no-anim,[data-reveal-group].no-anim > *{transition:none!important}
  main.is-entering *,main.is-entering *::before,main.is-entering *::after{animation-duration:150ms!important;animation-delay:0s!important}
}
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-group] > *{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- responsive: 1024 two-col collapse, 390 mobile chrome ---- */
@media (max-width:1023px){
  .dock .up{display:none}
}
@media (max-width:767px){
  .brand-row{height:auto;padding:12px 16px;flex-wrap:wrap}
  .launch{font-size:13px;gap:12px}
  .dock{display:none}
  .site-footer{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .f-keys{flex-wrap:wrap;gap:6px}
  .f-keys a{height:32px;font-size:13px}
  .f-keys a i{width:28px;height:20px;font-size:11px}
  .f-brand .word{font-size:22px}
  .f-src{white-space:normal;font-size:12px}
  .page{padding-left:16px;padding-right:16px}
}