/* =====================================================================
   Egypt Food Feasibility — Dashboard styles
   Light & dark themes · glassmorphism · animated mesh · ultra-modern
   ===================================================================== */

/* ---------- design tokens (LIGHT — default, Haven warm/green theme) ---------- */
:root {
  --bg: #faf6ee;                  /* warm ivory paper */
  --bg-elev: #ffffff;
  --surface: rgba(255, 252, 244, 0.82);
  --surface-strong: rgba(255, 252, 244, 0.95);
  --surface-hover: rgba(255, 252, 244, 1);
  --border: rgba(45, 106, 79, 0.14);
  --border-strong: rgba(45, 106, 79, 0.22);
  --text: #1f1d18;                /* warm dark, not pure black */
  --text-muted: #5c574a;
  --text-faint: #8a8377;
  --brand: #2d6a4f;                /* Haven forest green (from logo) */
  --brand-2: #40916c;              /* sage */
  --brand-3: #95d5b2;              /* mint */
  --teal: #14b8a6;
  --teal-2: #2dd4bf;
  --success: #2d6a4f;
  --warn: #d97706;
  --error: #b91c1c;
  /* code: light cream + dark text (matches brand) */
  --code-bg: #f3efe4;              /* warm cream surface for code */
  --code-text: #1f1d18;
  --code-border: rgba(45, 106, 79, 0.18);
  --code-inline-bg: rgba(45, 106, 79, 0.10);
  --code-inline-text: #1b4332;
  --code-inline-border: rgba(45, 106, 79, 0.22);
  --code-shadow: 0 1px 2px rgba(45, 70, 50, 0.06);
  /* card surfaces (inside panels) */
  --card-bg: rgba(255, 252, 244, 0.65);
  --card-border: rgba(45, 106, 79, 0.12);
  --card-hover-bg: rgba(255, 252, 244, 1);
  /* pills (metadata chips) */
  --pill-bg: rgba(45, 106, 79, 0.08);
  --pill-border: rgba(45, 106, 79, 0.16);
  /* misc surfaces */
  --hover-bg: rgba(45, 106, 79, 0.08);
  --kbd-bg: rgba(45, 106, 79, 0.10);
  --input-bg: rgba(255, 255, 255, 0.85);
  --btn-text: #1b4332;
  --selection-bg: rgba(45, 106, 79, 0.22);
  --shadow-1: 0 1px 2px rgba(45, 70, 50, 0.06), 0 1px 3px rgba(45, 70, 50, 0.04);
  --shadow-2: 0 4px 12px rgba(45, 70, 50, 0.10), 0 2px 4px rgba(45, 70, 50, 0.06);
  --shadow-3: 0 12px 36px rgba(45, 70, 50, 0.15), 0 4px 12px rgba(45, 70, 50, 0.08);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 360ms;
  --topbar-h: 68px;
  --sidebar-w: 320px;
  --sidebar-min: 220px;
  --sidebar-max: 720px;
  --content-max: 1080px;
  color-scheme: light;
}

/* ---------- design tokens (DARK — opt-in via [data-theme="dark"], brand-tinted indigo) ---------- */
[data-theme="dark"] {
  --bg: #0d0e1f;                /* indigo-black, no warm tones */
  --bg-elev: #1a1b35;
  --surface: rgba(26, 27, 53, 0.82);   /* indigo-tinted glass panels */
  --surface-strong: rgba(26, 27, 53, 0.94);
  --surface-hover: rgba(36, 38, 70, 0.98);
  --border: rgba(165, 180, 252, 0.22); /* indigo-tinted border */
  --border-strong: rgba(165, 180, 252, 0.35);
  --text: #e8eaf6;              /* cool indigo-white */
  --text-muted: #b8bdd9;        /* indigo-gray for legibility */
  --text-faint: #7a7fa3;
  --brand: #a5b4fc;              /* bright indigo, pops on dark indigo */
  --brand-2: #c7d2fe;
  --brand-3: #818cf8;
  --teal: #5eead4;
  --teal-2: #99f6e4;
  --success: #6ee7b7;
  --warn: #fbbf24;
  --error: #fca5a5;
  /* code: deeper indigo dark, matches main bg family */
  --code-bg: #14152e;
  --code-text: #e8eaf6;
  --code-border: rgba(165, 180, 252, 0.25);
  --code-inline-bg: rgba(99, 102, 241, 0.22);
  --code-inline-text: #e8eaf6;
  --code-inline-border: transparent;
  --code-shadow: 0 1px 3px rgba(0, 0, 0, 0.40);
  /* card surfaces — slightly LIGHTER than panel */
  --card-bg: rgba(165, 180, 252, 0.07);
  --card-border: rgba(165, 180, 252, 0.15);
  --card-hover-bg: rgba(165, 180, 252, 0.14);
  --pill-bg: rgba(165, 180, 252, 0.12);
  --pill-border: rgba(165, 180, 252, 0.22);
  --hover-bg: rgba(165, 180, 252, 0.12);
  --kbd-bg: rgba(165, 180, 252, 0.15);
  --input-bg: rgba(255, 255, 255, 0.06);
  --btn-text: #c7d2fe;
  --selection-bg: rgba(165, 180, 252, 0.35);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 12px 36px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}

