/* ============================================================
   Glasshouse design system. Signal Foundry portfolio panel.
   Dark, warm, premium. Apple sensibility crossed with operator console.
   ============================================================ */

:root {
  /* Things 3 / Apple intelligence direction: warmer cream ink on warmer dark
     surfaces, teal accent. Brand identity tokens stay untouched below. */
  --bg-0: #15151a;
  --bg-1: #1d1d24;
  --bg-2: #262630;
  --bg-3: #2f3038;
  --bg-glass: rgba(255, 255, 255, 0.025);
  --bg-glass-strong: rgba(255, 255, 255, 0.04);

  --line: rgba(240, 238, 232, 0.06);
  --line-strong: rgba(240, 238, 232, 0.12);

  --ink: #f0eee8;
  --ink-dim: #a8a8a4;
  --ink-faint: #6f6f6b;

  --accent: #5cd8b7;
  --accent-soft: rgba(92, 216, 183, 0.18);
  --accent-dim: #3aa88c;
  --accent-ink: #0f1f1c;

  --cyan: #67d3ff;
  --cyan-soft: rgba(103, 211, 255, 0.16);
  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, 0.16);
  --color-amber: #f4c14b;
  --crit: #ff6b6b;
  --crit-soft: rgba(255, 107, 107, 0.16);
  --good: #7be08c;
  --good-soft: rgba(123, 224, 140, 0.15);

  --brand-competedesk: #d9f43c;
  --brand-fleetkeep: #67d3ff;
  --brand-tenderlead: #f5a524;
  --brand-shvl: #a8c44a;
  --brand-daygauge: #b89dff;

  --font-sans: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-sans);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 120ms;
  --t-mid: 220ms;
  --t-slow: 360ms;

  --radius-card: 10px;
  --radius-chip: 6px;
  --radius-pill: 999px;

  /* paper modifier (kept for surface-paper compat) */
  --paper-bg: #f4f1ea;
  --paper-ink: #1a1a1f;
  --paper-rule: rgba(0, 0, 0, 0.08);
  --paper-rule-strong: rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Body + ambient noise
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-0);
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}

/* Warm noise overlay. Fixed, very subtle. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.96  0 0 0 0 0.9  0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

#stack-shell, .topbar, .telemetry-strip, .layout { position: relative; z-index: 1; }

/* ============================================================
   Typography helpers
   ============================================================ */

.mono, .meta-pair-label, .view-kicker, .nav-label, .ov-kicker, .ov-section-label > span,
.dist-meta, .stk-progress, .agent-name, .agent-watch, .agent-sweep, .filter-chip,
.stk-filter {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Top bar
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(12, 12, 15, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  z-index: 50;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 2px;
  position: relative;
  animation: pulse-soft 3s ease-in-out infinite;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.brand-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.brand-sep {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.brand-context {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.meta-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 80px;
}

.meta-pair-label {
  font-size: 9px;
  letter-spacing: 0.1em;
}

.meta-pair-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.logout-form { margin: 0; }

/* ============================================================
   Telemetry strip
   ============================================================ */

.telemetry-strip {
  position: sticky;
  top: 56px;
  z-index: 45;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}

.telemetry-spark {
  flex: 1;
  height: 22px;
  display: block;
  min-width: 0;
}

.telemetry-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.telemetry-stat strong {
  color: var(--ink);
  font-weight: 500;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.telemetry-quiet {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   Layout: sidebar + main
   ============================================================ */

/* Legacy hooks: .layout/.sidebar remain so any stray references stay sane,
   but they're no-ops in the top-nav shell. */
.layout { display: contents; }
.sidebar { display: none; }
.nav-section { display: contents; }
.nav-label { display: none; }

/* ============================================================
   Top nav — primary (5 section tabs) + secondary (contextual pills)
   ============================================================ */

.topnav-primary {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}

.topnav-primary-inner {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

.topnav-tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0 14px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}

.topnav-tab:hover { color: var(--ink); }
.topnav-tab.is-active { color: var(--ink); }

.topnav-underline {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1),
              width 200ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 160ms ease;
  pointer-events: none;
  opacity: 0;
}
.topnav-underline.is-ready { opacity: 1; }

.topnav-secondary {
  position: sticky;
  top: 134px; /* topbar 56 + telemetry 32 + primary 46 */
  z-index: 39;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  background: rgba(12, 12, 15, 0.66);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.topnav-secondary-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav-secondary-inner::-webkit-scrollbar { display: none; }

.topnav-group {
  display: none;
  align-items: center;
  gap: 4px;
}
.topnav-group.is-active { display: inline-flex; }

.topnav-secondary .topnav-group .nav-item {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.topnav-secondary .topnav-group {
  animation: topnav-fade 180ms ease both;
}
@keyframes topnav-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 12px;
  text-align: left;
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.nav-item > span:first-child:not(.nav-dot) {
  flex: 0 0 auto;
}

.nav-item:hover {
  background: var(--bg-2);
  color: var(--ink);
}

.nav-item.is-active {
  color: var(--ink);
  background: var(--bg-glass-strong);
  border-color: var(--accent-soft);
}

.nav-item.is-active::before { content: none; }

.nav-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: var(--radius-chip);
}

.nav-item.is-active .nav-count {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 4px;
  flex: 0 0 6px;
}

.nav-dot[data-company-dot="competedesk"] { background: var(--brand-competedesk); }
.nav-dot[data-company-dot="fleetkeep"]   { background: var(--brand-fleetkeep); }
.nav-dot[data-company-dot="tenderlead"]  { background: var(--brand-tenderlead); }
.nav-dot[data-company-dot="shvl"]        { background: var(--brand-shvl); }
.nav-dot[data-company-dot="daygauge"]    { background: var(--brand-daygauge); }

/* ============================================================
   Main + views (cross-fade transitions)
   ============================================================ */

.main {
  padding: 28px 32px 80px;
  min-width: 0;
  position: relative;
}

.main.is-fullwidth {
  width: 100%;
  padding: 28px 24px 80px;
}

.view {
  display: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.view.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.view.is-leaving {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.view-kicker, .ov-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.view h1, .ov-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.view-sub {
  font-size: 13px;
  color: var(--ink-dim);
  max-width: 480px;
  text-align: right;
}

.view-section {
  margin-bottom: 32px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}

.section-head h2 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.section-actions {
  display: flex;
  gap: 8px;
}

/* ============================================================
   Cards (glass surface)
   ============================================================ */

.card, .company-card, .ov-board, .mini-panel, .agent-hero, .agent-proposal,
.agent-upnext, .dist-composer, .ov-vis-row, .dist-opp-card, .dist-calendar-cell {
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

@supports (backdrop-filter: blur(20px)) {
  .card, .company-card, .ov-board, .mini-panel, .agent-hero, .agent-proposal,
  .agent-upnext, .dist-composer {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
}

@supports not (backdrop-filter: blur(20px)) {
  .card, .company-card, .ov-board, .mini-panel, .agent-hero, .agent-proposal,
  .agent-upnext, .dist-composer {
    background: var(--bg-1);
  }
}

.card:hover, .ov-board:hover, .mini-panel:hover, .dist-opp-card:hover {
  background: var(--bg-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.4);
  border-color: var(--line-strong);
}

/* ============================================================
   Buttons
   ============================================================ */

.primary-button, .dist-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease);
}

.primary-button:hover, .dist-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(92, 216, 183, 0.28);
  filter: brightness(1.04);
}

.primary-button:active, .dist-btn-primary:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(92, 216, 183, 0.22);
}

.ghost-button, .dist-btn-ghost, .stk-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}

.ghost-button:hover, .dist-btn-ghost:hover, .stk-menu:hover {
  transform: translateY(-2px);
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(92, 216, 183, 0.18);
}

.ghost-button:active, .dist-btn-ghost:active, .stk-menu:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(92, 216, 183, 0.14);
}

.dist-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}

.dist-icon-btn:hover {
  background: var(--bg-2);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(92, 216, 183, 0.18);
  border-color: var(--accent);
}
.dist-icon-btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 2px 6px rgba(92, 216, 183, 0.14);
}
.dist-icon-btn.is-danger:hover { color: var(--crit); border-color: var(--crit-soft); box-shadow: 0 6px 18px rgba(255, 107, 107, 0.22); }

/* ============================================================
   Filter chips
   ============================================================ */

.signal-filters, #stk-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}

.filter-chip, .stk-filter {
  padding: 5px 12px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.filter-chip:hover, .stk-filter:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.filter-chip.is-active, .stk-filter.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
}

/* ============================================================
   Status chips / pills
   ============================================================ */

.status-chip, .pill, .dist-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: var(--bg-2);
  color: var(--ink-dim);
}

