/* ============================================================
   ANVUL PLATFORM — layout & screens
   Marketing site, app shell (sidebar + topbar), and per-screen
   components. Loads after anvul-platform.css.
   ============================================================ */

/* ============================================================
   ROUTER — screens are sections; only [data-active] shows
   ============================================================ */
/* views toggle via [hidden] — must beat author display:grid on .auth/.app */
[hidden] { display: none !important; }

.screen { display: none; }
.screen[data-active] { display: block; animation: scrIn .4s ease both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   MARKETING SITE (anvul.com)
   ============================================================ */
.mk { background: var(--canvas); }
.mk-nav { position: sticky; top: 0; z-index: 50; background: oklch(0.205 0.012 264 / 0.85); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-ink); }
.mk-nav-in { max-width: 1180px; margin: 0 auto; padding: 15px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.03em; color: var(--on-ink); white-space: nowrap; cursor: pointer; }  /* --text-xl=20px */
/* The brand glyph is a white-helmet-on-fill mark, so it follows the system's
   white-on-fill rule: the SAME deepened terracotta as .btn-primary (--signal-ink
   = #aa4810). This kills the old off-family #D97757 (a pinker, lighter hue) so the
   logo and any CTA are now identical — one coherent accent, no visible drift. The
   soft halo is the brighter signal hue, tying it to --signal used elsewhere. */
.brand .glyph { width: 26px; height: 26px; border-radius: 8px; background: var(--signal-ink); display: grid; place-items: center; box-shadow: 0 0 0 4px oklch(0.645 0.15 47 / 0.18); flex: none; }
.brand .glyph svg { width: 16px; height: 16px; display: block; }
.brand .glyph svg .hh-fill { fill: #fff; }
.brand .glyph svg .hh-rib { fill: none; stroke: var(--signal-ink); stroke-width: 1.3; stroke-linecap: round; }
.mk-nav-links { display: flex; align-items: center; gap: 28px; }
.mk-nav-links a { font-size: 14px; font-weight: 600; color: var(--on-ink-soft); text-decoration: none; cursor: pointer; }
.mk-nav-links a:hover { color: var(--on-ink); }
.mk-nav-actions { display: flex; align-items: center; gap: 12px; }
.mk-nav .btn-ghost { background: transparent; color: var(--on-ink); border-color: var(--line-ink); }
.mk-nav .btn-ghost:hover { background: var(--ink-2); border-color: var(--ink-3); }

.mk-hero { background: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; border-bottom: 1px solid var(--line-ink); }
.mk-hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 78% 8%, var(--signal-glow), transparent 60%),
  linear-gradient(transparent 0, transparent calc(100% - 1px), oklch(0.3 0.01 264 / 0.5) 100%) 0 0 / 100% 34px,
  linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), oklch(0.3 0.01 264 / 0.5) 100%) 0 0 / 34px 100%;
  opacity: 0.5; pointer-events: none; }
.mk-hero-in { max-width: 1180px; margin: 0 auto; padding: 70px 32px 0; position: relative; }
.mk-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 50px; align-items: center; }
.mk-hero .eyebrow { color: var(--signal); }
.mk-h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5vw, 60px); line-height: 1.0; letter-spacing: -0.04em; margin: 16px 0 18px; text-wrap: balance; }
.mk-h1 em { font-style: normal; color: var(--signal); }
.mk-lede { font-size: 19px; line-height: 1.55; color: var(--on-ink-soft); max-width: 40ch; margin: 0 0 26px; }
.mk-hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-hero-note { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-family: var(--mono); font-size: 12px; color: var(--on-ink-faint); flex-wrap: wrap; }
.mk-hero-note .nd { display: inline-flex; align-items: center; gap: 7px; }
.mk-hero-note .nd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* hero proof = the homeowner result card, the product IS the proof */
.demo-wrap { position: relative; }
.demo-label { position: absolute; top: -12px; left: 18px; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--signal); padding: 4px 10px; border-radius: 5px; }
.demo-phone { background: var(--paper); border-radius: 22px; padding: 14px; box-shadow: var(--shadow-ink); border: 1px solid var(--line-ink); }
.demo-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.demo-top { background: var(--ink); color: var(--on-ink); padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; }
.demo-top .dl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.demo-top .badge-found { font-family: var(--mono); font-size: 10px; color: var(--ink); background: var(--ok); padding: 3px 8px; border-radius: 4px; }
.demo-rows { padding: 6px 16px 12px; }
.demo-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.demo-row:last-child { border-bottom: 0; }
.demo-row .dr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.demo-row[data-c="found"] .dr-dot { background: var(--ok); }
.demo-row[data-c="inferred"] .dr-dot { background: var(--signal); }
.demo-row[data-c="confirm"] .dr-dot { background: var(--fg-ghost); }
.demo-row .dr-k { font-size: 13px; color: var(--fg); }
.demo-row .dr-k b { font-weight: 700; }
.demo-row .dr-tag { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); }
.demo-foot { background: var(--paper-2); border-top: 1px solid var(--line); padding: 11px 16px; font-size: 11px; color: var(--fg-faint); line-height: 1.45; }

.mk-marquee { border-top: 1px solid var(--line-ink); margin-top: 64px; }
.mk-marquee-in { max-width: 1180px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mk-marquee .ml { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); }
.mk-marquee .chips { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-chip { font-family: var(--mono); font-size: 12px; color: var(--on-ink-soft); border: 1px solid var(--line-ink); border-radius: 999px; padding: 6px 12px; }

.mk-sec { padding: 88px 0; }
.mk-sec-in { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.mk-sec.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-head { max-width: 640px; margin-bottom: 48px; }
.mk-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; letter-spacing: -0.035em; margin: 14px 0 0; text-wrap: balance; }
.mk-head p { font-size: 17px; color: var(--fg-soft); margin: 16px 0 0; line-height: 1.55; }

/* the loop diagram */
.loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.loop-step { padding: 26px 22px; border-right: 1px solid var(--line); position: relative; }
.loop-step:last-child { border-right: 0; }
.loop-step .ls-n { font-family: var(--mono); font-size: 11px; color: var(--signal-deep); margin-bottom: 14px; }
.loop-step h3 { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; margin: 0 0 7px; }
.loop-step p { font-size: 13px; color: var(--fg-soft); margin: 0; line-height: 1.5; }
.loop-step .ls-ar { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; }
.loop-step:last-child .ls-ar { display: none; }
.loop-step .ls-ar svg { width: 10px; height: 10px; }

/* feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.feat-ico { width: 46px; height: 46px; border-radius: 11px; background: var(--signal-soft); border: 1px solid var(--signal-line); color: var(--signal-deep); display: grid; place-items: center; margin-bottom: 16px; }
.feat-ico svg { width: 22px; height: 22px; }
.feat h3 { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; margin: 0 0 8px; }
.feat p { font-size: 14px; color: var(--fg-soft); margin: 0; line-height: 1.55; }

/* skins gallery */
.skins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.skin-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.skin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.skin-swatch { height: 76px; display: flex; align-items: flex-end; padding: 12px; gap: 6px; }
.skin-swatch i { width: 22px; height: 22px; border-radius: 6px; display: block; }
.skin-meta { padding: 12px 14px; border-top: 1px solid var(--line); }
.skin-meta b { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; display: block; }
.skin-meta span { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; }

/* pricing */
.price-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; max-width: 880px; }
.price { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; background: var(--paper); position: relative; }
.price.feature { border-color: var(--ink); box-shadow: var(--shadow); }
.price .pt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-deep); }
.price.feature .badge { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ink); color: var(--on-ink); padding: 5px 10px; border-radius: 5px; }
.price .pp { font-family: var(--display); font-weight: 700; font-size: 44px; letter-spacing: -0.03em; margin: 16px 0 2px; font-variant-numeric: tabular-nums; }  /* tnum: price figures align */
.price .pp small { font-size: 16px; color: var(--fg-faint); font-weight: 500; }
.price .pd { font-size: 14px; color: var(--fg-soft); margin: 0 0 22px; }
.price ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.price li { display: flex; gap: 10px; font-size: 14px; color: var(--fg); align-items: flex-start; }
.price li svg { width: 17px; height: 17px; color: var(--ok); flex: none; margin-top: 1px; }

.mk-cta { background: var(--ink); color: var(--on-ink); text-align: center; }
.mk-cta-in { max-width: 720px; margin: 0 auto; padding: 88px 32px; }
.mk-cta h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 16px; }
.mk-cta p { font-size: 18px; color: var(--on-ink-soft); margin: 0 0 28px; }
.mk-foot { background: var(--ink); border-top: 1px solid var(--line-ink); color: var(--on-ink-faint); }
.mk-foot-in { max-width: 1180px; margin: 0 auto; padding: 36px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; }

/* ============================================================
   AUTH (passcode onboarding)
   ============================================================ */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--canvas); }
.auth-aside { background: var(--ink); color: var(--on-ink); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 30% 20%, var(--signal-glow), transparent 60%); opacity: 0.6; }
.auth-aside .brand { position: relative; }
.auth-aside .aq { position: relative; }
.auth-aside .aq h2 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 16px; text-wrap: balance; }
.auth-aside .aq p { font-size: 15px; color: var(--on-ink-soft); line-height: 1.6; margin: 0; max-width: 38ch; }
.auth-aside .afoot { position: relative; font-family: var(--mono); font-size: 11px; color: var(--on-ink-faint); display: flex; gap: 16px; flex-wrap: wrap; }
.auth-main { display: grid; place-items: center; padding: 40px; position: relative; }
.auth-box { width: 100%; max-width: 380px; }
.auth-box .step-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 12px; }
.auth-box h1 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; margin: 0 0 8px; }
.auth-box .sub { font-size: 14.5px; color: var(--fg-soft); margin: 0 0 26px; line-height: 1.5; }
.auth-box .sub b { color: var(--fg); }
.auth-step { display: none; }
.auth-step[data-active] { display: block; animation: scrIn .35s ease both; }
.otp { display: flex; gap: 10px; margin-bottom: 8px; }
.otp input { width: 100%; aspect-ratio: 1; text-align: center; font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--fg); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color .15s, box-shadow .15s; }
.otp input:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }  /* :focus-visible — ring on keyboard, not mouse click */
.otp.err input { border-color: var(--block); box-shadow: 0 0 0 4px var(--block-soft); }
.otp.err input { animation: shake .4s; }
@keyframes shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.auth-msg { font-size: 13px; margin: 12px 0 0; display: flex; align-items: center; gap: 7px; line-height: 1.45; }
.auth-msg.err { color: var(--block); }
.auth-msg.ok { color: var(--ok); }
.auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--fg-faint); }
.auth-meta button { background: none; border: 0; color: var(--signal-deep); font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--sans); }
.auth-meta button:disabled { color: var(--fg-ghost); cursor: not-allowed; }

