/* crm.css - sales screens of wave W3 (spec 12 12.7): SCR-020 Customers, SCR-021 Customer 360,
 * SCR-022 customer form, SCR-030 Prospects, SCR-031 Prospect with MOD-030..035, SCR-032 prospect
 * form, SCR-033 Duplicates, SCR-040 Partners, SCR-041 Partner, SCR-042 partner form, Extend
 * agreement. Source of every value: the inline styles of docs/splash2/design/claude-design-v2/
 * prototype/SPLASH 2.dc.html (sections "CUSTOMERS SCR-020", "CUSTOMER 360 SCR-021", "PROSPECTS",
 * "PROSPECT DETAIL SCR-031", "PARTNERS SCR-040", "PARTNER PORTFOLIO SCR-041", modals mFree,
 * mEval, mPartner, mReject, mAccept, mConvert, mExtend). Tokens only. */

/* ---- shared ---- */
.sp-crm { gap: 16px; }
.sp-crm-c11 { font-size: 11px; }
.sp-crm-c115 { font-size: 11.5px; }
.sp-crm-c12 { font-size: 12px; }
.sp-crm-num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-crm-card { background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.sp-crm-pad { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-crm-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-crm-cardpad { padding: 14px 16px 0; }
.sp-crm-link { white-space: nowrap; background: none; border: 0; padding: 0; color: var(--accent); font-size: 11.5px; cursor: pointer; font-family: inherit; text-decoration: none; }
.sp-crm-none { padding: 22px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); }
.sp-crm-none strong { font-weight: 600; color: var(--ink); }
.sp-crm-none span { font-size: 12px; }
.sp-crm-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.sp-crm-grid14 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sp-crm-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sp-crm-tabs { background: var(--paper); border: 1px solid var(--line); padding: 0 16px; }
.sp-crm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12.5px; }
.sp-crm-tag { font-size: 10.5px; border: 1px solid var(--line-2); padding: 1px 6px; color: var(--ink-2); }
.sp-crm-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-crm-new { color: var(--accent); }