.status-chip[data-status="approved"], .pill[data-status="approved"] {
  color: var(--accent); background: var(--accent-soft); border-color: rgba(92, 216, 183, 0.3);
}
.status-chip[data-status="sent"], .status-chip[data-status="pending"],
.status-chip[data-status="scheduled"], .pill[data-status="scheduled"] {
  color: var(--cyan); background: var(--cyan-soft);
}
.status-chip[data-status="delivered"], .status-chip[data-status="posted"],
.pill[data-status="posted"] {
  color: var(--good); background: var(--good-soft);
}
.status-chip[data-status="bounced"], .status-chip[data-status="complained"] {
  color: var(--crit); background: var(--crit-soft);
}
.status-chip[data-status="needs_edit"], .status-chip[data-status="ready_to_approve"],
.pill[data-status="drafted"], .pill[data-status="proposed"] {
  color: var(--warn); background: var(--warn-soft);
}
.status-chip[data-status="do_not_send"], .pill[data-status="killed"] {
  color: var(--ink-faint); background: rgba(91, 96, 104, 0.12);
}

/* ============================================================
   Overview
   ============================================================ */

.view.ov { padding-top: 4px; }

.ov-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 0;
  border: 0;
}

.ov-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}

.ov-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 14px;
}

.ov-section-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.ov-section-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ov-section-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink);
}

.ov-portfolio-headline {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 22px 24px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.ov-port-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ov-port-label { font-size: 13px; color: var(--ink-dim); }

.ov-port-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  letter-spacing: 0.06em;
}

.ov-port-delta[data-direction="up"] { color: var(--good); background: var(--good-soft); }
.ov-port-delta[data-direction="down"] { color: var(--crit); background: var(--crit-soft); }
.ov-port-delta[data-direction="flat"] { color: var(--ink-faint); background: var(--bg-2); }

.ov-port-week { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

.ov-rows { display: grid; gap: 8px; }

.ov-vis-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.ov-vis-row:hover {
  background: var(--bg-2);
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.ov-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.ov-board {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
}

.ov-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.ov-board-head h3 {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.ov-board-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: var(--radius-chip);
  font-variant-numeric: tabular-nums;
}

.ov-board-count.is-est { color: var(--ink-faint); background: var(--bg-2); }

.ov-board-empty {
  font-size: 12px;
  color: var(--ink-faint);
  padding: 14px 0;
}

.ov-learning-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

/* ============================================================
   Company / mini panels
   ============================================================ */

.company-host { display: grid; gap: 18px; }

.company-card { padding: 20px 22px; }

.company-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.company-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.company-head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }

.company-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.mini-panel { padding: 14px 16px; }

.mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mini-head h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0;
}

.range { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }

.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.chart-frame {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.2);
}

.sparkline { width: 100%; height: 60px; display: block; }
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.sparkline .area { fill: var(--accent-soft); stroke: none; }

.chart-range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
}

.chart-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 4px;
}

.table-wrap { margin-top: 10px; overflow-x: auto; }

.data-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.data-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr:hover { background: var(--bg-glass-strong); }

/* ============================================================
   Forms
   ============================================================ */

input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="number"], select, textarea, .dist-inline-select, .dist-inline-input,
.dist-filter-select {
  background: var(--bg-1);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  padding: 8px 10px;
  font-size: 13px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
}