/* ============================================================
   APP SHELL (dashboard)
   ============================================================ */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.side { background: var(--ink); color: var(--on-ink-soft); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-top { padding: 20px 18px; border-bottom: 1px solid var(--line-ink); }
.side .brand { font-size: 18px; }
/* FIX #8 — the firm card looked like a switcher (cursor:pointer + a
   hover-border affordance) but had no click handler/role/tabindex, so it
   promised interactivity it can't deliver (multi-firm switching isn't
   built). Drop the affordance until it's wired — it reads as an identity
   label, which is what it is. */
.firm-switch { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line-ink); border-radius: var(--r-sm); }
.firm-switch .fav { width: 28px; height: 28px; border-radius: 7px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 13px; color: #fff; }
.firm-switch .fn { flex: 1; min-width: 0; }
.firm-switch .fn b { display: block; font-size: 13px; font-weight: 700; color: var(--on-ink); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firm-switch .fn span { font-family: var(--mono); font-size: 10px; color: var(--on-ink-faint); }
.firm-switch .fchev { color: var(--on-ink-faint); }
.side-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.nav-group { margin-bottom: 18px; }
.nav-group .ng-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--on-ink-faint); padding: 0 10px; margin-bottom: 7px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--on-ink-soft); cursor: pointer; transition: background .14s, color .14s; border: 0; background: transparent; width: 100%; text-align: left; font-family: var(--sans); }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: 0.8; }
.nav-item:hover { background: var(--ink-2); color: var(--on-ink); }
.nav-item[aria-current="true"] { background: var(--ink-2); color: var(--on-ink); }
.nav-item[aria-current="true"] svg { color: var(--signal); opacity: 1; }
.nav-item .badge-n { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600; background: var(--signal); color: #fff; padding: 2px 7px; border-radius: 999px; }
.nav-item .lock { margin-left: auto; opacity: 0.5; }
/* FUNNEL nav gate (Task 6, reframed 2026-07-16): a rail item a pre-activation
   (A/B) funnel firm can't open yet. It stays VISIBLE so the firm sees what's
   coming — but it must read as "being set up / opens soon", NEVER as a broken,
   greyed-out cockpit. So: a gentle (not harsh) dim, the label kept legible, and
   a warm terracotta "Soon" chip in place of a dead padlock. Cleared at C/D and
   never applied to a legacy firm. (A PAID firm is phase C — nothing locked.) */
.nav-item.locked { opacity: 0.82; cursor: default; }
.nav-item.locked .badge-n { display: none; }
.nav-item.locked:hover { background: var(--ink-2); color: var(--on-ink-soft); }
/* the "Soon" chip — warm, quiet, clearly "coming" (not disabled). Replaces the
   padlock's visual weight; the padlock SVG is hidden but its a11y label stays. */
.nav-item.locked .nav-lock { display: none; }
.nav-item.locked::after {
  content: "Soon"; margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--signal); background: oklch(0.645 0.15 47 / 0.14); border: 1px solid oklch(0.645 0.15 47 / 0.3);
  padding: 2px 7px; border-radius: 999px; line-height: 1.4;
}
/* Care carries a descriptive ni-col (main+sub), so its Soon chip must not shove
   the sublabel — anchor it to the row, not the flex flow. */
.nav-item-care.locked::after { align-self: center; }
/* Secondary text links for hidden-but-discoverable screens (HQ "More" group). */
.nav-link { display: block; padding: 5px 10px; font-size: 12.5px; font-weight: 500; color: var(--on-ink-faint); text-decoration: none; border-radius: var(--r-sm); transition: color .14s, background .14s; }
.nav-link:hover { color: var(--on-ink-soft); background: var(--ink-2); }
.nav-item .nav-lock { margin-left: auto; display: inline-flex; align-items: center; opacity: 0.75; flex: none; }
.nav-item .nav-lock svg { width: 13px; height: 13px; opacity: 1; }
/* honest "Soon" pip: marks a rail item whose screen isn't live yet, so the
   sidebar doesn't oversell depth. Quiet by design — it's a caveat, not a CTA. */
.nav-item .nav-soon { margin-left: auto; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-ink-faint); border: 1px solid rgba(255, 255, 255, 0.16); padding: 1px 6px; border-radius: 999px; line-height: 1.4; }
/* descriptive nav item: a small mono sublabel under the main label. Used on
   Requests to make clear it's "ask us to change your site" (it sits beside Leads
   and otherwise reads like incoming enquiries). */
.nav-item .ni-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.2; }
.nav-item .ni-sub { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--on-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item[aria-current="true"] .ni-sub { color: var(--on-ink-soft); }
.side-foot { padding: 14px; border-top: 1px solid var(--line-ink); }
.side-foot .acct { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm); cursor: pointer; }
.side-foot .acct:hover { background: var(--ink-2); }
.side-foot .acct .av { width: 30px; height: 30px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.side-foot .acct .an { flex: 1; min-width: 0; font-size: 13px; }
.side-foot .acct .an b { display: block; color: var(--on-ink); font-weight: 700; }
.side-foot .acct .an span { font-size: 11px; color: var(--on-ink-faint); }

.main { background: var(--canvas); min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; background: oklch(0.975 0.004 264 / 0.86); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); padding: 14px 32px; display: flex; align-items: center; gap: 18px; }
.topbar .tb-title { min-width: 0; }
.topbar .tb-title .tbk { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
.topbar .tb-title h1 { font-family: var(--display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; margin: 2px 0 0; }  /* --text-xl=20px */
.topbar .tb-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* bottom padding reserves room for the fixed "Ask Bob" FAB (bottom-right, ~46px
   tall at 18px offset) so the last line of content never sits under it. */
.content { padding: 28px 32px 84px; max-width: 1120px; width: 100%; margin: 0 auto; }

/* Mobile bottom tab-bar — hidden on desktop, revealed in the <=920px block below
   (alongside the drawer). It's an ADDITION to the drawer/burger, not a replacement. */
.botnav { display: none; }

/* preview status strip */
.statusbar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); margin-bottom: 24px; }
.statusbar .sb-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--fg-soft); }
.statusbar .sb-live .ld { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.statusbar.is-live .sb-live .ld { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.statusbar .sb-url { font-family: var(--mono); font-size: 12.5px; color: var(--fg); }
.statusbar .sb-url b { color: var(--signal-deep); }

/* ============================================================
   COMMAND HEADER — the Ink & Signal "cockpit" (Overview hero)
   The signature moment: the firm's identity, its honest live/
   preview telemetry, and the two readiness gauges seated on ONE
   near-black instrument panel. A reflow of the SAME status bar +
   rings — no new data, no new modules. A single terracotta "signal"
   hairline at the top edge is the panel's one accent; everything
   else is restrained ink. Cohesive with the Bob mark, rings & pills.
   ============================================================ */
.cmd-header {
  position: relative; margin-bottom: 24px;
  border-radius: var(--r-lg); padding: 5px 5px 0;            /* 5px frame lets the gauges sit INSET on the ink */
  background: linear-gradient(150deg, var(--ink), oklch(0.265 0.045 255) 78%);
  border: 1px solid var(--line-ink);
  box-shadow: var(--shadow-ink);
  overflow: hidden;
}
/* the one accent: a terracotta signal hairline running the top edge */
.cmd-header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal) 18%, var(--signal) 82%, transparent);
  opacity: 0.9; pointer-events: none;
}
/* ---- telemetry row: firm identity (left) + live/preview status (right) ---- */
.cmdh-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px 15px; }
.cmdh-id { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.cmdh-mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: oklch(0.28 0.02 264); border: 1px solid var(--line-ink); }
.cmdh-mark svg { width: 22px; height: 22px; }
.cmdh-mark .hh-fill { fill: var(--signal); }
.cmdh-mark .hh-rib { stroke: var(--ink); stroke-width: 1.1; fill: none; }
.cmdh-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cmdh-name b { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--on-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdh-name .cmdh-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--on-ink-faint); margin-top: 2px; }
/* the existing status bar, re-seated on ink: transparent, mono labels lift to on-ink,
   the live/preview dot + signal-accent URL stay exactly as the component defines them */
.cmd-header .statusbar.cmdh-status {
  flex: 1 1 auto; min-width: 240px; margin: 0; margin-left: auto;
  /* a dark inset (not a light tint) so the terracotta URL + mono labels always
     sit on a guaranteed near-black backdrop — AA holds wherever the panel
     gradient falls behind this strip (signal URL = 5.14:1 on the ink base). */
  background: oklch(0.18 0.02 264 / 0.55); border: 1px solid var(--line-ink); border-radius: var(--r);
  padding: 9px 12px; justify-content: flex-end;
}
.cmd-header .cmdh-status .sb-live { color: var(--on-ink-soft); }
.cmd-header .cmdh-status .sb-url { color: var(--on-ink-soft); }
.cmd-header .cmdh-status .sb-url b { color: var(--signal); }          /* terracotta on ink — AA, matches marketing accent-on-dark */
.cmd-header .cmdh-status .btn-ghost { background: oklch(1 0 0 / 0.06); color: var(--on-ink); border-color: var(--line-ink); }
.cmd-header .cmdh-status .btn-ghost:hover { background: oklch(1 0 0 / 0.12); border-color: var(--on-ink-faint); }
/* ---- the two gauges, seated as paper instruments on the panel ---- */
.cmd-header .lr-scores.cmdh-gauges { margin: 0; gap: 5px; }
.cmd-header .cmdh-gauges .lr-score {
  border-radius: 0; border: 0; box-shadow: none;
  background: var(--paper); border-top: 1px solid var(--line);
}
.cmd-header .cmdh-gauges .lr-score:first-child { border-top-left-radius: var(--r); }
.cmd-header .cmdh-gauges .lr-score:last-child { border-top-right-radius: var(--r); }
/* one hairline gutter between the two gauges so they read as a paired instrument cluster */
.cmd-header .cmdh-gauges .lr-score + .lr-score { box-shadow: -5px 0 0 0 var(--ink); }
/* The "fully set up" gauge starts empty (—) before sign-in; de-emphasise it so it
   doesn't read as an equal-weight twin beside the green 100 (a double-take). Once
   renderReadinessReal() lands the firm's real open-item count it rewrites .ring's
   class (dropping .is-pending), so this only softens the awaiting-data state. */
.cmd-header .cmdh-gauges .lr-score .ring.is-pending { opacity: .5; }
.cmd-header .cmdh-gauges .lr-score .ring.is-pending .rv { color: var(--fg-faint); font-weight: 600; }
/* reflow: phone stacks identity over status, gauges go single column.
   760px matches the .grid-2 collapse already used on this screen. */
@media (max-width: 760px) {
  .cmd-header .lr-scores.cmdh-gauges { grid-template-columns: 1fr; }
  .cmd-header .cmdh-gauges .lr-score:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
  .cmd-header .cmdh-gauges .lr-score:last-child { border-top-left-radius: 0; border-top-right-radius: 0; }
  .cmd-header .cmdh-gauges .lr-score + .lr-score { box-shadow: none; }
}
@media (max-width: 560px) {
  .cmdh-bar { gap: 12px; padding: 14px 14px 13px; }
  .cmd-header .statusbar.cmdh-status { flex-basis: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; }
  .cmdh-name b { font-size: 17px; white-space: normal; }
  .cmd-header .cmdh-gauges .lr-score { gap: 16px; padding: 18px; }
}

/* generic section grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
.row { display: flex; gap: 16px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted { color: var(--fg-soft); }
.h-card-title { font-family: var(--display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; margin: 0; }  /* --text-lg=17px */
.sec-gap { margin-top: var(--space-6); }  /* --space-6=24px */

