/* ============================================================================
   MIKE STUDIOS OS
   Premium, cinematic, editorial. Graphite charcoal and deep navy, one
   precise blue. Bold display type against generous quiet space.
   ========================================================================== */

:root{
  /* ground — graphite with a navy undertone */
  --black:      #05070a;
  --graphite-1: #0a0e14;
  --graphite-2: #10151d;
  --graphite-3: #161c26;
  --navy-1:     #0b1729;
  --navy-2:     #102a4c;
  --navy-deep:  #0a1424;

  /* surfaces */
  --surface:     rgba(255,255,255,0.032);
  --surface-2:   rgba(255,255,255,0.055);
  --surface-sunk:rgba(0,0,0,0.28);

  /* hairlines */
  --rule:        rgba(255,255,255,0.07);
  --rule-strong: rgba(255,255,255,0.13);

  /* type — four steps of emphasis. The bottom two were originally dark
     enough (#5c6a7d / #3d4757) to sit near 2:1 against this background,
     which is fine for a decorative hairline but not for the small labels
     and notes they actually carry. Lifted so the quietest text is still
     legible, keeping the steps distinct so the hierarchy survives. */
  --ink:      #f2f5f9;
  --ink-2:    #a6b3c5;
  --ink-3:    #82909f;
  --ink-4:    #697687;

  /* accent */
  --blue:        #4d9fff;
  --blue-bright: #8ac4ff;
  --blue-deep:   #1b5fa8;
  --blue-wash:   rgba(77,159,255,0.10);

  /* semantic */
  --ok:    #35d39a;
  --due:   #f0b429;
  --late:  #ff5f6d;
  --idle:  #55617240;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-2: 0 24px 60px -32px rgba(0,0,0,0.9);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --sidebar-w: 244px;
  --dock-h: 56px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1400px 900px at 0% -10%, rgba(77,159,255,0.15), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(16,45,82,0.5), transparent 65%),
    linear-gradient(170deg,#05070a 0%,#070b11 30%,#080e18 60%,#0a1424 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:rgba(77,159,255,0.32); color:#fff; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; padding:0; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.16); }
::-webkit-scrollbar-track{ background:transparent; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ─────────────────────────────────────────────── typography */
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.022em; text-wrap:balance; }
p{ margin:0; }
code{ font-family:var(--mono); font-size:0.92em; }

.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ─────────────────────────────────────────────── shell */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex:none; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:22px;
  padding:24px 14px 16px;
  border-right:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(12,24,42,0.62), rgba(5,7,10,0.94));
  backdrop-filter:blur(20px);
  z-index:30;
}
.brand{ display:flex; align-items:center; gap:12px; padding:0 8px; }
.brand-mark{
  width:42px; height:42px; border-radius:12px; flex:none; overflow:hidden;
  background:#000; border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.brand-name{ font-size:16px; font-weight:750; letter-spacing:-0.02em; line-height:1.1; }
.brand-meta{ font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-4); margin-top:4px; }

.pitch-btn{
  display:flex; align-items:center; gap:11px; width:100%; padding:12px 13px;
  border-radius:var(--r-md); text-align:left;
  background:linear-gradient(135deg, rgba(77,159,255,0.2), rgba(77,159,255,0.03));
  border:1px solid rgba(77,159,255,0.3);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.pitch-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -16px rgba(77,159,255,0.7); }
.pitch-btn svg{ width:16px; height:16px; flex:none; stroke:var(--blue-bright); }
.pitch-btn span{ display:flex; flex-direction:column; gap:2px; }
.pitch-btn .a{ font-size:13px; font-weight:650; }
.pitch-btn .b{ font-size:10.5px; color:var(--ink-2); }

.navlist{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:10px 12px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:520; color:var(--ink-2); text-align:left;
  transition:background .14s, color .14s;
}
.nav-item svg{ width:17px; height:17px; flex:none; stroke:currentColor; opacity:.75; }
.nav-item span:first-of-type{ flex:1; }
.nav-item:hover{ background:rgba(255,255,255,0.045); color:var(--ink); }
.nav-item.is-active{
  color:var(--ink); background:linear-gradient(135deg, rgba(77,159,255,0.16), rgba(77,159,255,0.02));
  box-shadow:inset 0 0 0 1px rgba(77,159,255,0.22);
}
.nav-item.is-active svg{ stroke:var(--blue); opacity:1; }
.nav-badge{
  font-size:10px; font-weight:750; padding:2px 7px; border-radius:999px;
  background:rgba(240,180,41,0.16); color:var(--due);
}
.nav-badge:empty{ display:none; }
.nav-count{ font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums; }

.side-foot{ margin-top:auto; padding:14px 10px 0; border-top:1px solid var(--rule); }
.side-foot p{ font-size:10.5px; line-height:1.6; color:var(--ink-4); margin-top:8px; }
.side-foot code{ color:var(--ink-3); }
.link-btn{ background:none; border:none; padding:0; font:inherit; font-size:10.5px; color:var(--blue); cursor:pointer; text-decoration:underline; }
.link-btn:hover{ color:var(--blue-bright); }
.save-state{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;
  color:var(--ink-3);
}
.save-state::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 10px rgba(53,211,154,0.7);
}
.save-state[data-state="saving"]{ color:var(--due); }
.save-state[data-state="saving"]::before{ background:var(--due); box-shadow:0 0 10px rgba(240,180,41,0.7); }
.save-state[data-state="error"]{ color:var(--late); }
.save-state[data-state="error"]::before{ background:var(--late); box-shadow:none; }

/* ─────────────────────────────────────────────── main + topbar */
.main{
  flex:1; min-width:0;
  padding:30px 38px calc(var(--dock-h) + 42px);
  display:flex; flex-direction:column; gap:18px;
}
.topbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.view-title{ font-size:34px; font-weight:750; letter-spacing:-0.033em; line-height:1; }
.view-sub{ font-size:13.5px; color:var(--ink-2); margin-top:9px; max-width:62ch; line-height:1.55; }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.search{
  display:flex; align-items:center; gap:9px; padding:9px 14px;
  border-radius:999px; background:var(--surface); border:1px solid var(--rule);
  width:230px; transition:border-color .14s, background .14s;
}
.search:focus-within{ border-color:rgba(77,159,255,0.5); background:rgba(255,255,255,0.05); }
.search svg{ width:14px; height:14px; stroke:var(--ink-3); flex:none; }
.search input{ background:none; border:none; outline:none; font-size:12.5px; width:100%; }
.search input::placeholder{ color:var(--ink-4); }
.search input::-webkit-search-cancel-button{ filter:invert(.5); }
.datechip{
  font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--ink-2);
  padding:9px 14px; border-radius:999px; background:var(--surface);
  border:1px solid var(--rule); white-space:nowrap;
}

/* ─────────────────────────────────────────────── pinned targets
 *
 * A locked strip under the topbar, on every view. Colour here means pace
 * against the calendar, not how full the bar is — see paceOf() in store.js.
 * Read only until opened, so a goal can't be nudged by a stray click.
 */
/* Unpinned by default: it scrolls away with the page so it isn't in the
   way. Pinning is opt-in and remembered. */
