/* ─────────────────────────────────────────────────────────────────────
   VA Growth Suite — RiLiGar Zen Aesthetics
   Adapted from: riligar-design-system / colors_and_type.css
   System:       Monochrome, type-first, generous whitespace
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* font families */
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* type scale */
  --fz-hero: 72px;
  --fz-display: 56px;
  --fz-h1: 48px;
  --fz-h2: 32px;
  --fz-h3: 24px;
  --fz-xl: 20px;
  --fz-lg: 18px;
  --fz-md: 16px;
  --fz-sm: 14px;
  --fz-xs: 12px;
  --fz-tag: 11px;
  --fz-micro: 10px;
  --fz-metric: 64px;
  --fz-metric-xl: 80px;

  /* weights */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;
  --fw-ultra: 950;

  /* tracking */
  --ls-hero: -0.05em;
  --ls-display: -0.04em;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.12em;
  --ls-overline: 0.10em;
  --ls-uppercase: 0.06em;

  /* line height */
  --lh-hero: 1.0;
  --lh-tight: 1.1;
  --lh-snug: 1.4;
  --lh-body: 1.6;

  /* neutral scale */
  --gray-0: #F8F8F8;
  --gray-1: #F3F4F6;
  --gray-2: #E5E7EB;
  --gray-3: #D1D5DB;
  --gray-4: #9CA3AF;
  --gray-5: #6B7280;
  --gray-6: #4B5563;
  --gray-7: #374151;
  --gray-8: #1F2937;
  --gray-9: #34322D; /* Brand Black — warm-tinted */

  /* brand scale (warm siblings to gray-9) */
  --brand-9: #2A2824; /* pressed dark */

  /* status accents (sparingly) */
  --blue-0: #E7F5FF;
  --blue-5: #339AF0;
  --blue-9: #1864AB;
  --green-5: #51CF66;
  --green-7: #2F9E44;
  --red-0: #FFF5F5;
  --red-1: #FFE3E3;
  --red-6: #FA5252;
  --red-7: #E03131;
  --red-8: #C92A2A;
  --orange-5: #FF922B;

  /* semantic */
  --fg-primary: var(--gray-9);
  --fg-secondary: var(--gray-7);
  --fg-tertiary: var(--gray-5);
  --fg-muted: var(--gray-4);
  --fg-on-dark: #FFFFFF;

  --bg-app: #FFFFFF;
  --bg-soft: var(--gray-0);
  --bg-subtle: var(--gray-1);
  --bg-inverse: var(--gray-9);
  --bg-inverse-deep: var(--brand-9);

  --border-default: var(--gray-2);
  --border-subtle: var(--gray-1);
  --border-strong: var(--gray-3);

  /* one radius. always 8. */
  --radius: 8px;
  --radius-pill: 9999px;

  /* shadows — hairline, never atmospheric */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-bento-hover: 0 20px 40px rgba(0, 0, 0, 0.05);
  --shadow-cta: 0 20px 40px rgba(0, 0, 0, 0.10);

  /* motion */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
}

/* ─── Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body,
html {
  font-family: var(--font-sans) !important;
}
body {
  margin: 0;
  font-size: var(--fz-sm);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*::selection { background: var(--gray-9); color: white; }

/* ─── DaisyUI / Tailwind tonal overrides ───────────────────────────── */
/* The codebase uses DaisyUI's `corporate` theme. We override the most
   visible DaisyUI semantic colors with the Zen monochrome palette so
   existing views inherit the new aesthetic without per-file edits. */

[data-theme="corporate"] {
  --rounded-box: 8px;
  --rounded-btn: 8px;
  --rounded-badge: 9999px;
  --animation-btn: 0.15s;
  --btn-text-case: none;
}

/* Backgrounds and content colors expressed in HSL for DaisyUI v4. */
[data-theme="corporate"] {
  --p:  44 8% 19%;     /* primary       -> gray-9 #34322D */
  --pf: 44 9% 15%;     /* primary-focus -> brand-9 */
  --pc: 0  0% 100%;    /* primary-content (white) */

  --s:  44 8% 19%;     /* secondary     -> same brand black */
  --sf: 44 9% 15%;
  --sc: 0  0% 100%;

  --a:  140 56% 56%;   /* accent        -> green-5 #51CF66 */
  --ac: 0   0% 100%;

  --n:  44 8% 19%;     /* neutral       -> gray-9 */
  --nc: 0  0% 100%;

  --b1: 0  0% 100%;    /* base-100 white */
  --b2: 0  0% 97.3%;   /* base-200 -> gray-0 #F8F8F8 */
  --b3: 220 14% 91%;   /* base-300 -> gray-2 */
  --bc: 44 8% 19%;     /* base-content gray-9 */

  --in: 211 86% 57%;   /* info  blue-5 */
  --su: 134 54% 41%;   /* success green-7 */
  --wa: 28  100% 58%;  /* warning orange-5 */
  --er: 0   80% 65%;   /* error red-6 */
}

