/* ============================================================
   Client Portal · Jonny Elliott
   Navy, cream, teal, gold. Karla throughout. Light and dark.
   ============================================================ */

:root{
  --accent:#00B28F; --accent-ink:#00735F; --accent-wash:rgba(0,178,143,.10);
  /* Three surfaces that are actually distinguishable. The old cream page with a
     near-white card measured 1.11:1, so nothing read as raised and the eye had
     nothing to hold on to. */
  --bg:#F0EADE; --surface:#FFFFFF; --surface-2:#F7F1E4;
  --ink:#00071B; --ink-2:#3C4356; --muted:#666D80;
  --line:rgba(0,7,27,.16); --line-soft:rgba(0,7,27,.10);
  --gold:#8A5E1B; --gold-bright:#E7B878; --gold-wash:rgba(231,184,120,.22);
  --warn:#A34714; --warn-wash:rgba(180,83,27,.10);
  /* Fields sit on the navy, not on the cream. Cream on cream is unreadable to
     fill in, which is the whole job of a form. */
  --field:#FFFFFF; --field-line:rgba(0,7,27,.30); --field-line-soft:rgba(0,7,27,.16);
  --on-accent:#00071B;
  --shadow-sm:0 1px 2px rgba(0,7,27,.05);
  --shadow:0 1px 2px rgba(0,7,27,.05), 0 14px 34px -22px rgba(0,7,27,.4);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent-ink:#3ED6B2; --accent-wash:rgba(0,178,143,.14);
    /* The navy stays the brand navy. The card is lifted properly instead of
       sitting one step above it, which is why the old dark read as flat. */
    --bg:#00071B; --surface:#151B30; --surface-2:#1F253A;
    --ink:#F7F1E4; --ink-2:#C6CBD8; --muted:#9AA3B8;
    --line:rgba(247,241,228,.16); --line-soft:rgba(247,241,228,.10);
    --gold:#E7B878; --gold-wash:rgba(231,184,120,.14);
    --field:#080C1F; --field-line:rgba(247,241,228,.30); --field-line-soft:rgba(247,241,228,.16);
    --on-accent:#00071B;
    --warn:#E8A47A; --warn-wash:rgba(232,164,122,.12);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -26px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --accent-ink:#3ED6B2; --accent-wash:rgba(0,178,143,.14);
  --bg:#00071B; --surface:#151B30; --surface-2:#1F253A;
  --ink:#F7F1E4; --ink-2:#C6CBD8; --muted:#9AA3B8;
  --line:rgba(247,241,228,.16); --line-soft:rgba(247,241,228,.10);
  --gold:#E7B878; --gold-wash:rgba(231,184,120,.14);
  --field:#080C1F; --field-line:rgba(247,241,228,.30); --field-line-soft:rgba(247,241,228,.16);
  --on-accent:#00071B;
  --warn:#E8A47A; --warn-wash:rgba(232,164,122,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 20px 44px -26px rgba(0,0,0,.9);
}

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

/* A display rule on a class beats the browser's own [hidden] rule, which makes
   an invisible overlay swallow every click. Settle it once, here. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
button,input,textarea,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.muted{color:var(--muted)}
.centre{text-align:center}
.tight{margin-top:10px}
.spaced{margin-top:20px}
.spaced-top{margin-top:14px}
.body{font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.micro{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.big-time{font-size:19px; font-weight:800; margin-top:4px}
.link{color:var(--accent-ink); font-weight:700; text-decoration:none}
.link:hover{text-decoration:underline}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-ink)}
code{background:var(--surface-2); padding:2px 6px; border-radius:5px; font-size:.88em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:8px; border:1px solid transparent;
  font-weight:700; font-size:15px; cursor:pointer; text-decoration:none;
  background:var(--accent); color:#00071B; transition:filter .12s, transform .12s;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--accent-ink); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-wash)}
.btn.small{padding:8px 14px; font-size:13.5px}
.kill{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-size:18px; line-height:1; padding:6px 9px; border-radius:6px; font-weight:700;
}
.kill:hover{background:var(--warn-wash); color:var(--warn)}

/* ---------- messages ---------- */
.error,.ok,.warn{
  display:none; padding:11px 14px; border-radius:8px; font-size:14px;
  font-weight:600; line-height:1.45;
}
.error{background:var(--warn-wash); color:var(--warn); border:1px solid rgba(180,83,27,.25)}
.ok{background:var(--accent-wash); color:var(--accent-ink); border:1px solid rgba(0,178,143,.3)}
.warn{background:var(--gold-wash); color:var(--gold); border:1px solid var(--gold-bright); display:block; margin-bottom:20px}
.error.show,.ok.show{display:block}