textarea { resize: vertical; min-height: 80px; font-family: var(--font-sans); }

/* ============================================================
   Calendar
   ============================================================ */

.dist-calendar-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.dist-calendar-board { overflow-x: auto; }

.dist-calendar-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, minmax(140px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-glass);
  overflow: hidden;
}

.dist-calendar-corner {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.dist-calendar-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}

.dist-calendar-head:last-child { border-right: 0; }

.dist-calendar-head.is-today {
  color: var(--accent);
  position: relative;
}

.dist-calendar-head.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.dist-calendar-time {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
}

.dist-calendar-cell {
  padding: 8px;
  min-height: 88px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background var(--t-fast) var(--ease);
}

.dist-calendar-cell:last-child { border-right: 0; }
.dist-calendar-grid > div:nth-child(8n) { border-right: 0; }

.dist-calendar-cell.is-today { background: var(--accent-soft); }

.dist-calendar-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: 4px;
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.dist-calendar-item:hover {
  background: var(--bg-2);
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

.dist-calendar-item:active { transform: scale(0.97); }

.dist-calendar-item[data-account="competedesk"] { border-left-color: var(--brand-competedesk); }
.dist-calendar-item[data-account="fleetkeep"]   { border-left-color: var(--brand-fleetkeep); }
.dist-calendar-item[data-account="tenderlead"]  { border-left-color: var(--brand-tenderlead); }
.dist-calendar-item[data-account="shvl"]        { border-left-color: var(--brand-shvl); }
.dist-calendar-item[data-account="daygauge"]    { border-left-color: var(--brand-daygauge); }

.dist-calendar-event-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
  margin-bottom: 2px;
}

.dist-calendar-event-top strong { font-weight: 500; }

.dist-calendar-event-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ============================================================
   Drafts list (dense)
   ============================================================ */

.dist-drafts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
}

.dist-drafts-list { display: flex; flex-direction: column; gap: 4px; }

.dist-draft-row, .dist-draft-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.dist-draft-row:hover, .dist-draft-card:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
}

.dist-draft-row.is-active, .dist-draft-card.is-active {
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
}

.dist-drawer {
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  position: sticky;
  top: 100px;
}

.dist-drawer-empty {
  font-size: 13px;
  color: var(--ink-faint);
  padding: 30px 0;
  text-align: center;
}

/* ============================================================
   Agent / distribution command surface
   ============================================================ */

.dist-agent { display: flex; flex-direction: column; gap: 16px; }

.agent-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

.agent-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: pulse-ring 2.4s ease-out infinite;
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--accent-soft); }
  100% { box-shadow: 0 0 0 8px transparent; }
}

.agent-name { color: var(--ink); font-weight: 500; }
.agent-sep { color: var(--ink-faint); }
.agent-watch, .agent-sweep b { color: var(--ink); }

.agent-right { margin-left: auto; color: var(--ink-faint); }
.agent-toolbar { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.dist-local-state { font-size: 10px; color: var(--ink-faint); margin-left: 6px; }

.agent-hero, .agent-proposal, .agent-upnext { padding: 20px 22px; }

.agent-sub { color: var(--ink-dim); font-size: 13px; line-height: 1.55; }

.agent-footnote {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 8px 0 0;
}

.agent-manual {
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.agent-manual > summary {
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink);
}

.agent-manual > summary::-webkit-details-marker { display: none; }

.dist-composer-stack { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 14px; }

.dist-composer {
  border-radius: var(--radius-card);
  padding: 16px;
  border: 1px solid var(--line);
}

.dist-composer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dist-composer-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.dist-composer-title h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 4px 0 0;
}

.dist-composer-meta { display: flex; gap: 6px; flex-wrap: wrap; }

.dist-composer-form textarea { width: 100%; }

.dist-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
}

.dist-composer-actions { display: flex; gap: 8px; }