/* Force monochrome on common text-color utilities (DaisyUI primary
   accents, kept tonally restrained) */
.text-primary { color: var(--gray-9) !important; }
.bg-primary { background-color: var(--gray-9) !important; color: white !important; }
.border-primary { border-color: var(--gray-9) !important; }
.bg-primary\/10 { background-color: rgba(52, 50, 45, 0.06) !important; }
.bg-primary\/20 { background-color: rgba(52, 50, 45, 0.10) !important; }
.border-primary\/20 { border-color: rgba(52, 50, 45, 0.16) !important; }
.text-primary-content { color: #fff !important; }

/* ─── Buttons — single system, dark-fill primary, 8px radius ──────── */

.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
  min-height: 0;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--gray-9);
  color: var(--fg-on-dark);
  border-color: var(--gray-9);
}
.btn-primary:hover {
  background: var(--brand-9);
  border-color: var(--brand-9);
  color: var(--fg-on-dark);
}

.btn-secondary,
.btn-outline {
  background: white;
  color: var(--gray-9);
  border-color: var(--border-default);
}
.btn-secondary:hover,
.btn-outline:hover {
  background: var(--gray-0);
  border-color: var(--border-strong);
  color: var(--gray-9);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-7);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--gray-1);
  color: var(--gray-9);
}

.btn-error {
  background: var(--red-6);
  color: white;
  border-color: var(--red-6);
}
.btn-error:hover { background: var(--red-8); border-color: var(--red-8); color: white; }

.btn-sm { padding-inline: 0.875rem; height: 2rem; font-size: 13px; }
.btn-xs { padding-inline: 0.625rem; height: 1.625rem; font-size: 11px; font-weight: var(--fw-bold); }
.btn-square { aspect-ratio: 1 / 1; padding-inline: 0; }

/* ─── Badges — pill shape (the one exception to 8px) ──────────────── */

.badge {
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  font-size: 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: white;
  color: var(--gray-7);
  padding: 2px 8px;
  height: auto;
}
.badge-primary { background: var(--gray-9); color: white; border-color: var(--gray-9); }
.badge-secondary { background: var(--gray-1); color: var(--gray-9); border-color: var(--border-default); }
.badge-ghost { background: transparent; color: var(--gray-5); border-color: var(--border-default); }
.badge-success { background: white; color: var(--green-7); border-color: var(--green-5); }
.badge-warning { background: white; color: var(--orange-5); border-color: var(--orange-5); }
.badge-error { background: white; color: var(--red-7); border-color: var(--red-6); }

/* ─── Cards / Stats — hairline border, soft surface, 8px radius ───── */

.card,
.stat,
.stats {
  background: white;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.stat-title { font-size: var(--fz-tag); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--fg-muted); }
.stat-value { font-family: var(--font-sans); font-size: 32px; font-weight: var(--fw-black); letter-spacing: var(--ls-display); color: var(--gray-9); }
.stat-desc { font-size: var(--fz-xs); color: var(--gray-5); font-weight: var(--fw-medium); }
.stat-figure { color: var(--gray-9); }

/* ─── Inputs / selects ────────────────────────────────────────────── */

.input,
.select,
.textarea,
.file-input {
  background: white;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  color: var(--gray-9);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--gray-9);
  box-shadow: 0 0 0 3px rgba(52, 50, 45, 0.10);
}
.input-bordered, .select-bordered, .textarea-bordered { border-color: var(--border-default); }

/* ─── Tables ──────────────────────────────────────────────────────── */

.table th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-muted);
  background: var(--gray-0);
  border-bottom: 1px solid var(--border-default);
}
.table td { border-bottom: 1px solid var(--border-subtle); color: var(--gray-7); }
.table tr:hover td { background: var(--gray-0); }

/* ─── Breadcrumbs ─────────────────────────────────────────────────── */

.breadcrumbs > ul > li > a,
.breadcrumbs > ul > li {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--gray-5);
}
.breadcrumbs > ul > li:last-child { color: var(--gray-9); font-weight: var(--fw-bold); }

