/* screens.css - screens of wave W2S (spec 12 12.10): SCR-055 Signing queue, SCR-053 Signing
 * status with MOD-052 / MOD-053, Administration -> Settings -> Licenses & signing SCR-167a with
 * MOD-167 / MOD-168, and the list controls (View:, date filter).
 * Source of every value: the inline styles of docs/splash2/design/claude-design-v2/prototype/
 * SPLASH 2.dc.html (sections "SIGNING STATUS SCR-053", "SIGNING QUEUE SCR-055", the admin
 * `adm.status` / `adm.sections` blocks and the modals mCancel, mSecret, mTest). The CSP has no
 * 'unsafe-inline' for styles, so they live here as classes. Tokens only - no colour literals. */

.sp-link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-size: 12px; cursor: pointer; font-family: inherit; }
.sp-link-btn.sp-neg { color: var(--neg); font-size: 12.5px; }
.sp-left { margin-right: auto; }

/* ---- List controls (prototype vwUI / dfUI) ---- */
.sp-dd { position: relative; flex-shrink: 0; }
.sp-dd-btn { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--paper); border: 1px solid var(--line-2); font-size: 12px; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-dd-btn:hover { border-color: var(--line-strong); }
.sp-dd-btn.sp-active { background: var(--accent-soft); border-color: var(--accent); }
.sp-dd-btn strong { font-weight: 600; }
.sp-dd-k { color: var(--ink-3); }
.sp-dd-caret { font-size: 10px; color: var(--ink-3); }
.sp-dd-pop { position: absolute; left: 0; top: 36px; max-width: calc(100vw - 32px); background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow-menu); z-index: 150; animation: spIn .15s ease-out; }
.sp-dd-views { min-width: 240px; padding: 4px 0; }
.sp-dd-dates { width: 320px; display: flex; flex-direction: column; }
.sp-dd-list { display: flex; flex-direction: column; padding: 4px 0; }
.sp-dd-opt { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 7px 12px; background: transparent; border: 0; text-align: left; cursor: pointer; font-size: 12.5px; color: var(--ink); font-family: inherit; }
.sp-dd-views .sp-dd-opt { grid-template-columns: 12px 1fr; }
.sp-dd-opt:hover { background: var(--paper-2); }
.sp-dd-opt.sp-on { background: var(--paper-2); font-weight: 700; }
.sp-dd-mark { color: var(--accent); font-size: 9px; }
.sp-dd-range { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 400; }
.sp-dd-custom { padding: 10px 12px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sp-dd-cap { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-dd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-dd-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11px; color: var(--ink-3); }
.sp-dd-foot { display: flex; justify-content: space-between; align-items: center; }

/* ---- SCR-055 Signing queue ---- */
.sp-q { display: flex; flex-direction: column; gap: 14px; }
.sp-q-head { display: flex; flex-direction: column; gap: 4px; }
.sp-q-title { margin: 0; font-size: var(--t-h1); font-weight: 700; line-height: inherit; }
.sp-q-sub { font-size: 12px; color: var(--ink-3); }
.sp-q-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-q-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; background: var(--paper); border: 1px solid var(--line); }
.sp-q-note { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.sp-q-card { background: var(--paper); border: 1px solid var(--line); }
.sp-q-scroll { overflow-x: auto; }
.sp-q-table { width: 100%; border-collapse: collapse; min-width: 1080px; }
.sp-q-th { text-align: left; padding: 8px 10px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; background: var(--paper-2); border-bottom: 1px solid var(--line-2); }
.sp-q-th.sp-q-right { text-align: right; }
.sp-q-table tbody tr:hover { background: var(--paper-2); }
.sp-q-td { padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-q-custcell { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.sp-q-cust { font-size: 12.5px; font-weight: 600; }
.sp-q-sub2 { font-size: 11px; color: var(--ink-3); }
.sp-q-sub3 { display: block; font-size: 10.5px; color: var(--ink-3); }
.sp-q-amount { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-q-term { white-space: nowrap; }
.sp-q-term-l { font-weight: 600; }
.sp-q-by { color: var(--ink-2); }
.sp-q-age { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 400; }
.sp-q-age.sp-q-age-old { color: var(--neg); font-weight: 700; }
.sp-q-age.sp-q-age-warn { color: var(--amber); }
.sp-q-status { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.sp-q-acts { text-align: right; white-space: nowrap; }
.sp-q-act { display: inline-block; background: none; border: 1px solid var(--line-2); padding: 3px 8px; font-size: 11px; cursor: pointer; color: var(--ink); font-family: inherit; line-height: normal; }
.sp-q-act:hover { text-decoration: none; }
.sp-q-act + .sp-q-act { margin-left: 6px; }
.sp-q-act-neg { color: var(--neg); }
.sp-q-empty { background: var(--paper); border: 1px solid var(--line); padding: 36px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* v3 empty states (CD-97, v3-states/02, 13): title 15 px, explanation in --ink-2. */
.sp-q-empty strong { font-weight: 700; font-size: 15px; }
.sp-q-empty span { color: var(--ink-2); }
.sp-q-more { font-size: 11.5px; color: var(--ink-3); }
.sp-q-qfoot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-top: 0; font-size: 11.5px; color: var(--ink-3); }

/* ---- Modals (MOD-052, MOD-167, MOD-168) ---- */
.sp-modal-stack { display: flex; flex-direction: column; gap: 10px; }
.sp-modal-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sp-modal-stack > .sp-modal-text:last-child { font-size: 12px; }
.sp-modal-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.sp-modal-foot { display: flex; gap: 8px; justify-content: flex-end; width: 100%; align-items: center; }
.sp-test-head { display: flex; gap: 10px; align-items: center; }
.sp-test-ms { font-size: 12px; color: var(--ink-3); }
.sp-test-step { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.sp-test-mark { font-weight: 700; }
.sp-test-mark.sp-ok { color: var(--pos); }
.sp-test-mark.sp-bad { color: var(--neg); }
.sp-test-mark.sp-skip { color: var(--ink-3); }
.sp-test-text { display: flex; flex-direction: column; gap: 2px; }
.sp-test-detail { font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; color: var(--neg); white-space: normal; word-break: break-word; }
.sp-test-step .sp-test-ms { font-size: 11px; text-align: right; }
.sp-test-step.sp-skip .sp-test-text { color: var(--ink-3); }
.sp-test-note { font-size: 11.5px; color: var(--ink-3); }

/* ---- SCR-053 Signing status ---- */
.sp-sig { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.sp-sig-crumb { font-size: 11.5px; color: var(--ink-3); }
/* Links inside text are underlined, not only coloured (WCAG 1.4.1, axe link-in-text-block; D-041 pkt 1). */
.sp-sig-crumb a, .sp-lic-meta a, .sp-pay-meta a, .sp-su-crumb a, .sp-al-mtext a, .sp-inline-link { text-decoration: underline; text-underline-offset: 2px; }
.sp-sig-card { background: var(--paper); border: 1px solid var(--line); }
.sp-sig-head { padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.sp-sig-id { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 300px; }
.sp-sig-eyebrow { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-sig-title { font-size: var(--t-h1); font-weight: 700; }
.sp-sig-meta { font-size: 12px; color: var(--ink-2); }
.sp-sig-meta .sp-mono { display: inline-block; white-space: nowrap; }
.sp-sig-msgcard { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.sp-sig-msg { display: flex; gap: 14px; align-items: flex-start; }
.sp-sig-msg > .sp-dot { margin-top: 3px; }
.sp-sig-texts { display: flex; flex-direction: column; gap: 6px; }
.sp-sig-h { font-size: 14px; font-weight: 700; }
.sp-sig-m { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sp-sig-wait { font-size: 11.5px; color: var(--ink-3); }
.sp-sig-acts { display: flex; gap: 8px; padding-left: 26px; }
.sp-key-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; animation: spIn .25s ease-out; }
.sp-key-card { background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-key-meta { gap: 8px; }
.sp-key-head { display: flex; justify-content: space-between; align-items: center; }
.sp-key-cap { font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-key-box { font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.55; word-break: break-all; background: var(--paper-2); border: 1px solid var(--line-2); padding: 12px; color: var(--ink); height: 180px; box-sizing: border-box; overflow: auto; }
.sp-key-warn { font-size: 11.5px; color: var(--amber); }
.sp-key-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.sp-key-k { font-family: ui-monospace, Menlo, monospace; color: var(--ink-3); font-size: 11px; }
.sp-key-v { color: var(--ink); word-break: break-all; }
.sp-key-v.sp-key-ne { color: var(--ink-4); }

/* ---- SCR-167a Licenses & signing (admin adm.* blocks) ---- */
.sp-cfg { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sp-cfg-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sp-cfg-headtitle { flex: 1 1 320px; min-width: 0; }
.sp-cfg-headacts { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 4px; align-items: center; }
.sp-cfg-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; }
.sp-cfg-banner > span { flex: 1 1 300px; color: var(--ink-2); }
.sp-cfg-banner.sp-neg { border-color: var(--neg); }
.sp-cfg-banner.sp-neg > strong { color: var(--neg); }
.sp-cfg-banner.sp-amber { border-color: var(--amber); }
.sp-cfg-banner.sp-amber > strong { color: var(--amber); }
.sp-cfg-banner.sp-info { background: var(--accent-soft); border-color: var(--accent); }
.sp-cfg-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); }
.sp-cfg-meta { font-size: 12px; color: var(--ink-3); }
.sp-cfg-barright { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sp-cfg-last { font-size: 11.5px; color: var(--ink-3); }
.sp-cfg-last.sp-ok { color: var(--pos); }
.sp-cfg-last.sp-bad { color: var(--neg); }
.sp-cfg-sec { background: var(--paper); border: 1px solid var(--line); }
.sp-cfg-sechead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-cfg-sectitle { font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-cfg-secsub { font-size: 11px; color: var(--ink-3); text-align: right; }
.sp-cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 16px; padding: 16px; }
.sp-cfg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sp-cfg-field.sp-span { grid-column: 1 / -1; }
.sp-cfg-label { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-cfg-hint { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.sp-cfg-err { font-size: 11.5px; color: var(--neg); line-height: 1.4; }
.sp-cfg-ro { min-height: 32px; display: flex; align-items: center; font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--ink-2); word-break: break-all; }
.sp-cfg-switch { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: 12.5px; cursor: pointer; }
.sp-cfg-limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.sp-cfg-limit { display: flex; flex-direction: column; gap: 3px; }
.sp-cfg-sublabel { font-size: 11px; color: var(--ink-3); text-transform: capitalize; }
.sp-cfg-keytext { display: flex; flex-direction: column; gap: 6px; }
.sp-cfg-keytext textarea { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.sp-cfg-keyacts { display: flex; gap: 8px; }
.sp-cfg-keyrow { align-items: start; }
.sp-cfg-keytext .sp-cfg-pem { max-height: 150px; overflow: auto; }
.sp-cfg-warnbox { padding: 10px 12px; background: var(--amber-soft); border: 1px solid var(--amber); font-size: 12px; line-height: 1.5; }
[data-modal=secret] textarea, [data-modal=pgp-key] textarea { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
.sp-cfg-pemrow { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.sp-cfg-pemrow .sp-cfg-pem { grid-column: auto; }
.sp-cfg-info { padding: 10px 12px; background: var(--accent-soft); border: 1px solid var(--accent); font-size: 12.5px; line-height: 1.5; }
.sp-cfg-rows { display: flex; flex-direction: column; }
.sp-cfg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-cfg-rowtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-cfg-rowk { font-weight: 600; }
.sp-cfg-rowv { color: var(--ink-3); white-space: normal; }
.sp-cfg-rowacts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sp-cfg-rowlink { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.sp-cfg-pem { grid-column: 1 / -1; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; line-height: 1.45; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line-2); padding: 6px 8px; white-space: pre-wrap; word-break: break-all; }
.sp-cfg-secret { display: flex; gap: 8px; align-items: center; min-height: 32px; max-width: 560px; }
.sp-cfg-mask { flex: 1; min-width: 0; padding: 6px 10px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--ink); }
.sp-cfg-mask.sp-unset { color: var(--amber); }
/* E7.2: rail status dots, generic Settings, Job runs, Integration health, System logs */
.sp-rail-dot { width: 7px; height: 7px; flex: none; background: var(--line-strong); }
.sp-rail-dot.sp-ok { background: var(--pos); }
.sp-rail-dot.sp-warn { background: var(--amber); }
.sp-rail-dot.sp-bad { background: var(--neg); }
.sp-cfg-hist { display: grid; grid-template-columns: 140px 200px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-cfg-histat { color: var(--ink-3); }
.sp-cfg-histv { color: var(--ink); overflow-wrap: anywhere; }
.sp-cfg-jobname { font-size: 12px; color: var(--ink-2); margin-top: -3px; }
.sp-q-act-pos { color: var(--pos); }
.sp-job-off { background: var(--paper-2); }
/* Fixed columns (prototype minW 980 px): the layout does not move with the run data. */
.sp-job-table { table-layout: fixed; min-width: 980px; }
.sp-job-table th:nth-child(1) { width: 200px; }
.sp-job-table th:nth-child(2) { width: 110px; }
.sp-job-table th:nth-child(3) { width: 140px; }
.sp-job-table th:nth-child(4) { width: 90px; }
.sp-job-table th:nth-child(5) { width: 80px; }
.sp-job-table th:nth-child(7) { width: 150px; }
/* One line per job whatever the counters of the last run (full text in the title). */
.sp-job-sum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sp-health-card { background: var(--paper); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.sp-health-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.sp-health-detail { color: var(--ink-2); }
.sp-health-link { color: var(--ink-3); font-size: 11.5px; text-decoration: none; }
.sp-log-search { flex: 1 1 260px; min-width: 200px; }
.sp-log-table { min-width: 900px; }
.sp-log-at, .sp-log-host { color: var(--ink-3); white-space: nowrap; }
.sp-log-req { color: var(--accent); }
.sp-log-err { color: var(--neg); }
.sp-log-off { background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--paper-2) 6px, var(--paper-2) 12px); }
/* Numbered pager of every list (D-036 pkt 7; prototype list footers). */
.sp-pager { display: flex; gap: 6px; align-items: center; }
.sp-pager-btn { border: 1px solid var(--line-2); padding: 3px 8px; background: none; color: var(--ink-3); font: inherit; font-size: 11.5px; line-height: 1.4; cursor: pointer; }
.sp-pager-btn:disabled { cursor: default; }
.sp-pager-on { border-color: var(--ink); color: var(--ink); cursor: default; }
.sp-pager-gap { cursor: default; }
.sp-pager-foot { display: flex; justify-content: flex-end; padding: 10px 0; }

/* ---- Dashboard SCR-010..016 (wave W2, prototype `dash`) ---- */
.sp-dash { display: flex; flex-direction: column; gap: 16px; }
.sp-dh { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sp-dh-t { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; }
.sp-dh-h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.01em; }
.sp-dh-scope { color: var(--ink-3); font-size: 12px; }
.sp-dh-menus { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.sp-dd-pop.sp-dd-right { left: auto; right: 0; min-width: 220px; padding: 4px 0; }
.sp-dd-right .sp-dd-opt { grid-template-columns: 12px 1fr; }
.sp-dh-seg { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; background: var(--paper); border: 1px solid var(--line); }
.sp-dh-seg .sp-link { height: 32px; background: none; border: 0; color: var(--accent); font-size: 12px; cursor: pointer; font-family: inherit; }
.sp-dash-tabs { background: var(--paper); border: 1px solid var(--line); padding: 0 16px; }
.sp-dk { margin-bottom: 0; border-color: var(--line); overflow: hidden; }
.sp-dk1 { grid-template-columns: minmax(0, 1fr); }
.sp-dk2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-dk3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-dk4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-dk5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-dk6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-dk7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sp-dc-fill.sp-ink { background: var(--ink); }
.sp-dash-est { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); flex-wrap: wrap; }
.sp-dash-agg { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--paper); border: 1px solid var(--neg); font-size: 12.5px; }
.sp-dash-agg-t { flex: 1 1 320px; line-height: 1.5; }
.sp-dash-empty { background: var(--paper); border: 1px solid var(--line); padding: 40px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sp-dash-empty strong { font-size: 15px; }
.sp-dash-empty > span { color: var(--ink-2); line-height: 1.5; }
.sp-dash-empty .sp-row8 { display: flex; gap: 8px; margin-top: 4px; }
.sp-dash-skel { display: flex; flex-direction: column; gap: 16px; }
.sp-dash-skk { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sp-dash-skc { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.sp-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.sp-dc { background: var(--paper); border: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.sp-dc-wide { grid-column: 1 / -1; }
.sp-dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.sp-dc-title { font-size: var(--t-section-title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.sp-dc-sub { font-size: 11px; color: var(--ink-3); text-align: right; }
.sp-dc-bars { display: flex; flex-direction: column; gap: 11px; padding: 14px 16px; }
.sp-dc-flows { gap: 9px; }
.sp-dc-bar, .sp-dc-flow { display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) minmax(64px, auto); gap: 12px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-align: left; font-family: inherit; }
.sp-dc-flow { grid-template-columns: 110px minmax(0, 1fr) 110px; font-size: 12px; }
.sp-dc-bar:hover { opacity: .8; }
.sp-dc-bl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-dc-bt { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-dc-bs { font-size: 10.5px; color: var(--ink-3); }
.sp-dc-bs:empty { display: none; }
.sp-dc-track { height: 12px; background: var(--paper-3); position: relative; display: block; }
.sp-dc-track > span, .sp-dc-ftrack > span { position: absolute; left: 0; top: 0; bottom: 0; }
.sp-dc-ftrack { height: 16px; position: relative; display: block; background: var(--paper-2); }
.sp-dc-bv { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sp-dc-fv { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.sp-dc-flow .sp-b, .sp-dc-fv.sp-b { font-weight: 700; }
.sp-dc-fv.sp-pos { color: var(--pos); }
.sp-dc-fv.sp-neg { color: var(--neg); }
.sp-dc-foot { font-size: 11px; color: var(--ink-3); padding-top: 4px; }
.sp-dc-att { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 11px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-dc-att:hover { background: var(--paper-2); }
.sp-dc-an { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-dc-at { font-size: 13px; font-weight: 600; }
.sp-dc-am { font-size: 11.5px; color: var(--ink-3); }
.sp-dc-cta { font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.sp-dc-feed { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; font-size: 12px; }
.sp-dc-ft { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-dc-feed .sp-dc-bl { gap: 2px; }
.sp-dc-fa { font-size: 11px; color: var(--ink-3); }
.sp-dc-stats { display: flex; gap: 20px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-2); margin-top: auto; }
.sp-dc-stats strong { color: var(--ink); }
.sp-dc-tw { overflow-x: auto; overflow-y: hidden; }
.sp-dc-table { width: 100%; border-collapse: collapse; }
.sp-dc-table th { text-align: left; padding: 8px 12px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; background: var(--paper-2); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.sp-dc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sp-dc-table tr { cursor: pointer; }
.sp-dc-table tbody tr:hover { background: var(--paper-2); }
.sp-dc-table .r { text-align: right; white-space: nowrap; width: 1%; max-width: none; }
.sp-dc-table .b { font-weight: 600; }
.sp-dc-table .neg { color: var(--neg); }
.sp-dc-table .pos { color: var(--pos); }
.sp-dc-table .amber { color: var(--amber); }
.sp-dc-table .accent { color: var(--accent); }
.sp-dc-table .mute { color: var(--ink-3); }
.sp-dc-table .ink2 { color: var(--ink-2); }
.sp-dl { padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
.sp-dl-plot { position: relative; height: 180px; margin: 0 6px; }
.sp-dl-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-dl-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-dl-base { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-dl-area { fill: var(--accent-soft); stroke: none; }
.sp-dl-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sp-dl-pt { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); background: var(--paper); border: 2px solid var(--accent); box-sizing: border-box; pointer-events: none; }
.sp-dl-pt.sp-last { width: 11px; height: 11px; background: var(--accent); }
.sp-dl-hits { position: absolute; inset: 0; display: flex; }
.sp-dl-hit { flex: 2 1 0; background: transparent; border: 0; padding: 0; cursor: pointer; }
.sp-dl-hit:first-child, .sp-dl-hit:last-child { flex-grow: 1; }
.sp-dl-hit:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.sp-dl-last { position: absolute; right: 0; transform: translate(0, -170%); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--paper); padding: 0 2px; }
.sp-dl-max, .sp-dl-min { position: absolute; left: 0; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-dl-max { top: 0; }
.sp-dl-min { bottom: 0; }
.sp-dl-labels { display: flex; justify-content: space-between; margin: 0 6px; }
.sp-dl-labels > span { width: 0; display: flex; justify-content: center; font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.sp-dp { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sp-dp-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sp-dp-head > .sp-dc-bl { flex: 1; gap: 3px; }
.sp-dp-k { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-dp-title { font-size: var(--t-h2); font-weight: 700; }
.sp-dp-sub { font-size: 12px; color: var(--ink-3); }
.sp-dp-total { font-size: var(--t-kpi-value); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-dp-x { background: none; border: 0; font-size: 18px; line-height: 1; color: var(--ink-3); cursor: pointer; }
.sp-dp-body { flex: 1; overflow: auto; min-height: 0; }
.sp-dp-pad { padding: 14px 18px; font-size: 12px; color: var(--ink-3); }
/* Empty drill panel (design D119). */
.sp-dp-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.sp-dp-empty > strong { font-size: 13.5px; color: var(--ink); }
.sp-dp-emptylink { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.sp-dp-segs { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sp-dp-seg { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.sp-dp-seg .sp-dc-track { height: 8px; }
.sp-dp-seg .sp-ink2 { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sp-dp-gh { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.sp-dp-gh span:last-child { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-dp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 18px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-dp-row:hover { background: var(--paper-2); }
.sp-dp-row:disabled { cursor: default; }
.sp-dp-rt { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dp-rr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sp-dp-rv { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-dp-rv.sp-neg { color: var(--neg); }
/* Status / agreement rows of the support and partner panels (prototype tone colours, D-041 pkt 8). */
.sp-dp-rv.sp-amber { color: var(--amber); }
.sp-dp-rv.sp-ink2 { color: var(--ink-2); }
.sp-dp-total.sp-neg { color: var(--neg); }
.sp-dp-foot { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--paper-2); }
/* Administration of wave W8 (SCR-160..166, SCR-170; prototype v2 `isAdm` tables, matrix, modals). */
.sp-adm .sp-q-table { min-width: 760px; }
.sp-adm-users, .sp-adm-keys, .sp-adm-audit { min-width: 900px; }
.sp-adm-roles, .sp-adm-oidc { min-width: 600px; }
.sp-adm-bar { align-items: flex-end; }
.sp-adm-bar .sp-crm-search { flex: 1 1 220px; min-width: 180px; }
.sp-adm-tog { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; white-space: nowrap; }
.sp-adm-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sp-adm-strong { font-weight: 600; }
.sp-adm-amber { color: var(--amber); }
.sp-adm-fail { color: var(--neg); font-weight: 600; }
.sp-adm-muted { color: var(--ink-2); }
.sp-nowrap { white-space: nowrap; }
.sp-adm-form { display: flex; flex-direction: column; gap: 10px; }
.sp-adm-cap { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-adm-err { font-size: 11.5px; color: var(--neg); }
.sp-adm-hint { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.sp-adm-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sp-adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sp-adm-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.sp-adm-matrix { min-width: 900px; }
.sp-adm-matrix .sp-adm-mfirst { text-align: left; position: sticky; left: 0; background: var(--paper); z-index: 1; }
.sp-adm-matrix th.sp-adm-mfirst { background: var(--paper-2); }
.sp-adm-mc { text-align: center; white-space: nowrap; }
.sp-adm-matrix th.sp-adm-mc { text-align: center; }
.sp-adm-mgroup td, .sp-adm-mgroup td.sp-adm-mfirst { background: var(--paper-2); font-weight: 700; color: var(--ink-3); text-transform: capitalize; }
.sp-adm-changed { background: var(--amber-soft); }
.sp-adm-code { display: block; font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; color: var(--ink-3); }
.sp-adm-matrix tbody tr:hover { background: transparent; }
.sp-adm-search { flex: 1 1 220px; min-width: 180px; }
/* SCR-902 as a banner on dependent screens (D-041 pkt 7; design D115, v3b/19-24): badge, title,
   text, "Unavailable here", Open Settings / ask an administrator. */
.sp-nc-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; background: var(--paper); border: 1px solid var(--line-strong); font-size: 12.5px; line-height: 1.5; }
.sp-nc-body { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-nc-body > strong { font-size: 13px; }
.sp-nc-body > span { color: var(--ink-2); }
.sp-nc-body > .sp-nc-aff { font-size: 11.5px; color: var(--ink-3); }
.sp-nc-note { font-size: 12px; color: var(--ink-2); }
/* W9-1 skeletons shaped like the detail screens (screens/shapes.rs; v3-states/04, 11, 18, 23). */
.sp-sk-screen { display: flex; flex-direction: column; gap: 16px; }
.sp-sk-card { background: var(--paper); border: 1px solid var(--line); }
.sp-sk-head { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sp-sk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-sk-tile { padding: 14px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sp-sk-tile:last-child { border-right: 0; }
.sp-sk-tabs { padding: 10px 16px; display: flex; gap: 18px; }
.sp-sk-rows { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-sk-sighead { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.sp-sk-caption { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.sp-sk-key { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sp-sk-title { width: 260px; max-width: 100%; height: 22px; }
.sp-sk-sub { width: 440px; max-width: 100%; height: 14px; }
.sp-sk-h1 { width: 300px; max-width: 100%; height: 26px; }
.sp-sk-meta { width: 360px; max-width: 100%; height: 14px; }
.sp-sk-label { width: 110px; height: 10px; }
.sp-sk-value { width: 100%; height: 20px; }
.sp-sk-tab { width: 80px; height: 12px; }
.sp-sk-row { width: 100%; height: 18px; }
.sp-sk-keyhead { width: 280px; max-width: 100%; height: 16px; }
.sp-sk-block { width: 100%; height: 72px; }

/* ---- W9-5 (handoff v3): Settings states, Job schedules table (v3-states/14-17, 39, v3/39) ---- */
.sp-cfg-banner.sp-col { flex-direction: column; align-items: flex-start; gap: 8px; }
.sp-cfg-banner.sp-col > span { flex: none; }
.sp-cfg-banner.sp-amber.sp-col { background: var(--amber-soft); }
.sp-cfg-banner.sp-amber.sp-col > strong { color: var(--ink); }
.sp-cfg-chg { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sp-cfg-chg > span { color: var(--ink-3); }
.sp-cfg-jobs { min-width: 860px; }
.sp-cfg-jobs td { vertical-align: middle; }
.sp-cfg-jobs tr.sp-off td { background: var(--paper-2); }
.sp-cfg-jobkey { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.sp-cfg-jobcron { min-width: 160px; }
.sp-cfg-joblast { color: var(--ink-2); font-size: 12px; }
.sp-cfg-foot { padding: 10px 16px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
.sp-cfg-sec > .sp-q-card { border: 0; border-top: 1px solid var(--line); }
/* W9-5 / W9-6 (handoff v3 v3/33, v3/36, v3/37): choice checkboxes, rate limits table, invoice requests */
.sp-cfg-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sp-cfg-rl-def td { background: var(--paper-2); color: var(--ink-3); }
.sp-cfg-rl-sub { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.sp-cfg-rl-foot { margin: 0; padding: 12px 16px; font-size: 12px; color: var(--ink-3); }
.sp-cfg-iq-failed td { background: color-mix(in oklch, var(--neg) 5%, var(--paper)); }
.sp-cfg-iq-st.sp-neg { color: var(--neg); } .sp-cfg-iq-st.sp-accent { color: var(--accent); } .sp-cfg-iq-st.sp-pos { color: var(--pos); }
.sp-cfg-iq-st.sp-adm-muted { color: var(--ink-3); }
.sp-cfg-rl { table-layout: fixed; min-width: 760px; }
.sp-cfg-rl th:nth-child(1) { width: 190px; } .sp-cfg-rl th:nth-child(2) { width: 220px; }
.sp-cfg-rl th:nth-child(3) { width: 110px; } .sp-cfg-rl th:nth-child(4) { width: 170px; }
.sp-cfg-rl input { width: 90px; } .sp-cfg-rl .sp-cfg-err { display: block; }
.sp-cfg-iq { min-width: 900px; }
/* PEM editor of MOD-167 and PEM settings fields (design D109, v3b/42-45). */
.sp-cfg-pemedit { display: flex; flex-direction: column; gap: 8px; }
.sp-cfg-pemrow2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-cfg-pemfile { cursor: pointer; }
.sp-cfg-pemfile.sp-dis { opacity: .5; pointer-events: none; }
.sp-cfg-pemedit textarea { font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45; }
.sp-cfg-pemok { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.sp-cfg-pemwarn { padding: 10px 12px; background: var(--amber-soft); border: 1px solid var(--amber); font-size: 12px; line-height: 1.45; color: var(--ink); }