/* ============================================================
   ProcessLabs platform design system.
   Ported verbatim from the v3.10 prototype (base + premium pass +
   logo mark + tab pass + aurora command-centre pass) so the new
   architecture keeps the established visual language.
   ============================================================ */
:root{
 --navy:#17376f;--navy2:#0e2855;--deep:#07152f;--blue:#3976c8;--bright:#63a7ef;--sky:#a9d2f5;
 --ice:#eaf3fc;--mist:#f4f7fb;--paper:#fff;--ink:#12203a;--slate:#61708a;--muted:#91a0b6;
 --line:rgba(23,55,111,.11);--green:#2fac78;--amber:#e4a83c;--red:#d95d62;--purple:#756ed1;
 --shadow:0 18px 55px rgba(17,42,86,.10);--shadow-lg:0 38px 100px rgba(5,18,45,.24);--rail:268px;
 --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--font);background:var(--mist);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{display:block}.hidden{display:none!important}
:focus-visible{outline:3px solid var(--bright);outline-offset:2px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Login */
/* The sign-in screen covers the viewport, so it owns the scrolling: on a short
   window (laptop, browser chrome, on-screen keyboard) the form is taller than
   the screen and the submit button would otherwise be clipped with no way to
   reach it. align-content:start keeps the row at its natural height so the
   overflow is scrollable rather than cut off. */
.login{position:fixed;inset:0;z-index:500;display:grid;grid-template-columns:minmax(360px,.9fr) 1.1fr;background:#fff;overflow:hidden}
/* The sign-in column scrolls on its own. Without this, a window shorter than
   the form (a laptop, an on-screen keyboard, a zoomed page) clips the submit
   button off the bottom of a fixed panel with no way to reach it. Keeping the
   scroll here rather than on .login leaves the artwork column full height. */
/* overflow-x is pinned because scrolling one axis turns the other from
   `visible` into `auto`, and the decorative circle below overhangs the right
   edge — which would otherwise add a sideways scrollbar. */
.login-panel{padding:clamp(28px,4vw,58px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow-y:auto;overflow-x:hidden;
  /* `safe` keeps the centring on a tall window but falls back to top-aligned
     once the form is taller than the panel — plain `center` would push the
     first field above the scroll origin, where it cannot be scrolled back. */
  justify-content:safe center}
.login-panel:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(99,167,239,.15),transparent 66%);right:-80px;top:12%}
.login-art{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 15%,rgba(99,167,239,.35),transparent 28%),radial-gradient(circle at 85% 78%,rgba(117,110,209,.23),transparent 30%),linear-gradient(145deg,#07152f,#0d2855 56%,#17376f);color:#fff;padding:55px;display:flex;align-items:center;justify-content:center}
.login-art:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent)}
.login-showcase{position:relative;z-index:2;width:min(650px,92%)}
.login-showcase h2{font-size:clamp(35px,4vw,64px);line-height:1.02;letter-spacing:-.055em;margin:0 0 20px}.login-showcase p{font-size:18px;line-height:1.7;color:rgba(255,255,255,.7);max-width:560px}
.demo-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:42px}.flow-card{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.075);backdrop-filter:blur(12px);border-radius:18px;padding:18px}.flow-card span{width:34px;height:34px;border-radius:11px;background:rgba(99,167,239,.18);display:grid;place-items:center;font-weight:900;color:var(--sky);margin-bottom:28px}.flow-card b{display:block;font-size:14px}.flow-card small{display:block;color:rgba(255,255,255,.52);margin-top:5px;line-height:1.45}
.wordmark{display:flex;align-items:center;gap:11px;margin-bottom:28px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,var(--blue),var(--bright));display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 14px 28px rgba(57,118,200,.25)}.brand-copy b{display:block;font-size:22px;letter-spacing:-.04em}.brand-copy b span{color:var(--blue)}.brand-copy small{display:block;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-size:9px;font-weight:800;margin-top:3px}
.login h1{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.055em;line-height:1.06;margin:0}.login-lead{color:var(--slate);font-size:15px;line-height:1.6;margin:12px 0 20px;max-width:480px}.field{display:grid;gap:7px;margin-bottom:14px}.field label{font-size:12px;font-weight:800;color:var(--navy)}.control{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 14px;color:var(--ink);transition:.18s}.control:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(57,118,200,.1);outline:0}.login-note{display:flex;gap:9px;align-items:flex-start;background:var(--ice);border:1px solid rgba(57,118,200,.12);border-radius:13px;padding:12px 13px;font-size:12px;line-height:1.5;color:var(--slate);margin:14px 0 20px}.login-note b{color:var(--navy)}

