/* BaseOne SDR console: shared design system.
   Layout: fixed sidebar (logo + nav) | main column (page header, toolbar, active-filter chips, table)
   with right-hand drawers for filters and record detail. Dark by default, BaseOne brand tokens. */

:root{
  /* surfaces (brand ink scale) */
  --bg:#0E1218; --surface:#10151d; --raised:#141b26; --raised-2:#1a2331; --hover:#1f2a3a;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  /* text */
  --text:#e9edf3; --body:#aeb6c2; --dim:#7c8594;
  /* brand accents */
  --sky:#448AFF; --blue:#1565C0; --teal:#2bbfa4; --lime:#7CB342; --yellow:#FFB200; --orange:#FB8E00;
  --red:#D12421; --pink:#D81B60; --ice:#8fc0ff; --grey:#5d6676;
  /* status semantics */
  --ok:#2bbfa4; --warn:#FFB200; --bad:#e2445c; --info:#448AFF;
  /* type */
  --display:"Plus Jakarta Sans","Arboria",-apple-system,"Segoe UI",sans-serif;
  --text-font:"Arboria","Poppins",-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* sizes */
  --sidebar:264px; --radius:8px; --radius-sm:5px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--text-font);font-weight:350;font-size:14px;line-height:1.45}
a{color:var(--ice)}
a:hover{color:#fff}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--dim)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);height:100%}
.sidebar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;gap:4px;
  position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px}
.sidebar .brand img{height:26px;width:auto;display:block}
.nav a{white-space:nowrap}
.nav-toggle{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--muted);width:28px;height:28px;
  display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.nav-toggle:hover{color:var(--text);border-color:var(--line-strong)}
.nav-burger{display:none;margin-left:12px;background:var(--raised);border:1px solid var(--line-strong);border-radius:8px;color:var(--text);
  font:inherit;font-size:14px;padding:6px 12px;min-height:36px;cursor:pointer}
.nav-toggle svg{width:16px;height:16px;transition:transform .15s}
/* collapsed: icons only */
:root.nav-collapsed{--sidebar:64px}
.nav-collapsed .sidebar{padding:18px 8px;overflow-x:hidden}
.nav-collapsed .sidebar .brand{padding:2px 0 14px;justify-content:center}
.nav-collapsed .sidebar .brand img,.nav-collapsed .sidebar .nav-label,.nav-collapsed .sidebar .camp-switch,
.nav-collapsed .sidebar .run-status,.nav-collapsed .sidebar .foot,.nav-collapsed .nav a .lbl,.nav-collapsed .nav a .count,
.nav-collapsed .nav a.soon::after{display:none}
.nav-collapsed .nav-toggle{margin:0}
.nav-collapsed .nav-toggle svg{transform:rotate(180deg)}
.nav-collapsed .nav a{justify-content:center;padding:9px 0}
.nav-collapsed .nav a .ic{width:19px;height:19px}
.nav-collapsed .sidebar .nav + .nav{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.nav-collapsed .run-btn{font-size:0;padding:8px 0;margin:6px 0}
.nav-collapsed .run-btn::before{content:"\25B6";font-size:12px}
.sidebar .brand span{font-family:var(--display);font-weight:700;color:var(--text);letter-spacing:-.02em;font-size:15px}
.sidebar .brand .env-badge{font:700 11px/1 var(--mono, monospace);letter-spacing:.08em;color:#1a1200;background:#ffb200;padding:4px 7px;border-radius:5px}
.nav-collapsed .sidebar .brand .env-badge{display:none}
.nav-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--body);text-decoration:none;font-size:14px}
.nav a:hover{background:var(--raised);color:var(--text)}
.nav a[aria-current=page]{background:var(--raised-2);color:var(--text);box-shadow:inset 3px 0 0 var(--sky)}
.nav a .count{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.nav a[hidden],.nav-label[hidden]{display:none}
.nav .dot{width:8px;height:8px;border-radius:2px;background:var(--c,var(--grey));flex:none}
.nav .ic{width:17px;height:17px;flex:none;color:var(--c,var(--grey));opacity:.9}
.nav a:hover .ic,.nav a[aria-current=page] .ic{opacity:1}
.sidebar .foot{margin-top:auto;font-size:12px;color:var(--dim);padding:10px}

.main{display:flex;flex-direction:column;min-width:0;height:100vh}
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:20px 24px 10px}
.page-head h1{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.022em;color:var(--text);font-size:22px}
.page-head .sub{color:var(--dim);font-size:13px}
.page-head .spacer{flex:1}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 24px 10px}
.tabs{display:flex;gap:2px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:3px}
.tab{border:0;background:transparent;padding:6px 12px;border-radius:6px;color:var(--dim);cursor:pointer;font-size:13px}
.tab:hover{color:var(--text)}
.tab[aria-pressed=true]{background:var(--raised-2);color:var(--text);font-weight:500}
.tab .n{margin-left:6px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
a.btn,a.btn:hover{text-decoration:none}           /* a link that looks like a button isn't underlined */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--raised);color:var(--text);
  border-radius:6px;padding:6px 11px;cursor:pointer;font-size:13px;white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--sky);border-color:var(--sky);color:#fff}
