@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');
*{box-sizing:border-box}
/* "No page scrolls sideways" (spec "Make TJW Command Center Responsive") is handled at the source
   below - tables, forms, action rows and cards all wrap, collapse or scroll inside their own card
   rather than widening the page - rather than with a blanket html{overflow-x:hidden}: that would have
   silently clipped anything a future page still gets wrong, cutting it off with no way to reach it
   instead of making it reachable, which is worse than the sideways scroll it would be hiding. */
:root{
  --navy:#0A2540; --navy-2:#0d2f4f; --cyan:#00D9FF; --slate:#64748B;
  --ground:#F1F5F9; --card:#FFFFFF; --line:#E2E8F0; --ink:#0A2540;
  --danger:#DC2626; --warn:#D97706; --ok:#059669;
  /* the same three as TEXT. Identical in light; lightened in dark, where the fill versions
     stay strong enough for white badge text but are far too dark to read as type. */
  --danger-text:#DC2626; --warn-text:#D97706; --ok-text:#059669;
  --shadow:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.04);

  /* Every colour below used to be a literal in the rules. They are tokens so the
     dark theme can redefine them in one place; the light values are byte-identical
     to what shipped before, so light mode is unchanged. */
  --nav-bg:var(--navy); --nav-ink:#fff; --nav-line:#17334f;
  --nav-dim:#a9bed3; --nav-dim-2:#7d96b0; --nav-dim-3:#54708c;
  --nav-chip:#2c4a68; --nav-chip-ink:#c4d5e5;
  --on-solid:#fff;                 /* text on a navy / danger / ok fill */
  --on-accent:var(--navy);         /* text on the cyan fill */
  --card-2:#FAFCFE;                /* card footers, row hover, textareas */
  --field:#fff; --ink-2:#334155; --muted:#93a3b4; --info:#0284c7;
  --shadow-md:0 8px 20px rgba(10,37,64,.10);
  --shadow-lg:0 24px 64px rgba(10,37,64,.28);
  --shadow-card:0 8px 24px rgba(10,37,64,.08);
  --shadow-drawer:0 0 40px rgba(10,37,64,.35);
  --scrim:rgba(10,37,64,.45); --scrim-2:rgba(10,37,64,.5);
  --ok-bg:#ECFDF5; --ok-line:#A7F3D0; --ok-ink:#047857;
  --warn-bg:#FFFBEB; --warn-line:#FDE68A; --warn-ink:#B45309; --warn-ink-2:#92400E;
  --danger-bg:#FEF2F2; --danger-line:#FECACA; --danger-ink:#B91C1C;
  --info-bg:#EFF6FF; --info-line:#DBEAFE; --info-ink:#1D4ED8;
  --chip-bg:#F1F5F9;
  --col-bg:#E8EEF4; --col-opportunity:#EAF6FF; --col-active:#E9F7F0;
  --col-hold:#FDF6E7; --col-dormant:#F2F0F4; --col-churned:#FBECEC;
  --score-good:#34d399; --score-fair:#fbbf24; --score-poor:#f87171;
  --wa:#25D366; --wa-ink:#07301a;
  /* --navy does three jobs: a button fill, the sidebar, and emphasis TEXT.
     Dark needs them to move in opposite directions, so they are separate. */
  --emph:var(--navy); --nav-hover:var(--navy-2);
  color-scheme:light;
}
body{margin:0;background:var(--ground);color:var(--ink);
  font:14px/1.55 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:inherit;text-decoration:none}
.num{font-family:'Space Grotesk','Inter',sans-serif;font-variant-numeric:tabular-nums}

/* 220px fixed sidebar on the navy, matching Colombian Cleaning's shell. */
.shell{display:flex;min-height:100vh}
aside{width:220px;flex:0 0 220px;background:var(--nav-bg);color:var(--nav-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{padding:20px 20px 14px}
.logo .mark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;
  letter-spacing:-.02em;line-height:1}
.logo .mark em{font-style:normal;color:var(--cyan)}
.logo small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--nav-dim-2);margin-top:3px}
.navgroup{padding:0 12px;margin-bottom:10px}
.navgroup .gl{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--nav-dim-3);padding:10px 8px 5px}
aside a.nav{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:7px;
  color:var(--nav-dim);font-size:13.5px;font-weight:500;margin-bottom:2px}
aside a.nav:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line);color:var(--nav-ink)}
aside a.nav.on{background:var(--cyan);color:var(--on-accent);font-weight:650}
aside a.nav .badge{margin-left:auto;font-family:'Space Grotesk',sans-serif;font-size:11px;
  font-weight:700;background:var(--danger);color:var(--on-solid);border-radius:9px;padding:1px 6px;min-width:19px;
  text-align:center}
aside a.nav.on .badge{background:var(--nav-bg);color:var(--nav-ink)}
aside a.nav .badge.calm{background:var(--nav-chip);color:var(--nav-chip-ink)}
/* Settings sits at the foot of the sidebar, immediately above the signed-in
   name and Sign out: it is the account block, not a sixth business function. */
.navgroup.tgrp{margin-top:auto;margin-bottom:6px}
.navgroup.pinned{margin-bottom:4px}
.asidefoot{padding:14px 20px;border-top:1px solid var(--nav-line);
  font-size:12px;color:var(--nav-dim-2)}
.asidefoot a{color:var(--nav-dim)}.asidefoot a:hover{color:var(--nav-ink)}
/* Search a list without JavaScript: a GET form whose input is the whole bar. */
.searchbar{display:flex;gap:.5rem;align-items:center;margin:0 0 1rem;flex-wrap:wrap}
.searchbar input{flex:1 1 260px;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px;background:var(--field)}
.searchbar input:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
.searchbar button{padding:.55rem 1rem;border:0;border-radius:8px;background:var(--navy);
  color:var(--on-solid);font:inherit;font-weight:600;cursor:pointer;width:auto}
.searchbar button:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
/* Requirement bullets on a build task: what the thing has to do, readable by
   somebody who is not going to build it. */
.reqs{margin:.4rem 0 .2rem;padding-left:1.1rem;font-size:13.5px;color:var(--ink);line-height:1.5}
.reqs li{margin:.18rem 0}
/* Mobile top bar + drawer. The toggle is a checkbox and the scrim is a label
   for it, so the menu opens and closes with no JavaScript at all, which keeps
   the whole app working the way every other control here does. All three are
   inert on desktop, where the sidebar is always visible. */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.mtop{display:none}
.navscrim{display:none}
.burger{display:none}
.navclose{display:none}
.tabs{display:flex;gap:.25rem;margin:-.4rem 0 1.4rem;border-bottom:1px solid var(--line)}
.tabs a{padding:.5rem .85rem;font-size:13.5px;font-weight:500;color:var(--slate);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--emph);border-bottom-color:var(--cyan);font-weight:650}
/* Inline edit forms. Deliberately plain form posts: they work with JavaScript
   off and there is no state to lose if a save races a background refresh. */
.editform{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;
  padding:.85rem 1.1rem;border-top:1px solid var(--line);background:var(--card-2)}
.editform .fld{display:flex;flex-direction:column;min-width:0}
.editform .fld.grow{flex:1 1 150px}
.editform label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;margin-bottom:2px}
.editform input,.editform select{margin:0;padding:.4rem .5rem;font-size:13px;width:100%}
.editform button{width:auto;padding:.42rem .9rem;font-size:13px}
.btn-sm{width:auto;padding:.24rem .6rem;border-radius:6px;font-size:11.5px;font-weight:600;
  cursor:pointer;font-family:inherit;background:transparent;border:1px solid var(--line);color:var(--slate)}
.btn-sm:hover{background:var(--navy);border-color:var(--navy);color:var(--on-solid)}
.btn-sm.danger:hover{background:var(--danger);border-color:var(--danger)}
/* Approve / Reject on a meeting's Needs Approval items (Corey's edits #1, 2026-09-16): outlined green and red, larger than
   btn-sm so the two decisions read at a glance. */
.btn-approve,.btn-reject{width:auto;min-width:104px;height:40px;padding:0 14px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer}
.btn-approve{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-text)}
.btn-reject{border:1px solid var(--v-red-line);background:var(--v-red-tint);color:var(--v-red)}
.btn-approve:hover{filter:brightness(.97)}.btn-reject:hover{filter:brightness(.97)}
.v2-act form.inline{display:inline}
.v2-act .btn-approve+form{margin-left:10px}
/* Modals use the native <dialog>. No framework, no focus-trap of our own, and
   Escape closes it for free. Every dialog also has a real URL behind it so a
   link can be shared and so the page still works with JavaScript off. */
dialog{border:0;border-radius:12px;padding:0;max-width:min(680px,94vw);width:100%;
  box-shadow:var(--shadow-lg);color:var(--ink);background:var(--card)}
dialog::backdrop{background:var(--scrim)}
dialog .mhead{background:var(--nav-bg);color:var(--nav-ink);padding:1rem 1.25rem;
  display:flex;align-items:flex-start;gap:1rem}
dialog .mhead h3{margin:0;font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
dialog .mhead .ms{color:var(--nav-dim);font-size:12.5px;margin-top:.15rem}
dialog .mclose{margin-left:auto;background:transparent;border:0;color:var(--nav-dim);
  font-size:22px;line-height:1;cursor:pointer;width:auto;padding:0 .2rem}
dialog .mclose:hover{color:var(--nav-ink);background:transparent}
dialog .mbody{padding:1.1rem 1.25rem;max-height:66vh;overflow-y:auto}
dialog .msec{margin-bottom:1.15rem}
dialog .msec:last-child{margin-bottom:0}
dialog .msec h4{margin:0 0 .45rem;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--slate);font-weight:700}
dialog textarea{width:100%;min-height:190px;padding:.7rem .8rem;border:1px solid var(--line);
  border-radius:8px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  resize:vertical;background:var(--card-2);color:var(--ink)}
dialog .mact{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.55rem}
dialog .mact button,dialog .mact a.btn{width:auto;padding:.45rem .85rem;border-radius:7px;
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:0;
  background:var(--navy);color:var(--on-solid);text-decoration:none;display:inline-block}
dialog .mact a.btn.wa{background:var(--wa);color:var(--wa-ink)}
dialog .mact a.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--slate)}
dialog .mact .ok{color:var(--ok);font-size:12.5px;font-weight:600}
.thread{border-left:2px solid var(--line);padding-left:.8rem;margin-bottom:.7rem}
.thread .w{font-size:11.5px;color:var(--slate);margin-bottom:.15rem}
.thread .b{white-space:pre-wrap;font-size:13.5px}
.thread.out{border-left-color:var(--cyan)}
.chip{display:inline-block;padding:.1rem .5rem;border-radius:20px;font-size:11.5px;
  font-weight:600;background:var(--chip-bg);color:var(--ink-2);border:1px solid var(--line);margin-right:.3rem}
.rowlink{cursor:pointer}
.rowlink:hover .t{color:var(--info);text-decoration:underline}
.resolve{background:transparent;border:1px solid var(--line);color:var(--slate);
  width:auto;padding:.24rem .6rem;border-radius:6px;font-size:11.5px;font-weight:600;
  cursor:pointer;font-family:inherit}
.resolve:hover{background:var(--ok);border-color:var(--ok);color:var(--on-solid)}
form.inline{display:inline}
main{flex:1;min-width:0;max-width:none;padding:1.75rem 1.9rem 5rem}
h1{font-size:1.35rem;margin:0 0 .2rem;letter-spacing:-.02em;font-weight:700}
.sub{color:var(--slate);font-size:13.5px;margin:0 0 1.6rem}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--slate);
  margin:0 0 .6rem;font-weight:600;display:flex;align-items:baseline;gap:.5rem}
h2 b{color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0;font-weight:600}
.section{margin-bottom:2.1rem}

/* Shared, automatic safety net for multi-column forms and stat grids (spec "Make TJW Command Center
   Responsive"), the other half of RESPONSIVE_JS below: a grid whose columns already size themselves
   (repeat(auto-fit,minmax(...))) is left alone, since it is already doing the right thing on its own,
   but a grid built with a fixed column count - a form's field row, a stat row - gets this class the
   moment any of its own columns actually measures too narrow to read, whatever page built it and
   without that page adding a breakpoint of its own, and drops to one column until it has room again. */
.rgrid-1col{grid-template-columns:1fr!important}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);overflow:hidden;max-width:100%}
.row{display:grid;grid-template-columns:56px 1fr auto;gap:1rem;padding:.85rem 1.1rem;
  border-top:1px solid var(--line);align-items:start}
.row:first-child{border-top:0}
.row:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.t{font-weight:600;margin-bottom:.1rem;font-size:14px}
.d{color:var(--slate);font-size:13px}
.meta{color:var(--slate);font-size:12px;text-align:right;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--slate);word-break:break-all;margin-top:.25rem}

.age{font-weight:700;font-size:13.5px;text-align:right}
.age.hot{color:var(--danger-text)}.age.warm{color:var(--warn-text)}.age.cool{color:var(--info)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.85rem}
/* The demo grid. Each card is one anchor, so the whole tile is the target and
   there is nothing to aim at with a cursor mid-call. */
.demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:.75rem}
a.demo{display:block;padding:.85rem .95rem;background:var(--card);border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
a.demo:hover{border-color:var(--cyan);transform:translateY(-2px);
  box-shadow:var(--shadow-md)}
.demo-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.demo-h b{font-size:14px;letter-spacing:-.01em}
.demo-u{margin-top:.15rem;color:var(--slate);font-size:12px;word-break:break-all}
.demo-m{margin-top:.4rem;color:var(--slate);font-size:11.5px;text-transform:capitalize}
.tile{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.9rem 1rem;box-shadow:var(--shadow)}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--slate);
  font-weight:600;margin-bottom:.3rem}
.tile .v{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:700;
  line-height:1.1;letter-spacing:-.02em}
.tile .s{font-size:12px;color:var(--slate);margin-top:.15rem}
.v.danger{color:var(--danger)}.v.warn{color:var(--warn)}.v.ok{color:var(--ok)}

.hero{background:var(--nav-bg);color:var(--nav-ink);border-radius:12px;padding:1.4rem 1.5rem;
  display:flex;align-items:center;gap:1.75rem;margin-bottom:1.6rem;flex-wrap:wrap}
.hero .score{font-family:'Space Grotesk',sans-serif;font-size:3.1rem;font-weight:700;
  line-height:1;letter-spacing:-.03em}
.hero .score.good{color:var(--score-good)}.hero .score.fair{color:var(--score-fair)}.hero .score.poor{color:var(--score-poor)}
.hero .lab{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--nav-dim-2);font-weight:600}
.hero .why{color:var(--nav-chip-ink);font-size:13.5px;max-width:46ch}
.hero .split{display:flex;gap:2rem;margin-left:auto;flex-wrap:wrap}
.hero .split div{text-align:right}
.hero .split .n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700}

.alert{display:grid;grid-template-columns:4px 1fr auto;gap:.95rem;padding:.85rem 1.1rem;
  border-top:1px solid var(--line);align-items:start}
.alert:first-child{border-top:0}
.alert .bar{align-self:stretch;border-radius:2px;min-height:38px}
.alert.s1 .bar{background:var(--danger)}
.alert.s2 .bar{background:var(--warn)}
.alert.s3 .bar{background:var(--cyan)}
.alert .act{color:var(--slate);font-size:12.5px;margin-top:.2rem;font-style:italic}
/* Every alert carries its own buttons, because an alert you cannot put down is
   a poster on a wall: Corey read past the whole page once it filled with rows
   that had no answer. */
.alert-acts{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}
.alert-acts form.inline{display:flex;gap:.4rem;margin:0}
.alert-acts a.btn-sm{text-decoration:none;display:inline-block}
.alert-acts .resolve{width:auto;padding:.24rem .6rem;border-radius:6px;font-size:11.5px}
.tick { display:block; margin-bottom:.3rem }
.tick input { width:17px; height:17px; accent-color: var(--navy); cursor:pointer }
.alert-acts .note-in{width:150px;margin:0;padding:.24rem .5rem;font-size:11.5px;
  border:1px solid var(--line);border-radius:6px;background:var(--card);font-family:inherit}

.pill{display:inline-block;padding:.1rem .45rem;border-radius:4px;font-size:11px;
  font-weight:600;background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-line)}
.pill.who{background:var(--chip-bg);color:var(--ink-2);border-color:var(--line)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.pill.danger{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--slate);font-weight:600;padding:.65rem 1.1rem;border-bottom:1px solid var(--line)}
td{padding:.75rem 1.1rem;border-top:1px solid var(--line);vertical-align:top}
tr:hover td{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
td.r,th.r{text-align:right}

/* Kanban. Horizontal scroll rather than wrap: six columns of unequal height
   read as a pipeline, a wrapped grid reads as a list. */
.kan{display:flex;gap:.85rem;overflow-x:auto;padding-bottom:.5rem;align-items:flex-start}
.col{flex:0 0 232px;background:var(--col-bg);border:1px solid var(--line);border-radius:10px;
  padding:.6rem;min-height:110px}
.col.opportunity{background:var(--col-opportunity)}
.col.active{background:var(--col-active)}
.col.on_hold{background:var(--col-hold)}
.col.dormant{background:var(--col-dormant)}
.col.churned{background:var(--col-churned)}
.col > .ch{display:flex;align-items:baseline;gap:.4rem;padding:.15rem .35rem .5rem;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--slate)}
.col > .ch b{color:var(--ink);font-size:12.5px;text-transform:none;letter-spacing:0}
.col > .ch .n{margin-left:auto;font-family:'Space Grotesk',sans-serif;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:0 .4rem;font-size:11px;color:var(--slate)}
.kcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:.6rem .7rem;margin-bottom:.5rem;box-shadow:var(--shadow)}
.kcard:hover{border-color:var(--cyan)}
.kcard .n{font-weight:650;font-size:13.5px;line-height:1.3}
.kcard .s{color:var(--slate);font-size:11.5px;margin-top:.1rem}
.kcard .f{display:flex;gap:.35rem;align-items:center;margin-top:.45rem;flex-wrap:wrap}
.kcard .m{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px}
.colnote{color:var(--slate);font-size:11.5px;padding:.15rem .35rem .5rem;line-height:1.35}
.colempty{color:var(--muted);font-size:12px;text-align:center;padding:1rem .35rem}
.empty{padding:2.75rem 1rem;text-align:center;color:var(--slate)}
.empty b{display:block;color:var(--ok);font-size:1.02rem;margin-bottom:.2rem}
.note{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink-2);border-radius:8px;
  padding:.7rem .95rem;font-size:13px;margin-bottom:1.1rem}

/* The login page renders bare: no sidebar, no nav. Nothing behind it is
   reachable signed out, so a menu there is decoration that eats the screen. */
.loginwrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;
  justify-content:center;padding:1.25rem 1.25rem 12vh}
form.login{width:100%;max-width:23rem;margin:0;padding:2rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card)}
form.login .brand{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:1.5rem;letter-spacing:-.02em;color:var(--emph)}
input{width:100%;padding:.62rem .72rem;margin:.3rem 0 .95rem;background:var(--field);
  color:var(--ink);border:1px solid var(--line);border-radius:7px;font-size:14px;font-family:inherit}
input:focus{outline:2px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
/* The only control left unstyled. It inherited the browser's white in dark. */
textarea{background:var(--field);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;font-family:inherit;font-size:13.5px;padding:.5rem .6rem;max-width:100%}
/* Same story for <select>: color-scheme alone does not repaint it everywhere. */
select{background:var(--field);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;font-family:inherit;font-size:13.5px;max-width:100%}
button{width:100%;padding:.62rem;border:0;border-radius:7px;background:var(--navy);
  color:var(--on-solid);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
button:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
label{font-size:12px;color:var(--slate);font-weight:500}
.err{color:var(--danger);font-size:13px;margin-bottom:.8rem}
.okmsg{color:var(--ok-text);font-size:13px;margin-bottom:.8rem}
form.login .alt{display:block;margin-top:1rem;text-align:center;font-size:13px}
/* Settings > People: the password form sits inside the row it changes. */
details.pw summary{cursor:pointer;font-size:13px;color:var(--slate)}
details.pw form{display:grid;gap:.1rem;max-width:18rem;margin-top:.5rem}
details.pw input{margin:.2rem 0 .5rem}
/* Everything below 860px. The old rule flattened the sidebar into a wrapped
   block of ten links above every page, which cost most of a phone screen before
   any content appeared. It is a drawer now. */
@media(max-width:860px){
  .shell{flex-direction:column}
  .mtop{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:.6rem;
    background:var(--nav-bg);color:var(--nav-ink);padding:.55rem .8rem}
  .mtop .mark{font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:17px;
    letter-spacing:-.02em}
  .mtop .mark em{font-style:normal;color:var(--cyan)}
  .burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    margin-left:-.35rem;border-radius:9px;color:var(--nav-ink);font-size:19px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;user-select:none}
  .burger:active{background:var(--navy-2)}
  .navtoggle:focus-visible ~ .mtop .burger{outline:2px solid var(--cyan);outline-offset:2px}
  aside{position:fixed;top:0;left:0;bottom:0;width:272px;max-width:82vw;flex:none;
    height:100vh;height:100dvh;z-index:60;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--shadow-drawer)}
  .navtoggle:checked ~ aside{transform:none}
  .navscrim{display:block;position:fixed;inset:0;z-index:50;background:var(--scrim-2);
    opacity:0;pointer-events:none;transition:opacity .2s ease}
  .navtoggle:checked ~ .navscrim{opacity:1;pointer-events:auto}
  /* Touch targets: 13.5px links at 2px apart are a desktop density. */
  aside a.nav{padding:.68rem .8rem;font-size:14.5px;margin-bottom:2px}
  .logo{padding:16px 14px 12px 20px;display:flex;align-items:flex-start;gap:.5rem}
  /* The open drawer sits over the burger, so it carries its own close. */
  .navclose{display:flex;align-items:center;justify-content:center;margin-left:auto;
    width:38px;height:38px;margin-top:-6px;border-radius:9px;color:var(--nav-dim);font-size:26px;
    line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
  .navclose:active{background:var(--navy-2);color:var(--nav-ink)}
  main{padding:1.15rem 1rem 4rem;max-width:100%}
  h1{font-size:1.25rem}
  .sub{margin-bottom:1.2rem}
  .section{margin-bottom:1.6rem}
  /* Tables keep their columns and scroll inside their own card rather than
     forcing the whole page sideways. */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* .panel's own scroll rule used to only start at 760px while this table
     floor starts at 860px, so a table between those two widths had nowhere
     to scroll and got squeezed instead (the due-date column was the
     narrowest cell, so it took the visible hit). Matching the breakpoints
     closes that gap. */
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* A table with a header row (lib/view.js's RESPONSIVE_JS marks it data-rtbl, reading the <th> text
     once and writing it onto every cell as data-label) turns into a stack of labelled rows instead -
     spec "Make TJW Command Center Responsive": tables switch to readable stacked rows/cards rather
     than squeeze or stay wide enough to scroll. Every current and future table gets this for free; it
     needs no change in the page that built it. A table with nothing to label itself with (no <th> in
     its first row - a plain list rendered as a table, not a data grid) falls through to the old floor-
     and-scroll rule below instead. */
  table[data-rtbl]{min-width:0;width:100%;border:0;display:block}
  table[data-rtbl] thead,table[data-rtbl] tbody{display:block}
  table[data-rtbl] .rtbl-head{display:none}
  table[data-rtbl] tr:not(.rtbl-head){display:block;background:var(--card);border:1px solid var(--line);
    border-radius:10px;padding:.15rem .9rem;margin-bottom:.6rem}
  table[data-rtbl] tr:not(.rtbl-head):hover td{background:transparent}
  table[data-rtbl] td{display:block;padding:.5rem 0;border-top:1px dashed var(--line);
    text-align:left!important;white-space:normal!important}
  table[data-rtbl] tr td:first-child{border-top:0}
  table[data-rtbl] td:empty{display:none}
  table[data-rtbl] td[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.06em;color:var(--slate);font-weight:700;margin-bottom:.15rem}
  /* A table RESPONSIVE_JS found nothing to label (no <th> in its first row) is a plain list rendered
     as a table, not a data grid - routes/topos.js's own "Lists: a row is a line" rule already proved
     the right move for one of these is to fit the card and wrap, not scroll past it, so that is now
     every such table's default instead of a one-off per page. Its few columns still line up as real
     table columns (this only turns off the old fixed floor), and any cell's text wraps across lines
     rather than running past the edge or squeezing to one word per line. */
  table:not([data-rtbl]){min-width:0;width:100%}
  table:not([data-rtbl]) td,table:not([data-rtbl]) th{white-space:normal;overflow-wrap:anywhere}
  th{padding:.6rem .8rem}
  td{padding:.65rem .8rem}
  .row,.alert{grid-template-columns:44px 1fr;gap:.7rem;padding:.8rem .9rem}
  .alert{grid-template-columns:4px 1fr}
  .meta{grid-column:2;text-align:left;margin-top:.25rem;white-space:normal}
  .age{text-align:left}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:.6rem}
  .tile{padding:.75rem .85rem}
  .tile .v{font-size:1.5rem}
  .demos{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .hero{padding:1.15rem 1.15rem;gap:1rem;margin-bottom:1.2rem}
  .hero .score{font-size:2.6rem}
  .hero .why{max-width:none}
  .hero .split{margin-left:0;gap:1.4rem;width:100%}
  .hero .split div{text-align:left}
  /* Four tabs do not fit on a phone; swipe them instead of wrapping them. */
  .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{white-space:nowrap;padding:.55rem .75rem}
  .kan{gap:.6rem;scroll-snap-type:x proximity}
  .col{flex:0 0 78vw;max-width:300px;scroll-snap-align:start}
  .editform{padding:.8rem .9rem}
  .editform .fld,.editform .fld.grow{flex:1 1 100%}
  .editform button{width:100%}
  /* Shared, automatic safety net (spec "Make TJW Command Center Responsive"): every current and
     future button row, filter bar or pill/chip group inherits this without adding its own CSS, the
     same way a <table> inherits the stacked-row rule above. It only takes effect on an element that
     already set display:flex itself, so it is safe to write this broadly - a heading or card merely
     named "...toolbar" that is laid out some other way is untouched - and a page that genuinely needs
     a row to stay on one line and scroll instead (the department tab bar, a chip strip meant to be
     swiped) already says so with its own, more specific selector, which still wins. */
  [class*="filter"],[class*="act"],[class*="btn"],[class*="pill"],[class*="chip"],
  [class*="toolbar"],[class*="bar"]{flex-wrap:wrap}
  /* 16px is the threshold under which iOS Safari zooms the page on focus. */
  input,select,textarea{font-size:16px}
  .editform input,.editform select{font-size:16px}
  dialog{max-width:100vw;width:100vw;max-height:100dvh;border-radius:14px 14px 0 0;
    margin:auto auto 0;padding-bottom:env(safe-area-inset-bottom)}
  dialog .mbody{max-height:72vh;padding:1rem}
  dialog .mhead{padding:.9rem 1rem}
  dialog textarea{min-height:150px;font-size:16px}
  dialog .mact button,dialog .mact a.btn{flex:1 1 auto;text-align:center}
}
@media(max-width:520px){
  main{padding:1rem .75rem 3.5rem}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .demos{grid-template-columns:1fr}
  .hero{display:block}
  .hero .score{font-size:2.3rem}
  .hero .split{display:flex;gap:1.25rem;margin-top:1rem}
  .col{flex:0 0 86vw}
  form.login{padding:1.5rem 1.25rem}
}

/* ── Dark theme ───────────────────────────────────────────────────────────
   Only tokens are redefined here; not one rule below knows which theme is on.
   Written twice on purpose: the media query serves anyone who has never
   touched the toggle, the attribute serves everyone who has, and a dark-by-
   system user who picks Light needs the attribute to win. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground:#071522; --card:#0E2033; --line:#1D3348; --ink:#E6EEF6;
  --nav-bg:#08182A; --nav-ink:#EAF2F9; --nav-line:#16304A;
  --nav-dim:#A7BDD2; --nav-dim-2:#8AA2B8; --nav-dim-3:#6D8399;
  --nav-chip:#1D3A57; --nav-chip-ink:#C4D5E5;
  --card-2:#132941; --field:#0B1E31; --ink-2:#BACAD9; --muted:#7C93A8;
  --info:#38BDF8;
  --danger-text:#F87171; --warn-text:#FBBF24; --ok-text:#34D399;
  /* On a dark ground a shadow is nearly invisible, so the elevation has to
     come from a darker, wider one plus the lighter card colour above. */
  --shadow:0 1px 2px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 8px 20px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.62);
  --shadow-card:0 8px 24px rgba(0,0,0,.40);
  --shadow-drawer:0 0 40px rgba(0,0,0,.65);
  --scrim:rgba(2,8,15,.62); --scrim-2:rgba(2,8,15,.68);
  /* The soft status backgrounds invert: a pale tint becomes a deep tint, and
     the ink that sat on it goes light enough to clear 7:1 the other way. */
  --ok-bg:#0B2C21; --ok-line:#1B5039; --ok-ink:#6EE7B7;
  --warn-bg:#2C2411; --warn-line:#57451B; --warn-ink:#FCD34D; --warn-ink-2:#FDE68A;
  --danger-bg:#2E1518; --danger-line:#5A2328; --danger-ink:#FCA5A5;
  --info-bg:#0B2337; --info-line:#1B4065; --info-ink:#93C5FD;
  --chip-bg:#16293D;
  --col-bg:#0B1B2B; --col-opportunity:#0A2234; --col-active:#0A2620;
  --col-hold:#241E10; --col-dormant:#1C1A25; --col-churned:#2A171A;
  --slate:#93A8BC;
  --navy:#1D4E7E;        /* button FILL: white on it clears 7:1 */
  --navy-2:#2A6296;      /* and a button hover has to go lighter, not darker */
  --nav-hover:#16304A;   /* while the sidebar hover goes the other way */
  --emph:#7DD3FC;        /* navy as TEXT is invisible here */
  --on-accent:#08182A;   /* text on the cyan fill stays dark */
  color-scheme:dark;     /* native selects, scrollbars and pickers follow */

} }
:root[data-theme="dark"] {
  --ground:#071522; --card:#0E2033; --line:#1D3348; --ink:#E6EEF6;
  --nav-bg:#08182A; --nav-ink:#EAF2F9; --nav-line:#16304A;
  --nav-dim:#A7BDD2; --nav-dim-2:#8AA2B8; --nav-dim-3:#6D8399;
  --nav-chip:#1D3A57; --nav-chip-ink:#C4D5E5;
  --card-2:#132941; --field:#0B1E31; --ink-2:#BACAD9; --muted:#7C93A8;
  --info:#38BDF8;
  --danger-text:#F87171; --warn-text:#FBBF24; --ok-text:#34D399;
  /* On a dark ground a shadow is nearly invisible, so the elevation has to
     come from a darker, wider one plus the lighter card colour above. */
  --shadow:0 1px 2px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 8px 20px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.62);
  --shadow-card:0 8px 24px rgba(0,0,0,.40);
  --shadow-drawer:0 0 40px rgba(0,0,0,.65);
  --scrim:rgba(2,8,15,.62); --scrim-2:rgba(2,8,15,.68);
  /* The soft status backgrounds invert: a pale tint becomes a deep tint, and
     the ink that sat on it goes light enough to clear 7:1 the other way. */
  --ok-bg:#0B2C21; --ok-line:#1B5039; --ok-ink:#6EE7B7;
  --warn-bg:#2C2411; --warn-line:#57451B; --warn-ink:#FCD34D; --warn-ink-2:#FDE68A;
  --danger-bg:#2E1518; --danger-line:#5A2328; --danger-ink:#FCA5A5;
  --info-bg:#0B2337; --info-line:#1B4065; --info-ink:#93C5FD;
  --chip-bg:#16293D;
  --col-bg:#0B1B2B; --col-opportunity:#0A2234; --col-active:#0A2620;
  --col-hold:#241E10; --col-dormant:#1C1A25; --col-churned:#2A171A;
  --slate:#93A8BC;
  --navy:#1D4E7E;        /* button FILL: white on it clears 7:1 */
  --navy-2:#2A6296;      /* and a button hover has to go lighter, not darker */
  --nav-hover:#16304A;   /* while the sidebar hover goes the other way */
  --emph:#7DD3FC;        /* navy as TEXT is invisible here */
  --on-accent:#08182A;   /* text on the cyan fill stays dark */
  color-scheme:dark;     /* native selects, scrollbars and pickers follow */

}

