/* ===================================================================
   Component classes — small set of repeated patterns that aren't worth
   re-writing inline as Tailwind utilities each time. Anything more
   complex than a few utility classes that's used 5+ times across the app.

   Tokens live in design-tokens.css. Single-source colors/fonts/spacing
   via the `var(--*)` references.
   =================================================================== */

/* Sidebar nav item — repeated 7+ times across nav groups */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.nav-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.nav-item.is-active {
  background: var(--surface);
  color: var(--ink);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent);
}

/* Chat assistant markdown — styles the CommonMarker output inside an
   assistant message bubble. Tailwind v4 has no built-in typography
   plugin; this is the minimum needed for Claude's tables/lists/headings/
   code to look right in the chat thread. */
.chat-md {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.chat-md > * + * { margin-top: 0.7em; }
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 1.1em;
  letter-spacing: -0.006em;
}
.chat-md h1 { font-size: 18px; }
.chat-md h2 { font-size: 16px; }
.chat-md h3 { font-size: 14.5px; color: var(--ink-2); text-transform: none; }
.chat-md h4 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* No top margin here: `* + *` above spaces consecutive blocks, and a rule with an
   element selector would win over it. */
.chat-md p { margin-bottom: 0; }
.chat-md strong { color: var(--ink); font-weight: 600; }
.chat-md em     { color: var(--ink-2); }
.chat-md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.chat-md a:hover { color: var(--ink); }
.chat-md ul, .chat-md ol { padding-left: 1.4em; margin-bottom: 0; }
.chat-md ul { list-style: disc; }
.chat-md ol { list-style: decimal; }
.chat-md li { margin: 0.15em 0; }
.chat-md li > p:first-child { margin: 0; }
.chat-md blockquote {
  border-left: 2px solid var(--hairline-strong);
  padding-left: 0.8em;
  color: var(--ink-2);
  font-style: italic;
}
.chat-md code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.chat-md pre {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 10px 12px;
  overflow-x: auto;
  max-height: 320px;
}
.chat-md pre code { background: none; padding: 0; }
.chat-md hr { border: 0; border-top: 1px solid var(--hairline); margin: 1em 0; }

/* Tables — what most of Claude's answers contain. Compact, hairline-bordered,
   right-align numeric cells the LLM marked with `---:`. */
.chat-md table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.chat-md thead { background: var(--surface-2); }
.chat-md th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline-strong);
}
.chat-md td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
}
.chat-md tr:last-child td { border-bottom: 0; }
.chat-md th[align="right"], .chat-md td[align="right"] { text-align: right; }

/* Chart in a chat answer (Chat::ChartFence): the report's server-rendered SVG charts,
   scaled like .report-figure. */
.chat-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Layout flash toast (shared/_flash) — one place for every redirect
   notice/alert. Token colours so it follows aesthetic + dark mode. */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.flash--leaving { opacity: 0; transform: translateY(-4px); }
.flash--notice {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--ink);
}
.flash--alert {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--ink);
}
.flash__close {
  flex: none;
  margin: -2px -4px 0 0;
  padding: 0 6px;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.flash__close:hover { color: var(--ink); background: oklch(0 0 0 / 0.06); }

/* Report chat drawer ("Frag diesen Bericht", saisonberichte/_chat_drawer).
   Fixed below the topbar on the right; full width on phones. The `drawer`
   Stimulus controller toggles the [hidden] attribute. */
.report-drawer {
  position: fixed;
  top: 3rem;              /* the topbar's h-12 */
  right: 0;
  bottom: 0;
  z-index: 45;
  width: min(30rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--hairline);
  box-shadow: -8px 0 32px oklch(0 0 0 / 0.10);
}
.report-drawer[hidden] { display: none; }

/* Turbo's page-load progress bar, in the app's accent instead of the default
   blue. Shown when a visit or an in-place report refresh takes a moment. */
.turbo-progress-bar {
  height: 2px;
  background: var(--accent);
}

/* Sidebar as an off-canvas drawer below `lg` (1024 px); from `lg` up it is
   the regular sticky column and these rules don't apply. The `sidebar`
   Stimulus controller toggles [data-sidebar-open] on the shell. */
@media (max-width: 1023.98px) {
  .sidebar-panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(18rem, 85vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: none;
  }
  [data-sidebar-open] .sidebar-panel {
    transform: none;
    box-shadow: 0 0 0 1px var(--hairline), 8px 0 32px oklch(0 0 0 / 0.18);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: oklch(0 0 0 / 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  [data-sidebar-open] .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-panel, .sidebar-backdrop, .flash { transition: none; }
}

/* Sticky report TOC links (saisonberichte/show). The `toc` Stimulus
   controller sets aria-current on the section in view. */
.toc-link {
  color: var(--ink-2);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}
.toc-link:hover { color: var(--ink); }
.toc-link[aria-current="true"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--accent);
}

/* Activity-ring chip — toggled by the activity_ring Stimulus controller.
   Base layout comes from Tailwind utilities on the button itself; only
   the active state is centralised here so the JS toggle stays a one-liner. */
.chip--active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.chip--active:hover {
  color: var(--bg);
}

/* Chart tooltip — instant, theme-aware replacement for native SVG <title>
   tooltips. A single node lives on <body> and follows the cursor; the
   `tooltip` Stimulus controller toggles `hidden` and positions it. Inverted
   (ink ground / bg text) so it reads as a distinct floating label in every
   theme. pointer-events:none keeps it from stealing the hover it describes. */
.chart-tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  max-width: 18rem;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--bg);
  background: var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.chart-tooltip[hidden] {
  display: none;
}

/* Report charts and maps (Reports::Charts): server-rendered SVGs with a fixed viewBox,
   scaled to the width of their container. */
.report-figure svg {
  display: block;
  width: 100%;
  height: auto;
}