/* HousUp partner app — v4 "official" pass (docs/UI.md is the rulebook).
   Light is the default for everyone; dark only when the user picks it (or picks System and the OS is dark).
   Archivo for the wordmark and h1; the system UI face for everything else. 8-px grid, 10-px cards, 1-px lines,
   no shadows except the sign-in card. Lists are tables. */

:root, :root[data-theme="light"]{
  --bg:#FFFFFF; --panel:#FFFFFF; --surface:#F5F7FA; --hover:#F7F9FC; --line:#E3E8EF; --line-strong:#CDD5E0;
  --text:#0F1620; --body:#2B3340; --muted:#525B68; --faint:#8A93A1;
  --accent:#0A6FE0; --accent-ink:#FFFFFF; --accent-soft:#EAF3FF; --accent-deep:#0A4FA8; --mark:#1A8FFF;
  --ok:#23784C; --ok-soft:#EBF7F0; --warn:#946000; --warn-soft:#FFF6E3; --hold:#B23E35; --hold-soft:#FDEFED; --info:#0A4FA8; --info-soft:#EAF3FF;
  --shadow:0 12px 32px rgba(15,22,32,.08);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0F1620; --panel:#151D29; --surface:#1B2431; --hover:#1A2330; --line:#2A3441; --line-strong:#3A4655;
  --text:#EEF2F7; --body:#D5DBE4; --muted:#A3ADBB; --faint:#6E7887;
  --accent:#5AA5FF; --accent-ink:#0F1620; --accent-soft:#17283D; --accent-deep:#8FC2FF; --mark:#5AA5FF;
  --ok:#5BCB8B; --ok-soft:#14301F; --warn:#F0B75B; --warn-soft:#3A2B10; --hold:#F09189; --hold-soft:#3B1A18; --info:#8FC2FF; --info-soft:#17283D;
  --shadow:0 12px 32px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    --bg:#0F1620; --panel:#151D29; --surface:#1B2431; --hover:#1A2330; --line:#2A3441; --line-strong:#3A4655;
    --text:#EEF2F7; --body:#D5DBE4; --muted:#A3ADBB; --faint:#6E7887;
    --accent:#5AA5FF; --accent-ink:#0F1620; --accent-soft:#17283D; --accent-deep:#8FC2FF; --mark:#5AA5FF;
    --ok:#5BCB8B; --ok-soft:#14301F; --warn:#F0B75B; --warn-soft:#3A2B10; --hold:#F09189; --hold-soft:#3B1A18; --info:#8FC2FF; --info-soft:#17283D;
    --shadow:0 12px 32px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root{
  --r:10px; --r-sm:8px;
  --brand-font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--accent); text-underline-offset:2px}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0}
h1{font-family:var(--brand-font); font-size:28px; line-height:1.15; font-weight:800; letter-spacing:-0.03em}
h2{font-size:18px; line-height:1.3; font-weight:700; letter-spacing:-0.01em}
h3,.label{font-size:11.5px; line-height:1.4; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
p{margin:0}
code{font-size:13px; background:var(--surface); padding:1px 5px; border-radius:4px}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13.5px} .tiny{font-size:13px} .num,.id,time{font-variant-numeric:tabular-nums}
.fine{font-size:13px; color:var(--muted); line-height:1.5}
.strong{font-weight:700}
.nowrap{white-space:nowrap}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100%}
.side{background:var(--panel); border-right:1px solid var(--line); padding:24px 16px calc(16px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:24px; position:sticky; top:0; height:100vh}
.brand{display:inline-flex; align-items:baseline; font-family:var(--brand-font); font-weight:800; font-size:22px; letter-spacing:-0.04em; text-decoration:none; color:var(--text); line-height:1; padding:0 8px}
.brand .u{position:relative; display:inline-block; color:var(--mark)} .brand .p{color:var(--mark)}
.brand .u svg{position:absolute; left:50%; top:-.3em; width:.62em; height:.37em; transform:translateX(-50%)}
.brand small{font-family:var(--font); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-left:10px}
.nav{display:flex; flex-direction:column; gap:2px}
.nav a{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--r-sm); color:var(--body); text-decoration:none; font-weight:600; font-size:14.5px}
.nav a svg{width:18px; height:18px; flex:none; color:var(--faint)}
.nav a:hover{background:var(--hover); color:var(--text)}
.nav a.on{background:var(--accent-soft); color:var(--accent-deep)} .nav a.on svg{color:var(--accent)}
.nav .sep{height:1px; background:var(--line); margin:8px 4px}
.nav .group{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:8px 12px 4px}
.side .who{margin-top:auto; font-size:13px; color:var(--muted); line-height:1.4; padding:16px 8px 0; border-top:1px solid var(--line)}
.side .who b{display:block; color:var(--text); font-size:14px}
.side .who form{margin-top:12px}
.main{min-width:0; padding:32px 40px 48px}
.topbar,.tabs{display:none}

.wrap{margin:0; max-width:1200px; display:flex; flex-direction:column; gap:24px}
.wrap.narrow{max-width:640px} .wrap.wide{max-width:1320px} .wrap.mid{max-width:880px}

/* page header row — same on every screen */
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; min-height:72px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.page-head > div{min-width:0} .page-head h1{overflow-wrap:anywhere}
.page-head .eyebrow{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:4px}
.page-head .meta{margin-top:6px; color:var(--muted); font-size:14px}
.page-head .act{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.back{font-size:13.5px; font-weight:600; text-decoration:none; color:var(--muted); display:inline-flex; gap:6px; align-items:center; margin-bottom:-12px}
.back:hover{color:var(--accent)}

/* ---------- controls ---------- */
[hidden]{display:none !important}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-sm); border:1px solid transparent; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14.5px; text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:hover{filter:brightness(.95)}
.btn.ghost{background:var(--panel); border-color:var(--line-strong); color:var(--text)}
.btn.ghost:hover{background:var(--hover); border-color:var(--accent); filter:none}
.btn.quiet{background:transparent; border-color:transparent; color:var(--muted)} .btn.quiet:hover{background:var(--hover); color:var(--text); filter:none}
.btn.sm{height:32px; padding:0 12px; font-size:13.5px}
.btn.hold{background:var(--hold); color:#fff}
.btn.block{width:100%}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
input,select,textarea{width:100%; min-height:40px; padding:9px 12px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--panel); color:var(--text); font:inherit; font-size:15px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=search]{max-width:420px}
textarea{min-height:88px; resize:vertical; line-height:1.5}
label.f{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--body)}
label.f .hint{font-weight:400; color:var(--muted); font-size:13px}
.row{display:flex; gap:16px; flex-wrap:wrap} .row > *{flex:1 1 200px; min-width:0}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.actions.end{justify-content:flex-end} .actions.between{justify-content:space-between}
.check{display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); font-weight:400; color:var(--body)}
.check input{width:18px; height:18px; min-height:0; margin-top:2px; flex:none; accent-color:var(--accent)}
.steps{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); font-weight:600}
.steps span{flex:1; height:4px; border-radius:2px; background:var(--line)} .steps span.on{background:var(--accent)}

