/* ============================================================
   Claude usage — the dashboard and login styles, in the Geexer brand (geexer.nl, owner's choice
   2026-11-05: "full Geexer", minus the numbered account headings).

   One family (Archivo variable, upright only), the brand colours black / white / blue / yellow /
   red plus two slate greys, the 12 degree slash as the only lean, square corners, ruled not boxed.
   The owner's dashboard decisions stay: flat rows with a thin bar, bar = claude.ai severity, the
   status word = our verdict (calm words grey and bold, warnings coloured), one tick per bar for the
   time passed in the window, no Refresh button, desktop without scrolling, phones scroll.

   Hex values live only in the token block. Components read --fg, --bg, --line, --muted, --sev.
   Strict CSP: no inline styles. Dynamic geometry comes in through CSS custom properties that
   dashboard.js sets with style.setProperty (--w widths, --pos ticks, --x / --y chart labels).
   ============================================================ */

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("fonts/archivo.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* metric-matched fallback while Archivo loads (no layout jump on the swap) */
@font-face {
    font-family: "Archivo Fallback";
    src: local("Arial"), local("Helvetica"), local("Liberation Sans");
    size-adjust: 103%;
    ascent-override: 90%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens */
:root {
    color-scheme: dark;
    /* brand constants (geexer.nl DESIGN.md) */
    --black: #000000;
    --white: #FFFFFF;
    --blue: #1E90FF;
    --yellow: #FFD600;
    --slate-on-black: #8A93A6;
    --slate-on-white: #5B6472;
    --navy: #0D1526;
    --red: #FF5C5C;
    --red-on-white: #C62828;
    --amber-on-white: #7A5C00;   /* not a brand colour: warning text, lines and edges on white (6.25:1); yellow there is 1.41:1 */

    /* world: black (default) */
    --bg: var(--black);   --bg-rgb: 0, 0, 0;
    --fg: var(--white);   --fg-rgb: 255, 255, 255;
    --muted: var(--slate-on-black);
    --link: rgba(var(--fg-rgb), .7);
    --line: rgba(var(--fg-rgb), .15);
    --line-faint: rgba(var(--fg-rgb), .10);
    --rim: rgba(var(--fg-rgb), .5);           /* control edges, >= 3:1 */
    --pill-rim: rgba(var(--fg-rgb), .2);
    --sep-quiet: rgba(var(--fg-rgb), .35);
    --track: rgba(var(--fg-rgb), .15);
    --pace-line: rgba(var(--fg-rgb), .40);    /* the even-pace diagonal: >= 3:1, it must read from a distance */
    --surface: var(--navy);                   /* toast, alert */

    --sev-normal: var(--blue);     --sev-normal-text: var(--blue);
    --sev-warning: var(--yellow);  --sev-warning-text: var(--yellow);
    --sev-critical: var(--red);    --sev-critical-text: var(--red);
    --sev-warning-line: var(--yellow);         /* a warning line or edge: chart lines, notice borders (on white: amber, yellow is 1.41:1) */
    --focus-label: var(--blue);                /* a focused field's label (on white: the foreground) */
    --fill-edge: transparent;
    --fill-edge-warning: transparent;
    --area-opacity: .14;
    --band-opacity: .24;                      /* the trend fan: slate at .10 vanished on black (darker than the day lines) */
    --marker: var(--white);
    --focus: var(--blue);
    --pulse: var(--yellow);
    --accent: var(--yellow);                  /* yellow as an accent: only what the owner touches (text selection), never data */
    --primary-bg: var(--yellow);  --primary-fg: var(--black);  --primary-hover: var(--white);

    /* shape + motion */
    --skew: -12deg;
    --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    --slash-shape: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-slash: cubic-bezier(.7, 0, .2, 1);

    /* type + space */
    --font: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-ui: .8125rem;     /* 13px: interface */
    --fs-fact: .9375rem;   /* 15px: facts, never smaller */
    --gutter: clamp(16px, 4vw, 64px);
    --col-gap: clamp(2rem, 6vw, 8rem);
}

/* world: white. Twice: the OS preference without a stored choice, and the explicit toggle. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
        --bg: var(--white);  --bg-rgb: 255, 255, 255;
        --fg: var(--black);  --fg-rgb: 0, 0, 0;
        --muted: var(--slate-on-white);
        --track: rgba(var(--fg-rgb), .12);
        --surface: var(--white);
        --sev-normal-text: var(--fg);                 /* blue is never small text on white */
        --sev-warning-text: var(--amber-on-white);
        --sev-critical: var(--red-on-white);  --sev-critical-text: var(--red-on-white);
        --fill-edge: rgba(0, 0, 0, .28);
        --fill-edge-warning: rgba(0, 0, 0, .6);       /* the yellow fill on white needs an edge */
        --area-opacity: .16;
        --band-opacity: .10;
        --marker: var(--black);
        --pulse: transparent;                         /* no yellow pulse on white */
        --accent: var(--blue);                        /* no yellow accent on white (1.41:1) */
        --primary-bg: var(--black);  --primary-fg: var(--white);  --primary-hover: var(--blue);
        --sev-warning-line: var(--amber-on-white);
        --focus-label: var(--fg);
        --pace-line: rgba(var(--fg-rgb), .45);
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: var(--white);  --bg-rgb: 255, 255, 255;
    --fg: var(--black);  --fg-rgb: 0, 0, 0;
    --muted: var(--slate-on-white);
    --track: rgba(var(--fg-rgb), .12);
    --surface: var(--white);
    --sev-normal-text: var(--fg);
    --sev-warning-text: var(--amber-on-white);
    --sev-critical: var(--red-on-white);  --sev-critical-text: var(--red-on-white);
    --fill-edge: rgba(0, 0, 0, .28);
    --fill-edge-warning: rgba(0, 0, 0, .6);
    --area-opacity: .16;
    --band-opacity: .10;
    --marker: var(--black);
    --pulse: transparent;
    --accent: var(--blue);
    --primary-bg: var(--black);  --primary-fg: var(--white);  --primary-hover: var(--blue);
    --sev-warning-line: var(--amber-on-white);
    --focus-label: var(--fg);
    --pace-line: rgba(var(--fg-rgb), .45);
}

/* severity hook: bars use claude.ai's severity, status words our verdict (dashboard.js) */
.sev-normal   { --sev: var(--sev-normal);   --sev-text: var(--sev-normal-text);   --sev-edge: var(--fill-edge); }
.sev-warning  { --sev: var(--sev-warning);  --sev-text: var(--sev-warning-text);  --sev-edge: var(--fill-edge-warning); }
.sev-critical { --sev: var(--sev-critical); --sev-text: var(--sev-critical-text); --sev-edge: var(--fill-edge); }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-color: var(--blue) var(--bg); scrollbar-width: thin; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    font-stretch: 100%;
    line-height: 1.5;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}