/* Cards on a dark ground read as floating blobs without an edge. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] dialog { border-color:var(--line) }

.themetog{display:flex;align-items:center;gap:.45rem;width:100%;margin:0 0 .35rem;
  padding:.5rem .7rem;border:0;border-radius:7px;background:transparent;cursor:pointer;
  color:var(--nav-dim);font:inherit;font-size:13px;font-weight:500;text-align:left}
.themetog:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line);color:var(--nav-ink)}
.themetog .ti{font-size:14px;line-height:1}
/* The Off/On state (guardrail "Sidebar bottom-left: user, Settings, Dark mode"): the label itself never
   changes, only this reads back the live theme. */
.themetog .tgst{margin-left:auto;font-size:11px;font-weight:600;color:var(--nav-dim-2)}
/* One button, two labels: CSS picks which is showing so the button never has to
   be re-rendered by the server, which cannot know the viewer's system setting. */
.themetog .dk{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themetog .lt{display:none}
  :root:not([data-theme="light"]) .themetog .dk{display:inline}
}
:root[data-theme="dark"] .themetog .lt{display:none}
:root[data-theme="dark"] .themetog .dk{display:inline}
:root[data-theme="light"] .themetog .lt{display:inline}
:root[data-theme="light"] .themetog .dk{display:none}

/* The wordmark is white-on-transparent, so it needs the navy behind it in
   both themes. It always sits on the sidebar or the mobile bar, which are. */

/* ══ Portal redesign, 2026-09-12 ═══════════════════════════════════════════
   The components the new mockups are built from. Added alongside the old
   classes rather than replacing them: the screens move over one at a time, and
   a page that has not been rebuilt yet has to keep rendering exactly as it did.
   Every colour here is a token, same rule as the rest of this file. */
:root{
  --blue:#1D6FF2; --blue-2:#175FD6;
  --violet-bg:#F3F0FF; --violet-ink:#6D45D9;
  --amber-bg:#FFF7E6; --amber-ink:#B45309;
  --pink-bg:#FEF2F4; --pink-ink:#BE123C;
  --stat-ring:rgba(10,37,64,.04);

  /* Sales board. Joel, 2026-09-12: a white card on a tinted column looks like a
     hole in it, and Demo buildout had no tint at all. Every column now carries
     three tokens -- the column wash, the card one step lighter, and a line
     between them -- so a card reads as raised out of its own colour rather than
     dropped in from another page. Cyan is the TJW accent, so Demo buildout (the
     thing actively being built) takes it.
     Corey, 2026-09-15: that first pass was too pale -- both steps sat in the
     92-97% lightness band, which reads as plain white, and Demo buildout's wash
     was too washed out to read as the brand cyan. Card now sits only a couple
     of points lighter than its column (an off-shade, not a swap to white), and
     every wash is pulled a few points darker/more saturated so the colour
     actually shows. */
  --sop-bg:#C4DEF8;   --sop-card:#D1E5FA;   --sop-line:#ADCCEB;
  --sdemo-bg:#AEEEFA;  --sdemo-card:#BFEFF8; --sdemo-line:#8EDCEB;
  --sstale-bg:#F7D9BD; --sstale-card:#F9E2CE; --sstale-line:#EAC39D;
  --shold-bg:#F8E6BF;  --shold-card:#F9EBCD; --shold-line:#EBD3A2;
  --swon-bg:#C6EBD7;   --swon-card:#D3EEDF;  --swon-line:#ADDCC3;
  --sdorm-bg:#D7D3E9;  --sdorm-card:#E1DEED; --sdorm-line:#C4BFD9;
  --slost-bg:#F1CBCB;  --slost-card:#F4D7D7; --slost-line:#E3B5B5;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --blue:#3B82F6; --blue-2:#60A5FA;
  --violet-bg:#1E1B34; --violet-ink:#C4B5FD;
  --amber-bg:#2C2411; --amber-ink:#FCD34D;
  --pink-bg:#2E1518; --pink-ink:#FDA4AF;
  --stat-ring:rgba(0,0,0,.3);

  /* The same six pairs on the dark ground: the wash is a deep, desaturated step
     and the card sits one step LIGHTER than it, which is the direction
     elevation reads in dark. */
  --sop-bg:#0C2233;    --sop-card:#13314A;   --sop-line:#1D4266;
  --sdemo-bg:#082A33;  --sdemo-card:#0E3C49; --sdemo-line:#175766;
  --sstale-bg:#33210F; --sstale-card:#452D16; --sstale-line:#6B451E;
  --shold-bg:#2A2211;  --shold-card:#3A3018; --shold-line:#57451B;
  --swon-bg:#0A2620;   --swon-card:#10382E;  --swon-line:#1B5039;
  --sdorm-bg:#1B1A26;  --sdorm-card:#272536; --sdorm-line:#383552;
  --slost-bg:#2A1618;  --slost-card:#3A1F22; --slost-line:#5A2328;
} }
:root[data-theme="dark"]{
  --blue:#3B82F6; --blue-2:#60A5FA;
  --violet-bg:#1E1B34; --violet-ink:#C4B5FD;
  --amber-bg:#2C2411; --amber-ink:#FCD34D;
  --pink-bg:#2E1518; --pink-ink:#FDA4AF;
  --stat-ring:rgba(0,0,0,.3);

  /* The same six pairs on the dark ground: the wash is a deep, desaturated step
     and the card sits one step LIGHTER than it, which is the direction
     elevation reads in dark. */
  --sop-bg:#0C2233;    --sop-card:#13314A;   --sop-line:#1D4266;
  --sdemo-bg:#082A33;  --sdemo-card:#0E3C49; --sdemo-line:#175766;
  --sstale-bg:#33210F; --sstale-card:#452D16; --sstale-line:#6B451E;
  --shold-bg:#2A2211;  --shold-card:#3A3018; --shold-line:#57451B;
  --swon-bg:#0A2620;   --swon-card:#10382E;  --swon-line:#1B5039;
  --sdorm-bg:#1B1A26;  --sdorm-card:#272536; --sdorm-line:#383552;
  --slost-bg:#2A1618;  --slost-card:#3A1F22; --slost-line:#5A2328;
}
svg.ni{width:16px;height:16px;flex:0 0 16px}
aside a.nav{gap:.6rem}

/* Page header: title and strapline left, date and actions right. */
.phead{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.phead .pl{flex:1 1 300px;min-width:0}
.phead h1{font-size:1.75rem;line-height:1.2;margin:0 0 .3rem}
.phead .sub{margin:0}
.phead .pr{margin-left:auto;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  justify-content:flex-end}
.phead .pdate{font-size:13px;color:var(--slate);white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.05rem;border-radius:9px;
  background:var(--navy);color:var(--on-solid);font-size:13.5px;font-weight:600;border:0;
  cursor:pointer;font-family:inherit;width:auto;text-decoration:none;white-space:nowrap}
.btn:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.btn.blue{background:var(--blue)}.btn.blue:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.btn svg{width:15px;height:15px}

/* Stat cards. The whole card is the link, so nothing has to be aimed at. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1rem;
  margin-bottom:1.5rem}
/* Joel, 2026-09-12: centred. The icon, the label, the number and the line under
   it all share one axis, so a row of tiles reads as a row rather than four
   left-aligned blocks of different lengths. */
.stat{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:1.05rem 1.1rem;box-shadow:var(--shadow);position:relative;color:inherit;
  text-align:center}
a.stat{transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
a.stat:hover{border-color:var(--cyan);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat .sh{display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-bottom:.55rem}
.stat .ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;flex:0 0 40px;background:var(--chip-bg);color:var(--slate)}
.stat .ico svg{width:20px;height:20px}
.stat .ico.red{background:var(--danger-bg);color:var(--danger-ink)}
.stat .ico.blue{background:var(--info-bg);color:var(--info-ink)}
.stat .ico.amber{background:var(--amber-bg);color:var(--amber-ink)}
.stat .ico.green{background:var(--ok-bg);color:var(--ok-ink)}
.stat .ico.violet{background:var(--violet-bg);color:var(--violet-ink)}
.stat .ico.pink{background:var(--pink-bg);color:var(--pink-ink)}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);line-height:1.3}
.stat .v{font-family:'Space Grotesk','Inter',sans-serif;font-size:2.1rem;font-weight:700;
  line-height:1;letter-spacing:-.02em}
.stat .v.red{color:var(--danger-text)}.stat .v.blue{color:var(--info)}
.stat .v.amber{color:var(--warn-text)}.stat .v.green{color:var(--ok-text)}
.stat .s{font-size:12.5px;color:var(--slate);margin-top:.3rem}
.stat .chev{position:absolute;right:.9rem;bottom:.85rem;color:var(--muted);
  display:flex;align-items:center;opacity:.75}
.stat .chev svg{width:16px;height:16px}
.stat.wide .v{font-size:1.35rem}

/* Panel: a titled white card, usually wrapping a table. */
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);margin-bottom:1.5rem;overflow:hidden;max-width:100%}
.panel > .ph{display:flex;align-items:center;gap:.6rem;padding:1.05rem 1.25rem .9rem;
  flex-wrap:wrap}
.panel > .ph h3{margin:0;font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.panel > .ph .psub{font-size:13px;color:var(--slate);width:100%;margin-top:-.15rem}
.panel > .ph .cnt{font-family:'Space Grotesk','Inter',sans-serif;font-size:11.5px;font-weight:700;
  background:var(--danger);color:var(--on-solid);border-radius:20px;padding:1px 7px;min-width:20px;
  text-align:center}
.panel > .ph .cnt.calm{background:var(--chip-bg);color:var(--ink-2)}
.panel > .ph .va{margin-left:auto;font-size:13px;font-weight:600;color:var(--info);
  white-space:nowrap}
.panel > .ph .va:hover{text-decoration:underline}
.panel > .ph button.va{width:auto;background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--info)}
button.stat{width:100%;font:inherit;cursor:pointer;background:var(--card);color:inherit;
  border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.1rem;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
button.stat:hover{border-color:var(--cyan);box-shadow:var(--shadow-md);transform:translateY(-1px);background:var(--card)}
.stat.on{border-color:var(--info);box-shadow:0 0 0 3px var(--info-bg)}
dialog.wide{max-width:min(1040px,96vw)}
dialog .mbody.flush{padding:0}
dialog .mbody.flush > table{width:100%}
tr[hidden]{display:none}
.panel table{font-size:13.5px}
.panel th{padding:.6rem 1.25rem;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.panel td{padding:.85rem 1.25rem;vertical-align:middle}
.panel .pfoot{padding:.8rem 1.25rem;border-top:1px solid var(--line);background:var(--card-2);
  font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.panel .pempty{padding:2.4rem 1.25rem;text-align:center;color:var(--slate);font-size:13.5px}
.panel .pempty b{display:block;color:var(--ok-text);font-size:1rem;margin-bottom:.2rem}

/* Badges. Priority and status both read as a soft pill in the mockups; the
   difference is only the colour, so they share one class. */
.bdg{display:inline-block;padding:.16rem .55rem;border-radius:6px;font-size:11.5px;
  font-weight:600;line-height:1.4;white-space:nowrap;border:1px solid transparent}
.bdg.high{background:var(--danger-bg);color:var(--danger-ink)}
.bdg.medium{background:var(--amber-bg);color:var(--amber-ink)}
.bdg.low{background:var(--ok-bg);color:var(--ok-ink)}
/* Done's one color, everywhere (spec "Standardize Done Status Color": order #10733 on the Work Status page is
   the reference - this exact green, var(--v-green-bg)/var(--v-green-ink)). This used to be var(--ok-bg)/
   var(--ok-ink) here - a paler, grayer green that read as a different, lighter variant next to the one below -
   while the Pills block further down the file (the "Selected state" comment, where Work Status's own filter
   pills live) defined .bdg.done a second time with the real color. Moved that second definition up into this one
   rule and deleted it down there, so there is exactly one .bdg.done in the stylesheet, not two that happen to
   agree only because of source order. */
.bdg.done{background:var(--v-green-bg);color:var(--v-green-ink)}
.bdg.prog{background:var(--info-bg);color:var(--info-ink)}
.bdg.wait{background:var(--amber-bg);color:var(--amber-ink)}
.bdg.grey{background:var(--chip-bg);color:var(--ink-2)}
.bdg.stop{background:var(--danger-bg);color:var(--danger-ink)}
.bdg.violet{background:var(--violet-bg);color:var(--violet-ink)}
.bdg.none{background:transparent;color:var(--muted);border-color:var(--line)}

/* Initial circles. Two letters, never a photograph: there are no photographs. */
.avat{width:26px;height:26px;border-radius:50%;background:var(--info-bg);color:var(--info-ink);
  font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 26px;letter-spacing:.02em}
.avat.g{background:var(--ok-bg);color:var(--ok-ink)}
.avat.v{background:var(--violet-bg);color:var(--violet-ink)}
.avat.a{background:var(--amber-bg);color:var(--amber-ink)}
.who-cell{display:flex;align-items:center;gap:.45rem;white-space:nowrap}

/* The signed-in block at the foot of the sidebar (guardrail "Sidebar bottom-left: user, Settings, Dark
   mode", 2026-09-30): always visible, never a menu, the thin top border is the divider. */
.asideuser{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem 1.1rem;
  border-top:1px solid var(--nav-line);margin-top:.2rem}
.asideuser .avat{width:32px;height:32px;flex:0 0 32px;font-size:11.5px;
  background:var(--nav-chip);color:var(--nav-chip-ink)}
.asideuser .uinfo{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.asideuser .un{font-size:13px;font-weight:600;color:var(--nav-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asideuser .uo{font-size:12px;color:var(--nav-dim-2);text-decoration:none}
.asideuser .uo:hover{color:var(--nav-ink)}
.tnum{font-family:'Space Grotesk','Inter',sans-serif;font-variant-numeric:tabular-nums;
  font-weight:600}
.muted{color:var(--slate)}
td .t2{font-size:12.5px;color:var(--slate);margin-top:.1rem}
@media(max-width:860px){
  .phead h1{font-size:1.4rem}
  .phead .pr{margin-left:0;width:100%;justify-content:flex-start}
  .stats{grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.7rem}
  .stat{padding:.85rem .9rem}
  .stat .v{font-size:1.7rem}
  .stat .ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
  .panel th{padding:.55rem .9rem}
  .panel td{padding:.7rem .9rem}
  .panel > .ph{padding:.9rem .9rem .75rem}
}


/* Build Board. Five columns, three of them work_items and two of them blockers,
   which is why a card says what kind of thing it is rather than assuming. */
.kboard{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.75rem;align-items:flex-start}
.kcol{flex:0 0 272px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.85rem .8rem .8rem;box-shadow:var(--shadow)}
.kcol .kh{border-left:3px solid var(--line);padding-left:.7rem;margin-bottom:.85rem}
.kcol .kh .kt{display:flex;align-items:center;gap:.45rem;font-size:15px;font-weight:700;
  letter-spacing:-.01em}
.kcol .kh .kn{font-family:'Space Grotesk','Inter',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--slate)}
.kcol .kh .ks{font-size:12px;color:var(--slate);margin-top:.12rem;line-height:1.35}
.kcol.c-queued .kh{border-left-color:var(--violet-ink)}
.kcol.c-building .kh{border-left-color:var(--info)}
.kcol.c-waiting .kh{border-left-color:var(--warn-text)}
.kcol.c-needs .kh{border-left-color:var(--danger-text)}
.kcol.c-done .kh{border-left-color:var(--ok-text)}
.kcol.c-building .kh .kt{color:var(--info)}
.kcol.c-waiting .kh .kt{color:var(--warn-text)}
.kcol.c-needs .kh .kt{color:var(--danger-text)}
.kcol.c-done .kh .kt{color:var(--ok-text)}
.kitem{display:block;border:1px solid var(--line);border-radius:9px;padding:.65rem .7rem;
  margin-bottom:.55rem;background:var(--card);color:inherit}
.kitem:hover{border-color:var(--cyan);box-shadow:var(--shadow-md)}
.kitem .kn{font-weight:650;font-size:13.5px;line-height:1.35}
.kitem .kc{font-size:12px;color:var(--slate);margin-top:.15rem}
.kitem .kf{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;flex-wrap:wrap}
.kitem .kmoney{display:flex;align-items:baseline;gap:.4rem;margin-top:.45rem;flex-wrap:wrap;
  font-size:13px}
.kitem .kmoney b{font-family:'Space Grotesk','Inter',sans-serif;font-size:15px;font-weight:700}
.kitem .kf .kw{margin-left:auto;display:flex;align-items:center;gap:.35rem;font-size:11.5px;
  color:var(--slate);white-space:nowrap}
.kitem .kf .kw .avat{width:22px;height:22px;flex:0 0 22px;font-size:9.5px}
.ktime{font-size:11.5px;color:var(--slate);display:inline-flex;align-items:center;gap:.28rem;
  white-space:nowrap}
.ktime svg{width:12px;height:12px}
.kadd{display:block;text-align:center;padding:.55rem;border-radius:8px;background:var(--card-2);
  border:1px dashed var(--line);color:var(--slate);font-size:12.5px;font-weight:600}
.kadd:hover{border-color:var(--cyan);color:var(--info)}
.kcards:not(.all) > .kitem:nth-child(n+13){display:none}
button.kmore{width:100%;background:transparent;border:0;cursor:pointer;font:inherit}
.kmore{display:block;text-align:center;padding:.4rem;font-size:12px;color:var(--info);
  font-weight:600;margin-bottom:.5rem}
.kempty{text-align:center;color:var(--muted);font-size:12.5px;padding:1.1rem .3rem}

/* Filter bar: a plain GET form, so a filtered board is a URL you can send. */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.25rem}
.filters input[type=search],.filters input[type=text]{flex:1 1 250px;min-width:0;margin:0;
  padding:.55rem .75rem;border:1px solid var(--line);border-radius:9px;background:var(--card);
  font-size:13.5px}
.filters select{margin:0;padding:.55rem .7rem;border-radius:9px;font-size:13.5px;
  background:var(--card);min-width:130px}
.filters .fclear{padding:.55rem .9rem;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink-2);font-size:13.5px;font-weight:600;width:auto}
.filters .fclear:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.filters .fright{margin-left:auto;display:flex;gap:.5rem;align-items:center}
.segbar{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:var(--card)}
.segbar a{padding:.5rem .9rem;font-size:13px;font-weight:600;color:var(--slate)}
.segbar a.on{background:var(--info-bg);color:var(--info-ink)}
.segbar a:hover:not(.on){background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
@media(max-width:860px){
  .kcol{flex:0 0 80vw;max-width:310px;scroll-snap-align:start}
  .kboard{scroll-snap-type:x proximity;gap:.7rem}
  .filters .fright{margin-left:0;width:100%}
}


/* Clients list: the caret column and the inline account preview. */
th.cx,td.cx{width:34px;padding-left:1.1rem;padding-right:0}
a.caret{display:inline-flex;color:var(--muted);transition:transform .15s ease}
a.caret:hover{color:var(--info)}
a.caret.on{transform:rotate(90deg);color:var(--info)}
a.caret svg{width:16px;height:16px}
.cprev-h{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.25rem 1rem}
.cmark{width:58px;height:58px;flex:0 0 58px;border-radius:12px;background:var(--nav-bg);
  color:var(--nav-ink);display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}
.cprev-id{min-width:0;flex:1 1 auto}
.cprev-id h3{margin:0 0 .15rem;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.cprev-url{font-size:13px;color:var(--info);font-weight:600}
.cprev-facts{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:.85rem}
.cprev-facts div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cprev-facts span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate)}
.cprev-facts b{font-size:14px;font-weight:650}
.cprev-facts i{font-style:normal;font-size:12.5px;color:var(--slate)}
.cprev-x{margin-left:auto;color:var(--muted);font-size:22px;line-height:1;padding:0 .2rem}
.cprev-x:hover{color:var(--ink)}
.cprev-tabs{display:flex;gap:.25rem;padding:0 1.25rem;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.cprev-tabs::-webkit-scrollbar{display:none}
.cprev-tabs a{padding:.55rem .85rem;font-size:13.5px;font-weight:500;color:var(--slate);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.cprev-tabs a.on{color:var(--emph);border-bottom-color:var(--cyan);font-weight:650}
.cprev-tabs a:hover{color:var(--ink)}
.cprev-b{display:grid;grid-template-columns:1fr 320px;gap:1.6rem;padding:1.2rem 1.25rem 1.4rem}
.cprev-b h4{margin:0 0 .35rem;font-size:14px;font-weight:700}
.cprev-b p{margin:0 0 1.1rem;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.cprev-b .reqs{margin-top:0}
.qstats{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.qstats h4{margin-bottom:.6rem}
.qstats div{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;font-size:13px;
  color:var(--slate);border-top:1px solid var(--line)}
.qstats div:first-of-type{border-top:0}
.qstats b{color:var(--ink);font-family:'Space Grotesk','Inter',sans-serif}
.qstats b.hot{color:var(--danger-text)}
@media(max-width:860px){
  .cprev-b{grid-template-columns:1fr;gap:1rem}
  .cprev-facts{gap:1.1rem}
}


/* The account page: breadcrumb, header block, and the two grids the brief uses. */
.crumbrow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.crumbs{font-size:13px;color:var(--slate);margin:0}
.crumbs a{color:var(--info);font-weight:600}
.crumbs span{margin:0 .35rem;color:var(--muted)}
.chead{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.3rem}
.chead .cprev-facts{margin-top:.2rem;margin-left:auto;gap:1.9rem}
.chead-act{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-left:auto}
.brief-h{display:flex;gap:.9rem;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:1.1rem 1.25rem;margin-bottom:1.4rem}
.brief-h .ico{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:var(--info-bg);color:var(--info-ink)}
.brief-h .ico svg{width:22px;height:22px}
.brief-h h3{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.brief-h .sub{margin:.1rem 0 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start}
.two .panel,.three .panel{margin-bottom:1.25rem}
@media(max-width:1100px){ .three{grid-template-columns:1fr} }
@media(max-width:860px){
  .two{grid-template-columns:1fr}
  .chead .cprev-facts{margin-left:0;gap:1.1rem}
  .chead-act{justify-content:flex-start}
}


/* Intake: the submit forms, the feed, and the detail pane beside it. */
.isplit{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:1.25rem;align-items:start}
.iform textarea{width:100%;min-height:96px;margin:0 0 .8rem}
.iform input[type=file]{margin:0 0 .4rem}
.irow{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}
.irow label{display:flex;flex-direction:column;gap:.25rem;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--slate);flex:1 1 170px;min-width:0}
.irow input,.irow select{margin:0;padding:.5rem .6rem;font-size:13.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.irow .btn{flex:0 0 auto}
.ipane{padding:1.1rem 1.25rem 1.3rem}
.ipane h4{margin:0 0 .4rem;font-size:14px;font-weight:700}
.ipane p{margin:0 0 .8rem;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.ipane .sub{margin:.5rem 0 0}
.itext{background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:.85rem 1rem;
  font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  max-height:460px;overflow:auto;margin:0 0 .9rem}
a.ifeed{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem 1.25rem;
  border-top:1px solid var(--line);color:inherit}
a.ifeed:first-of-type{border-top:1px solid var(--line)}
a.ifeed:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
a.ifeed.on{background:var(--info-bg)}
a.ifeed .ico{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;background:var(--info-bg);color:var(--info-ink)}
a.ifeed.on .ico{background:var(--card)}
a.ifeed .ico svg{width:17px;height:17px}
.ib{min-width:0;flex:1 1 auto}
.ib .it{display:block;font-weight:650;font-size:13.5px;line-height:1.35}
.ib .is{display:block;font-size:12px;color:var(--slate);margin-top:.1rem}
.ir{margin-left:auto;text-align:right;font-size:11.5px;color:var(--slate);white-space:nowrap}
.ihead{display:flex;gap:.85rem;align-items:center;padding:1.1rem 1.25rem .9rem}
.ihead .ico{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--info-bg);color:var(--info-ink)}
.ihead h3{margin:0;font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
@media(max-width:1000px){ .isplit{grid-template-columns:1fr} }


/* A list that shows a few rows and scrolls for the rest. The header stays put,
   because a scrolled table with the header gone is a wall of unlabelled cells. */
.sbox{max-height:calc(var(--rows,6) * 4rem + 2.4rem);overflow-y:auto;overflow-x:auto}
.sbox thead th{position:sticky;top:0;z-index:1;background:var(--card);
  box-shadow:0 1px 0 var(--line)}
.sbox::-webkit-scrollbar{width:10px;height:10px}
.sbox::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}


/* Command Center: four columns, one per business function. */
.msof{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:start}
.msof-col{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:.9rem}
.msof-h{display:flex;gap:.7rem;align-items:center;padding:.2rem .3rem 1rem}
.msof-h .ico{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--chip-bg);color:var(--slate)}
.msof-h .ico svg{width:19px;height:19px}
.msof-h .ico.violet{background:var(--violet-bg);color:var(--violet-ink)}
.msof-h .ico.blue{background:var(--info-bg);color:var(--info-ink)}
.msof-h .ico.amber{background:var(--amber-bg);color:var(--amber-ink)}
.msof-h .ico.green{background:var(--ok-bg);color:var(--ok-ink)}
.msof-h b{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.msof-h span{display:block;font-size:12px;color:var(--slate);line-height:1.35}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem;
  margin-bottom:.7rem;box-shadow:var(--shadow)}
.kpi:hover{border-color:var(--cyan)}
.kpi-h{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.kpi .kl{font-size:13px;font-weight:650;line-height:1.3}
.kpi .kt{margin-left:auto;font-size:11.5px;color:var(--slate);white-space:nowrap}
.kpi .kv{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.65rem;font-weight:700;
  line-height:1.15;letter-spacing:-.02em;margin-top:.25rem}
.kpi .kv.ok{color:var(--ok-text)}.kpi .kv.danger{color:var(--danger-text)}
.kpi .kv.warn{color:var(--warn-text)}
.kpi .bar{height:5px;border-radius:4px;background:var(--chip-bg);margin:.5rem 0 .45rem;overflow:hidden}
.kpi .bar i{display:block;height:100%;border-radius:4px;background:var(--info)}
.kpi .bar i.ok{background:var(--ok-text)}.kpi .bar i.danger{background:var(--danger-text)}
.kpi .bar i.warn{background:var(--warn-text)}
.kpi .ks{font-size:12px;color:var(--slate);line-height:1.4}
.msof-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}
.msof-inline .kpi{margin-bottom:0}
@media(max-width:1200px){ .msof{grid-template-columns:repeat(2,1fr)} }
@media(max-width:700px){ .msof{grid-template-columns:1fr} }


/* Charts. One series is drawn in the single accent; categorical series get the
   fixed channel hues below, which were validated for colour-blind separation
   against both surfaces (dataviz validate_palette.js) rather than eyeballed. */
:root{
  --c1:#1D6FF2; --c2:#D9457F; --c3:#B45309; --c4:#047857; --c5:#6D45D9; --c6:#64748B;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --c1:#4A8BE8; --c2:#DD5F92; --c3:#B8801C; --c4:#1FA87A; --c5:#9B7BEA; --c6:#93A8BC;
} }
:root[data-theme="dark"]{
  --c1:#4A8BE8; --c2:#DD5F92; --c3:#B8801C; --c4:#1FA87A; --c5:#9B7BEA; --c6:#93A8BC;
}
.chart{--h:170px}
.chart .bars{display:flex;align-items:flex-end;gap:2px;height:var(--h);
  border-bottom:1px solid var(--line)}
.bcol{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.bwrap{flex:1;display:flex;align-items:flex-end;padding:0 2px}
/* A bar wider than it is tall stops reading as a bar, so they are capped. */
.bar-v{width:100%;max-width:72px;margin:0 auto;background:var(--c1);
  border-radius:4px 4px 0 0;min-height:2px}
.blab{font-size:11px;color:var(--slate);text-align:center;padding:.35rem .1rem 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baxis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);
  margin-top:.35rem}
/* A ranked list with a bar behind each row: the honest form when there are two
   or three categories and a pie would be a decoration. */
.chlist{display:flex;flex-direction:column;gap:.65rem}
.chrow{display:grid;grid-template-columns:10px 1fr auto auto;gap:.5rem;align-items:center;
  font-size:13px}
.chrow .cdot{width:10px;height:10px;border-radius:3px;background:var(--c6)}
.chrow.c1 .cdot{background:var(--c1)}.chrow.c2 .cdot{background:var(--c2)}
.chrow.c3 .cdot{background:var(--c3)}.chrow.c4 .cdot{background:var(--c4)}
.chrow.c5 .cdot{background:var(--c5)}
.chrow b{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrow .cn{font-size:12px;color:var(--slate)}
.chrow .cv{font-size:12.5px;color:var(--slate)}
.chrow .cbar{grid-column:1/-1;height:5px;border-radius:4px;background:var(--chip-bg);
  overflow:hidden;margin-top:-.2rem}
.chrow .cbar i{display:block;height:100%;border-radius:4px;background:var(--c6)}
.chrow.c1 .cbar i{background:var(--c1)}.chrow.c2 .cbar i{background:var(--c2)}
.chrow.c3 .cbar i{background:var(--c3)}.chrow.c4 .cbar i{background:var(--c4)}
.chrow.c5 .cbar i{background:var(--c5)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.wgrid div span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate)}
.wgrid div b{display:block;font-size:1.15rem;font-weight:700;margin:.15rem 0 .1rem}
.wgrid div i{font-style:normal;font-size:12.5px;color:var(--slate)}
.rsplit{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:1.25rem;align-items:start}
@media(max-width:1000px){ .rsplit{grid-template-columns:1fr} }


/* Sales process: the three call types, the step rail, and the step itself. */
.calltypes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.4rem}
a.ctype{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow);
  color:inherit}
a.ctype:hover{border-color:var(--cyan)}
a.ctype.on{border-color:var(--info);box-shadow:0 0 0 1px var(--info) inset,var(--shadow)}
a.ctype .ico{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--chip-bg);color:var(--slate)}
a.ctype .ico.blue{background:var(--info-bg);color:var(--info-ink)}
a.ctype .ico.violet{background:var(--violet-bg);color:var(--violet-ink)}
a.ctype .ico.green{background:var(--ok-bg);color:var(--ok-ink)}
a.ctype b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
a.ctype.on b{color:var(--emph)}
a.ctype i{display:block;font-style:normal;font-size:13px;color:var(--slate);margin:.05rem 0 .3rem}
a.ctype em{display:block;font-style:normal;font-size:12.5px;color:var(--slate);line-height:1.45}

/* Troubleshooting: TOPO framework strip, same card pattern as .calltypes but
   four across and not a link (nothing to navigate to). */
.topogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.4rem}
.topoitem{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow)}
.topoitem .ico{width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--chip-bg);color:var(--slate)}
.topoitem .ico.blue{background:var(--info-bg);color:var(--info-ink)}
.topoitem .ico.violet{background:var(--violet-bg);color:var(--violet-ink)}
.topoitem .ico.amber{background:var(--amber-bg);color:var(--amber-ink)}
.topoitem .ico.green{background:var(--ok-bg);color:var(--ok-ink)}
.topoitem b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.topoitem em{display:block;font-style:normal;font-size:12.5px;color:var(--slate);line-height:1.45;margin-top:.2rem}
.psplit{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:1.25rem;align-items:start}
.steps{padding:.3rem 0 .6rem}
a.step{display:flex;gap:.7rem;align-items:center;padding:.7rem 1.25rem;color:inherit;
  border-top:1px solid var(--line)}
a.step:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
a.step.on{background:var(--info-bg)}
a.step .sn{width:26px;height:26px;flex:0 0 26px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:var(--slate);background:var(--card)}
a.step.on .sn{border-color:var(--info);color:var(--info-ink)}
a.step .sl{font-size:13.5px;font-weight:600;min-width:0}
a.step .sm{margin-left:auto;font-size:12px;color:var(--slate);white-space:nowrap}
.stephead{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.steptitle{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .8rem;
  text-transform:none;color:var(--ink);display:block}
.stepnav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.mdoc h2.mdh{margin:1.4rem 0 .5rem;font-size:17px}
.mdoc h3.mdh{margin:1.1rem 0 .35rem;font-size:15px}
.mdoc p,.mdoc li{line-height:1.65;font-size:13.8px}
.mdoc ol,.mdoc ul{padding-left:1.3rem;margin:.4rem 0}
.mdoc li{margin:.25rem 0}
.mdoc blockquote{margin:.7rem 0;padding:.65rem .95rem;border-left:3px solid var(--cyan);
  background:var(--card-2);border-radius:0 8px 8px 0}
.mdoc code{background:var(--chip-bg);padding:.05rem .3rem;border-radius:4px;font-size:12.5px}
.mdtable{overflow-x:auto}
.mdtable table{border-collapse:collapse;background:var(--card);margin:.6rem 0}
.mdtable th,.mdtable td{border:1px solid var(--line);padding:.4rem .6rem;text-align:left;
  vertical-align:top}
@media(max-width:1000px){
  .calltypes{grid-template-columns:1fr}
  .topogrid{grid-template-columns:1fr}
  .psplit{grid-template-columns:1fr}
}


/* Operations overview: the attention rows and the work-status list. */
.attlist{padding:.2rem 0 .4rem}
a.attrow{display:flex;gap:.8rem;align-items:center;padding:.85rem 1.25rem;color:inherit;
  border-top:1px solid var(--line)}
a.attrow:first-child{border-top:0}
a.attrow:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
a.attrow .ico{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--chip-bg);color:var(--slate)}
a.attrow .ico svg{width:19px;height:19px}
a.attrow .ico.red{background:var(--danger-bg);color:var(--danger-ink)}
a.attrow .ico.amber{background:var(--amber-bg);color:var(--amber-ink)}
a.attrow .ico.blue{background:var(--info-bg);color:var(--info-ink)}
a.attrow .ico.violet{background:var(--violet-bg);color:var(--violet-ink)}
a.attrow .ir svg{width:16px;height:16px}
.wstat{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;font-size:13.5px;
  border-top:1px solid var(--line)}
