/* =============================================================
   apollo-shell.css — universal Olympus shell applied to Apollo.

   Implements §1 of OLYMPUS_DESIGN_SYSTEM.md:
     top bar 56px · left sidebar 280px (48px collapsed) ·
     main (remainder) · optional right drawer 240-320px ·
     footer 32px.

   Tokens from §7 of the spec. When a shared @olympus/ui package
   exists, this file becomes olympus-shell.css at the root.
   ============================================================= */

/* ─── Design tokens (§7 of spec) ───────────────────────────── */

:root {
  /* Core palette */
  --o-navy:        #1a2744;
  --o-navy-deep:   #0f1a30;
  --o-teal:        #2a9d8f;
  --o-teal-deep:   #1f7a70;
  --o-gold:        #c9a84c;
  --o-gold-deep:   #a88935;
  --o-coral:       #e07a5f;
  --o-sage:        #81b29a;
  --o-charcoal:    #3d405b;
  --o-sand:        #f4f1de;
  --o-ink:         #15171c;
  --o-muted:       #6b7280;
  --o-border:      #e5e7eb;
  --o-border-mid:  #d1d5db;
  --o-bg-soft:     #f6f7f9;
  --o-bg:          #ffffff;

  /* Functional */
  --o-ok:          #2d8a4e;
  --o-warn:        #c9752c;
  --o-error:       #c94c4c;
  --o-info:        #4c7ac9;
  --o-oracle-dark: #4b3a4a;

  /* Typography */
  --o-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --o-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --o-fs-xs:   11px;
  --o-fs-sm:   12px;
  --o-fs-base: 13px;
  --o-fs-md:   15px;
  --o-fs-lg:   18px;
  --o-fs-xl:   22px;
  --o-fs-2xl:  28px;
  --o-lh-tight: 1.25;
  --o-lh-base:  1.45;

  /* Spacing */
  --o-s-1:  4px;
  --o-s-2:  8px;
  --o-s-3:  12px;
  --o-s-4:  16px;
  --o-s-5:  24px;
  --o-s-6:  32px;
  --o-s-8:  48px;

  /* Radii + shadows */
  --o-r-sm: 3px;
  --o-r-md: 6px;
  --o-r-lg: 10px;
  --o-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --o-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --o-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* Motion */
  --o-dur-instant: 80ms;
  --o-dur-fast:    160ms;
  --o-dur-base:    220ms;
  --o-ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --o-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Shell dimensions */
  --o-top:        56px;
  --o-footer:     32px;
  --o-sidebar:    280px;
  --o-sidebar-rail: 48px;
  --o-drawer:     280px;

  /* Z-index scale */
  --o-z-sticky:  10;
  --o-z-rails:   20;
  --o-z-chrome:  30;
  --o-z-popover: 40;
  --o-z-modal:   50;
  --o-z-toast:   60;
}

/* ─── Visually-hidden utility (a11y) ──────────────────────── */
/* Hide content visually but keep it available to screen readers
   and the document outline (e.g. semantic <h1> for page-has-heading-one). */
.o-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Sub-1280px notice (§0.1) ─────────────────────────────── */

.o-desktop-only {
  display: none;
}
@media (max-width: 1279px) {
  .o-shell { display: none !important; }
  .o-desktop-only {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-family: var(--o-font-sans);
    color: var(--o-ink);
    text-align: center;
  }
  .o-desktop-only-inner {
    max-width: 480px;
  }
  .o-desktop-only h1 {
    font-size: var(--o-fs-xl);
    color: var(--o-navy);
    margin-bottom: var(--o-s-3);
  }
  .o-desktop-only p {
    font-size: var(--o-fs-md);
    /* WCAG 2.2 AA: --o-muted (#6b7280) on body bg #f5f5f0 is 4.42 — fails 4.5
       threshold for normal text. Use --o-ink (#15171c, 13.4:1) for the
       sub-1280px notice copy so users on narrow viewports can still read it. */
    color: var(--o-ink);
  }
}

/* ─── Shell grid ────────────────────────────────────────────── */

