/* ============================================================
   app.kgb — KGB Enterprises operations house.

   Design language shared with the Gym and kgbnetwork.com:
   "precision instrument" — Geist, tabular figures, ONE cool
   neutral family, ONE accent (KGB blue), semantic colour used
   only where it carries meaning. Light + dark, both first-class.

   Replaces the previous Rox/Raycast pastel-glass theme. The old
   aurora canvas (four pastel radial gradients) was the single
   most off-brand thing in the product: it read as decoration on
   a tool people use for six hours a night, and it is the exact
   look every AI-built dashboard ships with. Cards are now solid
   surfaces on a calm ground; hierarchy comes from type, spacing
   and a hairline — never from candy.

   The Tailwind PALETTE ITSELF is redefined in base.html, so every
   utility across all templates already resolves to these tokens.
   This file owns: fonts, tokens, base, the dark remap for
   runtime-injected markup, and the component layer.
   ============================================================ */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  font-style: normal;
}

/* ------------------------------------------------------------
   TOKENS — light is the base, .dark overrides. Values are kept
   identical to the Gym so the two apps read as one product.
   ------------------------------------------------------------ */
:root {
  color-scheme: light;

  --bg: #f6f7f9;
  --sunken: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --surface-3: #e9ecf1;
  --line: #e0e4ea;
  --line-strong: #c6ccd6;

  /* ink-3 holds 4.6:1 on --surface, so small print stays AA */
  --ink: #11161c;
  --ink-2: #495260;
  --ink-3: #69727f;

  /* KGB blue, darkened for light mode so white-on-accent clears AA */
  --accent: #0a6c93;
  --accent-hover: #08556f;
  --accent-ink: #ffffff;
  --accent-soft: rgba(1, 148, 212, 0.10);
  --accent-line: rgba(1, 148, 212, 0.38);
  --accent-text: #0a6c93;

  /* semantic — always paired with a number or word, never colour alone */
  --ok: #0f7a52;
  --warn: #8a5a06;
  --bad: #b3261e;
  --ok-soft: rgba(15, 122, 82, 0.10);
  --warn-soft: rgba(138, 90, 6, 0.10);
  --bad-soft: rgba(179, 38, 30, 0.09);

  --shadow-1: 0 1px 2px rgba(17, 22, 28, 0.05), 0 1px 1px rgba(17, 22, 28, 0.03);
  --shadow-2: 0 8px 24px -8px rgba(17, 22, 28, 0.14), 0 2px 6px -2px rgba(17, 22, 28, 0.06);
  --shadow-3: 0 24px 56px -20px rgba(17, 22, 28, 0.24);
  --grain-opacity: 0.016;

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 180ms var(--ease);
  --t-slow: 320ms var(--ease);
  --focus: var(--accent);
}

.dark {
  color-scheme: dark;
  --bg: #0b0e12;
  --sunken: #070a0d;
  --surface: #12161b;
  --surface-2: #171c23;
  --surface-3: #1f252d;
  --line: #242b34;
  --line-strong: #363f4b;
  --ink: #eef1f5;
  --ink-2: #a6b0bc;
  --ink-3: #7f8996;
  --accent: #0194d4;
  --accent-hover: #35abe1;
  --accent-ink: #041520;
  --accent-soft: rgba(1, 148, 212, 0.16);
  --accent-line: rgba(1, 148, 212, 0.46);
  --accent-text: #5cc5f2;
  --ok: #45c48a;
  --warn: #e0a33a;
  --bad: #f2685c;
  --ok-soft: rgba(69, 196, 138, 0.14);
  --warn-soft: rgba(224, 163, 58, 0.14);
  --bad-soft: rgba(242, 104, 92, 0.13);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 28px -10px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 28px 64px -22px rgba(0, 0, 0, 0.8);
  --grain-opacity: 0.028;
}

/* honour an OS request for more contrast */
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --ink-3: var(--ink-2); --grain-opacity: 0; }
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

/* Tabular figures everywhere a number is compared against another
   number — counts, scores, money, clocks. Proportional digits make
   a column of figures jitter, which is exactly the wrong thing in a
   dashboard. .tnum stays available for one-offs. */
.tnum, .mono, table, input[type="number"] { font-variant-numeric: tabular-nums; }

/* TEXT SELECTION — previously unstyled, so selection fell through to
   the UA default: on dark surfaces that paints a light-blue block and
   keeps the near-white ink, which makes the selected words vanish.
   Own it in both themes. */
