/* Olympus v2 production shell.
   The former legacy, theme, Command Center and compatibility layers are kept
   here in their original cascade order, followed by the finished workspace
   system. The global shell loads this file only. */

/* Consolidated source: legacy base primitives */
/* ============================================================
   OLYMPUS — Design Bible v1.1
   Marble, silver, deep navy. Calm, architectural, old money.
   Serif headings · Inter interface · IBM Plex Mono numbers.
   Silver is the metal — never gold, which reads cheap. Caution tones
   are clay and umber, not metallic yellow. No black. No neon.
   ============================================================ */
:root {
  --bg: #FAFAF8; --panel: #FFFFFF; --panel2: #F3F4F2; --line: #E3E6E9;
  --text: #101214; --muted: #5B616A; --accent: #246BFD; --navy: #061633;
  --green: #3F7D58; --red: #9E3F47; --amber: #8A5A2E;
  --silver: #8A9099; --silver-dim: #B4BAC1;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: 0 1px 2px rgba(16, 18, 20, .03), 0 6px 20px rgba(16, 18, 20, .03);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }

/* ---------- shell: left sidebar ---------- */
.shell { display: flex; min-height: 100vh; }
#sidebar { width: 226px; flex-shrink: 0; background: var(--panel);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); padding: 18px 12px 18px;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 20; }
#sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 16px;
  font-family: var(--serif); font-weight: 600; letter-spacing: 3px;
  color: var(--navy); font-size: 15px; white-space: nowrap; }
#sidebar .brand .olympus-mark { width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
#sidebar .brand em { display: block; font-style: normal; color: var(--muted);
  font-family: "Inter", sans-serif; font-weight: 400; letter-spacing: .4px; font-size: 11.5px; }
/* division switcher: click-to-open list (scales to many modules) */
.divswitch { position: relative; margin: 0 4px 16px; }
.divbtn { width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--panel2); color: var(--navy); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; }
.divbtn:hover { background: #EEEFEC; }
.divbtn .chev { font-style: normal; color: var(--muted); font-size: 12px; }
.divmenu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(16, 18, 20, .10); padding: 4px; z-index: 30; }
.divmenu.open { display: block; }
.divmenu a { display: block; padding: 9px 11px; border-radius: 6px; font-size: 14px;
  font-weight: 500; color: var(--text); text-decoration: none; }
.divmenu a:hover { background: var(--panel2); }
.divmenu a.on { background: #EDF1F5; color: var(--navy); font-weight: 600; }
.navgroup { margin-bottom: 16px; }
.grouplabel { display: block; padding: 0 10px 5px; color: var(--muted);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; }
.navgroup a { display: flex; align-items: center; gap: 9px; color: var(--text);
  text-decoration: none; padding: 8px 10px; border-radius: 6px; font-weight: 500;
  font-size: 14px; margin-bottom: 1px; }
.ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.navgroup a .ic { width: 16px; }
.navgroup a.on .ic, .navgroup a:hover .ic { color: var(--navy); }
.divmenu a { display: flex; align-items: center; gap: 9px; }
.divmenu a .ic, .divbtn .ic { width: 15px; height: 15px; }
.divmenu a.on .ic { color: var(--navy); }
.navgroup a.on { color: var(--navy); background: #EDF1F5; font-weight: 600; }
.navgroup a:hover { background: var(--panel2); }
.topbar { display: none; }
#backdrop { display: none; }

/* ---------- content ---------- */
main { flex: 1; min-width: 0; max-width: 1720px; margin: 0 auto;
  padding: 26px clamp(14px, 2.5vw, 40px) 64px; }
h1 { font-family: var(--serif); font-size: 30px; letter-spacing: .2px;
  margin: 10px 0 22px; font-weight: 600; }
h1 .sub { font-family: "Inter", sans-serif; }
/* Sentence case since 2026-09-04 (design cluster D3); column heads and
   labels followed on 2026-09-24 - no all-caps anywhere in the console. */
h2 { font-size: 17px; color: var(--text); letter-spacing: -.018em;
  margin-bottom: 14px; font-weight: 660; }
.sub { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
a { color: var(--accent); }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  padding: 8px 14px; border-radius: 999px; background: var(--panel); color: var(--muted);
  text-decoration: none; border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.chip.toggle { border-style: dashed; }
.range { display: flex; gap: 6px; align-items: center; color: var(--muted); }

input, select, button { background: var(--panel); border: 1px solid var(--line);
  color: var(--text); border-radius: 6px; padding: 8px 12px; font: inherit; }
input:focus, select:focus { outline: 2px solid #C9D6E6; border-color: var(--accent); }
button { cursor: pointer; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; border: none; }
button:hover { background: var(--btn-bg-h); }

/* ---------- KPI tiles: rows always fill full width ---------- */
.kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; box-shadow: var(--shadow); flex: 1 1 196px; min-width: 196px; }
.kpi span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600; margin-bottom: 2px; }
.kpi b { font-family: var(--mono); font-size: clamp(19px, 1.55vw, 24px); font-weight: 600;
  letter-spacing: -.5px; font-variant-numeric: tabular-nums; display: block; }
.kpi.primary b { color: var(--navy); }
.kpi.primaryneg b { color: var(--red); }
.kpi i { display: block; font-style: normal; font-size: 13px; margin-top: 4px; font-weight: 500; }
.kpi i.up { color: var(--green); } .kpi i.down { color: var(--red); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }

.findings li { margin: 7px 0 7px 18px; }

.trend { width: 100%; height: 150px; }
.trend polyline { stroke: var(--accent) !important; }
.trend circle { fill: var(--accent) !important; }
.trend-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }

.bar-row { display: grid;
  grid-template-columns: minmax(90px, 175px) minmax(70px, 1fr) 84px minmax(0, 168px);
  gap: 10px; align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; }
.bar-row:last-child { border-bottom: none; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.bar-track { background: var(--panel2); border-radius: 3px; height: 13px; }
.bar { background: var(--accent); height: 100%; border-radius: 3px; min-width: 2px; }
.bar-row.neg .bar { background: var(--red); }
.bar-val { text-align: right; font-weight: 600; font-family: var(--mono); font-size: 13.5px; }
.bar-meta { color: var(--muted); font-size: 12px; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px;
  color: var(--muted); font-weight: 500; }
.filters .chk { flex-direction: row; align-items: center; }

/* ---------- tables: the most important element ---------- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 650; text-transform: none;
  font-size: 12.5px; letter-spacing: 0; padding: 9px 10px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th.r, td.r { text-align: right; }
td.r { font-family: var(--mono); font-size: 13.5px; }
tbody tr:hover { background: #F5F6F4; cursor: pointer; }
tr.lossrow td { background: #F9F1F2; }
tr.lossrow:hover td { background: #F3E6E8; }
.neg { color: var(--red); font-weight: 600; } .pos { color: var(--green); font-weight: 600; }

.tag { background: #EDF1F5; color: var(--accent); font-size: 11.5px; padding: 2px 7px;
  border-radius: 4px; font-style: normal; font-weight: 600; }
.tag.dim { background: var(--panel2); color: var(--muted); }
/* Account-manager grants read as a different KIND of link from the accounts a
   person owns/introduced, so they get an outline rather than a fill. */
.tag.mgr { background: transparent; color: var(--muted);
  border: 1px dashed var(--line); font-weight: 500; }
/* Inactive rows (no calls / no money in the period) dim by ink, not opacity:
   the 50% opacity took every text in the row - the bold name, the money cell,
   the account tag link, the 'inactive in period' chip - to 1.9-3.7:1 in both
   themes (verify sweep, 2026-09-17). The chip's word carries the state; ink-4
   keeps the row quieter at 5.1:1 on white / 6.3:1 on the dark canvas. Links,
   chips and entity pills set their own colour and stay at full strength. */
tr.inactive td { color: var(--ov-ink-4); }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { background: var(--panel); border: 1px solid var(--line); padding: 5px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 500; }
.pill.on { border-color: var(--accent); color: var(--accent); background: #EDF1F5; }
.pill em { color: var(--muted); font-style: normal; }

.assign { display: flex; gap: 6px; }
.assign select, .assign input { font-size: 13px; }

.alert-red { border-left: 1px solid var(--red);
  background: color-mix(in oklab, var(--red) 7%, var(--panel)); }
.alert-amber { border-left: 1px solid var(--amber);
  background: color-mix(in oklab, var(--amber) 7%, var(--panel)); }
/* Confirmation counterpart to the two above. Same recipe, green channel. */
.alert-green { border-left: 1px solid var(--green);
  background: color-mix(in oklab, var(--green) 7%, var(--panel)); }

/* A <summary> styled as a button.
   Browsers draw their own disclosure triangle beside it, and next to a
   control that already looks like a button that reads as a rendering fault.
   Removing the marker makes the summary behave like the button it claims to
   be. Used by the campaign editor and the add-step form. */
summary.sf-btn { list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px; }
summary.sf-btn::-webkit-details-marker { display: none; }
summary.sf-btn::marker { content: ""; }
details[open] > summary.sf-btn { border-color: var(--accent); color: var(--accent); }

.loadmore { display: block; margin: 16px auto; padding: 10px 28px; }
.back { display: inline-block; margin-bottom: 4px; text-decoration: none; font-weight: 500; }
.kv td:first-child { color: var(--muted); width: 160px; }

.trendtable td, .trendtable th { white-space: nowrap; font-size: 13px; padding: 7px 8px; }
.trendtable td { font-family: var(--mono); }
.trendtable td:first-child { font-family: "Inter", sans-serif; }
.trendtable .sticky { position: sticky; left: 0; background: var(--panel); z-index: 1;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.trendtable tbody tr:hover .sticky { background: #F5F6F4; }
.trendtable .zerocell { color: #C6CBCF; }

/* ---------- icon rail: mid screens ---------- */
@media (min-width: 769px) and (max-width: 1080px) {
  #sidebar { width: 64px; padding: 14px 7px 20px; }
  #sidebar .brand { justify-content: center; padding: 2px 0 14px; }
  #sidebar .brand > span { display: none; }
  .divswitch { display: none; }
  .uinfo, .udock-out { display: none; }
  .userdock { justify-content: center; }
  .grouplabel { display: none; }
  .navgroup { margin-bottom: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .navgroup:first-of-type { border-top: none; padding-top: 0; }
  .navgroup a { justify-content: center; padding: 9px 0; }
  .navgroup a span { display: none; }
  .navgroup a .ic { width: 18px; height: 18px; }
}

/* ---------- tablet / small laptop ---------- */
@media (min-width: 701px) and (max-width: 1080px) {
  main { padding: 22px 16px 56px; }
  .bar-row { grid-template-columns: 140px 1fr 84px 130px; font-size: 13.5px; }
  .kpi b { font-size: 21px; }
}

/* ---------- large monitors ---------- */
@media (min-width: 1500px) {
  .grid2 { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
  .kpi b { font-size: 26px; }
}

/* ---------- mobile: off-canvas drawer ---------- */
@media (max-width: 768px) {
  .topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 15; }
  .topbar .brand { display: flex; align-items: center; gap: 8px;
    font-family: var(--serif); font-weight: 600; letter-spacing: 2.5px;
    color: var(--navy); font-size: 14px; white-space: nowrap; }
  .topbar .brand .olympus-mark { width: 22px; height: 22px; color: var(--accent); }
  .topbar button { background: none; border: 1px solid var(--line); color: var(--navy);
    font-size: 17px; padding: 4px 11px; border-radius: 6px; }
  #sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%);
    transition: transform .25s ease; box-shadow: 0 0 40px rgba(16, 18, 20, .16); }
  #sidebar.open { transform: translateX(0); }
  #backdrop.show { display: block; position: fixed; inset: 0;
    background: rgba(11, 24, 48, .32); z-index: 19; }
}
@media (max-width: 700px) {
  main { padding: 16px 12px 48px; }
  h1 { font-size: 23px; }
  .kpi { padding: 12px 13px; }
  .kpi b { font-size: 18px; }
  .toolbar { gap: 8px; }
  .chip { padding: 5px 11px; font-size: 13px; }
  .bar-row { grid-template-columns: 96px 1fr 76px; gap: 7px; font-size: 13px; }
  .bar-meta { display: none; }
  .filters { gap: 8px; }
  .filters input, .filters select { max-width: 130px; }
  .assign { flex-wrap: wrap; }
  .msg { max-width: 88%; }
  .weektrack { grid-template-columns: 1fr 1fr; }
  table { font-size: 13px; }
  th, td { padding: 6px 7px; }
}

.err { color: var(--red); font-size: 14px; }


/* ---------- account dock (sidebar bottom) ---------- */
.userdock { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 4px; }
.usercard { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px; text-decoration: none; }
.usercard:hover, .usercard.on { background: var(--panel2); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--navy);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0; font-family: var(--serif); }
.uinfo { min-width: 0; }
.uinfo b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uinfo em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.udock-out { display: flex; padding: 8px 7px; border-radius: 6px; color: var(--muted); }
.udock-out:hover { background: var(--panel2); color: var(--red); }

/* tutorial */
.tut h3 { font-family: var(--serif); font-size: 18px; margin: 0 0 6px; color: var(--navy);
  display: flex; align-items: center; gap: 9px; }
.tut p { margin: 0 0 8px; }
.tut ul { margin: 0 0 4px 18px; }
.tut li { margin: 4px 0; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--accent); }

/* ---- Biz Dev CRM: Salesforce-Lightning-style components ---- */
.sf-header { display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; margin-bottom:14px; box-shadow:var(--shadow); flex-wrap:wrap; }
.sf-header .obj { display:flex; align-items:center; gap:12px; }
.sf-header .objicon { width:38px; height:38px; border-radius:8px; background:#355C8C;
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; }
.sf-header .objicon.green { background:#3F7D58; }
.sf-header h1 { margin:0; font-size:19px; }
.sf-header .sub2 { font-size:13px; color:var(--muted); margin-top:2px; }
.sf-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sf-btn { border:1px solid var(--line); background:var(--panel); border-radius:6px;
  padding:7px 14px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--text);
  text-decoration:none; display:inline-block; }
.sf-btn:hover { background:#EDF1F5; }
.sf-btn.primary { background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }
.sf-btn.primary:hover { background:var(--btn-bg-h); }
@media (max-width: 1000px) { .sf-grid { grid-template-columns:1fr; } }
.sf-fields { display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; }
.sf-fields label { display:block; font-size:12.5px; color:var(--muted); padding:7px 0 2px;
  border-bottom:1px solid var(--line); padding-bottom:8px; }
/* textarea was missing here, so every multi-line field in the app fell back
   to the browser default - roughly 20 columns of monospace sitting next to
   full-width inputs. It reads as a broken layout rather than a style choice. */
.sf-fields label input, .sf-fields label select,
.sf-fields label textarea { width:100%; margin-top:3px; }
.sf-fields label textarea { font:inherit; font-size:14px; line-height:1.55;
  resize:vertical; min-height:78px; display:block; }

/* ============================================================
   POLISH PACK v1 — dark mode, motion, severity, sparklines
   ============================================================ */

/* ---------- dark theme ---------- */
html.dark {
  --bg: #0E1116; --panel: #151A22; --panel2: #1C232E; --line: #29323F;
  --text: #E8EAED; --muted: #98A2AE; --accent: #8FB4E3; --navy: #D7E3F4;
  --green: #6FBF8F; --red: #E08A93; --amber: #C9906B;
  --silver: #C6CCD4; --silver-dim: #8B95A2;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 20px rgba(0,0,0,.25);
}
html.dark body { color-scheme: dark; }
html.dark button { background: #355C8C; }
html.dark button:hover { background: #416EA6; }
html.dark .chip.on { background: #355C8C; border-color: #355C8C; }
html.dark .divbtn:hover { background: #232B37; }
html.dark .divmenu a.on, html.dark .navgroup a.on,
html.dark .sf-btn:hover, html.dark .sf-objtabs a:hover,
html.dark .sf-objtabs a.on { background: #223048; }
html.dark .tag.mgr { background: transparent; }
html.dark tbody tr:hover { background: #1A212B; }
html.dark tr.lossrow td { background: #2A1B1F; }
html.dark tr.lossrow:hover td { background: #342226; }
html.dark .trendtable tbody tr:hover .sticky { background: #1A212B; }
html.dark .trendtable .zerocell { color: #4A5462; }
html.dark input:focus, html.dark select:focus { outline-color: #35507a; }
html.dark .topbar { background: rgba(14, 17, 22, .92); }
html.dark .avatar { color: #0E1116; }
html.dark .trend line { stroke: #29323F; }
html.dark .trend text { fill: #6B7684; }
/* theme toggle in the user dock */
.themebtn { display: flex; padding: 8px 7px; border-radius: 6px; color: var(--muted);
  background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1; }
.themebtn:hover { background: var(--panel2); color: var(--navy); }

/* ---------- loss severity: red is earned, not default ---------- */
.loss-noise { color: var(--muted) !important; font-weight: 500 !important; }
.loss-minor { color: var(--amber) !important; font-weight: 600; }
.bar-row.minor .bar { background: var(--amber); }

/* ---------- motion ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes growBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes softPulse { 0% { box-shadow: inset 0 0 0 0 rgba(158,63,71,0); }
  40% { box-shadow: inset 3px 0 0 0 rgba(158,63,71,.55); } 100% { box-shadow: inset 3px 0 0 0 rgba(158,63,71,0); } }
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }

/* No page-level reveal (2026-08-22, measured): body used to animate
   fadeUp with fill-mode both, and fadeUp starts at opacity 0 - so every
   navigation held the whole page invisible for the full duration.
   Measured on real navigations: 214ms to readable content with it,
   31ms without; dropping only 'both' changed nothing (211ms) because
   the keyframe itself starts transparent. Cross-page continuity is the
   view-transition layer's job and costs ~0ms - one mechanism, not two.
   HOUSE.md: motion sits BEHIND content, never gates it. */
/* removed: body { animation: fadeUp .22s ease-out both; } */
.anim .card, .anim .kpi { animation: fadeUp .5s cubic-bezier(.22,.9,.36,1) both;
  animation-delay: var(--d, 0ms); }
.anim .bar { transform-origin: left center; animation: growBar .7s cubic-bezier(.25,.9,.3,1) both;
  animation-delay: var(--d, 0ms); }
.anim tr.lossrow.real td:first-child { animation: softPulse 1.6s ease-out 1; }
.card { transition: transform .16s ease, box-shadow .16s ease; }
.card:hover { transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(16,18,20,.05), 0 12px 32px rgba(16,18,20,.08); }
html.dark .card:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.35); }
button, .chip, .sf-btn { transition: background .14s ease, border-color .14s ease,
  color .14s ease, transform .1s ease; }
button:active, .sf-btn:active { transform: scale(.97); }

/* sparklines inside KPI tiles */
.spark { display: block; width: 100%; height: 26px; margin-top: 6px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.anim .spark polyline { stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: sparkDraw .9s ease-out .25s both; }
.spark .fill { fill: var(--accent); opacity: .08; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  body, .anim .card, .anim .kpi, .anim .bar, .anim .spark polyline,
  .anim tr.lossrow.real td:first-child, .ov-src-price { animation: none !important; }
  .card, .kpi, button, .chip, .sf-btn { transition: none !important; }
}

/* ---------- polish pack v2: palette, badges, tidy KPIs, empty states ---------- */
.navbadge { margin-left: auto; background: var(--accent); color: #fff; font-size: 11.5px;
  font-weight: 700; border-radius: 999px; padding: 1px 7px; line-height: 1.5; font-style: normal; }
.navbadge.red { background: var(--red); }
html.dark .navbadge { color: #0E1116; }

.kpi { max-width: 260px; }

.emptystate td { text-align: center !important; color: var(--muted); font-style: italic;
  padding: 22px 10px !important; font-family: "Inter", sans-serif !important; }
tbody tr.emptystate:hover { background: none; cursor: default; }

.pal[hidden] { display: none !important; }
.pal { position: fixed; inset: 0; z-index: 90; background: rgba(11, 24, 48, .35);
  backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh; }
.pal-box { width: min(560px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--ov-radius-md); box-shadow: 0 24px 80px rgba(0, 0, 0, .35); overflow: hidden;
  animation: fadeUp .18s ease-out both; }
.pal-box input { width: 100%; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 15px 18px; font-size: 15px; background: var(--panel); }
.pal-box input:focus { outline: none; }
.pal-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 7px; font-size: 14px; cursor: pointer; }
.pal-item em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .8px; width: 88px; flex-shrink: 0; }
.pal-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item small { color: var(--muted); font-family: var(--mono); font-size: 12px; flex-shrink: 0; }
.pal-group { padding: 10px 12px 4px; color: var(--muted); font-size: 11.5px; font-weight: 700;
  letter-spacing: .02em; }
.pal-group:first-child { padding-top: 4px; }
.pal-empty { padding: 14px 12px; color: var(--muted); font-size: 13.5px; }
.pal-item.sel, .pal-item:hover { background: var(--panel2); }
.pal-item.sel em { color: var(--accent); }
.pal-hint { padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted);
  font-size: 12px; }
.pal-hint kbd { background: var(--panel2); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-family: var(--mono); font-size: 11.5px; }

.bar-name a { color: inherit; text-decoration: none; }
.bar-name a:hover { color: var(--accent); text-decoration: underline; }

/* The hidden attribute must always win. Several layout rules set display on
   elements that forms also toggle with `hidden`; without this, "hidden"
   fields still render and leave holes (the broken buyer form, 2026-08-06). */
[hidden] { display: none !important; }

/* Field fill-rate bars on the Lead Distribution campaign overview. */
.fillbar { position: relative; background: var(--panel2, rgba(127,127,127,.12));
  border-radius: 4px; height: 8px; min-width: 90px; overflow: hidden; }
.fillbar > i { position: absolute; inset: 0 auto 0 0; background: var(--accent);
  border-radius: 4px; }

/* Consolidated source: console/static/command.css */
/* Olympus Command Center — the category standard, played straight.
   Craft bar: Stripe (money legibility), Bloomberg (density), Mercury (calm).
   No metaphor, no ornament. Detail only where the hand lands. */

/* The figure face is self-hosted; declared here so this page carries its own
   dependency without altering how any other page loads type. */
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.cc {
  --bg:#FCFCFB; --panel:#FFFFFF; --sunken:#F4F5F3;
  --ink:#14171A; --dim:#5A6169; --faint:#6A717B;
  --line:#E4E6E3; --line-strong:#CFD3CE;
  --action:#1F5C46; --action-soft:rgba(31,92,70,.09);
  --pos:#1F6B4A; --neg:#A3383F; --warn:#8A5A2E; --focus:#3E6E90;
  --fig: "Geist Mono", ui-monospace, monospace;
  --ui: "Inter", ui-sans-serif, system-ui, sans-serif;
}
html.dark .cc {
  --bg:#0F1113; --panel:#16191C; --sunken:#0B0D0F;
  --ink:#ECEEF0; --dim:#9BA3AB; --faint:#8A929B;
  --line:#242A2F; --line-strong:#39424A;
  --action:#5FA383; --action-soft:rgba(95,163,131,.14);
  --pos:#6FBF8F; --neg:#E08A93; --warn:#C79A6B; --focus:#7FA8CF;
}
.cc { background:var(--bg); color:var(--ink); font-family:var(--ui); }

/* type scale and figures */
/* text-transform is reset explicitly: the global stylesheet upper-cases section
   headings, and all-caps-tracked labels are a luxury tic the brief bans. */
.cc-h { font-size:14px; font-weight:600; color:var(--dim); margin:0 0 14px;
  letter-spacing:0; text-transform:none; }
.cc-fig { font-family:var(--fig); font-variant-numeric:tabular-nums;
  font-weight:400; letter-spacing:-.015em; color:var(--ink); }
.cc-fig-lead { font-size:clamp(34px,4.4vw,54px); line-height:1; display:block; }
.cc-lab { font-size:13.5px; color:var(--dim); margin:0 0 4px; }
.cc-delta { font-family:var(--fig); font-size:13.5px; }
.cc-delta.up { color:var(--pos); } .cc-delta.dn { color:var(--neg); }

/* sections, grid, table, alerts */
.cc-sec { padding:0 0 26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.cc-sec:last-child { border-bottom:none; }
.cc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:22px 28px; }
.cc-tbl { width:100%; border-collapse:collapse; }
.cc-tbl th { font-size:12.5px; font-weight:600; color:var(--faint); text-align:left;
  padding:0 10px 8px 0; border-bottom:1px solid var(--line); }
.cc-tbl td { padding:9px 10px 9px 0; border-bottom:1px solid var(--line);
  font-size:14px; }
.cc-tbl td.n { font-family:var(--fig); font-variant-numeric:tabular-nums; text-align:right; }
.cc-tbl tbody tr:hover { background:var(--sunken); }
.cc-alert { display:flex; align-items:baseline; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line); }
.cc-alert i { width:6px; height:6px; border-radius:50%; flex:0 0 auto;
  transform:translateY(-1px); }
.cc-sev-high i { background:var(--neg); }
.cc-sev-med  i { background:var(--warn); }
.cc-sev-low  i { background:var(--faint); }
.cc-alert b { font-weight:500; }
.cc-alert span { color:var(--dim); font-size:14px; }
.cc-alert em { margin-left:auto; font-style:normal; font-family:var(--fig);
  font-size:13.5px; color:var(--faint); white-space:nowrap; }

/* page frame, nav, money block, trend figure */
.cc { max-width:1120px; margin:0 auto; padding:6px 0 70px; }
.cc-head h1 { font-family:var(--ui); font-size:24px; font-weight:600;
  letter-spacing:-.02em; margin:0 0 4px; }
.cc-nav { display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding:18px 0; margin-bottom:24px; border-bottom:1px solid var(--line); }
.cc-chip { font-size:14px; padding:5px 12px; border-radius:6px; text-decoration:none;
  color:var(--dim); border:1px solid transparent; }
.cc-chip:hover { background:var(--action-soft); color:var(--action); }
.cc-chip.on { background:var(--action-soft); color:var(--action);
  border-color:var(--line-strong); font-weight:500; }
.cc-range { display:flex; align-items:center; gap:6px; margin-left:auto;
  font-family:var(--fig); font-size:13px; color:var(--faint); }
.cc-range input[type=date] { background:var(--panel); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:6px; padding:5px 8px;
  font-family:var(--fig); font-size:13px; }
html.dark .cc-range input[type=date] { color-scheme:dark; }
/* specificity raised deliberately: the global stylesheet re-colours buttons in
   dark mode, and the action colour is a token of this design system */
.cc .cc-range button { background:var(--action); color:#fff; border:1px solid var(--action);
  border-radius:6px; padding:6px 13px; font-size:13.5px; cursor:pointer; font-weight:500; }
/* the dark action colour is a light green: a filled button there takes the
   ground as its ink, not white — measured 6.35:1 rather than 2.98:1 */
html.dark .cc .cc-range button { color:var(--bg); }
.cc-money { display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(24px,5vw,64px); }
.cc-money > div:last-child { flex:1; min-width:280px; }
.cc-trend { margin:26px 0 0; }
.cc-trend svg { width:100%; height:190px; display:block; margin-top:8px; }
.cc-trend polyline { fill:none; stroke:var(--action); stroke-width:2;
  vector-effect:non-scaling-stroke; }
.cc-trend .cc-zero { stroke:var(--line-strong); stroke-width:1;
  stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
:where(.cc) a:focus-visible, :where(.cc) button:focus-visible,
:where(.cc) input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media (max-width:760px) {
  .cc-money { display:block; }
  .cc-fig-lead { margin-bottom:20px; }
  .cc-grid { grid-template-columns:1fr 1fr; gap:16px 18px; }
  .cc-range { margin-left:0; width:100%; padding-top:8px; }
  .cc-alert { flex-wrap:wrap; }
  .cc-alert em { margin-left:0; width:100%; }
}

/* ============================================================
   Density pass: every figure carries its movement, the chart is
   an instrument, and "what moved" answers the trends question.
   ============================================================ */

/* deltas — direction is colour + arrow, never colour alone */
.cc-delta { font-family:var(--fig); font-size:13px; margin:3px 0 0; white-space:nowrap; }
.cc-delta.up { color:var(--pos); }
.cc-delta.dn { color:var(--neg); }
.cc-delta.flat { color:var(--faint); }
.cc-pct { opacity:.72; }
.cc-delta .cc-lab { display:inline; margin-left:6px; font-size:12.5px; }

/* sparklines sit under their figure, never louder than it */
.cc-spark { width:88px; height:22px; display:block; margin-top:7px; overflow:visible; }
.cc-spark polyline { fill:none; stroke:var(--line-strong); stroke-width:1.25;
  vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.cc-spark-lead { width:150px; height:30px; margin-top:12px; }
.cc-spark-lead polyline { stroke:var(--action); stroke-width:1.5; }

/* financials: lead figure beside a right-aligned account ledger */
.cc-money { display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(28px,5vw,72px); }
.cc-lead { flex:0 0 auto; }
.cc-acct { flex:1 1 340px; min-width:300px; margin:2px 0 0; }
.cc-acct-row { display:grid; grid-template-columns:1fr auto auto;
  align-items:baseline; gap:0 22px; padding:7px 0;
  border-bottom:1px solid var(--line); }
.cc-acct-row dt { font-size:14px; color:var(--dim); }
.cc-acct-row dd { margin:0; text-align:right; }
.cc-acct-row dd.cc-fig { font-size:15px; min-width:104px; }
.cc-acct-row dd.cc-delta { margin-top:0; min-width:112px; }
.cc-acct-sum { border-bottom:none; border-top:1px solid var(--line-strong);
  margin-top:3px; padding-top:9px; }
.cc-acct-sum dt { color:var(--ink); font-weight:500; }

/* indicator cells */
.cc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:20px 26px; }
.cc-cell { min-width:0; }
.cc-cell .cc-fig { font-size:22px; }

/* trends: chart and movers share the row */
.cc-trends { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:clamp(22px,3vw,40px); margin-top:26px; align-items:start; }
.cc-chart { margin:0; }
.cc-chart figcaption { display:flex; align-items:center; gap:10px; }
.cc-ghost-key { font-size:12px; color:var(--faint); }
.cc-ghost-key::before { content:""; display:inline-block; width:14px; height:0;
  border-top:1px dashed var(--line-strong); margin-right:5px; transform:translateY(-3px); }
.cc-chart-wrap { position:relative; margin-top:8px; }
.cc-chart svg { width:100%; height:150px; display:block; }
.cc-line { fill:none; stroke:var(--action); stroke-width:1.75;
  vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.cc-area { fill:var(--action-soft); stroke:none; }
.cc-ghost { fill:none; stroke:var(--line-strong); stroke-width:1;
  stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.cc-zero { stroke:var(--line-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
.cc-mark { stroke:var(--bg); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.cc-best { fill:var(--pos); } .cc-worst { fill:var(--neg); }
.cc-cursor { stroke:var(--line-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
.cc-dot { fill:var(--action); stroke:var(--bg); stroke-width:1.5;
  vector-effect:non-scaling-stroke; }
.cc-read { position:absolute; top:-6px; pointer-events:none; z-index:2;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:6px;
  padding:7px 10px; font-family:var(--fig); font-size:12.5px; line-height:1.5;
  box-shadow:0 4px 14px rgba(0,0,0,.10); white-space:nowrap; }
html.dark .cc-read { box-shadow:0 4px 16px rgba(0,0,0,.5); }
.cc-read b { display:block; color:var(--ink); font-weight:500; margin-bottom:2px; }
.cc-read span { display:block; color:var(--dim); }

/* what moved */
.cc-movers .cc-tbl { margin-top:8px; }
.cc-movers td a { color:var(--ink); text-decoration:none; }
.cc-movers tbody tr:hover td a { color:var(--action); }
.cc-movers .cc-delta { margin:0; }

@media (max-width:980px) { .cc-trends { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .cc-money { display:block; }
  .cc-lead { margin-bottom:22px; }
  .cc-acct { min-width:0; }
  .cc-acct-row { grid-template-columns:1fr auto; gap:0 14px; }
  .cc-acct-row dd.cc-delta { grid-column:2; min-width:0; }
  .cc-grid { grid-template-columns:1fr 1fr; }
  .cc-read { display:none; }
}

/* Consolidated source: console/static/themes/fonts.css */
/* Olympus preview — self-hosted variable faces.
   No external host is contacted: every file is served from /static/fonts.
   Family names deliberately match the ones style.css already asks for
   ("Inter"), so the existing stylesheet resolves to the local face. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Consolidated source: console/static/themes/_structure.css */
/* ============================================================
   Olympus preview — STRUCTURE LAYER
   Shared by all three treatments. Holds only typography, geometry,
   motion discipline and the plumbing that turns style.css's hardcoded
   hexes into tokens. Every colour value lives in the treatment file.

   Loaded after style.css, before the treatment file.
   ============================================================ */

:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ol-ease: cubic-bezier(.2, .8, .2, 1);
  --ol-micro: 120ms;
  --ol-standard: 180ms;
  --ol-overlay: 240ms;
  --ol-reveal: 300ms;
  --ol-r-sharp: 2px;
  --ol-r-control: 10px;
  --ol-r-panel: 18px;
}

/* ---------- typography: editorial at the threshold, invisible at work ---------- */
body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv05" 1, "ss03" 1;
  letter-spacing: -.005em;
}

main h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 34;
  font-weight: 600;
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: -.014em;
  color: var(--navy);
}
main h1 .sub { font-family: "Inter", sans-serif; letter-spacing: 0; }

/* Section labels: sentence case. All-caps tracking is a luxury tic, and the
   brief bans it outright. Same height, same density, less costume. */
h2 {
  font-size: 13.5px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 12px;
}
.kpi span, th, .grouplabel {
  text-transform: none;
  letter-spacing: .002em;
}
.kpi span { font-size: 12.5px; font-weight: 550; }
th { font-size: 12.5px; font-weight: 600; }
.grouplabel { font-size: 12px; font-weight: 650; }

/* Exact values are mono, everything read or compared is Inter. */
.kpi b { font-variation-settings: "wght" 560; letter-spacing: -.02em; }
.bar-val, td.r { font-variant-numeric: tabular-nums; }

/* ---------- geometry: 6 controls / 10 panels / 2 sharp ---------- */
.card, .kpi, .sf-header, .sf-objtabs, .divmenu { border-radius: var(--ol-r-panel); }
input, select, button, .divbtn, .sf-btn, .navgroup a, .divmenu a { border-radius: var(--ol-r-control); }
.bar-track, .bar, .tag, .spark { border-radius: var(--ol-r-sharp); }
.bar-track { height: 12px; }

/* Fifty ranked bars are material, not interaction. They hold the accent's
   hue at a lower value so the interaction colour keeps its ~8% share. */
.bar { background: var(--bar); }

/* Surfaces separate by value and a hairline, not by shadow theatre. */
.card, .kpi, .sf-header, .sf-objtabs { box-shadow: none; }
.card, .kpi { transition: border-color var(--ol-micro) var(--ol-ease),
                          background-color var(--ol-micro) var(--ol-ease); }

/* The horizon: one decisive rule under the page title. */
.toolbar:has(h1) {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

/* An inline 3px accent bar is decoration; a 1px seam is structure. */
.card[style*="border-left"] { border-left-width: 1px !important; }

/* Active nav: a 2px rule and a quieter fill, never a pill. */
.navgroup a.on {
  box-shadow: inset 2px 0 0 var(--accent);
  border-radius: var(--ol-r-sharp) var(--ol-r-control) var(--ol-r-control) var(--ol-r-sharp);
}

/* ---------- token plumbing for style.css's hardcoded colours ---------- */
input, select, textarea { border-color: var(--line-strong); }
input:focus, select:focus, html.dark input:focus, html.dark select:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

button, html.dark button { background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); }
button:hover, html.dark button:hover { background: var(--btn-bg-h); border-color: var(--btn-bg-h); }
.chip.on, html.dark .chip.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.avatar, html.dark .avatar { background: var(--btn-bg); color: var(--btn-fg); }
.navbadge, html.dark .navbadge { background: var(--accent); color: var(--bg); }
.navbadge.red { background: var(--red); }

.divmenu a.on, .navgroup a.on,
.sf-btn:hover, .sf-objtabs a:hover, .sf-objtabs a.on,
html.dark .divmenu a.on, html.dark .navgroup a.on,
html.dark .sf-btn:hover, html.dark .sf-objtabs a:hover,
html.dark .sf-objtabs a.on { background: var(--sel); }
/* A tag is a fact, not a selection (LEADS-18 / CALLS-18, 2026-09-24): the
   selection tint read as a navy plane in dark. Graphite fill, ink, hairline;
   a mapped/picked .pill.on keeps a blue hairline and label, no blue plane. */
/* (0,1,0) on purpose: every status tag (.ov-dist .tag, .tag.pos/.warn...)
   still outranks it; the old html.dark .tag (0,2,1) navy is gone. */
.tag { background: var(--ov-sunken, var(--panel2)); }
.tag:not(.ov-ai-hint) { box-shadow: inset 0 0 0 1px var(--ov-line, var(--line)); }
.tag { color: var(--accent); }
.pill.on, html.dark .pill.on { background: var(--ov-raised, var(--panel));
  border-color: var(--ov-accent, var(--accent)); color: var(--ov-accent-ink, var(--accent)); }
.divbtn:hover, html.dark .divbtn:hover { background: var(--panel2); }
.usercard:hover, .usercard.on, .navgroup a:hover, .divmenu a:hover,
.themebtn:hover, .udock-out:hover { background: var(--panel2); }

tbody tr:hover, html.dark tbody tr:hover,
.trendtable tbody tr:hover .sticky, html.dark .trendtable tbody tr:hover .sticky {
  background: var(--rowhover);
}
tr.lossrow td, html.dark tr.lossrow td { background: var(--lossbg); }
tr.lossrow:hover td, html.dark tr.lossrow:hover td { background: var(--lossbg-h); }

.pal { background: var(--scrim); }
#backdrop.show { background: var(--scrim); }
.topbar, html.dark .topbar { background: var(--panel); }

/* Chart: an instrument, not a painting. Grid recedes, the line carries. */
.trend line, html.dark .trend line { stroke: var(--line); }
.trend line[stroke-dasharray] { stroke: var(--red); }
.trend text, html.dark .trend text { fill: var(--muted); }
.trend polyline { stroke: var(--accent) !important; stroke-width: 2 !important; }
.trend circle { fill: var(--accent) !important; }
.spark .fill { opacity: .07; }

/* ---------- motion: the note in front of the effects ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes olFade { from { opacity: 0; } to { opacity: 1; } }

/* removed: body { animation: fadeUp var(--ol-overlay) var(--ol-ease) both; } - see the note above */

/* One authored moment: the instrument row settles in. Everything else
   simply arrives — no second entrance competing with the first. */
.anim .kpi { animation: fadeUp var(--ol-reveal) var(--ol-ease) both; }
.anim .card { animation: olFade var(--ol-overlay) var(--ol-ease) both; animation-delay: 0ms; }
.anim .bar { animation-duration: 360ms; animation-timing-function: var(--ol-ease); }
.anim .spark polyline { animation-duration: 360ms; animation-timing-function: var(--ol-ease); }
.anim tr.lossrow.real td:first-child { animation-duration: 420ms; }

/* No lift, no float. Weight stays planted; the edge acknowledges you. */
.card:hover, .kpi:hover, html.dark .card:hover, html.dark .kpi:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line-strong);
}
button, .chip, .sf-btn {
  transition: background-color var(--ol-micro) var(--ol-ease),
              border-color var(--ol-micro) var(--ol-ease),
              color var(--ol-micro) var(--ol-ease);
}
button:active, .sf-btn:active { transform: none; background: var(--btn-bg-h); }

@media (prefers-reduced-motion: reduce) {
  body, .anim .card, .anim .kpi, .anim .bar, .anim .spark polyline,
  .anim tr.lossrow.real td:first-child { animation: none !important; }
  .card, .kpi, button, .chip, .sf-btn { transition: none !important; }
}

/* ============================================================
   SOUL LAYER — presence, material, elevation.
   The restraint above kept it clean; this makes it Olympus:
   a command post above the clouds, not a page of numbers.
   Colours derive from each treatment's own tokens, so all three
   light up in their own key.
   ============================================================ */

/* ---- Command header: cinematic Olympus, EST-time sky, glowing stars ---- */
.ol-hero {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--ol-r-panel);
  overflow: hidden;
  height: clamp(240px, 30vw, 380px);
  margin-bottom: 22px;
  isolation: isolate;
  background-color: var(--bg);
  animation: olFade var(--ol-reveal) var(--ol-ease) both;
}
/* the render sits on an inner layer so it can drift (Ken Burns) without
   moving the border or the text */
.ol-hero-bg {
  position: absolute; inset: -4%; z-index: 0;
  background-size: cover; background-position: center 34%;
  transform-origin: 60% 40%;
  animation: olKen 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes olKen {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.4%, 0); }
}
.ol-hero[data-sky="dawn"]   .ol-hero-bg { background-image: url("/static/img/sky-dawn.jpg"); }
.ol-hero[data-sky="day"]    .ol-hero-bg { background-image: url("/static/img/sky-day.jpg"); }
.ol-hero[data-sky="golden"] .ol-hero-bg { background-image: url("/static/img/sky-golden.jpg"); }
.ol-hero[data-sky="dusk"]   .ol-hero-bg { background-image: url("/static/img/sky-dusk.jpg"); }
.ol-hero[data-sky="night"]  .ol-hero-bg { background-image: url("/static/img/sky-night.jpg"); }

/* clouds cross the upper sky; fog rolls through the valleys. Both are wide
   seamless strips translating slowly — the scene breathes. */
.ol-clouds-l, .ol-fog-l {
  position: absolute; left: 0; z-index: 1; pointer-events: none;
  width: 200%; background-repeat: repeat-x; background-size: auto 100%;
}
.ol-clouds-l {
  top: 4%; height: 42%;
  background-image: url("/static/img/clouds.png");
  opacity: var(--cloud-o, .5);
  animation: olRoll 140s linear infinite;
}
.ol-fog-l {
  bottom: 6%; height: 44%;
  background-image: url("/static/img/fog-low.png");
  opacity: var(--fog-o, .6);
  animation: olRollBack 90s linear infinite;
  mix-blend-mode: screen;
}
@keyframes olRoll     { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes olRollBack { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* fog/cloud density by time of day */
.ol-hero[data-sky="day"]    { --cloud-o: .6; --fog-o: .5; }
.ol-hero[data-sky="golden"] { --cloud-o: .5; --fog-o: .6; }
.ol-hero[data-sky="dawn"]   { --cloud-o: .45; --fog-o: .55; }
.ol-hero[data-sky="dusk"]   { --cloud-o: .35; --fog-o: .6; }
.ol-hero[data-sky="night"]  { --cloud-o: .2; --fog-o: .4; }

/* Star field over the render. Twinkle is a slow glow, not a blink. */
.ol-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; }
.ol-stars circle {
  fill: #f3efe6;
  opacity: 0;
  animation: olTwinkle 5s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  filter: drop-shadow(0 0 2px rgba(243,239,230,.9));
}
@keyframes olTwinkle {
  from { opacity: calc(var(--o, .6) * .3); }
  to   { opacity: var(--o, .6); }
}

.ol-hero-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(22px, 3vw, 40px) 28px;
}
/* Legibility scrim, warm and low so the render still breathes. */
.ol-hero-body::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--bg) 1%,
    color-mix(in oklab, var(--bg) 55%, transparent) 30%, transparent 66%),
   linear-gradient(to right, color-mix(in oklab, var(--bg) 52%, transparent), transparent 56%);
}
.ol-hero-kicker {
  font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .02em; color: var(--accent); margin: 0 0 8px;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.ol-hero-title {
  font-family: var(--serif); font-optical-sizing: auto;
  font-variation-settings: "opsz" 48; font-weight: 600;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.0;
  letter-spacing: -.02em; color: #f4efe6; margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
.ol-hero-sub {
  font-family: "Geist Mono", var(--mono); font-size: 13.5px;
  color: rgba(244,239,230,.7); margin: 10px 0 0; letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.ol-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
  background: linear-gradient(to right, transparent,
    color-mix(in oklab, var(--accent) 72%, transparent) 20%,
    color-mix(in oklab, var(--accent) 72%, transparent) 80%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .ol-stars circle { animation: none !important; opacity: var(--o, .6); }
  .ol-hero, .ol-hero-bg, .ol-clouds-l, .ol-fog-l { animation: none !important; }
  .ol-hero-bg { transform: scale(1.04); }
}

/* ---- Material: satin, not flat ---- */
/* Panels get a hair of top-light (satin) and honed lower depth. This is
   material behaviour by value, not a floating drop-shadow.
   .kpi left this group on 2026-09-04 (design cluster D1): a stat tile is a
   cell inside one panel now, not a panel of its own. */
.card {
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--panel) 92%, #fff) 0%,
      var(--panel) 26%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--panel) 80%, #fff),
    0 1px 2px color-mix(in oklab, var(--bg) 70%, #000);
}
html.dark .card {
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--panel) 88%, #fff) 0%,
      var(--panel) 22%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--panel) 84%, #fff),
    0 2px 6px color-mix(in oklab, var(--bg) 55%, #000);
}
.card:hover, html.dark .card:hover {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--panel) 76%, #fff),
    0 3px 10px color-mix(in oklab, var(--bg) 50%, #000);
}

/* ---- Weighted arrival: the instrument row settles like a GT reaching speed ---- */
.anim .kpi { animation: fadeUp 460ms var(--ol-ease) both; }
.anim .kpi:nth-child(1) { animation-delay: 40ms; }
.anim .kpi:nth-child(2) { animation-delay: 90ms; }
.anim .kpi:nth-child(3) { animation-delay: 140ms; }
.anim .kpi:nth-child(4) { animation-delay: 190ms; }
.anim .kpi:nth-child(5) { animation-delay: 235ms; }
.anim .kpi:nth-child(6) { animation-delay: 275ms; }
.anim .kpi:nth-child(7) { animation-delay: 310ms; }
.anim .kpi:nth-child(n+8) { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .ol-ridge-2, .ol-ridge-3, .ol-ridge-4, .ol-hero { animation: none !important; }
}

/* The hero is the title in preview; drop the duplicate toolbar heading. */
body:has(.ol-hero) .toolbar:has(h1) { display: none; }

/* ============================================================
   CONSOLE-DEFAULT ADDENDUM - shipped with the token layer the day
   it became the default skin (design audit, first batch).
   Scoped overrides only; style.css itself stays untouched.
   ============================================================ */

/* ---- Instrument rows, composed: no orphan card, 2-up on a phone ---- */
.kpis { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.kpi { min-width: 0; max-width: none; }
.kpi b { font-variant-numeric: tabular-nums; }
/* Authored rows: money reads as one bounded strip of four; operations as a
   second strip. Six-figure screens (CEO, Distribution) sit on one row. */
.kpis-money, .kpis-ops, .kpis-6 { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 1400px) { .kpis-ops { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 1200px) { .kpis-6 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px) {
  .kpis-money, .kpis-ops, .kpis-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .kpis, .kpis-money, .kpis-ops, .kpis-6 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ---- Remaining hardcoded blues in style.css, re-plumbed to tokens ---- */
.sf-btn.primary, html.dark .sf-btn.primary {
  background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.sf-btn.primary:hover, html.dark .sf-btn.primary:hover {
  background: var(--btn-bg-h); border-color: var(--btn-bg-h); }
.sf-header .objicon { background: var(--btn-bg); color: var(--btn-fg); }
.sf-header .objicon.green { background: var(--green); }

/* Palette category labels: sentence case, same as every other label. */
.pal-item em { text-transform: none; letter-spacing: .02em; font-size: 12px; }

/* ---- Phone pass: entry forms stack instead of wrapping into crumbs ---- */
@media (max-width: 520px) {
  form.filters { flex-direction: column; align-items: stretch; }
  form.filters label { width: 100%; }
  form.filters input, form.filters select { width: 100%; max-width: none; }
  form.filters .chk { flex-direction: row; align-items: center; }
}

/* Consolidated source: console/static/themes/balanced.css */
/* ============================================================
   BALANCED OLYMPUS — token layer only.
   ~70% North Sea restraint, ~30% Mediterranean warmth. The brief's
   own Midnight Study / Daylight Archive values, unaltered where they
   exist. Evergreen carries interaction; sea-air blue carries focus.
   ============================================================ */

:root {
  /* Daylight Archive — limestone and warm paper. */
  --bg: #F3F0E8;
  --panel: #FAF8F3;
  --panel2: #ECE8DE;
  --line: #D7D0C3;
  --line-strong: #8D8576;
  --text: #17211B;
  --muted: #5B625D;
  --accent: #17533D;
  --navy: #17211B;
  --green: #28734D;
  --red: #A83D39;
  --amber: #8F4F2C;
  --silver: #8D8576;
  --silver-dim: #B8AE9E;
  --focus: #477F9A;
  --bar: #2E6349;
  --sel: #DCE9E1;
  --rowhover: #F1EFE8;
  --lossbg: #F5DEDC;
  --lossbg-h: #EFD2D0;
  --btn-bg: #111113;
  --btn-bg-h: #27272A;
  --btn-fg: #F7FAF8;
  --scrim: rgb(23 33 27 / 36%);
  --shadow: none;
}

html.dark {
  /* Midnight Study — evergreen-black, warm ivory, botanical depth. */
  --bg: #101612;
  --panel: #171F1A;
  --panel2: #1E2922;
  --line: #334038;
  --line-strong: #617369;
  --text: #F3EFE5;
  --muted: #B8BBB3;
  --accent: #7DB497;
  --navy: #E7E2D6;
  --green: #7DB497;
  --red: #E39AA0;
  --amber: #D0A075;
  --silver: #B8BBB3;
  --silver-dim: #8E968F;
  --focus: #89BDD4;
  --bar: #4C7F68;
  --sel: #203A2E;
  --rowhover: #1B241E;
  --lossbg: #2E2024;
  --lossbg-h: #38272C;
  --btn-bg: #FAFAFA;
  --btn-bg-h: #E4E4E7;
  --btn-fg: #0A0A0B;
  --scrim: rgb(8 12 10 / 56%);
  --shadow: none;
}

/* Consolidated source: Olympus v2 components */
/* Olympus v2 component system.
   Apple-forward hierarchy, restrained depth and dense operational evidence. */

:root {
  color-scheme: light;
  /* 499 house identity, daylight reading (2026-08-25): warm ivory ground,
     the same royal blue. Warmth sits in the ground and the lines, not in
     tinted text - ink stays near-black for contrast. */
  --ov-canvas: #fafafa;
  --ov-surface: #ffffff;
  --ov-raised: #ffffff;
  --ov-sunken: #f4f4f5;
  --ov-rail: #fafafa;
  --ov-ink: #09090b;
  --ov-ink-2: #3f3f46;
  --ov-ink-3: #71717a;
  --ov-ink-4: #6b6b75;   /* AA at 10.5px: 3.38 -> 5.10 on white (2026-08-25) */
  --ov-line: rgba(9, 9, 11, 0.10);
  --ov-line-strong: rgba(9, 9, 11, 0.22);
  --ov-control-line: #a1a1aa;
  --ov-accent: #246bfd;
  /* The deep step of the accent. Named once so the dark register can reuse
     it for a filled button's hover: the light step (#4b8dff) under white
     ink is 3.22:1, this one is 5.85:1. */
  --ov-accent-deep: #1d5ae0;
  --ov-accent-hover: var(--ov-accent-deep);
  --ov-accent-soft: rgba(36, 107, 253, 0.10);
  --ov-accent-ink: #123b91;
  --ov-blue: #246bfd;
  --ov-blue-soft: rgba(36, 107, 253, 0.10);
  --ov-positive: #17694e;   /* AA at 11px: 3.95 -> 5.31 on white (2026-08-25) */
  --ov-positive-soft: #e2f2ec;
  --ov-negative: #c05252;
  --ov-negative-soft: #f9e8e8;
  --ov-warning: #8a5a2e; /* clay, not brass: 3.23 -> 5.13 on warning-soft, 5.86 on white (2026-09-16) */
  --ov-warning-soft: #f8efdc;
  --ov-focus: #246bfd;
  --ov-focus-ring: rgba(36, 107, 253, 0.22);
  --ov-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", sans-serif;
  --ov-font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Inter", sans-serif;
  --ov-font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ov-touch-shadow: 0 1px 2px rgba(18, 20, 24, 0.07),
    0 4px 14px rgba(18, 20, 24, 0.05);
  --ov-plane-shadow: 0 1px 2px rgba(18, 20, 24, 0.07),
    0 18px 48px rgba(18, 20, 24, 0.065);
  --ov-surface-raised: var(--ov-raised);
  --ov-fill-hover: var(--ov-sunken);
  --ov-fill-subtle: var(--ov-canvas);
  --ov-accent-soft-strong: var(--ov-accent-soft);
  --ov-shadow-lg: var(--ov-plane-shadow);
  --ov-mono: var(--ov-font-mono);
  /* 499 analytics palette (brief 2026-08-24). Single-series charts use
     bar-default with ONE highlighted bar - never rainbow-coded bars. */
  --ov-chart-1: #246bfd;
  --ov-chart-2: #4b8dff;
  --ov-chart-3: #8cb5ff;
  --ov-chart-4: #173b7a;
  --ov-chart-5: #5d6b80;
  --ov-chart-bar: #e4e4e7;
  --ov-chart-grid: rgba(9, 9, 11, 0.06);
  /* One primary, and it is the royal blue (design cluster D4, 2026-09-04).
     The shadcn near-black primary put a second solid-weight button family
     on the page - "Go", "Send invite", "New referral" and "Add advertiser"
     all read as black slabs next to the blue ones. White on #246bfd is
     4.58:1, so the label still clears AA. */
  --ov-primary: var(--ov-accent);
  --ov-primary-hover: var(--ov-accent-hover);
  --ov-primary-ink: #ffffff;
  --ov-primary-halo: var(--ov-focus-ring);
  /* Radius scale lifted 2026-08-25 (Kamil: the curvature, the glass and the
     layout were the actual complaint, not the colours). Cards move 14 -> 18,
     controls 10 -> 12, so the geometry reads as soft as the reference
     instead of merely rounded. */
  --ov-radius-sm: 8px;
  --ov-radius-md: 12px;
  --ov-radius-lg: 18px;
  --ov-radius-xl: 24px;
  --ov-fast: 120ms;
  --ov-slow: 240ms;
  --ov-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ov-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* QA suite */
.ov-qa-workspace {
  --ov-qa-control-text: var(--ov-raised);
}

.ov-qa-workspace .ov-heading-actions {
  align-items: center;
}

.ov-qa-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  cursor: pointer;
  font: 630 13.5px/1.2 var(--ov-font-text);
  text-decoration: none;
  transition: color 120ms var(--ov-ease),
    background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease),
    box-shadow 180ms var(--ov-ease), transform 180ms var(--ov-spring);
}

.ov-qa-button .ic {
  width: 15px;
  height: 15px;
}

.ov-qa-workspace .ov-qa-button,
.ov-qa-workspace .ov-qa-button:hover {
  color: var(--ov-ink-2);
}

.ov-qa-button:hover {
  border-color: var(--ov-line-strong);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-qa-button:active {
  transform: scale(.985);
}

.ov-qa-button:focus-visible,
.ov-qa-text-action:focus-visible,
.ov-qa-period:focus-visible,
.ov-qa-thread:focus-visible,
.ov-qa-remove-kpi:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

.ov-qa-button:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: none;
}

.ov-qa-workspace .ov-qa-button-primary,
.ov-qa-workspace .ov-qa-button-primary:hover {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-qa-control-text);
}

.ov-qa-workspace .ov-qa-button-primary:hover {
  border-color: var(--ov-accent-hover);
  background: var(--ov-accent-hover);
}

.ov-qa-workspace .ov-qa-button-warning,
.ov-qa-workspace .ov-qa-button-warning:hover {
  border-color: var(--ov-warning);
  background: var(--ov-warning);
  color: var(--ov-raised);
}

.ov-qa-verdict { display: inline-flex; gap: 6px; }
.ov-qa-verdict .ov-qa-button { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.ov-qa-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 7px;
  font: 650 11.5px/1 var(--ov-font-text);
  white-space: nowrap;
}

.ov-qa-status .ic {
  width: 13px;
  height: 13px;
}

.ov-qa-status > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.ov-qa-status-positive {
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

.ov-qa-status-negative {
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-qa-status-warning {
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
}
.ov-qa-cap {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ov-warning);
  white-space: nowrap;
}

.ov-qa-status-neutral {
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-qa-metrics {
  margin-bottom: 18px;
}

.ov-qa-kpis {
  grid-template-columns: 1.15fr repeat(5, minmax(0, 1fr));
}

.ov-qa-kpis .ov-kpi:first-child .ov-kpi-value {
  font-size: 31px;
}

.ov-qa-kpis .ov-kpi {
  padding-right: 17px;
  padding-left: 17px;
}

.ov-qa-plane,
.ov-qa-thread-panel,
.ov-qa-conversation,
.ov-qa-admin,
.ov-qa-preset-library,
.ov-qa-preset-editor {
  overflow: hidden;
  border-radius: 18px;
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-qa-plane + .ov-qa-plane {
  margin-top: 18px;
}

.ov-qa-plane-heading,
.ov-qa-panel-heading,
.ov-qa-conversation-heading,
.ov-qa-preset-editor-heading,
.ov-qa-admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 18px;
}

.ov-qa-plane-heading h2,
.ov-qa-panel-heading h2,
.ov-qa-conversation-heading h2,
.ov-qa-preset-editor-heading h2,
.ov-qa-admin-heading h2 {
  margin: 3px 0 0;
  font: 680 20px/1.1 var(--ov-font-display);
  letter-spacing: -.026em;
}

.ov-qa-plane-heading p,
.ov-qa-admin > p {
  margin: 6px 0 0;
  color: var(--ov-ink-3);
  font-size: 13px;
}

.ov-qa-tools {
  padding: 18px 22px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line);
}

.ov-qa-caller-search,
.ov-qa-range,
.ov-qa-filter-form,
.ov-qa-new-thread,
.ov-qa-send,
.ov-qa-admin-form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.ov-qa-tools label,
.ov-qa-new-thread label,
.ov-qa-send label,
.ov-qa-admin-form label,
.ov-qa-preset-form label,
.ov-qa-kpi-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ov-ink-3);
  font: 580 12.5px/1.25 var(--ov-font-text);
}

.ov2-global .ov-qa-workspace :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  font: 500 14px/1.3 var(--ov-font-text);
  box-shadow: inset 0 1px 1px color-mix(in srgb, var(--ov-ink) 4%, transparent);
}

.ov2-global .ov-qa-workspace textarea {
  resize: vertical;
}

.ov2-global .ov-qa-workspace :is(input, select, textarea):hover {
  border-color: var(--ov-line-strong);
}

.ov2-global .ov-qa-workspace :is(input, select, textarea):focus {
  border-color: var(--ov-focus);
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 1px;
}

.ov2-global .ov-qa-workspace :is(input, select, textarea):disabled {
  background: var(--ov-sunken);
  color: var(--ov-ink-4);
  cursor: not-allowed;
}

.ov-qa-caller-search {
  max-width: 480px;
  margin-bottom: 14px;
}

.ov-qa-caller-search label {
  flex: 1;
}

.ov-qa-periods {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 3px;
  border-radius: 10px;
  background: var(--ov-sunken);
  scrollbar-width: thin;
}

.ov-qa-period {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ov-ink-3);
  font: 600 12.5px/1.2 var(--ov-font-text);
  text-decoration: none;
}

.ov-qa-workspace .ov-qa-period:hover {
  background: var(--ov-surface);
  color: var(--ov-ink);
}

.ov-qa-workspace .ov-qa-period.is-current {
  background: var(--ov-raised);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
}

.ov-qa-range {
  justify-content: flex-end;
  margin-top: 12px;
}

.ov-qa-range label {
  width: 156px;
}

.ov-qa-range > span {
  padding-bottom: 11px;
  color: var(--ov-ink-4);
}

.ov-qa-filter-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(125px, 1fr)) minmax(145px, 1fr) auto auto auto;
  margin-top: 14px;
  padding-top: 14px;
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-qa-results {
  min-height: 180px;
}

.ov-qa-tablewrap {
  width: 100%;
  overflow: auto;
}

.ov-qa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.ov-qa-table th,
.ov-qa-table td {
  padding: 11px 12px;
  border: 0;
  box-shadow: inset 0 -1px var(--ov-line);
  text-align: left;
  vertical-align: middle;
}

.ov-qa-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  font: 650 12.5px/1.2 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.ov-qa-table td {
  color: var(--ov-ink-2);
}

.ov-qa-table tbody tr:last-child td {
  box-shadow: none;
}

.ov-qa-table tbody tr[data-href] {
  cursor: pointer;
}

.ov-qa-table tbody tr[data-href]:hover,
.ov-qa-table tbody tr[data-href]:focus-visible,
.ov-qa-preset-table tbody tr.is-current {
  background: var(--ov-accent-soft);
}

.ov-qa-table tbody tr.is-failed {
  background: color-mix(in srgb, var(--ov-negative-soft) 42%, transparent);
}

.ov-qa-table a {
  color: var(--ov-accent-ink);
  font-weight: 650;
  text-decoration: none;
}

.ov-qa-table .r {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.ov-qa-more-flags {
  display: block;
  margin-top: 3px;
  color: var(--ov-ink-4);
  font-size: 11.5px;
}

.ov-qa-load-state,
.ov-qa-end {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  gap: 10px;
  color: var(--ov-ink-3);
  font-size: 13px;
}

.ov-qa-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ov-qa-loading[hidden],
.ov-qa-retry[hidden] {
  display: none;
}

.ov-qa-loading .ic {
  width: 15px;
  animation: ov-qa-spin 1s linear infinite;
}

@keyframes ov-qa-spin {
  to { transform: rotate(360deg); }
}

.ov-qa-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 48px 24px;
  color: var(--ov-ink-3);
  text-align: center;
}

.ov-qa-empty > .ic {
  width: 28px;
  height: 28px;
  color: var(--ov-accent);
}

.ov-qa-empty h2,
.ov-qa-empty h3 {
  margin: 4px 0 0;
  color: var(--ov-ink);
  font: 680 18px/1.2 var(--ov-font-display);
  letter-spacing: -.02em;
}

.ov-qa-empty p {
  max-width: 500px;
  margin: 0;
}

.ov-qa-table-empty {
  /* A real table-cell at desktop so colspan spans the row and the row line
     runs the full width (CALLS-27, 2026-09-24). The preset headers wrap
     (below), so the table fits its card and the sentence wraps inside it;
     on phones the shared empty-state rule turns it into a pinned block. */
  box-sizing: border-box;
  white-space: normal;
  padding: 30px !important;
  color: var(--ov-ink-3) !important;
  text-align: center !important;
}

/* The library card is narrow; nowrap headers set a table min-content wider
   than the card, so the empty-state sentence clipped mid-word. Wrapping
   headers lets the table, and the empty state, fit the card width. */
.ov-qa-preset-table th {
  white-space: normal;
}

.ov-qa-chat-layout {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.ov-qa-thread-panel {
  position: sticky;
  top: 0;
}

.ov-qa-new-thread {
  display: grid;
  padding: 0 18px 16px;
}

.ov-qa-thread-list {
  display: grid;
  padding: 4px 8px 10px;
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-qa-thread {
  display: grid;
  gap: 3px;
  padding: 11px 10px;
  border-radius: 9px;
  color: var(--ov-ink-2);
  font-weight: 620;
  text-decoration: none;
}

.ov-qa-thread small,
.ov-qa-thread-empty {
  color: var(--ov-ink-4);
  font-size: 11.5px;
  font-weight: 500;
}

.ov-qa-workspace .ov-qa-thread:hover {
  background: var(--ov-surface);
  color: var(--ov-ink);
}

.ov-qa-workspace .ov-qa-thread.is-current {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
}

.ov-qa-thread-empty {
  padding: 18px 10px;
  line-height: 1.5;
}

.ov-qa-conversation {
  min-height: 560px;
}

.ov-qa-chat {
  display: flex;
  min-height: 360px;
  max-height: 650px;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 18px 22px 24px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line);
}

.ov-qa-message {
  width: min(78%, 760px);
  padding: 12px 14px;
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
}

.ov-qa-message.is-human {
  align-self: flex-end;
  background: var(--ov-blue-soft);
}

.ov-qa-message.is-ai {
  align-self: flex-start;
}

.ov-qa-message.is-system {
  align-self: center;
  background: var(--ov-sunken);
  box-shadow: none;
}

.ov-qa-message > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  color: var(--ov-ink-3);
  font-size: 11.5px;
}

.ov-qa-message > header b {
  color: var(--ov-ink-2);
  font-weight: 670;
}

.ov-qa-message > p {
  margin: 0;
  color: var(--ov-ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
}

.ov-qa-proposal {
  margin-top: 12px;
  overflow: hidden;
  border-radius: var(--ov-radius-md);
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-qa-proposal.is-dismissed {
  opacity: .72;
}

.ov-qa-proposal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.ov-qa-proposal-heading h3,
.ov-qa-rubric-heading h3,
.ov-qa-admin-action h3 {
  margin: 3px 0 0;
  color: var(--ov-ink);
  font: 670 15px/1.2 var(--ov-font-display);
  letter-spacing: -.015em;
}

.ov-qa-proposal-summary,
.ov-qa-proposal-state {
  margin: 0;
  padding: 0 14px 14px;
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-qa-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ov-line);
  box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line);
}

.ov-qa-diff > div {
  padding: 14px;
  background: var(--ov-raised);
}

.ov-qa-diff ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ov-qa-diff li {
  display: grid;
  gap: 2px;
}

.ov-qa-diff li span {
  color: var(--ov-ink-2);
  font-weight: 620;
}

.ov-qa-diff li small,
.ov-qa-diff li p {
  margin: 0;
  color: var(--ov-ink-4);
  font-size: 11.5px;
}

.ov-qa-context {
  margin: 12px 0 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
  font-size: 11.5px;
  white-space: pre-wrap;
}

.ov-qa-proposal-actions {
  display: flex;
  gap: 8px;
  padding: 14px;
}

.ov-qa-send {
  padding: 16px 22px;
}

.ov-qa-send label {
  flex: 1;
}

.ov-qa-send textarea {
  min-height: 82px;
}

.ov-qa-empty-tall {
  min-height: 560px;
  align-content: center;
}

.ov-qa-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border-radius: var(--ov-radius-md);
  box-shadow: var(--ov-touch-shadow);
}

.ov-qa-alert > .ic {
  width: 18px;
  flex: 0 0 auto;
}

.ov-qa-alert b,
.ov-qa-alert p {
  margin: 0;
}

.ov-qa-alert p {
  margin-top: 2px;
  font-size: 12.5px;
}

.ov-qa-alert-warning {
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
}

.ov-qa-admin {
  margin-top: 18px;
  background: var(--ov-surface);
  /* no warning outline (CALLS-29/30): the "Confirmation required" chip
     says it, and the inset ring was covered halfway down by the grid */
  box-shadow: inset 0 0 0 1px var(--ov-line), var(--ov-plane-shadow);
}

.ov-qa-admin > p {
  padding: 0 22px 18px;
}

.ov-qa-admin-grid {
  display: grid;
  /* auto-fit collapses the unused track: with a fixed 2-column grid a lone
     admin action left the second column showing the bare line background. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--ov-line);
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-qa-admin-action {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px 22px;
  background: var(--ov-raised);
}

.ov-qa-admin-action p {
  margin: 5px 0 0;
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-qa-admin-form input {
  width: 76px !important;
}

.ov-qa-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ov-sunken);
}

.ov-qa-admin-stats div {
  padding: 10px;
}

.ov-qa-admin-stats dt {
  color: var(--ov-ink-4);
  font-size: 11px;
}

.ov-qa-admin-stats dd {
  margin: 4px 0 0;
  color: var(--ov-ink);
  font: 650 15px/1 var(--ov-font-display);
  font-variant-numeric: tabular-nums;
}

.ov-qa-admin-action > form:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ov-qa-admin-note {
  color: var(--ov-ink-3);
  font-size: 12px;
}

.ov-qa-preset-layout {
  display: grid;
  /* Editor column min is 0, not a fixed floor: a 560px floor plus the
     library's 420px exceeded narrow viewports and pushed the editor past
     the right edge. Children carry min-width: 0 for the same reason. */
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 18px;
}

.ov-qa-preset-layout > * {
  min-width: 0;
}

.ov-qa-preset-library {
  position: sticky;
  top: 0;
}

.ov-qa-row-actions,
.ov-qa-row-actions form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ov-qa-text-action {
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--ov-accent-ink);
  cursor: pointer;
  font: 620 12px/1.2 var(--ov-font-text);
  text-decoration: none;
}

.ov-qa-workspace .ov-qa-text-action-danger,
.ov-qa-workspace .ov-qa-text-action-danger:hover {
  color: var(--ov-negative);
}

.ov-qa-library-note {
  display: flex;
  gap: 10px;
  padding: 16px 18px;
  color: var(--ov-ink-3);
  font-size: 12px;
  line-height: 1.5;
}

.ov-qa-library-note .ic {
  width: 17px;
  flex: 0 0 auto;
  color: var(--ov-accent);
}

.ov-qa-library-note p {
  margin: 0;
}

.ov-qa-validation {
  display: grid;
  gap: 2px;
  margin: 0 22px 18px;
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
  font-size: 12px;
}

.ov-qa-validation.has-error {
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-qa-preset-form {
  display: grid;
  gap: 16px;
  padding: 0 22px 22px;
}

.ov-qa-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ov-qa-field-help,
.ov-qa-checks small {
  color: var(--ov-ink-4);
  font-size: 11.5px;
  font-weight: 500;
}

.ov-qa-checks {
  display: grid;
  gap: 9px;
  padding: 13px;
  border-radius: 10px;
  background: var(--ov-surface);
}

.ov-qa-checks .chk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
}

.ov2-global .ov-qa-checks input[type="checkbox"] {
  width: 17px;
  min-height: 17px;
  flex: 0 0 auto;
}

.ov-qa-checks span {
  display: grid;
  gap: 2px;
}

.ov-qa-rubric-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.ov-qa-kpi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--ov-ink-4);
  font-size: 11.5px;
}

.ov-qa-kpi-editor {
  display: grid;
  gap: 8px;
}

.ov-qa-kpi-row {
  display: grid;
  /* Column floors must sum below the editor track's width; the previous
     674px min-content forced every sibling form row past the card edge. */
  grid-template-columns: 28px minmax(64px, .7fr) minmax(84px, 1fr) minmax(96px, 112px) minmax(52px, 68px) minmax(110px, 1.5fr) 34px;
  align-items: end;
  gap: 7px;
  padding: 10px;
  border-radius: 11px;
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-qa-kpi-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
  font: 650 11.5px/1 var(--ov-font-mono);
}

.ov2 button.ov-qa-remove-kpi,
.ov-qa-remove-kpi {
  width: 32px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ov-negative);
  cursor: pointer;
  font: 650 20px/1 var(--ov-font-text);
}

.ov2 button.ov-qa-remove-kpi:hover,
.ov-qa-remove-kpi:hover {
  border-color: transparent;
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-qa-savebar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px -22px -22px;
  padding: 14px 22px;
  background: color-mix(in srgb, var(--ov-raised) 94%, transparent);
  box-shadow: inset 0 1px var(--ov-line), 0 -8px 24px color-mix(in srgb, var(--ov-ink) 5%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
}

.ov-qa-savebar span {
  color: var(--ov-ink-3);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .ov-qa-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ov-qa-kpi:nth-child(4)::before {
    display: none;
  }

  .ov-qa-filter-form {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .ov-qa-preset-layout {
    grid-template-columns: 1fr;
  }

  .ov-qa-preset-library {
    position: static;
  }

  .ov-qa-kpi-row {
    grid-template-columns: 28px 1fr 1fr 112px 68px 34px;
  }

  .ov-qa-kpi-description {
    grid-column: 2 / -2;
  }
}

@media (max-width: 800px) {
  .ov-qa-workspace .ov-heading-actions {
    width: 100%;
  }

  .ov-qa-workspace .ov-heading-actions > * {
    flex: 1;
  }

  .ov-qa-chat-layout {
    grid-template-columns: 1fr;
  }

  .ov-qa-thread-panel {
    position: static;
  }

  .ov-qa-thread-list {
    display: flex;
    overflow-x: auto;
  }

  .ov-qa-thread {
    min-width: 170px;
  }

  .ov-qa-diff,
  .ov-qa-admin-grid {
    grid-template-columns: 1fr;
  }

  .ov-qa-message {
    width: 92%;
  }

  .ov-qa-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-qa-kpi-row {
    grid-template-columns: 28px 1fr 1fr 34px;
  }

  .ov-qa-kpi-row label:nth-of-type(3),
  .ov-qa-kpi-row label:nth-of-type(4),
  .ov-qa-kpi-description {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .ov-qa-button,
  .ov-qa-workspace .ov-heading-actions > *,
  .ov-qa-tools button,
  .ov-qa-tools a {
    min-height: 44px;
  }

  .ov-qa-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-qa-kpi:nth-child(odd)::before {
    display: none;
  }

  .ov-qa-kpis .ov-kpi {
    padding: 15px 13px;
  }

  .ov-qa-kpis .ov-kpi-value,
  .ov-qa-kpis .ov-kpi:first-child .ov-kpi-value {
    font-size: 23px;
  }

  .ov-qa-plane,
  .ov-qa-thread-panel,
  .ov-qa-conversation,
  .ov-qa-admin,
  .ov-qa-preset-library,
  .ov-qa-preset-editor {
    border-radius: var(--ov-radius-lg);
  }

  .ov-qa-plane-heading,
  .ov-qa-panel-heading,
  .ov-qa-conversation-heading,
  .ov-qa-preset-editor-heading,
  .ov-qa-admin-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px 14px;
  }

  .ov-qa-tools,
  .ov-qa-chat,
  .ov-qa-send,
  .ov-qa-admin-action,
  .ov-qa-preset-form {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ov-qa-caller-search,
  .ov-qa-range,
  .ov-qa-send,
  .ov-qa-admin-form,
  .ov-qa-proposal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ov-qa-range {
    justify-content: stretch;
  }

  .ov-qa-range label {
    width: 100%;
  }

  .ov-qa-range > span {
    display: none;
  }

  .ov-qa-filter-form,
  .ov-qa-field-grid {
    grid-template-columns: 1fr;
  }

  .ov-qa-tablewrap {
    overflow: visible;
  }

  .ov-qa-table,
  .ov-qa-table tbody,
  .ov-qa-table tr,
  .ov-qa-table td {
    display: block;
    width: 100%;
  }

  .ov-qa-table thead {
    display: none;
  }

  .ov-qa-table tbody {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .ov-qa-table tr {
    overflow: hidden;
    border-radius: 11px;
    background: var(--ov-surface);
    box-shadow: inset 0 0 0 1px var(--ov-line), var(--ov-touch-shadow);
  }

  .ov-qa-table td {
    display: grid;
    grid-template-columns: minmax(90px, .72fr) minmax(0, 1fr);
    gap: 12px;
    padding: 9px 11px;
    text-align: left !important;
  }

  .ov-qa-table td::before {
    content: attr(data-label);
    color: var(--ov-ink-4);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  .ov-qa-table td:not([data-label])::before {
    content: none;
  }

  .ov-qa-table-empty {
    display: block !important;
    white-space: normal;
  }

  .ov-qa-message {
    width: 100%;
  }

  .ov-qa-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-qa-preset-table .ov-qa-row-actions {
    flex-wrap: wrap;
  }

  .ov-qa-kpi-row {
    grid-template-columns: 28px minmax(0, 1fr) 34px;
  }

  .ov-qa-kpi-row label,
  .ov-qa-kpi-row label:nth-of-type(3),
  .ov-qa-kpi-row label:nth-of-type(4),
  .ov-qa-kpi-description {
    grid-column: 2;
  }

  .ov-qa-kpi-order {
    grid-column: 1;
    grid-row: 1;
  }

  .ov-qa-remove-kpi {
    grid-column: 3;
    grid-row: 1;
  }

  .ov-qa-savebar {
    margin-right: -14px;
    margin-left: -14px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .ov-qa-savebar span {
    max-width: 50%;
  }
}

/* Call record and task queue content wave */
.ov-call-record,
.ov-task-workspace {
  --ov-wave-control-text: var(--ov-raised);
}

.ov-call-button,
.ov-task-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  cursor: pointer;
  font: 630 13.5px/1.2 var(--ov-font-text);
  text-decoration: none;
  transition: color 120ms var(--ov-ease), background-color 120ms var(--ov-ease),
    border-color 120ms var(--ov-ease), box-shadow 180ms var(--ov-ease),
    transform 180ms var(--ov-spring);
}

.ov-call-button .ic,
.ov-task-button .ic {
  width: 15px;
  height: 15px;
}

.ov-call-record .ov-call-button,
.ov-task-workspace .ov-task-button {
  color: var(--ov-ink-2);
}

.ov-call-button:hover,
.ov-task-button:hover {
  border-color: var(--ov-line-strong);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-call-button:active,
.ov-task-button:active {
  transform: scale(.985);
}

.ov-call-button:focus-visible,
.ov-task-button:focus-visible,
.ov-call-back:focus-visible,
.ov-task-views a:focus-visible,
.ov-task-actions summary:focus-visible,
.ov-task-close:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

.ov-call-button:disabled,
.ov-task-button:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: none;
}

.ov-call-record .ov-call-button-primary,
.ov-task-workspace .ov-task-button-primary,
.ov-call-record .ov-call-button-primary:hover,
.ov-task-workspace .ov-task-button-primary:hover {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-wave-control-text);
}

.ov-call-status,
.ov-task-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;   /* 21st task-list reference, 2026-08-24 */
  font: 650 11.5px/1 var(--ov-font-text);
  white-space: nowrap;
}

.ov-call-status > i,
.ov-task-status > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.ov-call-status-positive,
.ov-task-status-positive { background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov-call-status-negative,
.ov-task-status-negative { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov-call-status-warning,
.ov-task-status-warning { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov-call-status-neutral,
.ov-task-status-neutral { background: var(--ov-sunken); color: var(--ov-ink-3); }

.ov-call-back {
  align-self: flex-start;
  margin-bottom: 3px;
  color: var(--ov-accent-ink);
  font-size: 12.5px;
  font-weight: 620;
  text-decoration: none;
}

.ov-call-metrics,
.ov-task-metrics {
  margin-bottom: 18px;
}

.ov-call-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ov-task-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ov-call-kpis .ov-kpi:first-child .ov-kpi-value,
.ov-task-kpis .ov-kpi:first-child .ov-kpi-value { font-size: 28px; }

.ov-call-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  align-items: start;
  gap: 18px;
}

.ov-call-timeline,
.ov-call-summary,
.ov-call-progressive,
.ov-task-plane {
  min-width: 0;
}

.ov-call-recording,
.ov-call-transcript,
.ov-call-facts,
.ov-call-progressive,
.ov-task-plane {
  overflow: hidden;
  border-radius: 18px;
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-call-recording { margin-bottom: 18px; }
.ov-call-facts { position: sticky; top: 0; }

.ov-call-section-heading,
.ov-task-plane-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 18px;
}

.ov-call-section-heading h2,
.ov-task-plane-heading h2 {
  margin: 3px 0 0;
  font: 680 20px/1.1 var(--ov-font-display);
  letter-spacing: -.026em;
}

.ov-call-player {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 22px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-call-player > .ic {
  width: 26px;
  color: var(--ov-accent);
}

.ov-call-player audio {
  display: block;
  width: 100%;
  min-height: 42px;
}

.ov-call-player a {
  color: var(--ov-accent-ink);
  font-size: 12.5px;
  font-weight: 620;
  text-decoration: none;
}

.ov-call-transcript-turns {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px 22px 24px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-call-transcript-message {
  width: min(76%, 720px);
  padding: 11px 14px;
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
}

.ov-call-transcript-message.is-agent {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  background: var(--ov-blue-soft);
}

.ov-call-transcript-message.is-caller {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: var(--ov-accent-soft);
}

.ov-call-transcript-message.is-unknown {
  width: 100%;
  background: var(--ov-sunken);
}

.ov-call-speaker {
  display: block;
  margin-bottom: 4px;
  color: var(--ov-ink-3);
  font: 700 11px/1.2 var(--ov-font-text);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ov-call-transcript-message p,
.ov-call-transcript-plain {
  margin: 0;
  color: var(--ov-ink-2);
  font-size: 14px;
  line-height: 1.58;
  white-space: pre-wrap;
}

.ov-call-transcript-plain { padding: 20px 22px; box-shadow: inset 0 1px var(--ov-line); }

.ov-call-facts dl,
.ov-call-extraction { margin: 0; }

.ov-call-facts dl > div,
.ov-call-extraction > div {
  display: grid;
  grid-template-columns: minmax(105px, .75fr) minmax(0, 1.25fr);
  gap: 14px;
  padding: 12px 18px;
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-call-facts dt,
.ov-call-extraction dt {
  color: var(--ov-ink-4);
  font-size: 11.5px;
  font-weight: 590;
  text-transform: capitalize;
}

.ov-call-facts dd,
.ov-call-extraction dd {
  margin: 0;
  color: var(--ov-ink-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ov-call-progressive { margin-top: 18px; }

.ov-call-progressive > details + details { box-shadow: inset 0 1px var(--ov-line); }
.ov-call-progressive summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 15px 22px;
  cursor: pointer;
  list-style: none;
}

.ov-call-progressive summary::-webkit-details-marker { display: none; }
.ov-call-progressive summary > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.ov-call-progressive summary .ic { width: 17px; color: var(--ov-accent); }
.ov-call-progressive details[open] > summary { background: var(--ov-surface); }
.ov-call-panel-body { padding: 20px 22px 22px; box-shadow: inset 0 1px var(--ov-line); }

.ov-call-review { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ov-call-score-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ov-call-score-summary > strong { font: 720 38px/1 var(--ov-font-display); letter-spacing: -.05em; }
.ov-call-score-summary > div { display: grid; gap: 2px; }
.ov-call-score-summary span { color: var(--ov-ink-3); font-size: 12px; }
.ov-call-flags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.ov-call-summary-copy { color: var(--ov-ink-3); font-size: 13px; line-height: 1.55; }

.ov-call-score-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: var(--ov-line); }
.ov-call-score-list > div { position: relative; min-height: 82px; padding: 13px 72px 13px 13px; background: var(--ov-surface); }
.ov-call-score-list span { color: var(--ov-ink-2); font-size: 12.5px; font-weight: 640; }
.ov-call-score-list p { margin: 4px 0 0; color: var(--ov-ink-4); font-size: 11.5px; }
.ov-call-score-list > div > b { position: absolute; right: 13px; top: 13px; }

.ov-call-feedback { margin-top: 20px; padding-top: 18px; box-shadow: inset 0 1px var(--ov-line); }
.ov-call-feedback h3 { margin: 0; font: 670 15px/1.2 var(--ov-font-display); }
.ov-call-feedback > div > p { margin: 4px 0 0; color: var(--ov-ink-3); font-size: 12.5px; }
.ov-call-feedback form { display: flex; gap: 9px; margin-top: 12px; }

.ov2-global .ov-call-record input,
.ov2-global .ov-task-workspace :is(input, select, textarea) {
  width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--ov-control-line); border-radius: 9px;
  background: var(--ov-raised); color: var(--ov-ink);
  font: 500 14px/1.3 var(--ov-font-text);
}

.ov2-global .ov-call-record input:hover,
.ov2-global .ov-task-workspace :is(input, select, textarea):hover { border-color: var(--ov-line-strong); }
.ov2-global .ov-call-record input:focus,
.ov2-global .ov-task-workspace :is(input, select, textarea):focus { border-color: var(--ov-focus); outline: 3px solid var(--ov-focus-ring); outline-offset: 1px; }
.ov2-global .ov-call-record input:disabled,
.ov2-global .ov-task-workspace :is(input, select, textarea):disabled { background: var(--ov-sunken); color: var(--ov-ink-4); cursor: not-allowed; }

.ov-call-feedback form input { flex: 1; }
.ov-call-feedback-history { display: grid; gap: 8px; margin-top: 14px; }
.ov-call-feedback-history p { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ov-ink-2); font-size: 12px; }
.ov-call-feedback-history time { margin-left: auto; color: var(--ov-ink-4); }

.ov-call-dispositions { display: grid; gap: 1px; background: var(--ov-line); }
.ov-call-dispositions article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 13px; background: var(--ov-surface); }
.ov-call-dispositions b { color: var(--ov-ink-2); }
.ov-call-dispositions p { margin: 3px 0 0; color: var(--ov-ink-3); font-size: 12px; }
.ov-call-dispositions time { color: var(--ov-ink-4); font-size: 11.5px; }

.ov-call-alert { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 10px; }
.ov-call-alert .ic { width: 17px; flex: 0 0 auto; }
.ov-call-alert p { margin: 0; font-size: 12.5px; }
.ov-call-alert-warning { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov-call-alert-negative { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov-call-extraction { margin-top: 14px; border-radius: 10px; background: var(--ov-surface); }
.ov-call-empty,
.ov-call-not-found,
.ov-task-empty,
.ov-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 22px; color: var(--ov-ink-3); text-align: center; }
.ov-call-empty .ic,
.ov-call-not-found .ic,
.ov-task-empty .ic,
.ov-empty .ic { width: 27px; height: 27px; color: var(--ov-accent); }
.ov-call-empty p,
.ov-call-not-found p,
.ov-task-empty p,
.ov-empty p { margin: 0; }
.ov-call-not-found { min-height: 440px; align-content: center; border-radius: 18px; background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); }
.ov-call-not-found h1,
.ov-task-empty h3,
.ov-empty h3,
.ov2-global .ov-legacy-main .ov-empty h2 { margin: 2px 0 0; font: 690 22px/1.1 var(--ov-font-display); color: var(--ov-ink); }

.ov-task-plane-heading { box-shadow: inset 0 -1px var(--ov-line); }
.ov-task-views { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--ov-sunken); }
.ov-task-views a { min-height: 32px; padding: 8px 12px; border-radius: 8px; color: var(--ov-ink-3); font: 620 12.5px/1.2 var(--ov-font-text); text-decoration: none; }
.ov-task-workspace .ov-task-views a:hover { color: var(--ov-ink); }
.ov-task-workspace .ov-task-views a.is-current { background: var(--ov-raised); color: var(--ov-ink); box-shadow: var(--ov-touch-shadow); }

.ov-task-filters { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(150px, .9fr) minmax(240px, 1.6fr) auto; align-items: end; gap: 10px; padding: 16px 22px; background: var(--ov-surface); }
.ov-task-filters label,
.ov-task-create-form label { display: grid; gap: 6px; color: var(--ov-ink-3); font: 580 12.5px/1.25 var(--ov-font-text); }

.ov-task-feedback { padding: 10px 22px; background: var(--ov-accent-soft); color: var(--ov-accent-ink); font-size: 12px; box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line); }
.ov-task-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; background: var(--ov-surface); box-shadow: inset 0 -1px var(--ov-line); }
.ov-task-bulkbar[hidden] { display: none; }
.ov-task-bulkbar > div { display: flex; gap: 8px; }

.ov-task-tablewrap { overflow: auto; }
.ov-task-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ov-task-table th,
.ov-task-table td { padding: 11px 12px; border: 0; box-shadow: inset 0 -1px var(--ov-line); text-align: left; vertical-align: middle; }
.ov-task-table th { position: sticky; top: 0; z-index: 2; background: var(--ov-surface); color: var(--ov-ink-2); font: 650 12.5px/1.2 var(--ov-font-text); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ov-task-table td { color: var(--ov-ink-2); }
.ov-task-table tbody tr:last-child td { box-shadow: none; }
.ov-task-table tbody tr:hover { background: var(--ov-surface); }
.ov-task-table tbody tr.is-overdue { background: color-mix(in srgb, var(--ov-negative-soft) 42%, transparent); }
.ov-task-table b.is-muted { color: var(--ov-ink-4); }
.ov-task-notes { max-width: 300px; overflow: hidden; margin: 3px 0; color: var(--ov-ink-3); text-overflow: ellipsis; white-space: nowrap; }
.ov-task-table small { color: var(--ov-ink-4); }
.ov-task-due-alert { display: block; margin-top: 3px; color: var(--ov-negative); font-size: 11.5px; font-weight: 680; }
.ov-task-select-cell { width: 38px; text-align: center !important; }
.ov2-global .ov-task-select-cell input { width: 16px; min-height: 16px; accent-color: var(--ov-accent); }

.ov-task-actions { position: relative; }
.ov-task-actions summary { display: inline-flex; min-height: 32px; align-items: center; padding: 6px 9px; border: 1px solid var(--ov-control-line); border-radius: 8px; background: var(--ov-raised); color: var(--ov-ink-2); cursor: pointer; font-weight: 620; list-style: none; }
.ov-task-actions summary::-webkit-details-marker { display: none; }
.ov-task-actions > div { position: absolute; right: 0; z-index: 5; display: grid; min-width: 130px; margin-top: 5px; padding: 5px; border-radius: 10px; background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); }
.ov-task-actions form { margin: 0; }
.ov-task-actions button { width: 100%; justify-content: flex-start; min-height: 34px; padding: 7px 8px; border: 0; background: transparent; color: var(--ov-ink-2); font-size: 12.5px; }
.ov-task-actions button:hover { background: var(--ov-surface); }
.ov-task-actions button.is-danger { color: var(--ov-negative); }
.ov-task-complete-label { color: var(--ov-ink-4); font-size: 11.5px; }

.ov-task-composer { margin: auto; /* the * reset kills the UA's dialog centering (Kamil, 2026-08-31: composer opened top-left) */ width: min(760px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 18px; background: var(--ov-raised); color: var(--ov-ink); box-shadow: var(--ov-plane-shadow); }
.ov-task-composer::backdrop { background: color-mix(in srgb, var(--ov-sunken) 72%, transparent); backdrop-filter: blur(5px); }
.ov-task-create-form { display: grid; gap: 16px; padding: 22px; }
.ov-task-composer-heading { display: flex; align-items: center; justify-content: space-between; }
.ov-task-composer-heading h2 { margin: 3px 0 0; font: 680 21px/1.1 var(--ov-font-display); }
.ov-task-close { width: 38px; min-height: 38px; border: 0; border-radius: 50%; background: var(--ov-sunken); color: var(--ov-ink-2); cursor: pointer; font-size: 21px; }
.ov-task-create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ov-task-title-field,
.ov-task-notes-field { grid-column: 1 / -1; }
.ov-task-create-form textarea { resize: vertical; }
.ov-task-composer-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; box-shadow: inset 0 1px var(--ov-line); }

@media (max-width: 1180px) {
  .ov-call-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-task-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-call-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, .6fr); }
}

@media (max-width: 800px) {
  .ov-call-layout { grid-template-columns: 1fr; }
  .ov-call-facts { position: static; }
  .ov-call-player { grid-template-columns: 28px minmax(0, 1fr); }
  .ov-call-player a { grid-column: 2; }
  .ov-call-score-list { grid-template-columns: 1fr; }
  .ov-task-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-task-search { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .ov-call-button,
  .ov-task-button { min-height: 44px; }
  .ov-call-kpis,
  .ov-task-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-call-record .ov-call-kpis .ov-kpi:first-child,
  .ov-call-record .ov-call-kpis .ov-kpi:nth-child(4),
  .ov-task-workspace .ov-task-kpis .ov-kpi:first-child,
  .ov-task-workspace .ov-task-kpis .ov-kpi:nth-child(4) { grid-column: auto; }
  .ov-call-recording,
  .ov-call-transcript,
  .ov-call-facts,
  .ov-call-progressive,
  .ov-task-plane { border-radius: var(--ov-radius-lg); }
  .ov-call-section-heading,
  .ov-task-plane-heading { align-items: flex-start; flex-direction: column; padding: 17px 14px; }
  .ov-call-player { grid-template-columns: 1fr; padding: 16px 14px 18px; }
  .ov-call-player > .ic { display: none; }
  .ov-call-player a { grid-column: 1; }
  .ov-call-transcript-turns { padding: 14px; }
  .ov-call-transcript-message { width: 94%; }
  .ov-call-panel-body { padding: 16px 14px; }
  .ov-call-progressive summary { align-items: flex-start; flex-direction: column; padding: 14px; }
  .ov-call-feedback form,
  .ov-task-bulkbar { align-items: stretch; flex-direction: column; }
  .ov-call-feedback-history p { align-items: flex-start; flex-wrap: wrap; }
  .ov-call-feedback-history time { width: 100%; margin-left: 35px; }
  .ov-call-dispositions article { grid-template-columns: 1fr; }
  .ov-call-facts dl > div,
  .ov-call-extraction > div { grid-template-columns: 1fr; gap: 4px; }
  .ov-task-views { width: 100%; }
  .ov-task-views a { flex: 1; text-align: center; }
  .ov-task-filters,
  .ov-task-create-grid { grid-template-columns: 1fr; }
  .ov-task-search,
  .ov-task-title-field,
  .ov-task-notes-field { grid-column: 1; }
  .ov-task-tablewrap { overflow: visible; }
  .ov-task-table,
  .ov-task-table tbody,
  .ov-task-table tr,
  .ov-task-table td { display: block; width: 100%; }
  .ov-task-table thead { display: none; }
  .ov-task-table tbody { display: grid; gap: 10px; padding: 12px; }
  .ov-task-table tr { overflow: visible; border-radius: 11px; background: var(--ov-surface); box-shadow: inset 0 0 0 1px var(--ov-line), var(--ov-touch-shadow); }
  .ov-task-table td { display: grid; grid-template-columns: minmax(85px, .65fr) minmax(0, 1fr); gap: 10px; padding: 9px 11px; }
  .ov-task-table td::before { content: attr(data-label); color: var(--ov-ink-4); font-size: 11px; font-weight: 650; letter-spacing: 0; text-transform: none; }
  .ov-task-actions > div { position: static; }
  .ov-task-composer { border-radius: var(--ov-radius-lg); }
  .ov-task-create-form { padding: 17px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-call-button,
  .ov-task-button,
  .ov-task-composer { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .ov-task-composer::backdrop { backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .ov-call-recording,
  .ov-call-transcript,
  .ov-call-facts,
  .ov-call-progressive,
  .ov-task-plane { outline: 1px solid var(--ov-line-strong); }
}

/* Wave 3 cascade guards follow shared KPI responsiveness intentionally. */
.ov-call-record .ov-call-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ov-task-workspace .ov-task-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .ov-call-record .ov-call-kpis,
  .ov-task-workspace .ov-task-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ov-call-record .ov-call-kpis,
  .ov-task-workspace .ov-task-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-call-record .ov-call-kpis .ov-kpi:first-child,
  .ov-call-record .ov-call-kpis .ov-kpi:nth-child(4),
  .ov-task-workspace .ov-task-kpis .ov-kpi:first-child,
.ov-task-workspace .ov-task-kpis .ov-kpi:nth-child(4) { grid-column: auto; }
}

/* ==== Documentation (2026-09-16) =========================================
   /docs replaces the one-page Platform guide. Home = settings-style cards
   per division; article = division index on the left, prose on the right.
   Same tokens, same hairlines, colour only at the point of touch. */
.ov-doc-home { width: min(100%, 1180px); margin: 0 auto; }
.ov-doc-lede { max-width: 66ch; }
.ov-doc-search { margin: 0 0 30px; max-width: 560px; }
.ov-doc-search-control {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; min-height: 42px; padding: 0 12px;
  background: var(--ov-raised); border: 1px solid var(--ov-line-strong);
  border-radius: var(--ov-radius-md); color: var(--ov-ink-3);
  transition: border-color var(--ov-fast) var(--ov-ease), box-shadow var(--ov-fast) var(--ov-ease);
}
.ov-doc-search-control:focus-within { border-color: var(--ov-accent); box-shadow: 0 0 0 3px var(--ov-focus-ring); }
.ov-doc-search-control .ic { width: 18px; height: 18px; }
.ov2-global .ov-legacy-main .ov-doc-search-control input,
.ov-doc-search-control input {
  min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ov-ink);
  font: 500 14px/1.4 var(--ov-font-text); outline: none; padding: 8px 0;
}
.ov2 .ov-doc-search-control input:focus-visible { outline: none; }
.ov-doc-search-control kbd {
  font: 500 11px/1 var(--ov-font-mono); color: var(--ov-ink-4);
  border: 1px solid var(--ov-line); border-radius: 5px; padding: 4px 6px;
}
.ov-doc-search-status { margin: 8px 0 0 2px; font-size: 12.5px; color: var(--ov-ink-4); }
.ov-doc-denied, .ov-doc-nomatch, .ov-doc-empty {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 12px 14px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md);
  background: var(--ov-raised); color: var(--ov-ink-2); font-size: 13.5px;
}
.ov-doc-denied .ic, .ov-doc-nomatch .ic, .ov-doc-empty .ic { width: 16px; height: 16px; color: var(--ov-ink-4); flex: 0 0 auto; }
.ov-doc-empty { flex-direction: column; align-items: flex-start; padding: 28px 22px; }
.ov-doc-empty p { margin: 0; }
.ov-doc-section > header h2 { display: inline-flex; align-items: center; gap: 9px; }
.ov-doc-section > header h2 .ic { width: 18px; height: 18px; color: var(--ov-ink-3); }
.ov-doc-section-lede { margin: -6px 0 16px; max-width: 70ch; color: var(--ov-ink-3); font-size: 13.5px; line-height: 1.5; }
.ov-doc-open {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
  color: var(--ov-accent-ink); text-decoration: none; white-space: nowrap;
}
.ov-doc-open .ic { width: 14px; height: 14px; transition: transform var(--ov-fast) var(--ov-ease); }
.ov-doc-open:hover .ic { transform: translateX(2px); }
.ov-doc-kind-head {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 10px;
  font: 600 11.5px/1 var(--ov-font-text); letter-spacing: 0; text-transform: none; color: var(--ov-ink-4);
}
.ov-doc-kind-head span { font: 500 11px/1 var(--ov-font-mono); color: var(--ov-ink-4); padding: 3px 6px; border: 1px solid var(--ov-line); border-radius: 999px; }
.ov-doc-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.ov-doc-card { padding: 15px 17px; }
.ov-doc-card h3 { font-size: 13.5px; }
.ov-doc-card p { font-size: 13px; }

/* article page */
.ov-doc { width: min(100%, 1240px); margin: 0 auto; color: var(--ov-ink); }
.ov-doc-crumbs { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 12.5px; color: var(--ov-ink-4); }
.ov-doc-crumbs a { color: var(--ov-ink-3); text-decoration: none; }
.ov-doc-crumbs a:hover { color: var(--ov-ink); }
.ov-doc-crumbs [aria-current] { color: var(--ov-ink-2); }
.ov-doc-layout {
  display: grid; grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); gap: 26px; align-items: start;
}
.ov-doc-index {
  position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 100px); overflow: auto; padding: 4px 0 12px;
  scrollbar-width: thin;
}
.ov-doc-index-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 14px; }
.ov-doc-index-head .ic { width: 16px; height: 16px; color: var(--ov-ink-3); }
.ov-doc-index-group, .ov-doc-index-other { display: flex; flex-direction: column; gap: 1px; }
.ov-doc-index-other { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ov-line); }
.ov-doc-index-label { padding: 4px 10px 6px; font: 600 11px/1 var(--ov-font-text); letter-spacing: 0; text-transform: none; color: var(--ov-ink-4); }
.ov-doc-index-link {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--ov-radius-sm);
  font-size: 13.5px; color: var(--ov-ink-2); text-decoration: none; line-height: 1.35;
  transition: background var(--ov-fast) var(--ov-ease), color var(--ov-fast) var(--ov-ease);
}
.ov-doc-index-link .ic { width: 14px; height: 14px; color: var(--ov-ink-4); }
/* The shell paints every legacy <a> --ov-link unless it carries .plainlink, and
   .plainlink itself says inherit + accent on hover; these anchors carry the class
   and restate their own inks one notch more specific than either rule. */
.ov2-global .ov-legacy-main .ov-doc a.ov-doc-index-link { color: var(--ov-ink-2); }
.ov2-global .ov-legacy-main .ov-doc a.ov-doc-index-link:hover { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-doc a.ov-doc-index-link.is-active { color: var(--ov-accent-ink); }
.ov2-global .ov-legacy-main .ov-doc .ov-doc-crumbs a { color: var(--ov-ink-3); }
.ov2-global .ov-legacy-main .ov-doc .ov-doc-crumbs a:hover { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-doc a.ov-doc-foot-link { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-doc a.ov-doc-foot-link:hover { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-doc .ov-doc-toc a { color: var(--ov-ink-2); }
.ov2-global .ov-legacy-main .ov-doc .ov-doc-toc a:hover { color: var(--ov-accent-ink); }
.ov2-global .ov-legacy-main .ov-doc-home a.ov-doc-open { color: var(--ov-accent-ink); }
.ov2-global .ov-legacy-main .ov-doc-home a.ov-doc-open:hover { color: var(--ov-accent-ink); }
.ov-doc-index-link:hover { background: var(--ov-raised); color: var(--ov-ink); }
.ov-doc-index-link.is-active { background: var(--ov-accent-soft); color: var(--ov-accent-ink); font-weight: 600; }
.ov-doc-index-link:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-doc-plane {
  min-width: 0; padding: 30px 38px 26px; background: var(--ov-raised);
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-lg); box-shadow: var(--ov-plane-shadow);
}
.ov-doc-plane:focus { outline: none; }
.ov-doc-head { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--ov-line); }
.ov-doc-head h1 { margin: 6px 0 8px; font: 650 clamp(24px, 2.4vw, 30px)/1.15 var(--ov-font-display); letter-spacing: -0.02em; }
.ov-doc-deck { margin: 0; max-width: 66ch; color: var(--ov-ink-3); font-size: 15px; line-height: 1.5; }
.ov-doc-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 22px; font-size: 13px; }
.ov-doc-toc span { color: var(--ov-ink-4); font-weight: 600; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.ov-doc-toc a { color: var(--ov-ink-2); text-decoration: none; border-bottom: 1px solid var(--ov-line); }
.ov-doc-toc a:hover { color: var(--ov-accent-ink); border-color: var(--ov-accent); }
.ov-doc-body { max-width: 72ch; font-size: 14.5px; line-height: 1.65; color: var(--ov-ink-2); }
.ov-doc-body > :first-child { margin-top: 0; }
.ov-doc-body h2 { margin: 30px 0 10px; font: 650 18px/1.25 var(--ov-font-text); letter-spacing: -0.01em; color: var(--ov-ink); scroll-margin-top: 80px; }
.ov-doc-body h3 { margin: 22px 0 8px; font: 600 15px/1.3 var(--ov-font-text); color: var(--ov-ink); scroll-margin-top: 80px; }
.ov-doc-body h4 { margin: 18px 0 6px; font: 600 13.5px/1.3 var(--ov-font-text); color: var(--ov-ink); }
.ov-doc-body p { margin: 0 0 12px; }
.ov-doc-body ul, .ov-doc-body ol { margin: 0 0 14px; padding-left: 22px; }
.ov-doc-body li { margin: 0 0 5px; }
.ov-doc-body li > ul, .ov-doc-body li > ol { margin: 5px 0 2px; }
.ov-doc-body strong { color: var(--ov-ink); font-weight: 600; }
.ov-doc-body a { color: var(--ov-accent-ink); text-decoration: none; border-bottom: 1px solid var(--ov-accent); }
.ov-doc-body a:hover { border-bottom-width: 2px; }
.ov-doc-body code { font: 500 12.5px/1.4 var(--ov-font-mono); color: var(--ov-ink); background: var(--ov-sunken); border: 1px solid var(--ov-line); border-radius: 4px; padding: 1px 5px; }
.ov-doc-body pre { margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; background: var(--ov-sunken); border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); }
.ov-doc-body pre code { border: 0; padding: 0; background: transparent; font-size: 12.5px; }
.ov-doc-body hr { margin: 22px 0; border: 0; border-top: 1px solid var(--ov-line); }
.ov-doc-note {
  margin: 0 0 14px; padding: 11px 14px 11px 16px; border-left: 3px solid var(--ov-accent);
  background: var(--ov-accent-soft); border-radius: 0 var(--ov-radius-md) var(--ov-radius-md) 0;
  color: var(--ov-ink); font-size: 13.5px; line-height: 1.55;
}
.ov-doc-tablewrap { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); }
.ov-doc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-doc-table th { text-align: left; padding: 8px 11px; background: var(--ov-sunken); color: var(--ov-ink-3); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; border-bottom: 1px solid var(--ov-line); white-space: nowrap; }
.ov-doc-table td { padding: 8px 11px; border-bottom: 1px solid var(--ov-line); vertical-align: top; color: var(--ov-ink-2); }
.ov-doc-table tr:last-child td { border-bottom: 0; }
.ov-doc-table td code { white-space: nowrap; }
.ov-doc-foot { display: flex; justify-content: space-between; gap: 14px; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ov-line); }
.ov-doc-foot-link {
  display: inline-flex; align-items: center; gap: 10px; max-width: 48%; padding: 8px 10px; border-radius: var(--ov-radius-sm);
  color: var(--ov-ink); text-decoration: none; font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.ov-doc-foot-link:hover { background: var(--ov-sunken); }
.ov-doc-foot-link .ic { width: 15px; height: 15px; color: var(--ov-ink-4); flex: 0 0 auto; }
.ov-doc-foot-link span { display: flex; flex-direction: column; }
.ov-doc-foot-link small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ov-ink-4); }
.ov-doc-foot-link.is-next { text-align: right; margin-left: auto; }
@media (max-width: 960px) {
  .ov-doc-layout { grid-template-columns: 1fr; gap: 16px; }
  .ov-doc-index { position: static; max-height: none; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
  .ov-doc-index-head { width: 100%; }
  .ov-doc-index-group, .ov-doc-index-other { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .ov-doc-index-other { width: 100%; border-top: 0; padding-top: 0; margin-top: 0; }
  .ov-doc-index-label { width: 100%; }
  .ov-doc-index-link { border: 1px solid var(--ov-line); }
  .ov-doc-plane { padding: 22px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-doc-open .ic, .ov-doc-index-link, .ov-doc-search-control { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-qa-button,
  .ov-qa-period,
  .ov-qa-thread,
  .ov-qa-loading .ic {
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ov-qa-savebar {
    background: var(--ov-raised);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .ov-qa-plane,
  .ov-qa-thread-panel,
  .ov-qa-conversation,
  .ov-qa-admin,
  .ov-qa-preset-library,
  .ov-qa-preset-editor {
    outline: 1px solid var(--ov-line-strong);
  }
}

:root[data-theme="dark"] {
  /* Graphite, restored 2026-08-25.

     The 499 navy brief was applied here that morning and Kamil rejected the
     result on sight: "mialo byc ciemno - teraz jest granat i niebieski
     wszedzie". Measured, he was describing something real - the navy set
     took card surfaces from 7.6% to 11.8% lightness and from 8% to 40%
     saturation, and the rail to 79%, so the largest planes on screen carried
     the hue instead of the accent doing it.

     I misread his next note ("wczesniejsze kolory byly ok") as meaning the
     navy and put it back; he asked whether the colours were darker again,
     which settled it. These are the values from 22126f9, the last build he
     was happy with. The glass, the radii and the layout work he actually
     asked for all stay.

     The navy palette lives in git if it is ever wanted deliberately. */
  color-scheme: dark;
  --ov-canvas: #09090b;
  --ov-surface: #121215;
  --ov-raised: #141417;
  --ov-sunken: #0e0e11;
  --ov-rail: #09090b;
  --ov-ink: #fafafa;
  --ov-ink-2: #d4d4d8;
  --ov-ink-3: #a1a1aa;
  --ov-ink-4: #8e8e99;   /* AA at 10.5px: 3.80 -> 5.34 on the raised surface */
  --ov-line: rgba(255, 255, 255, 0.08);
  --ov-line-strong: rgba(255, 255, 255, 0.16);
  --ov-control-line: #52525b;
  --ov-accent: #246bfd;
  --ov-accent-hover: #4b8dff;
  --ov-accent-soft: rgba(36, 107, 253, 0.14);
  --ov-accent-ink: #4b8dff;
  --ov-blue: #4b8dff;
  --ov-blue-soft: rgba(36, 107, 253, 0.14);
  --ov-positive: #28a47a;
  --ov-positive-soft: #10291f;
  --ov-negative: #d95c5c;
  --ov-negative-soft: #331b1b;
  /* clay-orange, not gold (house rule; CALLS-29, 2026-09-24): the light
     register's #8a5a2e one step up - 6.9:1 on the surface, 5.7:1 on its
     own soft fill */
  --ov-warning: #d98a5a;
  --ov-warning-soft: #30201a;
  --ov-focus: #4b8dff;
  --ov-focus-ring: rgba(75, 141, 255, 0.28);
  --ov-chart-1: #246bfd;
  --ov-chart-2: #4b8dff;
  --ov-chart-3: #8cb5ff;
  --ov-chart-4: #173b7a;
  --ov-chart-5: #5d6b80;
  --ov-chart-bar: #27272c;
  --ov-chart-grid: rgba(255, 255, 255, 0.06);
  /* Same primary in the dark register (design cluster D4, 2026-09-04).
     The hover deepens instead of lifting: #4b8dff would drop the white
     label to 3.23:1, the deeper blue holds it at 5.85:1. */
  --ov-primary: var(--ov-accent);
  --ov-primary-hover: var(--ov-accent-deep);
  --ov-primary-ink: #ffffff;
  --ov-primary-halo: var(--ov-focus-ring);
  --ov-touch-shadow: 0 1px 2px rgba(0, 0, 0, 0.34),
    0 6px 18px rgba(2, 5, 10, 0.26);
  --ov-plane-shadow: 0 1px 2px rgba(0, 0, 0, 0.38),
    0 18px 48px rgba(2, 5, 10, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--ov-canvas);
}

.ov2 {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  grid-template-areas: "rail top" "rail main";
  /* 2026-08-24 (Kamil, bug list #2): ONE scrollbar. The BODY scrolls;
     the rail and topbar are sticky. The old fixed-height grid made
     .ov-main its own scroller, which stacked an inner vertical scroll on
     top of every table's horizontal one. */
  min-height: 100dvh;
  background: var(--ov-canvas);
  color: var(--ov-ink);
  font-family: var(--ov-font-text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ov2 button,
.ov2 input {
  font: inherit;
}

.ov2 button,
.ov2 a,
.ov2 input,
.ov2 summary {
  transition: color 120ms var(--ov-ease),
    background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease),
    box-shadow 180ms var(--ov-ease), transform 120ms var(--ov-ease);
}

.ov2 button:active,
.ov2 .ov-account:active,
.ov2 .ov-nav-link:active,
.ov2 summary:active {
  transform: scale(0.985);
}

.ov2 button:focus-visible,
.ov2 a:focus-visible,
.ov2 input:focus-visible,
.ov2 summary:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

.ov2 button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.ov-mono,
.ov-money,
.ov-number {
  font-family: var(--ov-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.025em;
}

.ov-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Rail */
.ov-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 20;
  background: var(--ov-rail);
  box-shadow: inset -1px 0 var(--ov-line);
}

.ov-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 16px;
  color: var(--ov-ink);
  text-decoration: none;
}

.ov-brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 7px rgba(10, 12, 13, 0.16);
}

.ov-brand-mark svg {
  width: 18px;
  height: 18px;
}

.ov-brand b {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.018em;
}

.ov-account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 8px 12px 4px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ov-ink);
  text-align: left;
}

.ov-account-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  font-size: 11.5px;
  font-weight: 750;
}

.ov-account-name,
.ov-account-type {
  display: block;
}

.ov-account-name {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
}

.ov-account-type {
  color: var(--ov-ink-3);
  font-size: 12px;
}

.ov-rail nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 16px;
}

.ov-nav-group {
  padding: 17px 10px 6px;
  color: var(--ov-ink-4);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
}

.ov-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ov-ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 470;
  position: relative;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.ov-nav-link svg { transition: color 0.18s ease; }

.ov-nav-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.ov-nav-link:hover {
  background: var(--ov-raised);
  color: var(--ov-ink);
  box-shadow: 0 1px 2px rgba(18, 20, 24, 0.05);
}

.ov-nav-link[aria-current="page"] {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  font-weight: 590;
}

.ov-nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--ov-accent);
}

.ov-nav-count {
  margin-left: auto;
  color: var(--ov-ink-4);
  font-family: var(--ov-font-mono);
  font-size: 11.5px;
}

/* Top controls */
.ov-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 15;
  background: color-mix(in srgb, var(--ov-surface) 88%, transparent);
  box-shadow: inset 0 -1px var(--ov-line);
  backdrop-filter: saturate(150%) blur(18px);
}



/* Desktop: the trigger collapses the rail (shadcn shell, 2026-08-24).
   It is a <button> - opt out of the CTA skin, it is chrome. */
.ov-menu-button, .ov2 .ov-menu-button, .ov2-global .ov-menu-button {
  display: grid;
  background: transparent;
  border: 1px solid var(--ov-line);
  color: var(--ov-ink-3);
  box-shadow: none;
}
.ov-menu-button:hover { color: var(--ov-ink); background: var(--ov-sunken); }

.ov2 {
  transition: grid-template-columns 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 1101px) {
  .ov2.ov-rail-collapsed { grid-template-columns: 0px minmax(0, 1fr); }
  .ov-rail-collapsed .ov-rail { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ov2 { transition: none; }
}

.ov-page-search {
  width: min(360px, 31vw);
  margin-left: auto;
  position: relative;
}

.ov-page-search input {
  width: 100%;
  height: 36px;
  padding: 0 50px 0 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--ov-sunken);
  color: var(--ov-ink);
  font-size: 14px;
}

.ov-page-search input:hover {
  background: var(--ov-raised);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-page-search input:focus {
  outline: none;
  background: var(--ov-raised);
  box-shadow: 0 0 0 3px var(--ov-focus-ring),
    inset 0 0 0 1px var(--ov-focus);
}

.ov-page-search > svg {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ov-ink-3);
  stroke-width: 1.8;
  pointer-events: none;
}

.ov-page-search kbd {
  position: absolute;
  right: 8px;
  top: 7px;
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 22px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--ov-raised);
  box-shadow: inset 0 0 0 1px var(--ov-line),
    0 1px 1px rgba(18, 20, 24, 0.06);
  color: var(--ov-ink-3);
  font: 520 11.5px/1 var(--ov-font-text);
  pointer-events: none;
}

.ov-icon-button,
.ov-menu-button,
.ov-date summary {
  height: 38px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  cursor: pointer;
}

.ov-icon-button,
.ov-menu-button {
  width: 38px;
  padding: 0;
  place-items: center;
}

.ov-icon-button {
  display: grid;
}

.ov-icon-button:hover,
.ov-menu-button:hover,
.ov-date summary:hover {
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-icon-button svg,
.ov-menu-button svg,
.ov-date summary svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.ov-date {
  position: relative;
}

.ov-date summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  list-style: none;
  font-size: 14px;
  font-weight: 540;
}

.ov-date summary::-webkit-details-marker {
  display: none;
}

.ov-date summary b {
  color: var(--ov-ink);
  font-weight: 650;
}

.ov-date-popover {
  position: absolute;
  right: 0;
  top: 46px;
  width: min(390px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--ov-line-strong);
  border-radius: var(--ov-radius-md);
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 12px;
}

.ov-presets a {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--ov-ink-2);
  text-decoration: none;
  font-size: 13px;
}

.ov-presets a:hover,
.ov-presets a[aria-current="true"] {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
}

.ov-date-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  padding-top: 12px;
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-date-form input {
  min-width: 0;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--ov-control-line);
  border-radius: 8px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: 12px;
}

.ov-action-button {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--ov-accent);
  border-radius: 8px;
  background: var(--ov-accent);
  color: #fff;
  text-decoration: none; /* the campaign page's one is an <a> */
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 650;
}

.ov-action-button:hover {
  border-color: var(--ov-primary-hover);
  background: var(--ov-primary-hover);
}

/* Main workspace */
.ov-main {
  grid-area: main;
  padding: 34px 32px 56px;
}

.ov-security-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--ov-radius-md);
  background: var(--ov-warning-soft);
  color: var(--ov-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ov-warning) 28%, transparent),
              var(--ov-touch-shadow);
}

.ov-security-banner-icon {
  display: inline-flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ov-warning);
  color: var(--ov-raised);
  font-size: 14px;
  font-weight: 760;
}

.ov-security-banner-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  line-height: 1.4;
}

.ov-security-banner-copy b {
  color: var(--ov-warning);
  font-size: 14px;
  font-weight: 690;
}

.ov-security-banner .ov-secondary-button {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--ov-warning) 30%, transparent);
  background: color-mix(in srgb, var(--ov-raised) 84%, transparent);
}

.ov-heading {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  margin-bottom: 24px;
}

.ov-heading-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ov-eyebrow {
  color: var(--ov-ink-3);
  font-size: 12px;
  font-weight: 560;
}

.ov-title-line {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ov-title-line h1 {
  margin: 0;
  font-family: var(--ov-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 1;
}

.ov-view-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
  font-size: 12.5px;
  font-weight: 590;
}

.ov-view-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ov-positive);
  box-shadow: 0 0 0 3px var(--ov-positive-soft);
}

.ov-heading-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.ov-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--ov-control-line);
  border-radius: 8px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 630;
}

.ov-secondary-button:hover {
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-dashboard-plane {
  overflow: hidden;
  border-radius: 18px;
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-kpis {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: var(--ov-surface);
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-kpi {
  min-width: 0;
  padding: 20px 22px 19px;
  position: relative;
}

.ov-kpi + .ov-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--ov-line);
}

.ov-kpi-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  color: var(--ov-ink-3);
  font-size: 13px;
  font-weight: 500;
}

.ov-kpi-value {
  font-family: var(--ov-font-display);
  font-size: 28px;
  font-weight: 680;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.ov-kpi:first-child .ov-kpi-value {
  font-size: 35px;
  font-weight: 720;
  letter-spacing: -0.052em;
}

.ov-kpi-context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 12px;
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--ov-font-mono);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}

.ov-delta-up {
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

.ov-delta-down {
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-delta-flat {
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-chart-section {
  padding: 3px 0 4px;
}

.ov-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 28px 4px;
}

.ov-section-heading h2,
.ov-report-heading h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 610;
  letter-spacing: -0.012em;
}

.ov-chart-title {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ov-chart-summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.ov-chart-total {
  font-family: var(--ov-font-display);
  font-size: 23px;
  font-weight: 670;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.035em;
}

.ov-chart-note,
.ov-report-subtitle {
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-chart-legend {
  display: flex;
  gap: 16px;
  margin-left: auto;
  color: var(--ov-ink-3);
  font-size: 13px;
}

.ov-chart-legend i {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: 3px;
  background: var(--ov-accent);
}

.ov-chart-legend .ov-revenue-key i {
  height: 0;
  border-top: 2px dashed var(--ov-blue);
  background: none;
}

.ov-chart {
  padding: 10px 20px 18px;
}

.ov-chart svg {
  display: block;
  width: 100%;
  height: 160px;
  overflow: visible;
}

.ov-chart-grid {
  stroke: var(--ov-line);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.ov-chart-area {
  fill: var(--ov-accent-soft);
  opacity: 0.8;
}

.ov-chart-profit {
  fill: none;
  stroke: var(--ov-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ov-chart-revenue {
  fill: none;
  stroke: var(--ov-blue);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.ov-chart-axis {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px 0;
  color: var(--ov-ink-4);
  font-size: 11.5px;
  font-weight: 500;
}

.ov-empty-chart {
  display: grid;
  place-items: center;
  min-height: 160px;
  color: var(--ov-ink-3);
  font-size: 14px;
}

.ov-alerts {
  padding: 0 22px 10px;
}

.ov-alert {
  display: grid;
  grid-template-columns: auto minmax(120px, auto) 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-alert:last-child {
  box-shadow: none;
}

.ov-alert-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ov-ink-4);
}

.ov-alert-high .ov-alert-icon {
  background: var(--ov-negative);
}

.ov-alert-med .ov-alert-icon {
  background: var(--ov-warning);
}

.ov-alert b {
  font-weight: 620;
}

.ov-alert-detail {
  color: var(--ov-ink-3);
  font-size: 13.5px;
}

.ov-alert-metric {
  color: var(--ov-ink-3);
  font-family: var(--ov-font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

.ov-report {
  overflow: hidden;
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-report-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 15px 22px;
}

.ov-report-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.ov-table-wrap {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.ov-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  font-size: 14px;
}

.ov-table th {
  padding: 10px 16px;
  position: sticky;
  top: 0;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line);
  color: var(--ov-ink-2);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
}

.ov-table th.ov-right,
.ov-table td.ov-right {
  text-align: right;
}

.ov-table tbody td {
  height: 52px;
  padding: 9px 16px;
  box-shadow: inset 0 -1px var(--ov-line);
  vertical-align: middle;
  white-space: nowrap;
}

.ov-table tbody tr:hover,
.ov-table tbody tr:focus-within {
  background: var(--ov-surface);
}

.ov-source {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ov-source-mark {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  font-size: 11.5px;
  font-weight: 750;
}

.ov-source b {
  display: block;
  overflow: hidden;
  max-width: 260px;
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -0.005em;
  text-overflow: ellipsis;
}

.ov-source small {
  display: block;
  color: var(--ov-ink-3);
  font-size: 12px;
}

.ov-profit-bar {
  display: inline-block;
  width: 54px;
  height: 5px;
  overflow: hidden;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--ov-sunken);
  vertical-align: middle;
}

.ov-profit-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ov-accent);
}

.ov-profit-positive {
  color: var(--ov-positive);
  font-weight: 680;
}

.ov-profit-negative {
  color: var(--ov-negative);
  font-weight: 680;
}

.ov-table tfoot td {
  height: 46px;
  padding: 10px 16px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line-strong);
  font-weight: 690;
  white-space: nowrap;
}

.ov-nav-scrim {
  display: none;
}

@media (max-width: 1100px) {
  .ov2 {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "main";
  }

  .ov-menu-button {
    display: grid;
  }

  .ov-rail {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    width: min(304px, calc(100vw - 48px));
    z-index: 30;
    transform: translateX(-104%);
    transition: transform 320ms var(--ov-spring);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  }

  .ov2.ov-nav-open {
    overflow: hidden;
  }

  .ov-nav-open .ov-rail {
    transform: translateX(0);
  }

  .ov-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(8, 10, 9, 0.42);
    opacity: 0;
    pointer-events: none;
    z-index: 25;
    transition: opacity 220ms var(--ov-ease);
  }

  .ov-nav-open .ov-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* The scrim is a <button>, and `html.dark button` (0,1,2) outranked the
     bare class above: the dark drawer opened over a full royal-blue field
     and iOS tinted its toolbar to match (Kamil, 2026-09-25, "do poprawy").
     Same neutral dim, now with the weight to win. */
  .ov2 .ov-nav-scrim,
  html.dark .ov2 .ov-nav-scrim {
    background: rgba(8, 10, 9, 0.42);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
  }
  html.dark .ov2 .ov-nav-scrim { background: rgba(0, 0, 0, 0.56); }

  .ov-top {
    padding: 0 18px;
  }

  .ov-page-search {
    flex: 1;
    width: auto;
    margin-left: 0;
  }

  .ov-main {
    padding: 28px 20px 44px;
  }

  .ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-kpi:nth-child(3)::before {
    display: none;
  }

  .ov-kpi:nth-child(n + 3) {
    box-shadow: inset 0 1px var(--ov-line);
  }
}

@media (max-width: 640px) {
  .ov2 {
    grid-template-rows: 58px minmax(0, 1fr);
  }

  .ov-top {
    gap: 8px;
    padding: 0 12px;
  }

  .ov-menu-button,
  .ov-icon-button,
  .ov-date summary {
    height: 44px;
  }

  .ov-menu-button,
  .ov-icon-button {
    width: 44px;
  }

  .ov-page-search {
    display: none;
  }

  .ov-date {
    margin-left: auto;
  }

  .ov-date summary span {
    display: none;
  }

  .ov-main {
    padding: 20px 12px 34px;
  }

  .ov-security-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ov-security-banner-copy {
    flex-basis: calc(100% - 36px);
  }

  .ov-security-banner .ov-secondary-button {
    width: 100%;
  }

  .ov-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
  }

  .ov-heading-copy {
    flex: 0 0 100%;
  }

  .ov-title-line h1 {
    font-size: 27px;
  }

  .ov-heading-actions {
    margin-left: 0;
  }

  .ov-secondary-button {
    min-height: 44px;
  }

  .ov-dashboard-plane {
    border-radius: var(--ov-radius-lg);
  }

  .ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-kpi:first-child {
    grid-column: 1 / -1;
  }

  .ov-kpi:nth-child(2)::before {
    display: none;
  }

  .ov-kpi:nth-child(4) {
    grid-column: 1 / -1;
  }

  .ov-kpi:nth-child(4)::before {
    display: none;
  }

  .ov-kpi {
    padding: 15px 14px;
  }

  .ov-kpi:first-child .ov-kpi-value {
    font-size: 35px;
  }

  .ov-kpi-value {
    font-size: 25px;
  }

  .ov-section-heading {
    padding: 20px 14px 2px;
  }

  .ov-chart-total {
    font-size: 20px;
  }

  .ov-chart-legend {
    gap: 10px;
    font-size: 12px;
  }

  .ov-chart {
    padding: 10px 8px 16px;
  }

  .ov-chart svg {
    height: 136px;
  }

  .ov-alerts {
    padding: 0 14px 10px;
  }

  .ov-alert {
    grid-template-columns: auto 1fr auto;
  }

  .ov-alert-detail {
    grid-column: 2 / -1;
  }

  .ov-report-heading {
    min-height: 58px;
    padding: 12px 14px;
    flex-wrap: wrap;
  }

  .ov-report-actions {
    flex: 0 0 100%;
    margin: 8px 0 0;
  }

  .ov-table-wrap {
    overflow: visible;
  }

  .ov-table {
    display: block;
    min-width: 0;
    font-size: 13.5px;
  }

  .ov-table thead,
  .ov-table tfoot {
    display: none;
  }

  .ov-table tbody {
    display: grid;
  }

  .ov-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 15px 14px 14px;
    box-shadow: inset 0 -1px var(--ov-line);
  }

  .ov-table tbody td {
    min-width: 0;
    height: auto;
    padding: 0;
    box-shadow: none;
    text-align: left;
    white-space: normal;
  }

  .ov-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--ov-ink-4);
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
  }

  .ov-table tbody td:first-child {
    grid-column: 1 / 3;
  }

  .ov-table tbody td:first-child::before,
  .ov-table tbody td:last-child::before {
    display: none;
  }

  .ov-table tbody td:last-child {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }

  .ov-source b {
    max-width: 180px;
  }

  .ov-date-form {
    grid-template-columns: 1fr 1fr;
  }

  .ov-date-form .ov-action-button {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ov-top {
    background: var(--ov-surface);
    backdrop-filter: none;
  }

  .ov-nav-scrim,
  .ov2 .ov-nav-scrim,
  html.dark .ov2 .ov-nav-scrim {
    background: rgba(0, 0, 0, 0.58);
  }
}

@media (prefers-contrast: more) {
  .ov-dashboard-plane,
  .ov-secondary-button,
  .ov-date summary,
  .ov-icon-button,
  .ov-menu-button {
    outline: 1px solid var(--ov-line-strong);
  }

  .ov-top,
  .ov-rail {
    background: var(--ov-raised);
  }
}

.ov-impersonation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.ov-impersonation svg {
  width: 15px;
  height: 15px;
}

.ov-dist {
  width: min(100%, 2600px);
  margin: 0 auto;
  color: var(--ov-ink);
}

.ov-dist-heading {
  align-items: center;
}

.ov-heading-note {
  max-width: 720px;
  margin: 1px 0 0;
  color: var(--ov-ink-3);
  font-size: 13.5px;
}

.ov-back-link {
  width: max-content;
  color: var(--ov-ink-3);
  font-size: 13px;
  font-weight: 560;
  text-decoration: none;
}

.ov-back-link:hover {
  color: var(--ov-accent-ink);
}

.ov-create-disclosure {
  position: relative;
}

.ov-create-popover {
  position: absolute;
  right: 0;
  top: 46px;
  z-index: 30;
  width: min(420px, calc(100vw - 24px));
  padding: 20px;
  border: 1px solid var(--ov-line-strong);
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-create-popover h2 {
  margin: 0 0 16px;
  font: 680 19px/1.1 var(--ov-font-display);
  letter-spacing: -0.025em;
}

.ov-form-stack {
  display: grid;
  gap: 13px;
}

.ov-help {
  color: var(--ov-ink-3);
  font-size: 12.5px;
  line-height: 1.45;
}

.ov-workspace-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin: -4px 0 18px;
  padding: 4px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ov-canvas) 90%, transparent);
  backdrop-filter: saturate(140%) blur(16px);
  scrollbar-width: none;
}

.ov-workspace-tabs::-webkit-scrollbar {
  display: none;
}

.ov-workspace-tabs a {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--ov-ink-3);
  font-size: 13px;
  font-weight: 590;
  text-decoration: none;
  white-space: nowrap;
}

.ov-workspace-tabs a:hover {
  background: var(--ov-raised);
  color: var(--ov-ink);
}

.ov-workspace-tabs a[aria-current="page"] {
  background: var(--ov-raised);
  color: var(--ov-accent-ink);
  box-shadow: var(--ov-touch-shadow);
}

.ov-dist .card,
.ov-dist .ov-dist-primary {
  margin: 14px 0;
  padding: 20px 22px;
  scroll-margin-top: 58px;
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
}

.ov-dist .card h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 15px;
  font: 650 15px/1.2 var(--ov-font-display);
  letter-spacing: -0.016em;
}

.ov-dist .card h2 .sub {
  font-family: var(--ov-font-text);
  font-size: 12.5px;
  font-weight: 480;
}

.ov-dist-overview > .ov-dashboard-plane {
  overflow: visible;
}

.ov-dist-overview > .ov-dashboard-plane > .card {
  margin: 0;
  padding: 24px 28px;
  border-radius: 0;
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-dist-overview > .ov-dashboard-plane > .card:last-child {
  box-shadow: none;
}

.ov-dist-kpis {
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
}

.ov-dist .kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--ov-surface);
}

.ov-dist .kpi {
  min-width: 0;
  padding: 18px 17px;
  position: relative;
}

.ov-dist .kpi + .kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 17px;
  width: 1px;
  background: var(--ov-line);
}

.ov-dist .kpi span,
.ov-dist .kpi b {
  display: block;
}

.ov-dist .kpi span {
  min-height: 32px;
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-dist .kpi b {
  margin-top: 8px;
  font: 680 22px/1 var(--ov-font-display);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.035em;
}

.ov-dist .sub {
  color: var(--ov-ink-3);
  font-size: 13px;
}

/* Rule 8's own exclusion, applied at the source: an anchor that IS a button
   (a.ov-action-button 'Manage routing', a.ov-secondary-button) takes the
   button's ink, not the link's - the link colour on the accent fill was
   2.23:1 light / 1.43:1 dark (VIS-01 / LS-22, 2026-09-16). */
.ov-dist a:not([class*="-button"]) {
  color: var(--ov-accent-ink);
}

.ov-dist p {
  margin: 8px 0;
}

.ov-dist label {
  display: grid;
  gap: 5px;
  color: var(--ov-ink-2);
  font-size: 13px;
  font-weight: 570;
}

.ov-dist input:not([type="checkbox"]):not([type="radio"]),
.ov-dist select,
.ov-dist textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--ov-control-line);
  border-radius: 8px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  font: 480 14px/1.35 var(--ov-font-text);
}

.ov-dist input:hover,
.ov-dist select:hover,
.ov-dist textarea:hover {
  border-color: var(--ov-ink-3);
}

.ov-dist input:focus,
.ov-dist select:focus,
.ov-dist textarea:focus {
  outline: none;
  border-color: var(--ov-focus);
  box-shadow: 0 0 0 3px var(--ov-focus-ring);
}

.ov-dist input:disabled,
.ov-dist select:disabled,
.ov-dist textarea:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

/* A locked control looks locked and its word greys with it (ink-4, 5.27:1
   on white; inactive controls are exempt from AA anyway) instead of a 52%
   ghost of an editable field: the invite form's IO fields and product
   radios read as enabled while their checkbox was unticked (VIS-20 /
   LS-21, 2026-09-16). The (0,4,1) weight outranks the .52 rule in the
   global shell and the workspace's white field ground. */
.ov-dist label:has(> input:disabled) { color: var(--ov-ink-4); }
.ov2-global .ov-dist input[name=io_product]:disabled { opacity: 1; }
.ov2-global .ov-dist.ov-task-workspace :is(input, select, textarea):disabled {
  background: var(--ov-sunken);
  color: var(--ov-ink-4);
  opacity: 1;
}

.ov-dist .chk {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
}

.ov-dist input[type="checkbox"],
.ov-dist input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ov-accent);
}

.ov-dist button,
.ov-dist .sf-btn,
.ov-dist .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--ov-control-line);
  border-radius: 8px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 630;
  line-height: 1.2;
  text-decoration: none;
}

.ov-dist button:hover,
.ov-dist .sf-btn:hover,
.ov-dist .chip:hover {
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-dist button.primary,
.ov-dist .sf-btn.primary,
.ov-dist button:not([class]) {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: #fff;
}

.ov-dist .danger {
  border-color: var(--ov-negative);
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-dist button:disabled,
.ov-dist .sf-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.ov-dist .filters {
  display: flex;
  align-items: end;
  gap: 9px;
  flex-wrap: wrap;
}

.ov-dist .grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ov-dist .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1;
  text-transform: none;
}

.ov-dist .tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ov-dist .tag.dim {
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-dist .alert-amber {
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-dist .pos {
  color: var(--ov-positive);
  font-weight: 650;
}

.ov-dist .neg {
  color: var(--ov-negative);
  font-weight: 650;
}

.ov-dist .tablewrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-dist table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

.ov-dist th,
.ov-dist td {
  height: 40px;
  padding: 8px 11px;
  box-shadow: inset 0 -1px var(--ov-line);
  text-align: left;
  vertical-align: middle;
}

.ov-dist th {
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.ov-dist tbody tr:last-child td {
  box-shadow: none;
}

.ov-dist tbody tr[data-href] {
  cursor: pointer;
}

.ov-dist tbody tr[data-href]:hover,
.ov-dist tbody tr[data-href]:focus-visible {
  outline: none;
  background: var(--ov-accent-soft);
}

.ov-dist .r {
  text-align: right;
  font-family: var(--ov-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.ov-dist details > summary {
  cursor: pointer;
  list-style: none;
}

.ov-dist details > summary::-webkit-details-marker {
  display: none;
}

.ov-dist details[open] > summary {
  color: var(--ov-accent-ink);
}

.ov-dist .fillbar {
  height: 6px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--ov-sunken);
}

.ov-dist .fillbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ov-accent);
}

.ov-dist-campaign > .grid2 {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}

/* Buyer form in groups (Kamil, 2026-09-18): fieldsets with an eyebrow, a
   three-column grid that never stretches a control to its tallest
   neighbour, compact inputs, monospace for the JSON maps. */
.ov-dist .ov-buyer-form { display: grid; gap: 14px; margin-top: 12px; container-type: inline-size; }
.ov-dist .ov-bf-group {
  margin: 0; padding: 12px 14px 14px; min-width: 0;
  border: 1px solid var(--ov-line); border-radius: 10px; background: var(--ov-fill-subtle);
}
.ov-dist .ov-bf-group > legend { padding: 0 6px; margin-left: -6px; }
.ov-dist .ov-bf-group > legend .ov-eyebrow { display: inline-block; }
.ov-dist .ov-bf-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px; align-items: start; margin-top: 6px;
}
.ov-dist .ov-bf-grid > label { align-self: start; }
.ov-dist .ov-bf-grid input:not([type="checkbox"]),
.ov-dist .ov-bf-grid select { min-height: 34px; padding: 6px 10px; align-self: start; }
.ov-dist .ov-bf-grid select[multiple] { min-height: 96px; }
.ov-dist .ov-bf-grid input.mono { font: 480 12.5px/1.4 var(--ov-font-mono); }
.ov-dist .ov-bf-span2 { grid-column: 1 / -1; }
.ov-dist .ov-bf-span3 { grid-column: 1 / -1; }
.ov-dist .ov-bf-check { display: flex; align-items: center; gap: 8px; align-self: end; min-height: 34px; font-weight: 570; }
.ov-dist .ov-bf-check input { width: auto; min-height: 0; }
.ov-dist .ov-bf-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The form sits in the half-width Buyers card, so the column count follows
   the form's own width, not the viewport: two columns as the default, three
   only when the card is wide, one on a phone. */
@container (min-width: 760px) { .ov-dist .ov-bf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-dist .ov-bf-span2 { grid-column: span 2; } }
@container (max-width: 420px) { .ov-dist .ov-bf-grid { grid-template-columns: 1fr; } .ov-dist .ov-bf-span2 { grid-column: 1 / -1; } }

/* Affiliate page, Everflow-shaped (Kamil, 2026-09-18): a strip of the
   numbers that matter under the header, then one tab at a time. Tiles are
   the /report KPI language (display face, tabular digits, hairline
   dividers); the tabs are the shared .ov-workspace-tabs pill row. */
.ov-aff-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
}
.ov-aff-strip .ov-kpi { position: relative; min-width: 0; padding: 14px 18px 13px; }
.ov-aff-strip .ov-kpi + .ov-kpi::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--ov-line);
}
.ov-aff-strip .ov-kpi-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-aff-strip .ov-kpi .ov-kpi-value, .ov-aff-strip .ov-kpi:first-child .ov-kpi-value { display: block; font-size: 24px; font-weight: 680; letter-spacing: -0.04em; line-height: 1; }
.ov-aff-strip .ov-kpi .ov-crm-status { margin-top: 8px; }
.ov-aff-tabs { margin-top: 0; }
.ov-aff-tabs .ov-tab-n {
  display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px;
  background: var(--ov-fill-subtle); color: var(--ov-ink-3); font-size: 11px; font-weight: 640; line-height: 18px; text-align: center;
}
.ov-aff-tabs a[aria-current="page"] .ov-tab-n { background: color-mix(in srgb, var(--ov-accent) 14%, transparent); color: var(--ov-accent-ink); }
.ov-aff-panel { animation: fadeUp .16s ease; }
.ov-aff-panel[hidden] { display: none; }
.ov-aff-panel > .ov-crm-plane { margin-bottom: 14px; }
.ov-aff-url { display: inline-block; max-width: 100%; font-size: 12px; word-break: break-all; }
.ov-crm-panel-body .ov-crm-group-label { padding: 0; }
@media (max-width: 1100px) { .ov-aff-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-aff-strip .ov-kpi:nth-child(4)::before { display: none; } }
@media (max-width: 640px) {
  .ov-aff-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-aff-strip .ov-kpi { padding: 12px 14px 11px; }
  .ov-aff-strip .ov-kpi:first-child, .ov-aff-strip .ov-kpi:nth-child(4) { grid-column: auto; }
  .ov-aff-strip .ov-kpi:nth-child(odd)::before { display: none; }
  .ov-aff-strip .ov-kpi:nth-child(even)::before { display: block; }
  .ov-aff-strip .ov-kpi .ov-kpi-value, .ov-aff-strip .ov-kpi:first-child .ov-kpi-value { font-size: 20px; }
}

/* Source card on a campaign (Mahadev, 2026-09-17): "Source settings" unfolds
   the price panel under the action row; the open state reads on the button. */
.ov-src-price { animation: fadeUp .16s ease; }
[data-price-toggle][aria-expanded="true"] { background: var(--line); }

/* Jev suggestion pill (jev.py, 2026-09-18): a hint beside the decision,
   in the accent family so it reads as "the machine thinks", never as a
   status the system has already set. */
.tag.ov-ai-hint { background: transparent; color: var(--ov-accent); border: 1px dashed var(--ov-accent); }
.tag.ov-ai-hint a { color: inherit; text-decoration: underline; }

/* Source routing matrix scrolls inside its box; the feed names stay put. */
.ov-routing-wrap thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }

@media (max-width: 1100px) {
  .ov-dist .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ov-dist .kpi:nth-child(4)::before {
    display: none;
  }

  .ov-dist-campaign > .grid2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ov2-dist .ov-top {
    padding-right: 12px;
  }

  .ov-dist-heading .ov-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-dist-heading .ov-heading-actions > * {
    min-width: 0;
  }

  .ov-create-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 66px;
    width: auto;
  }

  .ov-workspace-tabs {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 0;
  }

  .ov-workspace-tabs a,
  .ov-dist button:not(.ov-crm-linkbtn),
  .ov-dist .sf-btn,
  .ov-dist .chip,
  .ov2-dist .ov-action-button {
    min-height: 44px;
  }

  .ov-dist-kpis,
  .ov-dist .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-dist .kpi:first-child {
    grid-column: auto;
  }

  .ov-dist .kpi:nth-child(3)::before,
  .ov-dist .kpi:nth-child(5)::before {
    display: none;
  }

  .ov-dist .kpi {
    padding: 15px 13px;
  }

  .ov-dist .kpi b,
  .ov-dist-kpis .ov-kpi-value,
  .ov-dist-kpis .ov-kpi:first-child .ov-kpi-value {
    font-size: 22px;
  }

  .ov-dist .card,
  .ov-dist .ov-dist-primary,
  .ov-dist-overview > .ov-dashboard-plane > .card {
    padding: 17px 14px;
    border-radius: var(--ov-radius-md);
  }

  .ov-dist-overview > .ov-dashboard-plane > .card {
    border-radius: 0;
  }

  .ov-dist .grid2 {
    grid-template-columns: 1fr;
  }

  .ov-dist .filters {
    align-items: stretch;
    flex-direction: column;
  }

  .ov-dist .filters > label,
  .ov-dist .filters > button,
  .ov-dist .filters > .sf-btn {
    width: 100%;
  }

  .ov-dist table {
    min-width: 720px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ov-workspace-tabs {
    background: var(--ov-canvas);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .ov-dist .card,
  .ov-create-popover,
  .ov-workspace-tabs a[aria-current="page"] {
    outline: 1px solid var(--ov-line-strong);
  }
}

/* Lead warehouse workspace */
.ov-leads-workspace {
  /* on-accent white in both registers - --ov-raised went near-black in
     dark and hid the Export CSV label (LEADS-01, 2026-09-24) */
  --ov-leads-control-text: var(--ov-primary-ink);
}

.ov-leads-workspace .ov-heading-actions {
  align-items: center;
}

.ov-leads-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  cursor: pointer;
  font: 630 13.5px/1.2 var(--ov-font-text);
  text-decoration: none;
  transition: color 120ms var(--ov-ease),
    background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease),
    box-shadow 180ms var(--ov-ease), transform 180ms var(--ov-spring);
}

.ov-leads-button .ic {
  width: 15px;
  height: 15px;
}

.ov-leads-button:hover {
  border-color: var(--ov-line-strong);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-leads-button:active {
  transform: scale(.985);
}

.ov-leads-button:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

.ov-leads-button:disabled {
  cursor: not-allowed;
  opacity: .5;
  transform: none;
  box-shadow: none;
}

.ov-leads-button-primary {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-leads-control-text);
}

.ov-leads-button-primary:hover {
  border-color: var(--ov-accent-hover);
  background: var(--ov-accent-hover);
  color: var(--ov-leads-control-text);
}

.ov-leads-button-warning {
  border-color: var(--ov-warning);
  background: var(--ov-warning);
  color: var(--ov-raised);
}

.ov-leads-button-warning:hover {
  border-color: var(--ov-warning);
  background: var(--ov-warning);
  color: var(--ov-raised);
}

/* Beat the broader .ov-dist link color without relying on load order. */
.ov-leads-workspace .ov-leads-button {
  color: var(--ov-ink-2);
}

.ov-leads-workspace .ov-leads-button:hover {
  color: var(--ov-ink);
}

.ov-leads-workspace .ov-leads-button-primary {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-leads-control-text);
}

.ov-leads-workspace .ov-leads-button-primary:hover {
  border-color: var(--ov-accent-hover);
  background: var(--ov-accent-hover);
  color: var(--ov-leads-control-text);
}

.ov-leads-workspace .ov-leads-button-warning,
.ov-leads-workspace .ov-leads-button-warning:hover {
  border-color: var(--ov-warning);
  background: var(--ov-warning);
  color: var(--ov-raised);
}

.ov-leads-metrics {
  margin-bottom: 18px;
}

.ov-leads-kpis {
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
}

.ov-leads-kpis .ov-kpi:first-child .ov-kpi-value {
  font-size: 31px;
}

.ov-leads-plane {
  overflow: hidden;
  border-radius: 18px;
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-leads-plane-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 18px;
}

.ov-leads-plane-heading h2 {
  margin: 3px 0 0;
  font: 680 20px/1.1 var(--ov-font-display);
  letter-spacing: -.026em;
}

.ov-lead-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 7px;
  font: 650 11.5px/1 var(--ov-font-text);
  white-space: nowrap;
}

.ov-lead-status .ic {
  width: 13px;
  height: 13px;
}

.ov-lead-status > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.ov-lead-status-positive {
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

.ov-lead-status-warning {
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
}

.ov-lead-status-neutral {
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-leads-filter-form {
  padding: 18px 22px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line);
}

.ov-leads-filter-form label,
.ov-leads-bulk-form label {
  display: grid;
  gap: 6px;
  color: var(--ov-ink-3);
  font: 580 12.5px/1.25 var(--ov-font-text);
}

.ov-leads-primary-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(145px, 1fr));
  gap: 10px;
}

.ov2-global .ov-leads-workspace :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  font: 480 14px/1.35 var(--ov-font-text);
  box-shadow: none;
}

.ov2-global .ov-leads-workspace :is(input, select):hover:not(:disabled) {
  border-color: var(--ov-line-strong);
}

.ov2-global .ov-leads-workspace :is(input, select):focus {
  border-color: var(--ov-focus);
  outline: 0;
  box-shadow: 0 0 0 3px var(--ov-focus-ring);
}

.ov-leads-more-filters {
  margin-top: 12px;
  border: 1px solid var(--ov-line);
  border-radius: 10px;
  background: var(--ov-raised);
}

.ov-leads-more-filters > summary,
.ov-leads-bulk-disclosure > summary,
.ov-leads-guide > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ov-ink-2);
  font: 630 13px/1.25 var(--ov-font-text);
  list-style: none;
}

.ov-leads-more-filters > summary::-webkit-details-marker,
.ov-leads-bulk-disclosure > summary::-webkit-details-marker,
.ov-leads-guide > summary::-webkit-details-marker {
  display: none;
}

.ov-leads-more-filters > summary > span:first-child,
.ov-leads-bulk-disclosure > summary > span:first-child,
.ov-leads-guide > summary {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ov-leads-more-filters summary .ic,
.ov-leads-bulk-disclosure summary .ic,
.ov-leads-guide summary .ic {
  width: 15px;
  height: 15px;
}

.ov-leads-more-filters > summary:hover,
.ov-leads-bulk-disclosure > summary:hover,
.ov-leads-guide > summary:hover {
  color: var(--ov-ink);
}

.ov-leads-more-filters[open] > summary {
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-leads-secondary-filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
  padding: 12px;
}

.ov-leads-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.ov-leads-filter-note {
  margin-left: auto;
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-leads-bulk-disclosure {
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-leads-bulk-disclosure[open] > summary {
  background: var(--ov-warning-soft);
  box-shadow: inset 0 -1px var(--ov-line);
}

.ov-leads-bulk-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 22px 18px;
}

.ov-leads-bulk-warning {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--ov-warning-soft);
  color: var(--ov-ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.ov-leads-bulk-warning .ic {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--ov-warning);
}

.ov-leads-results {
  min-height: 180px;
}

.ov2-global .ov-leads-workspace .ov-table-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: var(--ov-raised);
  box-shadow: none;
  overscroll-behavior-inline: contain;
}

.ov2-global .ov-leads-workspace .ov-leads-table {
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ov2-global .ov-leads-workspace .ov-leads-table th {
  padding: 10px 13px;
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  box-shadow: inset 0 -1px var(--ov-line);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.ov2-global .ov-leads-workspace .ov-leads-table td {
  height: 52px;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  box-shadow: inset 0 -1px var(--ov-line);
  vertical-align: middle;
}

.ov-leads-table tbody tr[data-href] {
  cursor: pointer;
}

.ov-leads-table tbody tr[data-href]:hover,
.ov-leads-table tbody tr[data-href]:focus-within {
  background: var(--ov-surface);
}

.ov-lead-name {
  color: var(--ov-accent-ink);
  font-weight: 650;
  text-decoration: none;
}

.ov-lead-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ov-lead-received,
.ov-lead-identity {
  font-family: var(--ov-font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

.ov-lead-email {
  overflow: hidden;
  max-width: 230px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-lead-vertical,
.ov-lead-source-parent,
.ov-lead-buyer {
  display: block;
}

.ov-lead-tag,
.ov-lead-source {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  margin: 3px 3px 0 0;
  padding: 3px 7px;
  border-radius: 6px;
  /* graphite, not the selection tint - a navy plane in dark (LEADS-18) */
  background: var(--ov-sunken);
  box-shadow: inset 0 0 0 1px var(--ov-line);
  color: var(--ov-ink-2);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
}

.ov-lead-tag-neutral {
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-lead-tag-negative {
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-lead-source-parent,
.ov-lead-buyer {
  margin-top: 4px;
  color: var(--ov-ink-3);
  font-size: 11.5px;
  line-height: 1.25;
}

.ov-leads-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 11px 22px;
  background: var(--ov-surface);
  color: var(--ov-ink-3);
  box-shadow: inset 0 1px var(--ov-line);
  font-size: 12.5px;
}

.ov-leads-empty {
  display: grid;
  justify-items: center;
  padding: 52px 20px;
  text-align: center;
}

.ov-leads-empty-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: var(--ov-radius-md);
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-leads-empty-icon .ic {
  width: 20px;
  height: 20px;
}

.ov-leads-empty h3 {
  margin: 0;
  font: 680 18px/1.2 var(--ov-font-display);
  letter-spacing: -.02em;
}

.ov-leads-empty p {
  max-width: 460px;
  margin: 7px 0 16px;
  color: var(--ov-ink-3);
  font-size: 13.5px;
}

.ov-leads-guide {
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-leads-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0 22px 18px;
}

.ov-leads-guide-grid p {
  margin: 0;
  padding: 12px 14px;
  box-shadow: inset -1px 0 var(--ov-line);
}

.ov-leads-guide-grid p:last-child {
  box-shadow: none;
}

.ov-leads-guide-grid b,
.ov-leads-guide-grid span {
  display: block;
}

.ov-leads-guide-grid b {
  margin-bottom: 5px;
  color: var(--ov-ink-2);
  font-size: 12.5px;
}

.ov-leads-guide-grid span {
  color: var(--ov-ink-3);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .ov-leads-primary-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-leads-secondary-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ov-leads-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-leads-guide-grid p:nth-child(2) {
    box-shadow: none;
  }

  .ov-leads-guide-grid p:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ov-line);
  }
}

@media (max-width: 640px) {
  .ov-leads-workspace .ov-heading-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-leads-button {
    min-height: 44px;
  }

  .ov-leads-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-leads-kpis .ov-kpi:first-child,
  .ov-leads-kpis .ov-kpi:nth-child(4) {
    grid-column: auto;
  }

  .ov-leads-kpis .ov-kpi:first-child .ov-kpi-value {
    font-size: 25px;
  }

  .ov-leads-plane {
    border-radius: var(--ov-radius-lg);
  }

  .ov-leads-plane-heading {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px 14px 15px;
  }

  .ov-leads-filter-form,
  .ov-leads-bulk-form {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ov-leads-primary-filters,
  .ov-leads-secondary-filters,
  .ov-leads-bulk-form {
    grid-template-columns: 1fr;
  }

  .ov-leads-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-leads-filter-note {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .ov-leads-bulk-warning {
    grid-column: 1;
  }

  .ov2-global .ov-leads-workspace .ov-table-wrap {
    overflow: visible;
  }

  .ov2-global .ov-leads-workspace .ov-leads-table {
    display: block;
    min-width: 0;
  }

  .ov-leads-table tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 10px;
    padding: 16px 14px;
  }

  .ov-leads-table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .ov-leads-table tbody td:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  .ov-leads-table tbody td:nth-child(9) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .ov-leads-table tbody td:first-child::before {
    display: block;
  }

  .ov-leads-table tbody td:nth-child(2)::before,
  .ov-leads-table tbody td:last-child::before {
    display: none;
  }

  .ov-lead-email {
    max-width: none;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .ov-leads-results-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 13px 14px;
  }

  .ov-leads-guide-grid {
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }

  .ov-leads-guide-grid p,
  .ov-leads-guide-grid p:nth-child(2),
  .ov-leads-guide-grid p:last-child {
    border-bottom: 1px solid var(--ov-line);
    box-shadow: none;
  }

  .ov-leads-guide-grid p:last-child {
    border-bottom: 0;
  }
}

@media (prefers-contrast: more) {
  .ov-leads-plane,
  .ov-leads-metrics {
    outline: 1px solid var(--ov-line-strong);
  }
}

.ov-leads-search-hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ov-ink-3);
}

/* QA cascade guards follow the shared responsive primitives by design. */
.ov-qa-workspace .ov-qa-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1180px) {
  .ov-qa-workspace .ov-qa-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ov-qa-workspace .ov-qa-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-qa-workspace .ov-qa-kpis .ov-kpi:first-child,
  .ov-qa-workspace .ov-qa-kpis .ov-kpi:nth-child(4) {
    grid-column: auto;
  }

.ov-qa-workspace .ov-qa-kpis .ov-kpi:nth-child(n + 3) {
    box-shadow: inset 0 1px var(--ov-line);
  }
}

/* Wave 3 KPI guards must remain after the shared responsive primitives. */
.ov-call-record .ov-call-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ov-task-workspace .ov-task-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .ov-call-record .ov-call-kpis,
  .ov-task-workspace .ov-task-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ov-call-record .ov-call-kpis,
  .ov-task-workspace .ov-task-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-call-record .ov-call-kpis .ov-kpi:first-child,
  .ov-call-record .ov-call-kpis .ov-kpi:nth-child(4),
  .ov-task-workspace .ov-task-kpis .ov-kpi:first-child,
  .ov-task-workspace .ov-task-kpis .ov-kpi:nth-child(4) { grid-column: auto; }
}

/* The global search trigger became a BUTTON (unified cmd-k opener) but the
   rules above style ".ov-page-search input" - so the button inherited the
   legacy dark-green button skin from style.css: dark pill in the light
   theme, no left padding, magnifier drawn over the placeholder text. Found
   on every screen by the 2026-08-12 visual sweep. Same visual contract the
   input had, as a button. */
button.ov-page-search {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
  font-size: 14px;
  font-family: inherit;
  line-height: 36px;
}

button.ov-page-search:hover {
  background: var(--ov-raised);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

button.ov-page-search:focus-visible {
  outline: none;
  background: var(--ov-raised);
  box-shadow: 0 0 0 3px var(--ov-focus-ring), inset 0 0 0 1px var(--ov-focus);
}

button.ov-page-search span {
  flex: 1;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

button.ov-page-search kbd {
  margin-left: 10px;
}

/* ============================================================ OV CRM
   CRM core content wave (batch A): contacts list, companies, company and
   contact records. Mirrors the leads/task workspace idioms - tokens only. */

.ov-crm-workspace {
  --ov-crm-control-text: var(--ov-raised);
}

/* ---- Segmented CRM tab strip (included by every CRM page) ---- */

.ov-crm-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ov-crm-tabs-track {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--ov-sunken);
  overflow-x: auto;
}

.ov-crm-tabs-track a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 8px;
  color: var(--ov-ink-3);
  font: 620 12.5px/1.2 var(--ov-font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms var(--ov-ease), background-color 120ms var(--ov-ease);
}

.ov-crm-tabs-track a .ic {
  width: 14px;
  height: 14px;
}

.ov-crm-tabs-track a:hover {
  color: var(--ov-ink);
}

.ov-crm-tabs-track a.is-current {
  background: var(--ov-raised);
  color: var(--ov-ink);
  /* the hairline keeps the raised tab visible on the dark track (CRM-01) */
  box-shadow: inset 0 0 0 1px var(--ov-line-strong), var(--ov-touch-shadow);
}

.ov-crm-tabs-track a:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 1px;
}

.ov-crm-tabs-actions {
  display: flex;
  gap: 8px;
}

/* ---- Buttons ---- */

.ov-crm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  cursor: pointer;
  font: 630 13.5px/1.2 var(--ov-font-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms var(--ov-ease),
    background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease),
    box-shadow 180ms var(--ov-ease), transform 180ms var(--ov-spring);
}

.ov-crm-button .ic {
  width: 15px;
  height: 15px;
}

.ov-crm-button:hover {
  border-color: var(--ov-line-strong);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}

.ov-crm-button:active {
  transform: scale(.985);
}

.ov-crm-button:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

/* Disabled stays readable (the title says WHY it is off): a dashed edge and
   the muted ink, not a 50% ghost that fails 4.5:1 (audit 2026-09-16). */
.ov-crm-button:disabled {
  cursor: not-allowed;
  opacity: 1;
  color: var(--ov-ink-3);
  background: transparent;
  border-style: dashed;
  transform: none;
  box-shadow: none;
}

/* Beat the broader .ov-dist link color without relying on load order. */
.ov-crm-workspace .ov-crm-button,
.ov-crm-tabs .ov-crm-button {
  color: var(--ov-ink-2);
}

.ov-crm-workspace .ov-crm-button:hover,
.ov-crm-tabs .ov-crm-button:hover {
  color: var(--ov-ink);
}

.ov-crm-workspace .ov-crm-button-primary,
.ov-crm-workspace .ov-crm-button-primary:hover,
.ov-crm-tabs .ov-crm-button-primary,
.ov-crm-tabs .ov-crm-button-primary:hover {
  border-color: var(--ov-primary);
  background: var(--ov-primary);
  color: var(--ov-primary-ink);
}

.ov-crm-workspace .ov-crm-button-primary:hover,
.ov-crm-tabs .ov-crm-button-primary:hover {
  border-color: var(--ov-primary-hover);
  background: var(--ov-primary-hover);
}

.ov-crm-workspace .ov-crm-button-danger,
.ov-crm-workspace .ov-crm-button-danger:hover {
  border-color: var(--ov-negative-soft);
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

/* ---- Status chips (word always present, never color-only) ---- */

.ov-crm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 7px;
  font: 650 11.5px/1 var(--ov-font-text);
  white-space: nowrap;
}

.ov-crm-status .ic {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.ov-crm-status > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.ov-crm-status-positive {
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

.ov-crm-status-negative {
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-crm-status-warning {
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
}

.ov-crm-status-info {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
}

.ov-crm-status-neutral {
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

/* ---- Heading extras ---- */

/* The shared heading let the facts grid squeeze the copy column until the
   contact's name broke word-by-word; the name is the page's anchor and gets
   room first. */
.ov-crm-workspace .ov-heading-copy {
  flex: 1 1 340px;
  min-width: 320px;
}
.ov-crm-workspace .ov-title-line {
  flex-wrap: wrap;
}
.ov-crm-workspace .ov-heading-copy h1 {
  overflow-wrap: normal;
}

.ov-crm-back {
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 8px;
  color: var(--ov-ink-3);
  font: 600 12.5px/1.2 var(--ov-font-text);
  text-decoration: none;
}

.ov-crm-back:hover {
  color: var(--ov-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ov-crm-metrics {
  margin-bottom: 18px;
}

.ov-crm-kpis {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ---- Planes ---- */

.ov-crm-plane {
  overflow: hidden;
  border-radius: 18px;
  background: var(--ov-raised);
  box-shadow: var(--ov-plane-shadow);
}

.ov-crm-plane + .ov-crm-plane {
  margin-top: 18px;
}

.ov-crm-plane-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 18px;
  flex-wrap: wrap;
}

.ov-crm-plane-heading h2 {
  margin: 3px 0 0;
  font: 680 20px/1.1 var(--ov-font-display);
  letter-spacing: -.026em;
}

.ov-crm-plane-heading p {
  margin: 5px 0 0;
  color: var(--ov-ink-3);
  font-size: 13px;
}

.ov-crm-panel-body {
  padding: 4px 22px 20px;
}

.ov-crm-panel-split {
  border-top: 1px solid var(--ov-line);
  padding-top: 16px;
}

/* ---- Filters and forms ---- */

.ov-crm-filter-form {
  padding: 18px 22px;
  background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line), inset 0 -1px var(--ov-line);
}

.ov-crm-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.45fr) repeat(auto-fit, minmax(135px, 1fr));
  gap: 10px;
}

.ov-crm-filter-form label,
.ov-crm-fields label,
.ov-crm-inline-form label,
.ov-crm-inline-search label {
  display: grid;
  gap: 6px;
  color: var(--ov-ink-3);
  font: 580 12.5px/1.25 var(--ov-font-text);
}

.ov-crm-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.ov2-global .ov-crm-workspace :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  font: 480 14px/1.35 var(--ov-font-text);
  box-shadow: none;
}

.ov2-global .ov-crm-workspace :is(input, select, textarea):hover:not(:disabled) {
  border-color: var(--ov-line-strong);
}

.ov2-global .ov-crm-workspace :is(input, select, textarea):focus {
  border-color: var(--ov-focus);
  outline: 0;
  box-shadow: 0 0 0 3px var(--ov-focus-ring);
}

.ov2-global .ov-crm-workspace input[type="checkbox"] {
  width: auto;
  min-height: 0;
  accent-color: var(--ov-accent);
}

.ov-crm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 14px;
  /* a tall list box no longer stretches its row-mates (CRM-12) */
  align-items: start;
}

.ov-crm-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.ov-crm-inline-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

/* One line, not a stacked column: the workspace's width:100% field rule
   (0,3,1) beat the flex row, so a key-mapping row stood ~150px tall
   (VIS-23, 2026-09-16). Also shapes the same-shaped inline forms on
   aff_conversions.html and aff_affiliate_detail.html. */
.ov2-global .ov-crm-workspace .ov-crm-inline-form > :is(select, input:not([type=hidden])) {
  width: auto;
  flex: 1 1 160px;
}

.ov-crm-inline-form label {
  min-width: 140px;
}

.ov-crm-grow {
  flex: 1;
  min-width: 180px;
}

.ov-crm-checkline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 6px;
}

.ov-crm-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--ov-ink-2);
  font-size: 13.5px;
}

.ov-crm-inline-search {
  display: flex;
  align-items: end;
  gap: 8px;
}

.ov-crm-inline-search input {
  min-width: 200px;
}

/* ---- Bulk bar ---- */

.ov-crm-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--ov-surface);
  box-shadow: inset 0 -1px var(--ov-line);
  flex-wrap: wrap;
}

.ov-crm-bulkbar-label {
  color: var(--ov-ink-3);
  font: 620 12.5px/1.2 var(--ov-font-text);
}

.ov-crm-bulkbar select {
  /* The shared field rule stretches selects to their grid track; in the
     bulk bar that produced a viewport-wide "choose action" control. */
  width: auto;
  min-width: 170px;
  max-width: 280px;
  flex: 0 0 auto;
}

/* ---- Tables ---- */

.ov-crm-tablewrap {
  overflow-x: auto;
  background: var(--ov-raised);
  overscroll-behavior-inline: contain;
}

.ov2-global .ov-crm-workspace .ov-crm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ov2-global .ov-crm-workspace .ov-crm-table th {
  padding: 10px 13px;
  border: 0;
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  box-shadow: inset 0 -1px var(--ov-line);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  text-align: left;
}

.ov2-global .ov-crm-workspace .ov-crm-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.ov2-global .ov-crm-workspace .ov-crm-table th.sortable:hover {
  color: var(--ov-ink-2);
}

.ov2-global .ov-crm-workspace .ov-crm-table td {
  padding: 10px 13px;
  border: 0;
  background: transparent;
  box-shadow: inset 0 -1px var(--ov-line);
  vertical-align: middle;
  color: var(--ov-ink-2);
}

.ov2-global .ov-crm-workspace .ov-crm-table th.r,
.ov2-global .ov-crm-workspace .ov-crm-table td.r {
  text-align: right;
}

.ov-crm-select-cell {
  width: 30px;
}

.ov-crm-name {
  color: var(--ov-accent-ink);
  font-weight: 650;
  text-decoration: none;
}

.ov-crm-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ov-crm-muted {
  color: var(--ov-ink-3);
  font-size: 12.5px;
}

.ov-crm-subline {
  display: block;
  margin-top: 3px;
  color: var(--ov-ink-3);
  font-size: 12px;
}

.ov-crm-tagline {
  display: block;
  margin-top: 3px;
}

.ov-crm-tag {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  margin: 2px 3px 0 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
}

.ov-crm-preline {
  white-space: pre-line;
}

.ov-crm-notes-cell {
  max-width: 340px;
}

/* ---- Empty states ---- */

.ov-crm-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 20px;
  color: var(--ov-ink-3);
  text-align: center;
}

.ov-crm-empty .ic {
  width: 26px;
  height: 26px;
  color: var(--ov-accent);
}

.ov-crm-empty h3 {
  margin: 2px 0 0;
  color: var(--ov-ink);
  font: 680 16px/1.2 var(--ov-font-display);
  letter-spacing: -.02em;
}

.ov-crm-empty p {
  max-width: 420px;
  margin: 0;
  font-size: 13.5px;
}

/* ---- Pager ---- */

.ov-crm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 11px 22px;
  background: var(--ov-surface);
  color: var(--ov-ink-3);
  box-shadow: inset 0 1px var(--ov-line);
  font-size: 12.5px;
}

/* ---- Alerts ---- */

.ov-crm-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--ov-radius-md);
  font-size: 13px;
  line-height: 1.45;
}

.ov-crm-alert .ic {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.ov-crm-alert-negative {
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-crm-alert-warning {
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
}

.ov-crm-alert-positive {
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

/* Information is not a success: the accent pair .ov-crm-status-info already
   uses (8.9:1 light), for the dashboard's 'offers opened' note
   (SUP-17, 2026-09-16). */
.ov-crm-alert-info {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
}

/* the alert's own button keeps its ink and no underline - inheriting the
   warning ink put 'Add payment method' at 3.69:1 (SUP-17, 2026-09-16) */
.ov-crm-workspace .ov-crm-alert a:not(.ov-crm-button) {
  color: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Record grid ---- */

.ov-crm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.ov-crm-grid-col {
  min-width: 0;
}

.ov-crm-grid-col > .ov-crm-plane + .ov-crm-plane {
  margin-top: 18px;
}

/* ---- Facts strip (contact highlight) ---- */

.ov-crm-facts {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.ov-crm-facts > div {
  display: grid;
  gap: 3px;
  min-width: 120px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--ov-raised);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-crm-facts dt {
  color: var(--ov-ink-4);
  font: 650 11px/1.2 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
}

.ov-crm-facts dd {
  margin: 0;
  color: var(--ov-ink);
  font: 620 13.5px/1.3 var(--ov-font-text);
}

/* ---- Stage path ---- */

.ov-crm-path-plane {
  margin-bottom: 18px;
  padding: 14px 18px;
}

.ov-crm-path {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ov-crm-path button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--ov-control-line);
  border-radius: 999px;
  background: var(--ov-raised);
  color: var(--ov-ink-3);
  cursor: pointer;
  font: 630 12.5px/1.2 var(--ov-font-text);
  transition: color 120ms var(--ov-ease),
    background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease);
}

.ov-crm-path button:hover {
  border-color: var(--ov-line-strong);
  color: var(--ov-ink);
}

.ov-crm-path button:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

.ov-crm-path button.is-done {
  border-color: var(--ov-positive-soft);
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

.ov-crm-path button.is-current {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-crm-control-text, var(--ov-raised));
}

.ov-crm-path .ov-crm-path-lost {
  margin-left: auto;
}

.ov-crm-path button.is-lost {
  border-color: var(--ov-negative-soft);
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-crm-path-note {
  margin: 10px 0 0;
  color: var(--ov-ink-3);
  font-size: 13px;
}

/* ---- Activity kind tabs ---- */

.ov-crm-kind-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 3px;
  border-radius: 10px;
  background: var(--ov-sunken);
  width: fit-content;
}

.ov-crm-kind-tabs button {
  min-height: 30px;
  padding: 6px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ov-ink-3);
  cursor: pointer;
  font: 620 12.5px/1.2 var(--ov-font-text);
  transition: color 120ms var(--ov-ease), background-color 120ms var(--ov-ease);
}

.ov-crm-kind-tabs button:hover {
  color: var(--ov-ink);
}

.ov-crm-kind-tabs button.is-current {
  background: var(--ov-raised);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
}

.ov-crm-kind-tabs button:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 1px;
}

.ov-crm-next-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0 22px 18px;
}

.ov-crm-next-note .ic {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---- Timeline ---- */

.ov-crm-tl {
  margin: 0;
  padding: 4px 22px 20px;
  list-style: none;
}

.ov-crm-tl li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 10px;
  padding: 10px 0;
}

.ov-crm-tl li + li {
  box-shadow: inset 0 1px var(--ov-line);
}

.ov-crm-tl-dot {
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ov-sunken);
  color: var(--ov-ink-3);
}

.ov-crm-tl-dot .ic {
  width: 13px;
  height: 13px;
}

.ov-crm-tl-when {
  color: var(--ov-ink-4);
  font: 600 11.5px/1.3 var(--ov-font-text);
}

.ov-crm-tl-body {
  grid-column: 2;
  color: var(--ov-ink-2);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ov-crm-tl-empty .ov-crm-tl-body {
  grid-row: 1 / 3;
  align-self: center;
}

/* ---- Profile ---- */

.ov-crm-profile {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ov-crm-profile-meta {
  margin: 10px 0 0;
}

/* ---- Mailing campaigns ---- */

.ov-crm-camp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 18px;
  align-items: start;
}

/* ---- Add-new reveal (list pages): the creator hides behind a button ---- */

.ov-crm-newpanel > summary {
  display: flex;
  list-style: none;
  cursor: pointer;
  width: max-content;
  margin-left: auto;
  user-select: none;
}

.ov-crm-newpanel > summary::-webkit-details-marker {
  display: none;
}

.ov-crm-newpanel[open] > summary {
  opacity: 0.85;
}

.ov-crm-newpanel > .ov-crm-plane {
  margin-top: 14px;
}

/* One decision under a form, written out (invite on create, 2026-09-16):
   the box on the left, the sentence wraps beside it. */
.ov-crm-checkrow {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ov-line);
  border-radius: 10px;
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.ov-crm-checkrow input {
  margin-top: 3px;
  flex: none;
}

.ov-crm-checkrow b {
  color: var(--ov-ink);
}

/* Optional fields folded under a plain line, never a second step. */
.ov-crm-more {
  margin-top: 14px;
}

.ov-crm-more > summary {
  cursor: pointer;
  list-style: none;
  color: var(--ov-ink-2);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: max-content;
  user-select: none;
}

.ov-crm-more > summary::-webkit-details-marker {
  display: none;
}

.ov-crm-more > summary:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.ov-crm-more[open] > summary {
  margin-bottom: 10px;
}

.ov-crm-camp-alert-row {
  align-items: center;
  flex-wrap: wrap;
}

.ov-crm-camp-alert-row span {
  flex: 1 1 260px;
}

.ov-crm-camp-progress-plane {
  margin-bottom: 18px;
  padding: 16px 22px 18px;
}

.ov-crm-camp-progress-label {
  margin: 0 0 8px;
  color: var(--ov-ink-2);
  font: 620 13.5px/1.3 var(--ov-font-text);
}

.ov-crm-camp-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ov-sunken);
}

.ov-crm-camp-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ov-accent);
  transition: width 400ms var(--ov-ease);
}

/* Template summary (read view above the edit form) */

.ov-crm-camp-summary {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.ov-crm-camp-summary-label {
  color: var(--ov-ink-4);
  font: 650 11px/1.2 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
}

.ov-crm-camp-summary-subject {
  margin: 0 0 8px;
  color: var(--ov-ink);
  font: 650 14px/1.35 var(--ov-font-text);
}

.ov-crm-camp-body {
  margin: 0;
  color: var(--ov-ink-2);
  font: 480 14px/1.55 var(--ov-font-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Collapsed edit forms (summary styled as a button) */

.ov-crm-camp-details > summary {
  width: fit-content;
  list-style: none;
}

.ov-crm-camp-details > summary::-webkit-details-marker {
  display: none;
}

.ov-crm-camp-form {
  margin-top: 14px;
}

.ov-crm-camp-stack {
  grid-template-columns: 1fr;
}

.ov-crm-camp-fieldnote {
  color: var(--ov-ink-3);
  font: 480 12.5px/1.5 var(--ov-font-text);
}

p.ov-crm-camp-fieldnote {
  margin: 8px 0 0;
}

.ov-crm-camp-subhead {
  margin: 18px 0 8px;
  font: 680 14px/1.2 var(--ov-font-display);
  letter-spacing: -.015em;
}

.ov-crm-camp-throttle {
  margin-top: 10px;
}

.ov-crm-camp-segcount {
  margin: 12px 0 0;
  color: var(--ov-ink-3);
  font-size: 13.5px;
}

.ov-crm-camp-segcount b {
  color: var(--ov-ink);
}

.ov-crm-camp-hint {
  margin: 10px 0 0;
  color: var(--ov-ink-3);
  font-size: 13px;
  line-height: 1.7;
}

.ov-crm-camp-hint a {
  color: var(--ov-accent-ink);
}

.ov-crm-camp-hint code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--ov-sunken);
  color: var(--ov-ink-2);
  font-size: 12px;
}

.ov-crm-camp-sig {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

/* Split-test variants grouped so subject and its alternates read as one unit */

.ov-crm-camp-variants {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-crm-camp-variants-label {
  color: var(--ov-ink-4);
  font: 650 11px/1.2 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
}

/* Sequence step list */

.ov-crm-camp-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.ov-crm-camp-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ov-radius-md);
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-crm-camp-step-no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  font: 700 13.5px/1 var(--ov-font-display);
}

.ov-crm-camp-step-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.ov-crm-camp-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ov-ink);
  font-size: 13.5px;
}

.ov2-global .ov-crm-workspace input.ov-crm-camp-wait {
  width: 72px;
  min-height: 34px;
  padding: 6px 8px;
  text-align: center;
}

/* Quiet text-actions: per-step controls stay out of the content's way */

.ov-crm-camp-step-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ov-crm-camp-action {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ov-accent-ink);
  cursor: pointer;
  font: 640 13px/1.2 var(--ov-font-text);
  text-decoration: none;
  transition: color 120ms var(--ov-ease);
}

.ov-crm-camp-action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ov-crm-camp-action:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.ov-crm-camp-action-danger {
  color: var(--ov-negative);
}

/* Draft rows and the inline per-recipient editor */

.ov-crm-camp-draftrow {
  cursor: pointer;
}

.ov2-global .ov-crm-workspace .ov-crm-table .ov-crm-camp-draftrow:hover td {
  background: var(--ov-surface);
}

.ov2-global .ov-crm-workspace .ov-crm-table td.ov-crm-camp-editorcell {
  background: var(--ov-surface);
}

.ov-crm-camp-editor-inner {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.ov-crm-camp-editor-form {
  flex: 1;
  min-width: 320px;
}

.ov-crm-camp-editor-side {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 6px;
}

.ov-crm-camp-error {
  max-width: 260px;
  margin: 0;
  color: var(--ov-warning);
  font-size: 13px;
  line-height: 1.5;
}

.ov-crm-camp-sendbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 22px 20px;
  box-shadow: inset 0 1px var(--ov-line);
}

/* ---- Pipeline board (stage columns) ---- */

.ov-crm-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(195px, 1fr));
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 4px;
}

.ov-crm-board .ov-crm-plane + .ov-crm-plane {
  margin-top: 0;
}

.ov-crm-board-colhead {
  display: grid;
  gap: 7px;
  justify-items: start;
  padding: 14px 14px 10px;
}

.ov-crm-board-colhead h2 {
  margin: 0;
  font: 680 14px/1.2 var(--ov-font-display);
  letter-spacing: -.015em;
}

.ov-crm-board-cards {
  display: grid;
  gap: 8px;
  padding: 2px 10px 12px;
}

.ov-crm-board-card {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
  color: var(--ov-ink);
  font-size: 13.5px;
  text-decoration: none;
  transition: box-shadow 120ms var(--ov-ease);
}

.ov-crm-board-card:hover {
  box-shadow: inset 0 0 0 1px var(--ov-line-strong), var(--ov-touch-shadow);
}

.ov-crm-board-card:focus-visible {
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 2px;
}

.ov-crm-board-card b {
  font-weight: 650;
}

.ov-crm-board-card-meta {
  color: var(--ov-ink-3);
  font-size: 12px;
}

.ov-crm-board-empty {
  margin: 0;
  padding: 4px 2px 2px;
  color: var(--ov-ink-4);
  font-size: 12.5px;
}

/* ---- Reply queue ---- */

/* Unhandled replies read a shade darker; the worded chip carries the status. */
.ov2-global .ov-crm-workspace .ov-crm-table tr.ov-crm-reply-open td {
  color: var(--ov-ink);
}

.ov-crm-footnote {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--ov-ink-3);
  font-size: 13px;
  line-height: 1.7;
}

/* ---- Prosaic helpers: numbered how-to lists, monospace CSV paste ---- */

.ov-crm-ol {
  margin: 0;
  padding-left: 18px;
  color: var(--ov-ink-2);
  font-size: 14px;
  line-height: 1.9;
}

.ov-crm-ol li + li {
  margin-top: 6px;
}

.ov-crm-ol code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--ov-sunken);
  color: var(--ov-ink-2);
  font-size: 12px;
}

.ov2-global .ov-crm-workspace textarea.ov-crm-csv {
  font-family: var(--ov-font-mono);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Prospector credit meters ---- */

.ov-crm-usage {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 22px 20px;
}

.ov-crm-usage-card {
  display: grid;
  gap: 6px;
  align-content: start;
  flex: 0 1 230px;
  min-width: 190px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ov-surface);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}

.ov-crm-usage-label {
  color: var(--ov-ink-4);
  font: 650 11px/1.2 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
}

.ov-crm-usage-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ov-ink);
  font: 650 14px/1.3 var(--ov-font-text);
}

.ov-crm-usage-caps {
  align-self: end;
  margin-left: auto;
}

/* ---- Prospector advanced filters ---- */

.ov-crm-prospect-adv {
  margin-top: 14px;
}

.ov-crm-prospect-adv .ov-crm-fields + .ov-crm-fields {
  margin-top: 12px;
}

/* The bulk bar's free-text input (e.g. "Vertical for these") stays compact
   instead of stretching like a grid field. */
.ov2-global .ov-crm-workspace .ov-crm-bulkbar input:not([type="checkbox"]) {
  width: auto;
  flex: 0 1 180px;
  min-width: 140px;
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
  .ov-crm-grid,
  .ov-crm-camp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ov-crm-tabs-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-crm-button {
    min-height: 44px;
  }

  .ov-crm-plane {
    border-radius: var(--ov-radius-lg);
  }

  .ov-crm-plane-heading,
  .ov-crm-filter-form,
  .ov-crm-bulkbar,
  .ov-crm-pager,
  .ov-crm-camp-sendbar,
  .ov-crm-camp-progress-plane {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ov-crm-camp-step {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .ov-crm-panel-body,
  .ov-crm-tl,
  .ov-crm-next-note,
  .ov-crm-usage {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ov-crm-usage-caps {
    margin-left: 0;
  }

  .ov-crm-filter-grid,
  .ov-crm-fields {
    grid-template-columns: 1fr;
  }

  .ov-crm-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-crm-path .ov-crm-path-lost {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ov-crm-button,
  .ov-crm-tabs-track a,
  .ov-crm-path button,
  .ov-crm-kind-tabs button,
  .ov-crm-camp-action,
  .ov-crm-camp-progress-fill,
  .ov-crm-board-card {
    transition: none;
  }

  .ov-crm-button:hover {
    transform: none;
  }
}

/* Consolidated source: console/static/olympus-compat.css */
/* Temporary compatibility boundary for legacy content inside the Olympus shell.
   These overrides translate the shared legacy vocabulary into the Olympus v2
   visual system while templates migrate at their own pace. */
.ov2-global .ov-rail nav { overflow-y: auto; padding-bottom: 32px; }
/* A rail longer than the viewport scrolls above the user chip with no
   scrollbar, so the last item just looked cut in half (MONEY-13 /
   LEADS-39 / ADMIN-41 / CRM-19, 2026-09-24): the bottom edge fades, which
   says "more below", and the padding lets the last item scroll fully
   clear of the fade. */
.ov2-global .ov-rail nav {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.ov2-global .ov-nav-account-group { margin-top: auto; }
.ov2-global .ov-nav-count { margin-left: auto; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--ov-accent-soft); color: var(--ov-accent); font: 700 11.5px/1.5 var(--ov-font-mono); text-align: center; }
.ov2-global .ov-nav-count-danger { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov2-global .ov-portal-logo { display: block; max-width: 150px; max-height: 36px; object-fit: contain; }
.ov2-global .ov-search-trigger {
  cursor: pointer; text-align: left;
  /* it is a <button>, so the legacy button skin (now 499 blue) would paint
     it as a CTA - search is quiet chrome, not an action */
  background: var(--ov-sunken); border: 1px solid var(--ov-line);
  color: var(--ov-ink-3);
}
.ov2-global .ov-search-trigger:hover { background: var(--ov-surface); }
.ov2-global .ov-search-trigger span { flex: 1; color: var(--ov-ink-3); }
.ov2-global .ov-legacy-main { min-width: 0; max-width: none; margin: 0; }
.ov2-global .ov-legacy-main > h1:first-child { margin-top: 0; }
.ov2-global .ov-legacy-main :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 2px; }
/* Text fields get the ring on plain :focus too - the :focus-visible
   heuristic left typing fields with no ring at all (2026-08-12 sweep,
   /caller), and a blue UA ring on some platforms. */
.ov2-global .ov-legacy-main :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { outline: 2px solid var(--ov-focus); outline-offset: 2px; }
.ov2-global .ov-legacy-main :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .52; }
/* A locked text field: sunken fill, hairline instead of the control line,
   muted ink - in dark the .52 ghost of a raised field read as enabled
   (LEADS-31, 2026-09-24). (0,5,1) outranks every workspace field skin. */
.ov2-global .ov-legacy-main :is(input, select, textarea):disabled:not([type="checkbox"]):not([type="radio"]) {
  opacity: 1;
  border-color: var(--ov-line);
  background: var(--ov-sunken);
  color: var(--ov-ink-4);
  -webkit-text-fill-color: var(--ov-ink-4);
}
/* the /account notification switches are read-only facts whose state is the
   On / Off word beside them (CL-22, 2026-09-16) - the tick stays legible */
.ov-legacy-main #notifications input:disabled { opacity: 1; }

.ov2-global .pal { z-index: 100; }
.ov2-global .ov-security-banner { position: relative; z-index: 1; }

/* Typography and page hierarchy */
.ov2-global .ov-legacy-main h1 {
  margin: 0 0 24px;
  color: var(--ov-ink);
  font-family: var(--ov-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.042em;
  line-height: 1.08;
}
.ov2-global .ov-legacy-main h2 {
  margin: 0 0 14px;
  color: var(--ov-ink);
  font-family: var(--ov-font-display);
  font-size: 17px;
  font-weight: 660;
  letter-spacing: -.018em;
  line-height: 1.25;
}
.ov2-global .ov-legacy-main .sub {
  color: var(--ov-ink-3);
  font-family: var(--ov-font-text);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.45;
}
.ov2-global .ov-legacy-main h1 .sub {
  display: inline-block;
  margin-left: 8px;
  vertical-align: .16em;
}

/* One quiet content plane, with depth supplied by shadow rather than frames. */
.ov2-global .ov-legacy-main .card {
  max-width: 100%;
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--ov-line);
  border-radius: 16px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transition: border-color 160ms var(--ov-ease), box-shadow 220ms var(--ov-ease);
}
.ov2-global .ov-legacy-main .card:hover {
  border-color: var(--ov-line);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
  transform: none;
}
.ov2-global .ov-legacy-main .grid2 {
  gap: 18px;
}
.ov2-global .ov-legacy-main :is(.sf-header, .sf-objtabs) {
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
}
.ov2-global .ov-legacy-main .sf-header {
  margin-bottom: 18px;
  padding: 18px 20px;
}
.ov2-global .ov-legacy-main .sf-header .objicon {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  box-shadow: inset 0 0 0 1px var(--ov-line);
}
.ov2-global .ov-legacy-main .sf-header .sub2 {
  color: var(--ov-ink-3);
}
.ov2-global .ov-legacy-main .sf-fields label {
  border-bottom-color: var(--ov-line);
  color: var(--ov-ink-3);
}
.ov2-global .ov-legacy-main :is(pre, code) {
  background: var(--ov-sunken);
  color: var(--ov-ink-2);
}

/* KPI rows read as one instrument strip instead of a tray of equal cards. */
.ov2-global .ov-legacy-main .kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--ov-line);
  border-radius: 16px;
  background: var(--ov-surface);
  box-shadow: var(--ov-touch-shadow);
}
.ov2-global .ov-legacy-main .kpi {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 20px 22px 19px;
  border: 0;
  border-right: 1px solid var(--ov-line);
  border-bottom: 1px solid var(--ov-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color 140ms var(--ov-ease);
}
.ov2-global .ov-legacy-main .kpi:hover {
  border-color: var(--ov-line);
  background: var(--ov-raised);
  box-shadow: none;
  transform: none;
}
.ov2-global .ov-legacy-main .kpi span {
  margin-bottom: 12px;
  color: var(--ov-ink-3);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.ov2-global .ov-legacy-main .kpi b {
  color: var(--ov-ink);
  font-family: var(--ov-font-display);
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 690;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.045em;
  line-height: 1;
}
.ov2-global .ov-legacy-main .kpi.primary b { color: var(--ov-positive); }
.ov2-global .ov-legacy-main .kpi.primaryneg b { color: var(--ov-negative); }
.ov2-global .ov-legacy-main .kpi i {
  margin-top: 10px;
  color: var(--ov-ink-3);
  font-size: 12.5px;
}
.ov2-global .ov-legacy-main .kpi i.up { color: var(--ov-positive); }
.ov2-global .ov-legacy-main .kpi i.down { color: var(--ov-negative); }

/* Filtering and form controls */
.ov2-global .ov-legacy-main .filters {
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  background: var(--ov-surface);
}
.ov2-global .ov-legacy-main .filters label {
  gap: 6px;
  color: var(--ov-ink-3);
  font-size: 12.5px;
  font-weight: 580;
}
.ov2-global .ov-legacy-main :is(input, select, textarea) {
  min-height: 38px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink);
  box-shadow: none;
}
.ov2-global .ov-legacy-main textarea { line-height: 1.45; }
.ov2-global .ov-legacy-main :is(input, select, textarea):hover:not(:disabled) {
  border-color: var(--ov-line-strong);
}
.ov2-global .ov-legacy-main :is(input, select, textarea):focus {
  border-color: var(--ov-focus);
  box-shadow: 0 0 0 3px var(--ov-focus-ring);
  outline: 0;
}
/* The generic input rule above forces 38px boxes onto checkboxes and radios,
   which detached them from their labels on team, intake and source pages. */
.ov2-global .ov-legacy-main input[type="checkbox"],
.ov2-global .ov-legacy-main input[type="radio"] {
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--ov-accent);
  vertical-align: middle;
}
/* Checkbox + label text sit on one line wherever .chk is used, with or
   without a surrounding .filters bar. */
.ov2-global .ov-legacy-main label.chk {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
/* File inputs otherwise render as the UA's light-theme widget: a white box
   in dark mode. Minimal token-driven skin for both themes. */
.ov2-global .ov-legacy-main input[type="file"] {
  padding: 6px 10px;
  border-style: dashed;
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  font-size: 13px;
}
.ov2-global .ov-legacy-main input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid var(--ov-control-line);
  border-radius: 7px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  font: 630 13px/1.2 var(--ov-font-text);
  cursor: pointer;
}
/* Page-permission rows: checkbox pairs flow as aligned wrapping chips
   instead of colliding inline boxes. */
.ov2-global .ov-legacy-main #pagesBox p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 0;
}

/* Buttons and segmented filters */
.ov2-global .ov-legacy-main .sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--ov-control-line);
  border-radius: 9px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 630;
  line-height: 1.25;
  text-decoration: none;
  transition: color 120ms var(--ov-ease), background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease), box-shadow 180ms var(--ov-ease), transform 180ms var(--ov-spring);
}
.ov2-global .ov-legacy-main .sf-btn:hover {
  border-color: var(--ov-line-strong);
  background: var(--ov-raised);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
  transform: translateY(-1px);
}
.ov2-global .ov-legacy-main .sf-btn.primary {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: var(--ov-raised);
}
.ov2-global .ov-legacy-main .sf-btn.primary:hover {
  border-color: var(--ov-primary-hover);
  background: var(--ov-primary-hover);
  color: var(--ov-raised);
}
.ov2-global .ov-legacy-main .sf-btn:active { transform: scale(.985); }
/* The accent fill carries the primary's own ink, not the raised surface:
   --ov-raised is near-black in dark, 2.63:1 on the blue (Save, Create
   source & endpoint, Save contact - VIS-02 / CL-10 / SUP-18, 2026-09-16).
   Hover deepens through --ov-primary-hover: white on the light accent step
   is 3.2:1 in dark, on the deep step 5.85:1. */
/* Only a submitting button is the primary: the date trigger and every
   type="button" helper stay neutral (CALLS-02 / LEADS-21, 2026-09-24). */
.ov2-global .ov-legacy-main :is(.filters button:not(.ov-dr-trigger, [type="button"], .sf-btn, .ov-crm-button), .loadmore) {
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--ov-accent);
  border-radius: 9px;
  background: var(--ov-accent);
  color: var(--ov-primary-ink);
  font-size: 13.5px;
  font-weight: 650;
  transition: background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease), transform 180ms var(--ov-spring);
}
.ov2-global .ov-legacy-main :is(.filters button:not(.ov-dr-trigger, [type="button"], .sf-btn, .ov-crm-button), .loadmore):hover {
  border-color: var(--ov-primary-hover);
  background: var(--ov-primary-hover);
  color: var(--ov-primary-ink);
}
.ov2-global .ov-legacy-main :is(.filters button:not(.ov-dr-trigger, [type="button"], .sf-btn, .ov-crm-button), .loadmore):active { transform: scale(.985); }
.ov2-global .ov-legacy-main details[open] > summary.sf-btn {
  border-color: var(--ov-accent);
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
}
.ov2-global .ov-legacy-main .chip {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--ov-line-strong);
  border-radius: 999px;
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  font-size: 13px;
  font-weight: 590;
  text-decoration: none;
  transition: color 120ms var(--ov-ease), background-color 120ms var(--ov-ease), border-color 120ms var(--ov-ease), transform 180ms var(--ov-spring);
}
.ov2-global .ov-legacy-main .chip:hover,
.ov2-global .ov-legacy-main .chip.on {
  border-color: var(--ov-accent);
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
}
.ov2-global .ov-legacy-main .chip:active { transform: scale(.985); }

/* Dense reporting tables */
.ov2-global .ov-legacy-main .tablewrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  background: var(--ov-raised);
}
.ov2-global .ov-legacy-main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ov-ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums lining-nums;
}
.ov2-global .ov-legacy-main .listtbl th,
.ov2-global .ov-legacy-main .tablewrap th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--ov-line);
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  white-space: nowrap;
}
.ov2-global .ov-legacy-main .listtbl td,
.ov2-global .ov-legacy-main .tablewrap td {
  min-height: 44px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--ov-line);
  background: transparent;
  vertical-align: middle;
}
.ov2-global .ov-legacy-main .listtbl tbody tr:last-child td,
.ov2-global .ov-legacy-main .tablewrap tbody tr:last-child td {
  border-bottom: 0;
}
.ov2-global .ov-legacy-main .listtbl tbody tr:hover,
.ov2-global .ov-legacy-main .listtbl tbody tr:focus-within,
.ov2-global .ov-legacy-main .tablewrap tbody tr:hover,
.ov2-global .ov-legacy-main .tablewrap tbody tr:focus-within {
  background: var(--ov-surface);
}

/* Operational feedback stays textual and receives a restrained semantic rail. */
.ov2-global .ov-legacy-main .alert,
.ov2-global .ov-legacy-main :is(.alert-red, .alert-amber, .alert-green) {
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  color: var(--ov-ink);
  box-shadow: var(--ov-touch-shadow);
}
.ov2-global .ov-legacy-main .alert-red {
  border-left: 3px solid var(--ov-negative);
  background: var(--ov-negative-soft);
}
.ov2-global .ov-legacy-main .alert-amber {
  border-left: 3px solid var(--ov-warning);
  background: var(--ov-warning-soft);
}
.ov2-global .ov-legacy-main .alert-green {
  border-left: 3px solid var(--ov-positive);
  background: var(--ov-positive-soft);
}
/* A bare notice (account page, Documents, dist_campaign, dist_account,
   supplier_feeds) had padding 0 - 'Invitation sent to ...' touched its 3px
   rail. Pads only those; every `card alert-*` keeps the card's own padding
   (VIS-10 / DOC-19, 2026-09-16). */
.ov2-global .ov-legacy-main :is(.alert-red, .alert-amber, .alert-green):not(.card) { padding: 10px 14px; }

@media (max-width: 1100px) {
  .ov2-global .ov-rail nav { padding-bottom: 36px; }
}

@media (max-width: 640px) {
  .ov2-global .ov-legacy-main { padding-top: 18px; }
  .ov2-global .ov-legacy-main h1 { margin-bottom: 18px; font-size: 27px; }
  .ov2-global .ov-legacy-main h1 .sub { display: block; margin: 7px 0 0; }
  .ov2-global .ov-legacy-main .card { max-width: 100%; padding: 16px; border-radius: var(--ov-radius-lg); }
  .ov2-global .ov-legacy-main .grid2 { gap: 12px; }
  .ov2-global .ov-legacy-main .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--ov-radius-lg); }
  .ov2-global .ov-legacy-main .kpi { padding: 16px 14px; }
  .ov2-global .ov-legacy-main .kpi b { font-size: clamp(20px, 7vw, 26px); }
  .ov2-global .ov-legacy-main .filters { padding: 10px; }
  .ov2-global .ov-legacy-main :is(button:not(.ov-crm-linkbtn), .chip, .sf-btn) { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ov2-global .ov-legacy-main :is(.card, .kpi, .chip, .sf-btn) {
    animation: none !important;
    transition: none !important;
  }
}

/* Consolidated source: final rollout workspaces */
/* Final platform rollout: accounting, administration, source intake and
   partner workspaces. These patterns are presentation-only and intentionally
   preserve the existing forms, routes, money filters and data density. */
.ov-rollout {
  width: min(100%, 1540px);
  margin: 0 auto;
  color: var(--ov-ink);
}

.ov-rollout > h1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  font: 680 clamp(27px, 2.2vw, 34px)/1.05 var(--ov-font-display);
  letter-spacing: -.035em;
}

.ov-rollout > h1 .sub {
  max-width: 64ch;
  color: var(--ov-ink-3);
  font: 500 13px/1.45 var(--ov-font-text);
  letter-spacing: 0;
  text-align: right;
}

.ov-rollout .card,
.ov-settings-workspace .panel {
  margin: 0 0 16px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised);
  box-shadow: var(--ov-touch-shadow);
}

.ov-rollout .card > h2:first-child,
.ov-settings-workspace .panel > h2:first-child {
  margin: 0 0 14px;
  color: var(--ov-ink);
  font: 660 17px/1.25 var(--ov-font-display);
  letter-spacing: -.018em;
}

.ov-rollout .card > h2:first-child .sub,
.ov-settings-workspace .panel > h2:first-child .sub {
  display: inline;
  margin-left: 6px;
  color: var(--ov-ink-3);
  font: 500 13px/1.5 var(--ov-font-text);
  letter-spacing: 0;
}

.ov-rollout .sub,
.ov-rollout .sub2 {
  color: var(--ov-ink-3);
}

.ov-rollout .tablewrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  background: var(--ov-raised);
}

.ov-rollout .tablewrap table {
  margin: 0;
  border: 0;
}

.ov-rollout table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ov-rollout th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ov-line);
  background: var(--ov-surface);
  color: var(--ov-ink-2);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.ov-rollout td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--ov-line);
  color: var(--ov-ink-2);
  vertical-align: middle;
}

.ov-rollout tbody tr:last-child td {
  border-bottom: 0;
}

.ov-rollout tbody tr:hover td {
  background: color-mix(in srgb, var(--ov-sunken) 55%, transparent);
}

.ov-rollout input,
.ov-rollout select,
.ov-rollout textarea {
  min-height: 38px;
  border: 1px solid var(--ov-control-line);
  border-radius: var(--ov-radius-sm);
  background: var(--ov-raised);
  color: var(--ov-ink);
  font-family: var(--ov-font-text);
}

.ov-rollout textarea {
  min-height: 180px;
  resize: vertical;
}

.ov-rollout input:focus,
.ov-rollout select:focus,
.ov-rollout textarea:focus {
  border-color: var(--ov-focus);
  outline: 3px solid var(--ov-focus-ring);
  outline-offset: 1px;
}

.ov-rollout button,
.ov-rollout .sf-btn {
  min-height: 38px;
  border-radius: var(--ov-radius-sm);
  font-weight: 650;
}

.ov-rollout button:disabled,
.ov-rollout .sf-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.ov-rollout .filters,
.ov-rollout .range,
.ov-rollout .sf-fields {
  gap: 12px;
}

.ov-rollout .filters label,
.ov-rollout .sf-fields label,
.ov-rollout .preset-form > label {
  color: var(--ov-ink-3);
  font-size: 12.5px;
  font-weight: 620;
}

.ov-rollout .toolbar {
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md);
  background: var(--ov-surface);
}

.ov-rollout .chip,
.ov-rollout .tag {
  border-color: var(--ov-line);
  background: var(--ov-sunken);
  color: var(--ov-ink-2);
}

.ov-rollout .chip.on,
.ov-rollout .sf-btn.primary {
  border-color: var(--ov-accent);
  background: var(--ov-accent);
  color: #fff;
}

.ov-status-positive {
  border-color: color-mix(in srgb, var(--ov-positive) 28%, transparent) !important;
  background: var(--ov-positive-soft) !important;
  color: var(--ov-positive) !important;
}

.ov-status-warning {
  border-color: color-mix(in srgb, var(--ov-warning) 28%, transparent) !important;
  background: var(--ov-warning-soft) !important;
  color: var(--ov-warning) !important;
}

.ov-status-negative {
  border-color: color-mix(in srgb, var(--ov-negative) 28%, transparent) !important;
  background: var(--ov-negative-soft) !important;
  color: var(--ov-negative) !important;
}

.ov-status-info {
  border-color: color-mix(in srgb, var(--ov-blue) 28%, transparent) !important;
  background: var(--ov-blue-soft) !important;
  /* the raw accent as ink on its own tint was 4.0:1 in light; the accent
     pair is 8.9:1 there and unchanged in dark. The !important stays - it
     is what beats .ov-rollout .tag and .ov-dist .tag (VIS-06, 2026-09-16). */
  color: var(--ov-accent-ink, var(--ov-accent)) !important;
}

.ov-status-text-positive {
  color: var(--ov-positive) !important;
}

.ov-status-text-negative {
  color: var(--ov-negative) !important;
}

.ov-status-text-warning {
  color: var(--ov-warning) !important;
}

/* .ov-approve-button carries no fill of its own any more: the !important
   green (white on #28a47a, 3.1:1 in dark) is gone and rule 6 of the
   contrast pass paints it as the accent primary, 4.57:1 in both themes
   (VIS-04 / CALLS-19, 2026-09-16). */

.ov-danger-action {
  min-height: 32px !important;
  padding: 4px 8px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--ov-negative) !important;
  font-weight: 650 !important;
}

.ov-danger-action:hover {
  background: var(--ov-negative-soft) !important;
}

.ov-field-danger {
  border-color: var(--ov-negative) !important;
}

.ov-note-button,
.ov-note-button-active {
  min-height: 32px !important;
  padding: 4px 9px !important;
  border: 1px solid var(--ov-line) !important;
  background: transparent !important;
  color: var(--ov-ink-3) !important;
}

.ov-note-button-active {
  background: var(--ov-blue-soft) !important;
  /* accent-ink, not the blue itself: #246bfd on the soft fill read 4.0:1 in
     light (client Call Sheet 'Edit note', verify sweep 2026-09-17); the ink
     register is 8.1:1 light and the same #4b8dff in dark. */
  color: var(--ov-accent-ink) !important;
}

.ov-feedback {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-sm);
  background: var(--ov-surface);
  font-weight: 620;
}

.ov-feedback-positive {
  border-color: color-mix(in srgb, var(--ov-positive) 28%, transparent);
  background: var(--ov-positive-soft);
  color: var(--ov-positive);
}

.ov-feedback-warning {
  border-color: color-mix(in srgb, var(--ov-warning) 28%, transparent);
  background: var(--ov-warning-soft);
  color: var(--ov-warning);
}

.ov-feedback-negative {
  border-color: color-mix(in srgb, var(--ov-negative) 28%, transparent);
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}

.ov-accounting-workspace .kpis,
.ov-portal-workspace .kpis,
.ov-source-workspace .kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-lg);
  background: var(--ov-line);
  box-shadow: var(--ov-touch-shadow);
}

.ov-accounting-workspace .kpi,
.ov-portal-workspace .kpi,
.ov-source-workspace .kpi {
  min-width: 0;
  margin: 0;
  padding: 17px 18px;
  border: 0;
  border-radius: 0;
  background: var(--ov-raised);
  box-shadow: none;
}

.ov-accounting-workspace .kpi span,
.ov-portal-workspace .kpi span,
.ov-source-workspace .kpi span {
  color: var(--ov-ink-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ov-accounting-workspace .kpi b,
.ov-portal-workspace .kpi b,
.ov-source-workspace .kpi b {
  display: block;
  margin-top: 7px;
  color: var(--ov-ink);
  font: 680 24px/1 var(--ov-font-display);
  letter-spacing: -.025em;
}

.ov-accounting-workspace .primaryneg b {
  color: var(--ov-negative);
}

.ov-accounting-workspace .primary b {
  color: var(--ov-accent);
}

.ov-accounting-workspace .grid2,
.ov-team-workspace .grid2,
.ov-portal-workspace .grid2 {
  align-items: start;
  gap: 16px;
}

.ov-accounting-workspace .filters,
.ov-accounting-workspace td form,
.ov-source-workspace .filters,
.ov-source-workspace td form,
.ov-portal-workspace td form {
  align-items: center;
}

.ov-record-workspace > .sub:first-of-type {
  display: block;
  margin: -10px 0 16px !important;
}

.ov-settings-workspace {
  max-width: 880px;
  margin-left: 0;
}

.ov-admin-workspace {
  max-width: 1420px;
  margin-left: 0;
}

.ov-settings-workspace .panel {
  max-width: none !important;
  margin-top: 0 !important;
  padding: 20px 22px !important;
}

.ov-settings-workspace .panel form {
  padding-top: 14px;
  border-top: 1px solid var(--ov-line);
}

.ov-team-workspace .grid2 {
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
}

.ov-team-workspace .preset-form {
  display: grid;
  gap: 13px;
}

.ov-team-workspace .preset-form > button:last-of-type {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  box-shadow: var(--ov-touch-shadow);
}

.ov-approval-workspace {
  max-width: 1380px;
  margin-left: 0;
}

.ov-approval-workspace .card > div {
  position: relative;
}

.ov-approval-workspace .card > div + div {
  border-top-color: var(--ov-line) !important;
}

.ov-terms-workspace {
  max-width: 1180px;
  margin-left: 0;
}

.ov-terms-workspace textarea {
  min-height: 460px;
  font-family: var(--ov-font-mono) !important;
}

.ov-mailbox-workspace .sf-header,
.ov-source-workspace .sf-header {
  margin-bottom: 16px;
}

.ov-mailbox-workspace code,
.ov-source-workspace code {
  font-family: var(--ov-font-mono);
}

.notifrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ov-line);
}

.notifrow:last-child {
  border-bottom: 0;
}

.nr-head,
.nr-controls,
.nr-roles,
.nr-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.nr-head {
  gap: 12px;
}

.nr-controls {
  gap: 16px;
  padding: 10px;
  border-radius: var(--ov-radius-sm);
  background: var(--ov-surface);
}

.nr-toggle,
.nr-timing,
.nr-roles label,
.nr-content label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nr-toggle {
  font-size: 14px;
}

.nr-timing,
.nr-roles,
.nr-content {
  color: var(--ov-ink-3);
  font-size: 13px;
}

.nr-timing input {
  width: 64px;
  padding: 6px 8px;
}

.nr-roles,
.nr-content {
  gap: 12px;
}

.nr-last {
  font-size: 12px;
}

.nr-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 620px;
  color: var(--ov-ink-3);
  font-size: 13px;
}

.ov-source-workspace {
  max-width: 1420px;
  margin-left: 0;
}

.ov-source-workspace > .card[id^="src-"] {
  border-left: 3px solid var(--ov-accent);
}

.ov-source-workspace > .card[id^="src-"] details {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-sm);
  background: var(--ov-surface);
}

.ov-source-workspace > .card[id^="src-"] details summary {
  color: var(--ov-ink-2);
  cursor: pointer;
  font-weight: 650;
}

.ov-source-workspace > .card[id^="src-"] p[style*="font-family"] {
  border: 1px solid var(--ov-line);
  background: var(--ov-surface) !important;
  color: var(--ov-ink-2);
}

.ov-import-workspace,
.ov-sftp-workspace {
  max-width: 1260px;
}

.ov-portal-workspace {
  max-width: 1320px;
}

.ov-portal-workspace > .card,
.ov-portal-workspace .grid2 > .card {
  box-shadow: none;
}

.ov-portal-workspace .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ov-portal-workspace .card > h2:first-child {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--ov-line);
}

/* A posting URL or the X-Source-Key header wraps inside the card instead of
   being clipped by it at 390 - a copy-paste value must never hide behind a
   swipe (SUP-20, 2026-09-16). The label column is a class, so the phone
   block below can narrow it. */
.ov-portal-workspace .card td code.mono { overflow-wrap: anywhere; }
.ov-portal-workspace .ov-sf-label { width: 170px; }

.ov-portal-calls-workspace .card {
  padding: 0;
}

.ov-portal-calls-workspace .card > .tablewrap {
  border: 0;
  border-radius: 0;
}

.ov-portal-calls-workspace .card > .presets,
.ov-portal-calls-workspace .card > p {
  padding-right: 18px;
  padding-left: 18px;
}

@media (max-width: 900px) {
  .ov-team-workspace .grid2,
  .ov-accounting-workspace .grid2,
  .ov-portal-workspace .grid2 {
    grid-template-columns: 1fr;
  }

  .ov-rollout > h1,
  .ov-portal-workspace .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ov-rollout > h1 .sub {
    text-align: left;
  }

  .ov-rollout .filters,
  .ov-rollout .sf-fields {
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .ov-portal-workspace .ov-sf-label { width: 34%; }

  .ov-rollout .card,
  .ov-settings-workspace .panel {
    padding: 16px;
    border-radius: var(--ov-radius-md);
  }

  .ov-rollout .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ov-rollout th,
  .ov-rollout td {
    padding: 10px;
  }

  .ov-rollout button,
  .ov-rollout .sf-btn,
  .ov-rollout input,
  .ov-rollout select {
    min-height: 44px;
  }

  .nr-controls {
    align-items: stretch;
    flex-direction: column;
  }
}

/* --- Everflow-style rail sections (2026-08-14) ------------------------- */
.ov-nav-sec { margin: 0; }
.ov-nav-sec-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  position: relative;
}
.ov-nav-sec-head::-webkit-details-marker { display: none; }
.ov-nav-chev {
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ov-ink-faint);
  border-bottom: 1.5px solid var(--ov-ink-faint);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}
.ov-nav-sec[open] > .ov-nav-sec-head .ov-nav-chev { transform: rotate(45deg); }
.ov-nav-sec-current { color: var(--ov-accent-ink); }
.ov-nav-sec-body {
  padding: 2px 0 6px;
}
.ov-nav-sec-body .ov-nav-link {
  padding-left: 40px;
  font-size: 14px;
}

/* Division-locked invitation (Kamil, 2026-09-18): the side and product are
   facts of the door, drawn as a quiet sunken note, not as controls. */
.ov-invite-lock { padding: 10px 12px; border: 1px solid var(--ov-line); border-radius: 8px; background: var(--ov-sunken, var(--ov-rail)); }
.ov-invite-lock .sub { color: var(--ov-ink-3, var(--ov-ink-4)); }

/* Workspace switcher under the logo (Kamil, 2026-09-18): one division at a
   time in the rail; this control names it and swaps it. Same disclosure
   pattern as the sections, a raised surface so it reads as a control. */
.ov-ws { margin: 4px 6px 10px; }
.ov-ws-current {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; min-height: 46px;
  border: 1px solid var(--ov-line); border-radius: 10px;
  background: var(--ov-raised);
  cursor: pointer; list-style: none; user-select: none;
  color: var(--ov-ink);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.ov-ws-current::-webkit-details-marker { display: none; }
.ov-ws-current:hover { border-color: var(--ov-ink-faint); }
.ov-ws-current:focus-visible { outline: 2px solid var(--ov-accent); outline-offset: 2px; }
.ov-ws-icon {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--ov-accent-soft, rgba(36, 107, 253, 0.12)); color: var(--ov-accent);
}
.ov-ws-icon svg { width: 16px; height: 16px; }
.ov-ws-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ov-ws-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ov-ink-4); }
/* wraps instead of "Business Intelli..." (MONEY-33, 2026-09-24) */
.ov-ws-name { font-size: 14px; font-weight: 620; line-height: 1.2; letter-spacing: -0.01em; color: var(--ov-ink); white-space: normal; overflow-wrap: anywhere; }
.ov-ws[open] > .ov-ws-current { border-color: var(--ov-accent); }
.ov-ws[open] > .ov-ws-current .ov-nav-chev { transform: rotate(45deg); }
.ov-ws-menu {
  margin-top: 6px; padding: 4px;
  border: 1px solid var(--ov-line); border-radius: 10px;
  background: var(--ov-raised);
  box-shadow: 0 8px 24px rgba(10, 12, 13, 0.10);
}
.ov-ws-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px; white-space: nowrap;
  color: var(--ov-ink-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.ov-ws-item svg { width: 16px; height: 16px; color: var(--ov-ink-4); }
.ov-ws-item:hover { background: var(--ov-panel-2, var(--ov-rail)); color: var(--ov-ink); }
.ov-ws-item.is-current { color: var(--ov-accent-ink); background: var(--ov-accent-soft, rgba(36, 107, 253, 0.10)); }
.ov-ws-item.is-current svg { color: var(--ov-accent); }
@media (prefers-reduced-motion: reduce) { .ov-ws-current, .ov-nav-chev { transition: none; } }

/* One workspace's groups (2026-09-18): the section-body treatment (rail
   line, current accent, hover dim) without a section header above it, so
   the indent is the group's own. */
.ov-ws-body .ov-nav-link { padding-left: 22px; }
.ov-ws-body > .ov-nav-group { padding-left: 8px; margin-left: 0; }
.ov-ws-body .ov-nav-sub-body .ov-nav-link { padding-left: 44px; }
/* Ticks on the label column (2026-09-25): the inactive ticks started 8px
   left of the section label while the active bar sat on it, so the list
   read as two alignments. Every tick now starts on the label's left edge;
   the active item keeps its approved 7px text indent, and its bar is pulled
   back by the same 7px so it stays on the column too. Text position of the
   inactive items is unchanged. */
.ov2 .ov-ws-body > .ov-nav-link,
.ov2 .ov-ws-body > .ov-nav-subsec > .ov-nav-link { margin-left: 22px; padding-left: 14px; }
.ov2 .ov-ws-body > .ov-nav-link.ov-nav-local-current::before,
.ov2 .ov-ws-body > .ov-nav-subsec > .ov-nav-link.ov-nav-local-current::before { left: -21px; }

/* Second nav level (Accounts -> Clients/Affiliates -> All/Calls/...):
   same disclosure pattern one indent deeper. */
.ov-nav-subsec { margin: 0; }
.ov-nav-sub-head {
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
}
.ov-nav-sub-head::-webkit-details-marker { display: none; }
.ov-nav-subsec[open] > .ov-nav-sub-head .ov-nav-chev { transform: rotate(45deg); }
.ov-nav-sub-body { padding: 0 0 4px; position: relative; }
.ov-nav-sub-body::before {
  content: '';
  position: absolute;
  left: 47px;
  top: 3px;
  bottom: 8px;
  width: 1px;
  background: var(--ov-line);
}
.ov-nav-sub-body .ov-nav-link {
  padding-left: 60px;
  font-size: 13.5px;
}
.ov-nav-sub-body .ov-nav-link.ov-nav-local-current::after {
  content: '';
  position: absolute;
  left: 47px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--ov-accent);
}

/* The user chip sits at the BOTTOM of the rail, quiet: no underline, no
   accent - it is an exit to settings, not a billboard. */
.ov-account-bottom {
  margin-top: auto;
  margin-bottom: 10px;
  text-decoration: none;
  box-shadow: none;
  border-top: 1px solid var(--ov-line);
  border-radius: 0;
  padding-top: 12px;
}
.ov-account-bottom:hover,
.ov-account-bottom:focus-visible {
  text-decoration: none;
  background: var(--ov-hover, transparent);
}
.ov-account-bottom .ov-account-name,
.ov-account-bottom .ov-account-type { text-decoration: none; }

/* --- Everflow-style date range picker (2026-08-14) --------------------- */
.ov-dr { position: relative; display: inline-block; z-index: 45; }
.ov-dr-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 9px;
  border: 1px solid var(--ov-line); background: var(--ov-raised, transparent);
  color: var(--ov-ink); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.ov-dr-trigger:hover { border-color: var(--ov-ink-faint); }
/* In dark the legacy `html.dark button` skin (0,1,2) outranked the rule
   above (0,1,0) and painted the date box as a second primary next to Go
   (VIS-29, 2026-09-16): an outlined field in both registers. */
html.dark .ov-dr-trigger, .ov2-global .ov-dr-trigger {
  background: var(--ov-raised); color: var(--ov-ink); border-color: var(--ov-line);
}
html.dark .ov-dr-trigger:hover, .ov2-global .ov-dr-trigger:hover {
  background: var(--ov-raised); border-color: var(--ov-ink-faint);
}
.ov-dr-trigger::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid var(--ov-ink-faint);
  border-bottom: 1.5px solid var(--ov-ink-faint);
  transform: rotate(45deg) translateY(-1px);
}
/* Two-pane popover (Kamil's 21st calendar-with-presets reference,
   2026-08-24): preset ladder on the left, calendar ALWAYS visible on the
   right - picking days IS the custom range, no mode toggle. */
.ov-dr-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  display: flex; gap: 0; padding: 10px;
  background: var(--ov-raised, #fff);
  border: 1px solid var(--ov-line, #e3e6ea); border-radius: var(--ov-radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}
.ov-dr-pop[hidden] { display: none; }
.ov-dr-pop button, .ov2-legacy-content .ov-dr-pop button {
  appearance: none; background: transparent; border: 0; box-shadow: none;
  color: var(--ov-ink, #16181c); font: inherit; margin: 0; min-height: 0;
}
.ov-dr-presets {
  display: flex; flex-direction: column; gap: 2px;
  width: 148px; max-height: 316px; overflow-y: auto;
  padding-right: 10px; margin-right: 10px;
  border-right: 1px solid var(--ov-line);
  scrollbar-width: none;
}
.ov-dr-presets::-webkit-scrollbar { display: none; }
.ov-dr-pop .ov-dr-preset, .ov2-legacy-content .ov-dr-pop .ov-dr-preset {
  text-align: left; padding: 7px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ov-ink);
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ov-dr-pop .ov-dr-preset:hover { background: var(--ov-accent-soft); }
.ov-dr-pop .ov-dr-preset.on { background: var(--ov-accent-soft); color: var(--ov-accent-ink); font-weight: 600; }
.ov-dr-cal { padding: 0 2px; min-width: 266px; }
.ov-dr-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
.ov-dr-cal-head b { font-size: 14px; }
.ov-dr-pop .ov-dr-cal-head button, .ov2-legacy-content .ov-dr-pop .ov-dr-cal-head button {
  width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ov-ink-2); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ov-dr-pop .ov-dr-cal-head button:hover { background: var(--ov-accent-soft); color: var(--ov-ink); }
.ov-dr-hint { font-size: 12px; color: var(--ov-ink-faint); padding: 0 4px 8px; }
.ov-dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px 0; }
.ov-dr-dow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ov-ink-faint); text-align: center; padding-bottom: 6px; }
.ov-dr-pop .ov-dr-day, .ov2-legacy-content .ov-dr-pop .ov-dr-day {
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ov-ink); font-size: 13.5px;
  cursor: pointer; position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ov-dr-pop .ov-dr-day:hover { background: var(--ov-accent-soft); }
.ov-dr-pop .ov-dr-day:disabled { opacity: 0.35; cursor: default; }
.ov-dr-pop .ov-dr-day:disabled:hover { background: transparent; }
.ov-dr-pop .ov-dr-day.today::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 5px; height: 5px; border-radius: 999px;
  transform: translateX(-50%); background: var(--ov-accent-ink);
}
.ov-dr-pop .ov-dr-day.in-range, .ov2-legacy-content .ov-dr-pop .ov-dr-day.in-range { background: var(--ov-accent-soft); border-radius: 0; }
.ov-dr-pop .ov-dr-day.range-start, .ov-dr-pop .ov-dr-day.range-end, .ov2-legacy-content .ov-dr-pop .ov-dr-day.range-start, .ov2-legacy-content .ov-dr-pop .ov-dr-pop .ov-dr-day.range-end {
  background: var(--ov-accent-ink); color: var(--ov-rail); font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.ov-dr-pop .ov-dr-day.range-start { border-radius: 999px 0 0 999px; }
.ov-dr-pop .ov-dr-day.range-end { border-radius: 0 999px 999px 0; }
.ov-dr-pop .ov-dr-day.range-start.range-end { border-radius: 999px; }

/* Generate Report form (2026-08-14): plain checkbox rows */
.ov2 label.chk { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-size: 14px; }

/* Consolidated source: unified DataTable (2026-08-21)
   One table system for every rollup and sheet. Verdict 2026-08-21:
   a single leading decision column with visual weight, status as text chip
   never colour alone, sticky header, negatives red, row actions last,
   empty states carry a next action. Overlay class on the legacy
   .tablewrap/.listtbl pair so compat behaviours (flt, srt) keep working. */

.ov-dt table { font-variant-numeric: tabular-nums lining-nums; }

/* Column hierarchy: one decision number leads; the rest is evidence. */
.ov-dt td.lead {
  font-family: var(--ov-font-mono);
  font-size: 14px;
  font-weight: 650;
  color: var(--ov-ink);
}
.ov-dt td.lead.pos { color: var(--ov-positive); }
.ov-dt td.lead.neg { color: var(--ov-negative); }
.ov-dt th.lead-th { color: var(--ov-ink); font-weight: 750; }
.ov-dt td.num,
.ov-dt td.r { font-family: var(--ov-font-mono); font-size: 13.5px; }
.ov-dt td .cellsub {
  display: block;
  margin-top: 2px;
  font-family: var(--ov-font-mono);
  font-size: 12px;
  color: var(--ov-ink-4);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status chips: dot + word, semantic colour is reinforcement only. */
.ov-dt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--ov-fill-subtle);
  color: var(--ov-ink-3);
  font: 640 11.5px/1.2 var(--ov-font-text);
  font-style: normal;
  white-space: nowrap;
  vertical-align: middle;
}
.ov-dt-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.ov-dt-chip.pos { background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov-dt-chip.neg { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov-dt-chip.warn { background: var(--ov-warning-soft); color: var(--ov-warning); }

/* Negatives: the whole line signals, not just one digit. The base rule
   covers modern workspaces (ov-crm and peers); the scoped pair below
   outweighs the compat layer's transparent td on legacy pages. */
.ov-dt tr.lossrow td { background: var(--ov-negative-soft); }
.ov-dt tr.lossrow:hover td { background: var(--ov-negative-soft); filter: brightness(0.97); }
.ov2-global .ov-legacy-main .ov-dt tr.lossrow,
.ov2-global .ov-legacy-main .ov-dt tr.lossrow td { background: var(--ov-negative-soft); }
.ov2-global .ov-legacy-main .ov-dt tr.lossrow:hover,
.ov2-global .ov-legacy-main .ov-dt tr.lossrow:hover td { background: var(--ov-negative-soft); filter: brightness(0.97); }

/* Row actions sit last and stay quiet until pointed at. */
.ov-dt td.row-actions { text-align: right; white-space: nowrap; }
.ov-dt td.row-actions a {
  color: var(--ov-ink-3);
  text-decoration: none;
  font-size: 13.5px;
}
.ov-dt td.row-actions a:hover { color: var(--ov-accent); text-decoration: underline; }

/* Density by choice: auxiliary column groups are opt-in per table. */
.ov-dt th.col-aux,
.ov-dt td.col-aux { display: none; }
.ov-dt.show-aux th.col-aux,
.ov-dt.show-aux td.col-aux { display: table-cell; }

/* Empty state: what is absent, why it matters, one next action. */
.ov-dt td.ov-dt-empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--ov-ink-3);
  font-size: 14px;
}
.ov-dt td.ov-dt-empty a { color: var(--ov-accent); font-weight: 620; }

@media (max-width: 640px) {
  .ov-dt td .cellsub { max-width: 130px; }
}
.ov-dt td .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--ov-ink-3); }

/* Trends sparkline (2026-08-21): the whole window's shape as evidence -
   muted ink stroke, hairline zero baseline; judgment lives in the chip. */
.ov-dt td.ov-trend-spark { padding-top: 8px; padding-bottom: 8px; }
.ov-dt td.ov-trend-spark svg { display: block; }
.ov-dt td.ov-trend-spark line { stroke: var(--ov-line-strong); stroke-width: 1; }
.ov-dt td.ov-trend-spark polyline {
  fill: none;
  stroke: var(--ov-ink-3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ov-dt tr.lossrow td.ov-trend-spark polyline { stroke: var(--ov-negative); }

/* Affiliate/CRM plane headings (2026-08-21, Kamil: "affiliate network ma
   rozjebany layout"). Root cause: the compat rule ".ov-legacy-main h2"
   (11px uppercase label) outweighed ".ov-crm-plane-heading h2" (20px
   display), inverting the hierarchy - the eyebrow read larger than its
   own title on every ov-crm plane. Scope-matched restore wins now. */
.ov2-global .ov-legacy-main .ov-crm-plane-heading h2 {
  margin: 3px 0 0;
  color: var(--ov-ink);
  font: 680 20px/1.1 var(--ov-font-display);
  letter-spacing: -.026em;
  text-transform: none;
}
/* Plane children that are NOT full-bleed tables keep the plane's 22px
   horizontal rhythm; without it the creatives group labels and the upload
   disclosure ran to the card edge (2026-08-21). */
.ov-crm-group-label {
  margin: 16px 0 6px;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0;
  text-transform: none;
}
.ov-crm-plane-pad { padding: 0 22px; }

/* The two-column campaign grid crammed dense tables into a half-width
   column and grew scrollbars mid-card. Rate history and payout overrides
   are work surfaces - they stack full width instead. */
.ov-crm-camp-grid { grid-template-columns: 1fr; }

/* Migration utilities (2026-08-21, class-migration wave): the semantic
   inline styles move into classes so colour and typography retune in one
   file. Legacy token fallbacks first, ov-token mapping in the shell scope. */
.warn { color: var(--amber); font-weight: 600; }
.mono { font-family: var(--mono, ui-monospace, Menlo, monospace); }
.statnum { font-size: 20px; }
.tag.pos { background: #EBF1ED; color: var(--green); }
.tag.neg { background: #F5EBEC; color: var(--red); }
.tag.warn { background: color-mix(in oklab, var(--amber) 10%, var(--panel)); color: var(--amber); }
.tag.outline-neg { background: transparent; border: 1px solid var(--red); color: var(--red); }
.tag.outline-warn { background: transparent; border: 1px solid var(--amber); color: var(--amber); }
.ov2-global .ov-legacy-main .warn { color: var(--ov-warning); }
.ov2-global .ov-legacy-main .mono { font-family: var(--ov-font-mono); }
.ov2-global .ov-legacy-main .tag.pos { background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov2-global .ov-legacy-main .tag.neg { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov2-global .ov-legacy-main .tag.warn { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov2-global .ov-legacy-main .tag.outline-neg { background: transparent; border-color: var(--ov-negative); color: var(--ov-negative); }
.ov2-global .ov-legacy-main .tag.outline-warn { background: transparent; border-color: var(--ov-warning); color: var(--ov-warning); }

/* Command Center summit (2026-08-21): one decision layer on top - the
   business's profit today - with the longer windows as smaller terraces
   beside it, then an attention strip. Evidence tables step down beneath. */
.ov-cc-summit {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.ov-cc-summit-lead { display: flex; flex-direction: column; gap: 6px; }
.ov-cc-summit-value {
  font-family: var(--ov-font-mono);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ov-positive);
  font-variant-numeric: tabular-nums;
}
.ov-cc-summit-value.neg { color: var(--ov-negative); }

/* Sparklines (2026-08-25): server-rendered polylines - a period's shape at
   a glance inside the card, the single biggest visual gap against the
   reference dashboards. Ink follows the accent, fill stays a whisper. */
.ov-spark {
  display: block;
  width: 100%;
  max-width: 190px;
  height: 34px;
  margin-top: 8px;
  overflow: visible;
}
.ov-spark polyline {
  fill: none;
  stroke: var(--ov-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ov-spark-lead { max-width: 240px; }

/* Division KPI cards: the second layer of the summit. A whole card is one
   touch target to its division; craft concentrates here - a raised surface
   a step above the summit plane, a hero numeral, the delta, the shape. */
.ov-cc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.ov-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--ov-raised);
  text-decoration: none;
  color: var(--ov-ink);
  transition: border-color var(--ol-micro, 120ms) var(--ol-ease, ease),
    box-shadow var(--ol-micro, 120ms) var(--ol-ease, ease);
}
.ov-kpi-card:hover {
  border-color: var(--ov-line-strong);
  box-shadow: var(--ov-touch-shadow);
}
.ov-kpi-card:focus-visible {
  outline: 2px solid var(--ov-focus);
  outline-offset: 2px;
}
.ov-kpi-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ov-kpi-hero {
  font-family: var(--ov-font-mono);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ov-kpi-hero.neg { color: var(--ov-negative); }
/* Inside a KPI card the sparkline is the card's floor: full width, pushed
   to the bottom edge so a row of cards shares one baseline. */
.ov-kpi-card .ov-spark {
  max-width: none;
  margin-top: auto;
  padding-top: 10px;
  height: 40px;
}
.ov-cc-summit-terraces { display: flex; gap: 28px; }
.ov-cc-terrace { display: flex; flex-direction: column; gap: 4px; }
.ov-cc-terrace .ov-kpi-value.neg { color: var(--ov-negative); }
.ov-cc-attention {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.ov-cc-attention-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--ov-warning);
  border-radius: 9px;
  background: var(--ov-warning-soft);
  color: var(--ov-ink);
  font-size: 13.5px;
  font-weight: 560;
  text-decoration: none;
}
.ov-cc-attention-item b { font-family: var(--ov-font-mono); }
.ov-cc-attention-item:hover { box-shadow: var(--ov-touch-shadow); }
@media (max-width: 640px) {
  .ov-cc-summit { align-items: flex-start; flex-direction: column; }
  .ov-cc-summit-terraces { gap: 18px; }
}

/* Destructive actions never wear the primary accent (2026-08-21): the
   compat rule ".ov-legacy-main .filters button" painted every button in a
   filter row green, decline included - this outweighs it. */
.ov2-global .ov-legacy-main .filters button.danger,
.ov2-global .ov-legacy-main .ov-dist .filters button.danger {
  border-color: var(--ov-negative);
  background: var(--ov-negative-soft);
  color: var(--ov-negative);
}
/* The FILLED destructive recipe for a form's one dangerous action
   ('Disable 2FA'): the negative fill under white ink is 4.6:1 in light; the
   same white would be 3.7:1 on the dark #d95c5c, so there the ink is the
   canvas (5.3:1). Never the amber fill it replaced - 3.69:1 light, 2.26:1
   dark, and a brass hue (VIS-03 / CALLS-19, 2026-09-16). Hover stays in
   the same token: darker in light, brighter in dark. */
.ov2-global .ov-legacy-main button.act-danger {
  border-color: var(--ov-negative);
  background: var(--ov-negative);
  color: #fff;
}
.ov2-global .ov-legacy-main button.act-danger:hover {
  border-color: color-mix(in srgb, var(--ov-negative) 88%, #000);
  background: color-mix(in srgb, var(--ov-negative) 88%, #000);
  color: #fff;
}
html.dark .ov2-global .ov-legacy-main button.act-danger,
:root[data-theme="dark"] .ov2-global .ov-legacy-main button.act-danger {
  color: var(--ov-canvas);
}
html.dark .ov2-global .ov-legacy-main button.act-danger:hover,
:root[data-theme="dark"] .ov2-global .ov-legacy-main button.act-danger:hover {
  border-color: color-mix(in srgb, var(--ov-negative) 90%, #fff);
  background: color-mix(in srgb, var(--ov-negative) 90%, #fff);
  color: var(--ov-canvas);
}

/* ==== Fluid motion layer - wave 1 (2026-08-22) =============================
   Apple-feel pass: cross-page continuity, instant press response, springy
   reveals, soft hovers. Server-rendered app, so the biggest lever is the
   MPA View Transitions API - navigations cross-fade instead of hard-cutting
   (progressive enhancement; Firefox simply keeps instant loads). */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 150ms; }
::view-transition-new(root) { animation-duration: 210ms; }

/* Press response on pointer-down: everything interactive compresses the
   instant it is touched. Fast in, springier out. */
.ov-crm-button, .ov-nav-link, .chip, .cplink, .ov-secondary-button,
.ov-crm-tabs-track a, summary.ov-crm-button {
  transition: transform 320ms cubic-bezier(0.34, 1.3, 0.5, 1),
              background-color 140ms ease, border-color 140ms ease,
              color 140ms ease, box-shadow 200ms ease;
}
.ov-crm-button:active, .ov-nav-link:active, .chip:active, .cplink:active,
.ov-secondary-button:active, .ov-crm-tabs-track a:active,
summary.ov-crm-button:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* Rows and cards acknowledge the pointer without shouting. */
.ov-crm-table tbody tr { transition: background-color 140ms ease; }
.ov-crm-plane, .ov-dashboard-plane .card {
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

/* Springy reveal target: olympus-v2.js animates [data-ov-reveal] details.
   The inner panel arrives from its origin (up and out toward the summary),
   not from nowhere. */
details.ov-anim > :not(summary) { transform-origin: top center; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .ov-crm-button, .ov-nav-link, .chip, .cplink, .ov-secondary-button,
  .ov-crm-tabs-track a, summary.ov-crm-button { transition: none; }
  .ov-crm-button:active, .ov-nav-link:active, .chip:active, .cplink:active,
  .ov-secondary-button:active, .ov-crm-tabs-track a:active,
  summary.ov-crm-button:active { transform: none; }
}

/* ==== Fluid motion layer - wave 2 (2026-08-22) =============================
   Scroll-edge chrome, page-enter choreography, eased theme switching,
   size-aware heading tracking, consistent focus rings. */

/* Scroll-edge: the topbar divider exists only when content actually scrolls
   under it - flat chrome on a fresh page, material separation on scroll. */
.ov-top { box-shadow: inset 0 -1px transparent; transition: box-shadow 220ms ease; }
.ov-top.is-scrolled {
  box-shadow: inset 0 -1px var(--ov-line),
              0 10px 22px -18px rgba(2, 6, 23, 0.35);
}

/* Page-enter choreography: content planes settle in with a slight rise.
   CONTENT IS NEVER HIDDEN TO ANIMATE IT - the fade starts at 0.55, not 0,
   and the stagger tops out at 50ms. An earlier draft here held later planes
   fully invisible for up to 170ms, which is the same perceived-latency sin
   as the body fadeUp that was removed from this file on 2026-08-22: a page
   that has already rendered must not wait to be seen. */
@keyframes ovEnter {
  from { opacity: 0.55; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ov-main > * { animation: ovEnter 300ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.ov-main > :nth-child(2) { animation-delay: 25ms; }
.ov-main > :nth-child(n+3) { animation-delay: 50ms; }

/* Theme switch is a material change, not a hard repaint: olympus-v2.js arms
   this class for the duration of the flip. */
html.ov-theming, html.ov-theming *, html.ov-theming *::before,
html.ov-theming *::after {
  transition: background-color 240ms ease, color 240ms ease,
              border-color 240ms ease, box-shadow 240ms ease,
              fill 240ms ease, stroke 240ms ease !important;
}

/* Large text tightens as it grows (optical tracking). */
.ov-heading h1 { letter-spacing: -0.02em; }
.ov-title-line h1 { letter-spacing: -0.02em; }

/* One focus language everywhere - visible, soft, never a default blue box. */
.ov-shell a:focus-visible, .ov-shell button:focus-visible,
.ov-shell summary:focus-visible, .ov-shell input:focus-visible,
.ov-shell select:focus-visible, .ov-shell textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ov-accent, #087a5b) 60%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ov-main > * { animation: none; }
  .ov-top { transition: none; }
  html.ov-theming, html.ov-theming * { transition: none !important; }
}


/* Brand block as an identity tile (21st sidebar reference, 2026-08-24):
   glyph on a soft tile, name + org sub-line. The portal-logo path is
   untouched - white-label brands keep their own mark. */
.ov-brand { align-items: center; gap: 10px; }
.ov-brand-sub {
  display: block;
  font: 500 11.5px/1.2 var(--ov-font);
  color: var(--ov-ink-faint);
  letter-spacing: 0.02em;
}
.ov-brand-text { display: flex; flex-direction: column; gap: 2px; }


/* Legacy filter bars paint every button accent-green via
   `.ov2-global .ov-legacy-main :is(.filters button)` (0-3-1) - the picker
   lives inside those bars, so its internals need one heavier exception
   block instead of chasing that rule's specificity everywhere. */
.ov2-global .ov-legacy-main .filters .ov-dr-pop button {
  background: transparent; color: var(--ov-ink);
  border: 0; box-shadow: none; font-weight: 400;
}
.ov2-global .ov-legacy-main .filters .ov-dr-pop button:hover { background: var(--ov-accent-soft); }
.ov2-global .ov-legacy-main .filters .ov-dr-pop .ov-dr-preset.on {
  background: var(--ov-accent-soft); color: var(--ov-accent-ink); font-weight: 600;
}
.ov2-global .ov-legacy-main .filters .ov-dr-pop .ov-dr-day.in-range { background: var(--ov-accent-soft); }
.ov2-global .ov-legacy-main .filters .ov-dr-pop .ov-dr-day.range-start,
.ov2-global .ov-legacy-main .filters .ov-dr-pop .ov-dr-day.range-end {
  background: var(--ov-accent-ink); color: var(--ov-rail); font-weight: 700;
}
.ov2-global .ov-legacy-main .filters .ov-dr-pop .ov-dr-day:disabled { background: transparent; opacity: 0.35; }

/* The picker's ancestors (filter bars animated by the page-enter wave)
   trap its z-index inside their own stacking context, so later planes
   painted over the open popover. Lift the bar itself above sibling planes;
   30 stays under the rail (40+) and modals. */
.ov2-global .ov-legacy-main .filters,
.ov-crm-filter-form { position: relative; z-index: 30; }

/* Confirm footer (Kamil 2026-08-24): days only highlight; Select applies. */
.ov-dr-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 4px 2px; border-top: 1px solid var(--ov-line);
  margin-top: 8px;
}
.ov-dr-foot span { font-size: 13px; color: var(--ov-ink-3); }
.ov-dr-pop .ov-dr-select, .ov2-legacy-content .ov-dr-pop .ov-dr-select,
.ov2-global .ov-legacy-main .filters .ov-dr-pop .ov-dr-select {
  padding: 6px 16px; border: 0; border-radius: 8px;
  background: var(--ov-primary); color: var(--ov-primary-ink); font-weight: 600;
  cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease;
}
.ov-dr-pop .ov-dr-select:hover { background: var(--ov-primary-hover); }
.ov-dr-pop .ov-dr-select:disabled { opacity: 0.4; cursor: default; }

/* Loading state (21st pixel-grid reference, 2026-08-24) */
@keyframes ov-pixel-on { 0%, 100% { opacity: 0.12; } 50% { opacity: 1; } }
@keyframes ov-shimmer-text {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ov-loading {
  position: fixed; z-index: 90; right: 22px; bottom: 20px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--ov-raised); border: 1px solid var(--ov-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.ov-loading-grid {
  display: grid; grid-template-columns: repeat(3, 4px); gap: 1.5px;
}
.ov-loading-grid span {
  width: 4px; height: 4px; border-radius: 1px;
  background: var(--ov-ink); opacity: 0.15;
  animation: ov-pixel-on 650ms ease-in-out infinite;
}
.ov-loading-label {
  font-size: 14px; font-weight: 500; color: transparent;
  background-image: linear-gradient(90deg, var(--ov-ink-3) 35%,
    var(--ov-ink) 50%, var(--ov-ink-3) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: ov-shimmer-text 1.4s linear infinite;
}
.ov-loading-clock {
  font: 500 13px/1 var(--ov-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ov-ink-3);
}
@media (prefers-reduced-motion: reduce) {
  .ov-loading-grid span { animation: none; }
  .ov-loading-label { animation: none; color: var(--ov-ink-2); background: none; }
}

/* Interactive daily bars (21st chart reference, 2026-08-24) */
.ov-chart { position: relative; }
.ov-chart-tabs { display: flex; gap: 8px; }
/* it is a <button>: opt out of the legacy CTA skin at every specificity
   the page shells reach (same trick as the search trigger). */
.ov-chart-tab, .ov2 .ov-chart-tab, .ov2-legacy-content .ov-chart-tab,
.ov2-global .ov-legacy-main .ov-chart-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 8px 16px; border: 1px solid var(--ov-line); border-radius: 10px;
  background: transparent; color: var(--ov-ink); cursor: pointer;
  text-align: left; box-shadow: none; font-weight: 400;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.ov-chart-tab span { font-size: 12.5px; color: var(--ov-ink-3); }
.ov-chart-tab b { font-size: 17px; color: var(--ov-ink); font-variant-numeric: tabular-nums; }
.ov-chart-tab:hover, .ov2-legacy-content .ov-chart-tab:hover,
.ov2-global .ov-legacy-main .ov-chart-tab:hover { background: var(--ov-accent-soft); }
.ov-chart-tab.on, .ov2-legacy-content .ov-chart-tab.on,
.ov2-global .ov-legacy-main .ov-chart-tab.on {
  background: var(--ov-accent-soft); border-color: var(--ov-accent);
}
.ov-chart-tab.on span { color: var(--ov-accent-ink); }
.ov-chart-gridline { stroke: var(--ov-chart-grid); stroke-width: 1; }
.ov-chart-bar { fill: var(--ov-chart-bar); transition: fill 0.12s ease; }
.ov-chart-bar-last { fill: var(--ov-chart-1); }
.ov-chart-bar-neg { fill: var(--ov-negative); opacity: 0.75; }
.ov-chart-bar-hot { fill: var(--ov-accent-hover); }
.ov-chart-tip {
  position: absolute; top: 6px; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
  padding: 8px 11px; border-radius: 10px;
  background: var(--ov-raised); border: 1px solid var(--ov-line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}
.ov-chart-tip b { font-size: 13px; color: var(--ov-ink); }
.ov-chart-tip span { font-size: 12px; color: var(--ov-ink-3); }
.ov-chart-tip i {
  font: 600 14px/1.2 var(--ov-font-mono); font-style: normal;
  font-variant-numeric: tabular-nums; color: var(--ov-ink);
}

/* Glow trend line (line-charts-9 reference, 2026-08-24) */
.ov-chart-dotgrid { fill: var(--ov-line-strong); fill-opacity: 0.3; }
.ov-chart-line { stroke: var(--ov-chart-1); stroke-width: 2; }
.ov-chart-glow { flood-color: rgba(36, 107, 253, 0.55); }
.ov-chart-dot { fill: var(--ov-chart-1); stroke: var(--ov-raised); stroke-width: 2; }

/* Attio-style entity table (21st contacts-table reference, 2026-08-24) -
   the CRM/Accounts management pattern: column separators, entity pills,
   dotted status chips, quiet toolbar dropdowns, quick-view modal. */
.ov-att-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  flex-wrap: wrap;
}
.ov-att-btn, .ov2 .ov-att-btn, .ov2-legacy-content .ov-att-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--ov-line); border-radius: 8px;
  background: transparent; color: var(--ov-ink-2); font: inherit;
  font-size: 14px; cursor: pointer; box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ov-att-btn:hover { background: var(--ov-accent-soft); color: var(--ov-ink); }
.ov-att-btn.has-active { border-color: var(--ov-accent); color: var(--ov-ink); }
.ov-att-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; }
.ov-att-btn b {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px;
  background: var(--ov-accent); color: #fff;
  font: 700 11.5px/16px var(--ov-font-mono); text-align: center;
}
.ov-att-menu { position: relative; }
.ov-att-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 12px; display: flex; flex-direction: column;
  gap: 10px; background: var(--ov-raised); border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}
.ov-att-pop label { font-size: 12.5px; color: var(--ov-ink-3);
  display: flex; flex-direction: column; gap: 4px; }
.ov-att-search {
  flex: 1; min-width: 160px; max-width: 320px; height: 34px;
  padding: 0 12px; border: 1px solid var(--ov-line); border-radius: 8px;
  background: var(--ov-sunken); color: var(--ov-ink); font: inherit;
  font-size: 14px;
}
.ov-att-search:focus { outline: none; border-color: var(--ov-focus);
  box-shadow: 0 0 0 3px var(--ov-focus-ring); }

.ov-att-plane { position: relative; }
.ov-att-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ov-att-table th {
  padding: 10px 14px; text-align: left; font-size: 12.5px; font-weight: 650;
  letter-spacing: 0; text-transform: none; color: var(--ov-ink-2);
  background: var(--ov-surface); border-bottom: 1px solid var(--ov-line);
}
.ov-att-table th.r, .ov-att-table td.r { text-align: right; }
.ov-att-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--ov-line);
  color: var(--ov-ink);
}
.ov-att-table th + th, .ov-att-table td + td { border-left: 1px solid var(--ov-line); }
.ov-att-table tbody tr { transition: background-color 0.12s ease; }
.ov-att-table tbody tr:hover { background: var(--ov-accent-soft); }
.ov-att-table td.num { font-variant-numeric: tabular-nums; }
.ov-att-entity {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--ov-sunken); color: var(--ov-ink); font-weight: 600;
  text-decoration: none; transition: background-color 0.15s ease;
}
.ov-att-entity:hover { background: var(--ov-accent-soft); }
.ov-att-entity i {
  width: 22px; height: 22px; border-radius: 999px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ov-accent-soft); color: var(--ov-accent-ink);
  font: 700 11px/1 var(--ov-font-mono);
}
.ov-att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  background: var(--ov-sunken); color: var(--ov-ink-3);
}
.ov-att-chip i { width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; font-style: normal; }
.ov-att-chip.is-client { background: var(--ov-accent-soft); color: var(--ov-accent-ink); }
.ov-att-chip.is-affiliate { background: var(--ov-sunken); color: var(--ov-ink-2); }
.ov-att-chip.is-active { background: var(--ov-positive-soft); color: var(--ov-positive); }
/* idle is an outlined full-contrast chip whose dot is a ring, not a 60%
   ghost of the active one (VIS-07 / VIS-14, 2026-09-16; ratios in the
   contrast-audit block, item 5) */
.ov-att-chip.is-idle { opacity: 1; background: transparent;
  box-shadow: inset 0 0 0 1px var(--ov-line); color: var(--ov-ink-2); }
.ov-att-chip.is-idle i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ov-att-chip.is-referral { background: transparent; color: var(--ov-accent-ink);
  box-shadow: inset 0 0 0 1px var(--ov-accent-soft); }
/* Directory tag on division lists (UX accounts X1): the account name links
   into /accounts/{id}; an unmapped key reads "not in Accounts" in the
   muted register - a fact, not an alarm. */
.ov-acct-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 640;
  background: var(--ov-accent-soft); color: var(--ov-accent-ink);
  text-decoration: none; white-space: nowrap; vertical-align: middle;
}
a.ov-acct-tag:hover { text-decoration: underline; }
.ov-acct-tag.is-unmapped { background: var(--ov-fill-subtle); color: var(--ov-ink-3); }
.ov-att-newref { display: inline-flex; gap: 8px; align-items: center; }
.ov-att-newref input { min-width: 190px; }
.ov-att-more { width: 40px; text-align: center; }
.ov-att-dots, .ov2 .ov-att-dots, .ov2-legacy-content .ov-att-dots {
  border: 0; background: transparent; box-shadow: none; padding: 4px;
  border-radius: 6px; cursor: pointer; color: var(--ov-ink-3);
  opacity: 0; transition: opacity 0.15s ease, background-color 0.15s ease;
}
.ov-att-table tbody tr:hover .ov-att-dots { opacity: 0.7; }
.ov-att-dots:hover { opacity: 1; background: var(--ov-sunken); }
.ov-att-dots svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

.ov-att-scrim {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ov-canvas) 55%, transparent);
  backdrop-filter: blur(4px);
}
.ov-att-modal {
  position: relative; width: min(400px, calc(100% - 48px));
  padding: 22px; border-radius: 16px;
  background: var(--ov-raised); border: 1px solid var(--ov-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: ov-att-pop-in 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes ov-att-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
.ov-att-close, .ov2 .ov-att-close, .ov2-legacy-content .ov-att-close {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  border: 0; border-radius: 999px; background: var(--ov-sunken);
  color: var(--ov-ink-3); font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: none; transition: background-color 0.15s ease;
}
.ov-att-close:hover { background: var(--ov-accent-soft); color: var(--ov-ink); }
.ov-att-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ov-att-modal-head > i {
  width: 44px; height: 44px; border-radius: 999px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ov-accent-soft); color: var(--ov-accent-ink);
  font: 700 14px/1 var(--ov-font-mono);
}
.ov-att-modal-head h3 { margin: 0 0 6px; font-size: 16px; color: var(--ov-ink); }
/* the modal chip sits on the card, not in a table cell - no filled slab */
.ov-att-modal-head .ov-att-chip { padding: 2px 8px; font-size: 12px; }
.ov-att-modal-body { display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--ov-line); }
.ov-att-modal-body div { display: flex; align-items: baseline; justify-content: space-between; }
.ov-att-modal-body dt { font-size: 12px; letter-spacing: 0;
  text-transform: none; color: var(--ov-ink-4); }
.ov-att-modal-body dd { margin: 0; font-size: 14px; color: var(--ov-ink); }
.ov-att-modal-body dd.num { font-variant-numeric: tabular-nums;
  font-family: var(--ov-font-mono); }
.ov-att-modal .ov-crm-button-primary { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ov-att-modal { animation: none; } }

/* Task board rows (21st task-list reference, 2026-08-24): a short
   settle-in wave on entry - capped so nothing is ever hidden long - and
   a quiet hover. Reduced motion renders instantly. */
.ov-task-table tbody tr {
  animation: ov-task-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
  transition: background-color 0.12s ease;
}
.ov-task-table tbody tr:hover { background: var(--ov-accent-soft); }
.ov-task-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.ov-task-table tbody tr:nth-child(2) { animation-delay: 25ms; }
.ov-task-table tbody tr:nth-child(3) { animation-delay: 50ms; }
.ov-task-table tbody tr:nth-child(4) { animation-delay: 75ms; }
.ov-task-table tbody tr:nth-child(5) { animation-delay: 100ms; }
.ov-task-table tbody tr:nth-child(n+6) { animation-delay: 120ms; }
@keyframes ov-task-in {
  from { opacity: 0.4; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-task-table tbody tr { animation: none; }
}

/* ==== Vetra surface language (design program 2026-08-24, stage 2) ====
   Underlit dark: light appears to come from BEHIND the interface. All
   effects ride the 499 accent family - one hue, no rainbow. Light mode
   keeps only the restrained pieces (hover border, button lift). */

/* Ambient glow blobs behind the content, dark mode only. Fixed and
   non-interactive - they are atmosphere, not chrome. */
:root[data-theme="dark"] .ov-main::before {
  content: "";
  position: absolute;
  top: -12vh; left: 30vw;
  width: 46vw; height: 30vh;
  background: radial-gradient(closest-side,
    rgba(36, 107, 253, 0.16), transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="dark"] .ov-main::after {
  content: "";
  position: absolute;
  bottom: -18vh; right: -8vw;
  width: 34vw; height: 34vh;
  background: radial-gradient(closest-side,
    rgba(18, 59, 145, 0.18), transparent 70%);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}
.ov-main > * { position: relative; z-index: 1; }

/* Cards brighten their border on hover instead of growing shadows. */
.ov-crm-plane, .ov2-legacy-content .card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid var(--ov-line);
}
.ov-crm-plane:hover, .ov2-legacy-content .card:hover {
  border-color: var(--ov-line-strong);
}

/* Cursor-tracked accent spotlight on the card border (vetra MagicCard):
   a radial glow that follows the mouse, masked down to the 1px ring.
   Zero color at rest; driven by --mx/--my set from one delegated
   mousemove in olympus-v2.js. */
.ov-spot {
  position: relative;
}
.ov-spot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    var(--ov-accent-hover), var(--ov-accent) 40%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ov-spot:hover::after { opacity: 0.9; }

/* Light-leak seam under the topbar in dark mode: a 1px radial gradient
   reads as a glow line, not a rule. */
:root[data-theme="dark"] .ov-top {
  box-shadow: none;
}
:root[data-theme="dark"] .ov-top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: radial-gradient(50% 400% at 50% 0%,
    rgba(75, 141, 255, 0.35), rgba(255, 255, 255, 0.06) 60%, transparent);
  pointer-events: none;
}

/* Primary actions lift 2px with a soft halo - no color change. */
.ov-crm-button-primary, .ov-dr-pop .ov-dr-select {
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.2s ease, background-color 0.15s ease;
}
.ov-crm-button-primary:hover, .ov-dr-pop .ov-dr-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25),
              0 0 0 4px var(--ov-primary-halo);
}
@media (prefers-reduced-motion: reduce) {
  .ov-crm-button-primary:hover, .ov-dr-pop .ov-dr-select:hover { transform: none; }
  .ov-spot::after { transition: none; }
}

/* Multi-step creator (21st multi-step-form reference, 2026-08-24) */
.ov-msf-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ov-msf-bar {
  flex: 1; height: 6px; border-radius: 999px; background: var(--ov-sunken);
  overflow: hidden;
}
.ov-msf-bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--ov-accent);
  transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.ov-msf-count { font-size: 13px; color: var(--ov-ink-3); white-space: nowrap; }
form[data-msf] fieldset[data-msf-step] { border: 0; padding: 0; margin: 0; min-height: 220px; }
.msf-in-right { animation: ov-msf-right 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; }
.msf-in-left { animation: ov-msf-left 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes ov-msf-right { from { opacity: 0.3; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes ov-msf-left { from { opacity: 0.3; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.ov-msf-foot {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ov-line);
}

/* Sequence pipeline (n8n + agent-pipeline references, 2026-08-24) */
.ov-pipe { padding: 0; }
.ov-pipe-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--ov-line);
}
.ov-pipe-live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 11.5px/1 var(--ov-font-mono); letter-spacing: 0.1em;
  color: var(--ov-ink-4);
}
.ov-pipe-live i { width: 6px; height: 6px; border-radius: 999px;
  background: var(--ov-ink-4); font-style: normal; }
.ov-pipe-live.is-on { color: var(--ov-ink-3); }
.ov-pipe-live.is-on i { background: var(--ov-positive);
  animation: ov-pipe-blink 2s ease-in-out infinite; }
@keyframes ov-pipe-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.ov-pipe-meta { font: 500 11.5px/1 var(--ov-font-mono); color: var(--ov-ink-4); }
.ov-pipe-svg { display: block; width: 100%; max-height: 150px; padding: 4px 0; }
.ov-pipe-wire { stroke: color-mix(in srgb, var(--ov-accent) 26%, transparent);
  stroke-width: 1.5; fill: none; }
.ov-pipe-dot-a { fill: var(--ov-accent); }
.ov-pipe-dot-b { fill: var(--ov-accent); opacity: 0.5; }
.ov-pipe-node rect { fill: var(--ov-sunken); stroke: var(--ov-line); stroke-width: 1; }
.ov-pipe-node-trigger rect { fill: var(--ov-accent-soft);
  stroke: color-mix(in srgb, var(--ov-accent) 45%, transparent); }
.ov-pipe-kind { font: 600 10px var(--ov-font-mono); letter-spacing: 0.07em;
  fill: var(--ov-ink-4); text-anchor: middle; }
.ov-pipe-title { font: 500 12.5px var(--ov-font-text); fill: var(--ov-ink);
  text-anchor: middle; }
.ov-pipe-sub { font: 500 10px var(--ov-font-mono); fill: var(--ov-ink-4);
  text-anchor: middle; }
.ov-pipe-ok { fill: var(--ov-positive); }
.ov-pipe-wait { fill: var(--ov-warning); }
.ov-pipe-idle { fill: var(--ov-ink-4); opacity: 0.5; }
.ov-pipe-foot {
  display: flex; gap: 22px; padding: 10px 18px;
  border-top: 1px solid var(--ov-line);
  font: 500 11.5px/1.4 var(--ov-font-mono); letter-spacing: 0.08em;
  color: var(--ov-ink-4);
}
.ov-pipe-foot b { color: var(--ov-ink-2); font-size: 14px; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ov-pipe-live.is-on i { animation: none; }
  .ov-pipe-svg circle animateMotion { display: none; }
}


/* Segmented range pills (vetra live target, 2026-08-24): the preset chips
   fuse into one capsule; the active pill is the mono primary. */
.chips, .ov-preset-row { display: inline-flex; gap: 0; padding: 3px;
  border: 1px solid var(--ov-line); border-radius: 999px;
  background: var(--ov-sunken); flex-wrap: nowrap; }
.ov-preset-row .chip, .ov2-global .ov-preset-row .chip,
.ov2-legacy-content .ov-preset-row .chip {
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ov-ink-3); box-shadow: none;
  padding: 6px 14px; font-size: 13.5px; font-weight: 500;
}
.ov-preset-row .chip.on, .ov2-global .ov-preset-row .chip.on,
.ov2-legacy-content .ov-preset-row .chip.on {
  background: var(--ov-primary); color: var(--ov-primary-ink);
  font-weight: 600;
}
.chips .chip, .ov-preset-row .chip {
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ov-ink-3); box-shadow: none;
  padding: 6px 14px; font-size: 13.5px; font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chips .chip:hover { color: var(--ov-ink); background: transparent; }
.chips .chip.on, .ov-preset-row .chip.on {
  background: var(--ov-primary); color: var(--ov-primary-ink);
  border-color: transparent; font-weight: 600;
}

/* KPI anatomy (shadcn dashboard-2 live target): small muted label,
   32px semibold tabular number, context line under it. */
.ov-kpi-label { font-size: 13.5px; font-weight: 500; color: var(--ov-ink-3); }
.ov-kpi-value, .ov-kpi b.ov-kpi-value {
  font-size: 30px; font-weight: 650; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ov-ink);
  line-height: 1.15;
}
.ov-kpi-context { font-size: 13px; color: var(--ov-ink-4); }


/* ==== Inset panel (Untitled UI / vetra frame, Kamil 2026-08-24) ==========
   The content column is a rounded panel lifted off the canvas; the rail
   stays on the canvas itself. Desktop only - mobile keeps full-bleed. */
@media (min-width: 1101px) {
  .ov-top {
    margin: 12px 14px 0 2px;
    border: 1px solid var(--ov-line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--ov-surface);
    min-height: 56px;
  }
  .ov-main {
    margin: 0 14px 14px 2px;
    border: 1px solid var(--ov-line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    background: var(--ov-surface);
  }
  /* 2026-09-15 (Kamil: "ta sekcja jakby sie rozjezdzala"): two things broke
     the frame. `.ov2-global .ov-legacy-main { margin: 0 }` (0,2,0) beat the
     panel margin above, so the top bar kept its 14px right inset while the
     panel ran to the viewport edge; and the shell's fixed 56px top row did
     not know about the bar's 12px top margin, so the bar overlapped the
     panel by 12px. Same margins on both, and the top row sizes itself. */
  .ov2 { grid-template-rows: auto minmax(0, 1fr); }
  .ov2-global .ov-main.ov-legacy-main, .ov2-global .ov-main { margin: 0 14px 14px 2px; }
  :root[data-theme="dark"] .ov-top { background: var(--ov-surface); }
}

/* ==== One table language everywhere (Kamil, 2026-08-24: "wszystkie
   tabele... jak ta w Accounts"). The page shells style their tables at
   (0-3-1), so this block carries the same weight - the Attio skin WINS on
   every listing table: sentence-case headers, cell separators, quiet
   hover, tabular numerals. Headers went sentence case everywhere on
   2026-09-24 (the approved Traffic tables; house rule: no all-caps
   labels) - every th rule in this file now says the same thing. ==== */
.ov2-global .ov-crm-workspace .ov-crm-table th,
.ov2-global .ov-legacy-main .listtbl th,
.ov2-global .ov-legacy-main .ov-dist-table th,
.ov2 .ov-dist-table th, .ov2 .listtbl th, .ov2 .ov-crm-table th,
.ov2 .ov-task-table th, .ov2 .ov-table th, .ov2 .ov-qa-table th {
  font-size: 12.5px; font-weight: 650; letter-spacing: 0;
  text-transform: none; color: var(--ov-ink-2);
  background: var(--ov-surface); border-bottom: 1px solid var(--ov-line);
  padding: 10px 14px; text-align: left;
}
.ov2-global .ov-crm-workspace .ov-crm-table td,
.ov2-global .ov-legacy-main .listtbl td,
.ov2-global .ov-legacy-main .ov-dist-table td,
.ov2 .ov-dist-table td, .ov2 .listtbl td, .ov2 .ov-crm-table td,
.ov2 .ov-task-table td, .ov2 .ov-table td, .ov2 .ov-qa-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--ov-line);
}
.ov2-global .ov-crm-workspace .ov-crm-table th + th,
.ov2-global .ov-crm-workspace .ov-crm-table td + td,
.ov2-global .ov-legacy-main .listtbl th + th,
.ov2-global .ov-legacy-main .listtbl td + td,
.ov2-global .ov-legacy-main .ov-dist-table th + th,
.ov2-global .ov-legacy-main .ov-dist-table td + td,
.ov2 .ov-table th + th, .ov2 .ov-table td + td,
.ov2 .ov-qa-table th + th, .ov2 .ov-qa-table td + td {
  border-left: 1px solid var(--ov-line);
}
.ov2 .ov-crm-table tbody tr, .ov2 .listtbl tbody tr,
.ov2 .ov-dist-table tbody tr, .ov2 .ov-table tbody tr,
.ov2 .ov-qa-table tbody tr {
  transition: background-color 0.12s ease;
}
.ov2-global .ov-crm-workspace .ov-crm-table tbody tr:hover,
.ov2-global .ov-legacy-main .listtbl tbody tr:hover,
.ov2 .ov-crm-table tbody tr:hover, .ov2 .listtbl tbody tr:hover,
.ov2 .ov-dist-table tbody tr:hover, .ov2 .ov-table tbody tr:hover,
.ov2 .ov-qa-table tbody tr:hover { background: var(--ov-accent-soft); }
.ov2 .listtbl td.r, .ov2 .ov-dist-table td.r,
.ov2-global .ov-legacy-main .listtbl td.r {
  font-variant-numeric: tabular-nums;
}
/* the right-aligned money/number columns keep their alignment */
.ov2-global .ov-crm-workspace .ov-crm-table th.r,
.ov2-global .ov-crm-workspace .ov-crm-table td.r,
.ov2-global .ov-legacy-main .listtbl th.r,
.ov2-global .ov-legacy-main .listtbl td.r { text-align: right; }

/* ==== Card treatment unified (Kamil bug list #3): every division gets the
   /dist card - raised surface, quiet shadow, centered column.
   The radius was hard-coded 14px here, which quietly outranked the scale and
   was why lifting --ov-radius-lg changed nothing on screen (2026-08-25). It
   reads the token now, so curvature is one value for the whole platform. */
.ov2-legacy-content .ov-legacy-main .card {
  margin: 14px 0; padding: 22px 24px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-lg);
  background: var(--ov-raised); box-shadow: var(--ov-touch-shadow);
}
/* 2026-08-24 fix: capping only SOME children broke wide windows - the
   capped ones centred at 1680px while .kpis and the toolbars still ran the
   full width, so the page visibly stepped in and out. The cap belongs to
   the CONTENT COLUMN, once, so every child shares one left edge. */
.ov-main { --ov-content: min(100%, 2600px); }
.ov-legacy-main > *, .ov2-global .ov-legacy-main > *,
.ov2-global .ov-legacy-main > .card { max-width: var(--ov-content); }
.ov-legacy-main { display: flow-root; }

/* ==== Ruler rail (sidebar-001 reference, 2026-08-24) =====================
   Division sub-links read against a hairline ruler: minor ticks between
   items, the hovered item's tick reaches further, the ACTIVE item swaps
   its tick for an accent bar and sits indented. Hovering the list dims
   the siblings; everything settles on the house spring. */
.ov-nav-sec-body { --ovr-left: 22px; }
.ov-nav-sec-body .ov-nav-link {
  position: relative;
  margin-left: 14px;
  transition: color 0.18s ease, background-color 0.18s ease,
              transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.18s ease;
}
.ov-nav-sec-body .ov-nav-link::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 14px; height: 1px;
  background: color-mix(in srgb, var(--ov-ink) 28%, transparent);
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              background-color 0.18s ease;
}
.ov-nav-sec-body .ov-nav-link:hover::before { width: 22px; left: -14px; }
.ov-nav-sec-body .ov-nav-link:hover { transform: translateX(5px); }
.ov-nav-sec-body .ov-nav-link.ov-nav-local-current {
  transform: translateX(7px);
}
.ov-nav-sec-body .ov-nav-link.ov-nav-local-current::before {
  width: 18px; height: 2px; border-radius: 999px;
  background: var(--ov-accent);
}
/* hovering the list dims the rest; active never dims */
.ov-nav-sec-body:hover .ov-nav-link { opacity: 0.45; }
.ov-nav-sec-body:hover .ov-nav-link:hover,
.ov-nav-sec-body:hover .ov-nav-link.ov-nav-local-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ov-nav-sec-body .ov-nav-link,
  .ov-nav-sec-body .ov-nav-link::before { transition: none; }
  .ov-nav-sec-body .ov-nav-link:hover { transform: none; }
}

/* Resizable rail (sidebar-001): a 5px drag handle on the rail's edge,
   width persisted; the grid column follows --ov-rail-w. */
@media (min-width: 1101px) {
  .ov2 { grid-template-columns: var(--ov-rail-w, 224px) minmax(0, 1fr); }
  .ov2.ov-rail-collapsed { grid-template-columns: 0px minmax(0, 1fr); }
  .ov-rail-resizer {
    position: absolute; top: 0; right: -2px; width: 5px; height: 100%;
    cursor: col-resize; z-index: 30;
  }
  .ov-rail-resizer:hover, .ov-rail-resizer.is-dragging {
    background: linear-gradient(to right, transparent,
      color-mix(in srgb, var(--ov-accent) 45%, transparent));
  }
}


/* ==== Scrollbars (vetra/shadcn no-scrollbar, Kamil's recording 2026-08-24)
   Functional scroll areas hide their bars - content still pans/scrolls;
   the PAGE keeps a single slim scrollbar like the templates. */
.tablewrap, .ov-crm-tablewrap, .ov-task-tablewrap, .ov-qa-tablewrap,
.ov-table-wrap, .ov-workspace-tabs, .ov-qa-periods,
.ov-dr-presets, .ov-rail nav, .ov-qa-thread-list,
.ov2-global .ov-leads-workspace .ov-table-wrap,
.ov2-global .ov-legacy-main .tablewrap {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tablewrap::-webkit-scrollbar, .ov-crm-tablewrap::-webkit-scrollbar,
.ov-task-tablewrap::-webkit-scrollbar, .ov-qa-tablewrap::-webkit-scrollbar,
.ov-table-wrap::-webkit-scrollbar, .ov-workspace-tabs::-webkit-scrollbar,
.ov-qa-periods::-webkit-scrollbar,
.ov-dr-presets::-webkit-scrollbar, .ov-rail nav::-webkit-scrollbar,
.ov-qa-thread-list::-webkit-scrollbar {
  display: none;
}
/* the one page scrollbar, slim like vetra */
body::-webkit-scrollbar { width: 5px; height: 5px; }
body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ov-ink) 14%, transparent);
  border-radius: 10px;
}
body::-webkit-scrollbar-track { background: transparent; }

/* entity sub-line under a pill (company under a contact, etc.) */
.ov-att-entity-sub { display: block; margin: 3px 0 0 30px; font-size: 12px;
  color: var(--ov-ink-4); }

/* ==== Legacy palette routed into the 499 system (Kamil, 2026-08-24:
   "miejscami sa jeszcze motywy sprzed zmian - zielone poza liczbami").
   The consolidated legacy sheets carry their OWN static palettes (sage
   greens, warm ivories, an evergreen dark) that never followed the token
   migration - the search palette's green highlight came from there. This
   block sits last, matches every legacy theme selector, and re-points the
   whole legacy vocabulary at the live tokens, so old pages follow the 499
   theme - light AND dark - automatically. Money/status semantics keep
   their meaning through the semantic tokens. */
:root, html.dark, :root[data-theme="dark"] {
  --bg: var(--ov-canvas);
  --panel: var(--ov-raised);
  --panel2: var(--ov-sunken);
  --line: var(--ov-line);
  --line-strong: var(--ov-line-strong);
  --text: var(--ov-ink);
  --muted: var(--ov-ink-3);
  --accent: var(--ov-accent);
  --navy: var(--ov-ink);
  --green: var(--ov-positive);
  --red: var(--ov-negative);
  --amber: var(--ov-warning);
  --silver: var(--ov-ink-4);
  --silver-dim: var(--ov-ink-4);
  --focus: var(--ov-focus);
  --bar: var(--ov-accent);
  --sel: var(--ov-accent-soft);
  --rowhover: var(--ov-accent-soft);
  --btn-bg: var(--ov-primary);
  --btn-bg-h: var(--ov-primary-hover);
  --btn-fg: var(--ov-primary-ink);
}

/* ==== Leads flow dashboard (animated-beam reference, 2026-08-24) ======== */
.ov-flow-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin: 14px 0;
}
.ov-flow-grid > .card { margin: 0; }
@media (max-width: 1100px) { .ov-flow-grid { grid-template-columns: 1fr; } }
.ov-kpi-grid2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px; align-content: center;
}
.ov-flow-svg { display: block; width: 100%; height: auto; }
.ov-flow-wire {
  fill: none; stroke: color-mix(in srgb, var(--ov-accent) 18%, transparent);
  stroke-width: 1.2;
}
.ov-flow-beam {
  fill: none; stroke: url(#fbeam); stroke-linecap: round;
  stroke-dasharray: 26 74;
  animation: ov-flow-run 2.4s linear infinite;
}
@keyframes ov-flow-run {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.ov-flow-node rect {
  fill: var(--ov-sunken); stroke: var(--ov-line); stroke-width: 1;
}
.ov-flow-hub rect {
  fill: var(--ov-accent-soft);
  stroke: color-mix(in srgb, var(--ov-accent) 45%, transparent);
}
.ov-flow-name { font: 600 12.5px var(--ov-font-text); fill: var(--ov-ink); }
.ov-flow-n { font: 500 11px var(--ov-font-mono); fill: var(--ov-ink-4);
  font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ov-flow-beam { animation: none; } }

/* ==== Ledger tables (v-table-12 reference, Kamil 2026-08-24: accounting,
   AP and AR). The money surfaces get the invoice-table treatment on top of
   the shared skin: mono document ids, right-aligned tabular money, pill
   status badges with semantic tones, and a real total row. ==== */
.ov2 .ov-ledger td.doc, .ov2 .ov-ledger td.mono,
.ov2-global .ov-legacy-main .ov-ledger td.doc {
  font-family: var(--ov-font-mono); font-size: 13px; font-weight: 500;
}
.ov2 .ov-ledger td.r, .ov2 .ov-ledger th.r {
  text-align: right; font-variant-numeric: tabular-nums;
}
.ov2 .ov-ledger td.r.money { font-weight: 600; }
.ov2 .ov-ledger tfoot td, .ov2-global .ov-legacy-main .ov-ledger tfoot td {
  border-top: 1px solid var(--ov-line-strong); border-bottom: 0;
  background: var(--ov-sunken); font-weight: 650; color: var(--ov-ink);
  padding: 12px 14px;
}
.ov2 .ov-ledger tfoot td.r { font-variant-numeric: tabular-nums; }
/* status pills: paid / pending / overdue / draft */
.ov-pill {
  display: inline-flex; align-items: center; gap: 6px;
  /* a status label is atomic - wrapping turns the pill into a blob */
  white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  background: var(--ov-sunken); color: var(--ov-ink-3);
}
.ov-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; }
.ov-pill-paid { background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov-pill-pending { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov-pill-overdue { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov-pill-draft { background: transparent; color: var(--ov-ink-4);
  box-shadow: inset 0 0 0 1px var(--ov-line); }


/* The panel clips its own atmosphere (Kamil, 2026-08-24: "z tylu za
   glownym panelem jest szary prostokat... na zagieciach"). The ambient
   glows are absolute inside the panel and `overflow: clip` trims them to
   the rounded corners - clip, never hidden, so no inner scroller comes
   back. Fixed-position children (the quick-view modal, the date popover)
   escape it as before. */
.ov-main { position: relative; overflow: clip; }


/* ==== Fluid screens (Kamil, 2026-08-24) =================================
   Report and dashboard grids grow with the panel instead of stopping at a
   fixed column count: KPI strips, chart pairs and card grids all re-flow
   from the available width. */
.ov-kpis, .ov-dist-kpis, .kpis, .kpis-money, .kpis-ops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ov2-global .ov-legacy-main .grid2,
.ov-dist-campaign > .grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 14px;
}
/* the flow dashboard's two-up rows widen with the panel too */
@media (min-width: 1600px) {
  .ov-flow-grid { gap: 18px; }
}
/* tables fill their card - no dead band on the right */
.ov2 table, .ov2-global .ov-legacy-main table { width: 100%; }

/* ==== Settings / Administration style guide (Linear settings reference,
   Kamil 2026-08-24). Settings surfaces read as SECTIONS of cards, not a
   wall of panels: a page lede, section headings with their own action
   slot, feature cards that state what a thing is and whether it is on. */
.ov-set-lede { margin: 0 0 26px; max-width: 62ch; }
.ov-set-lede h1 { margin: 0 0 6px; }
.ov-set-lede p { margin: 0; color: var(--ov-ink-3); font-size: 14px; }
.ov-set-section { margin: 0 0 34px; }
.ov-set-section > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 14px;
}
.ov-set-section > header h2 {
  margin: 0; font: 650 16px/1.2 var(--ov-font-display);
  letter-spacing: -0.01em;
}
.ov-set-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
a.ov-set-card, a.ov-set-card:hover { text-decoration: none; }
a.ov-set-card h3, a.ov-set-card p, a.ov-set-card span {
  text-decoration: none; box-shadow: none;
}
.ov-set-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px; border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md); background: var(--ov-raised);
  transition: border-color 0.2s ease;
}
.ov-set-card:hover { border-color: var(--ov-line-strong); }
.ov-set-card-head { display: flex; align-items: flex-start; gap: 12px; }
.ov-set-card-head svg { width: 19px; height: 19px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; color: var(--ov-ink-3); }
.ov-set-card h3 { margin: 0; font: 600 14px/1.3 var(--ov-font-text);
  color: var(--ov-ink); }
.ov-set-card p { margin: 4px 0 0; font-size: 13.5px; color: var(--ov-ink-3);
  line-height: 1.5; }
.ov-set-card-foot { margin-top: auto; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }
.ov-set-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ov-ink-4);
}
.ov-set-state::before { content: ""; width: 7px; height: 7px;
  border-radius: 999px; background: var(--ov-ink-4); }
.ov-set-state.is-on { color: var(--ov-positive); }
.ov-set-state.is-on::before { background: var(--ov-positive); }
.ov-set-state.is-warn { color: var(--ov-warning); }
.ov-set-state.is-warn::before { background: var(--ov-warning); }

/* Settings pages follow the style guide's heading voice: card titles are
   sentence-case statements, not uppercase labels (Kamil, 2026-08-24 -
   the Administration hub and the settings pages must read alike). */
body:has(.ov-set-lede) .ov-legacy-main .card > h2,
body:has(.ov-set-lede) .ov-legacy-main .card h2:first-child {
  font: 600 15px/1.3 var(--ov-font-text);
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ov-ink);
  margin: 0 0 12px;
}
body:has(.ov-set-lede) .ov-legacy-main .card > h2 .sub {
  font-weight: 400; font-size: 13.5px; color: var(--ov-ink-3);
  text-transform: none; letter-spacing: 0;
}

/* ==== Mobile pass (Kamil, 2026-08-24: "sprawdz teraz mobile") ==========
   Nothing here changes the desktop; it fixes what a 390px screen breaks. */
@media (max-width: 780px) {
  /* the segmented range capsule scrolls instead of wrapping mid-word */
  .chips, .ov-preset-row {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar, .ov-preset-row::-webkit-scrollbar { display: none; }
  .ov-preset-row .chip, .chips .chip { white-space: nowrap; flex: 0 0 auto; }

  /* one KPI per row - two columns of big money numbers do not fit */
  .ov-kpis, .ov-dist-kpis, .kpis, .kpis-money, .kpis-ops, .ov-kpi-grid2 {
    grid-template-columns: 1fr;
  }
  .ov-kpi + .ov-kpi::before { display: none; }
  .ov-kpi { padding: 14px 16px; }
  .ov-kpi-value, .ov-kpi b.ov-kpi-value { font-size: 24px; }

  /* chart headers stack: title over the metric tabs, tabs full width */
  .ov-section-heading, .ov-crm-plane-heading, .ov-set-section > header {
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .ov-chart-tabs { width: 100%; }
  .ov-chart-tab { flex: 1 1 0; }

  /* toolbars and heading action rows wrap as full-width blocks */
  .ov-heading-actions, .ov-att-toolbar, .ov-crm-filter-actions {
    width: 100%; flex-wrap: wrap;
  }
  .ov-att-search { flex: 1 1 100%; max-width: none; }

  /* the inset panel gives its margins back to the content */
  .ov-main { padding: 20px 16px 40px; }
  .ov-dist .card, .ov2-legacy-content .ov-legacy-main .card { padding: 16px; }

  /* comfortable tap targets */
  .ov-main a.ov-crm-button, .ov-main button.ov-crm-button,
  .ov-att-btn, .ov-crm-button { min-height: 38px; }

  /* flow map is a tall thin canvas on a phone - let it scroll with the card */
  .ov-flow-svg { min-width: 560px; }
  .ov-flow .ov-crm-tablewrap, .ov-flow { overflow-x: auto; }
}

/* ==== In-place drill-down rows (2026-08-24) ============================= */
.ov-drill-toggle, .ov2 .ov-drill-toggle,
.ov2-global .ov-legacy-main .ov-drill-toggle {
  width: 18px; height: 18px; margin-right: 8px; padding: 0;
  border: 0; background: transparent; box-shadow: none; cursor: pointer;
  vertical-align: middle; position: relative;
}
.ov-drill-toggle::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px;
  border-right: 1.6px solid var(--ov-ink-3);
  border-bottom: 1.6px solid var(--ov-ink-3);
  transform: rotate(-45deg);
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.ov-drill-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.ov-drill-toggle:hover::before { border-color: var(--ov-ink); }
.ov2 tr.ov-drill-kid > td {
  background: var(--ov-sunken);
  font-size: 13.5px; color: var(--ov-ink-2);
}
.ov2 tr.ov-drill-kid .ov-drill-name { padding-left: 40px; position: relative; }
.ov2 tr.ov-drill-kid .ov-drill-name::before {
  content: ""; position: absolute; left: 22px; top: 50%;
  width: 10px; height: 1px; background: var(--ov-line-strong);
}
.ov2 tr.ov-drill-kid:hover > td { background: var(--ov-accent-soft); }

/* group labels inside a drill-down (source half / buyer half) */
.ov2 tr.ov-drill-label > td {
  padding: 8px 14px 6px 40px;
  font: 600 11.5px/1.4 var(--ov-font-mono);
  letter-spacing: 0; text-transform: none;
  color: var(--ov-ink-4); background: var(--ov-sunken);
  border-bottom: 0;
}
.ov2 tr.ov-drill-label:hover > td { background: var(--ov-sunken); }

/* Drill-down inside the profit bar lists (Calls dashboard, 2026-08-24) */
.ov-bar-kid.bar-row { padding-left: 26px; opacity: 0.92; }
.ov-bar-kid.bar-row .bar-name { font-size: 13.5px; color: var(--ov-ink-2); }
.ov-bar-kid.bar-row .bar { opacity: 0.65; }
.ov-bar-kid-label {
  margin: 8px 0 2px 26px;
  font: 600 11px/1.4 var(--ov-font-mono);
  letter-spacing: 0; text-transform: none; color: var(--ov-ink-4);
}

/* ==== Notification category switches (Team & Access, 2026-08-25) ==========
   The 21st notifications table translated into house markup - a real
   checkbox carries the state, the pill is drawn from it, so the form posts
   without a line of JavaScript. */
.ov-notif-table td { vertical-align: middle; }
.ov-notif-name { display: block; font-weight: 550; color: var(--ov-ink); }
.ov-notif-hint {
  display: block; margin-top: 2px;
  font-size: 13px; color: var(--ov-ink-4); line-height: 1.45;
}
.ov-switch { display: inline-flex; cursor: pointer; }
.ov-switch input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.ov-switch i {
  display: block; width: 38px; height: 22px; border-radius: 999px;
  background: var(--ov-line-strong); position: relative;
  transition: background 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.ov-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--ov-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.ov-switch input:checked + i { background: var(--ov-accent); }
.ov-switch input:checked + i::after { transform: translateX(16px); }
.ov-switch input:focus-visible + i {
  outline: 2px solid var(--ov-accent); outline-offset: 2px;
}

/* ==== UI review fixes, Traffic Network (2026-08-25) =======================
   Found auditing /affiliate/* in both themes with real WCAG maths. */

/* 1. A plain .ov-crm-button was UNREADABLE in dark: 1.42:1.
   The 2026-08-24 legacy-palette routing re-pointed --btn-bg at --ov-primary,
   which in dark is near-white. The legacy `button` rule then won the
   BACKGROUND while `.ov-crm-workspace .ov-crm-button` still won the COLOUR,
   so Save and Back rendered #d4d4d8 text on a #fafafa fill. Buttons that
   carry -primary were fine (they set their own ink), which is why this hid.
   Restating both halves together, at a weight that beats the legacy rule,
   keeps the pair consistent whatever the legacy vocabulary points at. */
.ov2-global button.ov-crm-button:not(.ov-crm-button-primary),
.ov2 button.ov-crm-button:not(.ov-crm-button-primary),
.ov2-global .ov-crm-workspace button.ov-crm-button:not(.ov-crm-button-primary) {
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  border: 1px solid var(--ov-control-line);
}
.ov2-global button.ov-crm-button:not(.ov-crm-button-primary):hover,
.ov2 button.ov-crm-button:not(.ov-crm-button-primary):hover {
  background: var(--ov-surface);
  color: var(--ov-ink);
  border-color: var(--ov-line-strong);
}

/* 2. Table headers failed WCAG AA in BOTH themes - 3.87:1 dark, 3.38:1 light
   against the 4.5:1 a 9.5px uppercase label needs. --ov-ink-4 is the right
   token for a whisper, but not for the only label a column gets; --ov-ink-3
   clears the bar in both themes (about 6:1 dark, 5.3:1 light) and still
   reads as secondary next to the data. Since 2026-09-24 the heads are
   sentence case at 12.5px and take ink-2, the approved Traffic head. */
.ov2-global .ov-crm-workspace .ov-crm-table th,
.ov2-global .ov-legacy-main .listtbl th,
.ov2-global .ov-att-table th,
.ov2 .ov-att-table th,
.ov2 .ov-ledger th {
  color: var(--ov-ink-2);
}

/* 3. NOT a defect - recorded so it is not "found" again. The entity avatar
   initials first measured 1.43:1, but that was the audit compositing a
   0.14-alpha tint as if it were opaque. Composited properly they are
   5.34:1 in dark and 8.17:1 in light: both pass. Left untouched. */

/* 4. Two more AA failures, both carrying real information rather than
   decoration, so the bar is 4.5:1 and both were under it:
   .ov-kpi-context is the revenue line under a KPI (3.87:1 dark, 3.38:1
   light) and .ov-view-badge is the live-state chip (4.40:1 in light, a
   tenth short). Both move one token up the ink ramp and stay secondary. */
.ov-kpi-context { color: var(--ov-ink-3); }
:root:not([data-theme="dark"]) .ov-kpi-context { color: var(--ov-ink-2); }
:root:not([data-theme="dark"]) .ov-view-badge { color: var(--ov-ink-2); }

/* 5. The same tenth-short pair on the directory (VIS-07 / VIS-14,
   2026-09-16), light only - dark passes as it is. .ov-crm-status-neutral
   was ink-3 on sunken, 4.40:1 at 11.5px: ink-2 is 9.5:1. The idle division
   chip (rule next to .ov-att-chip) drops its 0.6 opacity for an outlined
   chip in ink-2, 10.4:1 light / 12.7:1 dark, with a ring for a dot - so
   active (filled dot) and idle (ring plus the word 'inactive') never differ
   by colour alone. The search trigger's label takes ink-4: 4.79:1 on the
   sunken field and 5.27:1 on its white hover, still a hint rather than a
   value (ink-2 there would read as typed text). */
:root:not([data-theme="dark"]) .ov-crm-status-neutral { color: var(--ov-ink-2); }
:root:not([data-theme="dark"]) button.ov-page-search,
:root:not([data-theme="dark"]) .ov2-global .ov-search-trigger span { color: var(--ov-ink-4); }

/* The sign-up copy controls are <button> now (they copy, they never
   navigate). A button carries the UA's own chrome, so the rail styling has
   to restate the parts an <a> got for free. */
.ov2-global button.ov-nav-link, .ov2 button.ov-nav-link,
.ov2-global .ov-rail button.ov-nav-link {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  /* the legacy `button` rule paints --btn-bg (near-white in dark) and beats
     the plain class selector - the same trap that made Save unreadable */
  background: transparent;
  color: var(--ov-ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ov2-global button.ov-nav-link:hover, .ov2 button.ov-nav-link:hover,
.ov2-global .ov-rail button.ov-nav-link:hover {
  background: var(--ov-raised);
  color: var(--ov-ink);
}

/* ==== Ledger tables, card variant (Kamil, 2026-08-25: cnippet-table for
   every accounting surface - AP, AR, Accounting, CEO's Office) ============
   Translated from the reference into house CSS: no Tailwind, no React.

   The reference's idea is that a money table is a BLOCK, not a grid of
   lines: the cells carry the surface, the body is one rounded card, and
   separation comes from a single hairline under each row rather than from
   a cage of vertical rules. Borders live on the cells (not the row) because
   only cells can hold the rounded corners; that is why this needs
   border-collapse: separate. */
.ov2 table.ov-ledger,
.ov2-global .ov-legacy-main table.ov-ledger {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.ov2 .ov-ledger thead th,
.ov2-global .ov-legacy-main .ov-ledger thead th {
  background: transparent;
  border: 0;
  padding: 0 10px 8px;
}
.ov2 .ov-ledger tbody td,
.ov2-global .ov-legacy-main .ov-ledger tbody td {
  background: var(--ov-raised);
  border-top: 1px solid var(--ov-line);
  border-bottom: 0;
  /* 10px horizontal, not 12: six money columns spend 144px on padding alone,
     which was pushing the CEO receivables table 5px past its half-width card */
  padding: 12px 10px;
  vertical-align: middle;
}
/* Only the figures refuse to wrap. Applying nowrap to every cell (the
   reference does) pushed the CEO Office's six-column receivables table past
   its half-width card at 1500px, hiding the Total behind a scroll - the one
   column that must always be visible. Names and labels may wrap; money,
   dates and document ids may not. */
.ov2 .ov-ledger tbody td.r,
.ov2 .ov-ledger tbody td.money,
.ov2 .ov-ledger tbody td.doc,
.ov2 .ov-ledger tbody td.mono,
.ov2-global .ov-legacy-main .ov-ledger tbody td.r,
.ov2-global .ov-legacy-main .ov-ledger tbody td.doc {
  white-space: nowrap;
}
.ov2 .ov-ledger tbody td:first-child,
.ov2-global .ov-legacy-main .ov-ledger tbody td:first-child {
  border-left: 1px solid var(--ov-line);
}
.ov2 .ov-ledger tbody td:last-child,
.ov2-global .ov-legacy-main .ov-ledger tbody td:last-child {
  border-right: 1px solid var(--ov-line);
}
/* the block's four corners, drawn on the corner cells */
.ov2 .ov-ledger tbody tr:first-child td:first-child,
.ov2-global .ov-legacy-main .ov-ledger tbody tr:first-child td:first-child {
  border-top-left-radius: 12px;
}
.ov2 .ov-ledger tbody tr:first-child td:last-child,
.ov2-global .ov-legacy-main .ov-ledger tbody tr:first-child td:last-child {
  border-top-right-radius: 12px;
}
.ov2 .ov-ledger tbody tr:last-child td:first-child,
.ov2-global .ov-legacy-main .ov-ledger tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}
.ov2 .ov-ledger tbody tr:last-child td:last-child,
.ov2-global .ov-legacy-main .ov-ledger tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}
.ov2 .ov-ledger tbody tr:last-child td,
.ov2-global .ov-legacy-main .ov-ledger tbody tr:last-child td {
  border-bottom: 1px solid var(--ov-line);
}
/* hover lifts the whole row, since the cells carry the surface */
.ov2 .ov-ledger tbody tr:hover td,
.ov2-global .ov-legacy-main .ov-ledger tbody tr:hover td {
  background: var(--ov-surface);
}
/* a footer that reads as the block's base, not another row */
.ov2 .ov-ledger tfoot td,
.ov2-global .ov-legacy-main .ov-ledger tfoot td {
  border: 0;
  background: transparent;
  padding: 14px 12px 0;
  font-weight: 650;
  color: var(--ov-ink);
}
.ov2 .ov-ledger tfoot tr:first-child td,
.ov2-global .ov-legacy-main .ov-ledger tfoot tr:first-child td {
  border-top: 1px solid var(--ov-line-strong);
  padding-top: 12px;
}
/* no vertical rules inside a ledger - the reference's point */
.ov2 .ov-ledger td + td, .ov2 .ov-ledger th + th,
.ov2-global .ov-legacy-main .ov-ledger td + td,
.ov2-global .ov-legacy-main .ov-ledger th + th {
  border-left: 0;
}

/* ==== Invoice badges (Kamil, 2026-08-25: "faktury mialy wygladac bardziej
   jak tu" - the cnippet invoice table) ====================================
   Distinct from .ov-pill on purpose. A pill is a live STATE in an ops list
   (round, dotted, glanceable). An invoice status is a document PROPERTY on
   a printed-looking row, so the reference squares it off, gives it a real
   border and drops the dot: rounded-md, 15%-alpha fill, coloured text. */
.ov-badge {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 600 12.5px/1.5 var(--ov-font-text);
}
.ov-badge-success {
  background: var(--ov-positive-soft); color: var(--ov-positive);
  border-color: color-mix(in srgb, var(--ov-positive) 22%, transparent);
}
.ov-badge-warning {
  background: var(--ov-warning-soft); color: var(--ov-warning);
  border-color: color-mix(in srgb, var(--ov-warning) 22%, transparent);
}
.ov-badge-danger {
  background: var(--ov-negative-soft); color: var(--ov-negative);
  border-color: color-mix(in srgb, var(--ov-negative) 22%, transparent);
}
.ov-badge-info {
  background: var(--ov-accent-soft); color: var(--ov-accent);
  border-color: color-mix(in srgb, var(--ov-accent) 22%, transparent);
}
.ov-badge-outline { background: transparent; color: var(--ov-ink-3);
  border-color: var(--ov-line-strong); }

/* the invoice row's own voice: mono document id, quiet dates, weighted money */
.ov-inv-id { font-family: var(--ov-font-mono); font-size: 13px; font-weight: 550;
  color: var(--ov-ink); }
.ov-inv-date { color: var(--ov-ink-3); font-size: 13.5px; }
.ov-inv-amount { text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ov-inv-foot td {
  border-top: 1px solid var(--ov-line-strong) !important;
  background: transparent !important;
  padding-top: 12px !important; font-weight: 650; color: var(--ov-ink);
}
.ov-inv-foot td.r { text-align: right; font-variant-numeric: tabular-nums; }

/* ==== One button language (Kamil, 2026-08-25: "lepsze guziki") ===========
   Measured across eight pages before touching anything: the console rendered
   EIGHT different button shapes. The canonical one - .ov-crm-button, 112
   uses - is 36px tall, 8px radius, 12.5px at weight 630. The others drifted:
   bare <button> (92 of them, styled only by the legacy sheet) came out 38px
   tall with a 6px radius at 14px/400, .ov-secondary-button and .ov-att-btn
   carried the wrong size and weight, .ov-danger-action was 32px at 7px.

   This harmonises GEOMETRY AND TYPE ONLY - never colour, never which button
   is primary. Hierarchy is a product decision and stays exactly as it is;
   what changes is that a button stops announcing which module wrote it.
   Modelled on the reference's variant/size split (originui/button, 21st). */
/* The exclusions are controls that are not buttons in the visual sense: a
   drill caret, a kebab, the metric TAB (a two-line card), a switch and a
   dialog close glyph each own their geometry. .ov-danger-action keeps its
   32px too - it sits inside a table row, where 36px would crowd the line. */
/* the rail's copy-link buttons keep the rail's own weight and size (CRM-19) */
.ov2-global .ov-legacy-main button:not(.ov-drill-toggle):not(.ov-att-dots):not(.ov-chart-tab):not(.ov-switch input):not(.ov-crm-linkbtn),
.ov2 button:not(.ov-drill-toggle):not(.ov-att-dots):not(.ov-chart-tab):not(.tcclose):not(.ov-crm-linkbtn):not(.ov-nav-link),
.ov2 .sf-btn, .ov2-global .ov-legacy-main .sf-btn,
.ov-secondary-button, .ov-att-btn,
.ov-qa-button, .ov-leads-button, .ov-task-button, .ov-call-button,
.ov-action-button, .ov-dr-trigger {
  min-height: 36px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 630;
  line-height: 1.2;
  letter-spacing: 0;
}
/* an icon inside a button never sets its own size or colour */
.ov2 button .ic, .ov2 .sf-btn .ic, .ov-crm-button .ic,
.ov2-global .ov-legacy-main button .ic {
  width: 15px; height: 15px; flex-shrink: 0; color: currentColor;
}
/* every button says where focus is - keyboard users get the same affordance */
.ov2 button:focus-visible, .ov2 .sf-btn:focus-visible,
.ov2-global .ov-legacy-main button:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: 2px;
}

/* An icon standing in for a -> or <- glyph has to sit where the glyph sat:
   on the optical centre of the line, sized to the text, and after (or
   before) the label with one space of air (2026-08-25). */
.ov-ic-after, .ov-ic-before {
  width: 14px; height: 14px; flex-shrink: 0;
  vertical-align: -2px; color: currentColor;
}
.ov-ic-after { margin-left: 6px; }
.ov-ic-before { margin-right: 6px; }
a:has(> .ov-ic-after), a:has(> .ov-ic-before),
button:has(> .ov-ic-after), button:has(> .ov-ic-before) {
  display: inline-flex; align-items: center;
}

/* Approvals document matrix: the icon carries the state through colour, the
   way the emoji pair used to through two different glyphs. */
.ov-doc-state { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.ov-doc-state .ic { width: 15px; height: 15px; }
.ov-doc-state.is-done { color: var(--ov-positive); }
.ov-doc-state.is-waiting { color: var(--ov-ink-4); }

/* ==== Administration pass (Kamil, 2026-08-25) ============================
   Audited all nine Administration pages in both themes. */

/* 1. The page object icon was an emoji - it cannot take the theme's colour
   and rendered at whatever the OS decided. Now a real icon, sized to the
   tile it sits in. */
.objicon .ic { width: 22px; height: 22px; color: var(--ov-accent); }

/* 2. Three helper texts failed AA in both themes: the notification category
   hints (3.80 dark / 3.38 light) and the QA field help (same pair), against
   the 4.5:1 that 10-12px body copy needs. One step up the ink ramp clears
   it and they still read as secondary. */
.ov-notif-hint, .ov-qa-field-help { color: var(--ov-ink-3); }
:root:not([data-theme="dark"]) .ov-notif-hint,
:root:not([data-theme="dark"]) .ov-qa-field-help { color: var(--ov-ink-2); }

/* 3. A .tag on the accent fill was 3.09:1 in dark - light-grey ink on a
   saturated blue. On a filled chip the ink has to come from the fill's own
   contrast pair, not from the page's text colour. (The .tag.ov-status-info
   half is satisfied at the .ov-status-info source rule since 2026-09-16.) */
.ov2 .tag, .ov2-global .ov-legacy-main .tag { color: var(--ov-ink); }
.ov2 .tag.ov-status-info, .ov2 .tag[class*="accent"] {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink, var(--ov-accent));
}
:root[data-theme="dark"] .ov2 .tag.ov-status-info,
:root[data-theme="dark"] .ov2 .tag[class*="accent"] { color: #a8c7ff; }

/* 4. Administration speaks the settings voice everywhere, not only on pages
   that carry a lede (that was the 2026-08-24 rule's blind spot): card
   titles are sentence-case statements, not 10px uppercase labels. */
/* Every section heading in Administration, wherever it sits - the first
   attempt keyed on `.card > h2` and missed the ones inside .panel and
   .preset-form, which is most of them. Team (the tasks workspace) joined
   the list when /tasks moved out of Administration (rail R3, 2026-09-04):
   without it the plane headings fell back to the 12px uppercase eyebrow. */
body[data-division="admin"] .ov-main h2,
body[data-division="admin"] .ov-legacy-main h2,
body[data-division="team"] .ov-main h2,
body[data-division="team"] .ov-legacy-main h2 {
  font: 600 15px/1.3 var(--ov-font-text);
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ov-ink);
  margin: 0 0 12px;
}

/* 5. The legacy `button` fill trap, closed for EVERY button family.
   PR #126 fixed .ov-crm-button; the same collision was still live on
   .ov-qa-button ("Add KPI" rendered #d4d4d8 on #fafafa, 1.4:1) and would
   hit any future family the same way. The rule is stated once: a button
   that is not -primary owns its own surface and ink together. */
.ov2 button.ov-qa-button:not(.ov-qa-button-primary),
.ov2 button.ov-task-button:not(.ov-task-button-primary),
.ov2 button.ov-leads-button:not([class*="-primary"]),
.ov2 button.ov-call-button:not([class*="-primary"]),
.ov2 button.ov-action-button:not([class*="-primary"]),
.ov2 button.ov-secondary-button,
.ov2-global .ov-legacy-main button.ov-qa-button:not(.ov-qa-button-primary),
.ov2-global .ov-legacy-main button.ov-task-button:not(.ov-task-button-primary) {
  background: var(--ov-raised);
  color: var(--ov-ink-2);
  border: 1px solid var(--ov-control-line);
}
.ov2 button.ov-qa-button:not(.ov-qa-button-primary):hover,
.ov2 button.ov-task-button:not(.ov-task-button-primary):hover,
.ov2 button.ov-secondary-button:hover {
  background: var(--ov-surface);
  color: var(--ov-ink);
}

/* 6. A primary button filled with the ACCENT needs the accent's own ink.
   Approvals painted --ov-primary-ink (near-black, correct on the white
   mono primary) onto the blue fill, landing at 4.0:1. */
.ov2 .ov-qa-button-primary, .ov2 .ov-approve-button,
.ov2-global .ov-legacy-main .ov-approve-button {
  background: var(--ov-accent);
  color: #ffffff;
  border-color: var(--ov-accent);
}
.ov2 .ov-qa-button-primary:hover, .ov2 .ov-approve-button:hover {
  background: var(--ov-primary-hover); border-color: var(--ov-primary-hover);
}

/* 7. A state line with no modifier was --ov-ink-4: 3.80 dark / 3.44 light,
   under the 4.5:1 an 11.5px label needs. The "on" and "warn" variants
   already carry their own colour and pass. */
.ov-set-state { color: var(--ov-ink-3); }
.ov-set-state::before { background: currentColor; }

/* 8. Link text needed its own token. --ov-accent (#246bfd) is right for
   fills and borders, but as INK on the dark canvas it lands at 4.02:1 -
   under AA for body-sized text - and only 4.57:1 on white. Fills are
   unchanged; only text that must be read gets the lighter step. */
:root { --ov-link: #1a56db; }
:root:not([data-theme="dark"]) { --ov-link: #1a56db; }
:root[data-theme="dark"] { --ov-link: #7aa9ff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ov-link: #7aa9ff; }
}
/* Tabs, chips, crumbs, nav lists and link-tiles carry their own inks: the
   rule skips them (CRM-01 / ADMIN-01 / ADMIN-02, 2026-09-24 - it painted
   the CRM tabs, the Tasks category chips and the settings side nav link
   blue, so every item looked active and the current chip was blue on blue). */
.ov2 .ov-main a:not(.ov-crm-button):not(.sf-btn):not(.chip):not(.ov-nav-link):not([class*="-button"]):not(.ov-att-entity):not(.ov-badge):not(.plainlink):not(:is(.ov-crm-tabs-track, .ov-task-views, .ov-workspace-tabs, .ov-tn-chips, .ov-tn-crumb, .ov-tl-crumb, .ov-doc-crumbs, .ov-ap-crumbs, .ov-auto-tabs, .ov-auto-crumb, .ov-presets, .ov-tn-menulist, .ov-tl-pager) a, .ov-task-cat, .ov-set-link, .ov-set-card, .ov-tab, .pill, .ov-kpi, .ov-crm-status, .ov-doc-card, .ov-crm-board-card),
.ov2-global .ov-legacy-main a:not(.ov-crm-button):not(.sf-btn):not(.chip):not([class*="-button"]):not(.plainlink):not(:is(.ov-crm-tabs-track, .ov-task-views, .ov-workspace-tabs, .ov-tn-chips, .ov-tn-crumb, .ov-tl-crumb, .ov-doc-crumbs, .ov-ap-crumbs, .ov-auto-tabs, .ov-auto-crumb, .ov-presets, .ov-tn-menulist, .ov-tl-pager) a, .ov-task-cat, .ov-set-link, .ov-set-card, .ov-tab, .pill, .ov-kpi, .ov-crm-status, .ov-doc-card, .ov-crm-board-card) {
  color: var(--ov-link);
}


/* One more helper with its own hard-coded ink rather than a token. */
.ov-qa-kpi-order { color: var(--ov-ink-3); }

/* 9. Any button FILLED with the accent takes white ink, wherever it lives.
   Several still carried --ov-primary-ink (near-black, right for the white
   mono primary, wrong on blue) and sat at 4.0:1. Stated once, by fill. */
.ov2 button[class*="primary"], .ov2 .sf-btn.primary,
.ov2-global .ov-legacy-main button[class*="primary"],
.ov2-global .ov-legacy-main .sf-btn.primary {
  color: #ffffff;
}
.ov2 .ov-crm-button-primary, .ov2 .ov-task-button-primary {
  /* Ink and fill together, always - forcing one without the other is what
     made Send invisible on the Documents page (2026-09-04). */
  color: var(--ov-primary-ink);
  border-color: var(--ov-primary);
  background: var(--ov-primary);
}
/* the last helper still on a hard-coded grey */
.ov2 .ov-qa-kpi-order, .ov2-global .ov-legacy-main .ov-qa-kpi-order,
.ov2 .sub, .ov2-global .ov-legacy-main .sub { color: var(--ov-ink-3); }
/* In LIGHT, ink-3 on a tinted panel at 10px is 4.1:1 - my own regression
   from the line above, caught by the cross-division sweep (79 instances on
   CRM alone). Light gets the next step down the ramp. */
:root:not([data-theme="dark"]) .ov2 .sub,
:root:not([data-theme="dark"]) .ov2-global .ov-legacy-main .sub,
:root:not([data-theme="dark"]) .ov2 .ov-qa-kpi-order { color: var(--ov-ink-2); }

/* 10. .ov-crm-tag is 10px on a tinted panel and was 4.14:1 in light - 79
   instances on the CRM board alone. Pre-existing, found by the
   cross-division sweep while checking this pass for regressions. */
:root:not([data-theme="dark"]) .ov-crm-tag { color: var(--ov-ink-2); }

/* 11. Placeholders in dark were the UA's #757575 - Chromium ignores
   color-scheme for them - at 4.0:1 on the raised field, and on several
   forms the placeholder is the only label a field has. Ink-3 is 7.2:1 on
   #141417 and still reads as a hint next to the #fafafa typed ink;
   opacity: 1 neutralises Firefox's 0.54 default. Light keeps the UA
   default, 4.61:1 on white (VIS-08 / LS-23 / SUP-25, 2026-09-16). */
:root[data-theme="dark"] ::placeholder { color: var(--ov-ink-3); opacity: 1; }

/* ==== Merge fields: pick, preview, coverage (Kamil, 2026-08-25) ===========
   The category leaves merge fields as bare text and tells you to send
   yourself a test. This is the same job done in the editor: a list that
   filters as you type `{{`, and a panel showing what one named contact will
   actually receive - plus how many contacts in the segment have each field
   at all, which no surveyed competitor reports before launch. */
.ov-mf-bar { display: flex; align-items: center; gap: 10px; margin-top: -4px; }
.ov-mf-hint { font-size: 12px; color: var(--ov-ink-3); }
.ov-mf-hint code { font-family: var(--ov-font-mono); font-size: 11.5px; }

.ov-mf-pop {
  position: fixed; z-index: 95; max-height: 260px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--ov-line-strong); border-radius: 10px;
  background: var(--ov-raised); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ov-mf-opt {
  display: flex; flex-direction: column; gap: 1px; width: 100%;
  padding: 7px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ov-ink); text-align: left; cursor: pointer;
}
.ov-mf-opt.is-on, .ov-mf-opt:hover { background: var(--ov-accent-soft); }
.ov-mf-optname { font-family: var(--ov-font-mono); font-size: 12.5px; }
.ov-mf-optdef { font-size: 11.5px; color: var(--ov-ink-3); }

.ov-mf-preview {
  margin-top: 14px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md);
  background: var(--ov-sunken); overflow: hidden;
}
.ov-mf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  border-bottom: 1px solid var(--ov-line);
}
.ov-mf-head h3 { margin: 2px 0 0; font: 600 14px/1.3 var(--ov-font-text); }
.ov-mf-pick { display: flex; align-items: center; gap: 8px; }
.ov-mf-pick select { max-width: 230px; }
.ov-mf-mail { padding: 14px; background: var(--ov-raised); }
.ov-mf-subject {
  font-weight: 650; font-size: 13.5px; color: var(--ov-ink);
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--ov-line);
}
.ov-mf-body {
  white-space: pre-wrap; font-size: 13px; line-height: 1.65; color: var(--ov-ink-2);
}
.ov-mf-coverage { padding: 12px 14px; border-top: 1px solid var(--ov-line); }
.ov-mf-cov {
  display: flex; align-items: center; gap: 10px; padding: 4px 0;
  font-size: 12px; color: var(--ov-ink-3);
}
.ov-mf-cov code {
  font-family: var(--ov-font-mono); font-size: 11.5px; color: var(--ov-ink-2);
  min-width: 128px;
}
.ov-mf-covbar {
  flex: 1 1 auto; max-width: 220px; height: 5px; border-radius: 999px;
  background: var(--ov-line-strong); overflow: hidden;
}
.ov-mf-covbar i { display: block; height: 100%; background: var(--ov-positive); }
.ov-mf-cov.is-thin .ov-mf-covbar i { background: var(--ov-warning); }
.ov-mf-covnum { font-variant-numeric: tabular-nums; }
.ov-mf-covfall { color: var(--ov-warning); }
.ov-mf-note { margin: 8px 0 0; font-size: 12px; color: var(--ov-ink-3); }
.ov-mf-note code { font-family: var(--ov-font-mono); font-size: 11.5px; }

/* The fallback lives in the same popup as the field choice. Every product
   surveyed makes you hand-write {{field|value}} or a handlebars conditional,
   and the review corpus names that the largest single cause of failed
   sends. The syntax was always supported here; it was never offered. */
.ov-mf-fb {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; padding: 8px 10px 4px;
  border-top: 1px solid var(--ov-line);
  font-size: 11.5px; color: var(--ov-ink-3);
}
.ov-mf-fb input {
  width: 100%; padding: 6px 8px; font-size: 12.5px;
  border: 1px solid var(--ov-control-line); border-radius: 7px;
  background: var(--ov-surface); color: var(--ov-ink);
}

/* ---------------------------------------------------------------------------
   Team & Access: tabs + the permission matrix (Kamil, 2026-08-25 -
   "tak powinno to wygladac, a nie taki mess").

   The roster and the grid are two readings of the same data. The grid is the
   one that answers "who can open Accounting", which previously meant opening
   every person's edit form in turn.

   Ours is people-by-permission, not role-by-permission like the reference:
   this console grants page keys PER USER on purpose (roles set scope within a
   division, never access to it), so a role-column grid would show a control
   that decides nothing.
--------------------------------------------------------------------------- */
.ov-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--ov-line);
}
.ov-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--ov-ink-3);
  cursor: pointer;
  transition: color var(--ol-micro, 120ms) var(--ol-ease, ease),
    border-color var(--ol-micro, 120ms) var(--ol-ease, ease);
}
.ov-tab:hover { color: var(--ov-ink); }
.ov-tab.on { color: var(--ov-ink); border-bottom-color: var(--ov-accent); }
.ov-tab:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: -2px; }
.ov-tab-n {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ov-sunken);
  font-family: var(--ov-font-mono);
  font-size: 11px;
  color: var(--ov-ink-3);
}
.ov-tab.on .ov-tab-n { background: var(--ov-accent-soft); color: var(--ov-accent-ink); }

.ov-matrix-card .ov-section-heading { align-items: center; }
/* The grid can outgrow the viewport sideways; it scrolls inside its own box
   rather than pushing the page, and the permission column stays put. */
.ov-matrix-wrap {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ol-r-panel, 10px);
}
.ov-matrix { border-collapse: separate; border-spacing: 0; width: 100%; }
.ov-matrix th, .ov-matrix td {
  border-bottom: 1px solid var(--ov-line);
  padding: 9px 12px;
  text-align: center;
  vertical-align: middle;
}
.ov-matrix tbody tr:last-child th, .ov-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.ov-matrix-rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 210px;
  max-width: 320px;
  background: var(--ov-surface);
  text-align: left;
  font-weight: 500;
  color: var(--ov-ink);
  border-right: 1px solid var(--ov-line);
}
.ov-matrix thead .ov-matrix-rowhead { background: var(--ov-sunken); }
.ov-matrix-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ov-ink-4);
}
.ov-matrix-user {
  min-width: 116px;
  background: var(--ov-sunken);
  vertical-align: bottom;
}
.ov-matrix-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ov-ink);
  white-space: nowrap;
}
.ov-matrix-role {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ov-ink-4);
  white-space: nowrap;
}
.ov-matrix-user.is-off .ov-matrix-name { color: var(--ov-ink-4); }
/* A group row is a heading, not data - it names the division the rows under
   it belong to, the way the reference groups its actions. */
.ov-matrix-group th {
  position: sticky;
  left: 0;
  background: var(--ov-sunken);
  text-align: left;
  text-transform: capitalize;
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: 0.04em;
  color: var(--ov-ink-3);
}
.ov-matrix tbody tr:not(.ov-matrix-group):hover .ov-matrix-rowhead,
.ov-matrix tbody tr:not(.ov-matrix-group):hover td {
  background: var(--ov-fill-hover, var(--ov-sunken));
}

/* One checkbox shape for the whole grid. Real input underneath, so the form
   posts and the keyboard works without any JavaScript. */
.ov-matrix-box { display: inline-flex; cursor: pointer; }
.ov-matrix-box input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.ov-matrix-box i {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ov-control-line);
  border-radius: 5px;
  background: var(--ov-canvas);
  transition: background var(--ol-micro, 120ms) var(--ol-ease, ease),
    border-color var(--ol-micro, 120ms) var(--ol-ease, ease);
}
.ov-matrix-box input:checked + i {
  background: var(--ov-accent);
  border-color: var(--ov-accent);
  /* The tick is drawn, not a glyph, so it never depends on a font. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.ov-matrix-box input:focus-visible + i {
  outline: 2px solid var(--ov-focus);
  outline-offset: 2px;
}
.ov-matrix-box input:disabled + i { opacity: 0.55; cursor: not-allowed; }
.ov-matrix-box input:disabled { cursor: not-allowed; }

@media (max-width: 720px) {
  .ov-matrix-rowhead { min-width: 150px; }
  .ov-matrix th, .ov-matrix td { padding: 8px 9px; }
}

/* ---------------------------------------------------------------------------
   Glass (Kamil, 2026-08-25: "to nie jest do konca szklo", with a 21st
   glass-effect + backdrop-blur-xl reference).

   The first pass was a gradient painted ON the surface. That is a sheen, not
   glass, and he was right to call it. Glass is three things together, and
   the third is the one that is usually missed:

     1. the panel is TRANSLUCENT, not an opaque fill
     2. backdrop-filter blurs and saturates whatever sits behind it
     3. there IS something behind it worth blurring

   On a flat #09090b canvas a blur resolves to flat #09090b, so the effect
   would cost GPU and show nothing. The reference puts a gradient image behind
   its cards; ours gets --ov-atmosphere - two very low-alpha washes fixed to
   the viewport. Dark stays dark: the washes sit at 5-7% alpha over the canvas
   and never become a colour field.

   This IS glassmorphism, and HOUSE rule 4 forbade it as a system. Kamil asked
   for it twice, so the rule is his to change and the constitution has been
   updated rather than quietly contradicted.

   Cost is real, so it is bounded: blur applies to page-level panels only,
   never to rows or cells, and it is dropped entirely for
   prefers-reduced-transparency and where backdrop-filter is unsupported.
--------------------------------------------------------------------------- */
:root {
  --ov-sheen: linear-gradient(180deg,
    rgba(18, 22, 30, 0.028) 0%, rgba(18, 22, 30, 0) 38%);
  --ov-sheen-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* Light mode glass is mostly opaque: white on white has nothing to
     refract, and the reading surface must not lose contrast. */
  --ov-glass: rgba(255, 255, 255, 0.82);
  --ov-glass-line: rgba(9, 9, 11, 0.10);
  --ov-glass-blur: blur(16px) saturate(120%);
  --ov-atmosphere: none;
}
:root[data-theme="dark"] {
  /* Ivory light, not white light - the same warmth the type carries. */
  --ov-sheen: linear-gradient(180deg,
    rgba(245, 243, 238, 0.05) 0%, rgba(245, 243, 238, 0) 40%);
  --ov-sheen-edge: inset 0 1px 0 rgba(245, 243, 238, 0.07);
  /* 0.62 alpha over the atmosphere: enough to read as a pane, dark enough
     that a table on it keeps its contrast. */
  --ov-glass: rgba(20, 20, 23, 0.55);
  --ov-glass-line: rgba(245, 243, 238, 0.10);
  --ov-glass-blur: blur(22px) saturate(150%);
  /* The thing the blur has to work on. Two washes, fixed to the viewport so
     they do not travel with scroll, at an alpha where they read as depth
     rather than as colour. */
  --ov-atmosphere:
    radial-gradient(1100px 700px at 8% -8%, rgba(36, 107, 253, 0.13), transparent 62%),
    radial-gradient(900px 620px at 92% 4%, rgba(122, 92, 224, 0.10), transparent 64%),
    radial-gradient(700px 520px at 60% 105%, rgba(36, 107, 253, 0.06), transparent 60%);
}

/* The atmosphere lives on the canvas, behind every panel. Fixed attachment
   keeps it still while content scrolls, which is what makes the panels look
   like they are moving over something. */
.ov2 {
  background-image: var(--ov-atmosphere);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (prefers-reduced-transparency: reduce) {
  .ov2 { background-image: none; }
  .ov2 .card,
  .ov2 .ov-crm-plane,
  .ov2 .ov-kpi-card,
  .ov2 .ov-cc-summit,
  .ov2-legacy-content .ov-legacy-main .card {
    background-color: var(--ov-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.ov2 .card,
.ov2 .ov-crm-plane,
.ov2 .ov-kpi-card,
.ov2 .ov-cc-summit,
.ov2-legacy-content .ov-legacy-main .card {
  background-color: var(--ov-glass);
  background-image: var(--ov-sheen);
  backdrop-filter: var(--ov-glass-blur);
  -webkit-backdrop-filter: var(--ov-glass-blur);
  border-color: var(--ov-glass-line);
  box-shadow: var(--ov-sheen-edge), var(--ov-touch-shadow);
}
/* Without backdrop-filter the translucent fill would show the canvas
   through it and read as washed out, so those browsers get the opaque
   surface back. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ov2 .card,
  .ov2 .ov-crm-plane,
  .ov2 .ov-kpi-card,
  .ov2 .ov-cc-summit,
  .ov2-legacy-content .ov-legacy-main .card {
    background-color: var(--ov-raised);
  }
}
/* A raised card keeps the edge when it lifts, rather than losing it to the
   hover shadow. */
.ov2 .ov-kpi-card:hover {
  box-shadow: var(--ov-sheen-edge), var(--ov-plane-shadow);
}
/* Sunken things are lit from the other side - no top edge, a faint inner
   shade instead, so a well reads as a well. */
.ov2 .ov-matrix-wrap,
.ov2 .tablewrap {
  background-image: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

@media (prefers-contrast: more) {
  .ov2 .card, .ov2 .ov-crm-plane, .ov2 .ov-kpi-card, .ov2 .ov-cc-summit {
    background-image: none;
  }
}

/* ---------------------------------------------------------------------------
   Contrast corrections found by measuring, 2026-08-25.
--------------------------------------------------------------------------- */

/* Rule 9 above forces white ink on anything matching button[class*="primary"],
   which was written for ACCENT-filled buttons. The mono primary is filled with
   ivory, so a real <button class="ov-crm-button-primary"> came out white on
   #F5F3EE - 1.05:1, invisible. The existing correction below it only ever won
   on <a> elements: button[class*="primary"] scores (0,2,1) and beats a plain
   two-class selector at (0,2,0). Doubling the class settles it by fill, which
   is how rule 9 says it should be decided.
   Live today on Prospector search, Companies search, Create affiliate, and the
   new Save matrix. */
.ov2 .ov-crm-button-primary.ov-crm-button-primary,
.ov2 .ov-task-button-primary.ov-task-button-primary,
.ov2-global .ov-legacy-main .ov-crm-button-primary.ov-crm-button-primary {
  color: var(--ov-primary-ink);
  /* The FILL has to travel with the ink (Kamil, 2026-09-04: "kontrast w
     sekcji jasnej jest zepsuty"). Until now the accent background was only
     ever set inside .ov-crm-workspace / .ov-crm-tabs / .ov-task-workspace,
     while the rule above forces white ink on every primary anywhere. On a
     page outside those wrappers - the account Documents book, where Send
     and Send IO live - the button kept .ov-crm-button's raised background
     and rendered white on near-white: 1.05:1, invisible in light. Setting
     both here means a primary is never half-styled again. */
  border-color: var(--ov-primary);
  background: var(--ov-primary);
}
.ov2 .ov-crm-button-primary.ov-crm-button-primary:hover,
.ov2 .ov-task-button-primary.ov-task-button-primary:hover,
.ov2-global .ov-legacy-main .ov-crm-button-primary.ov-crm-button-primary:hover {
  border-color: var(--ov-primary-hover);
  background: var(--ov-primary-hover);
  color: var(--ov-primary-ink);
}

/* The selected metric tab sat at 4.12:1 - ivory type on a 16% accent wash.
   The wash carries the selection; the ink has to carry the reading. */
.ov2 .ov-chart-tab.on,
.ov2 .ov-chart-tab.on b,
.ov2 .ov-chart-tab.on span {
  color: var(--ov-ink);
}
:root[data-theme="dark"] .ov2 .ov-chart-tab.on {
  background: rgba(36, 107, 253, 0.26);
  border-color: var(--ov-accent);
}

/* Team & Access tabs: a legacy `button` fill painted the selected tab ivory
   AND left ivory text on it. These are text tabs with an underline, never a
   filled control, so the fill is refused outright. */
.ov2 .ov-tab.ov-tab,
.ov2-global .ov-legacy-main .ov-tab.ov-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ov-ink-3);
  box-shadow: none;
}
.ov2 .ov-tab.ov-tab:hover,
.ov2-global .ov-legacy-main .ov-tab.ov-tab:hover { color: var(--ov-ink); }
.ov2 .ov-tab.ov-tab.on,
.ov2-global .ov-legacy-main .ov-tab.ov-tab.on {
  color: var(--ov-ink);
  border-bottom-color: var(--ov-accent);
}

/* A legacy `th` rule centres and uppercases every table head. The matrix's
   first column is a label, not a column heading, so it reads as one. */
.ov2 .ov-matrix .ov-matrix-rowhead,
.ov2 .ov-matrix .ov-matrix-group th,
.ov2-global .ov-legacy-main .ov-matrix .ov-matrix-rowhead,
.ov2-global .ov-legacy-main .ov-matrix .ov-matrix-group th {
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  color: var(--ov-ink);
}
.ov2 .ov-matrix .ov-matrix-group th,
.ov2-global .ov-legacy-main .ov-matrix .ov-matrix-group th {
  text-transform: capitalize;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ov-ink-3);
}

/* ---------------------------------------------------------------------------
   Settings layout (Kamil, 2026-08-25, teero reference): a grouped sub-nav on
   the left, one section of content at a time on the right. The nav is plain
   anchors and every panel is a real block, so without JavaScript the page
   stacks and the anchors scroll - the script only adds the one-at-a-time
   behaviour.
--------------------------------------------------------------------------- */
.ov-settings {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 20px;
  align-items: start;
}
.ov-set-nav {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ov-set-group { display: flex; flex-direction: column; gap: 2px; }
.ov-set-group-label {
  padding: 0 10px 6px;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ov-ink-4, var(--muted));
}
.ov-set-link {
  padding: 8px 10px;
  border-radius: var(--ov-radius-sm, 8px);
  font-size: 13.5px;
  font-weight: 520;
  color: var(--ov-ink-2, var(--text));
  text-decoration: none;
  transition: background var(--ol-micro, 120ms) var(--ol-ease, ease),
    color var(--ol-micro, 120ms) var(--ol-ease, ease);
}
.ov-set-link:hover { background: var(--ov-fill-hover, var(--ov-sunken)); }
.ov-set-link.on {
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  font-weight: 600;
}
.ov-set-link:focus-visible {
  outline: 2px solid var(--ov-focus);
  outline-offset: -1px;
}
.ov-set-panels { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ov-set-panels .card { margin: 0; }

@media (max-width: 860px) {
  .ov-settings { grid-template-columns: 1fr; }
  .ov-set-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 22px;
  }
  .ov-set-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; }
  .ov-set-group-label { padding: 0 6px 0 0; }
}

/* ---------------------------------------------------------------------------
   Sequence builder (Kamil, 2026-08-25: Wes needs to build a campaign and
   watch the replies in one place).

   A vertical spine, not a canvas. Every product surveyed that tried a flow
   canvas for a linear drip made it harder, and our sequence IS linear: step 1
   then N follow-ups. The wait lives on the connector because the delay
   belongs to the gap between two steps, not to either of them.
--------------------------------------------------------------------------- */
.ov-seq .ov-crm-plane-heading { align-items: flex-start; }
.ov-seq-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--ov-line);
  border-radius: 999px;
  font-family: var(--ov-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ov-ink-3);
  white-space: nowrap;
}
.ov-seq-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ov-ink-4);
}
.ov-seq-live.is-on { color: var(--ov-positive); border-color: var(--ov-positive); }
.ov-seq-live.is-on i { background: var(--ov-positive); }
@media (prefers-reduced-motion: no-preference) {
  .ov-seq-live.is-on i { animation: ovSeqPulse 2s ease-in-out infinite; }
}
@keyframes ovSeqPulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

.ov-seq-list { list-style: none; margin: 0; padding: 0; }

/* The spine itself is one continuous line drawn behind the cards. */
.ov-seq-step, .ov-seq-gap { position: relative; padding-left: 34px; }
.ov-seq-step::before, .ov-seq-gap::before {
  content: "";
  position: absolute;
  left: 15px; top: 0; bottom: 0;
  width: 2px;
  background: var(--ov-line);
}
.ov-seq-list > li:first-child::before { top: 22px; }
.ov-seq-list > li:last-child::before { bottom: auto; height: 22px; }

.ov-seq-card {
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md, 12px);
  background: var(--ov-surface);
}
.ov-seq-card[open] { border-color: var(--ov-line-strong); }
.ov-seq-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.ov-seq-card-head::-webkit-details-marker { display: none; }
.ov-seq-no {
  position: absolute;
  left: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ov-line-strong);
  background: var(--ov-canvas);
  font-family: var(--ov-font-mono);
  font-size: 12.5px;
  font-weight: 640;
  color: var(--ov-ink-2);
}
.ov-seq-titles { flex: 1; min-width: 0; }
.ov-seq-subject {
  display: block;
  font-size: 14px;
  color: var(--ov-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-seq-kind {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ov-ink-4);
}
.ov-seq-expand { font-size: 12.5px; color: var(--ov-link, var(--ov-accent-ink)); }
.ov-seq-card[open] .ov-seq-expand { color: var(--ov-ink-3); }
.ov-seq-form { padding: 0 14px 14px; border-top: 1px solid var(--ov-line); }
.ov-seq-form .ov-crm-fields { padding-top: 12px; }

/* Stats sit under the card, where the step's own numbers belong. */
.ov-seq-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 2px 14px;
}
.ov-seq-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ov-ink-3); }
.ov-seq-stats b { font-family: var(--ov-font-mono); color: var(--ov-ink); }
.ov-seq-muted { color: var(--ov-ink-4); }
.ov-seq-replied { color: var(--ov-positive); text-decoration: none; }
.ov-seq-replied b { color: var(--ov-positive); }
.ov-seq-replied:hover { text-decoration: underline; }
.ov-seq-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-seq-actions form { display: inline; }

/* The gap between two steps: how long it waits, and a plus to put a step
   inside it. */
.ov-seq-gap { padding-top: 6px; padding-bottom: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ov-seq-wait { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ov-ink-3); }
.ov-seq-wait label { display: inline-flex; align-items: center; gap: 6px; }
.ov-seq-wait input {
  width: 62px;
  padding: 4px 8px;
  border: 1px solid var(--ov-control-line);
  border-radius: var(--ov-radius-sm, 8px);
  background: var(--ov-sunken);
  color: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: 12.5px;
}
.ov-seq-gap-save {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--ov-link, var(--ov-accent-ink));
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ol-micro, 120ms) var(--ol-ease, ease);
}
.ov-seq-wait:hover .ov-seq-gap-save,
.ov-seq-wait:focus-within .ov-seq-gap-save { opacity: 1; }

.ov-seq-insert > summary {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1px dashed var(--ov-control-line);
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  line-height: 1;
  color: var(--ov-ink-3);
}
.ov-seq-insert > summary::-webkit-details-marker { display: none; }
.ov-seq-insert > summary:hover {
  border-color: var(--ov-accent);
  border-style: solid;
  color: var(--ov-accent-ink);
}
.ov-seq-gap-end .ov-seq-insert > summary {
  width: auto; height: auto;
  padding: 7px 14px;
  border-radius: var(--ov-radius-sm, 8px);
  font-size: 13px;
}
.ov-seq-insert-form {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-md, 12px);
  background: var(--ov-raised);
  flex-basis: 100%;
}

.ov-seq-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ov-line);
  font-size: 12.5px;
  color: var(--ov-ink-3);
}
.ov-seq-foot b { font-family: var(--ov-font-mono); color: var(--ov-ink); }

@media (max-width: 700px) {
  .ov-seq-step, .ov-seq-gap { padding-left: 28px; }
  .ov-seq-no { width: 26px; height: 26px; font-size: 11.5px; }
  .ov-seq-step::before, .ov-seq-gap::before { left: 12px; }
}

/* Step state on the spine (originui Stepper pattern, found via 21st).
   A finished step fills its marker and its incoming segment, one in flight
   glows, one not started stays plain - so the sequence reads as progress
   without anyone counting. */
.ov-seq-step[data-seq-state="done"] .ov-seq-no {
  background: var(--ov-positive);
  border-color: var(--ov-positive);
  color: #fff;
}
.ov-seq-step[data-seq-state="done"] .ov-seq-no .ic { width: 15px; height: 15px; }
.ov-seq-step[data-seq-state="live"] .ov-seq-no {
  border-color: var(--ov-accent);
  color: var(--ov-accent-ink);
  box-shadow: 0 0 0 3px var(--ov-accent-soft);
}
.ov-seq-gap[data-seq-state="done"]::before,
.ov-seq-step[data-seq-state="done"]::before { background: var(--ov-positive); }
.ov-seq-gap[data-seq-state="live"]::before { background: var(--ov-accent); }

/* === Contract Bot chat (2026-08-27) ========================================
   The interaction pattern is the 21st "chat-messages" component Kamil sent -
   bubbles, avatar, typing indicator, staggered reveal, pinned input - taken
   whole and translated into house tokens per the standing rule. Its indigo
   and violet gradients do not come across: the accent here is royal blue on
   graphite, and the only gradient is the panel's top-lit sheen. Motion sits
   behind content (HOUSE rule 6): a short rise on entry, no bounce, and all
   of it gone under prefers-reduced-motion. */

.ov-cb-shell {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  height: 640px;
  background: var(--ov-raised);
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px -32px rgba(9, 9, 11, 0.45);
}
.ov-cb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ov-line);
}
.ov-cb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ov-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex: none;
}
.ov-cb-head-name { font-size: 14px; font-weight: 650; color: var(--ov-ink); }
.ov-cb-head-sub  { font-size: 12px; color: var(--ov-ink-3); margin-top: 1px; }
.ov-cb-head-io   { margin-left: auto; font-size: 12px; color: var(--ov-ink-3);
                   font-variant-numeric: tabular-nums; }

.ov-cb-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ov-accent) 3%, transparent), transparent 140px),
    var(--ov-surface);
}
.ov-cb-row { display: flex; align-items: flex-end; gap: 8px; }
.ov-cb-row.ov-cb-you { justify-content: flex-end; }
.ov-cb-msg {
  max-width: 78%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 16px;
  animation: ov-cb-rise .28s cubic-bezier(.22, 1, .36, 1) both;
}
/* Staggered reveal for what is already said; only the first screenful, so a
   long finished conversation does not make the operator sit through it. */
.ov-cb-row:nth-child(2)  .ov-cb-msg { animation-delay: .05s; }
.ov-cb-row:nth-child(3)  .ov-cb-msg { animation-delay: .10s; }
.ov-cb-row:nth-child(4)  .ov-cb-msg { animation-delay: .15s; }
.ov-cb-row:nth-child(5)  .ov-cb-msg { animation-delay: .20s; }
.ov-cb-row:nth-child(6)  .ov-cb-msg { animation-delay: .25s; }
.ov-cb-bot .ov-cb-msg {
  background: var(--ov-raised);
  border: 1px solid var(--ov-line);
  color: var(--ov-ink);
  border-bottom-left-radius: 6px;
}
.ov-cb-you .ov-cb-msg {
  background: var(--ov-accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.ov-cb-msg strong { font-weight: 650; }
.ov-cb-warn .ov-cb-msg {
  border-color: color-mix(in srgb, var(--ov-warning) 45%, var(--ov-line));
}
.ov-cb-warn .ov-cb-msg::before {
  content: "⚠ ";
}

/* typing indicator: three dots, small and quiet, no bounce - opacity only */
.ov-cb-typing {
  display: inline-flex; gap: 5px;
  padding: 12px 14px;
  background: var(--ov-raised);
  border: 1px solid var(--ov-line);
  border-radius: 16px 16px 16px 6px;
  animation: ov-cb-rise .28s cubic-bezier(.22, 1, .36, 1) both;
}
.ov-cb-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ov-ink-3);
  animation: ov-cb-dot 1.1s ease-in-out infinite;
}
.ov-cb-typing i:nth-child(2) { animation-delay: .18s; }
.ov-cb-typing i:nth-child(3) { animation-delay: .36s; }


/* The blocked-IO decision, 2026-09-22: two named choices on one line instead of
   two muted sentences, so an operator reads a question and answers it. */
.ov-cb-choice { display: grid; gap: 4px; }
.ov-cb-choice-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 13.5px; }
.ov-cb-choice-row > span { color: var(--ov-text-3); }

/* choice chips: the component's quick replies, as real buttons */
.ov-cb-choices { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 0 42px; }
.ov-cb-chip {
  font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ov-accent) 45%, var(--ov-line));
  background: var(--ov-accent-soft);
  color: var(--ov-accent-ink);
  cursor: pointer;
}
.ov-cb-chip:hover { background: color-mix(in srgb, var(--ov-accent) 18%, transparent); }
.ov-cb-chip.ov-cb-chip-primary { background: var(--ov-accent); border-color: var(--ov-accent); color: #fff; }
.ov-cb-chip.ov-cb-chip-primary:hover { background: var(--ov-primary-hover); }

/* input bar pinned to the bottom, send arrow inside */
.ov-cb-ask {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--ov-line);
  background: var(--ov-raised);
}
.ov-cb-input {
  flex: 1;
  font: inherit; font-size: 14px;
  color: var(--ov-ink);
  background: var(--ov-surface);
  border: 1px solid var(--ov-line);
  border-radius: 12px;
  padding: 11px 14px;
}
.ov-cb-input:focus {
  outline: none;
  border-color: var(--ov-accent);
  box-shadow: 0 0 0 3px var(--ov-accent-soft);
}
.ov-cb-send {
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 12px;
  background: var(--ov-accent); color: #fff;
  font-size: 16px; cursor: pointer;
}
.ov-cb-send:hover { background: var(--ov-primary-hover); }

@keyframes ov-cb-rise { from { opacity: 0; transform: translateY(8px); }
                        to   { opacity: 1; transform: none; } }
@keyframes ov-cb-dot  { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ov-cb-msg, .ov-cb-typing { animation: none; }
  .ov-cb-typing i { animation: none; opacity: .6; }
}

/* === Contract Bot as an overlay + the documents page (2026-08-27) ==========
   The chat floats above the book instead of being a page of its own. The
   scrim is real glass per HOUSE rule 4: a translucent pane, a backdrop blur,
   and the document list behind it worth blurring. Dropped where the browser
   cannot composite it and under prefers-reduced-transparency. */
.ov-cb-overlay { position: fixed; inset: 0; z-index: 80;
                 display: flex; align-items: center; justify-content: center;
                 padding: 24px; }
.ov-cb-scrim { position: absolute; inset: 0;
               background: color-mix(in srgb, var(--ov-canvas) 55%, transparent); }
@supports (backdrop-filter: blur(1px)) {
  .ov-cb-scrim { backdrop-filter: blur(14px) saturate(120%); }
}
@media (prefers-reduced-transparency: reduce) {
  .ov-cb-scrim { backdrop-filter: none; background: var(--ov-canvas); opacity: .92; }
}
.ov-cb-overlay .ov-cb-shell { position: relative; width: min(720px, 100%);
                              animation: ov-cb-rise .32s cubic-bezier(.22,1,.36,1) both; }
.ov-cb-close { margin-left: 10px; width: 32px; height: 32px; border: 0;
               border-radius: 9px; background: transparent; color: var(--ov-ink-3);
               font-size: 20px; line-height: 1; cursor: pointer; }
.ov-cb-close:hover { background: var(--ov-accent-soft); color: var(--ov-ink); }
@media (max-width: 560px) {
  .ov-cb-overlay { padding: 0; }
  .ov-cb-overlay .ov-cb-shell { height: 100dvh; max-width: none; border-radius: 0; }
}

/* hero + tiles on the account and documents pages */
.ov-acct-hero { display: flex; justify-content: space-between; align-items: center;
                gap: 18px; flex-wrap: wrap;
                background: var(--ov-raised); border: 1px solid var(--ov-line);
                border-radius: var(--ov-radius-lg); padding: 22px 26px;
                margin-bottom: 18px; }
.ov-acct-ident { display: flex; align-items: center; gap: 16px; }
.ov-acct-avatar { width: 52px; height: 52px; border-radius: 14px; flex: none;
                  background: var(--ov-accent-soft); color: var(--ov-accent-ink);
                  display: flex; align-items: center; justify-content: center;
                  font-size: 22px; font-weight: 700; }
:root[data-theme="dark"] .ov-acct-avatar { color: var(--ov-accent-hover); }
.ov-acct-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
                 margin-bottom: 18px; }
@media (max-width: 700px) { .ov-acct-tiles { grid-template-columns: 1fr; } }
/* the copy column's 320px floor (for the desktop facts grid) pushed the
   hero's name past a 390px phone - right edge 431 in a 374px card; on a
   phone the copy takes the card's width (account page audit, 2026-09-16) */
@media (max-width: 700px) {
  .ov-crm-workspace .ov-acct-hero .ov-heading-copy { min-width: 0; flex-basis: 0; }
}
.ov-acct-tile { background: var(--ov-raised); border: 1px solid var(--ov-line);
                border-radius: var(--ov-radius-lg); padding: 16px 20px; }
.ov-acct-tile-n { font-size: 28px; font-weight: 700; color: var(--ov-ink);
                  font-variant-numeric: tabular-nums; }
.ov-acct-tile-l { font-size: 12.5px; color: var(--ov-ink-3); margin-top: 2px; }
.ov-acct-num { font-variant-numeric: tabular-nums; font-weight: 600; }

/* IO states: icon + word, never colour alone (HOUSE rule 8) */
.ov-cb-state { display: inline-flex; align-items: center; gap: 7px;
               font-size: 12.5px; font-weight: 600; color: var(--ov-ink-2); }
.ov-cb-state i { width: 8px; height: 8px; border-radius: 50%;
                 background: var(--ov-ink-3); flex: none; }
.ov-cb-state-signed i   { background: var(--ov-green, #15803d); }
.ov-cb-state-sent i     { background: var(--ov-accent); }
.ov-cb-state-blocked i,
.ov-cb-state-failed i   { background: var(--ov-warning); }
.ov-cb-state-sending i  { background: var(--ov-accent); opacity: .55; }
/* An inline action inside a muted note - reads as text, acts as a button.
   It needs the legacy-main / html.dark weight: `html.dark button` (0,1,2)
   painted the accent fill in dark and the 36px geometry rule made it a pill, so 'resend'
   and 'on their T&C instead' sat in a row as three primaries (VIS-11 /
   DOC-17, 2026-09-16). The hover restates it: .ov-dist button:hover lifts
   and html.dark button:hover repaints the fill. */
.ov2-global .ov-legacy-main button.ov-crm-linkbtn,
html.dark button.ov-crm-linkbtn,
:root[data-theme="dark"] button.ov-crm-linkbtn {
  display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; transform: none;
  font: inherit; line-height: inherit; font-weight: 600;
  color: var(--ov-accent-ink); text-decoration: underline; cursor: pointer;
}
.ov2-global .ov-legacy-main button.ov-crm-linkbtn:hover,
html.dark button.ov-crm-linkbtn:hover,
:root[data-theme="dark"] button.ov-crm-linkbtn:hover {
  background: none; box-shadow: none; transform: none;
  color: var(--ov-accent-ink); opacity: .8;
}
/* The row ?io=<id> points at (invite, Send IO form, Edit, Send). A plain
   marked row plus the notice above the book - the Contract Bot chat that
   used to open here was retired 2026-09-04. */
.ov-crm-table tr.ov-row-flash td { background: var(--ov-accent-soft);
  box-shadow: inset 2px 0 0 var(--ov-accent); }
/* the muted notes on that row were ink-3 on the accent tint, 4.23:1 in
   light; ink-2 is 9.1:1 there and the un-flashed rows keep ink-3
   (VIS-09 / DOC-18, 2026-09-16) */
.ov-crm-table tr.ov-row-flash .ov-crm-muted { color: var(--ov-ink-2); }
.ov-cb-state-declined i { background: var(--ov-red, #b91c1c); }

/* multi-select chip: picked state carries icon-free contrast, not colour
   alone - the fill flips to accent and the label stays readable */
.ov-cb-chip-on { background: var(--ov-accent) !important;
                 border-color: var(--ov-accent) !important; color: #fff !important; }

/* the chat log follows the conversation on its own */
.ov-cb-log { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .ov-cb-log { scroll-behavior: auto; } }

/* ---------- stage shader behind the shell (2026-08-28) ----------
   The login shader motif spread platform-wide: a fixed, dim canvas behind
   the grid. stage-fx.js flips .stagefx-on only when WebGL2 is live, the
   theme is dark and motion is allowed - otherwise these rules are inert
   and the shell keeps its opaque canvas color. The rail stays opaque; the
   topbar is already glass and reads well over the drift. */
#stagefx { position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; display: none; pointer-events: none; }
html.stagefx-on #stagefx { display: block; }
html.stagefx-on .ov2 { position: relative; z-index: 1;
  background: transparent; }

/* ---------- black glass over the stage (Kamil, 2026-08-28) ----------
   "mozemy zrobic efekt czarnego szkla w tle zamiast 0 transparency
   background?" - with the still motif behind the shell, the dark surfaces
   go translucent so the clouds read through every card, not only the top
   strip. Token-level: everything riding --ov-surface/raised/sunken gets
   the smoke automatically; blur only on the top-level planes (the frost),
   so cost stays bounded. Dark theme only - stagefx-on never exists in
   light. Hue stays graphite: black glass, not navy surfaces (the 2026-08-25
   verdict above holds - the MOTIF carries the blue, the glass stays smoke). */
html.stagefx-on[data-theme="dark"] {
  --ov-surface: rgba(19, 19, 23, 0.66);
  --ov-raised: rgba(21, 21, 25, 0.64);
  --ov-sunken: rgba(10, 10, 13, 0.52);
}
html.stagefx-on[data-theme="dark"] .ov-crm-plane {
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
/* The beams stay BEHIND the glass (2026-08-28 verdict). The legacy planes
   - cards, filter bands, table boxes, the workspace planes - rode the smoke
   tokens without the frost, so a sharp beam crossed table rows and form
   fields (Calls review caveat, 2026-09-24). No frost here: a
   backdrop-filter makes a stacking context, and the date picker inside a
   filter band would drop UNDER the table box below it. Denser smoke
   instead - the beam is a faint glow behind the plane, never a line
   across its text. */
html.stagefx-on[data-theme="dark"] .ov-legacy-main :is(.card, .tablewrap, .filters, .ov-dashboard-plane, .ov-qa-plane, .ov-task-plane, .ov-leads-plane, .ov-table-wrap) {
  --ov-surface: rgba(19, 19, 23, 0.92);
  --ov-raised: rgba(21, 21, 25, 0.92);
}
@media (prefers-reduced-transparency: reduce) {
  html.stagefx-on[data-theme="dark"] {
    --ov-surface: #121215;
    --ov-raised: #141417;
    --ov-sunken: #0e0e11;
  }
  html.stagefx-on[data-theme="dark"] .ov-crm-plane {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.stagefx-on[data-theme="dark"] .ov-legacy-main :is(.card, .tablewrap, .filters, .ov-dashboard-plane, .ov-qa-plane, .ov-task-plane, .ov-leads-plane, .ov-table-wrap) {
    --ov-surface: #121215;
    --ov-raised: #141417;
  }
}

/* With the darkened stage bed (2026-08-28, "za niebiesko"), the ambient
   accent blobs behind .ov-main doubled the blue wash - halved so the
   beams are what carries the light. */
html.stagefx-on[data-theme="dark"] .ov-main::before,
html.stagefx-on[data-theme="dark"] .ov-main::after { opacity: 0.45; }

/* ---------- cross-document view transitions (2026-08-28 speed pass) ----
   Same-origin navigations crossfade instead of flashing white. Chromium
   only for now; elsewhere this is inert and navigation is unchanged. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 140ms; }
  ::view-transition-new(root) { animation-duration: 140ms; }
}

/* ---- task detail (2026-08-31): the row finally opens ------------------- */
.ov-task-back { font-size: 13px; color: var(--ov-muted); text-decoration: none; }
.ov-task-back:hover { color: var(--ov-ink); }
.ov-task-meta-line { color: var(--ov-muted); font-size: 13px; margin-top: 4px; }
.ov-task-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ov-gap, 16px); align-items: start; }
@media (max-width: 900px) { .ov-task-detail-grid { grid-template-columns: 1fr; } }
.ov-task-feed { list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.ov-task-feed-item { padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--ov-card) 92%, var(--ov-ink) 8%); }
.ov-task-feed-item.is-comment { background: var(--ov-card);
  border: 1px solid var(--ov-line, rgba(255,255,255,.08)); }
.ov-task-feed-head { display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--ov-muted); margin-bottom: 4px; }
.ov-task-feed-body { margin: 0; white-space: pre-wrap; }
.ov-task-feed-change { margin: 0; font-size: 13px; color: var(--ov-muted); }
.ov-task-feed-empty { color: var(--ov-muted); font-size: 13px; }
.ov-task-comment-form { display: flex; flex-direction: column; gap: 8px; }
.ov-task-comment-form textarea, .ov-task-edit-form input,
.ov-task-edit-form textarea, .ov-task-edit-form select { width: 100%; }
.ov-task-edit-form { display: flex; flex-direction: column; gap: 10px; }
.ov-task-edit-form label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--ov-muted); }
.ov-task-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ov-task-title-link { text-decoration: none; color: inherit; }
.ov-task-title-link:hover b { text-decoration: underline; }

/* ---- admin activity (2026-08-31): usage analytics ---------------------- */
.ov-activity .ov-crm-plane + .ov-crm-plane { margin-top: var(--ov-gap, 16px); }
.ov-activity-pages, .ov-activity-detail { font-size: 12px; color: var(--ov-muted);
  max-width: 420px; overflow-wrap: anywhere; }
.ov-activity-filters { margin-bottom: 10px; align-items: end; }
.ov-activity-filters label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--ov-muted); }
.ov-crm-table tr.is-warn td { color: var(--ov-warning); }

/* ---- tasks visual pass (2026-08-31, Kamil: "lepsza graficzna oprawa") --- */
.ov-task-workspace .ov-task-metrics { padding: 14px 16px; }
/* The Tasks tile row is the canonical tile (D1, 2026-09-04): the panel, the
   hairlines and the sentence-case label all come from .ov-kpi now. It used
   to carry its own border, radius, accent bar and hover lift, which is the
   card mosaic HOUSE rule 5 forbids. Its column ladder is unchanged and
   already declared with the other Tasks metrics above. */

.ov-task-plane, .ov-task-pane { background: var(--ov-card); border: 1px solid
  var(--ov-line, rgba(255,255,255,.08)); border-radius: 14px; padding: 16px 18px; }
.ov-task-plane-heading { display: flex; align-items: end; justify-content:
  space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ov-line, rgba(255,255,255,.08)); }

.ov-task-table thead th { position: sticky; top: 0; background:
  color-mix(in srgb, var(--ov-card) 94%, var(--ov-ink) 6%); z-index: 1;
  font-size: 12.5px; letter-spacing: 0; text-transform: none;
  color: var(--ov-ink-2); }
.ov-task-table tbody tr { transition: background .1s ease; }
.ov-task-table tbody tr:hover { background:
  color-mix(in srgb, var(--ov-card) 88%, var(--ov-accent) 12%); }
.ov-task-table tbody tr.is-overdue { box-shadow: inset 3px 0 0 var(--ov-red, #b91c1c); }

.ov-task-feed-item { position: relative; padding-left: 44px; }
.ov-task-avatar { position: absolute; left: 10px; top: 10px; width: 26px;
  height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--ov-ivory, #F5F3EE);
  background: var(--ov-rail, #061633); border: 1px solid var(--ov-accent); }
.ov-task-feed-item.is-comment .ov-task-avatar { background: var(--ov-accent); border-color: transparent; }
.ov-task-comment-form textarea:focus { outline: 2px solid
  color-mix(in srgb, var(--ov-accent) 60%, transparent); outline-offset: 1px; }
.ov-task-mention { color: var(--ov-accent); font-weight: 600; }
.ov-task-tagbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ov-task-tagbar select { max-width: 200px; }

/* ---- tasks kanban board (2026-08-31, reference: 21st shadcn kanban,
   translated to house tokens - no React, no Tailwind) ------------------- */
.ov-task-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ov-task-mode a { font-size: 12px; }
.ov-task-cats { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.ov-task-cat { font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--ov-line, rgba(255,255,255,.1)); color: var(--ov-muted);
  text-decoration: none; transition: all .1s ease; }
.ov-task-cat:hover { color: var(--ov-ink); border-color: var(--ov-accent); }
.ov-task-cat.is-current { background: var(--ov-accent); color: var(--ov-ivory, #F5F3EE);
  border-color: transparent; font-weight: 600; }
.ov-task-filters.is-table-only { display: none; }
.ov-task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; align-items: start; }
@media (max-width: 900px) { .ov-task-board { grid-template-columns: 1fr; } }
.ov-task-col { background: color-mix(in srgb, var(--ov-card) 80%, var(--ov-rail, #061633) 20%);
  border: 1px solid var(--ov-line, rgba(255,255,255,.08)); border-radius: 12px;
  padding: 10px; }
.ov-task-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.ov-task-col-head h3 { margin: 0; font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--ov-muted); }
.ov-task-col-count { font-size: 11px; font-weight: 700; min-width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 999px; padding: 0 6px;
  background: var(--ov-card); border: 1px solid var(--ov-line, rgba(255,255,255,.1)); }
.ov-task-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 60px;
  border-radius: 8px; transition: background .12s ease; }
.ov-task-col-body.is-over { background: color-mix(in srgb, var(--ov-accent) 14%, transparent);
  outline: 1.5px dashed var(--ov-accent); outline-offset: 2px; }
.ov-task-card { background: var(--ov-card); border: 1px solid var(--ov-line, rgba(255,255,255,.1));
  border-radius: 10px; padding: 10px 12px; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: transform .1s, box-shadow .1s; }
.ov-task-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.ov-task-card.is-dragging { opacity: .45; cursor: grabbing; }
.ov-task-card.is-overdue { box-shadow: inset 3px 0 0 var(--ov-red, #b91c1c); }
.ov-task-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.ov-task-card-title { font-weight: 600; font-size: 13px; color: inherit;
  text-decoration: none; overflow-wrap: anywhere; }
.ov-task-card-title:hover { text-decoration: underline; }
.ov-task-card-meta { display: flex; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 11px; color: var(--ov-muted); }
.ov-task-card-meta time.neg { color: var(--ov-red, #b91c1c); font-weight: 600; }
.ov-task-card-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ov-task-card-foot .ov-task-avatar { position: static; width: 20px; height: 20px; font-size: 9px; }
.ov-task-card-who { font-size: 11px; color: var(--ov-muted); }
.ov-task-card-who.is-muted { font-style: italic; opacity: .7; }

/* ---- workflow screens (2026-09-01, approved d1 direction) ------------- */
.ov-workflow-launcher { max-width: 760px; margin: 0 auto; }
.ov-workflow-composer { margin: 18px auto;  position: static; width: 100%; }
.ov-workflow-composer .ov-task-close { display: grid; place-items: center; text-decoration: none; }
.ov-workflow-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ov-workflow-heading-actions form { margin: 0; }
.ov-workflow-step-list { background: transparent; border: 0; padding: 0; }
.ov-workflow-account-action { margin-left: auto; }
.ov-workflow-list { margin-bottom: 16px; }
.ov-workflow-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 10px; }
.ov-workflow-process .ov-task-edit-form b { color: var(--ov-ink); }
@media (max-width: 640px) {
  .ov-workflow-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-workflow-list-grid .ov-task-card-meta { align-items: flex-start; }
}

/* ============================================================
   UX PROGRAM 2026-09-04 - design cluster (D1-D5, D7)
   Kamil: "graficznie design sie rozjezdza". Measured on this
   branch: three stat-tile families, two page-header generations
   and two section-header voices were on screen at the same time,
   so Approvals/Buyers/Mapping looked like one product and
   Accounts/Command Center/Tasks like another.
   Everything below converges those families at the DECLARATION
   level - the markup keeps the class names it already has, and
   the aliases share one rule set. HOUSE rule 5 (one composed
   plane, never a mosaic of equal cards) picks the winner.
   ============================================================ */

/* ---- D1. One tile family ----------------------------------------------
   Canonical is the dashboard row (.ov-kpis / .ov-kpi): label above, then
   the numeral, then the context line, with hairline dividers INSIDE one
   panel. The legacy `.kpi` row (18 templates) and the Accounts
   `.ov-acct-tile` grid render through the same declarations now.
   The brief named `.ov-stat` as the canonical class; no such rule and no
   such markup exists in this repo, so the aliased set is the three that
   do: .ov-kpi (canonical), .kpi, .ov-acct-tile.
   The divider is a hairline on each cell rather than a gap with the line
   colour behind it: a row that wraps to three tiles in a six-column grid
   then leaves the panel's own surface behind, not a grey block. */
.ov2-global .ov-legacy-main .kpis,
.ov2-global .ov-legacy-main .ov-acct-tiles {
  display: grid;
  gap: 0;
  margin: 0 0 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ov-line);
  border-radius: var(--ov-radius-lg);
  background: var(--ov-surface);
  box-shadow: var(--ov-touch-shadow);
}
.ov2-global .ov-legacy-main .kpi,
.ov2-global .ov-legacy-main .ov-acct-tile {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 20px 22px 19px;
  border: 0;
  border-right: 1px solid var(--ov-line);
  border-bottom: 1px solid var(--ov-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.ov2-global .ov-legacy-main .kpi:hover,
.ov2-global .ov-legacy-main .ov-acct-tile:hover {
  border-color: var(--ov-line);
  background: var(--ov-raised);
  box-shadow: none;
  transform: none;
}
/* the label, above the numeral - sentence case, never uppercase */
.ov-kpi-label,
.ov2-global .ov-legacy-main .kpi > span,
.ov2-global .ov-legacy-main .ov-acct-tile-l {
  display: block;
  margin: 0 0 13px;
  color: var(--ov-ink-3);
  font: 500 13px/1.25 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
}
/* the numeral */
.ov-kpi-value,
.ov-kpi b.ov-kpi-value,
.ov2-global .ov-legacy-main .kpi > b,
.ov2-global .ov-legacy-main .ov-acct-tile-n {
  display: block;
  margin: 0;
  color: var(--ov-ink);
  font: 650 clamp(22px, 2vw, 30px)/1.15 var(--ov-font-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.ov2-global .ov-legacy-main .kpi.primaryneg > b { color: var(--ov-negative); }
/* the context line under the numeral (delta, share, definition) */
.ov-kpi-context,
.ov2-global .ov-legacy-main .kpi > i {
  display: block;
  margin-top: 12px;
  font: 500 13px/1.35 var(--ov-font-text);
  font-style: normal;
}
.ov2-global .ov-legacy-main .kpi > i { color: var(--ov-ink-3); }
.ov2-global .ov-legacy-main .kpi > i.up { color: var(--ov-positive); }
.ov2-global .ov-legacy-main .kpi > i.down { color: var(--ov-negative); }
@media (max-width: 700px) {
  .ov2-global .ov-legacy-main .kpi,
  .ov2-global .ov-legacy-main .ov-acct-tile { padding: 15px 16px 14px; }
}

/* ---- D2. One page header ----------------------------------------------
   Two generations share the page: the `.ov-heading` block (eyebrow, H1,
   status chips, actions on the right) and the legacy
   `<h1>Title <span class="sub">tail</span></h1>`. They already agreed on
   30px/700; they disagreed on tracking (-.042em against -.02em) and on
   the sub's weight and colour, which is exactly the kind of drift that
   reads as two products. One set of metrics now.
   The ten legacy pages the cluster brief asked to re-mark keep their
   markup on purpose: sibling guards pin those exact <h1> strings
   (tests/design/test_8_rail_labels.py, tests/accounting/test_9_ar_leads.py,
   tests/accounting/test_11_lead_money_sheets.py,
   tests/dist_signup/test_5_hub_counts.py). Converging the CSS gets the
   same screen without breaking another cluster's contract. */
.ov2-global .ov-legacy-main h1,
.ov2-global .ov-heading h1,
.ov2-global .ov-title-line h1,
.ov2-global .ov-rollout > h1 {
  color: var(--ov-ink);
  font-family: var(--ov-font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.ov2-global .ov-legacy-main h1 .sub,
.ov2-global .ov-rollout > h1 .sub {
  color: var(--ov-ink-3);
  font: 500 13px/1.45 var(--ov-font-text);
  letter-spacing: 0;
}

/* ---- D3. One section header inside a panel -----------------------------
   Sentence-case, display face, with the muted `.sub` tail beside it - the
   "Billing periods" voice from Accounting. The uppercase letter-spaced
   variant is gone from the h2 rules above, and since 2026-09-24 from tile
   labels and table column heads too. */
.ov2-global .ov-legacy-main .card > h2,
.ov2-global .ov-legacy-main .card > h2:first-child,
.ov2-global .ov-rollout .card > h2:first-child,
.ov2-global .ov-settings-workspace .panel > h2:first-child,
.ov2-global .ov-dist .card h2,
body.ov2-global:has(.ov-set-lede) .ov-legacy-main .card > h2 {
  margin: 0 0 14px;
  color: var(--ov-ink);
  font: 660 17px/1.25 var(--ov-font-display);
  letter-spacing: -.018em;
  text-transform: none;
}
.ov2-global .ov-legacy-main .card > h2 .sub,
.ov2-global .ov-rollout .card > h2:first-child .sub,
.ov2-global .ov-settings-workspace .panel > h2:first-child .sub,
.ov2-global .ov-dist .card h2 .sub {
  display: inline;
  margin-left: 6px;
  color: var(--ov-ink-3);
  font: 500 13px/1.5 var(--ov-font-text);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- D4. Four buttons, no fifth --------------------------------------
   primary (royal blue, --ov-primary), secondary (outlined: .ov-crm-button,
   .ov-secondary-button, .sf-btn), quiet (below) and danger
   (.ov-danger-action). The black solid family died with the --ov-primary
   re-point above; this is the quiet one, which pages were writing inline
   as `background:none; color:var(--muted)`. */
.ov2-global .ov-legacy-main button.ov-quiet-button,
.ov2 button.ov-quiet-button {
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--ov-radius-sm);
  background: none;
  color: var(--ov-ink-3);
  font: 500 13px/1.2 var(--ov-font-text);
  cursor: pointer;
}
.ov2-global .ov-legacy-main button.ov-quiet-button:hover,
.ov2 button.ov-quiet-button:hover {
  background: none;
  color: var(--ov-ink);
  text-decoration: underline;
}

/* The chrome icon buttons are not primaries. `html.dark button` (0,1,1) beat
   .ov-icon-button (0,1,0) and won the fill, so the theme toggle rendered as a
   white slab in the dark register - and as a blue one the moment the primary
   became the accent. They keep their own raised surface in both registers. */
html.dark .ov-icon-button,
html.dark .ov-menu-button,
html.dark .ov-date summary,
:root[data-theme="dark"] .ov-icon-button,
:root[data-theme="dark"] .ov-menu-button {
  border-color: var(--ov-control-line);
  background: var(--ov-raised);
  color: var(--ov-ink-2);
}

/* ---- D5. The utilities the seven busiest pages were writing inline ---- */
.ov2-global .ov-legacy-main .rowsep {
  padding: 14px 0;
  border-bottom: 1px solid var(--ov-line);
}
.ov2-global .ov-legacy-main .rowsep:last-child { border-bottom: 0; }
.ov2-global .ov-legacy-main .notebox {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--ov-radius-sm);
  background: var(--ov-sunken);
}
.ov2-global .ov-legacy-main th.thgroup {
  border-bottom: 1px solid var(--ov-line);
}
.ov2-global .ov-legacy-main .sub2 {
  margin: 6px 0 0;
  color: var(--ov-ink-3);
  font: 400 12.5px/1.45 var(--ov-font-text);
}
.ov2-global .ov-legacy-main a.plainlink {
  color: inherit;
  text-decoration: none;
}
.ov2-global .ov-legacy-main a.plainlink:hover { color: var(--ov-accent); }

/* ---- D7. One empty state: icon, one sentence, one next action ---------
   `.ov-empty` is not a new family: it joined the .ov-call-empty /
   .ov-task-empty rule set above rather than restating it. Only the table
   empty cell is new here. */
.ov2-global .ov-legacy-main .ov-dt td.ov-dt-empty .ic {
  width: 27px;
  height: 27px;
  color: var(--ov-accent);
}
.ov2-global .ov-legacy-main .ov-dt td.ov-dt-empty {
  padding: 40px 22px;
  color: var(--ov-ink-3);
  font: 400 14px/1.5 var(--ov-font-text);
  text-align: center;
}
.ov2-global .ov-legacy-main .ov-dt td.ov-dt-empty .ic {
  display: block;
  margin: 0 auto 8px;
}

/* ---- D5 exception ------------------------------------------------------
   /team and /adjustments were read for this cluster and left alone: their
   inline styles are all pure layout (input widths, margin-top on a heading,
   display:inline on a form, max-width on a cell), which D5 keeps on purpose
   like b088a275. Neither page writes a semantic style, so there is nothing
   for .rowsep / .notebox / .sub2 / .thgroup to take over. */

/* ---- The narrow-screen overrides these new rules would otherwise defeat.
   The D1 and D2 blocks restate selectors that already had a mobile value
   earlier in the sheet; at equal specificity the later rule wins, so the
   phone sizes are restated here rather than lost. ---------------------- */
@media (max-width: 780px) {
  .ov-kpi-value, .ov-kpi b.ov-kpi-value { font-size: 24px; }
}
@media (max-width: 640px) {
  .ov2-global .ov-legacy-main h1 { font-size: 27px; }
}

/* ---- Affiliate portal (/my/*, role affiliate) - rebuilt 2026-09-23 ----
   Kamil 2026-09-23: the portal read "nieczytelny i zbyt AI slop w
   porownaniu do everflow". Rebuilt on Everflow's Partner Platform
   structure in our tokens: breadcrumb + large title, one warning banner,
   metric cards with a delta chip and a sparkline, a performance chart,
   dense tables with sentence-case headers and totals, tabs, a report
   toolbar. Planes are quieter here (12px radius, hairline card heads)
   because the portal is a dense data surface. Status is always dot + word. */
.ov-ap { --ap-radius: 12px; }
.ov-ap-stack { display: grid; gap: 16px; }
.ov-ap .ov-crm-plane { margin: 0; border-radius: var(--ap-radius); }
.ov-ap .ov-crm-plane + .ov-crm-plane { margin-top: 0; }
.ov-ap-body { padding: 16px 20px; }
.ov-ap-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page head: breadcrumb, then the title line */
.ov-ap-head { margin: 0 0 18px; }
.ov-ap-crumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--ov-ink-3); font-size: 13px; }
.ov-ap-crumbs a { color: var(--ov-ink-3); text-decoration: none; }
.ov-ap-crumbs a:hover { color: var(--ov-ink); text-decoration: underline; }
.ov-ap-crumbs [aria-current] { color: var(--ov-ink-2); }
.ov-ap-titlebar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.ov2-global .ov-ap-head h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.ov-ap-titlepay { margin-left: auto; text-align: right; }
.ov-ap-titlepay b { display: block; font-size: 18px; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--ov-ink); }
.ov-ap-meta { color: var(--ov-ink-3); font-size: 12.5px; font-weight: 500; }
.ov-ap-head > .ov-ap-meta { margin: 4px 0 0; }

/* card head: hairline under the name, actions to the right */
.ov-ap-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 48px; padding: 10px 20px; box-shadow: inset 0 -1px var(--ov-line); }
.ov2-global .ov-ap-card-head h2 { margin: 0; font: 650 15px/1.25 var(--ov-font-text); letter-spacing: -.005em; color: var(--ov-ink); }
.ov-ap-card-head > .ov-crm-button, .ov-ap-card-head > .ov-ap-seg, .ov-ap-card-head > details,
.ov-ap-card-head > form, .ov-ap-card-head > h2 + .ov-crm-status { margin-left: auto; }
.ov-ap-card-head .ov-crm-button { min-height: 32px; padding: 5px 11px; font-size: 13px; }

/* the one warning banner (Everflow: icon, Warning, one line, one button) */
.ov-ap-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--ap-radius); background: var(--ov-warning-soft); color: var(--ov-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ov-warning) 28%, transparent); }
.ov-ap-banner p { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 13.5px; line-height: 1.4; }
.ov-ap-banner p b { color: var(--ov-warning); font-weight: 680; }
.ov-ap-banner .ov-crm-button { margin-left: auto; flex: none; }
.ov-ap-banner-icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ov-warning); color: var(--ov-raised); font-weight: 800; font-size: 14px; }

/* setup checklist with progress */
.ov-ap-progress { position: relative; display: block; width: 160px; height: 6px; border-radius: 3px; background: var(--ov-fill-subtle); overflow: hidden; }
.ov-ap-progress i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ov-accent); }
.ov-ap-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ov-ap-steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 8px 10px; padding: 14px 18px; min-width: 0; }
.ov-ap-steps li + li { box-shadow: inset 1px 0 var(--ov-line); }
.ov-ap-steps li > :last-child { grid-column: 1 / -1; justify-self: start; }
.ov-ap-steps .ov-crm-button { min-height: 30px; padding: 4px 11px; font-size: 13px; }
.ov-ap-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ov-line-strong); color: var(--ov-ink-2); font-size: 12px; font-weight: 680; font-variant-numeric: tabular-nums; }
.ov-ap-steps li.is-done .ov-ap-step-n { background: var(--ov-positive); box-shadow: none; }
.ov-ap-step-n svg { width: 14px; height: 14px; fill: none; stroke: var(--ov-raised); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ov-ap-step-label { font-size: 13.5px; font-weight: 600; color: var(--ov-ink); }
.ov-ap-steps li.is-done .ov-ap-step-label { color: var(--ov-ink-2); }

/* metric cards: current month, delta chip, sparkline, three rows */
.ov-ap-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ov-ap-card-body { padding: 14px 18px 12px; }
.ov-ap-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-ap-card-label { display: block; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 560; }
.ov-ap-card-value { display: block; margin-top: 6px; font-family: var(--ov-font-display); font-size: 26px; font-weight: 680; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; color: var(--ov-ink); }
.ov-ap-card .ov-delta { font-size: 11.5px; padding: 1px 6px; }
.ov-ap-spark { display: block; width: 100%; height: 44px; margin: 10px 0 2px; overflow: visible; }
.ov-ap-spark polygon { fill: var(--ov-accent); opacity: .14; stroke: none; }
.ov-ap-spark polyline { fill: none; stroke: var(--ov-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ov-ap-card-rows { margin: 6px 0 0; padding: 0; }
.ov-ap-card-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; box-shadow: inset 0 1px var(--ov-line); font-size: 13px; }
.ov-ap-card-rows dt { margin: 0; color: var(--ov-ink-3); }
.ov-ap-card-rows dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 620; color: var(--ov-ink); }

/* link generator tile + performance chart row */
.ov-ap-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr); gap: 16px; align-items: stretch; }
.ov-ap-field { display: grid; gap: 6px; margin: 0 0 12px; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 560; }
.ov-ap-field select, .ov-ap-field input, .ov-ap-input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 38px; padding: 7px 10px; border: 1px solid var(--ov-control-line); border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink); font: 450 13.5px/1.3 var(--ov-font-text); }
.ov-ap-field input.ov-ap-mono, .ov-ap-input.ov-ap-mono { font-family: var(--ov-font-mono); font-size: 12.5px; }
.ov-ap-field select:focus-visible, .ov-ap-field input:focus-visible, .ov-ap-input:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-ap-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ov-ap-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--ov-fill-subtle); }
.ov2-global .ov-ap .ov-ap-seg button { appearance: none; min-height: 0; border: 0; background: transparent; padding: 5px 11px; border-radius: 6px; color: var(--ov-ink-3); font: 600 12.5px/1.2 var(--ov-font-text); box-shadow: none; cursor: pointer; }
.ov2-global .ov-ap .ov-ap-seg button:hover { color: var(--ov-ink); background: transparent; }
.ov2-global .ov-ap .ov-ap-seg button[aria-pressed="true"] { background: var(--ov-raised); color: var(--ov-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--ov-line); }
.ov-ap-seg button:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-ap-perf-fig { margin: 0; }
.ov-ap-perf-plot { position: relative; padding-left: 56px; }
.ov-ap-perf-plot svg { display: block; width: 100%; height: 220px; overflow: visible; }
.ov-ap-perf-y span { position: absolute; left: 0; width: 48px; transform: translateY(-50%); text-align: right; color: var(--ov-ink-3); font-family: var(--ov-font-mono); font-size: 11px; }
.ov-ap-perf-x { position: relative; height: 18px; margin: 6px 0 0 56px; color: var(--ov-ink-3); font-family: var(--ov-font-mono); font-size: 11px; }
.ov-ap-perf-x span { position: absolute; transform: translateX(-50%); }
.ov-ap-perf-prev { fill: var(--ov-accent); opacity: .16; }
.ov-ap-perf-cur { fill: none; stroke: var(--ov-accent); stroke-width: 2; stroke-linejoin: round; }
.ov-ap-perf-fig figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1px var(--ov-line); color: var(--ov-ink-3); font-size: 13px; }
.ov-ap-perf-fig figcaption b { color: var(--ov-ink); font-variant-numeric: tabular-nums; }
.ov-ap-key { display: inline-block; width: 14px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; }
.ov-ap-key-cur { height: 2px; vertical-align: 3px; background: var(--ov-accent); }
.ov-ap-key-prev { background: color-mix(in srgb, var(--ov-accent) 22%, transparent); }

/* tables: Everflow headers (sentence case, legible), right-aligned numbers, totals */
.ov2-global .ov-ap .ov-crm-table th { text-transform: none; letter-spacing: 0; font-family: var(--ov-font-text); font-size: 12.5px; font-weight: 640; color: var(--ov-ink-2); }
.ov-ap .ov-crm-table th.r, .ov-ap .ov-crm-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ov-ap .ov-crm-table td { vertical-align: middle; }
.ov-ap .ov-crm-table.ov-ap-table { min-width: 0; }
.ov-ap .ov-crm-table tbody tr:last-child td { box-shadow: none; }
.ov-ap .ov-crm-table tfoot td { font-weight: 680; background: var(--ov-surface); border-top: 1px solid var(--ov-line-strong); box-shadow: none; }
.ov-ap .ov-crm-table td.ov-ap-url { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov2-global .ov-ap .ov-crm-table .ov-crm-button { min-height: 30px; padding: 4px 11px; font: 630 13px/1.2 var(--ov-font-text); letter-spacing: 0; }
.ov-ap-sub { display: block; margin-top: 2px; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 400; }
.ov-ap-vis { display: block; margin-bottom: 3px; color: var(--ov-ink-3); font-size: 12px; }
.ov-ap-lock { color: var(--ov-ink-3); font-size: 13px; }
.ov-ap-hint { margin: 10px 0 0; color: var(--ov-ink-3); font-size: 12.5px; line-height: 1.5; }
.ov-ap-log { max-height: 560px; overflow-y: auto; }
.ov-ap-log thead th { position: sticky; top: 0; z-index: 1; }
/* Empty states inside side-scrolling tables, every wrapper (CRM-03 /
   CRM-24 / ADMIN-10 / CALLS-04, 2026-09-24; first built for AP above). A
   wrapper holding an empty state becomes an inline-size container, and the
   message pins to the visible box, one wrapper wide, instead of centring
   across the table's full scroll width - on a phone it was cut to "No refe".
   Only while the empty state is there: a filled table keeps its content
   sizing. */
:is(.tablewrap, .ov-crm-tablewrap, .ov-table-wrap, .ov-qa-tablewrap, .ov-task-tablewrap, .ov-doc-tablewrap, .ov-dt):has(.ov-crm-empty, td.ov-dt-empty, td.ov-qa-table-empty) { container-type: inline-size; }
:is(.tablewrap, .ov-crm-tablewrap, .ov-table-wrap, .ov-qa-tablewrap, .ov-task-tablewrap, .ov-doc-tablewrap, .ov-dt) td:has(> .ov-crm-empty) { padding-left: 0; padding-right: 0; }
:is(.tablewrap, .ov-crm-tablewrap, .ov-table-wrap, .ov-qa-tablewrap, .ov-task-tablewrap, .ov-doc-tablewrap, .ov-dt) .ov-crm-empty { position: sticky; left: 0; width: 100cqw; box-sizing: border-box; }
/* A sentence written straight into the cell has no box to pin, so on a
   phone the cell itself becomes that box (desktop keeps the full-width
   table-cell and its row line - CALLS-27). */
@media (max-width: 760px) {
  :is(.tablewrap, .ov-crm-tablewrap, .ov-table-wrap, .ov-qa-tablewrap, .ov-task-tablewrap, .ov-doc-tablewrap, .ov-dt) :is(td.ov-dt-empty, td.ov-qa-table-empty) {
    display: block; position: sticky; left: 0; width: 100cqw; box-sizing: border-box; white-space: normal;
  }
}
.ov-ap-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 12px 20px 14px; box-shadow: inset 0 1px var(--ov-line); color: var(--ov-ink-3); font-size: 12.5px; }
.ov-ap-legend > div { display: flex; gap: 6px; }
.ov-ap-legend dt { color: var(--ov-ink-2); font-weight: 620; }
.ov-ap-legend dd { margin: 0; }
.ov-ap-legend-tight { padding: 10px 0 0; box-shadow: none; }

/* tabs + toolbar (offers) */
.ov-ap-tabs { margin: 0; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.ov2-global .ov-ap .ov-ap-tabs .ov-tab { display: inline-flex; align-items: center; white-space: nowrap; }
.ov2-global .ov-legacy-main .ov-ap .ov-ap-tabs a.ov-tab { text-decoration: none; color: var(--ov-ink-3); }
.ov2-global .ov-legacy-main .ov-ap .ov-ap-tabs a.ov-tab:hover, .ov2-global .ov-legacy-main .ov-ap .ov-ap-tabs a.ov-tab.on { color: var(--ov-ink); }
.ov-ap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; box-shadow: inset 0 -1px var(--ov-line); }
.ov-ap-toolbar input[type="search"], .ov-ap-toolbar select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--ov-control-line); border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink); font: 450 13.5px/1.3 var(--ov-font-text); }
.ov-ap-toolbar input[type="search"] { flex: 0 1 300px; min-width: 0; }
.ov2-global .ov-ap .ov-ap-toolbar select { width: auto; flex: 0 0 auto; min-width: 180px; }
.ov-ap-toolbar input:focus-visible, .ov-ap-toolbar select:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-ap-toolbar .ov-ap-meta { margin-left: auto; }
.ov-ap-req { display: inline-block; text-align: left; }
.ov-ap-req summary { list-style: none; }
.ov-ap-req summary::-webkit-details-marker { display: none; }
.ov-ap-req[open] form { display: grid; gap: 8px; width: min(320px, 70vw); margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--ov-surface); box-shadow: inset 0 0 0 1px var(--ov-line); }
.ov-ap-req label { display: grid; gap: 6px; color: var(--ov-ink-2); font-size: 12.5px; font-weight: 600; }
.ov-ap-req textarea { box-sizing: border-box; width: 100%; padding: 7px 9px; border: 1px solid var(--ov-control-line); border-radius: var(--ov-radius-sm); background: var(--ov-raised); color: var(--ov-ink); font: 450 13.5px/1.4 var(--ov-font-text); resize: vertical; }
.ov-ap-req .ov-crm-button { justify-self: start; }

/* offer page: 7-day strip, link builder, facts */
.ov-ap .ov-kpis.ov-ap-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); box-shadow: none; background: transparent; }
.ov-ap .ov-kpis.ov-ap-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-ap .ov-kpis.ov-ap-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ov-ap .ov-ap-strip .ov-kpi { padding: 14px 20px 14px; }
.ov-ap .ov-ap-strip .ov-kpi-value, .ov-ap .ov-ap-strip .ov-kpi:first-child .ov-kpi-value { font-size: 22px; }
.ov-ap-panels { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.ov-ap-link { display: flex; align-items: center; gap: 8px; }
.ov-ap-link input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ov-control-line); border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink); font-family: var(--ov-font-mono); font-size: 12.5px; }
.ov-ap-link input:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-ap-builder + .ov-ap-builder { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px var(--ov-line); }
.ov-ap-acct { margin: 0 0 6px; color: var(--ov-ink-3); font-size: 12.5px; }
.ov-ap-subs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ov-ap-subs label { display: grid; gap: 5px; color: var(--ov-ink-3); font-family: var(--ov-font-mono); font-size: 12px; font-weight: 560; }
.ov-ap-subs input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; padding: 6px 9px; border: 1px solid var(--ov-control-line); border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink); font: 450 13px/1.3 var(--ov-font-text); }
.ov-ap-subs input:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-ap-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; margin: 0; padding: 16px 20px; }
.ov-ap-facts > div { min-width: 0; }
.ov-ap-facts dt { margin-bottom: 4px; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 560; }
.ov-ap-facts dd { margin: 0; color: var(--ov-ink); font-size: 14px; overflow-wrap: anywhere; }
.ov-ap-facts.ov-ap-facts-list { display: block; padding: 4px 20px; }
.ov-ap-facts-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; box-shadow: inset 0 -1px var(--ov-line); }
.ov-ap-facts-list > div:last-child { box-shadow: none; }
.ov-ap-facts-list dt { margin: 0; }
.ov-ap-facts-list dd { text-align: right; }
.ov-ap-facts-list .ov-ap-wide { display: block; }
.ov-ap-facts-list .ov-ap-wide dd { margin-top: 4px; text-align: left; }
.ov-ap-about { box-shadow: inset 0 1px var(--ov-line); }
.ov2-global .ov-ap-about h3 { margin: 0 0 6px; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 560; }
.ov-ap-about p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ov-ink-2); }

/* postbacks: macro chips insert at the cursor; the inline test result */
.ov-ap-macros { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.ov-ap-macro { appearance: none; border: 1px solid var(--ov-control-line); border-radius: 6px; padding: 4px 8px; background: var(--ov-surface); color: var(--ov-ink-2); font: 560 12px/1.2 var(--ov-font-mono); cursor: pointer; }
.ov-ap-macro:hover { border-color: var(--ov-accent); color: var(--ov-accent-ink); }
.ov-ap-macro:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-ap-inline { margin: 0; }
.ov-ap-verdict { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 14px; }
.ov-ap-test .ov-ap-facts-list { padding: 0; }
.ov-ap-pre { max-height: 160px; overflow: auto; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ov-sunken); color: var(--ov-ink-2); font: 12px/1.5 var(--ov-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* reporting: toolbar card with the date range and Run */
.ov-ap-runbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding: 14px 20px; }
.ov-ap-runbar-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ov-ap-runbar .ov-ap-field { margin: 0; }
.ov-ap-runbar .ov-ap-field select { min-width: 160px; }
.ov-ap-runbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-ap-chartwrap { padding: 12px 20px 16px; box-shadow: inset 0 1px var(--ov-line); }
.ov-ap-chartwrap .ov-ap-meta { display: block; margin: 0 0 8px; }
.ov-ap-chartwrap .ov-ap-body { padding: 0; }
.ov-ap-chart { display: block; width: 100%; height: 170px; }
.ov-ap .ov-chart-bar { fill: var(--ov-accent); opacity: .32; }
.ov-ap-chart-axis { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); padding-top: 6px; color: var(--ov-ink-3); font-family: var(--ov-font-mono); font-size: 11.5px; text-align: center; }
.ov-ap-chart-axis .ov-ap-today { color: var(--ov-ink-2); font-weight: 600; }
.ov-ap-cols { position: relative; }
.ov-ap-cols summary { list-style: none; }
.ov-ap-cols summary::-webkit-details-marker { display: none; }
.ov-ap-cols fieldset { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: grid; gap: 8px; min-width: 180px; margin: 0; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--ov-raised); box-shadow: var(--ov-plane-shadow), inset 0 0 0 1px var(--ov-line); }
.ov-ap-cols label { display: flex; align-items: center; gap: 8px; color: var(--ov-ink); font-size: 13px; }
.ov-ap-mono { font-family: var(--ov-font-mono); }

/* account: agreements */
.ov-ap-doc summary { cursor: pointer; }
.ov-ap-termsbox { max-height: 300px; overflow-y: auto; margin-top: 8px; padding: 12px 14px; border-radius: 8px; background: var(--ov-sunken); color: var(--ov-ink-2); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
.ov-ap-termsbox:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }

@media (max-width: 1280px) {
  .ov-ap-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-ap .ov-kpis.ov-ap-seven { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ov-ap-row, .ov-ap-panels { grid-template-columns: minmax(0, 1fr); }
  .ov-ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-ap-steps li + li { box-shadow: inset 0 1px var(--ov-line); }
}
@media (max-width: 640px) {
  .ov2-global .ov-ap-head h1 { font-size: 24px; }
  .ov-ap-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .ov-ap-card-body { padding: 12px 14px 10px; }
  .ov-ap-card-value { font-size: 22px; }
  .ov-ap-card .ov-ap-card-head { padding: 8px 14px; min-height: 40px; }
  .ov-ap-steps { grid-template-columns: minmax(0, 1fr); }
  .ov-ap-steps li { grid-template-columns: auto 1fr auto; grid-template-rows: auto; padding: 10px 16px; }
  .ov-ap-steps li > :last-child { grid-column: auto; }
  .ov-ap .ov-kpis.ov-ap-strip, .ov-ap .ov-kpis.ov-ap-four, .ov-ap .ov-kpis.ov-ap-seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-ap .ov-ap-strip .ov-kpi { grid-column: auto !important; }
  .ov-ap .ov-ap-strip .ov-kpi:nth-child(n+3) { box-shadow: inset 0 1px var(--ov-line); }
  .ov-ap .ov-ap-strip .ov-kpi:nth-child(odd)::before { display: none; }
  .ov-ap-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-ap-hide-m { display: none; }
  .ov-ap-banner { flex-wrap: wrap; }
  .ov-ap-banner .ov-crm-button { margin-left: 36px; }
  .ov-ap-titlepay { margin-left: 0; text-align: left; flex-basis: 100%; }
  .ov-ap-perf-plot { padding-left: 44px; }
  .ov-ap-perf-y span { width: 38px; }
  .ov-ap-perf-x { margin-left: 44px; }
  .ov-ap-perf-plot svg { height: 170px; }
  .ov-ap-toolbar input[type="search"] { flex: 1 1 100%; }
  .ov2-global .ov-ap .ov-ap-toolbar select { flex: 1 1 auto; }
  .ov2-global .ov-ap .ov-ap-tabs .ov-tab { padding: 10px 10px; }
  .ov-ap-toolbar .ov-ap-meta { margin-left: 0; }
  .ov-ap-runbar, .ov-ap-runbar-fields { flex-direction: column; align-items: stretch; }
  .ov-ap-legend { flex-direction: column; }
  .ov-ap-perf-x span:nth-child(even) { display: none; }
  .ov-ap-card-rows > div { font-size: 12.5px; gap: 6px; }
}
@media (max-width: 340px) { .ov-ap-cards { grid-template-columns: minmax(0, 1fr); } }
/* .ov-dist table sets a 680px floor (0,1,1); a portal table stays at its content width */
.ov-ap .ov-crm-table.ov-ap-table, .ov-ap-panels .ov-crm-table.ov-crm-table { min-width: 0; }
/* the campaign's three-column Fields table fits its column at 390 and 1440;
   the 680 / 720px floors are for wide data tables (VIS-12, 2026-09-16) */
.ov-dist .ov-fields-table { min-width: 0; }

/* 499 Group logo pack (2026-09-15): the portal rail swaps colour/white with the theme */
.ov2-global .ov-portal-logo.ov-logo-light { display: block; max-width: 168px; max-height: 40px; }
.ov2-global .ov-portal-logo.ov-logo-dark { display: none; max-width: 168px; max-height: 40px; }
:root[data-theme="dark"] .ov2-global .ov-portal-logo.ov-logo-light, html.dark .ov2-global .ov-portal-logo.ov-logo-light { display: none; }
:root[data-theme="dark"] .ov2-global .ov-portal-logo.ov-logo-dark, html.dark .ov2-global .ov-portal-logo.ov-logo-dark { display: block; }
/* 499 Group mark in the shared macro (2026-09-15): colour on light, white on dark */
.ov-499-mark .ov-mark-dark { display: none; }
:root[data-theme="dark"] .ov-499-mark .ov-mark-light, html.dark .ov-499-mark .ov-mark-light { display: none; }
:root[data-theme="dark"] .ov-499-mark .ov-mark-dark, html.dark .ov-499-mark .ov-mark-dark { display: inline; }
.ov2-global .ov-brand .ov-portal-logo { max-width: 156px; max-height: 38px; }

/* Traffic rules on an offer (aff_offer_routing.html, T4a 2026-09-23):
   targeting fieldsets, cap rows with usage bars, fail-traffic rules. */
.ov-rules .ov-crm-plane-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ov-rules-summary { display: flex; gap: 6px; flex-wrap: wrap; }
.ov-rules .ov-crm-panel-body + .ov-crm-panel-body { border-top: 1px solid var(--ov-line); }
.ov-rules-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.ov-rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ov-rules-field { margin: 0; padding: 12px 14px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm);
  display: grid; gap: 8px; align-content: start; min-width: 0; }
.ov-rules-field legend { padding: 0 4px; font-weight: 620; color: var(--ov-ink); }
.ov-rules-field input:not([type="checkbox"]):not([type="radio"]), .ov-rules-field select { width: 100%; min-width: 0; box-sizing: border-box; }
.ov-rules-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ov-rules-checks label, .ov-rules-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ov-rules-group { flex-basis: 100%; color: var(--ov-ink-3); font-size: 12px; font-weight: 620; }
.ov-rules-hours { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-rules-hours label { display: grid; gap: 4px; flex: 1 1 90px; }
.ov-rules-add { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.ov-rules-add label { display: grid; gap: 4px; flex: 1 1 150px; min-width: 0; }
.ov-rules-add select, .ov-rules-add input { width: 100%; box-sizing: border-box; }
.ov-rules-inline { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.ov-rules-inline input { width: 7em; text-align: right; font-variant-numeric: tabular-nums; }
.ov-rules-usage { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 8px; align-items: center; min-width: 170px; }
.ov-rules-usage-n { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.ov-crm-camp-progress-fill.is-warn { background: var(--ov-warning); }
.ov-crm-camp-progress-fill.is-full { background: var(--ov-negative); }
.ov-rules-url { word-break: break-all; }
.ov-rules-table tfoot th { border-top: 1px solid var(--ov-line-strong); }
.ov-ap .ov-rules-chips { padding: 0 22px 18px; margin: 0; }

/* ==========================================================================
   Traffic Network staff screens, Everflow structure (T2, 2026-09-23).
   Kamil: the Traffic pages read "nieczytelny i zbyt AI slop w porownaniu do
   everflow". Scoped to .ov-tn so nothing outside Traffic moves: breadcrumb
   + large title, one grey inbox line, Today tiles with delta and shape,
   underline entity tabs, dense tables with sentence-case headers, tabular
   numerals and a totals row, chip toolbars. House tokens only.
   ========================================================================== */
.ov-tn { --tn-gap: 16px; }
.ov-tn .ov-heading { margin-bottom: 14px; }
.ov-tn-crumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; color: var(--ov-ink-3); font: 560 12.5px/1.3 var(--ov-font-text); }
.ov-tn-crumb > * + *::before { content: "/"; margin-right: 6px; color: var(--ov-ink-4); }
.ov-tn-crumb a { color: var(--ov-ink-3); text-decoration: none; }
.ov-tn-crumb a:hover { color: var(--ov-ink); text-decoration: underline; text-underline-offset: 3px; }
.ov-tn-crumb > :last-child { color: var(--ov-ink-2); }

/* The inbox line: every count is a link to the queue it counts. */
.ov-tn-needs { margin: 0 0 var(--tn-gap); padding: 11px 16px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); background: var(--ov-sunken); color: var(--ov-ink-2); font-size: 14px; line-height: 1.5; }
.ov-tn-needs a { color: var(--ov-accent-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ov-tn-needs a.is-zero { color: var(--ov-ink-3); font-weight: 560; text-decoration-color: var(--ov-line-strong); }
.ov-tn-needs a.is-alert { color: var(--ov-negative); }
.ov-tn-needs a:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 2px; border-radius: 3px; }

/* Today tiles: one plane, hairline dividers (the .ov-kpi family). */
.ov-tn .ov-tn-today { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 var(--tn-gap); border-radius: var(--ov-radius-lg); background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); }
.ov-tn .ov-tn-today.ov-tn-six { grid-template-columns: repeat(6, minmax(0, 1fr)); box-shadow: var(--ov-touch-shadow); }
.ov-tn .ov-tn-today .ov-kpi { display: flex; flex-direction: column; padding: 16px 18px 14px; }
.ov-tn-tilehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov-tn .ov-tn-today .ov-kpi-label { margin: 0; color: var(--ov-ink); font-size: 14px; font-weight: 650; }
.ov-tn-when { margin-top: 10px; color: var(--ov-ink-3); font-size: 12px; }
.ov-tn .ov-tn-today .ov-kpi-value, .ov-tn .ov-tn-today .ov-kpi:first-child .ov-kpi-value { display: block; margin-top: 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.ov-tn .ov-kpi-value.neg, .ov-tn td.neg, .ov-tn td .neg { color: var(--ov-negative); }
.ov-tn .ov-tn-today .ov-spark { max-width: none; height: 38px; margin-top: 10px; }
.ov-tn-sparkgap { height: 48px; }
.ov-tn-rows { margin: 10px 0 0; padding: 0; }
.ov-tn-rows > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0 5px; border-top: 1px solid var(--ov-line); font-size: 12.5px; }
.ov-tn-rows dt { color: var(--ov-ink-3); }
.ov-tn-rows dd { margin: 0; color: var(--ov-ink); font-weight: 640; font-variant-numeric: tabular-nums; }

/* Cards and tables. */
.ov-tn .ov-crm-plane + .ov-crm-plane, .ov-tn .ov-tn-card { margin-top: 0; margin-bottom: var(--tn-gap); }
.ov-tn-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--ov-line); }
.ov-tn-cardhead h2 { margin: 0; font: 680 16px/1.2 var(--ov-font-display); letter-spacing: -0.015em; }
.ov-tn-cardhead h2 .ov-crm-muted { margin-left: 6px; font: 540 13px/1 var(--ov-font-text); letter-spacing: 0; }
.ov-tn-cardhead .ov-crm-button { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.ov-tn .ov-crm-plane-heading { padding: 14px 18px; border-bottom: 1px solid var(--ov-line); }
.ov-tn .ov-crm-plane-heading h2 { margin: 0; font-size: 16px; letter-spacing: -0.015em; }
.ov-tn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-gap); align-items: start; }
@media (max-width: 1700px) { .ov-tn-pair { grid-template-columns: 1fr; gap: 0; } }
.ov-tn-pair > .ov-tn-card { margin-bottom: var(--tn-gap); }
.ov-tn-pad { padding: 14px 18px; margin: 0; }
.ov2-global .ov-tn .ov-crm-table th { color: var(--ov-ink-2); font-size: 12.5px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.ov2-global .ov-tn .ov-crm-table td { padding: 9px 13px; }
.ov-tn .ov-tn-num td.r, .ov-tn .ov-tn-num th.r, .ov-tn .ov-crm-table td.r { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ov-tn .ov-crm-table td a { color: var(--ov-accent-ink); text-decoration: none; }
.ov-tn .ov-crm-table td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-tn .ov-crm-table td a.ov-crm-button, .ov-tn .ov-crm-table td a.ov-crm-status { color: inherit; }
.ov2-global .ov-tn .ov-crm-table tfoot td { background: var(--ov-sunken); color: var(--ov-ink); font-weight: 700; box-shadow: inset 0 1px var(--ov-line-strong); }
.ov-tn-foot { margin: 0; padding: 10px 18px; border-top: 1px solid var(--ov-line); color: var(--ov-ink-2); font-size: 12.5px; text-align: right; }
.ov-tn-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 640; }
.ov-tn .dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ov-ink-4); }
.ov-tn .dot.pos { background: var(--ov-positive); }
.ov-tn .dot.neg { background: var(--ov-negative); }
.ov-tn .dot.warn { background: var(--ov-warning); }
.ov-tn-namecell .ov-crm-status { margin: 3px 4px 0 0; }
.ov-tn-rowact { white-space: nowrap; text-align: right; }
.ov-tn-rowact form { display: inline; }
.ov-tn-rowact .ov-crm-button { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }

/* Toolbar: status chips with counts, search. */
.ov-tn-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--ov-line); }
.ov-tn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-tn-chips a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--ov-line-strong); border-radius: 999px; color: var(--ov-ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.ov-tn-chips a span { color: var(--ov-ink-3); font-variant-numeric: tabular-nums; }
.ov-tn-chips a:hover { background: var(--ov-sunken); color: var(--ov-ink); }
.ov-tn-chips a[aria-current="page"] { border-color: var(--ov-accent); background: var(--ov-accent-soft); color: var(--ov-accent-ink); }
.ov-tn-chips a[aria-current="page"] span { color: var(--ov-accent-ink); }
.ov-tn-chips a:focus-visible, .ov-tn-chiplink:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 2px; }
.ov-tn-chiplink { align-self: center; padding: 0 6px; color: var(--ov-ink-3); font-size: 13px; }
.ov-tn-search { margin: 0; }
.ov-tn-searchbox { position: relative; display: flex; align-items: center; margin: 0; }
.ov-tn-searchbox .ic { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--ov-ink-3); pointer-events: none; }
.ov2-global .ov-tn .ov-tn-searchbox input { width: min(300px, 70vw); min-height: 34px; padding: 6px 10px 6px 32px; }

/* Daily cap usage bar (Affise's cap column). */
.ov-tn-cap { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.ov-tn-capbar { position: relative; flex: 1 1 60px; height: 6px; overflow: hidden; border-radius: 3px; background: var(--ov-sunken); box-shadow: inset 0 0 0 1px var(--ov-line); }
.ov-tn-capbar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ov-accent); }
.ov-tn-cap.is-high .ov-tn-capbar i { background: var(--ov-warning); }
.ov-tn-cap.is-full .ov-tn-capbar i { background: var(--ov-negative); }
.ov-tn-capn { color: var(--ov-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Row menu (Everflow's kebab). */
.ov-tn-menucell { width: 40px; text-align: right; }
.ov-tn-menu { position: relative; display: inline-block; }
.ov-tn-menu summary { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--ov-ink-2); cursor: pointer; list-style: none; }
.ov-tn-menu summary::-webkit-details-marker { display: none; }
.ov-tn-menu summary svg { width: 18px; height: 18px; fill: currentColor; }
.ov-tn-menu summary:hover, .ov-tn-menu[open] summary { background: var(--ov-sunken); color: var(--ov-ink); }
.ov-tn-menu summary:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-tn-menulist { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: flex; flex-direction: column; min-width: 210px; padding: 6px; border: 1px solid var(--ov-line); border-radius: 10px; background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); text-align: left; }
.ov-tn-menulist form { margin: 0; }
.ov-tn-menulist a, .ov-tn-menulist button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ov-ink) !important; font: 540 13.5px/1.25 var(--ov-font-text); text-align: left; text-decoration: none !important; cursor: pointer; }
.ov-tn-menulist a:hover, .ov-tn-menulist button:hover, .ov-tn-menulist a:focus-visible, .ov-tn-menulist button:focus-visible { background: var(--ov-sunken); outline: none; }
.ov2-global .ov-tn .ov-tn-offers td, .ov2-global .ov-tn .ov-tn-offers th { padding-left: 9px; padding-right: 9px; }
.ov2-global .ov-tn .ov-tn-offers .ov-tn-namecell { min-width: 200px; }
.ov-tn .ov-tn-sub { display: block; margin-top: 2px; color: var(--ov-ink-3); font-size: 12px; }
.ov-tn td.neg b { color: inherit; }
/* The table scrolls sideways, so the open menu is placed in the viewport
   by the page script (fixed), never clipped by the scroller. */
.ov-tn-menulist { position: fixed; top: auto; right: auto; }

/* Underline entity tabs (Everflow). */
.ov-tn .ov-workspace-tabs { gap: 2px; margin: 0 0 var(--tn-gap); padding: 0; border-radius: 0; background: var(--ov-canvas); box-shadow: inset 0 -1px var(--ov-line); backdrop-filter: none; }
.ov-tn .ov-workspace-tabs a { min-height: 42px; padding: 12px 14px 11px; border-radius: 0; color: var(--ov-ink-3); font-size: 14px; box-shadow: none; }
.ov-tn .ov-workspace-tabs a:hover { background: transparent; color: var(--ov-ink); }
.ov-tn .ov-workspace-tabs a[aria-current="page"] { background: transparent; color: var(--ov-ink); box-shadow: inset 0 -2px var(--ov-accent); }
.ov-tn .ov-workspace-tabs a:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: -2px; }
.ov-tab-n.ov-tab-warn { background: var(--ov-warning-soft); color: var(--ov-warning); }
.ov-tn .ov-aff-panel > .ov-crm-plane, .ov-tn .ov-aff-panel .ov-crm-grid-col > .ov-crm-plane { margin-bottom: var(--tn-gap); }
.ov-tn-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 var(--tn-gap); font-size: 13.5px; }
.ov-tn-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--ov-accent-ink); font-weight: 600; text-decoration: none; }
.ov-tn-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-tn-links .ic { width: 15px; height: 15px; }
.ov-tn-visline { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ov-ink-2); font-size: 13.5px; }

/* Dual-list picker (Affise's Enable/Disable affiliates). */
.ov-tn-dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ov-tn-dual fieldset { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--ov-line); border-radius: 10px; overflow: hidden; }
.ov-tn-dual legend { float: left; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--ov-line); background: var(--ov-sunken); font-size: 13px; font-weight: 650; }
.ov-tn-dualsearch { display: block; width: calc(100% - 20px); margin: 10px; min-height: 32px; clear: both; }
.ov-tn-dual ul { max-height: 240px; margin: 0; padding: 0 4px 6px; overflow-y: auto; list-style: none; }
.ov-tn-dual li label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.ov-tn-dual li label:hover { background: var(--ov-sunken); }
.ov-tn-dual li input[type="checkbox"] { width: auto; min-height: 0; }
.ov-tn-dual li.ov-crm-muted { padding: 6px 8px; font-size: 13px; }
.ov-tn-dualbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }

/* Report: settings bar, filter chips, Summary strip. */
.ov-tn-reportform { margin: 0; padding: 14px 16px; }
.ov-tn-reportrow { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.ov-tn-field { display: flex; flex-direction: column; gap: 5px; margin: 0; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 600; }
.ov-tn-field select { min-width: 150px; }
.ov-tn-daterange { flex: 0 0 auto; }
.ov-tn-filterrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ov-line); }
.ov-tn-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ov-tn-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 6px 3px 12px; border: 1px solid var(--ov-accent); border-radius: 999px; background: var(--ov-accent-soft); color: var(--ov-accent-ink); font-size: 13px; font-weight: 600; }
.ov-tn-fchip a { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: inherit; }
.ov-tn-fchip a:hover { background: color-mix(in srgb, var(--ov-accent) 18%, transparent); }
.ov-tn-fchip .ic { width: 13px; height: 13px; }
.ov-tn-addfilter { position: relative; }
.ov-tn-addfilter summary { list-style: none; cursor: pointer; min-height: 32px; }
.ov-tn-addfilter summary::-webkit-details-marker { display: none; }
.ov-tn-addpanel { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 10px; width: 300px; padding: 14px; border: 1px solid var(--ov-line); border-radius: 12px; background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); }
.ov-tn-addpanel label { display: flex; flex-direction: column; gap: 5px; margin: 0; color: var(--ov-ink-3); font-size: 12.5px; font-weight: 600; }
.ov-tn-addpanel label[hidden] { display: none; }
.ov-tn-run { min-width: 140px; }
.ov-tn .ov-tn-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); box-shadow: none; }
.ov-tn .ov-tn-summary .ov-kpi { padding: 12px 18px; }
.ov-tn .ov-tn-summary .ov-kpi:nth-child(n+6) { box-shadow: inset 0 1px var(--ov-line); }
.ov-tn .ov-tn-summary .ov-kpi:nth-child(6)::before { display: none; }
.ov-tn .ov-tn-summary .ov-kpi-label { margin-bottom: 6px; font-size: 12px; text-transform: none; }
.ov-tn .ov-tn-summary .ov-kpi-value, .ov-tn .ov-tn-summary .ov-kpi:first-child .ov-kpi-value { font-size: 20px; font-weight: 680; letter-spacing: -0.02em; }
.ov-tn .ov-tn-summary .ov-kpi-value a { color: var(--ov-accent-ink); text-decoration: none; }
.ov-tn .ov-tn-summary .ov-kpi-value a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Performance chart: yesterday as area, today as a line (Everflow). */
.ov-tn-seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--ov-sunken); }
.ov2-global .ov-tn .ov-tn-seg button { min-height: 28px; padding: 4px 12px; border: 0; border-radius: 7px; background: none; color: var(--ov-ink-3); font: 600 13px/1 var(--ov-font-text); cursor: pointer; }
.ov2-global .ov-tn .ov-tn-seg button[aria-selected="true"] { background: var(--ov-raised); color: var(--ov-ink); box-shadow: var(--ov-touch-shadow); }
.ov-tn-seg button:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 1px; }
.ov-tn-chart { margin: 0; padding: 16px 18px 14px; }
.ov-tn-chart[hidden] { display: none; }
.ov-tn-plot { display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: 220px; gap: 10px; height: 220px; }
.ov-tn-yaxis { display: flex; flex-direction: column; justify-content: space-between; min-width: 44px; color: var(--ov-ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }
.ov-tn-plot svg { display: block; width: 100%; height: 220px; max-height: none; overflow: visible; }
.ov-tn-plot .grid { stroke: var(--ov-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ov-tn-plot .yday { fill: color-mix(in srgb, var(--ov-accent) 16%, transparent); stroke: color-mix(in srgb, var(--ov-accent) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ov-tn-plot .today { fill: none; stroke: var(--ov-accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ov-tn-xaxis { display: flex; justify-content: space-between; margin: 6px 0 0 54px; color: var(--ov-ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ov-tn-chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 12px; color: var(--ov-ink-2); font-size: 12.5px; }
.ov-tn-key { display: inline-flex; align-items: center; gap: 6px; }
.ov-tn-key::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--ov-accent); }
.ov-tn-key.yday::before { height: 10px; background: color-mix(in srgb, var(--ov-accent) 22%, transparent); }
.ov-tn-vs { margin-left: auto; }
.ov-tn-vs b { color: var(--ov-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
  .ov-tn .ov-tn-today, .ov-tn .ov-tn-today.ov-tn-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-tn .ov-tn-today .ov-kpi:nth-child(n+4) { box-shadow: inset 0 1px var(--ov-line); }
  .ov-tn .ov-tn-today .ov-kpi:nth-child(4)::before { display: none; }
  .ov-tn-pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ov-tn { --tn-gap: 12px; }
  .ov-tn .ov-tn-today, .ov-tn .ov-tn-today.ov-tn-six, .ov-tn .ov-tn-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-tn .ov-tn-today .ov-kpi { padding: 12px 14px; }
  .ov-tn .ov-tn-today .ov-kpi::before { display: none; }
  .ov-tn .ov-tn-today .ov-kpi:nth-child(n+3), .ov-tn .ov-tn-summary .ov-kpi:nth-child(n+3) { box-shadow: inset 0 1px var(--ov-line); }
  .ov-tn .ov-tn-today .ov-kpi:nth-child(even), .ov-tn .ov-tn-summary .ov-kpi:nth-child(even) { border-left: 1px solid var(--ov-line); }
  .ov-tn .ov-tn-summary .ov-kpi::before { display: none; }
  .ov-tn .ov-tn-today .ov-kpi-value, .ov-tn .ov-tn-today .ov-kpi:first-child .ov-kpi-value { font-size: 21px; }
  .ov-tn .ov-tn-summary .ov-kpi-value, .ov-tn .ov-tn-summary .ov-kpi:first-child .ov-kpi-value { font-size: 17px; }
  .ov-tn-needs { padding: 10px 12px; font-size: 13.5px; }
  .ov-tn-toolbar { padding: 10px 12px; }
  .ov-tn-search, .ov-tn-searchbox, .ov2-global .ov-tn .ov-tn-searchbox input { width: 100%; }
  .ov-tn-dual { grid-template-columns: 1fr; }
  .ov-tn-plot, .ov-tn-plot svg { height: 170px; }
  .ov-tn-plot { grid-template-rows: 170px; grid-template-columns: 44px minmax(0, 1fr); }
  .ov-tn-xaxis { margin-left: 54px; }
  .ov-tn-vs { margin-left: 0; }
  .ov-tn-reportrow > * { flex: 1 1 140px; }
  .ov-tn-field select { min-width: 0; width: 100%; }
  .ov-tn-run { width: 100%; }
  .ov-tn-addpanel { width: min(300px, calc(100vw - 48px)); }
  .ov-tn-cardhead { padding: 12px 14px; }
}
.ov2-global .ov-tn .ov-crm-table tr.ov-tn-grp th { padding-top: 8px; padding-bottom: 0; box-shadow: none; color: var(--ov-ink-3); font-size: 11.5px; }
.ov2-global .ov-tn .ov-crm-table tr.ov-tn-grp th.c { text-align: center; box-shadow: inset 0 -1px var(--ov-line); }
/* The shell paints legacy anchors --ov-link; Traffic restates its own inks
   one notch more specific (same pattern as the docs pages). */
.ov2-global .ov-legacy-main .ov-tn .ov-workspace-tabs a { color: var(--ov-ink-3); }
.ov2-global .ov-legacy-main .ov-tn .ov-workspace-tabs a:hover, .ov2-global .ov-legacy-main .ov-tn .ov-workspace-tabs a[aria-current="page"] { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-crumb a { color: var(--ov-ink-3); }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-chips a { color: var(--ov-ink-2); }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-chips a[aria-current="page"] { color: var(--ov-accent-ink); }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-menulist a { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-tn a.ov-crm-button { color: var(--ov-ink); }
.ov2-global .ov-legacy-main .ov-tn a.ov-crm-button-primary { background: var(--ov-primary); color: var(--ov-primary-ink); }
/* Offer Details card (Everflow's General card): label column + value. */
.ov-tn-facts { padding: 4px 18px 10px; }
.ov-tn .ov-tn-dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.ov-tn .ov-tn-dl > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ov-line); border-radius: 0; background: none; box-shadow: none; min-width: 0; }
.ov-tn .ov-tn-dl > div:last-child { border-bottom: 0; }
.ov-tn .ov-tn-dl dt { color: var(--ov-ink-3); font-size: 13px; font-weight: 560; letter-spacing: 0; text-transform: none; }
.ov-tn .ov-tn-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
@media (max-width: 640px) { .ov-tn .ov-tn-dl > div { grid-template-columns: 1fr; gap: 4px; } }
.ov-tn td.ov-tn-g { white-space: nowrap; color: var(--ov-ink); font-weight: 560; }
.ov-tn .ov-crm-plane.ov-tn-reportbar { overflow: visible; position: relative; z-index: 5; }
/* Traffic links and small buttons carry .plainlink / .ov-crm-linkbtn so the
   shell's link ink and filled-button rule leave them alone; inks here. */
.ov2-global .ov-legacy-main .ov-tn .ov-tn-links a.plainlink, .ov2-global .ov-legacy-main .ov-tn .ov-tn-crumb a.plainlink:hover { color: var(--ov-accent-ink); }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-menulist .ov-crm-linkbtn { display: block; width: 100%; min-height: 0; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ov-ink); font: 540 13.5px/1.25 var(--ov-font-text); text-align: left; text-decoration: none; box-shadow: none; }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-menulist .ov-crm-linkbtn:hover, .ov2-global .ov-legacy-main .ov-tn .ov-tn-menulist .ov-crm-linkbtn:focus-visible { background: var(--ov-sunken); }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-seg .ov-crm-linkbtn { min-height: 28px; padding: 4px 12px; border: 0; border-radius: 7px; background: none; color: var(--ov-ink-3); font: 600 13px/1 var(--ov-font-text); text-decoration: none; box-shadow: none; }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-seg .ov-crm-linkbtn[aria-selected="true"] { background: var(--ov-raised); color: var(--ov-ink); box-shadow: var(--ov-touch-shadow); }
@media (max-width: 640px) { .ov-tn .ov-heading-actions > .ov-crm-status { justify-self: start; width: auto; } }
.ov-tn tr:has(.ov-tn-menu[open]), .ov-tn tr:has(.ov-tn-menu[open]) td { position: relative; z-index: 60; }
@media (max-width: 640px) {
  .ov-tn .ov-tn-today .ov-kpi, .ov-tn .ov-tn-summary .ov-kpi { grid-column: auto !important; }
}
/* Floating layers sit on the solid canvas: the dark theme's raised token is
   glass (64% alpha), which let the rows beneath read through the menu. */
.ov-tn-menulist, .ov-tn-addpanel { background: linear-gradient(var(--ov-raised), var(--ov-raised)), var(--ov-canvas); }

/* Traffic Network logs (R1 visibility, 2026-09-23; folded in from
   traffic-logs.css at integration): conversions, clicks, inbound postbacks
   and the flowchart page. Everflow structure - crumb + large title, a
   toolbar (date range | filters | run / export), a summary strip over a
   dense table - on --ov-* tokens only, scoped to .ov-tl. */

.ov-tl-crumb {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 4px; color: var(--ov-ink-3); font-size: 13px;
}
.ov-tl-crumb a { color: var(--ov-ink-3); text-decoration: none; }
.ov-tl-crumb a:hover { color: var(--ov-ink); text-decoration: underline; }
.ov-tl-crumb span[aria-hidden] { color: var(--ov-ink-4); }

.ov-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.ov-tl-head h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.ov-tl-head .ov-tl-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- toolbar ---------------------------------------------------------- */
.ov-tl-bar {
  display: grid; grid-template-columns: minmax(200px, 250px) 1fr;
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md);
  background: var(--ov-raised); margin-bottom: 16px; overflow: visible;
}
.ov-tl-bar-range { padding: 14px 16px; border-right: 1px solid var(--ov-line); }
.ov-tl-bar-filters {
  padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
}
.ov-tl-bar-filters label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--ov-ink-3); font-weight: 560; min-width: 130px; flex: 1 1 150px; max-width: 240px;
}
.ov-tl-bar-filters label.ov-tl-grow { flex: 2 1 220px; max-width: 320px; }
.ov-tl-bar-filters select,
.ov-tl-bar-filters input[type="text"],
.ov-tl-bar-filters input[type="search"] {
  height: 34px; padding: 0 10px; border: 1px solid var(--ov-control-line);
  border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink);
  font: inherit; font-size: 13.5px; font-weight: 400; width: 100%; min-width: 0;
}
.ov-tl-bar-run {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--ov-line); background: var(--ov-surface);
  border-radius: 0 0 var(--ov-radius-md) var(--ov-radius-md);
}
.ov-tl-bar-run .ov-tl-spacer { flex: 1; }
.ov-tl-check { flex-direction: row !important; align-items: center; gap: 6px !important;
  min-width: 0 !important; flex: 0 0 auto !important; height: 34px; color: var(--ov-ink-2) !important; }

/* ---- summary strip (house tile row, auto columns) ---------------------- */
.ov-tl .ov-kpis {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md);
  margin-bottom: 16px; box-shadow: none;
}
.ov-tl .ov-kpi { padding: 14px 16px 13px; }
.ov-tl .ov-kpi .ov-kpi-label { margin-bottom: 6px; font-size: 12px; }
.ov-tl .ov-kpi .ov-kpi-value { font-size: 20px; font-variant-numeric: tabular-nums; }
.ov-tl a.ov-kpi { color: inherit; text-decoration: none; border-radius: var(--ov-radius-sm); }
.ov-tl a.ov-kpi:hover { background: var(--ov-sunken); }
.ov-tl a.ov-kpi[aria-current="true"] { background: var(--ov-sunken); box-shadow: inset 0 2px var(--ov-accent); } /* CRM-27: neutral fill, accent edge, blue label */
.ov-tl a.ov-kpi[aria-current="true"] .ov-kpi-label { color: var(--ov-accent-ink); }
.ov-tl a.ov-kpi:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: -2px; }

/* ---- table ------------------------------------------------------------- */
.ov-tl-tablehead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--ov-line);
}
.ov-tl-tablehead h2 { margin: 0; font-size: 14px; font-weight: 650; }
.ov-tl-tablehead .ov-tl-spacer { flex: 1; }
.ov-tl-table-card { border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md);
  background: var(--ov-raised); overflow: hidden; }
.ov-tl-table-card .ov-crm-tablewrap { border: 0; border-radius: 0; }
.ov2-global .ov-crm-workspace.ov-tl .ov-crm-table th,
.ov2-global .ov-crm-workspace.ov-tl .ov-crm-table td { padding: 8px 10px; }
.ov-tl .ov-crm-table td { white-space: nowrap; }
.ov-tl .ov-crm-table td.ov-tl-wrap { white-space: normal; min-width: 150px; max-width: 220px; }
.ov-tl .ov-crm-table td.ov-tl-reason { white-space: normal; min-width: 240px; max-width: 360px; }
.ov-tl .ov-crm-table td.r,
.ov-tl .ov-crm-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.ov-tl .ov-crm-table tfoot td {
  font-weight: 650; color: var(--ov-ink); background: var(--ov-surface);
  box-shadow: inset 0 1px var(--ov-line-strong);
}
.ov-tl-id { font-family: var(--ov-font-mono); font-size: 12.5px; color: var(--ov-ink-2); }
a.ov-tl-id { color: var(--ov-accent-ink); text-decoration: none; }
a.ov-tl-id:hover { text-decoration: underline; }
.ov-tl-sub { display: block; color: var(--ov-ink-3); font-size: 12px; }
.ov-tl-reason { color: var(--ov-ink-2); font-size: 12.5px; white-space: normal; max-width: 340px; }
.ov-tl-sel { width: 34px; }
.ov-tl-sel input { width: 16px; height: 16px; }
.ov-tl-bulk { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.ov-tl-bulk select { width: auto; min-width: 190px; height: 32px; border: 1px solid var(--ov-control-line); border-radius: var(--ov-radius-sm);
  background: var(--ov-surface); color: var(--ov-ink); padding: 0 8px; font: inherit; font-size: 13px; }
.ov-tl-bulk-count { color: var(--ov-ink-3); font-size: 12.5px; }

.ov-tl-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 10px 14px; border-top: 1px solid var(--ov-line); font-size: 13px; color: var(--ov-ink-3);
}
.ov-tl-pager a, .ov-tl-pager b {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--ov-radius-sm); text-decoration: none;
  color: var(--ov-ink-2); font-variant-numeric: tabular-nums;
}
.ov-tl-pager a:hover { background: var(--ov-sunken); }
.ov-tl-pager b { background: var(--ov-accent-soft); color: var(--ov-accent-ink); }
.ov-tl-pager .ov-tl-total { margin-right: auto; }

.ov-tl-writer { margin-top: 12px; color: var(--ov-ink-3); font-size: 12.5px; }
.ov-tl-writer p { margin: 4px 0; }

.ov-tl-note { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--ov-radius-sm);
  background: var(--ov-positive-soft); color: var(--ov-positive); font-size: 13px; }

/* ---- flowchart page ---------------------------------------------------- */
.ov-tl-summary {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0;
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); background: var(--ov-raised);
  margin-bottom: 16px;
}
.ov-tl-summary > div { padding: 14px 18px; }
.ov-tl-summary > div + div { border-left: 1px solid var(--ov-line); }
.ov-tl-summary dl, .ov-tl-kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.ov-tl-summary dt, .ov-tl-kv dt { color: var(--ov-ink-3); font-size: 12.5px; }
.ov-tl-summary dd, .ov-tl-kv dd { margin: 0; color: var(--ov-ink); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ov-tl-summary dd.r { font-variant-numeric: tabular-nums; }

.ov-tl-lanes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); overflow: hidden;
  background: var(--ov-raised);
}
.ov-tl-lane { min-width: 0; display: flex; flex-direction: column; }
.ov-tl-lane + .ov-tl-lane { border-left: 1px solid var(--ov-line); }
.ov-tl-lane-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--ov-line); font-weight: 650; font-size: 14px; color: var(--ov-ink);
}
.ov-tl-lane-head .ov-tl-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-variant-numeric: tabular-nums; background: var(--ov-sunken); color: var(--ov-ink-2);
}
.ov-tl-lane[data-lane="click"] .ov-tl-lane-head { background: var(--ov-accent-soft); }
.ov-tl-lane[data-lane="conv"] .ov-tl-lane-head { background: var(--ov-sunken); }
.ov-tl-lane[data-lane="pb"] .ov-tl-lane-head { background: var(--ov-warning-soft); }
.ov-tl-lane-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ov-tl-empty { color: var(--ov-ink-3); font-size: 13px; padding: 6px 2px; }

.ov-tl-node {
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm); background: var(--ov-surface);
}
.ov-tl-node > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 10px 12px; font-size: 13.5px; color: var(--ov-ink);
}
.ov-tl-node > summary::-webkit-details-marker { display: none; }
.ov-tl-node > summary::before {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ov-ink-3);
  border-bottom: 1.5px solid var(--ov-ink-3); transform: rotate(-45deg); margin-right: 2px;
  transition: transform var(--ov-fast) var(--ov-ease);
}
.ov-tl-node[open] > summary::before { transform: rotate(45deg); }
.ov-tl-node > summary:focus-visible { outline: 2px solid var(--ov-focus); outline-offset: 2px; border-radius: var(--ov-radius-sm); }
.ov-tl-node > summary .ov-tl-when { margin-left: auto; color: var(--ov-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ov-tl-node-body { padding: 4px 12px 12px; border-top: 1px solid var(--ov-line); }
.ov-tl-node-body h4 { margin: 12px 0 6px; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ov-ink-3); font-weight: 650; }
.ov-tl-node[data-anchor="1"] { border-color: var(--ov-accent); box-shadow: 0 0 0 1px var(--ov-accent) inset; }

.ov-tl-gap {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ov-line-strong);
  font-size: 12px; color: var(--ov-ink-2); font-variant-numeric: tabular-nums; background: var(--ov-raised);
}
.ov-tl-gap::before { content: ""; width: 12px; height: 1px; background: var(--ov-ink-3); }

.ov-tl-mini { font-size: 12.5px; color: var(--ov-ink-2); }
.ov-tl-mrow {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--ov-line); align-items: start;
}
.ov-tl-mrow > div { min-width: 0; overflow-wrap: anywhere; }
.ov-tl-mrow > .ov-tl-mspan { grid-column: 1 / -1; }
.ov-tl-node, .ov-tl-node-body { min-width: 0; overflow-wrap: anywhere; }
.ov-tl .ov-tl-reason .ov-tl-url { white-space: normal; }
.ov-tl-url { overflow-wrap: anywhere; font-family: var(--ov-font-mono); font-size: 11.5px; color: var(--ov-ink-2); overflow-wrap: anywhere; }
.ov-tl-snippet { margin: 4px 0 0; padding: 6px 8px; border-radius: 6px; background: var(--ov-sunken);
  font-family: var(--ov-font-mono); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ov-ink-2); }
.ov-tl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ov-tl-actions form { display: inline-flex; gap: 6px; }
.ov-tl-actions input { height: 32px; padding: 0 8px; border: 1px solid var(--ov-control-line);
  border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink); font: inherit; font-size: 13px; }

@media (max-width: 900px) {
  .ov-tl-bar { grid-template-columns: 1fr; }
  .ov-tl-bar-range { border-right: 0; border-bottom: 1px solid var(--ov-line); }
  .ov-tl-summary { grid-template-columns: 1fr; }
  .ov-tl-summary > div + div { border-left: 0; border-top: 1px solid var(--ov-line); }
  .ov-tl-lanes { grid-template-columns: 1fr; }
  .ov-tl-lane + .ov-tl-lane { border-left: 0; border-top: 1px solid var(--ov-line); }
}
@media (max-width: 560px) {
  .ov-tl-head h1 { font-size: 24px; }
  .ov-tl-bar-filters label, .ov-tl-bar-filters label.ov-tl-grow { max-width: none; flex-basis: 100%; }
  .ov-tl .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-tl .ov-kpis .ov-kpi:first-child,
  .ov-tl .ov-kpis .ov-kpi:nth-child(4) { grid-column: auto; }
  .ov-tl .ov-kpis .ov-kpi { box-shadow: inset 0 -1px var(--ov-line); }
  .ov-tl .ov-kpis .ov-kpi::before { display: none; }
  .ov-tl-head .ov-tl-head-actions { margin-left: 0; }
}
/* Money on an offer (aff_offer_money.html, T4b 2026-09-23): goal detail rows,
   the held-conversions facts, the wide URL field. Layout otherwise reuses
   the ov-rules-* classes above. */
.ov-money-goal { margin-top: 10px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm); padding: 8px 14px; }
.ov-money-goal > summary { cursor: pointer; color: var(--ov-ink-2); font-size: 13px; }
.ov-money-goal[open] > summary { margin-bottom: 8px; }
.ov-money-sub { display: grid; gap: 10px; min-width: 0; }
.ov-money-sub h4 { margin: 8px 0 0; font-size: 13px; font-weight: 620; color: var(--ov-ink); }
.ov-money-sub .ov-rules-add { margin-top: 0; }
.ov-money-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }
.ov-money-facts div { display: grid; gap: 2px; }
.ov-money-facts dt { font-size: 12px; color: var(--ov-ink-3); }
.ov-money-facts dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ov-rules-add label.ov-money-url { flex: 3 1 320px; }
.ov-money-toggles { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ov-rules-add .ov-money-toggles label { display: inline-flex; flex: 0 0 auto; white-space: normal; }
/* Traffic automation (T6, 2026-09-23): automation page, link-check chips,
   dashboard insight cards. */
.ov-auto-crumb { font-size: 13px; color: var(--ov-ink-3); margin-bottom: 4px; }
.ov-auto-crumb a { color: inherit; }
.ov-auto-tabs { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--ov-line); }
.ov-auto-tabs a { padding: 8px 12px; color: var(--ov-ink-2); text-decoration: none; font-weight: 600; font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ov-auto-tabs a:hover, .ov-auto-tabs a:focus-visible { color: var(--ov-ink); border-bottom-color: var(--ov-primary); }
.ov-auto-form { padding: 16px 18px; border-top: 1px solid var(--ov-line); }
.ov-auto-form .ov-rules-field > label { display: grid; gap: 4px; }
.ov-auto-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ov-auto-loghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ov-auto-confirm { margin: 12px 0 0; white-space: normal !important; align-items: flex-start !important; }
.ov-alert.ov-auto-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ov-auto-conflict .ov-alert-detail { flex-basis: 100%; padding-left: 18px; }
.ov-auto-conflict-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-basis: 100%; padding-left: 18px; }
.ov-auto-why { min-width: 220px; max-width: 420px; white-space: normal; }
.ov-auto .chip.on { background: var(--ov-primary); color: var(--ov-primary-ink); }
.ov-lc { display: inline-flex; gap: 4px; align-items: center; }
.ov-lc-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 30px; height: 22px; padding: 0 6px;
  border-radius: 6px; font: 650 11.5px/1 var(--ov-font-text); font-variant-numeric: tabular-nums; }
.ov-lc-chip.is-ok { background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov-lc-chip.is-bad { background: var(--ov-negative-soft); color: var(--ov-negative); }
.ov-lc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ov-insight-list { list-style: none; margin: 0; padding: 0 18px 16px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ov-insight { border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm); padding: 10px 12px; min-width: 0; }
.ov-insight-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.ov-insight-head a { font-weight: 650; color: var(--ov-ink); }
.ov-insight-head .ov-crm-muted { flex-basis: 100%; font-size: 12px; }
.ov-insight-rows { margin: 0; display: grid; gap: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ov-insight-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 3.5em; gap: 10px; align-items: baseline;
  padding: 3px 0; border-top: 1px solid var(--ov-line); }
.ov-insight-row dt { font-weight: 600; color: var(--ov-ink-2); }
.ov-insight-row dd { margin: 0; text-align: right; }
.ov-insight-delta { color: var(--ov-negative); font-weight: 650; }
.ov-insight-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-insights .ov-crm-plane-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ==== 2026-09-24 design pass: LEADS ==== */
/* The Leads pages on the approved Traffic language (.ov-tn). Scoped to the
   Leads wrappers; tokens only, so light and dark both follow the theme. */
.ov-tn .ov-leads-strip .ov-kpi { min-width: 0; }
.ov-tn .ov-leads-strip .ov-kpi-value { overflow-wrap: anywhere; }
.ov-leads-dash .ov-flow-svg { max-width: 760px; margin: 0 auto; }

/* Health: one needs-you block, a line per flag (chip + text + fix). */
.ov-leads-health { display: grid; gap: 8px; }
.ov-leads-health p { margin: 0; }
.ov-leads-health-lead { color: var(--ov-ink); font-weight: 650; }
.ov-leads-health-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ov-leads-health-list li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ov-leads-health-list .ov-crm-status { flex: 0 0 auto; }

/* Cards inside a panel (sources, buyers, wire formats). */
.ov-leads-item { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--ov-line); }
.ov-leads-item:first-child { padding-top: 6px; }
.ov-leads-itemhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ov-leads-itemname { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 650; }
.ov-leads-itemname .ic { width: 16px; height: 16px; color: var(--ov-ink-3); }
.ov-leads-itemmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; color: var(--ov-ink-2); font-size: 13px; }
.ov-leads-quarantine { color: var(--ov-warning); font-weight: 600; }
.ov-leads-quarantine .ic { width: 15px; height: 15px; }
.ov-leads-item .ov-crm-alert { margin: 0; }
.ov-leads-wire { font-size: 12.5px; line-height: 1.8; overflow-wrap: anywhere; }
.ov-leads-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ov-leads-actions form, .ov-leads-inline form { margin: 0; }
.ov-dist-campaign .ov-leads-actions .ov-crm-button, .ov-dist-campaign .ov-leads-inline .ov-crm-button { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.ov-leads-inline { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; margin: 0; }
.ov-leads-inline > label { display: grid; gap: 4px; color: var(--ov-ink-3); font: 580 12.5px/1.25 var(--ov-font-text); }
.ov2-global .ov-crm-workspace .ov-leads-inline :is(input:not([type="checkbox"]), select) { width: auto; min-width: 110px; min-height: 34px; padding: 6px 10px; }
.ov-leads-itemhead .ov-leads-inline { align-items: center; }
.ov-leads-subpanel { padding-top: 10px; border-top: 1px solid var(--ov-line); }
.ov-leads-addrow { margin-top: 14px; }
.ov-leads-disclosure { margin-top: 14px; }
.ov-leads-disclosure > summary { list-style: none; width: fit-content; }
.ov-leads-disclosure > summary::-webkit-details-marker { display: none; }
.ov-leads-disclosure[open] > summary { margin-bottom: 12px; }
.ov-leads-check { display: inline-flex; align-items: center; gap: 6px; color: var(--ov-ink-2); font-size: 13px; }

/* Campaign settings form. */
.ov-leads-form { display: grid; gap: 14px; }
.ov-leads-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm); }
.ov-leads-checks legend { padding: 0 4px; color: var(--ov-ink-2); font-size: 12.5px; font-weight: 620; }
.ov-leads-checks label, .ov-leads-checks-inline label { display: inline-flex; align-items: center; gap: 6px; color: var(--ov-ink-2); font-size: 13px; white-space: nowrap; }
.ov-leads-checks-inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ov-dist .ov-bf-group > legend { color: var(--ov-ink-2); font-size: 12.5px; font-weight: 650; }

/* Fields: the fill bar column. */
.ov-leads-fillcell { width: 45%; }

/* Routing matrix: the source column stays, buyer names wrap. */
.ov-leads-routing-wrap { max-height: min(60vh, 520px); overflow: auto; }
.ov2-global .ov-tn .ov-leads-routing th, .ov2-global .ov-tn .ov-leads-routing td { background: var(--ov-raised); }
.ov2-global .ov-tn .ov-leads-routing th { position: sticky; top: 0; z-index: 2; min-width: 120px; max-width: 200px; white-space: normal; vertical-align: bottom; }
.ov2-global .ov-tn .ov-leads-routing th:first-child, .ov2-global .ov-tn .ov-leads-routing td:first-child { position: sticky; left: 0; z-index: 1; min-width: 180px; box-shadow: inset -1px 0 var(--ov-line); }
.ov2-global .ov-tn .ov-leads-routing th:first-child { z-index: 3; }
.ov-leads-routing .c { text-align: center; }
.ov-leads-resp { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-leads-inline > label.ov-leads-check { display: inline-flex; align-self: center; }
.ov2-global .ov-legacy-main .ov-tn .ov-leads-itemname a { color: var(--ov-accent-ink); text-decoration: none; }
.ov2-global .ov-legacy-main .ov-tn .ov-leads-itemname a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-leads-dash .ov-tn-pad:has(> .ov-flow-svg) { overflow-x: auto; }
.ov-leads-dash .ov-flow-svg { min-width: 560px; }
.ov2-global .ov-tn .ov-leads-camps .ov-tn-namecell { min-width: 220px; }

/* Lead page: notes under the money tiles, the story timeline. */
.ov-lead-notes { margin: 0 0 var(--tn-gap, 16px); padding: 0 0 0 18px; color: var(--ov-ink-3); font-size: 12.5px; line-height: 1.5; }
p.ov-lead-notes { padding: 8px 0 0; }
.ov-timeline { margin: 0; padding: 0; list-style: none; }
.ov-timeline-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--ov-line); }
.ov-timeline-item:first-child { border-top: 0; }
.ov-timeline-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--ov-control-line); }
.ov-timeline-item.is-ok .ov-timeline-dot { background: var(--ov-positive); }
.ov-timeline-item.is-bad .ov-timeline-dot { background: var(--ov-negative); }
.ov-timeline-item.is-warn .ov-timeline-dot { background: var(--ov-warning); }
.ov-timeline-body { min-width: 0; }
.ov-timeline-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.ov-timeline-when { color: var(--ov-ink-3); font-size: 12px; }
.ov-timeline-lines { margin-top: 3px; color: var(--ov-ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.ov-timeline-raw { margin-top: 6px; }
.ov-timeline-raw > summary { color: var(--ov-ink-3); font-size: 12.5px; cursor: pointer; }
.ov-timeline-raw > summary .mono { font-size: 11.5px; }
.ov-timeline-rawgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.ov-timeline-rawlabel { margin-bottom: 4px; color: var(--ov-ink-2); font-size: 12.5px; font-weight: 600; }
.ov-timeline-raw pre { max-height: 240px; margin: 8px 0 0; padding: 10px; overflow: auto; border-radius: 6px; background: var(--ov-sunken); color: var(--ov-ink); font-size: 12px; white-space: pre-wrap; }
.ov-timeline-rawgrid pre { margin: 0; }
.ov2-global .ov-tn .ov-lead-captured td:first-child { width: 220px; color: var(--ov-ink-3); }
.ov-lead-top { margin-bottom: 0; }
@media (min-width: 1100px) { .ov-tn-pair.ov-lead-top, .ov-tn-pair.ov-leads-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tn-gap); } }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-dl a { color: var(--ov-accent-ink); text-decoration: none; }
.ov2-global .ov-legacy-main .ov-tn .ov-tn-dl a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Lead warehouse on phones (LEADS-32): the table keeps its rows and scrolls
   sideways in its own box, like every other table, instead of turning into
   a 36,000px stack of cards. */
@media (max-width: 1100px) {
  .ov2-global .ov-leads-workspace .ov-table-wrap { overflow-x: auto; }
  .ov2-global .ov-leads-workspace .ov-leads-table { display: table; min-width: 900px; }
  .ov2-global .ov-leads-workspace .ov-leads-table thead { display: table-header-group; }
  .ov2-global .ov-leads-workspace .ov-leads-table tbody { display: table-row-group; }
  .ov2-global .ov-leads-workspace .ov-leads-table tbody tr { display: table-row; padding: 0; }
  .ov2-global .ov-leads-workspace .ov-leads-table tbody td { display: table-cell; padding: 10px 12px; white-space: nowrap; box-shadow: inset 0 -1px var(--ov-line); }
  .ov2-global .ov-leads-workspace .ov-leads-table tbody td::before { display: none; }
}
.ov-sftp-workspace textarea { padding: 8px 10px; }
.ov-tn .ov-tn-summary.ov-leads-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--tn-gap); border-radius: var(--ov-radius-lg); background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); }
.ov-tn .ov-tn-summary.ov-leads-four .ov-kpi:nth-child(n+5) { box-shadow: inset 0 1px var(--ov-line); }
.ov-tn .ov-tn-summary.ov-leads-four .ov-kpi:nth-child(5)::before { display: none; }
@media (max-width: 640px) { .ov-tn .ov-tn-summary.ov-leads-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ov-tn .ov-tn-summary.ov-leads-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ov-tn .ov-tn-summary.ov-leads-six .ov-kpi:nth-child(6) { box-shadow: none; }
.ov-tn .ov-tn-summary.ov-leads-six .ov-kpi:nth-child(6)::before { display: block; }
@media (max-width: 1100px) { .ov-tn .ov-tn-summary.ov-leads-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-tn .ov-tn-summary.ov-leads-six .ov-kpi:nth-child(n+4) { box-shadow: inset 0 1px var(--ov-line); } }
@media (max-width: 640px) { .ov-tn .ov-tn-summary.ov-leads-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-tn .ov-tn-summary.ov-leads-six .ov-kpi:nth-child(n+3) { box-shadow: inset 0 1px var(--ov-line); } }
@media (max-width: 640px) { .ov-tn .ov-leads-strip .ov-kpi-value, .ov-tn .ov-leads-strip .ov-kpi:first-child .ov-kpi-value { font-size: 18px; } }
/* ==== 2026-09-24 design pass: MONEY ==== */
/* AR / AP / AR - Leads / Calls weekly / Trends sit on the approved Traffic
   log language (.ov-tl + traffic-billing.css); the Command Center on the
   Traffic dashboard one (.ov-tn). Scoped to .ov-mp / .ov-mp-cc (money pages). */
.ov-mp { --tn-gap: 16px; }
.ov-mp .ov-feedback { margin: 0 0 14px; }
.ov-mp .ov-mp-section { margin-top: 16px; }
.ov-mp .grid2 { gap: 0 16px; }
.ov-mp .grid2 > .ov-mp-section { min-width: 0; }
.ov-mp .grid2 .ov-crm-table { min-width: 0; }
/* row popovers open in place: an absolute box inside a scrolled table would
   be cut off by the table's own scroll box */
.ov-mp .ov-crm-table .ov-bill-popbody {
  position: static; width: 280px; max-height: none; margin-top: 6px;
  box-shadow: none; white-space: normal;
}
.ov-mp .ov-bill-popbody form { display: grid; gap: 8px; margin: 0; }
.ov-mp .ov-bill-popbody form + form,
.ov-mp .ov-bill-popbody form + a,
.ov-mp .ov-bill-popbody a + form { padding-top: 10px; border-top: 1px solid var(--ov-line); }
.ov-mp .ov-bill-popbody button, .ov-mp .ov-bill-popbody > a { justify-self: start; }
.ov-mp .ov-bill-rowact { align-items: center; flex-wrap: wrap; }
.ov-mp .ov-bill-rowact select,
.ov-mp .ov-bill-rowact input {
  height: 32px; padding: 0 8px; border: 1px solid var(--ov-control-line);
  border-radius: var(--ov-radius-sm); background: var(--ov-surface); color: var(--ov-ink);
  font: inherit; font-size: 13px;
}
.ov-mp .ov-bill-rowact input[type="number"] { width: 96px; }
.ov-mp form.ov-bill-rowact { flex-wrap: nowrap; }
.ov-mp .ov-bill-rowact select { width: auto; min-width: 120px; }
.ov-mp .ov-crm-table td > .ov-crm-status + .ov-crm-status,
.ov-mp .ov-crm-table td > .ov-tl-sub + .ov-crm-status { margin-top: 4px; }
.ov-mp .ov-crm-table td .pos { color: var(--ov-positive); }
.ov-mp .ov-crm-table td .neg, .ov-mp .ov-crm-table td.neg { color: var(--ov-negative); }
.ov-mp .ov-kpi-value.neg { color: var(--ov-negative); }
.ov-mp .ov-kpi .ov-kpi-context { margin-top: 6px; }
.ov-mp-list { margin: 0; padding: 12px 16px 14px 34px; display: grid; gap: 6px; color: var(--ov-ink-2); font-size: 13.5px; line-height: 1.45; }
.ov-mp .ov-mp-flat { border: 0; border-radius: 0; margin: 0; box-shadow: inset 0 -1px var(--ov-line); }
.ov-mp-flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--ov-line); }
.ov-mp .ov-mp-inset { margin: 12px 14px 14px; }
.ov-mp-bar-range { display: flex; align-items: flex-end; min-width: 200px; }
.ov-mp-links a { color: var(--ov-accent-ink); }

/* Command Center */
.ov-mp-cc .ov-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
.ov-mp-range { flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; max-width: 100%; }
.ov-mp-range .ov-preset-row { max-width: 100%; }
.ov-mp-range-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ov-mp-cc .ov-tn-popbody .ov-mp-check { display: flex; align-items: center; gap: 8px; color: var(--ov-ink); font-size: 13.5px; }
.ov-mp-cc .ov-tn-popbody .ov-mp-check input { width: 16px; height: 16px; min-height: 0; padding: 0; }
.ov-mp-chart { padding: 14px 18px 16px; }
.ov-mp-cc .ov-tn-plot .ov-chart { padding: 0; min-width: 0; }
.ov-mp-yaxes { display: grid; min-width: 0; }
.ov-mp-yaxes .ov-tn-yaxis { grid-area: 1 / 1; padding: 8px 0; }
.ov-mp-yaxes [data-cc-axis="revenue"] { display: none; }
.ov-mp-cc:has([data-chart-metric="revenue"].on) .ov-mp-yaxes [data-cc-axis="revenue"] { display: flex; }
.ov-mp-cc:has([data-chart-metric="revenue"].on) .ov-mp-yaxes [data-cc-axis="profit"] { display: none; }
/* bars at >= 3:1 against the card in both themes (chart-2 is 3.2:1 on white,
   5.7:1 on the dark raised plane); the open day in ink so it reads apart */
.ov-mp-cc .ov-chart-bar { fill: var(--ov-chart-2); }
.ov-mp-cc .ov-chart-bar-last { fill: var(--ov-ink); }
.ov-mp-cc .ov-chart-bar-neg { fill: var(--ov-negative); opacity: 1; }
.ov-mp-cc .ov-chart-bar-hot { fill: var(--ov-accent-hover); }
.ov-mp-cc .ov-crm-table td.r, .ov-mp-cc .ov-crm-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.ov-mp-cc .ov-crm-table tfoot td { font-weight: 650; color: var(--ov-ink); background: var(--ov-surface); box-shadow: inset 0 1px var(--ov-line-strong); }
.ov-mp-cc .ov-crm-table tfoot td.neg { color: var(--ov-negative); }
.ov-mp-cc .ov-mp-data { margin: 0 0 var(--tn-gap); border-radius: var(--ov-radius-lg); background: var(--ov-raised); box-shadow: var(--ov-plane-shadow); }
.ov-mp-cc .ov-mp-data .ov-kpi .ov-kpi-value { font-size: 22px; }
.ov-mp-cc .ov-mp-data .ov-kpi-label a { color: inherit; }
@media (max-width: 780px) {
  .ov-mp-cc .ov-heading-actions { justify-content: flex-start; width: 100%; }
  .ov-mp-range { justify-content: flex-start; width: 100%; }
  .ov-mp .ov-crm-table .ov-bill-popbody { width: min(280px, calc(100vw - 64px)); }
}
/* ==== 2026-09-24 design pass: CALLS ==== */
/* Calls pages in the Traffic list language: the few layout pieces the
   ov-tn reference does not already carry. Tokens only, both themes. */
.ov-calls-search, .ov-calls-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ov-calls-toolbar-end .ov-tn-search { margin: 0; }
.ov-calls-mgr { margin: 0; }
.ov-calls-mgr .ov-tn-field { flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; }
.ov-tn .ov-tn-toolbar.ov-calls-period { margin: 0 0 var(--tn-gap); padding: 0; border-bottom: 0; }
.ov-calls-period .range { margin: 0; }
.ov-calls-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.ov-calls-foot > span:last-child { margin-left: auto; }
.ov-calls-grow { flex: 1 1 240px; }
.ov-calls-reason { max-width: 240px; overflow-wrap: anywhere; }
.ov-calls-assign form.assign, .ov-calls-offermeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ov2-global .ov-calls .ov-calls-assign form.assign :is(select, input, button),
.ov2-global .ov-calls .ov-calls-offermeta :is(select, input, button) { width: auto; min-height: 34px; }
.ov2-global .ov-calls .ov-calls-assign select { min-width: 150px; max-width: 220px; }
.ov2-global .ov-calls .ov-calls-assign input[type="text"] { width: 160px; }
.ov2-global .ov-calls .ov-calls-offermeta input { width: 130px; }
.ov-calls-childgroup { margin: 0 0 8px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); overflow: hidden; }
.ov-calls-childgroup > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; color: var(--ov-ink-2); font-size: 13.5px; }
.ov-calls-childgroup[open] > summary { border-bottom: 1px solid var(--ov-line); background: var(--ov-sunken); }
.ov-calls-list { margin: 0; padding: 14px 18px 14px 36px; }
.ov-calls-list li + li { margin-top: 6px; }
.ov-calls-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tn-gap); align-items: start; }
.ov-calls-bars > .ov-tn-card { margin-bottom: var(--tn-gap); }
.ov-calls-dash-axis { display: flex; justify-content: space-between; }
.ov-calls-dash-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-calls-caption { padding: 12px 18px 8px; caption-side: top; color: var(--ov-ink-2); font-size: 13px; font-weight: 650; text-align: left; }
.ov-calls-dash .ov-tn-foot .pos { color: var(--ov-positive); }
.ov-calls-dash .ov-heading-actions .range { margin: 0; }
.ov-calls-alerts .ov-heading-actions .ov-tn-chips { justify-content: flex-end; }
/* QA: the period chips, dates and caller search share one bar above the
   filters; the status chip beside the title wraps instead of clipping. */
.ov-qa-workspace .ov-title-line { flex-wrap: wrap; row-gap: 8px; }
.ov-calls-qabar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ov-qa-tools .ov-tn-searchbox { display: flex; gap: 0; }
.ov-qa-tools .ov-qa-range { margin: 0; }
.ov-qa-exports { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-qa-plane-heading h2 .ov-crm-muted { margin-left: 6px; font: 540 14px/1 var(--ov-font-text); letter-spacing: 0; }
.ov-qa-diff h4 { margin: 0 0 8px; color: var(--ov-ink-2); font: 650 12.5px/1.3 var(--ov-font-text); }
/* The admin panel is a plane like its neighbours: no warning outline. */
.ov2-global .ov-qa-chat-workspace .ov-qa-admin { box-shadow: var(--ov-plane-shadow); }
.ov-calls .ov-crm-table th.r { text-align: right; }
.ov-calls .ov-crm-table td.ov-calls-nowrap { white-space: nowrap; }
/* Tiles: the rows sit on the tile's floor whether or not it has a
   sparkline or a delta chip, so the five tiles line up. */
.ov-calls .ov-calls-strip .ov-tn-tilehead { min-height: 24px; }
.ov-calls .ov-calls-strip .ov-tn-rows { margin-top: auto; padding-top: 10px; }
.ov-calls .ov-calls-strip .spark { height: 38px; margin-top: 10px; }
@media (min-width: 641px) {
  .ov-qa-presets-workspace .ov-qa-kpi-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1.2fr) 124px 72px 34px; }
  .ov-qa-presets-workspace .ov-qa-kpi-description { grid-column: 2 / -2; }
}
@media (max-width: 1599px) {
  .ov-calls-bars { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .ov-calls-search, .ov-calls-toolbar-end, .ov-calls-toolbar-end .ov-tn-search, .ov-calls-mgr { width: 100%; }
  .ov-calls-mgr .ov-tn-field { flex-direction: column; align-items: stretch; }
  .ov-calls-foot > span:last-child { margin-left: 0; }
  .ov-calls-alerts .ov-heading-actions .ov-tn-chips { justify-content: flex-start; }
}
/* ==== 2026-09-24 design pass: ADMIN ==== */
/* Accounts: the account page and its IO book carry 2 to 6 KPI tiles, so the
   affiliate strip's fixed six columns would leave empty cells; the tiles
   share the row instead (two per row on a phone, as the strip does). */
.ov-aff-strip.ov-strip-fit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 640px) { .ov-aff-strip.ov-strip-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ==== 2026-09-24 design pass: CRM ==== */
/* Contacts list (CRM-06/07/08): the filter selects and the bulk action share
   one compact toolbar row under the stage chips; names stay on one line. */
.ov2-global .ov-crm-workspace .ov-crm-listbar :is(select, input:not([type="hidden"])) { min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; }
.ov2-global .ov-crm-workspace .ov-crm-listbar .ov-crm-inline-form > :is(select, input:not([type="hidden"])) { flex: 0 1 170px; }
.ov2-global .ov-crm-workspace .ov-crm-listbar [hidden] { display: none; }
.ov-crm-listbar .ov-crm-inline-form { align-items: center; gap: 8px; }
.ov-crm-listbar > .ov-crm-inline-form:first-child { flex: 1 1 auto; }
.ov-crm-namecell { white-space: nowrap; }
.ov-crm-namecell > .ov-crm-status { margin-left: 6px; }
/* Pipeline (CRM-11): six columns fit the 1440 working plane. */
.ov-crm-workspace .ov-crm-board { grid-template-columns: repeat(6, minmax(160px, 1fr)); }
/* Prospector credits (CRM-18): the bar under a tile's number. */
.ov-crm-kpis .ov-crm-camp-progress { margin-top: 8px; }
/* New campaign (CRM-12/13): inputs keep their own height beside the tag
   list; tags are checkboxes; radios sit inline with their labels. */
.ov-crm-camp-grid .ov-crm-fields { align-items: start; }
.ov-crm-camp-tags { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.ov-crm-camp-tags legend { margin: 0 0 2px; padding: 0; color: var(--ov-ink-3); font: 580 12.5px/1.25 var(--ov-font-text); }
/* .ov-dist label (grid) outranked these two, stacking every box over its
   words - the campaign radios, the tag boxes, Automation's wide-scope
   confirm (CRM-28) and Affiliate setup's send-invite row. */
.ov-dist label.ov-crm-check { display: inline-flex; }
.ov-dist label.ov-crm-checkrow { display: flex; }
.ov2-global .ov-crm-workspace .ov-crm-check input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--ov-accent); }
/* Traffic regressions (CRM-25/26): the add button keeps its distance from
   the plane below; Affiliate setup's row action stays in view. */
.ov-tn .ov-crm-newpanel { margin-bottom: var(--tn-gap); }
.ov2-global .ov-crm-workspace .ov-tn-stickyact :is(th, td).ov-tn-rowact { position: sticky; right: 0; z-index: 1; background: linear-gradient(var(--ov-raised), var(--ov-raised)), var(--ov-canvas); box-shadow: inset 1px 0 var(--ov-line); }
.ov2-global .ov-crm-workspace .ov-tn-stickyact th.ov-tn-rowact { background: linear-gradient(var(--ov-surface), var(--ov-surface)), var(--ov-canvas); box-shadow: inset 1px 0 var(--ov-line), inset 0 -1px var(--ov-line); }
@media (max-width: 640px) {
  .ov2-global .ov-crm-workspace .ov-crm-listbar .ov-crm-inline-form > :is(select, input:not([type="hidden"])) { flex: 1 1 140px; }
}
/* ==== 2026-09-24 auth pages plain ==== */
/* Sign-in, 2FA, activation and every public sign-up page (login,
   twofa_check, onboard, dist_signup, signup_traffic, terms_traffic,
   welcome) on the console's calm language - Kamil, 2026-09-24: "jak
   pozbyliśmy się tych niebieskich akcentów i animacji - to zróbmy też to
   samo z loginami i sign upami". The canvas token in both themes, one
   surface card on a hairline, the 499 Group wordmark, the console's field
   and button recipe, royal blue only on .ov-auth-primary. No shader, no
   aurora, no glass, no glow, no entrance or ambient motion. body.ov-auth
   carries the element rules so they outrank the legacy html.dark button
   skin (0,1,2). */
body.ov-auth { min-height: 100vh; margin: 0; background: var(--ov-canvas); color: var(--ov-ink);
  font: 400 14.5px/1.5 var(--ov-font-text); letter-spacing: 0; -webkit-font-smoothing: antialiased; animation: none; }
.ov-auth [hidden] { display: none !important; }
.ov-auth .ov-auth-wrap { flex: none; width: 100%; max-width: 420px; margin: 0 auto; padding: 64px 16px 48px; }
.ov-auth .ov-auth-wrap.is-wide { max-width: 620px; }
.ov-auth-brand { display: flex; justify-content: center; margin: 0 0 24px; }
.ov-auth-logo { display: block; width: auto; height: 30px; }
.ov-auth-logo.ov-logo-dark { display: none; }
:root[data-theme="dark"] .ov-auth-logo.ov-logo-light { display: none; }
:root[data-theme="dark"] .ov-auth-logo.ov-logo-dark { display: block; }
.ov-auth-logo.is-partner { height: auto; max-height: 56px; max-width: 200px; border-radius: var(--ov-radius-sm); }
.ov-auth-brandname { color: var(--ov-ink); font: 650 18px/1.2 var(--ov-font-display); }
.ov-auth-card { min-width: 0; padding: 28px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md);
  background: var(--ov-surface); color: var(--ov-ink); }
.ov-auth-card h1 { margin: 0 0 4px; color: var(--ov-ink); font: 650 20px/1.3 var(--ov-font-display); letter-spacing: -.01em; }
.ov-auth-card h2 { margin: 24px 0 0; color: var(--ov-ink); font: 650 14.5px/1.35 var(--ov-font-text); letter-spacing: 0; }
.ov-auth-card p { margin: 8px 0 0; }
.ov-auth-card h1 + p { margin-top: 4px; }
.ov-auth-card b { font-weight: 620; }
.ov-auth-card .sub { color: var(--ov-ink-3); font-size: 13.5px; }
.ov-auth-card a { color: var(--ov-ink); text-decoration: underline; text-decoration-color: var(--ov-line-strong); text-underline-offset: 2px; }
.ov-auth-card a:hover { text-decoration-color: currentColor; }
.ov-auth-card .err { margin: 16px 0 0; padding: 10px 12px; border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm);
  background: var(--ov-negative-soft); color: var(--ov-ink); font-size: 13.5px; }
.ov-auth-card form { margin: 16px 0 0; }
.ov-auth-note { color: var(--ov-ink-3); font-size: 13px; }
.ov-auth-card .ov-auth-note { margin-top: 14px; }
.ov-auth-card .ov-auth-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ov-line); color: var(--ov-ink-2); font-size: 13.5px; }
.ov-auth-card .ov-auth-chip { display: inline-block; margin: 16px 0 0; padding: 5px 10px; border: 1px solid var(--ov-line);
  border-radius: 999px; background: var(--ov-sunken); color: var(--ov-ink-2); font-size: 13px; }

/* Fields: the console's ov-crm recipe (label over control, 40px, 9px radius). */
.ov-auth-card label { display: block; margin: 14px 0 0; color: var(--ov-ink-3); font: 580 12.5px/1.3 var(--ov-font-text); }
.ov-auth-card label > :is(input, select, textarea) { display: block; margin-top: 6px; }
.ov-auth-card label .sub, .ov-auth-card .lockhint { color: var(--ov-ink-3); font: 400 12.5px/1.4 var(--ov-font-text); }
.ov-auth-card .lockhint { display: block; margin-top: 4px; }
.ov-auth-card label + .otp-row { margin-top: 6px; }
body.ov-auth input, body.ov-auth select, body.ov-auth textarea { width: 100%; min-width: 0; min-height: 40px; margin: 0;
  padding: 8px 10px; border: 1px solid var(--ov-control-line); border-radius: 9px; outline: 0;
  background: var(--ov-raised); color: var(--ov-ink); font: 480 14px/1.35 var(--ov-font-text); box-shadow: none; }
body.ov-auth textarea { resize: vertical; }
body.ov-auth input:hover:not(:disabled):not([readonly]), body.ov-auth select:hover, body.ov-auth textarea:hover { border-color: var(--ov-line-strong); }
body.ov-auth input:focus, body.ov-auth select:focus, body.ov-auth textarea:focus {
  border-color: var(--ov-focus); outline: 0; box-shadow: 0 0 0 3px var(--ov-focus-ring); }
body.ov-auth input::placeholder, body.ov-auth textarea::placeholder { color: var(--ov-ink-3); opacity: 1; }
body.ov-auth input[type="checkbox"], body.ov-auth input[type="radio"] { width: auto; min-height: 0; padding: 0; margin: 2px 0 0;
  flex: none; accent-color: var(--ov-ink); box-shadow: none; }
body.ov-auth input[type="file"] { min-height: 0; padding: 6px; font-size: 13px; }
/* the invited email is the login and is locked - it must look locked */
body.ov-auth input.locked { border-style: dashed; background: var(--ov-sunken); color: var(--ov-ink-2); cursor: not-allowed; }
.ov-auth .obgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.ov-auth .obgrid > label { min-width: 0; }
.ov-auth .obrefhead { margin: 14px 0 2px; font-size: 13.5px; color: var(--ov-ink); }

/* Buttons: neutral by default; .ov-auth-primary is the one royal blue action. */
body.ov-auth button, body.ov-auth .ov-auth-primary { display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 40px; margin: 16px 0 0; padding: 8px 14px; border: 1px solid var(--ov-control-line);
  border-radius: 9px; background: var(--ov-raised); color: var(--ov-ink-2); font: 630 14px/1.2 var(--ov-font-text);
  text-align: center; text-decoration: none; cursor: pointer; box-shadow: none; transform: none; transition: none; }
body.ov-auth button:hover { border-color: var(--ov-line-strong); background: var(--ov-sunken); color: var(--ov-ink); }
body.ov-auth .ov-auth-primary, body.ov-auth button.ov-auth-primary { border-color: var(--ov-primary); background: var(--ov-primary); color: var(--ov-primary-ink); }
body.ov-auth .ov-auth-primary:hover, body.ov-auth button.ov-auth-primary:hover { border-color: var(--ov-primary-hover); background: var(--ov-primary-hover); color: var(--ov-primary-ink); }
body.ov-auth button:focus-visible, body.ov-auth .ov-auth-primary:focus-visible, .ov-auth-card a:focus-visible, .ov-auth-card summary:focus-visible {
  outline: 3px solid var(--ov-focus-ring); outline-offset: 2px; }
body.ov-auth button:disabled, body.ov-auth button.ov-auth-primary:disabled { border-style: dashed; border-color: var(--ov-control-line);
  background: transparent; color: var(--ov-ink-3); cursor: not-allowed; }

/* Owner SMS access: a quiet disclosure under the main action. */
.ov-auth-more { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--ov-line); }
.ov-auth-more summary { color: var(--ov-ink-2); font-size: 13.5px; cursor: pointer; }
.ov-auth-more form { margin-top: 4px; }

/* Six OTP cells (login-fx.js). Filling, focus and the verifying state are
   colour changes only - no pulse, no spinner, no lift. */
.ov-auth .otp-row { display: flex; gap: 8px; justify-content: space-between; }
body.ov-auth input.otp-cell { flex: 1 1 0; width: auto; max-width: 52px; height: 52px; padding: 0;
  text-align: center; font: 600 20px/1 var(--ov-font-mono); caret-color: var(--ov-ink); }
body.ov-auth input.otp-cell.filled { border-color: var(--ov-ink-3); }
.ov-auth .otp-form.is-loading .otp-cell { background: var(--ov-sunken); }
body.ov-auth .otp-form.is-loading button.ov-auth-primary:disabled { border-style: solid; border-color: var(--ov-primary);
  background: var(--ov-primary); color: var(--ov-primary-ink); cursor: progress; }

/* Sign-up specifics: pickers, product boxes, steps, terms. */
.ov-auth :is(.kindpick, .billpick) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.ov-auth .kindpick.doors3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ov-auth-card :is(.kindpick, .billpick) label, .ov-auth .kindpick .door { position: relative; display: block; margin: 0; padding: 12px;
  border: 1px solid var(--ov-line-strong); border-radius: var(--ov-radius-sm); background: var(--ov-raised);
  color: var(--ov-ink-3); font: 400 12.5px/1.4 var(--ov-font-text); text-align: left; text-decoration: none; cursor: pointer; }
.ov-auth :is(.kindpick, .billpick) b { display: block; margin-bottom: 2px; color: var(--ov-ink); font-size: 13.5px; }
.ov-auth :is(.kindpick, .billpick) span { display: block; color: var(--ov-ink-3); font-size: 12.5px; }
body.ov-auth :is(.kindpick, .billpick) input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.ov-auth-card :is(.kindpick, .billpick) label:has(input:checked), .ov-auth .kindpick .door.is-here { border-color: var(--ov-ink); box-shadow: inset 0 0 0 1px var(--ov-ink); }
.ov-auth-card :is(.kindpick, .billpick) label:has(input:focus-visible) { outline: 3px solid var(--ov-focus-ring); outline-offset: 2px; }
.ov-auth .deals, .ov-auth .chan { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 0; }
.ov-auth-card .deals label, .ov-auth-card .chan label, .ov-auth-card label.termsaccept, .ov-auth-card label.accept {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ov-ink); font: 400 13.5px/1.4 var(--ov-font-text); cursor: pointer; }
.ov-auth-card label.termsaccept, .ov-auth-card label.accept { margin-top: 12px; }
.ov-auth .obsteps { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 18px 0 4px; }
.ov-auth .obstep { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 74px; }
.ov-auth .obstep i { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--ov-line-strong);
  border-radius: 50%; background: var(--ov-raised); color: var(--ov-ink-3); font: 600 12.5px/1 var(--ov-font-text); font-style: normal; }
.ov-auth .obstep span { color: var(--ov-ink-3); font-size: 12px; text-align: center; }
.ov-auth .obstep.is-active i { border-color: var(--ov-ink); background: var(--ov-ink); color: var(--ov-canvas); }
.ov-auth .obstep.is-active span { color: var(--ov-ink); font-weight: 600; }
.ov-auth .obstep.is-done i { border-color: var(--ov-line); background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov-auth .obsteps > b { flex: 0 0 26px; height: 1px; margin-top: 13px; background: var(--ov-line-strong); }
.ov-auth .termsbox, .ov-auth .terms { max-height: 260px; overflow-y: auto; margin: 8px 0 0; padding: 12px 14px;
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-sm); background: var(--ov-sunken);
  color: var(--ov-ink-2); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; -webkit-overflow-scrolling: touch; }
.ov-auth .terms { max-height: 220px; }
.ov-auth-card .termsver { margin-top: 16px; }
.ov-auth .obsig { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; color: var(--ov-ink-2); font-size: 13.5px; }
body.ov-auth .obsig input { width: 96px; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
body.ov-auth .obsig input::placeholder { text-transform: none; letter-spacing: normal; }
.ov-auth .obsigmeta { color: var(--ov-ink-3); font-size: 12px; }
.ov-auth .cf-turnstile { margin-top: 18px; }

/* Terms dialog (onboard, dist_signup): a plain surface over a dim scrim. */
body.ov-auth button.tcbtn { justify-content: space-between; gap: 10px; margin-top: 8px; padding: 12px 14px;
  border-color: var(--ov-line-strong); border-radius: var(--ov-radius-sm); color: var(--ov-ink); font-weight: 600; font-size: 13.5px; text-align: left; }
.ov-auth .tcbtn small { display: block; margin-top: 3px; color: var(--ov-ink-3); font-weight: 400; font-size: 12px; }
.ov-auth .tcbtn .tcmark, .ov-auth .tcbtn .tcchev { flex: none; color: var(--ov-ink-3); font-size: 16px; }
body.ov-auth button.tcbtn.is-done { border-color: var(--ov-positive); }
.ov-auth .tcbtn.is-done .tcmark { color: var(--ov-positive); font-weight: 700; }
body.ov-auth button.tcbtn.is-missing { border-color: var(--ov-negative); }
.ov-auth .tcscrim { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(9, 9, 11, .5); }
.ov-auth .tcdlg { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(640px, 86vh); overflow: hidden;
  border: 1px solid var(--ov-line); border-radius: var(--ov-radius-md); background: var(--ov-surface); box-shadow: var(--ov-plane-shadow); }
.ov-auth .tchead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ov-line); }
.ov-auth .tchead h3 { margin: 0; color: var(--ov-ink); font: 650 15px/1.3 var(--ov-font-text); }
.ov-auth .tchead p { margin: 3px 0 0; color: var(--ov-ink-3); font-size: 12px; }
body.ov-auth button.tcclose { width: auto; min-height: 0; margin: 0; padding: 0 4px; border: 0; background: transparent; color: var(--ov-ink-3); font-size: 22px; line-height: 1; }
.ov-auth .tcbody { overflow-y: auto; padding: 18px 20px; color: var(--ov-ink-2); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; -webkit-overflow-scrolling: touch; }
.ov-auth .tcfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ov-line); background: var(--ov-sunken); }
.ov-auth .tcfoot .tchint { flex: 1 1 140px; margin: 0; color: var(--ov-ink-3); font-size: 12px; }
body.ov-auth .tcfoot button { width: auto; margin: 0; padding: 8px 16px; font-size: 13.5px; }

/* Activation steps (welcome.html). */
.ov-auth .step { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ov-line); }
.ov-auth .step:last-of-type { border-bottom: 0; }
.ov-auth .step > div { flex: 1; min-width: 0; }
.ov-auth .step b { display: block; margin-bottom: 3px; }
.ov-auth .step .sub { display: block; }
.ov-auth .snum { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--ov-line-strong); border-radius: 50%; background: var(--ov-raised); color: var(--ov-ink-3); font-size: 13px; font-weight: 650; }
.ov-auth .snum.now { border-color: var(--ov-ink); background: var(--ov-ink); color: var(--ov-canvas); }
.ov-auth .snum.done { border-color: var(--ov-line); background: var(--ov-positive-soft); color: var(--ov-positive); }
.ov-auth .step form { margin-top: 10px; }
.ov-auth .step button { width: auto; margin-top: 0; }
.ov-auth .ov-auth-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.ov-auth .ov-auth-upload input[type="file"] { flex: 1 1 200px; width: auto; }

@media (max-width: 560px) {
  .ov-auth .ov-auth-wrap { padding-top: 32px; }
  .ov-auth-card { padding: 22px 18px; }
  .ov-auth .obgrid, .ov-auth :is(.kindpick, .billpick), .ov-auth .kindpick.doors3 { grid-template-columns: minmax(0, 1fr); }
  .ov-auth .obstep { min-width: 0; flex: 1 1 0; }
  .ov-auth .obsteps > b { flex-basis: 12px; }
}

/* ==== 2026-09-24 partner page: FOUNDATION ==== */
/* One partner page (Kamil, "Jedna strona partnera"): _partner_head.html and
   _partner_tabs.html. The tab bar is the Traffic underline bar; a tab that
   opens the other half of the partner (entity <-> account) reads the same,
   with a quiet divider where the account tabs begin. A tab the viewer's
   access does not include is plain muted text. */
.ov-tn .ov-partner-tabs .ov-ptab-sep { margin-left: 10px; position: relative; }
.ov-tn .ov-partner-tabs .ov-ptab-sep::before { content: ""; position: absolute; left: -6px; top: 13px; bottom: 13px; width: 1px; background: var(--ov-line); }
/* Header polish (2026-09-24): plain --ov-ink-4 sat a hair off the live
   tabs' --ov-ink-3 (#6b6b75 vs #71717a), so a disabled account tab ("Not
   in Accounts", or no access) read as a live one. Faded, it reads as off. */
.ov-partner-tabs .ov-ptab-off { flex: 0 0 auto; min-height: 42px; padding: 12px 14px 11px; color: color-mix(in srgb, var(--ov-ink-4) 55%, transparent); font-size: 14px; font-weight: 590; white-space: nowrap; cursor: not-allowed; }
.ov-partner-head .ov-partner-div { text-decoration: none; }
.ov2-global .ov-legacy-main .ov-tn a.ov-partner-div { color: var(--ov-ink-2); }
.ov2-global .ov-legacy-main .ov-tn a.ov-partner-div:hover { color: var(--ov-ink); text-decoration: underline; text-underline-offset: 3px; }
.ov-partner-head .ov-partner-div.is-current { color: var(--ov-accent-ink); background: var(--ov-accent-soft); }
.ov-partner-head .ov-partner-div.is-current i { background: currentColor; }

/* ==== 2026-09-24 partner page: CALLS ==== */
/* /buyer/{name} and /source/{name} wear _partner_head / _partner_tabs. The
   publisher page left the legacy cards for the Traffic language: its two
   breakdowns sit two-up on a wide screen, the QA flags wrap as chips and
   the three action forms stack with room between them. */
@media (min-width: 1600px) {
  .ov-calls-bars.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ov-calls .ov-calls-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.ov-calls .ov-calls-srcact > form + form { padding-top: 14px; border-top: 1px solid var(--ov-line); }
.ov-calls .ov-calls-pause form { display: inline; margin-left: 8px; }

/* Report a bug dialog (2026-09-25) */
.ov-bug { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); overflow: auto;
  width: min(520px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--ov-radius-md);
  background: var(--panel); color: var(--text, inherit); padding: 20px; z-index: 110; }
.ov-bug::backdrop { background: var(--scrim, rgba(11, 24, 48, .35)); }
.ov-bug form { display: grid; gap: 12px; }
.ov-bug input, .ov-bug textarea, .ov-bug select { box-sizing: border-box; width: 100%; max-width: 100%; }
.ov-bug h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--text, inherit); }
.ov-bug label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.ov-bug input[type=text], .ov-bug input:not([type]), .ov-bug textarea, .ov-bug select { font: inherit; }
.ov-bug-actions { display: flex; gap: 8px; align-items: center; }
.ov-bug-msg { margin: 0; min-height: 1.2em; }

/* Account Documents upload row (2026-09-25): file, title, type and the
   button on one wrapping line; stacks on a phone. */
.ov-doc-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.ov-doc-upload label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ov-ink-3); }
.ov-doc-upload input[type="text"], .ov-doc-upload select { min-width: 180px; }
@media (max-width: 640px) {
  .ov-doc-upload { display: grid; }
  .ov-doc-upload input[type="text"], .ov-doc-upload select { min-width: 0; width: 100%; }
}