/* ═══════════════════════════════════════════════════════ @file theme.css @description AIMEAT Unified Theme — single source of truth for all portal CSS variables (tokens), base styles, animations, and shared components. Defines the light theme in :root, a dark override in [data-theme="dark"], and a drift-alias layer so undefined-but-referenced vars resolve. @structure :root tokens, drift aliases, [data-theme="dark"] override, base/reset, animations, topnav, buttons, cards, badges, inputs, modal, toast, alert. @usage Loaded first in spa.html ; the theme is toggled by /js/theme.js which flips the data-theme attribute on . @version-history v1.28.0 — 2026-08-17 — The palette bridge: html[data-palette] maps aimeat-theme.css's --color-* tokens onto the shell's own, so the golden pill's palette picker finally changes what the apex looks like. Inert with no palette chosen (the default removes the attribute). v1.27.0 — 2026-08-09 — Header slims, footer arrives. `.topnav-me*` (the "Me" dropdown) is gone: Apps/Profile/Admin are plain links again, because the marketing links now leave the bar when a person signs in. New `.site-footer` carries what the header stopped carrying, inside .page-content so it costs no viewport height. v1.26.0 — 2026-08-08 — Copy control, one style: `.copied` joins `.btn-primary.success` (the green stamps for ~2s), `.btn-outline.copied`/`.btn-ghost.copied` give the quiet buttons the same confirmation, and `.btn-copy-inline` is the ONE copy modifier — the field/row case where a copy button must not stretch or wrap. Replaces 18 per-view copy-button classes. v1.24.0 — 2026-07-21 — App-shell scroll model: html/body no longer scroll (height:100%; overflow:hidden); #app is a full-viewport (100dvh) flex column with the topnav as a fixed-height row and .page-content as the sole overflow-y:auto scroll region. Removes the ~nav-height phantom overscroll and stops view content sliding under the (formerly sticky, now in-frame) header. Coupled offset fixes: .pf-sidebar/.adm-sidebar stick to top:0 of the region and cap at 100dvh−nav-height. v1.25.0 — 2026-07-28 — Header nav wraps instead of overflowing and its labels never break mid-phrase (.topnav-menu flex-wrap + > a white-space:nowrap). Adding Learn and EXCHANGE made two-word links split into "Try / it" on nodes that also run Companies/Members. v1.24.0 — 2026-07-28 — Live counters: add .stat-card-value.is-loading (quiet placeholder while the fetch is in flight — a hard 0 on a live counter reads as a dead node) and .stat-card-sub (second line under a counter, e.g. "2 online now"). Additive only. v1.23.1 — 2026-07-20 — Mobile: pin .notif-dropdown to fixed viewport insets under 560px (the 320px, right:0-anchored panel ran off the LEFT edge — the bell sits mid-right of the bar — and got clipped by body{overflow-x:hidden}); long notif titles/bodies wrap (overflow-wrap:anywhere). v1.23.0 — 2026-07-18 — Notification bell inline actions: split .notif-item into a clickable .notif-item-main + an actions row; add .notif-actions/.notif-action-btn/.notif-reply*/.notif-result. v1.22.0 — 2026-07-17 — UI-unification foundation: extend the spacing scale (--sp-5=20/--sp-6=24/ --sp-8=32/--sp-12=48) and add a font-size scale (--text-xs..--text-xl) so views stop hardcoding padding:24px / font-size:0.85rem inline; add .muted/.text-dim/.text-faint/.meta text utilities (there was no muted/meta utility class, so ~8 views invented .xx-muted and ~30 invented .xx-*-meta). Additive only — no existing rule changed, so appearance is preserved until views adopt them. v1.21.0 — 2026-07-06 — Toast variants + mobile width: add --toast-info-bg/--toast-warn-bg tokens + .toast-info/.toast-warn classes (call sites pass 'info'/'warning' kinds; they previously fell into the truthy-isError red path). .toast width fit-content → max-content: anchored at left:50%, fit-content shrink-to-fit capped the pill at 50vw (a skinny tower on phones); max-width min(92vw, 40rem) now rules. v1.20.0 — 2026-07-03 — Toast legibility: .toast max-width 420px → min(92vw, 40rem) (was hard-capped narrow on wide screens so longer messages wrapped into a tall skinny "tower"), plus line-height 1.45, centered text, overflow-wrap:anywhere (guards long GAIIs/URLs) and a --shadow-xl lift. One class fixes every toast pathway. Appearance of short toasts unchanged (still a compact pill via width:fit-content). v1.19.0 — 2026-06-10 — Controls get their own surface: new --control-bg/--control-border tokens (light: white + gray-300; dark: raised #262934 + #4A4E5A). .btn-outline/.btn-ghost drop background:transparent (they melted into the page as "framed text") and .input-field drops background:var(--bg) (fields were LITERALLY the page color) — all three now use the control tokens, buttons additionally get --shadow-sm so they read as pressable. v1.18.0 — 2026-06-02 — Component unification (#10 third toast pathway): tokenize the shared .toast color literals. Added a theme-invariant --toast-success-bg (green-500 #22C55E @ .95, the legacy toast green — deliberately NOT --success emerald, which would shift the hue), --toast-danger-bg (= --danger #EF4444 @ .95) and --toast-fg (white), same rationale as the badge palette. The base .toast and the .toast.error/.toast-error/.toast-success modifiers now reference these tokens instead of raw rgba()/#fff. Appearance-preserving: identical resolved values; solid saturated pills intentionally do not flip in dark mode. profile.js keeps its own showToast pathway (distinct .pf.toast-container wrapper + .toast.error markup) — left as a convergence candidate, NOT migrated, to avoid changing DOM/behavior. v1.17.0 — 2026-06-02 — Component unification (#26 recipient badge): add a theme-invariant --badge-*-bg palette (wildcard→danger, ghii→purple, organism→success, gaii→blue; domain #F97316 / node #6B7280 kept as own invariant swatches as they have no palette match) + --badge-fg white, so the profile .badge-* recipient classifier can drop its hardcoded hex (#8b5cf6/#f97316/#6b7280/#3b82f6) and dead light-only fallbacks (var(--success,#22c55e)/var(--danger,#ef4444)). Appearance-preserving: values resolve identically and these solid swatches intentionally do not flip in dark mode. v1.16.0 — 2026-06-02 — Component unification (#25 pill base): add a canonical token-only .pill shape primitive (inline-flex chip, --radius-full, compact padding, small bold text, pointer + opacity hover) — shape only, no colors; tints come from caller classes. Mirrors the shape the profile .vis-pill already used. The scoped .pf .vis-pill keeps its own shape declaration (the (0,2,0)-beats-bare-.pill specificity trap) but its radius was retokenized to the same --radius-full so the two stay in lockstep. v1.15.0 — 2026-06-02 — Component unification (#23 collapsible): add canonical .collapsible / .collapsible-header / .collapsible-chevron (chevron rotates 180° via .open) / .collapsible-body block, backing /components/Collapsible.js. All colors are theme tokens so it flips in dark mode. Establishes the canonical expand/collapse section for the hand-rolled toggles (.expand-btn + .pf-chevron, .scope-advanced-toggle, .pkv-entry-arrow); those bespoke toggles are left in place where their expanded markup is wired into view state. v1.14.0 — 2026-06-02 — Component unification (#24 search bar): add canonical .search-bar (flex row, gap, flex:1) + .search-bar-input (flex:1) shell, backing /components/SearchBar.js. The input reuses .input-field for all visuals, so the shell only owns layout. Consolidates the hand-rolled search inputs (.pkv-search / .cap-search-input / .pf-agd-search-input) and the profile .search-bar + .input-field combo; the profile-scoped .pf .search-bar (max-width) coexists. v1.13.0 — 2026-06-02 — Component unification (#21 key/value rows): add canonical .kv-row / .kv-label / .kv-value (flex space-between, muted label, emphasized value, --border-subtle divider, last-child no border; .kv-value.mono for monospace ids/amounts), backing /components/KeyValueRow.js. Extracted as the common look of the admin .adm-erow/.adm-hrow and profile .pf-agd-info-row families. Existing per-view classes left in place where their look differs. v1.12.0 — 2026-06-02 — Component unification (#13 tables): add canonical .data-table block (full-width collapsed table, uppercase muted header divided by --border, cells by --border-subtle, --bg-surface hover, .mono cell) + generic .scrollable wrapper, backing /components/DataTable.js. Extracted as the common look of .adm table + .pf .consent-table so both converge on tokens that flip in dark mode. v1.11.0 — 2026-06-02 — Component unification (#16 tags): add --accent-border token (translucent accent hairline, light rgba(232,86,74,0.2) / dark rgba(255,111,98,0.30)) so tag/badge clones (mk-tag, hb-tag) can replace their hardcoded rgba(232,86,74,0.2) borders and flip in dark mode. v1.10.0 — 2026-06-02 — Component unification (#17 pagination): add canonical .pagination (prev / "Page X / Y" / next, token-based) + .pagination-info + .load-more (centered load-more wrapper), backing /components/Pagination.js. Consolidates the .adm-mem-pagination shape and the centered load-more wrapper. The numbered .hb-pagination variant is intentionally left in place (different UI). v1.9.0 — 2026-06-02 — Component unification (#18 category cards): add canonical .category-card / -icon / -name / -count (token-based, anchor- and div-safe) so the marketplace .mk-category-* and hobbies .hb-category-* clones converge. Tokenized the formerly hardcoded hover colors (#E8564A → var(--accent); 0 2px 8px rgba(0,0,0,0.06) → var(--shadow-md)) — dark-mode fix. Per-view *-categories-grid wrappers kept (column density differs). v1.8.0 — 2026-06-02 — Component unification (#11 status dots): add canonical .status-dot base + semantic token modifiers (online/active/healthy/live → success; warn/degraded/syncing/pending → warn; error/offline/dead/down → danger; idle/inactive/detached/muted → text-muted), backing /components/StatusDot.js, so per-view dots (.peer-dot/.pn-status-dot/.ext-status-dot/.dv-dot/.live-dot) converge. Tokenized away hardcoded hex in the former .ext-status-dot (#4ade80/#9ca3af) so dots flip in dark mode. v1.7.0 — 2026-06-02 — Component unification (#15 headers): add canonical .section-title/.section-desc (in-page accent header, lifted generic from .pf) + .page-title/.page-subtitle (top-of-view gradient header), all token-based, so per-view title/subtitle clones (mk-/hb-/cl-welcome-/adm-page-title) can converge. v1.6.0 — 2026-06-02 — Component unification (#22): add .card-glass modifier (Card variant="glass") reproducing the former profile .pf-glass-card appearance, fully tokenized (--surface / --border), so profile's GlassCard folds into the canonical Card. v1.5.0 — 2026-06-02 — Component unification (#6 stat cards): add canonical .stat-card-value tone (.accent/.success/.danger) + .mono modifiers and a .stat-grid wrapper, so per-view stat clones (mk-stat/hb-stat/dv-stat/wl-stat/...) converge onto .stat-card without losing accent-tint / earned-spent / monospace semantics. v1.4.0 — 2026-06-02 — Component unification (#5 inputs): add canonical textarea.input-field (resize/min-height) + select.input-field (cursor) so .input-field works on all field types and views can drop per-view form-input/textarea/select clones (mk-form/hb-form/...). v1.3.0 — 2026-06-02 — Component unification (#4): make canonical .btn-* anchor-safe (text-decoration:none) so views can drop their per-view -button clones (mk-btn/hb-btn/...) and use the canonical classes. v1.2.0 — 2026-06-02 — Tokenize shell component literals (semantic tints, scrollbar, overlay scrim, morsel pill, lang-btn active, input focus) so the whole shell flips for dark mode. v1.1.0 — 2026-06-02 — Add dark theme override + drift-alias layer + .theme-toggle-btn. v1.0.0 — prior — Light theme tokens, base styles, shared components. ═══════════════════════════════════════════════════════ */ /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Root Variables ── */ :root { /* Background */ --bg: #FAFAF8; --bg-surface: #F3F4F6; --bg-card: #FFFFFF; --bg-elevated: #FFFFFF; /* Cards & Surfaces */ --card-bg: #FFFFFF; --card-bg-hover: #FFFFFF; --card-bg-solid: #FFFFFF; --card-bg-alt: #F3F4F6; --card-border: #E5E7EB; /* Accent (coral heart) */ --accent: #E8564A; --accent-bright: #FF6B6B; --accent-deep: #E8564A; --accent-glow: rgba(232, 86, 74, 0.3); --accent-subtle: rgba(232, 86, 74, 0.06); --accent-border: rgba(232, 86, 74, 0.2); /* translucent accent hairline for tag/badge edges */ /* Love palette (profile gradients — now coral-based) */ --love1: #E8564A; --love2: #FF6B6B; --love3: #FF8A80; --love4: #FF6B6B; --love5: #E8564A; /* Text */ --text: #1A1A2E; --text-bright: #1A1A2E; --text-dim: #6B7280; --text-muted: #9CA3AF; /* Semantic colors */ --success: #10B981; --warn: #F59E0B; --danger: #EF4444; --purple: #8B5CF6; /* Accent palette */ --blue: #3B82F6; --mint: #34D399; --teal: #06B6D4; --pink: #F472B6; --orange: #FB923C; --yellow: #FBBF24; /* Recipient badge palette (profile permission-recipient classifier: wildcard/ghii/organism/domain/node/gaii). Theme-INVARIANT on purpose — these are saturated solid swatches carrying white text in both themes, so they are defined only here and NOT re-overridden in [data-theme="dark"]. Four map onto existing palette tokens (identical values); domain/node have no palette match and are kept as their own invariant swatches rather than borrowed from --orange/--text-dim (which differ / flip in dark). */ --badge-wildcard-bg: var(--danger); /* #EF4444 */ --badge-ghii-bg: var(--purple); /* #8B5CF6 */ --badge-organism-bg: var(--success); /* #10B981 */ --badge-domain-bg: #F97316; /* no palette match (≠ --orange #FB923C) */ --badge-node-bg: #6B7280; /* invariant gray (≠ --text-dim, which flips dark) */ --badge-gaii-bg: var(--blue); /* #3B82F6 */ --badge-fg: #FFFFFF; /* white text on every saturated swatch */ /* Toast palette (floating notification pill). Theme-INVARIANT on purpose, same rationale as the badge palette above: saturated solid fills carrying white text read correctly on any background in both themes, so they are defined only here and NOT re-overridden in [data-theme="dark"]. NOTE: --toast-success-bg is green-500 (#22C55E), the legacy toast green — it is deliberately NOT --success (emerald #10B981); swapping would shift the hue. --toast-danger-bg equals --danger at the legacy 0.95 alpha. */ --toast-success-bg: rgba(34, 197, 94, 0.95); --toast-danger-bg: rgba(239, 68, 68, 0.95); /* = --danger #EF4444 @ .95 */ --toast-info-bg: rgba(59, 130, 246, 0.95); /* = --blue #3B82F6 @ .95 */ --toast-warn-bg: rgba(245, 158, 11, 0.95); /* amber-500; pairs with dark fg */ --toast-fg: #FFFFFF; --toast-warn-fg: #1A1A2E; /* white fails contrast on amber */ /* Borders */ --border: #E5E7EB; --border-subtle: #F3F4F6; --border-focus: #E8564A; /* Radii */ --radius: 16px; --radius-sm: 10px; --radius-xs: 6px; --radius-xl: 20px; --radius-full: 9999px; /* Typography */ --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; /* Layout */ --nav-height: 56px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08); --shadow-xl: 0 16px 48px rgba(0,0,0,0.12); --shadow-heart: 0 4px 14px rgba(232,86,74,0.3); /* Input */ --bg-input: var(--bg); --bg-input-focus: #FFFFFF; /* Controls (outline/ghost buttons, input fields) — a surface DISTINCT from both the page bg and white cards: white fill + a clearly visible border, so controls read as controls instead of "framed text" that melts into the background. */ --control-bg: #FFFFFF; --control-border: #D1D5DB; /* Code */ --code-bg: #F3F4F6; /* Semantic tints (chip/banner backgrounds + readable text/border on them). The accent semantic colors (--success/--warn/--danger/--info) keep their meaning across themes; only these tint surfaces flip. */ --success-bg: #D1FAE5; --success-fg: #047857; --success-border: #A7F3D0; --warn-bg: #FEF3C7; --warn-fg: #B45309; --warn-border: #FDE68A; --danger-bg: #FEE2E2; --danger-fg: #DC2626; --danger-border: #FECACA; --info-bg: #EFF6FF; --info-fg: #1D4ED8; --info-border: #BFDBFE; --purple-bg: #F5F3FF; --purple-fg: #6D28D9; --purple-border: #DDD6FE; /* Shell surfaces */ --scrollbar-thumb: #D1D5DB; --overlay-scrim: rgba(26, 26, 46, 0.4); --morsel-bg: linear-gradient(135deg, #FFF1F0, #FFE0DE); /* Decorative view gradients (theme-aware) */ --pf-hero-gradient: linear-gradient(135deg, #FAFAF8 0%, #FFF1F0 40%, #EFF6FF 100%); --pf-cta-gradient: linear-gradient(135deg, #FFF1F0, #EFF6FF); --pf-callout-gradient: linear-gradient(135deg, #EEF0FF, #F8F0FF); /* ── Drift-alias layer ── Variables referenced across view CSS but never defined (rendered with no fallback = broken). Defined here as aliases of the canonical tokens above, so they (a) work now and (b) inherit the dark override automatically — no entry needed in [data-theme="dark"]. The --sp-* scale is theme-invariant. */ --card: var(--bg-card); --surface: var(--bg-surface); --bg-dim: var(--bg-surface); --bg-hover: var(--card-bg-hover); --muted: var(--text-dim); --error: var(--danger); --warning: var(--warn); --primary: var(--accent); --accent-faint: var(--accent-subtle); --accent-soft: var(--accent-subtle); /* highlight/hover surfaces (was #FFF0EE) */ --accent-dark: var(--accent-deep); /* darker coral for button gradients/hovers */ --border-soft: var(--border); /* was #f0f0ec */ --bg2: var(--bg-surface); /* secondary panel bg (was #f5f5f5) */ --surface-hover: var(--bg-surface); /* hover surface (had a stale dark #252540 fallback) */ --on-inverted: var(--bg); /* readable text on a var(--text) background — inverts opposite to --text */ --mono: var(--font-mono); --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* ── Font-size scale (theme-invariant) ── A shared type scale so views stop hardcoding font-size:0.7rem / 0.85rem / 1.1rem inline. Adopt in new code; the raw rem values below are the common ones already scattered across the view CSS, so migration is a clean swap. */ --text-xs: 0.72rem; --text-sm: 0.82rem; --text-base: 0.92rem; --text-lg: 1.1rem; --text-xl: 1.35rem; } /* ── Dark Theme Override ── Redefines only the color/depth variables that must flip for dark mode. Brand identity (coral accent) preserved; accents brightened for dark contrast. Text tiers verified WCAG-AA on both --bg and --bg-card. Aliases above point at these tokens, so they invert automatically. */ [data-theme="dark"] { /* Background */ --bg: #14151A; --bg-surface: #23262F; --bg-card: #1C1E26; --bg-elevated: #23262F; /* Cards & Surfaces */ --card-bg: #1C1E26; --card-bg-hover: #23262F; --card-bg-solid: #1C1E26; --card-bg-alt: #23262F; --card-border: #33363F; /* Accent (coral heart — brightened for dark contrast, brand stays coral) */ --accent: #FF6F62; --accent-bright: #FF7A6E; --accent-deep: #E8564A; --accent-glow: rgba(255, 111, 98, 0.35); --accent-subtle: rgba(255, 111, 98, 0.10); --accent-border: rgba(255, 111, 98, 0.30); /* translucent accent hairline for tag/badge edges */ /* Text */ --text: #EDEEF2; --text-bright: #FFFFFF; --text-dim: #A4A9B6; --text-muted: #868C9B; /* Borders */ --border: #33363F; --border-subtle: #26282F; --border-focus: #FF6F62; /* Shadows (deeper/more opaque so elevation reads on dark surfaces) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.50); --shadow-lg: 0 8px 24px rgba(0,0,0,0.55); --shadow-xl: 0 16px 48px rgba(0,0,0,0.65); --shadow-heart: 0 4px 14px rgba(255,111,98,0.40); /* Input */ --bg-input: #1C1E26; --bg-input-focus: #23262F; /* Controls — slightly lighter than the card surface so they read as raised, with a visible border */ --control-bg: #262934; --control-border: #4A4E5A; /* Code */ --code-bg: #0E0F13; /* Semantic tints (translucent so they read as native dark surfaces) */ --success-bg: rgba(16, 185, 129, 0.16); --success-fg: #6EE7B7; --success-border: rgba(16, 185, 129, 0.32); --warn-bg: rgba(245, 158, 11, 0.16); --warn-fg: #FCD34D; --warn-border: rgba(245, 158, 11, 0.32); --danger-bg: rgba(239, 68, 68, 0.16); --danger-fg: #FCA5A5; --danger-border: rgba(239, 68, 68, 0.34); --info-bg: rgba(59, 130, 246, 0.16); --info-fg: #93C5FD; --info-border: rgba(59, 130, 246, 0.32); --purple-bg: rgba(139, 92, 246, 0.18); --purple-fg: #C4B5FD; --purple-border: rgba(139, 92, 246, 0.34); /* Shell surfaces */ --scrollbar-thumb: #3A3D47; --overlay-scrim: rgba(0, 0, 0, 0.6); --morsel-bg: rgba(255, 111, 98, 0.16); /* Decorative view gradients — subtle dark tints matching the light intent */ --pf-hero-gradient: linear-gradient(135deg, #16151A 0%, #201820 45%, #15191F 100%); --pf-cta-gradient: linear-gradient(135deg, #231A1E, #1A1F28); --pf-callout-gradient: linear-gradient(135deg, #1C1A29, #221A29); } /* ── PALETTE BRIDGE — the golden pill's palette picker, finally wired to this shell ── The pill sets `data-palette` on and /lib/aimeat-theme.css defines each palette's --color-* tokens (light and dark per palette, contrast-audited there). Until this block existed, NOTHING on the apex read those tokens: picking Paper or Circuit wrote an attribute no rule reacted to, and the person watched nothing happen. spa.html now loads /lib/aimeat-theme.css BEFORE this file, and this block maps the shell's own vocabulary onto the palette's — so every view built on these tokens follows the choice without knowing palettes exist. Selector is `html[data-palette]`: the default 'aimeat' palette REMOVES the attribute (auth/palette.js), so with no palette chosen this block is inert and the shell renders byte-identically to before. Dark mode needs nothing here — aimeat-theme.css flips the --color-* values under html[data-palette][data-theme='dark'], and these are references. Two deliberate boundaries. --border is re-declared because aimeat-theme.css uses that name for a WIDTH (1px) while this shell uses it for a color — this file loads later, so the color wins. And the semantic family (success/warn/danger and their tint triplets) is NOT bridged: danger stays the same red in every palette, because a warning that changes hue with the wallpaper is a warning that trained people to look twice. */ html[data-palette] { /* Background tiers: base-100 is the page, base-200 the card (aimeat-theme's convention). */ --bg: var(--color-base-100); --bg-surface: color-mix(in srgb, var(--color-base-300) 26%, var(--color-base-100)); --bg-card: var(--color-base-200); --bg-elevated: var(--color-base-200); --card-bg: var(--color-base-200); --card-bg-hover: color-mix(in srgb, var(--color-base-300) 12%, var(--color-base-200)); --card-bg-solid: var(--color-base-200); --card-bg-alt: color-mix(in srgb, var(--color-base-300) 26%, var(--color-base-100)); --card-border: color-mix(in srgb, var(--color-base-content) 14%, transparent); /* Accent: --color-primary is what each palette's swatch advertises as its accent. */ --accent: var(--color-primary); --accent-bright: color-mix(in srgb, var(--color-primary) 82%, var(--color-base-200)); --accent-deep: color-mix(in srgb, var(--color-primary) 86%, var(--color-base-content)); --accent-glow: color-mix(in srgb, var(--color-primary) 30%, transparent); --accent-subtle: color-mix(in srgb, var(--color-primary) 7%, transparent); --accent-border: color-mix(in srgb, var(--color-primary) 24%, transparent); /* The love gradient follows the palette's primary/secondary pair. */ --love1: var(--color-primary); --love2: color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary)); --love3: var(--color-secondary); --love4: color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary)); --love5: var(--color-primary); /* Text tiers, mixed toward the page so dimming works on any base. */ --text: var(--color-base-content); --text-bright: var(--color-base-content); --text-dim: color-mix(in srgb, var(--color-base-content) 64%, var(--color-base-100)); --text-muted: color-mix(in srgb, var(--color-base-content) 46%, var(--color-base-100)); /* Borders as translucent content, so they sit on any surface. */ --border: color-mix(in srgb, var(--color-base-content) 15%, transparent); --border-subtle: color-mix(in srgb, var(--color-base-content) 8%, transparent); --border-focus: var(--color-primary); /* Inputs and controls. */ --bg-input: var(--color-base-100); --bg-input-focus: var(--color-base-200); --control-bg: var(--color-base-200); --control-border: color-mix(in srgb, var(--color-base-content) 24%, transparent); --code-bg: color-mix(in srgb, var(--color-base-300) 30%, var(--color-base-100)); --scrollbar-thumb: color-mix(in srgb, var(--color-base-content) 25%, transparent); --morsel-bg: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-base-200)), color-mix(in srgb, var(--color-primary) 20%, var(--color-base-200))); /* Decorative gradients, from the same pair the love palette uses. */ --pf-hero-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-base-100)) 0%, color-mix(in srgb, var(--color-secondary) 10%, var(--color-base-100)) 100%); --pf-cta-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-base-200)), color-mix(in srgb, var(--color-secondary) 10%, var(--color-base-200))); --pf-callout-gradient: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 10%, var(--color-base-200)), color-mix(in srgb, var(--color-primary) 10%, var(--color-base-200))); } /* --border needs one more rung. Each palette's DARK block in aimeat-theme.css re-declares it as a width at html[data-palette][data-theme='dark'] specificity (0,2,1), which outranks the bridge above (0,1,1) — measured: every dark palette resolved --border to "1px" and every hairline in the shell vanished. This matches that specificity, and being in the later file, wins the tie. */ html[data-palette][data-theme] { --border: color-mix(in srgb, var(--color-base-content) 15%, transparent); } /* ── Base ── */ html { scroll-behavior: smooth; height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; height: 100%; margin: 0; /* zero the UA default 8px — with the fixed app-shell frame it would push #app past the viewport */ /* App-shell: the page (html/body) never scrolls. The topnav is a fixed-height flex row and .page-content owns the ONLY scroll region (see #app + .page-content). This is what stops view content sliding under the header and removes the ~nav-height phantom overscroll that body-scroll + an in-flow (sticky) header produced — the content fills the space below the header and scrolls within it. overflow:hidden also subsumes the old overflow-x clip. */ overflow: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ── Animations ── */ @keyframes heartPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes twinkle { 0%, 100% { opacity: 0.05; transform: scale(0.8); } 50% { opacity: 0.6; transform: scale(1.1); } } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); } 50% { opacity: 0.4; box-shadow: 0 0 18px rgba(34, 197, 94, 0.9); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes btnGlow { 0%, 100% { box-shadow: 0 4px 12px rgba(232, 86, 74, 0.3); } 50% { box-shadow: 0 6px 20px rgba(232, 86, 74, 0.4); } } @keyframes expandGlow { 0%, 100% { box-shadow: 0 0 12px rgba(232, 86, 74, 0.08); } 50% { box-shadow: 0 0 24px rgba(232, 86, 74, 0.15); } } @keyframes worldOpen { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } @keyframes nebulaDrift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, -20px) scale(1.15); } } @keyframes auroraShift { 0% { transform: translateX(-20%) scaleY(1); } 100% { transform: translateX(-10%) scaleY(0.8); } } @keyframes spin { to { transform: rotate(360deg); } } /* ── Background layers ── */ .bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: var(--bg); } .bg-canvas .star { display: none; } /* Aurora waves — hidden in light theme */ .bg-aurora { display: none; } .aurora-wave { display: none; } /* ── App root — must sit above bg-canvas (z-index:0) so all non-positioned descendants form a stacking context that paints over the fixed background ── */ #app { position: relative; z-index: 1; /* App-shell frame: a full-viewport flex column — topnav (fixed height) on top, .page-content (the scroll region) filling the rest. dvh keeps the frame flush with the visual viewport as mobile browser chrome shows/hides. */ height: 100vh; height: 100dvh; display: flex; flex-direction: column; } /* ── Top Navigation ── */ .topnav { /* App-shell: a fixed-height flex row inside #app (no longer sticky — #app itself doesn't scroll, so the header stays put for free). z-index keeps the header's own dropdowns (notifications, mobile menu) above .page-content. */ position: relative; z-index: 100; flex: 0 0 auto; height: var(--nav-height); /* border-box so the 1px border-bottom is INCLUDED in --nav-height — otherwise the header renders 1px taller than the token and every `100dvh - var(--nav-height)` scroll region (sidebars) is 1px too tall and can't stay pinned. */ box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: var(--bg-card); border-bottom: 1px solid var(--border); } .topnav-brand { font-weight: 800; font-size: 1.125rem; color: var(--text); letter-spacing: 0.3px; display: flex; align-items: center; gap: 0; text-decoration: none; } .topnav-brand .brand-name { white-space: nowrap; } .brand-morsels { display: inline-flex; align-items: center; gap: 2px; padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid var(--accent-glow); background: var(--morsel-bg); color: var(--accent); font-size: 0.75rem; font-weight: 700; line-height: 1.2; } .brand-morsels::before { content: '\2665 '; color: var(--accent); } .topnav-brand .heart { color: var(--accent); font-style: normal; margin: 0 1px; font-size: 1rem; animation: none; filter: none; } .topnav-brand .brand-at { color: var(--accent); } .topnav-center { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-xs); overflow: hidden; padding: 0; } .topnav-right { display: flex; align-items: center; gap: 0.75rem; } /* Header notification bell + dropdown */ .notif-bell { position: relative; display: inline-flex; } .notif-bell-btn { position: relative; background: none; border: none; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 4px 6px; border-radius: 8px; } .notif-bell-btn:hover { background: var(--bg-dim); } .notif-badge { position: absolute; top: -1px; right: -1px; background: var(--accent); color: #fff; border-radius: 10px; font-size: 0.6rem; font-weight: 700; min-width: 15px; height: 15px; padding: 0 3px; display: flex; align-items: center; justify-content: center; } .notif-dropdown { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); z-index: 1200; } .notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; color: var(--text); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; background: var(--card); z-index: 1; } .notif-clear-all { font-weight: 600; font-size: 0.78rem; color: var(--muted); background: none; border: none; padding: 0.15rem 0.35rem; border-radius: 6px; cursor: pointer; } .notif-clear-all:hover:not(:disabled) { color: var(--brand); background: var(--bg-dim); } .notif-clear-all:disabled { opacity: 0.6; cursor: default; } .notif-empty { padding: 1rem 0.85rem; color: var(--muted); font-size: 0.85rem; } .notif-item { display: block; border-bottom: 1px solid var(--border-subtle); } .notif-item.unread { background: var(--accent-subtle); } .notif-item-main { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.55rem 0.85rem; cursor: pointer; } .notif-item-main:hover { background: var(--bg-dim); } .notif-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text); } .notif-item-body { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; } .notif-item-time { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; } /* Inline notification actions (reply / approve / deny …) */ .notif-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.85rem 0.55rem; } .notif-action-btn { font-size: 0.74rem; padding: 0.25rem 0.7rem; border-radius: 7px; line-height: 1.3; } .notif-reply { padding: 0 0.85rem 0.6rem; } .notif-reply-input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 0.8rem; padding: 0.4rem 0.5rem; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-dim); color: var(--text); } .notif-reply-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .notif-result { font-size: 0.76rem; padding: 0.3rem 0.85rem 0.55rem; } .notif-result.ok { color: var(--success, #4caf50); } .notif-result.err { color: var(--danger, #e0564a); } /* Long sender GHIIs / subjects wrap instead of forcing the panel wider than the screen. */ .notif-item-title, .notif-item-body { overflow-wrap: anywhere; } /* Mobile: the 320px-wide, right:0-anchored dropdown runs off the LEFT edge (the bell sits mid-right of the bar) and gets clipped by body{overflow-x:hidden}. Pin it to fixed viewport insets so it spans the screen width minus small margins, regardless of the bell's position. */ @media (max-width: 560px) { .notif-dropdown { position: fixed; top: calc(var(--nav-height, 56px) + 4px); right: 8px; left: 8px; width: auto; max-height: 72vh; } } .topnav-right a { font-size: 0.84rem; color: var(--text-dim); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-xs); transition: all 0.15s; font-weight: 500; border: none; } .topnav-right a:hover { color: var(--text); background: var(--bg-surface); } .topnav-right a.active { color: var(--accent); background: var(--accent-subtle); } .topnav-right .profile-link { display: none; color: var(--accent); background: var(--accent-subtle); } .topnav-right .profile-link.visible { display: inline-flex; } .header-auth-slot { display: inline-flex; align-items: center; } /* ── Header nav: desktop inline; mobile = hamburger + dropdown (see @media) ── */ /* .topnav is a FIXED-height row, so the menu must never wrap: a second row does not make the bar taller, it spills out below it. Links stay on one line (no "Try / it" splits) and the whole bar collapses to the hamburger the moment it stops fitting — see .topnav--compact. */ .topnav-menu { display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; justify-content: flex-end; } .topnav-menu > a { white-space: nowrap; } .topnav-burger { display: none; } /* Truncate a long GHII in the gold pill so it never blows out the bar (desktop). */ .aimeat-auth-ghii { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Collapse the header to a hamburger the moment the inline nav stops fitting. TWO triggers, one rule set: - the media query is the floor (narrow screens always collapse); - `.topnav--compact` is set by the header itself when it MEASURES an overflow. The measurement matters because how much the bar needs is not a function of screen width alone: signing in adds four links, a bell and a wide gold pill, and an operator adds Admin on top. A fixed pixel breakpoint cannot know that, which is how a 2000px window ended up with a nav hanging out below the bar. */ @media (max-width: 1180px) { .topnav { padding: 0 0.5rem; } .topnav-right { gap: 0.5rem; } /* Free up bar width so the gold pill never overflows — the morsel count is still shown in the profile dashboard. */ .brand-morsels { display: none !important; } } .topnav--compact { padding: 0 0.5rem; } .topnav--compact .topnav-right { gap: 0.5rem; } .topnav--compact .brand-morsels { display: none !important; } @media (max-width: 1180px) { .topnav-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; padding: 0; font-size: 1.2rem; line-height: 1; background: none; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer; } .topnav-menu { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18)); padding: 0.4rem; /* border-box so the padding + border count INSIDE the cap; content-box let the sheet stand 14px past the fold on a short screen. */ box-sizing: border-box; max-height: calc(100dvh - var(--nav-height)); overflow-y: auto; } .topnav-menu.open { display: flex; } .topnav-menu a { width: 100%; padding: 0.7rem 0.9rem; font-size: 0.95rem; border-radius: var(--radius-xs); } .topnav-menu .topnav-center { width: fit-content; margin: 0.45rem 0.6rem 0.2rem; } /* Compact gold pill: keep the green dot + Logout, drop the wordy label + GHII. */ .aimeat-auth-pill .aimeat-auth-label, .aimeat-auth-pill .aimeat-auth-ghii { display: none !important; } .aimeat-auth-pill { padding: 5px 11px !important; gap: 6px !important; } } .topnav--compact .topnav-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; padding: 0; font-size: 1.2rem; line-height: 1; background: none; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xs); cursor: pointer; } .topnav--compact .topnav-menu { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18)); padding: 0.4rem; box-sizing: border-box; max-height: calc(100dvh - var(--nav-height)); overflow-y: auto; } .topnav--compact .topnav-menu.open { display: flex; } .topnav--compact .topnav-menu a { width: 100%; padding: 0.7rem 0.9rem; font-size: 0.95rem; border-radius: var(--radius-xs); } .topnav--compact .topnav-menu .topnav-center { width: fit-content; margin: 0.45rem 0.6rem 0.2rem; } .topnav--compact .aimeat-auth-pill .aimeat-auth-label, .topnav--compact .aimeat-auth-pill .aimeat-auth-ghii { display: none !important; } .topnav--compact .aimeat-auth-pill { padding: 5px 11px !important; gap: 6px !important; } /* Room for the open-items count in the compact bar. Measured 2026-08-09 at 390px: brand 82 + right group 335 = 417 against a 390 viewport, i.e. the bar was already full and anything added overflowed by its own width. The theme switch is a preference you set once and it is reachable from the burger menu; the count is a number you need to see from wherever you are. So the switch is what gives way at this width, not the count. P7 rejected a header button on this measurement. P14 overruled it with "if the header does not fit, the header gets fixed". This is that fix, and it is four lines rather than a redesign. */ @media (max-width: 640px) { /* NOT scoped to .topnav--compact. That was the first attempt and it left a 33px overflow on every page whose bar is not compact — measured at 390 with the count visible, after the compact case had been measured clean and mistaken for the whole story. The media query is the scope; the class was redundant where it worked and wrong where it did not. */ .aimeat-auth-pill .aimeat-ctl { display: none !important; } } /* The "Me" dropdown (.topnav-me*) was removed on 2026-08-09. Apps, Profile and Admin are plain links in the bar again: the marketing links now leave when a person signs in (PUBLIC_NAV_LINKS `when` in spa.html), so the row has the width for them and nobody pays a click to reach their own profile. What the bar no longer carries lives in .site-footer below. */ /* ── Language Buttons ── */ .lang-btn { padding: 4px 10px; border-radius: 0; font-size: 0.75rem; font-weight: 600; text-decoration: none; color: var(--text-muted); transition: all 0.15s; cursor: pointer; background: transparent; border: none; font-family: var(--font); } .lang-btn.active { background: var(--text); color: var(--on-inverted); box-shadow: none; } .lang-btn:not(.active):hover { color: var(--text); background: var(--bg-surface); } /* ── Theme Toggle ── */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; padding: 0; border: none; border-right: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 0.95rem; line-height: 1; cursor: pointer; transition: all 0.15s; font-family: var(--font); } .theme-toggle-btn:hover { color: var(--accent); background: var(--bg-surface); } /* ── Buttons ── */ /* Button classes are anchor-safe: applied to they render as buttons, not underlined links (lets views use canonical .btn-* on link-buttons). */ .btn-primary, .btn-outline, .btn-ghost, .btn-danger, .btn-danger-solid, .btn-success, .btn-info { text-decoration: none; } .btn-primary { padding: 8px 20px; background: linear-gradient(135deg, #E8564A 0%, #FF6B6B 100%); color: #FFFFFF; border: none; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.2s; box-shadow: var(--shadow-heart); letter-spacing: 0; animation: none; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232, 86, 74, 0.35); } .btn-primary:active { transform: translateY(0); } /* `copied` is the confirmed state of (components/CopyButton.js), which stamps the class on the button for ~2s after a successful copy. It shares .success's green so the one copy control looks the same everywhere — .hlp-copy-btn.copied, .dv-copy-btn.copied and .stb-copy-btn.stb-copied each used to reimplement this in their own view stylesheet. */ .btn-primary.success, .btn-primary.copied { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); animation: none; } .btn-outline { padding: 0.65rem 1.5rem; background: var(--control-bg); border: 1px solid var(--control-border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.84rem; font-weight: 500; font-family: var(--font); cursor: pointer; transition: all 0.15s; letter-spacing: 0; box-shadow: var(--shadow-sm); animation: none; } .btn-outline:hover { border-color: var(--text-muted); color: var(--text); background: var(--control-bg); box-shadow: var(--shadow-sm); transform: none; } .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: var(--radius-xs); } .btn-success { padding: 0.65rem 1.5rem; background: linear-gradient(135deg, #10B981, #059669); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); } .btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3); } .btn-info { padding: 0.65rem 1.5rem; background: #3B82F6; color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); } .btn-info:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3); } .btn-danger { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.35rem; padding: 7px 16px; border-radius: var(--radius-sm); border: 1px solid var(--control-border); background: var(--control-bg); color: var(--text-dim); text-decoration: none; font-size: 0.81rem; font-weight: 500; transition: all 0.15s; } .btn-ghost:hover { border-color: var(--text-muted); color: var(--text); background: var(--control-bg); } /* The quiet buttons confirm a copy by turning green rather than by swapping background — they sit on cards and in field rows where a filled green pill would shout. */ .btn-outline.copied, .btn-ghost.copied { border-color: var(--success-fg); color: var(--success-fg); } /* The one copy modifier. A copy button that sits inline in a field or row next to the value it copies (a line, a GAII, a tunnel URL) must not stretch the row or wrap its label. Everything else a copy button needs is already in .btn-primary / .btn-outline / .btn-ghost. */ .btn-copy-inline { flex: none; white-space: nowrap; } /* ── Cards ── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: all 0.2s ease; } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card-solid { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } /* Glass variant (Card variant="glass") — reproduces the former profile .pf-glass-card appearance, fully tokenized. Overrides .card defaults (2rem padding, var(--radius), shadow) with the glass card's flatter geometry. */ .card-glass { padding: 16px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 1rem; box-shadow: none; } /* Glass card is flat — neutralize the generic .card:hover lift so it looks identical to the former static .pf-glass-card. */ .card-glass:hover { box-shadow: none; transform: none; } /* ── Content Group Container ── */ .content-group { position: relative; z-index: 1; max-width: 560px; margin: 3rem auto 0; padding: 2rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-md); } .content-group > *:first-child { margin-top: 0; } .content-group > *:last-child { margin-bottom: 0; } /* ── Stat Cards ── */ .stat-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 20px; background: var(--bg-card); box-shadow: var(--shadow-sm); text-align: center; } .stat-card-label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .stat-card-value { font-size: 1.35rem; color: var(--text); font-weight: 800; margin-top: 0.15rem; } /* Value tone + mono modifiers — let accent-tinted / earned-spent / monospace stat clones converge onto canonical .stat-card-value without losing their semantics. */ .stat-card-value.accent { color: var(--accent); } .stat-card-value.success { color: var(--success-fg); } .stat-card-value.danger { color: var(--danger-fg); } .stat-card-value.warn { color: var(--warn); } .stat-card-value.purple { color: var(--purple); } .stat-card-value.blue { color: var(--blue); } .stat-card-value.mono { font-family: var(--font-mono, monospace); } /* Placeholder while the counter's fetch is still in flight. A hard 0 on a live counter reads as "nothing runs here", so the card stays quiet until it knows the number. */ .stat-card-value.is-loading { color: var(--text-muted); opacity: 0.45; } /* Optional second line under a counter (e.g. "2 online now"). */ .stat-card-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem; } /* Shared responsive stat grid wrapper. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 32px; } /* ── Category Card ── */ /* Canonical clickable directory tile (icon + name + optional count) shared by the marketplace category grid and the hobbies interest grid. Works on both and
(text-decoration:none keeps anchors un-underlined). The grid wrapper stays per-view because column density differs (marketplace 160px / hobbies 200px min). */ .category-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; text-decoration: none; transition: all 0.2s; cursor: pointer; } .category-card:hover { background: var(--bg-surface); border-color: var(--accent); box-shadow: var(--shadow-md); } .category-icon { font-size: 2rem; margin-bottom: 8px; } .category-name { font-size: 0.95rem; font-weight: 600; color: var(--text); } .category-count { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; } /* ── Badges ── */ .badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .badge-success { background: var(--success-bg); color: var(--success-fg); } .badge-warn { background: var(--warn-bg); color: var(--warn-fg); } .badge-danger { background: var(--danger-bg); color: var(--danger-fg); } .badge-info { background: var(--info-bg); color: var(--info-fg); } /* ── Pill (canonical shape primitive) ── The common pill-chip *shape* only — no colors. Small inline-flex chip with pill radius, compact padding, small bold text, pointer cursor and a soft opacity hover. Colors are supplied by the caller's own tint classes (e.g. .vis-public / .vis-private) so this base stays theme-neutral. Matches the shape the profile visibility pill (.vis-pill) already used. New pill-shaped chips should build on this base + a tint class instead of re-declaring the shape. Note: the profile pills are styled via the higher-specificity `.pf .vis-pill`, which keeps its own shape declaration to avoid the scoped-override specificity trap; it now references the same --radius-full token so the two stay in lockstep. */ .pill { display: inline-flex; align-items: center; border: none; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600; transition: opacity 0.15s; } .pill:hover { opacity: 0.8; } /* ── Segmented control (canonical) ── A row of buttons in a bordered pill; the active segment is filled with the accent. Token-only so it flips in dark mode. The start of the deferred #8 tab-family consolidation — use this for new in-place view toggles (Draft/Published, picker tabs, scope toggles) instead of a per-view clone. */ .seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); } .seg-btn { padding: 0.25rem 0.7rem; font-size: 0.8rem; line-height: 1.3; background: transparent; color: var(--text-dim); border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .seg-btn + .seg-btn { border-left: 1px solid var(--border); } .seg-btn:hover:not(:disabled) { background: var(--bg-surface); } .seg-btn.active { background: var(--accent); color: #fff; } .seg-btn:disabled { opacity: 0.6; cursor: default; } /* ── UI switch (components/HomeUiSwitch.js) ── The one control that moves a person between the new home and the old profile. Quiet by design: it is a preference, not an action anyone came to perform. */ .ui-switch { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-dim); } .ui-switch-btn { flex: none; } /* ── Status dot (canonical) ── Small circle whose color is driven by a semantic status token. Consolidates the bespoke per-view dots (.live-dot, .peer-dot, .pn-status-dot, .ext-status-dot, .dv-dot). Component: /components/StatusDot.js. All colors are theme tokens so the dot flips correctly in dark mode. */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); } .status-dot--online, .status-dot--active, .status-dot--healthy, .status-dot--alive, .status-dot--live { background: var(--success); } .status-dot--warn, .status-dot--degraded, .status-dot--syncing, .status-dot--pending { background: var(--warn); } .status-dot--error, .status-dot--offline, .status-dot--dead, .status-dot--down { background: var(--danger); } .status-dot--idle, .status-dot--inactive, .status-dot--detached, .status-dot--muted { background: var(--text-muted); } /* Online keeps the soft glow the former .pn-status-dot.online had */ .status-dot--online { box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); } /* Live additionally pulses (matches former .live-dot behaviour) */ .status-dot--live { box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); animation: livePulse 1.5s ease-in-out infinite; } /* ── Presence indicator (canonical) ── Backed by /components/PresenceDot.js. A small availability dot (+ optional label) shown next to a person across views. Colors are theme tokens so the dot flips in dark mode: available→success, busy→danger, away→warn, offline/unknown→muted (unknown is extra-faded). */ .presence { display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); } .presence--md .presence-dot { width: 10px; height: 10px; } .presence-dot--available { background: var(--success); box-shadow: 0 0 6px rgba(16, 185, 129, 0.45); } .presence-dot--busy { background: var(--danger); } .presence-dot--away { background: var(--warn); } .presence-dot--offline { background: var(--text-muted); } .presence-dot--unknown { background: var(--text-muted); opacity: 0.4; } .presence-label { font-size: 0.85em; color: var(--text-dim); } /* ── Key/value detail row (canonical) ── Backed by /components/KeyValueRow.js. A label/value pair laid out flex space-between: muted label on the left, emphasized value on the right, separated by a subtle bottom border (none on the last row). Consolidates the common label+value-pair shape (admin .adm-erow / .adm-hrow, profile .pf-agd-info-row). All colors are theme tokens so it flips correctly in dark mode. `.kv-value.mono` renders the value in the monospace font (ids, hashes, amounts). The existing per-view classes are intentionally left in place where their look differs. */ .kv-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.84rem; } .kv-row:last-child { border-bottom: none; } .kv-label { color: var(--text-dim); flex-shrink: 0; } .kv-value { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; } .kv-value.mono { font-family: var(--font-mono); font-size: 0.81rem; } /* ── Pagination + Load more (canonical) ── Backed by /components/Pagination.js. `.pagination` is the prev / "Page X / Y" / next control (arrow buttons + disabled ends); `.load-more` centers a single "load more" button. Consolidates the near-identical .adm-mem-pagination shape and the centered load-more wrapper. All colors are theme tokens so both flip correctly in dark mode. The numbered .hb-pagination variant is intentionally left in place (different UI). */ .pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; } .pagination-info { font-size: 0.85rem; color: var(--text-dim); } .load-more { text-align: center; margin-top: 1.5rem; } /* ── Collapsible (canonical) ── Backed by /components/Collapsible.js. A clickable header (title + a chevron that rotates 180° when open) with the body shown only while open. This is the canonical shape for the hand-rolled expand/collapse toggles scattered across views (.expand-btn + .pf-chevron, .scope-advanced-toggle, .pkv-entry-arrow). All colors are theme tokens so it flips correctly in dark mode. Callers own the open state (controlled component). The bespoke per-view toggles are left in place where their expanded markup is wired into view state; this block is the target for new collapsible sections. */ .collapsible { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.75rem; } .collapsible-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.6rem 0.85rem; background: none; border: none; border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer; transition: color 0.2s; } .collapsible-header:hover { color: var(--accent); } .collapsible-chevron { display: inline-block; flex-shrink: 0; font-size: 0.7rem; color: var(--text-dim); transition: transform 0.2s; } .collapsible-chevron.open { transform: rotate(180deg); } .collapsible-body { padding: 0 0.85rem 0.75rem; } /* ── Data table (canonical) ── Generic table look backed by /components/DataTable.js. Extracted as the common denominator of the admin `.adm table` and profile `.pf .consent-table` / `.audit-table` shapes: full-width collapsed borders, an uppercase muted header row divided by `--border`, cells divided by `--border-subtle`, a subtle hover, and a `.mono` cell modifier. All colors are theme tokens so the table flips correctly in dark mode. The `.scrollable` wrapper caps height (admin reuses its own `.adm .scrollable`; this generic one applies outside `.adm`). Callers supply their own container (`.card` / `.adm-card`); this block adds none. */ .data-table { width: 100%; border-collapse: collapse; font-size: .81rem; } .data-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: .69rem; text-transform: uppercase; letter-spacing: .3px; } .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-dim); } .data-table tr:hover td { background: var(--bg-surface); } .data-table .mono { font-family: var(--font-mono); font-size: .78rem; } /* Generic scrollable wrapper (the admin-scoped `.adm .scrollable` already exists for admin tables; this one covers DataTable used outside `.adm`). */ .scrollable { max-height: 600px; overflow-y: auto; } /* ── Chart canvas wrapper (components/UsageChart.js) ── Chart.js runs with maintainAspectRatio:false, so it needs a sized relative box. Height is supplied per-instance via the --usage-chart-h custom property. */ .usage-chart { position: relative; width: 100%; height: var(--usage-chart-h, 220px); } /* ── Section divider ── */ .section-divider { position: relative; z-index: 1; max-width: 520px; margin: 1rem auto 1.5rem; height: 1px; background: var(--border); } /* ── Inputs ── */ .input-field { width: 100%; padding: 11px 14px; background: var(--control-bg); border: 1.5px solid var(--control-border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 0.94rem; outline: none; transition: all 0.15s; } .input-field::placeholder { color: var(--text-muted); } .input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); background: var(--bg-input-focus); } /* Textarea + select behavior so .input-field works on all field types (lets views drop per-view form-input/textarea/select clones). */ textarea.input-field { resize: vertical; min-height: 80px; } select.input-field { cursor: pointer; } /* ── Search bar (canonical shell) ── Backed by /components/SearchBar.js. `.search-bar` is the flex row that wraps a single `type="search"` input; the input itself reuses `.input-field` so all visuals (border, focus ring, placeholder, dark-mode flip) are token-driven and need no per-view restyling. `.search-bar-input` only makes the input grow to fill the row. Consolidates the hand-rolled search inputs (.pkv-search, .cap-search-input, .pf-agd-search-input) and the profile .search-bar + .input-field combo. The profile-scoped `.pf .search-bar` rule (with max-width) coexists; this base provides the layout everywhere else. */ .search-bar { display: flex; align-items: center; gap: 0.5rem; flex: 1; } .search-bar-input { flex: 1; } .prompt-box { width: 100%; min-height: 140px; max-height: 300px; padding: 1rem 1.2rem; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7; resize: vertical; outline: none; text-align: left; } .prompt-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); } /* ── Spinner ── */ .spinner { display: inline-block; width: 1.25em; height: 1.25em; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; } /* ── Empty state ── */ .empty { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); font-style: italic; } /* Optional icon for the canonical EmptyState component (#9). */ .empty-icon { display: block; font-size: 2.5rem; opacity: 0.4; margin-bottom: 0.5rem; font-style: normal; } /* Richer EmptyState slots (#9 v1.1): bold title, body line, and an action row. Lets the pkv title+desc, pwv icon+action gates, and mk/hb icon+text triads fold into the one component. Body keeps the base .empty italic; title/action are normal weight/style. */ .empty-title { font-style: normal; font-weight: 600; font-size: var(--text-base); color: var(--text); margin-bottom: 0.25rem; } .empty-text { margin: 0 auto; max-width: 32rem; } .empty-action { margin-top: 0.85rem; font-style: normal; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } /* ── Muted / meta text utilities ── Shared replacements for the ~8 bespoke `.xx-muted` and ~30 `.xx-*-meta` clones scattered across the view CSS. Colors are tokens so they flip in dark mode. `.muted`/`.text-dim` dim to the mid tier; `.text-faint` to the dimmest; `.meta` is the small dim caption used under cards/rows. */ .muted, .text-dim { color: var(--text-dim); } .text-faint { color: var(--text-muted); } .meta { font-size: var(--text-sm); color: var(--text-dim); } /* ── Toggle Switch (canonical /components/ToggleSwitch.js, #14) ── */ .toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; } .toggle-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-slider { position: relative; display: inline-block; width: 44px; height: 24px; background: var(--border); border-radius: 12px; transition: background 0.2s; } .toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .toggle-input:checked + .toggle-slider { background: var(--success); } .toggle-input:checked + .toggle-slider::after { transform: translateX(20px); } .toggle-label { font-size: .85rem; color: var(--text); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } /* ── Footer ── */ .footer { position: relative; z-index: 1; text-align: center; padding: 3rem 1.25rem 3.5rem; font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; max-width: 500px; margin: 0 auto; } .footer .heart-icon { display: inline-block; color: var(--accent); font-size: 0.85rem; margin: 0 0.1rem; } /* ── Page entrance ── */ /* App-shell scroll region: fills the space under the topnav and owns the only scroll. min-height:0 lets the flex child shrink so overflow-y actually scrolls; overflow-x:hidden replaces the clip that used to live on body. */ .page-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; animation: pageIn 0.8s ease; } /* ── Site footer ── Lives INSIDE .page-content, at the end of the view, so it scrolls away with the content. A third row in the #app column would take height from every screen instead, and a phone is where that is felt. Quiet by design: this is the surface a person reaches for on purpose, not one that competes with the page. */ .site-footer { margin-top: 3rem; padding: 1.5rem 1rem 2rem; border-top: 1px solid var(--border-subtle, var(--border)); display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .site-footer-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; font-size: 0.84rem; } .site-footer-row a { color: var(--text-dim); } .site-footer-row a:hover { color: var(--accent); text-decoration: underline; } /* The machine row is the same five documents the static .agent-footer carries. One step quieter than the row above it: a person looking for the OpenAPI contract knows to look down here, and everyone else should read past it. */ .site-footer-machine { font-size: 0.78rem; opacity: 0.75; } /* ── Responsive ── */ @media (max-width: 480px) { .content-group { margin-top: 2rem; padding: 1.5rem 1rem; } .topnav { padding: 0 0.4rem; } } /* ═══════════════════════════════════════════════════════ Shared Components ═══════════════════════════════════════════════════════ */ /* ── Alert ── */ .alert { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-xs); font-size: 0.85rem; margin-bottom: 1rem; } .alert-icon { font-weight: 700; flex-shrink: 0; } .alert-msg { flex: 1; } .alert-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 0.25rem; opacity: 0.7; } .alert-close:hover { opacity: 1; } .alert-success { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-border); } .alert-error { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-border); } .alert-warn { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-border); } .alert-info { background: var(--info-bg); color: var(--info-fg); border: 1px solid var(--info-border); } /* ── Toast ── */ .toast { /* width: max-content (NOT fit-content/auto): a fixed box anchored at left:50% shrink-to-fits against the remaining 50vw, capping the pill at half the viewport — a tall skinny tower on phones. max-width does the real capping. */ position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 9999; max-width: min(92vw, 40rem); width: max-content; padding: 0.7rem 1.15rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; line-height: 1.45; text-align: center; text-wrap: pretty; overflow-wrap: anywhere; white-space: normal; background: var(--toast-success-bg); color: var(--toast-fg); box-shadow: var(--shadow-xl); animation: toastIn 0.3s ease, toastOut 0.4s ease 2.4s forwards; pointer-events: auto; box-sizing: border-box; } .toast.error, .toast-error { background: var(--toast-danger-bg); color: var(--toast-fg); } .toast-success { background: var(--toast-success-bg); color: var(--toast-fg); } .toast-info { background: var(--toast-info-bg); color: var(--toast-fg); } .toast-warn { background: var(--toast-warn-bg); color: var(--toast-warn-fg); } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes toastOut { from { opacity: 1; } to { opacity: 0; pointer-events: none; } } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--overlay-scrim); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.2s ease; } .modal { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 1.5rem; min-width: 320px; max-width: 90vw; max-height: 85vh; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .modal-header h3 { font-size: 1.1rem; font-weight: 700; } .modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.2rem; padding: 0.25rem; opacity: 0.7; } .modal-close:hover { opacity: 1; } .modal-confirm-message { color: var(--text-dim); margin: 0 0 1.25rem; line-height: 1.5; } .modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 0.5rem; } .btn-danger-solid { padding: 8px 20px; background: var(--danger,#ef4444); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 500; cursor: pointer; transition: all 0.15s; } .btn-danger-solid:hover { background: #dc2626; } /* ── Card extensions ── */ .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .card-title { font-weight: 600; font-size: 1rem; } .card-subtitle { color: var(--text-dim); font-size: 0.8rem; } .card-hoverable { cursor: pointer; } /* ── Form Group ── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .form-hint { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; } /* ── Loading text ── */ .loading-text { margin-left: 0.5rem; color: var(--text-dim); font-size: 0.85rem; } /* ── Section & page headers (canonical title + subtitle pairs) ── Single source of truth for the "title + supporting copy" header that every view re-implements. Use .section-title/.section-desc for in-page section headers (accent title) and .page-title/.page-subtitle for top-of-view page headers (gradient title). All values are theme tokens so they flip with dark/light mode. Per-view clones (mk-/hb-/cl-/adm-page-title) are token-equivalent and should converge onto these over time. */ .section-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--accent); } .section-desc { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1.25rem; line-height: 1.5; max-width: 700px; } .page-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .page-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 32px; } /* ── Accessibility ── */ .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Agent-facing links in the static markup (spa.html). Quiet for a human reader, present in the document for anything that does not run JavaScript. */ .agent-footer { display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); justify-content: center; padding: var(--space-6, 1.5rem) var(--space-4, 1rem); font-size: var(--font-size-sm, 0.875rem); } .agent-footer a { color: var(--text-dim); text-decoration: none; } .agent-footer a:hover { color: var(--accent); text-decoration: underline; }