/* T789: the shell's layout on top of the buying tool's design system (design.css is page.css of
   agency/scripts/finance/buying/, staged by the deploy hook; one source for the tokens). Only tokens are used here. */
/* T823: design.css hides sideways overflow on html and body, which makes body a scroller of its own, so nothing
   could stick to the page: not the top bar, not a table's head. clip hides the same overflow without that */
html,body{overflow-x:clip}
.shell{min-height:100vh;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-1);flex-wrap:wrap}
.bar .name{font-weight:700;font-size:var(--fs-lg);color:var(--text);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.bar .company{font-weight:600;color:var(--text-2);padding-left:var(--sp-3);border-left:1px solid var(--line);min-height:28px;display:inline-flex;align-items:center}
.bar .switch select{min-width:180px}
.bar .grow{flex:1 1 auto}
.bar .who{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .cur{background:var(--accent-soft)}
.menu-btn{display:none}
.frame{flex:1 1 auto;display:grid;grid-template-columns:260px minmax(0,1fr);gap:0}
.side{border-right:1px solid var(--line);background:var(--surface);padding:var(--sp-4) var(--sp-3);position:sticky;top:61px;align-self:start;height:calc(100vh - 61px);overflow-y:auto}
.side .group{margin-bottom:var(--sp-1)}
.side .dept{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-sm);font-weight:650;color:var(--text);cursor:pointer}
.side .dept::after{content:"";width:8px;height:8px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(-45deg);transition:transform .15s ease}
.side .dept.open::after{transform:rotate(45deg)}
.side .dept:hover{background:var(--surface-2)}
.side .dept:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.side .sub{list-style:none;margin:0 0 var(--sp-2);padding:0 0 0 var(--sp-3)}
.side .sub a{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-3);border-radius:var(--r-sm);color:var(--text-2);text-decoration:none}
.side .sub a:hover{background:var(--surface-2);color:var(--text)}
.side .sub a.cur{background:var(--accent-soft);color:var(--accent);font-weight:650}
#view{padding:var(--sp-5) var(--sp-6) var(--sp-7);max-width:1320px;width:100%;outline:none}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.page-head .lead{margin-bottom:0;max-width:760px}
.kicker{font-size:var(--fs-sm);font-weight:600;color:var(--accent);margin:0 0 var(--sp-1)}
h2.flush{margin:0}
.rowtext{display:flex;flex-direction:column;gap:2px}
.form{display:grid;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.form label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin-top:var(--sp-2)}
.field.wide{width:100%}
fieldset.rights{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-2) var(--sp-3) var(--sp-3);margin:0 0 var(--sp-3);display:flex;flex-wrap:wrap;gap:0 var(--sp-4)}
fieldset.rights legend{font-weight:650;padding:0 var(--sp-1)}
/* T834: Company, Action routing: a button's cards and each button's block, in the rights fieldset's own edge */
fieldset.rt-card{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-2) var(--sp-3) var(--sp-3);margin:0 0 var(--sp-3)}
fieldset.rt-card legend{font-weight:650;padding:0 var(--sp-1)}
.rt-button{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.rt-button:first-child{border-top:0;padding-top:0;margin-top:0}
fieldset.rights .check input:disabled+*,fieldset.rights .check:has(input:disabled){color:var(--text-3)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3)}
.card.conn{margin:0}
.note{margin-top:var(--sp-3);max-width:760px}
.more{margin-top:var(--sp-3)}
.toast{position:fixed;left:50%;bottom:var(--sp-5);transform:translateX(-50%);z-index:80;background:var(--text);color:#fff;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);box-shadow:var(--shadow-2);max-width:min(520px,calc(100vw - 32px))}
.booting .lock{text-align:left}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .frame{grid-template-columns:minmax(0,1fr)}
  .side{display:none;position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);height:100vh;z-index:45;box-shadow:var(--shadow-2)}
  body.menu-open .side{display:block}
  body.menu-open::after{content:"";position:fixed;inset:0;background:var(--scrim);z-index:44}
  #view{padding:var(--sp-4) var(--sp-3) var(--sp-7)}
  .bar{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
  .bar .who{display:none}
  .bar .company{border-left:0;padding-left:0}
}
/* the buying tool mounted in procurement: its own header stays, its tabs are the submenu */
#view.embedded-buying .top{margin-top:0}
#view.embedded-buying .top .actions{display:none}   /* the top bar's Guide runs the buying tool's own tour here */
.side-foot{display:none;margin-top:var(--sp-5);padding:0 var(--sp-3)}
@media (max-width:900px){.bar .bar-out{display:none}.side-foot{display:block}}
/* charts (chart.js): one card, the value on hover, tap and focus */
.bo-chart{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-1)}
.bo-chart-title{font-weight:650;margin-bottom:var(--sp-2)}
.bo-frame{position:relative;outline:none;border-radius:var(--r-sm)}
.bo-frame:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.bo-svg{width:100%;height:auto;display:block;touch-action:pan-y}
.bo-svg .grid{stroke:var(--line)}.bo-svg .zero{stroke:var(--line-2)}.bo-svg .ax{fill:var(--text-3);font-size:11px}
.bo-svg .hover-line{stroke:var(--text-3);stroke-dasharray:3 3}
.bo-tip{position:absolute;z-index:5;min-width:180px;max-width:280px;background:var(--text);color:#fff;border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);box-shadow:var(--shadow-2);pointer-events:none}
.bo-tip .row{display:flex;align-items:center;gap:var(--sp-2)}.bo-tip .k{flex:1 1 auto;color:#e3e3e8}.bo-tip .v{font-variant-numeric:tabular-nums;font-weight:600}
.bo-legend{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--text-2)}
.bo-legend .item{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--c,var(--accent))}
.sw.bar{height:10px;width:10px;border-radius:2px}
.sw.dash{background:repeating-linear-gradient(90deg,var(--c,var(--accent)) 0 5px,transparent 5px 8px)}
.bo-ring-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.bo-ring{width:200px;height:200px;flex:0 0 auto}
.bo-ring-list{list-style:none;margin:0;padding:0;flex:1 1 220px;display:grid;gap:var(--sp-1)}
.bo-ring-list li{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;font-size:var(--fs-sm)}   /* T813b code read 2: every ring's rows answer a tap since T836, so 44 px */
.bo-ring-list li .k{flex:1 1 auto}.bo-ring-list li .v{font-variant-numeric:tabular-nums;color:var(--text-2)}
.bo-ring-list .sw{width:10px;height:10px}
/* T813b: a ring read by pointing, tapping or focusing a slice or its row */
.ring-live .bo-ring-list li{min-height:44px;padding:0 var(--sp-2);border-radius:var(--r-sm);cursor:default}
.ring-live .bo-ring-list li.on{background:var(--surface-2)}
.bo-ring.picked path{opacity:.3}.bo-ring.picked path.on{opacity:1}
.bo-ring-read{margin:var(--sp-2) 0 0;color:var(--text);font-variant-numeric:tabular-nums}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:var(--sp-3);margin-bottom:var(--sp-5)}
/* finance: the dashboard's tiles and tables, the cost tool, the budget grid */
.kpi.static{cursor:default}
.kpi .up{color:var(--fine);font-weight:650}.kpi .down{color:var(--late);font-weight:650}
.cfo-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cfo-table td,.cfo-table th{font-variant-numeric:tabular-nums}
.cfo-table tr.tot td,table tr.tot td{font-weight:650;background:var(--surface-2)}
.refm{display:inline-flex;align-items:center;justify-content:center;min-width:22px;min-height:22px;margin-left:6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:var(--fs-xs);font-weight:700;text-decoration:none;vertical-align:middle}
.refm{position:relative}
.refm::after{content:'';position:absolute;inset:-11px}   /* a 44 px hit area round the small badge */
.refs{padding-left:var(--sp-6)}.refs li{margin-bottom:var(--sp-2)}
.periods{margin-bottom:var(--sp-4)}
.ctable .cell{display:flex;align-items:center;gap:var(--sp-2)}
.ctable .box{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.ctable .box input{width:20px;height:20px;accent-color:var(--accent)}
.caret{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:44px;color:var(--text-2)}
.caret:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ctable tr.off td{color:var(--text-3);text-decoration:line-through}
.ctable tr.grp td{font-weight:650}
.was{color:var(--text-3);font-size:var(--fs-xs);margin-left:6px}
.lbl{font-weight:500}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-1) var(--sp-4);margin:0 0 var(--sp-4)}
dl.facts dt{font-weight:600;color:var(--text-2)}dl.facts dd{margin:0}
.sugg h3{margin:var(--sp-1) 0 var(--sp-2)}
.budget-wrap{max-height:calc(100vh - 260px)}
table.budget{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
table.budget th,table.budget td{padding:2px var(--sp-2);white-space:nowrap}
table.budget .acct{position:sticky;left:0;z-index:2;background:var(--surface);min-width:64px;width:64px;text-align:left}
table.budget .lab{position:sticky;left:64px;z-index:2;background:var(--surface);min-width:240px;max-width:300px;text-align:left;white-space:normal}
table.budget thead th{z-index:3}
table.budget thead .acct,table.budget thead .lab{z-index:4;background:var(--surface-2)}
@media (max-width:640px){table.budget .acct{position:static}table.budget .lab{left:0;min-width:120px;max-width:140px;font-size:var(--fs-xs)}}   /* phones: only a narrow description stays put, so a whole amount field fits beside it */
table.budget td.doc{color:var(--text-2)}
table.budget td.calc{color:var(--text)}
table.budget tr.total td{font-weight:650;background:var(--surface-2)}
table.budget tr.total .acct,table.budget tr.total .lab{background:var(--surface-2)}
table.budget tr.percent td{font-style:italic;color:var(--text-2)}
table.budget tr.head-row td{font-weight:700;padding-top:var(--sp-3);background:var(--surface)}
table.budget td.actual,table.budget th.actual{color:var(--text-3);background:var(--bg)}
table.budget td.total,table.budget th.total{font-weight:650}
table.budget td.edit{padding:0}
.cellin{width:100%;min-width:96px;min-height:44px;border:1px solid transparent;border-radius:6px;background:transparent;text-align:right;font:inherit;font-variant-numeric:tabular-nums;padding:0 var(--sp-2);color:var(--text-2)}
.cellin:hover{border-color:var(--line-2)}
.cellin:focus{outline:none;border-color:var(--focus);background:var(--surface);color:var(--text);box-shadow:0 0 0 3px var(--info-soft)}
.cellin.mine{color:var(--text);font-weight:650;background:linear-gradient(135deg,var(--accent) 0 6px,transparent 6px)}
/* print: only the page, never the shell's bar and menu (the buying tool's purchase order drafts print alone) */
@media print{
  .bar,.side,.side-foot,.menu-btn{display:none!important}
  .frame{display:block}
  #view{padding:0;max-width:none}
}
/* AI access: the addresses an AI tool connects to */
.card code{font-size:var(--fs-sm);overflow-wrap:anywhere;background:var(--surface-2);padding:1px 4px;border-radius:4px}
/* T802: the refresh control (the issue button and its list are the design system's, page.css) */
.refresh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3)}
/* T802: the weekly report's sections */
.report{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);margin-bottom:var(--sp-5)}
.report .card{margin:0}
.report tr.strong td{font-weight:650}
.report h4.section{margin:var(--sp-3) 0 var(--sp-2)}
.report a.cell-link{display:inline-flex;align-items:center;min-height:44px}
/* T802 Addendum 1: the period buttons, the references under a number, the spend graph's choices */
.mkt-ctl{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.kpi .refs{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-1)}
.spend-graph{margin-bottom:var(--sp-4)}
.spend-graph .chips{margin-bottom:var(--sp-2)}
/* T803: finance (Scoreboard, Trends, What if, Statements, Guide) and Administration */
.pbar{align-items:flex-end}
.pfield{display:flex;flex-direction:column;gap:2px}
.pfield .field{min-width:180px}
.sb-card{margin:0}
.sb-tiles .kpi{cursor:pointer;min-height:44px}
.sb-tiles .kpi.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sb-tiles .kpi:focus-visible,.sb-trend:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.thumb{font-weight:650}.thumb.up,.up{color:var(--fine)}.thumb.down,.down{color:var(--late)}
.sb-chartrow{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--sp-3);margin-bottom:var(--sp-5);align-items:start}
.sb-trends{display:grid;gap:var(--sp-2)}
.sb-trend{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:44px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.sb-trend.on{border-color:var(--accent);background:var(--accent-soft)}
.sb-grid{margin-bottom:var(--sp-4)}
.sb-big{font-size:var(--fs-xl);font-weight:700;margin:0 0 var(--sp-2)}
.sb-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-bottom:var(--sp-3);background:var(--surface-2)}
.sb-list{list-style:none;padding:0;margin:0 0 var(--sp-3);display:grid;gap:var(--sp-1)}
.sb-sum h3{margin:var(--sp-3) 0 var(--sp-1)}
.reports{margin-bottom:var(--sp-4)}
.tipbtn{position:relative}.tipbtn::after{content:'';position:absolute;inset:-11px}   /* a 44 px hit area round the small help button */
.tr-wrap{max-height:calc(100vh - 220px)}
.tr-table td,.tr-table th{white-space:nowrap}
.tr-table td:first-child,.tr-table th:first-child{position:sticky;left:0;background:var(--surface);z-index:1;white-space:normal;min-width:220px}
.tr-table tr.acct td:first-child{padding-left:var(--sp-5)}
.tr-table tr.grp td{background:var(--surface-2)}
.tr-table th.mo,.tr-table td.mo{color:var(--text-2)}
.tr-table th.pk,.cfo-table th.pk,.cfo-table td.pk{background:var(--accent-soft)}
table tr.diff td{color:var(--late);font-style:italic}
.wi-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-3);align-items:start}
.wi-grid .card{margin-bottom:var(--sp-3)}
.wi-results{position:sticky;top:76px}
.field.num{width:110px;text-align:right}
.inline{display:inline-flex;align-items:center;gap:var(--sp-1)}
.st-map{max-height:520px}
.st-fig .field.num{width:120px}
/* T838: the dashboard's rows on Statements */
.fr-accounts{display:grid;gap:var(--sp-1);max-height:360px;overflow:auto;padding:var(--sp-1) 0;margin-bottom:var(--sp-3)}
.fr-accounts .check{min-height:44px;align-items:center}
.fr-rows td .chips{flex-wrap:wrap}
.gd-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--sp-4);align-items:start}
.gd-list ol{margin:0;padding-left:var(--sp-5)}
.gd-list a{display:flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:none}
.gd-list a.cur{color:var(--accent);font-weight:650}
.gd-body{max-width:760px}
.loading{display:grid;gap:var(--sp-2);max-width:760px}
@media (max-width:900px){
  .sb-chartrow,.wi-grid,.gd-grid{grid-template-columns:minmax(0,1fr)}
  .wi-results{position:static}
  .pfield,.pfield .field{width:100%;min-width:0}
}
.sw.sq{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.sb-sus{width:100%;table-layout:fixed}.sb-sus th,.sb-sus td{white-space:normal;vertical-align:top}.sb-sus th:first-child,.sb-sus td:first-child{width:50%}
.cfo-kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cfo-kpis .n{overflow-wrap:anywhere}
.wi-res{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.wi-results{position:static;margin-bottom:var(--sp-3)}
.wi-custom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.wi-table td{vertical-align:middle}
@media (max-width:900px){.wi-res{grid-template-columns:minmax(0,1fr)}}
/* T802 Addendum 3: the home page */
.side .home-link{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-3);margin-bottom:var(--sp-2);border-radius:var(--r-sm);font-weight:650;color:var(--text);text-decoration:none}
.side .home-link.cur{background:var(--accent-soft);color:var(--accent)}
.side .home-link:hover{background:var(--surface-2)}
.home-group{margin-bottom:var(--sp-5)}
.home-dept{margin:0}
.home-dept h3{margin:0 0 var(--sp-1)}
a.home-card{display:flex;flex-direction:column;gap:var(--sp-1);min-height:44px;margin:0;color:var(--text);text-decoration:none}
a.home-card:hover{border-color:var(--accent)}
a.home-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* T819: who sees what, a grid of pages by people on a wide screen, one card per person on a phone */
.access-list{display:none}
.access-grid tr.grp th,.access-grid tr.grp td{border-top:2px solid var(--line)}
.access-grid thead th .btn{margin-top:var(--sp-1)}
.access-detail,.access-detail ul{margin:0;padding-left:var(--sp-4)}
.access-detail li{margin:var(--sp-1) 0}
@media (max-width:900px){.access-grid{display:none}.access-list{display:grid;gap:var(--sp-3)}}
table.people .btn{white-space:nowrap}
table.people .rowtext .xs{display:block;min-width:16ch}
.rights.jobs .check{align-items:flex-start;padding:var(--sp-1) 0}
.rights.jobs .check input{margin-top:2px;flex:none}
/* T804b: the expiry actions table and the settled log; on a phone each row is a card of labelled lines, so every
   field and button stays in reach without the page scrolling sideways (the sort is the select above the table) */
.pphoto{display:block;width:48px;height:48px;border-radius:var(--r-sm);object-fit:contain;background:var(--surface-2);border:1px solid var(--line)}
.pphoto.none{background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--bg) 6px 12px)}
.xfilters{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.xfilters .lbl{display:inline-flex;align-items:center;min-width:64px;font-weight:600}
.xtable td,.xtable th{vertical-align:middle;font-variant-numeric:tabular-nums;padding:var(--sp-2);white-space:normal}
.xtable .badge{white-space:normal}
.xtable .rowtext .badge{align-self:flex-start}
.xtable td[data-label="Units"],.xtable td[data-label="1 stuk price"],.xtable td[data-label="Suggested price"]{white-space:nowrap}
.xtable td[data-label="Product"] .chips{margin-top:var(--sp-1)}
.xtable td[data-label="Settle"] .chips{flex-wrap:nowrap}
.xtable .btn,.xtable td[data-label="Best before"],.xtable td[data-label="Best before"] .badge{white-space:nowrap}
.xtable td[data-label="Product"] .chips{gap:0 var(--sp-2)}
.xtable td .muted{white-space:normal}
.xtable td[data-label="Product"] .btn.ghost{padding-left:0;padding-right:0}
.xtable td.ph{width:56px}
.xtable th:first-child,.xtable td:first-child{min-width:0}
.xtable td[data-label="Product"]{min-width:180px}
.narrow-only{display:none}
/* T823: a table's head in view while its rows scroll under it (ui.js stickyHead); the line under the head travels with it */
.table-wrap.sticky-head.fits{overflow:visible}
.table-wrap.sticky-head.fits>table>thead>tr>th{top:var(--bar-h,61px)}
.table-wrap.sticky-head:not(.fits){max-height:calc(100vh - var(--bar-h,61px) - var(--sp-4));overflow:auto}
.table-wrap.sticky-head>table>thead>tr>th{z-index:5;box-shadow:inset 0 -1px 0 var(--line)}
/* T823a: the Stock expiry tables stay tables on a phone (their own wrap scrolls, the page never sideways); the
   type and category filters of the warehouse list */
.stable td[data-col="name"]{min-width:220px}
.stable td[data-col]:not([data-col="name"]),.stable th{white-space:nowrap}
.stable td[data-col] .rowtext .badge{align-self:flex-end}
.stable td[data-col="first"] .rowtext .badge,.stable td[data-col="name"] .badge{align-self:flex-start}
.stable td[data-col="name"] .chips{gap:0 var(--sp-2);align-items:center}
@media (max-width:720px){.stable td[data-col="name"]{min-width:170px}}
.stable td[data-col="name"] .btn.ghost{padding-left:0;padding-right:0}
.stable tr.detail>td{white-space:normal}
.sfilters{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-3) 0}
.sfilter{display:grid;gap:var(--sp-1);flex:1 1 240px;min-width:0}
.sfilter .field{width:100%}
.toast.undo{display:flex;align-items:center;gap:var(--sp-3)}
.toast.undo .btn{background:var(--surface);color:var(--text)}
@media (max-width:720px){
  .narrow-only{display:inline-flex}
  .xtable thead{display:none}
  .xtable,.xtable tbody,.xtable td{display:block;width:100%}
  .xtable tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--sp-3);border-bottom:1px solid var(--line);padding:var(--sp-3)}
  .xtable td.ph,.xtable td[data-label="Product"],.xtable td[data-label="Settle"],.xtable td[data-label="Who and what"],.xtable td[colspan]{grid-column:1 / -1}
  .xtable .rowtext .badge{align-self:flex-start}
  .xtable td{border:0;padding:var(--sp-1) 0;text-align:left;white-space:normal;min-width:0}
  .xtable td[data-label="Product"]{min-width:0}
  .xtable td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
  .xtable td.ph{width:auto}
  .table-wrap:has(.xtable){overflow-x:visible}
}
/* T819 Addendum 1: the home page per role and its alerts */
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-1)}
.home-role .kpis{margin-bottom:var(--sp-3)}
.alert-list{gap:var(--sp-2)}
.alert-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);margin:0}
.alert-row .rowtext{flex:1 1 280px;min-width:0}
details.settled{margin-top:var(--sp-3)}
details.settled summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.alert-thresholds{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-2) var(--sp-4)}