.wstat:first-child{border-top:0}
.wstat b{font-weight:600}
.wstat .tnum{margin-left:auto;font-size:15px}
.wdot{width:10px;height:10px;border-radius:50%;background:var(--c6)}
.wdot.c1{background:var(--c1)}.wdot.c2{background:var(--c2)}
.wdot.c3{background:var(--c3)}.wdot.c4{background:var(--c4)}


/* The sales board. Unlike the Build Board, a whole column is tinted: the stage
   is the point here, and a tint reads as a zone where a coloured rule reads as
   a divider. */
.sboard .scol{flex:0 0 272px;border:1px solid var(--scol-line,var(--line));border-radius:12px;
  padding:.85rem .8rem .8rem;box-shadow:var(--shadow);background:var(--scol-bg,var(--card))}
.sboard .scol.t-op{--scol-bg:var(--sop-bg);--scol-card:var(--sop-card);--scol-line:var(--sop-line)}
.sboard .scol.t-demo{--scol-bg:var(--sdemo-bg);--scol-card:var(--sdemo-card);--scol-line:var(--sdemo-line)}
.sboard .scol.t-stale{--scol-bg:var(--sstale-bg);--scol-card:var(--sstale-card);--scol-line:var(--sstale-line)}
.sboard .scol.t-hold{--scol-bg:var(--shold-bg);--scol-card:var(--shold-card);--scol-line:var(--shold-line)}
.sboard .scol.t-won{--scol-bg:var(--swon-bg);--scol-card:var(--swon-card);--scol-line:var(--swon-line)}
.sboard .scol.t-dorm{--scol-bg:var(--sdorm-bg);--scol-card:var(--sdorm-card);--scol-line:var(--sdorm-line)}
.sboard .scol.t-lost{--scol-bg:var(--slost-bg);--scol-card:var(--slost-card);--scol-line:var(--slost-line)}
.sch{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.1rem .2rem .8rem}
.sch b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sch .n{font-family:'Space Grotesk','Inter',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--slate);margin-left:auto}
.sch .sb{width:100%;font-size:12px;color:var(--slate);line-height:1.35;margin-top:-.15rem}
.t-hold .sch b{color:var(--warn-text)}
.t-won .sch b{color:var(--ok-text)}
.t-lost .sch b{color:var(--danger-text)}
.scard{background:var(--scol-card,var(--card));border:1px solid var(--scol-line,var(--line));
  border-radius:9px;padding:.7rem .75rem;margin-bottom:.6rem;cursor:pointer;min-width:0;overflow:hidden}
.scard:hover{border-color:var(--cyan);box-shadow:var(--shadow-md)}
.scard .sh{display:flex;align-items:flex-start;gap:.5rem}
.scard .sh b{font-size:13.8px;font-weight:650;line-height:1.3;min-width:0}
.scard .sdots{margin-left:auto;color:var(--muted);letter-spacing:.08em;font-size:12px;
  line-height:1}
.scard .svia{display:flex;gap:.5rem;align-items:baseline;font-size:12px;color:var(--slate);
  margin-top:.1rem}
.scard .sage{margin-left:auto;white-space:nowrap}
.scard .smoney{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 .45rem;
  font-size:13px}
.scard .smoney b{font-family:'Space Grotesk','Inter',sans-serif;font-size:16px;font-weight:700}
.scard .sline{display:flex;align-items:center;gap:.4rem;font-size:12.5px;color:var(--ink-2);
  margin-top:.25rem}
.scard .sline svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
.scard .stags{margin-top:.55rem;display:flex;flex-wrap:wrap;gap:.3rem}
/* Card redesign 2026-10-03: lead score badge, source chip, the next thing that happens. */
.scard .sh{align-items:center}
.scard .sscore{margin-left:auto;flex:none;font-family:'Space Grotesk','Inter',sans-serif;font-size:12.5px;font-weight:700;
  min-width:34px;text-align:center;padding:3px 8px;border-radius:999px;background:var(--card-2);color:var(--slate)}
.scard .sscore.hi{background:var(--ok-bg);color:var(--ok-text)}
.scard .sscore.mid{background:var(--warn-bg);color:var(--warn-text)}
.scard .sscore.lo{background:var(--card-2);color:var(--slate)}
.scard .sscore.none{font-family:inherit;font-weight:500;font-size:11.5px;color:var(--muted);background:transparent;padding:3px 0}
.scard .svia{align-items:center;margin-top:.3rem}
.scard .sco{font-size:12.5px;color:var(--slate);margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard .ssrc{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--card-2);color:var(--ink-2)}
.scard .snext{display:flex;align-items:center;gap:.4rem;font-size:12.5px;color:var(--ink-2);padding-top:.5rem;
  border-top:1px solid var(--scol-line,var(--line))}
.scard .snext svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted)}
.scard .snext span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard .snext.call{color:var(--ink);font-weight:600}.scard .snext.call svg{color:var(--cyan)}
/* The deal pop-up (lib/deal_modal.js, Joel 2026-10-03 "the modal on the pipeline is pretty bad"). One 8px base: tiles,
   fields and gaps are multiples of it. Calm cards, grey sentence-case labels, colour only for state, Save pinned. */
dialog.deal{max-width:min(960px,96vw);width:960px}
dialog.deal .mbody{padding:16px 24px 0;max-height:78vh;min-height:420px}
/* Tabs, progress and health (Joel 2026-10-03: CC-style tabs, bigger, more gamified). */
dialog.deal .mhead .dco{font-size:13px;font-weight:500;opacity:.75;margin-left:6px}
dialog.deal .mhead .dhr{display:flex;align-items:center;gap:12px;margin-left:auto}
dialog.deal .dglance .gt.gbad{grid-column:1/-1}
dialog.deal .mhead .sscore{font-size:16px;padding:3px 10px}
dialog.deal .dprog{display:flex;list-style:none;margin:0 0 16px;padding:0;gap:0}
dialog.deal .dprog li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-width:0}
dialog.deal .dprog li::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
dialog.deal .dprog li:first-child::before{display:none}
dialog.deal .dprog li.done::before{background:var(--ok-line)}
dialog.deal .dpd{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  background:var(--card-2);border:2px solid var(--line);color:var(--muted);position:relative;z-index:1}
dialog.deal .dprog li.done .dpd{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-text)}
dialog.deal .dprog li.now .dpd{border-color:var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent)}
dialog.deal .dpl{font-size:12px;font-weight:600;color:var(--slate);text-align:center;white-space:nowrap}
dialog.deal .dprog li.now .dpl{color:var(--ink)}
dialog.deal .dtabs{margin:0 0 16px;min-height:0}
dialog.deal .dtabs a{text-decoration:none}
dialog.deal .dpane[hidden]{display:none}
dialog.deal .dhealth{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--card)}
dialog.deal .dhh{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
dialog.deal .dhh span{font-size:12.5px;font-weight:600;color:var(--slate)}
dialog.deal .dhbar{height:8px;border-radius:8px;background:var(--card-2);margin:8px 0 10px;overflow:hidden}
dialog.deal .dhbar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--cyan),var(--ok-text));transition:width .4s ease}
dialog.deal .dhl{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
dialog.deal .dhl .ok{color:var(--ok-text);font-weight:600}
dialog.deal .dglance.one{grid-template-columns:1fr}
dialog.deal .dglance.one .gtier{grid-column:auto}
dialog.deal .dacts{display:flex;flex-direction:column;gap:8px;margin:4px 0 16px}
dialog.deal .dact{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
dialog.deal .dact b{font-size:13.5px}
dialog.deal .dact p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
dialog.deal .dai{flex:none;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--info-bg);color:var(--info-ink)}
dialog.deal .dai.t{background:var(--ok-bg);color:var(--ok-text)}
dialog.deal .dempty{color:var(--muted);font-size:13.5px;margin:8px 0 16px}
dialog.deal .dpane .dnotes{white-space:pre-line;font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:16px}
@media(max-width:640px){dialog.deal{width:auto}dialog.deal .mbody{padding:12px 14px 0}dialog.deal .dpl{font-size:10.5px}
  dialog.deal .dpd{width:24px;height:24px;font-size:12px}dialog.deal .dprog li::before{top:11px}}
dialog.deal .derr{color:var(--danger-text);font-size:13px;font-weight:600;margin-bottom:12px}
dialog.deal .dlost{font-size:13.5px;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;margin-bottom:16px}
dialog.deal .dlost b{color:var(--ink);margin-right:4px}
dialog.deal .dprim{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
dialog.deal .dprim + .dprim{margin-top:-8px}
dialog.deal .dpk{font-size:14px;font-weight:650;color:var(--ink);margin-right:auto}
dialog.deal .dprim input[name=note]{flex:1 1 220px;min-width:0;margin:0}
dialog.deal .dbtn{width:auto;padding:8px 16px;border-radius:8px;font-size:13.5px;font-weight:600;border:1px solid transparent;
  background:var(--navy);color:var(--on-solid);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;line-height:1.25;font-family:inherit;white-space:nowrap}
dialog.deal .dbtn:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
dialog.deal .dbtn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
dialog.deal .dbtn.ghost:hover{background:var(--card-2);border-color:var(--slate)}
dialog.deal .dlink{width:auto;background:transparent;border:0;padding:4px 0;color:var(--info);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit}
dialog.deal .dlink:hover{background:transparent;text-decoration:underline}
dialog.deal .dsec{border-top:1px solid var(--line);padding:16px 0;margin:0}
dialog.deal .dsec.dtop{border-top:0;padding-top:4px}
dialog.deal .dsec h4{margin:0 0 12px;font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--slate)}
/* At a glance: tiles, 3 across on a wide screen, 2 on a phone. The tier tile is two wide. */
dialog.deal .dglance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
dialog.deal .gt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;text-align:left;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);font:inherit;margin:0;width:auto}
dialog.deal .gk{font-size:12px;font-weight:600;color:var(--slate)}
dialog.deal .gv{font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.01em;line-height:1.25;min-width:0}
dialog.deal .gs{font-size:12px;color:var(--muted);line-height:1.35}
dialog.deal .gnone{font-family:'Inter',sans-serif;font-weight:500;font-size:14px;color:var(--muted)}
dialog.deal .gt.gbad{background:var(--danger-bg);border-color:var(--danger-line)}
dialog.deal .gt.gbad .gv,dialog.deal .gt.gbad .gk{color:var(--danger-ink)}
dialog.deal .gt.gwarn .gs{color:var(--warn-text)}
dialog.deal .gscore{cursor:pointer;transition:border-color .15s ease}
dialog.deal .gscore:hover:not([disabled]){border-color:var(--cyan);background:var(--card-2)}
dialog.deal .gscore[disabled]{cursor:default;opacity:1}
dialog.deal .gscore[aria-expanded=true]{border-color:var(--cyan)}
dialog.deal .gmore{color:var(--info);font-weight:600}
dialog.deal .sscore{font-family:'Space Grotesk','Inter',sans-serif;font-size:18px;font-weight:700;min-width:44px;text-align:center;
  padding:4px 10px;border-radius:999px;background:var(--card);color:var(--slate);border:1px solid var(--line)}
dialog.deal .sscore.hi{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-line)}
dialog.deal .sscore.mid{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-line)}
dialog.deal .sscore.none{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--muted);background:transparent;border:0;padding:0;min-width:0}
dialog.deal .gverd{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink-2)}
dialog.deal .gtier{grid-column:span 2}
dialog.deal .gprice{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink-2)}
dialog.deal .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;margin-top:4px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px}
dialog.deal .seg label{position:relative;display:block;cursor:pointer;margin:0;min-width:0}
dialog.deal .seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
dialog.deal .seg span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:7px;
  border:1px solid transparent;text-align:center;color:var(--ink-2)}
dialog.deal .seg b{font-size:13px;font-weight:650;color:var(--ink)}
dialog.deal .seg small{font-size:11.5px;color:var(--muted);white-space:nowrap}
dialog.deal .seg em{font-style:normal;font-size:11px;font-weight:700;color:var(--ok-text)}
dialog.deal .seg label:hover span{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
dialog.deal .seg input:checked + span{background:var(--info-bg);border-color:var(--info);}
dialog.deal .seg input:checked + span b{color:var(--info-ink)}
dialog.deal .seg input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:1px}
dialog.deal .grow{display:flex;align-items:center;gap:16px;margin-top:4px;flex-wrap:wrap}
/* The fit score's answers, each with the line from the call it came from. */
dialog.deal .fitbd{margin-top:8px;border:1px solid var(--line);border-radius:10px;padding:4px 12px;background:var(--card)}
dialog.deal .fitbd[hidden]{display:none}
dialog.deal .fbr{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
dialog.deal .fbr:last-of-type{border-bottom:0}
dialog.deal .fbk{color:var(--slate);font-weight:600;font-size:12.5px}
dialog.deal .fbv{color:var(--ink);min-width:0}
dialog.deal .fbv q{display:block;margin-top:4px;color:var(--ink-2);font-style:italic;font-size:13px}
dialog.deal .fbg{font-size:11px;font-weight:600;color:var(--warn-text);background:var(--warn-bg);border-radius:4px;padding:1px 6px;margin-left:4px}
dialog.deal .fbg.joel{color:var(--info-ink);background:var(--info-bg)}
dialog.deal .fbn{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
dialog.deal .fbfix{display:flex;align-items:center;gap:8px;margin:6px 0 0}
dialog.deal .fbfix select{width:auto;max-width:100%;margin:0;padding:4px 8px;font-size:13px;border-radius:7px;min-height:32px}
dialog.deal .fbf{font-size:12px;color:var(--muted);padding:8px 0;border-top:1px solid var(--line)}
dialog.deal .dnotes{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
dialog.deal .dnotes.clamp{max-height:7.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent)}
dialog.deal .dchat{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600}
dialog.deal .dq{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13.5px}
dialog.deal .dq:last-child{border-bottom:0}
dialog.deal .dq b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.deal .dq span{color:var(--ink-2)}
dialog.deal .dq:hover b{color:var(--info);text-decoration:underline}
/* The edit form: labelled fields two across. */
dialog.deal .dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
dialog.deal .dgrid label,dialog.deal label.dfull{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--slate);margin:0;min-width:0}
dialog.deal label.dfull{grid-column:1 / -1}
dialog.deal .dsec > label.dfull{margin-top:12px}
dialog.deal .dgrid input,dialog.deal .dgrid select,dialog.deal label.dfull input{width:100%;margin:0;padding:8px 12px;font-size:14px;
  border-radius:8px;min-height:40px;font-weight:400;color:var(--ink)}
dialog.deal .dhint{font-weight:400;color:var(--muted);font-size:12px}
dialog.deal .dfoot{position:sticky;bottom:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 0 16px;
  background:var(--card);border-top:1px solid var(--line);margin-top:0}
dialog.deal .dfoot .dbtn:first-child{min-width:96px}
@media(max-width:640px){
  dialog.deal .mbody{padding:12px 16px 0;max-height:80vh}
  dialog.deal .dglance{grid-template-columns:repeat(2,minmax(0,1fr))}
  dialog.deal .gfit{grid-column:span 2}
  dialog.deal .dgrid{grid-template-columns:minmax(0,1fr)}
  dialog.deal .fbr{grid-template-columns:minmax(0,1fr);gap:2px}
  dialog.deal .dbtn{flex:1 1 auto}
  dialog.deal .dprim input[name=note]{flex-basis:100%}
  dialog.deal .dpk{flex-basis:100%}
}
.sboard .kadd{margin-top:.2rem;background:transparent;border-style:dashed;
  border-color:var(--scol-line,var(--line))}
.sboard .kadd:hover{background:var(--scol-card,var(--card-2))}
.t-demo .sch b{color:var(--info)}
.t-stale .sch b{color:var(--warn-text)}
.t-dorm .sch b{color:var(--slate)}
@media(max-width:860px){ .sboard .scol{flex:0 0 80vw;max-width:310px} }


.pager{display:flex;align-items:center;gap:.8rem;justify-content:flex-end;margin:-.6rem 0 1.5rem}
.pfoot .fright{margin-left:auto}
td .tick{margin:0}


/* Sales Intelligence: the objection list and the answer beside it. */
a.pbrow{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1.25rem;color:inherit;
  border-top:1px solid var(--line)}
a.pbrow:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
a.pbrow.on{background:var(--info-bg)}
a.pbrow .it{display:block;font-weight:650;font-size:13.8px;line-height:1.4}
a.pbrow .ir{margin-left:auto;text-align:right;font-size:11.5px;color:var(--slate);
  white-space:nowrap}
a.pbrow .pbchev{color:var(--muted);display:flex;align-items:center}
a.pbrow .pbchev svg{width:15px;height:15px}
.pbtags{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem}
.pbhead{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem;flex-wrap:wrap}
.pbacts{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pbacts form{display:inline}
.pbtext{font-size:14px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap;margin:0}
.ipane .msec{margin-bottom:1.25rem}
.ipane .msec h4{margin:0 0 .4rem;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate);font-weight:700}
a.pbcall{display:flex;gap:.6rem;align-items:center;padding:.55rem 0;color:inherit;
  border-top:1px solid var(--line)}
a.pbcall:first-of-type{border-top:0}
a.pbcall .ico{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;background:var(--info-bg);color:var(--info-ink)}
a.pbcall .ico svg{width:15px;height:15px}
a.pbcall .it{display:block;font-size:13px;font-weight:600}
a.pbcall .is{display:block;font-size:12px;color:var(--slate)}
.pbsearch{margin:0}
.pbsearch input{margin:0;padding:.55rem .75rem;border:1px solid var(--line);border-radius:9px;
  background:var(--card);font-size:13.5px;min-width:260px}
@media(max-width:860px){ .pbsearch input{min-width:0;width:100%} }


/* One line, whatever the column width. A two-line detail under every task turns
   a 25-row table into a wall; the whole detail is one click away in the row. */
.clamp1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nowrap{white-space:nowrap}

/* Sortable column headings. A plain link per heading, so the sort is in the URL
   and survives a reload, a share and the back button. */
th.sortcol{padding:0}
th.sortcol a{display:flex;align-items:center;gap:.3rem;padding:.6rem 1.25rem;color:inherit;
  font:inherit;white-space:nowrap}
th.sortcol a:hover{color:var(--info)}
th.sortcol .ar{font-size:9px;line-height:1;color:var(--muted)}
th.sortcol.on a{color:var(--emph)}
th.sortcol.on .ar{color:var(--info)}

/* A table that becomes a list of cards on a phone rather than a sideways scroll
   with half its columns off the edge. Each cell carries its own label. */
@media(max-width:760px){
  .mstack table{min-width:0;width:100%}
  .mstack thead{display:none}
  .mstack tbody,.mstack tr,.mstack td{display:block;width:auto}
  .mstack tr{border-top:1px solid var(--line);padding:.75rem 1rem .85rem;position:relative}
  .mstack tr:first-child{border-top:0}
  .mstack td{border:0;padding:.12rem 0}
  .mstack td.cx{position:absolute;right:.9rem;top:.75rem;padding:0;width:auto}
  .mstack td[data-l]{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
  .mstack td[data-l]::before{content:attr(data-l);flex:0 0 5.5rem;font-size:10.5px;
    font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
  /* Due/Created carry .nowrap for the desktop table, where it keeps "Sep 15"
     on one line; that white-space also inherits into this flex row, where it
     instead fights the wrap above and squeezes the value against the label. */
  .mstack td[data-l].nowrap{white-space:normal}
  .mstack td.tmain{padding-right:2rem;margin-bottom:.35rem}
  .mstack td.tmain::before{display:none}
  .mstack td.tmain b{font-size:14px}
  .mstack .sdots{display:none}
  .mstack .pfoot{flex-direction:column;align-items:flex-start}
  .mstack .pfoot .fright{margin-left:0;flex-wrap:wrap}
}


/* The play column. The button opens Fathom, where the recording actually is. */
th.cplay,td.cplay{width:46px;padding-right:0}
.playbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--info-bg);color:var(--info-ink)}
.playbtn:hover{background:var(--info);color:var(--on-solid)}
.playbtn svg{width:18px;height:18px}
.playbtn.off{background:var(--chip-bg);color:var(--muted)}
/* Recordings: the title is how a call is told apart, so it gets the widest column and wraps in full, never an
   ellipsis. The other columns keep their natural width; the row grows to fit however many lines the title takes. */
.recs .rtitle{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
@media(min-width:761px){
  .recs th.rtitle,.recs td.tmain{width:42%;min-width:20rem}
  .recs td{vertical-align:top}
}
@media(max-width:760px){
  .mstack td.cplay{position:absolute;left:1rem;top:.75rem;width:auto;padding:0}
  .mstack td.cplay + td{margin-left:2.6rem}
  .mstack td.tmain{padding-left:2.6rem}
}


/* A figure against the period before it. */
.delta{font-weight:700;font-size:12.5px}
.delta.up{color:var(--ok-text)}
.delta.down{color:var(--danger-text)}
.delta.flat{color:var(--slate)}
.dsince{color:var(--slate)}
/* Dashboard's compact completion metric in the greeting row (spec "TJW Dashboard — Top Section Cleanup"),
   before the date, same .delta/.dsince trend styling as the figure above. */
.dcomp{display:flex;align-items:center;gap:.4rem;font-size:13px;color:var(--ink-2);white-space:nowrap;
  padding:.5rem .85rem;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.dcomp b{font-weight:700;color:var(--ink)}
@media(max-width:480px){.dcomp{white-space:normal}}
.phead .pr select{margin:0;padding:.55rem .8rem;border-radius:9px;background:var(--card);
  font-size:13.5px}


/* ── Marketing overview (2026-09-12, Joel's layout) ─────────────────────── */
.mkpis{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin-bottom:1.25rem}
.mkpi{background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:1.1rem 1.15rem;display:flex;gap:.9rem;align-items:flex-start}
.icon-box{width:52px;height:52px;flex:0 0 52px;border-radius:12px;display:grid;place-items:center;
  background:var(--chip-bg);color:var(--slate)}
.icon-box svg{width:24px;height:24px}
.icon-box.blue-bg{background:var(--info-bg);color:var(--info-ink)}
.icon-box.green-bg{background:var(--ok-bg);color:var(--ok-ink)}
.icon-box.purple-bg{background:var(--violet-bg);color:var(--violet-ink)}
.icon-box.orange-bg{background:var(--amber-bg);color:var(--amber-ink)}
.mkpi-b{min-width:0}
.mkpi-l{color:var(--slate);font-size:13.5px;margin:.1rem 0 .35rem}
.mkpi-v{font-family:'Space Grotesk','Inter',sans-serif;font-size:1.7rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.mkpi-n{color:var(--slate);font-size:12.5px;margin-top:.4rem}
.mkpi-n a{color:var(--info);font-weight:600}
.change{font-size:13px;font-weight:700;margin-left:.4rem}
.change.up{color:var(--ok-text)}
.change.down{color:var(--danger-text)}

.chartrow{display:grid;grid-template-columns:.92fr 1.18fr;gap:1rem;margin-bottom:1.25rem;
  align-items:start}
.leadsrc{display:flex;align-items:center;justify-content:center;gap:2.4rem;flex-wrap:wrap}
.donutwrap{position:relative;width:186px;height:186px;flex:0 0 186px}
.donut{width:186px;height:186px;border-radius:50%}
.donut::after{content:"";position:absolute;inset:36px;border-radius:50%;background:var(--card)}
.donutmid{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center}
.donutmid b{display:block;font-family:'Space Grotesk','Inter',sans-serif;font-size:1.9rem;
  font-weight:700;letter-spacing:-.02em}
.donutmid span{font-size:13px;color:var(--slate)}
.dlegend{min-width:210px;flex:1 1 210px}
.dlrow{display:grid;grid-template-columns:14px 1fr auto;gap:.7rem;align-items:center;
  margin:.85rem 0;font-size:13.5px}
.dot{width:13px;height:13px;border-radius:50%;background:var(--c6)}
.dot.c1{background:var(--c1)}.dot.c2{background:var(--c2)}.dot.c3{background:var(--c3)}
.dot.c4{background:var(--c4)}.dot.c5{background:var(--c5)}.dot.c6{background:var(--c6)}
.dlname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlval{color:var(--slate)}

.bchart{display:flex;height:210px;gap:.5rem}
.byaxis{width:34px;display:flex;flex-direction:column;justify-content:space-between;
  color:var(--slate);font-size:11.5px;padding-bottom:24px;text-align:right}
.bplot{flex:1;position:relative;border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 1px,
    transparent 1px,transparent 46.5px)}
.bbars{position:absolute;left:4px;right:4px;bottom:0;top:0;display:flex;align-items:flex-end;
  justify-content:space-between;gap:2px}
.bbar{flex:1 1 auto;min-width:3px;max-width:18px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--c1),var(--c1));opacity:.85}
.bbar:hover{opacity:1}
.bxlabels{position:absolute;left:0;right:0;bottom:-22px;display:flex;justify-content:space-between;
  color:var(--slate);font-size:11px}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pillar{padding:1.15rem 1.2rem;display:flex;flex-direction:column}
.pillar-head{display:flex;gap:.9rem;align-items:center;padding-bottom:.9rem;
  border-bottom:1px solid var(--line)}
.pillar-head h3{margin:0 0 .1rem;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.pillar-head .psub{font-size:13px}
.mlist{flex:1;margin-top:.2rem}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:44px;border-bottom:1px solid var(--line);color:var(--slate);font-size:13.5px}
.mrow b{color:var(--ink);font-weight:600;text-align:right}
.mrow.feature{min-height:64px}
.small-muted{display:block;color:var(--slate);font-size:12.5px;font-weight:400;margin-top:.1rem}
.pillbtn{display:block;text-align:center;margin-top:1rem;padding:.75rem;border-radius:8px;
  font-size:13.5px;font-weight:650;background:var(--chip-bg);color:var(--ink-2)}
.pillbtn.ads{background:var(--info-bg);color:var(--info-ink)}
.pillbtn.seo{background:var(--ok-bg);color:var(--ok-ink)}
.pillbtn.content{background:var(--violet-bg);color:var(--violet-ink)}
.pillbtn:hover{filter:brightness(.97)}
@media(max-width:1200px){
  .mkpis{grid-template-columns:repeat(3,1fr)}
  .pillars{grid-template-columns:1fr}
}
@media(max-width:900px){
  .chartrow{grid-template-columns:1fr}
  .mkpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){ .mkpis{grid-template-columns:1fr} }

.logo .wm{display:block;height:26px;width:auto}

/* ══ Designer shell, 2026-09-13 ════════════════════════════════════════════
   Joel's designer supplied the Marketing pages and Joel chose to carry their
   shell across the whole app: the 192px gradient sidebar, the cyan pill for
   the current page, the underlined tabs and the blue primary button. Written
   as an override block at the end so every earlier rule still stands where
   this does not speak, and so the dark theme only has to redefine tokens. */
:root{
  --ground:#f7fbff; --line:#e2ebf4; --ink:#071b3d; --slate:#50688e; --cyan:#12d9e9;
  --emph:#071b3d; --blue:#147af3; --blue-2:#0f68d6;
  --nav-bg:#082c47; --nav-grad:linear-gradient(180deg,#092f4c 0%,#06233a 100%);
  --nav-ink:#fff; --nav-dim:#fff; --nav-dim-2:#aac4d8; --nav-dim-3:#7ea0b9;
  --nav-line:rgba(255,255,255,.09); --nav-chip:#284f6f; --nav-chip-ink:#fff;
  --nav-hover:rgba(255,255,255,.07);
  --nav-on:linear-gradient(90deg,#10d8eb,#15d3e4); --nav-on-ink:#002a3b;
  --nav-on-shadow:0 4px 16px rgba(0,211,232,.22); --nav-badge:#ff2929; --brand-mark:#36dcff;
  --avatar-bg:#fff; --avatar-ink:#1678dc; --profile-sub:#9eb8cb;
  --main-bg:radial-gradient(circle at 60% 0%,rgba(55,165,255,.07),transparent 32%),#f9fcff;
  --tab-ink:#395273; --tab-line:#dce8f2; --tab-on:#17a8f5; --sub-ink:#496286;
  --card-shadow-d:0 2px 8px rgba(21,65,105,.035);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --nav-grad:linear-gradient(180deg,#0A1D31 0%,#061220 100%);
  --nav-dim:#EAF2F9; --nav-dim-2:#8AA2B8; --nav-dim-3:#6D8399; --nav-hover:rgba(255,255,255,.06);
  --nav-chip:#1D3A57; --nav-chip-ink:#EAF2F9; --nav-on-shadow:0 4px 16px rgba(0,211,232,.12);
  --nav-badge:#ef4444; --avatar-bg:#EAF2F9; --profile-sub:#8AA2B8;
  --main-bg:var(--ground); --tab-ink:#A7BDD2; --tab-line:#1D3348; --tab-on:#38BDF8; --sub-ink:#A7BDD2;
  --blue:#2F7FF0; --blue-2:#4A92F5; --card-shadow-d:var(--shadow);
} }
:root[data-theme="dark"]{
  --nav-grad:linear-gradient(180deg,#0A1D31 0%,#061220 100%);
  --nav-dim:#EAF2F9; --nav-dim-2:#8AA2B8; --nav-dim-3:#6D8399; --nav-hover:rgba(255,255,255,.06);
  --nav-chip:#1D3A57; --nav-chip-ink:#EAF2F9; --nav-on-shadow:0 4px 16px rgba(0,211,232,.12);
  --nav-badge:#ef4444; --avatar-bg:#EAF2F9; --profile-sub:#8AA2B8;
  --main-bg:var(--ground); --tab-ink:#A7BDD2; --tab-line:#1D3348; --tab-on:#38BDF8; --sub-ink:#A7BDD2;
  --blue:#2F7FF0; --blue-2:#4A92F5; --card-shadow-d:var(--shadow);
}
main{padding:20px 26px 30px;background:var(--main-bg)}
aside{width:192px;flex:0 0 192px;background:var(--nav-grad)}
.logo{height:78px;padding:19px 18px}
.logo .brand-t,.mtop .brand-t{font-size:20px;font-weight:800;letter-spacing:2px;line-height:1.2;color:var(--nav-ink)}
.logo .brand-t em,.mtop .brand-t em{font-style:normal;color:var(--brand-mark);margin-right:5px}
.logo small{margin-top:4px;color:var(--nav-dim-2);font-size:10px;letter-spacing:1.8px;font-weight:400}
.navgroup{padding:3px 10px;margin-bottom:0}
.navgroup .gl{color:var(--nav-dim-3);font-size:10px;letter-spacing:1.4px;margin:23px 9px 8px;padding:0;font-weight:400}
aside a.nav,aside .themetog{height:40px;padding:0 10px;border-radius:6px;font-size:14px;gap:11px;
  color:var(--nav-dim);font-weight:400;margin:0 0 2px}
aside a.nav:hover,aside .themetog:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line);color:var(--nav-ink)}
aside a.nav.on{background:var(--nav-on);color:var(--nav-on-ink);box-shadow:var(--nav-on-shadow);font-weight:600}
aside a.nav svg.ni{width:18px;height:18px;flex:0 0 18px}
aside a.nav .badge{min-width:21px;height:21px;padding:0 6px;border-radius:20px;background:var(--nav-badge);
  color:var(--nav-ink);display:grid;place-items:center;font:600 11px Inter,sans-serif}
aside a.nav .badge.calm,aside a.nav.on .badge.calm{background:var(--nav-chip);color:var(--nav-chip-ink)}
.navgroup.tgrp{margin-top:auto}
.asideuser{border-top:1px solid var(--nav-line);padding:15px 18px 18px;gap:10px}
.asideuser .avat{width:40px;height:40px;flex:0 0 40px;background:var(--avatar-bg);color:var(--avatar-ink);font-size:14px}
.asideuser .un{font-size:13px;font-weight:400}
.asideuser .uo{font-size:12px;color:var(--profile-sub)}
.tabs{gap:24px;border-bottom:1px solid var(--tab-line);margin:0 0 20px;min-height:51px;align-items:flex-end;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs a{white-space:nowrap;flex:none}
.tabs.many{gap:6px}.tabs.many a{padding:0 11px}
.tabs a{height:40px;padding:0 15px;display:flex;align-items:center;font-size:15px;color:var(--tab-ink);
  font-weight:400;border-bottom-width:2px}
.tabs a.on{color:var(--emph);border-bottom-color:var(--tab-on);font-weight:700}
.phead h1{font-size:31px;line-height:1;letter-spacing:-.8px;margin:0 0 7px}
.phead .sub{font-size:15px;color:var(--sub-ink)}
.panel,.stat,.card,.tile,.kcol,.mkpi,.kpi{border-radius:8px;box-shadow:var(--card-shadow-d)}
.btn{background:var(--blue);border-radius:7px}
.btn:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
button{background:var(--blue)}
button:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.mtop{background:var(--nav-grad)}
.mtop .brand-t{font-size:17px}
/* Joel, 2026-09-13: tile icons "right in your face", on the left, about a third
   of the tile, so the four tiles can be told apart at a glance. */
.stats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{display:grid;grid-template-columns:minmax(44px,30%) minmax(0,1fr);column-gap:14px;row-gap:4px;
  align-content:center;text-align:left;padding:18px}
.stat .sh{display:contents}
.stats .stat .ico{grid-column:1;grid-row:1 / span 3;width:100%;max-width:76px;height:auto;aspect-ratio:1;
  flex:none;border-radius:16px;align-self:center}
.stats .stat .ico > svg{width:52%;height:52%;flex:none}
.stat .k{grid-column:2;grid-row:1}
.stat .v{grid-column:2;grid-row:2}
.stat .s{grid-column:2;grid-row:3;margin-top:0}
/* Older pages, brought into the designer look (Joel, 2026-09-13: "remaining pages in
   new look"). These restyle the shared building blocks those pages are made of, so
   every one of them changes together and none of their content moves. */
main > h1{font-size:31px;line-height:1.05;letter-spacing:-.8px;margin:0 0 7px;font-weight:700}
main > h1 + .sub,main > h1 + p.sub{font-size:15px;color:var(--sub-ink);margin-bottom:22px}
.section > h2{font-size:18px;font-weight:750;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
.section > h2 b{font-size:18px;font-weight:750}
.card{border-radius:8px;box-shadow:var(--card-shadow-d)}
.card:has(> .msec),.card:has(> .d),.card:has(> p){padding:16px 18px}
.card > .msec h4{font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:700;margin:0 0 6px}
.card > .mact{margin-top:10px}
.tiles{gap:12px}
.tile{padding:18px;border-radius:8px}
.tile .k{font-size:13px;text-transform:none;letter-spacing:0;color:var(--slate);font-weight:500;margin-bottom:6px}
.tile .v{font-size:28px;font-weight:750;letter-spacing:-.5px}
.tile .s{font-size:13px;margin-top:6px}
.row{padding:14px 18px}
table th{font-size:11px;letter-spacing:.4px}
.searchbar button{background:var(--blue)}
.searchbar button:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
@media(max-width:860px){ main > h1{font-size:1.6rem} }
/* Phone pass (Joel, 2026-09-13). A column inside a grid may shrink below its
   table's width, and a wide table scrolls inside its own card instead of being
   cut off or pushing the whole page sideways. */
.two > *,.three > *,.isplit > *,.rsplit > *,.psplit > *,.cprev-b > *{min-width:0}
@media(max-width:760px){
  .panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panel > table{min-width:560px}
  td.fill{max-width:none;width:auto}
  td .one{white-space:normal}
  .phead .pr{gap:.6rem}
}
/* The Add work menu (audit P4): one button, three choices. */
.addwork{position:relative;display:inline-block}
.addwork summary{list-style:none;cursor:pointer}
.addwork summary::-webkit-details-marker{display:none}
.addwork-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--card);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-md);min-width:290px;padding:6px}
.addwork-menu a,.addwork-menu button{display:block;width:100%;text-align:left;background:transparent;
  color:var(--ink);border:0;border-radius:6px;padding:10px 12px;font:inherit;cursor:pointer}
