/* GFC Builds. Design: "Field Ready" (design/DIRECTION.md).
   Order: tokens, base, shell, shared components, screens, runner, breakpoints.
   Rules: one accent (amber = waiting on you), 2px edges instead of soft shadows,
   48px floor on every target, no text under 12.5px, raw colors only in :root. */

:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* GFC navy: chrome, remodels, primary buttons */
  --navy: #0B2241;
  --navy-2: #15315B;
  --navy-3: #24477D;
  --navy-4: #2E5A97;
  --navy-tint: #E6ECF5;
  --navy-edge: #C3D0E4;

  /* ink */
  --ink: #0A1A31;
  --ink-2: #33435A;
  --ink-3: #56657C;
  --on-navy: #FFFFFF;
  --on-navy-2: rgba(255, 255, 255, .78);
  --on-navy-3: rgba(255, 255, 255, .70);
  --on-navy-red: #FF9C94;
  --on-navy-green: #5ED28E;

  /* surfaces */
  --page: #ECEFF4;
  --card: #FFFFFF;
  --sunk: #F6F8FA;
  --tray: #E3E8EF;
  --track: #D7DEE8;
  --scrim: rgba(5, 14, 30, .58);
  --viewer: #05080F;

  /* lines */
  --line: #CBD3DF;
  --hair: #E0E5EC;
  --edge: #738399;
  --rule: #0A1A31;

  /* the one accent */
  --amber: #FFB400;
  --amber-edge: #E09D00;
  --amber-tint: #FFF3D3;
  --amber-ink: #6A4400;
  --amber-hatch: #FFE7A3;

  /* status colors */
  --blue: #1E55D0;  --blue-tint: #E8EEFC;  --blue-edge: #B5C8F4;
  --green: #127A3C; --green-tint: #E0F2E6; --green-edge: #A9D7B8;
  --red: #C1241B;   --red-tint: #FCEAE8;   --red-edge: #EDB1AC;
  --red-ink: #7A140E;
  --slate: #4A5970;

  /* rental turn */
  --teal: #007D89;
  --teal-2: #005F68;
  --teal-tint: #DBF1F2;
  --teal-edge: #9ACFD4;
  --teal-hatch: #9AD6DB;

  /* skeletons */
  --skel: #E3E8EF;
  --skel-hi: #F1F4F8;

  /* glass on navy and photos (raw values live here only) */
  --glass-06: rgba(255, 255, 255, .06);
  --glass-10: rgba(255, 255, 255, .10);
  --glass-12: rgba(255, 255, 255, .12);
  --glass-16: rgba(255, 255, 255, .16);
  --glass-24: rgba(255, 255, 255, .24);
  --glass-30: rgba(255, 255, 255, .30);
  --glass-45: rgba(255, 255, 255, .45);
  --glass-dark: rgba(5, 14, 30, .55);
  --navy-60: rgba(11, 34, 65, .62);
  --photo-ring: rgba(0, 0, 0, .12);
  --amber-35: rgba(255, 180, 0, .35);
  --amber-ring: rgba(255, 180, 0, .55);
  --red-ring: rgba(193, 36, 27, .18);
  --green-glow: rgba(94, 210, 142, .22);
  --grab: #B9C3D1;
  --photo-bg: #DDE3EB;

  /* radii */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 14px; --r-tray: 16px;
  --r-xl: 20px; --r-sheet: 26px; --r-pill: 999px;

  /* borders */
  --bw: 2px; --bw-strong: 2.5px; --bw-hair: 1.5px; --bw-rule: 3px;

  /* elevation */
  --sh-float: 0 0 0 3px var(--page), 0 10px 22px -8px rgba(11, 34, 65, .55);
  --sh-up: 0 -12px 24px -14px rgba(11, 34, 65, .5);
  --sh-toast: 0 12px 28px -10px rgba(5, 14, 30, .55);
  --sh-dialog: 0 30px 60px -20px rgba(5, 14, 30, .55);

  /* spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px; --s14: 56px; --s16: 64px;
  --gutter: 16px;
  --card-pad: 14px;

  /* control heights */
  --h-min: 48px; --h-btn: 56px; --h-tray: 58px; --h-key: 64px;

  /* type scale */
  --t-display: 42px; --t-h1: 31px; --t-h1-job: 33px; --t-h2: 22px; --t-h3: 20px; --t-h4: 18px;
  --t-section: 15px; --t-body-l: 17px; --t-body: 16px; --t-meta: 14.5px; --t-small: 13.5px; --t-label: 12.5px;
  --t-money-xl: 40px; --t-money-l: 31px; --t-money-m: 27px; --t-money-s: 19px;

  /* motion */
  --dur-press: 90ms; --dur: 160ms; --dur-sheet: 180ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* layout */
  --tabbar-h: 66px; --topbar-h: 58px; --sidebar-w: 264px; --rail-w: 352px;
  --main-max: 1120px; --read-max: 720px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* layers */
  --z-sticky: 10; --z-tabbar: 20; --z-fab: 25; --z-footer: 30; --z-scrim: 40; --z-sheet: 50; --z-toast: 60;

  /* focus */
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--blue);
  --focus-on-dark: 0 0 0 3px var(--amber);
}

/* =====================================================================
   BASE
   ===================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--page); color: var(--ink);
  font: 500 16px/1.35 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-wrap: pretty;
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, h1, h2, h3, h4, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.ic {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.num, .money { font-variant-numeric: tabular-nums; }
.wrap-any { overflow-wrap: anywhere; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); }
.chrome :focus-visible, .side :focus-visible, .tabbar :focus-visible, .rbar :focus-visible, .wfoot :focus-visible,
.jh-wrap :focus-visible, .viewer :focus-visible, .toast :focus-visible { box-shadow: var(--focus-on-dark); }

.boot { min-height: 100dvh; display: grid; place-items: center; background: var(--navy); }

/* =====================================================================
   SHELL
   ===================================================================== */

.shell { min-height: 100dvh; }
.main { min-width: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }
.main.has-fab { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 98px); }
.side { display: none; }

.chrome { background: var(--navy); color: var(--on-navy); padding-top: var(--safe-t); }
.topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.brand { display: flex; align-items: center; gap: 10px; font: 850 18px/1 var(--font); letter-spacing: -.015em; }
.mark {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding-bottom: 5px; border-radius: 10px;
  background: var(--amber); color: var(--navy);
  font: 900 14.5px/1 var(--font); letter-spacing: -.02em;
}
.mark::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--navy); }
.mark-xl { width: 96px; height: 96px; border-radius: 24px; padding-bottom: 10px; font-size: 32px; }
.mark-xl::after { left: 21px; right: 21px; bottom: 19px; height: 5px; border-radius: 3px; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  background: var(--navy-3); color: var(--on-navy);
  font: 800 14.5px/1 var(--font); letter-spacing: .02em;
  box-shadow: inset 0 0 0 2px var(--glass-30);
}
.topbar-r { display: flex; align-items: center; gap: 8px; }
.viewonly {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: var(--r-pill);
  background: var(--glass-12); box-shadow: inset 0 0 0 1.5px var(--glass-30); color: var(--on-navy);
  font: 800 13.5px/1 var(--font);
}
.viewonly .ic { width: 18px; height: 18px; }

.body { padding: 4px var(--gutter) 28px; }
.body > :first-child { margin-top: 0; }

/* tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
  display: grid; grid-template-columns: repeat(var(--tabs, 4), minmax(0, 1fr));
  padding: 0 4px var(--safe-b); background: var(--navy);
}
.tab {
  position: relative; height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: var(--on-navy-3); text-decoration: none; font: 750 12.5px/1 var(--font);
}
.tab .ic { width: 27px; height: 27px; stroke-width: 2.1; }
.tab[aria-current="page"] { color: var(--on-navy); font-weight: 850; }
.tab[aria-current="page"] .ic { color: var(--amber); stroke-width: 2.4; }
.tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 24%; right: 24%;
  height: 4px; border-radius: 0 0 4px 4px; background: var(--amber);
}
.tab em {
  position: absolute; top: 7px; left: 56%; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--amber); color: var(--navy);
  font: 900 12.5px/20px var(--font); font-style: normal; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--navy);
}
.fab {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); z-index: var(--z-fab);
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: var(--r-xl); border: 0;
  background: var(--amber); color: var(--navy); box-shadow: var(--sh-float);
  transition: transform var(--dur-press) var(--ease);
}
.fab:active { transform: scale(.96); }
.fab .ic { width: 32px; height: 32px; stroke-width: 2.8; }

/* sidebar (desktop) */
.side { flex-direction: column; gap: 26px; padding: 26px 16px 24px; background: var(--navy); color: var(--on-navy); }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; text-decoration: none; }
.side-brand div > b { display: block; font: 850 20px/1.1 var(--font); letter-spacing: -.02em; }
.side-brand div > span { display: block; margin-top: 5px; font: 850 12.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  position: relative; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 14px;
  border-radius: 12px; color: var(--on-navy-2); text-decoration: none; font: 750 17px/1 var(--font);
}
.side-nav a[aria-current="page"] { background: var(--glass-10); color: var(--on-navy); font-weight: 850; }
.side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 11px; bottom: 11px; width: 5px; border-radius: 0 4px 4px 0; background: var(--amber); }
.side-nav a[aria-current="page"] .ic { color: var(--amber); }
.side-nav em {
  display: inline-grid; place-items: center; min-width: 28px; height: 26px; margin-left: auto; padding: 0 8px;
  border-radius: 7px; background: var(--glass-16); font: 850 13.5px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums;
}
.side-nav em.amber { background: var(--amber); color: var(--navy); }
.side-user { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px 8px 0; border-top: 1.5px solid var(--glass-16); }
.side-user > div { flex: 1; min-width: 0; }
.side-user div > b { display: block; font: 800 15.5px/1.2 var(--font); overflow-wrap: anywhere; }
.side-user div > span { display: block; margin-top: 2px; font: 600 13.5px/1.2 var(--font); color: var(--on-navy-2); }
.side-user .avatar { width: 42px; height: 42px; }

/* =====================================================================
   SECTION HEADERS, BUTTONS, LINKS
   ===================================================================== */

.hsec {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 12px; padding-bottom: 10px;
  border-bottom: var(--bw-rule) solid var(--rule);
  min-height: 39px;
}
.hsec h2 { font: 900 15px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.hsec-first { margin-top: 22px; }
.count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 7px; background: var(--amber); color: var(--navy);
  font: 900 14px/1 var(--font); font-variant-numeric: tabular-nums;
}
.count-n { background: var(--navy); color: var(--on-navy); }
.hsec-aside { margin-left: auto; font: 750 14.5px/1.2 var(--font); color: var(--ink-2); text-align: right; }
.link, .hsec-link {
  display: inline-flex; align-items: center; gap: 2px; min-height: 48px; margin-block: -12px;
  padding: 0; border: 0; background: none;
  font: 850 15px/1 var(--font); color: var(--blue); text-decoration: none; white-space: nowrap;
}
.hsec-link { margin-left: auto; }
.link .ic, .hsec-link .ic { width: 20px; height: 20px; stroke-width: 2.5; }

