/* Rule of Credit internal platform. Brand: warm white, charcoal, persimmon square. Fonts are self-hosted (SIL OFL).
   Colour rules (audit D, 2026-10-12): persimmon (--brand) is the mark only: logo square, link underline, active
   indicator. It is never a fill behind text and never a status. Interaction is ink; focus is a blue ring.
   Status colours mean status only, and every status pill carries a glyph so it survives greyscale and print. */
@font-face{font-family:'Syne';src:url("fonts/syne-latin-wght-normal.559e8363d74f.woff2") format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url("fonts/hanken-grotesk-latin-wght-normal.c501f578bf3f.woff2") format('woff2');font-weight:100 900;font-display:swap}

/* ---------- Tokens (light) ---------- */
:root{
  color-scheme:light dark;
  --paper:#F6F2EC;        /* page */
  --surface:#FFFDF9;      /* cards, tables, inputs */
  --sunken:#EFE9E0;       /* board columns, table heads, stage chips */
  --ink:#1C1B1F;          /* text, primary fill */
  --ink-2:#3A3940;        /* primary hover */
  --on-ink:#FFFDF9;       /* text on an ink fill */
  --muted:#5A554F;        /* secondary text */
  --line:#DDD5CA;         /* decorative dividers */
  --field:#8C8378;        /* form control boundary (3:1) */
  --brand:#E2552D;        /* persimmon: mark, underline, active indicator only */
  --focus:#1F5FBF;        /* focus ring */
  --head-bg:#1C1B1F; --head-fg:#FFFDF9; --head-muted:#D6D0C7; --head-focus:#8FB3F0; --head-line:#3A3940;
  --fail:#A11D3F; --fail-bg:#FBE9EE; --fail-2:#86152F;
  --warn:#7A4F00; --warn-bg:#FDF1D3; --warn-line:#D9B562;
  --pass:#1F6B47; --pass-bg:#E3F1E8;
  --conf:#5B3A8A; --conf-bg:#EFE7FA;
  --info:#3F4A5A; --info-bg:#ECEFF3;
  --mark:#FFE58A;
  --white:#FFFFFF;        /* print paper and QR backgrounds only */
  --shadow:0 1px 3px rgba(28,27,31,.12);
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;--display:'Syne','Arial Black',sans-serif}

