/* Terms.Law Demand Letter + Complaint Workroom - live demo.
   Public marketing page (unlike a real client workroom): carries the sitewide
   header/footer/GA/chatbox. UI chrome may use brand blue/indigo; the LOCKED
   document preview stays strict attorney style: black headings, no blue,
   nothing oversized. */
:root{
  --ink:#0b1220; --ink2:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f4f6f8;
  --brand:#1e3a5f; --brand2:#2563eb; --paper:#ffffff;
  --hi:#fde68a; --hi-edge:#f59e0b;
  --r-high:#dc2626; --r-high-bg:#fef2f2; --r-med:#d97706; --r-med-bg:#fffbeb;
  --r-low:#16a34a; --r-low-bg:#f0fdf4; --r-gray:#6b7280; --r-gray-bg:#f3f4f6;
  --green:#16a34a; --amber:#d97706; --red:#dc2626;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;}
a{color:var(--brand2);}
.wrap{max-width:1400px;margin:0 auto;padding:0 18px;}

/* Status strip + breadcrumbs */
.statusbar{background:#7c2d12;color:#fff;font-size:12.5px;font-weight:700;text-align:center;padding:7px 14px;}
.crumbs{font-size:.8rem;color:var(--muted);padding:1rem 0 .2rem;}
.crumbs a{color:var(--muted);}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--brand2);}

