/* =====================================================================
   Pour — alcohol tracker

   RETRO ARCADE, on a lifted navy. Three rules hold the look together:

   1. SOLID PANELS, NOT OUTLINES. Version one outlined every element with a
      hairline and read as a developer dashboard. Panels here are filled
      blocks that sit visibly above the background with a hard offset
      shadow. Grouping is done by the fill, not by a 1px border.

   2. HARD SHADOWS, NEVER BLURRED. `box-shadow: 4px 4px 0` — no blur
      radius, no alpha. A blurred shadow reads as Material; a hard one
      reads as a button on a cabinet. Pressable things sink into their
      shadow on :active.

   3. SEGMENTED METERS. Progress bars are chopped into blocks by an
      overlay gradient, not drawn as smooth fills. Smooth bars are the
      single most "techy dashboard" element there is.

   Square corners throughout — every radius goes through the three tokens
   below, so the whole thing rounds again by editing three lines.

   Still dark enough to open at 01:00 in a bar, but off near-black: the
   background carries actual colour and the panels are clearly above it.

   Colour is meaning, not decoration:
     mint   under the guideline, active, good
     red    over the guideline — the only red in the app
     gold   XP, levels, badges
     grape  rank and structural accents
   ===================================================================== */

:root{
  /* ---- the lifted navy ---- */
  --bg:#171a2b;           /* page */
  --surface:#212842;      /* panels — visibly above the page */
  --surface-2:#2c3357;    /* meter troughs, inputs, pressed */
  --surface-3:#3a4270;    /* chips, raised */
  --shadow:#0c0e18;       /* the hard offset shadow — darker than the page */

  --line:#2c3357;         /* separators inside a panel */
  --line-2:#454e80;       /* borders around controls */

  --fg:#ffffff;
  --fg-2:#b6c0e0;
  --fg-3:#8792bd;

  --accent:#2ee6a8;       /* mint */
  --accent-ink:#08221a;   /* text on mint */
  --warn:#ff4d6d;
  --warn-ink:#2a0710;
  --xp:#ffc93c;           /* arcade gold */
  --xp-ink:#2c1f00;
  --grape:#7b6cff;

  /* Squared off on purpose. Every radius in this file goes through one of these three
     tokens — there are no hardcoded border-radius values anywhere else — so going back
     to rounded is editing these three lines and nothing else.
     Rounded values were: --r:12px, --r-sm:8px, --r-pill:99px. */
  --r:0;
  --r-sm:0;
  --r-pill:0;

  --pad:18px;
  --gap:26px;
  --tabbar:64px;
  --bw:2px;               /* the standard border weight — chunky, not hairline */

  /* Five sizes. Adding a sixth is how an earlier version got noisy. */
  --t-hero:60px;
  --t-title:24px;
  --t-body:15px;
  --t-small:13px;
  --t-micro:11px;

  --font:-apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
         system-ui, "Helvetica Neue", sans-serif;
}

/* min-width:0 is deliberate — flex and grid children default to min-width:auto,
   which lets a long drink name blow the layout past the viewport. */
*{ box-sizing:border-box; margin:0; padding:0; min-width:0; }

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  background:var(--bg);
  color:var(--fg);
  font:500 var(--t-body)/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

input,select,textarea{ user-select:text; font:inherit; color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ===================== THE ARCADE PRIMITIVES ===================== */

/* A filled block that sits above the page. This is the workhorse. */
.card{
  background:var(--surface);
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r);
  box-shadow:4px 4px 0 var(--shadow);
  padding:18px;
}

/* Anything you can press: hard shadow, and it sinks when you press it. */
.press{
  box-shadow:3px 3px 0 var(--shadow);
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.press:active{
  transform:translate(3px,3px);
  box-shadow:0 0 0 var(--shadow);
}

/* Labels are stencilled, not sentence case. */
.stencil{
  font-size:var(--t-micro);
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

/* ===================== SHELL ===================== */

.app{ display:flex; flex-direction:column; height:100dvh; }
.content{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.panel{ display:none; padding:0 var(--pad) calc(var(--tabbar) + 110px); }
.panel.is-active{ display:block; }

.lt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(env(safe-area-inset-top) + 22px) 0 18px;
}

.lt-title{
  font-size:var(--t-title);
  font-weight:900;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:var(--r-pill);
  border:var(--bw) solid var(--line-2);
  background:var(--surface);
  box-shadow:3px 3px 0 var(--shadow);
  color:var(--fg-2);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.pill:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow); }

.dot{ width:9px; height:9px; border-radius:var(--r-pill); background:var(--accent); flex:none; }
.dot.is-pending{ background:var(--xp); }
.dot.is-offline{ background:var(--fg-3); }
.dot.is-syncing{ background:var(--accent); animation:blink .8s steps(2,end) infinite; }

/* Steps, not a smooth fade — a smooth pulse is the techy version of this. */
@keyframes blink{ 50%{ opacity:.2; } }

/* ===================== TABS ===================== */

.tabbar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:8px var(--pad) calc(env(safe-area-inset-bottom) + 8px);
  border-top:var(--bw) solid var(--line-2);
  background:var(--surface);
}