/* Smooth theme transitions everywhere */
html, body, .glass, .tn, .md-body pre, .file-body, .view-meta-pill, .dir-cell,
.btn, .enter-btn, .stat, .landing-inner, .modal-card, .toast,
input, kbd, code {
  transition: background-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
/* Subpixel font smoothing on dark backgrounds. The body rule above sets
   'antialiased' (grayscale AA) for clean rendering on the cream light
   theme. On dark backgrounds, grayscale AA creates visible dark "halos"
   around glyphs (the "double shadow" effect), especially on bold text.
   Subpixel AA (Windows default) renders clean on dark backgrounds.
   Targeted at body directly (the body rule has its own font-smoothing,
   so we have to override body — inheriting from [data-theme="dark"] on
   <html> wouldn't win the specificity battle). */
[data-theme="dark"] body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* Defensive rendering fixes for dark mode:
     - text-rendering: geometricPrecision — forces the browser to
       use precise glyph shapes (less anti-aliasing smoothing),
       which renders cleaner on dark backgrounds at the cost of
       slightly less smooth curves.
     - -webkit-text-stroke: 0 — explicit override in case any
       intermediate style sheet / browser default applies a stroke.
     - font-feature-settings: normal — drop the Inter-specific
       stylistic alternates ('cv11', 'ss01', 'ss03') which can
       create rendering artifacts on some Windows + Chromium
       combinations (visible as a "double outline" around each
       glyph in the file view).
     - font-family: system-ui first — bypass Inter in dark mode
       entirely. Inter at certain sizes + weights + dark backgrounds
       has a known rendering quirk on some Windows + Chromium
       combinations that produces a visible "double outline" (each
       glyph appears stroked). On Windows, system-ui = Segoe UI,
       which renders cleanly on dark backgrounds. The light theme
       keeps Inter (the user prefers the subtle "halo" effect there). */
  text-rendering: geometricPrecision;
  -webkit-text-stroke: 0;
  font-feature-settings: normal;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', sans-serif;
}
/* NUCLEAR: zero out any text-shadow or text-stroke from any source
   (CSS, browser default, extension, font-hinting artifact). The "white
   shadow" the user sees in light mode behind every glyph looks awesome
   there but merges with the white text in dark mode and reads as a
   "double outline". This rule kills it in dark mode regardless of
   where it originates. If the "double outline" persists after this,
   the cause is below CSS (font rasterizer / OS ClearType). */
[data-theme="dark"] *,
[data-theme="dark"] *::before,
[data-theme="dark"] *::after {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

kbd {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--kbd-bg);
  color: var(--text);
  border: 1px solid var(--border);
  line-height: 1;
  display: inline-block;
}

code, pre, .code { font-family: 'IBM Plex Mono', 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace; font-feature-settings: 'liga' 1, 'calt' 1; }
code:not(pre code) {
  background: var(--code-inline-bg);
  color: var(--code-inline-text);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  border: 1px solid var(--code-inline-border);
  font-weight: 500;
}

::selection { background: var(--selection-bg); }

/* ---------- custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.24); background-clip: padding-box; border: 2px solid transparent; }

/* =====================================================================
   BACKGROUND — warm paper with subtle organic gradient (Haven theme)
   ===================================================================== */
