/* components.css — namespaced (.k-*) shared components, so a shared rule
   can never collide with a repo's own pre-existing class of the same short
   name (klarik.app's .btn is a filled primary button; klarik.glossary's and
   klarik.conceptmodel's .btn is an unrelated bordered tab control -- see
   klarik.app/docs/adr/0008-shared-ui-layer.md's "three unrelated designs
   sharing a class name" finding). Opt-in, migrated one component at a time
   (the ADR's phase 4) -- nothing in this file is loaded until a producer
   or host actually links it.

   Requires tokens.css (linked first) for every var() below -- this file
   defines no colours or shape values of its own. */

/* ── k-header: the "app shell" header (brand, theme toggle, nav buttons) ──
   Was klarik.app's .app-header* (web/doc_page.css) -- the effective
   computed style of the SPA shell's own header -- and, hand-copied a
   second time, klarik.notebook's own .app-header* in web/index.html.
   Markup + behaviour live in k-header.js (standalone pages) or the host's
   own markup (klarik.app's SPA shell); CSS has no way to share DOM
   structure across repos, so those are the other half of this component.

   This file is now the SINGLE source for the header's look. klarik.app's
   SPA shell used to carry its own `header`/`.header-inner`/`.btn-header`
   rules in web/style.css that duplicated -- and then drifted from -- the
   values here (the shell was flattened off the old navy gradient onto a
   plain surface bar in both themes by commits 0a658ef / d996b45; this
   component never got that pass and stayed navy). The shell now adopts
   these .k-header* classes directly, so a colour / size / theme tweak to
   the header is one edit, here, reaching all three consumers (SPA shell,
   main-index doc page, klarik.notebook). */
.k-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Flat surface chrome in every theme -- matches klarik.app's app shell
     (which the unguarded navy-gradient rule used to fight until both
     theme states overrode it away). */
  background: var(--surface);
  border-bottom: 2px solid var(--border-strong);
  box-shadow: none;
}
.k-header__inner {
  max-width: var(--app-content-max);   /* tokens.css -- shared with .main / .page */
  margin: 0 auto;
  padding: 24px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.k-header__brand {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.k-header__title {
  display: block;
  font-family: var(--font-sans);
  /* A dimmed --muted-strong: the title is large and 700-weight, so the same grey
     the tagline uses reads as darker here. Fading it toward transparent lands it
     at the tagline's apparent tone in both themes without a new palette token.
     Tracks --muted-strong so it lifts with the tagline. */
  color: color-mix(in srgb, var(--muted-strong) 78%, transparent);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.006em;
  line-height: 1.2;
}
.k-header__tag {
  display: block;
  margin-top: 3px;
  color: var(--muted-strong);
  font-size: 0.78rem;
}
.k-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Shape shared with .btn (klarik.app's web/style.css) via tokens.css's
   --btn-* (ADR 0008 phase 4). Uses the full-size --btn-pad/--btn-font so
   the header controls read at the same weight as the rest of the app's
   buttons rather than the smaller --btn-compact-* step. Resting look is a
   neutral outline button on the flat surface bar -- accent colour is
   reserved for hover, matching the shell's post-flatten `.btn.btn-header`. */
.k-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--btn-h);
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.k-header__btn svg { width: 16px; height: 16px; stroke-width: 1.9; }
.k-header__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.k-header__btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
/* The one genuinely theme-specific value: a slightly stronger resting
   border on the darker surface (mirrors the shell's dark-theme rule). */
:root[data-theme="dark"] .k-header__btn { border-color: var(--border-strong); }

@media (max-width: 899px) {
  /* max-width steps down via --app-content-max in tokens.css; only the
     vertical padding is header-specific. */
  .k-header__inner { padding: 14px 0; }
}
@media (max-width: 560px) {
  .k-header__inner { align-items: flex-start; gap: 12px; }
}

/* ── k-tab: a bordered, active-state-toggling control ──
   Was klarik.glossary's and klarik.conceptmodel's own .btn -- a name that
   collided with klarik.app's unrelated filled-primary .btn (see ADR 0008's
   "three unrelated designs sharing a class name" finding). Byte-identical
   in both repos before this move (verified, not assumed). Not a button in
   the .k-btn sense: no min-height/weight-700/accent-fill -- it's the
   nav-back/forward/legend control and the "Drift variants"/reset-view
   toggle in each viewer's topbar, styled like an unselected tab until
   .k-tab--active says otherwise. */
.k-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}
.k-tab:hover { border-color: var(--border-strong); }
.k-tab--active { border-color: var(--accent); color: var(--accent); }