.trail{
  position:relative; z-index:35; margin:0 0 2px;
  background:linear-gradient(180deg, rgba(8,14,24,0.97), rgba(8,14,24,0.82));
  border:1px solid var(--rule); border-radius:var(--r-lg);
}
.trail.is-pinned{
  position:sticky; top:0;
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 14px 30px -22px rgba(0,0,0,0.9);
}
.trail-bar{ display:flex; align-items:stretch; }
.trail-strip{
  display:flex; align-items:stretch; gap:0; flex:1; min-width:0;
  padding:0; background:none; border:none; cursor:pointer; text-align:left;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.trail-pin{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:40px; border:none; border-left:1px solid var(--rule);
  background:none; color:var(--ink-4); cursor:pointer;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  transition:color .14s, background .14s;
}
.trail-pin svg{ width:15px; height:15px; }
.trail-pin:hover{ color:var(--ink-2); background:rgba(255,255,255,0.04); }
.trail-pin[aria-pressed="true"]{ color:var(--blue); background:var(--blue-wash); }
.trail-pin[aria-pressed="true"] svg{ fill:color-mix(in srgb, var(--blue) 28%, transparent); }
.trail-chips{ display:flex; flex:1; min-width:0; }
.trail-chip{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:7px;
  padding:13px 18px; border-left:1px solid var(--rule);
  --pace:var(--blue);
}
.trail-chip:first-child{ border-left:none; }
.trail-chip.is-ahead{ --pace:var(--ok); }
.trail-chip.is-on{ --pace:var(--blue); }
.trail-chip.is-slipping{ --pace:var(--due); }
.trail-chip.is-behind{ --pace:var(--late); }
.trail-chip.is-none{ --pace:var(--idle); }

.trail-top{ display:flex; align-items:center; gap:7px; min-width:0; }
.trail-label{
  font-size:9.5px; font-weight:750; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-4); white-space:nowrap;
  /* the pace dot must survive even when the label has to give way */
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.trail-dot{
  width:5px; height:5px; border-radius:50%; flex:none; background:var(--pace);
  box-shadow:0 0 8px color-mix(in srgb, var(--pace) 70%, transparent);
}
/* The figure you've reached is the bright one; the goal beside it reads as
   a reference mark, clearly quieter but no longer near-invisible. */
.trail-nums{ display:flex; align-items:baseline; gap:5px; min-width:0; }
.trail-actual{
  font-size:21px; font-weight:780; letter-spacing:-0.035em; line-height:1;
  font-variant-numeric:tabular-nums; color:#ffffff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trail-goal{
  font-size:11.5px; font-weight:620; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.trail-meter{
  display:block; height:3px; border-radius:999px;
  background:var(--surface-sunk); overflow:hidden;
}
.trail-meter span{
  display:block; height:100%; border-radius:999px; background:var(--pace);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.trail-caret{
  display:flex; align-items:center; padding:0 14px; flex:none;
  border-left:1px solid var(--rule); color:var(--ink-4);
  transition:color .14s;
}
.trail-caret svg{ width:15px; height:15px; transition:transform .24s; }
.trail-strip:hover .trail-caret{ color:var(--blue); }
.trail.is-open .trail-caret svg{ transform:rotate(180deg); }
.trail.is-open .trail-caret{ color:var(--blue); }

.trail-panel{ border-top:1px solid var(--rule); animation:panelin .22s cubic-bezier(.2,.85,.25,1); }
.trail-panel[hidden]{ display:none; }
.trail-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:16px 20px 0;
}
.trail-panel-body{ padding:12px 20px 18px; }
.target-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.target-pace{ color:var(--pace-ink, var(--ink-4)); opacity:.85; }
.target.is-ahead{ --pace-ink:var(--ok); }
.target.is-slipping{ --pace-ink:var(--due); }
.target.is-behind{ --pace-ink:var(--late); }

/* ─────────────────────────────────────────────── views */
.view{ display:none; flex-direction:column; gap:18px; }
.view.is-active{ display:flex; animation:rise .3s cubic-bezier(.2,.8,.2,1); }
@keyframes rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ─────────────────────────────────────────────── layout */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.span-3{ grid-column:span 3; } .span-4{ grid-column:span 4; }
.span-5{ grid-column:span 5; } .span-6{ grid-column:span 6; }
.span-7{ grid-column:span 7; } .span-8{ grid-column:span 8; }
.span-12{ grid-column:span 12; }
@media (max-width:1080px){
  .span-4,.span-5,.span-6,.span-7,.span-8{ grid-column:span 12; }
  /* small stat cards stay two across rather than one per row */
  .span-3{ grid-column:span 6; }
}

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.toolbar-right{ display:flex; align-items:center; gap:10px; }

/* ─────────────────────────────────────────────── card */
.card{
  position:relative; border-radius:var(--r-lg);
  border:1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008)),
    linear-gradient(162deg, rgba(22,28,38,0.78), rgba(10,14,20,0.86));
  backdrop-filter:blur(26px) saturate(140%);
  box-shadow:var(--shadow-1), var(--shadow-2);
  overflow:hidden;
}
/* graphite weave — material, not pattern */
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 5px);
}
.card > *{ position:relative; z-index:1; }
.card-accent{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    linear-gradient(150deg, rgba(14,44,80,0.85), rgba(7,17,30,0.9));
  border-color:rgba(77,159,255,0.18);
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 24px 0;
}
.card-title{ font-size:15px; font-weight:680; letter-spacing:-0.012em; }
.card-sub{ font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.5; }
.card-actions{ display:flex; align-items:center; gap:9px; flex:none; }
.card-body{ padding:18px 24px 22px; }
.card-flush .table-wrap{ border-radius:var(--r-lg); }

/* Tighter variant for dense, glanceable cards — same material, less air. */
.card-compact .card-head{ padding:14px 20px 0; }
.card-compact .card-sub{ margin-top:3px; }
.card-compact .card-body{ padding:8px 20px 14px; }

.card-action{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:24px; text-align:left; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s;
}
.card-action:hover{ transform:translateY(-2px); border-color:rgba(77,159,255,0.34); }
.action-icon{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-wash); border:1px solid rgba(77,159,255,0.2);
}
.action-icon svg{ width:17px; height:17px; stroke:var(--blue-bright); }
.action-title{ font-size:15px; font-weight:680; }
.action-sub{ font-size:11.5px; color:var(--ink-3); line-height:1.5; }

/* ─────────────────────────────────────────────── targets
   The actual number is the whole point of this card, so it carries the most
   weight on the page — bigger and bolder than any other figure in Today. */
.target{ padding:8px 0; border-top:1px solid var(--rule); }
.target:first-child{ border-top:none; padding-top:0; }
.target-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:5px; }
.target-name{ font-size:11.5px; font-weight:620; letter-spacing:-0.005em; color:var(--ink-2); }
.target-right{ display:flex; align-items:baseline; gap:9px; }
.target-actual{ font-size:29px; font-weight:780; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; line-height:1; }
.target-of{ font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; }

/* The goal pill, tinted by the same pace colour as the row it belongs to,
   so it reads as the thing being aimed at rather than a form field. */
.stepper{
  display:flex; align-items:center; gap:2px;
  background:color-mix(in srgb, var(--goal-tint, var(--blue)) 9%, var(--surface-sunk));
  border:1px solid color-mix(in srgb, var(--goal-tint, var(--blue)) 38%, transparent);
  border-radius:999px; padding:3px;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.stepper:hover{
  border-color:color-mix(in srgb, var(--goal-tint, var(--blue)) 62%, transparent);
  background:color-mix(in srgb, var(--goal-tint, var(--blue)) 14%, var(--surface-sunk));
}
.stepper:focus-within{
  border-color:var(--goal-tint, var(--blue));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--goal-tint, var(--blue)) 18%, transparent);
}
.stepper button{
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-3);
  transition:background .14s, color .14s;
}
.stepper button:hover{ background:rgba(77,159,255,0.18); color:var(--blue-bright); }
.stepper button svg{ width:10px; height:10px; stroke:currentColor; stroke-width:2.6; fill:none; }
.stepper .val{
  min-width:58px; text-align:center; font-size:15px; font-weight:760;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em; color:var(--ink);
  background:none; border:none; padding:2px 6px; border-radius:999px;
  font-family:inherit; cursor:pointer;
  transition:background .14s, color .14s;
}
/* the figure is a button, and needs to look like one you can press */
.stepper .val:hover{
  background:color-mix(in srgb, var(--goal-tint, var(--blue)) 22%, transparent);
  color:#fff;
}
.stepper .val:focus-visible{
  outline:2px solid var(--goal-tint, var(--blue)); outline-offset:1px;
}

/* ─────────────────────────────────────────────── goal editor popover
   Anchored to the figure you clicked, holding a slider for a rough set and
   a field for an exact one. Lives on body so re-renders can't tear it out. */
