/* ============================================================================
   Gistil — the signed-in side of the product.

   ONE SYSTEM. This file is the landing's design system (public/landing/assets/
   css/main.css) applied to the app: same near-black ground, same gold, same
   three typefaces loaded from the same four font files. A visitor who clicks
   the gold "Sign in" pill on the landing must not feel they changed products.

   Direction:
   · TYPE IS THREE ROLES, exactly as on the landing. Bricolage Grotesque is the
     display face (headings, figures, the score-sized numbers). Source Serif 4
     carries the argument — anything you actually read as prose. JetBrains Mono
     carries every measurement and every piece of chrome: labels, eyebrows,
     timecodes, axis ticks, buttons. An autopsy report sets its measurements in
     a different face from its prose; so does this.
   · ONE LOUD THING: the waterline. A single strip across the top that renders
     the user's whole history as one continuous run of time — the part Gistil
     got back, and the part they chose to spend. Everything below it is quiet.
   · COLOR IS TWO FAMILIES, AND THEY NEVER MEET.
       GOLD IS CHROME — the mark, the hero figure, the waterline, the one live
       button. It is the brand, and the brand is never a data value.
       BLUE IS DATA — every chart mark is one validated blue ramp. It is the
       only cool hue in the product, which is exactly why it reads as "this is
       a measurement, not the brand."
     The ramp is #86b6ef / #3987e5 / #1c5cab, re-validated for this surface with
     scripts/validate_palette.js (dark, surface #14171C, --ordinal): monotone
     lightness, all ΔL ≥ 0.06, dark end 2.71:1, hue spread 3° — four PASSes.
     The landing's own worth/skim/skip trio (#3FA96A / #C9A227 / #D2564A) was
     re-run as a categorical set on the same surface and FAILED: gold sits at
     L 0.728, outside the dark band, and gold↔green is ΔE 7.2 under protanopia.
     That is the second time a three-hue set has lost to the gates here, and it
     is why gold stays chrome.
   ========================================================================== */

/* The landing bundle holds the one copy of these four files on disk; the app
   reaches them through Propshaft (see config/initializers/assets.rb), so each
   arrives digested and immutably cached. No second copy to drift out of sync
   with the front door. */
