/* Aarambh team app — shell design system. Self-contained, no build step. */
:root{
  --paper:#F4F3EE; --surface:#FFFFFF; --surface-2:#FBFAF6;
  --ink:#20222B; --ink-soft:#4A4D5A; --muted:#71747F;
  --line:#E5E2D9; --line-soft:#EFEDE6;
  --accent:#2B4ED0; --accent-ink:#1E3AA8; --accent-wash:#EAEEFB;
  --gold:#B47A2E; --gold-wash:#F6ECD9;
  --good:#2E9E6B; --good-wash:#E3F3EB; --warn:#C98A2E; --warn-wash:#F7EDD8;
  --crit:#D14A3B; --crit-wash:#FAE6E2; --info:#2B72C0; --info-wash:#E4EFFA;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(30,32,45,.04), 0 6px 20px rgba(30,32,45,.06);
  --shadow-lg:0 2px 6px rgba(30,32,45,.06), 0 18px 46px rgba(30,32,45,.12);
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#131419; --surface:#1B1D24; --surface-2:#20222A;
  --ink:#ECEAE3; --ink-soft:#C4C3BE; --muted:#9598A3;
  --line:#2C2E38; --line-soft:#262832;
  --accent:#7C96FF; --accent-ink:#9DB0FF; --accent-wash:#22283F;
  --gold:#D6A65C; --gold-wash:#332A18;
  --good:#4FC08D; --good-wash:#1B3128; --warn:#DCA855; --warn-wash:#332A17;
  --crit:#E8695A; --crit-wash:#331F1C; --info:#6EA8E8; --info-wash:#1C2A3A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --paper:#131419; --surface:#1B1D24; --surface-2:#20222A;
  --ink:#ECEAE3; --ink-soft:#C4C3BE; --muted:#9598A3;
  --line:#2C2E38; --line-soft:#262832;
  --accent:#7C96FF; --accent-ink:#9DB0FF; --accent-wash:#22283F;
  --gold:#D6A65C; --gold-wash:#332A18;
  --good:#4FC08D; --good-wash:#1B3128; --warn:#DCA855; --warn-wash:#332A17;
  --crit:#E8695A; --crit-wash:#331F1C; --info:#6EA8E8; --info-wash:#1C2A3A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --paper:#F4F3EE; --surface:#FFFFFF; --surface-2:#FBFAF6;
  --ink:#20222B; --ink-soft:#4A4D5A; --muted:#71747F;
  --line:#E5E2D9; --line-soft:#EFEDE6;
  --accent:#2B4ED0; --accent-ink:#1E3AA8; --accent-wash:#EAEEFB;
  --gold:#B47A2E; --gold-wash:#F6ECD9;
  --good:#2E9E6B; --good-wash:#E3F3EB; --warn:#C98A2E; --warn-wash:#F7EDD8;
  --crit:#D14A3B; --crit-wash:#FAE6E2; --info:#2B72C0; --info-wash:#E4EFFA;
  --shadow:0 1px 2px rgba(30,32,45,.04), 0 6px 20px rgba(30,32,45,.06);
  --shadow-lg:0 2px 6px rgba(30,32,45,.06), 0 18px 46px rgba(30,32,45,.12);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{color:inherit; text-decoration:none}
.skip-link{
  position:absolute; left:-999px; top:8px; z-index:100; background:var(--accent); color:#fff;
  padding:8px 14px; border-radius:8px;
}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

.app{display:grid; grid-template-columns:280px 1fr; min-height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--surface); border-right:1px solid var(--line);
  padding:18px 14px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto; z-index:40;
}
.brand{display:flex; align-items:center; gap:11px; padding:6px 8px 14px; cursor:pointer}
.brand:hover .brand-mark{border-color:var(--accent)}
.brand:hover .brand-name{color:var(--accent-ink)}
.brand-mark{
  width:38px; height:38px; border-radius:9px; flex:none;
  background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow);
}
.brand-mark img{width:100%; height:100%; object-fit:contain; padding:2px}
.brand-mark-fallback{font-family:var(--serif); font-size:18px; font-weight:700; color:var(--accent-ink)}
.brand-name{font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.2px}
.brand-sub{font-size:11px; color:var(--muted); letter-spacing:.4px; text-transform:uppercase}
.rail-hint{
  font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);
  padding:4px 8px; display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.groups{display:flex; flex-direction:column; gap:4px; margin-top:2px}
.group{border-radius:var(--radius-sm); border:1px solid transparent;
  transition:background .15s, border-color .15s, opacity .15s}
.group.dragging{opacity:.4}
.group.drop-target{border-color:var(--accent); background:var(--accent-wash)}
.group-head{display:flex; align-items:center; gap:9px; padding:9px; cursor:pointer;
  border-radius:var(--radius-sm); user-select:none}
.group-head:hover{background:var(--surface-2)}
.group.active > .group-head{background:var(--accent-wash)}
.grip{flex:none; width:15px; color:var(--muted); cursor:grab; opacity:.55;
  display:grid; place-items:center; line-height:0; font-size:15px}
.grip:active{cursor:grabbing}
.group-icon{flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-soft); font-size:14px; border:1px solid var(--line-soft)}
.group.active .group-icon{background:var(--accent); color:#fff; border-color:transparent}
.group-label{flex:1; font-size:13.5px; font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.group.active .group-label{color:var(--accent-ink)}
.group-count{font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums;
  background:var(--surface-2); padding:2px 7px; border-radius:999px; border:1px solid var(--line-soft)}
.group-count.soon{color:var(--gold); background:var(--gold-wash); border-color:transparent}
.chev{flex:none; color:var(--muted); transition:transform .2s; font-size:11px}
.group.collapsed .chev{transform:rotate(-90deg)}
.group-items{display:flex; flex-direction:column; gap:1px; padding:2px 6px 8px 30px}
.group.collapsed .group-items{display:none}
.nav-item{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px;
  font-size:12.5px; color:var(--ink-soft); cursor:pointer}
.nav-item:hover{background:var(--surface-2); color:var(--ink)}
.nav-item.current{background:var(--surface-2); color:var(--ink); font-weight:600}
.nav-item.add{color:var(--accent); font-weight:600}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--line)}
.dot.GREEN{background:var(--good)} .dot.AMBER{background:var(--warn)}
.dot.RED{background:var(--crit)} .dot.DONE{background:var(--info)}
.rail-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--line-soft)}
.backstage{display:flex; align-items:center; gap:9px; padding:9px; border-radius:var(--radius-sm);
  font-size:12.5px; color:var(--muted)}
.backstage:hover{background:var(--surface-2); color:var(--ink)}
.backstage .group-icon{width:22px; height:22px; font-size:12px}

/* ---------- Main ---------- */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--paper) 84%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:12px 24px}
.top-row{display:flex; align-items:center; gap:14px}
.hamburger{display:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; font-size:16px}
.crumbs{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crumbs b{color:var(--ink); font-weight:600}
.search{flex:1; max-width:420px; position:relative}
.search input{width:100%; font-family:inherit; font-size:13px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 12px 9px 34px}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.search .s-icon{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px}
.search .s-kbd{position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-family:var(--mono)}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:9px}
.icon-btn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); cursor:pointer; display:grid; place-items:center; font-size:15px; position:relative}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.badge{position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--crit); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--surface); font-variant-numeric:tabular-nums}
.usermenu{position:relative}
.user-chip{display:flex; align-items:center; gap:8px; padding:4px 10px 4px 5px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); cursor:pointer}
.avatar{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:12px; font-weight:700; font-family:var(--serif)}
.user-chip .u-name{font-size:12.5px; font-weight:600}
.user-chip .u-role{font-size:10.5px; color:var(--muted)}
.menu{position:absolute; right:0; top:calc(100% + 8px); min-width:210px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; display:none; z-index:50}
.menu.open{display:block}
.menu a,.menu button{display:flex; width:100%; align-items:center; gap:10px; padding:9px 11px; border-radius:8px;
  font-size:13px; color:var(--ink-soft); background:none; border:none; cursor:pointer; font-family:inherit; text-align:left}
