/* Zero Days Over v26 — one small design system. Every color comes from the tokens below. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --tab-h: 58px;
  --top-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------- Themes ---------- */
body.theme-light2026 {
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f4f5f8; --line: rgba(0,0,0,.09); --line-strong: rgba(0,0,0,.16);
  --text: #1d1d1f; --text-2: #3c3c43; --muted: #6e6e73;
  --accent: #007AFF; --accent-ink: #ffffff; --accent-soft: #e3f0ff;
  --ok: #1a8f4b; --ok-soft: #e2f5ea; --warn: #b45309; --warn-soft: #fdf1df; --bad: #d12c2c; --bad-soft: #fde8e8; --info: #6d4fd8; --info-soft: #efeafd;
  --bar: rgba(244,245,247,.92); --side: #eceef2; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.06);
  color-scheme: light;
}
body.theme-sage {
  --bg: #f4f2ec; --surface: #fbfaf6; --surface-2: #edece4; --line: rgba(15,52,64,.11); --line-strong: rgba(15,52,64,.2);
  --text: #23434c; --text-2: #4a656d; --muted: #6a828a;
  --accent: #1a7d4a; --accent-ink: #ffffff; --accent-soft: #e6f0e8;
  --ok: #1a7d4a; --ok-soft: #e1efe5; --warn: #b45309; --warn-soft: #f8ecd9; --bad: #c2410c; --bad-soft: #fbe6dc; --info: #1e5fa8; --info-soft: #e3ecf7;
  --bar: rgba(244,242,236,.93); --side: #efede5; --shadow: 0 1px 2px rgba(15,52,64,.06), 0 1px 3px rgba(15,52,64,.06);
  color-scheme: light;
}
body.theme-goldengate {
  --bg: #1b1b1e; --surface: #26262b; --surface-2: #2e2e34; --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.18);
  --text: #ececf0; --text-2: #b9b9c2; --muted: #8a8a94;
  --accent: #E9B44C; --accent-ink: #1b1b1e; --accent-soft: rgba(233,180,74,.16);
  --ok: #5fd08f; --ok-soft: rgba(95,208,143,.14); --warn: #f0b04a; --warn-soft: rgba(240,176,74,.15); --bad: #ff7468; --bad-soft: rgba(255,116,104,.15); --info: #b39dff; --info-soft: rgba(179,157,255,.15);
  --bar: rgba(27,27,30,.92); --side: #202024; --shadow: 0 1px 2px rgba(0,0,0,.45);
  color-scheme: dark;
}
body.theme-dark {
  --bg: #0f1113; --surface: #181b1f; --surface-2: #1f2328; --line: #2a2f35; --line-strong: #3a4048;
  --text: #eef0f2; --text-2: #c2c7ce; --muted: #8b929b;
  --accent: #4d8dff; --accent-ink: #ffffff; --accent-soft: rgba(77,141,255,.16);
  --ok: #3ccf7f; --ok-soft: rgba(60,207,127,.14); --warn: #f0a640; --warn-soft: rgba(240,166,64,.14); --bad: #ff6b6b; --bad-soft: rgba(255,107,107,.14); --info: #a48bff; --info-soft: rgba(164,139,255,.15);
  --bar: rgba(20,23,26,.92); --side: #14171a; --shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}
body.theme-duckcamo, body.theme-realtreecamo, body.theme-duckcamolight {
  --surface: rgba(30,28,19,.86); --surface-2: rgba(40,37,26,.9); --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.2);
  --text: #f3ecdd; --text-2: #d0c6b1;
  --accent-ink: #1a1710;
  --ok: #8fd16a; --ok-soft: rgba(143,209,106,.16); --warn: #ffc14d; --warn-soft: rgba(255,193,77,.16); --bad: #ff7b6b; --bad-soft: rgba(255,123,107,.16); --info: #c3a6ff; --info-soft: rgba(195,166,255,.16);
  --bar: rgba(24,22,15,.9); --side: rgba(24,22,15,.82); --shadow: 0 1px 3px rgba(0,0,0,.45);
  --muted: #a39985;
  color-scheme: dark;
}
body.theme-duckcamo { --bg: #17160f; --accent: #ff6700; --accent-soft: rgba(255,103,0,.18); --camo: url("library/Themes/DuckCamo/duckcamo_pattern.jpg"); }
body.theme-realtreecamo { --bg: #1d1b12; --accent: #ff7a22; --accent-soft: rgba(255,122,34,.18); --camo: url("library/Themes/RealTreeCamo/realtreecamo_pattern.jpg"); }
body.theme-duckcamo::before, body.theme-realtreecamo::before, body.theme-duckcamolight::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(rgba(14,13,9,.72), rgba(14,13,9,.78)), var(--camo) center/600px repeat;
}

/* Duck Camo Light: brighter camo showing through, with solid high-contrast panels + buttons like the original */
body.theme-duckcamolight {
  --bg: #17160f; --surface: rgba(28,26,18,.95); --surface-2: rgba(40,37,26,.97); --line: rgba(255,255,255,.13); --line-strong: rgba(255,255,255,.26);
  --text: #fffaf0; --text-2: #e6dcc6; --muted: #b9ae97;
  --accent: #ff6a00; --accent-ink: #ffffff; --accent-soft: rgba(255,106,0,.24);
  --bar: rgba(22,21,14,.95); --side: rgba(22,21,14,.92); --shadow: 0 2px 6px rgba(0,0,0,.45);
  --camo: url("library/Themes/DuckCamo/duckcamo_pattern.jpg");
}
body.theme-duckcamolight::before {
  background: linear-gradient(rgba(20,18,12,.28), rgba(20,18,12,.34)), var(--camo) center/600px repeat;
}
/* Duck Camo Light: anything that sits right on the bright camo gets a drop shadow + brighter color so it reads */
body.theme-duckcamolight :is(.section-h, .svc-title, .detail-head, .cal-head, .sortbar, .folder-head, .hint, .view > .empty, .view > p.muted, .wiz-q) { text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.8), 0 0 14px rgba(0,0,0,.55); }
body.theme-duckcamolight :is(.section-h h2, .section-h .count, .detail-head p, .sortbar .muted, .folder-head .muted, .hint) { color: #f6eedb; }
body.theme-duckcamolight :is(.section-h, .detail-head, .folder-head) :is(.avatar, img, .fav, .co-fav) { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
body.theme-duckcamolight :is(.section-h, .detail-head, .cal-head, .folder-head) button:not(.btn):not(.chip) { text-shadow: inherit; }   /* browsers reset text-shadow on buttons */
body.theme-duckcamolight :is(.section-h, .cal-head, .sortbar, .folder-head) :is(.btn, .chip, select, input) { text-shadow: none; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-x: none; }   /* no swipe back/forward from the browser (vertical left alone so the mouse wheel always scrolls) */
body { margin: 0; font: 16px/1.4 var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overscroll-behavior-x: none; overscroll-behavior-y: none; }
body.theme-duckcamo, body.theme-realtreecamo, body.theme-duckcamolight { background: var(--bg); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a { color: var(--accent); }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Layout: phone ---------- */
.app { min-height: 100dvh; }
.main { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-t) + 6px) 12px 6px 16px; min-height: calc(var(--top-h) + var(--safe-t));
  background: var(--bar); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { flex: 1; margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-logo { height: 26px; width: auto; }
.back-btn:not([hidden]) ~ .topbar-logo { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); }
.icon-btn:active { background: var(--surface-2); }
.back-btn { margin-left: -10px; color: var(--accent); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.sync-dot.pending { background: var(--warn); }
.sync-dot.offline { background: var(--muted); }
.sync-dot.demo { background: var(--info); }

.segbar {
  position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 19;
  display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none;
  background: var(--bar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.segbar::-webkit-scrollbar { display: none; }
.seg { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.seg.on { background: var(--text); color: var(--bg); border-color: var(--text); }
body.theme-duckcamo .seg.on, body.theme-realtreecamo .seg.on, body.theme-duckcamolight .seg.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.view { flex: 1; padding: 14px 16px calc(var(--tab-h) + var(--safe-b) + 28px); outline: none; }

/* Bottom tab bar (phones) — the home-indicator space is added exactly once, here. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--bar); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--line);
}
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.tab.on { color: var(--accent); }
.tab .badge { position: absolute; top: 5px; left: calc(50% + 6px); }
.tab-add-circle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.tab-add-circle svg { stroke-width: 2.4; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 11px/1 var(--font); font-style: normal; }
.sidebar { display: none; }
.phone-only { }

/* Sidebar (desktop) — sections, minimize, settings */
@media (min-width: 900px) {
  .phone-only { display: none !important; }
  .tabbar { display: none; }
  .app { display: grid; grid-template-columns: 196px 1fr; }   /* 17% narrower than the original 236px — same text & icons */
  body.nav-collapsed .app { grid-template-columns: 68px 1fr; }
  .sidebar {
    position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 6px;
    padding: 16px 6px 12px; background: var(--side); border-right: 1px solid var(--line); overflow: hidden;
  }
  .side-brand { padding: 2px 6px 10px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
  .side-brand .logo-big { max-width: 140px; max-height: 46px; }
  .side-brand .logo-small { display: none; height: 30px; }
  .side-new { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 700; margin: 0 2px 6px; }
  .side-new svg { width: 18px; height: 18px; stroke-width: 2.4; }
  .side-menu { flex: 1; overflow-y: auto; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
  .side-sec { display: flex; align-items: center; gap: 6px; margin: 14px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .side-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .side-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 0 8px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 550; color: var(--text-2); white-space: nowrap; text-align: left; }
  .side-item svg { width: 19px; height: 19px; color: var(--muted); }
  .side-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  /* Counts sit on the icon's corner, so labels keep their full width in the narrower menu */
  .side-item { position: relative; }
  .side-item .badge { position: absolute; left: 20px; top: 0; min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--side); }
  .side-item:hover { background: var(--surface-2); }
  .side-item.on { background: var(--accent-soft); color: var(--accent); }
  .side-item.on svg { color: var(--accent); }
  .side-foot { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 2px; }
  body.nav-collapsed .side-brand { justify-content: center; padding: 2px 0 10px; }
  body.nav-collapsed .side-brand .logo-big { display: none; }
  body.nav-collapsed .side-brand .logo-small { display: block; }
  body.nav-collapsed .side-new span, body.nav-collapsed .side-item span, body.nav-collapsed .side-sec { display: none; }
  body.nav-collapsed .side-item { justify-content: center; padding: 0; position: relative; }
  body.nav-collapsed .side-item .badge { position: absolute; top: 1px; right: 4px; min-width: 15px; height: 15px; font-size: 10px; }
  body.nav-collapsed .side-menu .side-item:nth-child(n) { margin-top: 0; }
  body.nav-collapsed #collapse-btn svg { transform: scaleX(-1); }
  body.nav-collapsed .side-menu { padding-top: 6px; }
  .topbar { padding-left: 28px; padding-right: 20px; }
  .topbar-logo { display: none; }
  .segbar { display: none !important; }
  .view { padding: 22px 28px 48px; max-width: none; width: 100%; min-width: 0; box-sizing: border-box; }   /* every page fills the window and follows it as it's resized */
  .toast { left: calc(50% + 98px) !important; bottom: 24px !important; }
}

/* ---------- Building blocks ---------- */
.section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 4px 8px; }
.section-h:first-child { margin-top: 4px; }
.section-h h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.section-h .count { font-size: 13px; color: var(--muted); }
.section-h button { font-size: 14px; font-weight: 600; color: var(--accent); }

.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 60px; padding: 10px 14px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
button.row:active, a.row:active { background: var(--surface-2); }
@media (hover: hover) { button.row:hover { background: var(--surface-2); } }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.row-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.chev { color: var(--line-strong); width: 18px; height: 18px; }
.lead-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 14px; background: var(--accent-soft); color: var(--accent); }
.avatar.round { border-radius: 50%; }
.datebox { width: 44px; flex: none; text-align: center; line-height: 1.05; }
.datebox b { display: block; font-size: 19px; }
.datebox small { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }

.group-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.group-h:first-child { border-top: 0; }
.group-h .count { margin-left: auto; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--text-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; text-align: left; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat span { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat.bad b { color: var(--bad); } .stat.warn b { color: var(--warn); } .stat.ok b { color: var(--ok); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 12px; }
.chip { padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--surface); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip .n { opacity: .7; margin-left: 4px; }

.empty { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty p { margin: 0 0 14px; }
.hello { margin: 2px 4px 16px; }
.hello h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.hello p { margin: 2px 0 0; color: var(--muted); }

.detail-head { display: flex; gap: 14px; align-items: center; margin: 4px 2px 16px; }
.detail-head .avatar { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
.detail-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.detail-head p { margin: 2px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 0; }
.kv > div { padding: 11px 14px; border-top: 1px solid var(--line); }
.kv > div:nth-child(-n+2) { border-top: 0; }
.kv .k { color: var(--muted); font-size: 14px; }
.kv .v { word-break: break-word; }

/* ---------- Buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-sm); font-weight: 600; font-size: 15px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.btn svg { width: 18px; height: 18px; }
a.btn { text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--accent); }
.btn.link { border: 0; background: none; color: var(--accent); padding: 0 6px; min-height: 44px; font-weight: 500; }
.btn.link.strong { font-weight: 700; }
.btn.block { width: 100%; }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 14px; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font-size: 16px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); appearance: none; -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.invalid input, .field.invalid select { border-color: var(--bad); }
.field-err { color: var(--bad); font-size: 13px; margin: 6px 0 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row.three { grid-template-columns: 2fr 1fr 1fr; }
.form-section { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toggle-group { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle-group button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface); }
.toggle-group button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.line-item { display: grid; grid-template-columns: 1fr 64px 90px 32px; gap: 6px; align-items: center; margin-bottom: 8px; }
.line-item input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; }
.line-item .x { color: var(--muted); width: 32px; height: 42px; display: grid; place-items: center; }
.total-row { display: flex; justify-content: space-between; padding: 12px 2px; font-weight: 700; font-size: 18px; border-top: 1px solid var(--line); margin-top: 6px; }

.steps { display: grid; gap: 6px; }
.field .steps .step { min-height: 40px; }
.step { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; text-align: left; }
.step .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.step .dot svg { width: 12px; height: 12px; stroke-width: 3; }

/* ---------- Sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); animation: fade .18s ease; }
.sheet {
  position: relative; width: 100%; max-height: calc(100dvh - var(--safe-t) - 24px); display: flex; flex-direction: column;
  background: var(--bg); border-radius: 16px 16px 0 0; animation: up .24s cubic-bezier(.2,.8,.2,1);
}
body.theme-duckcamo .sheet, body.theme-realtreecamo .sheet { background: #1f1d14; }
body.theme-duckcamolight .sheet { background: #1f1d14; }
.sheet-grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 8px auto 0; }
.sheet-head { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 2px 8px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 17px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-head .btn:first-child { justify-self: start; } .sheet-head .btn:last-child { justify-self: end; }
.sheet-body { overflow-y: auto; padding: 16px 16px calc(24px + var(--safe-b)); -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) {
  .sheet-wrap { align-items: center; }
  .sheet { width: 560px; border-radius: 16px; max-height: 86dvh; animation: pop .18s ease; }
  .sheet-grab { display: none; }
}
@keyframes up { from { transform: translateY(100%); } }
@keyframes pop { from { transform: scale(.97); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Search ---------- */
.search-wrap { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; }
.search-head { display: flex; gap: 8px; align-items: center; padding: calc(var(--safe-t) + 8px) 12px 8px 16px; border-bottom: 1px solid var(--line); }
.search-head input { flex: 1; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 16px; }
.search-results { overflow-y: auto; padding: 8px 16px calc(24px + var(--safe-b)); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(var(--tab-h) + var(--safe-b) + 14px);
  display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px;
  background: #1d2025; color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100% - 32px);
}
.toast button { color: #8ab4ff; font-weight: 700; }

/* ---------- Sign in ---------- */
.signin { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.signin-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 22px; box-shadow: var(--shadow); text-align: center; }
.signin-card form { text-align: left; margin-top: 18px; }
.signin-card h1 { margin: 10px 0 4px; font-size: 24px; }
.signin-card p { margin: 0; }
.signin-logo { max-width: 180px; max-height: 64px; }
.signin-card .btn.ghost { margin-top: 10px; }

/* ---------- v26.1 additions ---------- */
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.small { font-size: 13px; }
.hint { font-size: 14px; margin: 2px 4px 12px; }
.neg { color: var(--bad); }
.nw { white-space: nowrap; }
.sheet-sub { margin: -4px 0 14px; font-size: 14px; }
.stats.five { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stats.five { grid-template-columns: repeat(5, 1fr); } }
.chips-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.chips-row .chips { flex: 1; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters input, .filters select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; }
.filters input { flex: 1 1 200px; }
.filters select { flex: 0 1 180px; -webkit-appearance: none; appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
@media (max-width: 899px) { .filters select { flex: 1 1 40%; } }
.msg-count { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); }
.msg-count svg { width: 14px; height: 14px; }
.msg-count.new { color: var(--accent); }
.check { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: transparent; background: var(--surface); }
.check svg { width: 14px; height: 14px; stroke-width: 3.2; }
.check.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.check.part { border-color: var(--accent); background: var(--accent-soft); position: relative; }
.check.part::after { content: ""; position: absolute; width: 10px; height: 2.5px; border-radius: 2px; background: var(--accent); }
.check.day-check { cursor: pointer; }
.group-h.date-h .day-check { margin-right: 4px; }
.tbl.wc tr.date-row td.ck { vertical-align: bottom; padding-bottom: 7px; }

/* Tables (Field Tracker, reports, pricing) */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.tbl tr:first-child td { border-top: 0; }
.tbl .r { text-align: right; }
.tbl .ck { width: 34px; padding-right: 0; }
.tbl.wc tbody tr { cursor: pointer; }
.tbl.wc tbody tr:hover { background: var(--surface-2); }
.tbl.wc tbody tr.sel { background: var(--accent-soft); }
.tbl .lead-dot { display: inline-block; width: 8px; height: 8px; vertical-align: middle; }

/* Bulk bar */
.bulkbar { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + var(--safe-b) + 10px);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 8px 10px 8px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 10px 30px rgba(0,0,0,.18); max-width: calc(100% - 24px); }
.bulkbar .icon-btn { width: 36px; height: 36px; }
@media (min-width: 900px) { .bulkbar { bottom: 22px; left: calc(50% + 98px); width: max-content; flex-wrap: nowrap; } }

/* Task sheet: status, messages, back charges */
.sheet.wide { }
@media (min-width: 700px) { .sheet { width: 620px; } }
.stage-list { display: grid; gap: 6px; }
.stage { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; font-size: 15px; }
.stage .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.stage .dot svg { width: 12px; height: 12px; stroke-width: 3; }
.stage em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.stage.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stage.on .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.stage.on.bad { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); } .stage.on.bad .dot { background: var(--bad); border-color: var(--bad); color: #fff; }
.stage.on.ok .dot { background: var(--ok); border-color: var(--ok); color: #fff; } .stage.on.ok { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.stage.on.info .dot { background: var(--info); border-color: var(--info); color: #fff; } .stage.on.info { border-color: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.stage.on.warn .dot { background: var(--warn); border-color: var(--warn); color: #fff; } .stage.on.warn { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.thread { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; padding: 4px 2px 8px; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.msg.me { align-self: flex-end; background: var(--accent-soft); border-color: transparent; }
.msg.them { align-self: flex-start; }
.msg-meta { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-photos button, .msg-photos .uploading { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.msg-photos.small button, .msg-photos.small .uploading { width: 44px; height: 44px; margin: 0; }
.msg-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.missing { opacity: .25; }
.composer { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); padding: 8px; }
.composer textarea { width: 100%; border: 0; resize: vertical; min-height: 44px; background: transparent; font-size: 16px; outline: none; }
.composer-row { display: flex; align-items: center; gap: 8px; }
.composer-row .msg-photos { flex: 1; margin: 0; }
.back-add { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; margin-top: 8px; }
.back-add input { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; min-width: 0; }
@media (max-width: 520px) { .back-add { grid-template-columns: 1fr 2fr; } .back-add .btn { grid-column: 1 / -1; } }
.details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 6px; }
.details summary { cursor: pointer; padding: 10px 2px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); list-style: none; }
.details summary::before { content: "▸ "; } .details[open] summary::before { content: "▾ "; }
.line-head { display: grid; grid-template-columns: 1fr 64px 90px 32px; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; padding: 0 2px; }
.line-head:not(.three):not(.four):not(.three-t):not(.svc):not(.comm):not(.st-pl) { grid-template-columns: 1fr 90px 32px; }
.line-head.four, .line-item.four { grid-template-columns: 1fr 58px 76px 76px 32px; }
.line-item.two { grid-template-columns: 1fr 90px 32px; }

/* Calendar */
.cal-head { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; }
.cal-head h2 { margin: 0 8px; font-size: 20px; min-width: 150px; text-align: center; }
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-wd span { padding: 7px 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell { min-height: 54px; padding: 4px 5px; border-right: 1px solid var(--line); border-top: 1px solid var(--line); text-align: left; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:nth-child(-n+7) { border-top: 0; }
.cal-cell.out { background: var(--surface-2); color: var(--muted); }
.cal-n { font-size: 13px; font-weight: 700; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-cell.today .cal-n { background: var(--accent); color: var(--accent-ink); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-chips { display: none; }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 4px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
@media (min-width: 900px) {
  .cal-cell { min-height: 112px; }
  .cal-chips { display: flex; flex-direction: column; gap: 3px; }
  .cal-dots { display: none; }
  .cal-chip { display: block; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--c) 18%, transparent); border-left: 3px solid var(--c); }
  .cal-chip.legacy { --c: var(--muted); font-style: italic; }
  .cal-more { font-size: 12px; color: var(--muted); padding-left: 6px; }
}

/* Photos & files */
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.file-tile { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding-bottom: 8px; }
.file-tile img, .file-ico { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.file-name { font-size: 14px; font-weight: 600; padding: 4px 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-sub { font-size: 12px; color: var(--muted); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Reports: bars */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding: 16px 14px 10px; }
.bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.bar { width: 100%; max-width: 56px; min-height: 2px; background: var(--accent); border-radius: 6px 6px 2px 2px; }
.bar-v { font-size: 12px; font-weight: 700; color: var(--text-2); }
.bar-l { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Settings: themes */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
@media (min-width: 520px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } }
.theme-btn { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; font-size: 14px; text-align: left; }
.theme-btn .sw { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); flex: none; }
.theme-btn.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Tools */
.tool-frame { display: block; width: 100%; border: 0; background: var(--surface); height: calc(100dvh - var(--top-h) - var(--safe-t) - 50px - var(--tab-h) - var(--safe-b)); }
body[data-page="signdoc"] .view, body[data-page="blueprint"] .view { padding: 0 !important; max-width: none; }
@media (min-width: 900px) { .tool-frame { height: calc(100dvh - var(--top-h)); } }

.tbl.wc { table-layout: fixed; }
.tbl.wc td, .tbl.wc th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl.wc tr.date-row td { overflow: visible; }
.tbl.wc td.addr { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .bulkbar { left: 10px; right: 10px; transform: none; max-width: none; flex-wrap: nowrap; justify-content: space-between; gap: 6px; padding: 8px 8px 8px 12px; }
  .bulkbar .btn.sm { padding: 0 9px; flex: none; }
  .bulkbar { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .bulkbar > span { flex: none; }
}

/* Website icons */
.avatar { overflow: hidden; }
.avatar.has-fav { background: #fff; border: 1px solid var(--line); }
.avatar img.fav { width: 62%; height: 62%; object-fit: contain; }
.bicon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #fff; border: 1px solid var(--line); margin-right: 6px; vertical-align: -4px; overflow: hidden; }
.bicon img.fav { width: 13px; height: 13px; object-fit: contain; }

/* Menu tucks away while scrolling the Field Tracker sideways */
@media (min-width: 900px) {
  .app { transition: grid-template-columns .22s ease; }
}
@media (min-width: 900px) { .main { min-width: 0; } }

/* Field Tracker: header row stays visible while scrolling down */
.wc-wrap { overflow: auto; }
.tbl.wc thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); }

/* Field Tracker: a header for each date */
.tbl.wc tr.date-row td { padding: 16px 12px 7px; background: var(--surface-2); border-top: 1px solid var(--line-strong); box-shadow: inset 0 -1px 0 var(--line); cursor: default; }
.tbl.wc tbody tr.date-row:hover { background: none; }
.tbl.wc tbody tr.date-row:first-child td { border-top: 0; }
.date-label { position: sticky; left: 12px; display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.date-label b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; color: var(--text); }
.date-label em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--text); }
.tbl th .sort-ind { display: inline-block; margin-left: 4px; font-size: 9px; opacity: 0; }
.tbl th.sortable:hover .sort-ind { opacity: .4; }
.tbl th.sorted { color: var(--accent); }
.tbl th.sorted .sort-ind { opacity: 1; }
.tbl.wc tr.date-row + tr td { border-top: 0; }
.group-h.date-h { text-transform: none; letter-spacing: -.01em; font-size: 15px; font-weight: 750; color: var(--text); padding: 14px 14px 8px; }

/* Field Tracker: movable, resizable columns */
.tbl.wc th { position: sticky; }
.tbl.wc th.sortable { padding-right: 14px; }
.col-resize { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; z-index: 3; }
.col-resize::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: var(--line-strong); opacity: 0; transition: opacity .15s; }
.tbl.wc th:hover .col-resize::after, body.col-resizing .col-resize::after { opacity: 1; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
.tbl.wc th.dragging { opacity: .45; }
.tbl.wc th.drop-l { box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--line); }
.tbl.wc th.drop-r { box-shadow: inset -3px 0 0 var(--accent), inset 0 -1px 0 var(--line); }

/* Status changes inside a task's message history */
.msg-event { align-self: center; text-align: center; font-size: 12.5px; color: var(--muted); padding: 2px 0; }
.msg-event span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.msg-event b { color: var(--text-2); font-weight: 650; }
.msg-stage { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; }

.banner-lite { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); }

.line-head.three-t, .line-item.three-t { grid-template-columns: 1fr 80px 96px 32px; }

/* Work picker (dropdown + "Other — type it in") */
.work-pick { display: grid; gap: 6px; min-width: 0; }
.work-pick select { width: 100%; min-height: 42px; padding: 8px 30px 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field .work-pick select, .field .work-pick input { min-height: 46px; }
.line-item .work-pick input { width: 100%; }
.work-other { display: flex; gap: 6px; min-width: 0; }
.work-other[hidden] { display: none; }
.work-other input:first-child { flex: 1; min-width: 0; }
.line-item .work-pick .work-other .work-qty { width: 64px; flex: none; }
.line-item.three-t { align-items: start; }

/* Task wizard */
.wiz-q { margin: 6px 2px 12px; font-size: 18px; letter-spacing: -.01em; }
.wiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .wiz-grid { grid-template-columns: 1fr; } }
.wiz-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 16px; min-height: 150px; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.wiz-tile:hover { border-color: var(--accent); }
.wiz-tile b { font-size: 17px; }
.wiz-tile .badge { position: absolute; top: 14px; right: 14px; background: var(--accent); color: var(--accent-ink); padding: 0 8px; }
.wiz-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.wiz-ico svg { width: 24px; height: 24px; stroke-width: 2.2; }
.wiz-back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 14px; margin: -4px 0 8px -4px; min-height: 36px; }
.wiz-back svg { width: 18px; height: 18px; }

/* Invoices & bids table */
.tbl.doc tbody tr { cursor: pointer; }
.tbl.doc tbody tr:hover { background: var(--surface-2); }
.tbl.doc .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.tbl.doc td { vertical-align: middle; }

/* ── v26.3: company logos, status sort, jobsite services, task kinds, contacts by company ── */
.sortbar { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; }
.chip.sm { padding: 4px 10px; font-size: 13px; }
.pill.sm { padding: 1px 6px; font-size: 10.5px; }
.logo-pick { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.logo-pick p { margin: 2px 0 0; }
.logo-btn { position: relative; cursor: pointer; flex: none; }
.avatar.xl { width: 64px; height: 64px; border-radius: 16px; font-size: 22px; }
.avatar.xl img.fav { width: 78%; height: 78%; }
.logo-cam { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.logo-cam svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.logo-btn:hover .avatar { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.svc-block { margin: 6px 0 18px; }
.svc-block[hidden] { display: none; }
.svc-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 4px 0 8px; }
.svc-title.th { color: #8b6fd6; }
.line-head.svc, .line-item.svc { grid-template-columns: 1fr 56px 84px 84px 32px; }
.line-item select { width: 100%; min-height: 42px; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; }
.line-sum { text-align: right; font-weight: 700; font-size: 14px; white-space: nowrap; }
.line-head .r { text-align: right; }
.work-extra { display: flex; gap: 6px; align-items: center; min-width: 0; }
.work-extra[hidden] { display: none; }
.work-extra input[data-l="task"] { flex: 1; min-width: 0; }
.line-item .work-pick .work-extra .work-qty { width: 72px; flex: none; }
.work-extra .line-total { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.work-extra .line-total:empty { display: none; }
.co-h h2 { display: flex; align-items: center; }
.co-link { display: inline-flex; align-items: center; gap: 10px; font: inherit; color: inherit; }
.co-link:hover { color: var(--accent); }
.title-chips { margin: -2px 0 10px; }
.tbl td span.muted > svg { width: 13px; height: 13px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 560px) {
  .line-head.comm { display: none; }
  .line-item.comm { grid-template-columns: 1fr 1fr 32px; }
  .line-item.comm input[data-l="name"] { grid-column: 1 / 3; }
}
@media (max-width: 560px) {
  .line-head.three-t { display: none; }
  .line-item.three-t { grid-template-columns: 1fr 1fr 32px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
  .line-item.three-t .work-pick { grid-column: 1 / -1; }
  .line-head.svc { grid-template-columns: 1fr 44px 70px 70px 28px; font-size: 11px; }
  .line-item.svc { grid-template-columns: 1fr 44px 70px 70px 28px; gap: 4px; }
  .line-item.svc input { padding: 8px 6px; }
}

/* Task popup: our price / crew pay at a glance */
.pay-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.pay-strip .pay-box { flex: 1 1 120px; }
.pay-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; display: grid; gap: 1px; }
.pay-box span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pay-box b { font-size: 18px; font-weight: 750; }
.pay-box em { font-style: normal; font-size: 12px; color: var(--muted); }
.pay-box.strong { border-color: var(--accent); }
.pay-box.profit { border-color: var(--ok); background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--surface); }   /* solid — the camo themes must not show through */
.pay-box.profit b { color: var(--ok); }
.pay-box.profit em { color: var(--text-2); }
.pay-strip .pay-box.profit { flex-basis: 100%; }

/* Community services: crew pay + materials */
.line-head.comm, .line-item.comm { grid-template-columns: 1fr 82px 52px 72px 72px 78px 32px; }
.line-item.comm { row-gap: 4px; }
.comm-mat { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px 6px; }
.comm-mat input[data-l="mat"] { width: 130px; min-height: 36px; }
.comm-mat input[data-l="mat"][hidden] { display: none; }
.check-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.check-label input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.comm-math { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.comm-sum .sum-row { display: flex; justify-content: space-between; padding: 4px 2px; font-size: 14px; color: var(--text-2); }
.comm-sum .sum-row.strong { font-weight: 750; color: var(--ok); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 16px; }
.ok-txt { color: var(--ok); }
@media (max-width: 560px) {
  .line-item.comm { grid-template-columns: 1fr 1fr 1fr 32px; }
  .line-item.comm input[data-l="name"] { grid-column: 1 / 4; }
  .comm-math { margin-left: 0; width: 100%; }
}

/* Day overview */
tr.date-row { cursor: pointer; }
.date-label .day-link { margin-left: 12px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
tr.date-row:hover .day-link { text-decoration: underline; }
.group-h.date-h[data-act] { cursor: pointer; }
.day-stats .pay-strip .pay-box { flex: 1 1 140px; }
.day-stats .tbl td .small { font-size: 11.5px; }
.row-fav { flex: none; display: flex; }
.row-fav .avatar.sm { width: 28px; height: 28px; }

/* ── Site Tracker (from 2027) ── */
.st-wrap { display: grid; gap: 14px; }
.st-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.st-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; }
.st-head.b { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.st-head.b b { font-size: 16px; }
.st-head.j { border-top: 1px solid var(--line); }
.st-head.j b { font-size: 15px; }
.st-head.bd { padding: 8px 12px 8px 22px; font-size: 14px; }
.st-head .muted { font-size: 13px; }
.st-name { min-width: 0; flex: 0 1 auto; }
.st-caret { display: inline-flex; width: 16px; height: 16px; color: var(--muted); transition: transform .15s; flex: none; }
.st-caret svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.st-caret.open { transform: rotate(90deg); }
.st-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.st-chip { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.st-chip.paid { background: var(--ok-soft); color: var(--ok); }
.st-chip.inv { background: var(--warn-soft); color: var(--warn); }
.st-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.st-sub { margin-left: 0; }
.st-body { padding: 0 0 8px; }
.st-body .st-sub .st-sub { margin-left: 12px; }
.st-none { padding: 6px 16px; margin: 0; }
.st-table { margin: 4px 12px 10px; box-shadow: none; }
.st-table .tbl th, .st-table .tbl td { padding: 7px 10px; white-space: nowrap; }
.st-svc-th { cursor: pointer; }
.st-svc-th:hover { color: var(--accent); text-decoration: underline; }
.st-cell { cursor: pointer; }
.st-cell:hover { background: var(--surface-2); }
.st-v { font-weight: 600; color: var(--text-2); }
.st-v.done { color: var(--info); }
.st-v.inv { color: var(--warn); }
.st-v.paid { color: var(--ok); }
.st-total td { background: var(--surface-2); font-weight: 600; }
.st-bchips { margin-top: -4px; }
.line-head.st-pl, .line-item.st-pl { grid-template-columns: 1fr 90px 90px 32px; }
.st-svc-row { display: grid; grid-template-columns: 1fr 100px 110px; gap: 8px; align-items: center; margin-bottom: 8px; }
.st-svc-row span { font-weight: 600; font-size: 14px; }
.st-svc-row input, .st-svc-row select { min-height: 40px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font-size: 15px; width: 100%; }
@media (max-width: 700px) { .st-chips { margin-left: 0; } .st-head .st-acts { width: 100%; } }

/* Contacts: company shown in the sticky header while scrolling */
#page-title .title-co { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text-2); min-width: 0; }
#page-title .title-co .avatar.sm { width: 24px; height: 24px; }
#page-title { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-title .title-co { margin-left: 10px; }
#page-title .title-co .dash { color: var(--muted); font-weight: 500; }

/* Invoice / bid drafts */
.draft-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--r-sm); }
.draft-banner .actions { margin: 0; }
#page-title .title-co .bicon { margin-right: 0; width: 22px; height: 22px; vertical-align: 0; }
#page-title { flex: 1 1 auto; }
#page-title .title-co { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { body.title-co-on #crew-name { display: none; } }
.date-h .day-pay { color: var(--text); font-weight: 750; }

/* Task popup: one pricing card (our price, crew pay, our profit) at the bottom */
.pay-card { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--ok); background: var(--ok-soft); border-radius: var(--r-sm); }
.pc-title { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; }
.pc-row b { font-size: 16px; font-weight: 750; white-space: nowrap; }
.pc-l { display: grid; font-weight: 600; color: var(--text-2); }
.pc-l em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.pc-row.profit { border-top: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); margin-top: 4px; padding-top: 9px; }
.pc-row.profit .pc-l { color: var(--text); font-weight: 750; }
.pc-row.profit b { font-size: 22px; color: var(--ok); }
.pc-pct { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 4px; }
.pc-math { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }

/* Contacts: bigger company logo, job titles in a dropdown */
.avatar.co { width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
.avatar.co img.fav { width: 80%; height: 80%; }
.co-h { align-items: center; }
.co-h h2 { text-transform: none; letter-spacing: 0; font-size: 16px; }
.co-link { gap: 12px; }
.co-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.title-pick { min-height: 34px; max-width: 240px; padding: 4px 28px 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* Read-only first: saved records show as plain text until you tap Edit */
.view-mode input:disabled, .view-mode select:disabled, .view-mode textarea:disabled { opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; background-image: none; resize: none; cursor: default; }
.view-mode .line-item input:disabled, .view-mode .line-item select:disabled { padding-left: 4px; }
.view-mode input:disabled::placeholder, .view-mode textarea:disabled::placeholder { color: transparent; -webkit-text-fill-color: transparent; opacity: 0; }
.view-mode .toggle-group button:not(.on) { display: none; }
.view-mode .toggle-group button { pointer-events: none; }
.view-mode .line-item .x, .view-mode [data-act="line-add"], .view-mode [data-act="other-add"], .view-mode [data-act="price-add"], .view-mode [data-act="task-line-add"], .view-mode .btn.danger:not(.keep), .view-mode .logo-cam, .view-mode #logo-remove { display: none !important; }
.view-mode .logo-btn { pointer-events: none; }
.view-mode .field > span, .view-mode .field-row .field > span { color: var(--muted); }
.co-h h2, .co-h .co-link { font-size: 20px; font-weight: 750; letter-spacing: -.01em; }

/* Photos & files: folders, drag to move, details card */
.folder-bar { margin-bottom: 12px; }
.folder-chip svg, .folder-head svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -2px; margin-right: 5px; }
.folder-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.folder-head b { font-size: 17px; display: inline-flex; align-items: center; }
.folder-head .muted { margin-right: auto; }
.folder-head .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex-basis: 100%; font-size: 15px; }
.folder-head .crumbs b { font-size: 17px; }
.folder-head .crumb { color: var(--accent); font-weight: 600; padding: 2px 2px; border-radius: 6px; }
.folder-head .crumb:hover { text-decoration: underline; }
.folder-head .crumb.drop-on { background: var(--accent-soft); }
.folder-head .crumb-sep { color: var(--muted); margin: 0 2px; }
.folder-tile .file-ico { color: var(--accent); background: var(--accent-soft); }
.folder-tile .file-ico svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.file-tile[draggable="true"] { cursor: grab; }
.file-tile.dragging { opacity: .45; }
.drop-on { outline: 3px solid var(--accent); outline-offset: 2px; background: var(--accent-soft) !important; }
.file-preview { border-radius: var(--r); overflow: hidden; background: var(--surface-2); margin-bottom: 12px; display: grid; place-items: center; min-height: 160px; }
.file-preview img { width: 100%; max-height: 52vh; object-fit: contain; display: block; }
.file-ico.big svg { width: 64px; height: 64px; }
#fl-j { max-width: 220px; }
/* Contacts company heading — a bit smaller so it never wraps on phones */
.avatar.co { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.co-h h2, .co-h .co-link { font-size: 17px; }
.co-h h2 { min-width: 0; flex: 1 1 auto; }
.co-h .co-link { min-width: 0; max-width: 100%; gap: 10px; }
.co-h .co-link > :last-child, .co-h .co-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .avatar.co { width: 28px; height: 28px; border-radius: 7px; }
  .co-h { flex-wrap: wrap; row-gap: 6px; }
  .co-h h2, .co-h .co-link { font-size: 15px; }
  .co-h h2 { flex: 1 1 0; }
  .co-right { flex: none; }
  .co-h:has(.title-pick) .co-right { width: 100%; justify-content: space-between; margin-left: 0; }
  .co-h:has(.title-pick) h2 { flex-basis: 100%; }
  .title-pick { max-width: 70%; }
}

/* Crew portal: note at the bottom of the Work tab */
.portal-note { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(var(--info-soft), var(--info-soft)), var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); color: var(--text-2); font-size: 14px; line-height: 1.45; }
.portal-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--info); fill: none; stroke: currentColor; stroke-width: 2; }
.portal-note .link { color: var(--accent); font-weight: 700; text-decoration: underline; padding: 0; }
.portal-note.low { margin: 22px 0 8px; }
.portal-note > span { flex: 1; }
.portal-note .note-x { flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.portal-note .note-x:hover { background: var(--surface-2); color: var(--text); }
.portal-note .note-x svg { width: 16px; height: 16px; margin: 0; color: currentColor; }

/* Crew portal: notifications bell + dropdown */
.notif-wrap { position: relative; }
#bell-btn { position: relative; }
#bell-btn .badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px var(--bar, var(--surface)); }
.notif-pop { position: absolute; right: -8px; top: calc(100% + 8px); z-index: 60; width: min(360px, calc(100vw - 20px)); max-height: min(70vh, 520px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.22); overflow: hidden; }
.notif-pop[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.notif-head .link { color: var(--accent); font-weight: 700; font-size: 14px; padding: 0; }
.notif-list { overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
.notif-item:last-child { border-bottom: 0; }
.notif-main { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 4px 11px 14px; }
.notif-main:hover { background: var(--surface-2); }
.notif-main .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.notif-main .dot.accent { background: var(--accent); } .notif-main .dot.ok { background: var(--ok); } .notif-main .dot.warn { background: var(--warn); } .notif-main .dot.bad { background: var(--bad); } .notif-main .dot.info { background: var(--info); }
.notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-text b { font-size: 14px; color: var(--text); }
.notif-text span { font-size: 13px; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-text em { font-style: normal; font-size: 12px; color: var(--muted); }
.notif-x { flex: none; width: 34px; height: 34px; margin: 6px 6px 0 0; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.notif-x:hover { background: var(--surface-2); color: var(--text); }
.notif-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.notif-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 600px) {
  .notif-wrap { position: static; }   /* drop down from the header bar, full width with a gutter */
  .notif-pop { left: 10px; right: 10px; width: auto; top: calc(100% + 6px); }
}

/* Grouped lists: one box per group, the group's heading inside the top of its box */
.list.org-box + .list.org-box, .list.grp-box + .list.grp-box { margin-top: 16px; }
.section-h + .list.grp-box { margin-top: 0; }
.list .section-h.box-h { margin: 0; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.list .section-h.box-h h2 { color: var(--text); }
.list .section-h.box-h .count { color: var(--muted); }
/* Headers inside boxes sit on a solid strip — no drop shadows there (overrides the camo-light shadow rules) */
body.theme-duckcamolight .list .section-h, body.theme-duckcamolight .list .section-h * { text-shadow: none !important; }
body.theme-duckcamolight .list .section-h :is(.avatar, img, .fav, .co-fav) { filter: none !important; }
body.theme-duckcamolight .list .section-h h2 { color: var(--text); }
body.theme-duckcamolight .list .section-h .count { color: var(--muted); }

/* Calendar without weekends (Settings) — 5 columns */
.cal.no-wknd .cal-wd, .cal.no-wknd .cal-grid { grid-template-columns: repeat(5, 1fr); }
.cal.no-wknd .cal-cell:nth-child(7n) { border-right: 1px solid var(--line); }
.cal.no-wknd .cal-cell:nth-child(5n) { border-right: 0; }
.cal.no-wknd .cal-cell:nth-child(-n+7) { border-top: 1px solid var(--line); }
.cal.no-wknd .cal-cell:nth-child(-n+5) { border-top: 0; }
/* On/off switch rows (Settings) */
.toggle-row { cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }

/* Calendar Day overview: stat tiles, By crew and By jobsite each in their own card, heading inside */
.day-stats.boxed .ds-body { padding: 12px; }
.day-stats.boxed .ds-body .pay-strip { margin: 0; }
.day-stats.boxed .group-h .link { margin-left: auto; color: var(--accent); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 0; }
.day-stats.boxed .table-wrap .group-h { position: sticky; left: 0; }
.day-stats.boxed .pay-box { background: var(--surface-2); }
.day-stats.boxed .pay-box.profit { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--surface-2); }

/* Headers inside boxes: a soft tint of the theme's button color, heading text in that color */
:is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
:is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) :is(h2, .co-link, .co-name) { color: var(--accent) !important; }
:is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) .count { color: var(--text-2) !important; }
:is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) .count b, :is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) .day-pay { color: var(--text) !important; }
:is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) .link { color: var(--accent) !important; }
/* Duck Camo + Duck Camo Light: box headers keep the plain look (no button-color tint) */
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) { background: var(--surface-2); color: var(--text-2); border-bottom: 1px solid var(--line); }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > .group-h.date-h { color: var(--text); }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > .section-h.box-h h2 { color: var(--text) !important; }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > .section-h.box-h :is(.co-link, .co-name) { color: var(--accent) !important; }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) .count { color: var(--muted) !important; }

/* Calendar: the selected day's tasks in a box with the date + "+ Task on this day" in its header */
.cal-day-box .group-h .link { margin-left: auto; color: var(--accent); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 0; }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) .count.link { color: var(--accent) !important; }   /* links in headers stay orange */

/* Crew documents list (crew page + crew portal) */
.file-ico.sm { flex: none; width: 38px; height: 38px; aspect-ratio: auto; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.file-ico.sm svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.doc-upload { margin: 4px 0 6px; }
.doc-upload .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; vertical-align: -3px; }
.doc-upload p { margin: 8px 4px 0; }

/* Crew portal task rows: one-line preview of DS's note on the task */
.row-sub.note-prev { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--text-2); }
.row-sub.note-prev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row-sub.note-prev b { font-weight: 700; color: var(--accent); }
.row-sub.note-prev svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; }