@font-face { font-family: "Bricolage Grotesque";
  src: url("/assets/BricolageGrotesque-var-b86257e5.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-var-8a992d39.woff2") format("woff2");
  font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Source Serif 4";
  src: url("/assets/SourceSerif4-400-aa808dcb.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4";
  src: url("/assets/SourceSerif4-400i-8545965a.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* surfaces — the landing's four steps, unchanged */
  --bg: #07080A;
  --panel: #0F1116;
  --panel-2: #14171C;
  --panel-3: #1A1E25;

  /* hairlines carry the depth; no borderless shadows anywhere */
  --edge: #22262C;
  --edge-2: #2E333B;

  /* ink: bone for what matters, two demotions. If everything is bone, nothing is. */
  --bone: #F2EEE6;
  --bone-dim: #C9C4BA;
  --mute: #8A9099;
  --mute-2: #697077;

  /* CHROME. Never a chart mark. */
  --gold: #C9A227;
  --gold-bright: #DFBC55;
  --gold-deep: #8A6D1C;

  /* DATA. Validated ramp; see the header. --accent is single-series magnitude. */
  --accent: #3987e5;
  --track: #22262C;

  /* status — reserved, always shipped with words beside it */
  --worth: #3FA96A;
  --alarm: #D2564A;

  --r-lg: 14px;
  --r-md: 12px;
  --r-sm: 7px;
  --r-pill: 999px;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* hairline + inner top highlight + one deep shadow — the landing's card */
  --depth:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 34px -20px rgba(0, 0, 0, 0.85);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

/* Prose is the default because prose is what a person reads; every piece of
   chrome below opts out of it explicitly. */
body.gistil {
  background: var(--bg);
  color: var(--bone-dim);
  min-height: 100vh;
  font: 400 15px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--bone); margin: 0;
  font-weight: 800; letter-spacing: -0.015em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.mono { font-family: var(--mono); }
::selection { background: var(--gold); color: #0A0803; }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 24px 110px; }

/* ---------------------------------------------------------------- topbar -- */
.top {
  position: sticky; top: 0; z-index: 20;
  padding: 0 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--edge) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top__in {
  max-width: 1120px; margin: 0 auto; width: 100%; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* The mark is the logo FILE plus the wordmark — the same pair, in the same
   order, at the same size as the landing nav. Never a glyph standing in for it. */
.mark { display: flex; align-items: center; min-width: 0; }
.mark__home { display: flex; align-items: center; gap: 11px; }
.mark__logo { width: 30px; height: 30px; flex: none; }
.mark__word { font: 800 17px/1 var(--display); color: var(--bone); letter-spacing: .14em;
  text-transform: uppercase; }
.mark__ctx { font: 500 11.5px/1 var(--mono); color: var(--mute-2); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; }
.mark__ctx::before { content: "/"; margin: 0 9px 0 8px; color: var(--edge-2); }

.top__nav { display: flex; align-items: center; gap: 10px; }
.who {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  font: 500 12px/1 var(--mono); color: var(--mute); letter-spacing: .02em;
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who__pic {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center; text-transform: uppercase;
  background: var(--panel-3); color: var(--bone-dim);
  font: 700 11px/1 var(--mono);
}
/* The chip is a door now, so it has to behave like one: it reacts, it takes
   focus, and it marks itself when you are already standing on the page. */
.who--link { text-decoration: none; transition: border-color .16s, color .16s, background .16s; }
.who--link:hover { border-color: var(--edge-2); color: var(--bone); background: var(--panel-2); }
.who--link:hover .who__pic { background: var(--panel-3); color: var(--bone); }
.who--link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.who--link[aria-current="page"] { border-color: var(--edge-2); color: var(--bone); }
.who__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- buttons -- */
/* Chrome wears mono, like every other measurement-adjacent thing here. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 17px; border: 1px solid transparent;
  border-radius: var(--r-pill); white-space: nowrap; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .03em;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease,
    color .18s ease, transform .08s ease;
}

/* THE live control, inlaid rather than filled — a seat cut into the dark with a
   bevelled gold edge, bright top facet and deep bottom facet. Lifted verbatim
   from the landing's .acct so the button you press on the front door and the
   button you press inside are one object. No sheen, no metallic gradient:
   neither file fakes material. */
.btn--primary {
  --acct-edge: color-mix(in srgb, var(--gold) 54%, transparent);
  --acct-wash: color-mix(in srgb, var(--gold) 9%, transparent);
  color: var(--gold-bright); background: var(--acct-wash); border-color: var(--acct-edge);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 34%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-deep) 60%, transparent),
    0 10px 24px -18px color-mix(in srgb, var(--gold) 75%, transparent);
}
.btn--primary:hover {
  --acct-edge: color-mix(in srgb, var(--gold-bright) 82%, transparent);
  --acct-wash: color-mix(in srgb, var(--gold) 17%, transparent);
  color: color-mix(in srgb, var(--gold-bright) 62%, var(--bone));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-deep) 70%, transparent),
    0 12px 30px -16px color-mix(in srgb, var(--gold) 95%, transparent);
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px -2px rgba(0, 0, 0, .85),
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.btn--quiet { background: var(--panel-2); border-color: var(--edge-2); color: var(--bone-dim); }
.btn--quiet:hover { background: var(--panel-3); border-color: #3A404A; color: var(--bone); }
.btn--quiet:active { transform: translateY(1px); }
.btn--bare { background: transparent; color: var(--mute); padding: 0 10px; }
.btn--bare:hover { color: var(--bone); }
.btn--wide { width: 100%; }
.btn--tall { height: 48px; font-size: 13px; letter-spacing: .05em; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
form.inline { display: inline; }

/* segmented range control — the sliding thumb is CSS-only (no layout JS) */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel);
  border: 1px solid var(--edge); border-radius: var(--r-pill); }
.seg a { padding: 5px 13px; border-radius: var(--r-pill); color: var(--mute-2);
  font: 500 11.5px/1 var(--mono); letter-spacing: .04em;
  transition: color .16s ease, background .16s ease; }
.seg a:hover { color: var(--bone-dim); }
.seg a[aria-current="page"] { background: var(--panel-3); color: var(--bone);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset; }

/* ------------------------------------------------------- what's covered --- */
/* A stacked block, not a status strip: the count, the bar under it at full
   width, and the plain sentence about what happens when it runs out. The bar
   spans the block because a runway drawn 120px wide beside a paragraph reads as
   decoration, and this one is the answer. */
.planbar {
  display: flex; flex-direction: column; gap: 11px;
  margin: 22px 0 0; padding: 15px 18px 16px;
  border: 1px solid var(--edge); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--depth);
}
.planbar__top { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.planbar__badge {
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--panel-3); color: var(--mute); border: 1px solid var(--edge-2);
}
.planbar__badge--pro { background: color-mix(in srgb, var(--gold) 11%, transparent);
  color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
/* The count carries the line, so it is set in the reading face at reading size
   and the digits step up into the display face — same move as the hero, an
   octave down. */
.planbar__lead { font: 400 15px/1.4 var(--serif); color: var(--bone-dim); }
.planbar__lead b { font: 800 26px/1 var(--display); letter-spacing: -0.03em;
  color: var(--bone); margin-right: 3px; }
.planbar__note { margin: 0; max-width: 78ch; font: 400 13px/1.6 var(--serif); color: var(--mute); }
.planbar__ends { font: 400 13px/1.4 var(--serif); color: var(--mute); }
.planbar__cta { margin-left: auto; }
/* Kept: the pricing page and the account panel still use .planbar__text. */
.planbar__text { font: 400 13.5px/1.5 var(--serif); color: var(--mute); }
.planbar__text b { color: var(--bone-dim); font-family: var(--mono); font-weight: 500;
  font-size: 12.5px; }

/* --------------------------------------------------------------- hero ----- */
.hero { padding: 48px 0 8px; }
.hero__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mute);
}
.hero__eyebrow::after { content: ""; flex: 0 1 64px; height: 1px; background: var(--edge-2); }
/* Gold at its loudest, once per page. */
.hero__figure {
  font: 800 clamp(56px, 9vw, 92px)/.92 var(--display); letter-spacing: -0.045em;
  color: var(--gold); margin: 0;
  /* proportional figures on purpose: tabular-nums makes a display number loose */
  text-shadow: 0 12px 60px color-mix(in srgb, var(--gold) 22%, transparent);
}
/* The unit is demoted, not raised: <small> must sit on the same baseline as the
   digits or "2h 10m" reads as a subscript. */
.hero__figure small { font-size: .34em; font-weight: 700; letter-spacing: -0.01em;
  vertical-align: baseline; margin-left: .06em; color: var(--gold-deep); }
.hero__title { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0; max-width: 20ch; }
.hero__sub { margin: 16px 0 0; font: 400 16.5px/1.62 var(--serif); color: var(--bone-dim);
  max-width: 56ch; }
.hero__sub b { color: var(--bone); font-family: var(--mono); font-weight: 500;
  font-size: 14.5px; }
.hero__android { font: 400 13.5px/1.5 var(--mono); color: var(--mute); }
.hero__android a { color: var(--bone-dim); text-decoration: underline;
  text-decoration-color: var(--edge-2); text-underline-offset: 3px; }
.hero__android a:hover { text-decoration-color: var(--gold); }

/* ---- THE WATERLINE — the one loud thing on the page ---------------------- */
/* Every second of runtime the user handed to Gistil, in one strip: what came
   back, and what they chose to spend. It is the extension's water map, drawn
   over a life instead of over a video. Chrome, therefore gold. */
.waterline { margin: 32px 0 0; }
.waterline__bar {
  position: relative; display: flex; gap: 2px;   /* 2px surface gap, as in charts */
  height: 15px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--panel-2);
}
.waterline__got {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  border-radius: var(--r-pill);
  box-shadow: 0 0 26px -4px color-mix(in srgb, var(--gold) 60%, transparent);
}
.waterline__spent {
  flex: 1; border-radius: var(--r-pill);
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px),
    var(--panel-3);
}
.waterline__scale {
  display: flex; justify-content: space-between; margin-top: 9px;
  font: 400 10.5px/1 var(--mono); color: var(--mute-2); letter-spacing: .04em;
}
.waterline__scale span { position: relative; padding-top: 8px; }
.waterline__scale span::before {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 5px;
  background: var(--edge-2);
}
.waterline__scale span:last-child::before { left: auto; right: 0; }
.waterline__key { display: flex; gap: 20px; margin-top: 13px; flex-wrap: wrap;
  font: 400 11.5px/1 var(--mono); color: var(--mute); letter-spacing: .04em; }