.menu a:hover,.menu button:hover{background:var(--surface-2); color:var(--ink)}
.menu .sep{height:1px; background:var(--line-soft); margin:5px 2px}

.content{padding:24px; display:flex; flex-direction:column; gap:20px; max-width:1180px; width:100%}

/* Stepper */
.stepper-wrap{border-bottom:1px solid var(--line); padding:14px 24px 0; position:sticky; top:59px; z-index:20;
  background:color-mix(in srgb,var(--paper) 84%, transparent); backdrop-filter:blur(10px)}
.stepper{display:flex; overflow-x:auto; scrollbar-width:thin}
.step{flex:none; display:flex; align-items:center; gap:9px; padding:9px 15px 13px; cursor:pointer;
  border-bottom:2.5px solid transparent; color:var(--muted); white-space:nowrap}
.step:hover{color:var(--ink)}
.step.current{color:var(--ink); border-bottom-color:var(--accent)}
.step-num{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11.5px; font-weight:700; border:1.5px solid var(--line); background:var(--surface); font-variant-numeric:tabular-nums}
.step.current .step-num{border-color:var(--accent); background:var(--accent); color:#fff}
.step.done .step-num{border-color:var(--good); background:var(--good); color:#fff}
.step-txt{font-size:12.5px; font-weight:600; display:flex; flex-direction:column; line-height:1.25}
.step-txt small{font-weight:500; font-size:10px; color:var(--muted)}

/* Chips / pills */
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:600; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft)}
.chip .cd{width:7px; height:7px; border-radius:50%}
.chip.GREEN,.chip.good{background:var(--good-wash); color:var(--good); border-color:transparent}
.chip.AMBER,.chip.warn{background:var(--warn-wash); color:var(--warn); border-color:transparent}
.chip.RED,.chip.crit{background:var(--crit-wash); color:var(--crit); border-color:transparent}
.chip.DONE,.chip.info{background:var(--info-wash); color:var(--info); border-color:transparent}
.chip.accent{background:var(--accent-wash); color:var(--accent-ink); border-color:transparent}

/* Page header */
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.page-title{font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:.2px; margin:0}
.page-sub{font-size:13.5px; color:var(--muted); margin:4px 0 0}
.page-head .spacer{flex:1}

/* Cards / hero */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.hero{padding:20px 22px; display:flex; align-items:center; gap:18px}
.hero-avatar{width:52px; height:52px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--gold-wash); color:var(--gold); font-family:var(--serif); font-size:22px; font-weight:700}
.hero-main{flex:1; min-width:0}
.hero-title{font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.2px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:7px}
.ring-wrap{flex:none; text-align:center}
.ring-label{font-size:10.5px; color:var(--muted); margin-top:2px}

/* Client list (onboarding index) */
.client-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.client-card{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer;
  transition:transform .1s, box-shadow .15s, border-color .15s}
.client-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--accent)}
.cc-top{display:flex; align-items:center; gap:12px}
.cc-avatar{width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink); font-family:var(--serif); font-size:18px; font-weight:700}
.cc-name{font-size:15px; font-weight:700}
.cc-parent{font-size:11.5px; color:var(--muted)}
.cc-meta{display:flex; align-items:center; justify-content:space-between; gap:8px}
.cc-stage{font-size:12px; color:var(--ink-soft)}
.cc-bar{height:6px; border-radius:999px; background:var(--line-soft); overflow:hidden}
.cc-bar > i{display:block; height:100%; border-radius:999px; background:var(--accent)}

/* Empty / coming soon */
.empty{padding:48px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.empty-badge{width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink); font-size:28px}
.empty h2{font-family:var(--serif); font-size:22px; margin:4px 0 0}
.empty p{font-size:14px; color:var(--muted); max-width:52ch; margin:0}
.empty .chip{margin-top:4px}

/* Placeholder step body (slice 1) */
.placeholder{padding:22px; border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--surface-2);
  display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--ink-soft)}
.placeholder b{color:var(--ink)}

/* Buttons */
.btn{font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; border-radius:11px;
  padding:10px 17px; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px;
  transition:transform .08s, box-shadow .15s, background .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-ink); box-shadow:var(--shadow-lg)}
.btn-ghost{background:var(--surface); color:var(--ink-soft); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* Mobile off-canvas */
.scrim{display:none; position:fixed; inset:0; background:rgba(15,16,22,.45); z-index:39}
.scrim.open{display:block}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; width:280px; transform:translateX(-100%); transition:transform .22s}
  .sidebar.open{transform:translateX(0)}
  .hamburger{display:grid; place-items:center}
  .search{display:none}
  .stepper-wrap{top:59px}
  .user-chip .u-name,.user-chip .u-role{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Slice 2: guided stage screens ---------- */
.flash{background:var(--good-wash); color:var(--good); border:1px solid transparent; border-radius:12px;
  padding:12px 16px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow)}
.stage-card{padding:22px}
.stage-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:6px}
.stage-head .eyebrow{font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); font-weight:700}
.stage-title{font-family:var(--serif); font-size:21px; font-weight:700; margin:5px 0 0}
.stage-head .chip{margin-left:auto; flex:none}
.stage-intro{font-size:13.5px; color:var(--muted); max-width:70ch; margin:2px 0 18px}

.stage-form{display:flex; flex-direction:column; gap:20px}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){ .field-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-soft)}
.field .req{color:var(--crit)} .field .opt{color:var(--muted); font-weight:500}
.field-help{font-size:11.5px; color:var(--muted); margin-top:-2px}
.field-err{font-size:11.5px; color:var(--crit); font-weight:600}
/* Form controls. `.input` is the canonical control class; `.field` on an actual
   control element (input/select/textarea) is treated identically, so the two are
   interchangeable and a stray `class="field"` on a control no longer renders native.
   `.field` on a <div> stays a flex label+control wrapper (rule above). */
.input,
input.field, select.field, textarea.field{
  font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:10px 13px; width:100%; display:block}
.input:focus,
input.field:focus, select.field:focus, textarea.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.input::placeholder,
input.field::placeholder, textarea.field::placeholder{color:var(--muted)}
textarea.input, textarea.field{resize:vertical; min-height:76px}

.field-group{display:flex; flex-direction:column; gap:12px}
.field-group-label{font-size:12px; font-weight:700; color:var(--ink); letter-spacing:.2px}
.field-group-label span{color:var(--muted); font-weight:500}

/* Segmented radio (no-JS-safe) */
.seg-radio{display:flex; flex-wrap:wrap; gap:8px}
.seg-opt{position:relative; cursor:pointer}
.seg-opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg-opt span{display:inline-flex; align-items:center; padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft);
  font-size:12.5px; font-weight:600; transition:all .14s}
