(not inside a .container) — pin it to the same 72rem content column as everything else so it never renders as a full-viewport band. The chat page's panel sits inside .chat-shell's container, so this selector only hits the direct-child placement. */ .app-main > .steering-panel { width: calc(100% - 2.5rem); max-width: 69.5rem; margin-inline: auto; } /* ---------- Global tuning page (phase 27) ---------- */ /* /tuning.html: create / edit / delete steering notes without a chat conversation. Full-container width (owner instruction 2026-09-12: "match the width of the RAG page for all other pages" — the phase-27 capped-column discipline is superseded): the shell rides the .container's 72rem frame like the RAG page, and the form and the note list span its FULL width (no skinny lists). Every interactive target is >=44px; text pairs reuse the Phase-08 AA palette (dark ink on brand 5.2:1, brand-ink/brand-soft 6.9:1, ok 10.6:1, err 9.1:1, ink-soft >=6.9:1). No filter: blur, no CDN, system font stack. */ .tuning-shell { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; } /* Create form — the composer's surface as a vertical card: labeled textarea (visually-hidden label; the placeholder carries the visible hint) + the brand "Add note" button (dark ink on brand: 5.2:1 — never white on brand, 3.7:1, fails). */ #tune-form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1rem 1rem; } #tune-form:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); } #tune-note { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: transparent; border: 0; padding: 0.2rem 0.1rem; resize: vertical; min-height: 4.6rem; } #tune-note::placeholder { color: var(--ink-soft); } #tune-save { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.4rem 1.2rem; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); /* dark ink on brand: 5.2:1 */ font: inherit; font-weight: 700; cursor: pointer; } #tune-save:hover:not(:disabled) { background: var(--brand-hover); } #tune-save:disabled { opacity: 0.6; cursor: wait; } /* Notes list — the phase-15 steering panel's language at full column width: rows are flex (text flexes + ellipsizes, actions shrink-0) with a bottom divider (the last row keeps none). */ .tuning-panel { background: var(--surface); border: 1px solid var(--brand-soft); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.9rem 1.1rem 1rem; } .tuning-panel-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); } .tuning-list { list-style: none; margin: 0.65rem 0 0; padding: 0; display: flex; flex-direction: column; } .tuning-note { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); } .tuning-note:last-child { border-bottom: 0; } /* The note text is the row's flex citizen: it takes every spare pixel and ellipsizes (the full text is one Edit away — the inline form). */ .tuning-note-text { color: var(--ink); font-size: 0.9rem; line-height: 1.45; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Row actions: icon + label, >=44px, shrink-0. Edit = brand pair on hover (brand-ink/brand-soft 6.9:1); Delete = err pair on hover (9.1:1), consistent with .steering-delete. */ .tuning-edit, .tuning-delete { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; min-width: 44px; flex: 0 0 auto; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 0.82rem; white-space: nowrap; cursor: pointer; } .tuning-edit svg, .tuning-delete svg { width: 14px; height: 14px; display: block; } .tuning-edit:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft); } .tuning-delete:hover:not(:disabled) { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .tuning-edit:disabled, .tuning-delete:disabled { opacity: 0.5; cursor: wait; } /* Inline edit: the row swaps to a vertical card — the text span is hidden and replaced by the .tuning-edit-form (textarea pre-filled + Save/Cancel, reusing the phase-15 .tune-save/.tune-cancel styles); the row-level Edit/Delete buttons step aside for the form's own. */ .tuning-note.is-editing { flex-direction: column; align-items: stretch; gap: 0.5rem; background: var(--surface); border: 1px solid var(--brand-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; } .tuning-note.is-editing .tuning-note-text, .tuning-note.is-editing .tuning-edit, .tuning-note.is-editing .tuning-delete { display: none; } .tuning-edit-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .tuning-edit-input { font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; resize: vertical; min-height: 2.6rem; } .tuning-edit-input::placeholder { color: var(--ink-soft); } .tuning-edit-form-actions { display: flex; gap: 0.5rem; } /* Per-action status pills (role=status / role=alert), the phase-15 pairs: ok 10.6:1, err 9.1:1. */ .tuning-saved { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid color-mix(in srgb, var(--ok-ink) 35%, transparent); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 600; } .tuning-error { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 600; } #tune-empty { margin: 0.65rem 0 0; color: var(--ink-soft); font-size: 0.88rem; font-style: italic; text-align: center; } /* typing indicator */ /* align-items: center — the dots stay vertically centered when the phase-87 "Ns" hint (a full text line) makes the row taller; with only the three 8px dots the centering is a visual no-op. */ .typing { display: inline-flex; align-items: center; gap: 5px; padding: 0.9rem 1rem; } .typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); opacity: 0.5; animation: typing 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } } /* Phase 87 (TODO.md L5): the visible pre-token elapsed hint — the 10s thinking clock promoted from aria-only to sighted users. ink-soft on the bubble surface (the AA pairing), small mono like every status line. Plain text: no animation, no motion opt-out. The span is a sibling of the dots inside the same .typing bubble, so it resets the dot geometry (.typing span) it would otherwise inherit. The selector MUST stay ".typing span.typing-elapsed": a bare ".typing-elapsed" (0,1,0) LOSES the specificity war to the dot rule ".typing span" (0,1,1) — every reset below (width/height/border- radius/background/opacity/animation) would be overridden and the hint would render as an 8×8px bouncing dot with the "Ns" text wrapping one character per line (phase-87 regression, 2026-09). */ .typing span.typing-elapsed { width: auto; height: auto; border-radius: 0; background: none; opacity: 1; animation: none; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin-left: 0.5rem; } @media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: 0.7; } /* Phase 87 (TODO.md L5): the elapsed hint is plain text, not motion — it keeps full opacity (the AA pairing) under reduced motion. */ .typing span.typing-elapsed { opacity: 1; } /* Phase 17 thinking block: the chevron stills (no rotation motion). */ details.thinking summary::before { transition: none; } } /* ---------- Empty state & suggestions ---------- */ .empty-state { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 1.75rem; text-align: center; margin-top: 1rem; } .empty-state-glyph { color: var(--brand-ink); width: 44px; height: 44px; margin-inline: auto; } .empty-state-glyph svg { width: 44px; height: 44px; display: block; } .empty-state-title { margin: 0.8rem 0 0.4rem; font-size: 1.5rem; color: var(--ink); } .empty-state-sub { margin: 0 auto 1.25rem; max-width: 34rem; color: var(--ink-soft); } .empty-state-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; } .suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; list-style: none; margin: 0; padding: 0; } .suggestion-chip { font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; min-height: 44px; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .suggestion-chip:hover { background: var(--brand-soft); } .suggestion-chip:active { transform: scale(0.98); } /* ---------- Composer ---------- */ /* Phase 52 (2026-08-30, TODO.md L3): the composer is PINNED to the viewport bottom. The page scrolls at the document level and `.chat-shell` (the centered reading column — 72rem, the .container width at every viewport) is the composer's sticky containing block, so the box sticks to the bottom edge of the viewport at every scroll position and settles back into its normal flow position (above the footer) once the document bottom is reached. Before this, a long conversation put the composer below the fold while phase 42 forbids auto-scrolling a streaming reply — the Stop control could literally not be reached ("it runs away from the user as they try to click stop"). The pin is TWO rules working together — sticky alone is not enough (owner revision 2026-08-30: "the chat message-input textarea should be at the bottom of the screen"). `position: sticky` can only pull the box UP to the viewport's bottom edge while the document overflows; it never pushes it DOWN, so on an empty/short chat the box still sat mid-screen. `.messages { flex: 1 1 auto }` supplies the missing half: it puts the box's resting position at the bottom of the full-height column, and sticky takes over the moment the conversation overflows. The offset is the notch-aware safe-area inset (`env()` resolves to 0, or falls back to 0 where unsupported, so the box sits flush with the viewport bottom; ≤640px keeps its own `main { padding-bottom: env(safe-area-inset-bottom) }`). CSS-only by design: no DOM change, no JS, and NO new scroll call site (the phase-42 never-auto-scroll contract stays intact — `scrollReveal` is still the one page scroll in app.js). The solid `--surface` background, border, radius and shadow are kept so messages scrolling behind the pinned box never show through it, and no z-index is added: DOM order already paints the composer over `.messages`, it never overlaps the sticky header (z 20) and stays under the z-1000 document modal. Phase 65 (2026-09-01, `TODO.md` L3, owner-locked A1): the pin now belongs to the .chat-bottom wrapper (rule below) — the row + this form are ONE sticky unit; this composer's own sticky declaration is kept, redundant inside the wrapper but pinned as a computed style by tests/e2e/test_pinned_composer.py. */ /* Phase 65 (owner-locked A1, 2026-09-01, `TODO.md` L3): the pinned bottom cluster — the .chat-actions row + the #composer form as ONE sticky unit (A1): the pills are literally always at the bottom of the screen, even while the reader is scrolled up through a long conversation (the rejected in-flow alternative would scroll away). The sticky range is the .chat-shell containing block (the wrapper's parent) — the same range the composer used to have alone — and the .messages flex-grow still rests the WHOLE unit at the screen bottom on short chats (the wrapper is the last shell child, so the grow pushes it down). The shell's 1rem gap applies only ABOVE the unit, from .messages — the 0.5rem gap here is the row↔composer spacing INSIDE it. No z-index: the phase-12 sticky header (z 20) and the phase-46 dropdown always stay on top, and at the document bottom the unit settles back into flow above the footer (the composer's opaque surface keeps messages hidden where the box overlaps them). The composer's own sticky rule below stays — redundant here (its containing block is the wrapper, so it cannot shift within the unit), pinned by tests/e2e/test_pinned_composer.py. */ .chat-bottom { display: flex; flex-direction: column; gap: 0.5rem; position: sticky; bottom: env(safe-area-inset-bottom, 0); } /* Phase 88: pre-boot, the composer cluster is NOT sticky. The sticky promotion (a compositor layer) is deferred out of the first layout commit — on real Android, the cluster's sticky layer born at first commit was eating the hamburger's click (owner bug report 2026-09-08; the client-side switch into chat — same layer, born on a settled page — always worked). app.js adds .chat-booted two frames after boot settles; no-JS keeps the cluster static, which in the only no-JS state (empty, 100dvh document) sits exactly where the pin would. */ #view-chat:not(.chat-booted) .chat-bottom, #view-chat:not(.chat-booted) .composer { position: static; } .composer { display: flex; align-items: flex-end; gap: 0.6rem; position: sticky; bottom: env(safe-area-inset-bottom, 0); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.6rem; } .composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); } .composer textarea { flex: 1; font: inherit; color: var(--ink); border: 0; resize: none; max-height: 12rem; padding: 0.55rem 0.5rem; background: transparent; } .composer textarea::placeholder { color: var(--ink-soft); } .send-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 84px; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--brand); /* Dark ink on brand (5.2:1) — never white on brand (3.7:1, fails). */ color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; padding-inline: 1rem; } .send-btn:hover:not(:disabled) { background: var(--brand-hover); } .send-btn:disabled { background: var(--brand-busy); cursor: not-allowed; } /* Phase 48 (2026-08-29, TODO.md L3): the in-flight Stop treatment — one button, two roles. --brand-stop (the brand darkened 75% toward --bg; the built-in default mixes to ≈ (187, 50, 73)) with a white label = 5.8:1 (WCAG AA); the hover step (--brand at 55% toward --bg) holds 8.5:1. white is the ONE literal allowed outside :root — the dark bg ink on the stop fill is only ≈3.4:1 (fails AA). Same radius/height/ hit target as the Send state and the shared :focus-visible ring — the .is-stop class rides the same .send-btn element, and the later rules win the hover specificity tie. */ .send-btn.is-stop { background: var(--brand-stop); color: #fff; } .send-btn.is-stop:hover { background: color-mix(in srgb, var(--brand) 55%, var(--bg)); } /* Busy spinner: dark arc (--bg) on the --brand-busy button ≈ 11.3:1 (well above the 9:1 floor the phase-48 note pinned for the arc). */ .spinner { width: 16px; height: 16px; border: 2.5px solid color-mix(in srgb, var(--bg) 30%, transparent); border-top-color: var(--bg); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } } /* ---------- Banners ---------- */ .kb-banner { display: flex; align-items: center; gap: 0.5rem; background: var(--accent-bg); color: var(--accent-ink); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.92rem; font-weight: 600; } .kb-banner.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .kb-banner svg { width: 18px; height: 18px; flex: 0 0 auto; display: block; } /* Phase 53 (task 05): the stale-saved-chat banner — the .kb-banner FAMILY (the section carries both classes: same flex row, accent tokens — accent-ink on accent-bg 9.5:1 — 18px glyph), but the leading mark is the REDO glyph, distinct from the warning triangle. It sits directly after #kb-banner in .chat-shell, so when both are visible the empty-KB banner keeps the top slot and the stale banner stacks directly below (the flex column's gap spaces them). The text takes the row; the Regenerate pill right-aligns (margin-left: auto) and the row wraps only when it must. The pill is the EXACT brand-pill family of Save/Share: solid --brand, --bg text (5.2:1, AA), borderless, 999px radius, ≥44px target, hover lightens the brand fill; the 16px redo glyph is the phase-49 Retry asset. The ≤640px block below makes the pill a full-width row. */ .stale-banner { flex-wrap: wrap; } .stale-banner > span { flex: 1 1 auto; } .stale-regenerate { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; margin-left: auto; padding: 0.5rem 0.9rem; border-radius: 999px; border: 0; background: var(--brand); color: var(--bg); font: inherit; font-weight: 700; font-size: 0.95rem; white-space: nowrap; cursor: pointer; } .stale-regenerate:hover { background: var(--brand-hover); color: var(--bg); } .stale-regenerate:disabled { opacity: 0.6; cursor: wait; } .stale-regenerate svg { width: 16px; height: 16px; display: block; } /* Phase 55 (task 04): the share-success toast (TODO.md L5). Top-right, just under the sticky header (--header-h + a small offset — the variable already steps 64px → 58px at ≤640px), z-index 1000 (the modal overlay contract — above the header's 20 and the skip-link's 100). VISUAL ONLY (A4 owner-locked): the node ships aria-hidden from app.js — #send-status stays the a11y announcer (no double screen-reader read). Solid brand fill: --bg text on --brand = 5.2:1 (AA — the .new-chat-btn family); rounded, shadowed, one line of text that wraps under the small max-width. Hidden by default (opacity 0 + pointer-events: none — it never intercepts clicks when idle); .toast.is-visible (toggled by showToast) runs the entry: slide-down + fade (translateY(-8px) → 0, 200ms). */ .toast { position: fixed; top: calc(var(--header-h) + 0.75rem); right: 1rem; z-index: 1000; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); font-size: 0.92rem; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 200ms ease, transform 200ms ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { /* No slide: BOTH states rest at transform: none (the .is-visible rule would otherwise out-specify the bare .toast); the opacity fade remains (120ms). */ .toast, .toast.is-visible { transform: none; } .toast { transition: opacity 120ms ease; } } /* ---------- Login page (phase 16) ---------- */ /* Centered card in the standard frame: one admin, one password. */ .login-shell { display: flex; justify-content: center; flex: 1; } .login-card { width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem 2rem 2.25rem; } .login-card h1 { margin: 0 0 0.4rem; font-size: 1.6rem; } .login-sub { margin: 0 0 1.5rem; color: var(--ink-soft); } #login-form { display: flex; flex-direction: column; gap: 0.75rem; } #login-password { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; min-height: 44px; } #login-password:focus-visible { border-color: var(--brand); } /* Brand button: dark ink on brand 5.2:1 (never white on brand). */ .login-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); font: inherit; font-weight: 700; cursor: pointer; padding-inline: 1rem; } .login-submit:hover:not(:disabled) { background: var(--brand-hover); } .login-submit:disabled { opacity: 0.6; cursor: wait; } /* Login failure (role=alert): err pair ≈9.1:1. */ .login-error { margin: 0.9rem 0 0; background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); border-radius: var(--radius-sm); padding: 0.5rem 0.8rem; font-size: 0.9rem; font-weight: 600; } /* ---------- Sources page ---------- */ .sources-shell { display: flex; flex-direction: column; gap: 1.25rem; flex: 1; } /* Phase 93 task 03 (TODO.md L3): "the header and description of each page needs a background - the grid makes it hard to read." Every page's h1 + description sits on a solid surface panel — the house card language (var(--surface) fill, itself tab-controlled, so a monochrome theme grays it automatically; the 1px --line border; the house radius). No new color literal, no blur (the phase-08 perf anchor). One rule covers the six shell views' .page-head (Global Tuning, Knowledge base, Git sources, Saved chats, Access tokens, Theme) + doc-edit.html, and the shared page's head (its h1 + lede are wrapped in the same class in shared.html). #view-chat carries no .page-head — its head is the navbar (audited, unchanged). The History page-head keeps its flex row (scoped below — the padding lives on the flex container, not the children). */ .page-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; } .page-head h1 { margin: 0 0 0.25rem; font-size: 1.7rem; } .page-head-row { display: flex; align-items: center; gap: 1rem; } .page-sub { margin: 0; color: var(--ink-soft); } .page-sub code { font-family: var(--mono); font-size: 0.85em; background: var(--brand-soft); padding: 0.1em 0.35em; border-radius: 5px; } /* ---------- Sync button (Sources page) ---------- */ .sync-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 44px; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: 0.95rem; white-space: nowrap; cursor: pointer; flex-shrink: 0; } .sync-btn:hover { background: var(--brand-soft); color: var(--brand-ink); } .sync-btn:disabled { opacity: 0.6; cursor: wait; } .sync-btn.is-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .sync-btn.is-error:hover { background: var(--err-bg); color: var(--err-ink); } .sync-icon { width: 16px; height: 16px; display: block; flex: 0 0 auto; } .sync-btn .sync-icon.is-spinning { animation: spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .sync-btn .sync-icon.is-spinning { animation: none; } } /* Phase 64: the live-file label ("Syncing… (n/m)" / "Importing (n/m)") — a long source/relative/path ellipsizes inside the pill; the full path lives in the button title + #sync-result (the aria-live announcer). */ .sync-label { display: inline-block; max-width: min(16rem, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Last-result announcer — soft ink, small mono */ .sync-result { display: block; color: var(--ink-soft); font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; padding-block: 0.5rem; } /* Sync failure modal — lazily created by sources.js, appended to . Error surface: --err-bg with --err-line border, title in --ink, error text in --err-ink (9.1:1 on --err-bg). Backdrop dims with --bg at 82%. z-index 1000 (same overlay contract as doc-modal). */ .sync-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in srgb, var(--bg) 82%, transparent); visibility: hidden; opacity: 0; transition: opacity 120ms ease; } .sync-modal-backdrop.is-open { visibility: visible; opacity: 1; } .sync-modal { position: relative; width: 100%; max-width: 28rem; background: var(--err-bg); border: 1px solid var(--err-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.1rem 3rem 1.25rem 1.25rem; } #sync-modal-title { margin: 0 0 0.6rem; font-size: 1.1rem; color: var(--ink); } #sync-modal-error { margin: 0 0 1rem; font-family: var(--mono); font-size: 0.9rem; color: var(--err-ink); overflow-wrap: anywhere; } .sync-modal-close { position: absolute; top: 0.3rem; right: 0.3rem; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--err-line); background: transparent; color: var(--err-ink); font-size: 1.2rem; line-height: 1; cursor: pointer; } .sync-modal-close:hover { background: color-mix(in srgb, var(--err-line) 15%, transparent); } @media (prefers-reduced-motion: reduce) { .sync-modal-backdrop { transition: none; } } .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.15rem; } /* Mono stat values — technical readout (phase 08). */ .stat-value { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--brand-ink); line-height: 1.1; } .stat-value-sm { font-size: 1.15rem; font-weight: 700; } .stat-label { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; } /* Phase 16: anonymous sign-in gate — the designed replacement for the catalog (stat cards + table) until the admin signs in. */ .sources-gate { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 1.75rem; } .sources-gate-glyph { color: var(--brand-ink); width: 44px; height: 44px; } .sources-gate-glyph svg { width: 44px; height: 44px; display: block; } .sources-gate h2 { margin: 0.6rem 0 0.3rem; font-size: 1.4rem; } .sources-gate-sub { margin: 0 auto; max-width: 30rem; color: var(--ink-soft); } .sources-gate-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.75rem; padding: 0.5rem 1.4rem; border-radius: 999px; background: var(--brand); color: var(--bg); /* dark ink on brand: 5.2:1 */ font-weight: 700; text-decoration: none; } .sources-gate-link:hover { background: var(--brand-hover); } /* Phase 79 (task 05): the in-app token gate — the gate surface of the two token-only pages (the shell + the document viewer, one shared .auth-gate markup each). A body-level FIXED overlay (the body-level doc-modal precedent): while visible it is the only CONTENT-level interactive surface — assets/token-gate.js locks the root (#main, inert) so focus and keyboard traversal stay inside the gate (WCAG, the inert-pair contract). Stacking (phase 85, TODO.md L3): z-index 15 — ABOVE all app content (static) but BELOW the sticky header (20) and its mobile dropdown (21, inside the header's stacking context): the unauthenticated visitor keeps a reachable hamburger + menu while the gate still covers and locks the app content (#main stays inert — the lock is JS, not z-order — phase 79). The skip-link (100) and the 1000-family overlays (doc-modal, sync backdrop) are unaffected — all above 15; the doc-modal can only be opened from the unlocked app anyway. Solid --bg: the canvas + grid texture live on (the body stays transparent), so the overlay reads as the app's own surface — no blur (the phase-08 perf anchor). The centered card reuses the #sources-gate visual language (surface card + hairline + glyph + heading + sub + action) in a tighter column. */ .auth-gate { position: fixed; inset: 0; z-index: 15; display: flex; /* the card is the only in-flow child — margin: auto centers it */ overflow-y: auto; /* short viewports: the card scrolls fully into view */ background: var(--bg); } /* Explicit (the global [hidden] rule already wins — this is the documented, testable contract for the skeleton). */ .auth-gate[hidden] { display: none; } .auth-gate-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; /* margin:auto centers AND stays scrollable on overflow (the flex centering pitfall: align/justify center would clip the top of a taller-than-viewport card). */ margin: auto; width: min(28rem, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 1.75rem; } .auth-gate-glyph { color: var(--brand-ink); width: 44px; height: 44px; } .auth-gate-glyph svg { width: 44px; height: 44px; display: block; } .auth-gate h2 { margin: 0.6rem 0 0.3rem; font-size: 1.4rem; } .auth-gate-sub { margin: 0; max-width: 24rem; color: var(--ink-soft); } /* The token form: mono input (the token is code — the house mono language), a visible focus ring (WCAG — the 3px :focus-visible outline at offset 0 + the brand border), and the house submit button (the .tune-save language: dark ink on brand, 5.2:1). Both targets are ≥44px (the touch-target contract). */ .auth-gate form { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; margin-top: 0.9rem; } .auth-gate input { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); /* 16.7:1 on --bg */ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; min-height: 44px; width: 100%; } .auth-gate input::placeholder { color: var(--ink-soft); } .auth-gate input:focus-visible { outline-offset: 0; border-color: var(--brand); } .auth-gate-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.4rem 1.1rem; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--bg); /* dark ink on brand: 5.2:1 */ font: inherit; font-weight: 700; cursor: pointer; } .auth-gate-submit:hover:not(:disabled) { background: var(--brand-hover); } .auth-gate-submit:disabled { opacity: 0.6; cursor: wait; } /* The one-line error (role=alert) — the rose/danger family the house alerts use (--err-ink on --err-bg, 9.3:1). */ .auth-gate-error { margin: 0.75rem 0 0; background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; } /* The secondary "Sign in as admin" link reuses the .sources-gate-link pill language (its own margin-top: 0.75rem applies) — the guest's other door: the admin password login (the static ?next=/ is the no-JS fallback). */ /* Phase 86: the card is the containing block for the position:absolute .visually-hidden elements it hosts (the table