.waterline__key i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; }
.waterline__key i::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--gold);
}
.waterline__key i.is-spent::before { background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--edge-2); }

/* --------------------------------------------------------------- layout --- */
/* Section headers speak the landing's eyebrow: a gold tick, mono at .22em, and
   a hairline running out to the edge of the column. */
.rule { display: flex; align-items: center; gap: 12px; margin: 52px 0 16px; }
.rule::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); }
.rule h2 { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .22em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.rule > span:not(.seg) { font: 400 11.5px/1 var(--mono); color: var(--mute-2);
  letter-spacing: .04em; white-space: nowrap; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.rule .seg { margin-left: 4px; }

.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--wide { grid-template-columns: 1.55fr 1fr; }

.panel {
  min-width: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 18px 20px 20px; box-shadow: var(--depth);
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px; }
.panel h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.012em; }
.panel__sub { margin: 0 0 16px; font: 400 13.5px/1.5 var(--serif); color: var(--mute); }
.panel__body { font: 400 14px/1.6 var(--serif); color: var(--mute); margin: 0; }
.panel__empty { font: 400 13.5px/1.55 var(--serif); color: var(--mute); margin: 0; }
.panel__note { font: 400 11.5px/1.4 var(--mono); color: var(--mute-2); margin: 14px 0 0; }

/* ---- goals ----------------------------------------------------------------- */
.goals { display: flex; flex-direction: column; gap: 16px; }
.goal { display: flex; flex-direction: column; gap: 7px; }
.goal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal__title { font: 700 14px/1.35 var(--display); letter-spacing: -0.012em; color: var(--bone-dim); }
.goal__title--done { color: var(--mute); text-decoration: line-through;
  text-decoration-color: var(--edge-2); }
.goal__pct { font: 500 12px/1 var(--mono); color: var(--mute-2); flex: none;
  font-variant-numeric: tabular-nums; }
.goal .meter { height: 5px; }
.goal__note { font: 400 11px/1.3 var(--mono); color: var(--mute-2); letter-spacing: .02em; }

/* ---- chips (picked categories) --------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px/1 var(--serif);
  color: var(--bone-dim); padding: 7px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--edge-2); background: var(--panel-3);
}

/* ---- stat tiles ---------------------------------------------------------- */
.tile {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 15px 16px 16px; box-shadow: var(--depth);
  display: flex; flex-direction: column; gap: 10px; min-height: 106px;
}
.tile__label { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); }
.tile__row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: auto; }
.tile__value { font: 800 30px/1 var(--display); letter-spacing: -0.035em; color: var(--bone); }
.tile__unit { font-size: .45em; font-weight: 700; color: var(--mute-2); margin-left: .12em; }
.tile__note { font: 400 11px/1.3 var(--mono); color: var(--mute-2); letter-spacing: .03em;
  text-align: right; }
