/* ==========================================================================
MarmaAI — Design tokens & global shell styles
========================================================================== */
:root {
/* Shell (dark) */
--shell-bg: #0E1210;
--shell-surface: #171B18;
--shell-surface-2: #1E2320;
--shell-border: rgba(212,175,55,0.14);
--shell-border-strong: rgba(212,175,55,0.28);
--shell-ink: #E8E1D0;
--shell-ink-mute: #9BA097;
--shell-ink-faint: #8A9086;
/* Content cards (parchment) */
--card-bg: #F5EFE3;
--card-bg-2: #EDE5D3;
--card-border: rgba(26,29,32,0.10);
--card-border-strong: rgba(26,29,32,0.18);
--card-ink: #1A1D20;
--card-ink-mute: #5A5F5A;
--card-ink-faint: #5B605A;
/* Brand */
--emerald-deep: #0F5132;
--emerald: #198754;
--emerald-soft: #2A9D6C;
--gold: #D4AF37;
--gold-deep: #B8941F;
--gold-soft: rgba(212,175,55,0.18);
--copper: #B87333;
--sage: #87A96B;
--ivory: #F0EAD6;
/* Verification states */
--state-verified: #10B981;
--state-jitter: #F59E0B;
--state-unverified: #EF4444;
/* Type */
--font-display: "Fraunces", ui-serif, Georgia, serif;
--font-ui: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-sans-alt: "Cormorant Garamond", "Fraunces", serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
/* Layout */
--sidebar-w: 240px;
--sidebar-w-mini: 76px;
--topbar-h: 64px;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 20px;
--accent: var(--gold);
--accent-deep: var(--gold-deep);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; height: 100%;
background: var(--shell-bg); color: var(--shell-ink);
font-family: var(--font-ui);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body { overflow: hidden; }
#app { height: 100vh; width: 100vw; }
/* Utility */
.font-display { font-family: var(--font-display); font-optical-sizing: auto; }
.font-alt { font-family: var(--font-sans-alt); }
.font-mono { font-family: var(--font-mono); }
/* Shell texture: subtle grain */
.shell-grain {
position: fixed; inset: 0; pointer-events: none; z-index: 1;
background-image:
radial-gradient(1200px 700px at 10% -10%, rgba(212,175,55,0.06), transparent 60%),
radial-gradient(900px 600px at 110% 110%, rgba(25,135,84,0.05), transparent 60%);
mix-blend-mode: screen;
opacity: .22;
}
.shell-noise {
position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
background-image: url("data:image/svg+xml;utf8,");
}
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.16); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.28); }
/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* Buttons */
.btn {
font-family: var(--font-ui); font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
padding: 10px 16px; border-radius: 10px; border: 1px solid transparent;
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
transition: all 160ms ease; user-select: none;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
/* The primary CTA carried light text on #198754 — 3.96:1, under AA for a
14px label. Darkening the FILL (not the label) is the fix: white-on-deep-
green is 8.1:1 and the button still reads as the brand green. */
.btn-primary { background: var(--emerald-deep); color: #F5EFE3; border-color: rgba(255,255,255,0.06); }
.btn-primary:hover { background: #146C43; box-shadow: 0 4px 20px rgba(15,81,50,0.35); }
.btn-primary:active:not(:disabled) { background: #0A3F27; box-shadow: none; }
.btn-gold { background: var(--gold); color: var(--on-accent); }
.btn-gold:hover { background: #E5C24A; box-shadow: 0 4px 20px rgba(212,175,55,0.35); }
.btn-gold:active:not(:disabled) { background: var(--gold-deep); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--shell-ink); border-color: var(--shell-border); }
.btn-ghost:hover { background: rgba(212,175,55,0.06); border-color: var(--shell-border-strong); }
.btn-ghost:active:not(:disabled) { background: rgba(212,175,55,0.10); }
.btn-card { background: var(--card-ink); color: var(--card-bg); }
.btn-card:hover { background: #2c3033; }
.btn-card:active:not(:disabled) { background: #1a1d20; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Cards */
.card {
background: var(--card-bg);
color: var(--card-ink);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
position: relative;
overflow: hidden;
transition: box-shadow 200ms ease, transform 200ms ease;
}
.card:hover {
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.card-paper::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.6; mix-blend-mode: multiply;
}
.card-dark {
background: var(--shell-surface);
color: var(--shell-ink);
border-radius: var(--radius-lg);
border: 1px solid var(--shell-border);
position: relative;
overflow: hidden;
}
/* Loading skeleton */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg, var(--card-bg-2) 25%, var(--card-bg) 50%, var(--card-bg-2) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-title { height: 20px; margin-bottom: 12px; width: 60%; }
.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card {
background: var(--card-bg);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
padding: 20px;
display: flex; flex-direction: column; gap: 12px;
}
/* Toast notifications */
@keyframes toastIn {
from { opacity: 0; transform: translateY(16px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-8px) scale(0.96); }
}
.toast-container {
position: fixed; bottom: 24px; right: 24px; z-index: 9999;
display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
pointer-events: auto;
background: var(--shell-surface);
color: var(--shell-ink);
border: 1px solid var(--shell-border);
border-radius: var(--radius);
padding: 12px 20px;
font-size: 14px; font-weight: 500;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
animation: toastIn 240ms cubic-bezier(.2,.7,.2,1);
display: flex; align-items: center; gap: 10px;
}
.toast.toast-exit { animation: toastOut 200ms ease forwards; }
.toast-success { border-left: 3px solid var(--state-verified); }
.toast-error { border-left: 3px solid var(--state-unverified); }
.toast-info { border-left: 3px solid var(--gold); }
@media (max-width: 560px) {
.toast-container { bottom: 16px; right: 16px; left: 16px; }
}
/* Chips / pills */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
border: 1px solid;
}
.chip-gold { color: var(--accent-text); border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.08); }
.chip-emerald { color: #0F5132; border-color: rgba(15,81,50,0.25); background: rgba(25,135,84,0.10); }
.chip-verified { color: var(--state-verified-text); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.10); }
.chip-jitter { color: var(--state-jitter-text); border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); }
.chip-unverified { color: var(--state-unverified-text); border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); }
/* Divider */
.gold-divider {
height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
border: none; margin: 0;
}
/* Gold sanskrit flourish — accent TEXT, so it follows the surface
(--gold as text on a light shell measures 1.8:1). */
.flourish {
font-family: var(--font-sans-alt); font-style: italic; font-weight: 400;
color: var(--accent-text); letter-spacing: 0.02em;
}
/* View transition */
.view-fade { animation: fadeUp 240ms cubic-bezier(.2,.7,.2,1); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.view-fade { animation: none; }
}
/* Eyebrow */
.eyebrow {
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--card-ink-mute); font-weight: 500;
}
.eyebrow-light { color: var(--shell-ink-mute); }
/* Sidebar */
.sidebar {
flex-shrink: 0; height: 100vh;
background-color: var(--shell-bg);
background-image: linear-gradient(180deg, var(--sidebar-sheen), transparent 22%);
border-right: 1px solid var(--shell-border);
display: flex; flex-direction: column;
transition: width 220ms cubic-bezier(.2,.7,.2,1);
position: relative; z-index: 10;
width: var(--sidebar-w);
background-image: radial-gradient(480px 340px at 0% 0%, rgba(212,175,55,.07), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%);
}
.sidebar.is-mini, .sidebar.is-collapsed { width: var(--sidebar-w-mini); }
.side-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 10px;
color: var(--shell-ink-mute); font-weight: 500; font-size: 14px;
cursor: pointer; position: relative; letter-spacing: -0.005em;
transition: all 160ms ease;
border: 1px solid transparent;
}
.side-item:hover { color: var(--shell-ink); background: rgba(212,175,55,0.05); }
.side-item.active {
color: var(--sidebar-active-ink);
background: linear-gradient(180deg, rgba(25,135,84,0.16), rgba(15,81,50,0.10));
border-color: rgba(25,135,84,0.30);
}
.side-item.active::before {
content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
background: var(--accent); border-radius: 3px;
}
.side-icon { width: 20px; height: 20px; stroke-width: 1.75; flex-shrink: 0; }
/* AR viewport specific */
.ar-canvas {
position: relative;
background: #050706;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--shell-border);
min-height: 500px;
}
.ar-scanlines {
position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px);
}
.ar-vignette {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}
.ar-edge-glow {
position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-lg);
box-shadow: inset 0 0 80px rgba(16,185,129,0.25), inset 0 0 200px rgba(16,185,129,0.06);
}
.ar-edge-glow.jitter { box-shadow: inset 0 0 60px rgba(245,158,11,0.20); }
.ar-edge-glow.unverified { box-shadow: inset 0 0 80px rgba(239,68,68,0.28); }
/* HUD reticles */
.hud-corner { position: absolute; width: 36px; height: 36px; border: 2px solid rgba(212,175,55,0.7); }
.hud-corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; }
.hud-corner.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; }
.hud-corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
.hud-corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; }
/* HUD ring */
@keyframes pulseRing { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 0.6; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hud-ring { animation: pulseRing 2.4s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .hud-ring { animation: none; } }
/* Progress ring */
.ring-track { stroke: rgba(26,29,32,0.12); }
/* Drawer */
.drawer-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
animation: fadeIn 180ms ease;
}
.drawer-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 92%);
background: var(--card-bg); box-shadow: -20px 0 60px rgba(0,0,0,0.4);
animation: slideIn 240ms cubic-bezier(.2,.7,.2,1);
overflow-y: auto;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* Mobile hint */
@media (max-width: 720px) {
.desktop-only-note { display: block !important; }
}
/* Om divider */
.om-divider {
display: flex; align-items: center; gap: 12px;
color: var(--accent-text); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
}
.om-divider::before, .om-divider::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
}
/* Rows */
.row-hover:hover { background: rgba(26,29,32,0.03); }
/* Segment control */
.seg {
display: inline-flex; padding: 3px; gap: 3px;
background: var(--field-bg); border-radius: 10px;
border: 1px solid var(--field-border);
}
/* .seg-dark is a legacy alias — both now resolve through the field tokens so
a segmented control is legible on any surface, in any theme. */
.seg-dark { background: var(--field-bg); border-color: var(--field-border); }
.seg button {
border: none; background: transparent; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--field-ink-mute);
}
.seg-dark button { color: var(--field-ink-mute); }
.seg button.on { background: var(--card-ink); color: var(--card-bg); }
.seg-dark button.on { background: var(--accent); color: var(--on-accent); }
/* Keep the settings panel and every segment inside narrow phone viewports. */
#tweaks-popover {
box-sizing:border-box;
width:min(340px, calc(100vw - 24px))!important;
right:max(12px, env(safe-area-inset-right))!important;
top:max(64px, calc(env(safe-area-inset-top) + 12px))!important;
max-height:calc(100dvh - 88px - env(safe-area-inset-bottom));
padding:20px!important;
overflow-y:auto;
overscroll-behavior:contain;
}
#tweaks-popover .seg {
box-sizing:border-box;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
}
#tweaks-popover [data-tweak-group="themeMode"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
#tweaks-popover [data-voice-toggle] { grid-template-columns:repeat(2,minmax(0,1fr)); }
#tweaks-popover .seg button { min-width:0; min-height:44px; padding:6px 4px; }
#tweaks-popover #tweaks-close { width:44px; height:44px; display:grid; place-items:center; }
#tweaks-popover [data-accent-group] { flex-wrap:wrap; }
#tweaks-popover .swatch { width:44px; height:44px; flex:0 0 44px; }
@media(max-width:480px) {
#tweaks-popover { padding:16px!important; }
#tweaks-popover [data-tweak-group="themeMode"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Info tooltip */
.tracking-info {
position: relative; display: inline-flex; cursor: help;
}
.tracking-info .dot {
width: 13px; height: 13px; border-radius: 50%;
border: 1px solid var(--card-ink-faint);
color: var(--card-ink-mute);
font-size: 9px; font-family: var(--font-mono); font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
.tracking-info.dark .dot {
border-color: var(--shell-ink-faint);
color: var(--shell-ink-mute);
}
.tracking-info .tooltip {
position: absolute; top: calc(100% + 6px); left: -8px; z-index: 200;
background: var(--tooltip-bg); color: var(--tooltip-ink);
border: 1px solid var(--shell-border-strong);
padding: 8px 10px; border-radius: 8px; width: 220px;
font-size: 11.5px; line-height: 1.45; letter-spacing: 0; text-transform: none;
font-family: var(--font-ui); font-weight: 400;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
pointer-events: none;
display: none;
}
.tracking-info.open .tooltip { display: block; }
/* Nav / topbar */
.topbar {
height: var(--topbar-h); flex-shrink: 0;
display: flex; align-items: center; gap: 16px;
padding: 0 28px;
border-bottom: 1px solid var(--shell-border);
background: var(--topbar-bg);
backdrop-filter: blur(20px);
position: relative; z-index: 5;
box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.topbar-search {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 10px;
background: var(--field-bg); border: 1px solid var(--field-border);
color: var(--shell-ink-faint); font-size: 13px;
width: 260px;
}
.cam-status {
display: flex; align-items: center; gap: 6px; color: var(--state-verified-text);
font-size: 11.5px; font-family: var(--font-mono); letter-spacing: 0.06em;
}
.cam-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--state-verified); box-shadow: 0 0 8px var(--state-verified); }
/* ---- Account avatar + menu (topbar) and nav account chip (landing/pricing) ----
One avatar look everywhere: the gold-ringed initials circle stands in for the
account photo until an account has one, so a signed-in user never sees a
"Log in" control. */
.nav-avatar {
border-radius: 50%; flex-shrink: 0; display: inline-flex;
align-items: center; justify-content: center; object-fit: cover;
background: radial-gradient(circle at 30% 30%, #D4AF37 0%, #B8941F 60%, #8B6F14 100%);
color: var(--on-accent); font-family: var(--font-ui); font-weight: 600;
letter-spacing: 0.02em; line-height: 1; user-select: none;
border: 1px solid rgba(212,175,55,0.55);
box-shadow: 0 2px 10px rgba(212,175,55,0.25);
}
.auth-slot { position: relative; display: inline-flex; }
.auth-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 10px 5px 6px; border-radius: 999px;
color: var(--shell-ink);
}
.auth-chip[aria-expanded="true"] { background: rgba(212,175,55,0.10); border-color: var(--shell-border-strong); }
.auth-chip-name { font-size: 13px; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-menu {
position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; z-index: 60;
background: var(--shell-surface); border: 1px solid var(--shell-border-strong);
border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); overflow: hidden;
}
.auth-menu-head { padding: 12px 14px; border-bottom: 1px solid var(--shell-border); }
.auth-menu-name { font-size: 13px; font-weight: 600; color: var(--shell-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-menu-email { font-size: 11.5px; color: var(--shell-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.auth-menu-item {
width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
padding: 10px 14px; background: none; border: none; cursor: pointer;
color: var(--shell-ink); font-family: var(--font-ui); font-size: 13px;
}
.auth-menu-item:hover { background: rgba(212,175,55,0.08); }
/* Landing + pricing nav account chip (server-rendered pages) */
.nav-account {
display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
padding: 5px 12px 5px 6px; border-radius: 999px;
border: 1px solid var(--field-border); background: var(--field-bg);
color: var(--shell-ink); font-family: var(--font-ui); font-size: 13px; font-weight: 500;
transition: border-color 160ms ease, background 160ms ease;
}
.nav-account:hover { border-color: var(--shell-border-strong); background: rgba(212,175,55,0.08); }
.nav-account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Region filter chips (library) */
.region-chip {
padding: 8px 14px; border-radius: 999px;
background: transparent; border: 1px solid var(--shell-border);
color: var(--shell-ink-mute);
font-size: 12.5px; font-weight: 500; font-family: var(--font-ui);
text-transform: capitalize; cursor: pointer;
letter-spacing: 0.02em; white-space: nowrap;
}
.region-chip.active {
background: rgba(212,175,55,0.15);
border-color: rgba(212,175,55,0.4);
color: var(--accent-text);
}
/* Library card */
.point-card {
background: var(--card-bg); border-radius: 16px;
border: 1px solid var(--card-border);
overflow: hidden; cursor: pointer;
display: flex; flex-direction: column;
transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, border-color 220ms ease;
}
.point-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0,0,0,0.25);
border-color: var(--card-border-strong);
}
/* Region tile (dashboard) */
.region-tile {
padding: 16px; border-radius: 12px; cursor: pointer;
border: 1px solid var(--card-border);
background: linear-gradient(180deg, var(--sheen-from), transparent);
transition: all 160ms ease;
}
.region-tile:hover { border-color: var(--card-border-strong); }
/* Safety guideline card */
.safety-item { padding: 24px; display: flex; gap: 20px; }
/* Mobile note (desktop-only) */
.desktop-only-note { display: none; }
/* Layout */
.app-shell { display: flex; height: 100vh; width: 100vw; position: relative; z-index: 3; }
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.view-scroll { flex: 1; overflow: auto; min-height: 0; }
/* ==========================================================================
MarmaAI — Responsive breakpoints (mobile, tablet, desktop)
Breakpoints: 480px (small phone), 768px (tablet), 1024px (small desktop)
========================================================================== */
/* ---- Practitioner report (print / save-as-PDF) ---- */
@media print {
body * { visibility: hidden; }
#print-report, #print-report * { visibility: visible; }
#print-report {
position: absolute !important;
inset: 0 !important;
display: block !important;
background: #fff !important;
color: #111 !important;
}
}
/* ---- Mobile sidebar overlay ---- */
.mobile-sidebar-backdrop {
position: fixed; inset: 0; z-index: 99;
background: rgba(0,0,0,0.55);
animation: fadeIn 180ms ease;
}
.mobile-sidebar-backdrop.hide { animation: fadeOut 160ms ease forwards; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.sidebar.is-mobile-overlay {
position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
width: 280px !important;
transform: translateX(-100%);
transition: transform 260ms cubic-bezier(.2,.7,.2,1);
background: var(--shell-bg);
}
.sidebar.is-mobile-overlay.open { transform: translateX(0); }
/* ---- Mobile topbar ---- */
.topbar-hamburger {
display: none; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px;
background: transparent; border: 1px solid var(--shell-border);
color: var(--shell-ink); cursor: pointer; flex-shrink: 0;
transition: all 160ms ease;
}
.topbar-hamburger:hover { background: rgba(212,175,55,0.06); border-color: var(--shell-border-strong); }
.topbar-search-expand {
display: none;
position: absolute; top: var(--topbar-h); left: 0; right: 0;
padding: 12px 16px; background: var(--shell-bg);
border-bottom: 1px solid var(--shell-border);
z-index: 20;
animation: slideDown 180ms ease;
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.topbar-search-expand .topbar-search { width: 100%; }
/* ---- Grid utilities (used by views) ---- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-session { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.grid-safety { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
.grid-analytics-table { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr; gap: 12px; }
/* ---- View padding responsive ---- */
.view-pad { padding: 28px 32px 40px; }
.view-pad-sm { padding: 24px 28px 32px; }
/* ---- Analytics table scroll wrapper ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.16); border-radius: 3px; }
/* ======================================================================
BREAKPOINT: Tablet (max-width: 1024px)
====================================================================== */
@media (max-width: 1024px) {
/* Sidebar: collapse to mini by default */
.sidebar:not(.is-mobile-overlay):not(.is-mini) {
width: var(--sidebar-w-mini) !important;
}
.sidebar:not(.is-mobile-overlay):not(.is-mini) .sidebar-brand-text,
.sidebar:not(.is-mobile-overlay):not(.is-mini) .sidebar-section-label,
.sidebar:not(.is-mobile-overlay):not(.is-mini) .sidebar-wisdom,
.sidebar:not(.is-mobile-overlay):not(.is-mini) .sidebar-user-text,
.sidebar:not(.is-mobile-overlay):not(.is-mini) .side-item-label {
display: none !important;
}
.sidebar:not(.is-mobile-overlay):not(.is-mini) .side-item {
justify-content: center !important;
}
}
/* ======================================================================
BREAKPOINT: Small desktop / large tablet (max-width: 900px)
====================================================================== */
@media (max-width: 900px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-2 { grid-template-columns: 1fr; }
.grid-2-equal { grid-template-columns: 1fr; }
.grid-session { grid-template-columns: 1fr; }
.grid-safety { grid-template-columns: 1fr; }
.topbar-search { display: none; }
.cam-status .cam-status-full { display: none; }
}
/* Dashboard entry flow: make the first action obvious and forgiving. */
#dash-symptom-input { min-height: 46px; font-size: 14px; }
#dash-symptom-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.dash-chip { transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease; }
.dash-chip:hover { background: rgba(212,175,55,.10) !important; border-color: var(--accent) !important; color: var(--card-ink) !important; transform: translateY(-1px); }
[data-quick-relief] { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
[data-quick-relief]:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.dashboard-hero-card { position:relative; overflow:hidden; border:1px solid var(--card-border-strong) !important; background:linear-gradient(135deg,var(--card-bg) 0%,var(--card-bg-2) 100%) !important; box-shadow:var(--shadow-card) !important; }
.dashboard-hero-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--accent),var(--gold),var(--copper)); }
.dashboard-hero-copy { position:relative; z-index:1; }
.dashboard-hero-copy .font-display { color:var(--card-ink) !important; }
.dashboard-hero-copy .font-alt { color:var(--card-ink-mute) !important; }
.dashboard-start-badge { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:rgba(15,81,50,.09); border:1px solid rgba(15,81,50,.18); color:var(--accent-text); font:600 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.dashboard-start-badge span { color:var(--accent-text); font-size:13px; }
.dashboard-hero-visual { border:1px solid var(--card-border-strong); border-radius:18px !important; box-shadow:var(--shadow-card); background:linear-gradient(145deg,var(--card-bg-2),var(--card-bg)); }
.dashboard-quick-actions [data-quick-relief] { background:linear-gradient(180deg,#2b4a3b,#173326) !important; border-color:rgba(15,81,50,.5) !important; color:#f7f3e8 !important; }
.dashboard-quick-actions [data-quick-relief]:hover { background:linear-gradient(180deg,#37604d,#204733) !important; }
/* Learn uses the shell for navigation and the card family for every reading
surface. In hybrid these are different palettes; never cross the families. */
.learn-page { width:100%; max-width:1280px; margin:0 auto; padding:24px 32px 48px; display:flex; flex-direction:column; gap:28px; color:var(--shell-ink); box-sizing:border-box; }
.learn-page *, .learn-page *::before, .learn-page *::after { box-sizing:border-box; }
.learn-page .card-paper { color:var(--card-ink); background:var(--card-bg); border:1px solid var(--card-border-strong); box-shadow:var(--shadow-card); }
.learn-page .card-paper::before { display:none; }
.learn-page button, .learn-page input, .learn-page select { font-family:var(--font-ui); }
.learn-page button { cursor:pointer; }
.learn-page h2, .learn-page h3 { font-family:var(--font-display); font-weight:500; letter-spacing:-.025em; margin:0; }
.learn-page h2 { font-size:28px; line-height:1.2; }
.learn-page h3 { font-size:23px; line-height:1.25; }
.learn-page p { margin:0; }
.learn-page :focus-visible { outline:2px solid var(--accent-text); outline-offset:4px; }
.learn-page h2:focus, .learn-page h3[tabindex]:focus { outline:none; }
.learn-eyebrow { font:600 10px/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); margin-bottom:10px; }
.learn-tabs { display:flex; gap:24px; border-bottom:1px solid var(--shell-border-strong); }
.learn-tabs button { display:flex; gap:9px; align-items:center; border:0; border-bottom:2px solid transparent; background:none; color:var(--shell-ink-mute); padding:0 0 14px; font-size:13px; font-weight:600; }
.learn-tabs button[aria-current="page"] { color:var(--shell-ink); border-bottom-color:var(--accent-text); }
.learn-tabs button span { font-size:11px; padding:2px 7px; border-radius:20px; background:var(--shell-surface-2); color:var(--shell-ink-faint); }
.learn-hero { border-radius:22px; padding:0; display:grid; grid-template-columns:1.3fr 1fr; overflow:hidden; }
.learn-hero-copy { padding:38px; align-self:center; }
.learn-hero h2 { font-size:clamp(30px,3.1vw,46px); line-height:1.07; margin-bottom:18px; }
.learn-hero-copy > p { font-size:15px; line-height:1.7; color:var(--card-ink-mute); max-width:410px; }
.learn-hero-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; }
.learn-hero-actions .btn { min-height:46px; }
.learn-next-label { margin-top:14px; color:var(--card-ink-faint); font-size:12px; }
.learn-text-button { display:inline-flex; align-items:center; gap:7px; border:0; background:none; color:inherit; padding:5px 0; font-size:12px; font-weight:600; text-decoration:none; }
.learn-text-button:hover { text-decoration:underline; text-underline-offset:4px; }
.learn-hero-art { position:relative; min-height:330px; background:#eee6d3; border-left:1px solid var(--card-border-strong); overflow:hidden; }
.learn-hero-art img { width:100%; height:100%; position:absolute; object-fit:cover; object-position:center; }
.learn-art-caption { position:absolute; bottom:20px; left:20px; right:20px; padding:10px 14px; border-radius:9px; background:#f5efe3; color:#1a1d20; font:italic 16px/1.3 var(--font-alt); text-align:center; }
.learn-progress-strip { display:flex; align-items:center; gap:20px; font-size:12px; color:var(--shell-ink-mute); padding:0 4px; }
.learn-progress-strip strong { color:var(--shell-ink); }
.learn-progress-strip progress { flex:1; height:6px; border:0; border-radius:20px; background:var(--shell-surface-2); overflow:hidden; accent-color:var(--accent); }
.learn-progress-strip progress::-webkit-progress-bar { background:var(--shell-surface-2); }
.learn-progress-strip progress::-webkit-progress-value { background:var(--accent); border-radius:20px; }
.learn-progress-strip progress::-moz-progress-bar { background:var(--accent); border-radius:20px; }
.learn-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:10px 0 18px; }
.learn-section-heading > span { font-size:11px; color:var(--shell-ink-faint); }
.learn-path-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.learn-path { text-align:left; border-radius:16px; padding:24px; transition:border-color .2s,transform .2s; }
.learn-path:hover { border-color:var(--accent-text); transform:translateY(-2px); }
.learn-path-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:var(--accent-text); }
.learn-path-number { font:500 22px/1 var(--font-mono); }
.learn-path h3 { font-size:28px; margin-bottom:10px; }
.learn-path p { font-size:13px; line-height:1.7; color:var(--card-ink-mute); max-width:400px; }
.learn-path-footer { display:flex; justify-content:space-between; padding-top:20px; margin-top:20px; border-top:1px solid var(--card-border); font-size:11px; color:var(--card-ink-faint); }
.learn-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.learn-chapter { min-width:0; border-radius:15px; padding:20px; display:flex; flex-direction:column; transition:border-color .2s; }
.learn-chapter:hover { border-color:var(--accent-text); }
.learn-chapter-meta { display:flex; justify-content:space-between; gap:10px; font:500 10px/1.5 var(--font-mono); color:var(--card-ink-faint); }
.learn-chapter-open { display:block; width:100%; flex:1; text-align:left; border:0; padding:14px 0 20px; background:none; color:var(--card-ink); }
.learn-chapter-open h3 { font-size:22px; margin-bottom:11px; }
.learn-chapter-open p { font-size:12.5px; line-height:1.7; color:var(--card-ink-mute); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.learn-chapter-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--card-border); padding-top:13px; }
/* Body part + practiceability. The three practiceability colours are the same
honesty distinction the Point Library draws: camera-guided (accent), find it
by touch (sage), read only (muted). */
.learn-chapter-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.learn-tag { display:inline-flex; align-items:center; gap:5px; font:500 9.5px/1.4 var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; border:1px solid var(--card-border); color:var(--card-ink-faint); background:rgba(26,29,32,0.04); }
.learn-tag svg { flex:none; }
.learn-tag-region { border-color:rgba(212,175,55,0.30); color:var(--accent-text); background:rgba(212,175,55,0.08); }
.learn-tag-camera { border-color:rgba(212,175,55,0.34); color:var(--accent-text); background:rgba(212,175,55,0.09); }
.learn-tag-touch { border-color:rgba(135,169,107,0.40); color:#7E9C66; background:rgba(135,169,107,0.10); }
.learn-tag-read { border-color:var(--card-border); color:var(--card-ink-faint); background:rgba(26,29,32,0.05); }
.learn-status { display:inline-flex; gap:5px; align-items:center; font-size:10px; color:var(--card-ink-faint); }
.learn-save { display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--card-ink-mute); font-size:11px; padding:5px; min-height:32px; }
.learn-save[aria-pressed="true"] { color:var(--accent-text); }
.learn-honesty { display:flex; align-items:flex-start; gap:12px; color:var(--shell-ink-faint); font-size:12px; line-height:1.7; border-top:1px solid var(--shell-border-strong); padding:20px 0 0; }
.learn-honesty svg { flex:none; margin-top:2px; }
.learn-library-heading { padding:4px 0 0; }
.learn-library-heading h2 { font-size:38px; margin-bottom:12px; }
.learn-library-heading p { color:var(--shell-ink-mute); font-size:14px; line-height:1.6; }
.learn-tools { padding:22px; border-radius:16px; }
.learn-track-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.learn-track-tabs button { border:1px solid var(--card-border-strong); border-radius:8px; background:var(--card-bg-2); color:var(--card-ink-mute); padding:10px 14px; font-size:12px; }
.learn-track-tabs button[aria-pressed="true"] { color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:600; }
.learn-search-row { display:flex; gap:18px; align-items:flex-end; }
.learn-search-wrap { position:relative; flex:1; display:block; min-width:0; }
.learn-search-wrap > svg { position:absolute; top:14px; left:14px; color:var(--card-ink-mute); }
.learn-page .learn-tools input.learn-search { width:100%; min-height:46px; padding:11px 14px 11px 42px; font-size:14px; background:var(--card-bg-2); border:1px solid var(--card-border-strong); border-radius:9px; color:var(--card-ink); }
.learn-page .learn-tools select { background:var(--card-bg-2); border:1px solid var(--card-border-strong); border-radius:9px; color:var(--card-ink); }
.learn-page .learn-tools input.learn-search:focus, .learn-page .learn-tools select:focus { border-color:var(--accent-text); outline:2px solid var(--accent-text); outline-offset:2px; box-shadow:none; }
.learn-search::placeholder { color:var(--card-ink-faint); opacity:1; }
.learn-page .learn-tools select { padding:11px 30px 11px 12px; min-height:44px; font-size:12px; max-width:100%; }
.learn-tools label:not(.learn-search-wrap) { display:flex; flex-direction:column; gap:6px; color:var(--card-ink-mute); font-size:11px; }
.learn-sort-label { min-width:185px; }
.learn-filter-row { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; border-top:1px solid var(--card-border); margin-top:20px; padding-top:16px; }
.learn-filter-row .learn-text-button { min-height:44px; color:var(--card-ink-mute); }
.learn-path-progress { font-size:11px; color:var(--card-ink-faint); margin:0 0 14px auto; }
.learn-result-line { display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--shell-ink-mute); scroll-margin-top:20px; }
.learn-result-line strong { color:var(--shell-ink); }
.learn-search-note { font-size:12px; color:var(--shell-ink-mute); }
.learn-result-line > span:last-child { font-size:11px; color:var(--shell-ink-faint); }
.learn-empty { grid-column:1/-1; border-radius:16px; text-align:center; padding:48px 24px; }
.learn-empty h3 { font-size:26px; margin-bottom:12px; }
.learn-empty p { color:var(--card-ink-mute); margin-bottom:24px; font-size:14px; line-height:1.7; }
.learn-pagination { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--shell-ink-mute); }
.learn-pagination button { display:flex; gap:6px; align-items:center; min-height:42px; padding:9px 14px; border-radius:8px; background:var(--shell-surface-2); color:var(--shell-ink); border:1px solid var(--shell-border-strong); }
.learn-pagination button:disabled { opacity:.5; cursor:default; }
.learn-pagination label { display:flex; gap:8px; align-items:center; font-size:11px; }
.learn-page .learn-pagination .learn-page-input { width:60px; min-height:42px; background:var(--shell-surface-2); color:var(--shell-ink); border:1px solid var(--shell-border-strong); border-radius:8px; padding:8px; }
.learn-reader-back { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:11px; color:var(--shell-ink-mute); }
.learn-reader-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:30px; align-items:start; }
.learn-toc { position:sticky; top:18px; display:flex; flex-direction:column; gap:12px; padding-top:16px; font-size:12px; line-height:1.5; }
.learn-toc a { color:var(--shell-ink-mute); text-decoration:none; padding-left:12px; border-left:2px solid var(--shell-border-strong); }
.learn-toc a:hover, .learn-toc a:focus { color:var(--shell-ink); border-left-color:var(--accent-text); }
.learn-toc-bottom { border-top:1px solid var(--shell-border-strong); padding-top:18px; margin-top:16px; color:var(--shell-ink-faint); font-size:11px; line-height:1.8; }
.learn-reader { padding:40px 44px; border-radius:18px; min-width:0; }
.learn-reader header { border-bottom:1px solid var(--card-border-strong); padding-bottom:24px; margin-bottom:28px; }
.learn-reader h2 { font-size:36px; line-height:1.15; margin-bottom:12px; }
.learn-reader-summary { font-size:16px; line-height:1.8; color:var(--card-ink-mute); margin-top:20px !important; }
.learn-sanskrit { font:italic 16px/1.6 var(--font-alt); color:var(--accent-text); }
.learn-reader-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:18px; }
.learn-reader-actions .learn-save { padding-left:0; }
.learn-reading-body { max-width:68ch; margin:0 auto; }
.learn-reading-body section { margin-bottom:32px; scroll-margin-top:24px; }
.learn-reading-body section > h3 { margin-bottom:13px; font-size:25px; }
.learn-reading-body section > p, .learn-reading-body li { font-size:16px; line-height:1.85; color:var(--card-ink); }
.learn-key-ideas { background:var(--card-bg-2); border:1px solid var(--card-border-strong); border-radius:12px; padding:22px; }
.learn-key-ideas ul { margin:12px 0 0; padding-left:20px; }
.learn-key-ideas li { padding-left:5px; margin-bottom:10px; font-size:14px; }
.learn-key-ideas li:last-child { margin-bottom:0; }
.learn-source { padding-top:8px; }
.learn-source p { font-size:13px !important; color:var(--card-ink-mute) !important; }
.learn-source-note { margin-top:8px !important; }
.learn-reader-finish { border-top:1px solid var(--card-border-strong); padding-top:26px; }
.learn-reader-finish p { font-size:13px !important; color:var(--card-ink-mute) !important; margin-top:8px; }
.learn-practice-links { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.learn-practice { display:flex; align-items:center; gap:6px; min-height:42px; padding:9px 13px; border:1px solid var(--card-border-strong); background:var(--card-bg-2); border-radius:8px; color:var(--card-ink); font-size:12px; }
.learn-completed-button { background:var(--card-bg-2); border:1px solid var(--card-border-strong); color:var(--card-ink); }
.learn-reader-extras { display:flex; gap:20px; flex-wrap:wrap; border-top:1px solid var(--card-border); padding-top:20px; font-size:11px; }
.learn-reader-extras a, .learn-reader-extras button { display:inline-flex; align-items:center; gap:4px; color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.learn-reader-extras button { background:none; border:0; font-size:11px; padding:0; }
.learn-reader-navigation { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-left:215px; }
.learn-reader-navigation button { background:none; border:1px solid var(--shell-border-strong); color:var(--shell-ink); border-radius:12px; padding:18px; text-align:left; display:flex; flex-direction:column; gap:7px; }
.learn-reader-navigation button:last-child { text-align:right; align-items:flex-end; }
.learn-reader-navigation span { font-size:10px; color:var(--shell-ink-faint); }
.learn-reader-navigation strong { font-size:12px; font-weight:500; }
.learn-loading { padding:30px 0; text-align:center; color:var(--card-ink-mute); line-height:1.8; }
.learn-loading button { margin-top:20px; }
.learn-workflow ol { padding-left:24px; }
.learn-workflow li { padding:10px 0; }
.learn-workflow summary { cursor:pointer; font-size:14px; font-weight:600; }
.learn-workflow details p { font-size:14px; line-height:1.8; margin-top:10px; color:var(--card-ink-mute); }
.learn-video-dialog { max-width:760px; width:calc(100% - 32px); padding:24px; border-radius:16px; color:var(--card-ink); background:var(--card-bg); }
.learn-video-dialog::backdrop { background:var(--scrim); }
.learn-video-dialog video { display:block; width:100%; margin:20px 0; }
@media (max-width:1100px) {
.learn-page { padding:24px; }
.learn-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.learn-hero-copy { padding:28px; }
.learn-reader-layout { grid-template-columns:155px minmax(0,1fr); gap:22px; }
.learn-reader { padding:30px; }
.learn-reader-navigation { padding-left:177px; }
}
@media (max-width:760px) {
.learn-page { padding:18px 16px 88px; gap:24px; }
.learn-hero { grid-template-columns:1fr; }
.learn-hero-copy { padding:28px; }
.learn-hero-art { min-height:210px; border-left:0; border-top:1px solid var(--card-border-strong); }
.learn-hero-art img { object-position:center 47%; }
.learn-hero h2 { font-size:34px; }
.learn-progress-strip { flex-wrap:wrap; gap:12px; }
.learn-progress-strip progress { flex:1 1 35%; }
.learn-progress-strip > span { width:100%; }
.learn-section-heading { align-items:flex-start; flex-direction:column; gap:10px; }
.learn-reader-layout { grid-template-columns:1fr; gap:20px; }
.learn-toc { position:static; padding:0; flex-direction:row; flex-wrap:wrap; gap:10px; }
.learn-toc .learn-eyebrow { width:100%; margin-bottom:0; }
.learn-toc a { font-size:11px; }
.learn-toc-bottom { display:none; }
.learn-reader-navigation { padding-left:0; }
.learn-library-heading h2 { font-size:32px; }
.learn-result-line > span:last-child { display:none; }
}
@media (max-width:560px) {
.learn-toc a { min-height:40px; display:flex; align-items:center; padding:6px 10px; border:1px solid var(--shell-border-strong); border-radius:7px; }
.learn-page h2 { font-size:27px; }
.learn-hero h2 { font-size:32px; }
.learn-hero-copy { padding:24px; }
.learn-hero-actions { gap:12px; }
.learn-path-grid, .learn-catalog-grid { grid-template-columns:1fr; }
.learn-tabs { gap:18px; }
.learn-tabs button { font-size:12px; gap:6px; }
.learn-tools { padding:16px; }
.learn-search-row { flex-direction:column; align-items:stretch; gap:14px; }
.learn-sort-label { min-width:0; }
.learn-filter-row { gap:12px; }
.learn-filter-row label { flex:1 1 120px; }
.learn-path-progress { width:100%; margin:0; }
.learn-reader { padding:24px 20px; }
.learn-reader h2 { font-size:30px; }
.learn-reading-body section > h3 { font-size:23px; }
.learn-reader-back { align-items:flex-start; flex-direction:column; gap:6px; }
.learn-reader-navigation { gap:10px; }
.learn-reader-navigation button { padding:14px; }
.learn-save { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
.learn-page *, .learn-page *::before, .learn-page *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
.view-fade.protocols-library{max-width:1080px;margin:0 auto;padding:28px 32px 96px!important}
.protocols-library .protocols-intro{padding:12px 0 24px;border:0;margin-bottom:8px}
.protocols-library h2{font-family:var(--font-display,Georgia,serif);font-size:clamp(28px,3.5vw,42px);line-height:1.15;margin:10px 0 14px;color:var(--shell-ink)}
.protocols-library .protocols-intro p{font-size:15px;color:var(--shell-ink-mute);line-height:1.6;max-width:680px}
.protocols-library .protocols-intro>.eyebrow{color:var(--shell-ink-mute)}
.protocols-library .protocol-prepare>.eyebrow{color:var(--card-ink-mute)}
.protocol-discovery{padding:22px;margin-bottom:24px;background:var(--card-bg);color:var(--card-ink)}
.protocol-discovery>label{display:block;font-weight:600;margin-bottom:10px}
.protocol-search-row{display:flex;gap:10px}
.protocol-search-row input{min-width:0;flex:1;border:1px solid var(--card-border);background:var(--card-bg-2);color:var(--card-ink);border-radius:10px;padding:12px!important;font-size:16px}
.protocol-search-row input::placeholder{color:var(--card-ink-mute)}
.protocol-search-note,.protocol-footer-note{font-size:13px;line-height:1.6;color:var(--card-ink-mute)}
.protocol-footer-note{color:var(--shell-ink-mute);margin-top:24px}
.protocol-goals{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.protocol-goals .btn{min-height:40px;border-radius:24px}
.protocol-filter-row{display:flex;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--card-border)}
.protocol-filter-row label{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--card-ink-mute)}
.protocol-filter-row select{padding:9px;border:1px solid var(--card-border);border-radius:8px;background:var(--card-bg-2);color:var(--card-ink);font:inherit;max-width:100%}
.protocol-result-count{font-size:13px;color:var(--shell-ink-mute);margin:0 0 14px}
.protocols-library .protocol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.protocol-discovery-card{padding:20px;display:flex;flex-direction:column;background:var(--card-bg);color:var(--card-ink);border:1px solid var(--card-border);transition:transform .18s,box-shadow .18s;min-width:0}
.protocol-discovery-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.protocol-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}
.protocol-point-icon{color:var(--accent-text);background:var(--card-bg-2);padding:10px;border-radius:12px;display:flex}
.protocol-tag{font-size:11px;color:var(--card-ink-mute);border:1px solid var(--card-border);border-radius:20px;padding:5px 8px}
.protocol-discovery-card h3,.protocol-detail h3{font-size:18px;line-height:1.3;margin:0 0 10px;color:var(--card-ink)}
.protocol-discovery-card p{font-size:13px;line-height:1.6;color:var(--card-ink-mute);margin:0 0 18px;flex:1}
.protocol-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--card-ink-mute);margin-bottom:12px}
.protocol-evidence{font-size:12px;color:var(--card-ink-mute);padding-top:12px;border-top:1px solid var(--card-border);margin-bottom:16px}
.protocol-view-button{width:100%;justify-content:space-between;min-height:44px}
.protocol-message{padding:28px;border:1px solid var(--card-border);border-radius:16px;background:var(--card-bg);color:var(--card-ink);line-height:1.6}
.protocol-detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
.protocol-detail-main,.protocol-prepare{padding:26px;background:var(--card-bg);color:var(--card-ink);line-height:1.7}
.protocol-detail-main p,.protocol-prepare p,.protocol-prepare li{font-size:14px;color:var(--card-ink-mute)}
.protocol-prepare ol{padding-left:20px;margin:16px 0}
.protocol-prepare li{margin-bottom:12px}
.protocol-facts{margin:20px 0 28px}.protocol-facts>div{padding:12px 0;border-bottom:1px solid var(--card-border)}
.protocol-facts dt{font-size:12px;color:var(--card-ink-mute)}.protocol-facts dd{margin:4px 0 0;font-size:15px}
.protocol-evidence-details{margin:20px 0;padding:14px;border:1px solid var(--card-border);border-radius:10px}
.protocol-evidence-details summary{cursor:pointer;font-weight:600;min-height:28px}
.protocol-caution{border-left:3px solid var(--accent-text);padding-left:12px}
.protocol-prepare .btn-gold{width:100%;min-height:48px;margin:12px 0}
.protocols-library :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--accent-text)!important;outline-offset:3px}
.protocol-device-note{font-size:12px!important}
.library-dialog{padding:0;border:0;max-width:none;max-height:none;width:100vw;height:100dvh;inset:0;margin:0;background:transparent;color:var(--card-ink)}
.library-dialog::backdrop{background:rgba(5,7,6,.55)}
.library-open-point{justify-content:space-between}
.library-availability,.library-empty p{font-size:14px;line-height:1.6;color:var(--card-ink-mute)}
.library-view-shell .point-card p[style*="gold-deep"]{color:var(--card-ink-mute)!important}
.library-view-shell .point-card:focus-within{outline:2px solid var(--accent-text);outline-offset:3px}
.library-view-shell>div:first-child>div:first-child{flex-wrap:wrap;gap:18px}
.library-dialog .drawer-panel{max-width:min(560px,100vw);height:100%;overflow-y:auto;background:var(--card-bg)}
.practice-setup-dialog{width:min(520px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:28px;border:1px solid var(--card-border);border-radius:20px;background:var(--card-bg);color:var(--card-ink)}
.practice-setup-dialog::backdrop{background:rgba(5,7,6,.6)}
.practice-setup-dialog h2{font-size:26px;line-height:1.25;margin:10px 0 16px;font-family:var(--font-display,Georgia,serif)}
.practice-setup-dialog p,.practice-setup-dialog li{font-size:14px;line-height:1.65;color:var(--card-ink-mute)}
.practice-setup-dialog label{display:block;font-size:14px;font-weight:600;margin:18px 0 8px}
.practice-setup-dialog select{width:100%;color:var(--card-ink);background:var(--card-bg-2);border:1px solid var(--card-border);min-height:44px}
.practice-setup-dialog .eyebrow{color:var(--card-ink-mute)}
.setup-actions{display:flex;gap:12px;margin-top:22px}.setup-actions button{flex:1;min-height:46px}
.setup-technique{padding:12px;border-radius:10px;background:var(--card-bg-2)}
.data-use-page{max-width:820px;margin:0 auto;padding:40px 24px 80px;color:var(--shell-ink)}
.data-use-page h1{font-family:var(--font-display,Georgia,serif);font-size:36px;line-height:1.2;margin:24px 0}
.data-use-page article{padding:28px;background:var(--card-bg);color:var(--card-ink)}
.data-use-page h2{font-size:20px;margin:26px 0 12px}.data-use-page h2:first-child{margin-top:0}
.data-use-page p{font-size:15px;line-height:1.75;color:var(--card-ink-mute)}
.data-use-page nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}.data-use-page nav a{color:var(--shell-ink);text-underline-offset:4px}
.auth-fine-print a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.protocol-engine-facts,.protocol-stage-preview{font-size:14px;line-height:1.65;color:var(--card-ink-mute)}
.protocol-live-metrics{background:var(--shell-surface);color:var(--shell-ink);border:1px solid var(--shell-border);border-radius:12px}
.protocol-live-metrics summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
#ar-viewport #setup-check-panel,#ar-viewport #setup-check-panel [style*="color:var(--shell-ink"],#ar-viewport #timer-display,#ar-viewport #ring-pct,#ar-viewport [style*="background:rgba(5,7,6,0.7)"] [style*="color:var(--shell-ink"]{color:#F5F1E8!important}
#ar-viewport #setup-check-panel [style*="color:var(--accent-text)"]{color:#F2CF65!important}
.protocols-library .card::before,.protocols-library .card::after{background-image:none!important;pointer-events:none}
@media(max-width:1100px){.protocols-library .protocol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.view-fade.protocols-library{padding:20px 16px 96px!important}.protocols-library .protocol-grid,.protocol-detail-grid{grid-template-columns:1fr}.protocol-discovery,.protocol-detail-main,.protocol-prepare{padding:18px}.protocol-filter-row label{flex-wrap:wrap}.protocol-search-row .btn{padding:10px}.protocols-library h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){.protocol-discovery-card{transition:none}.protocol-discovery-card:hover{transform:none}}
.protocols-view-shell { background:linear-gradient(180deg,var(--shell-surface),var(--shell-bg)); border:1px solid var(--shell-border); border-radius:22px; box-shadow:var(--shadow-card); }
/* ── Protocol detail: the points this practice actually uses ───────────────
A protocol names its targets in backend strings that mean nothing to a user.
These rules give each resolved point a readable block: photograph, name,
region, where it is, why it is here, how long, and how cautious to be.
Tokens only, so light and hybrid both stay legible. */
.protocol-press{margin:0 0 20px;padding:12px 14px;border-radius:12px;border:1px solid var(--card-border);background:var(--card-bg-2);font-size:14px;line-height:1.65;color:var(--card-ink)}
.protocol-press-alt{margin:-10px 0 20px;padding:0 14px;font-size:13px;line-height:1.6;color:var(--card-ink-mute)}
.protocol-points-note{margin:-8px 0 16px;font-size:13.5px;color:var(--card-ink-mute)}
.protocol-point-list{list-style:none;margin:18px 0 24px;padding:0;display:flex;flex-direction:column;gap:14px}
.protocol-point{padding:16px;border-radius:14px;border:1px solid var(--card-border);background:var(--card-bg-2)}
.protocol-point-step{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono);color:var(--card-ink-faint);margin-bottom:10px}
.protocol-point-head{display:flex;gap:14px;align-items:flex-start}
.protocol-point-thumb{width:64px;height:64px;flex:none;object-fit:cover;border-radius:10px;border:1px solid var(--card-border);background:var(--card-bg)}
.protocol-point-titles{min-width:0;flex:1}
.protocol-point-name{font-family:var(--font-display);font-size:17px;font-weight:500;color:var(--card-ink);line-height:1.25}
.protocol-point-english{font-family:var(--font-ui);font-size:13px;font-weight:400;color:var(--card-ink-mute)}
.protocol-point-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.protocol-point-meta span{font-size:10.5px;font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--card-bg);border:1px solid var(--card-border);color:var(--card-ink-faint)}
.protocol-point-where,.protocol-point-why,.protocol-point-how{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:var(--card-ink-mute)}
.protocol-point-where strong,.protocol-point-why strong,.protocol-point-how strong{color:var(--card-ink);font-weight:600}
.protocol-point-tradition{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--card-ink-faint);font-style:italic}
.protocol-point-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.protocol-point-dur,.protocol-point-accuracy,.protocol-point-caution{font-size:11px;font-family:var(--font-mono);letter-spacing:.04em;padding:4px 8px;border-radius:6px;border:1px solid var(--card-border);color:var(--card-ink-faint)}
.protocol-point-caution{border-color:var(--state-unverified-border,var(--card-border-strong));color:var(--state-unverified-text,var(--card-ink-mute))}
.protocol-point-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.protocol-point-links .btn-ghost{font-size:12px;padding:7px 12px;min-height:44px;color:var(--card-ink);border-color:var(--card-border-strong)}
/* The engine's per-condition safety note. Leads the "before you begin" panel
because it names this condition's own red flags, unlike the 5-entry
fallback map it replaced. */
.protocol-safety-note{margin:16px 0;padding:14px;border-radius:12px;border:1px solid var(--danger-soft-border);background:var(--danger-soft)}
.protocol-safety-note strong{display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--danger-text);margin-bottom:6px}
.protocol-safety-note p{margin:0;font-size:13px;line-height:1.65;color:var(--card-ink-mute)}
@media(max-width:720px){.protocol-point{padding:14px}.protocol-point-thumb{width:52px;height:52px}.protocol-point-links .btn-ghost{flex:1;justify-content:center}}
.protocols-intro { padding:4px 4px 18px; border-bottom:1px solid rgba(212,175,55,.18); }
.protocols-start-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:rgba(25,135,84,.14); border:1px solid rgba(25,135,84,.28); color:var(--accent-text); font:600 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.protocols-start-badge span { color:var(--accent-text); font-size:13px; }
.protocols-advisor-card { box-shadow:0 12px 28px rgba(0,0,0,.16); }
.protocols-advisor-card #symptom-input:focus, .protocols-view-shell #protocol-search:focus { outline:none; border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(212,175,55,.16); }
.protocols-advisor-card .symptom-chip { transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.protocols-advisor-card .symptom-chip:hover { transform:translateY(-1px); border-color:var(--gold); background:rgba(212,175,55,.12); }
.protocol-grid .protocol-card { box-shadow:0 8px 20px rgba(0,0,0,.12); transition:transform .18s ease, box-shadow .18s ease; }
.protocol-grid .protocol-card:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.2); }
.programs-view-shell { background:linear-gradient(180deg,var(--shell-surface),var(--shell-bg)); border:1px solid var(--shell-border); border-radius:22px; box-shadow:var(--shadow-card); }
.programs-intro { padding:4px 4px 18px; border-bottom:1px solid var(--shell-border); }
.programs-start-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; background:var(--accent-soft); border:1px solid var(--shell-border-strong); color:var(--accent-text); font:600 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.programs-start-badge span { color:var(--accent-text); font-size:13px; }
.programs-intro .font-display { color:var(--shell-ink) !important; }
.programs-empty-state { min-height:180px; padding:28px 24px; border:1px dashed var(--shell-border-strong); border-radius:16px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; color:var(--shell-ink-mute); background:var(--shell-surface-2); }
.programs-empty-state .font-display { color:var(--shell-ink); font-size:20px; }
.programs-empty-icon { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text); font-size:20px; }
.programs-empty-state .btn { margin-top:6px; }
.programs-active-strip { border:1px solid var(--shell-border-strong); background:linear-gradient(135deg,var(--card-bg-2),var(--card-bg)) !important; box-shadow:var(--shadow-card); }
.programs-active-strip .btn-card { box-shadow:0 8px 18px rgba(0,0,0,.16); }
.program-card { box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.program-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.programs-catalog .eyebrow { color:var(--accent-text); }
.analytics-view-shell, .history-view-shell, .accuracy-view-shell, .calibrate-view-shell { background:linear-gradient(180deg,var(--shell-surface),var(--shell-bg)); border:1px solid var(--shell-border); border-radius:22px; box-shadow:var(--shadow-card); }
.analytics-view-shell > div:first-child, .history-view-shell > div:first-child, .accuracy-view-shell > div:first-child, .calibrate-view-shell > div:first-child { padding-top:4px; }
.analytics-view-shell .card-paper, .history-view-shell .card, .accuracy-view-shell .card, .calibrate-view-shell .card { box-shadow:var(--shadow-card); }
.analytics-view-shell .seg, .history-view-shell select { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.analytics-view-shell .btn-ghost:hover, .history-view-shell select:focus { border-color:var(--accent-text) !important; }
.history-view-shell select:focus { outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.history-view-shell h2 { color:var(--shell-ink) !important; }
.accuracy-view-shell .card-shell { border-color:var(--shell-border-strong); }
.calibrate-view-shell { min-height:360px; }
.library-view-shell, .safety-view-shell, .practitioner-view-shell { background:linear-gradient(180deg,var(--shell-surface),var(--shell-bg)); border:1px solid var(--shell-border); border-radius:22px; box-shadow:var(--shadow-card); }
.library-view-shell .point-card { box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.library-view-shell .point-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-pop); border-color:var(--accent-text) !important; }
.library-view-shell .region-chip { transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.library-view-shell .region-chip:hover { transform:translateY(-1px); }
.safety-view-shell .safety-item, .practitioner-view-shell .card { box-shadow:var(--shadow-card); }
.safety-view-shell .safety-item { transition:transform .18s ease, box-shadow .18s ease; }
.safety-view-shell .safety-item:hover { transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.practitioner-view-shell table { background:var(--card-bg); border-radius:var(--radius); overflow:hidden; }
#explorer-canvas {
isolation:isolate;
z-index:3;
/* Plain white studio backdrop; the transparent WebGL canvas reveals it. */
background:#FFFFFF !important;
}
#explorer-canvas canvas {
display:block;
background:#FFFFFF !important;
filter:none !important;
}
@media (max-width: 760px) {
#dash-symptom-input { width: 100%; }
#dash-symptom-find { width: 100%; justify-content: center; }
.dashboard-hero-card { flex-direction:column !important; padding:24px !important; gap:22px !important; }
.dashboard-hero-visual { width:100% !important; min-height:220px !important; }
.learn-view-shell, .protocols-view-shell, .programs-view-shell, .analytics-view-shell, .history-view-shell, .accuracy-view-shell, .calibrate-view-shell, .library-view-shell, .safety-view-shell, .practitioner-view-shell { margin:0 !important; padding-left:16px !important; padding-right:16px !important; border-radius:16px; }
.programs-view-shell .grid-2, .analytics-view-shell .grid-4, .analytics-view-shell .grid-2-equal { grid-template-columns:1fr !important; }
.programs-active-strip > div { flex-direction:column !important; }
.programs-active-strip > div > div:last-child { width:100%; }
}
/* ======================================================================
BREAKPOINT: Tablet (max-width: 768px)
====================================================================== */
@media (max-width: 768px) {
:root {
--sidebar-w: 280px;
}
/* Sidebar: mobile overlay mode */
.app-shell .sidebar:not(.is-mobile-overlay) {
display: none !important;
}
/* Show hamburger */
.topbar-hamburger { display: flex; }
/* Topbar compact */
.topbar { padding: 0 14px; gap: 8px; }
.topbar-search { display: none; }
/* Grids */
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: 1fr; }
.grid-regions { grid-template-columns: 1fr; }
/* View padding */
.view-pad { padding: 20px 16px 28px; }
.view-pad-sm { padding: 16px 14px 24px; }
/* Cards */
.safety-item { flex-direction: column; gap: 12px; padding: 18px; }
/* Analytics session table: force horizontal scroll */
.grid-analytics-table { min-width: 600px; }
/* Region chips */
.region-chip { font-size: 11.5px; padding: 6px 12px; }
/* Drawer */
.drawer-panel { width: 100%; }
}
/* ======================================================================
BREAKPOINT: Phone (max-width: 560px)
====================================================================== */
@media (max-width: 560px) {
/* Grids: single column */
.grid-4 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-2-equal { grid-template-columns: 1fr; }
/* Topbar */
.topbar { height: 56px; padding: 0 12px; gap: 6px; }
/* View padding */
.view-pad { padding: 16px 12px 24px; }
.view-pad-sm { padding: 14px 10px 20px; }
/* KPI cards: tighter */
.kpi-card { padding: 14px !important; }
.kpi-card .kpi-value { font-size: 22px !important; }
/* Font sizes */
.font-display { font-size: inherit; }
}
/* ======================================================================
BREAKPOINT: Very small phone (max-width: 400px)
====================================================================== */
@media (max-width: 400px) {
.grid-4 { grid-template-columns: 1fr; }
.topbar { height: 50px; padding: 0 10px; }
.btn-primary { font-size: 13px; padding: 8px 14px; }
}
/* ======================================================================
Landscape phone adjustments
====================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
.sidebar.is-mobile-overlay { width: 240px !important; }
}
/* ======================================================================
Touch device improvements
====================================================================== */
@media (hover: none) and (pointer: coarse) {
.side-item { padding: 12px; min-height: 44px; }
.btn { min-height: 44px; }
.topbar-hamburger { min-width: 44px; min-height: 44px; }
.region-chip { padding: 10px 14px; }
}
/* ======================================================================
Desktop-only: hide on mobile
====================================================================== */
@media (max-width: 768px) {
.desktop-only { display: none !important; }
}
/* ---- Dashboard hero responsive ---- */
@media (max-width: 900px) {
#dashboard-hero { flex-direction: column !important; }
#dashboard-hero > div:last-child { width: 100% !important; min-height: 180px; }
}
@media (max-width: 560px) {
#dashboard-hero { padding: 20px !important; gap: 16px !important; }
#dashboard-hero .font-display { font-size: 28px !important; }
}
/* ---- 3D Explorer responsive ---- */
@media (max-width: 900px) {
.explorer-sidebar { width: 240px !important; }
}
@media (max-width: 768px) {
.explorer-sidebar { display: none !important; }
.view-fade { padding: 0 !important; }
}
/* ==========================================================================
THEME MODES — complete token sets
--------------------------------------------------------------------------
Every mode defines EVERY token below. Modes are applied declaratively via
, never by partial inline overrides: the previous
implementation wrote only *some* shell/card vars per mode and never reset
them, so switching light → dark left the light shell vars in place while
the card vars went dark. That produced light text on a light background —
the "text disappears" bug. A mode change must now be a single attribute
flip; see tests/test_theme_tokens.py, which fails if any mode is missing a
token or if the JS reintroduces inline token writes.
Modes:
hybrid (default) — dark shell, parchment content cards (the house look)
dark — dark shell, dark content cards
light — light shell, white content cards
"System" is resolved in JS (tweaks.js) to dark|light and re-resolved live
when the OS preference changes.
========================================================================== */
:root,
:root[data-theme="hybrid"] {
--shell-bg: #0E1210;
--shell-surface: #171B18;
--shell-surface-2: #1E2320;
--shell-border: rgba(212,175,55,0.14);
--shell-border-strong: rgba(212,175,55,0.28);
--shell-ink: #E8E1D0;
--shell-ink-mute: #9BA097;
/* Faint tier is still TEXT, so it clears AA (4.5:1) on the darkest and
lightest surface it can land on — #5D6259 was 3.06:1 on the shell. */
--shell-ink-faint: #8A9086;
--card-bg: #F5EFE3;
--card-bg-2: #EDE5D3;
--card-border: rgba(26,29,32,0.10);
--card-border-strong: rgba(26,29,32,0.18);
--card-ink: #1A1D20;
--card-ink-mute: #5A5F5A;
/* Hybrid cards are PARCHMENT (light), whatever the shell does, so the faint
tier has to be dark enough to read on cream — #8A8F87 measured 2.88:1. */
--card-ink-faint: #61665F;
--field-bg: rgba(255,255,255,0.045);
--field-border: rgba(212,175,55,0.20);
--field-ink: #E8E1D0;
--field-ink-mute: #9BA097;
--field-placeholder: #8A9086;
--topbar-bg: rgba(14,18,16,0.70);
--tooltip-bg: #1E2320;
--tooltip-ink: #E8E1D0;
--sidebar-sheen: rgba(255,255,255,0.03);
--sidebar-active-ink: #F5EFE3;
--sheen-from: rgba(255,255,255,0.40);
--on-accent: #1A1D20;
--shadow-card: 0 4px 24px rgba(0,0,0,0.08);
--shadow-pop: 0 20px 50px rgba(0,0,0,0.5);
--scrim: rgba(0,0,0,0.55);
--accent: #D4AF37;
--accent-deep: #B8941F;
--accent-strong: #7A5F0E;
--accent-soft: rgba(212,175,55,0.18);
--gold: #D4AF37;
--gold-deep: #B8941F;
--gold-soft: rgba(212,175,55,0.18);
/* Accent-coloured TEXT needs a different value per surface: the bright gold
is 6.5:1 on a dark shell but only 2.1:1 on parchment, so light surfaces
use the deep variant. Fills keep using --accent. */
--accent-text: var(--accent-bright);
--danger-text: #EF4444;
/* Tinted danger surfaces. --danger-text is a TEXT token tuned for legibility
on a card; painting a panel with it would fail contrast in every mode.
This is the fill/border pair the safety panels use. */
--danger-soft: rgba(239,68,68,0.08);
--danger-soft-border: rgba(239,68,68,0.34);
/* Status colours are used as TEXT (chips, trends, validation lines), and
the bright status hues are tuned for a dark shell. On a light surface
they measure 2-4:1, so text uses these surface-aware variants and fills
keep the original --state-* values. */
--state-verified-text: #10B981;
--state-jitter-text: #F59E0B;
--state-unverified-text: #F87171;
}
:root[data-theme="dark"] {
--shell-bg: #0E1210;
--shell-surface: #171B18;
--shell-surface-2: #1E2320;
--shell-border: rgba(212,175,55,0.14);
--shell-border-strong: rgba(212,175,55,0.28);
--shell-ink: #E8E1D0;
--shell-ink-mute: #9BA097;
--shell-ink-faint: #8A9086;
--card-bg: #1B211D;
--card-bg-2: #232A25;
--card-border: rgba(212,175,55,0.14);
--card-border-strong: rgba(212,175,55,0.28);
--card-ink: #E8E1D0;
--card-ink-mute: #9BA097;
/* Dark cards are DARK, so the faint tier must lift rather than deepen:
#5D6259 measured 2.62:1 against #1B211D, and it also has to clear 3:1
once it becomes a form-field placeholder over a translucent field. */
--card-ink-faint: #949A90;
--field-bg: rgba(255,255,255,0.05);
--field-border: rgba(212,175,55,0.20);
--field-ink: #E8E1D0;
--field-ink-mute: #9BA097;
/* A placeholder is text: 4.5:1 over the translucent field on a dark card. */
--field-placeholder: #949A90;
--topbar-bg: rgba(14,18,16,0.70);
--tooltip-bg: #1E2320;
--tooltip-ink: #E8E1D0;
--sidebar-sheen: rgba(255,255,255,0.03);
--sidebar-active-ink: #F5EFE3;
--sheen-from: rgba(255,255,255,0.06);
--on-accent: #1A1D20;
--shadow-card: 0 4px 24px rgba(0,0,0,0.35);
--shadow-pop: 0 20px 50px rgba(0,0,0,0.5);
--scrim: rgba(0,0,0,0.55);
--accent: #D4AF37;
--accent-deep: #B8941F;
--accent-strong: #7A5F0E;
--accent-soft: rgba(212,175,55,0.18);
--gold: #D4AF37;
--gold-deep: #B8941F;
--gold-soft: rgba(212,175,55,0.18);
--accent-text: var(--accent-bright);
/* A red that reads on a dark card (4.35:1 was a hair under AA). */
--danger-text: #F87171;
/* Tinted danger surfaces — same alpha pair as hybrid, tuned for a dark card. */
--danger-soft: rgba(239,68,68,0.08);
--danger-soft-border: rgba(239,68,68,0.34);
--state-verified-text: #10B981;
--state-jitter-text: #F59E0B;
--state-unverified-text: #F87171;
}
:root[data-theme="light"] {
--shell-bg: #F5EFE3;
--shell-surface: #EDE5D3;
--shell-surface-2: #E4DAC4;
--shell-border: rgba(26,29,32,0.10);
--shell-border-strong: rgba(26,29,32,0.18);
--shell-ink: #1A1D20;
--shell-ink-mute: #5A5F5A;
--shell-ink-faint: #5B605A;
--card-bg: #FFFFFF;
--card-bg-2: #F7F3EA;
--card-border: rgba(26,29,32,0.10);
--card-border-strong: rgba(26,29,32,0.18);
--card-ink: #1A1D20;
--card-ink-mute: #5A5F5A;
--card-ink-faint: #5B605A;
--field-bg: rgba(255,255,255,0.80);
--field-border: rgba(26,29,32,0.16);
--field-ink: #1A1D20;
--field-ink-mute: #5A5F5A;
--field-placeholder: #5B605A;
--topbar-bg: rgba(245,239,227,0.78);
--tooltip-bg: #FFFFFF;
--tooltip-ink: #1A1D20;
--sidebar-sheen: rgba(255,255,255,0.45);
--sidebar-active-ink: #0F5132;
--sheen-from: rgba(255,255,255,0.65);
--on-accent: #1A1D20;
--shadow-card: 0 4px 24px rgba(26,29,32,0.10);
--shadow-pop: 0 18px 44px rgba(26,29,32,0.22);
--scrim: rgba(26,29,32,0.45);
--accent: #D4AF37;
--accent-deep: #B8941F;
--accent-strong: #7A5F0E;
--accent-soft: rgba(212,175,55,0.22);
--gold: #D4AF37;
--gold-deep: #B8941F;
--gold-soft: rgba(212,175,55,0.22);
/* On a light surface the deep accent is the legible one (4.9:1 vs 2.1:1).
--accent-strong is resolved from the accent block below, so this alias
follows the user's accent choice rather than pinning gold. */
--accent-text: var(--accent-strong);
--danger-text: #B91C1C;
/* Tinted danger surfaces — a deeper red so the fill does not wash out on
parchment, where the dark-mode alpha pair reads as a pink smudge. */
--danger-soft: rgba(185,28,28,0.07);
--danger-soft-border: rgba(185,28,28,0.30);
/* Deepened for light surfaces: #10B981 as text on white is 2.6:1 and
#F59E0B is 2.2:1 — legible on a dark shell, invisible on parchment. */
--state-verified-text: #0F5132;
--state-jitter-text: #92400E;
--state-unverified-text: #B91C1C;
}
/* --------------------------------------------------------------------------
Accent choices. Declared AFTER the mode blocks: both selectors have the
same specificity, so source order decides — and the accent must win for
--on-accent (copper and sage are dark fills, gold and ivory are light).
-------------------------------------------------------------------------- */
/* Each accent declares TWO text legs, because one colour cannot serve both
surfaces legibly:
--accent-strong legible ON A LIGHT surface (parchment / white cards)
--accent-bright legible ON A DARK surface (shell, dark cards)
--on-accent is the label colour that sits ON the accent fill itself.
tests/test_theme_tokens.py measures all three per mode per accent. */
:root[data-accent="gold"], :root {
/* #7A5F0E measured 4.36:1 on the light theme's raised panel (#E4DAC4),
just under AA, so the light-surface leg is one step deeper. */
--accent: #D4AF37; --accent-deep: #B8941F; --accent-strong: #6F560C; --accent-soft: rgba(212,175,55,0.18);
--accent-bright: #D4AF37;
--gold: #D4AF37; --gold-deep: #B8941F; --gold-soft: rgba(212,175,55,0.18);
--on-accent: #1A1D20;
}
:root[data-accent="copper"] {
--accent: #B87333; --accent-deep: #8B5A2B; --accent-strong: #7A4A20; --accent-soft: rgba(184,115,51,0.20);
/* Copper is the one accent dark enough to fail as text on a dark panel
(4.2:1), so its bright leg is a lifted tint of the same hue. */
--accent-bright: #D08A45;
--gold: #B87333; --gold-deep: #8B5A2B; --gold-soft: rgba(184,115,51,0.20);
--on-accent: #1C1109;
}
:root[data-accent="sage"] {
--accent: #87A96B; --accent-deep: #5F7A45; --accent-strong: #3F5530; --accent-soft: rgba(135,169,107,0.20);
--accent-bright: #87A96B;
--gold: #87A96B; --gold-deep: #5F7A45; --gold-soft: rgba(135,169,107,0.20);
--on-accent: #12200E;
}
:root[data-accent="ivory"] {
--accent: #E8DCC1; --accent-deep: #B8A57A; --accent-strong: #5C4E2E; --accent-soft: rgba(232,220,193,0.22);
--accent-bright: #E8DCC1;
--gold: #E8DCC1; --gold-deep: #B8A57A; --gold-soft: rgba(232,220,193,0.22);
--on-accent: #1A1D20;
}
/* --------------------------------------------------------------------------
.card-shell — a content card painted on the SHELL surface.
This class was used in view-profile.js (7x) and view-accuracy.js (2x) but
was never defined, so those cards fell back to .card's parchment surface
while their text used --shell-ink (light parchment-era ink on... parchment)
→ ~1.06:1 contrast, i.e. invisible text. Defining it is the other half of
the readability fix.
-------------------------------------------------------------------------- */
.card-shell {
/* Remap the content-card tokens onto the shell surface. A shell card has no
parchment in it, so anything inside that reaches for --card-ink / --card-bg
(inputs, chips, nested cards) must follow the shell — otherwise it is
dark-ink-on-dark-surface in hybrid mode. */
--card-bg: var(--shell-surface);
--card-bg-2: var(--shell-surface-2);
--card-border: var(--shell-border);
--card-border-strong: var(--shell-border-strong);
--card-ink: var(--shell-ink);
--card-ink-mute: var(--shell-ink-mute);
--card-ink-faint: var(--shell-ink-faint);
background: var(--shell-surface);
color: var(--shell-ink);
border: 1px solid var(--shell-border);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.card-shell:hover { box-shadow: var(--shadow-card); }
/* Same idea for the dark panel used by the tweaks popover. */
.card-dark {
--card-bg: var(--shell-surface);
--card-bg-2: var(--shell-surface-2);
--card-border: var(--shell-border);
--card-border-strong: var(--shell-border-strong);
--card-ink: var(--shell-ink);
--card-ink-mute: var(--shell-ink-mute);
--card-ink-faint: var(--shell-ink-faint);
}
/* Field tokens inside a PARCHMENT card must follow the card, not the shell.
.card-shell is excluded — it is a shell surface and keeps the shell values.
Parchment is a LIGHT surface in every mode, so this scope also re-points the
accent and status-red TEXT tokens at their light-surface legs. Without it,
hybrid mode painted gold-on-cream (1.8:1) on every `.card-paper`: the plan
badge, the profile stat figures and the billing amounts all went invisible
while the rest of the card stayed perfectly readable. */
.card:not(.card-shell),
.card-paper {
--field-bg: rgba(26,29,32,0.04);
--field-border: rgba(26,29,32,0.14);
--field-ink: var(--card-ink);
--field-ink-mute: var(--card-ink-mute);
--field-placeholder: var(--card-ink-faint);
--accent-text: var(--accent-strong);
--danger-text: #B91C1C;
--state-verified-text: #0F5132;
--state-jitter-text: #92400E;
--state-unverified-text: #B91C1C;
}
:root[data-theme="dark"] .card:not(.card-shell),
:root[data-theme="dark"] .card-paper {
--field-bg: rgba(255,255,255,0.05);
--field-border: rgba(212,175,55,0.18);
--field-ink: var(--card-ink);
--field-ink-mute: var(--card-ink-mute);
--field-placeholder: var(--card-ink-faint);
/* …except in dark mode, where these same cards are DARK and keep the
dark-surface legs. */
--accent-text: var(--accent-bright);
--danger-text: #F87171;
--state-verified-text: #10B981;
--state-jitter-text: #F59E0B;
--state-unverified-text: #F87171;
}
/* The parchment grain is a multiply overlay that only makes sense on a light
surface — on dark cards it muddies the text. */
:root[data-theme="dark"] .card-paper::before { opacity: 0.18; mix-blend-mode: normal; }
/* Inputs / selects / textareas that opt into the field tokens. */
.field {
width: 100%; font-family: var(--font-ui); font-size: 14px;
color: var(--field-ink);
background: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: 10px; padding: 11px 14px;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field::placeholder { color: var(--field-placeholder); }
.field:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field:disabled { opacity: 0.55; cursor: not-allowed; }
/* An input that sits inside .auth-input-wrap (icon on the left). */
.auth-input-wrap .field { padding-left: 40px; }
/* Theme swatch + plan badge chrome used by the profile/appearance cards. */
.swatch {
width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
border: 2px solid transparent; box-shadow: 0 0 0 1px var(--shell-border-strong);
padding: 0; background-clip: padding-box;
}
.swatch.on { border-color: var(--shell-ink); }
.plan-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 999px;
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: 0.10em; text-transform: uppercase;
background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft);
}
/* Accent-coloured text everywhere follows the surface it is painted on. */
.accent-text { color: var(--accent-text); }
.danger-text { color: var(--danger-text); }
/* Side-by-side profile sections on wide screens; single column on narrow. */
.profile-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
/* Shared polish + dashboard + mobile blocks (kept above the Namaste block: the shell test treats everything after the Namaste comment as panel CSS). *//* Product polish pass — shared visual language across every view. */
:root {
--shadow-soft: 0 12px 36px rgba(0,0,0,.16);
--shadow-lift: 0 18px 48px rgba(0,0,0,.22);
}
.topbar {
background: var(--topbar-bg);
backdrop-filter: blur(18px) saturate(120%);
border-bottom-color: var(--shell-border);
}
.topbar-search { transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.topbar-search:focus-within { border-color: var(--shell-border-strong); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--field-bg); }
.side-item { min-height: 46px; }
.side-item.active { box-shadow: inset 0 0 24px rgba(42,157,108,.12), 0 4px 16px rgba(0,0,0,.12); }
.side-item.active .side-icon { filter: drop-shadow(0 0 5px rgba(212,175,55,.35)); }
.side-item:focus-visible { background: rgba(212,175,55,.10); }
.side-item { border-radius: 12px; }
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(212,175,55,.12); }
.sidebar-footer { background: linear-gradient(180deg, transparent, rgba(255,255,255,.025)); }
.main-col { background: radial-gradient(900px 500px at 100% 0%, rgba(25,135,84,.035), transparent 65%), var(--shell-bg); }
.topbar > div:first-child h1 { text-wrap: balance; }
.view-scroll { scroll-behavior: smooth; scrollbar-gutter: stable; }
.view-scroll > .view-fade { min-height: 100%; }
.btn { min-height: 40px; }
.btn-primary, .btn-gold { box-shadow: 0 4px 14px rgba(212,175,55,.13); }
.btn-primary:hover, .btn-gold:hover { transform: translateY(-1px); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card-paper, .card-dark { box-shadow: 0 4px 18px rgba(0,0,0,.08); }
/* Consistent focus treatment for generated controls. */
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Keep content readable on wide displays without changing view-specific layouts. */
@media (min-width: 1280px) {
.view-scroll > .view-fade { max-width: 1180px; margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
.view-scroll { overflow-x: hidden; }
.card, .card-dark, .card-paper { border-radius: 16px; }
.btn { min-height: 44px; }
}
/* Phase 1 — shared interaction foundation. Keep generated views visually
consistent even when they use native controls instead of a component class. */
:root {
--control-height: 42px;
--control-radius: 10px;
--focus-ring: 0 0 0 3px rgba(212,175,55,.18);
--motion-fast: 140ms;
--motion-base: 200ms;
}
button, input, select, textarea { accent-color: var(--accent); }
button:not(:disabled), a, select, label[for] { -webkit-tap-highlight-color: transparent; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
min-height: var(--control-height);
border-radius: var(--control-radius);
border: 1px solid var(--field-border);
background: var(--field-bg);
color: var(--field-ink);
transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}
input:not([type="checkbox"]):not([type="radio"]), select { padding: 9px 12px; }
textarea { padding: 11px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--field-placeholder); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--shell-border-strong); }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
border-color: var(--accent);
box-shadow: var(--focus-ring);
outline: none;
}
button, a { transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 3px;
box-shadow: var(--focus-ring);
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 720px) {
.topbar { padding-inline: 14px; gap: 10px; }
.topbar-search { width: min(42vw, 220px); }
.view-scroll { overscroll-behavior-y: contain; }
}
@media (max-width: 900px) {
.topbar-search { width: min(30vw, 220px); }
.cam-status-full { display: none; }
.topbar #btn-begin-practice { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* Dashboard entry: one clear path before account progress becomes relevant. */
.dashboard-welcome { max-width: 1180px; margin-inline: auto; display: grid; gap: 20px; }
.dashboard-welcome-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(230px, .8fr); gap: clamp(20px, 4vw, 60px); padding: clamp(26px, 4vw, 52px); overflow: hidden; position: relative; }
.dashboard-welcome-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent), var(--gold), var(--copper)); }
.dashboard-welcome-copy { position: relative; z-index: 1; min-width: 0; }
.dashboard-welcome-copy h2 { margin: 20px 0 8px; max-width: 650px; color: var(--card-ink); font-size: clamp(32px, 4vw, 54px); font-weight: 500; line-height: 1.06; letter-spacing: -.035em; }
.dashboard-welcome-copy > p { margin: 0; max-width: 570px; color: var(--card-ink-mute); font-size: 15px; line-height: 1.6; }
.dashboard-search-label { display: block; margin: 27px 0 8px; color: var(--card-ink); font-size: 13px; font-weight: 700; }
.dashboard-welcome-search { display: flex; gap: 9px; max-width: 610px; }
.dashboard-welcome-search input { min-width: 0; flex: 1; min-height: 48px; border: 1px solid var(--card-border-strong); border-radius: 10px; background: var(--card-bg); color: var(--card-ink); font-size: 14px; }
.dashboard-welcome-search .btn { min-height: 48px; padding-inline: 20px; white-space: nowrap; background: var(--emerald-deep); color: var(--ivory); border-color: var(--emerald-deep); }
.dashboard-welcome-search .btn:hover { filter: brightness(1.12); }
.dashboard-welcome-results { max-width: 610px; margin-top: 15px; }
.dashboard-welcome-copy .dashboard-search-note { margin-top: 9px; font-size: 12px; }
.dashboard-welcome-quick { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.dashboard-welcome-quick > span { display: block; color: var(--card-ink-mute); font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.dashboard-welcome-quick > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.dashboard-welcome-quick .btn { min-height: 42px; background: var(--card-bg); color: var(--card-ink); border-color: var(--card-border-strong); }
.dashboard-browse-link { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; margin-top: 12px; padding: 4px 0; border: 0; background: transparent; color: var(--accent-text); font-weight: 700; cursor: pointer; }
.dashboard-welcome-art { min-height: 420px; position: relative; overflow: hidden; border: 1px solid var(--card-border-strong); border-radius: 20px; background: linear-gradient(145deg, var(--card-bg), var(--card-bg-2)); box-shadow: var(--shadow-card); }
.dashboard-welcome-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.dashboard-welcome-art::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(14, 18, 16, .66)); }
.dashboard-welcome-art span { position: absolute; z-index: 1; bottom: 18px; left: 18px; color: var(--ivory); font: 600 10px var(--font-mono); letter-spacing: .16em; }
.dashboard-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-step { display: flex; gap: 16px; min-width: 0; padding: 22px; border-radius: 16px; border: 1px solid var(--card-border); background: var(--card-bg); }
.dashboard-step > span { flex: 0 0 auto; color: var(--accent-text); font: 700 13px var(--font-mono); }
.dashboard-step h3 { margin: 0 0 5px; color: var(--card-ink); font-size: 15px; }
.dashboard-step p { margin: 0; color: var(--card-ink-mute); font-size: 12.5px; line-height: 1.5; }
.dashboard-welcome-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 4px; color: var(--shell-ink-mute); font-size: 12px; line-height: 1.5; }
.dashboard-welcome-foot p { margin: 0; max-width: 730px; }
.dashboard-welcome-foot a, .dashboard-welcome-foot button { color: var(--accent-text); background: none; border: none; font-weight: 700; cursor: pointer; }
.dashboard-returning-note { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.dashboard-returning-note > div { display: flex; flex-direction: column; gap: 3px; }
.dashboard-returning-note strong { color: var(--card-ink); font-size: 17px; }
.dashboard-returning-note span:last-child { color: var(--card-ink-mute); font-size: 12.5px; }
.dashboard-returning-note button { flex: 0 0 auto; min-height: 42px; color: var(--card-ink); background: var(--card-bg-2); border: 1px solid var(--card-border-strong); }
.dashboard-more { min-width: 0; }
.dashboard-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border: 1px solid var(--card-border-strong); border-radius: 16px; background: var(--card-bg); color: var(--card-ink); cursor: pointer; list-style: none; }
.dashboard-more > summary::-webkit-details-marker { display: none; }
.dashboard-more > summary span { display: flex; flex-direction: column; gap: 4px; }
.dashboard-more > summary strong { font-size: 17px; }
.dashboard-more > summary small { color: var(--card-ink-mute); font-size: 12px; }
.dashboard-more[open] > summary svg { transform: rotate(180deg); }
.dashboard-more-content { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
.sidebar-more { margin-top: 8px; border-top: 1px solid var(--shell-border); padding-top: 9px; }
.sidebar-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 0 12px; border-radius: 9px; color: var(--shell-ink-mute); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.sidebar-more > summary::-webkit-details-marker { display: none; }
.sidebar-more > summary:hover, .sidebar-more > summary:focus-visible { background: var(--shell-surface-2); color: var(--shell-ink); }
.sidebar-more[open] > summary svg { transform: rotate(180deg); }
.sidebar-more .side-item { margin-top: 4px; }
.sidebar-guest-link { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--shell-ink); text-decoration: none; font-size: 12px; font-weight: 700; }
.sidebar-guest-link:hover { color: var(--accent-text); }
.mobile-practice-home { padding: 18px 16px 28px; }
.mobile-practice-card { padding: 26px 22px; text-align: left; }
.mobile-practice-symbol { display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin-top: 24px; border-radius: 18px; background: rgba(15,81,50,.1); color: var(--accent-text); }
.mobile-practice-card h2 { margin: 20px 0 10px; color: var(--card-ink); font-size: clamp(27px, 7vw, 36px); font-weight: 500; line-height: 1.14; letter-spacing: -.02em; }
.mobile-practice-card p { margin: 0; color: var(--card-ink-mute); font-size: 14px; line-height: 1.6; }
.mobile-practice-card button { min-height: 48px; width: 100%; justify-content: center; margin-top: 24px; background: var(--emerald); border-color: var(--emerald); color: var(--ivory); }
@media (max-width: 430px) {
.topbar #btn-mobile-search, .topbar .font-alt { display: none !important; }
.topbar #btn-auth { white-space: nowrap; min-width: 56px; padding-inline: 7px; }
.topbar #btn-begin-practice { white-space: nowrap; min-width: 76px; padding-inline: 8px !important; }
}
@media (max-width: 900px) {
.dashboard-welcome-hero { grid-template-columns: 1fr; }
.dashboard-welcome-art { display: none; }
}
@media (max-width: 600px) {
.dashboard-welcome { gap: 14px; }
.dashboard-welcome-hero { padding: 24px 20px; }
.dashboard-welcome-copy h2 { margin-top: 16px; font-size: 34px; }
.dashboard-welcome-search { flex-direction: column; }
.dashboard-welcome-search .btn { justify-content: center; }
.dashboard-steps { grid-template-columns: 1fr; gap: 8px; }
.dashboard-step { padding: 16px; }
.dashboard-returning-note { flex-direction: column; align-items: flex-start; }
}
.program-builder-dialog {width:min(640px,calc(100% - 32px));max-height:88vh;padding:0;border:0;border-radius:16px;background:var(--card-bg);color:var(--card-ink);overflow:auto;}
.program-builder-dialog::backdrop {background:rgba(14,18,16,.65);}
.program-builder-dialog button,.program-builder-dialog select {min-height:44px;}
.programs-view-shell .program-card > div > div[style*="font-size:12.5px"] {font-size:14px!important;line-height:1.65!important;}
.programs-active-strip > div:nth-child(2) {flex-wrap:wrap;}
.programs-active-strip > div:nth-child(2) > div:last-child {flex:1 1 180px;}
@media(max-width:719px) {
.programs-active-strip > div:nth-child(2) > div:last-child {flex:0 0 auto!important;justify-content:flex-start!important;}
.view-fade.programs-view-shell {padding:20px 16px 32px!important;}
.programs-view-shell .grid-2 {grid-template-columns:minmax(0,1fr);}
.programs-view-shell .programs-active-strip {padding:20px!important;}
.program-builder-dialog select[data-builder-day] {flex:1 1 100%!important;font-size:14px!important;}
.landing-footer > span:last-child {display:flex;flex-wrap:wrap;gap:12px;}
}
.mobile-navigation {width:min(380px,calc(100% - 32px));max-height:85dvh;padding:20px;background:var(--card-bg);color:var(--card-ink);border:1px solid var(--card-border);border-radius:20px;overflow:auto;}
.mobile-navigation::backdrop {background:rgba(14,18,16,.6);}
.mobile-navigation header {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mobile-navigation h2 {font-size:22px;margin:0;}
.mobile-navigation nav {display:grid;gap:4px;margin-top:16px;}
.mobile-nav-link {display:flex;justify-content:space-between;width:100%;padding:14px;border:0;border-radius:10px;text-align:left;background:transparent;color:var(--card-ink);font:inherit;min-height:48px;}
.mobile-nav-link[aria-current=page] {background:var(--card-bg-2);font-weight:600;}
.mobile-nav-link:focus-visible {outline:2px solid var(--accent-text);outline-offset:2px;}
.mobile-navigation p {font-size:13px;color:var(--card-ink-mute);line-height:1.6;margin:18px 0 0;}
.topbar h1 {white-space:nowrap;}
@media(min-width:720px) and (max-width:1300px) {
.topbar h1 + .font-alt,.topbar .cam-status-full {display:none;}
.topbar .topbar-search {width:220px;min-width:160px;}
#btn-begin-practice {white-space:nowrap;}
}
.point-card > div:first-child > div[style*="left:12px"] {background:rgba(14,18,16,.8);color:#fff!important;padding:5px 7px;border-radius:5px;letter-spacing:.08em!important;}
.point-card > div:first-child .chip {background:#26352f!important;color:#fff!important;border-color:transparent!important;}
.point-card > div:last-child > p {font-size:13px!important;line-height:1.6!important;}
.point-card .library-open-point {margin-top:auto!important;}
.point-card > div:last-child > div[style*="border-top"] {margin-top:auto!important;margin-bottom:16px;}
.point-card .font-alt,.library-dialog .font-alt {color:var(--card-ink-mute)!important;}
#safety-gate-overlay div[style*="gold-deep"],#safety-choice-overlay div[style*="gold-deep"],.program-builder-dialog div[style*="gold-deep"] {color:var(--card-ink-mute)!important;}
/* Dominant Directive HUD — Hinge Health / TrueMotion Benchmark */
.dominant-directive-hud {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 15;
pointer-events: none;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.dominant-directive-hud .hud-directive-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(8, 14, 11, 0.9);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1.5px solid var(--gold, #E2BE51);
border-radius: 9999px;
padding: 8px 20px;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(226, 190, 81, 0.15);
font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #FFFFFF;
white-space: nowrap;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dominant-directive-hud.hud-locked .hud-directive-pill {
border-color: #10B981;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(16, 185, 129, 0.35);
}
.dominant-directive-hud.hud-near .hud-directive-pill {
border-color: #00E5FF;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 229, 255, 0.25);
}
.dominant-directive-hud.hud-alert .hud-directive-pill {
border-color: #F59E0B;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(245, 158, 11, 0.25);
}
/* --------------------------------------------------------------------------
Namaste assistant — the floating panel (Ask + Action).
Mounted on document.body, NOT inside #app: renderShell() replaces #app's
innerHTML on every view change and every tweak, so a panel mounted there
would be destroyed mid-conversation. Nothing here may therefore assume a
shell ancestor — hence the card tokens (this is a content surface) rather
than the shell ones.
Every colour is a token. That is not a style preference: every light-mode
regression in this repo has come from a hardcoded hex, and a panel that is
only ever seen in one theme is exactly how the next one gets written.
-------------------------------------------------------------------------- */
.namaste-root { position: fixed; right: 24px; bottom: 24px; z-index: 120; }
/* The toast stack shares this corner. Lift it clear of the button instead of
letting a three-second toast land on top of the assistant at the exact
moment the user has just used it (the consent + withdraw actions toast).
The class is only present while a FAB is actually rendered. */
body.has-namaste .toast-container { bottom: 96px; }
.namaste-fab {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px; border: none; cursor: pointer; border-radius: 999px;
background: linear-gradient(135deg, var(--gold), var(--gold-deep));
color: var(--on-accent);
font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
box-shadow: var(--shadow-pop);
}
.namaste-fab:hover { filter: brightness(1.06); }
.namaste-fab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.namaste-fab-label { line-height: 1; }
.namaste-panel {
position: absolute; right: 0; bottom: 60px;
width: min(420px, calc(100vw - 40px));
max-height: min(640px, calc(100vh - 130px));
display: flex; flex-direction: column;
background: var(--card-bg); color: var(--card-ink);
border: 1px solid var(--card-border-strong);
border-radius: 16px; overflow: hidden;
box-shadow: var(--shadow-pop);
animation: fadeUp 200ms cubic-bezier(.2,.7,.2,1);
}
.namaste-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--card-border); }
.namaste-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.namaste-head-actions { display: flex; gap: 6px; }
.namaste-eyebrow {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--accent-text);
}
.namaste-title {
font-family: var(--font-display); font-size: 21px; font-weight: 500;
letter-spacing: -0.01em; margin-top: 4px;
}
.namaste-sub { font-size: 12px; color: var(--card-ink-mute); margin-top: 4px; }
.namaste-tabs { display: flex; gap: 6px; padding: 10px 18px 0; }
.namaste-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; border-radius: 999px; cursor: pointer;
background: transparent; border: 1px solid var(--card-border);
color: var(--card-ink-mute);
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
}
/* Selected state: a RAISED NEUTRAL surface plus accent ink and border — NOT an
accent tint with accent ink on it. `--accent-text` on `--card-bg-2` is a pair
tests/test_theme_tokens.py already certifies in every mode and accent, whereas
an accent tint lifts the surface toward the ink and measures as low as
3.9:1 for sage. The panel does not get to be the one place that guesses. */
.namaste-tab:hover { color: var(--card-ink); }
.namaste-tab[aria-selected="true"] {
background: var(--card-bg-2); border-color: var(--accent-text); color: var(--accent-text);
}
.namaste-body { padding: 12px 18px 14px; overflow-y: auto; flex: 1; }
.namaste-p { font-size: 13.5px; line-height: 1.6; }
.namaste-p + .namaste-p { margin-top: 8px; }
.namaste-p-mute { color: var(--card-ink-mute); }
.namaste-list {
font-size: 13px; line-height: 1.6; margin: 12px 0 0; padding-left: 18px;
color: var(--card-ink-mute);
}
.namaste-list li { margin-top: 6px; }
.namaste-note { font-size: 11.5px; color: var(--card-ink-faint); margin-top: 8px; }
.namaste-note-center { text-align: center; }
.namaste-block { width: 100%; justify-content: center; margin-top: 14px; }
.namaste-check {
display: flex; gap: 10px; align-items: flex-start;
margin-top: 16px; font-size: 13px; line-height: 1.55; cursor: pointer;
}
.namaste-check input { margin-top: 3px; width: 15px; height: 15px; flex-shrink: 0; }
.namaste-link {
background: none; border: none; padding: 0; cursor: pointer;
color: var(--accent-text); font-family: var(--font-ui); font-size: 12px; font-weight: 500;
}
.namaste-link:hover { text-decoration: underline; }
.namaste-link-center { display: block; text-align: center; margin-top: 12px; }
.namaste-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.namaste-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 11px; border-radius: 999px; cursor: pointer;
background: var(--card-bg-2); border: 1px solid var(--card-border-strong);
color: var(--card-ink); font-family: var(--font-ui); font-size: 12px;
}
.namaste-chip:hover { border-color: var(--accent-text); color: var(--accent-text); }
.namaste-chip-go {
background: var(--card-bg-2); border-color: var(--accent-text);
color: var(--accent-text); font-weight: 600;
}
.namaste-ask-q { font-size: 12.5px; color: var(--card-ink-faint); margin: 12px 0 8px; }
.namaste-answer {
background: var(--card-bg-2); border: 1px solid var(--card-border);
border-radius: 12px; padding: 12px 13px; margin-bottom: 8px;
}
.namaste-answer-title { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.namaste-answer-text {
font-size: 12.5px; line-height: 1.55; color: var(--card-ink-mute); margin-top: 5px;
}
/* A server answer is the one thing in the panel that reads like prose written
for you rather than a quoted library line, so it is set at reading size in
full ink. Same surface as .namaste-answer-text, so the same certified tiers
apply: --card-ink and --card-ink-mute, never the faint one. */
.namaste-answer-prose {
font-size: 13.5px; line-height: 1.6; color: var(--card-ink); margin-top: 5px;
}
.namaste-answer-note {
font-size: 10.5px; letter-spacing: 0.02em;
color: var(--card-ink-mute); margin-top: 6px;
}
.namaste-answer-foot {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.namaste-answer-foot-end { justify-content: flex-end; margin-top: 4px; }
/* The citation sits on --card-bg-2 (inside .namaste-answer), where the
certified ink tiers are --card-ink and --card-ink-mute; the faint tier is
only certified against --card-bg. */
.namaste-cite {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
color: var(--card-ink-mute);
}
.namaste-input-row { display: flex; gap: 8px; margin-top: 12px; }
.namaste-input {
flex: 1; min-width: 0;
background: var(--field-bg); border: 1px solid var(--field-border);
color: var(--field-ink); border-radius: 10px; padding: 10px 12px;
font-family: var(--font-ui); font-size: 13px;
}
.namaste-input::placeholder { color: var(--field-placeholder); }
.namaste-send { flex-shrink: 0; }
.namaste-foot {
padding: 10px 18px 14px; border-top: 1px solid var(--card-border);
background: var(--card-bg-2);
}
/* Same reason as .namaste-cite: on the raised footer the faint tier is not a
certified pair, so the note steps up to the mute tier. */
.namaste-foot .namaste-note { color: var(--card-ink-mute); }
.namaste-foot-actions { display: flex; gap: 12px; margin-top: 6px; }
.namaste-stops {
margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.55;
color: var(--card-ink-mute);
}
.namaste-stops li { margin-top: 6px; }
/* Phase 5: greeting with avatar */
.namaste-greeting {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
}
.namaste-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--card-bg-2); border: 1px solid var(--card-border);
display: flex; align-items: center; justify-content: center;
color: var(--accent-text); flex-shrink: 0;
}
.namaste-greeting-text {
font-family: var(--font-display); font-size: 14px; font-weight: 500;
color: var(--card-ink);
}
/* Phase 5: typing indicator animation */
.namaste-typing {
display: inline-flex; gap: 3px; align-items: center; margin-right: 4px;
}
.namaste-typing span {
width: 4px; height: 4px; border-radius: 50%;
background: var(--accent-text); opacity: 0.4;
animation: namastePulse 1.2s ease-in-out infinite;
}
.namaste-typing span:nth-child(2) { animation-delay: 0.2s; }
.namaste-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes namastePulse {
0%, 80%, 100% { opacity: 0.4; transform: scale(1); }
40% { opacity: 1; transform: scale(1.2); }
}
/* Answering from the device because the server is unreachable. Reads as a
* deliberate mode, not an error: informational accent, not danger ink.
* Token-only colour so it stays legible in light mode too. */
.namaste-stale {
display: flex; align-items: flex-start; gap: 8px;
margin-bottom: 12px; padding: 9px 11px;
border-radius: 10px;
background: var(--card-bg-2);
border: 1px solid var(--card-border);
font-size: 11.5px; line-height: 1.45;
color: var(--card-ink-mute);
}
.namaste-stale svg { color: var(--accent-text); flex-shrink: 0; margin-top: 1px; }
.namaste-stale .namaste-link { margin-left: auto; white-space: nowrap; }
@media (min-width: 1080px) {
.profile-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}
/* ======================================================================
Native mobile shell (Android)
Tokens only, like the rest of this file: every light-mode regression in
this repo has come from a hardcoded hex, and --scrim / --on-accent /
--card-border-strong already carry the per-mode values this block needs.
Scoped to .app-shell at phone widths. Three things are load-bearing:
1. The bottom bar is a sibling of .view-scroll inside .main-col, which is
a column flexbox. It therefore takes its own space and never overlaps
content — an overlay bar would sit on top of the last card of every
view, which is exactly where a "Practise" call to action lives.
2. Every inset is env(safe-area-inset-*) with a 0px floor. The Android
build ships viewport-fit=cover (android/scripts/patch-bundle.mjs), so
the values are non-zero on a notched device and 0px on an emulator.
3. Touch targets are 44px minimum, including with a larger system font —
the label is allowed to grow without the target shrinking.
====================================================================== */
.app-shell .mobile-bottom-nav {
display: flex;
align-items: stretch;
gap: 2px;
flex-shrink: 0;
padding: 6px max(env(safe-area-inset-right), 6px)
calc(6px + env(safe-area-inset-bottom))
max(env(safe-area-inset-left), 6px);
background: var(--shell-surface);
border-top: 1px solid var(--shell-border);
}
.app-shell .mobile-bottom-item {
flex: 1;
min-width: 0;
min-height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 4px;
border: 0;
border-radius: 10px;
background: none;
color: var(--shell-ink-faint);
font-family: var(--font-ui);
font-size: 11px;
line-height: 1.1;
text-align: center;
}
.app-shell .mobile-bottom-item span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-shell .mobile-bottom-item.is-active {
color: var(--accent-strong);
background: var(--card-bg-2);
font-weight: 600;
}
:root[data-theme="dark"] .app-shell .mobile-bottom-item.is-active {
color: var(--accent-bright);
}
.app-shell .mobile-bottom-item:focus-visible {
outline: 2px solid var(--accent-strong);
outline-offset: -2px;
}
:root[data-theme="dark"] .app-shell .mobile-bottom-item:focus-visible {
outline-color: var(--accent-bright);
}
/* The wordmark doubles as the Home control at phone widths (no sidebar). */
.app-shell .mobile-brand-home {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0;
border: 0;
border-radius: 10px;
background: radial-gradient(circle at 30% 30%, var(--gold) 0%, var(--gold-deep) 78%, var(--accent-deep) 100%);
color: var(--on-accent);
cursor: pointer;
}
.app-shell .mobile-brand-home[aria-current="page"] {
box-shadow: 0 0 0 2px var(--accent);
}
/* Boot gate: the frame shown while identity is unknown, and the retryable
* connection card. Both are centred and deliberately plain — a spinner that
* looks like a loading screen implies work is happening, and the honest
* state here is "we do not know yet". */
.boot-gate,
.signed-out-door {
min-height: 62vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
padding: 40px 20px;
}
.boot-gate h2,
.signed-out-door h2 {
font-size: 22px;
font-weight: 500;
color: var(--shell-ink);
margin: 0;
}
.boot-gate p,
.signed-out-door p {
font-size: 13.5px;
line-height: 1.6;
color: var(--shell-ink-mute);
margin: 0;
max-width: 44ch;
}
.boot-gate-mark {
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid var(--shell-border-strong);
border-top-color: var(--accent);
animation: bootGateSpin 900ms linear infinite;
}
.boot-gate-mark-off {
display: flex;
align-items: center;
justify-content: center;
animation: none;
border: 0;
background: var(--card-bg-2);
color: var(--accent-text);
}
@keyframes bootGateSpin { to { transform: rotate(360deg); } }
/* The spin is the one animation on a screen whose only job is to say "we do
not know yet". Under reduced-motion it must stop rather than keep moving —
and a permanently rotating element also makes the gate's own Retry button
fail any automated stability check. */
@media (prefers-reduced-motion: reduce) {
.boot-gate-mark { animation: none; border-top-color: var(--accent); }
}
.boot-gate-text { color: var(--shell-ink-faint); font-size: 13px; }
.signed-out-mark {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--card-bg-2);
color: var(--accent-text);
}
.signed-out-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 6px;
}
.signed-out-note { font-size: 11.5px !important; color: var(--shell-ink-faint) !important; }
/* Home's resume/continue/choose card. Sits above the dashboard hero so the
* next action is the first thing read, and collapses to a single column when
* the viewport cannot fit the button beside the copy. */
.home-resume-slot { margin-bottom: 20px; }
.home-resume-card {
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--card-border-strong);
background: var(--card-bg);
}
.home-resume-label {
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--font-mono);
color: var(--card-ink-mute);
margin-bottom: 10px;
}
.home-resume-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.home-resume-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 11px;
background: var(--card-bg-2);
color: var(--accent-text);
}
.home-resume-copy { flex: 1; min-width: 180px; }
.home-resume-action {
font-family: var(--font-display);
font-size: 17px;
font-weight: 500;
color: var(--card-ink);
}
.home-resume-detail {
font-size: 12px;
color: var(--card-ink-mute);
margin-top: 2px;
}
/* First-run introduction. The backdrop is click-through (pointer-events:none)
* and the card takes pointer events, so the Namaste FAB at z-index 120 stays
* reachable — the same contract the desktop onboarding overlay holds
* (tests/test_namaste_shell.mjs section 17). */
/* The overlay element IS the backdrop — a wrapper div around a position:fixed
child would have an empty bounding box and read as hidden. */
.native-intro-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom));
background: var(--scrim);
backdrop-filter: blur(6px);
pointer-events: none;
animation: fadeUp 240ms cubic-bezier(.2, .7, .2, 1);
}
.native-intro-card {
width: min(440px, 100%);
max-height: 100%;
overflow-y: auto;
padding: 26px 24px;
border-radius: 18px;
pointer-events: auto;
}
.native-intro-progress {
display: flex;
gap: 6px;
margin-bottom: 18px;
}
.native-intro-progress span {
flex: 1;
height: 4px;
border-radius: 2px;
background: var(--card-border-strong);
}
.native-intro-progress span.is-done { background: var(--gold); }
.native-intro-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 14px;
margin-bottom: 16px;
background: linear-gradient(135deg, var(--gold), var(--accent-deep));
color: var(--on-accent);
}
.native-intro-card h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--card-ink);
margin: 0 0 10px;
}
.native-intro-card p {
font-size: 14px;
line-height: 1.6;
color: var(--card-ink-mute);
margin: 0 0 12px;
}
.native-intro-note {
font-size: 12px !important;
color: var(--card-ink-faint) !important;
padding: 10px 12px;
border-radius: 10px;
background: var(--card-bg-2);
}
.native-intro-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 18px;
}
.native-intro-signin {
display: block;
width: 100%;
margin-top: 12px;
padding: 10px;
border: 0;
background: none;
color: var(--accent-text);
font-family: var(--font-ui);
font-size: 12.5px;
text-decoration: underline;
cursor: pointer;
}
/* Phone-width adjustments for the new surfaces. Placed last so they win over
* the earlier 560px/400px blocks on equal specificity. */
@media (max-width: 430px) {
.app-shell .mobile-bottom-item { font-size: 10.5px; min-height: 52px; }
.home-resume-row { align-items: flex-start; }
.home-resume-row .btn { width: 100%; justify-content: center; }
.native-intro-card { padding: 22px 18px; }
}
/* Larger system text must not shrink the touch targets. */
@media (hover: none) and (pointer: coarse) {
.app-shell .mobile-bottom-item { min-height: 52px; }
.app-shell .mobile-brand-home { min-width: 44px; min-height: 44px; }
}
/* Original Android brand mark retains its own background in every theme. */
.app-shell .mobile-brand-home{background:transparent;border-radius:50%}
.app-shell .mobile-brand-home img{display:block;flex-shrink:0}
/* Audit: legible filtering and reference details across all theme surfaces. */
.library-view-shell .region-chip{min-height:44px}
.library-view-shell .region-chip:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.library-results-summary{font-size:13px;color:var(--shell-ink-mute);line-height:1.5}
.library-dialog .reference-hero{background:var(--card-bg-2)!important;color:var(--card-ink)}
.library-dialog .reference-hero .font-alt{color:var(--card-ink-mute)!important}
.library-dialog .reference-hero div[style*="text-transform:uppercase"]{color:var(--card-ink-mute)!important}
.library-dialog .reference-hero #drawer-close{background:var(--card-bg)!important;border:1px solid var(--card-border)}
@media(max-width:700px){.library-view-shell input{min-width:0;width:100%}.library-dialog .font-display{font-size:34px!important;padding-right:32px;overflow-wrap:anywhere}.library-dialog .drawer-panel>div:last-child{padding:24px!important}}
.library-reference-art{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--card-ink);font-size:12px;font-weight:600;letter-spacing:.04em}
.library-point-tier{font-size:11px;font-weight:600;color:var(--card-ink-mute);margin-bottom:12px;line-height:1.45}
.topbar-search input{min-width:0;width:100%}
.topbar-search>.font-mono{white-space:nowrap;flex-shrink:0}
.library-heading{font-family:var(--font-display);font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--shell-ink);margin:12px 0}
.library-coverage{font-size:14px;color:var(--shell-ink-mute);line-height:1.6;margin:0 0 12px}
.library-limit,.library-live-label{font-size:12px;line-height:1.5;color:var(--shell-ink-mute);margin:6px 0}
.library-point-name{margin:0 0 4px}
.library-live-label{color:var(--card-ink-mute)}
.point-card .library-point-tier{margin-top:6px}
.acc-row-head{width:100%;border:0;background:transparent;text-align:left;color:var(--shell-ink);font:inherit;cursor:pointer}
.acc-row-head:focus-visible{outline:3px solid var(--accent-text);outline-offset:-3px}
.acc-row-head>span:first-child>span{display:block}
.acc-metric-label{display:block;font-family:var(--font-ui);font-size:10px;font-weight:500;line-height:1.4;color:var(--shell-ink-mute);margin-bottom:5px}
.acc-tier{display:inline-block;padding:4px 8px;border-radius:8px;font-size:11px;background:var(--shell-surface);border:1px solid currentColor;line-height:1.4}
.acc-detail-cue{display:block;margin-top:6px;color:var(--accent-text)}
.acc-person-scroll{overflow-x:auto}
.acc-person-scroll:focus-visible{outline:2px solid var(--accent-text)}
@media(max-width:900px){.accuracy-view-shell .acc-row-head{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}.acc-row-head>span:first-child,.acc-row-head>span:last-child{grid-column:1/-1}.acc-row-head>span:first-child>span:first-child{font-size:18px}.acc-person-scroll table{min-width:460px}}
@media(max-width:700px){.library-point-image{height:104px!important}.library-view-shell{gap:14px!important}.library-view-shell [role="group"][aria-label="Point tradition"]{margin-top:14px!important}}
.library-live-label{color:var(--card-ink-mute);margin:4px 0 10px}
.library-evidence,.library-body-filters{font-size:12px;line-height:1.6;color:var(--shell-ink-mute);margin-top:10px}
.library-evidence summary,.library-body-filters summary{cursor:pointer;min-height:32px;color:var(--accent-text)}
.library-evidence p{max-width:640px;margin:8px 0}
.library-evidence summary:focus-visible,.library-body-filters summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
@media(max-width:700px){.view-fade.library-view-shell{padding:16px 16px 32px!important}.library-heading{font-size:26px;margin:4px 0 8px}.library-coverage{font-size:12px;margin-bottom:4px}.library-view-shell>div:first-child>div:first-child{gap:10px}.library-body-filters{margin-top:4px}}
@media(max-width:700px){
.learn-filter-row label{min-width:0;flex:1 1 calc(50% - 6px)}
.learn-filter-row label select{width:100%;min-width:0}
.learn-filter-row .learn-path-progress{margin-bottom:0;line-height:1.5}
}
.learn-self-check{margin:28px 0;padding:24px;border:1px solid var(--card-border-strong);border-radius:14px;background:var(--card-bg-2);color:var(--card-ink)}
.learn-self-check h3{font-size:22px;line-height:1.35;margin:10px 0}
.learn-self-check p{color:var(--card-ink-mute);line-height:1.7}
.learn-self-check summary{min-height:44px;display:list-item;cursor:pointer;font-weight:600;padding:12px 0;color:var(--card-ink)}
.learn-self-check summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.learn-revision{font-size:12px!important;color:var(--card-ink-mute);margin:12px 0 0!important}
.learn-reader header .learn-chapter-tags{margin-top:16px}
/* Dashboard: one content grid and paired colors on every paper surface. */
.dashboard-shell { max-width:1200px; margin:0 auto; padding:28px 32px 48px; }
.dashboard-shell > .view-pad { padding:0; max-width:none; margin:0; }
.dashboard-shell .home-resume-slot { margin:0; }
.dashboard-shell .home-resume-card { padding:20px 24px; color:var(--card-ink); }
.dashboard-shell .home-resume-label { color:var(--card-ink-mute); }
.dashboard-shell .home-resume-action { color:var(--card-ink); font-family:var(--font-ui); font-weight:650; font-size:18px; }
.dashboard-shell .home-resume-detail { color:var(--card-ink-mute); font-size:14px; line-height:1.6; }
.dashboard-tools { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.dashboard-tools .companion-dashboard-link { margin:0; padding:24px!important; flex-direction:column; align-items:flex-start; }
.dashboard-tools .companion-dashboard-link strong { color:var(--card-ink); font-size:19px; }
.dashboard-tools .companion-dashboard-link p { font-size:14px; line-height:1.65; }
.dashboard-tools .companion-dashboard-link .btn { margin-top:auto; min-height:44px; }
@media(max-width:900px) { .dashboard-shell { padding:24px; } .dashboard-tools { grid-template-columns:1fr; } }
@media(max-width:600px) { .dashboard-shell { padding:20px 16px 32px; } .dashboard-shell .home-resume-card { padding:18px; } .dashboard-shell .home-resume-row .btn { width:100%; justify-content:center; } }
.dashboard-session-search > div { min-width:0; }
@media(max-width:600px) {
.dashboard-session-search { flex-direction:column; }
.dashboard-session-search > div, .dashboard-session-search > button { width:100%; }
.dashboard-session-search > button { justify-content:center; min-height:44px; }
.dashboard-session-search input { min-height:44px; }
}
/* Extended chapters keep their contents usable at every viewport size. */
.learn-tabs { overflow-x:auto; gap:22px; }
.learn-tabs button { flex-shrink:0; white-space:nowrap; min-height:44px; }
.learn-toc { max-height:calc(100vh - 140px); overflow-y:auto; padding-right:8px; }
@media(max-width:800px) { .learn-toc { max-height:220px; overflow-y:auto; } }
/* Phone practice keeps the camera, instructions and controls in one column. */
.practice-camera-preview { display:block; width:100%; height:220px; object-fit:contain; transform:scaleX(-1); background:var(--card-bg-2); border-radius:12px; margin:16px 0; }
.practice-camera-preview[hidden] { display:none; }
@media(max-width:719px) {
.live-practice { height:auto!important; padding:16px 12px calc(24px + env(safe-area-inset-bottom))!important; }
.live-practice-header { flex-wrap:wrap; gap:8px!important; }
.live-practice-header > div:first-of-type { min-width:calc(100% - 64px); }
.live-practice-header button { min-height:44px; }
.live-practice-grid { grid-template-columns:minmax(0,1fr)!important; overflow:visible!important; }
.live-practice #ar-viewport { height:clamp(260px,44dvh,420px); }
.live-practice-guidance { overflow:visible!important; }
.live-practice-controls { order:-1; flex-wrap:wrap; background:var(--card-bg); border:1px solid var(--card-border); padding:8px; border-radius:12px; }
.live-practice-controls button { flex:1 1 130px!important; min-height:48px; color:var(--card-ink); }
.live-practice #setup-check-panel { right:8px!important; top:8px!important; max-width:210px!important; font-size:11px!important; }
}