.tab{
  height:calc(var(--tabbar) - 22px);
  border:var(--bw) solid transparent;
  border-radius:var(--r-sm);
  color:var(--fg-3);
  font-size:var(--t-micro);
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* The active tab is a filled block, not a colour change. */
.tab.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}

/* ===================== HERO ===================== */

.hero{ margin-bottom:var(--gap); display:flex; align-items:center; gap:14px; }
.hero-main{ flex:1; }

.hero-figure{ display:flex; align-items:baseline; gap:8px; }

/* The streak counter. Sits in space the hero card already had, so it costs no scroll. */
.streak{
  flex:none;
  min-width:66px;
  padding:8px 6px;
  text-align:center;
  border:var(--bw) solid var(--xp);
  border-radius:var(--r-sm);
  background:rgba(255,201,60,.09);
}

.streak-n{ font-size:26px; font-weight:900; line-height:1; color:var(--xp); font-variant-numeric:tabular-nums; }
.streak-l{ font-size:9.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--xp); opacity:.75; margin-top:4px; line-height:1.25; }

.hero-n{
  font-size:var(--t-hero);
  font-weight:900;
  line-height:0.95;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
}

.hero-u{ font-size:var(--t-body); font-weight:800; color:var(--accent); text-transform:uppercase; }
.hero-sub{ margin-top:12px; color:var(--fg-2); font-size:var(--t-small); font-weight:600; }

/* ===================== BLOCKS ===================== */

.block{ margin-bottom:var(--gap); }

.block-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.block-title{
  font-size:var(--t-micro);
  font-weight:800;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fg-3);
  margin-bottom:12px;
}

.block-head .block-title{ margin-bottom:12px; }
.block-count{ color:var(--xp); letter-spacing:0.06em; }
.block-copy{ font-size:var(--t-small); color:var(--fg-2); margin:-4px 0 12px; }

.link{ font-size:var(--t-micro); font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.view-note{ font-size:var(--t-small); color:var(--fg-3); margin-bottom:16px; font-weight:600; }

/* ===================== SEGMENTED METERS ===================== */
/*
   The bar is chopped into blocks by an overlay gradient painted in the panel's own
   colour. `--notch` is what the gaps are filled with — it must match whatever the
   meter is sitting on, which is why cards set it.
*/

.meter{
  --notch:var(--bg);
  position:relative;
  height:16px;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  overflow:hidden;
}

.card .meter{ --notch:var(--surface); }

.meter-fill{
  height:100%;
  border-radius:var(--r-pill);
  background:var(--accent);
  transition:width .3s steps(12);
}

.meter-fill.xp{ background:var(--xp); }
.meter-fill.is-over{ background:var(--warn); }

/*
   HEALTH BAR. Budget meters show what is LEFT and drain as you spend it, rather than
   filling up as you drink. "You have 81 g left" is a game mechanic; "you have used
   18 g" is a dashboard reading. The XP bar is the one meter that still fills, because
   there it genuinely is progress toward something.
*/
.meter-fill.is-mid{ background:var(--xp); }
.meter-fill.is-low{ background:var(--warn); }
.meter-fill.is-empty{ width:0 !important; }

.meter::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, var(--notch) 9px 13px);
}

/* ===================== LINES ===================== */

.line{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.line-label{ font-size:var(--t-micro); font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-3); }
.line-label b{ color:var(--fg); font-size:var(--t-body); letter-spacing:0; }
.line-value{ font-size:var(--t-body); font-weight:800; font-variant-numeric:tabular-nums; }
.line-value.xp{ color:var(--xp); }
.line-foot{ margin-top:10px; font-size:var(--t-small); font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums; }

/* ===================== SEGMENTED CONTROL ===================== */

.seg{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:20px;
}