.btn.primary:hover{background:#5b98ff}
.btn.ghost{background:transparent}
.btn .badge{background:var(--sky);color:#fff;border-radius:99px;font-size:11px;padding:0 6px;font-family:var(--mono)}
.input,select.input{background:var(--raised);border:1px solid var(--line-strong);border-radius:6px;padding:6px 10px;color:var(--text)}
.input::placeholder{color:var(--dim)}
.search{min-width:240px;flex:0 1 320px}
.ctl{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12.5px}

/* active filter chips */
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 24px 10px;min-height:0}
.chips:empty{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;background:rgba(68,138,255,.14);border:1px solid rgba(68,138,255,.35);
  color:var(--ice);border-radius:99px;padding:3px 4px 3px 10px;font-size:12.5px}
.fchip b{color:var(--text);font-weight:500}
.fchip button{border:0;background:transparent;color:var(--ice);cursor:pointer;border-radius:99px;width:20px;height:20px;line-height:1}
.fchip button:hover{background:rgba(68,138,255,.3);color:#fff}
.chips .clear{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:12.5px;text-decoration:underline}

/* ---------- table area ---------- */
.table-wrap{flex:1;min-height:0;padding:0 24px 20px}
.table-card{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

/* pills, chips, tags */
.pill{display:inline-block;min-width:64px;text-align:center;color:#fff;font-weight:600;font-size:12px;padding:3px 8px;border-radius:4px;
  white-space:nowrap;background:var(--c,var(--grey));font-family:var(--display)}
.pill.soft{background:color-mix(in srgb,var(--c,var(--grey)) 22%,transparent);color:color-mix(in srgb,var(--c,var(--grey)) 70%,#fff);min-width:0}
.tag{display:inline-block;background:var(--raised-2);color:var(--body);border-radius:10px;padding:1px 8px;margin:1px 3px 1px 0;font-size:11.5px;white-space:nowrap}
.tag.warn{background:rgba(255,178,0,.15);color:#ffd27a}
.tier{display:inline-grid;place-items:center;width:26px;height:22px;border-radius:5px;font-family:var(--display);font-weight:700;font-size:12.5px;color:#0E1218;background:var(--c)}
.person a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--ice)}
.person .meta{display:block;color:var(--dim);font-size:11.5px;line-height:1.3}

/* ---------- drawers ---------- */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--line-strong);
  box-shadow:-16px 0 40px rgba(0,0,0,.45);transform:translateX(105%);transition:transform .2s ease;display:flex;flex-direction:column;z-index:20}
.drawer.wide{width:min(620px,100%)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer header h2{margin:0;font-family:var(--display);font-size:16px;color:var(--text);letter-spacing:-.01em}
.drawer header .x{margin-left:auto}
.drawer .body{flex:1;overflow:auto;padding:14px 18px 24px;display:flex;flex-direction:column;gap:16px}
.drawer footer{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:15}
.scrim.on{opacity:1;pointer-events:auto}

/* filter panel sections */
.fsec{border:1px solid var(--line);border-radius:var(--radius);background:var(--raised)}
.fsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 12px;color:var(--text);font-weight:500}
.fsec>summary::-webkit-details-marker{display:none}
.fsec>summary::after{content:"▾";margin-left:auto;color:var(--dim);transition:transform .15s}
.fsec:not([open])>summary::after{transform:rotate(-90deg)}
.fsec>summary .on{background:var(--sky);color:#fff;border-radius:99px;font-size:11px;padding:0 7px;font-family:var(--mono)}
.fsec .inner{padding:4px 12px 12px;display:flex;flex-direction:column;gap:4px}
.opt{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:13px}
.opt:hover{background:var(--hover)}
.opt input{accent-color:var(--sky)}
.opt .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--body)}
.opt .n{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.opt.zero .lbl{color:var(--dim)}
.opt-filter{margin-bottom:4px}
.range{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.range .input{width:100%}
.toggles{display:flex;flex-direction:column;gap:2px}
.rule{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.2fr) auto;gap:6px;align-items:center}
.rule .input{width:100%;min-width:0}
.rule-match{display:flex;gap:6px;align-items:center;color:var(--dim);font-size:12.5px}

/* detail panel content */
.kv{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 12px;font-size:13px}
.kv dt{color:var(--dim)}
.kv dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
.section-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0}
.advert{white-space:pre-wrap;line-height:1.55;color:var(--body);background:var(--raised);border-radius:var(--radius);padding:12px 14px;font-size:13px}
.list{display:flex;flex-direction:column;gap:6px}
.list .item{background:var(--raised);border-radius:6px;padding:8px 10px;font-size:13px}
.actions{display:flex;gap:6px;flex-wrap:wrap}
textarea.input{width:100%;min-height:64px;resize:vertical}

/* popover menus (columns, views) */
.menu{position:relative}
.menu .pop{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;max-height:60vh;overflow:auto;background:var(--raised);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.5);padding:8px;z-index:30;display:none}
.menu.open .pop{display:block}
.pop .row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;cursor:pointer;font-size:13px}
.pop .row:hover{background:var(--hover)}
.pop .row .del{margin-left:auto;border:0;background:transparent;color:var(--dim);cursor:pointer}
.pop .row .del:hover{color:var(--bad)}
.pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.pop .save{display:flex;gap:6px;padding:4px}
.pop .save .input{flex:1;min-width:0}

#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--raised-2);border:1px solid var(--line-strong);color:var(--text);
  padding:9px 16px;border-radius:6px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:40}
#toast.show{opacity:1}

