/* ===========================================================
   Curaite - "Clinical Calm" design system
   Charcoal primary on a cool off-white background (teal only in dark mode).
   Source of truth: UI Style Explorer/src/styles.css
   =========================================================== */

/* ─── Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);   /* 0.375rem */
  --radius-md: calc(var(--radius) - 2px);   /* 0.5rem   */
  --radius-lg: var(--radius);               /* 0.625rem */
  --radius-xl: calc(var(--radius) + 4px);   /* 0.875rem */
  --radius-2xl: calc(var(--radius) + 8px);  /* 1.125rem */

  /* Backgrounds & surfaces */
  --background:    #F7F8FA;
  --surface:       #FFFFFF;
  --surface-muted: #F3F4F7;

  /* Ink scale */
  --ink:       #1C1D22;
  --ink-soft:  #646C80;
  --ink-faint: #9CA3AF;
  --foreground: var(--ink);

  /* Primary - charcoal (matches logo wordmark) */
  --primary:          #1A1B1E;
  --primary-soft:     #2D2E35;
  --primary-tint:     #F0F1F3;
  --primary-foreground: #FAFAFA;

  /* Cards / popover */
  --card:            var(--surface);
  --card-foreground: var(--ink);
  --popover:         var(--surface);
  --popover-foreground: var(--ink);

  /* Secondary / muted / accent */
  --secondary:            #F3F2EC;
  --secondary-foreground: var(--ink);
  --muted:                #F3F2EC;
  --muted-foreground:     var(--ink-soft);
  --accent:               var(--primary-tint);
  --accent-foreground:    var(--primary-soft);

  /* Status */
  --success:      #3D9970;
  --success-soft: #E8F6EF;
  --warning:      #C08A2A;
  --warning-soft: #FDF5E3;
  --danger:       #C04040;
  --danger-soft:  #FAEAEA;
  --destructive:  var(--danger);
  --destructive-foreground: #FAFAFA;

  /* Borders & inputs */
  --border:        #E4E6EA;
  --border-strong: #D0D3DA;
  --input:         #E4E6EA;
  --ring:          #4B505F;

  /* Sidebar */
  --sidebar:            #F5F6F8;
  --sidebar-foreground: var(--ink-soft);
  --sidebar-primary:    var(--primary);
  --sidebar-border:     var(--border);

  /* Typography */
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Dark mode - primary becomes teal in dark */
@media (prefers-color-scheme: dark) {
  :root {
    --background:     #1A1F2E;
    --surface:        #222836;
    --surface-muted:  #272D3D;
    --ink:            #F5F6FA;
    --ink-soft:       #9BA3BC;
    --ink-faint:      #6B7592;
    --primary:        #5BBFB0;
    --primary-soft:   #6DCEC0;
    --primary-tint:   #1E3535;
    --primary-foreground: #1A1F2E;
    --border:         rgba(255,255,255,0.10);
    --border-strong:  rgba(255,255,255,0.18);
    --input:          rgba(255,255,255,0.12);
    --sidebar:        #1C2030;
    --success:        #5BBFA0;
    --success-soft:   #1A3528;
    --warning:        #D4A84B;
    --warning-soft:   #2E2510;
    --danger:         #D47070;
    --danger-soft:    #2E1818;
  }

  /* The curaite-icon.png asset is dark ink on a transparent background, drawn for use on light
     surfaces - on a dark surface it's nearly invisible. Inverting flips the dark charcoal mark to
     a light tone (alpha is unaffected by filter: invert, so transparency is preserved). */
  .brand-icon { filter: invert(1); }
}

/* ─── Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html, body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

.mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Alpine: hide [x-cloak] elements until Alpine has initialized, avoiding a flash of
   incorrectly-visible content (e.g. the processing overlay) before x-show evaluates. */
[x-cloak] { display: none !important; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
}
.skip-link:focus { left: 1rem; }

/* ---------- Scan-line signature: thin divider used sparingly ---------- */
.scan-rule {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 0 0 28px 0;
}