.o-shell {
  display: grid;
  grid-template-columns: var(--o-sidebar) minmax(720px, 1fr);
  grid-template-rows: var(--o-top) 1fr var(--o-footer);
  grid-template-areas:
    "top    top"
    "side   main"
    "footer footer";
  height: 100vh;
  font-family: var(--o-font-sans);
  font-size: var(--o-fs-base);
  color: var(--o-ink);
  background: var(--o-bg-soft);
  /* Grid items with 1fr need min-height:0 / min-width:0 on descendants
     so that overflow:auto inside them actually clips; otherwise the grid
     row expands to fit content. */
  overflow: hidden;
}
.o-shell > * { min-width: 0; min-height: 0; }
.o-shell.o-shell--rail {
  grid-template-columns: var(--o-sidebar-rail) minmax(720px, 1fr);
}
.o-shell.o-shell--with-drawer {
  grid-template-columns: var(--o-sidebar) minmax(480px, 1fr) var(--o-drawer);
  grid-template-areas:
    "top    top    top"
    "side   main   drawer"
    "footer footer footer";
}
.o-shell.o-shell--rail.o-shell--with-drawer {
  grid-template-columns: var(--o-sidebar-rail) minmax(480px, 1fr) var(--o-drawer);
}

/* ─── Top bar ───────────────────────────────────────────────── */

.o-top {
  grid-area: top;
  display: flex;
  align-items: center;
  height: var(--o-top);
  padding: 0 var(--o-s-4);
  background: var(--o-navy);
  color: #ffffff;
  z-index: var(--o-z-chrome);
  border-bottom: 1px solid var(--o-navy-deep);
}
.o-top-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--o-s-2);
  padding: 0 var(--o-s-2) 0 0;
  font-size: var(--o-fs-md);
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.o-top-logo .o-top-logo-mark {
  color: var(--o-gold);
  font-weight: 700;
}
.o-top-switcher {
  position: relative;
  margin-left: var(--o-s-3);
}
.o-top-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--o-s-2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  padding: 6px 10px;
  border-radius: var(--o-r-sm);
  font: inherit;
  font-size: var(--o-fs-sm);
  cursor: pointer;
  transition: background var(--o-dur-fast) var(--o-ease-out);
}
.o-top-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.o-top-switcher-btn:focus-visible {
  outline: 2px solid var(--o-gold);
  outline-offset: 2px;
}
.o-top-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  background: var(--o-bg);
  color: var(--o-ink);
  border: 1px solid var(--o-border);
  border-radius: var(--o-r-md);
  box-shadow: var(--o-shadow-md);
  padding: var(--o-s-1);
  z-index: var(--o-z-popover);
}
.o-top-switcher-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--o-fs-sm);
  color: var(--o-ink);
  border-radius: var(--o-r-sm);
  cursor: pointer;
}
.o-top-switcher-item:hover { background: var(--o-bg-soft); }
.o-top-switcher-item.is-active {
  background: var(--o-navy);
  color: #ffffff;
}
.o-top-switcher-item .o-muted {
  display: block;
  font-size: var(--o-fs-xs);
  color: var(--o-muted);
  margin-top: 2px;
}
.o-top-switcher-item.is-active .o-muted { color: #c0c5cc; }

.o-top-breadcrumb {
  margin-left: var(--o-s-4);
  display: flex;
  align-items: center;
  gap: var(--o-s-1);
  font-size: var(--o-fs-sm);
  color: #c0c5cc;
  min-width: 0;
}
.o-top-breadcrumb .o-top-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.35);
}
.o-top-breadcrumb .o-top-breadcrumb-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.o-top-breadcrumb .o-top-breadcrumb-item.is-leaf {
  color: #ffffff;
  font-weight: 500;
}

.o-top-spacer { flex: 1; }

/* Pillar-specific right-slot widget (e.g. snapshot picker). Sits before
   the command palette + user button in the top bar. */
.o-top-right-slot {
  display: inline-flex;
  align-items: center;
  margin-right: var(--o-s-2);
}
.o-top-right-slot .apollo-snap-picker-trigger {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c0c5cc;
}
.o-top-right-slot .apollo-snap-picker-trigger:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
/* WCAG 2.2 AA fix: prior #8a92a0 on #2c3853 = 3.72:1, fails the 4.5:1
   normal-text floor. Bumped to #aab1be = 5.42:1 — comfortable AA pass
   while keeping the prefix visually subordinate to the bright white
   .apollo-snap-picker-current next to it. Caught by Apollo a11y axe
   workflow run #23 (color-contrast violation on .apollo-snap-picker-trigger
   inside the dark .o-top header). */
