/* ===================================================================
   Swoogo AI Assistant — Documentation Styles
   Matches Swoogo platform (drive.swoogo.io) layout & palette exactly.

   Platform structure (from drive.html):
     div.flex.h-screen.flex-col
       div.bg-background.h-16          ← HEADER (64px)
       div.flex.flex-1.overflow-hidden  ← body row
         aside.bg-background.py-2      ← SIDEBAR
         div.bg-background.flex-1      ← content wrapper
           main.rounded-lg.bg-canvas   ← CONTENT CARD
   =================================================================== */

/* --- Swoogo palette primitives --- */
:root {
  --lavender-10: #f6f5ff;
  --lavender-20: #f0edff;
  --lavender-30: #dbd4ff;
  --lavender-40: #b4a6ff;
  --lavender-60: #7257ff;
  --lavender-70: #5336e2;
  --lavender-80: #452dc1;
  --pacific-60: #262966;
  --flame-60: #f46a34;
  --flame-70: #c3552a;
  --gray-10: #f4f6f7;
  --gray-20: #e6e9eb;
  --gray-30: #daddde;
  --gray-40: #c1c4c6;
  --gray-50: #898d8f;
  --gray-60: #686b6d;
  --gray-70: #303436;
  --gray-80: #272a2c;
  --gray-90: #1f2224;
  --gray-100: #1c1f21;
  --fog-60: #f3f4f9;
  --mist-60: #e9ecff;

  /* --- Semantic tokens (light) --- */
  --bg-background: var(--fog-60);      /* sidebar, header, content wrapper */
  --bg-canvas: #ffffff;                /* main content card */
  --bg-surface: #ffffff;               /* cards inside canvas */
  --bg-muted: var(--gray-10);          /* hover states */
  --bg-subtle: var(--gray-10);         /* code blocks */
  --fg-base: var(--pacific-60);        /* primary text */
  --fg-muted: var(--gray-60);          /* secondary text */
  --fg-subtle: var(--gray-50);         /* muted text */
  --fg-control: var(--gray-60);        /* button outline text */
  --accent-moderate: var(--lavender-60); /* primary buttons */
  --accent-intense: var(--lavender-70);  /* button hover */
  --accent-bold: var(--lavender-70);     /* active nav text */
  --accent-subtle: var(--lavender-20);   /* active nav bg */
  --accent-muted: var(--lavender-30);    /* active press */
  --border-subtle: var(--gray-20);
  --border-muted: var(--gray-30);
  --static-white: #ffffff;
  --color-flame: var(--flame-60);
  --color-flame-hover: var(--flame-70);

  /* Elevation */
  --shadow-sm: 0 0 0.5px 0 rgba(0,0,0,0.3), 0 1px 3px 0 rgba(0,0,0,0.15);
  --shadow-md: 0 0 0.5px 0 rgba(0,0,0,0.18), 0 3px 8px 0 rgba(0,0,0,0.1), 0 1px 3px 0 rgba(0,0,0,0.1);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Radii — from rounded-diy-* tokens */
  --radius-sm: 0.25rem;   /* rounded-diy-sm */
  --radius-smd: 0.375rem; /* rounded-diy-smd */
  --radius-md: 0.5rem;    /* rounded-diy-md */
  --radius-slg: 0.75rem;  /* rounded-diy-slg */
  --radius-lg: 1rem;      /* rounded-diy-lg */

  /* Layout */
  --header-h: 4rem;        /* h-16 = 64px */
  --sidebar-w: 15.5rem;    /* md:w-62 = 248px */
  --content-px: 2.5rem;    /* md:px-10 */
}