/* ============================================================
   SIGN IN
   ============================================================ */
.signin{min-height:100dvh; display:grid; grid-template-columns:1fr}
@media (min-width:900px){ .signin{grid-template-columns:1.05fr .95fr} }

.signin-brand{
  background:#00071B; color:#F7F1E4; padding:48px 40px;
  display:flex; flex-direction:column; justify-content:space-between; gap:48px;
  position:relative; overflow:hidden;
}
.signin-brand::after{
  content:""; position:absolute; right:-140px; bottom:-140px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 62%);
  opacity:.22; pointer-events:none;
}
.signin-brand .mark{
  width:44px; height:44px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent); color:#00071B; font-weight:800; font-size:17px;
  letter-spacing:-.02em; text-decoration:none; position:relative; z-index:1;
}
.signin-brand .mark:hover{filter:brightness(1.08)}
.signin-brand h1{font-size:clamp(30px,4.4vw,44px); line-height:1.06; font-weight:800; margin-top:20px}
.signin-brand .sub{color:rgba(247,241,228,.72); margin-top:14px; max-width:44ch; font-size:17px}
.signin-brand .foot{font-size:12.5px; color:rgba(247,241,228,.5); position:relative; z-index:1}
.signin-brand .foot b{display:block; color:rgba(247,241,228,.9); font-weight:700; margin-bottom:2px}
.signin-brand .back{display:inline-block; margin-top:10px; color:rgba(247,241,228,.62);
  text-decoration:none; font-weight:700; font-size:12.5px}
.signin-brand .back:hover{color:var(--accent)}

.signin-form{display:flex; align-items:center; justify-content:center; padding:48px 32px; background:var(--bg)}
.signin-card{width:100%; max-width:390px; display:flex; flex-direction:column; gap:20px}
.signin-card h2{font-size:26px; font-weight:800; margin-top:8px}
.signin-card .hint{color:var(--muted); font-size:14.5px; margin-top:8px}

.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.field input{
  padding:14px 16px; border-radius:9px; border:1px solid var(--line);
  background:var(--surface); font-size:16px; font-weight:500;
  transition:border-color .15s, box-shadow .15s; width:100%;
}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.pw{position:relative; display:flex}
.pw input{flex:1; padding-right:66px}
.reveal{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; padding:8px 10px; border-radius:6px;
  font-size:12.5px; font-weight:800; color:var(--muted);
}
.reveal:hover{color:var(--accent-ink); background:var(--accent-wash)}

.meter{height:5px; border-radius:99px; background:var(--surface-2); overflow:hidden;
  border:1px solid var(--line-soft); margin-top:8px}
.meter i{display:block; height:100%; width:0; background:var(--warn); transition:width .25s, background .25s}
.meter i.ok{background:var(--gold-bright)}
.meter i.good{background:var(--accent)}
.meter-note{font-size:12.5px; color:var(--muted); margin-top:5px}

/* ============================================================
   SHELL
   ============================================================ */
.portal{display:none}
.portal.ready{display:block}
.loading{padding:80px 24px; text-align:center; color:var(--muted); font-size:14.5px}