/* ---------- Tokens (dark, mirrors the website). Screen only, so printing always uses the light set. ---------- */
@media screen and (prefers-color-scheme:dark){
  :root{
    --paper:#161518; --surface:#1F1E22; --sunken:#2A282E;
    --ink:#F1ECE4; --ink-2:#D3CCC1; --on-ink:#161518;
    --muted:#A8A29A; --line:#3A383F; --field:#8A847C;
    --brand:#F0673F; --focus:#8FB3F0;
    --head-bg:#0F0E11; --head-fg:#F1ECE4; --head-muted:#BDB6AC; --head-focus:#8FB3F0; --head-line:#2A282E;
    --fail:#FF8A80; --fail-bg:#3A1A1A; --fail-2:#FFB0A8;
    --warn:#F2C46B; --warn-bg:#3A2D10; --warn-line:#7A5E22;
    --pass:#7DD3A5; --pass-bg:#13301F;
    --conf:#C7A8F5; --conf-bg:#2A2140;
    --info:#B9C3D1; --info-bg:#262A31;
    --mark:#6B5A12;
    --shadow:0 1px 3px rgba(0,0,0,.5)}
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--body)}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
summary{cursor:pointer;min-height:24px}
code{font:13px ui-monospace,Menlo,Consolas,monospace;background:var(--sunken);padding:0 4px}
mark{background:var(--mark);color:var(--ink)}
hr{border:0;border-top:1px solid var(--line)}
.tabs,.tw,.subnav{position:relative} /* keeps .vh text inside its scroll container */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header and top navigation ---------- */
header.top{background:var(--head-bg);color:var(--head-fg);display:flex;align-items:center;gap:20px;padding:8px 24px;min-height:56px}
header.top a{color:var(--head-fg);text-decoration:none;font-weight:600}
header.top :focus-visible{outline-color:var(--head-focus)}
header.top .brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;white-space:nowrap}
.sq{display:inline-block;width:.32em;height:.32em;background:var(--brand);margin-left:.06em}
header.top nav{display:flex;gap:6px;flex:1;flex-wrap:wrap;align-items:center}
header.top nav a{display:inline-block;padding:8px 10px 6px;min-height:24px;border-bottom:3px solid transparent}
header.top nav a:hover{border-bottom-color:var(--head-muted)}
header.top nav a[aria-current]{border-bottom-color:var(--brand)}
header.top .who{font-size:13px;color:var(--head-muted);display:flex;align-items:center;gap:12px}
header.top .who a{font-weight:500;padding:4px 0}
header.top .roles{font-size:12px}
header.top .who form{margin:0}
header.top button.ghost{color:var(--head-fg);border-color:var(--head-fg);background:transparent;padding:4px 10px;min-height:30px}
header.top button.ghost:hover{background:var(--head-fg);color:var(--head-bg)}
.nav-wide{display:contents}
.spacer{flex:1}
.nav-narrow{display:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}
.nav-narrow summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--head-fg);font-weight:600;min-height:40px}
.nav-narrow summary::-webkit-details-marker{display:none}
.nav-narrow summary::before{content:"\2630";font-size:16px;line-height:1}
.nav-narrow[open] summary::before{content:"\2715"}
@media (max-width:759.98px){
  header.top{position:relative;padding:8px 16px;gap:12px}
  .nav-wide{display:none!important}
  .nav-narrow{display:block;margin-left:auto}
  .nav-narrow .drawer{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--head-bg);padding:4px 16px 16px;box-shadow:var(--shadow)}
  header.top .nav-narrow nav{flex-direction:column;align-items:stretch;gap:0}
  header.top .nav-narrow nav a{display:block;padding:12px 10px;border-bottom:1px solid var(--head-line);border-left:3px solid transparent}
  header.top .nav-narrow nav a[aria-current]{border-left-color:var(--brand);border-bottom-color:var(--head-line)}
  header.top .nav-narrow .who{flex-wrap:wrap;padding-top:12px}
}

/* ---------- Layout ---------- */
main{padding:20px 24px 60px;max-width:1280px;margin:0 auto}
@media (max-width:759.98px){main{padding:16px 16px 48px}}
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h1{font-family:var(--display);font-size:26px;letter-spacing:-.02em}
h2{font-size:18px;margin-top:22px}
.h-sub{display:block;margin-top:6px;font:500 14px/1.4 var(--body);letter-spacing:0;color:var(--muted);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:13px}
.t-fail{color:var(--fail)} .t-warn{color:var(--warn)} .t-pass{color:var(--pass)}
.card{background:var(--surface);border:1px solid var(--line);padding:16px 18px;margin-bottom:16px}
.card.notice{border:2px solid var(--ink)}
.card.narrow{max-width:420px;margin:60px auto}
.card.medium{max-width:640px;margin:30px auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.right{float:right}
.crumbs{font-size:13px;margin:0 0 8px}
.mt0{margin-top:0} .mt6{margin-top:6px} .mt10{margin-top:10px} .mt12{margin-top:12px} .mb6{margin:0 0 6px} .mb12{margin-bottom:12px}
.w10{width:10%} .w12{width:12%} .w14{width:14%} .w20{width:20%} .w22{width:22%} .w24{width:24%}
.pre{white-space:pre-wrap}
.select-all{user-select:all}
.inline-form{display:inline}
.filter a[aria-current]{font-weight:700;text-decoration-thickness:3px}
.row-actions form{margin:4px 0}

/* ---------- Tables ---------- */
table{border-collapse:collapse;width:100%;background:var(--surface)}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--sunken)}
td{font-variant-numeric:tabular-nums}
.tw{overflow-x:auto;border:1px solid var(--line);margin-bottom:16px}

