/* ============================================================ Codex Explorer — "annotated manuscript" aesthetic Espresso & amber palette · Fraunces (editorial serif) + JetBrains Mono ============================================================ */ :root { /* Theme-independent tokens (fonts, sizes, gutter). */ --gut-w: 3.4rem; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --code-size: 13px; /* mono / code; set by the font control */ --read-size: 15px; /* prose + glosses; tracks the font control */ --code-lh: 1.65; } /* ===== Themes (warm "manuscript" trio) — colour tokens only ===== data-theme on ; Dark is the default. ===== */ :root, :root[data-theme="dark"] { --ink: #15110c; /* deepest espresso background */ --panel: #1c1711; --raised: #241d15; --line: #392f23; --line-soft: #2c241a; --parchment: #ece0cb; /* primary text */ --parchment-dim: #b6a888; --muted: #8a7c64; --amber-1: #e9aa5b; --amber-2: #f3c27d; --teal: #74b6a7; --rose: #d98b6a; --gloss-bg: #1f1810; --sel-fg: #fff; --glow-1: rgba(233,170,91,0.07); /* ambient background tint */ --glow-2: rgba(116,182,167,0.05); } :root[data-theme="medium"] { --ink: #2c2723; /* warm taupe-gray */ --panel: #332e28; --raised: #3b342d; --line: #4b4339; --line-soft: #3f382f; --parchment: #ece2d2; --parchment-dim: #c5b8a2; --muted: #9e9079; --amber-1: #e9aa5b; --amber-2: #f3c27d; --teal: #74b6a7; --rose: #d98b6a; --gloss-bg: #322c25; --sel-fg: #fff; --glow-1: rgba(233,170,91,0.06); --glow-2: rgba(116,182,167,0.04); } :root[data-theme="light"] { --ink: #f6efe2; /* warm cream page */ --panel: #efe5d4; --raised: #fbf5ea; --line: #ddccb2; --line-soft: #e7d9c4; --parchment: #36291b; /* dark espresso ink text */ --parchment-dim: #6a5942; --muted: #8c7a5f; --amber-1: #b9762a; /* darker amber for contrast on cream */ --amber-2: #cf8a3a; --teal: #2e7d6e; --rose: #b5532f; --gloss-bg: #fbf5ea; --sel-fg: #36291b; --glow-1: rgba(233,170,91,0.10); --glow-2: rgba(116,182,167,0.06); } :root[data-theme="bw"] { --ink: #0a0a0a; /* black & white — monochrome dark */ --panel: #141414; --raised: #1c1c1c; --line: #2e2e2e; --line-soft: #242424; --parchment: #f4f4f4; /* white text */ --parchment-dim: #b8b8b8; --muted: #7d7d7d; --amber-1: #e8e8e8; /* white accent (no colour) */ --amber-2: #ffffff; --teal: #c0c0c0; --rose: #d9a0a0; --gloss-bg: #161616; --sel-fg: #000; --glow-1: rgba(255,255,255,0.04); --glow-2: rgba(255,255,255,0.02); } :root[data-theme="whiteblue"] { --ink: #ffffff; /* white & blue — light with blue accents */ --panel: #f0f4fb; --raised: #ffffff; --line: #d4deec; --line-soft: #e4ebf5; --parchment: #16243a; /* dark navy text */ --parchment-dim: #46597a; --muted: #7286a3; --amber-1: #2563eb; /* blue accent */ --amber-2: #1d4ed8; --teal: #0ea5b7; --rose: #dc2626; --gloss-bg: #f0f4fb; --sel-fg: #ffffff; --glow-1: rgba(37,99,235,0.08); --glow-2: rgba(14,165,183,0.05); } :root[data-theme="doom"] { /* doom-64 (tweakcn) — industrial gray + blood-red, sharp & blocky. Colours are the theme's exact oklch() values mapped onto our tokens. */ --ink: oklch(0.2178 0 0); /* neutral gray background */ --panel: oklch(0.2850 0 0); /* card */ --raised: oklch(0.3200 0 0); --line: oklch(0.4091 0 0); /* border */ --line-soft: oklch(0.3200 0 0); --parchment: oklch(0.9067 0 0); /* foreground */ --parchment-dim: oklch(0.7058 0 0); /* muted-foreground */ --muted: oklch(0.5600 0 0); --amber-1: oklch(0.6083 0.2090 27.0276); /* primary — blood red */ --amber-2: oklch(0.6900 0.2090 27.0276); /* brighter red (hover) */ --teal: oklch(0.7482 0.1235 244.7492); /* accent — sky blue */ --rose: oklch(0.7839 0.1719 68.0943); /* destructive — orange */ --gloss-bg: oklch(0.2550 0 0); --sel-fg: #fff; --glow-1: oklch(0.6083 0.2090 27.0276 / 0.07); /* faint red ambient tint */ --glow-2: oklch(0.7482 0.1235 244.7492 / 0.05); /* faint blue ambient tint */ /* doom signature fonts — Oxanium (UI) + Source Code Pro (mono) */ --serif: 'Oxanium', 'Fraunces', Georgia, serif; --mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace; } /* doom-64 is sharp & blocky — flatten every corner for this theme only */ :root[data-theme="doom"] *, :root[data-theme="doom"] *::before, :root[data-theme="doom"] *::after { border-radius: 0 !important; } :root[data-theme="doom"] ::selection { background: oklch(0.6083 0.2090 27.0276 / 0.32); color: var(--sel-fg); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: radial-gradient(1200px 600px at 85% -10%, var(--glow-1), transparent 60%), radial-gradient(900px 500px at -5% 110%, var(--glow-2), transparent 55%), var(--ink); color: var(--parchment); font-family: var(--mono); font-size: 14px; display: flex; flex-direction: column; overflow: hidden; } ::selection { background: rgba(233,170,91,0.28); color: var(--sel-fg); } /* ---------- Top bar ---------- 3-zone grid (brand | search | actions). The equal 1fr side tracks keep the search box centred without the flex squeeze that made things overlap. */ .topbar { display: grid; /* Sides are `auto` (reserve the brand + account cluster's real width) so they can never overflow onto the search. Only the centre track shrinks. */ grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 18px; height: 60px; /* Theme-aware bar: the old hardcoded espresso rgba turned muddy on light themes. Plain var(--panel) is the fallback for pre-color-mix browsers. */ background: var(--panel); background: linear-gradient(180deg, color-mix(in srgb, var(--raised) 92%, transparent), color-mix(in srgb, var(--panel) 92%, transparent)); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); flex-shrink: 0; } .brand { grid-column: 1; justify-self: start; min-width: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; color: inherit; } /* Logo is a single-colour silhouette painted through a CSS mask, so it adapts to the active theme automatically. --logo-ink defaults to the theme accent; override per-context (e.g. currentColor) as needed. Aspect ratios come from the trimmed masks: full 3.67:1, icon-only 1.41:1. */ .brand-logo { --logo-h: 34px; display: block; height: var(--logo-h); width: calc(var(--logo-h) * 3.67); background-color: var(--logo-ink, var(--amber-1)); -webkit-mask: url(../assets/logo-mask.png) left center / contain no-repeat; mask: url(../assets/logo-mask.png) left center / contain no-repeat; } .brand-icon { --logo-h: 22px; display: inline-block; height: var(--logo-h); width: calc(var(--logo-h) * 1.41); background-color: var(--logo-ink, currentColor); -webkit-mask: url(../assets/logo-mark-mask.png) center / contain no-repeat; mask: url(../assets/logo-mark-mask.png) center / contain no-repeat; } .brand-mark { font-family: var(--mono); color: var(--ink); background: var(--amber-1); padding: 3px 7px; border-radius: 5px; font-weight: 700; font-size: 13px; letter-spacing: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 6px 16px -8px rgba(233,170,91,0.6); } .repo-form { grid-column: 2; justify-self: center; width: min(520px, 100%); min-width: 0; /* let the centre track shrink instead of overlap */ display: flex; align-items: center; background: var(--raised); border: 1px solid var(--line); border-radius: 9px; padding-left: 14px; transition: border-color .2s, box-shadow .2s; } /* Actions sit in the right grid track, hugging the edge. */ .topbar-right { grid-column: 3; justify-self: end; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .account-email { max-width: 13ch; } .repo-form:focus-within { border-color: var(--amber-1); box-shadow: 0 0 0 3px rgba(233,170,91,0.12); } .repo-prefix { color: var(--muted); font-size: 13px; user-select: none; } #repo-url { flex: 1; background: none; border: none; color: var(--parchment); font-family: var(--mono); font-size: 13px; padding: 11px 8px; } #repo-url:focus { outline: none; } #repo-url::placeholder { color: var(--muted); } button { font-family: var(--mono); font-size: 13px; cursor: pointer; border: none; transition: all .18s ease; } #load-btn { background: var(--amber-1); color: var(--ink); font-weight: 700; padding: 9px 18px; margin: 4px; border-radius: 6px; white-space: nowrap; } #load-btn:hover { background: var(--amber-2); } #load-btn:disabled { opacity: .5; cursor: progress; } .ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 9px 16px; border-radius: 8px; } .ghost:hover { color: var(--parchment); border-color: var(--muted); } .ghost.hidden { display: none; } /* Generic hide utility — JS toggles `.hidden` on many elements (auth form, OTP state, reset page states); every such element must actually disappear. */ .hidden { display: none !important; } /* Primary button (also used as an ) */ .btn-primary { display: inline-flex; align-items: center; background: var(--amber-1); color: var(--ink); font-weight: 700; font-size: 13px; font-family: var(--mono); padding: 9px 16px; border: none; border-radius: 8px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .18s ease; } .btn-primary:hover { background: var(--amber-2); } /* Logged-out auth buttons (top-right) */ .auth-actions { display: flex; align-items: center; gap: 8px; } .auth-actions.hidden { display: none; } .auth-actions .ghost { text-decoration: none; display: inline-flex; align-items: center; } /* ---------- Account / credits ---------- */ .account { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .account.hidden { display: none; } .credits { display: inline-flex; align-items: baseline; gap: 1px; font-size: 12px; color: var(--parchment-dim); background: var(--raised); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px; } .credits-num { font-weight: 700; color: var(--amber-1); font-size: 13px; } .account-email { font-size: 12px; color: var(--muted); max-width: 14ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Banner ---------- */ .banner { padding: 9px 22px; background: rgba(217,139,106,0.13); border-bottom: 1px solid rgba(217,139,106,0.3); color: var(--rose); font-size: 13px; flex-shrink: 0; } .banner.hidden { display: none; } /* Inline "add your GitHub token" form inside the banner (private repos) */ .gh-token-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .gh-token-row input { flex: 1 1 240px; min-width: 0; padding: 8px 10px; font: 500 13px var(--mono); color: var(--parchment); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; } .gh-token-row input:focus { outline: none; border-color: var(--amber-1); } .gh-token-row button { padding: 8px 12px; min-height: 36px; font: 600 12.5px var(--mono); color: var(--parchment); background: var(--raised); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .gh-token-row button:hover { border-color: var(--amber-1); color: var(--amber-1); } .gh-token-row .gh-token-clear { font-weight: 500; color: var(--muted); } .gh-token-note { margin-top: 7px; font-size: 11.5px; color: var(--muted); max-width: 72ch; } /* ---------- Layout ---------- */ .layout { display: flex; flex: 1; min-height: 0; } /* ---------- Sidebar ---------- */ .sidebar { width: 268px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--parchment-dim); letter-spacing: .2px; } .file-count { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--muted); } #tree-filter { margin: 0 14px 10px; padding: 8px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 7px; color: var(--parchment); font-family: var(--mono); font-size: 12px; } #tree-filter:focus { outline: none; border-color: var(--amber-1); } #tree-filter::placeholder { color: var(--muted); } .tree { flex: 1; overflow-y: auto; padding: 2px 8px 18px; } .hint { color: var(--muted); font-size: 12px; padding: 14px; line-height: 1.6; } .tree-row { display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--parchment-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tree-row .tw { flex-shrink: 0; width: 12px; text-align: center; opacity: .7; transition: transform .15s ease; display: inline-block; } .tree-row.dir.open .tw { transform: rotate(90deg); } .tree-row .ic { opacity: .55; flex-shrink: 0; width: 12px; text-align: center; } .tree-row.dir { font-weight: 500; color: var(--parchment-dim); } .tree-row:hover { background: var(--raised); color: var(--parchment); } .tree-row.file.selected { background: linear-gradient(90deg, rgba(233,170,91,0.22), rgba(233,170,91,0.06)); color: var(--amber-2); box-shadow: inset 2px 0 0 var(--amber-1); } /* ---------- Workspace ---------- */ .workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; } .workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--panel); background: color-mix(in srgb, var(--panel) 72%, transparent); flex-shrink: 0; } .filename { font-family: var(--mono); font-size: 13px; color: var(--parchment-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Head controls (font + mode) */ .head-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Font size control */ .fontctl { display: inline-flex; background: var(--raised); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; } .fbtn { background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; min-width: 34px; } .fbtn:hover:not(:disabled) { color: var(--parchment); background: rgba(255,255,255,0.04); } .fbtn:disabled { opacity: .35; cursor: not-allowed; } /* Theme picker */ .themectl { background: var(--raised); border: 1px solid var(--line); color: var(--parchment-dim); font-family: var(--mono); font-size: 12.5px; padding: 7px 10px; border-radius: 9px; cursor: pointer; } .themectl:hover { color: var(--parchment); border-color: var(--muted); } .themectl:focus { outline: none; border-color: var(--amber-1); } /* Segmented control */ .segmented { display: inline-flex; background: var(--raised); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; flex-shrink: 0; } .seg { background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 500; } .seg:hover { color: var(--parchment); } .seg.active { background: var(--amber-1); color: var(--ink); font-weight: 700; box-shadow: 0 2px 8px -2px rgba(233,170,91,0.55); } .seg:disabled { opacity: .4; cursor: not-allowed; } /* ---------- Viewport ---------- */ .viewport { flex: 1; overflow: auto; position: relative; } /* Empty state */ .empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 14px; } .empty-mark { font-family: var(--mono); font-size: 40px; color: var(--amber-1); opacity: .55; letter-spacing: -3px; } .empty-state h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: -0.5px; max-width: 18ch; } .empty-state p { color: var(--muted); max-width: 46ch; line-height: 1.7; font-size: 13px; } /* One-tap demo repos + free-signup offer inside the empty state */ .demo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 60ch; } .demo-label { flex-basis: 100%; color: var(--parchment-dim); font-size: 12.5px; letter-spacing: .2px; } .demo-chip { font-family: var(--mono); font-size: 12.5px; color: var(--parchment); background: var(--raised); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: border-color .15s, color .15s; } .demo-chip:hover, .demo-chip:focus-visible { border-color: var(--amber-1); color: var(--amber-1); } .free-offer { color: var(--parchment-dim); font-size: 13px; } .free-offer a { color: var(--amber-1); } .free-offer strong { color: var(--parchment); font-weight: 600; } .free-offer.hidden { display: none; } /* ---------- Sign-in gate (AI behind auth) ---------- */ .signin-gate { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 14px; } .gate-lock { font-size: 34px; opacity: .8; } .signin-gate h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.4px; } .signin-gate p { color: var(--muted); max-width: 44ch; line-height: 1.7; font-size: 13.5px; } .gate-actions { display: flex; gap: 12px; margin-top: 8px; } .gate-actions .ghost { text-decoration: none; display: inline-flex; align-items: center; } /* ---------- Code + gutter (Code & Overview modes) ---------- */ .code-wrap { display: flex; font-family: var(--mono); font-size: var(--code-size); line-height: var(--code-lh); } .gutter { flex-shrink: 0; width: var(--gut-w); text-align: right; padding: 18px 12px 24px 0; color: var(--muted); background: rgba(0,0,0,0.18); border-right: 1px solid var(--line-soft); user-select: none; white-space: pre; opacity: .7; } .code-scroll { flex: 1; overflow-x: auto; } .code-scroll pre { margin: 0; } .code-scroll code { display: block; padding: 18px 22px 24px; white-space: pre; background: none !important; } /* ---------- Overview card ---------- */ .overview { padding: 0; } .gloss { margin: 22px 26px 6px; padding: 22px 26px; background: linear-gradient(180deg, rgba(233,170,91,0.06), transparent), var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--amber-1); border-radius: 12px; box-shadow: 0 18px 40px -30px rgba(0,0,0,0.9); } .gloss-label { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--amber-1); display: block; margin-bottom: 12px; letter-spacing: .3px; } .gloss-body { font-family: var(--serif); font-size: var(--read-size); line-height: 1.72; color: var(--parchment); } .gloss-body.streaming { font-family: var(--mono); font-size: var(--code-size); white-space: pre-wrap; color: var(--parchment-dim); } .gloss-body h1, .gloss-body h2, .gloss-body h3 { font-family: var(--serif); font-weight: 600; font-size: calc(var(--read-size) + 2px); margin: 16px 0 7px; color: var(--amber-2); } .gloss-body p { margin: 0 0 11px; } .gloss-body ul, .gloss-body ol { margin: 0 0 11px 22px; } .gloss-body li { margin-bottom: 5px; } .gloss-body code { font-family: var(--mono); font-size: 12.5px; background: rgba(0,0,0,0.32); color: var(--amber-2); padding: 1px 6px; border-radius: 4px; } .gloss-body pre { background: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 12px 0; overflow-x: auto; } .gloss-body pre code { background: none; color: inherit; padding: 0; font-size: 12px; } .overview-divider { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 13px; padding: 20px 26px 8px; display: flex; align-items: center; gap: 12px; } .overview-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- Line-by-line codex (grid rows: line · code · gloss) ---------- */ /* Each line is its own boxed row; the gloss gets the wider column and reads in the same colour/serif as the Overview prose. */ .codex { font-family: var(--mono); } .codex .crow { display: grid; grid-template-columns: var(--gut-w) minmax(0, 0.8fr) minmax(0, 1.2fr); border-bottom: 1px solid var(--line-soft); } .codex .ln { text-align: right; padding: 8px 12px 8px 0; color: var(--muted); background: rgba(0,0,0,0.18); border-right: 1px solid var(--line-soft); user-select: none; opacity: .65; white-space: nowrap; font-size: var(--code-size); line-height: var(--code-lh); } .codex .src { padding: 8px 20px; white-space: pre; overflow-x: auto; border-right: 1px solid var(--line-soft); font-size: var(--code-size); line-height: var(--code-lh); } .codex .src code { background: none !important; padding: 0; } .codex .note { padding: 8px 24px; font-family: var(--serif); font-size: var(--read-size); line-height: 1.55; color: var(--parchment); /* match the Overview prose colour */ } .codex .crow:hover .note { background: rgba(116,182,167,0.06); } .codex .crow:hover .src { background: rgba(127,127,127,0.06); } .codex .note .pending { display: inline-block; width: 55%; height: 9px; border-radius: 4px; background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 50%, var(--line-soft) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; opacity: .6; } .codex .note.filled { animation: noteIn .35s ease both; } .codex .note.blank .pending { display: none; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes noteIn { from { opacity: 0; transform: translateX(3px); } to { opacity: 1; transform: none; } } .codex-head { display: grid; grid-template-columns: var(--gut-w) minmax(0, 0.8fr) minmax(0, 1.2fr); border-bottom: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); position: sticky; top: 0; background: var(--ink); z-index: 2; } .codex-head .h-src { grid-column: 2; padding: 12px 20px; } .codex-head .h-note { grid-column: 3; padding: 12px 24px; color: var(--teal); } /* ---------- Loading / status states ---------- */ .viewport-status { display: flex; align-items: center; gap: 10px; padding: 16px 26px; color: var(--muted); font-size: 12.5px; } .spinner { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--amber-1); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .state-msg { padding: 26px; color: var(--muted); font-size: 13px; line-height: 1.6; } .state-msg.error { color: var(--rose); } /* ---------- Scrollbars ---------- */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; } /* ---------- Responsive ---------- Breakpoints: ≤1100 laptop, ≤900 small-laptop/tablet, ≤760 phone, ≤560 small phone. */ /* Laptops: drop the email label so the centred search never gets crowded. */ @media (max-width: 1240px) { .account-email { display: none; } } /* Small laptops / large tablets: tighten the side tracks + search width. */ @media (max-width: 900px) { .sidebar { width: 216px; } .topbar { gap: 10px; padding: 0 14px; } .repo-form { width: min(420px, 100%); } .topbar-right { gap: 8px; } } /* Phones + small tablets: header wraps to two rows, panes stack, page scrolls. */ @media (max-width: 760px) { html, body { height: auto; min-height: 100%; } body { overflow: auto; } /* Header becomes three tidy rows: brand, then ONE horizontal control strip (Pricing · Clear · credits · email · Sign out), then the full-width search. */ .topbar { display: flex; flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; } .brand { justify-self: auto; flex: 0 0 auto; } .topbar-right { justify-self: auto; order: 2; flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; gap: 6px; min-width: 0; } .topbar-right .ghost { padding: 6px 9px; font-size: 12px; flex: 0 0 auto; } .auth-actions { gap: 6px; } .account { gap: 6px; min-width: 0; flex: 1 1 auto; justify-content: flex-end; } /* Bring the signed-in email back as a small truncated chip on phones. */ .account-email { display: block; max-width: 11ch; font-size: 11.5px; } .repo-form { justify-self: auto; order: 5; width: 100%; flex: 1 1 100%; } /* Stack the file tree above the workspace instead of side-by-side. */ .layout { flex-direction: column; } .sidebar { width: 100%; max-height: 34vh; border-right: none; border-bottom: 1px solid var(--line); } .workspace { min-height: 70vh; } .workspace-head { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; } .filename { flex: 1 1 100%; } .head-controls { flex-wrap: wrap; gap: 8px; width: 100%; } .empty-state { padding: 40px 22px; } .empty-state h2 { font-size: 22px; } /* Line-by-line: drop the side-by-side header and stack each gloss under its code. */ .codex-head { display: none; } .codex .crow { grid-template-columns: 2.4rem minmax(0, 1fr); } .codex .src { grid-column: 2; } .codex .note { grid-column: 2; border-top: 1px dashed var(--line-soft); } .pricing-main { padding: 28px 16px 48px; } .pricing-hero h1 { font-size: 26px; } } /* Small phones: shrink the segmented control + chips so nothing overflows. Head controls settle into two tidy rows: [A−/A+ | theme] then [mode switch]. */ @media (max-width: 560px) { .topbar { padding: 9px 11px; } .topbar-right .ghost { padding: 6px 7px; font-size: 11.5px; } .account-email { max-width: 8ch; font-size: 11px; } .credits { padding: 4px 8px; } .head-controls { gap: 6px; } .fontctl { order: 1; } .themectl { order: 2; flex: 1 1 auto; min-width: 0; } .segmented { order: 3; width: 100%; } .segmented .seg { flex: 1 1 auto; text-align: center; padding: 6px 4px; font-size: 11.5px; } .credits { font-size: 12px; } .empty-state h2 { font-size: 20px; } .empty-mark { font-size: 40px; } } /* ============================================================ Auth / login page — two-panel editorial, inherits the active theme ============================================================ */ .auth-page { display: block; overflow-y: auto; height: auto; min-height: 100%; } .auth-back { position: fixed; top: 20px; left: 24px; z-index: 5; display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 16px; color: var(--parchment-dim); text-decoration: none; } .auth-back:hover { color: var(--amber-2); } .auth-back .brand-icon { --logo-h: 18px; } .auth-grid { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 0.95fr; } /* Left editorial panel */ .auth-aside { position: relative; padding: 96px 64px 64px; display: flex; flex-direction: column; justify-content: center; gap: 24px; background: radial-gradient(900px 520px at 12% 8%, var(--glow-1), transparent 60%), radial-gradient(700px 420px at 90% 100%, var(--glow-2), transparent 55%), var(--panel); border-right: 1px solid var(--line); overflow: hidden; } .auth-aside .brand { margin-bottom: 4px; } .auth-aside .brand-logo { --logo-h: 34px; } .auth-headline { font-family: var(--serif); font-weight: 500; line-height: 1.04; font-size: clamp(34px, 4vw, 50px); letter-spacing: -0.6px; max-width: 13ch; } .auth-headline em { font-style: italic; color: var(--amber-1); } .auth-lede { color: var(--parchment-dim); font-size: 15px; line-height: 1.7; max-width: 42ch; } /* faux annotated snippet — shows the product idea (code ↔ gloss) */ .auth-demo { border: 1px solid var(--line); border-radius: 12px; background: var(--raised); overflow: hidden; max-width: 460px; box-shadow: 0 34px 80px -56px rgba(0,0,0,.85); } .auth-demo .demo-row { display: grid; grid-template-columns: 1fr 1.05fr; border-bottom: 1px solid var(--line-soft); } .auth-demo .demo-row:last-child { border-bottom: 0; } .auth-demo code { font-family: var(--mono); font-size: 12px; padding: 9px 14px; color: var(--parchment); white-space: pre; } .auth-demo .demo-note { font-family: var(--serif); font-style: italic; font-size: 12.5px; padding: 9px 14px; color: var(--teal); border-left: 1px solid var(--line-soft); } .auth-trust { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: 12px; } /* Right form panel */ .auth-panel { display: flex; align-items: center; justify-content: center; padding: 56px 28px; } /* Dedicated reset-password page (single centred card) */ .reset-panel { min-height: 100vh; min-height: 100dvh; } .reset-brand { justify-content: center; margin-bottom: 18px; } .reset-back-btn { display: block; text-align: center; text-decoration: none; } .auth-card { width: 100%; max-width: 400px; } .auth-tabs { display: inline-flex; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 3px; margin-bottom: 24px; } .auth-tab { background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 7px; } .auth-tab.active { background: var(--amber-1); color: var(--ink); } .auth-h { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -0.3px; } .auth-sub { color: var(--muted); font-size: 13.5px; margin: 5px 0 20px; } .auth-banner { padding: 10px 13px; border-radius: 9px; font-size: 12.5px; margin-bottom: 16px; line-height: 1.5; } .auth-banner.hidden { display: none; } .auth-banner.err { background: rgba(217,139,106,0.14); color: var(--rose); border: 1px solid rgba(217,139,106,0.3); } .auth-banner.ok { background: rgba(116,182,167,0.12); color: var(--teal); border: 1px solid rgba(116,182,167,0.3); } .field { display: flex; flex-direction: column; margin-bottom: 14px; } .field.hidden { display: none; } .field label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; } .field-head { display: flex; align-items: baseline; justify-content: space-between; } .field-head label { margin-bottom: 6px; } .forgot-link { font-size: 11.5px; text-transform: none; letter-spacing: 0; } .forgot-link.hidden { display: none; } .reset-field { text-align: left; margin-top: 14px; } .field input { background: var(--raised); border: 1px solid var(--line); border-radius: 9px; color: var(--parchment); font-family: var(--mono); font-size: 13.5px; padding: 12px 13px; width: 100%; } .field input:focus { outline: none; border-color: var(--amber-1); box-shadow: 0 0 0 3px rgba(233,170,91,0.12); } .field input::placeholder { color: var(--muted); } .pw-wrap { position: relative; display: flex; } .pw-wrap input { padding-right: 46px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; color: var(--muted); padding: 6px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; } .pw-toggle:hover { color: var(--parchment); } .pw-strength { display: flex; align-items: center; gap: 10px; margin-top: 9px; } .pw-strength.hidden { display: none; } .pw-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; } .pw-bar span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .25s ease, background .25s ease; } .pw-bar span.s1 { width: 25%; background: var(--rose); } .pw-bar span.s2 { width: 50%; background: #d9a85a; } .pw-bar span.s3 { width: 75%; background: #b9c46a; } .pw-bar span.s4 { width: 100%; background: var(--teal); } .pw-label { font-size: 11.5px; color: var(--muted); min-width: 46px; text-align: right; } .auth-submit { width: 100%; justify-content: center; padding: 13px; margin-top: 6px; font-size: 14px; } .auth-submit:disabled { opacity: .55; cursor: progress; } .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; margin: 18px 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--raised); color: var(--parchment); border: 1px solid var(--line); padding: 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer; } .auth-google:hover { border-color: var(--muted); } .auth-google svg { width: 18px; height: 18px; } .auth-fineprint { color: var(--muted); font-size: 11.5px; line-height: 1.6; margin-top: 16px; text-align: center; } .auth-fineprint a { color: var(--parchment-dim); } .confirm-state { text-align: center; padding: 6px 0; } .confirm-state.hidden { display: none; } /* While the OTP confirm state is active it replaces the whole card: tabs, headings, the sign-up form, Google button and fineprint all hide. */ .auth-card.otp-mode .auth-tabs, .auth-card.otp-mode .auth-h, .auth-card.otp-mode .auth-sub, .auth-card.otp-mode #auth-form, .auth-card.otp-mode .auth-divider, .auth-card.otp-mode .auth-google, .auth-card.otp-mode .auth-fineprint { display: none; } .confirm-state .ic { font-size: 34px; } .confirm-state h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; margin: 8px 0; } .confirm-state p { color: var(--muted); font-size: 13.5px; line-height: 1.7; } .confirm-state b { color: var(--parchment); } .confirm-state .auth-link { display: inline-block; margin-top: 16px; } /* OTP entry */ .otp-field { text-align: left; margin-top: 18px; } #otp-code { text-align: center; letter-spacing: 8px; font-family: var(--mono); font-size: 22px; font-weight: 700; padding: 12px; } .confirm-state .auth-submit { margin-top: 14px; } .confirm-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; } .confirm-actions .auth-link { margin-top: 0; } .auth-link { background: none; color: var(--parchment-dim); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .auth-link:hover { color: var(--amber-2); } .auth-dev { text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 14px; } .auth-dev.hidden { display: none; } .auth-dev a { color: var(--amber-1); text-decoration: none; } @media (max-width: 860px) { .auth-grid { grid-template-columns: 1fr; } .auth-aside { display: none; } /* In-flow back link: fixed positioning overlapped the card on short screens. */ .auth-back { position: static; display: inline-flex; padding: 18px 22px 0; } .auth-panel { padding: 14px 22px 40px; } } /* ---------- Pricing page ---------- */ .pricing-page { overflow: auto; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .pricing-main { flex: 1 0 auto; width: 100%; max-width: 980px; margin: 0 auto; padding: 40px 24px 64px; } .pricing-hero { text-align: center; margin-bottom: 36px; } .pricing-hero h1 { font-family: var(--serif); font-weight: 500; font-size: 38px; letter-spacing: -0.5px; margin-bottom: 12px; } .pricing-hero p { color: var(--parchment-dim); max-width: 560px; margin: 0 auto; line-height: 1.7; font-size: 15px; } .region-toggle { display: inline-flex; gap: 4px; margin-top: 22px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: 4px; } .region-opt { background: none; color: var(--muted); font-family: var(--mono); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 7px; cursor: pointer; border: none; } .region-opt.active { background: var(--amber-1); color: var(--ink); } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr)); gap: 20px; } .plan-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; display: flex; flex-direction: column; } .plan-card.featured { border-color: var(--amber-1); box-shadow: 0 0 0 1px var(--amber-1), 0 18px 40px -24px rgba(0,0,0,0.6); } .plan-badge { position: absolute; top: -11px; right: 22px; background: var(--amber-1); color: var(--ink); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .3px; } .plan-name { font-family: var(--serif); font-weight: 500; font-size: 22px; text-transform: capitalize; } .plan-price { font-family: var(--serif); font-size: clamp(28px, 8vw, 40px); font-weight: 600; margin: 6px 0 2px; } .plan-price span { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--muted); } .plan-credits { color: var(--amber-1); font-weight: 700; font-size: 15px; margin-bottom: 16px; } .plan-feats { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; } .plan-feats li { color: var(--parchment-dim); font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); } .plan-feats li::before { content: "✦ "; color: var(--teal); } .plan-buy { width: 100%; justify-content: center; text-transform: capitalize; } .plan-buy:disabled { opacity: .5; cursor: not-allowed; } .sales-final { text-align: center; color: var(--muted); font-size: 13px; margin-top: 18px; } .sales-final a { color: var(--amber-1); text-decoration: none; } .sales-final a:hover { text-decoration: underline; } .pricing-foot { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 30px; line-height: 1.7; } .pricing-foot a { color: var(--amber-1); text-decoration: none; } @media (max-width: 720px) { .pricing-hero h1 { font-size: 30px; } } /* ---------- Legal / content pages (terms, privacy, refund, contact) ---------- */ .legal-page { overflow: auto; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .legal-main { flex: 1 0 auto; width: 100%; max-width: 820px; margin: 0 auto; padding: 44px 24px 40px; } .legal-main h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; letter-spacing: -0.4px; margin-bottom: 6px; } .legal-updated { color: var(--muted); font-size: 12.5px; margin-bottom: 28px; } .legal-main h2 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .legal-main h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; color: var(--parchment); } .legal-main p, .legal-main li { color: var(--parchment-dim); font-size: 14.5px; line-height: 1.75; } .legal-main p { margin-bottom: 12px; } .legal-main ul, .legal-main ol { margin: 0 0 14px 22px; } .legal-main li { margin-bottom: 7px; } .legal-main a { color: var(--amber-1); text-decoration: none; } .legal-main a:hover { text-decoration: underline; } .legal-main strong { color: var(--parchment); } .legal-intro { font-size: 15.5px; color: var(--parchment); } .legal-note { background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--amber-1); border-radius: 8px; padding: 13px 16px; margin: 16px 0; font-size: 13.5px; } .legal-contact-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin: 8px 0 20px; } .legal-contact-card dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 14px; } .legal-contact-card dt:first-child { margin-top: 0; } .legal-contact-card dd { font-size: 15px; color: var(--parchment); margin: 3px 0 0; } .contact-form { max-width: 520px; } .contact-form textarea { background: var(--raised); border: 1px solid var(--line); border-radius: 9px; color: var(--parchment); font-family: var(--mono); font-size: 13.5px; padding: 12px 13px; width: 100%; resize: vertical; line-height: 1.6; } .contact-form textarea:focus { outline: none; border-color: var(--amber-1); box-shadow: 0 0 0 3px rgba(233,170,91,0.12); } .contact-form textarea::placeholder { color: var(--muted); } .contact-form .btn-primary { margin-top: 4px; } /* Review submission feedback (About page) */ .review-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid var(--line); } .review-note.hidden { display: none; } .review-note.ok { color: var(--teal); border-color: rgba(116,182,167,0.4); background: rgba(116,182,167,0.10); } .review-note.err { color: var(--rose); border-color: rgba(217,139,106,0.4); background: rgba(217,139,106,0.10); } /* ---------- Shared site footer (used on app + content pages) ---------- */ .site-footer { flex-shrink: 0; margin-top: auto; border-top: 1px solid var(--line); background: var(--panel); padding: 14px 24px; } .site-footer .foot-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; } /* Social sits at the start, nav links centre, copyright at the end. */ .site-footer .foot-links { display: flex; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; gap: 8px 16px; } .site-footer a { color: var(--parchment-dim); text-decoration: none; font-size: 13px; } .site-footer a:hover { color: var(--amber-1); } .site-footer .foot-copy { color: var(--muted); font-size: 12px; } /* Social row — placeholder links ready for real URLs. */ .foot-social { display: flex; align-items: center; gap: 12px; } .foot-social .soc { color: var(--muted); display: inline-flex; } .foot-social .soc:hover { color: var(--amber-1); } .foot-social .soc svg { width: 17px; height: 17px; display: block; fill: currentColor; } @media (max-width: 600px) { .legal-main h1 { font-size: 27px; } .site-footer .foot-inner { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ============================================================ Mobile hardening — touch targets, iOS zoom, safe areas ============================================================ */ /* iOS Safari force-zooms any focused input under 16px; on touch devices every text control steps up to 16px so focusing never zooms the page. */ @media (pointer: coarse) { .field input, .contact-form textarea, #repo-url, #otp-code, #tree-filter, #theme-select { font-size: 16px; } /* 44px minimum touch targets (padding grows the hit box, not the look). */ .pw-toggle, .auth-link, .fbtn, .ghost, .btn-primary { min-height: 44px; } .foot-links a { padding: 10px 2px; display: inline-block; } .foot-social .soc { padding: 12px; margin: -12px 0; } #theme-select { min-height: 44px; } } /* Notched phones: keep the header/footer content out of the rounded corners. */ @supports (padding: max(0px)) { .topbar { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } .site-footer { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); padding-bottom: max(14px, env(safe-area-inset-bottom)); } } /* Momentum scrolling for wide code on touch screens. */ .code-wrap, .codex-wrap { -webkit-overflow-scrolling: touch; } /* Collapsible file list on phones: the chevron only exists ≤760px. */ .tree-toggle { display: none; background: none; color: var(--parchment-dim); font-size: 13px; padding: 8px 10px; margin: -8px -10px; transition: transform .18s ease; } @media (max-width: 760px) { .tree-toggle { display: inline-block; } .sidebar.collapsed #tree-filter, .sidebar.collapsed .tree { display: none; } .sidebar.collapsed { max-height: none; } .sidebar.collapsed .sidebar-head { padding-bottom: 14px; } .tree-toggle.closed { transform: rotate(-90deg); } } /* Very small phones (≤400px): keep the OTP box, plan badge and currency toggle inside the viewport. */ @media (max-width: 400px) { #otp-code { letter-spacing: 4px; font-size: 18px; } .plan-badge { right: 14px; } .region-toggle { display: flex; width: 100%; } .region-opt { flex: 1 1 auto; } .auth-card { padding: 0 2px; } } /* ---------- Storage notice (consent.js) ---------- */ .cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; margin: 0 auto; max-width: 640px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: 12.5px; color: var(--parchment-dim); box-shadow: 0 18px 44px -22px rgba(0,0,0,0.7); padding-bottom: max(12px, env(safe-area-inset-bottom)); } .cookie-notice a { color: var(--amber-1); } .cookie-notice .cookie-ok { flex-shrink: 0; background: var(--amber-1); color: var(--ink); font-weight: 700; padding: 8px 14px; border-radius: 7px; min-height: 36px; } .cookie-notice .cookie-ok:hover { background: var(--amber-2); } /* ---------- Legal tables (cookie policy, retention) ---------- */ .legal-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 13px; line-height: 1.6; } .legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 12px; border: 1px solid var(--line-soft); color: var(--parchment-dim); } .legal-table th { background: var(--raised); color: var(--parchment); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } .legal-table code { font-family: var(--mono); color: var(--parchment); font-size: 12px; } @media (max-width: 600px) { .legal-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ---------- Pricing: billing-period toggle + yearly sublines ---------- */ .toggle-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } .toggle-row .region-toggle { margin-top: 0; } .currency-note { font-size: 12.5px; color: var(--muted); } .save-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; background: var(--teal); color: var(--ink); font-size: 10px; font-weight: 700; border-radius: 999px; letter-spacing: .3px; } .region-opt.active .save-badge { background: var(--ink); color: var(--amber-1); } .plan-permo { color: var(--muted); font-size: 12px; margin: 2px 0 4px; } @media (max-width: 400px) { .toggle-row { flex-direction: column; } } /* ================= Flow mode & Repo map (AI Mermaid diagrams) ============= */ .map-btn { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; font-family: var(--sans, inherit); font-style: normal; font-size: 11px; padding: 3px 8px; cursor: pointer; white-space: nowrap; } .map-btn:hover:not(:disabled) { color: var(--parchment); border-color: var(--muted); } .map-btn:disabled { opacity: 0.45; cursor: default; } .flow-wrap { padding: 22px; max-width: 1100px; margin: 0 auto; } .flow-body { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .flow-body svg { max-width: 100%; height: auto; } .mermaid-src { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--parchment-dim); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; overflow-x: auto; white-space: pre; } .mermaid-src.streaming { opacity: 0.75; } /* ==================== Owner dashboard (admin.html) ==================== */ .admin-main { max-width: 980px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 22px 0 30px; } .stat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } .stat-label { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; } .stat-num { font-family: var(--serif); font-size: 26px; color: var(--parchment); margin-top: 6px; } .stat-sub { color: var(--parchment-dim); font-size: 12px; margin-top: 4px; } .spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 14px 0 30px; } .spark { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; } .spark-head { display: flex; justify-content: space-between; color: var(--parchment-dim); font-size: 12px; margin-bottom: 8px; } .spark-max { color: var(--muted); } .spark svg { display: block; width: 100%; height: 64px; } .spark rect { fill: var(--amber-1); } .spark rect:hover { fill: var(--amber-2); } .admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } @media (max-width: 640px) { .admin-cols { grid-template-columns: 1fr; } } .admin-table td, .admin-table th { font-variant-numeric: tabular-nums; } .admin-empty { color: var(--muted); } .admin-foot { color: var(--muted); font-size: 12px; margin-top: 22px; } .chart-tip { position: fixed; z-index: 50; background: var(--raised); color: var(--parchment); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; pointer-events: none; white-space: nowrap; } /* Diagram zoom controls (Flow mode + Repo map) */ .flow-tools { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; } .flow-tools .fbtn { border: 1px solid var(--line); background: var(--raised); border-radius: 8px; min-width: 44px; } .flow-tools .fbtn:hover { color: var(--parchment); border-color: var(--muted); } .flow-canvas { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 72vh; } /* Hand tool on diagrams: grab to pan */ .flow-canvas { cursor: grab; user-select: none; -webkit-user-select: none; } .flow-canvas.panning { cursor: grabbing; }