/* Client portal demo. Brand tokens and shell rules live in assets/demo-shell.css. */

@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap; src:url('/assets/fonts/manrope-latin.woff2?v=20260902a') format('woff2'); }

:root{
  --paper:rgb(var(--bg-rgb)); --card:rgb(var(--surface-rgb)); --ink:rgb(var(--fg-rgb)); --ink-2:rgba(var(--fg-rgb),.84); --ink-3:rgba(var(--fg-rgb),.76);
  --line:rgba(var(--fg-rgb),.16); --line-2:rgba(var(--fg-rgb),.5);
  --green:rgb(var(--aqua-rgb)); --green-2:rgb(var(--aqua-rgb)); --green-soft:rgba(var(--aqua-rgb),.12);
  --gold:rgb(var(--gold-rgb)); --gold-ink:rgb(var(--gold-rgb)); --gold-soft:rgba(var(--gold-rgb),.12);
  --red:rgb(var(--red-rgb)); --red-soft:rgba(var(--red-rgb),.12);
  --r:8px; --r-sm:8px; --shadow:none; --ease:cubic-bezier(.23,1,.32,1); --tabs-h:64px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--paper); }
body{ margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px)); }
body.is-public{ padding-bottom:24px; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.2; color:var(--ink); }
h1{ font-size:1.75rem; } h2{ font-size:1.3rem; } h3{ font-size:1.05rem; }
p{ margin:0; } a{ color:var(--green-2); }
button,input,select,textarea{ font:inherit; color:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--ink); color:var(--paper); padding:.6em 1em; border-radius:var(--r-sm); z-index:200; } .skip:focus{ left:12px; }
[hidden]{ display:none !important; }
.muted{ color:var(--ink-3); } .small{ font-size:.86rem; } .mono{ font-family:var(--mono); font-size:.9em; }

/* ── Demo note ───────────────────────────────────────────────────────── */
.demo-note{ display:flex; align-items:center; gap:10px; padding:7px 14px; font-size:.78rem; line-height:1.35; color:var(--ink-2); background:var(--gold-soft); border-bottom:1px solid rgba(var(--gold-rgb),.4); }
.demo-note__tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); border:1px solid var(--gold); border-radius:999px; padding:1px 8px; flex:none; }
.demo-note__reset{ margin-left:auto; background:none; border:1px solid var(--line-2); border-radius:999px; padding:4px 11px; font-size:.78rem; cursor:pointer; color:var(--ink-2); }
.demo-note>a{ flex-shrink:0; }
@media (max-width:600px){
  .demo-note{ flex-wrap:wrap; }
  .demo-note>span:nth-child(2){ flex:1; min-width:180px; }
  .demo-note>a{ padding:8px 0; }
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.top{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:12px 18px; background:rgba(var(--bg-rgb),.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top__firm{ display:flex; align-items:center; gap:10px; }
.top__mark{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--green); color:rgb(var(--on-accent-rgb)); font-family:var(--serif); font-size:.9rem; letter-spacing:.04em; }
.top__name{ font-family:var(--serif); font-size:1.05rem; }
.top__who{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--ink-2); }
.top__client{ font-weight:600; color:var(--ink); } .top__matter{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); }
.top__out{ background:none; border:0; color:var(--green-2); font-size:.82rem; cursor:pointer; padding:6px 4px; }
@media (max-width:420px){ .top__matter{ display:none; } }

/* ── View ────────────────────────────────────────────────────────────── */
.view{ max-width:800px; margin:0 auto; padding:32px 24px 48px; display:grid; gap:24px; align-content:start; }
.page-head{ display:grid; gap:6px; padding:6px 0 4px; }
.page-head .eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); }
.page-head p:not(.eyebrow){ color:var(--ink-2); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.card__head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.card__head h2,.card__head h3{ margin-right:auto; }
.card__body{ padding:16px 18px; display:grid; gap:12px; }
.card__foot{ padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--paper); }
.card--accent{ border-color:rgba(var(--aqua-rgb),.4); background:var(--green-soft); }
.card--attention{ border-color:rgba(var(--gold-rgb),.4); background:var(--gold-soft); }

