/* ─── Fonts (self-hosted) ─────────────────────────────── */
@font-face { font-family: 'Inter'; font-weight: 300; font-display: swap;
  src: url('/static/fonts/inter-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap;
  src: url('/static/fonts/space-grotesk-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap;
  src: url('/static/fonts/space-grotesk-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap;
  src: url('/static/fonts/jetbrains-mono-latin-500.woff2') format('woff2'); }

/* ─── Tokens ──────────────────────────────────────────── */
:root {
  --bg:           #0c0c0d;
  --bg-2:         #141416;
  --bg-3:         #1c1c1f;
  --bg-4:         #232327;   /* hover fill (Farm redesign B) */
  --fg:           #eeeae1;
  --fg-dim:       #b4ada0;   /* lifted from #9c958a → ~5:1 on --bg for WCAG AA (body/labels) */
  --fg-dim-2:     #948d80;   /* lifted from #837c70 → ~4:1 (decorative / large text) */
  --line:         #232326;
  --line-strong:  #2e2e32;
  --accent:       #fa8927;
  --accent-deep:  #964737;
  --accent-soft:  color-mix(in srgb, var(--accent) 12%, transparent);
  --warn:         #e0922e;
  --r-card:       12px;
  --r-sm:         8px;
  --r-pill:       999px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Semantic + legacy aliases — collapse the second token set onto the
     engineering system so there is one palette, one accent, one mono font. */
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-dim);
  --text-tertiary:  var(--fg-dim-2);
  --bg-card:        var(--bg-2);
  --ok:             #6fa84a;
  --success:        var(--ok);
  --danger:         #ff6b6b;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 300; font-size: 13.5px; min-height: 100%; }

/* Graph-paper backdrop */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  opacity: 0.10;
}

/* ─── App shell ───────────────────────────────────────── */
.app { position: relative; z-index: 1; display: grid;
  grid-template-columns: 240px 1fr; min-height: 100vh; }

/* ─── Sidebar ─────────────────────────────────────────── */
.side { border-right: 1px solid var(--line); background: rgba(12,12,13,0.92);
  display: flex; flex-direction: column; padding: 22px 0 18px;
  position: sticky; top: 0; height: 100vh; }
.side .brand { display: flex; align-items: center; gap: 12px;
  padding: 4px 22px 22px; border-bottom: 1px solid var(--line); }
.side .brand .mark { width: 30px; height: 30px; background: var(--accent);
  -webkit-mask: url('/static/assets/logo-mark-pf.png') center/contain no-repeat;
          mask: url('/static/assets/logo-mark-pf.png') center/contain no-repeat; }
.side .brand .wm { font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 17px; letter-spacing: -0.015em; color: var(--fg); line-height: 1; }
.side .brand .wm small { display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.30em; color: var(--fg-dim-2);
  text-transform: uppercase; margin-top: 4px; font-weight: 500; }

.nav-section { padding: 18px 22px 6px; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.24em; color: var(--fg-dim-2);
  text-transform: uppercase; font-weight: 500; }
.nav-link { display: flex; align-items: center; gap: 14px;
  padding: 8px 22px 8px 18px; font-size: 14px; color: var(--fg-dim);
  cursor: pointer; border-left: 2px solid transparent; text-decoration: none;
  transition: color .15s, background .15s, border-color .15s; user-select: none; }
.nav-link:hover { color: var(--fg); background: rgba(255,255,255,0.02); }
.nav-link.active { color: var(--accent); border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-link .ico { width: 16px; height: 16px; color: currentColor; flex-shrink: 0; }
.nav-link .count { margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.10em; color: var(--fg-dim-2); }
.nav-link.active .count { color: var(--accent); }

.side .footer { margin-top: auto; padding: 18px 22px 4px;
  border-top: 1px solid var(--line); }
.side .user { display: flex; align-items: center; gap: 12px; }
.side .user .avatar { width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #0c0c0d; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 13px; }
.side .user .who { line-height: 1.2; }
.side .user .who .n { color: var(--fg); font-size: 13px; }
.side .user .who .r { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-dim-2); text-transform: uppercase;
  margin-top: 2px; }
.side .ver { margin-top: 14px; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.24em; color: var(--fg-dim-2);
  text-transform: uppercase; }
.logout-form { margin-top: 14px; }
.logout-btn { width: 100%; }
.side .user-link { display: block; text-decoration: none; color: inherit; border-radius: 8px; padding: 4px; margin: -4px; transition: background .15s; }
.side .user-link:hover { background: rgba(255,255,255,0.03); }
.side .user-link.active { background: rgba(250,137,39,0.10); }
a.tb-avatar { text-decoration: none; }

/* ─── Main ─────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--line); position: sticky;
  top: 0; background: rgba(12,12,13,0.92); backdrop-filter: blur(8px); z-index: 5; }
.topbar .crumb { font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.20em; color: var(--fg-dim-2); text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; }
.topbar .crumb .sep { color: var(--accent); }
.topbar .crumb .now { color: var(--fg); }
.topbar .actions { display: flex; align-items: center; gap: 14px; }

.btn { font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 400;
  padding: 8px 16px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--fg); cursor: pointer; transition: all .15s; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; }
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.primary { background: var(--accent); color: #0c0c0d; border-color: var(--accent);
  font-weight: 500; }
.btn.primary:hover { background: transparent; color: var(--accent); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--fg); border-color: var(--line-strong); }

/* ─── Page chrome ─────────────────────────────────────── */
.page { padding: 28px 32px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 32px; }
.page-head .ph-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.page-head .eb { font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.page-head .eb::before { content: ''; display: inline-block; width: 22px;
  height: 1.5px; background: var(--accent); }
.page-head h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 36px; letter-spacing: -0.03em; line-height: 0.95; margin: 10px 0 0; color: var(--fg); }
.page-head .sub,
.page-head .page-sub { color: var(--fg-dim); font-size: 14px; line-height: 1.6;
  max-width: 360px; text-align: right; }

.mono { font-family: 'JetBrains Mono', monospace; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); font-size: 12px; }
.mono-lbl { font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 10px; letter-spacing: 0.20em; color: var(--fg-dim-2);
  text-transform: uppercase; display: block; margin-bottom: 6px; }
.display { font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  letter-spacing: -0.03em; line-height: 0.95; color: var(--fg); }
.accent { color: var(--accent); }

/* Filter chips */
.filters { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.filters .chip { font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim);
  padding: 10px 16px 12px; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; display: flex; align-items: center; gap: 8px;
  text-decoration: none; user-select: none; }
.filters .chip:hover { color: var(--fg); }
.filters .chip.active { color: var(--fg); border-bottom-color: var(--accent); }
.filters .chip .n { color: var(--fg-dim-2); font-size: 10px; letter-spacing: 0.10em; }
.filters .chip.active .n { color: var(--accent); }
.filters .spacer { flex: 1; }

/* ─── Stat strip (four standalone cards) ──────────────── */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; margin-bottom: 30px; }
.stat-cell { padding: 22px 24px 24px; border: 1px solid var(--line);
  background: var(--bg-2); border-radius: 14px; position: relative; min-height: 150px;
  display: flex; flex-direction: column; }
.stat-cell .k { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; color: var(--fg-dim); text-transform: uppercase; }
.stat-cell .v { font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 42px; letter-spacing: -0.01em; color: var(--fg); line-height: 1;
  margin-top: 18px; }
.stat-sub { margin-top: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.04em; color: var(--fg-dim); }
.stat-trend { margin-top: 14px; align-self: flex-start; display: inline-flex;
  align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 999px; }
.stat-trend .stat-arrow { font-size: 9px; line-height: 1; }
.stat-trend.pos { color: #6fce8f; background: rgba(95,184,122,0.13); }
.stat-trend.neg { color: #e8756b; background: rgba(229,96,77,0.13); }
.stat-trend.neutral { color: var(--fg-dim-2); background: transparent; padding-left: 0; }

/* ─── Pipeline funnel ─────────────────────────────────── */
.pipe-section { margin-bottom: 30px; }
.pipe-h { font-size: 11px; letter-spacing: 0.22em; color: var(--fg-dim-2);
  text-transform: uppercase; margin: 0 0 14px; font-weight: 500; }
.pipe-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.pipe-card { position: relative; display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 20px 22px; text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease; }
.pipe-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.pipe-top { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fg-dim-2); }
.pipe-card.stage-inbox  .pipe-top { background: var(--stage-inbox); }
.pipe-card.stage-offer   .pipe-top { background: var(--stage-offer); }
.pipe-card.stage-prototype .pipe-top { background: var(--stage-prototype); }
.pipe-card.stage-cad      .pipe-top { background: var(--stage-cad); }
.pipe-card.stage-printing .pipe-top { background: var(--stage-printing); }
.pipe-card.stage-shipping .pipe-top { background: var(--stage-shipping); }
.pipe-card.stage-done     .pipe-top { background: var(--stage-done); }
.pipe-lbl { display: flex; align-items: center; gap: 8px; }
.pipe-lbl .mono { font-size: 10px; letter-spacing: 0.1em; color: var(--fg-dim);
  text-transform: uppercase; }
.pipe-lbl .mono.stage-inbox  { color: var(--stage-inbox); }
.pipe-lbl .mono.stage-offer   { color: var(--stage-offer); }
.pipe-lbl .mono.stage-prototype { color: var(--stage-prototype); }
.pipe-lbl .mono.stage-cad      { color: var(--stage-cad); }
.pipe-lbl .mono.stage-printing { color: var(--stage-printing); }
.pipe-lbl .mono.stage-shipping { color: var(--stage-shipping); }
.pipe-lbl .mono.stage-done     { color: var(--stage-done); }
.pipe-n { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 34px;
  letter-spacing: -0.01em; color: var(--fg); line-height: 1; margin-top: 16px; }

/* ─── Dashboard body ──────────────────────────────────── */
.dash-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: start; }
.card { border: 1px solid var(--line); background: var(--bg-2); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 24px; }
.card-h { font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.22em; color: var(--fg-dim-2); text-transform: uppercase;
  margin: 0 0 20px; font-weight: 500; }

/* Chart — gridlined bar chart with y-axis scale + two-tone bars */
.chart { padding-top: 6px; }
.chart-grid { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.chart-yaxis { display: flex; flex-direction: column; justify-content: space-between;
  height: var(--chart-h, 200px); text-align: right; }
.chart-ytick { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--fg-dim-2); line-height: 0; }
.chart-plot { position: relative; }
.chart-lines { position: absolute; top: 0; left: 0; right: 0; height: var(--chart-h, 200px);
  display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.chart-line { border-top: 1px dashed var(--line); height: 0; }
.chart-bars { position: relative; display: grid; grid-auto-flow: column;
  grid-auto-columns: 1fr; height: var(--chart-h, 200px); align-items: end; column-gap: 14px; }
.cbar { position: relative; justify-self: center; width: 62%; max-width: 56px; align-self: end;
  background: color-mix(in srgb, var(--accent) 34%, var(--bg-3));
  border-radius: 4px 4px 0 0; display: flex; flex-direction: column-reverse; min-height: 2px; }
.cbar-quoted { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.cbar-val { position: absolute; top: -19px; left: -8px; right: -8px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fg-dim); }
.cbar-val.zero { color: var(--fg-dim-2); }
.chart-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  column-gap: 14px; margin-top: 12px; }
.chart-wk { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: var(--fg-dim-2); letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }

/* Projects table */
.projects-table { width: 100%; border-collapse: collapse; }
.projects-table td { border-bottom: 1px solid var(--line); padding: 12px 8px;
  vertical-align: top; font-size: 13px; }
.projects-table .num { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--fg-dim-2); letter-spacing: 0.18em; }
.projects-table .name { font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--fg); margin-bottom: 4px; }
.projects-table .sub { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--fg-dim-2); text-transform: uppercase; }

/* Status pill */
.status-pill { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); color: var(--fg-dim); }
.status-pill::before { content: ''; width: 6px; height: 6px; background: var(--fg-dim); }
.status-pill.inquiry::before, .status-pill.quoted::before { background: var(--fg-dim); }
.status-pill.cad::before, .status-pill.draft::before { background: var(--accent); }
.status-pill.printing::before, .status-pill.issued::before, .status-pill.sent::before { background: #e8c14a; }
.status-pill.shipping::before { background: #6fa84a; }
.status-pill.done::before, .status-pill.paid::before { background: var(--fg-dim-2); }
.status-pill.cancelled::before, .status-pill.overdue::before, .status-pill.rejected::before, .status-pill.expired::before { background: var(--accent-deep); }
.status-pill.accepted::before { background: #6fa84a; }
.invoice-actions form { display: inline-flex; margin: 0; }

/* Recent-activity feed (dashboard) */
.act-card { padding-bottom: 8px; }
.act-list { list-style: none; padding: 0; margin: 0; }
.act-row { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.act-row:first-child { padding-top: 0; }
.act-ico { width: 34px; height: 34px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; background: var(--bg-3);
  border: 1px solid var(--line); color: var(--fg-dim); }
.act-ico .ico { width: 16px; height: 16px; }
.act-main { min-width: 0; }
.act-line1 { font-size: 13.5px; color: var(--fg-dim); overflow-wrap: anywhere; line-height: 1.4; }
.act-verb { color: var(--fg); }
.act-subj { font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); }
.act-sep { color: var(--fg-dim-2); }
.act-line2 { margin-top: 4px; font-size: 12px; color: var(--fg-dim-2); }
.act-line2 .act-actor { color: var(--fg-dim); }
.act-time { font-size: 11px; letter-spacing: 0.02em; color: var(--fg-dim-2); }
.act-empty { color: var(--fg-dim); font-size: 13px; padding: 12px 0; }
.act-viewall { display: inline-block; margin-top: 16px; font-size: 13px;
  color: var(--accent); text-decoration: none; }
.act-viewall:hover { text-decoration: underline; }

/* Tone tints for the activity icon tile + verb */
.act-row.tone-blue  .act-ico { color: var(--stage-inbox); border-color: color-mix(in srgb, var(--stage-inbox) 35%, var(--line)); background: color-mix(in srgb, var(--stage-inbox) 10%, var(--bg-3)); }
.act-row.tone-warm  .act-ico { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--bg-3)); }
.act-row.tone-pos   .act-ico { color: var(--stage-printing); border-color: color-mix(in srgb, var(--stage-printing) 35%, var(--line)); background: color-mix(in srgb, var(--stage-printing) 10%, var(--bg-3)); }
.act-row.tone-amber .act-ico { color: #e0b94a; border-color: color-mix(in srgb, #e0b94a 35%, var(--line)); background: color-mix(in srgb, #e0b94a 10%, var(--bg-3)); }
.act-row.tone-cyan  .act-ico { color: var(--stage-shipping); border-color: color-mix(in srgb, var(--stage-shipping) 35%, var(--line)); background: color-mix(in srgb, var(--stage-shipping) 10%, var(--bg-3)); }
.act-row.tone-neg   .act-ico { color: #e8756b; border-color: color-mix(in srgb, #e5604d 35%, var(--line)); background: color-mix(in srgb, #e5604d 10%, var(--bg-3)); }
.act-row.tone-blue  .act-verb { color: var(--stage-inbox); }
.act-row.tone-warm  .act-verb { color: var(--accent); }
.act-row.tone-pos   .act-verb { color: var(--stage-printing); }
.act-row.tone-amber .act-verb { color: #e0b94a; }
.act-row.tone-cyan  .act-verb { color: var(--stage-shipping); }
.act-row.tone-neg   .act-verb { color: #e8756b; }

/* Dashboard responsive */
@media (max-width: 960px) {
  .dash-body { grid-template-columns: 1fr; }
  .pipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Pipeline funnel → horizontal scroll of tappable stage chips */
  .pipe-grid { display: flex; grid-template-columns: none; overflow-x: auto; gap: 10px;
    margin: 0 -16px; padding: 0 16px 4px; -webkit-overflow-scrolling: touch; }
  .pipe-card { flex: 0 0 auto; min-width: 124px; padding: 14px 16px 16px; }
  .pipe-n { font-size: 26px; margin-top: 10px; }
  .stat-cell { min-height: 132px; }
}

/* ─── Inbox ──────────────────────────────────────────── */
.inbox-grid { display: grid; grid-template-columns: 380px 1fr;
  border: 1px solid var(--line); background: var(--bg-2); min-height: 60vh; }
.inbox-list { list-style: none; padding: 0; margin: 0; border-right: 1px solid var(--line);
  max-height: 80vh; overflow-y: auto; }
.inquiry-row { border-bottom: 1px solid var(--line); position: relative; }
.inquiry-row .row-link { display: block; padding: 12px 16px 12px 22px;
  color: var(--fg); text-decoration: none; position: relative; }
.inquiry-row .row-link:hover { background: rgba(255,255,255,0.02); }
.inquiry-row.selected { background: rgba(250,137,39,0.06); }
.inquiry-row.selected::before { content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.inquiry-row .unread-dot { position: absolute; left: 10px; top: 18px;
  width: 6px; height: 6px; background: var(--accent); }
.inquiry-row .top { display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  color: var(--fg-dim-2); text-transform: uppercase; margin-bottom: 6px; }
.inquiry-row .subject { color: var(--fg); font-size: 13.5px; margin-bottom: 4px; }
.inquiry-row .meta { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.14em; color: var(--fg-dim-2); text-transform: uppercase; }
.inquiry-row .meta .tag { color: var(--accent); }
.inbox-detail { padding: 28px; }
.inbox-detail header { margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line); }
.inbox-detail header h3 { font-size: 26px; margin: 8px 0; }
.inbox-detail .sender { color: var(--fg-dim); font-size: 13px; margin: 0; }
.inbox-detail .body { color: var(--fg-dim); line-height: 1.6;
  white-space: pre-wrap; margin: 16px 0; }
.attachments { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 16px 0; }
.att-slot { aspect-ratio: 4/3; background: var(--bg-3); border: 1px solid var(--line);
  margin: 0; position: relative; overflow: hidden; }
.att-slot img { width: 100%; height: 100%; object-fit: cover; }
.att-slot figcaption { position: absolute; left: 6px; bottom: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em;
  color: var(--fg); background: rgba(0,0,0,0.6); padding: 2px 6px; text-transform: uppercase; }
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); margin: 16px 0; }
.meta-grid > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.meta-grid > div:last-child { border-right: 0; }
.meta-grid .k { font-size: 9.5px; }
.meta-grid .v { font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--fg); margin-top: 6px; display: block; letter-spacing: 0.06em; }
.actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.responded-strip { display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 18px 0 0;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(250, 137, 39, 0.06); color: var(--accent);
  font-size: 10.5px; letter-spacing: 0.20em; }
.responded-strip .dot { width: 6px; height: 6px; background: var(--accent); }

/* ─── Language radio (invoice-new) ─────────────────────── */
.language-fieldset .lang-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.language-fieldset .lang-option {
  display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--bg-3);
  cursor: pointer; transition: border-color .15s, background .15s; margin: 0;
  font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: normal;
  font-size: 13px; color: var(--fg-dim);
}
.language-fieldset .lang-option:hover { border-color: var(--fg-dim); }
.language-fieldset .lang-option:has(input:checked) {
  border-color: var(--accent); background: rgba(250, 137, 39, 0.06); color: var(--fg);
}
.language-fieldset .lang-option input[type='radio'] { margin: 0; accent-color: var(--accent); }
.language-fieldset .lang-tag {
  font-size: 11px; letter-spacing: 0.20em; color: var(--accent);
  padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.language-fieldset .lang-label { font-size: 12px; }
.actions form { margin: 0; display: inline; }
.empty { padding: 40px; text-align: center; font-family: 'JetBrains Mono', monospace;
  color: var(--fg-dim-2); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ─── Pipeline kanban ─────────────────────────────────── */
.kanban { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.kanban .col { border: 1px solid var(--line); background: var(--bg-2); min-height: 60vh;
  display: flex; flex-direction: column; }
.kanban .col header { padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; position: sticky; top: 0;
  background: var(--bg-2); z-index: 1; }
.kanban .col header .dot { width: 8px; height: 8px; background: var(--fg-dim); }
.kanban .col header .dot.inbox { background: var(--fg-dim); }
.kanban .col header .dot.offer { background: var(--stage-offer); }
.kanban .col header .dot.prototype { background: var(--stage-prototype); }
.kanban .col header .dot.cad { background: var(--accent); }
.kanban .col header .dot.printing { background: #e8c14a; }
.kanban .col header .dot.shipping { background: #6fa84a; }
.kanban .col header .dot.done { background: var(--fg-dim-2); }
.kanban .col header .label { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.20em; color: var(--fg); text-transform: uppercase; }
.kanban .col header .count { margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--fg-dim-2); letter-spacing: 0.14em; }
.kanban .col-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kanban-card { background: var(--bg-3); border: 1px solid var(--line-strong);
  padding: 12px; cursor: grab; transition: border-color .15s; }
.kanban-card:hover { border-color: var(--accent); }
.kanban-card .num { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-dim-2); text-transform: uppercase; }
.kanban-card .name { font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--fg); margin: 6px 0 4px; }
.kanban-card .customer { font-size: 11.5px; color: var(--fg-dim); margin-bottom: 8px; }
.kanban-card .row { display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 4px 0;
  letter-spacing: 0.12em; color: var(--fg-dim); }
.kanban-card .row .k { color: var(--fg-dim-2); text-transform: uppercase; }
.kanban-card .row .v { color: var(--fg); }
.kanban-card .invoice-btn { margin-top: 8px; width: 100%; }

/* Inbox inquiry cards on the Jobs board — share the card look, but these are
   navigation links to the inquiry (not draggable project cards). */
.kanban-inq-card { display: block; background: var(--bg-3); border: 1px solid var(--line-strong);
  padding: 12px; cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color .15s; }
.kanban-inq-card:hover { border-color: var(--accent); }
.kanban-inq-card .num { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--fg-dim-2); text-transform: uppercase; }
.kanban-inq-card .name { font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--fg); margin: 6px 0 4px; }
.kanban-inq-card .customer { font-size: 11.5px; color: var(--fg-dim); margin-bottom: 8px; }

/* ─── Settings form ───────────────────────────────────── */
.settings-form fieldset { border: 1px solid var(--line); padding: 20px 24px;
  margin-bottom: 18px; background: var(--bg-2); }
.settings-form legend { padding: 0 8px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.20em; color: var(--accent); text-transform: uppercase; }
.settings-form label { display: block; margin: 12px 0; font-size: 12.5px; color: var(--fg-dim); }
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="number"],
.settings-form input:not([type]),
.settings-form textarea { display: block; width: 100%; margin-top: 6px;
  padding: 8px 12px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.settings-form textarea { font-family: 'Inter', sans-serif; line-height: 1.4; min-height: 80px; }
.settings-form input[type="checkbox"] { margin-right: 8px; }
.saved-notice { color: var(--accent); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; }

/* ─── Invoice list + detail ───────────────────────────── */
.invoices-table, .lines-table { width: 100%; border-collapse: collapse; }
.invoices-table th, .lines-table th { text-align: left;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
  color: var(--fg-dim-2); text-transform: uppercase; padding: 12px 8px;
  border-bottom: 1px solid var(--line); }
.invoices-table td, .lines-table td { padding: 14px 8px; border-bottom: 1px solid var(--line);
  font-size: 13px; vertical-align: top; }
.invoices-table a { color: var(--fg); text-decoration: none; }
.invoices-table a:hover { color: var(--accent); }
.invoice-actions { display: flex; gap: 10px; margin: 16px 0 26px; flex-wrap: wrap; }
.lines-table .desc { font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--fg); }
.lines-table .sub { color: var(--fg-dim); font-size: 12px; margin-top: 4px; }
.lines-table .tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-top: 6px; }
.totals { margin-left: auto; margin-top: 24px; width: 360px; padding-top: 16px; }
.totals > div { display: flex; justify-content: space-between; padding: 8px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--fg-dim);
  letter-spacing: 0.04em; }
.totals .total { padding: 14px 0; border-top: 1.5px solid var(--fg);
  font-family: 'Space Grotesk', sans-serif; font-size: 20px; color: var(--fg);
  letter-spacing: -0.02em; }

/* ─── Auth card ───────────────────────────────────────── */
.auth-body { background: var(--bg); color: var(--fg); font-family: 'Inter', sans-serif;
  min-height: 100vh; display: grid; place-items: center; }
.auth-card { width: 360px; border: 1px solid var(--line); background: var(--bg-2);
  padding: 32px; position: relative; z-index: 1; }
.auth-card .brand { margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.auth-card .brand .mark { width: 30px; height: 30px; background: var(--accent);
  -webkit-mask: url('/static/assets/logo-mark-pf.png') center/contain no-repeat;
          mask: url('/static/assets/logo-mark-pf.png') center/contain no-repeat; }
.auth-card .brand .wm { font-family: 'Space Grotesk', sans-serif; font-size: 17px;
  letter-spacing: -0.015em; color: var(--fg); }
.auth-card .brand .wm small { display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px; letter-spacing: 0.30em; color: var(--fg-dim-2);
  text-transform: uppercase; margin-top: 4px; }
.auth-card h1 { font-family: 'Space Grotesk', sans-serif; font-size: 28px;
  margin: 0 0 18px; letter-spacing: -0.025em; }
.auth-card .field { display: block; margin-bottom: 14px; }
.auth-card .field input { display: block; width: 100%; margin-top: 6px;
  padding: 9px 12px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong); font-family: 'JetBrains Mono', monospace;
  font-size: 13px; }
.auth-card .field input:focus { outline: 0; border-color: var(--accent); }
.auth-card .btn.primary { width: 100%; padding: 11px 16px; justify-content: center; }
.form-error { font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.18em; color: var(--accent-deep); text-transform: uppercase;
  margin-bottom: 14px; }

/* ─── Visibility helpers ───────────────────────────────── */
.mobile-only, .mobile-only-inline { display: none; }
.bottom-tabs { display: none; }
.more-sheet { display: none; }
.stage-tabs { display: none; }
.stage-sheet { display: none; }
.col-empty { padding: 14px; text-align: center; }

/* ─── Kanban card swipe (mobile, but markup is universal) ─ */
.kanban-card { position: relative; overflow: hidden; }
.kc-action-band {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 20px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 35%, transparent) 100%);
  color: var(--bg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.kc-action-label {
  font-size: 12px; letter-spacing: 0.22em; font-weight: 600;
  color: var(--bg);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .12s ease-out, transform .12s ease-out;
}
.kanban-card.is-armed .kc-action-label,
.kanban-card.is-committing .kc-action-label {
  opacity: 1;
  transform: translateX(0);
}
.kc-body {
  display: block;
  position: relative; z-index: 2;
  background: var(--bg-3);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  margin: -12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}
.kanban-card.is-swiping .kc-body { transition: none; }
.kanban-card.is-committing .kc-body { transform: translateX(110%); }
.kanban-card.is-committing .kc-action-band { opacity: 1; transition: opacity .15s; }
.kanban-card.is-removing {
  opacity: 0; max-height: 0; margin-top: 0;
  transform: scale(0.96);
  transition: opacity .2s, max-height .25s, margin .25s, transform .2s;
  pointer-events: none;
}

/* Toast */
#toast-host {
  position: fixed;
  left: 14px; right: 14px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast {
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  max-width: 360px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.toast.error { border-color: var(--accent-deep); color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .12s; transform: none; } }
/* Busy/disabled state while an action request is in flight (prevents double-submit) */
.btn:disabled, .btn[aria-busy="true"] { opacity: .5; cursor: default; pointer-events: none; }
/* Keyboard focus: a visible ring on interactive elements that lacked one */
.btn:focus-visible, button:focus-visible, a:focus-visible,
.nav-link:focus-visible, .bt-cell:focus-visible, .more-sheet-item:focus-visible,
.kanban-card:focus-visible, .kc-body:focus-visible, .user-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Inputs, filter chips, tabs and sub-nav also get a visible focus ring */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.chip:focus-visible, .proj-pill:focus-visible, .st-chip:focus-visible,
.schip:focus-visible, .tab:focus-visible, .cnav:focus-visible, .acc-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Skip-to-content link — first focusable element, off-screen until focused */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--accent); color: #0c0c0d; padding: 8px 14px; border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid var(--fg); }

/* Stage sheet (long-press) */
.stage-sheet.open { display: block; }
.stage-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 40;
  -webkit-tap-highlight-color: transparent;
}
.stage-sheet-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px;
  animation: sheetUp .22s cubic-bezier(.4,0,.2,1);
}
.stage-sheet-handle {
  width: 36px; height: 3px; background: var(--line-strong);
  margin: 4px auto 12px;
}
.stage-sheet-title {
  font-size: 10px; letter-spacing: 0.22em; color: var(--fg-dim-2);
  text-align: center; margin-bottom: 6px;
}
.stage-sheet-options {
  display: flex; flex-direction: column; gap: 6px;
}
.stage-sheet-option {
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 48px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.stage-sheet-option:hover { border-color: var(--accent); color: var(--accent); }
.stage-sheet-option::after {
  content: '→'; color: var(--accent); margin-left: 12px;
}
.stage-sheet-cancel {
  margin-top: 10px; padding: 14px 12px; min-height: 48px;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--fg-dim); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
}

/* Tablet — collapse sidebar to icon-only rail */
@media (max-width: 1024px) and (min-width: 761px) {
  .app { grid-template-columns: 64px 1fr; }
  .side .brand .wm, .side .nav-link span:not(.count), .nav-section,
  .side .footer .user .who, .side .ver, .logout-form { display: none; }
}

/* ─── Native form pages (inquiry-convert / invoice-new / invoice-send) ─── */
/* These pages piggy-back on .settings-form for base form styling and add a
   few page-specific extensions. .form-stack constrains width; banners,
   line-rows, totals-card, review-card are page-specific. */

.form-stack { max-width: 760px; }
.form-stack fieldset { margin-bottom: 18px; }
.form-stack .hint { font-size: 9.5px; letter-spacing: 0.18em; color: var(--fg-dim-2);
  text-transform: uppercase; margin: 0 0 14px; font-family: 'JetBrains Mono', monospace; }
.form-stack .req { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.10em; margin-left: 2px; }
.form-stack select { display: block; width: 100%; margin-top: 6px;
  padding: 9px 36px 9px 12px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-strong);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color .15s;
}
.form-stack select:hover { border-color: var(--fg-dim); }
.form-stack select:focus, .form-stack input:focus, .form-stack textarea:focus { outline: 0; border-color: var(--accent); }
.form-stack select option { background: var(--bg-2); color: var(--fg);
  font-family: 'JetBrains Mono', monospace; padding: 8px; }

.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }

/* ─── Banners ──────────────────────────────────────────── */
.banner { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-bottom: 18px;
  border: 1px solid var(--line); background: var(--bg-2); font-size: 13px; color: var(--fg); }
.banner .mono { font-size: 10px; letter-spacing: 0.20em; }
.banner.error { border-color: var(--accent-deep); background: rgba(150, 71, 55, 0.10); }
.banner.error .mono { color: var(--accent-deep); }
.banner.warning { border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: rgba(250, 137, 39, 0.06); }
.banner.warning .mono { color: var(--accent); }

/* ─── Invoice line builder ─────────────────────────────── */
.lines-fieldset legend { color: var(--accent); }
#lines-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

.line-row { border: 1px solid var(--line-strong); background: var(--bg-3);
  display: grid; grid-template-rows: auto 1fr; }
.line-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.line-head .line-num { font-size: 10px; letter-spacing: 0.22em; color: var(--accent); margin: 0; }
.line-remove { background: transparent; border: 1px solid var(--line); color: var(--fg-dim-2);
  width: 24px; height: 24px; line-height: 1; padding: 0; cursor: pointer;
  font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s; }
.line-remove:hover { color: var(--accent); border-color: var(--accent); }

.line-body { padding: 14px; display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'title    title'
    'desc     desc'
    'tag      tag'
    'qty      qty-display'
    'rate     amount';
  gap: 12px 14px; }
.line-title    { grid-area: title; }
.line-desc     { grid-area: desc; }
.line-tag      { grid-area: tag; }
.line-qty      { grid-area: qty; }
.line-qty-display { grid-area: qty-display; }
.line-rate     { grid-area: rate; }
.line-amount   { grid-area: amount; align-self: end;
  text-align: right; padding-bottom: 4px; }
.line-amount .mono-lbl { display: block; margin-bottom: 4px; text-align: right; }
.line-amount .amount-val { font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 20px; letter-spacing: -0.02em; color: var(--fg); }

.line-body label { margin: 0; }
.line-body input { margin-top: 6px; }
.line-body input[type='number']::-webkit-inner-spin-button,
.line-body input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.line-body input[type='number'] { -moz-appearance: textfield; }

.add-line-btn { font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; }

/* ─── Totals card (live, beside the form) ──────────────── */
.totals-card { border: 1px solid var(--line); background: var(--bg-2); padding: 22px;
  margin-bottom: 18px; }