.seg-b{
  padding:11px 0;
  font-size:var(--t-micro);
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg-2);
  background:var(--surface);
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-sm);
  box-shadow:3px 3px 0 var(--shadow);
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.seg-b:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow); }

/*
   A SELECTED state must not move. The pressed look here used to be the same
   translate(3px,3px) as a momentary press, which knocked the selected segment 3px down
   and right of its neighbours and made the whole row look misaligned. Recess it with an
   INSET shadow instead: the box stays exactly where it was, the top edges keep lining
   up, and it still reads as pushed in. Same fix applies to .choice.is-active below.
*/
.seg-b.is-active{
  background:var(--grape);
  border-color:var(--grape);
  color:#fff;
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.3);
}

.view{ display:none; }
.view.is-active{ display:block; }

/* ===================== WEEK STRIP ===================== */

.strip{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  align-items:end;
  margin-bottom:var(--gap);
}

.sd{ display:flex; flex-direction:column; align-items:center; gap:8px; }

.sd-bar{
  width:100%;
  height:62px;
  display:flex;
  align-items:flex-end;
  background:var(--surface-2);
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
}

.sd-fill{ width:100%; min-height:3px; border-radius:var(--r-sm); background:var(--accent); }

.sd.is-over .sd-fill{ background:var(--warn); }
/* A day with nothing on it is not an achievement bar — it's a neutral tick. Mint is
   reserved for days that actually have something in them and stayed under. */
.sd.is-dry .sd-fill,
.sd.is-future .sd-fill{ background:var(--surface-3); }
.sd.is-future{ opacity:.45; }

.sd-d{ font-size:var(--t-micro); font-weight:800; letter-spacing:0.08em; color:var(--fg-3); }
.sd.is-today .sd-bar{ border-color:var(--fg); }
.sd.is-today .sd-d{ color:var(--fg); }

/* ===================== GAUGES ===================== */

.gauges{ margin-bottom:var(--gap); }

.gauge{ padding:16px 0; border-top:var(--bw) solid var(--line); }
.gauge:first-child{ border-top:0; padding-top:0; }
.gauge:last-child{ padding-bottom:0; }

.gauge-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:3px; }
.gauge-label{ font-size:var(--t-small); font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.gauge-figure{ font-size:var(--t-body); font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.gauge-note{ font-size:var(--t-micro); color:var(--fg-3); margin-bottom:12px; font-weight:600; }
.gauge-foot{ margin-top:10px; font-size:var(--t-small); font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums; }

.gauge.is-over .gauge-figure,
.gauge.is-over .gauge-foot{ color:var(--warn); }
.gauge.is-over .meter-fill{ background:var(--warn); }

/* ===================== STATS ===================== */

.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--bw);
  background:var(--line-2);
  border:var(--bw) solid var(--line-2);
  box-shadow:4px 4px 0 var(--shadow);
}

/* The 2px grid gap IS the divider — cheaper than borders and it reads as a scoreboard. */
.stat{ background:var(--surface); padding:16px; }
.stat-v{ font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.stat-l{ font-size:var(--t-micro); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-3); margin-top:5px; }

/* ===================== CHART ===================== */

.chart{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:150px;
  padding-top:14px;
  border-bottom:var(--bw) solid var(--line-2);
  position:relative;
  margin-bottom:14px;
}

.bar{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
/* No min-height: a dry week must draw nothing. app.js gives non-zero weeks a 6% floor. */
.bar-fill{ background:var(--surface-3); border-radius:var(--r-sm); }
.bar.is-over .bar-fill{ background:var(--warn); }
.bar.is-current .bar-fill{ background:var(--accent); }

.guide-line{ position:absolute; left:0; right:0; border-top:var(--bw) dashed var(--line-2); pointer-events:none; }

.guide-tag{
  position:absolute; right:0; transform:translateY(-100%);
  font-size:10px; font-weight:800; letter-spacing:0.06em;
  color:var(--fg-3); background:var(--bg); padding:0 4px;
}

.day-group{ margin-bottom:20px; }

.day-head{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface-3);
  padding:8px 12px;
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-sm);
  margin-bottom:4px;
}

.day-date{ font-size:var(--t-micro); font-weight:800; letter-spacing:0.1em; text-transform:uppercase; }
.day-total{ font-size:var(--t-small); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }

/* ===================== ENTRIES ===================== */

.entries{ list-style:none; }

.entry{
  display:flex; align-items:center; gap:12px;
  padding:13px 12px;
  background:var(--surface);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  width:100%; text-align:left;
  margin-bottom:6px;
}

