/* CarbonLedger design system, 2026-10-11. Organic, dark-first, one accent (emerald), gold only for rewards.
   Tokens: --bg surfaces, --fg text, --primary accent, --gold reward, --ok/--warn/--bad queue status only.
   Shape lock: cards 20px, controls 12px, chips and buttons pill. Type matches the website: Instrument Serif for display,
   IBM Plex Sans for text, IBM Plex Mono for numbers.
   Motion: 180 to 420 ms, transform and opacity only, everything off under prefers-reduced-motion. */
:root {
  --bg: #f3f6f2; --bg-2: #e8eee7; --surface: #ffffff; --surface-2: #f8faf7; --line: rgba(14,26,19,.12); --line-strong: rgba(14,26,19,.24);
  --fg: #0e1a13; --fg-2: rgba(14,26,19,.74); --fg-3: rgba(14,26,19,.62);
  --primary: #0b6e4b; --primary-hover: #09583c; --primary-soft: rgba(11,110,75,.07); --on-primary: #ffffff;   /* 5.4 to 1 as text on the light ground */
  --gold: #8a5a00; --gold-soft: rgba(245,196,81,.18); --gold-line: #d9a53a;
  --ok: #0b6e4b; --warn: #a16a12; --bad: #b3362b;
  --globe-sea: #d3e0da; --globe-line: rgba(243,246,242,.9); --globe-none: #c6cfc8; --globe-select: #0e1a13; --globe-wait: #a9bfb2;
  --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --display: 'Instrument Serif', Georgia, serif;
  --r: 20px; --r-ctl: 12px; --t: .2s cubic-bezier(.16,1,.3,1); --t-slow: .42s cubic-bezier(.16,1,.3,1);
  --shadow: 0 10px 30px rgba(14,26,19,.08); --glow: 0 10px 26px rgba(11,110,75,.22);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #07090a; --bg-2: #0c1210; --surface: #0e1612; --surface-2: #132019; --line: rgba(46,204,128,.12); --line-strong: rgba(46,204,128,.3);
  --fg: #edf3ef; --fg-2: rgba(237,243,239,.8); --fg-3: #93b5a0;
  --primary: #2ecc80; --primary-hover: #52da9a; --primary-soft: rgba(46,204,128,.12); --on-primary: #03140b;
  --gold: #f2c25a; --gold-soft: rgba(242,194,90,.14); --gold-line: #e8b448;
  --ok: #2ecc80; --warn: #e8a040; --bad: #f2847a;
  --globe-sea: #0b1511; --globe-line: rgba(7,9,10,.9); --globe-none: #1a2a22; --globe-select: #edf3ef; --globe-wait: #2a4a3a;
  --shadow: 0 18px 40px rgba(0,8,4,.55); --glow: 0 10px 30px rgba(46,204,128,.28); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #07090a; --bg-2: #0c1210; --surface: #0e1612; --surface-2: #132019; --line: rgba(46,204,128,.12); --line-strong: rgba(46,204,128,.3);
  --fg: #edf3ef; --fg-2: rgba(237,243,239,.8); --fg-3: #93b5a0;
  --primary: #2ecc80; --primary-hover: #52da9a; --primary-soft: rgba(46,204,128,.12); --on-primary: #03140b;
  --gold: #f2c25a; --gold-soft: rgba(242,194,90,.14); --gold-line: #e8b448;
  --ok: #2ecc80; --warn: #e8a040; --bad: #f2847a;
  --globe-sea: #0b1511; --globe-line: rgba(7,9,10,.9); --globe-none: #1a2a22; --globe-select: #edf3ef; --globe-wait: #2a4a3a;
  --shadow: 0 18px 40px rgba(0,8,4,.55); --glow: 0 10px 30px rgba(46,204,128,.28); color-scheme: dark; }
/* The old names, kept so every module that still uses them renders in the same system. */
:root { --paper: var(--bg); --paper-mid: var(--bg-2); --paper-deep: var(--surface-2); --card: var(--surface); --ink: var(--fg); --ink-70: var(--fg-2); --ink-55: var(--fg-3); --ink-40: var(--fg-3);
  --rule: var(--line); --rule-strong: var(--line-strong); --green: var(--primary); --green-hover: var(--primary-hover); --green-pale: var(--primary-soft); --on-green: var(--on-primary);
  --amber: var(--warn); --serif: var(--sans); --radius: var(--r-ctl); --radius-lg: var(--r); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--sans); padding-inline: 16px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); -webkit-font-smoothing: antialiased; }