.seg-opt input:checked ~ span{background:var(--accent); color:#fff; border-color:transparent}
.seg-opt input:focus-visible ~ span{box-shadow:0 0 0 3px var(--accent-wash)}
.seg-opt:hover span{border-color:var(--accent)}

/* Toggle switch */
.toggle-row{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:11px;
  border:1px solid var(--line-soft); background:var(--surface-2)}
.toggle-row .tr-main{flex:1; min-width:0}
.tr-name{font-size:13.5px; font-weight:600} .tr-sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.toggle{position:relative; width:44px; height:26px; flex:none; cursor:pointer}
.toggle input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.toggle .track{position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .22s}
.toggle .knob{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .22s}
.toggle input:checked ~ .track{background:var(--accent)}
.toggle input:checked ~ .knob{transform:translateX(18px)}
.toggle input:focus-visible ~ .track{box-shadow:0 0 0 3px var(--accent-wash)}

.form-actions,.stage-nav{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:4px}
.stage-nav{margin-top:20px; border-top:1px solid var(--line-soft); padding-top:16px}
.save-hint{font-size:11.5px; color:var(--muted)}

/* Document checklist */
.doc-list{display:flex; flex-direction:column; gap:8px}
.doc-row{display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:11px;
  border:1px solid var(--line-soft); background:var(--surface-2)}
.doc-icon{width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); font-size:14px}
.doc-main{flex:1; min-width:0}
.doc-name{font-size:13.5px; font-weight:600}
.doc-sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.doc-row .chip{flex:none}
.doc-note{display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:13px 15px;
  border-radius:11px; background:var(--surface-2); border:1px dashed var(--line); font-size:12px; color:var(--muted)}
.doc-note b{color:var(--ink-soft)}

/* ---------- Slice 3: change log + reopen ---------- */
.flash-error{background:var(--crit-wash); color:var(--crit)}

.show-grid{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start}
.show-main{display:flex; flex-direction:column; gap:20px; min-width:0}
@media (max-width:1040px){ .show-grid{grid-template-columns:1fr} .activity{order:-1} }

/* Activity / change-log panel */
.activity{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; position:sticky; top:150px}
.act-head{padding:15px 18px 12px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:8px}
.act-head h3{font-family:var(--serif); font-size:15px; margin:0; font-weight:700}
.act-head .chip{margin-left:auto; font-size:10px; padding:3px 8px}
.act-empty{padding:20px 18px; font-size:12.5px; color:var(--muted)}
.timeline{padding:8px 18px 18px; display:flex; flex-direction:column; max-height:60vh; overflow-y:auto}
.tl-item{display:flex; gap:12px; padding:11px 0; position:relative}
.tl-item:not(:last-child)::before{content:""; position:absolute; left:11px; top:29px; bottom:-11px; width:1.5px; background:var(--line)}
.tl-node{width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; z-index:1}
.tl-node.good{background:var(--good-wash); color:var(--good)}
.tl-node.accent{background:var(--accent-wash); color:var(--accent-ink)}
.tl-node.warn{background:var(--warn-wash); color:var(--warn)}
.tl-node.crit{background:var(--crit-wash); color:var(--crit)}
.tl-node.neutral{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.tl-main{min-width:0}
.tl-text{font-size:12.5px; line-height:1.4}
.tl-time{font-size:11px; color:var(--muted); margin-top:2px}
.tl-time b{color:var(--ink-soft); font-weight:600}
/* Clickable notification rows — deep-link straight to the work. */
a.tl-link{text-decoration:none; color:inherit; border-radius:10px; margin:0 -10px; padding-left:10px; padding-right:10px; transition:background .12s ease}
a.tl-link:hover{background:var(--surface-2)}
a.tl-link .tl-go{color:var(--accent); font-weight:700; opacity:0; transition:opacity .12s ease}
a.tl-link:hover .tl-go{opacity:1}

/* Reopen-with-sign-off */
.reopen{margin:-2px 0 6px; border:1px solid var(--line-soft); border-radius:11px; background:var(--surface-2); overflow:hidden}
.reopen summary{cursor:pointer; padding:11px 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  list-style:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.reopen summary::-webkit-details-marker{display:none}
.reopen summary:hover{color:var(--ink)}
.reopen .reopen-by{color:var(--muted); font-weight:500}
.reopen[open] summary{border-bottom:1px solid var(--line-soft)}
.reopen-body{padding:14px; display:flex; flex-direction:column; gap:10px}
.reopen-body p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5}
.reopen-body label{font-size:12px; font-weight:600; color:var(--ink-soft)}
.reopen-body form{display:flex; flex-direction:column; gap:10px}
.reopen-body .btn{align-self:flex-start}

/* ---------- Slice 4: smart derivation ---------- */
/* "Next up" derived-guidance banner */
.nextup{display:flex; align-items:center; gap:15px; padding:16px 18px; border-radius:var(--radius);
  background:linear-gradient(120deg,var(--accent-wash),var(--surface)); border:1px solid var(--accent);
  box-shadow:var(--shadow); text-decoration:none; transition:transform .1s, box-shadow .15s}
.nextup:hover{transform:translateY(-1px); box-shadow:var(--shadow-lg)}
.nextup.done{background:var(--good-wash); border-color:var(--good); cursor:default}
.nextup.done:hover{transform:none; box-shadow:var(--shadow)}
.nu-badge{width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:18px; font-weight:700}
.nextup.done .nu-badge{background:var(--good)}
.nu-main{flex:1; min-width:0}
.nu-headline{font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nu-owner{font-size:10.5px; font-weight:600; color:var(--accent-ink); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px}
.nu-detail{font-size:12.5px; color:var(--ink-soft); margin-top:3px}
.nu-cta{flex:none; font-size:13px; font-weight:700; color:var(--accent-ink)}

/* Inputs progress meter */
.progress-meter{padding:14px 16px; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--line-soft); display:flex; flex-direction:column; gap:8px}
.pm-top{display:flex; align-items:center; justify-content:space-between}
.pm-label{font-size:12.5px; font-weight:600; color:var(--ink-soft)}
.pm-count{font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.pm-bar{height:8px; border-radius:999px; background:var(--line); overflow:hidden}
.pm-bar > i{display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .3s}
.pm-hint{font-size:11.5px; color:var(--muted)}
.pm-hint.done{color:var(--good); font-weight:600}

/* "Feeds into" derivation tag */
.feeds-tag{font-size:10px; font-weight:600; color:var(--gold); background:var(--gold-wash);
  border-radius:999px; padding:2px 8px; margin-left:6px; white-space:nowrap; letter-spacing:.2px}

/* Index card next-action hint */
.cc-next{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.4}

/* ---------- Slice 5: composable dashboard ---------- */
.customize{position:relative}
.customize > summary{list-style:none; cursor:pointer}
.customize > summary::-webkit-details-marker{display:none}
.cust-panel{position:absolute; right:0; top:calc(100% + 8px); width:320px; z-index:20;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:12px; display:flex; flex-direction:column; gap:2px}
.cust-intro{font-size:11.5px; color:var(--muted); margin:2px 4px 8px}
.cust-row{display:flex; gap:11px; align-items:flex-start; padding:9px 10px; border-radius:9px; cursor:pointer}
.cust-row:hover{background:var(--surface-2)}
.cust-row input{margin-top:2px; width:16px; height:16px; accent-color:var(--accent); flex:none}
.cust-text{display:flex; flex-direction:column; min-width:0}
.cust-text b{font-size:12.5px; font-weight:600}
.cust-text small{font-size:11px; color:var(--muted); line-height:1.35}

.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px; align-items:start}
.widget{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; transition:opacity .15s}
.widget.dragging{opacity:.4}
.w-head{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line-soft)}
.w-head .grip{cursor:grab; color:var(--muted); opacity:.55; font-size:15px}
.w-head .grip:active{cursor:grabbing}
.w-head h3{font-family:var(--serif); font-size:15px; margin:0; font-weight:700}
.w-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px}
.w-empty{font-size:12.5px; color:var(--muted); padding:6px 0}