/* responsive */
@media (max-width: 1080px) {
  .mk-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 0; }
  .loop { grid-template-columns: 1fr; } .loop-step { border-right: 0; border-bottom: 1px solid var(--line); } .loop-step .ls-ar { display: none; }
  .feat-grid { grid-template-columns: 1fr; } .skins-grid { grid-template-columns: 1fr 1fr; } .price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: 100%; width: 290px; max-width: 84vw;
    z-index: 80; transform: translateX(100%); transition: transform .28s cubic-bezier(.3,.8,.3,1);
    box-shadow: -16px 0 50px oklch(0.1 0.04 264 / 0.4); display: flex;
  }
  .app.drawer-open .side { transform: translateX(0); }
  /* the open drawer clears the notch (top inset) + the home-indicator (bottom
     inset) so the brand lockup and the account foot never hide under either. */
  .side .side-top { padding-top: calc(16px + env(safe-area-inset-top)); }
  .side .side-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .drawer-scrim { position: fixed; inset: 0; z-index: 75; background: oklch(0.15 0.03 264 / 0.5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .28s; }
  .app.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  .side-foot .acct { padding: 10px; }
  .auth { grid-template-columns: 1fr; } .auth-aside { display: none; }

  /* mobile top app bar — honors the notch (safe-area-inset-top) so the title +
     controls never sit under the status bar / camera housing on a modern phone. */
  .mtop { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 60;
    padding: calc(11px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 11px calc(12px + env(safe-area-inset-left));
    background: oklch(0.185 0.012 264 / 0.92); backdrop-filter: saturate(1.35) blur(16px); -webkit-backdrop-filter: saturate(1.35) blur(16px);
    border-bottom: 1px solid oklch(1 0 0 / 0.06); color: var(--on-ink); }
  .mtop .mt-back, .mtop .mt-burger { width: 44px; height: 44px; border-radius: 11px; flex: none; border: 0; background: transparent;
    color: var(--on-ink); display: grid; place-items: center; cursor: pointer; transition: background .15s; }
  .mtop .mt-back:active, .mtop .mt-burger:active { background: var(--ink-2); }
  .mtop .mt-back svg, .mtop .mt-burger svg { width: 22px; height: 22px; }
  .mtop .mt-back { visibility: hidden; }
  .mtop.has-back .mt-back { visibility: visible; }
  .mtop .mt-title { flex: 1; min-width: 0; text-align: center; }
  .mtop .mt-title .mtk { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); display: block; line-height: 1; }
  .mtop .mt-title .mth { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtop .mt-burger { position: relative; }
  /* MOBILE notification bell — matches the back/burger hit-area but on the DARK
     bar (the shared .nbell styling is paper/light-themed, so override it here).
     The unread badge rides the signal colour, ringed so it reads on the bar. */
  .mtop #mNbellWrap { flex: none; display: grid; place-items: center; }
  .mtop .mt-bell { width: 44px; height: 44px; border-radius: 11px; flex: none; border: 0; padding: 0;
    background: transparent; color: var(--on-ink); display: grid; place-items: center; cursor: pointer; transition: background .15s; position: relative; }
  .mtop .mt-bell:active { background: var(--ink-2); }
  .mtop .mt-bell:hover { background: transparent; color: var(--on-ink); border-color: transparent; }
  .mtop .mt-bell[aria-expanded="true"] { background: var(--ink-2); color: var(--on-ink); border-color: transparent; }
  .mtop .mt-bell svg { width: 22px; height: 22px; }
  .mtop .mt-bell.has-unread svg { color: var(--signal); }
  .mtop .mt-bell:focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(0.72 0.16 40 / 0.5); }
  .mtop .mt-bell .nbell-badge { top: 4px; right: 4px; border: 1.5px solid var(--ink); }
  /* hide the desktop topbar on mobile, show mobile bar */
  .main > .topbar { display: none; }
  .main > .mtop { display: flex; }
  /* clear the fixed bottom tab-bar (~78px) AND the "Ask Bob" FAB that floats just
     above it (bottom: 86px + ~46px tall) + the home-indicator safe area, so the
     last row of content is never hidden under the bar or the FAB */
  .content { padding: 18px 16px calc(160px + env(safe-area-inset-bottom)); }

  /* ---- bottom tab-bar: the daily loop, one tap from anywhere.
       Elevated (2026-07-16): a deeper ink glass with a hairline top-light, a
       floating "pill" that slides under the active icon, crisper 24px icons,
       and a comfortable ≥60px tap row above the home-indicator inset. ---- */
  .botnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    gap: 2px; padding: 6px 6px env(safe-area-inset-bottom);
    background: oklch(0.185 0.012 264 / 0.90); backdrop-filter: saturate(1.35) blur(18px); -webkit-backdrop-filter: saturate(1.35) blur(18px);
    border-top: 1px solid oklch(1 0 0 / 0.07);
    box-shadow: 0 -1px 0 oklch(0 0 0 / 0.25), 0 -18px 40px -24px oklch(0 0 0 / 0.6);
  }
  .botnav-item {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; padding: 7px 3px 6px;
    border: 0; background: transparent; cursor: pointer; font-family: var(--sans);
    color: var(--on-ink-soft); transition: color .16s var(--ease-out, ease);   /* AA: soft (L0.74) ~6.5:1 on the ink bar */
  }
  /* the sliding "pill" behind the icon on the active tab — the premium tell */
  .botnav-item .bn-ico-wrap, .botnav-item > svg, .botnav-item .bn-ic {
    position: relative; z-index: 1; display: inline-grid; place-items: center;
  }
  .botnav-item::after {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%) scale(.6);
    width: 46px; height: 30px; border-radius: 999px; background: oklch(0.645 0.150 47 / 0.16);
    opacity: 0; transition: opacity .2s var(--ease-out, ease), transform .28s var(--ease-spring, cubic-bezier(.18,1.3,.4,1)); z-index: 0;
  }
  .botnav-item svg { width: 23px; height: 23px; opacity: 0.9; transition: transform .2s var(--ease-out, ease), color .16s; }
  .botnav-item .bn-l { max-width: 100%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.005em; line-height: 1; transition: color .16s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .botnav-item:active { color: var(--on-ink); }
  .botnav-item:active svg { transform: scale(.9); }
  .botnav-item[aria-current="true"] { color: #fff; }
  .botnav-item[aria-current="true"] svg { color: var(--signal); opacity: 1; }
  .botnav-item[aria-current="true"] .bn-l { color: #fff; font-weight: 700; }
  .botnav-item[aria-current="true"]::after { opacity: 1; transform: translateX(-50%) scale(1); }
  /* unread badge on Leads — mirrors the sidebar .badge-n */
  .botnav-item .bn-ic { position: relative; display: inline-grid; place-items: center; }
  .botnav-item .bn-badge {
    position: absolute; top: -5px; left: 100%; margin-left: -9px;
    font-family: var(--mono); font-size: 10px; font-weight: 700; line-height: 1;
    background: var(--signal); color: #fff; padding: 2px 5px; border-radius: 999px;
    border: 2px solid var(--ink); min-width: 8px; text-align: center;
    box-shadow: 0 2px 6px oklch(0.645 0.150 47 / 0.4);
  }
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
  .botnav-item::after, .botnav-item svg { transition: none; }
}
@media (min-width: 921px) { .mtop, .drawer-scrim, .botnav { display: none; } }
@media (max-width: 600px) {
  .mk-nav-links { display: none; } .mk-sec { padding: 56px 0; } .skins-grid { grid-template-columns: 1fr; }
  /* keep a bottom inset that clears the fixed bottom tab-bar + the "Ask Bob" FAB
     floating above it + safe area (the bar still shows up to 920px, so phones must
     not tuck content under it or the FAB). Higher specificity + !important is
     deliberate: skin-mobile.css sets a smaller `.content` bottom padding with
     !important and loads later, so a plain `.content` rule here would lose — `.app
     .content` (one extra class) wins the !important cascade by specificity. */
  .app .content { padding: 20px 20px calc(160px + env(safe-area-inset-bottom)) !important; } .topbar { padding: 12px 20px; }
}


/* Deploy stamp (2026-07-06): the quiet "which bundle is this?" line in both
   rails — the founder audited a stale prod bundle without knowing. */
.build-stamp { margin-top: 9px; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: 0.06em; color: var(--fg-faint, #9a9285); opacity: 0.8; user-select: all; }

/* ── Pre-tenant Care welcome (2026-08-04) — the FIRST thing a brand-new firm
   (verified email, not yet paid, no tenant) sees on the Care thread: a warm,
   deliberate empty state, never a blank panel. Rendered by cmSessionHelloHtml()
   in anvul-app.js inside the .cm-thread flex column; terracotta eyebrow on warm
   paper, same Ink & Signal language as the rest of the console. */
.cm-hello { align-self: stretch; max-width: 460px; margin: 18px auto 6px; text-align: center; }
.cm-hello-k { display: inline-flex; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--signal-deep); margin-bottom: 8px; }
.cm-hello-t { margin: 0 0 8px; font-size: 17px; line-height: 1.3; color: var(--fg); }
.cm-hello-p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-soft); }
.cm-hello-sub { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-faint); }

/* ── Magic-link claim recap (2026-08-04) — the ?s= claim door renders claimFlow's
   recap on the readiness hero (this console ships no #obBody wizard shell, so
   anvul-onboard.js's claimFlow can't render here). Built by renderClaimRecap()
   in anvul-app.js; completes via POST /onboarding/claim-go-live. */
.claim-recap { max-width: 640px; }
.claim-recap-em { font-style: normal; color: var(--signal-deep, #b04a2c); }
.claim-rrows { margin: 14px 0 4px; border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--paper, #fff); overflow: hidden; }
.claim-rrow { display: flex; gap: 14px; align-items: baseline; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.claim-rrow:last-child { border-bottom: 0; }
.claim-rk { flex: 0 0 110px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-faint); }
.claim-rv { color: var(--fg); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.claim-recap-p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-soft); }
.claim-recap-act { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.claim-recap-msg { min-height: 20px; margin: 10px 0 0; font-size: 13.5px; color: var(--signal-deep, #a8472b); }
.claim-recap-fine { margin: 8px 0 0; font-size: 12.5px; color: var(--fg-faint); }

/* ── Jobs board (data-screen="jobs") — the firm's active work as a to-do list
   of cards. Mobile-first; money in mono tabular; NOBODY ON THIS the one warm
   shout. Fascia & Ledger tokens throughout (no minted sizes/hexes). ── */
.job-board { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
.job-card { display: block; width: 100%; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-4, 16px);
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .18s var(--ease, ease), transform .18s var(--ease, ease); }
.job-card:hover { border-color: var(--line-strong, #d9d2c4); }
.job-card:active { transform: translateY(1px); }
.job-card:focus-visible { outline: 2px solid var(--terra-text); outline-offset: 2px; }
.jc-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px); }
.jc-client { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); color: var(--ink); overflow-wrap: anywhere; }
.jc-money { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-body);
  color: var(--ink); white-space: nowrap; }
.jc-paid { color: var(--ok-ink); }
.jc-addr { margin-top: var(--space-1, 4px); font-size: var(--t-body); color: var(--ink-2); overflow-wrap: anywhere; }
.jc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 10px);
  margin-top: var(--space-3, 12px); flex-wrap: wrap; }
.jc-eng, .jc-nobody, .jc-status { font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .04em; text-transform: uppercase; }
.jc-eng { color: var(--ink-2); background: var(--paper-deep); border-radius: 999px; padding: 4px 10px;
  min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-nobody { color: var(--terra-text); background: var(--terra-tint); border-radius: 999px; padding: 4px 10px;
  font-weight: 600; white-space: nowrap; }
.jc-status { color: var(--ink-2); white-space: nowrap; }
.jc-cover { font-size: var(--t-small); color: var(--ink-2); }
.job-card.skel { min-height: 108px; cursor: default; pointer-events: none; border-color: transparent;
  background: linear-gradient(90deg, var(--paper-deep), var(--card), var(--paper-deep));
  background-size: 200% 100%; animation: jbShimmer 1.2s ease-in-out infinite; }
@keyframes jbShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .job-card.skel { animation: none } }
.job-board .empty-state, .job-board .err-state { padding: 40px 16px; text-align: center;
  color: var(--ink-2); font-size: var(--t-body); }

/* ── Requests lane (customer-created live jobs awaiting the firm's one-tap
   Accept). Sits above the board; a request is an act-now item, so it leads and
   wears the warm terracotta edge. Same Fascia & Ledger tokens as the board. ── */
#jobRequests { display: flex; flex-direction: column; gap: var(--space-2, 10px);
  margin-bottom: var(--space-5, 20px); }