.top, .views, .credits { max-width: 600px; margin-inline: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
small { display: block; font-size: .8rem; color: var(--fg-3); }
.muted { color: var(--fg-3); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.ico { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.18em; flex: none; }

/* Header: brand, connection, level ring */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; flex: none; }
.brand-mark { width: 28px; height: 28px; display: block; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; margin-inline: -16px; position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--line); }
@media (min-width: 632px) { .top { margin-inline: auto; padding-inline: 0; box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); } }
.wordmark { font: 400 1.5rem/1 var(--display); letter-spacing: -.005em; }   /* the brand's own face, from LOGO/ */
.wordmark em { font-style: italic; color: var(--primary); }
.wordmark span { display: block; font: 500 .62rem var(--sans); letter-spacing: .02em; color: var(--fg-3); margin-top: 3px; }
.top-actions { display: flex; gap: 8px; align-items: center; min-width: 0; }
.conn { font-size: .68rem; color: var(--fg-3); max-width: 10rem; min-width: 4.4rem; text-align: right; line-height: 1.2; }
.conn[data-state="connected"] { color: var(--primary); } .conn[data-state="down"] { color: var(--bad); }
.chip { border: 0; background: var(--surface); border-radius: 999px; padding: 4px 12px 4px 4px; display: inline-flex; align-items: center; gap: 8px; font: 600 .8rem var(--sans); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-strong); transition: transform var(--t); }
.chip:active { transform: scale(.97); }
.ring { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--gold-line) calc(var(--p, 0) * 1%), var(--line) 0); transition: --p .9s cubic-bezier(.16,1,.3,1); }
.ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.ring b { position: relative; z-index: 1; font: 700 .8rem var(--mono); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: var(--fg-2); transition: transform var(--t), border-color var(--t); }
.icon-btn:hover { color: var(--fg); border-color: var(--primary); } .icon-btn:active { transform: scale(.95); }

/* Type scale */
.h1 { font: 800 clamp(1.7rem, 6vw, 2.2rem)/1.08 var(--sans); letter-spacing: -.03em; margin: 0 0 6px; text-wrap: balance; }
.h2 { font: 700 1.25rem/1.2 var(--sans); letter-spacing: -.02em; margin: 0; }
.h3 { font: 600 .78rem var(--sans); letter-spacing: .02em; color: var(--fg-3); margin: 18px 0 8px; }
.lead { color: var(--fg-2); margin: 0 0 14px; max-width: 58ch; }
.eyebrow, .label { font: 600 .74rem var(--sans); color: var(--fg-3); margin: 0 0 4px; display: block; }
.label.inline { display: inline-block; margin: 0 6px 0 0; }
.note { font-size: .84rem; color: var(--fg-3); margin: 12px 0 0; max-width: 62ch; }
.ok { color: var(--primary); } .bad { color: var(--bad); }