/* --- Dark theme (Swoogo .dark class) --- */
[data-theme="dark"] {
  --bg-background: var(--gray-80);
  --bg-canvas: var(--gray-100);
  --bg-surface: var(--gray-90);
  --bg-muted: var(--gray-70);
  --bg-subtle: var(--gray-80);
  --fg-base: var(--mist-60);
  --fg-muted: var(--gray-40);
  --fg-subtle: var(--gray-50);
  --fg-control: var(--gray-40);
  --accent-moderate: var(--lavender-60);
  --accent-intense: var(--lavender-70);
  --accent-bold: var(--lavender-40);
  --accent-subtle: var(--gray-70);
  --accent-muted: var(--gray-60);
  --border-subtle: var(--gray-70);
  --border-muted: var(--gray-80);
  --shadow-sm: 0 0 0.5px 0 rgba(0,0,0,0.5), 0 0.5px 0 0 rgba(255,255,255,0.1) inset, 0 1px 3px 0 rgba(0,0,0,0.4);
  --shadow-md: 0 0.5px 0 0 rgba(255,255,255,0.08) inset, 0 3px 8px 0 rgba(0,0,0,0.35), 0 1px 3px 0 rgba(0,0,0,0.5);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-background: var(--gray-80);
    --bg-canvas: var(--gray-100);
    --bg-surface: var(--gray-90);
    --bg-muted: var(--gray-70);
    --bg-subtle: var(--gray-80);
    --fg-base: var(--mist-60);
    --fg-muted: var(--gray-40);
    --fg-subtle: var(--gray-50);
    --fg-control: var(--gray-40);
    --accent-moderate: var(--lavender-60);
    --accent-intense: var(--lavender-70);
    --accent-bold: var(--lavender-40);
    --accent-subtle: var(--gray-70);
    --accent-muted: var(--gray-60);
    --border-subtle: var(--gray-70);
    --border-muted: var(--gray-80);
    --shadow-sm: 0 0 0.5px 0 rgba(0,0,0,0.5), 0 0.5px 0 0 rgba(255,255,255,0.1) inset, 0 1px 3px 0 rgba(0,0,0,0.4);
    --shadow-md: 0 0.5px 0 0 rgba(255,255,255,0.08) inset, 0 3px 8px 0 rgba(0,0,0,0.35), 0 1px 3px 0 rgba(0,0,0,0.5);
  }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base --- */
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--fg-base);
  background: var(--bg-background);
  line-height: 1.7;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-moderate); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent-intense); text-decoration: underline; text-underline-offset: 2px; }

img { max-width: 100%; display: block; }

::selection {
  background: var(--accent-subtle);
  color: var(--fg-base);
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg-base);
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.375rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.1rem; margin-top: 2rem; margin-bottom: 0.5rem; }
h4 { font-size: 0.95rem; margin-top: 1.5rem; margin-bottom: 0.4rem; }

p { margin-bottom: 1rem; color: var(--fg-muted); }

ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--fg-muted); }
li { margin-bottom: 0.4rem; }
li > ul, li > ol { margin-top: 0.4rem; margin-bottom: 0; }

strong { font-weight: 600; color: var(--fg-base); }

hr { border: none; border-top: 1px solid var(--border-muted); margin: 2rem 0; }

/* --- Code --- */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-subtle);
  color: var(--fg-base);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  word-break: break-word;
}

pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
  word-break: normal;
}