.mesh-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--bg);
}
.mesh-blob {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(100px); opacity: 0.42; mix-blend-mode: multiply;
  animation: drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.blob-1 {
  background: radial-gradient(circle at 30% 30%, #b7e4c7 0%, transparent 60%);
  top: -20vmax; left: -15vmax;
}
.blob-2 {
  background: radial-gradient(circle at 70% 70%, #d8f3dc 0%, transparent 60%);
  top: 20vmax; right: -25vmax;
  animation-delay: -7s;
  animation-duration: 32s;
}
.blob-3 {
  background: radial-gradient(circle at 50% 50%, #f4e4bc 0%, transparent 65%);
  bottom: -25vmax; left: 10vmax;
  animation-delay: -14s;
  animation-duration: 38s;
  opacity: 0.5;
}
[data-theme="dark"] .mesh-blob { mix-blend-mode: screen; opacity: 0.18; }
[data-theme="dark"] .blob-1 { background: radial-gradient(circle at 30% 30%, #3730a3 0%, transparent 60%); }
[data-theme="dark"] .blob-2 { background: radial-gradient(circle at 70% 70%, #0d9488 0%, transparent 60%); }
[data-theme="dark"] .blob-3 { background: radial-gradient(circle at 50% 50%, #6366f1 0%, transparent 65%); }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(8vmax, -6vmax, 0) scale(1.1); }
  100% { transform: translate3d(-6vmax, 4vmax, 0) scale(0.95); }
}
.mesh-grain {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.42  0 0 0 0 0.31  0 0 0 0.10 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
[data-theme="dark"] .mesh-grain { opacity: 0.10; }

/* =====================================================================
   LANDING PAGE
   ===================================================================== */
.landing {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgba(250, 250, 250, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: landing-fade-in 400ms var(--ease);
}
[data-theme="dark"] .landing { background: rgba(10, 10, 15, 0.6); }
.landing.hidden { display: none; }
.landing-inner {
  width: min(900px, 92vw);
  padding: 56px 48px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: landing-rise 600ms var(--ease) 60ms both;
}
.landing-inner::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(82, 183, 136, 0.14), transparent 60%),
    radial-gradient(700px 280px at 100% 100%, rgba(149, 213, 178, 0.16), transparent 60%);
  pointer-events: none;
}
@keyframes landing-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* project prose — 3-paragraph project description shown in deployment root view */
.project-prose {
  text-align: left;
  margin: 8px 0 28px;
  padding: 20px 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  color: var(--text);
}
.project-prose h2 {
  font-size: 0.74rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand) !important;
  margin: 18px 0 8px !important;
  padding: 0;
  border: 0 !important;
  line-height: 1.2;
}
.project-prose h2:first-child { margin-top: 0 !important; }
.project-prose p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
}
.project-prose p:last-child { margin: 0; }
.project-prose code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.84em;
  background: var(--code-inline-bg);
  color: var(--code-inline-text);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--code-inline-border);
}

.landing-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(45, 106, 79, 0.10);
  border: 1px solid rgba(45, 106, 79, 0.22);
  color: var(--brand);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
  position: relative;
}
.landing-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.6);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}
.landing-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 22px 0 14px;
  position: relative;
}
.title-grad {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: shift 8s ease-in-out infinite;
}
@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.landing-sub {
  font-size: 1.05rem; line-height: 1.55;
  color: var(--text-muted);
  max-width: 640px; margin: 0 auto 32px;
  position: relative;
}
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 0 0 32px;
  position: relative;
}
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 16px 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); background: var(--card-hover-bg); }
.stat-value {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; margin-left: 2px; }
.stat-label {
  font-size: 0.74rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 6px;
}
.enter-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-size: 1rem; font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.30), var(--shadow-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.enter-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(99, 102, 241, 0.38), var(--shadow-2); }
.enter-btn:active { transform: translateY(0); }
.enter-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
}
.enter-btn:hover::after { transform: translateX(100%); }
.enter-btn svg { transition: transform var(--t-base) var(--ease); }
.enter-btn:hover svg { transform: translateX(3px); }
.landing-hint {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-faint);
  position: relative;
}

/* =====================================================================
   APP LAYOUT
   ===================================================================== */
.app {
  position: relative; z-index: 10;
  height: 100vh; display: flex; flex-direction: column;
}
.app.hidden { display: none; }
.hidden { display: none !important; }

/* top bar — logo on left, all icons on right */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--surface-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
  box-shadow: var(--shadow-1);
  overflow: visible;
  flex-wrap: nowrap;
  justify-content: space-between;     /* push logo left, icons right */
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.topbar-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
  height: 40px; width: auto; max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(45, 106, 79, 0.15));
  transition: filter var(--t-base) var(--ease);
}
.logo-mark:hover { filter: drop-shadow(0 4px 10px rgba(45, 106, 79, 0.25)); }
.logo-text { min-width: 0; }
.logo-title { font-weight: 700; font-size: 1rem; line-height: 1.1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-sub   { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }

/* Nav buttons (back/forward) */
.nav-group { display: flex; gap: 2px; padding: 3px; background: var(--hover-bg); border-radius: 9px; flex-shrink: 0; }
.nav-btn { width: 26px; height: 26px; }
.nav-btn svg { width: 14px; height: 14px; }
.nav-btn.is-disabled, .nav-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
  color: var(--text-faint);
}
.nav-btn.is-disabled:hover, .nav-btn:disabled:hover {
  background: transparent; color: var(--text-faint); border-color: transparent;
}
.nav-btn:not(.is-disabled):hover { background: var(--surface-hover); }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 8px; color: var(--text-muted);
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--hover-bg); color: var(--text); border-color: var(--border); }
.icon-btn:active { transform: scale(0.96); }