/* Layout */
.views { display: grid; }
.view { display: grid; gap: 14px; padding-block: 6px 20px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; min-width: 0; }
.panel.plain { background: transparent; border: 0; padding-inline: 0; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 380px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* Controls */
.btn { border: 1px solid transparent; border-radius: 999px; padding: 12px 20px; font-size: .95rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: transform var(--t), background var(--t), border-color var(--t); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.primary:disabled { background: var(--line-strong); color: var(--fg-3); cursor: default; transform: none; }
.btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--fg-2); }
.btn.ghost:hover { border-color: var(--primary); color: var(--fg); }
.btn.small { padding: 8px 14px; font-size: .84rem; min-height: 36px; }
.btn.block { width: 100%; margin-top: 12px; padding-block: 14px; font-size: 1rem; white-space: normal; flex-wrap: wrap; }
.btn .xp { font: 700 .78rem var(--mono); background: var(--gold-soft); color: var(--gold); border-radius: 999px; padding: 2px 8px; }
.btn.primary .xp { background: rgba(0,0,0,.18); color: inherit; }
.link { background: none; border: 0; color: var(--primary); padding: 6px 0; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
input, select { background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 11px 12px; width: 100%; min-width: 0; min-height: 44px; }
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input.num { width: 7rem; } input.num.small { width: 4.5rem; text-align: center; }
.form { display: grid; gap: 4px; } .form .label { margin-top: 10px; } .form .row .label { margin-top: 0; }
.check { display: flex; gap: 8px; align-items: center; font-size: .9rem; } .check input { width: auto; min-height: 0; }
.code-row input { flex: 1; }
.seg { display: inline-flex; gap: 6px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px; margin: 4px 0 8px; }
/* Every option looks like a button, chosen or not, so nobody thinks one is missing. */
.seg button { border: 1px solid var(--line-strong); background: var(--surface-2); padding: 8px 16px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--fg); min-height: 36px; }
.seg button:hover:not(.on) { background: var(--primary-soft); border-color: var(--primary); }
/* The chosen option must read at a glance in both themes: brand fill, not a near-match surface. */
.seg button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); }
video { width: 100%; border-radius: var(--r); margin-top: 12px; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }
input[type=range] { padding: 0; border: 0; min-height: 0; accent-color: var(--primary); background: transparent; }

/* Mission strip: the Frontline, on every acting screen */
.mission { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 0 0 16px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; cursor: pointer; text-align: left; width: 100%; }
.mission:hover { border-color: var(--primary); }
.mission .ico { width: 26px; height: 26px; color: var(--primary); }
.mission-name { font-weight: 700; letter-spacing: -.01em; }
.mission-sub { font-size: .8rem; color: var(--fg-3); }
.mission .bar { margin: 6px 0 0; }
.mission-pct { font: 700 1.1rem var(--mono); color: var(--primary); }

