/* =====================================================================
   PREDORIA CRM — design system
   Brand: emerald #04c07e / Cyprus teal #004643 / sand #F0EDE5 / gold #d1a153
   Typeface: Satoshi (Fontshare)
   Light mode only, mobile-first, installable PWA.

   Class names follow the reference app's vocabulary (.layout, .nav-link,
   .subtabs, .qbell…) so captured structure maps straight onto this file.
   ===================================================================== */

@font-face{font-family:'Satoshi';font-weight:400;font-style:normal;font-display:swap;
  src:url('https://cdn.fontshare.com/wf/TTX2Z3BF3P6Y5BQT3IV2VNOK6FL22KUT/7QYRJOI3JIMYHGY6CH7SOIFRQLZOLNJ6/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-weight:500;font-style:normal;font-display:swap;
  src:url('https://cdn.fontshare.com/wf/P2LQKHE6KA6ZP4AAGN72KDWMHH6ZH3TA/ZC32TK2P7FPS5GFTL46EU6KQJA24ZYDB/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-weight:700;font-style:normal;font-display:swap;
  src:url('https://cdn.fontshare.com/wf/LAFFD4SDUCDVQEXFPDC7C53EQ4ZELWQI/PXCT3G6LO6ICM5I3NTYENYPWJAECAWDD/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2');}
@font-face{font-family:'Satoshi';font-weight:900;font-style:normal;font-display:swap;
  src:url('https://cdn.fontshare.com/wf/NHPGVFYUXYXE33DZ75OIT4JFGHITX5PE/PSUTMASCDJTVPERDYJZPN23BVUFUCQIF/J64QX5IPOHK56I2KYUNBQ5M2XWZEYKYX.woff2') format('woff2');}

:root{
  --brand:#04c07e;          /* Predoria emerald */
  --brand-d:#03a36a;
  --brand-deep:#004643;     /* Cyprus teal */
  --brand-deep-d:#00332e;
  --brand-soft:#e6f9f1;
  --gold:#d1a153;
  --gold-light:#e6be7e;
  --grad:linear-gradient(135deg,#04c07e 0%,#039360 100%);
  --grad-deep:linear-gradient(135deg,#004643 0%,#00332e 100%);

  --canvas:#F0EDE5;         /* Sand Dune */
  --surface:#ffffff;
  --surface-2:#E5E2D9;
  --ink:#151e1a;
  --ink-soft:#4a5551;
  --ink-faint:#7d8b86;
  --line:#eceae6;
  --line-soft:#f4f2ed;

  --green:#16a34a;  --green-bg:#e7f8ee;
  --orange:#f59e0b; --orange-bg:#fff4e0;
  --red:#ef4444;    --red-bg:#fdecec;
  --blue:#2563eb;   --blue-bg:#e8effd;
  --gray:#d8dce2;

  --radius:12px; --radius-lg:16px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(21,30,26,.04), 0 4px 16px rgba(21,30,26,.05);
  --shadow-lg:0 8px 30px rgba(21,30,26,.10);
  --font:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --ring:0 0 0 3px rgba(4,192,126,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sidebar-w:246px;
  --topbar-h:58px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* An explicit display rule beats the browser default for [hidden], which
   silently reveals every overlay. Make hidden mean hidden, everywhere. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--canvas);color:var(--ink);
  font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5{font-family:var(--font-head);margin:0;line-height:1.25;color:var(--ink);font-weight:700}
h1{font-size:21px;letter-spacing:-.02em}
h2{font-size:17px;letter-spacing:-.01em}
h3{font-size:15px}
p{margin:0 0 10px}
a{color:var(--brand-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
.muted{color:var(--ink-faint)}
.right{text-align:right}
/* Numbers are read in columns everywhere in this app, so they line up. */
.num,td.num,.stat-value,.kpi-val,.fin-dig{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Respect people who don't want motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- shell ---------- */
.layout{display:flex;min-height:100vh;min-height:100dvh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;height:100dvh;z-index:40;
  transition:transform .22s var(--ease);
}
.brand{display:flex;align-items:center;gap:9px;padding:15px 16px 13px;border-bottom:1px solid var(--line-soft)}
.brand-dot{
  width:22px;height:22px;border-radius:7px;flex:0 0 22px;
  background:var(--grad);position:relative;
}
.brand-dot::after{
  content:"";position:absolute;left:4px;right:4px;top:9px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.9),var(--gold-light));
}
.brand-name{font-family:var(--font-head);font-weight:800;font-size:14.5px;letter-spacing:-.01em}

.nav{flex:1;overflow-y:auto;padding:9px 9px 14px}
.nav-pinned{display:grid;gap:1px}
.nav-link{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:var(--radius-sm);
  color:var(--ink-soft);font-weight:500;font-size:13.8px;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav-link:hover{background:var(--line-soft);color:var(--ink);text-decoration:none}
.nav-link.active{background:var(--brand-soft);color:var(--brand-deep);font-weight:700}
.nav-ico{width:17px;height:17px;flex:0 0 17px;opacity:.82}
.nav-link.active .nav-ico{opacity:1}
.nav-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{
  margin-left:auto;background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Accordion groups */
.nav-group{margin-top:7px}
.nav-group-head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:0;background:none;cursor:pointer;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);font-weight:700;font-size:11px;
  letter-spacing:.085em;text-transform:uppercase;
}
.nav-group-head:hover{background:var(--line-soft);color:var(--ink-soft)}
.nav-group-head .nav-ico{width:15px;height:15px;flex-basis:15px}
.nav-group-head span:not(.nav-caret){flex:1;text-align:left}
.nav-caret{
  width:7px;height:7px;flex:0 0 7px;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s var(--ease);
}
.nav-group.is-open .nav-caret{transform:rotate(45deg)}
.nav-group-body{display:none;padding-left:9px;margin-left:12px;border-left:1px solid var(--line)}
.nav-group.is-open .nav-group-body{display:grid;gap:1px}
.nav-group-body .nav-link{padding-left:11px;font-size:13.4px}

.sidebar-foot{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  border-top:1px solid var(--line-soft);color:inherit;min-width:0;
}
.sidebar-foot:hover{background:var(--line-soft);text-decoration:none}
.who-lines{display:grid;min-width:0}
.who-mini{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-email{font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- topbar ---------- */
.topbar{
  height:var(--topbar-h);flex:0 0 var(--topbar-h);
  background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 14px;
  position:sticky;top:0;z-index:30;
}
.hamburger{
  width:34px;height:34px;border-radius:var(--radius-sm);border:0;background:none;
  display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);
}
.hamburger:hover{background:var(--line-soft)}
.hamburger .ic{width:19px;height:19px}
.page-title{font-family:var(--font-head);font-weight:800;font-size:16px;letter-spacing:-.015em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-quick{display:flex;align-items:center;gap:6px}

.qsearch-trigger{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-faint);font-size:13px;background:var(--canvas);
}
.qsearch-trigger:hover{border-color:var(--gray);color:var(--ink-soft);text-decoration:none}
.qs-icon{width:15px;height:15px}

/* Notification bell + panel */
.qbell-wrap{position:relative}
.qbell{
  width:34px;height:34px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);position:relative;
}
.qbell:hover{background:var(--line-soft);color:var(--ink)}
.qbell-icon{width:18px;height:18px}
.qbell-badge{
  position:absolute;top:1px;right:1px;
  background:var(--red);color:#fff;font-size:9.5px;font-weight:800;line-height:1;
  min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--surface);
}
.qbell-panel{
  position:absolute;right:0;top:calc(100% + 7px);width:330px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;z-index:60;
}
.qbell-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px;border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.qbell-list{max-height:min(400px,60vh);overflow-y:auto}
.qbell-empty{padding:22px 14px;text-align:center;color:var(--ink-faint);font-size:13px;margin:0}
.qbell-item{
  display:flex;gap:10px;padding:10px 13px;
  border-bottom:1px solid var(--line-soft);color:inherit;
}
.qbell-item:last-child{border-bottom:0}
.qbell-item:hover{background:var(--line-soft);text-decoration:none}
.qbell-item.is-new{background:var(--brand-soft)}
.qbell-item.is-new:hover{background:#d9f4e8}
.qbi-icon{font-size:15px;line-height:1.3;flex:0 0 18px}
.qbi-body{display:grid;gap:2px;min-width:0}
.qbi-title{font-weight:700;font-size:13px;line-height:1.35}
.qbi-sub{font-size:11.5px;color:var(--ink-faint)}

.topbar-user{display:flex;align-items:center;gap:8px}
.who{font-size:13px;font-weight:600;color:var(--ink-soft)}
.badge-role{background:var(--brand-deep);color:#fff}

.content{padding:16px 16px 60px;flex:1;min-width:0}

/* ---------- subtabs ---------- */
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-2px 0 16px;overflow-x:auto}
.subtab{
  padding:8px 13px;font-size:13.4px;font-weight:600;color:var(--ink-soft);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.subtab:hover{color:var(--ink);text-decoration:none}
.subtab.active{color:var(--brand-deep);border-bottom-color:var(--brand);font-weight:700}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line-soft)}
.panel-head h2,.panel-head h3{flex:1;min-width:0}
.panel-body{padding:15px}
.panel-body.is-flush{padding:0}
/* the reference gives some cards a frosted treatment */
.glass{
  background:rgba(255,255,255,.62);
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,17,20,.04),
             0 10px 34px rgba(16,17,20,.07);
}
.glass .panel-head{border-bottom-color:rgba(16,17,20,.07)}
/* No blur support? Fall back to near-solid, or the text loses contrast. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.94)}
}

.grid-2{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.cards{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:13.4px;
  cursor:pointer;white-space:nowrap;
  transition:background .14s var(--ease),border-color .14s var(--ease),transform .06s var(--ease);
}
.btn:hover{background:var(--line-soft);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn-deep{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.btn-deep:hover{background:var(--brand-deep-d);border-color:var(--brand-deep-d)}
.btn-danger{background:transparent;border-color:transparent;color:var(--red)}
.btn-danger:hover{background:var(--red-bg)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--line-soft);color:var(--ink)}
.btn-sm{padding:5px 10px;font-size:12.5px}
.btn-lg{padding:12px 20px;font-size:15px}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}

/* ---------- forms ---------- */
.field,.form-row{margin-bottom:13px}
/* A field caption. Inside a .form-row a bare <label> is one by definition, so
   it needs no class — but a label carrying a class of its own (.check,
   .pick-row, .ol-pick, .aud-tab, .cfg-switch…) is a control wrapper, not a
   caption, and it brings its own layout. Matching only unclassed labels keeps
   the two apart; without it the caption styling wins on specificity and
   flattens every one of those wrappers to a bold stacked block. `.label` is
   the caption class for the places that do want to say so out loud. */
.label,.form-row label:not([class]){display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:5px}
.input,.select,.textarea,
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font-size:14px;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.input:focus,.select:focus,.textarea:focus,
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--ring);
}
.textarea,.form-row textarea{min-height:88px;resize:vertical}
.hint,.help{font-size:12px;color:var(--ink-faint);margin-top:5px}
.err{font-size:12.5px;color:var(--red);margin-top:5px}

/* A tick box is not a text field. The width/padding/border rule above is
   deliberately broad so a bare <input> inside a .form-row is styled without
   needing a class — but it also caught checkboxes and radios and drew a
   text-field box round them, then squashed it to 15px. An attribute selector
   outweighs it, so this settles it everywhere at once. */
.form-row input[type=checkbox],.form-row input[type=radio],
.field input[type=checkbox],.field input[type=radio]{
  width:15px;height:15px;padding:0;border:0;background:none;
  border-radius:0;accent-color:var(--brand);flex:none;cursor:pointer;
  /* mobile.css gives fields a 42px min-height so they stay tappable on a
     phone; a tick box is tapped through its label, not its own 42px box. */
  min-height:0;
}
.form-row input[type=checkbox]:focus,.form-row input[type=radio]:focus,
.field input[type=checkbox]:focus,.field input[type=radio]:focus{
  box-shadow:none;outline:2px solid var(--brand);outline-offset:2px;
}

.check{display:inline-flex;align-items:center;gap:8px;font-size:13.4px;font-weight:500;color:var(--ink-soft);cursor:pointer;line-height:1.45}
.check input{width:15px;height:15px;accent-color:var(--brand);margin:0;padding:0;border:0;background:none;flex:none;cursor:pointer}
/* Wording that runs past one line stays clear of the tick box. */
.check>span{flex:1;min-width:0}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- badges, pills, dots ---------- */
.badge,.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--line-soft);color:var(--ink-soft);white-space:nowrap;
}
.kc-green{background:var(--green-bg);color:#0f7a37}
.kc-orange{background:var(--orange-bg);color:#a86a06}
.kc-red{background:var(--red-bg);color:#c62d2d}
.kc-blue{background:var(--blue-bg);color:#1d4fd0}
.kc-brand{background:var(--brand-soft);color:var(--brand-deep)}
.kc-gold{background:#faf1e2;color:#9a7431}
.kc-purple{background:#efeafe;color:#7c3aed}
.kc-gray{background:var(--line-soft);color:var(--ink-faint)}

/* Health is a 0-10 score, shown as a coloured dot carrying the number. */
.health-dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.health-green{background:var(--green-bg);color:#0f7a37}
.health-orange{background:var(--orange-bg);color:#a86a06}
.health-red{background:var(--red-bg);color:#c62d2d}

/* ---------- avatars ---------- */
.av{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:var(--brand-soft);color:var(--brand-deep);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12.5px;overflow:hidden;
}
.av img{width:100%;height:100%;object-fit:cover}
.av-sm{width:27px;height:27px;flex-basis:27px;font-size:11px}
.av-lg{width:54px;height:54px;flex-basis:54px;font-size:18px}
.who-av{width:31px;height:31px;flex-basis:31px;font-size:11.5px}
/* A photo fills the circle, so the brand tint behind it would only show
   through as a rim while the image loads. */
.av.has-photo,.chat-avatar.has-photo{background:var(--line-soft)}

/* ---------- click-to-change profile photo ----------
   The file input hides inside the label, so the avatar itself is the
   target and there is nothing extra to look at until you hover. */
.who-av-wrap,.av-picker-shell{position:relative;display:inline-flex;cursor:pointer;flex:0 0 auto}
.who-av-wrap .av{transition:filter .15s var(--ease)}
.who-av-wrap:hover .av,.av-picker-shell:hover .av{filter:brightness(.86)}

.av-cam{
  position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  border:2px solid var(--surface);opacity:0;transition:opacity .15s var(--ease);
  pointer-events:none;
}
.av-cam.sm{width:15px;height:15px}
.who-av-wrap:hover .av-cam,.av-picker-shell:hover .av-cam{opacity:1}

.av-picker{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.av-picker .av-lg{box-shadow:0 4px 16px rgba(20,18,31,.14)}
.av-picker-shell .av-cam{width:28px;height:28px;right:2px;bottom:2px;opacity:.92}
.av-picker-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.av-hint{font-size:11.5px;color:var(--ink-faint)}
.av-picker.is-busy{opacity:.75;pointer-events:none}

.av-busy{
  position:absolute;inset:0;border-radius:50%;
  background:rgba(255,255,255,.6);display:grid;place-items:center;
}
.av-busy::after{
  content:"";width:22px;height:22px;border-radius:50%;
  border:2px solid var(--brand);border-top-color:transparent;
  animation:avspin .7s linear infinite;
}
@keyframes avspin{to{transform:rotate(360deg)}}

/* The sidebar picker is a plain div now, not a link. */
.sidebar-foot.av-picker{margin-bottom:0;gap:9px}

.topbar-out{gap:7px}
.topbar-out .ico{opacity:.75}

@media (max-width:560px){
  .av-picker{gap:12px}
}


/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.table{width:100%;border-collapse:collapse;font-size:13.4px}
.table th{
  text-align:left;font-weight:700;font-size:10.8px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);padding:9px 13px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table th a{color:inherit}
.table td{padding:11px 13px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--line-soft)}
.table .num,.table th.num{text-align:right}
.table td.actions{white-space:nowrap}
.table td.actions form{display:inline}
tr.row-new{background:var(--brand-soft)}

/* key/value grids (client detail, profile, pay panels) */
.kv-grid{display:grid;gap:11px 20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kv-grid>div{display:grid;gap:2px;min-width:0}
.kv-l{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.kv-v{font-weight:600;font-size:13.8px;word-break:break-word}
.section-title{
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin:16px 0 8px;
}

/* ---------- stat cards ---------- */
.card.stat,.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.stat-label{font-size:11.3px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.stat-value{font-family:var(--font-head);font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:4px;line-height:1.1}
.stat-sub{font-size:12.3px;color:var(--ink-soft);margin-top:3px}
.stat-accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.up{color:var(--green);font-weight:700}
.down{color:var(--red);font-weight:700}

/* ---------- empty states ---------- */
.empty,.fin-empty{text-align:center;padding:38px 20px;color:var(--ink-faint);font-size:13.4px}
.empty h3{color:var(--ink-soft);margin-bottom:5px}

/* A centred "there is nothing here" panel, with room to breathe. */
.ol-center{text-align:center;max-width:520px;margin:0 auto}
.ol-center h2{margin-bottom:8px}
.ol-center p{font-size:13.5px;line-height:1.6}
.ol-emoji{font-size:40px;line-height:1;margin-bottom:14px}

/* ---------- flash + toasts ---------- */
.flash{padding:10px 13px;border-radius:var(--radius-sm);font-size:13.4px;font-weight:600;margin-bottom:14px;border:1px solid transparent}
.flash-ok{background:var(--brand-soft);color:var(--brand-deep);border-color:rgba(4,192,126,.25)}
.flash-err{background:var(--red-bg);color:#c62d2d;border-color:rgba(239,68,68,.25)}
/* Not broken, but not finished either. */
.flash-warn{background:var(--orange-bg);color:#92400e;border-color:#fcd34d}

.toast-stack{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;
  font-size:13.4px;font-weight:600;box-shadow:var(--shadow-lg);
  animation:toast-in .24s var(--ease);
}
.toast-ok{background:var(--brand-deep)}
.toast-err{background:var(--red)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Offered when something has happened that this page cannot show without
   being reloaded. Never reloads on its own — losing a half-filled form to a
   background refresh is worse than the stale number it would fix. */
.live-refresh{
  position:fixed;right:18px;bottom:18px;z-index:190;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border:0;cursor:pointer;
  padding:10px 17px;border-radius:999px;
  font-size:13.2px;font-weight:700;box-shadow:var(--shadow-lg);
  animation:toast-in .24s var(--ease);
}
.live-refresh::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 0 rgba(4,192,126,.7);animation:live-pulse 1.9s infinite;
}
.live-refresh:hover{background:var(--brand-deep)}
@keyframes live-pulse{
  70%{box-shadow:0 0 0 7px rgba(4,192,126,0)}
  100%{box-shadow:0 0 0 0 rgba(4,192,126,0)}
}
@media (max-width:760px){
  /* Clear of the composer and the phone's home bar. */
  .live-refresh{right:12px;bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* ---------- responsive ---------- */
.sb-scrim{display:none}
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .hamburger{display:inline-flex}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  body.sb-open .sidebar{transform:none}
  body.sb-open .sb-scrim{display:block;position:fixed;inset:0;background:rgba(21,30,26,.35);z-index:39}
  .content{padding:13px 12px 70px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .qs-label{display:none}
  .qsearch-trigger{padding:6px 9px}
  .tb-hide-sm{display:none}
  h1,.page-title{font-size:15.5px}
}

/* ============ ADVANCED LOGIN (staff + client) ============ */
.lg-body{background:var(--canvas)}
.lg{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh;min-height:100dvh}

/* left brand panel */
.lg-brand{position:relative;overflow:hidden;background:var(--grad-deep);color:#fff;padding:46px 50px;display:flex;flex-direction:column}
/* subtle graph grid, echoes the marketing site */
.lg-brand::before{
  content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:44px 44px;
}
/* an emerald bloom behind the copy */
.lg-brand::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  right:-160px;bottom:-200px;pointer-events:none;
  background:radial-gradient(circle,rgba(4,192,126,.42) 0%,rgba(4,192,126,0) 68%);
}
.lg-brand>*{position:relative;z-index:1}
/* The logo is dark green on transparent, so it vanishes on the teal panel.
   Inverting it turns wordmark and swoosh into one white blur — use type. */
.lg-wordmark{
  font-family:var(--font-head);font-weight:900;font-size:22px;
  letter-spacing:.11em;color:#fff;text-transform:uppercase;line-height:1;
  display:inline-flex;align-items:center;gap:11px;
}
/* the logo's swoosh, reduced to one emerald→gold stroke */
.lg-wordmark::after{
  content:"";width:54px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--gold) 100%);
}
.lg-brand-mid{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:440px}
.lg-brand h1{font-family:var(--font-head);font-size:37px;line-height:1.12;letter-spacing:-.03em;color:#fff;font-weight:900}
.lg-brand h1 em{font-style:normal;color:var(--brand)}
.lg-brand p{margin-top:13px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);max-width:400px}
.lg-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.lg-points li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.86)}
.lg-points svg{width:17px;height:17px;flex:0 0 17px;color:var(--brand)}
.lg-foot{font-size:12.5px;color:rgba(255,255,255,.45)}

/* right form panel */
.lg-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.lg-form{width:100%;max-width:376px}
.lg-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-d);margin-bottom:8px}
.lg-form h2{font-size:26px;letter-spacing:-.022em;font-weight:800}
.lg-form .lead{color:var(--ink-soft);margin:6px 0 24px;font-size:14.5px}
.lg-pw{position:relative}
.lg-pw .input{padding-right:62px}
.lg-show{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:5px 7px;border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--ink-faint);
}
.lg-show:hover{color:var(--ink);background:var(--line-soft)}
.lg-check{display:flex;align-items:center;gap:9px;font-size:13.4px;color:var(--ink-soft);cursor:pointer;user-select:none}
.lg-check input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0}
.lg-alt{margin-top:20px;padding-top:17px;border-top:1px solid var(--line);font-size:13.4px;color:var(--ink-soft);text-align:center}

@media (max-width:900px){
  .lg{grid-template-columns:1fr}
  .lg-brand{padding:30px 26px}
  .lg-brand-mid{justify-content:flex-start;margin:24px 0}
  .lg-brand h1{font-size:28px}
  .lg-points,.lg-foot{display:none}
}

/* ---------- task rows (dashboard + My Day) ---------- */
.task-list{display:grid;gap:1px}
.task-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;border-radius:var(--radius-sm);margin:0;
}
.task-row:hover{background:var(--line-soft)}
.task-tick{
  width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  border:2px solid var(--gray);background:transparent;cursor:pointer;padding:0;
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.task-tick:hover{border-color:var(--brand);background:var(--brand-soft)}
.task-body{display:grid;gap:1px;flex:1;min-width:0}
.task-title{font-weight:600;font-size:13.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task-meta{font-size:11.8px;color:var(--ink-faint)}
.task-row.is-done .task-title{text-decoration:line-through;color:var(--ink-faint)}
.task-row.is-done .task-tick{background:var(--brand);border-color:var(--brand)}

/* ---------- horizontal bars (pipeline, category shares) ---------- */
.bars{display:grid;gap:9px}
.bar-row{display:grid;grid-template-columns:104px 1fr 34px;align-items:center;gap:10px}
.bar-label{font-size:12.6px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:5px;background:var(--brand);transition:width .3s var(--ease)}
.bar-val{font-size:12.6px;font-weight:700;text-align:right}

/* ---------- forms laid out in columns ---------- */
.form-grid{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ---------- clients toolbar ---------- */
.clients-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.view-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.vt{padding:6px 12px;font-size:12.8px;font-weight:600;color:var(--ink-soft)}
.vt:hover{background:var(--line-soft);text-decoration:none}
.vt.active{background:var(--brand-soft);color:var(--brand-deep)}
.clients-filters{display:flex;gap:8px;flex:1;min-width:240px}
.clients-filters .input{flex:1;min-width:130px}
.clients-filters .select{width:auto;min-width:130px}

/* ---------- kanban ---------- */
.kanban{
  display:grid;grid-auto-flow:column;grid-auto-columns:265px;gap:12px;
  overflow-x:auto;padding-bottom:12px;align-items:start;
}
.kcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.kcol-head{
  display:flex;align-items:center;gap:8px;
  padding:10px 13px;border-top:3px solid var(--gray);
  font-weight:700;font-size:13px;border-bottom:1px solid var(--line-soft);
}
.kcol-head span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcount{
  background:var(--line-soft);color:var(--ink-faint);
  font-size:11px;font-weight:800;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
}
.kcol-body{padding:9px;display:grid;gap:8px;min-height:74px;transition:background .15s var(--ease)}
.kcol-body.is-over{background:var(--brand-soft)}
.kcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 11px;cursor:grab;box-shadow:0 1px 2px rgba(21,30,26,.04);
}
.kcard:active{cursor:grabbing}
.kcard.is-dragging{opacity:.45}
.kcard-name{font-weight:700;font-size:13.4px;color:var(--ink);display:block}
.kcard-name:hover{color:var(--brand-d)}
.kcard-sub{font-size:11.8px;color:var(--ink-faint);margin-top:1px}
.kcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.kcard-amt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft)}

/* ---------- client detail ---------- */
.detail-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.detail-actions{margin-left:auto;display:flex;align-items:center;gap:7px}
.detail-actions form{display:inline}
/* Each column stacks its own panels with consistent spacing. */
.detail-col{display:grid;gap:14px;align-content:start}

.summary-note{
  margin:13px 0 0;padding:11px 13px;border-radius:var(--radius-sm);
  background:var(--brand-soft);color:var(--brand-deep);
  font-size:13.4px;font-weight:500;border-left:3px solid var(--brand);
}

.tier-list{margin:0;padding-left:18px;font-size:13.4px;display:grid;gap:5px}
.tier-list li{color:var(--ink-soft)}

/* progress bar with a label beside it */
.prog-track{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.prog-fill{display:block;height:100%;border-radius:999px;background:var(--grad);transition:width .4s var(--ease)}
.prog-fill.is-hit{background:var(--green)}
/* One-line variant: label sits beside the bar instead of above it. */
.prog-inline{display:flex;align-items:center;gap:10px}
.prog-inline .prog-track{flex:1}
.prog-label{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}

.ltv-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);background:var(--line-soft);
}
.ltv-row strong{font-family:var(--font-head);font-size:19px;font-variant-numeric:tabular-nums}
/* The bottom line of a stack of rows, so it reads as the answer. */
.ltv-row + .ltv-row{margin-top:7px}
.ltv-total{background:var(--brand-soft);color:var(--brand-deep)}

/* health: one big number plus a bar */
.health-big{
  font-family:var(--font-head);font-size:40px;font-weight:900;line-height:1;
  letter-spacing:-.03em;background:none!important;width:auto;height:auto;
  display:flex;align-items:baseline;gap:2px;
}
.health-big.health-green{color:#0f7a37}
.health-big.health-orange{color:#a86a06}
.health-big.health-red{color:#c62d2d}
.health-big span{font-size:16px;font-weight:700;opacity:.5}
.health-bar{height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden;margin-top:10px}
.health-bar span{display:block;height:100%;border-radius:5px}
.health-bar .health-green{background:var(--green)}
.health-bar .health-orange{background:var(--orange)}
.health-bar .health-red{background:var(--red)}

.inline-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.inline-form .select,.inline-form .input{width:auto;flex:1;min-width:120px}
.inline-form output{font-weight:800;font-variant-numeric:tabular-nums;min-width:20px;text-align:center}

.copy-field{display:flex;gap:7px;width:100%}
.copy-field .input{flex:1;min-width:0;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- notes timeline ---------- */
.timeline{margin-top:15px;display:grid;gap:2px;position:relative}
.tl-item{display:flex;gap:11px;padding:9px 0;position:relative}
.tl-item::before{
  content:"";position:absolute;left:5px;top:26px;bottom:-2px;width:1px;background:var(--line);
}
.tl-item:last-child::before{display:none}
.tl-dot{
  width:11px;height:11px;border-radius:50%;flex:0 0 11px;margin-top:5px;
  background:var(--gray);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);
}
.tl-note{background:var(--ink-faint)}
.tl-call{background:var(--blue)}
.tl-meeting{background:var(--brand)}
.tl-email{background:var(--gold)}
.tl-stage,.tl-system{background:var(--gray)}
.tl-body{flex:1;min-width:0}
.tl-meta{font-size:12px;margin-bottom:2px}
.tl-meta form{margin:0}
.tl-text{font-size:13.4px;color:var(--ink-soft);word-break:break-word}

/* ---------- My Day ---------- */
.daynav{display:flex;align-items:center;gap:5px}
.daynav .input{width:auto}

.kpi-strip{
  display:grid;gap:10px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
}
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:11px 13px;box-shadow:var(--shadow);display:grid;gap:1px;
}
.kpi-ico{font-size:15px;line-height:1}
.kpi-val{font-family:var(--font-head);font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.kpi-lbl{font-size:11.3px;color:var(--ink-faint);font-weight:600}

.task-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.task-add .input{flex:1;min-width:150px}
.task-add .select{width:auto}

/* hourly log: a label column and a free-text column per hour */
.hour-grid{display:grid;gap:5px}
.hour-row{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:9px;margin:0}
.hour-lbl{
  font-size:11.5px;font-weight:700;color:var(--ink-faint);
  text-align:right;font-variant-numeric:tabular-nums;
}
.hour-row .input{padding:6px 10px;font-size:13.2px}

/* ---------- packages ---------- */
.pkg-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.pkg-head>div:first-child{flex:1;min-width:240px}
.pkg-head-actions{display:flex;gap:7px}
.pkg-desc{margin:7px 0 0;font-size:13.5px;color:var(--ink-soft);max-width:640px}

.pkg-tiers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.tier-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:17px 17px 15px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;
}
.tier-card.recommended{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow-lg)}
.tier-card.is-hidden{opacity:.55}
.tier-flag{
  position:absolute;top:-10px;left:17px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.05em;padding:3px 9px;border-radius:999px;
}
.tier-name{font-family:var(--font-head);font-size:19px;font-weight:800;letter-spacing:-.02em}
.tier-tag{font-size:12.5px;color:var(--ink-faint);margin-top:3px;line-height:1.45}

.tier-price{margin:13px 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.tp-onetime{font-family:var(--font-head);font-size:25px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tp-unit{font-size:11.5px;color:var(--ink-faint);font-weight:700}
.tp-monthly{
  width:100%;font-family:var(--font-head);font-size:17px;font-weight:800;
  color:var(--brand-deep);font-variant-numeric:tabular-nums;
}

.tier-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.chip{
  background:var(--line-soft);color:var(--ink-soft);
  font-size:10.8px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;
}
/* Green means it is in the price; orange means it costs extra. */
.chip-addon.addon-included{background:var(--green-bg);color:var(--green)}
.chip-addon.addon-extra{background:var(--orange-bg);color:#b45309}

.tier-firstmonths{
  font-size:12.5px;color:var(--ink-soft);padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--line-soft);margin-bottom:12px;
}
.tier-firstmonths strong{font-family:var(--font-head);font-size:15px;font-variant-numeric:tabular-nums}

.tier-sec{
  font-size:10.8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-deep);margin:11px 0 6px;
}
.tier-sec.muted{color:var(--ink-faint)}
.tier-list{margin:0;padding-left:17px;font-size:13px;display:grid;gap:4px;color:var(--ink-soft)}
.tier-list-no{color:var(--ink-faint)}
.tier-list-no li{text-decoration:line-through;text-decoration-color:var(--gray)}

.tier-actions{display:flex;gap:6px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.tier-actions form{display:inline}

/* ---------- deliverables ---------- */
.is-overdue{color:var(--red);font-weight:600}
/* status select tinted by the status it is showing */
.select-status{
  width:auto;min-width:126px;padding:5px 9px;font-size:12.4px;font-weight:700;
  border-radius:999px;border-color:transparent;
}
.select-status.kc-green{background:var(--green-bg);color:#0f7a37}
.select-status.kc-brand{background:var(--brand-soft);color:var(--brand-deep)}
.select-status.kc-blue{background:var(--blue-bg);color:#1d4fd0}
.select-status.kc-orange{background:var(--orange-bg);color:#a86a06}
.select-status.kc-red{background:var(--red-bg);color:#c62d2d}
.select-status.kc-gray{background:var(--line-soft);color:var(--ink-soft)}

/* an inline editor that opens under a table row */
.row-edit{position:relative;display:inline-block}
.row-edit>summary{display:inline-flex}
.row-edit-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:50;
  width:348px;max-width:calc(100vw - 30px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:15px;text-align:left;
  /* The cell around it is `white-space:nowrap` so the row's buttons stay on one
     line. The panel is a form, not a row: everything in it wraps. */
  white-space:normal;
}
.row-edit-panel .form-grid{grid-template-columns:1fr 1fr;gap:0 12px}
.row-edit-panel .form-row{margin-bottom:11px}
.row-edit-panel .form-row:last-of-type{margin-bottom:0}
.row-edit-panel textarea{min-height:76px;line-height:1.5}
.row-edit-panel .hint{line-height:1.45}
/* The panel is taller than a row, and `overflow-x:auto` on .table-scroll makes
   the browser compute overflow-y to `auto` as well, so an open drawer was cut
   off at the bottom of the table and its Save button put out of reach. Let the
   container overflow while a drawer is open; it goes back to scrolling the
   moment the drawer closes. */
.table-scroll:has(details.row-edit[open]){overflow:visible}

/* What you are editing, so a panel floating over a long table still says which
   row it belongs to. */
.row-edit-title{
  font-size:13.6px;font-weight:800;color:var(--ink);line-height:1.35;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.row-edit-title span{
  display:block;font-size:10.6px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;
}
/* Save on one side, Delete on the other, so the destructive one is never where
   the hand is already going. */
.row-edit-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
}
.row-edit-foot form{display:inline}

/* ============ FINANCE ============ */
.fin-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fin-monthnav{display:flex;align-items:center;gap:5px}
.fin-monthnav-btn{
  width:30px;height:30px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-weight:700;
}
.fin-monthnav-btn:hover{background:var(--line-soft);color:var(--ink);text-decoration:none}
.fin-monthnav-btn.is-off{opacity:.35;pointer-events:none}
.fin-monthnav-form .input{width:auto;padding:5px 9px}
.fin-bar-extra{margin-left:auto;display:flex;gap:7px}

/* Amounts print the currency code small, the digits large. */
.fin-amt{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.fin-cur{font-size:.72em;font-weight:700;color:var(--ink-faint);letter-spacing:.02em}
.fin-dig{font-weight:700}
.fin-amt.is-big .fin-dig{font-family:var(--font-head);font-size:25px;font-weight:900;letter-spacing:-.03em}
.fin-amt.is-in .fin-dig{color:var(--brand-deep)}
.fin-amt.is-out .fin-dig{color:var(--ink)}
.fin-amt.is-neg .fin-dig::before{content:"−"}
.fin-amt.is-strong .fin-dig{font-weight:900}
/* The same figure in the second currency — an aid to reading, never a
   number to work from, so it is quiet and sits on its own line. */
/* A quiet divider inside a form — "and now the money part". */
.fin-sub{
  margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
}
.fin-alt{
  display:block;margin-top:3px;
  font-size:12px;font-weight:600;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

.fin-kpis{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));margin-bottom:16px}
.fin-kpi-link{color:inherit;display:block}
.fin-kpi-link:hover{text-decoration:none}
.fin-kpi-link:hover .fin-kpi{border-color:var(--gray)}
.fin-kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px 15px 11px;box-shadow:var(--shadow);position:relative;overflow:hidden;height:100%;
}
.fin-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gray)}
.fin-kpi.is-in::before{background:var(--brand)}
.fin-kpi.is-out::before{background:var(--red)}
.fin-kpi.is-auto::before{background:var(--gold)}
.fin-kpi.is-neutral::before{background:var(--brand-deep)}
.fin-kpi-label{font-size:11.3px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.fin-kpi-value{margin-top:4px;line-height:1.1}
.fin-kpi-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:3px}
.fin-kpi-sub{font-size:12.2px;color:var(--ink-soft)}
.fin-delta{font-size:11.5px;font-weight:800}
.fin-delta.is-good{color:var(--green)}
.fin-delta.is-bad{color:var(--red)}
.fin-kpi-spark{height:28px;margin-top:7px;opacity:.55}
.fin-kpi-spark svg{width:100%;height:100%;display:block}
.fin-kpi-foot{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);
  font-size:11.8px;color:var(--ink-faint);display:flex;align-items:center;gap:6px;
}
.fin-kpi-foot.run-amber{color:#a86a06;font-weight:700}
.fin-kpi-foot.run-red{color:#c62d2d;font-weight:700}

.fin-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;
}
.fin-panel-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line-soft)}
.fin-panel-head h2{flex:1;min-width:0}
.fin-panel-note{font-size:12px;color:var(--ink-faint);font-weight:600}
.fin-panel-head-actions{display:flex;gap:6px}
.fin-panel-body{padding:15px}
.fin-panel-body.is-flush{padding:0}
.fin-panel-foot{
  display:flex;gap:14px;padding:11px 15px;border-top:1px solid var(--line-soft);
  background:var(--line-soft);font-size:12.8px;font-weight:600;
}
.fin-cols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}

/* the statement */
.fin-st-scroll{overflow-x:auto}
.fin-st{width:100%;border-collapse:collapse;font-size:13.4px}
.fin-st th{
  text-align:left;font-size:10.8px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);padding:0 0 9px;font-weight:700;
}
.fin-st th.num,.fin-st td.num{text-align:right}
.fin-st td{padding:7px 0}
.fin-st-section td{
  font-size:10.8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--brand-deep);padding:15px 0 4px;
}
.fin-st-line td{color:var(--ink-soft)}
.fin-st-sub td{
  font-weight:700;border-top:1px solid var(--line-soft);padding-top:9px;
}
.fin-st-total td{
  font-weight:800;border-top:2px solid var(--ink);padding-top:11px;margin-top:6px;
}
.fin-td-sub{display:block;font-size:11.3px;color:var(--ink-faint);font-weight:500}

/* category shares */
.fin-shares{display:grid;gap:12px}
.fin-share-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.fin-share-label{font-size:13px;font-weight:600;color:var(--ink-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-share-val{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.fin-share-pct{font-size:11.5px;font-weight:800;color:var(--ink-faint)}
.fin-share-track{height:7px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.fin-share-track span{display:block;height:100%;border-radius:4px;background:var(--brand)}
.fin-share-track span.is-out{background:linear-gradient(90deg,var(--gold),var(--gold-light))}

.fin-note{font-size:12px;color:var(--ink-faint);margin-top:6px;max-width:640px}

/* ============ TEAM ============ */
.emp-hero{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:15px 17px;box-shadow:var(--shadow);margin-bottom:16px;
}
.emp-hero-txt{flex:1;min-width:230px}
.emp-hero-txt p{margin:3px 0 0;font-size:13.2px}

/* ---------- team filters ----------
   Where each person is stuck getting started, plus whether they worked
   today. The three setup tags are a partition, so their counts add up to
   the team — which is the point: no bucket quietly swallows anyone. */
.emp-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 15px}
.emp-tag{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:5px 13px;font-size:12.6px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .13s var(--ease),border-color .13s var(--ease),color .13s var(--ease);
}
.emp-tag:hover{background:var(--line-soft);color:var(--ink);text-decoration:none}
.emp-tag.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-deep)}
.emp-tag-n{
  font-size:11px;font-weight:800;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--line-soft);color:var(--ink-faint);
  display:inline-flex;align-items:center;justify-content:center;
}
.emp-tag.is-on .emp-tag-n{background:var(--brand);color:#fff}
/* Nobody in it today, but the tag keeps its place so the row does not
   reshuffle every time somebody moves a stage. */
.emp-tag.is-empty{opacity:.5}
.emp-tag.is-empty.is-on{opacity:1}

.emp-card.is-filtered{display:none}
.emp-none .empty{padding:34px 20px}

/* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so filtering
   down to one person stretched that card across the whole row. Keeping the
   tracks means a lone card stays card-sized and the grid does not reflow
   every time a filter changes. */
/* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so filtering
   down to one person stretched that card across the whole row. Keeping the
   tracks means a lone card stays card-sized and the grid does not reflow
   every time a filter changes.

   `grid-auto-rows:1fr` with the default stretch alignment makes every card
   the same height as the tallest — across rows, not just within one — so the
   team reads as a set of matching cards however ragged the content is.
   `.emp-actions` already carries margin-top:auto, so the buttons sit on the
   bottom edge of every card rather than floating under short content. */
.emp-grid{
  display:grid;gap:13px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:1fr;
}
/* …but one card in a wide window should not sit in a 300px sliver either. */
.emp-grid > .emp-card{max-width:520px}
.emp-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;
  /* A floor, not a fixed height. grid-auto-rows:1fr matches the cards to the
     tallest one *on screen*, which meant a filter that hid the tall cards
     shrank the rest — the same person's card was a different size depending
     on which tag was selected. This holds the size steady across every view,
     and anything genuinely taller still grows rather than being clipped. */
  min-height:320px;
}
.emp-card.is-paused{opacity:.6}
.emp-card-top{display:flex;align-items:center;gap:10px}
.emp-av{width:38px;height:38px;flex-basis:38px;font-size:13px}
.emp-id{flex:1;min-width:0;display:grid}
.emp-name{font-weight:700;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-name:hover{color:var(--brand-d)}
.emp-mail{font-size:11.8px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emp-status{font-size:9.8px;font-weight:800;letter-spacing:.07em;padding:3px 8px;border-radius:999px}
.emp-status.on{background:var(--brand-soft);color:var(--brand-deep)}
.emp-status.off{background:var(--line-soft);color:var(--ink-faint)}

.emp-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.emp-num{display:grid;gap:1px}
.emp-num .n{font-family:var(--font-head);font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.emp-num .n.warn{color:var(--orange)}
.emp-num .l{font-size:10.8px;color:var(--ink-faint);font-weight:600;line-height:1.3}

/* The second row of numbers: what they brought in, not what they were asked
   for. Two columns rather than three, and set apart by a rule so the card
   reads as "targets, then results". */
.emp-nums-won{
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line-soft);padding-top:11px;
}
.emp-nums-won .n{font-size:17px;color:var(--brand-deep)}

/* Who brought a client in, on the clients table. */
.cl-sourced{font-size:12.8px;font-weight:600;color:var(--brand-deep)}
.cl-sourced:hover{color:var(--brand-d)}

/* A person's record, on their profile: this month over all time. */
.rec-strip{
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px;
}
.rec-cell{display:grid;gap:2px;background:var(--surface);padding:14px 16px}
.rec-l{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.rec-v{
  font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15;color:var(--ink);
}
.rec-s{font-size:11.6px;color:var(--ink-faint);line-height:1.35}

.emp-chips{display:flex;gap:6px;flex-wrap:wrap}
.emp-chip{background:var(--line-soft);color:var(--ink-soft);font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px}
.emp-chip b{font-weight:800;color:var(--ink)}
/* Nobody has set them a number yet — a link to go and do it, not a blank. */
a.emp-chip.is-empty{
  background:none;border:1px dashed var(--line);color:var(--ink-faint);
  font-weight:600;text-decoration:none;
}
a.emp-chip.is-empty:hover{border-color:var(--brand);color:var(--brand-deep);text-decoration:none}

.emp-flags{display:flex;gap:6px;flex-wrap:wrap}
.emp-flag{background:var(--line-soft);color:var(--ink-faint);font-size:10.8px;font-weight:700;padding:3px 8px;border-radius:999px}
.emp-flag.warn{background:var(--orange-bg);color:#a86a06}

.emp-offer{
  display:flex;align-items:center;gap:8px;font-size:12.2px;
  padding:8px 10px;border-radius:var(--radius-sm);background:var(--line-soft);
}
.emp-offer span:nth-child(2){flex:1;min-width:0}
.emp-offer a{font-weight:700;white-space:nowrap}
.emp-offer-tick{font-weight:900;flex:0 0 auto}
.emp-offer.is-signed{background:var(--brand-soft);color:var(--brand-deep)}
.emp-offer.is-none{color:var(--ink-faint)}

.emp-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.emp-actions form{display:inline}

/* the target matrix on the employee form */
.target-grid td{padding:6px 10px}
.target-in{width:78px;padding:6px 9px;text-align:right}
.cfg-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;background:var(--brand-soft);color:var(--brand-deep);
  font-size:10.5px;font-weight:800;margin-right:6px;vertical-align:middle;
}
.cfg-badge.tone-good{background:var(--green-bg);color:#0f7a37}
.cfg-badge.tone-bad{background:var(--red-bg);color:#c62d2d}
.cfg-badge.tone-neutral{background:var(--line-soft);color:var(--ink-soft)}

/* ---------- agent dashboard ---------- */
.emp-av.lg{width:52px;height:52px;flex-basis:52px;font-size:17px}
.emp-hero-btns{display:flex;gap:7px;flex-wrap:wrap}
.emp-hero-txt h2{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.emp-flag.ok{background:var(--brand-soft);color:var(--brand-deep)}
.emp-offer-wide{margin-bottom:16px;padding:11px 14px;font-size:13px}
.stat-value.fire{display:flex;align-items:center;gap:5px}

/* metric tiles */
.mtile-row{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.mtile{display:grid;gap:1px;padding:11px 12px;border-radius:var(--radius-sm);background:var(--line-soft)}
.mtile-l{font-size:10.8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.mtile-n{font-family:var(--font-head);font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mtile-n.tone-good{color:var(--green)}
.mtile-n.tone-bad{color:var(--red)}
.mtile-s{font-size:11.3px;color:var(--ink-faint)}

/* consistency heatmap: one column per week, one cell per day */
.heatmap{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px}
.week{display:grid;grid-template-rows:repeat(7,1fr);gap:4px}
.hcell{width:15px;height:15px;border-radius:4px;background:#eef0f3}
.hcell.green{background:var(--green)}
.hcell.orange{background:var(--orange)}
.hcell.red{background:var(--red)}
.hcell.off{background:#e4e7ec}
.hcell.future{background:#f7f8fa;border:1px dashed #e0e3e8}
/* Nothing to say about this day — before they started, or not over yet. */
.hcell.none{background:transparent}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center}

/* A small status dot, set beside a label. */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:7px;vertical-align:middle}
.dot-green{background:var(--green)}
.dot-amber,.dot-orange{background:var(--orange)}
.dot-red{background:var(--red)}
.dot-blue{background:#2563eb}
.dot-gray{background:var(--gray)}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px;background:var(--line)}
.legend i.green{background:var(--green)}
.legend i.orange{background:var(--orange)}
.legend i.red{background:var(--red-bg);box-shadow:inset 0 0 0 1.5px var(--red)}
.legend i.off{background:var(--line-soft);opacity:.45}

/* month calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dow{font-size:11px;font-weight:700;color:var(--ink-faint);text-align:center;text-transform:uppercase;letter-spacing:.05em}
.cal .cell{
  aspect-ratio:1;border-radius:10px;background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:12px;font-variant-numeric:tabular-nums;
}
.cal .dnum{font-weight:700}
.cal .dval{font-size:10px;color:var(--ink-soft)}
.cal .cell.green{background:var(--green-bg);border-color:#bbf0cf}
.cal .cell.orange{background:var(--orange-bg);border-color:#fde0ad}
.cal .cell.red{background:var(--red-bg);border-color:#f8c9c9}
.cal .cell.off{background:#f4f5f7;color:#9aa1ad}
/* Nothing to report — before they started, or the day isn't over. */
.cal .cell.none{background:var(--surface)}
.cal .cell.future{background:var(--surface);color:#cbd0d8}

.th-goal{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);opacity:.8;margin-top:1px}
.cell-goal{display:block;font-size:10.5px;color:var(--ink-faint);font-weight:600}
tr.is-weekend td{opacity:.5}

/* ============ OFFER LETTER (public) ============
   The letter is its own piece of stationery, not a CRM screen: its own
   palette sampled from the logo, its own typography, and A4 proportions so
   what the browser prints is what the candidate signed. These tokens are
   deliberately scoped rather than put on :root — nothing else in the CRM
   should inherit them. .ol-doc carries them as well as .ol-body, because the
   letter is also shown inside the admin chrome when reading a signed one,
   and it has to look like the same document there. */
.ol-body,.ol-doc{
  --ol-teal:#04635D;    /* logo primary */
  --ol-ink:#02423D;     /* deepest teal, headings */
  --ol-green:#0DAE74;   /* accent, used sparingly */
  --ol-copy:#24322F;    /* body text */
  --ol-muted:#6B7C79;   /* labels, footers */
  --ol-line:#DCE5E2;    /* hairlines */
  --ol-wash:#F4F8F6;    /* soft panel */
  --ol-sans:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --ol-text:"Lato","Segoe UI",Helvetica,Arial,sans-serif;
  --ol-script:"Lora",Georgia,"Times New Roman",serif;
}
/* The desk the letter sits on — only on the public page, never behind the
   admin chrome. */
.ol-body{background:#E9EEEC;font-family:var(--ol-text);color:var(--ol-copy)}
.ol-wrap{max-width:860px;margin:0 auto;padding:26px 16px 70px}

.ol-card{
  background:#fff;border:1px solid var(--ol-line);border-radius:10px;
  box-shadow:0 3px 22px rgba(4,66,61,.08);padding:22px 24px;margin-bottom:14px;
}

/* ---------- the document ---------- */
.ol-doc{
  background:#fff;
  padding:34px 40px 26px;
  margin-bottom:16px;
  box-shadow:0 3px 22px rgba(4,66,61,.13);
  position:relative;
  text-align:justify;
  hyphens:none;
  font-size:14.2px;
  line-height:1.62;
}
/* The brand edge from the letterhead: teal bar with a green tip. */
.ol-doc::before{
  content:"";position:absolute;top:0;left:0;height:5px;width:100%;
  background:linear-gradient(90deg,var(--ol-green) 0 92px,var(--ol-teal) 92px 100%);
}

.ol-masthead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:14px;border-bottom:1px solid var(--ol-line);margin-bottom:16px;
}
.ol-masthead img{height:42px;width:auto;display:block}
.ol-doc-title{text-align:right;font-family:var(--ol-sans)}
.ol-doc-title .t{
  font-size:13px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ol-ink);
}
.ol-doc-title .s{
  font-size:10.6px;font-weight:400;letter-spacing:.06em;
  color:var(--ol-muted);margin-top:4px;
}

.ol-meta{
  display:flex;justify-content:flex-end;gap:34px;text-align:right;
  padding:0 0 12px;border-bottom:1px solid var(--ol-line);margin-bottom:18px;
  font-family:var(--ol-sans);
}
.ol-meta .k{
  font-size:9.4px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ol-muted);margin-bottom:5px;
}
.ol-meta .v{
  font-size:12.6px;font-weight:500;color:var(--ol-ink);
  border-bottom:1px solid var(--ol-line);padding-bottom:4px;min-width:150px;
}

/* ---------- clauses ---------- */
.ol-clause{display:flex;gap:26px;margin-bottom:24px}
.ol-clause:last-child{margin-bottom:0}
.ol-num{
  flex:0 0 34px;font-family:var(--ol-sans);font-size:11.8px;font-weight:600;
  letter-spacing:.04em;color:var(--ol-green);
  padding-top:5px;border-top:2px solid var(--ol-green);
}
.ol-content{flex:1;min-width:0;border-top:1px solid var(--ol-line);padding-top:10px}
.ol-doc h2{
  text-align:left;margin:0 0 11px;font-family:var(--ol-sans);
  font-size:13px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ol-ink);
}
.ol-doc p{margin:0 0 11px;color:var(--ol-copy)}
.ol-doc p:last-child{margin-bottom:0}
.ol-lead{font-size:15px;color:#3B4A47;margin-bottom:22px}

/* Arrow bullets, drawn rather than typed so they keep the accent colour. */
.ol-doc ul{list-style:none;padding:0;margin:0 0 11px}
.ol-doc ul:last-child{margin-bottom:0}
.ol-doc ul li{position:relative;padding-left:25px;margin-bottom:8px}
.ol-doc ul li:last-child{margin-bottom:0}
.ol-doc ul li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:9px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h14M9.5 1.5L14.5 6l-5 4.5' fill='none' stroke='%230DAE74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center;
  background-size:contain;
}

/* ---------- details table ---------- */
.ol-details{width:100%;border-collapse:collapse}
.ol-details td{
  text-align:left;padding:7px 0;border-bottom:1px solid var(--ol-line);
  vertical-align:top;
}
.ol-details tr:last-child td{border-bottom:none;padding-bottom:0}
.ol-details td.k{
  width:170px;font-family:var(--ol-sans);font-size:11.8px;font-weight:500;
  letter-spacing:.03em;color:var(--ol-muted);text-transform:uppercase;
  padding-top:9px;
}

/* ---------- the headline rate ---------- */
.ol-rate{
  display:flex;align-items:baseline;gap:14px;text-align:left;
  background:var(--ol-wash);border-left:3px solid var(--ol-green);
  padding:15px 22px;margin:14px 0;
}
.ol-rate .amt{
  font-family:var(--ol-sans);font-size:28px;font-weight:600;
  letter-spacing:-.01em;color:var(--ol-teal);line-height:1;
}
.ol-rate .cap{
  font-family:var(--ol-sans);font-size:11.6px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ol-muted);
}

/* ---------- earnings ladder ---------- */
.ol-ladder{width:100%;border-collapse:collapse;margin-top:14px}
.ol-ladder th{
  font-family:var(--ol-sans);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ol-muted);text-align:left;
  padding:0 12px 7px 0;border-bottom:1.5px solid var(--ol-ink);
}
.ol-ladder td{
  text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--ol-line);
  font-variant-numeric:tabular-nums;
}
.ol-ladder tr:last-child td{border-bottom:none}
.ol-ladder th:last-child,.ol-ladder td:last-child{text-align:right;padding-right:0}
.ol-ladder td:last-child{font-family:var(--ol-sans);font-weight:600;color:var(--ol-teal)}

/* ---------- pull quote ---------- */
.ol-pull{
  border-left:3px solid var(--ol-green);padding:3px 0 3px 22px;margin-top:15px;
  font-size:14.6px;font-style:italic;color:var(--ol-ink);line-height:1.6;
}

/* ---------- signature block on the document ---------- */
.ol-sign-block{display:flex;gap:60px;margin-top:34px}
.ol-sign-block .col{flex:1;min-width:0}
.ol-party{
  text-align:left;font-family:var(--ol-sans);font-size:11.4px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ol-ink);
  padding-bottom:9px;border-bottom:1.5px solid var(--ol-ink);margin-bottom:20px;
}
.ol-auth{
  text-align:left;font-family:var(--ol-sans);font-size:11px;line-height:1.55;
  color:var(--ol-muted);margin:0 0 22px;
}
.ol-signatory{margin-bottom:26px}
.ol-signatory:last-child{margin-bottom:0}
.ol-sig-name{
  font-family:var(--ol-script);font-style:italic;font-size:21px;color:var(--ol-teal);
  padding-bottom:7px;border-bottom:1px solid #9BA9A6;margin-bottom:6px;
}
.ol-rule{border-bottom:1px solid #9BA9A6;margin-bottom:6px;height:32px}
.ol-rule.tight{height:22px}
.ol-rule-label{
  font-family:var(--ol-sans);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ol-muted);margin-bottom:20px;
}
.ol-signatory .ol-rule-label{margin-bottom:0}

.ol-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  border-top:1px solid var(--ol-line);padding-top:11px;margin-top:30px;
  font-family:var(--ol-sans);font-size:9.6px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ol-muted);
}
.ol-foot .dot{color:var(--ol-green)}

/* ---------- the signing form ---------- */
.ol-step{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.ol-step-n{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--ol-teal);color:#fff;font-family:var(--ol-sans);
  font-weight:600;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;
}
.ol-step h3{
  margin:0;font-family:var(--ol-sans);font-size:13px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ol-ink);
}
.ol-form .form-row label{font-family:var(--ol-sans)}
.ol-form .btn-primary{background:var(--ol-teal);border-color:var(--ol-teal)}
.ol-form .btn-primary:hover{background:var(--ol-ink)}

.ol-sign-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:16px}
.ol-sign-col{display:grid;gap:5px;padding-top:13px;border-top:2px solid var(--ol-line)}
.ol-sign-label{
  font-family:var(--ol-sans);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ol-muted);
}
.ol-sign-name{font-family:var(--ol-script);font-style:italic;font-size:20px;color:var(--ol-teal)}
.ol-sign-meta{font-size:11.8px;color:var(--ol-muted)}
.ol-sign-in{font-family:var(--ol-script);font-style:italic;font-size:19px;color:var(--ol-teal)}
.ol-agree{margin-bottom:16px;align-items:flex-start}
.ol-agree input{margin-top:2px}

/* ---------- the confirmation ---------- */
.ol-done{text-align:center;padding:40px 26px}
.ol-done-tick{
  width:52px;height:52px;margin:0 auto 15px;border-radius:50%;
  background:var(--ol-green);color:#fff;font-size:26px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.ol-done h2{margin-bottom:9px;font-family:var(--ol-sans);color:var(--ol-ink)}
.ol-done p{color:var(--ol-copy)}

/* Embedded in the admin view of a signed letter, where the card is the page. */
.ol-doc-embed{padding:0;border:0;box-shadow:none;background:none}
.ol-doc-embed::before{display:none}

@media (max-width:640px){
  .ol-doc{padding:24px 20px 20px;text-align:left}
  .ol-clause{gap:14px}
  .ol-num{flex-basis:26px}
  .ol-masthead{flex-direction:column;align-items:flex-start;gap:12px}
  .ol-doc-title{text-align:left}
  .ol-meta{justify-content:flex-start;text-align:left;gap:20px;flex-wrap:wrap}
  .ol-sign-block{flex-direction:column;gap:30px}
  .ol-details td.k{width:120px}
}

/* Print: the letter downloads as a clean PDF via the browser. */
@media print{
  .ol-form,.sidebar,.topbar,.subtabs,.btn{display:none!important}
  .ol-card,.panel{box-shadow:none;border:0;padding:0}
  .ol-wrap{max-width:none;padding:0}
  .ol-doc{box-shadow:none;padding:0;margin:0}
  .ol-clause,.ol-rate,.ol-ladder,.ol-sign-block,.ol-pull{
    break-inside:avoid;page-break-inside:avoid;
  }
  body,.ol-body{background:#fff}
  @page{size:A4;margin:14mm 16mm}
}

.textarea.code,textarea.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.4px;line-height:1.55;
}
.terms-grid{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ---------- channels & metrics config ---------- */
.gs-intro{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 18px;box-shadow:var(--shadow);margin-bottom:16px;
}
.gs-intro-ico{font-size:22px;line-height:1.2}
.gs-intro p{margin:4px 0 0;font-size:13.2px;max-width:640px}

.cfg-list{display:grid;gap:8px}
.cfg-row{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;background:var(--surface);
}
.cfg-row.is-off{opacity:.5}
.cfg-main{flex:1;min-width:0;display:grid;gap:7px}
.cfg-name{
  width:100%;border:0;background:none;padding:0;
  font-weight:700;font-size:14px;color:var(--ink);
}
.cfg-name:focus{outline:none;box-shadow:none;border-bottom:1.5px solid var(--brand)}
.cfg-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.cfg-icon-in{
  width:88px;padding:4px 8px;font-size:12px;border:1px solid var(--line);
  border-radius:6px;background:var(--surface);
}
.cfg-switch{display:inline-flex;align-items:center;gap:5px;font-size:11.8px;color:var(--ink-soft);cursor:pointer}
.cfg-switch input{width:14px;height:14px;accent-color:var(--brand);margin:0;cursor:pointer}
.cfg-note{font-size:11.5px;color:var(--brand-deep);background:var(--brand-soft);padding:5px 8px;border-radius:6px}
.cfg-lock{font-size:13px;opacity:.6;flex:0 0 auto}
.cfg-x{
  border:0;background:none;cursor:pointer;color:var(--ink-faint);
  font-size:17px;line-height:1;padding:2px 5px;border-radius:5px;
}
.cfg-x:hover{background:var(--red-bg);color:var(--red)}
.cfg-del{display:inline-block;margin:8px 5px 0 0}
.cfg-primary{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.cfg-add{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.cfg-add-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cfg-add-form .input{flex:1;min-width:120px}

/* ---------- sales navigator pool ---------- */
.sn-counts{display:flex;gap:16px;flex-wrap:wrap}
.sn-count{font-size:12px;color:var(--ink-faint);display:grid;text-align:center}
.sn-count b{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.sn-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
tr.sn-used{opacity:.6}

/* ---------- playbooks & alerts ---------- */
.doc-grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.doc-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.doc-card.is-alert{border-left:3px solid var(--red)}
.doc-card.is-pinned{box-shadow:0 0 0 1px var(--gold),var(--shadow)}
.doc-card-top{display:flex;gap:6px;flex-wrap:wrap}
.doc-title{font-family:var(--font-head);font-weight:800;font-size:15.5px;letter-spacing:-.015em;color:var(--ink)}
.doc-title:hover{color:var(--brand-d)}
.doc-excerpt{font-size:12.8px;color:var(--ink-soft);margin:0;line-height:1.55}
.doc-foot{display:flex;justify-content:space-between;gap:9px;font-size:11.5px;flex-wrap:wrap;margin-top:auto}
.doc-actions{display:flex;gap:5px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--line-soft)}
.doc-actions form{display:inline}

/* long-form body, used by playbooks and monthly reports */
.doc-body{font-size:14.2px;line-height:1.7;color:var(--ink-soft)}
.doc-body h3{font-size:15px;margin:20px 0 8px;color:var(--brand-deep)}
.doc-body h4{font-size:13.6px;margin:15px 0 6px}
.doc-body ul,.doc-body ol{padding-left:20px;display:grid;gap:5px;margin:0 0 12px}
.doc-body p{margin:0 0 11px}
.doc-body a{text-decoration:underline}
.doc-ack{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft)}
.doc-readers{margin:10px 0 0;padding-left:18px;font-size:12.8px;display:grid;gap:4px}

/* ---------- meetings ---------- */
.followup-banner{display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.followup-banner a{color:inherit;text-decoration:underline;font-weight:700}
.temp-dot{font-size:12px;margin-left:3px}
.join-link{
  display:inline-block;margin-top:3px;font-size:11.8px;font-weight:700;
  color:var(--brand-d);
}
.meeting-note{
  font-size:11.5px;margin-top:4px;padding-left:8px;
  border-left:2px solid var(--line);line-height:1.45;
}

/* ---------- reports daily grid ---------- */
.daygrid{display:flex;flex-wrap:wrap;gap:4px}
.dgcell{
  width:34px;height:34px;border-radius:6px;background:var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.dgcell.green{background:var(--green-bg)}
.dgcell.green .dg-v{color:#0f7a37}
.dgcell.orange{background:var(--orange-bg)}
.dgcell.orange .dg-v{color:#a86a06}
.dgcell.red{background:var(--red-bg)}
.dgcell.red .dg-v{color:#c62d2d}
.dgcell.off{opacity:.4}
.dg-d{font-size:9px;color:var(--ink-faint)}
.dg-v{font-size:11px;font-weight:800}

/* ---------- revenue chart ---------- */
.rev-chart{display:flex;align-items:flex-end;gap:5px;height:150px}
.rev-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.rev-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end}
.rev-bar{
  width:100%;border-radius:5px 5px 0 0;background:var(--brand-soft);
  border-top:2px solid var(--brand);transition:height .3s var(--ease);min-height:3px;
}
.rev-bar.is-now{background:var(--brand);border-top-color:var(--brand-d)}
.rev-lbl{font-size:10px;color:var(--ink-faint);font-weight:600}
.rev-foot{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--line-soft);font-size:12.3px;color:var(--ink-soft);
}
.rev-foot strong{font-variant-numeric:tabular-nums}

/* ---------- printable statement ---------- */
.stmt{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow)}
.stmt-head{display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.stmt-head>div:first-child{flex:1;min-width:250px}
.stmt-brand{font-family:var(--font-head);font-weight:900;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--brand-deep)}
.stmt-head h1{font-size:24px;margin-top:5px;letter-spacing:-.025em}
.stmt-head .muted{font-size:12.3px;margin-top:6px;max-width:420px}
.stmt-summary{display:grid;gap:5px;min-width:190px;font-size:12.6px}
.stmt-summary>div{display:flex;justify-content:space-between;gap:14px}
.stmt-summary strong{font-variant-numeric:tabular-nums}
.stmt-summary .is-total{border-top:1px solid var(--line);padding-top:5px;margin-top:3px;font-weight:800}

.stmt-table{width:100%;border-collapse:collapse;font-size:13.2px}
.stmt-table td{padding:6px 8px;vertical-align:top}
.stmt-table td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.stmt-section td{font-size:10.8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-deep);padding:17px 8px 5px}
.stmt-sub td{font-weight:700;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.stmt-open td,.stmt-close td{font-weight:700}
.stmt-close td{border-top:2px solid var(--ink);padding-top:11px;font-size:14px}
.stmt-profit td{font-weight:800;background:var(--brand-soft);padding-top:9px;padding-bottom:9px}
.stmt-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-faint)}

@media print{
  .no-print{display:none!important}
  .stmt{border:0;box-shadow:none;padding:0}
}

/* ---------- health checks ---------- */
.checks{display:grid;gap:11px}
.check-row{display:flex;gap:11px;align-items:flex-start}
.check-mark{
  width:21px;height:21px;flex:0 0 21px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12px;
}
.check-mark.is-ok{background:var(--green-bg);color:#0f7a37}
.check-mark.is-bad{background:var(--red-bg);color:#c62d2d}

/* ---------- activity log ---------- */
.act-list{display:grid}
.act-day{
  font-size:10.8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);padding:14px 15px 7px;background:var(--line-soft);
  border-bottom:1px solid var(--line);
}
.act-row{display:flex;gap:11px;padding:10px 15px;border-bottom:1px solid var(--line-soft)}
.act-row:hover{background:var(--line-soft)}
.act-icon{font-size:15px;line-height:1.3;flex:0 0 20px}
.act-body{flex:1;min-width:0}
.act-main{font-size:13.4px;color:var(--ink-soft)}
.act-main strong{color:var(--ink)}
.act-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:3px;font-size:11.3px;color:var(--ink-faint)}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}

/* ---------- role cards ---------- */
.role-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.role-card{border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;background:var(--line-soft)}
.role-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:5px}
.role-pages{margin:9px 0 0;padding-left:16px;font-size:11.8px;color:var(--ink-soft);display:grid;gap:4px}


/* ---------- search page ---------- */
.search-big{display:flex;gap:9px;margin-bottom:16px}
.search-big .input{flex:1;font-size:16px;padding:12px 15px}

.act-row.is-unread{background:var(--brand-soft)}
.act-row.is-unread:hover{background:#d9f4e8}
.act-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 8px;align-self:center}
a.act-row{color:inherit}
a.act-row:hover{text-decoration:none}

/* ---------- ⌘K palette ---------- */
.qsearch-trigger kbd{
  font-family:var(--font);font-size:10.5px;font-weight:700;
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-faint);
  background:var(--surface);
}
.qsearch-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(21,30,26,.4);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 18px 18px;
}
.qsearch-overlay[hidden]{display:none}
body.qsearch-on{overflow:hidden}
.qsearch-box{
  width:100%;max-width:560px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:qs-in .16s var(--ease);
}
@keyframes qs-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.qsearch-input-wrap{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line-soft)}
.qsearch-input{flex:1;border:0;background:none;font-size:16px;padding:0}
.qsearch-input:focus{outline:none;box-shadow:none}
.qsearch-input-wrap kbd{
  font-family:var(--font);font-size:10.5px;font-weight:700;
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--ink-faint);
}
.qsearch-results{max-height:min(52vh,420px);overflow-y:auto}
.qsearch-hint{padding:26px 16px;text-align:center;color:var(--ink-faint);font-size:13px;margin:0}
.qsearch-item{
  display:flex;align-items:center;gap:11px;padding:10px 15px;color:inherit;
  border-bottom:1px solid var(--line-soft);
}
.qsearch-item:last-child{border-bottom:0}
.qsearch-item:hover,.qsearch-item.is-active{background:var(--brand-soft);text-decoration:none}
.qsearch-ico{font-size:15px;flex:0 0 20px}
.qsearch-body{flex:1;min-width:0;display:grid}
.qsearch-title{font-weight:700;font-size:13.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsearch-sub{font-size:11.8px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qsearch-group{font-size:10.8px;font-weight:700;color:var(--ink-faint);white-space:nowrap}

/* ============ COMMAND CENTRE ============ */
.ceo-summary{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--grad-deep);color:#fff;border-radius:var(--radius-lg);
  padding:20px 22px;margin-bottom:14px;position:relative;overflow:hidden;
}
.ceo-summary::after{
  content:"";position:absolute;width:400px;height:400px;border-radius:50%;
  right:-140px;top:-180px;pointer-events:none;
  background:radial-gradient(circle,rgba(4,192,126,.4) 0%,rgba(4,192,126,0) 70%);
}
.ceo-summary>*{position:relative;z-index:1}
.ceo-sun{font-size:28px;line-height:1}
.ceo-greeting{
  font-family:var(--font-head);font-size:19px;font-weight:800;
  letter-spacing:-.015em;color:#ffffff;line-height:1.2;
}
.ceo-line{margin:6px 0 0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.88);max-width:760px}

