/*
  Knowledge Base theme: the site's tokens for the static explainer pages.
  Every explainer links this file (the kbPages() build step adds the <link>).

  One raised surface on navy, like the rest of kaiserchan.com:
  - the page is navy; nodes, panels and cards are the one raised surface;
  - groups (zones) are unfilled frames with a ruled heading, not filled boxes;
  - nesting goes darker (a well), never lighter;
  - a category shows as a coloured edge plus a solid shaped marker, not a fill;
  - brass marks actions only. No light/dark switching.

  The page header is the site's own (see vite-plugin-kb.ts); this file styles the content
  under it: the shared container, the title, and the explainers' own maps and panels.

  Contrast (WCAG 2.x), measured on the rendered pages:
    ink     #EEE8DE  on page 14.18 · surface 11.81 · well 15.12
    muted   #B9C2CF  on page  9.61 · surface  8.01 · well 10.25
    line    #65768F  on page  3.74 · surface  3.11 · well  3.98   (interactive edges)
    category edges on page: sage 7.26 · slate 6.92 · brass 6.18; on surface 5.15 or more
    accent text on its tint and selected fill: 5.40 or more (lowest: brass on brass-sel)
    navy numbers on the solid badges: sage 10.01 · slate 9.46 · brass 8.42
    navy text on filled buttons: brass 8.42 · sage edge 7.26 · brass edge 6.18 · ink 14.18
  Decorative only, never the sole edge of something interactive:
    hairline #2A3B55, zone frame #33486A.
*/
:root {
  color-scheme: dark;

  /* Surfaces: page, the one raised surface (and its hover), and the darker well for nesting */
  --kb-page: #0F1B2D;
  --kb-surface: #1A2A44;
  --kb-surface-hover: #1E3050;
  --kb-well: #0B1424;
  --kb-navy: #0F1B2D;

  /* Text and lines */
  --kb-ink: #EEE8DE;
  --kb-muted: #B9C2CF;
  /* Edges of interactive things, dashed setup frames, connector lines */
  --kb-line: #65768F;
  /* Decorative dividers */
  --kb-hairline: #2A3B55;
  /* A zone: an unfilled frame around a headed group */
  --kb-zone-frame: #33486A;

  /* Categories. Per hue:
     accent  text, markers, badges, hover edge
     -edge   the node's resting edge and container frames
     -tint   fills behind accent text (tags, chips)
     -sel    the selected node's fill
     -wash   the faint fill inside a category container */
  --kb-sage: #9DD0B9;
  --kb-sage-edge: #85B1A3;
  --kb-sage-tint: #233441;
  --kb-sage-sel: #2C4153;
  --kb-sage-wash: #182635;

  --kb-slate: #AFC1DD;
  --kb-slate-edge: #94A5C1;
  --kb-slate-tint: #253246;
  --kb-slate-sel: #2F3F59;

  --kb-brass: #D2B07A;
  --kb-brass-edge: #B09770;
  --kb-brass-tint: #2A3038;
  --kb-brass-sel: #353C49;
  --kb-brass-wash: #1B2432;

  /* The selected fill for neutral nodes */
  --kb-neutral-sel: #23365A;

  /* Navy text on filled buttons and badges */
  --kb-on-fill: #0F1B2D;

  /* Focus and selection: the light ink, never a category colour */
  --kb-focus: #EEE8DE;
  --kb-focus-width: 2.5px;

  /* Shadows: raised surfaces, and the narrow slide-over panel */
  --kb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --kb-shadow-side: -12px 0 32px rgba(0, 0, 0, .55);

  /* Type */
  --kb-font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --kb-font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --kb-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Radii */
  --kb-radius-sm: 3px;
  --kb-radius: 6px;
  --kb-radius-lg: 8px;
  --kb-radius-pill: 999px;

  /* Content width and side padding: the site's own Container (max-w-[1360px] px-5 md:px-10 xl:px-16),
     shared by the explainer content (.kb-content), the footer strip and every other page of the site,
     so nothing moves sideways between pages. Don't override it per explainer. */
  --kb-strip-max: 1360px;
  --kb-strip-pad: 20px;

  /* The site header (the app's own Navigation, added at <!-- kb:header -->) is sticky and this tall.
     Explainer panels that stick or scroll to a target start below it. */
  --kb-header-h: 72px;

  /* Spacing scale. Standards (docs/knowledge-base.md): page rhythm 12/20/24, panel padding 24,
     HTML-map node gap 12 and zone padding 20, SVG-map column gap 28 and row gap 36 (user units). */
  --kb-space-1: 4px;
  --kb-space-2: 8px;
  --kb-space-3: 12px;
  --kb-space-4: 16px;
  --kb-space-5: 24px;
  --kb-space-6: 32px;
  --kb-space-7: 48px;

  /* Buttons, the same on every explainer: the shape of the site's Contact button.
     Primary = brass fill, navy text; secondary = transparent, --kb-line edge, ink text. Chips and tags stay pills. */
  --kb-btn-h: 40px;
  --kb-btn-pad: 0 18px;
  --kb-btn-radius: 6px;
  --kb-btn-size: 15px;
  --kb-btn-weight: 600;

  /* The empty detail panel, the same on every explainer: an unfilled dashed frame */
  --kb-empty-pad: 24px;
  --kb-empty-head: 600 20px/1.3 var(--kb-font-display);
  --kb-empty-body: 400 15.5px/1.55 var(--kb-font-body);
}