.addwork-menu a:hover,.addwork-menu button:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
@media(max-width:760px){
  .addwork-menu{position:fixed;left:16px;right:16px;top:auto;bottom:16px;min-width:0;max-height:70vh;overflow:auto}
}
.addwork-menu b{display:block;font-size:14px;font-weight:650}
.addwork-menu span{display:block;font-size:12px;color:var(--slate);font-weight:400;margin-top:2px}
.qt-row{flex-wrap:wrap}
/* An AI action that failed says so on its own row (audit P7). */
.aifail{color:var(--danger-text);font-size:12.5px;margin-bottom:4px}
/* Clickable looks clickable (audit P6). A Command Center number opens its target
   editor, so it gets a pointer, a hover lift and a pencil beside the value. */
.kpi.rowlink{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.kpi.rowlink:hover{border-color:var(--cyan);box-shadow:var(--shadow-md)}
.kpi.rowlink .kv::after{content:"\270E";font-size:14px;font-weight:400;color:var(--muted);margin-left:8px;
  vertical-align:middle;opacity:.75}
.kpi.rowlink:hover .kv::after{color:var(--info);opacity:1}
div.stat:not(a){cursor:default}
/* One line per row: long titles end in an ellipsis instead of wrapping. */
td.fill{width:100%;max-width:0}
td.fill .one,td .one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Two panels side by side that should read as a pair are the same height. */
.two.eq{align-items:stretch}
.two.eq > .panel{height:31rem;display:flex;flex-direction:column}
.two.eq > .panel > .sbox{max-height:none;flex:1;min-height:0}
@media(max-width:860px){
  aside{width:272px}
  main{padding:1.15rem 1rem 4rem}
  .tabs{gap:6px;margin-bottom:1rem}
  .phead h1{font-size:1.6rem}
  .stat{grid-template-columns:52px minmax(0,1fr);column-gap:12px;padding:14px}
  .stat .ico{width:52px;height:52px;border-radius:14px}
  .stat .ico svg{width:26px;height:26px}
  .two.eq > .panel{height:auto}
}

/* ══ Design v2, 2026-09-15 ═════════════════════════════════════════════════
   Joel's full HTML set (docs/design-v2-2026-09-15/, styles.css saved verbatim).
   Carried as tokens, not the mock's literals: the mock's dark mode is a
   body.dark class with its own hex, ours is data-theme + prefers-color-scheme,
   written twice like every other block here. The v-* names are the four state
   colours (red owner's queue, amber Waiting on Client, purple Waiting, green
   Done), kept apart from the older --amber-bg / --violet-bg pairs that other
   pages still read. */
:root{
  --ground:#f1f6fc; --main-bg:#f1f6fc; --card:#fff; --ink:#0b2447; --emph:#0b2447;
  --ink-2:#14396b; --sub-ink:#14396b; --slate:#6482a4; --muted:#8aa3bf;
  --line:#e4ecf6; --line-2:#eef3f9; --card-2:#fafcff;
  --blue:#2563eb; --blue-2:#1d4ed8; --blue-soft:#eaf1fe; --blue-tint:#eff6ff; --tab-on:#2563eb; --info:#2563eb;
  --open-line:#cddffa;
  --v-red:#ef4444; --v-red-ink:#dc2626; --v-red-bg:#fde8e8; --v-red-tint:#fdf2f2; --v-red-line:#f7cdcd;
  --v-amber:#e8890c; --v-amber-ink:#c2410c; --v-amber-bg:#fdeed8; --v-amber-tint:#fef8ee; --v-amber-line:#f6d9ad;
  --v-purple:#7c5cff; --v-purple-ink:#6d45d9; --v-purple-bg:#eae4ff; --v-purple-tint:#f5f2ff; --v-purple-line:#d9cffc;
  --v-green:#16a34a; --v-green-ink:#15803d; --v-green-bg:#d6f5e2; --v-green-tint:#f0fbf4; --v-green-line:#b4e8c9;
  --v-grey:#35507a; --v-grey-ink:#14396b; --v-grey-bg:#eef2f7;
  --nav-grad:linear-gradient(180deg,#0e2d54 0%,#0a2244 55%,#071a34 100%);
  --nav-on:linear-gradient(90deg,#16a8db,#23bce6); --nav-on-ink:#fff; --nav-on-shadow:0 2px 10px rgba(22,168,219,.35);
  --nav-dim:#b6cde6; --nav-dim-2:#7e9cbe; --nav-dim-3:#6d8cae; --nav-hover:rgba(255,255,255,.07); --nav-badge:#e8112d;
  --card-shadow-d:0 1px 2px rgba(16,43,78,.06); --shadow-md:0 4px 14px rgba(16,43,78,.07);
  --shadow-lg:0 24px 60px rgba(9,26,50,.28); --scrim:rgba(10,29,56,.55);
  --th-bg:#fbfdff; --row-hover:#fafcff;
  --box-blue:linear-gradient(180deg,#f2f7ff,#eef4fe); --box-grey:#f6f9fc; --quote-bg:#fff; --x-hover:#f1f5fa;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#081426; --main-bg:#081426; --card:#0e2138; --ink:#e8f1fb; --emph:#e8f1fb;
  --ink-2:#b4cbe4; --sub-ink:#b4cbe4; --slate:#88a4c2; --muted:#6d88a6;
  --line:#1b3553; --line-2:#17304c; --card-2:#12263e;
  --blue:#3b82f6; --blue-2:#60a5fa; --blue-soft:#15294a; --blue-tint:#122744; --tab-on:#60a5fa; --info:#60a5fa;
  --open-line:#1d3a5e;
  --v-red:#f87171; --v-red-ink:#fca5a5; --v-red-bg:#3a1a20; --v-red-tint:#2a1620; --v-red-line:#5a2328;
  --v-amber:#fbbf24; --v-amber-ink:#fcd34d; --v-amber-bg:#3a2a12; --v-amber-tint:#2a2015; --v-amber-line:#57451b;
  --v-purple:#a78bfa; --v-purple-ink:#c4b5fd; --v-purple-bg:#2a2350; --v-purple-tint:#1e1a36; --v-purple-line:#3b3370;
  --v-green:#4ade80; --v-green-ink:#86efac; --v-green-bg:#11361f; --v-green-tint:#102a20; --v-green-line:#1b5039;
  --v-grey:#64748b; --v-grey-ink:#b4cbe4; --v-grey-bg:#16293D;
  --nav-grad:linear-gradient(180deg,#0a1d31 0%,#061220 100%); --nav-on-shadow:0 2px 10px rgba(22,168,219,.18);
  --nav-badge:#ef4444;
  --card-shadow-d:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6); --scrim:rgba(2,8,15,.62);
  --th-bg:#0c1d31; --row-hover:#12263e;
  --box-blue:#122744; --box-grey:#112640; --quote-bg:#112640; --x-hover:#16304d;
} }
:root[data-theme="dark"]{
  --ground:#081426; --main-bg:#081426; --card:#0e2138; --ink:#e8f1fb; --emph:#e8f1fb;
  --ink-2:#b4cbe4; --sub-ink:#b4cbe4; --slate:#88a4c2; --muted:#6d88a6;
  --line:#1b3553; --line-2:#17304c; --card-2:#12263e;
  --blue:#3b82f6; --blue-2:#60a5fa; --blue-soft:#15294a; --blue-tint:#122744; --tab-on:#60a5fa; --info:#60a5fa;
  --open-line:#1d3a5e;
  --v-red:#f87171; --v-red-ink:#fca5a5; --v-red-bg:#3a1a20; --v-red-tint:#2a1620; --v-red-line:#5a2328;
  --v-amber:#fbbf24; --v-amber-ink:#fcd34d; --v-amber-bg:#3a2a12; --v-amber-tint:#2a2015; --v-amber-line:#57451b;
  --v-purple:#a78bfa; --v-purple-ink:#c4b5fd; --v-purple-bg:#2a2350; --v-purple-tint:#1e1a36; --v-purple-line:#3b3370;
  --v-green:#4ade80; --v-green-ink:#86efac; --v-green-bg:#11361f; --v-green-tint:#102a20; --v-green-line:#1b5039;
  --v-grey:#64748b; --v-grey-ink:#b4cbe4; --v-grey-bg:#16293D;
  --nav-grad:linear-gradient(180deg,#0a1d31 0%,#061220 100%); --nav-on-shadow:0 2px 10px rgba(22,168,219,.18);
  --nav-badge:#ef4444;
  --card-shadow-d:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6); --scrim:rgba(2,8,15,.62);
  --th-bg:#0c1d31; --row-hover:#12263e;
  --box-blue:#122744; --box-grey:#112640; --quote-bg:#112640; --x-hover:#16304d;
}
body{line-height:1.45}
main{padding:26px 30px 70px;background:var(--main-bg)}
/* Sidebar. The logo image stays (Joel, 2026-09-14: "Don't change the logo in
   the Nav bar"); width, gradient, pill and badge follow the v2 mock. */
aside{width:218px;flex:0 0 218px;background:var(--nav-grad)}
.navgroup{padding:2px 14px}
.navgroup .gl{font-size:9.5px;letter-spacing:.17em;font-weight:700;text-transform:uppercase;margin:22px 11px 8px}
aside a.nav,aside .themetog{height:auto;min-height:38px;padding:9px 11px;border-radius:9px;font-size:13.5px;
  font-weight:500;gap:11px}
aside a.nav svg.ni{width:17px;height:17px;flex:0 0 17px}
aside a.nav:hover,aside .themetog:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line);color:var(--nav-ink)}
aside a.nav.on{background:var(--nav-on);color:var(--nav-on-ink);box-shadow:var(--nav-on-shadow);font-weight:600}
aside a.nav .badge{min-width:19px;height:19px;padding:0 5px;background:var(--nav-badge);font:700 10.5px Inter,sans-serif}
.asideuser .avat{width:31px;height:31px;flex:0 0 31px;font-size:13px;font-weight:700}
.asideuser .un{font-size:13.5px;font-weight:600}
/* Page head */
.phead{margin-bottom:20px}
.phead h1{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0}
.phead .sub{margin:5px 0 0;font-size:13.5px;color:var(--ink-2)}
.phead .pdate{font-size:12.5px;color:var(--slate);padding-top:6px}
.btn{border-radius:9px;background:var(--blue);padding:10px 16px;font-size:13.5px}
.btn:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
/* Stat cards: icon square on the left, label, number in the state colour. */
.stats{gap:14px;margin-bottom:16px}
.stat{grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:1px;padding:16px 18px;
  border-radius:12px;border-color:var(--line)}
.stats .stat .ico{width:44px;max-width:44px;height:44px;border-radius:11px}
.stats .stat .ico > svg{width:21px;height:21px}
.stat .k{font-size:10px;letter-spacing:.09em;color:var(--ink-2)}
.stat .v{font-family:inherit;font-size:27px;font-weight:800;line-height:1.15}
.stat .s{font-size:12px;color:var(--slate)}
.stat .ico.red{background:var(--v-red-bg);color:var(--v-red)}
.stat .ico.amber{background:var(--v-amber-bg);color:var(--v-amber)}
.stat .ico.violet{background:var(--v-purple-bg);color:var(--v-purple)}
.stat .ico.green{background:var(--v-green-bg);color:var(--v-green)}
.stat .v.red{color:var(--v-red)}.stat .v.amber{color:var(--v-amber)}
.stat .v.violet{color:var(--v-purple)}.stat .v.green{color:var(--v-green)}
button.stat:hover{border-color:var(--open-line);box-shadow:var(--shadow-md);transform:none}
.stat.on{box-shadow:none}
.stat.on:has(.ico.red){background:var(--v-red-tint);border-color:var(--v-red-line)}
.stat.on:has(.ico.amber){background:var(--v-amber-tint);border-color:var(--v-amber-line)}
.stat.on:has(.ico.violet){background:var(--v-purple-tint);border-color:var(--v-purple-line)}
.stat.on:has(.ico.green){background:var(--v-green-tint);border-color:var(--v-green-line)}
/* Panels and tables */
.panel{border-radius:12px;margin-bottom:16px}
.panel > .ph{padding:18px 22px 14px}
.panel > .ph h3{font-size:20px;font-weight:800}
.panel > .ph .psub{font-size:13px;color:var(--ink-2)}
.panel > .ph .cnt{font-family:inherit;background:var(--nav-badge);font-size:11.5px;padding:2px 9px}
.panel.p-amber > .ph .cnt{background:var(--v-amber)}
.panel th{font-size:10px;letter-spacing:.09em;font-weight:700;color:var(--ink-2);background:var(--th-bg);padding:10px 22px}
.panel td{padding:15px 22px;border-top:1px solid var(--line-2)}
.panel tr:hover td{background:var(--row-hover)}
th.r{text-align:right}
td.v2-client{font-weight:700;color:var(--ink);white-space:nowrap}
td.v2-task{font-weight:600;color:var(--ink)}
td.v2-task.plain{font-weight:500;color:var(--ink-2)}
td.v2-wait{font-weight:700;font-size:13px;color:var(--ink-2);text-align:right;white-space:nowrap}
td.v2-wait.hot{color:var(--v-red)}
td.v2-act{text-align:right;width:1%;white-space:nowrap}
th.v2-sort,th.ws-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.v2-sort .ar,th.ws-sort .ar{margin-left:5px;color:var(--muted);font-size:10px}
th.v2-sort.on,th.v2-sort.on .ar,th.ws-sort.on,th.ws-sort.on .ar{color:var(--blue)}
.btn-open{display:inline-block;background:var(--card);border:1px solid var(--open-line);color:var(--blue);
  border-radius:8px;padding:7px 20px;font-size:13px;font-weight:600;width:auto;cursor:pointer}
.btn-open:hover{background:var(--blue-soft)}
/* Edit beside Approve / Reject / Send to Client: neutral and subtle so it does not compete. */
.btn-open.btn-edit{border-color:var(--line);color:var(--muted);font-weight:500}
.btn-open.btn-edit:hover{background:var(--card-2);color:var(--ink-2)}
.chip-date{display:inline-block;background:var(--v-green-bg);color:var(--v-green-ink);font-weight:700;font-size:12px;
  border-radius:7px;padding:4px 10px;white-space:nowrap}
/* Pills */
.bdg{border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:700;border:0}
.bdg.stop,.bdg.high{background:var(--v-red-bg);color:var(--v-red-ink)}
.bdg.wait,.bdg.medium{background:var(--v-amber-bg);color:var(--v-amber-ink)}
.bdg.prog,.bdg.violet{background:var(--v-purple-bg);color:var(--v-purple-ink)}
/* .bdg.done's color moved up to the Badges block above (spec "Standardize Done Status Color") - one rule, not
   this one plus that one agreeing by coincidence of source order. .bdg.low keeps the same green here. */
.bdg.low{background:var(--v-green-bg);color:var(--v-green-ink)}
.bdg.blue{background:var(--blue-soft);color:var(--blue)}
.bdg.grey{background:var(--v-grey-bg);color:var(--v-grey-ink)}
/* Selected state (Work Status filter pills use this): solid status color, white text, instead of the tint above. */
.bdg.on{color:#fff}
.bdg.stop.on,.bdg.high.on{background:var(--v-red)}
.bdg.wait.on,.bdg.medium.on{background:var(--v-amber)}
.bdg.prog.on,.bdg.violet.on{background:var(--v-purple)}
.bdg.done.on,.bdg.low.on{background:var(--v-green)}
.bdg.grey.on{background:var(--v-grey)}
/* Toolbar */
.filters{gap:12px;margin-bottom:16px}
.filters input[type=search],.filters select{height:40px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);box-shadow:var(--card-shadow-d);font-size:13.5px}
.filters input[type=search]{padding:0 12px}
.filters select{min-width:152px;padding:0 13px}
.showing{font-size:12.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.filters label{white-space:nowrap}
.filters label input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--blue)}
/* The task pop-up: one shape per state (docs/design-v2-2026-09-15/spec.md). */
/* Unlike the .mbody dialogs above (max-height + overflow-y:auto), this dialog had neither, so a Next Action long
   enough to grow past the viewport (its own textarea already autogrows to full height, see .tm-editin) had nowhere
   to go: the dialog just rendered taller than the screen with no way to scroll to the rest (Corey, call
   2026-09-20: "don't cut the text off - let the section expand to show it all"). Capping the dialog itself and
   letting it scroll fixes that without touching how the textarea grows or how a short action looks. */
dialog.tmodal{max-width:min(640px,94vw);max-height:88vh;overflow-y:auto;border-radius:15px;background:var(--card)}
dialog.tmodal::backdrop{background:var(--scrim)}
.tm{padding:26px 30px 24px;position:relative}
.tm-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;background:transparent;color:var(--slate);
  border-radius:8px;display:grid;place-items:center;cursor:pointer;font-size:22px;line-height:1;padding:0}
.tm-x:hover{background:var(--x-hover);color:var(--ink)}
.tm-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.11em;color:var(--blue);text-transform:uppercase;margin:0 0 6px}
.tm h3{margin:0;padding-right:36px;font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.28;color:var(--ink)}
.tm-meta{display:flex;align-items:center;gap:12px;margin-top:11px;flex-wrap:wrap;color:var(--ink-2);font-size:14px}
.tm-box{border-radius:11px;padding:16px 18px;margin-top:18px}
.tm-box .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 7px}
.tm-box .v{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:var(--ink)}
.tm-box.blue{background:var(--box-blue)}.tm-box.blue .k{color:var(--blue)}
.tm-box.amber{background:var(--v-amber-tint)}.tm-box.amber .k{color:var(--v-amber)}
.tm-box.purple{background:var(--v-purple-tint)}.tm-box.purple .k{color:var(--v-purple)}
.tm-box.green{background:var(--v-green-tint)}.tm-box.green .k{color:var(--v-green)}
.tm-box.grey{background:var(--box-grey)}.tm-box.grey .k{color:var(--ink-2)}
.tm-quote{background:var(--quote-bg);border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-top:12px;
  display:flex;align-items:flex-start;gap:16px}
.tm-quote p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;white-space:pre-wrap;flex:1;min-width:0}
button.tm-copy{background:transparent;border:0;color:var(--blue);font-weight:600;font-size:13.5px;cursor:pointer;
  white-space:nowrap;width:auto;padding:0}