.totals-card .card-h { color: var(--accent); margin: 0 0 14px; }
.totals-card .totals-row { display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.totals-card .totals-row:last-child { border-bottom: 0; }
.totals-card .totals-row .mono { font-size: 10.5px; letter-spacing: 0.20em; }
.totals-card .totals-row .display { font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; font-size: 16px; color: var(--fg); letter-spacing: -0.02em; }
.totals-card .grand { padding-top: 16px; border-top: 1.5px solid var(--fg);
  border-bottom: 0; margin-top: 4px; }
.totals-card .grand .display { font-size: 28px; }
.totals-card .grand .mono { color: var(--fg); }

/* ─── Send-review card ─────────────────────────────────── */
.review-card { border: 1px solid var(--line); background: var(--bg-2);
  padding: 28px 32px; margin-bottom: 24px; max-width: 760px; }
.review-card dl { display: grid; grid-template-columns: 100px 1fr;
  gap: 16px 24px; margin: 0; align-items: baseline; }
.review-card dt { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.22em; color: var(--fg-dim-2); text-transform: uppercase;
  padding-top: 4px; }
.review-card dd { margin: 0; color: var(--fg); font-size: 14px; line-height: 1.5; }
.review-card .display { font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 16px; letter-spacing: -0.015em; }
.review-card .display.total { font-size: 28px; color: var(--accent); }
.review-card .muted { color: var(--fg-dim); }
.review-card .accent { color: var(--accent); }

/* ─── Mobile — full re-skin per handoff ─────────────────── */
@media (max-width: 760px) {
  /* Visibility */
  .desktop-only, .desktop-only-header { display: none !important; }
  .mobile-only { display: flex; }
  .mobile-only-inline { display: inline; }

  /* App shell — sidebar hidden, bottom tabs replace it */
  .app { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
  .side { display: none; }
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Topbar — mobile chrome */
  .topbar {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(12,12,13,0.92);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  .topbar .mobile-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: inherit; flex: 1; min-width: 0;
  }
  .mobile-brand .mb-mark-link { display: flex; align-items: center; }
  .mobile-brand .mb-mark {
    width: 22px; height: 22px; background: var(--accent);
    -webkit-mask: url('/static/assets/logo-mark-pf.png') center/contain no-repeat;
            mask: url('/static/assets/logo-mark-pf.png') center/contain no-repeat;
    flex-shrink: 0;
  }
  .mobile-brand .mb-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
  .mobile-brand .mb-wm {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 13.5px; letter-spacing: -0.01em; color: var(--fg);
  }
  .mobile-brand .mb-sub {
    margin-top: 3px; font-size: 7.5px; letter-spacing: 0.26em;
    color: var(--fg-dim-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar .actions { gap: 10px; }
  .topbar .tb-avatar {
    width: 28px; height: 28px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--bg); display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 11px;
  }

  /* Bottom tab bar */
  .bottom-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    border-top: 1px solid var(--line);
    background: rgba(12,12,13,0.95);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  /* When a bottom sheet is open, hide the tab bar so the sheet's full
     content (incl. Cancel button) is reachable. */
  body.sheet-open .bottom-tabs { display: none; }
  .bt-cell {
    background: transparent; border: 0;
    padding: 10px 0 12px; min-height: 54px;
    color: var(--fg-dim-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer; position: relative; text-decoration: none;
    font-family: inherit;
    transition: color .15s;
  }
  .bt-cell.active { color: var(--fg); }
  .bt-cell.active::before {
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 28px; height: 2px; background: var(--accent);
  }
  .bt-icon { position: relative; display: inline-flex; }
  .bt-icon .ico { width: 18px; height: 18px; color: currentColor; }
  .bt-label {
    font-size: 8.5px; letter-spacing: 0.20em; color: currentColor;
    text-transform: uppercase; margin: 0;
  }
  .bt-badge {
    position: absolute; top: -5px; right: -10px;
    background: var(--accent); color: var(--bg);
    font-size: 8.5px; letter-spacing: 0.06em; font-weight: 500;
    padding: 1px 4px; min-width: 14px; text-align: center; line-height: 1.3;
  }

  /* More sheet */
  .more-sheet { display: none; }
  .more-sheet.open { display: block; }
  .more-sheet-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    z-index: 40; -webkit-tap-highlight-color: transparent;
  }
  .more-sheet-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    background: var(--bg-2); border-top: 1px solid var(--line);
    padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 4px;
    animation: sheetUp .22s cubic-bezier(.4,0,.2,1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .more-sheet-handle {
    width: 36px; height: 3px; background: var(--line-strong);
    margin: 4px auto 14px; border-radius: 0;
  }
  .more-sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 12px; color: var(--fg); text-decoration: none;
    border: 1px solid var(--line); background: var(--bg-3);
    font-size: 14px; min-height: 48px;
  }
  .more-sheet-item .ico { width: 18px; height: 18px; color: var(--fg-dim); flex-shrink: 0; }
  .more-sheet-item.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
  .more-sheet-item.active .ico { color: var(--accent); }
  .more-sheet-logout { padding: 0; background: transparent; border: 0; }
  .more-sheet-logout .btn-reset {
    width: 100%; padding: 14px 12px; min-height: 48px;
    background: var(--bg-3); border: 1px solid var(--line);
    color: var(--fg); font-family: inherit; font-size: 14px;
    text-align: left; cursor: pointer;
  }
  .more-sheet-cancel {
    margin-top: 10px; padding: 14px 12px; min-height: 48px; border-radius: 8px;
    background: transparent; border: 1px solid var(--line-strong);
    color: var(--fg-dim); font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
    cursor: pointer;
  }

  /* Page chrome */
  .page { padding: 18px 14px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .page-head {
    flex-direction: column; align-items: flex-start; gap: 12px;
    margin-bottom: 18px;
  }
  .page-head h2 { font-size: 30px; }
  .page-head .sub {
    text-align: left; max-width: none; font-size: 12.5px; line-height: 1.55;
  }

  /* Mono / display sizing tweaks */
  .mono-lbl { font-size: 9px; }

  /* Filters / chips — horizontal scroll */
  .filters {
    overflow-x: auto; flex-wrap: nowrap;
    margin-left: -14px; margin-right: -14px;
    padding-left: 14px; padding-right: 14px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { white-space: nowrap; flex-shrink: 0; font-size: 10.5px; padding: 10px 14px 12px; }
  .filters .spacer { display: none; }

  /* Buttons — bigger touch targets */
  .btn {
    min-height: 44px; padding: 10px 16px; font-size: 13px;
    justify-content: center;
  }

  /* Inputs — 16px to prevent iOS zoom */
  .settings-form input[type="text"],
  .settings-form input[type="email"],
  .settings-form input[type="number"],
  .settings-form input:not([type]),
  .settings-form textarea,
  .form-stack select,
  .auth-card .field input {
    font-size: 16px;
  }

  /* ─── Dashboard ──────────────────────────────────────── */
  .stat-strip {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 22px;
  }
  .stat-cell { padding: 16px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stat-cell:nth-child(2n) { border-right: 0; }
  .stat-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .stat-cell .v { font-size: 28px; margin-top: 8px; }
  .stat-cell .v .unit { font-size: 10px; }
  .stat-cell .k { font-size: 8.5px; letter-spacing: 0.22em; }
  .stat-cell .delta { margin-top: 8px; font-size: 9.5px; }

  .dash-body { grid-template-columns: 1fr; gap: 18px; }
  .card { padding: 18px 16px; margin-bottom: 18px; }
  .card-h { font-size: 10.5px; margin-bottom: 12px; }

  /* Chart */
  .chart { grid-template-columns: repeat(8, 1fr); gap: 6px; height: 180px; }
  .chart .bar .val { font-size: 9px; }
  .chart .bar .track { height: 130px; }
  .chart .bar .lbl { font-size: 8px; letter-spacing: 0.12em; }

  /* Projects table — collapse rows to cards */
  .projects-table, .projects-table tbody, .projects-table tr, .projects-table td { display: block; }
  .projects-table tr {
    padding: 12px 0; border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 12px;
  }
  .projects-table td { padding: 0; border: 0; }
  .projects-table td.num { grid-column: 1; font-size: 10px; }
  .projects-table td:nth-child(2) { grid-column: 1; }
  .projects-table td.stage { grid-column: 1; padding-top: 6px; }
  .projects-table td.due { grid-column: 2; grid-row: 1; text-align: right; }
  .projects-table td.val { grid-column: 2; grid-row: 3; text-align: right; align-self: end; }

  /* Activity */
  .activity li { grid-template-columns: 84px 1fr; padding: 10px 0; gap: 8px; }
  .activity .when {
    font-size: 9px; letter-spacing: 0.06em;
    word-break: break-word; line-height: 1.3;
  }
  .activity .what { font-size: 12px; line-height: 1.45; }

  /* ─── Inbox ─────────────────────────────────────────── */
  .inbox-grid {
    grid-template-columns: minmax(0, 1fr);
    border: 0; background: transparent;
    margin-left: -14px; margin-right: -14px;
    min-height: 0;
  }
  .inbox-list, .inbox-detail { min-width: 0; }
  .inbox-list {
    max-height: none; overflow: visible;
    border-right: 0; border-top: 1px solid var(--line);
  }
  .inquiry-row .row-link { padding: 14px 18px 14px 22px; word-break: break-word; }
  .inquiry-row .top { font-size: 9px; letter-spacing: 0.10em; flex-wrap: wrap; gap: 6px; }
  .inquiry-row .top .from { word-break: break-all; }
  .inquiry-row .subject { font-size: 12.5px; line-height: 1.4; word-break: break-word; }
  .inquiry-row .meta { font-size: 8.5px; flex-wrap: wrap; }
  .inbox-detail { padding: 0; }
  /* Redesigned inbox (.ib-*): preserve the master→detail pushed-screen contract.
     When no inquiry is selected, hide the auto-rendered detail; when one is, hide
     the list + chrome so the detail becomes a full pushed screen. */
  .ib-grid:not(.has-detail) .ib-detail { display: none; }
  .ib-grid.has-detail .ib-list { display: none; }
  body:has(.ib-grid.has-detail) .topbar,
  body:has(.ib-grid.has-detail) .ib .page-head,
  body:has(.ib-grid.has-detail) .ib-top,
  body:has(.ib-grid.has-detail) .ib-chips,
  body:has(.ib-grid.has-detail) .bottom-tabs { display: none; }
  body:has(.ib-grid.has-detail) .page { padding: 0 0 env(safe-area-inset-bottom, 0px); }
  body:has(.ib-grid.has-detail) .main { padding-bottom: 0; }

  /* Inquiry detail content (pushed-screen) */
  .inq-detail { display: flex; flex-direction: column; min-height: 100vh; }
  .detail-header {
    position: sticky; top: 0; z-index: 11;
    background: rgba(12,12,13,0.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    display: flex; align-items: center; gap: 12px;
  }
  .dh-back {
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--line); background: transparent;
    color: var(--fg); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none; flex-shrink: 0;
  }
  .dh-back .ico { width: 14px; height: 14px; }
  .dh-text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
  .dh-eb { font-size: 8.5px; letter-spacing: 0.22em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dh-title {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 13px;
    color: var(--fg); letter-spacing: -0.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .inq-detail .inq-head { display: none; }
  .inq-sender-card {
    display: grid; grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px; align-items: center;
    margin: 18px 14px 16px;
    padding: 14px;
    border: 1px solid var(--line); background: var(--bg-2);
  }
  .sc-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    background: var(--bg-3); border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 14px; color: var(--accent);
  }
  .sc-text { min-width: 0; }
  .sc-name { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 13.5px; color: var(--fg); }
  .sc-org { color: var(--fg-dim); font-size: 11.5px; margin-top: 1px; }
  .sc-meta { grid-column: 1 / -1; min-width: 0; padding-top: 4px; border-top: 1px solid var(--line); }
  .sc-email { font-size: 9.5px; letter-spacing: 0.06em; word-break: break-all; display: block; }

  .inq-detail .body {
    padding: 0 14px 18px; margin: 0;
    color: var(--fg); font-size: 13.5px; line-height: 1.6;
  }
  .inq-detail .attachments-wrap { padding: 0 14px 18px; }
  .att-label { display: block; margin-bottom: 10px; font-size: 9.5px; letter-spacing: 0.22em; }
  .inq-detail .attachments { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
  .inq-detail .att-slot { aspect-ratio: 1; border: 1px solid var(--line-strong); }
  .inq-detail .att-slot img { filter: grayscale(0.1); }
  .inq-detail .att-slot figcaption { font-size: 7px; padding: 1px 4px; bottom: 4px; left: 5px; }

  .inq-detail .meta-grid {
    grid-template-columns: 1fr 1fr;
    margin: 0 14px 18px;
    border: 1px solid var(--line-strong);
  }
  .meta-grid > div { padding: 12px 14px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
  .meta-grid > div:nth-child(2n) { border-right: 0; }
  .meta-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .meta-grid .k { font-size: 8.5px; letter-spacing: 0.22em; }
  .meta-grid .v { font-size: 11.5px; margin-top: 5px; letter-spacing: 0.04em; }

  .responded-strip { margin: 0 14px 18px; font-size: 9.5px; letter-spacing: 0.20em; }

  .inq-detail .actions {
    position: sticky; bottom: 0; z-index: 9;
    margin: auto 0 0;
    background: rgba(12,12,13,0.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .inq-detail .actions form { margin: 0; display: contents; }
  .inq-detail .actions .btn {
    min-height: 46px; padding: 12px 14px; font-size: 12.5px;
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }
  .inq-detail .actions .act-convert { flex-basis: 100%; min-width: 0; }

  /* ─── Pipeline ──────────────────────────────────────── */
  .stage-tabs {
    display: flex; overflow-x: auto; gap: 0;
    margin: 0 -14px 14px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .stage-tabs::-webkit-scrollbar { display: none; }
  .st-chip {
    background: transparent; border: 0;
    padding: 12px 14px 14px; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--fg-dim); cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap; flex-shrink: 0;
    font-family: inherit;
  }
  .st-chip.active { color: var(--fg); border-bottom-color: var(--accent); }
  .st-chip .st-dot { width: 6px; height: 6px; background: var(--fg-dim); flex-shrink: 0; }
  .st-chip .st-dot.prototype { background: var(--stage-prototype); }
  .st-chip .st-dot.offer { background: var(--stage-offer); }
  .st-chip .st-dot.cad { background: var(--accent); }
  .st-chip .st-dot.printing { background: #c89530; }
  .st-chip .st-dot.shipping { background: #6a9347; }
  .st-chip .st-dot.done { background: var(--fg-dim-2); }
  .st-chip .st-label { font-size: 10.5px; letter-spacing: 0.18em; }
  .st-chip .st-count { font-size: 9.5px; color: var(--fg-dim-2); letter-spacing: 0.10em; }
  .st-chip.active .st-count { color: var(--accent); }

  .kanban {
    grid-template-columns: 1fr; gap: 0;
  }
  .kanban .col { display: none; min-height: 0; border: 0; }
  .kanban .col.active { display: flex; }
  .kanban .col header {
    background: var(--bg-2); padding: 14px 14px;
    border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
    margin: 0 -14px 0;
  }
  .kanban .col header .label { font-size: 10.5px; }
  .kanban .col-body { padding: 14px 0; gap: 10px; }

  .kanban-card { padding: 12px; }
  .kc-body { margin: -12px; padding: 12px; }
  .kanban-card .name { font-size: 14px; line-height: 1.2; margin: 4px 0; }
  .kanban-card .customer { font-size: 11px; margin-bottom: 10px; }
  .kanban-card .row { font-size: 10px; padding: 4px 0; }
  .kanban-card .invoice-btn { margin-top: 10px; min-height: 40px; font-size: 11px; }

  /* ─── Invoices table — card-style on mobile ────────── */
  .invoices-table, .invoices-table thead, .invoices-table tbody { display: block; }
  .invoices-table thead { display: none; }
  .invoices-table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .invoices-table td { display: block; padding: 0; border: 0; font-size: 13px; }
  .invoices-table td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 11px; }
  .invoices-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 14px; }
  .invoices-table td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .invoices-table td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; font-size: 10px; }
  .invoices-table td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; align-self: end; font-size: 13px; }

  /* ─── Invoice detail ───────────────────────────────── */
  .invoice-actions { gap: 8px; }
  .invoice-actions .btn { flex: 1 1 auto; }
  .lines-table thead { display: none; }
  .lines-table, .lines-table tbody, .lines-table tr, .lines-table td { display: block; }
  .lines-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .lines-table td { padding: 4px 0; border: 0; }
  .lines-table td:nth-child(1) { margin-bottom: 6px; }
  .lines-table td:nth-child(2)::before { content: 'Qty · '; color: var(--fg-dim-2); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 4px; }
  .lines-table td:nth-child(3)::before { content: 'Rate · '; color: var(--fg-dim-2); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 4px; }
  .lines-table td:nth-child(4) { font-size: 16px; padding-top: 6px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
  .totals { width: auto; margin-left: 0; }
  .totals .total { font-size: 22px; }

  /* ─── Forms (settings, invoice-new, inquiry-convert) ── */
  .form-stack { max-width: none; }
  .settings-form fieldset { padding: 16px; }
  .settings-form legend { font-size: 10.5px; }
  .form-actions {
    flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px;
  }
  .form-actions .btn { width: 100%; }
  .totals-card { padding: 18px 16px; }
  .totals-card .grand .display { font-size: 24px; }
  .review-card { padding: 22px 18px; }

  /* Line items already collapse — restate to be explicit */
  .line-body {
    grid-template-columns: 1fr;
    grid-template-areas: 'title' 'desc' 'tag' 'qty' 'qty-display' 'rate' 'amount';
  }
  .line-amount { text-align: left; }
  .line-amount .mono-lbl { text-align: left; }
  .review-card dl { grid-template-columns: 1fr; gap: 4px 0; }
  .review-card dt { padding-top: 14px; }

  /* Language radio — stack at very narrow */
  .language-fieldset .lang-radio { grid-template-columns: 1fr; }

  /* Banners — fix on mobile */
  .banner { padding: 12px 14px; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
  .banner .mono { flex-shrink: 0; }

  /* ─── Auth card ────────────────────────────────────── */
  .auth-body { padding: 14px; align-items: stretch; padding-top: max(20vh, 60px); }
  .auth-card { width: 100%; max-width: 420px; margin: 0 auto; padding: 24px 22px; }
  .auth-card h1 { font-size: 24px; }
}

@media (max-width: 400px) {
  .stat-cell { padding: 14px 12px; }
  .stat-cell .v { font-size: 24px; }
  .bt-label { font-size: 8px; letter-spacing: 0.16em; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .page { padding-left: 12px; padding-right: 12px; }
  .inq-detail .actions { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .more-sheet-panel { animation: none; }
  .bt-cell, .btn, .nav-link, .more-sheet-item { transition: none; }
  /* Notes catalogue: drop the hover/selection fades incl. the crosshair brackets */
  .thread, .cat-detail, .ccomp, .cadd, .ncard, .nc-act, .cx,
  .det-title-link, .nc-edit-actions button, .nc-edit-ta { transition: none; }
}

/* Email ingestion — upload zone */
.upload-zone {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 16px;
}
.upload-drop {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  background: rgba(255,255,255,0.02);
}
.upload-drop:hover, .upload-zone.drag-over .upload-drop {
  border-color: var(--accent);
  background: rgba(250,137,39,0.06);
}
.upload-icon { font-size: 22px; line-height: 1; }
.upload-prompt { font-size: 14px; color: var(--text-secondary); }
.upload-link { color: var(--accent); text-decoration: underline; }
.upload-zone.busy .upload-drop { opacity: 0.5; pointer-events: none; }
.upload-manual-link {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-secondary);
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
}
.upload-manual-link:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.20); }

/* Upload commit modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  max-width: 520px; width: 100%;
  padding: 22px;
  max-height: 90vh; overflow: auto;
}
.modal-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-close {
  background: transparent; border: 0; color: var(--text-tertiary);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.upload-summary { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.us-row { display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: 13px; }
.us-k { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.us-v { color: var(--text-primary); word-break: break-word; }
.choice-set {
  border: 0; padding: 0; margin: 0 0 14px;
}
.choice-set legend {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-tertiary); margin-bottom: 6px; padding: 0;
}
.choice {
  display: block; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
  border: 1px solid transparent;
}
.choice:hover { background: rgba(255,255,255,0.03); }
.choice input { margin-right: 8px; }
.choice-input-wrap { padding: 4px 0 0 30px; }
.choice-input { width: 100%; padding: 6px 10px; border-radius: 6px; background: var(--bg-input, rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.08); color: var(--text-primary); font: inherit; }
textarea.choice-input { resize: vertical; min-height: 90px; line-height: 1.5; }
/* Manual-entry modal fields (label + input stack) */
.manual-hint { color: var(--fg-dim); font-size: 12px; margin: 0 0 14px; }
.manual-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.manual-field-k { font-size: 10px; letter-spacing: 0.16em; color: var(--fg-dim); text-transform: uppercase; }
.att-list { display: flex; flex-wrap: wrap; gap: 6px; }
.att-chip { font-size: 11px; padding: 4px 8px; background: rgba(255,255,255,0.04); border-radius: 6px; }
.modal-status { color: var(--text-tertiary); font-size: 12px; margin: 8px 0; min-height: 1em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Email thread view */
.thread { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 22px; }
.thread-msg {
  border-left: 2px solid rgba(255,255,255,0.06);
  padding: 10px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 0 8px 8px 0;
}
.thread-msg.dir-outbound {
  border-left-color: var(--accent);
  background: rgba(250,137,39,0.04);
}
.tm-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 12px; flex-wrap: wrap; }
.tm-dir { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-tertiary); }
.thread-msg.dir-outbound .tm-dir { background: rgba(250,137,39,0.18); color: var(--accent); }
.tm-from { color: var(--text-primary); font-weight: 500; }
.tm-date { color: var(--text-tertiary); font-size: 10px; margin-left: auto; }
.tm-body pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; margin: 0; font-size: 13px; color: var(--text-primary); }
.tm-html-toggle { margin-top: 8px; }
.tm-html-toggle summary { cursor: pointer; color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.tm-html-frame { width: 100%; height: 240px; border: 1px solid rgba(255,255,255,0.08); margin-top: 6px; background: white; }
.tm-html-note { color: var(--text-tertiary); font-size: 11px; }
.tm-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tm-att-chip {
  font-size: 11px; padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  text-decoration: none; border: 1px solid rgba(255,255,255,0.06);
}
.tm-att-chip:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }

/* Project detail page */
.ph-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 760px) { .ph-grid { grid-template-columns: 1fr; } }
.ph-rail { display: flex; flex-direction: column; gap: 14px; }
.ph-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 14px; }
.ph-card-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-tertiary); margin-bottom: 8px; }
.ph-card-body { display: flex; flex-direction: column; gap: 8px; }

.ph-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-actions form.inline { display: inline; }

/* Notes feed */
.nf-composer { background: rgba(255,255,255,0.02); padding: 10px; border-radius: 10px; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.nf-composer textarea { width: 100%; resize: vertical; background: var(--bg-input, rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; color: var(--text-primary); padding: 8px; font: inherit; }
.nf-composer-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.nf-photo-btn { font-size: 12px; color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.nf-photo-btn:hover { background: rgba(255,255,255,0.04); }

.nf-list { display: flex; flex-direction: column; gap: 10px; }
.nf-note { background: rgba(255,255,255,0.03); border-radius: 10px; padding: 10px 12px; }
.nf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.nf-time { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }
.nf-edited { color: var(--text-tertiary); }
.nf-actions { display: flex; gap: 8px; opacity: 0; transition: opacity 120ms ease; }
.nf-note:hover .nf-actions { opacity: 1; }
.nf-actions button { background: transparent; border: 0; color: var(--text-tertiary); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.nf-actions button:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nf-body { font-size: 14px; line-height: 1.5; color: var(--text-primary); word-break: break-word; }
.nf-body code { background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.nf-photos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.nf-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }

.nf-event { display: flex; gap: 8px; padding: 4px 10px; align-items: baseline; }
.nf-event-text { font-size: 12px; color: var(--text-secondary); }

/* Tasks card */
.tk-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; }
.tk-row:hover { background: rgba(255,255,255,0.03); }
.tk-row.done .tk-text { text-decoration: line-through; opacity: 0.5; }
.tk-handle { cursor: grab; color: var(--text-tertiary); font-size: 12px; user-select: none; opacity: 0; transition: opacity 120ms ease; }
.tk-row:hover .tk-handle { opacity: 1; }
.tk-text { flex: 1; cursor: text; font-size: 13px; }
.tk-del { background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: opacity 120ms ease; }
.tk-row:hover .tk-del { opacity: 1; }
.tk-edit-input { flex: 1; padding: 2px 6px; background: var(--bg-input, rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; color: var(--text-primary); font: inherit; font-size: 13px; }
.btn.ghost { background: transparent; border: 1px dashed rgba(255,255,255,0.15); width: 100%; padding: 6px; color: var(--text-secondary); border-radius: 6px; cursor: pointer; font: inherit; }

/* Materials card */
.mt-list { display: flex; flex-direction: column; gap: 4px; }
.mt-row { display: grid; grid-template-columns: 60px 1fr auto 24px; gap: 6px; align-items: baseline; font-size: 12px; padding: 4px 0; }
.mt-row:hover { background: rgba(255,255,255,0.03); border-radius: 4px; }
.mt-qty { color: var(--text-secondary); }
.mt-desc { color: var(--text-primary); }
.mt-cost { text-align: right; color: var(--accent); font-weight: 500; }
.mt-del { background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: opacity 120ms ease; }
.mt-row:hover .mt-del { opacity: 1; }
.mt-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.mt-footer .row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11px; }
.mt-footer .row .k { color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; }
.mt-footer .row .v { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; }
.mt-footer .row .v.margin { color: var(--success); }
.mt-footer .row.total { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 2px; padding-top: 5px; }
.mt-footer .row.total .k, .mt-footer .row.total .v { color: var(--text-primary); font-weight: 500; }
/* Read-only linked-expenses list on the project COST card */
.mt-exp-hd { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin: 8px 0 4px; }
.mt-exp-row { display: grid; grid-template-columns: 66px 1fr auto; gap: 8px; align-items: baseline; font-size: 11.5px; padding: 3px 0; text-decoration: none; color: var(--text-secondary); border-radius: 4px; }
.mt-exp-row:hover { background: rgba(255,255,255,0.03); }
.mt-exp-d { color: var(--text-tertiary); font-size: 9.5px; }
.mt-exp-a { color: var(--text-primary); }
.mt-form { display: grid; grid-template-columns: 60px 60px 1fr 70px auto auto; gap: 4px; margin: 8px 0; }

/* ─── Files card ──────────────────────────────────────── */
.fl-list { display: flex; flex-direction: column; gap: 4px; }
.fl-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; padding: 4px 0; font-size: 12px; }
.fl-link { color: var(--text-primary); text-decoration: none; }
.fl-link:hover { color: var(--accent); }
.fl-size { color: var(--text-tertiary); font-size: 10px; }
.fl-cover, .fl-del { background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: opacity 120ms ease; }
.fl-row:hover .fl-cover, .fl-row:hover .fl-del { opacity: 1; }
.fl-cover:hover { color: var(--accent); }
.fl-drop { display: block; padding: 14px; border: 1px dashed rgba(255,255,255,0.15); border-radius: 8px; text-align: center; color: var(--text-secondary); cursor: pointer; margin-top: 8px; font-size: 11px; }
.fl-drop:hover, .fl-drop.drag-over { border-color: var(--accent); background: rgba(250,137,39,0.04); }
.mt-form input { padding: 4px 6px; background: var(--bg-input, rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; color: var(--text-primary); font: inherit; font-size: 11px; }

/* Finance page */
.fin-head { display: flex; align-items: baseline; justify-content: space-between; }
.fin-period-tabs { display: flex; gap: 4px; }
.fp-tab {
  padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.04);
  font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary);
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em;
}
.fp-tab:hover { color: var(--text-primary); }
.fp-tab.active { background: var(--accent); color: #050506; }

.fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 16px; }
.fin-kpi { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 12px 14px; }
.fin-kpi-label { display: block; font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.12em; }
.fin-kpi-val { display: block; font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; margin-top: 4px; }
.fin-kpi-val.in { color: var(--success); }
.fin-kpi-val.out { color: var(--danger); }
.fin-kpi-val.net { color: var(--accent); }

.fin-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; padding: 14px; margin-bottom: 14px; }

/* Category summary */
.cs-card {}
.cs-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cs-title { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.16em; }
.cs-total { font-size: 11px; color: var(--text-secondary); }
.cs-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; background: rgba(255,255,255,0.06); }
.cs-seg { transition: opacity 120ms ease; cursor: pointer; }
.cs-seg:hover { opacity: 0.85; }
.cs-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cs-leg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 6px;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  font: inherit;
}
.cs-leg:hover { background: rgba(255,255,255,0.04); }
.cs-leg.active { background: rgba(250,137,39,0.18); color: var(--accent); }
.cs-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cs-leg-label { font-size: 11px; color: var(--text-primary); }
.cs-leg-amount { font-size: 10px; color: var(--text-secondary); }
.cs-leg-pct { font-size: 9px; color: var(--text-tertiary); }

/* Expenses section */
.exp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.exp-add-manual { background: transparent; border: 0; color: var(--accent); font-size: 11px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.exp-add-manual:hover { background: rgba(250,137,39,0.08); }

.exp-drop { display: block; padding: 14px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 8px; text-align: center; cursor: pointer; margin-bottom: 12px; font-size: 12px; color: var(--text-secondary); }
.exp-drop.disabled { cursor: default; opacity: 0.6; }
.exp-drop:hover:not(.disabled), .exp-drop.drag-over { border-color: var(--accent); background: rgba(250,137,39,0.04); }
.exp-drop strong { color: var(--accent); }
.exp-drop-or { font-size: 10px; color: var(--text-tertiary); margin-top: 4px; }
#expenses-mount.busy { opacity: 0.5; pointer-events: none; }

.exp-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 10px; background: rgba(255,255,255,0.02); border-radius: 6px; }
.exp-search { flex: 1; background: var(--bg-input, rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; padding: 4px 8px; color: var(--text-primary); font: inherit; font-size: 11px; }
.exp-filter-pill { padding: 2px 8px; border-radius: 4px; background: rgba(250,137,39,0.18); color: var(--accent); font-size: 10px; font-family: 'JetBrains Mono', monospace; cursor: pointer; }
.exp-view-toggle { display: flex; gap: 2px; }
.exp-vt { padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); border: 0; cursor: pointer; }
.exp-vt.active { background: rgba(255,255,255,0.10); color: var(--text-primary); }

.exp-group { margin-bottom: 12px; }
.exp-group-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 6px 6px 0 0; }
.exp-group-name { display: flex; align-items: center; gap: 8px; }
.exp-group-dot { width: 10px; height: 10px; border-radius: 2px; }
.exp-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); }
.exp-group-count { font-size: 9px; color: var(--text-tertiary); }
.exp-group-total { font-size: 12px; color: var(--text-primary); font-weight: 600; }

.exp-table { width: 100%; border-collapse: collapse; }
.exp-table th { text-align: left; font-size: 9px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.exp-table th.r, .exp-table td.r { text-align: right; }
.exp-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 11px; vertical-align: top; }
.exp-table td.date { color: var(--text-secondary); }
.exp-table .vendor { color: var(--text-primary); font-weight: 500; }
.exp-table .desc { color: var(--text-tertiary); font-size: 10px; }
.exp-table .cat-pill { padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.06); font-size: 9px; color: var(--text-secondary); }
.exp-table .file-link { text-decoration: none; }
.exp-table .row-del { background: transparent; border: 0; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: opacity 120ms ease; }
.exp-table tr:hover .row-del { opacity: 1; }

.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.add-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-tertiary); }
.add-i { padding: 6px 8px; background: var(--bg-input, rgba(0,0,0,0.32)); border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; color: var(--text-primary); font: inherit; font-size: 12px; }

.sub-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sub-add { background: transparent; border: 0; color: var(--accent); font-size: 11px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.sub-add:hover { background: rgba(250,137,39,0.08); }

.sub-list { display: flex; flex-direction: column; }
.sub-row { display: grid; grid-template-columns: 1fr 80px 120px 80px; gap: 8px; padding: 6px 8px; align-items: center; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sub-row-head { border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 9px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; }
.sub-row-head .r { text-align: right; }
.sub-name { color: var(--text-primary); }
.sub-cycle, .sub-renewal { font-size: 10px; color: var(--text-secondary); }
.sub-cost.r { text-align: right; }

.sub-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.sub-foot-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); }
.sub-foot-val { font-size: 16px; font-weight: 600; margin-top: 2px; }
.sub-foot-val.out { color: var(--danger); }

/* ─── /projects (browse + filter list) ──────────────────────── */
.proj-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

.proj-filters { margin: 14px 0 18px; }
.proj-filter-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.proj-search-wrap { position: relative; flex: 1; min-width: 240px; }
.proj-search-wrap .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--fg-dim-2); pointer-events: none; }
.proj-search { width: 100%; padding: 10px 12px 10px 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font-size: 13px; }
.proj-search:focus { outline: none; border-color: var(--accent); }

.proj-sort-wrap { display: flex; align-items: center; gap: 8px; }
.proj-sort-label { font-size: 9.5px; color: var(--fg-dim-2); letter-spacing: 0.18em; }
.proj-sort { padding: 9px 28px 9px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.10em; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><polyline points='3,4 6,8 9,4' fill='none' stroke='%239c958a' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}

