/* ===========================================================================
account.hemishthanki.com — the member panel, the gate sign-in screen, and
(through its first three sections) the look of the whole account host.
HOW THIS FILE IS LAID OUT, AND WHO MAY LEAN ON WHICH PART
§1 TOKENS colours, type, radii, shadows, motion, focus ring —
light, dark and the two explicit overrides.
§2 BASE reset, body, links, focus, icons, sr-only, [hidden].
§3 SHARED COMPONENTS buttons, fields, messages, notes, chips, the centred
"login" card and its seal.
---- everything above this line is the shared kit: /signup/, /verify/ and
/reset/ link this file first and add flow.css on top, so a class name
or custom property in §1–§3 is an INTERFACE. Rename nothing there
without grepping Root/account/** first. ----
§4 SIGN-IN SCREEN gate-* (the page at / and /gate/ while signed out)
§5 PANEL acc-* (everything after sign-in)
§6 MOTION entrance animations, all dropped under reduced motion.
Palette per DESIGN §7.4 ("colour with a job"): a warm neutral canvas, one
accent (iris), and colour carried by CONTENT — every app has a fixed hue so
Crossword is the same tomato here, in the console and on its own tile.
=========================================================================== */
/* ============================== §1 TOKENS ================================= */
:root {
color-scheme: light;
/* canvas */
--bg: #f5f3ee; /* warm paper */
--panel: #ffffff;
--panel2: #efece5;
--panel3: #e7e3d9; /* hover on panel2 */
--ink: #17181c;
--ink2: #5d6068; /* secondary text: 6.1:1 on --panel */
--ink3: #6b6e76; /* tertiary: meta only, never the only carrier of meaning (4.7:1 on --bg) */
--line: #e4e0d6;
--line-strong: #d2cdc0;
/* accent (iris) */
--accent: #5b5bd6;
--accent-hover: #4c4cc4;
--accent-tint: #ecebfb;
--accent-tint-strong: #dcdaf7;
--accent-ink: #3d3db0; /* text on --accent-tint: 7.4:1 */
--on-accent: #ffffff;
/* status */
--ok: #18794e; --ok-tint: #e2f3e9; --ok-ink: #115c3a;
--warn: #a35c00; --warn-tint: #fdf0d9; --warn-ink: #7a4500;
--danger: #cd2b31; --danger-tint: #fde7e7; --danger-ink: #a01d22;
/* type */
--font-display: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body: "Google Sans Text", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-body: 16px; /* friendlier than the console's 14–15 */
--fs-small: 14px;
--fs-tiny: 12.5px;
/* shape */
--radius: 18px; /* cards */
--radius-sm: 12px; /* controls */
--radius-xs: 8px;
--pill: 999px;
--control-h: 48px; /* every tappable control is at least this tall */
/* depth */
--e1: 0 1px 2px rgba(23, 24, 28, .05), 0 1px 1px rgba(23, 24, 28, .03);
--e2: 0 10px 30px -12px rgba(23, 24, 28, .22), 0 2px 6px -2px rgba(23, 24, 28, .06);
--e3: 0 24px 60px -18px rgba(23, 24, 28, .35), 0 4px 14px -6px rgba(23, 24, 28, .12);
/* focus: one ring everywhere, drawn with outline so it follows radii */
--focus: #5b5bd6;
/* motion */
--dur: 200ms;
--ease: cubic-bezier(.2, .7, .2, 1);
--topbar-h: 60px;
--tabbar-h: 68px;
--skel-a: #ebe7de;
--skel-b: #f5f2ec;
--seal-shadow: drop-shadow(0 6px 14px rgba(120, 70, 20, .18));
}
/* Dark, twice: once for "auto" following the system, once for the explicit
override. :not([data-theme="light"]) lets the toggle pin light on a dark
system; the second block lets it pin dark on a light one. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #0d0f13; --panel: #15181e; --panel2: #1c2028; --panel3: #242935;
--ink: #eceef2; --ink2: #a2a8b3; --ink3: #7f8693;
--line: #262b34; --line-strong: #353c48;
--accent: #8d8df2; --accent-hover: #a2a2f6; --accent-tint: #23244a; --accent-tint-strong: #2e3063;
--accent-ink: #c9c9ff; --on-accent: #0d0f13;
--ok: #3dd68c; --ok-tint: #10291d; --ok-ink: #8ee6b6;
--warn: #f2b33d; --warn-tint: #2d220b; --warn-ink: #f6cf85;
--danger: #ff6369; --danger-tint: #33161a; --danger-ink: #ffa5a8;
--e1: 0 1px 2px rgba(0, 0, 0, .4);
--e2: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
--e3: 0 24px 60px -18px rgba(0, 0, 0, .85), 0 4px 14px -6px rgba(0, 0, 0, .5);
--focus: #a2a2f6;
--skel-a: #1d2129; --skel-b: #262b35;
--seal-shadow: drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0d0f13; --panel: #15181e; --panel2: #1c2028; --panel3: #242935;
--ink: #eceef2; --ink2: #a2a8b3; --ink3: #7f8693;
--line: #262b34; --line-strong: #353c48;
--accent: #8d8df2; --accent-hover: #a2a2f6; --accent-tint: #23244a; --accent-tint-strong: #2e3063;
--accent-ink: #c9c9ff; --on-accent: #0d0f13;
--ok: #3dd68c; --ok-tint: #10291d; --ok-ink: #8ee6b6;
--warn: #f2b33d; --warn-tint: #2d220b; --warn-ink: #f6cf85;
--danger: #ff6369; --danger-tint: #33161a; --danger-ink: #ffa5a8;
--e1: 0 1px 2px rgba(0, 0, 0, .4);
--e2: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px -2px rgba(0, 0, 0, .4);
--e3: 0 24px 60px -18px rgba(0, 0, 0, .85), 0 4px 14px -6px rgba(0, 0, 0, .5);
--focus: #a2a2f6;
--skel-a: #1d2129; --skel-b: #262b35;
--seal-shadow: drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
}
/* App colour identity (DESIGN §7.4) — THE SAME FORMULA AS THE CONSOLE
(Root/console.css --hue-* tokens + Root/js/core.js HC.appColor), so an app is
the same colour on both hosts. A container gets class "hue" plus --h (the
app's hue, used directly as an OKLCH hue) and --cs (its chroma scale: X is
deliberately muted), and everything inside reads four derived colours:
--app bars, rings, dots
--app-strong a band that carries white TEXT
--app-tint a quiet background
--app-ink text on --app-tint or on the panel
The hsl() set is the fallback; the oklch() set is swapped in only where it
is SUPPORTED — declaring both in one rule would not fall back, because a
var() inside makes an unsupported colour invalid at computed-value time,
after the earlier declaration is already gone. */
:root {
--hue-l: .62; --hue-c: .16; --hue-strong-l: .50;
--hue-tint-l: .955; --hue-tint-c: .035; --hue-ink-l: .45; --hue-ink-c: .14;
--hsl-s: 62%; --hsl-l: 48%; --hsl-strong-l: 38%; --hsl-tint-l: 95%; --hsl-ink-l: 32%;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--hue-l: .72; --hue-c: .15; --hue-strong-l: .50; --hue-tint-l: .29; --hue-tint-c: .06; --hue-ink-l: .86; --hue-ink-c: .11;
--hsl-s: 70%; --hsl-l: 62%; --hsl-strong-l: 38%; --hsl-tint-l: 18%; --hsl-ink-l: 82%;
}
}
:root[data-theme="dark"] {
--hue-l: .72; --hue-c: .15; --hue-strong-l: .50; --hue-tint-l: .29; --hue-tint-c: .06; --hue-ink-l: .86; --hue-ink-c: .11;
--hsl-s: 70%; --hsl-l: 62%; --hsl-strong-l: 38%; --hsl-tint-l: 18%; --hsl-ink-l: 82%;
}
.hue {
--app: hsl(var(--h, 245) var(--hsl-s) var(--hsl-l));
--app-strong: hsl(var(--h, 245) var(--hsl-s) var(--hsl-strong-l));
--app-tint: hsl(var(--h, 245) 60% var(--hsl-tint-l));
--app-ink: hsl(var(--h, 245) 60% var(--hsl-ink-l));
--app-grad: linear-gradient(150deg, hsl(var(--h, 245) 70% 58%), hsl(calc(var(--h, 245) - 18) 70% 42%));
}
@supports (color: oklch(0.5 0.1 10)) {
.hue {
--app: oklch(var(--hue-l) calc(var(--hue-c) * var(--cs, 1)) var(--h, 277));
--app-strong: oklch(var(--hue-strong-l) calc(var(--hue-c) * var(--cs, 1)) var(--h, 277));
--app-tint: oklch(var(--hue-tint-l) calc(var(--hue-tint-c) * var(--cs, 1)) var(--h, 277));
--app-ink: oklch(var(--hue-ink-l) calc(var(--hue-ink-c) * var(--cs, 1)) var(--h, 277));
--app-grad: linear-gradient(150deg, oklch(.72 calc(.15 * var(--cs, 1)) calc(var(--h, 245) + 10)), oklch(.54 calc(.17 * var(--cs, 1)) calc(var(--h, 245) - 14)));
}
}
/* =============================== §2 BASE ================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--bg);
color: var(--ink);
font: 400 var(--fs-body)/1.5 var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: anywhere;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
/* The ring follows each control's own radius (outlines do in every current
engine), so nothing here overrides border-radius on focus. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent-tint-strong); }
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; }
/* Material Symbols draw their ligature NAME as text until the font lands, so a
slow network shows "lock_open" in a button. Hidden until the page script adds
html.icons-ready (font loaded, or a 2 s backstop). */
.material-symbols-rounded {
font-family: "Material Symbols Rounded";
font-weight: normal; font-style: normal;
font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none;
display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
-webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
flex: none;
width: 1em; overflow: hidden;
visibility: hidden;
user-select: none;
}
html.icons-ready .material-symbols-rounded { visibility: visible; }
.material-symbols-rounded.is-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
/* ========================== §3 SHARED COMPONENTS ========================== */
/* ---- buttons ----
.btn neutral outline-ish surface
.btn-filled the one primary action on a card
.btn-tonal secondary, accent-tinted
.btn-text tertiary, no surface until hover
.btn-danger destructive (paired with filled or tonal)
.btn-block full width; .btn-sm compact (still ≥ 40px)
.btn-spin a spinner child shown only while .is-busy, standing in for
the icon so the label does not shuffle sideways. */
.btn {
--btn-bg: var(--panel);
--btn-ink: var(--ink);
--btn-line: var(--line-strong);
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--control-h);
padding: 0 20px;
border: 1px solid var(--btn-line);
border-radius: var(--pill);
background: var(--btn-bg);
color: var(--btn-ink);
font: 500 15px/1.2 var(--font-display);
letter-spacing: .01em;
text-decoration: none;
text-align: center;
white-space: nowrap;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 120ms var(--ease);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
}
.btn:hover { --btn-bg: var(--panel2); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .material-symbols-rounded { font-size: 20px; }
.btn-filled { --btn-bg: var(--accent); --btn-ink: var(--on-accent); --btn-line: transparent; box-shadow: var(--e1); }
.btn-filled:hover { --btn-bg: var(--accent-hover); box-shadow: var(--e2); }
.btn-tonal { --btn-bg: var(--accent-tint); --btn-ink: var(--accent-ink); --btn-line: transparent; }
.btn-tonal:hover { --btn-bg: var(--accent-tint-strong); }
.btn-text { --btn-bg: transparent; --btn-ink: var(--accent-ink); --btn-line: transparent; padding: 0 14px; }
.btn-text:hover { --btn-bg: var(--accent-tint); }
.btn-danger { --btn-bg: var(--danger-tint); --btn-ink: var(--danger-ink); --btn-line: transparent; }
.btn-danger:hover { --btn-bg: var(--danger-tint); box-shadow: inset 0 0 0 1px var(--danger); }
.btn-filled.btn-danger { --btn-bg: var(--danger); --btn-ink: #fff; }
.btn-filled.btn-danger:hover { box-shadow: var(--e2); filter: brightness(1.05); }
.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-spin {
display: none; width: 18px; height: 18px; flex: none;
border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
animation: spin .8s linear infinite;
}
.btn.is-busy .btn-spin { display: inline-block; }
.btn.is-busy .btn-spin + .material-symbols-rounded { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn {
display: inline-grid; place-items: center;
width: 44px; height: 44px; flex: none;
border: 0; border-radius: 50%;
background: transparent; color: var(--ink2);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { background: var(--panel2); color: var(--ink); }
.icon-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* ---- fields ----
. .field.is-bad shakes once and
stays red until the input is touched (the page script removes it). */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; min-width: 0; }
.field-label { font: 500 14px/1.3 var(--font-display); color: var(--ink); letter-spacing: .01em; }
.field-opt { color: var(--ink3); font-weight: 400; }
.field-hint { font-size: 13.5px; color: var(--ink2); line-height: 1.4; }
.field-box { position: relative; display: flex; align-items: center; }
.field-box > .input { padding-right: 52px; }
.field-box > .icon-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.input {
width: 100%;
min-height: 52px;
padding: 12px 16px;
border: 1.5px solid var(--line-strong);
border-radius: var(--radius-sm);
background: var(--panel);
color: var(--ink);
font-size: 16px; /* 16px keeps iOS from zooming on focus */
line-height: 1.3;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
-webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--ink3); opacity: 1; }
.input:hover { border-color: var(--ink3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); outline: none; }
.input:focus-visible { outline: none; }
.input[readonly] { background: var(--panel2); border-color: var(--line); }
.input[disabled] { opacity: .6; }
input[type="date"].input { min-height: 52px; }
.field.is-bad .input { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-tint); }
.field.is-bad { animation: shake 360ms var(--ease) 1; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
/* ---- inline messages (role=status lines under a form) ---- */
.msg { display: flex; align-items: flex-start; gap: 8px; min-height: 0; margin: 12px 0 0; font-size: 14.5px; color: var(--ink2); line-height: 1.45; }
.msg:empty { margin: 0; }
.msg .material-symbols-rounded { font-size: 20px; margin-top: 0; }
.msg-err { color: var(--danger-ink); }
.msg-ok { color: var(--ok-ink); }
/* ---- notes (a tinted box with an icon) ---- */
.note {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--accent-tint); color: var(--accent-ink);
font-size: 14.5px; line-height: 1.5;
}
.note .material-symbols-rounded { font-size: 22px; }
.note-info { background: var(--accent-tint); color: var(--accent-ink); }
.note-warn { background: var(--warn-tint); color: var(--warn-ink); }
.note-ok { background: var(--ok-tint); color: var(--ok-ink); }
.note-err { background: var(--danger-tint); color: var(--danger-ink); }
.note a { color: inherit; font-weight: 500; }
/* ---- chips / badges ---- */
.chip {
display: inline-flex; align-items: center; gap: 6px;
min-height: 28px; padding: 3px 12px;
border-radius: var(--pill);
background: var(--panel2); color: var(--ink2);
font: 500 13px/1.2 var(--font-display);
white-space: nowrap;
}
.chip .material-symbols-rounded { font-size: 16px; }
.chip-ok { background: var(--ok-tint); color: var(--ok-ink); }
.chip-warn { background: var(--warn-tint); color: var(--warn-ink); }
.chip-err { background: var(--danger-tint); color: var(--danger-ink); }
.chip-accent { background: var(--accent-tint); color: var(--accent-ink); }
.section-label {
display: flex; align-items: center; gap: 8px;
margin: 28px 0 12px;
font: 500 12.5px/1.2 var(--font-display);
letter-spacing: .08em; text-transform: uppercase;
color: var(--ink2);
}
/* ---- the centred card every signed-out screen on this host uses ----
(sign-in here; sign-up, verify and reset through flow.css). The airmail
stripe along the top and the Post Office seal are the house fingerprint of
the flow the welcome emails come from — the same seal is inline in those
emails, so a copycat page without it looks wrong to someone who knows. */
.login {
min-height: 100vh; min-height: 100dvh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 32px 16px calc(24px + env(safe-area-inset-bottom));
background:
radial-gradient(1200px 600px at 50% -10%, var(--accent-tint) 0%, transparent 60%),
var(--bg);
}
.login-card {
position: relative;
width: 100%; max-width: 440px;
padding: 40px 32px 28px;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--panel);
box-shadow: var(--e2);
text-align: center;
overflow: hidden;
}
.login-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
background: repeating-linear-gradient(-45deg,
#d64545 0 12px, transparent 12px 18px, #3a64c8 18px 30px, transparent 30px 36px);
opacity: .85;
}
.login-seal {
width: 88px; height: 88px; margin: 0 auto 18px;
filter: var(--seal-shadow);
object-fit: contain;
}
/* The owner's mark (hemitorus, a coin) replaces the seal on owner screens. */
.login-seal.is-owner-mark { border-radius: 50%; }
.login-title { font-size: 28px; font-weight: 500; margin: 0 0 8px; }
.login-title:focus { outline: none; }
.login-sub { color: var(--ink2); font-size: 15.5px; margin: 0 0 22px; }
.login-card form { text-align: left; }
.login-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.login-ways { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); gap: 2px; }
.login-ways .btn { font-size: 14.5px; }
.login-card .msg { justify-content: center; text-align: left; }
.login-foot { margin-top: 22px; font-size: 13.5px; color: var(--ink3); }
.login-foot a { color: var(--ink2); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }
@media (max-width: 480px) {
.login { justify-content: flex-start; padding-top: 20px; }
.login-card { padding: 32px 20px 22px; border-radius: 20px; }
.login-title { font-size: 25px; }
}
/* ========================= §4 SIGN-IN SCREEN (gate-*) ===================== */
/* Where you are going, when a locked app sent you here. The host is printed in
full (monospace) so the destination is readable, not just a friendly name. */
.gate-dest {
display: flex; align-items: center; gap: 12px;
margin: -6px 0 22px; padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--app-tint); color: var(--app-ink);
text-align: left;
}
.gate-dest-txt { display: flex; flex-direction: column; min-width: 0; }
.gate-dest-name { font: 500 15px/1.3 var(--font-display); }
.gate-dest-host { font-family: var(--font-mono); font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-closed { margin-top: 6px; font-size: 14px; color: var(--ink3); }
.gate-code { font-family: var(--font-mono); font-size: 22px; letter-spacing: .3em; text-align: center; }
.gate-go { margin-top: 12px; }
.gate-sep { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: var(--ink3); font-size: 13px; }
.gate-sep::before, .gate-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ============================= §5 PANEL (acc-*) =========================== */
/* ---- shell ----
≥ 900px: a sticky left rail + content. < 900px: a slim top bar, content,
and a fixed bottom tab bar (thumb reach, like every phone app they know). */
.acc-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.acc-rail {
position: sticky; top: 0; height: 100vh; height: 100dvh;
display: flex; flex-direction: column; gap: 6px;
padding: 22px 16px 18px;
border-right: 1px solid var(--line);
background: var(--panel);
overflow-y: auto;
}
.acc-brand {
display: flex; align-items: center; gap: 12px;
padding: 4px 10px 18px; margin-bottom: 4px;
color: var(--ink); text-decoration: none;
border-radius: var(--radius-sm);
}
.acc-brand img { width: 38px; height: 38px; border-radius: 11px; }
.acc-brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.acc-brand-name { font: 500 17px/1.2 var(--font-display); }
.acc-brand-sub { font-size: 12.5px; color: var(--ink2); }
.acc-nav { display: flex; flex-direction: column; gap: 2px; }
.acc-nav-item {
display: flex; align-items: center; gap: 14px;
min-height: 48px; padding: 0 14px;
border-radius: var(--radius-sm);
color: var(--ink2); text-decoration: none;
font: 500 15.5px/1.2 var(--font-display);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-nav-item:hover { background: var(--panel2); color: var(--ink); }
.acc-nav-item[aria-current="page"] { background: var(--accent-tint); color: var(--accent-ink); }
.acc-nav-item[aria-current="page"] .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.acc-nav-badge {
margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px;
display: inline-grid; place-items: center;
border-radius: var(--pill); background: var(--panel2); color: var(--ink2);
font: 500 12px/1 var(--font-display);
}
.acc-nav-item[aria-current="page"] .acc-nav-badge { background: var(--panel); color: var(--accent-ink); }
.acc-rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.acc-me {
display: flex; align-items: center; gap: 12px;
padding: 10px; border-radius: var(--radius-sm);
color: var(--ink); text-decoration: none;
background: var(--panel2);
}
.acc-me:hover { background: var(--panel3); }
.acc-me-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.acc-me-name { font: 500 14.5px/1.25 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-me-mail { font-size: 12.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-rail-row { display: flex; align-items: center; gap: 8px; }
.acc-rail-row .btn { flex: 1; }
/* theme: a three-way segmented control in the rail, a cycling icon on phones */
.acc-seg {
display: inline-flex; padding: 3px; gap: 2px;
border-radius: var(--pill); background: var(--panel2);
}
.acc-seg > button {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
min-height: 36px; min-width: 44px; padding: 0 10px;
white-space: nowrap;
border: 0; border-radius: var(--pill); background: transparent; color: var(--ink2);
font: 500 13.5px/1 var(--font-display);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc-seg > button:hover { color: var(--ink); }
.acc-seg > button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--e1); }
.acc-seg > button .material-symbols-rounded { font-size: 18px; }
.acc-seg:focus-within { outline: none; }
.acc-theme { width: 100%; }
.acc-theme > button { flex: 1; padding: 0 6px; }
.acc-topbar { display: none; }
.acc-tabbar { display: none; }
.acc-main { min-width: 0; padding: 36px 44px 80px; }
.acc-main:focus { outline: none; }
.acc-inner { max-width: 1120px; margin: 0 auto; }
.acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.acc-head-txt { min-width: 0; }
.acc-eyebrow { display: flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; }
.acc-eyebrow .material-symbols-rounded { font-size: 18px; }
.acc-title { font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.acc-title:focus { outline: none; }
.acc-sub { margin-top: 8px; color: var(--ink2); font-size: 16.5px; max-width: 64ch; }
.acc-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 899.98px) {
.acc-shell { display: block; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.acc-rail { display: none; }
.acc-topbar {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 10px;
height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 16px;
background: color-mix(in srgb, var(--bg) 88%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid transparent;
}
.acc-topbar.is-scrolled { border-bottom-color: var(--line); }
.acc-topbar .acc-brand { padding: 0; margin: 0; flex: 1; min-width: 0; }
.acc-topbar .acc-brand img { width: 32px; height: 32px; border-radius: 9px; }
.acc-topbar .acc-brand-name { font-size: 17px; }
.acc-topbar .acc-avbtn { border-radius: 50%; display: inline-grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.acc-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
padding: 6px 4px env(safe-area-inset-bottom);
background: color-mix(in srgb, var(--panel) 92%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
border-top: 1px solid var(--line);
}
.acc-tab {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
min-width: 0; padding: 2px 0;
color: var(--ink2); text-decoration: none;
font: 500 11.5px/1.1 var(--font-display);
-webkit-tap-highlight-color: transparent;
border-radius: var(--radius-sm);
}
.acc-tab-ic { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--pill); transition: background-color var(--dur) var(--ease); }
.acc-tab-ic .material-symbols-rounded { font-size: 23px; }
.acc-tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-tab[aria-current="page"] { color: var(--ink); }
.acc-tab[aria-current="page"] .acc-tab-ic { background: var(--accent-tint-strong); color: var(--accent-ink); }
.acc-tab[aria-current="page"] .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.acc-main { padding: 12px 16px 40px; }
.acc-head { margin-bottom: 20px; }
.acc-title { font-size: 28px; }
.acc-sub { font-size: 15.5px; }
}
@media (max-width: 380px) {
.acc-tab-ic { width: 48px; }
.acc-tab { font-size: 10.5px; }
}
/* ---- cards & layout ---- */
.acc-grid { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.acc-span-12 { grid-column: span 12; }
.acc-span-8 { grid-column: span 8; }
.acc-span-7 { grid-column: span 7; }
.acc-span-6 { grid-column: span 6; }
.acc-span-5 { grid-column: span 5; }
.acc-span-4 { grid-column: span 4; }
.acc-span-3 { grid-column: span 3; }
@media (max-width: 1180px) {
.acc-span-3 { grid-column: span 6; }
}
@media (max-width: 1080px) {
.acc-span-8, .acc-span-7, .acc-span-6, .acc-span-5, .acc-span-4 { grid-column: span 12; }
}
@media (max-width: 560px) {
.acc-grid { gap: 14px; }
.acc-span-3 { grid-column: span 6; }
}
.acc-stack { display: flex; flex-direction: column; gap: 18px; }
.acc-card, .acc-group {
scroll-margin-top: 24px;
}
@media (max-width: 899.98px) { .acc-card, .acc-group { scroll-margin-top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px); } }
.acc-card {
position: relative;
min-width: 0;
padding: 22px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--e1);
}
@media (max-width: 560px) { .acc-card { padding: 18px 16px; } }
.acc-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.acc-card-ic {
display: grid; place-items: center; flex: none;
width: 42px; height: 42px; border-radius: 13px;
background: var(--accent-tint); color: var(--accent-ink);
}
.acc-card-ic .material-symbols-rounded { font-size: 23px; }
.acc-card-ic.is-ok { background: var(--ok-tint); color: var(--ok-ink); }
.acc-card-ic.is-warn { background: var(--warn-tint); color: var(--warn-ink); }
.acc-card-ic.is-err { background: var(--danger-tint); color: var(--danger-ink); }
.acc-card-titles { flex: 1; min-width: 0; }
.acc-card-title { font-size: 19px; font-weight: 500; }
.acc-card-sub { margin-top: 3px; color: var(--ink2); font-size: 14.5px; }
.acc-card-aside { margin-left: auto; flex: none; display: flex; gap: 8px; align-items: center; }
.acc-card-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.acc-card-text { color: var(--ink2); font-size: 15px; }
.acc-card-text + .acc-card-text { margin-top: 8px; }
.acc-card.is-stale > :not(.acc-card-head) { opacity: .55; transition: opacity var(--dur) var(--ease); }
/* A slot being refreshed keeps its old content, dimmed, until the new answer lands. */
.is-stale[aria-busy="true"] { opacity: .55; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.acc-card.is-danger-zone { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.acc-link { display: inline-flex; align-items: center; gap: 4px; font: 500 14.5px/1.2 var(--font-display); color: var(--accent-ink); text-decoration: none; padding: 8px 0; min-height: 40px; }
.acc-link:hover { text-decoration: underline; }
.acc-link .material-symbols-rounded { font-size: 18px; }
/* ---- skeletons, empty, error ---- */
.acc-skel { display: flex; flex-direction: column; gap: 12px; }
.acc-skel-line, .acc-skel-block {
border-radius: 10px;
background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 50%, var(--skel-a) 100%);
background-size: 200% 100%;
animation: skel 1.4s ease-in-out infinite;
}
.acc-skel-line { height: 14px; }
.acc-skel-line.is-lg { height: 26px; width: 55%; }
.acc-skel-line.is-sm { width: 40%; }
.acc-skel-block { height: 120px; border-radius: 14px; }
.acc-skel-row { display: flex; gap: 12px; align-items: center; }
.acc-skel-dot { width: 44px; height: 44px; border-radius: 13px; flex: none; background: var(--skel-a); }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.acc-empty {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
padding: 28px 16px;
color: var(--ink2);
}
.acc-empty-ic {
display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
background: var(--panel2); color: var(--ink2); margin-bottom: 4px;
}
.acc-empty-ic .material-symbols-rounded { font-size: 28px; }
.acc-empty-title { font: 500 17px/1.3 var(--font-display); color: var(--ink); }
.acc-empty-text { font-size: 14.5px; max-width: 44ch; }
.acc-empty .btn { margin-top: 8px; }
.acc-empty.is-err .acc-empty-ic { background: var(--danger-tint); color: var(--danger-ink); }
.acc-inline-err { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acc-inline-err .btn { margin-left: auto; }
/* ---- avatar ---- */
.acc-av {
display: inline-grid; place-items: center; flex: none;
width: var(--av, 40px); height: var(--av, 40px); border-radius: 50%;
background: linear-gradient(135deg, hsl(var(--a1, 245) 55% 42%), hsl(calc(var(--a1, 245) + 40) 60% 30%));
color: #fff;
font: 700 calc(var(--av, 40px) * .38)/1 var(--font-display);
letter-spacing: .02em;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -8px 16px -8px rgba(0, 0, 0, .25);
user-select: none;
}
@supports (color: oklch(0.5 0.1 10)) {
/* same gradient as the console's .avatar, so a person keeps one colour */
.acc-av { background: linear-gradient(135deg, oklch(.56 .15 var(--a1, 245)), oklch(.44 .16 calc(var(--a1, 245) + 40))); }
}
/* ---- app tile (the coloured rounded square with the app's icon) ---- */
.acc-tile {
display: grid; place-items: center; flex: none;
width: var(--tile, 44px); height: var(--tile, 44px);
border-radius: calc(var(--tile, 44px) * .3);
background: var(--app-grad, var(--app)); color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .12);
}
.acc-tile .material-symbols-rounded { font-size: calc(var(--tile, 44px) * .56); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); }
/* ---- Home ---- */
.acc-hello { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.acc-hello .acc-title { font-size: 36px; }
.acc-hello-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 560px) {
.acc-hello { gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.acc-hello .acc-title { font-size: 27px; }
/* the top bar already carries the avatar on phones; twice is clutter */
.acc-hello > .acc-av { display: none; }
/* a card's link ("See all") drops under its title rather than squeezing the
subtitle into a one-word column */
.acc-card-head { flex-wrap: wrap; row-gap: 4px; }
.acc-card-titles { flex: 1 1 180px; }
.acc-card-aside { margin-left: 56px; }
}
.acc-launch { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.acc-launch-tile {
position: relative;
display: flex; flex-direction: column; gap: 12px;
min-height: 132px; padding: 16px;
border-radius: 16px;
background: var(--app-tint); color: var(--app-ink);
text-decoration: none;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.acc-launch-tile:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.acc-launch-name { font: 500 16px/1.25 var(--font-display); color: var(--ink); }
.acc-launch-snip { font-size: 13.5px; line-height: 1.35; color: var(--app-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acc-launch-go { position: absolute; top: 14px; right: 14px; color: var(--app-ink); opacity: .55; transition: opacity var(--dur) var(--ease); }
.acc-launch-go .material-symbols-rounded { font-size: 20px; }
.acc-launch-tile:hover .acc-launch-go { opacity: 1; }
@media (max-width: 560px) {
.acc-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acc-launch-tile { min-height: 120px; padding: 14px; }
}
.acc-check { display: flex; gap: 20px; align-items: center; margin-bottom: 6px; }
.acc-check-score { font: 500 15px/1.4 var(--font-display); }
.acc-check-score strong { display: block; font-size: 22px; font-weight: 500; }
.acc-check-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.acc-check-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.acc-check-item:first-child { border-top: 0; }
.acc-check-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.acc-check-mark .material-symbols-rounded { font-size: 19px; }
.acc-check-item.is-ok .acc-check-mark { background: var(--ok-tint); color: var(--ok-ink); }
.acc-check-item.is-todo .acc-check-mark { background: var(--warn-tint); color: var(--warn-ink); }
.acc-check-item.is-unknown .acc-check-mark { background: var(--panel2); color: var(--ink2); }
.acc-check-txt { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.acc-check-txt strong { display: block; font: 500 15px/1.3 var(--font-display); }
.acc-check-txt span { color: var(--ink2); }
.acc-check-act { display: block; margin-top: 8px; }
.acc-check-act .btn { min-height: 36px; }
.acc-fav { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: var(--app-tint); }
.acc-fav-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-fav-lbl { font-size: 12.5px; color: var(--app-ink); }
.acc-fav-txt strong { font: 500 16px/1.25 var(--font-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-fav-val { font: 500 15px/1.2 var(--font-display); color: var(--app-ink); white-space: nowrap; }
.acc-kpis { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 14px; }
.acc-kpi-num { font: 500 30px/1.1 var(--font-display); letter-spacing: -0.01em; }
.acc-kpi-lbl { font-size: 13.5px; color: var(--ink2); margin-top: 2px; }
.acc-highlights { display: flex; flex-direction: column; gap: 4px; }
.acc-hl {
display: flex; align-items: center; gap: 14px;
padding: 10px 10px; margin: 0 -10px;
border-radius: var(--radius-sm);
color: var(--ink); text-decoration: none;
}
.acc-hl:hover { background: var(--panel2); }
.acc-hl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acc-hl-name { font: 500 15px/1.3 var(--font-display); }
.acc-hl-line { display: block; font-size: 13.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-hl-val { font: 500 20px/1 var(--font-display); color: var(--app-ink); text-align: right; }
/* ---- charts (hand-built SVG; each carries its own sr-only table) ---- */
.acc-chart { position: relative; }
.acc-chart svg { width: 100%; overflow: visible; }
.acc-chart-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--ink3); }
.acc-chart-readout { display: flex; align-items: baseline; gap: 10px; min-height: 26px; margin-bottom: 8px; font-size: 14px; color: var(--ink2); }
.acc-chart-readout strong { font: 500 18px/1.2 var(--font-display); color: var(--ink); }
.acc-chart-plot { position: relative; border-radius: 10px; }
.acc-chart-plot:focus-visible { outline-offset: 4px; }
.acc-bar { fill: var(--accent); transition: fill var(--dur) var(--ease); }
.acc-bar.is-zero { fill: var(--line); }
.acc-bar.is-sel { fill: var(--accent-hover); }
.acc-bars-dim .acc-bar:not(.is-sel) { opacity: .45; }
.acc-grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.acc-area { fill: var(--accent-tint-strong); }
.acc-area-line { fill: none; stroke: var(--accent); stroke-width: 2.25; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.acc-ring-track { stroke: var(--panel2); }
.acc-ring-val { stroke: var(--accent); transition: stroke-dashoffset 700ms var(--ease); }
.acc-ring-txt { font: 500 22px/1 var(--font-display); fill: var(--ink); }
.acc-ring-sub { font: 400 11px/1 var(--font-body); fill: var(--ink2); }
.acc-ring.is-ok .acc-ring-val { stroke: var(--ok); }
.acc-ring.is-warn .acc-ring-val { stroke: var(--warn); }
.hue .acc-ring-val { stroke: var(--app); }
.acc-hbars { display: flex; flex-direction: column; gap: 12px; }
.acc-hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.acc-hbar-lbl { font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-hbar-val { font: 500 13.5px/1.2 var(--font-display); color: var(--ink2); white-space: nowrap; }
.acc-hbar-track { grid-column: 1 / -1; height: 8px; border-radius: var(--pill); background: var(--panel2); overflow: hidden; }
.acc-hbar-fill { height: 100%; border-radius: inherit; background: var(--app, var(--accent)); min-width: 2px; transform-origin: left; }
.acc-apptime { display: flex; flex-direction: column; gap: 4px; }
.acc-apptime-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.acc-apptime-row:first-child { border-top: 0; }
.acc-apptime-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.acc-apptime-name { font: 500 15px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-apptime-meta { font-size: 13px; color: var(--ink2); }
.acc-apptime-val { text-align: right; font: 500 15px/1.2 var(--font-display); white-space: nowrap; }
.acc-apptime-val small { display: block; font: 400 12.5px/1.3 var(--font-body); color: var(--ink2); }
.acc-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 120px; }
.acc-hour { background: var(--accent); border-radius: 4px 4px 2px 2px; min-height: 3px; opacity: .85; }
.acc-hour.is-zero { background: var(--line); opacity: 1; }
.acc-hour.is-peak { opacity: 1; background: var(--accent-hover); }
.acc-hours-axis { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; font-size: 12.5px; color: var(--ink3); }
.acc-devices { display: flex; flex-direction: column; gap: 14px; }
.acc-device { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.acc-device-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel2); color: var(--ink2); grid-row: span 2; }
.acc-device-name { font: 500 15px/1.2 var(--font-display); }
.acc-device-pct { font-size: 13.5px; color: var(--ink2); }
.acc-device .acc-hbar-track { grid-column: 2 / -1; }
/* ---- segmented range picker ---- */
.acc-range { background: var(--panel); border: 1px solid var(--line); }
/* ---- stats tiles (Activity KPIs) ---- */
.acc-tiles { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
@media (max-width: 1080px) { .acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-tile-kpi { padding: 18px 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--e1); min-width: 0; }
.acc-tile-kpi .material-symbols-rounded { color: var(--accent-ink); margin-bottom: 10px; }
.acc-tile-kpi .acc-kpi-num { font-size: 30px; }
.acc-tile-kpi:first-child { background: linear-gradient(135deg, var(--accent-tint), var(--panel) 80%); }
@media (max-width: 560px) {
.acc-tile-kpi { padding: 14px 16px; }
.acc-tile-kpi .acc-kpi-num { font-size: 24px; }
}
/* ---- Apps: search + groups + cards ---- */
.acc-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.acc-search { position: relative; flex: 1 1 280px; max-width: 460px; }
.acc-search .material-symbols-rounded { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink3); pointer-events: none; }
.acc-search .input { padding-left: 48px; border-radius: var(--pill); min-height: 50px; }
.acc-group { margin-top: 30px; }
.acc-group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.acc-group-title { font-size: 22px; font-weight: 500; }
.acc-group-count { color: var(--ink3); font-size: 14px; }
.acc-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
@media (max-width: 560px) { .acc-cards { grid-template-columns: minmax(0, 1fr); } }
.acc-app { padding: 0; overflow: hidden; }
.acc-app-head {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: var(--app-tint);
border-bottom: 1px solid color-mix(in srgb, var(--app) 18%, transparent);
}
.acc-app-titles { flex: 1; min-width: 0; }
.acc-app-name { font-size: 18px; font-weight: 500; color: var(--ink); }
.acc-app-when { font-size: 13px; color: var(--app-ink); margin-top: 2px; }
.acc-app-open { --btn-bg: var(--panel); --btn-ink: var(--app-ink); --btn-line: transparent; box-shadow: var(--e1); }
.acc-app-open:hover { --btn-bg: var(--panel); box-shadow: var(--e2); }
.acc-app-body { padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.acc-app-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.acc-app-headline strong { font: 500 38px/1 var(--font-display); color: var(--app-ink); letter-spacing: -0.02em; }
.acc-app-headline span { color: var(--ink2); font-size: 15px; }
.acc-progress { display: flex; flex-direction: column; gap: 6px; }
.acc-progress-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink2); }
.acc-progress-top strong { font: 500 14px/1.2 var(--font-display); color: var(--ink); }
.acc-progress-track { height: 10px; border-radius: var(--pill); background: var(--panel2); overflow: hidden; }
.acc-progress-fill { height: 100%; border-radius: inherit; background: var(--app, var(--accent)); min-width: 3px; }
.acc-streak {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
padding: 6px 12px 6px 8px; border-radius: var(--pill);
background: var(--warn-tint); color: var(--warn-ink);
font: 500 14px/1.2 var(--font-display);
}
.acc-streak .material-symbols-rounded { color: #e8590c; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.acc-streak.is-cold { background: var(--panel2); color: var(--ink2); }
.acc-streak.is-cold .material-symbols-rounded { color: var(--ink3); }
.acc-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px 16px; margin: 0; }
.acc-stat { min-width: 0; }
.acc-stat dt { font-size: 12.5px; color: var(--ink2); line-height: 1.3; }
.acc-stat dd { margin: 3px 0 0; font: 500 17px/1.25 var(--font-display); color: var(--ink); }
.acc-stat dd small { display: block; font: 400 12px/1.3 var(--font-body); color: var(--ink3); margin-top: 1px; }
.acc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acc-app .chip { background: var(--app-tint); color: var(--app-ink); }
.acc-more-btn { align-self: flex-start; }
.acc-more-btn .material-symbols-rounded { transition: transform var(--dur) var(--ease); }
.acc-more-btn[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
.acc-app-more { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.acc-sub-title { font: 500 14px/1.3 var(--font-display); color: var(--ink); margin-bottom: 10px; }
.acc-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.acc-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--panel2); }
.acc-item-title { font: 500 14.5px/1.3 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-item-sub { font-size: 12.5px; color: var(--ink2); grid-column: 1; }
.acc-item-badge { grid-row: 1; grid-column: 2; }
.acc-item .acc-progress-track { grid-column: 1 / -1; height: 6px; background: var(--panel); }
.acc-dist { display: flex; flex-direction: column; gap: 6px; }
.acc-dist-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.acc-dist-lbl { text-align: right; color: var(--ink2); font-family: var(--font-display); }
.acc-dist-bar { height: 22px; min-width: 26px; border-radius: 6px; background: var(--app-strong); color: #fff; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; font: 500 12.5px/1 var(--font-display); }
.acc-dist-bar.is-zero { background: var(--panel2); color: var(--ink2); }
.acc-cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; justify-content: start; }
.acc-cal-day { width: 13px; height: 13px; border-radius: 3px; background: var(--panel2); }
.acc-cal-day.l0 { background: color-mix(in srgb, var(--app) 30%, var(--panel2)); }
.acc-cal-day.l1 { background: color-mix(in srgb, var(--app) 70%, var(--panel2)); }
.acc-cal-day.l2 { background: var(--app); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 45%, transparent); }
.acc-cal-day.is-out { visibility: hidden; }
.acc-cal-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12.5px; color: var(--ink2); align-items: center; }
.acc-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.acc-cal-legend .acc-cal-day { display: inline-block; }
.acc-notes { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink2); }
.acc-notes li { display: flex; gap: 8px; }
.acc-notes .material-symbols-rounded { font-size: 17px; color: var(--ink3); }
/* compact tiles for apps with nothing to show yet */
.acc-minis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 16px; }
.acc-cards:empty + .acc-minis { margin-top: 0; }
@media (max-width: 560px) { .acc-minis { grid-template-columns: minmax(0, 1fr); } }
.acc-mini {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; border-radius: 16px;
border: 1px solid var(--line); background: var(--panel);
color: var(--ink); text-decoration: none;
min-width: 0;
transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acc-mini:hover { box-shadow: var(--e2); border-color: transparent; transform: translateY(-1px); }
.acc-mini-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-mini-name { font: 500 15.5px/1.25 var(--font-display); }
.acc-mini-line { font-size: 13.5px; color: var(--ink2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acc-mini .acc-launch-go { position: static; opacity: .6; color: var(--ink2); }
/* ---- Profile ---- */
.acc-idcard { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acc-idcard-txt { min-width: 0; flex: 1; }
.acc-idcard-name { font-size: 24px; font-weight: 500; }
.acc-idcard-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; color: var(--ink2); font-size: 14.5px; }
.acc-form-row { display: grid; gap: 0 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acc-form-row .field-label { white-space: nowrap; }
.acc-form-row .field-opt { font-size: 12.5px; }
@media (max-width: 720px) { .acc-form-row { grid-template-columns: minmax(0, 1fr); } }
.acc-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.acc-facts { display: flex; flex-direction: column; margin: 0; }
.acc-fact { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.acc-fact:first-child { border-top: 0; padding-top: 0; }
.acc-fact-ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--panel2); color: var(--ink2); }
.acc-fact dt { font-size: 13px; color: var(--ink2); }
.acc-fact dd { margin: 0; font: 500 16px/1.4 var(--font-display); color: var(--ink); min-width: 0; }
.acc-fact dd .chip { margin-left: 6px; vertical-align: 2px; }
.acc-fact-note { font: 400 13.5px/1.45 var(--font-body); color: var(--ink2); margin-top: 4px; }
.acc-quote {
position: relative; margin: 4px 0 0; padding: 14px 16px 14px 44px;
border-radius: 14px; background: var(--panel2);
font: 400 16px/1.5 var(--font-display); color: var(--ink);
}
.acc-quote::before { content: "\201C"; position: absolute; left: 14px; top: 2px; font: 500 40px/1 var(--font-display); color: var(--accent); }
.acc-bday { display: inline-flex; align-items: center; gap: 6px; }
/* ---- Security ---- */
.acc-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: -6px 0 6px; }
.acc-meter span { height: 6px; border-radius: var(--pill); background: var(--panel2); transition: background-color var(--dur) var(--ease); }
.acc-meter[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.acc-meter[data-score="2"] span:nth-child(-n+2) { background: var(--warn); }
.acc-meter[data-score="3"] span:nth-child(-n+3) { background: #2f9e62; }
.acc-meter[data-score="4"] span { background: var(--ok); }
.acc-meter-lbl { font-size: 13.5px; color: var(--ink2); margin-bottom: 14px; min-height: 20px; }
.acc-meter-lbl strong { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.acc-match { font-size: 13.5px; margin: -8px 0 14px; min-height: 20px; display: flex; align-items: center; gap: 6px; }
.acc-match.is-ok { color: var(--ok-ink); }
.acc-match.is-bad { color: var(--danger-ink); }
.acc-match .material-symbols-rounded { font-size: 18px; }
.acc-rows { list-style: none; margin: 0; padding: 0; }
.acc-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.acc-row:first-child { border-top: 0; }
.acc-row-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-ink); flex: none; }
.acc-row-main { flex: 1; min-width: 0; }
.acc-row-title { font: 500 16px/1.3 var(--font-display); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.acc-row-meta { font-size: 13.5px; color: var(--ink2); margin-top: 3px; }
.acc-row-actions { display: flex; gap: 4px; flex: none; }
@media (max-width: 480px) {
.acc-row { flex-wrap: wrap; }
.acc-row-actions { width: 100%; justify-content: flex-end; margin-top: -4px; }
}
.acc-timeline { list-style: none; margin: 0; padding: 0; }
.acc-tl-day { font: 500 12.5px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 16px 0 6px; }
.acc-tl-day:first-child { padding-top: 0; }
.acc-tl { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; align-items: start; position: relative; }
.acc-tl-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-tint); color: var(--ok-ink); grid-row: span 2; }
.acc-tl-ic .material-symbols-rounded { font-size: 19px; }
.acc-tl.is-fail .acc-tl-ic { background: var(--danger-tint); color: var(--danger-ink); }
.acc-tl.is-locked .acc-tl-ic { background: var(--warn-tint); color: var(--warn-ink); }
.acc-tl-what { font: 500 15px/1.3 var(--font-display); }
.acc-tl.is-fail .acc-tl-what { color: var(--danger-ink); }
.acc-tl-meta { font-size: 13.5px; color: var(--ink2); grid-column: 2; }
.acc-tl-when { font-size: 13px; color: var(--ink2); white-space: nowrap; text-align: right; }
.acc-tl-n { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--pill); background: var(--panel2); font: 500 12px/1.4 var(--font-display); color: var(--ink2); }
/* ---- Your data ---- */
.acc-kept { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acc-kept li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.acc-kept li:first-child { border-top: 0; padding-top: 0; }
.acc-kept .acc-fact-ic { grid-row: span 2; }
.acc-kept strong { font: 500 15.5px/1.35 var(--font-display); }
.acc-kept-txt { font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.acc-sees { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 4px; }
@media (max-width: 640px) { .acc-sees { grid-template-columns: 1fr; } }
.acc-sees > div { padding: 16px; border-radius: 14px; }
.acc-sees .is-can { background: var(--panel2); }
.acc-sees .is-cant { background: var(--ok-tint); color: var(--ok-ink); }
.acc-sees h3 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acc-sees ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; }
/* ---- dialog (native