/* Header */
header.hd{background:linear-gradient(160deg,#0b1220,#16263f 60%,#1e3a5f);color:#fff;padding:22px 0 20px;margin-top:6px;border-radius:16px;}
header.hd .eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#7dd3fc;}
header.hd h1{margin:.4rem 0 .3rem;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;color:#fff;}
header.hd .sub{color:#cbd5e1;font-size:14px;margin-top:2px;}
header.hd .meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
header.hd .chip{font-size:12px;font-weight:600;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 11px;color:#e2e8f0;}

.cd-blurb{font-size:12.5px;color:#1e3a5f;background:#f5f7ff;border:1px solid #c7d2fe;border-radius:10px;padding:10px 14px;margin:16px 0 2px;line-height:1.5;}
.cd-blurb b{color:#0b1220;}

/* ---- top-level workroom nav (view switcher) ---- */
.wr-nav{display:flex;flex-wrap:wrap;gap:6px;padding:14px 0 4px;position:sticky;top:0;z-index:20;background:var(--bg);}
.wr-tab{font-size:13px;font-weight:700;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;cursor:pointer;color:var(--ink2);min-height:38px;}
.wr-tab:hover{border-color:#c7d2fe;}
.wr-tab.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.wr-view{display:none;padding-top:14px;}
.wr-view.on{display:block;}

.view-head{margin-bottom:12px;}
.view-head h2{font-size:1.15rem;font-weight:800;color:var(--ink);margin:0 0 .25rem;}
.view-head p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5;max-width:70ch;}

/* ---- gauge / readiness ring (reused on Case status + Evidence ledger) ---- */
.read-card{display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:center;border-radius:13px;padding:1.05rem 1.2rem;margin-bottom:1.1rem;border:1px solid;}
.read-card.green{background:var(--r-low-bg);border-color:#bbf7d0;}
.read-card.amber{background:var(--r-med-bg);border-color:#fde68a;}
.read-card.red{background:var(--r-high-bg);border-color:#fecaca;}
.read-card h4{font-size:1.02rem;margin:0 0 .3rem;color:var(--ink);}
.read-card p{margin:0;font-size:.92rem;color:var(--ink2);line-height:1.5;}
.gauge{text-align:center;flex-shrink:0;}
.gauge .ring{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--gc,var(--green)) calc(var(--v)*1%),#e2e8f0 0);position:relative;}
.gauge .ring::after{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%;}
.gauge .ring span{position:relative;z-index:1;font-size:1.4rem;font-weight:900;color:var(--ink);}
.gauge .ring span i{font-size:.68rem;font-weight:700;font-style:normal;color:var(--muted);}
.gauge .gl{font-size:.68rem;font-weight:700;color:var(--muted);margin-top:.35rem;text-transform:uppercase;letter-spacing:.04em;}

/* ---- 3-column case-status layout ---- */
.cols3{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1rem;margin-bottom:1.1rem;}
.cols3 .c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;}
.cols3 .c h5{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 .5rem;}
.cols3 .c p{font-size:.87rem;color:var(--ink2);margin:0;line-height:1.5;}
.cols3 .c ul{list-style:none;margin:0;padding:0;}
.cols3 .c li{font-size:.85rem;color:var(--ink);padding:.22rem 0;display:flex;gap:.5rem;line-height:1.4;}
.cols3 .c.strong li::before{content:"\2713";color:var(--green);font-weight:800;}
.cols3 .c.need li::before{content:"\25CB";color:var(--amber);font-weight:800;}

.next-card{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:13px;padding:1rem 1.15rem;}
.next-card h5{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 .35rem;}
.next-card p{margin:0;font-size:.88rem;color:var(--ink2);line-height:1.5;}
.next-card .pr{text-align:right;flex-shrink:0;}
.next-card .pr .amt{font-size:1.4rem;font-weight:900;color:var(--ink);}
.next-card .pr a{font-size:.83rem;font-weight:700;}

/* ---- evidence ledger ---- */
.meterwrap{background:#f8fafc;border:1px solid var(--line);border-radius:13px;padding:.95rem 1.1rem;margin-bottom:1.1rem;}
.meterwrap .mh{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.55rem;}
.meterwrap .mh h5{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0;}
.meterwrap .mh .pct{font-size:1.25rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
.meter{height:14px;background:#e2e8f0;border-radius:9px;overflow:hidden;position:relative;}
.meter .fill{height:100%;border-radius:9px;transition:width .3s ease,background .3s;}
.meter-out{margin-top:.6rem;font-size:.85rem;color:var(--ink2);line-height:1.5;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.rb{font-size:.7rem;font-weight:800;padding:.2rem .55rem;border-radius:7px;text-transform:uppercase;letter-spacing:.03em;}
.rb.green{background:var(--r-low-bg);color:#15803d;}
.rb.amber{background:var(--r-med-bg);color:#b45309;}
.rb.red{background:var(--r-high-bg);color:#b91c1c;}

.ledger-list{display:grid;gap:.55rem;}
.ledger-item{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.8rem .95rem;display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;}
.ledger-item.have{border-color:#bbf7d0;background:#fbfffc;}
.ledger-item .li-main{flex:1;min-width:200px;}
.ledger-item .li-t{font-weight:700;font-size:.92rem;color:var(--ink);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;}
.ledger-item .li-w{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.14rem .45rem;border-radius:6px;background:#eef2ff;color:#4338ca;}
.ledger-item .li-note{font-size:.83rem;color:var(--muted);margin-top:.25rem;line-height:1.45;}
.li-toggle{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex-shrink:0;}
.li-btn{font-size:.78rem;font-weight:700;padding:.4rem .75rem;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;min-height:36px;}
.li-btn.on{background:var(--green);border-color:var(--green);color:#fff;}
.li-btn:hover{border-color:#c7d2fe;}
.li-locked{font-size:.7rem;color:#94a3b8;text-align:right;max-width:180px;line-height:1.35;}

/* ---- litigation-readiness risk register (sortable table) ---- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1.05rem;}
.stat-c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem .95rem;}
.stat-c .n{font-size:1.35rem;font-weight:900;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums;}
.stat-c .t{font-size:.74rem;color:var(--muted);margin-top:.15rem;line-height:1.3;}

.risk-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.risk-table thead th{text-align:left;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#f8fafc;padding:.6rem .8rem;cursor:pointer;user-select:none;border-bottom:1px solid var(--line);white-space:nowrap;}
.risk-table thead th:hover{color:var(--brand2);}
.risk-table thead th .arrow{font-size:.65rem;margin-left:.25rem;opacity:.55;}
.risk-table tbody tr{border-bottom:1px solid var(--line);cursor:pointer;}
.risk-table tbody tr:last-child{border-bottom:none;}
.risk-table tbody tr:hover{background:#f8fafc;}
.risk-table td{padding:.7rem .8rem;font-size:.87rem;color:var(--ink2);vertical-align:top;}
.risk-table td.rt-title{color:var(--ink);font-weight:700;}
.sev-pill{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.2rem .55rem;border-radius:999px;white-space:nowrap;}
.sev-pill.hi{background:var(--r-high-bg);color:#b91c1c;}
.sev-pill.md{background:var(--r-med-bg);color:#b45309;}
.sev-pill.lo{background:var(--r-low-bg);color:#15803d;}
.risk-mit{display:none;padding:0 .8rem .8rem;font-size:.85rem;color:var(--ink2);line-height:1.5;background:#f8fafc;}
.risk-mit b{color:var(--ink);}
tr.risk-row.open + tr.risk-mit-row .risk-mit{display:block;}

/* ---- pane-row (Locked work product; reused across every workroom I build) ---- */
.scopebar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 4px;font-size:12px;}
.scopebar .doc-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;color:var(--ink2);}
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 0;}
.tab{font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;border-radius:8px 8px 0 0;padding:9px 14px;cursor:pointer;color:var(--ink2);position:relative;}
.tab.active{border-bottom-color:#fff;color:var(--brand);box-shadow:0 -2px 0 var(--brand2) inset;}
.tab .badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-left:6px;padding:1px 6px;border-radius:999px;vertical-align:middle;background:#eef2ff;color:#4338ca;}

.pane-row{display:grid;grid-template-columns:minmax(300px,1.6fr) 2.4fr;gap:16px;align-items:start;margin-top:0;border:1px solid var(--line);border-top:none;background:#fff;border-radius:0 0 12px 12px;padding:16px;}
.builder{min-width:0;}
.builder h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px;}
.doc-meta{font-size:13px;color:var(--ink2);background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:12px;}
.doc-meta b{color:var(--ink);}
.locked-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe;border-radius:999px;padding:4px 10px;margin-bottom:10px;}
.facts-grid{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:10px;}
.fact-group-t{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#4338ca;margin:10px 0 4px;}
.fact-row{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:.5rem .7rem;}
.fact-row .fl{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.fact-row .fv{font-size:12.5px;color:var(--ink);font-weight:600;margin-top:1px;}
.fact-row .fv.pending{color:#9a3412;font-style:italic;font-weight:600;}
.comment-howto{font-size:11.5px;color:#4338ca;background:#eef2ff;border:1px dashed #c7d2fe;border-radius:9px;padding:8px 10px;margin-top:12px;line-height:1.5;}

.preview-wrap{position:sticky;top:60px;}
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.preview-bar .ttl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;}
.preview-bar .draftpill{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;padding:2px 9px;}
.preview{max-height:calc(100vh - 140px);min-height:420px;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(11,20,48,.06);padding:30px 34px;scroll-behavior:smooth;}

/* The document itself: strict black attorney style, nothing oversized, no blue */
.doc{font-family:Georgia,'Times New Roman',serif;color:#000;font-size:12px;line-height:1.55;}
.doc .doc-title{font-size:14px;font-weight:700;text-align:center;color:#000;margin:12px 0 2px;letter-spacing:.02em;}
.doc .doc-sub{text-align:center;font-size:11px;color:#000;margin:0 0 16px;font-style:italic;}
.doc .doc-h{font-size:12px;font-weight:700;color:#000;margin:16px 0 5px;}
.doc .doc-p{font-size:12px;color:#000;margin:0 0 9px;text-align:justify;}
.doc .doc-p.doc-letterhead{text-align:center;font-weight:700;margin-bottom:16px;}
.doc .doc-illus{font-weight:400;font-style:italic;font-size:10.5px;color:#555;}
.doc .doc-p.doc-date{text-align:right;margin-bottom:14px;}
.doc .doc-p.doc-encl{font-size:10.5px;color:#333;margin-top:12px;}
.doc .doc-p.doc-draftflag{text-align:center;font-weight:800;color:#7c2d12;background:#fff7ed;border:1px solid #fdba74;border-radius:6px;padding:6px 10px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:10.5px;letter-spacing:.03em;}
.doc .doc-list{font-size:12px;color:#000;margin:0 0 10px;padding-left:20px;}
.doc .doc-list li{margin:0 0 5px;}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 12px;}
.doc .kv-table td{border:1px solid #cfcfcf;padding:5px 9px;font-size:11.5px;vertical-align:top;}
.doc .kv-table td:first-child{width:38%;font-weight:700;background:#f3f3f3;}
.doc .sig-table td{padding:9px 12px 2px 0;font-size:11.5px;vertical-align:bottom;}

/* Field spans: static values or an intentionally-empty pending marker */
.field{border-radius:3px;}
.field.empty{color:#9a3412;background:#fff7ed;border-bottom:1px dashed #fdba74;padding:0 2px;font-style:italic;}

.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.btn{font-family:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--brand2);background:var(--brand2);color:#fff;border-radius:8px;padding:9px 14px;cursor:pointer;text-decoration:none;display:inline-block;min-height:38px;}
.btn.secondary{background:#fff;color:var(--brand2);}
.btn.ghost{background:#fff;color:var(--ink2);border-color:var(--line);}
.btn:hover{filter:brightness(.96);}

/* Project-knowledge cluster (borrowed pattern from the contract-generator engine) */
.kbox{border:1px solid #c7d2fe;background:#eef2ff;border-radius:10px;margin:0 0 12px;overflow:hidden;}
.kbox>summary{cursor:pointer;list-style:none;padding:10px 13px;font-size:12.5px;font-weight:800;color:#3730a3;user-select:none;}
.kbox>summary::-webkit-details-marker{display:none;}
.kbox>summary::before{content:"\25B8";margin-right:7px;font-size:10px;}
.kbox[open]>summary::before{content:"\25BE";}
.kbody{padding:4px 13px 12px;}
.k-sum{font-size:12.5px;color:var(--ink2);margin:4px 0 8px;line-height:1.5;}
.k-ent{font-size:12px;color:var(--ink2);background:#fff;border:1px solid #e0e7ff;border-radius:8px;padding:8px 10px;margin:0 0 8px;line-height:1.5;}
.ksub{border-top:1px solid #dbe1fb;}
.ksub>summary{cursor:pointer;list-style:none;padding:7px 2px;font-size:12px;font-weight:700;color:#4338ca;user-select:none;}
.ksub>summary::-webkit-details-marker{display:none;}
.ksub>summary::before{content:"+";margin-right:7px;font-weight:800;}
.ksub[open]>summary::before{content:"-";}
.k-list{margin:2px 0 8px;padding-left:18px;}
.k-list li{font-size:12px;color:var(--ink2);margin:0 0 4px;line-height:1.45;}
.k-def{font-size:12px;background:#fff;border:1px solid #e0e7ff;border-radius:7px;padding:7px 9px;margin:0 0 6px;line-height:1.45;}
.k-def .k-why{color:var(--muted);}
.k-def .k-trig{color:#4338ca;}
.k-gl{font-size:12px;color:var(--ink2);padding:5px 0;border-bottom:1px solid #eef0fb;line-height:1.45;}
.k-gl b{color:var(--ink);}

/* ---- Add legal work (upsell) ---- */
.addon-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
.addon-card{border:1.5px dashed #cbd5e1;background:#f8fafc;border-radius:13px;padding:1rem 1.1rem;display:flex;flex-direction:column;}
.addon-top{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem;}
.addon-badge{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.2rem .55rem;border-radius:999px;background:#eef2ff;color:#4338ca;}
.addon-stage{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.2rem .55rem;border-radius:999px;background:#fff;color:var(--muted);border:1px solid var(--line);}
.addon-card h4{font-size:.98rem;font-weight:800;color:var(--ink);margin:0 0 .3rem;}
.addon-card .ap{font-size:1.05rem;font-weight:900;color:var(--ink);margin-bottom:.4rem;}
.addon-card p{font-size:.85rem;color:var(--ink2);line-height:1.5;margin:0 0 .8rem;flex:1;}
.addon-note{font-size:.86rem;color:var(--muted);line-height:1.5;margin:0 0 1rem;}

/* ---- Comments (illustrative static thread) ---- */
.cmt-thread{display:grid;gap:.1rem;}
.cmt{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--line);}
.cmt:last-child{border-bottom:none;}
.cmt .ca{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;}
.cmt.atty .ca{background:linear-gradient(135deg,#2563eb,#7c3aed);}
.cmt.client .ca{background:#475569;}
.cmt .cb b{font-size:.85rem;color:var(--ink);}
.cmt .cb .tm{font-size:.74rem;color:var(--muted);margin-left:.4rem;}
.cmt .cb p{margin:.2rem 0 0;font-size:.88rem;color:var(--ink2);line-height:1.45;}

.disc{font-size:11.5px;color:var(--muted);margin:20px 0 30px;line-height:1.55;}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#0b1220;color:#fff;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:8px;opacity:0;transition:opacity .25s;z-index:280;pointer-events:none;}
.toast.show{opacity:1;}

.hint{display:inline-block;width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;background:#e5e7eb;color:#475569;font-size:10px;font-weight:700;cursor:help;margin-left:4px;}

@media (max-width:960px){
  .pane-row{grid-template-columns:1fr;}
  .builder,.preview-wrap{min-width:0;}
  .preview-wrap{position:static;}
  .preview{max-height:70vh;overflow-x:auto;}
  .cols3{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr 1fr;}
  .addon-grid{grid-template-columns:1fr;}
  .read-card{grid-template-columns:1fr;}
  .next-card{grid-template-columns:1fr;text-align:left;}
  .next-card .pr{text-align:left;}
}
@media (max-width:640px){
  .wr-nav{gap:5px;}
  .wr-tab{flex:1 1 auto;text-align:center;padding:9px 10px;font-size:12.5px;}
  .risk-table{display:block;overflow-x:auto;}
  .li-toggle{width:100%;align-items:stretch;}
  .li-btn{width:100%;}
}