.proj-stage-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.proj-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; color: var(--fg-dim); cursor: pointer; font-size: 10.5px; letter-spacing: 0.16em; transition: background .12s, border-color .12s, color .12s; }
.proj-pill:hover { color: var(--fg); border-color: var(--line-strong); }
.proj-pill.active { background: rgba(250,137,39,0.10); border-color: var(--accent); color: var(--fg); }
.proj-pill-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-dim); flex-shrink: 0; }
.proj-pill-dot.stage-inbox  { background: var(--fg-dim); }
.proj-pill-dot.stage-offer   { background: #8BA8FF; }
.proj-pill-dot.stage-cad      { background: var(--accent); }
.proj-pill-dot.stage-printing { background: #c89530; }
.proj-pill-dot.stage-shipping { background: #6a9347; }
.proj-pill-dot.stage-done     { background: var(--fg-dim-2); }
.proj-pill.compact { padding: 3px 8px; font-size: 9.5px; cursor: default; }
.proj-pill.compact:hover { background: var(--bg-2); border-color: var(--line); }

.proj-list { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.proj-table { width: 100%; border-collapse: collapse; }
.proj-table th { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.18em; color: var(--fg-dim-2); text-transform: uppercase; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.proj-table th.r { text-align: right; }
.proj-table td { padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; vertical-align: middle; }
.proj-table td.r { text-align: right; }
.proj-table tr:last-child td { border-bottom: 0; }
.proj-row { cursor: pointer; transition: background .10s; }
.proj-row:hover { background: rgba(255,255,255,0.025); }

.proj-num    { font-size: 10.5px; color: var(--fg-dim-2); letter-spacing: 0.14em; }
.proj-name a { color: var(--fg); text-decoration: none; font-weight: 500; }
.proj-name a:hover { color: var(--accent); }
.proj-cust   { color: var(--fg-dim); }
.proj-due    { color: var(--fg-dim); font-size: 12px; }
.proj-due.due-overdue  { color: var(--danger); }
.proj-due.due-upcoming { color: var(--accent); }
.proj-due.due-none     { color: var(--fg-dim-2); }
.proj-val    { color: var(--fg); }
.proj-upd    { color: var(--fg-dim-2); font-size: 11px; }

.proj-empty { padding: 60px 20px; text-align: center; color: var(--fg-dim); }
.proj-empty p { margin: 4px 0; }
.proj-empty p.sub { color: var(--fg-dim-2); font-size: 12.5px; margin-bottom: 18px; }
.proj-empty .btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--fg-dim); text-decoration: none; }
.proj-empty .btn:hover { color: var(--fg); border-color: var(--accent); }

@media (max-width: 760px) {
  .proj-head { flex-direction: column; align-items: flex-start; }
  .proj-filter-row { flex-direction: column; align-items: stretch; }
  .proj-search-wrap { min-width: 0; }
  .proj-sort-wrap { justify-content: space-between; }
  .proj-sort { flex: 1; }

  /* Stage pills horizontal scroll on mobile */
  .proj-stage-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
  .proj-stage-pills::-webkit-scrollbar { display: none; }
  .proj-pill { flex-shrink: 0; }

  /* Table → card stack */
  .proj-list { background: transparent; border: 0; border-radius: 0; }
  .proj-table, .proj-table thead, .proj-table tbody, .proj-table tr, .proj-table td, .proj-table th { display: block; }
  .proj-table thead { display: none; }
  .proj-table tr.proj-row {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 10px;
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto;
    column-gap: 10px; row-gap: 4px;
  }
  .proj-table tr.proj-row td { padding: 0; border: 0; }
  .proj-table tr.proj-row td.r { text-align: left; }
  .proj-num   { grid-column: 1; grid-row: 1; }
  .proj-upd   { grid-column: 2; grid-row: 1; text-align: right; }
  .proj-name  { grid-column: 1 / span 2; grid-row: 2; }
  .proj-name a { font-size: 14px; }
  .proj-cust  { grid-column: 1 / span 2; grid-row: 3; font-size: 12px; }
  .proj-stage { grid-column: 1; grid-row: 4; }
  .proj-due   { grid-column: 2; grid-row: 4; text-align: right; }
  .proj-val   { grid-column: 1 / span 2; grid-row: 5; text-align: right; font-size: 14px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; }
}

/* ── Delete: danger button, danger zone, confirm modal (2026-05-30) ────────── */
.btn.danger {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
}
.btn.danger:hover {
  background: var(--danger);
  color: #0c0c0d;
}

.danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 107, 107, .35);
  border-radius: 10px;
  background: rgba(255, 107, 107, .05);
}
.danger-zone .dz-text { display: flex; flex-direction: column; gap: 3px; }
.danger-zone .dz-title { font-size: 10px; letter-spacing: .16em; color: var(--danger); }
.danger-zone .dz-desc { font-size: 13px; color: var(--text-tertiary); }

.del-card { max-width: 440px; }
.del-lead { font-size: 13px; line-height: 1.5; color: #c9c7c0; margin: 4px 0 12px; }
.del-danger {
  font-size: 12px;
  line-height: 1.45;
  color: var(--danger);
  background: rgba(255, 107, 107, .08);
  border: 1px solid rgba(255, 107, 107, .35);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.del-pw-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-tertiary); }
.del-err { color: var(--danger); font-size: 12px; margin-top: 8px; }

/* ── Finance: chart-type toggle + donut (2026-05-30) ───────────────────────── */
.cs-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-chart-toggle { display: inline-flex; gap: 2px; }
.cs-ct {
  font-family: inherit; font-size: 10px; letter-spacing: .12em;
  padding: 3px 9px; border: 1px solid rgba(255,255,255,.14);
  background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: 5px;
}
.cs-ct.active { color: #0c0c0d; background: var(--accent); border-color: var(--accent); }

.cs-donut { position: relative; width: 184px; height: 184px; margin: 10px auto 6px; }
.cs-donut-svg { display: block; width: 100%; height: 100%; }
.cs-donut-svg circle { transition: stroke-width .15s ease; }
.cs-donut-center {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cs-donut-amt { font-size: 19px; font-weight: 700; }
.cs-donut-lbl { font-size: 9px; letter-spacing: .16em; color: var(--text-tertiary); margin-top: 2px; }

/* ── Notes page (2026-05-30) ───────────────────────────────────────────────── */
/* ── Notes — "Catalogue": master thread index + detail spec pane ─────────────
   A redesign of the Notes tab (Direction B handoff): a bordered two-pane box —
   thread list on the left (General + every project with notes), a reference
   "spec sheet" on the right with a pinned composer and a stack of note cards. */
.cat { display: grid; grid-template-columns: 312px 1fr;
  border: 1px solid var(--line); min-height: 560px; }

/* master list */
.cat-list { border-right: 1px solid var(--line); display: flex; flex-direction: column;
  background: var(--bg); min-width: 0; }
.cat-list-top { display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--line); }
.cat-list-top .t { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); }
.cat-new { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent);
  background: transparent; padding: 5px 10px; transition: background .18s, color .18s; }
.cat-new:hover { background: var(--accent); color: #0c0c0d; }
.cat-new svg { width: 12px; height: 12px; }
.notes-search { margin: 10px 14px; padding: 8px 10px; width: calc(100% - 28px);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg); font: inherit; font-size: 13px; }
.notes-search::placeholder { color: var(--fg-dim); }
.notes-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.threads { overflow-y: auto; flex: 1; }

.thread { display: block; width: 100%; text-align: left; text-decoration: none;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent; position: relative; cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.thread:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.thread.on { background: color-mix(in srgb, var(--accent) 10%, transparent); border-left-color: var(--accent); }
.thread:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.thread .row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.thread .code { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); }
.thread.on .code { color: var(--accent); }
.thread .cnt { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--fg-dim);
  border: 1px solid var(--line); min-width: 20px; text-align: center; padding: 1px 5px; }
.thread.on .cnt { border-color: var(--accent); color: var(--accent); }
.thread .name { font-size: 14px; color: var(--fg); line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thread .sub { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em; color: var(--fg-dim); opacity: .85; }
.thread .st { color: var(--accent); }
.thread .dot { opacity: .6; }

/* detail / spec pane */
.cat-detail-wrap { display: flex; flex-direction: column; min-width: 0; }
.cat-detail { display: none; flex-direction: column; min-width: 0; background: var(--bg-2); }
.cat-detail.on { display: flex; flex: 1; }
.det-head { padding: 24px 28px; border-bottom: 1px solid var(--line); position: relative; }
.det-head .vtag { position: absolute; top: 16px; right: 20px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
.det-head .eb { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: block; }
.det-head h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em; line-height: 1.04; color: var(--fg); max-width: 24ch; margin: 0; }
.det-title-link { color: inherit; text-decoration: none; transition: color .15s; }
.det-title-link:hover { color: var(--accent); }
.det-meta { display: flex; flex-wrap: wrap; margin-top: 20px; border-top: 1px solid var(--line); }
.det-meta .m { padding: 12px 22px 4px 0; margin-right: 22px; border-right: 1px solid var(--line); }
.det-meta .m:last-child { border-right: 0; margin-right: 0; }
.det-meta .k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: 5px; }
.det-meta .v { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--fg); }
.det-meta .v.acc { color: var(--accent); }

/* composer */
.ccomp { margin: 20px 28px 8px; border: 1px solid var(--line); background: var(--bg); transition: border-color .2s; }
.ccomp:focus-within { border-color: var(--accent); }
.ccomp textarea { width: 100%; min-height: 70px; resize: vertical; background: none; border: 0;
  outline: none; color: var(--fg); font-family: inherit; font-size: 15px; line-height: 1.6; padding: 14px 16px; }
.ccomp textarea::placeholder { color: var(--fg-dim); opacity: .6; }
.ccomp-foot { display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 10px; border-top: 1px solid var(--line); }
.ccomp .attach { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  color: var(--fg-dim); transition: color .15s; }
.ccomp .attach svg { width: 14px; height: 14px; }
.ccomp .attach:hover { color: var(--accent); }
.ccomp .attach-count { color: var(--accent); letter-spacing: 0.04em; }
.cadd { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--accent);
  color: #0c0c0d; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 9px 16px; border: 1.5px solid var(--accent);
  transition: background .2s, color .2s; }
.cadd:hover { background: transparent; color: var(--accent); }
.cadd:disabled { opacity: .5; cursor: default; }

/* notes stack */
.det-notes { flex: 1; overflow-y: auto; padding: 8px 28px 28px; }
.dn-sec { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-dim); padding: 18px 0 12px; }
.dn-empty { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  color: var(--fg-dim); padding: 14px 0; }
.ncard { position: relative; border: 1px solid var(--line); background: var(--bg);
  padding: 15px 18px; margin-bottom: 12px; transition: border-color .2s; }
.ncard:hover { border-color: var(--accent); }
.ncard:hover .cx { opacity: 1; }
.ncard.pin { border-left: 2px solid var(--accent); }
.nc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.nc-top .stamp { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--fg-dim); }
.nc-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.nc-act { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-dim); background: transparent; border: 0; cursor: pointer;
  padding: 4px 6px; display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }
.nc-act:hover { color: var(--fg); }
.nc-act svg { width: 12px; height: 12px; }
.nc-pin .nc-pin-txt { display: none; }
.nc-pin:hover { color: var(--accent); }
.nc-pin.on { color: var(--accent); }
.nc-pin.on .nc-pin-txt { display: inline; }
.nc-del:hover { color: var(--danger); }
.nc-body { font-size: 15px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.nc-photos { margin-top: 12px; }

/* inline note editor (replaces a prompt) */
.nc-edit-box { margin-top: 4px; }
.nc-edit-ta { width: 100%; min-height: 64px; resize: vertical; background: var(--bg-2);
  border: 1px solid var(--accent); outline: none; color: var(--fg); font-family: inherit;
  font-size: 15px; line-height: 1.6; padding: 10px 12px; }
.nc-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.nc-edit-actions button { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; padding: 7px 14px; border: 1px solid var(--line);
  background: transparent; color: var(--fg-dim); transition: background .15s, color .15s, border-color .15s; }
.nc-edit-save { border-color: var(--accent); color: var(--accent); }
.nc-edit-save:hover { background: var(--accent); color: #0c0c0d; }
.nc-edit-cancel:hover { color: var(--fg); border-color: var(--fg-dim); }

/* crosshair corner bracket (fades in on note-card hover) */
.cx { position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.cx::before, .cx::after { content: ''; position: absolute; background: var(--accent); }
.cx::before { width: 100%; height: 2px; }
.cx::after { height: 100%; width: 2px; }
.cx.tl { top: -1px; left: -1px; } .cx.tl::before { top: 0; left: 0; } .cx.tl::after { top: 0; left: 0; }
.cx.br { bottom: -1px; right: -1px; } .cx.br::before { bottom: 0; right: 0; } .cx.br::after { bottom: 0; right: 0; }

@media (max-width: 880px) {
  .cat { grid-template-columns: 1fr; }
  .cat-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .threads { max-height: 40vh; }
}

/* ── Users management (admin-only) + role badges + 403 page ─────────────────── */
.btn-back, .settings-users-link { display: inline-flex; margin-bottom: 18px; }
.users-card { border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 18px; }
.users-card-head { padding: 13px 18px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-dim); }

.user-add-form { padding: 18px; }
.ua-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ua-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ua-lbl { font-size: 9px; letter-spacing: 0.16em; color: var(--fg-dim); }
.user-add-form input, .user-add-form select {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 14px; padding: 9px 11px; outline: none; transition: border-color .15s; }
.user-add-form input:focus, .user-add-form select:focus { border-color: var(--accent); }
.ua-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; }
.ua-msg { color: var(--danger); font-size: 11px; letter-spacing: 0.04em; }

.users-table { width: 100%; border-collapse: collapse; }
.users-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-dim); font-weight: 500; }
.users-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg); vertical-align: middle; }
.users-table tr.u-inactive td { opacity: .5; }
.ut-user { display: flex; align-items: center; gap: 10px; }
.ut-avatar { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #0c0c0d;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 11px; }
.ut-you { font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); padding: 1px 5px; margin-left: 4px; }
.ut-email { color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
.ut-role { background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 12px; padding: 5px 8px; outline: none; }
.ut-role:focus { border-color: var(--accent); }
.ut-login { font-size: 11px; color: var(--fg-dim); }
.ut-actions-h { text-align: right; }
.ut-actions { text-align: right; white-space: nowrap; }
.ut-btn { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-dim); background: transparent; border: 1px solid var(--line);
  cursor: pointer; padding: 6px 10px; margin-left: 6px; transition: all .15s; }
.ut-btn:hover { color: var(--fg); border-color: var(--fg-dim); }
.ut-toggle:hover { color: var(--accent); border-color: var(--accent); }

.role-badge { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 6px; }
.role-badge.st-on { color: var(--accent); border-color: var(--accent); }
.role-badge.st-off { color: var(--fg-dim-2); }

.forbidden-card { position: relative; border: 1px solid var(--line); background: var(--bg-2);
  padding: 40px 32px; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.forbidden-card .fb-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: var(--accent); }
.forbidden-card .fb-msg { color: var(--fg-dim); font-size: 14px; line-height: 1.6; }
.forbidden-card .btn { margin-top: 8px; }

@media (max-width: 760px) {
  .ua-grid { grid-template-columns: 1fr; }
  .user-add-form input, .user-add-form select, .ut-role { font-size: 16px; }
  .users-table thead { display: none; }
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; }
  .users-table tr { border: 1px solid var(--line); margin-bottom: 10px; padding: 6px 10px; }
  .users-table td { border: 0; padding: 6px 4px; }
  .ut-actions, .ut-actions-h { text-align: left; }
  .ut-btn { margin: 4px 6px 0 0; min-height: 40px; }
}

/* ── Printers / Farm ───────────────────────────────────────────────────────── */
.printer-add { margin-bottom: 18px; }
.printer-add > summary { display: inline-flex; cursor: pointer; list-style: none; }
.printer-add > summary::-webkit-details-marker { display: none; }
.printer-add-form { border: 1px solid var(--line); background: var(--bg-2); padding: 16px; margin-top: 10px; }
.pa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pa-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pa-lbl { font-size: 9px; letter-spacing: 0.16em; color: var(--fg-dim); }
.printer-add-form input, .printer-add-form select, .pd-edit-form input, .pd-edit-form select {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg); font: inherit; font-size: 14px; padding: 9px 11px; outline: none; transition: border-color .15s; }
.printer-add-form input:focus, .pd-edit-form input:focus, .printer-add-form select:focus, .pd-edit-form select:focus { border-color: var(--accent); }
.pa-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 14px; }

.farm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.printer-card { display: flex; gap: 14px; border: 1px solid var(--line); background: var(--bg-2);
  padding: 14px; text-decoration: none; color: var(--fg); transition: border-color .15s; min-width: 0; }
.printer-card:hover { border-color: var(--accent); }
.printer-card.pc-dim { opacity: .55; }
.pc-photo { width: 64px; height: 64px; flex-shrink: 0; border: 1px solid var(--line); background: var(--bg);
  display: grid; place-items: center; overflow: hidden; }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-noimg { color: var(--fg-dim-2); } .pc-noimg svg { width: 26px; height: 26px; }
.pc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-name { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; margin: 0; color: var(--fg); }
.pc-model { font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.pc-nozzle { font-size: 10px; letter-spacing: 0.04em; color: var(--fg-dim); }
.pc-life { font-size: 10px; color: var(--fg-dim); white-space: nowrap; }

/* Printer state palette — amber = attention / upcoming, rust = problem.
   --p-rust is a readable lift of --accent-deep (#964737); kept deliberately
   separate from the destructive-action red (.btn.danger / .btn-mini.del:hover)
   so "needs attention" never reads as "delete". Worst states are filled (loudest),
   attention states are outlined, healthy/idle states are dim. */
:root { --p-rust: #c2603c; --p-rust-ink: #0c0c0d; }

.printer-status { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line); color: var(--fg-dim); white-space: nowrap; }
/* De-greened (Farm redesign B): "amber on / nothing off" — active is the
   unremarkable in-service default (plain), only down/retired stand out. */
.printer-status.ps-active { color: var(--fg-dim); border-color: var(--line); }
.printer-status.ps-down { color: var(--p-rust-ink); background: var(--p-rust); border-color: var(--p-rust); }
.printer-status.ps-retired { color: var(--fg-dim-2); }

.due-badge { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line); color: var(--fg-dim); white-space: nowrap; }
.due-badge.overdue { color: var(--p-rust-ink); background: var(--p-rust); border-color: var(--p-rust); }
.due-badge.due { color: var(--accent); border-color: var(--accent); }
.due-badge.err { color: var(--p-rust); border-color: color-mix(in srgb, var(--p-rust) 55%, var(--line)); }
.farm-empty { color: var(--fg-dim-2); padding: 24px 0; }

/* ── Companion 3a: service procedures (guided runs) + device tokens ── */
.pd-procs { list-style: none; margin: 0 0 10px; padding: 0; }
.proc-row { border-bottom: 1px solid var(--line); }
.proc-row:last-child { border-bottom: 0; }
.proc-sum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; cursor: pointer; list-style: none; }
.proc-sum::-webkit-details-marker { display: none; }
.proc-sum::before { content: '▸'; color: var(--fg-dim-2); font-size: 10px; }
details[open] > .proc-sum::before { content: '▾'; }
.proc-name { font-size: 13px; }
.proc-meta { font-size: 10px; color: var(--fg-dim); }
.proc-sum .btn-mini { margin-left: auto; }
.proc-steps { margin: 0 0 10px; padding-left: 26px; }
.proc-steps li { padding: 4px 0; }
.proc-step { display: flex; align-items: baseline; gap: 9px; font-size: 13px; cursor: pointer; }
.proc-step input:checked + span { color: var(--fg-dim-2); text-decoration: line-through; }
.proc-finish { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 0 12px 26px; }
.proc-notes { flex: 1; min-width: 160px; background: var(--bg); border: 1px solid var(--line); color: var(--fg); padding: 8px 10px; font-size: 13px; }
.pd-proc-form { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.pd-proc-form input, .pd-proc-form select, .pd-proc-form textarea {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg); padding: 8px 10px; font-size: 13px; font-family: inherit; }
.proc-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.proc-only { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); }
.settings-head-links { display: flex; gap: 8px; flex-wrap: wrap; }
.device-token-reveal { margin-top: 14px; border: 1px solid var(--accent); padding: 12px; }
.dtr-note { font-size: 11px; color: var(--fg-dim); margin: 0 0 8px; }
.dtr-token { display: block; font-size: 13px; padding: 10px; background: var(--bg); border: 1px solid var(--line);
  overflow-wrap: anywhere; user-select: all; margin-bottom: 10px; }
@media (max-width: 760px) {
  .proc-notes, .pd-proc-form input, .pd-proc-form select, .pd-proc-form textarea { font-size: 16px; } /* iOS zoom guard */
}

/* ── Tracking: the operational "now" board ── */
.trk-section { border: 1px solid var(--line); background: var(--bg-2); padding: 16px; margin-bottom: 14px; }
.trk-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.trk-count { border: 1px solid var(--line); padding: 1px 7px; font-size: 10px; color: var(--fg); }
.trk-empty { color: var(--fg-dim-2); font-size: 12px; margin: 0; }
.trk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.trk-card { border: 1px solid var(--line); background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.trk-card.trk-paused { border-color: var(--p-rust); }
.trk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trk-printer { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; }
.trk-printer:hover { color: var(--accent); }
.trk-state { font-size: 10px; color: var(--accent); }
.trk-card.trk-paused .trk-state { color: var(--p-rust); }
.trk-proj { font-size: 12px; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.trk-proj:hover { text-decoration: underline; }
.trk-file { font-size: 11px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-bar { height: 4px; background: var(--line); overflow: hidden; }
.trk-fill { height: 100%; background: var(--accent); transition: width .6s ease; }
.trk-meta { display: flex; gap: 14px; font-size: 10px; color: var(--fg-dim); }
.trk-spool { font-size: 10px; color: var(--fg-dim-2); }
.trk-list { list-style: none; margin: 0; padding: 0; }
.trk-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); }
.trk-row:last-child { border-bottom: 0; }
.trk-qstatus { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line); color: var(--fg-dim); }
.trk-qstatus.qs-sending, .trk-qstatus.qs-started { color: var(--accent); border-color: var(--accent); }
.trk-qstatus.qs-failed, .trk-qstatus.qs-none { color: var(--p-rust); border-color: color-mix(in srgb, var(--p-rust) 55%, var(--line)); }
.trk-qfile { font-size: 13px; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
a.trk-qfile:hover { color: var(--accent); }
.trk-qprinter { font-size: 11px; color: var(--fg-dim); text-decoration: none; margin-left: auto; }
.trk-qprinter:hover { color: var(--accent); }
.trk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trk-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid var(--line);
  color: var(--fg); text-decoration: none; font-size: 12px; }
.trk-chip:hover { border-color: var(--accent); }
.trk-chip.trk-offline { opacity: .55; }
.trk-chip-state { font-size: 10px; color: var(--fg-dim); }
@media (max-width: 760px) {
  .trk-qprinter { margin-left: 0; width: 100%; }
}

/* ── Farm: global maintenance card + shared parts pool ── */
.farm-card { border: 1px solid var(--line); background: var(--bg-2); padding: 16px; margin-top: 18px; }
.fc-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; }
.fc-empty { color: var(--fg-dim-2); font-size: 12px; }
.fm-task { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fm-task:last-child { border-bottom: 0; }
.fm-task.fm-off { opacity: .5; }
.fm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-name { font-size: 13px; }
.fm-int { font-size: 10px; color: var(--fg-dim); }
.fm-admin { margin-left: auto; display: flex; gap: 6px; }
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 9px; text-decoration: none;
  border: 1px solid var(--line); color: var(--fg-dim); }
.fm-chip .fmc-name { font-size: 11px; color: var(--fg); }
.fm-chip .fmc-h { font-size: 10px; }
.fm-chip.fmc-due { border-color: var(--accent); }
.fm-chip.fmc-due .fmc-h { color: var(--accent); }
.fm-chip.fmc-overdue { border-color: var(--p-rust); background: color-mix(in srgb, var(--p-rust) 16%, transparent); }
.fm-chip.fmc-overdue .fmc-h { color: var(--p-rust); }
.fm-bulk { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fm-bulk-tasks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.fm-cb { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); }
.fm-bulk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fm-bulk-row input { background: var(--bg); border: 1px solid var(--line); color: var(--fg); padding: 8px 10px; font-size: 13px; }
.fm-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fm-add input, .fm-add select { background: var(--bg); border: 1px solid var(--line); color: var(--fg); padding: 8px 10px; font-size: 13px; }
.fm-add input[name="name"], .fm-add input[name="spec"] { flex: 1; min-width: 180px; }
.fp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fp-row:last-child { border-bottom: 0; }
/* Farm parts-pool summary bar (the inline pool list moved to its own page). */
.fp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fp-bar .fc-head { margin: 0; }
.fp-sub { margin: 5px 0 0; font-size: 11px; color: var(--fg-dim); letter-spacing: .04em; }
.fp-low { color: var(--accent); }
.fp-kind { font-size: 10px; color: var(--fg-dim-2); text-transform: uppercase; letter-spacing: .08em; min-width: 80px; }
.fp-spec { font-size: 13px; }
.fp-fits { font-size: 9px; color: var(--fg-dim); border: 1px solid var(--line); padding: 1px 5px; }
.fp-counts { font-size: 11px; color: var(--fg-dim); margin-left: auto; }
.fp-installed { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-on { font-size: 11px; color: var(--accent); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); padding: 2px 7px; }
.fp-on:hover { border-color: var(--accent); }
@media (max-width: 760px) {
  .fm-admin { margin-left: 0; width: 100%; }
  .fp-counts { margin-left: 0; }
  .fm-bulk-row input, .fm-add input, .fm-add select { font-size: 16px; } /* iOS zoom guard */
}

/* ── Tabbed dense pages (R3+ redesign): tab strip + panels ── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; margin: 20px 0 18px; -webkit-overflow-scrolling: touch; }
.tab { flex: 0 0 auto; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
  padding: 12px 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tab:hover { color: var(--fg); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.tab .ct { font-family: var(--font-mono); font-size: 10px; background: var(--bg-3); color: var(--fg-dim); padding: 1px 7px; border-radius: 999px; }
.tab.on .ct { color: var(--accent); }
.tab .ct.alert { color: var(--danger); }
.tab .ct.warn { color: var(--warn); }
.tabpanel[hidden] { display: none; }
/* Sticky save bar (Settings R4) */
.settings-save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px;
  padding: 14px 0; margin-top: 10px; background: linear-gradient(transparent, var(--bg) 35%); }
@media (max-width: 760px) { .settings-save-bar { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); } }

/* Billing doc-trail cards (mobile) + real empty state (R8) */
.doc-list { margin-top: 4px; }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); text-decoration: none; color: inherit; }
.doc-row + .doc-row { margin-top: 8px; }
.doc-row .dt { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.doc-row .doc-cust { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .doc-total { font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.doc-type { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line-strong); color: var(--fg-dim); align-self: flex-start; }
.doc-type.invoice { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 56px 24px; border: 1px dashed var(--line-strong); border-radius: 14px; }
.empty-state .ico { width: 40px; height: 40px; color: var(--fg-dim-2); }
.empty-state .es-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: var(--fg); margin: 0 0 4px; }
.empty-state .es-sub { color: var(--fg-dim); font-size: 13px; margin: 0; }

/* Identity header (printer detail) */
.pd-id { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pd-id .pd-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pd-id h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.pd-id .pd-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; color: var(--fg-dim); margin-top: 10px; }
.pd-id .pd-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
/* The global .btn-back rule adds margin-bottom for standalone back-links; in this
   centered header row that stray margin shifts the ← Farm button up. Neutralize it. */
.pd-id .pd-actions .btn-back { margin-bottom: 0; }
.pd-status { display: inline-flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.pd-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim-2); }
.pd-status.active { color: var(--fg-dim); } .pd-status.active .dot { background: var(--fg-dim); }
.pd-status.down { color: var(--danger); } .pd-status.down .dot { background: var(--danger); }
@media (max-width: 760px) {
  .pd-id { flex-direction: column; gap: 14px; }
  .pd-id h2 { font-size: 26px; }
  .pd-id .pd-actions { width: 100%; }
  .pd-id .pd-actions .btn { flex: 1; justify-content: center; }
  .tab { padding: 12px 14px; }
}

/* printer detail */
.pd-card { border: 1px solid var(--line); background: var(--bg-2); margin-bottom: 16px; }
.pd-head { padding: 13px 18px; border-bottom: 1px solid var(--line); font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim);
  display: flex; align-items: center; gap: 8px; }
.pd-count { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em;
  color: var(--fg-dim-2); border: 1px solid var(--line); padding: 1px 6px; }
.pd-overview { display: flex; gap: 18px; padding: 18px; flex-wrap: wrap; }
.pd-photo { width: 120px; flex-shrink: 0; }
.pd-photo img { width: 120px; height: 120px; object-fit: cover; border: 1px solid var(--line); }
.pd-photo .pc-noimg { width: 120px; height: 120px; border: 1px solid var(--line); display: grid; place-items: center; }
.pd-photo-form { margin-top: 8px; }
.pd-photo-btn { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--fg-dim); cursor: pointer; border: 1px solid var(--line); padding: 5px 8px; display: inline-block; }
.pd-photo-btn:hover { color: var(--accent); border-color: var(--accent); }
.pd-specs { flex: 1; min-width: 200px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 0; }
.pd-specs dt { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 3px; }
.pd-specs dd { margin: 0; font-size: 14px; color: var(--fg); overflow-wrap: anywhere; }
.pd-editbox { padding: 0 18px 18px; } .pd-editbox > summary { cursor: pointer; font-size: 10px; letter-spacing: 0.16em; color: var(--fg-dim); }
.pd-edit-form { margin-top: 12px; }

.pd-sched, .pd-log, .pd-parts, .pd-errors, .pd-notes { list-style: none; margin: 0; padding: 0; }
.pd-card section, .pd-card .pd-inline-form { }
.sched-row, .log-row, .part-row, .err-row, .pn-row { display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.sched-row { border-left: 2px solid transparent; }
.sched-row.sr-overdue { border-left-color: var(--p-rust); }
.sched-row.sr-due { border-left-color: var(--accent); }
.sr-name { flex: 1; } .sr-int, .sr-due { font-size: 10px; color: var(--fg-dim); }
.sched-row.sr-overdue .sr-due { color: var(--p-rust); }
.sched-row.sr-due .sr-due { color: var(--accent); }
.sr-actions, .er-actions { display: inline-flex; gap: 8px; }
.btn-mini { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim); background: transparent; border: 1px solid var(--line); cursor: pointer; padding: 5px 9px; transition: all .15s; border-radius: 6px; }
.btn-mini:hover { color: var(--fg); border-color: var(--fg-dim); }
.btn-mini.del:hover { color: var(--danger); border-color: var(--danger); }
.lr-date, .pr-type, .er-cat, .er-date, .pn-date { color: var(--fg-dim); font-size: 11px; flex-shrink: 0; }
.lr-task, .er-desc, .pn-body, .pr-spec { flex: 1; overflow-wrap: anywhere; }
.pr-since { font-size: 10px; color: var(--fg-dim-2); }
.err-row.resolved { opacity: .55; } .er-res { color: var(--fg-dim); font-style: italic; }
.er-sev { flex-shrink: 0; }
.er-sev.sev-major { color: var(--p-rust-ink); background: var(--p-rust); padding: 1px 6px; }
.er-sev.sev-minor { color: var(--fg-dim); }
.pd-subhead { padding: 14px 18px 6px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim-2); }
.pd-empty { padding: 12px 18px; color: var(--fg-dim-2); font-size: 12px; }
.pd-inline-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.pd-inline-form input, .pd-inline-form select { flex: 1; min-width: 120px; background: var(--bg); border: 1px solid var(--line);
  color: var(--fg); font: inherit; font-size: 14px; padding: 8px 10px; outline: none; }
.pd-inline-form input:focus, .pd-inline-form select:focus { border-color: var(--accent); }
.pd-history { padding: 0 18px 14px; } .pd-history > summary { cursor: pointer; font-size: 10px; letter-spacing: 0.14em; color: var(--fg-dim); padding: 10px 0; }

/* At-a-glance KPI strip — the printer's worst state floats to the top.
   Hairline-gridded stat cells (square, on-system); values tint by state. */
.pd-kpis, .pd-usage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pd-kpis { margin-bottom: 16px; }
.pd-usage-stats { border: 0; border-bottom: 1px solid var(--line); }
.pd-stat { background: var(--bg-2); padding: 13px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-stat-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-dim-2); }
.pd-stat-v { font-family: 'JetBrains Mono', monospace; font-size: 26px; line-height: 1; color: var(--fg);
  font-variant-numeric: tabular-nums; }
.pd-stat-sub { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--fg-dim-2); }
.pd-stat.is-alert .pd-stat-v { color: var(--p-rust); }
.pd-stat.is-warn .pd-stat-v { color: var(--accent); }

/* Spare-parts rows (Phase B) — were unstyled; low stock flagged on the left rail. */
.pd-spares { list-style: none; margin: 0; padding: 0; }
.spare-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 13px;
  border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.spare-row.low { border-left-color: var(--p-rust); }