.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h-btn); padding: 0 18px; border-radius: var(--r-md); border: var(--bw) solid transparent;
  font: 850 16.5px/1.1 var(--font); letter-spacing: -.005em; text-decoration: none; text-align: center;
  transition: filter var(--dur-press) var(--ease), background-color var(--dur-press) var(--ease);
  -webkit-user-select: none; user-select: none;
}
.btn .ic { width: 22px; height: 22px; stroke-width: 2.5; }
.btn:active { filter: brightness(.92); }
.btn-navy { background: var(--navy); color: var(--on-navy); }
.btn-amber { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.btn-green { background: var(--green); color: var(--on-navy); }
.btn-red { background: var(--red); color: var(--on-navy); }
.btn-line { background: var(--card); color: var(--ink); border-color: var(--edge); }
.btn-line:active { background: var(--tray); filter: none; }
.btn-line-green { background: var(--card); color: var(--green); border-color: var(--green); }
.btn-line-red { background: var(--card); color: var(--red); border-color: var(--edge); }
.btn-line-blue { background: var(--card); color: var(--blue); border-color: var(--edge); }
.btn-ghost { background: var(--glass-06); color: var(--on-navy); border-color: var(--glass-45); }
.btn-chrome { min-height: 48px; padding: 0 14px; background: var(--amber); color: var(--navy); font-size: 15.5px; border-radius: 11px; }
.btn-xl { width: 100%; min-height: var(--h-key); border-radius: var(--r-lg); font-size: 19px; }
.btn-key { min-height: var(--h-tray); }
.btn-sm { min-height: 48px; padding: 0 14px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"] .ic { animation: spin .8s linear infinite; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md); border: 0; padding: 0;
  background: var(--glass-10); color: var(--on-navy);
}
.icon-btn-light { background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); }
.icon-btn .ic { width: 24px; height: 24px; }

/* keys: big square-ish buttons, icon over label */
.keys { display: grid; gap: 8px; margin-top: 14px; }
.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.key {
  appearance: none; min-width: 0; min-height: var(--h-key); padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-md); border: var(--bw) solid var(--edge); background: var(--card); color: var(--ink);
  font: 850 15.5px/1.1 var(--font); letter-spacing: -.005em; text-align: center;
  transition: background-color var(--dur-press) var(--ease), filter var(--dur-press) var(--ease);
}
.key .ic { width: 24px; height: 24px; stroke-width: 2.5; }
.key:active { filter: brightness(.94); }
.key-row { flex-direction: row; gap: 8px; }
.key-navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.key-green { color: var(--green); border-color: var(--green); }
.key-red { color: var(--red); }
.key-amber { background: var(--amber); border-color: var(--amber-edge); color: var(--navy); }
.key .key-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 7px;
  background: var(--amber); color: var(--navy); font: 900 14px/1 var(--font); font-variant-numeric: tabular-nums;
}

/* walkthrough tray: one choice */
.tray { display: grid; gap: 6px; margin-top: 12px; padding: 5px; border-radius: var(--r-tray); background: var(--tray); }
.tray.t1 { grid-template-columns: minmax(0, 1fr); }
.tray.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tray.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tray.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tray .key {
  flex-direction: row; gap: 8px; min-height: var(--h-tray); padding: 8px 4px; border-radius: 11px;
  border: var(--bw) solid var(--edge); font-size: 17px; white-space: nowrap;
}
.tray .key .ic { width: 22px; height: 22px; stroke-width: 2.75; }
.tray.t3 .key { gap: 5px; font-size: 16.5px; }
.tray.t3 .key .ic { width: 19px; height: 19px; }
.tray.wrap .key { white-space: normal; line-height: 1.15; padding: 8px 8px; }
.key .ic.sel { display: none; }
.key[aria-checked="true"] .ic.sel { display: block; }
.key.is-pass, .key.is-good, .key.is-done { background: var(--green); border-color: var(--green); color: var(--on-navy); }
.key.is-fail, .key.is-missing { background: var(--red); border-color: var(--red); color: var(--on-navy); }
.key.is-set { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.key.is-need { background: var(--amber); border-color: var(--amber-edge); color: var(--navy); }
.key.is-na { background: var(--slate); border-color: var(--slate); color: var(--on-navy); }
.key.is-teal { background: var(--teal); border-color: var(--teal); color: var(--on-navy); }
.key.is-teal2 { background: var(--teal-2); border-color: var(--teal-2); color: var(--on-navy); }
.hatch-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--teal-2) 0 3px, var(--teal-hatch) 3px 7px); box-shadow: inset 0 0 0 1.5px var(--on-navy); }

/* option picker */
.picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.picks.p2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.picks .key { flex-direction: row; min-height: 56px; font-size: 17px; padding: 6px 8px; }
.picks .key .ic { width: 20px; height: 20px; stroke-width: 3; }
.picks .key[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.picks .key.kind-blocker[aria-checked="true"] { background: var(--red); border-color: var(--red); }
.picks .key.kind-win[aria-checked="true"] { background: var(--green); border-color: var(--green); }

/* segmented filters */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-tray); background: var(--glass-10); }
.seg button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 50px; padding: 0 8px; border: 0; border-radius: 11px; background: transparent;
  color: var(--on-navy-2); font: 800 15.5px/1 var(--font); letter-spacing: -.01em; white-space: nowrap;
}
.seg button b {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--glass-16); font: 900 12.5px/1 var(--font); font-variant-numeric: tabular-nums;
}
.seg button[aria-checked="true"] { background: var(--card); color: var(--navy); }
.seg button[aria-checked="true"] b { background: var(--navy); color: var(--on-navy); }
.seg-light { background: var(--tray); }
.seg-light button { color: var(--ink-2); height: 48px; }
.seg-light button b { background: var(--card); color: var(--ink); }
.seg-light button[aria-checked="true"] { background: var(--navy); color: var(--on-navy); }
.seg-light button[aria-checked="true"] b { background: var(--amber); color: var(--navy); }

/* =====================================================================
   CHIPS, BADGES, FLAGS, TAGS
   ===================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: var(--r-xs);
  font: 900 12.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.chip .ic { width: 14px; height: 14px; stroke-width: 2.8; }
.chip-remodel { background: var(--navy); color: var(--on-navy); }
.chip-turn { background: var(--teal); color: var(--on-navy); }
.chip-unit { background: var(--navy-tint); color: var(--navy-3); box-shadow: inset 0 0 0 1.5px var(--navy-edge); }
.chip-inv { background: var(--card); color: var(--navy); }
.chip-turn-nav { background: var(--teal); color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--on-navy); }
.chip-glass { background: var(--glass-16); color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--glass-30); }
.chip-role { background: var(--navy-tint); color: var(--navy-3); }
.chip-role.r-contractor { background: var(--teal-tint); color: var(--teal-2); }
.chip-role.r-guest { background: var(--sunk); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--hair); }
.chip-off { background: var(--red-tint); color: var(--red); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 8px; border-radius: var(--r-xs);
  font: 900 12.5px/1.1 var(--font); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.badge .ic { width: 14px; height: 14px; stroke-width: 3; }
.b-wait { background: var(--amber); color: var(--navy); }
.b-ok { background: var(--blue-tint); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue-edge); }
.b-paid, .b-sub, .b-done, .b-pass { background: var(--green-tint); color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green-edge); }
.b-back, .b-fail { background: var(--red-tint); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red-edge); }
.b-draft, .b-na { background: var(--sunk); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--hair); }
.b-open { background: var(--amber-tint); color: var(--amber-ink); box-shadow: inset 0 0 0 1.5px var(--amber-edge); }
.b-navy { background: var(--navy-tint); color: var(--navy-3); box-shadow: inset 0 0 0 1.5px var(--navy-edge); }
.b-teal { background: var(--teal-tint); color: var(--teal-2); box-shadow: inset 0 0 0 1.5px var(--teal-edge); }
.b-onnavy { background: var(--glass-16); color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--glass-30); }

.flags { display: flex; flex-wrap: wrap; gap: 8px; }
.flag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 9px; border-radius: var(--r-sm);
  font: 800 13.5px/1.15 var(--font); letter-spacing: -.005em;
}
.flag .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.flag-red { background: var(--red-tint); color: var(--red); }
.flag-amber { background: var(--amber); color: var(--navy); }
.flag-soft { background: var(--amber-tint); color: var(--amber-ink); }
.flag-blue { background: var(--blue-tint); color: var(--blue); }

.kindtag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin-bottom: 8px; padding: 3px 8px; border-radius: 5px;
  background: var(--navy-tint); color: var(--navy-3); font: 900 12.5px/1.1 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
.kindtag .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.needs-co {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--amber-tint); color: var(--amber-ink); box-shadow: inset 0 0 0 1.5px var(--amber-edge);
  font: 850 12.5px/1.1 var(--font); letter-spacing: .06em; text-transform: uppercase;
}
.hidden-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-sm);
  background: var(--sunk); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--hair);
  font: 800 14px/1 var(--font); letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle;
}
.hidden-chip .ic { width: 17px; height: 17px; stroke-width: 2.4; }

/* =====================================================================
   CARDS: base, job tile, job card, job row, KPIs
   ===================================================================== */

.card { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad); }
.cards { display: grid; gap: 10px; }

.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none;
  width: 54px; height: 54px; border-radius: var(--r-md); background: var(--navy); color: var(--on-navy);
}
.tile .ic { width: 26px; height: 26px; stroke-width: 2.2; }
.tile .tile-n { font: 900 12.5px/1 var(--font); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* Small tiles (40 to 44px) drop the house number; the photo tile's type badge stays and shrinks. */
.ok-who .tile .tile-n, .pgroup-h .tile .tile-n, .pick .tile .tile-n, .tx-job .tile .tile-n { display: none; }
.ok-who .tile-badge, .pgroup-h .tile-badge, .pick .tile-badge, .tx-job .tile-badge { width: 20px; height: 20px; right: -4px; bottom: -4px; }
.ok-who .tile-badge .ic, .pgroup-h .tile-badge .ic, .pick .tile-badge .ic, .tx-job .tile-badge .ic { width: 12px; height: 12px; }
.tile.is-turn { background: var(--teal); }
.tile.has-photo { background: var(--photo-bg); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tile.has-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--photo-ring); }
.tile-badge {
  position: absolute; right: -5px; bottom: -5px; z-index: 1; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px; background: var(--navy); color: var(--on-navy);
  box-shadow: 0 0 0 2px var(--card);
}
.tile-badge .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.tile.is-turn .tile-badge { background: var(--teal); }