::selection { background: rgba(1, 148, 212, 0.24); color: var(--ink); }
::-moz-selection { background: rgba(1, 148, 212, 0.24); color: var(--ink); }
.dark ::selection { background: rgba(1, 148, 212, 0.38); color: #ffffff; }
.dark ::-moz-selection { background: rgba(1, 148, 212, 0.38); color: #ffffff; }
/* selection inside a filled accent element (e.g. a primary button label) */
.dark .bg-accent-solid ::selection { background: rgba(255, 255, 255, 0.30); color: #fff; }

/* Keyboard focus: visible, one style, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

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

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }

/* --- Elevation --- */
.shadow-card { box-shadow: var(--shadow-1); }
.shadow-card-hover { box-shadow: var(--shadow-2); }
.shadow-modal { box-shadow: var(--shadow-3); }

/* --- Focus ring (legacy class, now token-driven) --- */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-line);
}

/* --- Animations --- */
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.skeleton { background: var(--surface-3); border-radius: var(--r-sm); animation: skeleton-pulse 1.5s ease-in-out infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in 0.2s var(--ease); }

/* A pulsing status dot is a tell, not information — the label already
   says "live". Kept as a plain dot so existing markup still reads. */
.pulse-dot { animation: none; }

/* ------------------------------------------------------------
   PAGE GROUND
   Calm, flat, one tone — plus a barely-there grain so large empty
   areas don't read as dead flat vector. No gradients, no aurora.
   ------------------------------------------------------------ */
.app-bg { background: var(--bg); position: relative; }
.app-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   SURFACE (class kept as .glass so no template has to change —
   it is no longer glass: a solid card, hairline border, tinted
   shadow. Frosted panels over a busy gradient were costing GPU
   and legibility for nothing.)
   ------------------------------------------------------------ */
.glass {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ------------------------------------------------------------
   DARK REMAP for runtime-injected markup.
   Tailwind's own dark: variants cover everything written in the
   templates; this covers HTML built in JS template literals that
   only ever specified the light class. Palette values come from
   base.html, so these only need to flip light<->dark surfaces.
   ------------------------------------------------------------ */
.dark .bg-white { background-color: var(--surface); }
.dark .bg-gray-50 { background-color: var(--bg); }
.dark .bg-gray-100 { background-color: var(--surface-3); }
.dark .bg-gray-200 { background-color: var(--surface-3); }
.dark .border-white { border-color: var(--surface); }
.dark .border-gray-100,
.dark .border-gray-200,
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }
.dark .border-gray-300 { border-color: var(--line-strong); }

.dark .text-gray-900, .dark .text-black { color: var(--ink); }
.dark .text-gray-800 { color: var(--ink); }
.dark .text-gray-700 { color: var(--ink-2); }
.dark .text-gray-600 { color: var(--ink-2); }
.dark .text-gray-500 { color: var(--ink-3); }
.dark .text-gray-400 { color: var(--ink-3); }
.dark .text-gray-300 { color: var(--ink-2); }

.dark .hover\:bg-gray-50:hover { background-color: var(--surface-2); }
.dark .hover\:bg-gray-100:hover { background-color: var(--surface-3); }
.dark .hover\:text-gray-900:hover { color: var(--ink); }
.dark .hover\:text-gray-700:hover { color: var(--ink-2); }
.dark .hover\:text-gray-600:hover { color: var(--ink-2); }

/* Form controls: most inputs carry no bg class, so they default to white */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.dark select,
.dark textarea {
  background-color: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
.dark input::placeholder, .dark textarea::placeholder { color: var(--ink-3); }
/* native select popups + date pickers follow color-scheme */
select, input, textarea { font-family: inherit; }

/* Tinted chips written as "bg-<hue>-50 text-<hue>-700": the palette in
   base.html already maps the hue onto a KGB ramp, but the -50 fill is a
   light tint. Under dark, drop it to a translucent wash of the same ink
   so the chip keeps its meaning without becoming a bright block. */
.dark .bg-emerald-50, .dark .bg-green-50, .dark .bg-teal-50 { background-color: var(--ok-soft); }
.dark .bg-emerald-100, .dark .bg-green-100, .dark .bg-teal-100 { background-color: var(--ok-soft); }
.dark .bg-amber-50, .dark .bg-yellow-50, .dark .bg-orange-50 { background-color: var(--warn-soft); }
.dark .bg-amber-100, .dark .bg-yellow-100, .dark .bg-orange-100 { background-color: var(--warn-soft); }
.dark .bg-red-50, .dark .bg-rose-50, .dark .bg-pink-50 { background-color: var(--bad-soft); }
.dark .bg-red-100, .dark .bg-rose-100, .dark .bg-pink-100 { background-color: var(--bad-soft); }
.dark .bg-blue-50, .dark .bg-indigo-50, .dark .bg-violet-50,
.dark .bg-purple-50, .dark .bg-sky-50, .dark .bg-cyan-50 { background-color: var(--accent-soft); }
.dark .bg-blue-100, .dark .bg-indigo-100, .dark .bg-violet-100,
.dark .bg-purple-100, .dark .bg-sky-100, .dark .bg-cyan-100 { background-color: var(--accent-soft); }

.dark .text-emerald-800, .dark .text-emerald-700, .dark .text-green-800,
.dark .text-green-700, .dark .text-teal-700 { color: var(--ok); }
.dark .text-amber-800, .dark .text-amber-700, .dark .text-yellow-800,
.dark .text-yellow-700, .dark .text-orange-800, .dark .text-orange-700 { color: var(--warn); }
.dark .text-red-800, .dark .text-red-700, .dark .text-rose-800,
.dark .text-rose-700, .dark .text-pink-700 { color: var(--bad); }
.dark .text-blue-800, .dark .text-blue-700, .dark .text-indigo-800,
.dark .text-indigo-700, .dark .text-violet-700, .dark .text-purple-700,
.dark .text-sky-700, .dark .text-cyan-700 { color: var(--accent-text); }

.dark .border-emerald-200, .dark .border-emerald-300, .dark .border-green-200 { border-color: rgba(69, 196, 138, 0.32); }
.dark .border-amber-200, .dark .border-amber-300, .dark .border-yellow-200 { border-color: rgba(224, 163, 58, 0.32); }
.dark .border-red-200, .dark .border-red-300, .dark .border-rose-200 { border-color: rgba(242, 104, 92, 0.32); }
.dark .border-blue-200, .dark .border-blue-300, .dark .border-indigo-200 { border-color: var(--accent-line); }

/* yt-pipeline kanban columns use bg-gray-50, which in dark equals the page
   ground and makes the columns disappear. Give them a real surface. */
.dark #kanbanBoard > div { background-color: var(--surface); border: 1px solid var(--line); }

/* ------------------------------------------------------------
   NAVIGATION SHELL
   ------------------------------------------------------------ */
.app-rail {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 1023px) { .app-rail { border-radius: 0 var(--r-xl) var(--r-xl) 0; box-shadow: var(--shadow-3); } }
@media (min-width: 1024px) { .app-rail { border-radius: var(--r-lg); } }

.app-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ------------------------------------------------------------
   COMMAND PALETTE (⌘K)
   ------------------------------------------------------------ */
.cmdk-scrim {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: rgba(11, 14, 18, 0.42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.cmdk-scrim.show { display: flex; animation: fade-in 0.14s var(--ease); }
.cmdk-panel {
  width: 620px; max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: cmdk-pop 0.2s var(--ease);
}
@keyframes cmdk-pop { from { opacity: 0; transform: scale(0.985) translateY(-6px); } to { opacity: 1; transform: none; } }
.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.cmdk-input-row input {
  flex: 1; border: none; outline: none; background: none; font: inherit;
  font-size: 15.5px; color: var(--ink); letter-spacing: -0.011em;
}
.cmdk-input-row input::placeholder { color: var(--ink-3); }
.cmdk-esc {
  font-size: 11px; color: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 6px; font-family: "Geist Mono", ui-monospace, monospace;
}
.cmdk-results { max-height: 348px; overflow-y: auto; padding: 6px; }
.cmdk-grp {
  font-size: 10.5px; letter-spacing: 0.07em; color: var(--ink-3);
  font-weight: 600; padding: 10px 10px 5px; text-transform: uppercase;
}
.cmdk-it {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border-radius: var(--r-sm); font-size: 14px; cursor: pointer; color: var(--ink);
}
.cmdk-it .cmdk-ci {
  width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--surface-3);
  display: grid; place-items: center; font-size: 12px; color: var(--ink-2); flex: none;
}
.cmdk-it.sel { background: var(--accent); color: var(--accent-ink); }
.cmdk-it.sel .cmdk-ci { background: rgba(255, 255, 255, 0.22); color: var(--accent-ink); }
.cmdk-it .cmdk-arrow { margin-left: auto; opacity: 0.85; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.cmdk-sub { color: var(--ink-3); font-size: 12.5px; }
.cmdk-it.sel .cmdk-sub { color: rgba(255, 255, 255, 0.82); }
.cmdk-foot {
  border-top: 1px solid var(--line); padding: 9px 16px;
  display: flex; gap: 18px; font-size: 12px; color: var(--ink-3);
}
.command-palette-backdrop { backdrop-filter: blur(3px); background: rgba(11, 14, 18, 0.42); }

/* ------------------------------------------------------------
   SEGMENTED CONTROL
   ------------------------------------------------------------ */
.seg {
  display: inline-flex; background: var(--surface-3); border-radius: var(--r-md);
  padding: 3px; gap: 2px; border: 1px solid transparent;
}
.seg button {
  padding: 6px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 550;
  color: var(--ink-2); transition: color var(--t), background var(--t); white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.active {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
}
.dark .seg button.active { background: var(--surface-3); box-shadow: none; border: 1px solid var(--line-strong); padding: 5px 13px; }

/* ------------------------------------------------------------
   STATUS PILLS — colour always encodes a stage/status, never decoration
   ------------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill);
  padding: 2px 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.pill-neutral { background: var(--surface-3); color: var(--ink-2); } .pill-neutral::before { background: var(--ink-3); }
.pill-blue { background: var(--accent-soft); color: var(--accent-text); } .pill-blue::before { background: var(--accent); }
.pill-green { background: var(--ok-soft); color: var(--ok); } .pill-green::before { background: var(--ok); }
.pill-amber { background: var(--warn-soft); color: var(--warn); } .pill-amber::before { background: var(--warn); }
.pill-red { background: var(--bad-soft); color: var(--bad); } .pill-red::before { background: var(--bad); }

/* ------------------------------------------------------------
   TWO-PANE INBOX / DRAWERS
   ------------------------------------------------------------ */
.detail-pane { background: var(--surface); }
@media (min-width: 1024px) { .detail-pane { background: transparent; } }
.detail-pane.show { transform: none; }
#partnerDrawer { background: var(--surface); border-left: 1px solid var(--line); }
.lead-row.lead-active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }

/* ------------------------------------------------------------
   FLOATING BULK-ACTION PILL
   ------------------------------------------------------------ */
.bulk-pill {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(20px) scale(0.97);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px 9px 20px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t-slow);
  z-index: 60;
}
.bulk-pill.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }

/* ------------------------------------------------------------
   PARTNER DRAWER (inline-editable profile)
   ------------------------------------------------------------ */
@keyframes dp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#partnerDrawer.show .dp-section { animation: dp-rise 0.46s var(--ease) both; }
#partnerDrawer.show .dp-section:nth-child(1) { animation-delay: 0.02s; }
#partnerDrawer.show .dp-section:nth-child(2) { animation-delay: 0.05s; }
#partnerDrawer.show .dp-section:nth-child(3) { animation-delay: 0.08s; }
#partnerDrawer.show .dp-section:nth-child(4) { animation-delay: 0.11s; }
#partnerDrawer.show .dp-section:nth-child(5) { animation-delay: 0.14s; }
#partnerDrawer.show .dp-section:nth-child(6) { animation-delay: 0.17s; }
#partnerDrawer.show .dp-section:nth-child(7) { animation-delay: 0.20s; }
#partnerDrawer.show .dp-section:nth-child(8) { animation-delay: 0.23s; }
#partnerDrawer.show .dp-section:nth-child(9) { animation-delay: 0.26s; }
#partnerDrawer.show .dp-section:nth-child(10) { animation-delay: 0.29s; }
#partnerDrawer.show .dp-section:nth-child(11) { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { #partnerDrawer.show .dp-section { animation: none; } }

/* Identity mark: a flat accent tile, not a rainbow gradient bubble. */
.dp-avatar {
  background: var(--accent-soft);
  color: var(--accent-text) !important;
  border: 1px solid var(--accent-line);
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}

.dp-card { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-lg); }
.dp-label {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.075em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Inline-editable field: reads as text until you touch it */
.dp-edit {
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.dp-edit:hover { background: var(--surface-3); }
.dp-edit:focus {
  outline: none; background: var(--surface);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.dp-title { font-size: 1.4rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.018em; }

.dp-status {
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  font-weight: 600; cursor: pointer; transition: background var(--t);
}
.dp-status:hover { background: var(--accent-soft); filter: brightness(1.08); }

/* Micro-interactions: press feedback on every actionable surface */
.dp-action { transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t); }
.dp-action:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.dp-action:active { transform: translateY(0); }
.dp-btn { transition: transform 0.12s var(--ease), box-shadow var(--t), background var(--t); }
.dp-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.dp-btn:active { transform: translateY(0); }
.dp-save:hover { box-shadow: 0 8px 20px -8px var(--accent-line); }

/* ------------------------------------------------------------
   OUTREACH WORKFLOW MODAL
   ------------------------------------------------------------ */
@keyframes ow-pop { from { opacity: 0; transform: scale(0.98) translateY(6px); } to { opacity: 1; transform: none; } }
#outreachModal:not(.hidden) .ow-panel { animation: ow-pop 0.22s var(--ease) both; }
#outreachModal .ow-card { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); }
#outreachModal .ow-btn { transition: transform 0.12s var(--ease), box-shadow var(--t), background var(--t); }
#outreachModal .ow-btn:hover { transform: translateY(-1px); }
#outreachModal .ow-btn:active { transform: translateY(0); }

/* Legibility bump inside the workflow modal (operator: "everything looks
   small, I have to focus a lot just to see"). Kept from the previous theme. */
#outreachModal #ow-title { font-size: 1.4rem; line-height: 1.2; }
#outreachModal #ow-subtitle { font-size: 0.92rem; }
#outreachModal #ow-stepper button { font-size: 0.82rem; padding: 0.45rem 0.8rem; }
#outreachModal #ow-stepper button span { width: 0.5rem; height: 0.5rem; }
#outreachModal #ow-body { font-size: 0.95rem; padding: 1.5rem 1.75rem; }
#outreachModal #ow-body .text-xs { font-size: 0.9rem; line-height: 1.45; }
#outreachModal #ow-body .text-sm { font-size: 1rem; line-height: 1.5; }
#outreachModal #ow-body .text-\[10px\] { font-size: 0.8rem; }
#outreachModal #ow-body .text-\[11px\] { font-size: 0.85rem; }
#outreachModal #ow-body .dp-label { font-size: 0.74rem; }
#outreachModal #ow-body button { font-size: 0.92rem; }
#outreachModal #ow-body summary { font-size: 0.88rem; }
#outreachModal #ow-body table { font-size: 0.9rem; }
#outreachModal .ow-inp { font-size: 0.92rem; padding: 0.6rem 0.85rem; }
#outreachModal #ow-dm-text { font-size: 0.92rem; min-height: 140px; }
#outreachModal #ow-next, #outreachModal #ow-back { font-size: 0.92rem; padding: 0.65rem 1.2rem; }
@media (min-width: 768px) { #outreachModal .ow-panel { max-width: 44rem; } }

/* ------------------------------------------------------------
   FULLCALENDAR
   ------------------------------------------------------------ */
.fc { --fc-border-color: var(--line); --fc-page-bg-color: transparent; --fc-today-bg-color: var(--accent-soft); }
.fc .fc-button-primary {
  background-color: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-size: 0.8125rem; font-weight: 550;
}
.fc .fc-button-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background-color: var(--accent-hover); border-color: var(--accent-hover); }
.fc .fc-daygrid-day-number { color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.fc .fc-col-header-cell-cushion { color: var(--ink-3); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.fc .fc-toolbar-title { color: var(--ink); font-weight: 650; font-size: 1.125rem; letter-spacing: -0.015em; }
.fc .fc-daygrid-event { border-radius: var(--r-xs); font-size: 0.75rem; }

/* ------------------------------------------------------------
   SORTABLE
   ------------------------------------------------------------ */
.sortable-ghost { opacity: 0.55; background: var(--accent-soft) !important; border: 1px dashed var(--accent) !important; }
.sortable-drag { box-shadow: var(--shadow-3); }

/* ------------------------------------------------------------
   RESPONSIVE + PRINT
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  main .p-8 { padding: 1rem !important; }
  main .p-6 { padding: 1rem !important; }
  main .flex-1.p-8 { padding: 1rem !important; }
}
/* touch targets: 44px minimum on coarse pointers (kept LAST so it wins) */
@media (pointer: coarse) {
  .seg button { padding-top: 10px; padding-bottom: 10px; }
  .cmdk-it { padding-top: 12px; padding-bottom: 12px; }
}

@media print {
  .sidebar, .toast, nav, aside, .app-rail, .app-topbar { display: none !important; }
  body { background: #fff; }
  .glass { box-shadow: none; border-color: #ddd; }
}