/* ============================================================
   Budhraja Costing — premium paper design system, v2
   Palette from the WITHIN U app light mode:
   #F8F4EC · #F0EBE0 · #F5ECD9 · #FFFDF8
   Editorial serif display, paper grain, crafted motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

:root {
  /* light beige "oat" family — a hint lighter */
  --bg: #f8f6f1;
  --bg-deep: #efece4;
  --cream: #ece8dd;
  --card: #fdfdfa;
  --ink: #211d16;
  --ink-2: #57503f;
  --ink-3: #97907e;
  --line: rgba(60, 50, 30, .10);
  --line-strong: rgba(60, 50, 30, .17);
  --accent: #1f1a12;
  --accent-ink: #fffdf8;
  --green: #4d7c4f;
  --amber: #b07d2c;
  --red: #b3402f;
  --violet: #6d5a8f;
  --teal: #3e7676;
  --radius: 16px;
  --radius-s: 11px;
  /* layered elevation ramp — same warm hue, more precise falloff */
  --shadow: 0 1px 1px rgba(60, 50, 30, .04), 0 2px 4px rgba(60, 50, 30, .05), 0 12px 28px rgba(60, 50, 30, .07);
  --shadow-lift: 0 2px 4px rgba(60, 50, 30, .06), 0 8px 18px rgba(60, 50, 30, .10), 0 24px 52px rgba(60, 50, 30, .16);
  /* machined inner top-highlight (a bevel, not a colour) */
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .6);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --industrial: "Oswald", "Inter", -apple-system, sans-serif;
  --display: var(--industrial);
  /* Excel green — the download/action colour */
  --xl-green: #2e9e52;
  --xl-green-dark: #1d7f3f;
  --xl-green-light: #43b968;
  --ease: cubic-bezier(.25, .6, .2, 1);
  --grain-opacity: .35;
  /* WITHIN U website accent family — warm gold CTA */
  --gold: #f59e0b;
  --gold-light: #ffd166;
  --gold-dark: #b07408;
}

html[data-theme="dark"] {
  --bg: #16130e;
  --bg-deep: #100e0a;
  --cream: #262117;
  --card: #1e1a13;
  --ink: #f0ebe0;
  --ink-2: #c9c2b2;
  --ink-3: #8a8371;
  --line: rgba(240, 235, 224, .09);
  --line-strong: rgba(240, 235, 224, .17);
  --accent: #f0ebe0;
  --accent-ink: #1a160f;
  --green: #7fb183;
  --amber: #d3a256;
  --red: #d4705f;
  --violet: #a292c4;
  --teal: #74abab;
  --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .4);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .45), 0 24px 52px rgba(0, 0, 0, .55);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .06);
  --grain-opacity: .25;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* paper grain — barely-there tooth on every surface */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::before { mix-blend-mode: screen; }

::selection { background: var(--cream); color: var(--ink); }
html[data-theme="dark"] ::selection { background: #3a3222; color: var(--ink); }

svg { width: 17px; height: 17px; stroke: currentColor; fill: none; flex: none; }

:focus-visible {
  outline: 2px solid var(--ink-3);
  outline-offset: 2px;
  border-radius: 6px;
}

/* slim, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------- layout ---------------- */
.app { display: flex; min-height: 100vh; }

/* ---------------- sidebar ---------------- */
.sidebar {
  width: 254px;
  flex: none;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  padding: 22px 14px 18px;
  z-index: 30;
  transition: background .3s var(--ease);
}

.side-brand { display: flex; align-items: center; gap: 12px; padding: 2px 8px 20px; }
.logo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: #ffffff;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.nav-label {
  font-family: var(--industrial);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  padding: 18px 10px 7px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 530;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .1s;
  text-align: left;
}
.nav-item:hover { background: rgba(60, 50, 30, .06); color: var(--ink); }
html[data-theme="dark"] .nav-item:hover { background: rgba(240, 235, 224, .06); }
.nav-item:active { transform: scale(.985); }
.nav-item.active { background: var(--ink); color: var(--card); }
html[data-theme="dark"] .nav-item.active { background: var(--cream); color: var(--ink); }
.nav-item.disabled { opacity: .42; cursor: default; }
.nav-item.disabled:hover { background: transparent; color: var(--ink-2); }
.nav-count { margin-left: auto; font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.nav-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(60, 50, 30, .09);
  color: var(--ink-3);
}
.nav-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: background .3s; }
.nav-dot.live { background: var(--green); box-shadow: 0 0 0 3px rgba(77, 124, 79, .18); }
.nav-dot.waiting { background: var(--amber); }
.nav-dot.offline { background: var(--red); }

.side-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.bear-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-s);
  background: var(--card);
  border: 1px solid var(--line);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.pulse.live { background: var(--green); animation: pulse 1.9s ease-in-out infinite; }