/* ===========================================================
   App shell: sticky header + left sidebar + content
   =========================================================== */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: 3.5rem; padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.brand-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink);
}
.brand-icon { display: block; }
.brand-logo-img { height: 28px; }
.header-right { display: flex; align-items: center; gap: 0.75rem; }
.header-right > a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500; }
.header-right > a:hover { color: var(--ink); }

/* Pill chip (credits / plan, used in header + dashboard) */
.pill-chip, .credit-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-2xl); padding: 0.25rem 0.75rem;
  font-size: 0.75rem; color: var(--ink-soft);
}
.pill-chip:hover, .credit-chip:hover { border-color: var(--border-strong); }
.status-dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; }
.status-dot--success { background: var(--success); }
.status-dot--warning { background: var(--warning); }
.status-dot--danger { background: var(--danger); }

/* Account dropdown (native <details>) */
.account-menu { position: relative; }
.account-summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-2xl); padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  font-size: 0.8125rem; color: var(--ink-soft);
}
.account-summary:hover { border-color: var(--border-strong); }
.account-summary::-webkit-details-marker { display: none; }
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 0.6875rem; font-weight: 600;
}
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 0.5rem);
  width: 14rem; border: 1px solid var(--border); background: var(--popover);
  border-radius: var(--radius-md); box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  overflow: hidden; z-index: 30;
  display: flex; flex-direction: column; padding: 0.25rem;
}
.account-dropdown a, .account-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
  font-size: 0.8125rem; color: var(--ink-soft);
  background: none; border: none; cursor: pointer; font-family: var(--font-sans);
}
.account-dropdown a:hover, .account-dropdown button:hover { background: var(--muted); color: var(--ink); }
.dropdown-divider { border-top: 1px solid var(--border); margin: 0.25rem 0; }
.dropdown-danger { color: var(--danger) !important; }
.dropdown-danger:hover { background: var(--danger-soft) !important; }

/* Layout body */
.app-body { display: flex; min-height: calc(100vh - 3.5rem); }

/* Sidebar */
.app-sidebar {
  width: 15rem; flex-shrink: 0; border-right: 1px solid var(--border);
  background: var(--sidebar); padding: 1.5rem 0.75rem;
  position: sticky; top: 3.5rem; height: calc(100vh - 3.5rem);
  overflow-y: auto; display: none;
}
@media (min-width: 1024px) { .app-sidebar { display: block; } }

.app-sidebar nav { display: flex; flex-direction: column; gap: 0.125rem; }

.nav-link {
  position: relative; display: flex; align-items: center;
  border-radius: var(--radius-md); padding: 0.5rem 0.75rem;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-soft);
  transition: background 150ms, color 150ms;
}
.nav-link::before {
  content: ''; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.25rem; border-radius: 0 2px 2px 0;
  background: var(--primary); opacity: 0; transition: opacity 150ms;
}
.nav-link:hover { background: color-mix(in srgb, var(--primary-tint) 60%, transparent); color: var(--ink); }
.nav-link--active { background: var(--primary-tint); color: var(--primary); }
.nav-link--active::before { opacity: 1; }
.nav-group { display: flex; flex-direction: column; gap: 0.125rem; }
.nav-sublink {
  display: block; margin-left: 0.75rem; padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm); font-size: 0.8125rem; color: var(--ink-faint);
  transition: color 150ms;
}
.nav-sublink:hover { color: var(--ink); }
.nav-sublink--active { color: var(--ink); font-weight: 600; }

/* Main content */
.app-main { flex: 1; min-width: 0; padding: 2rem 1.5rem; }
@media (min-width: 1024px) { .app-main { padding: 2rem 2.5rem; } }
.page-inner { max-width: 64rem; margin: 0 auto; }
.page-inner--wide { max-width: 76rem; }
.page-eyebrow {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 0.25rem;
}
.page-titlebar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-title { font-size: 2.125rem; }
.page-divider { height: 1px; background: var(--border); margin: 1.5rem 0 0; }
.page-content { padding-top: 1.5rem; }