/* Stat tiles */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.stat{padding:12px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line-soft); text-align:center}
.stat b{display:block; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; font-family:var(--serif)}
.stat span{font-size:10.5px; color:var(--muted)}
.stat.good b{color:var(--good)} .stat.warn b{color:var(--warn)} .stat.crit b{color:var(--crit)}
.big-stat{text-align:center; padding:10px 0 4px}
.big-stat b{display:block; font-size:42px; font-weight:800; font-family:var(--serif); line-height:1; color:var(--accent-ink)}
.big-stat > span{font-size:12.5px; color:var(--ink-soft)}
.big-stat .bs-sub{font-size:11px; color:var(--muted); margin-top:8px}
.w-count{font-size:22px; font-weight:800; font-family:var(--serif); color:var(--accent-ink)}
.w-count small{font-size:12px; font-weight:500; color:var(--muted); font-family:var(--sans)}

/* Dashboard list items */
.dash-item{display:block; padding:10px 12px; border-radius:10px; background:var(--surface-2);
  border:1px solid var(--line-soft); text-decoration:none; color:inherit}
a.dash-item:hover{border-color:var(--accent)}
.di-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.di-name{font-size:13px; font-weight:600}
.di-detail{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.4}
.widget .timeline{padding:0; max-height:340px}

/* ---------- Slice 6: in-app document workspace ---------- */
.readonly-doc{display:flex; flex-direction:column; gap:16px}
.ro-section{display:flex; flex-direction:column; gap:4px}
.ro-label{font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--accent)}
.ro-value{font-size:13.5px; color:var(--ink); white-space:pre-wrap; line-height:1.55}

.ws-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:8px}
.ws-hint{font-size:12px; color:var(--muted); flex-basis:100%}
.ws-act{position:relative}
.ws-act > summary{list-style:none; cursor:pointer}
.ws-act > summary::-webkit-details-marker{display:none}
.btn-ghost.danger{color:var(--crit)}
.btn-ghost.danger:hover{border-color:var(--crit); color:var(--crit)}
.ws-form{position:absolute; left:0; top:calc(100% + 8px); z-index:20; width:320px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:14px; display:flex; flex-direction:column; gap:9px}
.ws-form label{font-size:12px; font-weight:600; color:var(--ink-soft)}
.ws-form p{margin:0; font-size:12px; color:var(--muted); line-height:1.5}
.ws-form .ws-warn{color:var(--crit); font-weight:600}
.ws-check{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-soft); font-weight:500}
.ws-check input{margin-top:2px; accent-color:var(--accent)}

/* Upload field — current file line */
.file-current{font-size:12px; color:var(--muted); padding:2px 0}
.file-current b{color:var(--ink-soft)}
input[type="file"].input{padding:8px 10px; font-size:12.5px}

/* ---------- Slice 6d: commercial docs (repeater + checklist) ---------- */
.checklist{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px 14px}
.repeater{display:flex; flex-direction:column; gap:10px}
.rep-rows{display:flex; flex-direction:column; gap:8px}
.rep-row{display:flex; gap:10px; align-items:center}
.rep-row .input:first-child{flex:1}
.rep-qty{width:90px; flex:none}
.rep-del{flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); cursor:pointer; font-size:13px}
.rep-del:hover{border-color:var(--crit); color:var(--crit)}
.rep-add{align-self:flex-start}

/* ---------- Slice 6f: invoice computed totals ---------- */
.rep-amt{width:150px; flex:none}
.inv-summary{display:flex; flex-direction:column; gap:2px; max-width:420px}
.inv-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.inv-row span{color:var(--ink-soft)}
.inv-row b{font-variant-numeric:tabular-nums}
.inv-row.total{border-bottom:none; margin-top:2px; font-size:15px}
.inv-row.total b{color:var(--accent-ink); font-family:var(--serif)}
.inv-words{margin-top:8px; font-size:12px; color:var(--muted); font-style:italic}
.inv-note{margin-top:10px; font-size:11.5px; color:var(--muted)}

/* ---------- Notifications / search / team ---------- */
.team-list{display:flex; flex-direction:column}
.team-row{display:flex; align-items:center; gap:13px; padding:13px 20px; border-bottom:1px solid var(--line-soft)}
.team-row:last-child{border-bottom:none}
.team-row .avatar{width:34px; height:34px; font-size:14px; flex:none}
.team-row .tr-main{flex:1; min-width:0}
.team-role{flex:none}
.team-role .input{padding:7px 10px; font-size:12.5px}

/* ---------- Excel data forms bar ---------- */
.sheet-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; margin-bottom:16px;
  border:1px solid var(--line-soft); border-radius:12px; background:var(--surface-2)}
.sheet-bar .sb-icon{width:32px; height:32px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--gold-wash); color:var(--gold); font-size:15px}
.sheet-bar .sb-text{flex:1; min-width:180px; display:flex; flex-direction:column; line-height:1.35}
.sheet-bar .sb-text b{font-size:13px}
.sheet-bar .sb-text span{font-size:11.5px; color:var(--muted)}
.sheet-bar .sb-upload{margin:0}
.sheet-bar label.btn{cursor:pointer; margin:0}

/* ---------- "Ready to go live" panel ---------- */
.golive{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; display:flex; align-items:center; gap:15px; flex-wrap:wrap}
.golive.ready{border-color:var(--good); background:var(--good-wash)}
.golive.done{border-color:var(--info); background:var(--info-wash)}
.golive .gl-head{display:flex; align-items:center; gap:15px; flex:1; min-width:220px}
.golive .gl-badge{width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--good); color:#fff; font-size:19px}
.golive.done .gl-badge{background:var(--info)}
.golive .gl-badge.muted{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.golive .gl-main{flex:1; min-width:0}
.golive .gl-title{font-family:var(--serif); font-size:17px; font-weight:700}
.golive .gl-sub{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.golive .gl-note{font-size:12px; color:var(--muted)}
.gl-checklist{flex-basis:100%; margin:6px 0 0; padding:0 0 0 4px; list-style:none;
  display:flex; flex-direction:column; gap:6px}
.gl-checklist li{font-size:13px; color:var(--ink-soft)}

/* Inline "not yours to start/open" note on doc rows */
.doc-note-inline{font-size:11.5px; color:var(--muted); font-style:italic; white-space:nowrap; padding-right:4px}

/* ---------- Master lists (admin) ---------- */
.mtable-wrap{overflow-x:auto}
.mtable{width:100%; border-collapse:collapse; font-size:13px}
.mtable th{text-align:left; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:11px 16px; border-bottom:1px solid var(--line)}
.mtable td{padding:11px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); vertical-align:top}
.mtable tr:last-child td{border-bottom:none}
.mtable td:first-child{font-weight:600; color:var(--ink)}
.mrow-actions{display:flex; gap:6px; justify-content:flex-end; align-items:center}
.btn-sm{padding:5px 11px; font-size:12px; border-radius:8px}
.mempty{text-align:center; color:var(--muted); padding:22px}

/* ============ Media Monitoring ============ */
.ph-actions{margin-left:auto; display:flex; gap:8px; align-items:center}
.media-cols{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start}
@media (max-width:900px){ .media-cols{grid-template-columns:1fr} }
.pad{padding:16px 18px}
.card.pad{padding:16px 18px}
.card .pad-x{padding:14px 18px}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.card-title{font-size:14px; font-weight:700; margin:0; font-family:var(--serif)}
.card-sub{font-size:11px; color:var(--muted)}
.card-sub.link{color:var(--accent); text-decoration:none}
.muted-note{color:var(--muted); font-size:12.5px; padding:6px 2px}
.muted-note.pad{padding:14px 18px}
.cell-sub{font-size:11px; color:var(--muted); font-weight:400; margin-top:2px}
.clip-link{color:var(--ink); text-decoration:none}
.clip-link:hover{color:var(--accent); text-decoration:underline}

/* Share of voice */
.sov-row{display:grid; grid-template-columns:1fr 1.2fr auto; gap:10px; align-items:center; padding:6px 0}
.sov-name{font-size:12.5px; font-weight:600; color:var(--ink)}
.sov-type{font-size:10px; color:var(--muted); font-weight:500; background:var(--surface-2); border:1px solid var(--line-soft); padding:1px 6px; border-radius:6px; margin-left:4px}
.sov-type.is-client{color:var(--accent-ink); background:var(--accent-wash); border-color:transparent}
.sov-track{background:var(--surface-2); border-radius:6px; height:14px; overflow:hidden}
.sov-fill{background:#9aa5b1; height:100%; border-radius:6px}
.sov-fill.is-client{background:var(--accent)}
.sov-num{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

/* Clip + watch lists */
.clip-list{display:flex; flex-direction:column}
.clip-item{display:block; padding:11px 18px; border-top:1px solid var(--line-soft); text-decoration:none; color:inherit}
.clip-item:first-child{border-top:none}
.clip-item:hover{background:var(--surface-2)}
.clip-head{font-size:13px; font-weight:600; color:var(--ink); line-height:1.35}
.clip-meta{font-size:11.5px; color:var(--muted); margin-top:3px}
.watch-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 18px; border-top:1px solid var(--line-soft)}
.watch-item:first-child{border-top:none}

/* Popover forms (add brand / new watch) */
.pop{position:relative}
.pop > summary{list-style:none; cursor:pointer}
.pop > summary::-webkit-details-marker{display:none}
.pop-form{position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:280px; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg,0 10px 30px rgba(0,0,0,.18)); padding:14px}
.check-list{display:flex; flex-direction:column; gap:4px; max-height:160px; overflow:auto; border:1px solid var(--line-soft);
  border-radius:8px; padding:8px}
.check-item{font-size:12.5px; display:flex; gap:7px; align-items:center; color:var(--ink-soft)}

/* Filters */
.filter-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
@media (max-width:1100px){ .filter-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .filter-grid{grid-template-columns:repeat(2,1fr)} }
.filter-actions{display:flex; gap:8px; margin-top:12px}
.field-inline, .field.field-inline{padding:4px 8px; font-size:12px; height:auto; width:auto}
.inline-sentiment{margin:0}

/* Volume sparkline */
.spark{display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:8px}
.spark-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0}
.spark-bar{width:70%; max-width:26px; background:var(--accent); border-radius:4px 4px 0 0}
.spark-lbl{font-size:9px; color:var(--muted); margin-top:5px; white-space:nowrap; transform:rotate(-45deg); transform-origin:top left; height:22px}