#jobRequests.hidden { display: none; }
#jobRequests:empty { display: none; }
.rq-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px); }
.rq-title { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); color: var(--ink); margin: 0; }
.rq-count { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase;
  color: var(--terra-text); background: var(--terra-tint); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.rq-sub { font-size: var(--t-small); color: var(--ink-2); margin: 0 0 var(--space-1, 4px); }
.req-card { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--terra-text);
  border-radius: var(--r-lg); padding: var(--space-4, 16px); }
.rq-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px); }
.rq-new { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase;
  color: var(--terra-text); white-space: nowrap; }
.rq-brief { margin: var(--space-2, 10px) 0 0; font-size: var(--t-body); color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.rq-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2, 10px); }
.rq-photos:empty { display: none; margin-top: 0; }
.rq-ph { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--paper-deep); flex: 0 0 auto; }
.rq-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rq-actions { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-4, 16px); flex-wrap: wrap; }
.rq-actions .btn-primary { flex: 1 1 auto; }
.rq-declinebox { margin-top: var(--space-3, 12px); }
.rq-declinebox.hidden { display: none; }
.rq-declabel { display: block; font-size: var(--t-small); color: var(--ink-2); margin-bottom: 6px; }
.rq-reason { width: 100%; min-height: 64px; resize: vertical; font: inherit; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); }
.rq-reason:focus-visible { outline: 2px solid var(--terra-text); outline-offset: 2px; }
.rq-decactions { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-2, 10px); flex-wrap: wrap; }
.rq-err { margin-top: var(--space-2, 10px); font-size: var(--t-small); color: var(--terra-text); }

/* Job detail (data-screen="job") — one job from the firm's seat: header · money · live feed. */
.jd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px); }
.jd-client { font-family: var(--sans); font-weight: 700; font-size: var(--t-h2); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.jd-addr { margin: var(--space-1, 4px) 0 0; font-size: var(--t-body); color: var(--ink-2); }
.jd-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3, 12px); margin: var(--space-4, 16px) 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.jd-money-v { font-size: var(--t-money, 1.75rem); color: var(--ink); }
.jd-money-paid { font-size: var(--t-body); color: var(--ok-ink); }
.jd-feed { display: flex; flex-direction: column; gap: var(--space-2, 10px); margin-top: var(--space-4, 16px);
  border-top: 1px solid var(--line); padding-top: var(--space-4, 16px); }
.jd-ev { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px);
  font-size: var(--t-body); color: var(--ink); }
.jd-ev-when { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; }

/* Text-button primitive (was undefined → rendered as raw UA chrome). Terracotta,
   underlined, 44px hit target. Used by the job loop's quiet secondary actions. */
.btn-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: none; border: 0; padding: 0 4px; font: inherit; color: var(--terra-text);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.btn-link:hover { text-decoration: none; }
.btn-link:focus-visible { outline: 2px solid var(--terra-text); outline-offset: 2px; border-radius: 4px; }

/* Job-detail dominant action + assigned line — one action per state, no dead doors. */
.jd-action { width: 100%; margin: var(--space-4, 16px) 0 var(--space-2, 10px); }
.jd-assigned { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px);
  margin: var(--space-4, 16px) 0 var(--space-2, 10px); }
.jd-assigned-who { font-size: var(--t-body); color: var(--ink); font-weight: 600; }
.jd-reroute { font-size: var(--t-label); }
.jd-born h4 { margin: 0 0 2px; }

/* Assign sheet — a dismissible bottom-sheet (backdrop + Esc) listing the crew. */
.job-sheet-ov { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,19,.44);
  display: flex; align-items: flex-end; justify-content: center; }
.job-sheet { width: 100%; max-width: 480px; background: var(--card); color: var(--ink);
  border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 -12px 40px rgba(20,20,19,.22); animation: sheetUp .24s var(--ease, ease); }
@media (min-width: 560px){ .job-sheet-ov { align-items: center; } .job-sheet { border-radius: var(--r-lg); } }
@keyframes sheetUp { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .job-sheet { animation: none; } }
.js-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  padding: var(--space-4, 16px); border-bottom: 1px solid var(--line); }
.js-head h3 { margin: 0; font-size: var(--t-h3); color: var(--ink); }
.js-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 0 4px; }
.js-body { padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-5, 20px); overflow-y: auto; }
.as-list { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
.as-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color .18s var(--ease, ease); }
.as-row:hover, .as-row:focus-visible { border-color: var(--terra-text); outline: none; }
.as-name { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.as-role { font-size: var(--t-label); color: var(--ink-2); text-transform: capitalize; }
.as-off { opacity: .55; cursor: default; }
.as-why { font-size: var(--t-label); color: var(--ink-3); }
.as-busy { opacity: .6; cursor: default; }
.job-sheet .empty-state, .job-sheet .err-state { padding: 28px 8px; text-align: center; color: var(--ink-2); font-size: var(--t-body); }

/* Job-detail actions block (primary + a quiet secondary) + paid-in-full line. */
.jd-actions { margin: var(--space-4, 16px) 0 var(--space-2, 10px); }
.jd-actions .jd-action { width: 100%; }
.jd-2nd-row { display: flex; justify-content: center; margin-top: var(--space-2, 10px); }
.jd-2nd { font-size: var(--t-label); }
.jd-paidfull { text-align: center; font-weight: 700; color: var(--ok-ink); font-size: var(--t-body); padding: 10px 0; }

/* Money panel — P&L stats under the value hero + scopes (multi-party breakdown). */
.jd-pl { margin: 0 0 var(--space-2, 10px); }
.jd-stats { display: flex; flex-wrap: wrap; gap: var(--space-5, 20px); }
.jd-stat { display: flex; flex-direction: column; gap: 2px; }
.jd-stat-v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-h3); color: var(--ink); }
.jd-stat-l { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.jd-ok { color: var(--ok-ink); }
.jd-warn { color: var(--terra-text); }
.jd-scopes { margin-top: var(--space-4, 16px); }
.scope-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px);
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.scope-l { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scope-title { font-weight: 600; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.scope-trade { font-size: var(--t-label); color: var(--ink-2); text-transform: capitalize; }
.scope-r { display: flex; align-items: center; gap: var(--space-2, 10px); white-space: nowrap; }
.scope-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-body); color: var(--ink); }

/* Payments strip — what's been billed on this job + whether it's paid. */
.jd-sec { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2);
  margin: var(--space-4, 16px) 0 var(--space-2, 10px); }
.pd-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px);
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.pd-l { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-stage { font-weight: 600; font-size: var(--t-body); color: var(--ink); }
.pd-memo { font-size: var(--t-label); color: var(--ink-2); overflow-wrap: anywhere; }
.pd-r { display: flex; align-items: center; gap: var(--space-2, 10px); white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.pd-amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-body); color: var(--ink); }
.pd-badge { font-family: var(--mono); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 9px; background: var(--paper-deep); }
.pd-sent { color: var(--ink-2); }
.pd-paid { color: var(--ok-ink); font-weight: 600; }
.pd-void { color: var(--ink-3); text-decoration: line-through; }
.pd-copy { font-size: var(--t-small); }

/* Pay composer form (inside .job-sheet). Reuses the console .seg for the stage. */
.pc-form { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
.pc-lbl { font-size: var(--t-label); color: var(--ink-2); margin-top: var(--space-2, 10px); }
.pc-opt { color: var(--ink-3); font-weight: 400; }
/* Record-payment sheet: a one-line explainer above the form (cash bypasses Stripe). */
.pc-sub { font-size: var(--t-label); color: var(--ink-2); line-height: 1.45; margin: 0 0 var(--space-1, 6px); }
/* Separator between the two secondary job-detail links (Re-route · Record a payment). */
.jd-2nd-sep { color: var(--ink-3); padding: 0 6px; }
.pc-amtwrap { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0 12px; background: var(--card); }
.pc-cur { font-family: var(--mono); color: var(--ink-2); font-size: var(--t-body); }
.pc-amt { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-family: var(--mono);
  font-size: var(--t-money, 2rem); color: var(--ink); padding: 10px 4px; outline: none; }
.pc-memo { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--ink);
  font: inherit; padding: 12px; outline: none; }
.pc-memo:focus, .pc-amtwrap:focus-within { border-color: var(--terra-text); }
.pc-go { margin-top: var(--space-3, 12px); }
.pc-err { color: var(--terra-text); font-size: var(--t-label); margin: 4px 0 0; }
.pc-done { text-align: center; padding: 8px 4px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pc-tick { width: 44px; height: 44px; border-radius: 999px; background: var(--terra-tint); color: var(--terra-text);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.pc-url { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.pc-urlin { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-deep);
  color: var(--ink-2); font: inherit; font-size: var(--t-label); padding: 10px; }
.pc-note { color: var(--ink-2); font-size: var(--t-label); }
/* VAT read-out in the composer + on the payments strip (VAT-registered firms). */
.pc-vat { margin: 2px 0 0; font-family: var(--mono); font-size: var(--t-label); color: var(--ink-2); }
.pc-rc { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: var(--t-label); color: var(--ink); cursor: pointer; }
.pc-rc input { width: 18px; height: 18px; }
.pc-vatdone { font-family: var(--mono); font-size: var(--t-label); color: var(--ink-2); margin: 0; }
.pd-vat { font-size: var(--t-small); color: var(--ink-3); font-family: var(--mono); }
/* Account VAT/CIS settings card. */
.tax-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--ink); }
.tax-row input { width: 18px; height: 18px; flex: none; }
.tax-sub { margin: 8px 0; }

/* ── Subcontractors (#14, data-screen="subs") — the firm's vetted external
   installer roster + CIS-aware payouts. Owner/admin only (nav gate above).
   Big legible mobile rows, one tap. Add/verify/pay reuse the .job-sheet
   bottom-sheet + the .pc-form / .seg form primitives (no new sheet chrome). */
.subs-bar { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-bottom: var(--space-4, 16px); }
.subs-intro { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 64ch; }
.subs-bar .btn { align-self: flex-start; }
.subs-sec { font-size: var(--t-label); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2);
  margin: var(--space-5, 20px) 0 var(--space-2, 10px); }
.subs-sec .subs-count { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.subs-empty, .subs-err { padding: 26px 12px; text-align: center; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card); }
.subs-err { color: var(--terra-text); }

