/* Caliber Hub — front door dashboard (Slice A B4)
   Built to Hub_Dashboard_{Desktop,Tablet,Phone}.dc.html on the Job Info
   design system (tokens mirror caliber-jobs-app/styles.css). Layout is
   DEVICE-TARGETED via html[data-device] (gate in index.html): desktop never
   morphs with width; tablet/phone are discrete targets. */

:root {
  --red:#E0301F; --red-hover:#C22819; --red-soft:rgba(224,48,31,.30);
  --hero:#141518; --hero-2:#17181A; --chip:#2A2B2E;
  --ink:#141518; --body:#1B1C1E; --muted:#8A8D90; --muted-2:#6B6E71; --grey:#4B4E52; --faint:#B0B2B5; --arrow:#C9CACD;
  --line:#E4E5E7; --line-2:#F0F0F1; --line-3:#EDEEEF; --line-4:#DDDEE0;
  --band:#FAFAFB; --paper:#FFFFFF; --head:#F1F1F3; --head-hover:#EAEAEC;
  --green:#1E7F4F; --green-line:#CDE3D7; --toggle-off:#CFD0D3;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--paper); color:var(--body); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }

.app { width:100%; background:var(--paper); min-height:100vh; }  /* design: full-bleed, no frame */
html[data-device="desktop"] .app { min-width:1180px; }  /* narrow desktop window scrolls — never morphs */

.state { padding:80px 30px; text-align:center; color:var(--muted); font:500 13px var(--mono); letter-spacing:.04em; }

/* ─── Sign-in screen (design_handoff_signin, 2026-08-03 — tokens are the
       handoff's, scoped to .auth; stacking keyed on device class, not width) ─── */
.auth { position:fixed; inset:0; z-index:50; display:flex; background:#FCFBF9; }
.auth[hidden] { display:none; }  /* author display:flex would otherwise defeat the hidden attribute */
.auth__brand { flex:0 0 50%; position:relative; overflow:hidden; padding:46px 44px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center;
  background:radial-gradient(120% 85% at 50% 30%, #242429 0%, #0F0F12 72%); }
.auth__bleed { position:absolute; left:-215px; bottom:-235px; width:600px; opacity:.10; pointer-events:none; }
.auth__tagline { font:400 10.5px var(--mono); letter-spacing:.2em; color:#6E6A66; }
.auth__lockup { display:flex; flex-direction:column; align-items:center; }
.auth__tall-logo { width:216px; height:auto; }
.auth__rule { width:52px; height:2px; background:#D8261C; margin:30px 0 16px; }
.auth__product { font:400 14px var(--mono); letter-spacing:.36em; text-indent:.36em; color:#D6D2CC; }
.auth__notice { font:400 10px var(--mono); letter-spacing:.18em; color:#5E5A55; }
.auth__pane { flex:1; display:flex; align-items:center; justify-content:center; padding:56px 40px; }
.auth__form { width:100%; max-width:356px; display:flex; flex-direction:column; gap:32px; }
.auth__title { margin:0; font:600 26px var(--sans); letter-spacing:-.02em; color:#1A1A1D; }
.auth__err { margin:-22px 0 0; font:400 12.5px var(--sans); color:#D8261C; }
.auth__group { display:flex; flex-direction:column; gap:10px; }
.auth__group--fe { gap:11px; }
.auth__group--fe .auth__label { margin-bottom:-1px; } /* label→input stays 10px inside the 11px rhythm */
.auth__label { font:400 10px var(--mono); letter-spacing:.18em; color:#8C867F; }
.auth__msbtn { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; height:50px;
  border:0; border-radius:10px; background:#1A1A1D; color:#fff; font:500 15px var(--sans);
  white-space:nowrap; cursor:pointer; transition:background .15s, color .15s; }
.auth__msbtn:hover { background:#000; }
.auth__msglyph { display:grid; grid-template-columns:8px 8px; grid-auto-rows:8px; gap:2px; }
.auth__msglyph span:nth-child(1) { background:#F25022; }
.auth__msglyph span:nth-child(2) { background:#7FBA00; }
.auth__msglyph span:nth-child(3) { background:#00A4EF; }
.auth__msglyph span:nth-child(4) { background:#FFB900; }
.auth__divider { display:flex; align-items:center; gap:12px; font:400 10.5px var(--mono);
  letter-spacing:.16em; color:#B5B0AA; }
.auth__divider::before, .auth__divider::after { content:''; flex:1; height:1px; background:#E8E4DF; }
.auth__email { width:100%; height:48px; padding:0 14px; font:400 14.5px var(--sans); color:#1A1A1D;
  border-radius:9px; border:1px solid #DDD9D4; background:#fff; transition:border-color .15s, box-shadow .15s; }
.auth__email::placeholder { color:#A9A49E; }
.auth__email:focus { outline:none; border-color:#D8261C; box-shadow:0 0 0 3px rgba(216,38,28,.13); }
.auth__otpbtn { width:100%; height:48px; border-radius:9px; border:1px solid #DDD9D4; background:#fff;
  color:#1A1A1D; font:500 14.5px var(--sans); cursor:pointer; transition:background .15s, border-color .15s; }
.auth__otpbtn:hover { background:#F4F1EE; border-color:#C6C1BA; }
.auth__hint { margin:0; font:400 12.5px var(--sans); color:#8C867F; }
.auth__msbtn:focus-visible, .auth__otpbtn:focus-visible { outline:2px solid #D8261C; outline-offset:2px; }
.auth__msbtn:disabled, .auth__otpbtn:disabled { opacity:.6; cursor:default; }
.auth__msbtn.is-busy .auth__msglyph { display:none; }
.auth__msbtn.is-busy::before, .auth__otpbtn.is-busy::before { content:''; width:14px; height:14px;
  border-radius:50%; border:2px solid rgba(0,0,0,.2); border-top-color:currentColor;
  margin-right:9px; animation:authspin .7s linear infinite; }
.auth__msbtn.is-busy::before { border-color:rgba(255,255,255,.35); border-top-color:#fff; }
.auth__otpbtn.is-busy { display:inline-flex; align-items:center; justify-content:center; }
@keyframes authspin { to { transform:rotate(360deg); } }
/* Stacked (device-targeted: phone + tablet-portrait — the handoff's sub-900px
   intent, mapped onto the device classes instead of a width query) */
html[data-device="phone"] .auth, html[data-device="tablet-portrait"] .auth { flex-direction:column; overflow-y:auto; }
html[data-device="phone"] .auth__brand, html[data-device="tablet-portrait"] .auth__brand { flex:0 0 auto; }
html[data-device="phone"] .auth__tagline, html[data-device="tablet-portrait"] .auth__tagline { display:none; }
html[data-device="phone"] .auth__tall-logo, html[data-device="tablet-portrait"] .auth__tall-logo { width:150px; }
html[data-device="phone"] .auth__bleed, html[data-device="tablet-portrait"] .auth__bleed { width:420px; }

/* ─── Hero ─── */
.hero { background:var(--hero-2); color:#fff; }
.hero__bar { display:flex; align-items:center; gap:14px; padding:16px 30px 12px; }
.logo { height:28px; width:auto; display:block; }
.hero__divider { width:1px; height:22px; background:rgba(255,255,255,.18); }
.hero__tag { font:600 10px var(--mono); letter-spacing:.14em; color:rgba(255,255,255,.45); }

.viewas { margin-left:auto; display:flex; align-items:center; gap:10px; }
.viewas__label { font:500 10px var(--mono); letter-spacing:.08em; color:rgba(255,255,255,.4); }
.viewas__seg { display:flex; background:rgba(255,255,255,.08); border-radius:6px; padding:2px; }
.viewas__btn { border:0; background:transparent; color:#A7A9AC; font:600 11.5px var(--sans); padding:5px 13px; border-radius:5px; }
.viewas__btn--on { background:#FFFFFF; color:var(--ink); }
/* #27 S2: Entra-mode sign-out (hero bar) */
.signout { border:1px solid rgba(255,255,255,.25); background:transparent; color:#A7A9AC;
  border-radius:5px; padding:5px 11px; font:600 9.5px var(--mono); letter-spacing:.08em; cursor:pointer; }
.signout:hover { color:#fff; border-color:rgba(255,255,255,.5); }

.hero__greet { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:14px 30px 22px; flex-wrap:wrap; }
.hero__h1 { margin:0; font:700 30px/1.1 var(--sans); letter-spacing:-.01em; }
.hero__sub { margin-top:7px; font:400 13.5px var(--sans); color:rgba(255,255,255,.6); }
.hero__tools { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.search { display:flex; align-items:center; gap:8px; background:var(--chip); border:0; border-radius:6px; padding:10px 14px; width:328px; }
.search__glyph { color:rgba(255,255,255,.45); font-size:14px; }
.search input { flex:1; min-width:0; border:0; background:transparent; color:#fff; font:400 12px var(--sans); outline:none; }
.search input::placeholder { color:rgba(255,255,255,.45); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:4px; font:600 9.5px var(--mono); letter-spacing:.07em; padding:9px 0; white-space:nowrap; }
.btn--red { padding:10px 0; }
.btn--new { border-radius:6px; font:600 10px var(--mono); letter-spacing:.08em; padding:11px 18px; }
.btn--red { background:var(--red); color:#fff; }
.btn--red:hover { background:var(--red-hover); }
.btn--line { background:var(--paper); color:var(--grey); border:1px solid var(--line-4); }
.btn--line:hover { border-color:var(--faint); }

/* ─── Preview + error bars ─── */
.previewbar { display:flex; align-items:center; gap:12px; padding:9px 30px; background:#FFF4F3; border-bottom:1px solid #F3C9C4; font:600 10.5px var(--mono); letter-spacing:.06em; color:var(--red); }
.previewbar button { border:0; background:var(--ink); color:#fff; border-radius:4px; padding:5px 10px; font:600 10px var(--mono); letter-spacing:.05em; }
.errbar { padding:9px 30px; background:#FFF7E8; border-bottom:1px solid #F0DCB2; font:500 11px var(--mono); color:#8a6d1d; }

/* ─── Groups ─── */
.groups { padding-bottom:8px; }

/* ─── Two-tier IA (2026-08-06): OPPORTUNITIES + ACTIVE JOBS over the subsections ─── */
.tier { border-bottom:1px solid var(--line-2); }
.tier__head { display:flex; align-items:center; gap:12px; padding:13px 30px; background:#EAEAEC; cursor:pointer; user-select:none; }
html[data-device="desktop"] .tier__head:hover { background:var(--line); }
.tier__title { font:700 14px var(--sans); letter-spacing:.04em; color:var(--ink); }
/* Subsection heads step to the design's 45px inset — the hierarchy cue is the
   same indent step the fidelity pass restored (tier 30 → subsection 45). */
html[data-device="desktop"] .tier .group__head { padding-left:45px; }
/* Opportunity ROW content nests a full design-step (+18px) deeper than its
   stage label (45 → 63), so rows read as nested under their stage. Active
   Jobs keeps the flat 48px table inset (its header IS the tier head). */
html[data-device="desktop"] .tier[data-tier="opps"] .cols,
html[data-device="desktop"] .tier[data-tier="opps"] .row { padding-left:63px; }
html[data-device="desktop"] .tier[data-tier="opps"] .group__empty { padding-left:60px; }
.group { border-bottom:1px solid var(--line-2); }
.group--accent { box-shadow:inset 3px 0 var(--red); }  /* accent bar without shifting the 48px content inset */
.group__head { display:flex; align-items:center; gap:12px; padding:11px 30px; background:var(--head); cursor:pointer; user-select:none; }
html[data-device="desktop"] .group__head:hover { background:var(--head-hover); }
.group__ord { font:600 11px var(--mono); letter-spacing:.05em; color:var(--red); }
.group__title { font:700 14px var(--sans); color:var(--ink); }
.group__title--muted { color:var(--muted-2); }
/* Subdued at-a-glance count (2026-08-06 IA — deliberately NOT the old bordered pill) */
.group__n { font:500 10px var(--mono); color:var(--muted); }
.group__desc { font:500 9px var(--mono); letter-spacing:.08em; color:var(--muted); }
.group__caret { margin-left:auto; font:400 11px var(--sans); color:var(--muted); }
.group--archive .group__head { cursor:default; background:var(--band); }
.group__empty { padding:15px 28px 15px 45px; font:500 11px var(--mono); color:var(--faint); letter-spacing:.04em; }

/* Column headers (desktop; jobs keep a compressed header on tablet) */
.cols { display:grid; gap:14px; align-items:center; padding:9px 28px 7px 48px; border-bottom:1px solid var(--line-2); font:500 8.5px var(--mono); letter-spacing:.08em; color:var(--faint); }
/* ONE grid for all five opportunity subsections (2026-08-07): the BASIS slot
   is reserved in every subsection (cell renders empty where a stage has no
   basis), so OPP# / NAME / REFERRAL / BASIS / AMOUNT / action / arrow align
   vertically across §1–§5. */
.cols--budget { grid-template-columns:92px 1.2fr .85fr 135px 140px 170px 14px; }
.cols--job { grid-template-columns:92px 1.15fr .8fr .8fr 160px 165px 14px; }
.t-right { text-align:right; }

/* ─── Rows ─── */
.row { display:grid; gap:14px; align-items:center; padding:13px 28px 13px 48px; border-bottom:1px solid var(--line-2); cursor:pointer; outline-offset:-2px; }
.row:last-child { border-bottom:0; }
html[data-device="desktop"] .row:hover { background:var(--band); }
.row:focus-visible { outline:2px solid var(--red-soft); }
.row--budget { grid-template-columns:92px 1.2fr .85fr 135px 140px 170px 14px; }
.row--job { grid-template-columns:92px 1.15fr .8fr .8fr 160px 165px 14px; }

.row__num { font:600 11.5px var(--mono); letter-spacing:.03em; color:var(--red); }
.row__id { min-width:0; display:flex; flex-direction:column; gap:2px; }
.row__name { font:600 14px var(--sans); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row__addr { font:400 12px var(--sans); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row__addr--map { color:var(--red); text-decoration:underline; text-decoration-color:var(--arrow); text-underline-offset:2px; }
.row__inline-meta { display:none; font:500 10px var(--mono); color:var(--muted); letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row__ref, .row__client, .row__team { font:400 12.5px var(--sans); color:var(--grey); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Two-line referral (2026-08-11): contact (person) over company, inside the
   existing two-line row height — the sub-line mirrors .row__addr's treatment. */
.row__ref { display:flex; flex-direction:column; justify-content:center; gap:1px; }
.ref__contact { font:400 12.5px/1.25 var(--sans); color:var(--grey); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ref__company { font:400 12px/1.2 var(--sans); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row__amount { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.row__money { font:600 13px var(--mono); color:var(--ink); }
.row__meta { font:500 9.5px var(--mono); letter-spacing:.03em; color:var(--faint); text-align:right; }
.row__actions { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
/* Permanent delete (ops/admin, stages 1–4) — quiet until hovered */
.row__delete { border:0; background:none; padding:2px 0; font:600 8.5px var(--mono); letter-spacing:.07em; color:var(--faint); cursor:pointer; }
.row__delete:hover { color:var(--red); text-decoration:underline; }
html[data-device="phone"] .row__delete { padding:8px 0; }
.row__arrow { color:var(--arrow); font-size:14px; }
.row__status { display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.row__next { display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.row__stage { font:600 12px var(--sans); color:var(--ink); }
.row__due { font:500 9.5px var(--mono); letter-spacing:.03em; color:var(--grey); }
.row__due--over { color:var(--red); }

.pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-4); border-radius:11px; padding:3px 10px; font:600 9.5px var(--mono); letter-spacing:.06em; color:var(--grey); background:var(--paper); }
.pill__dot { width:6px; height:6px; border-radius:50%; background:var(--red); }
.pill--hold .pill__dot { background:var(--faint); }
.pill--done { color:var(--green); border-color:var(--green-line); }
.pill--done .pill__dot { background:var(--green); }
html[data-device="desktop"] .pill { border:0; background:transparent; border-radius:0; padding:0; font:600 9px var(--mono); letter-spacing:.06em; color:var(--ink); }
html[data-device="desktop"] .pill__dot { display:none; }
html[data-device="desktop"] .pill--done { color:var(--green); }
html[data-device="desktop"] .pill--hold { color:var(--faint); }

.reopened { display:inline-flex; margin-left:6px; border-radius:4px; padding:2px 6px; font:600 8.5px var(--mono); letter-spacing:.08em; color:var(--red); border:1px solid var(--red-soft); }

/* ─── c4: approval badge + pending-budget chrome (ops view only) ─── */
.approve-badge { border:1px solid var(--red); background:var(--paper); color:var(--red); border-radius:10px; padding:2px 9px; font:600 9.5px var(--mono); letter-spacing:.07em; cursor:pointer; }
.approve-badge:hover { background:#FFF4F3; }
.approve-badge--on { background:var(--red); color:#fff; }
.pending-chip { display:inline-flex; border-radius:4px; padding:3px 7px; font:600 8.5px var(--mono); letter-spacing:.07em; color:var(--red); background:#FFF4F3; border:1px solid #F3C9C4; }
.review-link { font:600 9px var(--mono); letter-spacing:.06em; color:var(--red); text-decoration:underline; text-decoration-color:var(--red-soft); text-underline-offset:2px; }
.review-link:hover { color:var(--red-hover); }
.basis--records { color:#8A6D1D; border:1px solid #E8D9A8; background:transparent; }

.basis { display:inline-flex; border-radius:0; padding:3px 7px; font:600 8px var(--mono); letter-spacing:.08em; }
.basis--client { color:var(--green); border:1px solid var(--green-line); background:transparent; }
.basis--internal { color:var(--grey); border:1px solid var(--line-4); background:transparent; }
.basis--inline { display:none; margin-left:8px; }

/* ─── Toggles + footer ─── */
.togglebar { display:flex; justify-content:flex-end; gap:22px; padding:16px 30px; border-top:1px solid var(--line-2); flex-wrap:wrap; }
.toggle { display:flex; align-items:center; gap:9px; border:0; background:none; padding:0; }
.toggle__pill { width:32px; height:18px; border-radius:9px; background:var(--toggle-off); position:relative; transition:background .15s; flex:none; }
.toggle__pill::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
.toggle__pill--on { background:var(--ink); }
.toggle__pill--on::after { left:16px; }
.toggle__label { font:600 9.5px var(--mono); letter-spacing:.07em; color:var(--muted-2); }
.toggle__short { display:none; }

.foot { display:flex; justify-content:space-between; gap:14px; padding:14px 30px 22px; font:500 9px var(--mono); letter-spacing:.1em; color:var(--arrow); flex-wrap:wrap; }

/* ══════════════════ TABLET (portrait + landscape) ══════════════════ */
html[data-device^="tablet"] .hero__bar { padding:13px 22px 8px; }
html[data-device^="tablet"] .logo { height:24px; }
html[data-device^="tablet"] .viewas__label { display:none; }
html[data-device^="tablet"] .hero__greet { padding:10px 22px 16px; }
html[data-device^="tablet"] .hero__h1 { font-size:24px; }
html[data-device^="tablet"] .hero__tools { width:100%; }
html[data-device^="tablet"] .search { flex:1; width:auto; }
html[data-device^="tablet"] .group__head { padding:10px 22px; }
html[data-device^="tablet"] .tier__head { padding:11px 22px; }
html[data-device^="tablet"] .group__caret { display:none; }
html[data-device^="tablet"] .group__desc { margin-left:auto; }
html[data-device^="tablet"] .cols { display:none; }
html[data-device^="tablet"] .cols--job { display:grid; padding:7px 22px; grid-template-columns:80px 1fr 150px 150px; }
html[data-device^="tablet"] .cols--job span:nth-child(3), html[data-device^="tablet"] .cols--job span:nth-child(4) { display:none; }
html[data-device^="tablet"] .cols--job span:nth-child(7) { display:none; }
html[data-device^="tablet"] .row { padding:12px 22px; gap:12px; }
html[data-device^="tablet"] .row--budget { grid-template-columns:80px 1fr 130px 150px; }
html[data-device^="tablet"] .row--job { grid-template-columns:80px 1fr 150px 150px; }
html[data-device^="tablet"] .row__ref, html[data-device^="tablet"] .row__basis,
html[data-device^="tablet"] .row__client, html[data-device^="tablet"] .row__team,
html[data-device^="tablet"] .row__arrow, html[data-device^="tablet"] .row__amount .row__meta { display:none; }
html[data-device^="tablet"] .row__inline-meta { display:block; }
html[data-device^="tablet"] .basis--inline { display:inline-flex; }
html[data-device^="tablet"] .togglebar { padding:14px 22px; }
html[data-device^="tablet"] .foot { padding:12px 22px 20px; }
html[data-device^="tablet"] .foot__hint { display:none; }

/* ══════════════════ PHONE ══════════════════ */
html[data-device="phone"] .hero__bar { flex-wrap:wrap; padding:12px 16px 8px; gap:10px; }
html[data-device="phone"] .logo { height:22px; }
html[data-device="phone"] .viewas { margin-left:0; width:100%; }
html[data-device="phone"] .viewas__label { display:none; }
html[data-device="phone"] .viewas__seg { width:100%; }
html[data-device="phone"] .viewas__btn { flex:1; padding:8px 0; }
html[data-device="phone"] .hero__greet { padding:8px 16px 14px; }
html[data-device="phone"] .hero__h1 { font-size:21px; }
html[data-device="phone"] .hero__sub { font-size:12px; }
html[data-device="phone"] .hero__tools { width:100%; flex-direction:column; align-items:stretch; }
html[data-device="phone"] .search { width:auto; }
html[data-device="phone"] .btn--new { width:100%; padding:12px; }
html[data-device="phone"] .previewbar, html[data-device="phone"] .errbar { padding:9px 16px; }
html[data-device="phone"] .group__head { padding:10px 16px; gap:10px; flex-wrap:wrap; }
html[data-device="phone"] .tier__head { padding:11px 16px; gap:10px; flex-wrap:wrap; }
html[data-device="phone"] .group__title { font-size:13.5px; }
html[data-device="phone"] .group__desc { margin-left:auto; }
html[data-device="phone"] .group__caret { display:none; }
html[data-device="phone"] .cols { display:none; }
html[data-device="phone"] .group__empty { padding:13px 16px; }

html[data-device="phone"] .row { display:flex; flex-wrap:wrap; gap:6px 10px; padding:13px 16px; }
html[data-device="phone"] .row__num { order:1; flex:1; }
html[data-device="phone"] .row__amount { order:2; flex-direction:row; align-items:center; }
html[data-device="phone"] .row__amount .row__meta { display:none; }
html[data-device="phone"] .row__status { order:2; flex-direction:row; align-items:center; }
html[data-device="phone"] .row__id { order:3; width:100%; }
html[data-device="phone"] .row__name { white-space:normal; font-size:15px; }
html[data-device="phone"] .row__addr { white-space:normal; }
html[data-device="phone"] .row__inline-meta { display:block; white-space:normal; }
html[data-device="phone"] .basis--inline { display:inline-flex; }
html[data-device="phone"] .row__ref, html[data-device="phone"] .row__basis,
html[data-device="phone"] .row__client, html[data-device="phone"] .row__team,
html[data-device="phone"] .row__arrow { display:none; }
html[data-device="phone"] .row__actions { order:4; width:100%; flex-direction:row; }
html[data-device="phone"] .row__actions .btn { flex:1; padding:13px; }
html[data-device="phone"] .row__next { order:4; width:100%; flex-direction:row; align-items:baseline; gap:8px; border-top:1px solid var(--line-2); padding-top:8px; margin-top:4px; }
html[data-device="phone"] .row__next::before { content:'NEXT'; font:600 8.5px var(--mono); letter-spacing:.09em; color:var(--faint); }
html[data-device="phone"] .row__due { margin-left:auto; }

html[data-device="phone"] .togglebar { justify-content:flex-start; gap:14px; padding:14px 16px; }
html[data-device="phone"] .toggle__pill { width:28px; height:16px; }
html[data-device="phone"] .toggle__pill::after { width:12px; height:12px; }
html[data-device="phone"] .toggle__pill--on::after { left:14px; }
html[data-device="phone"] .toggle__full { display:none; }
html[data-device="phone"] .toggle__short { display:inline; }
html[data-device="phone"] .foot { padding:10px 16px 18px; }
html[data-device="phone"] .foot__hint { display:none; }

/* ── responsive pass (2026-08-01): c4 chrome on touch ── */
html[data-input="touch"] .row__status { flex-wrap:wrap; }
html[data-device="phone"] .row__status { width:100%; }
html[data-device="phone"] .review-link { display:inline-block; padding:8px 0; }
html[data-device="phone"] .approve-badge { padding:4px 10px; }