/* Footer */
.app-footer {
  border-top: 1px solid var(--border); background: var(--background);
  padding: 1rem 1.5rem; font-size: 0.75rem; color: var(--ink-faint);
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1.25rem;
  background: var(--primary); color: var(--primary-foreground);
  border: none; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; font-family: var(--font-sans);
  cursor: pointer; transition: background 150ms;
}
.btn-primary:hover { background: var(--primary-soft); color: var(--primary-foreground); }
.btn-primary[disabled], .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: border-color 150ms, background 150ms;
}
.btn-secondary:hover { border-color: var(--border-strong); background: var(--surface-muted); color: var(--ink); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1rem;
  background: var(--danger); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 150ms;
}
.btn-danger:hover { background: #a83333; }

.btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ===========================================================
   Forms
   =========================================================== */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.375rem; color: var(--ink-soft); }
.form-control {
  display: block; width: 100%;
  border: 1px solid var(--input); background: var(--surface);
  border-radius: var(--radius-md); padding: 0.625rem 0.75rem;
  font-size: 0.875rem; color: var(--ink); font-family: var(--font-sans);
  outline: none; transition: border-color 150ms, box-shadow 150ms;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.form-control:disabled { opacity: 0.6; cursor: not-allowed; }
.checkbox-row label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.field-validation-error, .auth-error { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--danger); }
.validation-summary { color: var(--danger); font-size: 0.8125rem; margin-bottom: 0.75rem; }
.validation-summary ul { margin: 0; padding-left: 1.125rem; }
textarea.form-control { resize: vertical; min-height: 7.5rem; }

/* ===========================================================
   Toggle switch (Settings report-defaults rows)
   =========================================================== */
.toggle {
  position: relative; width: 2.75rem; height: 1.5rem; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface-muted);
  border-radius: var(--radius-2xl); cursor: pointer; transition: background 150ms, border-color 150ms;
  padding: 0;
}
.toggle[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.toggle-thumb {
  position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: left 150ms;
}
.toggle[aria-checked="true"] .toggle-thumb { left: calc(100% - 1.375rem); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-top: 1px solid var(--border); }
.toggle-row:first-of-type { border-top: none; }
.toggle-row-label { font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.toggle-row-hint { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 0.125rem; }

/* ===========================================================
   Alerts / toasts
   =========================================================== */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.875rem; }
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-success { background: var(--success-soft); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.alert-warning { background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-left: 4px solid var(--warning); }

.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; width: 20rem; }
.toast {
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface);
  padding: 0.75rem 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.8125rem;
}
.toast-dismiss { background: none; border: none; cursor: pointer; color: var(--ink-faint); padding: 0 0 0 0.5rem; font-size: 1rem; line-height: 1; }

/* ===========================================================
   Auth shell
   =========================================================== */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%);
}
.auth-card {
  width: 100%; max-width: 26rem;
  border-radius: 1.125rem; border: 1px solid var(--border); background: var(--surface);
  padding: 1.75rem;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02), 0 24px 60px -30px rgba(15,23,42,0.18);
}
.auth-card h1 { font-size: 2.5rem; line-height: 1.05; margin-bottom: 0.5rem; }
.auth-card .auth-sub { font-size: 0.9375rem; color: var(--ink-soft); margin: 0 0 1.5rem 0; }
.auth-field { display: block; margin-bottom: 1rem; }
.auth-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.375rem; }
.auth-input { /* alias of .form-control for auth pages */ }
.auth-alt-link { font-size: 0.84375rem; margin-top: 1.125rem; color: var(--ink-soft); text-align: center; }
.auth-alt-link a { color: var(--ink); font-weight: 600; }
.auth-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; font-size: 0.8125rem; }

