:root{
  --ground:#F3F4F6; --surface:#FFFFFF; --surface2:#EBEEF2; --ink:#1B2430; --ink2:#5B6572; --ink3:#8A93A0;
  --line:#D8DCE3; --line2:#C4CAD3; --accent:#D9512C; --accent-ink:#FFFFFF; --accent-soft:#FBE9E3;
  --data:#2F5FA8; --data-soft:#E4ECF8; --ok:#2E7D4F; --ok-soft:#E1F1E7; --warn:#B7791F; --warn-soft:#F8EFDC; --crit:#B3261E; --crit-soft:#F7E1DF;
  --shadow:0 1px 2px rgba(27,36,48,.06),0 4px 14px rgba(27,36,48,.06);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#151C25; --surface:#1E2732; --surface2:#27313E; --ink:#EDF1F6; --ink2:#B3BCC8; --ink3:#7E8896;
  --line:#333E4C; --line2:#44505F; --accent:#F0684A; --accent-ink:#14100E; --accent-soft:#3A241C;
  --data:#7FA6E6; --data-soft:#1E2B40; --ok:#6CC28F; --ok-soft:#173224; --warn:#E0B356; --warn-soft:#3A2E14; --crit:#F08A83; --crit-soft:#3E1B19;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); color-scheme:dark; }}
:root[data-theme="dark"]{
  --ground:#151C25; --surface:#1E2732; --surface2:#27313E; --ink:#EDF1F6; --ink2:#B3BCC8; --ink3:#7E8896;
  --line:#333E4C; --line2:#44505F; --accent:#F0684A; --accent-ink:#14100E; --accent-soft:#3A241C;
  --data:#7FA6E6; --data-soft:#1E2B40; --ok:#6CC28F; --ok-soft:#173224; --warn:#E0B356; --warn-soft:#3A2E14; --crit:#F08A83; --crit-soft:#3E1B19;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); color-scheme:dark; }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;line-height:1.1;text-wrap:balance;letter-spacing:.01em}
h1{font-size:30px}h2{font-size:24px}h3{font-size:19px}h4{font-size:16px}
a{color:var(--data)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{text-align:right}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink2)}
.muted{color:var(--ink2)}.small{font-size:13px}.tiny{font-size:12px}
:focus-visible{outline:2px solid var(--data);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* shell */
#app{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}
header.top{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
.brand .mark{width:28px;height:28px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:18px;font-weight:700}
.brand small{font-family:var(--body);font-weight:500;font-size:11px;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase;margin-left:4px}
.spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--surface2)}
.seg button{border:0;background:transparent;padding:6px 12px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.seg button.on{background:var(--ink);color:var(--ground)}
.sync{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--ink3);display:inline-block}
.sync.ok i{background:var(--ok)}.sync.local i{background:var(--warn)}

main{width:100%;max-width:1180px;margin:0 auto;padding:18px 16px 90px}
@media (min-width:900px){main{padding-bottom:40px}}

/* buttons & inputs */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:500;font-size:14px;line-height:1.2;white-space:nowrap}
.btn:hover{border-color:var(--ink3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--data)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--crit);border-color:var(--crit)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:12px;font-weight:500;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;font-family:var(--display)}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],input[type=tel],input[type=password],input[type=url],input[type=search],select,textarea{width:100%;border:1px solid var(--line2);background:var(--surface);border-radius:7px;padding:8px 10px;font-size:14px;min-height:38px}
textarea{min-height:90px;resize:vertical;line-height:1.45}
input[type=number]{font-family:var(--mono);text-align:right}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.g2,.g3,.g4{grid-template-columns:1fr}.g2>*,.g3>*,.g4>*{grid-column:1/-1!important}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}