/* ---------- Tabulator, dark brand ---------- */
.tabulator{background:transparent;border:0;font-size:13px;color:var(--body)}
.tabulator .tabulator-header{background:var(--surface);border-bottom:1px solid var(--line-strong);color:var(--dim)}
.tabulator .tabulator-header .tabulator-col{background:var(--surface);border-right:1px solid var(--line)}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover{background:var(--raised)}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom-color:var(--dim)}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom-color:var(--sky)}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-top-color:var(--sky)}
.tabulator .tabulator-tableholder{background:var(--surface)}
.tabulator .tabulator-tableholder .tabulator-table{background:var(--surface);color:var(--body)}
.tabulator-row{background:var(--surface);border-bottom:1px solid var(--line);min-height:38px}
.tabulator-row.tabulator-row-even{background:#0f141c}
.tabulator-row.tabulator-selectable:hover,.tabulator-row:hover{background:var(--hover)!important}
.tabulator-row .tabulator-cell{border-right:0;padding:7px 10px;vertical-align:middle}
.tabulator-row.tabulator-group{background:var(--bg)!important;border-top:12px solid var(--bg);border-bottom:1px solid var(--line);color:var(--text);
  font-family:var(--display);font-weight:600;font-size:14px;padding:8px 10px}
.tabulator-row.tabulator-group span{color:var(--dim);font-weight:400;font-family:var(--text-font);font-size:12.5px;margin-left:8px}
.tabulator-row.tabulator-group .tabulator-group-toggle .tabulator-arrow{border-left-color:var(--dim)}
.tabulator .tabulator-placeholder .tabulator-placeholder-contents{color:var(--dim);font-family:var(--display);font-weight:500}
.tabulator .tabulator-footer{background:var(--surface);border-top:1px solid var(--line);color:var(--dim)}
.tabulator-edit-list{background:var(--raised);border:1px solid var(--line-strong);color:var(--text)}
.tabulator-edit-list .tabulator-edit-list-item{color:var(--text)}
.tabulator-edit-list .tabulator-edit-list-item:hover,.tabulator-edit-list .tabulator-edit-list-item.active{background:var(--sky);color:#fff}
.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid var(--sky);background:var(--raised)}
.tabulator-row .tabulator-cell.tabulator-editing input{background:var(--raised);color:var(--text)}
.grp-bar{display:inline-block;width:5px;height:16px;border-radius:3px;vertical-align:-2px;margin-right:9px;background:var(--c,var(--grey))}

@media (max-width:820px){
  /* phones: the menu is a row at the top that grows to fit (the frame grows with the page, so nothing squeezes it) */
  .shell{grid-template-columns:1fr;height:auto;min-height:100vh}
  .sidebar{height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
  .nav a{padding:8px 10px}
  .nav-burger{display:inline-flex;align-items:center}
  .sidebar .nav,.sidebar .nav-label{display:none}
  .nav-open .sidebar .nav{display:flex;width:100%}
  .nav-toggle{display:none}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px 12px}
  .sidebar .brand{padding:0 8px 0 0}
  .nav.account{margin-top:0;border-top:0;padding-top:0}
  .nav-label,.sidebar .foot{display:none}
  .nav{display:flex;gap:2px;flex-wrap:wrap}
  .main{height:auto;min-height:100vh}
  .page-head,.toolbar,.chips,.table-wrap{padding-left:16px;padding-right:16px}
  .table-card{height:70vh}
  .search{min-width:0;flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.drawer,.scrim,#toast{transition:none}}

/* ---------- engine: campaign switch, run now, live status ---------- */
.camp-switch{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.camp-switch .nav-label{padding:4px 6px 2px}
.camp-switch select{width:100%;font-size:13px}
.run-btn{margin:10px 4px 2px;justify-content:center}
.run-status{display:flex;gap:10px;align-items:flex-start;margin:6px 4px 0;padding:8px 10px;border-radius:6px;background:rgba(68,138,255,.12);
  border:1px solid rgba(68,138,255,.3);color:var(--text);text-decoration:none;font-size:12.5px;line-height:1.35}
.run-status[hidden]{display:none}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--sky);margin-top:4px;flex:none;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.small{font-size:12px}
.link-btn{border:0;background:transparent;color:var(--ice);cursor:pointer;font-size:11.5px;padding:0 4px;text-decoration:underline}
.field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--dim)}
.field .input{width:100%}
.field.inline{flex-direction:row;align-items:center;gap:8px}
section.fsec .fsec-h{display:flex;align-items:center;gap:6px;margin:0;padding:9px 12px 4px;color:var(--text);font-weight:500;font-size:13.5px}
section.fsec .fsec-h .link-btn:first-of-type{margin-left:auto}
section.fsec .fsec-b{padding:2px 8px 10px;display:flex;flex-direction:column;gap:2px}
.src-opt{align-items:flex-start;padding:6px 6px}
.src-opt input{margin-top:3px}
.src-opt.off b{color:var(--dim)}

/* ---------- pages without a table ---------- */
.page{flex:1;min-height:0;overflow:auto;padding:0 24px 32px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.card h2{margin:0;font-family:var(--display);font-size:16px;color:var(--text);letter-spacing:-.01em}
.card h2 a{color:inherit;text-decoration:none}
.card h2 a:hover{text-decoration:underline}
.card .owner{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.card p{margin:0;font-size:13px}
.card .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card .row.end{margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.stat{background:var(--raised);border-radius:6px;padding:8px 10px}
.stat b{display:block;font-family:var(--display);font-size:18px;color:var(--text);font-weight:700}
.stat span{font-size:11.5px;color:var(--dim)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,var(--grey))}

/* ---------- recipe editor ---------- */
.editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.editor .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.editor .side{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px}
.editor h3{margin:0;font-family:var(--display);font-size:15px;color:var(--text)}
.editor .help{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lane{border:1px solid var(--line);border-radius:var(--radius);background:var(--raised);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.lane-head{display:flex;gap:8px;align-items:center}
.lane-head .input{flex:1}
.tokens{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line-strong);border-radius:6px;padding:6px}
.token{display:inline-flex;align-items:center;gap:4px;background:var(--raised-2);color:var(--text);border-radius:99px;padding:2px 4px 2px 10px;font-size:12.5px}
.token button{border:0;background:transparent;color:var(--dim);cursor:pointer;border-radius:99px;width:18px;height:18px;line-height:1}
.token button:hover{color:var(--bad);background:var(--hover)}
@media (pointer:coarse){.token button{width:30px;height:30px;font-size:16px}}   /* easy to tap on a phone */
.tokens input{flex:1;min-width:140px;border:0;background:transparent;color:var(--text);padding:3px 4px;outline:none}
.tokens.neg .token{background:rgba(226,68,92,.16);color:#ffb3c0}
.srcrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--raised)}
.srcrow .how{grid-column:2;font-size:12px;color:var(--dim)}
.srcrow .opts{grid-column:2;display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--body)}
.srcrow.manual{opacity:.6}
.srcrow input[type=checkbox]{accent-color:var(--sky)}
table.plain{width:100%;border-collapse:collapse;font-size:13px}
table.plain th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-strong)}
table.plain td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.plain td .input{width:100%}
table.plain td.num .input{width:80px;text-align:right}
.explain{background:var(--raised);border-radius:var(--radius);padding:12px 14px;font-size:13px;line-height:1.6}
.explain ol{margin:6px 0 0;padding-left:20px}
.explain b{color:var(--text)}
.dirty{color:var(--warn)}

