/* =====================================================================
   UX layer — "Salesforce structure, Apple finish", in Tieto brand colours.
   Loaded after styles.css. Softer materials, larger radii, layered shadows,
   segmented controls and switches, motion on navigation, and the R5 components.
   Components use the semantic tokens below (they carry the dark-mode values),
   never a raw brand colour such as --indigo, --mist or #fff for text on a fill.
   ===================================================================== */
:root{
  /* radius scale */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --r:var(--radius-md); --r-sm:var(--radius-sm);
  /* type scale */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-30:30px;
  --shadow:0 0 0 .5px rgba(2,30,87,.06),0 1px 2px rgba(2,30,87,.05),0 8px 24px -10px rgba(2,30,87,.12);
  --shadow-hover:0 0 0 .5px rgba(2,30,87,.08),0 2px 4px rgba(2,30,87,.06),0 18px 40px -14px rgba(2,30,87,.22);
  --ease:cubic-bezier(.2,.8,.2,1);
  --glass:rgba(252,250,247,.72);
  /* semantic colours */
  --field-line:#8C8784;            /* form-control borders, 3.55:1 on white */
  --accent-text:var(--accent);     /* accent used as text: indigo in light, sky in dark */
  --on-accent:#fff;                /* text and icons on an accent fill */
  --on-ok:#fff;                    /* tick on a green fill */
  --fill-done:var(--mist); --on-fill-done:var(--navy);   /* completed path steps */
  --seg-on:var(--surface); --seg-on-ring:0 1px 3px rgba(2,30,87,.14),0 0 0 .5px rgba(2,30,87,.06);   /* selected segment */
  --hover-strong:var(--mist);
  --hub-ring:var(--navy);          /* ring round the navy hub circle of the buying-group and partner maps */
  --primary-hover:var(--navy);
  --heat-lo:var(--navy);           /* text on a pale heat-map cell */
}
@media (prefers-color-scheme:dark){:root{
  --shadow:0 0 0 .5px rgba(194,211,255,.10);--shadow-hover:0 0 0 .5px rgba(194,211,255,.2),0 18px 40px -14px rgba(0,0,0,.5);--glass:rgba(1,22,64,.72);
  --field-line:color-mix(in srgb,#839DF9 70%,#06235F);   /* 3.6:1 on the dark surface */
  --on-accent:#000F33; --on-ok:#000F33;                  /* navy on sky: 7.3:1 */
  --fill-done:#25498F; --on-fill-done:#F4F6FF;
  --seg-on:#25498F; --seg-on-ring:inset 0 0 0 1.5px #839DF9;
  --hover-strong:#25498F; --hub-ring:#839DF9; --primary-hover:#C2D3FF; --heat-lo:#F4F6FF;
  /* chart series: the brand ramp mirrored for a dark ground, lightest = most emphasis (replaces the off-palette #A3A2FF and #25498F) */
  --s1:#F4F6FF; --s2:#C2D3FF; --s3:#839DF9; --s4:#4E60E7; --s5:#3531CF;
}}
body{letter-spacing:-.006em;text-rendering:optimizeLegibility}
::selection{background:var(--mist);color:var(--navy)}

/* materials */
.card,.viz{border-radius:var(--r);border:0;box-shadow:var(--shadow);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.viz:hover{box-shadow:var(--shadow-hover)}
.card>.ch{padding:14px 18px;border-bottom:1px solid var(--line)}
.card>.ch h2,.viz .vh h2{font-size:var(--fs-16);font-weight:600;letter-spacing:-.01em}
.viz{padding:16px 18px;gap:12px;align-content:start}
.viz .key{border-radius:var(--radius-sm);border-left:0;box-shadow:inset 3px 0 0 var(--signal)}
.callout{border-radius:var(--radius-sm);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.callout.bad{box-shadow:inset 0 0 0 1px var(--bad)} .callout.warn{box-shadow:inset 0 0 0 1px var(--warn)} .callout.ok{box-shadow:inset 0 0 0 1px var(--ok)}
.card.stone{box-shadow:none}

/* page header: large title + "highlights panel" stat strip */
.phead{padding:26px 32px 10px;gap:18px 32px}
.phead h1{font-size:var(--fs-30);font-weight:500;letter-spacing:-.022em;line-height:1.12}
.phead .eyebrow{letter-spacing:.06em}
.strip{background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:6px 4px}
.stat{border-left-color:var(--line);padding:6px 18px}
.stat b{font-size:var(--fs-24);font-weight:500;letter-spacing:-.02em;color:var(--accent-text)}
.wrap{padding:18px 32px 48px}
@media (max-width:900px){.phead,.wrap{padding-left:16px;padding-right:16px}}

/* navigation motion */
.nav-anim #view>*{animation:rise .42s var(--ease) both}
.nav-anim #view>*:nth-child(2){animation-delay:.04s}.nav-anim #view>*:nth-child(3){animation-delay:.08s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nav-anim #view>*{animation:none}}

/* sidebar: brand navy, pill selection */
.side{background:var(--navy)}
.side .grp{color:rgba(194,211,255,.72)}   /* 6.1:1 on navy (was .55, 4.1:1) */
.nav-i{border-radius:var(--radius-sm);padding:8px 11px;transition:background .2s var(--ease),color .2s}
.nav-i[aria-current=page]{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
.side .find{border-radius:var(--radius-sm);background:rgba(255,255,255,.08);border-color:rgba(194,211,255,.16)}
.side .modes{margin:2px 14px 6px;display:grid;gap:6px}
.side .sw{display:flex;background:rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:2px}
.side .sw button{flex:1;border:0;background:none;color:var(--on-navy-muted);font-size:var(--fs-12);font-weight:500;padding:5px 6px;border-radius:calc(var(--radius-sm) - 2px);white-space:nowrap;transition:background .2s var(--ease),color .2s}
.side .sw button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.side .btn.ghost:hover{color:var(--on-navy)}   /* the generic red ghost hover is unreadable on navy */
.shell.mini .side .modes{display:none}

/* controls */
.btn{border-radius:var(--radius-sm);padding:7px 14px;transition:background .2s var(--ease),border-color .2s,color .2s,transform .12s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 1px 2px rgba(53,49,207,.35),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-accent)}
.btn.sm{padding:4px 10px;border-radius:calc(var(--radius-sm) - 1px)}
.btn .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],input[type=password],select,textarea{border-radius:var(--radius-sm);padding:7px 11px;border-color:var(--field-line);transition:border-color .2s,box-shadow .2s}
input[type=password]{background:var(--surface);border:1px solid var(--field-line);width:100%;min-width:0}
input:hover,select:hover,textarea:hover{border-color:var(--accent)}
input:disabled:hover,select:disabled:hover,textarea:disabled:hover{border-color:var(--field-line)}
/* focus: a solid 1px accent ring outside the accent border (2px of accent, 7.6:1 light, 5.8:1 dark), then the soft halo */
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=search]{border-radius:var(--radius-pill);padding-left:14px}
.seg{background:var(--stone);border:0;border-radius:var(--radius-sm);padding:2px;gap:2px}
.seg a,.seg button{border:0!important;border-radius:calc(var(--radius-sm) - 2px);padding:5px 13px;transition:background .2s var(--ease),color .2s}
.seg [aria-pressed=true],.seg [aria-current=page]{background:var(--seg-on);color:var(--fg);box-shadow:var(--seg-on-ring)}
.chip{border-radius:var(--radius-pill)}
.q{transition:background .2s}

/* switch (Apple-style) */
.switch{position:relative;display:inline-block;width:42px;height:25px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:var(--line-strong);border-radius:var(--radius-pill);transition:background .25s var(--ease);cursor:pointer}
.switch span::after{content:"";position:absolute;left:2px;top:2px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.switch input:checked+span{background:var(--ok)}
.switch input:checked+span::after{transform:translateX(17px)}
.switch input:disabled+span{opacity:.45;cursor:not-allowed}
.switch input:focus-visible+span{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}

/* tables & lists */
table.t th{background:transparent;text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-11);border-bottom:1px solid var(--line-strong)}
table.t tr.click:hover td{background:var(--accent-soft)}
/* sortable headers are buttons (aria-sort on the th) */
table.t th button[data-sort]{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:24px;border-radius:var(--radius-xs)}
table.t th button[data-sort]:hover,table.t th[aria-sort=ascending] button,table.t th[aria-sort=descending] button{color:var(--fg)}
/* inline table fields: a dashed underline says "editable" before hover (they were invisible until hover) */
table.t input:not([type=checkbox]):not([type=radio]),table.t select{border-color:transparent;border-bottom:1px dashed var(--field-line);border-radius:var(--radius-xs) var(--radius-xs) 0 0}
table.t input:not([type=checkbox]):not([type=radio]):hover,table.t input:not([type=checkbox]):not([type=radio]):focus,table.t select:hover,table.t select:focus{border:1px solid var(--accent);border-radius:var(--radius-xs);background:var(--surface)}
table.t input:not([type=checkbox]):not([type=radio]):disabled,table.t select:disabled{border-bottom-color:transparent}
.list>li{transition:background .15s}

/* records: Salesforce highlights + path, softened */
.rec-head{padding:18px 20px}
.rec-head h2,.rec-head .rec-title{font-size:var(--fs-24);font-weight:500;letter-spacing:-.018em}
.rec-head .rec-title{margin:0;line-height:1.25;color:var(--fg)}   /* the record name without a second heading (the page H1 already names it) */
.path{gap:6px;padding:12px 20px}
.step{border-radius:var(--radius-sm);clip-path:none;padding:8px 12px}
.step:first-child{padding-left:12px;clip-path:none}
.step i{color:var(--accent-text)}
.step.done{background:var(--fill-done);color:var(--on-fill-done)}   /* "1%" was 3.6:1 light, 1:1 dark */
.step.done b,.step.done i{color:var(--on-fill-done)}
.step.cur{background:var(--accent);color:var(--on-accent)} .step.cur b,.step.cur i{color:var(--on-accent)}
.rail .box{border-radius:var(--radius-md);border:0;box-shadow:var(--shadow)}
.rtabs a{padding:12px 14px}
.rtabs a[aria-current=page]{border-bottom-width:2.5px;border-bottom-color:var(--accent)}
.el{border-radius:var(--radius-md)}
.el-h h4 .k,.big,.brief .bn,.col-h .nm i{color:var(--accent-text)}
.col-h{border-bottom-color:var(--accent)}
.acc-r[aria-current=true],.deal-r[aria-current=true]{border-left-color:var(--accent)}
.q[aria-expanded=true],.lv[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lv:hover{border-color:var(--accent)}
.bar i,.radar div b i{background:var(--accent)}
.coach-brief{border-top-color:var(--accent)}
.dcard{border-radius:var(--radius-sm);transition:transform .2s var(--ease),box-shadow .2s}
.dcard:hover{transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.col{border-radius:var(--radius-md)}
.tile{border-radius:var(--radius-sm);transition:border-color .2s,transform .2s var(--ease)}
.tile:hover{transform:translateY(-1px)}

/* modal sheets */
.modal-bg{background:rgba(2,30,87,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal{border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(2,30,87,.35),0 0 0 .5px rgba(2,30,87,.1);animation:sheet .32s var(--ease) both}
.modal .mf{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
@keyframes sheet{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.toast{border-radius:var(--radius-pill);padding:10px 18px;background:rgba(2,30,87,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(2,30,87,.3);transition:opacity .25s,transform .25s var(--ease);transform:translate(-50%,8px)}
.toast.on{transform:translate(-50%,0)}

/* ================= Drill-down ================= */
[data-drill]{cursor:pointer}
.stat[data-drill]{border-radius:var(--radius-sm);transition:background .2s var(--ease)}
.stat[data-drill]:hover{background:var(--accent-soft)}
.stat[data-drill]:hover span{color:var(--accent)}
.fr[data-drill]{border-radius:var(--radius-sm);padding:2px 4px;margin:0 -4px;transition:background .15s}
.fr[data-drill]:hover,.hb[data-drill]:hover,.legend span[data-drill]:hover,.cf-row[data-drill]:hover,.bullet[data-drill]:hover{background:var(--accent-soft);border-radius:var(--radius-sm)}
.legend span[data-drill]{padding:3px 6px;margin:-3px -6px;border-radius:var(--radius-sm)}   /* 24px target */
svg [data-drill]{transition:opacity .15s}
svg [data-drill]:hover{opacity:.78}
.heat i[data-drill]:hover{outline:2px solid var(--accent);outline-offset:1px}
.sc-kpi div[data-drill]:hover,.wk div[data-drill]:hover{background:var(--accent-soft)}
.chip[data-drill]:hover{filter:brightness(.95);box-shadow:0 0 0 1px currentColor}
.col-h[data-drill]:hover .nm{color:var(--accent)}
.key[data-drill]:hover{box-shadow:inset 3px 0 0 var(--signal),0 0 0 2px var(--peri)}
[data-drill]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sheet{width:min(1080px,100%)}
.sheet .mh .eyebrow{font-size:10.5px}
.dr-stbar{display:flex;gap:3px;border-radius:var(--radius-sm);overflow:hidden}
.dr-stbar button{border:0;background:var(--accent-soft);padding:7px 9px;text-align:left;display:grid;gap:0;min-width:0;transition:background .15s}
.dr-stbar button:hover{background:var(--hover-strong)}
.dr-stbar b{font-size:var(--fs-11);color:var(--accent-text)} .dr-stbar span{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dr-stbar em{font-style:normal;font-weight:700;font-size:var(--fs-13)}
.sheet table.t button.chip{border:0;cursor:pointer}
.sheet table.t button.chip:hover{box-shadow:0 0 0 1px currentColor}
tr.dr-g td{background:var(--stone);border-bottom:1px solid var(--line-strong)}
.pref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.pref-grid p{margin:4px 0 10px}

/* ================= KPI strip: one component (.kpis), shared by .wk, .dr-kpi, .sc-kpi, .firmo and .explain =================
   stone panel, --line dividers, 20px/500 accent number over a 12px muted label */
.kpis,.wk,.dr-kpi,.sc-kpi,.firmo,.explain{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;background:var(--stone);border-radius:var(--radius-md)}
.kpis>*,.wk>div,.dr-kpi>div,.sc-kpi>div,.firmo>div,.explain>div{padding:10px 14px;border-left:1px solid var(--line);min-width:0}
.kpis>:first-child,.wk>div:first-child,.dr-kpi>div:first-child,.sc-kpi>div:first-child,.firmo>div:first-child,.explain>div:first-child{border-left:0}
.kpis b,.wk b,.dr-kpi b,.sc-kpi b,.explain b{display:block;font-size:var(--fs-20);font-weight:500;line-height:1.2;letter-spacing:-.015em;color:var(--accent-text)}
.kpis span,.wk span,.dr-kpi span,.sc-kpi span,.explain span{display:block;font-size:var(--fs-12);color:var(--muted);line-height:1.35}
.sc-kpi{grid-template-columns:repeat(3,1fr)} .sc-kpi>div{padding:8px 10px}
.firmo span{text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-11);color:var(--muted);display:block}
.firmo b{font-size:var(--fs-14);font-weight:600;color:var(--fg)}
/* in a narrow card the three-column explainer keeps "24,99 M€" on one line */
.explain{container-type:inline-size}
.explain b{white-space:nowrap}
@container (max-width:420px){.explain>div{padding:8px 10px}.explain b{font-size:var(--fs-16)}}
@container (max-width:300px){.explain b{font-size:var(--fs-14)}}

/* ================= Tasks ================= */
.tk-card{overflow:hidden}
.qadd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.qadd:focus-within{box-shadow:inset 0 -2px 0 var(--accent)}   /* the borderless quick-add had no focus indicator */
.qadd-plus{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;flex:none}
.qadd input{border:0!important;box-shadow:none!important;padding:6px 2px;background:transparent;font-size:14.5px}
.rail .qadd{padding:0;border:0}
.rail .qadd:focus-within{box-shadow:none}
.rail .qadd input{border:1px solid var(--field-line)!important;padding:6px 10px;border-radius:var(--radius-sm);font-size:var(--fs-13)}
.rail .qadd input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent),0 0 0 4px var(--accent-soft)!important}
.rail .qadd .qadd-plus,.rail .qadd .btn{display:none}
.tk-group{padding:4px 0 8px}
.tk-group h3{margin:0;padding:12px 18px 4px;font-size:var(--fs-12);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:center}
.tk-group h3 span{background:var(--stone);border-radius:var(--radius-pill);padding:0 7px;font-size:var(--fs-11);letter-spacing:0}
.tk-group.overdue h3{color:var(--bad)}
.tk-list{list-style:none;margin:0;padding:0}
.tk{display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.tk:last-child{border-bottom:0}
.tk:hover{background:var(--accent-soft)}
.tk-list.compact .tk{padding:7px 0;gap:9px}
.tk-check{width:20px;height:20px;border-radius:50%;border:1.8px solid var(--line-strong);background:var(--surface);flex:none;padding:0;position:relative;transition:all .2s var(--ease)}
.tk-check::before{content:"";position:absolute;inset:-3px}   /* 26px target */
.tk-check.p1{border-color:var(--bad)} .tk-check.big{width:26px;height:26px}
.tk-check:hover{border-color:var(--ok);background:var(--ok-bg)}
.tk-check[aria-pressed=true]{background:var(--ok);border-color:var(--ok)}
.tk-check[aria-pressed=true]::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid var(--on-ok);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tk-check.big[aria-pressed=true]::after{left:8.5px;top:4px;width:6px;height:11px}
.tk-main{flex:1;min-width:0;cursor:pointer}
.tk-t{font-weight:500;line-height:1.35}
.tk.done .tk-t{color:var(--muted);text-decoration:line-through}
.tk-t .flag{color:var(--bad);font-weight:700;margin-right:6px}
.tk-m{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--fs-12);color:var(--muted);margin-top:2px}
.tk-rel{display:inline-flex;align-items:center;gap:5px}
.tk-src{font-size:var(--fs-11);font-weight:500;color:var(--muted)}
.tk-src.auto{color:var(--accent)} .tk-src.sq{color:var(--s3)} .tk-src.intel{color:var(--ok)} .tk-src.doing{color:var(--warn)}
.tk-due{font-size:var(--fs-12);font-weight:500;color:var(--muted);white-space:nowrap}
.tk-due.bad{color:var(--bad)} .tk-due.warn{color:var(--warn)}
.tk-foot{padding:8px 12px;border-top:1px solid var(--line);display:flex;justify-content:center}
.tk-empty{padding:18px;text-align:center;color:var(--muted);font-size:var(--fs-13);list-style:none}
.tboard{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px;overflow-x:auto}
.tcol{background:var(--stone);border-radius:var(--radius-md);min-height:300px;padding-bottom:8px}
.tcol.over{outline:2px dashed var(--accent);outline-offset:-3px}
.tcol-h{display:flex;justify-content:space-between;padding:12px 14px 8px;font-size:var(--fs-13)}
.tcol-h span{color:var(--muted)}
.tcol .tk{background:var(--surface);margin:6px 8px;border-radius:var(--radius-sm);border:0;box-shadow:var(--shadow);padding:10px 12px;cursor:grab}
.drawer{width:min(680px,100%)}
.tk-title-in{font-size:18px;font-weight:500;border:0!important;box-shadow:none!important;padding:4px 0!important;background:transparent}
.tk-title-in:focus{box-shadow:inset 0 -2px 0 var(--accent)!important}
.cm-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cm-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.cm-b{margin-top:2px;white-space:pre-wrap}
.mention{color:var(--accent);font-weight:600}

/* ================= Sales Manager cockpit ================= */
.heat{display:grid;gap:4px}
.heat{overflow-x:auto}
.heat .hr{display:grid;grid-template-columns:minmax(90px,150px) repeat(8,minmax(24px,1fr));gap:4px;align-items:center}
.heat .hn{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}
/* the number switches from navy to white once the cell is dark enough (--t is 0 or 1; .65 is where both reach about 4:1) */
.heat i{--t:clamp(0,(var(--a) - .65) * 1000,1);height:24px;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--indigo) calc(var(--a)*100%),var(--stone));display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:600;color:color-mix(in srgb,#fff calc(var(--t)*100%),var(--heat-lo))}
.heat .axis span{font-size:10.5px;color:var(--muted);text-align:center}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.sc{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:grid;gap:12px;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.sc:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.sc header{display:flex;align-items:center;gap:12px}
.sc header .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--peri));color:#fff;display:grid;place-items:center;font-weight:600;flex:none}
.sc header div{flex:1;min-width:0;display:grid}
.sc header b{font-size:15px}
.sc header span{font-size:var(--fs-12);color:var(--muted)}
.sc header svg{width:54px!important;height:auto;flex:none}
.sc-chips{display:flex;flex-wrap:wrap;gap:5px}
.sc footer{display:flex;gap:6px;flex-wrap:wrap}

/* ================= Market intelligence ================= */
.tagbar{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 14px}
/* topic filters: the same pills and selected state as .seg.subnav */
.tg-f{border:0;background:var(--stone);border-radius:var(--radius-pill);padding:5px 12px;min-height:30px;font-size:12.5px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:background .2s var(--ease),color .2s}
.tg-f:hover{color:var(--fg)}
.tg-f::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.tg-f.on,.tg-f[aria-pressed=true]{background:var(--seg-on);color:var(--fg);box-shadow:var(--seg-on-ring)}
.tg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--fg);background:var(--stone);border-radius:var(--radius-pill);padding:1px 9px 1px 7px}
.tg::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.nw-feed{overflow:hidden}
.nw{display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.nw:last-child{border-bottom:0}
.nw:hover{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.nw.sig{box-shadow:inset 3px 0 0 var(--bad)}
.nw-topic{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:18px}
.nw-m{font-size:var(--fs-12);color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.nw-m a{font-weight:600}
.nw-t{display:block;font-size:var(--fs-16);font-weight:500;line-height:1.35;color:var(--fg);margin:3px 0 4px;letter-spacing:-.01em}
.nw-t:hover{color:var(--accent);text-decoration:none}
.nw-s{margin:0 0 6px;font-size:var(--fs-13);color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-tags{display:flex;flex-wrap:wrap;gap:5px}
.nw-a{display:flex;flex-direction:column;gap:5px;align-items:stretch;opacity:.55;transition:opacity .2s}
.nw:hover .nw-a,.nw:focus-within .nw-a{opacity:1}
@media (max-width:700px){.nw{grid-template-columns:auto 1fr}.nw-a{grid-column:1/-1;flex-direction:row;opacity:1}}
.sig-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sig-list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-13);line-height:1.35}
.sig-list a{color:var(--fg);font-weight:500}
.sig-list span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ================= Automations & sequences ================= */
.flow{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.fl-s{flex:1;min-width:130px;background:var(--stone);border-radius:var(--radius-md);padding:12px;display:grid;gap:2px;align-content:start}
.fl-s b{font-size:13.5px}
.fl-s span:last-child{font-size:var(--fs-12);color:var(--muted)}
.fl-i{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--navy);color:var(--signal);display:grid;place-items:center;font-weight:700;margin-bottom:6px}
.fl-a{align-self:center;color:var(--muted);font-size:18px}
.au-cat{margin-top:22px}
.au-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.au-h h2{margin:0;font-size:18px;font-weight:500;letter-spacing:-.015em}
.au-h span{color:var(--muted);font-size:var(--fs-13)}
.au-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.au{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:grid;gap:10px;opacity:.72;transition:opacity .25s,box-shadow .3s var(--ease)}
.au.on{opacity:1}
.au:hover{box-shadow:var(--shadow-hover)}
.au header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.au header b{font-size:14.5px}
.au p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}
.au-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;font-weight:500}
.au-flow .when,.au-flow .then{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-xs);padding:2px 7px}
.au-flow .when{background:var(--accent-soft);color:var(--accent)} .au-flow .then{background:var(--ok-bg);color:var(--ok)}
.au-p{display:flex;gap:10px;flex-wrap:wrap}
.au-p label{font-size:var(--fs-12);color:var(--muted);display:flex;align-items:center;gap:6px}
.au-p input{width:100px}
.au footer{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.seq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:14px}
.seq{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:grid;gap:14px;border:0;text-align:left}
.seq header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.seq header div:first-child{display:grid;gap:2px;min-width:0}
.seq header b{font-size:14.5px}
.seq header span{font-size:var(--fs-12);color:var(--muted)}
.seq footer{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.seq.new{place-items:center;align-content:center;min-height:180px;cursor:pointer;background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--muted)}
.seq.new:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
.seq.new span{font-size:var(--fs-30);line-height:1}
.seq-tl{position:relative;height:46px;margin:0 16px}
.seq-line{position:absolute;left:0;right:0;top:14px;height:2px;background:var(--line);border-radius:2px}
.seq-dot{position:absolute;top:0;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow);display:grid;place-items:center;font-size:var(--fs-12);font-weight:700;color:var(--accent)}
.seq-dot em{position:absolute;top:33px;font-style:normal;font-size:10px;color:var(--muted);font-weight:500}
.seq-dot.t-call{color:var(--ok)} .seq-dot.t-linkedin{color:var(--s3)} .seq-dot.t-task{color:var(--warn)}
.st-head{display:grid;grid-template-columns:70px 120px 1fr 34px;gap:8px;font-size:var(--fs-11);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.st-row{display:grid;grid-template-columns:70px 120px 1fr 34px;gap:8px;padding:10px;background:var(--stone);border-radius:var(--radius-md);margin-bottom:8px}
.st-row textarea{grid-column:1/-1;min-height:48px}
.integ{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:grid;gap:10px}
.integ header{display:flex;justify-content:space-between;align-items:center}
.integ p{margin:0;font-size:var(--fs-13);color:var(--muted)}

/* R6: Today timeline, weekly trend, AI coach */
.tl-ic{width:20px;height:20px;flex:none;display:grid;place-items:center}.tl-ic::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--accent)}.tl-ic.ns::before{background:var(--s2)}.tl-ic.map::before{background:var(--s3)}.tl-ic.lead::before{background:var(--warn);border-radius:50%}
.tl-k{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.tl-k.ns{color:var(--s2)} .tl-k.map{color:var(--s3)} .tl-k.lead{color:var(--warn)}
.tl-x{cursor:pointer} .tl-x:hover{background:var(--stone)}
.tl-news{margin:4px 18px 6px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--stone);display:grid;gap:6px}
.tl-nh{font-size:var(--fs-11);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.tl-n{display:flex;gap:9px;align-items:center;color:var(--fg);text-decoration:none;font-size:var(--fs-13);line-height:1.35}
.tl-n:hover b{color:var(--accent)} .tl-n span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-12);color:var(--muted)}
.tr-key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tr-key i.ln{height:3px;border-radius:2px;vertical-align:2px;width:14px}
.ai-box{background:linear-gradient(160deg,rgba(53,49,207,.07),rgba(131,157,249,.05));box-shadow:inset 0 0 0 1px rgba(53,49,207,.18)}
.ai-box h3 .chip{margin-left:auto}
.ai-sum{font-size:13.5px;line-height:1.5;margin:0}
.ai-h{font-size:var(--fs-11);letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-top:4px}
.ai-list{margin:0;padding-left:18px;display:grid;gap:5px;font-size:var(--fs-13);line-height:1.4}
.ai-mail{background:var(--surface);border-radius:var(--radius-sm);padding:10px 12px;font-size:12.5px;white-space:pre-wrap;line-height:1.45;max-height:220px;overflow:auto;box-shadow:inset 0 0 0 1px var(--line)}
.ai-meta{font-size:11.5px;color:var(--muted)}
.ai-load{display:flex;gap:8px;align-items:center;font-size:var(--fs-13);color:var(--muted)}
.ai-load::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--mist);border-top-color:var(--accent);animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* R7: GTM director layer */
.gbar{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin-bottom:4px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow)}
.gbar .gb-l{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-right:2px}
.gbar select{width:auto;min-width:150px;max-width:240px}.gbar .seg{width:auto;flex:none}.gbar>*{flex:none}
.subbar{margin:-4px 0 14px}
.seg.subnav{background:transparent;padding:0;gap:4px;flex-wrap:wrap}
.seg.subnav a,.seg.subnav button{background:var(--stone);font-size:var(--fs-13);min-height:30px;display:inline-flex;align-items:center}
/* .seg.subnav a outranks .seg [aria-current], so the selected pill needs its own rule (it stayed stone) */
.seg.subnav [aria-current=page],.seg.subnav [aria-pressed=true]{background:var(--seg-on);color:var(--fg);box-shadow:var(--seg-on-ring)}
.toast button{margin-left:10px;border:0;border-radius:var(--radius-pill);padding:3px 11px;background:#fff;color:var(--navy);font-weight:600;cursor:pointer;pointer-events:auto}
.toast.on{pointer-events:auto}
.att-src{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--radius-pill);padding:2px 8px}
.att-src.health{background:var(--bad-bg);color:var(--bad)} .att-src.coach{background:var(--accent-soft);color:var(--accent)}
.alerts-l{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px;font-size:12.5px}
.alerts-l li{display:flex;gap:7px;align-items:center}
details.journey{margin-top:2px} details.journey summary{cursor:pointer;color:var(--muted)}
.warn-t{color:var(--warn)}
table.fc td{vertical-align:middle}
.fc-in{width:92px;text-align:right;padding:5px 8px!important}
.fc-note{min-width:150px;padding:5px 8px!important}
table.t td.c,table.t th.c{text-align:center}
td.drill{cursor:pointer} td.drill:hover{background:var(--accent-soft)}
table.wsm th.c{font-size:10px;white-space:normal;line-height:1.2;max-width:86px;min-width:70px}
.wsm-c{text-align:center;cursor:pointer;background:color-mix(in srgb,var(--c) 30%,transparent);border-left:3px solid var(--surface)!important;font-size:var(--fs-13)}
.wsm-c:hover{outline:2px solid var(--accent);outline-offset:-2px}
.wsm-c b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:var(--radius-pill);background:var(--surface);color:var(--accent-text);box-shadow:var(--shadow)}
.fab{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;align-items:center;gap:6px;border:0;border-radius:var(--radius-pill);padding:12px 18px 12px 14px;background:var(--accent);color:var(--on-accent);font-size:14px;box-shadow:0 10px 30px rgba(53,49,207,.35);cursor:pointer;transition:transform .15s var(--ease)}
.fab:hover{transform:translateY(-2px)} .fab span{font-size:20px;line-height:1}
.ql-med{align-items:flex-start}