/* Roster rows — company · CIS band · vetted status (one tap → verify sheet). */
.sub-list { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
.sub-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .18s var(--ease, ease); }
.sub-row:hover, .sub-row:focus-visible { border-color: var(--terra-text); outline: none; }
.sub-l { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sub-name { font-weight: 600; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.sub-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cis-chip { font-family: var(--mono); font-size: var(--t-label); color: var(--ink-2);
  background: var(--paper-deep); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sub-badge { font-family: var(--mono); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex: none; background: var(--paper-deep); color: var(--ink-2); }
.sub-vetted { color: var(--ok-ink); font-weight: 600; }
.sub-pending { color: var(--ink-2); }
.sub-susp { color: var(--terra-text); }

/* APPLICANTS / HIRING rows — applicant · mobile · Gas Safe no. · applied date,
   with Activate (→ engineer) / Decline actions. Shares the roster visual system
   (card, ink tokens, cis-chip for the Gas Safe number) so it reads as one console. */
.appl-list { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
.appl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); color: var(--ink); }
.appl-row.appl-resolved { opacity: .72; }
.appl-l { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.appl-l .sub-meta-i { font-size: var(--t-label); color: var(--ink-2); white-space: nowrap; }
.appl-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.appl-badge { font-family: var(--mono); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap; flex: none; background: var(--paper-deep); }
.appl-badge.appl-on { color: var(--ok-ink); font-weight: 600; }
.appl-badge.appl-off { color: var(--ink-2); }

/* A tappable crew row (joined engineer) → their live jobs. Button reset over the
   shared .appl-row shell; the chevron only rides tappable rows. */
.eng-crew-open { font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color .12s ease; }
.eng-crew-open:hover, .eng-crew-open:focus-visible { border-color: var(--terra-text); outline: none; }
.eng-crew-chev { flex: none; color: var(--ink-2); font-size: 22px; line-height: 1; margin-left: 2px; }
/* Invite-by-link panel — an email + the copyable join link. */
.eng-invite { flex-direction: column; align-items: stretch; }
.eng-invite h4 { margin: 0 0 2px; }
.eng-invite p { margin: 0; }
.eng-invite .eng-invite-row { align-items: center; }

/* To-pay rows — a completed sub job awaiting payout; the Pay button is the action. */
.stp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px);
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.stp-l { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stp-co { font-weight: 600; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.stp-addr { font-size: var(--t-label); color: var(--ink-2); overflow-wrap: anywhere; }
.stp-r { display: flex; align-items: center; gap: var(--space-2, 10px); white-space: nowrap; flex: none; }
.stp-gross { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-body); color: var(--ink); }

/* CIS breakdown in the pay sheet — Gross → CIS withheld → Net to pay, plain +
   honest. The withheld line renders ONLY when CIS applies (the firm is a CIS
   contractor and the deduction is non-zero); otherwise it's a single Net line. */
.cis-break { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper-deep);
  padding: var(--space-3, 12px) var(--space-4, 16px); margin: var(--space-3, 12px) 0; display: flex; flex-direction: column; gap: 9px; }
.cis-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3, 12px); font-size: var(--t-body); }
.cis-line .cis-k { color: var(--ink-2); }
.cis-line .cis-v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.cis-line.cis-withheld .cis-v { color: var(--terra-text); }
.cis-net { border-top: 1px solid var(--line-strong); margin-top: 2px; padding-top: 11px; }
.cis-net .cis-k { color: var(--ink); font-weight: 700; }
.cis-net .cis-v { font-size: var(--t-h3); font-weight: 700; color: var(--ink); }
.cis-note { font-size: var(--t-label); color: var(--ink-3); line-height: 1.5; margin: 2px 0 0; }

/* Unified assign (#14) — the My crew | Subcontractors segmented control sits
   between the sheet head and body; equal big targets. It hides during the
   focused "agreed price" offer step (.as-hidden). */
.as-seg { display: flex; margin: var(--space-3, 12px) var(--space-4, 16px) 0; }
.as-seg button { flex: 1; }
.as-seg.as-hidden { display: none; }
.as-offer-who { margin: 0 0 2px; font-size: var(--t-body); color: var(--ink); }
.as-back { align-self: flex-start; }

/* ── Proof — the job's on-site photo evidence gallery (data-screen="job").
   Photo-forward: big square thumbs; a "Taken on site" badge (the crew's
   --ok-ink green, NOT terracotta) on any provenanced capture; tap → lightbox.
   The case-study money shot: every job, photo-proven. Namespaced jdp-/jdlb-
   so it never collides with the website-builder Proof screen (.proof-item). */
.jd-proof { margin-top: var(--space-4, 16px); }
.jdp-sec { display: flex; align-items: baseline; gap: var(--space-2, 10px); flex-wrap: wrap; }
.jdp-count { font-family: var(--mono); font-size: var(--t-small); text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.jdp-empty { padding: 22px 16px; text-align: center; color: var(--ink-2); font-size: var(--t-body);
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card); }
.jdp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2, 10px); }
.jdp-cell { position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--paper-deep); cursor: pointer; aspect-ratio: 1;
  -webkit-tap-highlight-color: transparent; transition: border-color .18s var(--ease, ease), transform .12s var(--ease, ease); }
.jdp-cell:hover, .jdp-cell:focus-visible { border-color: var(--terra-text); outline: none; }
.jdp-cell:active { transform: scale(.985); }
.jdp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jdp-badge { position: absolute; left: 6px; bottom: 6px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .03em; text-transform: uppercase; background: var(--ok-ink); color: #fff;
  padding: 3px 6px; border-radius: 5px; box-shadow: 0 1px 3px rgba(20,20,19,.35); pointer-events: none; }

/* Proof lightbox — dark full-bleed overlay; tap backdrop / Esc / × to close,
   ‹ › (or arrow keys) to page. Self-contained; never touches the sheet. */
.jdlb-ov { position: fixed; inset: 0; z-index: 70; background: rgba(20,20,19,.9);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.jdlb-box { position: relative; width: 100%; max-width: 900px; max-height: 92vh;
  display: flex; align-items: center; justify-content: center; }
.jdlb-img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r-sm);
  box-shadow: 0 12px 48px rgba(0,0,0,.5); }
.jdlb-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 999px;
  background: rgba(20,20,19,.55); color: #fff; font-size: 26px; line-height: 40px; text-align: center;
  cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.jdlb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 66px; border: 0;
  background: rgba(20,20,19,.42); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
  border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent; }
.jdlb-prev { left: 2px; } .jdlb-next { right: 2px; }
.jdlb-nav:hover { background: rgba(20,20,19,.62); }
.jdlb-pos { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-family: var(--mono);
  font-size: var(--t-small); color: rgba(255,255,255,.82); }
@media (prefers-reduced-motion: reduce){ .jdp-cell, .jdp-cell:active { transition: none; transform: none; } }

/* ============================================================
   ENGINEER (crew) SURFACE — Phase 2. The tradesperson's phone view.
   Mobile-first (390px), camera-first, huge thumb targets, plain words.
   Fascia & Ledger tokens only. An engineer on a ladder with cold hands
   must be able to hit every control. NO money/margin renders on any of
   these screens (Earnings shows the engineer's OWN pay only).
   ============================================================ */

/* ---- ROLE GATE — the whole console flips to the crew view when the signed-in
   user's role is "engineer" (#view-app[data-role="engineer"], set by
   applyRoleVisibility() off /auth/me). The firm rail, firm bottom-bar and firm
   topbar CTAs hide; the two crew items show. Default: crew items hidden for all. ---- */
.nav-item-eng, .botnav-eng { display: none; }
#view-app[data-role="engineer"] .side-nav .nav-item:not(.nav-item-eng) { display: none !important; }
#view-app[data-role="engineer"] .nav-item-eng { display: flex !important; }
#view-app[data-role="engineer"] .botnav .botnav-item:not(.botnav-eng) { display: none !important; }
#view-app[data-role="engineer"] .botnav-eng { display: flex !important; }
/* the firm's concierge topbar CTAs + "Ask" FAB + setup checklist are not the crew's */
#view-app[data-role="engineer"] .tb-actions,
#view-app[data-role="engineer"] .care-fab,
#view-app[data-role="engineer"] #sfChecklist { display: none !important; }

/* ---- SUBCONTRACTOR GATE — an external sub (role engineer + subcontractor_id)
   gets their OWN single-surface portal. Hide EVERYTHING firm + crew: all rails,
   both bottom bars, topbar CTAs. Their whole app is the sub portal screen. ---- */
#view-app[data-role="subcontractor"] .side-nav .nav-item,
#view-app[data-role="subcontractor"] .botnav .botnav-item,
#view-app[data-role="subcontractor"] .tb-actions,
#view-app[data-role="subcontractor"] .care-fab,
#view-app[data-role="subcontractor"] #sfChecklist,
#view-app[data-role="subcontractor"] #railBuildStamp { display: none !important; }