/* Rank rows */
.rank-row{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px}
.rank-row:last-child{border-bottom:none}
.rank-row b{font-variant-numeric:tabular-nums; color:var(--accent-ink)}

/* Media — New search form */
.search-form .field-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){ .search-form .field-grid-2{grid-template-columns:1fr} }
.search-form .fg-span-2{grid-column:1 / -1}
.search-form .req{color:var(--crit)}
.search-note{margin:16px 0 4px; padding:10px 12px; background:var(--info-wash); border:1px solid var(--line-soft);
  border-radius:10px; font-size:12px; color:var(--ink-soft)}

/* Media source chip (web vs news) */
.src-chip{display:inline-block; font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:5px; padding:0 5px; margin-left:4px; vertical-align:middle}

/* ============ Agency dashboard (department-pooled) ============ */
.w-dept{margin-left:auto; font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:6px; padding:2px 7px; white-space:nowrap}
.cust-dept{font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); font-weight:700;
  margin:12px 0 4px; padding-top:8px; border-top:1px solid var(--line-soft)}
.cust-dept:first-of-type{border-top:none; padding-top:0; margin-top:2px}
.w-line{font-size:12.5px; color:var(--ink-soft); padding:10px 2px 4px}
.w-line b{color:var(--accent-ink)}
.commercial-rows{display:flex; flex-direction:column}
.cr-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line-soft)}
.cr-row:last-child{border-bottom:none}
.cr-label{font-size:12.5px; font-weight:600; color:var(--ink)}
.cr-nums{font-size:12px; color:var(--muted)}
.cr-nums b{font-size:15px; color:var(--accent-ink); font-family:var(--serif); font-variant-numeric:tabular-nums}
.tl-count{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ============ Dashboard charts (self-contained SVG) ============ */
.chart-donut{display:flex; align-items:center; gap:16px; padding:8px 2px}
.donut-svg{width:104px; height:104px; flex:none}
.donut-track{stroke:var(--surface-2)}
.donut-center{font-size:9px; font-weight:800; fill:var(--ink); text-anchor:middle; dominant-baseline:central; font-family:var(--serif)}
.donut-legend{display:flex; flex-direction:column; gap:7px; min-width:0}
.dl-item{font-size:12.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px}
.dl-item i{width:10px; height:10px; border-radius:3px; flex:none}
.dl-item b{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink)}

.chart-gauge{padding:6px 0 2px; text-align:center}
.gauge-svg{width:100%; max-width:190px; height:auto}
.gauge-track{stroke:var(--surface-2)}
.gauge-value{font-size:17px; font-weight:800; fill:var(--ink); text-anchor:middle; font-family:var(--serif)}
.gauge-label{font-size:11.5px; color:var(--muted); margin-top:2px}

.chart-hbars{display:flex; flex-direction:column; gap:9px; padding:6px 2px}
.hbar-row{display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center}
.hbar-label{font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hbar-track{background:var(--surface-2); border-radius:6px; height:16px; overflow:hidden}
.hbar-fill{height:100%; border-radius:6px; min-width:2px}
.hbar-val{font-size:12px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.hbar-val small{font-weight:500; color:var(--muted)}

.chart-trend{padding:6px 0 2px}
.trend-svg{width:100%; height:52px; display:block}
.trend-area{fill:var(--accent-wash)}
.trend-line{stroke:var(--accent)}
.trend-axis{display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:2px}

/* ============ Dashboard — Needs attention band ============ */
.attn-band{margin-top:16px; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--crit); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 14px}
.attn-head{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.attn-title-lead{font-weight:700; font-size:13.5px; color:var(--ink)}
.attn-count{font-size:11px; font-weight:700; color:var(--crit); background:var(--crit-wash);
  border-radius:999px; padding:1px 9px}
.attn-scroll{display:flex; gap:10px; overflow-x:auto; padding-bottom:2px}
.attn-card{flex:0 0 240px; display:block; text-decoration:none; color:inherit; background:var(--surface-2);
  border:1px solid var(--line-soft); border-radius:11px; padding:11px 12px; transition:background .12s, border-color .12s}
.attn-card:hover{background:var(--accent-wash); border-color:transparent}
.attn-card.high{border-left:3px solid var(--crit)}
.attn-card.medium{border-left:3px solid var(--warn)}
.attn-card-title{font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3}
.attn-card-detail{font-size:11.5px; color:var(--muted); margin-top:3px}
.attn-card-dept{font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-top:6px}

/* ============ Dashboard — business overview + templates + print ============ */
.ovw-band{display:flex; gap:20px; align-items:center; margin-top:16px; padding:16px 18px;
  background:linear-gradient(180deg, var(--accent-wash), var(--surface)); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow)}
.ovw-left{flex:1; min-width:0}
.ovw-eyebrow{font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--accent-ink); font-weight:700; margin-bottom:6px}
.ovw-sentences p{margin:2px 0; font-size:14px; color:var(--ink); line-height:1.5}
.ovw-kpis{display:flex; gap:10px; flex:none}
.ovw-kpi{text-align:center; background:var(--surface); border:1px solid var(--line-soft); border-radius:11px;
  padding:10px 14px; min-width:82px}