.steps { display: flex; gap: 4px; }
.steps i { flex: 1; height: 8px; border-radius: 4px; background: var(--track); }
.steps i.on { background: var(--navy); }
.is-turn .steps i.on { background: var(--teal); }

/* job row (home) */
.jrow {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 14px 10px 14px 14px;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
}
.jrow.is-turn { border-color: var(--teal-edge); }
.jrow-main { flex: 1; min-width: 0; }
.jrow h3 { font: 850 18px/1.2 var(--font); letter-spacing: -.015em; overflow-wrap: anywhere; }
.jrow-type { margin-top: 5px; font: 850 12.5px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-3); }
.jrow.is-turn .jrow-type { color: var(--teal-2); }
.jrow-client { margin-top: 3px; font: 650 14.5px/1.25 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.jrow-stage { display: flex; justify-content: space-between; gap: 8px; margin: 10px 0 7px; font: 700 14.5px/1.2 var(--font); color: var(--ink); }
.jrow-stage span { color: var(--ink-2); font-weight: 650; white-space: nowrap; }
.jrow-money { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; margin-top: 10px; font: 600 15px/1.2 var(--font); color: var(--ink-2); }
.jrow-money b { color: var(--ink); font-weight: 850; font-variant-numeric: tabular-nums; }
.jrow-money .red { color: var(--red); font-weight: 850; }
.jrow-money .mut { color: var(--ink-3); font-weight: 650; }
.jrow > .ic { margin-top: 15px; color: var(--ink-3); stroke-width: 2.5; }

/* full job card (jobs list) */
.job { display: flex; flex-direction: column; margin-bottom: 12px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; text-decoration: none; color: var(--ink); }
.job.is-turn { border-color: var(--teal-edge); }
.job-top { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 14px; }
.job .tile { width: 66px; height: 66px; border-radius: 13px; gap: 4px; }
.job .tile .ic { width: 28px; height: 28px; }
.job-id { flex: 1; min-width: 0; }
.job-id h3 { margin-top: 7px; font: 850 20px/1.15 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.job-id p { margin-top: 3px; font: 600 14.5px/1.25 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.job-top > .ic { color: var(--ink-3); stroke-width: 2.5; align-self: center; }
.job-sect { padding: 13px 14px; border-top: var(--bw-hair) solid var(--hair); }
.job-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 9px; font: 600 14.5px/1.2 var(--font); color: var(--ink-2); }
.job-row b { color: var(--ink); font-weight: 800; }
.job-row .big { font: 850 19px/1 var(--font); letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.job-row .red { color: var(--red); font-weight: 850; }
.job-row:last-child { margin-bottom: 0; }
.job .flags { padding: 0 14px 13px; }
.job-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding: 11px 14px;
  border-top: var(--bw-hair) solid var(--hair); background: var(--sunk);
  font: 650 13.5px/1.25 var(--font); color: var(--ink-2);
}
.job-foot b { color: var(--ink); font-weight: 800; }
/* The whole job card is one tap target: the address link stretches over the card,
   and the card's own buttons and links (Add bid, Price it in Phase 1) sit above it. */
.job.stretch { position: relative; }
.job .job-link { color: inherit; text-decoration: none; }
.job .job-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.job .job-link:focus-visible { box-shadow: none; }
.job .job-link:focus-visible::after { box-shadow: inset 0 0 0 3px var(--blue); border-radius: var(--r-lg); }
.job.stretch button, .job.stretch a:not(.job-link) { position: relative; z-index: 2; }

/* money bar */
.bar { position: relative; display: flex; gap: 2px; height: 12px; border-radius: 6px; background: var(--track); }
.bar i { display: block; height: 100%; min-width: 3px; background: var(--navy); }
.bar i:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.bar i:last-of-type { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.bar.is-turn i.paid { background: var(--teal); }
.bar i.over { background: var(--red); }
.bar i.wait { background: repeating-linear-gradient(135deg, var(--amber-edge) 0 3px, var(--amber-hatch) 3px 6px); }
.bar-mark { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.nobid {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 48px; padding: 4px 10px; border-radius: var(--r-sm);
  border: var(--bw-hair) dashed var(--edge); font: 650 14px/1.3 var(--font); color: var(--ink-2);
}
.nobid .link { margin-left: auto; margin-block: -4px; min-height: 48px; }
.nobid > .ic { width: 16px; height: 16px; color: var(--ink-3); }
/* The sentence wraps inside itself, so the icon never sits alone on a line. */
.nobid > span { flex: 1 1 0; min-width: 0; }
.split { display: flex; gap: 3px; height: 12px; border-radius: 6px; background: var(--track); }
.split i { display: block; height: 100%; min-width: 3px; }
.split i:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.split i:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.own { background: var(--teal); }
.ten { background: repeating-linear-gradient(135deg, var(--teal-2) 0 3px, var(--teal-hatch) 3px 7px); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 650 13.5px/1.2 var(--font); color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend b { color: var(--ink); font-weight: 850; font-variant-numeric: tabular-nums; }
.legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; background: var(--navy); }
.legend i.l-turn { background: var(--teal); }
.legend i.l-over { background: var(--red); }
.legend i.l-wait { background: repeating-linear-gradient(135deg, var(--amber-edge) 0 3px, var(--amber-hatch) 3px 6px); }
.legend i.l-ten { background: repeating-linear-gradient(135deg, var(--teal-2) 0 2px, var(--teal-hatch) 2px 4px); }
.legend i.l-mark { width: 3px; height: 15px; border-radius: 2px; background: var(--ink); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi {
  display: flex; flex-direction: column; min-height: 118px; padding: 14px;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
}
.kpi-l { font: 850 12.5px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.kpi-v { margin-top: 14px; font: 850 31px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-s { margin-top: 7px; font: 600 13.5px/1.25 var(--font); color: var(--ink-2); }
.kpi-amber { background: var(--amber-tint); border-color: var(--amber-edge); }
.kpi-amber .kpi-l, .kpi-amber .kpi-s { color: var(--amber-ink); }

/* money tiles (job page) */
.msum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m { padding: 13px 14px 14px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.m > span { display: block; font: 850 12.5px/1.15 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.m > b { display: block; margin-top: 9px; font: 850 27px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m > b.long { font-size: 21px; letter-spacing: -.02em; }
@media (max-width: 389px) { .m > b.long { font-size: 19px; } }
.m > b.small { font-size: 19px; letter-spacing: -.015em; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.m > small { display: block; margin-top: 6px; font: 600 13.5px/1.25 var(--font); color: var(--ink-2); }
.m-red { background: var(--red-tint); border-color: var(--red-edge); }
.m-red > span, .m-red > b, .m-red > small { color: var(--red); }
.m-amber { background: var(--amber-tint); border-color: var(--amber-edge); }
.m-amber > span, .m-amber > small { color: var(--amber-ink); }
.m-teal { border-color: var(--teal-edge); }
.m-teal > span { color: var(--teal-2); }

.panel { margin-top: 10px; padding: 15px 14px 14px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }
.panel-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; font: 700 15px/1.25 var(--font); }
.panel-row .red { color: var(--red); font-weight: 850; }
.panel-row .mut { color: var(--ink-2); font-weight: 750; }
.panel .bar, .panel .split { height: 16px; border-radius: 8px; }
.panel .bar i:first-child, .panel .split i:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.panel .bar i:last-of-type, .panel .split i:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.panel .bar-mark { top: -6px; bottom: -6px; }

/* lists and rows */
.list { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 10px 12px 14px;
  text-decoration: none; color: var(--ink); background: var(--card); border: 0; text-align: left;
}
.row + .row { border-top: var(--bw-hair) solid var(--hair); }
.row-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--navy-tint); color: var(--navy); }
.row-ic .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.row-ic.amber { background: var(--amber); color: var(--navy); }
.row-ic.green { background: var(--green-tint); color: var(--green); }
.row-ic.red { background: var(--red-tint); color: var(--red); }
.row-ic.teal { background: var(--teal-tint); color: var(--teal-2); }
.row-t { flex: 1; min-width: 0; }
.row-t b { display: block; font: 800 16px/1.25 var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.row-t span { display: block; margin-top: 3px; font: 600 14px/1.3 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.row > .ic { color: var(--ink-3); stroke-width: 2.5; }
.row-amt { font: 850 17px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.row-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }

.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.details > div { padding: 12px 14px 13px; border-top: var(--bw-hair) solid var(--hair); min-width: 0; }
.details > div:nth-child(odd) { border-right: var(--bw-hair) solid var(--hair); }
.details > div:nth-child(-n+2) { border-top: 0; }
.details > div.wide { grid-column: 1 / -1; border-right: 0; }
.details dt { font: 850 12.5px/1.15 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.details dd { margin: 6px 0 0; font: 750 16.5px/1.25 var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.details dd.mut { color: var(--ink-3); font-weight: 650; }

/* update card */
.upd { padding: 14px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }
.upd + .upd { margin-top: 10px; }
.upd.k-blocker { border-color: var(--red-edge); }
.upd.k-win { border-color: var(--green-edge); }
.upd-h { display: flex; align-items: center; gap: 10px; }
.upd-h > div { flex: 1; min-width: 0; }
.av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); font: 850 13.5px/1 var(--font); }
.upd-h div > b { display: block; font: 800 15.5px/1.2 var(--font); overflow-wrap: anywhere; }
.upd-h div > span { display: block; margin-top: 2px; font: 600 13.5px/1.2 var(--font); color: var(--ink-2); }
.upd-h div > span.badge { display: inline-flex; margin-top: 6px; font: 900 12.5px/1.1 var(--font); letter-spacing: .07em; }
.upd-h div > span.b-back { color: var(--red); }
.upd-h div > span.b-paid { color: var(--green); }
.upd-addr { display: block; margin-top: 2px; font: 700 13.5px/1.25 var(--font); color: var(--navy-3); text-decoration: none; }
.upd p { margin-top: 11px; font: 500 16px/1.48 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.upd .icon-btn-light { width: 48px; height: 48px; border: 0; }

/* =====================================================================
   DECISION CARD ("Needs your OK"), STATUS CARD, STATEMENT BOX
   ===================================================================== */

.ok {
  background: var(--card); border: var(--bw) solid var(--amber-edge); border-radius: var(--r-lg);
  overflow: clip; margin-bottom: 14px; transition: border-color var(--dur) var(--ease);
}
.ok-band {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 14px; background: var(--amber); color: var(--navy);
  font: 900 12.5px/1.15 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
.ok-band > span { display: inline-flex; align-items: center; gap: 8px; }
.ok-band > span:last-child { text-align: right; }
.ok-band .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.ok.is-approved { border-color: var(--blue-edge); }
.ok.is-approved .ok-band { background: var(--blue-tint); color: var(--blue); }
.ok.is-paid { border-color: var(--green-edge); }
.ok.is-paid .ok-band { background: var(--green-tint); color: var(--green); }
.ok.is-back { border-color: var(--red-edge); }
.ok.is-back .ok-band { background: var(--red-tint); color: var(--red); }
.ok.is-mine { border-color: var(--line); }
.ok.is-mine .ok-band { background: var(--amber-tint); color: var(--amber-ink); }
.ok.flash-ok { border-color: var(--green); }
.ok.flash-ok .ok-band { background: var(--green); color: var(--on-navy); }
.ok-body { padding: 14px; }
.ok-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 12px; }
/* 48px hit area (DIRECTION 8.1) without growing the card: padding out, margin back in. */
.ok-who { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 200px; min-width: 0; min-height: 48px; padding-block: 4px; margin-block: -4px; text-decoration: none; color: inherit; }
.ok-who .tile { width: 40px; height: 40px; border-radius: 10px; }
.ok-who .tile .ic { width: 22px; height: 22px; }
.ok-addr { font: 850 21px/1.15 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ok-amt { font: 850 31px/1 var(--font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
/* The amount shows once: in the head row, or (wide desktop cards only) at the top of the key column. */
.desk-amt { display: none; }
.ok-meta { margin-top: 8px; font: 600 15px/1.35 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.ok-billto { margin-top: 3px; font: 750 15px/1.35 var(--font); color: var(--teal-2); overflow-wrap: anywhere; }
.ok-what { margin-top: 12px; font: 800 17.5px/1.3 var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ok-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 12px;
  border-radius: 10px; background: var(--sunk); font: 600 15px/1.4 var(--font); color: var(--ink-2);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.ok-note .ic { width: 20px; height: 20px; stroke-width: 2.4; }
.ok-note b { font-weight: 850; color: var(--ink); }
.ok-note-red { background: var(--red-tint); color: var(--red-ink); }
.ok-note-red .ic { color: var(--red); }
.ok-hint { margin-top: 10px; font: 600 13.5px/1.35 var(--font); color: var(--ink-2); text-align: center; }
.ok-hint b { color: var(--green); font-weight: 850; }
.ok-keys { display: grid; gap: 8px; margin-top: 14px; }
.ok-keys .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Mark paid and Send back share a row: they fit side by side at 360 px. */
.ok-keys .two .btn { padding: 0 8px; }
.ok-keys .btn-xl .ic { width: 24px; height: 24px; }
.ok-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ok-left, .ok-info { min-width: 0; }

.stmt { margin-top: 12px; border-radius: var(--r-md); background: var(--sunk); overflow: clip; border: var(--bw-hair) solid var(--hair); }
.stmt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 42px; padding: 10px 12px; font: 600 15px/1.25 var(--font); color: var(--ink-2); }
.stmt-row + .stmt-row { border-top: var(--bw-hair) solid var(--hair); }
.stmt-row b { font: 850 16px/1.2 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.stmt-row b.mut { font-weight: 700; color: var(--ink-3); }
.stmt-row.strong { color: var(--ink); font-weight: 800; }
.stmt-sent { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-top: var(--bw-hair) solid var(--hair); font: 650 14.5px/1.4 var(--font); color: var(--ink-2); }
.stmt-sent .ic { width: 20px; height: 20px; flex: none; }
.stmt-sent.over { background: var(--red-tint); color: var(--red-ink); border-top-color: var(--red-edge); }
.stmt-sent.over .ic { color: var(--red); }
.stmt-sent b { font-weight: 850; }

/* Phones up to 419 px: a slightly smaller amount fits next to a short address ("2812 Selma
   Ave  $12,600") instead of taking a line of its own, so the decision keys sit higher. */
@media (max-width: 419px) { .ok-head .ok-amt { font-size: 28px; } }

/* "Draws from your texts" card */
.texts { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; margin-bottom: 14px; }
.texts .ok-band { background: var(--navy); color: var(--on-navy); }
.texts .ok-band .ic { color: var(--amber); }
.texts-body { padding: 14px; }
.bubble-who { font: 750 14px/1.3 var(--font); color: var(--ink-2); }
.bubble-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.bubble {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 18px 18px 18px 6px;
  background: var(--tray); color: var(--ink); font: 600 16px/1.4 var(--font); overflow-wrap: anywhere; white-space: pre-wrap;
}
.bubble-ph { position: relative; flex: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 12px; overflow: clip; background: var(--photo-bg); }
.bubble-ph img { width: 100%; height: 100%; object-fit: cover; }
.bubble-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--photo-ring); }
.guess {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px; border-radius: var(--r-md);
  background: var(--sunk); border: var(--bw-hair) solid var(--hair);
}
.guess > div { flex: 1; min-width: 0; }
.guess .l { display: block; font: 850 12.5px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.guess b { display: block; margin-top: 4px; font: 850 17.5px/1.25 var(--font); letter-spacing: -.01em; overflow-wrap: anywhere; }
.guess .s { display: block; margin-top: 3px; font: 650 14px/1.3 var(--font); color: var(--ink-2); }
.guess .amt { font: 850 22px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guess-miss { background: var(--amber-tint); border-color: var(--amber-edge); }
.texts-more { display: flex; justify-content: center; padding: 0 14px 6px; }
.texts-logged { display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 750 14.5px/1.3 var(--font); color: var(--green); }

/* ledger */
.ledger { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; min-height: 66px; padding: 11px 14px; width: 100%; border: 0; background: var(--card); text-align: left; text-decoration: none; color: var(--ink); }
.prow + .prow { border-top: var(--bw-hair) solid var(--hair); }
.prow-t { min-width: 0; }
.prow-t b { display: block; font: 800 16.5px/1.25 var(--font); overflow-wrap: anywhere; }
.prow-t span { display: block; margin-top: 3px; font: 600 14px/1.3 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.prow-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.prow-amt { font: 850 18px/1 var(--font); letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.prow.waiting { background: var(--amber-tint); }
.ledger-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 14px; background: var(--sunk); border-top: var(--bw-hair) solid var(--hair); font: 750 15px/1.2 var(--font); }
.ledger-foot b { font: 850 19px/1 var(--font); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.ledger-more { display: flex; justify-content: center; padding: 6px 14px; border-top: var(--bw-hair) solid var(--hair); }
.ltable { width: 100%; border-collapse: collapse; background: var(--card); }
.ltable th { padding: 12px 14px; text-align: left; font: 850 12.5px/1.2 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); background: var(--sunk); border-bottom: var(--bw-hair) solid var(--hair); }
.ltable td { padding: 13px 14px; border-top: var(--bw-hair) solid var(--hair); font: 650 15px/1.3 var(--font); vertical-align: middle; }
.ltable td.amt, .ltable th.amt { text-align: right; font-variant-numeric: tabular-nums; }
.ltable td.amt { font: 850 17px/1 var(--font); }
.ltable tr.waiting td { background: var(--amber-tint); }
.ltable a { color: var(--ink); text-decoration: none; font-weight: 800; }
.ltable tbody tr:first-child td { border-top: 0; }

/* empty state */
.empty { padding: 18px 16px; border: var(--bw) dashed var(--edge); border-radius: var(--r-lg); background: transparent; text-align: center; }
.empty p { font: 600 15px/1.45 var(--font); color: var(--ink-2); }
.empty .btn { margin-top: 12px; min-height: 50px; }
.empty-quiet { padding: 14px 16px; }

/* skeletons (shown after 150ms) */
.skel-card { padding: 16px 14px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); margin-bottom: 10px; }
.sk { display: block; height: 12px; width: 40%; border-radius: 6px; background: var(--skel); position: relative; overflow: hidden; }
.sk + .sk { margin-top: 12px; }
.sk.t { height: 18px; width: 60%; }
.sk.m { height: 22px; width: 35%; }
.sk.w { width: 85%; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skel-hi), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.skel-kpis .skel-card { min-height: 118px; margin: 0; }
.skel-head { background: var(--navy); padding: calc(var(--safe-t) + 20px) 16px 24px; }
.skel-head .sk { background: var(--glass-12); }
.skel-head .sk::after { background: linear-gradient(90deg, transparent, var(--glass-12), transparent); }
.fade-in { animation: fadein var(--dur) var(--ease); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* activity feed */
.feed { list-style: none; margin: 0; padding: 4px 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }
.feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; }
.feed li + li { border-top: var(--bw-hair) solid var(--hair); }
.fd-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--navy-tint); color: var(--navy); }
.fd-ic .ic { width: 21px; height: 21px; stroke-width: 2.4; }
.fd-ic.amber { background: var(--amber); color: var(--navy); }
.fd-ic.green { background: var(--green-tint); color: var(--green); }
.fd-ic.teal { background: var(--teal-tint); color: var(--teal-2); }
.fd-ic.red { background: var(--red-tint); color: var(--red); }
.feed p { font: 650 14.5px/1.35 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.feed p b { font-weight: 850; }
.feed .fd-m { margin-top: 2px; font: 600 13.5px/1.3 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.feed time { font: 700 12.5px/1.2 var(--font); color: var(--ink-2); white-space: nowrap; padding-top: 2px; }

/* punch rows */
.plist { list-style: none; margin: 0; padding: 0; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.plist li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; align-items: start; padding: 8px 14px 12px 4px; }
.plist li + li { border-top: var(--bw-hair) solid var(--hair); }
.pbox {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--on-navy);
}
.pbox i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: var(--bw-strong) solid var(--edge); background: var(--card); }
.pbox i .ic { width: 18px; height: 18px; stroke-width: 3.2; opacity: 0; }
.pbox[aria-checked="true"] i { background: var(--green); border-color: var(--green); }
.pbox[aria-checked="true"] i .ic { opacity: 1; }
.pbox[disabled] { cursor: default; }
/* View-only status mark: amber flag while open, green check once done. */
.pmark i { border: 0; background: var(--amber-tint); color: var(--amber-ink); }
.pmark i .ic { opacity: 1; width: 16px; height: 16px; stroke-width: 2.6; }
.pmark.is-done i { background: var(--green-tint); color: var(--green); }
.ptext { padding-top: 12px; min-width: 0; }
.ptext > p { font: 700 16px/1.35 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.plist li.done .ptext > p { color: var(--ink-2); }
.ptext > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font: 650 13.5px/1.3 var(--font); color: var(--ink-2); }
.ptext .thumbs { margin-top: 8px; }
.pdone { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 800; }
.pdone .ic { width: 16px; height: 16px; stroke-width: 3; }
.pgroup { margin-bottom: 14px; }
.pgroup-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; text-decoration: none; color: var(--ink); min-height: 48px; }
.pgroup-h .tile { width: 40px; height: 40px; border-radius: 10px; }
.pgroup-h .tile .ic { width: 22px; height: 22px; }
.pgroup-h b { font: 850 17.5px/1.2 var(--font); letter-spacing: -.015em; overflow-wrap: anywhere; }
.pgroup-h span.s { display: block; font: 650 13.5px/1.2 var(--font); color: var(--ink-2); margin-top: 2px; }
.pgroup-h > .ic { margin-left: auto; color: var(--ink-3); }
.collapse-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 14px; padding: 0 4px;
  border: 0; border-bottom: var(--bw-rule) solid var(--rule); background: none; text-align: left;
  font: 900 15px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.collapse-btn .ic { margin-left: auto; }

/* photos */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.th { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: clip; background: var(--photo-bg); padding: 0; border: 0; flex: none; }
.th img { width: 100%; height: 100%; object-fit: cover; }
.th::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--photo-ring); pointer-events: none; }
.th.pdf { display: grid; place-items: center; background: var(--navy-tint); color: var(--navy); font: 850 12.5px/1 var(--font); }
.th-wrap { position: relative; }
.th-x {
  position: absolute; top: -12px; right: -12px; z-index: 2; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border: 0; background: transparent;
}
.th-x i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-navy); box-shadow: 0 0 0 2px var(--card); }
.th-x .ic { width: 14px; height: 14px; stroke-width: 3; }
.upbar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--glass-45); overflow: clip; z-index: 1; }
.upbar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width var(--dur) linear; }
.th.uploading img, .ph.uploading img { opacity: .6; }
.th.failed, .ph.failed { background: var(--red-tint); }

.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ph {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: clip; background: var(--photo-bg);
  padding: 0; border: 0; display: block; width: 100%;
}
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--photo-ring); pointer-events: none; }
.ph-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1; border-radius: 10px; border: var(--bw) dashed var(--edge); background: var(--card); color: var(--navy);
  font: 800 14px/1.15 var(--font); text-align: center; padding: 6px; width: 100%;
}
.ph-add .ic { width: 28px; height: 28px; }
.ph-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--navy-tint); color: var(--navy); padding: 8px; text-align: center; }
.ph-pdf b { font: 900 12.5px/1 var(--font); letter-spacing: .08em; }
.ph-pdf span { font: 650 12.5px/1.2 var(--font); color: var(--ink-2); overflow-wrap: anywhere; max-height: 3.6em; overflow: hidden; }
.ph-cover { position: absolute; left: 6px; top: 6px; z-index: 1; }
.ph-retry { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--red); font: 800 13.5px/1.1 var(--font); border: 0; background: transparent; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.strip .ph { border-radius: var(--r-md); }
.strip-more { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--navy-60); color: var(--on-navy); font: 850 20px/1 var(--font); }
.nophoto { display: flex; align-items: center; gap: 12px; padding: 16px 14px; border: var(--bw) dashed var(--edge); border-radius: var(--r-lg); color: var(--ink-2); font: 600 15px/1.4 var(--font); }
.nophoto .ic { width: 28px; height: 28px; color: var(--ink-3); }

