/* ===================================================================
   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; }
.chat-md p { margin: 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: 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: 10.5px;
  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 container instantiated by chart_controller.js. The Stimulus
   controller stamps `data-controller="chart"` on a div that needs a
   stable size before Highcharts mounts inside it. */
.chat-chart {
  width: 100%;
  min-height: 260px;
}

/* Topbar search input — repeated per layout but identical visually */
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 5px 10px;
  border-radius: 4px;
  width: 280px;
  font-size: 12.5px;
  color: var(--muted);
}
.search-box input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: inherit;
}
.search-box kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  border: 1px solid var(--hairline);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--muted);
}