. :has() picks it out without relying on the
inline `onclick` or `title` attribute. */
.ss-topnav-right > button:has(> i.fa-wrench) {
display: none !important;
}
.ss-nav-wrap:has(.ss-topnav-section[data-sec="overview"].active) .ss-subnav,
.ss-nav-wrap:has(.ss-topnav-section[data-sec="devices"].active) .ss-subnav,
.ss-nav-wrap:has(.ss-topnav-section[data-sec="community"].active) .ss-subnav {
display: none !important;
}
/* Restyle the "Active" status pill as a dot + word. The pill div in
the HTML contains a .ss-pulse dot and a span — re-style both so the
composite reads as a green dot followed by sentence-case "Active"
in fg-secondary, no pill chrome.
The legacy .ss-pulse comes from blackhole.css with its own sizing /
animation; we hard-reset to a 6px static green disc. */
.ss-status-pill {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
font-family: var(--font-ui) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--fg-secondary) !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.ss-status-pill .ss-pulse {
width: 6px !important;
height: 6px !important;
background: var(--status-success-fg) !important;
border-radius: 50% !important;
animation: none !important;
box-shadow: none !important;
}
/* Override the earlier .ok / .warn / .err color shifts — the dot
carries the state now, not the word. */
.ss-status-pill.ok,
.ss-status-pill.warn,
.ss-status-pill.err { color: var(--fg-secondary) !important; }
.ss-status-pill.warn .ss-pulse { background: var(--status-warning-fg) !important; }
.ss-status-pill.err .ss-pulse { background: var(--status-danger-fg) !important; }
/* ── #7 Top Devices panel ────────────────────────────────────────────
The renderDeviceList helper in app.js:798 emits a 3-cell row:
That helper does NOT render the model/sparkline/timestamp the brief
describes — those only exist on the richer renderDeviceListWithPrivacy
helper used by the Devices section. Adding them here would require a
JS edit in app.js (out of scope, flagged for follow-up). What CSS can
do right now: hide the icon, collapse the grid to name + count, and
restyle to spec. Scoped to #top-devices-list so the Devices section
row layout (which uses .device-row with the same class) is untouched. */
#top-devices-list .device-row {
grid-template-columns: 1fr auto;
gap: var(--space-4);
padding: 16px 0; /* 16px vertical, 0 horizontal */
align-items: center;
}
#top-devices-list .device-ico { display: none !important; }
#top-devices-list .device-name {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 600;
color: var(--fg-primary);
}
#top-devices-list .device-count {
font-family: var(--font-display);
font-weight: 600;
font-size: 24px;
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
text-align: right;
color: var(--fg-primary);
}
#top-devices-list .device-row:hover { background: transparent; }
/* ── #9 Notice panel — drop the cream-yellow tint ────────────────────
The "New device detected" / block-suggestion / breakage notices all
render as via app.js:598, :766, :1070.
Pass-1 keep-overrides.css:389 painted them with status-warning-bg
(cream-yellow). Pass-2 wants the notice to dissolve into the page:
bg-canvas with 1px top/bottom hairlines and no rounded card chrome.
Orange info icon and (when present) "INFO" badge get hidden so the
notice reads as prose with quiet borders. */
.alert-card.warn {
background: var(--bg-canvas);
border: 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
padding: var(--space-5);
}
.alert-card.warn .alert-ico,
.alert-card.warn .alert-ico.warn { display: none; }
.alert-card.warn .alert-badge,
.alert-card.warn .alert-badge.warn { display: none; }
/* The block-suggestion notice ships with "Allow this" / "Keep it
blocked" buttons (renderSuggestions in app.js:604-605) — NOT the
"Confirm" / "Not mine" pair the brief describes. Renaming is a copy
change in JS so we don't touch it here; flagged for HTML follow-up. */
/* ── #12 Stray "library size" number near trust strip ────────────────
#stat-library is intentionally hidden in HTML (index.html:502 sets
style="display:none") because the library size isn't part of the v1
headline composition. But app.js's setText helper (app.js:1541)
unhides any element when it writes content into it:
if (el.style.display === 'none' && val) el.style.display = '';
So the call at app.js:336 — setText('stat-library', ...) — flips the
inline display back to "" and the raw "600,000"-ish number renders
bare near the trust footer with no label or styling.
Forcing display:none via CSS beats the cleared-empty inline style.
Proper fix is a JS change (don't unhide intentionally-hidden els, or
stop writing to this id), but this is a CSS-only pass — flagged. */
#stat-library {
display: none !important;
}
/* ── #11 Title-case sweep ────────────────────────────────────────────
Bump every .kicker to 0.1em letter-spacing per spec (was 0.08em via
keep-design.css:262). All section headings on the overview use
so a single override covers the sweep — there
are no mixed-case Title-Case strings outside the kicker pattern to
worry about. */
.kicker, .label-md {
letter-spacing: 0.1em;
}
/* ── Rebuild v2 #3c — Band 5 (Notice) ────────────────────────────────
Slim full-width notice band, layered on top of .keep-notice (which
already gives bg-canvas + bottom hairline). Adds the top hairline,
tightens horizontal padding to 28px per spec, and lays out a kicker
row above a flex space-between row holding the body sentence and the
Confirm / Not-mine button cluster. Show/hide is toggled by
renderNoticeBand() in app.js — section starts display:none and only
renders when GET /api/alerts has an un-acknowledged alert. */
.keep-band-notice {
border-top: 1px solid var(--border-subtle);
padding: var(--space-5) 28px;
}
.keep-band-notice .keep-block-head {
margin-bottom: 10px;
}
.keep-band-notice-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.keep-band-notice-body {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: var(--fg-primary);
}
.keep-band-notice-actions {
display: inline-flex;
gap: 10px;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════════
Devices page (list view) — second pass
All styles namespaced under .kd-*. Tokens are canonical (no
aliases). Font weights stop at 600 because keep-design.css only
loads Open Sans 400/500/600 — anything heavier renders as a
browser fallback that doesn't match the loaded face.
══════════════════════════════════════════════════════════════════════ */
/* Devices used to live in #sec-devices on visual-updates-v2; in this
branch the kd-devices block is inlined on the Overview. The full-
bleed canvas reset moved off ss-section and onto kd-devices itself
so the inline location still reads as editorial. The huge horizontal
padding (56px) is dropped here — Overview's container already
provides the outer spacing. */
.kd-devices {
background: transparent;
color: var(--fg-primary);
font-family: var(--font-ui);
padding: var(--space-4) 0 var(--space-6);
margin: 0 auto;
}
/* ── Detail stub (route target for /devices/:id) ────────────────────
Real detail page is a separate brief; this is just enough UI to
confirm "you clicked into something" without faking content. */
.kd-detail-stub {
padding: 18px 0 28px;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 28px;
}
.kd-detail-stub[hidden] { display: none; }
.kd-back-link {
font-size: 12px;
font-weight: 600;
color: var(--fg-secondary);
text-decoration: none;
cursor: pointer;
display: inline-block;
margin-bottom: 12px;
}
.kd-back-link:hover { color: var(--fg-primary); }
.kd-detail-stub-body {
margin: 0;
font-size: 15px;
color: var(--fg-secondary);
font-weight: 500;
}
.kd-detail-stub-body #kd-detail-stub-id {
color: var(--fg-primary);
font-weight: 600;
}
/* ── New-device surface ──────────────────────────────────────────── */
.kd-new-device {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-5) var(--space-6);
margin-bottom: 28px;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--signal-default);
border-radius: 10px;
}
.kd-new-device[hidden] { display: none; }
.kd-new-device-body {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--fg-primary);
font-weight: 500;
}
.kd-new-device-body .kd-nd-type { font-weight: 600; }
.kd-nd-seen { color: var(--fg-secondary); font-size: 12px; }
.kd-new-device-actions {
display: inline-flex;
gap: 8px;
flex-shrink: 0;
}
/* ── Time-window control ─────────────────────────────────────────── */
.kd-window-row {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: var(--space-5);
}
.kd-window-label { color: var(--fg-tertiary); margin: 0; }
.kd-window {
display: inline-flex;
background: transparent;
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
padding: 3px;
}
.kd-window-pill {
appearance: none;
border: 0;
background: transparent;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--fg-secondary);
padding: 6px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
line-height: 1;
transition: color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard);
}
.kd-window-pill:hover { color: var(--fg-primary); }
.kd-window-pill.active {
background: var(--fg-primary);
color: #fff;
}
.kd-window-pill:focus-visible {
outline: 2px solid var(--signal-focus);
outline-offset: 2px;
}
/* ── Summary lines ───────────────────────────────────────────────── */
.kd-summary { margin-bottom: 8px; }
.kd-sum-line {
margin: 0 0 6px;
font-family: var(--font-ui);
font-size: 22px;
line-height: 1.45;
letter-spacing: -0.015em;
font-weight: 500;
color: var(--fg-primary);
text-wrap: pretty;
}
.kd-sum-line:last-child { margin-bottom: 0; }
/* Numbers use weight 600 (the heaviest loaded weight). Size + color
carry the data emphasis the brief asks for without reaching for
an unloaded 700/800. */
.kd-sum-line strong {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--fg-primary);
}
.kd-mid-dot {
color: var(--fg-tertiary);
margin: 0 8px;
font-weight: 400;
}
/* ── As-of timestamp ─────────────────────────────────────────────── */
.kd-asof {
font-size: 11px;
color: var(--fg-tertiary);
margin-top: 6px;
margin-bottom: var(--space-8);
}
/* ── Error surface ───────────────────────────────────────────────── */
.kd-error {
margin-bottom: var(--space-8);
padding: var(--space-3) var(--space-4);
font-size: 13px;
color: var(--fg-primary);
}
.kd-error[hidden] { display: none; }
.kd-link {
color: var(--brand-sky-500);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
cursor: pointer;
}
.kd-link:hover { color: var(--brand-sky-700); }
/* ── Controls bar ────────────────────────────────────────────────── */
.kd-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: 14px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-canvas);
}
.kd-controls-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
}
.kd-controls-right {
display: flex;
align-items: center;
gap: var(--space-5);
flex-shrink: 0;
}
.kd-search {
appearance: none;
width: 280px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
line-height: 1;
color: var(--fg-primary);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
padding: 9px 14px;
}
.kd-search::placeholder { color: var(--fg-tertiary); font-weight: 400; }
.kd-search:focus {
outline: none;
border-color: var(--fg-primary);
box-shadow: 0 0 0 3px var(--border-subtle);
}
.kd-chips {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kd-chip {
appearance: none;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
line-height: 1;
color: var(--fg-secondary);
background: transparent;
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
padding: 6px 12px;
cursor: pointer;
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.kd-chip:hover { color: var(--fg-primary); border-color: var(--border-strong); }
.kd-chip.active {
color: #fff;
background: var(--fg-primary);
border-color: var(--fg-primary);
}
.kd-sort {
display: inline-flex;
align-items: center;
gap: 14px;
}
.kd-sort-tab {
appearance: none;
border: 0;
background: transparent;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--fg-tertiary);
padding: 4px 0;
border-bottom: 1.5px solid transparent;
cursor: pointer;
line-height: 1.2;
transition: color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.kd-sort-tab:hover { color: var(--fg-primary); }
.kd-sort-tab.active {
color: var(--fg-primary);
border-bottom-color: var(--fg-primary);
}
.kd-counter {
font-size: 11px;
color: var(--fg-tertiary);
font-variant-numeric: tabular-nums;
}
/* ── Row anatomy ─────────────────────────────────────────────────── */
.kd-list { background: var(--bg-canvas); }
.kd-row {
position: relative;
padding: 18px 0;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-standard);
}
.kd-row:last-child { border-bottom: 0; }
.kd-row:focus-visible {
outline: 2px solid var(--signal-focus);
outline-offset: -2px;
border-radius: var(--radius-sm);
}
@media (hover: hover) {
.kd-row:hover { background: var(--bg-surface); }
/* Reveal the dotted underline on the label only while the row is
hovered — quiet at rest, discoverable on intent. Without this
cue, no one finds inline rename. */
.kd-row:hover .kd-id-label {
text-decoration: underline dotted var(--fg-tertiary);
text-underline-offset: 3px;
cursor: text;
}
}
.kd-row-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}
.kd-row-text { min-width: 0; flex: 1; }
.kd-row-identity {
font-size: 15px;
line-height: 1.35;
color: var(--fg-primary);
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.kd-id-label { font-weight: 600; }
.kd-id-meta { font-weight: 500; color: var(--fg-secondary); }
.kd-id-sep {
color: var(--fg-tertiary);
font-weight: 400;
margin: 0 10px;
}
/* Loud-row dot — prefixed to the identity line on the page's single
max-blocked row (tie-broken by most recent lastSeen — see JS). */
.kd-row--loud .kd-id-label::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--signal-default);
margin-right: 10px;
vertical-align: middle;
position: relative;
top: -2px;
}
.kd-row-activity {
margin-top: 4px;
font-size: 13px;
line-height: 1.45;
color: var(--fg-secondary);
font-weight: 500;
}
.kd-row-activity strong {
color: var(--fg-primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.kd-row-activity .kd-mid-dot { margin: 0 8px; font-weight: 400; }
/* ── Sparkline ───────────────────────────────────────────────────── */
.kd-spark {
width: 92px;
height: 26px;
flex-shrink: 0;
/* No padding / background — the SVG stroke is the entire visual
and inherits its color via currentColor below. Tertiary grey is
deliberate: orange is reserved for the loud-row dot and
interactivity. A coloured sparkline would trip the
"one signal color, one meaning" rule. */
color: var(--fg-tertiary);
}
.kd-spark svg { display: block; }
.kd-spark svg polyline,
.kd-spark svg line {
stroke: currentColor;
fill: none;
}
/* Quiet state: a single hairline along the baseline — neither
alarming nor decorative. Brief: "renders a flat baseline or
nothing — never a misleading spike." */
.kd-spark--flat svg line { stroke-width: 1; }
/* ── Inline rename input ─────────────────────────────────────────── */
.kd-id-input {
appearance: none;
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.35;
font-weight: 600;
color: var(--fg-primary);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
padding: 1px 6px;
margin: -2px -6px;
min-width: 160px;
max-width: 320px;
}
.kd-id-input:focus {
outline: none;
border-color: var(--fg-primary);
box-shadow: 0 0 0 3px var(--border-subtle);
}
/* ── Skeletons ───────────────────────────────────────────────────── */
.kd-row--skel { padding: 22px 0; cursor: default; }
.kd-skel {
height: 12px;
background: var(--bg-sunken);
border-radius: var(--radius-sm);
animation: kd-skel 1.6s ease-in-out infinite;
}
.kd-skel--w1 { width: 36%; margin-bottom: 8px; }
.kd-skel--w2 { width: 58%; height: 10px; }
.kd-skel--spark { width: 92px; height: 14px; flex-shrink: 0; }
@keyframes kd-skel {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.kd-summary.kd-loading .kd-sum-line {
color: transparent;
background: var(--bg-sunken);
border-radius: var(--radius-sm);
height: 28px;
margin-bottom: 8px;
animation: kd-skel 1.6s ease-in-out infinite;
}
.kd-summary.kd-loading .kd-sum-line strong,
.kd-summary.kd-loading .kd-sum-line span { visibility: hidden; }
/* ── Empty + search-empty states ─────────────────────────────────── */
.kd-empty {
padding: 80px 0;
max-width: 720px;
text-align: left;
}
.kd-empty-title {
font-family: var(--font-ui);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
color: var(--fg-primary);
margin: 0 0 12px;
}
.kd-empty-body {
font-size: 15px;
line-height: 1.5;
color: var(--fg-secondary);
margin: 0 0 28px;
}
.kd-empty-body strong {
color: var(--fg-primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.kd-search-empty {
padding: 40px 0;
font-size: 14px;
color: var(--fg-secondary);
}
/* ── Page-local buttons ──────────────────────────────────────────── */
.kd-btn {
appearance: none;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
line-height: 1;
padding: 9px 16px;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background-color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.kd-btn--ink {
background: var(--fg-primary);
color: #fff;
border-color: var(--fg-primary);
}
.kd-btn--ink:hover { background: #000; }
.kd-btn--ghost {
background: transparent;
color: var(--fg-primary);
border-color: var(--border-default);
}
.kd-btn--ghost:hover { border-color: var(--border-strong); background: var(--bg-sunken); }
/* ── Undo toast ──────────────────────────────────────────────────── */
.kd-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--fg-primary);
color: #fff;
border-radius: var(--radius-pill);
padding: 10px 18px;
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow-lg);
z-index: 9999;
animation: kd-toast-in var(--duration-base) var(--ease-emphasized);
}
.kd-toast[hidden] { display: none; }
.kd-toast-action {
appearance: none;
border: 0;
background: transparent;
color: #fff;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
padding: 2px 4px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
.kd-toast-action:hover { opacity: 0.85; }
@keyframes kd-toast-in {
from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ── Mobile reflow ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
.kd-devices { padding: var(--space-6) 28px 64px; }
.kd-search { width: 220px; }
}
@media (max-width: 768px) {
.kd-devices { padding: var(--space-5) 20px 56px; }
.kd-sum-line { font-size: 17px; line-height: 1.4; }
.kd-asof { margin-bottom: var(--space-6); }
.kd-window-pill { padding: 5px 11px; font-size: 11px; }
.kd-window-label { font-size: 10px; }
.kd-new-device {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
}
.kd-new-device-actions { width: 100%; }
.kd-new-device-actions .kd-btn { flex: 1; justify-content: center; }
.kd-controls {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.kd-controls-left {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.kd-controls-right { justify-content: space-between; }
.kd-search { width: 100%; }
/* Filter chips become a horizontally-scrolling track on mobile. */
.kd-chips {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 2px;
}
.kd-chips::-webkit-scrollbar { display: none; }
.kd-chip { flex-shrink: 0; }
.kd-row { padding: 16px 0; }
.kd-row-identity { font-size: 14px; }
.kd-row-activity { font-size: 12px; }
/* Sparkline shrinks; the numeric counts on line 2 remain the
canonical signal. No hover affordance on touch — the dotted
underline cue only makes sense with a cursor. Rename happens on
the detail page (separate brief). */
.kd-spark { width: 64px; height: 22px; }
}
@media (max-width: 480px) {
.kd-devices { padding: var(--space-5) 16px 48px; }
.kd-sum-line { font-size: 16px; }
.kd-spark { display: none; }
}
/* ═════════════════════════════════════════════════════════════════════
PROTECTION → ACTIVITY sub-page
Domain-axis live activity. Hero density for the lede + top-blocked;
reference density for the feed below. One signal color (orange) =
interactivity. No severity colors. JetBrains Mono restricted to
domain + count cells.
═════════════════════════════════════════════════════════════════════ */
.kp-activity {
background: var(--bg-canvas);
color: var(--fg-primary);
font-family: var(--font-ui);
padding: var(--space-8) 56px 80px;
max-width: 1080px;
margin: 0 auto;
}
/* ── Window control + lede ───────────────────────────────────────── */
.kp-activity-head {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-bottom: var(--space-10);
}
/* .kp-window and .kp-window-pill are aliased to the Devices style
(.kd-window / .kd-window-pill) so Protection (Activity), Community,
and Devices all render the same window control — outlined pill row,
inactive pills are quiet --fg-secondary, the active pill is filled
ink-black with white text. .is-active mirrors .active so either JS
hook (Activity/Community toggle .is-active, Devices toggles .active)
wins regardless of cascade order. */
.kp-window {
display: inline-flex;
background: transparent;
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
padding: 3px;
align-self: flex-start;
}
.kp-window-pill {
appearance: none;
border: 0;
background: transparent;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
color: var(--fg-secondary);
padding: 6px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
line-height: 1;
transition: color 120ms ease, background-color 120ms ease;
}
.kp-window-pill:hover { color: var(--fg-primary); }
.kp-window-pill.is-active,
.kp-window-pill.active {
background: var(--fg-primary);
color: #fff;
box-shadow: none;
}
.kp-lede {
font-family: var(--font-display);
font-weight: 400;
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--fg-primary);
margin: 0;
max-width: 720px;
}
.kp-lede-line { display: inline; }
.kp-lede-num {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.kp-lede-asof {
display: block;
margin-top: var(--space-3);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
color: var(--fg-tertiary);
}
.kp-dim { opacity: 0.45; transition: opacity 180ms ease; }
.kp-error {
font-family: var(--font-ui);
font-size: 13px;
color: var(--fg-secondary);
}
.kp-error-retry { color: var(--signal-default); text-decoration: underline; }
/* ── Sections (top-blocked / feed) ───────────────────────────────── */
.kp-block { margin-bottom: var(--space-12); }
.kp-block:last-of-type { margin-bottom: var(--space-8); }
.kp-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
}
.kp-kicker {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-tertiary);
}
/* ── Top blocked list ────────────────────────────────────────────── */
.kp-topblocked {
list-style: none;
margin: 0;
padding: 0;
background: var(--bg-surface);
border-radius: var(--radius-lg);
border: 1px solid color-mix(in oklab, var(--fg-tertiary) 15%, transparent);
overflow: hidden;
}
.kp-tb-row {
display: grid;
grid-template-columns: 14px minmax(0,1fr) 88px 180px 110px auto;
align-items: center;
gap: var(--space-4);
padding: 14px 20px;
border-top: 1px solid color-mix(in oklab, var(--fg-tertiary) 10%, transparent);
position: relative;
min-height: 52px;
}
.kp-tb-row:first-child { border-top: 0; }
.kp-tb-row:hover { background: var(--bg-sunken); }
.kp-tb-empty {
padding: 28px 20px;
text-align: center;
color: var(--fg-tertiary);
font-size: 13px;
}
.kp-tb-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--signal-default);
display: inline-block;
}
.kp-tb-dot--empty { background: transparent; }
.kp-tb-domain {
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kp-tb-count {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--fg-primary);
text-align: right;
}
.kp-tb-cat {
font-size: 12px;
color: var(--fg-secondary);
}
.kp-tb-dev {
font-size: 12px;
color: var(--fg-tertiary);
text-align: right;
font-variant-numeric: tabular-nums;
}
.kp-topblocked-foot {
margin-top: var(--space-3);
display: flex;
justify-content: flex-end;
}
.kp-textbtn {
appearance: none;
background: transparent;
border: 0;
font: 500 12px/1 var(--font-ui);
letter-spacing: 0.02em;
color: var(--signal-default);
cursor: pointer;
padding: 4px 6px;
border-radius: var(--radius-sm);
}
.kp-textbtn:hover { background: color-mix(in oklab, var(--signal-default) 8%, transparent); }
.kp-textbtn[hidden] { display: none; }
/* ── Row actions (Allow / Block) ─────────────────────────────────── */
.kp-actions {
display: inline-flex;
align-items: center;
gap: var(--space-2);
opacity: 0;
transform: translateX(2px);
transition: opacity 140ms ease, transform 140ms ease;
}
.kp-tb-row:hover .kp-actions,
.kp-feed-row:hover .kp-actions,
.kp-actions:focus-within {
opacity: 1;
transform: translateX(0);
}
.kp-action {
appearance: none;
background: transparent;
border: 1px solid color-mix(in oklab, var(--signal-default) 50%, transparent);
color: var(--signal-default);
font: 500 11px/1 var(--font-ui);
letter-spacing: 0.02em;
padding: 5px 10px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.kp-action:hover {
background: var(--signal-default);
color: var(--bg-surface);
}
.kp-action:disabled { opacity: 0.5; cursor: default; }
.kp-ruled {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--fg-tertiary);
}
/* ── Live feed ───────────────────────────────────────────────────── */
.kp-block--feed { margin-bottom: var(--space-8); }
.kp-feed-head { align-items: center; }
.kp-feed-kicker {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.kp-live-dot {
width: 6px; height: 6px;
background: var(--signal-default);
border-radius: 50%;
display: inline-block;
animation: kp-pulse 2.4s ease-in-out infinite;
}
.kp-feed-label { color: var(--fg-tertiary); }
.kp-feed-controls {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
.kp-segctl {
display: inline-flex;
gap: 2px;
background: var(--bg-sunken);
padding: 3px;
border-radius: var(--radius-pill);
}
.kp-seg-pill {
appearance: none;
border: 0;
background: transparent;
font: 500 11px/1 var(--font-ui);
letter-spacing: 0.02em;
color: var(--fg-tertiary);
padding: 6px 11px;
border-radius: var(--radius-pill);
cursor: pointer;
}
.kp-seg-pill:hover { color: var(--fg-secondary); }
.kp-seg-pill.is-active {
background: var(--bg-surface);
color: var(--fg-primary);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kp-pausebtn.is-paused {
color: var(--fg-primary);
background: color-mix(in oklab, var(--signal-default) 12%, transparent);
}
.kp-feed {
background: var(--bg-surface);
border-radius: var(--radius-lg);
border: 1px solid color-mix(in oklab, var(--fg-tertiary) 15%, transparent);
overflow: hidden;
}
.kp-feed-empty {
padding: 36px 20px;
text-align: center;
color: var(--fg-tertiary);
font-size: 13px;
}
.kp-feed-row {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: var(--space-2) var(--space-4);
padding: 9px 18px;
border-top: 1px solid color-mix(in oklab, var(--fg-tertiary) 8%, transparent);
}
.kp-feed-row:first-child { border-top: 0; }
.kp-feed-row:hover { background: var(--bg-sunken); }
.kp-feed-main {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-4);
min-width: 0;
grid-column: 1 / -1;
}
.kp-feed-domain {
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.kp-feed-time {
font-family: var(--font-ui);
font-size: 11px;
color: var(--fg-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.kp-feed-meta {
display: flex;
align-items: center;
gap: var(--space-3);
grid-column: 1 / -1;
min-height: 18px;
}
.kp-feed-meta-text {
font-size: 12px;
color: var(--fg-secondary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.kp-feed-count {
font-family: var(--font-mono);
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--fg-tertiary);
padding: 1px 6px;
border-radius: var(--radius-pill);
background: var(--bg-sunken);
}
/* Blocked vs allowed: differentiated by weight + position, never color.
Blocked rows carry slightly heavier domain weight; allowed rows sit
regular. Time stays right-aligned for both — domain remains the spine. */
.kp-feed-row--blocked .kp-feed-domain { font-weight: 500; }
.kp-feed-row--allowed .kp-feed-domain { font-weight: 400; color: var(--fg-secondary); }
.kp-feed-resume {
appearance: none;
display: block;
width: 100%;
margin-top: var(--space-3);
padding: 10px 14px;
background: color-mix(in oklab, var(--signal-default) 10%, var(--bg-surface));
border: 1px solid color-mix(in oklab, var(--signal-default) 30%, transparent);
border-radius: var(--radius-lg);
color: var(--signal-default);
font: 500 12px/1 var(--font-ui);
cursor: pointer;
}
.kp-feed-resume[hidden] { display: none; }
/* ── Trust footer ────────────────────────────────────────────────── */
.kp-trust {
margin: var(--space-8) 0 0;
font-size: 12px;
color: var(--fg-tertiary);
text-align: center;
}
/* ── Motion (Arrive + Bump + Pulse) ──────────────────────────────── */
@keyframes kp-arrive {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes kp-bump {
0% { background-color: color-mix(in oklab, var(--signal-default) 8%, transparent); }
100% { background-color: transparent; }
}
@keyframes kp-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.25); }
}
.kp-arrive { animation: kp-arrive 200ms cubic-bezier(0.2, 0, 0, 1) both; }
.kp-bump { animation: kp-bump 600ms ease-out both; }
/* ── Skeletons ───────────────────────────────────────────────────── */
.kp-skeleton {
display: inline-block;
background: linear-gradient(90deg,
color-mix(in oklab, var(--fg-tertiary) 10%, transparent) 0%,
color-mix(in oklab, var(--fg-tertiary) 20%, transparent) 50%,
color-mix(in oklab, var(--fg-tertiary) 10%, transparent) 100%);
background-size: 200% 100%;
height: 12px;
width: 60%;
border-radius: 3px;
animation: kp-shimmer 1.6s ease-in-out infinite;
}
.kp-skeleton--lede { height: 22px; width: 80%; }
.kp-skel-row .kp-skeleton { width: 70%; height: 14px; }
.kp-skel-row { padding: 14px 20px; }
@keyframes kp-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.kp-arrive, .kp-bump, .kp-live-dot, .kp-skeleton { animation: none; }
.kp-actions { transition: none; }
}
/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.kp-activity { padding: var(--space-6) 28px 64px; }
.kp-tb-row {
grid-template-columns: 14px minmax(0,1fr) 70px auto;
gap: var(--space-3);
}
.kp-tb-cat, .kp-tb-dev { display: none; }
.kp-lede { font-size: 24px; }
}
@media (max-width: 600px) {
.kp-activity { padding: var(--space-5) 16px 48px; }
.kp-lede { font-size: 21px; }
.kp-feed-controls { gap: var(--space-3); }
.kp-seg-pill { padding: 6px 9px; }
.kp-actions { opacity: 1; transform: none; } /* no hover on touch */
.kp-feed-row { padding: 8px 14px; }
.kp-tb-row { padding: 12px 14px; }
}
/* ═════════════════════════════════════════════════════════════════════
COMMUNITY page — top-level tab (sibling of Dashboard, Devices,
Protection). Two surfaces, nothing else: a Fraunces lead-time lede
and a real-detections list. Read-only. No severity colors, no scores,
no gauges; type is plain text. Reuses .kp-activity-head / .kp-window
/ .kp-kicker / .kp-block / .kp-skeleton / .kp-trust for chrome parity.
═════════════════════════════════════════════════════════════════════ */
.kc-community {
background: var(--bg-canvas);
color: var(--fg-primary);
font-family: var(--font-ui);
/* Padding + max-width match .kd-devices so Devices and Community
(the two no-subnav pages) align in both width and top spacing. */
padding: var(--space-8) 56px 80px;
max-width: 1280px;
margin: 0 auto;
}
/* The lede shares typographic role with .kp-lede; we redeclare instead
of relying on inheritance so the markup classes stay independent and
the page reads cleanly without Activity loaded. */
.kc-lede {
font-family: var(--font-display);
font-weight: 400;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--fg-primary);
margin: 0;
max-width: 760px;
}
.kc-lede-line { display: inline; }
.kc-lede-num {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.kc-lede-asof {
display: block;
margin-top: var(--space-3);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
color: var(--fg-tertiary);
}
/* "Learning" pill sits next to the kicker when the detections list is
empty. Neutral grey — never red, never orange, never severity. */
.kc-learning-pill {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--fg-tertiary);
background: var(--bg-sunken);
padding: 3px 9px;
border-radius: var(--radius-pill);
}
.kc-learning-pill[hidden] { display: none; }
/* Detections list. Domain mono; type, first-seen, reach in text only.
No icons in rows — specificity carries the meaning. */
.kc-detections {
list-style: none;
margin: 0;
padding: 0;
background: var(--bg-surface);
border-radius: var(--radius-lg);
border: 1px solid color-mix(in oklab, var(--fg-tertiary) 15%, transparent);
overflow: hidden;
}
.kc-row {
display: grid;
grid-template-columns: minmax(0,1fr) 88px 1fr auto;
align-items: center;
gap: var(--space-4);
padding: 14px 20px;
border-top: 1px solid color-mix(in oklab, var(--fg-tertiary) 10%, transparent);
min-height: 52px;
}
.kc-row:first-child { border-top: 0; }
.kc-row-domain {
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kc-row-type {
font-size: 12px;
color: var(--fg-secondary);
}
.kc-row-when {
font-size: 12px;
color: var(--fg-tertiary);
}
.kc-row-reach {
font-size: 12px;
color: var(--fg-tertiary);
font-variant-numeric: tabular-nums;
text-align: right;
}
.kc-empty {
padding: 28px 24px;
text-align: center;
color: var(--fg-tertiary);
font-size: 13px;
line-height: 1.55;
}
/* ── Mobile — Community ──────────────────────────────────────────── */
@media (max-width: 900px) {
.kc-community { padding: var(--space-6) 28px 64px; }
.kc-lede { font-size: 24px; }
.kc-row {
grid-template-columns: minmax(0,1fr) auto;
row-gap: var(--space-2);
}
.kc-row-domain { grid-column: 1 / 2; }
.kc-row-type { grid-column: 2 / 3; text-align: right; }
.kc-row-when { grid-column: 1 / 2; }
.kc-row-reach { grid-column: 2 / 3; }
}
@media (max-width: 600px) {
.kc-community { padding: var(--space-5) 16px 48px; }
.kc-lede { font-size: 21px; }
}
/* ═════════════════════════════════════════════════════════════════════
User dropdown — simplified per brief. Email-only header, four items
(Manual setup · Setup wizard · Settings · Sign out). Sentence case,
canonical tokens, weights capped at 600.
═════════════════════════════════════════════════════════════════════ */
.ss-user-dropdown .ss-dd-header {
padding: 14px 16px 10px;
border-bottom: 1px solid var(--border-subtle);
}
.ss-user-dropdown .ss-dd-email {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--fg-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ss-user-dropdown a {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--fg-primary);
}
.ss-user-dropdown a:hover {
background: var(--bg-sunken);
color: var(--fg-primary);
}
.ss-user-dropdown a i {
color: var(--fg-tertiary);
}
.ss-user-dropdown a:hover i { color: var(--fg-secondary); }
.ss-user-dropdown a[data-action="signout"] {
/* Plain destructive-leaning, not red — per brief. */
color: var(--fg-secondary);
}
.ss-user-dropdown a[data-action="signout"]:hover {
color: var(--fg-primary);
}
/* ═════════════════════════════════════════════════════════════════════
Settings — one page, anchored sections (Account · Preferences ·
Billing · Networks). Sub-tabs hidden (NAV.settings.subs = []); the
in-page jump nav at the top is the only sub-navigation.
═════════════════════════════════════════════════════════════════════ */
.kx-settings {
background: var(--bg-canvas);
color: var(--fg-primary);
font-family: var(--font-ui);
padding: var(--space-6) 0 var(--space-12);
max-width: 880px;
margin: 0 auto;
}
.kx-settings-head {
margin-bottom: var(--space-8);
}
.kx-settings-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--fg-primary);
margin: 0 0 var(--space-4);
}
.kx-settings-nav {
display: flex;
gap: var(--space-5);
flex-wrap: wrap;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.kx-jump {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--fg-tertiary);
text-decoration: none;
padding: 4px 2px;
border-bottom: 2px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
}
.kx-jump:hover { color: var(--fg-primary); border-bottom-color: var(--signal-default); }
.kx-section { margin-top: var(--space-8); scroll-margin-top: 80px; }
.kx-section-h {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 600;
color: var(--fg-primary);
margin: 0 0 var(--space-4);
}
.kx-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 10px);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-4);
}
.kx-card--danger {
border-color: color-mix(in oklab, var(--status-danger-fg, #B73824) 25%, transparent);
}
.kx-card-h {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--fg-primary);
margin: 0 0 var(--space-3);
}
.kx-row { margin-bottom: var(--space-4); }
.kx-row:last-child { margin-bottom: 0; }
.kx-label {
display: block;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
margin-bottom: 4px;
}
.kx-input { max-width: 420px; }
.kx-mono { font-family: var(--font-mono); }
.kx-copy-row { display: flex; gap: 8px; max-width: 420px; }
.kx-copy-row .kx-input { flex: 1; max-width: none; }
.kx-hint {
font-family: var(--font-ui);
font-size: 12px;
color: var(--fg-tertiary);
margin: 6px 0 0;
line-height: 1.5;
}
.kx-form {
display: grid;
gap: 10px;
max-width: 380px;
}
.kx-form-error {
font-family: var(--font-ui);
font-size: 13px;
color: var(--status-danger-fg, #B73824);
}
.kx-danger-summary {
cursor: pointer;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--status-danger-fg, #B73824);
}
/* Preferences — header strip + toggle rows inside one card. */
.kx-prefs { padding: 0; }
.kx-prefs-head {
padding: 14px var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.kx-prefs-h { margin: 0; }
.kx-prefs-list { display: flex; flex-direction: column; }
.kx-pref {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
padding: 14px var(--space-6);
border-top: 1px solid var(--border-subtle);
}
.kx-prefs-list > .kx-pref:first-child { border-top: 0; }
.kx-pref-text { flex: 1; min-width: 0; }
.kx-pref-name {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--fg-primary);
}
.kx-pref-desc {
font-family: var(--font-ui);
font-size: 12px;
color: var(--fg-secondary);
margin-top: 2px;
line-height: 1.5;
}
/* Blocklists card — sub-label in the header (e.g. "3 blocklists on") and the
subtle saved/error indicator under the toggle list. */
.kx-prefs-sub {
font-family: var(--font-ui);
font-size: 12px;
color: var(--fg-tertiary);
}
.kx-save-state {
font-family: var(--font-ui);
font-size: 12px;
color: var(--fg-tertiary);
min-height: 16px;
padding: 0 var(--space-6) 12px;
transition: opacity 0.2s;
}
/* "Coming soon" placeholder row (Keep Community Blocklist): visually muted,
non-interactive toggle, badge. The row itself is a button that explains the
feature isn't available yet. */
.kx-pref--soon { cursor: pointer; }
.kx-pref--soon .kx-pref-name,
.kx-pref--soon .kx-pref-desc { color: var(--fg-tertiary); }
.kx-soon-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--pumpkin-spice, #fa8334);
background: color-mix(in srgb, var(--pumpkin-spice, #fa8334) 14%, transparent);
vertical-align: middle;
}
/* Muted, non-interactive switch for the placeholder. */
.ss-switch--soon { opacity: 0.45; pointer-events: none; }
/* Billing — current plan row + upgrade affordance. */
.kx-billing-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
/* Networks — connected-from card + linked-networks table. */
.kx-kicker {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-tertiary);
margin-bottom: 6px;
}
.kx-net-current { padding: 0; }
.kx-net-current-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.kx-net-ip {
font-size: 18px;
font-weight: 600;
color: var(--fg-primary);
}
.kx-link {
color: var(--signal-default);
text-decoration: underline;
}
.kx-link:hover { color: var(--signal-default); opacity: 0.85; }
/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.kx-settings { padding: var(--space-5) 16px 64px; }
.kx-settings-title { font-size: 24px; }
}
@media (max-width: 600px) {
.kx-billing-row { flex-direction: column; align-items: flex-start; }
.kx-pref { flex-direction: row; }
}
/* ═════════════════════════════════════════════════════════════════════
Manual setup — address cards (IPv6 / IPv4 / DoH / DoT / Link).
Replaces the legacy green/blue tinted boxes with canonical kx-card
chrome. No severity colors — Recommended/Fallback live as quiet
tertiary kicker tags next to the title.
═════════════════════════════════════════════════════════════════════ */
.kx-addr {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.kx-addr-label {
display: inline-flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.kx-addr-title {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
color: var(--fg-primary);
}
.kx-addr-tag {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--signal-default);
}
.kx-addr-tag--muted { color: var(--fg-tertiary); }
.kx-addr .kx-hint { margin: 0; }
.kx-addr--primary { border-color: color-mix(in oklab, var(--signal-default) 24%, var(--border-subtle)); }
.kx-guide { color: var(--fg-secondary); font-size: 13px; }
.kx-guide ol { padding-left: 18px; line-height: 1.7; margin: 0; }
.kx-guide ol li + li { margin-top: 6px; }
/* ═════════════════════════════════════════════════════════════════════
Custom Rules — kicker headers, mono domains, plain-text actions,
quiet edit/delete textbtns. Replaces the legacy .card + .sev pill
styling so this page reads in the same voice as Activity and
Settings.
═════════════════════════════════════════════════════════════════════ */
.kr-rules { /* extends .kp-activity wrapper — no overrides yet */ }
.kr-form-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 10px);
padding: var(--space-5) var(--space-6);
}
.kr-form {
display: grid;
grid-template-columns: 1fr 180px auto;
gap: 12px;
align-items: end;
}
.kr-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kr-form-field--grow { min-width: 220px; }
.kr-label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--fg-secondary);
}
.kr-input { width: 100%; }
.kr-form-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kr-submit { white-space: nowrap; }
.kr-hint {
font-family: var(--font-ui);
font-size: 12px;
color: var(--fg-tertiary);
line-height: 1.55;
margin: var(--space-4) 0 0;
}
.kr-list-actions {
display: inline-flex;
gap: 4px;
}
.kr-count {
margin-left: 8px;
color: var(--fg-tertiary);
font-variant-numeric: tabular-nums;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.kr-table-wrap {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 10px);
overflow: hidden;
}
.kr-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-ui);
font-size: 13px;
}
.kr-table thead th {
text-align: left;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-tertiary);
padding: 12px 20px;
border-bottom: 1px solid var(--border-subtle);
background: transparent;
}
.kr-table .kr-th-controls { text-align: right; }
.kr-table tbody td {
padding: 14px 20px;
border-top: 1px solid color-mix(in oklab, var(--fg-tertiary) 10%, transparent);
color: var(--fg-primary);
vertical-align: middle;
}
.kr-table tbody tr:first-child td { border-top: 0; }
.kr-table tbody tr:hover td { background: var(--bg-sunken); }
.kr-td-domain {
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-primary);
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kr-td-action { color: var(--fg-secondary); font-size: 13px; white-space: nowrap; }
.kr-td-added { color: var(--fg-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-td-controls { text-align: right; white-space: nowrap; }
.kr-row-btn { margin-left: 4px; }
.kr-row-btn--danger { color: var(--status-danger-fg, #B73824); }
.kr-row-btn--danger:hover {
background: color-mix(in oklab, var(--status-danger-fg, #B73824) 8%, transparent);
}
.kr-more {
text-align: center;
padding: 14px 20px;
border-top: 1px solid var(--border-subtle);
}
.kr-more-meta { color: var(--fg-tertiary); font-size: 12px; margin-right: 10px; }
.kr-empty {
padding: 28px 24px;
text-align: center;
color: var(--fg-tertiary);
font-size: 13px;
line-height: 1.55;
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg, 10px);
}
/* Mobile — form stacks, table action column narrows. */
@media (max-width: 700px) {
.kr-form { grid-template-columns: 1fr; }
.kr-form-actions { justify-content: flex-start; }
.kr-table thead th, .kr-table tbody td { padding: 10px 14px; }
.kr-td-added { display: none; }
}