.ghost-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.84rem; font-weight: 500;
  transition: all var(--t-fast) var(--ease);
}
.ghost-link:hover { background: var(--hover-bg); color: var(--text); text-decoration: none; }
/* If used as plain icon-btn class (no .ghost-link), override link colors */
a.icon-btn { color: var(--text-muted); }
a.icon-btn:hover { color: var(--text); text-decoration: none; }

/* theme toggle: sun shows in dark mode (click to go light), moon shows in light mode (click to go dark) */
.theme-toggle { position: relative; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon {
  position: absolute; inset: 0; margin: auto;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.theme-toggle .icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
.theme-toggle.is-flashing { animation: theme-pulse 400ms var(--ease); }
@keyframes theme-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.85) rotate(-12deg); }
  100% { transform: scale(1) rotate(0); }
}

/* search */
.search-wrap {
  position: relative;
  width: 100%;
  display: flex; align-items: center;
}
.search-wrap-compact {
  width: 220px;
  flex-shrink: 0;
}
.search-icon {
  position: absolute; left: 10px; color: var(--text-faint);
  pointer-events: none;
}
#search-input {
  width: 100%;
  padding: 5px 10px 5px 30px;
  font-size: 0.78rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  transition: all var(--t-fast) var(--ease);
  height: 28px;
}
#search-input::placeholder { color: var(--text-faint); }
#search-input:focus {
  outline: none;
  background: var(--bg-elev);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.search-kbd {
  position: absolute; right: 8px;
  font-size: 0.7rem;
  background: var(--kbd-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 5px;
}

/* layout — FLEXBOX for stability. Sidebar sizes to content; content fills the rest. */
.layout {
  flex: 1; min-height: 0;
  display: flex;
  gap: 0;
  padding: 16px;
  position: relative;
  z-index: 10;
  align-items: flex-start;          /* sidebar sizes to content; content fills height */
  min-width: 0;
}
.layout > .sidebar {
  flex: 0 0 var(--sidebar-w, 320px);
  min-width: 0;
  max-height: calc(100vh - var(--topbar-h) - 32px); /* fit within viewport */
  transition: flex-basis var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
}
.layout > .resize-handle {
  flex: 0 0 8px;
  min-width: 8px;
  align-self: stretch;             /* handle runs full height for easier grabbing */
  height: calc(100vh - var(--topbar-h) - 32px);
}
.layout > .content {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  align-self: stretch;
}
/* When sidebar is collapsed: sidebar collapses to 0, content takes full width */
.layout.is-sidebar-collapsed > .sidebar {
  flex: 0 0 0;
  overflow: hidden;
  margin-right: -8px; /* absorb the resize-handle space too */
}
.layout.is-sidebar-collapsed > .resize-handle {
  display: none;
}
.layout.is-sidebar-collapsed > .content {
  flex: 1 1 100%;
}

/* resize handle between sidebar and content — SUBTLE: no visible line until hover */
.resize-handle {
  width: 8px;
  cursor: col-resize;
  position: relative;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  outline: none;
  touch-action: none;
  background: transparent;
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease);
}
.resize-handle::before {
  content: '';
  position: absolute;
  left: 50%; top: 12px; bottom: 12px;
  width: 1px;
  background: transparent;
  border-radius: 1px;
  transform: translateX(-50%);
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.resize-handle:hover,
.resize-handle:focus-visible {
  background: var(--hover-bg);
}
.resize-handle:hover::before,
.resize-handle:focus-visible::before,
.resize-handle.is-dragging::before {
  background: var(--brand);
  width: 2px;
}
.resize-handle .resize-grip {
  width: 3px; height: 28px;
  background: var(--text-faint);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.resize-handle:hover .resize-grip,
.resize-handle:focus-visible .resize-grip,
.resize-handle.is-dragging .resize-grip { opacity: 0.45; }
body.is-resizing { cursor: col-resize !important; user-select: none; }
body.is-resizing .resize-handle { background: var(--hover-bg); }
body.is-resizing .resize-handle::before { background: var(--brand); width: 2px; }
body.is-resizing .resize-handle .resize-grip { opacity: 0.55; }

.glass {
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
/* When the content pane holds the network graph, drop the glass white
   surface so the graph blends seamlessly with the page background. */
.content.no-glass, .layout.has-graph .content.glass {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent;
  box-shadow: none;
}
/* When the graph is open, the content pane should size to its content
   in the VERTICAL direction only (so the pane ENDS at the last line
   of the graph/legend, no empty space below). Width stays as before
   (filling available space) so the file view still works when the
   user opens a file from the graph.
   NOTE: this approach broke the file view. Reverted — the right pane
   now stretches to the layout's height (same as a normal file view).
   The graph still has empty space below the legend. */
.layout.has-graph > .content {
  /* disabled — see note */
}
[data-theme="dark"] .glass { background: rgba(26, 27, 53, 0.7); border-color: var(--border); }

/* sidebar */
.sidebar {
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.sidebar-title {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 0;
}
.sidebar-meta { font-size: 0.74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tree {
  flex: 1; min-height: 0; overflow: auto;
  padding: 8px 6px 16px;
  font-size: 0.86rem;
}
.tree-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 16px; color: var(--text-muted);
  font-size: 0.84rem;
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(99, 102, 241, 0.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* tree node */
.tn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  position: relative;
  color: var(--text);
  transition: background var(--t-fast) var(--ease);
  animation: tn-in 280ms var(--ease) both;
}
@keyframes tn-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tn:hover { background: rgba(99, 102, 241, 0.10); }
[data-theme="dark"] .tn:hover { background: rgba(165, 180, 252, 0.12); }
.tn.is-selected { background: rgba(99, 102, 241, 0.18); color: var(--brand); font-weight: 500; }
[data-theme="dark"] .tn.is-selected { background: rgba(165, 180, 252, 0.20); color: var(--brand-2); }
.tn.is-selected::before {
  content: ''; position: absolute; left: -6px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
}
.tn-toggle {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--text-faint);
  border-radius: 4px;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.tn.is-open .tn-toggle { transform: rotate(90deg); color: var(--brand); }
.tn-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--text-faint);
}
.tn.is-open > .tn-icon { color: var(--brand); }
.tn.is-file .tn-icon { color: #94a3b8; }
.tn.is-md .tn-icon { color: #6366f1; }
.tn.is-py .tn-icon { color: #0ea5e9; }
.tn.is-json .tn-icon { color: #f59e0b; }
.tn.is-pdf .tn-icon { color: #ef4444; }
.tn.is-docx .tn-icon { color: #2563eb; }

.tn-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-meta { font-size: 0.7rem; color: var(--text-faint); margin-left: 4px; }
.tn-children {
  margin-left: 14px;
  border-left: 1px dashed var(--border);
  padding-left: 6px;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-base) var(--ease);
}
.tn-wrap.is-open > .tn-children { max-height: 5000px; }

/* highlight match */
.tn mark {
  background: rgba(245, 158, 11, 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* main content */
.content {
  overflow: auto;
  padding: 0;
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0;
}

/* empty state */
.empty-state {
  margin: auto;
  padding: 40px;
  text-align: center;
  max-width: 480px;
}
.empty-illu {
  width: 88px; height: 88px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(20,184,166,0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--brand);
}
[data-theme="dark"] .empty-illu {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(20,184,166,0.18));
  color: var(--brand-2);
}
.empty-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; }
.empty-sub { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0; }

/* content view (file/dir) */
.view { padding: 28px 36px 60px; max-width: var(--content-max); width: 100%; margin: 0 auto; }
.view-breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
}
.view-breadcrumb a {
  color: var(--text-muted);
  border-radius: 4px;
  padding: 1px 4px;
}
.view-breadcrumb a:hover { background: var(--hover-bg); color: var(--text); text-decoration: none; }
.view-breadcrumb .sep { color: var(--text-faint); }
.view-breadcrumb .here { color: var(--text); font-weight: 500; }

.view-title {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 8px;
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
}
.view-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 24px;
}
.view-meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* dir-info card */
.dir-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 720px) { .dir-card { grid-template-columns: 1fr; } }
.dir-cell {
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  transition: all var(--t-base) var(--ease);
}
.dir-cell:hover { background: var(--card-hover-bg); box-shadow: var(--shadow-2); }
.dir-cell-h {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--brand); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.dir-cell-p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text); }

/* markdown body */
.md-body {
  color: var(--text);
  font-size: 0.84rem;             /* smaller, easier to scan long docs */
  line-height: 1.65;
}
.md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 1.6em; margin-bottom: 0.6em;
  scroll-margin-top: 80px;
  color: var(--text);
}
.md-body h1 { font-size: 1.45rem; padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.md-body h2 { font-size: 1.18rem; color: var(--text); }
.md-body h3 { font-size: 1.02rem; color: var(--text); }
.md-body h4, .md-body h5, .md-body h6 { color: var(--text-muted); }
.md-body p, .md-body li, .md-body td, .md-body th { line-height: 1.65; color: var(--text); font-size: 0.84rem; }
.md-body strong, .md-body b { color: var(--text); font-weight: 700; }
.md-body em, .md-body i { color: var(--text); }
.md-body p { margin: 0.7em 0; }
.md-body ul, .md-body ol { padding-left: 1.4em; margin: 0.5em 0; }
.md-body li { margin: 0.2em 0; }
.md-body a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(99,102,241,0.3); }
.md-body a:hover { text-decoration-color: var(--brand); }
.md-body blockquote {
  margin: 1em 0; padding: 10px 16px;
  background: rgba(99,102,241,0.06);
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted);
}
[data-theme="dark"] .md-body blockquote { background: rgba(129, 140, 248, 0.10); }
.md-body blockquote p { color: var(--text-muted); margin: 0; }
.md-body table {
  border-collapse: collapse; width: 100%;
  margin: 1em 0; font-size: 0.8rem;
  /* light: warm ivory table with green header accent */
  background: rgba(255, 252, 244, 0.7);
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(45, 106, 79, 0.18);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(45, 70, 50, 0.05);
}
.md-body th, .md-body td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid rgba(45, 106, 79, 0.12);
  color: var(--text);
}
.md-body th {
  /* warm green header for light mode */
  background: linear-gradient(180deg, rgba(45, 106, 79, 0.12) 0%, rgba(64, 145, 108, 0.08) 100%);
  font-weight: 700;
  color: #1b4332;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.md-body tr:nth-child(even) td { background: rgba(45, 106, 79, 0.03); }
.md-body tr:hover td { background: rgba(45, 106, 79, 0.06); }
.md-body tr:last-child td { border-bottom: 0; }
/* dark mode tables: brand-tinted indigo, no warm tones */
[data-theme="dark"] .md-body table {
  background: rgba(26, 27, 53, 0.5);
  border: 1px solid rgba(165, 180, 252, 0.18);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .md-body th, [data-theme="dark"] .md-body td {
  border-bottom: 1px solid rgba(165, 180, 252, 0.10);
  color: var(--text);
}
[data-theme="dark"] .md-body th {
  background: linear-gradient(180deg, rgba(165, 180, 252, 0.18) 0%, rgba(165, 180, 252, 0.10) 100%);
  color: #c7d2fe;
}
[data-theme="dark"] .md-body tr:nth-child(even) td { background: rgba(165, 180, 252, 0.04); }
[data-theme="dark"] .md-body tr:hover td { background: rgba(165, 180, 252, 0.10); }
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }
.md-body img { max-width: 100%; border-radius: 8px; }

/* code blocks (with copy btn) */
.md-body pre, .code-block {
  position: relative;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 12px 14px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.82rem;             /* smaller for long code blocks */
  line-height: 1.6;
  margin: 1em 0;
  border: 1px solid var(--code-border);
  box-shadow: var(--code-shadow);
  font-weight: 400;
  white-space: pre-wrap !important;  /* override Prism's pre[class*=language-] { white-space: pre } */
}
.md-body pre code, .code-block code { background: transparent; padding: 0; color: inherit; border: 0; font-size: inherit; }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 8px;
  background: var(--code-inline-bg);
  border: 1px solid var(--code-inline-border);
  color: var(--code-inline-text);
  font-size: 0.72rem;
  border-radius: 6px;
  opacity: 0;
  transition: all var(--t-fast) var(--ease);
}
.md-body pre:hover .copy-btn, .code-block:hover .copy-btn { opacity: 1; }
.copy-btn:hover { filter: brightness(0.95); }
.copy-btn.is-copied { background: rgba(16, 185, 129, 0.15); color: var(--success); border-color: rgba(16, 185, 129, 0.3); }