.spark { width: 92px; height: 26px; }

/* ---- charts -------------------------------------------------------------- */
.dc-wrap { width: 100%; }
.dc { width: 100%; height: auto; display: block; overflow: visible; }
.dc__tick { font-family: var(--mono); font-size: 10.5px; fill: var(--mute-2); }
.dc__peak { font-family: var(--mono); font-size: 11px; fill: var(--bone-dim); font-weight: 500; }
.dc__rowlabel { font-family: var(--serif); font-size: 14px; fill: var(--bone-dim); }
.dc__rowvalue { font-family: var(--mono); font-size: 12px; fill: var(--mute-2); }
.dc__bar, .dc__seg { transition: opacity .12s ease; cursor: default; }
.dc__bar--zero { opacity: .3; }          /* a day with nothing on it, still drawn */
.dc:hover .dc__bar, .dc:hover .dc__seg { opacity: .5; }
.dc:hover .dc__bar--zero { opacity: .18; }
.dc .dc__bar:hover, .dc .dc__seg:hover { opacity: 1; }
.dc__empty { font: 400 14px/1.5 var(--serif); color: var(--mute); margin: 8px 0 2px; }

.tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transform: translate(-50%, -125%); transition: opacity .1s ease;
  background: var(--panel-3); border: 1px solid var(--edge-2); border-radius: 8px;
  padding: 7px 11px; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--bone);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .85); white-space: nowrap;
}
.tip[data-open="true"] { opacity: 1; }

/* legend — always present for ≥2 series, never color-alone */
.legend { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.legend__row { display: flex; align-items: center; gap: 10px; }
.legend__dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend__name { font: 400 13.5px/1.4 var(--serif); color: var(--bone-dim); }
.legend__val { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--bone);
  font-variant-numeric: tabular-nums; }
.legend__pct { color: var(--mute-2); margin-left: 9px; display: inline-block;
  min-width: 4ch; text-align: right; }

.dtable { margin-top: 14px; }
.dtable summary { font: 400 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--mute-2);
  cursor: pointer; list-style: none; padding: 4px 0; }
.dtable summary::before { content: "▸ "; }
.dtable[open] summary::before { content: "▾ "; }
.dtable summary:hover { color: var(--bone-dim); }
.dtable table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.dtable th, .dtable td { text-align: left; padding: 6px 8px;
  font: 400 12px/1.4 var(--mono); border-bottom: 1px solid var(--edge); }
.dtable th { color: var(--mute-2); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; font-size: 10.5px; }
.dtable td { color: var(--bone-dim); }
.dtable td.num, .dtable th:not(:first-child) { text-align: right;
  font-variant-numeric: tabular-nums; }

/* ---- meters -------------------------------------------------------------- */
.meter { width: 100%; border-radius: var(--r-pill); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-pill); transition: width .5s ease; }

/* ---- the record (history) ------------------------------------------------ */
.record { display: flex; flex-direction: column; }
.rec {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--edge);
}
.rec:last-child { border-bottom: 0; padding-bottom: 0; }
.rec__thumb { width: 96px; height: 54px; border-radius: var(--r-sm); object-fit: cover;
  background: #000; border: 1px solid var(--edge); }
.rec__thumb--none { display: grid; place-items: center; color: var(--mute-2); font-size: 16px; }
.rec__body { min-width: 0; }
.rec__title { font: 700 15px/1.35 var(--display); letter-spacing: -0.012em; margin: 0 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec__title a:hover { color: var(--gold-bright); }
.rec__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 12px/1.4 var(--serif); color: var(--mute); }
.rec__meta .mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; }
.rec__water { display: flex; align-items: center; gap: 9px; margin-top: 8px; max-width: 240px; }
.rec__water .meter { height: 4px; }
.rec__water span { font: 400 11px/1 var(--mono); color: var(--mute-2); flex: none; }
.rec__right { text-align: right; }
.rec__saved { font: 500 14px/1 var(--mono); color: var(--gold);
  font-variant-numeric: tabular-nums; }