/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.panel.flat{background:transparent;border-color:transparent;padding:0}
.panel h3{margin-bottom:10px}
.ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:500;background:var(--surface2);color:var(--ink2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.crit{background:var(--crit-soft);color:var(--crit)}.pill.data{background:var(--data-soft);color:var(--data)}.pill.accent{background:var(--accent-soft);color:var(--accent)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.kv dt{color:var(--ink2);font-size:13px}.kv dd{margin:0}

/* claim list */
.claims{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.claim-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;display:grid;gap:8px;text-align:left;box-shadow:var(--shadow)}
.claim-card:hover{border-color:var(--ink3)}
.claim-card .veh{font-family:var(--display);font-size:21px;font-weight:600;line-height:1.1}
.claim-card .meta{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.stagebar{display:flex;gap:3px;height:6px}
.stagebar i{flex:1;background:var(--surface2);border-radius:2px}
.stagebar i.done{background:var(--data)}.stagebar i.cur{background:var(--accent)}

/* workspace */
.ws-head{display:grid;gap:8px;margin-bottom:14px}
.ws-head .title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.field.attn>label{color:var(--warn)}.field.attn>input,.field.attn>select{border-color:var(--warn)}.attn-n{display:inline-block;min-width:16px;padding:0 4px;border-radius:8px;background:var(--warn);color:#fff;font-size:11px;line-height:16px;text-align:center;margin-left:4px}.del-x{float:right;font-size:18px;line-height:1;color:var(--ink3,#999);padding:2px 6px;border-radius:6px}.del-x:hover{background:#fee2e2;color:#b91c1c}
.hero-band{background:linear-gradient(135deg,var(--accent) 0%,var(--accent2,var(--accent)) 100%);color:#fff;border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}.hb-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.hb-veh{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.1}.hb-plate{font-family:var(--mono);font-size:13px;background:rgba(255,255,255,.18);padding:2px 7px;border-radius:6px;vertical-align:middle;margin-left:6px}.hb-sub{font-size:13px;opacity:.9;margin-top:4px}.hb-stage{text-align:right}.hb-stage-l{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}.hb-stage b{font-family:var(--display);font-size:20px}.hb-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:12px 0 8px}.hb-dots i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.28)}.hb-dots i.done{background:rgba(255,255,255,.85)}.hb-dots i.cur{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}.hb-line{margin:0;font-size:14px;opacity:.95}
.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.who-card{border:1px solid var(--line);border-left:4px solid var(--c,var(--line));border-radius:10px;padding:10px 12px;background:var(--surface2)}.who-card.empty{opacity:.7}.wc-role{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}.wc-name{font-weight:600;margin-top:2px}.who-card .btn{text-decoration:none}
.ac-art{width:64px;height:40px;color:var(--a);opacity:.9;margin-left:auto;margin-right:10px}.ac-art svg{width:100%;height:100%}.ab-art{width:64px;height:40px;color:var(--a);flex:0 0 auto}.ab-art svg{width:100%;height:100%}
@media (max-width:600px){.who-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles.t3 .tile .v{font-size:16px}.hb-veh{font-size:22px}.ac-art{display:none}.ab-art{display:none}}
.tabs button{position:relative}.nb{position:absolute;top:1px;right:1px;background:var(--accent);color:var(--accent-ink,#fff);border-radius:999px;font-size:9px;font-weight:700;min-width:14px;height:14px;line-height:14px;padding:0 3px;text-align:center;font-family:var(--mono)}.seen{margin-top:4px;text-align:right;opacity:.85}.grid.g2>.field:last-child:nth-child(odd){grid-column:1/-1}.grid.g4>.field:last-child:nth-child(4n+1){grid-column:1/-1}.grid.g4>.field:last-child:nth-child(4n+3){grid-column:span 2}@media (max-width:700px){.grid.g4>.field:last-child:nth-child(4n+3){grid-column:1/-1}}
.who-card{display:flex;flex-direction:column}.who-card .wc-act{margin-top:auto;padding-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.who-card .wc-act .btn{width:100%;justify-content:center;text-align:center;padding-left:4px;padding-right:4px}.who-card .wc-act .btn.off{opacity:.35;pointer-events:none}.wc-org{font-size:12px;color:var(--ink2);min-height:16px}
@media (max-width:600px){.who-grid{grid-template-columns:1fr!important}.who-card{flex-direction:row;align-items:center;gap:10px}.who-card .wc-main{flex:1;min-width:0}.who-card .wc-act{margin:0;padding:0;width:150px;flex:0 0 auto}}
.qa .btn{min-height:48px;font-size:13px;padding:6px 8px}.pg-group h4{margin:14px 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
@media (max-width:600px){.ws-head .row{row-gap:6px}.ws-head .pill.accent{flex-basis:100%;order:9}}
.steps.grid-steps{display:grid;grid-template-columns:repeat(var(--sc,5),minmax(0,1fr));gap:6px;margin:0 0 8px}.steps.grid-steps button{padding:7px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.step-save{justify-content:flex-end;margin:0 0 14px}@media (max-width:600px){.steps.grid-steps button{font-size:10.5px;letter-spacing:0;padding:8px 1px}.steps.grid-steps .ck,.steps.grid-steps .full{display:none}.step-save .btn{width:100%;justify-content:center}}.steps.grid-steps .short{display:none}@media (max-width:600px){.steps.grid-steps .short{display:inline}}
.install-steps{margin:8px 0 10px;padding-left:22px;display:grid;gap:6px;font-size:14px}.install-steps li{padding-left:4px}.install-card b{font-weight:600}
.cov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cov-grid .tile .v{font-size:14px;white-space:normal;overflow-wrap:anywhere;line-height:1.3}.cov-grid .tile .l{white-space:normal}@media (max-width:600px){.cov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cov-grid .tile:last-child:nth-child(odd){grid-column:1/-1}}
.msg-thumb{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.qa .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.2;min-height:42px}
.tabs{display:grid;grid-template-columns:repeat(var(--tc,5),minmax(0,1fr));gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px}@media (min-width:1000px){.tabs{grid-template-columns:repeat(var(--tn,var(--tc,5)),minmax(0,1fr))}.tabs button{font-size:13px;padding:9px 2px}}
.tabs button{border:0;background:transparent;padding:9px 4px;text-align:center;overflow:hidden;text-overflow:ellipsis;min-width:0;cursor:pointer;font-family:var(--display);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.stages{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.stages button{border:0;background:var(--surface2);border-radius:6px;padding:6px 2px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:11px;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;color:var(--ink3)}
.stages button.done{background:var(--data-soft);color:var(--data)}.stages button.cur{background:var(--accent);color:var(--accent-ink)}
@media (max-width:700px){.stages{grid-template-columns:repeat(5,minmax(0,1fr))}.stages button{font-size:10px;padding:5px 1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}}
.tiles{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.tile .v{font-family:var(--mono);font-size:22px;font-weight:500;line-height:1.1;margin-top:2px}
.tile .l{font-size:12px;color:var(--ink2)}
.tile.accent{border-color:var(--accent);background:var(--accent-soft)}

/* photos */
.photo-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.photo{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(20,24,30,.72);color:#fff;font-size:11px;padding:3px 6px;display:flex;justify-content:space-between;gap:4px}
.photo .del{position:absolute;top:4px;right:4px;border:0;background:rgba(20,24,30,.7);color:#fff;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:14px}
.shotlist{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.shot{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px dashed var(--line2);border-radius:8px;font-size:13px;cursor:pointer;background:var(--surface)}
.shot.have{border-style:solid;border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.shot b{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.shot.have b{color:var(--ok)}

/* estimate table */
.est-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table.est{border-collapse:collapse;width:100%;min-width:980px;font-size:13px}
table.est th{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:var(--ink2);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);background:var(--surface2);white-space:nowrap}
table.est td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
table.est td input,table.est td select{min-height:32px;padding:4px 6px;font-size:13px;border-radius:5px}
table.est td.n{font-family:var(--mono);color:var(--ink3);text-align:right;width:34px;padding-right:8px}
table.est td.tot{font-family:var(--mono);text-align:right;white-space:nowrap;width:90px;padding-right:8px}
table.est .x{border:0;background:transparent;color:var(--ink3);cursor:pointer;font-size:16px;padding:0 6px}
table.est .x:hover{color:var(--crit)}
.totals{display:grid;grid-template-columns:1fr auto;gap:3px 18px;font-size:14px;max-width:420px;margin-left:auto}
.totals .num{font-family:var(--mono)}
.totals .grand{font-family:var(--display);font-size:20px;font-weight:700;border-top:2px solid var(--ink);padding-top:6px;margin-top:4px}
.totals .grand.num{font-family:var(--mono);font-size:20px}
.totals .sub{color:var(--ink2);font-size:13px}
.est-list{display:grid;gap:8px}
.est-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;text-align:left}
.est-item.on{border-color:var(--accent)}
.est-item .k{font-family:var(--display);font-weight:600;font-size:17px;min-width:56px}

/* timeline */
.tl{display:grid;gap:0}
.tl-item{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:8px 0}
.tl-item .dot{width:10px;height:10px;border-radius:50%;background:var(--data);margin:6px auto 0;position:relative}
.tl-item .dot.msg{background:var(--accent)}.tl-item .dot.money{background:var(--ok)}.tl-item .dot.photo{background:var(--warn)}.tl-item .dot.stage{background:var(--ink)}
.tl-item .body{border-bottom:1px solid var(--line);padding-bottom:8px}
.tl-item .when{font-size:12px;color:var(--ink3);font-family:var(--mono)}
.tl-item .t{font-weight:500}
.tl-item .d{font-size:13px;color:var(--ink2);white-space:pre-wrap}

/* ledger */
table.ledger{border-collapse:collapse;width:100%;font-size:14px}
table.ledger th{text-align:left;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:var(--ink2);padding:6px 8px;border-bottom:1px solid var(--line)}
table.ledger td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
table.ledger td.num{font-family:var(--mono);white-space:nowrap}
.balance{display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.balance{grid-template-columns:1fr}}

/* checklist */
.check{display:grid;gap:4px}
.check label{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:14px}
.check label.done{background:var(--ok-soft);border-color:transparent;color:var(--ok);text-decoration:line-through}
.check input{margin-top:3px}

/* parties */
.party{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.party .role{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--accent);min-width:64px}
.party .who{font-size:14px}.party .who small{display:block;color:var(--ink2);font-size:12px}

/* modal / drawer */
.modal{position:fixed;inset:0;background:rgba(12,16,22,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal .box{background:var(--surface);border-radius:14px;max-width:640px;width:100%;max-height:92vh;overflow:auto;padding:18px;border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:9px 14px;border-radius:8px;font-size:14px;z-index:60;box-shadow:var(--shadow)}
@media (min-width:900px){.toast{bottom:24px}}

/* bottom nav mobile */
nav.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:flex;z-index:30;padding:0 max(14px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))}
nav.bottom button{flex:1;border:0;background:transparent;padding:8px 4px 10px;min-width:0;cursor:pointer;font-family:var(--display);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);display:grid;gap:2px;justify-items:center}
nav.bottom button.on{color:var(--accent)}
nav.bottom svg{width:22px;height:22px}
@media (min-width:900px){nav.bottom{display:none}}
.empty{padding:28px;text-align:center;color:var(--ink2);border:1px dashed var(--line2);border-radius:12px}

/* print */
#printArea{display:none}
@media print{
  body{background:#fff;color:#000}
  #app{display:none}
  #printArea{display:block}
}
.tblwrap{overflow-x:auto;max-width:100%}.cmp{width:100%;border-collapse:collapse;font-size:13px}.cmp th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}.cmp td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}.cmp tr.dis td{background:var(--warn-soft)}.cmp input{padding:4px 6px;font-size:13px}
.pbar{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden}.pbar>div{height:100%;border-radius:99px;transition:width .3s}
.pick-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.pick{display:grid;gap:4px;border:2px solid var(--line);border-radius:10px;padding:4px;cursor:pointer;text-align:center}.pick:has(input:checked){border-color:var(--accent)}.pick input{display:none}.pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}.pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sup-row.over{border-color:var(--crit)}
@media (max-width:760px){.pick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wallet-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.tile.vslot{cursor:pointer;min-height:64px}.tile.vslot .v{font-size:14px;font-family:var(--sans,inherit)}.tile.none{border-style:dashed;background:var(--surface2)}.wallet-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.tile.bad{border-color:var(--crit)}.tile.warn{border-color:var(--warn)}.wallet-grid .tile .l{white-space:normal}@media (max-width:600px){.wallet-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.wallet-grid.four .tile:last-child:nth-child(odd){grid-column:1/-1}}
/* v1.16 motion + directory + agreement */
.has-sky{position:relative;overflow:hidden;isolation:isolate}.sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(42px);opacity:.6;will-change:transform;animation:drift 20s ease-in-out infinite alternate}
.o1{width:44%;max-width:560px;aspect-ratio:1;left:-10%;top:-35%;background:var(--accent-soft)}.o2{width:36%;max-width:460px;aspect-ratio:1;right:-8%;top:-20%;background:var(--data-soft);animation-duration:26s;animation-delay:-8s}.o3{width:30%;max-width:400px;aspect-ratio:1;left:30%;bottom:-40%;background:#EBE5F9;animation-duration:23s;animation-delay:-14s}.o4{width:22%;max-width:300px;aspect-ratio:1;right:22%;bottom:-25%;background:var(--ok-soft);animation-duration:17s;animation-delay:-4s}
:root:not([data-theme="light"]) .o3{background:#2A2247}@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .o3{background:#EBE5F9}}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,9%,0) scale(1.15)}100%{transform:translate3d(-6%,-5%,0) scale(.92)}}
.route{position:absolute;left:0;right:0;bottom:0;width:100%;height:48%;opacity:.55}.route .road{fill:none;stroke:var(--line2);stroke-width:2;vector-effect:non-scaling-stroke}.route .dash{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:16 26;vector-effect:non-scaling-stroke;animation:dashmove 2.4s linear infinite}.route .car{fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}.route .car.c2{fill:var(--data);filter:drop-shadow(0 0 6px var(--data))}
@keyframes dashmove{to{stroke-dashoffset:-84}}
.ticker{overflow:hidden;margin:10px 0 18px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.ticker .tk{display:inline-flex;gap:18px;align-items:center;white-space:nowrap;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--ink2);animation:tick 40s linear infinite;will-change:transform}.ticker i{color:var(--accent);font-style:normal}@keyframes tick{to{transform:translateX(-50%)}}
.route{height:62%;opacity:.7}.sky.soft .orb{opacity:.38}.sky.soft .route{opacity:.32;height:40%}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*80ms)}@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.landing-hero .lh-mark{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-7px)}}
.landing-hero h1{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 40%,var(--accent) 50%,var(--ink) 60%,var(--ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite}@keyframes sheen{0%,20%{background-position:100% 0}60%,100%{background-position:0 0}}
.ac-art,.ab-art{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.appcard:hover .ac-art{transform:translateY(-4px) rotate(-4deg)}.advbar:hover .ab-art{transform:translateX(6px)}
.lh-card{transition:transform .25s,box-shadow .25s}.lh-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.hero-band.shine{position:relative;overflow:hidden}.hero-band.shine::after{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);animation:shine 7s ease-in-out infinite;pointer-events:none}@keyframes shine{0%{transform:translateX(-55%)}100%{transform:translateX(55%)}}
svg.flow path{stroke-dasharray:6 6;animation:dashmove 1.6s linear infinite}
@media (prefers-reduced-motion:reduce){.route .car{display:none}.landing-hero h1{color:var(--ink);background:none;-webkit-text-fill-color:initial}}
table.mini.dir td{vertical-align:middle}table.mini.dir .row .btn{white-space:nowrap}
.tile.addtile{text-align:left;cursor:pointer;font:inherit;color:inherit;border-style:dashed}.tile.addtile .v{color:var(--data)}
/* v1.17 wreckers, bottom bar */
nav.bottom{flex-direction:column;align-items:stretch}.nb-row{display:flex;width:100%}.nb-file{display:flex;justify-content:space-between;gap:8px;font-size:11px;padding:4px 12px 0;color:var(--ink2);border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.nb-file span:last-child{font-family:var(--mono);text-transform:none;letter-spacing:0}
.advbar.drvbar{margin-top:18px;margin-bottom:4px}
a.btn{text-decoration:none}.tools-panel{margin:4px 0 14px}.qa.tools3 .btn{min-height:52px;font-size:15px;background:var(--surface2)}.landing.pub{max-width:760px;margin:0 auto}.landing.pub .landing-hero h1{font-size:clamp(24px,4vw,34px)}.landing.pub .panel{margin-top:14px}.pub-out{white-space:pre-wrap;line-height:1.5}.dirlist .row{align-items:flex-start}
/* v1.20 motion pack */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.nomotion *,.nomotion *::before,.nomotion *::after{animation:none!important;transition:none!important}.nomotion .net,.nomotion .aurora,.nomotion .scan,.nomotion .gridfloor{display:none!important}
.has-sky{--px:0px;--py:0px}.has-sky .orb{transform:translate3d(var(--px),var(--py),0)}.has-sky .o2,.has-sky .o4{transform:translate3d(calc(var(--px)*-1),calc(var(--py)*-1),0)}.has-sky .lh-mark{transform:translate3d(calc(var(--px)*.6),calc(var(--py)*.6),0);transition:transform .25s ease-out}
.sky .net{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9}
.gridfloor{position:absolute;left:-20%;right:-20%;bottom:-2px;height:46%;z-index:-1;pointer-events:none;transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;background-image:linear-gradient(to right,color-mix(in srgb,var(--data) 22%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--data) 22%,transparent) 1px,transparent 1px);background-size:56px 56px;animation:floor 3.2s linear infinite;mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent 85%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.55),transparent 85%)}
.gridfloor.soft{opacity:.5}.landing.pub .scan{height:7%;opacity:.55}@keyframes floor{to{background-position:0 56px,0 56px}}
.scan{position:absolute;left:0;right:0;top:-10%;height:14%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent) 50%,transparent);animation:scan 7s ease-in-out infinite}@keyframes scan{0%{transform:translateY(-100%)}55%,100%{transform:translateY(900%)}}
.lh-mark{position:relative}.lh-mark.orbit::before,.lh-mark.orbit::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);animation:spin 14s linear infinite;pointer-events:none}.lh-mark.orbit::after{inset:-26px;border-style:dotted;border-color:color-mix(in srgb,var(--data) 55%,transparent);animation-duration:22s;animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}
.landing-hero h1 .rot{-webkit-text-fill-color:var(--accent);color:var(--accent)}.rot{display:inline-block;transition:opacity .35s,transform .35s;will-change:opacity,transform}.rot.out{opacity:0;transform:translateY(.35em)}
.holo{position:relative;isolation:isolate}.holo::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 62%,var(--a,var(--accent)) 78%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:holo 7s linear infinite;animation-delay:calc(var(--i,0)*-1.3s);pointer-events:none;opacity:.85}@keyframes holo{to{--ang:360deg}}
.glow{animation:glow 2.6s ease-in-out infinite}@keyframes glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent)}}.ab-cta.glow{border-radius:8px;padding:2px 6px;margin:-2px -6px}
.bob{animation:bob 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.9s)}@keyframes bob{50%{transform:translateY(-5px)}}
#main.swap{animation:swap .42s cubic-bezier(.2,.7,.2,1) both}@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none}body.aurora-on .aurora{display:block}.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;width:52vw;height:52vw;max-width:700px;max-height:700px;animation:aur 26s ease-in-out infinite alternate}.aurora i:nth-child(1){left:-15vw;top:-10vh;background:var(--accent-soft)}.aurora i:nth-child(2){right:-12vw;top:20vh;background:var(--data-soft);animation-duration:31s;animation-delay:-9s}.aurora i:nth-child(3){left:25vw;bottom:-25vh;background:var(--ok-soft);animation-duration:22s;animation-delay:-15s}@keyframes aur{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
nav.bottom button.on svg{animation:pop .35s cubic-bezier(.2,.7,.2,1)}@keyframes pop{50%{transform:scale(1.18)}}
.stagebar i.cur,.hb-dots i.cur{background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.55) 50%,transparent 100%);background-size:200% 100%;animation:sheen2 2.2s linear infinite}@keyframes sheen2{to{background-position:-200% 0}}
@media (max-width:700px){.gridfloor{height:34%}.holo::after{animation-duration:10s}.lh-mark.orbit::after{display:none}}
@media (prefers-reduced-motion:reduce){.net,.aurora,.scan,.gridfloor{display:none!important}.holo::after{display:none}}
/* v1.20.2 layout fixes */
@media (max-width:600px){.grid.g2{grid-template-columns:1fr}.grid.g2>*{grid-column:1/-1!important}}
@media (max-width:899px){#app main{padding-bottom:calc(var(--navh,84px) + 28px)}#app .toast,.toast{bottom:calc(var(--navh,84px) + 12px)}#app .savebar{bottom:calc(var(--navh,84px) + 8px)}}
@media (max-width:430px){nav.bottom button{font-size:9.5px;letter-spacing:0;padding-left:1px;padding-right:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}nav.bottom button>*{max-width:100%;overflow:hidden;text-overflow:ellipsis}}
.btn.dir{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
/* v1.21 team order, five-seat picture, uniform shot boxes */
.who-card.drv{background:linear-gradient(90deg,var(--data-soft),var(--surface2) 70%);border-color:color-mix(in srgb,#2563EB 45%,transparent)}.who-card.adv{background:linear-gradient(90deg,var(--accent-soft),var(--surface2) 70%);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.who-card.drv .wc-role{color:#2563EB;font-weight:700}.who-card.adv .wc-role{color:var(--accent);font-weight:700}.who-grid .who-card.drv,.who-grid .who-card.adv{grid-column:1/-1}
svg.flow.five .advring{transform-origin:300px 226px;animation:spin 40s linear infinite}svg.flow.five .drvpulse{transform-origin:300px 226px;animation:dpulse 2.6s ease-in-out infinite}@keyframes dpulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.18);opacity:0}}svg.flow.five g.me>circle:last-of-type,svg.flow.five g.me>circle:first-of-type{filter:drop-shadow(0 0 8px currentColor)}svg.flow.five g.me{color:#fff}
#fillPanel textarea{min-height:64px}
.shotlist{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:1fr}.shot{min-height:58px;justify-content:flex-start;text-align:left;align-items:center}.shot>span,.shot>b+span{flex:1;min-width:0;line-height:1.25}@media (max-width:700px){.shotlist{grid-template-columns:repeat(2,minmax(0,1fr))}.shot{min-height:60px;padding:6px 8px;font-size:12.5px}}



/* v1.26: the finder fee, the square public nav, the office */
.finder-ad{border-left:4px solid var(--accent)}
.finder-nums{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:12px}
.finder-nums .fn{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;padding:14px 12px;text-align:center;display:grid;gap:2px}
.finder-nums .fn b{font-family:var(--display);font-size:34px;line-height:1;color:var(--accent);letter-spacing:.01em}
.finder-nums .fn span{font-size:12.5px;color:var(--ink2);line-height:1.25}
.finder-nums .fn.or{background:none;border:0;padding:0;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--ink3)}
@media (max-width:430px){.finder-nums .fn b{font-size:28px}}
/* v2.2 the referral terms: short, plain, and read before anybody acts on the offer */
.finder-terms{margin:10px 0 0;padding:0 0 0 18px;display:grid;gap:5px}
.finder-terms li{font-size:12.5px;line-height:1.45;color:var(--ink2)}
.finder-terms li::marker{color:var(--accent)}
.pubnav{display:grid;gap:8px;margin-bottom:12px}
.pubnav .pubback{justify-self:start;background:var(--ink);border-color:var(--ink);color:var(--ground);font-weight:600}
.pubgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pubgrid .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.2;min-height:46px;font-size:13.5px}
@media (min-width:760px){.pubgrid{grid-template-columns:repeat(6,minmax(0,1fr))}.pubgrid .btn{min-height:52px;font-size:13px}}
.agree-box{max-height:52vh;overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.agree p{max-width:80ch}.agree-tick a{color:var(--data)}


/* v0.2 additions */
.seg button.on[data-role=owner]{background:var(--data);color:#fff}
.seg button.on[data-role=shop]{background:var(--ink);color:var(--ground)}
.seg button.on[data-role=consultant]{background:var(--accent);color:var(--accent-ink)}
.topnav{display:none;gap:2px}
@media (min-width:900px){.topnav{display:flex}}
.topnav button{border:0;background:transparent;padding:6px 10px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);border-radius:6px}
.topnav button.on{color:var(--ink);background:var(--surface2)}
.steps{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.steps button{border:1px solid var(--line2);background:var(--surface);border-radius:999px;padding:5px 12px;font-family:var(--display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);cursor:pointer}
.steps button.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.steps button.done{border-color:var(--ok);color:var(--ok)}
.phase{margin-bottom:14px}
.phase h4{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.phase h4::after{content:"";flex:1;height:1px;background:var(--line)}
.party{grid-template-columns:auto 1fr auto}
.party .role{min-width:84px}
.fault{display:grid;grid-template-columns:1fr 90px;gap:8px;align-items:center}
.bar{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.due{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.due .d{font-family:var(--mono);font-size:12px;white-space:nowrap}
.due.over{border-color:var(--crit);background:var(--crit-soft)}
.due.soon{border-color:var(--warn);background:var(--warn-soft)}
.due.done{opacity:.55;text-decoration:line-through}
.ws{display:grid;grid-template-columns:1fr 300px;gap:10px 18px;align-items:start}
@media (max-width:760px){.ws{grid-template-columns:1fr}}
.result{background:var(--surface2);border-radius:10px;padding:12px 14px;display:grid;gap:4px}
.result .big{font-family:var(--mono);font-size:24px;font-weight:500}
.result .l{font-size:12px;color:var(--ink2)}
.note{font-size:13px;color:var(--ink2);border-left:3px solid var(--line2);padding:4px 10px;margin:8px 0}
.note.warn{border-color:var(--warn);color:var(--ink)}
.lock{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--warn)}
/* plans */
.plans{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:10px;align-content:start}
.plan.hi{border-color:var(--accent);box-shadow:var(--shadow)}
.plan .name{font-family:var(--display);font-size:22px;font-weight:700}
.plan .price{font-family:var(--mono);font-size:28px;font-weight:500;line-height:1}
.plan .price small{font-family:var(--body);font-size:13px;color:var(--ink2);font-weight:400}
.plan ul{margin:0;padding-left:18px;font-size:14px;display:grid;gap:4px}
.plan .who{font-size:13px;color:var(--ink2)}
.persona{display:grid;gap:8px;margin:22px 0 10px}
.persona h2{font-size:26px}
.doclist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.doc{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.doc .t{font-family:var(--display);font-weight:600;font-size:17px}
.doc .s{font-size:13px;color:var(--ink2)}
table.mini{border-collapse:collapse;width:100%;font-size:13px}
table.mini th{text-align:left;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:var(--ink2);padding:5px 6px;border-bottom:1px solid var(--line)}
table.mini td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
table.mini td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.fleet-h{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px}
.fleet-h h3{font-size:20px}


.panel.locked{border-style:dashed;background:var(--surface2)}
.angle{display:grid;grid-template-columns:1fr 200px;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.angle.on{border-color:var(--data)}
@media (max-width:600px){.angle{grid-template-columns:1fr}}
.thread{display:grid;gap:8px}
.msg{padding:8px 12px;border-radius:10px;background:var(--surface2);max-width:720px}
.msg.me{background:var(--data-soft);margin-left:auto}
.msg.consultant{border-left:3px solid var(--accent)}
.msg .who{font-size:12px;color:var(--ink2);margin-bottom:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.msg .txt{white-space:pre-wrap;font-size:14px}
label.btn input{margin:0}
.seg button[hidden]{display:none}


.brand .mark{background:transparent;width:30px;height:30px;border-radius:0}
.brand .mark svg{display:block}
.train-hero{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:14px}
.lessons{display:grid;gap:8px}
.lesson{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 16px}
.lesson summary{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer;list-style:none}
.lesson summary::-webkit-details-marker{display:none}
.lesson .n{font-family:var(--mono);color:var(--accent);font-weight:500}
.lesson .t{font-family:var(--display);font-weight:600;font-size:19px;flex:1}
.lesson .c{font-size:12px;color:var(--ink3)}
.lesson ol{margin:0 0 14px;padding-left:22px;display:grid;gap:8px;font-size:14px;max-width:80ch}
.lesson ol li::marker{color:var(--ink3);font-family:var(--mono);font-size:12px}
.faq{display:grid;gap:4px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{cursor:pointer;font-weight:500;padding:4px 0}
.faq p{margin:4px 0 8px;font-size:14px;color:var(--ink2);max-width:80ch}
.lh-preview{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface2)}
.lh-preview img{max-height:48px;max-width:140px;object-fit:contain;flex:0 0 auto}.lh-preview>div:last-child{min-width:0;overflow-wrap:anywhere}
.lh-empty{width:64px;height:48px;border:1px dashed var(--line2);border-radius:6px;display:grid;place-items:center;font-size:11px;color:var(--ink3)}
.plan-name{font-family:var(--display);font-size:22px;font-weight:600}
.tpl-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tpl{display:grid;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.tpl:hover{border-color:var(--data)}
#printArea .wm,#printArea .docfoot{display:none}
@media print{#printArea .wm{display:block}#printArea .docfoot{display:flex}}


.saveind{font-size:12px;color:var(--ink3);font-family:var(--mono);display:inline-flex;align-items:center;gap:6px}
.saveind::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3);display:inline-block}
.saveind.dirty{color:var(--warn)}.saveind.dirty::before{background:var(--warn)}
.saveind.saving{color:var(--data)}.saveind.saving::before{background:var(--data);animation:pulse 1s infinite}
.saveind.saved{color:var(--ok)}.saveind.saved::before{background:var(--ok)}
.saveind.error{color:var(--crit)}.saveind.error::before{background:var(--crit)}
.saveind:empty{display:none}
@keyframes pulse{50%{opacity:.3}}
.savebar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;position:sticky;bottom:70px}
@media (min-width:900px){.savebar{bottom:12px}}


p,li,.small,.muted,.tiny,dd{text-wrap:pretty}
h1,h2,h3,h4,.tile .l,.plan .who{text-wrap:balance}
.brand small{margin-left:6px;font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--accent);font-weight:600}
.landing{max-width:1040px;margin:0 auto;padding:24px 0}
.landing-hero{text-align:center;display:grid;justify-items:center;gap:10px;margin-bottom:26px}
.landing-hero h1{font-size:40px;text-wrap:balance}.landing-hero>p{max-width:62ch;text-wrap:pretty}.lh-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:820px;margin-top:8px}.lh-card{position:relative;display:grid;justify-items:center;gap:10px;padding:18px 16px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--surface) 0%,var(--surface2) 100%);text-align:center;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.04) inset}.lh-card::before{content:'';position:absolute;left:14%;right:14%;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.9}.lh-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.lh-ic svg{width:24px;height:24px}.lh-txt{display:grid;gap:4px}.lh-txt b{font-family:var(--display);font-size:16px;letter-spacing:.01em}.lh-txt span{font-size:13px;color:var(--ink2);line-height:1.4;text-wrap:pretty}.landing-hero p.lh-note{font-size:12px!important;color:var(--ink3);max-width:60ch;margin-top:4px}@media (max-width:600px){.landing-hero h1{font-size:30px}.lh-three{grid-template-columns:1fr;gap:10px}.lh-card{grid-template-columns:44px 1fr;justify-items:start;align-items:center;text-align:left;padding:14px 14px}.lh-card::before{left:0;right:auto;top:14%;bottom:14%;width:3px;height:auto;border-radius:0 3px 3px 0;background:linear-gradient(180deg,transparent,var(--accent),transparent)}}
.landing-hero p{max-width:56ch;margin:0;color:var(--ink2)}
.apps{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.apps{grid-template-columns:1fr}}
.appcard{display:grid;gap:8px;text-align:left;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow);border-top:4px solid var(--a);align-content:start}
.appcard:hover{transform:translateY(-2px);transition:transform .15s}
.appcard .ac-name{font-family:var(--display);font-size:24px;font-weight:700}
.appcard .ac-tag{font-weight:600;color:var(--a)}
.appcard .ac-blurb{font-size:14px;color:var(--ink2)}
.appcard .ac-cta{margin-top:6px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--a)}
.landing-foot{text-align:center;color:var(--ink3);font-size:13px;margin-top:18px}
.assist-hero{display:flex;gap:16px;align-items:center}
.drop{border:2px dashed var(--line2);border-radius:12px;padding:22px;text-align:center;display:grid;gap:8px;justify-items:center;background:var(--surface2);color:var(--ink2);font-size:14px}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.review{display:grid;gap:6px;max-height:50vh;overflow:auto;padding-right:4px}
.rv{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-size:14px}
.rv.new{border-left:3px solid var(--ok)}.rv.update{border-left:3px solid var(--data)}
.rv input{margin-top:3px}
.progress{display:grid;gap:8px}
.prog{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.prog .txt{white-space:pre-wrap;font-size:14px}
.thumb{width:72px;height:54px;object-fit:cover;border-radius:6px;cursor:pointer;border:1px solid var(--line)}

[hidden]{display:none!important}

.modal .box.wide{max-width:960px}
iframe.pv{width:100%;height:60vh;border:1px solid var(--line);border-radius:8px;background:#fff}
iframe.pv.short{height:34vh}
.sigpad{width:100%;height:150px;border:1px solid var(--line2);border-radius:8px;background:#fff;touch-action:none;cursor:crosshair;display:block}
.panel.attn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media (max-width:600px){header.top{padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));gap:8px}.brand{font-size:20px}.brand small{display:none}.sync span{display:none}main{padding:12px 12px 90px}h1{font-size:24px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile .v{font-size:18px}.stages{grid-template-columns:repeat(5,1fr)}.tabs{position:sticky;top:52px;background:var(--ground);z-index:10;padding-top:4px}.modal{padding:8px;align-items:end}.modal .box{max-height:94vh;border-radius:14px 14px 0 0;padding:14px}.landing-hero h1{font-size:30px}.ws-head .title h1{font-size:24px}.due{grid-template-columns:auto 1fr;grid-auto-rows:auto}.due .row{grid-column:1/-1}.party{grid-template-columns:1fr;gap:6px}.party .row{justify-content:flex-start}.savebar{bottom:62px}}

.menubtn{display:none;font-size:18px;padding:4px 10px}@media (max-width:899px){.menubtn{display:inline-flex}#switchApp{display:none}}
.ws-head{grid-template-columns:minmax(0,1fr)}.ws-head>*{min-width:0}.stack>*{min-width:0}.grid>*{min-width:0}#app{grid-template-columns:minmax(0,1fr);overflow-x:clip}main{min-width:0}

/* ===== v0.7 visual system ===== */
:root{--radius:14px;--radius-sm:10px;--accent-2:var(--accent)}
body{background:var(--ground)}
header.top{backdrop-filter:saturate(1.4) blur(10px);background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid var(--line);box-shadow:inset 0 3px 0 var(--accent)}
[data-app] header.top{box-shadow:inset 0 3px 0 var(--accent)}
.btn{border-radius:var(--radius-sm);transition:background .12s,border-color .12s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(.94)}
.btn.dark{background:var(--ink);color:var(--ground)}
.panel{border-radius:var(--radius);box-shadow:0 1px 0 rgba(27,36,48,.03)}
.tile{border-radius:12px;position:relative;overflow:hidden;padding-left:16px}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.tile.accent{background:var(--accent-soft);border-color:transparent}
.tile.accent::before{background:var(--accent)}
.tile .v{font-size:24px}
.claim-card{border-radius:var(--radius);padding:0;overflow:hidden;gap:0}
.claim-card>*{padding:0 16px}
.claim-card>.row:first-child{padding-top:12px;padding-bottom:6px;border-top:3px solid var(--accent)}
.claim-card .veh{padding-bottom:4px}
.claim-card .meta{padding-bottom:8px}
.claim-card .stagebar{margin:0 16px 8px}
.claim-card>.row:last-child{padding-bottom:12px}
.stagebar i.cur{background:var(--accent)}
.stages button.cur{background:var(--accent);color:var(--accent-ink)}
.stages button.done{background:var(--accent-soft);color:var(--accent)}
.tabs{gap:4px}
.tabs button{border-radius:8px 8px 0 0;padding:9px 2px;font-size:12px;letter-spacing:.03em}
.tabs button.on{background:var(--surface);border:1px solid var(--line);border-bottom-color:var(--surface);color:var(--accent);margin-bottom:-1px}
.pill.accent{background:var(--accent-soft);color:var(--accent)}
.steps button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.due.soon{border-color:var(--accent);background:var(--accent-soft)}
.msg.me{background:var(--accent-soft)}
.msg.consultant{border-left-color:#E4572E}.msg.attorney{border-left-color:#6D4AC4}.msg.shop{border-left-color:#0F8A6E}.msg.owner{border-left-color:#2563EB}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
/* landing */
.landing{max-width:1180px;padding:30px 0 40px}
.landing-hero{padding:34px 20px 30px;border-radius:24px;background:radial-gradient(900px 320px at 50% -80px,#FCE7DF 0%,transparent 60%),radial-gradient(700px 300px at 15% 110%,#E3ECFD 0%,transparent 55%),radial-gradient(700px 300px at 85% 110%,#EBE5F9 0%,transparent 55%),var(--surface);border:1px solid var(--line)}
:root:not([data-theme="light"]) .landing-hero{background:radial-gradient(900px 320px at 50% -80px,#3B2219 0%,transparent 60%),radial-gradient(700px 300px at 15% 110%,#1B2B4D 0%,transparent 55%),radial-gradient(700px 300px at 85% 110%,#2A2247 0%,transparent 55%),var(--surface)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .landing-hero{background:radial-gradient(900px 320px at 50% -80px,#FCE7DF 0%,transparent 60%),radial-gradient(700px 300px at 15% 110%,#E3ECFD 0%,transparent 55%),radial-gradient(700px 300px at 85% 110%,#EBE5F9 0%,transparent 55%),var(--surface)}}
.landing-hero h1{font-size:44px;letter-spacing:-.01em}
.landing-hero p{max-width:62ch;font-size:16px}
.apps.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
@media (max-width:1000px){.apps.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.apps.four{grid-template-columns:1fr}}
.appcard{border-top:0;padding:0;gap:0;background:var(--surface)}
.appcard>*{padding-left:18px;padding-right:18px}
.appcard .ac-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 10px;background:linear-gradient(135deg,var(--as),transparent 70%)}
.appcard .ac-free{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--a)}
.appcard .ac-name{padding-top:8px}
.appcard .ac-tag{padding-top:4px}
.appcard .ac-blurb{padding-top:6px}
.appcard .ac-cta{padding:12px 18px 16px;display:flex;justify-content:space-between}
.landing-how{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;font-size:14px;color:var(--ink2)}
.landing-how>div{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.landing-how b{color:var(--ink);display:block;margin-bottom:2px;font-family:var(--display);font-size:17px;font-weight:600}
@media (max-width:760px){.landing-how{grid-template-columns:1fr}.landing-hero h1{font-size:32px}}
.lh-mark{margin-bottom:6px}
/* auth */
.auth-wrap{max-width:520px;margin:30px auto}
/* photo grid nicer */
.photo{border-radius:10px}
.photo .cap{background:linear-gradient(0deg,rgba(15,20,27,.78),rgba(15,20,27,0));padding:14px 8px 5px}
/* thread */
.msg{border-radius:12px}
/* tables */
table.mini th,table.ledger th{background:var(--surface2)}
table.mini tr:hover td{background:color-mix(in srgb,var(--accent-soft) 40%,transparent)}

.appcard{grid-template-rows:auto auto auto auto 1fr auto}.appcard .ac-cta{align-self:end}

/* v0.8 */
.brand{gap:10px}
.brand #brandName svg{display:block;height:26px}
.apps.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
@media (max-width:900px){.apps.three{grid-template-columns:1fr}}
.advbar{display:grid;grid-template-columns:auto auto 1fr auto;gap:18px;align-items:center;width:100%;text-align:left;margin-top:14px;padding:16px 20px;border:1px solid var(--line);border-left:6px solid var(--a);border-radius:16px;background:linear-gradient(90deg,var(--as),var(--surface) 55%);cursor:pointer;color:var(--ink)}
.advbar:hover{border-color:var(--a)}
.ab-eyebrow{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--a)}
.ab-name{display:block;font-family:var(--display);font-weight:700;font-size:24px}
.ab-blurb{display:block;font-size:14px;color:var(--ink2);max-width:70ch}
.ab-cta{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--a);white-space:nowrap}
@media (max-width:700px){.advbar{grid-template-columns:auto 1fr}.ab-art{display:none}.ab-cta{grid-column:2}.advbar .ab-text{grid-column:2}}
:root:not([data-theme="light"]) .advbar{background:linear-gradient(90deg,#3B2219,var(--surface) 55%)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .advbar{background:linear-gradient(90deg,var(--as),var(--surface) 55%)}}
.quick{display:grid;gap:8px;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.quick{grid-template-columns:1fr}}
.quick .q{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:var(--surface)}
.quick .n{flex:none;width:24px;height:24px;border-radius:50%;color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px}
svg.flow{width:100%;height:auto;display:block;margin-top:8px}
table.matrix{border-collapse:collapse;width:100%;font-size:13px}
table.matrix th{text-align:left;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:6px 8px;border-bottom:1px solid var(--line)}
table.matrix th:not(:first-child),table.matrix td.c{text-align:center}
table.matrix td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--surface2);border:1px solid var(--line2);vertical-align:middle}
.dot.d2{background:var(--c);border-color:var(--c)}
.dot.d1{background:transparent;border:3px solid var(--c);box-sizing:border-box}
.lesson-body{display:grid;grid-template-columns:1fr 190px;gap:16px;align-items:start;padding-bottom:14px}
@media (max-width:640px){.lesson-body{grid-template-columns:1fr}.lesson-body figure{margin:0 auto}}
.lesson-body ol{margin:0}
.lesson-body figure{margin:0;display:grid;gap:6px;justify-items:center}
.lesson-body figcaption{font-size:12px;color:var(--ink2);text-align:center;text-wrap:balance}
svg.phone{width:170px;height:auto}
.gloss{display:grid;gap:8px 20px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media (max-width:700px){.gloss{grid-template-columns:1fr}}
.gloss dt{font-family:var(--display);font-weight:700;font-size:16px}
.gloss dd{margin:0;font-size:14px;color:var(--ink2)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}

.wm-word{display:inline-flex;align-items:baseline;font-family:var(--display);font-weight:700;letter-spacing:.01em;line-height:1}.wm-t{height:.92em;width:.62em;margin-left:-.02em;vertical-align:baseline;position:relative;top:.06em}
.modes{display:grid;gap:8px;grid-template-columns:repeat(var(--mc,4),minmax(0,1fr))}@media (max-width:760px){.modes{grid-template-columns:repeat(var(--mp,2),minmax(0,1fr))}.modes.odd>.mode:first-child{grid-column:1/-1}}.mode{display:grid;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}.mode.on{border-color:var(--accent);background:var(--accent-soft)}.mode b{font-family:var(--display);font-size:16px}.mode span{font-size:12px;color:var(--ink2)}.g1{grid-template-columns:1fr}.modes.one{grid-template-columns:1fr;margin-bottom:8px}.mode.chat b{display:flex;align-items:center;gap:8px}.chat-thread{max-height:520px;overflow-y:auto;padding:4px 2px}.chat-thread .msg{max-width:88%}.chat-thread .msg.assist{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent)}.chat-thread .msg .txt{font-size:14px;line-height:1.5}.chat-thread .think{opacity:.7;font-style:italic}#chatForm textarea{min-height:64px;resize:vertical}
/* v1.29: panels never touch, the headline breaks the same way every time, the feeder panel pops */
.landing{display:flex;flex-direction:column;gap:16px}
.landing>*{margin-top:0!important;margin-bottom:0!important}
.landing-hero{margin-bottom:0}
.landing-hero h1 .hl{display:block}
.landing-hero h1 .hl+.hl{margin-top:2px}
.feeder-ad{border-left:4px solid var(--data);margin-top:0}
.feeder-ad .eyebrow{margin-bottom:2px}
.landing.pub .panel{margin-top:0}

/* ===== v1.30: nothing overlaps, nothing is clipped, everything lines up =====
   Read this as the layout floor for the whole app: every box may shrink, no box may spill. */
#main .panel,#main .tile,#main .stack>*,#main .grid>*,#main .row>*,#main .cov-grid>*,#main .tiles>*{min-width:0}
#main .tile .v,#main .tile .l,#main .due,#main .note,#main .msg .txt,#main dd,#main .who-card{overflow-wrap:anywhere}

/* key/value blocks (System, file summaries) go one column on a phone instead of squeezing the value */
@media (max-width:600px){
 .kv{grid-template-columns:1fr;gap:0}
 .kv dt{margin-top:8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
 .kv dd{margin:0 0 2px}
}
.kv dd{min-width:0;overflow-wrap:anywhere}

/* tab and stage strips: two short lines beat one clipped word */
.tabs button,.stages button{white-space:normal;text-overflow:clip;line-height:1.1;hyphens:auto}
@media (max-width:700px){.tabs button{font-size:12px;padding:8px 2px}.stages button{font-size:9.5px;line-height:1.05}}

/* the seat switcher wraps instead of running off the edge */
.seg{flex-wrap:wrap;max-width:100%}
@media (max-width:600px){.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
 .seg button{padding:7px 4px;font-size:13px;overflow:hidden;text-overflow:ellipsis}}

/* small tables inside panels wrap their cells rather than pushing the panel wide */
.panel table.mini{table-layout:fixed;width:100%}
.panel table.mini td,.panel table.mini th{overflow-wrap:anywhere}

/* estimate rows and wallet tiles: let the buttons wrap under the label */
.est-item{flex-wrap:wrap}
.est-item>*{min-width:0}
.tile.vslot .row{flex-wrap:wrap;gap:4px}
.tile.vslot .btn{flex:0 1 auto}
.cov-grid .tile .l{overflow-wrap:anywhere}

/* diagrams stay legible: scroll the picture rather than shrink the type to nothing */
.flowwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2px 0}
.flowwrap svg.flow{min-width:520px;width:100%;height:auto;display:block}
svg.flow{max-width:100%;height:auto}

/* every panel keeps clear air under the block before it */
#main .stack>*+*{margin-top:0}
#main .stack{gap:14px}

/* v1.30.1: the last of the spills */
.kv dd select,.kv dd input,.kv dd textarea{max-width:100%;width:100%}
.panel table.mini td.num,.panel table.mini td{white-space:normal}
.est-item span,.est-item div{overflow-wrap:anywhere;min-width:0}
@media (max-width:700px){
 .tabs button{font-size:11px;padding:8px 1px;letter-spacing:.02em}
 .tabs button,.stages button{word-break:normal;overflow-wrap:break-word}
}

/* v1.30.2 */
.panel table.mini .pill{white-space:normal}
/* v1.31: on a phone a table row becomes a card, label above value, using the full width.
   Sideways scrolling in a narrow column wastes the space it has. */
@media (max-width:700px){
 table.mini,table.ledger{display:block;width:100%;table-layout:auto}
 table.mini thead,table.ledger thead{display:none}
 table.mini tbody,table.mini tr,table.mini td,table.ledger tbody,table.ledger tr,table.ledger td{display:block;width:auto}
 table.mini tr,table.ledger tr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:var(--surface)}
 table.mini tr:last-child,table.ledger tr:last-child{margin-bottom:0}
 table.mini td,table.ledger td{border:0;padding:3px 0;white-space:normal;overflow-wrap:anywhere;text-align:left}
 table.mini td:empty,table.ledger td:empty{display:none}
 table.mini td[data-label]::before,table.ledger td[data-label]::before{content:attr(data-label);display:block;font-family:var(--display);font-weight:600;
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:1px}
 table.mini td.num,table.ledger td.num{text-align:left}
 table.mini td .row,table.ledger td .row{flex-wrap:wrap}
 .panel table.mini{table-layout:auto}
}
@media (min-width:1000px){.tabs button{font-size:12px;padding:9px 1px;letter-spacing:.02em}}

/* v1.30.3: the money picture in HTML, and tiles that line up */
.flowpic{margin:2px 0}
.chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.chain .cbox{border:1.5px solid var(--c);color:var(--ink);background:var(--surface);border-radius:10px;
 padding:10px 14px;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.1;text-align:center;white-space:nowrap}
.chain .cstep{display:inline-flex;align-items:center;gap:8px}
.chain .carr{color:var(--ink3);font-size:13px;line-height:1}
@media (max-width:600px){.chain{gap:6px}.chain .cbox{font-size:13px;padding:8px 10px}}
.waterfall{margin-top:12px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.waterfall .eyebrow{margin-bottom:6px}
.waterfall ol{margin:0;padding-left:20px;display:grid;gap:5px;font-size:14px}
.waterfall li{padding-left:2px}
/* every wallet tile in a row is the same height, with its button on the same line */
.cov-grid,.wallet-grid{align-items:stretch}
.tile.vslot{display:flex;flex-direction:column}
.tile.vslot>*:last-child{margin-top:auto!important}

/* ===== v1.35: air between everything, a lit arc, and the spark on what matters ===== */
/* One rule for vertical rhythm. Every block on a page keeps clear space from the next one,
   whatever built it, so nothing can ever sit on top of anything again. */
/* inside a stack the gap does all the spacing, so a child's own margins are ignored:
   otherwise gap + margin-bottom + margin-top stack up into a hole. */
#main .stack{gap:16px}
#main .stack > *{margin-top:0!important;margin-bottom:0!important}
/* outside a stack, neighbours keep the same distance from each other */
#main .panel + .panel,
#main .panel + .note,
#main .note + .panel,
#main h1 + .panel,
#main .ph + .panel,
#main .stack + .panel,
#main .panel + .stack,
#main .savebar + .panel,
#main .stack + .stack{margin-top:16px}
#main .panel > .ph{margin-bottom:12px}
#main .panel > h3 + *{margin-top:10px}
#main .panel > h4:first-child{margin-top:0}
#main .note{margin:12px 0;padding:8px 12px;border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--surface2) 60%,transparent)}
#main .savebar{margin-top:16px}
#main .empty{margin:4px 0}
/* the wallet card and any card with a coloured spine sit clear of its neighbours */
#main .panel[style*="border-left"]{margin-top:16px}
/* a heading block never collides with the control beside it */
.ph{align-items:flex-start;row-gap:8px}
.ph > *{min-width:0}
@media (max-width:600px){.ph{flex-direction:column}.ph > :last-child{align-self:flex-start;max-width:100%}}

/* the spark: the holographic edge people like, on the boxes that matter */
.panel.holo{position:relative;isolation:isolate}
.savebar.holo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* the arc picture */
.arcpic{padding:4px 0 0}
.arc .arcdash{animation:arcflow 3.2s linear infinite}
@keyframes arcflow{to{stroke-dashoffset:-64}}
.arc .arcnode .ring{transform-origin:center;animation:arcpulse 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.7s)}
@keyframes arcpulse{0%,100%{opacity:.18}50%{opacity:.55}}
.arc .arcnode{animation:arcin .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0)*110ms)}
@keyframes arcin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.arc .arcdash,.arc .arcnode .ring,.arc .arcnode{animation:none}.arc .arcdot{display:none}}
@media (max-width:600px){.arc text{font-size:11px}}

/* v1.36: the preview bar, the menu's way home, and air under a section heading */
.prevbar{border-left:4px solid var(--accent)}
.menu-home{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--ground)!important;font-weight:600}
:root:not([data-theme="light"]) .menu-home{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .menu-home{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}}
/* a section heading between panels keeps its own air */
#main .panel + h2,#main .panel + h3,#main .stack + h2{margin-top:20px}
/* a heading block (.ph) after anything keeps the same air: the section heads in Settings are
   .ph blocks, not bare h2s, so the rule above never reached them and they sat on the panel above */