.ceo-actions{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:14px}
.qa{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-weight:600;font-size:13.4px;color:var(--ink-soft);box-shadow:var(--shadow);
}
.qa:hover{border-color:var(--brand);color:var(--brand-deep);text-decoration:none}
.qa span{font-size:15px;color:var(--brand);font-weight:800}

.ceo-attention{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:var(--radius-lg);padding:13px 15px;margin-bottom:14px;box-shadow:var(--shadow);
}
.ceo-attention-head{
  font-size:10.8px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:9px;
}
.ceo-attention-list{display:flex;gap:8px;flex-wrap:wrap}
.ceo-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--line-soft);border-radius:999px;padding:6px 13px;
  font-size:12.8px;font-weight:600;color:var(--ink-soft);
}
.ceo-chip:hover{background:var(--brand-soft);color:var(--brand-deep);text-decoration:none}

.ceo-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));align-items:start}
.ceo-block{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:15px 17px;display:flex;flex-direction:column;
}
.ceo-block-head{font-family:var(--font-head);font-weight:800;font-size:14.5px;margin-bottom:11px}
.ceo-rows{display:grid;gap:1px}
.ceo-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13.4px;
}
.ceo-row:last-child{border-bottom:0}
.ceo-row span{color:var(--ink-soft);min-width:0}
.ceo-row em{font-style:normal;color:var(--ink-faint);font-size:11.5px}
.ceo-row strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.run-amber{color:#a86a06}
.run-red{color:#c62d2d}
.ceo-link{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:12.8px;font-weight:700;
}
.req{color:var(--red);font-weight:800}

/* =====================================================================
   CLIENT PORTAL (/portal)
   The only part of this app a paying client ever sees, so it is the part
   that has to look like it was worth the money. A deep teal band carries
   the brand and who they are; everything below sits on sand in white
   cards, one clear thing per card.
   ===================================================================== */
.pt-body{
  background:
    radial-gradient(820px 420px at 8% -6%, rgba(4,192,126,.10), transparent 60%),
    radial-gradient(680px 380px at 96% 0%, rgba(209,161,83,.12), transparent 58%),
    var(--canvas);
  min-height:100vh;
}

/* ---------- the band ---------- */
.pt-band{background:var(--grad-deep);color:#fff;position:relative;overflow:hidden}
/* A soft emerald bloom so the teal is not a flat slab. */
.pt-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 260px at 88% -30%, rgba(4,192,126,.34), transparent 62%);
}
.pt-band-in{max-width:1020px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

.pt-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0 0}
.pt-brand{
  display:inline-flex;align-items:center;gap:11px;
  font-weight:800;font-size:16px;color:#fff;letter-spacing:-.005em;
}
.pt-brand:hover{text-decoration:none;color:#fff}
.pt-mark{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;
}
.pt-who{display:flex;align-items:center;gap:11px}
.pt-who-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.86)}
.pt-signout{
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:5px 13px;
  transition:.14s var(--ease);
}
.pt-signout:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}