/* Progress bars (the game's heartbeat) */
.bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.bar span { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width var(--t-slow); }
.bar.gold span { background: var(--gold-line); }
.bar.thin { height: 5px; margin: 6px 0 4px; } .bar.small { height: 5px; margin-top: 6px; }
.row.small { font-size: .8rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* Basket */
.items { list-style: none; margin: 10px 0 0; padding: 0; }
.item { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main co2" "main step"; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item-main { grid-area: main; text-align: left; background: none; border: 0; padding: 0; min-width: 0; }
.item-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.item-sub { display: block; font-size: .78rem; color: var(--fg-3); }
.item-co2 { grid-area: co2; text-align: right; font: 600 .95rem var(--mono); }
.stepper { grid-area: step; display: inline-flex; align-items: center; gap: 8px; justify-self: end; font: .9rem var(--mono); }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2); line-height: 1; }
.tier { display: inline-block; margin-top: 5px; font: 600 .64rem var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--bg-2); color: var(--fg-2); }
.tier.t1 { background: var(--primary-soft); color: var(--primary); } .tier.t4 { color: var(--warn); }
.empty { color: var(--fg-3); padding: 14px 0; list-style: none; font-size: .9rem; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; }
.total-row strong { font: 800 1.6rem var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.shelf { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.shelf-item { width: 100%; height: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; font-size: .86rem; font-weight: 600; transition: transform var(--t), border-color var(--t); }
.shelf-item small { font-weight: 400; }
.shelf-item:hover { border-color: var(--primary); } .shelf-item:active { transform: scale(.97); }

/* Countries: the world clock */
.clock { display: grid; gap: 4px; padding: 6px 0 10px; }
.clock-big { font: 800 clamp(2rem, 9vw, 3rem)/1 var(--sans); letter-spacing: -.04em; }
.clock-big em { font-style: normal; color: var(--primary); }
.clock-sub { color: var(--fg-3); font-size: .9rem; }
.clock-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.stat { display: grid; gap: 0; }
.stat b { font: 700 1.05rem var(--mono); } .stat small { font-size: .72rem; }
.front { background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-top: 12px; }
.front-name { font: 800 2rem/1.05 var(--sans); letter-spacing: -.03em; margin: 2px 0 10px; }
.legend { display: flex; gap: 6px 12px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .78rem; color: var(--fg-3); margin: 8px 0; }
.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw.ok { background: var(--ok); } .sw.warn { background: var(--warn); } .sw.bad { background: var(--bad); } .sw.wait { background: var(--globe-wait); }
.queue { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.q { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; min-width: 0; background: var(--surface-2); }
.q-num { font: 700 .78rem var(--mono); color: var(--fg-3); }
.q-name { font-weight: 600; overflow-wrap: anywhere; } .q-t { font: .74rem var(--mono); color: var(--fg-3); white-space: nowrap; }
.q.cleared { border-color: var(--ok); background: var(--primary-soft); } .q.cleared .q-num { color: var(--ok); }
.q.current { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.q.more { grid-template-columns: 1fr; border-style: dashed; color: var(--fg-3); text-align: center; }
.sim-out { margin-top: 8px; min-height: 2.5em; font-size: .9rem; }
.globe-wrap { width: min(100%, 420px); margin: 8px auto 0; }
.globe { width: 100%; aspect-ratio: 1; display: block; touch-action: none; cursor: grab; }
.globe:active { cursor: grabbing; }
.hint { text-align: center; font-size: .78rem; margin: 0 0 10px; }
.picked { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; background: var(--surface-2); }
.picked small { flex-basis: 100%; }
.pill { font: 600 .68rem var(--sans); text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); }
.pill.cleared { background: var(--ok); color: var(--on-primary); } .pill.current { background: var(--warn); color: #1a1205; } .pill.waiting { background: var(--globe-wait); color: var(--fg); }
.target-box { display: grid; gap: 4px; margin: 4px 0 6px; } .target-box .seg { justify-self: start; }

/* Me: the command centre */
.hero-card { background: radial-gradient(120% 90% at 100% 0%, var(--primary-soft), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px; display: grid; gap: 12px; }
.hero-top { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ring.big { width: 84px; height: 84px; } .ring.big::after { inset: 6px; } .ring.big b { font-size: 1.5rem; }
.hero-title { font: 800 1.35rem/1.1 var(--sans); letter-spacing: -.02em; }
.hero-sub { color: var(--fg-3); font-size: .85rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-tile { background: var(--surface-2); border-radius: var(--r-ctl); padding: 10px 12px; display: grid; gap: 2px; }
.stat-tile b { font: 700 1.05rem var(--mono); } .stat-tile small { font-size: .7rem; }
.stat-tile .ico { color: var(--gold); }
.quests { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.quest { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px 14px; transition: border-color var(--t), transform var(--t); }
.quest:hover { border-color: var(--primary); } .quest:active { transform: scale(.99); }
.quest strong { font-weight: 700; } .quest small { font-size: .78rem; }
.quest .bar { grid-column: 1 / -1; margin: 6px 0 0; }
.quest .xp { font: 700 .76rem var(--mono); color: var(--gold); align-self: start; }
.shelf-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 10px; margin-inline: -16px; scroll-snap-type: x proximity; }
.badge-tile { flex: 0 0 118px; scroll-snap-align: start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px; display: grid; gap: 6px; justify-items: center; text-align: center; font-size: .78rem; min-height: 112px; }
.badge-tile .ico { width: 30px; height: 30px; color: var(--gold); }
.badge-tile.off { color: var(--fg-3); border-style: dashed; } .badge-tile.off .ico { color: var(--fg-3); }
.badge-tile b { font-weight: 700; line-height: 1.15; } .badge-tile small { font-size: .68rem; }
.league, .history, .partners { list-style: none; padding: 0; margin: 8px 0 0; }
.league li, .hist { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.league li.you { font-weight: 700; color: var(--primary); }
.league .rank { font: 700 .8rem var(--mono); width: 2rem; color: var(--fg-3); }
.league li:nth-child(1) .rank, .league li:nth-child(2) .rank, .league li:nth-child(3) .rank { color: var(--gold); }
.hist { width: 100%; background: none; border-width: 0 0 1px; text-align: left; }
.hist-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.hist-row .hist { flex: 1; min-width: 0; border: 0; } .hist-row .mono { white-space: nowrap; } .hist-row .hist > span:first-child .mono { font-size: .8rem; }
.partners li { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.partners .btn { justify-self: start; }
.level { display: flex; gap: 14px; align-items: center; margin: 6px 0; }
.level-id { font: 800 2.4rem/1 var(--sans); color: var(--primary); }

/* Tab bar: icons + short labels, the only fixed element */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; background: var(--bg); border-top: 1px solid var(--line);   /* solid: nothing scrolls through it */ padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
.tabs button { flex: 1; max-width: 96px; min-height: 52px; background: none; border: 0; border-radius: var(--r-ctl); padding: 6px 2px; font-size: .68rem; font-weight: 600; letter-spacing: .01em; color: var(--fg-3); display: grid; justify-items: center; gap: 3px; transition: background var(--t), color var(--t); }
.tabs button .ico { width: 22px; height: 22px; }
.tabs button[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

/* Toast and sheets */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; max-width: calc(100% - 32px); z-index: 20; }
.sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sheet-body { position: relative; background: var(--bg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px)); animation: up .32s cubic-bezier(.16,1,.3,1); }
.sheet-body::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 0 auto 14px; }
@keyframes up { from { transform: translateY(32px); opacity: 0; } }
.sheet-title { font: 800 1.45rem/1.1 var(--sans); letter-spacing: -.02em; margin: 0 0 12px; overflow-wrap: anywhere; }
.sheet .row .btn { flex: 1; }
.sheet select, .sheet input { margin-bottom: 4px; }
.kv { margin: 0; display: grid; }
.kv div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { font: 600 .72rem var(--sans); color: var(--fg-3); padding-top: 3px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { .kv div { grid-template-columns: 1fr; gap: 2px; } }
.choice { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 12px; cursor: pointer; background: var(--surface); }
.opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.opt input { width: auto; min-height: 0; margin-top: 4px; accent-color: var(--primary); }
.opt > span { display: grid; gap: 4px; min-width: 0; flex: 1; } .opt select { margin-top: 4px; }

/* Reward moment: XP, level, badges, then the receipt */
.reward { display: grid; gap: 10px; background: radial-gradient(90% 70% at 50% 0%, var(--gold-soft), transparent 70%), var(--surface); border: 1px solid var(--gold-line); border-radius: var(--r); padding: 18px 16px; text-align: center; position: relative; overflow: hidden; }
.reward-xp { font: 800 clamp(2rem, 10vw, 2.8rem)/1 var(--mono); color: var(--gold); letter-spacing: -.03em; animation: pop .5s cubic-bezier(.16,1,.3,1); }
.reward-sub { color: var(--fg-2); font-weight: 600; }
.reward .bar { margin: 4px 0 0; }
.reward-lv { display: flex; justify-content: space-between; font: 600 .78rem var(--mono); color: var(--fg-3); }
.levelup { font: 800 1.1rem var(--sans); color: var(--gold); letter-spacing: .02em; text-transform: uppercase; animation: pop .6s cubic-bezier(.16,1,.3,1); }
.new-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 4px; }
.chip-badge { border: 1px solid var(--primary); background: var(--primary-soft); color: var(--fg); border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; animation: pop .45s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.chip-badge.gold { border-color: var(--gold-line); background: var(--gold-soft); }
.chip-badge .ico { color: var(--gold); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -10px; left: calc(var(--x) * 1%); width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: fall 1.4s ease-in forwards; animation-delay: calc(var(--d) * 1ms); transform: rotate(calc(var(--r) * 1deg)); }
@keyframes fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(260px) rotate(540deg); } }
.receipt-toggle { margin-top: 8px; }

/* Receipt: a till slip */
.receipt { background: var(--surface); border: 1px solid var(--line-strong); padding: 18px 16px 26px; font-family: var(--mono); font-size: .82rem; border-radius: 6px;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0/12px 100%; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0/12px 100%; }
.r-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line-strong); padding-bottom: 8px; }
.r-head strong { font: 800 1.1rem var(--sans); }
.r-head span { text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--fg-3); }
.r-meta { color: var(--fg-3); font-size: .72rem; margin: 8px 0; }
.r-sub { margin: 6px 0; font-weight: 500; }
.r-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.r-line span:first-child { overflow-wrap: anywhere; } .r-line span:last-child { white-space: nowrap; }
.r-total { border-top: 1px dashed var(--line-strong); margin-top: 6px; padding-top: 8px; font-weight: 700; }
.r-foot { border-top: 1px dashed var(--line-strong); margin-top: 10px; padding-top: 8px; color: var(--fg-3); font-size: .72rem; }
.r-foot a { color: var(--primary); }
.meals { list-style: none; padding: 0; margin: 0; }
.meals li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.result { margin-top: 8px; }

/* Badge book and skill tree */
.badge-total { margin: 6px 0 12px; color: var(--fg-2); }
.badge-total strong { font: 800 1.6rem var(--sans); color: var(--gold); margin-right: 4px; }
.fams { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.fam { border: 1px dashed var(--line-strong); border-radius: var(--r-ctl); padding: 10px 12px; min-width: 0; }
.fam.on { border-style: solid; border-color: var(--gold-line); background: var(--gold-soft); }
.fam-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fam-name { font: 600 .7rem var(--sans); color: var(--fg-3); } .fam-count { font: 700 .8rem var(--mono); color: var(--gold); }
.fam-latest { font-weight: 600; margin: 4px 0 2px; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tree-summary { display: grid; gap: 6px; margin: 6px 0 4px; }
.tree-summary strong { font: 800 1.6rem var(--sans); color: var(--primary); }
.next-up { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.next { width: 100%; text-align: left; display: grid; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; }
.next:hover { border-color: var(--primary); } .next .bar { margin: 0; }
.tree { margin-top: 18px; display: grid; gap: 10px; }
.tree-root { display: flex; justify-content: center; }
.tree-scroll { overflow-x: auto; margin-inline: -16px; padding: 4px 16px 8px; scroll-snap-type: x proximity; }
.branches { display: flex; gap: 10px; width: max-content; }
.branch { width: 136px; display: flex; flex-direction: column; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 6px 12px; scroll-snap-align: start; }
.branch-head { font: 700 .74rem var(--sans); color: var(--fg-2); text-align: center; margin-bottom: 8px; }
.branch-head small { font-weight: 400; }
.link-line { width: 2px; height: 14px; background: var(--line-strong); }
.skill { background: none; border: 0; display: grid; justify-items: center; gap: 2px; padding: 2px; width: 100%; color: inherit; }
.skill-ring { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--line) 0); transition: transform var(--t); }
.skill:active .skill-ring { transform: scale(.94); }
.skill-core { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 700 1rem var(--sans); }
.skill.maxed .skill-core { background: var(--gold-line); color: #1a1205; }
.skill.active .skill-core { color: var(--primary); }
.skill.locked .skill-ring { background: none; border: 1.5px dashed var(--line-strong); }
.skill.locked .skill-core { color: var(--fg-3); background: transparent; } .skill.locked .skill-name { color: var(--fg-3); }
.skill-name { font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.2; margin-top: 2px; }
.skill-sub { font-size: .68rem; color: var(--fg-3); }
.mastery .skill-ring { width: 70px; height: 70px; } .mastery .skill-core { width: 58px; height: 58px; font-size: 1.3rem; }
.levels { list-style: none; padding: 0; margin: 12px 0 0; }
.levels li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--fg-3); }
.levels li.done { color: var(--fg); } .levels li.done span:last-child { color: var(--primary); font-weight: 600; }
.levels .lv { font-weight: 700; }
.locked-note { border: 1px dashed var(--line-strong); border-radius: var(--r-ctl); padding: 8px 10px; font-size: .88rem; }

/* Business */
.split { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.split li { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 10px; align-items: center; font-size: .85rem; }
.split-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.split-bar span { display: block; height: 100%; background: var(--primary); }
.mandate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mandate small { display: block; color: var(--fg-3); }

/* Claims discipline: every unit count carries the simulated tag. 6.9 to 1 in both themes on purpose. */
.tag { display: inline-block; font: 700 .64rem/1.4 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: #7a4a00; background: #fff4dc; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.credits { padding: 18px 0 100px; font-size: .78rem; color: var(--fg-3); line-height: 1.5; }
.credits p { margin: 0 0 8px; } .credits a { color: var(--primary); }
.mono.wrap { word-break: break-all; }

/* Motion off when asked */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Level chip with its title */
#level-text { display: grid; line-height: 1.05; text-align: left; }
#level-text small { font: 600 .62rem var(--sans); color: var(--gold); }
.hero-rank { font: 700 .8rem var(--sans); color: var(--gold); margin-top: 2px; display: inline-flex; gap: 4px; align-items: center; }

/* Today: three daily quests */
.daily-head { display: flex; justify-content: space-between; align-items: center; }
.daily-head strong { font: 700 1.05rem var(--sans); display: inline-flex; gap: 6px; align-items: center; }
.daily-head .ico { color: var(--gold); }
.daily-count { font: 700 .8rem var(--mono); background: var(--bg-2); border-radius: 999px; padding: 3px 10px; }
.daily-count.all { background: var(--gold-soft); color: var(--gold); }
.daily-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.daily-list li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--fg-2); }
.daily-list li .ico { width: 20px; height: 20px; color: var(--fg-3); }
.daily-list li.done { color: var(--fg); }
.daily-list li.done .ico { color: var(--primary); }
.daily-list li.done span { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.daily-done { margin: 10px 0 0; font-weight: 600; color: var(--gold); font-size: .88rem; }

/* Brand moments */
.reward-mark { justify-self: center; display: block; margin-bottom: -4px; }
.r-brand { display: inline-flex; gap: 6px; align-items: center; }
.r-brand img { width: 20px; height: 20px; }
.verify-head { display: flex; gap: 12px; align-items: center; }
.onboard { display: grid; gap: 10px; text-align: left; }
.onboard-mark { justify-self: start; }
.onboard-steps { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; counter-reset: s; }
.onboard-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.onboard-steps .ico { width: 28px; height: 28px; color: var(--primary); }
.onboard-steps strong { font-weight: 700; }

/* QA 2026-10-12: long names wrap instead of widening the page; the skill tree shows its scrollbar on desktop;
   the connection status stays on one line. */
.hero-title, .hero-sub, .league li span, .mission-name { overflow-wrap: anywhere; min-width: 0; }
.hero-top > div { min-width: 0; }
.conn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
@media (hover: hover) { .tree-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding-bottom: 12px; } }
/* Small phones: the brand never shrinks under the connection state. The level ring keeps its number and drops its
   words, and the state wraps to two lines rather than being cut off, so "Ledger not reachable" is always readable. */
@media (max-width: 480px) {
  #level-text { display: none; } .chip { padding-right: 4px; }
  .conn { white-space: normal; max-width: 5.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 380px) { .wordmark { font-size: 1.12rem; } }
@media (max-width: 340px) { .wordmark { display: none; } }   /* the leaf mark stays, and the link keeps its label */

/* ===== Design pass 2026-10-13: one product with the website, and a real desktop layout =====
   Ruled ledger lines and a little grain behind everything, layered panels, display serif for the big moments,
   a left rail on wide screens, two masonry columns for screens with many panels. */

/* Surfaces: ruled lines like the website's ledger, a soft light from the top left, a fixed grain */
body { position: relative; isolation: isolate; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(70% 55% at 12% -5%, var(--primary-soft), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 47px, color-mix(in srgb, var(--primary) 6%, transparent) 47px 48px); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.panel { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, var(--primary) 3%), var(--surface));
  border-color: var(--line); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 5%, transparent), var(--shadow); padding: 22px 20px; }
.panel.plain { box-shadow: none; background: transparent; }
.top { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
@media (min-width: 632px) { .top { box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 82%, transparent); } }

/* Type: the website's display serif for headlines and the big numbers */
.h1 { font: 400 clamp(2.2rem, 7.5vw, 3.1rem)/1 var(--display); letter-spacing: -.01em; margin: 0 0 10px; }
.clock-big, .front-name, .sheet-title, .hero-title, .level-id { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }
.clock-big { font-size: clamp(2.6rem, 10vw, 3.6rem); }
.hero-title { font-size: 1.8rem; } .sheet-title { font-size: 1.9rem; } .front-name { font-size: 2.4rem; }
.h2 { font-weight: 600; letter-spacing: -.01em; }
.lead { line-height: 1.6; text-wrap: pretty; } .note, .credits p { text-wrap: pretty; }
.total-row strong, .reward-xp, .badge-total strong, .tree-summary strong { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
.eyebrow { font: 500 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }

/* Controls: alive on hover, physical on press, a tinted glow on the main action */
.btn { transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t); }
.btn.primary:hover { box-shadow: var(--glow); transform: translateY(-1px); }
.btn.ghost:hover { background: var(--primary-soft); }
.btn:active, .btn.primary:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.mission { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.mission:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.quest, .next, .shelf-item, .q, .badge-tile, .stat-tile, .daily-list li { transition: border-color var(--t), transform var(--t), background var(--t); }
.shelf-item:hover, .quest:hover, .next:hover { transform: translateY(-2px); }
input, select { transition: border-color var(--t), box-shadow var(--t); }
input:hover, select:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--line-strong)); }