/* ---------- cards ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; gap:16px; min-width:0}
.card.flush{padding:0; gap:0; overflow:hidden}
.card.flush > .card-head{padding:16px 24px; border-bottom:1px solid var(--line)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-head h2{font-size:16px}
.grid{display:grid; gap:24px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack{display:flex; flex-direction:column; gap:12px}
.divider{height:1px; background:var(--line)}

/* status chips — the only pills */
.chip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; background:var(--surface); color:var(--muted)}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.chip.requested{background:var(--info-soft); color:var(--info)} .chip.held{background:var(--hold-soft); color:var(--hold)}
.chip.delivered,.chip.signed,.chip.built,.chip.active,.chip.sent,.chip.done,.chip.verified{background:var(--ok-soft); color:var(--ok)}
.chip.consult,.chip.running,.chip.design{background:var(--accent-soft); color:var(--accent-deep)} .chip.proposal,.chip.design_proposal,.chip.pending,.chip.logged,.chip.confirm,.chip.measure{background:var(--warn-soft); color:var(--warn)}
.chip.city{background:var(--surface); color:var(--muted)} .chip.quiet{background:var(--hold-soft); color:var(--hold)} .chip.check{background:var(--warn-soft); color:var(--warn)} .chip.rest{background:var(--surface); color:var(--faint)}
.chip.declined,.chip.paused,.chip.queued{background:var(--surface); color:var(--muted)} .chip.failed{background:var(--hold-soft); color:var(--hold)}
.chip.plain::before{display:none}
.chip.archived{background:var(--surface); color:var(--faint); border:1px dashed var(--line-strong)}