/* ── Stage stepper ───────────────────────────────────────────────────── */
.stepper{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:16px 18px 6px; }
.step{ display:grid; gap:8px; text-align:center; font-size:.68rem; line-height:1.2; color:var(--ink-3); }
.step__bar{ height:6px; border-radius:999px; background:var(--line); }
.step.is-done .step__bar{ background:var(--green-2); } .step.is-now .step__bar{ background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.step.is-now{ color:var(--ink); font-weight:600; } .step.is-done{ color:var(--green-2); }
.stage-now{ padding:6px 18px 16px; display:grid; gap:4px; }
.stage-now strong{ font-family:var(--serif); font-weight:500; font-size:1.15rem; }
.stage-now + .card__body{ border-top:1px solid var(--line); }

/* ── Lists ───────────────────────────────────────────────────────────── */
.list{ list-style:none; margin:0; padding:0; }
.list__item{ display:flex; gap:12px; align-items:flex-start; padding:13px 18px; border-bottom:1px solid var(--line); }
.list__item:last-child{ border-bottom:0; }
.list__item[data-href]{ cursor:pointer; } .list__item[data-href]:hover{ background:var(--paper); }
.list__body{ flex:1; min-width:0; display:grid; gap:3px; } .list__body strong{ font-weight:600; }
.list__meta{ font-size:.78rem; color:var(--ink-3); }
.list__ico{ flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--green-soft); color:var(--green); font-size:.95rem; }
.list__ico--gold{ background:var(--gold-soft); color:var(--gold-ink); } .list__ico--muted{ background:var(--paper); color:var(--ink-3); }
.timeline{ list-style:none; margin:0; padding:4px 0 0 0; }
.timeline li{ position:relative; padding:0 18px 16px 44px; }
.timeline li::before{ content:""; position:absolute; left:22px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--green-2); border:2px solid var(--card); box-shadow:0 0 0 1px var(--line-2); }
.timeline li::after{ content:""; position:absolute; left:26px; top:18px; bottom:-2px; width:2px; background:var(--line); }
.timeline li:last-child::after{ display:none; }
.timeline li:first-child::before{ background:var(--gold); }
.timeline time{ display:block; font-size:.76rem; color:var(--ink-3); margin-bottom:2px; }

/* ── Badges, buttons ─────────────────────────────────────────────────── */
.badge{ display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid transparent; white-space:nowrap; }
.badge--needs{ background:var(--gold-soft); color:var(--gold-ink); border-color:rgba(var(--gold-rgb),.4); }
.badge--ok{ background:var(--green-soft); color:var(--green); border-color:rgba(var(--aqua-rgb),.4); }
.badge--muted{ background:var(--paper); color:var(--ink-3); border-color:var(--line); }
.badge--red{ background:var(--red-soft); color:var(--red); border-color:rgba(var(--red-rgb),.4); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:46px; padding:10px 18px; border-radius:999px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); font-weight:600; font-size:.95rem; cursor:pointer; text-decoration:none; transition:background .18s,border-color .18s,transform .12s; }
.btn:hover{ background:var(--paper); } .btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--green); border-color:var(--green); color:rgb(var(--on-accent-rgb)); } .btn--primary:hover{ background:var(--green-2); }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:rgb(var(--on-accent-rgb)); }
.btn--ghost{ background:transparent; } .btn--sm{ min-height:38px; padding:7px 13px; font-size:.86rem; } .btn--block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form{ display:grid; gap:14px; }
.field{ display:grid; gap:6px; } .field>label,.field>span{ font-size:.86rem; font-weight:600; color:var(--ink-2); }
.field input,.field select,.field textarea{ width:100%; min-height:46px; padding:11px 13px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--card); outline:none; transition:border-color .18s,box-shadow .18s; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--green-2); box-shadow:0 0 0 3px var(--green-soft); }
.field textarea{ min-height:110px; resize:vertical; }
.field input[type="range"]{ padding:0; border:0; background:transparent; min-height:32px; accent-color:var(--green); }
.field input[type="range"]:focus{ box-shadow:none; }
.field__hint{ font-size:.8rem; color:var(--ink-3); }
.choice{ display:grid; gap:8px; }
.choice label{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); cursor:pointer; }
.choice input{ width:20px; height:20px; accent-color:var(--green); margin:0; }
.choice label:has(input:checked){ border-color:var(--green-2); background:var(--green-soft); }
.check{ display:flex; gap:12px; align-items:flex-start; font-size:.92rem; line-height:1.5; cursor:pointer; }
.check input{ width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--green); }
.upload{ display:grid; place-items:center; gap:6px; padding:22px; border:1.5px dashed var(--line-2); border-radius:var(--r-sm); background:var(--paper); text-align:center; color:var(--ink-2); cursor:pointer; }
.upload.is-filled{ border-style:solid; border-color:var(--green-2); background:var(--green-soft); color:var(--green); }
.progress{ display:flex; gap:6px; } .progress i{ flex:1; height:4px; border-radius:999px; background:var(--line); } .progress i.is-on{ background:var(--green-2); }
.notice{ padding:12px 14px; border-radius:var(--r-sm); font-size:.9rem; line-height:1.5; border:1px solid rgba(var(--gold-rgb),.4); background:var(--gold-soft); color:var(--ink); }
.notice--ok{ border-color:rgba(var(--aqua-rgb),.4); background:var(--green-soft); } .notice--red{ border-color:rgba(var(--red-rgb),.4); background:var(--red-soft); color:var(--red); }
.slots{ display:grid; gap:8px; } .slot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); cursor:pointer; text-align:left; width:100%; }
.slot:hover{ border-color:var(--green-2); } .slot strong{ font-weight:600; }