.pulse.waiting { background: var(--amber); }
.pulse.offline { background: var(--red); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 124, 79, .4); }
  60% { box-shadow: 0 0 0 7px rgba(77, 124, 79, 0); }
}
.bear-pill-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bear-pill-text strong { font-size: 12.5px; font-weight: 620; }
.bear-pill-text small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.user-row { display: flex; align-items: center; gap: 9px; padding: 0 4px; }
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase;
  flex: none;
}
.user-email { font-size: 12px; color: var(--ink-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(60, 50, 30, .08); color: var(--ink); }
html[data-theme="dark"] .icon-btn:hover { background: rgba(240, 235, 224, .08); }

/* ---------------- main / topbar ---------------- */
:root { --main-pad: 34px; }
.main { flex: 1; min-width: 0; padding: 0 var(--main-pad) 60px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0 15px;
  background: linear-gradient(var(--bg) 72%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.topbar h1 {
  font-family: var(--industrial);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  padding-left: 15px;
}
/* wordmark accent bar — a small machined marker before the title */
.topbar h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.menu-btn { display: none; }

.search-wrap {
  flex: 1;
  max-width: 420px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 8px 10px 8px 15px;
  color: var(--ink-3);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-wrap:focus-within {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(60, 50, 30, .05), var(--shadow);
}
.search-wrap svg { width: 15px; height: 15px; }
.search-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.search-wrap input::placeholder { color: var(--ink-3); }
.search-wrap kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
}

/* ── 3D button system — bevel stack from the WITHIN U orb widgets
   (inset top highlight / inset bottom shade / layered ambient shadows)
   + Cluely-style press mechanics + Oswald industrial face. ─────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 19px;
  border: 0;
  border-radius: 980px;
  font-family: var(--industrial);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease),
              filter .15s, background .18s;
  text-decoration: none;
}
.btn.primary {
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%);
  color: #ffffff;
  border: 1px solid rgba(16, 80, 40, .55);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 1px 2px rgba(30, 60, 40, .3),
    0 6px 14px rgba(46, 158, 82, .32),
    0 14px 30px rgba(40, 60, 45, .15);
}
.btn.primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 2px 3px rgba(30, 60, 40, .28),
    0 10px 22px rgba(46, 158, 82, .4),
    0 20px 40px rgba(40, 60, 45, .17);
}
.btn.primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(0, 0, 0, .12),
    0 1px 2px rgba(30, 60, 40, .25);
}
.btn.ghost {
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    inset 0 -1.5px 0 rgba(60, 50, 30, .07),
    0 1px 2px rgba(60, 50, 30, .12),
    0 4px 10px rgba(60, 50, 30, .08);
}
html[data-theme="dark"] .btn.ghost {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .07),
    inset 0 -1.5px 0 rgba(0, 0, 0, .35),
    0 1px 2px rgba(0, 0, 0, .4),
    0 4px 10px rgba(0, 0, 0, .3);
}
.btn.ghost:hover {
  transform: translateY(-1px);
  color: var(--ink);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .8),
    inset 0 -1.5px 0 rgba(60, 50, 30, .07),
    0 2px 4px rgba(60, 50, 30, .12),
    0 8px 18px rgba(60, 50, 30, .12);
}
.btn.ghost:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(60, 50, 30, .15),
    0 1px 2px rgba(60, 50, 30, .1);
}
.btn.destructive {
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--red);
  border: 1px solid rgba(179, 64, 47, .3);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .6),
    inset 0 -1.5px 0 rgba(179, 64, 47, .08),
    0 1px 2px rgba(60, 50, 30, .1),
    0 4px 10px rgba(179, 64, 47, .08);
}
.btn.destructive:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff 0%, rgba(179, 64, 47, .06) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    0 2px 4px rgba(179, 64, 47, .15),
    0 8px 18px rgba(179, 64, 47, .12);
}
.btn.destructive:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(179, 64, 47, .18); }
.btn.danger-solid {
  background: linear-gradient(180deg, #cc5947 0%, var(--red) 50%, #93321f 100%);
  color: #fff;
  border: 1px solid rgba(110, 35, 20, .6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 0 rgba(0, 0, 0, .2),
    0 1px 2px rgba(60, 20, 10, .3),
    0 6px 14px rgba(179, 64, 47, .35);
}
.btn.danger-solid:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn.danger-solid:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3); }
.btn.small { padding: 8px 15px; font-size: 11px; }
.btn.small svg { width: 14px; height: 14px; }
.back-btn { margin-bottom: 16px; }

.result-note { color: var(--ink-3); font-size: 13px; margin: 0 0 14px; }

/* ---------------- hero ---------------- */
.hero { padding: 6px 2px 22px; }
.hero-date {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.hero-greeting {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 560;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

/* ---------------- dashboard ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--bevel), var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
/* blueprint registration tick — machined precision, top-right corner */
.stat-card::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  opacity: .8;
  transition: border-color .25s var(--ease);
}
.stat-card:hover { box-shadow: var(--bevel), var(--shadow-lift); transform: translateY(-3px); border-color: var(--line-strong); }
.stat-card:hover::after { border-color: var(--ink-3); }
.stat-card:active { transform: translateY(-1px); }
.stat-label { font-family: var(--industrial); font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; }
.stat-value {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  line-height: 1.08;
  margin-top: 1px;
}
.stat-value.small { font-size: 18px; padding: 9px 0; font-family: inherit; font-weight: 700; }
.stat-sub { font-size: 12px; color: var(--ink-3); }

.dash-cols {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  align-items: start;
}
.dash-cols.single { grid-template-columns: 1fr; }
.dash-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .dash-cols { grid-template-columns: 1fr; } }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--bevel), var(--shadow);
  overflow: hidden;
  transition: background .3s var(--ease), box-shadow .25s var(--ease);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 22px 13px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.panel-sub { font-size: 11.5px; color: var(--ink-3); }

/* chart */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
  padding: 4px 22px 14px;
}
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.chart .bar {
  width: 100%;
  max-width: 46px;
  border-radius: 7px 7px 3px 3px;
  background: var(--cream);
  border: 1px solid var(--line);
  min-height: 3px;
  transition: height .6s var(--ease), background .2s;
  position: relative;
}
.chart .col:hover .bar { background: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .chart .col:hover .bar { background: var(--cream); }
.chart .bar .val {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 650;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity .15s;
}
.chart .col:hover .val { opacity: 1; }
.chart .day { font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .03em; }

.job-list { display: flex; flex-direction: column; }
.job-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  transition: background .15s;
}
.job-row:hover { background: var(--bg); }
.file-ico {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.file-ico .xls-img { width: 40px; height: 40px; object-fit: contain; display: block; }
.cat-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}
.cat-chip.carton { background: rgba(77, 124, 79, .1); color: var(--green); }
.cat-chip.leaflet { background: rgba(62, 118, 118, .1); color: var(--teal); }

/* ---------------- sidebar clients + filter bar ---------------- */
.nav-clients {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
}
.nav-empty { font-size: 12px; color: var(--ink-3); padding: 6px 11px; }
.nav-client-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.nav-item.active .nav-client-dot { background: rgba(255,255,255,.2); border-color: transparent; color: inherit; }

.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding: 2px 0 10px;
}
.filter { display: flex; flex-direction: column; gap: 4px; }
.filter span {
  font-family: var(--industrial);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.filter select, .filter input[type="date"] {
  font-family: var(--industrial);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px 11px;
  outline: none;
  min-width: 120px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .18s var(--ease), transform .12s var(--ease);
  color-scheme: light;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    inset 0 -1.5px 0 rgba(60, 50, 30, .07),
    0 1px 2px rgba(60, 50, 30, .12),
    0 4px 10px rgba(60, 50, 30, .08);
}
html[data-theme="dark"] .filter select,
html[data-theme="dark"] .filter input[type="date"] {
  color-scheme: dark;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .07),
    inset 0 -1.5px 0 rgba(0, 0, 0, .35),
    0 1px 2px rgba(0, 0, 0, .4),
    0 4px 10px rgba(0, 0, 0, .3);
}
.filter select:hover, .filter input[type="date"]:hover { transform: translateY(-1px); }
.filter select:focus, .filter input[type="date"]:focus {
  border-color: var(--xl-green);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .7),
    0 0 0 3px rgba(46, 158, 82, .18),
    0 4px 10px rgba(60, 50, 30, .1);
}
.filter-count { font-size: 12px; color: var(--ink-3); padding-bottom: 9px; margin-left: auto; }