button.tm-copy:hover{background:transparent;text-decoration:underline}
.tm-why{margin-top:18px}
.tm-why .k{font-size:10.5px;font-weight:700;letter-spacing:.11em;color:var(--blue);text-transform:uppercase;margin:0 0 5px}
.tm-why p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.tm-grid .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--blue);text-transform:uppercase}
.tm-grid .v{font-size:15px;font-weight:700;color:var(--ink)}
.tm-grid .v.hot{color:var(--v-red)}
.tm-acts{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;flex-wrap:wrap}
.tm-acts .go{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.tm-acts .stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.tm-acts .note{font-size:12px;color:var(--slate)}
/* Message Roundups (Joel, 2026-09-15): tabs in owner's queue, the message inside What you need to do, the roundup pop-up, the Undo toast. */
.nm-tabs{padding:0 18px}
.tab-count{display:inline-block;margin-left:6px;border-radius:20px;background:var(--box-grey);padding:1px 7px;font-size:11px;font-weight:700;color:var(--ink-2)}
.nm-tabs a.on .tab-count{background:var(--box-blue);color:var(--blue)}
.nm-sub{padding:16px 18px 6px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);border-top:1px solid var(--line)}
.rr-sub{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.tm-box .k.tm-msgk{margin-top:16px}
.tm-box .tm-msg{margin-top:0;background:var(--card)}
.tm-msg p{font-size:14.5px;color:var(--ink)}
.tm-copyrow{margin-top:10px}
.tm-tldr{margin:10px 0 0;padding:8px 11px;border-radius:8px;background:var(--box-blue);font-size:13.5px;color:var(--ink);line-height:1.45}
.tm-tldr b{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin-right:7px}
.tm-ctx{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12.5px;color:var(--slate)}
.tm-ctx b{color:var(--ink-2);font-weight:600;margin-right:5px}
.tm-ctxfold{margin-top:9px}
.tm-ctxfold summary{font-size:12.5px;color:var(--slate);cursor:pointer}
.tm-ctxfold p{margin:7px 0 0;font-size:13px;color:var(--ink-2);white-space:pre-wrap;line-height:1.5}
.tm-need{margin:10px 0 0;font-size:13px;color:var(--ink-2)}
.rm-msg{background:var(--box-blue);border-radius:11px;padding:14px 16px;margin-top:18px}
.rm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.rm-head .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.rm-head-acts{display:flex;gap:8px;flex-wrap:wrap}
.rm-head-acts .btn.wa{background:var(--wa);color:var(--wa-ink)}
.rm-box{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;color:var(--ink)}
.rm-help{font-size:12px;margin:8px 0 0}
.rm-list{list-style:none;margin:0;padding:0}
.rm-list li{display:grid;grid-template-columns:26px 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.rm-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--box-blue);color:var(--blue);font-weight:700;font-size:12px}
.rm-age{color:var(--slate);font-size:12.5px;white-space:nowrap}
.rm-open{font-weight:600;white-space:nowrap}
.rtoast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--card);padding:12px 16px;border-radius:10px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.rtoast form{margin:0}
.rtoast button.rtoast-undo{background:transparent;border:0;color:#8dbdff;font-weight:700;cursor:pointer;padding:0;width:auto}
.rtoast button.rtoast-x{background:transparent;border:0;color:inherit;opacity:.7;cursor:pointer;padding:0 2px;width:auto;font-size:18px;line-height:1}
.rtoast.rtoast-err{background:var(--danger)}
@media(max-width:600px){.rm-list li{grid-template-columns:26px 1fr}.rm-age,.rm-open{grid-column:2}.rr-sub{max-width:none;white-space:normal}}
/* Task pop-up, second pass (Joel's mockups, 2026-09-20): one blue workflow block holding Next Action, the one box
   the state calls for, and Who has the ball; then Details and Activity as accordions; Delete and Close at the foot.
   Kit tokens only, so dark mode follows. */
/* Guardrail Conflict (spec 'Guardrail Conflict Resolution UX', Joel 2026-10-02; routes/one_task.js guardrailConflictHtml):
   the conflict, the side-by-side, then three large answers that expand in place. Kit tokens only, so dark mode follows. */
.tm .gc{padding:22px 22px 20px}
.gc-head{display:flex;align-items:center;gap:11px;color:var(--v-red);font-weight:800;font-size:15px;letter-spacing:1.3px}
.gc-count{margin-left:auto;color:var(--slate);font-weight:700;font-size:12.5px;letter-spacing:.3px}
.gc-shield{width:26px;height:28px;flex:0 0 auto}
.gc-copy{margin:12px 0 0;font-size:18px;line-height:1.45;font-weight:650;color:var(--ink)}
.gc-compare{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--card)}
.gc-side{padding:16px 20px}
.gc-side + .gc-side{border-left:1px solid var(--line)}
.gc-lbl{display:block;margin:0 0 10px;font-size:11.5px;letter-spacing:1.1px;font-weight:800;color:var(--slate)}
.gc-sidebody{display:grid;grid-template-columns:30px 1fr;gap:12px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.gc-sidebody p{margin:0}
.gc-doc{width:26px;height:26px;color:var(--slate)}
.gc-gname{display:block;margin:0 0 4px;color:var(--ink);font-weight:700}
.gc-showfull{margin-top:6px}
.gc-decide{margin-top:22px}
.gc-r{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.gc-title{margin:0;color:var(--blue);font-size:15px;font-weight:800;letter-spacing:1.1px}
.gc-sub{margin:6px 0 14px;color:var(--slate);font-size:15px}
.gc-item{margin-bottom:12px}
.gc-opt{display:grid;grid-template-columns:52px 1fr 24px;align-items:center;gap:16px;min-height:96px;padding:16px 20px;border-radius:14px;
  border:1px solid var(--line);cursor:pointer;color:var(--ink);transition:transform 120ms ease,filter 120ms ease}
.gc-opt:hover{transform:translateY(-1px);filter:brightness(1.04)}
.gc-opt-blue{border-color:var(--blue);background:var(--box-blue)}
.gc-opt-purple{border-color:var(--v-purple);background:var(--v-purple-tint)}
.gc-opt-yellow{border-color:var(--v-amber);background:var(--v-amber-tint)}
.gc-opticon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff}
.gc-opt-blue .gc-opticon{background:var(--blue)}.gc-opt-purple .gc-opticon{background:var(--v-purple)}.gc-opt-yellow .gc-opticon{background:var(--v-amber)}
.gc-optname{display:block;font-size:18px;font-weight:800;margin-bottom:3px}
.gc-optsub{display:block;font-size:15px;line-height:1.42;color:var(--ink-2)}
.gc-arrow{font-size:34px;font-weight:300;line-height:1;justify-self:end;transition:transform 160ms ease}
.gc-panel{display:none;margin-top:-6px;padding:20px 20px 16px;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--card)}
/* Sized by their own content (the panels open from display:none, where script autogrow measures 0). */
.gc-panel textarea{width:100%;min-height:96px;max-height:420px;field-sizing:content;font-size:14.5px;line-height:1.5}
.gc-panel .gc-ro{background:var(--bg,transparent);color:var(--ink-2);min-height:72px}
.gc-panel .gc-lbl{margin-top:16px}.gc-panel > .gc-lbl:first-child,.gc-panel > input + .gc-lbl{margin-top:0}
.gc-confirm{margin:0 0 12px;font-size:17px;font-weight:700;color:var(--ink)}
.gc-acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}
.gc-acts .gc-back{margin-right:auto;cursor:pointer}
.gc-acts .gc-purple{background:var(--v-purple);border-color:var(--v-purple)}
.gc-acts .gc-yellow{background:var(--v-amber);border-color:var(--v-amber);color:#1b1404}
/* One answer open: it expands in place, the other two step aside until Back. */
.gc-r-change:checked ~ .gc-i-update,.gc-r-change:checked ~ .gc-i-allow,
.gc-r-update:checked ~ .gc-i-change,.gc-r-update:checked ~ .gc-i-allow,
.gc-r-allow:checked ~ .gc-i-change,.gc-r-allow:checked ~ .gc-i-update{display:none}
.gc-r-change:checked ~ .gc-i-change .gc-panel,.gc-r-update:checked ~ .gc-i-update .gc-panel,.gc-r-allow:checked ~ .gc-i-allow .gc-panel{display:block}
.gc-r-change:checked ~ .gc-i-change .gc-opt,.gc-r-update:checked ~ .gc-i-update .gc-opt,.gc-r-allow:checked ~ .gc-i-allow .gc-opt{border-radius:14px 14px 0 0;cursor:default;transform:none}
.gc-r-change:checked ~ .gc-i-change .gc-arrow,.gc-r-update:checked ~ .gc-i-update .gc-arrow,.gc-r-allow:checked ~ .gc-i-allow .gc-arrow{transform:rotate(90deg)}
.gc-r:focus-visible + .gc-r,.gc-opt:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.gc-tech{margin-top:6px}
@media(max-width:700px){.gc-compare{grid-template-columns:1fr}.gc-side + .gc-side{border-left:0;border-top:1px solid var(--line)}
  .gc-opt{grid-template-columns:44px 1fr 18px;padding:14px;gap:12px}.gc-opticon{width:42px;height:42px;font-size:20px}
  .gc-optname{font-size:16px}.gc-optsub{font-size:14px}.gc-copy{font-size:16px}.gc-acts .btn,.gc-acts .gc-back{flex:1 1 auto;text-align:center}}
.tm .tm-flow{padding:20px 22px}
.tm .tm-flow .tm-what{font-size:22px;line-height:1.25;letter-spacing:-.3px}
.tm .tm-ballsec{margin-top:18px}
/* The state box: the agent's question, the client message, or the stalled-task nudge. */
.tm-box{margin-top:16px;padding:14px 15px;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.tm-boxhead{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink)}
.tm-boxicon{font-size:17px;line-height:1}
.tm-boxbody{margin-top:9px;font-size:14.5px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap}
.tm-boxbody.tm-quiet{color:var(--slate)}
/* TLDR of the AI's question (Joel, 2026-09-20): one sentence people read, one line of context, and the agent's whole
   message behind a fold so nothing in the box is ever cut off at the bottom. */
.tm-box-ai .tm-boxbody,.tm-box-client .tm-boxbody{font-weight:600;color:var(--ink)}
.tm-boxwhy{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.tm-aifull{margin-top:11px}
.tm-aifull>summary{cursor:pointer;color:var(--blue);font-size:13.5px;font-weight:600;list-style:none}
.tm-aifull>summary::-webkit-details-marker{display:none}
.tm-aifull>summary .h{display:none}.tm-aifull[open]>summary .v{display:none}.tm-aifull[open]>summary .h{display:inline}
.tm-aifull .tm-reportbody{margin-top:9px;max-height:300px}
.tm-boxnote{margin:7px 0 0;font-size:12.5px;color:var(--slate);text-align:center}
.tm-boxacts{display:flex;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.tm-boxacts form{margin:0}
.tm-box-ai{border-color:var(--v-purple-line,var(--line));background:var(--v-purple-tint)}
.tm-box-ai .tm-boxhead{color:var(--v-purple)}
.tm-airow{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:start;margin:14px 0 0}
.tm-aiinput{min-width:0}
.tm-airow textarea{width:100%;box-sizing:border-box;font:inherit;border:1px solid var(--line);border-radius:9px;padding:12px 13px;resize:vertical;min-height:76px;background:var(--card)}
.tm-aisend{width:100%}
/* Attach an image to the answer (Spec - Add Image Upload to AI Answer Box): one small ghost button that opens the
   file picker (pasting a screenshot into the textarea above also attaches it, silently, no separate label for it --
   Corey, 2026-09-30: "There should only be one thing that says Attach image"). The thumbnail and its remove button
   only show once something is actually attached: [hidden] has to be spelled out here or the plain .tm-aipreview
   display rule below beats the browser's own [hidden] rule and the empty box (just the round x, no image) shows
   up right under the button before anything is picked -- exactly the "bizarre" stray x Corey reported. */
.tm-aiattachbtn{margin-top:8px}
.tm-aiattachbtn svg.ni{width:14px;height:14px;flex:0 0 14px}
.tm-aipreview{position:relative;display:inline-block;margin-top:10px}
.tm-aipreview[hidden]{display:none}
.tm-aipreview img{max-width:180px;max-height:130px;border-radius:8px;border:1px solid var(--line);display:block}
.tm-aipreviewx{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(15,23,42,.72);color:#fff;font-size:14px;line-height:22px;padding:0;cursor:pointer}
.tm-aipreviewx:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Attach images to Not Actually Done? feedback (Spec - Add Image Uploads to "Not Actually Done?"): same small
   ghost Attach button as the AI Answer box above, but Corey can send more than one screenshot in the same
   feedback, so this is a row of thumbnails rather than the single .tm-aipreview image -- each with its own
   remove button, same visual language. */
.tm-sbattachbtn{margin-top:8px}
.tm-sbattachbtn svg.ni{width:14px;height:14px;flex:0 0 14px}
.tm-sbpreview{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.tm-sbpreview[hidden]{display:none}
.tm-sbthumb{position:relative;display:inline-block}
.tm-sbthumb img{max-width:120px;max-height:90px;border-radius:8px;border:1px solid var(--line);display:block}
.tm-sbthumbx{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(15,23,42,.72);color:#fff;font-size:14px;line-height:22px;padding:0;cursor:pointer}
.tm-sbthumbx:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* The same thumbnail on an already-sent answer, inside Activity. */
.tm-tlimg{margin-top:8px}
.tm-tlimg img{max-width:220px;max-height:160px;border-radius:8px;border:1px solid var(--line);display:block}
.tm-box-client{border-color:var(--v-amber-line,var(--line));background:var(--v-amber-tint)}
.tm-box-client .tm-boxhead{color:var(--v-amber-ink,var(--warn-text))}
.tm-box-remind{display:flex;align-items:center;gap:15px;border-color:var(--v-purple-line,var(--line));background:var(--v-purple-tint)}
.tm-box-remind .tm-boxcopy{flex:1;min-width:0}
.tm-box-remind .tm-boxhead{color:var(--v-purple)}
.tm-box-remind .tm-boxbody{margin-top:4px;font-size:13.5px}
.tm-box-remind form{margin:0}
.tm-clock{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--v-purple);color:var(--on-solid);font-size:19px}
/* Open and check (Next Action for You, routing spec section 2): the Open link plus Looks Good / Something's Wrong,
   right under the instruction itself, no separate heading needed since next_action already says what to check. */
.tm-box-check{border-color:var(--v-green-line,var(--line));background:var(--v-green-tint,var(--box-blue))}
.tm-checkacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tm-checkacts form{margin:0}
/* Accordions */
.tm .tm-acc{margin-top:16px;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.tm .tm-accsum{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none}
.tm .tm-accsum::-webkit-details-marker{display:none}
.tm-accicon{flex:none;font-size:22px;color:var(--ink)}
.tm-acctitle{flex:1;font-size:16px;font-weight:700;color:var(--ink)}
.tm-acctitle small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--slate)}
.tm-chev{flex:none;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);margin-right:4px}
.tm .tm-acc[open] .tm-chev{transform:rotate(225deg)}
.tm-accbody{padding:0 20px 8px}
.tm .tm-accbody > .tm-sec:first-child,.tm .tm-accbody > .tm-panel:first-child{margin-top:0}
/* Activity timeline */
.tm-tl{list-style:none;margin:0;padding:4px 20px 18px 34px;position:relative}
.tm-tl::before{content:"";position:absolute;left:41px;top:10px;bottom:22px;width:2px;background:var(--line)}
.tm-tlitem{position:relative;display:grid;grid-template-columns:130px minmax(0,1fr);gap:0 16px;padding:8px 0}
.tm-tldot{position:absolute;left:-14px;top:14px;width:13px;height:13px;border-radius:50%;background:var(--slate)}
.tm-tldot.human{background:var(--blue)}.tm-tldot.agent{background:var(--v-purple)}.tm-tldot.sys{background:var(--slate)}
.tm-tlwho{padding-left:14px}
.tm-tlwho b{display:block;font-size:13.5px;color:var(--ink)}
.tm-tlwho span{display:block;margin-top:2px;font-size:12.5px;color:var(--slate)}
.tm-tlcopy{padding-left:16px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
@media(max-width:700px){
  .tm-airow{grid-template-columns:1fr}
  .tm-box-remind{flex-wrap:wrap}
  .tm-box-remind form,.tm-remind{width:100%}
  .tm-tlitem{grid-template-columns:100px minmax(0,1fr)}
}
/* Task pop-up (Joel, 2026-09-15 mockup): open sections, one-click ball, full message, three-field Edit, ball-only history. */
.tm .tm-panel{background:var(--box-blue);border-radius:14px;padding:18px 20px;margin-top:20px}
.tm .tm-lbl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 8px}
.tm .tm-what{font-size:19px;font-weight:800;line-height:1.35;margin:0;color:var(--ink)}
.tm .tm-whoclosed{font-size:14px;font-weight:600;line-height:1.35;margin:6px 0 0;color:var(--ink-2)}
.tm .tm-whatacts{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.tm .tm-sec{margin-top:22px}
.tm-ball{position:relative;margin:0}
.tm-ballrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Corey/Done still move the ball in one click (onchange auto-submits); Client/Joel-Team just pick the radio and
   reveal their handoff box below (Corey's edits, 2026-09-20) - visually hidden, not display:none, so the choice
   stays reachable by keyboard and screen reader via its label. */
.tm-radio{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.tm-ball .tm-choice{display:flex;align-items:center;gap:10px;text-align:left;position:relative;border:1.5px solid transparent;border-radius:12px;padding:13px 12px;
  cursor:pointer;color:var(--ink);font:inherit;width:auto;min-width:0;box-shadow:none;opacity:.72}
.tm-choice b{display:block;font-size:14.5px}.tm-choice small{display:block;font-size:12px;color:var(--slate);margin-top:2px;font-weight:500}
.tm-ball .tm-choice.red{background:var(--v-red-tint)}.tm-ball .tm-choice.amber{background:var(--v-amber-tint)}
.tm-ball .tm-choice.purple{background:var(--v-purple-tint)}.tm-ball .tm-choice.green{background:var(--v-green-tint)}
/* The selected card (routing spec section 3, "the highlight does not reliably match the task's status, so he has
   to work out ownership himself"): a solid tone background, a 2px border and a check badge instead of just the
   dot everything else already has, so the one box that is actually true for this task reads at a glance - the
   other three stay the plain, low-opacity tint cards they always were, clearly unselected next to it. */
.tm-ball .tm-choice.on{opacity:1;border-width:2px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tm-ball .tm-choice.on.red{background:var(--v-red-bg);border-color:var(--v-red)}
.tm-ball .tm-choice.on.amber{background:var(--v-amber-bg);border-color:var(--v-amber)}
.tm-ball .tm-choice.on.purple{background:var(--v-purple-bg);border-color:var(--v-purple)}
.tm-ball .tm-choice.on.green{background:var(--v-green-bg);border-color:var(--v-green)}
.tm-ball .tm-choice.on b{color:var(--ink)}
.tm-choice-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.tm-choice.on.red .tm-choice-check{background:var(--v-red)}.tm-choice.on.amber .tm-choice-check{background:var(--v-amber)}
.tm-choice.on.purple .tm-choice-check{background:var(--v-purple)}.tm-choice.on.green .tm-choice-check{background:var(--v-green)}
.tm-ball .tm-choice:hover{filter:brightness(.97)}
.tm-radio:focus-visible ~ .tm-ballrow{outline:2px solid var(--blue);outline-offset:2px;border-radius:12px}
.tm-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--slate);display:inline-block}
.tm-choice.red .tm-dot,.tm-dot.red{background:var(--v-red)}.tm-choice.amber .tm-dot,.tm-dot.amber{background:var(--v-amber)}
.tm-choice.purple .tm-dot,.tm-dot.purple{background:var(--v-purple)}.tm-choice.green .tm-dot,.tm-dot.green{background:var(--v-green)}
.tm .tm-info{font-size:12.5px;color:var(--slate);margin:8px 0 0}
.tm .tm-neededsteps{font-size:12.5px;color:var(--slate);margin:8px 0 0;padding-left:1.3em}.tm .tm-neededsteps li{margin:0 0 4px}
/* The handoff box only shows for the choice actually picked (client/team radio checked), and only after Corey picks
   it - never both, never on Corey/Done (2026-09-20, "hand a owner's queue task off to the client or Joel"). */
/* "Doesn't belong here? Move to Client Needs Attention" (Joel's spec, 2026-09-20): deliberately secondary, a line of
   small text under Send to Client, not a button and not a fifth ball. */
.tm-reclass{margin:12px 0 0;font-size:12.5px;color:var(--slate)}
.tm-linkbtn{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--blue);cursor:pointer}
.tm-linkbtn:hover{text-decoration:underline}
.tm-handoff{display:none;margin-top:14px}
/* Client Follow-Up (spec 2026-09-26): count, copy-only message, link to the client's own list. */
.tm-cfucard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tm-cfusum{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.tm-cfuicon{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--box-blue);color:var(--blue);font-size:18px}
.tm .tm-cfuhead{margin:2px 0 4px;font-size:17px;font-weight:800;color:var(--ink)}
.tm-cfumsg{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tm .tm-cfulbl{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.tm-cfurow{display:flex;gap:14px;align-items:flex-start}
.tm-cfutext{flex:1;font-size:15px;line-height:1.55;color:var(--ink)}
.tm-cfucopy{white-space:nowrap}
.tm .tm-cfuopen{display:block;margin-top:10px;text-align:center;text-decoration:none;background:transparent;border:1px solid var(--line);color:var(--ink)}
.tm .tm-cfuopen:hover{border-color:var(--blue);color:var(--blue);background:transparent}
@media(max-width:600px){.tm-cfurow{flex-direction:column}.tm-cfucopy{width:100%}}
/* What TJW Needs From Client (spec "Waiting on Client Updates", 2026-09-26): read-only request, Edit swaps in the form. */
.tm-creqhead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.tm .tm-creqhead .tm-lbl{margin:0}
.tm-creqacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tm-creq-vis{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--v-green);text-decoration:none}
.tm-creq-vis.off{color:var(--slate)}
.tm-creq-vis .tm-dot{width:10px;height:10px}
.tm-creqread{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tm-creqnum{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--v-red);color:#fff;font-weight:800}
.tm-creqcopy{min-width:0}
.tm .tm-creqtitle{margin:2px 0 12px;font-size:17px;font-weight:800;line-height:1.35;color:var(--ink)}
.tm .tm-creqwhylbl{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.tm-creqform{display:none;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tm-creqform label{display:grid;gap:6px;margin-bottom:14px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.tm-creqform input,.tm-creqform textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink)}
.tm-creqform textarea{resize:vertical}.tm-creqform textarea[name=ask]{min-height:0;overflow:hidden}.tm-creqform textarea[name=why]{min-height:90px}
.tm-creqbtns{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.tm-creqi{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:6px;border:1.5px solid currentColor;border-radius:50%;font-size:10px;font-weight:800;font-style:normal;vertical-align:-2px}
.tm-creq.editing .tm-creqread,.tm-creq.editing .tm-creq-edit{display:none}
.tm-creq.editing .tm-creqform{display:block}
.tm-handoff textarea{width:100%;box-sizing:border-box;font:inherit;border:1px solid var(--line);border-radius:10px;padding:11px 13px;resize:vertical;min-height:70px}
.tm-handoffacts{margin-top:10px}
input.tm-radio[value="client"]:checked ~ .tm-handoff-client{display:block}
input.tm-radio[value="team"]:checked ~ .tm-handoff-team{display:block}
input.tm-radio[value="on_hold"]:checked ~ .tm-handoff-on_hold{display:block}
.tm-handoff input[type="date"],.tm-handoff input[type="text"]{width:100%;box-sizing:border-box;font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 13px}
.tm .tm-msgsec{background:var(--box-blue);border-radius:14px;padding:16px 18px}
.tm-msghead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tm .tm-msghead .tm-lbl{margin:0}
.tm-msgbox{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:12px;font-size:15px;line-height:1.55;white-space:pre-wrap;color:var(--ink)}
.tm-warn{background:var(--v-red-tint);border:1px solid var(--v-red-line);border-radius:10px;padding:10px 14px;margin-top:10px;font-size:13.5px;color:var(--ink)}
.tm-warn ul{margin:4px 0 0;padding-left:18px}
.tm-sendrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}.tm-sendrow form{margin:0}
.tm-edit3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0}
.tm-edit3 label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.tm-edit3 select,.tm-edit3 input{height:44px;width:100%}
/* Task Settings (rebuilt from "Edit" 2026-09-16): a fixed, evenly aligned two-column grid so the four fields
   line up the same way every time, instead of reflowing to however many columns the modal's width allowed. */
.tm-settings{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin:0}
.tm-settings label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.tm-settings select,.tm-settings input{height:44px;width:100%}
.tm .tm-ctx{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tm .tm-reqs{margin:0;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.tm .tm-reqs li+li{margin-top:4px}
/* Title / Next Action / Details, editable in place (Corey, call 2026-09-16): click straight into the text, a Save
   button appears only once it actually differs from what was saved. Used both in the pop-up and on the full task
   page, since taskBody() is the same body in both places. */
.tm-editf{margin:0}
.tm-editin.tm-editin{display:block;width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;
  resize:none;overflow:hidden;font:inherit;padding:2px 4px;margin:-2px -4px;border-radius:6px;color:inherit;min-height:0;
  field-sizing:content}
/* min-height:0 beats the global dialog textarea min-height of 190px, which left a tall empty box under a one-line title or
   Next Action in the pop-up (Joel, 2026-09-17). field-sizing:content (Corey, call 2026-09-20: "let the section expand
   to show the full action") grows the box itself to fit its text, in browsers that support it, on top of the
   data-autogrow script below - so a long Next Action is never boxed to one line even before that script runs. */
.tm-editin:hover{background:var(--box-grey,rgba(0,0,0,.04))}
.tm-editin:focus{outline:none;border-color:var(--blue);background:var(--card)}
.tm .tm-editin.tm-what{font-size:19px;font-weight:800;line-height:1.35;color:var(--ink)}
.tm .tm-editin.tm-ctx{font-size:15px;line-height:1.5;color:var(--ink-2)}
.tm-editin.tm-editin.tm-titlein{font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.28;color:var(--ink);padding-right:36px}
.tm-editsave{margin-top:8px}
.tm-editsave[hidden]{display:none}
.tm-detailclient label{display:block;font-size:13px;color:var(--slate);margin-bottom:8px}
.tm-detailclient select{display:block;margin-top:4px}
.tm-hist{list-style:none;margin:0;padding:0}
.tm-hist li{display:grid;grid-template-columns:14px 150px 1fr;gap:10px;align-items:start;padding:7px 0}
.tm-hist .tm-dot{margin-top:4px}.tm-hist .when{font-size:13px;color:var(--slate)}
.tm-hist .sub{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.tm-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:22px;padding-top:16px}.tm-foot form{margin:0}
.tm-footleft{display:flex;gap:8px;flex-wrap:wrap}
.tm .tm-agentline{margin:0 0 10px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.tm .tm-inline{margin:0;display:inline-block}
.tm-report{margin-top:12px}.tm-report>summary{cursor:pointer;font-weight:700;color:var(--blue)}
.tm-reportbody{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:8px;font-size:14px;line-height:1.5;max-height:340px;overflow:auto}
/* Agent Report (Corey's edits #7, 2026-09-16): below Edit, above History. */
.tm-areport.done{background:var(--v-green-tint)}
.tm-areport.wait{background:var(--v-amber-tint)}
.tm-areport.stop{background:var(--v-red-tint)}
.tm-arhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tm-arleft{display:flex;gap:14px;align-items:flex-start}
.tm-armark{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;font-weight:800;background:var(--blue)}
.tm-armark.done{background:var(--v-green)}.tm-armark.wait{background:var(--v-amber)}.tm-armark.stop{background:var(--v-red)}
.tm-areport .tm-lbl{margin:0}
.tm-arsub{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.tm-ardate{font-size:13px;color:var(--slate);white-space:nowrap}
.tm-arsum{margin:14px 0 0;padding:10px 15px;background:var(--card);border:1px solid var(--line);border-radius:9px}
.tm-arsum div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:6px 0;font-size:14.5px}
.tm-arsum dt{font-weight:800;color:var(--ink)}.tm-arsum dd{margin:0;color:var(--ink)}
.tm-arwait{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.tm-arfull{margin-top:12px}
.tm-arfull>summary{cursor:pointer;color:var(--blue);font-size:14px;font-weight:600;list-style:none}
.tm-arfull>summary::-webkit-details-marker{display:none}
.tm-arfull>summary .h{display:none}.tm-arfull[open]>summary .v{display:none}.tm-arfull[open]>summary .h{display:inline}
/* Done Blocked by Its Own Report: same red as the Agent Report's own "stop" tone, so it reads as the same kind
   of thing - a reason this ticket is not where it looks like it should be. */
.tm-doneblock{background:var(--v-red-tint)}
.tm-doneblock .tm-lbl{color:var(--v-red)}
.tm-doneblock-lines{margin:10px 0 0;padding:10px 15px;background:var(--card);border:1px solid var(--line);border-radius:9px;list-style:none}
.tm-doneblock-lines li{padding:5px 0;font-size:14px;line-height:1.45;color:var(--ink)}
.tm-doneblock-lines li+li{border-top:1px solid var(--line)}
.tm-arfull .tm-reportbody{margin-top:10px}
@media(max-width:600px){.tm-arhead{flex-direction:column}.tm-arsum div{grid-template-columns:1fr;gap:2px}}
.tm-contact b{font-size:15px}
.tm-contactline{margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.tm-contactline a{color:var(--blue)}
.tm-thread{list-style:none;margin:0;padding:0}
.tm-reply{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-top:10px}
.tm-replywho{font-size:12px;color:var(--slate)}
.tm-replybody{margin-top:4px;font-size:14.5px;color:var(--ink);white-space:pre-wrap}
.tm-replyform{margin-top:12px}
.tm-replyform textarea{width:100%;font:inherit}
.tm-replyacts{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
/* Task added (Joel, 2026-09-15 mockup) */
.tm.ta-done{text-align:center;padding:10px 6px}
.ta-check{width:84px;height:84px;border-radius:50%;background:var(--v-green);color:#fff;font-size:48px;display:grid;place-items:center;margin:14px auto 18px}
.tm.ta-done h3{font-size:28px;margin:0 0 8px}.ta-sub{color:var(--slate);margin:0 0 22px}
.ta-route{background:var(--box-blue);border-radius:10px;padding:16px;display:grid;grid-template-columns:1fr auto 1.2fr auto 1fr;align-items:center;gap:10px;text-align:left}
.ta-node{display:flex;gap:10px;align-items:center;min-width:0}.ta-node small{display:block;color:var(--slate);font-size:12px;margin-top:2px}
.ta-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--blue);font-weight:800;flex:none}
.ta-av.red{background:var(--v-red-tint);color:var(--v-red)}.ta-av.amber{background:var(--v-amber-tint);color:var(--v-amber)}
.ta-av.purple{background:var(--v-purple-tint);color:var(--v-purple)}.ta-av.green{background:var(--v-green-tint);color:var(--v-green)}
.ta-av.grey{background:var(--box-grey);color:var(--ink-2)}
.ta-arrow{font-size:22px;color:var(--slate)}
.ta-title{margin:16px 0 0;font-weight:600;color:var(--ink-2)}
.ta-btns{display:grid;grid-template-columns:1fr 1.1fr;gap:14px;margin-top:26px}.ta-btns .btn{justify-content:center;text-align:center}
@media(max-width:600px){.tm-ballrow{grid-template-columns:1fr 1fr}.tm-edit3{grid-template-columns:1fr}.tm-settings{grid-template-columns:1fr}.tm-hist li{grid-template-columns:14px 1fr}
  .tm-hist li>span:last-child{grid-column:2}.ta-route{grid-template-columns:1fr}.ta-arrow{transform:rotate(90deg);text-align:center}.ta-btns{grid-template-columns:1fr}}
.tm .tfold{margin-top:16px}
/* Readable task folds (Joel, 2026-09-15: ADHD and dyslexia friendly): bigger type, generous line height, short lines,
   headings on their own line, plain lists, calm spacing, one idea per row. */
.tm .tread > summary{font-size:16px;font-weight:700;padding:10px 0;cursor:pointer;line-height:1.4}
.tm .tread-body,.tm .thist,.tm .tm-edit{font-size:16px;line-height:1.75;letter-spacing:.01em;word-spacing:.04em;max-width:66ch;color:var(--ink);text-align:left}
.tm .tread-body p{margin:0 0 14px}
.tm .tread-body h4{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin:20px 0 6px}
.tm .tread-body h4:first-child{margin-top:4px}
.tm .tread-body ul{margin:0 0 14px;padding-left:22px}.tm .tread-body li{margin:6px 0}
.tm .tread-body .tquote{border-left:4px solid var(--line);margin:0 0 14px;padding:6px 0 6px 14px;color:var(--ink-2)}
.tm .tread-body .tmsgrow{margin:0 0 12px}.tm .tread-body .tmsgrow p{margin:2px 0 0;white-space:pre-wrap}
.tm .tread-body .when,.tm .thist .when{font-size:14px;font-weight:700;color:var(--ink-2)}
.tm .tmeta{list-style:none;margin:18px 0 0;padding:12px 16px;border-radius:10px;background:var(--box-grey);font-size:15px}
.tm .tmeta li{margin:4px 0}
.tm .thist{list-style:none;margin:6px 0 0;padding:0}
.tm .thist li{padding:12px 0;border-top:1px solid var(--line)}
.tm .thist li:first-child{border-top:0}
.tm .thist .tnote{font-size:15px;color:var(--ink-2);margin-top:2px}
.tm .tm-edit{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));padding:6px 0 4px}
.tm .tm-edit label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:700;color:var(--ink)}
.tm .tm-edit .wide{grid-column:1/-1}
.tm .tm-edit select,.tm .tm-edit input{font-size:16px;padding:10px 12px;min-height:46px;font-weight:500}
/* Full task page (Joel, 2026-09-15: "this page looks like shit"). The pop-up's own body on the left at a readable
   width, so the page and the pop-up can never disagree; the agent and its updates on the right. Tokens only. */
.tp{max-width:1200px}
.tp button{width:auto}
.tp-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:14px;text-decoration:none}
.tp-back:hover{color:var(--blue)}
.tp-head{margin-bottom:20px}
.tp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);margin:0 0 6px}
.tp-eyebrow a{color:inherit;text-decoration:none}
.tp-eyebrow a:hover{color:var(--blue)}
.tp-head h1{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin:0;max-width:46ch}
.tp-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--ink-2)}
.tp-src{color:var(--slate)}
.tp-src a{color:var(--blue)}
.tp-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
@media(max-width:1180px){.tp-cols{grid-template-columns:1fr}}
.tp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.tp-side .tp-card + .tp-card{margin-top:16px}
/* The pop-up body starts with its "Next Action" panel; the card already pads it. */
.tp-main.tm > .tm-panel:first-child,.tp-main.tm > .tp-stepof + .tm-panel{margin-top:0}
/* The pop-up's Close button closes its dialog. A page has no dialog, so it would be a button that does nothing. A footer
   left with nothing in it (a done task has no Delete) would be an empty strip under a rule, so it goes too. */
.tp-main [data-dialog-close]{display:none}
.tp-main .tm-foot:not(:has(form)){display:none}
.tp-stepof{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:var(--box-grey);font-size:14.5px;color:var(--ink-2)}
.tp-stepof a{font-weight:700;color:var(--blue)}
.tp-h2{font-size:17px;font-weight:800;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink)}
/* A global h2 rule sets capitals and wide tracking; capitals are harder to read with dyslexia, so these headings opt out. */
.tp .tp-h2,.tp .tp-h2 .tab-count{text-transform:none;letter-spacing:-.01em}
.tp-note{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55}
.tp-hold{background:var(--v-amber-tint);border:1px solid var(--v-amber-line);border-radius:12px;padding:14px 18px;margin:0 0 16px;
  font-size:15px;line-height:1.6;color:var(--ink)}
.tp-hold b{color:var(--v-amber-ink)}
.tp-actsrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
/* A main task's steps: one row each, the current one highlighted, finished ones quiet. */
.tsteps{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.tstep{padding:9px 10px;border-radius:9px;font-size:15px;line-height:1.45;color:var(--ink)}
.tstep.cur{background:var(--box-blue);font-weight:700}
.tstep.done{color:var(--slate)}
.tstep .tdot{display:inline-block;width:20px;text-align:center;color:var(--blue)}
.tstep.done .tdot{color:var(--v-green)}
.tstep .btn-sm{font-weight:500}
/* stepList sets flex-wrap inline, which on a phone pushed the dot onto its own line above the step. Keep the dot beside
   the title and let the title wrap inside its own space instead. */
.tp .tstep{flex-wrap:nowrap !important;align-items:flex-start !important}
.tp .tstep > span:nth-child(2){flex:1 1 0;min-width:0}
.tp .tstep .tdot{flex:0 0 20px;padding-top:1px}
/* On a phone the owner ("· Corey") took a column of its own and squeezed the title into a strip. Put it under the title,
   with Remove on the right across both lines. */
@media(max-width:600px){
  .tp .tstep{display:grid !important;grid-template-columns:20px minmax(0,1fr) auto;column-gap:6px;row-gap:2px}
  .tp .tstep > .tdot{grid-column:1;grid-row:1}
  .tp .tstep > span:nth-child(2){grid-column:2;grid-row:1}
  .tp .tstep > .t2{grid-column:2;grid-row:2;font-size:13.5px}
  .tp .tstep > form{grid-column:3;grid-row:1 / span 2;margin-left:0 !important;align-self:start}
}
/* The agent card: status in words, newest update first, older ones folded, reply box last. */
.tp-status{margin:10px 0 4px}
.tp-err{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--v-red-bg);color:var(--v-red-ink);font-size:14px;line-height:1.5}
.tp-upd{list-style:none;margin:14px 0 0;padding:0}
.tp-upd li{padding:14px 0;border-top:1px solid var(--line-2)}
.tp-upd li:first-child{border-top:0;padding-top:2px}
.tp-upd .who{font-size:13px;font-weight:700;color:var(--ink-2);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tp-upd .who time{font-weight:500;color:var(--slate)}
.tp-upd .tx{margin-top:6px;font-size:15px;line-height:1.65;white-space:pre-wrap;color:var(--ink);overflow-wrap:anywhere}
.tp-upd li.mine .tx{background:var(--box-blue);border-radius:10px;padding:10px 12px}
.tp-upd li.sys .tx{color:var(--ink-2);font-size:14px}
details.tp-more{margin-top:4px}
details.tp-more > summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--blue);padding:10px 0;list-style-position:inside}
.tp-empty{margin:12px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.tp-reply{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.tp-reply label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.tp-reply textarea{width:100%;min-height:104px;font-size:16px;line-height:1.5;padding:10px 12px;border-radius:10px;margin:0}
.tp-reply .tp-note{margin:8px 0 12px;font-size:13.5px}
.tp-dir{font-size:13px;color:var(--slate);margin:14px 0 0;overflow-wrap:anywhere;line-height:1.5}
.tp-snooze form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.tp-snooze input[type=date]{width:auto;min-height:42px;font-size:15px;padding:6px 10px;margin:0}
@media(max-width:600px){.tp-head h1{font-size:23px}.tp-card{padding:18px 16px}}
/* Call Reviews > View One-Pager (Joel, call 2026-09-29: headings were the same weight as body text and the text
   stretched the full width of the modal, so no section stood out when scanning). A narrower centered column inside
   the modal, section headings clearly larger than body text (a real size jump, not just bold), more air between
   sections and bullets. Scoped to .cr-op only: the transcript and full call analysis views are untouched. */
.cr-op{max-width:58ch;margin:0 auto;font-size:14.5px;line-height:1.65;color:var(--ink)}
.cr-op-title{font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.3;text-align:center;margin:0 0 2rem}
.cr-op-sec{margin:0 0 2.2rem}
.cr-op-sec:last-child{margin-bottom:0}
.cr-op-h{font-size:25px;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--ink);margin:0 0 .9rem}
.cr-op-sec p{margin:0 0 .9rem}
.cr-op-sec p:last-child{margin-bottom:0}
.cr-op-sec ul{margin:0;padding-left:1.25rem}
.cr-op-sec li{margin:0 0 .7rem}
.cr-op-sec li:last-child{margin-bottom:0}
@media(max-width:600px){.cr-op{max-width:none}}
/* Intake v2: chip tabs, the submit row, the submissions list and the detail with its own tabs. */
.v2-top{padding:20px 22px 22px}
.v2-chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.v2-chip{border:0;border-radius:8px;padding:8px 13px;white-space:nowrap;font-size:12.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;background:var(--chip-bg);color:var(--ink-2);width:auto;font-family:inherit}
.v2-chip svg{width:15px;height:15px}
/* Clients page (Corey's edits #6, 2026-09-16): filter pills with counts, instant search, one grouped table. */
.ctool{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:18px 0 0;flex-wrap:wrap}
.cfilters{display:flex;gap:10px;flex-wrap:wrap}
.cf{width:auto;border:0;border-radius:9px;padding:10px 15px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--chip-bg);color:var(--ink-2)}
.cf em{font-style:normal;margin-left:9px}
.cf.all[aria-pressed="true"]{background:var(--blue);color:#fff}
.cf.active{background:var(--v-green-tint);color:var(--v-green-ink)}
.cf.opportunity{background:var(--v-amber-tint);color:var(--v-amber-ink)}
.cf.dormant{background:var(--box-grey);color:var(--ink-2)}
.cf:not(.all)[aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor}
.cf:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.csearch{width:300px;max-width:100%;height:43px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);color:var(--slate)}
.csearch svg{width:18px;height:18px;flex:0 0 18px}
.csearch input{border:0;outline:0;background:transparent;width:100%;font-size:14px;color:var(--ink);padding:0;height:auto;box-shadow:none}
.clist{margin-top:18px}
.clist td.cname{font-weight:700;color:var(--ink)}
.clist tr.cgroup td{border-top:9px solid var(--main-bg)}
.cstat{display:inline-block;min-width:68px;text-align:center;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700}
.cstat.active{background:var(--v-green-tint);color:var(--v-green-ink)}
.cstat.opportunity{background:var(--v-amber-tint);color:var(--v-amber-ink)}
.cstat.dormant{background:var(--box-grey);color:var(--ink-2)}
.clist td.copen{text-align:right;width:1%}
.clist td.copen a{display:inline-grid;place-items:center;color:var(--ink-2)}
.clist td.copen svg{width:20px;height:20px}
.cfoot{margin-top:14px}
/* Engineering page (Corey's edits #8, 2026-09-16). */
.eng-headr{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.eng-headr .filters{margin:0}
.eng-updated{font-size:12px;line-height:1.35;color:var(--slate);text-align:right}
.eng-refresh{width:auto;white-space:nowrap}
.eng-sec{margin:22px 0 0}
/* The agent's four cards (2026-09-23): four across, two by two below 1100px, never three and a lone fourth; a figure
   that still does not fit wraps inside its card instead of running past the edge. */
.eng-sec .stats.eng-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.eng-sec .stats.eng-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eng-sec .stats.eng-4 .stat{min-width:0}
.eng-sec .stats.eng-4 .stat .v{overflow-wrap:anywhere}
.eng-h{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;text-transform:none}
.eng-sub{margin:-4px 0 12px;font-size:13px;color:var(--slate)}
.eng-line{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.eng-pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;margin-right:6px}
.eng-pill.done{background:var(--v-green-tint);color:var(--v-green-ink)}
.eng-pill.wait{background:var(--v-amber-tint);color:var(--v-amber-ink)}
.eng-pill.stop{background:var(--v-red-tint);color:var(--v-red)}
.eng-days{margin-top:14px}
.eng-bottom{margin-top:22px;align-items:start}
.eng-card{padding:20px 22px}
.eng-cardh{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.eng-cardh h3{margin:0;font-size:16px;font-weight:800;color:var(--ink)}
.eng-cardh p{margin:2px 0 0;font-size:12.5px;color:var(--slate)}
.eng-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex:0 0 38px}
.eng-ic svg{width:19px;height:19px}
.eng-big{font-size:34px;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.eng-biglbl{margin:4px 0 14px;font-size:13px;color:var(--slate)}
.eng-good{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--v-green-tint);color:var(--v-green-ink)}
.eng-good b{display:block;font-size:14px}.eng-good span{font-size:13px}
.eng-check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--v-green);color:#fff;flex:0 0 26px}
.eng-check svg{width:15px;height:15px}
.eng-check.sm{width:20px;height:20px;flex-basis:20px}.eng-check.sm svg{width:12px;height:12px}
.eng-list{list-style:none;margin:0;padding:0}
.eng-list li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.eng-list li:first-child{border-top:0}
.eng-t{min-width:0;font-weight:600;color:var(--ink)}.eng-t a{color:inherit}
.eng-t small{display:block;font-weight:400;color:var(--danger-text);margin-top:2px}
.eng-c{color:var(--slate);font-size:13px;white-space:nowrap}
.eng-a{color:var(--slate);font-size:13px;white-space:nowrap;text-align:right}
.eng-dot{width:10px;height:10px;border-radius:50%}.eng-dot.prog{background:var(--blue)}.eng-dot.stop{background:var(--v-red)}.eng-dot.wait{background:var(--amber-ink)}
.eng-failh{margin:16px 0 4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--danger-text)}
.eng-note{margin:10px 0 0;font-size:12.5px}
.eng-more{margin-top:26px}
.eng-more>summary{cursor:pointer;font-weight:700;color:var(--blue);padding:8px 0;list-style:none}
.eng-more>summary::before{content:"▸  "}.eng-more[open]>summary::before{content:"▾  "}
@media(max-width:700px){.eng-headr{justify-content:flex-start}.eng-updated{text-align:left}
  .eng-list li{grid-template-columns:auto 1fr;}.eng-list .eng-c,.eng-list .eng-a{grid-column:2}}