/* =====================================================================
   Review fixes (UI, brand and accessibility review, 2026-10-10)
   ===================================================================== */
/* focus: signal yellow wherever the ground is navy (indigo on navy was 1.9:1; signal is 14.6:1) */
:focus-visible{outline-offset:2px}
.side :focus-visible,.box.coach :focus-visible,.viz .key :focus-visible,.key[data-drill]:focus-visible,.login-hero :focus-visible,.dw-bar :focus-visible,.adm-bulk :focus-visible,.gf-bulk :focus-visible,.toast :focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.adm-bulk select:focus,.gf-bulk select:focus{box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--signal)}
/* the primary action on a navy bar is signal yellow (an indigo button on navy is 1.9:1) */
.adm-bulk .btn.primary{background:var(--signal);border-color:var(--signal);color:var(--navy);box-shadow:none}
.adm-bulk .btn.primary:hover{background:#fff;border-color:#fff;color:var(--navy)}
/* skip link (markup in app.js): hidden until focused */
.skip{position:fixed;left:12px;top:12px;z-index:100;transform:translateY(-160%);background:var(--navy);color:#fff;border:0;border-radius:var(--radius-sm);padding:10px 16px;font-weight:600;box-shadow:0 10px 30px rgba(2,30,87,.3);transition:transform .15s var(--ease)}
.skip:focus,.skip:focus-visible{transform:none;outline:2px solid var(--signal);outline-offset:2px}
#view:focus{outline:none}

/* touch targets: at least 24px */
.q{position:relative}.q::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.card>.ch a:not(.btn):not(.chip),.viz .vh a:not(.btn):not(.chip),.phead .crumbs a{display:inline-block;padding:4px 0}
.hb{min-height:24px}
.list .t1>a:not([class]),.dcard .n>a:not([class]),table.t .cellname>a:not([class]){display:inline-block;padding:3px 0}   /* the keyboard links in clickable rows and cards */
.sec>h3 a,.rail .box h3 a:not(.chip){display:inline-block;padding:4px 0}
a.chip,button.chip,.chip[data-drill]{position:relative}a.chip::after,button.chip::after,.chip[data-drill]::after{content:"";position:absolute;inset:-2px -1px}   /* 21px chip, 25px target */

/* layout */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
/* records (deal and account): the account tree only beside a record from 1600px, so the record keeps its width */
@media (max-width:1599px){.split.rec{grid-template-columns:minmax(0,1fr)}.split.rec>.tree{display:none}}
/* donut + legend rows stack by the card's own width, not the window's */
.viz:has(.vrow){container-type:inline-size}
@container (max-width:520px){.vrow{grid-template-columns:1fr;justify-items:center}.vrow .legend{flex-direction:row;flex-wrap:wrap;justify-content:center}}
.viz>.btn{white-space:normal;max-width:100%;text-align:center;justify-content:center}
@media (min-width:761px){.board{grid-template-columns:repeat(6,minmax(170px,1fr))}}   /* all six stages fit at 1440 (was 230px each: "Finalize & Close" off-screen) */
.main{padding-bottom:72px}   /* room for the floating "+ Log" button */

/* win probability against the allowed bands (viz.js winBar): HTML so its labels keep their size in a narrow record column */
.wb{max-width:560px;padding:0 18px;display:grid;gap:4px}
.wb-r,.wb-t,.wb-x{position:relative}
.wb-r{height:20px}
.wb-v{position:absolute;bottom:0;transform:translateX(-50%);font-size:var(--fs-14);font-weight:600;line-height:20px;color:var(--fg);white-space:nowrap}
.wb-t{height:22px;margin-top:6px}
.wb-t::before{content:"";position:absolute;left:0;right:0;top:5px;height:12px;border-radius:var(--radius-pill);background:var(--stone)}
.wb-b{position:absolute;top:0;height:22px;min-width:6px;margin-left:-3px;padding:0 3px;box-sizing:content-box;border-radius:5px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.wb-b.on{background:var(--accent)}
.wb-m{position:absolute;top:-10px;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:10px solid var(--fg)}
.wb.bad .wb-v{color:var(--bad)} .wb.bad .wb-m{border-top-color:var(--bad)}
.wb-x{height:18px}
.wb-x span{position:absolute;top:0;transform:translateX(-50%);font-size:var(--fs-12);line-height:18px;color:var(--muted);white-space:nowrap}

/* empty states: one .empty everywhere (title + one line); .sm inside small cards */
.empty{font-size:var(--fs-13);line-height:1.45}
.empty b{font-size:var(--fs-14)}
.empty.sm{padding:14px 10px}
.empty.sm b{font-size:var(--fs-13)}

/* sub-navigation pills, including the dashboard tabs */
.seg.subnav a:hover{color:var(--fg)}

@media (max-width:760px){
  .shell,.shell.mini{grid-template-columns:1fr}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:45;flex-direction:row;padding-bottom:env(safe-area-inset-bottom)}
  .side .brand,.side .find,.side .foot-s{display:none}
  .side nav{display:flex;flex:1;overflow-x:auto;padding:6px 6px;gap:2px}
  .side .grp{display:none}
  .nav-i{flex-direction:column;gap:2px;font-size:10.5px;padding:6px 10px;min-width:64px;justify-content:center}
  .side nav .nav-more{font-size:10.5px}   /* "More" was 14.5px next to 10.5px tabs */
  .nav-i .ct{position:absolute;top:2px;right:8px}
  .main{padding-bottom:76px}
  .phead h1{font-size:23px}
  /* stat strip: two even columns, a divider only between them */
  .strip{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .stat{border-left:0;min-width:0}
  .stat:nth-child(even){border-left:1px solid var(--line)}
  .gbar select{min-width:130px;flex:1 1 130px;max-width:none}
  .grid.g2,.grid.g3,.grid.g-main,.split,.rec-body{grid-template-columns:1fr!important}
  .tree{display:none}
  .split.rec .rec-head h2,.split.rec .rec-head .rec-title{display:none}   /* the page H1 already names the record */
  .fab{bottom:86px;right:14px;padding:12px}
  .fab b{display:none}
  .modal-bg{padding:0}
  .modal{width:100%!important;border-radius:var(--radius-lg) var(--radius-lg) 0 0;align-self:end}
  .kpis,.wk,.dr-kpi,.firmo{grid-template-columns:1fr 1fr}
  .kpis>:nth-child(odd),.wk>div:nth-child(odd),.dr-kpi>div:nth-child(odd),.firmo>div:nth-child(odd){border-left:0}
}