em, i, cite, address { font-style: normal; }
h1, h2, p, figure { margin: 0; }
a { color: var(--link); }
a:hover { color: var(--fg); }
button, input { font: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0; }
::selection { background: var(--accent); color: var(--black); }   /* a highlighter on black (14.9:1), blue on white (6.5:1) */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The slash separator (the site's breadcrumbs and footer). */
.sep {
    display: inline-block;
    flex: none;
    width: .4em;
    height: .75em;
    margin: 0 .55em;
    vertical-align: -.05em;
    background: var(--blue);
    transform: skewX(var(--skew));
}

/* ---------------------------------------------------------------- page frame */
.app {
    max-width: 1920px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(16px, 2.4vh, 28px) var(--gutter) clamp(14px, 2vh, 24px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4.4vh, 56px);
}

/* ---------------------------------------------------------------- header */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}
.brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 2.2vw, 36px); }
.title {
    display: inline-flex;
    align-items: center;
    gap: .42em;
    font-size: clamp(20px, 2.6vh, 28px);
    font-weight: 900;
    font-stretch: 125%;
    line-height: .86;
    letter-spacing: -.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* the logo's parallelogram, as a nod to the wordmark (not the wordmark itself) */
.slash {
    display: inline-block;
    flex: none;
    width: .74em;
    height: .72em;
    background: var(--blue);
    clip-path: var(--slash-shape);
}

/* The live indicator in the site's status-pill voice: a leaning 1px outline, the hex dot (grey
   while starting or stale, blue when OK, red on an error), a 13px label; the width is reserved so
   "updated 9 m ago" -> "updated 59 m ago" never moves it. */
.live {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    min-width: 16.5rem;
    padding: .55rem 1rem;
    font-size: var(--fs-ui);
    font-weight: 600;
    font-stretch: 112%;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--fg);
}
.live::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--pill-rim);
    transform: skewX(var(--skew));
}
.hexdot { position: relative; display: inline-block; width: 12px; height: 12px; flex: none; isolation: isolate; }
.hexdot::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--muted);
    clip-path: var(--hex);
    transition: background-color .4s;
}
.hexdot::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    background: var(--pulse);
    clip-path: var(--hex);
    opacity: 0;
}
.live[data-state="ok"] .hexdot::before { background: var(--blue); }
.live[data-state="error"] .hexdot::before { background: var(--sev-critical); }
/* finite: six cycles, only when the state BECOMES OK (the first good data, a recovery), never on every
   30 s refresh; an error or a stale state does not pulse (geexer.nl 06-status.css: only good news pulses) */