/* ---------- refills ---------- */
.steps{display:flex;flex-direction:column;gap:6px}
.step{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;background:var(--raised);border-radius:6px;padding:8px 10px;font-size:13px}
.step .ico{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#0E1218;background:var(--c,var(--grey));font-weight:700}
.step.running .ico{animation:pulse 1.4s ease-in-out infinite}
.step .d{color:var(--dim);font-size:12px}
.log{white-space:pre-wrap;font-family:var(--mono);font-size:11.5px;line-height:1.5;background:#0a0d12;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;max-height:340px;overflow:auto;color:#c4ccd8}

@media (max-width:1000px){.editor{grid-template-columns:minmax(0,1fr)}.editor .side{position:static}}
@media (max-width:820px){
  .page{padding:0 16px 24px}
  .cards{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .camp-switch,.run-btn,.run-status{width:100%}
}

/* ---------- workspace ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.secret-note{font-size:12px;color:var(--dim);line-height:1.5}

/* ---------- selection bar ---------- */
.sel-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:10px;
  background:var(--raised-2);border:1px solid var(--line-strong);border-radius:10px;padding:8px 10px 8px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);color:var(--text);font-size:13px}
.sel-bar[hidden]{display:none}
.sel-bar .menu .pop{bottom:calc(100% + 8px);top:auto;left:0;right:auto;min-width:260px}
.sel-bar .btn[disabled]{opacity:.45;cursor:not-allowed}
.tabulator .sel-col input[type=checkbox]{accent-color:var(--sky);width:15px;height:15px;cursor:pointer}
.tabulator .tabulator-frozen.tabulator-frozen-left.sel-col,.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left.sel-col{border-right:0}
.tabulator.rows-open .tabulator-row{cursor:pointer}
.wallet{position:fixed;top:12px;right:18px;z-index:55}
body:has(.drawer.open) .wallet{display:none}
.wallet-btn{display:flex;gap:6px;align-items:baseline;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:6px 14px;color:var(--body);cursor:pointer;font:inherit;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.wallet-btn b{color:var(--text)}.wallet-btn.low{border-color:var(--bad)}
.wallet-pop{position:absolute;right:0;top:42px;width:360px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.wallet-pop[hidden]{display:none}
.wallet-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.page-head{padding-right:220px}
@media (max-width:700px){.wallet{position:absolute;top:8px;right:8px}.page-head{padding-right:16px}}
/* thin, dark scrollbars that match the theme */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box}
::-webkit-scrollbar-button{display:none;height:0;width:0}
::-webkit-scrollbar-corner{background:transparent}
.sidebar{overflow-x:hidden}
.cpv-find{position:relative;margin:6px 0 10px}
.cpv-results{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:4px}
.cpv-results:empty{display:none}
.cpv-hit{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 10px;border-bottom:1px solid var(--line);font-size:13px}
.cpv-hit:last-child{border-bottom:0}
.hf-btn{margin-left:6px;padding:0 4px;border-radius:4px;color:var(--muted);cursor:pointer;font-size:11px}
.hf-btn:hover{background:var(--raised-2);color:var(--text)}
.tabulator-col.hf-on .tabulator-col-title{color:var(--sky)}
.tabulator-col.hf-on .hf-btn{background:var(--sky);color:var(--bg)}
.hf-pop{position:fixed;z-index:60;width:290px;max-height:330px;display:flex;flex-direction:column;gap:6px;padding:10px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.hf-range{display:flex;flex-direction:column;gap:4px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.hf-range-vals{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.hf-range-vals .input{width:72px;display:inline-block;padding:3px 6px}
.hf-range input[type=range]{width:100%;accent-color:var(--sky)}
.hf-head{display:flex;align-items:center;justify-content:space-between;color:var(--text)}
.hf-tools{display:flex;gap:6px;align-items:center;font-size:12px}.hf-tools [data-shown]{margin-left:auto}
.hf-list{overflow:auto;flex:1;min-height:60px;border-top:1px solid var(--line);padding-top:4px}
.hf-row{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;padding:3px 2px;font-size:12.5px;cursor:pointer}
.hf-row:hover{background:var(--raised)}.hf-row span:nth-child(2){overflow-wrap:anywhere}
.brief{border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;background:var(--raised);display:flex;flex-direction:column;gap:10px}
.brief.empty{gap:4px}
.tag.quick,.pill.quick{opacity:.6;border:1px dashed currentColor}
.quick-note{border-left:3px solid var(--line-strong);padding:4px 10px;margin:6px 0}
.brief-head{display:flex;gap:12px;align-items:center}
.brief-hl{color:var(--text);margin-top:4px}
.fit{display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;border:3px solid var(--c);flex:none}
.fit b{font-size:20px;color:var(--text);line-height:1}.fit span{font-size:10px;color:var(--muted)}
.brief-fit,.brief-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bsec p{margin:2px 0}.blist{margin:2px 0 0;padding-left:18px}.blist li{margin:1px 0}
.doc{display:flex;gap:8px;align-items:baseline;padding:4px 0;border-bottom:1px solid var(--line)}.doc a{overflow-wrap:anywhere}
.tabulator.rows-open .tabulator-cell.tabulator-editable{cursor:text}
.tabulator-row.tabulator-selected{background:rgba(68,138,255,.12)!important}
.stage-pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:12px;background:color-mix(in srgb,var(--c,var(--grey)) 22%,transparent);
  color:color-mix(in srgb,var(--c,var(--grey)) 70%,#fff);white-space:nowrap}
.list-nav{display:flex;flex-wrap:wrap;gap:6px}
.list-nav a{display:inline-flex;gap:8px;align-items:center;padding:6px 11px;border-radius:99px;border:1px solid var(--line);color:var(--body);
  text-decoration:none;font-size:13px;background:var(--surface)}
.list-nav a[aria-current=true]{border-color:var(--sky);color:var(--text);background:var(--raised-2)}
.list-nav a .n{font-family:var(--mono);font-size:11.5px;color:var(--dim)}

.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- buying-signal idea cards ---------- */
.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));gap:12px}
.idea{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:start;gap:8px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.idea.off{opacity:.72}
.idea h4{margin:0 0 4px;font-size:15px}
.idea dl{display:grid;grid-template-columns:70px 1fr;gap:3px 10px;margin:8px 0 0;font-size:13px}
.idea dt{color:var(--muted)}
.idea dd{margin:0}
.idea input.pick{margin-top:3px}
.idea .tag,.idea .pill{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.idea .how{margin-top:8px;font-size:12.5px;display:flex;flex-direction:column;gap:4px}
.camp-switch[hidden]{display:none}
/* ---------- wizard ---------- */
.steps{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.steps span{font-size:12.5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.steps span.on{border-color:var(--sky);color:var(--text)}
.steps span.done{color:var(--ok)}
.nav.account{margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
.switch{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-left:12px}
.switch a{padding:6px 12px;font-size:13px;color:var(--muted);text-decoration:none}
.switch a[aria-current]{background:var(--raised);color:var(--text)}
/* QA 13 Oct: [hidden] must win over display rules such as .btn{display:inline-flex} */
[hidden]{display:none !important}
.wsteps{display:flex;flex-direction:row;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.wsteps span{font-size:12.5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);width:auto}
.wsteps span.on{border-color:var(--sky);color:var(--text)}
.wsteps span.done{color:var(--ok)}

.camp-switch select.flash{outline:2px solid var(--sky);outline-offset:1px}

/* our own dialogs (SDR.confirm / prompt / alert) */
.sdr-dialog-wrap{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(5,8,12,.55);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .15s}
.sdr-dialog-wrap.on{opacity:1}
.sdr-dialog{width:min(460px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:20px 22px 16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(6px) scale(.98);transition:transform .15s}
.sdr-dialog-wrap.on .sdr-dialog{transform:none}
.sdr-dialog h2{margin:0 0 8px;font-family:var(--display);font-size:18px;line-height:1.3;color:var(--text)}
.sdr-dlg-body{white-space:pre-line;font-size:13.5px;line-height:1.55;color:var(--body);max-height:50vh;overflow:auto}
.sdr-dialog .input{width:100%;margin-top:12px}
.sdr-dlg-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{filter:brightness(1.1)}
@media (prefers-reduced-motion: reduce){.sdr-dialog-wrap,.sdr-dialog{transition:none}}

/* =====================================================================================================================
   Design foundations (15 Oct 2026, docs/plans/2026-10-15-ui-design.md, steps 1 and 2). Later rules here win over the ones above.
   One type scale, one spacing scale, colours by meaning, three button weights, room around buttons and fields.
   ===================================================================================================================== */
:root{
  --muted:var(--dim); --panel:var(--surface);                 /* used by older rules but never defined */
  --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* what kind of card: only ever used for the type */
  --type-job:var(--sky); --type-tender:var(--yellow); --type-outreach:var(--teal);
  /* what state it is in: only ever used for state */
  --state-needs:#ff9a4d; --state-ok:var(--ok); --state-bad:var(--bad); --state-info:var(--info);
  /* numbers: the brand font with even-width digits, not a system monospace */
  --num:"Plus Jakarta Sans","Arboria",-apple-system,"Segoe UI",sans-serif;
}
.mono{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:0}
.log,code,pre{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
/* small capitals labels (menu sections, column heads, card owners): the brand font, not a typewriter */
.nav-label,.section-title,.card .owner,table.plain th,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{
  font-family:var(--display);font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em}
.nav a .count,.tab .n,.opt .n,.list-nav a .n,.btn .badge,.fsec>summary .on{font-family:var(--num);font-variant-numeric:tabular-nums}

/* page header */
.page-head{padding:22px 24px 12px}
.page-head h1{font-size:var(--fs-2xl)}
.page-head .sub{font-size:var(--fs-sm);max-width:72ch;margin-top:2px}

/* buttons: three weights (primary: one per view; standard; quiet), and real room inside them */
.btn{min-height:34px;padding:7px 14px;border-radius:7px;font-size:13px;font-weight:500;gap:7px;justify-content:center;
  transition:background .12s,border-color .12s,color .12s}
.btn.small{min-height:28px;padding:4px 11px;font-size:var(--fs-sm)}
.btn.primary{box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.btn.ghost{border-color:var(--line)}
.btn.ghost:hover{border-color:var(--line-strong);background:var(--raised)}
.btn:active:not([disabled]){transform:translateY(1px)}
/* a button that follows a field, a pair of fields, a note or a table never sits on top of it */
.field + .btn,.grid2 + .btn,.grid3 + .btn,.input + .btn,.help + .btn,.tokens + .btn,textarea + .btn,table + .btn,
.field + div > .btn:first-child,.grid2 + div > .btn:first-child,.grid3 + div > .btn:first-child{margin-top:var(--sp-3)}
.field + .btn,.grid2 + .btn,.grid3 + .btn,.input + .btn,.help + .btn,textarea + .btn{align-self:flex-start}
.btn + .secret-note,.btn + .help,.btn + p{margin-top:var(--sp-2)}

/* fields: each label sits with its own box, with space before the next one */
.field{gap:6px}
.field > span:first-child{color:var(--body);font-size:var(--fs-sm)}
.field:not(.inline) + .field:not(.inline),.field + .grid2,.field + .grid3,.grid2 + .field,.grid3 + .field,.grid2 + .grid2,.grid3 + .grid3,
.opt + .field,.field + .opt,.help + .field,.field + .help{margin-top:var(--sp-3)}
.input,select.input{min-height:34px;border-radius:7px;transition:border-color .12s}
.input:hover{border-color:rgba(255,255,255,.22)}
.input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(68,138,255,.18)}
.help{font-size:var(--fs-sm);line-height:1.55}

/* chips and badges: a quick-check verdict is outlined (not dashed: it isn't switched off) */
.tag.quick,.pill.quick{opacity:1;border:1px solid color-mix(in srgb,var(--c,var(--grey)) 55%,transparent);background:transparent}

/* the credits wallet lives in the menu now (above Settings), so it never covers a page's buttons */
.sidebar .wallet{position:static;z-index:auto;margin:var(--sp-2) 4px var(--sp-1)}
.sidebar .wallet-btn{width:100%;justify-content:flex-start;border-radius:8px;box-shadow:none;background:var(--raised);padding:8px 12px}
.sidebar .wallet-pop{position:fixed;left:calc(var(--sidebar) + 8px);top:auto;bottom:16px;z-index:60}
.page-head{padding-right:24px}
body:has(.drawer.open) .wallet{display:block}
.nav-collapsed .sidebar .wallet-btn{padding:8px 0;justify-content:center}
.nav-collapsed .sidebar .wallet-btn .muted{display:none}

/* Admin (staff): one group that folds away */
.nav-fold{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;cursor:pointer;text-align:left}
.nav-fold::after{content:"\25B8";margin-left:auto;font-size:10px;transition:transform .15s}
.nav-fold[aria-expanded=true]::after{transform:rotate(90deg)}
.nav-fold:hover{color:var(--text)}
.nav.folded{display:none}

/* phones: one slim header row (logo, Menu); workspace, campaign and credits appear when the menu opens */
@media (max-width:820px){
  .sidebar{padding:8px 12px;gap:6px}
  .sidebar .brand img{height:22px}
  .sidebar .camp-switch,.sidebar .wallet{display:none}
  .nav-open .sidebar .camp-switch:not([hidden]),.nav-open .sidebar .wallet{display:flex;width:100%}
  .nav-open .sidebar .nav-fold{display:flex}
  .sidebar .wallet-pop{left:12px;right:12px;bottom:12px;width:auto}
  .page-head{padding:16px 16px 10px}
  .page-head h1{font-size:var(--fs-xl)}
}
@media (prefers-reduced-motion:reduce){.btn,.input{transition:none}}
/* the wallet sits at the foot of the menu, just above Settings and Credits */
.sidebar .wallet{margin-top:auto}
.sidebar .wallet + .nav.account{margin-top:0}
/* fields side by side (grids, rows) line up: the space-before rule is only for fields stacked in a column */
.grid2 > .field + .field,.grid3 > .field + .field,.grid2 > .field,.grid3 > .field,.field.inline + .field,.row > .field + .field{margin-top:0}
.page-head .sub{max-width:110ch}
.grid2 > .field,.grid3 > .field,.row > .field{margin-top:0 !important}
/* a button beside fields in a row lines up with the boxes, not the labels (the "under a field" spacing is only for columns) */
.row > .field + .btn,.row > .btn + .btn,.row > .field ~ .btn,.row > .field ~ a.btn{margin-top:0;align-self:flex-end}
.btn .tag{margin:0}

/* ---------- step 5: loading, empty and missing states; clamped text; the Save bar ---------- */
.skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--raised) 0,var(--raised-2) 40%,var(--raised) 80%);background-size:300% 100%;
  animation:skel 1.4s ease-in-out infinite;height:14px;margin:10px 0}
.skel.h{height:26px;width:40%}.skel.w60{width:60%}.skel.w80{width:80%}.skel.box{height:120px}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:48px 24px;color:var(--dim)}
.empty-state .mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--raised);border:1px solid var(--line-strong);
  font:700 20px var(--display);color:var(--text);position:relative}
.empty-state .mark::after{content:"";position:absolute;right:6px;bottom:6px;width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.empty-state h3{margin:0;font-family:var(--display);font-size:var(--fs-lg);color:var(--text)}
.empty-state p{margin:0;max-width:46ch;font-size:var(--fs-sm);line-height:1.55}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.clamp3.open{display:block}
.save-bar{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:45;display:flex;align-items:center;gap:12px;
  background:var(--raised-2);border:1px solid var(--line-strong);border-radius:10px;padding:8px 10px 8px 16px;box-shadow:0 14px 40px rgba(0,0,0,.55);
  color:var(--text);font-size:13px;transition:transform .2s}
.save-bar.on{transform:translate(-50%,0)}
.save-bar::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--state-needs)}
@media (prefers-reduced-motion:reduce){.save-bar{transition:none}}
/* campaign cards: the same height, the useful bits first */
.cards .card{min-height:100%}
.card .run-line{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--c,var(--grey)) 10%,var(--raised));
  border:1px solid color-mix(in srgb,var(--c,var(--grey)) 30%,var(--line))}
.card .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.more-link{border:0;background:none;color:var(--ice);cursor:pointer;padding:0;font-size:var(--fs-sm);align-self:flex-start}
.title-link{color:var(--text);cursor:pointer}
.title-link:hover{color:var(--ice);text-decoration:underline}

details.howto{margin:0 0 10px}
details.howto>summary{cursor:pointer;color:var(--ice);font-size:var(--fs-sm);list-style:none;display:inline-flex;gap:6px;align-items:center}
details.howto>summary::-webkit-details-marker{display:none}
details.howto>summary::before{content:"?";width:16px;height:16px;border-radius:50%;display:inline-grid;place-items:center;font:700 10px var(--display);
  background:var(--raised-2);color:var(--text)}
details.howto[open]>summary{margin-bottom:6px}

.sdr-dlg-choices{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.sdr-dlg-choices .btn{justify-content:flex-start;text-align:left;white-space:normal}
/* toolbars and headers: controls sit in a row, so none of the "space after a field" rules apply */
.toolbar > *,.page-head > *,.actions > *,.row > .btn,.sel-bar > *{margin-top:0 !important}
/* the credits popup opens from the menu: the menu sits above the page, and the popup fits on screen (scrolling inside if long) */
.sidebar{z-index:30}
.sidebar .wallet-pop{max-height:calc(100vh - 32px);overflow:auto;z-index:70}

/* a search finished: a pop-up at the bottom right, with a link to what it found */
#notify{position:fixed;right:18px;bottom:18px;z-index:1500;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 32px))}
.notify{background:var(--raised-2);border:1px solid var(--line-strong);border-left:4px solid var(--ok);border-radius:10px;padding:12px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);color:var(--body);animation:notify-in .2s ease-out;transition:opacity .2s,transform .2s}
.notify.bad{border-left-color:var(--state-needs)}
.notify.out{opacity:0;transform:translateY(8px)}
.notify-head{display:flex;align-items:center;gap:8px}.notify-head b{color:var(--text);font-family:var(--display);flex:1}
.notify-x{border:0;background:none;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}.notify-x:hover{color:var(--text)}
.notify-body{margin:6px 0 10px;font-size:13px}.notify-body b{color:var(--text)}
.notify-acts{display:flex;gap:8px}
@keyframes notify-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.notify{animation:none;transition:none}}