/* ---------- Buttons: ink primary, .ghost secondary, .danger crimson. Hover is ink-2, never persimmon. ---------- */
.btn,button{display:inline-block;background:var(--ink);color:var(--on-ink);border:2px solid var(--ink);padding:7px 14px;min-height:36px;font:600 14px/1.3 var(--body);cursor:pointer;text-decoration:none;vertical-align:middle}
.btn:hover,button:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--on-ink)}
.btn.ghost,button.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover,button.ghost:hover{background:var(--sunken);color:var(--ink);border-color:var(--ink)}
.btn.danger,button.danger{background:var(--fail);border-color:var(--fail);color:var(--on-ink)}
.btn.danger:hover,button.danger:hover{background:var(--fail-2);border-color:var(--fail-2)}
.btn-sm,button.btn-sm{padding:3px 10px;min-height:28px;font-size:13px}
button:disabled,button[disabled]{background:var(--sunken);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.blocked{font-size:13px;color:var(--muted);margin-left:8px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- Status pills: tint + 1px border + glyph, so status never depends on colour alone ---------- */
.pill{display:inline-block;padding:1px 8px;border:1px solid currentColor;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pill::before{font-weight:700;margin-right:4px}
.s-pass,.p-pass{background:var(--pass-bg);color:var(--pass)}
.s-fail,.p-fail{background:var(--fail-bg);color:var(--fail)}
.s-needs_info,.p-needs_info{background:var(--warn-bg);color:var(--warn)}
.s-conflict,.p-conflict{background:var(--conf-bg);color:var(--conf)}
.s-info,.s-na,.p-info,.p-na{background:var(--info-bg);color:var(--info)}
.s-pass::before,.p-pass::before{content:"\2713";content:"\2713" / ""}
.s-fail::before,.p-fail::before{content:"\2715";content:"\2715" / ""}
.s-needs_info::before,.p-needs_info::before{content:"?";content:"?" / ""}
.s-conflict::before,.p-conflict::before{content:"\21C4";content:"\21C4" / ""}
.s-info::before,.s-na::before,.p-info::before,.p-na::before{content:"\2022";content:"\2022" / ""}
.count{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--fail);color:var(--on-ink);font-size:12px;font-weight:700;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.sev{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.cite{font-size:12px;color:var(--muted)}

/* ---------- File header ---------- */
.stages{display:flex;gap:4px;flex-wrap:wrap;margin:8px 0;padding:0;list-style:none}
.stages span{font-size:12px;padding:3px 8px;background:var(--sunken);color:var(--muted);white-space:nowrap}
.stages span.done{background:var(--pass-bg);color:var(--pass)}
.stages span.done::before{content:"\2713";content:"\2713" / "";margin-right:4px}
.stages span.now{background:var(--ink);color:var(--on-ink);font-weight:700}
.stages span.now::before{content:"";display:inline-block;width:6px;height:6px;background:var(--brand);margin-right:6px;vertical-align:middle}

/* ---------- File tabs: grouped clusters in workflow order ---------- */
.tabs{display:flex;gap:6px 14px;flex-wrap:wrap;align-items:flex-end;border-bottom:2px solid var(--ink);margin:14px 0 18px}
.tabgroup{display:flex;flex-direction:column;gap:0}
.tg-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 10px}
.tg-links{display:flex;flex-wrap:wrap;gap:2px}
.tabs a{display:inline-flex;align-items:center;padding:7px 10px 6px;min-height:32px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs a:hover{border-bottom-color:var(--line)}
.tabs a.on{border-bottom-color:var(--brand);background:var(--surface)}
@media (max-width:759.98px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;gap:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:2px}
  .tabgroup,.tg-links{flex-wrap:nowrap;flex-shrink:0}
  .stages{flex-wrap:nowrap;overflow-x:auto}
}

/* ---------- Library sub-navigation ---------- */
.subnav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 16px}
.subnav a{padding:6px 12px 5px;min-height:28px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;border-bottom:3px solid transparent;margin-bottom:-1px}
.subnav a:hover{border-bottom-color:var(--line)}
.subnav a[aria-current]{border-bottom-color:var(--brand)}

/* ---------- Forms ---------- */
form p{margin:0 0 12px}
form label{display:block;font-weight:600;font-size:13px;margin-bottom:3px}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input[type=file],select,textarea,input:not([type]){width:100%;max-width:520px;min-height:40px;padding:7px 9px;border:1px solid var(--field);background:var(--surface);color:var(--ink);font:14px var(--body)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;margin-right:6px;accent-color:var(--ink);vertical-align:middle}
input.inline{max-width:320px;display:inline-block;width:auto}
input.w-page{width:90px}
.helptext{display:block;font-size:12px;color:var(--muted);max-width:620px}
.errorlist{color:var(--fail);margin:2px 0;padding-left:18px;font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px 24px}
.searchrow{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.searchrow p{margin:0}
.searchrow .grow{flex:1;min-width:220px}

/* ---------- Messages and banners ---------- */
.msg{padding:10px 14px;margin-bottom:12px;border-left:4px solid}
.msg.success{background:var(--pass-bg);border-color:var(--pass)} .msg.error{background:var(--fail-bg);border-color:var(--fail)}
.msg.warning,.msg.info{background:var(--warn-bg);border-color:var(--warn)}
.banner{background:var(--warn-bg);color:var(--ink);border:1px solid var(--warn-line);border-left:4px solid var(--warn);padding:10px 14px;margin-bottom:14px}
.gate li{margin-bottom:4px}

/* ---------- KPIs and board ---------- */
.kpis{display:flex;gap:10px;flex-wrap:wrap}
.kpi{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);padding:10px 14px;min-width:110px;text-decoration:none;color:var(--ink);min-height:44px}
a.kpi:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.kpi b{display:block;font:700 28px/1.1 var(--body);font-variant-numeric:tabular-nums}
.kpi.k-fail{border-left-color:var(--fail)} .kpi.k-fail b{color:var(--fail)}
.kpi.k-warn{border-left-color:var(--warn)} .kpi.k-warn b{color:var(--warn)}
.kpi.k-conf{border-left-color:var(--conf)} .kpi.k-conf b{color:var(--conf)}
.kpi.k-pass{border-left-color:var(--pass)} .kpi.k-pass b{color:var(--pass)}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.col{background:var(--sunken);padding:10px;min-height:120px}
.col h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.fcard{display:block;background:var(--surface);border:1px solid var(--line);padding:8px 10px;margin-bottom:8px;text-decoration:none;color:var(--ink)}
.fcard:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.fcard .ref{font-size:12px;color:var(--muted)}

/* ---------- Library, AI review ---------- */
.quote{border-left:3px solid var(--line);padding:6px 10px;margin:8px 0;background:var(--sunken);font-size:13px}
.quote blockquote{margin:4px 0 0;color:var(--ink)}
.quote.q-not_found,.quote.q-not_citable{border-left-color:var(--fail)}
.quote.q-verified,.quote.q-adjacent{border-left-color:var(--pass)}
.quote.q-other_page{border-left-color:var(--warn)}
.draft.d-accepted{border-left:4px solid var(--pass)} .draft.d-rejected{border-left:4px solid var(--muted);opacity:.75}
.page-text{white-space:pre-wrap;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--surface);border:1px solid var(--line);padding:14px;overflow-x:auto}
.qr{text-align:center;margin:10px 0}
.qr svg{background:var(--white);padding:8px} /* QR codes must stay dark-on-white to scan, in either theme */
.prose{max-width:820px}

/* ---------- Report ---------- */
body.report{background:var(--surface)}
body.report main{max-width:900px}
.report .head{border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:16px}
.report .wordmark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.03em}
.finding{margin-bottom:14px}
.finding p{margin:4px 0}
.print-only{display:none}