/* photo viewer */
.viewer { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--viewer); color: var(--on-navy); display: flex; flex-direction: column; touch-action: pan-y; }
.viewer-top { display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-t) + 8px) 12px 8px; }
.viewer-top b { flex: 1; font: 800 16px/1.2 var(--font); text-align: center; font-variant-numeric: tabular-nums; }
/* A definite 1fr track: the photo's max-height resolves against the space left, so a big photo is contained. */
.viewer-img { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 0 8px; position: relative; }
.viewer-img img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; }
.viewer-img iframe { width: 100%; height: 100%; border: 0; background: var(--card); border-radius: 8px; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.viewer-nav.prev { left: 8px; } .viewer-nav.next { right: 8px; }
.viewer-bot { padding: 14px 16px calc(16px + var(--safe-b)); background: linear-gradient(transparent, var(--viewer) 30%); }
.viewer-cap { font: 600 15px/1.4 var(--font); color: var(--on-navy-2); overflow-wrap: anywhere; }
.viewer-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.viewer .icon-btn { background: var(--glass-12); }

/* =====================================================================
   FORMS
   ===================================================================== */

.fld { display: block; margin-top: 18px; }
.fld:first-child { margin-top: 0; }
.lbl { display: block; margin: 0 0 9px; font: 850 12.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lbl small { font: 650 12.5px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.inp, .ta {
  display: block; width: 100%; min-height: var(--h-btn); padding: 0 14px;
  border: var(--bw) solid var(--edge); border-radius: var(--r-md); background: var(--card);
  font: 600 17px/1.3 var(--font); color: var(--ink);
  transition: border-color var(--dur-press) var(--ease);
}
.ta { min-height: 96px; padding: 13px 14px; resize: none; font: 500 16.5px/1.45 var(--font); }
.inp::placeholder, .ta::placeholder { color: var(--ink-3); opacity: 1; font-weight: 550; }
.inp:focus, .ta:focus { border: var(--bw-strong) solid var(--navy); box-shadow: var(--focus); }
.inp.err, .ta.err { border-color: var(--red); }
.inp[type="date"] { -webkit-appearance: none; appearance: none; line-height: var(--h-btn); }
.hint { margin-top: 8px; font: 600 14px/1.4 var(--font); color: var(--ink-2); }
.err-box { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 11px 13px; border-radius: var(--r-md); background: var(--red-tint); color: var(--red-ink); font: 650 15px/1.4 var(--font); }
.err-box .ic { width: 21px; height: 21px; color: var(--red); stroke-width: 2.5; }
.err-box b { display: block; font-weight: 850; }
.fixed-chip { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: var(--r-md); background: var(--navy-tint); color: var(--navy); font: 800 16.5px/1.2 var(--font); box-shadow: inset 0 0 0 1.5px var(--navy-edge); }
.fixed-chip .ic { color: var(--navy-3); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid2 .fld { margin-top: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.grid3 .fld { margin-top: 0; }
.more-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 16px; padding: 0 2px; border: 0; background: none; font: 850 15.5px/1 var(--font); color: var(--blue); }
.more-btn .ic { width: 20px; height: 20px; }

.cost {
  display: flex; align-items: center; gap: 4px; min-height: 62px; margin-top: 10px; padding: 0 14px;
  border: var(--bw) solid var(--edge); border-radius: var(--r-md); background: var(--card);
}
.cost.has { border: var(--bw-strong) solid var(--ink); }
.cost:focus-within { border: var(--bw-strong) solid var(--navy); box-shadow: var(--focus); }
.cost .cur { font: 800 26px/1 var(--font); color: var(--ink-2); }
.cost input {
  flex: 1; min-width: 0; height: 58px; border: 0; padding: 0 4px; background: transparent;
  font: 850 26px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.cost input::placeholder { font: 650 19px/1 var(--font); letter-spacing: 0; color: var(--ink-3); opacity: 1; }
.cost input:focus { box-shadow: none; }
.cost small { flex: none; font: 850 12.5px/1.1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); text-align: right; max-width: 46%; }

.search {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 4px 0 14px;
  border: var(--bw) solid var(--edge); border-radius: var(--r-md); background: var(--card);
}
.search:focus-within { border: var(--bw-strong) solid var(--navy); box-shadow: var(--focus); }
.search > .ic { color: var(--ink-2); }
.search input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font: 600 17px/1 var(--font); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); opacity: 1; }
.search input:focus { box-shadow: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; color: var(--ink-2); padding: 0; }

.datefld { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 14px; border: var(--bw) solid var(--edge); border-radius: var(--r-md); background: var(--card); font: 750 17px/1 var(--font); }
.datefld .ic { color: var(--navy-3); }
.datefld b { margin-left: auto; font-weight: 850; color: var(--blue); font-size: 15.5px; }
.datefld input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; font-size: 16px; }
.datefld:focus-within { border-color: var(--navy); box-shadow: var(--focus); }

.check-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 12px 12px 12px 10px; border: 0; background: var(--card); text-align: left; font: 650 15.5px/1.4 var(--font); color: var(--ink); }
.check-row + .check-row { border-top: var(--bw-hair) solid var(--hair); }
.check-row i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; border: var(--bw-strong) solid var(--edge); background: var(--card); color: var(--on-navy); }
.check-row i .ic { width: 18px; height: 18px; stroke-width: 3.2; opacity: 0; }
.check-row[aria-checked="true"] i { background: var(--green); border-color: var(--green); }
.check-row[aria-checked="true"] i .ic { opacity: 1; }