.live[data-state="ok"].is-pulsing .hexdot::after { animation: dot-pulse 2.4s var(--ease-out) 6; }
/* a mouse pointer on the pill sends one ring while OK (geexer.nl replays its pulse on hover); the class
   lives until the ring has finished (dashboard.js), so a pointer that only passes by never cuts it off */
.live[data-state="ok"].is-ping:not(.is-pulsing) .hexdot::after { animation: dot-pulse 2.4s var(--ease-out) 1; }
@keyframes dot-pulse {
    0%        { transform: scale(.55); opacity: .8; }
    70%, 100% { transform: scale(1.35); opacity: 0; }
}

.actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.actions form { margin: 0; display: inline-flex; }

/* Buttons: a leaning 1px outline behind an upright label; hover / focus wipe the foreground in
   along the slash and the label takes the page colour (the site's small ghost button). */
.btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--fg);
    font-size: var(--fs-ui);
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.btn::before,
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(var(--skew));
    transform-origin: left center;
    transition: transform .45s var(--ease-slash), border-color .3s;
}
.btn::before { border: 1px solid var(--rim); }
.btn::after { background: var(--fg); transform: skewX(var(--skew)) scaleX(0); }
.btn > * { transition: color .3s var(--ease-out); }
.btn:focus-visible { color: var(--bg); outline: none; }
.btn:focus-visible::after { transform: skewX(var(--skew)) scaleX(1); }
@media (hover: hover) {
    .btn:hover { color: var(--bg); }
    .btn:hover::after { transform: skewX(var(--skew)) scaleX(1); }
}
.btn-icon { width: 44px; padding: 0; }
.btn svg { width: 17px; height: 17px; }

/* the toggle shows the theme you switch TO: sun while dark (the default), moon while light */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
    :root:not([data-theme]) .theme-toggle .icon-moon { display: block; }
}

/* ---------------------------------------------------------------- notices */
.alert {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--sev-critical);
    background: var(--surface);
    color: var(--fg);
    font-size: var(--fs-fact);
    font-weight: 500;
    line-height: 1.4;
}
.alert.warn { border-color: var(--sev-warning-line); }
.alert .cmd {
    display: block;
    margin-top: 2px;
    font: inherit;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.alert .detail {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-ui);
    font-weight: 600;
    font-stretch: 112%;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast {
    position: fixed;
    z-index: 10;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 32px));
    padding: 14px 18px;
    border: 1px solid var(--sev-critical);
    background: var(--surface);
    color: var(--fg);
    font-size: var(--fs-fact);
}
.toast.warn { border-color: var(--sev-warning-line); }
.toast strong { margin-right: 4px; font-weight: 700; }

/* ---------------------------------------------------------------- status word + bar */
.status-word, .l-status { font-weight: 700; font-stretch: 112%; color: var(--sev-text); }
/* calm words ("On track") are grey like the reset line, still bold; only yellow and red colour */
.hero.sev-normal .status-word,
.limit.sev-normal .l-status { color: var(--muted); }

.meter {
    --bar: 6px;
    --tick: 20px;
    position: relative;
    height: var(--bar);
    background: var(--track);
}
.meter.no-cap { visibility: hidden; }   /* usage credits without a spending cap: no bar to fill */
.meter .fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w, 0%);
    min-width: var(--bar);
    background: var(--sev);
    box-shadow: inset 0 0 0 1px var(--sev-edge, var(--fill-edge));
    transition: width .6s var(--ease-out);
}
/* The tick (time passed in the window) leans 12 degrees like every slanted thing in the brand; it
   still crosses the bar at the exact position (the skew pivots on its centre). */
.meter .mark {
    position: absolute;
    left: var(--pos, 0%);
    top: 50%;
    width: 2px;
    height: var(--tick);
    margin: calc(var(--tick) / -2) 0 0 -1px;
    background: var(--marker);
    box-shadow: 0 0 0 1.5px var(--bg);
    transform: skewX(var(--skew));
}

