/* Weirded · app theme — the landing's palette: white, sky, rapeseed yolk, black ink.
   app.js renders with inline styles that read these tokens; `!important` is only used where
   an inline style must lose. Shared by /app, /docs and /methodology. */

:root{
  --fg:#0d0d0c;
  --ink:#0d0d0c;
  --accent:#0d0d0c;              /* selected / primary = ink, like the landing's ink buttons */
  --accent-dim:#4f5049;
  --up:#1f8f55;
  --down:#b0573c;
  --yolk:#e4c302;
  --yolk-deep:#6d5c00;
  --yolk-pale:#fbf6dc;
  --sky-1:#9fbeef;
  --sky-2:#e4edfb;
  --sky-3:#f4f8fd;
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.86);
  --line:rgba(13,13,12,.1);
  --line-2:rgba(13,13,12,.16);
  --mute:#4f5049;
  --mute-2:#8a8b82;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
}

html{background:#fff}
body{
  margin:0;min-height:100vh;color:var(--fg)!important;font-family:var(--sans)!important;letter-spacing:-.01em;
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(159,190,239,.55), transparent 62%),
    linear-gradient(180deg, var(--sky-3) 0%, #fff 38%, #fff 78%, var(--yolk-pale) 100%) fixed!important;
}
.mono{font-family:var(--mono)!important;letter-spacing:0}
input,button,select,textarea{font-family:inherit}
::selection{background:var(--yolk)!important;color:var(--ink)}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(13,13,12,.16)!important;border-radius:4px}
*::-webkit-scrollbar-track{background:transparent}
a{color:var(--yolk-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2{font-family:var(--serif)!important;font-weight:400!important;letter-spacing:-.02em!important}

/* screens */
.screen-app{min-height:100vh;background:transparent}
.screen-landing{position:relative;z-index:0;background:transparent}
.site-footer{background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}

/* glass surfaces */
.panel,.fade-block,.fcard,.float-card,.refcard{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(13,13,12,.04),0 24px 50px -34px rgba(40,50,80,.35);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
}
.float-card{background:var(--glass-2)}
.fcard:hover,.refcard:hover{border-color:rgba(13,13,12,.22)!important}
.refcard.sel{border-color:var(--ink)!important;box-shadow:0 0 0 1px var(--ink),0 24px 50px -30px rgba(40,50,80,.4)!important}
.mrow:hover{background:rgba(13,13,12,.035)!important}
.fcard img,.refcard img,.mrow img{mix-blend-mode:multiply}

/* buttons: ink, small radius, like the landing */
.cta-gold{background:var(--ink)!important;color:#fff!important;border-radius:10px!important}
.cta-gold:hover{box-shadow:0 12px 26px -12px rgba(13,13,12,.55)}
.cta-gold::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent)!important}
.cta-main{border-radius:10px!important}
.cta-main:hover{box-shadow:0 10px 22px -14px rgba(13,13,12,.4)}
.chip{border-radius:10px!important}

/* inputs */
input[type=text],input[type=number]{background:#fff!important;color:var(--fg)!important;border-color:var(--line-2)!important}
input[type=text]:focus,input[type=number]:focus{border-color:var(--ink)!important;box-shadow:0 0 0 3px rgba(228,195,2,.25)!important}
input::placeholder{color:#a8a99f}
input[type=range]::-webkit-slider-runnable-track{background:rgba(13,13,12,.14)!important}
input[type=range]::-webkit-slider-thumb{background:var(--ink)!important;border-color:#fff!important}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(228,195,2,.3)!important}
input[type=range]::-moz-range-track{background:rgba(13,13,12,.14)!important}
input[type=range]::-moz-range-thumb{background:var(--ink)!important;border-color:#fff!important}

/* docs + methodology */
header.docs-header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.72)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)!important}
header.docs-header .brand span{font-family:var(--serif)!important;font-weight:400!important;font-size:24px!important;letter-spacing:-.03em!important}
body>main{max-width:960px;margin:40px auto 56px;padding:52px 48px 64px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:26px;
  box-shadow:inset 0 1px 0 #fff,0 30px 70px -50px rgba(40,50,80,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body>main h1{font-size:clamp(40px,5vw,64px)!important;line-height:1!important}
body>main h2{font-size:30px!important}
body>main p,body>main li,body>main td{color:#3c3d37!important}
body>main table{background:#fff!important;border-color:var(--line)!important}
body>main th{color:var(--mute-2)!important;border-color:var(--line)!important}
body>main td{border-color:rgba(13,13,12,.06)!important}
body>main td.mono{color:var(--fg)!important}
body>main .formula{background:var(--yolk-pale)!important;border-color:rgba(109,92,0,.15)!important;color:var(--fg)!important}
body>main .note{background:var(--sky-3)!important;border-color:var(--line)!important;color:#3c3d37!important}
body>main .kicker,body>main h2 .n{color:var(--yolk-deep)!important}
header .cta{background:var(--ink)!important;color:#fff!important;border-radius:10px!important}
header nav a{color:var(--mute)!important}
header nav a.active,header nav a:hover{color:var(--fg)!important}
@media (max-width:700px){body>main{margin:16px 12px 32px;padding:32px 20px 40px;border-radius:18px}}

/* the old in-app landing is not used any more (the site is at /), keep its bits harmless */
.hero-mark-wrap,.hero-video-wrap{display:none}

/* my-coins: fixed columns, so 8 fields break 4+4 not 5+3 */
.datagrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.vestgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.datagrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.datagrid,.vestgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.datagrid,.vestgrid{grid-template-columns:minmax(0,1fr)}}