@media(max-width:900px){.ctool{flex-direction:column;align-items:stretch}.csearch{width:100%}}
.v2-chip em{font-style:normal;opacity:.75}
.v2-chip:hover{background:var(--chip-bg)}
.v2-chip.red{background:var(--v-red-tint);color:var(--v-red)}
.v2-chip.amber{background:var(--v-amber-tint);color:var(--v-amber)}
.v2-chip.purple{background:var(--v-purple-tint);color:var(--v-purple)}
.v2-chip.green{background:var(--v-green-tint);color:var(--v-green)}
.v2-chip.blue{background:var(--blue-soft);color:var(--blue)}
.v2-chip.grey{background:var(--v-grey-bg);color:var(--v-grey-ink)}
.v2-chip.on,.v2-chip.on:hover{background:var(--blue);color:var(--on-solid)}
.v2-top .v2-chip.on,.v2-top .v2-chip.on:hover{background:var(--blue-soft);color:var(--blue)}
/* Needs Approval borrows Start Recording's exact red (Corey, 2026-09-17: "I actually would rather the button look
   and have the same red as the start recording button that we currently have on intake, on record voice notes").
   Solid var(--danger) fill and var(--on-solid) white text, same as #vnGo -- not the tint every other alert chip
   uses -- and it stays that way even while its own tab is open, so it catches your eye whether or not you're
   already looking at the queue. */
#naChip[hidden]{display:none}
#naChip.red,#naChip.red:hover,.v2-top #naChip.on.red,.v2-top #naChip.on.red:hover{background:var(--danger);color:var(--on-solid)}
.v2-inp{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:14px;color:var(--ink);
  background:var(--card);font-family:inherit;margin:0}
.v2-inp:focus{outline:0;border-color:var(--open-line);box-shadow:0 0 0 3px var(--blue-soft)}
textarea.v2-inp{min-height:104px;resize:vertical;margin-top:14px}
.v2-subrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:14px;align-items:end;margin-top:16px}
.v2-subrow label{display:flex;flex-direction:column;gap:7px;font-size:10px;letter-spacing:.09em;font-weight:700;
  color:var(--ink-2);text-transform:uppercase}
.v2-subrow select,.v2-subrow input{height:44px;margin:0;text-transform:none;letter-spacing:0;font-weight:400;font-size:14px;
  border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 12px;width:100%}
.v2-subrow .btn{height:44px}
/* Add Request has only Client and Submit left (Corey's spec, point 4): Client on the left, Submit
   right after it, same two-column shape as the Record tab's vn-row rather than the three-column
   .v2-subrow spreading the button to the far right. */
.ar-row{grid-template-columns:minmax(0,1fr) auto}
.v2-intake{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.v2-intake > *{min-width:0}
.v2-field{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  height:40px;padding:0 12px;box-shadow:var(--card-shadow-d);margin:0;font-size:13.5px}
.v2-field svg{width:15px;height:15px;color:var(--muted);flex:none}
.v2-field input{border:0;outline:0;background:transparent;width:100%;margin:0;padding:0;font-size:13.5px;color:var(--ink)}
.v2-listsearch{padding:0 16px 14px}
/* Forty submissions would push the page to the floor; the list scrolls inside its card instead. */
#isubs{max-height:760px;overflow-y:auto}
.v2-sub{display:flex;gap:11px;padding:13px 16px;border-top:1px solid var(--line-2);border-left:3px solid transparent;color:inherit}
.v2-sub[hidden]{display:none}
.v2-sub:hover{background:var(--row-hover)}
.v2-sub.on{background:var(--blue-tint);border-left-color:var(--blue)}
.v2-sub .mic,.v2-dhead .mic{width:26px;height:26px;border-radius:8px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;flex:none}
.v2-sub .mic svg{width:14px;height:14px}
.v2-sub .sb{min-width:0;flex:1}
.v2-sub .sb b{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.35}
.v2-sub .sb span{display:block;font-size:12px;color:var(--slate);margin-top:3px}
.v2-sub .rt{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.v2-sub .rt i{font-style:normal;font-size:11.5px;color:var(--slate);white-space:nowrap}
.v2-dhead{display:flex;align-items:center;gap:13px;padding:18px 22px 14px;flex-wrap:wrap}
.v2-dhead .mic{width:34px;height:34px;border-radius:9px}
.v2-dhead .mic svg{width:17px;height:17px}
.v2-dhead .ib{min-width:0;flex:1}
.v2-dhead h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:var(--ink);display:block}
.v2-dhead p{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.v2-dhead p a{color:var(--blue);font-weight:600}
.v2-dhead .rt{display:flex;gap:11px;align-items:center;margin-left:auto}
.btn.btn-s{padding:7px 13px;font-size:12.5px;border-radius:8px}
.v2-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);padding:0 22px;overflow-x:auto;scrollbar-width:none}
.v2-tabs a{padding:12px 0 11px;font-size:13.5px;font-weight:600;color:var(--slate);border-bottom:2px solid transparent;white-space:nowrap}
.v2-tabs a:hover{color:var(--ink-2)}
.v2-tabs a.on{color:var(--blue);border-bottom-color:var(--blue)}
/* owner's queue tabs are buttons (switch in place, no reload): same look as the link tabs. */
.v2-tabs button{padding:12px 0 11px;font:inherit;font-size:13.5px;font-weight:600;color:var(--slate);background:none;border:0;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer}
.v2-tabs button:hover{color:var(--ink-2)}
.v2-tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
.nm-tabs button.on .tab-count{background:var(--box-blue);color:var(--blue)}
/* Work Status header + status cards (Corey's HTML mockup, 2026-10-10, replaces the colored pill row). Title and
   subtitle on the left, the two top-right filters (All, Watch List) on the right, then a five-column grid of
   status cards. Every card and both filters keep data-ws / .tab-count / .on / aria-pressed, so the click, count,
   client-filter and refresh code in routes/one_task.js drives them exactly as it drove the pills. Colors come from
   the app's own light/dark tokens; the count colors follow the mockup (red, purple, yellow, green, white). */
.ws-panel{padding:16px 22px 22px}
.ws-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:12px}
.ws-head h3{margin:0 0 4px;font-size:22px;line-height:1.2;font-weight:700}
.ws-head p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.4}
.ws-filters{display:flex;gap:10px;flex-shrink:0}
.ws-filter{height:38px;padding:0 18px;border:1px solid var(--line);border-radius:7px;background:var(--card-2);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ws-filter.on{border-color:var(--info);color:var(--info);box-shadow:0 0 0 1px rgba(31,150,255,.2),inset 0 0 12px rgba(31,150,255,.06)}
.ws-filter .tab-count,.ws-card .tab-count{background:none;border-radius:0;padding:0}
.ws-filter .tab-count{margin-left:4px;font-size:inherit;color:inherit}
.ws-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ws-card{min-height:72px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--card-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.ws-card:hover{border-color:var(--slate);transform:translateY(-1px)}
.ws-card.on{border-color:var(--info);box-shadow:0 0 0 1px rgba(31,150,255,.2)}
.ws-card .ws-label{display:block;margin-bottom:6px;color:var(--ink-2);font-size:13px;line-height:1.2;font-weight:500;transition:color .15s ease}
.ws-card.on .ws-label,.ws-card:focus-visible .ws-label{color:var(--ink);font-size:15px;font-weight:700}
.ws-card:hover .ws-label{color:var(--ink)}
.ws-filter:hover{color:var(--ink)}
.ws-filter.on{font-weight:700}
.ws-card .tab-count{display:block;font-size:27px;line-height:1;font-weight:700;letter-spacing:-.5px;color:var(--ink)}
.ws-card.red .tab-count{color:var(--danger-text)}
.ws-card.purple .tab-count{color:var(--violet-ink)}
.ws-card.yellow .tab-count{color:var(--warn-text)}
.ws-card.green .tab-count{color:var(--ok-text)}
.ws-star{border:0;background:none;padding:0 6px 0 0;font:inherit;font-size:15px;line-height:1;color:var(--muted);cursor:pointer}
.ws-star.on{color:var(--warn-text)}
@media(max-width:1100px){.ws-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.ws-panel{padding:12px}.ws-head{flex-direction:column}.ws-filters{width:100%}.ws-filter{flex:1}.ws-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v2-tasksh{padding:20px 22px 6px;display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.v2-tasksh h3{margin:0;font-size:19px;font-weight:800}
.v2-tasksh p{margin:5px 0 0;color:var(--ink-2);font-size:13px}
.v2-tasksh .btn{margin-left:auto}
.v2-chiprow{padding:16px 22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.v2-chiprow .v2-field{margin-left:auto;min-width:220px}
.v2-sumbox{background:var(--blue-tint);border-radius:11px;padding:16px 18px;display:flex;gap:13px;margin:20px 22px}
.v2-sumbox svg{width:20px;height:20px;color:var(--blue);flex:none;margin-top:2px}
.v2-sumbox b{display:block;font-size:14.5px;font-weight:700;margin-bottom:5px}
.v2-sumbox p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;white-space:pre-wrap}
/* The structured AI summary (Corey's spec, 2026-09-17): five labelled rows instead of one paragraph. */
.v2-aisum{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);margin:20px 22px}
.v2-aisum-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:15px 20px;
  background:var(--blue-tint);border-bottom:1px solid var(--line)}
.v2-aisum-t{display:flex;align-items:center;gap:10px}
.v2-aisum-t svg{width:19px;height:19px;color:var(--blue);flex:none}
.v2-aisum-t b{font-size:15.5px;font-weight:800;color:var(--ink)}
.v2-aisum-pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--blue-soft);
  color:var(--blue);font-size:12px;font-weight:650;padding:6px 12px;border-radius:99px;white-space:nowrap}
.v2-aisum-pill svg{width:13px;height:13px;flex:none}
.v2-aisum-row{display:flex;gap:24px;align-items:flex-start;padding:17px 20px;border-top:1px solid var(--line-2)}
.v2-aisum-body>.v2-aisum-row:first-child{border-top:0}
.v2-aisum-l{display:flex;gap:12px;flex:0 0 230px;min-width:0}
.v2-aisum-l .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.v2-aisum-l .ic svg{width:17px;height:17px}
.v2-aisum-l b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.v2-aisum-l span{display:block;font-size:12.5px;color:var(--slate);margin-top:2px;line-height:1.4}
.v2-aisum-r{margin:2px 0 0;padding-left:18px;flex:1;min-width:0}
.v2-aisum-r li{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:6px}
.v2-aisum-r li:last-child{margin-bottom:0}
.v2-aisum-r li b{color:var(--ink);font-weight:700}
.v2-aisum-row.blue .ic{background:var(--blue-soft);color:var(--blue)}
.v2-aisum-row.blue .v2-aisum-r li::marker{color:var(--blue)}
.v2-aisum-row.green .ic{background:var(--v-green-tint);color:var(--v-green)}
.v2-aisum-row.green .v2-aisum-r li::marker{color:var(--v-green)}
.v2-aisum-row.orange .ic{background:var(--v-amber-tint);color:var(--v-amber)}
.v2-aisum-row.orange .v2-aisum-r li::marker{color:var(--v-amber)}
.v2-aisum-row.v2-aisum-bottom{background:var(--v-green-tint)}
.v2-aisum-bl{margin:2px 0 0;font-size:14.5px;font-weight:700;color:var(--v-green-ink);line-height:1.55;flex:1}
@media(max-width:700px){
  .v2-aisum-row{flex-direction:column;gap:10px}
  .v2-aisum-l{flex:1 1 auto}
  .v2-aisum-r,.v2-aisum-bl{padding-left:0;margin-left:46px;width:calc(100% - 46px)}
}
/* Forms inside the v2 pop-ups. */
.tm-sub{margin:4px 0 0;color:var(--blue);font-weight:600;font-size:13.5px}
.v2-frow{margin-top:15px}
.v2-frow label,.v2-frow .lbl{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.v2-frow .req{color:var(--v-red)}
.v2-frow textarea,.v2-frow input,.v2-frow select{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  font-size:14px;color:var(--ink);background:var(--card);font-family:inherit;margin:0}
.v2-frow textarea{min-height:88px;resize:vertical}
.v2-radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-top:6px}
.v2-radios .v2-radio{border-radius:10px;padding:13px 12px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;
  cursor:pointer;border:1.5px solid transparent;margin:0}
.v2-radio i{width:16px;height:16px;border-radius:99px;border:2px solid currentColor;flex:none;display:grid;place-items:center}
.v2-radios .v2-radio input{position:absolute;opacity:0;pointer-events:none;width:auto}
.v2-radio.red{background:var(--v-red-tint);color:var(--v-red)}
.v2-radio.amber{background:var(--v-amber-tint);color:var(--v-amber)}
.v2-radio.purple{background:var(--v-purple-tint);color:var(--v-purple)}
.v2-radio.grey{background:var(--v-grey-bg);color:var(--v-grey-ink)}
.v2-radio:has(input:checked){border-color:currentColor}
.v2-radio:has(input:checked) i::after{content:"";width:8px;height:8px;border-radius:99px;background:currentColor}
.v2-radio:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:1100px){ .v2-intake{grid-template-columns:minmax(0,1fr)} }
/* Intake on a phone (Joel, 2026-09-16: "not good at all on mobile"). The page is one column there, so an opened
   submission used to sit under the whole list. Now: open one and it shows alone with a way back; open none and
   you get the forms and the list. Tasks turn into cards because a four-column table cannot fit 390px. */
.v2-mback{display:none}
@media(max-width:860px){
  .v2-ipage{display:flex;flex-direction:column;gap:12px}
  .v2-ipage > .panel,.v2-ipage .panel{margin-bottom:0}
  .v2-ipage .v2-intake{display:contents}
  .v2-ipage:not(.has-open) .v2-idetail{display:none}
  .v2-ipage.has-open .v2-ilist,.v2-ipage.has-open > .v2-top{display:none}
  .v2-ipage.has-open .v2-mback{display:inline-flex;align-items:center;gap:6px;order:-2;font-size:14px;font-weight:700;
    color:var(--blue);padding:4px 2px 0;min-height:40px}
  .v2-ipage.has-open .v2-idetail{order:-1}
  .v2-top{padding:14px 14px 16px}
  .phead .sub{display:none}
  .v2-top .v2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px;
    -webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);
    mask-image:linear-gradient(to right,#000 82%,transparent)}
  #isubs{max-height:none;overflow:visible}
  .v2-top .v2-chips::-webkit-scrollbar,.v2-chiprow .v2-chips::-webkit-scrollbar{display:none}
  .v2-top .v2-chip,.v2-chiprow .v2-chip{flex:none;min-height:38px}
  .v2-listsearch{padding:0 14px 12px}
  .v2-sub{padding:13px 14px}
  .v2-dhead{padding:14px 14px 10px;gap:10px 12px}
  .v2-dhead .ib{flex:1 1 calc(100% - 50px)}
  .v2-dhead h2{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
  .v2-dhead .rt{margin-left:0;width:100%;justify-content:space-between}
  .v2-tabs{padding:0 14px;gap:20px}
  .v2-tasksh{padding:16px 14px 4px;gap:12px}
  .v2-tasksh h3{font-size:17px}
  .v2-tasksh .btn{margin-left:0;width:100%;justify-content:center;min-height:44px}
  .v2-chiprow{padding:12px 14px;gap:10px}
  .v2-chiprow .v2-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px;width:calc(100% + 28px);
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  .v2-idetail .ipane{padding:14px}
  .v2-idetail .itext{font:15px/1.6 Inter,system-ui,sans-serif;padding:12px;max-height:none}
  table.v2-itable{min-width:0 !important;width:100%}
  table.v2-itable thead{display:none}
  table.v2-itable tr{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 10px;padding:13px 14px;
    border-top:1px solid var(--line)}
  table.v2-itable tr[hidden]{display:none}
  table.v2-itable td{display:block;padding:0;border:0;width:auto !important;text-align:left}
  table.v2-itable td.v2-task{grid-column:1/-1;font-size:15px;line-height:1.4}
  table.v2-itable td.v2-act{grid-column:1/-1;white-space:normal;display:flex;flex-wrap:wrap;gap:8px}
  table.v2-itable td.v2-act:empty{display:none}
  table.v2-itable td.v2-act > *{margin-left:0 !important}
  table.v2-itable .btn-approve,table.v2-itable .btn-reject,table.v2-itable .btn-open{min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:820px){
  .v2-subrow{grid-template-columns:1fr}
  .v2-radios{grid-template-columns:1fr}
  .v2-chiprow .v2-field{margin-left:0;min-width:0;width:100%}
}
/* Client pages v2: header, three tabs, Overview, Recordings drawer, Pre-call brief, Team. */
.v2-crumbrow{display:flex;align-items:center;gap:20px;margin-bottom:16px;flex-wrap:wrap}
.v2-crumbs{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);margin:0}
.v2-crumbs a{color:var(--blue);font-weight:600}
.v2-crumbs svg{width:14px;height:14px;color:var(--muted)}
.v2-headacts{display:flex;gap:11px;margin-left:auto;flex-wrap:wrap}
.v2-chead{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.v2-logo{width:56px;height:56px;border-radius:11px;background:var(--navy);color:var(--on-solid);display:grid;place-items:center;
  font-size:17px;font-weight:800;flex:none}
.v2-cid{min-width:0;flex:1 1 280px}
.v2-cid h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.v2-site{display:flex;width:fit-content;align-items:center;gap:6px;color:var(--blue);font-size:13.5px;font-weight:600;margin-top:6px}
.v2-desc{margin:4px 0 0;font-size:13.5px;color:var(--ink-2);max-width:62ch}
.v2-hmeta{margin-left:auto;display:flex;gap:40px;padding-top:6px;flex-wrap:wrap}
.v2-hmeta .k{font-size:12px;color:var(--slate)}
.v2-hmeta .v{font-size:14.5px;font-weight:700;color:var(--ink)}
.v2-hmeta .v small{display:block;font-size:12.5px;font-weight:500;color:var(--slate);margin-top:2px}
.v2-tabbar{display:flex;gap:30px;border-bottom:1px solid var(--line);margin:18px 0 20px}
.v2-tabbar a{padding:0 0 11px;font-size:14px;font-weight:600;color:var(--slate);border-bottom:2px solid transparent}
.v2-tabbar a:hover{color:var(--ink-2)}
.v2-tabbar a.on{color:var(--ink);border-bottom-color:var(--ink)}
.v2-donerow{display:flex;align-items:center;gap:13px}
.v2-tick{width:23px;height:23px;border-radius:99px;background:var(--v-green);color:var(--on-solid);display:grid;place-items:center;flex:none}
.v2-tick svg{width:13px;height:13px}
.v2-noteform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:0 22px 16px}
.v2-noteform input,.v2-noteform textarea{margin:0;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13.5px;
  background:var(--card);color:var(--ink);font-family:inherit;width:100%}
.v2-noteform input{grid-column:1 / -1}
.v2-noteform textarea{min-height:44px;resize:vertical}
.v2-noteform .btn{align-self:stretch}
.v2-recsplit{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:18px;align-items:start}
.v2-recsplit > *{min-width:0}
.v2-rec{display:flex;gap:18px;padding:18px 22px;border-top:1px solid var(--line-2);align-items:flex-start;color:inherit}
.v2-rec[hidden]{display:none}
.v2-rec:hover{background:var(--row-hover)}
.v2-rec.on{background:var(--blue-tint)}
.v2-recdate{text-align:center;flex:none;width:46px}
.v2-recdate .m{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--slate)}
.v2-recdate .d{font-size:22px;font-weight:800;color:var(--ink);line-height:1.1}
.v2-recdate .y{font-size:11px;color:var(--slate)}
.v2-rec .rb{min-width:0;flex:1}
.v2-rec h4{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.v2-rec .mt{margin:4px 0 0;font-size:12.5px;color:var(--slate)}
.v2-rec .ds{margin:7px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.v2-rec .btn{flex:none}
.v2-drawer{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:22px 24px 20px;
  position:sticky;top:20px}
.v2-drawer .k{font-size:12px;color:var(--slate)}
.v2-drawer h3{margin:2px 0 0;font-size:22px;font-weight:800;letter-spacing:-.015em}
.v2-drawer .mt{margin:7px 0 0;font-size:13px;color:var(--ink-2)}
.v2-drawer .v2-tabs{padding:0;margin:18px 0}
.v2-drawer .v2-sumbox{margin:0}
/* Recording ... menu (spec "Recording Actions", 2026-10-04): Clients > [client] > Recordings only (lib/recording_
   detail.js canMove / canDelete), one shared menu for both -- "Move to another client" opens a small Client-only
   modal (.tmodal/.tm/.v2-frow, same as every other small save form) that saves through the picker's existing route,
   never a new one; "Delete recording" asks to confirm, then unlists the call from this client the same way. */
.v2-dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.v2-recmore{position:relative;flex:none;margin-top:1px}
.v2-recmore>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--ink);
  font-size:15px;letter-spacing:1px;user-select:none}
.v2-recmore>summary::-webkit-details-marker{display:none}
.v2-recmore>summary:hover,.v2-recmore[open]>summary{background:var(--x-hover,var(--card-2));border-color:var(--slate)}
.v2-recmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:210px;padding:8px 0;
  border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 12px 30px rgba(0,0,0,.28);text-align:left}
.v2-recmi{display:flex;align-items:center;width:100%;min-height:42px;padding:0 16px;border:0;background:transparent;
  color:var(--ink);font:inherit;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap;box-sizing:border-box}
.v2-recmi:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.v2-seclist{margin-top:20px}
.v2-seclist .hd{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.v2-seclist .hd .ic{width:29px;height:29px;border-radius:99px;display:grid;place-items:center;color:var(--on-solid);background:var(--blue);flex:none}
.v2-seclist .hd .ic svg{width:15px;height:15px}
.v2-seclist .hd b{font-size:15px;font-weight:700}
.v2-seclist ul{margin:0;padding-left:34px}
.v2-seclist li{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:4px}
.v2-dhd{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
.v2-dhd h4{margin:0;font-size:17px;font-weight:800}
.v2-dhd p{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.v2-dhd .btn{margin-left:auto}
.v2-scroller{max-height:420px;overflow:auto;padding-right:6px}
.v2-tline{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.v2-tline .sp{font-size:13px;font-weight:700;color:var(--ink);flex:none;width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-tline p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;min-width:0}
.v2-taskrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;
  background:var(--card);flex-wrap:wrap}
.v2-taskrow p{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);flex:1 1 200px;min-width:0;line-height:1.4}
.v2-dfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.v2-briefhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 16px;flex-wrap:wrap}
.v2-briefhead h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--ink);display:block}
.v2-briefhead p{margin:5px 0 0;color:var(--ink-2);font-size:13.5px}
.v2-briefhead .last{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:10px}
.v2-briefhead .last b{color:var(--ink)}
.v2-qs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:start;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px;box-shadow:var(--card-shadow-d)}
.v2-qs .hd{display:flex;gap:13px;align-items:flex-start}
.v2-qs .hd .ic{width:38px;height:38px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}
.v2-qs .hd .ic svg{width:19px;height:19px}
.v2-qs h3{margin:0;font-size:17px;font-weight:800}
.v2-qs .since{margin:2px 0 0;font-size:12.5px;color:var(--slate)}
.v2-qs p{margin:11px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:68ch}
.v2-minis{display:flex;gap:11px;flex-wrap:wrap}
.v2-mini{border-radius:11px;padding:13px 17px;text-align:center;min-width:104px}
.v2-mini .n{font-size:24px;font-weight:800;line-height:1.1}
.v2-mini .l{font-size:12px;color:var(--ink-2);margin-top:1px}
.v2-mini.green{background:var(--v-green-tint)}.v2-mini.green .n{color:var(--v-green)}
.v2-mini.blue{background:var(--blue-tint)}.v2-mini.blue .n{color:var(--blue)}
.v2-mini.amber{background:var(--v-amber-tint)}.v2-mini.amber .n{color:var(--v-amber)}
.v2-mini.purple{background:var(--v-purple-tint)}.v2-mini.purple .n{color:var(--v-purple)}
.v2-bsec{margin-top:16px}
.v2-bsec .bh{display:flex;align-items:center;gap:13px;padding:17px 22px;flex-wrap:wrap}
.v2-bsec .bh .ic{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;color:var(--on-solid);flex:none}
.v2-bsec .bh .ic svg{width:18px;height:18px}
.v2-bsec .bh h3{margin:0;font-size:17px;font-weight:800}
.v2-bsec .bh p{margin:2px 0 0;font-size:12.5px;color:var(--slate)}
.v2-bsec .bh .badge{margin-left:auto;border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:700}
.v2-bsec td{font-size:13px;padding:12px 22px}
.v2-bsec td.num{color:var(--slate);width:1%;font-weight:600}
.v2-bsec td.dtl{color:var(--ink-2)}
.v2-bsec.green .bh .ic{background:var(--v-green)}.v2-bsec.green .badge{background:var(--v-green-tint);color:var(--v-green)}
.v2-bsec.blue .bh .ic{background:var(--blue)}.v2-bsec.blue .badge{background:var(--blue-tint);color:var(--blue)}
.v2-bsec.amber .bh .ic{background:var(--v-amber)}.v2-bsec.amber .badge{background:var(--v-amber-tint);color:var(--v-amber)}
.v2-bsec.purple .bh .ic{background:var(--v-purple)}.v2-bsec.purple .badge{background:var(--v-purple-tint);color:var(--v-purple)}
.v2-next{background:var(--blue-tint);border:1px solid var(--open-line);border-radius:12px;padding:20px 22px;margin-top:16px;
  display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.v2-next > svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:2px}
.v2-next h3{margin:0 0 8px;font-size:17px;font-weight:800}
.v2-next ul{margin:0;padding-left:19px}
.v2-next li{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.v2-next .btn{margin-left:auto;align-self:center}
.v2-teamhead{display:flex;align-items:flex-start;gap:18px;padding:20px 22px;flex-wrap:wrap}
.v2-teamhead h2{margin:0;font-size:21px;font-weight:800;text-transform:none;color:var(--ink);display:block}
.v2-teamhead p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.v2-teamhead .rt{margin-left:auto;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.v2-person{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.v2-person b{font-size:14px;font-weight:700}
td.v2-contact{font-size:13px;color:var(--ink-2);line-height:1.6}
td.v2-contact a{color:var(--ink-2)}
td.v2-contact .ph{color:var(--slate)}
.v2-teamhead h2,.v2-briefhead h2{letter-spacing:-.02em}
.v2-next > div{flex:1 1 320px;min-width:0}
.v2-clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
td.v2-contact .cl{display:block;overflow-wrap:anywhere}
@media(max-width:760px){ .mstack td.v2-contact{display:block} .mstack td.v2-contact::before{display:block;margin-bottom:2px} }
button.btn-danger2{background:var(--card);border:1px solid var(--v-red-line);color:var(--v-red-ink);border-radius:8px;padding:7px 13px;
  font-size:12.5px;font-weight:600;width:auto;cursor:pointer;font-family:inherit}
button.btn-danger2:hover{background:var(--v-red-tint)}
@media(max-width:1280px){ .v2-recsplit{grid-template-columns:minmax(0,1fr)} .v2-drawer{position:static} }
@media(max-width:820px){
  .v2-qs{grid-template-columns:1fr}
  .v2-hmeta{margin-left:0;gap:24px}
  .v2-headacts{margin-left:0}
  .v2-noteform{grid-template-columns:1fr}
  .v2-teamhead .rt{margin-left:0;width:100%}
  .v2-teamhead .v2-field{min-width:0 !important;flex:1}
}
@media print{ aside,header.mtop,.v2-tabbar,.v2-headacts,.noprint,.tjw-topbar{display:none !important} main{padding:0 !important} }
/* Top bar (Joel, 2026-09-30, guardrail "Top bar: search and notification bell, top right"; Joel, 2026-10-08,
   removed the global search from TJW's own Command Center, bell only - see lib/nav_standard.js TJW_NAV for the
   override): main's own first child, sticky to the top of the viewport, the bell on the right and nothing else -
   flex justify-content:flex-end means the bell just sits at the right edge with the search gone, no gap left
   behind. It replaces the bell's old fixed placement (the bell used to be the only thing up there, position:fixed
   so it never had to know about main's padding; now it is a normal flex child of this bar instead, so .tjw-bell
   below is position:relative, not fixed). */
.tjw-topbar{position:sticky;top:0;z-index:35;height:66px;margin:-26px -30px 26px;padding:0 30px;
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  background:var(--main-bg);border-bottom:1px solid var(--line)}
@media(max-width:860px){
  .tjw-topbar{position:static;height:auto;flex-wrap:wrap;margin:-1.15rem -1rem 1.15rem;padding:10px 1rem;border-bottom:1px solid var(--line)}
}
@media(max-width:520px){ .tjw-topbar{margin:-1rem -.75rem 1rem;padding:8px .75rem} }
/* Notification bell (Real-Time Completed Task notifications, 379 internal spec): a normal flex child of
   .tjw-topbar now, position:relative just so its drop-down (.tjw-bell-dd, absolute) still anchors under the
   button itself rather than the whole bar. */
.tjw-bell{position:relative;z-index:80}
.tjw-bell-btn{position:relative;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  box-shadow:var(--shadow-card);padding:0}
.tjw-bell-btn:hover{background:var(--field)}
.tjw-bell-btn svg{width:19px;height:19px}
.tjw-bell-count{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--danger);color:var(--on-solid);font-size:11px;font-weight:700;line-height:17px;text-align:center;
  font-family:'Space Grotesk','Inter',sans-serif}
.tjw-bell-dd{position:absolute;top:46px;right:0;width:360px;max-width:calc(100vw - 22px);max-height:70vh;
  overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-drawer)}
.tjw-bell-dd-head{padding:.7rem .9rem;font-weight:700;font-size:13px;border-bottom:1px solid var(--line);color:var(--ink)}
.tjw-bell-row{display:block;width:100%;text-align:left;padding:.6rem .9rem;border:0;border-radius:0;
  background:none;cursor:pointer;border-bottom:1px solid var(--line);font:inherit;color:inherit}
.tjw-bell-row:hover{background:var(--field)}
.tjw-bell-row:last-child{border-bottom:0}
.tjw-bell-row .t1{font-size:12.5px;font-weight:600;color:var(--ink)}
.tjw-bell-row .t2{font-size:11.5px;color:var(--slate);margin-top:2px}
.tjw-bell-row.unread .t1{font-weight:700}
.tjw-bell-empty{padding:1.2rem .9rem;color:var(--slate);font-size:12.5px;text-align:center}
/* Client filter dropdown (Notifications - Client Filter spec, 2026-10-08): sits directly below the "Notifications"
   head and above the feed, same horizontal padding as the head above it. */
.tjw-bell-filter{display:block;width:calc(100% - 1.8rem);margin:.55rem .9rem;padding:.4rem .5rem;font-size:12.5px}
/* Build Board v2: four state columns, tinted heads with a round icon, cards that open the pop-up. */
.v2-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.v2-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.v2-colhead{border-radius:12px;padding:15px 17px;display:flex;align-items:center;gap:12px;border:1px solid transparent}
.v2-colhead .ic{width:33px;height:33px;border-radius:99px;display:grid;place-items:center;color:var(--on-solid);flex:none}
.v2-colhead .ic svg{width:17px;height:17px}
.v2-colhead h3{margin:0;font-size:16.5px;font-weight:800;display:flex;align-items:baseline;gap:9px}
.v2-colhead h3 em{font-style:normal;font-size:14px;font-weight:700;opacity:.85}
.v2-colhead p{margin:2px 0 0;font-size:12px;color:var(--ink-2)}
.v2-colhead.red{background:var(--v-red-tint);border-color:var(--v-red-line)}.v2-colhead.red .ic{background:var(--v-red)}.v2-colhead.red h3{color:var(--v-red)}
.v2-colhead.amber{background:var(--v-amber-tint);border-color:var(--v-amber-line)}.v2-colhead.amber .ic{background:var(--v-amber)}.v2-colhead.amber h3{color:var(--v-amber)}
.v2-colhead.purple{background:var(--v-purple-tint);border-color:var(--v-purple-line)}.v2-colhead.purple .ic{background:var(--v-purple)}.v2-colhead.purple h3{color:var(--v-purple)}
.v2-colhead.green{background:var(--v-green-tint);border-color:var(--v-green-line)}.v2-colhead.green .ic{background:var(--v-green)}.v2-colhead.green h3{color:var(--v-green)}
.v2-cards{display:flex;flex-direction:column;gap:11px}
.v2-cards:not(.all) > .v2-card:nth-child(n+6){display:none}
.v2-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 15px;
  box-shadow:var(--card-shadow-d);color:inherit}