.entry:active{ background:var(--surface-2); }
.entry-main{ flex:1; }
.entry-name{ font-size:var(--t-body); font-weight:700; display:block; }
.entry-meta{ color:var(--fg-3); font-size:var(--t-micro); font-weight:600; margin-top:3px; display:block; font-variant-numeric:tabular-nums; }
.entry-figures{ text-align:right; flex:none; font-variant-numeric:tabular-nums; }
.entry-g{ font-size:var(--t-body); font-weight:800; color:var(--accent); }
.entry-k{ color:var(--fg-3); font-size:var(--t-micro); font-weight:600; }
.pending{ color:var(--xp); font-weight:800; }

.empty{ color:var(--fg-3); font-size:var(--t-small); font-weight:600; padding:8px 0; }

/* ===================== FAVOURITES ===================== */

.favs{ display:flex; flex-wrap:wrap; gap:8px; }

.fav{
  border:var(--bw) solid var(--line-2);
  background:var(--surface);
  border-radius:var(--r-pill);
  box-shadow:3px 3px 0 var(--shadow);
  padding:11px 14px;
  font-size:var(--t-small);
  font-weight:700;
  display:inline-flex; align-items:center; gap:9px; max-width:100%;
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.fav:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow); }
.fav-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fav-meta{ color:var(--accent); font-size:var(--t-micro); font-weight:800; flex:none; font-variant-numeric:tabular-nums; }

/* ===================== LEAGUE ===================== */

.league{ list-style:none; }

.lg-row{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  background:var(--surface);
  border:var(--bw) solid var(--line);
  border-radius:var(--r-sm);
  margin-bottom:6px;
}

.lg-row.is-you{ border-color:var(--accent); }

/* Top three get a podium colour on the rank block — the cheapest possible medal. */
.lg-rank{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  background:var(--surface-3);
  color:var(--fg-2);
  font-size:var(--t-small); font-weight:900;
  font-variant-numeric:tabular-nums;
}