/* ---- SUBCONTRACTOR PORTAL ---- */
.sub-portal { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.sp-head h2 { margin: 0; font-family: var(--display, inherit); }
.sp-head p { margin: 2px 0 0; }
.sp-earn { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-earn-cell { flex: 1 1 0; min-width: 96px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); display: flex; flex-direction: column; gap: 3px; }
.sp-earn-k { font-size: var(--t-label); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.sp-earn-v { font-family: var(--mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-list { display: flex; flex-direction: column; gap: 10px; }
.sp-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.sp-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sp-addr { font-weight: 600; min-width: 0; }
.sp-pc { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); flex: none; }
.sp-amt { margin: 6px 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sp-note { margin: 6px 0 0; font-size: 13.5px; }
.sp-actions { display: flex; gap: 8px; margin-top: 12px; }
.sv-app { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
/* Sub completion proof thumbnails */
.sp-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.sp-proof:empty { margin: 0; }
.sp-proof-t { width: 60px; height: 60px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-deep) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-family: var(--mono); flex: none; }
.sp-proof-up { animation: sp-pulse 1s ease-in-out infinite; }
.sp-proof-err { color: #a8482b; border-color: #a8482b; }
@keyframes sp-pulse { 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* ===== SUB SURFACES UPGRADE (Fable) ===== */
/* Card as a door + net-first money */
.sp-card-open { position: relative; display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sp-card-open:focus-visible { outline: 2px solid var(--terra-text, var(--terra)); outline-offset: 3px; border-radius: 8px; }
.sp-card-go { position: absolute; top: 0; right: 0; color: var(--ink-2); font-size: 22px; line-height: 1; }
.sp-card-meta { display: flex; gap: 8px; margin: 6px 0 0; }
.sp-trade { font-family: var(--mono); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em;
  color: var(--terra-text, var(--terra)); background: var(--paper-deep); border-radius: 999px; padding: 3px 10px; }
.sp-amt-sub { color: var(--ink-2); font-weight: 400; font-size: 13px; }
.sp-amt-lg { font-size: 26px; }
.sp-detail-money { margin: 14px 0 4px; }
.sp-dir { margin: 8px 0 4px; }
.sp-actions-lg { flex-direction: column; margin-top: 20px; }
/* Net-first earnings hero + CIS explainer */
.sp-earn-hero { flex: 1 1 100%; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sp-earn-hero .sp-earn-k { color: rgba(255,255,255,.7); }
.sp-cis-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--paper-deep); color: var(--ink-2); }
.sp-cis-line:hover { border-color: var(--terra-text, var(--terra)); }
.sp-cis-q { color: var(--terra-text, var(--terra)); font-weight: 600; white-space: nowrap; }
.sp-cis-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); font-family: var(--mono); }
.sp-cis-total b { font-size: 18px; }
/* Sub job detail headers (match the universal-job language) */
.uj-addr { font-family: var(--display, inherit); font-size: 26px; margin: 10px 0 4px; text-wrap: balance; }
.uj-sub { color: var(--ink-2); font-size: 14px; margin-bottom: 6px; }
.uj-trade { font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--terra-text, var(--terra)); }
.uj-h { font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 24px 0 10px; }
.uj-when-act { color: var(--terra-text, var(--terra)); font-weight: 600; text-decoration: none; }
/* Firm lifecycle board — lanes + proof + app-access chips */
.subs-sec.subs-urgent { color: var(--terra-text, var(--terra)); }
.stp-note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.stp-proof { display: flex; gap: 6px; margin-top: 8px; }
.stp-proof-t { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-deep) center/cover no-repeat; flex: none; }
.sub-app-on { color: var(--ok-ink, #2f6f4f); }
.sub-app-off { color: var(--ink-2); }

/* ---- MONEY-ROLE GATE (#14) — Subcontractors is sub management + CIS payouts,
   a money/admin surface. Hidden by default; revealed ONLY for a money-role seat
   (owner/admin/commercial/finance), mirroring the jobs-board money boundary
   (_FEED_MONEY_ROLES). The signed-out demo / pre-hydration (no [data-role]) also
   shows it so the rail reads complete — the screen itself gates to a sign-in
   prompt. A crew (engineer, already hidden by the rule above), surveyor or viewer
   seat never sees it; showScreen bounces a #subs deep-link for those too. ---- */
.nav-item-subs { display: none; }
#view-app:not([data-role]) .nav-item-subs,
#view-app[data-role="owner"] .nav-item-subs,
#view-app[data-role="admin"] .nav-item-subs,
#view-app[data-role="commercial"] .nav-item-subs,
#view-app[data-role="finance"] .nav-item-subs { display: flex; }

/* ---- OWNER/ADMIN GATE (Applicants / Hiring) — reviewing job applications and
   turning an applicant into an engineer is a hire/admin action, so it's a
   tighter set than the money surfaces above: owner / admin / tenant_admin only
   (NOT commercial/finance). Hidden by default; revealed for those seats + the
   signed-out demo / pre-hydration (no [data-role]) so the rail reads complete
   (the screen itself gates to a sign-in prompt). A crew/surveyor/viewer seat
   never sees it; showScreen also bounces an #applicants deep-link. Server-side,
   the endpoints are _require_tenant_admin — this CSS is UX, not the boundary. ---- */
.nav-item-hiring { display: none; }
#view-app:not([data-role]) .nav-item-hiring,
#view-app[data-role="owner"] .nav-item-hiring,
#view-app[data-role="admin"] .nav-item-hiring,
#view-app[data-role="tenant_admin"] .nav-item-hiring { display: flex; }

/* ---- MONEY-ROLE GATE (Live Trade Ledger) — Quotes / Invoices / CIS / VAT are
   the firm's accounts (the canonical owner ledger). Same money-role set + gate as
   Subcontractors above: hidden by default; revealed ONLY for owner/admin/
   commercial/finance (and the signed-out demo, whose screens gate to a sign-in
   prompt). A crew/technical/viewer seat never sees them; showScreen also bounces a
   deep-link. Server-side, every read is own-scoped to the owner's job-party
   membership — this CSS is UX, not the security boundary. ---- */
.nav-item-money { display: none; }
#view-app:not([data-role]) .nav-item-money,
#view-app[data-role="owner"] .nav-item-money,
#view-app[data-role="admin"] .nav-item-money,
#view-app[data-role="commercial"] .nav-item-money,
#view-app[data-role="finance"] .nav-item-money { display: flex; }

/* ---- Live Trade Ledger money-tab surfaces (lgr-*) — theme-token styled so they
   read as one system in the console (terracotta "Ink & Signal"). ---- */
.lgr-intro { color: var(--fg-soft); font-size: var(--text-sm); margin: 4px 2px 14px; line-height: 1.5; }
.lgr-topbar { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; }
.lgr-topbar .lgr-intro { flex: 1; margin-bottom: 8px; }
.lgr-topbar .lgr-newjob { flex: none; white-space: nowrap; }
.lgr-cta { text-align: center; }
.lgr-cta .lgr-actions { justify-content: center; }
.lgr-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.lgr-jobblock { margin-bottom: 22px; }
.lgr-jobhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lgr-jobhead b { font-family: var(--display); }
.lgr-jobstatus { color: var(--fg-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.lgr-jobhead .lgr-newquote { margin-left: auto; }
.lgr-empty-quiet { color: var(--fg-faint); font-size: var(--text-sm); padding: 6px 2px 12px; }
.lgr-quote-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lgr-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; background: var(--line-soft); color: var(--fg-soft); }
.lgr-pill-info { background: var(--signal-soft); color: var(--signal-deep); }
.lgr-pill-ok { background: var(--ok-soft); color: var(--ok-ink); }
.lgr-pill-warn { background: var(--warn-soft); color: var(--fg); }
.lgr-pill-block { background: var(--block-soft); color: var(--block); }
.lgr-muted, .lgr-notes { color: var(--fg-faint); font-size: var(--text-sm); }
.lgr-notes { margin-top: 10px; }
.lgr-figs, .lgr-prog { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 8px; }
.lgr-fig { display: flex; flex-direction: column; }
.lgr-fig-l { color: var(--fg-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.lgr-fig-v { font-variant-numeric: tabular-nums; font-weight: 600; }
.lgr-fig-strong .lgr-fig-v { font-size: var(--text-lg, 18px); }
.lgr-lines { border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 10px; }
.lgr-line { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 5px 0; font-size: var(--text-sm); }
.lgr-line-m { color: var(--fg-faint); font-size: var(--text-xs); }
.lgr-line-t { font-variant-numeric: tabular-nums; font-weight: 600; }
.lgr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lgr-hero { display: flex; flex-direction: column; gap: 4px; background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: var(--r); padding: 18px; margin-bottom: 14px; }
.lgr-hero-v { font-family: var(--display); font-size: 30px; font-variant-numeric: tabular-nums; color: var(--signal-deep); }
.lgr-hero-l { color: var(--fg-soft); font-size: var(--text-sm); line-height: 1.4; }
.lgr-note { color: var(--fg-soft); font-size: var(--text-sm); background: var(--line-soft); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 14px; }
.lgr-note-warn { background: var(--warn-soft); border: 1px solid var(--warn-line); }
.lgr-seg { display: inline-flex; gap: 2px; background: var(--line-soft); border-radius: var(--r-sm); padding: 3px; margin-bottom: 14px; }
.lgr-seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--r-sm); font-size: var(--text-sm); color: var(--fg-soft); cursor: pointer; }
.lgr-seg button[aria-pressed="true"] { background: var(--paper); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.lgr-pickrow { margin-bottom: 14px; }
.lgr-cissub-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lgr-cissub-top b { font-family: var(--display); }
.lgr-vatgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lgr-vatbox { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.lgr-vatbox-n { color: var(--signal-deep); font-size: var(--text-xs); font-weight: 700; }
.lgr-vatbox-l { color: var(--fg-faint); font-size: var(--text-xs); }
.lgr-f { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-sm); }
.lgr-f > span { color: var(--fg-soft); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.lgr-f input, .lgr-f select, .lgr-f textarea { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--fg); font: inherit; }
.lgr-f-wide { width: 100%; }
.lgr-sheet .js-body { display: flex; flex-direction: column; gap: 14px; }
.lgr-qb-line { display: grid; grid-template-columns: 1fr 64px 100px 90px 32px; gap: 8px; align-items: center; }
.lgr-qb-line input, .lgr-qb-line select { padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--fg); font: inherit; min-width: 0; }
.lgr-qb-rm { border: 0; background: transparent; color: var(--fg-faint); font-size: 20px; cursor: pointer; line-height: 1; }
.lgr-qb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.lgr-qb-total { border-top: 1px solid var(--line-soft); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 18px; }
@media (max-width: 560px){ .lgr-qb-line { grid-template-columns: 1fr 1fr; } .lgr-line { grid-template-columns: 1fr auto; } }

/* ---- ACCEPT is pre-auth: strip ALL shell chrome so a signed-out invitee sees
   only the join card, full-bleed. ---- */
#view-app[data-eng-accept] { display: block !important; }
#view-app[data-eng-accept] .side,
#view-app[data-eng-accept] .mtop,
#view-app[data-eng-accept] .topbar,
#view-app[data-eng-accept] .botnav,
#view-app[data-eng-accept] .care-fab,
#view-app[data-eng-accept] #demoStrip { display: none !important; }
#view-app[data-eng-accept] .content { padding: 0; }

/* ---- Layout: one calm column, thumb-reachable, never wider than a phone even on
   a desktop (an engineer is on a phone; keep the line length honest). The bottom
   padding clears the mobile bottom bar + the phone's home-indicator safe area. ---- */
.eng-wrap { max-width: 480px; margin: 0 auto; padding: var(--space-2, 10px) 0 calc(96px + env(safe-area-inset-bottom)); }
.eng-h { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); color: var(--ink); margin: 0 0 var(--space-1, 4px); }
.eng-sub { font-size: var(--t-body); color: var(--ink-2); margin: 0 0 var(--space-4, 16px); }
.eng-empty, .eng-err { text-align: center; padding: 44px 18px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
.eng-err { color: var(--terra-text); }
.eng-skel { height: 96px; border-radius: var(--r-lg); background: linear-gradient(100deg, var(--paper-deep) 30%, var(--card) 50%, var(--paper-deep) 70%);
  background-size: 200% 100%; animation: engSkel 1.1s ease-in-out infinite; margin-bottom: var(--space-3, 12px); }
@keyframes engSkel { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce){ .eng-skel { animation: none } }

/* ---- The one thumb button used across the surface. Min 56px tall so a cold
   thumb on a ladder cannot miss it. ---- */
.eng-act { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; padding: 0 18px;
  border-radius: var(--r-md); font-family: var(--sans); font-weight: 700; font-size: var(--t-body); cursor: pointer;
  border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent; text-decoration: none; box-sizing: border-box; }
.eng-act svg { width: 22px; height: 22px; flex: none; }
.eng-act-primary { background: var(--terra); color: #fff; box-shadow: var(--shadow-soft); }
.eng-act-primary:active { background: var(--terra-deep); transform: translateY(1px); }
.eng-act-ghost { background: var(--card-lift); color: var(--ink); border-color: var(--line-strong); }
.eng-act-ghost:active { border-color: var(--ink); transform: translateY(1px); }
.eng-act:focus-visible { outline: 3px solid var(--terra-text); outline-offset: 2px; }
.eng-act[disabled], .eng-act[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ============ MY JOBS ============ */
.eng-jobs { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.eng-daygroup { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--terra-text); margin: var(--space-5,20px) 2px var(--space-1,4px); }
.eng-daygroup:first-child { margin-top: var(--space-1,4px); }
/* a whole job = one big tappable card; the address is the hero, status is a plain
   chip, Navigate is a fat thumb button. Revenue/cost are never shown. */
.eng-jcard { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-4, 16px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.eng-jcard:active { transform: scale(.99); }
.eng-jcard:focus-visible { outline: 3px solid var(--terra-text); outline-offset: 2px; }
.eng-jcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px); }
.eng-jaddr { font-family: var(--sans); font-weight: 700; font-size: var(--t-lead); line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.eng-jpost { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); margin-top: 3px; letter-spacing: .04em; }
.eng-jstatus { flex: none; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; background: var(--paper-deep); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.eng-jstatus.is-now { background: var(--terra); color: #fff; border-color: transparent; }
.eng-jstatus.is-done { background: var(--ok-tint); color: var(--ok-ink); border-color: transparent; }
.eng-jacts { display: flex; gap: var(--space-2, 10px); margin-top: var(--space-4, 16px); }
.eng-jacts .eng-act { flex: 1; }

/* ============ JOB WORK-VIEW (camera-first) ============ */
.eng-job-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); padding: 8px 4px 8px 0; margin-bottom: var(--space-1,4px); }
.eng-job-back svg { width: 18px; height: 18px; }
.eng-job-addr { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.eng-job-post { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); margin-top: 4px; letter-spacing: .04em; }
/* THE camera button — the biggest, most obvious thing on the screen */
.eng-camera { width: 100%; min-height: 96px; margin: var(--space-4,16px) 0; border-radius: var(--r-lg); background: var(--terra);
  color: #fff; border: 0; cursor: pointer; box-shadow: var(--shadow-lift); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; font-family: var(--sans); font-weight: 800; font-size: var(--t-lead);
  -webkit-tap-highlight-color: transparent; }
.eng-camera:active { background: var(--terra-deep); transform: translateY(1px); }
.eng-camera:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.eng-camera svg { width: 40px; height: 40px; }
.eng-camera .eng-camera-sub { font-family: var(--mono); font-weight: 600; font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.eng-camera[disabled] { opacity: .7; pointer-events: none; }
/* the just-added photos strip (optimistic thumbnails from the phone) */
.eng-shots { display: flex; gap: var(--space-2,10px); flex-wrap: wrap; margin: 0 0 var(--space-2,10px); }
.eng-shot { position: relative; width: 84px; height: 84px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--paper-deep); }
.eng-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eng-shot .eng-onsite { position: absolute; left: 4px; bottom: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .03em;
  text-transform: uppercase; background: var(--ok-ink); color: #fff; padding: 2px 5px; border-radius: 4px; }
.eng-shot.is-up::after { content: "\2713"; position: absolute; top: 3px; right: 5px; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.eng-shot.is-fail { opacity: .5; }
.eng-shot.is-fail::after { content: "\21BA"; position: absolute; top: 3px; right: 5px; color: #fff; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* section label inside the work view */
.eng-sec { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: var(--space-5,20px) 2px var(--space-2,10px); }
/* mark-progress segmented control — three fat targets */
.eng-prog { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2,10px); }
.eng-prog button { min-height: 66px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: var(--card-lift); color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: var(--t-small); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; -webkit-tap-highlight-color: transparent; }
.eng-prog button svg { width: 24px; height: 24px; }
.eng-prog button:active { transform: translateY(1px); }
.eng-prog button[aria-pressed="true"] { background: var(--terra); color: #fff; border-color: transparent; }
.eng-prog button[disabled] { opacity: .5; pointer-events: none; }
.eng-receipt { margin-top: var(--space-3,12px); width: 100%; }
/* the money-redacted job feed — plain beats, newest first */
.eng-feed { display: flex; flex-direction: column; margin-top: var(--space-2,10px); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.eng-fev { display: flex; align-items: center; gap: var(--space-3,12px); padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.eng-fev:last-child { border-bottom: 0; }
.eng-fev-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); flex: none; }
.eng-fev-t { font-size: var(--t-body); color: var(--ink); flex: 1; }
.eng-fev-badge { font-family: var(--mono); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; background: var(--ok-ink); color: #fff; padding: 2px 6px; border-radius: 4px; flex: none; }
.eng-fev-when { font-family: var(--mono); font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; flex: none; }
.eng-feed .eng-empty { padding: 28px 16px; }

/* ============ EARNINGS (a payslip, not a dashboard) ============ */
.eng-owed { background: var(--ink); color: var(--cream); border-radius: var(--r-lg); padding: var(--space-5,20px) var(--space-4,16px); text-align: center; margin-bottom: var(--space-4,16px); }
.eng-owed-l { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.eng-owed-v { font-family: var(--sans); font-weight: 800; font-size: var(--t-money); line-height: 1; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.eng-owed-v.is-text { font-size: var(--t-h3); line-height: 1.25; }
.eng-owed-n { font-size: var(--t-small); opacity: .82; }
.eng-earn-sec { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: var(--space-5,20px) 2px var(--space-2,10px); }
.eng-earn-rows { display: flex; flex-direction: column; gap: var(--space-2,10px); }
.eng-erow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3,12px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.eng-erow-l { min-width: 0; }
.eng-erow-addr { font-weight: 600; font-size: var(--t-body); color: var(--ink); overflow-wrap: anywhere; }
.eng-erow-stage { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.eng-erow-v { font-family: var(--sans); font-weight: 800; font-size: var(--t-lead); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eng-erow-v.is-paid { color: var(--ok-ink); }

/* ============ ACCEPT / ONBOARD ============ */
.eng-accept { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); background: var(--paper); }
.eng-accept-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 28px 24px; }
.eng-accept-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.eng-accept-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; background: var(--paper-deep); }
.eng-accept-firm { font-family: var(--sans); font-weight: 800; font-size: var(--t-h3); color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.eng-accept-h { font-family: var(--sans); font-weight: 700; font-size: var(--t-lead); color: var(--ink); margin: 0 0 6px; }
.eng-accept-p { font-size: var(--t-body); color: var(--ink-2); margin: 0 0 18px; line-height: 1.45; }
.eng-accept-email { font-family: var(--mono); font-size: var(--t-small); color: var(--ink); background: var(--paper-deep); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 16px; overflow-wrap: anywhere; }
.eng-accept label { display: block; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px; }
.eng-accept input[type=password] { width: 100%; min-height: 56px; box-sizing: border-box; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--card-lift); color: var(--ink); font-size: 17px; padding: 0 14px; font-family: var(--sans); }
.eng-accept input[type=password]:focus { outline: none; border-color: var(--terra-text); }
.eng-accept .eng-act { width: 100%; margin-top: 18px; }
.eng-accept-hint { font-size: var(--t-small); color: var(--ink-3); margin: 8px 2px 0; }
.eng-accept-msg { font-size: var(--t-small); margin: 12px 0 0; padding: 10px 12px; border-radius: var(--r-sm); display: none; line-height: 1.45; }
.eng-accept-msg.show { display: block; }
.eng-accept-msg.err { background: rgba(199,91,57,.1); color: var(--terra-text); }
.eng-accept-msg.ok { background: var(--ok-tint); color: var(--ok-ink); }
.eng-accept-signin { display: block; text-align: center; margin-top: 16px; font-size: var(--t-small); color: var(--terra-text); background: none; border: 0; cursor: pointer; width: 100%; font-family: var(--sans); font-weight: 600; }

/* ═══════════ UNIVERSAL JOB (data-screen="ujob") — the tabbed job shell ═══════
   Elevated (Fable): the accent means ONE thing — terracotta is reserved for NOW
   + action; done history is calm ink. Hierarchy through material — exactly two
   surfaces lift (the Margin hero + the customer's bill). All colour flows
   through the app tokens; derived tints use color-mix(), never a new hex. The
   4 honest margin states always carry the WORD, never colour alone. */
:root{ --uj-ok:#2f7d57; --uj-tight:#b07d17; --uj-thin:#c0602a; --uj-loss:#c0392b; --uj-ease:cubic-bezier(.2,.7,.2,1); }
.uj-body :focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:6px}
.uj-body{max-width:640px;margin:0 auto;padding:var(--space-4) var(--space-4) 72px}

/* HEADER */
.uj-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-2) 0 var(--space-5)}
.uj-back{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4) 0 var(--space-3);border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent);transition:color .15s ease,border-color .15s ease,transform .12s ease}
.uj-back:hover{color:var(--terra-text);border-color:color-mix(in srgb,var(--terra) 40%,transparent)}
.uj-back:active{transform:scale(.97)}
.uj-title h2{font-family:var(--display);font-size:24px;line-height:1.12;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.uj-title p{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:9px;color:var(--ink-2);font-size:13px;line-height:1.4;font-weight:500}
.uj-fam{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--terra) 10%,transparent);color:var(--terra-text);font-size:12px;font-weight:700;letter-spacing:.01em}

/* TAB BAR */
.uj-tabs{position:sticky;top:0;z-index:20;display:flex;gap:2px;overflow-x:auto;background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.uj-tabs::-webkit-scrollbar{display:none}
.uj-tab{position:relative;flex:0 0 auto;min-height:48px;padding:13px 14px 12px;background:none;border:0;color:var(--ink-2);font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:color .15s ease}
.uj-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--terra);opacity:0;transform:scaleX(.5);transition:opacity .18s ease,transform .22s var(--uj-ease)}
.uj-tab:hover{color:var(--ink)}
.uj-tab[aria-selected="true"]{color:var(--ink)}
.uj-tab[aria-selected="true"]::after{opacity:1;transform:none}
.uj-tab:focus-visible{outline-offset:-3px}
.uj-panel{padding:var(--space-5) 0 var(--space-6);animation:ujIn .35s var(--uj-ease) both}
@keyframes ujIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.uj-lbl{margin:28px 0 10px;font-family:var(--sans);font-size:11px;line-height:1.45;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.uj-panel .uj-lbl:first-child,.uj-brief .uj-lbl{margin-top:2px}

/* THE BRIEF */
.uj-brief-t{position:relative;padding:var(--space-4) 18px var(--space-4) var(--space-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);line-height:1.55;font-size:15px;color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent)}
.uj-brief-t::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--terra)}

/* TIMELINE */
.uj-time{list-style:none;padding-top:2px}
.uj-tl{position:relative;display:flex;gap:var(--space-4);padding-bottom:var(--space-5)}
.uj-tl:last-child{padding-bottom:var(--space-1)}
.uj-tl::before{content:"";position:absolute;left:9px;top:25px;bottom:1px;width:2px;border-radius:1px;background:var(--line)}
.uj-tl.done::before{background:var(--line-strong)}
.uj-tl:last-child::before{display:none}
.uj-dot{position:relative;width:20px;height:20px;flex:0 0 auto;margin-top:1px;border-radius:50%;background:var(--card-lift);border:2px solid var(--line-strong)}
.uj-tl.done .uj-dot{background:var(--ink);border-color:var(--ink)}
.uj-tl.done .uj-dot::after{content:"";position:absolute;left:4.5px;top:5px;width:7px;height:3.5px;border-left:2px solid var(--card-lift);border-bottom:2px solid var(--card-lift);transform:rotate(-45deg)}
.uj-tl.current .uj-dot{background:var(--terra);border-color:var(--terra)}
.uj-tl.current .uj-dot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--terra);opacity:0;animation:ujPulse 2.4s cubic-bezier(.3,0,.4,1) infinite}
@keyframes ujPulse{0%{transform:scale(.55);opacity:.75}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
.uj-tb{display:flex;flex-direction:column;min-width:0;padding-top:1px}
.uj-tw{font-size:15px;line-height:1.4;font-weight:650;letter-spacing:-.005em}
.uj-tl.current .uj-tw{color:var(--terra-text)}
.uj-tl:not(.done):not(.current) .uj-tw{color:var(--ink-2);font-weight:500}
.uj-ts{margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.uj-tl:not(.done):not(.current) .uj-ts{color:color-mix(in srgb,var(--ink-2) 72%,var(--paper))}

/* BEATS */
.uj-beats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:560px){.uj-beats{grid-template-columns:repeat(4,1fr)}}
.uj-beat{min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px var(--space-2);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--card-lift);color:var(--ink);font-family:var(--sans);font-weight:650;font-size:13px;line-height:1.2;cursor:pointer;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent);transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.uj-beat svg{width:20px;height:20px;color:var(--ink-2);transition:color .18s ease}
.uj-beat:hover{border-color:color-mix(in srgb,var(--terra) 45%,transparent)}
.uj-beat:active{transform:scale(.96)}
.uj-beat[aria-pressed="true"]{background:var(--terra);border-color:var(--terra);color:var(--card-lift);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--card-lift) 22%,transparent),0 1px 2px color-mix(in srgb,var(--terra) 30%,transparent),0 8px 18px -8px color-mix(in srgb,var(--terra) 55%,transparent)}
.uj-beat[aria-pressed="true"] svg{color:var(--card-lift)}
.uj-beat:disabled{opacity:.55;cursor:default}
.uj-beat:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.uj-sync{display:flex;align-items:center;gap:8px;min-height:20px;margin:var(--space-3) 2px 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.uj-sync::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--line-strong)}
.uj-sync:empty::before{display:none}
.uj-sync.ok{color:var(--uj-ok);font-weight:600}
.uj-sync.ok::before{background:var(--uj-ok)}
.uj-sync.err{color:var(--uj-loss);font-weight:600}
.uj-sync.err::before{background:var(--uj-loss)}
.uj-undo{display:none}
.uj-undo.show{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3);padding:10px 10px 10px var(--space-4);border:1px solid color-mix(in srgb,var(--terra) 38%,transparent);border-radius:var(--r-md);background:var(--card);font-size:13px;line-height:1.45;color:var(--ink-2);animation:ujIn .3s var(--uj-ease) both}
.uj-undo.show span{flex:1 1 160px}
.uj-undo-btn{min-height:44px;padding:0 var(--space-5);border:0;border-radius:999px;background:var(--terra);color:var(--card-lift);font-family:var(--sans);font-weight:650;font-size:13px;cursor:pointer;transition:transform .12s ease,filter .15s ease}
.uj-undo-btn:hover{filter:brightness(.94)}
.uj-undo-btn:active{transform:scale(.97)}