.jl-styles { display: flex; gap: 5px; flex: none; }
.style-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* ═══════════ JOBS TABLE (category views — mock layout) ═══════════ */
.jobs-table {
  width: calc(100% + var(--main-pad) * 2);
  margin-left: calc(-1 * var(--main-pad));
  margin-right: calc(-1 * var(--main-pad));
}
.jobs-table .spline-divider { width: 100%; margin-left: 0; margin-right: 0; }
.jt-head, .jt-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.7fr) minmax(120px, 1fr) 90px 170px 106px 96px;
  gap: 12px;
  align-items: center;
  padding: 11px var(--main-pad);
}
.jt-head {
  font-family: var(--industrial);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.jt-row { transition: background .15s; }
.jt-row:hover { background: var(--card); }
.jt-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jt-file .file-ico, .jt-file .xls-img { width: 34px; height: 34px; }
.jt-file-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.jt-file-text strong { font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-file-text small { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-client { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-when, .jt-size { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- TODAY-FIRST hierarchy (Carton & Leaflet job ledgers) ----
   Jobs are grouped by day. Today's band + rows carry a vivid green live
   accent so the operator's eye lands on the current day; older days recede. */
.jt-dayband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px var(--main-pad) 8px;
  font-family: var(--industrial);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.jt-dayband-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}
.jt-dayband-count {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* today's band — larger, green, live pulse */
.jt-dayband.today {
  padding-top: 6px;
  border-bottom: 1px solid rgba(46, 158, 82, .28);
  margin-bottom: 2px;
}
.jt-dayband.today .jt-dayband-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--xl-green-dark);
}
.jt-dayband.today .jt-dayband-count {
  color: var(--xl-green-dark);
  background: rgba(46, 158, 82, .12);
  padding: 3px 10px;
  border-radius: 20px;
}
html[data-theme="dark"] .jt-dayband.today .jt-dayband-label,
html[data-theme="dark"] .jt-dayband.today .jt-dayband-count { color: var(--xl-green-light); }
.jt-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--xl-green);
  animation: pulse 1.9s ease-in-out infinite;
  flex: none;
}

/* today's rows — full contrast, green left accent + faint tint */
.jt-row.jt-today {
  position: relative;
  background: rgba(46, 158, 82, .045);
  box-shadow: inset 3px 0 0 var(--xl-green);
}
.jt-row.jt-today:hover { background: rgba(46, 158, 82, .09); }
.jt-row.jt-today .jt-file-text strong { font-weight: 680; }
html[data-theme="dark"] .jt-row.jt-today { background: rgba(67, 185, 104, .07); }
html[data-theme="dark"] .jt-row.jt-today:hover { background: rgba(67, 185, 104, .13); }

/* older days recede so today reads as the priority */
.jt-row.jt-past { opacity: .62; transition: opacity .15s, background .15s; }
.jt-row.jt-past:hover { opacity: 1; }

/* dashboard "recent jobs" card — same hierarchy, compact spacing */
.jt-dayband.compact { padding: 12px 22px 6px; }
.jt-dayband.compact.today { padding-top: 4px; }
.job-row.jr-today {
  background: rgba(46, 158, 82, .05);
  box-shadow: inset 3px 0 0 var(--xl-green);
}
.job-row.jr-today:hover { background: rgba(46, 158, 82, .1); }
.job-row.jr-today .job-row-name strong { font-weight: 680; }
.job-row.jr-past { opacity: .62; transition: opacity .15s, background .15s; }
.job-row.jr-past:hover { opacity: 1; }
html[data-theme="dark"] .job-row.jr-today { background: rgba(67, 185, 104, .07); }
html[data-theme="dark"] .job-row.jr-today:hover { background: rgba(67, 185, 104, .13); }

/* jobs-count expander pill */
.jobs-toggle {
  font-family: var(--industrial);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(60,50,30,.12);
}
.jobs-toggle:hover { transform: translateY(-1px); color: var(--ink); }
.jobs-toggle .caret { transition: transform .3s var(--ease); font-size: 9px; }
.jobs-toggle.open .caret { transform: rotate(180deg); }
.jt-nojobs { font-size: 12px; color: var(--ink-3); }

/* status chips */
.status-chip {
  font-family: var(--industrial);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 8px;
  display: inline-block;
}
.status-chip.new { background: rgba(46, 158, 82, .12); color: var(--xl-green-dark); }
.status-chip.processed { background: rgba(59, 108, 176, .12); color: #3b6cb0; }
html[data-theme="dark"] .status-chip.new { color: #7fd49a; }
html[data-theme="dark"] .status-chip.processed { color: #8fb4e8; }

/* action icon buttons — mini 3D */
.jt-actions { display: flex; gap: 8px; }
.icon-3d {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--ink-2);
  cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .15s, color .15s;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.7),
    inset 0 -1.5px 0 rgba(60,50,30,.07),
    0 1px 2px rgba(60,50,30,.12),
    0 4px 10px rgba(60,50,30,.08);
}
.icon-3d:hover { transform: translateY(-1px); }
.icon-3d:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0,0,0,.28); }
.icon-3d.dl {
  color: #fff;
  border: 1px solid rgba(16, 80, 40, .55);
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.35),
    inset 0 -1.5px 0 rgba(0,0,0,.2),
    0 1px 2px rgba(30,60,40,.3),
    0 5px 12px rgba(46,158,82,.32);
}
.icon-3d.dl:hover { filter: brightness(1.06); }
.icon-3d.del {
  color: #fff;
  border: 1px solid rgba(110, 35, 20, .55);
  background: linear-gradient(180deg, #cc5947 0%, var(--red) 50%, #93321f 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.3),
    inset 0 -1.5px 0 rgba(0,0,0,.2),
    0 1px 2px rgba(60,20,10,.3),
    0 5px 12px rgba(179,64,47,.32);
}
.icon-3d.del:hover { filter: brightness(1.07); }
.icon-3d svg { width: 15px; height: 15px; }

/* expandable job breakdown — smooth height animation */
.job-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s var(--ease), opacity .3s var(--ease);
  background: var(--bg-deep);
}
.job-detail.open { opacity: 1; }
.job-detail-inner { padding: 14px var(--main-pad) 18px; }
.job-detail-inner .jd-title {
  font-family: var(--industrial);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
/* the tangible spec sheet */
.spec-scroll { overflow-x: auto; }
.spec-table {
  border-collapse: collapse;
  width: max-content;   /* grow as long as needed — every job on ONE line */
  min-width: 100%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(60,50,30,.08);
}
.spec-table th {
  font-family: var(--industrial);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.spec-table td {
  font-size: 11.5px;
  color: var(--ink-2);
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* never wrap — one line per job, always */
}
.spec-table th.th-group {
  text-align: center;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  color: var(--ink-2);
}
.spec-table th.th-sub {
  font-size: 9.5px;
  padding-top: 4px;
  border-bottom: 1px solid var(--line-strong);
}
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover td { background: var(--bg); }
.spec-table .sp-job { font-weight: 620; color: var(--ink); }

.jd-items { display: flex; flex-wrap: wrap; gap: 7px; }
.jd-item {
  font-size: 12px;
  font-weight: 550;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(60,50,30,.07);
}
.jd-empty { font-size: 12px; color: var(--ink-3); }

@media (max-width: 1100px) {
  .jt-head, .jt-row { grid-template-columns: minmax(160px, 1.6fr) 90px 106px 96px; }
  .jt-client, .jt-when,
  .h-client, .h-when { display: none !important; }
}

/* spline-divided job lines (category views) — full bleed, no widget box */
.job-lines { display: flex; flex-direction: column; }
.job-lines.full-bleed { width: 100%; }
.job-line {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Full-block selection: the row itself spans wall to wall (same
     breakout as the spline bands) so hover/selection paints the ENTIRE
     band between two splines — no floating widget shape. Content keeps
     its alignment via matching side padding. */
  margin-left: calc(-1 * var(--main-pad));
  margin-right: calc(-1 * var(--main-pad));
  padding: 16px var(--main-pad);
  transition: background .15s;
  border-radius: 0;
}
.job-line:hover { background: var(--card); }
.spline-divider {
  /* TOUCH THE WALL: break out of the main padding so the band runs
     from the sidebar edge to the right edge of the viewport. */
  width: calc(100% + var(--main-pad) * 2);
  margin-left: calc(-1 * var(--main-pad));
  margin-right: calc(-1 * var(--main-pad));
  height: 24px;
  display: block;
}
.spline-divider svg { width: 100%; height: 100%; display: block; }

/* Band colours per theme — light mode wears a dark brown-black band;
   dark mode keeps the site's pearl-peach glass tube. */
.spline-divider .sp-shadow { stroke: rgba(0, 0, 0, .22); stroke-width: 7.5; fill: none; }
.spline-divider .sp-body   { stroke: rgba(96, 84, 64, .68); stroke-width: 4.8; fill: none; }
.spline-divider .sp-hi     { stroke: rgba(250, 246, 238, .6); stroke-width: 1.4; fill: none; }

html[data-theme="dark"] .spline-divider .sp-shadow { stroke: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .spline-divider .sp-body   { stroke: rgba(251, 217, 182, .95); }
html[data-theme="dark"] .spline-divider .sp-hi     { stroke: rgba(255, 255, 255, .92); }
.job-line .jl-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.job-line .jl-name strong { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-line .jl-name small { font-size: 11.5px; color: var(--ink-3); }
.job-line .jl-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 720px) {
  .job-line { flex-wrap: wrap; }
  .job-line .jl-actions { width: 100%; justify-content: flex-end; }
}
.job-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.job-row-name strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-row-name small { font-size: 11.5px; color: var(--ink-3); }
.empty-note { padding: 26px 22px; color: var(--ink-3); font-size: 13px; border-top: 1px solid var(--line); }

.mini-feed { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.mini-feed .feed-item { padding: 9px 22px; border-top: 1px solid var(--line); }

/* ---------------- clients (same ledger language as jobs) ---------------- */
.client-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: calc(-1 * var(--main-pad));
  margin-right: calc(-1 * var(--main-pad));
  padding: 16px var(--main-pad);
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  width: calc(100% + var(--main-pad) * 2);
}
.client-line:hover { background: var(--card); }
.client-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.client-avatar.big { width: 56px; height: 56px; font-size: 24px; }
.chev { color: var(--ink-3); font-size: 18px; flex: none; }

.client-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 2px 20px;
}
.client-head-text h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 560;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.client-head-text p { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------------- job grids ---------------- */
.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 14px;
}
.job-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 19px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
  animation: cardIn .4s var(--ease) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.job-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--line-strong); }