/* Lightweight syntax coloring */
pre .kw { color: #6f42c1; }
pre .str { color: #22863a; }
pre .num { color: #d97706; }
pre .cmt { color: var(--fg-subtle); font-style: italic; }

[data-theme="dark"] pre .kw { color: #b392f0; }
[data-theme="dark"] pre .str { color: #85e89d; }
[data-theme="dark"] pre .num { color: #ffab70; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) pre .kw { color: #b392f0; }
  :root:not([data-theme="light"]) pre .str { color: #85e89d; }
  :root:not([data-theme="light"]) pre .num { color: #ffab70; }
}

/* ===================================================================
   LAYOUT — mirrors Swoogo platform structure exactly:
     .page-wrapper = flex h-screen flex-col
       .topbar     = bg-background h-16 (header)
       .body-row   = flex flex-1 overflow-hidden
         .sidebar  = bg-background py-2 text-sm (left nav)
         .content-area = bg-background flex-1 (wrapper)
           .content-main = rounded-lg bg-canvas (main card)
   =================================================================== */

.page-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* --- Header bar --- */
/* Desktop: visible as top bar spanning full width */
/* bg-diy-bg-background flex h-16 shrink-0 items-center gap-2 px-2 md:gap-10 md:px-4 */
.topbar {
  display: flex;
  align-items: center;
  height: var(--header-h);
  flex-shrink: 0;
  background: var(--bg-background);
  padding: 0 0.5rem;
  gap: 0.5rem;
  z-index: 200;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.topbar-logo:hover { text-decoration: none; }
.topbar-logo img { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.topbar-logo span { font-weight: 600; font-size: 0.875rem; color: var(--fg-base); }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
  color: var(--fg-muted);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.hamburger:hover { background: var(--bg-muted); }
.hamburger svg { width: 20px; height: 20px; display: block; }

/* --- Body row (below header) --- */
.body-row {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* --- Sidebar --- */
/* md:bg-diy-bg-background relative flex-col py-2 text-sm hidden md:flex */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-background);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  overflow-y: auto;
  position: relative;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar-logo {
  display: none;  /* hidden on desktop, logo is in .topbar */
}

/* Nav items — from drive.html:
   rounded-diy-md min-h-10 text-sm font-medium flex items-center
   ACTIVE:  bg-diy-accent-subtle text-diy-accent-bold
   NORMAL:  bg-transparent text-diy-fg-base hover:bg-diy-bg-muted */
.sidebar-nav { list-style: none; padding: 0; flex: 1; }

.sidebar-nav li {
  padding: 0.125rem 0.5rem;
}

.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;  /* min-h-10 */
  padding: 0 0.75rem;  /* px-3 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;    /* font-medium */
  color: var(--fg-base);
  background: transparent;
  border-radius: var(--radius-md); /* rounded-diy-md */
  transition: color 0.25s ease-out, background-color 0.25s ease-out;
  text-decoration: none;
}

.sidebar-nav li a:hover {
  background: var(--bg-muted); /* hover:bg-diy-bg-muted */
  color: var(--fg-base);
  text-decoration: none;
}

.sidebar-nav li a.active {
  background: var(--accent-subtle);  /* bg-diy-accent-subtle */
  color: var(--accent-bold);         /* text-diy-accent-bold */
  font-weight: 500;
}

.sidebar-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  padding: 1.25rem 1rem 0.35rem 1rem;
}

.sidebar-bottom {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-muted);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Content area --- */
/* bg-diy-bg-background flex flex-1 overflow-y-hidden */
.content-area {
  flex: 1;
  min-width: 0;
  background: var(--bg-background);
  overflow-y: hidden;
  display: flex;
}

/* Main content card — the white/dark rounded panel:
   sm:rounded-diy-lg bg-diy-bg-canvas relative sm:ml-2 md:ml-0 sm:mr-2 sm:mb-2
   flex-1 overflow-y-auto px-3 sm:px-6 pt-8 pb-6 md:px-10 lg:px-20 */
.content-main {
  flex: 1;
  background: var(--bg-canvas);
  border-radius: var(--radius-lg);  /* sm:rounded-diy-lg */
  overflow-y: auto;
  padding: 2rem var(--content-px) 3rem;
  margin: 0 0.5rem 0.5rem 0;       /* sm:mr-2 sm:mb-2, md:ml-0 */
  max-width: 100%;
}

/* Inner constraint for readability */
.content-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* --- Sidebar overlay (mobile) --- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  backdrop-filter: blur(2px);
}

/* --- Theme toggle --- */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0.375rem;
  color: var(--fg-muted);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover {
  color: var(--accent-moderate);
  border-color: var(--accent-moderate);
  background: var(--accent-subtle);
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* --- Language switcher --- */
.lang-switcher select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-background);
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.lang-switcher select:hover { border-color: var(--accent-moderate); }

/* --- Cards --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

/* Cards inside canvas use bg-surface + border (matches platform style) */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-slg); /* rounded-diy-slg */
  padding: 1.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  display: block;
}

.card:hover {
  border-color: var(--accent-moderate);
  box-shadow: 0 0 0 1px var(--accent-moderate);
  text-decoration: none;
}

.card h3 { margin-top: 0; margin-bottom: 0.35rem; color: var(--fg-base); }
.card p { color: var(--fg-muted); font-size: 0.9rem; margin-bottom: 0.75rem; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-moderate);
  text-decoration: none;
}
.card-link:hover { color: var(--accent-intense); text-decoration: none; }
.card-link svg { width: 14px; height: 14px; }

/* --- Hero --- */
.hero {
  text-align: center;
  padding: 3rem 0 1.5rem;
}

.hero-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: var(--radius-slg);
}

.hero h1 {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: 1.0625rem;
  color: var(--fg-muted);
  max-width: 520px;
  margin: 0 auto 2rem;
}

/* --- Steps --- */
.steps {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.step {
  text-align: center;
  flex: 0 1 180px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-moderate);
  color: var(--static-white);
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.step-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.2rem; color: var(--fg-base); }
.step-desc { font-size: 0.8125rem; color: var(--fg-subtle); }

.step-arrow {
  display: flex;
  align-items: center;
  padding-top: 0.75rem;
  color: var(--fg-subtle);
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-slg);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-muted);
}

tr:last-child td { border-bottom: none; }

th {
  font-weight: 600;
  color: var(--fg-subtle);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-subtle);
}

td { color: var(--fg-muted); }
td code { font-size: 0.8125rem; }

tr:hover td { background: var(--bg-muted); }

/* --- Badges --- */
/* Matches: rounded-diy-smd font-medium text-xs h-5 px-2.5 bg-diy-accent-subtle text-diy-accent-bold */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.625rem;
  height: 1.25rem;
  border-radius: var(--radius-smd);
  vertical-align: middle;
  white-space: nowrap;
}

