/* ===========================================================================
HYPECEIPT Mentorship Panel · design system
---------------------------------------------------------------------------
The desk. One green-black ground, one lighter sheet, flat layered surfaces
ruled by hairlines. Lime marks only the active leg. Everything visual is a
token from section 01; components compose tokens and never hardcode a
colour, a size, a radius, a shadow or a duration. The rules are DESIGN.md.
Sections
01 Tokens 07 Buttons 13 Overlays (modal, menu, toast)
02 Reset & base 08 Chips & pills 14 Feedback (empty, skeleton, loader)
03 Layout shell 09 Forms 15 Data viz (charts, rings, progress)
04 Sidebar & nav 10 Tables 16 Gamification
05 Typography 11 Cards & figures 17 Page modules
06 Grid & utilities 12 Tabs & segmented 18 Home & sign-in
19 Motion & a11y 22 Finds and scanner 25 Admin work surfaces
20 Autonomy admin 23 HYPE AI 26 Phone and touch
21 Review 24 Admin modules
======================================================================== */
/* ── 01 ─ Tokens ─────────────────────────────────────────────────────── */
:root {
color-scheme: dark;
/* Ground. Six steps of one green-black, darkest first. */
--bg-0: #090c0a;
--bg-1: #0f1310;
--bg-2: #151a16;
--bg-3: #1b211c;
--bg-4: #222925;
--bg-5: #2a322d;
/* Ink. fg-2 clears 4.5:1 on bg-3; fg-3 is decorative only. */
--fg-0: #eef1ec;
--fg-1: #b9c0ba;
--fg-2: #838c86;
--fg-3: #59615c;
/* Lines */
--line-0: rgba(255, 255, 255, .05);
--line-1: rgba(255, 255, 255, .08);
--line-2: rgba(255, 255, 255, .14);
/* Accent. A calmer lime than the logo; marks only the active leg. */
--accent: #c8f560;
--accent-2: #a9d64a;
--accent-3: #d9f98a;
--on-accent: #0f1408;
--accent-soft: rgba(200, 245, 96, .10);
--accent-mid: rgba(200, 245, 96, .22);
--accent-line: rgba(200, 245, 96, .35);
/* Semantic. Distinct from the brand so "good" never reads as "branded". */
--ok: #3fd9a0; --ok-soft: rgba(63, 217, 160, .12); --ok-line: rgba(63, 217, 160, .34);
--warn: #f0b35a; --warn-soft: rgba(240, 179, 90, .12); --warn-line: rgba(240, 179, 90, .34);
--danger: #f26d6d; --danger-soft: rgba(242, 109, 109, .12); --danger-line: rgba(242, 109, 109, .34);
--info: #6fb2ff; --info-soft: rgba(111, 178, 255, .12); --info-line: rgba(111, 178, 255, .34);
/* Metallics for the podium only. */
--gold: #e9c96a; --gold-soft: rgba(233, 201, 106, .14);
--silver: #cdd3d8; --silver-soft: rgba(205, 211, 216, .12);
--bronze: #cf9a6c; --bronze-soft: rgba(207, 154, 108, .14);
/* The saber: the one glow, on progress fills and the tab underline. */
--saber: 0 0 6px rgba(200, 245, 96, .35);
/* Shadows exist only on things that float. One soft layer with an offset. */
--shadow-2: 0 6px 20px rgba(0, 0, 0, .3);
--shadow-3: 0 16px 48px rgba(0, 0, 0, .4);
/* Product photos come on white; the thumb ground matches them. */
--thumb-ground: #f3f3f1;
/* Glass. Translucent fills paired with a blur; never nested. */
--blur-sm: 8px;
--blur-md: 16px;
--blur-lg: 24px;
--glass-1: rgba(15, 19, 16, .72);
--glass-2: rgba(21, 26, 22, .78);
--glass-3: rgba(27, 33, 28, .68);
/* Shape */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 20px;
--r-pill: 999px;
/* Space (4px base) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;
/* Type. One family, two weights. */
--font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-2xs: .6875rem; /* 11 */
--fs-xs: .75rem; /* 12 */
--fs-sm: .8125rem; /* 13 */
--fs-md: .875rem; /* 14 */
--fs-lg: .9375rem; /* 15 */
--fs-xl: 1.125rem; /* 18 */
--fs-2xl: 1.375rem; /* 22 */
--fs-3xl: 1.75rem; /* 28 */
--fs-4xl: 2.5rem; /* 40 */
--fw-r: 400;
--fw-m: 500;
--lh-tight: 1.15;
--lh: 1.5;
--track-label: .08em;
/* Motion */
--ease: cubic-bezier(.22, 1, .36, 1);
--t-1: 120ms;
--t-2: 180ms;
--t-3: 240ms;
/* Layers. On phones the drawer and its scrim sit above both bars. */
--z-sticky: 20; --z-sidebar: 30; --z-tabbar: 35; --z-appbar: 35; --z-scrim: 38; --z-drawer: 40;
--z-menu: 50; --z-modal: 60; --z-toast: 70; --z-loader: 100;
/* The dim behind dialogs and the drawer. */
--scrim: rgba(4, 6, 5, .5);
/* Safe areas: the notch, the status bar, the home indicator. The shell reads
the insets only through these, so a test can set them. */
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
/* Shell */
--sb-w: 248px;
--sb-w-c: 64px;
--sheet-gap: 12px;
--tabbar-h: 64px;
--appbar-h: 52px;
--content-max: 1200px;
--gutter: var(--s-8);
/* The inset of a card's or dialog's content: head, body, foot, row sides, edge table cells. */
--inset: var(--s-6);
/* What fixed chrome covers at each end of the page: nothing on desktop, the bars on phones. */
--shell-top: 0px;
--shell-bottom: 0px;
/* Room the install banner takes above the tab bar while it shows (set by pwa.mjs). */
--install-space: 0px;
}
/* Phones, on the pages that wear the app's shell: the upper type steps come
down a little (14 and below stay), and cards and dialogs inset their
content by 16px instead of 24. */
@media (max-width: 575.98px) {
html.has-shell {
--inset: var(--s-4);
--fs-lg: .875rem; /* 14: a card title is body size at 500 */
--fs-xl: 1.0625rem; /* 17 */
--fs-2xl: 1.25rem; /* 20 */
--fs-3xl: 1.5rem; /* 24 */
--fs-4xl: 2rem; /* 32 */
}
}
/* ── 02 ─ Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--shell-top) + var(--s-6));
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg-0);
color: var(--fg-0);
font-family: var(--font);
font-size: var(--fs-md);
font-weight: var(--fw-r);
line-height: var(--lh);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-feature-settings: "ss01";
}
/* Ambient: one bloom of the accent at the top of the ground. Nothing else. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(60% 40% at 50% -10%, rgba(200, 245, 96, .07), transparent 70%);
}
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg-0); }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-m); line-height: var(--lh-tight); color: var(--fg-0); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
ul.plain, ol.plain { list-style: none; }
hr { border: 0; border-top: 1px solid var(--line-1); margin: var(--s-5) 0; }
code, kbd, samp, .mono { font-family: var(--mono); font-size: .92em; }
code { background: var(--bg-3); border: 1px solid var(--line-1); border-radius: var(--r-xs); padding: .08em .4em; color: var(--fg-1); }
[hidden] { display: none !important; }
html.has-modal, html.has-drawer { overflow: hidden; }
/* Controls: no double-tap zoom, no grey tap flash, and hit targets that meet
24px on desktop and 44px on touch even when the visual is smaller. */
button, a, [role="button"], input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn-sm, .btn-icon, .chip.is-clickable, .toast-close, .install-close, .link-btn, .seg { position: relative; }
.btn-sm::before, .btn-icon::before, .chip.is-clickable::before, .toast-close::before, .install-close::before, .link-btn::before, .seg::before { content: ""; position: absolute; inset: -3px; }
@media (pointer: coarse) {
.btn-sm::before, .btn-icon::before, .chip.is-clickable::before, .toast-close::before, .install-close::before, .link-btn::before { inset: -10px; }
.seg::before { inset: -8px; }
.toolbar-row .input { height: 44px; }
}
dialog.modal, .menu, .select-list, .sidebar, .palette-list, .toasts { overscroll-behavior: contain; }
/* Linked sections land with air above them. */
[id].card, .card [id] { scroll-margin-top: var(--s-6); }
/* First focusable element on every page. */
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: calc(var(--z-loader) + 1); padding: 8px 12px; border-radius: var(--r-sm); background: var(--fg-0); color: var(--bg-0); font-size: var(--fs-sm); }
.skip-link:focus { top: var(--s-4); outline-offset: 0; }
/* Browser surfaces carry the palette too. */
::selection { background: var(--accent-mid); color: var(--fg-0); }
:root { caret-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Icon element. Four integer sizes, so strokes stay crisp: 12, 16, 20, 28. */
.ic { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.75; }
.ic-sm { width: 12px; height: 12px; }
.ic-lg { width: 20px; height: 20px; }
.ic-xl { width: 28px; height: 28px; }
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
* { scrollbar-width: thin; scrollbar-color: var(--bg-5) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bg-5); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
/* ── 03 ─ Layout shell ───────────────────────────────────────────────── */
.app {
position: relative;
z-index: 1;
display: flex;
min-height: 100vh;
}
/* The sheet: the one lighter surface the content lives on. */
.app-main {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: minmax(0, 1fr) auto;
margin: var(--sheet-gap) var(--sheet-gap) var(--sheet-gap) var(--sb-w);
min-height: calc(100vh - 2 * var(--sheet-gap));
border-radius: var(--r-xl);
background: var(--bg-1);
border: 1px solid var(--line-1);
}
.sidebar.is-collapsed ~ .app-main { margin-left: var(--sb-w-c); }
/* The content column measures itself, so the grid answers to the room it
has (a docked panel narrows it the way a narrower window would). */
.content {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: calc(var(--content-max) + 2 * var(--gutter));
margin: 0 auto;
padding: var(--s-8) var(--gutter) var(--s-9);
container-type: inline-size;
container-name: content;
}
.app-foot {
grid-column: 1;
grid-row: 2;
padding: var(--s-4) var(--gutter);
border-top: 1px solid var(--line-0);
color: var(--fg-2);
font-size: var(--fs-xs);
display: flex;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
/* Page head: the header. Title, the one-line state, the actions, the tools. */
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-4) var(--s-6);
flex-wrap: wrap;
margin-bottom: var(--s-8);
}
.page-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.page-title { font-size: var(--fs-2xl); letter-spacing: -.01em; }
.page-sub { margin: var(--s-2) 0 0; color: var(--fg-2); font-size: var(--fs-sm); max-width: 64ch; }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.page-tools { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-2); padding-left: var(--s-3); border-left: 1px solid var(--line-1); }
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
margin: var(--s-8) 0 var(--s-4);
}
.section-head h2 { font-size: var(--fs-lg); }
/* Phone tab bar (rendered in the layout, shown under 992px). Five equal
places the full height of the bar, each an icon over its label, centred
on the bar's middle line; the centre button sits on the same line. */
.tabbar {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: var(--z-tabbar);
align-items: center;
height: calc(var(--tabbar-h) + var(--safe-bottom));
padding: 0 max(var(--s-2), var(--safe-right)) var(--safe-bottom) max(var(--s-2), var(--safe-left));
background: var(--glass-1);
backdrop-filter: blur(var(--blur-lg));
-webkit-backdrop-filter: blur(var(--blur-lg));
border-top: 1px solid var(--line-1);
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
transition: opacity var(--t-1) var(--ease), visibility 0s;
}
.tabbar > a, .tabbar > button {
flex: 1 1 0;
align-self: stretch;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-1);
color: var(--fg-2);
font-size: var(--fs-xs);
line-height: var(--lh-tight);
white-space: nowrap;
border-radius: var(--r-sm);
transition: color var(--t-2), opacity var(--t-1);
}
.tabbar > a .ic, .tabbar > button .ic { width: 20px; height: 20px; }
.tabbar > .is-active { color: var(--fg-0); font-weight: var(--fw-m); }
.tabbar > .is-active .ic { color: var(--accent); }
.tabbar > a:active, .tabbar > button:active { opacity: .6; }
.tabbar > .tabbar-fab {
flex: 0 0 auto;
align-self: center;
width: 44px; height: 44px;
margin-inline: var(--s-2);
border-radius: var(--r-pill);
background: var(--accent);
color: var(--on-accent);
transition: background var(--t-1);
}
.tabbar > .tabbar-fab:active { opacity: 1; background: var(--accent-2); }
/* Phone top bar (rendered in the layout, shown under 992px): the tools on
the right, the page's title on the left once its own has scrolled under.
The glass is a layer behind the content, so the bar is not frosted and
the menus in it still blur the page. */
.appbar { display: none; }
@media (max-width: 1199.98px) {
:root { --gutter: var(--s-6); }
}
@media (max-width: 991.98px) {
html.has-shell {
--shell-top: calc(var(--appbar-h) + var(--safe-top));
--shell-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}
/* No stacking context of its own here, so the drawer and its scrim layer above both bars. */
.app { z-index: auto; }
.app-main, .sidebar.is-collapsed ~ .app-main { margin: 0; border-radius: 0; border: 0; min-height: 100vh; }
.tabbar { display: flex; }
.content {
padding: calc(var(--shell-top) + var(--s-3)) max(var(--gutter), var(--safe-right)) calc(var(--shell-bottom) + var(--s-8)) max(var(--gutter), var(--safe-left));
}
.app-foot { display: none; }
/* The page head gives its tools to the top bar and is followed by 24px of air. */
.page-head { margin-bottom: var(--s-6); }
.page-head > .page-tools { display: none; }
.appbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: var(--z-appbar);
display: flex;
align-items: center;
gap: var(--s-3);
height: var(--shell-top);
padding: var(--safe-top) max(calc(var(--gutter) - var(--s-3)), var(--safe-right)) 0 max(var(--gutter), var(--safe-left));
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.appbar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--glass-1);
backdrop-filter: blur(var(--blur-lg));
-webkit-backdrop-filter: blur(var(--blur-lg));
border-bottom: 1px solid transparent;
transition: border-color var(--t-2);
}
html.is-scrolled .appbar::before { border-bottom-color: var(--line-1); }
.appbar-title {
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-lg);
font-weight: var(--fw-m);
line-height: var(--lh-tight);
color: var(--fg-0);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: 0;
transition: opacity var(--t-2) var(--ease);
}
html.has-bar-title .appbar-title { opacity: 1; }
.appbar .page-tools { margin-left: auto; padding-left: 0; border-left: 0; gap: 0; }
.appbar .btn-icon { --btn-h: 44px; }
.appbar .btn-icon .ic { width: 20px; height: 20px; }
/* While the keyboard is up the tab bar steps out of the way. */
html.has-keyboard .tabbar { opacity: 0; visibility: hidden; transition: opacity var(--t-1) var(--ease), visibility 0s var(--t-1); }
}
@media (max-width: 767.98px) {
:root { --gutter: var(--s-4); }
}
/* A narrow column (a phone, or a docked panel beside the content): the
tools stay on the title line, the actions take a line of their own. */
@container content (max-width: 719.98px) {
.page-head { gap: var(--s-4); }
.page-head > div:first-child { flex: 1 1 0; order: 1; }
.page-tools { order: 2; margin-left: 0; padding-left: 0; border-left: 0; }
.page-actions { order: 3; flex-basis: 100%; }
}
/* ── 04 ─ Sidebar & nav ──────────────────────────────────────────────── */
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: var(--z-sidebar);
width: var(--sb-w);
display: flex;
flex-direction: column;
padding: var(--s-4) var(--s-3) var(--s-3);
background: transparent;
}
.sidebar.is-collapsed { width: var(--sb-w-c); padding-inline: var(--s-3); }
@media (pointer: coarse) { .nav-link, .sb-search, .sb-collapse { height: 44px; } }
/* Search sits where a brand would. A field that opens the palette. */
.sb-search {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--s-2);
width: 100%;
height: 34px;
padding: 0 var(--s-3);
border-radius: var(--r-md);
background: var(--bg-2);
border: 1px solid var(--line-1);
color: var(--fg-2);
font-size: var(--fs-sm);
text-align: left;
transition: border-color var(--t-2), color var(--t-2), background var(--t-2);
}
.sb-search:hover { border-color: var(--line-2); color: var(--fg-1); background: var(--bg-3); }
.sb-search .ic { width: 16px; height: 16px; }
.sb-search span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The nav scrolls when it must, without a visible scrollbar. */
.sb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--s-6) 0 var(--s-2); margin-inline: calc(-1 * var(--s-1)); padding-inline: var(--s-1); scrollbar-width: none; }
.sb-scroll::-webkit-scrollbar { display: none; }
/* Groups are named in sentence case, quietly, with air above them. */
.nav-group { margin-top: var(--s-5); }
.nav-group:first-child { margin-top: 0; }
.nav-label {
display: block;
padding: 0 var(--s-3);
margin-bottom: var(--s-2);
font-size: var(--fs-xs);
color: var(--fg-2);
white-space: nowrap;
}
.nav { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); }
.nav-link {
position: relative;
display: flex;
align-items: center;
gap: var(--s-3);
height: 34px;
padding: 0 var(--s-3);
border-radius: var(--r-sm);
color: var(--fg-1);
font-size: var(--fs-sm);
white-space: nowrap;
transition: background var(--t-2), color var(--t-2);
}
.nav-link .ic { width: 16px; height: 16px; color: var(--fg-2); transition: color var(--t-2); }
.nav-link:hover { background: var(--bg-2); color: var(--fg-0); }
.nav-link:hover .ic { color: var(--fg-1); }
/* The current page: a filled pill. The one lime block in the shell. */
.nav-link.is-active, .nav-link.is-active:hover { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-m); }
.nav-link.is-active .ic, .nav-link.is-active:hover .ic { color: var(--on-accent); }
.nav-link .nav-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
font-size: var(--fs-xs);
padding: 1px 7px;
border-radius: var(--r-pill);
background: var(--bg-3);
color: var(--fg-1);
}
.nav-link.is-active .nav-badge { background: rgba(0, 0, 0, .18); color: var(--on-accent); }
.nav-badge.is-accent { background: var(--accent); color: var(--on-accent); }
.nav-sub { list-style: none; margin: 2px 0 var(--s-2) 0; padding-left: 26px; display: none; flex-direction: column; gap: 2px; }
.nav-sub.is-open { display: flex; }
.nav-sub .nav-link { height: 32px; font-size: var(--fs-sm); color: var(--fg-2); }
.nav-sub .nav-link.is-active { color: var(--on-accent); }
.nav-caret { color: var(--fg-3); transition: transform var(--t-2); border-radius: var(--r-xs); padding: 2px; }
.nav-caret.is-open { transform: rotate(180deg); }
.sb-foot {
flex: 0 0 auto;
padding-top: var(--s-3);
border-top: 1px solid var(--line-1);
display: flex;
flex-direction: column;
gap: 2px;
}
.sb-collapse {
display: flex;
align-items: center;
gap: var(--s-3);
height: 34px;
padding: 0 var(--s-3);
border-radius: var(--r-sm);
color: var(--fg-2);
font-size: var(--fs-sm);
transition: background var(--t-2), color var(--t-2);
}
.sb-collapse:hover { background: var(--bg-2); color: var(--fg-0); }
.sb-collapse .ic { width: 16px; height: 16px; transition: transform var(--t-3) var(--ease); }
.sidebar.is-collapsed .sb-collapse .ic { transform: rotate(180deg); }
/* Collapsed rail: icons only. Labels move into a floating tip (ui.mjs). */
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .nav-text,
.sidebar.is-collapsed .nav-badge,
.sidebar.is-collapsed .nav-caret,
.sidebar.is-collapsed .nav-sub,
.sidebar.is-collapsed .sb-search span,
.sidebar.is-collapsed .sb-collapse span { display: none; }
.sidebar.is-collapsed .nav-link, .sidebar.is-collapsed .sb-collapse { justify-content: center; gap: 0; padding: 0; width: 40px; height: 40px; margin-inline: auto; }
.sidebar.is-collapsed .sb-search { justify-content: center; gap: 0; padding: 0; width: 40px; height: 40px; margin-inline: auto; }
.sidebar.is-collapsed .nav-group { margin-top: var(--s-4); }
.sidebar.is-collapsed .nav-group:first-child { margin-top: 0; }
.sidebar.is-collapsed .nav { gap: var(--s-1); }
/* Floating label for the collapsed rail. Lives on , so no overflow
clips it and it sits above the sheet, cards and menus. */
.sb-tip {
position: fixed;
z-index: var(--z-toast);
padding: 6px 10px;
border-radius: var(--r-sm);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
color: var(--fg-0);
font-size: var(--fs-xs);
white-space: nowrap;
box-shadow: var(--shadow-2);
pointer-events: none;
opacity: 0;
transform: translateY(-50%) translateX(-4px);
transition: opacity var(--t-1), transform var(--t-2) var(--ease);
}
.sb-tip.is-on { opacity: 1; transform: translateY(-50%); }
/* Drawer under the rail breakpoint: over everything, both bars included,
its scrim fading in and out with it. */
.sidebar-scrim {
display: none;
position: fixed; inset: 0;
z-index: var(--z-scrim);
background: var(--scrim);
backdrop-filter: blur(var(--blur-sm));
-webkit-backdrop-filter: blur(var(--blur-sm));
opacity: 0;
transition: opacity var(--t-3) var(--ease);
}
.sb-mobile-head { display: none; }
@media (max-width: 991.98px) {
.sidebar {
transform: translateX(-100%);
width: calc(min(300px, 86vw) + var(--safe-left)) !important;
padding: var(--safe-top) var(--s-4) calc(var(--s-4) + var(--safe-bottom)) calc(var(--s-4) + var(--safe-left));
z-index: var(--z-drawer);
background: var(--bg-1);
border-right: 1px solid var(--line-1);
transition: transform var(--t-3) var(--ease);
touch-action: pan-y;
}
.sidebar.is-open { transform: none; }
.sidebar-scrim { display: block; pointer-events: none; }
.sidebar.is-open ~ .sidebar-scrim { opacity: 1; pointer-events: auto; }
/* As tall as the top bar: "Menu" on the nav icons' left edge, Close ending on the pills' right edge. */
.sb-mobile-head {
display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
height: var(--appbar-h);
margin: 0 calc(-1 * var(--s-4)) var(--s-4) calc(-1 * (var(--s-4) + var(--safe-left)));
padding: 0 var(--s-1) 0 calc(var(--s-4) + var(--s-3) + var(--safe-left));
border-bottom: 1px solid var(--line-1);
font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0);
-webkit-user-select: none; user-select: none;
}
.sb-mobile-head .btn-icon { --btn-h: 44px; }
.sb-mobile-head .btn-icon .ic { width: 20px; height: 20px; }
.sidebar .nav-link, .sidebar .sb-search { -webkit-touch-callout: none; }
/* The drawer always shows full labels, whatever the desktop preference. */
.sidebar.is-collapsed .nav-label, .sidebar.is-collapsed .nav-badge, .sidebar.is-collapsed .nav-caret, .sidebar.is-collapsed .sb-search span { display: revert; }
.sidebar.is-collapsed .nav-text { display: block; }
.sidebar.is-collapsed .nav-sub.is-open { display: flex; }
.sidebar.is-collapsed .nav-link, .sidebar.is-collapsed .sb-search { justify-content: flex-start; gap: var(--s-3); padding: 0 var(--s-3); width: auto; height: 34px; margin-inline: 0; }
.sidebar.is-collapsed .sb-search { height: 36px; gap: var(--s-2); }
.sidebar.is-collapsed .nav-group { margin-top: var(--s-6); }
.sidebar.is-collapsed .nav { gap: 1px; }
.sb-collapse { display: none; }
.sb-tip { display: none; }
}
/* ── 05 ─ Typography ─────────────────────────────────────────────────── */
.h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
.h2 { font-size: var(--fs-lg); }
.h3 { font-size: var(--fs-md); font-weight: var(--fw-m); }
.h4 { font-size: var(--fs-sm); font-weight: var(--fw-m); }
/* A label above a figure or a group. Never above a heading. */
.eyebrow { font-size: var(--fs-xs); color: var(--fg-2); font-weight: var(--fw-r); letter-spacing: 0; text-transform: none; }
.muted { color: var(--fg-1); }
.dim { color: var(--fg-2); }
.faint { color: var(--fg-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.lg { font-size: var(--fs-lg); }
.medium { font-weight: var(--fw-m); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.accent { color: var(--accent); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.danger { color: var(--danger); }
.info { color: var(--info); }
.prose { max-width: 56ch; }
.prose a { color: var(--fg-0); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose h1, .prose h2, .prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose h1 { font-size: var(--fs-xl); }
.prose h2 { font-size: var(--fs-lg); }
.prose h3 { font-size: var(--fs-md); }
.prose p, .prose ul, .prose ol { margin-bottom: var(--s-4); color: var(--fg-1); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose pre { background: var(--bg-3); border: 1px solid var(--line-1); border-radius: var(--r-sm); padding: var(--s-4); overflow-x: auto; }
.prose hr { margin: var(--s-6) 0; }
.prose strong { color: var(--fg-0); font-weight: var(--fw-m); }
.kbd {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px;
font-family: var(--font);
font-size: var(--fs-xs);
color: var(--fg-2);
background: var(--bg-3);
border: 1px solid var(--line-1);
border-radius: var(--r-xs);
}
/* ── 06 ─ Grid & utilities ───────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); }
.grid > * { grid-column: span 12; min-width: 0; }
.grid-tight { gap: var(--s-3); }
@container content (min-width: 544px) {
.c-sm-6 { grid-column: span 6; } .c-sm-4 { grid-column: span 4; } .c-sm-3 { grid-column: span 3; }
}
@container content (min-width: 720px) {
.c-1 { grid-column: span 1; } .c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; }
.c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; }
.c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-9 { grid-column: span 9; }
.c-10 { grid-column: span 10; } .c-11 { grid-column: span 11; } .c-12 { grid-column: span 12; }
}
@container content (min-width: 848px) {
.c-lg-2 { grid-column: span 2; } .c-lg-3 { grid-column: span 3; } .c-lg-4 { grid-column: span 4; }
.c-lg-5 { grid-column: span 5; } .c-lg-6 { grid-column: span 6; } .c-lg-7 { grid-column: span 7; }
.c-lg-8 { grid-column: span 8; } .c-lg-9 { grid-column: span 9; } .c-lg-12 { grid-column: span 12; }
}
.tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(var(--tile, 260px), 100%), 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.between { justify-content: space-between; }
.center { justify-content: center; }
.start { align-items: flex-start; }
.end { justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink0 { flex: 0 0 auto; }
.g-0 { gap: 0; } .g-1 { gap: var(--s-1); } .g-2 { gap: var(--s-2); } .g-3 { gap: var(--s-3); } .g-4 { gap: var(--s-4); } .g-5 { gap: var(--s-5); } .g-6 { gap: var(--s-6); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); } .mb-7 { margin-bottom: var(--s-7); } .mb-8 { margin-bottom: var(--s-8); }
.ml-auto { margin-left: auto; }
.p-0 { padding: 0; } .p-3 { padding: var(--s-3); } .p-4 { padding: var(--s-4); } .p-5 { padding: var(--s-5); } .p-6 { padding: var(--s-6); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@container content (max-width: 719.98px) { .hide-sm { display: none !important; } }
@media (max-width: 991.98px) { .hide-md { display: none !important; } }
@media (min-width: 992px) { .only-md { display: none !important; } }
.divider { border: 0; border-top: 1px solid var(--line-1); margin: var(--s-4) 0; }
.saber { height: 2px; background: var(--accent); box-shadow: var(--saber); border-radius: var(--r-pill); }
.saber-soft { height: 1px; background: var(--line-1); border-radius: var(--r-pill); }
/* ── 07 ─ Buttons ────────────────────────────────────────────────────── */
.btn {
--btn-h: 36px;
--btn-px: var(--s-4);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
height: var(--btn-h);
padding: 0 var(--btn-px);
border-radius: var(--r-sm);
border: 1px solid var(--line-1);
background: var(--bg-3);
color: var(--fg-0);
font-size: var(--fs-sm);
font-weight: var(--fw-m);
line-height: 1;
white-space: nowrap;
transition: background var(--t-2), border-color var(--t-2), color var(--t-2);
user-select: none;
text-decoration: none;
}
.btn:hover { border-color: var(--line-2); color: var(--fg-0); background: var(--bg-4); }
.btn:active { background: var(--bg-5); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn .ic { width: 16px; height: 16px; color: var(--fg-2); }
.btn:hover .ic { color: var(--fg-1); }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-3); border-color: transparent; color: var(--on-accent); }
.btn-primary:active { background: var(--accent-2); }
.btn-primary .ic, .btn-primary:hover .ic { color: var(--on-accent); }
.btn-light { background: var(--fg-0); border-color: transparent; color: var(--bg-0); }
.btn-light:hover { background: #fff; color: var(--bg-0); border-color: transparent; }
.btn-light .ic, .btn-light:hover .ic { color: var(--bg-0); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn-ghost:hover { background: var(--bg-3); border-color: transparent; }
.btn-outline { background: transparent; }
.btn-outline:hover { background: var(--bg-3); }
.btn-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.btn-accent:hover { background: var(--accent-mid); border-color: var(--accent); color: var(--accent-3); }
.btn-accent .ic, .btn-accent:hover .ic { color: currentColor; }
.btn-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.btn-danger:hover { background: rgba(242, 109, 109, .2); border-color: var(--danger); color: #ff9090; }
.btn-danger .ic, .btn-danger:hover .ic { color: currentColor; }
.btn-sm { --btn-h: 30px; --btn-px: var(--s-3); }
.btn-sm .ic { width: 14px; height: 14px; }
.btn-lg { --btn-h: 44px; --btn-px: var(--s-6); font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--r-pill); }
.btn-icon { --btn-px: 0; width: var(--btn-h); padding: 0; }
.btn-icon .ic { width: 18px; height: 18px; }
.btn-icon.btn-sm .ic { width: 14px; height: 14px; }
/* Busy state: the label stays, a spinner joins it. */
.btn.is-busy { pointer-events: none; }
.btn .btn-spinner { width: 14px; height: 14px; border-width: 2px; border-color: currentColor; border-top-color: transparent; opacity: .8; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.btn-group .btn:last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.btn-group .btn + .btn { margin-left: -1px; }
.link-btn { color: var(--fg-1); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--s-1); min-height: 24px; position: relative; transition: color var(--t-2); }
.link-btn:hover { color: var(--accent); }
/* ── 08 ─ Chips & pills ──────────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-1);
height: 24px;
padding: 0 var(--s-2);
border-radius: var(--r-pill);
font-size: var(--fs-xs);
line-height: 1;
color: var(--fg-1);
background: var(--bg-3);
border: 1px solid transparent;
white-space: nowrap;
max-width: 100%;
}
.chip .ic { width: 12px; height: 12px; color: var(--fg-2); }
.chip-sm { height: 22px; padding: 0 var(--s-2); }
.chip-lg { height: 28px; padding: 0 11px; font-size: var(--fs-sm); }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-accent .ic { color: var(--accent); }
.chip-ok { background: var(--ok-soft); color: var(--ok); }
.chip-ok .ic { color: var(--ok); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-warn .ic { color: var(--warn); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-danger .ic { color: var(--danger); }
.chip-info { background: var(--info-soft); color: var(--info); }
.chip-info .ic { color: var(--info); }
.chip-muted { background: transparent; border-color: var(--line-1); color: var(--fg-2); }
.chip-solid { background: var(--accent); color: var(--on-accent); font-weight: var(--fw-m); }
.chip-solid .ic { color: var(--on-accent); }
.chip.is-clickable { cursor: pointer; border-color: var(--line-1); transition: border-color var(--t-2), background var(--t-2), color var(--t-2); }
.chip.is-clickable:hover { border-color: var(--line-2); color: var(--fg-0); background: var(--bg-4); }
.chip.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip.is-on .ic { color: var(--accent); }
.chip .truncate { max-width: 22ch; }
/* Status pill: dot plus word. The word carries the meaning. */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--fg-1); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); flex: 0 0 auto; }
.pill-ok::before { background: var(--ok); }
.pill-warn::before { background: var(--warn); }
.pill-danger::before { background: var(--danger); }
.pill-info::before { background: var(--info); }
.pill-accent::before { background: var(--accent); }
.code-chip {
font-family: var(--mono);
font-size: var(--fs-xs);
padding: 3px 8px;
border-radius: var(--r-xs);
background: var(--bg-1);
border: 1px solid var(--line-1);
color: var(--fg-1);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--fs-xs); background: var(--bg-3); color: var(--fg-1); }
/* ── 09 ─ Forms ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.label { font-size: var(--fs-xs); color: var(--fg-1); display: flex; align-items: center; gap: var(--s-2); }
.label .opt { color: var(--fg-3); }
.hint { font-size: var(--fs-xs); color: var(--fg-2); margin: 0; min-height: 1em; }
.hint.is-ok { color: var(--ok); }
.hint.is-error { color: var(--danger); }
.hint.is-accent { color: var(--accent); }
.input, .textarea, .select-native {
width: 100%;
height: 38px;
padding: 0 var(--s-3);
border-radius: var(--r-sm);
background: var(--bg-1);
border: 1px solid var(--line-1);
color: var(--fg-0);
font-size: var(--fs-md);
transition: border-color var(--t-2), box-shadow var(--t-2), background var(--t-2);
appearance: none;
-webkit-appearance: none;
min-width: 0;
}
.textarea { height: auto; padding: var(--s-2) var(--s-3); line-height: var(--lh); resize: vertical; min-height: 76px; }
.input::placeholder, .textarea::placeholder { color: var(--fg-2); }
.input:hover, .textarea:hover, .select-native:hover { border-color: var(--line-2); }
.input:focus, .textarea:focus, .select-native:focus {
outline: none;
border-color: var(--accent-line);
box-shadow: 0 0 0 2px var(--accent-mid);
}
.input.is-invalid { border-color: var(--danger-line); }
.input-lg { height: 46px; font-size: 1rem; }
.input-sm { height: 30px; font-size: var(--fs-xs); border-radius: var(--r-xs); padding: 0 var(--s-2); }
.input[type="number"] { font-variant-numeric: tabular-nums; }
.input[type="number"]::-webkit-inner-spin-button, .input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.input[type="file"] { padding: 0; line-height: 36px; cursor: pointer; }
.input[type="file"]::file-selector-button {
height: 100%; margin-right: var(--s-3); padding: 0 var(--s-3);
border: 0; border-right: 1px solid var(--line-1);
background: var(--bg-3); color: var(--fg-1); font: inherit; font-size: var(--fs-xs); cursor: pointer;
}
@media (max-width: 767.98px), (pointer: coarse) { .input, .textarea, .select-native, .select-btn { font-size: 16px; } }
.select-native {
padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
.select-native option { background: var(--bg-2); color: var(--fg-0); }
/* Enhanced select (ui.mjs builds this around a native select). */
.select { position: relative; min-width: 0; }
.select > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.select-btn {
width: 100%;
height: 38px;
display: flex;
align-items: center;
gap: var(--s-2);
padding: 0 34px 0 var(--s-3);
border-radius: var(--r-sm);
background: var(--bg-1);
border: 1px solid var(--line-1);
color: var(--fg-0);
font-size: var(--fs-md);
text-align: left;
transition: border-color var(--t-2), box-shadow var(--t-2);
}
.select-btn:hover { border-color: var(--line-2); }
.select-btn[aria-expanded="true"], .select-btn:focus-visible { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-mid); }
.select-btn .select-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .select-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-2); transition: transform var(--t-2); }
.select-btn[aria-expanded="true"] .select-caret { transform: translateY(-50%) rotate(180deg); }
.select-sm .select-btn { height: 30px; font-size: var(--fs-xs); border-radius: var(--r-xs); }
.select-list {
position: absolute;
z-index: var(--z-menu);
left: 0; right: 0;
top: calc(100% + var(--s-2));
max-height: 280px;
overflow-y: auto;
margin: 0; padding: 6px;
display: flex; flex-direction: column; gap: 2px;
list-style: none;
border-radius: var(--r-md);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
box-shadow: var(--shadow-2);
transform-origin: top;
animation: popIn var(--t-1) var(--ease) both;
}
.select-list.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
.select-opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
flex: 0 0 auto;
padding: 9px 10px;
border-radius: var(--r-xs);
font-size: var(--fs-sm);
color: var(--fg-1);
cursor: pointer;
}
.select-opt small { color: var(--fg-2); font-size: var(--fs-xs); }
.select-opt:hover, .select-opt.is-focus { background: var(--bg-4); color: var(--fg-0); }
.select-opt:hover small, .select-opt.is-focus small { color: var(--fg-1); }
.select-opt[aria-selected="true"] { color: var(--fg-0); }
.select-opt[aria-selected="true"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.select-opt.is-disabled { opacity: .4; pointer-events: none; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.input-group > :last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.input-group > * + * { margin-left: -1px; }
.affix {
display: inline-flex; align-items: center; padding: 0 var(--s-3);
background: var(--bg-3); border: 1px solid var(--line-1); color: var(--fg-2); font-size: var(--fs-sm);
white-space: nowrap;
}
.input-group .input:focus { position: relative; z-index: 1; }
.input-icon { position: relative; }
.input-icon > .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-2); width: 16px; height: 16px; pointer-events: none; }
.input-icon > .input { padding-left: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .span-2 { grid-column: span 2; }
@container content (max-width: 543.98px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } }
/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--fs-sm); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
width: 40px; height: 22px; flex: 0 0 auto;
border-radius: var(--r-pill);
background: var(--bg-5);
position: relative;
transition: background var(--t-2);
}
.switch-track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
background: var(--fg-0);
transition: transform var(--t-2) var(--ease);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--on-accent); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .45; cursor: not-allowed; }
/* Checkbox */
.check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--fs-sm); }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--bg-1); display: grid; place-items: center; margin: 0; transition: background var(--t-2), border-color var(--t-2); }
.check input::after { content: ""; width: 11px; height: 11px; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; transform: scale(0); transition: transform var(--t-1) var(--ease); }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { transform: scale(1); }
/* Search field in toolbars */
.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.toolbar .input { height: 34px; }
.toolbar-search { position: relative; flex: 1 1 260px; max-width: 420px; }
/* Photo drop target */
.dropzone {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
border: 1px dashed var(--line-2);
background: var(--bg-1);
cursor: pointer;
overflow: hidden;
transition: border-color var(--t-2), background var(--t-2);
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent-line); background: var(--bg-2); }
.dropzone-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); text-align: center; padding: var(--s-6); color: var(--fg-2); }
.dropzone-empty .ic { width: 28px; height: 28px; color: var(--fg-1); margin-bottom: var(--s-2); }
.dropzone-empty b { color: var(--fg-0); font-weight: var(--fw-m); font-size: var(--fs-md); }
.dropzone-empty span { font-size: var(--fs-xs); max-width: 26ch; }
.dropzone img { width: 100%; height: 100%; object-fit: cover; }
.dropzone-clear { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2; }
/* Chrome autofill on a dark ground */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset !important;
-webkit-text-fill-color: var(--fg-0) !important;
caret-color: var(--fg-0);
transition: background-color 9999s ease-in-out 0s;
}
/* ── 10 ─ Tables ─────────────────────────────────────────────────────── */
/* Horizontal scrollers are positioned, so a wide table scrolls inside its card
instead of stretching a phone's layout viewport (Chrome ignores the clip of
a static wrapper when it sizes the mobile layout viewport). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: inherit; position: relative; }
.rail, .heatmap-wrap, .tabs { position: relative; }
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--fs-md);
}
.table th, .table td { padding: 12px var(--s-4); text-align: left; vertical-align: middle; }
.table thead th {
font-size: var(--fs-xs);
font-weight: var(--fw-r);
color: var(--fg-2);
background: var(--bg-2);
border-bottom: 1px solid var(--line-0);
white-space: nowrap;
}
.table tbody td { border-bottom: 1px solid var(--line-0); color: var(--fg-1); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-1); }
.table tbody tr:hover td { background: var(--bg-3); }
.table td.num, .table th.num, .table .num { font-variant-numeric: tabular-nums; }
.table td:first-child, .table th:first-child { padding-left: var(--inset); }
.table td:last-child, .table th:last-child { padding-right: var(--inset); }
.table .primary { color: var(--fg-0); }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table-compact th, .table-compact td { padding: 7px var(--s-3); }
/* Row actions rest dimmed only where a pointer can hover them back. */
@media (hover: hover) {
.table-hover-actions .row-actions { opacity: .55; transition: opacity var(--t-2); }
.table-hover-actions tr:hover .row-actions, .table-hover-actions tr:focus-within .row-actions { opacity: 1; }
}
/* Sortable headers: the | keeps its column-header role and aria-sort; a
button inside carries the label and a drawn arrow, both ways at rest, one
way once sorted. */
.th-sort { user-select: none; }
.th-btn { display: inline-flex; align-items: center; min-height: 24px; margin-block: -3px; font: inherit; color: inherit; text-align: inherit; cursor: pointer; position: relative; }
.th-btn::before { content: ""; position: absolute; inset: -3px; }
@media (pointer: coarse) { .th-btn::before { inset: -13px; } }
.th-btn:hover { color: var(--fg-0); }
.th-btn::after {
content: ""; display: inline-block; width: 12px; height: 12px; margin-left: var(--s-2); vertical-align: -2px;
background: currentColor; opacity: .45; transition: opacity var(--t-2);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.th-btn:hover::after { opacity: .8; }
.th-sort[aria-sort] .th-btn::after { opacity: 1; }
.th-sort[aria-sort="ascending"] .th-btn::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.th-sort[aria-sort="descending"] .th-btn::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
tr.is-me td { background: var(--accent-soft) !important; }
tr.is-best td { color: var(--fg-0); }
/* The selected row of a filter table: the current selection, in the accent's soft fill. */
.table tr.is-active td { background: var(--accent-soft); }
.table .row-link { display: block; margin: -11px 0; padding: 11px 0; color: var(--fg-0); }
.table .row-link:hover { color: var(--accent); }
.row-sub td { padding-top: 0; color: var(--fg-2); font-size: var(--fs-xs); }
.row-actions { display: inline-flex; gap: var(--s-1); justify-content: flex-end; }
.td-empty { text-align: center; color: var(--fg-2); padding: var(--s-7) var(--s-4) !important; }
/* ── 11 ─ Cards & figures ────────────────────────────────────────────── */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
border-radius: var(--r-lg);
background: var(--bg-2);
border: 1px solid var(--line-1);
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
padding: var(--inset) var(--inset) var(--s-4);
}
.card-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0); line-height: var(--lh-tight); }
.card-title .ic { width: 16px; height: 16px; color: var(--fg-2); }
.card-sub { font-size: var(--fs-xs); color: var(--fg-2); }
.card-title + .card-sub { margin-top: var(--s-1); }
.card-head > .card-sub { margin-top: 0; }
.card-body { padding: var(--inset); flex: 1 1 auto; }
.card-head + .card-body { padding-top: 0; }
.card-body.flush { padding: 0; }
.card-head + .card-body.flush > .rows > :first-child, .card-head + .card-body.flush > .table-wrap, .card-head + .card-body.flush > .split { border-top: 1px solid var(--line-0); }
/* Master and detail inside one card: a list on the left, its detail on the right. */
.split { display: grid; grid-template-columns: 260px minmax(0, 1fr); flex: 1 1 auto; }
.split > * { min-width: 0; }
.split > :first-child { border-right: 1px solid var(--line-0); }
.split .rows > a.is-active { background: var(--accent-soft); }
.split .rows > a.is-active .row-main b { color: var(--fg-0); }
@container content (max-width: 719.98px) {
.split { grid-template-columns: 1fr; }
.split > :first-child { border-right: 0; border-bottom: 1px solid var(--line-0); }
}
.card-foot {
padding: var(--s-4) var(--inset);
border-top: 1px solid var(--line-0);
font-size: var(--fs-xs);
color: var(--fg-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
flex-wrap: wrap;
}
/* A body that fills its card. When cards share a row the shorter one's
flexible content (a ledger, meters, a chart, a table, a calendar) takes
the extra height, so nothing sits above empty space. */
.card-body.fill { display: flex; flex-direction: column; }
.card-body.fill > .kv { flex: 1 1 auto; display: flex; flex-direction: column; }
.card-body.fill > .kv > div { flex: 1 1 auto; align-items: center; }
.card-body.fill > .meters { flex: 1 1 auto; justify-content: space-evenly; }
.card-body.fill > .setting { flex: 1 1 auto; }
/* The last card of a stacked column grows so two columns end on one line. */
.stack > .card.grow { flex: 1 1 auto; }
.stack > .card.grow > .card-body.fill { flex: 1 1 auto; }
.card-body.fill > .rows, .card-body.fill > .missions { flex: 1 1 auto; }
.card-body.fill > .rows > *, .card-body.fill > .missions > * { flex: 1 1 auto; }
.card-body.fill > .chart { flex: 1 1 auto; height: auto; min-height: 240px; }
.card-body.fill > .table-wrap { flex: 1 1 auto; min-height: 0; }
.card-body.fill > .table-wrap > .table { height: 100%; }
.card-body.fill > .empty { flex: 1 1 auto; justify-content: center; }
.card-body.fill > .post-teaser { flex: 1 1 auto; }
.card-body.fill > .heatmap-wrap { flex: 1 1 auto; min-height: 120px; display: flex; }
.card-body.fill > .heatmap-wrap > [data-heatmap] { flex: 1 1 auto; min-width: 0; }
.card-flat { background: var(--bg-2); }
.card-inset { background: var(--bg-1); }
.card-hatch { background: var(--bg-2); }
.card-glow { background: var(--bg-2); }
.card-accent { border-color: var(--accent-line); }
.card-hover { transition: border-color var(--t-2), background var(--t-2); }
.card-hover:hover { border-color: var(--line-2); background: var(--bg-3); }
a.card, a.card:hover { color: inherit; }
.card-sm .card-head { padding: var(--s-4) var(--s-5) var(--s-3); }
.card-sm .card-body { padding: var(--s-5); }
.card-sm .card-head + .card-body { padding-top: 0; }
.card-sm .card-foot { padding: var(--s-3) var(--s-5); }
/* Figures: the label above, the number, a line of context under. */
.figure { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.figure-label { font-size: var(--fs-xs); color: var(--fg-2); }
.figure-value { font-size: var(--fs-3xl); font-weight: var(--fw-m); line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--fg-0); }
.figure-value small { font-size: var(--fs-sm); color: var(--fg-2); margin-left: 4px; letter-spacing: 0; font-weight: var(--fw-r); }
.figure-display .figure-value { font-size: var(--fs-4xl); letter-spacing: -.02em; }
.figure-foot { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--fg-2); }
@container content (max-width: 719.98px) { .figure-display .figure-value { font-size: 2rem; } }
/* Figures set on the sheet, ruled by hairlines. One baseline, one scale.
Padded so the labels align with the text inside the cards above (1px border). */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: var(--s-5) calc(var(--inset) + 1px); }
.figures > * { padding: var(--s-1) var(--inset); border-left: 1px solid var(--line-1); }
.figures > :first-child { padding-left: 0; border-left: 0; }
.figures > :last-child { padding-right: 0; }
/* Two up when the column is narrow (a docked panel, a tablet); a third
figure on its own takes the full width. Stacked under 544px. */
@container content (max-width: 847.98px) {
.figures:not(.is-inset) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures:not(.is-inset) > * { padding: var(--s-1) var(--inset); border-left: 1px solid var(--line-1); }
.figures:not(.is-inset) > :nth-child(odd) { padding-left: 0; border-left: 0; }
.figures:not(.is-inset) > :nth-child(even) { padding-right: 0; }
.figures:not(.is-inset) > :nth-child(-n+2) { padding-bottom: var(--s-4); }
.figures:not(.is-inset) > :nth-child(n+3) { padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.figures:not(.is-inset) > :nth-child(odd):last-child { grid-column: 1 / -1; padding-right: 0; }
}
@container content (max-width: 543.98px) {
.figures:not(.is-inset) { grid-template-columns: 1fr; padding: var(--s-2) calc(var(--inset) + 1px); }
.figures:not(.is-inset) > * { padding: var(--s-4) 0; border-left: 0; border-top: 1px solid var(--line-1); }
.figures:not(.is-inset) > :first-child { padding-top: 0; border-top: 0; }
.figures:not(.is-inset) > :last-child { padding-bottom: 0; }
}
/* Stat tile (older pages) */
.stat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--inset); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.stat-label { font-size: var(--fs-xs); color: var(--fg-2); display: flex; align-items: center; gap: var(--s-2); }
.stat-icon { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; color: var(--fg-2); }
.stat-icon .ic { width: 16px; height: 16px; }
.stat-value { font-size: var(--fs-3xl); font-weight: var(--fw-m); line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--fg-0); }
.stat-value small { font-size: var(--fs-sm); color: var(--fg-2); margin-left: 4px; letter-spacing: 0; font-weight: var(--fw-r); }
.stat-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-0); }
.stat-spark { height: 34px; margin-top: var(--s-1); }
.delta { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.delta .ic { width: 12px; height: 12px; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--danger); }
.delta-flat { color: var(--fg-2); }
/* Stat strip: several figures side by side inside one card */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.strip > div { padding: var(--s-4) var(--inset); border-right: 1px solid var(--line-0); }
.strip > div:last-child { border-right: 0; }
.strip .eyebrow { margin-bottom: 4px; }
.strip .val { font-size: var(--fs-xl); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
@container content (max-width: 719.98px) { .strip > div { border-right: 0; border-bottom: 1px solid var(--line-0); } .strip > div:last-child { border-bottom: 0; } }
/* Ledger rows inside a card */
.rows { display: flex; flex-direction: column; }
.rows > * { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); color: inherit; font-size: var(--fs-sm); transition: background var(--t-1); }
.rows > *:last-child { border-bottom: 0; }
.rows > a:hover { background: var(--bg-3); color: inherit; }
.rows .row-main { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.rows .row-main b { font-weight: var(--fw-r); color: var(--fg-0); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .row-main span { font-size: var(--fs-xs); color: var(--fg-2); }
.rows .row-end { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.rows .ic-go { color: var(--fg-3); transition: color var(--t-2), transform var(--t-2); }
.rows > a:hover .ic-go { color: var(--fg-0); transform: translateX(2px); }
/* Key/value ledger */
.kv { display: flex; flex-direction: column; }
.kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: 14px 0; border-bottom: 1px solid var(--line-0); font-size: var(--fs-sm); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--fg-2); margin: 0; }
.kv .legend-dt { display: inline-flex; align-items: center; gap: var(--s-2); }
.kv .legend-dt .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--seg-c, var(--accent)); flex: 0 0 auto; }
.kv dd { margin: 0; color: var(--fg-0); font-variant-numeric: tabular-nums; text-align: right; }
.kv dd small { color: var(--fg-2); font-size: var(--fs-xs); margin-left: 4px; }
/* Avatar */
.avatar {
--av: 34px;
width: var(--av); height: var(--av); flex: 0 0 auto;
display: grid; place-items: center;
border-radius: var(--r-pill);
background: var(--bg-4);
border: 1px solid var(--line-1);
color: var(--fg-1);
font-size: calc(var(--av) * .38);
font-weight: var(--fw-m);
letter-spacing: .02em;
text-transform: uppercase;
overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { --av: 26px; }
.avatar-lg { --av: 56px; }
.avatar-xl { --av: 84px; }
.avatar-ring { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 3px var(--accent-line); }
/* Feature tile: icon, title, copy */
.feature { display: flex; gap: var(--s-4); align-items: flex-start; }
.feature-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-3); color: var(--fg-1); }
.feature-icon .ic { width: 20px; height: 20px; }
.feature b { display: block; font-weight: var(--fw-m); margin-bottom: 2px; }
.feature p { color: var(--fg-2); font-size: var(--fs-sm); }
/* ── 12 ─ Tabs & segmented ───────────────────────────────────────────── */
/* A tabbed card: the tabs are the head, their underline sits on the head's rule. */
.card-head.has-tabs { padding: 0 var(--inset); border-bottom: 1px solid var(--line-0); }
.card-head.has-tabs .tabs { border-bottom: 0; margin-bottom: -1px; overflow: visible; }
.card-head.has-tabs .tab { height: 52px; font-size: var(--fs-md); }
.toolbar-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--inset); border-bottom: 1px solid var(--line-0); }
.toolbar-row .toolbar-search { flex: 1 1 240px; max-width: 360px; }
.toolbar-row .input { height: 34px; }
@media (pointer: coarse) { .toolbar-row .input { height: 44px; } }
.cell-name { max-width: 34ch; display: inline-block; vertical-align: bottom; }
.cell-note { max-width: 28ch; display: inline-block; vertical-align: bottom; }
.thumb-xs { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--bg-3); color: var(--fg-2); overflow: hidden; }
.thumb-xs img { width: 100%; height: 100%; object-fit: cover; }
.thumb-xs.is-empty { background: transparent; color: var(--fg-3); }
.figures.is-inset { padding: 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.figure-value.is-loss { color: var(--danger); }
.kv.is-tight > div { padding: 8px 0; }
.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line-1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
position: relative;
display: inline-flex; align-items: center; gap: var(--s-2);
height: 40px; padding: 0 var(--s-3);
color: var(--fg-2); font-size: var(--fs-sm); white-space: nowrap;
transition: color var(--t-2);
}
.tab:hover { color: var(--fg-0); }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--fg-0); }
.tab[aria-selected="true"]::after, .tab[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: -1px; height: 2px; background: var(--accent); box-shadow: var(--saber); border-radius: var(--r-pill); }
.tab .count { margin-left: 2px; }
.tab-panel[hidden] { display: none; }
.segmented {
display: inline-flex;
padding: 3px;
gap: 2px;
border-radius: var(--r-sm);
background: var(--bg-1);
border: 1px solid var(--line-1);
}
.seg {
display: inline-flex; align-items: center; gap: 6px;
height: 28px; padding: 0 var(--s-3);
border-radius: 5px;
color: var(--fg-2); font-size: var(--fs-xs); white-space: nowrap;
transition: background var(--t-2), color var(--t-2);
}
.seg .ic { width: 14px; height: 14px; }
.seg:hover { color: var(--fg-0); }
.seg.is-on, .seg[aria-pressed="true"], .seg[aria-selected="true"] { background: var(--bg-4); color: var(--fg-0); }
/* ── 13 ─ Overlays ───────────────────────────────────────────────────── */
dialog.modal {
padding: 0;
border: 0;
background: transparent;
max-width: none;
max-height: none;
width: 100%;
height: 100%;
inset: 0;
color: inherit;
display: none;
place-items: center;
overflow: auto;
}
dialog.modal[open] { display: grid; }
dialog.modal::backdrop { background: var(--scrim); backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm)); }
.modal-card {
container-type: inline-size;
container-name: content;
width: min(var(--modal-w, 480px), calc(100vw - 2 * var(--s-4)));
margin: var(--s-6) auto;
border-radius: var(--r-xl);
background: var(--glass-2);
backdrop-filter: blur(var(--blur-lg));
-webkit-backdrop-filter: blur(var(--blur-lg));
border: 1px solid var(--line-2);
box-shadow: var(--shadow-3);
animation: modalIn var(--t-3) var(--ease) both;
position: relative;
overflow: hidden;
}
.modal-lg { --modal-w: 720px; }
.modal-sm { --modal-w: 400px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-6) var(--inset) var(--s-4); }
.modal-title { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--s-2); }
.modal-title .ic { color: var(--fg-2); }
.modal-body { padding: var(--inset); }
.modal-head + .modal-body { padding-top: 0; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--inset); border-top: 1px solid var(--line-0); }
.modal-foot .start { margin-right: auto; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The panel: detail and intake slide in from the right and take the full
height. Decisions (confirm) and the palette stay centered. */
dialog.modal.is-panel { place-items: stretch end; }
.is-panel .modal-card {
width: min(var(--panel-w, 480px), 100vw);
height: 100%;
max-height: none;
margin: 0;
border-radius: 0;
border-top: 0; border-bottom: 0; border-right: 0;
display: flex; flex-direction: column;
animation: panelIn var(--t-3) var(--ease) both;
}
/* Leaving: the overlay slides back out (the docked panel narrows, below). */
.is-panel.is-leaving:not(.is-docked) .modal-card { animation: panelOut var(--t-3) var(--ease) both; }
.is-panel .modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.is-panel .modal-foot { margin-top: auto; flex-wrap: wrap; }
.is-panel .modal-foot:empty { display: none; }
.is-panel.is-wide { --panel-w: 640px; }
@keyframes panelIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes panelOut { from { transform: none; } to { transform: translateX(100%); } }
/* Docked: from 1200px the panel is a section of the sheet, not an overlay.
Nothing dims, nothing is inert, the content reflows beside it. It stays
in view while the page scrolls. */
dialog.modal.is-docked[open] {
--dock-w: min(var(--panel-w, 480px), 36vw);
display: block;
position: sticky;
inset: auto;
margin: 0;
top: calc(var(--sheet-gap) + 1px);
grid-column: 2;
grid-row: 1 / -1;
align-self: start;
width: var(--dock-w);
height: calc(100vh - 2 * var(--sheet-gap) - 2px);
overflow: hidden;
background: var(--bg-2);
border-left: 1px solid var(--line-1);
border-radius: 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0;
/* The one width transition in the system: the panel grows from the
sheet's edge and the content moves with it. Its card keeps its full
width and hangs from the right, so it slides in rather than unfolds. */
transition: width var(--t-3) var(--ease);
}
dialog.modal.is-docked.is-entering[open], dialog.modal.is-docked.is-leaving[open] { width: 0; }
.is-docked .modal-card {
position: absolute;
top: 0; right: 0;
width: var(--dock-w);
height: 100%;
margin: 0;
border: 0;
border-radius: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
animation: none;
}
/* Phones: a dialog is a sheet from the bottom edge, a panel the tall sheet;
both keep clear of the status bar and pad the home indicator. The grabber
marks the head that pulls a sheet down (ui.mjs). */
@media (max-width: 575.98px) {
dialog.modal { place-items: end center; }
.modal-card {
width: 100%;
margin: 0;
max-height: calc(100% - var(--safe-top) - var(--s-3));
overflow-y: auto;
padding-bottom: var(--safe-bottom);
border-bottom: 0;
border-radius: var(--r-xl) var(--r-xl) 0 0;
animation: sheetIn var(--t-3) var(--ease) backwards;
}
.modal-card::before {
content: "";
position: absolute;
top: var(--s-2); left: 50%;
z-index: 1;
width: 36px; height: 4px;
margin-left: -18px;
border-radius: var(--r-pill);
background: var(--line-2);
pointer-events: none;
}
.modal-head { touch-action: pan-x; }
dialog.modal.is-panel { place-items: end stretch; }
.is-panel .modal-card {
width: 100%;
height: calc(100% - var(--safe-top) - var(--s-3));
max-height: none;
overflow: hidden;
border-radius: var(--r-xl) var(--r-xl) 0 0;
border: 1px solid var(--line-2);
border-bottom: 0;
animation: sheetIn var(--t-3) var(--ease) backwards;
}
.is-panel.is-leaving:not(.is-docked) .modal-card { animation: sheetOut var(--t-3) var(--ease) both; }
/* The palette drops from the top, so the keyboard never covers it. */
dialog.modal.palette { place-items: start center; }
dialog.modal.palette .modal-card {
margin: 0;
padding: var(--safe-top) 0 0;
border-top: 0;
border-bottom: 1px solid var(--line-2);
border-radius: 0 0 var(--r-xl) var(--r-xl);
animation: sheetDown var(--t-3) var(--ease) backwards;
}
.palette .modal-card::before { content: none; }
}
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }
@keyframes sheetDown { from { transform: translateY(-100%); } }
/* Dropdown menu. A sibling of content, never inside a frosted bar. */
.dropdown { position: relative; display: inline-flex; }
.menu {
position: absolute;
z-index: var(--z-menu);
top: calc(100% + var(--s-2));
right: 0;
min-width: 200px;
margin: 0; padding: 6px;
display: flex; flex-direction: column; gap: 2px;
list-style: none;
border-radius: var(--r-md);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
box-shadow: var(--shadow-2);
transform-origin: top right;
animation: popIn var(--t-1) var(--ease) both;
}
.menu.is-left { right: auto; left: 0; transform-origin: top left; }
.menu-item {
display: flex; align-items: center; gap: var(--s-3);
width: 100%; padding: 9px var(--s-3);
border-radius: var(--r-xs);
color: var(--fg-1); font-size: var(--fs-sm); text-align: left; white-space: nowrap;
transition: background var(--t-1), color var(--t-1);
}
.menu-item .ic { width: 16px; height: 16px; color: var(--fg-2); }
.menu-item:hover, .menu-item:focus-visible, .menu-item.is-focus { background: var(--bg-4); color: var(--fg-0); outline: none; }
.menu-item:hover .ic { color: var(--fg-0); }
.menu-item.is-danger { color: var(--danger); }
.menu-item.is-danger .ic { color: var(--danger); }
.menu-item.is-danger:hover { background: var(--danger-soft); }
.menu-item .kbd { margin-left: auto; }
.menu-sep { height: 1px; margin: 6px 4px; background: var(--line-1); }
.menu-label { padding: 6px 10px 4px; font-size: var(--fs-xs); color: var(--fg-2); }
@keyframes popIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* Toasts */
.toasts { position: fixed; z-index: var(--z-toast); right: var(--s-5); bottom: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); width: min(380px, calc(100vw - 2 * var(--s-4))); pointer-events: none; }
@media (max-width: 991.98px) {
.toasts {
bottom: calc(var(--shell-bottom) + var(--s-4) + var(--install-space));
right: max(var(--s-4), var(--safe-right));
width: min(380px, calc(100vw - 2 * var(--s-4) - var(--safe-left) - var(--safe-right)));
}
}
.toast {
pointer-events: auto;
display: flex; align-items: flex-start; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
box-shadow: var(--shadow-2);
font-size: var(--fs-sm);
animation: toastIn var(--t-3) var(--ease) both;
position: relative;
}
.toast .ic { width: 16px; height: 16px; color: var(--toast-c, var(--fg-2)); margin-top: 2px; }
.toast-ok { --toast-c: var(--ok); }
.toast-error { --toast-c: var(--danger); }
.toast-warn { --toast-c: var(--warn); }
.toast-accent { --toast-c: var(--accent); }
.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-body b { display: block; font-weight: var(--fw-m); color: var(--fg-0); }
.toast-body span { color: var(--fg-1); }
.toast-close { color: var(--fg-2); padding: 2px; border-radius: var(--r-xs); }
.toast-close:hover { color: var(--fg-0); }
.toast.is-leaving { animation: toastOut var(--t-2) var(--ease) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }
/* Tooltip via data-tip */
[data-tip] { position: relative; }
[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: 50%; bottom: calc(100% + 8px);
transform: translateX(-50%) translateY(4px);
padding: 5px 9px;
border-radius: var(--r-xs);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
color: var(--fg-0);
font-size: var(--fs-xs);
white-space: nowrap;
box-shadow: var(--shadow-2);
opacity: 0; pointer-events: none;
transition: opacity var(--t-2), transform var(--t-2);
z-index: var(--z-menu);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
[data-tip-right]::after { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translateY(-50%) translateX(-4px); }
[data-tip-right]:hover::after { transform: translateY(-50%); }
/* Command palette */
.palette .modal-card { --modal-w: 560px; margin-top: 10vh; }
.palette-input { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-0); }
.palette-input .ic { color: var(--fg-2); }
.palette-input input { flex: 1 1 auto; background: none; border: 0; outline: none; font-size: var(--fs-lg); color: var(--fg-0); }
.palette-input input::placeholder { color: var(--fg-2); }
.palette-list { max-height: 52vh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.palette-item { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; padding: 9px var(--s-3); border-radius: var(--r-sm); color: var(--fg-1); font-size: var(--fs-sm); cursor: pointer; }
.palette-item .ic { width: 16px; height: 16px; color: var(--fg-2); }
.palette-item small { margin-left: auto; color: var(--fg-2); font-size: var(--fs-xs); }
.palette-item.is-focus, .palette-item:hover { background: var(--bg-4); color: var(--fg-0); }
.palette-item.is-focus .ic { color: var(--fg-0); }
.palette-empty { padding: var(--s-6); text-align: center; color: var(--fg-2); font-size: var(--fs-sm); }
.palette-foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line-0); color: var(--fg-2); font-size: var(--fs-xs); }
/* ── 14 ─ Feedback ───────────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-8) var(--s-5); color: var(--fg-2); }
.empty-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--bg-3); color: var(--fg-1); margin-bottom: var(--s-2); }
.empty-icon .ic { width: 20px; height: 20px; }
.empty b { color: var(--fg-0); font-weight: var(--fw-m); font-size: var(--fs-md); }
.empty span { font-size: var(--fs-sm); max-width: 40ch; line-height: 1.55; }
.empty .btn { margin-top: var(--s-3); }
.empty-sm { padding: var(--s-6) var(--s-5); }
.skeleton { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--r-xs); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite; }
.skeleton-line { height: 11px; }
.skeleton-line.w-25 { width: 25%; } .skeleton-line.w-50 { width: 50%; } .skeleton-line.w-75 { width: 75%; }
.skeleton-block { height: 120px; border-radius: var(--r-md); }
@keyframes shimmer { to { transform: translateX(100%); } }
/* Page preloader. Fades out on load, and on its own after 2.4s if JS never runs. */
.loader {
position: fixed; inset: 0; z-index: var(--z-loader);
display: grid; place-items: center;
background: var(--bg-0);
animation: loaderOut var(--t-3) var(--ease) 2.4s forwards;
}
.loader.is-done { animation: loaderOut var(--t-3) var(--ease) forwards; }
.loader-mark { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.loader-logo { width: 40px; height: 40px; }
.loader-bar { width: 120px; height: 2px; background: var(--bg-3); overflow: hidden; position: relative; border-radius: var(--r-pill); }
.loader-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--accent); border-radius: var(--r-pill); animation: loaderSweep 1.1s var(--ease) infinite; }
@keyframes loaderSweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--fg-0); animation: spin .8s linear infinite; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-dots span { animation: blink 1.4s infinite both; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0% { opacity: .2; } 20% { opacity: 1; } 100% { opacity: .2; } }
.notice {
display: flex; gap: var(--s-3); align-items: flex-start;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
background: var(--bg-3);
border: 1px solid var(--line-1);
font-size: var(--fs-sm);
color: var(--fg-1);
}
.notice .ic { flex: 0 0 auto; margin-top: 2px; color: var(--fg-2); }
.notice b { color: var(--fg-0); font-weight: var(--fw-m); }
.notice-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.notice-warn .ic { color: var(--warn); }
.notice-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.notice-danger .ic { color: var(--danger); }
.notice-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.notice-ok .ic { color: var(--ok); }
.notice-accent { background: var(--accent-soft); border-color: var(--accent-line); }
.notice-accent .ic { color: var(--accent); }
/* ── 15 ─ Data viz ───────────────────────────────────────────────────── */
/* The saber. 2px, flat accent, one soft glow, round ends, in a hairline track. */
.progress { position: relative; height: 2px; background: var(--line-1); border-radius: var(--r-pill); }
.progress-fill { height: 100%; background: var(--accent); box-shadow: var(--saber); border-radius: var(--r-pill); }
.progress-ok .progress-fill { background: var(--ok); box-shadow: none; }
.progress-warn .progress-fill { background: var(--warn); box-shadow: none; }
.progress-danger .progress-fill { background: var(--danger); box-shadow: none; }
.progress-info .progress-fill { background: var(--info); box-shadow: none; }
.progress-muted .progress-fill { background: var(--fg-3); box-shadow: none; }
.progress-lg { height: 3px; }
.progress-sm { height: 2px; }
.progress-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--fg-0); opacity: .7; border-radius: var(--r-pill); }
.meter-row { display: grid; grid-template-columns: minmax(96px, 8rem) 1fr auto; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }
.meter-row .meter-label { color: var(--fg-1); }
.meter-row .meter-val { color: var(--fg-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: right; min-width: 5rem; }
.meters { display: flex; flex-direction: column; gap: var(--s-4); }
/* Segmented bar (share of a whole) */
.share-bar { display: flex; height: 6px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; background: var(--bg-1); }
.share-bar > span { display: block; height: 100%; background: var(--seg-c, var(--accent)); min-width: 2px; }
.legend { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); }
.legend > * { display: flex; align-items: center; gap: var(--s-2); }
.legend .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--seg-c, var(--accent)); flex: 0 0 auto; }
.legend .lg-v { margin-left: auto; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.legend .lg-p { color: var(--fg-2); font-size: var(--fs-xs); min-width: 3.2em; text-align: right; }
/* Chart host */
.chart { position: relative; width: 100%; min-height: 200px; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-h-sm { height: 160px; min-height: 160px; }
.chart-h-md { height: 240px; min-height: 240px; }
.chart-h-lg { height: 320px; min-height: 320px; }
.chart .grid-line { stroke: var(--line-0); }
.chart .axis-text { fill: var(--fg-2); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-accent { stroke: var(--accent); }
.chart .line-dashed { stroke: var(--fg-2); stroke-dasharray: 3 5; stroke-width: 1; opacity: .7; }
.chart .line-ok { stroke: var(--ok); }
.chart .line-warn { stroke: var(--warn); }
.chart .area-accent { fill: url(#area-accent); }
.chart .area-ok { fill: url(#area-ok); }
.chart .bar { fill: var(--bg-5); transition: fill var(--t-2); }
.chart .bar-accent { fill: var(--accent-mid); }
.chart .bar:hover { fill: var(--accent); }
.chart .dot { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.chart .end-dot { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.chart .chart-label { fill: var(--fg-1); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .chart-label.is-dim { fill: var(--fg-2); }
.chart .crosshair { stroke: var(--fg-3); }
.chart-tip {
position: absolute; z-index: 2; pointer-events: none;
padding: 8px 10px;
border-radius: var(--r-sm);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
box-shadow: var(--shadow-2);
font-size: var(--fs-xs);
white-space: nowrap;
transform: translate(-50%, calc(-100% - 12px));
opacity: 0; transition: opacity var(--t-1);
}
.chart-tip.is-on { opacity: 1; }
.chart-tip b { display: block; color: var(--fg-2); font-weight: var(--fw-r); font-size: var(--fs-xs); margin-bottom: 3px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip .tip-row i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.chart-tip .tip-row span { color: var(--fg-1); }
.chart-tip .tip-row em { font-style: normal; margin-left: auto; color: var(--fg-0); font-variant-numeric: tabular-nums; padding-left: 10px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--fs-xs); color: var(--fg-2); padding-top: var(--s-3); margin-top: var(--s-3); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 2px; display: inline-block; background: var(--lg-c, var(--accent)); border-radius: var(--r-pill); }
.chart-legend i.is-dashed { background: repeating-linear-gradient(90deg, var(--fg-2) 0 3px, transparent 3px 6px); }
.chart-legend i.is-bar { height: 8px; width: 8px; border-radius: 2px; }
.chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); color: var(--fg-2); font-size: var(--fs-sm); text-align: center; padding: var(--s-5); }
.chart-empty .ic { width: 20px; height: 20px; color: var(--fg-3); }
.chart-empty span { max-width: 34ch; }
/* Ring */
.ring { width: 100%; max-width: 170px; margin-inline: auto; display: block; }
.ring .ring-track { fill: none; stroke: var(--bg-4); }
.ring .ring-arc { fill: none; stroke: var(--accent); stroke-linecap: round; }
.ring.is-behind .ring-arc { stroke: var(--warn); }
.ring .ring-tick { stroke: var(--bg-2); stroke-width: 2; }
.ring .ring-pace { stroke: var(--fg-0); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.ring .ring-label { fill: var(--fg-0); font-family: var(--font); font-size: 26px; font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.ring .ring-sub { fill: var(--fg-2); font-family: var(--font); font-size: 11px; }
.ring-sm { max-width: 64px; }
.ring-sm .ring-label { font-size: 15px; }
.ring-sm .ring-sub { display: none; }
/* Sparkline */
.spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark .spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-area { fill: url(#spark-accent); }
.spark .spark-dot { fill: var(--accent); }
/* Contribution calendar (streak). One column per week, months on top, weekdays on the left. */
.heatmap-cal { --cell-gap: 3px; display: flex; flex-direction: column; gap: var(--s-1); width: 100%; }
/* Months and the calendar share one column template: a 30px label column, then a column per week. */
.heatmap-months { display: grid; grid-template-columns: 30px repeat(var(--weeks, 20), minmax(0, 1fr)); gap: var(--cell-gap); height: 14px; font-size: 11px; line-height: 14px; color: var(--fg-2); }
.heatmap-months span { grid-row: 1; white-space: nowrap; }
/* The calendar fills its card: square cells sized by the column, seven rows, weekday names in the first column. */
.heatmap { display: grid; grid-auto-flow: column; grid-template-columns: 30px repeat(var(--weeks, 20), minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: var(--cell-gap); }
.heatmap .heatmap-day { display: flex; align-items: center; font-size: 11px; color: var(--fg-2); }
.heatmap i { display: block; width: 100%; aspect-ratio: 1; border-radius: 2px; background: var(--bg-3); outline: 1px solid var(--line-0); outline-offset: -1px; }
.heatmap i[data-l="1"] { background: rgba(200, 245, 96, .3); }
.heatmap i[data-l="2"] { background: rgba(200, 245, 96, .6); }
.heatmap i[data-l="3"] { background: var(--accent); }
.heatmap i.is-today { outline: 1px solid var(--fg-0); }
.heatmap-wrap { width: 100%; }
/* Fit mode: rows share the box height and cells fill their rows. */
.heatmap-cal.is-fit { height: 100%; }
.heatmap-cal.is-fit .heatmap { flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(7, minmax(0, 1fr)); }
.heatmap-cal.is-fit .heatmap i { aspect-ratio: auto; height: 100%; }
.heatmap-scale { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--fg-2); }
.heatmap-scale i { width: 10px; height: 10px; border-radius: 2px; background: var(--bg-4); }
.heatmap-scale i[data-l="1"] { background: rgba(200, 245, 96, .3); }
.heatmap-scale i[data-l="2"] { background: rgba(200, 245, 96, .6); }
.heatmap-scale i[data-l="3"] { background: var(--accent); }
/* Stepper (parcel journey) */
.stepper { display: flex; align-items: center; gap: 0; min-width: 180px; }
.stepper i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-5); flex: 0 0 auto; }
.stepper b { flex: 1 1 auto; height: 2px; background: var(--bg-5); min-width: 12px; border-radius: var(--r-pill); }
.stepper i.is-done { background: var(--accent); }
.stepper b.is-done { background: var(--accent); }
.stepper i.is-now { background: var(--accent); }
.stepper.is-ok i.is-done, .stepper.is-ok i.is-now { background: var(--ok); }
.stepper.is-ok b.is-done { background: var(--ok); }
.stepper.is-danger i.is-now { background: var(--danger); }
.stepper.is-warn i.is-now { background: var(--warn); }
/* ── 16 ─ Gamification ───────────────────────────────────────────────── */
.level-card .card-body { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
.level-badge {
--lv: 72px;
width: var(--lv); height: var(--lv);
display: grid; place-items: center;
border-radius: var(--r-lg);
background: var(--bg-3);
border: 1px solid var(--line-1);
position: relative;
}
.level-badge b { font-size: var(--fs-3xl); font-weight: var(--fw-m); color: var(--fg-0); font-variant-numeric: tabular-nums; line-height: 1; }
.level-badge span { position: absolute; bottom: 8px; font-size: var(--fs-xs); color: var(--fg-2); }
.level-badge-sm { --lv: 40px; border-radius: var(--r-sm); }
.level-badge-sm b { font-size: var(--fs-md); }
.level-badge-sm span { display: none; }
.level-title { font-size: var(--fs-lg); font-weight: var(--fw-m); }
.level-xp { font-size: var(--fs-xs); color: var(--fg-2); display: flex; justify-content: space-between; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); font-variant-numeric: tabular-nums; }
/* Missions: a status ledger. Mark, title and hint, count, a short bar or Done. */
.missions { display: flex; flex-direction: column; }
.mission { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s-4); align-items: center; padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); }
.card-head + .card-body.flush > .missions > :first-child { border-top: 1px solid var(--line-0); }
.mission:last-child { border-bottom: 0; }
.mission-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--bg-3); color: var(--fg-2); }
.mission-mark .ic { width: 16px; height: 16px; }
.mission.is-done .mission-mark { background: var(--fg-0); color: var(--bg-0); }
.mission-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mission-body b { font-weight: var(--fw-r); color: var(--fg-0); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-body span { font-size: var(--fs-xs); color: var(--fg-2); }
.mission.is-done .mission-body b { color: var(--fg-1); }
.mission-end { display: flex; align-items: center; gap: var(--s-3); }
.mission-count { font-size: var(--fs-sm); color: var(--fg-1); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 5ch; text-align: right; }
.mission-bar { width: 72px; }
@container content (max-width: 543.98px) { .mission-bar { display: none; } }
/* Achievements: a two-column ledger of medallions with a status chip. */
.badge-list { display: grid; grid-template-columns: 1fr; }
.badge-row { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s-4); align-items: center; padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); }
.card-head + .card-body.flush > .badge-list > .badge-row:first-child { border-top: 1px solid var(--line-0); }
.badge-list > .badge-row:last-child { border-bottom: 0; }
.badge-medal { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--bg-3); color: var(--fg-3); }
.badge-medal .ic { width: 16px; height: 16px; }
.badge-row.is-earned .badge-medal { background: var(--bg-4); color: var(--fg-0); }
.badge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-text b { font-weight: var(--fw-m); font-size: var(--fs-md); color: var(--fg-0); }
.badge-text span { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.4; }
.badge-row.is-locked .badge-text b { color: var(--fg-1); }
@container content (min-width: 720px) {
.badge-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.badge-list > .badge-row:nth-child(odd) { border-right: 1px solid var(--line-0); }
.badge-list > .badge-row:nth-last-child(-n+2) { border-bottom: 0; }
.card-head + .card-body.flush > .badge-list > .badge-row:nth-child(2) { border-top: 1px solid var(--line-0); }
}
.flip { display: flex; align-items: baseline; gap: var(--s-2); }
.flip-value { font-size: var(--fs-4xl); line-height: 1; color: var(--fg-0); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.flip-max { color: var(--fg-2); font-size: var(--fs-md); }
.flip-band { margin-top: var(--s-2); }
.flip-parts { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
/* Podium: three columns ruled by hairlines inside the card, no boxes. The
place word carries the metal; the word says it, the colour only echoes. */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--s-5) var(--inset); border-bottom: 1px solid var(--line-0); }
.podium-slot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; padding: 0 var(--s-5); border-left: 1px solid var(--line-0); }
.podium-slot:first-child { padding-left: 0; border-left: 0; }
.podium-place { font-size: var(--fs-xs); color: var(--fg-2); }
.podium-place.is-gold { color: var(--gold); }
.podium-place.is-silver { color: var(--silver); }
.podium-place.is-bronze { color: var(--bronze); }
.podium-slot .avatar { --av: 40px; }
.podium-slot b { font-weight: var(--fw-m); font-size: var(--fs-lg); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-val { font-size: var(--fs-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.podium-slot.is-empty b { color: var(--fg-2); }
@container content (max-width: 543.98px) {
.podium { grid-template-columns: 1fr; padding: 0 var(--inset); }
.podium-slot { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line-0); }
.podium-slot:last-child { border-bottom: 0; }
.podium-slot b { flex: 1 1 auto; }
}
.rank-cell { width: 3rem; }
.rank { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-pill); background: var(--bg-3); font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rank-gold { background: var(--gold-soft); color: var(--gold); }
.rank-silver { background: var(--silver-soft); color: var(--silver); }
.rank-bronze { background: var(--bronze-soft); color: var(--bronze); }
.move { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.move-up { color: var(--ok); }
.move-down { color: var(--danger); }
.move-flat { color: var(--fg-2); }
.move-new { color: var(--info); }
.my-rank-pin { border-top: 1px dashed var(--line-2); }
/* ── 17 ─ Page modules ───────────────────────────────────────────────── */
/* Dashboard */
.page-dashboard .grid { gap: var(--s-6); }
.position-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.position-chart { margin-top: var(--s-6); }
.goal-card .kv { margin-top: var(--s-5); }
.post-teaser { display: flex; flex-direction: column; gap: var(--s-2); }
.post-teaser time { font-size: var(--fs-xs); color: var(--fg-2); }
.post-teaser h3 { font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: 1.3; }
.post-teaser h3 a { display: block; padding: 3px 0; margin: -3px 0; }
.post-teaser h3 a:hover { color: var(--accent); }
@media (pointer: coarse) { .post-teaser h3 a { padding: 12px 0; margin: -12px 0; } .rec-link { width: 36px; height: 36px; } }
.post-teaser p { color: var(--fg-1); font-size: var(--fs-sm); }
@media (max-width: 767.98px) {
.page-dashboard .stat-row > * { grid-column: span 6; }
}
/* Onboarding */
.onboard { background: var(--bg-2); }
.onboard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); flex-wrap: wrap; padding: var(--inset) var(--inset) 0; }
.onboard-count { font-size: var(--fs-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 4px; }
.onboard-track { padding: var(--s-5) var(--inset); }
.onboard-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-0); }
.onboard-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 0 var(--s-4); align-items: center; padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); }
.onboard-step:last-child { border-bottom: 0; }
.onboard-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg-1); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.onboard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onboard-body b { font-weight: var(--fw-m); font-size: var(--fs-sm); color: var(--fg-0); }
.onboard-body span { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.45; }
.onboard-step.is-done .onboard-mark { background: var(--fg-0); border-color: var(--fg-0); color: var(--bg-0); }
.onboard-step.is-done .onboard-body b { color: var(--fg-2); }
.onboard-done { font-size: var(--fs-xs); color: var(--fg-2); }
.onboard-compact .onboard-step { border-bottom: 0; }
@media (max-width: 575.98px) { .onboard-step { grid-template-columns: 28px 1fr; } .onboard-step .btn { grid-column: 1 / -1; margin-top: var(--s-3); } }
/* Recommended rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-1); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@container content (max-width: 719.98px) { .rail { grid-auto-columns: 68%; } }
/* No box around a rail item: the picture, then name, seller and price as a caption. */
.rail { gap: var(--s-5); }
.rec-card { display: flex; flex-direction: column; position: relative; color: inherit; }
.rec-card:hover { color: inherit; }
.rec-thumb { aspect-ratio: 1; background: var(--thumb-ground); position: relative; overflow: hidden; border-radius: var(--r-md); transition: outline-color var(--t-2); outline: 1px solid transparent; outline-offset: -1px; }
.rec-card:hover .rec-thumb, .rec-card:focus-visible .rec-thumb { outline-color: var(--line-2); }
.rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rec-fallback { width: 100%; height: 100%; display: grid; place-items: center; background: var(--bg-3); }
.rec-fallback span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--bg-4); color: var(--fg-1); font-size: var(--fs-2xl); font-weight: var(--fw-m); }
/* The open mark only appears on hover; the pictures stay clean. */
.rec-link { position: absolute; top: var(--s-2); right: var(--s-2); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--fg-0); color: var(--bg-0); opacity: 0; transition: opacity var(--t-2); }
.rec-card:hover .rec-link, .rec-card:focus-visible .rec-link { opacity: 1; }
.rec-body { padding: var(--s-3) 0 0; display: flex; flex-direction: column; gap: 2px; }
.rec-name { font-size: var(--fs-md); font-weight: var(--fw-m); color: var(--fg-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; transition: color var(--t-2); }
.rec-card:hover .rec-name { color: var(--accent); }
.rec-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-xs); color: var(--fg-2); }
.rec-seller { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-price { color: var(--fg-1); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Directory ledgers: a row opens the detail panel. The name is the button;
the whole row is a target too. */
.dir-table tbody tr.is-link { cursor: pointer; }
.dir-table tbody tr.is-link:hover td { background: var(--bg-3); }
.dir-table tbody tr.is-link:focus-within td { background: var(--bg-3); }
.row-open { font: inherit; color: var(--fg-0); text-align: left; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; margin-block: -3px; position: relative; }
.row-open::before { content: ""; position: absolute; inset: -3px; }
@media (pointer: coarse) { .row-open::before { inset: -13px; } }
.row-open:hover { color: var(--accent); }
.dir-table .ic-go { color: var(--fg-3); transition: color var(--t-2), transform var(--t-2); }
.dir-table tr.is-link:hover .ic-go { color: var(--fg-0); transform: translateX(2px); }
.dir-table tr.is-skeleton td { padding-block: 14px; }
/* A toolbar set directly on the sheet, between the head and a grid. */
.toolbar-row.is-sheet { padding: 0; border-bottom: 0; }
/* AI analysis: the analyser's text keeps its line breaks and fades in when it lands. */
.analysis { white-space: pre-wrap; opacity: 0; transition: opacity var(--t-3); }
/* Guides: what each playbook teaches, as a plain checked list. */
.guide-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-sm); color: var(--fg-1); }
.guide-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
.guide-list li .ic { color: var(--fg-2); width: 12px; height: 12px; margin-top: 4px; flex: 0 0 auto; }
/* Blog: posts as a dated ledger; a post reads in one measure. */
.post-list { display: flex; flex-direction: column; }
.card-head + .card-body.flush > .post-list > :first-child { border-top: 1px solid var(--line-0); }
.post-row { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: center; padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); color: inherit; transition: background var(--t-1); }
.post-row:last-child { border-bottom: 0; }
.post-row:hover { background: var(--bg-3); color: inherit; }
.post-row time { font-size: var(--fs-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.post-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.post-text b { font-weight: var(--fw-m); font-size: var(--fs-lg); color: var(--fg-0); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.post-text span { font-size: var(--fs-sm); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-row .ic-go { color: var(--fg-3); transition: color var(--t-2), transform var(--t-2); }
.post-row:hover .ic-go { color: var(--fg-0); transform: translateX(2px); }
@container content (max-width: 543.98px) {
.post-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); }
.post-row time { grid-column: 1 / -1; }
.post-text span { white-space: normal; }
}
/* A post is one reading measure wide; the sheet's margin is the page margin. */
.post { max-width: calc(56ch + 2 * var(--inset) + 2px); }
.post-lead { font-size: var(--fs-lg); color: var(--fg-1); margin-bottom: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-0); max-width: 56ch; }
/* Calculator: the fee ledger under the three figures. */
.calc-rows { display: flex; flex-direction: column; }
.calc-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 10px 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--line-0); color: var(--fg-2); }
.calc-row:last-child { border-bottom: 0; }
.calc-row .v { font-variant-numeric: tabular-nums; color: var(--fg-0); }
.calc-row.is-cost .v { color: var(--danger); }
.calc-row.is-good .v { color: var(--ok); }
.calc-row.is-total { border-top: 1px solid var(--line-1); margin-top: var(--s-2); padding-top: var(--s-3); color: var(--fg-0); }
.calc-row.is-total .v { font-weight: var(--fw-m); }
td.is-loss { color: var(--danger) !important; }
.select-w { min-width: 180px; }
.rates-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container content (max-width: 543.98px) { .rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Analytics */
.dead-headline { font-size: var(--fs-md); line-height: 1.5; color: var(--fg-1); }
.dead-headline strong { color: var(--fg-0); font-weight: var(--fw-m); }
.held { font-variant-numeric: tabular-nums; }
.held.is-warm { color: var(--warn); }
.held.is-cold { color: var(--danger); }
.cat-tile { display: flex; flex-direction: column; gap: 3px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line-1); color: var(--fg-0); transition: border-color var(--t-2), background var(--t-2); }
.cat-tile:hover { border-color: var(--line-2); color: var(--fg-0); background: var(--bg-3); }
.cat-tile.is-active { border-color: var(--accent-line); background: var(--accent-soft); }
.cat-tile b { font-weight: var(--fw-m); font-size: var(--fs-sm); }
.cat-tile span { font-size: var(--fs-xs); color: var(--fg-2); }
.cat-tile .roi { color: var(--fg-1); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
/* Parcels: a ledger. Number and item, state and last event, actions. */
.parcels { display: flex; flex-direction: column; }
.card-head + .card-body.flush > .parcels > :first-child { border-top: 1px solid var(--line-0); }
.parcel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--s-3) var(--s-6); align-items: center; padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); }
.parcel:last-child { border-bottom: 0; }
.parcel-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.parcel-id b { font-weight: var(--fw-m); font-size: var(--fs-sm); color: var(--fg-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcel-id span { font-size: var(--fs-xs); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcel-state { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.parcel-state .stepper { max-width: 220px; }
.parcel-event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcel-actions { display: flex; align-items: center; gap: var(--s-2); }
@container content (max-width: 719.98px) {
.parcel { grid-template-columns: minmax(0, 1fr) auto; }
.parcel-id { grid-row: 1; grid-column: 1; }
.parcel-actions { grid-row: 1; grid-column: 2; }
.parcel-state { grid-row: 2; grid-column: 1 / -1; }
}
/* Quick add: one narrow column, the page head stays full width. */
.quick { max-width: 30rem; }
.disclosure > summary { list-style: none; cursor: pointer; display: inline-flex; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .ic { transition: transform var(--t-2); }
.disclosure[open] > summary .ic { transform: rotate(180deg); }
.card-head + .card-body.flush > .quick-recent-list > :first-child, .card-head + .card-body.flush > ul.plain > :first-child { border-top: 1px solid var(--line-0); }
.quick-recent li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); font-size: var(--fs-md); }
.quick-recent li:last-child { border-bottom: 0; }
.quick-recent li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-0); }
.quick-recent li b { color: var(--fg-1); font-weight: var(--fw-r); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.quick-recent li.is-new { animation: flashRow .9s var(--ease); }
@keyframes flashRow { from { background: var(--accent-soft); } }
/* Transfer preview */
/* Import preview: a flush ledger inside the dialog, no box of its own. */
.transfer-preview { border-top: 1px solid var(--line-0); padding-top: var(--s-3); max-height: 22rem; overflow-y: auto; }
.transfer-preview .table-wrap { margin-inline: calc(-1 * var(--inset)); }
.transfer-summary { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.transfer-summary b { color: var(--fg-0); font-weight: var(--fw-m); }
.transfer-problems { margin-top: var(--s-3); }
.transfer-problems b { font-size: var(--fs-xs); color: var(--warn); font-weight: var(--fw-m); }
.transfer-problems ul { margin: var(--s-1) 0 0; padding-left: 1.1rem; }
.transfer-problems li { font-size: var(--fs-xs); color: var(--fg-2); }
.transfer-error { color: var(--danger); font-size: var(--fs-sm); }
/* Install bar: centred by its insets, not a transform, so its rise-in
animation can never push it off the screen. */
.install-bar {
position: fixed;
left: max(var(--s-4), var(--safe-left));
right: max(var(--s-4), var(--safe-right));
bottom: calc(var(--s-4) + var(--safe-bottom));
z-index: var(--z-toast);
max-width: 30rem;
margin-inline: auto;
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
background: var(--glass-3);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border: 1px solid var(--line-2);
box-shadow: var(--shadow-2);
animation: toastIn var(--t-3) var(--ease) both;
}
.install-bar .install-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-bar b { font-size: var(--fs-sm); font-weight: var(--fw-m); }
.install-bar span { font-size: var(--fs-xs); color: var(--fg-2); }
.install-close { color: var(--fg-2); padding: 4px; border-radius: var(--r-xs); }
.install-close:hover { color: var(--fg-0); }
@media (max-width: 991.98px) { .install-bar { bottom: calc(var(--shell-bottom) + var(--s-3)); } }
@media (max-width: 399.98px) { .install-bar .feature-icon { display: none; } }
/* Setting rows */
.setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 14px var(--inset); border-bottom: 1px solid var(--line-0); }
.setting:last-child { border-bottom: 0; }
.card-head + .card-body.flush > .setting:first-child { border-top: 1px solid var(--line-0); }
.setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setting-text b { font-weight: var(--fw-m); font-size: var(--fs-sm); }
.setting-text span { font-size: var(--fs-xs); color: var(--fg-2); }
.setting-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); }
@container content (max-width: 543.98px) { .setting { flex-direction: column; align-items: flex-start; } }
/* ── 18 ─ Homepage and sign-in (signed out) ──────────────────────────── */
.landing { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; container-type: inline-size; container-name: content; }
/* The admin sign-in: the form alone in the middle of the ground, as the homepage sets its own. No card, no mark. */
.auth { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-5); }
.landing.is-centered { justify-content: center; padding: var(--s-6); }
/* The homepage sells the panel: the bare ground, no sheet and no boxes.
One oversized headline, HYPE AI answering, the engine's live bento, the
panel itself on a stage, the way in. Its motion grammar (a curtain that
lifts, letters that rise, copy by the line, a wipe, the live loops of
home-live.mjs) lives here and only here; the app stays still. Hidden
start states apply under html.js or a demo's .is-live only, so the page
reads in full without scripts. */
.page-home {
--ease-soft: cubic-bezier(.25, .74, .22, .99);
--ease-line: cubic-bezier(.29, .73, .45, 1);
--ease-curtain: cubic-bezier(.74, 0, .24, .99);
--ease-snap: cubic-bezier(.16, 1, .3, 1);
--dur-title: 1.4s; --dur-line: 1.2s; --dur-curtain: 1.3s; --stagger-line: 90ms; --reveal-distance: 16px;
/* The type sits a step above the panel's (2026-10-14): 40 to 72 display, 30 to 44 section titles, 16 to 19 leads,
22 to 28 figures, 14 to 15 in the demos, and 40 to 56 around a section. */
--fs-display: clamp(2.5rem, 5vw, 4.5rem);
--fs-section: clamp(1.875rem, 3.05vw, 2.75rem);
--fs-lead: clamp(1rem, .9rem + .35vw, 1.1875rem);
--fs-fig: clamp(1.375rem, 1.1rem + .6vw, 1.75rem);
--fs-demo: clamp(.875rem, .8rem + .2vw, .9375rem);
--sec-pad: clamp(var(--s-8), 4.5vw, var(--s-9));
/* One section rhythm: the title, its line 16px under it, the proof 32px under the line. */
--head-gap: var(--s-4);
--body-gap: var(--s-7);
--act-h: var(--s-8);
}
.home { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
/* Flat editorial (the user, 2026-10-14): the bare ground and the one bloom; one card style for every card on the page. */
.page-home :is(.hero-signin, .ai-demo, .net-tile, .net-range, .net-step, .bento-tile, .stage, .receipt-mock, .join-panel) { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); }
/* A section's head: its title, then its one line. */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--head-gap); min-width: 0; }
.home-wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); container-type: inline-size; container-name: content; }
/* The bar: the logo and the way in. It leaves on scroll-down and returns, frosted, on scroll-up. */
.home-top { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; height: 64px; padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: translate .5s var(--ease-curtain), background var(--t-3), border-color var(--t-3); }
.home-top-inner { flex: 1 1 auto; width: 100%; max-width: var(--content-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
html[data-bar="hidden"] .home-top { translate: 0 -101%; }
/* Keyboard users reach the bar's links even while it is away. */
html[data-bar="hidden"] .home-top:focus-within { translate: 0; }
html[data-bar="in"] .home-top { background: var(--glass-1); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border-color: var(--line-1); }
.home-logo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -8px; border-radius: var(--r-sm); }
.home-logo img { width: 28px; height: 28px; }
/* The curtain: the preloader lifts like a curtain instead of fading, and drops again when a member signs in. */
html.js .page-home .loader { animation: none; transform: translateY(0); transition: transform 1.15s var(--ease-curtain), visibility 0s linear 1.15s; }
html.js.is-ready .page-home .loader { transform: translateY(-101%); visibility: hidden; }
html.js.is-leaving .page-home .loader { transform: translateY(0); visibility: visible; transition: transform .7s var(--ease-curtain), visibility 0s; }
html.js:not(.is-ready) .page-home .home, html.js.is-leaving .page-home .home { pointer-events: none; }
/* Split text, built by login.mjs: words clip their letters, letters rise. */
.page-home .sp-w { display: inline-block; vertical-align: top; overflow: hidden; padding: .18em .06em .12em; margin: -.18em -.06em -.12em; }
.page-home .sp-i, .page-home .sp-c { display: inline-block; }
.page-home [data-reveal="title"] .sp-c { transition: transform var(--dur-title) var(--ease-soft); transition-delay: calc(var(--ci, 0) * var(--stagger, 28ms) + var(--reveal-delay, 0ms)); }
html.js .page-home [data-reveal="title"]:not(.is-in) .sp-c { transform: translateY(118%); }
html.js .page-home [data-reveal="title"]:not(.is-split) { visibility: hidden; }
.page-home [data-reveal="lines"] .sp-i { transition: transform var(--dur-line) var(--ease-line); transition-delay: calc(var(--li, 0) * var(--stagger-line) + var(--reveal-delay, 0ms)); }
html.js .page-home [data-reveal="lines"]:not(.is-in) .sp-i { transform: translateY(112%); }
/* The HYPE AI demo, the stage and the join panel are uncovered bottom-up. Nothing scales, so no text changes size. */
.page-home [data-reveal="media"] > * { clip-path: inset(0 0 0 0 round var(--r-lg)); transition: clip-path var(--dur-curtain) var(--ease-curtain); transition-delay: var(--reveal-delay, 0ms); }
html.js .page-home [data-reveal="media"]:not(.is-in) > * { clip-path: inset(100% 0 0 0 round var(--r-lg)); }
.page-home [data-reveal="media"].is-settled > * { clip-path: none; }
/* A live demo returns to its start without transitions, for two frames, then plays again (home-live.mjs). */
.page-home .is-snap * { transition: none !important; }
.page-home [data-reveal="fade"] { transition: opacity 1s var(--ease), translate 1.1s var(--ease-soft); transition-delay: var(--reveal-delay, 0ms); }
html.js .page-home [data-reveal="fade"]:not(.is-in) { opacity: 0; translate: 0 var(--reveal-distance); }
/* Roll labels: a button's letters roll up and out while their copy rolls in. */
.page-home [data-roll] { line-height: 1; }
.page-home .roll { display: inline-grid; overflow: hidden; line-height: 1.3; margin-block: -.15em; vertical-align: top; }
.page-home .roll-row { grid-area: 1 / 1; display: inline-flex; white-space: pre; }
.page-home .roll-row .sp-c { transition: translate .6s var(--ease-soft); transition-delay: calc(var(--ci, 0) * 14ms); }
.page-home .roll-row.is-b .sp-c { translate: 0 105%; }
.page-home :is(a, button):hover .roll-row.is-a .sp-c, .page-home :is(a, button):focus-visible .roll-row.is-a .sp-c { translate: 0 -105%; }
.page-home :is(a, button):hover .roll-row.is-b .sp-c, .page-home :is(a, button):focus-visible .roll-row.is-b .sp-c { translate: 0 0; }
/* The first screen, one calm composition on the column grid and nothing on it but the bloom: the headline across,
then the lead, the actions and the offer strip in columns 1 to 7 and the quiet sign-in card in 9 to 12. */
.hero-home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--body-gap); align-items: start; padding: clamp(var(--s-7), 6vh, var(--s-9)) 0 clamp(var(--s-8), 6vh, var(--s-9)); }
.hero-title { grid-column: 1 / -1; }
.hero-copy { grid-column: 1 / 8; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); min-width: 0; }
.hero-signin { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-6); scroll-margin-top: var(--s-8); }
.signin-title { font-size: var(--fs-xl); font-weight: var(--fw-m); color: var(--fg-0); }
.display .hl { color: var(--accent); }
.display { font-size: var(--fs-display); font-weight: var(--fw-m); line-height: 1.04; letter-spacing: -.035em; color: var(--fg-0); text-wrap: balance; max-width: 14ch; }
.hero-home .display { max-width: 15em; }
.display-section { font-size: var(--fs-section); line-height: 1.08; letter-spacing: -.025em; max-width: 20ch; }
.hero-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-1); max-width: 56ch; margin: 0; }
.hero-actions { gap: var(--s-2); }
/* The buy buttons are 40px on a desk and 44px under a finger. */
.page-home :is(.hero-actions, .buy-band, .join-actions) .btn { --btn-h: var(--act-h); --btn-px: var(--s-5); }
.hero-offer { width: 100%; margin-top: var(--s-2); }
/* The sign-in's fields are the app's own, one step darker than the card; Sign In is the white button of their height. */
.page-home .hero-signin .input { height: var(--act-h); background: var(--bg-0); }
.page-home .hero-signin .btn-light { --btn-h: var(--act-h); }
/* The offer strip, in the first screen and the join panel: the desk's figures in a row with hairlines between, each
its label over its figure. No box, no tile, no lime. A label may wrap on a narrow phone; a figure never does. */
.offer-strip { display: flex; margin: 0; }
.offer-strip > div { flex: 0 1 auto; display: flex; flex-direction: column; gap: var(--s-1); padding: 0 var(--s-6); border-left: 1px solid var(--line-1); }
.offer-strip > div:first-child { padding-left: 0; border-left: 0; }
.offer-strip > div:last-child { padding-right: 0; }
.offer-strip dt { font-size: var(--fs-sm); line-height: 1.35; color: var(--fg-2); }
.offer-strip dd { margin: 0; font-size: var(--fs-fig); font-weight: var(--fw-m); line-height: 1.15; letter-spacing: -.01em; color: var(--fg-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Where three figures cannot sit side by side (a phone's join panel), the strip turns into a short ledger: each label
on the left, its figure on the right, hairlines between. The strip answers to its own box, not the page's. */
.hero-offer, .join-offer { container: offer / inline-size; }
@container offer (max-width: 339.98px) {
.offer-strip { flex-direction: column; }
.offer-strip > div, .offer-strip > div:first-child, .offer-strip > div:last-child { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-2) 0; border-left: 0; }
.offer-strip > div:first-child { padding-top: 0; }
.offer-strip > div:last-child { padding-bottom: 0; }
.offer-strip > div + div { border-top: 1px solid var(--line-1); }
}
/* The countdown is text: days, then hours and minutes in two digits, so it never changes width. */
.cd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd b { font-weight: inherit; color: inherit; }
/* A buy band between two sections: one line and the buy button, between two rules. */
.buy-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-7); padding: var(--s-5) 0; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.buy-line { flex: 1 1 24rem; min-width: 0; margin: 0; font-size: var(--fs-lead); font-weight: var(--fw-m); line-height: 1.4; color: var(--fg-0); }
.buy-line b { font-weight: var(--fw-m); }
/* The bar's buy button carries the price after its label, at the regular weight. */
.home-top .buy-price { font-weight: var(--fw-r); }
@media (max-width: 719.98px) { .home-top .top-wide { display: none; } }
@media (max-width: 379.98px) { .home-top .buy-price { display: none; } }
/* On phones a slim frosted buy bar rises from the bottom once the first screen has gone, and leaves near the bands, the join panel and the foot. */
.buybar { display: none; }
@media (max-width: 767.98px) {
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4) calc(var(--s-2) + var(--safe-bottom)); background: var(--glass-1); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); border-top: 1px solid var(--line-1); visibility: hidden; translate: 0 100%; transition: translate .32s var(--ease-snap), visibility 0s linear .32s; }
.buybar.is-on { visibility: visible; translate: 0 0; transition: translate .32s var(--ease-snap), visibility 0s; }
/* While the bar is up, a control reached by the keyboard scrolls clear of it. */
html:has(.buybar.is-on) { scroll-padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
}
.buybar-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.buybar-top { display: flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }
.buybar-top b { font-size: var(--fs-2xl); font-weight: var(--fw-m); line-height: 1.15; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.buybar-top span, .buybar-sub { font-size: var(--fs-sm); color: var(--fg-2); white-space: nowrap; }
.buybar-sub .cd { color: var(--fg-0); }
.buybar .btn { flex: 0 0 auto; --btn-h: var(--act-h); }
/* HYPE AI: the head on the left, the sources under it running down to the demo's foot, the demo on the right. */
.ai-home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--s-6); row-gap: var(--body-gap); align-items: start; padding: var(--sec-pad) 0; scroll-margin-top: var(--s-6); }
.ai-home-copy { grid-column: 1 / 6; grid-row: 1; }
.ai-demo-wipe { grid-column: 6 / 13; grid-row: 1 / 3; min-width: 0; }
/* The sources: a name over a short fact, hairlines between; the rows share the column's height, so the list starts
right under the head and ends on the demo's foot. A source lights (its dot lime) while the demo reads it. */
.ai-sources { grid-column: 1 / 6; grid-row: 2; align-self: stretch; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ai-sources li { flex: 1 1 0; min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--s-2) 0; }
/* Hairlines run between rows only, never above the first or under the last, in every list on the page. */
.ai-sources li + li { border-top: 1px solid var(--line-0); }
/* No dot: the source being read shows by its words brightening, nothing else. */
.ai-sources b { font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: 1.35; color: var(--fg-1); transition: color var(--t-3) var(--ease-snap); }
.ai-sources span { min-width: 0; font-size: var(--fs-md); line-height: 1.4; color: var(--fg-2); font-variant-numeric: tabular-nums; transition: color var(--t-3) var(--ease-snap); }
.ai-sources li.is-on b { color: var(--fg-0); }
.ai-sources li.is-on span { color: var(--fg-1); }
/* The demo: the HYPE AI page in miniature on the flat card, its own components. Every conversation shares one cell
of the log, so the tallest sets its height and nothing moves when they change. */
.ai-demo { display: flex; flex-direction: column; gap: var(--s-4); padding: 0 var(--s-5) var(--s-5); }
.ai-demo-head { display: flex; align-items: center; gap: var(--s-2); margin: 0 calc(-1 * var(--s-5)); padding: 14px var(--s-5); border-bottom: 1px solid var(--line-0); font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0); }
.ai-demo-head .ic { width: 16px; height: 16px; color: var(--fg-0); }
.ai-demo-log { display: grid; padding-top: var(--s-1); }
.ai-demo .ai-q, .ai-demo .ai-a { font-size: var(--fs-demo); line-height: 1.55; }
.ai-demo .ai-a > * + * { margin-top: var(--s-2); }
.ai-demo .ai-a li + li { margin-top: var(--s-1); }
.ai-demo .ai-msg { gap: 6px; }
.ai-demo-chat { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; visibility: hidden; transition: opacity .4s var(--ease-snap); }
.ai-demo-chat.is-on { visibility: visible; }
.ai-demo-chat.is-leaving { opacity: 0; }
.ai-demo .ai-q { max-width: 85%; }
.ai-demo .ai-msg { transition: opacity var(--t-3) var(--ease-snap), translate .5s var(--ease-snap); }
.ai-demo-from { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--fg-2); }
.ai-demo-label { margin-right: var(--s-1); }
/* While the sources are read, the spinner turns at the end of the row; it holds its place after, unseen. */
.ai-demo-from .spinner { width: 12px; height: 12px; opacity: 0; animation-play-state: paused; transition: opacity var(--t-3) var(--ease-snap); }
.ai-demo-from.is-reading .spinner { opacity: 1; animation-play-state: running; }
.ai-demo-from .chip { transition: opacity var(--t-3) var(--ease-snap), translate var(--t-3) var(--ease-snap); }
/* A source chip is 26px; its count a small badge nested in it, 18px tall, 4px of the chip showing round it. */
.ai-demo-from .chip { height: 26px; gap: 6px; padding: 0 4px 0 10px; }
.ai-demo-from .chip .count { height: 18px; min-width: 18px; margin: 0; padding: 0 5px; font-size: var(--fs-2xs); font-weight: var(--fw-m); line-height: 1; color: var(--fg-1); font-variant-numeric: tabular-nums; }
/* The answer streams by opacity alone: every word is laid out from the start, so no line moves. */
.ai-demo .ai-a .w { opacity: clamp(0, calc((var(--shown, 9999) - var(--i, 0)) / 3), 1); }
.ai-demo .ai-demo-ol { list-style: none; padding: 0; }
.ai-demo-ol li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); }
.ai-demo-n { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ai-demo-ask { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.page-home .ai-demo-ask .chip { height: auto; min-height: 30px; padding: 6px 12px; font-size: var(--fs-sm); line-height: 1.35; text-align: left; white-space: normal; }
.page-home .ai-demo-ask .chip:hover { color: var(--fg-0); }
.page-home .ai-demo-ask .chip[aria-pressed="true"] { background: var(--bg-4); border-color: var(--line-2); color: var(--fg-0); }
/* The composer is drawn, not a control: the textarea's look one step below the card, Send as the primary. */
.ai-demo-compose { display: flex; align-items: stretch; gap: var(--s-2); }
.ai-demo-field { flex: 1 1 auto; min-width: 0; display: grid; align-items: start; min-height: var(--act-h); padding: 9px var(--s-3); border: 1px solid var(--line-1); border-radius: var(--r-sm); background: var(--bg-0); font-size: var(--fs-demo); line-height: 20px; color: var(--fg-0); }
.ai-demo-field > span { grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; }
.ai-demo-sizer { visibility: hidden; }
.ai-demo-ph { color: var(--fg-2); }
.ai-demo-field.is-typing .ai-demo-ph, .ai-demo-typed:not(:empty) + .ai-demo-ph { visibility: hidden; }
.ai-demo-field.is-typing .ai-demo-typed::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--accent); animation: homeCaret 1s steps(1) infinite; }
@keyframes homeCaret { 50% { opacity: 0; } }
/* Send is the primary; when the demo sends, it darkens for a moment like a pressed key. */
.ai-demo-send { flex: 0 0 auto; --btn-h: var(--act-h); height: auto; min-height: var(--btn-h); pointer-events: none; transition: background-color var(--t-1) var(--ease-snap); }
.ai-demo-send.is-press { background: var(--accent-2); }
/* While a conversation plays: the question waits to be sent, the answer to start, each source to be read. */
.ai-demo.is-live .ai-demo-chat:not(.is-sent) .ai-msg.is-user { opacity: 0; translate: 0 12px; }
.ai-demo.is-live .ai-demo-chat:not(.is-replying) .ai-msg:not(.is-user) { opacity: 0; }
.ai-demo.is-live .ai-demo-from .chip:not(.is-in) { opacity: 0; translate: 0 4px; }
/* The stage: the panel on a tonal surface, no outline, under its title and the views as a segmented switch. */
.stage-section { --stage-pad: var(--s-6); padding: var(--sec-pad) 0; scroll-margin-top: var(--s-6); }
.stage-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-3); }
/* The switch scrolls sideways only: its height fits its segments, so nothing scrolls up and down inside it, and a
finger that starts on it still scrolls the page. A segment's focus ring sits inside it, so the strip never clips it. */
.stage-switch { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.stage-switch::-webkit-scrollbar { display: none; }
.stage-switch .seg:focus-visible { outline-offset: -2px; }
.stage-switch .seg { height: 34px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
/* The panel's own components at the panel's own sizes, the rows kept 12px tall. */
.stage .tour-rows > * { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.stage .kv > div { padding-top: calc(var(--s-5) / 2); padding-bottom: calc(var(--s-5) / 2); }
.stage { padding: var(--stage-pad); }
.stage .tour-panels { display: grid; }
.stage .tour-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; transition: opacity var(--t-2) var(--ease); }
.stage .tour-panel.is-off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-2) var(--ease), visibility 0s linear var(--t-2); }
.stage .tour-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.stage .tour-chart { flex: 1 1 auto; min-height: 280px; }
.stage .tour-rows { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0 calc(-1 * var(--stage-pad)); border-top: 1px solid var(--line-0); }
.stage .tour-rows:first-child { margin-top: calc(-1 * var(--stage-pad)); border-top: 0; }
.stage .tour-rows:last-child { margin-bottom: calc(-1 * var(--stage-pad)); }
.stage .tour-rows > * { flex: 1 1 auto; padding-left: var(--stage-pad); padding-right: var(--stage-pad); }
.finds .row-end { gap: var(--s-4); }
.finds .row-end .num { color: var(--fg-0); }
.finds .find-profit { color: var(--ok); }
.finds .row-end small { color: var(--fg-2); font-size: var(--fs-xs); }
.board .is-you { background: var(--bg-2); }
.board-member { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.board-move { min-width: 4.5em; text-align: right; }
.stage-guides { list-style: none; margin: 0 0 calc(-1 * var(--s-3)); padding: 0; flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-8); border-top: 1px solid var(--line-0); }
.stage-guides li { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-0); min-width: 0; }
.stage-guides li:nth-last-child(-n+3) { border-bottom: 0; }
.stage-guides b { font-weight: var(--fw-r); font-size: var(--fs-md); color: var(--fg-0); }
.stage-guides span { font-size: var(--fs-xs); color: var(--fg-2); }
.tour-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); align-items: start; }
.tour-split.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 auto; align-items: stretch; }
.tour-split.is-three > div { display: flex; flex-direction: column; min-width: 0; }
.tour-split.is-three .kv { flex: 1 1 auto; }
.tour-split.is-three .kv > div { flex: 1 1 auto; align-items: center; font-size: var(--fs-md); }
.tour-split.is-three .tour-h { font-size: var(--fs-md); }
.tour-split.is-ring { grid-template-columns: 150px minmax(0, 1fr); align-items: center; }
.tour-h { font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-0); margin-bottom: var(--s-4); }
/* The engine: its head, the network as its lead visual, then the two bento tiles side by side. */
.engine { padding: var(--sec-pad) 0; scroll-margin-top: var(--s-6); }
.engine-head .hero-lead { max-width: 60ch; }
/* The engine network, the promo reel's diagram, as a hub: six source cards fill the left column and their wires curve
in, converging on the lanes of a compact range card centred in the middle; five wires curve out of its right edge,
one to each of five step cards that fill the right column, followed with one real product. One grid: the three
labels share a baseline at the top, the columns start and end together, the gutters are equal. The wires are an
SVG behind the cards, drawn by home-live.mjs from the cards' boxes, and run only in the gutters. At rest it is lit;
before it plays (.is-live, set by the script) the icons are dim, the wires undrawn, the markers unlit and the
results hidden. */
.net { --net-row: 74px; --net-gap: var(--s-3); --net-pad: var(--s-5); --lane-h: 36px; position: relative; display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 3fr) minmax(0, 5.5fr); grid-template-rows: auto auto; column-gap: var(--s-9); row-gap: var(--s-4); align-items: last baseline; margin-top: var(--body-gap); }
.net-wires { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.net-wires path { fill: none; }
.net-wires .base { stroke: var(--line-2); stroke-width: 1.5; }
/* The page's one glow besides the bloom: the lit wires, the saber's own (6px of the lime at 35%). As a wire lights, a
short brighter segment runs along it once, then the wire rests lit. */
.net-wires .lit { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; filter: drop-shadow(var(--saber)); }
.net-wires .spark { stroke: var(--accent-3); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .14 2; filter: drop-shadow(var(--saber)); opacity: 0; }
.net-col { display: contents; }
.net-label, .net-tiles, .net-range, .net-rail { position: relative; z-index: 1; min-width: 0; }
.net-label { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--fg-2); }
.net-src .net-label { grid-area: 1 / 1; }
.net-steps .net-label { grid-area: 1 / 3; }
.net-tiles { grid-area: 2 / 1; align-self: start; }
.net-range { grid-area: 2 / 2; align-self: center; justify-self: center; width: 100%; max-width: 224px; }
.net-rail { grid-area: 2 / 3; align-self: stretch; }
/* What it learns from: six source tiles, one row each, an icon beside a name over one line. */
.net-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: var(--net-row); row-gap: var(--net-gap); }
.net-tile { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; column-gap: var(--s-4); padding: 0 var(--net-pad); }
.net-tile .ic { justify-self: center; width: 20px; height: 20px; color: var(--fg-0); transition: color var(--t-3) var(--ease-snap); }
.net-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.net-text b, .net-name { font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: 1.35; color: var(--fg-0); transition: color var(--t-3) var(--ease-snap); }
.net-text > span { font-size: var(--fs-md); line-height: 1.4; color: var(--fg-2); }
/* The range: a compact card centred on the band from the first source card's top to the last one's foot, so the wires
converge on its middle and fan out of it evenly: its label, the total under it, then one hairline row per lane. */
.net-range { padding: var(--s-5) var(--net-pad) var(--s-2); }
.net-head { display: flex; flex-direction: column; gap: var(--s-1); margin: 0 0 var(--s-2); }
.net-count { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: var(--fw-m); line-height: 1; letter-spacing: -.03em; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.net-lanes { margin: 0; display: grid; grid-auto-rows: var(--lane-h); }
.net-lanes > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--fs-md); line-height: 1.4; }
.net-lanes > div + div { border-top: 1px solid var(--line-0); }
.net-lanes dt { color: var(--fg-1); }
.net-lanes dd { margin: 0; font-weight: var(--fw-m); color: var(--fg-0); font-variant-numeric: tabular-nums; }
/* For every product: five step cards that mirror the source tiles (the same card and padding) and fill the right
column, followed with one real product (the bag the page works through). In the slot where a tile has its icon a
step has its numbered marker, then its name and what it found, set right as a ledger value or under the name where
the column is narrow. The numbers carry the order; a lit step changes only its marker, its card never a fill. */
.net-rail { container: steps / inline-size; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--net-gap); }
.net-step { flex: 1 1 0; min-height: var(--net-row); display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "dot name result"; align-items: center; align-content: center; column-gap: var(--s-4); row-gap: 2px; padding: 0 var(--net-pad); }
.net-dot { grid-area: dot; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: var(--fw-m); line-height: 1; font-variant-numeric: tabular-nums; transition: background-color var(--t-3) var(--ease-snap), border-color var(--t-3) var(--ease-snap), color var(--t-3) var(--ease-snap); }
.net-name { grid-area: name; }
.net-result { grid-area: result; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-m); line-height: 1.4; color: var(--fg-0); text-align: right; font-variant-numeric: tabular-nums; transition: opacity .4s var(--ease-snap); }
.net-result .ok { color: var(--ok); }
@container steps (max-width: 479.98px) {
.net-step { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "dot name" "dot result"; align-content: center; }
.net-result { text-align: left; }
}
/* Before it plays: dim icons, unlit markers (a quiet ring and a muted number), no results yet. */
.net.is-live .net-tile:not(.is-on) .ic { color: var(--fg-3); }
.net.is-live .net-step:not(.is-on) .net-dot { border-color: var(--line-2); background: var(--bg-0); color: var(--fg-2); }
.net.is-live .net-step:not(.is-on) .net-name { color: var(--fg-2); }
.net.is-live .net-step:not(.is-done) .net-result { opacity: 0; }
/* The bento: two live tiles side by side, the flat card, a live visual over its name and one short line. */
.bento { list-style: none; margin: var(--body-gap) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.bento-tile { container: tile / inline-size; display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; padding: var(--s-6); }
.bento-visual { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 210px; }
.bento-visual > * { transition: opacity .3s var(--ease-snap); }
.bento-visual.is-fading > * { opacity: 0; }
/* A tile's words: its name carries the claim, then one short line, quiet. */
.bento-copy { display: flex; flex-direction: column; gap: var(--s-1); }
.bento-name { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-m); line-height: 1.3; color: var(--fg-0); }
.bento-text { margin: 0; max-width: 56ch; font-size: var(--fs-lg); line-height: 1.5; color: var(--fg-2); }
/* Knows what Reddit is buying: a ranked board. The slots and their hairlines stay put while the rows trade places,
each row carrying its rank; each row's bar is its posts against the leader's, a flat fill in a flat track. No row
is ever highlighted; the trend badges pulse instead (below). */
.rd { --rd-h: 58px; }
.rd-board { position: relative; }
.rd-slots { display: flex; flex-direction: column; }
.rd-slots i { display: block; height: var(--rd-h); }
.rd-slots i + i { border-top: 1px solid var(--line-0); }
.rd-list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rd-row { position: absolute; top: 0; left: 0; right: 0; height: var(--rd-h); display: flex; align-items: center; gap: var(--s-3); translate: 0 calc(var(--pos, 0) * var(--rd-h)); transition: translate .5s var(--ease-snap); }
.rd-rank { position: relative; flex: 0 0 1rem; font-size: var(--fs-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rd-main { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rd-main b { font-weight: var(--fw-m); font-size: var(--fs-lg); line-height: 1.2; color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-bar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.rd-track { position: relative; flex: 1 1 auto; height: 6px; border-radius: var(--r-pill); background: var(--bg-3); overflow: hidden; }
.rd-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--fg-2); transform-origin: left center; transform: scaleX(var(--w, 1)); transition: transform .5s var(--ease-snap); }
.rd-sub { flex: 0 0 auto; min-width: 4.6em; font-size: var(--fs-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-chip { position: relative; flex: 0 0 auto; display: flex; justify-content: flex-end; min-width: 6rem; }
.rd-chip .chip { position: relative; gap: 3px; transition: opacity var(--t-3) var(--ease-snap); }
.rd.is-live .rd-row:not(.has-chip) .rd-chip .chip { opacity: 0; }
/* The badges pulse while the tile plays (the user's choice, 2026-10-14, for these badges only): a soft ring on its own
layer grows a little and fades (opacity .5 to 0, 900ms), Climbing in the ok green, Cooling muted. Only the ring
moves; the badge and its words never scale or shift. The script plays it at most twice a badge in a pass. */
.rd-chip .chip::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--fg-2); opacity: 0; pointer-events: none; }
.rd-chip .chip-ok::after { border-color: var(--ok); }
/* Knows what it sells for: asks land on a price axis, the median is drawn, the deal is figured. */
.mk { gap: var(--s-2); }
.mk-plot { position: relative; flex: 1 1 auto; min-height: 112px; }
.mk-bins { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--line-1); }
.mk-bin { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding-bottom: 4px; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); transition: opacity var(--t-3) var(--ease-snap), translate .45s var(--ease-snap); }
.mk.is-live .mk-dot:not(.is-in) { opacity: 0; translate: 0 -16px; }
.mk-median { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: 1px dashed var(--fg-1); clip-path: inset(0 -12rem 0 -2px); transition: clip-path .5s var(--ease-snap); }
.mk.is-live .mk-median:not(.is-in) { clip-path: inset(100% -12rem 0 -2px); }
.mk-median b { position: absolute; top: -2px; left: 6px; font-size: var(--fs-xs); font-weight: var(--fw-r); line-height: 1.2; color: var(--fg-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-axis { position: relative; height: 16px; font-size: var(--fs-2xs); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.mk-axis span { position: absolute; top: 0; left: var(--x); translate: -50% 0; white-space: nowrap; }
.mk-axis span:first-child { translate: 0 0; }
.mk-axis span:last-child { translate: -100% 0; }
.mini-figs { margin: var(--s-3) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-figs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 var(--s-4); border-left: 1px solid var(--line-1); }
.mini-figs > div:first-child { padding-left: 0; border-left: 0; }
.mini-figs dt { font-size: var(--fs-sm); color: var(--fg-2); white-space: nowrap; }
.mini-figs dd { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-m); line-height: 1.15; letter-spacing: -.01em; color: var(--fg-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-figs dd.ok { color: var(--ok); }
.mini-figs dd { transition: opacity var(--t-3) var(--ease-snap); }
.mk.is-live .mini-figs dd:not(.is-in) { opacity: 0; }
/* Know the profit before you buy, kept from the old homepage: the bag's sum as one big muted sentence, its figures
bright, the amount kept in --ok. Flat, nothing around it. */
.profit-math { padding: var(--sec-pad) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--body-gap); }
.math-line { margin: 0; max-width: 30ch; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: var(--fw-m); line-height: 1.22; letter-spacing: -.02em; color: var(--fg-2); text-wrap: pretty; }
.math-line b { font-weight: var(--fw-m); color: var(--fg-0); font-variant-numeric: tabular-nums; }
.math-line b.ok { color: var(--ok); }
/* Everything a member gets: the sales pitch as a contents page. Three columns of six, the group labels on one line;
each row a muted number, the name over one line and a chevron, every row the same height. A row opens in place to
the pitch's own paragraphs, one at a time in a group: the paragraphs grow in with a fade (240ms, ease-out) and
fold away the same way, the chevron turning with them. Hover brightens the words, never a fill. */
.included { padding: var(--sec-pad) 0; interpolate-size: allow-keywords; }
.contents { margin-top: var(--body-gap); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-8); row-gap: var(--s-7); align-items: start; }
.contents-group { min-width: 0; }
.contents-title { margin: 0 0 var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-m); line-height: 1.4; color: var(--fg-2); }
.contents-item + .contents-item { border-top: 1px solid var(--line-0); }
.contents-item summary { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 16px; grid-template-areas: "num name chev" "num sum chev"; column-gap: var(--s-3); row-gap: 2px; padding: var(--s-3) 0; border-radius: var(--r-xs); list-style: none; cursor: pointer; }
.contents-item summary::-webkit-details-marker { display: none; }
.contents-num { grid-area: num; font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.contents-name { grid-area: name; font-size: clamp(1rem, .95rem + .15vw, 1.0625rem); font-weight: var(--fw-m); line-height: 1.35; color: var(--fg-1); transition: color var(--t-2) var(--ease); }
.contents-sum { grid-area: sum; min-width: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--fg-2); }
.contents-item summary .ic { grid-area: chev; align-self: center; width: 16px; height: 16px; color: var(--fg-2); transition: rotate .24s var(--ease), color var(--t-2) var(--ease); }
.contents-item summary:hover .contents-name, .contents-item[open] .contents-name { color: var(--fg-0); }
.contents-item summary:hover .ic { color: var(--fg-1); }
.contents-item[open] summary .ic { rotate: 180deg; }
.contents-body { overflow: hidden; padding: 0 0 var(--s-4) calc(1.5rem + var(--s-3)); }
.contents-body p { margin: 0; max-width: 62ch; font-size: var(--fs-md); line-height: 1.6; color: var(--fg-1); }
.contents-body p + p { margin-top: var(--s-3); }
/* Where ::details-content exists, the paragraphs' height and opacity animate in CSS; elsewhere login.mjs animates them. */
.contents-item::details-content { block-size: 0; opacity: 0; overflow: hidden; transition: block-size .24s var(--ease), opacity .24s var(--ease), content-visibility .24s var(--ease) allow-discrete; }
.contents-item[open]::details-content { block-size: auto; opacity: 1; }
/* Receipts, the user's own words: the head and the three formats in columns 1 to 7, the drawn receipt in 9 to 12. */
.receipts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--body-gap); align-items: center; padding: var(--sec-pad) 0; }
.receipts-copy { grid-column: 1 / 8; display: flex; flex-direction: column; gap: var(--body-gap); min-width: 0; }
.receipts-list { list-style: none; margin: 0; padding: 0; }
.receipts-list li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; }
.receipts-list li + li { border-top: 1px solid var(--line-0); }
.receipts-list b { font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0); }
.receipts-list span { font-size: var(--fs-md); line-height: 1.55; color: var(--fg-1); }
.receipt-mock { grid-column: 9 / 13; justify-self: center; width: min(100%, 280px); display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) var(--s-5); font-variant-numeric: tabular-nums; rotate: -2deg; }
.rm-store { text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0); }
.rm-meta { text-align: center; font-size: var(--fs-xs); color: var(--fg-2); }
.rm-lines { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-4) 0; border-top: 1px dashed var(--line-2); border-bottom: 1px dashed var(--line-2); }
.rm-lines > div, .rm-total { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); color: var(--fg-1); }
.rm-total { margin: var(--s-2) 0 var(--s-4); font-size: var(--fs-md); font-weight: var(--fw-m); color: var(--fg-0); }
.rm-barcode { height: 44px; margin: 0 var(--s-4) var(--s-2); background: repeating-linear-gradient(90deg, var(--fg-1) 0 2px, transparent 2px 4px, var(--fg-1) 4px 5px, transparent 5px 7px, var(--fg-1) 7px 10px, transparent 10px 12px); opacity: .7; }
/* Questions: one column of plain answers that open in place. */
.faq { padding: var(--sec-pad) 0; }
.faq-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-7); }
.faq-list { margin-top: var(--body-gap); }
.faq-item + .faq-item { border-top: 1px solid var(--line-1); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-4) 0; list-style: none; cursor: pointer; font-size: var(--fs-lead); font-weight: var(--fw-m); line-height: 1.4; color: var(--fg-1); transition: color var(--t-2) var(--ease); }
.faq-item[open] summary { color: var(--fg-0); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--fg-2); transition: rotate var(--t-2) var(--ease); }
.faq-item[open] summary .ic { rotate: 180deg; }
.faq-item summary:hover { color: var(--fg-0); }
.faq-item summary:hover .ic { color: var(--fg-0); }
.faq-item p { margin: 0; max-width: 66ch; padding: 0 0 var(--s-4); font-size: var(--fs-lg); line-height: 1.6; color: var(--fg-1); }
/* On your own, or with HYPECEIPT: the head, then one ledger, the HYPECEIPT column on the card's tone. */
.compare { padding: var(--sec-pad) 0; display: flex; flex-direction: column; gap: var(--body-gap); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--fs-lg); line-height: 1.5; }
.compare-table th, .compare-table td { padding: var(--s-3) var(--s-5); text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line-0); }
.compare-table thead th, .compare-table thead td { padding-top: var(--s-4); font-size: var(--fs-xl); font-weight: var(--fw-m); border-bottom-color: var(--line-1); }
.compare-table thead td, .compare-table tbody th { width: 26%; padding-left: 0; }
.compare-table thead th:nth-child(2) { color: var(--fg-2); }
.compare-table thead th:nth-child(3) { color: var(--fg-0); }
.compare-table tbody th { font-weight: var(--fw-m); color: var(--fg-1); }
.compare-table tbody td { color: var(--fg-2); }
.compare-table tbody td:last-child { color: var(--fg-0); }
.compare-table tr > :last-child { background: var(--bg-1); }
.compare-table thead tr > :last-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table tbody tr:last-child > :last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.compare-table .num { font-variant-numeric: tabular-nums; font-weight: var(--fw-m); }
.compare-table .is-keep th, .compare-table .is-keep-ten th { color: var(--fg-0); }
.compare-table .is-keep .num { font-size: var(--fs-section); line-height: 1.1; letter-spacing: -.02em; }
.compare-table .is-keep-ten .num { font-size: var(--fs-xl); }
.compare-table .is-keep-ten > * { border-bottom-color: var(--line-1); }
.compare-table .num.ok { color: var(--ok); }
/* The way in: the head, then the join panel: the offer strip with the actions beside it, then, under a hairline,
what you get and how to join side by side. */
.join { padding: var(--sec-pad) 0; }
.join-wipe { margin-top: var(--body-gap); }
.join-panel { display: flex; flex-direction: column; padding: clamp(var(--s-6), 3.5vw, var(--s-8)); }
.join-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-7); padding-bottom: clamp(var(--s-6), 3vw, var(--s-7)); border-bottom: 1px solid var(--line-1); }
/* The offer in one block, so the page can swap it whole at the release. It takes the row beside the actions, and
the whole row once the row is too narrow for both. */
.join-offer { flex: 1 1 22rem; min-width: 0; }
.join-name a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.join-name a:hover { text-decoration-color: var(--fg-0); }
.faq-item p a { color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.faq-item p a:hover { color: var(--fg-0); text-decoration-color: var(--fg-0); }
.join-actions { gap: var(--s-2); }
/* How to join: the three steps side by side, hairlines between them; one under another on a phone. */
.join-how { min-width: 0; padding-top: clamp(var(--s-6), 3vw, var(--s-7)); }
.join-how-title { margin: 0 0 var(--s-4); font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-2); }
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.join-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--s-2); align-content: start; min-width: 0; padding: 0 var(--s-6); }
.join-steps li:first-child { padding-left: 0; }
.join-steps li:last-child { padding-right: 0; }
.join-steps li + li { border-left: 1px solid var(--line-1); }
.join-num { font-size: var(--fs-xl); font-weight: var(--fw-m); line-height: 1.35; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.join-name { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-m); line-height: 1.35; color: var(--fg-0); }
.join-text { margin: 2px 0 0; font-size: var(--fs-lg); line-height: 1.5; color: var(--fg-1); }
.home-foot { margin-top: auto; padding: var(--s-6) var(--gutter); border-top: 1px solid var(--line-0); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--fg-2); }
.home-foot a { color: var(--fg-1); display: inline-flex; align-items: center; min-height: 24px; }
.home-foot a:hover { color: var(--fg-0); }
/* Where the desk's three columns are narrow, a source tile shows its name only. */
@container content (min-width: 848px) and (max-width: 1099.98px) {
.net-tile .net-text > span { display: none; }
}
/* Under 848px of column everything is one column: the hero's copy over its card, HYPE AI's head, demo and sources,
the tiles one by one, and the network in a composition of its own (see below). */
@container content (max-width: 847.98px) {
.hero-title, .hero-copy, .hero-signin { grid-column: 1 / -1; }
.hero-signin { width: 100%; max-width: 400px; }
.ai-home { grid-template-rows: none; }
.ai-home-copy, .ai-demo-wipe, .ai-sources { grid-column: 1 / -1; grid-row: auto; }
.ai-sources li { flex: none; }
.bento { grid-template-columns: minmax(0, 1fr); }
.contents { grid-template-columns: minmax(0, 1fr); }
.stage-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage-guides li:nth-last-child(3) { border-bottom: 1px solid var(--line-0); }
/* The network on a phone, a composition of its own, every block left-aligned and 56px from the next: the sources
as a two-column grid of names, their wires curving down and funnelling into the top of the range card, which
takes its label and total inside and its lanes in two columns; one curved wire from its foot into the stacked
step cards, each result under its name. */
.net { --net-pad: var(--s-3); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; align-items: start; }
.net-src .net-label, .net-steps .net-label, .net-tiles, .net-range, .net-rail { grid-area: auto; }
.net-tiles { margin-top: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--s-2); }
.net-tile { padding: var(--s-3) var(--s-4); column-gap: var(--s-3); }
.net-tile .net-text > span { display: none; }
.net-range { max-width: none; margin-top: var(--s-9); }
.net-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: var(--s-6); }
.net-lanes > div { padding: 10px 0; }
.net-lanes > div + div { border-top: 0; }
.net-lanes > div:nth-child(n + 3) { border-top: 1px solid var(--line-0); }
.net-steps .net-label { margin-top: var(--s-9); }
.net-rail { gap: var(--s-2); margin-top: var(--s-4); }
.net-step { flex: none; min-height: 64px; }
}
@container content (max-width: 543.98px) {
/* On a narrow phone a source tile is its icon over its name, and the network's names, the sources' and the steps'
alike, step down to 14, so every name fits on one line. */
.net-tile { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: var(--s-3); }
.net-text b, .net-name { font-size: var(--fs-md); }
}
@container content (max-width: 719.98px) {
.stage-section { --stage-pad: var(--s-4); }
.stage .tour-panel.is-off { display: none; }
.stage-guides { grid-template-columns: minmax(0, 1fr); }
.stage-guides li:nth-last-child(2) { border-bottom: 1px solid var(--line-0); }
.stage .tour-chart { flex: 0 0 auto; height: 180px; min-height: 180px; }
.tour-split, .tour-split.is-three { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.tour-split.is-ring { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); }
.join-steps { grid-template-columns: minmax(0, 1fr); }
.join-steps li, .join-steps li:first-child, .join-steps li:last-child { padding: var(--s-3) 0; }
.join-steps li:first-child { padding-top: 0; }
.join-steps li + li { border-left: 0; border-top: 1px solid var(--line-1); }
.buy-band .btn { flex: 0 0 auto; }
.receipts-copy, .receipt-mock { grid-column: 1 / -1; }
.receipt-mock { rotate: 0deg; }
.receipts-list li { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-1); }
.compare-table, .compare-table thead, .compare-table tbody { display: block; }
.compare-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-2); border-bottom: 1px solid var(--line-0); padding: var(--s-4) 0; }
.compare-table thead tr { border-bottom-color: var(--line-1); padding-top: 0; }
.compare-table thead td { display: none; }
.compare-table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--s-2); }
.compare-table th, .compare-table td, .compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table td, .compare-table thead th { padding: var(--s-3) var(--s-4); }
.compare-table thead th { font-size: var(--fs-xl); }
.compare-table thead th:nth-child(2) { padding-left: 0; }
.compare-table tbody td:nth-of-type(1) { padding-left: 0; }
.compare-table tr > :last-child, .compare-table thead tr > :last-child, .compare-table tbody tr:last-child > :last-child { border-radius: var(--r-md); }
.compare-table tbody tr:last-child { border-bottom: 0; }
}
@container content (max-width: 543.98px) {
/* An exact name is the point, so on a phone a stage row's name wraps rather than being cut. */
.stage .tour-rows .row-main b { white-space: normal; overflow: visible; }
.bento-tile { padding: var(--s-5); }
.hero-signin { padding: var(--s-5); }
.ai-demo { padding: 0 var(--s-4) var(--s-4); }
.ai-demo-head { margin: 0 calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); }
.offer-strip > div { padding: 0 var(--s-4); }
.offer-strip > div:first-child { padding-left: 0; }
.offer-strip > div:last-child { padding-right: 0; }
.offer-strip dt { font-size: var(--fs-xs); }
}
/* Under a finger every control the homepage adds is 44px tall, the sign-in's inputs too. */
@media (pointer: coarse) {
.page-home { --act-h: 44px; }
.home-foot a { min-height: 44px; }
.stage-switch .seg { height: 44px; }
.home-top .btn { --btn-h: 44px; }
.page-home .ai-demo-ask .chip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
html.js .page-home .loader { transition: opacity .3s var(--ease), visibility 0s linear .3s; transform: none; }
html.js.is-ready .page-home .loader { opacity: 0; transform: none; }
html.js.is-leaving .page-home .loader { opacity: 1; transform: none; }
.page-home [data-reveal] .sp-c, .page-home [data-reveal] .sp-i, .page-home [data-reveal="media"] > *, .page-home [data-reveal="fade"] { transition: none; transform: none; clip-path: none; scale: none; translate: none; opacity: 1; }
.page-home .roll-row .sp-c { transition: none; }
.home-top, .buybar, .buybar.is-on { transition: none; }
.contents-item summary .ic { transition: none; }
.contents-item::details-content { transition: none; }
}
.section-head.is-first { margin-top: 0; }
.table-wrap.is-capped { max-height: 26rem; overflow-y: auto; }
/* ── 19 ─ Motion & a11y ──────────────────────────────────────────────── */
/* No entrance animations on load. The classes stay valid and do nothing. */
.reveal, .reveal-scale, [data-reveal], .stagger > * { animation: none; opacity: 1; transform: none; }
.typing-cursor { border-right: 2px solid var(--accent); animation: cursorBlink .7s infinite; }
@keyframes cursorBlink { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.loader { display: none; }
}
@media print {
.sidebar, .tabbar, .loader, .toasts, .install-bar, .app-foot, .page-tools { display: none !important; }
.app-main { margin: 0 !important; border: 0 !important; }
body { background: #fff; color: #000; }
}
/* ── 20 ─ Autonomy admin ─────────────────────────────────────────────── */
.code-block { margin: 0; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--line-0); border-radius: var(--r-sm); font: 400 12px/1.6 var(--mono); color: var(--fg-1); white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.code-block.small { font-size: 11px; max-height: 18rem; overflow-y: auto; }
.disclosure.inline { display: inline-block; }
.disclosure.inline > summary { padding: 0; }
.draft-row { padding: var(--s-4) var(--inset); border-bottom: 1px solid var(--line-0); }
.draft-row:last-child { border-bottom: 0; }
.cluster.between { justify-content: space-between; }
.input.w-note { width: 9rem; }
.card-head.is-ruled { border-top: 1px solid var(--line-0); }
/* ── 21 ─ Review ─────────────────────────────────────────────────────── */
.thumb-md { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--bg-3); color: var(--fg-3); overflow: hidden; }
.thumb-md img { width: 100%; height: 100%; object-fit: cover; }
.thumb-md.is-empty { background: transparent; }
.review-table td { vertical-align: middle; }
.review-table .row-open { font-weight: var(--fw-m); }
.review-table .meta { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-top: 2px; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--thumb-ground); overflow: hidden; margin-bottom: var(--s-5); }
.panel-photo img { width: 100%; height: 100%; object-fit: contain; }
.panel-decide { display: grid; grid-template-columns: 1fr; gap: var(--s-3); width: 100%; }
.panel-decide .cluster { justify-content: flex-end; }
.score-lg { font-size: var(--fs-2xl); font-weight: var(--fw-m); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--fg-0); line-height: 1; }
.score-lg small { font-size: var(--fs-xs); color: var(--fg-2); font-weight: var(--fw-r); margin-left: 4px; }
/* A tab strip inside a card head scrolls within the card instead of widening the page. */
.card-head.has-tabs > .tabs { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.card-head.has-tabs > .tabs { overflow-x: auto; scrollbar-width: none; }
/* ── 22 ─ Opportunities grid and the scanner ─────────────────────────── */
/* A tile is a picture with a caption, never a box. */
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-6) var(--s-5); }
.opp-card { display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--fg-1); font: inherit; border-radius: var(--r-md); cursor: pointer; min-width: 0; }
.opp-card:hover .opp-title { color: var(--accent); }
.opp-photo { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--bg-3); margin-bottom: 4px; }
.opp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opp-blank { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-3); }
.opp-score { position: absolute; top: 8px; right: 8px; min-width: 32px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--glass-3); backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm)); border: 1px solid var(--line-2); color: var(--fg-0); font-size: var(--fs-xs); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.opp-score.is-ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); backdrop-filter: none; -webkit-backdrop-filter: none; }
.opp-title { font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-1); }
.opp-meta { font-size: var(--fs-xs); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-line { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.opp-profit { color: var(--ok); }
.opp-line small { color: var(--fg-2); font-size: var(--fs-xs); }
.opp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@container content (max-width: 543.98px) { .opp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); } }
/* The scanner's ledgers. */
.mono-sm { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.table-wrap.is-capped.is-tall { max-height: 40rem; }
.sources-table tr.is-off td { color: var(--fg-3); }
.sources-table tr.is-off .chip { opacity: .6; }
.sources-table .meta { display: block; font-size: var(--fs-xs); color: var(--fg-2); }
.sources-table .ok { color: var(--ok); }
.runs-table tr.is-link { cursor: pointer; }
.chip .count { margin-left: 4px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.chip.is-on .count { color: inherit; opacity: .7; }
.log-block { max-height: none; white-space: pre-wrap; }
.opp-blank .ic { width: 28px; height: 28px; }
/* Products, news and the evidence panel: the market, the batch, the sellers. */
.why { color: var(--fg-1); }
.brief { color: var(--fg-1); margin-top: 2px; }
.news-table tr.is-off td { color: var(--fg-3); }
.news-table tr.is-off a { color: var(--fg-3); }
.panel-h { font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-0); margin: var(--s-5) 0 var(--s-2); }
.offers { display: flex; flex-direction: column; }
.offer { display: flex; align-items: center; gap: var(--s-3); padding: 8px 0; border-top: 1px solid var(--line-0); font-size: var(--fs-sm); }
.offer:first-child { border-top: 0; }
.offer .num { font-variant-numeric: tabular-nums; color: var(--fg-0); }
.toolbar-row > p { max-width: 62ch; margin: 0; }
/* A list of tick boxes in a panel (the brands to watch): one hairline row each; the panel body does the scrolling. */
.check-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-0); }
.check-row { display: flex; align-items: center; gap: var(--s-3); padding: 8px 2px; border-bottom: 1px solid var(--line-0); font-size: var(--fs-sm); cursor: pointer; }
.check-row:hover { color: var(--fg-0); }
.check-row input { margin: 0; }
/* ── 23 ─ HYPE AI ─────────────────────────────────────────────────────── */
/* The launcher: the one control that floats over the member pages. Never lime; the lime stays on the sale action. */
.ai-launch {
position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-tabbar);
display: inline-flex; align-items: center; gap: var(--s-2);
height: 44px; padding: 0 var(--s-4) 0 var(--s-3);
border: 1px solid var(--line-1); border-radius: var(--r-pill);
background: var(--bg-3); color: var(--fg-0); box-shadow: var(--shadow-2);
font-size: var(--fs-sm); font-weight: var(--fw-m); cursor: pointer;
transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.ai-launch .ic { width: 20px; height: 20px; color: var(--fg-0); }
.ai-launch:hover { background: var(--bg-4); border-color: var(--line-2); }
.ai-launch:active { background: var(--bg-5); }
html.ai-open .ai-launch { opacity: 0; transform: translateY(8px); pointer-events: none; }
.has-ai-launch .toasts { bottom: calc(var(--s-5) + 44px + var(--s-3)); }
@media (max-width: 991.98px) {
.ai-launch { right: max(var(--s-4), var(--safe-right)); bottom: calc(var(--shell-bottom) + var(--s-4) + var(--install-space)); }
.has-ai-launch .toasts { bottom: calc(var(--shell-bottom) + var(--s-4) + 48px + var(--s-3) + var(--install-space)); }
html.has-keyboard .ai-launch { opacity: 0; visibility: hidden; pointer-events: none; }
/* The page's last row ends clear of the launcher. */
.has-ai-launch .content { padding-bottom: calc(var(--shell-bottom) + var(--s-4) + 48px + var(--s-4)); }
}
@media (max-width: 543.98px) {
.ai-launch { width: 48px; height: 48px; padding: 0; justify-content: center; }
.ai-launch-label { display: none; }
}
/* A conversation: the member's message set to the right on the raised grey, the answer on the card itself. */
.ai-log { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.ai-msg { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.ai-msg.is-user { align-items: flex-end; }
.ai-q { max-width: 80%; padding: 10px 14px; border-radius: var(--r-md); background: var(--bg-3); color: var(--fg-0); font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; }
.ai-who { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); }
.ai-who .ic { width: 12px; height: 12px; color: var(--fg-2); }
.ai-a { max-width: 65ch; font-size: var(--fs-md); line-height: 1.6; color: var(--fg-1); overflow-wrap: anywhere; }
.ai-a > * + * { margin-top: var(--s-3); }
.ai-a strong { color: var(--fg-0); font-weight: var(--fw-m); }
.ai-a a { color: var(--fg-0); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ai-a a:hover { text-decoration-color: var(--accent); }
.ai-a ol { padding-left: 1.25rem; }
.ai-a ul.plain { list-style: none; padding: 0; }
.ai-a li + li { margin-top: var(--s-2); }
.ai-a code { font-size: .92em; padding: 1px 5px; border-radius: var(--r-xs); background: var(--bg-3); color: var(--fg-0); }
.ai-a.is-note { color: var(--fg-2); }
.ai-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); max-width: 65ch; }
.ai-rate { display: flex; gap: var(--s-1); margin-left: auto; }
.ai-rate .btn[aria-pressed="true"] { background: var(--bg-4); color: var(--fg-0); }
.ai-pending { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--fg-2); }
.ai-pending .spinner { width: 14px; height: 14px; }
.ai-start { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-2) 0; }
.ai-start p { font-size: var(--fs-md); color: var(--fg-1); max-width: 52ch; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ai-suggest .chip { height: auto; min-height: 30px; padding: 6px 11px; font-size: var(--fs-sm); text-align: left; white-space: normal; line-height: 1.35; }
/* The composer: a textarea that grows to six lines, Send beside it. */
.ai-compose { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.ai-compose-row { display: flex; align-items: stretch; gap: var(--s-2); }
/* Send is always the box's height: 44px for one line, and it grows with the box up to six lines. */
.ai-compose .textarea { flex: 1 1 auto; height: 44px; min-height: 44px; max-height: 154px; padding: 10px var(--s-3); line-height: 22px; resize: none; overflow-y: auto; }
.ai-compose .btn { flex: 0 0 auto; --btn-h: 44px; height: auto; min-height: var(--btn-h); }
.ai-compose-hint { font-size: var(--fs-xs); color: var(--fg-2); }
.ai-compose .notice { margin: 0; }
/* The page: the chats ledger beside the conversation card. */
.ai-chat-card { display: flex; flex-direction: column; }
.ai-scroll { height: clamp(380px, calc(100vh - 340px), 820px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: var(--s-6); }
.ai-chat-card .card-foot { display: block; }
.ai-threads .rows > div { padding: 0; }
.ai-thread { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 0 var(--s-3) 0 0; }
.ai-thread-open { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px var(--inset); text-align: left; background: none; border: 0; color: inherit; cursor: pointer; }
.ai-thread-open b { font-weight: var(--fw-r); color: var(--fg-0); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-thread-open span { font-size: var(--fs-xs); color: var(--fg-2); }
.ai-threads .rows > div:hover, .ai-threads .rows > div.is-on { background: var(--bg-3); }
.ai-thread .btn-icon { opacity: .7; }
.ai-thread .btn-icon:hover, .ai-thread .btn-icon:focus-visible { opacity: 1; }
@container content (max-width: 847.98px) { .ai-scroll { height: clamp(360px, calc(100vh - 300px), 640px); } }
/* On a phone the conversation takes what the screen leaves between the bars under the page head
(--ai-chrome: the page head, the card's head and its composer), so the composer is in reach on load. */
@media (max-width: 575.98px) {
:root { --ai-chrome: 22rem; }
.ai-scroll { height: max(12rem, calc(100vh - var(--shell-top) - var(--shell-bottom) - var(--ai-chrome))); }
@supports (height: 100svh) {
.ai-scroll { height: max(12rem, calc(100svh - var(--shell-top) - var(--shell-bottom) - var(--ai-chrome))); }
}
}
/* The panel: the conversation scrolls, the composer is pinned. */
.ai-panel .modal-head .ai-head-tools { display: flex; align-items: center; gap: var(--s-1); }
.ai-panel .modal-body { display: flex; flex-direction: column; }
.ai-panel .modal-foot { display: block; }
.ai-panel .ai-q { max-width: 88%; }
@media (prefers-reduced-motion: reduce) { .ai-launch { transition: none; } }
/* The chats ledger sits left of the conversation from 848px of column, and follows it below. */
@container content (min-width: 848px) { [data-ai-page] > .ai-col-threads { order: 1; } [data-ai-page] > .ai-col-chat { order: 2; } }
/* An article as Telegram will show it: its own line breaks, links underlined (the bubble is in section 25). */
.tg-preview b { color: var(--fg-0); font-weight: var(--fw-m); }
.tg-preview a { color: var(--fg-0); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
/* Setup steps inside a panel: numbered, plain, no box. */
ol.steps-plain { padding-left: 1.25rem; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.6; }
ol.steps-plain li + li { margin-top: var(--s-1); }
/* ── 24 ─ Admin modules ───────────────────────────────────────────────── */
/* The Overview: every admin module as a tile, the one figure, one fact, a count where work waits. */
.modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container content (min-width: 544px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container content (min-width: 720px) { .modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container content (min-width: 848px) { .modules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.module {
display: flex; flex-direction: column; gap: var(--s-2); min-height: 148px; padding: var(--s-5);
background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); color: inherit;
transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.module:hover { background: var(--bg-3); border-color: var(--line-2); color: inherit; }
/* The Range tile, the daily work, takes the first row whole; the twelve modules under it fill every column count evenly. */
.module.is-wide { grid-column: 1 / -1; }
.module-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: auto; }
.module-ic { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-3); }
.module:hover .module-ic { background: var(--bg-4); }
.module-ic .ic { width: 20px; height: 20px; color: var(--fg-0); }
.module-name { font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-todo { margin-left: auto; }
.module-figure { margin-top: var(--s-4); font-size: var(--fs-3xl); font-weight: var(--fw-m); letter-spacing: -.01em; line-height: 1.1; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.module-fact { font-size: var(--fs-xs); color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .module { transition: none; } }
/* ── 25 ─ Admin work surfaces ────────────────────────────────────────── */
/* Toolbars: what narrows the ledger on the left, the view controls on the right. */
.toolbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-width: 0; max-width: 100%; }
.toolbar-row .segmented { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
/* On a phone the controls take their own full line and the segments scroll inside it. */
@container content (max-width: 543.98px) { .toolbar-end { margin-left: 0; width: 100%; } .toolbar-row .toolbar-search { max-width: none; } }
.toolbar-row .segmented::-webkit-scrollbar { display: none; }
.seg .count { min-width: 18px; height: 18px; padding: 0 5px; font-size: var(--fs-2xs); background: var(--bg-3); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.seg.is-on .count, .seg[aria-current="page"] .count, .seg[aria-pressed="true"] .count, .seg[aria-selected="true"] .count { background: var(--bg-5); color: var(--fg-1); }
a.seg:hover { color: var(--fg-0); }
.seg[aria-current="page"] { background: var(--bg-4); color: var(--fg-0); }
@media (pointer: coarse) { .toolbar-row .seg { height: 40px; } }
.toolbar-count { font-size: var(--fs-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A ledger's toolbar stays at the top of the window while the rows scroll. */
.toolbar-row.is-sticky { position: sticky; top: var(--shell-top); z-index: var(--z-sticky); background: var(--bg-2); border-top-left-radius: calc(var(--r-lg) - 1px); border-top-right-radius: calc(var(--r-lg) - 1px); }
/* Ticking a row turns the toolbar into the selection: the count, what to do with it, Clear. */
.toolbar-row .tool-select { display: none; }
.toolbar-row.is-selecting > :not(.tool-select) { display: none; }
.toolbar-row.is-selecting .tool-select { display: flex; flex: 1 1 auto; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-height: 34px; }
.tool-select .sel-count { margin-right: auto; font-size: var(--fs-sm); color: var(--fg-0); font-variant-numeric: tabular-nums; }
/* A tick box for picking rows: light when ticked, so the lime stays on the primary action. */
.tick {
appearance: none; -webkit-appearance: none;
position: relative; flex: 0 0 auto;
width: 18px; height: 18px; margin: 0;
display: inline-grid; place-items: center; vertical-align: middle;
border-radius: 5px; border: 1px solid var(--line-2); background: var(--bg-1);
cursor: pointer;
transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.tick::before { content: ""; position: absolute; inset: -4px; }
@media (pointer: coarse) { .tick::before { inset: -13px; } }
.tick::after {
content: ""; width: 12px; height: 12px; background: var(--bg-0); transform: scale(0);
transition: transform var(--t-1) var(--ease);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.tick:hover { border-color: var(--fg-2); }
.tick:checked, .tick:indeterminate { background: var(--fg-0); border-color: var(--fg-0); }
.tick:checked::after, .tick:indeterminate::after { transform: scale(1); }
.tick:indeterminate::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A work ledger (Review, Products, Sources, Runs, Knowledge, Brands): the name over one line
of facts, figures set right with their source under them, the actions at the end. */
.ledger { font-size: var(--fs-sm); }
.ledger td { padding-block: 12px; }
.ledger th.num, .ledger td.num { text-align: right; }
.ledger .col-tick { width: 1%; padding-right: 0; }
.ledger .col-tick + td, .ledger .col-tick + th { padding-left: var(--s-4); }
.ledger .col-end { width: 1%; }
.ledger .item { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ledger .item-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ledger .item-name { font-size: var(--fs-md); font-weight: var(--fw-m); color: var(--fg-0); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ledger a.item-name:hover, .ledger .item-name.row-open:hover { color: var(--accent); }
.ledger .item-sub { display: flex; align-items: center; gap: var(--s-2); max-width: 46ch; min-width: 0; font-size: var(--fs-xs); color: var(--fg-2); }
.ledger .item-sub > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ledger .item-sub .chip { flex: 0 0 auto; }
.ledger .two { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.35; white-space: nowrap; }
.ledger td.num .two { align-items: flex-end; }
.ledger .two > :first-child { color: var(--fg-0); font-variant-numeric: tabular-nums; }
.ledger .two > small { font-size: var(--fs-xs); color: var(--fg-2); }
.ledger .is-gain, .ledger .two > .is-gain { color: var(--ok); }
.ledger .is-loss, .ledger .two > .is-loss { color: var(--danger); }
.ledger .is-none { color: var(--fg-2); }
.ledger tbody tr.is-picked td { background: var(--bg-3); }
.ledger tbody tr.is-off td { color: var(--fg-2); }
.ledger tbody tr.is-off .item-name { color: var(--fg-2); }
.ledger .row-actions { display: inline-flex; align-items: center; gap: var(--s-1); justify-content: flex-end; }
@media (hover: hover) {
.ledger .row-actions.is-hover { opacity: 0; transition: opacity var(--t-1); }
.ledger tr:hover .row-actions.is-hover, .ledger tr:focus-within .row-actions.is-hover { opacity: 1; }
}
.ledger .thumb-md { width: 52px; height: 52px; background: var(--thumb-ground); }
.ledger .thumb-md.is-empty { background: var(--bg-3); }
/* A day heading between the rows of a dated ledger. */
.ledger tbody tr.group-row td { padding: var(--s-5) var(--inset) var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); background: transparent; }
.ledger tbody tr.group-row:hover td { background: transparent; }
.ledger tbody tr.group-row:first-child td { padding-top: var(--s-3); }
@container content (max-width: 719.98px) { .ledger .item-name { max-width: 26ch; } .ledger .item-sub { max-width: 30ch; } }
/* An evidence panel: the three figures, the state, the photo, then the facts in named groups. */
.panel-figs { margin-bottom: var(--s-5); }
.panel-figs .figure-value { font-size: var(--fs-2xl); }
.panel-state { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5); }
.panel-state .why { font-size: var(--fs-sm); line-height: 1.5; }
.panel-group + .panel-group { margin-top: var(--s-2); }
.panel-group > .panel-h { margin-top: var(--s-5); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-0); }
.panel-group .kv > div:first-child { padding-top: 10px; }
/* Articles, drafts and news on the sheet: cards that read like the piece they hold. */
.reads { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container content (min-width: 640px) { .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container content (min-width: 980px) { .reads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.read-card {
position: relative; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; min-height: 236px;
padding: var(--s-5); background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg);
transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.read-card:hover { background: var(--bg-3); border-color: var(--line-2); }
.read-card:has(.read-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.read-card[hidden] { display: none; }
.read-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-xs); color: var(--fg-2); }
.read-top .read-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.read-top .read-end { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.read-title { font-size: var(--fs-xl); font-weight: var(--fw-m); line-height: 1.3; color: var(--fg-0); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-open { font: inherit; color: inherit; text-align: left; letter-spacing: inherit; line-height: inherit; }
.read-open:focus-visible { outline: none; }
.read-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.read-lede { font-size: var(--fs-sm); line-height: 1.6; color: var(--fg-1); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.read-foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line-0); display: flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--fs-xs); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.read-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); position: relative; z-index: 1; }
.read-actions form { display: contents; }
.read-card .ic-go { margin-left: auto; color: var(--fg-3); transition: color var(--t-2), transform var(--t-2); }
.read-card:hover .ic-go { color: var(--fg-0); transform: translateX(2px); }
.read-card.is-off .read-title, .read-card.is-off .read-lede { color: var(--fg-2); }
/* The reader: one piece in the wide panel, set the way it reads, with Telegram's view and the editor beside it. */
.reader-tabs { margin-right: auto; }
.reader-tabs[hidden] + [data-close] { margin-left: auto; }
.reader { display: flex; flex-direction: column; gap: var(--s-4); }
.reader-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--fg-2); }
.reader-meta a { color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.reader-title { font-size: var(--fs-2xl); font-weight: var(--fw-m); line-height: 1.25; letter-spacing: -.01em; color: var(--fg-0); text-wrap: balance; }
.reader-lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--fg-1); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-0); }
.reader-body { max-width: 62ch; font-size: var(--fs-lg); line-height: 1.7; color: var(--fg-1); overflow-wrap: anywhere; }
.reader-body > * + * { margin-top: var(--s-4); }
.reader-body h3 { margin-top: var(--s-6); font-size: var(--fs-lg); font-weight: var(--fw-m); color: var(--fg-0); }
.reader-body strong { color: var(--fg-0); font-weight: var(--fw-m); }
.reader-body a { color: var(--fg-0); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.reader-body a:hover { text-decoration-color: var(--accent); }
.reader-body ol { padding-left: 1.25rem; }
.reader-body ul.plain { list-style: none; padding: 0; }
.reader-body li + li { margin-top: var(--s-2); }
.reader-body p.reader-source { font-size: var(--fs-sm); color: var(--fg-2); }
.reader-view[hidden] { display: none; }
.reader-edit .textarea { min-height: 22rem; font-size: var(--fs-md); line-height: 1.6; }
.reader-note { font-size: var(--fs-xs); color: var(--fg-2); margin-right: auto; }
/* Telegram's view: the post as a message in the channel, on the chat's darker ground. */
.tg-chat { padding: var(--s-5); border-radius: var(--r-md); background: var(--bg-0); border: 1px solid var(--line-0); }
.tg-preview { max-width: 52ch; padding: 10px 14px 8px; border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); background: var(--bg-3); color: var(--fg-1); font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; }
.tg-from { display: block; margin-bottom: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-0); }
.tg-time { display: block; margin-top: var(--s-1); text-align: right; font-size: var(--fs-2xs); color: var(--fg-2); font-variant-numeric: tabular-nums; }
/* Settings rows carry a value where there is nothing to press. */
.setting-value { font-size: var(--fs-sm); color: var(--fg-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.setting-ctl form { display: contents; }
.setting-ctl .input[type="number"] { width: 6rem; }
.settings-col { display: flex; flex-direction: column; gap: var(--s-6); }
@media (prefers-reduced-motion: reduce) { .read-card, .tick, .tick::after { transition: none; } }
/* The range: a product as a card, its photo on the white ground, what the evidence says in a line, who sells it, the decision. */
.range-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container content (min-width: 520px) { .range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container content (min-width: 800px) { .range-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container content (min-width: 1080px) { .range-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.range-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.range-card:hover { background: var(--bg-3); border-color: var(--line-2); }
.range-card:has(.range-open:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.range-card[hidden] { display: none; }
.range-photo { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--thumb-ground); overflow: hidden; }
.range-photo img { width: 100%; height: 100%; object-fit: contain; }
.range-photo.is-empty { background: var(--bg-3); color: var(--fg-3); }
.range-photo.is-empty .ic { width: 28px; height: 28px; }
.range-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; padding: var(--s-4) var(--s-4) var(--s-3); }
.range-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; font-size: var(--fs-xs); color: var(--fg-2); }
.range-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-top .chip { margin-left: auto; flex: 0 0 auto; }
.range-top .chip + .chip { margin-left: 0; }
.range-name { font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: 1.3; color: var(--fg-0); }
.range-open { font: inherit; color: inherit; text-align: left; line-height: inherit; }
.range-open:focus-visible { outline: none; }
.range-open::after { content: ""; position: absolute; inset: 0; }
.range-facts { font-size: var(--fs-xs); line-height: 1.5; color: var(--fg-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.range-supply, .range-similar { font-size: var(--fs-xs); color: var(--fg-2); }
.range-money { font-size: var(--fs-sm); font-weight: var(--fw-m); line-height: 1.4; color: var(--fg-0); font-variant-numeric: tabular-nums; }
.range-checks { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.range-checks li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-1); }
.range-checks .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.range-checks .is-ok .ic { color: var(--ok); }
.range-checks .is-warn .ic { color: var(--warn); }
.range-checks .is-bad .ic { color: var(--danger); }
.range-sources { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--fs-sm); }
.range-sources a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-1); }
.range-sources a:hover { color: var(--accent); }
.range-related { display: flex; flex-direction: column; margin-top: var(--s-1); }
.range-related-row { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--line-0); }
.range-related-row:first-child { border-top: 0; }
.range-related-row > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.range-related-row b { font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-0); }
.range-related-row span { font-size: var(--fs-xs); color: var(--fg-2); }
.range-supply { margin-top: auto; padding-top: var(--s-1); }
.range-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); min-height: 54px; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line-0); }
.range-state { margin-right: auto; display: inline-flex; }
.range-card.is-dropped .range-photo img { opacity: .45; }
.range-card.is-dropped .range-name { color: var(--fg-2); }
/* The product panel: the evidence in groups, the words sellers use, then one listing per seller with its own decision. */
.range-words { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.range-listings { display: flex; flex-direction: column; }
.range-listing { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--line-0); }
.range-listing:first-child { border-top: 0; }
.range-listing .thumb-md { width: 48px; height: 48px; background: var(--thumb-ground); }
.range-listing .thumb-md.is-empty { background: var(--bg-3); }
.range-listing-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.range-listing-text > :first-child { font-size: var(--fs-sm); font-weight: var(--fw-m); color: var(--fg-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-listing-text > a:hover { color: var(--accent); }
.range-listing-text span { font-size: var(--fs-xs); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-listing-end { display: flex; align-items: center; gap: var(--s-3); }
.range-listing-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: var(--fs-sm); color: var(--fg-0); font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-listing-price small { font-size: var(--fs-xs); color: var(--fg-2); }
.range-listing-actions { display: flex; align-items: center; gap: var(--s-1); }
@container content (max-width: 519.98px) { .range-listing { grid-template-columns: 48px minmax(0, 1fr); } .range-listing-end { grid-column: 2; justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .range-card { transition: none; } }
/* ── 26 ─ Phone and touch ────────────────────────────────────────────── */
/* Fields stay at 16px on phones and touch screens, so the page never zooms when one takes focus. */
@media (max-width: 767.98px), (pointer: coarse) {
.palette-input input, .reader-edit .textarea { font-size: 16px; }
}
/* Targets of 44px on touch: a button's hit area grows past its visual, list rows grow. */
@media (pointer: coarse) {
.btn:not(.btn-sm):not(.btn-icon)::before { content: ""; position: absolute; inset: -4px; }
.btn-group .btn::before { content: none; }
.install-close::before { inset: -12px; }
.menu-item, .select-opt, .palette-item { min-height: 44px; }
.tabs .tab { height: 44px; }
/* Section 04 asks for this too, but its base heights come after it there. */
.nav-link, .sb-search, .sb-collapse { height: 44px; }
}
@media (max-width: 991.98px) and (pointer: coarse) {
.sidebar.is-collapsed .nav-link, .sidebar.is-collapsed .sb-search { height: 44px; }
}
/* Where nothing hovers: a press answers on the row, the card or the place,
and a hover never leaves lime behind after a tap. */
@media (hover: none) {
.rows > a:active, .post-row:active, .module:active, .read-card:active, .range-card:active,
.menu-item:active, .select-opt:active, .palette-item:active, .sb-search:active, .ai-thread-open:active,
.dir-table tbody tr.is-link:active td, .runs-table tr.is-link:active td { background: var(--bg-3); }
.nav-link:not(.is-active):active { background: var(--bg-2); color: var(--fg-0); }
.rec-card:active, .opp-card:active { opacity: .7; }
.rec-card, .opp-card { transition: opacity var(--t-1); }
.rec-card:hover .rec-name, .opp-card:hover .opp-title, .row-open:hover, .table .row-link:hover,
.ledger a.item-name:hover, .ledger .item-name.row-open:hover, .range-listing-text > a:hover,
.post-teaser h3 a:hover { color: var(--fg-0); }
.link-btn:hover, .range-sources a:hover { color: var(--fg-1); }
.prose a:hover, .ai-a a:hover, .reader-body a:hover { text-decoration-color: var(--line-2); }
}
/* Sideways scrollers keep their overscroll, so reaching an end never becomes the back gesture. */
@media (max-width: 991.98px) {
.table-wrap, .rail, .tabs, .segmented, .heatmap-wrap { overscroll-behavior-x: contain; }
.is-panel .modal-body, .modal-card, .ai-scroll { overscroll-behavior-y: contain; }
}
@media print { .appbar { display: none !important; } }
|