/* Who they are, inside the band. */
.pt-id{display:flex;align-items:center;gap:16px;padding:26px 0 24px}
.pt-avatar{
  width:52px;height:52px;border-radius:16px;flex:none;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:800;letter-spacing:.02em;
}
.pt-id-main{min-width:0;flex:1}
.pt-id-name{
  font-family:var(--font-head);font-size:22px;font-weight:800;
  letter-spacing:-.025em;line-height:1.2;
}
.pt-id-sub{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:9px;font-size:12.8px;color:rgba(255,255,255,.72);
}
.pt-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;color:#fff;
}
.pt-chip.is-gold{background:rgba(209,161,83,.26);border-color:rgba(230,190,126,.4)}

/* ---------- tabs ---------- */
.pt-tabs{overflow-x:auto;scrollbar-width:none}
.pt-tabs::-webkit-scrollbar{display:none}
.pt-tabs-in{
  max-width:1020px;margin:0 auto;padding:0 20px 16px;
  display:flex;gap:8px;
}
.pt-tab{
  padding:10px 17px;border-radius:999px;white-space:nowrap;
  font-size:13.4px;font-weight:700;color:rgba(255,255,255,.74);
  border:1px solid transparent;transition:.14s var(--ease);
}
.pt-tab:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.pt-tab.active{background:#fff;color:var(--brand-deep);text-decoration:none}
.pt-tab-n{
  display:inline-block;margin-left:6px;min-width:17px;padding:0 5px;
  border-radius:999px;background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
}
.pt-tab.active .pt-tab-n{background:var(--brand);color:#fff}

.pt-main{max-width:1020px;margin:0 auto;padding:22px 20px 56px}
.pt-foot{
  max-width:1020px;margin:0 auto;padding:8px 20px 40px;
  font-size:11.8px;color:var(--ink-faint);text-align:center;
}
.pt-foot a{font-weight:600}

/* ---------- page heading ---------- */
.pt-hero{margin-bottom:18px}
.pt-hero h1{font-size:25px;letter-spacing:-.028em;color:var(--brand-deep)}
.pt-hero p{margin:6px 0 0;font-size:14.5px;color:var(--ink-soft);max-width:620px}

/* ---------- headline card: progress + what's next ---------- */
.pt-head-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px 24px;margin-bottom:16px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.pt-ring{position:relative;width:104px;height:104px;flex:none}
.pt-ring svg{width:104px;height:104px;transform:rotate(-90deg);display:block}
.pt-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.pt-ring .track{stroke:var(--line-soft)}
.pt-ring .fill{stroke:url(#ptgrad);transition:stroke-dashoffset .7s var(--ease)}
.pt-ring-mid{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.pt-ring-pct{font-size:23px;font-weight:900;letter-spacing:-.03em;color:var(--brand-deep);line-height:1}
.pt-ring-cap{font-size:9.6px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:3px}
.pt-head-main{flex:1;min-width:220px}
.pt-head-main h2{font-size:18px;letter-spacing:-.02em;margin-bottom:6px;color:var(--brand-deep)}
.pt-head-main p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.55}
.pt-head-cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}

/* ---------- the journey ---------- */
.pt-journey{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:20px 24px 22px;margin-bottom:16px;
}
.pt-journey-t{
  font-size:10.8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px;
}
.pt-steps{display:flex;gap:0;position:relative}
.pt-step{flex:1;min-width:0;position:relative;padding-right:8px}
/* The rail between the markers. */
.pt-step::before{
  content:"";position:absolute;left:0;right:0;top:11px;height:2px;
  background:var(--line);z-index:0;
}
.pt-step:first-child::before{left:11px}
.pt-step:last-child::before{right:calc(100% - 13px)}
.pt-step.is-done::before,.pt-step.is-now::before{background:var(--brand)}
.pt-step-dot{
  position:relative;z-index:1;width:23px;height:23px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--ink-faint);
}
.pt-step.is-done .pt-step-dot{background:var(--brand);border-color:var(--brand);color:#fff}
.pt-step.is-now .pt-step-dot{
  background:var(--surface);border-color:var(--brand);color:var(--brand-d);
  box-shadow:0 0 0 4px rgba(4,192,126,.16);
}
.pt-step-l{font-size:12.3px;font-weight:700;color:var(--ink);margin-top:10px;line-height:1.35}
.pt-step-s{font-size:11.3px;color:var(--ink-faint);margin-top:2px;line-height:1.4}
.pt-step:not(.is-done):not(.is-now) .pt-step-l{color:var(--ink-faint);font-weight:600}
.pt-step.is-now .pt-step-l{color:var(--brand-deep)}

/* ---------- stat tiles ---------- */
.pt-stats{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  margin-bottom:16px;
}
.pt-stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:15px 16px;position:relative;overflow:hidden;
}
.pt-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.pt-stat.is-green::before{background:var(--green)}
.pt-stat.is-orange::before{background:var(--orange)}
.pt-stat.is-gold::before{background:var(--gold)}
.pt-stat.is-teal::before{background:var(--brand-deep)}
.pt-stat-l{
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:7px;
}
.pt-stat-v{
  font-family:var(--font-head);font-size:24px;font-weight:800;
  letter-spacing:-.03em;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pt-stat-v.is-text{font-size:15.5px;letter-spacing:-.015em;line-height:1.3}
.pt-stat-s{font-size:11.8px;color:var(--ink-faint);margin-top:4px}

/* ---------- panels ---------- */
.pt-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.pt-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--line-soft);
}
.pt-card-head h2{font-size:15.5px;letter-spacing:-.015em;color:var(--brand-deep)}
.pt-card-head .sub{font-size:11.8px;color:var(--ink-faint);font-weight:600}
.pt-card-body{padding:18px 20px}
.pt-card-body.is-flush{padding:0}
.pt-grid{display:grid;gap:16px;grid-template-columns:1.35fr 1fr;align-items:start}
.pt-grid > *{min-width:0}

/* ---------- a piece of work ---------- */
.pt-work{display:grid}
.pt-item{border-bottom:1px solid var(--line-soft);transition:background .14s var(--ease)}
.pt-item:last-child{border-bottom:0}
.pt-item:hover{background:var(--line-soft)}
.pt-item.is-open{background:var(--brand-soft)}
.pt-item.is-open:hover{background:var(--brand-soft)}
.pt-item-row{display:flex;align-items:flex-start;gap:12px;padding:14px 20px}
.pt-dot{
  width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px;background:var(--gray);
}
.pt-dot.is-ok{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.pt-dot.is-done{background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pt-dot.is-wip{background:var(--orange);box-shadow:0 0 0 3px var(--orange-bg)}
.pt-dot.is-hold{background:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.pt-item-main{flex:1;min-width:0}
.pt-item-name{font-weight:700;font-size:14px;color:var(--ink);line-height:1.4}
.pt-item-meta{font-size:11.8px;color:var(--ink-faint);margin-top:3px}
.pt-item-detail{
  margin-top:9px;padding:10px 13px;border-radius:var(--radius-sm);
  background:var(--line-soft);border-left:3px solid var(--brand);
  font-size:13.2px;color:var(--ink-soft);line-height:1.6;word-break:break-word;
}
.pt-item.is-open .pt-item-detail{background:rgba(255,255,255,.7)}
.pt-item-detail a{font-weight:600;word-break:break-all}
.pt-feedback{
  margin-top:9px;padding:10px 13px;border-radius:var(--radius-sm);
  background:var(--surface);border-left:3px solid var(--gold);
  font-size:12.8px;color:var(--ink-soft);line-height:1.55;
}
.pt-feedback strong{
  display:block;font-size:10.3px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px;
}
.pt-review{padding:0 20px 15px 41px}
.pt-review .textarea{font-size:13.2px;min-height:62px;background:var(--surface)}
.pt-review-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:9px;flex-wrap:wrap}

/* ---------- callouts ---------- */
.pt-callout{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid #cdf0e1;border-left:4px solid var(--brand);
  border-radius:var(--radius-lg);padding:15px 18px;margin-bottom:16px;box-shadow:var(--shadow);
}
.pt-callout.is-gold{border-color:#eddcbd;border-left-color:var(--gold)}
.pt-callout.is-orange{border-color:#f6dfb4;border-left-color:var(--orange)}
.pt-callout strong{color:var(--brand-deep);font-size:14.5px}
.pt-callout .muted{font-size:12.8px;margin-top:2px}

/* ---------- filters ---------- */
.pt-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.pt-filter{
  padding:6px 13px;border-radius:999px;font-size:12.3px;font-weight:700;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);
  cursor:pointer;transition:.14s var(--ease);
}
.pt-filter:hover{border-color:var(--brand);color:var(--brand-d);text-decoration:none}
.pt-filter.active{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff}
.pt-filter-n{opacity:.65;font-weight:600;margin-left:3px}

/* ---------- invoices ---------- */
.pt-inv{display:grid}
.pt-inv-row{
  display:flex;align-items:center;gap:14px;padding:13px 20px;
  border-bottom:1px solid var(--line-soft);
}
.pt-inv-row:last-child{border-bottom:0}
.pt-inv-main{flex:1;min-width:0}
.pt-inv-n{font-weight:700;font-size:13.6px}
.pt-inv-s{font-size:11.8px;color:var(--ink-faint);margin-top:2px}
.pt-inv-amt{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Every row opens the invoice itself, so it has to behave like the link it
   is: the whole row, not a small "view" word at the end of it. */
.pt-inv-row.is-link{color:inherit;text-decoration:none}
.pt-inv-row.is-link:hover{background:var(--line-soft);text-decoration:none}
.pt-inv-go{color:var(--ink-faint);font-size:19px;line-height:1;flex:none}
.pt-inv-row.is-link:hover .pt-inv-go{color:var(--brand-deep)}
.pt-callout-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-pay{
  font-size:13.6px;line-height:1.7;color:var(--ink);
  background:var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px;
}

/* ---------- reports ---------- */
.pt-report-list{display:grid}
.pt-report-row{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--line-soft);color:var(--ink);
}
.pt-report-row:last-child{border-bottom:0}
.pt-report-row:hover{background:var(--line-soft);text-decoration:none}
.pt-report-row.active{background:var(--brand-soft)}
.pt-report-m{font-weight:700;font-size:13.4px}
.pt-report-t{font-size:11.8px;color:var(--ink-faint);margin-top:2px}

/* ---------- account ---------- */
.pt-acct{display:grid;gap:16px;grid-template-columns:1fr 1fr;align-items:start}
.pt-acct > *{min-width:0}
.pt-kv{display:grid;gap:11px}
.pt-kv-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline}
.pt-kv-l{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.pt-kv-v{font-size:13.8px;font-weight:600;word-break:break-word}
.pt-help{
  background:var(--brand-soft);border:1px solid #cdf0e1;border-radius:var(--radius);
  padding:14px 16px;font-size:13.2px;color:var(--ink-soft);line-height:1.6;
}
.pt-help strong{color:var(--brand-deep)}

/* ---------- empties ---------- */
.pt-empty{text-align:center;padding:38px 24px}
.pt-empty-art{
  width:52px;height:52px;margin:0 auto 12px;border-radius:16px;
  background:var(--line-soft);display:flex;align-items:center;justify-content:center;font-size:23px;
}
.pt-empty h3{font-size:15px;margin-bottom:5px;color:var(--ink)}
.pt-empty p{font-size:13.2px;color:var(--ink-faint);margin:0;max-width:340px;margin-inline:auto}

@media (max-width:860px){
  .pt-grid,.pt-acct{grid-template-columns:1fr}
  /* The journey turns into a vertical list — five labels never fit a phone. */
  .pt-steps{flex-direction:column;gap:0}
  .pt-step{padding:0 0 16px 30px}
  .pt-step:last-child{padding-bottom:0}
  .pt-step::before{left:11px;right:auto;top:23px;bottom:0;width:2px;height:auto}
  .pt-step:last-child::before{display:none}
  .pt-step:first-child::before{left:11px;top:23px}
  .pt-step-dot{position:absolute;left:0;top:0}
  .pt-step-l{margin-top:1px}
}
@media (max-width:560px){
  .pt-band-in,.pt-tabs-in,.pt-main{padding-left:14px;padding-right:14px}
  .pt-id{padding:16px 0 14px}
  .pt-id-name{font-size:19px}
  .pt-avatar{width:44px;height:44px;border-radius:14px;font-size:16px}
  /* Keep the ring beside the sentence rather than letting it wrap onto a
     row of its own, which leaves half the card empty on a phone. */
  .pt-head-card{padding:18px;gap:15px;flex-wrap:nowrap;align-items:flex-start}
  .pt-head-main{min-width:0}
  .pt-ring,.pt-ring svg{width:74px;height:74px}
  .pt-ring-pct{font-size:17px}
  .pt-ring-cap{font-size:8.4px;letter-spacing:.07em}
  .pt-head-main h2{font-size:16px}
  .pt-hero h1{font-size:22px}
  .pt-card-body{padding:15px}
  .pt-item-row,.pt-inv-row,.pt-report-row{padding-left:15px;padding-right:15px}
  .pt-review{padding:0 15px 14px 15px}
  .pt-kv-row{grid-template-columns:1fr;gap:2px}
}

/* =====================================================================
   CLIENT ↔ TEAM MESSAGES
   The same thread drawn twice: the client sees it at /portal/messages,
   we see it at /admin/client-chat. One set of rules so a bubble looks
   the same on both screens and neither side drifts.
   ===================================================================== */
.pt-chat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  display:flex;flex-direction:column;
  /* Tall enough to feel like a conversation, short enough that the composer
     never leaves the screen. */
  height:min(620px,calc(100vh - 300px));min-height:420px;
}
.pt-chat.is-admin{height:100%;min-height:0;box-shadow:none;border:0;border-radius:0}

.pt-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line-soft);
  background:var(--surface);flex:none;
}
.pt-chat-who{display:flex;align-items:center;gap:11px;min-width:0}
.pt-chat-title{font-weight:800;font-size:14.5px;color:var(--brand-deep);letter-spacing:-.01em}
.pt-chat-sub{font-size:11.8px;color:var(--ink-faint);margin-top:2px}
.pt-chat-status{font-size:12px;font-weight:700;color:var(--red)}

/* Stacked initials, so it reads as "a team" rather than one person. */
.pt-chat-faces{display:flex;flex:none}
.pt-face{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--grad-deep);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  border:2px solid var(--surface);
}
.pt-chat-faces .pt-face + .pt-face{margin-left:-11px}
.pt-chat-faces .pt-face:nth-child(2){background:linear-gradient(135deg,#04c07e,#03a36a)}
.pt-chat-faces .pt-face:nth-child(3){background:linear-gradient(135deg,#d1a153,#b8873a)}

/* ---------- the scroller ---------- */
.pt-chat-scroll{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(4,192,126,.045), transparent 70%),
    var(--canvas);
}
.pt-chat-list{display:flex;flex-direction:column;gap:10px;padding:18px}

.pt-chat-day{display:flex;align-items:center;gap:11px;margin:8px 0 4px}
.pt-chat-day::before,.pt-chat-day::after{content:"";flex:1;height:1px;background:var(--line)}
.pt-chat-day span{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;
}

/* ---------- one bubble ---------- */
.pt-msg{display:flex;align-items:flex-end;gap:9px;max-width:78%}
.pt-msg.is-mine{margin-left:auto;flex-direction:row-reverse}
.pt-msg-face{
  width:28px;height:28px;border-radius:50%;flex:none;margin-bottom:2px;
  background:var(--grad-deep);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;
}
.pt-msg-body{
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;padding:9px 13px 7px;
  box-shadow:var(--shadow);min-width:0;
}
.pt-msg.is-mine .pt-msg-body{
  background:var(--grad-deep);border-color:transparent;color:#fff;
  border-radius:16px 16px 5px 16px;
}
.pt-msg-author{
  font-size:10.6px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-d);margin-bottom:3px;
}
.pt-msg.is-mine .pt-msg-author{color:rgba(255,255,255,.68)}
.pt-msg-text{font-size:14px;line-height:1.55;word-break:break-word;white-space:normal}
.pt-msg-time{
  font-size:10.4px;color:var(--ink-faint);margin-top:4px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.pt-msg.is-mine .pt-msg-time{color:rgba(255,255,255,.6)}
/* In flight: shown immediately, dimmed until the server confirms it. */
.pt-msg.is-pending .pt-msg-body{opacity:.62}

.pt-chat-empty{text-align:center;margin:auto;padding:30px 20px}
.pt-chat-empty h3{font-size:15px;margin-bottom:5px}
.pt-chat-empty p{font-size:13.2px;color:var(--ink-faint);margin:0;max-width:300px;margin-inline:auto}

/* ---------- the composer ---------- */
.pt-chat-form{
  display:flex;align-items:flex-end;gap:9px;flex:none;
  padding:12px 14px;border-top:1px solid var(--line);background:var(--surface);
}
.pt-chat-input{
  flex:1;min-width:0;resize:none;overflow-y:auto;max-height:150px;
  border:1px solid var(--line);border-radius:20px;
  padding:10px 15px;font-size:14px;line-height:1.5;
  background:var(--line-soft);color:var(--ink);
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.pt-chat-input:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:var(--ring)}
.pt-chat-send{
  width:40px;height:40px;border-radius:50%;flex:none;border:0;cursor:pointer;
  background:var(--grad);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .1s var(--ease),opacity .14s var(--ease);
}
.pt-chat-send svg{width:17px;height:17px}
.pt-chat-send:hover{transform:scale(1.06)}
.pt-chat-send:active{transform:scale(.96)}
.pt-chat-send[disabled]{opacity:.45;pointer-events:none}
.pt-chat-hint{
  font-size:11px;color:var(--ink-faint);text-align:center;
  padding:9px 14px 0;
}
.pt-chat.is-admin .pt-chat-hint{padding-bottom:10px;background:var(--surface)}

/* ---------- what a message carries ---------- */
/* A bubble that is only a picture should be the picture, not a picture in a
   box: the padding comes off and the media fills the corner radius. */
.pt-msg-body.is-media{padding:5px 5px 4px}
.pt-msg-body.is-media .pt-msg-time{padding:0 5px 2px}

.pt-file-img{display:block;margin-bottom:5px;border-radius:11px;overflow:hidden;max-width:260px}
.pt-file-img:last-of-type{margin-bottom:0}
.pt-file-img img{display:block;width:100%;height:auto;max-height:300px;object-fit:cover}
.pt-file-img:hover{opacity:.94;text-decoration:none}

.pt-file-video{display:block;max-width:280px;width:100%;border-radius:11px;margin-bottom:5px}

/* Voice notes. The native player, sized so it does not dwarf the bubble. */
.pt-file-audio{display:block;width:250px;max-width:100%;height:38px;margin:2px 0 4px}
.pt-msg.is-mine .pt-file-audio{filter:invert(1) hue-rotate(180deg);opacity:.92}

.pt-file-doc{
  display:flex;align-items:center;gap:10px;margin-bottom:5px;
  background:var(--line-soft);border-radius:10px;padding:9px 12px;
  color:var(--ink);text-decoration:none;max-width:270px;
}
.pt-msg.is-mine .pt-file-doc{background:rgba(255,255,255,.15);color:#fff}
.pt-file-doc:hover{text-decoration:none;filter:brightness(.97)}
.pt-file-ico{font-size:17px;flex:none}
.pt-file-meta{min-width:0;display:flex;flex-direction:column}
.pt-file-name{
  font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pt-file-size{font-size:11px;opacity:.66;margin-top:1px}

/* ---------- the composer's extra controls ---------- */
.pt-chat-tool{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:none;border:0;cursor:pointer;color:var(--ink-faint);
  display:inline-flex;align-items:center;justify-content:center;
  transition:.14s var(--ease);
}
.pt-chat-tool svg{width:19px;height:19px}
.pt-chat-tool:hover{background:var(--line-soft);color:var(--brand-d)}

/* What is queued to go with the next message. */
.pt-tray{
  display:flex;gap:8px;flex-wrap:wrap;flex:none;
  padding:11px 14px 0;background:var(--surface);
}
.pt-tray-item{
  display:inline-flex;align-items:center;gap:8px;max-width:230px;
  background:var(--line-soft);border:1px solid var(--line);
  border-radius:10px;padding:5px 8px 5px 5px;font-size:12.3px;
}
.pt-tray-item img{width:30px;height:30px;border-radius:7px;object-fit:cover;flex:none}
.pt-tray-ico{
  width:30px;height:30px;border-radius:7px;flex:none;font-size:15px;
  background:var(--surface);display:inline-flex;align-items:center;justify-content:center;
}
.pt-tray-name{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ink-soft);
}
.pt-tray-x{
  flex:none;width:19px;height:19px;border-radius:50%;border:0;cursor:pointer;
  background:var(--gray);color:#fff;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.pt-tray-x:hover{background:var(--red)}

/* Dropping a file onto the thread. */
.pt-chat-scroll.is-drop{outline:2px dashed var(--brand);outline-offset:-8px}

/* ---------- recording ---------- */
.pt-rec{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:12px 14px;border-top:1px solid var(--line);background:var(--surface);
}
.pt-rec-dot{
  width:11px;height:11px;border-radius:50%;background:var(--red);flex:none;
  animation:pt-rec-pulse 1.3s ease-in-out infinite;
}
.pt-rec-time{
  font-size:14px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:42px;
}
@keyframes pt-rec-pulse{0%,100%{opacity:1}50%{opacity:.25}}
/* The live level while recording. Bars that move are the difference between
   "it is recording" and "it can hear me", which are not the same thing. */
.pt-rec-meter{display:inline-flex;align-items:flex-end;gap:2px;height:20px;flex:none}
.pt-rec-meter i{
  width:3px;height:5px;border-radius:2px;background:var(--gray);
  transition:height .08s linear,background .08s linear;
}
.pt-rec-meter i.on{background:var(--brand)}
.pt-rec-meter i:nth-child(n+3).on{height:10px}
.pt-rec-meter i:nth-child(n+5).on{height:14px}
.pt-rec-meter i:nth-child(n+8).on{height:18px}
.pt-rec-meter i:nth-child(n+11).on{height:20px;background:var(--orange)}

.pt-rec-hint{
  flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--green);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pt-rec-hint.is-quiet{color:var(--orange)}

/* Choosing an input, offered the moment a note comes back silent. */
.pt-mic{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(21,30,26,.45);
}
.pt-mic-box{
  width:100%;max-width:430px;
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px 24px;
}
.pt-mic-box h3{font-size:16px;margin:0 0 4px;color:var(--brand-deep)}
.pt-mic-note{font-size:12.3px;color:var(--ink-faint);margin:0 0 14px}
.pt-mic-box .select{width:100%}
.pt-mic-test{
  display:flex;align-items:center;gap:11px;margin-top:14px;
  background:var(--line-soft);border-radius:var(--radius);padding:11px 13px;
}
.pt-mic-say{font-size:12.5px;font-weight:600;color:var(--ink-soft);flex:1;min-width:0;line-height:1.4}
.pt-mic-say.is-good{color:var(--green)}
.pt-mic-say.is-bad{color:var(--red)}
.pt-mic-btns{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}

@media (max-width:560px){
  /* On a phone the row runs out of space long before the hint does. */
  .pt-rec-hint{display:none}
  .pt-rec-meter{height:16px}
  .pt-rec-meter i:nth-child(n+11).on{height:16px}
}

@media (max-width:560px){
  .pt-file-img,.pt-file-video{max-width:200px}
  .pt-file-audio{width:190px}
  .pt-file-doc{max-width:210px}
  .pt-chat-tool{width:32px;height:32px}
}
/* ---------- the voice-note player ----------
   Same markup and behaviour as the team chat's, so a note looks the same
   whichever side of the glass it is played on. */
.pt-msg .voice,.pt-dock .voice{
  display:flex;align-items:center;gap:8px;margin:2px 0 4px;min-width:210px;
}
.voice audio{display:none}
.v-play{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;padding-left:2px;transition:.12s var(--ease);
}
.voice.playing .v-play{padding-left:0}
.v-play svg{width:14px;height:14px}
.v-play:hover{filter:brightness(1.08)}
.v-wave{
  position:relative;flex:1;min-width:0;height:26px;
  display:flex;align-items:center;gap:1.5px;cursor:pointer;
}
.v-wave i{flex:1;min-width:1.5px;background:var(--ink-faint);opacity:.42;border-radius:2px;transition:.1s}
.v-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--brand);opacity:.28;border-radius:3px;
  pointer-events:none;transition:width .1s linear;
}
.v-time{
  flex:0 0 auto;min-width:30px;font-size:11px;
  font-variant-numeric:tabular-nums;color:var(--ink-faint);
}
.v-rate{
  flex:0 0 auto;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:2px 7px;
  font-size:10.5px;font-weight:800;color:var(--ink-soft);
  cursor:pointer;font-family:inherit;
}
.v-rate:hover{border-color:var(--brand);color:var(--brand-d)}
/* On our own teal bubble the bars need to carry against the dark. */
.pt-msg.is-mine .v-wave i{background:rgba(255,255,255,.75);opacity:.55}
.pt-msg.is-mine .v-fill{background:#fff;opacity:.34}
.pt-msg.is-mine .v-time{color:rgba(255,255,255,.72)}
.pt-msg.is-mine .v-play{background:#fff;color:var(--brand-deep)}
.pt-msg.is-mine .v-rate{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.pt-msg.is-mine .v-rate:hover{background:rgba(255,255,255,.26);color:#fff}
/* A voice note is the whole message — it needs no media padding treatment. */
.pt-msg-body.is-media:has(.voice){padding:7px 10px 4px}

/* =====================================================================
   THE CHAT DOCK
   A bubble in the corner of every portal page, and the thread in a panel
   beside it. A client with one question should not have to find their way
   to a tab first — and from the panel, one click opens the full page.
   ===================================================================== */
.pt-dock-btn{
  position:fixed;right:22px;bottom:22px;z-index:55;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,70,67,.34);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.pt-dock-btn svg{width:24px;height:24px}
.pt-dock-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,70,67,.4)}
.pt-dock-btn:active{transform:translateY(0)}
.pt-dock-btn.is-open .ico-chat{display:none}
.pt-dock-btn:not(.is-open) .ico-close{display:none}
.pt-dock-n{
  position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;padding:0 6px;
  border-radius:999px;background:var(--brand);color:#fff;
  border:2px solid var(--canvas);
  font-size:11px;font-weight:800;line-height:17px;
}

.pt-dock{
  position:fixed;right:22px;bottom:90px;z-index:56;
  width:min(380px,calc(100vw - 32px));
  height:min(540px,calc(100vh - 140px));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(21,30,26,.24);
  overflow:hidden;
  animation:pt-dock-in .2s var(--ease);
}
@keyframes pt-dock-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.pt-dock-head{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:13px 15px;background:var(--grad-deep);color:#fff;
}
.pt-dock-head .pt-chat-faces .pt-face{border-color:rgba(255,255,255,.22)}
.pt-dock-t{font-size:14px;font-weight:800;letter-spacing:-.01em}
.pt-dock-s{font-size:11.5px;color:rgba(255,255,255,.72);margin-top:1px}
.pt-dock-head-main{flex:1;min-width:0}
.pt-dock-full{
  flex:none;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;
  border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;text-decoration:none;
}
.pt-dock-full:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}

/* The panel is the fixed height; everything inside it flexes to fit, or the
   composer ends up below the bottom of the screen. */
.pt-dock-body{display:flex;flex-direction:column;flex:1;min-height:0}
.pt-dock .pt-chat{
  flex:1;min-height:0;height:auto;max-height:none;
  border:0;border-radius:0;box-shadow:none;
}
.pt-dock .pt-chat-head{display:none}       /* the dock has its own */
.pt-dock .pt-chat-hint{display:none}
.pt-dock .pt-chat-list{padding:14px;gap:9px}
.pt-dock .pt-msg{max-width:90%}
.pt-dock .pt-file-img,.pt-dock .pt-file-video{max-width:190px}
.pt-dock .voice{min-width:170px}

@media (max-width:560px){
  /* On a phone the panel is the screen — a 380px card floating over a
     375px viewport is just a worse full page. */
  .pt-dock{
    right:0;left:0;bottom:0;top:0;width:auto;height:auto;
    border-radius:0;border:0;
  }
  .pt-dock-btn{right:16px;bottom:16px;width:52px;height:52px}
}
/* ---------- the live nudge ---------- */
.pt-live-pill{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--brand-deep);color:#fff;border:0;cursor:pointer;
  border-radius:999px;padding:10px 16px;font-size:13px;font-weight:700;
  box-shadow:0 10px 30px rgba(0,70,67,.3);
  animation:pt-pill-in .3s var(--ease);
}
.pt-live-pill:hover{background:var(--brand-deep-d)}
.pt-live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none;
  animation:pt-pulse 1.8s ease-in-out infinite;
}
.pt-live-go{
  background:rgba(255,255,255,.16);border-radius:999px;padding:2px 10px;
  font-size:11.5px;font-weight:800;
}
@keyframes pt-pill-in{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes pt-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* =====================================================================
   CLIENT MESSAGES, OUR SIDE (/admin/client-chat)
   A list of threads and the open one, side by side.
   ===================================================================== */
.cc{
  display:grid;grid-template-columns:308px 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;
  height:calc(100vh - var(--topbar-h) - 62px);min-height:480px;
}
.cc-side{
  border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
  background:var(--surface);
}
.cc-side-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line-soft);flex:none;
}
.cc-side-head h2{font-size:14.5px;letter-spacing:-.015em}
.cc-threads{flex:1;min-height:0;overflow-y:auto}

.cc-thread{
  display:flex;align-items:center;gap:11px;padding:11px 15px;
  border-bottom:1px solid var(--line-soft);color:var(--ink);
  transition:background .12s var(--ease);
}
.cc-thread:hover{background:var(--line-soft);text-decoration:none}
.cc-thread.active{background:var(--brand-soft)}
.cc-thread.active .cc-thread-name{color:var(--brand-deep)}
.cc-thread.is-unread .cc-thread-name{font-weight:800}
.cc-thread.is-unread .cc-thread-last{color:var(--ink);font-weight:600}
.cc-face{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--grad-deep);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
}
.cc-face.is-lg{width:38px;height:38px;font-size:13px}
.cc-thread-main{flex:1;min-width:0}
.cc-thread-top{display:flex;align-items:baseline;gap:8px}
.cc-thread-name{font-size:13.4px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-thread-when{font-size:10.8px;color:var(--ink-faint);white-space:nowrap}
.cc-thread-last{
  font-size:12.2px;color:var(--ink-faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cc-you{font-weight:700;color:var(--ink-soft)}
.cc-badge{
  flex:none;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:10.6px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.cc-main{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--surface)}

/* The same rows on the Clients page, where they are the whole panel rather
   than a column beside a thread. */
.cc-threads.is-page{overflow:visible;max-height:none}
.cc-threads.is-page .cc-thread{padding:13px 18px}

@media (max-width:900px){
  /* The list and the thread cannot share a phone. Showing a thread hides
     the list; the back link is the client name in the header. */
  .cc{grid-template-columns:1fr;height:auto;min-height:0}
  .cc-side{border-right:0;border-bottom:1px solid var(--line);max-height:280px}
  .cc-main{min-height:70vh}
}
@media (max-width:560px){
  .pt-chat{height:min(560px,calc(100vh - 250px));min-height:340px}
  .pt-chat-list{padding:14px}
  .pt-msg{max-width:88%}
  .pt-live-pill{left:14px;right:14px;bottom:14px;transform:none;justify-content:center}
  @keyframes pt-pill-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
/* The note a client left on a deliverable, shown back on the admin side.
   Same shape as the portal's .pt-feedback, so both read alike. */
.deliv-feedback{
  padding:9px 11px;border-radius:var(--radius-sm);
  background:var(--surface);border-left:3px solid var(--gold);
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;
}
.deliv-feedback strong{
  display:block;font-size:10.8px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px;
}

/* The thing the client actually opens. Long URLs are the norm here, so it
   truncates rather than stretching the column. */
.deliv-link{
  margin-top:5px;font-size:12.2px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.deliv-link a{
  font-weight:600;max-width:340px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* =====================================================================
   PUBLIC ONBOARDING QUESTIONNAIRE (/onboard) - PREDORIA FRAMED SYSTEM
   ===================================================================== */
.onb-body{
  background-color:#F0EDE5;
  background-image:
    linear-gradient(rgba(21,30,26,.015) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(21,30,26,.015) 1.5px,transparent 1.5px);
  background-size:32px 32px;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
  color:#151e1a;
  margin:0;
  padding:0;
}
.onb-body::before{
  content:'';
  position:fixed;
  top:-10vw;left:-10vw;width:55vw;height:55vw;
  background:radial-gradient(circle,rgba(4,192,126,.08) 0%,rgba(4,192,126,0) 70%);
  pointer-events:none;z-index:0;
}
.onb-body::after{
  content:'';
  position:fixed;
  bottom:-10vw;right:-10vw;width:55vw;height:55vw;
  background:radial-gradient(circle,rgba(209,161,83,.07) 0%,rgba(209,161,83,0) 70%);
  pointer-events:none;z-index:0;
}

/* Top Progress Fill */
.onb-top-progress{
  position:fixed;top:0;left:0;right:0;height:4px;
  background:rgba(0,70,67,.1);z-index:200;
}
.onb-top-progress-fill{
  height:100%;background:#04C07E;
  border-radius:0 999px 999px 0;
  transition:width .4s cubic-bezier(0.16,1,0.3,1);
}

/* Clean Header */
.onb-topbar{
  position:fixed;top:0;left:0;right:0;height:66px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 36px;background:rgba(240,237,229,.9);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(21,30,26,.06);z-index:100;
}
.onb-top-logo{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:19px;font-weight:900;
  color:#004643;text-decoration:none;letter-spacing:-.02em;
}
.onb-logo-dot{
  width:9px;height:9px;border-radius:50%;background:#04C07E;
}
.onb-top-right{
  display:flex;align-items:center;gap:14px;
}
.onb-top-step-badge{
  font-size:12px;font-weight:800;letter-spacing:.04em;
  color:#004643;background:rgba(4,192,126,.12);border:1px solid rgba(4,192,126,.25);
  padding:4px 12px;border-radius:999px;
}
.onb-live-save{
  font-size:12px;font-weight:700;color:#004643;
  display:inline-flex;align-items:center;gap:6px;
}
.onb-pulse-dot{
  width:7px;height:7px;border-radius:50%;background:#04C07E;
  box-shadow:0 0 0 3px rgba(4,192,126,.25);
  animation:onbPulse 2s infinite;
}
@keyframes onbPulse{
  0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(4,192,126,.4)}
  70%{transform:scale(1);box-shadow:0 0 0 6px rgba(4,192,126,0)}
  100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(4,192,126,0)}
}

/* Framed Center Viewport */
.onb-main-flow{
  flex:1;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  width:100%;max-width:800px;margin:0 auto;
  padding:76px 20px 20px;box-sizing:border-box;
  position:relative;z-index:10;
  height:calc(100vh - 76px);
}

/* Section Progress Chips */
.onb-rail-chips{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px;margin-bottom:12px;width:100%;
}
.onb-chip-pill{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid rgba(21,30,26,.06);
  color:#556c62;transition:all .18s ease;cursor:default;
}
.onb-chip-pill.is-now{
  background:#004643;border-color:#004643;color:#ffffff;
  box-shadow:0 3px 10px rgba(0,70,67,.2);
}
.onb-chip-pill.is-done{
  background:rgba(4,192,126,.12);border-color:rgba(4,192,126,.3);color:#004643;
}

/* Step Card Box (Contained in Frame) */
.onb-card-frame{
  background:#ffffff;border:1px solid rgba(0,70,67,.1);
  border-radius:20px;box-shadow:0 12px 36px rgba(0,70,67,.05);
  width:100%;display:flex;flex-direction:column;
  max-height:calc(100vh - 150px);
  overflow:hidden;
  animation:onbFadeUp .3s cubic-bezier(0.16,1,0.3,1);
}
@keyframes onbFadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.onb-card-header{
  padding:18px 26px 14px;border-bottom:1px solid rgba(0,70,67,.06);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-shrink:0;background:#ffffff;
}
.onb-card-title-wrap{
  display:flex;align-items:center;gap:10px;
}
.onb-card-pill{
  font-size:.76rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:#004643;background:rgba(4,192,126,.12);border:1px solid rgba(4,192,126,.25);
  padding:4px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;
}
.onb-card-subtitle{
  font-size:13px;font-weight:700;color:#556c62;
}

/* Scrollable Card Body (if questions exceed screen) */
.onb-card-body{
  padding:20px 26px;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:18px;
}
.onb-card-body::-webkit-scrollbar{width:6px}
.onb-card-body::-webkit-scrollbar-track{background:transparent}
.onb-card-body::-webkit-scrollbar-thumb{background:rgba(0,70,67,.15);border-radius:10px}

/* Question Items */
.onb-q-item{
  display:flex;flex-direction:column;gap:7px;
}
.onb-q-label-row{
  display:flex;align-items:baseline;gap:8px;
  font-size:13.5px;font-weight:700;color:#004643;line-height:1.4;
}
.onb-q-badge{
  font-size:10.5px;font-weight:800;background:#004643;color:#fff;
  padding:2px 7px;border-radius:6px;flex-shrink:0;font-variant-numeric:tabular-nums;
  transition:all .18s ease;
}
.onb-q-item.is-answered .onb-q-badge{
  background:#04C07E;
}
.onb-q-item.is-bad .onb-q-badge{
  background:#c0392b;
}

/* 2-Column Grid for Short Inputs */
.onb-grid-2{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}

/* Compact Inputs */
.onb-input{
  width:100%;background:#faf9f6;border:1.5px solid #eae7e0;
  border-radius:10px;padding:10px 14px;font-size:14px;
  color:#004643;font-family:inherit;transition:all .18s;box-sizing:border-box;
}
.onb-input:focus{
  background:#fff;border-color:#04C07E;box-shadow:0 0 0 3.5px rgba(4,192,126,.12);
  outline:none;
}
.onb-input::placeholder{color:rgba(21,30,26,.35)}

.onb-textarea{
  width:100%;background:#faf9f6;border:1.5px solid #eae7e0;
  border-radius:10px;padding:10px 14px;font-size:13.5px;line-height:1.5;
  color:#004643;font-family:inherit;min-height:68px;resize:vertical;
  transition:all .18s;box-sizing:border-box;
}
.onb-textarea:focus{
  background:#fff;border-color:#04C07E;box-shadow:0 0 0 3.5px rgba(4,192,126,.12);
  outline:none;
}
.onb-textarea::placeholder{color:rgba(21,30,26,.35)}

.onb-select{
  width:100%;background:#faf9f6;border:1.5px solid #eae7e0;
  border-radius:10px;padding:10px 14px;font-size:14px;
  color:#004643;font-family:inherit;transition:all .18s;box-sizing:border-box;
}
.onb-select:focus{
  background:#fff;border-color:#04C07E;outline:none;
}

/* Checkbox button */
.onb-checkbox-btn{
  display:inline-flex;align-items:center;gap:9px;
  background:#faf9f6;border:1.5px solid #eae7e0;border-radius:10px;
  padding:9px 16px;cursor:pointer;font-size:13.5px;font-weight:700;
  color:#004643;transition:all .18s;align-self:flex-start;
}
.onb-checkbox-btn:hover{
  border-color:#04C07E;background:rgba(4,192,126,.04);
}
.onb-checkbox-btn input{
  width:16px;height:16px;accent-color:#04C07E;
}

/* Dropzone Compact */
.onb-dropzone-compact{
  background:#faf9f6;border:1.5px dashed rgba(0,70,67,.2);
  border-radius:12px;padding:16px 20px;text-align:center;
  cursor:pointer;transition:all .18s ease;
}
.onb-dropzone-compact:hover{
  border-color:#04C07E;background:rgba(4,192,126,.04);
}
.onb-drop-title-compact{
  font-size:13.5px;font-weight:700;color:#004643;margin-bottom:2px;
}
.onb-drop-sub-compact{
  font-size:12px;color:#556c62;
}

.onb-q-item.is-bad .onb-input,
.onb-q-item.is-bad .onb-textarea,
.onb-q-item.is-bad .onb-select{
  border-color:#c0392b;background:#fde8e8;
}
.onb-err-msg{
  font-size:12px;font-weight:700;color:#c0392b;margin-top:2px;
}

/* Card Footer with Fixed Back/Next */
.onb-card-footer{
  padding:14px 26px;border-top:1px solid rgba(0,70,67,.06);
  background:rgba(250,249,246,.85);display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-shrink:0;
}
.onb-back-btn{
  background:none;border:none;font-size:14px;font-weight:700;
  color:#556c62;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:6px 2px;transition:color .15s;
}
.onb-back-btn:hover{color:#004643}
.onb-back-btn svg{width:16px;height:16px}

.onb-next-btn{
  background:linear-gradient(135deg,#04C07E 0%,#03A36B 100%);
  color:#ffffff;font-family:inherit;font-size:14.5px;font-weight:800;
  padding:10px 28px;border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 4px 14px rgba(4,192,126,.28);transition:all .18s ease;
  display:inline-flex;align-items:center;gap:6px;
}
.onb-next-btn:hover{
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(4,192,126,.4);
}

.onb-saved-tag{
  font-size:12px;font-weight:700;color:#04C07E;
  background:rgba(4,192,126,.12);padding:3px 10px;border-radius:999px;
}

/* Review Box */
.onb-review-box{
  background:#faf9f6;border:1px solid rgba(0,70,67,.1);
  border-radius:14px;padding:18px 20px;max-height:45vh;
  overflow-y:auto;width:100%;box-sizing:border-box;
}
.onb-rv-sec{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#004643;padding:12px 0 6px;border-bottom:1px solid rgba(0,70,67,.08);
}
.onb-rv-row{
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  padding:8px 0;border-bottom:1px solid rgba(0,70,67,.05);
}
.onb-rv-q{font-size:12.5px;font-weight:700;color:#556c62;line-height:1.35}
.onb-rv-a{grid-column:1;font-size:13.5px;color:#151e1a;line-height:1.45;word-break:break-word}
.onb-rv-a em{color:#7c8b85;font-style:normal;font-size:12.5px}
.onb-rv-row.is-missing .onb-rv-a em{color:#c0392b;font-weight:700}
.onb-rv-edit{
  grid-row:1 / span 2;grid-column:2;align-self:center;
  background:#fff;border:1px solid rgba(0,70,67,.18);border-radius:999px;
  padding:3px 10px;font-size:11px;font-weight:800;color:#004643;
  cursor:pointer;white-space:nowrap;transition:all .14s ease;
}
.onb-rv-edit:hover{border-color:#04C07E;color:#04C07E;background:rgba(4,192,126,.06)}

/* Thank You / Portal Credentials */
.onb-thanks-card{
  background:#ffffff;border:1px solid rgba(0,70,67,.1);
  border-radius:24px;padding:38px 32px;text-align:center;
  max-width:560px;width:100%;box-shadow:0 16px 48px rgba(0,70,67,.06);
}
.onb-thanks-check{
  width:60px;height:60px;margin:0 auto 14px;border-radius:50%;
  background:rgba(4,192,126,.12);color:#04C07E;border:2px solid #04C07E;
  display:flex;align-items:center;justify-content:center;font-size:26px;
  font-weight:900;box-shadow:0 4px 16px rgba(4,192,126,.2);
}
.onb-thanks-card h1{font-size:24px;letter-spacing:-.025em;margin:0 0 8px;color:#004643}
.onb-thanks-card>p{color:#556c62;font-size:14px;line-height:1.55;margin:0 0 18px}
.onb-cred-box{
  background:#FAF9F6;border:1.5px solid rgba(4,192,126,.3);
  border-radius:14px;padding:16px 18px;text-align:left;margin-bottom:20px;
}
.onb-cred-title{
  font-weight:800;font-size:13px;margin-bottom:10px;color:#004643;
}
.onb-cred-table{width:100%;border-collapse:collapse;font-size:13.5px}
.onb-cred-table th{
  text-align:left;color:#556c62;font-weight:600;font-size:12px;
  padding:5px 10px 5px 0;white-space:nowrap;
}
.onb-cred-table td{padding:5px 0}
.onb-cred-table code{
  background:#fff;padding:3px 8px;border-radius:6px;
  font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;color:#004643;border:1px solid #eae7e0;
}
.onb-copy-btn{
  background:#fff;border:1px solid rgba(0,70,67,.2);border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#004643;
  padding:3px 8px;margin-left:8px;cursor:pointer;transition:all .14s ease;
}
.onb-copy-btn:hover{border-color:#04C07E;color:#04C07E}

@media (max-width:600px){
  .onb-topbar{padding:0 18px}
  .onb-main-flow{padding:70px 14px 14px}
  .onb-grid-2{grid-template-columns:1fr}
  .onb-card-header{padding:14px 18px}
  .onb-card-body{padding:16px 18px}
  .onb-card-footer{padding:12px 18px}
}
.onb-cred-title{
  font-weight:800;font-size:13.5px;margin-bottom:12px;color:#004643;
}
.onb-cred-table{width:100%;border-collapse:collapse;font-size:14px}
.onb-cred-table th{
  text-align:left;color:#556c62;font-weight:600;font-size:12px;
  padding:6px 12px 6px 0;white-space:nowrap;
}
.onb-cred-table td{padding:6px 0}
.onb-cred-table code{
  background:#fff;padding:4px 8px;border-radius:6px;
  font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;color:#004643;border:1px solid #eae7e0;
}
.onb-copy-btn{
  background:#fff;border:1px solid rgba(0,70,67,.2);border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;color:#004643;
  padding:3px 8px;margin-left:8px;cursor:pointer;transition:all .14s ease;
}
.onb-copy-btn:hover{border-color:#04C07E;color:#04C07E}

@media (max-width:600px){
  .onb-topbar{padding:0 20px}
  .onb-main-flow{padding:74px 16px 20px}
  .onb-q-title{font-size:1.4rem}
  .onb-glow-btn{padding:12px 28px;font-size:.95rem}
}

@media (max-width:600px){
  .onb-wrap{padding:20px 14px 70px}
  .onb-card{padding:24px 20px}
  .onb-head h1{font-size:25px}
  .onb-head p{font-size:14px}
  .onb-msg{padding:36px 20px}
  .onb-bar{margin:16px -14px 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .onb-bar .btn{padding:12px 18px;font-size:14px}
  .onb-rv-row{grid-template-columns:1fr}
  .onb-rv-edit{grid-row:auto;grid-column:1;justify-self:start;margin-top:6px}
}

/* =====================================================================
   OWNER SUMMARY
   A dashboard full of numbers still leaves you asking "so is today
   fine?". The band at the top answers that in one sentence.
   ===================================================================== */
.ceo-summary{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--grad);color:#fff;border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow-lg);
}
.ceo-sun{font-size:30px;line-height:1;flex:0 0 auto}
.ceo-greeting{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.85}
.ceo-line{
  margin:6px 0 0;font-size:18px;font-weight:700;
  line-height:1.45;letter-spacing:-.01em;max-width:880px;
}
.ceo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}

.ceo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.ceo-block{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:18px 20px;display:flex;flex-direction:column;
}
.ceo-block-head{font-size:14px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.ceo-rows{display:flex;flex-direction:column}
.ceo-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px;
}
.ceo-row:last-child{border-bottom:0}
.ceo-row span{color:var(--ink-soft)}
.ceo-row span em{font-style:normal;color:var(--ink-faint);font-size:11.5px}
.ceo-row strong{font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ceo-row.bad strong{color:var(--red)}
.ceo-row.good strong{color:var(--green)}
.ceo-link{margin-top:12px;font-size:13px;font-weight:700;color:var(--brand-d)}

/* ---------- pipeline funnel ----------
   Width carries the count, so the shape of the pipeline is the point. */
.funnel{display:flex;flex-direction:column;gap:10px}
.funnel .frow{display:flex;align-items:center;gap:12px}
.funnel .flabel{width:135px;flex:0 0 135px;font-size:13px;color:var(--ink-soft);font-weight:700}
.funnel .fbar{
  height:36px;border-radius:9px;background:var(--grad);
  display:flex;align-items:center;padding:0 13px;
  color:#fff;font-weight:800;min-width:42px;
}

/* ---------- horizontal bars (revenue by tier) ---------- */
.hbar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hbar-label{flex:0 0 90px;font-size:13px;font-weight:700}
.hbar{flex:1;height:14px;background:var(--line);border-radius:999px;overflow:hidden}
.hbar span{display:block;height:100%;background:var(--grad);border-radius:999px}
.hbar-val{flex:0 0 auto;min-width:70px;text-align:right;font-size:13px;font-weight:700;color:var(--ink-soft)}

/* ---------- paired vertical bars (this month vs last) ---------- */
.bars-wide{gap:16px;justify-content:space-around}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bar-pair{display:flex;align-items:flex-end;gap:3px;height:calc(100% - 18px);width:100%;justify-content:center}
.bar-pair .bar{width:11px}

@media (max-width:560px){
  .ceo-summary{padding:18px 16px;gap:12px}
  .ceo-line{font-size:15.5px}
  .funnel .flabel{width:96px;flex-basis:96px;font-size:12px}
}

/* =====================================================================
   INSTALL PROMPT

   A card in the bottom-right corner, above the page rather than pushing it
   down — it is an offer, not part of the work. It comes back at each new
   sign-in until the app is installed or the person says never, because one
   dismissal on a busy Monday should not be the last time they are asked.

   On a phone it becomes a bottom sheet the full width of the screen, which
   is where a thumb already is.
   ===================================================================== */
.pwa-card{
  position:fixed;right:20px;bottom:20px;z-index:200;width:min(390px,calc(100vw - 28px));
  display:flex;align-items:flex-start;gap:12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:0 14px 44px rgba(16,17,20,.17);
  padding:15px 16px 14px;
  animation:pwa-rise .34s cubic-bezier(.32,1.2,.5,1);
}
@keyframes pwa-rise{from{opacity:0;transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.pwa-card{animation:none}}

.pwa-ico{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-size:21px;line-height:1;
  background:var(--brand-soft);
}
.pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pwa-txt strong{font-size:14px;letter-spacing:-.01em}
.pwa-txt span{font-size:12.6px;color:var(--ink-soft);line-height:1.5}
.pwa-btns{display:flex;gap:8px;margin-top:10px}
.pwa-card .btn{flex:0 0 auto}

/* "Don't show again" — small, in the corner, so dismissing for good is
   possible without being the obvious thing to click. */
.pwa-x{
  position:absolute;top:8px;right:9px;
  border:0;background:none;cursor:pointer;padding:4px 6px;border-radius:6px;
  font-size:15px;line-height:1;color:var(--ink-faint);
}
.pwa-x:hover{background:var(--line-soft);color:var(--ink)}

@media (max-width:560px){
  .pwa-card{
    right:10px;left:10px;bottom:10px;width:auto;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .pwa-btns .btn{flex:1;justify-content:center}
}

/* A nudge to allow notifications, when they were dismissed earlier. */
.push-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--orange-bg);border:1px solid #fcd34d;color:#92400e;
  border-radius:var(--radius);padding:11px 15px;margin-bottom:12px;font-size:13.2px;
}
.push-banner strong{font-weight:800}
.push-banner .btn{flex:0 0 auto;margin-left:auto}

/* =====================================================================
   SIDE-BY-SIDE EDITOR
   Source on the left, rendered result on the right. Used for the offer
   letter wording, where writing HTML blind in a textarea is miserable.
   ===================================================================== */
.cmodal[hidden]{display:none}
.cmodal{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:4vh 16px;background:rgba(16,17,20,.5);backdrop-filter:blur(2px);
}
.cmodal-box{
  width:100%;max-width:1040px;max-height:92vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.cmodal-box form{display:flex;flex-direction:column;min-height:0;flex:1}
.cmodal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 20px;border-bottom:1px solid var(--line);
}
.cmodal-head h3{margin:0;font-size:16px}
.cmodal-body{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0}
.cmodal-col{display:flex;flex-direction:column;min-height:0;padding:16px 20px}
.cmodal-col + .cmodal-col{border-left:1px solid var(--line)}
.cmodal-col label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.cmodal textarea{
  flex:1;min-height:300px;resize:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;
  border:1px solid var(--line);border-radius:10px;padding:12px;
  background:var(--canvas);color:var(--ink);outline:none;
}
.cmodal textarea:focus{border-color:var(--brand)}
.cmodal-preview{
  flex:1;overflow:auto;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);padding:14px;
}
.cmodal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:13px 20px;border-top:1px solid var(--line);
}
.cmodal-hint{margin:0 auto 0 0;font-size:12px;color:var(--ink-faint);max-width:340px}

/* A slide-over or modal locks the page behind it. */
body.cpanel-open{overflow:hidden}
.cpanel-x{
  background:none;border:0;cursor:pointer;font-size:16px;color:var(--ink-soft);
  width:32px;height:32px;border-radius:50%;
}
.cpanel-x:hover{background:var(--line-soft);color:var(--ink)}

@media (max-width:820px){
  .cmodal-body{grid-template-columns:1fr}
  .cmodal-col + .cmodal-col{border-left:0;border-top:1px solid var(--line)}
  .cmodal textarea{min-height:200px}
}

/* =====================================================================
   WHAT HAPPENS NEXT
   The onboarding checklist on a client's page. Each row says where the
   step stands, and carries the button that moves it on.
   ===================================================================== */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.step{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.step:last-child{border-bottom:0}
.step-tick{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);box-sizing:border-box;
  display:grid;place-items:center;
  font-size:12px;font-weight:800;color:transparent;
}
.step.is-done .step-tick{background:var(--green);border-color:var(--green);color:#fff}
.step-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.step-body strong{font-size:13.8px}
.step-note{font-size:12.3px;color:var(--ink-soft);line-height:1.4}
.step.is-done .step-body strong{color:var(--ink-soft)}
.step form{flex:0 0 auto}

/* A labelled date box in a filter bar. */
.act-range{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.act-range span{font-weight:600;white-space:nowrap}
.act-range .input{width:auto}

/* =====================================================================
   PER-SECTION ACCESS
   A partner can have the run of the place, or just the parts you hand
   them. Role sets the ceiling; this narrows it for one person.
   ===================================================================== */
.perm-details{position:relative;display:inline-block;margin-top:6px}
.perm-details > summary{list-style:none;cursor:pointer}
.perm-details > summary::-webkit-details-marker{display:none}

/* Floated over the table rather than pushed into a cell — a 420px panel
   inside a <td> stretches the column and shunts every other row sideways. */
.perm-form{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;
  width:min(430px,86vw);padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
/* Near the right edge it opens leftwards instead of off-screen. */
.perm-details.flip .perm-form{left:auto;right:0}
.perm-check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:12.8px;line-height:1.45}
.perm-check input{margin-top:2px;flex:0 0 auto;accent-color:var(--brand)}
.perm-full{
  margin-bottom:9px;padding-bottom:9px;
  border-bottom:1px solid var(--line-soft);font-size:13.5px;
}
.perm-grid{display:flex;flex-direction:column;gap:8px;transition:opacity .15s var(--ease)}
/* With "Full access" ticked the list below means nothing, so it says so. */
.perm-form.is-full .perm-grid{opacity:.4;pointer-events:none}
.perm-form .help{margin:10px 0 12px}

/* The questionnaire editor: a table of inputs, one row per question. */
.q-editor td{padding:6px 8px;vertical-align:middle}
.q-editor .input,.q-editor .select{width:100%}
.q-editor td.center{text-align:center}
.q-editor input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px}

/* =====================================================================
   QUESTIONNAIRE ANSWERS (inc/partials/questionnaire-answers.php)
   What a client sent back, read on /admin/questionnaires and on the
   client's own page.

   Deliberately NOT .kv-grid. That packs pairs into as many columns as
   fit, which turns a two-line question with a one-word answer into a
   wall of ragged cells where the answer is nowhere near its question.
   Here it is one row per question: question left, answer right, a rule
   between each, and nothing ever shares a line with something it does
   not belong to.
   ===================================================================== */
/* Jumped to from the client page, so it must clear the sticky topbar. */
#answers{scroll-margin-top:calc(var(--topbar-h) + 16px)}
.ans{--ans-q-col:minmax(230px,34%)}

.ans-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:0 0 13px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.ans-form{font-size:13.6px;font-weight:700;color:var(--ink)}
.ans-count{font-size:12px;color:var(--ink-faint);margin-top:2px}
.ans-count strong{color:var(--green);font-weight:800;font-variant-numeric:tabular-nums}
.ans-skip-n{
  display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;
  background:var(--line-soft);color:var(--ink-faint);font-size:11px;font-weight:700;
}
.ans-top-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ans-when{font-size:12px;color:var(--ink-faint);font-weight:600}

/* ---------- a section of the form ---------- */
.ans-sec{margin-top:22px}
.ans-sec:first-of-type{margin-top:16px}
.ans-sec.is-old .ans-sec-head{border-bottom-color:var(--orange)}
.ans-sec.is-old .ans-sec-head h3{color:#8a5a06}
.ans-sec-note{
  font-size:12px;color:var(--ink-faint);line-height:1.5;
  margin:9px 0 2px;max-width:640px;
}
.ans-sec-head{
  display:flex;align-items:center;gap:11px;
  margin-bottom:2px;padding-bottom:9px;
  border-bottom:2px solid var(--brand);
}
.ans-sec-head h3{
  margin:0;font-size:12px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand-deep);
}
.ans-sec-n{
  margin-left:auto;font-size:11px;font-weight:800;color:var(--ink-faint);
  background:var(--line-soft);border-radius:999px;padding:2px 9px;
  font-variant-numeric:tabular-nums;
}

/* ---------- one question and its answer ---------- */
.ans-row{
  display:grid;grid-template-columns:var(--ans-q-col) 1fr;
  gap:6px 26px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line-soft);
}
.ans-row:hover{background:linear-gradient(90deg,var(--line-soft),transparent 70%)}
.ans-row:last-child{border-bottom:0}

/* The question. Grey, lighter, numbered — it reads as the prompt. */
.ans-q{display:flex;gap:9px;align-items:flex-start;min-width:0}
.ans-n{
  flex:none;font-size:10.5px;font-weight:800;color:var(--ink-faint);
  background:var(--line-soft);border-radius:5px;padding:2px 5px;
  margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.ans-q-t{
  font-size:12.8px;font-weight:600;color:var(--ink-soft);
  line-height:1.45;min-width:0;
}

/* The answer. Darker, larger, in a tinted well — it reads as the reply. */
.ans-a{position:relative;min-width:0}
.ans-text{
  font-size:14px;font-weight:500;color:var(--ink);line-height:1.55;
  background:var(--line-soft);border-left:3px solid var(--brand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:9px 42px 9px 12px;word-break:break-word;
}
.ans-row.is-long .ans-text{white-space:normal}
.ans-link{
  display:inline-block;font-size:13.6px;font-weight:600;
  background:var(--brand-soft);border-radius:var(--radius-sm);
  padding:7px 40px 7px 11px;word-break:break-all;max-width:100%;
}
.ans-link:hover{background:#d6f5e7;text-decoration:none}
.ans-none{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:600;color:var(--ink-faint);
  background:var(--surface-2);border-radius:999px;padding:3px 11px;
}
.ans-row.is-empty .ans-q-t{color:var(--ink-faint)}

/* Copy sits inside the answer well, and only shows on approach. */
.ans-copy{
  position:absolute;top:6px;right:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);padding:3px 7px;cursor:pointer;
  opacity:0;transition:.14s var(--ease);
}
.ans-a:hover .ans-copy,.ans-copy:focus-visible{opacity:1}
.ans-copy:hover{border-color:var(--brand);color:var(--brand-d)}
.ans-copy.is-done{opacity:1;border-color:var(--green);color:var(--green)}

/* ---------- files a client attached ---------- */
.ans-files{display:flex;flex-wrap:wrap;gap:9px}
.ans-file{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 11px;font-size:12.5px;font-weight:600;
  text-decoration:none;color:var(--ink);
  background:var(--surface);transition:.12s var(--ease);
}
.ans-file:hover{border-color:var(--brand);text-decoration:none;box-shadow:var(--shadow)}
.ans-file-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ans-file-ico{font-size:15px;flex:none}
.ans-file.is-img{padding:0;overflow:hidden;width:82px;height:82px;border-radius:var(--radius)}
.ans-file.is-img img{width:100%;height:100%;object-fit:cover;display:block}

.ans-plain{position:absolute;left:-9999px}

/* On a phone, and inside a narrow column, the two columns stack — with the
   question still visibly the label and the answer still the well. */
@media (max-width:820px){
  .ans-row{grid-template-columns:1fr;gap:7px;padding:12px 0}
  .ans-row:hover{background:none}
  .ans-sec{margin-top:18px}
}

/* What each access level actually means, on the Partners page. */
.access-map{display:flex;flex-direction:column;gap:11px;margin:14px 0}
.access-row{display:flex;align-items:flex-start;gap:12px;font-size:13.2px;line-height:1.5}
.access-row > .pill{flex:0 0 78px;text-align:center;justify-content:center}
.access-row > div{flex:1;min-width:0;color:var(--ink-soft)}
.access-row strong{color:var(--ink)}

/* A chip for something switched off or not applicable. */
.chip-off{background:var(--line-soft);color:var(--ink-faint)}

/* =====================================================================
   ALERT AUDIENCE
   Who an alert goes to: everyone, or a list you pick — with quick picks
   for the people who are behind on target and the people who aren't.
   ===================================================================== */
.aud-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.aud-tab{
  flex:1;min-width:150px;display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;
  transition:.12s var(--ease);
}
.aud-tab:hover{border-color:var(--brand)}
.aud-tab.is-on{border-color:var(--brand);background:var(--brand-soft)}
.aud-tab input{margin-top:2px;accent-color:var(--brand)}
.aud-tab span{display:flex;flex-direction:column;gap:1px;line-height:1.35}
.aud-tab strong{font-size:13.4px}
.aud-tab small{font-size:11.8px;color:var(--ink-soft)}

.aud-picker{border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;background:var(--canvas)}
.aud-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.aud-count{margin-left:auto;font-size:12.3px;font-weight:700;color:var(--brand-d)}
.aud-count.is-none{color:var(--ink-faint);font-weight:600}

.aud-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:320px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px;
}
.aud-person{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:7px 9px;border-radius:var(--radius-sm);transition:background .12s var(--ease);
}
.aud-person:hover{background:var(--line-soft)}
.aud-person input{accent-color:var(--brand);flex:0 0 auto}
.aud-person .av{flex:0 0 auto}
.aud-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}
.aud-name strong{font-size:13.3px}
.aud-name small{font-size:11.5px;color:var(--ink-faint)}
.aud-person .pill{flex:0 0 auto}

/* =====================================================================
   PAGE RHYTHM
   Sections used to butt straight into each other, because .panel had no
   margin and every page invented its own inline one. Spacing now comes
   from a single rule: consecutive top-level blocks get one gap, always.
   ===================================================================== */
.content > * + *,
.pt-main > * + *{margin-top:18px}

/* Blocks that carry their own bottom margin for use inside a panel would
   otherwise double up at the top level. */
.content > .cards,
.content > .toolbar,
.content > .flash,
.content > .clients-toolbar,
.pt-main > .cards,
.pt-main > .toolbar,
.pt-main > .flash{margin-bottom:0}

/* A heading introduces the block under it, so it sits close to it and
   keeps its distance from whatever came before. */
.content > .section-title,
.pt-main > .section-title{margin:26px 0 0}
.content > .section-title + *,
.pt-main > .section-title + *{margin-top:9px}

/* Subtabs belong to the page header, not to the content flow. */
.content > .subtabs{margin-bottom:0}

/* Panels inside a grid are spaced by the grid's own gap. */
.grid-2 > .panel,
.grid-3 > .panel,
.grid-4 > .panel{margin-bottom:0}

/* Nothing should push the page longer than its last block. */
.content > :last-child,
.pt-main > :last-child{margin-bottom:0}

/* A picker sitting inline beside other things, rather than as its own block. */
.av-picker.is-inline{margin:0;gap:0;flex:0 0 auto}

/* An avatar is a fixed circle wherever it sits. As a flex item its automatic
   minimum size can otherwise stretch it to the height of its container. */
.av{flex-shrink:0;min-width:0;min-height:0;align-self:center}
.who-av-wrap,.av-picker-shell{align-items:center;align-self:center}

/* =====================================================================
   A TEAM MEMBER'S PASSWORD
   Owners can read it back so they can help someone get in. Hidden until
   asked for, so it is not sitting on screen while a room can see it.
   ===================================================================== */
.pw-row{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);
}
.pw-label{
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);
}
.pw-value,.pw-dots{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--line-soft);padding:4px 9px;border-radius:var(--radius-sm);
  letter-spacing:.04em;
}
.pw-dots{color:var(--ink-faint)}

.pw-reset{position:relative;display:inline-block}
.pw-reset > summary{list-style:none;cursor:pointer}
.pw-reset > summary::-webkit-details-marker{display:none}
.pw-reset-form{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(320px,86vw);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:13px 15px;
}
.pw-reset-form label{
  display:block;margin-bottom:5px;
  font-size:12px;font-weight:600;color:var(--ink-soft);
}
.pw-reset-form .help{margin:7px 0 10px}

/* =====================================================================
   THE INVOICE DOCUMENT (/invoice?k=…)
   Standalone, like the offer letter: no app chrome, because this is a
   thing a client saves and forwards to whoever pays the bills. The print
   rules at the bottom are what turn it into the PDF.
   ===================================================================== */
.inv-body{
  background:var(--canvas);color:var(--ink);
  padding:26px 18px 60px;
}
.inv-actions{
  max-width:820px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.inv-actions-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.inv-sheet{
  max-width:820px;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 12px 40px rgba(0,70,67,.07);
  padding:38px 40px 30px;
}

/* ---------- masthead ---------- */
.inv-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:24px;border-bottom:2px solid var(--brand-deep);
}
.inv-from{display:flex;gap:14px;align-items:flex-start;min-width:0}
.inv-logo{
  width:44px;height:44px;flex:none;border-radius:12px;
  background:var(--grad-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:19px;
}
.inv-from-name{font-size:17px;font-weight:800;color:var(--brand-deep);line-height:1.25}
.inv-from-meta{margin-top:5px;font-size:12.6px;color:var(--ink-faint);line-height:1.55}
.inv-from-meta a{color:inherit}

.inv-head{text-align:right;flex:none}
.inv-word{
  font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);
}
.inv-no{font-size:25px;font-weight:900;color:var(--ink);line-height:1.15;margin-top:2px}
.inv-status{
  display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  background:var(--line-soft);color:var(--ink-soft);
}
.inv-status.is-paid{background:var(--green-bg);color:#0f7a37}
.inv-status.is-sent{background:var(--orange-bg);color:#a86a06}
.inv-status.is-partial{background:var(--blue-bg,#e8efff);color:#1d4fd0}
.inv-status.is-overdue{background:var(--red-bg);color:#c62d2d}
.inv-status.is-cancelled,.inv-status.is-refunded{background:var(--line-soft);color:var(--ink-faint)}

/* ---------- who and when ---------- */
.inv-parties{
  display:grid;grid-template-columns:1fr auto;gap:30px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.inv-block{font-size:13.4px;color:var(--ink-soft);line-height:1.6;min-width:0}
.inv-block-l{
  font-size:10.6px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;
}
.inv-block-name{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.3}

.inv-facts{
  display:grid;gap:7px;font-size:13px;min-width:210px;
}
.inv-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.inv-facts span{color:var(--ink-faint)}
.inv-facts strong{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.inv-facts .is-overdue{color:var(--red)}
.inv-facts-due{
  margin-top:5px;padding-top:9px;border-top:1px solid var(--line);
}
.inv-facts-due strong{font-size:19px;font-weight:900;color:var(--brand-deep)}

/* ---------- what is being billed ---------- */
.inv-items{width:100%;border-collapse:collapse;margin-top:22px;font-size:13.8px}
.inv-items th{
  text-align:left;padding:0 0 9px;border-bottom:1px solid var(--line);
  font-size:10.6px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);
}
.inv-items td{padding:15px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.inv-items .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-item-sub{margin-top:3px;font-size:12.4px;color:var(--ink-faint)}

.inv-sums{margin:18px 0 0 auto;width:min(320px,100%);font-size:13.6px}
.inv-sum{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:7px 0;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.inv-sum.is-total{
  border-top:1px solid var(--line);margin-top:4px;padding-top:11px;
  font-weight:800;color:var(--ink);
}
.inv-sum.is-balance{
  margin-top:6px;padding:12px 14px;border-radius:var(--radius-sm);
  background:var(--brand-deep);color:#fff;font-weight:900;font-size:15.5px;
}
.inv-sheet.is-paid .inv-sum.is-balance{background:var(--green-bg);color:#0f7a37}

/* ---------- how to pay ---------- */
.inv-pay{
  margin-top:26px;padding:20px 22px;border-radius:var(--radius-lg);
  background:var(--brand-soft);border:1px solid rgba(4,192,126,.25);
}
.inv-pay.is-settled{background:var(--green-bg);border-color:rgba(22,163,74,.22)}
.inv-pay h2{
  margin:0 0 9px;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand-deep);
}
.inv-pay-body{font-size:13.6px;line-height:1.65;color:var(--ink)}
.inv-pay-btn{margin-top:14px}
.inv-pay-note{margin-top:9px;font-size:12px;color:var(--ink-faint);line-height:1.5}

.inv-terms{
  margin-top:22px;font-size:12.6px;color:var(--ink-faint);line-height:1.6;
  display:grid;gap:7px;
}
.inv-terms strong{color:var(--ink-soft)}

.inv-foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.2px;color:var(--ink-faint);line-height:1.6;
}

.inv-missing{text-align:center;padding:40px 10px}
.inv-missing-art{font-size:38px;margin-bottom:10px}
.inv-missing h1{font-size:20px;margin:0 0 8px}
.inv-missing p{font-size:13.6px;color:var(--ink-soft);max-width:420px;margin:0 auto;line-height:1.6}

@media (max-width:640px){
  .inv-body{padding:16px 12px 40px}
  .inv-sheet{padding:24px 20px 22px;border-radius:var(--radius-sm)}
  .inv-parties{grid-template-columns:1fr;gap:20px}
  .inv-facts{min-width:0}
  .inv-no{font-size:21px}
  .inv-sums{width:100%}
}

/* ---------- the PDF ----------
   Everything that belongs to the screen goes: the sand background, the card
   shadow, the buttons. What is left is the document. */
@media print{
  @page{margin:14mm}
  .inv-body{background:#fff;padding:0}
  .inv-actions{display:none}
  .inv-sheet{
    max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  }
  .inv-pay{
    background:#fff;border:1px solid #d6d3cc;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .inv-sum.is-balance{
    background:#004643;color:#fff;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .inv-logo{
    background:#004643;color:#fff;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .inv-status,.inv-pay-btn{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .inv-items,.inv-sums,.inv-pay{page-break-inside:avoid}
}

/* ---------- the invoice builder (admin) ----------
   A grid rather than a table, so a line collapses to two rows on a phone
   instead of scrolling sideways. */
.inv-lines{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;margin:4px 0 10px;
}
.inv-lines-head,.inv-line{
  display:grid;grid-template-columns:1fr 80px 120px 110px 34px;
  gap:10px;align-items:center;padding:9px 12px;
}
.inv-lines-head{
  background:var(--line-soft);border-bottom:1px solid var(--line);
  font-size:10.6px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);
}
.inv-lines-head .num,.inv-line .num,.inv-line output{text-align:right}
.inv-line{border-bottom:1px solid var(--line-soft)}
.inv-line:last-child{border-bottom:0}
.inv-line-desc{display:grid;gap:5px;min-width:0}
.inv-line input{
  width:100%;padding:7px 9px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font-size:13.2px;
}
.inv-line input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(4,192,126,.13)}
.inv-line input.is-sub{font-size:12.2px;color:var(--ink-soft)}
.inv-line output{
  font-weight:700;font-size:13.4px;font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;
}

.inv-form-sums{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;
  margin:14px 0 4px;
}
.inv-form-total{
  display:flex;align-items:baseline;gap:14px;white-space:nowrap;
  background:var(--brand-soft);border-radius:var(--radius-sm);padding:11px 16px;
}
.inv-form-total span{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-deep)}
.inv-form-total strong{font-size:19px;font-weight:900;color:var(--brand-deep);font-variant-numeric:tabular-nums}

.inv-send{
  margin:18px 0 16px;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--line-soft);
}
.inv-send-fields{margin-top:12px}
.inv-send-fields[hidden]{display:none}

@media (max-width:720px){
  .inv-lines-head{display:none}
  .inv-line{
    grid-template-columns:1fr 1fr 44px;
    grid-template-areas:"desc desc desc" "qty price del";
    padding:12px;
  }
  .inv-line-desc{grid-area:desc}
  .inv-line .num[name="line_qty[]"]{grid-area:qty}
  .inv-line .num[name="line_price[]"]{grid-area:price}
  .inv-line output{grid-column:1 / -1;text-align:left}
  .inv-line [data-line-del]{grid-area:del}
  .inv-form-sums{grid-template-columns:1fr}
}

/* The one-line summary of what the invoice is for, above the lines. */
.inv-forwhat{
  margin-top:20px;padding:10px 14px;border-radius:var(--radius-sm);
  background:var(--line-soft);font-size:13.4px;color:var(--ink);
}
.inv-forwhat span{
  font-size:10.6px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);margin-right:7px;
}
/* Qty and unit price only appear when they say something a total does not. */
.inv-items.has-cols th.num,.inv-items.has-cols td.num{width:100px}
.inv-items.has-cols th:last-child,.inv-items.has-cols td:last-child{width:120px}

/* ---------- team member targeting & audience styles ---------- */
.emp-target-band{
  background:rgba(0,70,67,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:9px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
}
.emp-target-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.emp-target-tag{
  font-weight:700;
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.emp-target-val{
  font-weight:600;
  color:var(--ink);
  text-align:right;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.emp-target-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(4,192,126,0.12);
  color:#004643;
  border:1px solid rgba(4,192,126,0.3);
  border-radius:6px;
  padding:3px 8px;
  font-size:12px;
  font-weight:600;
}
.emp-country-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(209,161,83,0.14);
  color:#835f1e;
  border:1px solid rgba(209,161,83,0.3);
  border-radius:6px;
  padding:3px 8px;
  font-size:12px;
  font-weight:600;
}
.emp-target-link{
  font-size:11.8px;
  font-weight:600;
  color:var(--brand);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.emp-target-link:hover{
  text-decoration:underline;
  color:var(--brand-d);
}
.emp-targeting-table-panel[hidden]{
  display:none !important;
}