.cd-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.cd-head{display:flex;gap:8px;align-items:center;margin-bottom:6px}.cd-head b{color:var(--text);font-family:var(--display)}
.cd-bars{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px}.cd-bars span{color:var(--body)}.cd-bars b{color:var(--text);font-family:var(--num)}

/* =====================================================================================================================
   Alignment pass (17 Oct 2026): one control height, rows that line up with the boxes, gaps from the spacing scale.
   scripts/qa/align_audit.mjs measures every page, tab, drawer and dialog against these. Later rules here win.
   ===================================================================================================================== */
:root{--ctl-h:34px;--ctl-h-sm:28px}
/* one height for a box you type in, a list you pick from and a button (34px; small buttons 28px), whatever the font does */
.btn{min-height:var(--ctl-h);line-height:18px}
.btn.small{min-height:var(--ctl-h-sm);line-height:18px}
.input,select.input{min-height:var(--ctl-h);line-height:20px}
input.input[type=file]{padding:3px 10px 3px 4px}
/* date and time boxes draw their own inner padding: trim ours so they are the same 34px */
input.input:is([type=date],[type=datetime-local],[type=time],[type=month]){padding-top:5px;padding-bottom:5px}
/* a count or key hint inside a button doesn't make it taller than the others */
.btn .tag,.btn .fcount{line-height:16px;padding-top:0;padding-bottom:0}
.btn .kbd{line-height:14px}
/* a strip of tabs is as tall as the buttons and boxes beside it */
.tabs{padding:2px}
.tab{padding:5px 12px;line-height:18px}
.tab .n{line-height:1}
/* a box of chips you type into is 34px while it holds one line, and grows with its chips */
.tokens{padding:3px 6px;min-height:var(--ctl-h)}
.tokens input{padding:1px 4px}