/* MONEY — firm P&L behind the wall */
.uj-money-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:var(--space-4)}
.uj-wall{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11px;line-height:1.45;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.uj-wall svg{width:10px;height:12px}
.uj-cust-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:color-mix(in srgb,var(--terra) 10%,transparent);color:var(--terra-text);font-size:11px;line-height:1.45;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.uj-cust-tag svg{width:13px;height:13px}
.uj-vac{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:999px;background:var(--card-lift);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent);transition:color .15s ease,border-color .15s ease,transform .12s ease}
.uj-vac svg{width:15px;height:15px;color:var(--terra)}
.uj-vac:hover{color:var(--terra-text);border-color:color-mix(in srgb,var(--terra) 45%,transparent)}
.uj-vac:active{transform:scale(.97)}
.uj-pl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.uj-pl-s{padding:var(--space-4) var(--space-4) 15px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.uj-pl-s>span{display:block;font-size:11px;line-height:1.45;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.uj-pl-s>b{display:block;margin-top:6px;font-family:var(--mono);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.uj-margin{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;grid-template-areas:"l h" "v h" "m m";align-items:start;padding:var(--space-4) 18px 18px;background:var(--card-lift);border-color:var(--line-strong);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 14px 32px -14px color-mix(in srgb,var(--ink) 14%,transparent)}
.uj-margin>span{grid-area:l}
.uj-margin>b{grid-area:v;font-size:28px;margin-top:5px}
.uj-margin .uj-health{grid-area:h}
.uj-margin .uj-meter{grid-area:m}
.uj-health{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-style:normal;font-size:12px;line-height:1.45;font-weight:700}
.uj-health::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.uj-health.uj-ok{color:var(--uj-ok);background:color-mix(in srgb,var(--uj-ok) 12%,transparent)}
.uj-health.uj-tight{color:var(--uj-tight);background:color-mix(in srgb,var(--uj-tight) 13%,transparent)}
.uj-health.uj-thin{color:var(--uj-thin);background:color-mix(in srgb,var(--uj-thin) 13%,transparent)}
.uj-health.uj-loss{color:var(--uj-loss);background:color-mix(in srgb,var(--uj-loss) 12%,transparent)}
.uj-margin.uj-ok>b{color:var(--uj-ok)}
.uj-margin.uj-tight>b{color:var(--uj-tight)}
.uj-margin.uj-thin>b{color:var(--uj-thin)}
.uj-margin.uj-loss>b{color:var(--uj-loss)}
.uj-margin.uj-loss{border-color:color-mix(in srgb,var(--uj-loss) 45%,transparent)}
.uj-meter{margin-top:14px}
.uj-meter-bar{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden}
.uj-meter-bar i{height:100%}
.uj-meter-spend{background:color-mix(in srgb,var(--ink) 22%,var(--paper));border-radius:4px 0 0 4px}
.uj-meter-gain{background:var(--uj-ok);border-radius:0 4px 4px 0}
.uj-margin.uj-tight .uj-meter-gain{background:var(--uj-tight)}
.uj-margin.uj-thin .uj-meter-gain{background:var(--uj-thin)}
.uj-margin.uj-loss .uj-meter-gain{background:var(--uj-loss)}
.uj-meter-keys{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:7px;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink-2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.uj-buckets{list-style:none;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.uj-buckets li{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:13px var(--space-4) 19px;border-top:1px solid var(--line)}
.uj-buckets li:first-child{border-top:0}
.uj-buckets li span{font-size:14px;line-height:1.45;font-weight:500;color:var(--ink)}
.uj-buckets li b{font-family:var(--mono);font-weight:600;font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.uj-buckets li::before{content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:9px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 7%,transparent)}
.uj-buckets li::after{content:"";position:absolute;left:var(--space-4);bottom:9px;height:3px;border-radius:2px;width:calc((100% - 32px) * var(--w,0));background:color-mix(in srgb,var(--terra) 55%,transparent)}
.uj-ledger{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:560px){.uj-ledger{grid-template-columns:repeat(4,1fr)}}
.uj-link{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);font-family:var(--sans);text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.uj-link:not(:disabled):hover{border-color:color-mix(in srgb,var(--terra) 40%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent)}
.uj-link:disabled{cursor:default}
.uj-link>span{font-size:10.5px;line-height:1.45;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.uj-link>b{font-family:var(--mono);font-weight:600;font-size:14px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.uj-link>em{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ink-2)}

/* MONEY, FLIPPED — the customer's bill */
.uj-bill-zone{padding:var(--space-6) var(--space-4);border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--ink) 3%,var(--paper))}
.uj-bill{max-width:420px;margin:0 auto;padding:var(--space-5);border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--card-lift);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 20px 44px -18px color-mix(in srgb,var(--ink) 22%,transparent)}
.uj-bill-h{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}
.uj-bill-h b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.uj-bill-h span{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.uj-bill-h span svg{width:9px;height:11px}
.uj-bill-sub{margin:var(--space-4) 0 var(--space-1);font-size:13px;line-height:1.45;color:var(--ink-2)}
.uj-bill-r{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.uj-bill-r:first-of-type{border-top:0}
.uj-bill-r span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.uj-bill-r b{font-family:var(--mono);font-weight:600;font-size:15px;line-height:1.45}
.uj-bill-r.due{border-top:1px solid var(--line-strong)}
.uj-bill-r.due span{color:var(--ink);font-weight:650}
.uj-bill-r.due b{font-size:24px;line-height:1.2;letter-spacing:-.01em}
.uj-paybtn{display:block;width:100%;margin-top:var(--space-4);padding:15px var(--space-4);border:0;border-radius:var(--r-md);background:var(--terra);color:var(--card-lift);font-family:var(--sans);font-weight:650;font-size:15px;line-height:1.4;text-align:center}
.uj-bill-fine{margin-top:var(--space-3);font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-2);text-align:center}
.uj-face-note{margin-top:var(--space-3);font-size:12px;line-height:1.5;color:var(--ink-2);max-width:60ch}

/* PROOF */
.uj-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:520px){.uj-shots{grid-template-columns:repeat(3,1fr)}}
.uj-shot{position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--card)}
.uj-shot img{width:100%;height:100%;object-fit:cover;display:block}
.uj-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,color-mix(in srgb,var(--ink) 55%,transparent))}
.uj-shot figcaption{position:absolute;left:10px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:1.45;font-weight:650;color:var(--card-lift)}
.uj-shot figcaption::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}