.topbar{
  position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
}
.topbar-in{max-width:1080px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:14px}
.topbar .mark{
  width:34px; height:34px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--accent); color:#00071B; font-weight:800; font-size:13.5px; text-decoration:none;
}
/* The hub carries the real mark rather than a coloured tile with initials in it. */
.admin-body .topbar .mark{background:none; width:auto; height:30px; border-radius:0}
.admin-body .topbar .mark img{height:30px; width:auto}
.signin-brand .wordmark{display:block; text-decoration:none; margin-bottom:6px}
.signin-brand .wordmark img{height:44px; width:auto}
@media (max-width:820px){ .signin-brand .wordmark img{height:36px} }

/* One mark for light, one for dark, swapped by the same rules as the palette. */
/* Specificity has to beat the sizing rules above, hence the img on the end. */
img.on-dark{display:none}
img.on-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) img.on-dark{display:block}
  :root:not([data-theme="light"]) img.on-light{display:none}
}
:root[data-theme="dark"] img.on-dark{display:block}
:root[data-theme="dark"] img.on-light{display:none}
:root[data-theme="light"] img.on-dark{display:none}
:root[data-theme="light"] img.on-light{display:block}
.topbar .names{min-width:0; line-height:1.25}
.topbar .names strong{display:block; font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar .names span{font-size:12.5px; color:var(--muted)}
.topbar nav{margin-left:auto; display:flex; align-items:center; gap:4px}
/* .topright is the hub's version of the same row, so it inherits the same look. */
.topbar nav a, .topright a{
  font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none;
  padding:7px 11px; border-radius:7px; white-space:nowrap;
}
.topbar nav a:hover, .topright a:hover{background:var(--surface-2); color:var(--ink)}
.viewer{
  font-size:12.5px; font-weight:700; color:var(--muted); padding:5px 10px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line-soft);
  white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:820px){ .viewer{display:none} }
/* The section links scroll rather than disappear, because "Your actions" is the
   one a client on a phone most needs. */
@media (max-width:720px){
  .topbar nav.jump{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .topbar nav.jump::-webkit-scrollbar{display:none}
  .topbar nav.jump a{padding:7px 9px}
}
@media (max-width:720px){ .topbar nav a.hide-sm, .topright a.hide-sm{display:none} }

.wrap{max-width:1080px; margin:0 auto; padding:36px 24px 90px}
.admin-body .wrap, .admin-body .topbar-in{max-width:1240px}
section{margin-top:44px; scroll-margin-top:80px}
.region{margin-top:52px}
.region:first-of-type{margin-top:44px}
.region-head{display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:18px}
.region-h{font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.015em; margin-top:5px}
.region-sub{font-size:15px; line-height:1.55; color:var(--ink-2); margin-top:8px; max-width:56ch}
.region-count{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:99px; padding:6px 13px;
  white-space:nowrap}
.region-count.on{background:var(--gold-wash); border-color:transparent; color:var(--gold)}

/* The card that carries the main ask reads louder than the ones around it. */
.lead-card{border-color:var(--accent); box-shadow:var(--shadow)}
.lead-card > .card-body > .progress{max-width:260px; height:8px; background:var(--line-soft);
  border:1px solid var(--line-soft)}
.lead-card .card-head{background:var(--accent-wash)}
/* Files already sent are reference, not an action, so they fold away until
   there are some. */
.sent{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.sent summary{cursor:pointer; font-size:13.5px; font-weight:700; color:var(--accent-ink);
  list-style:none}
.sent summary::-webkit-details-marker{display:none}
.sent summary::before{content:"▸ "; font-size:11px}
.sent[open] summary::before{content:"▾ "}
.sent summary:hover{text-decoration:underline}
.sent .doc{padding-left:0; padding-right:0}
.hairline{height:1px; background:var(--line); margin:16px 0}

section > h2{font-size:12.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px}

/* ============================================================
   TRACKER
   ============================================================ */
.tracker{background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden}
.tracker-head{padding:30px 30px 24px; display:flex; flex-direction:column; gap:10px}
.stage-label{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-ink); display:flex; align-items:center; gap:8px}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,178,143,.55)}
  70%{box-shadow:0 0 0 11px rgba(0,178,143,0)}
  100%{box-shadow:0 0 0 0 rgba(0,178,143,0)}
}
.tracker-head h1{font-size:clamp(21px,3.1vw,29px); font-weight:800; line-height:1.22; max-width:24ch}
.tracker-head .detail{color:var(--ink-2); font-size:15.5px; max-width:62ch}