/* ---------- Print ---------- */
/* @page margin boxes don't inherit :root custom properties, so the muted value is repeated here. */
@page report{size:letter;margin:18mm 16mm 20mm;
  @bottom-left{content:"Confidential: contains borrower information. Rule of Credit LLC, internal working report.";font:8pt 'Hanken Grotesk',Arial,sans-serif;color:#5A554F}
  @bottom-right{content:"Page " counter(page) " of " counter(pages);font:8pt 'Hanken Grotesk',Arial,sans-serif;color:#5A554F}}
@media print{
  header.top,.tabs,.subnav,.noprint{display:none!important}
  body{background:var(--white)}
  main{padding:0;max-width:none}
  .card{border:0;padding:0}
  body.report{page:report;font-size:10.5pt}
  a{color:var(--ink);text-decoration:none}
  .tw{overflow:visible;border:0}
  thead{display:table-header-group}
  tr,.finding,.pill,blockquote{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  th,.pill,.stages span,.count{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-only{display:block}
}

/* ---------- Readiness: band + three meters. Band colours reuse the status set, each with a glyph. ---------- */
.ready{border:1px solid var(--line);border-left:6px solid var(--line);background:var(--surface);padding:14px 16px;margin-bottom:16px}
.ready.b-screen_out{border-left-color:var(--fail)} .ready.b-clarify{border-left-color:var(--warn)} .ready.b-proceed{border-left-color:var(--pass)}
.band{display:inline-block;font:700 18px/1.2 var(--body);padding:4px 12px;border:1px solid currentColor;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.band::before{margin-right:6px}
.band.b-screen_out{background:var(--fail-bg);color:var(--fail)} .band.b-screen_out::before{content:"\2715";content:"\2715" / ""}
.band.b-clarify{background:var(--warn-bg);color:var(--warn)} .band.b-clarify::before{content:"?";content:"?" / ""}
.band.b-proceed{background:var(--pass-bg);color:var(--pass)} .band.b-proceed::before{content:"\2713";content:"\2713" / ""}
.band.small{font-size:12px;padding:1px 8px;border-radius:20px}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin:12px 0 4px}
.meter b{font:700 24px/1.1 var(--body);font-variant-numeric:tabular-nums}
.meter span{display:block;font-size:12.5px;color:var(--muted)}
.bar{height:8px;background:var(--sunken);margin-top:5px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bar i{display:block;height:100%;background:var(--ink)}
.steps{list-style:none;padding:0;margin:10px 0 0;counter-reset:step}
.steps li{counter-increment:step;padding:8px 0 8px 34px;border-top:1px solid var(--line);position:relative}
.steps li::before{content:counter(step);position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;background:var(--sunken);font:700 12px/24px var(--body);text-align:center}
.steps .act{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted)}
.timing{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media print{.ready{border:1px solid var(--line);border-left-width:6px;padding:10px 12px}.steps li{break-inside:avoid}}

/* ---------- Checklists and tracker ---------- */
.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--line);break-inside:avoid}
.checklist .box{flex:0 0 16px;height:16px;border:1.5px solid var(--ink);margin-top:3px;background:var(--surface)}
.chk{font-weight:500;font-size:14px;display:inline-flex;align-items:center;margin-right:14px}
h2.inline{display:inline;font-size:18px}
.pill.c-done{background:var(--pass-bg);color:var(--pass)} .pill.c-done::before{content:"\2713";content:"\2713" / ""}
.pill.c-problem{background:var(--fail-bg);color:var(--fail)} .pill.c-problem::before{content:"\2715";content:"\2715" / ""}
.pill.c-open{background:var(--warn-bg);color:var(--warn)} .pill.c-open::before{content:"?";content:"?" / ""}
.pill.c-not_started,.pill.c-na{background:var(--info-bg);color:var(--info)} .pill.c-not_started::before,.pill.c-na::before{content:"\2022";content:"\2022" / ""}
form.tick{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
form.tick select,form.tick input{min-height:32px;max-width:200px;padding:3px 6px}
td.num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- Live intake ---------- */
.live-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.clock{text-align:right}
.clock b{display:block;font:700 34px/1 var(--body);font-variant-numeric:tabular-nums}
.drop{display:block;border:2px dashed var(--field);background:var(--surface);padding:26px 16px;text-align:center;cursor:pointer;margin:6px 0 16px}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--sunken)}
.drop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:14px}
.live-grid .card{margin:0}
.steps li.serious{background:var(--fail-bg)}
.feed{list-style:none;padding:0;margin:0;max-height:260px;overflow:auto}
.feed li{padding:4px 0;border-top:1px solid var(--line)}
.live-box{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.inline-form{display:inline;margin:0}