/* ==========================================================================
   Cerberus — reset, typography and the application shell.

   Shell architecture
   ------------------
   The document itself NEVER scrolls. `body` is a two-row grid:

       [ topbar        auto ]   sticky chrome, always visible
       [ .shell         1fr ]   min-height:0 so children can own the overflow

   A page then declares how it uses that 1fr:
     .shell--stream  -> filter rail (auto) + one internal scroller (1fr)
     .shell--scroll  -> the whole page body scrolls inside the shell

   Consequence: on the logs view the filters and the newest lines are on screen
   at the same time, permanently, exactly like `tail -f` in a terminal pane.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Components below set explicit `display`, which would otherwise win over the
   UA sheet's [hidden] rule and leave "hidden" elements visible. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* the page never scrolls; regions do */
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: var(--accent-wash); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3 { margin: 0; font-weight: 620; color: var(--fg-strong); }
h1 { font-size: var(--fs-xl);  letter-spacing: -0.022em; line-height: 1.25; }
h2 { font-size: var(--fs-lg);  letter-spacing: -0.016em; }
h3 { font-size: var(--fs-md);  letter-spacing: -0.012em; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

/* Micro label: the only place uppercase + wide tracking is allowed. */
.eyebrow {
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------------------------------------------------------------- scrollbars */
/* Thin, self-effacing, theme-aware. Standard behaviour is preserved — only the
   chrome is restyled, never the mechanics. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); background-clip: content-box; }

/* -------------------------------------------------------------------- icons */
.lucide { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.lucide-sm { width: 14px; height: 14px; }
.lucide-lg { width: 18px; height: 18px; }
.lucide-xl { width: 22px; height: 22px; }

/* ------------------------------------------------------------------- topbar */
.topbar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding: 0 18px;
  /* Solid, not glass: in this shell nothing scrolls underneath the top bar, so
     a backdrop filter would cost a repaint, buy no depth, and — because it
     creates a backdrop root — stop descendant popovers from blurring the page
     at all. Translucency is reserved for surfaces that actually float. */
  background: var(--bg-chrome);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--inner-lip);
}

.brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--fg-strong);
  font-size: var(--fs-lg); font-weight: 640; letter-spacing: -0.02em;
  padding: 6px 10px 6px 7px; margin-left: -7px;
  border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease-out);
}
.brand:hover { text-decoration: none; background: var(--bg-raised); }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-name { line-height: 1; }

/* Nav is a segmented control: one recessed track, the active item lifted out
   of it. Reads as a physical switch rather than three loose links. */
.mainnav {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3.5px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 0 15px;
  border-radius: 7.5px;
  color: var(--fg-muted);
  font-size: var(--fs-md); font-weight: 550; letter-spacing: -0.008em;
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.nav-link:hover { color: var(--fg-strong); text-decoration: none; }
.nav-link .lucide { width: 16px; height: 16px; opacity: 0.75; }
.nav-link.active {
  color: var(--fg-strong);
  background: var(--bg-surface);
  border: none;
  box-shadow: var(--shadow-1), var(--inner-lip);
  font-weight: 600;
}
.nav-link.active .lucide { color: var(--accent); opacity: 1; }
.nav-link:active { transform: scale(0.975); }

.topbar-actions { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
/* The top bar runs one step larger than the body chrome: it is the only
   persistent surface, so its targets get the extra few pixels. */
.topbar-actions .icon-btn { width: 36px; height: 36px; }
.topbar-actions .icon-btn .lucide { width: 17px; height: 17px; }

/* -------------------------------------------------------------------- shell */
.shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
/* Pages that are documents rather than streams (dashboard, run detail) put
   their own scroller in the second row. */
.shell--scroll { grid-template-rows: minmax(0, 1fr); }
.shell-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.shell-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 22px var(--shell-pad) 56px;
}

/* Section heading inside document pages. */
.section-head {
  display: flex; align-items: center; gap: 9px;
  margin: 30px 0 12px;
}
.section-head:first-child { margin-top: 0; }
.section-head .lucide { color: var(--fg-faint); }
.section-head .count {
  margin-left: 2px; padding: 1px 7px;
  border-radius: var(--r-pill); background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  :root { --shell-pad: 14px; --topbar-h: 54px; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 10px; }
  .brand-name { display: none; }
  .nav-link { padding: 0 10px; }
  .nav-link .label { display: none; }
}

/* -------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep the live-tail pulse legible as a static dot rather than removing it. */
  .live-dot { animation: none !important; opacity: 1 !important; }
}