/* catkeys web vault — app shell. Plain CSS, no build step touches this file beyond a verbatim copy (catkeys/web/build.mjs). Palette matches public/catkeys/index.html's placeholder so the vault reads as the same product as the marketing page. Pride rebrand (this pass): the marketing page + privacy + changelog already carry a gradient wordmark and a pride-toe favicon via public/catkeys/css/brand.css. This file brings the vault to parity by linking that same file from index.html (see its comment) and reusing its `--pride-gradient` custom property — no second palette invented here, per the brief. Two places pick it up: - the header brand span, via the shared `.wordmark` class (index.html) - `.app-header`'s bottom edge, a decorative gradient rule below (not text, so it can't hurt the contrast a password manager depends on) `--accent` below was recolored from the placeholder teal (#7dd3c0) to #ff8c00 — one of the six flag stops, not a new color — deliberately: of the six, it has the best contrast against `--bg` (~8.2:1, computed via WCAG relative luminance), comfortably clearing AA for both "dark text on this as a button fill" (.btn-primary) and "this as text/outline on --bg" (links, focus rings). Red/green/blue/purple all sit between ~1.9:1 and ~3.9:1 against this background — legible as a decorative accent but not as the color carrying interactive state on a screen where misreading a control has real consequences. Yellow (#ffed00) tests even higher-contrast than orange but was skipped as the functional accent because it reads as a caution/warning color in UI conventions, which a primary action button (.btn-primary) should not. */ :root { color-scheme: light dark; --bg: #0e0f12; --fg: #e8e6e3; --fg-dim: #a9a6a1; --border: #2a2c31; --accent: #ff8c00; --danger: #e37b7b; } * { box-sizing: border-box; } /* Accent-colored focus rings everywhere by default (buttons, links, anything without a more specific rule below) — the same technique public/cattracks/app/app.css already uses for its own `--signal` accent. The more specific `:focus-visible` rules further down (auth-form inputs, item-search, item-form textarea) keep their own tighter `outline-offset: 1px`; this is only the fallback for everything else, including native browser default outlines on plain buttons that had no rule at all before. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); } .app-header { padding: 1rem 1.5rem; /* Solid fallback (`--border`, same as before) painted first so an engine with no border-image support still shows the plain divider this replaces; border-image-source then overrides the paint with the pride gradient where it's supported. `border-image-slice: 1` is the standard non-distorting slice for a gradient source (see MDN's border-image examples) — the gradient has no natural pixel edges to slice, so any nonzero slice works. */ border-bottom: 3px solid var(--border); border-image-source: var(--pride-gradient, linear-gradient(90deg, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%)); border-image-slice: 1; } .app-header-brand { color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; } /* `.wordmark` (public/catkeys/css/brand.css) gives this span the same gradient-fill as the static pages'

, but its `:hover { opacity: 0.85 }` is cancelled here on purpose: this label is deliberately not a link (see the long comment in index.html), and a hover reaction is a click affordance this element must not send. */ .app-header-brand.wordmark:hover { opacity: 1; } #app { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; text-align: center; } .honesty-notice { max-width: 34rem; margin: 0 auto 1.5rem; padding: 0 1.5rem; font-size: 0.85rem; line-height: 1.5; color: var(--fg-dim); text-align: center; } .app-footer { padding: 1rem 1.5rem 1.5rem; text-align: center; font-size: 0.8rem; } .app-footer a { color: var(--fg-dim); text-decoration: none; } .app-footer a:hover { color: var(--fg); } /* ── register / auth screens ─────────────────────────────────────────────────────────── */ #app { align-items: flex-start; } .auth-form, .kit-screen, .vault-placeholder { width: 100%; max-width: 30rem; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 0.75rem; } .auth-form h1, .kit-screen h1, .vault-placeholder h1 { font-size: 1.3rem; margin: 0 0 0.25rem; } .auth-form label { font-size: 0.85rem; color: var(--fg-dim); margin-top: 0.25rem; } .auth-form input { width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; } .auth-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .auth-form textarea { width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; resize: vertical; } .auth-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn-primary { margin-top: 0.5rem; padding: 0.7rem 1rem; border-radius: 0.4rem; border: none; background: var(--accent); color: #0e0f12; font-weight: 600; cursor: pointer; } .btn-primary:disabled { opacity: 0.6; cursor: default; } .btn-link { background: none; border: none; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 0.85rem; padding: 0; align-self: flex-start; } .pw-field { display: flex; gap: 0.5rem; align-items: stretch; } .pw-field input { flex: 1 1 auto; min-width: 0; } .pw-toggle { flex: 0 0 auto; padding: 0 0.8rem; border-radius: 0.4rem; border: 1px solid var(--border); background: none; color: var(--fg-dim); font: inherit; font-size: 0.85rem; cursor: pointer; } .pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); } .pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .form-help { font-size: 0.85rem; color: var(--fg-dim); margin: 0; } .form-error { font-size: 0.85rem; color: var(--danger); margin: 0; } .form-info { font-size: 0.85rem; color: var(--accent); margin: 0; } .timing-banner { font-variant-numeric: tabular-nums; } /* ── Wake revalidation: the "this screen is not live" banner ────────────────────────────── * * ⛔ IT HAS TO BE IMPOSSIBLE TO MISS. The failure it reports is a vault that LOOKS completely * normal over a client that can no longer talk to anything — the owner's own words were "I * could not tell that I was logged out; just the API stopped working". A quiet grey line would * reproduce that bug in a smaller font. So: full width at the very top of the container (it is * `prepend`ed, above the vault header), danger-coloured with a tinted fill, in the same visual * register as `.kit-warning` — this app's other "read this" surface. * * No inline style anywhere near it: `style-src 'self'` with no `'unsafe-inline'` drops one * outright, which is how the folder indent bar shipped rendering dead flat. */ .wake-banner { border: 1px solid var(--danger); border-left-width: 0.35rem; border-radius: 0.5rem; padding: 0.85rem 1rem; margin: 0 0 1rem; background: rgba(227, 123, 123, 0.12); color: var(--fg); font-size: 0.9rem; line-height: 1.5; } /* ── Kit screen — deliberately the most visually insistent screen in the app ────────────── */ .kit-warning { border: 1px solid var(--danger); border-radius: 0.5rem; padding: 0.9rem 1rem; background: rgba(227, 123, 123, 0.08); color: var(--fg); font-size: 0.9rem; line-height: 1.5; margin: 0; } .secret-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.03em; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 0.4rem; background: #16181c; word-break: break-all; margin: 0 0 0.75rem; } .phrase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem 0.75rem; padding: 0; margin: 0 0 0.75rem; list-style-position: inside; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .phrase-grid li { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 0.3rem; } /* Kit copy buttons. The status text is deliberately as prominent as the button: a failed copy on this screen means the user walks away without their Kit, so it must not read as a quiet aside. See ui/register.js::copyButton. */ .copy-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; } .btn-copy { font: inherit; font-size: 0.9rem; padding: 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 0.35rem; background: #1d2026; color: var(--fg); cursor: pointer; } .btn-copy:hover { border-color: var(--accent); } .copy-status { font-size: 0.85rem; color: var(--muted); } .copy-status.copy-failed { color: var(--danger); font-weight: 600; } .kit-clipboard-note { font-size: 0.85rem; line-height: 1.5; color: var(--muted); margin: 0 0 1rem; } .drill-field { display: flex; flex-direction: column; gap: 0.2rem; } @media (max-width: 30rem) { .phrase-grid { grid-template-columns: repeat(2, 1fr); } } /* ── vault (unlock + item list/detail/create/edit) ───────────────────────────────────── */ .vault-screen { width: 100%; max-width: 34rem; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 0.9rem; } .vault-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .vault-header h1 { font-size: 1.3rem; margin: 0; } .vault-header-actions { display: flex; align-items: center; gap: 1rem; } /* Account menu (account-settings Task 4) — a small pulldown anchored to the header's "Account ▾" toggle, not a modal/backdrop (contrast .generator-popover-backdrop): this is a short list of navigation links, not a form. */ .account-menu { position: relative; } .account-menu-toggle { white-space: nowrap; } .account-menu-list { position: absolute; top: 100%; right: 0; z-index: 10; margin: 0.4rem 0 0; padding: 0.35rem; list-style: none; min-width: 11rem; border: 1px solid var(--border); border-radius: 0.5rem; background: #16181c; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35); } .account-menu-item { display: block; width: 100%; text-align: left; padding: 0.5rem 0.6rem; border-radius: 0.35rem; text-decoration: none; font-size: 0.9rem; } .account-menu-item:hover, .account-menu-item:focus-visible { background: #1d2026; outline: none; } .account-menu-item-danger { color: var(--danger); } .item-search { width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; } .item-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .item-list-row { width: 100%; text-align: left; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 0.4rem; background: #16181c; color: var(--fg); font: inherit; cursor: pointer; } .item-list-row:hover, .item-list-row:focus-visible { border-color: var(--accent); outline: none; } .detail-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; } .btn-danger { padding: 0.6rem 0.9rem; border-radius: 0.4rem; border: 1px solid var(--danger); background: none; color: var(--danger); font-weight: 600; cursor: pointer; } .btn-danger:disabled { opacity: 0.6; cursor: default; } .device-row { padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 0.4rem; background: #16181c; display: flex; flex-direction: column; gap: 0.35rem; } .device-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.2rem; } .item-form textarea { width: 100%; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; resize: vertical; } .item-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── folders (the schema revision, 2026-08-25) ───────────────────────────────────────── These four groups — the list screen's folder bar, the folders screen's list, the folder form, and the item form's custom-field editor — shipped functional and completely unstyled (browser defaults) because the branch that built them had app.css scoped away from it. See SCHEMA-REPORT.md §8. */ .folder-bar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* Matches .item-search directly above it in the flow, so the two controls under the search box read as one row rather than as a styled input next to a raw OS dropdown. */ .folder-filter { flex: 1; min-width: 0; padding: 0.55rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; } .folder-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .folder-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 0.4rem; background: #16181c; } /* ⛔ ONE RULE PER DEPTH, MATCHED EXACTLY — see ui/vault.js::folderIndentLevel. The indent used to be an inline style attribute, which `style-src 'self'` (no 'unsafe-inline') in this page's CSP blocks, so nesting was invisible in production. `folderIndentLevel` clamps to 6, which is why the ladder stops there: an unmatched attribute means NO indent, and a deep folder snapping back to the left margin reads as a top-level folder. Nesting is also carried by the leading accent rule below, so depth survives even at the clamp. */ .folder-row[data-depth="1"] { margin-left: 1rem; } .folder-row[data-depth="2"] { margin-left: 2rem; } .folder-row[data-depth="3"] { margin-left: 3rem; } .folder-row[data-depth="4"] { margin-left: 4rem; } .folder-row[data-depth="5"] { margin-left: 5rem; } .folder-row[data-depth="6"] { margin-left: 6rem; } /* A nested folder gets a left edge in the accent so the hierarchy survives the depth clamp and is visible without relying on margin alone (which a narrow viewport squeezes out). */ .folder-row:not([data-depth="0"]) { border-left: 3px solid var(--accent); } .folder-name { font-weight: 600; } .folder-count { color: var(--fg-dim); font-size: 0.85rem; margin-right: auto; } /* The create/rename/move form sits inline in the folders screen; the card treatment separates it from the list beneath without a modal. `.auth-form` (also on this element) already supplies the column layout and input styling. */ .folder-form { padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: #16181c; max-width: none; } .folder-form h2 { font-size: 1rem; margin: 0; } .folder-form select, .item-form select { width: 100%; padding: 0.55rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; } .folder-form select:focus-visible, .item-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ── custom fields (the schema revision) ───────────────────────────────────────────────── */ .custom-fields-editor { display: flex; flex-direction: column; gap: 0.5rem; } .custom-field-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* The two inputs share the row evenly and the Remove link takes only what it needs. `.auth-form input`'s `width: 100%` would otherwise force each onto its own line. */ .custom-field-row input { flex: 1; min-width: 7rem; width: auto; } .custom-fields h2, .item-form h2 { font-size: 1rem; margin: 0.5rem 0 0; } /* ── the item form's password row + strength readout (generator wiring) ────────────────── */ .password-row { display: flex; align-items: center; gap: 0.5rem; } .password-row input { flex: 1; min-width: 0; width: auto; } .btn-generate { flex: none; padding: 0.55rem 0.75rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #1d2026; color: var(--fg); font: inherit; font-size: 0.85rem; white-space: nowrap; cursor: pointer; } .btn-generate:hover { border-color: var(--accent); } .password-strength { display: flex; align-items: center; gap: 0.5rem; margin: 0; min-height: 1.2rem; font-size: 0.85rem; } /* Shares its `data-label` vocabulary with `.generator-strength-bar` below — both are driven by ui/register.js::estimatePasswordStrength, so a field and the popover that filled it can never describe the same value with two different colours. */ .password-strength-bar, .generator-strength-bar { display: inline-block; width: 3.5rem; height: 0.4rem; border-radius: 999px; flex: none; background: var(--border); } .password-strength-bar[data-label="none"] { opacity: 0; } .password-strength-bar[data-label="weak"], .generator-strength-bar[data-label="weak"] { background: var(--danger); } .password-strength-bar[data-label="fair"], .generator-strength-bar[data-label="fair"] { background: #d9a441; } .password-strength-bar[data-label="good"], .password-strength-bar[data-label="strong"], .generator-strength-bar[data-label="good"], .generator-strength-bar[data-label="strong"] { background: var(--accent); } .password-strength-label, .generator-strength-label { color: var(--fg-dim); } /* ── generator popover (was catkeys/web/src/generator.css) ───────────────────────────────── Folded in here rather than left as a second stylesheet — see WIRE-UI-REPORT.md §5. The var() fallbacks the standalone file carried are dropped: those named the pre-rebrand teal (#7dd3c0) as the fallback for `--accent`, which is now #ff8c00, so a stylesheet that ever actually fell back would have painted the old palette. Loaded from this file, `:root` above is always present. */ .generator-popover-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; } .generator-popover { width: 100%; max-width: 26rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 0.6rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45); } .generator-value-row { display: flex; align-items: center; gap: 0.35rem; } .generator-value-input { flex: 1; min-width: 0; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; } .generator-icon-btn { flex: none; font-size: 1.1rem; line-height: 1; padding: 0.45rem 0.5rem; border-radius: 0.35rem; text-decoration: none; } .generator-icon-btn:hover { background: var(--border); } .generator-strength { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .generator-copy-status { margin: 0; font-size: 0.85rem; color: var(--accent); } .generator-field { display: flex; flex-direction: column; gap: 0.35rem; } .generator-field label, .generator-field > span { font-size: 0.85rem; color: var(--fg-dim); } .generator-field select { padding: 0.5rem 0.6rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; } .generator-field input[type="range"] { width: 100%; accent-color: var(--accent); } .generator-checkbox-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; } .generator-checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } .generator-checkbox input[type="checkbox"] { accent-color: var(--accent); } .generator-separator-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .generator-separator-btn { min-width: 2.1rem; padding: 0.35rem 0.5rem; border-radius: 0.35rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; } .generator-separator-btn-active { border-color: var(--accent); color: var(--accent); } .generator-callout { margin: 0; padding: 0.6rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg-dim); font-size: 0.85rem; } .generator-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .generator-actions .btn-primary { margin-top: 0; } /* ── TOTP readout (was catkeys/web/src/totp.css) ─────────────────────────────────────────── Folded in here for the same reasons as the generator styles above, with one substantive change: the standalone file drove its countdown ring from a `--totp-fraction` custom property "set inline by the caller", and an inline style attribute is exactly what this page's CSP forbids (`style-src 'self'`, no 'unsafe-inline') — the ring would simply never have moved. The sweep is now one rule per discrete step, matched off a plain `data-step` attribute that CSP does not govern. See WIRE-UI-REPORT.md §4. */ .totp-widget { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 0.6rem; background: #16181c; color: var(--fg); } .totp-widget-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .totp-issuer { font-weight: 600; font-size: 0.95rem; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .totp-account { font-size: 0.8rem; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .totp-code-row { display: flex; align-items: center; gap: 0.85rem; } /* ⛔ SOLID `--accent`, NEVER THE PRIDE GRADIENT. This is the one string of characters on the screen a person transcribes digit by digit under time pressure; #ff8c00 was picked by measuring ~8.2:1 against --bg, and a gradient across six flag stops would drag most of those digits down to 1.9-3.9:1. The gradient lives on borders and rules in this file, not on text. */ .totp-code { font: 1.7rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.14em; color: var(--accent); user-select: all; margin-right: auto; } /* The two halves ui/vault.js::totpDigitGroups produces, spaced the way every authenticator app renders a code. Adjacent-sibling rather than nth-child so the gap follows the grouping the JS actually chose, whatever the digit count. */ .totp-code-group + .totp-code-group { margin-left: 0.35em; } .totp-copy-btn { flex: none; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); border-radius: 0.35rem; padding: 0.35rem 0.6rem; font: inherit; font-size: 0.8rem; cursor: pointer; } .totp-copy-btn:hover { color: var(--fg); border-color: var(--accent); } .totp-countdown-row { display: flex; align-items: center; gap: 0.5rem; } /* One rule per step (0..12, ui/vault.js::TOTP_RING_STEPS). The `transition` is what makes a 12-step sweep read as continuous rather than as a stutter; `prefers-reduced-motion` drops it below, leaving the ring correct but instantaneous. */ .totp-countdown-ring { width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none; background: var(--border); transition: background 0.3s linear; } .totp-countdown-ring[data-step="1"] { background: conic-gradient(var(--accent) 30deg, var(--border) 0); } .totp-countdown-ring[data-step="2"] { background: conic-gradient(var(--accent) 60deg, var(--border) 0); } .totp-countdown-ring[data-step="3"] { background: conic-gradient(var(--accent) 90deg, var(--border) 0); } .totp-countdown-ring[data-step="4"] { background: conic-gradient(var(--accent) 120deg, var(--border) 0); } .totp-countdown-ring[data-step="5"] { background: conic-gradient(var(--accent) 150deg, var(--border) 0); } .totp-countdown-ring[data-step="6"] { background: conic-gradient(var(--accent) 180deg, var(--border) 0); } .totp-countdown-ring[data-step="7"] { background: conic-gradient(var(--accent) 210deg, var(--border) 0); } .totp-countdown-ring[data-step="8"] { background: conic-gradient(var(--accent) 240deg, var(--border) 0); } .totp-countdown-ring[data-step="9"] { background: conic-gradient(var(--accent) 270deg, var(--border) 0); } .totp-countdown-ring[data-step="10"] { background: conic-gradient(var(--accent) 300deg, var(--border) 0); } .totp-countdown-ring[data-step="11"] { background: conic-gradient(var(--accent) 330deg, var(--border) 0); } .totp-countdown-ring[data-step="12"] { background: var(--accent); } /* The final seconds. Listed after the step ladder so it wins at equal specificity — both are one class plus one attribute. ⛔ THE FULL LADDER, NOT JUST THE LOW STEPS. The obvious economy is to define warn rules only for the steps reachable inside the warn window, which at the near-universal 30-second period is 0-2. But `period` comes from the issuer's own URI and `parseOtpauthUri` accepts any positive integer — a 10-second issuer puts `totpRingStep(5, 10)` at 6, and a missing rule there does not fail loudly: it falls through to the accent-coloured rule above and the ring simply never turns red, for exactly the users whose codes expire fastest. */ .totp-countdown-ring-warn[data-step="0"] { background: var(--border); } .totp-countdown-ring-warn[data-step="1"] { background: conic-gradient(var(--danger) 30deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="2"] { background: conic-gradient(var(--danger) 60deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="3"] { background: conic-gradient(var(--danger) 90deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="4"] { background: conic-gradient(var(--danger) 120deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="5"] { background: conic-gradient(var(--danger) 150deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="6"] { background: conic-gradient(var(--danger) 180deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="7"] { background: conic-gradient(var(--danger) 210deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="8"] { background: conic-gradient(var(--danger) 240deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="9"] { background: conic-gradient(var(--danger) 270deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="10"] { background: conic-gradient(var(--danger) 300deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="11"] { background: conic-gradient(var(--danger) 330deg, var(--border) 0); } .totp-countdown-ring-warn[data-step="12"] { background: var(--danger); } .totp-countdown-label { font-size: 0.78rem; color: var(--fg-dim); font-variant-numeric: tabular-nums; min-width: 2rem; } .totp-error { margin: 0; padding: 0.55rem 0.7rem; border-radius: 0.4rem; border: 1px solid var(--danger); background: var(--bg); color: var(--danger); font-size: 0.85rem; } .totp-import-hint { margin: 0; font-size: 0.8rem; color: var(--fg-dim); } /* ── motion ────────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* The countdown ring's sweep is the only animated thing in this file. Dropped to an instant repaint rather than hidden: the information it carries (how long this code lasts) is the point of the widget, and the numeric label beside it is unaffected either way. */ .totp-countdown-ring { transition: none; } } /* ── Keeper import ─────────────────────────────────────────────────────────────────────── */ /* The import screen shows a lot of prose (a preview, a warning list that can run to hundreds of lines on a real vault, and a report), so its job here is to stay readable and bounded rather than decorative. Nothing on this screen may be styled inline: `style-src 'self'` with no 'unsafe-inline' is what turned the folders screen's computed indent into a no-op in production, and the progress bar below is a native element specifically so its fill is the browser's job and not a width computed into a style attribute. */ .import-preview, .import-running, .import-report { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: #16181c; } .import-preview h2, .import-report h2, .import-warnings h2 { font-size: 1rem; margin: 0; } .import-counts { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--fg-dim); } .import-policy-row { display: flex; align-items: center; gap: 0.5rem; } .import-policy-row label { margin: 0; font-weight: 400; font-size: 0.9rem; } /* ⛔ SCROLLS, NEVER TRUNCATES. Every warning here names something that did not make it in, or came in changed; hiding the overflow behind a "…and 240 more" would be exactly the silent loss the whole import flow is shaped to avoid. */ .import-warnings { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid var(--border); border-radius: 0.4rem; padding: 0.7rem 0.8rem; background: var(--bg); } .import-warning-list { margin: 0; padding-left: 1.1rem; max-height: 16rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--fg-dim); overflow-wrap: anywhere; } /* A real position, not a spinner: an 18-minute import behind an indeterminate bar is indistinguishable from a hang. Sized and coloured explicitly because the UA default is a thin light-mode bar that vanishes against this background. */ .import-progress { width: 100%; height: 0.9rem; appearance: none; border: 1px solid var(--border); border-radius: 0.45rem; background: var(--bg); overflow: hidden; } .import-progress::-webkit-progress-bar { background: var(--bg); } .import-progress::-webkit-progress-value { background: var(--accent); } .import-progress::-moz-progress-bar { background: var(--accent); } input[type="file"] { font: inherit; color: var(--fg-dim); padding: 0.5rem 0; } /* ── record history + deleted items (2026-08-25) ─────────────────────────────────────── ⛔ NO INLINE STYLES ANYWHERE IN THE SCREENS THESE SERVE. `/app/index.html` declares `style-src 'self'` with NO `'unsafe-inline'`, so a `style=` attribute is not a stylistic choice that renders slightly differently — it is BLOCKED, and the element renders with browser defaults while every test stays green. That is exactly how the folder indent shipped flat (see the `.folder-row[data-depth]` block above and WIRE-UI-REPORT.md §4). Both screens below are styled entirely from here, and `backend/tests/catkeys/test_web_bundle.py`'s inline -style gate is what keeps it that way. Deliberately built from the SAME primitives the devices screen already uses (`.device-row`'s card: 1px border, 0.4rem radius, #16181c fill) rather than a new visual language — these are list-of-records screens like that one, and a password manager's recovery surfaces should look like the rest of the app, not like a feature bolted on. */ .history-screen h1, .deleted-screen h1 { margin-bottom: 0.2rem; } /* The item whose history is being shown. Sits directly under the h1 as a subtitle. */ .history-subject { margin: 0 0 0.9rem; color: var(--fg-dim); font-size: 0.95rem; } /* ⛔ THE RETENTION STATEMENT. Given real visual weight on purpose — a left accent rule and its own background — because it is the one thing on this screen that stops the list from reading as a complete record. Understating it would be a correctness problem, not a design one. */ .history-retention { border-left: 3px solid var(--accent); padding: 0.55rem 0.8rem; border-radius: 0 0.4rem 0.4rem 0; background: #1a1207; margin: 0 0 1rem; } .deleted-explainer { margin: 0 0 1rem; color: var(--fg-dim); } .history-list, .deleted-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .history-row, .deleted-row { padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 0.4rem; background: #16181c; display: flex; flex-direction: column; gap: 0.3rem; } /* A version or row that would not decrypt. Muted rather than alarming: it is a fact about one retained record, not an error the user did anything to cause — and it is deliberately still listed rather than hidden, so the version numbering has no silent gaps. */ .history-row-corrupt, .deleted-row-corrupt { border-style: dashed; color: var(--fg-dim); } .history-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .history-version { font-weight: 600; } .history-when, .deleted-when { color: var(--fg-dim); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .history-title, .deleted-title { margin: 0; font-weight: 600; } .history-username, .deleted-username { margin: 0; color: var(--fg-dim); font-size: 0.9rem; } .history-changed { margin: 0.1rem 0 0; color: var(--fg-dim); font-size: 0.9rem; } /* The revealed historical password. Monospace + wrap-anywhere for the same reason the detail pane needs it: a generated password is long, has no spaces, and must be readable character by character to be transcribed. */ .history-reveal { margin-top: 0.35rem; padding: 0.5rem 0.65rem; border-radius: 0.4rem; background: #101216; border: 1px solid var(--border); } .history-password { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; user-select: all; } .history-row-actions, .deleted-row-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.2rem; } .history-confirm { display: inline-flex; align-items: center; gap: 0.75rem; } .history-row-note, .deleted-row-note { margin: 0.2rem 0 0; color: var(--fg-dim); font-size: 0.9rem; } .deleted-row-main { display: flex; flex-direction: column; gap: 0.15rem; } /* ── phase 1: "make it navigable" (three panes, sort, favourites, list/grid, Zoom) ───── Design: docs/superpowers/specs/2026-08-25-catkeys-web-vault-ux-design.md §1.1 and §5. ⛔ EVERY class below is emitted by ui/vault.js and asserted to have a rule here by catkeys/web/test/vault-nav.test.mjs. That gate exists because the schema revision's folder bar, folder list and TOTP readout all shipped to production rendering with BROWSER DEFAULTS — app.css was scoped away from the branch that added the classes, and nothing asserted the two halves agreed. The inline-style gate in test_web_bundle.py proves no `style=` attribute shipped; it proves nothing at all about whether a class name matches a rule. ⚠️ Gradients on borders and accents, never on text (the pride rebrand's own ruling): --accent #ff8c00 was chosen by MEASURING contrast (~8.2:1 on --bg) and it is the only stop that clears AA for text. Clipping a gradient to glyphs anywhere in this block would undo that measurement, and a test scans this block for exactly that declaration. */ /* The panes need far more width than the 34rem single-column screens, and they need to fill the height rather than sit vertically centred by #app's `align-items: center`. `align-self` is the one-child override for the latter — #app itself is shared with every other screen. */ .vault-screen-panes { max-width: 78rem; align-self: stretch; } .vault-panes { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1.35fr) minmax(0, 1.65fr); gap: 1rem; align-items: start; } .vault-pane { min-width: 0; border: 1px solid var(--border); border-radius: 0.5rem; background: #121418; padding: 0.9rem; } .vault-pane-sidebar { display: flex; flex-direction: column; gap: 0.7rem; } .vault-pane-list { display: flex; flex-direction: column; gap: 0.7rem; } /* The detail pane is the slide-over's stand-in: it sits beside the list rather than replacing it, which is the whole point of §1.1's three panes. A top accent edge marks it as the active surface without colouring any text. */ .vault-pane-detail { border-top: 3px solid var(--accent); } .vault-pane-detail-empty { margin: 0; color: var(--fg-dim); font-size: 0.9rem; } .sidebar-new { width: 100%; } .sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; } .sidebar-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem; border: 1px solid transparent; border-radius: 0.35rem; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; } .sidebar-row:hover, .sidebar-row:focus-visible { border-color: var(--accent); outline: none; } /* Selected state carries BOTH a background and a left accent edge — colour alone is not a sufficient signal (WCAG 1.4.1), and the edge is what still reads at the depth clamp. */ .sidebar-row-selected { background: #1d2026; border-left: 3px solid var(--accent); font-weight: 600; } .sidebar-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-row-count { flex: none; color: var(--fg-dim); font-size: 0.8rem; font-variant-numeric: tabular-nums; } /* ⛔ ONE RULE PER DEPTH, MATCHED EXACTLY — same mechanism (and same reason) as the `.folder-row[data-depth]` ladder above: ui/vault.js::folderIndentLevel clamps to 6, and an unmatched attribute means NO indent, which makes a deep folder read as a top-level one. */ .sidebar-row[data-depth="1"] { padding-left: 1.1rem; } .sidebar-row[data-depth="2"] { padding-left: 1.8rem; } .sidebar-row[data-depth="3"] { padding-left: 2.5rem; } .sidebar-row[data-depth="4"] { padding-left: 3.2rem; } .sidebar-row[data-depth="5"] { padding-left: 3.9rem; } .sidebar-row[data-depth="6"] { padding-left: 4.6rem; } .sidebar-manage { align-self: flex-start; } .list-toolbar { display: flex; flex-direction: column; gap: 0.5rem; } .list-toolbar-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .list-toolbar-sort { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: 0.4rem; border: 1px solid var(--border); background: #16181c; color: var(--fg); font: inherit; } .list-toolbar-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .list-toolbar-view { display: inline-flex; border: 1px solid var(--border); border-radius: 0.4rem; overflow: hidden; } .list-toolbar-view-button { padding: 0.45rem 0.7rem; border: none; background: none; color: var(--fg-dim); font: inherit; cursor: pointer; } /* The pressed view button gets a fill AND a weight change — again, never colour alone. */ .list-toolbar-view-button-on { background: var(--accent); color: #101114; font-weight: 600; } .list-toolbar-summary { margin: 0; color: var(--fg-dim); font-size: 0.8rem; } /* ── the rows ───────────────────────────────────────────────────────────────────────── Two lines (title + login) and a right-aligned star, matching §1.1's record list. The row and the star are SIBLINGS, never nested — a button inside a button is invalid and browsers resolve the click unpredictably. */ .item-row { display: flex; align-items: stretch; gap: 0.25rem; border: 1px solid var(--border); border-radius: 0.4rem; background: #16181c; overflow: hidden; } .item-row:hover, .item-row:focus-within { border-color: var(--accent); } .item-row-selected { border-color: var(--accent); background: #1d2026; } .item-row-disabled { display: block; padding: 0.7rem 0.9rem; border: 1px dashed var(--border); border-radius: 0.4rem; color: var(--fg-dim); } .item-row-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem; border: none; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; } .item-row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The subtitle is what makes forty near-identical bank entries distinguishable (design §1.1). */ .item-row-subtitle { color: var(--fg-dim); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-row-star { flex: none; padding: 0 0.7rem; border: none; background: none; color: var(--fg-dim); font-size: 1.05rem; line-height: 1; cursor: pointer; } .item-row-star-on { color: var(--accent); } .item-row-star[disabled] { opacity: 0.4; cursor: default; } /* ── list vs grid ───────────────────────────────────────────────────────────────────── `.item-list` (above) already supplies the shared list reset; these two are the actual difference, and a test asserts both class names have a rule — a grid mode that silently rendered as a list would be a feature that looks present and does nothing. */ .item-list-view-list { display: flex; flex-direction: column; gap: 0.4rem; } .item-list-view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem; } .item-list-view-grid .item-row { height: 100%; } /* ── detail pane head ─────────────────────────────────────────────────────────────── */ .detail-body { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; } .detail-head { display: flex; align-items: baseline; gap: 0.6rem; } .detail-title { flex: 1; min-width: 0; margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; } .detail-star { flex: none; white-space: nowrap; } .detail-star-on { color: var(--accent); } .detail-close { flex: none; } /* ── Launch ───────────────────────────────────────────────────────────────────────── */ .launch-row { margin: 0; overflow-wrap: anywhere; } .launch-link { color: var(--accent); } .launch-row-refused { color: var(--fg-dim); } /* The raw value is still shown — the user has to be able to see what is in their own entry in order to fix it — but never as a link, and visibly quoted so it cannot be mistaken for one. */ .launch-raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; } .launch-refusal { color: var(--danger); } /* ── Password Zoom ──────────────────────────────────────────────────────────────────── Large, monospace, character-distinct, and grouped in fours. Every kind zoomCharKind() can emit has a rule here, asserted by test: a kind with no rule renders in the body colour, which silently defeats the entire point. */ .pw-zoom { padding: 0.8rem; border: 1px solid var(--accent); border-radius: 0.5rem; background: #0b0c0f; } .pw-zoom-groups { display: flex; flex-wrap: wrap; gap: 0.9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2rem; line-height: 1.3; letter-spacing: 0.06em; } .pw-zoom-group { display: inline-flex; } .pw-zoom-char { padding: 0 0.05em; } .pw-zoom-char-lower { color: var(--fg); } .pw-zoom-char-upper { color: #ffed00; } .pw-zoom-char-digit { color: var(--accent); } .pw-zoom-char-symbol { color: #7fc4ff; } /* A space is rendered as U+2423 OPEN BOX by ui/vault.js — dimmed here so it reads as a marker rather than as a character that is part of the password. */ .pw-zoom-char-space { color: var(--fg-dim); } .pw-zoom-legend { margin: 0.6rem 0 0; color: var(--fg-dim); font-size: 0.8rem; } /* ⛔ THE PANES MUST STACK, not squeeze. Three columns inside a phone viewport is three slivers. Below 62rem the grid collapses to one column and the panes read top-to-bottom: sidebar, list, detail — which is also the order someone navigates them in. */ @media (max-width: 62rem) { .vault-screen-panes { max-width: 42rem; } .vault-panes { grid-template-columns: minmax(0, 1fr); } .pw-zoom-groups { font-size: 1.5rem; } } /* ── P7: the captured-memory review queue and the warm-request prompt ───────────────────── * * ⛔ STYLED WITH THE FEATURE, NOT AFTER IT. Scoping app.css away from a feature is a recorded * process error on this project (docs/catkeys.md §0-AUG25): the schema revision's folder bar, * custom-field editor and TOTP readout all shipped rendering with browser defaults because the * markup landed without rules. Every class ui/memories.js emits has a rule below, and * memories-ui.test.mjs asserts that pairing — a class with no rule renders as nothing while * every other test stays green. */ .memories { display: flex; flex-direction: column; gap: 0.75rem; } /* The bulk bar sits ABOVE the list and owns the only primary control on the screen: one action for the whole queue, however long it is (§6.5 — N confirmations is a queue nobody uses). */ .memories-bulk { display: flex; gap: 0.5rem; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .memories-empty { color: var(--fg-dim); font-style: italic; } .memory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .memory-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } /* An unopenable memory STAYS VISIBLE and says so — the staging row is the only copy, so a row that quietly vanished would take the memory with it. */ .memory-row-error { color: var(--danger); } .memory-row-error .memory-text { font-style: italic; } .memory-text { white-space: pre-wrap; overflow-wrap: anywhere; } .memory-meta { color: var(--fg-dim); font-size: 0.85em; white-space: nowrap; } /* An append lands INSIDE an existing document, unlike every other capture in this queue, and "Approve all" is a bulk control — so the destination is styled to be noticed on the row, not to blend into the timestamp beside it. */ .memory-appends { color: var(--accent); font-size: 0.85em; overflow-wrap: anywhere; } /* A capture the owner has not asked to see. It reads as a placeholder rather than as text — dimmed, italic, and stating only its size — so a glance at the queue never mistakes it for the memory itself. The plaintext is ABSENT from the DOM here, not merely unstyled. */ .memory-hidden { color: var(--fg-dim); font-style: italic; } .memory-row-actions { display: flex; gap: 0.4rem; } /* The warm-request prompt. Deliberately quiet: it is reachable by anyone holding a stolen connector credential, so it must read as a question, not an alert demanding to be cleared. */ .warm-request { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; } .warm-request-alias { margin: 0; font-weight: 600; overflow-wrap: anywhere; } .warm-request-meta { margin: 0; color: var(--fg-dim); font-size: 0.85em; } .warm-request-actions { display: flex; gap: 0.5rem; margin-top: 0.35rem; } .window-status { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; padding: 0.5rem 0; border-bottom: 1px solid var(--border); } .window-mode { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .window-expiry { color: var(--fg-dim); font-size: 0.9em; } .window-closed { color: var(--fg-dim); } /* ── Connectors (the MCP surface) ──────────────────────────────────────────────────────── */ /* ⛔ THE ONCE-SHOWN SECRET. Deliberately loud: this is the only moment the value exists anywhere the owner can reach, and the panel is the only warning they get. */ .connector-secret { border: 1px solid var(--warn, #b8860b); border-radius: 8px; padding: 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; } .connector-secret-label { font-weight: 600; } .connector-secret-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; user-select: all; } .connector-setup-h { font-size: 14px; font-weight: 600; margin: 8px 0 0; } .connector-snippet { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .connector-cmd { margin: 0; padding: 8px; border-radius: 6px; background: rgba(127, 127, 127, 0.12); font-size: 12px; white-space: pre-wrap; word-break: break-all; user-select: all; max-width: 100%; overflow-x: auto; } /* The URL form hands the credential to anything that sees the address bar — the copy says so, and this makes it read as a warning rather than a footnote. */ .form-warn { font-size: 13px; color: var(--warn, #b8860b); margin: 4px 0 0; } .connector-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .connector-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .connector-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .connector-meta { font-size: 12px; opacity: 0.7; } .connector-form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-width: 32rem; } /* ── Document upload ───────────────────────────────────────────────────────────────────── */ .upload-panel { border: 1px solid var(--line, rgba(127, 127, 127, 0.35)); border-radius: 8px; padding: 12px; margin: 12px 0 20px; display: flex; flex-direction: column; gap: 8px; max-width: 34rem; } .upload-h { font-size: 15px; font-weight: 600; margin: 0; } .detail-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } /* The sidebar's document picker. The real is hidden and driven by its