.rail{padding:6px 30px 30px}
.rail-track{position:relative; display:flex; justify-content:space-between; gap:6px}
.rail-track::before,.rail-track::after{
  content:""; position:absolute; left:var(--l,22px); right:var(--r,22px); top:20px;
  height:4px; border-radius:99px;
}
.rail-track::before{background:var(--surface-2); border:1px solid var(--line-soft); box-sizing:content-box; top:19px}
.rail-track::after{background:var(--accent); right:auto; width:var(--w,0px);
  transition:width .8s cubic-bezier(.4,0,.2,1)}
.step{position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  align-items:center; gap:9px; text-align:center; min-width:0}
.dot{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:2px solid var(--line); color:var(--muted);
  font-weight:800; font-size:14px; transition:background .4s, border-color .4s, color .4s, transform .3s;
}
.step .name{font-size:12.5px; font-weight:700; color:var(--muted); transition:color .3s}
.step.done .dot{background:var(--accent); border-color:var(--accent); color:#00071B}
.step.done .name{color:var(--ink-2)}
.step.now .dot{background:var(--surface); border-color:var(--accent); color:var(--accent-ink);
  transform:scale(1.13); box-shadow:0 0 0 5px var(--accent-wash)}
.step.now .name{color:var(--accent-ink); font-weight:800}
.tick{width:17px; height:17px; display:block}

.rail-foot{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line); margin:0}
.stat{background:var(--surface); padding:16px 20px; display:flex; flex-direction:column; gap:2px;
  border-left:1px solid var(--line)}