/* quick-card (used in empty state for recent + quick links) */
.quick-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  font-size: 0.86rem;
  color: var(--text);
  text-decoration: none !important;
  transition: all 200ms;
}
.quick-card:hover {
  background: var(--card-hover-bg);
  border-color: var(--brand);
  text-decoration: none !important;
}
.quick-card-large {
  flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
}

/* file-body (raw text, not markdown) */
.file-body {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 16px 18px;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap !important;  /* override Prism's pre[class*=language-] { white-space: pre } */
  position: relative;
  border: 1px solid var(--code-border);
  box-shadow: var(--code-shadow);
  font-weight: 400;
}
.file-body code {
  display: block;  /* so block-level .line spans actually render as block
                      (browser auto-correction was forcing them inline) */
  white-space: pre-wrap !important;
}
.file-body-wrap { position: relative; }

/* binary placeholder */
.bin-card {
  padding: 40px;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.bin-icon { font-size: 3rem; }
.bin-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 0.86rem; font-weight: 500;
  background: white; color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  transition: all var(--t-fast) var(--ease);
}
.btn { background: var(--card-bg); border-color: var(--border-strong); color: var(--text); }
.btn:hover { background: var(--card-hover-bg); border-color: var(--brand); color: var(--btn-text); }
.btn-primary { background: var(--brand); color: white; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-2); color: white; }
[data-theme="dark"] .btn-primary:hover { background: var(--brand); }