.job-card .head { display: flex; gap: 12px; align-items: flex-start; }
.job-card .name { font-weight: 620; font-size: 13.5px; word-break: break-word; line-height: 1.4; }
.job-card .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-3); align-items: center; }
.job-card .client-tag {
  font-size: 11px;
  font-weight: 620;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.job-card .actions { display: flex; gap: 8px; margin-top: 2px; }
.job-card .actions .primary { flex: 1; }

.empty-state { text-align: center; padding: 80px 24px; color: var(--ink-3); }
.empty-glyph {
  font-size: 30px;
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.empty-state h3 { color: var(--ink); font-size: 16px; margin: 0 0 6px; letter-spacing: -0.02em; }
.empty-state p { margin: 0; font-size: 13px; }

/* ---------------- activity feed ---------------- */
.feed-panel .panel-head { border-bottom: 1px solid var(--line); }
.feed-state { font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.feed-state.live { color: var(--green); }
.feed-state.waiting { color: var(--amber); }
.feed-state.offline { color: var(--red); }

.feed { max-height: 62vh; overflow-y: auto; padding: 6px 0; }
.feed-day {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  padding: 14px 22px 5px;
}
.feed-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 22px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  word-break: break-word;
}
.feed-item .t { color: var(--ink-3); flex: none; font-size: 11px; min-width: 58px; }
.badge {
  flex: none;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 20px;
}
.badge.done, .badge.solved { background: rgba(77, 124, 79, .1); color: var(--green); }
.badge.error, .badge.engine_error { background: rgba(179, 64, 47, .09); color: var(--red); }
.badge.skipped, .badge.rejected { background: rgba(176, 125, 44, .11); color: var(--amber); }
.badge.poll { background: rgba(60, 50, 30, .06); color: var(--ink-3); }
.badge.bear { background: rgba(109, 90, 143, .1); color: var(--violet); }
.badge.received { background: rgba(62, 118, 118, .1); color: var(--teal); }
.badge.interpreting { background: rgba(109, 90, 143, .1); color: var(--violet); }
.badge.decision { background: rgba(62, 118, 118, .12); color: var(--teal); }
.badge.engine { background: rgba(77, 124, 79, .09); color: var(--green); }
/* LIVE-FEED BADGES v1: every kind the diary actually emits now has a colour.
   Measured on the live diary, sweep alone is 42% of all rows and had no rule
   at all, so the most common line in the feed rendered as bare grey text
   among coloured pills. mint and beat are new kinds; needs-specs and
   old-codes are real email outcomes that deserve amber "look at me"; and
   error-final is a PERMANENT failure that used to render neutral grey,
   because the rule above is written .badge.error while the class token the
   renderer emits is "error-final" -- so a job that died forever was quieter
   than one that merely hiccuped. .badge.bear above stays: legacy rows are
   still in the diary and will be for ~2 days. */
.badge.mint { background: rgba(109, 90, 143, .1); color: var(--violet); }
.badge.sweep, .badge.beat { background: rgba(60, 50, 30, .06); color: var(--ink-3); }
.badge.needs-specs, .badge.old-codes { background: rgba(176, 125, 44, .11); color: var(--amber); }
.badge.error-final { background: rgba(179, 64, 47, .14); color: var(--red); font-weight: 800; }
.badge.sentinel { background: rgba(176, 125, 44, .11); color: var(--amber); }
.badge.note { background: rgba(60, 50, 30, .06); color: var(--ink-3); }
.feed-item.muted { color: var(--ink-3); }

.feed-status {
  padding: 11px 22px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.feed-status.live { color: var(--green); }
.feed-status.waiting { color: var(--amber); }
.feed-status.offline { color: var(--red); }

/* ---------------- archive browser ---------------- */
.arch-search { max-width: none; margin: 4px 0 12px; }
.arch-line { align-items: flex-start; flex-wrap: wrap; }
.arch-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 46%;
}
@media (max-width: 900px) { .arch-files { max-width: 100%; justify-content: flex-start; } }
.arch-file {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%);
  border: 1px solid rgba(16, 80, 40, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(30,60,40,.25);
  text-decoration: none;
  transition: transform .1s var(--ease), filter .12s;
}
.arch-file:hover { transform: translateY(-1px); filter: brightness(1.06); }
.jc-main { gap: 3px; }
.jc-top { display: flex; align-items: center; gap: 8px; }
.jc-code {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--xl-green-dark);
}
.jc-type {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink-2);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.jc-prov { color: #8a6d1f; border-color: rgba(160,120,20,.35); }
/* ---------------- repository v2 ---------------- */
.repo-card { width: 100%; }
.repo-head {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.repo-count {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink-2);
  white-space: nowrap;
}
.repo-chev { transition: transform .18s var(--ease); font-size: 12px; }
.repo-card.open .repo-chev { transform: rotate(180deg); }
.repo-panel[hidden] { display: none !important; }
.repo-panel {
  /* same wall-to-wall band geometry as .job-line so the open panel
     reads as part of the ledger, not a floating dark block */
  margin-left: calc(-1 * var(--main-pad));
  margin-right: calc(-1 * var(--main-pad));
  padding: 2px calc(var(--main-pad) + 10px) 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.repo-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
}
.repo-doc:hover { background: var(--bg-deep); }
.repo-doc-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo-doc-name:hover { color: var(--xl-green-dark); text-decoration: underline; }
.repo-doc-date { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.repo-doc-actions { display: flex; gap: 6px; }
.repo-doc-actions a, .repo-doc-actions button {
  font-size: 10px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-2);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(60,50,30,.08);
  font-family: inherit;
}
.repo-doc-actions a:hover, .repo-doc-actions button:hover {
  transform: translateY(-1px);
  color: var(--xl-green-dark);
}
.repo-nopreview { font-size: 12px; color: var(--ink-3); font-style: italic; padding: 10px; }
.repo-flag {
  font-size: 12px;
  width: 26px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: color .12s, border-color .12s, transform .1s;
}
.repo-flag:hover { transform: translateY(-1px); color: #b02020; }
.repo-flag.on {
  color: #fff;
  background: linear-gradient(180deg, #d4453a 0%, #b02020 60%, #8d1717 100%);
  border-color: rgba(120, 15, 15, .6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(120,20,20,.3);
}
.bin-restore {
  color: #fff !important;
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%) !important;
  border-color: rgba(16, 80, 40, .5) !important;
}
.repo-ok {
  font-size: 12px;
  width: 26px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: color .12s, border-color .12s, transform .1s;
  font-family: inherit;
}
.repo-ok:hover { transform: translateY(-1px); color: var(--xl-green-dark); }
.repo-ok.on {
  color: #fff;
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%);
  border-color: rgba(16, 80, 40, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(30,60,40,.3);
}
.repo-del {
  font-size: 10px;
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border-radius: 7px;
  border: 1px solid rgba(140, 30, 25, .4);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: #a11d15;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .1s, background .12s;
  font-family: inherit;
  font-weight: 700;
}
.repo-del:hover { transform: translateY(-1px); }
.repo-del.armed {
  color: #fff;
  background: linear-gradient(180deg, #d4453a 0%, #8d1717 100%);
  border-color: rgba(90, 10, 10, .7);
}
.repo-label-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 100%);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  font-family: inherit;
  transition: transform .1s, color .12s;
}
.repo-label-btn:hover { transform: translateY(-1px); color: var(--xl-green-dark); }
.label-panel {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 26px 12px;
}
.doc-label-panel { padding: 6px 10px 10px; }
.doc-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--xl-green-dark);
  border: 1px solid rgba(29, 127, 63, .35);
  background: rgba(46, 158, 82, .08);
  white-space: nowrap;
}
.label-panel[hidden] { display: none !important; }
.client-typeahead {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-1);
  min-width: 220px;
}
.repo-modal-side .client-typeahead { width: 100%; min-width: 0; }
.label-panel select {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-1);
  max-width: 340px;
}
.label-save {
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(16, 80, 40, .5);
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(30,60,40,.25);
  font-family: inherit;
}
.label-save:hover { transform: translateY(-1px); }
.repo-doc.labeled { background: rgba(96, 148, 210, .13); }
.repo-doc.labeled:hover { background: rgba(96, 148, 210, .2); }
.repo-doc.approved { background: rgba(46, 158, 82, .08); }
.repo-doc.approved .repo-doc-name { color: var(--xl-green-dark); }
.repo-doc.flagged { background: rgba(190, 34, 26, .09); }
.repo-doc.flagged .repo-doc-name { color: #a11d15; }
.repo-doc.flagged:hover { background: rgba(190, 34, 26, .14); }
.repo-card.flagged .repo-head { background: rgba(190, 34, 26, .07); }
.repo-card.flagged .jc-code, .repo-card.flagged .jl-name strong { color: #a11d15; }
/* rows the user labelled BY HAND — red so they stand out from
   agent/rule-applied labels (blue) */
.repo-doc.hand-labeled { background: rgba(190, 34, 26, .12); }
.repo-doc.hand-labeled:hover { background: rgba(190, 34, 26, .18); }
.repo-doc.hand-labeled .repo-doc-name { color: #a11d15; font-weight: 600; }

/* stacked counter chips: yours on top, agent below — never overlapping */
#label-counters {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
#label-counter, #agent-counter {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 205px;
  justify-content: space-between;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 650;
  box-shadow: 0 6px 20px rgba(20, 16, 8, .22), inset 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}
#label-counter {
  border: 1px solid rgba(29, 127, 63, .45);
  background: linear-gradient(180deg, #eef8f1 0%, #dff0e4 100%);
  color: #14532d;
}
#label-counter.pulse { animation: lc-pulse .35s ease; }
@keyframes lc-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); background: rgba(46, 158, 82, .25); }
  100% { transform: scale(1); }
}
.rec-parent { margin-bottom: 10px; }
.rec-parent-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(96, 148, 210, .08);
  cursor: pointer;
  font-size: 15px;
}
.rec-parent-head:hover { background: rgba(96, 148, 210, .15); }
.rec-parent-head small { margin-left: auto; opacity: .7; }
.rec-parent-chev { transition: transform .15s; }
.rec-parent.open .rec-parent-chev { transform: rotate(180deg); }
.rec-parent-kids { padding: 6px 0 0 14px; }
.repo-card.rec-done .repo-head { background: rgba(46, 158, 82, .13); }
.repo-card.rec-done .repo-head:hover { background: rgba(46, 158, 82, .2); }
.repo-card.rec-done .jl-name strong { color: var(--xl-green-dark); }
.repo-card.rec-done .repo-count span:first-child { color: var(--xl-green-dark); font-weight: 700; }