/* a form row: fields, boxes and buttons side by side, lined up with the boxes (labels sit above), wrapping on a phone */
.form-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end}
.form-row > .field{flex:1 1 200px;min-width:0}
/* fields stacked in a wrapper of their own: the same room between each */
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.stack > *{margin-top:0 !important}
.stack > :is(div,p,span):empty{display:none}          /* an empty note or slot takes no room */
/* controls side by side in any row: none of the "room above when stacked" rules apply, a field sits on the row's
   baseline (its box at the bottom), and a button beside a labelled field is level with the box, not the label */
:is(.form-row,.row,.lane-head,.pop .save,.rtools,.qtools,.task-add,.task,.rule,.bul,.cvrow,.cvline,.cvline .acts,.acts,
    .actions,.lead-bar,.toolbar,.page-head,.sel-bar,.save-bar,.drawer footer,.sdr-dlg-acts,.notify-acts,.brief-actions,
    .hf-tools,.hf-range-vals,.cmp-row,.cmp-ai,.cmp-later,.cmp-foot,.trow,.trow .side,.doc,.linked,.pp-row,.sw-head,
    .sw-hint,.sw-reasons,.bulkbar,.list .filters,.next,.crumbs,[style*="display:flex"]:not([style*="column"]),
    [style*="display:inline-flex"])
  > :is(.field,.input,.btn,.tokens,select,textarea,.opt,div){margin-top:0 !important}