.ovw-kpi b{display:block; font-size:24px; font-weight:800; font-family:var(--serif); color:var(--ink); font-variant-numeric:tabular-nums}
.ovw-kpi span{font-size:10px; color:var(--muted)}
.ovw-kpi.crit b{color:var(--crit)} .ovw-kpi.good b{color:var(--good)}
@media (max-width:820px){ .ovw-band{flex-direction:column; align-items:stretch} .ovw-kpis{flex-wrap:wrap} }

.tmpl-btn{display:block; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--line-soft);
  background:var(--surface); border-radius:8px; font-size:12.5px; color:var(--ink); cursor:pointer; margin-bottom:6px}
.tmpl-btn:hover{background:var(--accent-wash); border-color:transparent}

/* Print / download-to-PDF: show only the report content */
.print-header{display:none}
@media print{
  .sidebar, .topbar, .no-print, .scrim, .skip-link, .customize, .pop, .w-head .grip{display:none !important}
  .app{display:block}
  .main{display:block}
  .content{padding:0 !important; max-width:none !important}
  .print-header{display:block; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid #d97706}
  .print-header .ph-brand{font-family:var(--serif); font-size:18px; font-weight:700}
  .print-header .ph-meta{font-size:11px; color:#555}
  .dash-grid{grid-template-columns:1fr 1fr}
  .widget, .ovw-band, .attn-band, .attn-card{break-inside:avoid; page-break-inside:avoid; box-shadow:none}
  .attn-scroll{flex-wrap:wrap}
  body{background:#fff}
}

/* WIP pack delivery-vs-scope status pills */
.wip-pill{font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap}
.wip-pill.over{color:var(--good); background:var(--good-wash)}
.wip-pill.on{color:var(--accent-ink); background:var(--accent-wash)}
.wip-pill.behind{color:var(--crit); background:var(--crit-wash)}
.wip-pill.manual{color:var(--muted); background:var(--surface-2); border:1px solid var(--line-soft)}

/* Media list (Media & Competition Mapping — Skribe import) */
.ml-import{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ml-count{margin-top:14px; font-weight:600; font-size:13px; color:var(--muted)}
.ml-empty{margin-top:12px; padding:14px 16px; background:var(--surface-2); border:1px dashed var(--line-soft); border-radius:10px; color:var(--muted); font-size:14px}
.crm-dnc-tag{display:inline-block; font-size:11px; font-weight:700; color:var(--crit); background:var(--crit-wash); padding:1px 7px; border-radius:999px; vertical-align:middle}
.crm-row-dnc{opacity:.72}
.crm-row-dnc td{background:var(--crit-wash)}

/* Media call tracker */
.ctrack-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.ctrack-upload{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto}
.field-sm, .field.field-sm{padding:6px 10px; font-size:13px; height:auto; width:auto}
.ctrack-summary{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.ctrack-chip{display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:600; color:var(--muted); background:var(--surface-2); border:1px solid var(--line-soft); padding:4px 10px; border-radius:999px}
.ctrack-chip b{color:var(--ink)}

/* Content Engine workspace — brief (details) stacked OVER the draft */
.ce-grid{display:grid; grid-template-columns:1fr; gap:16px; align-items:start}
.ce-brief .pad{display:flex; flex-direction:column; gap:2px}
.ce-draft{display:flex; flex-direction:column; gap:16px}
.ce-toolbar{display:flex; gap:2px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--line-soft); background:var(--surface-2)}
.ce-toolbar button{min-width:30px; height:28px; padding:0 8px; border:1px solid transparent; background:transparent; color:var(--ink); border-radius:6px; cursor:pointer; font-size:13px; line-height:1}
.ce-toolbar button:hover{background:var(--surface); border-color:var(--line-soft)}
.ce-editor{min-height:360px; padding:18px 22px; outline:none; font-size:15px; line-height:1.6; color:var(--ink)}
.ce-editor:focus{box-shadow:inset 0 0 0 2px var(--accent-wash)}
.ce-editor h1{font-size:22px; margin:0 0 10px}
.ce-editor h2{font-size:18px; margin:16px 0 8px}
.ce-editor h3{font-size:15px; margin:14px 0 6px; color:var(--muted)}
.ce-editor blockquote{border-left:3px solid var(--accent); margin:12px 0; padding:4px 0 4px 14px; color:var(--muted); font-style:italic}
.ce-editor p{margin:0 0 10px}
.ce-editor a{color:var(--accent-ink)}
.ce-kernel-body{display:flex; flex-direction:column; gap:14px}
.ce-k-block{font-size:13px}
.ce-k-label{font-family:var(--mono,ui-monospace,monospace); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; font-weight:600}
.ce-k-block p{margin:0 0 4px; color:var(--ink)}
.ce-src{color:var(--muted)}
.ce-actions{display:flex; align-items:center; gap:12px; margin-top:16px}
@media (max-width:860px){ .ce-grid{grid-template-columns:1fr} }

/* Content-type brief builder */
.cb-head{display:flex; gap:8px; margin:8px 0 4px; font-size:11px; color:var(--muted); font-weight:600}
.cb-row{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.cb-label{flex:2 1 0; min-width:120px}
.cb-key{flex:1 1 0; min-width:80px}
.cb-type{flex:0 0 130px}
.cb-help{flex:2 1 0; min-width:120px}
.cb-opts{flex:2 1 0; min-width:120px}
.cb-req{flex:0 0 auto; white-space:nowrap; font-size:12px; color:var(--muted)}
.cb-head .cb-req{width:auto}
.cb-row .rep-del{flex:0 0 24px; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:13px}
.cb-row .rep-del:hover{color:var(--crit)}
@media (max-width:720px){ .cb-head{display:none} .cb-row{flex-wrap:wrap} }

/* ---- Account team (per-client PR-agency roles) ---- */
.team-card .card-head{padding-bottom:6px}
.acct-team{display:flex; flex-direction:column; margin:2px 0 4px}
.acct-row{display:flex; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line-soft)}
.acct-row:last-child{border-bottom:none}
.acct-avatar{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:13px; font-weight:700; font-family:var(--serif)}
.acct-who{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.acct-who b{font-size:13.5px}
.acct-who small{font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acct-role{flex:none}
.acct-remove{flex:none; border:none; background:transparent; color:var(--muted); cursor:pointer;
  font-size:13px; padding:4px 6px; border-radius:6px; line-height:1}
.acct-remove:hover{color:var(--crit); background:var(--crit-wash,rgba(220,80,80,.1))}
.acct-empty{color:var(--muted); font-size:13px; padding:6px 2px 10px}
.acct-note{color:var(--muted); font-size:12px; margin-top:8px}
.acct-add{margin-top:8px}
.acct-add>summary{display:inline-flex; list-style:none; cursor:pointer}
.acct-add>summary::-webkit-details-marker{display:none}
.acct-add-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:12px;
  padding:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px}
.acct-add-form .field{flex:1 1 180px; margin:0}
.acct-add-form .field label{display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px}

/* ---- "Send to" approver picker (Ask 3) ---- */
.submit-form{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.send-to{display:flex; flex-direction:column; gap:4px}
.send-to-label{font-size:11px; font-weight:600; color:var(--muted)}
.send-to .input{padding:7px 10px; font-size:12.5px; min-width:220px}

/* ---- Platform settings (integration keys, entered once) ---- */
.set-card{padding:20px 22px; margin-bottom:18px}
.set-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px}
.set-note{font-size:13px; color:var(--ink-soft); margin:4px 0 14px}
.set-note code, .set-form code{font-family:var(--mono,monospace); font-size:12px; background:var(--surface-2); padding:2px 6px; border-radius:5px}
.set-form{display:flex; flex-direction:column; gap:14px; max-width:520px}
.set-form .field{margin:0}
.set-actions{display:flex; gap:10px; align-items:center}
.set-foot{font-size:12px; color:var(--muted); margin:14px 0 0}
.set-soon .set-list{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.set-soon li{display:flex; align-items:center; gap:10px; font-size:13.5px; flex-wrap:wrap}
.set-int{font-weight:650}
.set-int-note{color:var(--muted); font-size:12.5px}

/* Content Engine — brief field wrapper (was unstyled → cramped) */
.fld{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.fld:last-child{margin-bottom:0}
.ce-brief .pad{gap:0}

/* Now that the brief spans the full width (stacked over the draft), lay its
   fields out in two columns — short fields sit side by side, long fields
   (textarea) and the title span the full width. Collapses to one column when
   the column (not the viewport) is tight. */
.ce-form .ce-brief .pad{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-content:start}
.ce-form .ce-brief .fld{margin-bottom:0}
.fld-wide{grid-column:1 / -1}
@container (max-width:560px){ .ce-form .ce-brief .pad{grid-template-columns:1fr} }

/* The brief and draft are always stacked now, so nothing here needs to collapse
   a side-by-side grid. `.show-main` stays a query container so the brief's field
   grid (above) can react to the column width — the Activity sidebar narrows it. */
.show-main{container-type:inline-size; min-width:0}
.ce-brief, .ce-draft{min-width:0}

/* ---------- Native sign-in (/login) — the /app front door ---------- */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1100px 560px at 50% -12%, var(--accent-wash), transparent), var(--paper)}
.auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:30px 30px 26px}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:18px; cursor:pointer}
.auth-brand:hover .auth-mark{border-color:var(--accent)}
.auth-brand:hover .auth-name{color:var(--accent-ink)}
.auth-mark{width:52px; height:52px; border-radius:13px; flex:none; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow)}
.auth-mark img{width:100%; height:100%; object-fit:contain; padding:5px}
.auth-name{font-family:var(--serif); font-size:18px; font-weight:700; line-height:1.1}
.auth-sub{font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-top:3px}
.auth-title{font-family:var(--serif); font-size:23px; text-align:center; margin:2px 0 4px}
.auth-lead{text-align:center; color:var(--muted); font-size:13px; margin:0 0 22px}
.auth-form{display:flex; flex-direction:column; gap:15px}
.auth-pw{position:relative}
.auth-pw .peek{position:absolute; right:7px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  color:var(--muted); font-size:15px; width:32px; height:32px; border-radius:8px; cursor:pointer; line-height:1}
.auth-pw .peek:hover{background:var(--surface-2)}
.auth-remember{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; user-select:none}
.auth-remember input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer}
.auth-form .btn-primary{width:100%; justify-content:center; padding:11px 14px; margin-top:2px}
.auth-foot{margin-top:18px; text-align:center; font-size:11px; color:var(--muted)}

/* ---------- Guided help — the "information cloud" tour (see tour.js) ---------- */
[data-tip]{position:relative}
.aa-newdot{position:absolute; top:4px; right:6px; width:9px; height:9px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 32%, transparent); z-index:3; pointer-events:none}
.group-head.aa-newdot, .group-head > .aa-newdot, .nav-item > .aa-newdot, .backstage > .aa-newdot{top:50%; transform:translateY(-50%); right:9px}
@media (prefers-reduced-motion: no-preference){
  .aa-pulse{animation:aa-pulse 1.8s ease-in-out infinite}
  @keyframes aa-pulse{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 42%, transparent)}
    50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 0%, transparent)}}
}