.dist-already-posted {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.dist-already-posted > summary {
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.dist-already-posted > summary::-webkit-details-marker { display: none; }
.dist-already-posted > form { padding: 0 14px 14px; }

/* ============================================================
   Distribution opportunities / lanes / weekly
   ============================================================ */

.dist-opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.dist-opp-card {
  padding: 14px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dist-opp-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.dist-capture {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.dist-capture-row { display: flex; gap: 8px; flex-wrap: wrap; }

.dist-subreddit-grid, .dist-lane-board, .dist-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.dist-measurement-list, .dist-weekly-list, .dist-weekly-decisions,
.dist-learning-scorecards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terminal-strip, .dist-weekly-stats {
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ============================================================
   App radar
   ============================================================ */

.app-radar-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.app-radar-add, .app-radar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.app-radar-summary {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.app-radar-table-wrap {
  overflow-x: auto;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.app-radar-table {
  width: 100%;
  font-size: 12px;
}

.app-radar-table th {
  position: sticky;
  top: 0;
  background: var(--bg-1);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  padding: 8px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.app-radar-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.app-radar-table tbody tr:hover { background: var(--bg-glass-strong); }

/* ============================================================
   Health grid
   ============================================================ */

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* ============================================================
   Stack shell
   ============================================================ */

body[data-shell="stack"] > .topbar,
body[data-shell="stack"] > .telemetry-strip,
body[data-shell="stack"] > .topnav-primary,
body[data-shell="stack"] > .topnav-secondary,
body[data-shell="stack"] > .main { display: none !important; }
body[data-shell="legacy"] > #stack-shell { display: none !important; }

#stack-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  z-index: 100;
}

.stk-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 12, 15, 0.88);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.stk-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.stk-brand-dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 2px;
  animation: pulse-soft 3s ease-in-out infinite;
}

.stk-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.stk-progress {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.stk-area { flex: 1; overflow-y: auto; padding: 32px; }
.stk-inner { max-width: 720px; margin: 0 auto; }

.stk-card {
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.stk-empty { text-align: center; color: var(--ink-faint); padding: 60px 32px; }

.stk-hint {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stk-hint kbd {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--ink);
  margin-right: 4px;
}

/* ============================================================
   Misc
   ============================================================ */

.summary-text {
  width: 100%;
  min-height: 240px;
  background: var(--bg-1);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
}

.brief-cards, .offpage-stack, .autoresearch-stack, .search-intel-stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

/* ============================================================
   Paper surface modifier
   ============================================================ */

.view.surface-paper {
  background: var(--paper-bg);
  color: var(--paper-ink);
  padding: 36px;
  border-radius: var(--radius-card);
  margin-top: 8px;
}

.view.surface-paper.is-active { display: block; }
.view.surface-paper .view-head { border-color: var(--paper-rule); }
.view.surface-paper .view-kicker { color: rgba(0, 0, 0, 0.5); }
.view.surface-paper h1, .view.surface-paper h2 { color: var(--paper-ink); }
.view.surface-paper .view-sub { color: rgba(0, 0, 0, 0.6); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
  .topnav-primary { padding: 0 12px; }
  .topnav-secondary { padding: 0 12px; }
  .main, .main.is-fullwidth { padding: 20px 16px 60px; }
  .view-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .view-sub { text-align: left; max-width: none; }
  .dist-drafts-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   Scrollbars
   ============================================================ */

.sidebar::-webkit-scrollbar,
.view::-webkit-scrollbar,
.main::-webkit-scrollbar,
.stk-area::-webkit-scrollbar { width: 8px; height: 8px; }

.sidebar::-webkit-scrollbar-thumb,
.view::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.stk-area::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 4px;
}

.sidebar::-webkit-scrollbar-track,
.view::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.stk-area::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   CLEAN 3-TAB IA — content-forward, borderless, editorial feel
   Overrides the dense Glasshouse card style for the new layout.
   ============================================================ */

/* 1. Hide the legacy two-tier nav. We keep .topnav-primary visible
      but force it to a slim, borderless bar with just 3 tabs. */
.topnav-secondary { display: none !important; }

/* Reduce primary nav chrome — no glass blur, no bottom border, on raw bg. */
.topnav-primary.tabs-3 {
  background: var(--bg-0);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  height: 56px;
  padding: 0 32px;
}
.topnav-primary.tabs-3 .topnav-primary-inner {
  gap: 28px;
}
.topnav-primary.tabs-3 .topnav-tab {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 0 4px;
}
.topnav-primary.tabs-3 .topnav-tab.is-active { color: var(--ink); }
.topnav-primary.tabs-3 .topnav-underline {
  bottom: 8px;
}
.topbar .topnav-primary {
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  flex: 0 0 auto;
}
.topnav-tab,
.topnav-tab:focus,
.topnav-tab:focus-visible { outline: none; box-shadow: none; }
.topnav-tab:focus-visible { color: var(--accent); }

/* Main content sits flush — was indented under sidebar earlier.
   The clean shell uses full bleed. */
.main-clean {
  padding: 0 32px 96px;
  max-width: none;
  margin: 0 auto;
}

/* ============================================================
   System gear dropdown (top-right next to Log out)
   ============================================================ */
.system-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.system-trigger {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.system-trigger:hover {
  color: var(--ink);
  background: var(--bg-glass);
  border-color: var(--line);
}
.system-trigger[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}
.system-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.system-item {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.system-item:hover {
  background: var(--bg-glass-strong);
  color: var(--ink);
}

/* ============================================================
   Brand chip filter row
   ============================================================ */
.brand-chips {
  position: sticky;
  top: 88px; /* topbar 56 + telemetry 32 */
  z-index: 38;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 32px 14px;
  background: var(--bg-0);
}
.brand-chips.is-hidden { display: none; }
.brand-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font: inherit;
  font-size: 12.5px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.brand-chip:hover {
  color: var(--ink);
  background: var(--bg-glass);
}
.brand-chip.is-active {
  color: var(--ink);
  background: var(--bg-glass-strong);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent-soft) inset;
}
.brand-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  display: inline-block;
}
[data-company-dot="personal"]     { background: #f0eee8; }
[data-company-dot="tenderlead"]   { background: #6ec1ff; }
[data-company-dot="competedesk"]  { background: #d9f43c; }
[data-company-dot="fleetkeep"]    { background: #ffb86b; }
[data-company-dot="shvl"]         { background: #c78bff; }
[data-company-dot="daygauge"]     { background: #5fe3a1; }
.brand-chip-label { font-size: 12.5px; }

/* CSS-driven brand filter — rows tagged with data-brand are hidden when
   the body filter doesn't match. */
body[data-brand-filter="personal"]    [data-brand-row]:not([data-brand-row="personal"]),
body[data-brand-filter="tenderlead"]  [data-brand-row]:not([data-brand-row="tenderlead"]),
body[data-brand-filter="competedesk"] [data-brand-row]:not([data-brand-row="competedesk"]),
body[data-brand-filter="fleetkeep"]   [data-brand-row]:not([data-brand-row="fleetkeep"]),
body[data-brand-filter="shvl"]        [data-brand-row]:not([data-brand-row="shvl"]),
body[data-brand-filter="daygauge"]    [data-brand-row]:not([data-brand-row="daygauge"]) {
  display: none !important;
}
/* Analytics: filter the brand panes. */
body[data-brand-filter="tenderlead"]  [data-brand-pane]:not([data-brand-pane="tenderlead"]),
body[data-brand-filter="competedesk"] [data-brand-pane]:not([data-brand-pane="competedesk"]),
body[data-brand-filter="fleetkeep"]   [data-brand-pane]:not([data-brand-pane="fleetkeep"]),
body[data-brand-filter="shvl"]        [data-brand-pane]:not([data-brand-pane="shvl"]),
body[data-brand-filter="daygauge"]    [data-brand-pane]:not([data-brand-pane="daygauge"]) {
  display: none !important;
}

/* Channel chip row — sits under brand chips */
.channel-chips {
  position: sticky;
  top: 128px; /* topbar 56 + telemetry 32 + brand-chips ~40 */
  z-index: 37;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 32px 12px;
  background: var(--bg-0);
}
.channel-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.channel-chip:hover { color: var(--ink); }
.channel-chip.is-active {
  color: var(--ink);
  background: var(--bg-glass-strong);
  border-color: var(--accent-soft);
}
body[data-channel-filter="x"]        .weekview-item[data-channel]:not([data-channel="x"]),
body[data-channel-filter="x"]        .monthview-item[data-channel]:not([data-channel="x"]),
body[data-channel-filter="linkedin"] .weekview-item[data-channel]:not([data-channel="linkedin"]),
body[data-channel-filter="linkedin"] .monthview-item[data-channel]:not([data-channel="linkedin"]),
body[data-channel-filter="reddit"]   .weekview-item[data-channel]:not([data-channel="reddit"]),
body[data-channel-filter="reddit"]   .monthview-item[data-channel]:not([data-channel="reddit"]) {
  display: none !important;
}

/* ============================================================
   Clean section layout — content sits on the page, no card boxes
   ============================================================ */
.view-clean {
  padding-top: 8px;
}
.clean-section {
  margin: 0 0 56px;
  padding: 0;
}
.clean-section:last-child { margin-bottom: 0; }
.clean-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.clean-rule {
  height: 1px;
  width: 100%;
  background: var(--line);
  margin: 0 0 20px;
}

/* Override stacked card chrome inside clean sections — calendar pills
   and drawer keep their own treatments below. */
.clean-section .agent-bar-flat,
.clean-section .agent-hero-flat,
.clean-section .agent-proposal-flat,
.clean-section .agent-upnext-flat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 14px;
}
.clean-section .agent-bar-flat { padding: 6px 0 10px; }

.clean-section .dist-drafts-layout-flat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
  align-items: start;
}
@media (max-width: 960px) {
  .clean-section .dist-drafts-layout-flat {
    grid-template-columns: 1fr;
  }
}

.clean-section .dist-capture-flat {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
}
.clean-section .dist-opp-controls-flat {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.clean-section .dist-composer-flat {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Borderless row treatment for the inbox grid and measurement list.
   Existing components keep working — we just strip the chrome and add a
   1px hairline + hover lift. */
.view-clean .dist-opp-grid > *,
.view-clean .dist-measurement-list > *,
.view-clean .dist-drafts-list > *,
.view-clean .dist-weekly-list > * {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 12px !important;
  margin: 0 !important;
  position: relative;
  transition: background 140ms ease, padding-left 140ms ease;
}
.view-clean .dist-opp-grid > *:hover,
.view-clean .dist-measurement-list > *:hover,
.view-clean .dist-drafts-list > *:hover,
.view-clean .dist-weekly-list > *:hover {
  background: var(--bg-glass) !important;
  padding-left: 18px !important;
}
.view-clean .dist-opp-grid > *::before,
.view-clean .dist-measurement-list > *::before,
.view-clean .dist-drafts-list > *::before,
.view-clean .dist-weekly-list > *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 140ms ease;
}
.view-clean .dist-opp-grid > *:hover::before,
.view-clean .dist-measurement-list > *:hover::before,
.view-clean .dist-drafts-list > *:hover::before,
.view-clean .dist-weekly-list > *:hover::before {
  opacity: 1;
}

/* Drafts list row: when row already carries an is-active state from app.js,
   show a steady lime edge. */
.view-clean .dist-drafts-list > .is-active::before {
  opacity: 1;
}

/* Compose section keeps a soft contrast block so the textarea reads. */
.clean-section .dist-composer-flat textarea,
.clean-section .dist-capture-flat textarea {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.outreach-clicks-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.outreach-clicks-controls label {
  display: grid;
  gap: 5px;
  min-width: 150px;
}

.outreach-clicks-controls label span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.outreach-clicks-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.outreach-clicks-status,
.outreach-clicks-empty {
  padding: 18px 16px;
  color: var(--ink-faint);
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.outreach-clicks-status.is-error {
  color: var(--crit);
  border-color: var(--crit-soft);
  background: var(--crit-soft);
}

.outreach-clicks-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-glass);
}

.outreach-clicks-table td:nth-child(2) strong {
  display: block;
  font-weight: 500;
}

.outreach-clicks-email {
  display: block;
  color: var(--ink-faint);
  font-size: 11px;
  margin-top: 2px;
}

.outreach-clicks-signal {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  padding: 2px 6px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.outreach-clicks-signal[data-signal="clicked"] {
  color: var(--good);
  border-color: var(--good-soft);
  background: var(--good-soft);
}

.outreach-clicks-signal[data-signal="scanner"] {
  color: var(--warn);
  border-color: var(--warn-soft);
  background: var(--warn-soft);
}

/* ============================================================
   Analytics — 5 brand cards, flat & responsive
   ============================================================ */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.analytics-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.analytics-brand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.analytics-brand-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.analytics-brand-head .brand-chip-dot {
  width: 8px;
  height: 8px;
}
.company-card-flat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 !important;
}
.mini-panel-flat {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.company-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

/* ============================================================
   Page envelope tweaks for the 3-tab IA
   ============================================================ */
body { background: var(--bg-0); }
.legacy-holder { display: none !important; }

/* ============================================================
   Draft linter + cadence flag — algorithm-aware quality hints
   ============================================================ */
.draft-lint-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 4px;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--color-amber);
  border-radius: 4px;
  color: var(--color-amber);
  cursor: help;
  white-space: pre-line;
}
.dist-fast-lint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  margin-left: 8px;
  cursor: help;
}
.dist-fast-lint.has-issues {
  color: var(--color-amber);
}
.dist-cadence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-amber);
  vertical-align: middle;
  cursor: help;
}

/* ============================================================
   WEEK VIEW (Command tab calendar-first surface)
   ============================================================ */
#dist-orphans { display: none !important; }

.weekview-navstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.weekview-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.weekview-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}
.weekview-nav-btn,
.weekview-today-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.weekview-nav-btn:hover,
.weekview-today-btn:hover {
  background: var(--bg-2);
  border-color: var(--line-strong);
}
.weekview-today-btn {
  margin-left: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}
.weekview-range {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.02em;
  min-width: 220px;
  text-align: center;
}

.weekview {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  overflow: hidden;
  background: transparent;
}
.weekview-day {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 8px 12px;
  background: transparent;
  position: relative;
  transition: background 160ms ease;
}
.weekview-day:nth-child(7n) { border-right: 0; }
.weekview-day.is-today {
  background: var(--bg-glass);
  box-shadow: inset 3px 0 0 0 var(--accent, #c6ff00);
}
.weekview-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-size: 10px;
}
.weekview-day.is-today .weekview-day-head {
  color: var(--accent, #c6ff00);
}
.weekview-day-name { font-weight: 500; }
.weekview-day-date {
  font-family: var(--font-sans, inherit);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.weekview-day-count {
  font-size: 10px;
  color: var(--ink-faint);
}
.weekview-day-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.weekview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  min-height: 28px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 4px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  width: 100%;
  transition: background 120ms ease;
}
.weekview-item:hover { background: var(--bg-2); }
.weekview-item:active { transform: scale(0.98); }
.weekview-item[data-brand="competedesk"] { border-left-color: var(--brand-competedesk); }
.weekview-item[data-brand="fleetkeep"]   { border-left-color: var(--brand-fleetkeep); }
.weekview-item[data-brand="tenderlead"]  { border-left-color: var(--brand-tenderlead); }
.weekview-item[data-brand="shvl"]        { border-left-color: var(--brand-shvl); }
.weekview-item[data-brand="daygauge"]    { border-left-color: var(--brand-daygauge); }
.weekview-item[data-brand="personal"]    { border-left-color: var(--ink-dim); }

.weekview-item-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.weekview-item-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--ink-dim);
}
.weekview-item-chip.is-post     { color: var(--accent, #c6ff00); }
.weekview-item-chip.is-draft    { color: var(--ink); }
.weekview-item-chip.is-reply    { color: #6fb3ff; }
.weekview-item-chip.is-email    { color: #b48cff; }
.weekview-item-chip.is-measure  { color: var(--color-amber, #ffb347); }

.weekview-item-icon {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 14px;
  text-align: center;
}
.weekview-day-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  padding: 6px 8px;
  opacity: 0.5;
}
.weekview-day-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  padding: 4px 8px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.weekview-day-more:hover { color: var(--ink); }

/* lint chip inside a calendar item (for draft type) */
.weekview-item .draft-lint-chip,
.weekview-item .weekview-preflight-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 1px 4px;
  border: 1px solid var(--color-amber, #ffb347);
  color: var(--color-amber, #ffb347);
  border-radius: 3px;
  background: transparent;
}

/* cadence amber dot inside a calendar item (post type only) */
.weekview-item .weekview-cadence-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-amber, #ffb347);
}

/* ============================================================
   BOTTOM-RIGHT TOOLBAR
   ============================================================ */
.weekview-toolbar {
  position: fixed;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  z-index: 60;
}
.weekview-tool {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  letter-spacing: 0.02em;
}
.weekview-tool:hover { background: var(--bg-2); color: var(--accent, #c6ff00); }
.weekview-tool-icon { padding: 6px 9px; font-size: 13px; }
.weekview-tool.is-danger:hover { color: #ff6f6f; }
.weekview-edits {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  padding: 0 8px 0 4px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
}

/* ============================================================
   DRAWER (single, slides in from right)
   ============================================================ */
.weekview-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 80;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.22,1,0.36,1);
}
.weekview-drawer-overlay.is-open { opacity: 1; }

.weekview-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: var(--bg-1, #0b0c0e);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px rgba(0,0,0,0.45);
  z-index: 90;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.weekview-drawer[hidden],
.weekview-drawer-overlay[hidden],
.system-dropdown[hidden] { display: none !important; }
.weekview-drawer.is-open {
  transform: translateX(0);
}
.weekview-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  border-top: 3px solid var(--line);
}
.weekview-drawer[data-drawer-brand="competedesk"] .weekview-drawer-head { border-top-color: var(--brand-competedesk); }
.weekview-drawer[data-drawer-brand="fleetkeep"]   .weekview-drawer-head { border-top-color: var(--brand-fleetkeep); }
.weekview-drawer[data-drawer-brand="tenderlead"]  .weekview-drawer-head { border-top-color: var(--brand-tenderlead); }
.weekview-drawer[data-drawer-brand="shvl"]        .weekview-drawer-head { border-top-color: var(--brand-shvl); }
.weekview-drawer[data-drawer-brand="daygauge"]    .weekview-drawer-head { border-top-color: var(--brand-daygauge); }

.weekview-drawer-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.weekview-drawer-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.weekview-drawer-close {
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
}
.weekview-drawer-close:hover { color: var(--ink); }

.weekview-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
}
.weekview-drawer-body.is-fading { opacity: 0; transition: opacity 120ms ease; }

/* When the legacy drafts drawer is mounted inside the slide-in,
   override the sticky/glass styling that doesn't make sense here */
.weekview-drawer-body .dist-drawer {
  background: transparent;
  border: 0;
  padding: 0;
  max-height: none;
  position: static;
}
.weekview-drawer-body .dist-drafts-layout { display: block; }
.weekview-drawer-body .dist-drafts-list { display: none; }

/* Small actions row for non-draft drawer types */
.weekview-drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.weekview-drawer-shortcut-hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.6;
}
.weekview-drawer-schedule-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px;
  font-size: 12px;
}
.weekview-drawer-schedule-row label { display: flex; align-items: center; gap: 6px; }
.weekview-drawer-schedule-input {
  background: var(--bg-1, rgba(255,255,255,0.04));
  border: 1px solid var(--line);
  color: var(--ink, #f0eee8);
  padding: 6px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 12px;
}

/* === X accounts drawer === */
.x-accounts-list { display: flex; flex-direction: column; gap: 10px; }
.x-account-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-1, rgba(255,255,255,0.02));
}
.x-account-meta { display: flex; flex-direction: column; gap: 3px; }
.x-account-meta strong { font-size: 13px; }
.x-account-username { font-family: var(--font-mono); font-size: 11px; color: var(--accent, #5cd8b7); }
.x-account-disconnected { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); opacity: 0.7; }
.x-account-expiry { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); opacity: 0.5; }
.x-account-actions { display: flex; gap: 6px; }

/* === Posts queue drawer === */
.posts-queue-list { display: flex; flex-direction: column; gap: 10px; }
.posts-queue-row {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-1, rgba(255,255,255,0.02));
  display: flex; flex-direction: column; gap: 6px;
}
.posts-queue-meta { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.posts-queue-brand { font-weight: 600; }
.posts-queue-status { padding: 2px 6px; border-radius: 4px; }
.posts-queue-status-queued { background: rgba(92, 216, 183, 0.15); color: var(--accent, #5cd8b7); }
.posts-queue-status-posted { background: rgba(92, 216, 183, 0.25); color: var(--accent, #5cd8b7); }
.posts-queue-status-failed { background: rgba(255, 100, 100, 0.18); color: #ff8a8a; }
.posts-queue-status-cancelled { background: rgba(255,255,255,0.05); color: var(--ink-faint); }
.posts-queue-when { color: var(--ink-faint); opacity: 0.7; }
.posts-queue-text { font-size: 12px; line-height: 1.5; margin: 0; white-space: pre-wrap; word-break: break-word; }
.posts-queue-error { font-family: var(--font-mono); font-size: 10px; color: #ff8a8a; opacity: 0.85; }
.posts-queue-tweet { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); opacity: 0.6; }
.posts-queue-actions { display: flex; gap: 6px; margin-top: 4px; }

/* === Toast on OAuth return === */
.x-connected-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  padding: 12px 16px; border-radius: 10px;
  background: var(--bg-1, #1a1a20); border: 1px solid var(--accent, #5cd8b7);
  color: var(--ink, #f0eee8); font-size: 13px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.x-connected-toast.is-visible { opacity: 1; transform: translateY(0); }
.weekview-drawer-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 14px;
}
.weekview-drawer-meta strong { color: var(--ink); font-weight: 500; }
.weekview-drawer-preflight {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 14px;
  background: var(--bg-2);
  color: var(--ink-dim);
}
.weekview-drawer-preflight.ok { color: var(--ink-dim); }
.weekview-drawer-preflight.has-warnings {
  border-color: #c08a2e;
  background: rgba(192, 138, 46, 0.08);
  color: var(--ink);
}
.weekview-drawer-preflight-head {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}
.weekview-drawer-preflight ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.weekview-drawer-preflight li { line-height: 1.4; }
.weekview-drawer-body pre.weekview-drawer-body-text {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 640px) {
  .weekview { grid-template-columns: 1fr; }
  .weekview-day { min-height: 0; }
  .weekview-toolbar {
    right: 12px;
    bottom: 12px;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
  }
}

/* ============================================================
   MONTH VIEW — primary Command landing
   Reference: Notion Calendar / Cron / Things 3 — packed, quiet,
   content-forward. Hairlines only. No shadows. Brand colour
   only on the 3px left edge of each item pill.
   ============================================================ */

/* Segmented Month | Week toggle */
.calview-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-left: 4px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
}
.calview-seg {
  position: relative;
  z-index: 1;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.22,1,0.36,1);
}
.calview-seg.is-active { color: var(--ink); }
.calview-seg:hover { color: var(--ink-dim); }
.calview-underline {
  position: absolute;
  bottom: 1px;
  left: 2px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition:
    transform 180ms cubic-bezier(0.22,1,0.36,1),
    width 180ms cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

/* Cross-fade stage */
.calview-stage { position: relative; }
.calview-stage > .weekview,
.calview-stage > .monthview-wrap {
  transition: opacity 200ms cubic-bezier(0.22,1,0.36,1);
}
.calview-stage[data-mode="month"] > .weekview { display: none; }
.calview-stage[data-mode="week"]  > .monthview-wrap { display: none; }
.calview-stage.is-fading > .weekview,
.calview-stage.is-fading > .monthview-wrap { opacity: 0; }

/* Weekday header strip (Mon Tue ...) */
.monthview-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
  background: transparent;
}
.monthview-weekdays > span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.6;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
}
.monthview-weekdays > span:last-child { border-right: 0; }

/* Grid: 6 rows x 7 cols */
.monthview {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(118px, 1fr);
  border: 1px solid var(--line);
  background: transparent;
}
.monthview-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  gap: 4px;
  padding: 8px;
  min-height: 118px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 80ms cubic-bezier(0.22,1,0.36,1);
}
.monthview-cell:nth-child(7n) { border-right: 0; }
.monthview > .monthview-cell:nth-last-child(-n+7) { border-bottom: 0; }
.monthview-cell:hover { background: var(--bg-glass); }

.monthview-cell.is-other-month .monthview-date { opacity: 0.30; }
.monthview-cell.is-other-month { cursor: default; }
.monthview-cell.is-other-month:hover { background: transparent; }

.monthview-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  align-self: flex-start;
  cursor: pointer;
  transition: color 120ms ease;
}
.monthview-date:hover { color: var(--ink); }
.monthview-cell.is-today .monthview-date {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.monthview-date-month {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: 4px;
}

.monthview-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.monthview-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 18px;
  padding: 0 6px 0 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 0;
  border-left: 3px solid var(--ink-faint);
  border-radius: 2px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 120ms ease, color 120ms ease, border-left-color 120ms ease;
}
.monthview-item:hover {
  background: var(--bg-glass-strong);
  color: var(--ink);
}
.monthview-item[data-item-type="post"] { font-weight: 500; color: var(--ink); }
.monthview-item[data-brand="competedesk"] { border-left-color: var(--brand-competedesk); }
.monthview-item[data-brand="fleetkeep"]   { border-left-color: var(--brand-fleetkeep); }
.monthview-item[data-brand="tenderlead"]  { border-left-color: var(--brand-tenderlead); }
.monthview-item[data-brand="shvl"]        { border-left-color: var(--brand-shvl); }
.monthview-item[data-brand="daygauge"]    { border-left-color: var(--brand-daygauge); }
.monthview-item[data-brand="personal"]    { border-left-color: var(--ink-dim); }

.monthview-item-text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 18px;
}
.monthview-item .draft-lint-chip {
  flex: 0 0 auto;
  color: var(--color-amber, #ffb347);
  font-family: var(--font-mono);
  font-size: 10px;
  margin-right: 2px;
}
.monthview-item .monthview-cadence-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-amber, #ffb347);
  margin-left: auto;
}

.monthview-more {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 4px;
  align-self: flex-start;
  cursor: pointer;
  margin-top: 2px;
}
.monthview-more:hover { color: var(--ink); }

/* Day-detail list shown inside the drawer */
.monthview-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.monthview-day-list .monthview-item {
  height: auto;
  min-height: 28px;
  padding: 6px 10px 6px 12px;
}
.monthview-day-list .monthview-item-text {
  white-space: normal;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .monthview { grid-auto-rows: minmax(90px, 1fr); }
  .monthview-cell { min-height: 90px; padding: 6px; }
}
@media (max-width: 640px) {
  .monthview { grid-auto-rows: minmax(72px, 1fr); }
  .monthview-cell { min-height: 72px; padding: 4px; }
  .monthview-weekdays > span { padding: 6px 4px; font-size: 8px; }
}

/* ============================================================
   SEO tab — GSC tables + GEO recommendation cards
   Matches the Command/Analytics clean-section rhythm:
   small uppercase mono kicker, 1px hairline rule, hairline row dividers,
   generous whitespace, brand colour only on the chip dot and card edge.
   ============================================================ */
.gsc-table-host {
  width: 100%;
  overflow-x: auto;
}
.gsc-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12.5px;
  color: var(--ink);
}
.gsc-table thead th {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line);
}
.gsc-table thead th.gsc-col-num { text-align: right; }
.gsc-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.gsc-table tbody tr:last-child td { border-bottom: 0; }
.gsc-table tbody tr:hover { background: var(--bg-glass); }
.gsc-col-text {
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
}
.gsc-col-num {
  text-align: right;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  white-space: nowrap;
}
.gsc-col-brand {
  width: 1%;
  white-space: nowrap;
  color: var(--ink-dim);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
}
.gsc-col-brand .brand-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--ink-faint);
}
.gsc-col-brand .brand-chip-dot[data-company-dot="competedesk"] { background: var(--brand-competedesk); }
.gsc-col-brand .brand-chip-dot[data-company-dot="fleetkeep"]   { background: var(--brand-fleetkeep); }
.gsc-col-brand .brand-chip-dot[data-company-dot="tenderlead"]  { background: var(--brand-tenderlead); }
.gsc-col-brand .brand-chip-dot[data-company-dot="shvl"]        { background: var(--brand-shvl); }
.gsc-col-brand .brand-chip-dot[data-company-dot="daygauge"]    { background: var(--brand-daygauge); }
.gsc-empty {
  padding: 14px 4px;
  color: var(--ink-faint);
  font-size: 12px;
}

/* GEO recommendation cards — glass surface, brand-coloured 3px left edge,
   mono kicker, sans body. No nested boxes, no shadow. */
.geo-stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.geo-card {
  background: var(--bg-glass);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geo-card[data-brand-row="competedesk"] { border-left-color: var(--brand-competedesk); }
.geo-card[data-brand-row="fleetkeep"]   { border-left-color: var(--brand-fleetkeep); }
.geo-card[data-brand-row="tenderlead"]  { border-left-color: var(--brand-tenderlead); }
.geo-card[data-brand-row="shvl"]        { border-left-color: var(--brand-shvl); }
.geo-card[data-brand-row="daygauge"]    { border-left-color: var(--brand-daygauge); }
.geo-card-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.geo-card-kicker .brand-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.geo-card-kicker .brand-chip-dot[data-company-dot="competedesk"] { background: var(--brand-competedesk); }
.geo-card-kicker .brand-chip-dot[data-company-dot="fleetkeep"]   { background: var(--brand-fleetkeep); }
.geo-card-kicker .brand-chip-dot[data-company-dot="tenderlead"]  { background: var(--brand-tenderlead); }
.geo-card-kicker .brand-chip-dot[data-company-dot="shvl"]        { background: var(--brand-shvl); }
.geo-card-kicker .brand-chip-dot[data-company-dot="daygauge"]    { background: var(--brand-daygauge); }
.geo-card-brand { color: var(--ink-dim); }
.geo-card-sep { color: var(--ink-faint); }
.geo-card-state { color: var(--ink-dim); }
.geo-card-target {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  margin-top: 2px;
}
.geo-card-action {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.geo-card-why {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.geo-card-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.geo-card-meta-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.geo-card-meta-value {
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.geo-card-brief {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.geo-card-brief li {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.geo-card-brief li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 1px;
  background: var(--ink-faint);
}
.geo-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.geo-card-copy {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink-dim);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.geo-card-copy:hover {
  color: var(--ink);
  border-color: var(--accent-soft);
  background: var(--bg-glass-strong);
}

/* Hide whole GSC table when filtered brand has no rows left. */
body[data-brand-filter="tenderlead"]  .gsc-table tbody tr:not([data-brand-row="tenderlead"]),
body[data-brand-filter="competedesk"] .gsc-table tbody tr:not([data-brand-row="competedesk"]),
body[data-brand-filter="fleetkeep"]   .gsc-table tbody tr:not([data-brand-row="fleetkeep"]),
body[data-brand-filter="shvl"]        .gsc-table tbody tr:not([data-brand-row="shvl"]),
body[data-brand-filter="daygauge"]    .gsc-table tbody tr:not([data-brand-row="daygauge"]) {
  display: none !important;
}

/* ============================================================
   Scroll reveal — Things 3 direction
   Sections fade + rise on first intersection. JS adds .is-revealed.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1), transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}