.v2-card:hover{border-color:var(--open-line);box-shadow:var(--shadow-md)}
.v2-card h4{margin:0;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink)}
.v2-card .cl{margin:6px 0 0;font-size:12.5px;color:var(--slate)}
.v2-card .ft{display:flex;align-items:center;gap:9px;margin-top:12px;flex-wrap:wrap}
.v2-card .ago{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--slate);font-weight:600}
.v2-card .ago svg{width:13px;height:13px}
.v2-card .own{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;color:var(--ink-2);font-weight:600}
.v2-card .own .avat{width:22px;height:22px;flex:0 0 22px;font-size:10.5px}
button.v2-more{background:var(--blue-soft);border:0;border-radius:10px;padding:12px;color:var(--blue);font-size:13.5px;
  font-weight:600;cursor:pointer;width:100%}
button.v2-more:hover{background:var(--blue-tint)}
@media(max-width:1280px){ .v2-board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:820px){ .v2-board{grid-template-columns:minmax(0,1fr)} }
/* Build Board status sub-tabs (Corey, on a call, 2026-09-15): reuse .v2-tabs, but this page has no panel
   padding around it, so drop the 22px side padding .v2-tabs assumes. */
.bb-tabs{padding:0;margin-bottom:18px}
.v2-board.single{grid-template-columns:minmax(0,1fr)}
.v2-board.single .v2-col{max-width:640px}
/* The old .note is a yellow warning box; under a button it is only a caption. */
.tm-acts .note{background:none;border:0;padding:0;margin:0;border-radius:0}
/* Chrome draws a focus ring round a dialog opened with showModal(). */
dialog.tmodal,dialog.tmodal:focus,dialog.tmodal:focus-visible{outline:none}
@media(max-width:860px){
  aside{width:272px}
  main{padding:1.15rem 1rem 4rem}
}
@media(max-width:760px){
  /* Phone cards (.mstack): the v2 table padding and the phone-pass min-width above must not reach them. */
  .panel.mstack > table{min-width:0}
  .panel.mstack td{padding:.15rem 0;border-top:0}
  .panel.mstack tr:hover td{background:transparent}
  .panel.mstack td.v2-wait,.panel.mstack td.v2-act{text-align:left}
  .panel.mstack td.v2-act{padding-top:.5rem}
  .tm{padding:22px 18px 18px}
  .tm-grid{grid-template-columns:1fr}
  .tm-acts .go{justify-content:flex-start;margin-left:0}
  .tm-acts .stack{align-items:flex-start}
}

:root{
  --m-card:#fff; --m-line:#e2ebf4; --m-line-2:#edf2f7; --m-line-3:#e7edf4; --m-line-4:#e5edf5;
  --m-field-line:#dce7f1; --m-tabs-line:#dce8f2;
  --m-ink:#071b3d; --m-ink-2:#425d84; --m-ink-3:#395273; --m-sub:#496286; --m-muted:#597090;
  --m-note:#5a7291; --m-th:#526a8e; --m-kpi-note:#506a91; --m-small:#7185a3; --m-axis-ink:#607898;
  --m-accent:#17a8f5; --m-blue:#147af3; --m-blue-2:#0f68d6; --m-link:#0f73e6;
  --m-up:#00af61; --m-down:#ef3b3b; --m-on-blue:#fff;
  --m-shadow:0 2px 8px rgba(21,65,105,.035);
  --m-blue-bg:#eaf5ff; --m-blue-ink:#1687f8; --m-green-bg:#e9faf1; --m-green-ink:#06ad65;
  --m-purple-bg:#f2edff; --m-purple-ink:#692cff; --m-orange-bg:#fff4e7; --m-orange-ink:#ff9c13;
  --m-pink-bg:#fff0f6; --m-pink-ink:#ff4f87; --m-gray-bg:#eef3f8; --m-gray-ink:#526a8e;
  --m-st-bg:#e9f4ff; --m-st:#0d6ddf; --m-st-green-bg:#e7f8ef; --m-st-green:#099455;
  --m-st-yellow-bg:#fff6d9; --m-st-yellow:#a66b00; --m-st-purple-bg:#eee8ff; --m-st-purple:#6036ef;
  --m-st-gray-bg:#edf2f7; --m-st-gray:#49617e; --m-st-red-bg:#ffe8eb; --m-st-red:#d22a3b;
  --m-grid:#e8eef5; --m-axis:#dde7f0; --m-bar-a:#acd7ff; --m-bar-b:#76baff;
  --m-stroke:#1687f8; --m-area:rgba(22,135,248,.08); --m-track:#edf3f8; --m-fill:#2d8cf9;
  --m-k-idea:#f1f5f9; --m-k-scripted:#eaf4ff; --m-k-ready:#f2edff; --m-k-recorded:#fff7e8; --m-k-published:#ecfbf3;
  --m-kcard-line:#e6edf4; --m-kadd-line:#dfe8f0;
  --m-hero-bg:#eef7ff; --m-hero-line:#cae0f8; --m-cta-bg:#eff7ff; --m-cta-line:#cde0f8;
  --m-tag-bg:#eef3f8; --m-count-bg:#e8f1fb; --m-count-ink:#315b87; --m-page-ink:#46607f;
  --m-thumb-a:#111; --m-thumb-b:#555; --m-thumb-ink:#fff; --m-topic-line:#e1e8f0; --m-insight-line:#e4ebf3;
  --m-d1:#2389f5; --m-d2:#ff4f87; --m-d3:#12b96c; --m-d4:#ffa116; --m-d5:#6d28ff; --m-d6:#aebdcd;
  --m-ads-ink:#0575e6; --m-ads-a:#eef7ff; --m-ads-b:#e7f4ff;
  --m-seo-ink:#049950; --m-seo-a:#effdf6; --m-seo-b:#e7faef;
  --m-con-ink:#5423f5; --m-con-a:#f5f0ff; --m-con-b:#eee8ff;
  --m-scrim:rgba(7,27,61,.45);--m-ig-a:#8a2be2; --m-ig-b:#ff2b86; --m-ig-c:#ff9d19; --m-google:#4285f4;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --m-card:#0E2033; --m-line:#1D3348; --m-line-2:#1A2F44; --m-line-3:#1D3348; --m-line-4:#1D3348;
  --m-field-line:#24405A; --m-tabs-line:#1D3348;
  --m-ink:#E6EEF6; --m-ink-2:#BACAD9; --m-ink-3:#A7BDD2; --m-sub:#A7BDD2; --m-muted:#93A8BC;
  --m-note:#93A8BC; --m-th:#93A8BC; --m-kpi-note:#93A8BC; --m-small:#7C93A8; --m-axis-ink:#7C93A8;
  --m-accent:#38BDF8; --m-blue:#2F7FF0; --m-blue-2:#4A92F5; --m-link:#60A5FA;
  --m-up:#34D399; --m-down:#F87171; --m-on-blue:#fff;
  --m-shadow:0 2px 8px rgba(0,0,0,.35);
  --m-blue-bg:#0B2337; --m-blue-ink:#7FB8FF; --m-green-bg:#0B2C21; --m-green-ink:#34D399;
  --m-purple-bg:#1E1B34; --m-purple-ink:#C4B5FD; --m-orange-bg:#2C2411; --m-orange-ink:#FBBF24;
  --m-pink-bg:#2E1518; --m-pink-ink:#F9A8D4; --m-gray-bg:#16293D; --m-gray-ink:#93A8BC;
  --m-st-bg:#0B2337; --m-st:#93C5FD; --m-st-green-bg:#0B2C21; --m-st-green:#6EE7B7;
  --m-st-yellow-bg:#2C2411; --m-st-yellow:#FCD34D; --m-st-purple-bg:#1E1B34; --m-st-purple:#C4B5FD;
  --m-st-gray-bg:#16293D; --m-st-gray:#BACAD9; --m-st-red-bg:#2E1518; --m-st-red:#FCA5A5;
  --m-grid:#1A2F44; --m-axis:#24405A; --m-bar-a:#5A9DF0; --m-bar-b:#2F7FF0;
  --m-stroke:#60A5FA; --m-area:rgba(96,165,250,.14); --m-track:#16293D; --m-fill:#4A92F5;
  --m-k-idea:#0B1B2B; --m-k-scripted:#0A2234; --m-k-ready:#1B1833; --m-k-recorded:#241E10; --m-k-published:#0A2620;
  --m-kcard-line:#1D3348; --m-kadd-line:#24405A;
  --m-hero-bg:#0B2337; --m-hero-line:#1B4065; --m-cta-bg:#0B2337; --m-cta-line:#1B4065;
  --m-tag-bg:#16293D; --m-count-bg:#16293D; --m-count-ink:#93C5FD; --m-page-ink:#BACAD9;
  --m-thumb-a:#1D3348; --m-thumb-b:#2F4A66; --m-thumb-ink:#E6EEF6; --m-topic-line:#1D3348; --m-insight-line:#1D3348;
  --m-d1:#4A92F5; --m-d2:#F472B6; --m-d3:#34D399; --m-d4:#FBBF24; --m-d5:#A78BFA; --m-d6:#7C93A8;
  --m-ads-ink:#93C5FD; --m-ads-a:#0B2337; --m-ads-b:#0B2337;
  --m-seo-ink:#6EE7B7; --m-seo-a:#0B2C21; --m-seo-b:#0B2C21;
  --m-con-ink:#C4B5FD; --m-con-a:#1E1B34; --m-con-b:#1E1B34;
  --m-scrim:rgba(2,8,15,.62);} }
:root[data-theme="dark"]{
  --m-card:#0E2033; --m-line:#1D3348; --m-line-2:#1A2F44; --m-line-3:#1D3348; --m-line-4:#1D3348;
  --m-field-line:#24405A; --m-tabs-line:#1D3348;
  --m-ink:#E6EEF6; --m-ink-2:#BACAD9; --m-ink-3:#A7BDD2; --m-sub:#A7BDD2; --m-muted:#93A8BC;
  --m-note:#93A8BC; --m-th:#93A8BC; --m-kpi-note:#93A8BC; --m-small:#7C93A8; --m-axis-ink:#7C93A8;
  --m-accent:#38BDF8; --m-blue:#2F7FF0; --m-blue-2:#4A92F5; --m-link:#60A5FA;
  --m-up:#34D399; --m-down:#F87171; --m-on-blue:#fff;
  --m-shadow:0 2px 8px rgba(0,0,0,.35);
  --m-blue-bg:#0B2337; --m-blue-ink:#7FB8FF; --m-green-bg:#0B2C21; --m-green-ink:#34D399;
  --m-purple-bg:#1E1B34; --m-purple-ink:#C4B5FD; --m-orange-bg:#2C2411; --m-orange-ink:#FBBF24;
  --m-pink-bg:#2E1518; --m-pink-ink:#F9A8D4; --m-gray-bg:#16293D; --m-gray-ink:#93A8BC;
  --m-st-bg:#0B2337; --m-st:#93C5FD; --m-st-green-bg:#0B2C21; --m-st-green:#6EE7B7;
  --m-st-yellow-bg:#2C2411; --m-st-yellow:#FCD34D; --m-st-purple-bg:#1E1B34; --m-st-purple:#C4B5FD;
  --m-st-gray-bg:#16293D; --m-st-gray:#BACAD9; --m-st-red-bg:#2E1518; --m-st-red:#FCA5A5;
  --m-grid:#1A2F44; --m-axis:#24405A; --m-bar-a:#5A9DF0; --m-bar-b:#2F7FF0;
  --m-stroke:#60A5FA; --m-area:rgba(96,165,250,.14); --m-track:#16293D; --m-fill:#4A92F5;
  --m-k-idea:#0B1B2B; --m-k-scripted:#0A2234; --m-k-ready:#1B1833; --m-k-recorded:#241E10; --m-k-published:#0A2620;
  --m-kcard-line:#1D3348; --m-kadd-line:#24405A;
  --m-hero-bg:#0B2337; --m-hero-line:#1B4065; --m-cta-bg:#0B2337; --m-cta-line:#1B4065;
  --m-tag-bg:#16293D; --m-count-bg:#16293D; --m-count-ink:#93C5FD; --m-page-ink:#BACAD9;
  --m-thumb-a:#1D3348; --m-thumb-b:#2F4A66; --m-thumb-ink:#E6EEF6; --m-topic-line:#1D3348; --m-insight-line:#1D3348;
  --m-d1:#4A92F5; --m-d2:#F472B6; --m-d3:#34D399; --m-d4:#FBBF24; --m-d5:#A78BFA; --m-d6:#7C93A8;
  --m-ads-ink:#93C5FD; --m-ads-a:#0B2337; --m-ads-b:#0B2337;
  --m-seo-ink:#6EE7B7; --m-seo-a:#0B2C21; --m-seo-b:#0B2C21;
  --m-con-ink:#C4B5FD; --m-con-a:#1E1B34; --m-con-b:#1E1B34;
  --m-scrim:rgba(2,8,15,.62);}

.mk{color:var(--m-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.mk a{color:inherit}
.m-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.m-top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mk h1.m-h1{font-size:31px;line-height:1;letter-spacing:-.8px;margin:0 0 7px;font-weight:700}
.m-subtitle{color:var(--m-sub);font-size:15px}
.m-date,.m-ghost,.m-primary{border:1px solid var(--m-field-line);background:var(--m-card);border-radius:7px;
  height:46px;padding:0 18px;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--m-ink);
  font-family:inherit;font-weight:400;width:auto;cursor:pointer;text-decoration:none;white-space:nowrap}
.m-primary{background:var(--m-blue);color:var(--m-on-blue);border-color:var(--m-blue)}
.m-primary:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.m-ghost:hover{background:var(--m-line-2)}
.m-datewrap{position:relative}
.m-datewrap summary{list-style:none}
.m-datewrap summary::-webkit-details-marker{display:none}
.m-datemenu{position:absolute;right:0;top:52px;z-index:30;background:var(--m-card);border:1px solid var(--m-line);
  border-radius:8px;box-shadow:var(--m-shadow);min-width:220px;padding:6px}
.m-datemenu a{display:block;padding:9px 12px;border-radius:6px;font-size:14px}
.m-datemenu a:hover{background:var(--m-line-2)}
.m-datemenu a.on{font-weight:700;color:var(--m-blue)}

.m-tabs,.m-subtabs{display:flex;gap:24px;align-items:flex-end;border-bottom:1px solid var(--m-tabs-line);
  overflow-x:auto;scrollbar-width:none}
.m-tabs::-webkit-scrollbar,.m-subtabs::-webkit-scrollbar{display:none}
.m-tabs{height:51px}.m-subtabs{height:43px;margin-bottom:16px}
.m-tabs.solo{margin-bottom:20px}
.m-tab,.m-subtab{height:40px;padding:0 15px;color:var(--m-ink-3);font-size:15px;display:flex;align-items:center;
  white-space:nowrap;border-bottom:2px solid transparent}
.m-subtab{font-size:14px;height:37px}
.m-tab.active,.m-subtab.active{color:var(--m-ink);font-weight:700;border-bottom-color:var(--m-accent)}
/* Content's second row (Create: Ideas, Scripts, Carousels): the same flat underline, one size down. */
.m-subtabs2{height:36px;gap:4px;margin:-8px 0 16px}
.m-subtabs2 .m-subtab{font-size:13px;height:33px;padding:0 10px}
/* Phone: Content's four tabs fit 390px, and a bar's hidden tooltip near the right edge no longer widens the page. */
@media (max-width:760px){.m-subtabs{gap:2px}.m-subtabs .m-subtab{padding:0 11px}.mk .m-card{overflow-x:clip}}

.m-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:8px;box-shadow:var(--m-shadow)}
.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.m-kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Five across leaves about 190px a card on a laptop: the side icon and a 28px number with its "new" badge ran past the
   card edge (Joel 2026-10-02, Ads and Media Buyer). Five cards stack the icon over the text, the number keeps one line
   and the change badge drops under it when there is no room, so every card reads like the four-card rows. */
.m-kpis.five .m-kpi{flex-direction:column;gap:12px;padding:16px 18px}
.m-kpis.five .m-icon{width:40px;height:40px;flex:0 0 40px;border-radius:10px}
.m-kpis.five .m-icon svg{width:20px;height:20px}
.m-kpis.five .m-kpi-label{margin:0 0 6px}
.m-kpis.five .m-kpi-number{font-size:26px;white-space:normal}
.m-kpis.five .m-change{white-space:nowrap;display:inline-block}
/* Ads > KPIs is drawn by the shared media buyer package (.mbk). Its tiles take the Marketing card look, and a budget row
   of five fits on one line instead of leaving one tile alone on a second. */
.mb-host .m-datewrap{display:none}
.mb-host .mbk .row .tile{flex:1 1 150px;min-width:0;background:var(--m-card);border:1px solid var(--m-line);border-radius:8px;box-shadow:var(--m-shadow)}
.mb-host .mbk details,.mb-host .mbk .empty{border-radius:8px}
.mb-host .mbk details{background:var(--m-card);border-color:var(--m-line)}
.m-kpi{min-height:112px;padding:18px;display:flex;gap:15px;align-items:flex-start;min-width:0}
.m-icon{width:54px;height:54px;flex:0 0 54px;border-radius:12px;display:grid;place-items:center;font-size:24px}
.m-icon svg{width:24px;height:24px}
.blue-bg{background:var(--m-blue-bg);color:var(--m-blue-ink)}.green-bg{background:var(--m-green-bg);color:var(--m-green-ink)}
.purple-bg{background:var(--m-purple-bg);color:var(--m-purple-ink)}.orange-bg{background:var(--m-orange-bg);color:var(--m-orange-ink)}
.pink-bg{background:var(--m-pink-bg);color:var(--m-pink-ink)}.gray-bg{background:var(--m-gray-bg);color:var(--m-gray-ink)}
.m-kpi-label{color:var(--m-ink-2);font-size:14px;margin:2px 0 8px}
.m-kpi-number{font-size:28px;font-weight:750;letter-spacing:-.5px;white-space:nowrap;line-height:1.15}
.m-kpi-number.na{font-size:20px;font-weight:600;color:var(--m-muted);letter-spacing:0}
.m-change{color:var(--m-up);font-size:14px;font-weight:650;margin-left:7px}
.m-change.downbad{color:var(--m-down)}.m-change.flat{color:var(--m-muted)}
.m-kpi-note{color:var(--m-kpi-note);font-size:13px;margin-top:7px}
.m-kpi-note a{color:var(--m-link);font-weight:600}

.m-grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:14px}
.m-grid2.equal{grid-template-columns:1fr 1fr}
.m-grid-main-side{display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:14px;margin-bottom:14px}
.m-analytics-top{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-bottom:14px}
.m-chart-row{display:grid;grid-template-columns:.92fr 1.18fr;gap:14px;margin-bottom:18px}
.m-grid2>*,.m-grid-main-side>*,.m-analytics-top>*,.m-chart-row>*{min-width:0}
.m-section{padding:16px}
.m-section-title{font-size:18px;font-weight:750;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-section-subtitle{color:var(--m-muted);font-size:13px;margin-bottom:12px}
.m-chart-header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.m-select{border:1px solid var(--m-field-line);padding:0 12px;height:36px;min-width:137px;border-radius:6px;
  background:var(--m-card);color:var(--m-ink);font-size:13px;margin:0;width:auto;font-family:inherit}
.m-platform{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.m-plat{width:27px;height:27px;flex:0 0 27px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;
  color:var(--m-on-blue);background:linear-gradient(135deg,var(--m-ig-a),var(--m-ig-b),var(--m-ig-c))}
.m-plat.g{background:var(--m-card);color:var(--m-google);border:1px solid var(--m-line);border-radius:50%;font-size:17px}
.m-tablewrap{overflow-x:auto}
.m-table{width:100%;border-collapse:collapse;font-size:13px}
.m-table th{color:var(--m-th);font-size:11px;text-transform:uppercase;letter-spacing:.4px;text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--m-line-4);border-top:0;font-weight:600;white-space:nowrap;background:transparent}
.m-table td{padding:11px 12px;border-bottom:1px solid var(--m-line-2);border-top:0;vertical-align:middle}
.m-table tr:last-child td{border-bottom:none}
.m-table tr:hover td{background:transparent}
.m-table tr.m-total td{font-weight:700}
.m-table tr.m-rowlink{cursor:pointer}
.m-table tr.m-rowlink:hover td{background:var(--m-line-2)}
.m-table a.m-t{font-weight:700}
.m-table a.m-t:hover{color:var(--m-link)}
.m-table td .m-note{margin-top:2px}

.m-status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:6px;font-size:12px;
  background:var(--m-st-bg);color:var(--m-st);white-space:nowrap}
.m-status.green{background:var(--m-st-green-bg);color:var(--m-st-green)}
.m-status.yellow{background:var(--m-st-yellow-bg);color:var(--m-st-yellow)}
.m-status.purple{background:var(--m-st-purple-bg);color:var(--m-st-purple)}
.m-status.gray{background:var(--m-st-gray-bg);color:var(--m-st-gray)}
.m-status.red{background:var(--m-st-red-bg);color:var(--m-st-red)}

.m-filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.m-filters input,.m-filters select{height:40px;border:1px solid var(--m-field-line);background:var(--m-card);
  border-radius:6px;padding:0 13px;color:var(--m-ink);font-size:13px;margin:0;font-family:inherit}
.m-filters input{flex:1 1 220px;width:auto;min-width:0}
.m-filters select{min-width:150px}
.m-filters .m-ghost{height:40px}

.m-chart{height:235px;position:relative;padding:12px 14px 28px}
.m-chart-grid{position:absolute;left:42px;right:14px;top:36px;bottom:34px;
  background:repeating-linear-gradient(to bottom,var(--m-grid) 0,var(--m-grid) 1px,transparent 1px,transparent 41.25px);
  border-bottom:1px solid var(--m-axis)}
.m-chart-grid.line{top:20px;bottom:35px;right:15px;
  background:repeating-linear-gradient(to bottom,var(--m-grid) 0,var(--m-grid) 1px,transparent 1px,transparent 45px)}
.m-yaxis{position:absolute;left:0;width:36px;top:29px;bottom:27px;display:flex;flex-direction:column;
  justify-content:space-between;color:var(--m-axis-ink);font-size:11px;text-align:right;line-height:14px}
.m-yaxis.line{top:13px;bottom:28px}
.m-xlabels.line{left:42px;right:15px}
.m-barset{position:absolute;left:55px;right:20px;bottom:34px;height:165px;display:flex;align-items:flex-end;
  gap:8px;justify-content:space-between}
.m-barset.dense{gap:2px}
.m-bar{width:18px;flex:0 1 18px;min-width:3px;background:linear-gradient(var(--m-bar-a),var(--m-bar-b));border-radius:3px 3px 0 0}
/* bar hover (2026-10-02): the hovered bar lights up, the rest dim, a tooltip sits above it */
.m-bar{position:relative;transition:opacity .15s,filter .15s;outline:none}
.m-barset.cats{justify-content:stretch;gap:0;left:42px;right:14px}
.m-col{flex:1 1 0;height:100%;display:flex;justify-content:center;align-items:flex-end;outline:none;cursor:default}
.m-col .m-bar{width:min(48px,46%);flex:none}
.m-barset:hover .m-bar,.m-barset:focus-within .m-bar{opacity:.4}
.m-barset .m-bar:hover,.m-barset .m-bar:focus,.m-col:hover .m-bar,.m-col:focus .m-bar{opacity:1;filter:brightness(1.15) saturate(1.1)}
.m-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);z-index:20;pointer-events:none;opacity:0;
  transition:opacity .15s,transform .15s;display:grid;gap:2px;min-width:120px;max-width:260px;width:max-content;padding:8px 11px;border-radius:7px;
  background:#0F172A;color:#E2E8F0;font-size:12px;line-height:1.4;text-align:left;box-shadow:0 8px 24px rgba(15,23,42,.35)}
.m-tip b{color:#fff;font-size:12.5px}
.m-tip-x{color:#94A3B8}
.m-tip::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#0F172A}
.m-bar:hover .m-tip,.m-bar:focus .m-tip,.m-col:hover .m-tip,.m-col:focus .m-tip{opacity:1;transform:translate(-50%,0)}
.m-xlabels{position:absolute;left:55px;right:20px;bottom:10px;display:flex;justify-content:space-between;
  color:var(--m-axis-ink);font-size:11px}
.m-xlabels.cats span{flex:1 1 0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-bar.m-stack{background:none;display:flex;flex-direction:column-reverse;overflow:visible}
.m-seg{display:block;width:100%;min-height:2px;flex-basis:0}
.m-seg:last-of-type{border-radius:3px 3px 0 0}
.m-tip-row{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;color:#CBD5E1}
.m-tip-row .m-dot{width:8px;height:8px}
.m-tip-row b{color:#fff;font-size:12px}
.m-stack-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:2px 14px 0;font-size:12px;color:var(--m-axis-ink)}
.m-stack-legend span{display:inline-flex;align-items:center;gap:6px}
.m-stack-legend .m-dot{width:9px;height:9px}
.m-lhits{position:absolute;left:42px;right:15px;top:20px;bottom:35px}
.m-lhit{position:absolute;top:0;bottom:0;outline:none;cursor:crosshair}
.m-lguide{position:absolute;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--m-stroke);opacity:0;transition:opacity .12s}
.m-ldot{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--m-stroke);box-shadow:0 0 0 3px var(--m-card,#fff);opacity:0;transition:opacity .12s}
.m-lhit:hover .m-lguide,.m-lhit:focus .m-lguide{opacity:.35}
.m-lhit:hover .m-ldot,.m-lhit:focus .m-ldot{opacity:1}
.m-lhit:hover .m-tip,.m-lhit:focus .m-tip{opacity:1;transform:translate(-50%,0)}
.m-line-svg{position:absolute;left:42px;right:15px;top:20px;bottom:35px;width:calc(100% - 57px);height:calc(100% - 55px);overflow:visible}
.m-chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--m-muted);font-size:13px;text-align:center;padding:0 24px}

.m-donut-box{display:flex;gap:40px;align-items:center;justify-content:center;min-height:240px;flex-wrap:wrap;padding:8px 0}
.m-donut-wrap{position:relative;width:180px;height:180px;flex:0 0 180px}
.m-donut{width:100%;height:100%;border-radius:50%;position:relative}
.m-donut:after{content:"";position:absolute;inset:20%;border-radius:50%;background:var(--m-card)}
.m-donut-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-dslice{fill:none;stroke-width:8.4;cursor:pointer;transition:opacity .15s,stroke-width .15s}
.m-dslice:hover{stroke-width:9.6}
.m-dtip{position:absolute;width:0;height:0;z-index:5;pointer-events:none}
.m-dtip.m-dtip{opacity:1}
.m-donut-center{pointer-events:none}
.m-legend-item{cursor:default;border-radius:6px;transition:opacity .15s;outline:none}
.m-legend-item:focus-visible{box-shadow:0 0 0 2px var(--m-stroke)}
.m-donut-box:has([data-i="0"]:hover) .m-dtip[data-i="0"] .m-tip,.m-donut-box:has(.m-legend-item[data-i="0"]:focus) .m-dtip[data-i="0"] .m-tip{opacity:1;transform:translate(-50%,0)}
.m-donut-box:has([data-i="0"]:hover) [data-i]:not([data-i="0"]),.m-donut-box:has(.m-legend-item[data-i="0"]:focus) [data-i]:not([data-i="0"]){opacity:.25}
.m-donut-box:has([data-i="1"]:hover) .m-dtip[data-i="1"] .m-tip,.m-donut-box:has(.m-legend-item[data-i="1"]:focus) .m-dtip[data-i="1"] .m-tip{opacity:1;transform:translate(-50%,0)}
.m-donut-box:has([data-i="1"]:hover) [data-i]:not([data-i="1"]),.m-donut-box:has(.m-legend-item[data-i="1"]:focus) [data-i]:not([data-i="1"]){opacity:.25}
.m-donut-box:has([data-i="2"]:hover) .m-dtip[data-i="2"] .m-tip,.m-donut-box:has(.m-legend-item[data-i="2"]:focus) .m-dtip[data-i="2"] .m-tip{opacity:1;transform:translate(-50%,0)}
.m-donut-box:has([data-i="2"]:hover) [data-i]:not([data-i="2"]),.m-donut-box:has(.m-legend-item[data-i="2"]:focus) [data-i]:not([data-i="2"]){opacity:.25}
.m-donut-box:has([data-i="3"]:hover) .m-dtip[data-i="3"] .m-tip,.m-donut-box:has(.m-legend-item[data-i="3"]:focus) .m-dtip[data-i="3"] .m-tip{opacity:1;transform:translate(-50%,0)}
.m-donut-box:has([data-i="3"]:hover) [data-i]:not([data-i="3"]),.m-donut-box:has(.m-legend-item[data-i="3"]:focus) [data-i]:not([data-i="3"]){opacity:.25}
.m-donut-box:has([data-i="4"]:hover) .m-dtip[data-i="4"] .m-tip,.m-donut-box:has(.m-legend-item[data-i="4"]:focus) .m-dtip[data-i="4"] .m-tip{opacity:1;transform:translate(-50%,0)}
.m-donut-box:has([data-i="4"]:hover) [data-i]:not([data-i="4"]),.m-donut-box:has(.m-legend-item[data-i="4"]:focus) [data-i]:not([data-i="4"]){opacity:.25}
.m-donut-box:has([data-i="5"]:hover) .m-dtip[data-i="5"] .m-tip,.m-donut-box:has(.m-legend-item[data-i="5"]:focus) .m-dtip[data-i="5"] .m-tip{opacity:1;transform:translate(-50%,0)}
.m-donut-box:has([data-i="5"]:hover) [data-i]:not([data-i="5"]),.m-donut-box:has(.m-legend-item[data-i="5"]:focus) [data-i]:not([data-i="5"]){opacity:.25}
.m-donut-center{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center}
.m-donut-center b{font-size:28px;line-height:1.1}
.m-donut-center span{font-size:14px}
.m-legend-list{display:grid;gap:12px;min-width:220px}
.m-legend-item{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;font-size:13px}
.m-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.m-dot.d1{background:var(--m-d1)}.m-dot.d2{background:var(--m-d2)}.m-dot.d3{background:var(--m-d3)}
.m-dot.d4{background:var(--m-d4)}.m-dot.d5{background:var(--m-d5)}.m-dot.d6{background:var(--m-d6)}

.m-side{padding:16px}
.m-side+.m-side{margin-top:12px}
.m-side-list{display:grid;gap:10px}
.m-side-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:8px}
.m-side-row>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-side-row a:hover{color:var(--m-link)}
.m-side-row.on{font-weight:700;color:var(--m-blue)}
.m-progress{height:8px;background:var(--m-track);border-radius:20px;overflow:hidden;flex:1;margin:0 10px;min-width:40px}
.m-progress i{display:block;height:100%;background:var(--m-fill);border-radius:20px}
.m-side.tint{background:var(--m-hero-bg)}
.m-side .m-ghost,.m-side .m-primary{margin-top:12px}

.m-kanban{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}
.m-kan-col{border-radius:8px;padding:10px;min-height:330px}
.m-kan-col h3{font-size:15px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.m-kan-col.idea{background:var(--m-k-idea)}.m-kan-col.scripted{background:var(--m-k-scripted)}
.m-kan-col.ready{background:var(--m-k-ready)}.m-kan-col.recorded{background:var(--m-k-recorded)}
.m-kan-col.published{background:var(--m-k-published)}
.m-kan-card{display:block;background:var(--m-card);border:1px solid var(--m-kcard-line);border-radius:7px;padding:12px;margin-bottom:8px;font-size:13px}
a.m-kan-card:hover{border-color:var(--m-accent)}
.m-kan-empty{color:var(--m-muted);font-size:12.5px;text-align:center;padding:18px 6px}
.m-tag{display:inline-block;margin-top:7px;padding:3px 7px;background:var(--m-tag-bg);border-radius:5px;color:var(--m-th);font-size:11px}
.m-table .m-tag{margin-top:0}
.m-kan-add{height:36px;border:1px solid var(--m-kadd-line);background:var(--m-card);border-radius:6px;display:flex;
  align-items:center;justify-content:center;color:var(--m-link);font-size:13px;width:100%;font-family:inherit;cursor:pointer;padding:0}
.m-kan-add:hover{border-color:var(--m-accent)}

.m-pager{display:flex;gap:6px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.m-page{width:34px;height:34px;border:1px solid var(--m-field-line);border-radius:6px;display:grid;place-items:center;
  background:var(--m-card);color:var(--m-page-ink);font-size:13px}
.m-page.active{background:var(--m-blue);color:var(--m-on-blue);border-color:var(--m-blue)}
a.m-page:hover:not(.active){border-color:var(--m-accent)}

.m-hero-rec{padding:16px;border:1px solid var(--m-hero-line);background:var(--m-hero-bg);border-radius:8px;margin-bottom:12px}
.m-rec-head{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.m-rec-title{font-size:18px;font-weight:750;margin:4px 0 7px}
.m-action-row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.m-small{height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--m-field-line);background:var(--m-card);
  color:var(--m-ink);font-size:12px;width:auto;font-family:inherit;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
.m-small:hover{background:var(--m-line-2)}
.m-small.blue{background:var(--m-blue);color:var(--m-on-blue);border-color:var(--m-blue)}
.m-small.blue:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.m-insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-insight{padding:14px;border:1px solid var(--m-insight-line);border-radius:7px}
.m-insight h4{font-size:14px;margin:0 0 8px}
.m-insight ul{padding-left:16px;color:var(--m-th);font-size:12px;line-height:1.55;margin:0}
.m-rec-item{padding:14px 0;border-bottom:1px solid var(--m-line-2)}
.m-rec-item b{font-size:13px}

.m-thumb{width:38px;height:38px;border-radius:6px;background:linear-gradient(135deg,var(--m-thumb-a),var(--m-thumb-b));
  display:inline-grid;place-items:center;color:var(--m-thumb-ink);font-size:11px;margin-right:8px;flex:0 0 38px;vertical-align:middle}
.m-listrow{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--m-line-2)}
.m-listrow>div{flex:1;min-width:0}
.m-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.m-topic-card{padding:14px;border:1px solid var(--m-topic-line);border-radius:7px;min-width:0}
.m-topic-card b{display:block;margin-top:8px;overflow:hidden;text-overflow:ellipsis}
.m-cta{padding:18px;border:1px solid var(--m-cta-line);background:var(--m-cta-bg);border-radius:8px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.m-note{color:var(--m-note);font-size:13px}
.m-badge-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:20px;
  background:var(--m-count-bg);color:var(--m-count-ink);font-size:12px;font-weight:600}
.m-na{color:var(--m-muted)}
.m-mini-avatar{width:28px;height:28px;border-radius:50%;background:var(--m-blue-bg);color:var(--m-blue-ink);
  display:inline-grid;place-items:center;font-size:10px;font-weight:700;margin-right:6px;vertical-align:middle}
.m-flash{padding:10px 14px;border:1px solid var(--m-hero-line);background:var(--m-hero-bg);border-radius:8px;
  margin:0 0 14px;font-size:13px}
.m-flash.bad{border-color:var(--m-st-red-bg);background:var(--m-st-red-bg);color:var(--m-st-red)}

.m-primary svg,.m-ghost svg,.m-small svg{width:16px;height:16px;flex:none}
.m-sidecol{display:flex;flex-direction:column;gap:14px;min-width:0}
.m-sidecol .m-ghost{white-space:normal;height:auto;min-height:40px;padding:9px 16px;text-align:center}

/* Marketing > Content: a vertical rail instead of a second tab row (audit P8) */
.m-railwrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
.m-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--m-card);border:1px solid var(--m-line);border-radius:8px;box-shadow:var(--m-shadow)}
.m-rail-item{display:block;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--m-ink-3);
  border-left:3px solid transparent}