/* ─── Loading / spinner ───────────────────────────────────────────── */

.loading { color: var(--gray-9); }

/* ─── Zen utility classes ─────────────────────────────────────────── */

.zen-eyebrow {
  font-size: 11px;
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.zen-eyebrow--strong { color: var(--gray-9); font-weight: var(--fw-black); }

.zen-title {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--gray-9);
}

.zen-display {
  font-size: var(--fz-display);
  font-weight: var(--fw-ultra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--gray-9);
}

.zen-hero {
  font-size: var(--fz-hero);
  font-weight: var(--fw-ultra);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--gray-9);
}

.zen-lead {
  font-size: var(--fz-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.55;
  color: var(--gray-9);
  text-wrap: pretty;
}

.zen-sub {
  font-size: 15px;
  color: var(--gray-7);
  font-weight: var(--fw-medium);
  line-height: 1.55;
}

.zen-metric {
  font-size: var(--fz-metric);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--gray-9);
}

.zen-mono {
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  color: var(--gray-7);
}

.zen-card {
  background: white;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 32px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.zen-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-bento-hover);
}

.zen-card--soft { background: var(--gray-0); }
.zen-card--dark { background: var(--gray-9); color: white; border-color: var(--gray-9); }
.zen-card--dark .zen-eyebrow { color: var(--gray-4); }
.zen-card--dark .zen-title { color: white; }

.zen-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-5);
  display: inline-block;
  animation: zen-pulse 2s ease-in-out infinite;
}
@keyframes zen-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ─── Page header (eyebrow + big title + sub) ─────────────────────── */
/* The signature Zen page-opener pattern. Use on every app page. */

.zen-page-header {
  display: flex; flex-direction: column;
  gap: 6px;
  /* max-width: 720px; */
}
.zen-page-header__title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gray-9);
  margin: 4px 0 0;
}
.zen-page-header__sub {
  font-size: 14.5px;
  color: var(--gray-7);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  margin: 6px 0 0;
}
.zen-page-header__row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.zen-page-header__actions {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}

/* Smaller variant for sub-pages / forms (e.g. /invoices/new) */
.zen-page-header--sm .zen-page-header__title { font-size: 30px; }

/* ─── App chrome (sidebar + topbar) ────────────────────────────────── */

.zen-sidebar {
  width: 264px;
  flex-shrink: 0;
  background: white;
  border-right: 1px solid var(--border-default);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.zen-sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
}
.zen-sb-brand svg { height: 22px; width: 22px; color: var(--gray-9); }
.zen-sb-brand .name {
  font-size: 15px;
  font-weight: var(--fw-black);
  color: var(--gray-9);
  letter-spacing: -0.02em;
}
.zen-sb-brand .from {
  margin-left: auto;
  font-size: 9px;
  font-weight: var(--fw-heavy);
  color: var(--fg-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.zen-sb-section { display: flex; flex-direction: column; gap: 1px; }
.zen-sb-section-lbl {
  font-size: 9px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  padding: 6px 12px;
}
.zen-sb-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--gray-7);
  text-decoration: none;
  transition: background 0.1s ease, color 0.1s ease;
}
.zen-sb-link svg { width: 16px; height: 16px; stroke-width: 1.75; }
.zen-sb-link:hover { background: var(--gray-1); color: var(--gray-9); }
.zen-sb-link.active { background: var(--gray-9); color: white; font-weight: var(--fw-bold); }
.zen-sb-link.active svg { stroke-width: 2.25; }
.zen-sb-link .count {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: var(--gray-5);
  font-family: var(--font-mono);
  background: var(--gray-1);
  padding: 1px 6px;
  border-radius: 4px;
}
.zen-sb-link.active .count { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }

.zen-sb-user {
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.zen-sb-user .avatar {
  width: 32px; height: 32px;
  background: var(--gray-9); color: white;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-black);
}
.zen-sb-user .info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zen-sb-user .nm { font-size: 13px; font-weight: var(--fw-heavy); color: var(--gray-9); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zen-sb-user .meta { font-size: 10px; color: var(--gray-5); font-weight: var(--fw-semibold); }

.zen-sb-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 6px;
}
.zen-sb-status .ver { font-family: var(--font-mono); font-size: 10px; color: var(--gray-5); font-weight: var(--fw-bold); }
.zen-sb-status .live { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--fw-heavy); color: var(--gray-7); text-transform: uppercase; letter-spacing: 0.10em; }