.cur-unit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--ink-2);
}
.cur-unit em { font-style: italic; font-weight: 500; color: var(--ink-3); font-size: 10.5px; }

.repo-modal[hidden] { display: none !important; }
.repo-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(30, 26, 18, .55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.repo-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 230;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card, #fdfdfa);
  box-shadow: 0 8px 28px rgba(20, 16, 8, .35);
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.repo-nav::before { content: none; }
.repo-nav span {
  display: block;
  font-size: 30px;
  line-height: 1;
  /* the ‹ › glyphs sit high on their baseline — nudge to optical center */
  transform: translateY(-2px);
}
.repo-nav:hover { background: rgba(46, 158, 82, .12); }
.repo-nav[hidden] { display: none !important; }
#repo-nav-left { left: 18px; }
#repo-nav-right { right: 18px; }
.repo-modal-card {
  width: min(1080px, 96vw);
  height: min(88vh, 980px);
  display: flex;
  flex-direction: column;
  background: var(--card, #fdfdfa);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(20, 16, 8, .45);
  border: 1px solid var(--line-strong);
}
.repo-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-strong);
}
.repo-modal-head strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repo-modal-actions { display: flex; align-items: center; gap: 8px; }
.repo-modal-actions a {
  font-size: 11px;
  font-weight: 650;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, var(--xl-green-light) 0%, var(--xl-green) 46%, var(--xl-green-dark) 100%);
  border: 1px solid rgba(16, 80, 40, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(30,60,40,.25);
}
.repo-modal-actions button {
  font-size: 13px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  color: var(--ink-2);
  cursor: pointer;
}
.repo-modal-main { flex: 1; display: flex; min-height: 0; }
.repo-modal-body { flex: 1; background: #57534b; min-width: 0; }
.repo-modal-body iframe { width: 100%; height: 100%; border: 0; }
.doc-pick {
  width: 15px;
  height: 15px;
  accent-color: var(--xl-green);
  cursor: pointer;
  flex: none;
}
.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--card, #fdfdfa);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 40px rgba(20, 16, 8, .3), inset 0 1px 0 rgba(255,255,255,.6);
}
.bulk-bar[hidden] { display: none !important; }
.bulk-bar strong { font-size: 12.5px; white-space: nowrap; }
.bulk-bar select {
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-1);
}
.bulk-clear {
  font-size: 11px;
  font-weight: 650;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.cdr-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #efece4;
  text-align: center;
  padding: 30px;
}
.cdr-loading strong { font-size: 14px; }
.cdr-loading small { font-size: 11.5px; opacity: .75; }
.cdr-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #43B968;
  animation: cdrspin .9s linear infinite;
}
@keyframes cdrspin { to { transform: rotate(360deg); } }
.pdfjs-scroller {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 14px 0;
}
.pdfjs-scroller canvas {
  display: block;
  margin: 0 auto 14px;
  max-width: calc(100% - 24px);
  height: auto;
  background: #fff;
  box-shadow: 0 3px 18px rgba(10, 8, 4, .5);
  border-radius: 3px;
}
.repo-modal-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.repo-modal-side {
  width: 280px;
  flex: none;
  padding: 18px 16px;
  border-left: 1px solid var(--line-strong);
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.repo-modal-side h4 {
  font-family: var(--industrial);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.repo-modal-side label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ink-3);
  margin-top: 6px;
}
.repo-modal-side select {
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-1);
  width: 100%;
}
.repo-modal-side .label-save { margin-top: 12px; }
.repo-modal-saved { font-size: 11px; color: var(--xl-green-dark); font-weight: 650; min-height: 15px; margin: 6px 0 0; }
.repo-modal-hint { font-size: 10.5px; color: var(--ink-3); font-style: italic; margin-top: auto; }
.doc-cat-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
}
.doc-cat-badge[data-cat="Artwork"] {
  color: var(--xl-green-dark);
  border-color: rgba(29, 127, 63, .4);
  background: rgba(46, 158, 82, .1);
}
.doc-cat-badge[data-cat="PO"] {
  color: #a11d15;
  border-color: rgba(160, 30, 25, .35);
  background: rgba(190, 34, 26, .08);
}
@media (max-width: 900px) {
  .repo-modal-main { flex-direction: column; }
  .repo-modal-side { width: 100%; border-left: 0; border-top: 1px solid var(--line-strong); }
}

.bin-more {
  background: none;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  margin: 6px 10px;
  width: calc(100% - 20px);
}
.bin-more:hover { color: var(--xl-green-dark); border-color: var(--xl-green); }
.jc-sentinel {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  padding: 14px 0;
}
.jc-more, .jc-none {
  font-size: 10.5px;
  color: var(--ink-3);
  align-self: center;
  font-style: italic;
}

/* ---------------- settings ---------------- */
.settings-stack { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 22px 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.setting-text { display: flex; flex-direction: column; line-height: 1.4; }
.setting-text strong { font-size: 13.5px; font-weight: 620; }
.setting-text small { font-size: 12px; color: var(--ink-3); }

.segmented {
  display: inline-flex;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 3px;
  gap: 2px;
}
.segmented button {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 980px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s;
}
.segmented button:hover { color: var(--ink); }
.segmented button.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* ---------------- modal ---------------- */
.modal-veil[hidden] { display: none !important; }
.modal-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(33, 29, 22, .35);
  animation: veilIn .2s var(--ease);
}
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  padding: 26px 26px 22px;
  width: 100%;
  max-width: 360px;
  animation: modalIn .28s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal h3 { font-family: var(--display); font-size: 19px; font-weight: 560; margin: 0 0 6px; letter-spacing: -0.01em; }
