:root {
  color-scheme: dark;
  background: var(--portal-bg);
  color: var(--portal-text);
  --portal-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --portal-header-height: 60px;
  --portal-mobile-header-height: 56px;
  --portal-sidebar-expanded-width: 240px;
  --portal-sidebar-collapsed-width: 72px;
  --portal-page-width: 1440px;
  --portal-page-gutter: 32px;
  --portal-reading-width: 75ch;
  --portal-tool-width: 1000px;
  --portal-bg: #0f172a;
  --portal-canvas: var(--portal-bg);
  --portal-header: #111c2b;
  --portal-sidebar: #101a29;
  --portal-surface: #152234;
  --portal-surface-hover: #18283b;
  --portal-surface-muted: #1b293b;
  --portal-surface-elevated: var(--portal-surface-muted);
  --portal-surface-subtle: var(--portal-header);
  --portal-input: var(--portal-bg);
  --portal-text: #e2e8f0;
  --portal-text-strong: #f8fafc;
  --portal-text-muted: #94a3b8;
  --portal-text-dim: #8b9bb1;
  --portal-link: #99f6e4;
  --portal-accent: #2dd4bf;
  --portal-accent-soft: rgba(13, 148, 136, 0.15);
  --portal-accent-border: rgba(45, 212, 191, 0.28);
  --portal-action: #0f766e;
  --portal-action-hover: #0b6962;
  --portal-nav-text: #aebdce;
  --portal-nav-hover: rgba(148, 163, 184, 0.08);
  --portal-nav-active-text: #ccfbf1;
  --portal-blue: #60a5fa;
  --portal-blue-soft: rgba(30, 64, 175, 0.14);
  --portal-border: rgba(148, 163, 184, 0.14);
  --portal-border-muted: rgba(148, 163, 184, 0.1);
  --portal-border-strong: rgba(148, 163, 184, 0.28);
  --portal-header-border: rgba(94, 234, 212, 0.16);
}

/* Normal pages centre in PortalShell's main workspace, after the sidebar.
   Map has no rail class and keeps its full spatial workspace. */
.portal-page-rail {
  width: 100%;
  max-width: var(--portal-page-width);
  min-width: 0;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--portal-page-gutter);
}
.portal-tool-column {
  width: 100%;
  max-width: var(--portal-tool-width);
  min-width: 0;
}
@media (max-width: 1023px) {
  :root { --portal-page-gutter: 24px; }
}
@media (max-width: 600px) {
  :root { --portal-page-gutter: 16px; }
}

/* Shared reference-page rhythm. Directories own a common header contract;
   detail pages reuse the inset/breadcrumb while keeping their distinct heroes. */
:root {
  --portal-page-top: 1.6rem;
  --portal-page-bottom: 3rem;
  --portal-breadcrumb-to-header: 1.25rem;
  --portal-header-stack-gap: .5rem;
  --portal-header-bottom: 1.4rem;
}
.portal-reference-page { padding-block: var(--portal-page-top) var(--portal-page-bottom); }
.portal-breadcrumb { display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.75rem;line-height:1.6;color:var(--portal-text-muted);margin:0 0 var(--portal-breadcrumb-to-header); }
.portal-breadcrumb a { display:inline-flex;align-items:center;min-height:32px;color:var(--portal-link);text-underline-offset:3px; }
.portal-directory-header { display:grid;gap:var(--portal-header-stack-gap);margin:0;padding:0 0 var(--portal-header-bottom);line-height:1.6; }
.portal-page-eyebrow { margin:0;font-size:.7rem;line-height:1.5;font-weight:750;text-transform:uppercase;letter-spacing:.07em;color:var(--portal-accent); }
.portal-page-title { margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.16;font-weight:800;letter-spacing:-.035em;color:var(--portal-text-strong);overflow-wrap:break-word;text-wrap:balance; }
.portal-page-description { margin:0;max-width:860px;font-size:.94rem;line-height:1.6;color:var(--portal-text-muted); }
.portal-header-actions { display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1rem; }
.portal-header-action,.portal-header-actions>a { display:inline-flex;align-items:center;min-height:44px;font-size:.8rem;color:var(--portal-link); }
.portal-breadcrumb a:focus-visible { outline:3px solid var(--portal-accent);outline-offset:3px; }
@media(max-width:700px) {
  :root { --portal-page-top:1rem;--portal-page-bottom:2rem; }
  .portal-breadcrumb a { min-height:44px; }
}