.switch { position: relative; flex: none; width: 60px; height: 48px; padding: 0; border: 0; background: transparent; }
.switch i { position: absolute; left: 4px; right: 4px; top: 10px; height: 28px; border-radius: 14px; background: var(--edge); transition: background-color var(--dur) var(--ease); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); transition: transform var(--dur) var(--ease); }
.switch[aria-checked="true"] i { background: var(--green); }
.switch[aria-checked="true"] i::after { transform: translateX(24px); }

/* =====================================================================
   SHEETS, DIALOGS, TOASTS
   ===================================================================== */

.layer-root { position: fixed; inset: 0; z-index: var(--z-scrim); }
.scrim { position: absolute; inset: 0; background: var(--scrim); animation: fadein var(--dur) var(--ease); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--card); color: var(--ink);
  animation: sheetup var(--dur-sheet) var(--ease);
}
.sheet.closing { animation: sheetdown 140ms var(--ease) forwards; }
.layer-root.closing .scrim { opacity: 0; transition: opacity 140ms var(--ease); }
@keyframes sheetup { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes sheetdown { to { transform: translateY(40px); opacity: 0; } }
.sheet-top { padding: 10px 16px 0; }
.grab { width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--grab); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-head > div { min-width: 0; padding-top: 4px; }
.sheet-eyebrow { font: 850 12.5px/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--navy-3); }
.sheet-eyebrow.green { color: var(--green); }
.sheet-eyebrow.red { color: var(--red); }
.sheet-eyebrow.teal { color: var(--teal-2); }
.sheet-eyebrow.amber { color: var(--amber-ink); }
.sheet h2 { margin-top: 6px; font: 850 22px/1.18 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sheet-x { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-md); border: var(--bw) solid var(--line); background: var(--card); color: var(--ink); padding: 0; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; -webkit-overflow-scrolling: touch; }
.sheet-foot { flex: none; padding: 12px 16px calc(16px + var(--safe-b)); border-top: var(--bw-hair) solid var(--hair); background: var(--card); }
.sheet-foot .btn + .btn { margin-top: 8px; }
.sheet-foot .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet-amt { margin-top: 6px; font: 850 40px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sheet-sub { margin-top: 6px; font: 600 15.5px/1.4 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.sheet-p { font: 600 16px/1.45 var(--font); color: var(--ink-2); }
.sheet-p + .sheet-p { margin-top: 10px; }
.sheet-p b { color: var(--ink); font-weight: 800; }

.menu { display: grid; gap: 8px; }
.menu-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 8px 12px;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--card); text-align: left; color: var(--ink); text-decoration: none;
}
.menu-row .row-ic { width: 44px; height: 44px; }
.menu-row b { display: block; font: 800 17px/1.2 var(--font); letter-spacing: -.01em; }
.menu-row span.s { display: block; margin-top: 3px; font: 600 14px/1.3 var(--font); color: var(--ink-2); }
.menu-row > .ic { margin-left: auto; color: var(--ink-3); }
.menu-row.danger b { color: var(--red); }