#main .panel + .ph,#main .stack + .ph,#main .note + .ph,#main .steps + .ph,
#main .savebar + .ph,#main .panel + .steps,#main .ph + .steps{margin-top:20px}
/* inside a stack the margins are off, so a section heading takes its air as padding */
#main .stack > h2,#main .stack > h3,#main .stack > h4{padding-top:8px}
#main .stack > .panel + h2,#main .stack > .panel + h3{padding-top:12px}
/* a section heading is heavy type; it takes its own air wherever it sits */
#main h2{padding-top:10px}
#main h2 + .panel,#main h2 + p + .panel{margin-top:12px}
#main .arcpic{padding-top:10px}
.lh-note.strong b{color:var(--ink)}
/* v1.37: the free-tools row is built from the route list, so it has to stay square at any count */
.qa.toolgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qa.toolgrid .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.2;min-height:62px;font-size:12.5px;padding:8px 4px}
@media (min-width:620px){.qa.toolgrid .btn{min-height:56px;font-size:14px;padding:10px 12px}}
/* the nav on a tool page lists every other tool, so it takes the same square counts */
/* v2.0: nine tools. Three across is the only count that squares at every width, so both rows
   are three across everywhere and the free-tools block is a 3x3 block on a phone and on a desk.
   The nav on a tool page lists the other eight, which is 4 across x 2. */
.pubgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.pubgrid .btn{white-space:normal;line-height:1.2;min-height:56px;font-size:12.5px;padding:8px 4px}
@media (min-width:620px){.pubgrid .btn{font-size:14px;padding:10px 12px}}
/* a checkbox and its sentence stay on one line together, the box never above the words */
.ckline{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:8px;cursor:pointer}
.ckline input{margin:2px 0 0;flex:0 0 auto}

/* ===== v1.38: a lighter ground, and less scenery behind the message =====
   The peer note asked for light blue and white. The colour stays orange on purpose: every
   carrier in this category is blue, and Claimt is the thing standing between the driver and
   the carrier, so looking like one is a positioning mistake. What the note was really
   reacting to was density, and that is what this block fixes. Lighter ground, softer lines,
   fewer coloured things per screen. The accent is the only loud thing left. */
:root{
  --ground:#F8FAFC; --surface:#FFFFFF; --surface2:#F1F5F9;
  --ink:#0F172A; --ink2:#64748B; --ink3:#94A3B8;
  --line:#E2E8F0; --line2:#CBD5E1;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05);
}
/* dark mode keeps its own ground; only the light theme was asked to calm down */
#main .panel{border-color:var(--line)}
#main .note{background:var(--surface2)}

/* the scenery goes on the public pages. What stays is what he asked to keep:
   the rotating spark on the boxes that matter, the mark's orbit, the rotating headline
   word, the entrance rise, and the arc. What goes is everything competing with them. */