.sp-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sp-sku { font-size: 10px; color: var(--fg-dim-2); }
.sp-qty { font-size: 11px; color: var(--fg-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.spare-row.low .sp-qty { color: var(--p-rust); }

/* Usage period rows (Phase B) — were unstyled. */
.usage-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 13px;
  border-bottom: 1px solid var(--line); }
.ur-period { color: var(--fg-dim); font-size: 11px; flex-shrink: 0; }
.ur-metrics { flex: 1; min-width: 0; color: var(--fg-dim); font-size: 11px; overflow-wrap: anywhere; }

/* Dashboard "Maintenance due" card (Phase B) — were unstyled; rows share the
   farm state palette (rust = overdue, amber = due soon). */
.maint-due-card .card-h { display: flex; align-items: center; gap: 8px; }
.maint-due-list { list-style: none; margin: 8px 0 0; padding: 0; }
.md-row { display: flex; align-items: center; gap: 12px; padding: 9px 0 9px 10px;
  border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.md-row:last-child { border-bottom: 0; }
.md-row.md-overdue { border-left-color: var(--p-rust); }
.md-row.md-due { border-left-color: var(--accent); }
.md-printer { font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: var(--fg); text-decoration: none; flex-shrink: 0; }
.md-printer:hover { color: var(--accent); }
.md-task { flex: 1; min-width: 0; color: var(--fg-dim); font-size: 12px; overflow-wrap: anywhere; }
.md-when { font-size: 10px; flex-shrink: 0; color: var(--fg-dim); }
.md-row.md-overdue .md-when { color: var(--p-rust); }
.md-row.md-due .md-when { color: var(--accent); }

/* Print-a-file panel (job submission) — inline form + recent-prints log. */
.pd-print-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.job-row { display: flex; gap: 8px; align-items: baseline; }
.jr-status.js-failed { color: var(--p-rust); }
.jr-status.js-started { color: var(--fg); }
.jr-err { color: var(--p-rust); }

@media (max-width: 760px) {
  .pa-grid { grid-template-columns: 1fr; }
  .pd-specs { grid-template-columns: 1fr; }
  .printer-add-form input, .printer-add-form select, .pd-edit-form input, .pd-edit-form select,
  .pd-inline-form input, .pd-inline-form select { font-size: 16px; }
  .btn-mini { min-height: 36px; }
  .pd-stat-v { font-size: 22px; }

  /* Errors / Usage / Notes / history rows pack a long free-text column
     (.er-desc, .ur-metrics, .pn-body, .lr-task) into a tiny flex remainder on
     phones, wrapping it to 10+ unreadable lines. Let the small meta chips stay
     inline and give the long text — and the action buttons — their own
     full-width line so they read normally. */
  .err-row, .usage-row, .pn-row, .log-row { flex-wrap: wrap; row-gap: 4px; }
  .err-row .er-desc, .usage-row .ur-metrics, .pn-row .pn-body, .log-row .lr-task { flex: 1 1 100%; }
  .err-row .er-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* ── Attachment tiles (2026-05-30) ─────────────────────────────────────────── */
.att-list { display: flex; flex-wrap: wrap; gap: 10px; }
.att-tile {
  display: flex; flex-direction: column; gap: 6px;
  width: 140px; padding: 8px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  background: rgba(0,0,0,.18);
}
.att-tile .att-thumb img,
.att-tile .att-icon { width: 100%; height: 90px; object-fit: contain; border-radius: 4px; display: block; }
.att-tile.att-img .att-thumb img { object-fit: cover; }
.att-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-size { font-size: 10px; color: var(--text-tertiary); }
.att-actions { display: flex; gap: 10px; font-size: 11px; }
.att-actions a { color: var(--accent); text-decoration: none; }
.att-actions a:hover { text-decoration: underline; }
.nf-att { display: inline-flex; flex-direction: column; gap: 4px; width: 120px; vertical-align: top; }
.nf-att .nf-photo img, .nf-att .nf-fileicon { width: 100%; height: 80px; object-fit: contain; border-radius: 4px; }
.nf-att-name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-thumb { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 6px; }

/* ── Estimate panel (2026-05-30) ───────────────────────────────────────────── */
.est-card .ph-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.est-type { font-family: 'Inter', sans-serif; font-size: 12.5px; background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 32px 8px 13px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%239c958a' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }

.est-lines { margin-top: 4px; }
.est-line { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.est-line-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.est-label { flex: 1; min-width: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--fg); background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 6px; margin: -4px 0 -4px -6px; }
.est-label:hover { border-color: var(--line); }
.est-label:focus { outline: none; border-color: var(--accent); background: var(--bg-3); }
.est-amt { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--fg); }
.est-del { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--fg-dim); cursor: pointer; font-size: 17px; line-height: 1; }
.est-del:hover { color: oklch(0.68 0.19 26); border-color: oklch(0.68 0.19 26 / 0.5); }

.est-fields { display: flex; align-items: end; gap: 12px; padding: 16px; }
.est-f { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); }
.est-fields .est-f:first-child { flex: 1.35 1 0; }
/* R9: on mobile the print line's 6 fields cramp into one row — reflow to a roomy
   2-col grid with the first field (Material) full-width and 48px inputs. */
@media (max-width: 760px) {
  .est-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .est-fields .est-f { flex: none; }
  .est-fields .est-f:first-child { grid-column: 1 / -1; }
  .est-i { min-height: 48px; }
}
.est-i { width: 100%; box-sizing: border-box; font-family: 'JetBrains Mono', monospace; font-weight: 400;
  font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--fg); font-variant-numeric: tabular-nums;
  background: var(--bg-3); border: 1px solid #44444d; border-radius: 6px; padding: 7px 11px; }
.est-i:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(0.72 0.16 55 / 0.18); }
select.est-i { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%239c958a' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
/* "custom" chip when an estimate line's €/kg deviates from the catalog price (M4b). */
.est-flag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; vertical-align: middle;
  color: var(--warn, #e0922e); background: color-mix(in srgb, var(--warn, #e0922e) 18%, transparent); }

.est-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 0; }
.est-add-btn { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; padding: 9px 15px; min-height: 0;
  background: transparent; color: var(--fg); border: 1px solid var(--line-strong); border-radius: 8px; }
.est-add-btn:hover { color: var(--fg); border-color: var(--fg-dim-2); background: var(--bg-3); }

.est-totals { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.est-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.est-row-lbl { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #b6afa3; display: inline-flex; align-items: baseline; }
.est-row-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--fg); }
.est-row.est-withmargin .est-row-val { font-weight: 500; }
.est-margin-pct-text { font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted var(--fg-dim-2); }
.est-margin-pct-text:hover { color: var(--fg); border-bottom-color: var(--fg-dim); }
.est-margin-pct-text:focus { outline: none; color: var(--fg); border-bottom-color: var(--accent); }
.est-margin-pct-input { width: 3.4ch; font: inherit; color: var(--fg); letter-spacing: 0; text-align: center;
  background: var(--bg-3); border: 1px solid var(--accent); border-radius: 4px; padding: 0 2px; -moz-appearance: textfield; }
.est-margin-pct-input::-webkit-outer-spin-button, .est-margin-pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-margin-pct::-webkit-outer-spin-button, .est-margin-pct::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-margin-pct:hover { border-color: var(--line-strong); }
.est-margin-pct:focus { outline: none; border-color: var(--accent); background: var(--bg-3); }

/* ════════════════════════════════════════════════════════════════════════
   Finance edit + vendor merge + full mobile cleanup  (2026-05-30)
   ════════════════════════════════════════════════════════════════════════ */

/* ── New finance components (all viewports) ────────────────────────────── */
.exp-head { flex-wrap: wrap; gap: 6px; }
.exp-head-actions { display: flex; align-items: center; gap: 2px; }
.exp-vendors-btn {
  background: transparent; border: 0; color: var(--text-tertiary);
  font-size: 11px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.exp-vendors-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

/* Tappable rows (expenses + subscriptions) open the edit sheet */
.exp-row { cursor: pointer; transition: background 120ms ease; }
.exp-row:hover { background: rgba(255,255,255,0.025); }
.exp-row:active { background: rgba(255,255,255,0.05); }
.exp-proj { display: inline-block; margin-top: 3px; font-size: 9px; letter-spacing: 0.08em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; padding: 0 6px; }
.exp-table .file-link { display: inline-flex; align-items: center; justify-content: center; }
.sub-row[role="button"] { cursor: pointer; transition: background 120ms ease; border-radius: 6px; }
.sub-row[role="button"]:hover { background: rgba(255,255,255,0.03); }
.sub-row[role="button"]:active { background: rgba(255,255,255,0.05); }
.exp-row:focus-visible,
.sub-row[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Vendors manager sheet */
.vm-card { max-width: 460px; }
.vm-hint { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin: 0 0 14px; }
.vm-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; margin-bottom: 12px; }
.vm-row { display: flex; align-items: center; gap: 8px; }
.vm-input { flex: 1; min-width: 0; }
.vm-count { font-size: 11px; color: var(--text-tertiary); flex-shrink: 0; min-width: 34px; text-align: right; }
.vm-save { flex-shrink: 0; }
.vm-empty { font-size: 13px; color: var(--text-tertiary); padding: 8px 0; }

/* Touch devices: reveal controls that desktop only shows on :hover ────── */
@media (hover: none) {
  .nf-actions, .tk-handle, .tk-del, .mt-del, .fl-cover, .fl-del { opacity: 1; }
}

@media (max-width: 760px) {
  /* iOS auto-zoom: lift remaining sub-16px controls to 16px */
  .add-i, .exp-search, .vm-input,
  .proj-search, .proj-sort,
  .ccomp textarea, .nc-edit-ta,
  .est-i, .est-label, .tk-edit-input, .mt-form input { font-size: 16px; }

  /* ── Finance: KPI values shrink to fit a 1/3-width cell (no €-wrap) ── */
  .fin-kpis { gap: 8px; }
  .fin-kpi { padding: 10px 11px; }
  .fin-kpi-val { font-size: clamp(13px, 4.2vw, 22px); white-space: nowrap; }

  /* ── Finance: category summary + filter row reflow ── */
  .cs-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cs-head-right { width: 100%; justify-content: space-between; }
  .cs-total { font-size: 10.5px; }
  .exp-filter-row { flex-wrap: wrap; }
  .exp-search { flex: 1 1 60%; }
  .fp-tab, .exp-vt, .cs-ct { min-height: 36px; display: inline-flex; align-items: center; }
  .exp-add-manual, .exp-vendors-btn { min-height: 38px; }
  .exp-table .file-link { min-width: 40px; min-height: 40px; }

  /* ── Finance: expenses table → card stack (mirrors .invoices-table) ── */
  .exp-table, .exp-table tbody, .exp-table tr, .exp-table td { display: block; }
  .exp-table thead { display: none; }
  .exp-table tr.exp-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 11px 13px; margin-bottom: 8px;
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 10px; row-gap: 3px; align-items: baseline;
  }
  .exp-table tr.exp-row td { padding: 0; border: 0; }
  .exp-table td.date { grid-column: 1; grid-row: 1; font-size: 10px; }
  .exp-table td.exp-receipt-cell { grid-column: 2; grid-row: 1; text-align: right; }
  .exp-table td.exp-vendor-cell { grid-column: 1 / span 2; grid-row: 2; }
  .exp-table .vendor { font-size: 14px; }
  .exp-table td.exp-cat-cell { grid-column: 1; grid-row: 3; padding-top: 2px; }
  .exp-table td.amount {
    grid-column: 2; grid-row: 3; text-align: right;
    font-size: 15px; color: var(--text-primary);
  }
  .exp-table td.amount::before { content: '€ '; color: var(--text-tertiary); font-size: 11px; }
  .exp-table td.vat {
    grid-column: 1 / span 2; grid-row: 4; text-align: right;
    font-size: 10px; color: var(--text-tertiary);
  }
  .exp-table td.vat::before { content: 'incl. VAT € '; }

  /* ── Finance: subscriptions → card stack ── */
  .sub-row.sub-row-head { display: none; }
  .sub-row {
    grid-template-columns: 1fr auto;
    gap: 2px 10px; align-items: baseline;
    padding: 11px 13px; margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
  }
  .sub-name { grid-column: 1; grid-row: 1; font-size: 14px; }
  .sub-cost { grid-column: 2; grid-row: 1; font-size: 15px; color: var(--text-primary); }
  .sub-cost::before { content: '€ '; color: var(--text-tertiary); font-size: 11px; }
  .sub-cycle { grid-column: 1; grid-row: 2; }
  .sub-renewal { grid-column: 1 / span 2; grid-row: 3; }
  .sub-renewal::before { content: 'renews · '; color: var(--text-tertiary); }

  /* ── Finance: modal form one column ── */
  .add-grid { grid-template-columns: 1fr; }

  /* ════ Audit fixes — other pages ════ */

  /* Project-detail: add-material form no longer overflows */
  .mt-form { grid-template-columns: 1fr 1fr; }
  .mt-form .mt-i-desc, .mt-form .mt-i-cost { grid-column: 1 / span 2; }

  /* Project-detail: danger zone stacks; icon buttons get real hit areas */
  .danger-zone { flex-direction: column; align-items: stretch; }
  .danger-zone .btn.danger { width: 100%; }
  .nf-actions button, .tk-del, .mt-del, .fl-cover, .fl-del, .fl-view3d, .est-del {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Notes: catalogue collapses to one column; bigger note-action tap targets */
  .det-head { padding: 20px 18px; }
  .ccomp { margin: 16px 18px 8px; }
  .det-notes { padding: 8px 18px 24px; }
  .nc-act { min-height: 40px; padding: 8px 8px; }
  .nc-actions { gap: 8px; }
  .cadd, .ccomp .attach { min-height: 40px; }
  .nc-edit-actions button { min-height: 40px; }
  .att-list .att-tile { width: auto; flex: 1 1 calc(50% - 5px); min-width: 0; }
  .att-actions a { min-height: 36px; display: inline-flex; align-items: center; }

  /* Projects: stage filter pills meet the touch standard */
  .proj-stage-pills .proj-pill { min-height: 40px; padding: 9px 14px; }

  /* Invoice-new: line-remove hit area */
  .line-remove { width: 40px; height: 40px; }

  /* Invoices list: whole number link tappable + long values wrap */
  .invoices-table td:nth-child(1) a { display: inline-block; min-height: 40px; padding: 8px 0; }
  .invoices-table td:nth-child(1), .invoices-table td:nth-child(2) { overflow-wrap: anywhere; word-break: break-word; }

  /* Invoice-detail: label the collapsed Amount cell (matches Qty/Rate) */
  .lines-table td:nth-child(4)::before {
    content: 'Amount · '; color: var(--fg-dim-2); font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase; margin-right: 4px;
  }

  /* Invoice-send: long emails / filenames wrap instead of clipping
     (overflow-wrap:anywhere breaks only unbreakable tokens, leaving prose intact) */
  .review-card dd { overflow-wrap: anywhere; }

  /* Inbox: upload zone stacks; email thread gets a side gutter */
  .upload-zone { flex-direction: column; }
  .upload-manual-link { width: 100%; min-height: 44px; padding: 12px 16px; }
  .inq-detail .thread { margin: 12px 14px 22px; }

  /* Pipeline: invoice button matches the 44px standard */
  .kanban-card .invoice-btn { min-height: 44px; }
}

/* ─── Model viewer (3D CAD preview) ───────────────────── */
.mv-overlay { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,.72); }
.mv-panel { display: flex; flex-direction: column;
  width: min(1100px, 96vw); height: min(800px, 92vh);
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.mv-header { display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mv-name { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-action { flex: none; font-size: 12px; color: var(--accent); text-decoration: none; }
.mv-action:hover { text-decoration: underline; }
.mv-close { flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  color: var(--fg-dim); cursor: pointer; font-size: 13px; line-height: 1; }
.mv-close:hover { color: var(--fg); border-color: var(--fg-dim-2); }
.mv-canvas { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.mv-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.mv-state { position: absolute; inset: 0; z-index: 2; display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--fg-dim); background: var(--bg); }
.mv-state.mv-error { color: var(--fg); }
.mv-dims { position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--fg);
  background: rgba(12,12,13,.74); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; pointer-events: none; }
.mv-dims:empty { display: none; }
.mv-plate { margin-left: 6px; font-size: 11px; }
.mv-plate.ok { color: oklch(0.74 0.15 150); }
.mv-plate.over { color: oklch(0.68 0.19 26); }
@media (max-width: 760px) {
  .mv-overlay { padding: 0; }
  .mv-panel { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
.est-actions { display: flex; gap: 8px; margin-top: 10px; }
.fl-view3d { flex: none; padding: 4px 9px; border-radius: 7px;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  color: var(--fg-dim); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; }
.fl-view3d:hover { color: var(--accent); border-color: var(--accent); }

/* ─── Project email thread card ───────────────────────── */
.email-card { margin-bottom: 28px; }
.email-card .ph-email-thread { max-height: 460px; overflow-y: auto; margin-top: 14px; padding-right: 4px; }
.email-card .thread-msg { margin: 0 0 12px; }
.email-card .thread-msg:last-child { margin-bottom: 0; }
.ph-client-files { margin-top: 12px; }

/* ─── Coming-soon placeholder page ────────────────────── */
.ph-soon { border: 1px dashed var(--line-strong); border-radius: 12px;
  background: var(--bg-2); padding: 56px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ph-soon-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 6px 14px; }
.ph-soon-msg { color: var(--fg-dim); font-size: 14px; max-width: 420px; line-height: 1.6; }

/* ─── Stage palette (shared by Projects views) ────────── */
:root {
  --stage-inbox: #5a9bea; --stage-prototype: #d4799e; --stage-offer: #e0922e; --stage-cad: #b07cd6;
  --stage-printing: #5fb87a; --stage-shipping: #4db6c4; --stage-done: #7d7870;
}
.proj-pill-dot.stage-inbox  { background: var(--stage-inbox); }
.proj-pill-dot.stage-offer   { background: var(--stage-offer); }
.proj-pill-dot.stage-prototype { background: var(--stage-prototype); }
.proj-pill-dot.stage-cad      { background: var(--stage-cad); }
.proj-pill-dot.stage-printing { background: var(--stage-printing); }
.proj-pill-dot.stage-shipping { background: var(--stage-shipping); }
.proj-pill-dot.stage-done     { background: var(--stage-done); }

/* ─── Inline stage stepper (project page) ─────────────── */
/* The 7-stage pipeline rendered on the project page itself: click a segment to
   move the job, no trip to the board. Dots carry the stage hue; the current
   segment is raised. Forward-only graph means non-reachable segments render
   disabled; backward corrections stay clickable. */
.stage-stepper { display: flex; gap: 2px; margin: 0 0 20px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stage-stepper::-webkit-scrollbar { display: none; }
.stage-stepper.is-busy { pointer-events: none; opacity: 0.6; }
.stage-step { flex: 1 1 0; min-width: max-content; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; background: transparent; border: 1px solid transparent;
  border-radius: 9px; color: var(--fg-dim); cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s; }
.stage-step-dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-dim-2); flex-shrink: 0; }
.stage-step:hover:not(:disabled):not(.is-current) { color: var(--fg); background: var(--bg-3); }
.stage-step:disabled, .stage-step[aria-disabled="true"] { opacity: 0.32; cursor: not-allowed; }
.stage-step.is-current { color: var(--fg); background: var(--bg-3);
  border-color: var(--line-strong); cursor: default; }
.stage-step.stage-inbox  .stage-step-dot { background: var(--stage-inbox); }
.stage-step.stage-offer   .stage-step-dot { background: var(--stage-offer); }
.stage-step.stage-prototype .stage-step-dot { background: var(--stage-prototype); }
.stage-step.stage-cad      .stage-step-dot { background: var(--stage-cad); }
.stage-step.stage-printing .stage-step-dot { background: var(--stage-printing); }
.stage-step.stage-shipping .stage-step-dot { background: var(--stage-shipping); }
.stage-step.stage-done     .stage-step-dot { background: var(--stage-done); }
.stage-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─── Filament inventory ──────────────────────────────── */
.fil-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--fg-dim-2); vertical-align: middle; }
.lvl-green { background: var(--ok); }
.lvl-amber { background: var(--warn, #e0922e); }
.lvl-red   { background: var(--danger); }
.fil-lvl-label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin-left: 4px; }
.fil-sw { display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.25); vertical-align:middle; }
.invoices-table tr.fil-low { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.fil-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.fil-adjust { display: inline-flex; gap: 4px; align-items: center; }
.fil-adjust input { width: 74px; padding: 5px 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; color: var(--fg); font: inherit; font-size: 12px; }
.fil-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fil-grid label { margin: 0; }
.fil-form .form-actions { display: flex; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) { .fil-grid { grid-template-columns: 1fr; } }

/* Visual money-state badge (M5b) — paint, not a gate. */
.money-pill { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--fg-dim); background: var(--bg-3); }
.kc-body .money-pill { margin-top: 8px; }
.money-unpaid { color: var(--fg-dim-2); }
.money-proforma_sent { color: var(--stage-offer);
  border-color: color-mix(in srgb, var(--stage-offer) 45%, var(--line));
  background: color-mix(in srgb, var(--stage-offer) 12%, var(--bg-3)); }
.money-proforma_paid, .money-invoiced, .money-paid { color: var(--stage-printing);
  border-color: color-mix(in srgb, var(--stage-printing) 45%, var(--line));
  background: color-mix(in srgb, var(--stage-printing) 12%, var(--bg-3)); }

/* View toggle (Cards / Board) */
.proj-view-wrap { display: flex; align-items: center; gap: 10px; flex: none; }
.proj-view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.proj-view-btn { background: var(--bg-2); color: var(--fg-dim); border: 0; padding: 9px 15px;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; line-height: 1; }
.proj-view-btn + .proj-view-btn { border-left: 1px solid var(--line-strong); }
.proj-view-btn:hover { color: var(--fg); }
.proj-view-btn.active { background: var(--accent); color: #1a1206; }

/* ─── Projects · Cards (activity feed) ────────────────── */
.proj-cards { display: flex; flex-direction: column; gap: 10px; }
.proj-acard { position: relative; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px; padding: 16px 20px 16px 24px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease; }
.proj-acard:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.proj-acard-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fg-dim-2); }
.proj-acard.stage-inbox  .proj-acard-accent { background: var(--stage-inbox); }
.proj-acard.stage-offer   .proj-acard-accent { background: var(--stage-offer); }
.proj-acard.stage-prototype .proj-acard-accent { background: var(--stage-prototype); }
.proj-acard.stage-cad      .proj-acard-accent { background: var(--stage-cad); }
.proj-acard.stage-printing .proj-acard-accent { background: var(--stage-printing); }
.proj-acard.stage-shipping .proj-acard-accent { background: var(--stage-shipping); }
.proj-acard.stage-done     .proj-acard-accent { background: var(--stage-done); }
.proj-acard-id { font-size: 11px; letter-spacing: 0.16em; color: var(--fg-dim-2); white-space: nowrap; }
.proj-acard-main { min-width: 0; }
.proj-acard-name { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 15px;
  color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-acard-meta { font-size: 12.5px; color: var(--fg-dim); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-acard-right { display: flex; align-items: center; gap: 22px; flex: none; }
.proj-acard-val { font-size: 15px; color: var(--fg); text-align: right; }
.proj-acard-vallbl { display: block; font-size: 9px; letter-spacing: 0.18em; color: var(--fg-dim-2);
  text-transform: uppercase; margin-top: 2px; font-weight: 400; }

/* ─── Projects · Board (stage kanban) ─────────────────── */
.proj-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.proj-col { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; }
.proj-col-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); }
.proj-col-title { font-size: 11px; letter-spacing: 0.16em; color: var(--fg-dim); flex: 1; }
.proj-col-count { font-size: 11px; color: var(--fg-dim-2); }
.proj-col-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 60px; }
.proj-bcard { display: block; background: var(--bg-3); border: 1px solid var(--line);
  border-top: 2px solid var(--fg-dim-2); border-radius: 10px; padding: 12px 14px;
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.proj-bcard:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.proj-bcard.stage-inbox  { border-top-color: var(--stage-inbox); }
.proj-bcard.stage-offer   { border-top-color: var(--stage-offer); }
.proj-bcard.stage-prototype { border-top-color: var(--stage-prototype); }
.proj-bcard.stage-cad      { border-top-color: var(--stage-cad); }
.proj-bcard.stage-printing { border-top-color: var(--stage-printing); }
.proj-bcard.stage-shipping { border-top-color: var(--stage-shipping); }
.proj-bcard.stage-done     { border-top-color: var(--stage-done); }
.proj-bcard-id { font-size: 10px; letter-spacing: 0.16em; color: var(--fg-dim-2); }
.proj-bcard-name { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 13.5px;
  color: var(--fg); margin-top: 6px; line-height: 1.35; }
.proj-bcard-foot { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 12px; }
.proj-bcard-cust { font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.proj-bcard-val { font-size: 11.5px; color: var(--fg); white-space: nowrap; flex: none; }

@media (max-width: 760px) {
  .proj-acard { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; }
  .proj-acard-right { grid-column: 1 / -1; justify-content: space-between; margin-top: 8px; gap: 12px; }
  .proj-board { grid-auto-columns: 82%; }
}

/* ─── Project detail · quote-forward rail ─────────────── */
.ph-project .ph-actions { display: flex; align-items: center; gap: 12px; }
/* Inline-edit the project heading */
.ph-name { display: inline-flex; align-items: center; gap: 8px; }
.ph-name-edit { background: transparent; border: 0; color: var(--fg-dim-2); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 6px; opacity: .55; transition: opacity .12s, color .12s; }
.ph-name-edit:hover { opacity: 1; color: var(--accent); }
.ph-name-input { font: inherit; color: var(--fg); background: var(--bg-2); border: 1px solid var(--accent); border-radius: 8px; padding: 1px 8px; min-width: min(60vw, 340px); }
.ph-name-input:focus { outline: none; }
.est-margin-f { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.est-margin-f .est-i { width: 84px; }
.est-row.est-withmargin { font-weight: 500; color: var(--fg); font-size: 14px; }

.est-quote-card { background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.est-quote-card .ph-card-head { color: var(--accent); }
.est-quote-price { font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--fg); margin: 16px 0 6px; }
.est-quote-note { font-size: 12px; color: var(--fg-dim); margin-bottom: 18px; }
.est-quote-override { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
  font-size: 10px; color: var(--fg-dim-2); }
.est-quote-override .est-i { width: 100%; }
.est-quote-actions { display: flex; flex-direction: column; gap: 8px; }
.est-quote-actions .btn { width: 100%; justify-content: center; }

.activity-card .act-feed { list-style: none; margin: 14px 0 0; padding: 0; }
.act-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.act-item::before { content: ''; position: absolute; left: 4px; top: 13px; bottom: 0; width: 1px; background: var(--line); }
.act-item:last-child { padding-bottom: 0; }
.act-item:last-child::before { display: none; }
.act-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  margin-top: 3px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg-2); }
.act-body { min-width: 0; }
.act-when { font-size: 10.5px; color: var(--fg-dim-2); letter-spacing: 0.04em; }
.act-what { font-size: 13px; color: var(--fg); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.act-empty { color: var(--fg-dim); font-size: 13px; margin-top: 12px; }

/* ── Personal space (/me) ──────────────────────────────────────────────────
   Shipped unstyled (cards had chrome, but KPIs/lists/forms/toggles/grids did
   not). Bring it onto the engineering-drawing system: square corners, hairline
   dividers, mono labels, amber accent, restrained income(green)/expense(rust). */
.ps-periods { display: flex; gap: 1px; width: max-content; margin-bottom: 16px;
  background: var(--line); border: 1px solid var(--line); }
.ps-pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim); background: var(--bg-2); padding: 7px 14px;
  text-decoration: none; transition: color .15s, background .15s; }
.ps-pill:hover { color: var(--fg); }
.ps-pill.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }

.ps-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* money values are long — shrink the shared 42px stat value so it fits these cards (dashboard untouched) */
.ps-kpis .stat-cell { min-height: 0; padding: 15px 18px 17px; }
.ps-kpis .stat-cell .v { font-size: clamp(18px, 2vw, 24px); margin-top: 9px; }
.ps-finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px; margin-bottom: 16px; align-items: start; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ps-finance-grid .card, .ps-grid .card { display: flex; flex-direction: column; }