.aa-cloud{position:fixed; z-index:1200; width:280px; max-width:calc(100vw - 20px); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:14px 16px 15px;
  opacity:0; transform:translateY(6px) scale(.97); transition:opacity .16s ease, transform .18s ease; pointer-events:none}
.aa-cloud.show{opacity:1; transform:none}
.aa-cloud.first{border-top:3px solid var(--gold)}
.aa-tail{position:absolute; width:12px; height:12px; background:var(--surface); border:1px solid var(--line); transform:rotate(45deg)}
.aa-eyebrow{display:flex; align-items:center; gap:7px; margin-bottom:7px}
.aa-cdot{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.aa-cloud.first .aa-cdot{background:var(--gold)}
.aa-kind{font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-ink); font-weight:700}
.aa-cloud.first .aa-kind{color:var(--gold)}
.aa-new{margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-wash); border-radius:999px; padding:2px 8px; display:none}
.aa-cloud.first .aa-new{display:inline-block}
.aa-title{font-family:var(--serif); font-size:16px; margin:0 0 5px}
.aa-body{font-size:12.8px; color:var(--ink-soft); margin:0; line-height:1.55}
.aa-foot{margin-top:9px; font-size:11px; color:var(--muted); display:none; align-items:center; gap:6px}
.aa-foot .aa-key{font-family:var(--mono); border:1px solid var(--line); border-radius:5px; padding:0 6px; color:var(--ink-soft)}

.aa-help{position:fixed; right:20px; bottom:20px; z-index:1100; width:290px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; font-size:13px}
.aa-help-head{display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--line-soft)}
.aa-glyph{width:28px; height:28px; border-radius:8px; background:var(--accent-wash); color:var(--accent-ink); display:grid; place-items:center; font-size:15px; flex:none}
.aa-h-title{font-weight:700; font-size:13.5px}
.aa-h-sub{font-size:11px; color:var(--muted)}
.aa-min{margin-left:auto; border:0; background:transparent; color:var(--muted); font-size:17px; width:26px; height:26px; border-radius:7px; cursor:pointer; line-height:1}
.aa-min:hover{background:var(--surface-2)}
.aa-help-body{padding:13px 14px; display:flex; flex-direction:column; gap:13px}
.aa-help.min{width:auto}
.aa-help.min .aa-help-body, .aa-help.min .aa-h-sub{display:none}
.aa-prog{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted)}
.aa-prog b{color:var(--ink); font-variant-numeric:tabular-nums}
.aa-bar{height:7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line-soft); overflow:hidden; margin-top:6px}
.aa-fill{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); transition:width .35s ease}
.aa-seg{display:flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px}
.aa-seg button{flex:1; border:0; background:transparent; color:var(--ink-soft); font-size:11.5px; font-weight:600; padding:6px 8px; border-radius:7px; cursor:pointer}
.aa-seg button.on{background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow)}
.aa-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.aa-switch{width:42px; height:24px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); position:relative; padding:0; cursor:pointer}
.aa-switch::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow); transition:left .16s}
.aa-switch.on{background:var(--accent); border-color:transparent}
.aa-switch.on::after{left:21px}
.aa-ghost{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:9px; padding:8px 10px; font-size:12px; font-weight:600; cursor:pointer}
.aa-ghost:hover{border-color:var(--accent)}

.aa-welcome{position:fixed; right:322px; bottom:34px; z-index:1105; width:228px; background:var(--ink); color:var(--paper);
  border-radius:12px; padding:12px 15px; box-shadow:var(--shadow-lg); font-size:12.5px; line-height:1.5}