.choice-cards { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 96px; padding: 14px;
  border: var(--bw) solid var(--edge); border-radius: var(--r-lg); background: var(--card); text-align: left; color: var(--ink);
}
.choice .tile { width: 58px; height: 58px; }
.choice b { display: block; font: 850 19px/1.2 var(--font); letter-spacing: -.015em; }
.choice span.s { display: block; margin-top: 4px; font: 600 15px/1.35 var(--font); color: var(--ink-2); }
.choice[aria-checked="true"] { border: var(--bw-strong) solid var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--navy-tint); }
.choice.is-turn[aria-checked="true"] { border-color: var(--teal-2); box-shadow: inset 0 0 0 1px var(--teal-2); background: var(--teal-tint); }
.choice-sm { min-height: 64px; padding: 10px 12px; }
.choice-sm .tile { width: 44px; height: 44px; }
.choice-sm .tile .ic { width: 22px; height: 22px; }

.pick-list { display: grid; gap: 8px; margin-top: 12px; }
.pick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--card); text-align: left; color: var(--ink);
}
.pick .tile { width: 44px; height: 44px; border-radius: 11px; }
.pick .tile .ic { width: 22px; height: 22px; }
.pick b { display: block; font: 800 16.5px/1.25 var(--font); overflow-wrap: anywhere; }
.pick span.s { display: block; margin-top: 3px; font: 600 14px/1.3 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.pick > div { flex: 1; min-width: 0; }
.pick[aria-checked="true"] { border-color: var(--teal-2); background: var(--teal-tint); }
.pick-sel { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--teal-tint); border: var(--bw) solid var(--teal-edge); }
.pick-sel > div { flex: 1; min-width: 0; }
.pick-sel b { display: block; font: 850 17px/1.25 var(--font); overflow-wrap: anywhere; }
.pick-sel span.s { display: block; margin-top: 3px; font: 650 14px/1.3 var(--font); color: var(--teal-2); }

.onetime { margin-top: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--amber-tint); border: var(--bw) solid var(--amber-edge); }
.onetime p { font: 650 15px/1.4 var(--font); color: var(--amber-ink); }
.onetime p b { font-weight: 850; }
.onetime code { display: block; margin-top: 10px; padding: 12px; border-radius: var(--r-md); background: var(--card); border: var(--bw) solid var(--amber-edge); font: 750 15px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.onetime .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }

.toasts { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
body.no-tabbar .toasts { bottom: calc(var(--safe-b) + 16px); }
body.in-runner .toasts { bottom: calc(var(--wfoot-h, 190px) + 12px); }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px;
  min-height: 52px; padding: 8px 8px 8px 14px; border-radius: var(--r-lg);
  background: var(--ink); color: var(--on-navy); box-shadow: var(--sh-toast);
  font: 650 15px/1.35 var(--font); animation: toastin var(--dur) var(--ease);
}
.toast > span { flex: 1; min-width: 0; padding: 6px 0; overflow-wrap: anywhere; }
.toast .ic { width: 20px; height: 20px; color: var(--on-navy-green); }
.toast-warn .ic { color: var(--amber); }
.toast-error .ic { color: var(--on-navy-red); }
/* Phones and tablets: on a page with the + button, toasts sit above it, never over it. */
@media (max-width: 1023px) {
  body.has-fab .toasts { bottom: calc(var(--tabbar-h) + var(--safe-b) + 94px); }
}
/* While a sheet is open its main button sits at the bottom: toasts move to the top. */
body.layer-open .toasts { top: calc(var(--safe-t) + 12px); bottom: auto; }
/* A toast that would cover the key the thumb goes to next (Mark paid after Approve) shows at the top. */
#toasts.at-top { top: calc(var(--safe-t) + 12px); bottom: auto; }
.toast button { flex: none; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--amber); font: 850 15px/1 var(--font); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   HOME
   ===================================================================== */

.hello { padding: 4px 16px 22px; }
.hello-date { font: 750 13px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-2); }
.hello-h { margin-top: 9px; font: 850 31px/1.08 var(--font); letter-spacing: -.03em; overflow-wrap: anywhere; }
.hello-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  min-height: 48px; padding: 0 14px 0 12px; border-radius: 11px; border: 0;
  background: var(--amber); color: var(--navy); text-decoration: none;
  font: 850 16.5px/1.15 var(--font); letter-spacing: -.01em;
}
.hello-pill .pill-n { flex: none; }
.pill-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--navy); color: var(--amber); font: 900 14px/1 var(--font); font-variant-numeric: tabular-nums; }
.hello-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 650 16px/1.35 var(--font); color: var(--on-navy); }
.hello-line .ic { width: 22px; height: 22px; color: var(--on-navy-green); }
.hello-sub { margin-top: 10px; font: 600 16px/1.42 var(--font); color: var(--on-navy-2); max-width: 560px; }
.quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick .key { min-height: 88px; font-size: 16px; padding: 10px 8px; }
.quick .key .ic { width: 28px; height: 28px; color: var(--navy); }
.quick .key.full { grid-column: 1 / -1; flex-direction: row; min-height: var(--h-key); justify-content: flex-start; padding: 0 16px; gap: 12px; }
.quick .key.full .key-n { margin-left: auto; }
.rail-stack > * + * { margin-top: 0; }
.desk-only { display: none !important; }

/* sync card */
.sync { padding: 14px; border-radius: var(--r-lg); background: var(--card); border: var(--bw) solid var(--line); font: 600 14.5px/1.45 var(--font); color: var(--ink-2); }
.sync > b { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font: 850 16px/1.25 var(--font); color: var(--ink); }
.sync > b i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.sync.amber > b i { background: var(--amber-edge); box-shadow: 0 0 0 3px var(--amber-tint); }
.sync.red > b i { background: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.sync p + p { margin-top: 2px; }
.sync .link { margin-top: 12px; margin-block-end: -10px; }
.side .sync { background: var(--glass-06); border: var(--bw-hair) solid var(--glass-16); color: var(--on-navy-2); font-size: 13.5px; }
.side .sync > b { color: var(--on-navy); font-size: 14.5px; }
.side .sync > b i { background: var(--on-navy-green); box-shadow: 0 0 0 3px var(--green-glow); }
.side .sync.amber > b i { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-35); }
.side .sync.red > b i { background: var(--on-navy-red); box-shadow: 0 0 0 3px var(--red-ring); }

/* people */
.person { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 14px; min-height: 72px; }
.person + .person { border-top: var(--bw-hair) solid var(--hair); }
.person > div { flex: 1; min-width: 0; }
.person b { display: block; font: 800 16.5px/1.25 var(--font); overflow-wrap: anywhere; }
.person span.s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font: 600 13.5px/1.3 var(--font); color: var(--ink-2); }
.person .icon-btn-light { border: 0; }
.person.off b { color: var(--ink-3); }

/* =====================================================================
   SIGN IN
   ===================================================================== */

.signin { min-height: 100dvh; display: flex; flex-direction: column; background: var(--navy); color: var(--on-navy); }
.si-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 40px) 24px 36px; text-align: center; }
.si-hero h1 { margin-top: 22px; font: 900 38px/1 var(--font); letter-spacing: -.035em; }
.si-hero p { margin-top: 12px; font: 850 12.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.si-sheet { padding: 28px 20px calc(36px + var(--safe-b)); border-radius: 28px 28px 0 0; background: var(--card); color: var(--ink); }
.si-in { max-width: 440px; margin: 0 auto; }
.si-sheet h2 { font: 900 29px/1.05 var(--font); letter-spacing: -.03em; }
.si-sub { margin-top: 9px; font: 550 17px/1.42 var(--font); color: var(--ink-2); }
.si-lbl { display: block; margin: 22px 0 9px; font: 850 12.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.si-field {
  display: block; width: 100%; height: 68px; padding: 0 14px; text-align: center;
  border: var(--bw-strong) solid var(--navy); border-radius: var(--r-lg); background: var(--card);
  font: 850 27px/1 var(--font); letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--ink); text-transform: uppercase;
}
.si-field::placeholder { font: 600 19px/1 var(--font); letter-spacing: 0; color: var(--ink-3); text-transform: none; opacity: 1; }
.si-field:focus { box-shadow: 0 0 0 4px var(--amber-ring); }
.si-field.err { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-ring); }
.si-err { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--red-tint); color: var(--red-ink); font: 650 15.5px/1.4 var(--font); }
.si-err .ic { width: 22px; height: 22px; color: var(--red); stroke-width: 2.5; }
.si-err b { display: block; font-weight: 850; }
.si-sheet .btn-xl { margin-top: 16px; }
.si-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font: 600 15px/1.42 var(--font); color: var(--ink-2); }
.si-tip .ic { width: 22px; height: 22px; color: var(--navy-3); stroke-width: 2.4; }
.si-tip b { color: var(--ink); font-weight: 800; }
.si-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; font: 750 16px/1.3 var(--font); color: var(--on-navy-2); }

/* =====================================================================
   JOBS LIST, TITLE BARS
   ===================================================================== */

.titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 4px 16px; }
.titlebar h1 { font: 900 30px/1.05 var(--font); letter-spacing: -.03em; }
.titlebar-sub { padding: 0 16px 12px; font: 600 15px/1.35 var(--font); color: var(--on-navy-2); }
.chrome-pad { padding: 4px 16px 16px; }
.jobs-tools { padding-top: 16px; }
.jobs-tools .search { margin-bottom: 14px; }
.jobgrid { display: block; }
.mtot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mtot .m { padding: 12px 10px; }
.mtot .m > b { font-size: 21px; }
.mtot .m > span { font-size: 12.5px; letter-spacing: .05em; }

/* =====================================================================
   JOB PAGE
   ===================================================================== */