/* Cash flow bars (dynamic heights stay inline in the template) */
.ps-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; margin-top: 8px; }
.ps-bar-col { display: flex; align-items: flex-end; gap: 2px; flex: 1; height: 100%; }
.ps-bar { flex: 1; min-height: 1px; }
.ps-bar-income { background: #5fb87a; }
.ps-bar-expense { background: #e0922e; }

/* Investment guidance */
.ps-advice-body { font-size: 13px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.ps-advice-meta { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-dim-2); margin: 10px 0 12px; }
.ps-guidance .btn { align-self: flex-start; }

/* Transactions / bills / holdings lists */
.ps-tx-list, .ps-bill-list, .ps-hold-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ps-tx { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ps-tx-cat { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim); border: 1px solid var(--line); padding: 1px 6px; flex-shrink: 0; }
.ps-tx-desc { flex: 1; min-width: 0; color: var(--fg-dim); overflow-wrap: anywhere; }
.ps-tx-amt { font-family: 'JetBrains Mono', monospace; font-size: 13px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ps-tx-amt.income { color: #5fb87a; }
.ps-tx-amt.expense { color: var(--p-rust); }
.ps-tx-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.ps-tx:hover .ps-tx-actions, .ps-tx:focus-within .ps-tx-actions { opacity: 1; }
.ps-tx-edit, .ps-tx-del { background: none; border: 0; color: var(--fg-dim-2); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.ps-tx-edit:hover { color: var(--accent); }
.ps-tx-del:hover { color: var(--p-rust); }
.ps-tx-cancel { background: none; border: 1px solid var(--line-strong); color: var(--fg-dim); }
@media (hover: none) { .ps-tx-actions { opacity: 1; } }
.ps-sub-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ps-sub { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ps-sub.ended { opacity: 0.5; }
.ps-sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-sub-name { color: var(--fg); overflow-wrap: anywhere; }
.ps-sub-meta { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim-2); }
.ps-sub-amt { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ps-sub-amt.income { color: #5fb87a; }
.ps-sub-amt.expense { color: var(--p-rust); }
.ps-sub-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .12s; }
.ps-sub:hover .ps-sub-actions, .ps-sub:focus-within .ps-sub-actions { opacity: 1; }
.ps-sub-edit, .ps-sub-cancel, .ps-sub-del { background: none; border: 0; color: var(--fg-dim-2); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.ps-sub-edit:hover { color: var(--accent); }
.ps-sub-cancel:hover { color: #e0922e; }
.ps-sub-del:hover { color: var(--p-rust); }
.ps-sub-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ps-sub-add input, .ps-sub-add select { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ps-sub-add input:focus, .ps-sub-add select:focus { border-color: var(--accent); }
.ps-sub-field { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim-2); }
@media (hover: none) { .ps-sub-actions { opacity: 1; } }
@media (max-width: 760px) { .ps-sub-add input, .ps-sub-add select { font-size: 16px; } }

/* ── Customers (CRM) — index + dossier ─────────────────────────────────────── */
/* Money/dates are longer than counts, so the KPI value font is smaller here. */
.cust-kpis .pd-stat-v { font-size: 24px; }
.cust-kpi-date { font-size: 18px; }

.cust-controls { display: flex; gap: 8px; align-items: center; margin: 18px 0 14px; flex-wrap: wrap; }
.cust-search { flex: 1; min-width: 200px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; }
.cust-search:focus, .cust-sort:focus { border-color: var(--accent); outline: none; }
.cust-sort { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; padding: 9px 12px; font-size: 13px; }

.cust-name-link { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--fg); }
.cust-name-link:hover strong { color: var(--accent); }
.cust-email { font-size: 11px; color: var(--fg-dim-2); }
.cust-owes { color: var(--warn); }

.cust-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .cust-2col { grid-template-columns: 1fr; } }

.cust-dl { margin: 4px 0 0; }
.cust-dl > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cust-dl dt { width: 88px; flex-shrink: 0; color: var(--fg-dim-2); font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.cust-dl dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.cust-flag { margin-top: 12px; padding: 8px 11px; border: 1px solid var(--warn); border-radius: 8px; color: var(--warn); font-size: 12px; }
.cust-flag-link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.cust-notes { margin: 6px 0 0; color: var(--fg-dim); font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.cust-feed { list-style: none; margin: 4px 0 0; padding: 0; }
.cust-feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cust-feed-ico { flex-shrink: 0; color: var(--fg-dim-2); display: inline-flex; }
.cust-feed-ico .ico { width: 15px; height: 15px; }
.cust-feed-body { flex: 1; min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.cust-feed-verb { color: var(--fg-dim); font-size: 11px; }
.cust-feed-when { flex-shrink: 0; color: var(--fg-dim-2); font-size: 11px; }
.cust-feed-row.tone-pos .cust-feed-ico { color: var(--ok, #6fa84a); }
.cust-feed-row.tone-neg .cust-feed-ico { color: var(--danger); }
.cust-feed-row.tone-warm .cust-feed-ico, .cust-feed-row.tone-amber .cust-feed-ico { color: var(--accent); }

.cust-proj-row, .cust-inq-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.cust-proj-link, .cust-inq-link { flex: 1; min-width: 0; color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-proj-link:hover, .cust-inq-link:hover { color: var(--accent); }
.cust-proj-id { color: var(--fg-dim-2); font-size: 11px; margin-right: 4px; }
.cust-proj-val { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.cust-inq-meta { flex-shrink: 0; color: var(--fg-dim-2); font-size: 11px; }
.cust-comms-meta { color: var(--fg-dim-2); font-size: 11px; margin: 2px 0 10px; }

.cust-files { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cust-file a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fg-dim); }
.cust-file-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); }
.cust-file-ico { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); }
.cust-file-ico .ico { width: 28px; height: 28px; color: var(--fg-dim-2); }
.cust-file-name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-file a:hover .cust-file-name { color: var(--accent); }

.pa-field.pa-wide { grid-column: 1 / -1; }
.tab.tab-link { margin-left: auto; color: var(--fg-dim-2); text-decoration: none; }
.tab.tab-link:hover { color: var(--accent); }

/* Inbox: inline status changer in the inquiry meta grid. */
.inq-status-form { margin: 0; }
.inq-status-select { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.inq-status-select:focus { border-color: var(--accent); outline: none; }
.ps-bill, .ps-hold { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ps-bill > span:first-child, .ps-hold > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ps-bill .mono, .ps-hold .mono { color: var(--fg-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ps-tx-list:empty::after, .ps-bill-list:empty::after, .ps-hold-list:empty::after {
  content: '— none —'; display: block; color: var(--fg-dim-2); font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; padding: 8px 0; }

/* Receipt-extraction dropzone (AI prefills the add form) */
.ps-drop { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  margin-top: 12px; padding: 14px; cursor: pointer; border: 1px dashed var(--line-strong);
  background: var(--bg-3); transition: border-color .15s, background .15s; }
.ps-drop:hover, .ps-drop.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-3)); }
.ps-drop.busy { opacity: .55; pointer-events: none; }
.ps-drop.disabled { cursor: default; border-style: solid; border-color: var(--line); background: transparent; }
.ps-drop-strong { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ps-drop.disabled .ps-drop-strong { color: var(--fg-dim-2); }
.ps-drop-or { font-size: 11px; color: var(--fg-dim-2); }
.ps-drop-or a { color: var(--accent); text-decoration: none; }
.ps-drop-or a:hover { text-decoration: underline; }

/* Inline add forms */
.ps-tx-add, .ps-todo-add, .ps-note-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ps-tx-add input, .ps-tx-add select, .ps-todo-add input, .ps-note-add textarea {
  flex: 1; min-width: 110px; background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--fg);
  font: inherit; font-size: 13px; padding: 8px 10px; outline: none; transition: border-color .15s; }
.ps-tx-add input:focus, .ps-tx-add select:focus, .ps-todo-add input:focus, .ps-note-add textarea:focus { border-color: var(--accent); }
.ps-note-add textarea { min-width: 100%; resize: vertical; line-height: 1.5; }

/* To-do */
.ps-todo-list { list-style: none; margin: 6px 0 0; padding: 0; }
.ps-todo-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ps-todo-item label { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; }
.ps-todo-check { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.ps-todo-text { font-size: 13px; color: var(--fg); overflow-wrap: anywhere; }
.ps-todo-item.done .ps-todo-text { color: var(--fg-dim-2); text-decoration: line-through; }
.ps-todo-del { background: none; border: 0; color: var(--fg-dim-2); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; flex-shrink: 0; }
.ps-todo-del:hover { color: var(--p-rust); }

/* Notes */
.ps-notes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ps-note { border: 1px solid var(--line); border-left: 2px solid transparent; background: var(--bg); padding: 10px 12px; }
.ps-note.pinned { border-left-color: var(--accent); }
.ps-note-body { font-size: 13px; line-height: 1.55; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.ps-note-actions { display: flex; gap: 12px; margin-top: 8px; }
.ps-note-pin, .ps-note-del { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; background: none; border: 0; color: var(--fg-dim-2); cursor: pointer; padding: 0; }
.ps-note-pin:hover { color: var(--accent); }
.ps-note-del:hover { color: var(--p-rust); }

@media (max-width: 760px) {
  .ps-tx-add input, .ps-tx-add select, .ps-todo-add input, .ps-note-add textarea { font-size: 16px; }
}

/* Live telemetry */
.live-chip { display: inline-flex; align-items: center; gap: 6px; font: 12px/1 var(--mono, monospace); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: inline-block; }
.live-dot.lc-on { background: var(--accent); }   /* de-greened: "amber on / nothing off" */
.live-dot.lc-off { background: #9aa0a6; }
.live-dot.lc-err { background: var(--danger); }
.pc-live { margin-left: auto; }
.pd-live .pd-live-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pd-live .pd-live-grid .pd-stat { background: var(--bg); padding: 10px 12px; }
.pd-live-bar { height: 6px; background: var(--line); margin: 10px 0; overflow: hidden; }
.pd-live-bar > span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.pd-live-controls { display: flex; flex-wrap: wrap; gap: 8px; }
/* Live top row: camera left (reduced); current job, progress, Layer/Nozzle/Bed
   and controls all stack in the .pd-live-now column to its right. */
.pd-live-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pd-live-top .pd-cam { flex: 1 1 56%; min-width: 0; margin-bottom: 0; }
.pd-live-now { flex: 1 1 40%; min-width: 210px; display: flex; flex-direction: column; gap: 10px; }
.pd-live-now .pd-stat-job { background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; }
.pd-live-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pd-live-now-grid .pd-stat { background: var(--bg); padding: 10px 12px; }
.pd-live-now .pd-live-bar { margin: 0; }
@media (max-width: 760px) {
  .pd-live-top { flex-direction: column; }
  .pd-live-top .pd-cam, .pd-live-now { width: 100%; flex-basis: auto; }
}
/* Usage-tab "print a file" form: native file input + spool select were unstyled. */
.pd-print-form input[type="file"], .pd-print-form select {
  background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.pd-print-form input[type="file"]:focus, .pd-print-form select:focus { border-color: var(--accent); outline: none; }
.pd-print-form input[type="file"]::file-selector-button {
  background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--fg);
  font: inherit; font-size: 12px; padding: 5px 11px; margin-right: 10px; border-radius: 6px; cursor: pointer; transition: all .15s; }
.pd-print-form input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
/* 16px on mobile to prevent iOS focus-zoom. Must live AFTER the 13px base rule
   above — at equal/lower specificity an earlier media-query rule loses the cascade. */
@media (max-width: 760px) {
  .pd-print-form input[type="file"], .pd-print-form select { font-size: 16px; }
}

/* Printer camera */
/* R10: live camera as a clean 16:9 framed panel in the printer hero */
.pd-cam { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; display: grid; place-items: center; overflow: hidden; }
.pd-cam img { width: 100%; height: 100%; object-fit: cover; display: none; }
.pd-cam-cap { position: absolute; color: var(--fg-dim-2); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; }
/* Long live-job name scrolls (ping-pong) only when it overflows its cell */
.job-cell { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; }
.job-cell .job-text { display: inline-block; will-change: transform; }
.job-cell.marquee-on .job-text { animation: job-marquee var(--marquee-dur, 8s) ease-in-out infinite alternate; }
@keyframes job-marquee { from { transform: translateX(0); } to { transform: translateX(var(--marquee-shift, 0)); } }
@media (prefers-reduced-motion: reduce) { .job-cell.marquee-on .job-text { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   Farm redesign — Direction B (printer detail + parts pool)
   Sticky camera/live/health rail beside roomy tabs; parts-pool card grid.
   Scoped under .polish so the de-green + roomy-tab overrides never touch the
   other dense tabbed pages (projects, finance). "Amber on / nothing off."
   ════════════════════════════════════════════════════════════════════════════ */
.polish { --ok: var(--accent); }              /* every reused status element drops green here */

/* ── status pill (amber when live/printing, plain when idle, danger when down) ── */
.st-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-strong); color: var(--fg-dim); background: var(--bg-2); white-space: nowrap; }
.st-pill .d { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-dim-2); flex: 0 0 auto; }
.st-pill.live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.st-pill.live .d { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.st-pill.down { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.st-pill.down .d { background: var(--danger); }
.st-pill.dim { color: var(--fg-dim-2); }

/* ── identity header ── */
.pdx-id { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.pdx-id .pdx-eb { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); }
.pdx-id .pdx-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdx-id h2 { font-family: var(--font-display); font-weight: 600; font-size: 42px; letter-spacing: -.03em;
  line-height: .96; margin: 14px 0 0; color: var(--fg); }
.pdx-id .pd-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--fg-dim); margin-top: 14px; }
.pdx-id .pd-meta b { color: var(--fg); font-weight: 500; }
.pdx-actions { display: flex; gap: 10px; flex: 0 0 auto; align-items: center; }
.pdx-actions .btn-back { margin-bottom: 0; }

/* ── split: sticky summary rail + tab content ── */
.pdx-split { display: grid; grid-template-columns: 344px 1fr; gap: 26px; align-items: start; margin-top: 24px; }
.pdx-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.pdx-content { min-width: 0; }                 /* lets the tab body shrink instead of overflowing */

/* ── live camera feed in the rail ── */
.rail-cam { position: relative; width: 100%; aspect-ratio: 16/10; background: #000; border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; }
.rail-cam img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; display: none; }
.rail-cam .noimg { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px; color: var(--fg-dim-2); }
.rail-cam .noimg svg { width: 30px; height: 30px; stroke: currentColor; }
.rail-cam .noimg .cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.cam-tag { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(12,12,13,.78); padding: 5px 11px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.cam-tag .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.cam-tag.idle .d { background: var(--fg-dim-2); box-shadow: none; }
.cam-time { position: absolute; bottom: 10px; right: 10px; z-index: 3; background: rgba(12,12,13,.78); padding: 4px 9px;
  border-radius: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); }

/* ── slim live card in the rail ── */
.rail-card { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); padding: 20px; }
.rail-card .pd-head { display: none; }          /* the old "Live" header row is replaced by the pill */
.rl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rl-remain { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-dim); }
.rl-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rl-job { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; color: var(--fg-dim);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-pct { font-family: var(--font-mono); font-weight: 500; font-size: 26px; color: var(--fg); line-height: 1; flex: 0 0 auto; }
.pbar { height: 6px; background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; margin-top: 12px; }
.pbar > * { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.rl-sub { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; color: var(--fg-dim-2); }
.rl-sub b { color: var(--fg-dim); font-weight: 500; }
/* One-shot "Telegram me when this print ends" bell (printer job rows + tracking
   board). Greyed while disarmed; accent-filled while armed (.on). */
.pj-bell { flex: 0 0 auto; background: none; border: 1px solid var(--line); border-radius: 7px;
  padding: 1px 7px 2px; font-size: 13px; line-height: 1.5; cursor: pointer; filter: grayscale(1); opacity: .5; }
.pj-bell:hover { opacity: .85; }
.pj-bell.on { filter: none; opacity: 1; border-color: var(--accent); background: var(--accent-soft); }

.rl-ctrls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rl-ctrls .btn { flex: 1 1 auto; justify-content: center; }
/* run controls (pause/resume/stop) only while there is a live job to act on */
.rl-ctrls [data-ctl-group="run"] { display: none; }
.rl-ctrls[data-state="printing"] [data-ctl-group="run"],
.rl-ctrls[data-state="paused"]   [data-ctl-group="run"] { display: contents; }
.rl-ctrls[data-state="printing"] [data-control="resume"],
.rl-ctrls[data-state="paused"]   [data-control="pause"] { display: none; }
.btn.sm { padding: 8px 12px; font-size: 11px; }

/* Print-speed segmented control (Bambu 1..4) — gated like the run controls:
   only rendered useful while a print is live (printing/paused implies online).
   The .on segment mirrors telemetry spd_lvl (printer-detail.js live poll). */
.rl-speed { display: none; }
.rl-ctrls[data-state="printing"] .rl-speed,
.rl-ctrls[data-state="paused"]   .rl-speed { display: flex; align-items: center; gap: 4px; flex-basis: 100%; }
.rl-speed-lbl { font-size: 10px; letter-spacing: .08em; color: var(--fg-dim-2); margin-right: 4px; }
.rl-speed-btn { flex: 1 1 auto; padding: 6px 4px; font-size: 10.5px; font-family: var(--font-mono);
  border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--fg-dim); cursor: pointer; }
.rl-speed-btn:hover { color: var(--fg); }
.rl-speed-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }

/* Chamber-light slide toggle — replaces the old "Light on"/"Light off" buttons
   with one on/off switch. Reflects telemetry light_state; flips optimistically on
   tap (printer-detail.js). Left = off, right = on. */
.rl-light { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex: 1 1 auto; padding: 7px 12px; border: 1px solid var(--line-strong); background: var(--bg-3);
  cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); user-select: none; }
/* compact variant for the Farm header (the all-printers master switch) — sits inline
   next to "Add printer" instead of stretching like the per-printer rail toggle. */
.rl-light.ph-light { flex: 0 0 auto; gap: 12px; }
.rl-light:hover { border-color: var(--accent); }
.rl-light-txt { display: inline-flex; align-items: center; gap: 6px; }
.rl-light-txt .ico { width: 14px; height: 14px; }
.rl-light-input { position: absolute; opacity: 0; width: 0; height: 0; }
.rl-light-track { position: relative; width: 38px; height: 20px; border-radius: 999px; flex: none;
  background: var(--line-strong); transition: background .18s ease; }
.rl-light-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--fg-dim); transition: transform .18s ease, background .18s ease; }
.rl-light-input:checked ~ .rl-light-track { background: var(--accent); }
.rl-light-input:checked ~ .rl-light-track .rl-light-knob { transform: translateX(18px); background: #fff; }
.rl-light-input:disabled ~ .rl-light-track { opacity: .5; }
.rl-light-input:focus-visible ~ .rl-light-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── health strip (rail, 2×2 of the actionable signals) ── */
.rail-health { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rail-mini { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 15px; background: var(--bg); }
.rail-mini .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.rail-mini .v { font-family: var(--font-mono); font-weight: 500; font-size: 24px; color: var(--fg); margin-top: 9px; line-height: 1; }
.rail-mini.alert { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.rail-mini.alert .v { color: var(--danger); }
.rail-mini.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.rail-mini.warn .v { color: var(--warn); }

/* ── roomier tabs (bigger targets) — scoped so other tabbed pages stay compact ── */
.polish .tabs { gap: 4px; margin: 0 0 22px; }
.polish .tab { padding: 15px 20px; min-height: 48px; font-size: 11.5px; letter-spacing: .16em; }
.polish .tab .ct { font-size: 10px; padding: 2px 7px; }
.polish .pdx-content > .tabpanel > .pd-card { border-radius: var(--r-card); }

/* ════ Parts pool ════ */
.pool-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.pool-head .pdx-eb { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); }
.pool-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -.03em; line-height: 1; margin: 12px 0 0; color: var(--fg); }
.pool-head .sub { font-size: 13.5px; color: var(--fg-dim); max-width: 320px; text-align: right; }
.section-lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-dim); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.section-lbl.gap { margin-top: 26px; }
.section-lbl::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }

/* Redesigned parts-pool: clean catalogue cards (image + name + count), each a
   link to the per-part page. */
.ppx-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2);
  transition: border-color .15s, transform .12s; }
.ppx-card:hover { border-color: var(--fg-dim); transform: translateY(-2px); }
.ppx-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--bg-3); display: grid; place-items: center; }
.ppx-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.ppx-noimg { width: 46px; height: 46px; border-radius: 8px; background: var(--line); display: block; }
.ppx-noimg.big { width: 96px; height: 96px; }
.ppx-flag { position: absolute; top: 8px; right: 8px; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; }
.ppx-flag.low { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg-3)); }
.ppx-flag.out { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, var(--bg-3)); }
/* All units installed on printers (no spare in storage) — informational, not a
   warning: the parts aren't missing, they're in use. */
.ppx-flag.inst { color: var(--fg-dim); background: color-mix(in srgb, var(--fg-dim) 14%, var(--bg-3)); }

/* Reported-nozzle (telemetry) confirmation / mismatch vs the tracked install. */
.nz-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; margin-left: 8px; white-space: nowrap; }
.nz-tag.ok { color: var(--fg-dim); }
.nz-tag.warn { color: var(--danger); }
.nz-dot { font-size: 10px; vertical-align: middle; }
.nz-dot.warn { color: var(--danger); }
.ppx-name { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--fg); line-height: 1.2; }
.ppx-count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--fg-dim); }
.ppx-count .ppx-n { color: var(--fg); font-weight: 500; }
.ppx-count .ppx-n.zero { color: var(--danger); }
.ppx-card.add { align-items: center; justify-content: center; border-style: dashed; border-color: var(--line-strong);
  cursor: pointer; color: var(--fg-dim); min-height: 150px; gap: 8px; }
.ppx-card.add:hover { border-color: var(--accent); color: var(--fg); transform: none; }
.ppx-card.add .plus { font-size: 26px; color: var(--accent); }
.ppx-card.add .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* Per-part page */
.ppx-detail-grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.ppx-detail-img { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-3);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.ppx-detail-img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; box-sizing: border-box; }
.ppx-stockrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.ppx-stockbig { font-family: var(--font-mono); font-weight: 500; font-size: 44px; line-height: 1; color: var(--fg); }
.ppx-stockbig.zero { color: var(--danger); }
.ppx-stocklbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim-2); margin-top: 4px; }
.ppx-specs { display: grid; gap: 0; margin: 6px 0 18px; }
.ppx-specs > div { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ppx-specs dt { width: 90px; flex-shrink: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim-2); }
.ppx-specs dd { margin: 0; color: var(--fg); }
.ppx-detail-actions { display: flex; gap: 10px; margin-top: 18px; }
.ppx-edit { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.ppx-edit label { display: flex; flex-direction: column; gap: 5px; }
.ppx-edit input, .ppx-edit select { background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; outline: none; }
.ppx-edit input:focus, .ppx-edit select:focus { border-color: var(--accent); }
.ppx-edit-actions { display: flex; gap: 8px; }
@media (max-width: 760px) {
  .ppx-detail-grid { grid-template-columns: 1fr; gap: 16px; }
  /* Catalogue index: compact cards on phones (3-up grid set in the responsive
     block below, which overrides the old 1-col rule). */
  .ppx-card { padding: 8px; gap: 6px; border-radius: 12px; }
  .ppx-thumb { border-radius: 8px; }
  .ppx-thumb img { padding: 5px; }
  .ppx-name { font-size: 11.5px; }
  .ppx-count { font-size: 9.5px; }
  .ppx-flag { top: 5px; right: 5px; padding: 2px 5px; font-size: 8px; }
  .ppx-card.add { min-height: 96px; }
  .ppx-card.add .plus { font-size: 20px; margin: 0; }
  .ppx-card.add .lbl { font-size: 8.5px; }
}
.pcard { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); padding: 20px;
  display: flex; flex-direction: column; gap: 14px; }
.pcard .type { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim-2); }
.pcard .spec { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -.01em; color: var(--fg); line-height: 1.1; }
.pcard .row2 { display: flex; align-items: center; gap: 10px; }
.pcard .big { font-family: var(--font-mono); font-weight: 500; font-size: 38px; color: var(--fg); line-height: 1; letter-spacing: -.02em; }
.pcard .big.zero { color: var(--danger); }
.pcard .unit { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.pcard .ctrls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.pcard .lowat { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim-2); }
.pcard.add { border-style: dashed; border-color: var(--line-strong); align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg-dim); min-height: 150px; }
.pcard.add:hover { border-color: var(--accent); color: var(--fg); }
.pcard.add .plus { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent); margin-bottom: 10px; }
.pcard.add .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* Pool card edit/delete tools + inline edit form */
.pcard { position: relative; }
.pcard-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.pcard-tool { width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 6px; color: var(--fg-dim);
  font-size: 13px; line-height: 1; transition: color .15s, border-color .15s; }
.pcard-tool:hover { color: var(--fg); border-color: var(--fg-dim); }
.pcard-tool[data-pool-delete]:hover { color: var(--danger); border-color: var(--danger); }
.pcard-edit { display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
  border-top: 1px solid var(--line); padding-top: 12px; }
.pcard-edit label { display: flex; flex-direction: column; gap: 5px; }
.pcard-edit input { background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 6px; outline: none; }
.pcard-edit input:focus { border-color: var(--accent); }
.pcard-edit-actions { display: flex; gap: 8px; }

/* stock flags */
.flag-low { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); padding: 3px 9px; border-radius: 5px; }
.flag-out { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); padding: 3px 9px; border-radius: 5px; }

/* stepper — 44px brand-minimum touch targets */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.stepper button { width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg); border: none;
  color: var(--fg); cursor: pointer; font-family: var(--font-mono); font-size: 20px; line-height: 1; }
.stepper button:hover { background: var(--accent); color: #0c0c0d; }
.stepper button:disabled { color: var(--fg-dim-2); cursor: not-allowed; background: var(--bg); }
.stepper .qty { min-width: 54px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 17px;
  color: var(--fg); border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); background: var(--bg-2); font-variant-numeric: tabular-nums; }

/* add-to-pool form (revealed by the dashed card) */
.pool-add { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); padding: 22px 24px; margin-top: 22px; }
.pool-add[hidden] { display: none; }
.pool-add .pa-grid { display: grid; grid-template-columns: 160px 1fr 150px 110px auto; gap: 12px; align-items: end; }
.pool-add label { display: block; }
.pool-add input, .pool-add select { width: 100%; min-height: 46px; background: var(--bg); border: 1px solid var(--line);
  color: var(--fg); padding: 11px 13px; font: inherit; border-radius: var(--r-sm); }

/* ── responsive reflow ── */
@media (max-width: 880px) {
  .pdx-split { grid-template-columns: 1fr; }
  .pdx-rail { position: static; }
  .pool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .pdx-id { flex-direction: column; gap: 18px; }
  .pdx-id h2 { font-size: 30px; }
  .pdx-actions { width: 100%; }
  .pdx-actions .btn { flex: 1; justify-content: center; }
  .rail-health { grid-template-columns: 1fr 1fr; }
  .pool-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .pool-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pool-head .sub { text-align: left; }
  .pool-add .pa-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Wave-2 redesign — Farm index (.f2-*)
   ============================================================ */
/* ---------------------------------------------------------------------------
   Farm — status rail, triaged grid, exceptions-first maintenance (.f2-*)
   --------------------------------------------------------------------------- */
.f2{--alarm:#ff6b6b;--alarm-soft:color-mix(in srgb,#ff6b6b 13%,transparent);
      --alarm-line:color-mix(in srgb,#ff6b6b 55%,var(--line));}
  .f2 .eb{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.22em;
      text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
  .f2 .eb::before{content:'';width:22px;height:1.5px;background:var(--accent);display:inline-block;}

  /* ── status rail ── */
  .f2-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;}
  .f2-tile{text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:12px;
      padding:16px 18px 17px;cursor:pointer;display:flex;flex-direction:column;gap:0;position:relative;
      transition:border-color .15s,background .15s,transform .12s;font-family:inherit;}
  .f2-tile:hover{border-color:var(--line-strong);transform:translateY(-1px);}
  .f2-tile .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
      color:var(--fg-dim);display:flex;align-items:center;gap:7px;}
  .f2-tile .k svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .f2-tile .v{font-family:var(--font-mono);font-weight:500;font-size:38px;line-height:1;color:var(--fg);
      margin-top:13px;letter-spacing:-.01em;}
  .f2-tile .s{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-dim-2);
      margin-top:9px;text-transform:uppercase;}
  .f2-tile.alarm{border-color:var(--alarm-line);background:var(--alarm-soft);}
  .f2-tile.alarm .k,.f2-tile.alarm .v{color:var(--alarm);}
  .f2-tile.warn{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
  .f2-tile.warn .k,.f2-tile.warn .v{color:var(--accent);}
  .f2-tile.calm .v{color:var(--ok);}
  .f2-tile.on{outline:2px solid var(--accent);outline-offset:2px;}
  .f2-tile .arrow{position:absolute;top:15px;right:15px;font-family:var(--font-mono);font-size:13px;
      color:var(--fg-dim-2);}

  /* ── grid block head ── */
  .f2-blk{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:30px 0 14px;}
  .f2-blk h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
      color:var(--fg-dim-2);font-weight:500;display:flex;align-items:center;gap:10px;}
  .f2-blk h3 .ct{color:var(--fg-dim);}
  .f2-seg{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;}
  .f2-seg button{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
      padding:7px 12px;background:transparent;color:var(--fg-dim);border:0;cursor:pointer;}
  .f2-seg button.on{background:var(--accent);color:#0c0c0d;}

  /* ── printer grid ── */
  .f2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
  .f2-grid.rows{grid-template-columns:1fr;}
  .f2-pc{display:flex;flex-direction:column;gap:13px;border:1px solid var(--line);background:var(--bg-2);
      border-radius:12px;padding:16px;text-decoration:none;color:var(--fg);position:relative;
      transition:border-color .15s,opacity .15s,transform .12s;overflow:hidden;}
  .f2-pc:hover{border-color:var(--accent);transform:translateY(-1px);}
  .f2-pc.dim{opacity:.32;}
  .f2-pc.alarm{border-color:var(--alarm-line);background:linear-gradient(var(--alarm-soft),var(--alarm-soft)),var(--bg-2);}
  .f2-pc.alarm::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--alarm);}
  .f2-pc-top{display:flex;align-items:flex-start;gap:13px;}
  .f2-photo{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg);
      border-radius:11px;display:grid;place-items:center;color:var(--fg-dim-2);overflow:hidden;}
  .f2-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .f2-photo svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4;}
  .f2-pc.alarm .f2-photo{color:var(--alarm);border-color:var(--alarm-line);}
  .f2-pc-id{flex:1;min-width:0;}
  .f2-pc-name{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.02em;
      line-height:1.05;color:var(--fg);}
  .f2-pc-model{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--fg-dim-2);margin-top:6px;}
  .f2-status{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
      padding:3px 8px;border:1px solid var(--line-strong);border-radius:999px;color:var(--fg-dim);
      display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;}
  .f2-status .d{width:6px;height:6px;border-radius:50%;background:var(--ok);}
  .f2-status.ps-down{color:var(--alarm);border-color:var(--alarm-line);}
  .f2-status.ps-down .d{background:var(--alarm);}
  .f2-status.ps-retired{color:var(--fg-dim-2);}
  .f2-status.ps-retired .d{background:var(--fg-dim-2);}

  .f2-state{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:9px 11px;border-radius:8px;
      background:var(--bg-3);color:var(--fg-dim);}
  .f2-state svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;}
  .f2-state.alarm{background:var(--alarm-soft);color:var(--alarm);}
  .f2-state.alarm b{color:var(--alarm);font-weight:600;}
  .f2-state.ok{color:var(--ok);}
  .f2-state .tags{display:flex;gap:7px;flex-wrap:wrap;}
  .f2-state .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
  /* compact icon badges: overdue (gear) / error (bug) / due (clock) — icon + count */
  .f2-state .f2-ist{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11px;}
  .f2-state .f2-ist b{color:inherit;font-weight:600;}
  .f2-state .f2-ist.err{color:#ff6b6b;}
  .f2-state .f2-ist.due{color:var(--fg-dim);}

  .f2-foot{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;
      padding-top:12px;border-top:1px solid var(--line);}
  .f2-foot .cell .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
      color:var(--fg-dim-2);margin-bottom:4px;}
  .f2-foot .cell .x{font-family:var(--font-mono);font-size:11.5px;color:var(--fg);
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .f2-foot .cell .x.muted{color:var(--fg-dim-2);}
  .f2-live{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--fg-dim-2);display:inline-flex;align-items:center;gap:6px;}
  .f2-live .ld{width:6px;height:6px;border-radius:50%;background:var(--fg-dim-2);opacity:.6;}

  /* rows density */
  .f2-grid.rows .f2-pc{flex-direction:row;align-items:center;gap:16px;padding:13px 16px;}
  .f2-grid.rows .f2-pc-top{flex:0 0 300px;}
  .f2-grid.rows .f2-state{flex:1;}
  .f2-grid.rows .f2-foot{border-top:0;padding-top:0;grid-template-columns:auto auto auto;gap:22px;flex:0 0 auto;}

  /* ── maintenance ── */
  .f2-card{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:20px 22px;margin-bottom:16px;}
  .f2-card-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px;}
  .f2-card-h .t{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.02em;
      display:flex;align-items:center;gap:11px;}
  .f2-badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
      padding:3px 8px;border-radius:999px;border:1px solid var(--alarm-line);color:var(--alarm);
      background:var(--alarm-soft);}
  .f2-sub{font-size:12.5px;color:var(--fg-dim);margin-bottom:16px;}
  .f2-exc{display:flex;flex-direction:column;gap:8px;}
  .f2-exc-row{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--alarm-line);
      background:var(--alarm-soft);border-radius:9px;padding:11px 14px;color:var(--fg);transition:transform .12s;}
  .f2-exc-row:hover{transform:translateX(3px);}
  .f2-exc-row .task{font-size:13.5px;color:var(--fg);font-weight:500;}
  .f2-exc-row .pr{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);}
  .f2-exc-row .h{margin-left:auto;font-family:var(--font-mono);font-size:13px;color:var(--alarm);font-weight:500;}
  .f2-exc-row .chev{color:var(--alarm);font-family:var(--font-mono);}
  .f2-allclear{display:flex;align-items:center;gap:9px;color:var(--ok);font-size:12.5px;padding:11px 0;}
  .f2-allclear svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}

  .f2-toggle{margin-top:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--fg-dim);background:transparent;border:0;cursor:pointer;
      display:inline-flex;align-items:center;gap:7px;padding:0;}
  .f2-toggle:hover{color:var(--accent);}
  .f2-toggle .chev{transition:transform .2s;display:inline-block;}
  .f2-toggle.open .chev{transform:rotate(90deg);}

  /* full matrix */
  .f2-matrix{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:18px;}
  .f2-mtask .mrow{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
  .f2-mtask .mname{font-size:13.5px;color:var(--fg);font-weight:500;}
  .f2-mtask .mint{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-dim-2);text-transform:uppercase;white-space:nowrap;}
  .f2-mtask .madmin{margin-left:auto;display:flex;gap:6px;}
  .f2-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .f2-chip{display:inline-flex;align-items:center;gap:9px;padding:5px 10px;text-decoration:none;
      border:1px solid var(--line);border-radius:7px;color:var(--fg-dim);}
  .f2-chip .cn{font-size:11px;color:var(--fg);}
  .f2-chip .ch{font-family:var(--font-mono);font-size:10px;}
  .f2-chip.due{border-color:var(--accent);}
  .f2-chip.due .ch{color:var(--accent);}
  .f2-chip.overdue{border-color:var(--alarm-line);background:var(--alarm-soft);}
  .f2-chip.overdue .ch{color:var(--alarm);}

  /* manage disclosure + pool */
  .f2-manage{margin-top:8px;}
  .f2-manage>summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:10px;
      letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);display:inline-flex;align-items:center;gap:8px;padding:6px 0;}
  .f2-manage>summary::-webkit-details-marker{display:none;}
  .f2-manage>summary:hover{color:var(--accent);}
  .f2-manage[open]>summary{color:var(--accent);margin-bottom:14px;}
  .f2-mgrid{display:flex;flex-direction:column;gap:14px;}
  .f2-frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
  .f2-frow .cb{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-dim);
      display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;}
  .f2-in{background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;color:var(--fg);
      font-family:var(--font-body);font-size:16px;padding:9px 12px;}
  .f2-in::placeholder{color:var(--fg-dim-2);}

  .f2-pool{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);
      background:var(--bg-2);border-radius:12px;padding:16px 22px;}
  .f2-pool.warn{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
  .f2-pool .pt{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--fg);}
  .f2-pool .ps{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);margin-top:5px;}
  .f2-pool .ps .low{color:var(--accent);}

  /* mobile reflow (handoff .f2-m rules promoted to a real breakpoint) */
  @media (max-width: 760px){
    .f2-rail{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
    .f2-tile .v{font-size:30px;}
    .f2-grid{grid-template-columns:1fr;}
    .f2-blk{margin:22px 0 12px;}
    .f2-foot{grid-template-columns:1fr 1fr;}
    .f2-foot .f2-live{grid-column:1 / -1;}
  }

/* Wave-2 farm — integration fixes (utilities + scoped overrides) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.f2 .page-head .btn.ghost{width:auto;}
.f2-live .live-dot{width:6px;height:6px;}
.f2 .pa-grid .pa-actions{grid-column:1 / -1;}
.f2 .field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.f2 .flabel{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);}
.f2 .field input,.f2 .field select{background:var(--bg);border:1px solid var(--line-strong);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:16px;padding:9px 11px;width:100%;}
.f2 .field input:focus,.f2 .field select:focus{outline:none;border-color:var(--accent);}

/* ============================================================
   Wave-2 redesign — Jobs / Pipeline Direction C (.jb-*)
   ============================================================ */
/* ---------------------------------------------------------------------------
   Jobs/Pipeline — funnel rail + focus pane, move menu (.jb-*)
   --------------------------------------------------------------------------- */
.jb{--alarm:#ff6b6b;--alarm-soft:color-mix(in srgb,#ff6b6b 13%,transparent);--alarm-line:color-mix(in srgb,#ff6b6b 55%,var(--line));
      --ok:#6fce8f;}
  .jb .eb{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
  .jb .eb::before{content:'';width:22px;height:1.5px;background:var(--accent);display:inline-block;}
  .jb-toggle{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;}
  .jb-toggle a{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;color:var(--fg-dim);text-decoration:none;}
  .jb-toggle a.on{background:var(--accent);color:#0c0c0d;}

  /* ── 2-col: rail + focus ── */
  .jb-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;}
  .jb-rail{position:sticky;top:16px;border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:3px;}
  .jb-rail .rh{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);padding:4px 8px 8px;}
  .jb-srow{display:flex;align-items:center;gap:10px;padding:9px 9px;border-radius:8px;cursor:pointer;border:1px solid transparent;background:transparent;text-align:left;font-family:inherit;width:100%;transition:background .12s,border-color .12s;}
  .jb-srow:hover{background:var(--bg-3);}
  .jb-srow.on{background:var(--bg-3);border-color:var(--line-strong);}
  .jb-srow .d{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
  .jb-srow .nm{font-size:13px;color:var(--fg);width:74px;flex:0 0 auto;}
  .jb-srow.on .nm{color:var(--fg);}
  .jb-bar{flex:1;height:6px;border-radius:3px;background:var(--bg-4);overflow:hidden;}
  .jb-bar > span{display:block;height:100%;border-radius:3px;}
  .jb-srow .ct{font-family:var(--font-mono);font-size:12px;color:var(--fg);width:16px;text-align:right;flex:0 0 auto;}
  .jb-srow .rk{font-family:var(--font-mono);font-size:9px;color:var(--alarm);flex:0 0 auto;}
  .jb-rail .rf{margin-top:8px;padding:10px 8px 4px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-dim-2);text-transform:uppercase;}
  .jb-rail .rf b{color:var(--fg);}
  .jb-rail .rf a{color:var(--fg-dim);text-decoration:none;}
  .jb-rail .rf a:hover{color:var(--accent);}

  /* ── focus pane ── */
  .jb-pane{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:18px 20px;min-height:420px;min-width:0;}
  .jb-ph{display:flex;align-items:center;gap:12px;margin-bottom:4px;}
  .jb-ph .d{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
  .jb-ph h3{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.02em;color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .jb-ph .meta{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-dim);text-transform:uppercase;}
  .jb-ph .meta .rk{color:var(--alarm);}
  .jb-phsub{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-dim-2);text-transform:uppercase;margin-bottom:16px;}

  .jb-list{display:flex;flex-direction:column;gap:10px;}
  /* No overflow:hidden — it clips the absolutely-positioned .jb-menu "Move ▾"
     popover (regression re-fix). The .edge accent bar instead rounds its own left
     corners so the card's rounded corners still look right. */
  .jb-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--bg-3);border-radius:10px;position:relative;transition:border-color .12s,box-shadow .12s;}
  .jb-card:hover{border-color:var(--line-strong);}
  .jb-card.over{border-color:var(--alarm-line);}
  .jb-card .edge{position:absolute;left:0;top:0;bottom:0;width:3px;border-top-left-radius:10px;border-bottom-left-radius:10px;}
  .jb-cardtop{display:flex;align-items:stretch;min-width:0;}
  .jb-link{flex:1;min-width:0;text-decoration:none;color:var(--fg);padding:13px 14px 13px 16px;display:block;}
  .jb-c1{display:flex;align-items:baseline;gap:10px;min-width:0;}
  .jb-num{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--fg-dim-2);flex:0 0 auto;white-space:nowrap;}
  .jb-name{font-size:14.5px;color:var(--fg);font-weight:500;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .jb-cust{font-size:12px;color:var(--fg-dim);margin-top:3px;}
  .jb-meta{display:flex;align-items:center;gap:12px;margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-dim);}
  .jb-meta .val{color:var(--fg);}
  .jb-meta .due.over{color:var(--alarm);}
  .jb-meta .due.soon{color:var(--warn);}
  .jb-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line-strong);color:var(--fg-dim);}
  .jb-pill.paid{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));}
  .jb-pill.invoiced{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
  .jb-pill.proforma{color:var(--warn);border-color:var(--warn);}

  .jb-side{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;justify-content:center;padding:10px 12px 10px 0;}
  .jb-move{position:relative;}
  .jb-moveb{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);background:transparent;border:1px solid var(--line-strong);border-radius:6px;padding:7px 11px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
  .jb-moveb:hover{color:var(--accent);border-color:var(--accent);}
  .jb-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:6;background:var(--bg-4);border:1px solid var(--line-strong);border-radius:9px;padding:5px;min-width:170px;box-shadow:0 8px 28px rgba(0,0,0,.45);}
  .jb-menu .mh{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);padding:5px 8px;}
  .jb-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;border-radius:6px;padding:8px 8px;color:var(--fg);font-family:var(--font-body);font-size:13px;cursor:pointer;}
  .jb-menu button:hover{background:rgba(255,255,255,.05);}
  .jb-menu button .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
  .jb-menu button .nx{margin-left:auto;font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;color:var(--accent);}
  .jb-inv{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#0c0c0d;background:var(--accent);border:0;border-radius:6px;padding:7px 11px;cursor:pointer;text-decoration:none;text-align:center;white-space:nowrap;}
  .jb-paidb{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);background:transparent;border:1px solid var(--line-strong);border-radius:6px;padding:7px 11px;cursor:pointer;white-space:nowrap;}
  .jb-paidb:hover{color:var(--accent);border-color:var(--accent);}
  .jb-paidb.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));}

  /* inbox inquiry cards — distinct triage treatment */
  .jb-inq{display:flex;align-items:center;gap:12px;border:1px dashed var(--line-strong);background:var(--bg-2);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--fg);position:relative;}
  .jb-inq:hover{border-color:var(--accent);}
  .jb-inq .rib{font-family:var(--font-mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#0c0c0d;background:var(--accent);padding:2px 6px;border-radius:4px;flex:0 0 auto;}
  .jb-inq .ib{flex:1;min-width:0;}
  .jb-inq .conv{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);flex:0 0 auto;}
  .jb-inqlbl{display:flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);margin:18px 0 10px;}
  .jb-inqlbl .lnk{margin-left:auto;color:var(--accent);text-decoration:none;flex:0 0 auto;}
  .jb-inqlbl .lnk:hover{text-decoration:underline;}

  /* empty states — px3 language (was inline-styled) */
  .jb-empty{padding:24px 8px;color:var(--fg-dim-2);font-size:12.5px;text-align:center;}
  .jb-empty.sm{padding:12px 0;text-align:left;}

  /* ── px3 note surface on each card: latest note (inline ✎ edit) + add composer ── */
  .jb-notes{border-top:1px solid var(--line);padding:9px 14px 11px 16px;display:flex;flex-direction:column;gap:8px;min-width:0;}
  .jb-note{display:flex;align-items:flex-start;gap:8px;min-width:0;}
  .jb-note-ic{flex:0 0 auto;font-size:11px;line-height:1.5;opacity:.7;}
  .jb-note-tx{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--fg-dim);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .jb-note-stamp{flex:0 0 auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--fg-dim-2);white-space:nowrap;margin-top:2px;}
  .jb-note-ed{flex:0 0 auto;background:transparent;border:0;color:var(--fg-dim-2);cursor:pointer;font-size:12px;line-height:1;padding:2px 4px;border-radius:5px;}
  .jb-note-ed:hover{color:var(--accent);}
  .jb-note-edit{width:100%;min-height:46px;resize:vertical;background:var(--bg);border:1px solid var(--accent);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:13px;line-height:1.5;padding:8px 10px;box-sizing:border-box;}
  .jb-note-edit:focus{outline:none;}
  .jb-noteact{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
  .jb-note-ct{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;flex:0 0 auto;}
  .jb-note-add{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);background:transparent;border:1px solid var(--line-strong);border-radius:6px;cursor:pointer;padding:6px 10px;white-space:nowrap;}
  .jb-note-add:hover{color:var(--accent);border-color:var(--accent);}
  .jb-notecomp{border:1px solid var(--line-strong);border-radius:9px;background:var(--bg-2);}
  .jb-notecomp:focus-within{border-color:var(--accent);}
  .jb-notecomp textarea{width:100%;min-height:48px;resize:vertical;background:none;border:0;outline:none;color:var(--fg);font-family:var(--font-body);font-size:13.5px;line-height:1.5;padding:10px 12px;box-sizing:border-box;}
  .jb-notecomp-foot{display:flex;justify-content:flex-end;gap:8px;align-items:center;padding:7px 10px 8px;border-top:1px solid var(--line);}
  .jb-note-cancel{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim-2);background:transparent;border:0;cursor:pointer;padding:6px 8px;}
  .jb-note-cancel:hover{color:var(--fg);}
  .jb-notecomp .px3-btn{padding:7px 12px;}