.goal-pop{
  position:fixed; z-index:110; width:min(280px, calc(100vw - 16px));
  display:flex; flex-direction:column; gap:11px;
  padding:15px 16px 14px; border-radius:var(--r-lg);
  background:linear-gradient(200deg,#141c28,#0a1018);
  border:1px solid var(--rule-strong);
  box-shadow:0 30px 60px -24px rgba(0,0,0,0.9);
  animation:panelin .16s cubic-bezier(.2,.85,.25,1);
}
.goal-pop-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.goal-pop-title{ font-size:12px; font-weight:680; color:var(--ink); }
.goal-pop-now{ font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.goal-pop-num{
  width:100%; padding:9px 12px; border-radius:var(--r-sm);
  background:var(--surface-sunk); border:1px solid var(--rule-strong);
  color:var(--ink); font-size:17px; font-weight:740; text-align:center;
  font-variant-numeric:tabular-nums; font-family:inherit; outline:none;
}
.goal-pop-num:focus{ border-color:var(--blue); background:rgba(77,159,255,0.1); }
.goal-pop-range{
  width:100%; height:4px; margin:2px 0; padding:0; appearance:none;
  border-radius:999px; background:var(--surface-sunk); outline:none; cursor:pointer;
}
.goal-pop-range::-webkit-slider-thumb{
  appearance:none; width:17px; height:17px; border-radius:50%;
  background:var(--blue); border:2px solid #0a1018; cursor:grab;
  box-shadow:0 0 0 1px var(--blue), 0 4px 10px -2px rgba(0,0,0,0.8);
}
.goal-pop-range::-webkit-slider-thumb:active{ cursor:grabbing; background:var(--blue-bright); }
.goal-pop-range::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; border:2px solid #0a1018;
  background:var(--blue); cursor:grab;
}
.goal-pop-scale{
  display:flex; justify-content:space-between;
  font-size:9.5px; color:var(--ink-4); font-variant-numeric:tabular-nums;
  margin-top:-6px;
}
.goal-pop-foot{ display:flex; gap:8px; justify-content:flex-end; margin-top:2px; }
/* The pill's tint follows the row's pace. Kept separate from --pace-ink so
   the foot text keeps its own quieter treatment. */
.target{ --goal-tint:var(--blue); }
.target.is-ahead{ --goal-tint:var(--ok); }
.target.is-slipping{ --goal-tint:var(--due); }
.target.is-behind{ --goal-tint:var(--late); }

.meter{ height:5px; border-radius:999px; background:var(--surface-sunk); overflow:hidden; }
.meter span{ display:block; height:100%; border-radius:999px; transition:width .55s cubic-bezier(.2,.8,.2,1); }
.meter-blue span{ background:linear-gradient(90deg,var(--blue-deep),var(--blue)); }
.meter-green span{ background:linear-gradient(90deg,#177a58,var(--ok)); }
.meter-amber span{ background:linear-gradient(90deg,#8d6412,var(--due)); }
.target-foot{ font-size:10px; color:var(--ink-4); margin-top:4px; font-variant-numeric:tabular-nums; }

/* ─────────────────────────────────────────────── stat rows */
.stat{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid var(--rule); }
.stat:first-child{ border-top:none; padding-top:0; }
.stat-label{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); }
.stat-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.stat-value{ font-size:24px; font-weight:750; letter-spacing:-0.035em; font-variant-numeric:tabular-nums; line-height:1; }

/* ─────────────────────────────────────────────── tasks */
.task{
  display:flex; align-items:flex-start; gap:13px; padding:13px 12px;
  border-radius:var(--r-sm); transition:background .14s;
}
.task:hover{ background:rgba(255,255,255,0.035); }
.task:hover .task-remove{ opacity:1; }
.task.is-done{ opacity:.5; }
.task.is-done .task-title{ text-decoration:line-through; color:var(--ink-3); }
.tick{
  width:20px; height:20px; flex:none; margin-top:1px; border-radius:6px;
  border:1.5px solid var(--rule-strong); background:var(--surface-sunk);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s, border-color .18s, transform .12s;
}
.tick:hover{ border-color:var(--blue); }
.tick:active{ transform:scale(.92); }
.tick svg{ width:11px; height:11px; stroke:#04121f; stroke-width:3.2; opacity:0; transition:opacity .12s; }
.tick.is-on{ background:linear-gradient(135deg,var(--blue-bright),var(--blue)); border-color:transparent; }
.tick.is-on svg{ opacity:1; }
.task-body{ flex:1; min-width:0; cursor:pointer; }
.task-title{ font-size:13.5px; font-weight:560; line-height:1.4; }
.task-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
/* The SMART "measurable" line — this is what tells you the task is done,
   so it needs to be readable, not decorative. */
.task-note{ font-size:11px; color:var(--ink-2); }
.task-remove{
  flex:none; width:26px; height:26px; border-radius:7px; opacity:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .14s, background .14s;
}
.task-remove:hover{ background:rgba(255,95,109,0.16); }
.task-remove svg{ width:12px; height:12px; stroke:var(--ink-3); stroke-width:2.4; }
.task-remove:hover svg{ stroke:var(--late); }

/* ─────────────────────────────────────────────── pills, chips, tags */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px;
  font-size:10.5px; font-weight:680; white-space:nowrap; letter-spacing:0.005em;
}
.pill .dot{ width:5px; height:5px; border-radius:50%; flex:none; }
.pill-prospect{ background:rgba(77,159,255,0.13); color:var(--blue-bright); }
.pill-prospect .dot{ background:var(--blue); }
.pill-lead{ background:rgba(240,180,41,0.13); color:#ffd379; }
.pill-lead .dot{ background:var(--due); }
.pill-client{ background:rgba(53,211,154,0.13); color:#74e8bc; }
.pill-client .dot{ background:var(--ok); }
.pill-late{ background:rgba(255,95,109,0.15); color:#ff9aa3; }
.pill-due{ background:rgba(240,180,41,0.15); color:#ffd379; }
.pill-ok{ background:rgba(53,211,154,0.13); color:#74e8bc; }
.pill-idle{ background:rgba(255,255,255,0.055); color:var(--ink-3); }
.pill-example{ background:transparent; color:var(--ink-4); border:1px dashed var(--rule-strong); }
.chip{
  font-size:11px; font-weight:640; color:var(--ink-2);
  padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--rule); white-space:nowrap;
}
.tag{
  font-size:9px; font-weight:750; letter-spacing:0.09em; text-transform:uppercase;
  padding:3px 7px; border-radius:4px;
  background:rgba(77,159,255,0.12); color:var(--blue-bright);
}
.tag-manual{ background:rgba(255,255,255,0.055); color:var(--ink-4); }

/* ─────────────────────────────────────────────── buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 17px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:660; letter-spacing:-0.005em;
  border:1px solid var(--rule); background:var(--surface-2); color:var(--ink);
  transition:background .14s, transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s;
  white-space:nowrap;
}
.btn:hover{ background:rgba(255,255,255,0.1); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:14px; height:14px; flex:none; }
.btn-primary{
  background:linear-gradient(135deg,var(--blue-bright),var(--blue));
  border-color:transparent; color:#031423;
}
.btn-primary:hover{ box-shadow:0 14px 30px -14px rgba(77,159,255,0.75); }
.btn-danger{ color:#ff9aa3; border-color:rgba(255,95,109,0.28); background:rgba(255,95,109,0.08); }
.btn-danger:hover{ background:rgba(255,95,109,0.16); }
.btn-sm{ padding:8px 13px; font-size:11.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.4; pointer-events:none; }
.icon-btn{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--rule);
  transition:background .14s;
}
.icon-btn:hover{ background:rgba(255,255,255,0.11); }
.icon-btn svg{ width:14px; height:14px; stroke:var(--ink-2); }
.icon-btn:hover svg{ stroke:var(--ink); }

/* ─────────────────────────────────────────────── tabs / segmented */
.tabs{ display:flex; gap:5px; flex-wrap:wrap; }
.tab{
  padding:9px 15px; border-radius:999px;
  font-size:12px; font-weight:640; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--rule);
  transition:color .14s, background .14s;
}
.tab:hover{ color:var(--ink); }
.tab.is-active{
  color:var(--ink);
  background:linear-gradient(135deg, rgba(77,159,255,0.22), rgba(77,159,255,0.04));
  border-color:rgba(77,159,255,0.34);
}
.tab .n{ margin-left:6px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.tab.is-active .n{ color:var(--blue-bright); }

.segmented{ display:flex; padding:3px; gap:2px; border-radius:999px; background:var(--surface-sunk); border:1px solid var(--rule); }
.segmented button{
  padding:6px 13px; border-radius:999px; font-size:11.5px; font-weight:640; color:var(--ink-3);
  transition:background .14s, color .14s;
}
.segmented button.is-active{ background:var(--surface-2); color:var(--ink); }

/* ─────────────────────────────────────────────── tables */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
thead th{
  position:sticky; top:0; z-index:2;
  text-align:left; white-space:nowrap;
  padding:13px 16px;
  font-size:9.5px; font-weight:750; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-3);
  background:linear-gradient(180deg, rgba(20,26,35,0.98), rgba(14,19,26,0.98));
  border-bottom:1px solid var(--rule);
  backdrop-filter:blur(10px);
}
thead th.center{ text-align:center; }
tbody td{
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:middle; white-space:nowrap;
}
tbody td.center{ text-align:center; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background .12s; }
tbody tr:hover{ background:rgba(255,255,255,0.028); }
tbody tr.is-clickable{ cursor:pointer; }
.cell-name{ font-weight:640; letter-spacing:-0.008em; display:flex; align-items:center; gap:8px; }
.cell-sub{ font-size:10.5px; color:var(--ink-4); margin-top:3px; }
.muted{ color:var(--ink-4); }
.right{ text-align:right; }
.mono{ font-variant-numeric:tabular-nums; }

/* outreach progress track — replaces four spreadsheet columns */
.track{ display:inline-flex; align-items:center; gap:5px; }
.track-node{
  width:19px; height:19px; border-radius:6px; flex:none;
  border:1.5px solid var(--rule-strong); background:var(--surface-sunk);
  display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:750; color:var(--ink-4);
  cursor:pointer; transition:background .16s, border-color .16s, color .16s, transform .1s;
}
.track-node:hover{ border-color:var(--blue); }
.track-node:active{ transform:scale(.9); }
.track-node.is-on{ background:linear-gradient(135deg,var(--blue-bright),var(--blue)); border-color:transparent; color:#04121f; }
.track-node.is-on-green{ background:linear-gradient(135deg,#63e6b6,var(--ok)); border-color:transparent; color:#04211a; }
.track-rule{ width:7px; height:1px; background:var(--rule-strong); flex:none; }

.checkbox{
  width:18px; height:18px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--rule-strong); background:var(--surface-sunk); cursor:pointer;
  transition:background .16s, border-color .16s;
}
.checkbox svg{ width:10px; height:10px; stroke:#04121f; stroke-width:3.2; opacity:0; }
.checkbox.is-on{ background:linear-gradient(135deg,var(--blue-bright),var(--blue)); border-color:transparent; }
.checkbox.is-on svg{ opacity:1; }
.checkbox.is-on-green{ background:linear-gradient(135deg,#63e6b6,var(--ok)); border-color:transparent; }
.checkbox.is-on-green svg{ opacity:1; }

/* ─────────────────────────────────────────────── empty states */
.empty{ padding:40px 20px; text-align:center; }
.empty h3{ font-size:14.5px; font-weight:660; margin-bottom:7px; }
.empty p{ font-size:12.5px; color:var(--ink-3); line-height:1.65; max-width:44ch; margin:0 auto 16px; }

/* ─────────────────────────────────────────────── board */
.board{ display:grid; grid-template-columns:repeat(5,minmax(210px,1fr)); gap:14px; overflow-x:auto; padding-bottom:6px; }
.board-col{ display:flex; flex-direction:column; gap:10px; min-width:210px; }
.board-head{ display:flex; align-items:center; justify-content:space-between; padding:0 4px; }
.board-title{ font-size:10px; font-weight:750; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-3); }
.board-count{ font-size:10.5px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.board-drop{
  flex:1; min-height:110px; padding:9px; display:flex; flex-direction:column; gap:9px;
  border-radius:var(--r-md); border:1px dashed var(--rule); background:rgba(0,0,0,0.2);
}
.board-card{
  padding:13px 14px; border-radius:var(--r-sm);
  background:linear-gradient(165deg, rgba(28,35,46,0.9), rgba(15,20,27,0.9));
  border:1px solid var(--rule); cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s;
}
.board-card:hover{ transform:translateY(-2px); border-color:rgba(77,159,255,0.3); }
.board-card-title{ font-size:12.5px; font-weight:640; line-height:1.4; }
.board-card-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; font-size:10.5px; color:var(--ink-4); }
.board-empty{ font-size:11px; color:var(--ink-4); padding:12px 4px; line-height:1.55; }

/* ─────────────────────────────────────────────── agenda / list rows */
.row{
  display:flex; align-items:center; gap:14px; padding:13px 14px;
  border-radius:var(--r-sm); background:rgba(0,0,0,0.2); border:1px solid var(--rule);
}
.row + .row{ margin-top:9px; }
.row-date{
  width:46px; height:46px; flex:none; border-radius:11px;
  background:var(--blue-wash); border:1px solid rgba(77,159,255,0.16);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.row-date .d{ font-size:16px; font-weight:750; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.row-date .m{ font-size:8.5px; text-transform:uppercase; letter-spacing:0.11em; color:var(--ink-4); margin-top:3px; }
.row-body{ flex:1; min-width:0; }
.row-title{ font-size:13px; font-weight:600; }
.row-meta{ font-size:10.5px; color:var(--ink-4); margin-top:3px; }
.row-right{ flex:none; text-align:right; }
.row-amount{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.015em; }

/* money summary */
.summary-line{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 0; border-top:1px solid var(--rule); }
.summary-line:first-child{ border-top:none; padding-top:0; }
.summary-label{ font-size:12.5px; color:var(--ink-2); }
.summary-value{ font-size:17px; font-weight:720; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; }
.summary-line.is-total .summary-value{ font-size:24px; }
.value-in{ color:var(--ok); } .value-out{ color:var(--ink); }

.stat-card{ padding:22px 24px; }
.stat-card .label{ font-size:10.5px; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-4); }
.stat-card .value{ font-size:32px; font-weight:760; letter-spacing:-0.038em; margin-top:12px; font-variant-numeric:tabular-nums; line-height:1; }
.stat-card .note{ font-size:11px; color:var(--ink-4); margin-top:9px; }

/* ─────────────────────────────────────────────── disclosure */
.disclosure{
  border-radius:var(--r-lg); border:1px solid var(--rule);
  background:linear-gradient(162deg, rgba(22,28,38,0.7), rgba(10,14,20,0.8));
  backdrop-filter:blur(24px); overflow:hidden;
}
.disclosure summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; cursor:pointer; list-style:none;
}
.disclosure summary::-webkit-details-marker{ display:none; }
.disclosure .chev{ width:15px; height:15px; stroke:var(--ink-3); flex:none; transition:transform .24s; }
.disclosure[open] .chev{ transform:rotate(180deg); }
.disclosure-body{ padding:0 24px 24px; display:flex; flex-direction:column; gap:12px; }
.script{ padding:17px 18px; border-radius:var(--r-md); background:rgba(0,0,0,0.26); border:1px solid var(--rule); }
.script header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.script-tag{ font-size:9.5px; font-weight:750; letter-spacing:0.13em; text-transform:uppercase; color:var(--blue-bright); }
.script-when{ font-size:10.5px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.script-subject{ font-size:12px; color:var(--ink-2); font-style:italic; margin-bottom:10px; }
.script-body{
  font-family:var(--sans); font-size:12.5px; line-height:1.7; color:var(--ink);
  white-space:pre-wrap; margin:0;
}

/* ─────────────────────────────────────────────── dock */
.dock{
  position:fixed; left:var(--sidebar-w); right:0; bottom:0; height:var(--dock-h); z-index:40;
  display:flex; align-items:center; gap:9px; padding:0 38px;
  background:linear-gradient(0deg, rgba(4,6,10,0.97), rgba(7,13,22,0.86));
  backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--rule);
}
.dock-label{ font-size:9.5px; font-weight:750; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-4); white-space:nowrap; margin-right:3px; }
.dock-tile{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  font-size:12px; font-weight:640; white-space:nowrap;
  background:var(--surface-2); border:1px solid var(--rule);
  transition:background .14s, transform .14s;
}
.dock-tile:hover{ background:rgba(255,255,255,0.1); transform:translateY(-2px); }
.dock-tile svg{ width:13px; height:13px; stroke:var(--blue-bright); flex:none; }
.dock-more{ margin-left:auto; }
@media (max-width:900px){ .dock{ left:0; padding:0 16px; } }

/* ─────────────────────────────────────────────── drawer */
.scrim{
  position:fixed; inset:0; z-index:60; background:rgba(3,6,10,0.6);
  backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .26s;
}
.scrim.is-open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(460px,100vw); z-index:70;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.85,.25,1);
  background:linear-gradient(200deg,#141b26,#080d14);
  border-left:1px solid var(--rule-strong);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,0.9);
  display:flex; flex-direction:column; overflow:hidden;
}
.drawer.is-open{ transform:none; }
.drawer-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:22px 24px 18px; border-bottom:1px solid var(--rule);
}
.drawer-title{ font-size:20px; font-weight:730; letter-spacing:-0.028em; line-height:1.2; }
.drawer-sub{ font-size:11.5px; color:var(--ink-3); margin-top:7px; }
.drawer-body{ flex:1; overflow-y:auto; padding:20px 24px 28px; display:flex; flex-direction:column; gap:22px; }
.drawer-section h4{
  font-size:9.5px; font-weight:750; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:12px;
}
.detail{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:9px 0; border-top:1px solid rgba(255,255,255,0.045); }
.detail:first-of-type{ border-top:none; }
.detail dt{ font-size:11.5px; color:var(--ink-3); flex:none; }
.detail dd{ margin:0; font-size:12.5px; text-align:right; word-break:break-word; }
.drawer-foot{ padding:16px 24px; border-top:1px solid var(--rule); display:flex; gap:10px; }

/* ─────────────────────────────────────────────── sheets (modals) */
.sheet-host{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:flex-start; justify-content:center;
  padding:6vh 20px 40px; overflow-y:auto;
  background:rgba(3,6,10,0.74); backdrop-filter:blur(14px);
  animation:fadein .22s ease;
}
.sheet-host[hidden]{ display:none; }
@keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
.sheet{
  width:min(560px,100%); border-radius:var(--r-xl);
  border:1px solid var(--rule-strong);
  background:linear-gradient(172deg,#111925,#070c13);
  box-shadow:0 60px 130px -50px rgba(0,0,0,0.95);
  animation:sheetin .32s cubic-bezier(.2,.85,.25,1);
  overflow:hidden;
}
.sheet-wide{ width:min(920px,100%); }
@keyframes sheetin{ from{ opacity:0; transform:translateY(20px) scale(.985); } to{ opacity:1; transform:none; } }
.sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 24px; border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:3;
  background:rgba(12,18,28,0.92); backdrop-filter:blur(14px);
}
.sheet-body{ padding:24px 28px 28px; }

/* forms */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.field > span{ font-size:11.5px; font-weight:650; color:var(--ink-2); }
.field .hint{ font-size:10.5px; color:var(--ink-4); font-weight:400; }
.field input,.field textarea,.field select{
  padding:11px 13px; border-radius:var(--r-xs);
  background:var(--surface-sunk); border:1px solid var(--rule); color:var(--ink);
  font-size:12.5px; outline:none; width:100%;
  transition:border-color .14s, background .14s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--blue); background:rgba(0,0,0,0.36);
}
.field textarea{ resize:vertical; line-height:1.6; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-actions{ display:flex; gap:10px; margin-top:6px; }
.smart-key{
  display:inline-block; width:17px; height:17px; line-height:17px; text-align:center;
  border-radius:5px; margin-right:8px;
  background:rgba(77,159,255,0.15); color:var(--blue-bright);
  font-size:9.5px; font-weight:800;
}
.callout{
  display:flex; gap:10px; padding:13px 15px; border-radius:var(--r-sm);
  background:rgba(240,180,41,0.07); border:1px solid rgba(240,180,41,0.2);
  font-size:11.5px; line-height:1.6; color:#ffdda1; margin-bottom:20px;
}

/* ─────────────────────────────────────────────── pitch sheet */
.pitch{ padding:0 52px 56px; }
@media (max-width:720px){ .pitch{ padding:0 24px 40px; } }
.pitch-hero{ padding:46px 0 30px; border-bottom:1px solid var(--rule); margin-bottom:34px; }
.pitch-hero h2{ font-size:38px; line-height:1.1; letter-spacing:-0.038em; max-width:19ch; margin-top:16px; }
.pitch-hero p{ font-size:15px; line-height:1.7; color:var(--ink-2); max-width:56ch; margin-top:18px; }
.pitch-section{ margin-bottom:36px; }
.pitch-section h3{
  font-size:10px; font-weight:750; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.pitch-section p{ font-size:14px; line-height:1.8; color:var(--ink-2); max-width:66ch; }
.proof-grid,.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:720px){ .proof-grid,.pkg-grid{ grid-template-columns:1fr; } }
.slot{
  padding:20px 16px; border-radius:var(--r-md); text-align:center;
  border:1px dashed var(--rule-strong); background:rgba(255,255,255,0.015);
  font-size:11.5px; color:var(--ink-4); line-height:1.55;
}
.pkg{
  padding:24px 22px; border-radius:var(--r-lg);
  border:1px solid var(--rule); background:rgba(255,255,255,0.028);
  display:flex; flex-direction:column; gap:13px;
}
.pkg.is-featured{
  border-color:rgba(77,159,255,0.42);
  background:linear-gradient(165deg, rgba(77,159,255,0.12), rgba(255,255,255,0.015));
}
.pkg-tier{ font-size:9.5px; font-weight:750; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-4); }
.pkg.is-featured .pkg-tier{ color:var(--blue-bright); }
.pkg-name{ font-size:17px; font-weight:720; letter-spacing:-0.022em; }
.pkg-price{ font-size:25px; font-weight:760; letter-spacing:-0.035em; font-variant-numeric:tabular-nums; }
.pkg-price span{ font-size:11.5px; font-weight:400; color:var(--ink-4); letter-spacing:0; }
.pkg ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pkg li{ position:relative; padding-left:19px; font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.pkg li::before{
  content:""; position:absolute; left:0; top:6px; width:9px; height:5px;
  border-left:1.8px solid var(--ok); border-bottom:1.8px solid var(--ok);
  transform:rotate(-45deg);
}
.fineprint{ font-size:10.5px; color:var(--ink-4); text-align:center; margin-top:14px; }
.pitch-cta{
  padding:36px; border-radius:var(--r-lg); text-align:center;
  background:linear-gradient(135deg, rgba(77,159,255,0.16), rgba(11,35,64,0.6));
  border:1px solid rgba(77,159,255,0.22);
}
.pitch-cta h3{ font-size:21px; font-weight:730; letter-spacing:-0.028em; }
.pitch-cta p{ font-size:13px; color:var(--ink-2); margin-top:8px; }

/* agreement */
.agreement-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px; }
@media (max-width:820px){ .agreement-layout{ grid-template-columns:1fr; } }
.agreement-preview{
  margin:0; padding:24px; border-radius:var(--r-md);
  background:rgba(0,0,0,0.32); border:1px solid var(--rule);
  font-family:var(--sans); font-size:12px; line-height:1.85; color:var(--ink-2);
  white-space:pre-wrap; max-height:520px; overflow-y:auto;
}
.agreement-preview strong{ color:var(--ink); font-weight:700; }
.agreement-preview em{ color:var(--blue-bright); font-style:normal; font-weight:650; }

/* ─────────────────────────────────────────────── daily commitment
   An implementation intention, written as a sentence rather than a form.
   The inputs sit inline so it reads as one statement he made, not a setting. */
/* Two short, deliberate lines rather than one sentence that wraps unpredictably
   — reads the same at span-4 as it would at full width. */
.anchor-sentence{ display:flex; flex-direction:column; gap:7px; }
.anchor-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; letter-spacing:-0.012em; }
.anchor-fixed{ color:var(--ink-2); flex:none; }
.anchor-input{
  flex:1 1 auto; min-width:0; max-width:250px; padding:6px 10px;
  border:none; border-bottom:1.5px solid rgba(77,159,255,0.45);
  background:rgba(77,159,255,0.06); border-radius:var(--r-xs) var(--r-xs) 0 0;
  font-size:13.5px; font-weight:600; color:var(--blue-bright);
  outline:none; transition:background .16s, border-color .16s;
}
.anchor-commit{ flex:none; }

/* Committed: a statement already made, not a form still waiting on you. */
.anchor-vow{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.anchor-vow p{
  font-size:13.5px; font-weight:600; line-height:1.6; letter-spacing:-0.012em;
  color:var(--ink-2); margin:0;
}
.anchor-vow strong{ color:var(--blue-bright); font-weight:700; }
.anchor-edit{ flex:none; }
.anchor-input::placeholder{ color:var(--ink-4); font-weight:500; }
.anchor-input:focus{ background:rgba(77,159,255,0.12); border-bottom-color:var(--blue); }
.stepper-inline{ vertical-align:middle; }
.stepper-inline .val{ min-width:26px; font-size:13.5px; }
/* Short word, not a sentence — a fixed, modest width rather than flex:1,
   so it never crowds out the "a day." that follows it. */
.anchor-input-unit{ flex:0 1 92px; min-width:60px; }

.anchor-progress{ margin-top:12px; padding-top:12px; border-top:1px solid var(--rule); }
.anchor-count{ font-size:12px; color:var(--ink-2); margin-bottom:7px; }
.anchor-count strong{ font-size:22px; font-weight:760; letter-spacing:-0.035em; color:var(--ink); }
.anchor-count.is-done strong{ color:var(--ok); }
.anchor-note{ font-size:10.5px; color:var(--ink-4); margin-top:6px; }

/* ─────────────────────────────────────────────── task expander */
.task{ flex-direction:column; align-items:stretch; gap:0; }
.task-main{ display:flex; align-items:flex-start; gap:13px; }
.task.is-expanded{ background:rgba(255,255,255,0.03); }
.task-expand{
  flex:none; width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s;
}
.task-expand:hover{ background:rgba(255,255,255,0.08); }
.task-expand svg{ width:13px; height:13px; stroke:var(--ink-3); transition:transform .22s; }
.task-expand.is-open svg{ transform:rotate(180deg); stroke:var(--blue); }

.script-panel{
  margin:13px 0 4px 33px; padding:17px 18px;
  border-radius:var(--r-md); border:1px solid var(--rule);
  background:rgba(0,0,0,0.3);
  animation:panelin .22s cubic-bezier(.2,.85,.25,1);
}
@keyframes panelin{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.script-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; flex-wrap:wrap; }
.script-subject-line{
  font-size:12.5px; color:var(--ink); padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--rule);
}
.script-subject-line span{
  font-size:9.5px; font-weight:750; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-4); margin-right:10px;
}
.script-panel-actions{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:15px; padding-top:14px; border-top:1px solid var(--rule);
}
.script-panel-actions .btn{ text-decoration:none; }

/* ─────────────────────────────────────────────── funnel */
.funnel-row{ display:flex; align-items:center; gap:13px; margin-bottom:9px; }
.funnel-label{ width:82px; flex:none; font-size:11.5px; font-weight:640; color:var(--ink-2); }
.funnel-track{ flex:1; height:26px; border-radius:var(--r-xs); background:var(--surface-sunk); overflow:hidden; }
.funnel-bar{ display:block; height:100%; border-radius:var(--r-xs); transition:width .55s cubic-bezier(.2,.8,.2,1); }
.funnel-sent{ background:linear-gradient(90deg,var(--blue-deep),var(--blue)); }
.funnel-replied{ background:linear-gradient(90deg,#8d6412,var(--due)); }
.funnel-booked{ background:linear-gradient(90deg,#1a6f8f,#42b8d4); }
.funnel-clients{ background:linear-gradient(90deg,#177a58,var(--ok)); }
.funnel-value{ width:28px; flex:none; text-align:right; font-size:14px; font-weight:720; font-variant-numeric:tabular-nums; }

.funnel-rates{ display:flex; gap:22px; flex-wrap:wrap; margin-top:17px; padding-top:15px; border-top:1px solid var(--rule); }
.funnel-rates span{ font-size:12px; color:var(--ink-3); }
.funnel-rates strong{ font-size:17px; font-weight:740; letter-spacing:-0.025em; color:var(--ink); margin-right:4px; }
.funnel-sample{
  margin-top:17px; padding:12px 14px; border-radius:var(--r-sm);
  background:rgba(77,159,255,0.06); border:1px solid rgba(77,159,255,0.16);
  font-size:11.5px; line-height:1.65; color:var(--ink-2);
}
.funnel-band{ margin-top:12px; font-size:11px; line-height:1.65; color:var(--ink-4); }
.funnel-band strong{ color:var(--ink-2); font-weight:700; }

/* ─────────────────────────────────────────────── consistency strip
   Filled cells are days he hit the target. Future cells are simply blank —
   nothing to judge yet. A past working day that fell short gets a
   deliberately faint warm tint: enough to register as a gap worth avoiding
   next time, never a loud red flag. */
.streak-headline{
  font-size:13px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.streak-headline strong{ font-size:30px; font-weight:760; letter-spacing:-0.038em; color:var(--ink); margin-right:4px; }

/* Arrows sit where the outermost boxes used to be, flanking a 13-day strip. */
.streak-nav{ display:flex; align-items:flex-start; gap:6px; margin:18px 0 12px; }
.streak-arrow{ flex:none; }
.streak-arrow{
  flex:none; width:22px; height:26px; margin-top:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:5px; border:1px solid var(--rule); background:var(--surface-sunk);
  color:var(--ink-3); transition:background .14s, color .14s, border-color .14s;
}
.streak-arrow:hover{ background:rgba(77,159,255,0.16); color:var(--blue-bright); border-color:rgba(77,159,255,0.4); }
.streak-arrow svg{ width:11px; height:11px; }
/* min-width:0 is what stops the columns forcing the row wider than the card
   and shoving the right arrow off the screen. The inner track centres itself
   when the days fit, and scrolls (or drags) when they don't. */
.streak-strip{
  flex:1; min-width:0; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; cursor:grab;
  /* today's box carries an outline sitting 3.5px proud of it; without this
     padding the scroll container clips the top of that ring */
  padding:5px 0 1px;
}
.streak-strip::-webkit-scrollbar{ display:none; }
/* without this a real mouse drag selects the date text instead of panning */
.streak-strip.is-dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.streak-strip.is-dragging .streak-col{ pointer-events:none; }
.streak-track{ display:flex; align-items:flex-start; gap:3px; margin:0 auto; width:max-content; }
.streak-col{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:none; }
.streak-day{
  width:20px; height:26px; border-radius:4px; flex:none;
  background:rgba(255,255,255,0.05); border:1px solid transparent;
  transition:background .3s, transform .2s;
}
.streak-date{
  display:flex; flex-direction:column; align-items:center;
  font-size:8px; line-height:1.3; letter-spacing:-0.01em; color:var(--ink-4); white-space:nowrap;
}
.streak-dow{
  text-transform:uppercase; letter-spacing:0.05em; font-weight:700;
  color:var(--ink-3); font-size:7.5px;
}
.streak-num{ font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:600; }
.streak-mon{ text-transform:uppercase; letter-spacing:0.04em; opacity:.75; }
/* Weekends are not failures, so their labels sit back rather than shout. */
.streak-col.is-weekend .streak-dow,
.streak-col.is-weekend .streak-num{ color:var(--ink-4); font-weight:500; }
.streak-day.is-weekend{ background:rgba(255,255,255,0.025); }
.streak-day.is-active{
  background:linear-gradient(180deg,var(--blue-bright),var(--blue-deep));
  box-shadow:0 0 12px -3px rgba(77,159,255,0.6);
}
/* A working day, already past, that missed the target. */
.streak-day.is-missed{
  background:rgba(255,95,109,0.20);
  border-color:rgba(255,95,109,0.45);
}
/* Today, outlined regardless of whether it is lit yet — the ring sits
   outside the box so it never fights with the fill colour. */
.streak-day.is-today{
  outline:1.5px solid var(--blue-bright); outline-offset:2px;
}
.streak-note{ font-size:11px; line-height:1.65; color:var(--ink-4); }

/* ─────────────────────────────────────────────── table legibility
   --ink-4 is right for throwaway placeholders, but too faint for real
   content like a town name you actually read down the column. */
.cell-location{ color:var(--ink-2); }

/* ─────────────────────────────────────────────── script library */
.script-row td{ cursor:pointer; }
.script-chev{ display:inline-flex; color:var(--ink-3); transition:transform .22s, color .14s; }
.script-chev svg{ width:14px; height:14px; }
.script-chev.is-open{ transform:rotate(180deg); color:var(--blue); }
.script-row:hover .script-chev{ color:var(--blue-bright); }
.script-detail-row td{ padding:0 16px 16px; background:rgba(0,0,0,0.16); }
.script-detail{
  padding:16px 18px; border-radius:var(--r-md);
  background:rgba(0,0,0,0.28); border:1px solid var(--rule);
}
.script-detail .script-body{ margin:0 0 14px; }

/* ─────────────────────────────────────────────── readiness & cooling */
.readiness{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:640; color:var(--ink-2); white-space:nowrap;
}
.readiness-dot{ width:7px; height:7px; border-radius:50%; background:var(--rc); flex:none; box-shadow:0 0 8px -1px var(--rc); }

.cooling{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-3); white-space:nowrap; }
.cooling-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.cooling-new    .cooling-dot{ background:var(--ink-4); }
.cooling-warm   .cooling-dot{ background:var(--ok); box-shadow:0 0 8px -1px var(--ok); }
.cooling-cooling .cooling-dot{ background:var(--due); }
.cooling-cold   .cooling-dot{ background:#8a6a3a; }
.cooling-dormant .cooling-dot{ background:var(--ink-4); border:1px solid var(--ink-3); }
.cooling-dormant{ color:var(--ink-4); }

/* pickers in the drawer */
.picker{ display:flex; gap:6px; flex-wrap:wrap; }
.picker-opt{
  padding:7px 12px; border-radius:999px; font-size:11.5px; font-weight:620;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-3);
  transition:background .14s, color .14s, border-color .14s;
}
.picker-opt:hover{ color:var(--ink); border-color:var(--rule-strong); }
.picker-opt.is-on{
  color:var(--ink); border-color:var(--rc, var(--blue));
  background:color-mix(in srgb, var(--rc, var(--blue)) 18%, transparent);
}
.picker-tight .picker-opt{ padding:6px 11px; }
.picker-hint{ font-size:11px; line-height:1.6; color:var(--ink-4); margin-top:10px; }
.picker-hint strong{ color:var(--ink-2); }

/* timeline */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--rule); }
.timeline-item{ position:relative; padding:7px 0 7px 22px; display:flex; gap:12px; align-items:baseline; }
.timeline-item::before{
  content:""; position:absolute; left:1px; top:12px; width:9px; height:9px; border-radius:50%;
  background:var(--ink-4); border:2px solid var(--graphite-2);
}
.timeline-out::before{ background:var(--blue); }
.timeline-in::before{ background:var(--ok); }
.timeline-date{ font-size:10.5px; color:var(--ink-4); font-variant-numeric:tabular-nums; width:52px; flex:none; }
.timeline-label{ font-size:12px; color:var(--ink-2); }

/* ─────────────────────────────────────────────── focus session */
.session{ position:fixed; inset:0; z-index:95; display:none; flex-direction:column;
  background:linear-gradient(175deg,#080d16,#04070c); }
body.session-open .session{ display:flex; animation:fadein .24s ease; }
body.session-open{ overflow:hidden; }
.session-bar{ padding:20px 40px 0; }
.session-progress{ height:3px; border-radius:999px; background:var(--surface-sunk); overflow:hidden; }
.session-progress span{ display:block; height:100%; background:linear-gradient(90deg,var(--blue-deep),var(--blue-bright));
  transition:width .4s cubic-bezier(.2,.8,.2,1); }
.session-meta{ display:flex; align-items:center; gap:16px; margin-top:14px;
  font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.session-sent{ margin-right:auto; color:var(--ok); }
.session-body{ flex:1; overflow-y:auto; padding:34px 40px 40px;
  width:min(760px,100%); margin:0 auto; display:flex; flex-direction:column; gap:26px; }
.session-account h2{ font-size:31px; font-weight:750; letter-spacing:-0.032em; margin-top:10px; }
.session-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.session-hint{ font-size:12px; color:var(--ink-3); margin-top:12px; line-height:1.6; }
.session-message{ padding:24px 26px; border-radius:var(--r-lg);
  background:rgba(255,255,255,0.028); border:1px solid var(--rule); }
.session-subject{ font-size:13.5px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--rule); }
.session-subject span{ font-size:9.5px; font-weight:750; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--ink-4); margin-right:11px; }
.session-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.session-actions .btn{ text-decoration:none; }

/* ─────────────────────────────────────────────── motion */
@keyframes pulseGlow{
  0%{ box-shadow:0 0 0 0 rgba(77,159,255,0.5); }
  100%{ box-shadow:0 0 0 12px rgba(77,159,255,0); }
}
.is-pulsing{ animation:pulseGlow .5s cubic-bezier(.2,.8,.2,1); }
.is-leaving{ opacity:0; transform:translateX(14px); transition:opacity .22s, transform .22s; }

/* ─────────────────────────────────────────────── suggestion */
.suggestion{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:17px 20px; border-radius:var(--r-lg);
  background:linear-gradient(140deg, rgba(77,159,255,0.12), rgba(255,255,255,0.02));
  border:1px solid rgba(77,159,255,0.24);
}
.suggestion-title{ font-size:13.5px; font-weight:680; }
.suggestion-body{ font-size:12px; color:var(--ink-2); margin-top:5px; line-height:1.6; max-width:62ch; }
.suggestion-body strong{ color:var(--ink); }
.suggestion-actions{ display:flex; gap:9px; flex:none; }

/* ─────────────────────────────────────────────── month comparison */
.compare{ display:flex; flex-direction:column-reverse; }
.compare-head, .compare-row{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:14px; align-items:baseline;
}
.compare-head{ padding:0 0 10px; border-bottom:1px solid var(--rule); margin-bottom:6px; }
.compare-head span{ font-size:9.5px; font-weight:750; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-4); }
.compare-row{ padding:13px 0; border-top:1px solid rgba(255,255,255,0.045); }
.compare-row:last-of-type{ border-top:none; }
.compare-label{ font-size:12.5px; color:var(--ink-2); }
.compare-prev{ font-size:13px; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.compare-now{ font-size:17px; font-weight:730; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; }
.compare-delta{ font-size:11.5px; font-weight:650; font-variant-numeric:tabular-nums; }
.compare-delta.is-up{ color:var(--ok); }
.compare-delta.is-down{ color:var(--ink-4); }
.compare-delta.is-flat{ color:var(--ink-4); }

/* ─────────────────────────────────────────────── capacity */
.cap-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cap-count{ font-size:12.5px; color:var(--ink-2); }
.cap-count strong{ font-size:28px; font-weight:760; letter-spacing:-0.035em; color:var(--ink); margin-right:4px; }
.cap-cells{ display:flex; gap:7px; margin:18px 0 12px; flex-wrap:wrap; }
.cap-cell{
  width:44px; height:30px; border-radius:var(--r-xs); flex:none;
  border:1px dashed var(--rule-strong); background:rgba(255,255,255,0.02);
}
.cap-cell.is-taken{
  border:1px solid transparent;
  background:linear-gradient(160deg, var(--blue), var(--blue-deep));
  box-shadow:0 6px 16px -8px rgba(77,159,255,0.7);
}

/* ─────────────────────────────────────────────── preferences */
.pref{
  display:flex; align-items:flex-start; justify-content:space-between; gap:22px;
  padding:16px 0; border-top:1px solid var(--rule);
}
.pref:first-child{ border-top:none; padding-top:0; }
.pref > span{ display:flex; flex-direction:column; gap:5px; }
.pref strong{ font-size:13px; font-weight:640; }
.pref em{ font-size:11px; font-style:normal; color:var(--ink-4); line-height:1.6; max-width:52ch; }
.pref-stack{ flex-direction:column; align-items:stretch; gap:10px; }
.pref-stack input{
  padding:10px 13px; border-radius:var(--r-xs); font-size:12.5px;
  background:var(--surface-sunk); border:1px solid var(--rule); color:var(--ink); outline:none;
}
.pref-stack input:focus{ border-color:var(--blue); }
.switch{
  width:44px; height:25px; border-radius:999px; flex:none; position:relative;
  background:var(--surface-sunk); border:1px solid var(--rule);
  transition:background .2s, border-color .2s;
}
.switch span{
  position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%;
  background:var(--ink-3); transition:transform .22s cubic-bezier(.2,.85,.25,1), background .2s;
}
.switch.is-on{ background:rgba(77,159,255,0.28); border-color:rgba(77,159,255,0.5); }
.switch.is-on span{ transform:translateX(19px); background:var(--blue-bright); }

/* ─────────────────────────────────────────────── purpose */
.purpose{
  margin:10px 4px 0; font-size:12px; line-height:1.7; color:var(--ink-4);
  max-width:66ch; font-style:italic;
}

/* ─────────────────────────────────────────────── celebration */
.celebration-host{
  position:fixed; inset:0; z-index:98; display:flex; align-items:center; justify-content:center;
  pointer-events:none; background:radial-gradient(600px 400px at 50% 50%, rgba(77,159,255,0.14), transparent 70%);
}
.celebration-host[hidden]{ display:none; }
.celebration{
  text-align:center; padding:36px 44px; border-radius:var(--r-xl);
  background:linear-gradient(165deg, rgba(20,30,46,0.97), rgba(8,13,21,0.97));
  border:1px solid rgba(77,159,255,0.34);
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.9);
  animation:celebrateIn .5s cubic-bezier(.2,.85,.25,1);
}
.celebration h3{ font-size:26px; font-weight:750; letter-spacing:-0.03em; margin:12px 0 9px; }
.celebration p{ font-size:13px; color:var(--ink-2); max-width:38ch; line-height:1.6; }
.celebration.is-leaving{ opacity:0; transform:scale(.97); transition:opacity .4s, transform .4s; }
@keyframes celebrateIn{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:none; }
}

/* ─────────────────────────────────────────────── toasts */
.toast-host{
  position:fixed; bottom:calc(var(--dock-h) + 18px); right:24px; z-index:90;
  display:flex; flex-direction:column; gap:9px; align-items:flex-end;
  pointer-events:none;
}
.toast{
  padding:12px 17px; border-radius:var(--r-sm);
  background:linear-gradient(165deg, rgba(28,36,48,0.97), rgba(14,19,27,0.97));
  border:1px solid var(--rule-strong);
  box-shadow:0 20px 44px -20px rgba(0,0,0,0.9);
  font-size:12.5px; font-weight:560;
  animation:toastin .28s cubic-bezier(.2,.85,.25,1);
}
.toast.is-error{ border-color:rgba(255,95,109,0.4); color:#ff9aa3; }
@keyframes toastin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ─────────────────────────────────────────────── weekly review */
.movement{
  display:flex; align-items:baseline; gap:11px;
  padding:9px 0; border-top:1px solid rgba(255,255,255,0.045);
}
.movement:first-child{ border-top:none; }
.movement-dot{ width:6px; height:6px; border-radius:50%; flex:none; align-self:center; }
.movement-date{
  font-size:10.5px; color:var(--ink-4); font-variant-numeric:tabular-nums;
  width:46px; flex:none;
}
.movement-label{ font-size:12.5px; color:var(--ink); flex:1; min-width:0; }
.movement-company{ font-size:11.5px; color:var(--ink-3); flex:none; max-width:44%; text-align:right; }

.review-entry{
  border-top:1px solid var(--rule);
}
.review-entry:first-child{ border-top:none; }
.review-entry summary{
  display:flex; align-items:baseline; gap:14px; padding:13px 0;
  cursor:pointer; list-style:none;
}
.review-entry summary::-webkit-details-marker{ display:none; }
.review-week{
  font-size:12px; font-weight:680; color:var(--ink); flex:none; width:104px;
  font-variant-numeric:tabular-nums;
}
.review-summary{ font-size:12px; color:var(--ink-3); flex:1; min-width:0; }
.review-metrics{
  font-size:10.5px; color:var(--ink-4); flex:none; font-variant-numeric:tabular-nums;
}
.review-body{ padding:2px 0 16px 104px; display:flex; flex-direction:column; gap:12px; }
@media (max-width:640px){ .review-body{ padding-left:0; } }
.review-qa dt{
  font-size:9.5px; font-weight:750; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:5px;
}
.review-qa dd{ margin:0; font-size:12.5px; line-height:1.65; color:var(--ink-2); }

/* ─────────────────────────────────────────────── candidate inbox
   Sits above the pipeline table. Deliberately louder than a table row —
   these need a decision, not a glance. */
.cand-card{ border-color:rgba(77,159,255,0.22); }
.cand-list{ display:flex; flex-direction:column; gap:10px; }
/* the class's own display would otherwise beat the hidden attribute */
.cand-list[hidden]{ display:none; }
.cand{
  padding:14px 16px; border-radius:var(--r-md);
  background:var(--surface-sunk); border:1px solid var(--rule);
  display:flex; flex-direction:column; gap:9px;
}
.cand:hover{ border-color:var(--rule-strong); }
.cand-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.cand-id{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cand-name{ font-size:14px; font-weight:680; letter-spacing:-0.012em; }
.cand-meta{ font-size:10.5px; color:var(--ink-4); letter-spacing:0.02em; }
.cand-score{
  flex:none; font-size:15px; font-weight:780; font-variant-numeric:tabular-nums;
  padding:4px 9px; border-radius:8px; line-height:1;
}
.cand-score[data-band="hot"]{ background:rgba(53,211,154,0.14); color:var(--ok); }
.cand-score[data-band="warm"]{ background:rgba(240,180,41,0.14); color:var(--due); }
.cand-score[data-band="cool"]{ background:rgba(255,255,255,0.06); color:var(--ink-3); }
.cand-signal{ font-size:12px; color:var(--ink-2); line-height:1.5; }
.cand-key{
  display:inline-block; min-width:52px; font-size:9.5px; font-weight:750;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-4);
}
.cand-links{ display:flex; flex-wrap:wrap; gap:6px; }
.cand-link{
  font-size:10.5px; padding:3px 8px; border-radius:999px;
  background:var(--blue-wash); color:var(--blue-bright);
  border:1px solid rgba(77,159,255,0.18); text-decoration:none;
}
.cand-link:hover{ background:rgba(77,159,255,0.18); }
.cand-link.is-plain{ background:rgba(255,255,255,0.05); color:var(--ink-3); border-color:var(--rule); }
.cand-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding-top:9px; border-top:1px solid var(--rule);
}
.cand-contact{ font-size:11px; color:var(--ink-3); min-width:0; overflow-wrap:anywhere; }
.cand-contact a{ color:var(--ink-2); }
.cand-actions{ display:flex; gap:8px; flex:none; }

/* collapse control on the candidates card — a small icon button that sits
   beside "Reject all" on desktop and in the card's top-right corner on a
   phone (see the mobile block) */
.cand-toggle{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:28px; height:28px; border-radius:8px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--rule); color:var(--ink-3);
  transition:background .14s, color .14s, border-color .14s;
}
.cand-toggle:hover{ background:rgba(77,159,255,0.16); color:var(--blue-bright); border-color:rgba(77,159,255,0.35); }
.cand-toggle .chev{ width:14px; height:14px; stroke:currentColor; transition:transform .24s; }
.cand-card.is-collapsed .cand-toggle .chev{ transform:rotate(-90deg); }

/* ─────────────────────────────────────────────── board drag and drop */
.board-card{ cursor:grab; touch-action:pan-y; }
.board-card.is-dragging{ opacity:.32; }
body.is-card-dragging{ cursor:grabbing; user-select:none; }
.board-ghost{
  position:fixed; z-index:120; pointer-events:none; margin:0;
  transform:rotate(1.4deg) scale(1.02); opacity:.95;
  box-shadow:0 26px 50px -18px rgba(0,0,0,0.85);
  border-color:rgba(77,159,255,0.55);
}
.board-col.is-drop-target .board-drop{
  background:var(--blue-wash);
  box-shadow:inset 0 0 0 1.5px rgba(77,159,255,0.45);
}
.board-col.is-drop-target .board-title{ color:var(--blue-bright); }

/* ═══════════════════════════════════════════════ mobile
 *
 * Below 860px the sidebar stops being a column and becomes an off-canvas
 * panel opened by the burger button. Everything else tightens up: smaller
 * padding, smaller display numbers, full-width controls, and wide content
 * (tables, the dock) scrolls sideways inside its own container rather than
 * forcing the whole page to scroll horizontally.
 */

.burger{
  display:none;
  position:fixed; top:calc(12px + env(safe-area-inset-top)); left:12px; z-index:95;
  width:42px; height:42px; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--ink);
  background:rgba(12,20,34,0.85); border:1px solid var(--rule-strong);
  backdrop-filter:blur(18px);
}
.burger svg{ width:20px; height:20px; }

.nav-scrim{
  position:fixed; inset:0; z-index:85; background:rgba(3,6,10,0.6);
  backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .26s;
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto; }
/* belt and braces: the nav scrim can never cover a desktop layout */
@media (min-width:861px){ .nav-scrim{ display:none; } }

@media (max-width:860px){
  .burger{ display:flex; }

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; height:100dvh; width:min(290px,86vw);
    z-index:90; transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.2,.85,.25,1);
    /* clears the fixed burger, which sits above the panel and doubles as close */
    overflow-y:auto; padding-top:calc(66px + env(safe-area-inset-top));
    border-right:1px solid var(--rule-strong);
  }
  .sidebar.is-open{ transform:none; }
  .nav-item{ padding:13px 13px; font-size:14.5px; }
  .nav-item svg{ width:19px; height:19px; }

  /* top padding clears the fixed burger */
  .main{ padding:calc(64px + env(safe-area-inset-top)) 16px calc(var(--dock-h) + 34px); gap:14px; }
  .topbar{ align-items:flex-start; gap:14px; }
  .topbar-right{ width:100%; gap:8px; }
  .view-title{ font-size:26px; }
  .view-sub{ font-size:12.5px; margin-top:7px; }
  .search{ flex:1; width:auto; min-width:0; }
  .datechip{ flex:none; }

  .grid{ gap:12px; }
  .card{ padding:18px 16px; }
  .card-title{ font-size:14px; }

  /* header actions drop to their own line rather than running off the edge */
  .card-head{ flex-wrap:wrap; gap:10px; padding:16px 16px 0; }
  .card-head > *:first-child{ flex:1 1 190px; min-width:0; }
  .card-actions{ flex-wrap:wrap; }
  .card-body{ padding:14px 16px 18px; }
  .card-compact .card-head{ padding:13px 16px 0; }
  .card-compact .card-body{ padding:8px 16px 12px; }

  /* "0,00 € of [target]" stays one unbroken line on the right — only the
     whole group is allowed to drop to its own row, never split apart */
  .target-top{ flex-wrap:wrap; gap:2px 10px; }
  .target-right{ flex-wrap:nowrap; gap:7px; margin-left:auto; }
  .target-actual{ font-size:22px; }
  .target-of{ font-size:9px; }
  .stepper{ padding:2px; }
  .stepper button{ width:20px; height:20px; }
  .stepper .val{ min-width:auto; padding:0 6px; font-size:13px; }

  /* the "I send N emails a day" row wraps instead of running past the card */
  .anchor-row{ flex-wrap:wrap; gap:6px 8px; }
  .anchor-input-unit{ flex:1 1 80px; min-width:0; }

  /* give task text the width instead of spending it on padding */
  .task{ padding:12px 4px; }
  .task-main{ gap:10px; }
  .script-panel{ margin-left:0; padding:15px 14px; }

  /* long status pills must wrap, not run off the card */
  .pill{ white-space:normal; text-align:left; }

  /* candidates chevron pins to the card's corner; the head leaves room so
     the title can't run underneath it */
  /* pinned targets: sits under the floating burger, chips shrink to fit */
  .trail{ border-radius:var(--r-md); }
  .trail.is-pinned{ top:calc(56px + env(safe-area-inset-top)); }
  .trail-pin{ width:34px; }
  .trail-chip{ padding:10px 11px; gap:6px; }
  .trail-actual{ font-size:17px; }
  .trail-goal{ font-size:10px; }
  .trail-label{ font-size:8.5px; letter-spacing:0.1em; }
  .trail-caret{ padding:0 9px; }
  .trail-panel-head,.trail-panel-body{ padding-left:14px; padding-right:14px; }

  .cand-card .card-head{ position:relative; padding-right:52px; }
  .cand-card .cand-toggle{ position:absolute; top:11px; right:11px; z-index:2; }

  /* four columns of figures need tighter gaps to survive a 320px screen */
  .compare-head,.compare-row{ gap:8px; grid-template-columns:1.3fr 1fr 1fr .9fr; }
  .compare-head > *,.compare-row > *{ min-width:0; overflow-wrap:anywhere; }
  .compare-now{ font-size:15px; }
  .compare-prev{ font-size:12px; }
  .stat-value{ font-size:21px; }
  .stat-card{ padding:18px 16px; }
  .stat-card .value{ font-size:27px; }

  /* wide content scrolls inside itself, never the page */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  .table-wrap table{ min-width:640px; }

  .dock{
    padding:0 12px calc(env(safe-area-inset-bottom) / 2);
    overflow-x:auto; scrollbar-width:none;
  }
  .dock::-webkit-scrollbar{ display:none; }
  .dock-label{ display:none; }
  .dock-more{ margin-left:0; }

  .drawer{ width:100vw; }
  .drawer-head,.drawer-foot{ padding-left:18px; padding-right:18px; }
  .drawer-body{ padding:18px 18px 26px; }
  .detail{ flex-direction:column; align-items:flex-start; gap:3px; }
  .detail dd{ text-align:left; }

  .sheet-host{ padding:3vh 12px 30px; }
  .sheet-head,.sheet-body{ padding-left:18px; padding-right:18px; }

  /* without this the stage tabs + action button run off the screen edge */
  .toolbar,.toolbar-right{ width:100%; flex-wrap:wrap; }
  /* board already scrolls sideways; snap each column so it lands cleanly */
  .board{ scroll-snap-type:x proximity; }
  .board-col{ scroll-snap-align:start; }
}

/* very small phones */
@media (max-width:400px){
  .trail-chip{ padding:9px 8px; }
  .trail-label{ letter-spacing:0.06em; }
  .trail-actual{ font-size:15.5px; }
  .trail-caret{ padding:0 7px; }
  .view-title{ font-size:23px; }
  .main{ padding-left:12px; padding-right:12px; }
  .card{ padding:16px 13px; }
  .topbar-right{ flex-wrap:wrap; }
  .datechip{ font-size:11px; padding:8px 11px; }
}