.jh-wrap { background: var(--navy); color: var(--on-navy); padding-top: var(--safe-t); }
.jh-wrap.is-turn { background: var(--teal-2); }
.navrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 4px 8px 0 6px; }
.navrow-r { display: flex; gap: 8px; }
.back {
  display: inline-flex; align-items: center; gap: 0; min-height: 48px; padding: 0 12px 0 2px; border: 0; background: none;
  color: var(--on-navy); text-decoration: none; font: 750 17px/1 var(--font);
}
.back .ic { width: 28px; height: 28px; stroke-width: 2.4; }
.hero { position: relative; height: 188px; margin-top: 2px; overflow: clip; background: var(--navy-2); }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, var(--navy) 100%); pointer-events: none; }
.is-turn .hero::after { background: linear-gradient(transparent 40%, var(--teal-2) 100%); }
.hero-chip {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  min-height: 48px; padding: 0 14px; border-radius: var(--r-pill); border: 0;
  background: var(--glass-dark); color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--glass-30);
  font: 800 14px/1 var(--font);
}
.hero-chip .ic { width: 18px; height: 18px; }
.jh { padding: 4px 16px 16px; }
.jh h1 { margin-top: 12px; font: 900 33px/1.04 var(--font); letter-spacing: -.035em; overflow-wrap: anywhere; }
.jh-client { margin-top: 8px; font: 700 16px/1.3 var(--font); color: var(--on-navy); overflow-wrap: anywhere; }
.jh-client span { color: var(--on-navy-2); font-weight: 650; }
.jh-meta { margin-top: 3px; font: 550 15px/1.35 var(--font); color: var(--on-navy-2); overflow-wrap: anywhere; }
.stage-wrap { padding: 0 16px 16px; }
.stage-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; font: 650 13.5px/1.2 var(--font); color: var(--on-navy-2); }
.stage-cap b { font: 850 12.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--on-navy); }
.stepper { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.st {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0;
  height: 62px; padding: 0 2px; border-radius: var(--r-md); border: var(--bw) solid var(--glass-30); background: transparent;
  color: var(--on-navy-2); font: 800 14.5px/1 var(--font);
}
.stepper.n5 .st { font-size: 13.5px; }
.st i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--glass-16); font: 900 12.5px/1 var(--font); font-style: normal; }
.st i .ic { width: 14px; height: 14px; stroke-width: 3.4; }
.st.done { background: var(--navy-2); border-color: var(--navy-2); color: var(--on-navy); }
.st.done i { background: var(--navy-4); }
.is-turn .st.done { background: var(--teal); border-color: var(--teal); }
.is-turn .st.done i { background: var(--teal-2); }
.st.now { background: var(--card); border-color: var(--card); color: var(--navy); font-weight: 900; }
.st.now i { background: var(--navy); color: var(--on-navy); }
.is-turn .st.now { color: var(--teal-2); }
.is-turn .st.now i { background: var(--teal-2); }
.st[disabled] { cursor: default; }
.jtabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin: 14px 16px 0; padding: 6px; border-radius: var(--r-tray); background: var(--tray);
}
.jtabs a {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 4px;
  border-radius: 11px; background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--edge); font: 800 14.5px/1 var(--font); letter-spacing: -.015em; white-space: nowrap;
}
.jtabs a[aria-current="page"] { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.jtabs.is-turn a[aria-current="page"] { background: var(--teal-2); }
.jtabs b {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: var(--amber); color: var(--navy); font: 900 12.5px/1 var(--font); font-variant-numeric: tabular-nums;
}
.jtabs b.n { background: var(--tray); color: var(--ink); }
.jtabs a[aria-current="page"] b.n { background: var(--glass-16); color: var(--on-navy); }
.compact {
  position: sticky; top: 0; z-index: var(--z-sticky); height: calc(56px + var(--safe-t)); margin-bottom: calc(-56px - var(--safe-t));
  display: flex; align-items: center; gap: 4px; padding: var(--safe-t) 12px 0 6px;
  background: var(--navy); color: var(--on-navy); box-shadow: 0 6px 16px -10px var(--glass-dark);
  transform: translateY(-110%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility var(--dur);
}
.compact.is-turn { background: var(--teal-2); }
.compact.show { transform: none; visibility: visible; }
.compact .back { padding-right: 0; }
.compact-t { flex: 1; min-width: 0; text-align: center; padding-right: 44px; }
.compact-t b { display: block; font: 850 18px/1.1 var(--font); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-t span { display: block; margin-top: 3px; font: 650 12.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tab-actions .btn { flex: 1 1 200px; }
.add-pop { position: relative; }

/* walkthrough cards (job page) */
.wcard { padding: 14px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }
.wcard + .wcard { margin-top: 10px; }
.wcard-top { display: flex; align-items: flex-start; gap: 12px; }
.wcard-top > div { flex: 1; min-width: 0; }
.wcard-k { font: 850 12.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-3); }
.is-turn .wcard-k { color: var(--teal-2); }
.wcard h3 { margin-top: 4px; font: 850 19px/1.2 var(--font); letter-spacing: -.015em; }
.wcard p.s { margin-top: 4px; font: 600 14.5px/1.35 var(--font); color: var(--ink-2); }
.wcard .wprog-l { height: 8px; margin-top: 12px; border-radius: 4px; background: var(--track); overflow: clip; }
.wcard .wprog-l i { display: block; height: 100%; background: var(--amber); border-radius: 4px; }
.wcard .wres { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 750 15px/1.3 var(--font); }
.wcard .wres.red { color: var(--red); }
.wcard .wres.green { color: var(--green); }
.wcard .wres > .ic { width: 20px; height: 20px; }
.wcard .btn { margin-top: 12px; }
.wcard-older { margin-top: 10px; display: grid; gap: 6px; }

/* =====================================================================
   WALKTHROUGH RUNNER
   ===================================================================== */

.runner { min-height: 100dvh; display: flex; flex-direction: column; background: var(--page); }
.rbar {
  position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 12px;
  min-height: calc(70px + var(--safe-t)); padding: calc(var(--safe-t) + 7px) 12px 7px 10px; background: var(--navy); color: var(--on-navy);
}
.runner.is-turn .rbar { background: var(--teal-2); }
.rbar-x {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none;
  width: 56px; height: 56px; border-radius: 13px; border: 0; background: var(--glass-12); color: var(--on-navy);
  font: 800 12.5px/1 var(--font); padding: 0;
}
.rbar-x .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.rbar-t { flex: 1; min-width: 0; }
.rbar-t b { display: block; font: 850 21px/1.1 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.rbar-t span { display: block; margin-top: 4px; font: 600 14px/1.25 var(--font); color: var(--on-navy-2); overflow-wrap: anywhere; }
.saved {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 11px 0 9px;
  border-radius: 17px; border: 0; background: var(--glass-12); color: var(--on-navy); font: 800 13.5px/1 var(--font);
}
.saved .ic { width: 18px; height: 18px; color: var(--on-navy-green); stroke-width: 2.8; }
.saved.saving .ic { color: var(--on-navy); animation: spin 1s linear infinite; }
.saved.offline .ic { color: var(--amber); }
.saved.failed { height: 48px; padding: 0 14px; color: var(--on-navy-red); }
.saved.failed .ic { color: var(--on-navy-red); }
.rbar .btn-ghost { min-height: 48px; padding: 0 12px; font-size: 15px; }
.rule {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 15px;
  background: var(--amber); color: var(--navy); border-bottom: var(--bw-rule) solid var(--navy);
}
.rule-tag {
  flex: none; margin-top: 1px; padding: 6px 7px; border-radius: var(--r-xs); background: var(--navy); color: var(--amber);
  font: 900 12.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
.rule p { font: 650 14.5px/1.38 var(--font); }
.rule p b { display: block; margin-bottom: 4px; font: 850 17px/1.25 var(--font); letter-spacing: -.01em; }
.result-banner { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-bottom: var(--bw-rule) solid var(--navy); background: var(--green-tint); color: var(--green); }
.result-banner.red { background: var(--red-tint); color: var(--red-ink); }
.result-banner.navy { background: var(--navy-tint); color: var(--navy); }
/* Direct children only: a Hidden chip in the title or a link's chevron keeps its own size. */
.result-banner > .ic { width: 26px; height: 26px; flex: none; }
.result-banner b { display: block; font: 850 19px/1.25 var(--font); letter-spacing: -.015em; }
.result-banner > div > span { display: block; margin-top: 3px; font: 650 14.5px/1.4 var(--font); color: var(--ink-2); }
.wbody { flex: 1; padding: 12px 12px 26px; }
.wsec {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; margin-bottom: 10px; padding: 11px 12px 11px 14px;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--card); text-align: left; color: var(--ink);
}
.wsec-t { flex: 1; min-width: 0; }
.wsec-t b { display: block; font: 850 17.5px/1.2 var(--font); letter-spacing: -.015em; }
.wsec-t span { display: block; margin-top: 4px; font: 650 14px/1.25 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wsec-t span em { font-style: normal; color: var(--red-ink); font-weight: 800; }
.wsec > .ic { color: var(--ink-2); stroke-width: 2.5; }
.done-dot { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--on-navy); }
.done-dot .ic { width: 18px; height: 18px; stroke-width: 3.2; }
.wgroup { margin-bottom: 10px; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); background: var(--card); overflow: clip; }
.wgroup > .wsec { margin: 0; border: 0; border-radius: 0; background: var(--navy-tint); }
.wprog { height: 6px; background: var(--track); }
.wprog i { display: block; height: 100%; background: var(--navy); transition: width var(--dur) var(--ease); }
.runner.is-turn .wprog i { background: var(--teal); }
.line { padding: 16px 14px; border-top: var(--bw) solid var(--hair); scroll-margin-top: 90px; }
.wprog + .line { border-top: 0; }
.line.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 0%, 40% { background: var(--amber-tint); } 100% { background: var(--card); } }
.line-l { font: 800 18px/1.25 var(--font); letter-spacing: -.012em; overflow-wrap: anywhere; }
.line-h { margin-top: 5px; font: 550 14.5px/1.42 var(--font); color: var(--ink-2); }
.tools { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.note {
  position: relative; flex: 1; min-width: 0; min-height: 56px; padding: 8px 13px 6px;
  border: var(--bw) solid var(--edge); border-radius: var(--r-md); background: var(--card);
}
.note:focus-within { border: var(--bw-strong) solid var(--navy); box-shadow: var(--focus); }
.note small { display: block; font: 850 12.5px/1.1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.note textarea {
  display: block; width: 100%; min-height: 28px; margin-top: 4px; padding: 0; border: 0; background: transparent; resize: none;
  font: 550 16px/1.4 var(--font); color: var(--ink); overflow: hidden;
}
.note textarea::placeholder { color: var(--ink-3); opacity: 1; }
.note textarea:focus { box-shadow: none; }
.cam {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none;
  width: 60px; min-height: 56px; border-radius: var(--r-md); border: var(--bw) solid var(--navy); background: var(--card); color: var(--navy);
  font: 850 12.5px/1 var(--font); padding: 0;
}
.cam .ic { width: 24px; height: 24px; }
.punchnote {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; border: 0;
  background: var(--red-tint); color: var(--red-ink); font: 700 14.5px/1.3 var(--font); text-align: left;
}
.punchnote > .ic { width: 20px; height: 20px; color: var(--red); stroke-width: 2.5; }
.punchnote > span { flex: 1; min-width: 0; }
.punchnote b { display: block; font-weight: 850; }
.punchnote span span { display: block; margin-top: 2px; font-weight: 650; }
.punchnote .chg { flex: none; font: 850 14.5px/1 var(--font); color: var(--blue); }
.who-lbl { margin-top: 14px; }
.answers { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; background: var(--navy-tint); }
.answers span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--card); border: var(--bw-hair) solid var(--line); font: 750 13.5px/1.15 var(--font); }
.prompt { padding: 16px 14px; border-top: var(--bw) solid var(--hair); }
.prompt:first-of-type { border-top: 0; }
.owner-line { background: repeating-linear-gradient(135deg, var(--sunk) 0 12px, var(--tray) 12px 24px); }
.owner-line .line-l { color: var(--ink-2); }
.owner-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; margin-top: 12px; padding: 0 16px; border-radius: var(--r-pill); border: var(--bw) dashed var(--edge); background: var(--card); color: var(--ink-2); font: 800 15.5px/1 var(--font); }
.owner-pill .ic { width: 20px; height: 20px; }
.ro-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ro-note { margin-top: 8px; font: 550 15.5px/1.42 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ro-note small { display: block; font: 850 12.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
.ro-cost { font: 850 19px/1 var(--font); font-variant-numeric: tabular-nums; }

.wfoot {
  position: sticky; bottom: 0; z-index: var(--z-footer);
  padding: 12px 16px calc(14px + var(--safe-b)); background: var(--navy); color: var(--on-navy); box-shadow: var(--sh-up);
}
.runner.is-turn .wfoot { background: var(--teal-2); }
.wfoot-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 800 16px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.wfoot-top span { font: 750 14px/1.2 var(--font); color: var(--on-navy-2); text-align: right; }
.wfoot-top .warn { color: var(--on-navy-red); }
.wfoot-bar { height: 10px; margin-top: 9px; border-radius: 5px; background: var(--glass-16); overflow: clip; }
.wfoot-bar i { display: block; height: 100%; border-radius: 5px; background: var(--amber); transition: width var(--dur) var(--ease); }
.wfoot-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; margin-top: 12px; }
.wfoot-btns .btn { padding: 0 10px; min-height: 56px; }
.wfoot-btns.one { grid-template-columns: minmax(0, 1fr); }
.total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: var(--bw-hair) solid var(--glass-16); }
.total > span { font: 800 12.5px/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--on-navy-2); }
.total > b { font: 900 30px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.total p { flex-basis: 100%; font: 600 13.5px/1.35 var(--font); color: var(--on-navy-2); }
.total p b { font: 850 13.5px/1 var(--font); color: var(--amber); }
.total p.split-l b { color: var(--on-navy); }
.band { position: relative; flex-basis: 100%; height: 44px; margin-top: 4px; }
.band-track { position: absolute; left: 0; right: 0; top: 8px; height: 10px; border-radius: 5px; background: var(--glass-16); }
.band-range { position: absolute; top: 8px; height: 10px; border-radius: 5px; background: var(--amber-35); box-shadow: 0 0 0 1.5px var(--amber); }
.band-dot { position: absolute; top: 3px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--on-navy); box-shadow: 0 0 0 3px var(--navy); }
.band-lab { position: absolute; top: 26px; font: 750 12.5px/1 var(--font); color: var(--on-navy-2); white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.band-lab.dot { color: var(--on-navy); font-weight: 850; }
.review { padding: 16px 12px 26px; flex: 1; }
.rtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.review .card + .card { margin-top: 10px; }
.review .warnbox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--amber-tint); border: var(--bw) solid var(--amber-edge); color: var(--amber-ink); font: 750 15.5px/1.35 var(--font); }
.review .warnbox .link { margin-left: auto; }
.sendoff { margin-top: 10px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); overflow: clip; }
.mini-h { margin: 22px 0 10px; font: 900 15px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */

@media (max-width: 479px) {
  .tray.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 480px) {
  .tray.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tray.t4 .key { font-size: 16px; }
}
@media (max-width: 389px) {
  .seg { gap: 5px; }
  .seg button { padding: 0 6px; font-size: 15px; gap: 5px; }
  .seg button b { min-width: 20px; padding: 0 5px; }
  .wfoot-btns { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .next-word { display: none; }
  .picks.wide-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hello-h { font-size: 29px; }
  .jh h1 { font-size: 30px; }
  .ok-amt { font-size: 28px; }
}
@media (min-width: 390px) { .next-short { display: none; } }
@media (max-width: 389px) { .next-long { display: none; } }
@media (max-width: 374px) { .hide-xs { display: none; } }
@media (max-height: 699px) { .band { display: none; } }

@media (min-width: 768px) {
  .body, .chrome-in, .jh-in, .runner-col { max-width: var(--read-max); margin-left: auto; margin-right: auto; }
  .jtabs { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: calc(var(--read-max) - 32px); margin-left: auto; margin-right: auto; }
  .jtabs.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); animation: sheetup-c var(--dur-sheet) var(--ease); }
  .sheet.closing { animation: sheetdown-c 140ms var(--ease) forwards; }
  @keyframes sheetup-c { from { transform: translate(-50%, 40px); opacity: .4; } to { transform: translate(-50%, 0); opacity: 1; } }
  @keyframes sheetdown-c { to { transform: translate(-50%, 40px); opacity: 0; } }
  .toasts { left: 50%; right: auto; width: 520px; transform: translateX(-50%); }
}