/* UPDATES */
.uj-feed{list-style:none;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.uj-fi{padding:13px var(--space-4);border-top:1px solid var(--line)}
.uj-fi:first-child{border-top:0}
.uj-ft{font-size:14px;line-height:1.45;font-weight:600}
.uj-fb{margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.uj-fm{margin-top:6px;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink-2)}

/* FRACTAL CHILDREN — the Phases list + child drill-in (a build's sub-jobs) */
.uj-kids{list-style:none;display:flex;flex-direction:column;gap:10px}
.uj-kid{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;padding:var(--space-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);font-family:var(--sans);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.uj-kid:hover{border-color:color-mix(in srgb,var(--terra) 40%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent)}
.uj-kid:active{transform:scale(.99)}
.uj-kid:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.uj-kid-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.uj-kid-val{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.uj-kid-name{font-size:16px;font-weight:650;letter-spacing:-.01em}
.uj-kid-stage{font-size:12px;color:var(--ink-2)}
.uj-kid-bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.uj-kid-bar i{display:block;height:100%;border-radius:3px;background:var(--terra)}
.uj-kid-head{margin:var(--space-4) 0 var(--space-2);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.uj-kid-head h3{font-family:var(--display);font-size:20px;line-height:1.15;font-weight:700;letter-spacing:-.015em}
/* TEAM — the crew on the job */
.uj-team{list-style:none;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.uj-member{display:flex;align-items:center;gap:var(--space-3);padding:13px var(--space-4);border-top:1px solid var(--line)}
.uj-member:first-child{border-top:0}
.uj-av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--terra) 14%,transparent);color:var(--terra-text);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em}
.uj-mem-main{display:flex;flex-direction:column;min-width:0}
.uj-mem-name{font-size:15px;font-weight:650;letter-spacing:-.005em}
.uj-mem-sub{margin-top:1px;font-size:12.5px;color:var(--ink-2)}
.uj-empty{padding:var(--space-2) 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){ .uj-panel,.uj-tl.current .uj-dot::before,.uj-undo.show{animation:none!important} .uj-tab::after,.uj-beat,.uj-back,.uj-vac,.uj-undo-btn{transition:none!important} }