.rec__client { font: 400 10.5px/1.4 var(--mono); color: var(--mute-2); margin-top: 5px;
  letter-spacing: .04em; }

/* Verdict chips wear the SAME step of the data ramp as the segment that counts
   them in the Verdicts chart — colour follows the entity, not the surface it
   lands on. Every one carries its word, so the colour is never the only signal. */
.verdict {
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--r-pill); flex: none;
  border: 1px solid var(--edge-2); background: var(--panel-3); color: var(--mute);
}
.verdict--watch { color: #b7d3f6; border-color: rgba(134, 182, 239, .42);
  background: rgba(134, 182, 239, .11); }
.verdict--skim { color: #8fbdf0; border-color: rgba(57, 135, 229, .44);
  background: rgba(57, 135, 229, .13); }
.verdict--skip { color: #93a6c4; border-color: rgba(28, 92, 171, .58);
  background: rgba(28, 92, 171, .2); }

/* ---- the content map: one video's runtime as a strip --------------------- */
/* The extension's water map in the dashboard's vocabulary: substance on the
   blue data ramp, water cut in the same hatched track as the waterline's spent
   half — "empty runtime" reads identically at both scales. The caret is gold
   because it is chrome: the product's hand saying "start here". */
.cmap { position: relative; width: 100%; padding-bottom: 6px; }
.cmap__bar { display: flex; gap: 1px; height: var(--cmap-h, 8px);
  border-radius: 3px; overflow: hidden; background: var(--panel-3); }
.cmap__seg { display: block; min-width: 2px; }
.cmap__seg--water {
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
    var(--panel-3);
}
.cmap__jump {
  position: absolute; bottom: 0; transform: translateX(-50%);
  width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-bottom: 5px solid var(--gold);
}

/* ---- worth your time right now ------------------------------------------- */
/* The forward-looking half of the page: three judged videos, each shown the
   way Gistil sees it — score, map, entry point — before a minute is spent. */
.wn {
  display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--depth);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wn:hover { border-color: var(--edge-2); transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 44px -22px rgba(0, 0, 0, 0.9); }
.wn:hover .wn__title { color: var(--gold-bright); }
.wn__media { position: relative; aspect-ratio: 16 / 9; background: #000;
  border-bottom: 1px solid var(--edge); }
.wn__media img { width: 100%; height: 100%; object-fit: cover; }
.wn__media-none { display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--mute-2); font-size: 22px; }
/* The score is the landing's verdict number at card scale: display face, bone,
   on a scrim so it survives any thumbnail. */
.wn__score {
  position: absolute; top: 10px; right: 10px;
  font: 800 22px/1 var(--display); letter-spacing: -0.03em; color: var(--bone);
  padding: 7px 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--edge-2) 80%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.wn__score small { font-size: .5em; font-weight: 700; color: var(--mute); }
.wn__len {
  position: absolute; bottom: 10px; right: 10px;
  font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--bone-dim);
  padding: 4px 7px; border-radius: 5px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.wn__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.wn__title { margin: 0; font: 700 15px/1.3 var(--display); letter-spacing: -0.012em;
  color: var(--bone);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em; }
.wn__meta { display: flex; align-items: center; gap: 9px; margin: 0; min-width: 0; }
.wn__channel { font: 400 12.5px/1.3 var(--serif); color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn__novel { flex: none; font: 500 10px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--gold) 8%, transparent); }
.wn__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wn__start { font: 600 12px/1 var(--mono); letter-spacing: .03em; color: var(--gold);
  font-variant-numeric: tabular-nums; }