/* PDF viewer */
.pdf-viewer {
  display: flex; flex-direction: column; gap: 12px;
  background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
}
.pdf-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pdf-page-num { font-size: 0.84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pdf-canvas-wrap { overflow: auto; max-height: 70vh; text-align: center; background: var(--bg-elev); border-radius: 8px; padding: 16px; }
.pdf-canvas-wrap canvas { box-shadow: var(--shadow-2); max-width: 100%; height: auto; }

/* skeleton */
.skeleton {
  background: linear-gradient(90deg, rgba(15,23,42,0.04) 0%, rgba(15,23,42,0.08) 50%, rgba(15,23,42,0.04) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 6px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* toast */
.toast-region {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--code-bg); color: var(--code-text);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.86rem;
  box-shadow: var(--shadow-3);
  animation: toast-in 240ms var(--ease);
  display: flex; align-items: center; gap: 8px;
  pointer-events: auto;
  border: 1px solid var(--border);
}
.toast.success { background: #065f46; color: white; border-color: transparent; }
.toast.error   { background: #991b1b; color: white; border-color: transparent; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast.fade-out { animation: toast-out 200ms var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* modal */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  animation: modal-in 200ms var(--ease);
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.6); }
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 80vh; overflow: auto;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 28px 32px;
  animation: modal-rise 240ms var(--ease);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close { position: absolute; top: 12px; right: 12px; }
.modal-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 12px; }
.modal-body p { color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; }
.modal-h3 { font-size: 0.84rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 18px 0 8px; }
.kbd-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.kbd-list li { font-size: 0.88rem; color: var(--text); }

/* search results dropdown (could add later) */

/* =====================================================================
   FILE REFERENCE LINKS (auto-linked in markdown)
   ===================================================================== */
.file-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin: 0 1px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 0.86em;
  font-weight: 600;
  color: var(--brand);
  background: var(--code-inline-bg);
  border: 1.5px solid var(--code-inline-border);
  border-radius: 6px;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  vertical-align: baseline;
  line-height: 1.5;
  white-space: nowrap;
}
.file-ref::before {
  content: '📄';
  font-size: 0.95em;
  filter: saturate(1.2);
}
.file-ref:hover {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(45, 106, 79, 0.30);
}
[data-theme="dark"] .file-ref:hover { box-shadow: 0 3px 10px rgba(165, 180, 252, 0.35); }
.file-ref:active { transform: translateY(0); }
.file-ref.is-missing {
  color: var(--error);
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.25);
  cursor: not-allowed;
}
.file-ref.is-missing::before { content: '⚠️'; }