/* T813: the weekly page's agent picker, the tip's nearest line, the sortable headers, the terms disclosure, the follow-up list */
.bo-tip .row.near .k{color:#fff;font-weight:700}
.agent-pick,.reason-pick{display:flex;flex-wrap:wrap;gap:0 var(--sp-4);align-items:center;margin:var(--sp-2) 0}
.agent-pick .check .sw,.reason-pick .check .sw{width:14px;height:14px;border-radius:3px}
/* T813b: a table's show/hide toggle (DESIGN.md) */
.fold-bar{display:flex;justify-content:flex-end;margin:var(--sp-1) 0}
.fold-box>[hidden]{display:none}
/* T813b mobile round: the week picker wraps and its select shrinks, never cut off at a phone's width */
.week-step{flex-wrap:wrap;min-width:0;max-width:100%}.week-step .field{min-width:0;max-width:100%;flex:1 1 200px}
.reasons{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-3)}
th button.sort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:44px;font:inherit;font-weight:600}
th button.sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details.terms{margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--text-2)}
details.terms summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
details.terms summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details.terms table,details.terms p,details.terms h4{font-size:var(--fs-xs,12px)}
.follow-item{border-top:1px solid var(--line,#e5e5ea);padding:var(--sp-2) 0}
.follow-item:first-of-type{border-top:0}
.follow-step{background:var(--surface-2);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0}
fieldset.follow-kind{border:1px solid var(--line,#e5e5ea)}
fieldset.follow-kind legend{padding:0 var(--sp-2)}
.comment{overflow-wrap:anywhere}

/* T817: What if's lever rows (the six-dot handle, the pick list) and the plan */
.wi-rows th:first-child,.wi-rows td:first-child{min-width:44px;width:44px;padding-right:0}
.wi-rows td.txt{min-width:180px}
.wi-set{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.wi-set .small{white-space:normal}
.wi-handle{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:var(--r-sm);color:var(--text-3);cursor:grab;touch-action:none;letter-spacing:-2px;font-size:18px}
.wi-handle:hover{color:var(--text);background:var(--surface-2)}
.wi-handle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wi-dragging{background:var(--accent-soft)}
.wi-dragging .wi-handle{cursor:grabbing}
.wi-pick{display:flex;flex-direction:column;gap:2px;margin-top:var(--sp-2)}
.wi-pick-row{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;width:100%;min-height:44px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);cursor:pointer;overflow-wrap:anywhere}
.wi-pick-row:hover{background:var(--surface-2)}
.wi-pick-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wi-pick-name{font-weight:600}
.wi-plan .wi-lever{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.wi-plan .wi-lever h3{margin:0 0 var(--sp-1)}
.wi-acts{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.wi-act p{margin:var(--sp-1) 0}
.wi-act.settled{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.wi-plan{overflow-wrap:anywhere}
.wi-plan h3:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wi-check{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;cursor:pointer}
.wi-check input{width:22px;height:22px}
/* T828: Budgets, the years and the list, the row control, the comparison */
.bu-filters{align-items:center;margin-bottom:var(--sp-3)}
.bu-filters .field{max-width:320px}
.bu-years tr.cur th,.bu-years tr.cur td{background:var(--info-soft)}
.bu-list .bu-notes{max-width:280px;white-space:normal}
table.budget .ctl{position:sticky;left:0;z-index:2;background:var(--surface);width:48px;min-width:48px;padding:0}
table.budget thead .ctl{z-index:4;background:var(--surface-2)}
table:has(.ctl).budget .acct{left:48px}
table:has(.ctl).budget .lab{left:112px}
.rowbtn{min-width:44px;min-height:44px;font-weight:700}
table.budget tr.metric td{color:var(--info);font-weight:600}
table.budget tr.diff td{color:var(--text-2);font-style:italic}
table.budget td.mine{font-weight:650;color:var(--text)}
table.bu-compare td.good{color:var(--fine)}
table.bu-compare td.bad{color:var(--late)}
table.bu-compare td .btn.ghost{text-align:left;white-space:normal;min-height:44px}
.bu-menu{display:grid;gap:var(--sp-2)}
.bu-from{border:0;padding:0;margin:var(--sp-2) 0;display:grid;gap:var(--sp-1)}
.bu-from legend{font-weight:600;margin-bottom:var(--sp-1)}
.bu-new{display:grid;gap:var(--sp-1)}
.bu-new .field{width:100%}
@media (max-width:640px){table:has(.ctl).budget .acct{position:static}table:has(.ctl).budget .lab{left:48px}}
.bu-list tbody th a{display:inline-flex;align-items:center;min-height:44px}
table.bu-compare .lab{left:0;min-width:220px}
table.bu-compare thead th{text-align:right}
table.bu-compare thead th.lab{text-align:left}
@media (max-width:640px){table.bu-compare .lab{min-width:140px;max-width:160px}}
/* T802 Addendum 4: a lasting delete, and a disconnected connector's card */
.receipt{display:block}   /* a deleted company's receipt under its audit row (a class: the policy refuses a style attribute) */
.btn.danger{background:var(--late);border-color:var(--late);color:#fff}
.btn.danger:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost.danger{background:transparent;color:var(--late);border-color:transparent}
.card.conn.off{border-style:dashed}
.bu-accts summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.bu-accts table{font-size:var(--fs-xs)}

/* T813 Addendum 1: the Follow-up table (T804b's .xtable, scoped to .ftable): the header stays while the rows scroll
   under it, the comment and the other steps open on hover, focus and tap, more tickets fold into the cell; at a phone's
   width the rows are T804b's labelled cards and the sort is the select; a print leaves out names, addresses and search */
.fscroll{max-height:72vh;overflow:auto}
.ftable thead th{position:sticky;top:0;z-index:2;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.ftable td{vertical-align:top}
.ftable td[data-label="Customer"]{min-width:170px;overflow-wrap:anywhere}
.ftable td[data-label="Reasons"]{min-width:220px}
.ftable td[data-label="Suggested step"]{min-width:220px;max-width:340px}
.ftable td[data-label="Done or ignore"] .chips{flex-wrap:nowrap}
.ftable a.mlink{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.freasons{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:grid;gap:var(--sp-1)}
.texttip{all:unset;cursor:help;display:inline-flex;align-items:center;min-height:44px;color:var(--text-2);text-decoration:underline dotted;text-underline-offset:3px;overflow-wrap:anywhere}
.texttip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more-tickets summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--fs-sm);color:var(--accent)}
.more-tickets summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.more-tickets ul{list-style:none;margin:0;padding:0}
.ffilters{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.fpick{display:grid;gap:2px}
@media (max-width:720px){
  .fscroll{max-height:none;overflow:visible}
  .ftable td[data-label="Customer"],.ftable td[data-label="Reasons"],.ftable td[data-label="Suggested step"],.ftable td[data-label="Done or ignore"]{grid-column:1 / -1;min-width:0;max-width:none}
  .ftable td[data-label="Done or ignore"] .chips{flex-wrap:wrap}
}
@media print{.contact,#f-q{visibility:hidden}}
/* T822: a module's connectors, one per line with its state */
.module-conns { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.module-conns li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; min-height: 28px; }
/* T822: a channel's numbers as label and value rows; the stock page's filters */
table.kv{width:100%;border-collapse:collapse}
table.kv th,table.kv td{padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
table.kv td{text-align:right;font-variant-numeric:tabular-nums}
.filters{margin:var(--sp-4) 0 var(--sp-3)}
.sec-q h3{margin-top:0}


/* T818: the channel checks' sections (Matches, Ignored) open and close; the row's own buttons sit under its status */
summary.h2like { cursor: pointer; font-size: 1.1rem; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 8px; }
summary.h2like:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cfo-table td .chips { margin-top: 6px; flex-wrap: wrap; }
.actlog-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.actlog-filters .field { min-height: 44px; }
.actlog td a { display: inline-flex; align-items: center; min-height: 44px; }
/* T818: on a phone each check row and each log row is a card, so its buttons and its reason are in view */
@media (max-width: 640px) {
  table.checks thead, table.actlog thead { display: none; }
  table.checks, table.checks tbody, table.checks tr, table.checks td,
  table.actlog, table.actlog tbody, table.actlog tr, table.actlog td { display: block; width: 100%; box-sizing: border-box; }
  table.checks tr, table.actlog tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.checks td, table.actlog td { text-align: left; padding: 3px 0; border: 0; }
  table.checks td[data-label]:not([data-label=""])::before, table.actlog td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--text-3); font-weight: 600; }
}
.actlog-sort { display: none; }
@media (max-width: 640px) { .actlog-sort { display: flex; } }

/* T823: an expiry action's email in its drawer */
.em-preview{overflow-wrap:anywhere;border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4);background:var(--surface);margin-bottom:var(--sp-3)}
.em-preview .em-subject{font-weight:650;font-size:var(--fs-lg);margin:0 0 var(--sp-2)}
.em-preview .em-p{margin:0 0 var(--sp-3);max-width:62ch}
.em-preview .em-img{display:block;max-width:100%;width:280px;height:auto;border-radius:var(--r-sm);margin:var(--sp-2) 0 var(--sp-3)}
.em-preview .em-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-sm);background:var(--accent);color:#fff;font-weight:600}
.em-actions{margin-bottom:var(--sp-3)}
.em-sources{overflow-wrap:anywhere;margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.em-list{margin:0 0 var(--sp-2);padding-left:var(--sp-4)}
.em-list li{margin-bottom:var(--sp-1)}
.email-why{display:inline-flex;align-items:center;gap:var(--sp-1)}
/* T827: Tracking. The choice of period, model, level and platform in one wrapping row; the ads table's name column
   stays in view while its many numbers scroll sideways inside their box (the page itself never does); the site
   script's code readable and selectable */
.trk-controls{align-items:flex-end;margin-bottom:var(--sp-3)}
.trk-controls .field-l{min-width:150px}
.trk-table td,.trk-table th{white-space:nowrap;font-variant-numeric:tabular-nums}
.trk-table td.txt:first-child,.trk-table th:first-child{position:sticky;left:0;background:var(--surface);z-index:1;white-space:normal;min-width:220px;max-width:320px}
.trk-table thead th:first-child{z-index:3;background:var(--surface-2)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--sp-3);margin-bottom:var(--sp-3)}
pre.code{white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto;background:var(--surface-2);padding:var(--sp-3);border-radius:6px;font-size:var(--fs-xs)}
@media (max-width:640px){.trk-table td.txt:first-child,.trk-table th:first-child{min-width:150px;max-width:180px}}
.trk-controls .field-l,.form-grid .field-l,.drawer .field-l{display:flex;flex-direction:column;gap:4px}
.trk-table td a{display:inline-flex;align-items:center;min-height:44px}
/* T827a (Jesse, 2026-11-05: "the top row of this table to be sticky ... both on desktop and mobile"): the Tracking
   tables take the house's sticky head (ui.js stickyHead); the corner cell stays over the head as the columns slide */
.trk-table.sticky-head>table>thead>tr>th:first-child{z-index:6}
/* T821: the Spy department */
a.kpi,a.kpi *{text-decoration:none;color:inherit}
.spy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3)}
.spy-find{margin:0;display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.spy-find-body{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.spy-thumb{width:100%;max-height:220px;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-2)}
.spy-prod .spy-thumb,.spy-match-find .spy-thumb{width:64px;height:64px;flex:0 0 64px}
.spy-title{font-size:var(--fs-md);margin:0;overflow-wrap:anywhere}
.spy-text{margin:0;color:var(--text-2);overflow-wrap:anywhere}
.spy-src{overflow-wrap:anywhere;max-width:320px}
.spy-prod{display:flex;gap:var(--sp-2);align-items:flex-start;min-width:240px}
.spy-filters .pfield .field{min-width:150px}
.spy-matches{display:grid;gap:var(--sp-3)}
.spy-match{margin:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp-4)}
.spy-match-find{display:flex;gap:var(--sp-3);align-items:flex-start;min-width:0}
.spy-match-ours p{margin:0 0 var(--sp-1)}
.spy-mail{width:100%;height:70vh;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.spy-plain{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:var(--fs-sm)}
.spy-nlset{display:block}
.spy-nums .field.num{width:140px}
.spy-amz .up{color:var(--fine);font-weight:650}.spy-amz .down{color:var(--late);font-weight:650}
.spy-link{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
.linkbtn{all:unset;cursor:pointer;color:var(--accent);font-weight:600;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.linkbtn:hover{text-decoration:underline}.linkbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:900px){.spy-match{grid-template-columns:minmax(0,1fr)}.spy-filters .pfield,.spy-filters .pfield .field{width:100%;min-width:0}}
.trk-search{display:flex;flex-direction:column;gap:4px;max-width:420px;margin-bottom:var(--sp-3)}
.trk-search input.field[type=search]{flex:0 0 auto}
/* T802 Addendum 2: Marketing, Suggestions (a product's row opens below it) and Company, Marketing rules */
tr.detail>td{background:var(--surface-2,#f6f6f4);padding:var(--sp-3) var(--sp-4)}
.detail-body{display:flex;flex-direction:column;gap:var(--sp-2);max-width:100%;overflow-wrap:anywhere}
.detail-body h3{margin:var(--sp-3) 0 0}
.ai-box{border-top:1px solid var(--line,#ddd);margin-top:var(--sp-3);padding-top:var(--sp-2)}
.check-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto;margin:var(--sp-2) 0}
pre.json-view{white-space:pre-wrap;overflow-wrap:anywhere;max-height:70vh;overflow:auto;background:var(--surface-2,#f6f6f4);padding:var(--sp-3);border-radius:6px}
@media (max-width:900px){tr.detail>td{padding:var(--sp-2)}}
a.lnk{display:inline-flex;align-items:center;min-height:44px}
.sg-acts{margin-top:var(--sp-2);flex-wrap:wrap}.sg-acts .btn{white-space:nowrap}


.conn-title{display:flex;align-items:center;gap:var(--sp-3);min-width:0}.conn-title>div{min-width:0}
.conn-logo{flex:0 0 auto;width:32px;height:32px;object-fit:contain;border-radius:6px}
span.conn-logo.none{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-2);font-weight:600}
.conn-pick .conn-logo{width:40px;height:40px}
li.conn-title .conn-logo{width:24px;height:24px}
.conn-title select.field{flex:1 1 auto;min-width:0;width:auto;max-width:100%}
span.conn-logo.s24{width:24px;height:24px}span.conn-logo.s32{width:32px;height:32px}span.conn-logo.s40{width:40px;height:40px}
.sg-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}.sg-head h2{margin:0}
button.sortbtn{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600}button.sortbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sg-sort{display:flex;flex-direction:column;gap:4px;max-width:360px;margin-bottom:var(--sp-3)}
.sg-tbar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}.sg-tbar .sg-sort{margin-bottom:var(--sp-2)}
@media (min-width:900px){.sg-sort.phone-only{display:none}}
/* T824: the 95 Bulls layer (brand manual pages 15, 17, 18; Jesse 2026-11-04: white backgrounds, no dark colours,
   colour only in thin lines, hovers and the current item). Tokens override design.css here, never in its source.
   The manual's teal #00aa95 is decoration only (2.9:1 on white); text and buttons take the darker #007a6b (5.3:1). */
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/Poppins-Medium.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/Poppins-SemiBold.woff2") format("woff2")}
:root{
  --head:"Poppins",var(--font);
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f6f8fa;--line:#e4e9ef;--line-2:#cfd8e1;
  --text:#383854;--text-2:#4e506a;--text-3:#64687f;
  --accent:#007a6b;--accent-hover:#00665a;--accent-soft:#ebf8f6;--focus:#007a6b;
  --brand-teal:#00aa95;--brand-magenta:#d6306b;--brand-orange:#ffa750;
  --shadow-1:0 1px 2px rgba(56,56,84,.06);--shadow-2:0 8px 28px rgba(56,56,84,.12);--scrim:rgba(56,56,84,.28);
}
a{color:var(--accent)}
h1,h2,h3,.lock h1{font-family:var(--head);font-weight:500;letter-spacing:0}
.shell>.bar{border-bottom:0;box-shadow:none}
.shell>.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--brand-magenta),var(--brand-orange) 50%,var(--brand-teal))}
.bar .name{font-family:var(--head);font-weight:600;gap:var(--sp-2)}
.bar .name img{height:24px;width:auto;display:block}
.lock .mark{height:32px;width:auto;display:block;margin-bottom:var(--sp-3)}
.side .dept:hover,.side .home-link:hover,.side .sub a:hover{background:var(--accent-soft);color:var(--text)}
.side .sub a.cur,.side .home-link.cur{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 0 var(--brand-teal)}
.toast,.tip,.bo-tip{background:var(--surface);color:var(--text);border:1px solid var(--line-2)}
.toast.undo .btn{background:var(--accent);color:var(--on-accent)}
.bo-tip .k{color:var(--text-2)}.bo-tip .row.near .k{color:var(--text)}
.tour-spot{outline-color:var(--brand-teal)}
.field{border-color:#7a8195}   /* a control's own edge, the manual's grey: 3.9:1 on white (code read 1); dividers stay light */
/* the front page at / (T824): the name, the mark, what the tool does, Sign in; no data and no API call */
.front{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-5) var(--sp-4)}
.front-card{max-width:560px;width:100%;border-top:2px solid transparent;border-image:linear-gradient(90deg,var(--brand-magenta),var(--brand-orange),var(--brand-teal)) 1;padding:var(--sp-6) 0 0}
.front-mark{height:56px;width:auto;display:block;margin-bottom:var(--sp-4)}
.front h1{font-size:var(--fs-3xl);margin:0 0 var(--sp-2)}
.front-list{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:var(--sp-2)}
.front-list li{padding-left:var(--sp-4);position:relative;color:var(--text-2)}
.front-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--brand-teal)}
.front .foot{margin-top:var(--sp-5);color:var(--text-3)}
/* T640b: Finance, Savings recommendations (its own layout only) */
.sv-filters{flex-wrap:wrap;align-items:flex-end}
.sv-flags{margin-top:var(--sp-1)}
.sv-table td .rowtext{gap:2px}
.sv-months td,.sv-months th{white-space:nowrap}
.sv-filters .sfilter.narrow-only{display:none}
@media (max-width:720px){.xtable.sv-table td.sv-wide{grid-column:1 / -1}.sv-filters .sfilter.narrow-only{display:grid}}
/* T836: Marketing, Sales per product (its own layout only): the filters in one wrapping row, the circle and the line
   side by side on a wide screen, the trends' pick list in columns, the ring's middle readout and the lit slice and row */
.ps-filters{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.ps-filters .sfilter{flex:1 1 180px}
.ps-charts{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp-4);margin:var(--sp-4) 0}
.ps-charts .card,.ps-trends,.ps-ai{min-width:0}
.ps-trends,.ps-ai{margin:var(--sp-4) 0}
.ps-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-height:280px;gap:0 var(--sp-3)}
.ps-pick .check{min-height:44px;align-items:center}
.ps-pick .sw{width:14px;height:14px;border-radius:3px;flex:0 0 auto}
.ps-pick .sw.off{background:var(--line-2)}
.ps-tview summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.ps-ai h3{margin:var(--sp-4) 0 var(--sp-2)}
.ps-ai > .chips{margin-top:var(--sp-3)}
.ps-tfilters{margin-bottom:var(--sp-2)}
.ps-ring .bo-ring path{cursor:pointer;transition:opacity .12s}
.ps-ring .bo-ring:has(path.on) path:not(.on){opacity:.45}
.bo-ring-k{font-size:11px;fill:var(--text-3)}
.bo-ring-v{font-size:13px;font-weight:600;fill:var(--text)}
.bo-ring-list li{cursor:pointer;border-radius:var(--r-sm,6px);padding:0 var(--sp-1)}
.bo-ring-list li.on{background:var(--surface-2)}
.ps-ring .bo-ring-list li{min-height:44px}
.ps-table tr.total td{background:var(--surface-2)}
@media (max-width:900px){.ps-charts{grid-template-columns:minmax(0,1fr)}}
.ps-rank-in{display:none}
@media (max-width:720px){.xtable td.ps-wide{grid-column:1 / -1}.xtable td.ps-rank{display:none}.ps-rank-in{display:inline}}

/* T824a (Jesse 2026-11-04 21:55: "spacing between text and buttons can still be better"): one rule for every page. A
   row of buttons keeps room from the text under it, buttons after text keep room from it; table cells, a page head's
   own actions, the top bar and the menu keep their spacing (the scope adds no specificity, a page's own rule wins) */
:where(#view,.drawer-body,.lock) :is(.chips,.toolbar){margin-bottom:var(--sp-4)}
:where(#view,.drawer-body,.lock) :is(.chips,.toolbar,.refresh){row-gap:var(--sp-3)}   /* a row that wraps keeps the same room */
:where(#view,.drawer-body,.lock) :is(p,.lead,.notice,h2,h3):not(.btn) + :is(.btn,.chips,.toolbar){margin-top:var(--sp-3)}
:where(#view,.drawer-body,.lock) .btn + :is(p,.notice):not(.btn){margin-top:var(--sp-3)}
:where(td,th,.page-head,.toast) :is(.chips,.toolbar),:is(.chips,.toolbar):last-child,:is(.chips,.toolbar,.refresh) :is(.chips,.toolbar){margin-bottom:0}   /* a group inside a row stays in the row's line */
:where(td,th) :is(.chips,.toolbar){row-gap:var(--sp-2)}
.trk-cov p{margin:0 0 4px}
a.trk-proof{display:inline-flex;align-items:center;min-height:44px}
.trk-warn{color:var(--late);font-weight:600}
.trk-trace td{vertical-align:top;font-variant-numeric:tabular-nums}
.trk-trace td.txt{min-width:120px}
.trk-trace td a{display:inline-flex;align-items:center;min-height:44px}
/* T824a (Jesse 2026-11-05 11:57 Istanbul: "a few pixels larger", "a subtle brand design, not a full border", "the arrow
   in the 95 Bulls dark blue"): one style for every select, the company switcher too. 48 px high and 16 px text (a phone
   does not zoom into it); a light fill with a line on the right and the bottom in the controls' grey (3.9:1, so its edge
   stays visible); the arrow in the manual's typography blue #383854; on hover and focus the bottom line becomes the
   brand line, and the focus ring stays. A select in a table keeps its row's 44 px. `html` raises the rule one element over
   the Testimonials stylesheet's `.rev .field select`, which loads after this file. See agency/back-office/DESIGN.md. */
html select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;min-height:48px;font-size:16px;line-height:1.25;
  padding:0 40px 0 var(--sp-3);border:0;border-radius:var(--r-sm);color:var(--text);cursor:pointer;text-overflow:ellipsis;
  background:url("/assets/select-arrow.svg") no-repeat right 14px center/12px 8px,var(--surface-2);
  box-shadow:inset -1px -1px 0 #7a8195}
html select:not([multiple]):not([size]):hover,html select:not([multiple]):not([size]):focus-visible{
  background:url("/assets/select-arrow.svg") no-repeat right 14px center/12px 8px,
    linear-gradient(90deg,var(--brand-magenta),var(--brand-orange) 50%,var(--brand-teal)) no-repeat left bottom/100% 2px,var(--surface-2);
  box-shadow:inset -1px 0 0 #7a8195}
html select:not([multiple]):not([size]):disabled{cursor:not-allowed;opacity:.6}
html :where(td,th) select:not([multiple]):not([size]){min-height:44px}
button.trk-open{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:44px;text-decoration:underline;text-decoration-color:var(--line,#ccc);text-underline-offset:3px}
button.trk-open:hover{text-decoration-color:currentColor}
button.trk-open:focus-visible{outline:2px solid var(--accent,#0a7);outline-offset:2px}

/* T835: the recent numbers on the Marketing overview and today's revenue on the home page: each box is a button whose
   split opens in the bubble, one line per part */
.tip.tip-lines{display:flex;flex-direction:column;gap:2px;max-width:min(340px,calc(100vw - 16px))}
.recent .recent-row{margin-bottom:var(--sp-4)}
.recent .recent-row h3{margin:0 0 var(--sp-2)}
.recent-kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:var(--sp-3)}
.recent-kpis .n,.today-kpis .n{overflow-wrap:anywhere}
button.recent-box{width:100%}
button.recent-box:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button.recent-box[aria-expanded=true]{border-color:var(--accent)}