.wn:hover .wn__start { color: var(--gold-bright); }
.wn__water { font: 400 11px/1 var(--mono); color: var(--mute-2); letter-spacing: .03em; }
.wn__why { margin: 0; font: 400 13px/1.55 var(--serif); color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* ---- saved for later: the backlog, priced honestly ----------------------- */
.sq__ledger { margin: 2px 0 14px; font: 400 14.5px/1.6 var(--serif); color: var(--mute); }
.sq__ledger b { color: var(--bone-dim); font-family: var(--mono); font-weight: 500;
  font-size: 13px; }
.sq__ledger b.sq__true { color: var(--gold); }
.sq { display: flex; flex-direction: column; }
.sq__row {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--edge);
}
.sq__row:first-child { padding-top: 0; }
.sq__row:last-child { border-bottom: 0; padding-bottom: 0; }
.sq__thumb { width: 72px; height: 41px; border-radius: var(--r-sm); object-fit: cover;
  background: #000; border: 1px solid var(--edge); }
.sq__thumb--none { display: grid; place-items: center; color: var(--mute-2); }
.sq__body { min-width: 0; }
.sq__title { margin: 0 0 6px; font: 700 14px/1.3 var(--display); letter-spacing: -0.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq__title a:hover { color: var(--gold-bright); }
.sq__meta { display: flex; align-items: center; gap: 12px; min-width: 0;
  font: 400 12px/1.4 var(--serif); color: var(--mute); }
.sq__meta > span { flex: none; max-width: 14em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.sq__meta .cmap { max-width: 220px; }
.sq__right { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.sq__cost { font: 500 12.5px/1 var(--mono); color: var(--bone-dim);
  font-variant-numeric: tabular-nums; }
.sq__cost s { color: var(--mute-2); text-decoration-color: var(--mute-2); }
.sq__jump { font: 500 10.5px/1 var(--mono); color: var(--gold);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---- reactions on record rows: the signals you gave back ------------------ */
.react { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--r-pill); flex: none;
  border: 1px solid var(--edge-2); background: var(--panel-3); color: var(--mute); }
.react--liked, .react--watched { color: #8fbdf0;
  border-color: rgba(57, 135, 229, .38); background: rgba(57, 135, 229, .1); }
.react--saved { color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  background: color-mix(in srgb, var(--gold) 7%, transparent); }

/* record rows: the mini map + its entry point */
.rec__map { display: flex; align-items: center; gap: 10px; margin-top: 9px; max-width: 320px; }
.rec__map .cmap { flex: 1; }
.rec__jump { font: 500 10.5px/1 var(--mono); color: var(--gold); flex: none;
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---- plans --------------------------------------------------------------- */
.plans { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.plan {
  position: relative; border: 1px solid var(--edge); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 22px; box-shadow: var(--depth);
  display: flex; flex-direction: column; gap: 15px;
}
.plan--current { border-color: var(--edge-2); }
/* The one plan we recommend gets the gold edge — the same left-rail move the
   landing's honesty card makes, turned into a full border. */
.plan--featured { border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 6%, transparent),
    transparent 55%), linear-gradient(180deg, var(--panel-2), var(--panel)); }
.plan__flag {
  position: absolute; top: -1px; right: 18px; transform: translateY(-50%);
  font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--gold); color: #0A0803;
}
.plan__name { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.012em; }
.plan__tag { font: 400 13.5px/1.5 var(--serif); color: var(--mute); margin: 5px 0 0; }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__amount { font: 800 36px/1 var(--display); letter-spacing: -0.035em; color: var(--bone); }
.plan__per { font: 400 11.5px/1.4 var(--mono); color: var(--mute-2); letter-spacing: .03em; }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.plan__list li { font: 400 14px/1.5 var(--serif); color: var(--bone-dim);
  padding-left: 20px; position: relative; }
.plan__list li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 1px;
  background: var(--gold-deep);
}
.plan__foot { margin-top: auto; }

/* ---- empty state: an invitation, not an apology -------------------------- */
.blank { padding: 64px 0 20px; max-width: 62ch; }
.blank h1 { font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -0.03em;
  margin: 0 0 16px; line-height: 1.06; }
.blank p { font: 400 16.5px/1.62 var(--serif); color: var(--bone-dim); margin: 0 0 28px; }

.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 16px 20px 18px; box-shadow: var(--depth);
}
.step__n { font: 500 10.5px/1 var(--mono); color: var(--gold); letter-spacing: .18em;
  padding-top: 5px; }
.step h4 { margin: 0 0 5px; font-size: 16px; font-weight: 700; letter-spacing: -0.012em; }
.step p { margin: 0; font: 400 14.5px/1.55 var(--serif); color: var(--mute); }
.step a.deep { color: var(--gold); text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.step a.deep:hover { color: var(--gold-bright); }

/* ---- sign-in ------------------------------------------------------------- */
/* One door, one control. The page is the landing's hero at card scale: the
   logo file, a display line, a serif argument, and the gold pill. */
.gate { min-height: calc(100vh - 64px); display: grid; place-items: center;
  padding: 48px 20px 80px; }
.gate__card { width: 100%; max-width: 420px; }
.gate__logo { width: 56px; height: 56px;
  filter: drop-shadow(0 10px 34px rgba(0, 0, 0, .6)); }

/* ---------------------------------------------- the mark, while it is working --
   The sign-in has one moving part and it is the mark. A gold arc — the mark's
   own gold, not a second accent — travels the ring around it while the handshake
   runs, and there is nothing else on the page that moves.

   Built from a conic-gradient behind a ring-shaped mask rather than a bordered
   circle: a border gives a hard-ended segment, the gradient gives an arc that
   fades out along its tail. Rotating a conic gradient by exactly one turn has no
   seam — the frame after 1turn is identical to the frame at 0. */
.gate__mark { position: relative; display: grid; place-items: center;
  width: 92px; height: 92px; margin: 0 0 26px -18px; }
.gate__mark .gate__logo { grid-area: 1 / 1; margin: 0; }

.gate__ring { grid-area: 1 / 1; width: 92px; height: 92px; border-radius: 50%;
  opacity: 0; transition: opacity .28s ease; }
.gate__ring::before, .gate__ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  /* the ring is 2px of the outer edge, and nothing else */
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 2px));
}
/* the track it travels on — barely there, but the arc needs a path to be on */
.gate__ring::before { background: var(--edge-2); opacity: .55; }
/* the arc itself: a quarter turn of gold with a tail that fades to nothing */
.gate__ring::after {
  background: conic-gradient(from 0turn,
    var(--gold-bright) 0turn,
    color-mix(in srgb, var(--gold) 70%, transparent) .10turn,
    #0000 .28turn, #0000 1turn);
}

/* Busy is a state of the whole form, set the instant the button is pressed —
   before the Firebase popup, so nothing waits on the network to start moving. */
[data-busy="true"] .gate__ring { opacity: 1; }
[data-busy="true"] .gate__ring::after { animation: gate-arc 1.15s linear infinite; }

@keyframes gate-arc { to { transform: rotate(1turn); } }

/* Reduced motion: the arc stops travelling and simply breathes. Same element,
   same gold, no rotation — the page still says "something is happening". */
@media (prefers-reduced-motion: reduce) {
  [data-busy="true"] .gate__ring::after {
    animation: gate-breathe 1.9s ease-in-out infinite;
    background: conic-gradient(from 0turn,
      color-mix(in srgb, var(--gold) 60%, transparent) 0turn, var(--gold-bright) 1turn);
  }
  .gate__ring { transition: none; }
  @keyframes gate-breathe { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }
}
.gate h1 { font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 12px; }
.gate p.lede { font: 400 15.5px/1.62 var(--serif); color: var(--mute); margin: 0 0 28px; }
.gate .steps { margin-top: 24px; }
.gate__g { width: 17px; height: 17px; flex: none; }
.gate__note { margin: 14px 0 0; font: 400 12px/1.6 var(--mono); color: var(--mute-2);
  letter-spacing: .02em; }
.status { min-height: 18px; margin: 16px 0 0; font: 400 12px/1.5 var(--mono);
  letter-spacing: .02em; color: var(--mute-2); }
.status[data-tone="error"] { color: #E08B82; }
.status[data-tone="info"] { color: var(--gold); }

/* The consent checkbox on checkout is the only field left in the app. */
.field { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 18px;
  font: 400 13.5px/1.5 var(--serif); color: var(--mute); cursor: pointer; }
.field input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px;
  margin-top: 3px; flex: none; }

/* ---- flashes ------------------------------------------------------------- */
.flash { margin: 20px 0 0; padding: 11px 16px; border-radius: var(--r-md);
  font: 400 14px/1.5 var(--serif);
  border: 1px solid var(--edge-2); background: var(--panel); color: var(--bone-dim); }
.flash--ok { border-color: color-mix(in srgb, var(--gold) 34%, transparent);
  background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--gold-bright); }