.lg-row:nth-child(1) .lg-rank{ background:var(--xp); color:var(--xp-ink); }
.lg-row:nth-child(2) .lg-rank{ background:#c9d4e8; color:#1b2033; }
.lg-row:nth-child(3) .lg-rank{ background:#c07a4a; color:#210f05; }

.avatar{
  width:42px; height:42px; flex:none;
  border-radius:var(--r-sm);
  border:var(--bw) solid var(--line-2);
  background:var(--surface-3) center/cover no-repeat;
  display:grid; place-items:center;
  font-size:var(--t-small); font-weight:900; color:var(--bg);
  overflow:hidden;
}

.avatar.lg{ width:76px; height:76px; font-size:26px; box-shadow:4px 4px 0 var(--shadow); }

/*
   Avatar frames, unlocked by level. The band is the same one that names the division
   (game.js DIVISIONS), so the ring and the word beside the name can never disagree —
   nobody ends up Silver-ranked wearing a gold frame.
*/
.avatar[data-div="bronze"]{ border-color:#a2704a; }
.avatar[data-div="silver"]{ border-color:#c9d4e8; }
.avatar[data-div="gold"]{ border-color:var(--xp); }
.avatar[data-div="platinum"]{ border-color:#6ff2ff; }
.avatar[data-div="legend"]{ border-color:var(--grape); box-shadow:0 0 0 2px var(--xp); }

/* The division word, inline in the meta line — one extra word per row, not a new row. */
.div-tag{ font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.div-tag[data-div="bronze"]{ color:#c08a5e; }
.div-tag[data-div="silver"]{ color:#c9d4e8; }
.div-tag[data-div="gold"]{ color:var(--xp); }
.div-tag[data-div="platinum"]{ color:#6ff2ff; }
.div-tag[data-div="legend"]{ color:var(--grape); }

.lg-main{ flex:1; }
.lg-name{ font-size:var(--t-body); font-weight:800; display:block; }
.lg-row.is-you .lg-name{ color:var(--accent); }
.lg-meta{ font-size:var(--t-micro); font-weight:600; color:var(--fg-3); display:block; margin-top:3px; }
.lg-figs{ text-align:right; flex:none; font-variant-numeric:tabular-nums; }
.lg-xp{ font-size:var(--t-body); font-weight:900; color:var(--xp); display:block; }
.lg-avg{ font-size:var(--t-micro); font-weight:600; color:var(--fg-3); }

/* ===================== YOU ===================== */

.me{ display:flex; align-items:center; gap:16px; margin-bottom:var(--gap); }
.me-name{ font-size:22px; font-weight:900; letter-spacing:-0.01em; }
.me-title{ font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--xp); margin-top:5px; }

/* Three across on a phone, not four. At four the names wrap to three lines each and
   the grid stops reading as a trophy shelf. */
.badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:18px 10px; }

.badge{ text-align:center; }

.badge-ico{
  width:52px; height:52px; margin:0 auto 8px;
  border-radius:var(--r-sm);
  border:var(--bw) solid var(--line-2);
  background:var(--surface-2);
  display:grid; place-items:center;
  font-size:19px; font-weight:900;
  color:var(--fg-3);
}

/* An earned badge is a solid gold tile with a hard shadow. An unearned one is a
   flat empty socket — the difference should read across the room. */
.badge.is-earned .badge-ico{
  background:var(--xp);
  border-color:var(--xp);
  color:var(--xp-ink);
  box-shadow:3px 3px 0 var(--shadow);
}

.badge-n{ font-size:var(--t-micro); font-weight:800; line-height:1.3; letter-spacing:0.04em; }
.badge-d{ font-size:10px; font-weight:600; color:var(--fg-3); line-height:1.35; margin-top:3px; }
.badge:not(.is-earned) .badge-n,
.badge:not(.is-earned) .badge-d{ color:var(--fg-3); opacity:.55; }

/* ===================== FORMS ===================== */

.field{ display:block; margin-bottom:14px; }
.field.inline{ flex:1; margin-bottom:0; }

.field-label{
  display:block;
  font-size:var(--t-micro); font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:7px;
}

.field input,.field select{
  width:100%;
  background:var(--surface-2);
  border:var(--bw) solid var(--line-2);
  border-radius:var(--r-sm);
  padding:12px 13px;
  font-size:16px;   /* 16px or iOS zooms the page on focus */
  font-weight:600;
  outline:none;
}

.field input:focus,.field select:focus{ border-color:var(--accent); }
.field input::placeholder{ color:var(--fg-3); font-weight:500; }

.row{ display:flex; gap:10px; margin-bottom:14px; align-items:flex-end; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }

.chip{
  border:var(--bw) solid var(--line-2);
  background:var(--surface-2);
  border-radius:var(--r-pill);
  padding:8px 12px;
  font-size:var(--t-micro); font-weight:800; letter-spacing:0.04em;
  color:var(--fg-2); font-variant-numeric:tabular-nums;
}

.chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.choices{ display:flex; flex-wrap:wrap; gap:8px; }

.choice{
  border:var(--bw) solid var(--line-2);
  background:var(--surface);
  border-radius:var(--r-sm);
  box-shadow:3px 3px 0 var(--shadow);
  padding:11px 13px;
  font-size:var(--t-small); font-weight:700;
  color:var(--fg-2); text-align:left;
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.choice:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow); }

/* Selected, not pressed — see the note on .seg-b.is-active. */
.choice.is-active{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.22);
}

.choice small{ display:block; font-size:var(--t-micro); font-weight:600; opacity:.75; margin-top:3px; }

.check{ display:flex; align-items:center; gap:11px; font-size:var(--t-small); font-weight:600; color:var(--fg-2); margin:6px 0 4px; }
.check input{ width:20px; height:20px; accent-color:var(--accent); flex:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:var(--bw) solid var(--line-2);
  background:var(--surface);
  border-radius:var(--r-sm);
  box-shadow:3px 3px 0 var(--shadow);
  padding:12px 17px;
  font-size:var(--t-small); font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow); }
.btn.lg{ width:100%; padding:16px 17px; font-size:var(--t-body); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.ghost{ background:none; border-color:transparent; box-shadow:none; color:var(--fg-2); }
.btn.ghost:active{ transform:none; }
.btn.danger{ background:var(--warn); border-color:var(--warn); color:var(--warn-ink); }
.btn[disabled]{ opacity:.5; }

.msg{ font-size:var(--t-small); font-weight:700; color:var(--warn); min-height:20px; margin:4px 0 8px; }
.msg.ok{ color:var(--accent); }

/* ===================== FAB ===================== */

.fab{
  position:fixed;
  right:var(--pad);
  bottom:calc(var(--tabbar) + env(safe-area-inset-bottom) + 22px);
  width:58px; height:58px;
  border-radius:var(--r);
  background:var(--accent);
  border:var(--bw) solid var(--accent-ink);
  color:var(--accent-ink);
  display:grid; place-items:center;
  box-shadow:5px 5px 0 var(--shadow);
  transition:transform .06s steps(2), box-shadow .06s steps(2);
}

.fab:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--shadow); }

/* ===================== SHEET ===================== */

.sheet{ position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; }
.sheet-scrim{ position:absolute; inset:0; background:rgba(8,10,20,.72); }

.sheet-body{
  position:relative; width:100%; max-height:92dvh; overflow-y:auto;
  background:var(--bg);
  border-top:3px solid var(--accent);
  border-radius:var(--r) var(--r) 0 0;
  padding:18px var(--pad) calc(env(safe-area-inset-bottom) + 22px);
  animation:rise .12s steps(3);
}

@keyframes rise{ from{ transform:translateY(20px); } }

.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.sheet-title{ font-size:17px; font-weight:900; letter-spacing:0.06em; text-transform:uppercase; }
.sheet-actions{ display:flex; gap:10px; margin-top:8px; }
.sheet-actions .btn.lg{ flex:1; }

.readout{
  border:var(--bw) solid var(--line-2);
  background:var(--surface);
  border-radius:var(--r-sm);
  box-shadow:4px 4px 0 var(--shadow);
  padding:14px 15px;
  font-size:var(--t-small); font-weight:600; color:var(--fg-2);
  margin-bottom:16px; font-variant-numeric:tabular-nums; line-height:1.65;
}

.readout b{ color:var(--accent); font-weight:900; }

.more{ margin-bottom:8px; }
.more summary{ font-size:var(--t-micro); font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-3); padding:10px 0; cursor:pointer; }
.more[open] summary{ margin-bottom:10px; }

.suggest{ display:grid; gap:4px; margin:-8px 0 14px; }

.suggest-item{
  display:flex; justify-content:space-between; gap:10px;
  padding:11px 13px;
  background:var(--surface-2); border:var(--bw) solid var(--line-2);
  border-radius:var(--r-sm); font-size:var(--t-small); font-weight:700; text-align:left;
}

.suggest-item small{ color:var(--accent); font-weight:800; flex:none; }

/* ===================== GATE ===================== */

.gate{ position:fixed; inset:0; display:grid; place-items:center; padding:var(--pad); background:var(--bg); z-index:30; }
.gate-inner{ width:100%; max-width:340px; }

.gate-mark{
  font-size:38px; font-weight:900; letter-spacing:0.22em;
  color:var(--accent);
  text-shadow:4px 4px 0 var(--shadow);
  margin-bottom:14px;
}

.gate-copy{ color:var(--fg-2); font-size:var(--t-small); font-weight:600; margin-bottom:26px; }
.gate-copy b{ color:var(--fg); }

/* The recovery code. Big, spaced and selectable — it is going to be read off the screen
   and typed somewhere else, possibly months later. */
.code{
  font-size:22px;
  font-weight:900;
  letter-spacing:0.08em;
  text-align:center;
  padding:18px 10px;
  margin-bottom:14px;
  color:var(--xp);
  background:var(--surface);
  border:var(--bw) solid var(--xp);
  border-radius:var(--r-sm);
  box-shadow:4px 4px 0 var(--shadow);
  user-select:all;
  word-break:break-all;
}

#recovery .btn{ width:100%; }
#recovery .check{ margin:16px 0 14px; }
.gate-form .btn{ margin-top:4px; }
.gate-form .btn.ghost{ width:100%; margin-top:12px; }

/* ===================== FOOT ===================== */

.disclaimer{ font-size:var(--t-micro); line-height:1.65; font-weight:500; color:var(--fg-3); }
.version{ font-size:var(--t-micro); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-3); margin-top:18px; }

/* ===================== BREAKPOINTS ===================== */

@media (min-width:600px){
  :root{ --pad:26px; }
  .content{ max-width:620px; margin:0 auto; width:100%; }
  .tabbar{ padding-left:calc(50% - 310px + var(--pad)); padding-right:calc(50% - 310px + var(--pad)); }
  .sheet{ align-items:center; justify-content:center; }
  .sheet-body{ max-width:520px; border-radius:var(--r); border:3px solid var(--accent); }
  .fab{ right:calc(50% - 310px + var(--pad)); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===================== CRT ===================== */
/*
   Scanlines. Deliberately almost invisible — 5% black on every third pixel row. The
   point is a faint texture that stops the flat fills looking like a web page, not a
   novelty filter. If it ever reads as gimmicky, delete this block; nothing depends
   on it. It sits above everything and swallows no taps.
*/
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.05) 0 1px,
    transparent 1px 3px
  );
}