.m-rail-item:hover{background:var(--m-line-2);color:var(--m-ink)}
.m-rail-item.active{background:var(--m-blue-bg);color:var(--m-ink);font-weight:700;border-left-color:var(--m-accent)}
.m-railmain{min-width:0}
@media(max-width:860px){
  .m-railwrap{grid-template-columns:1fr;gap:12px}
  .m-rail{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .m-rail-item{white-space:nowrap;border-left:0;border-bottom:3px solid transparent}
  .m-rail-item.active{border-bottom-color:var(--m-accent)}
}

/* Build Board list view */
.m-taglink{color:var(--m-link)}
.m-taglink:hover{text-decoration:underline}
.m-table .m-t{font-weight:700}
.m-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.m-chips .m-tag{margin-top:0}

/* Settings > General */
.m-appearance{margin-top:18px;border-top:1px solid var(--m-line);padding-top:16px}
.m-appearance b{font-size:14px;color:var(--m-ink)}
.mk .m-themeswitch{width:auto;padding:0;margin:0;background:transparent;border:0;cursor:pointer;display:inline-flex}
.mk .m-themeswitch:hover{background:transparent}
:root[data-theme="dark"] .m-themeswitch .m-switch{background:var(--m-blue)}
:root[data-theme="dark"] .m-themeswitch .m-switch:after{left:23px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .m-themeswitch .m-switch{background:var(--m-blue)}
  :root:not([data-theme="light"]) .m-themeswitch .m-switch:after{left:23px}
}
.m-quick{padding:4px 16px;background:var(--m-line-2);border-radius:5px;margin-top:16px}
.m-quick > div{padding:14px 0;border-bottom:1px solid var(--m-line)}
.m-quick > div:last-child{border-bottom:0}
.m-quick b{display:block;margin-top:4px;font-size:15px;margin-left:22px}
.m-quick b.good a{color:var(--m-st-green)}.m-quick b.warn a{color:var(--m-st-yellow)}

/* Settings > Automations */
.mk dialog:has(.m-table){max-width:min(920px,94vw)}
.mk dialog .m-table td{overflow-wrap:anywhere}
.m-run-count{text-align:right}
.m-run-count span{display:inline-flex;align-items:center;font-size:20px;font-weight:800}
.m-run-count.green span{color:var(--m-st-green)}.m-run-count.yellow span{color:var(--m-st-yellow)}
.m-activity > div{padding:12px 0;border-bottom:1px solid var(--m-line-2)}
.m-activity > div:last-child{border-bottom:0}
.m-activity span{display:inline-flex;align-items:center;font-size:13px}
.m-link-btn{background:transparent;border:0;width:auto;padding:0;color:var(--m-link);font-size:13px;font-weight:600;cursor:pointer}
.m-link-btn:hover{background:transparent;text-decoration:underline}

/* Settings > Clients */
.m-split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:18px;align-items:start}
@media(max-width:1100px){.m-split{grid-template-columns:1fr}}
.m-split > *,.m-sidecol > *{min-width:0}
.m-panel{padding:18px}
.m-panel-tabs{display:flex;gap:28px;border-bottom:1px solid var(--m-line);margin:18px 0}
.m-panel-tabs a{padding:0 0 12px;color:var(--m-ink-3);border-bottom:2px solid transparent}
.m-panel-tabs a.on{color:var(--m-blue);border-bottom-color:var(--m-blue);font-weight:700}
.m-hr{border:0;border-top:1px solid var(--m-line);margin:6px 0}
.m-help{font-size:12px;color:var(--m-muted);font-weight:400}
.m-field-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--m-th);font-weight:600;flex-wrap:wrap}
.m-agent{display:inline-flex;align-items:center;gap:6px;color:var(--m-ink);font-weight:400;font-size:13px}
.m-switch{width:46px;height:26px;border-radius:20px;background:var(--m-track);position:relative;display:inline-block;flex:none}
.m-switch:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:var(--m-card);left:3px;top:3px}
.m-switch.on{background:var(--m-blue)}.m-switch.on:after{left:23px}
.m-danger{margin-top:22px;padding:16px;border:1px solid var(--m-st-red-bg);background:var(--m-st-red-bg);border-radius:6px;color:var(--m-st-red)}
.m-danger form{margin-top:12px}
.m-danger-btn{color:var(--m-st-red);border-color:var(--m-st-red)}
.m-panel-foot{display:flex;justify-content:space-between;gap:12px;margin-top:26px;border-top:1px solid var(--m-line);padding-top:18px}
.m-panel-foot b{display:block;color:var(--m-ink);margin-top:3px}
.m-close{font-size:24px;line-height:1;color:var(--m-th);padding:0 4px}
.m-close:hover{color:var(--m-ink)}
.m-table tr.m-rowlink.on td{background:var(--m-blue-bg)}
.m-service:hover{color:var(--m-link)}

/* Settings > Integrations */
.m-grid-main-side.m-intgrid{grid-template-columns:minmax(0,2.15fr) minmax(300px,.95fr)}
@media(max-width:1350px){.m-grid-main-side.m-intgrid{grid-template-columns:1fr}
  .m-intgrid .m-sidecol{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}}
.m-int td:nth-child(2){min-width:220px}
.m-tab svg{width:16px;height:16px;margin-right:9px;flex:none}
.m-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 20px 14px;flex-wrap:wrap}
.m-int th{background:var(--m-line-2)}
.m-service{display:flex;align-items:center;gap:12px;font-weight:700;white-space:nowrap}
.m-logo{width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:var(--m-blue-bg);color:var(--m-ink);
  display:grid;place-items:center;font-weight:800;font-size:12px}
.m-sdot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;margin-right:8px;flex:none}
.m-sdot.green{background:var(--m-st-green)}.m-sdot.red{background:var(--m-st-red)}
.m-sdot.yellow{background:var(--m-st-yellow)}.m-sdot.gray{background:var(--m-st-gray)}
.m-more{text-align:center;width:36px}
.m-kebab{background:transparent;border:0;width:auto;padding:4px 8px;color:var(--m-th);font-size:18px;font-weight:900;cursor:pointer}
.m-kebab:hover{background:var(--m-line-2);color:var(--m-ink)}
.m-health{background:var(--m-st-green-bg);padding:17px;border-radius:4px;margin-top:14px}
.m-health strong{color:var(--m-st-green);font-size:16px}
.m-health.bad{background:var(--m-st-yellow-bg)}.m-health.bad strong{color:var(--m-st-yellow)}
.m-critical{border-top:1px solid var(--m-line);margin-top:18px;padding-top:6px}
.m-critical h3{font-size:15px;margin:10px 0 4px}
.m-crit-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:13px}
.m-crit.green{color:var(--m-st-green)}.m-crit.red{color:var(--m-st-red)}.m-crit.yellow{color:var(--m-st-yellow)}.m-crit.gray{color:var(--m-st-gray)}
.m-side .m-section-title+.m-note,.m-side p.m-note{margin:6px 0 0}
.m-side{margin-bottom:0}

/* Overview pillars */
.m-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.m-pillar{min-height:375px;padding:20px;display:flex;flex-direction:column}
.m-pillar-head{display:flex;gap:17px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--m-line-3)}
.m-pillar h2{font-size:21px;margin:0 0 3px;text-transform:none;letter-spacing:0;color:var(--m-ink);font-weight:700;display:block}
.m-metric-list{flex:1;margin-top:3px}
.m-metric{min-height:45px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--m-line-3);
  color:var(--m-th);font-size:14px;gap:12px}
.m-metric-value{color:var(--m-ink);text-align:right;font-weight:500}
.m-metric.feature{min-height:70px}
.m-small-muted{display:block;color:var(--m-small);font-size:13px;margin-top:2px;font-weight:400}
.m-pillar-btn{border:0;border-radius:6px;min-height:46px;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:14px}
.m-pillar-btn.ads{color:var(--m-ads-ink);background:linear-gradient(90deg,var(--m-ads-a),var(--m-ads-b))}
.m-pillar-btn.seo{color:var(--m-seo-ink);background:linear-gradient(90deg,var(--m-seo-a),var(--m-seo-b))}
.m-pillar-btn.content{color:var(--m-con-ink);background:linear-gradient(90deg,var(--m-con-a),var(--m-con-b))}

/* Dialogs keep the app's native <dialog>; only the body is restyled. */
.mk .m-form{display:grid;gap:10px}
.mk .m-form label{display:grid;gap:4px;font-size:12px;color:var(--m-th);font-weight:600}
.mk .m-form input,.mk .m-form select,.mk .m-form textarea{margin:0;width:100%;font-size:14px;
  padding:9px 10px;border:1px solid var(--m-field-line);border-radius:6px;background:var(--m-card);color:var(--m-ink);
  font-family:inherit;min-height:0}
.mk .m-form textarea{min-height:90px}
.mk .m-form .m-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk dialog .m-prose{white-space:pre-wrap;font-size:14px;line-height:1.55}

@media(max-width:1200px){
  .m-kpis.five{grid-template-columns:repeat(3,1fr)}
  .m-kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-grid-main-side{grid-template-columns:1fr}
  .m-pillars{grid-template-columns:1fr}
}
@media(max-width:900px){
  .m-kpis,.m-kpis.five{grid-template-columns:repeat(2,1fr)}
  .m-grid2,.m-grid2.equal,.m-analytics-top,.m-chart-row{grid-template-columns:1fr}
  .m-insight-grid,.m-topic-grid{grid-template-columns:1fr 1fr}
  .m-table{min-width:560px}
}
@media(max-width:560px){
  .m-kpis,.m-kpis.five{grid-template-columns:1fr}
  .m-kanban{grid-template-columns:1fr}
  .m-insight-grid,.m-topic-grid{grid-template-columns:1fr}
  .mk h1.m-h1{font-size:26px}
  .m-xlabels:not(.cats) span:nth-child(even){display:none}
  .m-barset,.m-xlabels{left:44px;right:8px}
  .m-top-actions{width:100%}
  .m-datemenu{left:0;right:auto}
  .mk .m-form .m-row2{grid-template-columns:1fr}
}

/* Phone pass (2026-09-15). Last in the sheet on purpose: several page rules
   above (.filters, .mk .m-form, inline grid styles) are more specific than a
   plain phone rule, so the few that must win say !important. Desktop untouched. */
@media(max-width:860px){
  /* The closed drawer's shadow bled a dark strip down the left edge. */
  .navtoggle:not(:checked) ~ aside{box-shadow:none}
  /* Under 16px iOS Safari zooms the page when a field gets focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px !important}
  input[type=checkbox]{min-width:20px;min-height:20px}
  /* Filter bars: search on its own row, selects two per row, full width. */
  .filters{gap:10px}
  .filters input[type=search],.filters input[type=text]{flex:1 1 100% !important;order:-1}
  .filters select{flex:1 1 calc(50% - 5px);min-width:0 !important}
  .filters .showing{order:9;flex:1 1 100%}
  .filters .fclear{min-height:40px;display:inline-flex;align-items:center}
  /* Tap targets. */
  .btn,.v2-chip,button.btn-danger2,.resolve,.m-link-btn,form button:not([class]),select{min-height:40px}
  .btn-sm{min-height:38px;padding:.45rem .8rem;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
  .m-kebab{min-width:40px;min-height:40px}
  .mk .m-themeswitch{min-height:40px;align-items:center}
  .pager a,.pager button{min-height:40px;display:inline-flex;align-items:center}
  summary{padding-top:10px;padding-bottom:10px}
  /* Settings > General carries an inline two-column grid that ignored the phone. */
  .m-grid-main-side.m-intgrid{grid-template-columns:minmax(0,1fr) !important}
}
@media(max-width:520px){
  /* Stat tiles two across instead of one tall column: icon and label on top,
     the number underneath at full tile width; a lone last tile spans the row.
     The Dashboard's .stats4 already sets its own two-across layout. */
  .stats:not(.stats4){grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stats:not(.stats4) > .stat:last-child:nth-child(odd){grid-column:1 / -1}
  .stats:not(.stats4) .stat{grid-template-columns:30px minmax(0,1fr);column-gap:9px;row-gap:4px;padding:12px 13px;align-items:center}
  .stats:not(.stats4) .stat .ico{grid-row:1;width:30px;max-width:30px;height:30px;border-radius:8px}
  .stats:not(.stats4) .stat .ico > svg{width:16px;height:16px}
  .stats:not(.stats4) .stat .k{grid-column:2;grid-row:1}
  .stats:not(.stats4) .stat .v{grid-column:1 / -1;grid-row:2;font-size:23px}
  .stats:not(.stats4) .stat .s{grid-column:1 / -1;grid-row:3}
}
/* Portal Access (rebuilt from the Client Center table, 2026-09-17): a card
   launcher so a client is recognized by name and logged in with one click,
   instead of read off a row. */
.pa-hero{display:flex;gap:1.4rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:1.4rem 1.6rem;margin-bottom:1.5rem;flex-wrap:wrap}
.pa-hero-main{display:flex;gap:1rem;flex:1 1 380px;min-width:0}
.pa-hero-ico{width:56px;height:56px;border-radius:12px;background:var(--info-bg);
  color:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 56px}
.pa-hero-ico svg{width:26px;height:26px}
.pa-hero-main h2{margin:0 0 .2rem;font-size:1.6rem;font-weight:800;letter-spacing:-.01em}
.pa-hero-main .pa-sub{margin:0 0 .55rem;font-size:15px;color:var(--slate)}
.pa-hero-main .pa-how{margin:0;font-size:13.5px;color:var(--ink-2)}
.pa-tip{flex:0 0 260px;display:flex;gap:.7rem;align-items:flex-start;background:var(--info-bg);
  border:1px solid var(--info-line);border-radius:12px;padding:1rem 1.1rem}
.pa-tip .ico{width:36px;height:36px;border-radius:10px;background:var(--card);
  color:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.pa-tip .ico svg{width:18px;height:18px}
.pa-tip b{display:block;font-size:13.5px;margin-bottom:.15rem}
.pa-tip p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.panel > .ph .pasearch{margin-left:auto;min-width:220px}
.paGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1rem;padding:0 1.25rem 1.25rem}
.paCard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:1.25rem;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
a.paCard:hover{border-color:var(--cyan);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.pa-logo{margin-bottom:.9rem}
.pa-logo.muted{background:var(--chip-bg);color:var(--ink-2)}
.paCard h3{margin:0 0 .3rem;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.pa-url{font-size:12.5px;color:var(--slate);margin:0 0 1rem;word-break:break-word}
.pa-open{margin-top:auto;width:100%;justify-content:center;text-align:center}
button.pa-open{font:inherit}
button.pa-open:disabled{background:var(--chip-bg);color:var(--muted);cursor:default}
a.pa-loginbtn{color:var(--blue)}
.pa-note{font-size:12px;color:var(--slate);margin:.55rem 0 0;text-align:center}
@media(max-width:760px){
  .pa-hero{flex-direction:column}
  .pa-tip{flex:1 1 auto}
  .panel > .ph .pasearch{margin-left:0;min-width:0;width:100%}
}
/* ── Nav standard (2026-09-24): Command Center header link, department tab bar, account block ── */
.navgroup a.gl.gll{display:block;text-decoration:none;color:var(--nav-dim-3)}
.navgroup a.gl.gll:hover,.navgroup a.gl.gll.on{color:var(--nav-ink)}
.tabs.dept{margin-top:0}
/* Sub-tabs are the same flat text tabs with an underline as every other tab bar (Joel 2026-09-30: no pills, no buttons). */
.tabs.subtabs{margin-top:0}
.tabs.dept .tcount{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  background:var(--danger);color:var(--on-solid);border-radius:9px;padding:0 6px;margin-left:6px;line-height:17px}
/* Sidebar sub-items (Joel 9/24): the open department's tabs, indented under it, A to Z. */
aside .subnav{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px;padding-left:18px;position:relative}
aside .subnav::before{content:"";position:absolute;left:19px;top:2px;bottom:2px;width:1px;background:var(--nav-line)}
aside .subnav a.sub{display:flex;align-items:center;gap:.4rem;min-height:32px;margin:0;padding:5px 10px 5px 16px;border-radius:6px;
  color:var(--nav-dim);font-size:13px;font-weight:500;text-decoration:none;position:relative}
aside .subnav a.sub:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line);color:var(--nav-ink)}
aside .subnav a.sub.on{color:var(--nav-ink);font-weight:650;background:var(--nav-hover)}
aside .subnav a.sub.on::before{content:"";position:absolute;left:-2px;top:50%;width:5px;height:5px;margin-top:-2.5px;
  border-radius:50%;background:var(--cyan)}
aside .subnav a.sub .badge{margin-left:auto;font:700 10.5px Inter,sans-serif;min-width:19px;height:19px;line-height:19px;padding:0 5px;
  border-radius:20px;text-align:center;background:var(--danger);color:var(--on-solid)}
aside .subnav a.sub .badge.calm{background:var(--nav-chip);color:var(--nav-chip-ink)}
@media(max-width:860px){aside .subnav a.sub{min-height:40px;font-size:14px}}
/* Marketing > Content on a phone (Joel 2026-10-08, server.js phoneUpload): the upload card shows at phone width only;
   the section list wraps onto lines of flat text with an underline instead of a sideways scroll; the board stacks into
   one column with three cards each; All content shows eight rows until "Show all". Desktop keeps every rule it had. */
.ct-phone,.ct-more{display:none}
.ct-in{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:860px){
  .ct-phone{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 16px;
    box-shadow:var(--shadow-card)}
  .ct-phone h2{margin:0 0 4px;font-size:18px;text-transform:none;letter-spacing:0;color:var(--ink)}
  .ct-phone > p{margin:0 0 12px;font-size:14px;line-height:1.4}
  .ct-acts{display:grid;gap:10px}
  .ct-act{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 14px;border-radius:12px;
    border:1px solid var(--line);background:var(--card-2);color:var(--ink);text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .ct-act:active{transform:scale(.99)}
  .ct-act svg{width:24px;height:24px;flex:none}
  .ct-act span{display:flex;flex-direction:column;min-width:0}
  .ct-act b{font-size:16px}
  .ct-act small{font-size:13px;color:var(--muted)}
  .ct-act.primary{background:var(--blue);border-color:var(--blue);color:var(--on-solid)}
  .ct-act.primary small{color:inherit;opacity:.85}
  .ct-up{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
  .ct-up:empty{display:none}
  .ct-up li{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card-2);font-size:14px;overflow-wrap:anywhere}
  .ct-up .ct-name{font-weight:600}
  .ct-bar{height:8px;border-radius:4px;background:var(--line);margin:8px 0 6px;overflow:hidden}
  .ct-bar i{display:block;height:100%;width:0;background:var(--cyan);transition:width .2s}
  .ct-up li.ok .ct-bar i{background:var(--ok)}
  .ct-up li.bad .ct-st{color:var(--danger-text)}
  .ct-st a{font-weight:700}
  .ct-raw{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:12px 4px 2px;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .ct-raw input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--blue)}
  .ct-raw span{display:flex;flex-direction:column}
  .ct-raw b{font-size:15px;color:var(--ink)}
  .ct-raw small{font-size:13px;color:var(--muted)}
  .m-railwrap .m-rail{flex-wrap:wrap;overflow:visible;gap:2px 4px;padding:4px 6px}
  .m-railwrap .m-rail-item{padding:10px 8px 8px;border-radius:0;font-size:15px}
  .m-railwrap .m-rail-item.active{background:transparent}
  .kboard.ct-board{flex-direction:column;overflow:visible;scroll-snap-type:none}
  .kboard.ct-board .kcol{flex:none;width:100%;max-width:none}
  .kboard.ct-board .kcol .kitem:nth-of-type(n+4){display:none}
  table.ct-all:not(.open) tbody tr:nth-child(n+9){display:none}
  .ct-more{display:flex;width:100%;justify-content:center;min-height:48px;margin-top:10px}
}
/* Phone drawer (Joel 2026-10-08): a tap on a department opens its sub-items right under it (NAV_JS). On a desktop the
   closed departments' lists and the Overview line stay hidden, so the sidebar there is exactly what it was. */
aside .subnav.mnav,aside .subnav a.sub.mob-only{display:none}
@media(max-width:860px){
  aside a.nav.has-sub::after{content:"";flex:none;width:7px;height:7px;margin:-3px 4px 0 auto;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform .15s ease}
  aside a.nav.has-sub:has(.badge)::after{margin-left:10px}
  aside a.nav.has-sub.mopen::after{transform:rotate(-135deg);margin-top:4px}
  aside a.nav.has-sub:not(.mopen) + .subnav{display:none}
  aside a.nav.has-sub.mopen + .subnav.mnav{display:flex}
  aside .subnav a.sub.mob-only{display:flex}
  aside .subnav a.sub{min-height:44px;font-size:15px}
}
/* HOVER STANDARD (Joel, 2026-10-10, matching Home Service Leads Fast): hovering a row, card, tile or chip lights up a 2px
   light blue border. It never fills the thing with blue. Drawn as an inset shadow so nothing shifts or resizes. */
:root{--hover-line:#60a5fa}
.row:hover,a.attrow:hover,a.pbrow:hover,.v2-sub:hover,.v2-rec:hover,button.v2-more:hover,.tjw-bell-row:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.btn-open:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.v2-chip:hover,.cf:hover:not([aria-pressed="true"]){box-shadow:inset 0 0 0 2px var(--hover-line)}
.v2-top .v2-chip.on:hover{background:var(--blue-soft);box-shadow:inset 0 0 0 2px var(--hover-line)}
a.stat:hover,button.stat:hover,.kpi:hover,.kpi.rowlink:hover,.ws-card:hover{background:var(--card);border-color:transparent;box-shadow:0 0 0 2px var(--hover-line);transform:none}
tr:hover td,.panel tr:hover td{background:transparent;box-shadow:inset 0 2px 0 var(--hover-line),inset 0 -2px 0 var(--hover-line)}
tr:hover td:first-child,.panel tr:hover td:first-child{box-shadow:inset 0 2px 0 var(--hover-line),inset 0 -2px 0 var(--hover-line),inset 2px 0 0 var(--hover-line)}
tr:hover td:last-child,.panel tr:hover td:last-child{box-shadow:inset 0 2px 0 var(--hover-line),inset 0 -2px 0 var(--hover-line),inset -2px 0 0 var(--hover-line)}
tr:hover td:only-child,.panel tr:hover td:only-child{box-shadow:inset 0 0 0 2px var(--hover-line)}
@media(max-width:760px){.panel.mstack tr:hover td,.panel.mstack tr:hover td:first-child,.panel.mstack tr:hover td:last-child{box-shadow:none}}
/* The rest of the app's rows, cards, tiles and chips (found by searching every :hover that filled or recoloured one). */
.cu-row:not(.cu-head):hover,.dm-row:hover,.cm-row:hover,.gr-row:hover,.gra-row:hover,.gra-area:hover,a.ifeed:hover,a.step:hover,.m-rail-item:hover,.mzt-half:hover,.dcl-opt:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.ws-filter:hover:not(.on){background:var(--card-2);box-shadow:inset 0 0 0 2px var(--hover-line)}
.segbar a:hover:not(.on),a.ar-doc:hover,.ar-grid a.ar-doc:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--hover-line)}
.kcard:hover,.kitem:hover,.scard:hover,.v2-card:hover,.ca-card:hover,.ob-card:hover,.cl-card:hover,a.mzt-card:hover,a.m-kan-card:hover,.sk-host .sg-tile:hover,button.sg-tile:hover{background:var(--card);border-color:transparent;box-shadow:0 0 0 2px var(--hover-line);transform:none}
.ta-row:hover td,.ta-row:focus td,.topo-list tr.rowlink:hover td,.m-table tr.m-rowlink:hover td,.sk-host .tbl tbody tr:hover td{background:transparent;box-shadow:inset 0 2px 0 var(--hover-line),inset 0 -2px 0 var(--hover-line)}
.ta-row:hover td:first-child,.topo-list tr.rowlink:hover td:first-child,.m-table tr.m-rowlink:hover td:first-child,.sk-host .tbl tbody tr:hover td:first-child{box-shadow:inset 0 2px 0 var(--hover-line),inset 0 -2px 0 var(--hover-line),inset 2px 0 0 var(--hover-line)}
.ta-row:hover td:last-child,.topo-list tr.rowlink:hover td:last-child,.m-table tr.m-rowlink:hover td:last-child,.sk-host .tbl tbody tr:hover td:last-child{box-shadow:inset 0 2px 0 var(--hover-line),inset 0 -2px 0 var(--hover-line),inset -2px 0 0 var(--hover-line)}
/* BUTTONS AND MENU ITEMS (Joel, 2026-10-10: "one consistent hover everywhere"): a button, ghost button, menu item or sidebar link gets the same 2px
   light blue border on hover. A filled (primary) button keeps its fill, so it still reads as a button; nothing swaps to a lighter fill. */
button:not(.mclose):not(.tm-x):not(.ca-x):not(.cal-x):not(.sg-x):not(#cr-x):not(#aiX):hover,.btn:hover,a.btn:hover,.btn-sm:hover,.btn-s:hover,
.addwork-menu a:hover,#fabMenu button:hover,aside a.nav:hover,aside .subnav a.sub:hover,aside .themetog:hover,.themetog:hover{box-shadow:inset 0 0 0 2px var(--hover-line)}
.v2-tabs button:hover,.tabs a:hover,.v2-tabs a:hover,button.stat:hover,button.v2-more:hover,.ws-filter.on:hover{box-shadow:none}
button.stat:hover,.ws-card:hover{box-shadow:0 0 0 2px var(--hover-line)}
button.v2-more:hover,.ws-filter:hover:not(.on){box-shadow:inset 0 0 0 2px var(--hover-line)}
.btn.ghost:hover,.addwork-menu a:hover,.addwork-menu button:hover,#fabMenu button:hover{background:transparent}
/* MODAL CLOSE STANDARD (Joel, 2026-10-10: "make the X look and act exactly like the one on the HSLF scorecard"): the department pop-up's X in
   tjw-modules/pages/pages/scorecard.js: a bare button, no fill, no border, the soft text colour, 26px glyph, line-height 1, the browser's own
   padding, no hover change, top right of the head row. Every ops pop-up close uses these exact values. It closes on click and on Escape. */
:root{--x-ink:#56627c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--x-ink:#a7b3cc}}
:root[data-theme="dark"]{--x-ink:#a7b3cc}
dialog .mclose,dialog .tm-x,dialog .ca-x,dialog .cal-x,dialog #cr-x,dialog .m-close,#fabAi #aiX{width:auto;height:auto;min-width:0;min-height:0;display:inline-block;
  padding:1px 6px;margin:0;background:none;border:0;border-radius:0;box-shadow:none;color:var(--x-ink);font-size:26px;line-height:1;font-weight:400;cursor:pointer;flex:none}
dialog .mclose,dialog .m-close{margin-left:auto;align-self:flex-start}
dialog .mhead .mclose{color:var(--nav-dim);margin:7px 5px 0 auto}
dialog .tm-x{position:absolute;top:23px;right:25px}
dialog .mclose:hover,dialog .tm-x:hover,dialog .ca-x:hover,dialog .cal-x:hover,dialog #cr-x:hover,dialog .m-close:hover,#fabAi #aiX:hover{background:none;box-shadow:none;color:var(--x-ink)}