/* shell.css - screens of splash-web (spec 12 12.4): login SCR-000, app shell (header, widget,
 * profile menu, sub-navigation, Administration rail), global screens SCR-900..903, the planned
 * ("Next iteration") page and the session-expired modal.
 * Source of every value: the inline styles of docs/splash2/design/claude-design-v2/prototype/
 * SPLASH 2.dc.html (sections "LOGIN SCR-000", <header>, 403/404/500/not configured, "PLANNED
 * MODULE", Administration). The CSP has no 'unsafe-inline' for styles, so the prototype's inline
 * styles live here as classes. Tokens only - no colour literals (CI lint). */

.sp-mono { font-family: ui-monospace, Menlo, monospace; }
.sp-btn-link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; line-height: normal; }
.sp-btn-link:hover { text-decoration: none; }
.sp-app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Login SCR-000 ---- */
.sp-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; background: var(--paper-3); }
.sp-login-col { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.sp-login-brand { display: flex; align-items: center; gap: 9px; }
.sp-login-brand img { display: block; width: 22px; height: 22px; }
.sp-login-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.sp-login-ver { font-size: var(--t-meta); color: var(--ink-3); border: 1px solid var(--line-2); padding: 1px 5px; }
.sp-login-card { background: var(--paper); border: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sp-login-head { display: flex; flex-direction: column; gap: 6px; }
.sp-login-title { margin: 0; font-size: var(--t-h1); font-weight: 700; line-height: inherit; }
.sp-login-lead { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sp-login-note { font-size: 12px; line-height: 1.5; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line-2); }
.sp-login-err { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--neg); }
.sp-login-err > strong { color: var(--neg); }
.sp-login-sub { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-top: 4px; }
.sp-login-groups { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.sp-login-request { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 4px; }
.sp-login-request textarea { width: 100%; box-sizing: border-box; }
.sp-login-foot { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.sp-login-em { background: var(--paper); border: 1px solid var(--amber); padding: 16px 20px; }
.sp-login-em-sum { display: flex; flex-direction: column; gap: 12px; cursor: pointer; list-style: none; }
.sp-login-em-sum::-webkit-details-marker { display: none; }
.sp-login-em-row { display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 12.5px; font-weight: 700; }
.sp-login-em-caret { font-size: 11px; color: var(--ink-3); font-weight: 500; }
.sp-login-em-hide, .sp-login-em[open] .sp-login-em-show { display: none; }
.sp-login-em[open] .sp-login-em-hide { display: inline; }
.sp-login-em-lead { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }
.sp-login-em-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sp-login-em-form .Button_btn { flex-shrink: 0; }
.sp-login-em-err { font-size: 12px; color: var(--neg); }
/* The login form uses the CashflowUI Field of the prototype (semibold label), not the D-035
   screen label of splash-ui.css. */
.sp-login-em-form .Input_field > .Input_label { font-weight: var(--w-semibold); letter-spacing: normal; }

/* ---- App header (CD-30) ---- */
/* Links stand in for the prototype's <button>s: same line height as a button (normal). */
.sp-hdr a, .sp-admin .AdminShell_railItem, .sp-admin .AdminShell_railBack { line-height: normal; }
.sp-hdr { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line-2); }
.sp-hdr-bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; flex-wrap: nowrap; }
.sp-hdr-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.sp-hdr-brand:hover { text-decoration: none; }
.sp-hdr-brand img { display: block; width: 20px; height: 20px; }
.sp-hdr-name { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.sp-hdr-ver { position: relative; display: flex; align-items: center; gap: 4px; margin-left: -6px; background: none; border: 1px solid var(--line-2); padding: 1px 5px; font: inherit; font-size: var(--t-meta); color: var(--ink-3); cursor: pointer; flex-shrink: 0; }
.sp-hdr-ver:hover { border-color: var(--line-strong); color: var(--ink); }
.sp-hdr-ver-dot { position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; background: var(--accent); }
.sp-hdr-nav { display: flex; align-items: stretch; height: 48px; flex: 0 1 auto; min-width: 0; }
.sp-hdr-nav-item { display: flex; align-items: center; border-top: 2px solid transparent; border-bottom: 2px solid transparent; padding: 0 8px; height: 48px; box-sizing: border-box; font-size: 13px; font-weight: 500; color: var(--ink-3); white-space: nowrap; text-decoration: none; }
.sp-hdr-nav-item:hover { color: var(--ink); text-decoration: none; }
.sp-hdr-nav-item.sp-on { border-bottom-color: var(--ink); font-weight: 700; color: var(--ink); }
.sp-hdr-fill { flex: 1; }
.sp-hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.sp-hdr-search { display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 30px; padding: 0 10px; background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink-3); font-size: 12px; cursor: pointer; text-align: left; }
.sp-hdr-search:hover { border-color: var(--line-strong); }
.sp-hdr-kbd { font-size: 10px; border: 1px solid var(--line-2); padding: 1px 6px; color: var(--ink-3); }
.sp-hdr-pop { position: relative; flex-shrink: 0; }
.sp-hdr-inbox { display: flex; align-items: stretch; height: 30px; padding: 0; background: none; border: 1px solid var(--line-2); cursor: pointer; color: var(--ink); }
.sp-hdr-inbox:hover { border-color: var(--line-strong); }
.sp-hdr-inbox.sp-open { background: var(--paper-2); }
.sp-hdr-inbox.sp-stuck { border-color: var(--neg); }
.sp-hdr-inbox-part { display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 12px; }
.sp-hdr-inbox-part > strong { font-variant-numeric: tabular-nums; }
.sp-hdr-inbox-label { color: var(--ink-2); }
.sp-hdr-inbox-div { width: 1px; background: var(--line-2); }
.sp-hdr-inbox-caret { display: flex; align-items: center; padding: 0 8px 0 2px; font-size: 10px; color: var(--ink-3); }
.sp-hdr-sq { width: 8px; height: 8px; display: block; background: var(--line-strong); }
.sp-hdr-sq.sp-accent { background: var(--accent); }
.sp-hdr-sq.sp-amber { background: var(--amber); }
.sp-hdr-drop { position: absolute; right: 0; top: 36px; width: 400px; max-width: calc(100vw - 24px); background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow-menu); z-index: 200; animation: spIn .16s ease-out; max-height: calc(100vh - 80px); overflow: auto; }
.sp-drop-cap { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.sp-drop-cap.sp-second { padding-top: 14px; }
.sp-drop-cap > span:first-child { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.sp-drop-empty { padding: 6px 14px 12px; font-size: 12px; color: var(--ink-3); }
.sp-drop-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sp-drop-row:hover { background: var(--paper-2); text-decoration: none; }
.sp-drop-row-dot { width: 6px; height: 6px; background: var(--accent); }
.sp-drop-row-dot.sp-neg { background: var(--neg); }
.sp-drop-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-drop-row-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sp-drop-row-meta { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.sp-drop-row-age { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.sp-drop-row-age.sp-amber { color: var(--amber); }
.sp-drop-row-age.sp-neg { color: var(--neg); font-weight: 700; }
.sp-drop-link { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 14px; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--accent); }
.sp-drop-foot { display: flex; border-top: 1px solid var(--line); }
.sp-drop-foot > a { flex: 1; padding: 10px 14px; background: var(--paper-2); font-size: 12px; color: var(--accent); }
.sp-drop-foot > a + a { text-align: right; border-left: 1px solid var(--line); }
.sp-hdr-user { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.sp-hdr-avatar { width: 26px; height: 26px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.sp-hdr-caret { font-size: 10px; color: var(--ink-3); }
.sp-hdr-menu { position: absolute; right: 0; top: 38px; width: 300px; background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow-menu); z-index: 200; animation: spIn .16s ease-out; }
.sp-menu-who { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sp-menu-name { display: flex; flex-direction: column; gap: 2px; }
.sp-menu-name > strong { font-size: 13px; font-weight: 700; }
.sp-menu-name > span, .sp-menu-src { font-size: 11.5px; color: var(--ink-3); }
.sp-menu-src { font-size: 11px; }
.sp-menu-roles { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-menu-item { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; padding: 9px 14px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; font-size: 12.5px; color: var(--ink); text-decoration: none; }
.sp-menu-item:hover { background: var(--paper-2); text-decoration: none; }
.sp-menu-meta { font-size: 11px; color: var(--ink-3); }
.sp-menu-admin { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-menu-admin > span { display: block; padding: 4px 14px 6px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-menu-admin > a { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; text-align: left; padding: 7px 14px; font-size: 12.5px; color: var(--ink); text-decoration: none; }
.sp-menu-admin > a:hover { background: var(--paper-2); text-decoration: none; }
.sp-menu-help { border-top: 1px solid var(--line); border-bottom: 0; padding: 10px 14px; }
.sp-menu-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border: 1px solid var(--line-strong); border-bottom-width: 2px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-2); }
.sp-menu-out { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0; font-size: 12.5px; cursor: pointer; color: var(--neg); }
.sp-menu-out:hover { background: var(--paper-2); }
.sp-subnav { padding: 0 20px; border-top: 1px solid var(--line); }

/* ---- Page area ---- */
.sp-main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 20px 24px 60px; box-sizing: border-box; }
/* Emergency account session (design D114, handoff 3b v3b/16-18). */
.sp-bg-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; background: var(--amber-soft); border: 1px solid var(--amber); font-size: 12.5px; line-height: 1.5; }
/* Text on amber is var(--paper): white in the light theme, dark in the dark one, whose DS amber is a
   light fill - keeps >= 4.5:1 (axe); design D114 draws white on amber in both themes. */
.sp-bg-mark { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--amber); color: var(--paper); font-weight: 700; }
.sp-bg-body { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; }
.sp-bg-body strong { font-size: 13px; }
.sp-bg-body span { color: var(--ink-2); }
.sp-bg-left { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-bg-out { margin: 0; }
.sp-bg-banner + .sp-admin { margin-top: -16px; }
.sp-hdr-userpop { display: flex; align-items: center; }
.sp-hdr-emerg { display: flex; align-items: center; height: 22px; padding: 0 8px; margin-right: 6px; background: var(--amber); color: var(--paper); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* The EMERGENCY mark takes header room: tighter area tabs so long labels (DE) keep a gap to Search at 913 px. */
.sp-hdr-bar:has(.sp-hdr-emerg) .sp-hdr-nav-item { padding: 0 6px; }

/* ---- Administration (CD-57, CD-61) ---- */
.sp-admin { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; margin: -20px 0 0 -24px; }
.sp-admin-railwrap { position: sticky; top: 60px; align-self: start; background: var(--paper); border-right: 1px solid var(--line); min-height: calc(100vh - 120px); }
.sp-admin .AdminShell_railBack, .sp-admin .AdminShell_railItem { text-decoration: none; box-sizing: border-box; }
.sp-admin-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sp-admin-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 24px; }

/* ---- Global screens: 404 / 500 / not configured (cards), planned page ---- */
.sp-gs { background: var(--paper); border: 1px solid var(--line); padding: 48px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 560px; box-sizing: border-box; }
.sp-gs.sp-nc { gap: 12px; max-width: 620px; }
.sp-gs-cap { font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-gs-title { margin: 0; font-size: var(--t-h1); font-weight: 700; line-height: inherit; }
.sp-gs-text { color: var(--ink-2); line-height: 1.5; }
.sp-gs-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.sp-gs-meta .sp-mono { color: var(--ink); }
.sp-gs-actions { display: flex; gap: 8px; margin-top: 6px; }
.sp-gs-actions .Button_btn { flex-shrink: 0; white-space: nowrap; }
.sp-gs-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sp-gs-list > div { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.sp-gs-list > div > span:first-child { width: 6px; height: 6px; margin-top: 6px; background: var(--ink-4); }
.sp-gs-note { font-size: 12px; color: var(--ink-3); }
.sp-plan { background: var(--paper); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; box-sizing: border-box; }
.sp-plan-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.sp-plan-row > span:first-child { font-family: ui-monospace, Menlo, monospace; color: var(--ink-3); font-size: 11.5px; }

/* ---- 403 SCR-900 (CD-72) ---- */
.sp-na { min-height: calc(100vh - 160px); display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.sp-na-card { width: 100%; max-width: 560px; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; }
.sp-na-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.sp-na-code { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-na-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-na-titles > h1 { margin: 0; font-size: var(--t-h1); font-weight: 700; line-height: inherit; }
.sp-na-titles > span { font-size: 12.5px; color: var(--ink-2); }
.sp-na-body { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px; }
.sp-na-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 12.5px; align-items: center; }
.sp-na-k { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-na-who { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-na-who > span.sp-na-user { color: var(--ink-3); }
.sp-na-path { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-2); word-break: break-all; }
.sp-na-roles { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-na-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.sp-na-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--paper-2); }

/* ---- Session expired modal (SCR-903) ---- */
.sp-se { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.sp-se-title { font-size: 16px; font-weight: 700; }
.sp-se-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sp-se-foot { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }
.sp-se-foot .Button_btn { flex-shrink: 0; white-space: nowrap; }

/* Keyboard shortcuts help (states/09, prototype v2 mHelp) */
.sp-keys { display: flex; flex-direction: column; gap: 16px; }
.sp-keys-sec { display: flex; flex-direction: column; }
.sp-keys-title { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; padding-bottom: 6px; }
.sp-keys-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.sp-keys-keys { display: flex; gap: 4px; flex-shrink: 0; }
.sp-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--paper); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.sp-keys-none { font-size: 12px; color: var(--ink-3); }
.sp-foot-end { display: flex; justify-content: flex-end; width: 100%; }

/* Search palette (states/07-08, prototype v2 mSearch) */
.sp-sr-input { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sp-sr-input input { width: 100%; box-sizing: border-box; border: 0; outline: 0; background: none; font-size: 15px; color: var(--ink); font-family: inherit; }
.sp-sr-list { max-height: 420px; overflow: auto; padding: 6px 0; }
.sp-sr-group { padding: 8px 16px 4px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.sp-sr-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; background: transparent; border: 0; box-shadow: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.sp-sr-row[aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.sp-sr-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sp-sr-title { font-size: 12.5px; font-weight: 600; }
.sp-sr-sub { font-size: 11px; color: var(--ink-3); }
.sp-sr-id { font-size: 12.5px; }
.sp-sr-empty { padding: 18px 16px; color: var(--ink-3); font-size: 12.5px; }
.sp-sr-hint { padding: 8px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }
.sp-sr-keys { display: flex; gap: 14px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); background: var(--paper-2); font-size: 11px; color: var(--ink-3); }
.sp-sr-keys kbd { font-family: inherit; border: 1px solid var(--line-2); background: var(--paper); padding: 0 4px; }

/* Changelog panel (states/13, prototype v2 mChangelog) */
.sp-cl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sp-cl-top { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sp-cl-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sp-cl-title { font-size: var(--t-h2); font-weight: 700; }
.sp-cl-sub { font-size: 11.5px; color: var(--ink-3); }
.sp-cl-x { background: none; border: 0; font-size: 18px; color: var(--ink-3); cursor: pointer; line-height: 1; }
.sp-cl-filters { display: flex; gap: 8px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sp-cl-clear { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; cursor: pointer; }
.sp-cl-body { flex: 1; overflow: auto; padding: 4px 18px 18px; }
.sp-cl-empty { padding: 24px 0; font-size: 12.5px; color: var(--ink-3); }
.sp-cl-rel { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sp-cl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-cl-ver { font-size: 15px; font-weight: 700; font-family: ui-monospace, Menlo, monospace; }
.sp-cl-date { font-size: 11.5px; color: var(--ink-3); }
.sp-cl-group { display: flex; flex-direction: column; gap: 6px; }
.sp-cl-kind { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--ink-3); }
.sp-cl-new { color: var(--pos); }
.sp-cl-improved { color: var(--accent); }
.sp-cl-security { color: var(--neg); }
.sp-cl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.5; }
.sp-cl-open { color: var(--accent); font-size: 12px; }
.sp-cl-area { font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--line); padding: 0 5px; white-space: nowrap; }
.sp-cl-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-3); }
/* List cursor of the j / k keys (D-041 pkt 6): the chosen row, also focused for Enter. */
.sp-main tr[data-kb-row] { box-shadow: inset 2px 0 0 var(--accent); background: var(--paper-2); outline: none; }