.aa-welcome b{color:#fff}
.aa-welcome::after{content:""; position:absolute; right:-7px; bottom:22px; width:14px; height:14px; background:var(--ink); transform:rotate(45deg)}
:root[data-theme="dark"] .aa-welcome, :root[data-theme="dark"] .aa-welcome::after{background:#000}
@media (max-width:900px){ .aa-help, .aa-welcome{display:none !important} }
@media print{ .aa-help, .aa-welcome, .aa-cloud, .aa-newdot{display:none !important} }

/* ---- Task / Work management ("My Work") ---------------------------- */
.task-add{margin-bottom:16px}
.task-add-title{font-size:15px; margin-bottom:10px}
.task-add-row{display:flex; gap:8px; flex-wrap:wrap}
.task-add-row .input{width:auto; flex:1 1 150px}
.task-add-row .btn{flex:0 0 auto}

.task-card{margin-bottom:14px; overflow:visible}
.tgroup-head{display:flex; align-items:center; gap:8px; padding:11px 16px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--line-soft); cursor:default}
.task-done-wrap > summary.tgroup-head{cursor:pointer; list-style:none}
.task-done-wrap > summary::-webkit-details-marker{display:none}
.tgroup-dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.tgroup-count{margin-left:auto; font-size:11px; background:var(--surface-2); color:var(--ink-soft);
  border-radius:20px; padding:1px 8px; letter-spacing:0}
.tone-crit{color:var(--crit)} .tone-warn{color:var(--warn)} .tone-ok{color:var(--good)}
.tone-muted{color:var(--muted)}

.task-list{list-style:none; margin:0; padding:0}
.task-row{display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line-soft)}
.task-row:last-child{border-bottom:none}
.task-check-form{margin:0; flex:0 0 auto}
.task-check{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface);
  color:#fff; cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; margin-top:1px}
.task-check:hover{border-color:var(--good)}
.status-DONE .task-check{background:var(--good); border-color:var(--good)}
.task-main{flex:1 1 auto; min-width:0}
.task-title{font-size:13.5px; color:var(--ink); font-weight:600; word-wrap:break-word}
.is-done .task-title{text-decoration:line-through; color:var(--muted); font-weight:500}
.task-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:5px; font-size:11.5px; color:var(--muted)}
.task-due{color:var(--ink-soft)}
.task-due.overdue{color:var(--crit); font-weight:600}
.task-state{color:var(--info)}
.task-blocked{color:var(--crit)}
.prio{display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  border-radius:5px; padding:1px 6px}
.prio-HIGH{background:var(--warn-wash); color:var(--warn)}
.prio-URGENT{background:var(--crit-wash); color:var(--crit)}
.task-actions{flex:0 0 auto}

.pop-form .pop-actions{display:flex; flex-direction:column; gap:8px; padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid var(--line-soft)}
.pop-form .pop-actions form{margin:0}
.pop-form .block-form{display:flex; gap:6px}
.pop-form .block-form .input{padding:5px 8px; font-size:12px}
.pop-form .task-edit .fld{margin-bottom:9px}
.pop-form .fld-2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pop-form .fld span{font-size:11px; color:var(--muted)}
.pop-form .task-delete{margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft)}

/* Derived (system) work rows in My Work */
.derived-row{background:linear-gradient(90deg, var(--accent-wash) 0 3px, transparent 3px)}
.derived-icon{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink); font-size:11px; margin-top:1px}
.derived-tag{display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--accent-ink); background:var(--accent-wash); border-radius:5px; padding:1px 6px}
.derived-meta{color:var(--ink-soft)}

/* Client task card + inline adders (Slice 4) */
.client-task-add{border-top:1px solid var(--line-soft)}
.client-task-add .input[name="title"]{margin-bottom:10px}
.doc-task-add{position:relative; margin:-4px 0 4px}
.doc-task-add .pop-form{width:320px; left:0; right:auto}

/* Team workload (Slice 5) */
.team-work-card{margin-bottom:12px; overflow:visible}
.team-work-head{display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; list-style:none}
.team-work-head::-webkit-details-marker{display:none}
.team-work-head::before{content:'▸'; color:var(--muted); font-size:11px; transition:transform .15s}
.team-work-card[open] .team-work-head::before{transform:rotate(90deg)}
.tw-avatar{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink); font-weight:700; font-size:13px}
.tw-name{font-weight:600; font-size:13.5px}
.tw-role{font-weight:400; font-size:11px; color:var(--muted); margin-left:6px}
.tw-stats{margin-left:auto; display:flex; gap:7px; flex-wrap:wrap}
.tw-stat{font-size:11px; font-weight:600; border-radius:20px; padding:2px 9px; background:var(--surface-2); color:var(--ink-soft)}
.tw-stat.crit{background:var(--crit-wash); color:var(--crit)}
.tw-stat.warn{background:var(--warn-wash); color:var(--warn)}
.tw-stat.total{background:var(--accent-wash); color:var(--accent-ink)}
.team-work-card[open] .task-list{border-top:1px solid var(--line-soft)}

/* ---- Unified client cockpit ---------------------------------------- */
.cockpit-kpis{grid-template-columns:repeat(6,1fr); margin-bottom:16px}
@media (max-width:1100px){ .cockpit-kpis{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .cockpit-kpis{grid-template-columns:repeat(2,1fr)} }
.cockpit-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media (max-width:1000px){ .cockpit-grid{grid-template-columns:1fr} }
.cockpit-col{display:flex; flex-direction:column; gap:16px; min-width:0}

.kernel-one{font-family:var(--serif); font-size:15px; color:var(--ink); margin:6px 0 8px}
.kernel-boiler{font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 10px}
.kernel-facts{display:flex; flex-wrap:wrap; gap:7px}
.kchip{font-size:11px; font-weight:600; border-radius:20px; padding:2px 10px; background:var(--surface-2); color:var(--ink-soft)}
.kchip.crit{background:var(--crit-wash); color:var(--crit)}

.doc-summary-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 18px; border-top:1px solid var(--line-soft); text-decoration:none; color:inherit}
.doc-summary-card .card-head + .doc-summary-row{border-top:none}
a.doc-summary-row:hover{background:var(--surface-2)}
.ds-type{font-size:13px; font-weight:600; color:var(--ink)}
.status-chip{background:var(--accent-wash); color:var(--accent-ink); font-size:11px}
.muted-chip{background:var(--surface-2); color:var(--muted); font-size:11px}

.team-line{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px}
.team-line .tw-role{margin-left:6px}

.card-sub.link, a.card-sub{color:var(--accent); text-decoration:none; margin-left:auto}

/* Client directory */
.client-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.client-card{display:flex; gap:12px; padding:15px 16px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s}
.client-card:hover{border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cc-avatar{width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink); font-weight:800; font-family:var(--serif); font-size:18px}
.cc-name{font-weight:700; font-size:14.5px}
.cc-meta{font-size:11.5px; color:var(--muted); margin-top:2px}
.cc-foot{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center}
.cc-rag{font-size:10px; font-weight:700; border-radius:20px; padding:1px 8px; text-transform:uppercase; letter-spacing:.3px}
.cc-rag.rag-GREEN{background:var(--good-wash); color:var(--good)}
.cc-rag.rag-AMBER{background:var(--warn-wash); color:var(--warn)}
.cc-rag.rag-RED{background:var(--crit-wash); color:var(--crit)}
.cc-tag{font-size:10.5px; color:var(--accent-ink); background:var(--accent-wash); border-radius:20px; padding:1px 8px}
.cc-am{font-size:10.5px; color:var(--muted)}

.hero-link{display:inline-block; margin-top:9px; font-size:12px; color:var(--accent); text-decoration:none; font-weight:600}
.hero-link:hover{text-decoration:underline}

.task-link{color:var(--accent); text-decoration:none; font-size:11px}
.task-link:hover{text-decoration:underline}

/* Coverage relevance badges (media monitoring) */
.rel-badge{display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  border-radius:5px; padding:1px 7px; white-space:nowrap}
.rel-featured{background:var(--good-wash); color:var(--good)}
.rel-mention{background:var(--accent-wash); color:var(--accent-ink)}
.rel-passing{background:var(--warn-wash); color:var(--warn)}