/* Crew documents: section chips + expiry pills */
.doc-chips { margin: 0 0 12px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.doc-chips .n { opacity: .7; font-weight: 600; margin-left: 2px; }
.btn.block svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; margin-right: 6px; vertical-align: -3px; }
.row-end .pill.sm { white-space: nowrap; }

/* Crew page: documents grouped by section */
.doc-sec + .doc-sec { border-top: 1px solid var(--line); }
.doc-sec-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 14px 5px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; }
.doc-sec-h .count { margin-left: auto; font-weight: 600; }
.doc-sec-h.link { color: var(--accent); cursor: pointer; }
.cd-form { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cd-form .actions { margin-top: 10px; }

.row-del { flex: none; width: 30px; height: 30px; margin-left: 6px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.row-del:hover { background: var(--bad-soft); color: var(--bad); }
.row-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.doc-sec.del .doc-sec-h { color: var(--bad); }
.row-end:has(.row-del) { flex-direction: row; align-items: center; }
/* Crew page documents: delete buttons only after tapping Edit; faint highlight on each section header */
.view-mode .row-del { display: none !important; }
.doc-sec-h { background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); border-bottom: 1px solid var(--line); padding: 8px 14px; }
.doc-sec.del .doc-sec-h { background: color-mix(in srgb, var(--bad) 9%, var(--surface-2)); }

/* Crew portal opened from the office ("View Crew Portal") */
.view-banner { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 12px calc(7px); padding-top: calc(var(--safe-t, 0px) + 7px); background: var(--warn); color: #1d1606; font-size: 14px; font-weight: 600; text-align: center; }
.view-banner button { flex: none; padding: 3px 10px; border-radius: 8px; background: rgba(0,0,0,.14); color: inherit; font-weight: 700; font-size: 13px; }
body.viewing .topbar { padding-top: 6px; min-height: var(--top-h); }
.view-portal-btn { margin-left: 8px; white-space: nowrap; }
.row-end:has(.view-portal-btn) { flex-direction: row; align-items: center; gap: 8px; }

/* Calendar (desktop): one square tile per crew — short name on top, task count below — in the crew's color */
@media (min-width: 900px) {
  .cal-cell .cal-chips:has(.cal-crew) { flex: 1; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; gap: var(--chip-gap); --chip-gap: 5px; padding: 2px 0 4px; }
  /* Tiles share the day box evenly and track its width: 31% of the day box (or the even share per row, whichever is smaller), max 58px; text scales with the tile */
  .cal-crew { flex: 0 0 min(58px, 31%, calc((100% - (var(--cols, 2) - 1) * var(--chip-gap)) / var(--cols, 2))); aspect-ratio: 1; min-width: 0; container-type: inline-size;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 9px; text-align: center; overflow: hidden;
    background: var(--cbg, var(--c)); border: 0; color: var(--ink, #fff); line-height: 1.05; }
  .cal-crew b { font-size: clamp(7px, 19cqi, 11px); font-weight: 800; letter-spacing: .03em; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
  .cal-crew .n { font-size: clamp(10px, 34cqi, 18px); font-weight: 800; margin-top: 2px; }
  .cal-crew .t { font-size: clamp(7px, 15cqi, 9px); font-weight: 600; color: inherit; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
  @container (max-width: 40px) { .cal-crew .t { display: none; } }
}

/* Today view */
.stats.two { grid-template-columns: repeat(2, 1fr); }
.today-money .pay-box { flex: 1 1 180px; padding: 12px 14px; }
.today-money .pay-box b { font-size: 22px; }
.today-money .pay-box.profit { flex-basis: 220px; }
.today-crew .group-h .lead-dot { margin-right: 6px; }
.today-crew .group-h .count { text-transform: none; letter-spacing: 0; }
.tbl tr.total td { border-top: 1px solid var(--line-strong); background: var(--surface-2); }
@media (max-width: 640px) {
  .today-money .pay-box { flex: 1 1 140px; padding: 10px 12px; }
  .today-money .pay-box b { font-size: 18px; }
  .today-money .pay-box.profit { flex-basis: 100%; }
  .hide-phone { display: none; }
  .today-tbl { font-size: 12.5px; }
  .today-tbl th { font-size: 10px; letter-spacing: .02em; padding: 8px 5px; }
  .today-tbl td { padding: 9px 5px; }
  .today-tbl td:first-child, .today-tbl th:first-child { padding-left: 10px; }
  .today-tbl td:last-child, .today-tbl th:last-child { padding-right: 10px; }
  .today-crew .group-h { flex-wrap: wrap; }
  .today-crew .group-h .count { flex-basis: 100%; margin-left: 15px; }
}
.my-co { font: inherit; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
.row:has(.my-co) .row-sub { white-space: normal; }

/* Field Tracker: filters & sort drawer, one card per day, days fold up */
.filter-drawer { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: -4px 0 14px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.filter-drawer[hidden] { display: none; }
.fd-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-row .chips { margin: 0; }
.fd-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.fd-selects label { display: flex; align-items: center; gap: 6px; }
.fd-selects select { min-width: 160px; }
.btn.on { border-color: var(--accent); color: var(--accent); }
.badge.sm { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; margin-left: 4px; background: var(--accent); color: var(--accent-ink); }
.chev-sm { font-size: 10px; margin-left: 4px; }
.wc-day + .wc-day { margin-top: 12px; }
.wc-day .group-h.foldable { cursor: pointer; user-select: none; gap: 10px; }
.wc-day .fold-chev { width: 14px; color: var(--muted); font-size: 12px; }
.wc-day .group-h .count .link { color: var(--accent); font-weight: 700; cursor: pointer; }
.wc-day.folded .group-h { border-bottom: 0; }
.wc-day .table-wrap { overflow-x: auto; }
.wc-day .tbl.wc thead th { background: var(--surface-2); }
@media (max-width: 899px) {
  .wc-day .group-h.foldable { flex-wrap: wrap; row-gap: 2px; }
  .wc-day .group-h.foldable .dh-title { flex: 1 1 auto; min-width: 0; }
  .wc-day .group-h.foldable .count { flex-basis: 100%; margin-left: 24px; font-size: 13px; }
}
.fold-tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.fold-tog .fold-chev { font-size: 12px; color: var(--muted); width: 12px; }
.sc-row { display: flex; gap: 8px; align-items: center; }
.sc-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; }

/* Private (office-only) task note */
.pnote { margin-top: 14px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--surface)); border-radius: 12px; padding: 10px 12px; }
.pnote-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pnote-h svg, .pnote-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--warn); stroke-width: 2; }
.pnote-h .muted { margin-left: auto; }
.pnote textarea { width: 100%; font: inherit; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); resize: vertical; }
.pnote-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.pnote-ico { display: inline-flex; vertical-align: -2px; margin-left: 3px; }

/* v26 — Field / Payment Tracker: Month › Week › Day dropdowns */
.wc-month + .wc-month, .wc-month + .wc-day, .wc-day + .wc-month { margin-top: 12px; }
.period-h { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; padding: 12px 14px; border-radius: var(--radius, 12px); background: var(--surface); border: 1px solid var(--line); }
.period-h .fold-chev { width: 14px; color: var(--muted); font-size: 12px; }
.period-h .dh-title { font-weight: 800; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.period-h .count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.month-h { font-size: 17px; }
.month-h .dh-title { font-size: 17px; }
.wc-month > .period-body { padding: 0; border: 0; margin: 10px 0 0; }   /* no indent: day cards run full width under the month */
.wc-week + .wc-week { margin-top: 10px; }
.week-h { padding: 10px 14px; background: var(--surface-2); }
.wc-week > .period-body { padding: 10px 0 0 0; }   /* no indent */
.wc-week > .period-body .wc-day + .wc-day { margin-top: 10px; }
@media (max-width: 700px) {
  .wc-month > .period-body { padding-left: 0; margin-left: 0; }
  .wc-week > .period-body { padding-left: 0; }
  .period-h { flex-wrap: wrap; row-gap: 2px; }
  .period-h .count { flex-basis: 100%; margin-left: 24px; }
}

/* Calendar day box: one solid sub-header per crew, tasks listed under it */
.cal-day-box .cal-crew-h { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--cbg, var(--c)); color: var(--ink, #fff); font-size: 14px; font-weight: 750; letter-spacing: -.005em; }
.cal-day-box .cal-crew-h .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-day-box .cal-crew-h .count { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: inherit; opacity: .85; }
.cal-day-box .cal-crew-h + .row { border-top: 0; }

/* Calendar (phone): tiny solid crew squares — short name over the task count — two per row, so the month fits the screen */
@media (max-width: 899px) {
  .cal-cell { min-height: 50px; padding: 2px 2px 3px; gap: 2px; }
  .cal-n { width: 20px; height: 20px; font-size: 12px; }
  .cal-dots { display: none; }
  .cal-cell .cal-chips:has(.cal-crew) { display: flex; flex-flow: row wrap; justify-content: center; align-content: flex-start; gap: 2px; }
  .cal-crew { flex: 0 0 calc(50% - 1px); max-width: 24px; aspect-ratio: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 4px; background: var(--cbg, var(--c)); color: var(--ink, #fff); line-height: 1; overflow: hidden; text-align: center; }
  .cal-crew b { font-size: 7px; font-weight: 800; letter-spacing: 0; max-width: 100%; overflow: hidden; white-space: nowrap; color: inherit; }
  .cal-crew .n { font-size: 10px; font-weight: 800; margin-top: 1px; }
  .cal-crew .t { display: none; }
}

/* Invoice search: matches inside line items — box per invoice (builder · #) with the matching lines and their lot */
.inv-hits { margin-bottom: 12px; }
.inv-hits > .group-h { cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; gap: 10px; }
.inv-hits > .group-h .ih-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-hits > .group-h .count { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.inv-hit .hit-lot { flex: none; min-width: 64px; padding: 4px 8px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; text-align: center; }
@media (max-width: 600px) { .inv-hits > .group-h { flex-wrap: wrap; } .inv-hits > .group-h .count { flex-basis: 100%; margin-left: 0; } }

/* Company page → Payment type, and the "how it's paid" capsule next to the payment status */
.pay-type .row { align-items: flex-start; }
.pay-type .toggle-group { margin-top: 8px; }
.pay-type .toggle-group button { padding: 6px 11px; font-size: 13px; }
.pay-pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.pill.pay-via { border: 0; }
.pill.pay-via.pv-invoice { background: color-mix(in srgb, #2f7de1 16%, transparent); color: #2f7de1; }
.pill.pay-via.pv-supplypro { background: color-mix(in srgb, #0f9d7a 16%, transparent); color: #0f9d7a; }
.pill.pay-via.pv-software { background: color-mix(in srgb, #8b5cf6 18%, transparent); color: #8b5cf6; }

/* Crew pay edited right on the task (pricing card, Pay & back charges, Payment Tracker "Crew pay" column) */
.cp-edit { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 6px; padding: 1px 4px; margin: -1px -4px; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.cp-edit:hover { background: var(--accent-soft); }
.cp-edit .cp-pen { display: inline-flex; color: var(--accent); opacity: .7; }
.cp-edit .cp-pen svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.cp-edit.editing { border-bottom: 0; background: none; padding: 0; margin: 0; }
.cp-input { width: 96px; height: 30px; padding: 4px 8px; border-radius: 7px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; text-align: right; }

/* Add tasks → Additional options (folded by default) */
.more-opts { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.more-opts > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--text-2); list-style: none; display: flex; align-items: center; gap: 8px; }
.more-opts > summary::-webkit-details-marker { display: none; }
.more-opts > summary::before { content: '▸'; color: var(--muted); }
.more-opts[open] > summary::before { content: '▾'; }
.more-opts[open] > summary { border-bottom: 1px solid var(--line); }
.more-opts > :not(summary) { margin-left: 14px; margin-right: 14px; }
.more-opts > :last-child { margin-bottom: 12px; }
.more-opts .check-label { margin-top: 12px; }

/* Payment details (ACH / check) on the task and in the Payment Tracker */
.pay-info { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); display: grid; gap: 6px; font-size: 14px; }
.pay-info-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-info-row > span { flex: 1 1 auto; min-width: 0; }
.pay-info-row a { color: var(--accent); font-weight: 700; font-size: 13px; }
.pay-ref { margin-top: 3px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub.pay-refs { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 12px; }
.row-sub.pay-refs b { font-weight: 700; color: var(--text-2); }
/* Task card → Payments (top): received from builder / paid to crew */
.pay-top { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pay-top .pc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ptc-inv { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.ptc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ptc-row + .ptc-row { border-top: 1px solid var(--line); }
.ptc-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); }
.ptc-row.ok .ptc-ic { background: var(--ok); border-color: var(--ok); color: #fff; }
.ptc-row.miss .ptc-ic { border-color: var(--warn); }
.ptc-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; }
.ptc-main { flex: 1 1 auto; min-width: 0; }
.ptc-l { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ptc-v { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 15px; margin-top: 2px; }
.ptc-v span:not(.muted) { color: var(--text-2); }
.ptc-links { display: flex; gap: 12px; flex: none; }
.ptc-links a { color: var(--accent); font-weight: 700; font-size: 13px; }

/* Side-scrolling areas (trackers, tables, chip rows, calendar) stop at their edge instead of passing the swipe to the browser */
.wc-wrap, .table-wrap, .chips-row, .chip-bar, .doc-chips { overscroll-behavior-x: none; }

.wc-month > .period-body > .wc-day + .wc-day { margin-top: 10px; }

.wc-day + .wc-more, .wc-more { margin-top: 14px; }
.wc-more > .period-body > .wc-month + .wc-month { margin-top: 10px; }

/* Field Tracker → Import from Excel: status mapping rows */
.imp-map .row { flex-wrap: wrap; gap: 8px; }
.imp-map .row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.imp-map .row-main > div:not(.row-title):not(.row-sub) { flex: 1 1 auto; }
.imp-map select { flex: 1 1 260px; max-width: 100%; margin-top: 6px; }
.imp-map .row-title { flex: 1 1 200px; }
.imp-map .row-sub { flex-basis: 100%; }

/* Tools → Import Tasks */
.imp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.imp-h { margin: 0 0 4px; font-size: 20px; }
.imp-top p { margin: 0; max-width: 620px; }
.imp-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.imp-bar .imp-upd { margin: 0; font-size: 13px; }
.imp-bar-r { margin-left: auto; display: flex; gap: 8px; }
.imp-batch + .imp-batch { margin-top: 22px; }
.imp-batch-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 10px; }
.imp-batch-h .btn { margin-left: auto; }
.imp-sec { margin-bottom: 12px; }
.imp-sec .group-h .check { margin-right: 6px; cursor: pointer; }
.imp-row { cursor: pointer; align-items: flex-start; }
.imp-row .check { margin-top: 2px; }
.imp-row.on { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.imp-row .row-end { flex-direction: column; align-items: flex-end; gap: 2px; }
.imp-warn { color: var(--warn); font-weight: 600; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .imp-bar-r { margin-left: 0; width: 100%; } .imp-bar-r .btn { flex: 1; } .field-row.three { grid-template-columns: 1fr; } }

/* Import Tasks → duplicates */
.imp-top-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.imp-match { color: var(--ok); font-weight: 600; }
.dup-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 14px; }
.dup-row { align-items: flex-start; }
.dup-row.keep { background: color-mix(in srgb, var(--ok) 7%, transparent); }
.dup-row .row-main { cursor: pointer; }
.dup-radio { flex: none; width: 82px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; padding-top: 2px; }
.dup-row.keep .dup-radio { color: var(--ok); }
.rad { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-block; flex: none; }
.rad.on { border-color: var(--ok); box-shadow: inset 0 0 0 4px var(--surface); background: var(--ok); }

.imported-note { margin: 16px 0 2px; text-align: center; font-size: 11px; color: var(--muted); opacity: .85; }

/* Crew portal → Pay page paused while pricing is imported (Crews page switch) */
.pay-hold-msg { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); color: var(--text); font-size: 14px; line-height: 1.45; }
.pay-hold-msg b { display: block; margin-bottom: 2px; }
.hold-blur { filter: blur(7px); pointer-events: none; user-select: none; opacity: .75; }
.hold-fake { margin-top: 12px; }
.pay-hold.on { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }

.clear-f svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; margin-right: 4px; vertical-align: -2px; }
.clear-f[hidden] { display: none; }

.crew-sum { color: var(--bad); font-weight: 700; }

/* Inactive jobsites */
.row.inactive { opacity: .6; }
.inact-box > .group-h { cursor: pointer; user-select: none; gap: 8px; }
.inact-h { font-size: 12px; }
.site-active .row-sub { white-space: normal; }

/* Region (coast) */
.coast-badge { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .02em; cursor: pointer; margin-right: 6px; }
.coast-badge[hidden] { display: none; }
.region-pick button { padding: 7px 12px; font-size: 13.5px; }

/* Prospect jobsites */
.prosp-box > .group-h { color: var(--warn); }
.row.prospect .row-title::after { content: 'Prospect'; margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--warn-soft); color: var(--warn); }
.site-st { margin-top: 10px; }
.site-st button { padding: 6px 12px; font-size: 13px; }

/* Import Tasks → Imported list, and the "hidden from crew" marker */
.imp-tabs { margin: 0 0 14px; }
.held-pill, .rel-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.held-pill { background: var(--warn-soft); color: var(--warn); }
.rel-pill { background: var(--ok-soft); color: var(--ok); }
.imp-money { flex-direction: column; align-items: flex-end; gap: 2px; }
.imported-note a { color: var(--accent); font-weight: 700; }

.dup-keepall { margin-left: 8px; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 3px 9px; }
.dup-g .group-h .count { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Import Tasks: sheet headers fold, and show the crews / vendors in their colors */
.imp-batch-h, .imp-file-h { cursor: pointer; user-select: none; }
.imp-batch-h .fold-chev, .imp-file-h .fold-chev { width: 14px; color: var(--muted); font-size: 12px; flex: none; }
.imp-file-h { text-transform: none; letter-spacing: 0; font-size: 14px; flex-wrap: wrap; row-gap: 6px; }
.imp-fname { font-weight: 800; color: var(--text); }
.crew-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.crew-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; background: var(--cbg, var(--c)); color: var(--ink, #fff); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.crew-chip em { font-style: normal; font-weight: 700; opacity: .8; }
.imp-batch.folded .imp-batch-h { margin-bottom: 0; }
.imp-file.folded > .group-h { border-bottom: 0; }

/* Import Tasks → Imported: crew headers (calendar style) with one row per imported sheet */
.imp-crewbox .imp-file-row { cursor: pointer; align-items: center; }
.imp-crewbox .imp-file-row .check { margin: 0 2px; }
.imp-crewbox .imp-file-row .row-end { flex-direction: row; align-items: center; gap: 10px; }
.imp-crewbox .imp-file-row .fold-chev { color: var(--muted); font-size: 12px; width: 12px; }
.imp-crewbox .imp-file-row.open { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.imp-file-tasks { border-left: 3px solid var(--line-strong); margin-left: 18px; }
.imp-file-tasks .imp-row { padding-left: 12px; }

.ours-amt { color: var(--ok); font-weight: 800; white-space: nowrap; }

.wc-months { margin-top: 14px; }
.wc-months > .wc-month + .wc-month { margin-top: 10px; }

/* Tracker day tables: columns fit their contents, task text wraps, crew color header rows (26.4.104) */
.tbl.wc.fit { table-layout: auto; width: 100%; min-width: 0; }
.tbl.wc.fit td, .tbl.wc.fit th { overflow: visible; text-overflow: clip; }
.tbl.wc.fit td.addr, .tbl.wc.fit td.muted { max-width: none; }
.tbl.wc.fit td.task-c { white-space: normal; min-width: 150px; overflow-wrap: anywhere; }
.tbl.wc.fit th .col-resize { display: none; }
.tbl.wc.fit th.ck, .tbl.wc.fit td.ck { width: 44px; }
.tbl.wc.fit tr.crew-row td { padding: 0; border-top: 0; cursor: default; }
.tbl.wc.fit tbody tr.crew-row:hover { background: none; }
.tbl.wc.fit tr.crew-row + tr td { border-top: 0; }
.wc-day .cal-crew-h { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--cbg, var(--c)); color: var(--ink, #fff); font-size: 14px; font-weight: 750; letter-spacing: -.005em; }
.wc-day .cal-crew-h .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-day .cal-crew-h .count { margin-left: auto; flex: none; font-size: 13px; font-weight: 600; color: inherit; opacity: .85; }
.wc-day .cal-crew-h + .row { border-top: 0; }
.tbl.wc.fit th { white-space: nowrap; }
.tbl th .nw { white-space: nowrap; }
.tbl.wc.fit td, .tbl.wc.fit th { padding-left: 8px; padding-right: 8px; }
.tbl.wc.fit th.sortable { padding-right: 14px; }
.tbl.wc.fit td.task-c { min-width: 190px; }   /* task column gets more room; long text still wraps */
.tbl.wc.fit td.addr-c { white-space: nowrap; }

/* Months → weeks (26.4.105) */
.wc-month > .period-body > .wc-week + .wc-week { margin-top: 10px; }
.week-h { font-size: 15px; }
.week-h .dh-title { font-weight: 750; }
.period-h .month-all { flex: none; font-size: 12px; padding: 4px 10px; min-height: 0; }
@media (max-width: 700px) { .period-h .month-all { order: 2; margin-left: auto; } .period-h .count { order: 3; } }

/* Tracker day tables (26.4.107): every header on one line; each column hugs its contents and the Task column takes the spare room */
.tbl.wc.fit th, .tbl.wc.fit td { width: 1%; white-space: nowrap; }
.tbl.wc.fit th[data-id="task"], .tbl.wc.fit td.task-c { width: auto; white-space: normal; }
.tbl.wc.fit tr.crew-row td { width: auto; }
.tbl.wc.fit th { font-size: 11px; letter-spacing: .04em; padding-left: 7px; padding-right: 7px; }
.tbl.wc.fit th.sortable { padding-right: 7px; }
.tbl.wc.fit td { padding-left: 7px; padding-right: 7px; }
.tbl.wc.fit th:not(.sorted) .sort-ind { display: none; }
.tbl.wc.fit th.sortable:hover .sort-ind { display: inline-block; }
/* Region badge (26.4.109): always one line, never squeezed by a long page title; shows FL All when all regions are on */
.coast-badge { flex: none; white-space: nowrap; }
/* Box headers (26.4.112): main headers (builder, day, section) a bit stronger; sub-headings (Prospects, Inactive…) lighter than their main header */
:is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
:is(.list.grp-box, .list.org-box) > .group-h.inact-h, .list.grp-box.inact-box > .group-h { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) { background: var(--surface-2); }
body:is(.theme-duckcamo, .theme-duckcamolight) :is(.list.grp-box, .list.org-box) > .group-h.inact-h, body:is(.theme-duckcamo, .theme-duckcamolight) .list.grp-box.inact-box > .group-h { background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }

/* ---------- Gulf Coast (26.4.113): warm sand, Gulf-water teal, sunset coral ---------- */
body.theme-gulfcoast {
  --bg: #f6f1e7; --surface: #fffdf8; --surface-2: #f2ebdd; --line: rgba(60,45,20,.11); --line-strong: rgba(60,45,20,.2);
  --text: #1f3236; --text-2: #3f5459; --muted: #75807f;
  --accent: #0e8a8c; --accent-ink: #ffffff; --accent-soft: #dcefee;
  --ok: #1b8a5a; --ok-soft: #e0f1e7; --warn: #c2620f; --warn-soft: #fbead8; --bad: #d4483b; --bad-soft: #fbe3df; --info: #3d6fb6; --info-soft: #e3ebf6;
  --bar: rgba(246,241,231,.93); --side: #efe7d6; --shadow: 0 1px 2px rgba(60,45,20,.06), 0 2px 6px rgba(60,45,20,.05);
  color-scheme: light;
}
body.theme-gulfcoast .btn.primary { background: linear-gradient(135deg, #0e8a8c, #13a39d); border-color: transparent; }

/* ---------- Red Clay (26.4.113): Florida dirt after a rain — deep umber panels, terracotta accent ---------- */
body.theme-redclay {
  --bg: #1a1412; --surface: #241c19; --surface-2: #2d2420; --line: rgba(255,225,205,.09); --line-strong: rgba(255,225,205,.18);
  --text: #f4ebe5; --text-2: #cdbcb1; --muted: #9a8a80;
  --accent: #e2703a; --accent-ink: #1a1412; --accent-soft: rgba(226,112,58,.17);
  --ok: #7ccf7a; --ok-soft: rgba(124,207,122,.14); --warn: #f2b155; --warn-soft: rgba(242,177,85,.15); --bad: #ff6f61; --bad-soft: rgba(255,111,97,.15); --info: #b8a2f0; --info-soft: rgba(184,162,240,.15);
  --bar: rgba(26,20,18,.93); --side: #1f1815; --shadow: 0 1px 2px rgba(0,0,0,.5);
  color-scheme: dark;
}
body.theme-redclay .btn.primary { background: linear-gradient(135deg, #e2703a, #c9532a); border-color: transparent; color: #fff; }
/* Menu notification bubbles (26.4.114): true circles, text shrinks to fit 2–3 characters */
.badge.nb { --d: 18px; width: var(--d); min-width: 0; height: var(--d); padding: 0; border-radius: 50%; aspect-ratio: 1; font-size: 10.5px; letter-spacing: -.02em; line-height: 1; }
.badge.nb2 { font-size: 9.5px; }
.badge.nb3 { font-size: 7.5px; letter-spacing: -.04em; }
.side-item .badge.nb, body.nav-collapsed .side-item .badge.nb { --d: 17px; width: var(--d); height: var(--d); min-width: 0; padding: 0; }
.tab .badge.nb { --d: 18px; }
body.nav-collapsed .side-item .badge.nb { left: calc(50% + 3px); right: auto; top: 0; box-shadow: 0 0 0 2px var(--side); }
.badge.nb3 { font-size: 7px; letter-spacing: -.05em; }

/* ---------- Night Green (26.4.115): music-app style — pure black, charcoal cards, bright green pill buttons ---------- */
body.theme-nightgreen {
  --bg: #000000; --surface: #121212; --surface-2: #1f1f1f; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16);
  --text: #ffffff; --text-2: #b3b3b3; --muted: #8a8a8a;
  --accent: #1ed760; --accent-ink: #000000; --accent-soft: rgba(30,215,96,.15);
  --ok: #1ed760; --ok-soft: rgba(30,215,96,.14); --warn: #ffa42b; --warn-soft: rgba(255,164,43,.15); --bad: #f3727f; --bad-soft: rgba(243,114,127,.15); --info: #4cb3ff; --info-soft: rgba(76,179,255,.15);
  --bar: rgba(0,0,0,.9); --side: #000000; --shadow: 0 2px 8px rgba(0,0,0,.6);
  color-scheme: dark;
}
body.theme-nightgreen .btn { border-radius: 999px; font-weight: 700; }
body.theme-nightgreen .btn.primary { background: #1ed760; border-color: #1ed760; color: #000; }
body.theme-nightgreen .btn.primary:hover { background: #3be477; transform: scale(1.02); }
body.theme-nightgreen .list, body.theme-nightgreen .card { border-color: transparent; }
body.theme-nightgreen .side-item.on { background: #1f1f1f; color: #fff; }
body.theme-nightgreen .side-item.on svg { color: #1ed760; }

/* ---------- Violet (26.4.115): web-host style — lavender background, white cards, bold purple, deep navy text ---------- */
body.theme-violet {
  --bg: #f4f5ff; --surface: #ffffff; --surface-2: #f2f0ff; --line: rgba(47,28,106,.10); --line-strong: rgba(47,28,106,.2);
  --text: #2f1c6a; --text-2: #4a3d82; --muted: #6d6a8a;
  --accent: #673de6; --accent-ink: #ffffff; --accent-soft: #ebe4ff;
  --ok: #00b090; --ok-soft: #def4f0; --warn: #d97706; --warn-soft: #fcefdc; --bad: #fc5185; --bad-soft: #ffe8ef; --info: #3b5bdb; --info-soft: #e5eafc;
  --bar: rgba(244,245,255,.94); --side: #ffffff; --shadow: 0 2px 6px rgba(47,28,106,.06), 0 8px 24px rgba(47,28,106,.05);
  color-scheme: light;
}
body.theme-violet .btn { border-radius: 8px; font-weight: 700; }
body.theme-violet .btn.primary { background: #673de6; border-color: #673de6; color: #fff; }
body.theme-violet .btn.primary:hover { background: #5025d1; border-color: #5025d1; }
body.theme-violet .side-item.on { background: #ebe4ff; color: #673de6; }

/* ---------- Trucking (26.4.116) ---------- */
.truck-bar { flex-wrap: wrap; margin-bottom: 10px; }
.truck-filters { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.truck-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.truck-q { width: 100%; margin-bottom: 8px; }
.truck-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.truck-row.sel { background: var(--accent-soft); }
.truck-row .check.dis { opacity: .35; }
.truck-row .row-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.truck-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.truck-amts { display: flex; flex-direction: column; font-size: 13px; color: var(--text-2); }
.truck-amts b { color: var(--text); font-size: 14px; }
.pill.truck-in { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pill.truck-out { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); }
.truck-clip svg, .truck-file svg, .truck-inv-row .pill svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2; }
.truck-file { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.truck-file a, .truck-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truck-file .x { width: 28px; height: 28px; border: 0; background: none; color: var(--muted); }
.truck-file .x svg { width: 14px; height: 14px; }
.truck-inv-row .row-main { cursor: pointer; }
.truck-inv-row .row-end { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.truck-month .group-h .count { text-transform: none; }
@media (max-width: 700px) { .truck-actions { width: 100%; justify-content: stretch; } .truck-actions .btn { flex: 1; } }

/* ---------- Billing check wizard (26.4.117) ---------- */
.bc-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }
.bc-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 600; }
.bc-step b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line-strong); color: var(--surface); font-size: 11px; }
.bc-step.on { background: var(--accent-soft); color: var(--accent); }
.bc-step.on b, .bc-step.done b { background: var(--accent); color: var(--accent-ink); }
.bc-step.done { color: var(--text-2); }
.bc-h { margin: 14px 0 4px; font-size: 17px; }
.bc-back { margin-bottom: 8px; }
.bc-tools { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.bc-list .row, .bc-card .row { gap: 12px; align-items: flex-start; }
.bc-row input, .bc-opt input, .bc-orphan > input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.bc-why { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.bc-card { margin-bottom: 12px; }
.bc-card .bc-task { background: var(--surface-2); }
.bc-opt { cursor: pointer; }
.bc-opt.on { background: var(--accent-soft); }
.bc-score { flex: none; font-weight: 800; color: var(--accent); font-size: 13px; }
.bc-orphan.on { background: var(--accent-soft); }
.bc-edit { display: grid; grid-template-columns: 2fr 1fr 2fr 2fr; gap: 8px; margin-top: 8px; }
.bc-edit label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.bc-edit input, .bc-edit select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 14px; }
.bc-grp { margin-top: 10px; }
.bc-sum { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--text); font-size: 14px; }
@media (max-width: 700px) { .bc-edit { grid-template-columns: 1fr 1fr; } }
.bc-body .row-title, .bc-body .row-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.bc-body .row-main { flex: 1 1 auto; min-width: 0; }
.bc-edit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sheet.wide:has(.bc-steps) { max-width: min(880px, 100vw); }
/* Sheet title (26.4.118): long task names wrap onto a second line (and shrink a little on phones) instead of being cut off */
.sheet-head h2 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; padding: 8px 0; overflow-wrap: anywhere; }
.sheet-head h2.long { font-size: 15px; }
@media (max-width: 700px) { .sheet-head { grid-template-columns: 64px 1fr 64px; } .sheet-head h2 { font-size: 16px; } .sheet-head h2.long { font-size: 14px; } }
/* Task card header (26.4.119): big lot number, jobsite / builder / crew stacked, due date on the right */
.task-hero { position: relative; display: flex; align-items: stretch; gap: 14px; margin: 2px 0 18px; padding: 14px 16px 14px 20px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); box-shadow: var(--shadow); }
.task-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cbg, var(--c)); }
.th-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.th-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.th-lot { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1; }
.th-lot .th-k { align-self: center; }
.th-lot b { font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: .95; color: var(--text); text-shadow: 0 2px 0 color-mix(in srgb, var(--c) 35%, transparent); }
.th-lot .th-task { font-size: 26px; letter-spacing: -.02em; }
.th-site { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--text); margin-top: 4px; overflow-wrap: anywhere; }
.th-builder { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.th-builder .bicon { width: 20px; height: 20px; }
.th-crew { margin-top: 4px; }
.th-chip { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: var(--cbg, var(--c)); color: var(--ink, #fff); font-size: 13px; font-weight: 800; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-due { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; min-width: 92px; padding-left: 14px; border-left: 1px dashed color-mix(in srgb, var(--c) 40%, var(--line)); }
.th-due b { font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; color: var(--text); }
.th-due em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }
.th-due.now b { color: var(--accent); }
.th-due.soon b { color: var(--warn); }
.th-due.late b, .th-due.late .th-k { color: var(--bad); }
.th-due.done b { color: var(--ok); font-size: 20px; }
.th-due.none b { font-size: 16px; color: var(--muted); }
@media (max-width: 420px) { .th-lot b { font-size: 38px; } .th-site { font-size: 17px; } .th-due { min-width: 78px; padding-left: 10px; } .th-due b { font-size: 20px; } }
.th-task-name { margin-top: 6px; font-size: 21px; font-weight: 850; letter-spacing: -.015em; line-height: 1.15; color: var(--c); overflow-wrap: anywhere; filter: saturate(1.1); }
body:is(.theme-light2026, .theme-sage, .theme-gulfcoast, .theme-violet) .th-task-name { color: color-mix(in srgb, var(--c) 70%, #000); }
.th-task-name .pill { margin-left: 6px; vertical-align: 3px; }
.th-site { margin-top: 2px; font-size: 17px; }
@media (max-width: 420px) { .th-task-name { font-size: 19px; } }
.th-task-name.long { font-size: 16px; line-height: 1.25; }
/* Billing check: crew picker (26.4.121) */
.bc-crews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bc-crew { cursor: pointer; }
.bc-crew input { position: absolute; opacity: 0; pointer-events: none; }
.bc-crew span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--c); color: var(--text); font-size: 14px; font-weight: 700; background: var(--surface); }
.bc-crew span em { font-style: normal; font-size: 12px; opacity: .7; }
.bc-crew input:checked + span { background: var(--cbg, var(--c)); color: var(--ink, #fff); }
.bc-crew input:checked + span::before { content: "✓"; }
.bc-crewbar { margin: 4px 0 10px; }
.chip.crew-chip.on { background: var(--cbg, var(--c)); border-color: var(--c); color: var(--ink, #fff); }
.bc-mini { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--cbg, var(--c)); color: var(--ink, #fff); font-size: 11px; font-weight: 700; }
.bc-crew-note { margin: 0 0 6px; }
/* Offline mode (26.4.122) */
.off-step .off-ico { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.off-step.run .off-ico { border-color: var(--accent); border-top-color: transparent; animation: offspin .8s linear infinite; }
.off-step.ok .off-ico { background: var(--ok); border-color: var(--ok); color: #fff; } .off-step.ok .off-ico::after { content: "✓"; }
.off-step.warn .off-ico { background: var(--warn); border-color: var(--warn); color: #fff; } .off-step.warn .off-ico::after { content: "!"; }
@keyframes offspin { to { transform: rotate(360deg); } }
.off-ready { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--ok-soft); color: var(--text); font-size: 14px; line-height: 1.45; }
.off-banner { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 8px); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 16px); padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 4px 18px rgba(0,0,0,.18); font-size: 13px; }
.off-banner .ob-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.off-banner.synced .ob-dot { background: var(--ok); } .off-banner.sending .ob-dot { background: var(--accent); animation: offpulse 1s infinite; } .off-banner.waiting .ob-dot, .off-banner.offline .ob-dot { background: var(--warn); }
.off-banner .ob-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-banner .ob-t em { font-style: normal; color: var(--muted); }
.off-banner button { flex: none; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 600 12px var(--font); cursor: pointer; }
@keyframes offpulse { 50% { opacity: .35; } }
@media (max-width: 700px) { .off-banner { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); } .off-banner .ob-t em { display: none; } }
/* Invoice / bid line descriptions wrap (26.4.128) */
.line-item textarea[data-l="description"] { width: 100%; min-height: 42px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: 16px; line-height: 1.35; color: var(--text); resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
.line-item:has(textarea) { align-items: start; }
.view-mode .line-item textarea[data-l="description"] { border-color: transparent; background: transparent; padding-left: 6px; }
/* Invoice region tags (26.4.129) */
.pill.coast-west { background: color-mix(in srgb, #0ea5e9 16%, transparent); color: #0284c7; }
.pill.coast-east { background: color-mix(in srgb, #f97316 16%, transparent); color: #ea580c; }
td .pill.sm, .row-title .pill.sm { margin-left: 6px; vertical-align: 2px; }
/* /bulkregions/ (26.4.131) */
.br-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; flex: none; }
.br-seg button { border: 0; background: var(--surface); color: var(--text-2); padding: 5px 11px; font: 600 13px var(--font); cursor: pointer; }
.br-seg button + button { border-left: 1px solid var(--line); }
.br-seg button.on.br-west { background: #0284c7; color: #fff; } .br-seg button.on.br-east { background: #ea580c; color: #fff; } .br-seg button.on.br-none { background: var(--surface-2); color: var(--text); }
.br-all { margin-left: auto; display: inline-flex; gap: 6px; text-transform: none; letter-spacing: 0; }
.br-row { gap: 10px; align-items: center; }
/* Invoice # row on the task card (26.4.133) */
.inv-link .row { gap: 12px; align-items: center; }
.inv-link .wiz-ico.sm { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.inv-link .wiz-ico.sm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.inv-link .chev { color: var(--muted); font-size: 20px; }
.row-end .row-crew { font-size: 12px; margin-top: -4px; white-space: nowrap; }
/* Phone task rows styled like the task card (26.4.137) */
@media (max-width: 899px) {
  .row.trow-m { position: relative; align-items: stretch; gap: 12px; padding: 12px 12px 12px 16px; background: linear-gradient(110deg, color-mix(in srgb, var(--c) 9%, var(--surface)) 0%, var(--surface) 60%); }
  .row.trow-m::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cbg, var(--c)); }
  .trow-m > .check { align-self: center; }
  .tm-lot { flex: none; width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 2px; text-align: center; }
  .tm-k { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .tm-lot b { font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--text); text-shadow: 0 2px 0 color-mix(in srgb, var(--c) 35%, transparent); overflow-wrap: anywhere; }
  .tm-th { margin-top: 3px; font-size: 10px; font-weight: 800; padding: 0 5px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
  .tm-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .tm-task { font-size: 17px; font-weight: 850; letter-spacing: -.01em; line-height: 1.2; color: color-mix(in srgb, var(--c) 75%, var(--text)); overflow-wrap: anywhere; }
  .tm-task .muted { font-weight: 600; font-size: 14px; }
  .tm-site { font-size: 15px; font-weight: 750; color: var(--text); line-height: 1.25; overflow-wrap: anywhere; }
  .tm-date { font-size: 13px; color: var(--muted); }
  .tm-builder { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
  .tm-builder .bicon { width: 18px; height: 18px; }
  .tm-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
  .tm-crew { display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 999px; background: var(--cbg, var(--c)); color: var(--ink, #fff); font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-end { align-self: flex-start; }
}
/* Lot / building numbers: size by length, max two lines (26.4.138) */
.tm-lot b, .th-lot b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; max-width: 100%; }
.tm-lot b.ls2 { font-size: 23px; } .tm-lot b.ls3 { font-size: 16px; line-height: 1.1; } .tm-lot b.ls4 { font-size: 13px; line-height: 1.15; letter-spacing: -.01em; }
.th-lot b.ls2 { font-size: 36px; } .th-lot b.ls3 { font-size: 26px; line-height: 1.05; } .th-lot b.ls4 { font-size: 19px; line-height: 1.1; letter-spacing: -.01em; }
.th-lot b { max-width: calc(100% - 50px); }
@media (max-width: 899px) { .tm-lot { width: 60px; } .tm-lot b.ls2 { font-size: 20px; } .tm-lot b { word-break: normal; overflow-wrap: anywhere; } }
/* Lot numbers break only after / & , - (26.4.139) */
.tm-lot b, .th-lot b, .lotc b { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 899px) { .tm-lot { width: 64px; } .tm-lot b.ls2 { font-size: 19px; } }
/* Desktop tracker tables styled like the task card (26.4.139) */
body.new-ui .tbl.wc.fit tbody tr[data-act=task] { background: linear-gradient(100deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0%, var(--surface) 45%); }
body.new-ui .tbl.wc.fit tbody tr[data-act=task].sel { background: var(--accent-soft); }
body.new-ui .tbl.wc.fit tbody tr[data-act=task]:hover { background: linear-gradient(100deg, color-mix(in srgb, var(--c) 18%, var(--surface)) 0%, var(--surface-2) 55%); }
body.new-ui .tbl.wc.fit tbody tr[data-act=task] td.ck { box-shadow: inset 5px 0 0 var(--c); }
body.new-ui .tbl.wc.fit tbody tr[data-act=task] td { padding-top: 11px; padding-bottom: 11px; }
.tbl.wc td.lotc { line-height: 1; }
.lotc .k { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.lotc b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 26px; font-weight: 900; letter-spacing: -.03em; line-height: 1.02; color: var(--text); text-shadow: 0 2px 0 color-mix(in srgb, var(--c, var(--accent)) 35%, transparent); max-width: 110px; }
.lotc b.ls2 { font-size: 21px; } .lotc b.ls3 { font-size: 16px; } .lotc b.ls4 { font-size: 13px; }
.tbl.wc.fit td.lotc { white-space: normal; }
body.new-ui .tbl.wc td.task-c b { font-size: 15.5px; font-weight: 850; color: color-mix(in srgb, var(--c, var(--accent)) 75%, var(--text)); }
.sitec { font-weight: 750; font-size: 15px; color: var(--text); }
.bldc { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.bldc .bicon { width: 22px; height: 22px; flex: none; }
.crewchip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--cbg, var(--c, var(--muted))); color: var(--ink, #fff); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.lotc b { max-width: 150px; }
.lot-nw { white-space: nowrap; }
@media (max-width: 899px) { .tm-lot { width: 70px; } .tm-lot b.ls3 { font-size: 15px; } }

/* ───── NEW UI (Beta): sidebar menu — section colors, icon tiles, card-style active page ───── */
@media (min-width: 900px) {
  body.new-ui { --sc: #94a3b8; }
  body.new-ui [data-sec="overview"] { --sc: #60a5fa; } body.new-ui [data-sec="sales"] { --sc: #f59e0b; }
  body.new-ui [data-sec="field"] { --sc: #22c55e; } body.new-ui [data-sec="costing"] { --sc: #a78bfa; } body.new-ui [data-sec="tools"] { --sc: #f472b6; }
  body.new-ui:not(.nav-collapsed) .app { grid-template-columns: 230px 1fr; }
  body.new-ui .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--side)) 0%, var(--side) 30%); }
  body.new-ui .side-new { min-height: 46px; border-radius: 14px; font-weight: 850; font-size: 15.5px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #a78bfa)); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25); margin: 4px 2px 10px; }
  body.new-ui .side-sec { margin: 18px 10px 6px; font-size: 10px; font-weight: 850; letter-spacing: .16em; color: color-mix(in srgb, var(--sc) 75%, var(--muted)); }
  body.new-ui .side-sec::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--sc); flex: none; }
  body.new-ui .side-sec::after { background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 40%, transparent), transparent); }
  body.new-ui .side-item { min-height: 40px; gap: 10px; padding: 0 8px 0 6px; margin: 1px 0; border-radius: 12px; font-size: 14px; font-weight: 650; color: var(--text); }
  body.new-ui .side-item svg { box-sizing: content-box; width: 16px; height: 16px; padding: 5px; border-radius: 9px; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); flex: none; }
  body.new-ui .side-item:hover { background: color-mix(in srgb, var(--sc) 8%, transparent); }
  body.new-ui .side-item.on { color: var(--text); font-weight: 850; background: linear-gradient(100deg, color-mix(in srgb, var(--sc) 22%, var(--side)) 0%, color-mix(in srgb, var(--sc) 4%, var(--side)) 100%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 35%, transparent); }
  body.new-ui:not(.nav-collapsed) .side-item.on::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sc); }
  body.new-ui .side-item.on svg { background: var(--sc); color: #0b0f14; }
  /* bubbles: round for 1–2 digits, a pill that grows for 99+ — never clipped */
  body.new-ui:not(.nav-collapsed) .side-item .badge, body.new-ui:not(.nav-collapsed) .side-item .badge.nb { position: static; order: 3; flex: none; margin-left: 6px; box-shadow: none; --d: 22px; min-width: 22px; width: auto; height: 22px; aspect-ratio: auto; padding: 0 4px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: -.02em; overflow: visible; white-space: nowrap; }
  body.new-ui:not(.nav-collapsed) .side-item .badge.nb2 { font-size: 10.5px; }
  body.new-ui:not(.nav-collapsed) .side-item .badge.nb3 { font-size: 10.5px; padding: 0 6px; letter-spacing: -.02em; }
  body.new-ui:not(.nav-collapsed) .side-item > span { min-width: 0; }
  body.new-ui.nav-collapsed .side-item { justify-content: center; }
  body.new-ui .side-foot { border-top: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line)); }
}

/* + New sheet icons (both looks) */
.add-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.add-ic svg { width: 20px; height: 20px; }

/* ───── NEW UI (Beta): section colors (phones + desktop), + New sheet, bottom tab bar ───── */
body.new-ui { --sc: #94a3b8; }
body.new-ui [data-sec="overview"] { --sc: #60a5fa; } body.new-ui [data-sec="sales"] { --sc: #f59e0b; }
body.new-ui [data-sec="field"] { --sc: #22c55e; } body.new-ui [data-sec="costing"] { --sc: #a78bfa; } body.new-ui [data-sec="tools"] { --sc: #f472b6; }

/* NEW UI "+ New": one accent button for Field Tracker tasks, then a grid of icon tiles (theme accent only) */
.add-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.add-t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 14px 6px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 650; color: var(--text); text-align: center; transition: border-color .12s, background .12s, transform .1s; }
.add-t svg { width: 26px; height: 26px; color: var(--accent); }
.add-t:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.add-t:active { transform: scale(.97); }
.add-t.hero { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 56px; padding: 14px; background: var(--accent); color: var(--accent-ink); border: 0; font-size: 16px; font-weight: 800; }
.add-t.hero svg { width: 22px; height: 22px; color: var(--accent-ink); }
@media (min-width: 900px) { .add-grid { grid-template-columns: repeat(4, 1fr); } .add-t { min-height: 104px; } }

/* Bottom tab bar (phones) */
body.new-ui .tabbar { border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 28px -12px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in srgb, var(--accent) 18%, var(--line)); background: color-mix(in srgb, var(--bar) 92%, var(--accent) 8%); }
body.new-ui .tab { gap: 2px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
body.new-ui .tab:not(.tab-add) > svg { box-sizing: content-box; width: 22px; height: 22px; padding: 4px 14px; border-radius: 999px; transition: background .15s, color .15s; }
body.new-ui .tab.on { color: color-mix(in srgb, var(--sc) 80%, var(--text)); font-weight: 850; }
body.new-ui .tab.on > svg { background: color-mix(in srgb, var(--sc) 22%, transparent); color: var(--sc); }
body.new-ui .tab .badge { top: 1px; left: calc(50% + 10px); box-shadow: 0 0 0 2px var(--bar); }
body.new-ui .tab-add-circle { width: 52px; height: 52px; border-radius: 18px; transform: translateY(-12px); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #a78bfa)); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 0 4px var(--bg), inset 0 1px 0 rgba(255,255,255,.25); }
body.new-ui .tab-add-circle svg { width: 24px; height: 24px; stroke-width: 2.6; }

/* Phones, old look (NEW UI off): hybrid task rows — lot line above the task, thin crew-color edge, nothing cut off */
.row.trow-h { position: relative; align-items: flex-start; padding-left: 16px; }
.row.trow-h::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--line-strong)); opacity: .85; }
.trow-h .row-main { min-width: 0; }
.trow-h .th-lotline { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; overflow-wrap: anywhere; }
.trow-h .th-lotline b { font-size: 14.5px; font-weight: 850; letter-spacing: 0; text-transform: none; color: var(--text); }
.trow-h .row-title { white-space: normal; line-height: 1.25; font-size: 16.5px; }
.trow-h .row-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.trow-h .th-bld { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.trow-h .th-bld .bicon, .trow-h .th-bld img { width: 14px; height: 14px; border-radius: 3px; margin: 0; }
.trow-h .th-crew { display: inline-flex; align-items: center; gap: 5px; }
.trow-h .th-crew .lead-dot { width: 7px; height: 7px; margin: 0; }
.trow-h .sep { color: var(--muted); }
.trow-h .row-end { padding-top: 2px; }

/* Desktop, old look: tracker List / Table switch; hybrid rows read comfortably on a wide screen */
.toggle-group.trk-view { display: inline-flex; margin-left: auto; }
.toggle-group.trk-view button { padding: 5px 12px; font-size: 13px; }
@media (min-width: 900px) {
  .row.trow-h { padding: 12px 18px 12px 20px; gap: 14px; }
  .trow-h .row-title { font-size: 17px; }
  .trow-h .row-end { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
  .trow-h .row-end .row-crew { order: 0; }
}

/* Tracker tables: thin crew-color line down the left of each task (like the task rows) */
.tbl.wc tbody tr[data-act="task"] td.ck { position: relative; }
.tbl.wc tbody tr[data-act="task"] td.ck::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--line-strong)); opacity: .85; }
.tbl.wc td.lot-old b { font-weight: 800; color: var(--text); }
/* Hybrid rows: lot · jobsite share the top line, which runs the full width of the row (status / price drop to the task line) */
.row.trow-h { flex-wrap: wrap; row-gap: 0; }
.trow-h .th-lotline { flex: 1 0 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; letter-spacing: .03em; }
.row.trow-h:has(> .check) .th-lotline { flex-basis: calc(100% - 44px); }
.trow-h .th-lotline .js { font-weight: 800; color: var(--text-2); }
.trow-h .th-lotline .sep { margin: 0 1px; }
.trow-h .th-lotline .held-pill { text-transform: none; letter-spacing: 0; }
.trow-h .row-main { flex: 1 1 0; }

/* Calendar: jobsites line under each crew bar */
.crew-sites { display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-size: 12.5px; color: var(--text-2); background: color-mix(in srgb, var(--c) 10%, var(--surface)); border-bottom: 1px solid color-mix(in srgb, var(--c) 25%, var(--line)); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.crew-sites::-webkit-scrollbar { display: none; }
.crew-sites .cs { display: inline-flex; align-items: center; gap: 5px; font-weight: 450; }
.crew-sites .cs b { font-weight: 850; color: var(--text); }
.crew-sites .cs em { font-style: normal; font-weight: 600; color: var(--muted); }
.crew-sites .cs-t { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 65%, var(--text)); margin-right: 2px; }
.crew-sites .cs-sep { color: var(--muted); }
/* Calendar: day squares close to square, but a busy day grows taller instead of its crew boxes spilling over (26.4.163) */
.cal-grid { container-type: inline-size; }
.cal-cell { min-height: max(54px, calc(100cqw / 7)); }
.cal.no-wknd .cal-cell { min-height: max(54px, calc(100cqw / 5 * .8)); }
@media (min-width: 900px) { .cal-cell { min-height: max(112px, calc(100cqw / 7 * .9)); overflow: visible; } .cal.no-wknd .cal-cell { min-height: max(112px, calc(100cqw / 5 * .75)); } }

/* Invoices: Select mode bar */
.inv-selbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.inv-selbar b { margin-right: auto; }
.tbl.doc th.ck, .tbl.doc td.ck { width: 40px; }
.tbl.doc tbody tr.sel, .row.sel { background: var(--accent-soft); }


/* Company page header card (26.4.169, both looks) */
.cx-hero { position: relative; display: flex; gap: 18px; align-items: center; margin-bottom: 14px; padding: 20px 22px 20px 26px; border-radius: 18px; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.cx-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.cx-logo { flex: none; width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); font-size: 26px; font-weight: 900; color: var(--accent); }
.cx-logo img { width: 80%; height: 80%; object-fit: contain; }
.cx-id { min-width: 0; }
.cx-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cx-name { font-size: 30px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; color: var(--text); margin: 2px 0 4px; }
.cx-addr { font-size: 14px; color: var(--text-2); }
.cx-btns { margin-left: auto; display: flex; gap: 8px; }
.cx-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; font-size: 11.5px; font-weight: 700; color: var(--text-2); text-decoration: none; }
.cx-btn i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent); }
.cx-btn i svg { width: 19px; height: 19px; }
.cx-btn.pri i { background: var(--accent); color: var(--accent-ink); border: 0; }
@media (max-width: 899px) {
  .cx-hero { flex-wrap: wrap; padding: 16px 16px 16px 20px; gap: 14px; } .cx-logo { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
  .cx-name { font-size: 24px; } .cx-btns { margin: 0; width: 100%; justify-content: space-around; }
}

/* Header card (26.4.170): crew color tint, wraps cleanly inside sheets */
.cx-hero { --hcc: var(--hc, var(--accent)); flex-wrap: wrap; background: linear-gradient(120deg, color-mix(in srgb, var(--hcc) 16%, var(--surface)) 0%, var(--surface) 70%); border-color: color-mix(in srgb, var(--hcc) 30%, var(--line)); }
.cx-hero::before { background: var(--hcc); }
.cx-hero .cx-logo { color: var(--hcc); }
.cx-hero .cx-btn i { color: var(--hcc); }
.cx-hero .cx-btn.pri i { background: var(--hcc); color: var(--hc-ink, var(--accent-ink)); }
.cx-hero .cx-btn i svg { fill: none; stroke: currentColor; }
.cx-id { flex: 1 1 220px; }
.cx-btns { flex-wrap: wrap; }
.sheet .cx-hero, #sheet-body .cx-hero { padding: 16px 16px 16px 20px; gap: 14px; }
#sheet-body .cx-logo { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
#sheet-body .cx-name { font-size: 24px; }
#sheet-body .cx-btns { margin: 0; width: 100%; justify-content: flex-start; gap: 6px; }

/* Crew color picker (26.4.173) */
.color-pick { gap: 8px; }
.color-pick .sw-btn { width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.color-pick .sw-btn.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--text); }
.color-pick[data-twin] .sw-btn { width: 46px; border-radius: 17px; }
.color-pick .sw-theme { height: 34px; }
.cp-sub { display: block; margin: 10px 0 6px; font-size: 12px; color: var(--muted); }

/* ---------- Spotify (26.4.174): built for NEW UI — #121212 app, black menu, #181818 cards, green #ffc72c, white pill buttons ---------- */
body.theme-spotify {
  --bg: #121212; --surface: #181818; --surface-2: #282828; --line: rgba(255,255,255,.07); --line-strong: rgba(255,255,255,.14);
  --text: #ffffff; --text-2: #b3b3b3; --muted: #a7a7a7;
  --accent: #ffc72c; --accent-ink: #000000; --accent-soft: rgba(255,199,44,.16);
  --ok: #1ed760; --ok-soft: rgba(30,215,96,.16); --warn: #ffa42b; --warn-soft: rgba(255,164,43,.15); --bad: #f15e6c; --bad-soft: rgba(241,94,108,.16); --info: #509bf5; --info-soft: rgba(80,155,245,.16);
  --bar: #000000; --side: #000000; --shadow: 0 8px 24px rgba(0,0,0,.5); --r: 10px;
  color-scheme: dark;
}
body.theme-spotify .view { background: linear-gradient(180deg, rgba(255,199,44,.16) 0, rgba(255,199,44,0) 340px); }
body.theme-spotify .btn { border-radius: 999px; font-weight: 700; border-color: #727272; }
body.theme-spotify .btn:hover { border-color: #fff; transform: scale(1.02); }
body.theme-spotify .btn.primary { background: #ffc72c; border-color: #ffc72c; color: #000; }
body.theme-spotify .btn.primary:hover { background: #ffd451; border-color: #ffd451; }
body.theme-spotify .list, body.theme-spotify .card, body.theme-spotify .stat { border-color: transparent; }
body.theme-spotify .row:hover, body.theme-spotify .tbl.wc tbody tr:hover { background: #282828; }
body.theme-spotify input, body.theme-spotify select, body.theme-spotify textarea { background: #242424; border-color: transparent; border-radius: 999px; }
body.theme-spotify textarea { border-radius: 12px; }
body.theme-spotify input:focus, body.theme-spotify select:focus, body.theme-spotify textarea:focus { box-shadow: 0 0 0 2px #fff; }
body.theme-spotify .chip, body.theme-spotify .toggle-group button { border-radius: 999px; background: #232323; border-color: transparent; color: #fff; font-weight: 650; }
body.theme-spotify .chip.on, body.theme-spotify .toggle-group button.on { background: #fff; color: #000; }
body.theme-spotify .group-h.date-h, body.theme-spotify .wc-day > .group-h { background: #1f1f1f; color: #fff; }
body.theme-spotify .dh-title, body.theme-spotify .group-h a { color: #fff; }
/* NEW UI on Spotify: monochrome menu like the app, green only for what's active */
body.theme-spotify.new-ui [data-sec] { --sc: #b3b3b3; }
body.theme-spotify.new-ui .sidebar { background: #000; }
body.theme-spotify.new-ui .side-sec { color: #b3b3b3; } body.theme-spotify.new-ui .side-sec::before { background: #ffc72c; }
body.theme-spotify.new-ui .side-item { color: #b3b3b3; } body.theme-spotify.new-ui .side-item:hover { color: #fff; background: #1a1a1a; }
body.theme-spotify.new-ui .side-item svg { background: #1f1f1f; color: #b3b3b3; }
body.theme-spotify.new-ui .side-item.on { color: #fff; background: #1f1f1f; box-shadow: none; }
body.theme-spotify.new-ui .side-item.on::before { background: #ffc72c; }
body.theme-spotify.new-ui .side-item.on svg { background: #ffc72c; color: #000; }
body.theme-spotify.new-ui .side-new { background: #fff; color: #000; box-shadow: none; }
body.theme-spotify.new-ui .tabbar { background: linear-gradient(180deg, rgba(0,0,0,.85), #000); border-radius: 0; box-shadow: none; }
body.theme-spotify.new-ui .tab.on { color: #fff; } body.theme-spotify.new-ui .tab.on > svg { background: transparent; color: #fff; }
body.theme-spotify.new-ui .tab-add-circle { border-radius: 50%; background: #ffc72c; color: #000; box-shadow: 0 8px 18px -6px rgba(255,199,44,.6), 0 0 0 4px #000; }
body.theme-spotify.new-ui .row.trow-m { background: #181818; } body.theme-spotify.new-ui .row.trow-m:hover { background: #282828; }
body.theme-spotify .cx-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--hcc) 45%, #121212) 0%, #181818 75%); border-color: transparent; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
body.theme-spotify .cx-hero .cx-name { font-size: 34px; letter-spacing: -.03em; }
body.theme-spotify .add-t { background: #181818; border-color: transparent; } body.theme-spotify .add-t:hover { background: #282828; }
body.theme-spotify .add-t.hero { background: #ffc72c; color: #000; }

/* Spotify buttons (26.4.176): hover = grow a touch + slightly darker; press = shrink, then spring back */
body.theme-spotify :is(.btn, .side-new, .add-t, .cx-btn i, .tab-add-circle, .chip, .toggle-group button, .theme-btn, .stat, .icon-btn) {
  transition: transform .2s cubic-bezier(.3,0,0,1), filter .15s ease, background-color .15s ease, border-color .15s ease !important; will-change: transform; }
body.theme-spotify :is(.btn, .side-new, .add-t, .chip, .toggle-group button, .theme-btn, .icon-btn):hover,
body.theme-spotify .cx-btn:hover i, body.theme-spotify .tab-add:hover .tab-add-circle { transform: scale(1.04); filter: brightness(.88); }
body.theme-spotify :is(.btn, .side-new, .add-t, .chip, .toggle-group button, .theme-btn, .icon-btn):active,
body.theme-spotify .cx-btn:active i, body.theme-spotify .tab-add:active .tab-add-circle { transform: scale(.96); filter: brightness(.75); transition-duration: .08s !important; }
body.theme-spotify .btn.primary:hover { background: #ffc72c; border-color: #ffc72c; }
body.theme-spotify .btn:disabled, body.theme-spotify .btn[disabled] { transform: none; filter: none; }

/* Spotify side menu (26.4.177): no highlight boxes — black background stays; items grow/darken on hover, shrink on press */
body.theme-spotify .side-item, body.theme-spotify .side-item:hover, body.theme-spotify .side-item.on,
body.theme-spotify.new-ui .side-item, body.theme-spotify.new-ui .side-item:hover, body.theme-spotify.new-ui .side-item.on { background: transparent !important; box-shadow: none !important; }
body.theme-spotify .side-item { transform-origin: left center; transition: transform .2s cubic-bezier(.3,0,0,1), filter .15s ease, color .15s ease; will-change: transform; }
body.theme-spotify .side-item:hover { transform: scale(1.04); filter: brightness(.88); color: #fff; }
body.theme-spotify .side-item:active { transform: scale(.96); filter: brightness(.75); transition-duration: .08s; }
body.theme-spotify .side-item.on { color: #fff; font-weight: 800; }
body.theme-spotify.nav-collapsed .side-item { transform-origin: center; }

/* Billing check full screen + sessions (26.4.178) */
.sheet-wrap:has(.sheet.full) { align-items: stretch; }
.sheet.full, .sheet.wide.full, .sheet.wide.full:has(.bc-steps) { width: 100vw !important; max-width: none !important; height: 100dvh; max-height: 100dvh !important; border-radius: 0 !important; animation: fade .15s ease; }
.sheet.full .sheet-grab { display: none; }
.sheet.full #sheet-body { padding-left: max(16px, calc((100vw - 1500px) / 2)); padding-right: max(16px, calc((100vw - 1500px) / 2)); }
.sheet.full .bc-steps { position: sticky; top: 0; z-index: 2; background: var(--bg); padding-bottom: 8px; }
@media (min-width: 1100px) {
  .sheet.full .bc-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; }
  .sheet.full .bc-body > :not(.bc-card):not(.bc-grp) { grid-column: 1 / -1; }
}
.bc-batch-note { margin: 6px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 13.5px; }
.bc-resume { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.bc-resume > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; } .bc-resume span { font-size: 13px; color: var(--text-2); }
.bc-sess .check-label { margin: 6px 0; }

/* Minimize windows into a dock (26.4.179) */
.sheet-head { grid-template-columns: auto 1fr auto; }
.sh-left { display: flex; align-items: center; gap: 2px; min-width: 80px; }
.sheet-min { width: 32px; height: 32px; border-radius: 8px; font-size: 20px; font-weight: 800; line-height: 1; color: var(--text-2); }
.sheet-min:hover { background: var(--surface-2); color: var(--text); }
.min-dock { position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(var(--tab-h) + var(--safe-b) + 10px); display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
@media (min-width: 900px) { .min-dock { left: calc(var(--side-w, 196px) + 16px); bottom: 16px; } body.new-ui:not(.nav-collapsed) .min-dock { left: 246px; } body.nav-collapsed .min-dock { left: 84px; } }
.min-chip { pointer-events: auto; display: flex; align-items: center; border-radius: 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); overflow: hidden; }
.min-open { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; font-weight: 750; color: var(--text); }
.min-open .min-ic { color: var(--accent); font-size: 14px; }
.min-open:hover { background: var(--surface-2); }
.min-x { padding: 10px 12px; color: var(--muted); font-size: 18px; line-height: 1; border-left: 1px solid var(--line); }
.min-x:hover { color: var(--bad); background: var(--surface-2); }
@media (max-width: 899px) { body:has(#sheet-wrap:not([hidden])) .min-dock { bottom: calc(var(--safe-b) + 10px); } }

/* Spotify buttons, toned down (26.4.180): smaller grow/shrink, lighter darkening, quicker and no overshoot */
body.theme-spotify :is(.btn, .side-new, .add-t, .cx-btn i, .tab-add-circle, .chip, .toggle-group button, .theme-btn, .stat, .icon-btn, .side-item) {
  transition: transform .12s ease-out, filter .12s ease-out, background-color .12s ease, border-color .12s ease, color .12s ease !important; }
body.theme-spotify :is(.btn, .side-new, .add-t, .chip, .toggle-group button, .theme-btn, .icon-btn):hover,
body.theme-spotify .cx-btn:hover i, body.theme-spotify .tab-add:hover .tab-add-circle { transform: scale(1.02); filter: brightness(.94); }
body.theme-spotify :is(.btn, .side-new, .add-t, .chip, .toggle-group button, .theme-btn, .icon-btn):active,
body.theme-spotify .cx-btn:active i, body.theme-spotify .tab-add:active .tab-add-circle { transform: scale(.98); filter: brightness(.88); transition-duration: .06s !important; }
body.theme-spotify .side-item:hover { transform: scale(1.01); filter: brightness(.95); }
body.theme-spotify .side-item:active { transform: scale(.99); filter: brightness(.9); transition-duration: .06s !important; }
/* Billing check steps bar (26.4.181): solid all the way across and up to the header, so nothing scrolls visibly above or beside it */
.sheet.full .bc-steps { top: -16px; margin-top: -16px; padding: 16px 0 10px; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg), 0 1px 0 100vmax var(--line); clip-path: inset(0 -100vmax -1px); z-index: 5; }

/* Quick bill check (Beta, 26.4.182) */
.qb { max-width: 820px; margin: 0 auto; }
.qb-prog { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.qb-prog-fill { height: 100%; background: var(--accent); transition: width .25s ease; }
.qb-count { display: flex; align-items: center; gap: 12px; margin: 10px 2px 16px; font-size: 15px; color: var(--text-2); flex-wrap: wrap; }
.qb-count b { color: var(--text); font-size: 18px; } .qb-count span { font-size: 13px; color: var(--muted); } .qb-count .btn { margin-left: auto; }
.qb-card { position: relative; padding: 18px 18px 18px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: qbIn .18s ease-out; }
.qb-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 18px 0 0 18px; background: var(--cbg, var(--c)); }
@keyframes qbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qb-task { display: flex; gap: 16px; align-items: flex-start; }
.qb-lot { flex: none; min-width: 76px; text-align: center; } .qb-lot span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--muted); } .qb-lot b { display: block; font-size: 34px; font-weight: 900; line-height: 1; color: var(--text); overflow-wrap: anywhere; }
.qb-main { flex: 1; min-width: 0; } .qb-tname { font-size: 22px; font-weight: 850; color: color-mix(in srgb, var(--c) 70%, var(--text)); line-height: 1.2; }
.qb-site { font-size: 16px; font-weight: 750; color: var(--text); margin-top: 3px; } .qb-meta { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.qb-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .qb-price b { font-size: 20px; color: var(--text); }
.qb-arrow { margin: 18px 2px 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qb-line { display: block; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.qb-line.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: var(--accent-soft); }
.qb-line:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.qb-ln-top { display: flex; gap: 6px; align-items: baseline; font-size: 14px; color: var(--text-2); flex-wrap: wrap; } .qb-ln-top b { color: var(--text); } .qb-amt { margin-left: auto; font-weight: 800; color: var(--text); }
.qb-ln-raw { margin-top: 4px; font-size: 15px; color: var(--text); } .qb-why { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qb-other { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); } .qb-other-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qb-find { width: 100%; margin-top: 10px; }
.qb-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.qb-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.qb-btn b { font-size: 16px; font-weight: 850; } .qb-btn span { font-size: 11.5px; color: var(--muted); }
.qb-btn.yes { background: var(--ok); border-color: var(--ok); color: #04150a; } .qb-btn.yes span { color: rgba(0,0,0,.6); }
.qb-btn.no { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); } .qb-btn.no b { color: var(--warn); }
.qb-btn.skipb b { color: var(--muted); } .qb-btn:disabled { opacity: .35; }
.qb-btn:hover:not(:disabled) { filter: brightness(1.06); }
.qb-foot { text-align: center; margin-top: 8px; }
.qb-done { text-align: center; padding: 40px 10px; } .qb-done-ic { width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: var(--ok); color: #04150a; }
@media (max-width: 640px) { .qb-acts { grid-template-columns: 1fr 1fr; } .qb-task { flex-wrap: wrap; } .qb-price { flex-direction: row; width: 100%; justify-content: space-between; } .qb-tname { font-size: 19px; } .qb-lot b { font-size: 28px; } }

/* Quick bill check: VendorSuite button (26.4.183) */
.qb-acts { grid-template-columns: repeat(5, 1fr); }
.qb-btn.vs { border-color: color-mix(in srgb, var(--info) 55%, var(--line)); } .qb-btn.vs b { color: var(--info); }
@media (max-width: 900px) { .qb-acts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .qb-acts { grid-template-columns: 1fr 1fr; } }

/* Spotify phone + button (26.4.184): keeps its raised spot (NEW UI lifts it 12px) — barely moves on a mouse, doesn't move at all on touch screens */
body.theme-spotify .tab-add:hover .tab-add-circle { transform: scale(1.02); }
body.theme-spotify .tab-add:active .tab-add-circle { transform: scale(.99); filter: brightness(.94); }
body.theme-spotify.new-ui .tab-add .tab-add-circle, body.theme-spotify.new-ui .tab-add:hover .tab-add-circle { transform: translateY(-12px); }
body.theme-spotify.new-ui .tab-add:hover .tab-add-circle { transform: translateY(-12px) scale(1.02); }
body.theme-spotify.new-ui .tab-add:active .tab-add-circle { transform: translateY(-12px) scale(.99); }
@media (hover: none), (pointer: coarse) {
  body.theme-spotify .tab-add .tab-add-circle, body.theme-spotify .tab-add:hover .tab-add-circle, body.theme-spotify .tab-add:active .tab-add-circle { transform: none !important; filter: none !important; }
  body.theme-spotify.new-ui .tab-add .tab-add-circle, body.theme-spotify.new-ui .tab-add:hover .tab-add-circle, body.theme-spotify.new-ui .tab-add:active .tab-add-circle { transform: translateY(-12px) !important; }
}
/* Minimize windows removed (26.4.184) */
.sheet-min, .min-dock { display: none !important; }

/* ---------- Apple Music (26.4.185): white app, frosted-glass sidebar / top bar / bottom bar, Apple Music red #1a9e4b, SF type ---------- */
body.theme-applemusic {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f7; --line: rgba(60,60,67,.12); --line-strong: rgba(60,60,67,.22);
  --text: #1d1d1f; --text-2: #3c3c43; --muted: #86868b;
  --accent: #1a9e4b; --accent-ink: #ffffff; --accent-soft: rgba(26,158,75,.10);
  --ok: #28a745; --ok-soft: rgba(40,167,69,.12); --warn: #ff9500; --warn-soft: rgba(255,149,0,.13); --bad: #ff3b30; --bad-soft: rgba(255,59,48,.11); --info: #5e5ce6; --info-soft: rgba(94,92,230,.11);
  --bar: rgba(255,255,255,.72); --side: rgba(246,246,248,.78); --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px -8px rgba(0,0,0,.12); --r: 12px;
  --glass: saturate(1.8) blur(24px);
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", sans-serif;
  background: #fff;
}
/* soft color glow behind the glass, like album art bleeding through */
body.theme-applemusic::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 8% 70%, rgba(26,158,75,.10), transparent 70%), radial-gradient(35% 30% at 14% 40%, rgba(255,170,90,.12), transparent 70%), radial-gradient(45% 40% at 95% 100%, rgba(175,110,255,.10), transparent 70%); }
body.theme-applemusic .sidebar { background: var(--side); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-right: 1px solid var(--line); }
body.theme-applemusic .topbar { background: rgba(255,255,255,.7); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-bottom: 1px solid rgba(60,60,67,.08); }
body.theme-applemusic .topbar h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
body.theme-applemusic .side-item { border-radius: 10px; font-weight: 500; color: var(--text); }
body.theme-applemusic .side-item svg { color: var(--accent); }
body.theme-applemusic .side-item:hover { background: rgba(60,60,67,.06); }
body.theme-applemusic .side-item.on { background: rgba(60,60,67,.09); color: var(--text); font-weight: 600; box-shadow: none; }
body.theme-applemusic .side-item.on svg { color: var(--accent); }
body.theme-applemusic .side-sec { color: var(--muted); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13px; }
body.theme-applemusic .side-new { background: var(--accent); color: #fff; border-radius: 12px; box-shadow: 0 6px 16px -6px rgba(26,158,75,.55); }
body.theme-applemusic .tabbar { background: rgba(250,250,252,.72); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-top: 1px solid rgba(60,60,67,.1); }
body.theme-applemusic .tab.on { color: var(--accent); }
body.theme-applemusic .tab-add-circle { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(26,158,75,.6); }
body.theme-applemusic .section-h h2, body.theme-applemusic .form-section { font-size: 20px; font-weight: 800; letter-spacing: -.015em; text-transform: none; color: var(--text); }
body.theme-applemusic .form-section { font-size: 15px; }
body.theme-applemusic .list, body.theme-applemusic .card, body.theme-applemusic .stat { background: rgba(255,255,255,.82); border-color: rgba(60,60,67,.1); box-shadow: var(--shadow); }
body.theme-applemusic .row:hover { background: rgba(60,60,67,.04); }
body.theme-applemusic .btn { border-radius: 10px; font-weight: 600; background: rgba(120,120,128,.12); border-color: transparent; color: var(--text); }
body.theme-applemusic .btn:hover { background: rgba(120,120,128,.18); }
body.theme-applemusic .btn.primary { background: var(--accent); color: #fff; }
body.theme-applemusic .btn.primary:hover { background: #e8233e; }
body.theme-applemusic .btn.link { background: none; color: var(--accent); }
body.theme-applemusic input, body.theme-applemusic select, body.theme-applemusic textarea { background: rgba(118,118,128,.12); border-color: transparent; border-radius: 10px; }
body.theme-applemusic input:focus, body.theme-applemusic select:focus, body.theme-applemusic textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(26,158,75,.25); border-color: rgba(26,158,75,.5); }
body.theme-applemusic .chip, body.theme-applemusic .toggle-group button { border-radius: 999px; background: rgba(118,118,128,.12); border-color: transparent; color: var(--text); font-weight: 600; }
body.theme-applemusic .chip.on, body.theme-applemusic .toggle-group button.on { background: var(--accent); color: #fff; }
/* windows = frosted glass sheets over a blurred page */
body.theme-applemusic .sheet-backdrop { background: rgba(0,0,0,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.theme-applemusic .sheet { background: rgba(255,255,255,.86); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); }
body.theme-applemusic .sheet.full { background: rgba(255,255,255,.94); }
body.theme-applemusic .sheet-head { border-bottom-color: rgba(60,60,67,.1); }
body.theme-applemusic .group-h.date-h, body.theme-applemusic .wc-day > .group-h { background: rgba(242,242,247,.85); color: var(--text); }
body.theme-applemusic .dh-title { color: var(--text); }
/* header cards: glass with a red wash */
body.theme-applemusic .cx-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--hcc) 14%, rgba(255,255,255,.7)) 0%, rgba(255,255,255,.7) 70%); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-color: rgba(60,60,67,.1); box-shadow: var(--shadow); }
body.theme-applemusic .cx-hero .cx-name { letter-spacing: -.025em; }
body.theme-applemusic .add-t { background: rgba(255,255,255,.75); border-color: rgba(60,60,67,.1); box-shadow: var(--shadow); }
body.theme-applemusic .add-t.hero { background: var(--accent); color: #fff; }
body.theme-applemusic .add-t.hero svg { color: #fff; }
/* NEW UI on Apple Music: plain red icons in the sidebar (no rainbow tiles), red phone tabs */
body.theme-applemusic.new-ui [data-sec] { --sc: #1a9e4b; }
body.theme-applemusic.new-ui .sidebar { background: var(--side); }
body.theme-applemusic.new-ui .side-item svg { background: transparent; color: var(--accent); padding: 5px; }
body.theme-applemusic.new-ui .side-item.on { background: rgba(60,60,67,.09); box-shadow: none; }
body.theme-applemusic.new-ui .side-item.on::before { display: none; }
body.theme-applemusic.new-ui .side-item.on svg { background: transparent; color: var(--accent); }
body.theme-applemusic.new-ui .side-sec::before { display: none; } body.theme-applemusic.new-ui .side-sec::after { background: none; }
body.theme-applemusic.new-ui .side-new { background: var(--accent); }
body.theme-applemusic.new-ui .tabbar { border-radius: 0; background: rgba(250,250,252,.72); box-shadow: none; }
body.theme-applemusic.new-ui .tab.on > svg { background: transparent; color: var(--accent); }
body.theme-applemusic.new-ui .tab-add-circle { border-radius: 50%; background: var(--accent); box-shadow: 0 8px 18px -6px rgba(26,158,75,.55), 0 0 0 4px #fff; }
body.theme-applemusic.new-ui .row.trow-m { background: rgba(255,255,255,.85); }
body.theme-applemusic .wc-day .group-h, body.theme-applemusic .grp-box > .group-h, body.theme-applemusic .cal-day-box .group-h { background: rgba(242,242,247,.9) !important; color: var(--text); }
body.theme-applemusic .wc-day .group-h .dh-title, body.theme-applemusic .cal-day-box .group-h { color: var(--text); }

/* Task header date button (26.4.186) */
.th-due-btn { position: relative; cursor: pointer; border-radius: 12px; padding-top: 6px; padding-bottom: 6px; transition: background .12s; }
.th-due-btn:hover { background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); }
.th-due-btn em { white-space: nowrap; }
.th-date-in { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.th-date-in::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Invoice preview (26.4.187) — paper look, same in every theme */
#sheet-body:not(.view-mode) .ip-wrap { display: none; }
#sheet-body.view-mode .inv-form > :not(.actions):not(.status-steps):not(.steps):not(.field-err):not(p):not(.ip-wrap):not(.block) { display: none; }
#sheet-body.view-mode .inv-form > .actions { display: none; }
.ip-wrap { margin-bottom: 16px; }
.ip-bar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 10px; }
.ip-tag { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ip-sub { font-size: 12.5px; color: var(--muted); }
.ip-paper { position: relative; overflow: hidden; cursor: pointer; background: #fff; color: #1d1d1f; border-radius: 6px; padding: 28px 30px 24px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 32px -12px rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .15s ease; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }
.ip-paper:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 40px -12px rgba(0,0,0,.4); }
.ip-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, #2f7d32, #79b347); }
.ip-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ip-logo { height: 54px; width: auto; display: block; margin-bottom: 8px; }
.ip-logo-txt { font-weight: 900; font-size: 22px; letter-spacing: .04em; margin-bottom: 6px; }
.ip-co { font-size: 11px; line-height: 1.5; color: #555; }
.ip-title { text-align: right; }
.ip-title h1 { margin: 0 0 8px; font-size: 30px; font-weight: 900; letter-spacing: .08em; color: #1d1d1f; }
.ip-meta { margin-left: auto; border-collapse: collapse; font-size: 13px; } .ip-meta td { padding: 2px 0 2px 14px; color: #555; } .ip-meta td:last-child { color: #1d1d1f; text-align: right; } .ip-meta td.late { color: #d12c2c; font-weight: 700; }
.ip-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 18px; padding: 14px 16px; background: #f6f7f6; border-radius: 8px; }
.ip-parties span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-bottom: 3px; }
.ip-parties b { display: block; font-size: 15.5px; color: #1d1d1f; } .ip-parties em { display: block; font-style: normal; font-size: 13px; color: #555; margin-top: 2px; }
.ip-lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ip-lines th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; padding: 8px 6px; border-bottom: 2px solid #1d1d1f; }
.ip-lines td { padding: 9px 6px; border-bottom: 1px solid #e5e7eb; color: #1d1d1f; vertical-align: top; }
.ip-lines .r { text-align: right; white-space: nowrap; } .ip-empty { color: #888; text-align: center; }
.ip-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 24px; margin-top: 12px; padding-top: 10px; }
.ip-total span { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; } .ip-total b { font-size: 26px; font-weight: 900; color: #1d1d1f; }
.ip-notes { margin-top: 14px; padding: 10px 12px; border-left: 3px solid #79b347; background: #f8faf6; font-size: 13px; color: #333; white-space: pre-wrap; }
.ip-fine { margin-top: 16px; font-size: 10px; line-height: 1.5; color: #8a8a8a; }
.ip-stamp { position: absolute; left: 50%; top: 52px; transform: translateX(-50%) rotate(-12deg); border: 3px solid currentColor; border-radius: 8px; padding: 4px 12px; font-size: 22px; font-weight: 900; letter-spacing: .1em; opacity: .85; text-align: center; line-height: 1.05; pointer-events: none; }
.ip-stamp small { display: block; font-size: 11px; letter-spacing: .04em; }
.ip-stamp.paid { color: #1a8f4b; } .ip-stamp.late { color: #d12c2c; } .ip-stamp.sent { color: #b45309; } .ip-stamp.draft { color: #9ca3af; }
@media (max-width: 640px) { .ip-paper { padding: 22px 16px 18px; } .ip-title { text-align: left; } .ip-meta { margin-left: 0; } .ip-meta td { padding-left: 0; padding-right: 14px; } .ip-parties { grid-template-columns: 1fr; } .ip-stamp { top: 16px; right: 14px; left: auto; transform: rotate(-12deg); font-size: 16px; } .ip-lines { font-size: 12.5px; } .ip-lines th:nth-child(3), .ip-lines td:nth-child(3) { display: none; } }

/* Task card (26.4.189): bigger action tiles + roadmap */
.wiz-a { grid-template-columns: 1.35fr 1fr; gap: 14px; }
.wiz-a .wiz-tile { min-height: 150px; padding: 20px; border-radius: 18px; gap: 6px; }
.wiz-a .wiz-tile b { font-size: 19px; margin-top: 8px; } .wiz-a .wiz-s { font-size: 14px; color: var(--muted); }
.wiz-a .wiz-ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.wiz-a .wiz-ico svg { width: 24px; height: 24px; }
.wiz-a .wiz-tile.pri { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); color: var(--accent-ink, #fff); border: 0; box-shadow: 0 12px 26px -12px var(--accent); }
.wiz-a .wiz-tile.pri .wiz-ico { background: rgba(255,255,255,.2); color: inherit; } .wiz-a .wiz-tile.pri .wiz-s { color: inherit; opacity: .85; }
.wiz-a .wiz-tile.pri .badge { background: #fff; color: var(--accent); }
.road-card { margin: 18px 0 6px; padding: 18px 20px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.road-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.road-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.road-next { font-size: 13.5px; color: var(--muted); } .road-next b { color: var(--accent); }
.road { display: flex; align-items: flex-start; }
.rd { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 2px; background: none; border: 0; color: inherit; font: inherit; }
button.rd { cursor: pointer; } button.rd:hover b { color: var(--accent); }
.rd:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 19px); right: calc(-50% + 19px); height: 4px; border-radius: 2px; background: var(--line-strong, #ddd); }
.rd.ok:not(:last-child)::after { background: #22c55e; }
.rd-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--line-strong, #ddd); font-weight: 900; font-size: 14px; color: var(--muted); position: relative; z-index: 1; }
.rd-dot svg { width: 16px; height: 16px; }
.rd.ok .rd-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.rd.cur .rd-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
.rd b { margin-top: 8px; font-size: 14px; } .rd.cur b { color: var(--accent); }
.rd-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.road-card.bad .rd-dot { opacity: .6; }
@media (max-width: 600px) {
  .wiz-a { grid-template-columns: 1fr; gap: 10px; }
  .wiz-a .wiz-tile { min-height: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; }
  .wiz-a .wiz-ico { grid-row: span 2; width: 44px; height: 44px; } .wiz-a .wiz-tile b { margin: 0; align-self: end; font-size: 17px; } .wiz-a .wiz-s { align-self: start; font-size: 13px; }
  .road-card { padding: 16px 10px 16px; } .road-hd { padding: 0 6px; flex-wrap: wrap; }
  .rd-dot { width: 26px; height: 26px; font-size: 11.5px; border-width: 2.5px; } .rd-dot svg { width: 13px; height: 13px; }
  .rd:not(:last-child)::after { top: 11px; left: calc(50% + 15px); right: calc(-50% + 15px); height: 3px; }
  .rd b { font-size: 10.5px; margin-top: 6px; letter-spacing: -.01em; } .rd-sub { font-size: 9.5px; }
}
/* Task cards get the wider sheet on desktop (26.4.189) */
@media (min-width: 1000px) { .sheet:has(.task-hero) { width: min(920px, 92vw); } }
/* Card & section titles centered at the top (26.4.189) */
.wiz-q, .form-section, .pc-title, .svc-title { text-align: center; }
.pay-top .pc-title, .doc-sec-h { justify-content: center; text-align: center; }
.road-hd { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
.pnote-h { justify-content: center; text-align: center; } .pnote-h .muted { margin-left: 0; flex-basis: 100%; }

/* Tracker list rows (26.4.190): rounded inset side line like the calendar list, instead of the solid full-height bar */
.row.trow-m::before { top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; opacity: .9; }

/* Task card top row (26.4.191): header card on the left half, the two action tiles beside it (desktop) */
@media (min-width: 1000px) {
  .ts-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .ts-top > .task-hero { margin: 0; }
  .ts-acts { display: flex; flex-direction: column; min-width: 0; }
  .ts-acts .wiz-q { margin: 0 0 10px; }
  .ts-acts .wiz-a { flex: 1; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ts-acts .wiz-a .wiz-tile { min-height: 0; padding: 16px; justify-content: flex-end; }
  .ts-acts .wiz-a .wiz-ico { margin-bottom: auto; }
  .ts-acts .wiz-a .wiz-tile b { font-size: 17px; }
  .ts-top + .road-card { margin-top: 14px; }
}
/* Desktop tracker tables (26.4.192): no solid crew bar or crew tint — plain rows with the calendar list's rounded side line */
body.new-ui .tbl.wc.fit tbody tr[data-act=task] td.ck { box-shadow: none; }
body.new-ui .tbl.wc.fit tbody tr[data-act=task] { background: var(--surface); }
body.new-ui .tbl.wc.fit tbody tr[data-act=task]:hover { background: var(--surface-2); }
body.new-ui .tbl.wc.fit tbody tr[data-act=task].sel { background: var(--accent-soft); }
.tbl.wc tbody tr[data-act="task"] td.ck { position: relative; }
.tbl.wc tbody tr[data-act="task"] td.ck::before { top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--line-strong)); opacity: .85; }

/* Big date popup on the task card (26.4.193) */
.th-date-in { pointer-events: none; }
.dpop-wrap { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.45); animation: fade .15s ease; }
.dpop { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--surface); color: var(--text); border-radius: 22px; padding: 18px 18px 14px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.5); border: 1px solid var(--line); animation: pop .18s ease; }
.dp-top { display: flex; align-items: flex-start; gap: 12px; padding-left: 12px; border-left: 4px solid var(--c, var(--accent)); margin-bottom: 14px; }
.dp-top > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dp-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dp-top b { font-size: 17px; line-height: 1.25; } .dp-top em { font-style: normal; font-size: 13px; color: var(--muted); }
.dp-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.dp-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.dp-q { padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.dp-q:hover, .dp-q.on { border-color: var(--accent); color: var(--accent); }
.dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-nav b { font-size: 19px; }
.dp-nav button { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.dp-nav button svg { width: 18px; height: 18px; } .dp-nav .dp-r svg { transform: scaleX(-1); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-w { text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 0 6px; }
.dp-d { position: relative; aspect-ratio: 1; min-height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; font-weight: 650; cursor: pointer; display: grid; place-items: center; }
.dp-d:hover { background: var(--surface-2); }
.dp-d.out { color: var(--muted); opacity: .45; }
.dp-d.today span { color: var(--accent); font-weight: 900; } .dp-d.today::after { content: ""; position: absolute; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dp-d.sel { background: var(--c, var(--accent)); color: var(--ink, #fff); } .dp-d.sel span { color: inherit; } .dp-d.sel::after { background: currentColor; }
.dp-d i { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; background: color-mix(in srgb, var(--c, var(--accent)) 22%, var(--surface)); color: var(--text); }
.dp-foot { margin: 10px 2px 0; text-align: center; }
@media (max-width: 480px) { .dpop { padding: 16px 12px 12px; } .dp-q { font-size: 12.5px; } .dp-d { font-size: 16px; border-radius: 12px; } }
/* Look & Appearance (26.4.194): text size, weight, title style + the settings screen */
/* display size: zoom the contents (not the fixed frames) */
#view, #sheet-body, .sheet-head, .dpop, .topbar > *, .segbar > *, .tabbar > *, .sidebar > * { zoom: var(--uz, 1); }
body.ty-w-light { font-weight: 300; }
body.ty-w-medium { font-weight: 500; }
body.ty-w-bold { font-weight: 600; }
body.ty-w-light :is(b, strong) { font-weight: 650; }
body.ty-w-bold :is(b, strong, .row-title, h2, h3) { font-weight: 850; }
body.ty-h-heavy :is(#page-title, #sheet-title, h2, h3, .wiz-q, .section-h, .row-title, .th-task-name, .tm-task, .group-h b) { font-weight: 850; letter-spacing: -.025em; }
body.ty-h-heavy #page-title { font-weight: 900; }
body.ty-h-airy :is(#page-title, #sheet-title, h2, h3, .wiz-q, .section-h, .row-title, .th-task-name, .tm-task) { font-weight: 500; letter-spacing: .005em; }
body.ty-h-caps :is(#page-title, #sheet-title, .wiz-q, .section-h, h2, h3) { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.ap-row .add-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.ap-preview { display: flex; align-items: center; gap: 14px; margin: 4px 0 6px; padding: 16px 18px 16px 22px; border-radius: 18px; position: relative; overflow: hidden; background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 65%); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ap-preview::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.ap-pv-lot { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.ap-pv-lot span { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ap-pv-lot b { font-size: 36px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.ap-pv-main { flex: 1; min-width: 0; }
.ap-pv-t { font-size: 19px; font-weight: 800; color: var(--accent); } .ap-pv-t span { font-size: 14px; color: var(--muted); font-weight: 600; }
.ap-pv-s { font-size: 15.5px; font-weight: 700; } .ap-pv-m { font-size: 13px; color: var(--muted); }
.ap-pv-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .ap-pv-amt b { font-size: 18px; }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.font-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .12s, transform .12s; }
.font-btn:hover { border-color: var(--accent); }
.font-btn.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.font-btn b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.font-btn span { font-size: 14.5px; font-weight: 700; } .font-btn em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.3; }
.ap-seg { display: flex; flex-wrap: wrap; justify-content: center; }
.ap-seg button { flex: 1 1 0; min-width: 90px; }
@media (max-width: 480px) { .font-grid { grid-template-columns: 1fr 1fr; } .ap-pv-amt { display: none; } }
/* Look & Appearance cards (26.4.195): each group is a card with its title centered at the top */
.ap-card { margin-top: 14px; padding: 14px 16px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ap-card-h { text-align: center; margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ap-card .list { margin: 0; border: 0; box-shadow: none; background: transparent; }
.ap-card .list .row { padding-left: 4px; padding-right: 4px; background: transparent; }
.ap-card .theme-grid { margin: 0; }
.ap-card .font-btn { background: var(--surface-2); }
.ap-card .font-btn.on { background: var(--surface); }
/* Pop-up titles truly centered (26.4.196): equal side columns so the title sits in the middle no matter how wide Close / Save are */
.sheet-head { grid-template-columns: minmax(64px, 1fr) minmax(0, auto) minmax(64px, 1fr); column-gap: 8px; }
.sheet-head > h2 { grid-column: 2; text-align: center; }
.sheet-head > .sh-left { grid-column: 1; justify-self: start; min-width: 0; }
.sheet-head > #sheet-save { grid-column: 3; justify-self: end; }

/* Bid preview (26.4.197) — same paper as the invoice preview */

.ip-scope { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; background: #fafaf7; border-left: 3px solid #79b347; font-size: 13px; line-height: 1.5; color: #333; white-space: pre-wrap; }
.ip-scope span, .ip-other > span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; white-space: normal; }
.ip-other { margin-top: 20px; } .ip-other > span em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: #9ca3af; margin-left: 6px; }
.ip-other .ip-lines th { border-bottom-width: 1px; }
/* Task card action tiles (26.4.198): both start white; mouse over (or press on a phone) fills with the theme color */
.wiz-a .wiz-tile.pri { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.wiz-a .wiz-tile.pri .wiz-ico { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.wiz-a .wiz-tile.pri .wiz-s { color: var(--muted); opacity: 1; }
.wiz-a .wiz-tile.pri .badge { background: var(--accent); color: var(--accent-ink, #fff); }
.wiz-a .wiz-tile { transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease; }
@media (hover: hover) {
  .wiz-a .wiz-tile:hover, .wiz-a .wiz-tile.pri:hover { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); color: var(--accent-ink, #fff); border-color: transparent; box-shadow: 0 12px 26px -12px var(--accent); }
}
.wiz-a .wiz-tile:active, .wiz-a .wiz-tile:focus-visible { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); color: var(--accent-ink, #fff); border-color: transparent; box-shadow: 0 12px 26px -12px var(--accent); }
@media (hover: hover) { .wiz-a .wiz-tile:hover .wiz-ico { background: rgba(255,255,255,.2); color: inherit; } .wiz-a .wiz-tile:hover .wiz-s { color: inherit; opacity: .85; } .wiz-a .wiz-tile:hover .badge { background: #fff; color: var(--accent); } }
.wiz-a .wiz-tile:is(:active, :focus-visible) .wiz-ico { background: rgba(255,255,255,.2); color: inherit; }
.wiz-a .wiz-tile:is(:active, :focus-visible) .wiz-s { color: inherit; opacity: .85; }
/* Task card tiles (26.4.199): no glow/shadow when they fill on hover or press */
.wiz-a .wiz-tile:hover, .wiz-a .wiz-tile.pri:hover, .wiz-a .wiz-tile:active, .wiz-a .wiz-tile:focus-visible { box-shadow: none !important; }

/* Display size picker (26.4.200), macOS style */
.scale-pick { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; padding: 4px 0 2px; }
.sc-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit; position: relative; z-index: 1; }
.sc-win { width: 100%; max-width: 104px; aspect-ratio: 1.08; border-radius: 10px; overflow: hidden; background: #fff; color: #1d1d1f; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 3px rgba(0,0,0,.12); display: flex; flex-direction: column; text-align: left; transition: box-shadow .12s, transform .12s; }
.sc-opt:hover .sc-win { transform: translateY(-2px); }
.sc-opt.on .sc-win { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.sc-dots { display: flex; gap: 4px; padding: 6px 7px 5px; border-bottom: 1px solid #eee; }
.sc-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; } .sc-dots i:nth-child(2) { background: #febc2e; } .sc-dots i:nth-child(3) { background: #28c840; }
.sc-txt { padding: 5px 7px; line-height: 1.3; overflow: hidden; flex: 1; font-weight: 500; }
.sc-opt b { font-size: 14px; font-weight: 600; min-height: 1.3em; white-space: nowrap; }
.sc-opt.on b { font-weight: 850; }
.sc-line { position: absolute; left: 22%; right: 42%; bottom: .65em; height: 2px; border-radius: 1px; background: var(--line-strong); z-index: 0; }
@media (max-width: 480px) { .scale-pick { gap: 6px; } .sc-opt b { font-size: 11.5px; white-space: normal; text-align: center; } .sc-line { display: none; } }
.scale-pick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-opt { min-width: 0; } .sc-win { max-width: 104px; } .sc-txt { overflow-wrap: anywhere; }
.scale-pick { align-items: start; } @media (max-width: 480px) { .sc-opt b { min-height: 2.6em; } }

/* Contact header card (26.4.201): company logo underlaid in the bottom-right corner */
.cx-hero > .cx-mark { position: absolute; right: -14px; bottom: -22px; width: 150px; height: 150px; object-fit: contain; opacity: .13; pointer-events: none; z-index: 0; transform: rotate(-8deg); filter: saturate(.9); border-radius: 22px; }
.cx-hero > .cx-mark.small { image-rendering: auto; filter: blur(.3px) saturate(.9); }
.cx-hero.has-mark > :not(.cx-mark) { position: relative; z-index: 1; }
@media (max-width: 600px) { .cx-hero > .cx-mark { width: 110px; height: 110px; right: -10px; bottom: -16px; } }

/* Contact card company logo (26.4.202): large, tilted, running off the right edge */
.cx-hero > .cx-mark { right: -70px; bottom: auto; top: 50%; width: auto; height: 175%; max-width: 62%; aspect-ratio: 1; transform: translateY(-50%) rotate(-14deg); opacity: .16; border-radius: 18%; filter: none; }
.cx-hero > .cx-mark.small { filter: blur(.4px); }
body:is(.theme-dark, .theme-spotify, .theme-duckcamo, .theme-realtreecamo, .theme-duckcamolight) .cx-hero > .cx-mark { opacity: .2; }
@media (max-width: 600px) { .cx-hero > .cx-mark { right: -50px; height: 120%; width: auto; max-width: 60%; } }
@media (max-width: 600px) { .cx-hero > .cx-mark { right: -64px; height: 100%; max-width: 50%; } }

/* ───── Frosted glass on every theme (26.4.206) — the Apple-style blur, using each theme's own colors ───── */
html body { --glass: saturate(1.7) blur(22px); }
/* soft color glow behind the glass (theme accent + warm + violet), like the Light theme */
html body:not(.theme-applemusic):not(.theme-lightblue)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 8% 70%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
              radial-gradient(35% 30% at 14% 38%, rgba(255,170,90,.10), transparent 70%),
              radial-gradient(45% 40% at 95% 100%, rgba(175,110,255,.10), transparent 70%); }
/* bars: see-through + blur */
html body:not(.theme-applemusic):not(.theme-lightblue) .topbar { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
html body:not(.theme-applemusic):not(.theme-lightblue) .segbar { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
html body:not(.theme-applemusic):not(.theme-lightblue) .tabbar { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
@media (min-width: 900px) { html body:not(.theme-applemusic):not(.theme-lightblue) .sidebar { background: color-mix(in srgb, var(--side, var(--bg)) 78%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); } }
/* pop-ups: frosted sheet over a blurred page */
html body:not(.theme-applemusic):not(.theme-lightblue) .sheet-backdrop { background: rgba(0,0,0,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html body:not(.theme-applemusic):not(.theme-lightblue) .sheet { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
html body:not(.theme-applemusic):not(.theme-lightblue) .sheet.full { background: color-mix(in srgb, var(--bg) 94%, transparent); }
html body:not(.theme-applemusic):not(.theme-lightblue) .sheet-head { background: transparent; }
/* cards let a hint of the glow through (camo themes keep solid cards so the pattern doesn't fight the text) */
html body:not(.theme-applemusic):not(.theme-lightblue):not(.theme-duckcamo):not(.theme-realtreecamo):not(.theme-duckcamolight) :is(.list, .card, .stat, .add-t:not(.hero)) { background-color: color-mix(in srgb, var(--surface) 86%, transparent); }
html body:not(.theme-applemusic):not(.theme-lightblue) .cx-hero { backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }


/* ---------- Light Blue (26.4.207): copy of the Light (green) theme in blue #007AFF ---------- */
body.theme-lightblue {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f7; --line: rgba(60,60,67,.12); --line-strong: rgba(60,60,67,.22);
  --text: #1d1d1f; --text-2: #3c3c43; --muted: #86868b;
  --accent: #007aff; --accent-ink: #ffffff; --accent-soft: rgba(0,122,255,.10);
  --ok: #28a745; --ok-soft: rgba(40,167,69,.12); --warn: #ff9500; --warn-soft: rgba(255,149,0,.13); --bad: #ff3b30; --bad-soft: rgba(255,59,48,.11); --info: #5e5ce6; --info-soft: rgba(94,92,230,.11);
  --bar: rgba(255,255,255,.72); --side: rgba(246,246,248,.78); --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px -8px rgba(0,0,0,.12); --r: 12px;
  --glass: saturate(1.8) blur(24px);
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", sans-serif;
  background: #fff;
}
body.theme-lightblue::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 35% at 8% 70%, rgba(0,122,255,.10), transparent 70%), radial-gradient(35% 30% at 14% 40%, rgba(255,170,90,.12), transparent 70%), radial-gradient(45% 40% at 95% 100%, rgba(175,110,255,.10), transparent 70%); }
body.theme-lightblue .sidebar { background: var(--side); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-right: 1px solid var(--line); }
body.theme-lightblue .topbar { background: rgba(255,255,255,.7); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-bottom: 1px solid rgba(60,60,67,.08); }
body.theme-lightblue .topbar h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
body.theme-lightblue .side-item { border-radius: 10px; font-weight: 500; color: var(--text); }
body.theme-lightblue .side-item svg { color: var(--accent); }
body.theme-lightblue .side-item:hover { background: rgba(60,60,67,.06); }
body.theme-lightblue .side-item.on { background: rgba(60,60,67,.09); color: var(--text); font-weight: 600; box-shadow: none; }
body.theme-lightblue .side-item.on svg { color: var(--accent); }
body.theme-lightblue .side-sec { color: var(--muted); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 13px; }
body.theme-lightblue .side-new { background: var(--accent); color: #fff; border-radius: 12px; box-shadow: 0 6px 16px -6px rgba(0,122,255,.55); }
body.theme-lightblue .tabbar { background: rgba(250,250,252,.72); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-top: 1px solid rgba(60,60,67,.1); }
body.theme-lightblue .tab.on { color: var(--accent); }
body.theme-lightblue .tab-add-circle { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(0,122,255,.6); }
body.theme-lightblue .section-h h2, body.theme-lightblue .form-section { font-size: 20px; font-weight: 800; letter-spacing: -.015em; text-transform: none; color: var(--text); }
body.theme-lightblue .form-section { font-size: 15px; }
body.theme-lightblue .list, body.theme-lightblue .card, body.theme-lightblue .stat { background: rgba(255,255,255,.82); border-color: rgba(60,60,67,.1); box-shadow: var(--shadow); }
body.theme-lightblue .row:hover { background: rgba(60,60,67,.04); }
body.theme-lightblue .btn { border-radius: 10px; font-weight: 600; background: rgba(120,120,128,.12); border-color: transparent; color: var(--text); }
body.theme-lightblue .btn:hover { background: rgba(120,120,128,.18); }
body.theme-lightblue .btn.primary { background: var(--accent); color: #fff; }
body.theme-lightblue .btn.primary:hover { background: #0062cc; }
body.theme-lightblue .btn.link { background: none; color: var(--accent); }
body.theme-lightblue input, body.theme-lightblue select, body.theme-lightblue textarea { background: rgba(118,118,128,.12); border-color: transparent; border-radius: 10px; }
body.theme-lightblue input:focus, body.theme-lightblue select:focus, body.theme-lightblue textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(0,122,255,.25); border-color: rgba(0,122,255,.5); }
body.theme-lightblue .chip, body.theme-lightblue .toggle-group button { border-radius: 999px; background: rgba(118,118,128,.12); border-color: transparent; color: var(--text); font-weight: 600; }
body.theme-lightblue .chip.on, body.theme-lightblue .toggle-group button.on { background: var(--accent); color: #fff; }
body.theme-lightblue .sheet-backdrop { background: rgba(0,0,0,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.theme-lightblue .sheet { background: rgba(255,255,255,.86); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); }
body.theme-lightblue .sheet.full { background: rgba(255,255,255,.94); }
body.theme-lightblue .sheet-head { border-bottom-color: rgba(60,60,67,.1); }
body.theme-lightblue .group-h.date-h, body.theme-lightblue .wc-day > .group-h { background: rgba(242,242,247,.85); color: var(--text); }
body.theme-lightblue .dh-title { color: var(--text); }
body.theme-lightblue .cx-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--hcc) 14%, rgba(255,255,255,.7)) 0%, rgba(255,255,255,.7) 70%); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-color: rgba(60,60,67,.1); box-shadow: var(--shadow); }
body.theme-lightblue .cx-hero .cx-name { letter-spacing: -.025em; }
body.theme-lightblue .add-t { background: rgba(255,255,255,.75); border-color: rgba(60,60,67,.1); box-shadow: var(--shadow); }
body.theme-lightblue .add-t.hero { background: var(--accent); color: #fff; }
body.theme-lightblue .add-t.hero svg { color: #fff; }
body.theme-lightblue.new-ui [data-sec] { --sc: #007aff; }
body.theme-lightblue.new-ui .sidebar { background: var(--side); }
body.theme-lightblue.new-ui .side-item svg { background: transparent; color: var(--accent); padding: 5px; }
body.theme-lightblue.new-ui .side-item.on { background: rgba(60,60,67,.09); box-shadow: none; }
body.theme-lightblue.new-ui .side-item.on::before { display: none; }
body.theme-lightblue.new-ui .side-item.on svg { background: transparent; color: var(--accent); }
body.theme-lightblue.new-ui .side-sec::before { display: none; } body.theme-lightblue.new-ui .side-sec::after { background: none; }
body.theme-lightblue.new-ui .side-new { background: var(--accent); }
body.theme-lightblue.new-ui .tabbar { border-radius: 0; background: rgba(250,250,252,.72); box-shadow: none; }
body.theme-lightblue.new-ui .tab.on > svg { background: transparent; color: var(--accent); }
body.theme-lightblue.new-ui .tab-add-circle { border-radius: 50%; background: var(--accent); box-shadow: 0 8px 18px -6px rgba(0,122,255,.55), 0 0 0 4px #fff; }
body.theme-lightblue.new-ui .row.trow-m { background: rgba(255,255,255,.85); }
body.theme-lightblue .wc-day .group-h, body.theme-lightblue .grp-box > .group-h, body.theme-lightblue .cal-day-box .group-h { background: rgba(242,242,247,.9) !important; color: var(--text); }
body.theme-lightblue .wc-day .group-h .dh-title, body.theme-lightblue .cal-day-box .group-h { color: var(--text); }
@media (min-width: 900px) { html body:not(.theme-lightblue) .sidebar { background: color-mix(in srgb, var(--side, var(--bg)) 78%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); } }

/* Settings, full screen with tabs (26.4.208) */
.set-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto; align-items: start; }
.set-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; }
.set-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; text-align: left; color: var(--text); transition: background .12s; }
.set-tab:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.set-tab.on { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.set-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.set-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.set-tab.on .set-ic { background: var(--accent); color: var(--accent-ink, #fff); }
.set-tl { display: flex; flex-direction: column; min-width: 0; }
.set-tl b { font-size: 15px; font-weight: 650; }
.set-tl em { font-style: normal; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-pane { min-width: 0; }
.set-head { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; }
.set-ic.big { width: 48px; height: 48px; border-radius: 14px; } .set-ic.big svg { width: 24px; height: 24px; }
.set-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.set-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.set-pane .ap-card:first-of-type { margin-top: 18px; }
.set-pane .ap-preview { margin-top: 18px; }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field > b { font-size: 15.5px; } .set-field > span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.set-field .my-co { margin-top: 6px; width: 100%; }
.set-field .toggle-group { margin-top: 8px; }
.set-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.set-foot { text-align: center; margin: 14px 0 0; }
@media (max-width: 760px) {
  .set-wrap { grid-template-columns: 1fr; gap: 12px; }
  .set-nav { position: sticky; top: -16px; z-index: 3; flex-direction: row; overflow-x: auto; gap: 6px; margin: -16px -16px 0; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-tab { width: auto; flex: none; padding: 6px 12px 6px 6px; border-radius: 999px; gap: 8px; border: 1px solid var(--line); }
  .set-tab .set-ic { width: 26px; height: 26px; border-radius: 50%; } .set-tab .set-ic svg { width: 14px; height: 14px; }
  .set-tl em { display: none; } .set-tl b { font-size: 13.5px; white-space: nowrap; }
  .set-head h2 { font-size: 22px; } .set-ic.big { width: 40px; height: 40px; }
}
.set-pane .row-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }

/* Light Blue (26.4.209): pricing box and finished roadmap steps in blue instead of green */
body.theme-lightblue .pay-card { border-color: #007aff; background: rgba(0,122,255,.07); }
body.theme-lightblue .rd.ok:not(:last-child)::after { background: #007aff; }
body.theme-lightblue .rd.ok .rd-dot { background: #007aff; border-color: #007aff; }

/* Field / Payment Tracker rows (26.4.209): no colored side line */
.row.trow-m::before, .row.trow-h::before, .tbl.wc tbody tr[data-act="task"] td.ck::before { display: none !important; }
body.new-ui .tbl.wc.fit tbody tr[data-act=task] td.ck { box-shadow: none !important; }
.set-head h2 .set-beta { font-size: 13px; vertical-align: middle; margin-left: 6px; letter-spacing: 0; } .set-tl b .pill { margin-left: 4px; vertical-align: 1px; }

/* Main sidebar size (26.4.214): Appearance → Menu size */
@media (min-width: 900px) {
  body.menu-sz-m:not(.nav-collapsed) .app { grid-template-columns: 240px 1fr !important; }
  body.menu-sz-m .side-item { min-height: 40px; font-size: 15.5px; font-weight: 600; gap: 11px; }
  body.menu-sz-m .side-item svg { width: 19px; height: 19px; }
  body.menu-sz-m .side-sec { font-size: 11.5px; font-weight: 750; }
  body.menu-sz-l:not(.nav-collapsed) .app { grid-template-columns: 250px 1fr !important; }
  body.menu-sz-l .side-item { min-height: 44px; font-size: 16.5px; font-weight: 650; gap: 12px; }
  body.menu-sz-l .side-item svg { width: 20px; height: 20px; }
  body.menu-sz-l .side-sec { font-size: 12px; font-weight: 800; }
  body:is(.menu-sz-m, .menu-sz-l).new-ui .side-item svg { box-sizing: content-box; }
}
.menu-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mn-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit; }
.mn-win { width: 100%; max-width: 150px; display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; border-radius: 10px; background: #f4f5f7; color: #1d1d1f; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: box-shadow .12s, transform .12s; }
.mn-opt:hover .mn-win { transform: translateY(-2px); }
.mn-opt.on .mn-win { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.mn-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; line-height: 1.2; }
.mn-row i { flex: none; border-radius: 3px; background: var(--accent); opacity: .75; }
.mn-row.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.mn-opt b { font-size: 14px; font-weight: 600; } .mn-opt.on b { font-weight: 850; }
.menu-pick { align-items: start; } .mn-win { max-width: 170px; }

/* Invoice & bid preview window (26.4.215): bigger window + status steps on one row, so more of the paper shows */
@media (min-width: 700px) {
  .sheet:has(.ip-wrap) { width: min(880px, 94vw) !important; max-height: 94dvh !important; }
  .sheet:has(.ip-wrap) .steps { display: flex !important; gap: 8px; }
  .sheet:has(.ip-wrap) .steps .step { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; }
}

/* Task card date (26.4.216): on mouse-over, blur the date and show "Reschedule" over it (no highlight box) */
.th-due-btn:hover { background: none !important; }
.th-due-btn > :not(input) { transition: filter .15s ease, opacity .15s ease; }
.th-due-btn::after { content: "Reschedule"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: .01em; color: var(--accent); opacity: 0; transition: opacity .15s ease; pointer-events: none; }
@media (hover: hover) {
  .th-due-btn:hover > :not(input) { filter: blur(4px); opacity: .55; }
  .th-due-btn:hover::after { opacity: 1; }
}
.th-due-btn:focus-visible > :not(input) { filter: blur(4px); opacity: .55; }
.th-due-btn:focus-visible::after { opacity: 1; }
.th-due-btn::after { place-items: center end; padding-right: inherit; font-size: 17px; }
/* 26.4.217: stronger blur; the label above the date (Worked / Due / Overdue) stays sharp */
@media (hover: hover) { .th-due-btn:hover > :not(input):not(.th-k) { filter: blur(7px); opacity: .45; } .th-due-btn:hover > .th-k { filter: none; opacity: 1; } }
.th-due-btn:focus-visible > :not(input):not(.th-k) { filter: blur(7px); opacity: .45; } .th-due-btn:focus-visible > .th-k { filter: none; opacity: 1; }
.th-due-btn::after { padding-top: 14px; }

/* Pricing card (26.4.218): matches the Roadmap card — theme surface, centered title, three tiles, accent profit */
html body .pay-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 18px 0 6px; padding: 18px 20px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
html body .pay-card .pc-title { grid-column: 1 / -1; display: block; text-align: center; margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html body .pay-card .pc-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; margin: 0; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--surface-2); min-width: 0; }
html body .pay-card .pc-l { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html body .pay-card .pc-l em { margin-top: 3px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.35; }
html body .pay-card .pc-row b { margin-top: auto; font-size: 24px; font-weight: 850; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
html body .pay-card .pc-row .neg { color: var(--bad); }
html body .pay-card .pc-row.profit { margin: 0; padding-top: 14px; border: 0; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
html body .pay-card .pc-row.profit .pc-l { color: var(--accent); }
html body .pay-card .pc-row.profit b { font-size: 26px; color: var(--accent); }
html body .pay-card .pc-pct { font-size: 14px; font-weight: 750; color: var(--muted); }
html body .pay-card .pc-math { grid-column: 1 / -1; text-align: center; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
html body .pay-card .cp-edit, html body .pay-card .crew-pay-btn { font-size: inherit; }
@media (max-width: 480px) { html body .pay-card { grid-template-columns: 1fr; padding: 16px; } html body .pay-card .pc-row { flex-direction: row; align-items: center; justify-content: space-between; } html body .pay-card .pc-row b { margin: 0; font-size: 20px; } html body .pay-card .pc-row.profit b { font-size: 22px; } }
html body .pay-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .pay-card:has(> .pc-row:nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.theme-lightblue .pay-card { border-color: var(--line); background: var(--surface); }
@media (max-width: 480px) { html body .pay-card, html body .pay-card:has(> .pc-row:nth-child(5)) { grid-template-columns: 1fr; } }

/* 26.4.219: Reschedule hover = theme-color block over the date (no blur) */
@media (hover: hover) { .th-due-btn:hover > :not(input), .th-due-btn:hover > .th-k { filter: none !important; opacity: 1 !important; } }
.th-due-btn:focus-visible > :not(input) { filter: none !important; opacity: 1 !important; }
.th-due-btn::after { inset: 4px 0 4px 8px; padding: 0; place-items: center; border-radius: 14px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 17px; font-weight: 800; letter-spacing: .01em; transform: scale(.96); transition: opacity .15s ease, transform .15s ease; box-shadow: 0 8px 20px -10px var(--accent); }
@media (hover: hover) { .th-due-btn:hover::after { opacity: 1; transform: scale(1); } }
.th-due-btn:focus-visible::after { opacity: 1; transform: scale(1); }
/* 26.4.220: the Reschedule block fills everything right of the dotted line, edge to edge */
.th-due-btn::after { inset: -14px -16px -14px 0; border-radius: 0 15px 15px 0; box-shadow: none; transform: none; }
@media (hover: hover) { .th-due-btn:hover::after { transform: none; } }
.th-due-btn:focus-visible::after { transform: none; }

/* ───── Golden Gate, refreshed for the NEW UI (26.4.221): warm charcoal + bridge gold ───── */
html body.theme-goldengate {
  --bg: #141416; --surface: #1d1d21; --surface-2: #26262b; --line: rgba(255,236,200,.08); --line-strong: rgba(255,236,200,.16);
  --text: #f4f1ea; --text-2: #c8c3b8; --muted: #8f8a80;
  --accent: #e9b44c; --accent-ink: #17140c; --accent-soft: rgba(233,180,76,.15);
  --ok: #6fd39a; --ok-soft: rgba(111,211,154,.14); --warn: #f2a93b; --bad: #ff7b6e; --bad-soft: rgba(255,123,110,.15); --info: #b6a1ff;
  --bar: rgba(20,20,22,.78); --side: #101012; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.7); --r: 12px;
  background: #141416;
}
/* warm gold glow behind the glass, like sunset light on the bridge */
html body.theme-goldengate::after { background:
  radial-gradient(45% 40% at 6% 0%, rgba(233,180,76,.16), transparent 70%),
  radial-gradient(40% 35% at 100% 100%, rgba(196,92,48,.14), transparent 70%),
  radial-gradient(35% 30% at 60% 40%, rgba(233,180,76,.05), transparent 70%) !important; }
/* primary buttons: gold gradient with dark text */
body.theme-goldengate :is(.btn.primary, .side-new, .tab-add-circle, .add-t.hero) { background: linear-gradient(135deg, #f2c565, #d99a2b) !important; color: #17140c !important; border-color: transparent !important; box-shadow: 0 8px 22px -12px rgba(233,180,76,.8); }
body.theme-goldengate .btn.primary:hover, body.theme-goldengate .side-new:hover { filter: brightness(1.06); }
body.theme-goldengate .btn.link, body.theme-goldengate a { color: var(--accent); }
/* NEW UI on Golden Gate: one gold accent everywhere (no rainbow section colors) */
body.theme-goldengate.new-ui [data-sec] { --sc: #e9b44c; }
body.theme-goldengate.new-ui .side-sec { color: #a39a88; }
body.theme-goldengate.new-ui .side-sec::before { background: #e9b44c; }
body.theme-goldengate.new-ui .side-sec::after { background: linear-gradient(90deg, rgba(233,180,76,.35), transparent); }
body.theme-goldengate.new-ui .side-item svg { background: rgba(233,180,76,.12); color: #e9b44c; }
body.theme-goldengate.new-ui .side-item.on { background: linear-gradient(100deg, rgba(233,180,76,.22), rgba(233,180,76,.04)); color: #fff; box-shadow: inset 0 0 0 1px rgba(233,180,76,.28); }
body.theme-goldengate.new-ui .side-item.on svg { background: #e9b44c; color: #17140c; }
body.theme-goldengate.new-ui .tab.on { color: #e9b44c; }
body.theme-goldengate.new-ui .tab.on > svg { background: rgba(233,180,76,.18); color: #e9b44c; }
/* headers & cards */
body.theme-goldengate :is(.list.grp-box, .list.org-box) > :is(.group-h, .section-h.box-h) { background: linear-gradient(90deg, rgba(233,180,76,.16), rgba(233,180,76,.04)) !important; color: #f2c565 !important; border-bottom-color: rgba(233,180,76,.2) !important; }
body.theme-goldengate .cx-hero, body.theme-goldengate .task-hero { border-color: rgba(233,180,76,.22); }
body.theme-goldengate .sheet-head h2, body.theme-goldengate #page-title { letter-spacing: -.015em; }
body.theme-goldengate .toggle-group button.on, body.theme-goldengate .chip.on { background: #e9b44c; color: #17140c; border-color: #e9b44c; }
body.theme-goldengate .stat b { color: #f4f1ea; }
body.theme-goldengate .rd.ok:not(:last-child)::after { background: #e9b44c; }
body.theme-goldengate .rd.ok .rd-dot { background: #e9b44c; border-color: #e9b44c; color: #17140c; }

/* ===== ZDO Luna layer (merged into app.css for 26.5.0) ===== */
/* ZDO Luna — the Cosmos-inspired layer. Loads after app.css; every rule here builds on the v26 theme tokens.
   Sections: 1 Type · 2 Contrast · 3 Buttons & tiles · 4 Selected states & icons · 5 Brand shapes
             6 Needs your attention · 7 Three-column Company page · 8 Accessibility */

/* ---------- 1 · Type: tabular numerals, numbers lead ---------- */
body { font-variant-numeric: tabular-nums; }
.th-lotline b, .ap-pv-lot b { font-weight: 850; letter-spacing: -.02em; }
.row-amt, .stat b, .att-t b, .om-t b { font-weight: 800; letter-spacing: -.015em; }
.att-l, .om-t span, .pc-title, .group-h { letter-spacing: .08em; }
.page-title, .top-title, h2 { letter-spacing: -.02em; }

/* ---------- 2 · Contrast: muted labels meet 4.5:1 on cards in every theme ---------- */
body.theme-applemusic, body.theme-lightblue { --muted: #636366; }
body.theme-dark { --muted: #9aa0a9; }
html body.theme-goldengate, html body.theme-goldengate.new-ui { --muted: #a9a397; }
body.theme-spotify { --muted: #a7a7a7; }

/* ---------- 3 · Buttons with depth; content flat, action tiles lift ---------- */
.btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease; }
.btn:not(.link):not(.ghost):not(.primary) { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn:not(.link):not(.ghost):not(.primary):not(:disabled):hover { box-shadow: 0 4px 10px -4px rgba(0,0,0,.22); }
.btn.primary { background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -7px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn.primary:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 20px -9px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn:not(:disabled):active { transform: scale(.98); box-shadow: inset 0 2px 4px rgba(0,0,0,.22) !important; filter: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 1; background: var(--surface-2) !important; background-image: none !important; color: var(--muted) !important; border: 1px dashed var(--line-strong) !important; box-shadow: none !important; cursor: not-allowed; }
.btn.danger:not(:disabled):hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn:focus-visible, .wiz-tile:focus-visible, .att-t:focus-visible, .att-i:focus-visible, .side-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
.wiz-tile, .add-t { transition: transform .15s ease, box-shadow .18s ease; }
.wiz-tile:hover, .add-t:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.45); }
.wiz-tile:active, .add-t:active { transform: translateY(0) scale(.99); }

/* ---------- 4 · Selected states & trade icons ---------- */
.side-item { position: relative; }
.side-item.on { font-weight: 750; }
html body .side-item.on::before { content: ""; position: absolute; left: 3px !important; right: auto !important; top: 24% !important; bottom: 24% !important; height: auto !important; width: 4px !important; opacity: 1 !important; transform: none !important; border-radius: 3px; background: var(--accent); }
html body.nav-collapsed .side-item.on::before { left: 1px !important; }
html body .side-item.on, html body .side-item.on svg { color: var(--accent); }
.side-item svg, .add-t svg { stroke-linecap: round; stroke-linejoin: round; }
.chip.on, .toggle-group button.on { font-weight: 750; }

/* ---------- 5 · Brand shapes from the tilted, slashed ZDO "0" ---------- */
.zdo-spin { width: 44px; height: 44px; display: block; margin: 0 auto 10px; }
.zdo-spin .zs-track { fill: none; stroke: var(--line-strong); stroke-width: 5; }
.zdo-spin .zs-arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transform-origin: 28px 28px; animation: zdoSpin 1s linear infinite; }
@keyframes zdoSpin { to { transform: rotate(374deg); } }
/* empty states sit on soft survey contours */
.empty { position: relative; overflow: hidden; }
.empty::before { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; pointer-events: none; opacity: .5; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 92 C60 72 90 94 130 76 S200 72 220 62' opacity='.35'/%3E%3Cpath d='M0 72 C60 52 90 74 130 56 S200 52 220 42' opacity='.6'/%3E%3Cpath d='M0 52 C60 32 90 54 130 36 S200 32 220 22'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 92 C60 72 90 94 130 76 S200 72 220 62' opacity='.35'/%3E%3Cpath d='M0 72 C60 52 90 74 130 56 S200 52 220 42' opacity='.6'/%3E%3Cpath d='M0 52 C60 32 90 54 130 36 S200 32 220 22'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.empty > * { position: relative; }
.empty { padding-bottom: 70px; }
.empty::before { height: 60px; opacity: .35; }
/* roadmap: the current step wears a tilted "0" ring */
.rd.cur .rd-dot { position: relative; box-shadow: none; }
.rd.cur .rd-dot::after { content: ""; position: absolute; inset: -8px -4px; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 50%; transform: rotate(14deg); pointer-events: none; }

/* ---------- 6 · Needs your attention (top of Today) ---------- */
.att { position: relative; overflow: hidden; margin: 0 0 18px; padding: 16px 18px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.att::after { /* corner flag: the slashed 0, cropped off the top-right edge */
  content: ""; position: absolute; right: -34px; top: -46px; width: 150px; height: 150px; pointer-events: none; opacity: .09; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='100' rx='56' ry='78' transform='rotate(14 100 100)' fill='none' stroke='%23000' stroke-width='22'/%3E%3Cline x1='62' y1='168' x2='138' y2='32' stroke='%23000' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cellipse cx='100' cy='100' rx='56' ry='78' transform='rotate(14 100 100)' fill='none' stroke='%23000' stroke-width='22'/%3E%3Cline x1='62' y1='168' x2='138' y2='32' stroke='%23000' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
.att-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.att-x { min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: var(--r-sm); }
.att-x:hover { color: var(--text); background: var(--surface-2); }
.att-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; z-index: 1; }
.att-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: 12px 14px; text-align: left; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .18s ease, border-color .15s ease; }
.att-t:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(0,0,0,.5); border-color: var(--line-strong); }
.att-t:active { transform: scale(.99); }
.att-l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.att-l i, .att-i > i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 900; flex: none; }
.att-t b { font-size: 30px; line-height: 1.1; margin-top: 4px; }
.att-t em { font-style: normal; font-size: 13px; color: var(--text-2); }
.att-t.warn .att-l i, .att-i.warn > i { background: var(--warn-soft); color: var(--warn); }
.att-t.info .att-l i, .att-i.info > i { background: var(--accent-soft); color: var(--accent); }
.att-t.bad .att-l i, .att-i.bad > i { background: var(--bad-soft); color: var(--bad); }
.att-t.ok .att-l i, .att-i.ok > i { background: var(--ok-soft); color: var(--ok); }
.att-t.bad:not(.zero) { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.att-t.bad:not(.zero) b { color: var(--bad); }
.att-t.zero b { color: var(--muted); }
.att-list { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--line); position: relative; z-index: 1; }
.att-i { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.att-i:last-child { border-bottom: 0; }
.att-i:hover { background: var(--surface-2); }
.att-i > span:not(.att-go) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.att-i b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-i small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-go { font-size: 22px; color: var(--muted); padding: 0 6px; }
@media (max-width: 720px) {
  .att { padding: 14px 14px 10px; margin: 0 0 14px; }
  .att-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .att-t { min-height: 84px; padding: 10px 12px; }
  .att-t b { font-size: 26px; }
}

/* ---------- 7 · Three-column Company page ---------- */
.org3 { display: grid; gap: 18px; align-items: start; }
.org3-col { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.org3-col > * { margin-top: 0 !important; }
@media (min-width: 1280px) {   /* 3 columns only when the middle one has real room (26.5.4) */
  .org3 { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(300px, 340px); }
}
@media (min-width: 760px) and (max-width: 1279px) {
  .org3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .org3-c { grid-column: 1 / -1; }
}
.org-money { padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.org-money .pc-title { font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.om-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.om-t { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r); background: var(--surface-2); }
.om-t span { font-size: 11.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.om-t b { font-size: 22px; line-height: 1.15; }
.om-t em { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.om-t.bad b { color: var(--bad); }
.om-t.bad em::before { content: "! "; font-weight: 900; color: var(--bad); }

/* ---------- 8 · Accessibility ---------- */
/* statuses: a word and a shape, never color alone */
.pill.ok::before { content: "✓"; font-weight: 900; }
.pill.warn::before { content: "◷"; font-weight: 900; }
.pill.bad::before { content: "!"; font-weight: 900; }
/* tap targets: 44px minimum on touch screens */
@media (pointer: coarse) {
  .icon-btn, .btn.sm, .chip, .toggle-group button, .side-item, .att-x { min-height: 44px; }
  .icon-btn { min-width: 44px; }
}
/* calm mode — on when the device asks, or by the switch in Settings → Appearance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .zdo-spin .zs-arc { animation: zdoSpin 1.6s linear infinite !important; }
}
body.calm *, body.calm *::before, body.calm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
body.calm .zdo-spin .zs-arc { animation: zdoSpin 1.6s linear infinite !important; }
body.calm .btn:hover, body.calm .wiz-tile:hover, body.calm .add-t:hover, body.calm .att-t:hover { transform: none; }
body.bold-txt { font-weight: 550; }
body.bold-txt .row-sub, body.bold-txt .muted, body.bold-txt small, body.bold-txt em, body.bold-txt p { font-weight: 550; }
body.bold-txt b, body.bold-txt strong, body.bold-txt .row-title, body.bold-txt h2, body.bold-txt h3 { font-weight: 850; }

/* =====================  Luna round 2  ===================== */

/* ---------- 1 · Shorter sidebar: More group ---------- */
button.side-sec.side-more { width: calc(100% - 16px); border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
html body button.side-sec.side-more { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.side-more .sm-n { order: 3; font-size: 11px; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.side-more::after { order: 2; }
.side-more::before { display: inline-block !important; content: "›" !important; width: auto !important; height: auto !important; background: none !important; font-size: 14px; transition: transform .15s ease; }
.side-more.open::before { transform: rotate(90deg); }

/* ---------- 2 · Jobsite page in three columns (shares .org3) ---------- */
.site3 .site-active, .site3 .kv { margin-top: 0; }

/* ---------- 3 · Key-facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }
.fact { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.fact-tx { display: flex; flex-direction: column; min-width: 0; }
.fact-l { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fact b { font-size: 22px; font-weight: 850; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; }
.fact em { font-style: normal; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.fact.bad b { color: var(--bad); }
.fact.bad .fact-l::before { content: "! "; color: var(--bad); }
@media (max-width: 720px) {
  .facts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
  .facts::-webkit-scrollbar { display: none; }
  .fact { flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; }
}

/* ---------- 6 · Progress ring (tilted "0") ---------- */
.lring { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; }
.lring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lring circle { fill: none; stroke-width: 5; }
.lr-track { stroke: var(--surface-2); }
.lr-val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.lring b { position: relative; font-size: 12px !important; font-weight: 850; letter-spacing: -.02em; }

/* ---------- 4 · One task row design on phones too ---------- */
@media (max-width: 720px) {
  .trow-h { align-items: flex-start; gap: 10px; padding: 12px 12px; }
  .trow-h .th-lotline { font-size: 12px; }
  .trow-h .row-title { font-size: 16px; }
  .trow-h .row-end { flex-direction: column; align-items: flex-end; gap: 6px; max-width: 42%; }
  .trow-h .row-end .pill { white-space: nowrap; }
}

/* ---------- 5 · Five-step stage bar ---------- */
.sbar { display: inline-flex; gap: 3px; align-items: center; margin-top: 6px; }
.sbar i { width: 14px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.sbar i.done { background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.sbar i.cur { background: var(--accent); width: 20px; }
.sbar.bad i.cur { background: var(--bad); }
.sbar.deal i { width: 12px; }
.row-end > .sbar { align-self: flex-end; }
.row-end { flex-wrap: wrap; justify-content: flex-end; }
.stc-col { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; }
.tbl td .sbar { display: flex; }

/* ---------- 7 · Icons fill in when active ---------- */
.side-item.on svg, .tab.on > svg, .wiz-tile.pri .wiz-ico svg { fill: currentColor; fill-opacity: .2; }
.side-item svg, .tab > svg { transition: fill-opacity .15s ease; }
.chip.on::before, .toggle-group button.on::before { content: "✓"; margin-right: 5px; font-weight: 900; }

/* ---------- 8 · Compact rows ---------- */
body.dense .row { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
body.dense .trow-h .row-sub { margin-top: 0; }
body.dense .tbl td { padding-top: 5px; padding-bottom: 5px; }
body.dense .group-h { padding-top: 8px; padding-bottom: 5px; }
body.dense .section-h { margin-top: 14px; }
body.dense .fact { min-height: 60px; padding: 8px 12px; }
body.dense .att-t { min-height: 72px; }
body.dense .sbar { margin-top: 3px; }

/* ---------- 9 · Plain backgrounds switch ---------- */
html body.no-blur::before, html body.no-blur::after { display: none !important; }
html body.no-blur *, html body.no-blur *::before, html body.no-blur *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---------- 10 · One section-heading style, one Add button ---------- */
html body .section-h { align-items: center; }
html body .section-h h2, html body .org-money .pc-title, html body .list.grp-box > .group-h:first-child:not(.date-h) {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--text); }
html body .list.grp-box > .group-h:first-child:not(.date-h) { background: var(--surface); padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
html body .org-money .pc-title { margin-bottom: 12px; }
html body .section-h > button, html body .group-h .count.link, html body .section-h .btn.link {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13px; font-weight: 700; color: var(--accent); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
html body .section-h > button:hover, html body .group-h .count.link:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
@media (pointer: coarse) { html body .section-h > button, html body .group-h .count.link { min-height: 40px; } }

/* ---------- 11 · Zero days over — all caught up ---------- */
.att.att-zero { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: linear-gradient(120deg, var(--ok-soft), var(--surface) 70%); }
.att.att-zero::after { display: none; }
.att-zero-mark { width: 64px; height: 64px; flex: none; }
.att-zero-mark svg { width: 100%; height: 100%; }
.att-zero-mark ellipse { fill: none; stroke: var(--ok); stroke-width: 22; }
.att-zero-mark line { stroke: var(--accent); stroke-width: 12; stroke-linecap: round; }
.att-zero-tx { flex: 1; }
.att-zero h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.att-zero p { margin: 2px 0 0; color: var(--text-2); font-size: 14px; }
body:not(.calm) .att-zero-mark { animation: zeroIn .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes zeroIn { from { transform: scale(.6) rotate(-20deg); opacity: 0; } }

/* ---------- 12 · Real-world cues: rubber stamps, pay slip ---------- */
.ip-stamp { border-width: 4px; border-style: double; border-radius: 10px; padding: 6px 16px; opacity: .8; }
.pay-card .pc-row.crew-slip { position: relative; margin: 6px -6px; padding: 10px 12px; border-radius: 6px; background: var(--surface-2);
  border: 1px dashed var(--line-strong); }
.pay-card .pc-row.crew-slip::before, .pay-card .pc-row.crew-slip::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); border: 1px dashed var(--line-strong); }
.pay-card .pc-row.crew-slip::before { left: -7px; clip-path: inset(0 0 0 50%); }
.pay-card .pc-row.crew-slip::after { right: -7px; clip-path: inset(0 50% 0 0); }
.pay-card { position: relative; }
.slip-stamp { position: absolute; right: 14px; top: 10px; transform: rotate(-10deg); border: 3px double var(--ok); color: var(--ok); border-radius: 8px; padding: 3px 10px; font-size: 13px; font-weight: 900; letter-spacing: .12em; opacity: .85; pointer-events: none; text-align: center; }
.slip-stamp small { display: block; font-size: 10px; letter-spacing: .04em; }

/* ---------- 13 · Focus mode ---------- */
.luna-focus-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-radius: 50%; }
@media (max-width: 699px) { .luna-focus-btn { display: none !important; } }   /* 26.8.6: focus mode on iPad portrait too */
@media (min-width: 700px) {
  body.focus .sidebar, body.focus #sidebar, body.focus .side, body.focus aside.side-nav { display: none !important; }
  body.focus .app, body.focus .main { margin-left: 0 !important; padding-left: 0 !important; grid-template-columns: 1fr !important; }
  body.focus .att-list, body.focus .facts em, body.focus .cal-head + p { display: none; }
  body.focus .view { max-width: none !important; margin-inline: 0; padding-left: 20px; padding-right: 20px; }   /* focus mode uses the full window width (L1.2.10) */
}

/* the whole sidebar fits on a laptop screen without scrolling */
@media (min-width: 1024px) and (max-height: 1000px) {
  body:not(.menu-sz-m):not(.menu-sz-l) .side-menu .side-item { min-height: 36px; }
  html body:not(.menu-sz-m):not(.menu-sz-l) .side-menu .side-sec { margin-top: 10px; margin-bottom: 4px; }
}
.lring b { font-size: 10.5px !important; }

/* Jobsite page: Active tasks shows 3, with "+N more ▾" beside the count */
.section-h .sh-right { display: inline-flex; align-items: center; gap: 10px; }
html body .section-h .more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; }
html body .section-h .more-btn:hover { background: var(--accent-soft); }
.more-btn .mb-chev { font-size: 11px; transition: transform .15s ease; }
.more-btn.open .mb-chev { transform: rotate(180deg); }
@media (pointer: coarse) { html body .section-h .more-btn { min-height: 40px; } }
/* + Add next to a "+N more" button keeps the pill look */
html body .section-h .sh-right > button:not(.more-btn) { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; white-space: nowrap; }
html body .section-h .sh-right > button:not(.more-btn):hover { background: var(--accent-soft); }
@media (pointer: coarse) { html body .section-h .sh-right > button:not(.more-btn) { min-height: 40px; } }

/* =====================  Beta: Payment archive (L1.2.0)  ===================== */
.arch-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 2px 10px; }
.arch-h h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.arch-h .muted { font-size: 13.5px; flex: 1 1 260px; }
.arch-h .count { margin-left: auto; font-size: 14px; color: var(--muted); }
.arch-h .more-btn { margin-left: auto; }
/* 1. still open from earlier */
.arch-open { margin: 0 0 18px; }
.arch-open-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.arch-oc { display: flex; flex-direction: column; gap: 4px; min-height: 120px; padding: 12px 14px; text-align: left; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .18s ease; }
.arch-oc:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(0,0,0,.5); }
.aoc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.aoc-lot { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.aoc-lot b { font-size: 16px; color: var(--text); letter-spacing: -.01em; }
.aoc-age { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.arch-oc.a30 .aoc-age { background: #9a6700; } .arch-oc.a45 .aoc-age { background: #c2410c; } .arch-oc.a60 .aoc-age { background: #b42318; }
.arch-oc.a60 { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.aoc-task { font-size: 15px; }
.aoc-site { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aoc-end { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
/* 2. closed months */
.arch { margin-top: 26px; }
.arch-year { padding: 14px 16px 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.arch-bars { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; align-items: end; height: 100px; margin-top: 8px; }
.arch-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; border: 0; background: none; font: inherit; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; border-radius: 6px; }
.arch-bar i { width: 100%; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); transition: background .15s ease; }
.arch-bar:not(:disabled):hover i { background: var(--accent); }
.arch-bar.loose i { background: color-mix(in srgb, var(--warn) 45%, var(--surface-2)); }
.arch-bar.cur i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--surface-2)) 0 4px, var(--surface-2) 4px 8px); }
.arch-bar.cur span { font-weight: 800; color: var(--text); }
.arch-bar:disabled { cursor: default; }
.arch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.arch-mc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.arch-mc h3 { margin: -6px 0 0; font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
.arch-stamp { position: absolute; right: 14px; top: 14px; transform: rotate(-9deg); border: 3px double currentColor; border-radius: 8px; padding: 2px 9px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.arch-stamp.ok { color: var(--ok); } .arch-stamp.warn { color: var(--warn); }
.arch-led { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; font-size: 15px; }
.arch-led b { text-align: right; } .arch-led .neg { color: var(--bad); } .arch-led .pos { color: var(--accent); }
.arch-led .tot { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 800; }
.arch-mc-sub { font-size: 13px; color: var(--text-2); }
.arch-rows { margin-top: 14px; }
.arch-mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.arch-mrow:first-child { border-top: 0; }
.arch-mrow > b { flex: 1; } .arch-mrow .num { color: var(--text-2); font-size: 14px; }
.arch-mrow:hover { background: var(--surface-2); } .chev-r { color: var(--muted); font-size: 18px; }
/* 3. a month opened */
.arch-sheet { position: relative; }
.arch-sh-top { min-height: 8px; }
.arch-sh-top .arch-stamp { top: -8px; }
.fact.pos b { color: var(--accent); }
.arch-tabs { margin: 0 0 16px; flex-wrap: wrap; }
.arch-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.arch-grp { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; overflow: hidden; }
.arch-grp > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; cursor: pointer; list-style: none; }
.arch-grp > summary::-webkit-details-marker { display: none; }
.arch-grp.wait > summary { background: var(--surface-2); }
.ag-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.ag-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ag-ic.in { background: var(--ok-soft); color: var(--ok); } .ag-ic.out { background: var(--warn-soft); color: var(--warn); }
.ag-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-tx b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tx small { font-size: 12.5px; color: var(--muted); }
.ag-amt { font-size: 16px; }
.ag-chev { color: var(--muted); font-size: 12px; transition: transform .15s ease; }
.arch-grp[open] .ag-chev { transform: rotate(180deg); }
.ag-body { border-top: 1px solid var(--line); padding: 4px 0; }
.ag-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 64px 64px 80px; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 14px 4px 64px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.ag-row:hover { background: var(--surface-2); }
.ag-row b.num { text-align: right; }
.ag-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .ag-row { grid-template-columns: 64px minmax(0, 1fr) 70px; padding-left: 14px; } .ag-row > :nth-child(3), .ag-row > :nth-child(4) { display: none; } }
/* 4. lot history */
.lh-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 16px; }
.lh-f { display: flex; flex-direction: column; gap: 4px; }
.lh-f select, .lh-f input { min-height: 46px; font-size: 16px; }
.lh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-chips .chip { min-width: 48px; justify-content: center; }
.lh-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; }
.lh-lot { width: 78px; height: 78px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lh-lot .fact-l { color: var(--accent); } .lh-lot b { font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.lh-ttl { flex: 1 1 200px; } .lh-ttl h3 { margin: 0; font-size: 20px; font-weight: 850; }
.lh-tot { display: grid; grid-template-columns: auto auto; gap: 2px 22px; } .lh-tot b { font-size: 20px; }
.lh-tl { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.lh-tl::before { content: ""; position: absolute; left: 17px; top: 14px; bottom: 14px; width: 2px; background: var(--line-strong); }
.lh-step { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.lh-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 900; background: var(--warn-soft); color: var(--warn); position: relative; z-index: 1; margin-top: 10px; }
.lh-step.done .lh-dot { background: var(--ok-soft); color: var(--ok); } .lh-step.bad .lh-dot { background: var(--bad-soft); color: var(--bad); }
.lh-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.lh-card:hover { border-color: var(--line-strong); }
.lh-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lh-l1 > b:first-child { font-size: 16px; } .lh-l1 .pill { margin-left: auto; }
.lh-ev { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
.arch-mc > .fact-l, .arch-mc > h3 { padding-right: 118px; }
.arch-h .more-btn, .arch .more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--accent); cursor: pointer; }
.arch-h .more-btn:hover { background: var(--accent-soft); }
.arch-sh-top .arch-stamp { position: static; display: inline-block; transform: rotate(-4deg); margin: 0 0 14px 4px; }

/* =====================  Payment-method emblems (L1.2.1)  ===================== */
.pv-emb { display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; overflow: hidden; border-radius: 7px; height: 22px; padding: 0 7px; box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.12), 0 3px 8px -4px rgba(0,0,0,.45); }
.pv-emb img { display: block; height: 12px; width: auto; max-width: none; pointer-events: none; user-select: none; }
.pv-emb.pv-supplypro { background: linear-gradient(90deg, #ff6e00 0%, #ea7116 25%, #be7741 55%, #937d6d 85%, #808080 100%); }
.pv-emb.pv-software { background: #2e4358; padding: 0 2px; }
.pv-emb.pv-software img { height: 22px; }
.pv-emb.pv-invoice { background: var(--surface-2); color: var(--text); gap: 5px; font-size: 12px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line-strong), 0 3px 8px -5px rgba(0,0,0,.35); }
.pv-emb.pv-invoice svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pv-emb.md { height: 30px; border-radius: 9px; padding: 0 9px; }
.pv-emb.md img { height: 17px; } .pv-emb.pv-software.md img { height: 30px; } .pv-emb.pv-software.md { padding: 0 3px; }
.pv-emb.md.pv-invoice { font-size: 13.5px; } .pv-emb.md.pv-invoice svg { width: 15px; height: 15px; }
.pv-emb.lg { height: 44px; border-radius: 12px; padding: 0 12px; width: 100%; }
.pv-emb.lg img { height: 24px; } .pv-emb.pv-software.lg img { height: 44px; } .pv-emb.pv-software.lg { padding: 0 4px; }
.pv-emb.lg.pv-invoice { font-size: 16px; gap: 8px; } .pv-emb.lg.pv-invoice svg { width: 20px; height: 20px; }
.pv-emb[role="button"] { cursor: pointer; transition: transform .12s ease, box-shadow .15s ease; }
.pv-emb[role="button"]:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 2px var(--accent), 0 6px 12px -6px rgba(0,0,0,.5); }
.pv-emb[role="button"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
/* in rows and the tracker table: sits after the builder name */
.th-bld .pv-emb, .bldc .pv-emb { margin-left: 8px; }
/* builder column: favicon + name on one line, the emblem underneath */
html body .bldc { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bld-nm { display: inline-flex; align-items: center; gap: 7px; flex-wrap: nowrap; min-width: 0; }
.bld-nm > span { min-width: 0; line-height: 1.25; }
html body .bldc > .pv-emb { margin-left: 0; }
.row-end .pv-emb, .pay-pills .pv-emb { margin-left: 4px; }
/* task card header */
.task-hero .th-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pv-set { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 9px; border: 1px dashed var(--line-strong); font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.pv-set:hover { color: var(--accent); border-color: var(--accent); }
/* builder hero card */
.hero-pv { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.hero-pv-i { display: inline-flex; align-items: center; gap: 7px; }
.hero-pv-i em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* builder page / picker: emblem buttons */
.pv-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pv-opt { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border-radius: 15px; border: 2px solid transparent; background: var(--surface-2); font: inherit; color: var(--text); cursor: pointer; opacity: .62; filter: saturate(.6); transition: opacity .15s ease, filter .15s ease, border-color .15s ease, transform .12s ease; }
.pv-opt:hover { opacity: 1; filter: none; }
.pv-opt.on { opacity: 1; filter: none; border-color: var(--accent); background: var(--accent-soft); }
.pv-opt.on::after { content: "✓ Selected"; font-size: 12px; font-weight: 800; color: var(--accent); text-align: center; }
.pv-opt > span:not(.pv-emb) { font-size: 13px; font-weight: 700; text-align: center; }
.pv-pick.big .pv-opt { padding: 10px; }
@media (max-width: 520px) { .pv-pick { grid-template-columns: 1fr; } }
/* Logo sizing. Rules here beat the builder-icon rules (.bldc img, .th-bld img). SupplyPro's file is a wide banner
   whose logo sits on its left half, so it is cropped to that half (object-fit: cover, left) and fills the emblem. */
html body .pv-emb img { max-width: none !important; min-width: 0 !important; border-radius: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
html body .pv-emb.pv-supplypro { padding: 0 !important; }
html body .pv-emb.pv-supplypro img { height: 22px !important; width: 96px !important; object-fit: cover !important; object-position: left center !important; }
html body .pv-emb.pv-supplypro.md img { height: 30px !important; width: 130px !important; }
html body .pv-emb.pv-supplypro.lg img { height: 44px !important; width: 190px !important; }
html body .pv-emb.pv-software img { height: 22px !important; width: auto !important; }
html body .pv-emb.pv-software.md img { height: 30px !important; }
html body .pv-emb.pv-software.lg img { height: 44px !important; }
/* inside the pick buttons: the emblem fills the button's width */
html body .pv-opt .pv-emb { width: 100%; padding: 0 !important; }
html body .pv-opt .pv-emb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body .pv-opt .pv-emb.pv-software img { object-fit: contain !important; }
html body .pv-opt .pv-emb.pv-invoice { font-size: 13px; gap: 5px; }
html body .pv-opt .pv-emb.pv-invoice svg { width: 15px; height: 15px; }
html body .pv-pick.big .pv-opt .pv-emb.pv-invoice { font-size: 16px; }
/* SupplyPro in a pick button: scale the banner so its logo half fills the button's width */
html body .pv-opt .pv-emb.pv-supplypro { justify-content: flex-start; }
html body .pv-opt .pv-emb.pv-supplypro img { width: 205% !important; height: auto !important; object-fit: fill !important; flex: none; }

/* Builder software links (Settings → Account) and the two-step emblem dialog (L1.2.3) */
.bs-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.bs-row:first-of-type { border-top: 0; }
.bs-row > .pv-emb { flex: none; }
.bs-row > .pv-emb.pv-software, .bs-row > .pv-emb.pv-supplypro { min-width: 130px; }
.bs-f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bs-f b { font-size: 14px; }
.bs-f input { width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .bs-row { flex-direction: column; align-items: stretch; } }
.pv-step1 { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 4px 0 2px; }
.pv-step1 > .pv-emb.lg { width: min(320px, 100%); height: 64px; border-radius: 16px; }
html body .pv-step1 > .pv-emb.pv-supplypro.lg img { height: 64px !important; width: 280px !important; }
html body .pv-step1 > .pv-emb.pv-software.lg img { height: 64px !important; }
.pv-step1 > p { margin: 0; }
.pv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px; }
.pv-acts .btn { min-height: 50px; font-size: 15px; text-decoration: none; }
.pv-acts .btn:disabled { cursor: not-allowed; }
.pv-url { word-break: break-all; }
@media (max-width: 480px) { .pv-acts { grid-template-columns: 1fr; } }
.pv-step1 > .pv-emb.pv-supplypro.lg, .pv-step1 > .pv-emb.pv-software.lg { width: auto; }
/* calendar / task lists: emblem sits at the far right of the row (L1.2.5) */
.trow-h .row-end { align-items: flex-end; text-align: right; gap: 8px 10px; }   /* stacked (phones, narrow windows): right-justified */
@media (min-width: 900px) { .trow-h .row-end { align-items: center; justify-content: flex-end; } }   /* one line: vertically centred, pushed right */
.trow-h .row-end > .pv-emb { margin-left: 6px; }
@media (max-width: 720px) { .trow-h .row-end > .pv-emb { margin-left: 0; } }
/* Field Tracker table: emblem to the right of the Status pill (L1.2.6) */

/* Today page (day list under the calendar): status, bar, messages and emblem stacked and right-justified on every screen size (L1.2.8) */
html body[data-page="calendar"] .trow-h .row-end { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: center; text-align: right; gap: 7px; max-width: none; }
html body[data-page="calendar"] .trow-h .row-end > .pv-emb { margin-left: 0; }
/* Invoice column (both trackers): centred (L1.2.13) */
.tbl th.c, .tbl td.c { text-align: center; }
.tbl th.c .th-in, .tbl th.c > div, .tbl th.c > span { justify-content: center; }
/* Focus mode must win over the Menu size (medium / large) and minimized-menu grid rules, which use !important too (L1.2.14) */
@media (min-width: 700px) {
  html body.focus.focus.focus .app, html body.focus.focus.focus:not(.nav-collapsed) .app { grid-template-columns: minmax(0, 1fr) !important; }
  html body.focus.focus.focus .app > .main { grid-column: 1 / -1 !important; min-width: 0; }
}
/* Builder page: Contract / Hourly emblems below the header card (26.5.1) */
.org-pv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.org-pv .hero-pv-i em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* …all on one line (26.5.2) */
.org-pv { flex-wrap: nowrap; gap: 14px; padding: 12px 14px; justify-content: center; }
.org-pv .hero-pv-i { gap: 6px; white-space: nowrap; min-width: 0; }
.org-pv .hero-pv-i em { font-size: 10.5px; letter-spacing: .06em; }
@media (max-width: 380px) { .org-pv { flex-wrap: wrap; } }
/* Section headings with a count and "+N more" button stay on one line (26.5.4) */
html body .section-h { flex-wrap: nowrap; gap: 10px; }
html body .section-h > h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
html body .section-h .sh-right { flex: none; flex-wrap: nowrap; white-space: nowrap; gap: 8px; margin-left: auto; }
html body .section-h .count, html body .section-h .more-btn { white-space: nowrap; flex: none; }
html body .section-h .more-btn { padding: 0 10px; }
/* Company page blocks (26.5.5). Phones only: header card, Contract/Hourly, Jobsites, People, Active tasks, then the rest */
.ob:empty { display: none; }
.ob > .section-h:first-child { margin-top: 4px; }
@media (max-width: 759px) {
  .org3:not(.site3) { display: flex; flex-direction: column; gap: 14px; }
  .org3:not(.site3) > .org3-col { display: contents; }
  .ob-hero { order: 1; } .ob-pv { order: 2; } .ob-sites { order: 3; } .ob-people { order: 4; } .ob-tasks { order: 5; }
  .ob-money { order: 6; } .ob-invs { order: 7; } .ob-notes { order: 8; } .ob-paytype { order: 9; } .ob-leads { order: 10; } .ob-docs { order: 11; }
}
@media (max-width: 720px) { html body .facts { margin: 0 0 14px; padding: 0 0 4px; max-width: 100%; min-width: 0; } }   /* no sideways page scroll on phones (26.5.5) */
@media (max-width: 759px) { .org3:not(.site3) { width: 100%; min-width: 0; } .org3:not(.site3) .ob { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } }
/* View all in lists (26.5.7): the shrunk table keeps sharp text and lines on iPad / Safari */
.table-wrap.fit-on { overflow: hidden !important; }
.table-wrap.fit-on > table { will-change: auto; -webkit-font-smoothing: antialiased; }

/* 26.5.9 — Field Tracker: column titles repeat under each crew header */
.tbl.wc.crew-cols tr.col-row th { position: static; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); border-top: 0; }
.tbl.wc.crew-cols tr.col-row:hover { background: none; }
.tbl.wc.crew-cols tr.col-row + tr td { border-top: 0; }

/* 26.6.0 — Beta: New tracker sorting (sections) */
.ts-sec { margin: 0 0 18px; }
.ts-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 0 0 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--ts, var(--accent)); cursor: pointer; user-select: none; }
.ts-h .ts-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.ts-h .ts-t b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.ts-h .ts-t em { font-style: normal; font-size: 13px; color: var(--muted); }
.ts-h .count { margin-left: auto; flex: none; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ts-h .fold-chev { color: var(--muted); width: 12px; flex: none; }
.ts-sec.folded .ts-h { margin-bottom: 0; }
.ts-bad { --ts: var(--bad, #e5484d); }
.ts-now { --ts: var(--accent); }
.ts-soon { --ts: var(--warn, #f5a524); }
.ts-done { --ts: var(--ok, #30a46c); }
.ts-body > .ts-day, .ts-sub .period-body > .ts-day { margin-bottom: 12px; }
.ts-sub { margin: 0 0 10px; }
.ts-sub-h { cursor: pointer; }
.ts-bld-h { display: flex; align-items: center; gap: 10px; }
.ts-bld-h .dh-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ts-bld-h .count { margin-left: auto; }
.ts-age { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ts-age.late { background: var(--bad-soft); color: var(--bad, #e5484d); }
.ts-sortchip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.ts-sortchip .btn { margin-left: auto; }
.ts-paid-link { margin-top: -6px; }
@media (max-width: 699px) { .ts-h { padding: 9px 12px; } .ts-h .ts-t b { font-size: 16px; } .ts-h .ts-t em { display: none; } }
@media (max-width: 699px) { .ts-bld-h { flex-wrap: wrap; row-gap: 2px; } .ts-bld-h .dh-title { flex: 1 1 auto; } .ts-bld-h .count { flex-basis: 100%; margin-left: 0; font-size: 13px; } .ts-h .count { font-size: 12px; } }

/* 26.6.1 — Beta: Company & jobsite pages like Settings */
.dt-wrap { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.dt-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dt-side .cx-hero { margin: 0; }
.dt-left > .list { margin: 0; }
.dt-nav { position: static; gap: 4px; }
.dt-nav .set-tl em { white-space: normal; }
.dt-pane { min-width: 0; }
.dt-pane .set-head { margin-bottom: 14px; }
.dt-body > .section-h:first-child h2 { display: none; }
.dt-body > .section-h:first-child { justify-content: flex-end; margin: 0 0 8px; min-height: 0; }
.dt-body > .section-h:first-child:not(:has(> :not(h2))) { display: none; }
.dt-body > .list:first-child, .dt-body > .org-money:first-child, .dt-body > .grp-box:first-child { margin-top: 0; }
@media (min-width: 1360px) {
  .dt-body .list.dt2, .dt-tasks .list, .dt-people .list, .dt-contacts .list, .dt-sites > .list:not(.grp-box), .dt-money .list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dt-body .list.dt2 > .row, .dt-tasks .list > .row, .dt-people .list > .row, .dt-contacts .list > .row, .dt-sites > .list:not(.grp-box) > .row, .dt-money .list > .row { border-bottom: 1px solid var(--line); }
  .dt-body .list.dt2 > .row:nth-child(odd), .dt-tasks .list > .row:nth-child(odd), .dt-people .list > .row:nth-child(odd), .dt-contacts .list > .row:nth-child(odd), .dt-sites > .list:not(.grp-box) > .row:nth-child(odd), .dt-money .list > .row:nth-child(odd) { border-right: 1px solid var(--line); }
  .dt-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
}
@media (max-width: 899px) {
  .dt-wrap { grid-template-columns: 1fr; gap: 12px; }
  .dt-side { position: static; }
  .dt-nav { position: sticky; top: 0; z-index: 3; flex-direction: row; overflow-x: auto; gap: 6px; margin: 0 -16px; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: none; }
  .dt-nav::-webkit-scrollbar { display: none; }
  .dt-nav .set-tab { width: auto; flex: none; padding: 6px 12px 6px 6px; border-radius: 999px; gap: 8px; border: 1px solid var(--line); }
  .dt-nav .set-tab .set-ic { width: 26px; height: 26px; border-radius: 50%; } .dt-nav .set-tab .set-ic svg { width: 14px; height: 14px; }
  .dt-nav .set-tl em { display: none; } .dt-nav .set-tl b { font-size: 13.5px; white-space: nowrap; }
  .dt-pane .set-head h2 { font-size: 21px; } .dt-pane .set-ic.big { width: 40px; height: 40px; }
}
/* Beta picker pictures */
.dtl-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.dtl-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit; }
.dtl-opt b { font-size: 14px; } .dtl-opt em { font-style: normal; font-size: 12px; color: var(--muted); text-align: center; }
.dtl-opt.on b { color: var(--accent); }
.dp-win { width: 100%; max-width: 230px; aspect-ratio: 16 / 10; display: flex; gap: 6px; padding: 8px; border-radius: 10px; background: #f4f5f7; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: box-shadow .12s, transform .12s; }
.dtl-opt:hover .dp-win { transform: translateY(-2px); }
.dtl-opt.on .dp-win { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--accent); }
.dp-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dp-t .dpx-nav { flex: 0 0 32%; }
.dp-hero { display: block; height: 30%; border-radius: 5px; background: linear-gradient(135deg, #2f6fed, #5b8ff5); }
.dp-ln { display: block; height: 5px; border-radius: 3px; background: #c9ccd3; }
.dp-ln.h { height: 6px; background: #8a8f99; margin-bottom: 1px; }
.dp-row { display: block; height: 11px; border-radius: 3px; background: #fff; border: 1px solid #e1e3e8; }
.dp-tile { display: block; height: 20px; border-radius: 4px; background: #fff; border: 1px solid #e1e3e8; }
.dp-tab { display: block; height: 9px; border-radius: 3px; background: #e3e5ea; }
.dp-tab.on { background: #2f6fed; }
.dp-pane { padding: 4px 5px; border-radius: 6px; background: #eceef2; }
.dp-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
@media (max-width: 520px) { .dtl-pick { gap: 10px; } }
.dt-pay .pay-type, .dt-pay .org-pv { max-width: 720px; }
.dt-side.dt-free { position: static; }
/* 26.6.3 — DS region beside contact names on the builder page */
.rg-pill { margin-left: 6px; vertical-align: 2px; font-weight: 700; letter-spacing: .03em; }
/* 26.6.4 — builder page People split by DS region */
.rg-sec + .rg-sec { margin-top: 12px; }
.rg-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; font-size: 13px; }
.rg-sec-h .rg-pill { margin-left: 0; }
.rg-sec-h b { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.rg-sec-h .count { margin-left: auto; color: var(--muted); }
@media (min-width: 1360px) { .dt-people .rg-sec .list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dt-people .rg-sec .list > .row { border-bottom: 1px solid var(--line); } .dt-people .rg-sec .list > .row:nth-child(odd) { border-right: 1px solid var(--line); } }
/* 26.6.5 — two even columns: rows can't push their column wider */
.dt-body .list > .row { min-width: 0; }
.dt-body .list > .row .row-main { min-width: 0; }
/* 26.6.7 — scheduled date in the row's top-right corner (jobsite + company pages) */
.th-when { float: right; padding-left: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent); white-space: nowrap; }
.th-when svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; position: relative; top: -.5px; }
.th-when.now { color: var(--ok); }
.th-when.past { color: var(--muted); font-weight: 600; }
.th-when.none { color: var(--warn); }
/* the section summary already gives the count — drop the repeated number above the list */
.dt-body > .section-h:first-child > .sh-right > .count { display: none; }
/* 26.6.9 — Newest / Oldest button on Company, Jobsite and Crew task lists */
.tsort { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.tsort button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 650; color: var(--muted); padding: 4px 10px; border-radius: 999px; cursor: pointer; line-height: 1.2; min-height: 0; }
.tsort button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.sh-right:has(.tsort) { display: inline-flex; align-items: center; gap: 8px; }
/* Crew profile page */
.dt-crew .om-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .dt-crew .om-tiles { grid-template-columns: 1fr 1fr; } }
.crew3 .om-tiles .om-t:first-child { grid-column: 1 / -1; }
/* 26.6.12 — View Crew Portal / Copy invite under the crew header card */
.crew-portal-acts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.crew3 .crew-portal-acts { margin: -2px 0 14px; }
.crew-portal-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.crew-portal-acts .btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crew3 .pay-hold .row-title, .crew3 .pay-hold .row-sub, .dt-crew .pay-hold .row-sub { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; }
/* 26.6.13 — crew portal Pay page: permanent estimate notice (no close button) */
.pay-notice { margin: 0 0 12px; padding: 12px 14px 12px 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13.5px; line-height: 1.45; position: relative; }
.pay-notice::before { content: "i"; position: absolute; left: 13px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); font: 700 12px/18px Georgia, serif; text-align: center; font-style: italic; }
.pay-notice b { display: block; margin-bottom: 2px; font-size: 14px; }
/* 26.6.14 — Settings-style pages: the left column scrolls on its own (never with the page) */
@media (min-width: 900px) {
  .dt-side > * { flex-shrink: 0; }
  .dt-side { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 4px 8px 16px; margin: -4px -8px -16px; }
  .dt-side::-webkit-scrollbar { width: 6px; } .dt-side::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 3px; }
}

/* ===== 26.7.0 — three new light themes. Each one also carries .theme-lightblue (set by applyTheme via `base`),
   so it gets all of Light Blue's polish; the blocks below swap the palette and every hard-coded blue. ===== */
body.theme-limestone {   /* warm stone + terracotta: sitework colors */
  --bg: #f7f4ee; --surface: #fffdf9; --surface-2: #f1ece3; --line: rgba(74,56,36,.12); --line-strong: rgba(74,56,36,.22);
  --text: #26201a; --text-2: #4a4036; --muted: #7b6f62;
  --accent: #b5502a; --accent-ink: #ffffff; --accent-soft: rgba(181,80,42,.11);
  --ok: #2f7d4a; --ok-soft: rgba(47,125,74,.12); --warn: #c27a0e; --warn-soft: rgba(194,122,14,.13); --bad: #c0352b; --bad-soft: rgba(192,53,43,.11); --info: #5a5fb5; --info-soft: rgba(90,95,181,.11);
  --bar: rgba(247,244,238,.78); --side: rgba(241,236,227,.82); --card: rgba(255,253,249,.88); --chip: rgba(241,236,227,.92);
  --glow1: rgba(181,80,42,.10); --glow2: rgba(214,170,96,.16); --glow3: rgba(120,140,90,.10);
  background: #f7f4ee;
}
body.theme-blueprint {   /* drafting paper: cool white, faint grid, cobalt ink */
  --bg: #f6f9fd; --surface: #ffffff; --surface-2: #eef3fa; --line: rgba(20,45,90,.11); --line-strong: rgba(20,45,90,.2);
  --text: #0f1d36; --text-2: #2c3d5c; --muted: #66758f;
  --accent: #1f5fd6; --accent-ink: #ffffff; --accent-soft: rgba(31,95,214,.10);
  --ok: #18865a; --ok-soft: rgba(24,134,90,.12); --warn: #c77a06; --warn-soft: rgba(199,122,6,.13); --bad: #d0343a; --bad-soft: rgba(208,52,58,.11); --info: #6a4fd8; --info-soft: rgba(106,79,216,.11);
  --bar: rgba(246,249,253,.8); --side: rgba(238,243,250,.85); --card: rgba(255,255,255,.9); --chip: rgba(238,243,250,.95);
  --glow1: rgba(31,95,214,.08); --glow2: rgba(31,95,214,.05); --glow3: rgba(0,160,200,.07);
  background: #f6f9fd;
}
body.theme-brass {   /* gallery white, graphite ink, brass accent */
  --bg: #f5f5f3; --surface: #ffffff; --surface-2: #efefec; --line: rgba(30,30,28,.10); --line-strong: rgba(30,30,28,.2);
  --text: #18181b; --text-2: #3a3a40; --muted: #74747c;
  --accent: #9a6b12; --accent-ink: #ffffff; --accent-soft: rgba(154,107,18,.11);
  --ok: #2e7d4f; --ok-soft: rgba(46,125,79,.12); --warn: #b86e00; --warn-soft: rgba(184,110,0,.13); --bad: #c23a33; --bad-soft: rgba(194,58,51,.11); --info: #4b5bb8; --info-soft: rgba(75,91,184,.11);
  --bar: rgba(245,245,243,.82); --side: rgba(239,239,236,.86); --card: rgba(255,255,255,.92); --chip: rgba(239,239,236,.95);
  --glow1: rgba(154,107,18,.07); --glow2: rgba(200,170,110,.10); --glow3: rgba(60,60,70,.05);
  background: #f5f5f3;
}
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral)::before { background: radial-gradient(40% 35% at 8% 70%, var(--glow1), transparent 70%), radial-gradient(35% 30% at 14% 40%, var(--glow2), transparent 70%), radial-gradient(45% 40% at 95% 100%, var(--glow3), transparent 70%); }
body.theme-blueprint::before { background: linear-gradient(rgba(31,95,214,.05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(31,95,214,.05) 1px, transparent 1px) 0 0 / 24px 24px, radial-gradient(45% 40% at 95% 100%, var(--glow3), transparent 70%); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .topbar { background: var(--bar); border-bottom-color: var(--line); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .side-new { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .tabbar, body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral).new-ui .tabbar { background: var(--bar); border-top-color: var(--line); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .tab-add-circle { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral).new-ui .tab-add-circle { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 4px var(--surface); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) :is(.list, .card, .stat) { background: var(--card); border-color: var(--line); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral).new-ui .row.trow-m { background: var(--card); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) :is(input, select, textarea):focus { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .sheet { background: color-mix(in srgb, var(--surface) 90%, transparent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .sheet.full { background: color-mix(in srgb, var(--bg) 96%, transparent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) :is(.group-h.date-h, .wc-day > .group-h) { background: var(--chip); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) :is(.wc-day .group-h, .grp-box > .group-h, .cal-day-box .group-h) { background: var(--chip) !important; }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .cx-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--hcc) 14%, var(--card)) 0%, var(--card) 70%); border-color: var(--line); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral).new-ui [data-sec] { --sc: var(--accent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .pay-card { border-color: var(--accent); background: var(--accent-soft); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .rd.ok:not(:last-child)::after { background: var(--accent); }
body:is(.theme-limestone, .theme-blueprint, .theme-brass, .theme-seashell, .theme-seashellcoral) .rd.ok .rd-dot { background: var(--accent); border-color: var(--accent); }
body.theme-brass .topbar h1, body.theme-brass .cx-name, body.theme-brass .set-head h2 { letter-spacing: -.025em; }
body.theme-limestone .side-item.on, body.theme-brass .side-item.on, body.theme-blueprint .side-item.on { background: var(--accent-soft); color: var(--accent); }
/* 26.7.1 — Seashell: warm shell-cream background, warm charcoal text; teal-blue or coral accent */
body.theme-seashell, body.theme-seashellcoral {
  --bg: #fbf4ee; --surface: #fffaf6; --surface-2: #f6ebe2; --line: rgba(90,60,40,.11); --line-strong: rgba(90,60,40,.2);
  --text: #2a2421; --text-2: #4d4440; --muted: #85776f;
  --ok: #2f8a5b; --ok-soft: rgba(47,138,91,.12); --warn: #c47a12; --warn-soft: rgba(196,122,18,.13); --bad: #c8443a; --bad-soft: rgba(200,68,58,.11); --info: #5d63b8; --info-soft: rgba(93,99,184,.11);
  --bar: rgba(251,244,238,.8); --side: rgba(246,235,226,.86); --card: rgba(255,250,246,.9); --chip: rgba(246,235,226,.92);
  --glow1: rgba(240,140,110,.13); --glow2: rgba(235,195,150,.18); --glow3: rgba(22,128,143,.09);
  background: #fbf4ee;
}
body.theme-seashell { --accent: #16808f; --accent-ink: #ffffff; --accent-soft: rgba(22,128,143,.11); }
body.theme-seashellcoral { --accent: #d4644a; --accent-ink: #ffffff; --accent-soft: rgba(212,100,74,.11); --glow1: rgba(212,100,74,.12); }
/* 26.7.1 — theme picker: Light / Dark sections, mini previews */
.tp-h { display: inline-flex; align-items: center; gap: 7px; }
.tp-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
@media (min-width: 560px) { .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 900px) { .tp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.theme-btn.tp { flex-direction: column; align-items: stretch; gap: 7px; min-height: 0; padding: 7px; border-radius: 14px; }
.tp-win { display: flex; gap: 5px; height: 74px; padding: 5px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tp-side { flex: 0 0 28%; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 6px; }
.tp-side b { display: block; height: 8px; border-radius: 3px; margin-bottom: 2px; }
.tp-win i { display: block; border-radius: 2px; flex: none; }
.tp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 3px 1px; }
.tp-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px; border-radius: 5px; border: 1px solid; }
.tp-card em { position: absolute; right: 6px; top: 6px; width: 14px; height: 6px; border-radius: 3px; }
.tp-label { font-size: 13px; font-weight: 650; text-align: left; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-btn.tp.on .tp-label { color: var(--accent); }
/* 26.7.2 — Beta: Pricing cards (style B3) */
.pc3-sec { margin: 0 0 22px; }
.pc3-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 10px; } .pc3-sec-h b { font-size: 17px; font-weight: 800; } .pc3-sec-h span { color: var(--muted); font-size: 13px; }
.pc3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pc3 { display: flex; flex-direction: column; align-items: stretch; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: var(--card, var(--surface)); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; min-width: 0; }
.pc3:hover { transform: translateY(-2px); }
.pc3-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.pc3-price { margin-top: 10px; font-size: 30px; font-weight: 800; letter-spacing: -.025em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pc3-price small { font-size: 13px; color: var(--muted); font-weight: 650; letter-spacing: 0; }
.pc3-cap { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc3-crew { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pc3-crew > span { font-size: 13px; font-weight: 700; color: var(--text-2); } .pc3-crew b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc3-keep { margin-top: 4px; font-size: 12.5px; color: var(--muted); text-align: right; } .pc3-keep b { color: var(--ok); }
.pc3-keep em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); margin-left: 4px; }
.pc3-keep em.neg { background: var(--bad-soft); color: var(--bad); }
.pc3-add { border: 2px dashed var(--line-strong); background: transparent; border-radius: 16px; color: var(--accent); font: inherit; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 170px; cursor: pointer; }
.pc3-add span { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.pc3-add:hover { border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 520px) { .pc3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pc3 { padding: 12px; } .pc3-name { font-size: 19px; } .pc3-price { font-size: 24px; } .pc3-crew b { font-size: 17px; } .pc3-add { min-height: 140px; } }

/* ===== 26.7.3 — three new dark themes with abstract backgrounds (built on Dark via `base`) ===== */
body.theme-topo {   /* night survey: deep pine slate, topographic contour lines, survey-orange accent */
  --bg: #0e1513; --surface: rgba(22,32,29,.86); --surface-2: rgba(30,43,39,.9); --line: rgba(190,230,210,.09); --line-strong: rgba(190,230,210,.18);
  --text: #e8f1ec; --text-2: #b8c9c0; --muted: #85998f;
  --accent: #ff8a3d; --accent-ink: #1a0d04; --accent-soft: rgba(255,138,61,.16);
  --ok: #4fd18b; --ok-soft: rgba(79,209,139,.14); --warn: #f3b34a; --warn-soft: rgba(243,179,74,.15); --bad: #ff6f61; --bad-soft: rgba(255,111,97,.15); --info: #8fb7ff; --info-soft: rgba(143,183,255,.15);
  --bar: rgba(14,21,19,.78); --side: rgba(12,19,17,.82); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.6);
  background: #0e1513;
}
body.theme-topo::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(255,138,61,.10), transparent 70%),
    radial-gradient(50% 45% at 10% 90%, rgba(79,209,139,.08), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23a8e0c4' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 120c80-40 160 30 240 0s160-70 240-20 120 60 160 30'/%3E%3Cpath d='M-20 160c80-40 160 30 240 0s160-70 240-20 120 60 160 30'/%3E%3Cpath d='M-20 200c90-30 150 40 250 10s170-60 230-10 120 50 160 25'/%3E%3Cpath d='M-20 250c100-20 140 50 260 20s160-50 220 0 120 40 160 20'/%3E%3Cpath d='M-20 310c110-10 130 60 270 30s150-40 210 10 120 30 160 15'/%3E%3Cellipse cx='420' cy='430' rx='120' ry='70'/%3E%3Cellipse cx='420' cy='430' rx='88' ry='50'/%3E%3Cellipse cx='420' cy='430' rx='56' ry='31'/%3E%3Cellipse cx='420' cy='430' rx='26' ry='14'/%3E%3Cellipse cx='130' cy='470' rx='90' ry='55' transform='rotate(-18 130 470)'/%3E%3Cellipse cx='130' cy='470' rx='60' ry='36' transform='rotate(-18 130 470)'/%3E%3Cellipse cx='130' cy='470' rx='30' ry='17' transform='rotate(-18 130 470)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 600px,
    #0e1513; }
body.theme-aurora {   /* northern lights: ink navy, soft teal / violet light bands, cyan accent */
  --bg: #0a0d18; --surface: rgba(20,24,42,.78); --surface-2: rgba(28,33,56,.85); --line: rgba(170,190,255,.10); --line-strong: rgba(170,190,255,.2);
  --text: #eef1ff; --text-2: #bcc3e0; --muted: #8c93b5;
  --accent: #3fe0d0; --accent-ink: #04201d; --accent-soft: rgba(63,224,208,.15);
  --ok: #5ae09a; --ok-soft: rgba(90,224,154,.14); --warn: #ffc15a; --warn-soft: rgba(255,193,90,.15); --bad: #ff6e8a; --bad-soft: rgba(255,110,138,.15); --info: #a99bff; --info-soft: rgba(169,155,255,.16);
  --bar: rgba(10,13,24,.7); --side: rgba(9,12,22,.78); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.7);
  background: #0a0d18;
}
body.theme-aurora::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 40% at 20% 0%, rgba(63,224,208,.22), transparent 70%),
    radial-gradient(55% 45% at 75% 8%, rgba(140,100,255,.24), transparent 70%),
    radial-gradient(40% 35% at 95% 60%, rgba(63,180,255,.12), transparent 70%),
    radial-gradient(50% 40% at 5% 95%, rgba(150,90,255,.12), transparent 70%),
    linear-gradient(180deg, #0c1022 0%, #0a0d18 60%); }
body.theme-aurora::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='40' cy='60' r='.8' opacity='.5'/%3E%3Ccircle cx='310' cy='30' r='.7' opacity='.4'/%3E%3Ccircle cx='200' cy='140' r='.6' opacity='.35'/%3E%3Ccircle cx='360' cy='210' r='.9' opacity='.45'/%3E%3Ccircle cx='90' cy='300' r='.6' opacity='.3'/%3E%3Ccircle cx='250' cy='360' r='.8' opacity='.4'/%3E%3Ccircle cx='150' cy='20' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 400px 400px; }
body.theme-ember {   /* forge: warm black, glowing ember horizon, diagonal grain, amber accent */
  --bg: #120d0b; --surface: rgba(30,22,19,.84); --surface-2: rgba(40,30,26,.9); --line: rgba(255,210,180,.09); --line-strong: rgba(255,210,180,.18);
  --text: #f6ece6; --text-2: #cdbcb2; --muted: #9c8b81;
  --accent: #ffad33; --accent-ink: #2a1600; --accent-soft: rgba(255,173,51,.15);
  --ok: #6fd48f; --ok-soft: rgba(111,212,143,.14); --warn: #ffc24d; --warn-soft: rgba(255,194,77,.15); --bad: #ff6a55; --bad-soft: rgba(255,106,85,.16); --info: #b49cff; --info-soft: rgba(180,156,255,.15);
  --bar: rgba(18,13,11,.78); --side: rgba(16,11,9,.84); --shadow: 0 1px 2px rgba(0,0,0,.45), 0 12px 30px -14px rgba(0,0,0,.7);
  background: #120d0b;
}
body.theme-ember::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 45% at 50% 115%, rgba(255,110,30,.30), rgba(255,70,20,.10) 45%, transparent 75%),
    radial-gradient(35% 30% at 92% 8%, rgba(255,173,51,.10), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,200,160,.025) 0 2px, transparent 2px 14px),
    #120d0b; }
/* shared: glassy panels so the artwork shows through */
body:is(.theme-topo, .theme-aurora, .theme-ember) { color-scheme: dark; }
body:is(.theme-topo, .theme-aurora, .theme-ember) :is(.topbar, .tabbar) { background: var(--bar); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-color: var(--line); }
body:is(.theme-topo, .theme-aurora, .theme-ember) .sidebar { background: var(--side); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-right: 1px solid var(--line); }
body:is(.theme-topo, .theme-aurora, .theme-ember) :is(.list, .card, .stat, .cx-hero, .org-money, .ap-card) { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
body:is(.theme-topo, .theme-aurora, .theme-ember) :is(.wc-day .group-h, .grp-box > .group-h, .cal-day-box .group-h, .group-h.date-h) { background: var(--surface-2) !important; color: var(--text); }
body:is(.theme-topo, .theme-aurora, .theme-ember) .side-new, body:is(.theme-topo, .theme-aurora, .theme-ember) .tab-add-circle { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
body:is(.theme-topo, .theme-aurora, .theme-ember) .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body:is(.theme-topo, .theme-aurora, .theme-ember) .side-item.on { background: var(--accent-soft); color: var(--accent); }
body:is(.theme-topo, .theme-aurora, .theme-ember) .cx-hero { background: linear-gradient(120deg, color-mix(in srgb, var(--hcc, var(--accent)) 16%, var(--surface)) 0%, var(--surface) 70%); }
body:is(.theme-topo, .theme-aurora, .theme-ember) .sheet { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
body:is(.theme-topo, .theme-aurora, .theme-ember) :is(input, select, textarea) { background: rgba(255,255,255,.05); border-color: var(--line-strong); color: var(--text); }
body:is(.theme-topo, .theme-aurora, .theme-ember) :is(input, select, textarea):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
body.theme-aurora .topbar h1, body.theme-aurora .cx-name { background: linear-gradient(90deg, #eef1ff, #b9fff6 60%, #d6c9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.theme-ember .topbar h1 { text-shadow: 0 0 24px rgba(255,140,40,.25); }
/* preview tiles for the artwork themes */
.tp-win.tp-art-topo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cg fill='none' stroke='%23a8e0c4' stroke-opacity='.22'%3E%3Cpath d='M0 20c30-12 50 8 80 0s50-18 80-6'/%3E%3Cpath d='M0 32c30-12 50 8 80 0s50-18 80-6'/%3E%3Cellipse cx='120' cy='60' rx='30' ry='14'/%3E%3Cellipse cx='120' cy='60' rx='18' ry='8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(60% 60% at 90% 0, rgba(255,138,61,.22), transparent 70%); background-size: cover; }
.tp-win.tp-art-aurora { background-image: radial-gradient(70% 55% at 20% 0, rgba(63,224,208,.45), transparent 70%), radial-gradient(55% 55% at 80% 5%, rgba(140,100,255,.45), transparent 70%); }
.tp-win.tp-art-ember { background-image: radial-gradient(90% 55% at 50% 120%, rgba(255,110,30,.55), transparent 75%), repeating-linear-gradient(135deg, rgba(255,200,160,.05) 0 1px, transparent 1px 6px); }
/* 26.7.4 — left menu stays put on iPad / touch: vertical scrolling only (and only when it doesn't fit), no bounce into the page, no scroll bars */
@media (min-width: 900px) {
  .sidebar { overscroll-behavior: none; touch-action: pan-y; }
  .side-menu { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .side-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .side-menu { margin: 0; padding: 0 0 0 0; }
  .side-menu > *, .side-item, .side-sec { max-width: 100%; box-sizing: border-box; }
  .sidebar .side-brand, .sidebar .side-new, .sidebar .side-foot { touch-action: none; }
  /* the left column on Like-Settings pages: same treatment */
  .dt-side { overflow-x: hidden; touch-action: pan-y; scrollbar-width: none; }
  .dt-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
@media (min-width: 900px) { html body .side-menu button.side-sec.side-more { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } }
/* 26.7.6 — iPad drawing glitch: artwork themes use near-solid panels (no blur behind cards / lists), so Safari doesn't drop parts of long lists */
body.theme-topo { --surface: rgba(22,32,29,.96); --surface-2: rgba(30,43,39,.97); }
body.theme-aurora { --surface: rgba(20,24,42,.95); --surface-2: rgba(28,33,56,.96); }
body.theme-ember { --surface: rgba(30,22,19,.96); --surface-2: rgba(40,30,26,.97); }
/* 26.7.7 — the page-wide bounce block (26.7.5) is removed: iPad Safari misdrew pages with it (blank / black patches).
   Instead the left menu is pinned to the screen (position: fixed), which iPad keeps still during the bounce, so it never lifts off. */
@media (min-width: 900px) {
  body { --nav-w: 196px; }
  body.new-ui:not(.nav-collapsed) { --nav-w: 230px; }
  body.menu-sz-m:not(.nav-collapsed) { --nav-w: 240px; }
  body.menu-sz-l:not(.nav-collapsed) { --nav-w: 250px; }
  body.nav-collapsed { --nav-w: 68px; }
  html body .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100dvh; width: var(--nav-w); z-index: 15; transition: width .22s ease; }
  html body .app > .main { grid-column: 2; min-width: 0; }
  html body.focus .app > .main { grid-column: 1 / -1; }
}
/* 26.7.8 — hover on iPad with a mouse / trackpad. iPad reports itself "touch first", so the original (hover: hover) rules never ran there.
   pages.js adds body.has-mouse the moment real mouse / trackpad movement is seen (never for a finger), and these rules key off that. */
body.has-mouse :is(button.row, .row.trow-h):hover { background: var(--surface-2); }
body.has-mouse :is(.tbl.wc tbody tr:not(.crew-row):not(.col-row), .tbl.doc tbody tr):hover { background: var(--surface-2); }
body.has-mouse:is(.theme-topo, .theme-aurora, .theme-ember) :is(button.row, .row.trow-h, .tbl.wc tbody tr:not(.crew-row):not(.col-row)):hover { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
body.has-mouse:is(.theme-lightblue, .theme-applemusic) :is(button.row, .row.trow-h):hover { background: rgba(60,60,67,.05); }
body.has-mouse.theme-spotify :is(button.row, .row.trow-h):hover { background: #282828; }
body.has-mouse .wiz-a .wiz-tile:hover, body.has-mouse .wiz-a .wiz-tile.pri:hover { background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); color: var(--accent-ink, #fff); border-color: transparent; box-shadow: 0 12px 26px -12px var(--accent); }
/* 26.8.0 — Pricing cards beta: step-by-step service wizard */
.pw { max-width: 560px; margin: 0 auto; padding: 4px 0 8px; }
.pw-kick { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pw-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 18px; } .pw-dots i { width: 26px; height: 5px; border-radius: 3px; background: var(--line-strong); } .pw-dots i.done { background: color-mix(in srgb, var(--accent) 55%, transparent); } .pw-dots i.on { background: var(--accent); width: 40px; }
.pw-q { margin: 0 0 14px; text-align: center; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.pw-big { width: 100%; font-size: 22px; font-weight: 700; padding: 14px 16px; border-radius: 14px; }
.pw-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.pw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); } .pw-row > span { font-weight: 700; color: var(--text-2); }
.pw-units { width: 90px; text-align: center; font-size: 18px; font-weight: 700; }
.pw-money { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 18px; border-radius: 18px; background: var(--accent-soft); }
.pw-money.crew { background: var(--surface-2); }
.pw-money span { font-size: 34px; font-weight: 800; color: var(--accent); } .pw-money.crew span { color: var(--text); }
.pw-money input { width: 220px; max-width: 60%; font-size: 44px; font-weight: 800; letter-spacing: -.02em; text-align: center; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.pw-money em { font-style: normal; color: var(--muted); font-weight: 650; }
.pw-hint { text-align: center; color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }
.pw-keep { text-align: center; margin-top: 12px; font-size: 15px; color: var(--muted); } .pw-keep b { color: var(--ok); font-size: 18px; } .pw-keep b.neg { color: var(--bad); }
.pw-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pw-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.pw-opt b { font-size: 15px; } .pw-opt span { font-size: 12.5px; color: var(--muted); } .pw-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pw-opt:disabled { opacity: .45; cursor: default; }
.pw-mat { display: flex; justify-content: center; margin-bottom: 14px; }
.pw-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pw-card { cursor: default; } .pw-card:hover { transform: none; }
.pw-edit { display: flex; flex-direction: column; gap: 8px; }
.pw-ed { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
.pw-ed span { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .pw-ed b { grid-row: 2; font-size: 15px; } .pw-ed i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; color: var(--accent); font-weight: 700; font-size: 13px; }
.pw-del { margin-top: 18px; }
.pw-foot { display: flex; justify-content: center; margin-top: 14px; min-height: 8px; }
.pw-hide-table .svc-block { display: none !important; }
.pw-note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 4px 0 14px; border-radius: 14px; background: var(--accent-soft); }
.pw-note svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; } .pw-note div { flex: 1; display: flex; flex-direction: column; } .pw-note b { font-size: 14.5px; } .pw-note span { font-size: 13px; color: var(--muted); }
.pw-hide-table .pw-note { order: -1; }
@media (max-width: 560px) { .pw-review { grid-template-columns: 1fr; } .pw-q { font-size: 22px; } .pw-money input { font-size: 36px; } .pw-pick { grid-template-columns: 1fr; } }
/* 26.8.1 — Pricing cards: section titles stand out (bigger, heavier, accent bar, more room above) */
.pc3-sec { margin: 0 0 30px; }
.pc3-sec + .pc3-sec { padding-top: 6px; }
.pc3-sec-h { align-items: center; gap: 12px; margin: 0 2px 14px; padding-left: 14px; border-left: 5px solid var(--accent); }
.pc3-sec-h b { font-size: 28px; font-weight: 850; letter-spacing: -.025em; line-height: 1.1; color: var(--text); }
.pc3-sec-h span { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 520px) { .pc3-sec-h b { font-size: 22px; } .pc3-sec-h span { font-size: 11px; padding: 3px 8px; } .pc3-sec-h { flex-wrap: wrap; row-gap: 6px; } }
/* 26.8.2 — crew title (what the crew portal shows instead of our work name) */
.th-crew-title { margin-top: 2px; font-size: 13px; color: var(--muted); } .th-crew-title b { color: var(--text-2); font-weight: 700; }
.crew-title-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 650; vertical-align: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-title-f em { font-style: normal; font-weight: 500; font-size: 12.5px; }
/* 26.8.3 — crew title in the wizard, hourly crew pay */
.pw-ct { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; } .pw-ct > span { font-weight: 700; color: var(--text-2); font-size: 14px; } .pw-ct em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.pw-ct input { width: 100%; font-size: 16px; padding: 11px 14px; border-radius: 12px; }
.pw-mode { display: flex; justify-content: center; margin: -4px 0 14px; }
.pw-hr { display: flex; align-items: center; justify-content: center; gap: 10px; } .pw-hr > b { font-size: 24px; color: var(--muted); }
.pw-money.sm { padding: 12px 14px; flex: 1; } .pw-money.sm input { font-size: 32px; width: 110px; max-width: 70%; } .pw-money.sm span { font-size: 24px; }
.pw-keep b.plain { color: var(--text); }
.pc3-hr { font-style: normal; font-weight: 650; font-size: 11.5px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.pc3-ct { margin-top: 4px; font-size: 12.5px; color: var(--muted); } .pc3-ct b { color: var(--text-2); }
.crew-hr-box { margin: 2px 0 6px; } .crew-hr-box .check-label em, #at-more .check-label em, #at-more .field em { font-style: normal; font-weight: 500; font-size: 12.5px; }
/* 26.8.4 — service card: Schedule or Edit */
.pw-choose .pw-sum { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 8px 0 18px; } .pw-sum b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .pw-sum span { color: var(--muted); font-size: 14px; }
.pw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pw-two { grid-template-columns: 1fr; } }
/* 26.8.5 — Pricing: Cards / List toggle, list view */
.dt-body > .section-h:first-child > .sh-right > .tsort { display: inline-flex; }
.pl-list { margin: 0; }
.pl-row { display: flex; align-items: center; gap: 14px; }
.pl-row .row-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.pl-nums { display: flex; gap: 18px; flex: none; }
.pl-n { display: flex; flex-direction: column; align-items: flex-end; min-width: 72px; } .pl-n em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pl-n b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .pl-n.bill b { color: var(--accent); } .pl-n.keep b { color: var(--ok); } .pl-n.keep b.neg { color: var(--bad); }
.pl-n i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ok); }
.pl-add { display: flex; align-items: center; gap: 12px; color: var(--accent); } .pl-add .row-title { color: var(--accent); font-weight: 700; }
.pl-plus { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 20px; font-weight: 700; flex: none; }
@media (max-width: 620px) { .pl-row { flex-wrap: wrap; row-gap: 6px; } .pl-row > svg, .pl-row > .chev, .pl-row > :last-child:not(.pl-nums):not(.row-main) { display: none; } .pl-row .row-main { flex-basis: 100%; } .pl-nums { width: 100%; justify-content: space-between; gap: 8px; } .pl-n { align-items: flex-start; min-width: 0; } }
/* 26.8.6 — focus mode at every iPad / laptop width (it broke between 900 and 1023 px, where the menu showed but the page moved under it).
   iPad portrait (700–899 px) uses the bottom tab bar instead of a menu: focus mode hides that bar and gives the page its room. */
@media (min-width: 700px) {
  html body.focus .tabbar, html body.focus .segbar { display: none !important; }
  html body.focus .view { padding-bottom: calc(var(--safe-b) + 28px); }
  html body.focus .bulkbar, html body.focus .min-dock { bottom: calc(var(--safe-b) + 14px); }
}

/* 26.8.9 — New invoice editor (Beta). Everything scoped to .inv2 / .i2-layer so the classic form is untouched. */
@media (min-width: 700px) { .sheet:has(.inv2) { width: min(900px, 94vw) !important; max-height: 94dvh !important; } }
.inv2 { position: relative; --i2-card: var(--card, var(--surface)); }
.inv2 .i2-lbl { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.inv2 .i2-lbl em { font-style: normal; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.inv2 .i2-lbl em:empty { display: none; }
/* banner */
.inv2 .i2-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 22px 24px 18px; margin-bottom: 14px; color: var(--accent-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #000) 0%, var(--accent) 58%, color-mix(in srgb, var(--accent) 70%, #fff) 100%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 30%, transparent); }
.inv2 .i2-hero::after { content: ""; position: absolute; right: -70px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: color-mix(in srgb, var(--accent-ink) 9%, transparent); pointer-events: none; }
.inv2 .i2-hrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; position: relative; z-index: 1; }
.inv2 .i2-num span, .inv2 .i2-tot span { display: block; font-size: 14px; font-weight: 650; opacity: .82; }
.inv2 .i2-num b { display: block; font-size: 30px; font-weight: 850; letter-spacing: -.02em; line-height: 1.15; }
.inv2 .i2-num em { font-style: normal; font-size: 13.5px; font-weight: 600; opacity: .85; }
.inv2 .i2-tot { text-align: right; min-width: 0; }
.inv2 .i2-tot b { display: block; font-size: clamp(30px, 6vw, 46px); font-weight: 850; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inv2 .i2-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.inv2 .i2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 650; background: color-mix(in srgb, var(--accent-ink) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent-ink) 24%, transparent); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv2 .i2-pill i { font-style: normal; font-size: 13px; }
.inv2 .i2-pill[hidden] { display: none; }
.inv2 .i2-pill.stamp { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; background: var(--accent-ink); color: var(--accent); border-color: transparent; }
.inv2 .i2-pill.stamp.paid { background: var(--ok); color: #fff; }
.inv2 .i2-pill.stamp.late { background: var(--bad); color: #fff; }
/* status track */
.inv2 .i2-track { display: flex; align-items: center; gap: 12px; background: var(--i2-card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); }
.inv2 .i2-steps { display: flex; flex: 1; min-width: 0; }
.inv2 .i2-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; min-width: 0; }
.inv2 .i2-step b { font-size: 14px; font-weight: 750; }
.inv2 .i2-step small { font-size: 12px; font-weight: 600; color: var(--muted); }
.inv2 .i2-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 850; font-size: 15px; background: var(--surface-2); color: var(--muted); position: relative; z-index: 1; transition: transform .15s; }
.inv2 .i2-dot svg { width: 17px; height: 17px; }
.inv2 .i2-step.done .i2-dot { background: var(--ok); color: #fff; box-shadow: 0 0 0 6px var(--ok-soft); }
.inv2 .i2-step.next .i2-dot { background: var(--i2-card); color: var(--accent); border: 2.5px dashed var(--accent); }
.inv2 .i2-step.next b, .inv2 .i2-step.next small { color: var(--accent); }
.inv2 .i2-step:hover .i2-dot { transform: scale(1.08); }
.inv2 .i2-bar { position: absolute; top: 19px; left: 50%; width: 100%; height: 4px; border-radius: 4px; background: var(--surface-2); }
.inv2 .i2-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ok), var(--accent)); transition: width .6s ease; }
.inv2 .i2-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 14px; border: 0; font: inherit; font-size: 15px; font-weight: 800; color: var(--accent-ink); background: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); cursor: pointer; transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.inv2 .i2-cta span { transition: transform .15s; }
.inv2 .i2-cta:hover span { transform: translateX(3px); }
.inv2 .i2-cta:active { transform: scale(.97); }
.inv2 .i2-cta.pay { background: var(--ok); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--ok) 35%, transparent); }
.inv2 .i2-cta.done { background: var(--ok-soft); color: var(--ok); box-shadow: none; cursor: default; }
.inv2 .i2-cta.done svg { width: 17px; height: 17px; }
.inv2 .i2-note { font-size: 13px; color: var(--muted); margin: 8px 4px 0; }
.inv2 > div[style*="--d:1"] { margin-bottom: 14px; }
.inv2 .ip-wrap { margin-top: 0; }
/* cards */
.inv2 .i2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.inv2 .i2-tile { background: var(--i2-card); border: 2px solid transparent; outline: 1px solid var(--line); outline-offset: -2px; border-radius: 18px; padding: 14px 16px 12px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.inv2 .i2-tile:focus-within { border-color: var(--accent); outline-color: transparent; box-shadow: 0 0 0 5px var(--accent-soft); }
.inv2 .i2-tile .field { margin: 6px 0 0; }
.inv2 .i2-tile .field > span { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.inv2 .i2-tile > .field:first-of-type > span { display: none; }
.inv2 .i2-tile .field input, .inv2 .i2-tile .field select { border: 0; background-color: transparent; box-shadow: none !important; padding: 2px 30px 2px 0; min-height: 34px; font-size: 19px; font-weight: 750; letter-spacing: -.01em; color: var(--text); border-radius: 0; width: 100%; }
.inv2 .i2-tile .field input::placeholder { color: var(--muted); font-weight: 500; }
.inv2 .i2-tile .field [name="attention"] { font-size: 15px; font-weight: 600; min-height: 28px; }
.inv2 .i2-tile .manual-in input { border-bottom: 1.5px dashed var(--line-strong); font-size: 16px; }
.inv2 .i2-nd { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); gap: 12px; }
.inv2 .i2-nd input { font-size: 16px !important; font-weight: 700 !important; }
.inv2 .i2-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inv2 .i2-seg button { flex: 1 1 auto; border: 0; border-radius: 11px; padding: 9px 10px; background: var(--surface-2); color: var(--text-2); font-weight: 750; font-size: 13.5px; transition: background .15s, color .15s, transform .1s; }
.inv2 .i2-seg button:active { transform: scale(.96); }
.inv2 .i2-seg button.on { background: var(--text); color: var(--bg); }
.inv2 .i2-seg.sm button { padding: 6px 8px; font-size: 12.5px; }
.inv2 .i2-region { margin-top: 10px !important; }
.inv2 .i2-region > span { display: block !important; }
.inv2 .i2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; cursor: text; }
.inv2 .i2-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 15px; padding: 5px 4px 5px 11px; border-radius: 10px; animation: i2-pop .2s ease; }
.inv2 .i2-chip-x { border: 0; background: none; color: inherit; opacity: .55; font-size: 17px; line-height: 1; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; }
.inv2 .i2-chip-x:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 15%, transparent); }
.inv2 .i2-chip-in { flex: 1 0 90px; min-width: 90px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: transparent; padding: 5px 10px; font: inherit; font-size: 15px; font-weight: 700; color: var(--text); }
.inv2 .i2-chip-in:focus { outline: none; border-color: var(--accent); border-style: solid; }
/* line items */
.inv2 .i2-lines { margin-top: 12px; background: var(--i2-card); border: 1px solid var(--line); border-radius: 18px; padding: 6px; box-shadow: var(--shadow); }
.inv2 .i2-lh { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 6px; }
.inv2 .i2-lh .i2-lbl b { color: var(--text); }
.inv2 .i2-add { display: inline-flex; align-items: center; gap: 5px; border: 0; background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 800; font-size: 13.5px; padding: 7px 12px; border-radius: 10px; cursor: pointer; }
.inv2 .i2-add svg { width: 15px; height: 15px; }
.inv2 .line-item.i2-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 30px; gap: 12px; align-items: center; padding: 10px; margin: 0; border-radius: 14px; transition: background .15s; animation: i2-rise .25s ease both; }
.inv2 .line-item.i2-line + .i2-line { border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; }
.inv2 .line-item.i2-line:hover, .inv2 .line-item.i2-line:focus-within { background: var(--accent-soft); border-radius: 14px; border-top-color: transparent; }
.inv2 .i2-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 850; font-size: 14.5px; letter-spacing: .02em; }
.inv2 .t-ok { background: var(--ok-soft); color: var(--ok); } .inv2 .t-accent { background: var(--accent-soft); color: var(--accent); }
.inv2 .t-warn { background: var(--warn-soft); color: var(--warn); } .inv2 .t-info { background: var(--info-soft); color: var(--info); }
.inv2 .t-bad { background: var(--bad-soft); color: var(--bad); } .inv2 .t-none { background: var(--surface-2); color: var(--muted); }
.inv2 .i2-line textarea[data-l="description"] { border: 0; background: transparent; padding: 0; min-height: 24px; font-size: 16px; font-weight: 750; color: var(--text); box-shadow: none; }
.inv2 .i2-line textarea[data-l="description"]:focus { outline: none; }
.inv2 .i2-qr { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 650; }
.inv2 .i2-qr input { width: auto; min-height: 26px; padding: 2px 6px; border: 1px solid transparent; border-radius: 7px; background: var(--surface-2); font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.inv2 .i2-qr input[data-l="qty"] { width: 52px; text-align: center; } .inv2 .i2-qr input[data-l="rate"] { width: 96px; }
.inv2 .i2-qr input:focus { outline: none; border-color: var(--accent); background: var(--i2-card); }
.inv2 .i2-x { margin: 0 2px; } .inv2 .i2-dol { margin-left: 2px; }
.inv2 .i2-amt { font-size: 17px; font-weight: 850; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv2 .i2-line .x { width: 30px; height: 30px; border-radius: 9px; color: var(--muted); opacity: .6; }
.inv2 .i2-line .x:hover { opacity: 1; background: var(--bad-soft); color: var(--bad); }
.inv2 .i2-notes { margin-top: 12px; }
.inv2 .i2-notes .field > span { display: block !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.inv2 .i2-notes textarea { border: 0; background: transparent; padding: 4px 0; min-height: 60px; font-size: 15px; box-shadow: none !important; width: 100%; color: var(--text); }
.inv2 .i2-edit > .form-section { margin-top: 16px; }
/* pinned total + save */
.inv2 .i2-foot { position: sticky; bottom: calc(-24px - var(--safe-b)); z-index: 4; margin: 16px -16px calc(-24px - var(--safe-b)); padding: 12px 16px calc(12px + var(--safe-b)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--surface) 97%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.inv2 .i2-ft span { font-size: 14px; font-weight: 650; color: var(--muted); margin-right: 8px; }
.inv2 .i2-ft b { font-size: 24px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.inv2 .i2-fb { display: flex; gap: 8px; }
.inv2 .i2-b1, .inv2 .i2-b2 { display: inline-flex; align-items: center; gap: 6px; border: 0; font: inherit; font-size: 15px; font-weight: 800; padding: 12px 18px; border-radius: 13px; cursor: pointer; transition: transform .1s; }
.inv2 .i2-b1 { background: var(--text); color: var(--bg); min-width: 92px; justify-content: center; }
.inv2 .i2-b2 { background: var(--surface-2); color: var(--text); }
.inv2 .i2-b2 svg { width: 17px; height: 17px; }
.inv2 .i2-b1:active, .inv2 .i2-b2:active { transform: scale(.96); }
/* looking (not editing): banner, track and the invoice paper only */
#sheet-body.view-mode .inv2 .i2-edit { display: none; }
#sheet-body:has(.inv2) > .draft-banner, #sheet-body:has(.inv2) > #draft-note { margin-bottom: 10px; }
/* opening shimmer + rise-in */
.inv2 .i2-skel { display: none; }
.inv2.i2-loading .i2-skel { display: block; position: absolute; inset: 0 0 auto 0; z-index: 6; background: var(--bg); min-height: 520px; padding: 4px 0; border-radius: 18px; }
.inv2 .i2-skel i { display: block; height: 18px; margin: 14px 0; border-radius: 10px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: i2-shim 1s linear infinite; }
.inv2 .i2-skel .a { height: 150px; border-radius: 22px; margin-top: 0; } .inv2 .i2-skel .b { height: 70px; border-radius: 18px; }
.inv2 .i2-skel .c { width: 70%; } .inv2 .i2-skel .d { height: 110px; border-radius: 18px; } .inv2 .i2-skel .e { width: 45%; }
.inv2:not(.i2-loading) [style*="--d:"] { animation: i2-rise .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d) * 45ms); }
.inv2 .i2-tot b.bump { animation: i2-pop .25s ease; }
@keyframes i2-shim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes i2-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes i2-pop { from { transform: scale(.85); opacity: .4; } to { transform: none; opacity: 1; } }
/* loader + celebration layers (over everything) */
.i2-layer { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: i2-fade .2s ease; overflow: hidden; cursor: pointer; }
.i2-layer.out { animation: i2-fade .25s ease reverse forwards; }
.i2-layer .i2-card { position: relative; z-index: 2; width: min(380px, 100%); background: var(--card, var(--surface)); color: var(--text); border-radius: 26px; padding: 46px 26px 24px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.28); animation: i2-pop .3s cubic-bezier(.2, 1.4, .4, 1); }
.i2-layer .i2-big { font-size: 22px; font-weight: 850; letter-spacing: -.01em; margin-top: 14px; }
.i2-layer .i2-sm { font-size: 14px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.i2-layer .i2-tap { font-size: 12px; color: var(--muted); margin-top: 18px; opacity: .7; }
.i2-ring { position: relative; width: 112px; height: 112px; margin: 0 auto; }
.i2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.i2-ring circle { fill: none; stroke-width: 11; }
.i2-ring .bg { stroke: var(--surface-2); }
.i2-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; animation: i2-ring 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.i2-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 850; font-variant-numeric: tabular-nums; }
.i2-ticks { display: inline-flex; flex-direction: column; gap: 8px; margin-top: 16px; text-align: left; font-size: 14.5px; font-weight: 650; }
.i2-ticks > div { display: flex; align-items: center; gap: 9px; opacity: 0; animation: i2-rise .3s ease forwards; animation-delay: calc(.15s + var(--i) * .3s); }
.i2-ticks span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; }
.i2-ticks svg { width: 12px; height: 12px; }
.i2-burst { width: 104px; height: 104px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 48px; font-weight: 900; background: var(--ok); box-shadow: 0 0 0 14px var(--ok-soft), 0 0 0 30px color-mix(in srgb, var(--ok) 7%, transparent); animation: i2-burst .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.i2-burst.accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 14px var(--accent-soft), 0 0 0 30px color-mix(in srgb, var(--accent) 7%, transparent); }
.i2-burst svg { width: 52px; height: 52px; stroke-width: 3; }
.i2-money { font-size: 42px; font-weight: 900; letter-spacing: -.03em; margin-top: 22px; font-variant-numeric: tabular-nums; }
.i2-conf { position: absolute; top: -20px; left: var(--x); width: 9px; height: 15px; border-radius: 3px; z-index: 1; animation: i2-fall var(--du) cubic-bezier(.3, .6, .5, 1) var(--dl) both; }
@keyframes i2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes i2-ring { to { stroke-dashoffset: 0; } }
@keyframes i2-burst { 0% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes i2-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .9; } }
@media (max-width: 600px) {
  .inv2 .i2-hero { padding: 18px 18px 14px; border-radius: 18px; }
  .inv2 .i2-hrow { flex-direction: column; gap: 6px; } .inv2 .i2-tot { text-align: left; }
  .inv2 .i2-track { flex-direction: column; align-items: stretch; }
  .inv2 .i2-cta { justify-content: center; }
  .inv2 .line-item.i2-line { grid-template-columns: 34px minmax(0, 1fr) auto 26px; gap: 9px; }
  .inv2 .i2-ic { width: 34px; height: 34px; font-size: 13px; }
  .inv2 .i2-ft b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .inv2 [style*="--d:"], .i2-layer, .i2-layer .i2-card, .i2-burst, .inv2 .i2-chip, .inv2 .line-item.i2-line { animation: none !important; } }