/* ── Signature ───────────────────────────────────────────────────────── */
.agreement{ max-height:300px; overflow:auto; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); font-family:var(--serif); font-size:.98rem; line-height:1.65; color:var(--ink-2); display:grid; gap:12px; }
.agreement h3{ font-size:1.2rem; color:var(--ink); }
.agreement.is-read{ border-color:var(--green-2); }
.sigpad{ padding:18px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); min-height:96px; display:grid; align-items:end; }
.sigpad__name{ font-family:"Snell Roundhand","Brush Script MT","Segoe Script",cursive; font-size:2rem; color:var(--ink); line-height:1; padding-bottom:8px; border-bottom:1px solid var(--ink-3); min-height:1.1em; }
.sigpad__rule{ font-size:.72rem; color:var(--ink-3); margin-top:8px; font-family:var(--mono); }
.ribbon{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--green); color:rgb(var(--on-accent-rgb)); font-weight:600; font-size:.9rem; }
.audit{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; font-size:.86rem; margin:0; }
.audit dt{ color:var(--ink-3); } .audit dd{ margin:0; word-break:break-all; }

/* ── Messages ────────────────────────────────────────────────────────── */
.thread{ display:grid; gap:10px; padding:16px 18px; }
.msg{ max-width:82%; padding:11px 14px; border-radius:16px; line-height:1.5; font-size:.95rem; }
.msg--firm{ background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px; justify-self:start; }
.msg--client{ background:var(--green); color:rgb(var(--on-accent-rgb)); border-bottom-right-radius:5px; justify-self:end; }
.msg__who{ display:block; font-size:.72rem; color:var(--ink-3); margin-bottom:3px; } .msg--client .msg__who{ color:rgb(var(--on-accent-rgb)); }
.msg__at{ display:block; font-size:.7rem; margin-top:4px; opacity:.7; }
.composer{ display:flex; gap:10px; padding:12px 18px; border-top:1px solid var(--line); background:var(--paper); }
.composer textarea{ flex:1; min-height:46px; max-height:140px; padding:11px 13px; border-radius:var(--r-sm); border:1px solid var(--line-2); resize:none; outline:none; }
.composer textarea:focus{ border-color:var(--green-2); }
.typing{ font-size:.8rem; color:var(--ink-3); padding:0 18px 10px; }

/* ── Money ───────────────────────────────────────────────────────────── */
.amount{ font-family:var(--serif); font-size:1.9rem; color:var(--ink); }
.row{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.row:last-child{ border-bottom:0; } .row b{ font-weight:600; }
.cardform{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .cardform .field--span{ grid-column:1 / -1; }

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(5,1fr); height:calc(var(--tabs-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(var(--surface-rgb),.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); }
.tabs a{ position:relative; display:grid; place-items:center; align-content:center; gap:3px; font-size:.68rem; font-weight:600; color:var(--ink-3); text-decoration:none; }
.tabs a[aria-current="page"]{ color:var(--green); }
.tabs__ico{ font-size:1.05rem; line-height:1; } .tabs__dot{ position:absolute; top:10px; right:calc(50% - 16px); width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px var(--card); }
body.is-public .tabs{ display:none; }
@media (min-width:721px){ .tabs{ position:sticky; bottom:auto; top:0; margin:0 auto; max-width:800px; border:1px solid var(--line); border-radius:999px; height:64px; padding:0; box-shadow:var(--shadow); } .tabs a{ font-size:.8rem; grid-auto-flow:column; gap:8px; } body{ padding-bottom:40px; } .view{ padding-top:14px; } }

/* ── Misc ────────────────────────────────────────────────────────────── */
.empty{ padding:40px 18px; text-align:center; color:var(--ink-2); display:grid; gap:8px; }
.toast{ position:fixed; left:50%; bottom:calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:300; padding:11px 18px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:.9rem; box-shadow:var(--shadow); max-width:92vw; }
.toast--ok{ background:var(--green); } body.is-public .toast{ bottom:24px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }


.upload:focus-within{outline:2px solid var(--green);outline-offset:3px}

/* Compact, readable spacing on the house 4px scale. */
.top{max-width:800px;margin:auto;flex-wrap:wrap;position:static}
.top__firm{flex:1;min-width:160px}
.top__who{flex-wrap:wrap;gap:8px 16px}
.page-head{gap:8px;padding:0}
.page-head .eyebrow{font-family:var(--sans);font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.stepper{gap:8px;padding:16px}
.step{font-size:.75rem;overflow-wrap:anywhere}
.step.is-now .step__bar{box-shadow:none}
.stage-now{padding:8px 24px 24px}
.list__item,.thread,.composer{padding:16px 24px;gap:12px}
.list__body{gap:4px}
.list__meta,.timeline time{font-size:.875rem}
.tabs__dot{box-shadow:none}
.agreement{padding:24px}
.composer textarea{min-width:0;background:var(--card)}
@media(max-width:600px){
  .view{padding:24px 16px 32px;gap:24px}
  .list__item,.thread,.composer{padding:16px}
  .top__name{font-size:1rem}
  .top__who{font-size:.875rem}
  .stepper{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .stage-now{padding:8px 16px 16px}
  .composer{flex-wrap:wrap}.composer textarea{flex-basis:100%}
}

@media(min-width:721px){.tabs{border-radius:8px}.tabs a{display:flex;justify-content:center;gap:8px}.view{padding-top:32px}}
.upload:has(+ input:focus-visible){outline:3px solid var(--green);outline-offset:3px}
.field input.sr-only{min-height:0;width:1px;height:1px;padding:0;border:0}