/* Wave-2 jobs — mobile reflow (handoff .jb-m rules promoted to a media query) */
@media (max-width: 760px){
  .jb-body{grid-template-columns:minmax(0,1fr);gap:14px;}
  .jb-rail{position:static;min-width:0;}
  .jb-pane{padding:16px;}
  .jb-card .jb-side{padding-right:10px;}
  .jb-notes{padding:9px 12px 11px 14px;}
}

/* ============================================================
   Wave-2 redesign — Inbox / triage (.ib-*)
   ============================================================ */
.ib{--alarm:#ff6b6b;--alarm-soft:color-mix(in srgb,#ff6b6b 13%,transparent);
      --alarm-line:color-mix(in srgb,#ff6b6b 55%,var(--line));}
  .ib .eb{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.22em;
      text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
  .ib .eb::before{content:'';width:22px;height:1.5px;background:var(--accent);display:inline-block;}

  /* ── SLA rail + import ── */
  .ib-top{display:grid;grid-template-columns:1.1fr 1.1fr 1.1fr 1.5fr;gap:12px;margin-bottom:18px;align-items:stretch;}
  .ib-sla{text-align:left;border:1px solid var(--line);background:var(--bg-2);border-radius:12px;
      padding:15px 17px;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;
      transition:border-color .15s,background .15s,transform .12s;}
  .ib-sla:hover{border-color:var(--line-strong);transform:translateY(-1px);}
  .ib-sla .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
      color:var(--fg-dim);display:flex;align-items:center;gap:7px;}
  .ib-sla .k svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .ib-sla .v{font-family:var(--font-mono);font-weight:500;font-size:30px;line-height:1;color:var(--fg);margin-top:11px;letter-spacing:-.01em;}
  .ib-sla .s{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg-dim-2);margin-top:8px;text-transform:uppercase;}
  .ib-sla.alarm{border-color:var(--alarm-line);background:var(--alarm-soft);}
  .ib-sla.alarm .k,.ib-sla.alarm .v{color:var(--alarm);}
  .ib-sla.on{outline:2px solid var(--accent);outline-offset:2px;}

  .ib-import{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:12px;display:flex;gap:10px;}
  .ib-drop{flex:1;border:1.5px dashed var(--line-strong);border-radius:9px;display:flex;flex-direction:row;
      align-items:center;justify-content:center;gap:9px;text-align:center;color:var(--fg-dim);padding:12px;cursor:pointer;
      white-space:nowrap;transition:border-color .15s,background .15s;}
  .ib-drop:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);}
  .ib-drop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;flex:0 0 auto;}
  .ib-drop .t{font-size:12.5px;}.ib-drop .t b{color:var(--accent);text-decoration:underline;font-weight:400;}
  .ib-manual{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;gap:8px;padding:0 18px;
      border:1.5px solid var(--accent);border-radius:9px;background:transparent;color:var(--accent);
      font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap;}
  .ib-manual:hover{background:var(--accent);color:#0c0c0d;}
  .ib-manual svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}

  /* ── filter chips ── */
  .ib-chips{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:14px;}
  .ib-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--fg-dim);padding:10px 15px 12px;cursor:pointer;border-bottom:2px solid transparent;
      margin-bottom:-1px;display:flex;align-items:center;gap:8px;text-decoration:none;}
  .ib-chip:hover{color:var(--fg);}
  .ib-chip.on{color:var(--fg);border-bottom-color:var(--accent);}
  .ib-chip .n{color:var(--fg-dim-2);font-size:10px;}
  .ib-chip.on .n{color:var(--accent);}

  /* ── master-detail ── */
  .ib-grid{display:grid;grid-template-columns:360px 1fr;border:1px solid var(--line);border-radius:12px;
      overflow:hidden;background:var(--bg-2);}
  .ib-list{list-style:none;margin:0;padding:0;border-right:1px solid var(--line);}
  .ib-row{display:block;text-decoration:none;color:var(--fg);padding:13px 16px 13px 22px;position:relative;
      border-bottom:1px solid var(--line);transition:background .12s;}
  .ib-row:hover{background:rgba(255,255,255,.02);}
  .ib-row.sel{background:color-mix(in srgb,var(--accent) 7%,transparent);}
  .ib-row.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);}
  .ib-row.dim{opacity:.4;}
  .ib-row .dot{position:absolute;left:9px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .ib-r1{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
  .ib-r1 .nm{font-size:13.5px;color:var(--fg);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ib-age{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
      padding:2px 7px;border-radius:999px;border:1px solid var(--line-strong);color:var(--fg-dim);white-space:nowrap;flex:0 0 auto;}
  .ib-age.over{color:var(--alarm);border-color:var(--alarm-line);background:var(--alarm-soft);}
  .ib-subj{font-size:13px;color:var(--fg-dim);line-height:1.4;margin-bottom:6px;overflow:hidden;
      text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
  /* meta row: labels never break mid-word (at any width — the narrow two-pane
     list column clips them just like mobile); only the email truncates. */
  .ib-rmeta{display:flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
      text-transform:uppercase;color:var(--fg-dim-2);overflow:hidden;}
  .ib-rmeta > *{white-space:nowrap;flex:0 0 auto;}
  .ib-rmeta .em{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .ib-rmeta .tag{color:var(--accent);}
  .ib-rmeta .await{color:var(--fg-dim);border:1px solid var(--line-strong);border-radius:999px;padding:1px 6px;}

  /* ── detail ── */
  .ib-detail{padding:24px 26px;min-width:0;}
  .ib-dhead{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
  .ib-dhead .id{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
  .ib-dhead h3{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.02em;line-height:1.1;color:var(--fg);}
  .ib-dhead .sender{font-size:12.5px;color:var(--fg-dim);}
  .ib-dhead .sender a{color:var(--accent);text-decoration:none;}

  /* context strip — customer · type · qty · budget pinned together */
  .ib-ctx{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px;}
  .ib-ctx > div{flex:1;min-width:90px;padding:10px 14px;border-right:1px solid var(--line);}
  .ib-ctx > div:last-child{border-right:0;}
  .ib-ctx .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);}
  .ib-ctx .v{font-family:var(--font-mono);font-size:12px;color:var(--fg);margin-top:5px;letter-spacing:.04em;display:block;}
  .ib-ctx .v.muted{color:var(--fg-dim-2);}

  /* attachments strip near top */
  .ib-att{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;}
  .ib-att .tile{flex:0 0 auto;display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:9px;
      padding:9px 12px;text-decoration:none;color:var(--fg);background:var(--bg-3);}
  .ib-att .tile:hover{border-color:var(--accent);}
  .ib-att .tile svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5;flex:0 0 auto;}
  .ib-att .tile .fn{display:block;white-space:nowrap;font-family:var(--font-mono);font-size:11px;color:var(--fg);}
  .ib-att .tile .ft{display:block;white-space:nowrap;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);margin-top:2px;}

  .ib-body{font-size:14px;line-height:1.65;color:var(--fg-dim);padding:14px 16px;border-left:2px solid var(--line-strong);margin-bottom:20px;}

  /* one consolidated status control */
  .ib-statlbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);margin-bottom:8px;}
  .ib-seg{display:flex;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;margin-bottom:20px;}
  .ib-seg button{flex:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
      padding:10px 6px;background:transparent;color:var(--fg-dim);border:0;border-right:1px solid var(--line);cursor:pointer;transition:background .12s,color .12s;}
  .ib-seg button:last-child{border-right:0;}
  .ib-seg button.on{background:var(--accent);color:#0c0c0d;}
  .ib-seg button:not(.on):hover{color:var(--fg);background:rgba(255,255,255,.03);}

  /* action bar — verbs only, funnel-ranked */
  .ib-acts{display:flex;flex-direction:column;gap:10px;}
  .ib-acts .primary-cta{width:100%;justify-content:center;font-size:14px;padding:13px;}
  .ib-acts .row2{display:flex;gap:10px;align-items:center;}
  .ib-acts .row2 .btn{flex:1;justify-content:center;}
  .ib-more{position:relative;flex:0 0 auto;}
  .ib-more-btn{width:44px;height:42px;display:grid;place-items:center;border:1.5px solid var(--line-strong);
      border-radius:8px;background:transparent;color:var(--fg-dim);cursor:pointer;}
  .ib-more-btn:hover{color:var(--fg);border-color:var(--fg-dim);}
  .ib-more-menu{position:absolute;right:0;bottom:calc(100% + 6px);background:var(--bg-3);border:1px solid var(--line-strong);
      border-radius:9px;padding:5px;min-width:150px;box-shadow:0 8px 28px rgba(0,0,0,.4);z-index:5;}
  .ib-more-menu button{display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:6px;background:transparent;
      color:var(--danger);font-family:var(--font-body);font-size:13px;cursor:pointer;}
  .ib-more-menu button:hover{background:color-mix(in srgb,var(--danger) 12%,transparent);}

  /* caught-up state */
  .ib-zero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:60px 24px;color:var(--fg-dim);}
  .ib-zero .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);}
  .ib-zero .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;}
  .ib-zero .t{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--fg);}


/* Wave-2 inbox — mobile reflow (handoff .ib-m / .ib-md rules promoted to a media query) */
@media (max-width: 760px){
  .ib-top{grid-template-columns:1fr 1fr;gap:10px;}
  .ib-top .ib-sla:nth-child(3){grid-column:1 / -1;}
  .ib-import{grid-column:1 / -1;flex-direction:column;}
  .ib-manual{padding:11px;justify-content:center;}
  .ib-chips{overflow-x:auto;}
  .ib-chip{flex:0 0 auto;}
  .ib-grid{grid-template-columns:1fr;border:0;border-radius:0;background:transparent;}
  .ib-list{border-right:0;}
  .ib-row{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--bg-2);}
  .ib-row.sel::before{border-radius:10px 0 0 10px;}
}

/* ============================================================
   Wave-2 redesign — Customers / CRM index (.cu-*)
   ============================================================ */
.cu{--warn:#e0922e;--warn-soft:color-mix(in srgb,#e0922e 14%,transparent);--warn-line:color-mix(in srgb,#e0922e 55%,var(--line));}
  .cu .eb{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
      color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
  .cu .eb::before{content:'';width:22px;height:1.5px;background:var(--accent);display:inline-block;}

  /* ── KPI hero ── */
  .cu-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:14px;margin-bottom:22px;}
  .cu-out{grid-column:1;text-align:left;border:1px solid var(--warn-line);background:var(--warn-soft);border-radius:12px;
      padding:18px 20px;cursor:pointer;display:flex;flex-direction:column;font-family:inherit;transition:transform .12s,border-color .15s;}
  .cu-out:hover{transform:translateY(-1px);border-color:var(--warn);}
  .cu-out.on{outline:2px solid var(--accent);outline-offset:2px;}
  .cu-out .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--warn);}
  .cu-out .v{font-family:var(--font-mono);font-weight:500;font-size:40px;line-height:1;color:var(--warn);margin-top:12px;letter-spacing:-.01em;}
  .cu-out .s{font-size:12px;color:var(--fg-dim);margin-top:11px;display:flex;align-items:center;gap:7px;}
  .cu-out .s b{color:var(--warn);font-weight:500;}
  .cu-out .s .go{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);}

  .cu-kpi{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:16px 17px;display:flex;flex-direction:column;}
  .cu-kpi .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);}
  .cu-kpi .v{font-family:var(--font-mono);font-weight:500;font-size:26px;line-height:1;color:var(--fg);margin-top:12px;font-variant-numeric:tabular-nums;}
  .cu-kpi .sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim-2);margin-top:9px;}

  /* ── command bar — search + segment chips + sort, one row ── */
  .cu-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
  .cu-search{flex:1;min-width:200px;display:flex;align-items:center;gap:9px;background:var(--bg-3);border:1px solid var(--line);
      border-radius:9px;padding:0 12px;color:var(--fg-dim);}
  .cu-search svg{width:15px;height:15px;stroke:var(--fg-dim);fill:none;stroke-width:1.7;flex:0 0 auto;}
  .cu-search input{flex:1;background:transparent;border:0;outline:none;color:var(--fg);font-family:var(--font-body);font-size:16px;padding:10px 0;}
  .cu-search input::placeholder{color:var(--fg-dim-2);}
  .cu-sort{display:flex;align-items:center;gap:8px;background:var(--bg-3);border:1px solid var(--line);border-radius:9px;
      padding:0 10px 0 12px;color:var(--fg-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
  .cu-sort select{background:transparent;border:0;outline:none;color:var(--fg);font-family:var(--font-mono);font-size:11px;padding:10px 4px;cursor:pointer;}

  .cu-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin-bottom:6px;}
  .cu-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line-strong);
      border-radius:999px;background:transparent;color:var(--fg-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
      text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s;}
  .cu-chip:hover{color:var(--fg);}
  .cu-chip .ct{font-size:10px;opacity:.7;}
  .cu-chip.on{background:var(--accent);border-color:var(--accent);color:#0c0c0d;}
  .cu-chip.on .ct{opacity:.8;}
  .cu-chip.owes.on{background:var(--warn);border-color:var(--warn);}

  /* ── rows — one two-line layout for desktop + mobile ── */
  .cu-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);}
  .cu-row{display:grid;grid-template-columns:1fr auto;gap:5px 18px;align-items:center;padding:15px 18px;
      text-decoration:none;color:var(--fg);border-bottom:1px solid var(--line);position:relative;transition:background .12s;}
  .cu-row:last-child{border-bottom:0;}
  .cu-row:hover{background:rgba(255,255,255,.02);}
  .cu-row.owes{border-left:3px solid var(--warn);padding-left:15px;background:linear-gradient(90deg,var(--warn-soft),transparent 40%);}
  .cu-row.hide{display:none;}
  .cu-l1{grid-column:1;display:flex;align-items:center;gap:10px;min-width:0;}
  .cu-name{font-size:15px;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cu-type{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line-strong);border-radius:999px;padding:2px 8px;}
  .cu-type .g{width:6px;height:6px;background:var(--fg-dim-2);}
  .cu-type.business .g{background:var(--accent);}
  .cu-flag{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--warn);border:1px solid var(--warn-line);border-radius:999px;padding:2px 8px;}
  .cu-flag svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8;}
  .cu-when{grid-column:2;justify-self:end;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-dim);white-space:nowrap;}
  .cu-when.dormant{color:var(--fg-dim-2);}
  .cu-l2{grid-column:1;display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--font-mono);font-size:10.5px;
      letter-spacing:.04em;color:var(--fg-dim-2);}
  .cu-l2 .em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cu-l2 .dot{opacity:.5;}
  .cu-money{grid-column:2;justify-self:end;display:flex;align-items:baseline;gap:14px;font-family:var(--font-mono);white-space:nowrap;}
  .cu-money .paid{font-size:13px;color:var(--fg);}
  .cu-money .paid.z{color:var(--fg-dim-2);}
  .cu-money .paid small,.cu-money .owed small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-left:5px;}
  .cu-money .paid small{color:var(--fg-dim-2);}
  .cu-money .owed{font-size:13px;color:var(--warn);}
  .cu-money .owed small{color:var(--warn);opacity:.8;}
  .cu-money .none{font-size:11px;color:var(--fg-dim-2);}

  .cu-foot{margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim-2);}


/* Wave-2 customers — mobile reflow (handoff .cu-m rules promoted to a media query) */
@media (max-width: 640px){
  .cu-top{grid-template-columns:1fr 1fr;gap:10px;}
  .cu-out{grid-column:1 / -1;}
  .cu-out .v{font-size:34px;}
  .cu-kpi .v{font-size:22px;}
  .cu-bar{flex-direction:column;align-items:stretch;}
  .cu-search{min-width:0;}
  .cu-row{padding:14px 14px;}
  .cu-money{grid-column:1 / -1;justify-self:end;margin-top:5px;padding-top:9px;border-top:1px solid var(--line);width:100%;justify-content:flex-end;}
  .cu-row.owes .cu-money{border-top-color:var(--warn-line);}
  .cu-l2 .em{max-width:130px;overflow:hidden;text-overflow:ellipsis;}
  .cu-flag .ft{display:none;}
  .cu-name{font-size:14px;}
}

/* ============================================================
   Wave-2 redesign — Customer detail / dossier (.cd-*)
   ============================================================ */
.cd{--warn:#e0922e;--warn-soft:color-mix(in srgb,#e0922e 14%,transparent);--warn-line:color-mix(in srgb,#e0922e 55%,var(--line));
      --ok:#6fce8f;}
  .cd .mono{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em;}
  .cd .eb{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}

  /* ── persistent summary rail ── */
  .cd-head{position:sticky;top:0;z-index:4;background:color-mix(in srgb,var(--bg) 92%,transparent);
      backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:18px 0 16px;margin-bottom:18px;
      display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
  .cd-badges{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
  .cd-type{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;}
  .cd-type .g{width:6px;height:6px;background:var(--accent);}
  .cd-head h2{font-family:var(--font-display);font-weight:600;font-size:32px;letter-spacing:-.03em;line-height:1;color:var(--fg);}
  .cd-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--fg-dim);margin-top:11px;}
  .cd-meta a{color:var(--accent);text-decoration:none;}

  .cd-right{display:flex;align-items:flex-end;gap:22px;}
  .cd-money{display:flex;gap:22px;align-items:flex-end;}
  .cd-money .cell .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);}
  .cd-money .paid .v{font-family:var(--font-mono);font-weight:500;font-size:24px;color:var(--fg);margin-top:6px;}
  .cd-money .out .v{font-family:var(--font-mono);font-weight:500;font-size:34px;color:var(--warn);margin-top:4px;line-height:1;}
  .cd-money .out .k{color:var(--warn);}
  .cd-actions{display:flex;gap:8px;align-items:center;}

  /* ── readiness banner ── */
  .cd-ready{display:flex;align-items:center;gap:12px;border:1px solid var(--warn-line);background:var(--warn-soft);
      border-radius:10px;padding:12px 16px;margin-bottom:20px;color:var(--warn);font-size:13px;}
  .cd-ready svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto;}
  .cd-ready b{color:var(--fg);font-weight:600;}
  .cd-ready .fix{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
      color:#0c0c0d;background:var(--warn);border:0;border-radius:7px;padding:7px 12px;cursor:pointer;white-space:nowrap;}

  /* ── 2-col body ── */
  .cd-body{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start;}
  .cd-rail{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px;}
  .cd-card{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:18px 18px;}
  .cd-card-h{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);
      margin-bottom:14px;display:flex;align-items:center;gap:10px;}
  .cd-card-h .ct{color:var(--fg-dim);background:var(--bg-3);border-radius:999px;padding:1px 8px;font-size:10px;}
  .cd-card-h .more{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--accent);text-decoration:none;}

  .cd-dl > div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
  .cd-dl > div:last-child{border-bottom:0;}
  .cd-dl dt{width:80px;flex:0 0 auto;color:var(--fg-dim-2);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
      text-transform:uppercase;padding-top:2px;}
  .cd-dl dd{margin:0;color:var(--fg);overflow-wrap:anywhere;}
  .cd-dl dd.miss{color:var(--warn);font-family:var(--font-mono);font-size:12px;}

  .cd-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
  .cd-fact{background:var(--bg-2);padding:12px 14px;}
  .cd-fact .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim-2);}
  .cd-fact .v{font-family:var(--font-mono);font-size:18px;color:var(--fg);margin-top:6px;}
  .cd-fact .sub{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;color:var(--fg-dim-2);margin-top:4px;}

  /* ── main column sections ── */
  .cd-main{display:flex;flex-direction:column;gap:16px;min-width:0;}

  /* unified history feed */
  .cd-feed{list-style:none;margin:0;padding:0;}
  .cd-feed li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;}
  .cd-feed li:last-child{border-bottom:0;}
  .cd-fico{width:28px;height:28px;flex:0 0 auto;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;color:var(--fg-dim);}
  .cd-fico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .cd-feed li.pos .cd-fico{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));}
  .cd-feed li.amber .cd-fico{color:var(--warn);border-color:var(--warn-line);}
  .cd-fbody{flex:1;min-width:0;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cd-famt{font-family:var(--font-mono);font-size:12.5px;color:var(--fg);flex:0 0 auto;}
  .cd-feed li.pos .cd-famt{color:var(--ok);}
  .cd-feed li.amber .cd-famt{color:var(--warn);}
  .cd-fwhen{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-dim-2);flex:0 0 auto;width:64px;text-align:right;}

  /* rows shared */
  .cd-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);}
  .cd-row:last-child{border-bottom:0;}
  .cd-row:hover .cd-rlink{color:var(--accent);}
  .cd-rlink{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;}
  .cd-rid{font-family:var(--font-mono);font-size:11px;color:var(--fg-dim);margin-right:6px;}
  .cd-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-strong);
      border-radius:999px;color:var(--fg-dim);display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;}
  .cd-pill .d{width:6px;height:6px;border-radius:50%;background:var(--fg-dim-2);}
  .cd-pill.printing .d{background:#e8c14a;}
  .cd-pill.printing{color:#e8c14a;border-color:color-mix(in srgb,#e8c14a 45%,var(--line));}
  .cd-pill.unpaid,.cd-pill.sent{color:var(--warn);border-color:var(--warn-line);}
  .cd-pill.unpaid .d,.cd-pill.sent .d{background:var(--warn);}
  .cd-pill.paid,.cd-pill.accepted{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line));}
  .cd-pill.paid .d,.cd-pill.accepted .d{background:var(--ok);}
  .cd-val{font-family:var(--font-mono);font-size:12.5px;color:var(--fg);flex:0 0 auto;width:84px;text-align:right;}
  .cd-val.warn{color:var(--warn);}

  .cd-comms-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim-2);margin-bottom:8px;}

  .cd-files{display:flex;gap:10px;flex-wrap:wrap;}
  .cd-file{display:flex;align-items:center;gap:9px;border:1px solid var(--line-strong);border-radius:9px;padding:10px 12px;text-decoration:none;color:var(--fg);background:var(--bg-3);}
  .cd-file:hover{border-color:var(--accent);}
  .cd-file svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5;flex:0 0 auto;}
  .cd-file .fn{font-family:var(--font-mono);font-size:11px;display:block;}
  .cd-file .ft{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);display:block;margin-top:2px;}

  /* edit form */
  .cd-editgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .cd-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .cd-field.wide{grid-column:1 / -1;}
  .cd-field .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);}
  .cd-field input,.cd-field select,.cd-field textarea{background:var(--bg);border:1px solid var(--line);border-radius:8px;
      color:var(--fg);font-family:var(--font-body);font-size:16px;padding:9px 11px;outline:none;width:100%;}
  .cd-field input:focus,.cd-field textarea:focus,.cd-field select:focus{border-color:var(--accent);}
  .cd-field.flash :is(input,textarea,select){border-color:var(--warn);box-shadow:0 0 0 2px var(--warn-soft);}
  .cd-editactions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}


/* Wave-2 customer-detail — integration fixes + mobile reflow */
.nt-empty{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-dim-2);padding:24px 0;text-align:center;}
.cd .btn.ghost{width:auto;border:1px solid var(--line-strong);border-style:solid;background:transparent;color:var(--fg);border-radius:8px;}
.cd .btn.ghost:hover{border-color:var(--fg-dim);}
@media (max-width: 760px){
  .cd-head{position:static;flex-direction:column;gap:16px;}
  .cd-head h2{font-size:26px;}
  .cd-right{flex-direction:column;align-items:stretch;gap:14px;width:100%;}
  .cd-money{justify-content:space-between;}
  .cd-actions{flex-wrap:wrap;}
  .cd-actions .btn{flex:1;justify-content:center;}
  .cd-body{grid-template-columns:1fr;}
  .cd-rail{position:static;}
  .cd-editgrid{grid-template-columns:1fr;}
}

/* ============================================================
   Wave-2 brand alignment — de-green success states to amber.
   PartForm has no green-success vocabulary (wave-1 rule): status is
   amber-on / nothing-off, red only for hard alerts. This remaps every
   reused --ok success accent on the new pages to the accent, and
   collapses the handoff's stray #6fce8f green onto it.
   ============================================================ */
.f2, .jb, .ib, .cu, .cd { --ok: var(--accent); }

/* Wave-2 customers — keep the command-bar Search button inline (override global .btn.ghost width:100%) */
.cu .cu-bar .btn.ghost { width: auto; }

/* ============================================================
   Wave-2 redesign — Notes Direction A (.nt-*)
   ============================================================ */