.modal p { color: var(--ink-3); font-size: 13px; margin: 0 0 20px; word-break: break-word; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------------- toasts ---------------- */
.toasts {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink);
  color: var(--card);
  font-size: 13px;
  font-weight: 550;
  padding: 11px 20px;
  border-radius: 980px;
  box-shadow: var(--shadow-lift);
  animation: toastIn .3s var(--ease);
  max-width: 90vw;
}
.toast.error { background: var(--red); color: #fff; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.toast.out { opacity: 0; transform: translateY(8px); transition: all .3s var(--ease); }

/* ---------------- views ---------------- */
/* MAIL-HANDOFF v1 (owner, 2026-08-11): the mail overlay covers the sidebar
   entirely, so leaving it used to be a hard cut. These two run together as one
   gesture -- the mail rail glides away to the left while the sidebar it was
   hiding glides in behind it. Same direction and easing as gmvBarIn, so it
   reads as one continuous movement rather than two effects. */
@keyframes sideGlideIn {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gmvOverlayOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-30px); }
}
@media (prefers-reduced-motion: reduce) {
  /* the transition must still COMPLETE -- only the movement is dropped. */
  @keyframes sideGlideIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes gmvOverlayOut { from { opacity: 1; } to { opacity: 0; } }
}

/* MAIL-HANDOFF v2: this app paints 21 backdrop-filter surfaces. Each one
   re-blurs its backdrop on every frame that anything behind it moves, so
   sliding a full-screen overlay over a 100vh sidebar re-rasterised all of them
   per frame and the browser dropped frames until it snapped. Blur is suspended
   for the ~0.5s of the handoff -- imperceptible while things are moving, and
   it turns the whole transition into pure compositor work. */
html.bp-handoff *,
html.bp-handoff *::before,
html.bp-handoff *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* promote both movers to their own layer BEFORE frame one, so transform and
   opacity never trigger layout or paint again. */
html.bp-handoff #sidebar,
html.bp-handoff #gmv-app { will-change: transform, opacity; }

.view { animation: viewIn .3s var(--ease); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- responsive ---------------- */
.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(33, 29, 22, .3);
  z-index: 25;
}
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow: var(--shadow-lift);
  }
  .sidebar.open { transform: none; }
  .scrim.show { display: block; }
  .menu-btn { display: inline-flex; }
  :root { --main-pad: 16px; }
  .main { padding: 0 var(--main-pad) 44px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar h1 { font-size: 21px; }
  .search-wrap { order: 3; max-width: none; width: 100%; }
  .search-wrap kbd { display: none; }
  .hero-greeting { font-size: 27px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-value { font-size: 30px; }
}

/* ---------------- login ---------------- */
.center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(55% 45% at 18% 8%, rgba(245, 236, 217, .9), transparent 65%),
    radial-gradient(45% 40% at 88% 90%, rgba(240, 235, 224, .95), transparent 60%),
    var(--bg);
}
html[data-theme="dark"] .center {
  background:
    radial-gradient(55% 45% at 18% 8%, rgba(38, 33, 23, .9), transparent 65%),
    radial-gradient(45% 40% at 88% 90%, rgba(30, 26, 19, .95), transparent 60%),
    var(--bg);
}
.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
  padding: 42px 36px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.login-card .logo { margin: 0 auto 20px; width: 64px; height: 64px; border-radius: 15px; padding: 7px; }
.login-card h1 { font-family: var(--display); font-size: 23px; font-weight: 560; letter-spacing: -0.015em; margin: 0 0 6px; }
.login-card p { color: var(--ink-3); font-size: 13px; margin: 0 0 28px; }
.login-card .btn { width: 100%; padding: 12px; font-size: 14px; }
.login-card .btn.primary { background: var(--accent); color: var(--accent-ink); }
.hint { margin-top: 18px; font-size: 11.5px; color: var(--ink-3); }
.pw-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pw-input:focus {
  border-color: var(--xl-green);
  box-shadow: 0 0 0 3px rgba(46, 158, 82, .15);
}
.flash {
  background: rgba(179, 64, 47, .08);
  color: var(--red);
  padding: 11px 14px;
  border-radius: var(--radius-s);
  margin-bottom: 16px;
  font-size: 12.5px;
}