/* Common */
.btn{border:0;border-radius:12px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:850;transition:transform .18s,box-shadow .18s,background .18s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 25px rgba(23,55,111,.22)}.btn-primary:hover{background:var(--blue)}.btn-light{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn-soft{background:var(--ice);color:var(--navy)}.btn-ghost{background:transparent;color:var(--slate)}.btn-danger{background:#fff0f1;color:var(--red)}.btn-lg{padding:14px 20px;font-size:14px}.btn-sm{padding:8px 11px;font-size:11.5px;border-radius:10px}.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.15em;font-size:15px;font-weight:900;color:var(--blue)}.eyebrow:before{content:"";width:28px;height:3px;background:currentColor;border-radius:9px}.tag{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:6px 9px;font-size:10.5px;font-weight:850}.tag-live{background:#eaf8f1;color:#237d58}.tag-build{background:#fff2da;color:#946410}.tag-blue{background:var(--ice);color:var(--blue)}.dot{width:7px;height:7px;border-radius:50%;background:currentColor}.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 1px 2px rgba(23,55,111,.03)}.card-pad{padding:22px}.muted{color:var(--slate)}.small{font-size:12px}.section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:15px}.section-title h2{font-size:19px;letter-spacing:-.035em;margin:0}.section-title p{margin:4px 0 0;color:var(--slate);font-size:13px}.stack{display:grid;gap:15px}

/* App shell */
.app{min-height:100vh;display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
.sidebar{height:100vh;position:sticky;top:0;z-index:100;padding:18px 14px;display:flex;flex-direction:column;color:#fff;overflow:auto;background:radial-gradient(600px 360px at 10% -6%,rgba(99,167,239,.34),transparent 60%),linear-gradient(165deg,#07152f 0%,#0c2652 63%,#17376f 100%);border-right:1px solid rgba(255,255,255,.06)}
.side-brand{display:flex;align-items:center;gap:10px;padding:3px 8px 17px;border-bottom:1px solid rgba(255,255,255,.08)}.side-brand .brand-mark{width:36px;height:36px;border-radius:12px;box-shadow:none}.side-brand b{font-size:19px;letter-spacing:-.035em}.side-brand b span{color:var(--bright)}.side-brand small{display:block;font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.43);font-weight:850;margin-top:3px}
.workspace{margin:15px 0 4px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.065);border-radius:14px;padding:11px;display:flex;gap:10px;align-items:center}.workspace-av{width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,var(--bright),var(--sky));color:var(--deep);display:grid;place-items:center;font-weight:900;font-size:11px}.workspace b,.workspace small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace b{font-size:12.5px}.workspace small{font-size:9.5px;color:rgba(255,255,255,.46);margin-top:2px}.workspace>div:nth-child(2){min-width:0;flex:1}
.nav-label{display:block;font-size:13.5px;text-transform:uppercase;letter-spacing:.12em;color:#fff;font-weight:900;
  margin:16px 0 8px;padding:9px 12px;border-radius:9px;
  background:linear-gradient(90deg,rgba(99,167,239,.28),rgba(99,167,239,.08));
  border-left:3px solid var(--bright)}.nav{display:grid;gap:3px}.nav-btn{position:relative;width:100%;border:0;background:transparent;color:rgba(255,255,255,.68);display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:11px;text-align:left;font-size:12.5px;font-weight:800}.nav-btn:hover{background:rgba(255,255,255,.075);color:#fff}.nav-btn.active{background:linear-gradient(90deg,#2F6FD0,#4DA3FF);color:#fff;
  box-shadow:0 8px 20px rgba(47,111,208,.45),inset 0 1px 0 rgba(255,255,255,.22)}.nav-btn.active:before{content:"";position:absolute;left:-14px;width:3px;height:22px;border-radius:0 5px 5px 0;background:var(--bright)}.nav-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.nav-btn .tag{margin-left:auto;padding:4px 7px;font-size:8.5px;background:rgba(228,168,60,.16);color:#ffd784}.nav-btn.locked{color:rgba(255,255,255,.48)}
.side-foot{margin-top:auto;padding-top:15px}.profile{display:flex;align-items:center;gap:10px;padding:11px;border-top:1px solid rgba(255,255,255,.08)}.profile-av{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:10px;font-weight:900}.profile-copy{min-width:0;flex:1}.profile-copy b{display:block;font-size:11.5px}.profile-copy small{display:block;font-size:9px;color:rgba(255,255,255,.43)}.profile button{border:0;background:transparent;color:rgba(255,255,255,.55);padding:5px}.profile svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.main{min-width:0}.topbar{height:68px;position:sticky;top:0;z-index:90;background:rgba(244,247,251,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}.crumb{font-size:12px;color:var(--slate)}.crumb b{color:var(--navy)}.top-actions{display:flex;align-items:center;gap:8px}.status-pill{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 11px;font-size:10.5px;font-weight:800;color:var(--slate)}.status-pill i{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(47,172,120,.12)}.mobile-toggle{display:none;border:0;background:#fff;border-radius:10px;padding:9px}.mobile-toggle svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:2}.content{max-width:1460px;margin:0 auto;padding:28px 32px 60px}.view{display:none}.view.active{display:block;animation:fade .25s ease}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Home */
.hero{position:relative;overflow:hidden;min-height:302px;border-radius:28px;padding:34px 36px;background:radial-gradient(520px 300px at 90% 10%,rgba(99,167,239,.34),transparent 58%),radial-gradient(350px 270px at 66% 110%,rgba(117,110,209,.25),transparent 60%),linear-gradient(145deg,#07152f,#0d2c5e 60%,#17376f);color:#fff;box-shadow:var(--shadow-lg)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to right,black,transparent 75%)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) .75fr;gap:30px;align-items:center}.hero h1{font-size:clamp(38px,4.8vw,70px);letter-spacing:-.065em;line-height:.98;margin:14px 0 18px;max-width:780px}.hero p{color:rgba(255,255,255,.67);font-size:16px;line-height:1.65;max-width:650px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.hero .btn-primary{background:#fff;color:var(--navy);box-shadow:none}.hero .btn-primary:hover{background:var(--sky)}.hero .btn-light{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.17);color:#fff;backdrop-filter:blur(10px)}
.readiness{justify-self:end;width:230px;height:230px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--bright) calc(var(--pct)*1%),rgba(255,255,255,.11) 0);box-shadow:0 0 0 12px rgba(255,255,255,.04),0 26px 55px rgba(0,0,0,.25)}.readiness:before{content:"";position:absolute;inset:15px;border-radius:50%;background:linear-gradient(145deg,#0e2b59,#081a39);box-shadow:inset 0 0 35px rgba(99,167,239,.13)}.readiness-copy{position:relative;text-align:center}.readiness-copy strong{display:block;font-size:54px;letter-spacing:-.06em}.readiness-copy span{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:rgba(255,255,255,.55);font-weight:900}.readiness-copy small{display:block;font-size:11px;color:var(--sky);margin-top:8px}.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px 7px rgba(99,167,239,.7);right:28px;top:48px;animation:pulse 2.3s infinite}@keyframes pulse{50%{transform:scale(1.45);opacity:.6}}
.home-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.stat-card{padding:19px;display:flex;align-items:center;gap:14px}.stat-icon{width:44px;height:44px;border-radius:14px;background:var(--ice);color:var(--blue);display:grid;place-items:center}.stat-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2}.stat-card strong{display:block;font-size:24px;letter-spacing:-.045em}.stat-card span{display:block;color:var(--slate);font-size:11.5px;margin-top:2px}.home-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:18px;margin-top:18px}.action{border:0;background:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;text-align:left;padding:16px 18px;border-bottom:1px solid var(--line)}.action:first-child{border-radius:20px 20px 0 0}.action:last-child{border-radius:0 0 20px 20px;border-bottom:0}.action:hover{background:#f9fbfe}.action-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--ice);color:var(--blue)}.action-ic.amber{background:#fff4df;color:#b47916}.action-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}.action b{display:block;font-size:13px;color:var(--navy)}.action small{display:block;color:var(--slate);font-size:11px;margin-top:2px}.action>svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2}.timeline{padding:6px 20px 15px}.event{display:grid;grid-template-columns:16px 1fr;gap:12px;position:relative;padding:14px 0}.event:not(:last-child):after{content:"";position:absolute;left:7px;top:31px;bottom:-2px;width:1px;background:var(--line)}.event-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--bright);margin-top:3px;z-index:2}.event b{font-size:12px;color:var(--navy)}.event p{font-size:11px;color:var(--slate);margin:3px 0 0}.event time{display:block;font-size:9.5px;color:var(--muted);margin-top:4px}.roadmap-strip{margin-top:19px}.roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.roadmap-card{position:relative;overflow:hidden;padding:17px;min-height:155px;cursor:pointer;transition:.2s}.roadmap-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.roadmap-card:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:var(--ice);right:-33px;bottom:-35px}.roadmap-card .tag{position:relative;z-index:2}.roadmap-card h3{position:relative;z-index:2;font-size:15px;margin:24px 0 7px;color:var(--navy)}.roadmap-card p{position:relative;z-index:2;font-size:11px;line-height:1.55;color:var(--slate);margin:0;max-width:180px}

/* Business Brain */
.brain-hero{position:relative;overflow:hidden;border-radius:27px;padding:30px 32px;background:linear-gradient(135deg,#fff 0%,#f5f9fe 64%,#e8f3ff 100%);border:1px solid rgba(57,118,200,.14);box-shadow:var(--shadow)}.brain-hero:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;right:-130px;top:-155px;background:radial-gradient(circle,rgba(99,167,239,.32),transparent 68%)}.brain-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px}.brain-hero h1{font-size:clamp(34px,4.2vw,58px);letter-spacing:-.06em;line-height:1;margin:10px 0 14px}.brain-hero p{font-size:15px;line-height:1.65;color:var(--slate);max-width:700px}.mini-ring{--p:75;width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) calc(var(--p)*1%),var(--ice) 0);position:relative}.mini-ring:before{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}.mini-ring span{position:relative;text-align:center}.mini-ring strong{display:block;font-size:31px;letter-spacing:-.05em}.mini-ring small{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--slate);font-weight:900}.brain-tabs{display:flex;gap:7px;overflow:auto;margin:19px 0 15px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:15px;width:max-content;max-width:100%;scrollbar-width:none}.brain-tabs::-webkit-scrollbar{display:none}.brain-tab{border:0;background:transparent;border-radius:10px;padding:9px 13px;color:var(--slate);font-size:11.5px;font-weight:850;white-space:nowrap}.brain-tab.active{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(23,55,111,.2)}.brain-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;align-items:start}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}.label{display:block;font-size:11px;font-weight:850;color:var(--navy);margin-bottom:6px}.help{font-size:10.5px;color:var(--slate);margin-top:5px}.textarea{min-height:98px;resize:vertical}.savebar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}.saved{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--green);font-weight:800}.saved i{width:7px;height:7px;background:var(--green);border-radius:50%}.analysis-box{position:relative;overflow:hidden}.analysis-state{padding:18px;border-radius:15px;background:linear-gradient(145deg,#0b2249,#17376f);color:#fff;margin-top:14px}.analysis-state b{font-size:12px}.analysis-state p{color:rgba(255,255,255,.58);font-size:10.5px;line-height:1.55;margin:5px 0 12px}.progress{height:6px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bright),#b9ddff);border-radius:9px;transition:width .5s}.analysis-steps{display:grid;gap:8px;margin-top:12px}.analysis-step{display:flex;align-items:center;gap:8px;font-size:10px;color:rgba(255,255,255,.48)}.analysis-step.done{color:#c8f4dd}.analysis-step i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-style:normal;font-size:9px}.analysis-step.done i{background:rgba(47,172,120,.22)}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 10px;display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-size:11px;font-weight:800}.chip button{border:0;background:transparent;color:var(--muted);padding:0;font-size:14px;line-height:1}.chip-select{cursor:pointer}.chip-select.selected{background:var(--navy);color:#fff;border-color:var(--navy)}.add-row{display:flex;gap:8px;margin-top:11px}.add-row .control{padding:10px 12px}.tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tone-card{border:1px solid var(--line);background:#fff;border-radius:15px;padding:15px;text-align:left;transition:.18s}.tone-card:hover{border-color:var(--blue)}.tone-card.selected{background:linear-gradient(145deg,#17376f,#265492);color:#fff;border-color:transparent;box-shadow:0 14px 28px rgba(23,55,111,.18)}.tone-card b{display:block;font-size:12px}.tone-card small{display:block;font-size:9.5px;line-height:1.45;color:var(--slate);margin-top:4px}.tone-card.selected small{color:rgba(255,255,255,.62)}
.dropzone{border:1.5px dashed rgba(57,118,200,.32);background:linear-gradient(145deg,#fbfdff,#f0f6fd);border-radius:18px;padding:26px;text-align:center;position:relative}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-icon{width:48px;height:48px;border-radius:16px;background:#fff;display:grid;place-items:center;margin:0 auto 12px;color:var(--blue);box-shadow:0 12px 25px rgba(23,55,111,.09)}.drop-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}.dropzone b{display:block;font-size:13px;color:var(--navy)}.dropzone span{display:block;font-size:10.5px;color:var(--slate);margin-top:4px}.doc-list{display:grid;gap:9px;margin-top:12px}.doc{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:11px;background:#fff}.doc-ic{width:35px;height:35px;border-radius:10px;background:var(--ice);display:grid;place-items:center;color:var(--blue);font-size:10px;font-weight:900}.doc b{display:block;font-size:11px;color:var(--navy)}.doc small{display:block;font-size:9.5px;color:var(--slate);margin-top:2px}.doc button{border:0;background:transparent;color:var(--muted);font-size:17px}.logo-preview{width:90px;height:90px;border-radius:18px;border:1px solid var(--line);background:var(--mist);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:10px;text-align:center}.logo-preview img{width:100%;height:100%;object-fit:contain;background:#fff}.journey{display:grid;gap:10px}.journey-step{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff}.journey-num{width:31px;height:31px;border-radius:10px;background:var(--ice);color:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:900}.journey-step.done .journey-num{background:#e9f8f0;color:var(--green)}.journey-step b{font-size:11.5px;color:var(--navy)}.journey-step small{display:block;font-size:9.5px;color:var(--slate);margin-top:2px}.journey-step>span{font-size:9px;font-weight:850;color:var(--muted)}.journey-step.done>span{color:var(--green)}

/* Social iframe */
.social-shell{height:calc(100vh - 124px);min-height:720px;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}.social-shell iframe{width:100%;height:100%;border:0;background:#f4f7fb}.social-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.social-head h1{font-size:31px;letter-spacing:-.05em;margin:0}.social-head p{margin:5px 0 0;font-size:12.5px;color:var(--slate)}

/* Modal and toast */
.veil{position:fixed;inset:0;z-index:400;background:rgba(5,16,38,.62);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}.veil.on{display:flex}.modal{width:min(650px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:var(--shadow-lg);animation:pop .2s ease}@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}.modal-head{padding:23px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px}.modal-head h2{margin:0;font-size:22px;letter-spacing:-.04em}.modal-head p{margin:5px 0 0;font-size:11px;color:var(--slate)}.modal-close{border:0;background:var(--mist);width:34px;height:34px;border-radius:10px;color:var(--slate);font-size:20px}.modal-body{padding:24px}.modal-foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px}.future-visual{height:190px;border-radius:18px;background:radial-gradient(circle at 80% 20%,rgba(99,167,239,.42),transparent 32%),linear-gradient(145deg,#07152f,#17376f);display:grid;place-items:center;color:#fff;margin-bottom:20px;position:relative;overflow:hidden}.future-visual:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:22px 22px}.future-visual svg{position:relative;width:72px;height:72px;stroke:var(--sky);fill:none;stroke-width:1.3}.feature-list{display:grid;gap:9px;margin-top:17px}.feature{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--slate)}.feature i{width:19px;height:19px;border-radius:50%;background:#e9f8f0;color:var(--green);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:10px;flex:0 0 auto}.toast{position:fixed;left:50%;bottom:24px;z-index:600;transform:translate(-50%,25px);opacity:0;pointer-events:none;background:#07152f;color:#fff;border-radius:13px;padding:12px 16px;display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:750;box-shadow:var(--shadow-lg);transition:.22s}.toast.on{opacity:1;transform:translate(-50%,0)}.toast i{width:20px;height:20px;border-radius:50%;background:rgba(47,172,120,.22);color:#8ee0b8;display:grid;place-items:center;font-style:normal}

@media(max-width:1100px){.hero-grid{grid-template-columns:1fr}.readiness{display:none}.home-grid,.brain-layout{grid-template-columns:1fr}.roadmap-grid{grid-template-columns:repeat(2,1fr)}.tone-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){:root{--rail:0px}.app{display:block}.sidebar{position:fixed;left:-282px;width:268px;transition:left .2s;box-shadow:var(--shadow-lg)}.sidebar.open{left:0}.mobile-toggle{display:block}.topbar{padding:0 14px}.content{padding:18px 14px 45px}.login{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:30px}.home-stats{grid-template-columns:1fr}.hero{padding:26px 22px;min-height:auto}.hero h1{font-size:43px}.brain-hero{padding:24px 21px}.brain-hero-grid{grid-template-columns:1fr}.mini-ring{display:none}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.social-shell{height:calc(100vh - 155px);min-height:630px}.social-head{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.roadmap-grid{grid-template-columns:1fr}.tone-grid{grid-template-columns:1fr}.demo-flow{grid-template-columns:1fr}.top-actions .status-pill{display:none}.hero-actions{display:grid}.hero-actions .btn{width:100%}.section-title{align-items:flex-start;flex-direction:column}.savebar{align-items:flex-start;flex-direction:column}}
/* ProcessLabs Efficiency Hub, premium visual pass.
   Reskins the outer shell only (the Social Studio iframe is isolated).
   No structure or wording changes. Self-hosted stack only, no third-party requests. */

:root{
  --edge:rgba(23,55,111,.10);
  --edge-2:rgba(23,55,111,.16);
  --sheen:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  --sh-xs:0 1px 2px rgba(23,55,111,.05);
  --sh-sm:0 10px 30px rgba(23,55,111,.08);
  --sh-md:0 22px 55px rgba(17,42,86,.12);
  --sh-lg:0 42px 100px rgba(5,18,45,.26);
  --glow-blue:rgba(99,167,239,.55);
  --grid:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}

html,body{
  background:
    radial-gradient(760px 460px at 88% -4%,rgba(99,167,239,.10),transparent 60%),
    radial-gradient(680px 520px at 6% 4%,rgba(57,118,200,.07),transparent 58%),
    var(--mist);
}

/* ---------- buttons ---------- */
.btn{transition:transform .18s ease,box-shadow .2s ease,background .2s ease,border-color .18s ease}
.btn-primary{background:linear-gradient(135deg,var(--navy2) 0%,var(--blue) 78%);box-shadow:0 12px 26px rgba(23,55,111,.24)}
.btn-primary:hover{background:linear-gradient(135deg,var(--navy) 0%,var(--bright) 96%);box-shadow:0 18px 38px rgba(23,55,111,.30);transform:translateY(-2px)}
.btn-soft{background:linear-gradient(180deg,#eef5fd,var(--ice));box-shadow:inset 0 0 0 1px rgba(57,118,200,.10)}
.btn-soft:hover{background:linear-gradient(180deg,#e6f1fd,#dcecfb)}
.btn-light{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:var(--sh-xs)}
.btn-light:hover{border-color:rgba(57,118,200,.4);color:var(--blue)}

/* ---------- cards ---------- */
.card{background:var(--sheen);border-color:var(--edge);box-shadow:var(--sh-xs);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.eyebrow:before{background:linear-gradient(90deg,var(--blue),var(--bright))}

/* ---------- sidebar ---------- */
.sidebar{
  background:
    radial-gradient(680px 420px at 12% -8%,rgba(99,167,239,.32),transparent 58%),
    radial-gradient(560px 380px at 120% 82%,rgba(57,118,200,.20),transparent 60%),
    linear-gradient(168deg,#06132b 0%,#0c2652 60%,#17376f 100%);
}
.sidebar:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:220px;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1px);background-size:17px 17px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);z-index:0}
.sidebar>*{position:relative;z-index:1}
.side-brand .brand-mark{box-shadow:0 10px 22px rgba(57,118,200,.4),0 0 0 1px rgba(255,255,255,.12) inset}
.workspace{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045));box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.workspace-av{box-shadow:0 6px 16px rgba(0,0,0,.28)}
.nav-btn.active{background:linear-gradient(100deg,rgba(99,167,239,.24),rgba(57,118,200,.10));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.18)}
.nav-btn.active:before{background:linear-gradient(var(--bright),var(--sky));box-shadow:0 0 16px var(--glow-blue);width:3px}
.nav-btn.active svg{color:var(--sky)}
.profile-av{background:linear-gradient(145deg,rgba(99,167,239,.35),rgba(255,255,255,.08))}

/* ---------- topbar ---------- */
.topbar{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.status-pill{box-shadow:var(--sh-xs)}

/* ---------- hero (signature) ---------- */
.hero{
  background:
    radial-gradient(560px 320px at 90% 8%,rgba(99,167,239,.36),transparent 56%),
    radial-gradient(420px 300px at 62% 118%,rgba(57,118,200,.28),transparent 60%),
    linear-gradient(140deg,#06122a 0%,#0d2c5e 58%,#17376f 100%);
  box-shadow:var(--sh-lg);isolation:isolate
}
.hero:before{background-image:var(--grid);background-size:34px 34px;-webkit-mask-image:linear-gradient(to right,#000,transparent 74%);mask-image:linear-gradient(to right,#000,transparent 74%)}
.hero:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-90px;top:-140px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 46px rgba(255,255,255,.02),0 0 0 96px rgba(255,255,255,.015);z-index:0;pointer-events:none}
.hero-grid{z-index:2}
.hero .btn-primary{background:#fff;color:var(--navy);box-shadow:0 14px 30px rgba(0,0,0,.24)}
.hero .btn-primary:hover{background:var(--sky);transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.hero .btn-light{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
.hero .btn-light:hover{background:rgba(255,255,255,.16);color:#fff}
.readiness{
  background:conic-gradient(from -90deg,var(--bright) 0,var(--sky) calc(var(--pct)*1%),rgba(255,255,255,.10) 0);
  box-shadow:0 0 0 12px rgba(255,255,255,.04),0 0 60px rgba(99,167,239,.22),0 26px 55px rgba(0,0,0,.28)
}
.readiness:before{background:linear-gradient(145deg,#0f2c5b,#07193a);box-shadow:inset 0 0 45px rgba(99,167,239,.18)}
.readiness-copy strong{background:linear-gradient(180deg,#fff,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- home stat cards ---------- */
.stat-card{position:relative;overflow:hidden;background:var(--sheen);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:var(--edge-2)}
.stat-card:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-46px;top:-52px;background:radial-gradient(circle,rgba(99,167,239,.14),transparent 68%)}
.stat-card>*{position:relative;z-index:1}
.stat-card strong{font-size:27px;background:linear-gradient(135deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-icon{box-shadow:inset 0 0 0 1px rgba(57,118,200,.10)}
.home-stats .stat-card:nth-child(1) .stat-icon{background:linear-gradient(145deg,#e3eefc,#d3e6fb);color:var(--blue)}
.home-stats .stat-card:nth-child(2) .stat-icon{background:linear-gradient(145deg,#e2f4fb,#cfeaf7);color:#1f7fa8}
.home-stats .stat-card:nth-child(2):after{background:radial-gradient(circle,rgba(69,168,208,.16),transparent 68%)}
.home-stats .stat-card:nth-child(3) .stat-icon{background:linear-gradient(145deg,#fff2da,#ffe8bf);color:#b47916}
.home-stats .stat-card:nth-child(3):after{background:radial-gradient(circle,rgba(228,168,60,.16),transparent 68%)}

/* ---------- actions + timeline ---------- */
.action{transition:background .18s ease}
.action:hover{background:linear-gradient(90deg,#f6faff,#fbfdff)}
.action:hover .action-ic{transform:scale(1.06)}
.action-ic{transition:transform .18s ease;box-shadow:inset 0 0 0 1px rgba(57,118,200,.08)}
.action:hover>svg{stroke:var(--blue);transform:translateX(2px);transition:.18s ease}
.event-dot{box-shadow:0 0 0 3px rgba(99,167,239,.14),0 0 12px rgba(99,167,239,.3)}

/* ---------- roadmap ---------- */
.roadmap-card{background:var(--sheen)}
.roadmap-card:after{background:radial-gradient(circle at 70% 70%,rgba(99,167,239,.20),rgba(228,168,60,.10));width:105px;height:105px;right:-36px;bottom:-38px}
.roadmap-card:hover{transform:translateY(-4px);box-shadow:var(--sh-sm);border-color:var(--edge-2)}
.tag-build{background:linear-gradient(180deg,#fff3dc,#ffe9c6);color:#946410;box-shadow:inset 0 0 0 1px rgba(228,168,60,.22)}
.tag-live{background:linear-gradient(180deg,#eafaf1,#dcf4e8);color:#1f7a4e;box-shadow:inset 0 0 0 1px rgba(47,172,120,.22)}

/* ---------- business brain ---------- */
.brain-hero{background:linear-gradient(135deg,#ffffff 0%,#f4f9fe 60%,#e7f2ff 100%);box-shadow:var(--sh-sm);border-color:rgba(57,118,200,.16)}
.brain-hero:after{background:radial-gradient(circle,rgba(99,167,239,.36),transparent 66%);width:360px;height:360px;right:-140px;top:-165px}
.brain-hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(57,118,200,.05) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(120deg,#000,transparent 60%);mask-image:linear-gradient(120deg,#000,transparent 60%);z-index:1;pointer-events:none}
.brain-hero-grid{z-index:2}
.mini-ring{background:conic-gradient(from -90deg,var(--blue) 0,var(--bright) calc(var(--p)*1%),var(--ice) 0);box-shadow:0 18px 40px rgba(23,55,111,.14),0 0 0 6px rgba(99,167,239,.06)}
.mini-ring strong{background:linear-gradient(135deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.brain-tabs{background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--sh-xs)}
.brain-tab{transition:.18s ease}
.brain-tab:hover:not(.active){background:var(--ice);color:var(--navy)}
.brain-tab.active{background:linear-gradient(135deg,var(--navy2),var(--blue));box-shadow:0 10px 22px rgba(23,55,111,.24)}
.tone-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.tone-card:hover{transform:translateY(-2px);box-shadow:var(--sh-xs)}
.tone-card.selected{background:linear-gradient(145deg,#17376f,#2b5ea0);box-shadow:0 16px 32px rgba(23,55,111,.22)}
.journey-step{transition:transform .16s ease,box-shadow .16s ease}
.journey-step:hover{transform:translateX(2px);box-shadow:var(--sh-xs)}
.journey-step.done{border-color:rgba(47,172,120,.28);background:linear-gradient(90deg,#f4fbf7,#fff)}
.journey-num{box-shadow:inset 0 0 0 1px rgba(57,118,200,.10)}
.chip{background:linear-gradient(180deg,#fff,#f9fcff);box-shadow:var(--sh-xs)}
.dropzone{background:radial-gradient(240px 150px at 50% 0,rgba(99,167,239,.14),transparent 70%),linear-gradient(145deg,#fbfdff,#eef6fd);position:relative;overflow:hidden}
.dropzone:after{content:"";position:absolute;width:120px;height:120px;border-radius:34px;right:-30px;bottom:-40px;background:linear-gradient(135deg,rgba(99,167,239,.18),rgba(57,118,200,.12));transform:rotate(18deg);pointer-events:none}
.drop-icon{box-shadow:0 12px 26px rgba(23,55,111,.12)}
.analysis-state{background:radial-gradient(320px 180px at 82% -20%,rgba(99,167,239,.26),transparent 62%),linear-gradient(145deg,#0b2249,#17376f);box-shadow:0 16px 34px rgba(11,34,73,.28)}
.control:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(57,118,200,.12)}
.logo-preview{background:linear-gradient(145deg,#fff,var(--mist))}

/* ---------- login ---------- */
.login-art{
  background:
    radial-gradient(circle at 18% 12%,rgba(99,167,239,.38),transparent 30%),
    radial-gradient(circle at 86% 80%,rgba(57,118,200,.28),transparent 34%),
    linear-gradient(145deg,#06122a,#0d2855 56%,#17376f)
}
.login-art:after{background-image:var(--grid);background-size:38px 38px}
.wordmark .brand-mark{box-shadow:0 16px 30px rgba(57,118,200,.30),inset 0 0 0 1px rgba(255,255,255,.14)}
.flow-card{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .2s ease,background .2s ease}
.flow-card:hover{transform:translateY(-3px);background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.06))}
.flow-card span{box-shadow:0 8px 18px rgba(0,0,0,.22)}
.login-note{background:linear-gradient(180deg,#eef5fd,var(--ice));box-shadow:inset 0 0 0 1px rgba(57,118,200,.10)}

/* ---------- getting back in ---------- */
.login-help{margin-top:16px;text-align:center}
.linkish{background:none;border:0;padding:0;color:var(--blue);font-size:12.5px;font-weight:850;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--navy)}
.forgot{margin-top:12px;text-align:left;background:var(--ice);border-radius:13px;padding:14px 15px;
  font-size:12.5px;line-height:1.6;color:var(--slate);box-shadow:inset 0 0 0 1px rgba(57,118,200,.10)}
.forgot p{margin:0 0 9px}
.forgot p:last-child{margin-bottom:0}
.forgot b{color:var(--navy)}
.forgot .cmd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;background:#fff;
  border-radius:8px;padding:7px 9px;color:var(--navy);user-select:all;word-break:break-all;
  box-shadow:inset 0 0 0 1px rgba(57,118,200,.14)}

/* ---------- the sign-in screen fits the window ----------
   Short windows are the common case (a laptop with browser chrome, a scaled
   display), and hunting for a submit button below the fold is the worst first
   impression the product can make. The decorative half of the panel gives way
   by degrees so the form itself never has to. Scrolling stays available for
   anything shorter still. */
@media(max-height:820px){
  .login-panel{padding:clamp(24px,3.4vw,46px)}
  .login .wordmark{margin-bottom:16px}
  .login h1{font-size:clamp(26px,2.8vw,34px)}
  .login-lead{font-size:14.5px;line-height:1.6;margin:10px 0 14px}
  .login-note{margin:10px 0 14px}
}
@media(max-height:760px){
  .login-panel{padding:clamp(22px,4vw,40px)}
  .login .wordmark{margin-bottom:16px}
  .login .eyebrow{display:none}
  .login h1{font-size:24px}
  .login-lead{display:none}
  .field{margin-bottom:10px}
  .login-note{font-size:11.5px;padding:9px 11px;margin:8px 0 12px}
  .btn-lg{padding:12px 18px}
  .login-help{margin-top:11px}
}
@media(max-height:560px){
  .login .wordmark{margin-bottom:12px}
  .login h1{display:none}
  .login-note{display:none}
  .login-error{min-height:0}
}

/* ---------- modal / toast / future ---------- */
.veil{backdrop-filter:blur(9px)}
.modal{box-shadow:var(--sh-lg)}
.modal-close{transition:.16s ease}
.modal-close:hover{background:var(--ice);color:var(--navy)}
.future-visual{background:radial-gradient(circle at 80% 18%,rgba(99,167,239,.44),transparent 32%),linear-gradient(145deg,#06122a,#17376f);box-shadow:inset 0 0 60px rgba(99,167,239,.10)}
.toast{background:linear-gradient(180deg,#0b1f45,#07152f);box-shadow:var(--sh-lg)}

@media(prefers-reduced-motion:reduce){
  .btn,.action,.action-ic,.stat-card,.roadmap-card,.tone-card,.journey-step,.flow-card,.action:hover>svg{transition:none!important}
  .module-summary-card .module-summary-label:before{animation:none!important}
}
:root{--pl-logo:url("data:image/png;base64,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")}
/* Real ProcessLabs mark in the top-left lockup (sidebar + login). */
.brand-mark{background:var(--pl-logo) center/contain no-repeat!important;box-shadow:none!important;color:transparent!important;font-size:0!important;border-radius:2px!important}
.side-brand .brand-mark{width:auto!important;height:30px!important;aspect-ratio:124/80}
.wordmark .brand-mark{width:auto!important;height:40px!important;aspect-ratio:124/80;margin-right:2px}
/* Business Brain tabs: larger, clearer, stronger active state. */
.brain-tabs{gap:8px;padding:6px;border-radius:16px}
.brain-tab{font-size:15px;padding:11px 18px;font-weight:800;border-radius:12px;letter-spacing:-.005em}
.brain-tab.active{box-shadow:0 12px 26px rgba(23,55,111,.26)}
/* ProcessLabs Efficiency Hub, command-centre pass.
   Additive only. Every colour, radius, shadow and font comes from the
   variables already defined in the base and premium passes above.
   No new design system, no third-party requests. */

/* ---------- Home hero ---------- */
.command-hero{min-height:auto;padding:30px 34px}
.command-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.command-hero h1{font-size:clamp(30px,3.6vw,50px);letter-spacing:-.055em;line-height:1.02;margin:12px 0 14px;max-width:840px}
.command-hero h1:focus{outline:none}
.command-hero h1:focus-visible{outline:3px solid var(--bright);outline-offset:6px}
.command-hero p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.7);max-width:640px}
.hero-freshness{justify-self:end;text-align:right;display:grid;gap:10px;justify-items:end}
.hero-freshness .tag-blue{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.hero-freshness small{font-size:10.5px;color:rgba(255,255,255,.5);line-height:1.6}
.hero-freshness b{color:#fff;font-size:11.5px}

/* ---------- Ask or search ---------- */
.command-centre{margin-top:-26px;position:relative;z-index:5;background:var(--sheen);border:1px solid var(--edge);
  border-radius:22px;padding:20px 22px 18px;box-shadow:var(--sh-md)}
.command-centre-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:11px}
.command-label{font-size:15px;font-weight:850;color:var(--navy);letter-spacing:-.02em}
.read-only-badge{display:inline-flex;align-items:center;gap:7px;border-radius:99px;padding:6px 12px;
  font-size:10.5px;font-weight:850;background:var(--ice);color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(57,118,200,.16)}
.read-only-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.business-command{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:15px;padding:7px 8px 7px 14px;transition:border-color .18s,box-shadow .18s}
.business-command:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(57,118,200,.12)}
.business-command-icon{display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
.business-command-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.business-command-input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:11px 0;
  font-size:15.5px;color:var(--ink)}
.business-command-input::placeholder{color:var(--muted)}
.business-command-voice{border:0;background:var(--mist);color:var(--muted);width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;flex:0 0 auto;cursor:not-allowed;opacity:.65}
.business-command-voice svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.business-command-submit{flex:0 0 auto;padding:11px 17px}
.business-command-submit svg{width:16px;height:16px}
.command-help{margin:10px 2px 0;font-size:11.5px;color:var(--slate);line-height:1.55}
.prompt-chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;
  font-size:12px;font-weight:750;color:var(--navy);transition:.16s}
.prompt-chip:hover{border-color:rgba(57,118,200,.42);background:var(--ice);color:var(--blue);transform:translateY(-1px)}

/* ---------- Assistant output ---------- */
.assistant-output:empty{display:none}
.assistant-output{margin-top:16px}
.assistant-card{border-color:rgba(57,118,200,.2);box-shadow:var(--sh-sm)}
.assistant-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.assistant-head-actions{display:flex;align-items:center;gap:10px;min-width:0}
.assistant-query{font-size:12px;color:var(--slate);font-style:italic;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:340px}
.assistant-answer{font-size:19px;line-height:1.5;letter-spacing:-.02em;color:var(--navy);font-weight:750;margin:0}
.assistant-context{margin-top:13px;display:grid;gap:8px}
.assistant-context p{margin:0;font-size:13.5px;line-height:1.65;color:var(--slate)}
.assistant-sources{margin-top:16px;padding:12px 14px;border-radius:13px;background:var(--mist);
  border:1px solid var(--line);font-size:11px;color:var(--slate);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.assistant-sources b{color:var(--navy);font-weight:850}
.assistant-limitation{color:#946410;font-weight:750}
.assistant-loading{display:flex;align-items:center;gap:7px;padding:6px 0}
.assistant-loading span{width:8px;height:8px;border-radius:50%;background:var(--sky);animation:plPulse 1.05s infinite}
.assistant-loading span:nth-child(2){animation-delay:.16s}
.assistant-loading span:nth-child(3){animation-delay:.32s}
.assistant-loading em{margin-left:8px;font-style:normal;font-size:12.5px;color:var(--slate)}
@keyframes plPulse{0%,100%{opacity:.28;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
.assistant-refusal{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;
  background:#fff6e9;border:1px solid rgba(228,168,60,.3)}
.assistant-refusal p{margin:0;font-size:14px;line-height:1.6;color:#7a5310;font-weight:700}
.refusal-icon{width:32px;height:32px;border-radius:10px;background:rgba(228,168,60,.2);color:#946410;
  display:grid;place-items:center;flex:0 0 auto}
.refusal-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.assistant-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.assistant-links .btn svg{width:14px;height:14px}

/* ---------- Supporting records ---------- */
.supporting-records{margin-top:18px}
.supporting-records-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;
  color:var(--muted);margin-bottom:10px}
.supporting-records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px}
.record-chip{text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;
  display:grid;gap:3px;transition:.16s;position:relative;overflow:hidden}
button.record-chip{cursor:pointer;width:100%;font:inherit}
button.record-chip:hover{border-color:rgba(57,118,200,.4);transform:translateY(-2px);box-shadow:var(--sh-xs)}
.record-chip:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.record-chip.tone-red:before{background:var(--red)}
.record-chip.tone-amber:before{background:var(--amber)}
.record-chip.tone-green:before{background:var(--green)}
.record-chip.tone-plain:before{background:var(--muted)}
.record-chip b{font-size:13px;color:var(--navy)}
.record-chip span{font-size:11.5px;color:var(--slate);line-height:1.5}
.record-chip.tone-red span:last-child{color:var(--red);font-weight:800}
.record-chip.tone-amber span:last-child{color:#946410;font-weight:800}

/* ---------- Search results ---------- */
.search-result-groups{display:grid;gap:18px;margin-top:6px}
.search-result-group h3{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  font-weight:900;margin:0 0 8px}
.search-result{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:13px;
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;transition:.16s}
.search-result:hover{border-color:rgba(57,118,200,.4);background:#f9fbff;transform:translateX(2px)}
.search-result-copy{display:grid;gap:2px;min-width:0}
.search-result-copy b{font-size:13.5px;color:var(--navy)}
.search-result-copy small{font-size:11.5px;color:var(--slate)}
.search-result svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex:0 0 auto}

/* ---------- Commercial position ---------- */
.dashboard-section{margin-top:26px}
.position-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);gap:14px;align-items:start}
.position-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

/* money owed, the dominant figure */


.legend-row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);border-radius:12px;padding:9px 11px;transition:.16s}
.legend-row:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);transform:translateX(2px)}
.legend-swatch{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.legend-row.tone-red .legend-swatch{background:#ef7f84}
.legend-row.tone-amber .legend-swatch{background:#f0bd63}
.legend-row.tone-blue .legend-swatch{background:var(--bright)}
.legend-copy{flex:1;min-width:0}
.legend-copy b{display:block;font-size:12.5px;color:#fff;font-weight:800}
.legend-copy small{display:block;font-size:10.5px;color:rgba(255,255,255,.5);margin-top:1px}
.legend-figures{text-align:right;flex:0 0 auto}
.legend-figures b{display:block;font-size:14px;color:#fff;letter-spacing:-.03em}
.legend-figures small{display:block;font-size:10px;color:rgba(255,255,255,.45);margin-top:1px}

/* the four supporting figures */
.position-card{display:flex;flex-direction:column;overflow:hidden;background:var(--sheen);
  border:1px solid var(--edge);border-radius:20px;transition:.2s}
.position-card:hover{box-shadow:var(--sh-sm);border-color:var(--edge-2);transform:translateY(-2px)}
.position-card-main{flex:1;border:0;background:transparent;text-align:left;padding:17px 18px 14px;display:grid;
  gap:9px;align-content:start;width:100%}
.position-card-head{display:flex;gap:11px;align-items:flex-start}
.position-card-titles{min-width:0}
.position-card-titles b{display:block;font-size:13.5px;color:var(--navy);letter-spacing:-.015em;line-height:1.3}
.position-card-titles small{display:block;font-size:10.5px;color:var(--slate);line-height:1.45;margin-top:3px}
.position-card-figure{display:flex;align-items:baseline;gap:7px}
.position-card-figure strong{font-size:30px;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(135deg,var(--navy),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.position-card-unit{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.position-card-detail{font-size:11.5px;color:var(--slate);line-height:1.5}

.collect-bar{display:block;height:8px;border-radius:9px;background:var(--ice);overflow:hidden;margin-top:2px}
.collect-bar-fill{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--green),#5fcb9d)}
.collect-bar-key{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--slate)}
.collect-bar-key i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:5px}
.collect-bar-key .key-collected{background:var(--green)}
.collect-bar-key .key-owed{background:var(--ice);box-shadow:inset 0 0 0 1px rgba(57,118,200,.3)}
.collect-bar-key .key-credited{background:var(--muted)}

/* what this figure needs from you */
.metric-action{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;
  border-top:1px solid var(--line);background:var(--mist);padding:11px 18px;font-size:11.5px;
  font-weight:800;color:var(--navy);transition:.16s}
button.metric-action:hover{background:var(--ice)}
.metric-action.static{cursor:default;color:var(--slate);font-weight:750}
.metric-action span:not(.metric-action-dot){flex:1;min-width:0}
.metric-action svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;flex:0 0 auto}
button.metric-action:hover svg{stroke:var(--blue);transform:translateX(2px)}
.metric-action-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.metric-action.tone-urgent{color:#c0464b;background:#fff5f6}
.metric-action.tone-urgent .metric-action-dot{background:var(--red);box-shadow:0 0 0 3px rgba(217,93,98,.16)}
button.metric-action.tone-urgent:hover{background:#ffe9ec}
.metric-action.tone-attention{color:#946410;background:#fffaf0}
.metric-action.tone-attention .metric-action-dot{background:var(--amber);box-shadow:0 0 0 3px rgba(228,168,60,.18)}
button.metric-action.tone-attention:hover{background:#fff3dc}
.metric-action.tone-calm .metric-action-dot{background:var(--blue);box-shadow:0 0 0 3px rgba(57,118,200,.14)}

.metric-icon{width:34px;height:34px;border-radius:11px;background:var(--ice);color:var(--blue);
  display:grid;place-items:center;flex:0 0 auto}
.metric-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- attention tones ---------- */
.action-ic.red{background:#ffeef0;color:var(--red)}
.action-ic.amber{background:#fff4df;color:#b47916}
.action-ic.blue{background:var(--ice);color:var(--blue)}
.action-ic.purple{background:#efeefb;color:var(--purple)}
.link-inline{border:0;background:transparent;color:var(--blue);font-size:10px;font-weight:850;padding:3px 0;
  text-decoration:underline;text-underline-offset:2px}
.timeline .event>div{min-width:0}

/* ---------- Business Brain and Social summary ---------- */

/* ---------- Sales & Billing ---------- */
.sales-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.sales-header h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.055em;margin:10px 0 8px}
.sales-header h1:focus{outline:none}
.sales-header h1:focus-visible{outline:3px solid var(--bright);outline-offset:4px;border-radius:8px}
.sales-header p{margin:0;font-size:13.5px;color:var(--slate);max-width:640px}
.sales-tabs{display:flex;gap:7px;overflow:auto;margin:0 0 18px;padding:5px;background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid var(--line);border-radius:16px;width:max-content;max-width:100%;scrollbar-width:none;box-shadow:var(--sh-xs)}
.sales-tabs::-webkit-scrollbar{display:none}
.sales-tab{border:0;background:transparent;border-radius:11px;padding:10px 15px;color:var(--slate);
  font-size:13px;font-weight:800;white-space:nowrap;transition:.16s}
.sales-tab:hover:not(.active){background:var(--ice);color:var(--navy)}
.sales-tab.active{background:linear-gradient(135deg,var(--navy2),var(--blue));color:#fff;box-shadow:0 10px 22px rgba(23,55,111,.24)}

.sales-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start}
.sales-overview-grid .section-title{margin-bottom:13px}


.pipeline{display:grid;gap:9px}
.pipeline-row{display:grid;grid-template-columns:88px 1fr auto 28px;align-items:center;gap:11px;font-size:12px}
.pipeline-stage{color:var(--slate);font-weight:750}
.pipeline-bar{height:9px;border-radius:9px;background:var(--ice);overflow:hidden}
.pipeline-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--blue),var(--bright))}
.pipeline-value{font-weight:850;color:var(--navy);font-size:12.5px}
.pipeline-count{text-align:right;color:var(--muted);font-size:11px}

.ageing{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.ageing-row{border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;text-align:left;display:grid;gap:2px;transition:.16s}
.ageing-row:hover{border-color:rgba(57,118,200,.4);transform:translateY(-2px);box-shadow:var(--sh-xs)}
.ageing-row span{font-size:11px;color:var(--slate)}
.ageing-row b{font-size:17px;letter-spacing:-.04em;color:var(--navy)}
.ageing-row small{font-size:10.5px;color:var(--muted)}

.mini-list{display:grid;gap:7px}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);
  background:#fff;border-radius:12px;padding:11px 13px;text-align:left;width:100%;transition:.16s}
button.mini-row:hover{border-color:rgba(57,118,200,.4);background:#f9fbff;transform:translateX(2px)}
.mini-row.static{cursor:default}
.mini-row.pending{border-color:rgba(228,168,60,.35);background:#fffdf7}
.mini-row b{display:block;font-size:12.5px;color:var(--navy)}
.mini-row small{display:block;font-size:10.5px;color:var(--slate);margin-top:2px}
.mini-right{text-align:right;flex:0 0 auto}
.mini-row small.warn,.warn{color:#b47916;font-weight:800}

/* ---------- lists and tables ---------- */
.list-card{padding:20px}
.sales-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:13px}
.list-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:0 12px;flex:1;min-width:220px}
.list-search svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;flex:0 0 auto}
.list-search .control{border:0;padding:10px 0;background:transparent}
.list-search .control:focus{box-shadow:none}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.filter-chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 12px;font-size:11.5px;
  font-weight:750;color:var(--slate);transition:.16s}
.filter-chip:hover{border-color:rgba(57,118,200,.4);color:var(--blue)}
.filter-chip.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(23,55,111,.2)}
.applied-filters{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--ice);border-radius:11px;padding:9px 13px;margin-bottom:13px;font-size:11.5px;color:var(--slate)}
.applied-filters b{color:var(--navy)}

.data-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:15px;background:#fff}
.data-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.data-table.compact{min-width:520px}
.data-table thead th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
  font-weight:900;padding:12px 14px;background:var(--mist);border-bottom:1px solid var(--line);white-space:nowrap}
.data-table tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--slate)}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr.data-row.openable{cursor:pointer;transition:background .14s}
.data-table tbody tr.data-row.openable:hover{background:#f7faff}
.data-table tbody tr.data-row.openable:focus-visible{outline:3px solid var(--bright);outline-offset:-3px}
.data-table b{color:var(--navy);font-weight:800;display:block}
.data-table small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.data-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table td.num.strong{color:var(--navy);font-weight:850}
.data-table th:last-child,.data-table td.row-action{text-align:right;white-space:nowrap}
.pill{display:inline-flex;align-items:center;border-radius:99px;padding:4px 9px;font-size:10.5px;font-weight:850;white-space:nowrap}
.pill-blue{background:var(--ice);color:var(--blue)}
.pill-green{background:#eafaf1;color:#1f7a4e}
.pill-amber{background:#fff3dc;color:#946410}
.pill-red{background:#ffeef0;color:#c0464b}
.pill-grey{background:var(--mist);color:var(--slate)}
.empty-state{text-align:center;padding:44px 20px;color:var(--slate)}
.empty-state svg{width:30px;height:30px;stroke:var(--muted);fill:none;stroke-width:1.8;margin:0 auto 12px}
.empty-state b{display:block;color:var(--navy);font-size:14px;margin-bottom:5px}
.empty-state p{margin:0;font-size:12px}

/* ---------- record detail ---------- */
.veil.on .modal{width:min(820px,100%)}
.record-drawer{display:grid;gap:18px}
.record-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.record-summary dt{font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:900;margin-bottom:4px}
.record-summary dd{margin:0;font-size:13px;color:var(--navy);font-weight:700;line-height:1.5;word-break:break-word}
.consumer-banner{display:flex;gap:12px;align-items:flex-start;background:#f4f2fd;border:1px solid rgba(117,110,209,.24);
  border-radius:14px;padding:13px 15px}
.consumer-banner-icon{width:32px;height:32px;border-radius:10px;background:rgba(117,110,209,.16);color:var(--purple);
  display:grid;place-items:center;flex:0 0 auto}
.consumer-banner-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.consumer-banner b{font-size:12.5px;color:#4b45a8;display:block}
.consumer-banner p{margin:4px 0 0;font-size:11.5px;line-height:1.6;color:var(--slate)}
.consumer-banner small{display:block;margin-top:6px;font-size:10.5px;color:var(--muted)}
/* ---------- Business Brain: telling it how the business works ---------- */
/* A blank box gets a description of what you do and nothing else, so the
   awkward, useful things are asked for by name instead. */
.guidance-list{display:grid;gap:11px;margin-top:14px}
.guidance-item{display:grid;gap:3px;padding:11px 13px;background:var(--mist,#f7f9fc);
  border:1px solid var(--line);border-radius:13px}
.guidance-item b{font-size:12px;color:var(--navy)}
.guidance-item span{font-size:11.5px;line-height:1.6;color:var(--slate)}

.ctx-files{display:grid;gap:8px;margin-top:14px}
.ctx-file{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 13px;border:1px solid var(--line);border-radius:13px}
.ctx-file b{display:block;font-size:12.5px;color:var(--navy);word-break:break-word}
.ctx-file small{display:block;margin-top:3px;font-size:10.5px;color:var(--slate);font-weight:600}
.ctx-add{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
/* The file input itself is unstylable across browsers, so the label is the
   button and the input is reachable without being seen. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.site-findings{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.site-findings small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--muted);font-weight:900;margin-bottom:4px}
.site-findings b{font-size:12.5px;color:var(--navy);line-height:1.5;font-weight:750}
.site-findings .chip-wrap{margin-top:2px}
@media (max-width:640px){.ctx-file{flex-direction:column;align-items:stretch}}

/* Personal data carries an obligation from the moment it is written down, so
   the notice lives on the record rather than in a policy nobody opens. Amber
   and bold: a standing duty to keep in mind, not an error to fix — red is
   kept for the destructive and the broken, so it would cry wolf here. The
   age sits inside it, because that is the fact a retention review turns on.
   Same amber the rest of the app already warns in. */
.gdpr-note{background:#FFF6E9;border:1px solid rgba(228,168,60,.34);border-left:4px solid #E4A83C;
  border-radius:13px;padding:12px 15px;margin:0 0 14px}
.gdpr-note b{display:block;font-size:12.5px;font-weight:900;color:#7A5310}
.gdpr-note p{margin:5px 0 0;font-size:12px;line-height:1.6;font-weight:800;color:#7A5310}
.gdpr-note small{display:block;margin-top:8px;font-size:10.5px;line-height:1.6;
  color:var(--slate);font-weight:600}
.gdpr-note .gdpr-age{font-weight:900;color:#7A5310}
.modal-body .gdpr-note{margin-bottom:16px}

.detail-warning{background:#fff6e9;border:1px solid rgba(228,168,60,.3);border-radius:13px;padding:12px 14px;
  font-size:12px;line-height:1.6;color:#7a5310}
.related-block h3{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-weight:900;margin:0 0 9px}
.related-list{display:grid;gap:7px}
.related-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);
  background:#fff;border-radius:12px;padding:11px 13px;text-align:left;width:100%;transition:.16s}
button.related-row:hover{border-color:rgba(57,118,200,.4);background:#f9fbff}
.related-row b{display:block;font-size:12.5px;color:var(--navy)}
.related-row small{display:block;font-size:10.5px;color:var(--slate);margin-top:2px}
.timeline.flat{padding:4px 16px 10px;box-shadow:none;border-radius:14px}
.totals-block{display:grid;gap:6px;margin-top:12px;margin-left:auto;width:min(280px,100%)}
.totals-block div{display:flex;justify-content:space-between;font-size:12px;color:var(--slate);padding:5px 2px}
.totals-block b{color:var(--navy);font-variant-numeric:tabular-nums}
.totals-block .grand{border-top:1px solid var(--line);padding-top:9px;font-size:14px;font-weight:850;color:var(--navy)}
.modal-foot{align-items:center;justify-content:space-between}
.modal-head h2:focus{outline:none}
.modal-head h2:focus-visible{outline:3px solid var(--bright);outline-offset:4px;border-radius:6px}

/* ---------- responsive ---------- */
@media(max-width:1280px){
  .position-grid{grid-template-columns:1fr}
  .position-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .money-card-body{grid-template-columns:auto minmax(0,1fr)}
}
@media(max-width:1100px){
  .command-hero-grid{grid-template-columns:1fr}
  .hero-freshness{justify-self:start;text-align:left;justify-items:start}
  .sales-overview-grid{grid-template-columns:1fr}
  .position-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brain-summary-strip{grid-template-columns:1fr}
}
@media(max-width:820px){
  .command-hero{padding:24px 20px}
  .command-centre{margin-top:-20px;padding:16px 15px 15px;border-radius:18px}
  .business-command{flex-wrap:wrap;padding:10px 12px}
  .business-command-input{flex-basis:100%;order:-1;padding:6px 0}
  .business-command-icon{display:none}
  .business-command-submit{flex:1}
  .position-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .money-card-body{grid-template-columns:1fr;justify-items:center;gap:18px}
  .donut-legend{width:100%}
  .ageing{grid-template-columns:1fr}
  .assistant-query{max-width:150px}
  .supporting-records-grid{grid-template-columns:1fr}
  .record-summary{grid-template-columns:1fr 1fr}
  .prompt-chip{white-space:nowrap}
  .sales-header{flex-direction:column}
}
@media(max-width:560px){
  .position-cards{grid-template-columns:1fr}
  .record-summary{grid-template-columns:1fr}
  .assistant-answer{font-size:17px}
  .assistant-head-actions{width:100%;justify-content:space-between}
  .assistant-query{max-width:none;flex:1}
}

/* ---------- Social Studio, presented like any other Hub module ---------- */
.social-head{align-items:flex-start;margin-bottom:18px}
.social-head h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.055em;margin:10px 0 8px}
.social-head h1:focus{outline:none}
.social-head h1:focus-visible{outline:3px solid var(--bright);outline-offset:4px;border-radius:8px}
.social-head p{margin:0;font-size:13.5px;color:var(--slate);max-width:640px}
.social-head>div{min-width:0}
.social-shell{border-radius:20px;border:1px solid var(--edge);box-shadow:var(--sh-sm);background:var(--sheen)}

/* ---------- Sales & Billing editing ---------- */
.sales-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.sales-header-actions .btn svg{width:15px;height:15px}
.row-actions{display:inline-flex;gap:6px;justify-content:flex-end}
.modal-foot-actions{display:flex;gap:9px;align-items:center}
.modal-foot .btn svg{width:15px;height:15px}

.edited-banner{display:flex;align-items:center;gap:13px;background:#fff8ec;
  border:1px solid rgba(228,168,60,.35);border-radius:15px;padding:13px 16px;margin-bottom:16px}
.edited-banner-icon{width:34px;height:34px;border-radius:11px;background:rgba(228,168,60,.18);
  color:#946410;display:grid;place-items:center;flex:0 0 auto}
.edited-banner-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.edited-banner div{flex:1;min-width:0}
.edited-banner b{display:block;font-size:13px;color:#7a5310}
.edited-banner p{margin:3px 0 0;font-size:11.5px;color:var(--slate);line-height:1.5}

.record-editor{display:grid;gap:16px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-grid.hidden{display:none}
.field-cell.full{grid-column:1/-1}
.field-group-title{grid-column:1/-1;font-size:10px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted);font-weight:900;margin:4px 0 0}
.field-cell .label{display:block;font-size:11px;font-weight:850;color:var(--navy);margin-bottom:6px}
.field-cell .label .req{font-weight:750;color:var(--muted);text-transform:none;letter-spacing:0;font-size:10px}
.field-cell .control{width:100%}
.field-cell select.control{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.field-cell .textarea{min-height:80px;resize:vertical}
.field-cell .help{font-size:10.5px;color:var(--slate);margin-top:5px}
.editor-hint{font-size:11.5px;color:var(--slate);line-height:1.6;margin:0;padding:11px 13px;
  background:var(--mist);border-radius:12px;border:1px solid var(--line)}
.editor-note{font-size:11px;color:var(--muted);line-height:1.6;margin:0;padding-top:12px;
  border-top:1px solid var(--line)}
.editor-errors{display:none}
.editor-errors.on{display:block;background:#fff0f1;border:1px solid rgba(217,93,98,.32);
  border-radius:13px;padding:12px 15px}
.editor-errors b{display:block;font-size:12.5px;color:#c0464b;margin-bottom:6px}
.editor-errors ul{margin:0;padding-left:18px}
.editor-errors li{font-size:11.5px;color:#8f4145;line-height:1.6}

@media(max-width:560px){
  .field-grid{grid-template-columns:1fr}
  .field-cell.full{grid-column:auto}
  .row-actions{flex-direction:column;gap:4px}
  .edited-banner{flex-wrap:wrap}
  .modal-foot{flex-wrap:wrap;gap:10px}
}

/* ---------- deployment mode ---------- */
.mode-switch{display:inline-flex;gap:4px;padding:4px;background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-xs)}
.mode-option{border:0;background:transparent;border-radius:10px;padding:8px 13px;font-size:11.5px;
  font-weight:800;color:var(--slate);white-space:nowrap;transition:.16s}
.mode-option:hover:not(.active){background:var(--ice);color:var(--navy)}
.mode-option.active{background:linear-gradient(135deg,var(--navy2),var(--blue));color:#fff;
  box-shadow:0 8px 18px rgba(23,55,111,.2)}

.mode-banner{display:flex;align-items:flex-start;gap:13px;border-radius:15px;padding:14px 16px;margin-bottom:16px}
.mode-banner.standalone{background:var(--ice);border:1px solid rgba(57,118,200,.18)}
.mode-banner.connected{background:linear-gradient(120deg,#eef4fd,#f4f9ff);border:1px solid rgba(57,118,200,.24)}
.mode-banner-icon{width:34px;height:34px;border-radius:11px;background:rgba(57,118,200,.14);color:var(--blue);
  display:grid;place-items:center;flex:0 0 auto}
.mode-banner-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-banner>div{flex:1;min-width:0}
.mode-banner b{display:block;font-size:13px;color:var(--navy)}
.mode-banner p{margin:3px 0 0;font-size:11.5px;color:var(--slate);line-height:1.55}
.mode-banner .tag{flex:0 0 auto}
.mode-sources{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.source-chip{display:inline-flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:7px 11px;font-size:11.5px;font-weight:800;color:var(--navy);position:relative;padding-left:24px}
.source-chip i{position:absolute;left:11px;top:12px;width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 3px rgba(47,172,120,.16)}
.source-chip small{display:block;font-size:10px;font-weight:700;color:var(--slate);margin-top:2px}

.provenance-banner{display:flex;align-items:flex-start;gap:12px;background:var(--ice);
  border:1px solid rgba(57,118,200,.22);border-radius:14px;padding:13px 15px}
.provenance-icon{width:32px;height:32px;border-radius:10px;background:rgba(57,118,200,.15);color:var(--blue);
  display:grid;place-items:center;flex:0 0 auto}
.provenance-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.provenance-banner>div{flex:1;min-width:0}
.provenance-banner b{display:block;font-size:12.5px;color:var(--navy)}
.provenance-banner p{margin:4px 0 0;font-size:11.5px;line-height:1.6;color:var(--slate)}
.mini-row.connected-row{border-color:rgba(47,172,120,.28);background:#fbfffd}
.mini-row.connected-row .mini-right small{display:block;margin-top:4px;font-size:10px;color:var(--muted)}

@media(max-width:820px){
  .mode-switch{width:100%}
  .mode-option{flex:1;text-align:center;font-size:11px;padding:8px 6px}
  .sales-header-actions{width:100%}
  .mode-banner{flex-wrap:wrap}
}

/* ---------- quote builder ---------- */
.veil.on .modal:has(.quote-builder){width:min(980px,100%)}
.qb-lines-block{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--mist)}
.qb-lines-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px}
.qb-line-head,.qb-line{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.4fr) 74px 108px 96px 34px;
  gap:8px;align-items:center}
.qb-line-head{padding:0 4px 7px;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:900;color:var(--muted)}
.qb-line-head .num,.qb-line .control.num{text-align:right}
.qb-line{margin-bottom:8px}
.qb-line .control{padding:9px 10px;font-size:12.5px;border-radius:10px;background:#fff}
.qb-line select.control{appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.qb-line-net{text-align:right;font-size:13px;font-weight:850;color:var(--navy);font-variant-numeric:tabular-nums}
.qb-line-remove{border:0;background:transparent;color:var(--muted);width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;transition:.16s}
.qb-line-remove:hover{background:#FFE8EA;color:var(--red)}
.qb-line-remove svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.qb-empty{padding:22px;text-align:center;font-size:12px;color:var(--slate)}
.qb-totals{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;align-items:flex-start}
.qb-totals-rows{display:grid;gap:5px;min-width:min(300px,100%);margin-left:auto}
.qb-totals-rows div{display:flex;justify-content:space-between;gap:20px;font-size:12.5px;color:var(--slate);padding:5px 2px}
.qb-totals-rows b{color:var(--navy);font-variant-numeric:tabular-nums}
.qb-totals-rows .grand{border-top:1px solid var(--line);padding-top:9px;margin-top:3px;font-size:16px;font-weight:850;color:var(--navy)}
.qb-totals-rows .grand b{font-size:19px;letter-spacing:-.035em}
.qb-approval{display:flex;gap:11px;align-items:flex-start;background:#FFF8EC;
  border:1px solid rgba(245,165,36,.34);border-radius:13px;padding:12px 14px;flex:1;min-width:260px}
.qb-approval svg{width:17px;height:17px;stroke:#B47916;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:1px}
.qb-approval b{display:block;font-size:12px;color:#7A5310}
.qb-approval p{margin:3px 0 0;font-size:11px;line-height:1.55;color:var(--slate)}

@media(max-width:820px){
  .qb-line-head{display:none}
  .qb-line{grid-template-columns:1fr 1fr;gap:7px;padding:11px;background:#fff;
    border:1px solid var(--line);border-radius:13px;margin-bottom:9px;position:relative}
  .qb-line select.control{grid-column:1/-1}
  .qb-line input.control:nth-of-type(1){grid-column:1/-1}
  .qb-line-net{grid-column:1/-1;text-align:left;padding-top:3px;border-top:1px solid var(--line)}
  .qb-line-remove{position:absolute;right:7px;top:7px}
  .qb-totals-rows{min-width:100%}
}

/* ---------- Settings ---------- */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start}
.settings-grid.single{grid-template-columns:1fr}
.settings-brain.hidden{display:none}
.settings-notice{display:flex;align-items:center;gap:10px;background:var(--ice);
  border:1px solid rgba(47,111,208,.2);border-radius:13px;padding:11px 14px;margin-bottom:15px;
  font-size:12px;color:var(--navy);font-weight:750}
.settings-notice.you{background:#F1F0FE;border-color:rgba(123,108,246,.28);margin:0 0 14px}
.settings-notice svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

.permission-block{text-align:center;padding:44px 26px}
.permission-block-icon{width:46px;height:46px;border-radius:15px;background:var(--ice);color:var(--blue);
  display:grid;place-items:center;margin:0 auto 14px}
.permission-block-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.permission-block h2{font-size:18px;margin:0 0 8px}
.permission-block p{margin:0 auto 8px;max-width:440px;font-size:13px;color:var(--slate);line-height:1.6}
.permission-block .btn{margin-top:10px}

/* users */
.user-list{display:grid;gap:9px}
.user-row{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.9fr) auto;
  gap:13px;align-items:center;border:1px solid var(--line);border-radius:15px;padding:12px 14px;
  background:#fff;transition:.16s}
.user-row:hover{border-color:rgba(77,163,255,.4)}
.user-row.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,163,255,.14)}
.user-av{width:38px;height:38px;border-radius:12px;background:var(--grad-primary);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:900;flex:0 0 auto}
.user-copy{min-width:0}
.user-copy b{display:block;font-size:13.5px;color:var(--navy)}
.user-copy small{display:block;font-size:11px;color:var(--slate);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-tag{display:inline-block;margin-left:6px;font-size:9px;font-weight:900;text-transform:uppercase;
  letter-spacing:.1em;color:var(--blue);background:var(--ice);border-radius:6px;padding:2px 6px;vertical-align:middle}
.user-role small,.user-status small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.pill-violet{background:linear-gradient(135deg,#E7E3FF,#F3F1FF);color:#5B4BD6;box-shadow:inset 0 0 0 1px rgba(123,108,246,.24)}
.pill-cyan{background:linear-gradient(135deg,#D5F6FA,#E9FBFD);color:#0C7F92;box-shadow:inset 0 0 0 1px rgba(56,214,224,.3)}

/* permission panel */
.permission-panel .section-title{align-items:flex-start}
.role-preset{min-width:180px}
.role-preset .label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  font-weight:900;color:var(--muted);margin-bottom:5px}
.role-preset .control{padding:9px 12px;font-size:12.5px}
.toggle-list{display:grid;gap:2px}
.toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:13px 2px;border-bottom:1px solid var(--line)}
.toggle-row:last-child{border-bottom:0}
.toggle-row.disabled{opacity:.62}
.toggle-copy{min-width:0;flex:1}
.toggle-copy label{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle-copy b{font-size:13px;color:var(--navy);font-weight:800}
.toggle-copy small{display:block;font-size:11.5px;color:var(--slate);line-height:1.55;margin-top:3px}
.toggle-copy .toggle-note{color:var(--muted);font-size:10.5px;margin-top:4px}
.toggle-flag{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  color:#9A6410;background:linear-gradient(135deg,#FFEFD2,#FFF8EA);border-radius:6px;padding:2px 6px}
.toggle-row.sensitive .toggle-copy b{color:#7A5310}

/* the slider itself */
.switch{position:relative;flex:0 0 auto;width:50px;height:28px;display:inline-block}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}
.switch input:disabled{cursor:not-allowed}
.switch-track{position:absolute;inset:0;border-radius:99px;background:#D3DCEA;
  box-shadow:inset 0 1px 3px rgba(11,32,80,.14);transition:background .22s ease}
.switch-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(11,32,80,.28);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.switch input:checked+.switch-track{background:var(--grad-primary);
  box-shadow:inset 0 1px 3px rgba(11,32,80,.10),0 0 14px rgba(77,163,255,.4)}
.switch input:checked+.switch-track .switch-thumb{transform:translateX(22px)}
.toggle-row.sensitive .switch input:checked+.switch-track{background:linear-gradient(135deg,#F5A524,#FFD37A);
  box-shadow:inset 0 1px 3px rgba(11,32,80,.10),0 0 14px rgba(245,165,36,.4)}
.switch input:focus-visible+.switch-track{outline:3px solid var(--bright);outline-offset:3px}

/* threshold and usage */
.threshold-control{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.threshold-value{font-size:30px;font-weight:850;letter-spacing:-.05em;background:var(--grad-ink);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.threshold-control .control{max-width:180px}
.usage-meter{margin-bottom:16px}
.usage-meter:last-of-type{margin-bottom:0}
.usage-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.usage-head b{font-size:13px;color:var(--navy)}
.usage-head span{font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.usage-bar{height:10px;border-radius:9px;background:var(--ice);overflow:hidden}
.usage-bar i{display:block;height:100%;border-radius:9px}
.usage-bar i.tone-blue{background:var(--grad-primary)}
.usage-bar i.tone-cyan{background:var(--grad-cyan)}
.usage-bar i.tone-emerald{background:var(--grad-emerald)}
.usage-meter small{display:block;font-size:10.5px;color:var(--muted);margin-top:5px}

@media(max-width:1100px){.settings-grid{grid-template-columns:1fr}}
@media(max-width:820px){
  .user-row{grid-template-columns:auto 1fr;row-gap:10px}
  .user-role,.user-status{grid-column:2}
  .user-row .row-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-start}
  .toggle-row{gap:12px}
}

/* ---------- guided record form ---------- */
.form-section{border:1px solid var(--line);border-radius:17px;padding:17px;background:var(--mist)}
.form-section+.form-section{margin-top:14px}
.form-section-title{display:flex;align-items:center;gap:11px;margin:0 0 14px;font-size:15px;
  font-weight:850;color:var(--navy);letter-spacing:-.02em}
.form-step{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  font-size:12px;font-weight:900;color:#fff}
.form-section .field-grid{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.form-section .field-grid+.field-grid{margin-top:12px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.choice-card{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border-radius:15px;
  border:1.5px solid var(--line);background:#fff;transition:.16s;position:relative}
.choice-card:hover{border-color:rgba(77,163,255,.55);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(11,32,80,.1)}
.choice-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--ice);color:var(--blue);transition:.16s}
.choice-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.choice-copy{flex:1;min-width:0}
.choice-copy b{display:block;font-size:14px;color:var(--navy)}
.choice-copy small{display:block;font-size:11px;color:var(--slate);line-height:1.5;margin-top:2px}
.choice-tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1.5px solid var(--line);color:transparent;transition:.16s}
.choice-tick svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round}
.choice-card.selected .choice-tick{border-color:transparent;color:#fff}
.record-editor .field-cell .control{font-size:14px;padding:11px 13px}
@media(max-width:560px){.choice-grid{grid-template-columns:1fr}}

/* =====================================================================
   ProcessLabs Efficiency Hub, aurora pass.

   Direction: the brand is blue and white, so "more colourful" widens the
   cool spectrum rather than importing warm colours. The palette runs
   cyan -> azure -> violet around the ProcessLabs blue, which reads as
   vivid and modern while staying unmistakably this brand.

   One signature element: the aurora command centre on Home, where the
   greeting and the Ask field sit on a single luminous surface. Every
   other surface stays quiet so the data remains the thing you read.

   Self-hosted only. No web fonts, no third-party requests.
   ===================================================================== */

:root{
  /* --- deep ends --- */
  --abyss:#050D20;
  --deep:#050D20;
  --navy:#0B2050;
  --navy2:#12306B;

  /* --- the blue core --- */
  --blue:#2F6FD0;
  --bright:#4DA3FF;
  --sky:#9BD0FF;

  /* --- the spectrum either side of blue --- */
  --cyan:#38D6E0;
  --cyan-deep:#12A9C4;
  --violet:#7B6CF6;
  --violet-deep:#5B4BD6;
  --purple:#7B6CF6;

  /* --- paper --- */
  --ice:#E8F2FF;
  --mist:#F4F8FE;
  --paper:#ffffff;
  --tint:#EEF5FF;

  /* --- ink --- */
  --ink:#0C1730;
  --slate:#5A6B88;
  --muted:#7D8DA9;
  --faint:#7D8DA9;
  --line:rgba(11,32,80,.10);
  --edge:rgba(11,32,80,.09);
  --edge-2:rgba(11,32,80,.16);

  /* --- signals, more saturated than before --- */
  --green:#12B981;
  --ok:#12B981;
  --amber:#F5A524;
  --red:#E0464D;
  --coral:#FF8A8F;

  /* --- elevation, tuned to the deeper navy --- */
  --sheen:linear-gradient(180deg,#ffffff 0%,#FAFCFF 100%);
  --sh-xs:0 1px 2px rgba(11,32,80,.05);
  --sh-sm:0 12px 32px rgba(11,32,80,.09);
  --sh-md:0 26px 60px rgba(11,32,80,.14);
  --sh-lg:0 50px 110px rgba(5,13,32,.32);
  --shadow:0 12px 32px rgba(11,32,80,.09);
  --shadow-lg:0 50px 110px rgba(5,13,32,.32);
  --shadow-xs:0 1px 2px rgba(11,32,80,.05);
  --shadow-sm:0 12px 32px rgba(11,32,80,.09);
  --shadow-md:0 26px 60px rgba(11,32,80,.14);
  --glow-blue:rgba(77,163,255,.6);

  /* --- gradients --- */
  --grad-primary:linear-gradient(135deg,#2F6FD0 0%,#4DA3FF 100%);
  --grad-cyan:linear-gradient(135deg,#38D6E0 0%,#4DA3FF 100%);
  --grad-violet:linear-gradient(135deg,#7B6CF6 0%,#4DA3FF 100%);
  --grad-emerald:linear-gradient(135deg,#12B981 0%,#38D6E0 100%);
  --grad-ink:linear-gradient(135deg,#0B2050 0%,#2F6FD0 100%);
}

/* ---------- page backdrop: a faint aurora that never competes ---------- */
html,body{
  background:
    radial-gradient(900px 560px at 88% -6%,rgba(77,163,255,.13),transparent 62%),
    radial-gradient(760px 620px at 4% 2%,rgba(123,108,246,.09),transparent 58%),
    radial-gradient(680px 480px at 60% 108%,rgba(56,214,224,.08),transparent 60%),
    var(--mist);
}

/* ---------- sidebar ---------- */
.sidebar{
  background:
    radial-gradient(680px 420px at 8% -8%,rgba(77,163,255,.30),transparent 62%),
    radial-gradient(420px 380px at 92% 108%,rgba(123,108,246,.26),transparent 62%),
    linear-gradient(168deg,#050D20 0%,#0A1D45 58%,#12306B 100%);
  border-right:1px solid rgba(255,255,255,.07);
}
.nav-btn{border-radius:12px}
.nav-btn.active{
  background:linear-gradient(100deg,#2F6FD0,#4DA3FF);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px rgba(47,111,208,.5);
}
.nav-btn.active:before{
  background:linear-gradient(180deg,var(--cyan),#fff 55%,var(--sky));
  box-shadow:0 0 18px var(--glow-blue);width:3px;
}
.nav-btn.active svg{color:#fff}
.workspace{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.workspace-av{background:var(--grad-cyan);color:#04101F}

/* ---------- buttons ---------- */
.btn-primary{background:var(--grad-primary);box-shadow:0 12px 28px rgba(47,111,208,.32)}
.btn-primary:hover{background:linear-gradient(135deg,#2F6FD0 0%,#38D6E0 110%);
  box-shadow:0 18px 40px rgba(47,111,208,.4);transform:translateY(-2px)}
.btn-soft{background:linear-gradient(180deg,#F2F8FF,var(--ice));
  box-shadow:inset 0 0 0 1px rgba(47,111,208,.12);color:var(--navy)}
/* Deciding a deal is won or lost is the one place an outcome has a colour:
   both are real, deliberate choices, so both get a box rather than one
   looking like the action and the other like an afterthought. They follow
   the same tinted treatment as the green and red pills. */
.btn-success{background:linear-gradient(135deg,#D6F7EA,#E9FCF5);color:#07724F;
  box-shadow:inset 0 0 0 1px rgba(18,185,129,.28)}
.btn-success:hover{background:linear-gradient(135deg,#C6F2E1,#DEFAEF);
  box-shadow:inset 0 0 0 1px rgba(18,185,129,.42),0 10px 22px rgba(18,185,129,.18)}
.btn-danger{background:linear-gradient(135deg,#FFE1E3,#FFF0F1);color:#B0323A;
  box-shadow:inset 0 0 0 1px rgba(224,70,77,.26)}
.btn-danger:hover{background:linear-gradient(135deg,#FFD3D6,#FFE7E9);
  box-shadow:inset 0 0 0 1px rgba(224,70,77,.4),0 10px 22px rgba(224,70,77,.18)}
.btn-success:focus-visible,.btn-danger:focus-visible{outline:3px solid var(--bright);outline-offset:2px}

/* ---------- THE SIGNATURE: aurora command centre ---------- */
.command-hero{
  border-radius:30px 30px 0 0;
  padding:38px 40px 46px;
  overflow:hidden;
  background:
    radial-gradient(680px 420px at 82% 8%,rgba(56,214,224,.34),transparent 58%),
    radial-gradient(560px 460px at 18% 106%,rgba(123,108,246,.40),transparent 60%),
    radial-gradient(520px 340px at 55% -14%,rgba(77,163,255,.34),transparent 62%),
    linear-gradient(150deg,#050D20 0%,#0A1E48 52%,#12306B 100%);
  box-shadow:0 40px 90px rgba(5,13,32,.34);
}
.command-hero:before{
  content:"";position:absolute;inset:-30%;
  background:
    radial-gradient(closest-side,rgba(56,214,224,.30),transparent 70%) 18% 30%/48% 58% no-repeat,
    radial-gradient(closest-side,rgba(123,108,246,.28),transparent 70%) 78% 66%/46% 56% no-repeat,
    radial-gradient(closest-side,rgba(77,163,255,.26),transparent 70%) 52% 12%/44% 50% no-repeat;
  filter:blur(6px);
  animation:plAurora 26s ease-in-out infinite alternate;
  mask-image:none;-webkit-mask-image:none;
}
.command-hero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000 25%,transparent 78%);
  width:auto;height:auto;border-radius:0;right:auto;top:auto;
}
@keyframes plAurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}
}
.command-hero-grid{gap:34px}
.command-hero .eyebrow{color:#fff!important;letter-spacing:.2em}
.command-hero .eyebrow:before{background:linear-gradient(90deg,var(--bright),#fff);width:26px}
.command-hero h1{
  font-size:clamp(34px,4.4vw,62px);letter-spacing:-.055em;line-height:.98;font-weight:800;
  background:linear-gradient(112deg,#ffffff 0%,#DDF0FF 40%,#9BD0FF 72%,#C4B9FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 20px 60px rgba(77,163,255,.2);
}
.command-hero p{color:rgba(226,240,255,.72);font-size:16px}
.hero-freshness .tag-blue{background:rgba(255,255,255,.10);color:#EAF4FF;
  box-shadow:inset 0 0 0 1px rgba(155,208,255,.28);backdrop-filter:blur(10px)}
.hero-freshness small{color:rgba(200,222,250,.55)}
.hero-freshness b{color:#EAF4FF}

/* the Ask surface reads as part of the same light source */
.command-centre{
  margin-top:0;border-radius:0 0 30px 30px;padding:26px 40px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,#ffffff 100%);
  border:0;border-top:1px solid rgba(155,208,255,.35);
  box-shadow:0 34px 70px rgba(11,32,80,.16);
}
.command-label{font-size:16px;font-weight:850;letter-spacing:-.025em;color:var(--navy)}
.read-only-badge{background:linear-gradient(135deg,var(--ice),#DCEBFF);color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(47,111,208,.2)}
.business-command{
  border:1.5px solid rgba(47,111,208,.16);border-radius:17px;padding:8px 9px 8px 16px;
  background:linear-gradient(180deg,#ffffff,#FBFDFF);
  box-shadow:0 2px 8px rgba(11,32,80,.05);
}
.business-command:focus-within{
  border-color:transparent;
  box-shadow:0 0 0 2px rgba(77,163,255,.55),0 0 0 7px rgba(77,163,255,.14),0 14px 34px rgba(47,111,208,.2);
}
.business-command-input{font-size:16px}
.business-command-icon svg{stroke:var(--blue)}
.business-command-submit{padding:12px 20px;font-size:14px}
.prompt-chip{border:1px solid rgba(47,111,208,.18);background:#fff;color:var(--navy);font-weight:800}
.prompt-chip:hover{border-color:transparent;background:var(--grad-primary);color:#fff;
  box-shadow:0 10px 22px rgba(47,111,208,.28);transform:translateY(-2px)}

/* ---------- assistant ---------- */
.assistant-card{border:1px solid rgba(47,111,208,.16);box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.assistant-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--bright) 45%,var(--violet))}
.assistant-answer{font-size:20px;font-weight:800;letter-spacing:-.028em;color:var(--navy)}
.assistant-sources{background:linear-gradient(135deg,#F3F8FF,#FAFCFF);border-color:rgba(47,111,208,.14)}
.record-chip{border-color:rgba(47,111,208,.14);border-radius:15px}
.record-chip:before{width:4px;background:var(--grad-primary)}
.record-chip.tone-red:before{background:linear-gradient(180deg,#FF8A8F,#E0464D)}
.record-chip.tone-amber:before{background:linear-gradient(180deg,#FFD37A,#F5A524)}
.record-chip.tone-green:before{background:var(--grad-emerald)}
button.record-chip:hover{border-color:rgba(77,163,255,.5);box-shadow:0 14px 30px rgba(11,32,80,.12)}
.search-result:hover{border-color:rgba(77,163,255,.45);background:linear-gradient(90deg,#F4F9FF,#fff)}

/* ---------- money owed, the dominant figure ---------- */
@keyframes plDonutIn{from{opacity:0;transform:rotate(-90deg) scale(.86)}to{opacity:1;transform:rotate(-90deg) scale(1)}}
/* The ring is a control, not a picture: each arc and the total open the
   invoices they were counting, so both need a visible hit state. Only the
   painted arc responds — the gaps between bands stay inert. */
/* Anchored to the hole rather than sized in pixels, so it stays clear of the
   arcs at every breakpoint. The figures inside are wider than the hole and
   overhang the ring, so they take no clicks of their own — the round button
   beneath them is the whole hit area. */
.legend-row{border-radius:14px;border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.055)}
.legend-row:hover{background:rgba(255,255,255,.13);border-color:rgba(155,208,255,.4);transform:translateX(3px)}
.legend-swatch{width:10px;height:10px;border-radius:4px}
.legend-row.tone-red .legend-swatch{background:linear-gradient(140deg,#FF8A8F,#E0464D);box-shadow:0 0 12px rgba(255,138,143,.55)}
.legend-row.tone-amber .legend-swatch{background:linear-gradient(140deg,#FFD37A,#F5A524);box-shadow:0 0 12px rgba(245,165,36,.5)}
.legend-row.tone-blue .legend-swatch{background:linear-gradient(140deg,#5FE3EA,#4DA3FF);box-shadow:0 0 12px rgba(77,163,255,.55)}
.legend-figures b{font-size:15px}

/* ---------- the four supporting figures, one hue each ---------- */
.position-card{border-radius:22px;position:relative;overflow:hidden;border-color:var(--edge)}
.position-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-primary)}
.position-card:after{content:"";position:absolute;right:-60px;top:-70px;width:170px;height:170px;
  border-radius:50%;opacity:.5;pointer-events:none;
  background:radial-gradient(circle,rgba(77,163,255,.20),transparent 68%)}
.position-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--edge-2)}
.position-card>*{position:relative;z-index:1}
.position-card .metric-icon{background:var(--grad-primary);color:#fff;
  box-shadow:0 10px 22px rgba(47,111,208,.30)}
.position-card-figure strong{font-size:32px;font-weight:850;background:var(--grad-ink);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.position-card-titles b{font-size:14px;font-weight:850}

.position-card.accent-cyan:before{background:var(--grad-cyan)}
.position-card.accent-cyan:after{background:radial-gradient(circle,rgba(56,214,224,.24),transparent 68%)}
.position-card.accent-cyan .metric-icon{background:var(--grad-cyan);box-shadow:0 10px 22px rgba(56,214,224,.34)}
.position-card.accent-cyan .position-card-figure strong{background:linear-gradient(135deg,#0B2050,#12A9C4);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.position-card.accent-violet:before{background:var(--grad-violet)}
.position-card.accent-violet:after{background:radial-gradient(circle,rgba(123,108,246,.24),transparent 68%)}
.position-card.accent-violet .metric-icon{background:var(--grad-violet);box-shadow:0 10px 22px rgba(123,108,246,.34)}
.position-card.accent-violet .position-card-figure strong{background:linear-gradient(135deg,#0B2050,#5B4BD6);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.position-card.accent-emerald:before{background:var(--grad-emerald)}
.position-card.accent-emerald:after{background:radial-gradient(circle,rgba(18,185,129,.20),transparent 68%)}
.position-card.accent-emerald .metric-icon{background:var(--grad-emerald);box-shadow:0 10px 22px rgba(18,185,129,.32)}
.position-card.accent-emerald .position-card-figure strong{background:linear-gradient(135deg,#0B2050,#12B981);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.collect-bar{height:9px;background:var(--ice)}
.collect-bar-fill{background:var(--grad-emerald);box-shadow:0 0 14px rgba(18,185,129,.4)}

/* ---------- action rows ---------- */
.metric-action{font-weight:850;font-size:12px}
.metric-action.tone-urgent{background:linear-gradient(90deg,#FFF1F2,#FFF7F7);color:#C33F45}
.metric-action.tone-urgent .metric-action-dot{background:linear-gradient(140deg,#FF8A8F,#E0464D);
  box-shadow:0 0 0 4px rgba(224,70,77,.14)}
.metric-action.tone-attention{background:linear-gradient(90deg,#FFF8EC,#FFFCF5);color:#9A6410}
.metric-action.tone-attention .metric-action-dot{background:linear-gradient(140deg,#FFD37A,#F5A524);
  box-shadow:0 0 0 4px rgba(245,165,36,.18)}
.metric-action.tone-calm .metric-action-dot{background:var(--grad-primary);box-shadow:0 0 0 4px rgba(77,163,255,.16)}

/* ---------- attention and activity ---------- */
.action-ic{border-radius:13px}
.action-ic.red{background:linear-gradient(140deg,#FFE6E8,#FFF1F2);color:#D93F47}
.action-ic.amber{background:linear-gradient(140deg,#FFF0D6,#FFF8EA);color:#B47916}
.action-ic.blue{background:linear-gradient(140deg,#DCEBFF,#EFF6FF);color:var(--blue)}
.action-ic.purple{background:linear-gradient(140deg,#E7E3FF,#F3F1FF);color:var(--violet-deep)}
.action:hover{background:linear-gradient(90deg,#F3F9FF,#fff)}
.event-dot{border-color:var(--bright);box-shadow:0 0 0 4px rgba(77,163,255,.14),0 0 14px rgba(77,163,255,.4)}
.timeline .event:not(:last-child):after{background:linear-gradient(180deg,rgba(77,163,255,.34),transparent)}

/* ---------- Business Brain and Social summary ---------- */

/* ---------- Sales & Billing ---------- */
.sales-header h1{font-weight:850;background:var(--grad-ink);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sales-tab.active{background:var(--grad-primary);box-shadow:0 12px 26px rgba(47,111,208,.30)}
.sales-tabs{border-radius:17px;box-shadow:var(--sh-xs)}
.mode-option.active{background:var(--grad-primary);box-shadow:0 10px 22px rgba(47,111,208,.28)}
.filter-chip.active{background:var(--grad-primary);border-color:transparent;
  box-shadow:0 10px 22px rgba(47,111,208,.28)}
.pipeline-bar{background:var(--ice)}
.pipeline-bar i{background:linear-gradient(90deg,var(--cyan),var(--bright) 60%,var(--violet))}
.ageing-row:hover{border-color:rgba(77,163,255,.45)}
.mode-banner.connected{background:linear-gradient(120deg,#EAF3FF,#F2F0FF);border-color:rgba(77,163,255,.26)}
.mode-banner-icon{background:var(--grad-primary);color:#fff;box-shadow:0 8px 20px rgba(47,111,208,.28)}
.provenance-icon{background:var(--grad-cyan);color:#04101F}
.consumer-banner-icon{background:var(--grad-violet);color:#fff}
.edited-banner-icon{background:linear-gradient(140deg,#FFD37A,#F5A524);color:#5C3D06}

/* ---------- tables ---------- */
.data-table-wrap{border-radius:17px;border-color:var(--edge)}
.data-table thead th{background:linear-gradient(180deg,#F3F8FF,#EEF4FD);color:#6A7A97;
  border-bottom:1px solid rgba(47,111,208,.14)}
.data-table tbody tr.data-row.openable:hover{background:linear-gradient(90deg,#F3F9FF,#FBFDFF)}
.pill{font-weight:850}
.pill-blue{background:linear-gradient(135deg,#DCEBFF,#EFF6FF);color:#1F58AE;box-shadow:inset 0 0 0 1px rgba(47,111,208,.16)}
.pill-green{background:linear-gradient(135deg,#D6F7EA,#E9FCF5);color:#07724F;box-shadow:inset 0 0 0 1px rgba(18,185,129,.22)}
.pill-amber{background:linear-gradient(135deg,#FFEFD2,#FFF8EA);color:#9A6410;box-shadow:inset 0 0 0 1px rgba(245,165,36,.24)}
.pill-red{background:linear-gradient(135deg,#FFE1E3,#FFF0F1);color:#B0323A;box-shadow:inset 0 0 0 1px rgba(224,70,77,.2)}
.tag-live{background:linear-gradient(180deg,#DFFAEF,#EEFCF7);color:#07724F;box-shadow:inset 0 0 0 1px rgba(18,185,129,.24)}
.tag-blue{background:linear-gradient(180deg,#DCEBFF,#EFF6FF);color:#1F58AE;box-shadow:inset 0 0 0 1px rgba(47,111,208,.18)}

/* ---------- modals and forms ---------- */
.veil{background:rgba(5,13,32,.66)}
.modal{border-radius:26px;box-shadow:var(--sh-lg)}
.modal-head{background:linear-gradient(180deg,#F6FAFF,#fff);border-bottom:1px solid var(--line)}
.field-cell .control:focus{border-color:var(--bright);box-shadow:0 0 0 4px rgba(77,163,255,.16)}
.toast{background:linear-gradient(135deg,#050D20,#12306B);box-shadow:0 24px 50px rgba(5,13,32,.42)}
.toast i{background:rgba(18,185,129,.24);color:#7BEFC0}

/* ---------- entrance choreography ---------- */
.view.active>*{animation:plRise .62s cubic-bezier(.22,1,.36,1) both}
.view.active>*:nth-child(1){animation-delay:.02s}
.view.active>*:nth-child(2){animation-delay:.07s}
.view.active>*:nth-child(3){animation-delay:.12s}
.view.active>*:nth-child(4){animation-delay:.17s}
.view.active>*:nth-child(5){animation-delay:.22s}
.view.active>*:nth-child(n+6){animation-delay:.27s}
@keyframes plRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.position-cards>*{animation:plRise .6s cubic-bezier(.22,1,.36,1) both}
.position-cards>*:nth-child(1){animation-delay:.14s}
.position-cards>*:nth-child(2){animation-delay:.20s}
.position-cards>*:nth-child(3){animation-delay:.26s}
.position-cards>*:nth-child(4){animation-delay:.32s}

/* Nothing above is load bearing, so motion can be removed entirely. */
@media(prefers-reduced-motion:reduce){
  .command-hero:before{animation:none}
  .view.active>*,.position-cards>*{animation:none;opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .command-hero{padding:30px 26px 38px;border-radius:26px 26px 0 0}
  .command-centre{padding:22px 26px 20px;border-radius:0 0 26px 26px}
}
@media(max-width:820px){
  .command-hero{padding:26px 20px 32px;border-radius:22px 22px 0 0}
  .command-hero h1{font-size:clamp(30px,8vw,42px)}
  .command-centre{padding:18px 18px 17px;border-radius:0 0 22px 22px}
}

/* =====================================================================
   Module tab bars.
   These are the way into each part of a module, so they need to read as
   solid, clickable things rather than words floating on white.
   ===================================================================== */
.sales-tabs,.brain-tabs{
  display:flex;gap:9px;padding:9px;width:100%;max-width:100%;
  background:linear-gradient(135deg,#EAF2FE 0%,#F2F6FF 55%,#F0EFFE 100%);
  border:1px solid rgba(47,111,208,.16);border-radius:20px;
  box-shadow:0 6px 20px rgba(11,32,80,.06);overflow-x:auto;scrollbar-width:none;
  margin:0 0 20px;
}
.sales-tabs::-webkit-scrollbar,.brain-tabs::-webkit-scrollbar{display:none}

.sales-tab,.brain-tab{
  display:flex;align-items:center;gap:9px;flex:1 1 auto;justify-content:center;
  min-width:max-content;white-space:nowrap;
  padding:13px 17px;border-radius:14px;border:1px solid rgba(47,111,208,.16);
  background:linear-gradient(180deg,#ffffff,#F7FAFF);
  color:var(--navy);font-size:15px;font-weight:800;letter-spacing:-.015em;
  box-shadow:0 1px 2px rgba(11,32,80,.05);
  transition:transform .16s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.sales-tab .tab-ic,.brain-tab .tab-ic{
  display:grid;place-items:center;width:30px;height:30px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(140deg,#DCEBFF,#EFF6FF);color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(47,111,208,.14);transition:.18s ease;
}
.sales-tab .tab-ic svg,.brain-tab .tab-ic svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.sales-tab:hover:not(.active),.brain-tab:hover:not(.active){
  transform:translateY(-2px);border-color:rgba(77,163,255,.5);
  box-shadow:0 12px 26px rgba(11,32,80,.12);
}
.sales-tab:hover:not(.active) .tab-ic,.brain-tab:hover:not(.active) .tab-ic{
  background:var(--grad-primary);color:#fff;box-shadow:0 6px 14px rgba(47,111,208,.3);
}
.sales-tab.active,.brain-tab.active{
  background:var(--grad-primary);color:#fff;border-color:transparent;
  box-shadow:0 14px 30px rgba(47,111,208,.36);transform:translateY(-1px);
}
.sales-tab.active .tab-ic,.brain-tab.active .tab-ic{
  background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

/* the module each tab bar belongs to, tinted so the three read as siblings */
#view-settings .sales-tabs{
  background:linear-gradient(135deg,#EFECFE 0%,#F3F1FF 55%,#EAF2FE 100%);
  border-color:rgba(123,108,246,.18);
}
#view-settings .sales-tab .tab-ic{background:linear-gradient(140deg,#E7E3FF,#F3F1FF);color:var(--violet-deep)}
#view-settings .sales-tab.active{background:var(--grad-violet);box-shadow:0 14px 30px rgba(123,108,246,.36)}
#view-settings .sales-tab:hover:not(.active) .tab-ic{background:var(--grad-violet);color:#fff}
.brain-tabs{
  background:linear-gradient(135deg,#E6F8FB 0%,#EEF6FF 55%,#EAF2FE 100%);
  border-color:rgba(56,214,224,.24);
}
.brain-tab .tab-ic{background:linear-gradient(140deg,#D5F6FA,#E9FBFD);color:var(--cyan-deep)}
.brain-tab.active{background:var(--grad-cyan);color:#06283A;box-shadow:0 14px 30px rgba(56,214,224,.4)}
.brain-tab.active .tab-ic{background:rgba(6,40,58,.14);color:#06283A}
.brain-tab:hover:not(.active) .tab-ic{background:var(--grad-cyan);color:#06283A}

@media(max-width:1100px){
  .sales-tab,.brain-tab{flex:0 0 auto;font-size:14px;padding:12px 15px}
}
@media(max-width:820px){
  .sales-tabs,.brain-tabs{gap:7px;padding:7px;border-radius:17px}
  .sales-tab,.brain-tab{font-size:13.5px;padding:11px 13px;gap:7px}
  .sales-tab .tab-ic,.brain-tab .tab-ic{width:26px;height:26px;border-radius:9px}
  .sales-tab .tab-ic svg,.brain-tab .tab-ic svg{width:14px;height:14px}
}

/* guided form accents */
.form-step{background:var(--grad-primary);box-shadow:0 6px 14px rgba(47,111,208,.3)}
.form-section:nth-of-type(2) .form-step{background:var(--grad-cyan);box-shadow:0 6px 14px rgba(56,214,224,.32)}
.form-section:nth-of-type(3) .form-step{background:var(--grad-violet);box-shadow:0 6px 14px rgba(123,108,246,.32)}
.choice-card.selected{border-color:transparent;background:linear-gradient(135deg,#F0F6FF,#FAFCFF);
  box-shadow:0 0 0 2px var(--blue),0 14px 30px rgba(47,111,208,.18)}
.choice-card.selected .choice-ic{background:var(--grad-primary);color:#fff;
  box-shadow:0 8px 18px rgba(47,111,208,.32)}
.choice-card.selected .choice-tick{background:var(--grad-primary)}

/* =====================================================================
   Coloured surfaces.

   Anything that is a summary or a way into somewhere else carries the
   palette. Dense data surfaces (tables, forms, record details) stay
   clean, because the numbers are the thing being read there, and the
   dark money card stays the loudest thing on Home so the headline
   figure keeps winning.
   ===================================================================== */

/* ---------- the four supporting figures ---------- */
.position-card{
  background:linear-gradient(152deg,#E7F1FF 0%,#F4F9FF 62%,#FBFDFF 100%);
  border:1.5px solid rgba(47,111,208,.28);
  box-shadow:0 10px 26px rgba(11,32,80,.08);
}
.position-card:before{width:5px}
.position-card:after{opacity:.75;width:190px;height:190px;right:-66px;top:-78px}
.position-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(11,32,80,.16)}

.position-card .position-card-detail{color:#48597A}
.position-card .metric-action{
  background:linear-gradient(90deg,rgba(47,111,208,.13),rgba(47,111,208,.06));
  border-top:1px solid rgba(47,111,208,.2);color:#1F58AE;
}
button.position-card .metric-action:hover,.position-card button.metric-action:hover{
  background:linear-gradient(90deg,rgba(47,111,208,.2),rgba(47,111,208,.1));
}

.position-card.accent-cyan{
  background:linear-gradient(152deg,#E1F8FC 0%,#F0FCFE 62%,#FAFEFF 100%);
  border-color:rgba(18,169,196,.34);
}
.position-card.accent-cyan .metric-action{
  background:linear-gradient(90deg,rgba(18,169,196,.15),rgba(18,169,196,.06));
  border-top-color:rgba(18,169,196,.24);color:#0B6C7E;
}
.position-card.accent-violet{
  background:linear-gradient(152deg,#EDEAFE 0%,#F5F3FF 62%,#FCFBFF 100%);
  border-color:rgba(91,75,214,.3);
}
.position-card.accent-violet .metric-action{
  background:linear-gradient(90deg,rgba(91,75,214,.14),rgba(91,75,214,.06));
  border-top-color:rgba(91,75,214,.22);color:#4A3CB8;
}
.position-card.accent-emerald{
  background:linear-gradient(152deg,#DEF6EC 0%,#EFFBF6 62%,#F9FEFC 100%);
  border-color:rgba(7,114,79,.28);
}
.position-card.accent-emerald .metric-action{
  background:linear-gradient(90deg,rgba(7,114,79,.13),rgba(7,114,79,.05));
  border-top-color:rgba(7,114,79,.2);color:#066044;
}
/* the tone of an action still overrides the card, because it is a warning */
.position-card .metric-action.tone-urgent{background:linear-gradient(90deg,#FFE3E5,#FFF1F2);
  border-top-color:rgba(224,70,77,.28);color:#B0323A}
.position-card .metric-action.tone-attention{background:linear-gradient(90deg,#FFEDCF,#FFF7E9);
  border-top-color:rgba(245,165,36,.32);color:#8A5A0E}

/* ---------- what needs your attention ---------- */
/* Four tiles across, following the roadmap grid's breakpoints so Home does not
   invent a second set. Each tile is a three-row grid — icon, copy, arrow — so
   the arrows line up along the bottom whatever the headline wraps to. */
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.action-tile{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;
  gap:11px;padding:16px 17px;min-height:158px;align-items:start}
.action-tile .action-tile-copy{align-self:start}
/* Which records the tile is about. This is the heading of the card, not a
   caption on it: at a glance you should land on "INVOICES" and only then read
   the sentence, so it is set larger than the sentence it introduces. Tracking
   is loosened only slightly — the wide tracking that suits a 9px label reads
   as gappy at this size. The tone colour is set per tone rather than
   inherited, because the tile's own colour lives on its <b>, not the button. */
.action-area{display:block;font-size:17px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:7px;line-height:1.2;color:#1F58AE}
.action.tone-red .action-area{color:#9E2B33}
.action.tone-amber .action-area{color:#8A5A0E}
.action.tone-blue .action-area{color:#1F58AE}
.action.tone-purple .action-area{color:#4A3CB8}
.action-tile b{font-size:13.5px;line-height:1.35}
.action-tile small{margin-top:5px;line-height:1.45}
.action-tile>svg{justify-self:end;align-self:end}
.action-tile:hover>svg{transform:translateX(2px)}
@media(max-width:1100px){.action-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.action-grid{grid-template-columns:1fr}
  .action-tile{min-height:0;grid-template-columns:auto 1fr auto;
    grid-template-rows:auto;align-items:center}
  .action-tile>svg{align-self:center}}
.action{border-radius:16px!important;border:1.5px solid rgba(47,111,208,.24);
  background:linear-gradient(140deg,#E9F2FF,#F7FBFF);padding:15px 17px;
  box-shadow:0 4px 14px rgba(11,32,80,.05);transition:.18s ease}
.action:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(11,32,80,.13)}
.action b{font-size:14px}
.action small{font-size:12px;color:#4C5D7C;margin-top:3px}
.action.tone-red{border-color:rgba(224,70,77,.32);background:linear-gradient(140deg,#FFE6E8,#FFF5F6)}
.action.tone-red:hover{background:linear-gradient(140deg,#FFDCDF,#FFF0F1)}
.action.tone-red b{color:#9E2B33}
.action.tone-amber{border-color:rgba(245,165,36,.36);background:linear-gradient(140deg,#FFF0D5,#FFFAF0)}
.action.tone-amber:hover{background:linear-gradient(140deg,#FFE9C4,#FFF6E6)}
.action.tone-amber b{color:#8A5A0E}
.action.tone-blue{border-color:rgba(47,111,208,.28);background:linear-gradient(140deg,#E4F0FF,#F6FAFF)}
.action.tone-blue:hover{background:linear-gradient(140deg,#D8E9FF,#F0F7FF)}
.action.tone-blue b{color:#1F58AE}
.action.tone-purple{border-color:rgba(91,75,214,.3);background:linear-gradient(140deg,#EAE6FE,#F7F5FF)}
.action.tone-purple:hover{background:linear-gradient(140deg,#E0DAFD,#F2EFFF)}
.action.tone-purple b{color:#4A3CB8}
.action .action-ic{width:40px;height:40px}
.action>svg{stroke:currentColor;opacity:.6}

/* ---------- Business Brain and Social Studio summary ---------- */

/* ---------- roadmap ---------- */
.roadmap-card{border-width:1.5px;transition:.2s ease}
.roadmap-card h3{font-size:16px}
.roadmap-card p{font-size:11.5px;color:#4C5D7C}
.roadmap-grid>*:nth-child(1){background:linear-gradient(150deg,#E4F0FF,#F7FBFF);border-color:rgba(47,111,208,.28)}
.roadmap-grid>*:nth-child(2){background:linear-gradient(150deg,#E1F8FC,#F5FDFE);border-color:rgba(18,169,196,.3)}
.roadmap-grid>*:nth-child(3){background:linear-gradient(150deg,#EDEAFE,#F8F6FF);border-color:rgba(91,75,214,.28)}
.roadmap-grid>*:nth-child(4){background:linear-gradient(150deg,#DEF6EC,#F2FCF8);border-color:rgba(7,114,79,.26)}
.roadmap-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(11,32,80,.16)}

/* ---------- clickable rows inside Sales & Billing ---------- */
button.mini-row{border:1.5px solid rgba(47,111,208,.22);
  background:linear-gradient(120deg,#EFF6FF,#FBFDFF)}
button.mini-row:hover{background:linear-gradient(120deg,#E2EEFF,#F6FAFF);
  border-color:rgba(77,163,255,.55);transform:translateX(3px);box-shadow:0 10px 24px rgba(11,32,80,.1)}
/* Summary tiles are buttons that filter the list beneath them. */
button.ageing-row{width:100%;font:inherit;cursor:pointer;text-align:left}
button.ageing-row:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(11,32,80,.12)}
.ageing-row small{display:block;font-size:10px;color:var(--muted);margin-top:3px;
  opacity:0;transition:opacity .16s}
button.ageing-row:hover small,button.ageing-row:focus-visible small,
button.ageing-row.active small{opacity:1}
button.ageing-row.active{background:var(--grad-primary);border-color:transparent;
  box-shadow:0 14px 30px rgba(47,111,208,.32)}
button.ageing-row.active b{color:#fff;background:none;-webkit-text-fill-color:#fff}
button.ageing-row.active span{color:rgba(255,255,255,.82)}
button.ageing-row.active small{color:rgba(255,255,255,.7)}
.link-inline{border:0;background:none;padding:0;font:inherit;font-weight:800;
  color:var(--blue);text-decoration:underline;cursor:pointer}
.link-inline:hover{color:var(--navy)}

.ageing-row{border-width:1.5px;border-color:rgba(47,111,208,.22);
  background:linear-gradient(140deg,#EFF6FF,#FBFDFF)}
.ageing-row:hover{background:linear-gradient(140deg,#E2EEFF,#F6FAFF);border-color:rgba(77,163,255,.55)}
.ageing{gap:10px}
.ageing-row b{font-size:19px}
.ageing-row span{font-size:12px;color:#48597A}

/* ---------- the money card keeps its lead ---------- */

/* ---------- deliberately left plain ----------
   Tables, record details and forms stay light: the figures are what is
   being read there, and tinting every row would cost legibility. */
.data-table tbody tr.data-row{background:#fff}

/* the small ACTIVE / OPEN VALUE label needs a touch more weight now that
   it sits on a tinted card rather than on white */
.position-card-unit{color:#6B7C99}

/* =====================================================================
   Layout corrections.

   Tab bars now wrap instead of scrolling sideways, so no section is ever
   parked off the edge of the screen. Grid and flex children get
   min-width:0 so long values shrink to fit rather than forcing their
   container wider than the viewport.
   ===================================================================== */

/* ---------- tab bars wrap, nothing hides off-screen ---------- */
.sales-tabs,.brain-tabs{flex-wrap:wrap;overflow:visible;row-gap:9px}
.sales-tab,.brain-tab{flex:1 1 auto;min-width:0;max-width:100%}
.sales-tab .tab-label,.brain-tab .tab-label{min-width:0;overflow-wrap:break-word}

/* the type steps down as space tightens, so most bars stay to two rows */
@media(max-width:1280px){
  .sales-tab,.brain-tab{font-size:14px;padding:12px 14px;gap:8px}
}
@media(max-width:820px){
  .sales-tabs,.brain-tabs{gap:6px;row-gap:6px;padding:6px;border-radius:16px}
  .sales-tab,.brain-tab{font-size:13px;padding:10px 11px;gap:7px}
  .sales-tab .tab-ic,.brain-tab .tab-ic{width:24px;height:24px;border-radius:8px}
  .sales-tab .tab-ic svg,.brain-tab .tab-ic svg{width:13px;height:13px}
}
@media(max-width:480px){
  .sales-tab,.brain-tab{font-size:12.5px;padding:9px 10px;gap:6px;flex:1 1 45%}
}

/* ---------- record details fit narrow screens ---------- */
.record-drawer{grid-template-columns:minmax(0,1fr)}
.record-drawer>*{min-width:0}
.record-summary>div{min-width:0}
.record-summary dd{overflow-wrap:anywhere}
.related-block,.related-list,.related-row{min-width:0}
.related-row>span{min-width:0}
.related-row b,.related-row small{overflow-wrap:anywhere}
.totals-block{max-width:100%}
@media(max-width:560px){
  .data-table.compact{min-width:0}
  .data-table.compact thead th,.data-table.compact tbody td{padding:9px 8px;font-size:11.5px}
}

/* ---------- section headings and their controls wrap together ---------- */
.section-title{flex-wrap:wrap}
.section-title>div{min-width:0;flex:1 1 260px}
.mode-switch{max-width:100%;flex-wrap:wrap}
.mode-option{flex:1 1 auto;min-width:0}
.settings-grid,.settings-grid>*{min-width:0}
.sales-overview-grid>*{min-width:0}
.mini-row>span{min-width:0}
.mini-row b,.mini-row small{overflow-wrap:anywhere}
.mini-list{min-width:0}
.journey,.brain-layout,.brain-layout>*{min-width:0}

/* ---------- the user list stays readable at every width ---------- */
.user-copy small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.user-role,.user-status{min-width:0}
.user-role .pill,.user-status .pill{white-space:normal}
@media(max-width:1200px){
  .user-row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:11px}
  .user-role,.user-status{grid-column:2/-1;display:flex;align-items:center;gap:10px}
  .user-role small,.user-status small{margin-top:0}
  .user-row .row-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:560px){
  .user-row{grid-template-columns:auto minmax(0,1fr)}
  .user-role,.user-status{flex-wrap:wrap;gap:6px}
}

/* ---------- everything else that must never push the page wide ---------- */
.view,.view>*{min-width:0}
.home-grid>*,.position-cards>*,.dashboard-section{min-width:0}

/* ---------- Home widget rows (tenant-configurable layout) ----------
   Home is composed from whichever widgets a tenant has switched on, in their
   chosen order, so the layout cannot assume a fixed pair. Consecutive
   half-width widgets share a row; auto-fit means a lone one fills the row
   instead of leaving a blank column beside it, at every width and without a
   second markup path. DOM order is always the reading order — no CSS `order`
   is used to move anything visually. */
/* A page identity when the welcome header itself is switched off. */
.home-page-title{font-size:clamp(24px,3vw,34px);letter-spacing:-.045em;margin:0 0 4px}
.home-minimal{margin-top:4px}
.assistant-card,.supporting-records-grid,.search-result{min-width:0}
.search-result-copy{min-width:0}
.search-result-copy b,.search-result-copy small{overflow-wrap:anywhere}
.field-cell,.field-grid,.qb-lines-block{min-width:0}
.sales-header-actions{flex-wrap:wrap}

/* ---------- long tab labels wrap rather than being cut ---------- */
@media(max-width:560px){
  .sales-tab,.brain-tab{white-space:normal;text-align:left;justify-content:flex-start;
    align-items:center;line-height:1.25}
  .sales-tab .tab-label,.brain-tab .tab-label{white-space:normal}
}

/* ---------- wide tables scroll inside their frame, and say so ---------- */
.data-table-wrap{position:relative}
.table-scroll-hint{display:none;align-items:center;gap:7px;margin:0 0 9px;
  font-size:11.5px;font-weight:750;color:var(--slate)}
.table-scroll-hint svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.list-card.is-scrollable .table-scroll-hint{display:flex}
.list-card.is-scrollable .data-table-wrap:after{
  content:"";position:absolute;top:1px;bottom:1px;right:1px;width:44px;pointer-events:none;
  border-radius:0 16px 16px 0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
}
.list-card.is-scrollable .data-table-wrap.scrolled-end:after{opacity:0;transition:opacity .2s}

/* ---------- tables become cards before they would need scrolling ---------- */
@media(max-width:820px){
  .list-card .table-scroll-hint{display:none!important}
  .list-card .data-table-wrap{overflow:visible;border:0;background:transparent;border-radius:0}
  .list-card .data-table-wrap:after{display:none}
  .list-card .data-table,
  .list-card .data-table tbody,
  .list-card .data-table tr,
  .list-card .data-table td{display:block;width:auto;min-width:0}
  .list-card .data-table thead{display:none}
  .list-card .data-table tr{
    border:1.5px solid rgba(47,111,208,.22);border-radius:16px;margin-bottom:11px;
    background:linear-gradient(150deg,#F2F8FF,#FBFDFF);padding:6px 4px 8px;
    box-shadow:0 4px 14px rgba(11,32,80,.05);
  }
  .list-card .data-table tr.data-row.openable:hover{background:linear-gradient(150deg,#E8F2FF,#F7FBFF);
    transform:none;box-shadow:0 12px 26px rgba(11,32,80,.11)}
  .list-card .data-table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:7px 13px;border:0;text-align:right;font-size:12.5px;
  }
  .list-card .data-table td:before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;
    color:var(--muted);white-space:nowrap;
  }
  .list-card .data-table td.cell-primary{
    display:block;text-align:left;padding:9px 13px 10px;margin-bottom:3px;
    border-bottom:1px solid rgba(47,111,208,.16);
  }
  .list-card .data-table td.cell-primary:before{display:none}
  .list-card .data-table td.cell-primary b{font-size:15px}
  .list-card .data-table td.cell-primary small{font-size:11px;margin-top:3px}
  .list-card .data-table td b{display:inline;text-align:right}
  .list-card .data-table td small{display:block;text-align:right;margin-top:2px}
  .list-card .data-table td.num{text-align:right}
  .list-card .data-table td.row-action{
    justify-content:flex-end;padding-top:10px;margin-top:4px;
    border-top:1px solid rgba(47,111,208,.14);
  }
  .list-card .data-table td.row-action:before{display:none}
  .list-card .data-table td:empty{display:none}
  .list-card{padding:16px}
}
@media(max-width:560px){
  .list-card .data-table td{flex-wrap:wrap;gap:2px 12px}
  .list-card .data-table td:before{flex:1 1 100%}
  .list-card .data-table td,.list-card .data-table td b{text-align:left}
  .list-card .data-table td small{text-align:left}
  .list-card .row-actions{width:100%}
  .list-card .row-actions .btn{flex:1}
}

/* ---------- prompt chips wrap, so every suggestion stays visible ---------- */
@media(max-width:820px){
  .prompt-chips{flex-wrap:wrap;overflow:visible;padding-bottom:0;margin-left:0}
  .prompt-chip{white-space:normal;flex:1 1 auto;text-align:center}
}

/* ---------- line items inside a record also stack on small screens ---------- */
@media(max-width:640px){
  .record-drawer .data-table-wrap{overflow:visible;border:0;background:transparent}
  .record-drawer .data-table,
  .record-drawer .data-table tbody,
  .record-drawer .data-table tr,
  .record-drawer .data-table td{display:block;width:auto;min-width:0}
  .record-drawer .data-table thead{display:none}
  .record-drawer .data-table tr{border:1px solid var(--line);border-radius:13px;
    background:#fff;margin-bottom:9px;padding:5px 3px 7px}
  .record-drawer .data-table td{display:flex;align-items:baseline;justify-content:space-between;
    gap:12px;padding:6px 12px;border:0;text-align:right;font-size:12.5px}
  .record-drawer .data-table td:before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;
    color:var(--muted);white-space:nowrap}
  .record-drawer .data-table td.cell-primary{display:block;text-align:left;
    border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:3px}
  .record-drawer .data-table td.cell-primary:before{display:none}
  .totals-block{width:100%}
}


/* =====================================================================
   Platform additions.
   Only what the multi-tenant architecture needs and the v3.10 prototype
   never had: workspace banners, the audit score bars, and the login
   error line. Everything else reuses the design system above.
   ===================================================================== */

/* ---------- workspace banners ---------- */
.banner{display:flex;align-items:center;gap:11px;padding:12px 28px;font-size:12.5px;
  font-weight:800;line-height:1.5;border-bottom:1px solid rgba(255,255,255,.14)}
.banner svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.banner span{flex:1;min-width:0;font-weight:750}
.banner b{font-weight:900}
.banner .btn{flex:0 0 auto}
.banner-demo{background:linear-gradient(100deg,#0A1E48,#12306B);color:#CFE4FB}
.banner-demo .btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.2)}
.banner-support{background:linear-gradient(100deg,#8A5A0E,#B47916);color:#FFF6E6}
.banner-support .btn-light{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.28)}
.banner-verify{background:linear-gradient(100deg,#FFE3E5,#FFF1F2);color:#9E2B33;
  border-bottom-color:rgba(224,70,77,.24)}
@media(max-width:820px){.banner{padding:11px 14px;font-size:12px}}

/* ---------- audit score bars ---------- */
.score-bars{display:grid;gap:9px}
.score-bar{display:grid;grid-template-columns:minmax(88px,130px) 1fr 52px;gap:12px;
  align-items:center;font-size:12px;font-weight:750;color:var(--slate)}
.score-bar .bar{height:9px;border-radius:9px;background:var(--ice);overflow:hidden}
.score-bar .bar i{display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,var(--cyan),var(--bright) 60%,var(--violet));
  box-shadow:0 0 12px rgba(77,163,255,.34)}
.score-bar .num{text-align:right;color:var(--navy);font-weight:900}
@media(max-width:560px){.score-bar{grid-template-columns:minmax(70px,100px) 1fr 44px;gap:8px;font-size:11px}}

/* ---------- small helpers ---------- */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.login-error{color:var(--red);font-size:12.5px;font-weight:800;min-height:18px;margin:2px 0 6px}

/* ---------- Platform Admin: entitlement rows ---------- */
.feature-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--line)}
.feature-row:last-child{border-bottom:0}
.feature-row b{font-size:13.5px;color:var(--navy);font-weight:850}
/* Grants are grouped under the same headings the tenant's own navigation
   uses, so the list reads in the product's running order. */
.feature-group h3{margin:20px 0 2px;font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--muted);font-weight:900}
.feature-group:first-child h3{margin-top:4px}
/* One grant can open several places. Saying which stops the switch being a
   name somebody has to already know the meaning of. */
.feature-opens{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;
  font-size:10.5px;color:var(--slate);font-weight:700}
.feature-opens .chip{font-size:10.5px;padding:3px 9px}
.feature-row small{display:block;color:var(--slate);font-size:11px;margin-top:4px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media(max-width:820px){
  .feature-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;column-gap:10px}
  .feature-row>*:nth-child(2):not(:empty){grid-column:1/2;grid-row:2;justify-self:start}
  .feature-row>*:nth-child(3){grid-column:2;grid-row:1}
}
@media(max-width:1100px){
  .grid-2{grid-template-columns:1fr!important}
}

/* ---------- fix: section-title basis in column direction ----------
   Below 560px .section-title switches to flex-direction:column, which
   turns the `flex:1 1 260px` basis (intended as a width) into a 260px
   tall gap. Carried over from v3.10; corrected here. */
@media(max-width:560px){
  .section-title{flex-direction:column;align-items:flex-start}
  .section-title>div{flex:0 1 auto;width:100%}
}

/* ---------- audit score rings ----------
   Same visual as .mini-ring, but the audit score is the point of the
   screen, so it stays visible at every width. */
.audit-ring{--p:0;width:118px;height:118px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;position:relative;
  background:conic-gradient(from -90deg,var(--cyan) 0,var(--bright) calc(var(--p)*1%),var(--ice) 0);
  box-shadow:0 14px 32px rgba(47,111,208,.2)}
.audit-ring:before{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}
.audit-ring span{position:relative;text-align:center}
.audit-ring strong{display:block;font-size:30px;letter-spacing:-.05em;
  background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.audit-ring small{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--slate);font-weight:900;margin-top:2px}
.audit-compare{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:16px}
.audit-compare-step{text-align:center}
.audit-compare-arrow{font-size:28px;color:var(--green);font-weight:900;line-height:1}
@media(max-width:560px){
  .audit-ring{width:96px;height:96px}
  .audit-ring strong{font-size:25px}
  .audit-compare{gap:16px}
}

/* ======================= Living Dashboard (Standard §65) ================= */
.spark-line{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark-area{fill:currentColor;opacity:.12}
.spark-dot{fill:currentColor}
/* Severity says how much it matters; the area says what it is about. They sit
   on one line so the card answers both before the sentence is read, and wrap
   rather than overflow when a long area name meets a wide severity pill in a
   narrow column. */
.intel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:22px}
.intel-card h3{margin:0 0 4px;font-size:15.5px;letter-spacing:-.02em;color:var(--navy)}
.seg-bar{position:relative;width:100%;border-radius:99px;background:var(--ice);overflow:hidden;margin:10px 0 4px}
.seg{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--blue)}
.seg.tone-red{background:var(--red)}
.seg.tone-amber{background:var(--amber)}
.seg.tone-green{background:var(--green)}
.intel-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.intel-legend .legend-row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:11px;padding:7px 9px;transition:.15s}
.intel-legend .legend-row:hover{background:var(--ice);border-color:var(--line);transform:none}
.intel-legend .legend-swatch{width:10px;height:10px;border-radius:3px;background:var(--blue);flex:none}
.intel-legend .tone-red .legend-swatch{background:var(--red)}
.intel-legend .tone-amber .legend-swatch{background:var(--amber)}
.intel-legend .tone-green .legend-swatch{background:var(--green)}
.intel-legend .legend-copy{flex:1;display:flex;flex-direction:column}
.intel-legend .legend-copy b{font-size:12.5px;color:var(--ink)}
.intel-legend .legend-copy small{font-size:11px;color:var(--muted)}
.intel-legend .legend-figures{text-align:right;display:flex;flex-direction:column}
.intel-legend .legend-figures b{font-size:12.5px;color:var(--navy)}
.intel-legend .legend-figures small{font-size:10.5px;color:var(--muted)}
.funnel{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.funnel-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;
  border:1px solid transparent;border-radius:11px;padding:6px 9px;transition:.15s}
.funnel-row:hover{background:var(--ice);border-color:var(--line)}
.funnel-label{width:74px;flex:none;font-size:12px;font-weight:700;color:var(--slate)}
.funnel-bar{flex:1;height:14px;border-radius:99px;background:var(--ice);overflow:hidden}
.funnel-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bright),var(--blue))}
.funnel-figures{width:88px;flex:none;text-align:right}
.funnel-figures b{font-size:12.5px;color:var(--navy)}
.funnel-figures small{display:block;font-size:10.5px;color:var(--muted)}
.cols{width:100%;height:auto;margin-top:8px}
.col-a{fill:var(--blue);opacity:.85}
.col-b{fill:var(--green);opacity:.9}
.col-base{stroke:var(--line);stroke-width:1}
.col-label{font-size:9.5px;fill:var(--muted);font-family:var(--font)}
.intel-card .metric-action{margin-top:12px}
.collect-bar-key .key-billed{background:var(--blue)}
.trend-spark{width:220px;max-width:100%;height:44px;color:var(--purple)}
.trend-spark .pl-spark{width:100%;height:100%}

/* ===== CRM foundation (Stage 4): global search, record view, quick create == */
.global-search{position:relative;flex:1;max-width:430px;margin:0 18px}
.global-search>svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.global-search input{width:100%;border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 14px 9px 34px;font-size:12.5px;color:var(--ink);transition:.18s}
.global-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(57,118,200,.1);outline:0}
.gs-results{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:420px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 45px rgba(23,55,111,.16);padding:6px;z-index:120}
.gs-group{font-size:9px;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:var(--muted);padding:9px 10px 4px}
.gs-option{width:100%;border:0;background:transparent;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border-radius:10px;padding:9px 10px}
.gs-option:hover,.gs-option.active{background:var(--ice)}
.gs-option b{display:block;font-size:12.5px;color:var(--navy)}
.gs-option small{display:block;font-size:10.5px;color:var(--slate);margin-top:1px}
.gs-empty{padding:14px 12px;font-size:12px;color:var(--slate)}
.list-tools{display:flex;align-items:center;gap:9px;flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;max-width:780px;
  background:linear-gradient(135deg,#EAF3FF,#F8FBFF);border:1px solid rgba(57,118,200,.22);
  border-radius:16px;padding:9px 11px;box-shadow:0 6px 16px rgba(23,55,111,.07)}
.list-tools .control{flex:1 1 280px;width:auto;min-width:240px;padding:10px 14px;font-size:12.5px;border-radius:99px;
  border:1.5px solid rgba(57,118,200,.3);background:#fff}
.list-tools .control:focus{border-color:var(--bright);outline:none;box-shadow:0 0 0 3px rgba(77,163,255,.18)}
.list-tools .btn-light{border:1px solid rgba(57,118,200,.3);color:var(--blue)}
.list-tools .btn-light:hover{background:var(--ice)}
.section-title>.list-tools{flex:2 1 500px}
.record-back{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--slate);font-size:12px;font-weight:800;padding:0 0 12px}
.record-back:hover{color:var(--navy)}
.record-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.record-head h1{font-size:clamp(24px,3vw,34px);letter-spacing:-.05em;margin:6px 0 8px}
.record-pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.record-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.overflow-menu{position:relative}
.overflow-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 38px rgba(23,55,111,.15);padding:5px;z-index:60}
.overflow-panel button{width:100%;border:0;background:transparent;text-align:left;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:800;color:var(--navy)}
.overflow-panel button:hover{background:var(--ice)}
.overflow-panel button.danger{color:var(--red)}
.summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--line);border-radius:16px;background:#fff;margin:16px 0;overflow:hidden}
.summary-cell{padding:13px 15px;border-right:1px solid var(--line);min-width:0}
.summary-cell:last-child{border-right:0}
.summary-cell small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--muted);margin-bottom:4px}
.summary-cell b{display:block;font-size:12.5px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.summary-cell span{display:block;font-size:11px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px;align-items:start}
.detail-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;font-size:12.5px}
.detail-dl dt{color:var(--slate)}.detail-dl dd{margin:0;color:var(--navy);font-weight:700}
.kind-toggle{display:flex;gap:8px;margin-bottom:14px}
.kind-toggle button{flex:1;border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;font-size:12.5px;font-weight:850;color:var(--slate);display:flex;align-items:center;justify-content:center;gap:8px}
.kind-toggle button.selected{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 10px 22px rgba(23,55,111,.2)}
.kind-toggle button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.field-error{display:none;font-size:10.5px;color:var(--red);font-weight:700;margin-top:5px}
.field-error.on{display:block}
.control.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,93,98,.09)}
.error-summary{display:none;background:#fff0f1;border:1px solid rgba(217,93,98,.25);color:var(--red);border-radius:12px;padding:11px 13px;font-size:12px;font-weight:700;margin-bottom:12px}
.error-summary.on{display:block}
.more-details{grid-column:1/-1;border:1px solid var(--line);border-radius:13px;background:var(--mist)}
.more-details summary{cursor:pointer;padding:11px 14px;font-size:12px;font-weight:850;color:var(--navy);list-style:none;display:flex;align-items:center;gap:8px}
.more-details summary::-webkit-details-marker{display:none}
.more-details summary:after{content:"▾";margin-left:auto;color:var(--muted);transition:.2s}
.more-details[open] summary:after{transform:rotate(180deg)}
.more-details .form-grid{padding:2px 14px 14px}
.dup-warning{background:#fff8ec;border:1px solid rgba(228,168,60,.35);border-radius:13px;padding:13px;margin-bottom:12px}
.dup-warning b{display:block;font-size:12.5px;color:#946410;margin-bottom:7px}
.dup-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;border-top:1px solid rgba(228,168,60,.18)}
.dup-row span{color:var(--slate);font-size:11px}
.next-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (max-width:900px){.global-search{display:none}}

/* ===== Record interaction layer (RIS brief) =====
   Lock banner for externally owned records, totals strip for document
   records, and the shared module search control. */
.lock-banner{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(180,121,22,.25);
  background:linear-gradient(145deg,#fff8ec,#fff3dd);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.lock-banner svg{width:20px;height:20px;stroke:#b47916;fill:none;stroke-width:2;flex:0 0 auto;margin-top:1px}
.lock-banner b{display:block;font-size:12.5px;color:#7c5410}
.lock-banner p{margin:4px 0 0;font-size:11.5px;line-height:1.55;color:#8a6420;max-width:640px}
.state-note{margin:0 0 16px;max-width:720px}
.totals-strip{display:flex;justify-content:flex-end;gap:22px;padding:14px 16px;margin-top:4px;
  border-top:1px solid var(--line);font-size:12px;color:var(--slate)}
.totals-strip b{color:var(--navy);font-weight:850;margin-left:6px}
.totals-strip .totals-gross{font-size:13px}
.totals-strip .totals-gross b{font-size:15px}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.list-search{min-width:210px}
/* The way back from every record: a visible light-blue pill, never a bare
   arrow. The shared arrow icon points right, so it is flipped for "back". */
.record-back{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid rgba(57,118,200,.22);border-radius:99px;
  background:linear-gradient(135deg,#EAF3FF,#F7FBFF);color:var(--blue);
  font-size:12.5px;font-weight:850;padding:9px 16px 9px 13px;margin:0 0 16px;
  cursor:pointer;box-shadow:0 6px 16px rgba(23,55,111,.08);transition:.16s}
.record-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);flex:0 0 auto}
.record-back:hover{background:linear-gradient(135deg,#DCEBFF,#EFF6FF);color:var(--navy);
  border-color:rgba(57,118,200,.38)}
.record-back:focus-visible{outline:3px solid var(--bright);outline-offset:2px}

/* ===== The sales trail: opportunity → quote → order =====
   One prominent control per record carries the work to the next stage, and
   a strip above the detail shows where the record sits. Both are shared, so
   the same shape means the same thing on every screen. */
.btn-next{background:var(--grad-primary,linear-gradient(135deg,var(--navy2),var(--blue)));
  color:#fff;border-radius:12px;padding:10px 15px;gap:3px;max-width:270px;
  flex-direction:column;align-items:flex-start;text-align:left;
  box-shadow:0 12px 26px rgba(47,111,208,.32)}
.btn-next:hover{box-shadow:0 18px 40px rgba(47,111,208,.42);transform:translateY(-2px)}
.btn-next:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
.btn-next-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:850}
.btn-next svg{width:15px;height:15px;flex:0 0 auto}
/* The plain-English promise of what the click does — carried inside the
   button, because the worry a bold button creates is that it does something
   the customer can see, and that answer should never be hidden in a tooltip. */
.btn-next-hint{font-size:10.5px;font-weight:600;line-height:1.35;
  color:rgba(255,255,255,.82);white-space:normal}
/* When the actions wrap onto their own line the taller next-step button would
   otherwise sit flush against the trail below it. */
.record-actions{align-items:flex-start;margin-bottom:14px}
/* The one bold box in the row gets air on both sides, so it never reads as
   jammed against the ordinary buttons beside it. */
.record-actions .btn-next{margin:0 6px}

/* A draft writes every box as it is left, so this pair is confirmation and a
   clean way out rather than a step of its own. It repeats at the foot of the
   record because that is where the last line item leaves you. */
.save-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.save-bar .muted{flex:1 1 260px;line-height:1.5}
@media (max-width:640px){.save-bar .btn{flex:1 1 auto}}

.stage-trail{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;
  list-style:none;margin:0 0 18px;padding:0}
.trail-step{flex:1 1 150px;min-width:0;display:grid;gap:2px;padding:10px 13px;
  border:1px solid var(--line);border-radius:13px;background:var(--mist,#f7f9fc)}
.trail-step + .trail-step{position:relative}
.trail-label{font-size:9.5px;font-weight:900;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted)}
.trail-step span:not(.trail-label){font-size:12.5px;font-weight:800;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trail-step.done{background:linear-gradient(135deg,#EAF3FF,#F7FBFF);
  border-color:rgba(57,118,200,.24)}
.trail-step.done .trail-label{color:var(--blue)}
.trail-step.done .linkish{font-size:12.5px;font-weight:850;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}
@media (max-width:700px){.trail-step{flex:1 1 100%}}

/* ===== The pipeline as a working surface =====
   A board of open stages with deals as draggable cards, a stage stepper on
   the record, and the product picker that builds a draft quote. */
.view-toggle{display:inline-flex;background:var(--ice);border-radius:11px;padding:3px;gap:2px}
.view-toggle-btn{border:0;background:transparent;border-radius:9px;padding:7px 12px;
  font-size:11.5px;font-weight:850;color:var(--slate);cursor:pointer;transition:.15s}
.view-toggle-btn.active{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(23,55,111,.12)}

.pl-board{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:11px;margin-top:14px;
  overflow-x:auto;padding-bottom:6px}
.pl-col{background:var(--mist,#f7f9fc);border:1px solid var(--line);border-radius:15px;
  display:flex;flex-direction:column;min-height:220px;transition:border-color .15s,background .15s}
.pl-col.over{border-color:var(--blue);background:#eef5fd}
.pl-col-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:11px 13px 8px;border-bottom:1px solid var(--line)}
.pl-col-head b{font-size:12px;color:var(--navy)}
.pl-col-head span{font-size:10.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.pl-col-body{display:grid;gap:8px;padding:10px;align-content:start;flex:1}
.pl-col-empty{margin:6px 4px;font-size:11px;color:var(--muted)}
.pl-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  display:grid;gap:3px;cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s}
.pl-card:hover{border-color:rgba(57,118,200,.4);box-shadow:0 8px 20px rgba(23,55,111,.1);transform:translateY(-1px)}
.pl-card:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
.pl-card[draggable="true"]{cursor:grab}
.pl-card.dragging{opacity:.45;cursor:grabbing}
.pl-card b{font-size:12px;color:var(--navy);line-height:1.35}
.pl-card small{font-size:10.5px;color:var(--slate)}
.pl-card-meta{display:flex;gap:9px;align-items:baseline;margin-top:3px;font-size:10.5px;color:var(--muted)}
.pl-card-value{font-weight:850;color:var(--navy);font-size:12px}
.pl-card-flag{justify-self:start;margin-top:4px;background:#fff0f1;color:var(--red);
  border-radius:99px;padding:3px 8px;font-size:9.5px;font-weight:850}
@media (max-width:1100px){.pl-board{grid-template-columns:repeat(5,minmax(180px,220px))}}

.stage-stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.stage-stepper-label{font-size:9.5px;font-weight:900;text-transform:uppercase;
  letter-spacing:.13em;color:var(--muted);margin-right:3px}
.stage-step{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 13px;
  font-size:11.5px;font-weight:800;color:var(--slate);cursor:pointer;transition:.15s}
.stage-step:hover:not(:disabled){border-color:rgba(57,118,200,.4);color:var(--blue)}
.stage-step.current{background:linear-gradient(135deg,var(--navy2),var(--blue));color:#fff;
  border-color:transparent;cursor:default;box-shadow:0 6px 16px rgba(23,55,111,.2)}
.stage-step:disabled:not(.current){opacity:.55;cursor:default}
.stage-step:focus-visible{outline:3px solid var(--bright);outline-offset:2px}

.picker{margin-top:18px;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.picker-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 15px;background:var(--mist,#f7f9fc);border-bottom:1px solid var(--line)}
.picker-head b{font-size:12.5px;color:var(--navy)}
.picker-head p{margin:2px 0 0;max-width:520px}
.picker-search{max-width:220px}
.picker-rows{max-height:300px;overflow-y:auto}
.picker-row{display:grid;grid-template-columns:1fr 86px auto;gap:11px;align-items:center;
  padding:9px 15px;border-bottom:1px solid var(--line)}
.picker-row:last-of-type{border-bottom:0}
.picker-row[hidden]{display:none}
.picker-name b{display:block;font-size:12px;color:var(--navy)}
.picker-name small{font-size:10.5px;color:var(--slate)}
.picker-qty{padding:7px 9px;font-size:12px}
.picker-none{padding:12px 15px;margin:0}
/* A row's actions are two fixed slots rather than a run of buttons, so the
   destructive one lines up down the column instead of sliding left and right
   depending on what the row beside it happens to allow. */
.row-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.row-actions .row-slot{display:inline-flex;justify-content:flex-end;flex:0 0 auto;min-width:132px}
.row-actions .btn{white-space:nowrap}
@media (max-width:760px){.row-actions{flex-wrap:wrap;justify-content:flex-start}
  .row-actions .row-slot{min-width:0}}

.line-qty{width:76px;padding:7px 9px;font-size:12px}
/* A draft document's lines are edited where they are read: the inputs sit in
   the table cells rather than in a dialog over them. */
.line-field{padding:6px 8px;font-size:12px;min-width:74px}
.line-field[data-field="description"]{min-width:170px;width:100%}
.line-field[data-field="quantity"],.line-field[data-field="vat_rate"]{width:78px}
.line-field[data-field="list_price_minor"],.line-field[data-field="unit_price_minor"]{width:96px}
.line-field:disabled{opacity:.55}
/* A description box backed by the product menu wears the same caret a select
   does, so it is obvious there is a list behind it before anyone types. */
.line-field[list]{background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),
  linear-gradient(135deg,var(--slate) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
/* Chrome draws its own list button on top; make it invisible but still
   clickable, so the caret we drew is what opens the menu. */
.line-field[list]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.line-discount,.line-product-note{display:block;margin-top:3px;font-size:10.5px;
  color:var(--slate);font-weight:600}
.line-product-note{color:var(--blue)}
.head-field{margin-top:2px}
.detail-dl dd .head-field{font-weight:600}
@media (max-width:640px){.picker-row{grid-template-columns:1fr;gap:6px}.picker-search{max-width:100%}
  .line-field,.line-field[data-field="description"]{width:100%;min-width:0}}

/* ===== Website Audit advisory report (Aug 2026) ===== */
.report-shell h1{font-size:clamp(22px,2.6vw,30px)}
.report-section{margin-top:30px;padding-top:6px}
.report-section h2{display:flex;align-items:baseline;gap:12px;font-size:19px;letter-spacing:-.03em;
  margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--navy)}
.report-section h2 span{color:var(--blue);font-size:16px}
.report-para{font-size:13px;line-height:1.7;color:var(--ink);max-width:820px;margin:10px 0}
.report-bullets{margin:10px 0;padding-left:22px;max-width:820px}
.report-bullets li{font-size:13px;line-height:1.65;margin:5px 0}
.report-note{border-left:3px solid var(--blue);background:linear-gradient(135deg,#EAF3FF,#F7FBFF);
  border-radius:0 12px 12px 0;padding:12px 16px;margin:14px 0;max-width:820px}
.report-note b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:4px}
.report-note p{margin:0;font-size:12.5px;line-height:1.6;color:var(--navy)}
.report-sub{margin:16px 0 20px}
.report-sub h3{font-size:14.5px;margin:0 0 6px;color:var(--navy)}

/* Overall assessment rings — analysed from the published audit report */
.assessment-card{margin-bottom:18px}
.assessment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;margin-top:8px}
.assessment-item{text-align:center}
.assessment-item>b{display:block;margin-top:12px;font-size:13px;color:var(--navy)}
.assessment-ring{--p:0;--ring:var(--blue);width:138px;height:138px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto;background:conic-gradient(var(--ring) calc(var(--p)*1%),var(--ice) 0);position:relative}
.assessment-ring:before{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}
.assessment-ring span{position:relative;text-align:center}
.assessment-ring strong{display:block;font-size:34px;letter-spacing:-.05em;color:var(--navy)}
.assessment-ring small{display:block;font-size:9.5px;color:var(--slate);font-weight:800}
.assessment-ring.tone-green{--ring:#2FAC78}
.assessment-ring.tone-amber{--ring:#F5A524}
.assessment-ring.tone-red{--ring:#E0464D}

/* Score bars carry the report's traffic-light colours — the same gradient
   pairs the money-owed donut uses, so red/amber/green mean one thing
   everywhere. */
.score-bar .bar i.tone-green{background:linear-gradient(90deg,#5ED4A4,#2FAC78);box-shadow:0 0 12px rgba(47,172,120,.34)}
.score-bar .bar i.tone-amber{background:linear-gradient(90deg,#FFD37A,#F5A524);box-shadow:0 0 12px rgba(245,165,36,.34)}
.score-bar .bar i.tone-red{background:linear-gradient(90deg,#FF8A8F,#E0464D);box-shadow:0 0 12px rgba(224,70,77,.34)}

/* ===== Tenant setup (platform admin capability configuration) ===== */
/* A section and the capabilities beneath it. The parent is a switch plus an
   expander; children stay visible in their stored state when the parent is
   off, greyed rather than removed, so an administrator can see exactly what
   is being preserved. */
.cap-section{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:#fff}
.cap-section.off{background:#FAFBFD}
.cap-head{display:flex;align-items:center;gap:12px;padding:12px 14px}
.cap-toggle{flex:1;display:flex;align-items:flex-start;gap:10px;background:none;border:0;text-align:left;padding:0;cursor:pointer}
.cap-toggle:focus-visible{outline:3px solid var(--bright);outline-offset:3px;border-radius:8px}
.cap-caret{color:var(--slate);font-size:12px;line-height:1.5;flex:0 0 auto}
.cap-toggle b{display:block;font-size:13px;color:var(--navy)}
.cap-toggle small{display:block;font-size:11px;color:var(--slate);margin-top:2px;line-height:1.45}
.cap-meta code{font-size:10.5px;background:var(--ice);border-radius:5px;padding:1px 5px;color:var(--blue)}
.cap-reason{color:#B0323A !important;font-weight:600}
.cap-children{border-top:1px solid var(--line);padding:6px 14px 12px}
.cap-note{font-size:11.5px;color:var(--slate);background:var(--ice);border-radius:10px;padding:9px 11px;margin:10px 0}
.cap-child{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(23,55,111,.06);
  padding-left:calc(var(--depth,0) * 18px)}
.cap-child:last-child{border-bottom:0}
.cap-child>span:first-child{flex:1;min-width:0}
.cap-child b{display:block;font-size:12.5px;color:var(--navy)}
.cap-child small{display:block;font-size:10.5px;color:var(--slate);margin-top:2px}
.cap-section.off .cap-child b,.cap-section.off .cap-child small{opacity:.62}
.switch-sm{width:40px;height:23px}
.switch-sm .switch-thumb{width:17px;height:17px}
.switch-sm input:checked+.switch-track .switch-thumb{transform:translateX(17px)}

/* Home ordering: keyboard-operable move controls, never drag-only. */
.cap-home{border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-top:14px}
.cap-home>b{font-size:13px;color:var(--navy)}
.cap-home-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(23,55,111,.06)}
.cap-home-row:last-of-type{border-bottom:0}
.cap-home-row>span:nth-child(2){flex:1;min-width:0}
.cap-home-pos{width:22px;height:22px;border-radius:7px;background:var(--ice);color:var(--blue);
  display:grid;place-items:center;font-size:11px;font-weight:850;flex:0 0 auto}
.cap-home-row b{display:block;font-size:12.5px;color:var(--navy)}
.cap-home-row small{display:block;font-size:10.5px;color:var(--slate)}
.cap-home-move{display:flex;gap:2px;flex:0 0 auto}
.cap-home-move .btn{padding:4px 8px;min-width:28px}

.cap-save{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap}
.cap-save .btn{margin-left:6px}
.cap-error{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:12px;
  background:linear-gradient(135deg,#FFE1E3,#FFF0F1);color:#B0323A;
  box-shadow:inset 0 0 0 1px rgba(224,70,77,.26)}
@media(max-width:640px){.cap-save{flex-direction:column;align-items:stretch}.cap-save .btn{margin:4px 0 0}}

/* The simplified customer sidebar (MVP UX §5): top-level areas only. The
   WP-1C nested subsection links, description tooltips and breadcrumb
   description are gone — page tabs inside each area carry the navigation. */
.nav-area-btn{padding:11px 13px;font-size:13.5px;font-weight:700}
.ask-open{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:700}
.ask-open svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ask-open.hidden{display:none}
.crm-rel{display:inline-flex;gap:4px;margin-right:4px;flex-wrap:wrap}
.row-actions{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;padding:11px 16px}
.bulk-bar.hidden{display:none}
.attention-row-action{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:800;white-space:nowrap;color:inherit}
.attention-row-action svg{width:13px;height:13px}
@media(max-width:640px){.attention-row-action{display:none}}

/* The merged Admin hierarchy (WP-1B): three visibly distinct bands of one
   governed panel, each labelled by the kind of control it carries. */
.cap-band{margin:0 0 20px}
.cap-band + .cap-band{border-top:1px solid var(--line);padding-top:16px}
.cap-band-head{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
.cap-band-head b{font-size:14.5px;color:var(--navy)}
.cap-band-head p{margin:3px 0 0}
.cap-badge{text-transform:uppercase;letter-spacing:.05em;font-size:9.5px;flex:0 0 auto;margin-top:3px}
.pill-violet{background:linear-gradient(135deg,#EBE3FF,#F5F0FF);color:#6D3FC4;
  box-shadow:inset 0 0 0 1px rgba(124,63,196,.2)}
.cap-locked{white-space:nowrap;align-self:center;flex:0 0 auto}
.audit-change{display:block;max-width:380px;line-height:1.55;color:var(--slate)}

/* ===== Idle sign-out warning ===== */
/* Shown a minute before a session ends through inactivity. It sits above the
   page rather than replacing it, so the person can see what they were doing
   and decide — and it is dismissed by using the system, not by ignoring it. */
.idle-warning{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(5,13,32,.45);backdrop-filter:blur(3px)}
.idle-warning.hidden{display:none}
.idle-card{background:#fff;border-radius:20px;padding:24px 26px;max-width:400px;width:calc(100% - 40px);
  box-shadow:0 30px 70px rgba(5,13,32,.32);border:1px solid var(--line)}
.idle-card b{display:block;font-size:17px;color:var(--navy);letter-spacing:-.02em}
.idle-card p{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--slate)}
.idle-card #idle-count{font-weight:850;color:var(--navy)}
.idle-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.idle-actions .btn{flex:1 1 auto}

/* The forgotten-password panel on the sign-in screen. */
.forgot .field{margin-top:12px}
.forgot .login-note{margin-top:12px}
.forgot .login-note.hidden{display:none}

/* ---------- one heading treatment for the whole site ---------- */
/* Anything that names a card or a block now reads the same everywhere:
   sentence case, one size, one weight. The same job was previously done at
   10px in small caps on a record page, 17px in caps on Home, 15.5px in title
   case in the intelligence panel and 14.5px in the position cards, which is
   why one product looked like four. Colour is deliberately left alone here so
   the attention tiles keep their per-tone colours.

   Small labels that sit under a figure — ACTIVE, OWED IN TOTAL, OPEN VALUE —
   keep their caps on purpose. They label a number rather than name a thing,
   and at 11px caps are what make them read as a unit and not as a heading. */
.card-heading,
.action-area,.insight-area,.related-block h3,.intel-card h3,
.roadmap-card h3,.position-card-titles b{
  font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  text-transform:none}
/* The record-page block heading was muted grey as well as tiny; it names the
   block, so it takes the same ink as every other heading. */
.related-block h3{color:var(--navy)}
/* The page kicker keeps its rule-line and its blue, but stops shouting.
   Tracking that suits capitals reads as gappy in sentence case. */
.eyebrow{text-transform:none;letter-spacing:.005em;font-size:13.5px;font-weight:800}
.eyebrow:before{width:22px;height:2.5px}
/* The hero's own eyebrow is a more specific rule, so it needs the same
   treatment or it keeps the wide capital tracking in sentence case. */
.command-hero .eyebrow{letter-spacing:.005em}
/* The position cards name their card with a more specific selector, so the
   shared heading size has to be restated at that specificity to reach it. */
.position-card .position-card-titles b{font-size:15px}

/* The money card and the audit-chart card name their card like any other,
   so they take the shared heading size rather than two more one-off values. */
/* An h2 that names a card but sits outside .section-title — the audit record
   titles do — was landing on the browser's 24px default once its inline size
   was removed. Pin it to the one section value so nothing can fall back to a
   default the design never chose. */
.card h2{font-size:19px;letter-spacing:-.035em}
/* A record's title and a list page's title are the same device — the name of
   what you are looking at — but were two different fluid ranges, so opening a
   customer visibly shrank the heading. One range for both. */
.record-head h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.055em;font-weight:850}

/* ---------- module summaries (dashboard redistribution WP3/4) ---------- */
/* The compact strip a module opens with: up to four cards, each one button
   that opens the exact records it counted. Tones reuse the shared palette;
   colour is a secondary cue on top of the words, never the only one. */
.module-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.module-summary-strip[data-cards="1"]{grid-template-columns:minmax(0,340px)}
.module-summary-strip[data-cards="2"]{grid-template-columns:repeat(2,minmax(0,340px))}
.module-summary-strip[data-cards="3"]{grid-template-columns:repeat(3,1fr)}
/* Each card wears its data's colour whole: a tinted wash, a glowing corner,
   the accent bar, a status dot and the value itself all follow the tone the
   figure earned — green when healthy, amber when work waits, red when late.
   The tone class is chosen from the live numbers, so the same card changes
   colour as the records behind it change. */
.module-summary-card{
  --t-tint:#eef5fd;--t-glow:rgba(99,167,239,.20);--t-line:rgba(57,118,200,.22);
  --t-strong:var(--navy);--t-dot:var(--blue);--t-shadow:rgba(57,118,200,.16);
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:
    radial-gradient(130% 95% at 100% 0%, var(--t-glow) 0%, transparent 52%),
    linear-gradient(165deg, var(--t-tint), #fff 64%);
  border:1px solid var(--t-line);border-radius:16px;padding:15px 17px 16px 19px;
  min-height:102px;box-shadow:0 1px 2px rgba(23,55,111,.05);
  transition:transform .16s,box-shadow .16s,border-color .16s;position:relative;overflow:hidden}
.module-summary-card.tone-green{--t-tint:#e8f7f0;--t-glow:rgba(47,172,120,.18);
  --t-line:rgba(47,172,120,.30);--t-strong:#157a52;--t-dot:var(--green);--t-shadow:rgba(47,172,120,.20)}
.module-summary-card.tone-amber{--t-tint:#fdf5e3;--t-glow:rgba(228,168,60,.22);
  --t-line:rgba(228,168,60,.38);--t-strong:#8a5c0a;--t-dot:var(--amber);--t-shadow:rgba(228,168,60,.24)}
.module-summary-card.tone-red{--t-tint:#fdeeee;--t-glow:rgba(217,93,98,.20);
  --t-line:rgba(217,93,98,.34);--t-strong:#c1444a;--t-dot:var(--red);--t-shadow:rgba(217,93,98,.22)}
button.module-summary-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px var(--t-shadow)}
button.module-summary-card:focus-visible{outline:2px solid var(--t-dot);outline-offset:2px}
/* A tile acting as the list's current lens: visibly pressed, not colour-only. */
button.module-summary-card.is-active{border-color:var(--t-dot);
  box-shadow:inset 0 0 0 2px var(--t-dot),0 1px 2px rgba(23,55,111,.05)}
.module-summary-card:before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--t-dot),color-mix(in srgb,var(--t-dot) 55%,#fff))}
.module-summary-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.module-summary-label:before{content:"";width:7px;height:7px;border-radius:99px;
  background:var(--t-dot);flex:0 0 auto}
.module-summary-card.tone-red .module-summary-label:before{animation:tone-pulse 2.2s infinite}
@keyframes tone-pulse{
  0%{box-shadow:0 0 0 0 rgba(217,93,98,.40)}
  70%{box-shadow:0 0 0 6px rgba(217,93,98,0)}
  100%{box-shadow:0 0 0 0 rgba(217,93,98,0)}}
.module-summary-value{font-size:24px;font-weight:850;letter-spacing:-.03em;
  color:var(--t-strong);font-variant-numeric:tabular-nums;line-height:1.15}
.module-summary-sub{font-size:12px;color:var(--slate)}
/* The analysis region under the strip: at most two columns, subordinate to
   the page title and the list beneath it (spec 04 §1). */
.module-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.module-summary-grid .intel-card:only-child{grid-column:1/-1}
@media(max-width:1100px){.module-summary-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1023px){.module-summary-grid{grid-template-columns:1fr}}
@media(max-width:560px){.module-summary-strip{grid-template-columns:1fr}}

/* ---------- lean Home (dashboard redistribution WP6) ---------- */
/* Compact header: one H1, a sentence, badge and timestamp — capped well under
   the 160px budget (spec 03 §3), no hero panel. */
.home-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding:6px 2px 14px;flex-wrap:wrap}
.home-header h1{margin:0;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.04em}
.home-header p{margin:4px 0 0;font-size:14px}
.home-header-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.home-header-meta small{color:var(--muted);font-size:11.5px}
.command-centre-compact{margin-bottom:16px}
.command-centre-compact .business-command{margin-top:8px}
.prompt-try{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.prompt-try-label{font-size:11.5px;font-weight:850;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.home-priority{margin-bottom:16px}
/* Ranked attention rows: one full-width card, each row one button, 44px+
   interactive height (03 §6). */
.attention-list .section-title{margin-bottom:10px}
.attention-list-rows{display:grid;gap:8px}
.attention-list-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--mist);border:1px solid var(--line);border-left:4px solid var(--bright);
  border-radius:13px;
  padding:11px 14px;min-height:44px;transition:transform .14s,box-shadow .14s,background .14s}
.attention-list-row.tone-red{border-left-color:var(--red);
  background:linear-gradient(90deg,#fdf0f0,var(--mist) 46%)}
.attention-list-row.tone-amber{border-left-color:var(--amber);
  background:linear-gradient(90deg,#fdf7e7,var(--mist) 46%)}
.attention-list-row.tone-purple{border-left-color:var(--purple)}
.attention-list-row:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,32,80,.08);background:#fff}
.attention-list-row.tone-red:hover{box-shadow:0 8px 20px rgba(217,93,98,.14)}
.attention-list-row.tone-amber:hover{box-shadow:0 8px 20px rgba(228,168,60,.16)}
.attention-list-row>svg:last-child{width:15px;height:15px;stroke:var(--muted);flex:0 0 auto;
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:auto}
.attention-row-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--ice);color:var(--blue);flex:0 0 auto}
.attention-row-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.attention-list-row.tone-red .attention-row-icon{background:#fdeeee;color:var(--red)}
.attention-list-row.tone-amber .attention-row-icon{background:#fdf3e0;color:#946410}
.attention-list-row.tone-purple .attention-row-icon{background:#f0eefb;color:var(--purple)}
.attention-row-area{flex:0 0 92px;font-size:10.5px;font-weight:900;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate)}
.attention-row-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.attention-row-copy b{font-size:13.5px;letter-spacing:-.01em}
.attention-row-copy small{color:var(--slate);font-size:12px}
.attention-toggle{margin-top:12px}
/* Recent activity: a real disclosure, collapsed by default (03 §7). */
.recent-activity{margin-top:16px;padding:0}
.recent-activity summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;
  padding:15px 20px;list-style:none}
.recent-activity summary::-webkit-details-marker{display:none}
.recent-activity summary:before{content:"▸";color:var(--muted);font-size:12px}
.recent-activity[open] summary:before{content:"▾"}
.recent-activity-body{padding:0 20px 16px;display:grid;gap:10px}
@media(max-width:600px){.attention-row-area{display:none}}
/* The old hero tucked the command centre under its bottom edge; the compact
   Home header has no such edge, so the pull-up margin goes. */
.command-centre-compact{margin-top:0}

/* WP4 — the invoice-from-order line picker */
.picker-table{width:100%;border-collapse:collapse;margin:4px 0 10px}
.picker-table th{text-align:left;font-size:12px;color:var(--muted,#667085);font-weight:700;padding:6px 8px;border-bottom:1px solid #E5E9F0}
.picker-table td{padding:8px;border-bottom:1px solid #F0F2F6;font-size:14px;vertical-align:middle}
.picker-table input[type="number"]{max-width:100px}

/* WP5 — pagination controls under the big lists */
.pagination-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 2px 4px}
.pagination-controls{display:flex;align-items:center;gap:10px}
.pagination-controls .btn[disabled]{opacity:.45;cursor:default}


/* =====================================================================
   ProcessLabs premium SME SaaS pass (Phase 1 — Home reference design).

   Bold revision, to the approved mock direction: solid colour-filled KPI
   cards, a brand-navy page header band, a white bordered Ask card, a
   one-level module rail with an icon per section, and pill-shaped row
   actions.

   The product palette is built around the ProcessLabs brand navy
   #073C5F. Everything reads from the tokens below, so the whole app
   inherits one deliberate colour system:

     brand navy  #073C5F  identity, headings, the sidebar, dark panels
     action blue #0E6BA8  buttons, links, interactive accents
     teal        #12AFA0  AI / Ask ProcessLabs, Business Brain
     violet      #6F5FD5  approvals, Settings accents
     green       #149E6E  healthy / paid / won / positive
     amber       #E39A1F  waiting / follow-up / due soon
     red         #D7484F  overdue / critical / destructive

   Module identity colours (reserved for module accents in later phases):
     Customers sky #6FCBF2 · Win More Work azure #64A9F4 · Get Paid
     green #43CF9C · Things To Do amber #F5BB4A · Buying & Stock violet
     #B3A3F7 — light enough to hold ≥4.5:1 on the navy rail.

   Type stays on the self-hosted system stack (Inter where installed,
   Segoe UI Variable/Segoe UI elsewhere) because the CSP allows no
   third-party requests; the scale below is what carries the hierarchy.
   Earlier passes are overridden, never edited — the file's history of
   passes is the mechanism, and source-pinned tests stay true.
   ===================================================================== */

:root{
  /* --- brand core --- */
  --brand:#073C5F;
  --navy:#073C5F;
  --navy2:#0B5380;
  --deep:#04283F;
  --abyss:#021D30;

  /* --- interactive blues --- */
  --blue:#0E6BA8;
  --bright:#2D9CDB;
  --sky:#A9D6F2;

  /* --- the accents either side of the brand --- */
  --cyan:#12AFA0;
  --cyan-deep:#0A8D82;
  --violet:#6F5FD5;
  --violet-deep:#5A4BC0;
  --purple:#6F5FD5;

  /* --- paper --- */
  --ice:#E5F1FA;
  --mist:#F2F6FA;
  --paper:#ffffff;
  --tint:#EBF4FB;

  /* --- ink --- */
  --ink:#13293D;
  --slate:#51687D;
  --muted:#7E92A6;
  --faint:#7E92A6;
  --line:rgba(7,60,95,.12);
  --edge:rgba(7,60,95,.10);
  --edge-2:rgba(7,60,95,.18);

  /* --- semantic signals --- */
  --green:#149E6E;
  --ok:#149E6E;
  --amber:#E39A1F;
  --red:#D7484F;
  --coral:#F28B82;

  /* --- module identity, readable on the navy rail --- */
  --area-customers:#6FCBF2;
  --area-win:#64A9F4;
  --area-paid:#43CF9C;
  --area-tasks:#F5BB4A;
  --area-stock:#B3A3F7;
  --area-plain:#9BB8CD;

  /* --- elevation --- */
  --sheen:linear-gradient(180deg,#ffffff 0%,#FBFDFE 100%);
  --sh-xs:0 1px 2px rgba(7,42,68,.06);
  --sh-sm:0 6px 18px rgba(7,42,68,.08);
  --sh-md:0 14px 36px rgba(7,42,68,.11);
  --sh-lg:0 30px 70px rgba(2,29,48,.26);
  --shadow:0 6px 18px rgba(7,42,68,.08);
  --shadow-xs:0 1px 2px rgba(7,42,68,.06);
  --shadow-sm:0 6px 18px rgba(7,42,68,.08);
  --shadow-md:0 14px 36px rgba(7,42,68,.11);
  --shadow-lg:0 30px 70px rgba(2,29,48,.26);
  --glow-blue:rgba(45,156,219,.5);

  /* --- gradients --- */
  --grad-primary:linear-gradient(135deg,#0E6BA8 0%,#2D9CDB 100%);
  --grad-cyan:linear-gradient(135deg,#12AFA0 0%,#2D9CDB 100%);
  --grad-violet:linear-gradient(135deg,#6F5FD5 0%,#2D9CDB 100%);
  --grad-emerald:linear-gradient(135deg,#149E6E 0%,#12AFA0 100%);
  --grad-ink:linear-gradient(135deg,#073C5F 0%,#0E6BA8 100%);
  --grad-brand:linear-gradient(150deg,#04283F 0%,#073C5F 55%,#0B5380 100%);

  /* --- shape --- */
  --r-xl:20px; --r-lg:16px; --r-md:12px; --r-sm:9px; --r-pill:99px;
}

/* ---------- page backdrop: brand-tinted, very quiet ---------- */
html,body{
  background:
    radial-gradient(880px 520px at 92% -8%,rgba(45,156,219,.10),transparent 60%),
    radial-gradient(720px 560px at 0% 0%,rgba(18,175,160,.06),transparent 58%),
    var(--mist);
}

/* ---------- shared surfaces ---------- */
.card{border-radius:var(--r-lg);border-color:var(--edge);box-shadow:var(--sh-xs)}
.card-pad{padding:22px 24px}
.section-title h2,.card-heading{color:var(--navy)}
.section-title p{color:var(--slate)}

/* ---------- buttons: one hierarchy, token-driven ---------- */
.btn{border-radius:11px;font-weight:800}
.btn-primary{background:var(--grad-primary);box-shadow:0 8px 20px rgba(14,107,168,.26)}
.btn-primary:hover{background:linear-gradient(135deg,#0C5E94 0%,#2D9CDB 100%);
  box-shadow:0 12px 28px rgba(14,107,168,.34);transform:translateY(-1px)}
.btn-soft{background:var(--ice);color:var(--navy);box-shadow:inset 0 0 0 1px rgba(14,107,168,.12)}
.btn-soft:hover{background:#DCEBF8}
.btn-light{background:#fff;color:var(--navy);border:1px solid var(--line);
  backdrop-filter:none;box-shadow:var(--sh-xs)}
.btn-light:hover{border-color:rgba(45,156,219,.5);color:var(--blue)}
.btn-ghost{color:var(--slate)}
.btn-ghost:hover{color:var(--blue)}

/* ---------- status language: one meaning, one treatment ---------- */
.pill-blue{background:var(--ice);color:#0A5A8E}
.pill-green{background:#E2F5EC;color:#0E7A52}
.pill-amber{background:#FBF1DB;color:#8A5C0A}
.pill-red{background:#FBEAEB;color:#B23A40}
.pill-grey{background:#EDF2F7;color:var(--slate)}
.tag-live{background:#E2F5EC;color:#0E7A52}
.tag-build{background:#FBF1DB;color:#8A5C0A}
.tag-blue{background:var(--ice);color:#0A5A8E}

/* ---------- sidebar: the brand navy, lit gently from the corners ---------- */
.sidebar{
  background:
    radial-gradient(540px 340px at 12% -6%,rgba(18,175,160,.20),transparent 60%),
    radial-gradient(460px 380px at 112% 106%,rgba(45,156,219,.18),transparent 62%),
    linear-gradient(170deg,#021D30 0%,#04283F 44%,#073C5F 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.side-brand small{color:rgba(255,255,255,.5)}
.workspace{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.workspace-av{background:linear-gradient(140deg,#12AFA0,#2D9CDB);color:#032334}
.workspace small{color:rgba(255,255,255,.52)}
.nav-btn{color:rgba(255,255,255,.78);font-size:13px;font-weight:800;
  padding:11px 12px;gap:12px;border-radius:11px}
.nav-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-btn.active{
  background:linear-gradient(96deg,#0E6BA8,#2D9CDB);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px rgba(4,40,63,.45);
}
.nav-btn.active:before{background:linear-gradient(180deg,#12AFA0,#A9D6F2);
  box-shadow:0 0 14px rgba(18,175,160,.55)}
.profile-av{background:linear-gradient(145deg,rgba(18,175,160,.4),rgba(255,255,255,.1))}
.profile-copy small{color:rgba(255,255,255,.5)}

/* ---------- topbar ---------- */
.topbar{background:rgba(255,255,255,.86);border-bottom:1px solid var(--line)}
.crumb{font-size:12.5px}
.crumb b{font-weight:850;color:var(--navy)}
.status-pill i{background:var(--green);box-shadow:0 0 0 4px rgba(20,158,110,.14)}

/* ---------- workspace banners ---------- */
.banner-demo{background:linear-gradient(100deg,#031B2C,#06344F);color:#CDE7F6}

/* ---------- tables read as modern data grids ---------- */
.data-table thead th{font-size:10px;letter-spacing:.11em;color:var(--slate);
  background:#F6FAFD;border-bottom:1px solid var(--line)}
.data-table tbody tr.data-row.openable:hover{background:var(--tint)}
.data-table td.num{font-variant-numeric:tabular-nums}

/* =====================================================================
   Phase 1, Home: the reference page for the visual language.
   Structure and copy are untouched — greeting, Ask, priority snapshot,
   ranked attention, collapsed activity. The page now leads with a navy
   header band, a white bordered Ask card, and three solid colour-filled
   KPI cards, per the approved mock.
   ===================================================================== */

/* ---------- header band: the brand navy behind the greeting ---------- */
.home-header{position:relative;overflow:hidden;isolation:isolate;
  margin:-28px -32px 20px;padding:26px 34px 26px;
  border-radius:0 0 22px 22px;color:#fff;
  background:
    radial-gradient(620px 300px at 96% -30%,rgba(18,175,160,.30),transparent 62%),
    radial-gradient(480px 300px at -4% 120%,rgba(45,156,219,.22),transparent 60%),
    var(--grad-brand);
  box-shadow:0 18px 40px rgba(4,40,63,.22)}
.home-header:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(110% 110% at 100% 0%,#000 25%,transparent 74%);
  mask-image:radial-gradient(110% 110% at 100% 0%,#000 25%,transparent 74%)}
.home-header h1{font-size:clamp(26px,2.6vw,34px);font-weight:850;
  letter-spacing:-.035em;color:#fff}
.home-header h1:after{content:"";display:block;width:min(360px,56%);height:3px;
  margin-top:13px;border-radius:3px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.25))}
.home-hello{color:rgba(197,226,245,.9);font-weight:700}
.home-hello-name{color:#fff}
.home-header p{color:rgba(214,234,247,.85);margin-top:10px}
.home-header-meta small{color:rgba(190,220,242,.75)}
.home-header .tag-blue{background:rgba(255,255,255,.13);color:#EAF5FC;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.home-page-title{font-size:clamp(25px,2.4vw,31px);font-weight:850;
  letter-spacing:-.035em;color:var(--navy);margin:4px 2px 18px}

/* ---------- Ask ProcessLabs: white card, blue-bordered, teal mark ---------- */
.command-centre.ask-panel{
  position:relative;border:1.5px solid rgba(14,107,168,.30);border-radius:18px;
  padding:22px 24px 20px;margin:0 0 18px;background:#fff;
  box-shadow:0 14px 34px rgba(7,42,68,.09)}
.ask-panel .command-centre-head{display:flex;align-items:flex-start;gap:13px;flex-wrap:wrap}
.ask-mark{width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;color:#fff;background:var(--grad-cyan);
  box-shadow:0 8px 18px rgba(10,141,130,.3),inset 0 0 0 1px rgba(255,255,255,.2)}
.ask-mark svg{width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ask-title{min-width:0;flex:1}
.ask-panel .command-label{color:var(--navy);font-size:17px;letter-spacing:-.02em}
.ask-panel .command-help{margin:3px 0 0;font-size:12.5px;color:var(--slate)}
.ask-panel .read-only-badge{margin-left:auto;flex:0 0 auto;
  background:var(--ice);color:#0A5A8E;box-shadow:inset 0 0 0 1px rgba(14,107,168,.16)}
.ask-panel .business-command{margin-top:15px;border:1px solid var(--line);
  background:var(--mist);box-shadow:none}
.ask-panel .business-command:focus-within{background:#fff;border-color:transparent;
  box-shadow:0 0 0 2px rgba(45,156,219,.65),0 0 0 7px rgba(45,156,219,.14)}
.ask-panel .business-command-icon svg{stroke:var(--blue)}
.ask-panel .business-command-submit{background:var(--navy);box-shadow:0 8px 18px rgba(7,60,95,.28)}
.ask-panel .business-command-submit:hover{background:var(--navy2);
  box-shadow:0 12px 24px rgba(7,60,95,.34)}
.ask-panel .prompt-try{margin-top:12px}
.ask-panel .prompt-try-label{color:var(--muted)}
.ask-panel .prompt-chip{background:var(--ice);border:1px solid transparent;
  color:#0A5A8E;font-weight:800}
.ask-panel .prompt-chip:hover{background:var(--navy);border-color:transparent;
  color:#fff;box-shadow:0 10px 22px rgba(7,60,95,.28);transform:translateY(-2px)}

/* ---------- priority snapshot: solid, confident KPI cards ----------
   The shared module-summary family keeps its tinted look inside modules;
   Home's cards take the kpi-solid variant — a full colour fill per
   metric: red for money overdue, brand navy for quote value, teal for
   tasks — and any metric standing at all-clear turns the healthy green. */
.module-summary-card{
  --t-tint:#EBF4FB;--t-glow:rgba(45,156,219,.16);--t-line:rgba(14,107,168,.22);
  --t-strong:var(--navy);--t-dot:var(--blue);--t-shadow:rgba(14,107,168,.16);
  border-radius:var(--r-lg)}
.module-summary-card.tone-green{--t-tint:#E7F6EF;--t-glow:rgba(20,158,110,.15);
  --t-line:rgba(20,158,110,.3);--t-strong:#0E7A52;--t-dot:var(--green);
  --t-shadow:rgba(20,158,110,.18)}
.module-summary-card.tone-amber{--t-tint:#FCF3E1;--t-glow:rgba(227,154,31,.18);
  --t-line:rgba(227,154,31,.36);--t-strong:#8A5C0A;--t-dot:var(--amber);
  --t-shadow:rgba(227,154,31,.22)}
.module-summary-card.tone-red{--t-tint:#FCECEC;--t-glow:rgba(215,72,79,.15);
  --t-line:rgba(215,72,79,.3);--t-strong:#B23A40;--t-dot:var(--red);
  --t-shadow:rgba(215,72,79,.2)}
.module-summary-card:before{width:4px;border-radius:0 3px 3px 0}
.module-summary-card.tone-red .module-summary-label:before{
  animation-name:tone-pulse-red}
@keyframes tone-pulse-red{
  0%{box-shadow:0 0 0 0 rgba(215,72,79,.4)}
  70%{box-shadow:0 0 0 6px rgba(215,72,79,0)}
  100%{box-shadow:0 0 0 0 rgba(215,72,79,0)}}
.module-summary-value{font-variant-numeric:tabular-nums}
.module-summary-top{display:flex;align-items:center;gap:10px}
.module-summary-icon{width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;background:#fff;color:var(--t-dot);
  box-shadow:inset 0 0 0 1px var(--t-line),0 4px 10px rgba(7,60,95,.06)}
.module-summary-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the solid Home variant */
.home-priority .module-summary-strip{gap:16px;margin-bottom:18px}
.module-summary-card.kpi-solid{border:0;color:#fff;min-height:150px;gap:8px;
  padding:20px 22px;border-radius:18px;
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(150deg,#11629B 0%,#083D61 92%);
  box-shadow:0 16px 34px rgba(8,61,97,.30)}
.module-summary-card.kpi-solid:before{display:none}
.kpi-solid .module-summary-top{gap:11px;margin-bottom:2px}
.kpi-solid .module-summary-icon{background:rgba(255,255,255,.16);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);border-radius:11px}
.kpi-solid .module-summary-label{color:rgba(255,255,255,.92);font-size:11px;
  letter-spacing:.1em}
.kpi-solid .module-summary-label:before{display:none}
.kpi-solid .module-summary-value{color:#fff;font-size:clamp(30px,2.6vw,38px);
  letter-spacing:-.035em;line-height:1.1;text-shadow:0 2px 12px rgba(2,29,48,.18)}
.kpi-solid .module-summary-sub{color:rgba(255,255,255,.85);font-size:13px}
.module-summary-card.kpi-solid.kpi-invoices{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#C64541 0%,#992629 92%);
  box-shadow:0 16px 34px rgba(153,38,41,.32)}
.module-summary-card.kpi-solid.kpi-quotes{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(150deg,#11629B 0%,#083D61 92%);
  box-shadow:0 16px 34px rgba(8,61,97,.32)}
.module-summary-card.kpi-solid.kpi-tasks{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(150deg,#12997B 0%,#0A6E57 92%);
  box-shadow:0 16px 34px rgba(10,110,87,.32)}
/* all-clear beats metric identity: green always means healthy */
.module-summary-card.kpi-solid.tone-green{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.16),transparent 60%),
    linear-gradient(150deg,#149A69 0%,#0C7350 92%);
  box-shadow:0 16px 34px rgba(14,124,85,.32)}
button.module-summary-card.kpi-solid:hover{transform:translateY(-3px);
  filter:brightness(1.04)}
button.module-summary-card.kpi-solid:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* the healthy sentence replaces the number, so it must be allowed to wrap
   at a calmer size than the headline figure */
.kpi-solid.tone-green .module-summary-value{font-size:clamp(20px,1.8vw,25px);line-height:1.2}

/* ---------- what needs your attention: bar-headed card, badge rows ---------- */
.attention-list .section-title{margin-bottom:6px}
.attention-list .section-title>div:first-child{border-left:4px solid var(--blue);
  padding-left:14px}
.attention-list .card-heading{font-size:19px;letter-spacing:-.03em}
.attention-list .section-title p{margin-top:3px}
.attention-list-rows{gap:0;margin-top:6px}
.attention-list-row{background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:10px;padding:13px 8px;gap:14px;min-height:58px;
  transition:background .15s}
.attention-list-row:last-child{border-bottom:0}
.attention-list-row:hover{transform:none;box-shadow:none;background:var(--tint)}
.attention-list-row.tone-red,.attention-list-row.tone-amber{background:transparent}
.attention-list-row.tone-red:hover,.attention-list-row.tone-amber:hover,
.attention-list-row.tone-purple:hover{box-shadow:none;background:var(--tint)}
.attention-row-icon{width:38px;height:38px;border-radius:50%;
  background:var(--grad-primary);color:#fff;box-shadow:0 6px 14px rgba(14,107,168,.25)}
.attention-row-icon svg{width:16px;height:16px}
.attention-list-row.tone-red .attention-row-icon{
  background:linear-gradient(145deg,#C64541,#992629);color:#fff;
  box-shadow:0 6px 14px rgba(160,42,46,.3)}
.attention-list-row.tone-amber .attention-row-icon{
  background:linear-gradient(145deg,#E8A020,#BC7C0D);color:#fff;
  box-shadow:0 6px 14px rgba(188,124,13,.3)}
.attention-list-row.tone-purple .attention-row-icon{
  background:var(--grad-violet);color:#fff;box-shadow:0 6px 14px rgba(111,95,213,.3)}
.attention-row-area{flex:0 0 auto;padding:5px 10px;border-radius:99px;
  font-size:10px;letter-spacing:.08em;background:var(--ice);color:#0A5A8E;opacity:1}
.attention-list-row.tone-red .attention-row-area{background:#FBEAEB;color:#B23A40}
.attention-list-row.tone-amber .attention-row-area{background:#FBF1DB;color:#8A5C0A}
.attention-list-row.tone-purple .attention-row-area{background:#EFEDFB;color:#5A4BC0}
.attention-row-copy b{color:var(--ink);font-size:13.5px}
.attention-row-copy small{color:var(--slate)}
.attention-row-action{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  margin-left:auto;padding:9px 14px;border-radius:99px;
  font-size:12px;font-weight:800;color:#0A5A8E;background:var(--ice);
  white-space:nowrap;transition:background .15s,color .15s}
.attention-row-action svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.attention-list-row:hover .attention-row-action{background:var(--navy);color:#fff}
.attention-toggle{margin-top:14px}

/* ---------- recent activity ---------- */
.recent-activity summary b{color:var(--navy)}
.recent-activity summary:before{color:var(--bright)}
.event-dot{border-color:var(--bright)}

/* ---------- Ask answers stay on-system ---------- */
.assistant-card{border-color:var(--edge)}
.assistant-card:before{background:linear-gradient(90deg,var(--cyan),var(--bright) 55%,var(--violet))}

/* ---------- small screens: the strip really stacks ----------
   The data-cards column rules outweigh the old width breakpoints, so a
   three-card strip stayed three-across on a phone. Restated at the same
   specificity, cards go two-up on tablets and single-file on phones. */
@media(max-width:1100px){
  .module-summary-strip[data-cards="3"]{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .module-summary-strip[data-cards="2"],
  .module-summary-strip[data-cards="3"]{grid-template-columns:1fr}
}

/* ---------- Home responsiveness: density without oversize ---------- */
@media(max-width:820px){
  .home-header{margin:-18px -14px 16px;padding:20px 18px;border-radius:0 0 18px 18px}
  .command-centre.ask-panel{padding:18px 16px 17px;border-radius:var(--r-lg)}
  .home-priority .module-summary-card{min-height:124px;padding:17px 18px}
}
@media(max-width:600px){
  .ask-title{flex:1 1 calc(100% - 51px)}
  .ask-panel .read-only-badge{order:3;margin-left:51px}
  .attention-row-action{padding:8px 11px}
}

/* The rail scrolls now that every section is listed; the scrollbar stays
   a quiet sliver on the navy rather than the browser default. */
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.sidebar::-webkit-scrollbar-track{background:transparent}


/* =====================================================================
   Phase 2a, Customers module only.
   Every rule here is scoped to the approved Customers screens — the
   content host carries data-view, so the tab rail, data grid, solid
   status pills and pill controls appear inside Customers and Contacts
   (lists and their records) and NOWHERE else. Other modules keep their
   previous appearance untouched until each is approved, at which point
   its data-view joins the scope list below.
   ===================================================================== */

:root{
  /* Reference values — timestamps, record numbers — read as data, not
     prose. Self-hosted stacks only, so the system mono carries it. */
  --font-mono:"Cascadia Code",Consolas,ui-monospace,"Segoe UI Mono",Menlo,monospace;
}
.home-header-meta small{font-family:var(--font-mono);font-size:11px;letter-spacing:-.01em}

/* ---------- the module band: navy header, area-coloured eyebrow ----------
   Keyed by data-area so modules join the treatment as they are approved;
   only Customers wears it in this phase. */
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]){
  position:relative;overflow:hidden;isolation:isolate;
  margin:-28px -32px 20px;padding:26px 34px 27px;
  border-radius:0 0 22px 22px;color:#fff;
  background:
    radial-gradient(620px 300px at 96% -30%,rgba(111,203,242,.24),transparent 62%),
    radial-gradient(480px 300px at -4% 120%,rgba(45,156,219,.20),transparent 60%),
    var(--grad-brand);
  box-shadow:0 18px 40px rgba(4,40,63,.22)}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]):after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(110% 110% at 100% 0%,#000 25%,transparent 74%);
  mask-image:radial-gradient(110% 110% at 100% 0%,#000 25%,transparent 74%)}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .eyebrow{color:var(--area-customers);
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:900}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .eyebrow:before{background:currentColor;width:30px;height:3px}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) h1{color:#fff;font-size:clamp(30px,3.2vw,40px);
  font-weight:850;letter-spacing:-.045em;margin:8px 0 0}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) h1:after{content:"";display:block;
  width:min(340px,58%);height:3px;margin-top:13px;border-radius:3px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,.25))}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .muted{color:rgba(214,234,247,.85);margin-top:10px}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .sales-header-actions .btn-primary{
  background:#fff;color:var(--navy);border-radius:99px;
  box-shadow:0 10px 24px rgba(2,29,48,.3)}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .sales-header-actions .btn-primary:hover{
  background:var(--ice);color:var(--navy);box-shadow:0 14px 30px rgba(2,29,48,.36)}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .sales-header-actions .btn-light{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22);
  border-radius:99px}
.sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]) .sales-header-actions .btn-light:hover{
  background:rgba(255,255,255,.2);color:#fff}
@media(max-width:820px){
  .sales-header:is([data-area="customers"],[data-area="win_more_work"],[data-area="get_paid"],[data-area="buying_stock"],[data-area="things_to_do"],[data-area="settings"]){margin:-18px -14px 16px;padding:20px 18px 21px;
    border-radius:0 0 18px 18px}
}

/* ---------- tab bars: one white rail, the active page a solid pill ---------- */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tabs{
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:7px;gap:4px;box-shadow:var(--sh-xs)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab{
  border:0;background:transparent;box-shadow:none;
  color:var(--navy);font-size:14px;font-weight:800;padding:10px 16px;
  border-radius:11px;flex:0 1 auto}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab .tab-ic{
  width:auto;height:auto;background:transparent;
  box-shadow:none;color:var(--blue);border-radius:0}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab:hover:not(.active){
  transform:none;background:var(--ice);border-color:transparent;box-shadow:none}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab:hover:not(.active) .tab-ic{
  background:transparent;color:var(--blue);box-shadow:none}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab.active{
  background:var(--navy);color:#fff;
  border-color:transparent;box-shadow:0 8px 18px rgba(7,60,95,.28);transform:none}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab.active .tab-ic{
  background:transparent;color:#fff;box-shadow:none}
@media(max-width:820px){
  :is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tabs{border-radius:14px;padding:6px}
  :is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab{font-size:13px;padding:9px 12px}
}

/* ---------- data grids: navy header row, zebra body, pill actions ---------- */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table thead th{
  background:var(--navy);color:rgba(255,255,255,.92);
  font-size:10px;letter-spacing:.12em;border-bottom:0;padding:13px 14px}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table tbody td{padding:13px 14px}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table tbody tr:nth-child(even) td{
  background:#F7FAFC}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table tbody tr.data-row.openable:hover td{
  background:var(--tint)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table .btn{border-radius:99px}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table .btn-soft{
  background:var(--ice);color:#0A5A8E;box-shadow:none}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table .btn-soft:hover{
  background:#D6EAF8;color:var(--navy)}

/* ---------- the status system goes solid, one colour per meaning ----------
   Deepened a step from the mock so 10.5px white capitals stay readable:
   red overdue/critical, green healthy, amber waiting, blue in-motion,
   grey dormant. Scoped with the module; the same fills roll out to the
   rest of the app as each module is approved. */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .pill{padding:5px 11px;font-weight:850}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .pill-blue{background:#0E6BA8;color:#fff}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .pill-green{background:#0F8A5F;color:#fff}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .pill-amber{background:#A96F0A;color:#fff}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .pill-red{background:#C0392F;color:#fff}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .pill-grey{background:#5D7183;color:#fff}

/* ---------- list toolbar: pill controls in one quiet row ---------- */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) :is(.sales-toolbar,.list-tools) .btn{
  border-radius:99px}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .list-tools .control:focus{
  border-color:var(--bright);box-shadow:0 0 0 3px rgba(45,156,219,.16)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .filter-chip.active{
  background:var(--navy);border-color:var(--navy);box-shadow:0 8px 18px rgba(7,60,95,.22)}

/* ---------- Customers amendments (review round 2) ----------
   The snapshot boxes take the solid Home-style fills — one identity
   colour per figure: brand navy, emerald, teal, violet. The classes are
   only ever written on the Customers page, so nothing else changes. */
.module-summary-card.kpi-solid.kpi-brand{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#11629B 0%,#083D61 92%);
  box-shadow:0 16px 34px rgba(8,61,97,.30)}
.module-summary-card.kpi-solid.kpi-emerald{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#149A69 0%,#0C7350 92%);
  box-shadow:0 16px 34px rgba(12,115,80,.30)}
.module-summary-card.kpi-solid.kpi-teal{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#0E9791 0%,#0A6F6C 92%);
  box-shadow:0 16px 34px rgba(10,111,108,.30)}
.module-summary-card.kpi-solid.kpi-violet{
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#6F5FD5 0%,#5240B8 92%);
  box-shadow:0 16px 34px rgba(82,64,184,.30)}
/* four across on the page, so a slightly shorter card than Home's three */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .module-summary-card.kpi-solid{
  min-height:132px}

/* The Customers/Contacts tabs go back to their previous larger size —
   full-width rail, roomy type, icon chips — keeping the new colours. */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tabs{gap:8px;padding:8px}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab{
  flex:1 1 auto;justify-content:center;font-size:15px;padding:12px 17px;
  border-radius:12px}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab .tab-ic{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--ice);color:var(--blue)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab:hover:not(.active) .tab-ic{
  background:var(--ice);color:var(--blue)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab.active .tab-ic{
  background:rgba(255,255,255,.16);color:#fff}
@media(max-width:820px){
  :is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab{
    font-size:13.5px;padding:10px 13px}
  :is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .sales-tab .tab-ic{
    width:26px;height:26px;border-radius:9px}
}

/* Win More Work wears its own identity colour in the band. */
.sales-header[data-area="win_more_work"] .eyebrow{color:var(--area-win)}
/* Tone-driven solid tiles: waiting work is amber, late work is red —
   used by figures whose colour is a state, not an identity. */
.module-summary-card.kpi-solid.tone-amber:not(.kpi-invoices):not(.kpi-quotes):not(.kpi-tasks):not(.kpi-brand):not(.kpi-emerald):not(.kpi-teal):not(.kpi-violet){
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#B8821F 0%,#8F6208 92%);
  box-shadow:0 16px 34px rgba(143,98,8,.30)}
.module-summary-card.kpi-solid.tone-red:not(.kpi-invoices):not(.kpi-quotes):not(.kpi-tasks):not(.kpi-brand):not(.kpi-emerald):not(.kpi-teal):not(.kpi-violet){
  background:
    radial-gradient(300px 160px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#C64541 0%,#992629 92%);
  box-shadow:0 16px 34px rgba(153,38,41,.30)}

/* Get Paid wears its own identity colour in the band. */
.sales-header[data-area="get_paid"] .eyebrow{color:var(--area-paid)}

/* Stacked status pills in a table cell breathe: a sent invoice that is
   also overdue shows both pills with clear air between them. */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table td .pill{
  margin:3px 6px 3px 0}

/* Table row actions read as real buttons: solid action blue, like the
   enquiry Action pill. Marking an invoice paid is the happy path, so
   that one button is the bright green. Ghost buttons stay quiet. */
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table :is(.btn-soft,.btn-light){
  background:var(--grad-primary);color:#fff;border:0;
  box-shadow:0 5px 12px rgba(14,107,168,.24)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table :is(.btn-soft,.btn-light):hover{
  background:linear-gradient(135deg,#0C5E94,#2D9CDB);color:#fff;
  box-shadow:0 8px 18px rgba(14,107,168,.32)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table .btn[data-pay-full]{
  background:linear-gradient(135deg,#14A76D,#0F8A5F);
  box-shadow:0 5px 12px rgba(15,138,95,.28)}
:is([data-view="customers"],[data-view="contacts"],[data-view="prospects"],[data-view="sales"],[data-view="audit"],[data-view="social"],[data-view="enquiries"],[data-view="billing"],[data-view="stock"],[data-view="tasks"],[data-view="settings"],[data-view="workflows"]) .data-table .btn[data-pay-full]:hover{
  background:linear-gradient(135deg,#17B877,#12A26E);
  box-shadow:0 8px 18px rgba(15,138,95,.36)}

/* Buying & Stock wears its own identity colour in the band. */
.sales-header[data-area="buying_stock"] .eyebrow{color:var(--area-stock)}

/* ---------- stock overview tiles: the solid treatment ----------
   Same grid, same figures, same drills — only the paint changes: navy
   for work in motion, amber for ordering to review, red for stock at
   risk, green when that figure stands clear. */
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row{
  border:0;border-radius:18px;padding:18px 20px;color:#fff;gap:4px;
  background:
    radial-gradient(240px 130px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#11629B 0%,#083D61 92%);
  box-shadow:0 14px 30px rgba(8,61,97,.28)}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row.tone-green{
  background:
    radial-gradient(240px 130px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#149A69 0%,#0C7350 92%);
  box-shadow:0 14px 30px rgba(12,115,80,.28)}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row.tone-amber{
  background:
    radial-gradient(240px 130px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#B8821F 0%,#8F6208 92%);
  box-shadow:0 14px 30px rgba(143,98,8,.28)}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row.tone-red{
  background:
    radial-gradient(240px 130px at 8% -14%,rgba(255,255,255,.14),transparent 60%),
    linear-gradient(150deg,#C64541 0%,#992629 92%);
  box-shadow:0 14px 30px rgba(153,38,41,.28)}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row b{color:#fff;font-size:26px;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row span{color:rgba(255,255,255,.92);font-size:11px;
  font-weight:900;letter-spacing:.08em;text-transform:uppercase}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row small{color:rgba(255,255,255,.78);font-size:11.5px}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) button.ageing-row:hover{transform:translateY(-2px);
  filter:brightness(1.05);border-color:transparent;
  box-shadow:0 18px 36px rgba(2,29,48,.3)}
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Things To Do wears its own identity colour in the band. */
.sales-header[data-area="things_to_do"] .eyebrow{color:var(--area-tasks)}
/* A tile acting as the list's active filter shows a white ring, never
   colour alone. */
:is([data-view="stock"],[data-view="tasks"],[data-view="workflows"],[data-view="settings"]) .ageing-row.active{
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),0 14px 30px rgba(2,29,48,.3)}

/* ---------- the rail carries the module colours ----------
   Each area's icon and label wear the same identity colour as its band
   eyebrow, so the rail and the pages speak one language. The selected
   area keeps the solid blue pill with white text — selection stays a
   shape and a fill, never colour alone. */
.nav-btn[data-area="customers"]{color:var(--area-customers)}
.nav-btn[data-area="win_more_work"]{color:var(--area-win)}
.nav-btn[data-area="get_paid"]{color:var(--area-paid)}
.nav-btn[data-area="things_to_do"]{color:var(--area-tasks)}
.nav-btn[data-area="buying_stock"]{color:var(--area-stock)}
.nav-btn[data-area]:hover{color:#fff}
.nav-btn[data-area].active{color:#fff}

/* Settings wears the quiet steel-blue in the band — administration,
   not a workload. */
.sales-header[data-area="settings"] .eyebrow{color:var(--area-plain)}

/* The Workflows page also renders inside Settings, under the Settings
   band — there the second header sits as a rounded navy panel within
   the page rather than a second full-bleed band. */
#settings-body .sales-header[data-area="settings"]{
  margin:0 0 16px;border-radius:18px;padding:20px 24px 22px}
#settings-body .sales-header[data-area="settings"] h1{font-size:clamp(24px,2.4vw,30px)}

/* ---------- Stock and Buying: the first-level choice ----------
   One sidebar destination, two journeys inside it (reorganisation, Sept
   2026). The switch is a white rail like the tab bar beneath it, the
   chosen half a solid navy pill, and each half says in a few words what
   it is for. Scoped to the Stock view, so nothing else changes. */
[data-view="stock"] .stock-halves{display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin:0 0 12px;padding:8px;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh-xs)}
[data-view="stock"] .stock-half{display:flex;align-items:center;gap:13px;text-align:left;
  padding:13px 16px;border:0;border-radius:13px;background:transparent;color:var(--navy);
  font:inherit;cursor:pointer;transition:background .15s,box-shadow .15s}
[data-view="stock"] .stock-half .half-ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;background:var(--ice);color:var(--blue)}
[data-view="stock"] .stock-half .half-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-view="stock"] .stock-half .half-text{display:block;min-width:0}
[data-view="stock"] .stock-half b{display:block;font-size:16px;font-weight:850;letter-spacing:-.02em}
[data-view="stock"] .stock-half small{display:block;font-size:12.5px;font-weight:650;
  color:var(--slate);margin-top:2px}
[data-view="stock"] .stock-half:hover:not(.active){background:var(--ice)}
[data-view="stock"] .stock-half.active{background:var(--navy);color:#fff;
  box-shadow:0 10px 22px rgba(7,60,95,.28)}
[data-view="stock"] .stock-half.active small{color:rgba(255,255,255,.8)}
[data-view="stock"] .stock-half.active .half-ic{background:rgba(255,255,255,.16);color:#fff}
[data-view="stock"] .stock-half:focus-visible{outline:3px solid var(--bright);outline-offset:2px}
/* The overview tiles fill one row whatever their number: three on the
   Stock page, two on Buying. */
[data-view="stock"] .ageing{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:820px){
  [data-view="stock"] .stock-halves{grid-template-columns:1fr;gap:6px;padding:6px;border-radius:14px}
  [data-view="stock"] .stock-half{padding:11px 13px}
}

/* ---------- Business Brain: one guided workspace (AI foundation) ---------- */
.bb{display:grid;gap:16px;max-width:1080px}
.bb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.bb-title{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-.04em;margin:0 0 6px}
.bb-head p{margin:0;font-size:13.5px;max-width:560px}
.bb-status{padding:4px 18px}
.bb-fact{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:13px;color:var(--navy)}
.bb-fact+.bb-fact{border-top:1px solid var(--line)}
.bb-fact>svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-fact>span{flex:1;min-width:0;line-height:1.5}
.bb-fact .btn{flex:0 0 auto}
.link-btn{border:0;background:none;color:var(--blue);font-weight:800;padding:0 2px;cursor:pointer;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.bb-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bb-nav-item{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:14px;border-radius:16px;
  border:1px solid var(--line);background:#fff;color:var(--navy);transition:.16s ease;box-shadow:var(--sh-xs)}
.bb-nav-item:hover:not(.active){border-color:rgba(77,163,255,.5);transform:translateY(-1px)}
.bb-nav-item.active{border-color:var(--navy);box-shadow:0 0 0 2px rgba(23,55,111,.14)}
.bb-nav-item .tab-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--ice);color:var(--blue)}
.bb-nav-item.active .tab-ic{background:var(--navy);color:#fff}
.bb-nav-item .tab-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-nav-text{display:grid;gap:2px;min-width:0}
.bb-nav-text b{font-size:14px}
.bb-nav-text small{font-size:11.5px;color:var(--slate);line-height:1.45}
.bb-section{padding:22px}
.bb-section-head{margin-bottom:14px}
.bb-section-head h3{margin:0 0 4px;font-size:18px;letter-spacing:-.03em}
.bb-section-head p{margin:0;font-size:13px;max-width:680px}
.bb-saved{font-size:11.5px;color:var(--green);font-weight:800;min-height:16px;margin-top:4px}
.bb-form{margin:0 0 6px}
.bb-group{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.bb-group-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.bb-group-head h4{margin:0;font-size:14.5px}
.bb-group-head p{margin:3px 0 0;max-width:600px}
.bb-rows{display:grid;gap:8px}
.bb-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:#fff}
.bb-row.archived{opacity:.72}
.bb-row-main{min-width:0;flex:1;display:grid;gap:3px}
.bb-row-main>b{font-size:13px;color:var(--navy)}
.bb-row-main>.pill{justify-self:start;margin-bottom:2px}
.bb-row-main small{font-size:12px;color:var(--slate);line-height:1.5}
.bb-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.bb-row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.bb-empty{padding:12px 14px;border:1px dashed var(--line);border-radius:13px}
.bb-empty p{margin:0}
.bb-fail{color:var(--red)!important}
.bb-ok{color:var(--green)!important;font-weight:800}
.bb-more{margin-top:10px}
.bb-more summary{font-weight:800;color:var(--navy);cursor:pointer;font-size:13px}
.bb-more[open] summary{margin-bottom:12px}
.bb-readthrough{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.bb-readthrough .bb-row{align-items:center}
.bb-draftbar{position:sticky;bottom:12px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:16px;background:var(--navy);color:#fff;box-shadow:0 12px 28px rgba(11,32,80,.25)}
.bb-draftbar>span{display:flex;align-items:center;gap:8px;font-size:13px}
.bb-draftbar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-draftbar-actions{display:flex;gap:8px}
.bb-ladder{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--mist);margin:8px 0 6px}
.bb-level{border:0;background:transparent;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--slate);cursor:pointer}
.bb-level.active{background:var(--navy);color:#fff}
.bb-level:disabled{cursor:default}
.bb-level:disabled:not(.active){opacity:.45}
.bb-usecase .bb-row-actions{align-self:center}
.bb-first{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bb-choice{display:grid;gap:6px;text-align:left;padding:16px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--navy);transition:.16s ease}
.bb-choice:hover{border-color:rgba(77,163,255,.5);transform:translateY(-1px)}
.bb-choice b{font-size:14px;display:flex;align-items:center;gap:8px}
.bb-choice b svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-choice small{color:var(--slate);line-height:1.5}
.bb-steps{display:flex;gap:6px;margin-bottom:14px}
.bb-steps i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.bb-steps i.done{background:var(--blue)}
.bb-result{background:var(--mist);border-radius:14px;padding:14px;white-space:pre-wrap;font-size:13px;line-height:1.55;color:var(--ink)}
.bb-kv{display:grid;gap:8px;margin-top:12px;font-size:12.5px}
.bb-kv>b{color:var(--navy);font-size:13.5px}
.bb-warn{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#7A5310;background:#FFF6E9;border-radius:10px;padding:8px 10px;margin:0}
.bb-warn svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bb-need{margin:6px 0 0 18px;padding:0;font-size:12.5px;line-height:1.6}
.bb-changes{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.9}
.bb-changes .pill{margin-right:4px}
.bb-used{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.bb-used svg{width:13px;height:13px;vertical-align:-2px;stroke:var(--blue);fill:none;stroke-width:2}
.bb-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.bb-feedback-form{flex-basis:100%;display:grid;gap:8px;margin-top:6px}
.bb-source-panel{padding:14px 0 0;border-top:1px solid var(--line);margin-top:14px}
.bb-source-panel:first-child{border-top:0;margin-top:0;padding-top:0}
.bb-source-title{display:block;font-size:13px;color:var(--navy);margin-bottom:4px}
.bb-source-panel .muted.small{margin:0}
.bb-add-source{margin-top:14px}
@media(max-width:1100px){.bb-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.bb-first{grid-template-columns:1fr}}
@media(max-width:820px){.bb-nav{grid-template-columns:1fr}.bb-nav-item{flex-direction:row;align-items:center}.bb-nav-item .pill{margin-left:auto}
  .bb-row{flex-direction:column}.bb-row-actions{justify-content:flex-start}.bb-readthrough{grid-template-columns:1fr}.bb-section{padding:16px}
  .bb-draftbar{bottom:8px}}
.bb-feedback-form[hidden],.bb-add-source[hidden],.bb [hidden]{display:none}
/* ---------- Social Studio: one area, six pages (preview build, Sept 2026) ----------
   Appended as its own pass and scoped to the Social view. Platform glyphs
   carry each network's own colour; every state colour comes from the palette
   above (green live, amber waiting, red failed, blue queued). */
[data-view="social"] .social-envnote{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;
  border-radius:12px;background:var(--ice);color:var(--slate);font-size:13px;font-weight:650}
[data-view="social"] .social-envnote svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}
[data-view="social"] .social-grid-2{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start;margin-top:16px}
[data-view="social"] .social-grid-2 .list-card{margin:0}
[data-view="social"] .social-how{list-style:none;counter-reset:s;margin:12px 0 16px;padding:0;display:grid;gap:11px}
[data-view="social"] .social-how li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
[data-view="social"] .social-how li::before{content:counter(s);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy),var(--blue));color:#fff;font-size:12px;font-weight:800}
[data-view="social"] .social-how b{display:block;font-size:13.5px;color:var(--navy)}
[data-view="social"] .social-how small{display:block;color:var(--slate);font-size:12.5px;margin-top:1px}
/* Platform glyphs */
[data-view="social"] .pf{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;flex:0 0 auto}
[data-view="social"] .pf svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-view="social"] .pf.sm{width:24px;height:24px;border-radius:7px}
[data-view="social"] .pf.sm svg{width:13px;height:13px}
[data-view="social"] .pf-facebook{background:#1877F2}
[data-view="social"] .pf-instagram{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
[data-view="social"] .pf-linkedin{background:#0A66C2}
[data-view="social"] .pf-x{background:#111}
[data-view="social"] .pf-row{display:inline-flex;gap:6px;align-items:center}
[data-view="social"] .pf-dot{position:relative;display:inline-grid}
[data-view="social"] .pf-dot::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;
  border:2px solid #fff;background:var(--faint)}
[data-view="social"] .pf-dot.st-published::after{background:var(--green)}
[data-view="social"] .pf-dot.st-queued::after,[data-view="social"] .pf-dot.st-approved::after{background:var(--blue)}
[data-view="social"] .pf-dot.st-publishing::after,[data-view="social"] .pf-dot.st-uploading_media::after,[data-view="social"] .pf-dot.st-pending_confirmation::after{background:var(--cyan)}
[data-view="social"] .pf-dot.st-failed_permanent::after{background:var(--red)}
[data-view="social"] .pf-dot.st-failed_retryable::after,[data-view="social"] .pf-dot.st-validated::after,[data-view="social"] .pf-dot.st-draft::after{background:var(--amber)}
/* Accounts */
[data-view="social"] .acct-list{gap:9px;margin:10px 0 14px}
[data-view="social"] .acct-line{display:flex;align-items:center;gap:11px}
[data-view="social"] .acct-line.off{opacity:.6}
[data-view="social"] .acct-text{flex:1;min-width:0}
[data-view="social"] .acct-text b{display:block;font-size:13.5px;color:var(--navy)}
[data-view="social"] .acct-text small{display:block;color:var(--slate);font-size:12.5px}
[data-view="social"] .social-notice{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:14px;font-size:13.5px;line-height:1.5;border:1px solid}
[data-view="social"] .social-notice svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2}
[data-view="social"] .social-notice.n-blue{background:var(--ice);border-color:rgba(14,107,168,.18);color:var(--ink)}
[data-view="social"] .social-notice.n-amber{background:#FFF7E8;border-color:rgba(227,154,31,.35);color:#6b4a06}
[data-view="social"] .social-notice.n-green{background:#EAF8F1;border-color:rgba(20,158,110,.3);color:#0d5c41}
[data-view="social"] .conn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
[data-view="social"] .conn{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-xs)}
[data-view="social"] .conn.linked{border-color:rgba(20,158,110,.35)}
[data-view="social"] .conn.expired{border-color:rgba(227,154,31,.45);background:#FFFBF3}
[data-view="social"] .conn-txt{flex:1;min-width:0;display:grid;gap:6px}
[data-view="social"] .conn-txt b{font-size:15px;color:var(--navy)}
[data-view="social"] .conn-acc{font-size:13px;color:var(--ink);line-height:1.7}
[data-view="social"] .conn-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
[data-view="social"] .scope-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
[data-view="social"] .scope-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
[data-view="social"] .scope-card.cannot{background:var(--mist)}
[data-view="social"] .scope-head{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--navy);margin-bottom:8px}
[data-view="social"] .scope-head svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
[data-view="social"] .scope-card ul{margin:0;padding:0 0 0 16px}
[data-view="social"] .scope-card li{font-size:13px;margin:6px 0;color:var(--ink)}
[data-view="social"] .scope-card li small{display:block;color:var(--faint);font-size:11.5px;font-family:ui-monospace,Consolas,monospace}
[data-view="social"] .attention-list{margin-top:16px}
[data-view="social"] .chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
/* Steps */
[data-view="social"] .social-steps{list-style:none;margin:0 0 18px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-xs)}
[data-view="social"] .social-step{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:11px;font-size:13.5px;font-weight:700;color:var(--slate)}
[data-view="social"] .social-step .snum{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mist);color:var(--slate);font-size:12px;font-weight:800;flex:0 0 auto}
[data-view="social"] .social-step .snum svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
[data-view="social"] .social-step.on{background:var(--navy);color:#fff}
[data-view="social"] .social-step.on .snum{background:#fff;color:var(--navy)}
[data-view="social"] .social-step.done{color:var(--navy)}
[data-view="social"] .social-step.done .snum{background:var(--green);color:#fff}
[data-view="social"] .composer-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start}
[data-view="social"] .composer-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px}
[data-view="social"] .composer-foot .row-actions{display:flex;align-items:center;gap:12px}
[data-view="social"] .plain-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
[data-view="social"] .plain-list b{display:block;font-size:12.5px;color:var(--navy)}
[data-view="social"] .plain-list small{display:block;color:var(--slate);font-size:12px}
/* Media */
[data-view="social"] .social-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px;border:2px dashed var(--edge-2);border-radius:14px;
  background:var(--mist);cursor:pointer;text-align:center;margin-top:12px}
[data-view="social"] .social-drop:hover{border-color:var(--blue);background:var(--ice)}
[data-view="social"] .social-drop input{display:none}
[data-view="social"] .social-drop svg{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.8}
[data-view="social"] .social-drop b{font-size:14px;color:var(--navy)}
[data-view="social"] .social-drop span{font-size:12.5px;color:var(--slate)}
[data-view="social"] .media-item{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:start;margin-top:12px}
[data-view="social"] .media-thumb,[data-view="social"] .pv-img{width:120px;height:120px;object-fit:cover;border-radius:12px;background:var(--mist)}
[data-view="social"] .pv-img{width:100%;height:170px;border-radius:0}
[data-view="social"] .media-preview .media-thumb{width:100%;height:160px;margin-bottom:10px}
[data-view="social"] .media-meta b{display:block;font-size:13.5px;color:var(--navy);word-break:break-word}
[data-view="social"] .gate{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
[data-view="social"] .gate-row{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--slate)}
[data-view="social"] .gate-row b{text-transform:capitalize;color:var(--ink)}
[data-view="social"] .gate-row .gi{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto;background:var(--mist);color:var(--slate)}
[data-view="social"] .gate-row .gi svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3}
[data-view="social"] .gate-row.pass .gi,[data-view="social"] .gate-row.simulated .gi{background:#EAF8F1;color:var(--green)}
[data-view="social"] .gate-row.warn .gi,[data-view="social"] .gate-row.skipped .gi{background:#FFF7E8;color:var(--amber)}
[data-view="social"] .gate-row.fail .gi{background:#FDECEC;color:var(--red)}
/* Destination choices */
[data-view="social"] .dest{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;cursor:pointer;background:#fff}
[data-view="social"] .dest input[type=checkbox],[data-view="social"] .dest input[type=radio]{width:17px;height:17px;accent-color:var(--navy)}
[data-view="social"] .dest.on{border-color:var(--blue);background:var(--tint)}
[data-view="social"] .dest.off{opacity:.7;cursor:default;background:var(--mist)}
[data-view="social"] .dest-txt{flex:1;min-width:0;display:grid}
[data-view="social"] .dest-txt b{font-size:13.5px;color:var(--navy)}
[data-view="social"] .dest-txt span{font-size:12.5px;color:var(--slate)}
/* Variant cards */
[data-view="social"] .v-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0}
[data-view="social"] .variant-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
[data-view="social"] .variant{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-xs);overflow:hidden}
[data-view="social"] .variant.approved{border-color:rgba(20,158,110,.45)}
[data-view="social"] .variant.skipped{opacity:.65}
[data-view="social"] .v-head{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--navy)}
[data-view="social"] .v-head .pill{margin-left:auto}
[data-view="social"] .v-body{padding:12px 16px;display:grid;gap:6px}
[data-view="social"] .v-body .label{margin-top:6px}
[data-view="social"] .v-copy{min-height:150px;font-size:14px;line-height:1.55}
[data-view="social"] .v-warn{display:flex;gap:6px;align-items:flex-start;color:#6b4a06;background:#FFF7E8;border-radius:10px;padding:8px 10px;margin:6px 0 0}
[data-view="social"] .v-warn svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2}
[data-view="social"] .v-checks{list-style:none;margin:0;padding:10px 16px;border-top:1px dashed var(--line);display:grid;gap:6px;background:var(--mist)}
[data-view="social"] .chk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink)}
[data-view="social"] .chk .ci{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto}
[data-view="social"] .chk .ci svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3}
[data-view="social"] .chk.ok .ci{background:#EAF8F1;color:var(--green)}
[data-view="social"] .chk.warn .ci{background:#FFF7E8;color:var(--amber)}
[data-view="social"] .chk.bad .ci{background:#FDECEC;color:var(--red)}
[data-view="social"] .chk.bad{color:#8a1f24;font-weight:650}
[data-view="social"] .v-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
[data-view="social"] .cnt{margin-left:auto;font-size:12px;font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
[data-view="social"] .cnt.over{color:var(--red)}
/* Preview of a post */
[data-view="social"] .pv{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:12px;background:#fff}
[data-view="social"] .pv-top{display:flex;align-items:center;gap:9px;padding:10px 12px}
[data-view="social"] .pv-top b{display:block;font-size:13px;color:var(--navy)}
[data-view="social"] .pv-top span{display:block;font-size:11.5px;color:var(--slate)}
[data-view="social"] .pv-body{padding:10px 12px 12px;font-size:13px;white-space:pre-wrap;color:var(--ink)}
/* Ledger + rollup on the record */
[data-view="social"] .record-brief{font-style:italic;margin:0 0 14px}
[data-view="social"] .rollup{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;margin:0 0 16px;border:1px solid}
[data-view="social"] .rollup .r-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:#fff}
[data-view="social"] .rollup .r-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
[data-view="social"] .rollup b{display:block;font-size:16px;letter-spacing:-.01em}
[data-view="social"] .rollup span:not(.r-ic){display:block;font-size:13.5px;margin-top:2px}
[data-view="social"] .rollup.good{background:#EAF8F1;border-color:rgba(20,158,110,.35);color:#0d5c41}
[data-view="social"] .rollup.part{background:#FFF7E8;border-color:rgba(227,154,31,.4);color:#6b4a06}
[data-view="social"] .rollup.bad{background:#FDECEC;border-color:rgba(215,72,79,.35);color:#8a1f24}
[data-view="social"] .rollup.run,[data-view="social"] .rollup.sched{background:var(--ice);border-color:rgba(14,107,168,.25);color:var(--navy)}
[data-view="social"] .rollup.run .r-ic svg{animation:social-spin 1.6s linear infinite}
@keyframes social-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){[data-view="social"] .rollup.run .r-ic svg{animation:none}}
[data-view="social"] .ledger{display:grid;gap:0}
[data-view="social"] .ldg-row{display:grid;grid-template-columns:34px 1fr 140px auto auto auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
[data-view="social"] .ldg-row:first-child{border-top:0}
[data-view="social"] .ldg-row.dim{opacity:.6}
[data-view="social"] .ldg-txt b{display:block;font-size:13.5px;color:var(--navy)}
[data-view="social"] .ldg-txt span{display:block;font-size:12.5px;color:var(--slate)}
[data-view="social"] .ldg-txt a{color:var(--blue);font-weight:700}
[data-view="social"] .track{height:8px;border-radius:999px;background:var(--mist);overflow:hidden}
[data-view="social"] .track i{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .6s ease}
[data-view="social"] .track.good i{background:var(--green)}
[data-view="social"] .track.bad i{background:var(--red)}
[data-view="social"] .copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
[data-view="social"] .copy-card{border:1px solid var(--line);border-radius:14px;overflow:hidden}
[data-view="social"] .copy-text{margin:0;padding:12px 16px;font:inherit;font-size:13.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
[data-view="social"] .copy-card .small{padding:0 16px 12px}
[data-view="social"] .s-timeline{list-style:none;margin:0;padding:0;display:grid;gap:10px}
[data-view="social"] .s-timeline li{display:grid;grid-template-columns:170px 1fr;gap:12px;font-size:13.5px;align-items:baseline}
[data-view="social"] .s-timeline time{color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}
/* Calendar */
[data-view="social"] .cal-legend{display:flex;gap:16px;font-size:12px;font-weight:700;color:var(--slate);margin:6px 0 12px}
[data-view="social"] .cal-legend span{display:inline-flex;align-items:center;gap:6px}
[data-view="social"] .cdot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;flex:0 0 auto}
[data-view="social"] .st-published .cdot,[data-view="social"] .cdot.st-published{background:var(--green)}
[data-view="social"] .st-scheduled .cdot,[data-view="social"] .cdot.st-scheduled{background:var(--blue)}
[data-view="social"] .st-partially_published .cdot,[data-view="social"] .cdot.st-partially_published{background:var(--amber)}
[data-view="social"] .st-failed .cdot,[data-view="social"] .cdot.st-failed{background:var(--red)}
[data-view="social"] .st-publishing .cdot{background:var(--cyan)}
[data-view="social"] .social-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
[data-view="social"] .cdow{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:4px 6px}
[data-view="social"] .cday{min-height:92px;border:1px solid var(--line);border-radius:10px;padding:6px;background:#fff;display:grid;align-content:start;gap:4px}
[data-view="social"] .cday.dim{background:transparent;border-style:dashed;opacity:.5}
[data-view="social"] .cday.today{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
[data-view="social"] .cnum{font-size:12px;font-weight:800;color:var(--slate)}
[data-view="social"] .cev{display:flex;align-items:center;gap:6px;font:inherit;font-size:11.5px;font-weight:700;color:var(--navy);text-align:left;
  padding:4px 6px;border:0;border-radius:7px;background:var(--mist);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
[data-view="social"] .cev:hover{background:var(--ice)}
@media(max-width:900px){
  [data-view="social"] .social-grid-2,[data-view="social"] .composer-grid{grid-template-columns:1fr}
  [data-view="social"] .social-steps{grid-template-columns:1fr 1fr}
  [data-view="social"] .ldg-row{grid-template-columns:34px 1fr auto;grid-auto-flow:row}
  [data-view="social"] .ldg-row .track{display:none}
  [data-view="social"] .s-timeline li{grid-template-columns:1fr}
  [data-view="social"] .social-cal{gap:3px}
  [data-view="social"] .cday{min-height:60px}
}

/* The hidden attribute must beat the button display rule. */
[data-view="social"] .v-save[hidden]{display:none}

/* ---------- AI Reception: the call simulator and call record (v1) ----------
   Scoped to the Voice view. State colours come from the shared palette; the
   phone panel and the two-sided transcript are the only new shapes. */
[data-view="voice"] .voice-envnote{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--ice);color:var(--slate);font-size:13px;font-weight:650}
[data-view="voice"] .voice-envnote svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}
[data-view="voice"] .voice-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start;margin-top:16px}
[data-view="voice"] .voice-dialpad{text-align:center}
[data-view="voice"] .voice-phone-icon{width:56px;height:56px;margin:4px auto 10px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy),var(--blue));color:#fff}
[data-view="voice"] .voice-phone-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}
[data-view="voice"] .voice-fields{display:grid;gap:10px;margin:14px 0;text-align:left}
[data-view="voice"] .voice-fields .field{display:grid;gap:4px}
[data-view="voice"] .voice-fields .field>span{font-size:12.5px;color:var(--navy);font-weight:700}
[data-view="voice"] .voice-fields input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff}
[data-view="voice"] .voice-fields input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,163,255,.18)}
[data-view="voice"] .voice-call-btn{width:100%;justify-content:center;margin-top:2px}
[data-view="voice"] .voice-speak-toggle{display:flex;align-items:center;gap:7px;justify-content:center;margin-top:12px;font-size:12.5px;color:var(--slate)}
[data-view="voice"] .voice-can{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
[data-view="voice"] .voice-can li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
[data-view="voice"] .voice-can li svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2.5;margin-top:1px}
[data-view="voice"] .voice-can b{font-size:13.5px;color:var(--navy);display:block}
[data-view="voice"] .voice-can small{font-size:12.5px;color:var(--slate);line-height:1.5}
[data-view="voice"] .voice-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
[data-view="voice"] .voice-ready-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
[data-view="voice"] .voice-ready{list-style:none;margin:0;padding:0;display:grid;gap:9px}
[data-view="voice"] .voice-ready li{display:flex;align-items:center;gap:10px;font-size:13.5px}
[data-view="voice"] .voice-ready li .vr-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
[data-view="voice"] .voice-ready li .vr-ic svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}
[data-view="voice"] .voice-ready li.ok .vr-ic{background:#EAF8F1;color:var(--green)}
[data-view="voice"] .voice-ready li.ok .vr-label{color:var(--navy)}
[data-view="voice"] .voice-ready li.todo .vr-ic{background:#FFF7E8;color:#E39A1F}
[data-view="voice"] .voice-ready li.todo .vr-label{color:var(--slate)}
[data-view="voice"] .voice-ready .vr-label{flex:1}
[data-view="voice"] .voice-ready .link-btn{flex:0 0 auto}
/* Live call + record */
[data-view="voice"] .voice-call{overflow:hidden}
[data-view="voice"] .voice-call-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--mist)}
[data-view="voice"] .voice-caller{display:flex;align-items:center;gap:11px}
[data-view="voice"] .voice-caller>svg{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--ice);color:var(--blue);stroke:currentColor;fill:none;stroke-width:2;box-sizing:border-box}
[data-view="voice"] .voice-caller b{font-size:14.5px;color:var(--navy)}
[data-view="voice"] .voice-caller small{display:block;font-size:12px}
[data-view="voice"] .voice-call-actions{display:flex;gap:8px;align-items:center}
[data-view="voice"] .voice-transcript{display:flex;flex-direction:column;gap:12px;padding:18px;max-height:46vh;overflow-y:auto}
[data-view="voice"] .voice-transcript-static{max-height:none}
[data-view="voice"] .vb{max-width:78%;display:flex;flex-direction:column;gap:4px}
[data-view="voice"] .vb-assistant{align-self:flex-start;align-items:flex-start}
[data-view="voice"] .vb-caller{align-self:flex-end;align-items:flex-end}
[data-view="voice"] .vb-who{font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
[data-view="voice"] .vb-text{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5}
[data-view="voice"] .vb-assistant .vb-text{background:var(--ice);color:var(--ink);border-bottom-left-radius:5px}
[data-view="voice"] .vb-caller .vb-text{background:var(--navy);color:#fff;border-bottom-right-radius:5px}
[data-view="voice"] .vb-intent{margin-top:1px}
[data-view="voice"] .voice-input{display:flex;gap:8px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
[data-view="voice"] .voice-input input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px}
[data-view="voice"] .voice-input input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,163,255,.18)}
[data-view="voice"] .voice-mic{padding:10px}
[data-view="voice"] .voice-mic svg{width:18px;height:18px}
[data-view="voice"] .voice-mic.listening{background:var(--red,#e5484d);color:#fff;border-color:transparent;animation:voicePulse 1s infinite}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
[data-view="voice"] .voice-ended{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 18px;border-top:1px solid var(--line)}
[data-view="voice"] .voice-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}
[data-view="voice"] .voice-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--sh-xs)}
[data-view="voice"] .voice-stat b{display:block;font-size:24px;letter-spacing:-.03em;color:var(--navy)}
[data-view="voice"] .voice-stat span{font-size:12px;color:var(--slate)}
[data-view="voice"] .voice-empty{text-align:center}
[data-view="voice"] .row-click{cursor:pointer}
[data-view="voice"] .row-click:hover{background:var(--mist)}
[data-view="voice"] .voice-back{margin-bottom:12px}
[data-view="voice"] .voice-msg-note{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-top:1px solid var(--line);background:#EAF8F1}
[data-view="voice"] .voice-msg-note svg{width:20px;height:20px;stroke:var(--green);fill:none;stroke-width:2.5;flex:0 0 auto;margin-top:1px}
[data-view="voice"] .voice-msg-note b{font-size:13.5px;color:var(--navy)}
[data-view="voice"] .voice-msg-cell{max-width:320px;color:var(--ink);font-size:13px;line-height:1.45}
[data-view="voice"] .voice-settings{display:grid;gap:18px}
[data-view="voice"] .voice-settings .field{display:grid;gap:5px}
[data-view="voice"] .voice-settings .field>span{font-size:13.5px;font-weight:700;color:var(--navy)}
[data-view="voice"] .voice-settings .field small{font-size:12px;color:var(--slate)}
[data-view="voice"] .voice-settings input[type="text"],[data-view="voice"] .voice-settings select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;font-size:14px;background:#fff}
[data-view="voice"] .voice-settings input[type="text"]:focus,[data-view="voice"] .voice-settings select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,163,255,.18)}
[data-view="voice"] .voice-settings .field-check{grid-template-columns:auto 1fr;align-items:start;gap:10px}
[data-view="voice"] .voice-settings .field-check input{margin-top:3px}
[data-view="voice"] .voice-settings .field-check span{display:grid;gap:2px;font-weight:700;color:var(--navy);font-size:13.5px}
[data-view="voice"] .voice-settings .row-actions{display:flex;align-items:center;gap:12px}
@media(max-width:900px){[data-view="voice"] .voice-grid{grid-template-columns:1fr}[data-view="voice"] .voice-stats{grid-template-columns:repeat(2,1fr)}[data-view="voice"] .vb{max-width:88%}}