:is(.form-row,.row,.lane-head,.pop .save,.rtools,.qtools,.task-add,.task,.rule,.bul,.cvrow,.cvline,.cvline .acts,.acts,
    .actions,.lead-bar,.toolbar,.page-head,.sel-bar,.save-bar,.drawer footer,.sdr-dlg-acts,.notify-acts,.brief-actions,
    .hf-tools,.hf-range-vals,.cmp-row,.cmp-ai,.cmp-later,.cmp-foot,.trow,.trow .side,.doc,.linked,.pp-row,.sw-head,
    .sw-hint,.sw-reasons,.bulkbar,.list .filters,.next,.crumbs,[style*="display:flex"]:not([style*="column"]),
    [style*="display:inline-flex"]) > .field{align-self:flex-end}
:is(.form-row,.row,.lane-head,.pop .save,.rtools,.qtools,.task-add,.task,.rule,.bul,.cvrow,.cvline,.cvline .acts,.acts,
    .actions,.lead-bar,.toolbar,.page-head,.sel-bar,.save-bar,.drawer footer,.sdr-dlg-acts,.notify-acts,.brief-actions,
    .hf-tools,.hf-range-vals,.cmp-row,.cmp-ai,.cmp-later,.cmp-foot,.trow,.trow .side,.doc,.linked,.pp-row,.sw-head,
    .sw-hint,.sw-reasons,.bulkbar,.list .filters,.next,.crumbs,[style*="display:flex"]:not([style*="column"]),
    [style*="display:inline-flex"]) > .field ~ .btn{align-self:flex-end}
