/* Client board, in the Funnel Repair Company board design. One design, two looks. Each question sits in its own rounded panel.
   With no brand colors the board is black and white with one accent. A client's own colors come from that client's settings
   file and are applied by the "brand colors" block further down. Nothing here belongs to one client. */
body{--accent:var(--text);--fill:var(--accent);--ink:var(--text);--okfill:var(--good);--hifill:var(--orange);--solid:var(--text);--solidtx:var(--bg);--badgetx:#fff;--h2:var(--text);
  --c1:var(--fill);--c2:var(--fill);--c3:var(--fill);--c4:var(--fill);--c5:var(--slate);--loadbg:#000;--loadbar:#fff}
body[data-theme="dark"]{--bg:#0A0A0B;--panel:#18181B;--text:#F5F3EE;--soft:#A5A5AC;--line:rgba(255,255,255,.12);--field:rgba(255,255,255,.07);--bad:#FF6B8A;--good:#7BDB63;--loss:#F62F58;--orange:#E0703F;--slate:#6E7280;--pop:#F5F3EE;--poptext:#0A0A0B;--track:rgba(255,255,255,.08);--head:#0A0A0B;--tagbg:rgba(123,219,99,.16);--tagtx:#9BE888;--tag2bg:rgba(255,255,255,.08);--tag2tx:#C9C9CF;--cmp:#5AA8FF;--badge:#D81F47;--warnbg:rgba(224,112,63,.16);--warntx:#F2A27E}
body[data-theme="light"]{--bg:#FFFFFF;--panel:#F4F3F0;--text:#111113;--soft:#66666D;--line:rgba(0,0,0,.12);--field:rgba(0,0,0,.05);--bad:#C4262E;--good:#24801A;--loss:#D0312D;--orange:#DD6B33;--slate:#A3A5AD;--pop:#111113;--poptext:#FFFFFF;--track:rgba(0,0,0,.08);--head:#000000;--tagbg:#DDF2D8;--tagtx:#1D6A14;--tag2bg:rgba(0,0,0,.07);--tag2tx:#55555C;--cmp:#1463D6;--badge:#D0312D;--warnbg:#FBE7DA;--warntx:#8F3F10}
:root{--serif:"Instrument Serif",Georgia,serif;--sans:"Instrument Sans",system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:6px}
.headbar :focus-visible{outline-color:#fff}

/* loading and sign-in: the client's logo, on black */
.load{min-height:100vh;display:grid;place-items:center;background:var(--loadbg)}
.load-in{display:grid;justify-items:center;gap:26px;padding:0 24px}
.load img{width:min(300px,72vw);height:auto;max-height:120px;object-fit:contain;display:block}
.load-name{font:400 2.2rem/1.1 var(--serif);color:#fff;text-align:center}
.load-bar{width:120px;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.load-bar i{display:block;width:40%;height:100%;background:var(--loadbar);border-radius:2px;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){.load-bar i{animation:none;width:100%}}
.gate{min-height:100vh;display:grid;place-items:center;padding:30px;background:var(--loadbg);color:#fff}
.gate-in{width:100%;max-width:440px;text-align:center}
.gate img{width:min(300px,72vw);height:auto;max-height:120px;object-fit:contain;margin-bottom:26px}
.gate h1{font:400 2.4rem/1.1 var(--serif);margin:0 0 8px}
.gate p{color:#B5B5BA;margin:0 0 24px}
.gate #sign-in{display:flex;justify-content:center}
.gate #sign-in .cl-header{display:none}
.gate small{display:block;margin-top:26px;color:#8A8A90}
.gate .gnote{border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:14px 16px;background:rgba(255,255,255,.06);text-align:left;font-size:.92rem;margin-bottom:20px;color:#D6D6DA}
.gate .gnote code{font-family:ui-monospace,Menlo,monospace;color:#fff}
.gate .btn{background:#fff;color:#000;border-color:#fff}

/* header */
.headbar{background:var(--head);color:#F5F3EE;position:sticky;top:0;z-index:20}
.top{display:flex;align-items:center;gap:10px;padding:16px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;min-width:0;font:600 1.05rem var(--sans)}
.brand img{height:36px;width:auto;max-width:240px;object-fit:contain;display:block}
.top h1{font:italic 400 2.1rem/1 var(--serif);margin:0 auto 0 16px}
.samp{font:600 .72rem/1 var(--sans);font-style:normal;letter-spacing:0;background:rgba(255,255,255,.14);color:#D6D6DA;border-radius:999px;padding:5px 10px;margin-left:10px;vertical-align:middle;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;border:1px solid rgba(255,255,255,.22);color:#D6D6DA;border-radius:999px;padding:9px 14px;white-space:nowrap;min-height:40px}
.pill.on{background:#F5F3EE;color:#0A0A0B;border-color:#F5F3EE}
.pill::after{content:"";border:4.5px solid transparent;border-top-color:currentColor;border-bottom:0;margin-top:2px}
.icon{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#D6D6DA;display:grid;place-items:center;flex:none}
.icon:hover{border-color:#F5F3EE;color:#fff}
.icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.live{display:inline-flex;align-items:center;gap:8px;color:#A5A5AC;font-size:.88rem;white-space:nowrap;margin-right:4px}
.live i{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.me{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-weight:600;font-size:.85rem;color:#fff;overflow:hidden;flex:none}
.me img{width:100%;height:100%;object-fit:cover;display:block}
.dd{position:relative}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:var(--pop);color:var(--poptext);border-radius:16px;padding:8px;box-shadow:0 24px 60px rgba(0,0,0,.5);z-index:30}
.menu.right{left:auto;right:0}
.menu button,.menu a{display:flex;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-weight:600;font-size:.95rem;text-decoration:none;color:inherit}
.menu button:hover,.menu a:hover{background:rgba(128,128,128,.18)}
.menu button[aria-checked="true"]::after{content:"\2713"}
.menu hr{border:0;border-top:1px solid rgba(128,128,128,.3);margin:6px 0}
.menu-me{padding:8px 12px 10px;min-width:0}
.menu-me b{display:block;font-weight:600}
.menu-me small{display:block;opacity:.7;font-size:.85rem;overflow:hidden;text-overflow:ellipsis}
.menu-org{display:flex;align-items:center;gap:9px;padding:10px 12px;margin-bottom:6px;border-top:1px solid rgba(128,128,128,.3);border-bottom:1px solid rgba(128,128,128,.3);font-size:.88rem;font-weight:600}
.menu-org img{width:20px;height:20px;border-radius:5px;object-fit:cover}
.menu-org em{margin-left:auto;font-style:normal;font-size:.76rem;border:1px solid rgba(128,128,128,.45);border-radius:999px;padding:2px 9px}
.tabs{display:flex;gap:28px;font-weight:600;font-size:.98rem;color:var(--soft);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:16px 0 14px;position:relative;white-space:nowrap;color:inherit}
.tabs button[aria-selected="true"]{color:var(--text)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--fill);border-radius:2px}
.count{font-size:.74rem;background:var(--badge);color:var(--badgetx);border-radius:999px;padding:2px 8px;margin-left:6px}
.lock{font-size:.72rem;font-weight:600;color:var(--tag2tx);background:var(--tag2bg);border-radius:999px;padding:2px 8px;margin-left:7px}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--field);border-radius:14px;padding:12px 16px;margin-top:18px;font-size:.92rem;color:var(--soft)}
.banner b{color:var(--text);font-weight:600}
.banner button{font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--text);white-space:nowrap}

/* panels */
.stack{display:grid;gap:18px;padding:18px 0 0;grid-template-columns:minmax(0,1fr)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel{background:var(--panel);border-radius:28px;padding:30px 34px 32px;min-width:0}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
h2{font:400 2rem/1.1 var(--serif);margin:0 0 6px;color:var(--h2)}
.sub{color:var(--soft);margin:0;max-width:46rem}
.tag{flex:none;font-weight:600;font-size:.76rem;border-radius:999px;padding:4px 11px;white-space:nowrap;background:var(--tag2bg);color:var(--tag2tx)}
.kpis{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--line)}
.kpi{padding:20px 20px 2px 0;border-right:1px solid var(--line);min-width:0}
.kpi + .kpi{padding-left:20px}.kpi:last-child{border-right:0}
.t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.98rem}
.t::before{content:none;width:9px;height:9px;border-radius:50%;background:var(--k,var(--fill));flex:none}
.p{display:block;color:var(--soft);font-size:.88rem;margin-top:1px}
.kpi > b{display:block;font:600 2.05rem/1.15 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:8px 0 4px;overflow-wrap:anywhere}
.kpi small{display:block;color:var(--soft);font-size:.85rem}
.walk-bar{display:flex;height:16px;border-radius:8px;overflow:hidden;margin-top:22px;background:var(--track)}.walk-bar i{display:block}
.legend{display:flex;gap:26px;margin-top:18px;font-size:.92rem;color:var(--soft);flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:8px}.legend i{width:12px;height:12px;border-radius:3px;display:block}.legend b{color:var(--text);font-weight:600}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin-top:16px}
/* A list with every optional column keeps each cell on one line and scrolls inside its own panel, never the page. */
table.wide th,table.wide td{white-space:nowrap}
th{text-align:left;font-weight:500;font-size:.86rem;color:var(--soft);padding:10px 24px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 24px 13px 0;border-bottom:1px solid var(--line);font-size:.97rem;vertical-align:middle}
th:last-child,td:last-child{padding-right:0}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;padding-right:0;padding-left:14px;white-space:nowrap}
td.n b{font-weight:600;font-size:1.05rem}td small{display:block;color:var(--soft);font-size:.85rem}
td b{font-weight:600}
/* A words column that follows a numbers column needs air between them, or the two read as one. */
td.n + td:not(.n),th.n + th:not(.n){padding-left:36px}
td.nw{white-space:nowrap}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who > div{min-width:0}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.78rem;background:var(--field);flex:none}
.who b{display:block;font-weight:600}.who small{display:block;color:var(--soft);font-size:.85rem;white-space:nowrap}
.who a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.who a:hover{text-decoration-color:currentColor}
.who .chip.ph{display:none}
.chip{display:inline-flex;align-items:center;font-weight:600;font-size:.8rem;border-radius:999px;padding:4px 11px;white-space:nowrap;background:var(--field)}
.chip.warn{background:var(--warnbg);color:var(--warntx)}
.chip.bad{background:color-mix(in srgb,var(--loss) 18%,transparent);color:var(--bad)}
.chip.ok{background:var(--tagbg);color:var(--tagtx)}
.chip.off{color:var(--soft)}
.open{display:inline-flex;align-items:center;font-weight:600;font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:4px 11px;margin-right:6px;text-decoration:none;white-space:nowrap}
a.open:hover{border-color:var(--text)}
.open.off{color:var(--soft);cursor:default}
.rows{display:grid;gap:12px;margin-top:22px}
.rowbar{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) 90px;gap:16px;align-items:center}
.rowbar > span{font-size:.95rem;min-width:0;overflow-wrap:anywhere}.rowbar > span small{display:block;color:var(--soft);font-size:.85rem}
.rowbar i{display:block;height:18px;border-radius:9px;min-width:3px;background:var(--fill)}.rowbar > b{font-weight:600;font-size:1.05rem;text-align:right;font-variant-numeric:tabular-nums}
.say{margin:18px 0 0;max-width:50rem;color:var(--soft)}
.say b{color:var(--text);font-weight:600}
.list{display:grid;margin-top:16px}
.li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li > div{min-width:0;margin-right:auto}
.li b{display:block;font-weight:600}.li small{display:block;color:var(--soft);font-size:.88rem}
.chart{margin-top:22px}.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:500 12px var(--sans);fill:var(--soft)}
/* The comparison line has its own color, never the bar's, and keeps its weight when the chart shrinks. */
.chart .cmp,.chart .cmp-gap{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .cmp-gap{stroke:var(--panel);stroke-width:6.5}
.chart .cmp{stroke:var(--cmp);stroke-width:2.6;stroke-dasharray:1 6}
.key{display:flex;gap:20px;margin-top:10px;font-size:.86rem;color:var(--soft);flex-wrap:wrap}
.key span{display:flex;align-items:center;gap:7px}.key i{display:block;width:14px;height:10px;border-radius:3px}.key i.ln{width:18px;height:0;border-top:3px dotted var(--cmp);border-radius:0}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:20px}
.search{flex:1 1 240px;max-width:340px;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:10px 16px;min-height:42px}
.fchip{font-weight:600;font-size:.84rem;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:8px 13px;min-height:38px;white-space:nowrap}
.fchip[aria-pressed="true"]{background:var(--solid);color:var(--solidtx);border-color:var(--solid)}
.btn{display:inline-flex;align-items:center;font-weight:600;font-size:.88rem;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:10px 16px;min-height:42px;white-space:nowrap}
.btn.solid{background:var(--solid);color:var(--solidtx);border-color:var(--solid)}
.btn:disabled{opacity:.6;cursor:default}
.push{margin-left:auto}
.more{display:flex;margin:16px auto 0}
.empty{color:var(--soft);margin:18px 0 0}
.note{background:var(--field);border-radius:14px;padding:12px 16px;margin:14px 0 0;font-size:.92rem;color:var(--soft)}
.note b{color:var(--text);font-weight:600}
.note.warn{background:var(--warnbg);color:var(--warntx);margin:0}
.note.warn b{color:inherit}
.note.tests{margin:0 0 14px}
.note.warn+.note.tests{margin-top:10px}
.seg{display:inline-flex;gap:6px;background:var(--field);border-radius:999px;padding:5px;margin-top:18px}
.seg button{font-weight:600;font-size:.9rem;padding:9px 18px;border-radius:999px;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--solid);color:var(--solidtx)}

/* ask your board */
.ask{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ask input{flex:1 1 300px;background:var(--field);border:1px solid var(--line);border-radius:999px;padding:13px 18px;min-height:48px}
.ask input:focus-visible{outline:2px solid var(--fill);outline-offset:1px;border-radius:999px}
.ask-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.answer{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;max-width:54rem}
.answer b{font-weight:600}
.dot{display:none;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}

/* forms: brand, tools, ad spend */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px;margin-top:22px;max-width:860px}
.field{display:grid;gap:8px;align-content:start;min-width:0}
.field.two{grid-column:1/-1}
.field label,.label{font-weight:600;font-size:.92rem}
.field small{color:var(--soft);font-size:.85rem}
.input,.color input[type=text]{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:11px 13px;min-height:46px;width:100%}
.color{display:flex;gap:8px;align-items:center}
.color input[type=color]{width:50px;height:46px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--field);cursor:pointer;flex:none}
.color input[type=text]{max-width:130px;text-transform:uppercase}
.logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-prev{display:inline-flex;align-items:center;min-height:64px;padding:12px 18px;border-radius:14px;background:var(--head);color:#fff;font-weight:600}
.logo-prev img{height:36px;width:auto;max-width:220px;object-fit:contain;display:block}
.icon-prev{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);background:var(--field);display:grid;place-items:center;overflow:hidden;flex:none}
.icon-prev img{width:100%;height:100%;object-fit:cover}
.link{font-weight:600;font-size:.88rem;color:var(--soft);text-decoration:underline;text-underline-offset:4px;min-height:42px}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.msg{font-size:.9rem;color:var(--soft)}
.msg.bad{color:var(--bad);font-weight:600}
.msg.good{color:var(--good);font-weight:600}
.money{display:inline-flex;align-items:center;gap:6px}
.money span{color:var(--soft)}
.money input{width:120px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:42px;text-align:right;font-variant-numeric:tabular-nums}
.conn{border:1px solid var(--line);border-radius:18px;padding:4px 20px;margin-top:16px}
.conn .li{padding:16px 0}
.conn details{border-top:1px solid var(--line);padding:12px 0 18px}
.conn summary{cursor:pointer;font-weight:600;font-size:.92rem;min-height:38px;display:flex;align-items:center;gap:8px;list-style:none}
.conn summary::before{content:"+";font-weight:600}
.conn details[open] summary::before{content:"\2212"}
.conn summary::-webkit-details-marker{display:none}
.steps{margin:10px 0 4px;padding-left:22px;display:grid;gap:7px;color:var(--soft);font-size:.92rem}
.conn .actions{margin-top:20px;padding-top:18px}
.foot{color:var(--soft);font-size:.86rem;padding:24px 6px 40px}
.ctrls{display:contents}
.bbar{display:none}

/* ---------- brand colors ----------
   Only a board whose settings file sets brand colors gets this block (the page adds data-brand to the body).
   --brand is the client's main color, --accent their second, --hi their highlight, --ok their "good" color.
   Every shade below is mixed from those four, so nothing here names one client's colors. */
body[data-brand]{--loadbg:var(--brand);--loadbar:var(--accent);--head:var(--brand);--badge:var(--hi);--badgetx:var(--brand)}
body[data-brand][data-theme="dark"]{
  --bg:color-mix(in srgb,var(--brand) 44%,#01050A);--panel:color-mix(in srgb,var(--brand) 80%,#101A26);
  --text:#F2F6F8;--soft:#A6B8C7;--line:rgba(255,255,255,.13);--field:rgba(255,255,255,.07);--track:rgba(255,255,255,.09);
  --pop:#F2F6F8;--poptext:var(--brand);
  --fill:var(--accent);--ink:color-mix(in srgb,var(--accent) 72%,#fff);--okfill:var(--ok);--hifill:var(--hi);
  --c1:var(--accent);--c2:var(--hi);--c3:var(--ok);--c4:color-mix(in srgb,var(--accent) 42%,#fff);--c5:#7C8EA0;
  --solid:var(--accent);--solidtx:var(--brand);--cmp:var(--hi);
  --tagbg:color-mix(in srgb,var(--ok) 22%,transparent);--tagtx:color-mix(in srgb,var(--ok) 62%,#fff);
  --warnbg:color-mix(in srgb,var(--hi) 20%,transparent);--warntx:color-mix(in srgb,var(--hi) 78%,#fff);
  --good:color-mix(in srgb,var(--ok) 70%,#fff)}
body[data-brand][data-theme="light"]{
  --bg:#FFFFFF;--panel:color-mix(in srgb,var(--accent) 11%,#F8F9F9);
  --text:#0B1B2B;--soft:#455768;--line:color-mix(in srgb,var(--brand) 16%,transparent);--field:color-mix(in srgb,var(--brand) 6%,transparent);--track:color-mix(in srgb,var(--brand) 9%,transparent);
  --pop:var(--brand);--poptext:#FFFFFF;--h2:var(--brand);
  --fill:color-mix(in srgb,var(--accent) 78%,var(--brand));--ink:color-mix(in srgb,var(--accent) 38%,var(--brand));--okfill:color-mix(in srgb,var(--ok) 86%,var(--brand));--hifill:color-mix(in srgb,var(--hi) 90%,var(--brand));
  --c1:var(--fill);--c2:var(--hifill);--c3:var(--okfill);--c4:var(--brand);--c5:#9AA7B4;
  --solid:var(--brand);--solidtx:#FFFFFF;--cmp:var(--brand);
  --tagbg:color-mix(in srgb,var(--ok) 20%,#fff);--tagtx:color-mix(in srgb,var(--ok) 42%,var(--brand));
  --warnbg:color-mix(in srgb,var(--hi) 30%,#fff);--warntx:color-mix(in srgb,var(--hi) 42%,#1A1400);
  --good:color-mix(in srgb,var(--ok) 50%,var(--brand))}
/* a thin band of the brand's colors under the header */
body[data-brand] .headbar::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--accent) 0 62%,var(--hi) 62% 81%,var(--ok) 81%)}
body[data-brand] .load::before,body[data-brand] .gate::before{content:"";position:fixed;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent) 0 62%,var(--hi) 62% 81%,var(--ok) 81%)}
body[data-brand] .pill.on{background:var(--accent);color:var(--brand);border-color:var(--accent)}
body[data-brand] .tabs button[aria-selected="true"]{color:var(--h2)}
/* each headline number sits on its own tile, tinted with its color */
body[data-brand] .kpis{border-top:0;gap:12px}
body[data-brand] .kpi{border:0;border-radius:18px;padding:18px 18px 16px;background:color-mix(in srgb,var(--k,var(--fill)) 15%,transparent)}
body[data-brand] .kpi + .kpi{padding-left:18px}
body[data-brand] .kpi .t{align-items:flex-start}
body[data-brand] .kpi .t::before{content:"";margin-top:.44em}
body[data-brand][data-theme="dark"] .kpi > b{color:color-mix(in srgb,var(--k,var(--text)) 82%,#fff)}
body[data-brand][data-theme="dark"] .kpi{background:color-mix(in srgb,var(--k,var(--fill)) 17%,transparent)}
body[data-brand] .av{background:color-mix(in srgb,var(--fill) 22%,transparent);color:var(--ink)}
body[data-brand] .who a{text-decoration-color:var(--fill)}
body[data-brand] .chip:not(.ok):not(.warn):not(.bad):not(.off){background:color-mix(in srgb,var(--fill) 17%,transparent);color:var(--ink)}
body[data-brand] .dot{display:inline-block}
body[data-brand] .gate .btn{background:var(--accent);color:var(--brand);border-color:var(--accent)}

@media (max-width:900px){
  .wrap{padding:0 16px}.row2{grid-template-columns:minmax(0,1fr)}.panel{padding:22px 20px 24px;border-radius:22px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.kpi{border-right:0;padding-left:0!important;padding-right:12px;border-bottom:1px solid var(--line);padding-bottom:14px}
  .top h1{font-size:1.6rem}.live{display:none}.rowbar{grid-template-columns:minmax(0,1fr) 70px}.rowbar i{grid-column:1/-1;order:3}
  .headbar{position:static}h2{font-size:1.65rem}.ph{flex-direction:column-reverse;gap:8px}
  .form{grid-template-columns:minmax(0,1fr)}
  body[data-brand] .kpi{padding:16px 16px 14px!important;border-bottom:0}
}

/* On a phone the board works like an app: sections along the bottom, lists as cards, menus as sheets. */
@media (max-width:700px){
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .tabs{display:none}.tabs.back{display:flex}
  .top{gap:8px;padding:12px 0 10px}
  .brand{margin-right:auto}.brand img{height:28px;max-width:200px}
  .top::before{content:"";order:7;flex:0 0 100%;height:0}
  .top h1{order:8;font-size:1.55rem;margin:2px auto 0 0}
  .ctrls{order:9;display:flex;gap:8px;min-width:0}
  .pill{min-height:42px;max-width:56vw;overflow:hidden;text-overflow:ellipsis}
  .menu,.menu.right{position:fixed;left:10px;right:10px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));max-height:66vh;overflow:auto;min-width:0;z-index:60;border-radius:20px;padding:10px}
  .menu button,.menu a{padding:14px 14px;font-size:1rem}
  .banner{flex-direction:column;align-items:flex-start;gap:8px}
  /* The bottom bar holds every section and scrolls sideways. An arrow sits over the edge that has more. */
  .bbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--head);border-top:1px solid rgba(255,255,255,.16)}
  .bnav{position:relative;display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav::-webkit-scrollbar{display:none}
  .bnav button{flex:1 0 auto;display:grid;justify-items:center;gap:3px;padding:7px 9px 6px;min-width:74px;min-height:56px;border-radius:12px;color:#A5A5AC}
  .bnav button[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
  body[data-brand] .bnav button[aria-current="page"]{color:color-mix(in srgb,var(--accent) 78%,#fff);background:color-mix(in srgb,var(--accent) 16%,transparent)}
  body[data-brand] .bnav button{color:#A6B8C7}
  .bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .bnav span{font-weight:600;font-size:.7rem;white-space:nowrap;display:flex;align-items:center;gap:4px}
  .bnav span i{font-style:normal;font-size:.64rem;background:var(--badge);color:var(--badgetx);border-radius:999px;padding:0 5px}
  .bgo{position:absolute;top:0;bottom:0;width:46px;display:flex;align-items:center;color:#F5F3EE;padding-bottom:env(safe-area-inset-bottom,0px)}
  .bgo.r{right:0;justify-content:flex-end;padding-right:5px;background:linear-gradient(90deg,transparent,var(--head) 58%)}
  .bgo.l{left:0;justify-content:flex-start;padding-left:5px;background:linear-gradient(270deg,transparent,var(--head) 58%)}
  .bgo svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .kpi > b{font-size:1.6rem}
  .tools .push{margin-left:0}.search{max-width:none}
  .tools:has(.fchip){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px}
  .tools::-webkit-scrollbar,.ask-chips::-webkit-scrollbar{display:none}
  .ask{flex-wrap:nowrap}.ask input{flex:1 1 0;min-width:0}
  .ask-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px}.ask-chips > *{flex-shrink:0}
  .tools:has(.fchip) .search{flex:0 0 200px}.tools:has(.fchip) > *{flex-shrink:0}
  .scroll:has(table.cards){overflow:visible}
  table.cards,table.cards tbody{display:block}table.cards thead{display:none}
  table.cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
  table.cards tr:last-child{border-bottom:0;padding-bottom:0}
  table.cards td,table.cards td.n{display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0;overflow-wrap:anywhere}
  table.cards td::before{content:attr(data-label);display:block;font-size:.76rem;color:var(--soft);margin-bottom:2px}
  table.cards td:first-child,table.cards td.full{grid-column:1/-1}
  table.cards td:first-child::before,table.cards td[data-label=""]::before{display:none}
  table.cards td:empty{display:none}
  table.cards td.n b{font-size:1.02rem}
  table.cards td.n + td:not(.n){padding-left:0}
  .who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* A person on a phone: who they are and where they stand on top, then the facts in two columns. */
  table.cards td.stg{display:none}
  .who .chip.ph{display:inline-flex;margin-left:auto;flex:none}
  .money input{width:100%}.money{display:flex}
  .foot{padding-bottom:20px}
}

/* eComEngine: the Questions tab (one question per row, answer box under it) */
.qlist .q{display:grid;gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.qlist .q:first-child{border-top:0;padding-top:4px}
.qlist .q > b{font-weight:600}
.qlist .q small{color:var(--soft);font-size:.88rem}
.qlist .q textarea{width:100%;min-height:84px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--field);resize:vertical}
.qlist .q .answer{margin:0;border-top:0;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ok,var(--good)) 14%,transparent)}
.qlist .q .actions{margin-top:2px;padding-top:0;border-top:0}