:root{
  --teal:#0d7d7d; --teal-d:#0a6060; --teal-l:#e5f2f2;
  --amber:#e0982d; --amber-d:#b9771a; --amber-l:#fbf0dc;
  --silver:#aab2b8; --silver-l:#eef1f3;
  --ink:#16202a; --muted:#5d6b78; --line:#e2e7eb; --bg:#f6f8f9; --card:#ffffff;
  --ok:#0d7d7d; --attn:#b9771a;
  --radius:14px; --maxw:620px;
}
@media (prefers-color-scheme: dark){
  :root{
    --teal:#2fb6b6; --teal-d:#1e8f8f; --teal-l:#10302f;
    --amber:#f0ad4e; --amber-d:#d4922f; --amber-l:#2e2410;
    --ink:#e9eef1; --muted:#9fb0bc; --line:#263038; --bg:#0e161c; --card:#16212a;
    --silver:#5d6b78; --silver-l:#1c272f;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.45;
  -webkit-font-smoothing:antialiased; padding-bottom:84px;
}
a{color:var(--teal); text-decoration:none}

/* Brand mark: a teal "keel"/wave arc */
.brand-mark{display:inline-block;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 50% 120%, var(--amber) 0 30%, var(--teal) 31% 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.brand-mark.big{width:56px;height:56px;margin:0 auto}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700}
.brand-name{letter-spacing:.2px}
.link-btn{background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer}
.logout{margin:0}

.content{max-width:var(--maxw);margin:0 auto}
.page{padding:18px 16px}
.h-page{font-size:1.5rem;margin:.2em 0 .6em}
.h-sec{font-size:1.05rem;margin:1.4em 0 .5em;display:flex;align-items:center;gap:8px}

/* Cards */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cards.two{margin:14px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.card-big{font-size:1.7rem;font-weight:700;margin-top:4px}
.card-big.muted{color:var(--muted)}
.card-sub{font-size:.78rem;color:var(--muted);margin-top:2px}

/* Lists / rows */
.list{list-style:none;padding:0;margin:8px 0}
.list li{margin-bottom:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.row-main{font-weight:600}
.row-sub{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.row-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.tag{font-size:.72rem;padding:3px 9px;border-radius:999px;font-weight:600;white-space:nowrap}
.tag.teal{background:var(--teal-l);color:var(--teal-d)}
.tag.amber{background:var(--amber-l);color:var(--amber-d)}
.tag.silver{background:var(--silver-l);color:var(--muted)}
.pill{font-size:.8rem;padding:1px 10px;border-radius:999px;font-weight:700}
.pill.amber{background:var(--amber);color:#fff}

.empty,.disclaimer{color:var(--muted)}
.empty{padding:16px;background:var(--card);border:1px dashed var(--line);border-radius:12px}
.disclaimer{font-size:.72rem;margin-top:28px;line-height:1.5}
.hint{font-size:.78rem;color:var(--muted);font-weight:400}
.hint.block{display:block}
.muted{color:var(--muted)}
.center{text-align:center}
.back{display:inline-block;color:var(--muted);font-size:.85rem;margin-bottom:6px}
.meta{display:flex;gap:6px;margin-bottom:12px}

/* Paperwork */
.paperwork{list-style:none;padding:0;margin:8px 0}
.pw-row{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-left-width:4px;
  border-radius:10px;padding:13px 15px;margin-bottom:8px}
.pw-row.ok{border-left-color:var(--teal)}
.pw-row.attn{border-left-color:var(--amber)}
.pw-name{font-weight:600}
.pw-status{display:flex;align-items:center;gap:7px;font-size:.9rem;color:var(--muted)}
.pw-dates{font-size:.75rem}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.teal{background:var(--teal)} .dot.amber{background:var(--amber)}
.kv{list-style:none;padding:0;margin:6px 0 4px}
.kv li{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.kv li span{color:var(--muted);min-width:70px}

/* Forms */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:8px}
label{display:block;font-weight:600;font-size:.92rem}
input[type=text],input[type=email],input[type=password],input[type=tel]{
  width:100%;margin-top:6px;padding:12px 13px;font-size:16px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink)}
input:focus{outline:2px solid var(--teal);border-color:var(--teal)}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:600}
label.check input{margin-top:3px;width:18px;height:18px;flex:none}

.btn{display:inline-block;text-align:center;padding:13px 18px;border-radius:11px;
  font-weight:700;font-size:1rem;border:none;cursor:pointer}
.btn.primary{background:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-d)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.block{display:block;width:100%;margin-top:16px}

.err{background:var(--amber-l);color:var(--amber-d);padding:11px 14px;border-radius:10px;
  font-size:.9rem;border:1px solid var(--amber)}

/* Auth screens */
body.auth{display:flex;align-items:center;min-height:100vh;padding-bottom:0}
.auth-card{max-width:400px;margin:auto;padding:28px 22px;width:100%}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand h1{margin:12px 0 2px;font-size:1.8rem}
.tagline{color:var(--muted);margin:0;font-size:.92rem}

/* Bottom nav */
.bottomnav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);
  border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto;
  padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a{flex:1;text-align:center;padding:9px 0 7px;font-size:.68rem;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.bottomnav a.active{color:var(--teal)}
.bottomnav a.nav-soon{opacity:.4}
.bottomnav .ni{font-size:1.25rem;line-height:1}
.nav-add .ni{background:var(--teal);color:#fff;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:-2px}

/* ---- Phase 3: agreements / stages / payments ---- */
select{width:100%;margin-top:6px;padding:12px 13px;font-size:16px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink)}
input[type=date]{width:100%;margin-top:6px;padding:11px 13px;font-size:16px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);color:var(--ink)}

.disclose{margin:10px 0}
.disclose summary{cursor:pointer;list-style:none}
.disclose summary::-webkit-details-marker{display:none}
.disclose.tight{margin:2px 0 10px}
.disclose.tight summary{font-size:.82rem}
.boxed{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px}
.row-btns{display:flex;gap:10px}
.row-btns .btn{flex:1}

.balance-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0}
.bal{background:var(--card);padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.bal-l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.bal-v{font-size:1.2rem;font-weight:700}
.bal.strong .bal-v{font-size:1.35rem}
.amber-ink{color:var(--amber-d)}
.toggle-form{text-align:right;margin:2px 0 8px}

.warn{background:var(--amber-l);color:var(--amber-d);border:1px solid var(--amber);
  border-radius:10px;padding:11px 13px;font-size:.88rem;margin:10px 0}

.stage-list,.pay-list{list-style:none;padding:0;margin:8px 0}
.stage-row{background:var(--card);border:1px solid var(--line);border-left-width:4px;
  border-left-color:var(--silver);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.stage-row.on{border-left-color:var(--amber)}
.stage-head{display:flex;justify-content:space-between;font-weight:600}
.stage-sub{font-size:.8rem;color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.pay-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.pay-amt{font-weight:700}
.pay-meta{display:block;font-size:.78rem;color:var(--muted)}
.pay-row.voided{opacity:.55;text-decoration:line-through}
.pay-row.refund{border-left:4px solid var(--teal)}

.inline{display:inline;margin:0}
.inline .link-btn{color:var(--amber-d)}
.list.compact li{margin-bottom:4px}
.row.sm{padding:10px 13px;font-size:.9rem}
.row.sm.voided{opacity:.5;text-decoration:line-through}
.row.sm.strong{font-weight:700;background:var(--silver-l)}
.archive-form{margin-top:22px}
.hint.block{display:block;margin-top:14px}
a.card{color:var(--ink);display:block}
a.card:hover{border-color:var(--teal)}

/* ---- Phase 4: Drive / settings ---- */
.topbar-actions{display:flex;align-items:center;gap:14px}
.ok-banner{background:var(--teal-l);color:var(--teal-d);border:1px solid var(--teal);
  border-radius:10px;padding:11px 13px;font-size:.9rem;margin:10px 0}
.boxed p{margin:.3em 0}
.doc-link{font-size:.78rem}
.pw-upload{margin:2px 0 10px}
.pw-upload summary{font-size:.82rem;cursor:pointer;color:var(--teal)}
#doc-status{font-size:.85rem;margin-top:8px}

/* ---- Phase 6: reports ---- */
.report-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0}
.report-filter label{flex:1;min-width:120px}
.report-filter .btn{flex:none}
.audit-row .row-tags{margin-top:4px;gap:6px}
input[type=number]{width:100%;margin-top:6px;padding:11px 13px;font-size:16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}

/* ---- multipage document capture (capture.js) ---- */
.cap-strip{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.cap-page{position:relative;width:76px;height:96px;border:1px solid var(--line);
  border-radius:9px;overflow:hidden;background:var(--teal-l);flex:none}
.cap-page img{width:100%;height:100%;object-fit:cover;display:block}
.cap-page.cap-pdf{display:flex;align-items:center;justify-content:center;width:auto;
  min-width:120px;padding:0 10px;font-size:.8rem;color:var(--teal-d);gap:4px}
.cap-page .cap-x,.cap-page .cap-up,.cap-page .cap-down{position:absolute;border:none;
  width:22px;height:22px;border-radius:50%;font-size:.8rem;line-height:1;cursor:pointer;
  background:rgba(0,0,0,.62);color:#fff;padding:0}
.cap-page .cap-x{top:3px;right:3px}
.cap-page .cap-up{bottom:3px;left:3px}
.cap-page .cap-down{bottom:3px;left:29px}
.cap-num{position:absolute;top:3px;left:3px;background:var(--teal);color:#fff;
  font-size:.68rem;min-width:17px;height:17px;border-radius:9px;text-align:center;
  line-height:17px;padding:0 4px}
.cap-actions{display:flex;gap:8px;flex-wrap:wrap}
.cap-actions .btn{flex:1;min-width:140px}

/* Tappable money cards (each total opens the entries behind it) */
a.card.tappable .card-sub{color:var(--teal)}
a.card.active{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.page > .row-btns{margin:12px 0 4px}
.attn-count{margin:-4px 0 10px;font-weight:600;color:var(--amber-d)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.req-row .row-sub{display:block}

/* Trade multi-select (searchable, canonical list + Other) */
.trade-pick{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0}
.trade-pick legend{font-weight:600;padding:0 4px}
.trade-list{max-height:200px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:8px 0}
.trade-opt{display:flex;align-items:center;gap:6px;font-weight:400;padding:4px 0}
.trade-opt[hidden]{display:none}
.trade-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip{border:none;cursor:pointer}

/* Peer action buttons (Record a payment / Add amount owed): SAME weight + style so the pair
   reads as two actions, not a filled-vs-outlined toggle. An open form takes the full row. */
.btn.action{background:var(--teal);color:#fff;font-weight:600;display:block;width:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn.action:hover{background:var(--teal-d)}
.btn.action.sm{width:auto;padding:9px 14px;font-size:.9rem}
.btn.action[disabled]{opacity:.45}
.action-pair{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.action-pair > .disclose.action{flex:1 1 40%;margin:0}
.action-pair > .disclose.action[open]{flex-basis:100%;order:-1}
.action-pair > .disclose.action[open] > summary{background:var(--teal-d)}
.h-sub{font-size:.92rem;color:var(--muted);margin:1.2em 0 .4em;text-transform:uppercase;letter-spacing:.04em}

/* Venmo-style payment feed */
.feed{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px}
.feed li + li{border-top:1px solid var(--line)}
.feed-row{display:flex;align-items:center;gap:12px;padding:11px 14px;color:var(--ink)}
.feed-row.voided{opacity:.55}
.feed-row.voided .feed-amt{text-decoration:line-through}
.feed-av{flex:0 0 36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;background:var(--silver)}
.feed-av.in{background:var(--teal)}
.feed-av.out{background:var(--amber-d)}
.feed-main{flex:1;min-width:0;display:flex;flex-direction:column}
.feed-who{font-weight:600}
.feed-sub{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-amt{font-weight:700;white-space:nowrap}
.feed-amt.in{color:var(--teal)}

.trade-add-row{display:flex;gap:8px;align-items:center}
.trade-add-row .trade-search{flex:1}
.action-row{margin:12px 0 4px}
.action-row .btn.action{display:flex;align-items:center;justify-content:center;width:auto}

/* Trade lines on owed entries */
.trade-lines{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0}
.trade-lines legend{font-weight:600;padding:0 4px}
.tl-row{display:grid;grid-template-columns:1fr 110px 28px;gap:6px;margin-bottom:6px;align-items:center}
.btn.sm{padding:8px 12px;font-size:.88rem}

/* Payment detail */
.pay-hero{text-align:center;margin:10px 0 16px}
.pay-hero.voided .pay-hero-amt{text-decoration:line-through;opacity:.6}
.feed-av.big{width:56px;height:56px;margin:0 auto 6px;font-size:1.4rem;display:flex}
.pay-hero-amt{font-size:2rem;font-weight:800}
.pay-hero-amt.in{color:var(--teal)}
.pay-hero-who{color:var(--muted)}
a.pay-amt{color:var(--ink)}
.pw-row.neutral{border-left-color:var(--silver)}
.dot.silver{background:var(--silver)}
.pw-ack{margin:-4px 0 6px}
.feed-av.offset{background:var(--silver);color:var(--ink)}

/* "See entries" landing: clear the sticky top bar + flash the list so the tap visibly lands */
#entries,#payments,#trades{scroll-margin-top:64px}
#entries:target{animation:rk-flash 1.2s ease-out}
@keyframes rk-flash{0%{background:var(--teal-l);box-shadow:0 0 0 6px var(--teal-l)}100%{background:transparent;box-shadow:none}}
a.card.tappable{-webkit-tap-highlight-color:rgba(13,125,125,.18);touch-action:manipulation}
a.card.tappable:active{transform:scale(.98)}
.card-big.neg{color:var(--amber-d)}

/* Tappable document status bubbles (the bubble is the Add action) */
.pw-li{list-style:none}
.pw-item > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:rgba(224,152,45,.2)}
.pw-item > summary::-webkit-details-marker{display:none}
.pw-cta{margin-left:8px;font-weight:600;color:var(--teal);white-space:nowrap}
.pw-row.attn .pw-cta{color:var(--amber-d)}
.pw-item[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.pw-panel{margin:-1px 0 8px;border-top-left-radius:0;border-top-right-radius:0}
.pw-or{margin-bottom:0}
.attn-row{display:flex;align-items:center;gap:8px}
.row-link{color:var(--ink);display:flex;flex-direction:column;flex:1;min-width:0}
a.tag-link{text-decoration:none;padding:6px 10px}
.pw-item{scroll-margin-top:64px}
a.tag-link.on{box-shadow:inset 0 0 0 2px var(--teal);font-weight:700}
.proj-filter{margin:6px 0 10px}

/* ---- Expandable bottom nav: fixed center Add, handle + sheet of labeled tiles ---- */
.bottomnav{z-index:20}
.nav-handle{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:56px;height:18px;
  border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;background:var(--card);
  cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.nav-handle span{display:block;width:26px;height:4px;border-radius:2px;background:var(--silver)}
.nav-handle[aria-expanded=true] span{background:var(--teal)}
.nav-sheet{position:fixed;inset:0;z-index:19}
.nav-backdrop{position:absolute;inset:0;background:rgba(10,20,25,.35);opacity:0;transition:opacity .18s}
.nav-panel{position:absolute;left:0;right:0;bottom:0;max-width:var(--maxw);margin:0 auto;
  background:var(--card);border-radius:18px 18px 0 0;padding:10px 16px calc(84px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .18s ease-out;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.nav-sheet.open .nav-backdrop{opacity:1}
.nav-sheet.open .nav-panel{transform:none}
.nav-grip{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
.nav-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nav-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px;border:1px solid var(--line);
  border-radius:14px;color:var(--ink);font-size:.85rem;font-weight:600}
.nav-tile .ni{font-size:1.5rem}
.nav-tile.on{border-color:var(--teal);color:var(--teal)}
.nav-tile small{font-weight:400;color:var(--muted);font-size:.68rem}

/* ==========================================================================================
   Narrow-screen layout (Samsung Z Fold outer display ~344px, 320px Androids, large system
   font sizes). Regression fix: a no-wrap money amount inside a `1fr` grid column forced the
   column to its min-content width, so the card spilled into its neighbour and text overlapped.
   Rules: grid columns may shrink (minmax(0,1fr)); every flex/grid child may shrink
   (min-width:0); amounts scale to their OWN card's width (container units) and wrap only as a
   last resort; tag/bubble rows wrap; long names break instead of pushing neighbours.
   Verified by qa/layout_audit.py at 320/344/360/390px and 1.0x/1.3x text.
   ========================================================================================== */
.cards,.balance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.bal{min-width:0;container-type:inline-size}
.card{padding:14px clamp(10px,3.5vw,16px)}
.card-big{font-size:clamp(.8rem,12cqi,1.7rem);line-height:1.15;overflow-wrap:anywhere}
.bal-v{font-size:clamp(.95rem,10.5cqi,1.2rem);overflow-wrap:anywhere}
.bal.strong .bal-v{font-size:clamp(1rem,11.5cqi,1.35rem)}
.card-label,.bal-l{overflow-wrap:anywhere}
.h-page{overflow-wrap:anywhere}
.meta{flex-wrap:wrap}
.meta .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}  /* trade labels only — never amounts */
.row{flex-wrap:wrap}
.row > .row-tags{margin-left:auto}
.row-main,.row-link{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.row-tags{flex:0 1 auto;min-width:0}
.feed-who{overflow-wrap:anywhere}
.feed-amt{flex:0 0 auto}
.pw-row{flex-wrap:wrap;gap:4px 10px}
.pw-status{flex-wrap:wrap;justify-content:flex-end}
.action-pair > .disclose.action > summary,.row-btns .btn{padding-left:10px;padding-right:10px}
@media (max-width:420px){
  /* Needs-attention / Documents rows: the document bubbles drop BELOW the business name
     instead of squeezing it into a sliver. */
  .attn-row{flex-wrap:wrap}
  .attn-row > .row-tags{flex:1 1 100%;justify-content:flex-start}
  .page{padding:16px 12px}
  .cards{gap:8px}
}

/* Verified-style paperwork badge (app/badge.py) — teal check = current, amber triangle = attention */
.vb{display:inline-flex;align-items:center;vertical-align:-0.12em;width:1em;height:1em;margin-left:.3em;flex:0 0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%}
.vb svg{width:100%;height:100%}
.vb.vb-ok{color:var(--teal)}
.vb.vb-warn{color:var(--amber)}
.vb:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vb.tip-open::after{content:attr(data-tip);position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:30;
  background:var(--ink);color:var(--card);font-size:.85rem;font-weight:500;line-height:1.35;padding:10px 12px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.25);text-transform:none;letter-spacing:0;white-space:normal}
.h-page .vb{width:.8em;height:.8em}
a.tag-link{white-space:normal;max-width:100%;overflow-wrap:anywhere;line-height:1.25}  /* doc bubbles may wrap; amount tags never do */

/* Saved-document tiles: the WHOLE tile opens the file; badge = status by RECORDED dates only */
.doc-tiles{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.doc-tile{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--ink);min-width:0;-webkit-tap-highlight-color:rgba(13,125,125,.15)}
a.doc-tile:hover{border-color:var(--teal)}
a.doc-tile:active{transform:scale(.99)}
a.doc-tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.doc-tile.expired{border-left:4px solid var(--amber)}
.doc-tile.current{border-left:4px solid var(--teal)}
.doc-ico{flex:0 0 auto;font-size:1.2rem;line-height:1.3}
.doc-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-name{font-weight:600;font-size:.88rem;overflow-wrap:anywhere}
.doc-dates{font-size:.8rem;color:var(--ink)}
.doc-sub{font-size:.75rem;color:var(--muted)}
.doc-open{color:var(--teal);font-weight:600}
.doc-badge{flex:0 0 auto;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.doc-badge.current{background:var(--teal-l);color:var(--teal-d)}
.doc-badge.expired{background:var(--amber-l);color:var(--amber-d)}
.doc-badge.future,.doc-badge.undated{background:var(--silver-l);color:var(--muted)}
.doc-note{margin:2px 0 10px}

/* Capture widget: per-widget status, unsaved warning, upload progress (Oct 18 evening §3) */
.cap-status{font-size:.88rem;margin:6px 0 0;color:var(--teal-d);font-weight:600;min-height:1em}
.cap-status.bad{color:var(--amber-d)}
.cap-unsaved{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:var(--amber-l);color:var(--amber-d);
  font-size:.85rem;font-weight:600}
.cap-progress{display:flex;align-items:center;gap:8px;margin-top:6px}
.cap-progress progress{flex:1;height:10px;accent-color:var(--teal)}
.cap-pct{font-size:.8rem;font-weight:700;min-width:3em;text-align:right}
.saved-doc{overflow-wrap:anywhere}

/* Offline indicator (pwa.js) */
.net-bar{position:fixed;left:0;right:0;top:0;z-index:40;padding:10px 14px;font-size:.88rem;font-weight:600;text-align:center;line-height:1.35}
.net-bar.offline{background:var(--amber-l);color:var(--amber-d);border-bottom:1px solid var(--amber)}
.net-bar.online{background:var(--teal-l);color:var(--teal-d);border-bottom:1px solid var(--teal)}

/* Apply-offset CTA: a real button, not a text link (discoverability) */
.offset-cta{margin:10px 0 4px}
.btn.offset-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;background:var(--card);color:var(--teal-d);
  border:2px solid var(--teal);font-weight:700;padding:11px 14px}
.btn.offset-btn small{font-weight:500;color:var(--muted);font-size:.78rem}
.btn.offset-btn .ob-ico{font-size:1.1rem}
.offset-cta[open] > .btn.offset-btn{background:var(--teal-l)}

/* One shared GL/WC coverage-date pair per document panel */
.date-pair{border:1px solid var(--line);border-radius:12px;padding:8px 12px 10px;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.date-pair legend{font-weight:600;padding:0 4px}
.date-pair label{min-width:0}
.date-pair input{width:100%;min-width:0}
@media (max-width:340px){.date-pair{grid-template-columns:1fr}}
.lang-switch{text-align:center;margin:14px 0 4px;font-size:.92rem}
.boxed .lang-switch{text-align:left;margin:0 0 6px;font-size:1rem}
.lang-switch a,.lang-switch strong{display:inline-block;padding:6px 4px}

/* Demo-account banner (sandboxed showcase accounts) */
.demo-banner { margin: 0; padding: 6px 12px; text-align: center; font-size: .85rem;
  background: var(--amber-l); color: var(--amber-d); border-bottom: 1px solid var(--amber); }

/* My business documents + share: long Drive filenames must wrap on narrow phones */
.own-doc, .own-doc .row-sub, .share-pick, .share-pick .hint, .share-log .row-sub, .share-results .row-sub { min-width: 0; overflow-wrap: anywhere; }

/* CK-081: original vs net-after-refunds trade allocation on the payment page */
.split-head .hint, .split-net { min-width: 5.5em; text-align: right; }
.split-net { font-weight: 600; }
.fully-refunded { margin: 6px 0; }

/* Signup email verification banner (soft gate) */
.verify-banner { margin: 0; padding: 8px 12px; font-size: .88rem; background: var(--amber-l);
  color: var(--amber-d); border-bottom: 1px solid var(--amber); overflow-wrap: anywhere; }
.verify-banner.ok { background: transparent; color: var(--teal, #0f766e); border-bottom-color: var(--line, #ddd); }
.verify-banner .inline-form { display: inline; }

/* "Sign in with Google" — Google Identity branding (light theme). Don't restyle. */
.gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px;
  padding: 0 12px; margin: 8px 0; background: #FFFFFF; border: 1px solid #747775; border-radius: 4px;
  color: #1F1F1F; font-family: "Roboto", Arial, sans-serif; font-weight: 500; font-size: 14px;
  line-height: 20px; letter-spacing: .25px; text-decoration: none; box-sizing: border-box; }
.gsi-btn:hover { background: #F8F9FA; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi-btn:focus-visible { outline: 2px solid #0B57D0; outline-offset: 2px; }
.gsi-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
.gsi-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-sep { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; color: var(--muted, #6b7280); font-size: .85rem; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; border-top: 1px solid var(--line, #ddd); }
.legal-links { text-align: center; font-size: .85rem; margin: 14px 0 4px; }
.site-foot { padding: 4px 12px 96px; }
.home-name { font-size: 2.2rem; letter-spacing: .5px; }
.home-points { margin: 10px 0 16px; padding-left: 1.2em; }
.legal-body { line-height: 1.55; overflow-wrap: anywhere; }
.legal-body h1 { font-size: 1.5rem; } .legal-body h2 { font-size: 1.15rem; margin-top: 1.4em; }