/* When the file ref is inside an inline <code> (backticks) — drop the pill
   styling so it doesn't stack a second box on top of the code's background */
.file-ref.file-ref-inline,
code .file-ref,
.file-ref-inline {
  padding: 0 3px;
  background: transparent !important;
  border: 0 !important;
  color: var(--brand) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brand-2);
  text-underline-offset: 2px;
  border-radius: 0;
  display: inline;
  align-items: baseline;
  gap: 0;
  white-space: normal;
  font-size: inherit;
}
.file-ref.file-ref-inline::before,
code .file-ref::before { content: ''; }
.file-ref.file-ref-inline:hover,
code .file-ref:hover {
  color: var(--brand-2) !important;
  text-decoration-color: var(--brand);
  transform: none;
  box-shadow: none;
  background: transparent !important;
}

/* =====================================================================
   MERMAID DIAGRAMS
   ===================================================================== */
.mermaid {
  display: flex;
  justify-content: center;
  margin: 1.5em 0;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  min-height: 60px;
}
.mermaid svg { max-width: 100%; height: auto; }
.mermaid-error {
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius);
  color: var(--error);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.84rem;
  white-space: pre-wrap;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 880px) {
  .layout { flex-direction: column; }
  .sidebar { max-height: 38vh; }
  .resize-handle { display: none; }
  :root { --sidebar-w: 100%; }
  .logo-sub { display: none; }
  .search-wrap-compact { width: 140px; }
  .topbar-right .icon-btn:not(.nav-btn) { display: none; }
}

