/* ============================================================
BASE — design tokens, reset, typography, auth, nav, shared
page chrome (page-inner / panel), role picker, undo bar.
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
/* ── THE BRAND PALETTE ────────────────────────────────────────────
Three colours, fixed, theme-independent. Everything below is a
ROLE that points at one of them (or at a neutral derived from
one), so the palette is stated once and read everywhere.
--brand-lav lavender, the accent on light grounds
--brand-grn green, the accent on dark grounds
--brand-ink the darkest neutral: the dark theme's page, and
the light theme's text
Why the accent SWAPS by theme rather than staying one colour:
lavender on the dark ground manages 3.5:1 and green on the light
ground manages 1.6:1 — each of the two is unreadable on the
other's background, and each is excellent on its own (green on
ink 11.8:1, lavender on paper 4.6:1). One accent for both themes
would have meant one of them being wrong everywhere.
NOT covered by this palette, on purpose: the per-action TAG
colours (TC[] in js/data.js, the swatch list in js/custom.js and
the label map in js/tagcsv.js). Those encode which action a
button is, they are saved into every user's panels, and
repainting them would change what people's own data means. Same
for the chart palette in js/report.js. A colour that carries
information is not chrome. */
--brand-lav:#635be0;
--brand-grn:#afe259;
--brand-ink:#00192d;
/* THE DARK GROUND IS NOT THE BRAND INK. It was, until 2026-09-02, and
that is why this line and --brand-ink above look like a near-miss
rather than a typo. The ink is a BRAND colour — it is the body text of
the light theme (css/theme-light.css --t) and the tint every hairline
and shadow there is mixed from — and it stayed exactly where it was.
What moved is the dark theme's ground, to a deeper, cooler near-black.
The surface ramp moved WITH it, and had to. These four are one family
or they are nothing: a card is legible as a card because it is a known
step up from the ground behind it, and leaving the old navy surfaces
(#07253e / #10334e / #1b405d) on a near-black ground made every panel
read as a lighter blue sheet floating above the page rather than a
raised part of it. Same hue, same step sizes, re-based on the new
ground. Changing --bg alone is the one edit to never make here. */
--bg:#010b16;--s1:#071726;--s2:#0e2236;--s3:#182f46;
--b:rgba(255,255,255,0.07);--bm:rgba(255,255,255,0.12);--bs:rgba(255,255,255,0.2);
--t:#f0f2f5;--t2:#93a5b7;--t3:#556478;
--ac:#afe259;--acd:rgba(175,226,89,0.14);--acb:rgba(175,226,89,0.32);
/* The accent's channels on their own, so a one-off tint can be written
as rgba(var(--ac-rgb),.25) and follow the theme instead of freezing a
literal. Half a dozen accent tints across review/tagger/pages had
frozen the pre-2026-09 green exactly that way and were still showing
it after the palette moved. */
--ac-rgb:175,226,89;
/* Success. In the dark theme it IS the accent; the light theme darkens
it, because #afe259 on paper is 1.6:1 and unreadable as text. */
--ok:#afe259;--okd:rgba(175,226,89,0.14);--okb:rgba(175,226,89,0.4);
/* Danger has two jobs and needs two names, not three literals. --rd is
the CHROME red — a dot, a bar, a tint. --rd-str is danger that has to
READ: an error line under a form field, a quota that is actually full.
Before this, --rd was the token, #e5484d was written out nine times for
the second job, and #b3261e was written out separately in landing.css
and pages.css for the same job on the public pages. */
--rd:#ff4d4d;--rdd:rgba(255,77,77,0.12);--rd-str:#e5484d;
--bl:#4d9fff;--bld:rgba(77,159,255,0.12);
--am:#f5a623;--amd:rgba(245,166,35,0.1);
/* Semantic chrome tokens — the light/pastel theme re-points these
(see css/theme-light.css). Kept here so the dark default is self-
contained and every module keeps reading from one place. */
--on-ac:#010b16; /* text/icons on a bright accent fill */
--nav-bg:rgba(1,11,22,.94); /* sticky top bar */
--scrim:rgba(0,0,0,.6); /* modal / drawer backdrop */
--shadowlg:0 8px 26px rgba(0,0,0,.5);
--shadowmd:0 10px 28px rgba(0,0,0,.4);
--shadowxl:0 20px 60px rgba(0,0,0,.5);
--r:10px;--rsm:6px;--nh:54px;
/* ── CONTROL SIZES ───────────────────────────────────────────────
Four heights for everything a finger or a pointer lands on. Before
this the primary action button existed at eight heights (30–44px),
the text input at six (26–42px) and the pill at three (30/34px) —
which is not a hierarchy, it is the same control drawn from memory
in fourteen different files.
--ctl-h-lg a full-width form submit; also the touch floor
--ctl-h THE DEFAULT: a primary action, a filter button, an
input, a search box
--ctl-h-sm a pill — chip, tab, compact inline action
--ctl-h-xs a figure box inside a dense row (a keycap, a minutes
field, a clip length). A fourth size on purpose: these
sit INSIDE a row of other controls, so matching the
row's height would break the row.
NOT covered, same exemption as the type scale: the tag buttons and
the fullscreen camera HUD, which are sized for a thumb at arm's
length rather than for a pointer. */
--ctl-h-lg:44px;--ctl-h:38px;--ctl-h-sm:32px;--ctl-h-xs:28px;
/* ── MOTION ──────────────────────────────────────────────────────
Ten durations between .1s and .3s were in use with no token, most of
them .15s or .12s and the rest one-offs. Two roles now: --dur for a
hover or state change, --dur-slow for something that moves or grows. */
--dur:.15s;--dur-slow:.25s;
/* The uppercase micro-label had eight letter-spacings (.02em → .1em) on
what is one thing. It has one now. */
--ls-label:.08em;
--mono:'DM Mono',monospace;--sans:'Outfit',sans-serif;
/* ── TYPE SCALE ──────────────────────────────────────────────────
One family (Outfit) and six sizes for everything structural, so a
heading is the same size wherever it appears and a description is
the same size wherever it appears. Before this there were 25
distinct font sizes across the stylesheets, most of them within a
pixel of each other — 13px and 13.5px and 14px all meaning "an item
name", which reads as sloppiness rather than hierarchy.
--fs-display the one big title on a page (Home)
--fs-h1 the title of a page or an overlay
--fs-h2 the title of a section or a card
--fs-h3 the name of a row, tile or list item
--fs-body normal reading text
--fs-sm secondary text: descriptions, meta, captions
--fs-xs micro labels, almost always mono + uppercase
NOT covered on purpose: the tag buttons, the fullscreen camera HUD
and the mono stat figures. Those are sized for a thumb at arm's
length in bright sun, and a shared scale is the wrong master for
them — see the note above .tag-btn in css/tagger.css.
DM Mono is kept for FIGURES ONLY (timestamps, counts, keyboard
chips), never for prose. */
/* The top three roles are FLUID: they interpolate continuously between a
320px phone and a 640px tablet instead of jumping at one breakpoint, so a
heading is in proportion to the screen it is actually on rather than to
whichever side of 640 that screen fell. Each clamp is written as
min + (max−min)×(100vw−320px)/320, which lands exactly on the old phone
value at 320px and the old desktop value at 640px — so nothing moved at
either end, the steps between them were filled in.
The four roles below --fs-h2 stay FIXED on purpose: they are already at
the floor for comfortable reading, and making them fluid could only make
them smaller on a small screen, which is the opposite of the point. */
--fs-display:clamp(24px,20px + 1.25vw,28px);
--fs-h1:clamp(19px,16px + 0.94vw,22px);
--fs-h2:clamp(14.5px,14px + 0.16vw,15px);
--fs-h3:13.5px;
--fs-body:13px;
--fs-sm:12px;
--fs-xs:10.5px;
/* An uppercase, letter-spaced rule label ("BY ACTION", "PLAYERS"). It is a
signpost, not a heading, so it has its own size — putting it on --fs-h2
would set 15px uppercase, which shouts. */
--fs-label:11px;
--lh-tight:1.25;
--lh-body:1.6;
/* The marketing site and the legal pages read at arm's length on a laptop,
not at a glance on a touchline, so they get their own larger scale.
Same six roles, same discipline — just editorial rather than dense. */
--fs-ld-h1:clamp(28px,3.6vw,38px);
--fs-ld-h2:clamp(20px,2.4vw,25px);
--fs-ld-h3:16px;
--fs-ld-body:14px;
}
/* (The old max-width:640px step-down for --fs-display / --fs-h1 / --fs-h2 is
gone — the clamp()s above express the same two endpoints as a continuous
ramp, so the breakpoint had nothing left to do.) */
html,body{height:100%;background:var(--bg);font-family:var(--sans);color:var(--t);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:14px}
/* Form controls do NOT inherit font-family — the UA stylesheet gives them its
own default, which is Arial here. Every button in the app that remembered to
say `font-family:var(--sans)` was fine; the ones that forgot were silently
rendering in a THIRD typeface. Seven of them in the app and two on the
landing page, found by walking computed styles rather than reading the CSS,
because nothing in the stylesheets says "Arial" — it is what you get when
nobody says anything at all.
Inherit rather than var(--sans) so a control that deliberately sits in a
mono context follows its parent; the handful that genuinely want DM Mono
(e.g. the speed buttons) set it on a class, which outranks this. */
button,input,select,textarea{font-family:inherit}
/* ── THE PRIMARY ACTION BUTTON ──────────────────────────────────────
One control, fourteen names, and until now fourteen drawings of it:
eight heights between 30 and 44px, four font sizes, three radii, and
one (.rec-btn) at weight 600 where the other thirteen were 700. Where
a button lands and how big it is were being decided again in every
file that needed one.
The box is stated here once. Each of these keeps only what is
genuinely its own — .auth-btn is full width, .ce-pick-go must not
flex, .rev-up-chip hides a file input — and nothing re-states the
height, the type or the fill.
Deliberately NOT in this list: .hp-go on the Help page. It looks like
the fourteenth variant and is not one — it is a DRAWING of the record
button inside a phone mockup, sized to sit beside .hp-fld (30px) and
.hp-tick (13px). Putting it on the real scale would break the mock,
the same way .tag-btn is exempt from the type scale. */
.auth-btn,.rev-up-chip,.pr-new-btn,.save-custom-btn,.rec-btn,.fi-modal-go,
.onboard-go,.home-empty-cta,.pr-empty-cta,.stat-save,.vid-url-load,
.ce-pick-go,.rec-restore{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
height:var(--ctl-h);padding:0 16px;border:none;border-radius:var(--rsm);
background:var(--ac);color:var(--on-ac);
font-family:var(--sans);font-size:var(--fs-body);font-weight:700;
white-space:nowrap;text-decoration:none;cursor:pointer;
transition:filter var(--dur)}
.auth-btn:hover,.rev-up-chip:hover,.pr-new-btn:hover,.save-custom-btn:hover,
.rec-btn:hover,.fi-modal-go:hover,.onboard-go:hover,.home-empty-cta:hover,
.pr-empty-cta:hover,.stat-save:hover,.vid-url-load:hover,.ce-pick-go:hover,
.rec-restore:hover{filter:brightness(1.05)}
.auth-btn svg,.rev-up-chip svg,.pr-new-btn svg,.home-empty-cta svg,
.pr-empty-cta svg,.ce-pick-go svg,.rec-restore svg{width:15px;height:15px}
/* ── THE PUBLIC-PAGE BUTTON ─────────────────────────────────────
The landing page and the legal / support pages are one surface to a
visitor, and drew two button systems a few pixels apart: .ld-btn at
40px / 13.5px / 700 / --rsm against .pg-btn at 42px / 14px / 600 /
--r. The difference is invisible on either page alone and obvious the
moment someone crosses between them.
It lives here rather than in landing.css because the pages that use
.pg-btn — contact, help, report, the payment results — load base.css
and pages.css and never load landing.css.
The public scale is editorial (--fs-ld-body) and the height is the
touch floor: these are the pages a phone lands on first. */
.ld-btn,.pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:var(--ctl-h-lg);padding:0 20px;border-radius:var(--rsm);
font-family:var(--sans);font-size:var(--fs-ld-body);font-weight:700;
cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;
transition:filter var(--dur),background var(--dur),border-color var(--dur)}
/* ── EMPTY STATES ───────────────────────────────────────────────────
"Nothing here yet" existed thirteen times, in five font sizes, two
text colours, eight paddings, and with a dashed border on four of the
thirteen — so the same sentence looked like a different kind of thing
on every screen it appeared on.
There are two real patterns, not thirteen:
.fi-blank a PANEL with nothing in it. The content area of a page
or a card, so it is centred, has room, and carries the
dashed edge that says something belongs here.
.fi-none an INLINE note where a short list would be. One line of
muted text; a border would draw more attention to the
absence than to the page.
Each screen's own class is aliased onto one of the two rather than
renamed in the markup, so nothing had to be re-tagged and a screen
that wants a taller box still says so in its own file.
.tag-empty is not here: it is the fullscreen camera HUD, exempt for
the same reason the tag buttons are. */
.fi-blank,.home-empty,.ce-empty,.dh-empty,.pr-empty,.mw-empty,.tl-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:13px;padding:32px 22px;text-align:center;
background:var(--s1);border:1px dashed var(--bm);border-radius:var(--r);
font-size:var(--fs-sm);color:var(--t2);line-height:var(--lh-body)}
.fi-blank b,.home-empty b,.ce-empty b,.dh-empty b,.pr-empty b,.mw-empty b,
.tl-empty b{color:var(--t)}
.fi-blank p,.home-empty p,.ce-empty p,.dh-empty p,.pr-empty p{
font-size:var(--fs-sm);line-height:var(--lh-body);max-width:420px;margin:0}
.fi-none,.rv-empty,.pp-empty,.stat-empty,.storage-empty,.fi-pick-empty,
.log-empty{font-size:var(--fs-sm);color:var(--t3);line-height:1.55;
padding:10px 2px}
/* ── FOCUS ──────────────────────────────────────────────────────────
Nine stylesheets — pages, datahub, fullscreen, billing, camera,
mobile, audience, repair, tour — had no :focus-visible rule at all,
which includes every supporting page and the whole of Insights. On
those screens a keyboard user could not see where they were.
:where() so this carries ZERO specificity: it is the floor, and every
component that already draws its own focus ring still wins. */
:where(a,button,select,input,textarea,summary,[tabindex]):focus-visible{
outline:2px solid var(--ac);outline-offset:2px;border-radius:2px}
/* ── TYPOGRAPHIC ORPHANS ────────────────────────────────────────────
A single word stranded on the last line of a heading is the most
visible typesetting fault a page has, and because it moves with the
viewport it cannot be fixed by hand at one breakpoint — the width
that fixes a laptop creates one on a tablet.
`balance` evens the line lengths of a heading, which is what stops
the orphan; browsers cap it at a handful of lines, which is exactly
the range headings live in and why it is not applied to prose.
`pretty` leaves normal paragraph rag alone and only refuses to end a
block on a single word, which is what body copy needs.
Degrades safely everywhere: an unsupported value falls back to
`wrap`, i.e. today's behaviour. Firefox currently has `balance` and
not `pretty`, so its headings balance and its paragraphs are
unchanged. The hand-set in the marketing headings sits ON TOP
of this on purpose — it is the only part that holds in a browser
with neither, and it costs nothing in one that has both.
Deliberately NOT applied to the tag buttons, the fullscreen HUD or
any mono figure: those are single words or numbers, where balancing
has nothing to do and only costs layout work. */
h1,h2,h3,h4,h5,h6,
.hp-check-h,.hp-qs-h,.hp-step-h,.hp-manual-h3,.ld-price-flag{text-wrap:balance}
p,li,dd,figcaption,
.ld-lead,.ld-sec-lead,.ld-hero-note,.page-hdr p{text-wrap:pretty}
/* ── THE SITE FOOTER ────────────────────────────────────────────────
One footer — Platform / Resources / Legal — on the landing page
and on all eight support pages, and a two-column cut of it (Resources
/ Legal only) at the foot of the app's Home dashboard, which had no
footer at all once you signed in. The app copy drops Platform and Book
a demo on purpose: a signed-in user is past the marketing funnel and
every one of those links pointed back out to index.html.
It replaced two different things: a four-column footer on index.html
whose headings (Product / Get started / Support / Company) split the
same links four ways, and a bare row of five or six links at the
bottom of the support pages, no two of which listed the same five.
It lives HERE rather than in landing.css because base.css is the one
stylesheet every page already links: putting it here is what let the
markup drop into ten pages without wiring a new into ten
s — landing.css is loaded by index.html and nothing else.
The markup IS duplicated per page, on purpose. There is no build
step and no templating in this project, and a footer injected by
JavaScript would take the Legal column down with it the first time a
script fails to load — and the Legal column is what carries the
route we are actually obliged to keep reachable.
Legal was shortened on 2026-09-03: Security and Sub-processors came
out, and they now sit one click deeper, behind the Privacy Policy link
(privacy.html #security and #processors). Grievance Officer did NOT
come out, and must not. It was cut in that same pass and put straight
back, because the IT Rules 2021 §79 safe-harbour condition is that the
officer's details are published and the route answered — and a link
from every page is the cheapest way to be sure of it. Trim this column
again if you like; leave those two links (Privacy Policy, Grievance
Officer) alone. Every copy was generated from a single string; grep
`class="sf"` to find them all. */
.sf{border-top:1px solid var(--b);background:var(--s1);padding:44px 0 32px;margin-top:64px}
.sf-in{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.sf-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;margin-bottom:30px}
.sf-brand{max-width:280px}
.sf-lock{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.3px;font-size:16px;color:var(--t);text-decoration:none}
.sf-lm{width:30px;height:30px;flex-shrink:0;display:block}
.sf-lm svg{width:100%;height:100%;display:block}
.sf-brand p{margin-top:12px;font-size:var(--fs-body);color:var(--t2);line-height:1.6}
.sf-cols{display:flex;flex-wrap:wrap;gap:46px}
.sf-col h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--t3);margin-bottom:12px}
.sf-col a{display:block;font-size:var(--fs-h3);color:var(--t2);text-decoration:none;margin-bottom:9px}
.sf-col a:hover{color:var(--ac)}
.sf-bot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid var(--b);font-size:var(--fs-sm);color:var(--t3)}
.sf-bot a{color:var(--t3);text-decoration:none}
.sf-bot a:hover{color:var(--t2)}
/* Touch targets: the same 44px floor the rest of the app holds to. The
links are stacked, so the height is spent as padding, not type size. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
.sf{padding:34px 0 26px;margin-top:44px}
.sf-cols{gap:22px 40px}
.sf-col a{padding:12px 0;margin-bottom:0}
.sf-bot a{display:inline-block;padding:10px 0}
}
/* ── THE 16px iOS ZOOM FLOOR — every page, not just the app ──
Safari on iOS zooms the viewport the moment a focused field's font-size is
under 16px, and the reader then has to pinch back out mid-form. This floor
used to live only in mobile-enhance.css, which is loaded by app.html and by
nothing else — so it covered the app and missed every form a prospective
customer meets first: the demo request on the landing page (14px), the
contact form (14px) and Report a problem (14px, and a 12.5px textarea).
It lives here now because base.css is the one stylesheet every page links.
!important is deliberate and is the same call mobile-enhance.css documented:
this is a platform-behaviour floor, not a style preference, and a bare
`input` selector loses to any of the id- or class-scoped sizes above it.
The third condition catches tablets, which are all touch and no hover. */
@media(max-width:760px),(orientation:landscape) and (max-height:520px),(hover:none) and (pointer:coarse){
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
body select,
body textarea{ font-size:16px !important }
}
/* THE SAME BUG AS THE LINE ABOVE, in the other direction: nothing in any
stylesheet said what a link looks like, so a link nobody had thought about
got the UA's #0000EE — found the same way, by walking computed styles.
In the dark theme that is navy on near-black, and it was shipping: the
"Report Content" link in the support dialog (js/support.js) measured
rgb(0,0,238) against a #14181f panel.
Accent is what every OTHER surface already uses for a prose link — the
privacy, terms and help pages all resolve to it through their own scoped
rules — so this makes the default agree with the house style instead of
with the browser. A BARE `a` SELECTOR IS THE POINT: every deliberate link
colour in this app is set through a class (.auth-agree a, .set-ds a,
.fi-pf-consent a, .tm-link…), all of which outrank it, so this can only
ever reach a link that nothing else has an opinion about. Verified by
diffing computed colour on every anchor across app.html and the six static
pages before and after: exactly one changed. */
a{color:var(--ac)}
/* ── FIXED-CHROME HEIGHTS ──
Declared on , not :root, and that is deliberate. A var() inside a
custom property is substituted against the element the property is
DECLARED on — so if --nh lived on :root it would keep resolving against
:root's --navbarh no matter what a body-level class said. Keeping the
whole chain on body means the two toggles below re-point ONE input and
every consumer (.page padding, the sticky #cam-panel, the mobile drawer,
.recover-bar, #standtag-clockbar…) follows for free.
--navbarh the nav bar itself
--navtop bottom edge of the nav bar, notch included
--nh bottom edge of ALL fixed chrome — what layout code reads.
Equal to --navtop now that the nav is the only fixed chrome;
kept as its own name because every consumer reads it. */
body{
--navbarh:54px;
--safetop:env(safe-area-inset-top,0px);
--navtop:calc(var(--safetop) + var(--navbarh));
--nh:var(--navtop);
/* ── THE FOUR BEZELS, NAMED ONCE ──────────────────────────────
Every page here ships `viewport-fit=cover` (the meta at the top of each
.html), which is what lets the camera fill an iPhone edge to edge — and
which also means the LAYOUT VIEWPORT runs underneath the status bar, the
notch and the home indicator. A `position:fixed; inset:0` overlay
therefore starts ABOVE the visible screen, not at the top of it, and in an
installed PWA there is no browser chrome pushing it back down.
That is one bug wearing many hats, all of them reported from a phone:
a help chapter whose × was under the clock, a settings sheet you could
scroll but never close, a notice whose first two lines were behind the
notch. `--safetop` existed for the nav bar alone; the other three sides
had no name, so every overlay either ignored them or invented its own
env() call.
--gutter is the pattern to reach for: the design's own padding, or the
bezel, whichever is larger. Never their SUM — 20px + a 59px notch is 79px
of dead space at the top of a 390px phone. */
--sat:env(safe-area-inset-top,0px);
--sar:env(safe-area-inset-right,0px);
--sab:env(safe-area-inset-bottom,0px);
--sal:env(safe-area-inset-left,0px);
--gutter:20px;
--safe-pad:max(var(--gutter),var(--sat)) max(var(--gutter),var(--sar))
max(var(--gutter),var(--sab)) max(var(--gutter),var(--sal));
/* What is left of the screen once both bezels are taken out. Anything that
wants to be "as tall as it can be" measures against this, not 100dvh. */
--safeh:calc(100dvh - var(--sat) - var(--sab));
}
/* Keyboard focus ring — interactive elements (cards, tabs, icon buttons)
had no visible focus state. Drawn in the accent so it reads in both
themes; pointer clicks (:focus, not :focus-visible) stay ring-free. */
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* ── FOLDER CHIP BAR (shared: Matches + Presentations) ── */
.fi-folderbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:2px 0 14px}
.fi-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--s2);border:1px solid var(--b);
border-radius:99px;color:var(--t2);font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;
padding:6px 12px;cursor:pointer;transition:border-color var(--dur),color var(--dur),background var(--dur)}
.fi-fchip:hover{border-color:var(--bm);color:var(--t)}
.fi-fchip.active{background:var(--acd);border-color:var(--acb);color:var(--t)}
.fi-fchip .fi-ic{width:14px;height:14px}
/* 500, not the chip's 600: DM Mono has no face above 500 and the browser
synthesises one by smearing (css/fonts.css). */
.fi-fchip-n{background:var(--s3);border-radius:var(--r);padding:0 7px;font-size:var(--fs-label);font-family:var(--mono);font-weight:500;color:var(--t2);min-width:18px;text-align:center}
.fi-fchip.active .fi-fchip-n{background:var(--acb);color:var(--t)}
.fi-fchip-menu{display:inline-flex;align-items:center;opacity:.55;margin:-2px -4px -2px 2px;padding:2px;border-radius:var(--rsm)}
.fi-fchip-menu:hover{opacity:1;background:var(--bm)}
.fi-fchip-new{border-style:dashed;color:var(--t3)}
.fi-fchip-new:hover{color:var(--ac);border-color:var(--acb)}
/* The folder button used to float over the presentation thumbnail, hidden
until .pr-card:hover — so on a tablet it did not exist. It lives in the
card's action row now and wears .match-ibtn; see css/review.css. */
/* ── AUTH ── */
/* Same bezel story as .settings-overlay below — and worse here, because this
is the FIRST screen of an installed PWA, where there is no browser chrome
holding it clear of the notch. */
#auth-overlay{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:var(--safe-pad);overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Cap the card to the viewport and let it scroll inside itself. This is the
reliable way to keep it centred yet reachable when it's taller than the
screen — flexbox centring alone clips the overflow with no way to scroll.
CENTRED, at every width. The card is the whole screen now — the branded
hero column that used to sit beside it on laptops is gone — and a left-rag
column of three short lines floating in the middle of a wide card reads as
something that failed to load. Everything that is prose or a control
centres; the FORM ROWS are pulled back to the left below, because a label
above a full-width input is read down its left edge and centring the pair
breaks the one alignment the eye is using. */
#auth-box{width:100%;max-width:420px;max-height:calc(var(--safeh) - 2*var(--gutter));overflow-y:auto;overscroll-behavior:contain;background:var(--s1);border:1px solid var(--bm);border-radius:16px;padding:40px 36px;text-align:center}
/* The two exceptions to the centring, and the reason for each: a label reads
down the left edge of the field it names, and typed text that centres itself
as you type is the single most disorienting thing an input can do. */
#auth-box .fi-pf-row,#auth-box .afl{text-align:left}
#auth-box .ai{text-align:left}
.auth-back{display:inline-block;margin-bottom:14px;font-size:var(--fs-sm);font-weight:600;color:var(--t2);text-decoration:none;cursor:pointer}
.auth-back:hover{color:var(--ac)}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px}
.auth-lm{width:36px;height:36px;flex:none;display:block}
.auth-lm svg{width:100%;height:100%;display:block}
.auth-ln{font-size:var(--fs-h1);font-weight:700;letter-spacing:-0.5px}
.auth-title{font-size:var(--fs-h1);font-weight:600;letter-spacing:-0.4px;margin-bottom:5px}
.auth-sub{font-size:var(--fs-sm);color:var(--t2);margin-bottom:24px;line-height:1.5}
.auth-tabs{display:flex;background:var(--s2);border-radius:var(--rsm);padding:3px;margin-bottom:20px}
.auth-tab{flex:1;height:30px;border:none;background:transparent;font-family:var(--sans);font-size:var(--fs-body);font-weight:500;color:var(--t2);cursor:pointer;border-radius:4px;transition:all var(--dur)}
.auth-tab.active{background:var(--s3);color:var(--t)}
.afl{font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t3);margin-bottom:5px;display:block}
.ai{width:100%;height:var(--ctl-h);padding:0 13px;background:var(--s2);border:1px solid var(--bm);border-radius:var(--rsm);font-family:var(--sans);font-size:14px;color:var(--t);outline:none;margin-bottom:12px;transition:border-color var(--dur)}
.ai:focus{border-color:var(--acb)}
.ai::placeholder{color:var(--t3)}
/* Native selects don't inherit .ai's look — restate the box, kill the OS
arrow and draw our own so the four registration fields read as one set. */
select.ai{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 12px center;background-size:11px 8px}
/* Registration details (js/profile.js) — sport and age group share a row on
anything wider than a small phone; they're two short answers, not two
screens. */
.fi-pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
@media(max-width:420px){.fi-pf-grid{grid-template-columns:1fr}}
/* AGE GROUPS — a set, because a club is usually more than one (js/profile.js).
Chips rather than a bare checkbox list: they have to sit in the half-row a