:is(.form-row,.row,.lane-head,.pop .save,.rtools,.qtools,.task-add,.task,.rule,.bul,.cvrow,.cvline,.cvline .acts,.acts,
    .actions,.lead-bar,.toolbar,.page-head,.sel-bar,.save-bar,.drawer footer,.sdr-dlg-acts,.notify-acts,.brief-actions,
    .hf-tools,.hf-range-vals,.cmp-row,.cmp-ai,.cmp-later,.cmp-foot,.trow,.trow .side,.doc,.linked,.pp-row,.sw-head,
    .sw-hint,.sw-reasons,.bulkbar,.list .filters,.next,.crumbs,[style*="display:flex"]:not([style*="column"]),
    [style*="display:inline-flex"]) > :is(.input,select,.tokens) ~ .btn{align-self:center}
/* a column that already spaces its children (a drawer, a lane, an editor panel): fields, field grids and the button under them
   get that one gap, not the gap plus the stacked-field margin (12px inside a grid, 28px between grids, before) */
:is(.drawer .body,.lane,.editor .panel) > :is(.field,.grid2,.grid3,.tokens,.btn){margin-top:0 !important}
/* a row of buttons under a field: the row gets the room above, so every button in it stays level */
.field + div > .btn:first-child,.grid2 + div > .btn:first-child,.grid3 + div > .btn:first-child{margin-top:0}
.field + div:has(> .btn:first-child),.grid2 + div:has(> .btn:first-child),.grid3 + div:has(> .btn:first-child){margin-top:var(--sp-3)}
/* fields side by side in a grid: the boxes line up even when one label takes two lines (cards and text in a grid still stretch) */
:is(.grid2,.grid3) > :is(.field,.input,select,.btn,.tokens){align-self:end}
/* a form under a table gets room above it (a table in a sideways scroller too) */
:is(table.plain,.table-scroll) + :is(.grid2,.grid3,.form-row,.field){margin-top:var(--sp-3)}
.table-scroll + .btn{margin-top:var(--sp-3)}
/* a drawer's body scrolls: nothing in it is squashed to fit (a squashed control cut its words in half) */
.drawer .body > *,.wallet-pop > *{flex-shrink:0}
/* buttons together in a table cell */
.cell-acts{display:inline-flex;gap:var(--sp-2);align-items:center;vertical-align:middle}
/* the spacing scale between controls: 8px side by side, and 8px between the lines when a row wraps */
.actions,.pop .save,.hf-tools,.rule,.range,.rule-match,.notify-acts,.sel-bar{gap:var(--sp-2)}
/* tick boxes sit level with the first line of their words, however many lines the words take */
.opt{align-items:flex-start}
.opt > input[type=checkbox],.opt > input[type=radio]{margin-top:calc((1.45em - 13px) / 2);flex:none}
.opt > .n{align-self:center}
.opt:has(> select){align-items:center}          /* a label with a Yes/No/Any picker beside it */
/* an inline field whose words wrap (a phone) keeps its box level with the words before it */
.field.inline{flex-wrap:wrap}
/* the menu's workspace and campaign pickers: room between them */
.camp-switch + .camp-switch{margin-top:var(--sp-2)}
/* boxes stacked inside one field (chip boxes, then an inline field) are 8px apart, not the label's 6px */
.field > .tokens + .tokens,.field > .tokens + .field{margin-top:2px}
/* phones: the selection bar wraps inside the screen, the menu bar no longer sits on top of an open drawer's title and Close,
   and a filter rule takes two lines (field and condition, then the value) so each picker shows its words */
@media (max-width:820px){.sel-bar{flex-wrap:wrap;justify-content:center;row-gap:var(--sp-2);width:max-content;max-width:calc(100vw - 16px)}
  .sidebar{z-index:auto}
  .rule{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rule > .btn{justify-self:start}}
/* campaign editor: a lane's name box shrinks before its button leaves the panel; the CPV finder is full width; the last of
   three fields (a long choice) gets more room */
.lane-head{flex-wrap:wrap}
.lane-head .input{flex:1 1 220px;min-width:0}
.cpv-find .input{width:100%}
.grid3.wide-last{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)}
@media (max-width:820px){.grid3.wide-last{grid-template-columns:1fr}}
/* tables of boxes (scores, tender terms, stages, mailboxes): boxes keep a usable width and, when there isn't room (a tablet or
   phone), the table scrolls sideways in its own box instead of squashing them or pushing the page sideways */
.table-scroll{overflow-x:auto;max-width:100%}
.table-scroll table.plain td .input{min-width:120px}
.table-scroll table.plain td.num .input{min-width:72px}
.table-scroll table.plain td select.input{min-width:220px}

/* tablets and small laptops (wider than the phone layout, narrower than the menu plus a drawer): a drawer never runs under the
   menu, which is drawn above drawers so its credits pop-up shows. The drawer narrows to the room beside the menu instead */
@media (min-width:821px){.drawer{max-width:calc(100vw - var(--sidebar))}}

/* each page's content area is a container, so a layout can follow the room it really has: on a tablet the menu takes 264px,
   which a rule on the window's width can't see. The campaign editor's side column goes under the editor, and pairs and
   threes of fields stack, once there isn't room for them side by side */
.page{container:page / inline-size}
@container page (max-width:900px){.editor{grid-template-columns:minmax(0,1fr)}.editor .side{position:static}}
@container page (max-width:560px){.grid2,.grid3,.grid3.wide-last{grid-template-columns:1fr}}
/* boxes laid out as cards side by side (the staff tools on Credits): as many as fit at 400px or more each, else one a row */
.lanes-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--sp-3,12px)}
/* a toolbar's search box that takes the room left over (People), so the buttons stay on the same line with even gaps */
@media (min-width:821px){.search.grow{flex:1 1 180px;min-width:180px}}
.grid2[hidden],.field[hidden]{display:none}