/* =====================================================================
   SEARCH PANEL (full-text results dropdown)
   ===================================================================== */
.search-panel {
  position: fixed;
  z-index: 1000;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 0.84rem;
  color: var(--text);
  transition: opacity var(--t-fast) var(--ease);
}
.search-panel.hidden { display: none; }
.search-panel::-webkit-scrollbar { width: 8px; }
.search-panel::-webkit-scrollbar-track { background: transparent; }
.search-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.search-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
}
.search-panel-head strong { color: var(--text); }
.search-panel-stats { color: var(--text-faint); }

.search-panel-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
}
.search-panel-title { font-weight: 500; color: var(--text); margin-bottom: 4px; }
.search-panel-sub { font-size: 0.78rem; color: var(--text-faint); }

.search-section { border-top: 1px solid var(--border); }
.search-section:first-of-type { border-top: none; }
.search-section-h {
  padding: 8px 14px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none !important;
  border-left: 2px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.search-result:hover,
.search-result.is-focused {
  background: var(--hover-bg);
  border-left-color: var(--brand);
}
.search-result-icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}
.search-result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-result-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-result-line {
  font-size: 0.7rem;
  color: var(--text-faint);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}
.search-result-path {
  font-size: 0.74rem;
  color: var(--text-faint);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-snippet {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.4;
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.search-result-size {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-faint);
  font-family: 'IBM Plex Mono', monospace;
  align-self: center;
}
.search-result mark,
.search-result-name mark,
.search-result-snippet mark {
  background: rgba(250, 204, 21, 0.35);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}
.search-more {
  padding: 6px 14px 10px;
  font-size: 0.74rem;
  color: var(--text-faint);
  font-style: italic;
}

/* =====================================================================
   DIAGRAM ZOOM (magnifying-glass button + lightbox modal)
   ===================================================================== */
.mermaid-wrap {
  position: relative;
  cursor: zoom-in;
}
.diagram-zoom-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-1);
}
.mermaid-wrap:hover .diagram-zoom-btn,
.diagram-zoom-btn:focus-visible {
  opacity: 1;
}
.diagram-zoom-btn:hover {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
  transform: scale(1.05);
}

.diagram-modal-card {
  width: min(1200px, 95vw);
  max-height: 90vh;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.diagram-modal-title {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.diagram-modal-content {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: auto;
}
.diagram-modal-content .mermaid {
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1.15rem;
  min-height: 0;
}
.diagram-modal-content .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* =====================================================================
   URL LINKS (autolink for bare http://, https://, www.)
   ===================================================================== */
.md-body a.url-ref,
.url-ref {
  color: var(--brand-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(64, 145, 108, 0.4);
  word-break: break-all;
}
.md-body a.url-ref:hover,
.url-ref:hover {
  text-decoration-color: var(--brand);
  color: var(--brand);
}

/* =====================================================================
   FILE VIEWER — line anchors + search-target highlight
   ===================================================================== */
/* Fallback marker for text files — Prism destroys the line span so we draw
   a yellow bar at the line's Y position from outside the <code>. */
.line-marker {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6em;
  background: rgba(250, 204, 21, 0.55);
  box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.30);
  border-radius: 3px;
  animation: search-target-fade 2.4s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}
.file-body code .line {
  display: block;
  min-height: 1em;
  transition: background 0.3s ease;
}
.file-body code .line.search-target,
.md-body .search-target {
  background: rgba(250, 204, 21, 0.55) !important;
  box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.30);
  border-radius: 3px;
  animation: search-target-fade 2.4s ease-out forwards;
}
@keyframes search-target-fade {
  0%   { background: rgba(250, 204, 21, 0.85) !important; box-shadow: 0 0 0 6px rgba(250, 204, 21, 0.40); }
  60%  { background: rgba(250, 204, 21, 0.45) !important; box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.25); }
  100% { background: rgba(250, 204, 21, 0) !important; box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}