/* Build Pro prototype — mobile-first, plain contractor language, big touch targets. */
:root{
  color-scheme:light;
  --navy:#14213d; --navy2:#1d2f57; --amber:#f5a623; --amber-d:#d98e04;
  --ink:#1c2333; --mut:#5b6478; --line:#dde2ec; --bg:#eef1f6; --card:#fff;
  --green:#1e8e4f; --green-bg:#e5f4ec; --red:#c0392b; --red-bg:#fbeae7;
  --blue:#2456a6; --blue-bg:#e7eefb; --amber-bg:#fdf1da; --radius:14px;
  /* Theme tokens (2026-10-17 themes capstone). Every surface/text tone
     below is a token so [data-theme="dark"] re-skins the whole product
     by re-declaring values — components never hard-code a hex again.
     Light values are the product's original palette. */
  --outer:#d7dce6; --frame-line:#b9c1d1; --frame-shadow:0 0 32px rgba(20,33,61,.25);
  --field:#fff; --tint:#f4f7fc; --hover:#f4f7fc;
  --seg-bg:#e4e8f0; --seg-on:#fff; --dot-off:#cfd6e4; --dot-tx:#45506a;
  --line2:#b9c1d1; --gray-bg:#e8ebf2; --gray-tx:#45506a;
  --amber-tx:#8a5c00; --warn-tx:#6b4e00; --warn-line:#ecd28f;
  --err-tx:#7c2418; --err-line:#eec5bf; --ok-tx:#14532d; --ok-line:#bfe3cf;
  --green-tx:#146536; --blue-tx:#2456a6; --red-tx:#c0392b; --green-deep:#177245;
  --topbar-bg:#14213d; --rail-bg:#14213d; --rail-line:#0c1626;
  --brand-tx:#14213d; --on-tx:#14213d; --ghost-tx:#14213d; --ghost-bd:#14213d;
  --focus:#2456a6; --skel-mid:#eef1f6; --pick-on:#f2fbf5; --spin:#14213d;
  --tab-ico-on:#d98e04;
}
/* DARK — a designed palette, not an inversion: the DOC system's ink
   deepens into the surfaces and the paper becomes the text. Status
   hues keep their meaning; every text tone is re-tuned to hold AA
   contrast on its dark ground (verified in the capstone pass).
   Documents (.doc, signature pad, logo surfaces, the campaign email
   preview) stay paper-white in BOTH themes: they are documents, and
   they print exactly as they read. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#eef1f8; --mut:#a7b1c9; --line:#2c3a5c; --bg:#0d1322; --card:#16203a;
  --green-bg:#0f2f1e; --red-bg:#3d1712; --blue-bg:#16283f; --amber-bg:#3a2c07;
  --outer:#05080f; --frame-line:#26334f; --frame-shadow:0 0 32px rgba(0,0,0,.6);
  --field:#1a2440; --tint:#1c2947; --hover:#22304f;
  --seg-bg:#232f4e; --seg-on:#33436b; --dot-off:#3a4a6e; --dot-tx:#dbe4f5;
  --line2:#43527a; --gray-bg:#26314e; --gray-tx:#b9c4da;
  --amber-tx:#ffcf6b; --warn-tx:#ffd98a; --warn-line:#6b5518;
  --err-tx:#ffb4a6; --err-line:#6e352b; --ok-tx:#8fe3b6; --ok-line:#20503a;
  --green-tx:#4cc38a; --blue-tx:#8db4f5; --red-tx:#ff9d8f;
  --topbar-bg:#0a101f; --rail-bg:#0a101f; --rail-line:#000;
  --brand-tx:#eef1f8; --on-tx:#eef1f8; --ghost-tx:#dbe4f5; --ghost-bd:#5b6f9e;
  --focus:#8db4f5; --skel-mid:#22304f; --pick-on:#12301f; --spin:#f5a623;
  --tab-ico-on:#ffb63e;
}
/* Print is ALWAYS the light document, whatever the screen theme. */
@media print{
  :root[data-theme="dark"]{
    --bg:#fff; --card:#fff; --ink:#1c2333; --mut:#5b6478; --line:#dde2ec;
    --field:#fff; --tint:#f4f7fc; --green-bg:#e5f4ec; --red-bg:#fbeae7;
    --blue-bg:#e7eefb; --amber-bg:#fdf1da; --green-tx:#146536;
    --blue-tx:#2456a6; --red-tx:#c0392b; --amber-tx:#8a5c00;
    --warn-tx:#6b4e00; --err-tx:#7c2418; --ok-tx:#14532d;
    --gray-bg:#e8ebf2; --gray-tx:#45506a;
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--outer);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
#phone{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;display:flex;flex-direction:column;box-shadow:var(--frame-shadow);position:relative}
@media (min-width:520px){ #phone{border-left:1px solid var(--frame-line);border-right:1px solid var(--frame-line)} }

#topbar{background:var(--topbar-bg);color:#fff;padding:14px 16px 12px;position:sticky;top:0;z-index:30}
#topbar-title{font-size:19px;font-weight:800;letter-spacing:.2px}
#topbar-company{font-size:12.5px;color:#c9d3e8;margin-top:2px}

main{flex:1;padding:14px 14px 96px}
h1{font-size:21px;margin:2px 0 10px}
h2{font-size:16.5px;margin:20px 0 8px}
h3{font-size:14.5px;margin:14px 0 6px}
p{line-height:1.45}
.small{font-size:12.5px;color:var(--mut)}
.mut{color:var(--mut)}
.backlink{display:inline-block;margin-bottom:10px;color:var(--blue-tx);text-decoration:none;font-weight:600;font-size:14.5px;min-height:32px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card.tappable{cursor:pointer}
.card.tappable:active{background:var(--hover)}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.title{font-weight:700;font-size:15.5px}
.sub{font-size:13px;color:var(--mut);margin-top:2px;line-height:1.4}
.money{font-weight:800;font-size:15.5px;white-space:nowrap}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-decoration:none;color:var(--ink);display:block}
.tile .num{font-size:24px;font-weight:800}
.tile .lbl{font-size:12.5px;color:var(--mut);margin-top:1px;line-height:1.3}
.tile.alert .num{color:var(--red-tx)}

.chip{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.2px;white-space:nowrap}
.chip.gray{background:var(--gray-bg);color:var(--gray-tx)}
.chip.blue{background:var(--blue-bg);color:var(--blue-tx)}
.chip.green{background:var(--green-bg);color:var(--green-tx)}
.chip.amber{background:var(--amber-bg);color:var(--amber-tx)}
.chip.red{background:var(--red-bg);color:var(--red-tx)}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border:0;border-radius:12px;
  background:var(--navy);color:#fff;font-size:16px;font-weight:700;cursor:pointer;padding:12px 14px;text-decoration:none;text-align:center}
.btn:active{background:var(--navy2)}
.btn.primary{background:var(--amber);color:#231a00}
.btn.primary:active{background:var(--amber-d)}
.btn.green{background:var(--green-deep)}
.btn.ghost{background:var(--card);color:var(--ghost-tx);border:1.5px solid var(--ghost-bd)}
.btn.danger-ghost{background:var(--card);color:var(--red-tx);border:1.5px solid var(--red-tx)}
.btn.small{min-height:42px;font-size:14.5px;width:auto;padding:8px 14px;display:inline-flex}
.btn[disabled]{opacity:.45;pointer-events:none}
.btnrow{display:flex;gap:10px;margin:12px 0}
.btnrow .btn{flex:1}
.stack>*{margin-bottom:10px}

label.flabel{display:block;font-size:13px;font-weight:700;margin:12px 0 5px}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],textarea,select{
  width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;background:var(--field);color:var(--ink);font-family:inherit}
textarea{min-height:74px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--focus);border-color:var(--focus)}

/* loop stepper — the one connected record */
.stepper{display:flex;gap:0;margin:6px 0 2px}
.step{flex:1;text-align:center;position:relative}
.step .dot{width:26px;height:26px;border-radius:50%;background:var(--dot-off);color:var(--dot-tx);font-size:13px;font-weight:800;margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.step.done .dot{background:var(--green-deep);color:#fff}
.step.now .dot{background:var(--amber);color:#231a00;box-shadow:0 0 0 4px var(--amber-bg)}
.step .slbl{font-size:10.5px;color:var(--mut);margin-top:4px;font-weight:600}
.step.done .slbl{color:var(--green-tx)}
.step::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:3px;background:var(--dot-off);z-index:1}
.step:first-child::before{display:none}
.step.done::before{background:var(--green)}

/* estimate / invoice lines */
.lgroup{margin-bottom:6px}
.lgroup h3{display:flex;justify-content:space-between;align-items:baseline}
.litem{display:flex;gap:8px;padding:9px 0;border-bottom:1px dashed var(--line)}
.litem:last-child{border-bottom:0}
.litem .grow{min-width:0}
.litem .lname{font-weight:600;font-size:14.5px}
.litem .ldesc{font-size:12.5px;color:var(--mut);line-height:1.4;margin-top:1px}
.flagbox{background:var(--red-bg);border:1px solid var(--err-line);color:var(--err-tx);border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.45;margin-top:6px}
.totals{border-top:2px solid var(--line);margin-top:10px;padding-top:10px}
.totals .row{justify-content:space-between;padding:3px 0;font-size:14.5px}
.totals .grand{font-size:18px;font-weight:800}

/* contracts (contracts slice): module badges + document body treatment */
.cmod{margin-top:18px}
.cmod:first-of-type{margin-top:8px}
.cmod h3{border-bottom:2px solid var(--navy);padding-bottom:3px;font-size:15px}
.modbadge{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.3px;vertical-align:2px;white-space:nowrap}
.modbadge.law{background:var(--red-bg);color:var(--red-tx)}
.modbadge.derived{background:var(--blue-bg);color:var(--blue-tx)}
.modbadge.job{background:var(--amber-bg);color:var(--amber-tx)}
.modbadge.master{background:var(--gray-bg);color:var(--gray-tx)}
.modbody{white-space:pre-wrap;font-size:13.5px;line-height:1.55;color:var(--ink)}
.docfoot{margin-top:22px;border-top:1px solid var(--line);padding-top:6px;font-size:11px;color:var(--mut)}
.doclogo{max-height:54px;max-width:220px;object-fit:contain;display:block;margin-bottom:6px}
.logobox{border:1.5px dashed var(--line);border-radius:10px;background:#fff;width:230px;height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logobox img{max-height:54px;max-width:220px;object-fit:contain}
.logoframe{position:relative;width:100%;max-width:340px;aspect-ratio:3.6;border:2px solid var(--navy);border-radius:8px;overflow:hidden;background:#fff;margin:0 auto;touch-action:none}
.logoframe img{position:absolute;left:0;top:0;user-select:none;-webkit-user-drag:none}
/* Slice 5 — account polish */
.pwmeter{margin-top:8px}
.pwmeter .pwbar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.pwmeter .pwfill{height:100%;border-radius:99px;transition:width .18s ease}
.pwmeter .pwrow{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font-size:13px}
.pwmeter .pwsug{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.docsheetprev{border:1px solid var(--line);border-radius:10px;background:#fff;color:#1c2333;padding:14px 16px;text-align:left}
.docsheetprev .dp-kind{font-size:11px;font-weight:800;letter-spacing:1.2px;color:#5b6478}
.docsheetprev .dp-name{font-weight:800;font-size:15px;margin-top:2px}
.docsheetprev .dp-meta{font-size:12px;color:#5b6478}
.docsheetprev img{max-height:54px;max-width:220px;object-fit:contain;display:block;margin-bottom:6px}
.docsheetprev .dp-word{font-weight:800;font-size:17px;color:#1c2333;margin-bottom:4px}
.fbchips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 2px}
.fbchip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:13.5px;font-weight:600;cursor:pointer}
.fbchip[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.sessrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.sessrow:first-of-type{border-top:none}
.sigpad{border:1.5px solid var(--line);border-radius:10px;background:#fff;width:100%;height:150px;touch-action:none;display:block}
.sigtyped{font-size:22px;font-style:italic;border-bottom:2px solid var(--ink);padding:6px 4px;min-height:30px}
@media print{ .cmod h3{break-after:avoid} .modbody{font-size:12.5px} }

/* customer-facing documents */
/* Paper in both themes (see the dark block note): a document reads
   and prints as a document. Ink is pinned with the paper. */
.doc{
  --ink:#1c2333; --mut:#5b6478; --line:#dde2ec; --card:#fff; --field:#fff;
  --green-tx:#146536; --blue-tx:#2456a6; --red-tx:#c0392b; --amber-tx:#8a5c00;
  --warn-tx:#6b4e00; --err-tx:#7c2418; --ok-tx:#14532d;
  --green-bg:#e5f4ec; --red-bg:#fbeae7; --blue-bg:#e7eefb; --amber-bg:#fdf1da;
  --gray-bg:#e8ebf2; --gray-tx:#45506a; --tint:#f4f7fc; --seg-bg:#e4e8f0;
}
.doc{background:#fff;color:#1c2333;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.doc .dochead{border-bottom:3px solid var(--navy);padding-bottom:10px;margin-bottom:12px}
.doc .dochead .co{font-size:18px;font-weight:800}
.sim-banner{background:#231a00;color:var(--amber);font-weight:800;font-size:12px;letter-spacing:.8px;text-align:center;padding:8px;border-radius:10px;margin-bottom:12px}

/* checklist */
.check{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;min-height:48px}
.check:last-child{border-bottom:0}
.check .box{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;margin-top:1px}
.check.done .box{background:var(--green-deep);border-color:var(--green-deep)}
.check.done .ctext{color:var(--mut);text-decoration:line-through}

/* Job Documents Hub (A-19): one row per stored document — preview or
   icon, the filing facts, actions stacked at the edge. */
.docrow{display:flex;gap:12px;align-items:flex-start}
.docprev{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line);flex:none}
.docicon{width:64px;height:64px;border-radius:10px;border:1px solid var(--line);background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
.btncol{display:flex;flex-direction:column;gap:6px;flex:none}
.danger-text{color:var(--red-tx)}
.photos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.photos figure{margin:0}
.photos img{width:100%;height:92px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block}
.photos figcaption{font-size:11px;color:var(--mut);margin-top:3px}

.activity{font-size:13.5px}
.activity .aItem{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.activity .aItem:last-child{border-bottom:0}
.activity .aWhen{flex:none;width:74px;color:var(--mut);font-size:12px;padding-top:1px}

/* bottom tabs */
#tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--card);border-top:1.5px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
#tabbar a{flex:1;text-align:center;padding:8px 2px 9px;color:var(--mut);text-decoration:none;font-size:11px;font-weight:700}
#tabbar a .tab-ico{display:block;font-size:19px;line-height:1.15}
#tabbar a.on{color:var(--on-tx)}
#tabbar a.on .tab-ico{color:var(--tab-ico-on)}

/* sheet (modal) */
#sheet-root:empty{display:none}
.scrim{position:fixed;inset:0;background:rgba(15,22,40,.55);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.sheet h2{margin-top:0}
.cardbox{border:1.5px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.processing{text-align:center;padding:26px 0}
.spinner{width:38px;height:38px;border:4px solid var(--line);border-top-color:var(--spin);border-radius:50%;margin:0 auto 12px;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bigcheck{width:64px;height:64px;border-radius:50%;background:var(--green-deep);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;margin:8px auto 10px}

#toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:86px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:80;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.seg{display:flex;background:var(--seg-bg);border-radius:11px;padding:3px;gap:3px;margin-bottom:12px}
.seg button{flex:1;border:0;background:transparent;min-height:40px;border-radius:9px;font-size:14px;font-weight:700;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--seg-on);color:var(--on-tx);box-shadow:0 1px 4px rgba(20,33,61,.18)}
.empty{padding:22px 10px;text-align:center;color:var(--mut);font-size:14.5px;line-height:1.5}
a.plain{color:var(--blue-tx);font-weight:600;text-decoration:none}
/* Definition grid for entity detail cards (2026-10-16 card formatting
   pass): one fixed, quiet label column; values left-aligned against it;
   uniform row rhythm. Labels never repeat the card heading.
   2026-10-17 fix (defect D1): the label column is sized to the longest
   label in the app ("Contractor address of record", contract document)
   and labels may WRAP inside it — a nowrap label in a too-narrow column
   rendered underneath its value on the contract detail at both widths.
   On phone widths the column narrows and long labels wrap to two lines
   instead of ever overlapping the value. */
.kv{display:grid;grid-template-columns:198px minmax(0,1fr);column-gap:14px;row-gap:6px;font-size:14px;line-height:1.45;align-items:baseline}
.kv .dk{color:var(--mut);font-weight:600;font-size:12.5px;letter-spacing:.02em;overflow-wrap:break-word}
.kv .dv{min-width:0;overflow-wrap:break-word}
.kv .dv .chip{white-space:normal}
@media (max-width:560px){
  .kv{grid-template-columns:128px minmax(0,1fr)}
}
.card>h3:first-child{margin-top:0}

@media print{
  #tabbar,#topbar,#toast,.noprint{display:none!important}
  body{background:#fff}
  #phone{box-shadow:none;max-width:none}
  main{padding:0}
}

/* ---------- Auth, notices, share boxes, tiers ---------- */
input[type=password]{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-size:16px;background:var(--field);color:var(--ink);font-family:inherit}
input[type=password]:focus{outline:2px solid var(--focus);border-color:var(--focus)}

#auth-root{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;padding:30px 16px 48px;box-shadow:var(--frame-shadow)}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-brand .logo{font-size:26px;font-weight:800;color:var(--brand-tx);letter-spacing:.2px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.auth-card h1{font-size:19px;margin-top:0}
.auth-links{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:14px}
.auth-links a{color:var(--blue-tx);font-weight:600;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.form-err{color:var(--red-tx);font-size:13.5px;line-height:1.4;margin-top:10px;white-space:pre-wrap}
.form-ok{color:var(--green-tx);font-size:13.5px;line-height:1.4;margin-top:10px}

.notice{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;margin-bottom:12px}
.notice.warn{background:var(--amber-bg);border-color:var(--warn-line);color:var(--warn-tx)}
.notice.err{background:var(--red-bg);border-color:var(--err-line);color:var(--err-tx)}
.notice.ok{background:var(--green-bg);border-color:var(--ok-line);color:var(--ok-tx)}
.notice b{font-weight:800}

/* Writing assistance (2026-10-17): the proposed-edit panel. Visually
   distinct from the field it proposes to change — dashed amber frame,
   tinted ground, highlighted changed words — so a suggestion can
   never be mistaken for the user's own text. */
.wa-proposal{border:1.5px dashed var(--amber);background:var(--amber-bg);border-radius:12px;padding:12px 14px;margin-top:8px}
.wa-head{font-weight:800;font-size:13.5px;margin-bottom:6px}
.wa-text{white-space:pre-wrap;line-height:1.55;font-size:14.5px}
.wa-text mark{background:var(--amber);color:#231a00;border-radius:3px;padding:0 2px}

.linkbox{display:flex;gap:8px;align-items:stretch;margin:10px 0}
.linkbox input{flex:1;min-width:0;min-height:46px;font-size:13px}
.linkbox .btn{width:auto;flex:none}
.sharelabel{font-size:12.5px;font-weight:700;color:var(--mut);letter-spacing:.3px;text-transform:uppercase}

.tier-price{display:flex;gap:8px;align-items:flex-end}
.tier-price .grow{min-width:0}
.placeholder-badge{background:var(--amber);color:#231a00;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;letter-spacing:.5px;vertical-align:2px}
.src-chip{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--blue-bg);color:var(--blue-tx);letter-spacing:.3px;vertical-align:1px}
.dirty-note{font-size:12.5px;color:var(--amber-tx);font-weight:700;min-height:16px}

@media print{
  .doc{border:0;border-radius:0}
  .linkbox,.auth-links{display:none!important}
}

/* ---------- Guided Builder (Phase C): guided sequence, responsive ----------
   Screen doctrine: the Builder is a working surface, not a phone form.
   Small screens: one item at a time, steps as a horizontal rail.
   Wide screens: the shell widens, steps become a left rail, items lay out
   in two columns — the layout reorganizes, it does not just magnify. */
@media (min-width:900px){
  body.bp-wide #phone{max-width:1160px}
  body.bp-wide #tabbar{max-width:1160px}
  body.bp-wide .builder-wrap{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:start}
  body.bp-wide .builder-steps{display:block;overflow:visible;position:sticky;top:86px}
  body.bp-wide .builder-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  body.bp-wide .builder-items .card{margin-bottom:0}
}
.builder-steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px}
.bstep{flex:none;display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card);color:var(--mut);
  border-radius:999px;padding:8px 13px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.bstep .bstep-n{width:22px;height:22px;border-radius:50%;background:var(--dot-off);color:var(--dot-tx);font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.bstep.on{border-color:var(--navy);color:var(--on-tx)}
.bstep.on .bstep-n{background:var(--amber);color:#231a00}
@media (min-width:900px){
  .bstep{display:flex;width:100%;border-radius:12px;margin-bottom:6px;text-align:left}
}
.explainer{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin:10px 0}
.explainer summary{font-size:13px;font-weight:700;color:var(--blue-tx);cursor:pointer;min-height:28px}
.explainer p{font-size:13px;line-height:1.5;color:var(--ink);margin:7px 0}
.builder-main .card .btn{margin-top:10px}

/* ---------- Guided Estimator (Phase C): estimate-new + workspace ----------
   Same screen doctrine as the Builder: narrow screens stack rail / main /
   summary in reading order; wide screens (body.bp-wide) run the three-zone
   grid 250px | 1fr | 340px with a sticky summary rail. */
.est-wrap{display:block}
@media (min-width:900px){
  body.bp-wide .est-wrap{display:grid;grid-template-columns:250px 1fr 340px;gap:16px;align-items:start}
  body.bp-wide .est-summary{position:sticky;top:86px}
  body.bp-wide .est-rail{position:sticky;top:86px}
}
@media (max-width:899px){
  .est-wrap>*{margin-bottom:4px}
}

/* estimate-new: job-type cards + instrument radios */
.est-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:6px}
.est-type-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:13px;cursor:pointer}
.est-type-card .sub{margin-top:5px}
.est-type-card.on{border-color:var(--navy);background:var(--tint);box-shadow:0 0 0 2px var(--amber-bg),0 2px 8px rgba(20,33,61,.14)}
.est-inst{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.est-inst:last-child{border-bottom:0}
.est-inst input{width:22px;height:22px;flex:none;margin-top:2px}

/* workspace rail */
.est-sec-btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--card);
  border-radius:11px;padding:10px 11px;margin-bottom:6px;cursor:pointer;font-family:inherit;color:var(--ink)}
.est-sec-btn.on{border-color:var(--navy);background:var(--tint);box-shadow:inset 3px 0 0 var(--amber)}
.est-sec-btn.est-archived{opacity:.55}
.est-sec-tools{margin:-2px 0 8px;text-align:right}
.est-jump{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--blue-tx);font-weight:600;
  font-size:13.5px;font-family:inherit;padding:7px 4px;cursor:pointer;border-bottom:1px dashed var(--line)}
.est-jump:last-child{border-bottom:0}

/* component cards + disposition segmented control */
.est-comp{border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;margin:10px 0;background:var(--card)}
.est-seg{display:flex;background:var(--seg-bg);border-radius:11px;padding:3px;gap:3px}
.est-seg button{flex:1;border:0;background:transparent;min-height:38px;border-radius:9px;font-size:13px;font-weight:700;color:var(--mut);cursor:pointer;font-family:inherit;padding:6px 4px}
.est-seg button.on{background:var(--seg-on);color:var(--on-tx);box-shadow:0 1px 4px rgba(20,33,61,.18)}
.est-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 0 2px;cursor:pointer}
.est-opt input{width:22px;height:22px;flex:none;margin-top:1px}
.est-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px;margin-top:6px;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:10px}
.est-price .flabel{margin:0 0 4px}
.est-price input,.est-price select{min-height:42px}

/* allowances + job-level lines */
.est-al-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.est-al-row:last-of-type{border-bottom:0}
.est-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px 10px}

/* summary stack + gates */
.est-total-big{font-size:23px}
.est-gate{display:flex;gap:9px;align-items:flex-start;border-radius:10px;padding:9px 11px;margin-bottom:7px;font-size:13.5px;line-height:1.4;border:1px solid var(--line)}
.est-gate .est-gate-ico{flex:none;font-size:14px;line-height:1.3}
.est-gate.block{background:var(--red-bg);border-color:var(--err-line);color:var(--err-tx)}
.est-gate.warn{background:var(--amber-bg);border-color:var(--warn-line);color:var(--warn-tx)}
.est-gate.ok{background:var(--green-bg);border-color:var(--ok-line);color:var(--ok-tx)}
.est-gate .sub{color:inherit;opacity:.85}

/* read-only (sent and beyond): freeze every control in the workspace */
.est-ro input,.est-ro textarea,.est-ro select{pointer-events:none;background:var(--seg-bg);color:var(--mut)}
.est-ro button{pointer-events:none;opacity:.45}
.est-ro .est-sec-btn,.est-ro .est-jump{pointer-events:auto;opacity:1}

/* ==================================================================
   SHELL RESPONSIVE REWORK (2026-10-16 — Rob's screen doctrine).
   The frame detects the screen and REORGANIZES; it never magnifies.
   Below 1024px the phone form stands exactly as built: a single
   centered column, bottom tab bar, one thing at a time. At 1024px and
   up the same shell becomes a desktop app: the tab bar turns into a
   persistent left navigation rail, the frame fills the viewport (no
   centered column, no gray gutters), and content reorganizes into
   the available width — stat tiles go four-across, card lists flow
   into multi-column grids (.list-grid), record pages split into a
   main column + side column (.detail-grid), dashboard panels pair
   up (.dash-cols). Font sizes and touch targets do not change; the
   ORGANIZATION changes. Placed last so it overrides the older
   route-based bp-wide shell widths at desktop sizes.
   ================================================================== */
.rail-brand{display:none}
@media (min-width:1024px){
  body{background:var(--bg)}
  #phone{max-width:none;margin:0;box-shadow:none;border-left:none;border-right:none}
  body.bp-wide #phone{max-width:none}
  #topbar{margin-left:232px;padding:16px 30px 14px}
  #topbar-title{display:none}
  main{margin-left:232px;padding:22px 30px 48px;max-width:1600px}
  #tabbar{left:0;top:0;bottom:0;transform:none;width:232px;max-width:232px;
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;
    padding:20px 14px;background:var(--rail-bg);border-top:none;border-right:1px solid var(--rail-line)}
  body.bp-wide #tabbar{max-width:232px}
  #tabbar a{flex:none;display:flex;align-items:center;gap:12px;text-align:left;
    padding:11px 12px;border-radius:10px;color:#c9d3e8;font-size:14px}
  #tabbar a .tab-ico{display:inline;font-size:17px;line-height:1}
  #tabbar a.on{background:rgba(255,255,255,.13);color:#fff}
  #tabbar a.on .tab-ico{color:var(--amber)}
  .rail-brand{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:.2px;padding:0 12px 18px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;align-items:start}
  .list-grid .card{margin-bottom:0}
  .detail-grid{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:16px;align-items:start}
  .dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .dash-cols h2{margin-top:4px}
  .photos{grid-template-columns:repeat(4,1fr)}
  .sheet{max-width:640px}
  #toast{bottom:30px}
}
@media print{
  main{margin-left:0;max-width:none}
  #topbar{margin-left:0}
}

/* ---------- Alerts bell + welcome-verification row (§A-8) ----------
   The bell exists at both shell widths: in the phone top bar, and in
   the desktop rail header (where the top-bar bell steps aside). The
   verification chip renders immediately next to the welcome button on
   the record (.welcome-row) — state where the action lives. */
.bell-btn{position:relative;background:transparent;border:0;cursor:pointer;font-family:inherit;color:inherit}
#bell-top{position:absolute;right:12px;top:10px;font-size:19px;padding:6px 8px;border-radius:10px}
.rail-bell{display:none}
.bell-badge{position:absolute;top:1px;right:1px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
  min-width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.bell-badge[hidden]{display:none}
.rail-bell .bell-badge{position:static;margin-left:auto}
.welcome-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.alert-item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.alert-item:last-child{border-bottom:0}
.alert-item .a-ico{font-size:17px;flex:none}
.alert-item.unread .a-msg{font-weight:700}
@media (min-width:1024px){
  #bell-top{display:none}
  .rail-bell{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    padding:11px 12px;border-radius:10px;color:#c9d3e8;font-size:14px;font-weight:700;margin-bottom:8px}
  .rail-bell:hover{background:rgba(255,255,255,.08)}
}

/* ---------- Standard Fancy Baseline shell additions (§A-12) ---------- */
/* Skeleton loading blocks */
.skel{background:linear-gradient(100deg,var(--line) 40%,var(--skel-mid) 50%,var(--line) 60%);background-size:200% 100%;
  border-radius:10px;min-height:18px;margin:10px 0;animation:skelPulse 1.2s ease-in-out infinite}
.skel.tall{min-height:110px}
@keyframes skelPulse{0%{background-position:120% 0}100%{background-position:-80% 0}}
/* Global search */
.glob-wrap{position:relative}
.glob-results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 14px 34px rgba(16,24,40,.16);z-index:60;overflow:hidden}
.glob-item{display:flex;gap:10px;align-items:center;padding:9px 12px;cursor:pointer}
.glob-item:hover{background:var(--hover)}
.glob-item .g-type{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mut);width:64px}
.glob-item .g-label{font-weight:600;font-size:14px}
.glob-item .g-sub{font-size:12.5px;color:var(--mut)}
.glob-none{padding:10px 12px;font-size:13px;color:var(--mut)}
.glob-rail{display:none}
.glob-rail input{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#eef2fb}
.glob-rail input::placeholder{color:#93a3c4}
.glob-rail .glob-results{background:#16233d;border-color:rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.glob-rail .glob-item:hover{background:rgba(255,255,255,.07)}
.glob-rail .glob-item .g-label{color:#eef2fb}
.glob-rail .glob-item .g-sub,.glob-rail .glob-none{color:#93a3c4}
@media (min-width:1024px){
  .glob-rail{display:block}
  .glob-top{display:none}
}
@media (max-width:1023px){
  .glob-top{margin:8px 12px 0}
}
/* Inline field errors — plain language beside the field, never a lone box */
.field-err{color:var(--red-tx);font-size:12.5px;font-weight:600;margin-top:5px}
[aria-invalid="true"]{border-color:var(--red-tx) !important}
/* Picker rows (typeaheads) */
.pick-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;margin-top:6px;cursor:pointer;background:var(--card)}
.pick-item:hover{border-color:var(--line2)}
.pick-item.on{border-color:var(--green);background:var(--pick-on)}
/* Geocoder chooser */
.geo-found{border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px;background:var(--tint)}
/* Keyboard focus is always visible */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* §A-17 pipeline surfaces: stage filter chips, tone dots, action rows */
.stagefilter{display:flex;gap:6px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.stagefilter::-webkit-scrollbar{display:none}
.stagebtn{flex:none;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.stagebtn.on{border-color:var(--navy);background:var(--blue-bg)}
.stagedot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#98a2b8;vertical-align:middle;flex:none}
.stagedot.blue{background:var(--blue)}
.stagedot.amber{background:#d9930d}
.stagedot.green{background:var(--green)}
.stagedot.red{background:var(--red)}
.stagedot.gray{background:#98a2b8}
.actionrow{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.actionrow:last-child{border-bottom:none}

/* Campaigns (§A-18): email preview frame + people picker rows */
.campframe{width:100%;height:430px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pickrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;cursor:pointer}
.pickrow input{width:19px;height:19px;flex:none}

/* brand logo (Datum B) — assets in /logo-*.svg, see files/brand/brand-sheet.html */
.brand-login{height:108px;width:auto;max-width:78vw;display:block;margin:0 auto}
.brand-top{height:25px;width:auto;display:block}
.brand-rail{height:30px;width:auto;display:block}

/* ---- A-21/A-21b: entitlements + platform admin ---- */
#tabbar a.locked { opacity: .62; }
#tabbar a.locked .tab-lock { font-size: 10px; margin-left: 3px; }
.admin-chip { font-size: 11px; font-weight: 700; letter-spacing: .02em; background: #2b2118; color: #f3c969; border: 1px solid #6b5320; border-radius: 999px; padding: 2px 9px; margin-left: 8px; white-space: nowrap; }
.imp-banner { background: #7c2d12; color: #fff7ed; padding: 9px 14px; font-size: 13.5px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.imp-banner[hidden] { display: none; }
.admin-chip[hidden] { display: none; }
#tabbar a[hidden] { display: none; }
.imp-banner .btn { margin-left: auto; }
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.admin-nav button { border: 1px solid var(--line, #ddd); background: var(--card, #fff); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; cursor: pointer; }
.admin-nav button.on { background: #1f2937; color: #fff; border-color: #1f2937; }
table.admintable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.admintable th, table.admintable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #e5e0d5); vertical-align: top; }
table.admintable th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .65; }
.feat-matrix td.feat-cell { text-align: center; }
.feat-matrix input[type="checkbox"] { width: 18px; height: 18px; }
/* A-21b connection pass: the floating feedback door (TPN pattern) —
   present on every app view incl. phone; sits above the mobile tab
   bar, clear of the one-create-CTA which lives inside views. */
#fb-float { position: fixed; right: 14px; bottom: 78px; z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line, #d7dce3); background: var(--card, #fff); color: var(--ink, #1c2733);
  border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 30, 45, .18); }
#fb-float:active { transform: translateY(1px); }
@media (min-width: 900px) { #fb-float { bottom: 20px; } }
.lock-hero { text-align: left; }
.lock-ico { font-size: 30px; }
.src-chip { font-size: 11px; border-radius: 999px; padding: 1px 8px; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; white-space: nowrap; }
.src-chip.src-override { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.src-chip.src-none { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

/* Theme control (2026-10-17): one compact button, three states —
   Auto (follows the device), Light, Dark. Lives in the phone topbar,
   the desktop rail, and the customer portal header; Setup carries the
   full three-way picker (.theme-pick). */
.theme-btn{position:absolute;right:64px;top:10px;background:transparent;border:0;cursor:pointer;
  font-family:inherit;color:#c9d3e8;font-size:15px;padding:6px 8px;border-radius:10px}
.theme-btn .theme-lbl{font-size:11px;font-weight:700;letter-spacing:.3px;vertical-align:2px;margin-left:2px}
.theme-rail{display:none}
@media (min-width:1024px){
  /* Only the APP's topbar button yields to the rail control at
     desktop widths — the portal and auth screens have no rail, so
     their theme buttons stay. */
  #theme-top{display:none}
  .theme-rail{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;
    border:0;padding:11px 12px;border-radius:10px;color:#c9d3e8;font-size:14px;font-weight:700;
    cursor:pointer;font-family:inherit;margin-bottom:8px}
  .theme-rail:hover{background:rgba(255,255,255,.08)}
  .theme-rail .theme-lbl{margin-left:auto;font-size:11px;letter-spacing:.3px;color:#93a3c4}
}
#theme-portal{position:absolute;right:12px;top:10px}
#auth-root{position:relative}
.auth-theme{position:absolute;right:16px;top:16px;color:var(--mut)}
.theme-pick{display:flex;gap:8px}
.theme-pick button{flex:1;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:11px;min-height:48px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;padding:8px 6px}
.theme-pick button.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.theme-pick .tp-sub{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin-top:2px}
/* Login logo per theme: the stacked mark is navy artwork (invisible
   on the dark auth ground), so dark swaps to the reversed variant —
   same treatment the rail/topbar lockups get by always sitting on
   dark chrome. */
.brand-login-rev{display:none}
:root[data-theme="dark"] .brand-login{display:none}
:root[data-theme="dark"] .brand-login-rev{display:block}

/* ---- Standalone platform admin console (/admin, Rob 2026-10-17) ----
   The console is its own page at its own address — its own shell,
   sign-in, and client (public/admin.html + admin.js) — reusing the
   product tokens and components above (cards, kv grids, chips, admin
   tables, nav pills). There is no admin view inside the company app;
   the app's ★ Admin links are doors that land here. */
#tabbar a.rail-admin-top{display:none}
.adm-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  background:var(--topbar-bg);color:#fff;padding:10px 16px;border-bottom:1px solid var(--rail-line)}
.adm-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.adm-brand-tag{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(245,166,35,.18);border:1px solid rgba(245,166,35,.5);color:#f3c969;
  border-radius:999px;padding:2px 9px;white-space:nowrap}
.adm-header-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.adm-header-right .small{color:#c9d3e8}
.adm-header .btn.ghost{color:#dbe4f5;border-color:#5b6f9e;background:transparent}
.adm-theme{position:static;color:#c9d3e8}
.adm-frame{max-width:1160px;margin:0 auto;padding:20px 16px 64px}
.adm-signin{max-width:430px;margin:7vh auto 0;padding:0 16px}
#adm-toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:30px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;z-index:90;max-width:88vw;text-align:center}
#adm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tile-btn{font-family:inherit;text-align:left;cursor:pointer;width:100%}
.tile .num-sm{font-size:15px;padding-top:5px;word-break:break-all}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.board-grid{display:grid;gap:12px;margin-bottom:12px}
@media (min-width:900px){.board-grid{grid-template-columns:1fr 1fr}}
/* Charts — hand-rolled, zero-dependency (Fix 3). Fills are theme
   tokens retuned per theme for AA label contrast; every label is real
   text next to its mark, never color alone. */
.bg-c1{background:var(--amber)} .bg-c2{background:var(--blue-tx)} .bg-c3{background:var(--green-tx)}
.bg-c4{background:var(--red-tx)} .bg-c5{background:var(--mut)} .bg-c6{background:var(--amber-tx)}
.seg-c1{stroke:var(--amber)} .seg-c2{stroke:var(--blue-tx)} .seg-c3{stroke:var(--green-tx)}
.seg-c4{stroke:var(--red-tx)} .seg-c5{stroke:var(--mut)} .seg-c6{stroke:var(--amber-tx)}
.donut-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut{flex:none}
.donut-num{font-size:25px;font-weight:800;fill:var(--ink)}
.donut-lbl{font-size:10.5px;fill:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.donut-legend{flex:1;min-width:170px}
.lg-row{display:flex;gap:8px;align-items:center;font-size:13.5px;padding:2.5px 0}
.lg-dot{width:11px;height:11px;border-radius:3px;flex:none}
.colchart{display:flex;align-items:flex-end;gap:5px;height:158px}
.wk{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.wk-bars{display:flex;align-items:flex-end;gap:2px;height:126px}
.wk-bar{width:9px;border-radius:3px 3px 0 0}
@media (max-width:600px){.wk-bar{width:6px}}
.wk-lbl{font-size:10px;color:var(--mut);margin-top:5px;white-space:nowrap}
.hbar-row{display:grid;grid-template-columns:118px 1fr 32px;gap:9px;align-items:center;margin:5px 0;font-size:13px}
.hbar-track{background:var(--seg-bg);border-radius:6px;height:14px;overflow:hidden}
.hbar-fill{height:100%;border-radius:6px}
.hbar-n{font-weight:700;text-align:right}
.splitbar{display:flex;height:20px;border-radius:8px;overflow:hidden;background:var(--seg-bg)}
.split-paid{background:var(--green-tx)}
.split-owed{background:var(--amber)}
@media (max-width:600px){
  .adm-brand-tag{display:none}
  .adm-header-right .small{display:none}
  .adm-app-link{display:none}
  .adm-frame{padding:14px 10px 56px}
}
/* The ★ Platform admin door sits directly under the rail brand (top of
   the rail, above Alerts) for platform-admin sessions only — company
   users never render it. On phone it stays out of the bottom bar; the
   bar's own Admin tab is the phone door. */
@media (min-width:1024px){
  #phone #tabbar a.rail-admin-top:not([hidden]){display:flex;align-items:center;gap:12px;text-align:left;
    padding:11px 12px;border-radius:10px;font-size:14px;font-weight:800;color:#fff;
    background:rgba(245,166,35,.16);border:1px solid rgba(245,166,35,.45);margin:2px 0 10px}
  #phone #tabbar a.rail-admin-top .tab-ico{color:var(--amber)}
  #phone #tabbar a.rail-admin-top.on{background:rgba(245,166,35,.3)}
}

/* Permits & AHJ + simple route (2026-10-17) */
.gate-note{background:var(--amber-bg);border:1px solid var(--warn-line);color:var(--ink);
  border-radius:10px;padding:10px 12px;font-size:13.5px;margin:8px 0}
.permit-row{border-top:1px solid var(--line);padding:10px 0}
.permit-row:first-of-type{border-top:none}
.insp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);
  border-radius:8px;margin-top:6px;cursor:pointer;background:var(--card2,var(--paper))}
.insp-row:hover{border-color:var(--amber)}
.route-stop{display:flex;gap:10px;align-items:flex-start;background:var(--card,var(--paper));
  border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.rt-grip{cursor:grab;font-size:18px;line-height:1;padding:6px 2px;color:var(--mut);touch-action:none;user-select:none}
.rt-num{font-weight:800;font-size:18px;background:var(--navy);color:#fff;border-radius:50%;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.rt-main{flex:1;min-width:0}
.rt-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
@media (max-width:560px){ .route-stop{flex-wrap:wrap} .rt-btns{width:100%} }

/* ---- A-20 legal warning cards + A-16b advance notices ---- */
.lw-card{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:10px;
  padding:10px 12px;margin:8px 0;background:var(--card)}
.lw-card.lw-hard{border-left-color:var(--red,#d33)}
.lw-card.lw-information{border-left-color:var(--gray,#888)}
.lw-sum{font-size:14.5px;color:var(--ink);line-height:1.45}
.lw-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px}
.lw-chip{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;font-weight:700;
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--ink);background:var(--bg)}
.lw-agency{font-size:12.5px;color:var(--sub)}
.lw-class{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.lw-detail{font-size:13px;color:var(--sub);margin-top:5px;line-height:1.45}
.lw-btns{margin-top:8px}
.lw-full{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px;font-size:13px;color:var(--ink);line-height:1.5}
.lw-legaltext{white-space:pre-wrap}
.legal-foot{font-size:11px;line-height:1.45;color:var(--sub);opacity:.75;margin-top:8px}
.lw-ignored{font-size:13px;color:var(--sub);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}
.ob-row{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:6px 0;background:var(--card)}

/* ===== §DOC document design (document-design pass 2026-10-17) =====
   Screen/print polish for customer documents rendered in-app (.doc):
   tabular numerals everywhere money appears, totals that never
   split across a printed page, headings kept with their content,
   and the print sheet set to U.S. Letter with safe margins. The
   standalone/PDF system lives server-side in app/docs.php
   (bp_doc_design_css) — these rules mirror it for in-app renders. */
.doc{font-variant-numeric:tabular-nums lining-nums}
.doc table{font-variant-numeric:tabular-nums lining-nums}
.doc .dochead .sub{line-height:1.5}
.doc h2,.doc h3{break-after:avoid;page-break-after:avoid}
.doc tr{break-inside:avoid;page-break-inside:avoid}
.doc .totals-wrap,.doc .sigblock{break-inside:avoid;page-break-inside:avoid}
@page{size:Letter;margin:17mm 16mm 19mm}
@media print{
  .doc{font-size:12.5px;line-height:1.5}
  .doc .docfoot{font-size:10.5px;color:#4a5568}
}

/* ---- Corner theme toggle (Rob's product standard, 2026-10-18) ----
   One persistent toggle in the top-right corner of every shell,
   matching the TradePrepNow reference: fixed at top:12px / right:12px,
   z-index 9999, a 40px circular glass button, and an icon that shows
   the current mode (sun = light / moon = dark / sparkles = auto).
   One tap cycles auto -> dark -> light -> auto (the cycle order lives
   in the Theme modules). The corner button is the shell's theme
   control on the sign-in screens and in the app, so the in-topbar,
   in-header and auth-card theme buttons it supersedes are retired
   below -- their elements stay in the markup, hidden and inert, so
   the existing theme paint/wiring code is untouched. The Setup
   three-way picker and the desktop rail button remain as secondary
   controls. The phone topbar's bell shifts left to clear the corner,
   and the toggle never prints (documents print clean, as before). */
.theme-corner{position:fixed;top:12px;right:12px;z-index:9999;width:40px;height:40px;
  border-radius:50%;background:rgba(128,128,128,.2);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);border:1px solid rgba(128,128,128,.3);font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  line-height:1;font-family:inherit;color:inherit}
#theme-top,#theme-auth,#theme-portal{display:none}
#bell-top{right:60px}
.adm-theme{display:none}
@media print{ .theme-corner{display:none!important} }

/* ---- Guided first job (0035) ----
   Checklist card on the dashboard + the coach layer: one spotlight,
   one short instruction, no Next button on action steps. The corner
   theme toggle stays the shell's top-right control; the coach tip
   docks at the bottom (or top when the target is low) and never
   covers the corner. */
.guide-card{border:2px solid var(--amber,#b97d1e)}
.guide-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.guide-rows{margin:10px 0}
.guide-row{display:flex;gap:9px;align-items:center;padding:5px 0;font-size:15px;color:var(--mut,#7d7462)}
.guide-row .guide-mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--line,#ddd);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.guide-row.done{color:var(--ink)}
.guide-row.done .guide-mark{background:#17603c;color:#fff;border-color:#17603c}
.guide-row.cur{color:var(--ink);font-weight:700}
.guide-row.cur .guide-mark{border-color:#d8622b;color:#d8622b;animation:guideblink 1.2s infinite}
@keyframes guideblink{0%,100%{opacity:1}50%{opacity:.35}}
#guide-spot{position:fixed;z-index:9000;border-radius:14px;pointer-events:none;opacity:0;transition:all .45s cubic-bezier(.4,.8,.3,1),opacity .3s;box-shadow:0 0 0 4000px rgba(7,9,13,.62),inset 0 0 0 2.5px rgba(240,179,94,.95)}
#guide-tip{position:fixed;z-index:9001;left:14px;right:14px;max-width:560px;margin:0 auto;background:#fffdf7;color:#2b2620;border-radius:18px;padding:15px 17px 13px;box-shadow:0 18px 44px rgba(0,0,0,.42);display:none}
#guide-tip h2{font-size:18px;font-weight:900;margin:5px 0 5px;line-height:1.25}
#guide-tip p{font-size:14.5px;line-height:1.5;color:#55483a;margin:0}
.guide-kick{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.14em;color:#b97d1e;text-transform:uppercase}
.guide-x{letter-spacing:.02em;text-transform:none;font-size:13px;color:#8a8172;background:none;border:0;font-weight:700;cursor:pointer;padding:2px 0 2px 10px}
.guide-turn{display:flex;margin-top:10px;font-size:12px;font-weight:900;letter-spacing:.12em;color:#17603c;text-transform:uppercase;align-items:center;gap:7px}
.guide-dot{width:9px;height:9px;border-radius:50%;background:#17603c;animation:guideblink 1.1s infinite}
.guide-links{margin-top:9px;font-size:13px}
.guide-links a{color:#8a8172}
@media print{ #guide-spot,#guide-tip{display:none!important} }

/* States & research (admin) — the map speaks TradePrepNow's front-door
   language: us-atlas geometry on a navy panel, tier fills, hover lift,
   white-glow selection, fat invisible strokes on the small states. */
.bpst-grid{display:grid;gap:14px;margin-bottom:14px}
@media (min-width:1000px){.bpst-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.bpst-mapPanel{background:#0e2240;border-radius:14px;padding:16px}
.bpst-map{width:100%;height:auto;display:block}
.bpst-map .st{cursor:pointer;transition:filter .15s}
.bpst-map .st:hover{filter:brightness(1.28)}
.bpst-map .st:focus-visible{outline:2px solid #fff;outline-offset:1px}
.bpst-map .st-live{fill:#2E8FD4;stroke:#CFE9FA;stroke-width:.75}
.bpst-map .st-dormant{fill:#E8A33D;stroke:#F7DFAE;stroke-width:.75}
.bpst-map .st-unresearched{fill:#4A5B70;stroke:#0E2240;stroke-width:.75}
.bpst-map .st-tiny{stroke:rgba(0,0,0,0);stroke-width:12}
.bpst-map .selected{filter:brightness(1.3) drop-shadow(0 0 6px #fff)}
.bpst-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;color:#dbe7f3;font-size:13px}
.bpst-sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bpst-sw.sw-live{background:#2E8FD4}
.bpst-sw.sw-dormant{background:#E8A33D}
.bpst-sw.sw-unresearched{background:#4A5B70}
.bpst-mapHint{color:#9fb8d0;font-size:13px;margin:10px 0 0}
.bpst-detail h4{margin:16px 0 6px}
.bpst-row{cursor:pointer}
.bpst-row.sel td{background:var(--card2,#eef3f8)}