/* ---------------------------------------------------------------- hero: closest to a limit */
.hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 16px clamp(32px, 4.4vw, 88px);
    padding-bottom: clamp(18px, 3.6vh, 48px);
    border-bottom: 2px solid var(--fg);      /* a block that closes a section ends on a 2px rule */
}
.hero-figure { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 26px); }
.eyebrow {
    font-size: clamp(15px, 1.9vh, 20px);
    font-weight: 900;
    font-stretch: 125%;
    line-height: 1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--muted);
}
.hero-number { display: flex; align-items: baseline; gap: .14em; }
.hero-number .big {
    font-size: clamp(96px, 17vh, 216px);
    font-weight: 900;
    font-stretch: 125%;
    line-height: .78;
    letter-spacing: -.03em;
    font-variant-numeric: lining-nums tabular-nums;
}
.hero-number .pct {
    font-size: clamp(38px, 6.8vh, 86px);
    font-weight: 700;
    font-stretch: 112%;
    line-height: .78;
    color: var(--muted);
}
.hero-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.hero-line .what {
    font-size: clamp(20px, 2.8vh, 30px);
    font-weight: 800;
    font-stretch: 118%;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.hero-line .status-word { font-size: clamp(15px, 1.8vh, 19px); }
.hero .when { font-size: clamp(15px, 1.6vh, 17px); font-weight: 600; font-stretch: 112%; color: var(--muted); }
.hero .meter { --bar: 8px; --tick: 26px; margin-top: clamp(14px, 2.4vh, 28px); }
/* the pace sentence: grey, never yellow (the yellow word already carries the verdict) */
.hero .pace { margin-top: clamp(12px, 2vh, 22px); font-size: clamp(15px, 1.6vh, 17px); line-height: 1.3; color: var(--muted); }
.hero.is-old .big, .hero.is-old .what { color: var(--muted); }

/* ---------------------------------------------------------------- accounts: one column each */
.accounts {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    gap: clamp(40px, 6vh, 72px) var(--col-gap);
}
.account {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vh, 24px);
    container-type: inline-size;
}
.account-head { display: flex; flex-direction: column; gap: .5em; margin-bottom: clamp(2px, .6vh, 8px); }
.account h2 {
    font-size: clamp(24px, 3.4vh, 40px);
    font-weight: 900;
    font-stretch: 125%;
    line-height: .86;
    letter-spacing: -.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.account-plan { font-size: clamp(15px, 1.6vh, 17px); font-weight: 600; font-stretch: 112%; line-height: 1.2; color: var(--muted); }
.empty { font-size: var(--fs-fact); color: var(--muted); }

/* Ruled rows (the site's live status list): a 1px line above the list and under every row.
   The rows share the columns of .limits (subgrid), so the bars of one account line up while the
   label column is as wide as its longest text (up to 45%). */
.limits {
    display: grid;
    grid-template-columns: fit-content(45%) minmax(0, 1fr) max-content;
    column-gap: clamp(20px, 2.4vw, 44px);
    border-top: 1px solid var(--line);
}
.limit {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: 3px;
    padding: clamp(10px, 1.9vh, 22px) 0;
    border-bottom: 1px solid var(--line);
}
.l-name { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(16px, 1.9vh, 20px); font-weight: 600; font-stretch: 112%; line-height: 1.25; overflow-wrap: anywhere; }
.l-sub { grid-column: 1; grid-row: 2; align-self: start; font-size: clamp(15px, 1.5vh, 16px); font-weight: 600; font-stretch: 100%; line-height: 1.35; color: var(--muted); white-space: nowrap; }
.limit .meter { grid-column: 2; grid-row: 1 / 3; }
.l-pct { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; font-size: var(--fs-fact); font-weight: 600; font-stretch: 112%; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.l-pct b { font-size: clamp(17px, 2vh, 22px); font-weight: 800; font-stretch: 118%; letter-spacing: -.01em; color: var(--fg); }
.l-status { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; font-size: clamp(15px, 1.5vh, 16px); line-height: 1.35; white-space: nowrap; }

/* ---------------------------------------------------------------- "This week" chart
   Fills the free height of the column. The SVG is stretched (preserveAspectRatio="none") with
   non-scaling strokes; everything that must not stretch (labels, the hexagon "now") is HTML placed
   by --x / --y on top of it. Back to front: day lines, 100% cap, even pace, trend band, area,
   baseline, trend, actual usage. */
.chart {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 26px;               /* room for an end label that sits above the 100% line */
}
.plot { position: relative; flex: 1 1 auto; min-height: 90px; max-height: 44vh; }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot svg * { vector-effect: non-scaling-stroke; fill: none; stroke-width: 1px; }
.plot .day   { stroke: var(--line-faint); }
.plot .cap   { stroke: var(--line-faint); }
.plot .base  { stroke: var(--line); }
.plot .even  { stroke: var(--pace-line); }
.plot .band  { fill: var(--trend); fill-opacity: var(--band-opacity); stroke: none; }
.plot.sev-warning { --sev: var(--sev-warning-line); }
.plot .area  { fill: var(--sev); fill-opacity: var(--area-opacity); stroke: none; }
.plot .used  { stroke: var(--sev); stroke-width: 2px; stroke-linejoin: miter; stroke-linecap: butt; }
.plot .trend { stroke: var(--trend); stroke-width: 2px; stroke-dasharray: 6 5; stroke-linecap: butt; }
.trend-normal   { --trend: var(--muted); }
.trend-warning  { --trend: var(--sev-warning-text); }
.trend-critical { --trend: var(--sev-critical-text); }

.cap-label, .end-label {
    position: absolute;
    font-size: var(--fs-ui);
    font-weight: 600;
    font-stretch: 112%;
    line-height: 1;
    color: var(--muted);
    white-space: nowrap;
}
.cap-label {
    left: 0;
    top: 0;
    transform: translateY(-50%);
    padding-right: 8px;
    background: var(--bg);            /* knocks the cap line out behind the label */
}
/* the end of the dashed trend: "Sun 14:00" where it reaches 100%, "about 22%" at the reset */
.end-label {
    left: var(--x, 100%);
    bottom: var(--y, 0%);
    transform: translate(-100%, -10px);
    padding: 2px 0 2px 6px;
    background: var(--bg);
    color: var(--trend);
}
.end-label.at-left { transform: translate(8px, -10px); }
/* "now": the flat-top hexagon of the status dot, in the marker colour (white = now, as the tick) */
.now {
    position: absolute;
    left: var(--x, 0%);
    bottom: var(--y, 0%);
    width: 13px;
    height: 11.3px;
    transform: translate(-50%, 50%);
}
.now::before, .now::after { content: ""; position: absolute; clip-path: var(--hex); }
.now::before { inset: -3px -3.5px; background: var(--bg); }
.now::after { inset: 0; background: var(--marker); }

.days { position: relative; height: 24px; }
.days span {
    position: absolute;
    top: 0;
    left: var(--x, 0%);
    padding: 7px 0 0 6px;
    border-left: 1px solid var(--line-faint);   /* the day line continues down to its label */
    font-size: var(--fs-ui);
    font-weight: 600;
    font-stretch: 112%;
    line-height: 1.2;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- footer */
.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: clamp(10px, 1.6vh, 16px);
    border-top: 1px solid var(--line-faint);
    font-size: var(--fs-ui);
    font-weight: 600;
    font-stretch: 112%;
    line-height: 1.4;
    color: var(--muted);
}
.footer .links { display: flex; flex-wrap: wrap; align-items: center; }
.footer .links a { color: var(--link); text-decoration: none; transition: color .25s; }
.footer .links a + a::before {
    content: "";
    display: inline-block;
    width: .4em;
    height: .75em;
    margin: 0 .8em;
    vertical-align: -.05em;
    background: var(--sep-quiet);
    transform: skewX(var(--skew));
}
.footer .links a:focus-visible { color: var(--fg); }
@media (hover: hover) { .footer .links a:hover { color: var(--fg); } }
.footer .key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer .key > span { display: inline-flex; align-items: center; gap: 8px; }
.tick { display: inline-block; width: 2px; height: 20px; background: var(--marker); transform: skewX(var(--skew)); }
.glyph { width: 22px; height: 12px; overflow: visible; }
.glyph line { fill: none; }
.glyph .g-used  { stroke: var(--sev-normal); stroke-width: 2; }
.glyph .g-even  { stroke: var(--pace-line); stroke-width: 1; }
.glyph .g-trend { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 6 5; }
@media (pointer: coarse) {
    .footer .links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------------------------------------------------------------- short desktop screens
   1280x720 and similar: tighter vertical rhythm so everything fits without scrolling. */
@media (min-width: 1100px) and (max-height: 880px) {
    .app { gap: 3vh; }
    .hero { padding-bottom: 3vh; }
    .hero .meter { margin-top: 1.8vh; }
    .hero .pace { margin-top: 1.4vh; }
    .account { gap: 1.4vh; }
    .limit { padding: 1.3vh 0; }
    .chart { padding-top: 22px; }
}

/* ---------------------------------------------------------------- narrow columns + phones */
@container (max-width: 520px) {
    .limits { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 16px; }
    .limit { grid-template-rows: auto auto auto; row-gap: 8px; padding: 16px 0; }
    .l-name, .l-pct { align-self: baseline; }
    .limit .meter { grid-column: 1 / -1; grid-row: 2; margin: 4px 0; }
    .l-pct { grid-column: 2; }
    .l-sub { grid-row: 3; white-space: normal; }
    .l-status { grid-column: 2; grid-row: 3; align-self: baseline; }
}
/* Desktop: the chart may shrink to fit (an account with four rows: a tight model cap + credits), and
   four or more rows sit a little closer together. */
@media (min-width: 1100px) {
    .plot { min-height: clamp(56px, 9vh, 90px); }
    .limits:has(> .limit:nth-child(4)) .limit { padding-block: .8vh; }
}
@media (min-width: 1100px) and (max-height: 760px) {
    .plot { min-height: 46px; }      /* the extreme: four rows on a 1280x720 screen */
}
/* Accounts stacked in one wide column (1100 px to ~1210 px with two accounts): the page scrolls, so the
   chart gets a fixed height instead of the free space. */
@container (min-width: 900px) {
    .accounts:not(.single) .plot { flex: none; height: 168px; max-height: none; }
}
/* Below the two-column desktop the page scrolls: the chart gets a fixed height instead of the
   free space. Phones: fixed sizes instead of the vh-scaled ones; display text drops to 100% width
   where a wide line would collide (the site does the same for its phone H1). */
@media (max-width: 1099px) {
    .plot { flex: none; height: 168px; max-height: none; }
}
@media (max-width: 640px) {
    .app { gap: 32px; padding-top: 16px; }
    .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 12px; }
    .brand { display: contents; }
    .title { grid-row: 1; grid-column: 1; font-size: clamp(14px, calc((100vw - 186px) / 9.6), 20px); font-stretch: 100%; }
    .actions { grid-row: 1; grid-column: 2; gap: 12px; }
    .actions .btn:not(.btn-icon) { padding: 0 1rem; }
    .live { grid-row: 2; grid-column: 1 / -1; justify-self: start; min-width: 15rem; margin-left: 4px; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 28px; }
    .hero-figure { gap: 14px; }
    .eyebrow { font-size: 15px; }
    .hero-number .big { font-size: clamp(72px, 24vw, 120px); }
    .hero-number .pct { font-size: clamp(29px, 9.6vw, 48px); }
    .hero-line .what { font-size: 20px; }
    .hero-line .status-word, .hero .when, .hero .pace { font-size: 15px; }
    .hero .meter { margin-top: 16px; }
    .hero .pace { margin-top: 12px; }
    .account h2 { font-size: 22px; }
    .account-plan, .l-sub, .l-status, .l-pct { font-size: 15px; }
    .l-name { font-size: 17px; }
    .l-pct b { font-size: 19px; }
    .chart { padding-top: 26px; }
    .footer { flex-direction: column; align-items: flex-start; }
}
/* the label of a last, partial day only where its few hours are wide enough to hold it */
@container (max-width: 600px) {
    .days .tail { display: none; }
}

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

/* ---------------------------------------------------------------- login
   The site's forms: no boxes, a 1px line under each field that turns into a 2px blue line on
   focus, square corners, and the brand's primary button (yellow on black, black on white). */
.login-wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 44px;
    padding: 24px var(--gutter);
}
.login-wrap .title { font-size: clamp(28px, 5vw, 44px); }
.login-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-ui); font-weight: 600; font-stretch: 112%; color: var(--muted); }
.field input {
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--rim);
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    font-size: 17px;
}
.field input:focus { outline: none; border-bottom: 2px solid var(--blue); padding-bottom: 7px; }
.field:focus-within label { color: var(--focus-label); }
.btn-primary { margin-top: 8px; width: 100%; min-height: 52px; color: var(--primary-fg); font-size: var(--fs-fact); }
.btn-primary::before { border: 0; background: var(--primary-bg); }
.btn-primary::after { background: var(--primary-hover); }
.btn-primary:focus-visible { color: var(--black); outline: 2px solid var(--focus); outline-offset: 4px; }   /* = hover: black on the wipe */
@media (hover: hover) { .btn-primary:hover { color: var(--black); } }