.landing .ticker,.landing.pub .ticker{display:none}
.landing .gridfloor,.landing .scan,.landing .route{display:none}
.landing-hero.has-sky .sky{display:none}
/* the headline sweep fought the rotating word for the same line, so the word wins */
.landing-hero h1{background:none;-webkit-text-fill-color:initial;color:var(--ink);animation:none}
.landing-hero h1 .rot{-webkit-text-fill-color:var(--accent);color:var(--accent)}
/* the hero is a calm card now rather than a stage */
.landing-hero{border-radius:18px;padding:30px 20px 26px;box-shadow:var(--shadow)}
/* one wash instead of three. Pink, blue and purple at once was the density the note meant;
   a single warm tint keeps the page bright and keeps orange the only colour in play.
   These carry the same specificity as the v1.28 rules they replace, or they lose. */
:root .landing-hero{background:radial-gradient(760px 300px at 50% -70px,#FDEDE7 0%,transparent 62%),var(--surface);border:1px solid var(--line)}
:root:not([data-theme="light"]) .landing-hero{background:radial-gradient(760px 300px at 50% -70px,#2E1C15 0%,transparent 62%),var(--surface)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .landing-hero{background:radial-gradient(760px 300px at 50% -70px,#FDEDE7 0%,transparent 62%),var(--surface)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .landing-hero{background:radial-gradient(760px 300px at 50% -70px,#2E1C15 0%,transparent 62%),var(--surface)}}
.landing-hero>p{color:var(--ink2);font-size:16px}
.landing-hero>p.lh-quiet{font-size:13.5px;color:var(--ink3);max-width:52ch;margin-top:2px}
@media (max-width:600px){.landing-hero{padding:24px 16px 20px}}
/* v2.3 the theme switch: one square in the corner, on every screen the header is on.
   Icon only, so it costs the same room at every width and needs no translation. The states
   read Auto, Light, Dark and cycle in that order; Auto stamps nothing and lets the OS decide. */
.themebtn{width:32px;min-width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:8px;color:var(--ink2);flex:0 0 auto}
.themebtn:hover{color:var(--ink);border-color:var(--ink3)}
.themebtn svg{width:17px;height:17px;display:block}
.themebtn[data-mode="light"]{color:var(--warn)}
.themebtn[data-mode="dark"]{color:var(--data)}
@media (max-width:430px){.themebtn{width:30px;min-width:30px;height:30px}.themebtn svg{width:16px;height:16px}}
@media print{.themebtn{display:none}}
/* v2.6 symmetry and the way back home.
   Three grids were leaving a hole in their last row, which is the "looks weird" and the
   "incomplete" the owner reported. A hole reads as broken; a full row reads as deliberate. */

/* the claim tab strip. 14 tabs in a 5-wide grid is 5, 5 and then a gap. Flex wrapping with
   grow lets the last row spread to the full width instead, so every row is complete. The
   rhythm of five is kept, because the items only grow when a row is short. */
#main .tabs{display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:center}
#main .tabs button{flex:0 1 calc(20% - 4px);min-width:0}
@media (min-width:1000px){#main .tabs button{flex:0 1 calc(14.28% - 4px)}}
@media (max-width:430px){#main .tabs button{flex:0 1 calc(25% - 4px);font-size:11.5px;padding:8px 2px}}

/* a three-item row inside a two-column grid: the orphan takes the whole last row */
@media (max-width:700px) and (min-width:461px){
  #main .grid.g3 > *:last-child:nth-child(3){grid-column:1/-1}
  /* 2.7.2: a cell marked span2 is one that would otherwise sit alone on the last row of a
     two-column fold. State on the new-claim form is the case: Date and Time pair off and it
     was left as a half-width box beside a hole. */
  #main .grid.g3 > .span2, #main .grid.g2 > .span2{grid-column:1/-1}
  #main .grid.g4 > *:last-child:nth-child(3){grid-column:1/-1}
}
#main .shotlist > *:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:760px){#main .shotlist > *:last-child:nth-child(odd){grid-column:auto}}

/* the way back to the public site was hidden on a phone and buried in the burger menu.
   It becomes an icon square beside the theme switch: one tap, and the two controls match. */
@media (max-width:600px){
  #switchApp{display:grid!important;place-items:center;width:32px;min-width:32px;height:32px;
    padding:0;border-radius:8px;color:var(--ink2);font-size:0;flex:0 0 auto}
  #switchApp svg{width:17px;height:17px;display:block}
  #switchApp:hover{color:var(--ink);border-color:var(--ink3)}
}
@media (max-width:430px){#switchApp{width:30px;min-width:30px;height:30px}}
@media print{#switchApp{display:none!important}}