.badge-read { background: #dbeafe; color: #1e40af; }
.badge-write { background: #fef3c7; color: #92400e; }
.badge-high-risk { background: #fee2e2; color: #991b1b; }
.badge-orchestration { background: #ede9fe; color: #5b21b6; }

[data-theme="dark"] .badge-read { background: #1e2d4a; color: #93c5fd; }
[data-theme="dark"] .badge-write { background: #3a2a10; color: #fcd34d; }
[data-theme="dark"] .badge-high-risk { background: #3a1515; color: #fca5a5; }
[data-theme="dark"] .badge-orchestration { background: #2a2050; color: #c4b5fd; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-read { background: #1e2d4a; color: #93c5fd; }
  :root:not([data-theme="light"]) .badge-write { background: #3a2a10; color: #fcd34d; }
  :root:not([data-theme="light"]) .badge-high-risk { background: #3a1515; color: #fca5a5; }
  :root:not([data-theme="light"]) .badge-orchestration { background: #2a2050; color: #c4b5fd; }
}

/* --- Buttons --- */
/* Primary: bg-diy-accent-moderate text-diy-static-white hover:bg-diy-accent-intense
   h-9.5 rounded-diy-md text-sm px-6 font-medium */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 1.5rem;      /* px-6 */
  height: 2.375rem;       /* h-9.5 */
  border-radius: var(--radius-md); /* rounded-diy-md */
  font-size: 0.875rem;    /* text-sm */
  font-weight: 500;       /* font-medium */
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.15s ease-out;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent-moderate);
  color: var(--static-white);
}
.btn-primary:hover {
  background: var(--accent-intense);
  color: var(--static-white);
}

.btn-accent {
  background: var(--color-flame);
  color: var(--static-white);
}
.btn-accent:hover {
  background: var(--color-flame-hover);
  color: var(--static-white);
}

/* Outline: inset-ring inset-ring-diy-fg-control text-diy-fg-control
   hover:bg-diy-accent-subtle */
.btn-outline {
  background: transparent;
  color: var(--fg-control);
  box-shadow: inset 0 0 0 1px var(--fg-control);
}
.btn-outline:hover {
  background: var(--accent-subtle);
  color: var(--accent-bold);
}

/* --- Alerts --- */
.alert {
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-slg);
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  border-left: 3px solid;
  color: var(--fg-muted);
}

.alert-info { background: var(--accent-subtle); border-color: var(--accent-moderate); }
.alert-warning { background: #fffbeb; border-color: #f59e0b; }
.alert-danger { background: #fef2f2; border-color: #ef4444; }

[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, 0.08); }
[data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, 0.08); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .alert-warning { background: rgba(245, 158, 11, 0.08); }
  :root:not([data-theme="light"]) .alert-danger { background: rgba(239, 68, 68, 0.08); }
}

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border-muted);
  padding: 2rem 0;
  margin-top: 3rem;
  font-size: 0.8125rem;
  color: var(--fg-subtle);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer a { color: var(--fg-muted); text-decoration: none; }
.footer a:hover { color: var(--accent-moderate); text-decoration: none; }

/* --- Section anchors --- */
h2[id]::before, h3[id]::before {
  content: '';
  display: block;
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
}

/* --- Clipboard toast --- */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--fg-base);
  color: var(--bg-canvas);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Knowledge file cards --- */
.knowledge-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.knowledge-card .card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

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

/* Desktop: topbar always visible, sidebar beside content */
@media (min-width: 769px) {
  .topbar { padding: 0 1rem; gap: 2.5rem; } /* md:gap-10 md:px-4 */
  .hamburger { display: none; }
  .sidebar-logo { display: none; }
}

/* Mobile: sidebar collapses, topbar has hamburger */
@media (max-width: 768px) {
  body { overflow: auto; }

  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
  .hamburger { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem 1rem;
    text-decoration: none;
  }
  .sidebar-logo:hover { text-decoration: none; }
  .sidebar-logo img { width: 28px; height: 28px; border-radius: var(--radius-sm); }
  .sidebar-logo span { font-weight: 600; font-size: 0.875rem; color: var(--fg-base); }

  .page-wrapper { height: auto; min-height: 100vh; }
  .body-row { flex-direction: column; overflow: visible; margin-top: var(--header-h); }

  .content-area { overflow-y: visible; }
  .content-main {
    border-radius: 0;
    margin: 0;
    padding: 1.5rem 1rem 3rem;
    min-height: calc(100vh - var(--header-h));
  }

  .hero h1 { font-size: 1.75rem; }
  .hero p { font-size: 1rem; }
  .steps { flex-direction: column; align-items: center; }
  .step-arrow { transform: rotate(90deg); padding: 0; }
  .card-grid { grid-template-columns: 1fr; }
  table { font-size: 0.8125rem; }
  th, td { padding: 0.5rem; }
  h2 { font-size: 1.25rem; }
}