/* Bitcoin Guava — component styles. Layout may vary; tokens may not. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui); font-size: 17px; line-height: 1.5;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
.narrow { max-width: 680px; }

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-size: 40px; line-height: 1.1; font-weight: 800; }
h2 { font-size: 28px; line-height: 1.15; font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
.label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.micro { font-size: 11px; color: var(--muted); }
.muted { color: var(--muted); } .ink2 { color: var(--ink-2); }
.tnum { font-variant-numeric: tabular-nums; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); white-space: nowrap;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; border: none; cursor: pointer;
  border-radius: var(--r-m); height: 48px; padding: 0 var(--s5); transition: transform .15s, box-shadow .15s; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--grad-sunrise); color: #fff; }
.btn-primary:hover { transform: scale(1.02); box-shadow: var(--shadow-md); text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1.5px solid var(--hairline); }
.btn-secondary:hover { border-color: var(--orange); text-decoration: none; }
.btn-ghost { background: none; color: var(--ember); }
@media (min-width: 1025px) { .btn { height: 40px; } }

/* cards & tiles */
.card { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-sm);
  border: 1px solid var(--hairline); padding: var(--s5); }
.tile { background: var(--surface); border-radius: var(--r-l); border: 1px solid var(--hairline); padding: var(--s4); }
.tile .v { font-family: var(--font-display); font-size: 28px; font-weight: 700; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; background: var(--cream); color: var(--warn-text); }
.chip.plain { background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-2); }

/* score dial */
.dial { position: relative; width: var(--dial-size, 240px); height: var(--dial-size, 240px); margin: 0 auto; }
.dial svg { width: 100%; height: 100%; transform: rotate(135deg); }
.dial .track { fill: none; stroke: var(--hairline); stroke-width: 11; stroke-linecap: round; }
.dial .fill { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray .4s cubic-bezier(.2,0,0,1); }
.dial .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.dial .num { font-family: var(--font-display); font-weight: 800; font-size: var(--dial-num, 96px); line-height: 1; color: var(--ink); }
.dial .band-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.band-cold { color: var(--leaf); } .stroke-cold { stroke: var(--leaf); }
.band-warm { color: var(--warn-text); } .stroke-warm { stroke: var(--gold); }
.band-hot { color: var(--ember); } .stroke-hot { stroke: var(--orange); }
.delta { font-size: 15px; font-weight: 600; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--muted); }

/* inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.input { height: 48px; border: 1px solid var(--hairline); border-radius: var(--r-s); background: var(--surface);
  color: var(--ink); font-size: 16px; padding: 0 var(--s3); font-family: var(--font-ui); width: 100%; }
.input:focus { outline: none; border: 2px solid var(--orange); }
.row { display: flex; gap: var(--s3); } .row > * { flex: 1; }
select.input { appearance: none; }
input[type="range"] { accent-color: var(--orange); width: 100%; }

/* segmented */
.seg { display: flex; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-m); padding: 3px; }
.seg button { flex: 1; border: none; background: none; height: 38px; border-radius: 9px; font-family: var(--font-ui);
  font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg button.active { background: var(--surface); color: var(--ember); box-shadow: var(--shadow-sm); }

/* sponsor slot (spec §2.2: labeled, one line, never above the brief) */
.sponsor { display: flex; align-items: baseline; gap: var(--s3); border-top: 1px solid var(--hairline);
  margin-top: var(--s4); padding-top: var(--s3); font-size: 14px; color: var(--ink-2); }
.sponsor .label { font-size: 11px; }

/* tab bar (mobile app) */
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface);
  border-top: 1px solid var(--hairline); display: flex; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.tabbar a.active { color: var(--orange); }
.tabbar a:hover { text-decoration: none; }
.tabbar svg { width: 24px; height: 24px; }

/* skeleton */
.skeleton { border-radius: var(--r-s); background: linear-gradient(90deg, var(--hairline), var(--paper), var(--hairline));
  background-size: 200% 100%; animation: sk 1.2s infinite linear; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* toast */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); border-radius: var(--r-m); padding: 10px 18px;
  font-size: 14px; z-index: 100; box-shadow: var(--shadow-lg); }

/* utilities */
.stack-v > * + * { margin-top: var(--s4); }
.flex { display: flex; } .between { justify-content: space-between; } .center-v { align-items: center; }
.gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); }
.mt2 { margin-top: var(--s2); } .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); }
.mb4 { margin-bottom: var(--s4); } .tc { text-align: center; }
[hidden] { display: none !important; }
.hide-mobile { display: none; }
@media (min-width: 1025px) { .hide-desktop { display: none; } .hide-mobile { display: block; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Export PDF: print shows only the result panel */
@media print {
  nav, .crumbs, form, section, .tabbar, .btn, .toast, h1 + .ink2 { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  .toolgrid { display: block !important; }
}