.stat:first-of-type{border-left:0}
.stat dt{font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.stat dd{margin:0; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums}
.stat dd small{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-top:1px}
.progress-wrap{display:flex; align-items:center; gap:10px; margin-top:5px}
.progress{flex:1; height:6px; border-radius:99px; background:var(--surface-2);
  overflow:hidden; border:1px solid var(--line-soft)}
.progress i{display:block; height:100%; width:0; background:var(--accent);
  transition:width .8s cubic-bezier(.4,0,.2,1)}

/* ============================================================
   CARDS
   ============================================================ */
.cols{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width:860px){ .cols.two{grid-template-columns:1.25fr .75fr; align-items:start} }
.side-stack{display:flex; flex-direction:column; gap:20px}

.card{position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-sm); overflow:hidden}
.card > .card-head::before{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent); opacity:.85}
.card-head{padding:17px 20px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card-head h3{font-size:16.5px; font-weight:800; letter-spacing:-.005em}
.card-head .pill{margin-left:auto}
.card-body{padding:18px 20px}
.card-body > * + *{margin-top:14px}

a.pill{text-decoration:none}
.pill{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:99px; white-space:nowrap}
.pill.live{background:var(--accent-wash); color:var(--accent-ink)}
.pill.done{background:var(--surface-2); color:var(--muted)}
.pill.soon{background:transparent; color:var(--muted); border:1px solid var(--line)}
.pill.you{background:var(--gold-wash); color:var(--gold)}

/* ---------- phases ---------- */
.phase{border-bottom:1px solid var(--line-soft)}
.phase:last-child{border-bottom:0}
.phase-head{width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  padding:16px 20px; display:flex; align-items:center; gap:13px}
.phase-head:hover{background:var(--surface-2)}
.phase-head .idx{width:26px; height:26px; border-radius:7px; flex:0 0 auto; display:grid;
  place-items:center; font-size:12px; font-weight:800; background:var(--surface-2);
  color:var(--muted); border:1px solid var(--line-soft)}
.phase.complete .idx{background:var(--accent); color:#00071B; border-color:var(--accent)}
.phase.active .idx{background:var(--accent-wash); color:var(--accent-ink); border-color:var(--accent)}
.phase-head .t{flex:1; min-width:0}
.phase-head .t strong{display:block; font-size:15.5px; font-weight:700}
.phase-head .t span{font-size:12.5px; color:var(--muted)}
.chev{width:15px; height:15px; color:var(--muted); transition:transform .25s; flex:0 0 auto}
.phase.open .chev{transform:rotate(180deg)}
.phase-body{display:none; padding:0 20px 18px 59px}
.phase.open .phase-body{display:block}
.phase-body ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.phase-body li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.45}
.box{flex:0 0 auto; width:17px; height:17px; margin-top:2px; border-radius:5px;
  border:1.5px solid var(--line); display:grid; place-items:center}
.box.on{background:var(--accent); border-color:var(--accent)}
.box.on::after{content:""; width:4px; height:8px; border:solid #00071B;
  border-width:0 2.2px 2.2px 0; transform:rotate(42deg) translate(-1px,-1px)}
li.on .txt{color:var(--muted); text-decoration:line-through}
.txt{flex:1}
.tag{flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 6px; border-radius:4px; margin-top:2px}
.tag.us{background:var(--surface-2); color:var(--muted)}
.tag.you{background:var(--gold-wash); color:var(--gold)}
.tag.both{background:var(--accent-wash); color:var(--accent-ink)}

/* ---------- waiting on you ---------- */
.todo{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.todo li{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:flex-start}
.todo li:last-child{border-bottom:0; padding-bottom:0}
.todo li:first-child{padding-top:0}
.bullet{flex:0 0 auto; width:7px; height:7px; border-radius:50%; margin-top:8px; background:var(--muted)}
.todo li.urgent .bullet{background:var(--gold-bright); box-shadow:0 0 0 3px var(--gold-wash)}
.todo .l{display:block; font-size:15px; line-height:1.5; font-weight:600}
.todo .d{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.wanted{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.wanted li{display:flex; gap:10px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.wanted li::before{content:"·"; color:var(--accent); font-weight:800; font-size:18px; line-height:1.1}

/* ---------- upload ---------- */
.drop{
  border:1.5px dashed var(--line); border-radius:10px; padding:26px 18px; text-align:center;
  background:var(--surface-2); transition:border-color .15s, background .15s; cursor:pointer; display:block;
}
.drop:hover,.drop.hover{border-color:var(--accent); background:var(--accent-wash)}
.drop .big{display:block; font-size:14.5px; font-weight:700}
.drop .small{display:block; font-size:12.5px; color:var(--muted); margin-top:4px}
.drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.filelist{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:7px}
.filelist li{display:flex; gap:10px; align-items:center; font-size:13px; padding:8px 11px;
  background:var(--surface-2); border-radius:8px; border:1px solid var(--line-soft); flex-wrap:wrap}
.filelist .qn{flex:1 1 140px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.filelist .sz{color:var(--muted); font-variant-numeric:tabular-nums; font-size:12px}
.qbar{flex:0 0 70px; height:5px; border-radius:99px; background:var(--line-soft); overflow:hidden}
.qbar i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s}
.qok{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.row-actions{display:flex; gap:10px; align-items:center; margin-top:14px}

.doc{display:flex; align-items:center; gap:12px; padding:13px 20px; border-bottom:1px solid var(--line-soft)}
.doc:last-child{border-bottom:0}
.doc-ico{flex:0 0 auto; width:40px; height:40px; border-radius:8px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-soft);
  font-size:9.5px; font-weight:800; letter-spacing:.04em; color:var(--muted)}
.doc-main{flex:1; min-width:0}
.doc-name{display:block; font-size:14.5px; font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.doc-meta{display:block; font-size:12.5px; color:var(--muted)}

/* ---------- updates ---------- */
.feed{display:flex; flex-direction:column}
.feed article{padding:20px; border-bottom:1px solid var(--line-soft); display:grid; gap:4px 28px}
.feed article:last-child{border-bottom:0}
.feed time{font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap}
.feed h4{margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em}
.feed p{margin-top:6px; font-size:15px; color:var(--ink-2); line-height:1.6; max-width:68ch}
@media (min-width:760px){
  .feed article{grid-template-columns:150px 1fr}
  .feed time{grid-row:span 2; padding-top:5px}
}

footer.site{margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted)}
footer.site b{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); font-weight:800}
footer.site .right{text-align:right}
footer.site .right a{display:block; margin-top:4px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

@media (max-width:899px){
  .signin{min-height:100dvh; grid-template-rows:auto 1fr}
  .signin-brand{padding:26px 22px 24px; gap:0; justify-content:flex-start}
  .signin-brand::after{width:260px; height:260px; right:-110px; bottom:-130px}
  .signin-brand .mark{width:38px; height:38px; font-size:15px}
  .signin-brand h1{font-size:26px; margin-top:14px}
  .signin-brand .sub{font-size:15px; margin-top:8px; max-width:none}
  .signin-brand .foot{display:none}
  .signin-form{padding:28px 22px 44px; align-items:flex-start}
  .signin-card{max-width:none}
}

@media (max-width:620px){
  .wrap{padding:26px 16px 72px}
  .tracker{border-radius:12px}
  .tracker-head{padding:22px 20px 18px; gap:8px}
  .tracker-head h1{font-size:20px; max-width:none}
  .tracker-head .detail{font-size:14.5px}
  .rail{padding:6px 20px 22px}
  .step .name{font-size:10.5px}
  .dot{width:36px; height:36px; font-size:12.5px}
  .rail-track::before,.rail-track::after{top:16px}
  .rail-track::before{top:15px}
  .rail-foot{grid-template-columns:1fr 1fr}
  .stat{border-top:1px solid var(--line)}
  .stat:nth-of-type(-n+2){border-top:0}
  .stat:nth-of-type(odd){border-left:0}
  .stat{padding:13px 16px}
  .stat dd{font-size:17px}
  .card-head{padding:14px 16px}
  .card-body{padding:15px 16px}
  .phase-head{padding:14px 16px; gap:11px}
  .phase-head .t strong{font-size:14.5px}
  .phase-body{padding:0 16px 16px 20px}
  .feed article{padding:15px 16px}
  .doc{padding:12px 16px; gap:10px}
  section{margin-top:34px}
  footer.site{flex-direction:column; gap:14px}
  footer.site .right{text-align:left}
}

@media (max-width:400px){
  .step .name{font-size:9.5px}
  .dot{width:32px; height:32px; font-size:12px}
  .rail-track::before,.rail-track::after{top:14px}
  .rail-track::before{top:13px}
}

/* ============================================================
   Form primitives · shared by the client portal and the dashboard
   ============================================================ */
.field-row{display:flex; flex-direction:column; gap:7px; margin-top:18px}
.field-row:first-child{margin-top:0}
.lbl{font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--ink);
  line-height:1.35; text-transform:none}
.inp{width:100%; padding:12px 14px; border-radius:9px;
  border:1px solid var(--field-line); background:var(--field);
  color:var(--ink); font-size:15.5px; font-family:inherit; line-height:1.45; resize:vertical;
  transition:border-color .14s, box-shadow .14s}
.inp::placeholder{color:var(--muted); opacity:.8}
.inp:hover{border-color:var(--ink-2)}
.inp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
/* A field you cannot type in is still a field. Painting it the same colour as
   the panel behind it made every input vanish, which is exactly what this form
   looked like in preview. Keep the field surface, soften what is on it. */
.inp:disabled, .inp[readonly]{
  background:var(--field); color:var(--ink-2); cursor:default;
  border-color:var(--field-line-soft)}
.inp:disabled{opacity:.9}
.inp[readonly]:focus{border-color:var(--field-line); box-shadow:none}
.inp.tiny{width:auto; padding:7px 11px; font-size:13px; border-radius:7px}
.inp.colour{padding:4px; height:44px; cursor:pointer}
select.inp{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat}
.two-up{display:grid; grid-template-columns:1fr; gap:0 16px}
@media (min-width:620px){ .two-up{grid-template-columns:1fr 1fr} }
.checkline{display:flex; align-items:center; gap:9px; margin-top:16px; font-size:14.5px; cursor:pointer}

/* ============================================================
   Preview bar · shown only when you are looking at a client's
   portal from your own dashboard.
   ============================================================ */
/* Inside the header, not above it. Two sticky elements with a hardcoded offset
   between them overlap the moment either one wraps, which is exactly what
   happened. */
.preview-bar{display:flex; align-items:center; gap:12px;
  padding:9px 24px; background:var(--gold-wash); border-bottom:1px solid var(--line);
  font-size:13.5px; color:var(--ink); flex-wrap:wrap}
.preview-bar .pv-dot{width:8px; height:8px; border-radius:99px; background:var(--gold);
  box-shadow:0 0 0 4px var(--gold-wash); flex:none}
.preview-bar .pv-text{font-weight:600}
.preview-bar .pv-back{margin-left:auto; font-weight:800; color:var(--accent-ink);
  text-decoration:none; border-bottom:1px solid currentColor; white-space:nowrap}

/* engagement switcher in the header */
.engpick{display:inline-flex; align-items:center}
.engpick select{font:inherit; font-size:13px; font-weight:700; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:99px;
  padding:7px 12px; max-width:190px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap}

/* ============================================================
   Onboarding
   ============================================================ */

.onb-steps{display:flex; flex-direction:column; border-top:1px solid var(--line);
  margin:4px -20px 0; }
.onb-step{border-bottom:1px solid var(--line-soft)}
.onb-step:last-child{border-bottom:0}
.onb-step.on .onb-top{background:var(--accent-wash)}
.onb-step.on .onb-t strong{color:var(--muted); text-decoration:line-through;
  text-decoration-color:var(--line)}
.onb-top{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 20px; background:transparent; border:0; cursor:pointer; font:inherit; color:inherit}
.onb-top:hover{background:var(--accent-wash)}
.onb-num{flex:none; width:28px; height:28px; border-radius:99px; display:grid; place-items:center;
  font-size:13px; font-weight:800; background:var(--surface-2); color:var(--muted);
  border:1px solid var(--line)}
.onb-step.on .onb-num{background:var(--accent); color:var(--on-accent); border-color:transparent}
.onb-step.on .onb-num .tick{width:15px; height:15px}
.onb-t{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.onb-t strong{font-size:15.5px; font-weight:800}
.onb-t span{font-size:13.5px; color:var(--muted); line-height:1.5}
.onb-top .chev{width:18px; height:18px; flex:none; color:var(--muted); transition:transform .2s}
.onb-step.open .chev{transform:rotate(180deg)}
.onb-body{display:none; border-top:1px solid var(--line); padding:22px 20px; background:var(--surface-2)}
.onb-step.open .onb-body{display:block}
.onb-form > * + *{margin-top:18px}
/* A text input stretched across a thousand pixels is unreadable and looks
   unfinished. Two columns, capped, with anything long taking the full width. */
.onb-grid{display:grid; grid-template-columns:1fr; gap:18px 22px; max-width:760px}
@media (min-width:640px){
  .onb-grid{grid-template-columns:1fr 1fr}
  .onb-grid .field-row.wide{grid-column:1 / -1}
}
.onb-grid .field-row{margin-top:0}
.onb-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding-top:20px; margin-top:20px; border-top:1px solid var(--line); max-width:760px}
.onb-pos{margin-left:auto; font-size:12px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted)}
.opt{font-style:normal; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin-left:7px}
.fhint{display:block; font-size:12.5px; color:var(--muted); margin-top:5px}
.req{font-style:normal; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--warn); margin-left:7px;
  border:1px solid currentColor; border-radius:4px; padding:1px 5px; vertical-align:1px}
.field-row.missing .inp{border-color:var(--warn); box-shadow:0 0 0 3px var(--warn-wash)}
#start.finished .onb-steps{opacity:.86}

/* Stat tiles render their value as a text node followed by a <small> note.
   Wrapping the value keeps that structure honest when it becomes an element. */
.rail-foot .stat-v{display:block}