/* My clients filters (phase 12): one row of chips with counts, a search box and a sort menu under it */
.listbar{display:flex; flex-direction:column; gap:10px; margin-top:-4px}
.filters{display:flex; gap:6px; flex-wrap:wrap}
.fchip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel); color:var(--text); font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap}
.fchip b{font-weight:700; font-size:12px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.fchip:hover{border-color:var(--accent); background:var(--hover)}
.fchip.zero{color:var(--muted); border-style:dashed}
.fchip.hot:not(.on) b{background:var(--ok-soft); color:var(--ok)}
.fchip.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .fchip.on b{background:rgba(255,255,255,.22); color:inherit}
.listtools{display:flex; gap:8px; align-items:center}
.listtools input[type=search]{flex:1 1 auto; max-width:420px; margin:0}
.sortsel select{height:40px; margin:0; min-width:150px}
.fhint,.nudge{margin-top:-4px}
.nudge a{font-weight:700; color:inherit}
.archive-card{border-style:dashed}

/* Resources (phase 12) */
.start{border-color:var(--accent); background:color-mix(in srgb, var(--accent-soft) 45%, var(--panel))}
.progress{height:6px; border-radius:3px; background:var(--line); overflow:hidden} .progress i{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .4s}
.checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.checks li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)} .checks li:last-child{border-bottom:0}
.checks li > div{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px} .checks b{font-size:14.5px} .checks li > div > span{font-size:13px; color:var(--muted); line-height:1.4}
.checks .tick{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); background:var(--panel); position:relative}
.checks li.done .tick{background:var(--ok); border-color:var(--ok)} .checks li.done .tick::after{content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.checks li.done b{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line-strong)}
.eps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
/* Oct. 8 text diet: one player + the nine episodes as a list (nine stacked players were eleven phone screens) */
.player{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; align-items:start}
.player video{width:100%; aspect-ratio:16/9; border-radius:var(--r-sm); background:#0b1220; display:block; object-fit:cover}
.pb-now b{display:flex; gap:6px; font-size:15px} .pb-now b .num{color:var(--accent-deep)}
.pb-now ul{margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--muted); line-height:1.45}
.pb-list{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
.pb-ep{width:100%; text-align:left; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:var(--r-sm); padding:9px 11px; font:inherit; font-size:13.5px; display:flex; gap:8px; align-items:baseline; cursor:pointer}
.pb-ep .num:first-child{color:var(--accent-deep); font-weight:700} .pb-ep .fine{margin-left:auto}
.pb-ep.on{border-color:var(--accent); background:var(--accent-soft)}
.jump{display:flex; gap:6px; flex-wrap:wrap; margin:-8px 0 4px}
.jump a{font-size:13px; font-weight:600; text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 11px; background:var(--panel)}
.jump a:hover{color:var(--accent-deep); border-color:var(--accent)}
details.trackfold>summary{font-size:15px; flex-wrap:wrap} details.trackfold>summary .nextline{flex:1 1 220px; min-width:0}
details.trackfold>summary .muted{font-weight:600; font-size:13px; color:var(--accent-deep); flex:none; margin-left:16px}   /* 2A: "the steps" reads as the control it is */
.ep{margin:0; display:flex; flex-direction:column; gap:10px; min-width:0}
.ep video{width:100%; aspect-ratio:16/9; border-radius:var(--r-sm); background:#0b1220; display:block; object-fit:cover}
.ep figcaption b{display:flex; align-items:baseline; gap:6px; font-size:14.5px; flex-wrap:wrap} .ep figcaption b .num:first-child{color:var(--accent-deep)}
.ep figcaption ul{margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--muted); line-height:1.45}
h3.sub{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.scripts{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
details.script{border-bottom:1px solid var(--line)} details.script:last-child{border-bottom:0}
details.script > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; font-weight:600; font-size:14.5px}
details.script > summary::-webkit-details-marker{display:none}
details.script > summary > span{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; text-align:left} details.script > summary small{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
details.script > summary::before{content:"›"; font-size:18px; color:var(--muted); order:-1; transition:transform .15s} details.script[open] > summary::before{transform:rotate(90deg)}
details.script[open] > summary{background:var(--surface)}
.script-body{padding:4px 16px 16px 44px; font-size:15px; line-height:1.6; color:var(--body)} .script-body p{margin:0 0 10px} .script-body p:last-child{margin:0}
.kv.links td:first-child{width:auto; color:var(--text)} .kv.links a{text-decoration:none; color:var(--text)} .kv.links a:hover{color:var(--accent)}
.learn{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.learn .post{display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--line); border-radius:var(--r-sm); text-decoration:none; color:var(--text); min-width:0}
.learn .post:hover{border-color:var(--accent); background:var(--hover)} .learn .post b{font-size:15px; line-height:1.35} .learn .more{color:var(--accent-deep); font-weight:700; font-size:13.5px; margin-top:auto}
@media (max-width:880px){ .eps{grid-template-columns:repeat(2,minmax(0,1fr))} .learn{grid-template-columns:1fr} .player{grid-template-columns:1fr} .pb-list{grid-template-columns:1fr} .jump{position:sticky; top:calc(57px + env(safe-area-inset-top,0px)); z-index:30; background:var(--bg); padding:8px 0; margin:-12px 0 0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch} .jump a{flex:none} }
@media (max-width:640px){
  .eps{grid-template-columns:1fr} .script-body{padding-left:16px}
  /* the link tables stack on phones: label, then the field or the buttons under it */
  .kv.links td, .kv.stack-sm td{display:block; width:100%; padding:0}
  .kv.links td:first-child, .kv.stack-sm td:first-child{width:100%; padding-top:12px; padding-right:0}
  .kv.links td:last-child, .kv.stack-sm td:last-child{padding:8px 0 12px; border-bottom:1px solid var(--line)}
  .kv.links tr:last-child td:last-child, .kv.stack-sm tr:last-child td:last-child{border-bottom:0}
  .kv.links td.r .actions{justify-content:flex-start}
}
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; margin-left:8px; vertical-align:1px}

/* key/value */
.kv{width:100%; border-collapse:collapse; font-size:14.5px}
.kv td{padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top}
.kv td:first-child{color:var(--muted); width:38%; padding-right:16px; font-size:14px}
.kv tr:last-child td{border-bottom:0}

/* stat tiles: the value carries the unit, the label is one short line */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.stat{display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); min-width:0}
.stat b{font-size:26px; line-height:1.15; font-weight:700; letter-spacing:-0.02em; color:var(--text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; min-width:0}   /* Oct. 14 (2A QA): a long email never widens the page on a phone */
.stat b small{font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0}
.stat span{font-size:13px; color:var(--muted); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.notice{padding:12px 16px; border-radius:var(--r-sm); font-size:14px; line-height:1.5; border:1px solid transparent}
.notice.hold{background:var(--hold-soft); color:var(--hold)} .notice.ok{background:var(--ok-soft); color:var(--ok)} .notice.info{background:var(--info-soft); color:var(--info)} .notice.warn{background:var(--warn-soft); color:var(--warn)}
.flash{position:fixed; left:50%; top:calc(16px + env(safe-area-inset-top,0px)); transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 16px; border-radius:var(--r-sm); font-size:14px; font-weight:600; box-shadow:var(--shadow); z-index:60; max-width:90vw}

/* ---------- tables (every list) ---------- */
.table{width:100%; border-collapse:collapse; font-size:14.5px}
.table th{text-align:left; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface); white-space:nowrap}
.table td{padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--hover)}
.table tr[data-href]{cursor:pointer}
.table .t{font-weight:600; color:var(--text)} .table a.t{text-decoration:none} .table a.t:hover{color:var(--accent)}
.table .s{font-size:13px; color:var(--muted); margin-top:2px}
.table .r,.table th.r{text-align:right}
.table .r .actions{justify-content:flex-end; flex-wrap:nowrap}
.table td.empty{color:var(--muted); text-align:center; padding:32px 16px}
.table .id{font-size:13.5px; color:var(--muted); white-space:nowrap}
.scroll{overflow-x:auto}

/* ---------- tracker ---------- */
/* Oct. 14 (2A, Victor §3): the homeowner's five steps; only the current step carries a sub-line. Under 560px the
   row becomes a list — five labels never fit a phone side by side without overlapping. */
.track{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; align-items:start}
.track.six{grid-template-columns:repeat(6,minmax(0,1fr))}
.track div{display:flex; flex-direction:column; gap:8px; font-size:13px; color:var(--faint); font-weight:600; min-width:0; overflow-wrap:anywhere}
.track div span{display:block; height:6px; border-radius:3px; background:var(--line)}
.track div.done{color:var(--muted)} .track div.done span{background:var(--accent)}
.track div.now{color:var(--accent-deep)} .track div.now span{background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.track div.hold{color:var(--hold)} .track div.hold span{background:var(--hold)}
.track small{display:block; font-weight:400; color:var(--faint); font-size:12.5px; margin-top:-4px}
@media (max-width:559px){
  .track,.track.six{display:flex; flex-direction:column; gap:0}
  .track div{display:grid; grid-template-columns:14px minmax(0,1fr); gap:0 12px; align-items:center; padding:7px 0; font-size:14px; position:relative}
  .track div span{width:14px; height:14px; border-radius:50%; background:var(--line); grid-row:1 / span 2}
  .track div.done span{background:var(--accent)} .track div.now span{box-shadow:0 0 0 4px var(--accent-soft)}
  .track div + div::before{content:""; position:absolute; left:6px; top:-8px; height:16px; width:2px; background:var(--line)}
  .track small{grid-column:2; margin-top:0; font-size:12.5px}
}
.table.clients .c-offer{display:block} .table.clients .show-sm{display:none}
.mini{display:flex; gap:3px; margin-top:6px} .mini span{width:14px; height:4px; border-radius:2px; background:var(--line)} .mini span.on{background:var(--accent)} .mini span.hold{background:var(--hold)}

/* ---------- client record ---------- */
.record{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px; align-items:start}
.record > *{display:flex; flex-direction:column; gap:24px; min-width:0}
.verdict{display:flex; flex-direction:column; gap:6px; padding:16px 20px; border-radius:var(--r-sm); border:1px solid var(--line); border-left:4px solid var(--accent)}
.verdict.v-likely{border-left-color:var(--ok)} .verdict.v-cond{border-left-color:var(--accent)} .verdict.v-constrained{border-left-color:var(--warn)} .verdict.v-unlikely{border-left-color:var(--hold)} .verdict.v-insufficient{border-left-color:var(--faint)}
.verdict b{font-size:18px; line-height:1.3}
.verdict p{font-size:14.5px; color:var(--body); line-height:1.55}
.clamp3{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.bands{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.bands div{padding:12px 16px; border-radius:var(--r-sm); border:1px solid var(--line); font-size:13.5px; display:flex; flex-direction:column; gap:2px; min-width:0}
.bands div b{font-size:15px; color:var(--text)}
.bands div .st{font-weight:700; margin-top:4px}
.bands div.fits{background:var(--ok-soft); border-color:transparent} .bands div.fits .st{color:var(--ok)}
.bands div.tight{background:var(--warn-soft); border-color:transparent} .bands div.tight .st{color:var(--warn)}
.bands div.no{background:var(--surface); border-color:transparent; color:var(--muted)} .bands div.no .st{color:var(--muted)}
.list-plain{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:14.5px}

.tl{display:flex; flex-direction:column}
.tl div{display:grid; grid-template-columns:16px minmax(0,1fr); gap:12px; padding:8px 0; font-size:14px; min-width:0}
.tl div::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--line-strong); margin-top:7px; margin-left:4px}
.tl div.hi::before{background:var(--accent)}
.tl small{display:block; color:var(--faint); font-size:12.5px; font-variant-numeric:tabular-nums}
.thread{display:flex; flex-direction:column; gap:12px}
.msg{max-width:88%; padding:10px 14px; border-radius:var(--r); font-size:14.5px; line-height:1.5; background:var(--surface); white-space:pre-wrap}
.msg.me{align-self:flex-end; background:var(--accent-soft)}
.msg.them{align-self:flex-start}
.msg small{display:block; font-size:12px; color:var(--faint); margin-top:4px; white-space:normal}
.compose{display:flex; gap:8px; align-items:flex-end; min-width:0} .compose textarea{flex:1 1 auto; min-width:0; min-height:44px}

/* staff move card */
.rev{border:1px solid var(--accent); border-radius:var(--r); padding:20px 24px; background:var(--accent-soft); display:flex; flex-direction:column; gap:12px; font-size:14px}
.rev > b{font-size:15px}
details.move{border-top:1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding-top:12px}
details.move > summary{cursor:pointer; font-weight:700; color:var(--accent-deep); list-style:none; display:flex; align-items:center; gap:8px}
details.move > summary::before{content:"›"; font-size:18px; line-height:1; transition:transform .15s}
details.move[open] > summary::before{transform:rotate(90deg)}
details.move > summary::-webkit-details-marker{display:none}
details.move[open] > summary{margin-bottom:12px}
details.move input,details.move select,details.move textarea{background:var(--panel)}

/* ---------- board (stage counts) ---------- */
.stagebar{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.stagebar a{display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:var(--r-sm); text-decoration:none; color:var(--muted); font-size:13px; font-weight:600; min-width:0}
.stagebar a b{font-size:26px; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1}
.stagebar a:hover,.stagebar a.on{border-color:var(--accent)} .stagebar a.on{background:var(--accent-soft); color:var(--accent-deep)}

/* ---------- theme picker ---------- */
.themes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.themes label{position:relative; display:flex; flex-direction:column; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; font-size:14px; font-weight:600}
.themes label:has(input:checked){border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.themes input{position:absolute; top:12px; left:12px; width:1px; height:1px; min-height:0; padding:0; opacity:0; pointer-events:none}
.themes label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.themes .pv{height:56px; border-radius:6px; border:1px solid var(--line); display:grid; grid-template-columns:28% 1fr; overflow:hidden}
.themes .pv i{display:block} .themes .pv i:last-child{padding:8px; display:flex; flex-direction:column; gap:5px}
.themes .pv em{display:block; height:6px; border-radius:3px}
.themes .pv.light{background:#fff} .themes .pv.light i:first-child{background:#fff; border-right:1px solid #E3E8EF} .themes .pv.light em{background:#E3E8EF} .themes .pv.light em:first-child{background:#0A6FE0; width:40%}
.themes .pv.dark{background:#0F1620; border-color:#2A3441} .themes .pv.dark i:first-child{background:#151D29; border-right:1px solid #2A3441} .themes .pv.dark em{background:#2A3441} .themes .pv.dark em:first-child{background:#5AA5FF; width:40%}
.themes .pv.system{background:linear-gradient(135deg,#fff 50%,#0F1620 50%)} .themes .pv.system i:first-child{background:transparent; border-right:1px solid #CDD5E0}
.themes .pv.system em{background:#8A93A1} .themes .pv.system em:first-child{background:#0A6FE0; width:40%}
.themes small{font-weight:400; color:var(--muted); font-size:13px; display:block}

/* ---------- sign-in ---------- */
.signin{min-height:100%; display:grid; place-items:center; padding:24px 16px; background:var(--surface)}
.signin .card{max-width:420px; width:100%; padding:32px; gap:20px; box-shadow:var(--shadow)}
.signin .brand{padding:0}
.signin h1{font-size:26px}
.code-input{font-size:22px; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums}

/* ---------- breakpoints ---------- */
@media (max-width:1099px){ .record{grid-template-columns:1fr} }
@media (max-width:1100px){ .stagebar{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:880px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .topbar{display:flex; position:sticky; top:0; z-index:40; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line); padding-top:calc(12px + env(safe-area-inset-top,0px))}
  .topbar .brand{padding:0}
  .topbar .av{width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; font-size:13px; text-decoration:none; position:relative; overflow:hidden}
  .topbar .av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .main{padding:20px 16px calc(96px + env(safe-area-inset-bottom,0px))}
  .tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--panel); border-top:1px solid var(--line); padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
  .tabs a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 2px; text-decoration:none; color:var(--muted); font-size:11.5px; font-weight:600}
  .tabs a svg{width:22px; height:22px; color:var(--faint)}
  .tabs a.on{color:var(--accent-deep)} .tabs a.on svg{color:var(--accent)}
  h1{font-size:24px}
  .wrap{gap:16px}
  .page-head{min-height:0; padding-bottom:12px}
  .page-head .act{width:100%} .page-head .act .btn{flex:1 1 auto}
  .back{margin-bottom:-8px}
  .card{padding:16px; gap:12px}
  .g2,.g3{grid-template-columns:1fr}
  .grid{gap:16px}
}
@media (max-width:640px){
  .bands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px}
  .stagebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat b{font-size:22px}
  .stat span{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .themes{grid-template-columns:1fr}
  .kv td:first-child{width:40%}
  input[type=search]{max-width:none}
  /* tables become stacked rows on phones — no sideways scroll */
  .table.stackable thead{display:none}
  .table.stackable, .table.stackable tbody, .table.stackable tr, .table.stackable td{display:block; width:100%}
  .table.stackable tr{padding:12px 16px; border-bottom:1px solid var(--line)}
  .table.stackable tr:last-child{border-bottom:0}
  .table.stackable td{padding:2px 0; border:0}
  .table.stackable td.r{text-align:left; margin-top:8px}
  .table.stackable td.r .actions{justify-content:flex-start}
  .table.stackable td[data-l]::before{content:attr(data-l) " · "; color:var(--faint); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
  .table.stackable td.hide-sm{display:none}
  /* My clients on a phone (Oct. 12): three lines — name · chip, the address · the goal, HU number · date — the dots under the chip */
  .table.clients tr{display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:1px; align-items:start; padding:12px 16px}
  .table.clients td{padding:0} .table.clients td.c-name{grid-column:1; grid-row:1} .table.clients td.c-stage{grid-column:2; grid-row:1 / span 3; justify-self:end; text-align:right}
  .table.clients td.c-stage .mini{justify-content:flex-end} .table.clients td.c-prop{grid-column:1; grid-row:2; margin-top:2px} .table.clients td.c-when{grid-column:1; grid-row:3; margin-top:2px; text-align:left}
  .table.clients .c-offer::before{content:" · "} .table.clients .c-offer{display:inline}
  .table.clients .hide-sm{display:none} .table.clients .show-sm{display:inline}
  .msg{max-width:100%}
  /* the filter chips become one swipeable row on phones (eight chips wrapped to five lines) */
  /* width:0 + min-width:100%: the row never widens the page (a scroll container still reports its content width) */
  .filters{flex-wrap:nowrap; overflow-x:auto; width:0; min-width:calc(100% + 32px); box-sizing:border-box; margin:0 -16px; padding:2px 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto}
  .listtools{flex-wrap:wrap} .listtools input[type=search]{flex:1 1 100%} .sortsel{flex:1 1 auto} .sortsel select{width:100%}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ---------- the report panel (A · in the app) — same blocks as the PDF ---------- */
.rp-verdict{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.rp-stamp{display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:var(--r-sm); background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:17px; letter-spacing:-0.01em}
.rp-stamp.v0{background:var(--ok); color:#fff} .rp-stamp.v2{background:var(--warn); color:#fff} .rp-stamp.v3{background:var(--hold); color:#fff} .rp-stamp.v4{background:var(--faint); color:#fff}
.rp-scale{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
.rp-scale div{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--faint); font-weight:600; line-height:1.25; min-width:0}
.rp-scale div span{display:block; height:6px; border-radius:3px; background:var(--line)}
.rp-scale div.past span{background:var(--accent); opacity:.35} .rp-scale div.now{color:var(--accent-deep)} .rp-scale div.now span{background:var(--accent)}
.rp-why{font-size:15px; line-height:1.55; color:var(--body)}
.rp-first{padding:12px 16px; border-radius:var(--r-sm); background:var(--accent-soft)}
.rp-first b{display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:4px}
.rp-first.sig{background:var(--warn-soft)} .rp-first.sig b{color:var(--warn)} .rp-first.hold{background:var(--hold-soft)} .rp-first.hold b{color:var(--hold)}
.rp-first p{font-size:14.5px; line-height:1.5; color:var(--text)}
.rp-goout{border-color:var(--warn)}
.rp-fig{margin:0; display:flex; flex-direction:column; gap:8px}
.rp-fig img{width:100%; height:auto; border-radius:var(--r-sm); border:1px solid var(--line); display:block}
.rp-schematic{border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:32px 24px; text-align:center; color:var(--muted); font-size:14px}
.rp-rules{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.rp-rule{display:flex; flex-direction:column; gap:2px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-sm); min-width:0}
.rp-rule .k{font-size:13px; color:var(--muted); font-weight:600}
.rp-rule .v{font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rp-rule .d{font-size:13px; color:var(--muted); line-height:1.4}
.rp-rule.open .v{color:var(--warn)} .rp-rule.floor .v{color:var(--hold)} .rp-rule.no .v{color:var(--muted)}
.rp-cite{font-size:11.5px; font-weight:600; color:var(--muted); background:var(--surface); border-radius:4px; padding:1px 6px}
.rp-dots{display:flex; flex-direction:column}
.rp-dots > div{display:grid; grid-template-columns:10px 140px minmax(0,1fr) auto; gap:8px 12px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px}
.rp-dots > div:last-child{border-bottom:0}
.rp-dots > div::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); align-self:start; margin-top:6px}
.rp-dots > div.sig::before{background:var(--hold)} .rp-dots > div.open::before{background:var(--warn)}
.rp-dots .k{font-weight:700; color:var(--text)} .rp-dots > div.sig .k{color:var(--hold)}
.rp-dots .src{font-size:12px; color:var(--faint); text-align:right}
.rp-bands{display:flex; flex-direction:column; gap:12px}
.rp-band{display:grid; grid-template-columns:150px minmax(0,1fr) 110px; gap:12px; align-items:center}
.rp-band .n b{display:block; font-size:14.5px; color:var(--text)} .rp-band .n span{font-size:13px; color:var(--muted)}
.rp-band .tr{position:relative; height:20px; background:var(--surface); border-radius:6px; overflow:hidden}
.rp-band .tr i{position:absolute; top:4px; bottom:4px; border-radius:4px; background:var(--accent)}
.rp-band .tr i.over{background:var(--warn); opacity:.55}
.rp-band .tr em{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--hold)}
.rp-band .chip{justify-self:end}
.rp-range{display:flex; flex-direction:column; gap:10px}
.rp-range .bar{position:relative; height:12px; border-radius:6px; background:var(--surface)}
.rp-range .bar i{position:absolute; top:0; bottom:0; border-radius:6px; background:var(--accent); opacity:.8}
.rp-range .bar em{position:absolute; top:-5px; width:4px; height:22px; border-radius:2px; background:var(--text); margin-left:-2px}
.rp-range .lbl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.rp-range .lbl div:nth-child(2){text-align:center} .rp-range .lbl div:nth-child(3){text-align:right}
.rp-range .lbl b{display:block; font-size:20px; color:var(--text)} .rp-range .lbl div:nth-child(2) b{color:var(--accent-deep)}
.rp-range .lbl span{font-size:13px; color:var(--muted)}
.rp-open td.who{text-align:right; white-space:nowrap; color:var(--accent-deep); font-weight:700; font-size:13px; width:auto}
.rp-open td:first-child{width:auto; color:var(--text)}
@media (max-width:640px){
  .rp-rules{grid-template-columns:1fr}
  .rp-scale div{font-size:11px}
  .rp-dots > div{grid-template-columns:10px minmax(0,1fr)} .rp-dots .k{grid-column:2} .rp-dots > div > span:nth-child(2){grid-column:2} .rp-dots .src{grid-column:2; text-align:left}
  .rp-band{grid-template-columns:minmax(0,1fr) auto} .rp-band .tr{grid-column:1 / -1; grid-row:2}
}
.rp .stats{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Inside the store app: the web-only install note is meaningless (v5 §B7). */
.in-app [data-web-only]{display:none!important}

.who .help{display:block; font-size:12px; color:var(--muted); margin:6px 0 8px}
.who .help a{color:var(--accent, #0A6FE0); font-weight:600; text-decoration:none; white-space:nowrap}

/* In-app PDF viewer (/pdf-view) — Android's WebView can't show PDFs itself */
.pdfv{display:flex; flex-direction:column; gap:12px}
.pdfv-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0}
.pdfv-title{flex:1; min-width:140px; font-weight:700; font-size:14px}
.pdfv-pages{display:flex; flex-direction:column; align-items:center; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.pdfv-pages.zoomed{align-items:flex-start}
.pdfv-pages canvas{background:#fff; border-radius:8px; box-shadow:var(--shadow); flex:none}
.pdfv-pages:not(.zoomed) canvas{max-width:100%}

/* --- My account: profile photo (phase 9) --- */
.profile{display:flex; gap:18px; align-items:flex-start; margin-bottom:14px}
.profile .photo{flex:none; width:88px; height:88px; border-radius:50%; overflow:hidden; border:1px solid var(--line); background:var(--panel); display:grid; place-items:center}
.profile .photo img{width:100%; height:100%; object-fit:cover; display:block}
.profile .photo .ph{font-size:32px; font-weight:700; color:var(--muted)}
.profile label.btn{cursor:pointer}
.profile label.btn:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.subcard{margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel)}
.subcard .actions{margin-top:8px}

/* --- "It's in the queue" — the thank-you moment after a request (phase 10) --- */
.done-hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:8px 0 18px}
.done-hero svg{max-width:100%; height:auto; overflow:visible}
.done-hero svg *{fill:none; stroke:var(--text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.done-hero .d-ground{stroke:var(--line-strong)}
.done-hero .d-fence{stroke:var(--line-strong); stroke-width:2}
.done-hero .d-house path,.done-hero .d-house rect{stroke-dasharray:420; stroke-dashoffset:420; animation:d-draw .9s cubic-bezier(.4,0,.2,1) forwards}
.done-hero .d-house rect{animation-delay:.4s}
.done-hero .d-fence{opacity:0; animation:d-fade .4s ease .7s forwards}
.done-hero .d-dadu{stroke:var(--accent); stroke-width:2.6; transform:translateY(24px) scale(.6); transform-origin:270px 128px; opacity:0; animation:d-pop .7s cubic-bezier(.34,1.56,.64,1) 1s forwards}
.done-hero .d-dadu rect{fill:var(--accent-soft)}
.done-hero .d-mark path{fill:var(--mark); stroke:none; transform:translateY(34px); opacity:0; animation:d-lift .8s cubic-bezier(.2,.8,.2,1) 1.5s forwards}
.done-hero .d-spark circle{fill:var(--accent); stroke:none; opacity:0; transform-origin:center; animation:d-spark 1.1s ease-out 1.3s forwards}
.done-hero .d-spark circle:nth-child(2){animation-delay:1.45s} .done-hero .d-spark circle:nth-child(3){animation-delay:1.6s}
.done-words{opacity:0; transform:translateY(8px); animation:d-words .6s ease 1.2s forwards}
.done-words h1{font-size:26px; line-height:1.15; margin-top:4px}
.done-words .meta{margin-top:6px}
.done-card{opacity:0; transform:translateY(8px); animation:d-words .5s ease 1.7s forwards}
@keyframes d-draw{to{stroke-dashoffset:0}}
@keyframes d-fade{to{opacity:1}}
@keyframes d-pop{0%{opacity:0; transform:translateY(24px) scale(.6)} 60%{opacity:1} 100%{opacity:1; transform:translateY(0) scale(1)}}
@keyframes d-lift{0%{opacity:0; transform:translateY(34px) scale(.7)} 40%{opacity:1} 100%{opacity:1; transform:translateY(0) scale(1)}}
@keyframes d-spark{0%{opacity:0; transform:scale(.2)} 30%{opacity:1} 100%{opacity:0; transform:translateY(-18px) scale(1.2)}}
@keyframes d-words{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .done-hero .d-house path,.done-hero .d-house rect,.done-hero .d-fence,.done-hero .d-dadu,.done-hero .d-mark path,.done-words,.done-card{animation:none; opacity:1; transform:none; stroke-dashoffset:0}
  .done-hero .d-spark{display:none}
}
/* --- Admin → Team --- */
.person{display:flex; gap:10px; align-items:center}
.mini-photo{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line); background:var(--panel)}
.mini-photo.ph{display:grid; place-items:center; font-weight:700; color:var(--muted); font-size:14px}

/* ---- phase 14: the PDF in the app, folded sections, sign out ---- */
.pdfcard .pdf-inline{display:flex; flex-direction:column; gap:12px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px; min-height:120px; justify-content:center}
.pdfcard .pdf-inline canvas{max-width:100%; height:auto !important; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(15,22,32,.08); background:#fff}
.pdfcard .pdf-more{font-size:13px; font-weight:600; color:var(--accent-deep); text-decoration:none; padding:4px 0}
.pdfcard .pdf-actions{margin-top:12px}
details.rp-details{padding:0}
details.rp-details>summary{cursor:pointer; font-weight:700; font-size:14px; padding:16px 18px; list-style:none; display:flex; align-items:center; gap:8px}
details.rp-details>summary::before{content:""; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(-45deg); transition:transform .15s; flex:none}
details.rp-details[open]>summary::before{transform:rotate(45deg)}
details.rp-details>summary::-webkit-details-marker{display:none}
details.rp-details[open]>summary{border-bottom:1px solid var(--line)}
details.rp-details[open]>.card{box-shadow:none; border:0; border-bottom:1px solid var(--line); border-radius:0}
details.rp-details[open]>.card:last-child{border-bottom:0}
.signedin{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.signedin .fine{margin:0}
.cropper{position:fixed; inset:0; z-index:60; background:rgba(15,22,32,.55); display:grid; place-items:center; padding:16px}
.cropper[hidden]{display:none}
.cropper-box{background:var(--panel); border-radius:16px; padding:20px; width:min(100%, 360px); box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cropper-box h2{margin:0 0 4px; font-size:17px}
.cropper-stage{display:grid; place-items:center; margin:12px 0}
.cropper-stage canvas{border-radius:12px; background:#111; touch-action:none; cursor:grab; max-width:100%}
.cropper-stage canvas:active{cursor:grabbing}
.cropper-zoom{display:block; margin:0 0 12px}
.cropper-zoom input{width:100%}
body.cropper-open{overflow:hidden}

/* ---------- v11 §A: Today, the course, the QR card (the portal mockups' look) ---------- */
.td{gap:16px}
.td-greet{display:flex; flex-direction:column; gap:2px} .td-date{font-size:13px; color:var(--muted); font-weight:600} .td-greet h1{font-size:26px}
.dark-card{background:#0F1620; color:#fff; border-radius:24px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden}
.dark-card::before{content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background:#FFB224; opacity:.18}
.dark-card.signed::before{background:#5BCB8B; opacity:.25} .dark-card.quiet::before{background:#0A6FE0; opacity:.35}
.dark-card .kicker{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#FFB224}
.dark-card h2{font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; margin:0; position:relative; color:#fff}
.dark-card p{margin:0; font-size:14px; color:rgba(255,255,255,.78); line-height:1.45; position:relative}
.dark-actions{display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; position:relative}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 18px; border-radius:999px; font-weight:700; font-size:14.5px; text-decoration:none; border:0; font-family:inherit; cursor:pointer}
.pill.solid{background:#fff; color:#0F1620; flex:1} .pill.soft{background:rgba(255,255,255,.14); color:#fff}
.quick{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.quick > *{display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 6px; background:var(--panel); border:1px solid var(--line); border-radius:18px; text-decoration:none; color:var(--text); font:inherit; font-size:11.5px; font-weight:700; text-align:center; line-height:1.15; cursor:pointer}
.quick .qi{width:42px; height:42px; border-radius:14px; background:var(--accent-soft); color:var(--accent-deep); display:flex; align-items:center; justify-content:center} .quick .qi.primary{background:var(--accent); color:var(--accent-ink)} .quick .qi svg{width:20px; height:20px}
.ring{--p:0; position:relative; width:56px; height:56px; flex:none; border-radius:50%; background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); display:flex; align-items:center; justify-content:center}
.ring::before{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--panel)} .ring b{position:relative; font-size:13px; font-weight:800} .ring.lg{width:64px; height:64px}
.td-course{display:flex; align-items:center; gap:14px; padding:14px 16px; text-decoration:none; color:var(--text); border-radius:20px; flex-direction:row}
.td-course .t{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0} .td-course .t b{font-size:15.5px} .td-course .eyebrow{color:var(--accent-deep)}
.td-course .play{width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; flex:none}
.td-head{display:flex; align-items:baseline; justify-content:space-between; padding:2px 4px 0} .td-head h2{font-size:17px; font-weight:800; letter-spacing:-0.02em} .td-head a{font-size:13px; font-weight:700; text-decoration:none}
.td-clients{display:flex; flex-direction:column; gap:8px}
.td-client{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:12px 14px; text-decoration:none; color:var(--text)}
.td-client .av{width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:none}
.td-client .av.delivered,.td-client .av.design_proposal{background:var(--warn-soft); color:var(--warn)} .td-client .av.signed,.td-client .av.built,.td-client .av.proposal{background:var(--ok-soft); color:var(--ok)}
.td-client .t{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0} .td-client .t b{font-size:15px; overflow-wrap:anywhere}
.pb-list.lessons .pb-ep{position:relative; padding-right:30px} .pb-ep .tick{position:absolute; right:10px; top:9px; color:var(--ok); font-weight:800; display:none} .pb-ep.done .tick{display:inline} .pb-ep.done{border-color:var(--ok-soft); background:var(--ok-soft)}
.doc-row{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); text-decoration:none; color:var(--text); background:var(--panel)} .doc-row:hover{border-color:var(--accent)}
.doc .prose h1{font-size:22px; margin:0 0 12px} .doc .prose h2{font-size:16px; margin:20px 0 8px} .doc .prose h3{font-size:14.5px; margin:16px 0 6px} .doc .prose p{margin:0 0 10px; font-size:14.5px; line-height:1.6} .doc .prose ul{margin:0 0 10px 18px; font-size:14.5px; line-height:1.6}
fieldset.q{border:1px solid var(--line); padding:16px; margin:0} fieldset.q legend{padding:0 6px; font-size:14.5px} .card.ok-line{border-left:4px solid var(--ok)} .card.warn-line{border-left:4px solid var(--warn)}
.badge-card{flex-direction:row; align-items:center; gap:14px} .badge-card > div{flex:1; display:flex; flex-direction:column; gap:2px} .badge-mark{width:44px; height:44px; border-radius:50%; background:var(--ok-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; flex:none}
.qr-card{align-items:center; text-align:center; gap:14px; padding:28px 24px} .qr-top{display:flex; align-items:center; gap:12px; text-align:left} .qr-top img{width:56px; height:56px; border-radius:50%; object-fit:cover} .qr-top > div{display:flex; flex-direction:column; gap:1px}
.qr-code svg{width:min(260px, 70vw); height:auto; display:block} .qr-line{display:flex; flex-direction:column; gap:4px} .qr-line b{font-size:18px; letter-spacing:-0.02em} .qr-line span{font-size:13.5px; color:var(--muted)} .qr-link{font-size:13px; color:var(--accent-deep); font-weight:700}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:90}
@media (max-width:640px){ .quick{grid-template-columns:repeat(4,minmax(0,1fr))} .pb-list.lessons{grid-template-columns:1fr} .dark-card{border-radius:22px} }

.finding-card{margin-bottom:0} .finding-card::before{background:#0A6FE0; opacity:.4} .finding-card .kicker{color:#FFB224}
.tiles{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px}
.tile{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:18px; background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--text); min-width:0}
.tile b{font-size:26px; font-weight:800; letter-spacing:-0.03em; line-height:1.1} .tile span{font-size:12.5px; font-weight:700; color:var(--muted); line-height:1.25}
.tile.warn{background:var(--warn-soft); border-color:transparent} .tile.warn b{color:var(--warn)} .tile.info{background:var(--accent-soft); border-color:transparent} .tile.info b{color:var(--accent-deep)}
@media (max-width:880px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:480px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* v9 §2: the homeowner's photos — a strip of square thumbnails, one tap opens the picture over the page */
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.photo{display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--surface); border:1px solid var(--line)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lightbox{position:fixed; inset:0; z-index:60; background:rgba(8,12,18,.97); color:#fff; display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom))}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{position:absolute; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.22); color:#fff; font-size:24px; font-weight:600; line-height:44px; text-align:center; cursor:pointer}
.lightbox .lb-close{top:max(12px, env(safe-area-inset-top)); right:12px} .lightbox .lb-prev{left:8px; top:50%; transform:translateY(-50%)} .lightbox .lb-next{right:8px; top:50%; transform:translateY(-50%)}
.lightbox .lb-count{position:absolute; bottom:max(14px, env(safe-area-inset-bottom)); left:0; right:0; text-align:center; color:#fff; font-size:13px; font-weight:700; opacity:.8}
.chip.photos-badge{gap:4px} .chip.photos-badge svg{width:13px; height:13px}

/* ---------- Oct. 12: the admin layout — the Queue as a to-do list, the sidebar in groups, Board as a view of Clients ---------- */
.show-sm{display:none}
.q-sec .card-head h2 .count{display:inline-block; min-width:22px; padding:0 7px; margin-left:4px; border-radius:999px; background:var(--accent-soft); color:var(--accent-deep); font-size:12.5px; line-height:22px; text-align:center; font-variant-numeric:tabular-nums; vertical-align:2px}
.q-sec#review .card-head h2 .count,.q-sec#stuck .card-head h2 .count{background:var(--warn-soft); color:var(--warn)}
.q-note{max-width:320px; color:var(--text)}
.q-empty{align-items:flex-start; gap:4px} .q-empty .t{font-weight:700; font-size:16px; margin:0} .q-empty p{margin:0; max-width:560px}
.q-quiet{display:flex; flex-wrap:wrap; gap:6px 22px; padding:2px 4px; font-size:13.5px; color:var(--muted)}
.q-quiet a{color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px} .q-quiet a:hover{color:var(--text)}
.q-quiet a b{color:var(--text); font-variant-numeric:tabular-nums; font-size:15px}
details.q-recent>summary{font-size:15px} details.q-recent>summary .muted{font-weight:500}
/* the list page's "List · By stage" toggle (Board is a view of Clients, not a page of its own in the nav) */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--panel); gap:2px}
.seg a{padding:6px 14px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap}
.seg a.on{background:var(--accent-soft); color:var(--accent-deep)}
/* the phone's "More" sheet: the rest of the admin, one tap from the tab bar */
.more{display:none}
@media (max-width:880px){
  .table.stackable .show-sm{display:inline}
  .q-note{max-width:none}
  .q-quiet{flex-direction:column; gap:8px; padding:4px 2px}
  .more[open]{display:block; position:fixed; inset:0; z-index:50; background:rgba(15,22,32,.45)}
  .more .sheet{position:absolute; left:0; right:0; bottom:0; background:var(--panel); border-radius:20px 20px 0 0; padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px)); max-height:80vh; overflow:auto; box-shadow:var(--shadow)}
  .more .sheet .grab{width:36px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 10px}
  .more .sheet .sep{height:1px; background:var(--line); margin:8px 12px}
  .more .sheet .group{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700; padding:10px 12px 4px}
  .more .sheet a{display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-sm); color:var(--text); text-decoration:none; font-weight:600; font-size:15px}
  .more .sheet a svg{width:20px; height:20px; color:var(--faint); flex:none} .more .sheet a.on{background:var(--accent-soft); color:var(--accent-deep)}
}
/* a folded add-form on a list page: the page is the list; "Add …" opens the form (the head button or the #hash) */
details.fold>.fold-body{padding:14px 18px 18px}
details.fold>summary .muted{font-weight:500}
@media (max-width:880px){ .q-sec .card-head .fine{display:none} }
/* Oct. 12: the one sentence at the top of a record — what happens next and who does it */
.nextline{margin:-8px 0 0; font-size:15.5px; font-weight:600; color:var(--text); line-height:1.45}
.nextline::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin:0 10px 2px 0}
.feeline{margin:2px 0 0 18px} .feeline b{color:var(--text)} .feeline a{color:inherit}
details.feefold{margin:2px 0 0 18px} details.feefold>summary{cursor:pointer; list-style:none} details.feefold>summary::-webkit-details-marker{display:none}
details.feefold>summary b{color:var(--text)} details.feefold>summary .link{color:var(--accent-deep); font-weight:600} details.feefold .feeline{margin:8px 0 0}
details.trackfold>summary .nextline{font-weight:600}
/* the builder's lead: the four updates as a row of pills under the one form */
/* Oct. 14 (2B): Next actions — one line per client, Done / Snooze / Flag; the follow-up card on the record */
.na .na-list{display:flex; flex-direction:column}
.na{gap:12px} .na .card-head{margin-bottom:-2px}
.na-row{display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid var(--line)} .na-row:first-child{border-top:0; padding-top:0} .na-row:last-child{padding-bottom:0} .na-row.single{padding:0; border:0}
.na-who{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .na-name{font-weight:700; color:var(--text); text-decoration:none; font-size:15px}
.na-text{font-size:14px; line-height:1.45; color:var(--body); max-width:62ch}
.na-act{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start}
.na-act details{display:contents} .na-act details>summary{list-style:none; cursor:pointer} .na-act details>summary::-webkit-details-marker{display:none}
.na-form{flex:1 1 100%; display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:var(--r-sm); background:var(--surface); order:9}
.na-form.row-form{flex-direction:row; flex-wrap:wrap; align-items:center}
.na-outcomes{display:flex; gap:8px; flex-wrap:wrap}
.fu .fu-flags{display:flex; flex-direction:column; gap:8px} .fu-resolve{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px} .fu-resolve select,.fu-resolve input{flex:1 1 160px; min-height:36px; padding:6px 10px; width:auto}
.fu-types{display:flex; flex-direction:column; gap:6px} .fu-flag>summary{list-style:none; cursor:pointer; display:inline-flex} .fu-flag>summary::-webkit-details-marker{display:none}
.q-sec .fu-resolve{justify-content:flex-end} .q-sec .fu-resolve select,.q-sec .fu-resolve input{flex:0 1 180px}

/* Oct. 14 (2A, Victor §2): the builder's lead — the stage rail on top, one next update, milestone chips */
.rail{display:flex; flex-wrap:wrap; gap:6px 8px; font-size:12.5px; color:var(--muted)}
.rail span{padding:4px 10px; border-radius:999px; border:1px solid var(--line); display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; max-width:100%; min-width:0}
.rail span.done{background:var(--ok-soft); border-color:transparent; color:var(--text)}
.rail span.done::before{content:"✓"; font-size:11px; color:var(--ok); font-weight:700}
.rail span.next{border-color:var(--accent); color:var(--accent-deep); font-weight:600}
.rail span.skipped{border-style:dashed; color:var(--faint)}
.picks{display:flex; flex-wrap:wrap; gap:8px}
.picks label{position:relative; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel); color:var(--text); font-size:14px; font-weight:600; cursor:pointer; user-select:none}
.picks label i{width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:inline-block; flex:none} .picks label.imp i{background:#FFB224}
.picks label.was{color:var(--muted); background:var(--surface); border-color:transparent} .picks label.was::after{content:"✓"; font-size:11px; color:var(--ok); font-weight:700}
.picks label:has(input:checked){background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .picks label:has(input:checked) i{background:var(--accent-ink)} .picks label:has(input:checked)::after{color:var(--accent-ink)}
.picks label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.picks input{position:absolute; opacity:0; width:1px; height:1px; min-height:0; pointer-events:none}
.ms-form{display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--r-sm); background:var(--surface)}
.ms-form .tells{font-size:13px; font-weight:600; color:var(--warn); display:flex; gap:8px; align-items:center} .ms-form .tells i{width:8px; height:8px; border-radius:50%; background:#FFB224; flex:none}
.ms-form .two{display:grid; grid-template-columns:1fr 1fr; gap:8px} @media (max-width:420px){.ms-form .two{grid-template-columns:1fr}}
.ms-form label.f{font-size:12.5px; color:var(--muted)}
.ms-list{display:flex; flex-direction:column}
.ms-list > div{display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:0 10px; padding:6px 0; font-size:13.5px; align-items:start; min-width:0}
.ms-list > div > span:first-of-type{min-width:0; overflow-wrap:anywhere}
.ms-list > div::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--line-strong); margin-top:7px; margin-left:4px}
.ms-list > div.hi::before{background:var(--accent)} .ms-list > div.imp::before{background:#FFB224}
.ms-list small{color:var(--faint); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; margin-top:1px}
.ms-list .f{display:block; font-size:12.5px; color:var(--accent-deep); font-weight:600; text-decoration:none}
.ms-list details{grid-column:2 / -1; min-width:0} .ms-list details summary{list-style:none; cursor:pointer; font-size:12px; color:var(--faint); display:inline} .ms-list details summary::-webkit-details-marker{display:none}
.ms-list details form{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px} .ms-list details form input{max-width:170px; min-height:34px; padding:4px 8px}
.ms-list .was{display:block; font-size:12px; color:var(--faint)}
details.alt{border-top:1px solid var(--line); padding-top:10px} details.alt > summary{cursor:pointer; list-style:none; font-size:13.5px; font-weight:600; color:var(--accent-deep)} details.alt > summary::-webkit-details-marker{display:none}
.updates-done{display:flex; flex-wrap:wrap; gap:6px 8px; font-size:12.5px; color:var(--muted)}
.updates-done span{padding:4px 10px; border-radius:999px; border:1px solid var(--line)}
.updates-done span.done{background:var(--ok-soft, var(--accent-soft)); border-color:transparent; color:var(--text)}
.updates-done span.next{border-color:var(--accent); color:var(--accent-deep)}
.updates-done span.skipped{border-style:dashed; color:var(--muted)}
.table.leads tr.owed td.r .btn{white-space:nowrap}
/* P1 (Oct. 12): the staff record grouped by job — Overview · Report · Builder · People · Activity; the same cards, shown per tab */
.rectabs{display:flex; gap:4px; border-bottom:1px solid var(--line); padding-bottom:0; overflow-x:auto; scrollbar-width:none}
.rectabs::-webkit-scrollbar{display:none}
.rectabs a{flex:none; padding:10px 14px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.rectabs a.on{color:var(--accent-deep); border-bottom-color:var(--accent)}
.rectabs a .badge{display:inline-block; min-width:18px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; line-height:18px; text-align:center; margin-left:2px}
.record.tabbed [data-tab]{display:none}
.record.tabbed[data-show="overview"] [data-tab~="overview"], .record.tabbed[data-show="report"] [data-tab~="report"], .record.tabbed[data-show="builder"] [data-tab~="builder"], .record.tabbed[data-show="people"] [data-tab~="people"], .record.tabbed[data-show="activity"] [data-tab~="activity"]{display:flex}
.record.tabbed .rev[data-tab]{display:none} .record.tabbed[data-show="overview"] .rev[data-tab~="overview"]{display:flex; flex-direction:column}
.record.tabbed details[data-tab]{display:none} .record.tabbed[data-show="report"] details[data-tab~="report"]{display:block}
.record.tabbed > div:empty{display:none}
/* P1.3 preview: the builder's response card */
.card.respond{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.respond-sum{font-size:14.5px}
.respond-row{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start}
.respond-row > form{margin:0}
details.respond-more summary{list-style:none; cursor:pointer; display:inline-flex} details.respond-more summary::-webkit-details-marker{display:none}
details.respond-more[open]{flex-basis:100%}

/* P1 §3.A (Oct. 12): the staff record's action panel */
.panel{flex-direction:row; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap}
.panel.late{border-color:var(--hold, #B23E35)} .panel.check{border-color:var(--warn)}
.panel .p-forms{display:flex; flex-direction:column; gap:8px; flex:1 1 100%; border-top:1px solid var(--line); padding-top:12px; margin-top:4px}
.panel .p-forms form{display:flex; gap:8px; flex-wrap:wrap; align-items:center} .panel .p-forms input{flex:1 1 220px; min-height:36px; padding:6px 10px}
.panel .p-forms select{width:auto; min-height:36px; padding:6px 10px}
.panel .p-main{display:flex; flex-direction:column; gap:6px; flex:1 1 360px; min-width:0}
.panel .p-wait{font-size:13.5px; color:var(--muted)} .panel .p-wait b{color:var(--text)} .panel .p-wait b.late{color:var(--hold, #B23E35)}
.panel .p-do{font-size:13.5px; color:var(--text)} .panel .p-do b{color:var(--muted); font-weight:600}
.panel .p-act{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto}
.panel .p-steps summary{cursor:pointer; list-style:none; font-size:12.5px; font-weight:600; color:var(--muted)}
.panel .p-steps summary::-webkit-details-marker{display:none}
.panel .p-steps[open]{flex-basis:100%; width:100%}
.panel .p-steps .track{margin-top:10px; min-width:min(640px, 90vw)}
@media (max-width:720px){.panel .p-act{align-items:flex-start; width:100%}}
/* two-tap confirmation on a consequential button */
button[data-armed]{background:var(--hold, #B23E35) !important; color:#fff !important}

/* P1 §6: the hold for staff — each reason with the step that clears it; the one-question form */
.notice .holdrow{display:flex; flex-direction:column; gap:2px; padding:6px 0; border-top:1px solid rgba(0,0,0,.08)} .notice .holdrow:first-of-type{border-top:0; padding-top:2px}
.notice .holdrow em{font-style:normal; font-weight:600}
form.ask input{flex:1 1 260px; min-width:0}
.late{color:var(--hold)} .warn{color:var(--warn)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px 16px}
ul.crit{margin:6px 0 0; padding-left:18px; font-size:13px; line-height:1.45} ul.crit li{margin:2px 0}

/* Oct. 14 (2C): the Realtor's standing line on the record; the staff attribution facts */
.refline{margin:-4px 0 10px; padding:0 4px}
.attr-facts{margin:6px 0 8px 16px; padding:0}
.attr-facts li{margin:2px 0}
.attr-facts .warn-text{color:#8A4B00}