/* red cascade: card fully hand-labelled, parent fully red */
.repo-card.rec-hand .repo-head { background: rgba(190, 34, 26, .13); }
.repo-card.rec-hand .jl-name strong { color: #a11d15; }
.rec-parent.rec-parent-red .rec-parent-head {
  background: rgba(190, 34, 26, .13);
  border-color: rgba(190, 34, 26, .4);
}
.rec-parent.rec-parent-red .rec-parent-head strong { color: #a11d15; }

/* completed tick */
.rec-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  font-size: 15px;
  color: transparent;
  cursor: pointer;
}
.rec-tick:hover { border-color: #1d7a37; color: rgba(29, 122, 55, .5); }
.rec-tick.on { background: #1d7a37; border-color: #1d7a37; color: #fff; }
.repo-card.user-done .repo-head { box-shadow: inset 3px 0 0 #1d7a37; }

/* bin purge */
.bin-purge { color: #a11d15; border-color: rgba(190, 34, 26, .5) !important; }
.bin-purge:hover { background: rgba(190, 34, 26, .12); }

/* documents the AGENT fixed — neon yellow */
.repo-doc.agent-labeled { background: rgba(234, 255, 0, .35); }
.repo-doc.agent-labeled:hover { background: rgba(234, 255, 0, .5); }
.repo-doc.agent-labeled .repo-doc-name { color: #5c5400; font-weight: 600; }
/* the category/type badges themselves go neon on agent rows —
   never green: green is reserved for HUMAN verdicts */
.agent-labeled .doc-cat-badge,
.agent-labeled .doc-type-badge,
.job-line.agent-labeled .doc-cat-badge,
.job-line.agent-labeled .doc-type-badge {
  color: #4a4300 !important;
  border-color: rgba(160, 150, 0, .55) !important;
  background: rgba(234, 255, 0, .55) !important;
}

#agent-counter {
  border: 1px solid rgba(160, 150, 0, .55);
  background: linear-gradient(180deg, #fbffce 0%, #f2fa9e 100%);
  color: #4a4300;
}

/* card fully labelled BY THE AGENT — neon yellow header */
.repo-card.rec-agent .repo-head { background: rgba(234, 255, 0, .4); }
.repo-card.rec-agent .repo-head:hover { background: rgba(234, 255, 0, .55); }
.repo-card.rec-agent .jl-name strong { color: #5c5400; }

/* card + parent header text must be selectable / copy-pastable */
.repo-head, .rec-parent-head { -webkit-user-select: text; user-select: text; }
.repo-head .jl-name strong, .repo-head .jl-name small,
.rec-parent-head strong { -webkit-user-select: text; user-select: text; cursor: text; }

/* ticked = completed by the user = RED, never green */
.repo-card.user-done .repo-head { background: rgba(190, 34, 26, .13); box-shadow: inset 3px 0 0 #a11d15; }
.repo-card.user-done .jl-name strong { color: #a11d15; }
.rec-parent-head .rec-tick { margin-right: 4px; }

/* bin sub-folders (PO / Miscellaneous / Other) per company */
.bin-subfolder { width: 100%; cursor: pointer; }
.bin-subfolder:hover { background: rgba(96, 148, 210, .1); }
.bin-subfolder .repo-chev { display: inline-block; transition: transform .15s; }
.bin-subfolder.open .repo-chev { transform: rotate(180deg); }
.bin-subfolder-box { padding-left: 14px; }

#upload-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  margin: 8px 0;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: rgba(96, 148, 210, .05);
}
#upload-box input[type="text"] { min-width: 240px; }

/* ================= CLIENT DASHBOARD (curation) ================= */
.cd-hero { display: flex; align-items: center; gap: 18px; margin: 6px 0 22px; }
.cd-avatar {
  width: 64px; height: 64px; border-radius: 18px; flex: 0 0 64px;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 26px; font-weight: 600;
  letter-spacing: .5px; box-shadow: var(--shadow-lift);
}
.cd-hero-text h2 {
  margin: 0; font-family: var(--display); font-size: 26px;
  letter-spacing: .4px; text-transform: uppercase; color: var(--ink);
}
.cd-hero-text p { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; }
.cd-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.cd-kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.cd-kpi b {
  display: block; font-size: 26px; font-family: var(--display);
  color: var(--ink); line-height: 1.1;
}
.cd-kpi span {
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-3);
}
.cd-kpi.you b { color: var(--green); }
.cd-kpi.agents b { color: var(--amber); }
.cd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;
}
@media (max-width: 900px) { .cd-grid { grid-template-columns: 1fr; } }
.cd-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.cd-card h3 {
  margin: 0 0 14px; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-2);
}
.cd-months { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.cd-month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.cd-month .bar {
  width: 100%; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--teal), color-mix(in srgb, var(--teal) 55%, transparent));
  min-height: 3px; transition: height .35s ease;
}
.cd-month small { font-size: 9px; color: var(--ink-3); white-space: nowrap; }
.cd-month b { font-size: 10px; color: var(--ink-2); }
.cd-tbar { margin-bottom: 10px; }
.cd-tbar .lbl {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--ink-2); margin-bottom: 4px;
}
.cd-tbar .track {
  height: 8px; border-radius: 6px; background: var(--bg-deep); overflow: hidden;
}
.cd-tbar .fill { height: 100%; border-radius: 6px; background: var(--violet); }
.cd-tbar:nth-child(2n) .fill { background: var(--teal); }
.cd-tbar:nth-child(3n) .fill { background: var(--green); }
.cd-list { display: flex; flex-direction: column; }
.cd-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 4px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  border-radius: 8px;
}
.cd-row:hover { background: var(--bg-deep); }
.cd-row:last-child { border-bottom: none; }
.cd-row .nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13px;
}
.cd-row .meta { font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.cd-pill {
  font-size: 10px; padding: 2px 8px; border-radius: 20px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
.cd-pill.po { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); border-color: transparent; }
.cd-pill.aw { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); border-color: transparent; }
.cd-pill.agent { background: #fdf59a; color: #7a6a00; border-color: transparent; }
.cd-empty { color: var(--ink-3); font-size: 13px; padding: 12px 4px; }
.cd-open { margin-right: 10px; flex: 0 0 auto; }

/* CLIENT-DASH v2: full document sections */
.cd-section { margin-bottom: 18px; }
.cd-sec-head { padding: 14px 18px 4px; }
.cd-sec-head h3 {
  margin: 0; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-2);
  font-family: var(--display);
}
.cd-sec-body { padding: 6px 8px 12px; }
.cd-more { display: block; margin: 10px auto 4px; }

/* PURPLE-PULL v1: code-extraction artworks — purple takes precedence */
.repo-doc.purple-labeled,
.repo-doc.purple-labeled.agent-labeled,
.repo-doc.purple-labeled.hand-labeled { background: rgba(109, 90, 143, .22); }
.repo-doc.purple-labeled:hover { background: rgba(109, 90, 143, .34); }
.repo-doc.purple-labeled .repo-doc-name { color: #4a3a68; font-weight: 600; }
[data-theme="dark"] .repo-doc.purple-labeled .repo-doc-name { color: #c9b8ef; }

/* ART-BRANCH v1: artwork family branches in curation buckets */
.art-branch {
  display: flex; align-items: baseline; gap: 10px;
  margin: 14px 4px 4px; padding: 7px 12px;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border-left: 3px solid var(--violet); border-radius: 8px;
}
.art-branch .ab-name {
  font-family: var(--display); font-weight: 600; letter-spacing: .6px;
  color: var(--violet); font-size: 14px;
}
.art-branch em { font-size: 11px; color: var(--ink-3); font-style: normal; }
.repo-doc.art-branch-child { margin-left: 18px; }


/* UPLOAD-DND v2: fancy animated drop zone (Curation view) */
.upload-dropzone.fancy {
  position: relative;
  min-height: 158px;
  padding: 22px;
  margin: 8px 0 12px;
  border-radius: 16px;
  cursor: pointer;
  color: #234a1e;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(159,214,149,.38), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(180,214,255,.28), transparent 55%),
    linear-gradient(135deg, #f2fbef 0%, #eaf5e4 100%);
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4),
              box-shadow .25s, background .25s;
  box-shadow: 0 6px 22px -12px rgba(45,90,39,.35),
              inset 0 0 0 2px rgba(45,90,39,.15);
}
.upload-dropzone.fancy::before,
.upload-dropzone.fancy::after {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}
.upload-dropzone.fancy::before {
  background:
    linear-gradient(90deg, #2d5a27 50%, transparent 50%) top/16px 2px repeat-x,
    linear-gradient(0deg,  #2d5a27 50%, transparent 50%) left/2px 16px repeat-y,
    linear-gradient(90deg, #2d5a27 50%, transparent 50%) bottom/16px 2px repeat-x,
    linear-gradient(0deg,  #2d5a27 50%, transparent 50%) right/2px 16px repeat-y;
  opacity: .55;
  animation: dz-march 22s linear infinite;
}
.upload-dropzone.fancy:hover,
.upload-dropzone.fancy.over {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -12px rgba(45,90,39,.45),
              inset 0 0 0 2px rgba(45,90,39,.3);
}
.upload-dropzone.fancy.over {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(120,220,120,.55), transparent 55%),
    linear-gradient(135deg, #d9f2d1 0%, #b9e2af 100%);
}
.upload-dropzone.fancy.over::before { opacity: 1; }
.upload-dropzone.fancy .dz-blob {
  position: absolute; inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(120,200,120,.35) 0 15%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(90,180,255,.25) 0 15%, transparent 45%);
  filter: blur(30px);
  z-index: 0;
  animation: dz-blob 18s ease-in-out infinite alternate;
}
.upload-dropzone.fancy .dz-ring {
  position: absolute;
  left: 34px; top: 50%;
  width: 88px; height: 88px;
  margin-top: -44px;
  border-radius: 50%;
  border: 2px solid rgba(45,90,39,.25);
  z-index: 1;
  animation: dz-pulse 2.6s ease-out infinite;
}
.upload-dropzone.fancy .dz-inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 22px;
  pointer-events: none;
  padding-left: 6px;
}
.upload-dropzone.fancy .dz-icon {
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.upload-dropzone.fancy .dz-icon svg { transition: transform .3s ease; }
.upload-dropzone.fancy.over .dz-icon svg { transform: translateY(-4px) scale(1.05); }
.upload-dropzone.fancy .dz-arrow {
  animation: dz-bounce 1.8s ease-in-out infinite;
  transform-origin: 32px 42px;
}
.upload-dropzone.fancy .dz-lines {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
.upload-dropzone.fancy .dz-lines strong {
  font-size: 20px; font-weight: 700;
  color: #1f4d1a;
  letter-spacing: .2px;
}
.upload-dropzone.fancy .dz-lines span {
  font-size: 13px; color: #365c30; opacity: .8;
}
.upload-dropzone.fancy .dz-lines span b {
  color: #2d5a27; text-decoration: underline;
  text-decoration-color: rgba(45,90,39,.4);
  text-underline-offset: 3px;
}
.upload-dropzone.fancy .dz-lines small {
  font-size: 11px; color: #557a4f; opacity: .75;
  letter-spacing: .5px; text-transform: uppercase;
  margin-top: 2px;
}

@keyframes dz-pulse {
  0%   { transform: scale(.9); opacity: .5; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes dz-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
@keyframes dz-march {
  to { background-position:
         calc(top + 100px) top,
         left calc(top + 100px),
         calc(bottom + 100px) bottom,
         right calc(top + 100px); }
}
@keyframes dz-blob {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(4%,3%) rotate(6deg); }
}

#upload-box.dnd-page-hover {
  outline: 3px solid rgba(45, 90, 39, .55);
  outline-offset: 6px;
  border-radius: 18px;
}

/* file queue */
.dz-filelist {
  margin: 6px 0 12px;
  max-height: 200px;
  overflow: auto;
  padding: 6px 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(45,90,39,.15);
  backdrop-filter: blur(2px);
}
.dz-file {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: #234;
  transition: background .12s;
}
.dz-file + .dz-file { border-top: 1px dashed rgba(0,0,0,.06); }
.dz-file:hover { background: rgba(159,214,149,.25); }
.dz-file .dz-fico {
  width: 18px; height: 22px; border-radius: 3px;
  background: linear-gradient(135deg, #eef3ff, #d8e2f4);
  border: 1px solid rgba(0,0,0,.15);
  position: relative;
}
.dz-file .dz-fico::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 6px; height: 6px;
  background: rgba(0,0,0,.12); border-bottom-left-radius: 3px;
}
.dz-file .dz-fname {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-file .dz-fsize {
  font-variant-numeric: tabular-nums;
  color: #667; font-size: 11px;
}
.dz-file .dz-rm {
  background: transparent;
  border: 1px solid rgba(161,29,21,.35);
  color: #a11d15;
  border-radius: 6px;
  width: 22px; height: 22px;
  cursor: pointer;
  transition: background .12s;
}
.dz-file .dz-rm:hover { background: rgba(161,29,21,.12); }


/* UP-TYPEAHEAD v1: fuzzy client autocomplete in the upload box */
.up-client-wrap { position: relative; margin-top: 6px; }
.up-client-wrap input {
  width: 100%; padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(45,90,39,.25);
  font-size: 13px;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.up-client-wrap input:focus {
  outline: none;
  border-color: #2d5a27;
  box-shadow: 0 0 0 3px rgba(45,90,39,.15);
}
.up-client-sug {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 3px;
  background: #fff;
  border: 1px solid rgba(45,90,39,.3);
  border-radius: 8px;
  box-shadow: 0 12px 28px -12px rgba(45,90,39,.35);
  max-height: 260px; overflow: auto;
  z-index: 40;
}
.up-sug-row {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
}
.up-sug-row + .up-sug-row { border-top: 1px dashed rgba(0,0,0,.06); }
.up-sug-row:hover, .up-sug-row.active {
  background: rgba(159,214,149,.45);
  color: #1f4d1a;
}


/* BEAR-PDF-ATTACH v1: paperclip badge on job rows */
.icon-3d.att { position: relative; }
.icon-3d.att .att-badge {
  position: absolute; top: -4px; right: -4px;
  background: #2d5a27; color: #fff;
  border-radius: 999px; padding: 1px 5px;
  font-size: 10px; font-weight: 700;
  line-height: 1;
  border: 2px solid #fff;
}

/* ============================================================
   PRECISION PASS — industrial-grade polish (palette unchanged)
   Depth, numeric typography, and one orchestrated entrance.
   ============================================================ */

/* Precise figures everywhere data is read — the mark of a real
   instrument panel. Tabular + lining numerals line up in columns. */
.stat-value, .stat-sub, .jt-when, .jt-size, .jt-client,
.jt-dayband-count, .feed-item .t, .stat-value.small,
.week-chart .val, .db-num, .count, [class*="count-"] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

body { text-rendering: optimizeLegibility; }

/* Orchestrated page load — stat tiles rise + settle in sequence.
   One well-timed entrance reads as craftsmanship, not decoration. */
@media (prefers-reduced-motion: no-preference) {
  .stats .stat-card {
    animation: statRise .5s var(--ease) both;
  }
  .stats .stat-card:nth-child(1) { animation-delay: .02s; }
  .stats .stat-card:nth-child(2) { animation-delay: .08s; }
  .stats .stat-card:nth-child(3) { animation-delay: .14s; }
  .stats .stat-card:nth-child(4) { animation-delay: .20s; }
  .dash-cols .panel { animation: statRise .5s var(--ease) both; animation-delay: .24s; }
}
@keyframes statRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section headers — a touch more authority, tighter tracking. */
.panel-head h2 { font-variant-numeric: tabular-nums; }
.hero-greeting { font-feature-settings: "ss01" 1; }

/* Weekly chart bars — crisper edge + subtle bevel so the ledger
   reads as machined, not flat. Colour is inherited, not changed. */
.week-chart .bar {
  box-shadow: var(--bevel);
  border-radius: 4px 4px 2px 2px;
}

/* TYPE FOLDERS (repository) — job docs grouped as PDFs/CDRs/AIs/Excels */
.repo-typefolder summary {
  cursor: pointer;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft, #6b6b60);
  border-radius: 8px;
  user-select: none;
  list-style-position: inside;
}
.repo-typefolder summary:hover { background: var(--bg-deep); }
.repo-typefolder[open] > summary { color: var(--accent, #1e5c2f); }
.repo-typefolder .repo-doc { margin-left: 14px; }

/* LIVE COUNTS strip — continuous section totals */
.live-counts {
  margin: 2px 0 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-deep);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-soft, #6b6b60);
  white-space: nowrap;
  overflow-x: auto;
}

/* GLOBAL TYPE FOLDERS — Excel/.AI/.CDR moved out of the job list */
.repo-typefolder.global {
  margin: 4px 0;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: var(--bg-deep);
  overflow: hidden;
}
.repo-typefolder.global > summary {
  padding: 13px 16px;
  font-size: 14px;
  letter-spacing: .05em;
}
.repo-typefolder.global[open] {
  background: transparent;
}
.repo-typefolder.global .repo-doc { margin-left: 8px; }

/* PDF master folder — nested client subfolders */
.repo-typefolder.global .repo-typefolder {
  margin-left: 14px;
  border-top: none;
}
.repo-typefolder.global .repo-typefolder > summary {
  font-size: 13px;
  padding: 9px 12px;
}

/* show-more paging button inside folders */
.repo-showmore {
  display: block;
  margin: 8px auto 10px;
  padding: 8px 22px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: var(--bg-deep);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft, #6b6b60);
  cursor: pointer;
}
.repo-showmore:hover { background: rgba(0,0,0,.06); }

/* mass-delete arm state */
#bulk-del { color: #a02020; border-color: rgba(160,32,32,.45); }
#bulk-del:hover { background: rgba(160,32,32,.08); }

/* rapid select-all pill on folder headers */
.sel-all-btn {
  margin-left: 12px;
  padding: 3px 10px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft, #6b6b60);
  background: rgba(255,255,255,.65);
  cursor: pointer;
  user-select: none;
  display: inline-block;
}
.sel-all-btn:hover { background: rgba(0,0,0,.07); }

/* CAT-PRINTOUT badge */
.doc-cat-badge[data-cat="Printout"] {
  background: rgba(30,92,160,.12);
  color: #1e5ca0;
  border-color: rgba(30,92,160,.35);
}

/* BIN-LABEL v2 css: bin row wrapper is transparent to layout so bin rows
   keep their exact original formatting; label panel appears under its row */
.bin-doc-wrap { display: contents; }

/* MINT DASH: You/Agents tally sits top-LEFT on the dashboard (owner order) */



/* ===== MOBILE NAV (topbar hamburger is hidden on dashboard/companies) ===== */
.nav-fab { display: none; }
@media (max-width: 900px), (orientation: landscape) and (max-height: 540px) {
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh;
    width: min(284px, 84vw);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 18px 50px -12px rgba(0,0,0,.5);
    z-index: 260; overflow-y: auto;
  }
  .sidebar.open { transform: none; }
  .scrim { display: none; }
  .scrim.show { display: block; position: fixed; inset: 0; z-index: 240;
    background: rgba(15,18,13,.42); backdrop-filter: blur(1px); }
  .nav-fab {
    display: flex; position: fixed; top: 12px; left: 60px; right: auto; z-index: 250;
    width: 44px; height: 44px; border-radius: 50%;
    align-items: center; justify-content: center; cursor: pointer;
    background: rgba(255,255,255,.94); color: #202124;
    border: 1px solid rgba(95,99,104,.34);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .nav-fab:active { transform: scale(.94); }
  .sidebar.open ~ .nav-fab { opacity: 0; pointer-events: none; }
  /* let the full-bleed dashboard/companies scroll on a phone */
  body.mintdash-on #view-dashboard,
  body.co-on #view-companies { height: auto !important; min-height: 100vh; overflow: visible !important; }
  body.mintdash-on .main, body.co-on .main { padding: 0 !important; }
}

/* THEME-FADE v1: light/dark switches cross-fade instead of snapping */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .55s;
  animation-timing-function: ease-in-out;
}
html.bp-theme-fading, html.bp-theme-fading *, html.bp-theme-fading *::before, html.bp-theme-fading *::after {
  transition: background-color .55s ease, color .55s ease, border-color .55s ease,
              box-shadow .55s ease, fill .55s ease, stroke .55s ease !important;
}