@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .side { display: flex; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
  .tabbar, .fab, .phone-only { display: none !important; }
  .desk-only { display: revert !important; }
  .main, .main.has-fab { padding: 38px 44px 56px; }
  .main-in { max-width: var(--main-max); margin: 0 auto; }
  /* Bare screens (sign-in, the runner) take the whole window: see shell.css. */
  .toasts { left: calc(var(--sidebar-w) + 44px); right: auto; bottom: 24px; width: 420px; transform: none; align-items: stretch; }
  body.in-runner .toasts { left: 50%; transform: translateX(-50%); bottom: calc(var(--wfoot-h, 190px) + 16px); }
  body.layer-open .toasts { top: 24px; bottom: auto; }

  /* light headers on desktop */
  .chrome { background: transparent; color: var(--ink); padding-top: 0; }
  .chrome .topbar { display: none; }
  .chrome .hello { padding: 0; }
  .chrome .hello-date { color: var(--ink-2); }
  .chrome .hello-h { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.035em; }
  .chrome .hello-line { color: var(--ink-2); }
  .chrome .hello-line .ic { color: var(--green); }
  .chrome .hello-sub { color: var(--ink-2); }
  .chrome .viewonly { background: var(--sunk); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); }
  .chrome .titlebar { padding: 0; min-height: 56px; }
  .chrome .titlebar h1 { font-size: 40px; }
  .chrome .titlebar-sub { padding: 0; margin-top: 4px; color: var(--ink-2); }
  .chrome .chrome-pad { padding: 18px 0 0; }
  .chrome .seg { background: var(--tray); max-width: 560px; }
  .chrome .seg button { color: var(--ink-2); height: 48px; }
  .chrome .seg button b { background: var(--card); color: var(--ink); }
  .chrome .seg button[aria-checked="true"] { background: var(--navy); color: var(--on-navy); }
  .chrome .seg button[aria-checked="true"] b { background: var(--amber); color: var(--navy); }
  .chrome .btn-chrome { background: var(--navy); color: var(--on-navy); border-color: var(--navy); min-height: 52px; padding: 0 18px; }
  .body { padding: 0; max-width: none; }
  .home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
  .home-head .head-r { display: flex; gap: 12px; align-items: center; }
  .home-head .head-r .search { width: 320px; }

  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .jobgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .jobgrid .job, .jobgrid .jrow { margin: 0; }
  .msum.m4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mtot .m > b { font-size: 27px; }
  .mtot .m { padding: 14px; }

  /* wide decision cards */
  .ok-wide .ok-body { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 4px 28px; padding: 16px 18px 18px; }
  .ok-wide .ok-info { grid-column: 1; }
  .ok-wide .ok-side { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; }
  .ok-wide .ok-side .ok-amt { align-self: flex-end; font-size: 36px; }
  .ok-wide .ok-side > .desk-amt { display: block; }
  .ok-wide .ok-side .ok-keys { margin-top: auto; padding-top: 14px; }
  .ok-wide .ok-head .ok-amt { display: none; }

  /* job page */
  .jh-wrap { border-radius: var(--r-lg); overflow: clip; padding-top: 0; }
  .jh-wrap .hero { margin: 0; height: 220px; }
  .jh-in, .body, .chrome-in { max-width: none; }
  .jtabs { max-width: none; margin: 14px 0 0; }
  .compact { display: none; }
  .job-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }

  /* sheets become dialogs */
  .sheet { top: 50%; bottom: auto; left: 50%; width: 520px; max-height: 86vh; border-radius: var(--r-xl); box-shadow: var(--sh-dialog); transform: translate(-50%, -50%); animation: dialogin var(--dur-sheet) var(--ease); }
  .sheet.closing { animation: dialogout 140ms var(--ease) forwards; }
  .sheet.wide { width: 640px; }
  @keyframes dialogin { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
  @keyframes dialogout { to { transform: translate(-50%, -46%); opacity: 0; } }
  .grab { display: none; }
  .sheet-top { padding-top: 18px; }
  .sheet-foot { padding-bottom: 16px; border-radius: 0 0 var(--r-xl) var(--r-xl); }

  /* runner column */
  .runner { max-width: var(--read-max); margin: 0 auto; box-shadow: 0 0 0 2px var(--line); }
  .runner-col { max-width: none; }
}

@media (min-width: 1024px) and (hover: hover) {
  .row:hover, .prow:hover, .pick:hover, .menu-row:hover { background: var(--sunk); }
  .jrow:hover, .job:hover, .kpi:hover { border-color: var(--edge); }
  .link:hover, .hsec-link:hover { text-decoration: underline; }
  .key:hover { filter: brightness(.97); }
}

@media (min-width: 1280px) {
  .home-grid.has-rail { grid-template-columns: minmax(0, 1fr) var(--rail-w); }
  .jobgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .sk::after { display: none; }
  .sheet, .sheet.closing { animation: fadein var(--dur) linear; }
}

/* ---------- fix round 1 (10/28): decision cards, texts, attachments ---------- */

/* The group text that says a waiting draw is paid, on that draw's card */
.ok-text small { display: block; margin-top: 4px; font: 650 13.5px/1.35 var(--font); color: var(--ink-2); }
.ok-text { background: var(--blue-tint); color: var(--ink); }
.ok-text .ic { color: var(--blue); }
/* "No bid on file yet" with Add the bid, inside a statement row */
.stmt-nobase { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 12px; text-align: right; }
.stmt-nobase .link { margin-block: -14px; }

/* A photo field: thumbnails, then one full-width key that carries its own words */
.attach .thumbs { margin: 0 0 12px; }
.cam-btn { gap: 10px; }
.cam-btn .ic { width: 24px; height: 24px; }
.jp-attach .cam-btn, .attach .cam-btn { margin-top: 0; }
.pclose-more { display: flex; justify-content: center; gap: 28px; margin-top: 18px; padding-top: 8px; border-top: var(--bw-hair) solid var(--hair); }
.pclose-more .link { margin-block: 0; gap: 6px; }
.pclose-more .link .ic { width: 18px; height: 18px; }