.o-top-right-slot .apollo-snap-picker-prefix { color: #aab1be; }
.o-top-right-slot .apollo-snap-picker-current { color: #ffffff; }

.o-top-cmd {
  display: inline-flex;
  align-items: center;
  gap: var(--o-s-2);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c0c5cc;
  padding: 6px 10px;
  border-radius: var(--o-r-sm);
  font: inherit;
  font-size: var(--o-fs-sm);
  cursor: pointer;
  transition: background var(--o-dur-fast) var(--o-ease-out);
}
.o-top-cmd:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.o-top-cmd kbd {
  font-family: var(--o-font-mono);
  font-size: var(--o-fs-xs);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.o-top-user {
  margin-left: var(--o-s-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--o-gold);
  color: var(--o-navy);
  border: 0;
  font: inherit;
  font-size: var(--o-fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.o-top-user:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ─── Left sidebar ──────────────────────────────────────────── */

.o-side {
  grid-area: side;
  background: var(--o-bg);
  border-right: 1px solid var(--o-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--o-z-rails);
  display: flex;
  flex-direction: column;
}
.o-shell--rail .o-side {
  padding: var(--o-s-2) 0;
  align-items: center;
}
.o-shell--rail .o-side .o-side-section-full,
.o-shell--rail .o-side .o-side-header-label,
.o-shell--rail .o-side .o-side-section-body { display: none; }

.o-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--o-s-3) var(--o-s-4);
  border-bottom: 1px solid var(--o-border);
}
.o-side-header-label {
  font-size: var(--o-fs-xs);
  color: var(--o-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.o-side-toggle {
  background: transparent;
  border: 0;
  color: var(--o-muted);
  padding: 4px;
  cursor: pointer;
  border-radius: var(--o-r-sm);
}
.o-side-toggle:hover { color: var(--o-navy); background: var(--o-bg-soft); }
.o-side-toggle:focus-visible { outline: 2px solid var(--o-teal); outline-offset: 1px; }

.o-side-section {
  border-bottom: 1px solid var(--o-border);
  padding: var(--o-s-3) 0;
}
.o-side-section:last-child { border-bottom: 0; }
.o-side-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--o-s-4);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--o-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--o-charcoal);
  cursor: pointer;
  margin-bottom: var(--o-s-2);
}
.o-side-section-head:focus-visible {
  outline: 2px solid var(--o-teal);
  outline-offset: 1px;
  border-radius: var(--o-r-sm);
}
.o-side-section-head .o-side-section-chevron {
  transition: transform var(--o-dur-fast) var(--o-ease-out);
  color: var(--o-muted);
  font-size: 10px;
}
.o-side-section.is-collapsed .o-side-section-chevron {
  transform: rotate(-90deg);
}
.o-side-section.is-collapsed .o-side-section-body {
  display: none;
}
.o-side-section-count {
  font-size: var(--o-fs-xs);
  color: var(--o-gold-deep);
  background: #fff4d6;
  border: 1px solid #f0dfa0;
  padding: 0 6px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
}
.o-side-section-body {
  padding: 0 var(--o-s-4);
}
.o-side-section-reset {
  display: inline-block;
  margin-top: var(--o-s-2);
  font-size: var(--o-fs-xs);
  color: var(--o-muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.o-side-section-reset:hover { color: var(--o-error); }

/* Scope banner (top of sidebar) */
.o-side-scope {
  padding: var(--o-s-3) var(--o-s-4);
  background: var(--o-bg-soft);
  border-bottom: 1px solid var(--o-border);
}
.o-side-scope-label {
  font-size: var(--o-fs-xs);
  color: var(--o-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}
.o-side-scope-value {
  font-family: Georgia, "Iowan Old Style", "Palatino", serif;
  font-size: var(--o-fs-md);
  font-weight: 600;
  color: var(--o-navy-deep);
}

/* Icon-rail items (collapsed) */
.o-side-rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin: 2px 0;
  border-radius: var(--o-r-sm);
  color: var(--o-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.o-side-rail-item:hover { color: var(--o-navy); background: var(--o-bg-soft); }
.o-side-rail-item:focus-visible { outline: 2px solid var(--o-teal); outline-offset: 1px; }

/* ─── Main surface ─────────────────────────────────────────── */

.o-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--o-s-4) var(--o-s-5);
  min-width: 0; /* prevents grid blow-out when inner content is wide */
  background: var(--o-bg-soft);
}

/* ─── Right drawer ─────────────────────────────────────────── */

.o-drawer {
  grid-area: drawer;
  background: var(--o-bg);
  border-left: 1px solid var(--o-border);
  overflow-y: auto;
  z-index: var(--o-z-rails);
}
.o-shell:not(.o-shell--with-drawer) .o-drawer { display: none; }
.o-drawer-head {
  padding: var(--o-s-3) var(--o-s-4);
  border-bottom: 1px solid var(--o-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--o-fs-sm);
  color: var(--o-navy);
  font-weight: 600;
}
.o-drawer-close {
  background: transparent; border: 0;
  color: var(--o-muted); cursor: pointer;
  padding: 2px 6px;
}
.o-drawer-close:hover { color: var(--o-error); }

/* ─── Footer ───────────────────────────────────────────────── */

.o-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  height: var(--o-footer);
  padding: 0 var(--o-s-4);
  background: var(--o-navy-deep);
  color: #c0c5cc;
  font-size: var(--o-fs-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: var(--o-z-chrome);
}
.o-footer-asof { display: inline-flex; align-items: center; gap: 6px; }
.o-footer-asof strong { color: #ffffff; font-weight: 600; }
.o-footer-sep { margin: 0 var(--o-s-3); color: rgba(255, 255, 255, 0.25); }
.o-footer-version {
  font-family: var(--o-font-mono);
  font-size: 10px;
  color: var(--o-gold);
  letter-spacing: 0.02em;
}
.o-footer-spacer { flex: 1; }
.o-footer-action {
  background: transparent;
  border: 0;
  color: #c0c5cc;
  font: inherit;
  font-size: var(--o-fs-xs);
  cursor: pointer;
  padding: 0 var(--o-s-2);
}
.o-footer-action:hover { color: #ffffff; }
.o-footer-action:focus-visible { outline: 2px solid var(--o-gold); outline-offset: 1px; }

/* ─── Preset views (sidebar) ──────────────────────────────── */

.o-preset-group {
  display: flex;
  flex-direction: column;
  gap: var(--o-s-1);
}
.o-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--o-border);
  border-radius: var(--o-r-sm);
  background: var(--o-bg);
  color: var(--o-ink);
  font: inherit;
  font-size: var(--o-fs-sm);
  cursor: pointer;
  transition: border-color var(--o-dur-fast) var(--o-ease-out),
              background var(--o-dur-fast) var(--o-ease-out);
}
.o-preset-btn:hover {
  border-color: var(--o-navy);
  background: var(--o-bg-soft);
}
.o-preset-btn:focus-visible {
  outline: 2px solid var(--o-teal);
  outline-offset: 1px;
}
.o-preset-btn.is-active {
  border-color: var(--o-navy);
  background: var(--o-navy);
  color: #ffffff;
}
.o-preset-btn .o-preset-title { font-weight: 600; }
.o-preset-btn .o-preset-desc {
  color: var(--o-muted);
  font-size: var(--o-fs-xs);
  margin-top: 2px;
  line-height: var(--o-lh-base);
}
.o-preset-btn.is-active .o-preset-desc { color: #c0c5cc; }

/* ─── Section ToC (sidebar) ───────────────────────────────── */

.o-toc {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.o-toc-item {
  display: block;
  padding: 6px 10px 6px 14px;
  font-size: var(--o-fs-sm);
  color: var(--o-charcoal);
  border-left: 2px solid transparent;
  border-radius: 0 var(--o-r-sm) var(--o-r-sm) 0;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border-top: 0; border-right: 0; border-bottom: 0;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.o-toc-item:hover {
  background: var(--o-bg-soft);
  color: var(--o-navy);
}
.o-toc-item:focus-visible {
  outline: 2px solid var(--o-teal);
  outline-offset: -1px;
}
.o-toc-item.is-active {
  border-left-color: var(--o-gold);
  color: var(--o-navy);
  font-weight: 600;
  background: var(--o-bg-soft);
}

/* ─── Methodology link (sidebar) ──────────────────────────── */

.o-side-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--o-fs-sm);
  color: var(--o-teal);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
}
.o-side-link:hover { color: var(--o-teal-deep); }
.o-side-link:focus-visible { outline: 2px solid var(--o-teal); outline-offset: 2px; border-radius: 2px; }

/* ─── Sidebar hint paragraph ─────────────────────────────── */

.o-side-hint {
  margin: 0;
  font-size: var(--o-fs-sm);
  line-height: 1.45;
  color: var(--o-text-muted, #525c6b);
}
.o-side-hint + .o-side-hint { margin-top: 0.4rem; }

/* ─── Focus-visible baseline (§9.3) ───────────────────────── */

.o-shell *:focus-visible {
  outline-offset: 2px;
}

/* Sidebar Apollo-views tablist — give focused tabs a teal ring so
   keyboard users can see the selection during ArrowDown/ArrowUp. */
.o-side-section [role="tab"]:focus-visible {
  outline: 2px solid var(--o-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion — soften focus-ring transitions per §0.5 + WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  .o-shell *,
  .o-shell *::before,
  .o-shell *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}