html {
  -webkit-text-size-adjust: 100%;
  /* The scrollbar's space is always kept, so short and long pages line up (the site does the same) */
  scrollbar-gutter: stable;
  /* Jumps to a #target land below the sticky header */
  scroll-padding-top: calc(var(--kb-header-h) + var(--kb-space-4));
}
body {
  margin: 0;
}

/* ---------- Content: the site's container, the eyebrow and the title ---------- */

.kb-content {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--kb-strip-max);
  margin-inline: auto;
  padding-top: 40px;
  padding-left: max(var(--kb-strip-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--kb-strip-pad), env(safe-area-inset-right, 0px));
}
.kb-content:focus {
  outline: none;
}
@media (min-width: 768px) { .kb-content { padding-top: 48px; } }

/* Every explainer opens the same way: a link back to the Knowledge Base, then the title (both from <!-- kb:title -->).
   The title is the entry's title in knowledgeBase.ts, so it always matches the card. */
.kb-crumb {
  margin: 0 0 var(--kb-space-3);
  font-family: var(--kb-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.kb-crumb a {
  color: var(--kb-muted);
  text-decoration: none;
  border-radius: 2px;
}
.kb-crumb a:hover {
  color: var(--kb-ink);
  text-decoration: underline;
  text-decoration-color: var(--kb-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
h1.kb-title {
  margin: 0;
  font-family: var(--kb-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--kb-ink);
  text-wrap: balance;
}

/* ---------- Footer strip ---------- */

.kb-strip {
  background: var(--kb-page);
  border-bottom: 1px solid var(--kb-hairline);
  color: var(--kb-ink);
  font-family: var(--kb-font-body);
  font-size: 15px;
  line-height: 1.4;
}
.kb-strip-in {
  max-width: var(--kb-strip-max);
  margin: 0 auto;
  padding: 0 max(var(--kb-strip-pad), env(safe-area-inset-right, 0px)) 0 max(var(--kb-strip-pad), env(safe-area-inset-left, 0px));
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
}
@media (min-width: 768px) { :root { --kb-strip-pad: 40px; } }
@media (min-width: 1280px) { :root { --kb-strip-pad: 64px; } }
.kb-strip a {
  color: var(--kb-ink);
  text-decoration: none;
  border-radius: 2px;
}
.kb-strip a:hover {
  text-decoration: underline;
  text-decoration-color: var(--kb-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.kb-strip a:focus-visible {
  outline: 2px solid var(--kb-brass);
  outline-offset: 4px;
}
.kb-strip-muted {
  color: var(--kb-muted);
}
/* The explainers style bare <footer> elements; the strip stays itself */
footer.kb-strip {
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--kb-hairline);
  display: block;
  font-size: 15px;
  color: var(--kb-ink);
}