.flash--warn { border-color: color-mix(in srgb, var(--alarm) 40%, transparent);
  background: color-mix(in srgb, var(--alarm) 8%, transparent); color: #F0A69C; }

.foot { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--edge);
  display: flex; gap: 22px; flex-wrap: wrap;
  font: 400 11.5px/1.6 var(--mono); color: var(--mute-2); letter-spacing: .03em; }
.foot a:hover { color: var(--bone-dim); }

/* ---- entrance: ONE orchestrated sequence, nothing on scroll -------------- */
.rise { animation: rise .5s cubic-bezier(.22, .68, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.waterline__got { animation: fill .85s cubic-bezier(.22, .68, .3, 1) .2s both; }
@keyframes fill { from { width: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 940px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--wide, .plans { grid-template-columns: 1fr; }
  /* the watch-next rail keeps two-up until a phone; one giant card reads worse */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .wn-grid > .wn:nth-child(3) { display: none; }
}
@media (max-width: 620px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .wn-grid > .wn:nth-child(3) { display: flex; }
}
/* A fixed viewBox scaled to a 380px screen would render 13px labels at 7px.
   Scroll the chart instead of shrinking its type past the point of reading. */
@media (max-width: 700px) {
  .dc-wrap { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
  .dc { min-width: 520px; }
}

@media (max-width: 620px) {
  .sq__row { grid-template-columns: 56px 1fr; row-gap: 6px; }
  .sq__thumb { width: 56px; height: 32px; }
  .sq__right { grid-column: 2; flex-direction: row; align-items: baseline; gap: 12px;
    text-align: left; }
  .sq__meta .cmap { display: none; }
  .rec__map { max-width: none; }
  .shell { padding: 0 16px 80px; }
  .top { padding: 0 16px; }
  .top__in { height: 56px; }
  .grid--4 { grid-template-columns: 1fr; }
  .rec { grid-template-columns: 72px 1fr; row-gap: 8px; }
  .rec__thumb { width: 72px; height: 41px; }
  .rec__right { grid-column: 2; text-align: left; }
  .mark__ctx, .who { display: none; }
  .planbar__cta { margin-left: 0; width: 100%; }
  .planbar__cta .btn { width: 100%; }
  .rule { margin: 40px 0 14px; flex-wrap: wrap; }
  .rule > span:not(.seg) { display: none; }
  /* the range control drops to its own full-width line rather than vanishing */
  .rule .seg { order: 3; width: 100%; margin: 12px 0 0; justify-content: space-between; }
  .gate { min-height: calc(100vh - 56px); }
}


/* ============================================================================
   ACCOUNT (/account)
   The page the name chip finally leads to. Same panels and hairlines as the
   dashboard — this is not a settings app bolted on the side, it is one more
   screen of the same product. The only new idea is `--danger`, and it is spent
   in exactly one place: the box you leave through.
   ========================================================================== */
/* stretch, not start: the plan panel is always the shorter of the two, and
   letting it end early leaves a 300px hole in the middle of the page. */
.acctgrid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; align-items: stretch; }
.acctgrid > .panel { display: flex; flex-direction: column; }
.acctgrid > .panel .acctactions { margin-top: auto; }
@media (max-width: 860px) { .acctgrid { grid-template-columns: 1fr; } }

.acctform { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.acctfield { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.acctfield__k { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); }
.acctfield__k b { color: var(--bone-dim); font-weight: 700; letter-spacing: .1em; }
.acctfield__hint { margin: 0; font: 400 12.5px/1.5 var(--serif); color: var(--mute); }

.acctinput {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--panel-2); border: 1px solid var(--edge); border-radius: var(--r-sm);
  color: var(--bone); font: 400 14px/1 var(--serif);
  transition: border-color .16s, background .16s;
}
.acctinput::placeholder { color: var(--mute-2); }
.acctinput:hover { border-color: var(--edge-2); }
.acctinput:focus { outline: none; border-color: var(--gold); background: var(--panel-3); }

.acctfacts { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 15px; }
.acctfacts > div { display: grid; gap: 3px; }
.acctfacts dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute-2); }
.acctfacts dd { margin: 0; font: 400 14.5px/1.45 var(--serif); color: var(--bone-dim);
  overflow-wrap: anywhere; }
.acctfacts__note { margin: 2px 0 0; font: 400 12.5px/1.5 var(--serif); color: var(--mute); }

.acctplan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.acctplan__note { font: 400 13px/1.4 var(--serif); color: var(--mute); }

.acctquota { display: flex; flex-direction: column; gap: 10px; }
.acctquota__row { display: flex; align-items: baseline; gap: 9px; }
.acctquota__n { font: 800 34px/1 var(--display); letter-spacing: -0.035em; color: var(--bone); }
.acctquota__k { font: 400 13.5px/1.4 var(--serif); color: var(--mute); }
.acctquota__note { margin: 2px 0 0; font: 400 13px/1.55 var(--serif); color: var(--mute); }

.acctactions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--edge); }
.acctactions .inline { display: inline; margin: 0; }