/* Password strength meter */
.pw-strength { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
.pw-strength-seg { flex: 1; height: 0.25rem; border-radius: 999px; background: var(--surface-muted); }
.pw-strength-seg--1 { background: var(--danger); }
.pw-strength-seg--2, .pw-strength-seg--3 { background: var(--warning); }
.pw-strength-seg--4 { background: var(--success); }

/* ===========================================================
   Cards / tables / badges (shared across reports + admin)
   =========================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin-top: 0; font-size: 1.1875rem; }

.table-wrap { overflow-x: auto; }
table.data-grid { width: 100%; border-collapse: collapse; font-size: 0.84375rem; }
table.data-grid thead { background: var(--surface-muted); }
table.data-grid th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  padding: 0.625rem 0.75rem;
}
table.data-grid td { padding: 0.625rem 0.75rem; border-top: 1px solid var(--border); vertical-align: top; }
table.data-grid tbody tr:first-child td { border-top: none; }
table.data-grid tbody tr:hover { background: color-mix(in srgb, var(--surface-muted) 60%, transparent); }

.badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 999px; font-size: 0.71875rem; font-weight: 700; letter-spacing: 0.02em; }
.badge-completed, .badge--ok { background: var(--success-soft); color: var(--success); }
.badge-failed, .badge--out { background: var(--danger-soft); color: var(--danger); }
.badge-processing, .badge--borderline { background: var(--warning-soft); color: var(--warning); }
.badge--info { background: #EFF6FF; color: #2563EB; }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge-dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; margin-right: 0.25rem; }
.amount-positive { color: var(--success); font-weight: 700; }
.amount-negative { color: var(--danger); font-weight: 700; }

/* ---------- Upload dropzone ---------- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.5rem;
  text-align: center;
  background: var(--surface-muted);
  transition: border-color 150ms, background 150ms;
}
.dropzone--active { border-color: var(--primary); background: color-mix(in srgb, var(--primary-tint) 40%, transparent); }
.dropzone input[type=file] { margin-top: 0.625rem; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--ink-soft); }
.empty-state h3 { color: var(--ink); }

/* ---------- Report viewer frame ---------- */
.report-frame-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.report-frame-wrap iframe { width: 100%; height: 80vh; border: none; display: block; }

.action-row { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }

/* ---------- Quick-action upload card (Dashboard) ---------- */
.quick-upload-card {
  display: block; border-radius: var(--radius-xl); border: 2px dashed var(--border);
  background: var(--surface); padding: 2.5rem; text-align: center;
  transition: border-color 150ms, background 150ms;
}
.quick-upload-card:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary-tint) 40%, transparent); }
.quick-upload-icon {
  margin: 0 auto; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Processing overlay ---------- */
.processing-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(4px);
}
.spinner {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================
   Landing page helpers
   =========================================================== */
.landing-hero-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.landing-steps-grid { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .landing-hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .landing-steps-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================================================
   Settings page grids
   =========================================================== */
.reports-new-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .reports-new-grid { grid-template-columns: 1.4fr 1fr; } }

.stat-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .stat-cards { grid-template-columns: repeat(3, 1fr); } }

.settings-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.settings-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid--3 { grid-template-columns: 2fr 1fr 1fr; }
}

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-2xl); padding: 0.3125rem 0.875rem;
  font-size: 0.78125rem; color: var(--ink-soft);
}
.source-pill {
  font-family: var(--font-mono);
  border-radius: var(--radius-2xl); border: 1px solid var(--border);
  background: var(--surface); padding: 0.375rem 0.875rem;
  font-size: 0.75rem; color: var(--ink-soft);
  display: inline-block;
}

footer.site-footer {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.78125rem;
  padding: 1.5rem 1.25rem;
}

@media (max-width: 840px) {
  .app-sidebar { display: none; }
}

@media (max-width: 640px) {
  .app-header { padding: 0 1rem; }
  .app-main { padding: 1.5rem 1rem; }
  .page-title { font-size: 1.625rem; }
}