/* Tab bar on phones: glass, with a lit indicator on the current tab */
.tabs { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.tabs button { position: relative; transition: background var(--t), color var(--t), transform var(--t); }
.tabs button:hover { color: var(--fg); }
.tabs button:active { transform: scale(.95); }
.tabs button[aria-current="page"]::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--primary); box-shadow: 0 0 12px var(--primary); }

/* Screens arrive in a short cascade instead of all at once */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view:not([hidden]) > * { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
.view:not([hidden]) > :nth-child(2) { animation-delay: .05s; } .view:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
.view:not([hidden]) > :nth-child(4) { animation-delay: .15s; } .view:not([hidden]) > :nth-child(n+5) { animation-delay: .2s; }

/* Wide screens: a left rail instead of a phone tab bar, and the content gets room */
@media (min-width: 1024px) {
  body { padding-left: 264px; padding-right: 40px; padding-bottom: 0; }
  .top, .views, .credits { max-width: 1120px; }
  .top { margin-inline: auto; padding-inline: 4px; }
  .tabs { top: 0; bottom: 0; right: auto; width: 232px; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 92px 14px 24px; border-top: 0; border-right: 1px solid var(--line); }
  .tabs::before { content: "Sections"; font: 500 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); padding: 0 14px 10px; }
  .tabs button { flex: none; max-width: none; min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    font-size: .95rem; font-weight: 500; letter-spacing: 0; justify-items: start; }
  .tabs button .ico { width: 20px; height: 20px; }
  .tabs button:hover { background: var(--primary-soft); transform: translateX(2px); }
  .tabs button[aria-current="page"] { font-weight: 600; }
  .tabs button[aria-current="page"]::before { top: 10px; bottom: 10px; left: -14px; right: auto; width: 3px; height: auto; }
  /* screens with many panels flow in two balanced columns; a single form stays one readable column */
  .view { display: block; columns: 2; column-gap: 20px; padding-block: 18px 32px; }
  .view > * { break-inside: avoid; margin-bottom: 20px; display: block; width: 100%; }
  .view:has(> :only-child), #view-travel, #view-daily { columns: 1; max-width: 760px; margin-inline: auto; }
  .h1 { font-size: 3.2rem; }
  .credits { padding-bottom: 40px; }
  .toast { bottom: 28px; left: calc(50% + 116px); }
  /* sheets become a centred dialog on desktop */
  .sheet { align-items: center; padding-left: 232px; }
  .sheet-body { border-radius: 24px; max-height: 86vh; max-width: 620px; box-shadow: 0 30px 80px rgba(0,0,0,.5); border: 1px solid var(--line); }
  .sheet-body::before { display: none; }
  .shelf-row, .tree-scroll { margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1440px) { body { padding-left: 288px; } .tabs { width: 248px; } }
/* A wide child (the skill tree scrolls sideways) must never widen the screen */
.views { grid-template-columns: minmax(0, 1fr); } .view { min-width: 0; }

/* The app names itself, and always has a way back to the website */
.app-tag { display: inline-block; margin-left: 8px; vertical-align: 4px; font: 600 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-primary); background: var(--primary); border-radius: 6px; padding: 4px 6px; }
.brand:hover .wordmark em { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rail-links { display: none; }
.app-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .app-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
@media (min-width: 1024px) {
  .rail-links { display: grid; gap: 2px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
  .rail-links a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-ctl); color: var(--fg-3); text-decoration: none; font-size: .9rem; transition: background var(--t), color var(--t); }
  .rail-links a:hover { background: var(--primary-soft); color: var(--fg); }
}
@media (max-width: 380px) { .app-tag { display: none; } }