.acctlist { margin: 0 0 20px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px; }
.acctlist li { position: relative; padding-left: 16px;
  font: 400 14px/1.6 var(--serif); color: var(--mute); }
.acctlist li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--edge-2); }
/* These lead-ins are prose, not measurements — serif, per the type rule at the
   top of this file. Mono made "Your free allowance does not come back" read
   like a log line. */
.acctlist b { color: var(--bone); font-weight: 600; }

/* The one red in the product. Reserved for the box that ends the account, so
   that when it appears it is unambiguous rather than decorative. */
.panel--danger { --danger: #D2564A; border-color: color-mix(in srgb, var(--danger) 26%, var(--edge)); }
.panel--danger h3 { color: var(--bone); }
.acctdanger { display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  max-width: 380px; }
.acctinput--danger:focus { border-color: var(--danger); }
.btn--danger {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  color: #F0A79F;
}
.btn--danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent);
  border-color: var(--danger); color: #FFD9D4; }
.btn--danger:active { transform: translateY(1px); }


/* --------------------------------------------------------- allowance table -- */
/* Three rows, one number each. The point of the block is that the two paid plans
   count over different periods, so the period sits next to the number instead of
   in a footnote nobody reads. */
.allow { display: flex; flex-direction: column; border: 1px solid var(--edge);
  border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.allow__row { display: flex; align-items: baseline; gap: 14px; padding: 15px 20px;
  border-bottom: 1px solid var(--edge); }
.allow__row:last-child { border-bottom: 0; }
/* The plan name is content, not chrome, and it sits on the lighter --panel,
   where --mute-2 measures 3.76:1. --mute puts it over the 4.5 bar. */
.allow__plan { flex: none; min-width: 108px; font: 500 11.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.allow__n { flex: none; min-width: 54px; font: 800 26px/1 var(--display);
  letter-spacing: -0.03em; color: var(--bone); }
.allow__k { font: 400 14.5px/1.5 var(--serif); color: var(--mute); }
.allow__note { margin: 14px 0 0; font: 400 14.5px/1.65 var(--serif); color: var(--mute);
  max-width: 74ch; }
@media (max-width: 620px) {
  .allow__row { flex-wrap: wrap; gap: 6px 12px; }
  .allow__plan { min-width: 0; width: 100%; }
}