/* ---- list screens: filters, table, footer, states ---- */
.sp-crm-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px; background: var(--paper); border: 1px solid var(--line); }
.sp-crm-search { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.sp-crm-clear { height: 32px; font-size: 12px; }
.sp-crm-table { width: 100%; min-width: 1080px; }
.sp-crm-prtable { min-width: 1180px; }
.sp-crm-pttable { min-width: 1080px; }
.sp-crm-row { cursor: pointer; }
.sp-crm-row:hover { background: var(--paper-2); }
.sp-crm-row.sp-on, .sp-crm-row.sp-on:hover { background: var(--accent-soft); }
.sp-crm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; font-size: 11.5px; color: var(--ink-3); }
.sp-crm-state { background: var(--paper); border: 1px solid var(--line); padding: 36px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sp-crm-state strong { font-weight: 700; font-size: 15px; }
.sp-crm-state span { color: var(--ink-2); }
/* The list error card of design D117 inside a card: one border, the card's padding. */
.sp-crm-state > .sp-state { border: 0; padding: 0; background: none; }
.sp-q-card > .sp-state { border: 0; }
.sp-crm-exp { font-variant-numeric: tabular-nums; }
.sp-crm-namerow { display: inline-flex; align-items: center; gap: 6px; }
.sp-crm-dupflag { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--amber); border: 1px solid var(--amber); padding: 0 4px; }
.sp-crm-ref { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-crm-open { color: var(--accent); }

/* ---- detail header (SCR-021, SCR-031, SCR-041) ---- */
.sp-crm-head { background: var(--paper); border: 1px solid var(--line); }
.sp-crm-headtop { display: flex; gap: 18px; align-items: flex-start; padding: 18px 20px; flex-wrap: wrap; }
.sp-crm-headmain { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 320px; }
.sp-crm-name { font-size: var(--t-h1); font-weight: 700; letter-spacing: -.01em; margin: 0; }
.sp-crm-meta { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.sp-crm-idrow { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.sp-crm-copy { background: none; border: 1px solid var(--line-2); font-size: 10.5px; padding: 1px 6px; cursor: pointer; color: var(--ink-2); font-family: inherit; }
.sp-crm-stripelabel { margin-left: 8px; }
.sp-crm-stripe { font-family: ui-monospace, Menlo, monospace; display: inline-flex; align-items: center; gap: 3px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.sp-crm-churn { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--paper); border: 1px solid var(--neg); font-size: 12.5px; }
.sp-crm-waiting { font-size: 11.5px; color: var(--ink-3); }

/* stage track (Customer 360) */
.sp-crm-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sp-crm-step { padding: 12px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.sp-crm-step:last-child { border-right: 0; }
.sp-crm-steprow { display: flex; align-items: center; gap: 8px; }
.sp-crm-dot { width: 9px; height: 9px; background: var(--paper); border: 1px solid var(--line-strong); }
.sp-crm-steplabel { font-size: 12px; color: var(--ink-3); }
.sp-crm-stepcur { font-size: 10px; color: var(--ink-3); margin-left: auto; }
.sp-crm-stepdate { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-crm-step.sp-done .sp-crm-dot { background: var(--ink-3); border-color: var(--ink-3); }
.sp-crm-step.sp-done .sp-crm-steplabel { color: var(--ink); }
.sp-crm-step.sp-cur { background: var(--paper-2); }
.sp-crm-step.sp-cur .sp-crm-dot { background: var(--ink); border-color: var(--ink); }
.sp-crm-step.sp-cur .sp-crm-steplabel { color: var(--ink); font-weight: 700; }
.sp-crm-step.sp-churn { background: var(--paper-2); }
.sp-crm-step.sp-churn .sp-crm-dot { background: var(--neg); border-color: var(--neg); }
/* Announced churn (design D113): amber banner, step Churned "planned". */
.sp-crm-step.sp-planned { background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber); }
.sp-crm-step.sp-planned .sp-crm-dot { border-color: var(--amber); }
.sp-crm-step.sp-planned .sp-crm-steplabel, .sp-crm-step.sp-planned .sp-crm-stepdate { color: var(--amber); }
.sp-crm-planned { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--amber-soft); border: 1px solid var(--amber); font-size: 12.5px; line-height: 1.5; }
.sp-crm-planned > span:last-child { flex: 1 1 300px; }
.sp-crm-planned-sub { display: block; font-size: 11px; color: var(--amber); }
/* Account owner (design D112). */
.sp-crm-owner { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.sp-crm-ownerpick { width: 210px; }
.sp-crm-ownertext { color: var(--ink); font-weight: 600; }
.sp-crm-ownerban > span { flex: 1 1 300px; }
.sp-crm-ownerban > strong { flex-shrink: 0; }

/* agreement axis (SCR-041) */
.sp-crm-axis { padding: 14px 20px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sp-crm-axisrow { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-crm-axisrow strong { font-weight: 600; color: var(--ink-2); }
.sp-crm-axisrow strong.sp-lic-neg { color: var(--neg); }
.sp-crm-axisrow strong.sp-lic-amber { color: var(--amber); }
.sp-crm-agrtrack { position: relative; height: 8px; background: var(--paper-3); }
.sp-crm-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pos); }
.sp-crm-bar.sp-amber { background: var(--amber); }
.sp-crm-bar.sp-neg { background: var(--neg); }
.sp-crm-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); transform: translateX(-1px); }
.sp-crm-ptban { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.sp-crm-ptban > span { flex: 1 1 300px; }
.sp-crm-ptban.sp-neg { border-color: var(--neg); }
.sp-crm-ptban.sp-neg > strong { color: var(--neg); }
.sp-crm-ptban.sp-amber { background: var(--amber-soft); border-color: var(--amber); }

/* KPI rows (SCR-041, Support tab) */
.sp-crm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); background: var(--paper); }
.sp-crm-kpi { padding: 14px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sp-crm-kpi:last-child { border-right: 0; }
.sp-crm-kpival { font-size: var(--t-kpi-value); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Customer 360 overview ---- */
.sp-crm-licrow { display: grid; grid-template-columns: 78px minmax(0, 2.6fr) auto auto 132px; gap: 12px; 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-crm-licrow:hover { background: var(--paper-2); }
.sp-crm-licrow.sp-full { grid-template-columns: 90px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 120px 80px; }
.sp-crm-lid { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-crm-lictype { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; font-size: 12.5px; }
.sp-crm-lictype strong { font-weight: 600; }
.sp-crm-licvalid { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sp-crm-tl { padding: 6px 16px 12px; display: flex; flex-direction: column; }
.sp-crm-pad .sp-crm-tl { padding: 0; }
.sp-crm-ev { display: grid; grid-template-columns: 118px 12px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sp-crm-tl:not(.sp-crm-tlfull) .sp-crm-ev { grid-template-columns: 118px 12px minmax(0, 1fr); }
.sp-crm-tl:not(.sp-crm-tlfull) .sp-crm-evref { display: none; }
.sp-crm-tlfull .sp-crm-ev { grid-template-columns: 128px 12px minmax(0, 1fr) auto; padding: 10px 0; }
.sp-crm-evwhen { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-crm-evdot { width: 7px; height: 7px; margin-top: 4px; background: var(--ink-3); }
.sp-crm-evdot.sp-pos { background: var(--pos); }
.sp-crm-evdot.sp-accent { background: var(--accent); }
.sp-crm-evdot.sp-amber { background: var(--amber); }
.sp-crm-evdot.sp-neg { background: var(--neg); }
.sp-crm-evtext { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.sp-crm-evmeta { font-size: 11px; color: var(--ink-3); }
.sp-crm-evref { font-size: 11px; color: var(--accent); }
.sp-crm-tlbar { display: flex; gap: 10px; align-items: flex-end; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-crm-facts { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.sp-crm-fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; font-size: 12px; word-break: break-word; }
.sp-crm-values { display: flex; gap: 24px; flex-wrap: wrap; padding: 10px 16px 14px; }
.sp-crm-val { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.sp-crm-big, .sp-crm-mid { font-size: var(--t-kpi-value); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-crm-mid { color: var(--ink-2); }
.sp-crm-payrow { display: grid; grid-template-columns: 100px minmax(0, 1fr) 120px 110px minmax(0, 1fr) 140px; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-crm-payids { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.sp-crm-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 90px; gap: 12px; align-items: center; width: 100%; padding: 9px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); font-family: inherit; }
.sp-crm-ticket:hover { background: var(--paper-2); }
.sp-crm-uuid { word-break: break-all; }

/* ---- prospect detail ---- */
.sp-crm-dupban { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--amber-soft); border: 1px solid var(--amber); font-size: 12.5px; color: var(--ink); flex-wrap: wrap; }
.sp-crm-dupban .sp-crm-link { font-size: 12.5px; }
.sp-crm-dealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 18px; }
.sp-crm-dealf { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sp-crm-notes { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; }
.sp-crm-ptname { display: flex; align-items: center; gap: 8px; }
.sp-crm-ptname strong { font-size: 14px; font-weight: 700; }
.sp-crm-sofar { display: flex; gap: 18px; font-size: 12.5px; }
.sp-crm-sofar strong { font-weight: 700; }

/* ---- modals MOD-030..035, MOD-020, Extend ---- */
.sp-crm-effect { font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); padding: 10px 12px; line-height: 1.5; }
.sp-crm-cfact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
.sp-crm-blocker { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--neg); font-size: 12.5px; line-height: 1.5; }
.sp-crm-blocker strong { color: var(--neg); }
.sp-crm-mpgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-crm-mpcell { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line); font-size: 12.5px; }
.sp-crm-result { display: grid; grid-template-columns: 140px 60px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-crm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-crm-chip { height: 24px; padding: 0 8px; background: var(--paper); border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--ink-2); cursor: pointer; font-family: inherit; }
.sp-crm-chip:hover { border-color: var(--line-strong); }
.sp-crm-chip.sp-on { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* ---- forms SCR-022 / SCR-032 / SCR-042, duplicates SCR-033 ---- */
.sp-crm-formban { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.sp-crm-formban.sp-neg { border-color: var(--neg); }
.sp-crm-formban.sp-neg > strong { color: var(--neg); }
.sp-crm-formban.sp-amber { background: var(--amber-soft); border-color: var(--amber); }
.sp-crm-formban.sp-pos { border-color: var(--pos); }
.sp-crm-bandot { width: 7px; height: 7px; background: var(--ink-3); flex-shrink: 0; }
.sp-crm-formban.sp-neg .sp-crm-bandot { background: var(--neg); }
.sp-crm-formban.sp-amber .sp-crm-bandot { background: var(--amber); }
.sp-crm-formban.sp-pos .sp-crm-bandot { background: var(--pos); }
.sp-crm-asnote { line-height: 1.5; }
.sp-crm-kv { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.sp-crm-kv .sp-lic-asrow { display: grid; grid-template-columns: 160px minmax(0, 1fr); font-size: 12.5px; }
.sp-crm-duptable { min-width: 640px; }
.sp-crm-tabtable { min-width: 760px; }
.sp-crm-what { margin: 0; padding: 12px 16px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 900px) {
  .sp-crm-grid, .sp-crm-grid14 { grid-template-columns: minmax(0, 1fr); }
  .sp-crm-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-crm-headmain { min-width: 0; }
}

/* ---- Sales ops SCR-060..064 and pricing SCR-080..084 (stage E7.4c). Source: inline styles of
 * the prototype sections "SALES OPS hub", "GENERIC FORM / WIZARD PAGE" (SCR-060..064, pricing
 * editors) and the pricing tables / calculator. Tokens only. ---- */
.sp-so { gap: 16px; }
.sp-so-titlebox { display: flex; flex-direction: column; gap: 4px; }
.sp-so-loading { padding: 22px 16px; font-size: 12.5px; color: var(--ink-3); }
.sp-crm-formban.sp-accent { background: var(--accent-soft); border-color: var(--accent); }
.sp-crm-formban.sp-accent .sp-crm-bandot { background: var(--accent); }
.sp-crm-formban.sp-pos > strong { color: var(--pos); }
.sp-so-pulse { border-radius: 50%; animation: spPulse 1.4s ease-in-out infinite; }
.sp-so-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.sp-so-actcard { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.sp-so-acttitle { font-size: 15px; font-weight: 700; }
.sp-so-acttext { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.sp-so-actpick { display: flex; flex-direction: column; gap: 4px; }
.sp-so-links { overflow-x: auto; }
.sp-so-linkctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-so-tablewrap { overflow-x: auto; overflow-y: hidden; }
.sp-so-linktable { width: 100%; min-width: 820px; }
.sp-so-linktable th { white-space: nowrap; }
.sp-so-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp-so-cust { font-size: 12.5px; font-weight: 600; }
.sp-so-sub { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 400; }
.sp-so-sechead { align-items: baseline; }
.sp-so-secsub { font-size: 11px; color: var(--ink-3); text-align: right; }
.sp-so-kv { display: flex; flex-direction: column; padding: 6px 16px 10px; }
.sp-so-kvrow { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.sp-so-kvv { word-break: break-word; font-variant-numeric: tabular-nums; }
.sp-so-strong { font-weight: 700; }
.sp-so-pos { color: var(--pos); font-weight: 600; }
.sp-so-ok { color: var(--pos); }
.sp-so-neg { color: var(--neg); }
.sp-so-table { width: 100%; min-width: 0; }
.sp-so-text { padding: 14px 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.sp-so-bigbox { display: flex; flex-direction: column; gap: 2px; }
.sp-so-big { font-size: var(--t-kpi-value); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-so-unit { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.sp-so-bigsub { font-size: 11.5px; color: var(--ink-3); }
.sp-so-asrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.sp-so-asv { font-variant-numeric: tabular-nums; text-align: right; }
.sp-so-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.sp-so-note.sp-so-neg { color: var(--neg); }
.sp-so-radios { display: flex; flex-direction: column; gap: 6px; }
.sp-so-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line-2); cursor: pointer; }
.sp-so-radio-on { border-color: var(--accent); }
.sp-so-radiotext { display: flex; flex-direction: column; gap: 2px; }
.sp-so-radiolabel { font-size: 12.5px; font-weight: 600; }
.sp-so-radiosub { font-size: 11px; color: var(--ink-3); }
.sp-so-checks { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.sp-so-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.sp-so-single { grid-template-columns: minmax(0, 1fr); }
.sp-so-linkbox { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.sp-so-linkrow { display: flex; gap: 8px; align-items: stretch; }
.sp-so-url { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 8px 10px; background: var(--paper-2); border: 1px solid var(--line-2); word-break: break-all; }
.sp-so-linknote { font-size: 11.5px; color: var(--ink-2); }
.sp-so-steps { background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; }
.sp-so-steps .wiz-stepper { margin-bottom: 0; }
.sp-so-chosen { background: var(--accent-soft); }
.sp-so-dot { color: var(--accent); width: 20px; }
.sp-so-prhead { align-items: flex-end; }
.sp-so-tabs { border-bottom: 1px solid var(--line); }
.sp-so-prban { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 14px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.5; }
.sp-so-prban > strong { white-space: nowrap; }
.sp-so-prban > span { flex: 1 1 300px; }
.sp-so-prban-neg { background: var(--paper); border-color: var(--neg); }
.sp-so-prban-neg > strong { color: var(--neg); }
.sp-so-prtable { width: 100%; min-width: 1100px; }
.sp-so-enttable { min-width: 960px; }
.sp-so-freetable { min-width: 900px; }
.sp-so-opts { max-width: 200px; white-space: normal; }
.sp-so-tiers { max-width: 260px; white-space: normal; }
.sp-so-upd { color: var(--ink-3); }
.sp-so-acts { white-space: nowrap; text-align: right; }
.sp-so-rowact { margin-left: 6px; height: 22px; padding: 0 7px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink); font-size: 12px; cursor: pointer; font-family: inherit; }
.sp-so-rowact:hover { border-color: var(--line-strong); }
.sp-so-foot { padding: 10px 12px; font-size: 11.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
.sp-so-calcform { background: var(--paper); border: 1px solid var(--line); padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px; }
.sp-so-calcfld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sp-so-calcwide { grid-column: 1 / -1; }
.sp-so-calcwide .sp-so-checks { flex-direction: row; gap: 14px; flex-wrap: wrap; }
.sp-so-calcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.sp-so-calccard { background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; }
.sp-so-calcrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sp-so-calcnote { margin-top: 8px; font-size: 11.5px; color: var(--amber); line-height: 1.5; }
.sp-so-nums { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--line-2); background: var(--paper); }
.sp-so-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 28px; align-items: center; }
.sp-so-chip { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 6px; border: 1px solid var(--line-2); background: var(--paper); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-so-chip strong { font-weight: 600; }
.sp-so-chip-free { border-color: var(--pos); background: color-mix(in oklch, var(--pos) 10%, var(--paper)); }
.sp-so-star { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--ink-4); font-size: 12px; }
.sp-so-chip-free .sp-so-star { color: var(--pos); }
.sp-so-chipx { background: none; border: 0; padding: 0 4px; cursor: pointer; color: var(--ink-3); font-size: 14px; }
.sp-so-numadd { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-so-numin { width: 120px; }
.sp-so-switch { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: 12.5px; cursor: pointer; }
.sp-so-rows { display: flex; flex-direction: column; border: 1px solid var(--line-2); background: var(--paper); }
.sp-so-rowhead, .sp-so-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1.4fr) 28px; gap: 8px; align-items: center; }
.sp-so-rowhead3, .sp-so-row3 { grid-template-columns: 24px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 28px; }
.sp-so-rowhead { padding: 6px 8px; background: var(--paper-2); border-bottom: 1px solid var(--line-2); }
.sp-so-rowsempty { padding: 12px; font-size: 12px; color: var(--ink-4); }
.sp-so-rowwrap { display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sp-so-rown { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sp-so-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-so-cell .sp-so-sub { display: inline; white-space: nowrap; font-size: 11.5px; }
.sp-so-rowx { height: 28px; width: 28px; background: var(--paper); border: 1px solid var(--line-2); color: var(--neg); cursor: pointer; font-size: 13px; }
.sp-so-rowadd { padding: 8px; }
.sp-so-banlink { margin-left: auto; font-size: 13px; }
/* Pricing editors: amounts right-aligned like the prototype, the name stays left. */
[data-screen=price-business] .sp-lic-fgrid input, [data-screen=price-enterprise] .sp-lic-fgrid input { text-align: right; }
[data-screen=price-business] [data-field=name] input, [data-screen=price-enterprise] [data-field=name] input { text-align: left; }
.sp-so-linkctl .an-mf-l { display: none; } /* the prototype shows the status filter without a caption */
.sp-so-prtable th { white-space: nowrap; }
.sp-so-prtable td { vertical-align: top; padding-top: 16px; padding-bottom: 16px; }
[data-screen=checkout] [data-field=unit_amount] input, [data-screen=checkout] [data-field=devices_limit] input { text-align: right; }
.sp-so-prtable td .sp-confirm { white-space: normal; } /* MOD-080 is mounted inside the row cell */
/* Content screens of wave W6 (stage E7.4d): SCR-100..103, SCR-110..112, MOD-100/101/110..112. */
.sp-ct { display: flex; flex-direction: column; gap: 14px; }
.sp-ct-tablecard { background: var(--paper); border: 1px solid var(--line); overflow-x: auto; }
.sp-ct-table { min-width: 900px; }
.sp-ct-latest, .sp-ct-badges, .sp-ct-titlerow, .sp-ct-pubstate, .sp-ct-mdtitle, .sp-ct-verpick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-ct-titlerow { gap: 10px; }
.sp-ct-ver { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 600; }
.sp-ct-date, .sp-ct-upd { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.sp-ct-date2 { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-ct-summary { font-size: 12px; color: var(--ink-2); max-width: 320px; white-space: normal; }
.sp-ct-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; }
.sp-ct-key { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 600; }
.sp-ct-neg { color: var(--neg); font-weight: 600; }
.sp-ct-amber { color: var(--amber); font-weight: 600; }
.sp-ct-act { text-align: right; }
.sp-ct-mini { background: none; border: 1px solid var(--line-2); padding: 3px 8px; font-size: 11px; cursor: pointer; color: var(--ink); }
.sp-ct-note { font-size: 11.5px; color: var(--ink-3); }
.sp-ct-prodcard { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px; display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.sp-ct-prodinfo { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 300px; }
.sp-ct-desc { font-size: 12.5px; color: var(--ink-2); }
.sp-ct-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-ct-controls { align-items: flex-end; }
.sp-ct-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-ct-headl { display: flex; flex-direction: column; gap: 4px; flex: 1 1 300px; }
.sp-ct-keytitle { font-family: ui-monospace, Menlo, monospace; }
.sp-ct-ro { padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.sp-ct-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 14px; border: 1px solid var(--line-2); background: var(--paper-2); font-size: 12.5px; line-height: 1.5; }
.sp-ct-banner.sp-amber { background: var(--amber-soft); border-color: var(--amber); }
.sp-ct-banner.sp-neg { background: var(--paper); border-color: var(--neg); }
.sp-ct-banner.sp-neg strong { color: var(--neg); }
.sp-ct-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 16px; align-items: start; }
.sp-ct-main, .sp-ct-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sp-ct-cols .sp-ct-side { position: sticky; top: 120px; }
.sp-ct-sec { background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.sp-ct-sechead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sp-ct-secnote { font-size: 11px; color: var(--ink-3); }
.sp-ct-secbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.sp-ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; padding: 16px; }
.sp-ct-wide { grid-column: 1 / -1; }
.sp-ct-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sp-ct-req { color: var(--neg); }
.sp-ct-hint { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.sp-ct-switch { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: 12.5px; cursor: pointer; }
.sp-ct-count { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 600; }
.sp-ct-mdbar { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.sp-ct-tool { height: 28px; min-width: 28px; padding: 0 7px; background: var(--paper); border: 1px solid var(--line-2); font-size: 12px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sp-ct-toolsep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.sp-ct-hidden { display: none; }
.sp-ct-mdstats { margin-left: auto; font-size: 11px; color: var(--ink-3); }
.sp-ct-md { display: grid; grid-template-columns: 1fr; min-height: 380px; }
.sp-ct-md-split { grid-template-columns: 1fr 1fr; }
.sp-ct-mdarea { width: 100%; min-height: 380px; box-sizing: border-box; border: 0; border-right: 1px solid var(--line); outline: 0; resize: vertical; padding: 14px 16px; background: var(--paper); color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.6; }
.sp-ct-mdprev { padding: 14px 20px; overflow: auto; max-height: 640px; min-width: 0; font-size: 13px; line-height: 1.6; }
.sp-ct-md-html blockquote { margin: 8px 0; padding: 4px 14px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.sp-ct-md-html code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); padding: 0 4px; }
.sp-ct-artcount { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.sp-ct-arts { display: flex; flex-direction: column; padding: 6px 16px 12px; }
.sp-ct-art { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sp-ct-artname { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.sp-ct-artname .sp-ct-mono { font-size: 10.5px; }
.sp-ct-artin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-ct-st { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sp-ct-dot { width: 7px; height: 7px; display: block; background: var(--ink-4); }
.sp-ct-st-off { color: var(--ink-4); } .sp-ct-st-off .sp-ct-dot { background: var(--line-2); }
.sp-ct-st-ok { color: var(--pos); } .sp-ct-st-ok .sp-ct-dot { background: var(--pos); }
.sp-ct-st-bad { color: var(--neg); } .sp-ct-st-bad .sp-ct-dot { background: var(--neg); }
.sp-ct-card { background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.sp-ct-meta { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; font-size: 12px; padding: 3px 0; border-top: 1px solid var(--line); }
.sp-ct-chk { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 12px; align-items: start; color: var(--ink-2); }
.sp-ct-mark { font-weight: 700; }
.sp-ct-ok .sp-ct-mark { color: var(--pos); } .sp-ct-warn .sp-ct-mark { color: var(--amber); } .sp-ct-fail .sp-ct-mark { color: var(--neg); }
.sp-ct-warn, .sp-ct-fail { color: var(--ink); }
.sp-ct-delete { background: none; border: 1px solid var(--line-2); padding: 8px 12px; font-size: 12px; color: var(--neg); cursor: pointer; text-align: left; }
.sp-ct-delete-inline { margin-right: auto; border: 0; padding: 0; }
.sp-ct-cpwarn { padding: 10px 12px; border: 1px solid var(--amber); background: var(--amber-soft); font-size: 12.5px; }
.sp-ct-cpnote { font-size: 12px; color: var(--ink-2); }
.sp-ct-json { margin: 0; padding: 12px 14px; background: var(--paper-2); border: 1px solid var(--line-2); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }
.sp-ct-cplinks { display: flex; flex-direction: column; border: 1px solid var(--line); }
.sp-ct-cplink { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-ct-cplink .sp-ct-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sp-ct-cpfoot { margin-right: auto; font-size: 12px; color: var(--ink-2); }
.sp-ct-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); background: var(--paper); border: 1px solid var(--line); }
.sp-ct-kpi { padding: 14px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sp-ct-kpi strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.sp-ct-kpi .sp-lic-muted { font-size: 11px; }
.sp-ct-chart { position: relative; height: 180px; margin: 0 6px; }
.sp-ct-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-ct-area { fill: color-mix(in oklch, var(--accent) 8%, transparent); stroke: none; }
.sp-ct-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sp-ct-pt { position: absolute; width: 7px; height: 7px; transform: translate(-50%, -50%); background: var(--paper); border: 2px solid var(--accent); }
.sp-ct-pt-last { width: 10px; height: 10px; background: var(--accent); }
.sp-ct-ymax, .sp-ct-ymin { position: absolute; left: 0; font-size: 10px; color: var(--ink-3); }
.sp-ct-ymax { top: 0; } .sp-ct-ymin { bottom: 0; }
.sp-ct-xlabels { display: flex; justify-content: space-between; margin: 6px 6px 0; font-size: 10px; color: var(--ink-3); }
.sp-ct-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.sp-ct-bars { display: flex; flex-direction: column; gap: 11px; padding: 14px 16px; }
.sp-ct-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 60px; gap: 12px; align-items: center; font-size: 12px; }
.sp-ct-track { height: 12px; background: var(--paper-3); position: relative; display: block; }
.sp-ct-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.sp-ct-fill-acc { background: var(--accent); }
.sp-ct-nodata { padding: 16px; font-size: 12px; color: var(--ink-3); }
.sp-ct-issues { background: var(--paper); border: 1px solid var(--amber); }
.sp-ct-issues-neg { border-color: var(--neg); }
.sp-ct-issues-neg .sp-ct-ititle { color: var(--neg); }
.sp-ct-ititle { font-size: 12.5px; }
.sp-ct-issue { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); background: var(--paper); text-align: left; cursor: pointer; color: var(--ink); }
.sp-ct-issue:hover { background: var(--paper-2); }
.sp-ct-idot { width: 6px; height: 6px; }
.sp-ct-idot-neg { background: var(--neg); } .sp-ct-idot-amb { background: var(--amber); }
.sp-ct-imsg { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.sp-ct-imsg .sp-ct-mono { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.sp-ct-fix { font-size: 11.5px; color: var(--accent); }
.sp-ct-tutcols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-ct-verlabel { font-size: 12px; color: var(--ink-3); }
.sp-ct-small { font-size: 11px; }
.sp-ct-section { border-bottom: 1px solid var(--line-2); }
.sp-ct-sechd { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 16px; background: var(--paper-2); }
.sp-ct-secname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-ct-arrows { display: flex; gap: 4px; }
.sp-ct-arrow { height: 28px; width: 28px; background: var(--paper); border: 1px solid var(--line-2); cursor: pointer; color: var(--ink); font-size: 12px; }
.sp-ct-arrow:disabled { opacity: .4; cursor: default; }
.sp-ct-x { color: var(--neg); }
.sp-ct-video { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.sp-ct-video-err { background: color-mix(in oklch, var(--neg) 6%, var(--paper)); }
.sp-ct-thumb { grid-column: 2; height: 36px; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; font-size: 12px; }
.sp-ct-vinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; background: none; border: 0; text-align: left; cursor: pointer; padding: 0; color: var(--ink); font-size: 11px; }
.sp-ct-vtitle { display: flex; gap: 6px; align-items: center; min-width: 0; font-size: 12.5px; }
.sp-ct-vtitle strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ct-addvideo { padding: 6px 16px 10px 48px; }
.sp-ct-edfoot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; }
.sp-ct-copyfrom { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); }
.sp-ct-chipbtn { height: 26px; padding: 0 8px; background: var(--paper); border: 1px solid var(--line-2); font-family: ui-monospace, Menlo, monospace; font-size: 12px; cursor: pointer; color: var(--ink); }
.sp-ct-pbox { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper-2); }
.sp-ct-phead { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); }
.sp-ct-pcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; background: var(--paper); border: 1px solid var(--line); }
.sp-ct-pthumb { height: 54px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; }
.sp-ct-pbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; color: var(--ink-2); }
.sp-ct-pbody strong { font-size: 12.5px; color: var(--ink); }
.sp-ct-docs { font-size: 11.5px; color: var(--accent); }
.sp-ct-why { font-size: 10.5px; color: var(--ink-4); }
.sp-ct-place { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11.5px; }
.sp-ct-pl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-ct-vform { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.sp-ct-lblrow { display: flex; justify-content: space-between; align-items: baseline; }
.sp-ct-two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-ct-vprev { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-ct-vthumb { height: 124px; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 22px; }
.sp-ct-vthumb .sp-ct-mono { font-size: 11px; }
.sp-ct-vcard { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); font-size: 11.5px; color: var(--ink-2); word-break: break-word; }
.sp-ct-vcard strong { font-size: 12.5px; color: var(--ink); }
.sp-ct-pltable { overflow-x: auto; border: 1px solid var(--line); }
.sp-ct-pltable table { min-width: 860px; }
.sp-ct-pltd { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sp-ct-plerr { padding: 4px 10px 8px; font-size: 11.5px; color: var(--neg); }
.sp-ct-plfoot { margin-right: auto; font-size: 12px; color: var(--neg); }
.sp-ct-hist { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; }
.sp-ct-hlist { border: 1px solid var(--line); }
.sp-ct-hrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sp-ct-hinfo { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.sp-ct-hinfo strong { font-size: 12.5px; }
.sp-ct-abs { display: flex; gap: 4px; }
.sp-ct-ab { width: 30px; height: 28px; border: 1px solid var(--line-2); background: var(--paper); cursor: pointer; font-size: 12px; color: var(--ink); }
.sp-ct-ab.sp-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-ct-hdiff { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sp-ct-hhead { display: flex; justify-content: space-between; font-size: 12px; }
.sp-ct-add { color: var(--pos); } .sp-ct-del { color: var(--neg); }
.sp-ct-dbox { border: 1px solid var(--line-2); max-height: 420px; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.55; }
.sp-ct-dl { display: grid; grid-template-columns: 22px minmax(0, 1fr); }
.sp-ct-dl-add { background: color-mix(in oklch, var(--pos) 12%, var(--paper)); }
.sp-ct-dl-del { background: color-mix(in oklch, var(--neg) 12%, var(--paper)); }
.sp-ct-dm { text-align: center; color: var(--ink-3); }
.sp-ct-dl-add .sp-ct-dm { color: var(--pos); } .sp-ct-dl-del .sp-ct-dm { color: var(--neg); }
.sp-ct-dt { white-space: pre; }
.sp-ct-radio { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.sp-ct-radio.sp-on { border-color: var(--ink); }
.sp-ct-ready { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; }
.sp-ct-okc { color: var(--pos); }
.sp-ct-ready-neg { border-color: var(--neg); }
.sp-ct-ready-neg strong { color: var(--neg); }
.sp-ct-jcols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-ct-jgroup, .sp-ct-jitem { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: 12.5px; }
.sp-ct-jitem { justify-content: space-between; }
.sp-ct-jgroup .sp-lic-muted, .sp-ct-jitem .sp-lic-muted { font-size: 11px; margin-left: 6px; }
.sp-ct-jfield { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 28px; gap: 10px; align-items: start; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.sp-ct-jlabel { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; padding-top: 6px; }
.sp-ct-jlabel .sp-lic-muted { font-size: 10.5px; }
.sp-ct-jcontrol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-ct-jadd { padding: 8px 16px; border-bottom: 1px solid var(--line); }
.sp-ct-jnew { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-ct-acard { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.sp-ct-acardh { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sp-ct-chip { font-family: ui-monospace, Menlo, monospace; font-size: 11px; border: 1px solid var(--line-2); padding: 0 4px; height: fit-content; }
.sp-ct-stored { background: var(--paper); border: 1px solid var(--line); }
.sp-ct-stored summary { padding: 12px 16px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.sp-ct-raw { border-top: 1px solid var(--line); }
.sp-ct-rawbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 11px; }
.sp-ct-rawbox { display: grid; grid-template-columns: 36px minmax(0, 1fr); border-top: 1px solid var(--line); }
.sp-ct-lines { margin: 0; padding: 10px 6px; text-align: right; background: var(--paper-2); color: var(--ink-4); font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.6; }
.sp-ct-rawarea { width: 100%; min-height: 280px; box-sizing: border-box; border: 0; outline: 0; resize: vertical; padding: 10px 12px; background: var(--paper); color: var(--ink); font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.6; white-space: pre; }
@media (max-width: 900px) { .sp-ct-cols, .sp-ct-tutcols, .sp-ct-jcols, .sp-ct-vform, .sp-ct-hist { grid-template-columns: 1fr; } .sp-ct-cols .sp-ct-side { position: static; } }

/* JSON editor nesting (data-depth; no inline styles under the CSP) */
.sp-ct-jfield[data-depth="0"], .sp-ct-jgroup[data-depth="0"], .sp-ct-jitem[data-depth="0"], .sp-ct-jadd[data-depth="0"] { padding-left: 16px; }
.sp-ct-jfield[data-depth="1"], .sp-ct-jgroup[data-depth="1"], .sp-ct-jitem[data-depth="1"], .sp-ct-jadd[data-depth="1"] { padding-left: 34px; }
.sp-ct-jfield[data-depth="2"], .sp-ct-jgroup[data-depth="2"], .sp-ct-jitem[data-depth="2"], .sp-ct-jadd[data-depth="2"] { padding-left: 52px; }
.sp-ct-jfield[data-depth="3"], .sp-ct-jgroup[data-depth="3"], .sp-ct-jitem[data-depth="3"], .sp-ct-jadd[data-depth="3"] { padding-left: 70px; }
.sp-ct-jfield[data-depth="4"], .sp-ct-jgroup[data-depth="4"], .sp-ct-jitem[data-depth="4"], .sp-ct-jadd[data-depth="4"] { padding-left: 88px; }
.sp-ct-jfield[data-depth="5"], .sp-ct-jgroup[data-depth="5"], .sp-ct-jitem[data-depth="5"], .sp-ct-jadd[data-depth="5"] { padding-left: 106px; }
.sp-ct-jfield[data-depth="6"], .sp-ct-jgroup[data-depth="6"], .sp-ct-jitem[data-depth="6"], .sp-ct-jadd[data-depth="6"] { padding-left: 124px; }
/* Release editor details matching the prototype (toolbar faces, preview headings, release table) */
.sp-ct-tool[data-tool="B"], .sp-ct-tool[data-tool="H2"], .sp-ct-tool[data-tool="H3"] { font-weight: 700; }
.sp-ct-tool[data-tool="I"] { font-style: italic; }
.sp-ct-md-html h2 { font-size: 16px; margin: 14px 0 8px; }
.sp-ct-md-html h3 { font-size: 14px; margin: 12px 0 6px; }
.sp-ct-releases { min-width: 980px; }
.sp-ct-table th { white-space: nowrap; }
.sp-ct-md-html blockquote { background: var(--paper-2); }
.sp-ct-md-html .md-image-ph { display: flex; align-items: center; justify-content: center; height: 62px; margin: 10px 0; border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 11.5px; }
.sp-ct-artcount.sp-ct-neg { color: var(--neg); }
.sp-ct-json { font-size: 10.5px; line-height: 1.7; }
.sp-ct-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-ct-base { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sp-ct-contents .sp-ct-upd { color: var(--ink); font-size: 12px; }
.sp-ct-verpick .an-mf-k { color: var(--ink-3); margin-right: 6px; flex: none; }
.sp-ct-verpick .an-mf-sum { font-weight: 700; }
.sp-ct-count.sp-ct-neg { color: var(--neg); }
.sp-ct-dgap { color: var(--ink-4); padding-left: 24px; }

/* ---- Stage E9b: tags (MOD-008), notes (MOD-007, Notes tab), pinned note ---- */
.sp-crm-tagadd { font-size: 10.5px; border: 1px dashed var(--line-strong); padding: 1px 6px; color: var(--ink-3); background: none; cursor: pointer; font-family: inherit; }
.sp-crm-tagadd:hover { color: var(--ink); border-color: var(--ink-3); }
.sp-crm-taglist { border: 1px solid var(--line); max-height: 260px; overflow: auto; }
.sp-crm-tagnew { display: flex; width: 100%; padding: 9px 12px; background: var(--paper-2); border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; font-size: 12.5px; color: var(--ink); font-family: inherit; gap: 0; }
.sp-crm-tagrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12.5px; }
.sp-crm-taglist .sp-crm-none { padding: 12px; font-size: 12px; }
.sp-crm-notecount { display: flex; justify-content: space-between; font-size: 11.5px; }
.sp-crm-notelist { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sp-crm-notehead { display: flex; justify-content: space-between; align-items: center; }
.sp-crm-note { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.sp-crm-notetext { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; }
.sp-crm-notemeta { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--ink-3); }
.sp-crm-pinned { font-size: 10px; font-weight: 700; border: 1px solid var(--ink-3); padding: 0 4px; color: var(--ink-2); }
.sp-crm-noteact { background: none; border: 0; color: var(--accent); font-size: 11px; cursor: pointer; font-family: inherit; }
.sp-crm-notemeta .sp-crm-noteact:first-of-type { margin-left: auto; }
.sp-crm-noteact.sp-neg { color: var(--neg); }
.sp-crm-pin { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.sp-crm-subanner { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--paper); border: 1px solid var(--neg); font-size: 12.5px; }
.sp-crm-subanner strong { color: var(--neg); }
.sp-crm-subanner a { margin-left: auto; color: var(--accent); }
.sp-crm-sutable td { vertical-align: middle; }
.sp-crm-supad { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-crm-supad .sp-crm-cardhead { padding: 0; border: 0; }
.sp-crm-supchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent); padding: 2px 8px; font-weight: 600; font-size: 11.5px; }
.sp-crm-supchip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sp-crm-surow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sp-crm-nob { padding: 0; border: 0; }
.sp-crm-contact { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.sp-crm-cmail { flex: 1 1 100%; overflow-wrap: anywhere; }
.sp-crm-contact > span:nth-child(3) { margin-right: auto; }
.sp-crm-kpival.sp-neg { color: var(--neg); }
/* Payments SCR-070 / SCR-071 (wave W9-3, handoff v3 v3/19-22). */
.sp-pay-manual, .sp-pay-manual:hover { background: color-mix(in oklch, var(--amber) 8%, var(--paper)); }
.sp-pay-table { min-width: 1260px; }
.sp-pay-lic { color: var(--accent); }
.sp-pay-lic:empty, .sp-pay-none { color: var(--ink-4); }
.sp-pay-flag { font-size: 12px; color: var(--ink-3); max-width: 220px; }
.sp-pay-amber { color: var(--amber); font-weight: 600; }
.sp-pay-act { margin-right: 10px; font-size: 12px; color: var(--ink); }
.sp-pay-total { padding: 10px 12px 0; font-size: 11.5px; color: var(--ink-3); }
.sp-pay-head { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); }
.sp-pay-headmain { display: flex; flex-direction: column; gap: 8px; flex: 1 1 340px; min-width: 0; }
.sp-pay-meta { font-size: 12.5px; color: var(--ink-2); }
.sp-pay-links { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-pay-link { font-size: 12px; color: var(--accent); border: 1px solid var(--line-2); padding: 4px 8px; text-decoration: none; }
.sp-pay-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 12px; }
.sp-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.sp-pay-card { background: var(--paper); border: 1px solid var(--line); }
.sp-pay-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sp-pay-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 12px; word-break: break-word; }
.sp-pay-kv > span:first-child { color: var(--ink-3); }
.sp-pay-table td { vertical-align: top; }
.sp-pay-table th:nth-child(5), .sp-pay-table td:nth-child(5) { text-align: right; }
/* Metrics SCR-120 / SCR-121 (W9-4, prototype `mt`) */
.sp-mt-tabs { background: var(--paper); border: 1px solid var(--line); padding: 0 16px; }
.sp-mt-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); }
.sp-mt-prod { display: flex; flex-direction: column; gap: 4px; }
.sp-mt-note { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--paper-2); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.sp-mt-note strong { color: var(--ink); }
.sp-mt-chart { padding: 16px 16px 10px; }
.sp-mt-trend { height: 150px; display: flex; align-items: flex-end; gap: 3px; }
.sp-mt-day { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.sp-mt-day:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.sp-mt-a { display: block; background: var(--ink); }
.sp-mt-b { display: block; background: var(--accent); }
.sp-mt-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--ink-3); }
.sp-mt-legend { display: flex; gap: 12px; }
.sp-mt-legend > span { display: flex; gap: 5px; align-items: center; }
.sp-mt-sw { width: 8px; height: 8px; background: var(--ink); display: inline-block; }
.sp-mt-sw-b { background: var(--accent); }
.sp-mt-bar { grid-template-columns: 120px minmax(0, 1fr) 110px; }
.sp-mt-bar .sp-crm-num { text-align: right; }
/* MOD-033 notify partner (W9-9, CD-100): disabled with the reason, the "Sends ..." line */
.sp-crm-notify { display: flex; flex-direction: column; gap: 4px; }
.sp-modal-check.sp-off { cursor: default; color: var(--ink-3); }
.sp-crm-notifynote { font-size: 11.5px; color: var(--ink-3); padding-left: 44px; line-height: 1.5; }
.sp-crm-sends { color: var(--ink-2); }
/* Versions of a price list (design D116, v3b/25-27, 71, 73). */
.sp-so-versions { display: flex; flex-direction: column; gap: 16px; }
.sp-so-vrow { cursor: pointer; }
.sp-so-vrow.sp-on td { background: var(--accent-soft); }
.sp-so-vact { color: var(--accent); }
.sp-so-vdiff td { background: var(--amber-soft); }
.sp-so-vold { color: var(--neg); }
.sp-so-vnew { color: var(--pos); font-weight: 600; }
.sp-so-vcmp { background: var(--paper); border: 1px solid var(--line); }
.sp-so-vcmp > .sp-lic-fsec { border: 0; }
.sp-so-vrestore { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sp-so-vrbox { display: flex; gap: 8px; align-items: stretch; }
.sp-so-vrbox > span { flex: 1; border: 1px solid var(--line-strong); padding: 8px 10px; font-size: 12px; display: flex; align-items: center; }
.sp-so-vnote { font-size: 11.5px; color: var(--ink-3); }
.sp-crm-state .sp-state-title { color: var(--ink); }