.zen-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border-default);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
  min-height: 60px;
}
.zen-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--fw-semibold); }
.zen-crumbs a { color: var(--gray-5); text-decoration: none; }
.zen-crumbs a:hover { color: var(--gray-9); }
.zen-crumbs .sep { color: var(--gray-3); }
.zen-crumbs .here { color: var(--gray-9); font-weight: var(--fw-bold); }

.zen-icon-btn {
  width: 32px; height: 32px;
  background: var(--gray-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-7);
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
  position: relative;
}
.zen-icon-btn:hover { background: var(--gray-1); border-color: var(--border-strong); color: var(--gray-9); }
.zen-icon-btn svg { width: 14px; height: 14px; stroke-width: 2; }

/* ─── Public marketing chrome ─────────────────────────────────────── */

.zen-marketing-nav {
  position: sticky; top: 16px; z-index: 50;
  width: 100%;
  padding: 16px 16px 0;
  box-sizing: border-box;
}
.zen-marketing-nav-inner {
  max-width: 1184px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: var(--shadow-xs);
}
.zen-marketing-nav-link {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--gray-7);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: background 0.1s ease, color 0.1s ease;
}
.zen-marketing-nav-link:hover { background: var(--gray-0); color: var(--gray-9); }
.zen-marketing-nav-link.active { color: var(--gray-9); font-weight: var(--fw-bold); }

.zen-footer {
  margin-top: 80px;
  background: var(--gray-0);
  border-top: 1px solid var(--border-default);
}
.zen-footer-inner {
  max-width: 1184px;
  margin: 0 auto;
  padding: 64px 32px 32px;
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 1024px) {
  .zen-footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .zen-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.zen-footer h4 {
  font-size: 11px;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gray-9);
  margin: 0 0 16px;
}
.zen-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.zen-footer a { font-size: 13px; color: var(--gray-6); text-decoration: none; font-weight: var(--fw-medium); }
.zen-footer a:hover { color: var(--gray-9); }
.zen-footer-base {
  border-top: 1px solid var(--border-default);
  padding: 16px 32px;
  font-size: 11px;
  color: var(--gray-5);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ─── Content prose (blog / marketing copy) ───────────────────────── */

.prose {
  color: var(--gray-7);
  font-size: 16px;
  line-height: var(--lh-body);
}
.prose h1 { font-size: var(--fz-h1); font-weight: var(--fw-ultra); letter-spacing: var(--ls-display); color: var(--gray-9); line-height: 1; margin: 1.5em 0 0.5em; }
.prose h2 { font-size: var(--fz-h2); font-weight: var(--fw-ultra); letter-spacing: var(--ls-display); color: var(--gray-9); line-height: 1.1; margin: 1.4em 0 0.5em; }
.prose h3 { font-size: var(--fz-h3); font-weight: var(--fw-heavy); letter-spacing: var(--ls-tight); color: var(--gray-9); margin: 1.2em 0 0.4em; }
.prose p  { margin-bottom: 1rem; line-height: 1.7; color: var(--gray-7); }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.4rem; line-height: 1.7; color: var(--gray-7); }
.prose a  { color: var(--gray-9); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-semibold); }
.prose strong { font-weight: var(--fw-bold); color: var(--gray-9); }
.prose blockquote {
  border-left: 3px solid var(--gray-9);
  padding-left: 1rem;
  color: var(--gray-6);
  font-style: italic;
  margin: 1.25rem 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 14px; }
.prose th { background: var(--gray-0); padding: 0.65rem 1rem; text-align: left; font-weight: var(--fw-bold); border-bottom: 1px solid var(--border-default); }
.prose td { padding: 0.55rem 1rem; border-bottom: 1px solid var(--border-subtle); }
.prose pre { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: var(--radius); padding: 1rem; overflow-x: auto; margin: 1.25rem 0; font-size: 13px; }
.prose code { font-family: var(--font-mono); font-size: 0.875em; background: var(--gray-1); border: 1px solid var(--border-default); padding: 0.1em 0.4em; border-radius: var(--radius); color: var(--gray-9); font-weight: var(--fw-bold); }
.prose pre code { background: none; border: 0; padding: 0; }

/* ─── HTMX loading affordance ─────────────────────────────────────── */

.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }

[x-cloak] { display: none !important; }


#main-content{
  margin: auto;
  /* display: flex; */
  /* justify-content: center; */
}