.nt{--ok:#6fce8f;}
  .nt .eb{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
  .nt .eb::before{content:'';width:22px;height:1.5px;background:var(--accent);display:inline-block;}

  /* ── two-pane catalogue ── */
  .nt-cat{display:grid;grid-template-columns:300px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);min-height:560px;}
  .nt-list{border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--bg-2);min-width:0;}
  .nt-listtop{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);}
  .nt-listtop .t{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);}
  .nt-new{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:transparent;border:0;color:var(--accent);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;}
  .nt-search{margin:10px 12px 4px;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:14px;padding:8px 11px;outline:none;}
  .nt-search:focus{border-color:var(--accent);}
  .nt-grouphd{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);padding:14px 16px 7px;}
  .nt-scroll{overflow-y:auto;flex:1;padding-bottom:8px;}

  .nt-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;border-left:2px solid transparent;cursor:pointer;padding:11px 15px;color:var(--fg);position:relative;transition:background .12s,border-color .12s;}
  .nt-row:hover{background:rgba(255,255,255,.03);}
  .nt-row.on{background:color-mix(in srgb,var(--accent) 10%,transparent);border-left-color:var(--accent);}
  .nt-ico{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--fg-dim);background:var(--bg-3);}
  .nt-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .nt-row.on .nt-ico{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
  .nt-rmid{flex:1;min-width:0;}
  .nt-rname{font-size:14px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nt-rsub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--fg-dim-2);margin-top:3px;text-transform:uppercase;}
  .nt-rsub .st{color:var(--accent);}
  .nt-cnt{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim);border:1px solid var(--line);border-radius:999px;min-width:20px;text-align:center;padding:1px 6px;flex:0 0 auto;}
  .nt-row.on .nt-cnt{border-color:var(--accent);color:var(--accent);}
  .nt-task-chip{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:999px;padding:1px 6px;flex:0 0 auto;}

  /* ── detail pane ── */
  .nt-detail{display:flex;flex-direction:column;min-width:0;}
  .nt-dethead{padding:20px 24px 0;}
  .nt-vtag{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);float:right;border:1px solid var(--line);border-radius:999px;padding:3px 9px;}
  .nt-dethead h2{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1.05;color:var(--fg);margin:8px 0 0;}
  .nt-dethead h2 a{color:inherit;text-decoration:none;}
  .nt-dethead h2 a:hover{color:var(--accent);}
  .nt-detmeta{display:flex;gap:0;margin-top:16px;border-top:1px solid var(--line);}
  .nt-detmeta .m{padding:11px 20px 11px 0;margin-right:20px;border-right:1px solid var(--line);}
  .nt-detmeta .m:last-child{border-right:0;}
  .nt-detmeta .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);}
  .nt-detmeta .v{font-family:var(--font-mono);font-size:13px;color:var(--fg);margin-top:5px;}
  .nt-detmeta .v.acc{color:var(--accent);}

  /* composer */
  .nt-comp{margin:18px 24px 6px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg-3);transition:border-color .15s;}
  .nt-comp:focus-within{border-color:var(--accent);}
  .nt-comp textarea{width:100%;min-height:62px;resize:vertical;background:none;border:0;outline:none;color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.55;padding:13px 15px;box-sizing:border-box;}
  .nt-comp textarea::placeholder{color:var(--fg-dim-2);}
  .nt-comp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px 9px;border-top:1px solid var(--line);}
  .nt-attach{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--fg-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
  .nt-attach:hover{color:var(--accent);}
  .nt-attach svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .nt-comp-right{display:flex;align-items:center;gap:12px;}
  .nt-hint{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--fg-dim-2);text-transform:uppercase;}
  .nt-add{display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:var(--accent);color:#0c0c0d;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border:1.5px solid var(--accent);border-radius:7px;}
  .nt-add:hover{background:transparent;color:var(--accent);}

  .nt-body-scroll{padding:14px 24px 22px;overflow-y:auto;}
  .nt-dnsec{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim-2);margin:6px 0 12px;}

  /* ── task checklist (Todo folder) ── */
  .nt-tasks{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
  .nt-task{display:flex;align-items:flex-start;gap:11px;padding:10px 10px;border-radius:8px;transition:background .12s;position:relative;}
  .nt-task:hover{background:rgba(255,255,255,.03);}
  .nt-check{width:18px;height:18px;flex:0 0 auto;border:1.6px solid var(--fg-dim);border-radius:5px;background:transparent;cursor:pointer;display:grid;place-items:center;margin-top:1px;padding:0;color:#0c0c0d;transition:background .12s,border-color .12s;}
  .nt-check svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:0;}
  .nt-check.done{background:var(--accent);border-color:var(--accent);}
  .nt-check.done svg{opacity:1;}
  .nt-task .txt{flex:1;min-width:0;font-size:14.5px;line-height:1.45;color:var(--fg);}
  .nt-task.done .txt{color:var(--fg-dim-2);text-decoration:line-through;}
  /* ✎ pen — same quiet affordance as .ph-name-edit / .ps-tx-edit */
  .nt-task .edit{background:transparent;border:0;color:var(--fg-dim-2);cursor:pointer;font-size:14px;line-height:1;padding:2px 5px;border-radius:6px;flex:0 0 auto;margin-top:1px;opacity:.55;transition:opacity .12s,color .12s;}
  .nt-task .edit:hover{opacity:1;color:var(--accent);}
  /* Inline edit input when a task's ✎ pen is clicked */
  .nt-txt-edit{flex:1;min-width:0;font-family:var(--font-body);font-size:14.5px;line-height:1.45;color:var(--fg);background:var(--bg-2);border:1px solid var(--accent);border-radius:6px;padding:4px 8px;outline:none;}
  .nt-task .due{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:999px;padding:1px 7px;flex:0 0 auto;margin-top:2px;}
  .nt-task .stamp{font-family:var(--font-mono);font-size:9.5px;color:var(--fg-dim-2);flex:0 0 auto;margin-top:3px;}
  .nt-task .del{opacity:0;background:transparent;border:0;color:var(--fg-dim-2);cursor:pointer;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;flex:0 0 auto;margin-top:3px;}
  .nt-task:hover .del{opacity:1;}
  .nt-task .del:hover{color:var(--danger);}
  .nt-donehd{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);margin:14px 0 6px;display:flex;align-items:center;gap:8px;}
  .nt-donehd::after{content:'';flex:1;height:1px;background:var(--line);}

  /* ── note card (Ideas / Inbox / Projects) ── */
  .nt-card{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg-3);padding:14px 16px;margin-bottom:11px;transition:border-color .15s;}
  .nt-card:hover{border-color:var(--line-strong);}
  .nt-card.pin{border-left:2px solid var(--accent);}
  .nt-card-top{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
  .nt-card-top .stamp{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-dim-2);}
  .nt-card-top .pinmark{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
  .nt-card-acts{margin-left:auto;display:flex;gap:4px;}
  .nt-act{background:transparent;border:0;color:var(--fg-dim-2);cursor:pointer;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:5px;}
  .nt-act:hover{color:var(--fg);background:rgba(255,255,255,.05);}
  .nt-act svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.7;}
  .nt-act.on{color:var(--accent);}
  .nt-act.del:hover{color:var(--danger);}
  .nt-card-body{font-size:14.5px;line-height:1.6;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere;}
  /* inline task lines parsed from a note body */
  .nt-inline{display:flex;align-items:flex-start;gap:9px;padding:4px 0;}
  .nt-inline .txt{font-size:14px;line-height:1.45;}
  .nt-att{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;}
  .nt-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;text-decoration:none;color:var(--fg);background:var(--bg-2);}
  .nt-chip:hover{border-color:var(--accent);}
  .nt-chip svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.5;flex:0 0 auto;}
  .nt-chip .fn{font-family:var(--font-mono);font-size:10.5px;}
  .nt-chip .ft{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);}

/* Wave-2 notes — de-green (.nt success accent -> amber) + mobile single-column.
   (.nt-empty already defined above in the F5 block; the handoff .nt-m chip layout
   is not shipped, so collapse the two-pane catalogue to a stack on phones.) */
.nt { --ok: var(--accent); }
@media (max-width: 760px){
  .nt-cat{grid-template-columns:1fr;min-height:0;}
  .nt-list{border-right:0;border-bottom:1px solid var(--line);}
  .nt-scroll{max-height:300px;}
  .nt-detail{min-height:0;scroll-margin-top:12px;}  /* notes.js scrolls here after a folder tap */
  /* Todo rows are cramped on a phone — drop the timestamp (it eats width), tighten
     spacing, and keep edit/delete reachable since there's no hover on touch. */
  .nt-task{gap:9px;padding:9px 4px;}
  .nt-task .stamp{display:none;}
  .nt-task .del,.nt-task .edit{opacity:1;}
}

/* Long, unbroken project names (e.g. a client's product code) were forcing the
   mobile layout wider than the viewport and skewing alignment everywhere the name
   shows. Let long words break instead of pushing the page, and stop any stray
   horizontal overflow on phones. */
.page-head h2, .pdx-id h2, .nt-rname, .cu-name, .kc-body .name,
.proj-bcard-name, .proj-acard-name, .trk2-printer { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 760px){ body { overflow-x: hidden; } }

/* ── Structural long-text guard (supersedes the per-element allowlist above) ──
   Long unbroken strings — product codes, emails, long names — were skewing
   alignment "almost everywhere, in pipeline also": as a flex/grid child's
   min-content they refused to shrink and forced the layout wider than its column.
   `overflow-wrap` is an INHERITED property, so one declaration on the content area
   cascades to every text node and shrinks that min-content to a single glyph — the
   child wraps instead of pushing siblings out of alignment. It is non-destructive:
   it only breaks a word that would otherwise overflow, and never overrides an
   intentional white-space:nowrap / text-overflow:ellipsis truncation. This kills
   the whole class of bug in one rule (incl. the pipeline kanban cards' customer
   line, the inbox inquiry cards, and table cells the allowlist kept missing). */
#main { overflow-wrap: anywhere; }
.kanban-card .row { min-width: 0; }   /* let the VAL/DUE value cell shrink + wrap */

/* ============================================================
   Wave-2 fix — anchor-based tiles/rows/cards must never show the
   browser's default link underline (blue). The handoff set
   text-decoration:none on most card anchors but missed the status
   tiles, funnel rail rows, SLA tiles, outstanding hero and folder
   rows. Reset underlines across the namespaces (the design uses
   colour/borders for affordance, not underlines) and give the bare
   tile anchors color:inherit so no default-blue text leaks through.
   ============================================================ */
.f2 a, .jb a, .ib a, .cu a, .cd a, .nt a { text-decoration: none; }
.f2-tile, .jb-srow, .ib-sla, .cu-out, .nt-row { color: inherit; }


/* ========================================================================
   PRINTER-DETAIL TAB REDESIGN (.px2-*) — ported from design_handoff_printer_tabs
   ======================================================================== */
/* ============================================================================
   redesign-printer-tabs.css — Printer-detail INNER TAB content (.px2-*)
   Additive: paste into admin.css. The wave-1 SHELL classes (.pdx-id, .pdx-split,
   .pdx-rail, .rail-mini, .tabs, .tab, and .pd-card on Overview) are unchanged
   and NOT redefined here — these rules style only the redesigned panel interiors.
   Tokens from admin.css: --bg,--bg-2/3/4,--fg,--fg-dim,--fg-dim-2,--line,
   --line-strong,--accent,--accent-deep(rust),--font-display/-body/-mono.
   ============================================================================ */

.px2{--rust:var(--accent-deep,#964737);--rust-soft:color-mix(in srgb,var(--accent-deep,#964737) 16%,transparent);
     --danger:#ff6b6b;--danger-soft:color-mix(in srgb,#ff6b6b 12%,transparent);
     --amber-soft:color-mix(in srgb,var(--accent) 12%,transparent);}

.px2{--rust:#964737;--rust-soft:color-mix(in srgb,#964737 16%,transparent);
       --danger:#ff6b6b;--danger-soft:color-mix(in srgb,#ff6b6b 12%,transparent);
       --amber-soft:color-mix(in srgb,var(--accent) 12%,transparent);}
.px2 .mono{font-family:var(--font-mono);}
.px2-eb{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);}
.px2-card{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);overflow:hidden;}
.px2-sec{border-bottom:1px solid var(--line);}
.px2-sec:last-child{border-bottom:0;}
.px2-sech{display:flex;align-items:center;gap:10px;padding:15px 20px 0;}
.px2-sech .t{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);}
.px2-sech .ct{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim-2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;}
.px2-sech .badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 8px;}
.px2-sech .badge.warn{color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--amber-soft);}
.px2-sech .badge.alert{color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 50%,var(--line));background:var(--danger-soft);}
.px2-sech .spacer{margin-left:auto;}
.px2-note{padding:8px 20px 0;font-size:12px;line-height:1.55;color:var(--fg-dim-2);max-width:62ch;}
.px2-secbody{padding:12px 0 6px;}
.px2-empty{padding:14px 20px;color:var(--fg-dim-2);font-size:12.5px;}
.px2-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid var(--line);}
.px2-secbody > .px2-row:first-child{border-top:0;}
.px2-row .nm{font-size:14px;color:var(--fg);}
.px2-row .sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-dim-2);margin-top:3px;}
.px2-row .grow{flex:1;min-width:0;}
.px2-row .when{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-dim-2);white-space:nowrap;}
.px2-row.edge{border-left:2px solid transparent;}
.px2-row.edge.due{border-left-color:var(--accent);}
.px2-row.edge.overdue{border-left-color:var(--rust);background:var(--rust-soft);}
.px2-wear{display:flex;flex-direction:column;gap:6px;flex:0 0 200px;}
.px2-wear .lab{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-dim);}
.px2-wear .lab .st{text-transform:uppercase;letter-spacing:.12em;font-size:9px;}
.px2-wear.due .lab .st{color:var(--accent);}
.px2-wear.overdue .lab .st{color:var(--rust);}
.px2-bar{height:6px;border-radius:3px;background:var(--bg-4);overflow:hidden;}
.px2-bar > span{display:block;height:100%;border-radius:3px;background:var(--fg-dim);}
.px2-wear.due .px2-bar > span{background:var(--accent);}
.px2-wear.overdue .px2-bar > span{background:var(--rust);}
.px2-state{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid var(--line-strong);color:var(--fg-dim-2);white-space:nowrap;}
.px2-state.due{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.px2-state.overdue{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 60%,var(--line));background:var(--rust-soft);}
.px2-state.minor{color:var(--fg-dim);}
.px2-state.major{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,var(--line));background:var(--danger-soft);}
.px2-state.resolved{color:var(--fg-dim-2);}
.px2-mb{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);
      background:transparent;border:1px solid var(--line-strong);border-radius:6px;cursor:pointer;padding:6px 10px;white-space:nowrap;transition:all .15s;}
.px2-mb:hover{color:var(--accent);border-color:var(--accent);}
.px2-mb.done{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.px2-mb.del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,var(--line));}
.px2-proc{margin:10px 20px;border:1px solid var(--line);border-radius:10px;background:var(--bg-3);overflow:hidden;}
.px2-proc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 15px;}
.px2-proc summary::-webkit-details-marker{display:none;}
.px2-proc .pn{font-size:13.5px;color:var(--fg);}
.px2-proc .pm{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-dim-2);}
.px2-proc .chev{margin-left:auto;color:var(--fg-dim-2);font-family:var(--font-mono);transition:transform .2s;}
.px2-proc[open] .chev{transform:rotate(90deg);}
.px2-steps{list-style:none;margin:0;padding:0 15px 6px;}
.px2-steps li{padding:4px 0;}
.px2-step{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--fg-dim);cursor:pointer;}
.px2-step input{margin-top:3px;accent-color:var(--accent);}
.px2-procfin{display:flex;gap:8px;padding:10px 15px 14px;border-top:1px solid var(--line);}
.px2-procfin input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--fg);font-family:var(--font-body);font-size:14px;padding:8px 11px;outline:none;}
.px2-pool{padding:6px 20px 12px;display:flex;flex-direction:column;gap:8px;}
.px2-poolrow{display:flex;align-items:center;gap:13px;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg-3);padding:11px 14px;}
.px2-poolrow .ico{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;color:var(--fg-dim);}
.px2-poolrow .ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;}
.px2-poolrow .pk{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);}
.px2-poolrow .ps{font-size:13.5px;color:var(--fg);margin-top:2px;}
.px2-poolrow .cnt{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line);border-radius:999px;padding:3px 9px;}
.px2-form{border-top:1px solid var(--line);}
.px2-form > summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);padding:13px 20px;display:flex;align-items:center;gap:8px;}
.px2-form > summary::-webkit-details-marker{display:none;}
.px2-form > summary:hover{color:var(--accent);}
.px2-form[open] > summary{color:var(--accent);}
.px2-fields{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:2px 20px 18px;}
.px2-fields input,.px2-fields select,.px2-fields textarea{flex:1;min-width:130px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:15px;padding:9px 11px;outline:none;}
.px2-fields input:focus,.px2-fields select:focus,.px2-fields textarea:focus{border-color:var(--accent);}
.px2-fields textarea{flex-basis:100%;resize:vertical;}
.px2-comp{margin:14px 20px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg-3);}
.px2-comp:focus-within{border-color:var(--accent);}
.px2-comp textarea{width:100%;min-height:54px;resize:vertical;background:none;border:0;outline:none;color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.55;padding:12px 14px;box-sizing:border-box;}
.px2-comp-foot{display:flex;justify-content:flex-end;padding:8px 11px 9px;border-top:1px solid var(--line);}
/* display:block overrides the legacy `.pn-row{display:flex}` compat rule kept on
   this card — the note header must stack ABOVE the body, not sit beside it. */
.px2-ncard{display:block;margin:0 20px;border-bottom:1px solid var(--line);padding:13px 0;}
.px2-ncard:last-of-type{border-bottom:0;}
.px2-ncard .nh{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
.px2-ncard .nd{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-dim-2);}
.px2-ncard .nb{font-size:14px;line-height:1.6;color:var(--fg);}
.px2-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line);}
.px2-kpi{background:var(--bg-2);padding:15px 16px;}
.px2-kpi .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim-2);}
.px2-kpi .v{font-family:var(--font-mono);font-size:24px;color:var(--fg);margin-top:8px;line-height:1;}
.px2-kpi .sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--fg-dim-2);margin-top:5px;}
.px2-eg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:16px 20px;}
.px2-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.px2-field .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);}
.px2-field input,.px2-field select{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:15px;padding:9px 11px;outline:none;width:100%;}
.px2-field input:focus,.px2-field select:focus{border-color:var(--accent);}
.px2-eg-actions{display:flex;gap:10px;padding:4px 20px 18px;}
.px2-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:8px;cursor:pointer;border:1.5px solid var(--accent);background:var(--accent);color:#0c0c0d;}
.px2-btn.ghost{background:transparent;color:var(--accent);}
.px2-btn.danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 50%,var(--line));color:var(--danger);}
/* Mobile: the wave-1 shell (.pdx-split/.pdx-rail/.tabs) already owns its own
   responsive layout; these target only the redesigned .px2-* tab interiors.
   The prototype faked mobile with a .px2-m frame class — production uses a real
   media query at admin.css's 760px breakpoint. */
@media (max-width: 760px){
  .px2-row{flex-wrap:wrap;}
  .px2-wear{flex-basis:100%;}
  .px2-kpis{grid-template-columns:1fr 1fr;}
  .px2-eg{grid-template-columns:1fr;}
}

/* ★ NEW: editable per-part low-stock threshold (PATCH /api/spare-parts/:id) */
.px2-thresh{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim-2);white-space:nowrap;}
.px2-thresh input{width:46px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--fg);font-family:var(--font-mono);font-size:11px;padding:4px 6px;text-align:center;outline:none;}
.px2-thresh input:focus{border-color:var(--accent);}
/* on-printer files search box */
.px2-fsearch{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:14px;padding:8px 11px;outline:none;}
.px2-fsearch::placeholder{color:var(--fg-dim-2);}
.px2-fsearch:focus{border-color:var(--accent);}
/* on-printer file preview thumbnails (lazy-loaded from the file's embedded PNG) */
.pd-thumb{flex:0 0 auto;width:40px;height:40px;border-radius:7px;border:1px solid var(--line);background:var(--bg-3);display:grid;place-items:center;overflow:hidden;}
.pd-thumb .ext{font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;color:var(--fg-dim-2);}
.pd-thumb img{display:none;width:100%;height:100%;object-fit:contain;}
.pd-thumb.has{background:#0e0e10;}
.pd-thumb.has img{display:block;}
.pd-thumb.has .ext{display:none;}
/* AMS state card in the printer-detail rail (live trays + AMS 2 Pro humidity/temp) */
.rail-ams{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:13px 14px;}
.rail-ams .ams-title{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:11px;}
.rail-ams .ams-unit + .ams-unit{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.rail-ams .ams-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.rail-ams .ams-name{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);}
.rail-ams .ams-hum{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-dim-2);}
.rail-ams .ams-temp{margin-left:auto;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);}
.rail-ams .ams-trays{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.rail-ams .ams-tray{border:1px solid var(--line);border-radius:8px;background:var(--bg-3);padding:8px 5px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0;}
.rail-ams .ams-tray.on{border-color:var(--accent);}
.rail-ams .ams-tray.empty{opacity:.45;}
.rail-ams .ams-tray .sw{display:block;width:100%;height:26px;border-radius:8px 8px 0 0;border:1px solid rgba(0,0,0,.25);}
.rail-ams .ams-tmat{font-size:9px;letter-spacing:.02em;color:var(--fg);overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap;}
.rail-ams .ams-trem{font-size:8.5px;color:var(--fg-dim-2);}
.rail-ams .ams-btn{margin-top:3px;font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);background:transparent;border:1px solid var(--line-strong);border-radius:5px;padding:3px 7px;cursor:pointer;transition:all .12s;}
.rail-ams .ams-btn:hover{color:var(--accent);border-color:var(--accent);}
.rail-ams .ams-tray.on .ams-btn{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.rail-ams .ams-dry{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.rail-ams .ams-dry-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim-2);margin-right:auto;}
.rail-ams .ams-dry-lbl.on{color:var(--accent);}
.rail-ams .ams-raw{margin-top:10px;}
.rail-ams .ams-raw summary{font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim-2);cursor:pointer;}
.rail-ams .ams-raw pre{margin:6px 0 0;max-height:170px;overflow:auto;font-family:var(--font-mono);font-size:8.5px;line-height:1.5;color:var(--fg-dim);white-space:pre-wrap;word-break:break-all;}
.rail-ams .ams-tray.empty .sw{background:repeating-linear-gradient(45deg,#0000,#0000 4px,rgba(255,255,255,.06) 4px,rgba(255,255,255,.06) 8px);}
.rail-ams .ams-tray.on{outline:2px solid var(--accent,#4da3ff);outline-offset:1px;border-radius:9px;}
.rail-ams .ams-bar{display:block;width:100%;height:4px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:3px;}
.rail-ams .ams-bar i{display:block;height:100%;background:var(--accent,#4da3ff);border-radius:2px;}
.rail-ams .ams-ext{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-top:8px;border:1px dashed rgba(255,255,255,.18);border-radius:8px;}
.rail-ams .ams-ext .sw{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25);}

/* Multi-colour print mapping dialog (.amsmap-*) */
.amsmap-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; z-index:1000; padding:16px; }
.amsmap-card { background:var(--panel, #1b1e24); color:inherit; border-radius:14px; padding:18px; width:min(460px,96vw); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.amsmap-card h3 { margin:0 0 12px; }
.amsmap-row { display:grid; grid-template-columns:20px 1fr 18px 1fr auto; align-items:center; gap:8px; margin:8px 0; }
.amsmap-row .sw { width:18px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.3); }
.amsmap-sel { min-width:0; }
.amsmap-hint { font-size:12px; opacity:.7; }
.amsmap-hint.ok { color:#4caf7d; opacity:1; }
.amsmap-warn { font-size:12px; opacity:.8; margin:12px 0 8px; }
.amsmap-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }


/* ========================================================================
   TRACKING REDESIGN (.trk2-*) — ported from design_handoff_tracking
   ======================================================================== */
/* ============================================================================
   redesign-tracking.css — Tracking live-monitor (.trk2-*)
   Additive: paste into admin.css. References admin.css tokens: --bg,--bg-2/4,
   --fg,--fg-dim,--fg-dim-2,--line,--line-strong,--accent,--accent-deep,
   --font-display/-body/-mono. The .trk2-* namespace supersedes the old .trk-*
   block; remove the old .trk-section/.trk-card/.trk-chip rules once migrated.
   ============================================================================ */

.trk2{--rust:var(--accent-deep,#964737);--rust-soft:color-mix(in srgb,var(--accent-deep,#964737) 16%,transparent);
        --amber-soft:color-mix(in srgb,var(--accent) 12%,transparent);--printing:#e8c14a;}
  .trk2 .eb{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px;}
  .trk2 .eb::before{content:'';width:22px;height:1.5px;background:var(--accent);display:inline-block;}

  /* ── capacity rail ── */
  .trk2-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px;}
  .trk2-tile{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;position:relative;}
  .trk2-tile .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim-2);display:flex;align-items:center;gap:7px;}
  .trk2-tile .k .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-dim-2);}
  .trk2-tile .v{font-family:var(--font-mono);font-weight:500;font-size:38px;line-height:1;color:var(--fg);margin-top:13px;letter-spacing:-.01em;}
  .trk2-tile .s{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--fg-dim-2);margin-top:9px;text-transform:uppercase;}
  .trk2-tile.printing .k .dot{background:var(--printing);}
  .trk2-tile.printing .v{color:var(--printing);}
  .trk2-tile.idle .k .dot{background:var(--accent);}
  .trk2-tile.idle .v{color:var(--accent);}
  .trk2-tile.offline{border-color:var(--rust);background:var(--rust-soft);}
  .trk2-tile.offline .k .dot{background:var(--rust);}
  .trk2-tile.offline .k,.trk2-tile.offline .v{color:var(--rust);}

  /* ── section head ── */
  .trk2-sh{display:flex;align-items:baseline;gap:11px;margin:0 0 14px;}
  .trk2-sh h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);font-weight:500;}
  .trk2-sh .ct{font-family:var(--font-mono);font-size:11px;color:var(--fg-dim-2);}
  .trk2-sh .hint{margin-left:auto;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim-2);}
  .trk2-block{margin-bottom:30px;}

  /* ── live print cards (hero) ── */
  .trk2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;}
  .trk2-card{border:1px solid var(--line);background:var(--bg-2);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;}
  .trk2-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--printing);}
  .trk2-ctop{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px;}
  .trk2-printer{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--fg);text-decoration:none;line-height:1.05;}
  .trk2-printer:hover{color:var(--accent);}
  .trk2-state{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--printing);border:1px solid color-mix(in srgb,var(--printing) 45%,var(--line));border-radius:999px;padding:3px 9px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
  .trk2-state .pulse{width:6px;height:6px;border-radius:50%;background:var(--printing);}

  /* big progress + ETA */
  .trk2-prog{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:9px;}
  .trk2-pct{font-family:var(--font-mono);font-weight:500;font-size:32px;line-height:.9;color:var(--fg);letter-spacing:-.01em;}
  .trk2-eta{display:inline-flex;flex-direction:column;align-items:flex-end;text-align:right;}
  .trk2-eta .done{display:block;font-family:var(--font-mono);font-size:15px;color:var(--fg);white-space:nowrap;}
  .trk2-eta .rem{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim-2);margin-top:3px;white-space:nowrap;}
  .trk2-bar{height:8px;border-radius:5px;background:var(--bg-4);overflow:hidden;margin-bottom:15px;}
  .trk2-bar > span{display:block;height:100%;border-radius:5px;background:var(--printing);transition:width .4s;}

  /* job + spool footer */
  .trk2-job{padding-top:14px;border-top:1px solid var(--line);}
  .trk2-proj{font-size:14px;color:var(--fg);text-decoration:none;display:block;}
  .trk2-proj:hover{color:var(--accent);}
  .trk2-jrow{display:flex;align-items:center;gap:10px;margin-top:8px;}
  .trk2-file{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-dim-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .trk2-spool{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;}
  .trk2-sw{width:11px;height:11px;border-radius:3px;border:1px solid var(--line-strong);flex:0 0 auto;}
  .trk2-temps{display:flex;gap:14px;margin-top:11px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-dim-2);}
  .trk2-temps span{white-space:nowrap;}
  .trk2-temps b{color:var(--fg-dim);font-weight:500;}

  /* ── queue ── */
  .trk2-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);}
  .trk2-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);}
  .trk2-row:last-child{border-bottom:0;}
  .trk2-qpos{font-family:var(--font-mono);font-size:11px;color:var(--fg-dim-2);width:18px;flex:0 0 auto;}
  .trk2-qstatus{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;flex:0 0 auto;}
  .trk2-qstatus.queued{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
  .trk2-qstatus.started{color:var(--printing);border-color:color-mix(in srgb,var(--printing) 45%,var(--line));}
  .trk2-qstatus.stranded{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 55%,var(--line));background:var(--rust-soft);}
  .trk2-qfile{font-family:var(--font-mono);font-size:13px;color:var(--fg);text-decoration:none;}
  .trk2-qfile:hover{color:var(--accent);}
  .trk2-qproj{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-dim-2);text-decoration:none;}
  .trk2-qproj:hover{color:var(--accent);}
  .trk2-qprinter{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-dim);text-decoration:none;white-space:nowrap;}
  .trk2-qprinter:hover{color:var(--accent);}

  /* ── capacity (printers) ── */
  .trk2-caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
  .trk2-cap{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--bg-2);border-radius:11px;padding:13px 15px;text-decoration:none;color:var(--fg);transition:border-color .15s,transform .12s;}
  .trk2-cap:hover{border-color:var(--line-strong);transform:translateY(-1px);}
  .trk2-cap .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
  .trk2-cap .nm{font-size:13.5px;color:var(--fg);}
  .trk2-cap .st{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);}
  .trk2-cap.free{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}
  .trk2-cap.free .dot{background:var(--accent);}
  .trk2-cap.free .st{color:var(--accent);}
  .trk2-cap.free .free-cta{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:6px;padding:4px 9px;}
  .trk2-cap.busy .dot{background:var(--printing);}
  .trk2-cap.offline{opacity:.62;border-style:dashed;}
  .trk2-cap.offline .dot{background:var(--rust);}
  .trk2-cap.offline .st{color:var(--rust);}

  /* idle empty state */
  .trk2-allbusy{border:1px dashed var(--line-strong);border-radius:11px;padding:14px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim-2);}

  /* ── mobile (prototype used a .trk2-m frame; production = real media query) ── */
@media (max-width: 760px){
  .trk2-rail{grid-template-columns:1fr 1fr;gap:10px;}
  .trk2-tile .v{font-size:30px;}
  .trk2-grid{grid-template-columns:1fr;}
  .trk2-caps{grid-template-columns:1fr;}
  .trk2-row{flex-wrap:wrap;gap:9px;}
  .trk2-qprinter{flex-basis:100%;margin-left:28px;}
}

/* ── Farm camera wall (collapsible) + lightbox ───────────────────────────── */
.f2-cams { margin-top: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.f2-cams > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; }
.f2-cams > summary::-webkit-details-marker { display: none; }
.f2-cams > summary .ct { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--fg); }
.f2-cams > summary .ct .n { color: var(--fg-dim-2); }
.f2-cams > summary .hint { font-size: 11px; color: var(--fg-dim-2); }
.cam-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; padding: 0 14px 14px; }
.cam-tile { position: relative; margin: 0; background: #000; border: 1px solid var(--line-strong);
  aspect-ratio: 16 / 9; overflow: hidden; cursor: zoom-in; }
.cam-tile .cam-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .2s; }
.cam-tile.on .cam-img { opacity: 1; }
.cam-tile .cam-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg-dim-2); }
.cam-tile.on .cam-ph { display: none; }
.cam-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px;
  font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7));
  display: flex; align-items: center; gap: 6px; }
.cam-tile figcaption .badge { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em;
  text-transform: uppercase; padding: 1px 4px; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; }
.cam-empty { padding: 0 16px 14px; color: var(--fg-dim); font-size: 12.5px; }
.cam-manage { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.cam-manage.plug-manage { border-top: 1px solid var(--line); padding-top: 12px; }
.plug-manage .plug-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim-2); }
.cam-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cam-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cam-list li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.cam-list .nm { font-weight: 500; }
.cam-list .nm .off { color: var(--fg-dim-2); font-size: 10px; }
.cam-list .ip { color: var(--fg-dim); font-size: 11px; }
.cam-list li [data-cam-edit] { margin-left: auto; }
.cam-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px; }
.cam-lightbox img { max-width: 96vw; max-height: 86vh; object-fit: contain; }
.cam-lb-cap { margin-top: 10px; color: #fff; font-family: var(--font-mono); font-size: 13px; }

/* ── Farm "Service & supplies" — three uniform cards ────────────────────── */
.f2-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.f2-svc-card { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--bg-2); color: inherit;
  text-decoration: none; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.f2-svc-card:hover, .f2-svc-card.open { border-color: var(--accent); }
.f2-svc-card.warn { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-2)); }
.f2-svc-card .ic { flex: none; width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); color: var(--fg-dim); }
.f2-svc-card .ic .ico { width: 18px; height: 18px; }
.f2-svc-card .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.f2-svc-card .bd .t { font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: var(--fg); line-height: 1.2; }
.f2-svc-card .bd .s { font-size: 11.5px; color: var(--fg-dim); overflow-wrap: anywhere; }
.f2-svc-card .bd .s b { color: var(--accent); }
.f2-svc-card .cta { flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--accent); white-space: nowrap; }
.f2-detail { margin-bottom: 16px; }
@media (max-width: 760px) { .f2-svc { grid-template-columns: 1fr; } }

/* ── Notes — "Studio Gallery" redesign (2026-07-01) ─────────────────────────────
   Unified masonry card grid + filter chips + colour covers + editor overlay.
   Reuses .nt-task* for the Todo checklist. */
.ntg { --nt-amber:#d9a13a; --nt-rose:#d1687e; --nt-violet:#8f7cd8; --nt-blue:#5b8fd6; --nt-teal:#39a58f; --nt-slate:#818c99; position:relative; }
.ntg .hide { display:none !important; }
/* honour the [hidden] attribute even on elements we give an explicit display
   (overlay, attach/pin/delete toggles, the hidden full-body + empty state). */
.ntg [hidden], .ntg-overlay[hidden] { display:none !important; }

.ntg-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.ntg-chips { display:flex; gap:8px; flex-wrap:wrap; flex:1; min-width:0; }
.ntg-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--bg-2); color:var(--fg-dim); font-size:13px; text-decoration:none; transition:border-color .12s,color .12s,background .12s; }
.ntg-chip .c { font-family:var(--font-mono); font-size:10px; color:var(--fg-dim-2); }
.ntg-chip:hover { color:var(--fg); border-color:var(--fg-dim); }
.ntg-chip.on { background:color-mix(in srgb,var(--accent) 16%,var(--bg-2)); border-color:var(--accent); color:var(--fg); }
.ntg-chip.on .c { color:var(--accent); }
.ntg-controls { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.ntg-search { background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:7px 11px; color:var(--fg); font-size:13px; width:190px; max-width:40vw; }
.ntg-search:focus { outline:none; border-color:var(--accent); }
.ntg-view { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex:0 0 auto; }
.ntg-view button { background:var(--bg-2); border:0; color:var(--fg-dim); min-width:38px; display:grid; place-items:center; padding:7px 0; cursor:pointer; font-size:15px; line-height:1; }
.ntg-view button + button { border-left:1px solid var(--line); }
.ntg-view button.on { background:color-mix(in srgb,var(--accent) 20%,var(--bg-2)); color:var(--fg); }
.ntg-sort { background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:6px 9px; color:var(--fg-dim); font-size:12px; cursor:pointer; flex:0 0 auto; }

.ntg-grid { column-count:4; column-gap:14px; }
@media (max-width:1400px){ .ntg-grid{ column-count:3; } }
@media (max-width:1024px){ .ntg-grid{ column-count:2; } }
@media (max-width:620px){ .ntg-grid{ column-count:1; } }

.ntg-card { display:block; break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 14px; padding:0 0 10px;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-2); cursor:pointer; overflow:hidden;
  transition:border-color .12s, transform .08s, box-shadow .12s; }
.ntg-card:hover { border-color:var(--fg-dim); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.18); }
.ntg-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ntg-cover { display:none; height:6px; background:var(--cover,transparent); }
.ntg-card[data-color]:not([data-color=""]) .ntg-cover { display:block; }
.ntg-card[data-color]:not([data-color=""]) { background:color-mix(in srgb, var(--cover) 9%, var(--bg-2)); border-color:color-mix(in srgb, var(--cover) 30%, var(--line)); }
.ntg-card.c-amber{--cover:var(--nt-amber);} .ntg-card.c-rose{--cover:var(--nt-rose);} .ntg-card.c-violet{--cover:var(--nt-violet);}
.ntg-card.c-blue{--cover:var(--nt-blue);} .ntg-card.c-teal{--cover:var(--nt-teal);} .ntg-card.c-slate{--cover:var(--nt-slate);}
.ntg-thumb { margin:0 0 2px; } .ntg-thumb img { width:100%; display:block; max-height:220px; object-fit:cover; }
.ntg-cbody { padding:12px 13px 6px; }
.ntg-ctitle { font-weight:600; font-size:14.5px; line-height:1.35; color:var(--fg); overflow-wrap:anywhere; }
.ntg-cprev { margin-top:5px; font-size:13px; line-height:1.5; color:var(--fg-dim); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.ntg-cfoot { display:flex; align-items:center; gap:8px; padding:2px 13px 0; }
.ntg-cstamp { font-family:var(--font-mono); font-size:9.5px; color:var(--fg-dim-2); flex:1; min-width:0; }
.ntg-ctag { font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim-2);
  border:1px solid var(--line); border-radius:999px; padding:1px 7px; flex:0 0 auto; }
.ntg-ctag.folder { text-transform:capitalize; }
/* Colour-coded card labels: distinct hue per kind (project id + each folder). */
.ntg-ctag.proj    { color:var(--accent);    border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ntg-ctag.f-ideas { color:var(--nt-amber);  border-color:color-mix(in srgb, var(--nt-amber) 50%, var(--line)); }
.ntg-ctag.f-todo  { color:var(--nt-blue);   border-color:color-mix(in srgb, var(--nt-blue) 50%, var(--line)); }
.ntg-ctag.f-inbox { color:color-mix(in srgb, var(--nt-slate) 75%, var(--fg)); border-color:color-mix(in srgb, var(--nt-slate) 60%, var(--line)); }

/* due chips (cards + todo rows) — amber today, rose overdue */
.ntg-cdue { font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; color:var(--fg-dim-2);
  border:1px solid var(--line); border-radius:999px; padding:1px 7px; white-space:nowrap; }
.ntg-cdue.today { color:var(--nt-amber); border-color:color-mix(in srgb, var(--nt-amber) 50%, var(--line)); }
.ntg-cdue.over  { color:var(--nt-rose);  border-color:color-mix(in srgb, var(--nt-rose) 55%, var(--line)); }
.nt-due { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:9.5px;
  color:var(--fg-dim-2); background:none; border:1px solid var(--line); border-radius:999px; padding:2px 8px;
  cursor:pointer; white-space:nowrap; }
.nt-due.today { color:var(--nt-amber); border-color:color-mix(in srgb, var(--nt-amber) 50%, var(--line)); }
.nt-due.over  { color:var(--nt-rose);  border-color:color-mix(in srgb, var(--nt-rose) 55%, var(--line)); }
.nt-task.done .nt-due { opacity:.5; }
.nt-due-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 10px 10px 40px; }
.nt-due-row input, .ntg-due input { font:inherit; background:transparent; color:var(--fg);
  border:1px solid var(--line); border-radius:8px; padding:4px 8px; color-scheme:dark light; }
.ntg-due { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.ntg-due .lbl { font-size:11px; color:var(--fg-dim-2); text-transform:uppercase; letter-spacing:.06em; }
.ntg-cpin { color:var(--accent); display:inline-flex; } .ntg-cpin svg{ width:12px; height:12px; }

.ntg-grid.list { column-count:1; }
.ntg-grid.list .ntg-card { display:flex; align-items:stretch; }
.ntg-grid.list .ntg-cover { display:none; }
.ntg-grid.list .ntg-card[data-color]:not([data-color=""]) { border-left:4px solid var(--cover); }
.ntg-grid.list .ntg-thumb { flex:0 0 94px; align-self:center; padding:8px 0 8px 10px; }
.ntg-grid.list .ntg-thumb img { width:84px; height:64px; border-radius:8px; }
.ntg-grid.list .ntg-cbody { flex:1; }
.ntg-grid.list .ntg-cprev { -webkit-line-clamp:2; }
.ntg-grid.list .ntg-cfoot { flex:0 0 auto; flex-direction:column; align-items:flex-end; justify-content:center; padding:10px 13px; gap:4px; }
.ntg-grid.list .ntg-cstamp { flex:0 0 auto; }

.ntg-empty { color:var(--fg-dim-2); font-size:13px; padding:30px 4px; }

.ntg-checklist { max-width:720px; }
.ntg-taskcomp { display:flex; gap:8px; margin-bottom:14px; }
.ntg-taskinput { flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:9px 12px; color:var(--fg); font-size:14px; }
.ntg-taskinput:focus { outline:none; border-color:var(--accent); }

.ntg-fab { position:fixed; right:26px; bottom:26px; width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:#0c0c0d; font-size:28px; line-height:1; display:grid; place-items:center; z-index:40;
  box-shadow:0 8px 26px rgba(0,0,0,.34); transition:transform .1s; }
.ntg-fab:hover { transform:scale(1.06); }

body.ntg-modal-open { overflow:hidden; }
.ntg-overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; }
.ntg-overlay[hidden] { display:none; }
.ntg-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.ntg-sheet { position:relative; width:min(560px,100%); background:var(--bg-2); border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.ntg-editor { display:flex; flex-direction:column; gap:14px; padding:18px; }
.ntg-editor textarea { width:100%; resize:vertical; min-height:170px; background:var(--bg-1,var(--bg-2)); border:1px solid var(--line); border-radius:10px;
  padding:12px 13px; color:var(--fg); font-family:var(--font-body); font-size:15px; line-height:1.55; }
.ntg-editor textarea:focus { outline:none; border-color:var(--accent); }
.ntg-swatches { display:flex; gap:9px; flex-wrap:wrap; }
.ntg-sw { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); cursor:pointer; padding:0; }
.ntg-sw.on { box-shadow:0 0 0 2px var(--bg-2), 0 0 0 4px var(--accent); }
.ntg-sw.c-none { background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--fg-dim-2) 4px,var(--fg-dim-2) 5px); }
.ntg-sw.c-amber{background:var(--nt-amber);} .ntg-sw.c-rose{background:var(--nt-rose);} .ntg-sw.c-violet{background:var(--nt-violet);}
.ntg-sw.c-blue{background:var(--nt-blue);} .ntg-sw.c-teal{background:var(--nt-teal);} .ntg-sw.c-slate{background:var(--nt-slate);}
.ntg-editor-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ntg-editor-left { display:flex; align-items:center; gap:6px; }
.ntg-editor-right { display:flex; align-items:center; gap:8px; }
.ntg-attach, .ntg-pin, .ntg-del { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:7px 11px; color:var(--fg-dim); cursor:pointer; font-size:12.5px; }
.ntg-attach svg, .ntg-pin svg, .ntg-del svg { width:14px; height:14px; }
.ntg-attach:hover, .ntg-pin:hover { color:var(--fg); border-color:var(--fg-dim); }
.ntg-pin.on { color:var(--accent); border-color:var(--accent); }
.ntg-del:hover { color:var(--danger); border-color:var(--danger); }

@media (max-width:760px){
  .ntg-controls { width:100%; }
  .ntg-search { flex:1; max-width:none; min-width:0; }
  .ntg-fab { right:16px; bottom:calc(64px + 16px + env(safe-area-inset-bottom, 0px)); }
  .ntg-sheet { width:100%; }
  /* Note editor on phones: Attach/Pin/Delete become icon-only (label kept for
     screen readers via visually-hidden) so the footer never overflows to a
     second row in edit mode; Cancel/Save stay on one line. */
  .ntg-pin .lbl, .ntg-del .lbl, .ntg-attach span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ntg-pin, .ntg-del, .ntg-attach { gap:0; padding:8px; }
  .ntg-cancel, .ntg-savebtn { white-space:nowrap; }
}

/* Pending multi-colour mapping banner (printer detail) */
.pd-pending-map { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; border:1px solid rgba(255,180,60,.45); background:rgba(255,180,60,.10); border-radius:10px; }
.pd-pending-txt { flex:1 1 auto; min-width:0; }
.pd-pending-acts { display:flex; gap:8px; flex:0 0 auto; }

/* Settings · Hours tab */
.wh-days { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 6px 0 10px; }
.wh-days label { display: inline-flex; align-items: center; gap: 5px; }

/* Time log card (project estimate tab) */
.tlg-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.tlg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tlg-note { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlg-kind { border: 1px solid var(--line, #444); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.tlg-del { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; }
.tlg-del:hover { opacity: 1; }
.tlg-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tlg-totals { opacity: .8; margin-bottom: 4px; }
.est-logged { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; opacity: .85; }

/* ========================================================================
   PRINTER-DETAIL FULL-PAGE REDESIGN (.px3-*) — ported from
   design_handoff_printer_detail. Owns the whole page: identity header,
   sticky rail (camera, live+controls), pending banner, mapping dialog and
   every tab. Namespaced .px3-*; the custom properties are scoped to .px3
   (the page root), NOT :root.
   Deviations from the designer bundle (see handoff README):
   · AMS card is FROZEN — renderAms() keeps the legacy .ams- and .rail-ams
     classes and rules (owner's wish); the bundle's .px3-ams / .px3-tray /
     .px3-dry / .px3-ext blocks were deliberately NOT pasted.
   · Speed control keeps the shipped Bambu-only contract (data-speed-ctl,
     numeric levels 1..4 via /control print_speed) — px3 look only.
   · Bell keeps the shipped .pj-bell/.on contract — px3 look layered on.
   ======================================================================== */

.px3{
  --warn:#e0922e; --danger:#ff6b6b;
  --rust:var(--accent-deep); --rust-soft:color-mix(in srgb,var(--accent-deep) 16%,transparent);
  --warn-soft:color-mix(in srgb,var(--warn) 14%,transparent);
  --danger-soft:color-mix(in srgb,var(--danger) 12%,transparent);
  --amber-soft:color-mix(in srgb,var(--accent) 12%,transparent);
}

/* ── identity header ── */
.px3-id{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.px3-id .top{display:flex;align-items:center;gap:10px;}
.px3-id h2{font-family:var(--font-display);font-weight:600;font-size:38px;letter-spacing:-.03em;line-height:.98;margin-top:10px;}
.px3-id .meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--fg-dim);margin-top:10px;}
.px3-id .meta b{color:var(--fg);font-weight:500;}
.px3 .eyebrow{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.px3-actions{display:flex;gap:10px;flex-shrink:0;}
/* neutralise the global dashed full-width .btn.ghost inside the px3 shell */
.px3 .btn.ghost{width:auto;border:1px solid var(--line-strong);border-style:solid;background:transparent;color:var(--fg);border-radius:8px;padding:9px 15px;}
.px3 .btn.ghost:hover{border-color:var(--fg-dim);}

.px3-stpill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--fg-dim);background:var(--bg-2);}
.px3-stpill .d{width:7px;height:7px;border-radius:50%;background:currentColor;}
.px3-stpill.live{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.px3-stpill.live .d{box-shadow:0 0 0 3px var(--amber-soft);animation:px3-pulse 1.8s ease-in-out infinite;}
.px3-stpill.down{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));}
@keyframes px3-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@media (prefers-reduced-motion: reduce){.px3-stpill.live .d{animation:none;}}

/* ── split layout (pending banner is a full-width first row of the grid) ── */
.px3-split{display:grid;grid-template-columns:360px 1fr;gap:26px;align-items:start;margin-top:24px;}
.px3-rail{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-width:0;}
.px3-content{min-width:0;}
.px3-rail > .rail-ams{margin-top:0;}   /* rail gap owns the rhythm; the frozen AMS card keeps its own look */

/* ── camera hero ── */
.px3-cam{position:relative;width:100%;aspect-ratio:16/10;background:#000;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
.px3-cam img{width:100%;height:100%;object-fit:cover;display:none;position:relative;z-index:2;}
.px3-cam .noimg{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--fg-dim-2);}
.px3-cam .noimg svg{width:30px;height:30px;stroke:var(--fg-dim-2);}
.px3-cam .cap{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;}
.px3-cam .tag{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(12,12,13,.78);padding:5px 10px;border-radius:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);}
.px3-cam .tag .d{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--amber-soft);}
.px3-cam .tag.idle .d{background:var(--fg-dim-2);box-shadow:none;}
.px3-cam .time{position:absolute;bottom:10px;right:10px;z-index:3;background:rgba(12,12,13,.78);padding:4px 9px;border-radius:6px;font-family:var(--font-mono);font-size:10px;color:var(--fg-dim);}

/* ── live + controls card ── */
.px3-live{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;}
.px3-live .top{display:flex;align-items:center;gap:10px;}
.px3-live .remain{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--fg-dim);}
.px3-live .jobrow{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:16px;}
.px3-live .job{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.px3-live .pct{font-family:var(--font-mono);font-weight:500;font-size:26px;color:var(--fg);flex:0 0 auto;}
.px3-live .pbar{margin-top:12px;height:5px;border-radius:999px;background:var(--bg-4);overflow:hidden;}
.px3-live .pbar > i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease;}
.px3-live .sub{display:flex;gap:18px;margin-top:14px;font-family:var(--font-mono);font-size:11px;color:var(--fg-dim);}
.px3-live .sub b{color:var(--fg);font-weight:500;}

.px3-ctrls{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.px3-ctrls-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim-2);margin-bottom:6px;}
/* run + speed groups only while there is a live job to act on (same gating the
   legacy .rl-ctrls used); the light switch and the command chip stay visible */
.px3-ctrls .px3-cgrp{display:none;}
.px3-ctrls[data-state="printing"] .px3-cgrp,
.px3-ctrls[data-state="paused"]   .px3-cgrp{display:block;}
.px3-ctrls[data-state="printing"] [data-control="resume"],
.px3-ctrls[data-state="paused"]   [data-control="pause"]{display:none;}
.px3-run{display:flex;gap:8px;}
.px3-run button{flex:1;justify-content:center;}
.px3-speed{display:flex;align-items:center;gap:10px;}
.px3-seg{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;flex:1;width:100%;}
.px3-seg button{flex:1;padding:8px 6px;background:transparent;border:none;border-left:1px solid var(--line-strong);color:var(--fg-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.px3-seg button:first-child{border-left:none;}
.px3-seg button.on{background:var(--accent);color:#0c0c0d;font-weight:500;}
.px3-seg button:disabled{opacity:.4;cursor:not-allowed;}
.px3-light{display:flex;align-items:center;gap:10px;cursor:pointer;}
.px3-light .txt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-dim);flex:1;}
.px3-light .txt svg{width:15px;height:15px;stroke:currentColor;}
.px3-switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto;}
.px3-switch input{opacity:0;width:100%;height:100%;position:absolute;margin:0;cursor:pointer;}
.px3-switch .trk{position:absolute;inset:0;background:var(--bg-4);border:1px solid var(--line-strong);border-radius:999px;transition:background .18s;}
.px3-switch .trk::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--fg-dim);transition:transform .25s cubic-bezier(.34,1.4,.64,1),background .18s;}
.px3-switch input:checked + .trk{background:var(--amber-soft);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.px3-switch input:checked + .trk::after{transform:translateX(16px);background:var(--accent);}

/* command lifecycle chip — pending → sent/failed, inline, non-blocking */
.px3-cmd{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim-2);}
.px3-cmd[hidden]{display:none;}
.px3-cmd .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.px3-cmd.pending{color:var(--accent);}
.px3-cmd.pending .d{animation:px3-pulse 1s ease-in-out infinite;}
.px3-cmd.ok{color:var(--fg-dim);}
.px3-cmd.failed{color:var(--danger);}

/* ── health minis ── */
.px3-health{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.px3-mini{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.px3-mini .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);}
.px3-mini .v{font-family:var(--font-mono);font-weight:500;font-size:16px;color:var(--fg);line-height:1;}
.px3-mini.alert{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));}
.px3-mini.alert .v{color:var(--danger);}
.px3-mini.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));}
.px3-mini.warn .v{color:var(--warn);}

/* ── pending colour-mapping banner (full-width first grid row) ── */
.px3-pending{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r-card);padding:15px 18px;}
.px3-split > .px3-pending{grid-column:1 / -1;}
.px3-pending .txt{font-size:13.5px;color:var(--fg);flex:1;min-width:200px;}
.px3-pending .txt b{font-weight:500;}
.px3-pending .acts{display:flex;gap:8px;}

/* ── mapping dialog (JS-built; overlay root carries .px3 for the vars) ── */
.px3-mapoverlay{position:fixed;inset:0;background:rgba(12,12,13,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;}
.px3-mapcard{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-card);width:560px;max-width:100%;max-height:86vh;overflow:auto;padding:24px;}
.px3-mapcard h3{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.02em;margin:0 0 4px;}
.px3-mapcard .sub{font-size:12.5px;color:var(--fg-dim);margin-bottom:18px;}
.px3-maprow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.px3-maprow .sw{width:20px;height:20px;border-radius:5px;border:1px solid var(--line-strong);flex:0 0 auto;}
.px3-maprow .fi{font-family:var(--font-mono);font-size:11.5px;color:var(--fg-dim);flex:0 0 118px;}
.px3-maprow .arrow{color:var(--fg-dim-2);}
.px3-maprow select{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-family:var(--font-body);font-size:13px;padding:8px 10px;}
.px3-maprow .hint{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-strong);color:var(--fg-dim-2);white-space:nowrap;}
.px3-maprow .hint.ok{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.px3-mapwarn{font-size:12px;color:var(--warn);margin-top:14px;line-height:1.5;}
.px3-mapoffline{font-size:12px;color:var(--fg-dim-2);margin-top:10px;line-height:1.5;}
.px3-mapacts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
/* skip-part picker (skip_objects): checklist reusing the mapping dialog shell */
.px3-skip{display:flex;}
.px3-skiplist{margin-top:14px;display:flex;flex-direction:column;}
.px3-skiprow{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer;}
.px3-skiprow .nm{flex:1;min-width:0;font-size:13.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.px3-skiprow .px3-skipcb{width:16px;height:16px;flex:0 0 auto;accent-color:var(--danger);cursor:pointer;}
.px3-skiprow.done{cursor:default;}
.px3-skiprow.done .nm{color:var(--fg-dim-2);text-decoration:line-through;}
.px3-skiprow .tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-strong);color:var(--fg-dim-2);white-space:nowrap;}
/* skip-part visual plate map (primary view; degrades to the checklist above) */
.px3-skiphead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.px3-skiphead .px3-mb{flex:0 0 auto;}
.px3-skipbody{min-width:0;}
.px3-plate-wrap{margin-top:14px;display:flex;justify-content:center;}
.px3-plate{position:relative;width:100%;max-width:420px;min-width:0;background:var(--bg);border:1px solid var(--line-strong);border-radius:10px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:11% 11%;}
.px3-plate-obj{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0;border:1px solid var(--line-strong);border-radius:5px;background:color-mix(in srgb,var(--bg-3) 88%,transparent);color:var(--fg);font-family:var(--font-mono);font-size:10px;line-height:1.05;padding:2px;overflow:hidden;cursor:pointer;text-align:center;transition:border-color .12s,background .12s;}
.px3-plate-obj .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.px3-plate-obj:hover:not(.done):not(:disabled){border-color:var(--accent);}
.px3-plate-obj.on{background:var(--amber-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);}
.px3-plate-obj.done{cursor:default;color:var(--fg-dim-2);border-style:dashed;background:repeating-linear-gradient(135deg,var(--bg-2),var(--bg-2) 5px,transparent 5px,transparent 10px);}
.px3-plate-obj.done .lbl{text-decoration:line-through;}
.px3-platebox{min-width:0;}
.px3-platecap{margin-top:10px;font-size:11px;line-height:1.5;color:var(--fg-dim-2);text-align:center;}

/* ── tabs ── */
.px3-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.px3-tab{display:inline-flex;align-items:center;gap:7px;padding:15px 18px;min-height:48px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--fg-dim);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;margin-bottom:-1px;}
.px3-tab .ct{font-size:9.5px;background:var(--bg-3);border-radius:999px;padding:1px 7px;}
.px3-tab .ct.alert{color:var(--danger);}
.px3-tab.on{color:var(--fg);border-bottom-color:var(--accent);}
.px3-tab:hover:not(.on){color:var(--fg);}

/* ── panel card system ── */
.px3-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg-2);overflow:hidden;margin-top:22px;}
.px3-sec{border-bottom:1px solid var(--line);}
.px3-sec:last-child{border-bottom:0;}
.px3-sech{display:flex;align-items:center;gap:10px;padding:16px 20px 0;}
.px3-sech .t{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);}
.px3-sech .ct{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim-2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;}
.px3-sech .badge{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 8px;margin-left:auto;}
.px3-sech .badge.warn{color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--amber-soft);}
.px3-sech .badge.alert{color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 50%,var(--line));background:var(--danger-soft);}
.px3-note{padding:8px 20px 0;font-size:12px;line-height:1.55;color:var(--fg-dim-2);max-width:64ch;}
.px3-note a{color:var(--accent);}
.px3-secbody{padding:12px 0 6px;}
.px3-empty{padding:14px 20px;color:var(--fg-dim-2);font-size:12.5px;}
.px3-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-top:1px solid var(--line);}
.px3-secbody > .px3-row:first-child{border-top:0;}
ul > li.px3-row:first-child{border-top:0;}
.px3-row .nm{font-size:14px;color:var(--fg);}
.px3-row .sub{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--fg-dim-2);margin-top:3px;}
.px3-row .grow{flex:1;min-width:0;}
.px3-row .when{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-dim-2);white-space:nowrap;}
.px3-row.edge{border-left:2px solid transparent;}
.px3-row.edge.due{border-left-color:var(--accent);}
.px3-row.edge.overdue{border-left-color:var(--rust);background:var(--rust-soft);}
.px3-bar{height:6px;border-radius:3px;background:var(--bg-4);overflow:hidden;}
.px3-bar > span{display:block;height:100%;border-radius:3px;background:var(--fg-dim);}
.px3-state{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid var(--line-strong);color:var(--fg-dim-2);white-space:nowrap;}
.px3-state.due{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));}
.px3-state.overdue{color:var(--rust);border-color:color-mix(in srgb,var(--rust) 60%,var(--line));background:var(--rust-soft);}
.px3-state.major{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,var(--line));background:var(--danger-soft);}
.px3-state.resolved{color:var(--fg-dim-2);}
.px3-mb{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);background:transparent;border:1px solid var(--line-strong);border-radius:6px;cursor:pointer;padding:6px 10px;white-space:nowrap;}
.px3-mb:hover{color:var(--accent);border-color:var(--accent);}
.px3-mb.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--amber-soft);}
.px3-mb:disabled{opacity:.45;cursor:default;}
.px3-mb.del:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,var(--line));}
.px3-proc{margin:10px 20px;border:1px solid var(--line);border-radius:10px;background:var(--bg-3);overflow:hidden;}
.px3-proc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 15px;}
.px3-proc summary::-webkit-details-marker{display:none;}
.px3-proc .pn{font-size:13.5px;color:var(--fg);}
.px3-proc .pm{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim-2);}
.px3-proc .chev{margin-left:auto;color:var(--fg-dim-2);transition:transform .2s;}
.px3-proc[open] .chev{transform:rotate(90deg);}
.px3-steps{list-style:none;margin:0;padding:0 15px 6px;}
.px3-step{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--fg-dim);cursor:pointer;padding:4px 0;}
.px3-step input{margin-top:3px;accent-color:var(--accent);}
.px3-procfin{display:flex;gap:8px;padding:10px 15px 14px;border-top:1px solid var(--line);}
.px3-procfin input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;color:var(--fg);font-size:14px;padding:8px 11px;}
.px3-pool{padding:6px 20px 12px;display:flex;flex-direction:column;gap:8px;}
.px3-poolrow{display:flex;align-items:center;gap:13px;border:1px solid var(--line-strong);border-radius:9px;background:var(--bg-3);padding:11px 14px;}
.px3-poolrow .ico{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;color:var(--fg-dim);}
.px3-poolrow .ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;}
.px3-poolrow .pk{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim-2);}
.px3-poolrow .ps{font-size:13.5px;color:var(--fg);margin-top:2px;}
.px3-poolrow .cnt{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line);border-radius:999px;padding:3px 9px;}
.px3-form{border-top:1px solid var(--line);}
.px3-form > summary{list-style:none;cursor:pointer;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);padding:13px 20px;}
.px3-form > summary::-webkit-details-marker{display:none;}
.px3-form > summary:hover, .px3-form[open] > summary{color:var(--accent);}
/* margin/border-top:0 neutralise the legacy .pd-inline-form / .pd-proc-form
   rules that ride along on the kept compat form classes */
.px3-fields{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:2px 20px 18px;margin:0;border-top:0;}
.px3-fields input,.px3-fields select,.px3-fields textarea{flex:1;min-width:130px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:15px;padding:9px 11px;}
.px3-fields input:focus,.px3-fields select:focus,.px3-fields textarea:focus{border-color:var(--accent);outline:none;}
.px3-fields textarea{flex-basis:100%;resize:vertical;}
.px3-comp{display:block;margin:14px 20px;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg-3);}
.px3-comp:focus-within{border-color:var(--accent);}
.px3-comp textarea{width:100%;min-height:54px;resize:vertical;background:none;border:0;outline:none;color:var(--fg);font-size:15px;line-height:1.55;padding:12px 14px;box-sizing:border-box;}
.px3-comp-foot{display:flex;justify-content:flex-end;padding:8px 11px 9px;border-top:1px solid var(--line);}
.px3-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line);}
.px3-kpi{background:var(--bg-2);padding:15px 16px;}
.px3-kpi .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim-2);}
.px3-kpi .v{font-family:var(--font-mono);font-size:24px;color:var(--fg);margin-top:8px;line-height:1;}
.px3-eg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:16px 20px;}
.px3-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.px3-field .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);}
.px3-field input,.px3-field select{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:15px;padding:9px 11px;width:100%;}
.px3-field input:focus,.px3-field select:focus{border-color:var(--accent);outline:none;}
.px3-eg-actions{display:flex;gap:10px;padding:4px 20px 18px;}
.px3-btn{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:8px;cursor:pointer;border:1.5px solid var(--accent);background:var(--accent);color:#0c0c0d;}
.px3-btn.ghost{background:transparent;color:var(--accent);}
.px3-btn.danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 50%,var(--line));color:var(--danger);}
.px3-thresh{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;text-transform:uppercase;color:var(--fg-dim-2);white-space:nowrap;}
.px3-thresh input{width:46px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--fg);font-family:var(--font-mono);font-size:11px;padding:4px 6px;text-align:center;}

/* ── overview spec sheet (cleanup of the bundle's inline-styled dl) ── */
.px3-ov{display:flex;gap:18px;padding:16px 20px;flex-wrap:wrap;}
.px3-specs{flex:1;min-width:260px;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:0;align-content:start;}
.px3-specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.px3-specs dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);}
.px3-specs dd{margin:0;font-size:14px;color:var(--fg);text-align:right;overflow-wrap:anywhere;}

/* ── bell (px3 polish on the shipped .pj-bell contract) ── */
.px3 .pj-bell{display:inline-grid;place-items:center;width:28px;height:26px;padding:0;border-radius:6px;border-color:var(--line-strong);font-size:12px;line-height:1;}
.px3 .pj-bell.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--amber-soft);}

/* ── files / timelapse rows ── */
.px3-thumb{width:38px;height:38px;flex:0 0 auto;border-radius:6px;border:1px solid var(--line-strong);background:var(--bg-3);display:grid;place-items:center;overflow:hidden;}
.px3-thumb img{display:none;width:100%;height:100%;object-fit:contain;}
.px3-thumb .ext{font-family:var(--font-mono);font-size:8px;letter-spacing:.06em;color:var(--fg-dim-2);}
.px3-thumb.has{background:#0e0e10;}
.px3-thumb.has img{display:block;}
.px3-thumb.has .ext{display:none;}
.px3-fsearch{background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:13.5px;padding:8px 11px;margin:0 20px 8px;box-sizing:border-box;width:calc(100% - 40px);}
.px3-fsearch:focus{border-color:var(--accent);outline:none;}

/* ── maintenance: summary strip + service cards ── */
.px3-summary{display:flex;gap:1px;background:var(--line);border-bottom:1px solid var(--line);}
.px3-summary .cell{flex:1;background:var(--bg-2);padding:14px 18px;}
.px3-summary .cell .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim-2);}
.px3-summary .cell .v{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--fg);margin-top:6px;line-height:1;letter-spacing:-.02em;}
.px3-summary .cell.alert .v{color:var(--danger);}
.px3-summary .cell.warn .v{color:var(--accent);}
.px3-summary .cell .n{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim-2);margin-top:5px;}
.px3-sched{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 20px;}
.px3-svc{border:1px solid var(--line);border-left:2px solid var(--line-strong);border-radius:10px;background:var(--bg-3);padding:15px 16px;display:flex;flex-direction:column;gap:12px;}
.px3-svc.due{border-left-color:var(--accent);}
.px3-svc.overdue{border-left-color:var(--rust);background:var(--rust-soft);}
.px3-svc .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.px3-svc .nm{font-size:14px;color:var(--fg);}
.px3-svc .sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--fg-dim-2);margin-top:4px;}
.px3-svc .pctlab{font-family:var(--font-mono);font-weight:500;font-size:20px;color:var(--fg);line-height:1;flex:0 0 auto;}
.px3-svc.due .pctlab{color:var(--accent);}
.px3-svc.overdue .pctlab{color:var(--rust);}
.px3-svc .meterrow{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);}
.px3-svc .meterrow .st{color:var(--fg-dim-2);}
.px3-svc.due .meterrow .st{color:var(--accent);}
.px3-svc.overdue .meterrow .st{color:var(--rust);}
.px3-svc.due .px3-bar > span{background:var(--accent);}
.px3-svc.overdue .px3-bar > span{background:var(--rust);}
.px3-svc .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* ── errors: incident cards + inline resolve form ── */
.px3-incidents{display:flex;flex-direction:column;gap:10px;padding:14px 20px;}
.px3-incidents .px3-empty{padding:0;}
.px3-incident{display:block;border:1px solid var(--line);border-left:2px solid var(--line-strong);border-radius:10px;background:var(--bg-3);padding:14px 16px;}
.px3-incident.minor{border-left-color:var(--accent);}
.px3-incident.major{border-left-color:var(--rust);background:var(--rust-soft);}
.px3-incident.resolved{opacity:.62;border-left-color:var(--line-strong);}
.px3-incident-hd{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.px3-incident-hd .date{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--fg-dim-2);}
/* named .ecat, not the designer's .cat — a legacy global `.cat{display:grid;…}` would clobber it */
.px3-incident-hd .ecat{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line);border-radius:999px;padding:2px 8px;}
.px3-incident-hd .sev{margin-left:auto;}
.px3-incident-body{font-size:14px;line-height:1.55;color:var(--fg);}
.px3-incident-res{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--fg-dim);}
.px3-incident-res .lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-right:8px;}
.px3-incident-acts{display:flex;gap:8px;margin-top:12px;}
.px3-resolve-form{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;}
.px3-resolve-form[hidden]{display:none;}
.px3-resolve-form input{flex:1;min-width:180px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--fg);font-size:14px;padding:9px 11px;}
.px3-resolve-form input:focus{border-color:var(--accent);outline:none;}

/* ── notes: composer + note cards ── */
/* Printer notes reuse the general /notes gallery cards (.ntg-grid/.ntg-card are
   bare globals). Scoped deltas: not clickable here (no pointer, no hover lift),
   full body shown (no 6-line clamp, pre-wrap like the old card), and 3 columns
   max inside the narrower tab content (global .ntg-grid is 4 at full width —
   the width-tiers below must be re-stated because these higher-specificity
   rules would otherwise override the global viewport tiers everywhere). */
.px3-notegrid{padding:6px 20px 14px;column-count:3;}
.px3-notegrid .px3-empty{padding:8px 0;}
.px3 .ntg-card{cursor:default;}
.px3 .ntg-card:hover{border-color:var(--line);transform:none;box-shadow:none;}
.px3 .ntg-cprev{margin-top:0;display:block;-webkit-line-clamp:unset;overflow:visible;white-space:pre-wrap;}
@media (max-width:1024px){ .px3-notegrid{column-count:2;} }
@media (max-width:620px){ .px3-notegrid{column-count:1;} }

/* ── responsive: mobile hierarchy — cam → live+controls → health → pending
     banner → AMS → tabs. The rail dissolves (display:contents) so its cards,
     the banner and the tab column stack as ordered grid rows. ── */
@media (max-width:760px){
  .px3-split{grid-template-columns:1fr;gap:18px;}
  .px3-rail{display:contents;}
  .px3 .px3-cam{order:1;}
  .px3 .px3-live{order:2;}
  .px3 .px3-health{order:3;}
  .px3-split > .px3-pending{order:4;}
  .px3-rail > .rail-ams{order:5;}
  .px3 .px3-content{order:6;}
  .px3-id{gap:14px;}
  .px3-id h2{font-size:27px;}
  .px3-actions{width:100%;}
  .px3-actions .btn{flex:1;justify-content:center;}
  .px3-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .px3-tab{flex:0 0 auto;}
  .px3-row{flex-wrap:wrap;}
  .px3-kpis{grid-template-columns:1fr 1fr;}
  .px3-eg{grid-template-columns:1fr;}
  .px3-sched{grid-template-columns:1fr;}
  .px3-summary{flex-wrap:wrap;}
  .px3-summary .cell{flex-basis:50%;}
  .px3-specs{grid-template-columns:1fr;}
  .px3-mapcard{width:100%;}
}