/*
 * site.css - Keel.to layout and components, built only from the tokens in tokens.css.
 * Components follow docs/DESIGN.md "Spacing & components".
 */

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

/* --k-header-height is set by js/app.js. It keeps focused elements and hash targets
   out from under the sticky header (WCAG 2.4.11 Focus Not Obscured). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--k-header-height, 0px) + var(--k-space-s));
}

body {
  margin: 0;
  background: var(--k-color-bg);
  color: var(--k-color-text);
  font-family: var(--k-font-text);
  font-size: var(--k-font-size-m);
  line-height: var(--k-line-height-text);
}

h1, h2, h3 {
  font-weight: var(--k-font-weight-strong);
  line-height: var(--k-line-height-heading);
  letter-spacing: -0.01em;
  margin: 0 0 var(--k-space-m);
}
h1 { font-size: var(--k-font-size-xxxl); }
h2 { font-size: var(--k-font-size-xxl); }
h3 { font-size: var(--k-font-size-xl); margin-top: var(--k-space-l); }
h4 { font-size: var(--k-font-size-l); font-weight: var(--k-font-weight-strong); line-height: var(--k-line-height-heading); margin: 0 0 var(--k-space-xs); }

/* Section headings receive focus by script only; no ring is needed on them. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus { outline: none; }

p, ul, ol { margin: 0 0 var(--k-space-m); max-width: var(--k-measure); }
li + li { margin-top: var(--k-space-xxs); }

a { color: var(--k-color-accent); text-underline-offset: 2px; }
a:hover { color: var(--k-color-accent-hover); }

code {
  font-family: var(--k-font-code);
  font-size: 0.9em;
  background: var(--k-color-surface-code);
  border-radius: var(--k-radius-s);
  padding: 0 var(--k-space-xxs);
  /* Long inline code (paths, URLs) breaks instead of widening the page on phones (AC-3).
     Code blocks keep white-space: pre, so this does not change them. */
  overflow-wrap: anywhere;
}

/* Focus ring: 2px accent outline with a 2px offset on every interactive element.
   Code blocks can scroll, so they take keyboard focus too (WCAG 2.1.1). */
a:focus-visible,
button:focus-visible,
pre:focus-visible {
  outline: 2px solid var(--k-color-accent);
  outline-offset: 2px;
}

/* Visually hidden: not shown, but screen readers read it and it can take focus (Home h1). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until it has keyboard focus. */
.skip-link {
  position: absolute;
  left: var(--k-space-m);
  top: -100px;
  z-index: 20;
  background: var(--k-color-surface);
  padding: var(--k-space-xs) var(--k-space-m);
  border-radius: var(--k-radius-s);
}
.skip-link:focus { top: var(--k-space-xs); }

/* ---------- Header and navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--k-color-surface);
  border-bottom: 1px solid var(--k-color-border);
  box-shadow: var(--k-shadow-s);
}

/* The header, main, and footer use the full window width (DESIGN.md Layout), with
   --k-space-l at each side (--k-space-m on phones; see the media query at the end). */
.header-inner {
  padding: var(--k-space-s) var(--k-space-l);
  display: flex;
  align-items: center;
  gap: var(--k-space-m);
  flex-wrap: wrap;
}

.brand {
  font-weight: var(--k-font-weight-strong);
  font-size: var(--k-font-size-l);
  color: var(--k-color-text);
  text-decoration: none;
  margin-right: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.brand:hover { color: var(--k-color-text); }

/* The navigation takes the space between the site name and the theme switch, and its links
   wrap inside that space, right-aligned. So on mid-width screens the switch stays at the right
   end of the first row instead of wrapping to a row of its own (DESIGN.md Header). */
.site-nav { flex: 1 1 0; min-width: 0; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--k-space-m);
}
.site-nav li + li { margin-top: 0; }

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--k-color-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--k-duration) ease-out, border-color var(--k-duration) ease-out;
}
.site-nav a:hover { color: var(--k-color-accent); }
.site-nav a[aria-current="page"] {
  color: var(--k-color-accent);
  border-bottom-color: var(--k-color-accent);
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--k-space-m);
  border-radius: var(--k-radius-s);
  font: inherit;
  font-weight: var(--k-font-weight-strong);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--k-duration) ease-out, border-color var(--k-duration) ease-out;
}
.button-primary {
  background: var(--k-color-accent);
  border: 1px solid var(--k-color-accent);
  color: var(--k-color-on-accent);
}
.button-primary:hover {
  background: var(--k-color-accent-hover);
  border-color: var(--k-color-accent-hover);
  color: var(--k-color-on-accent);
}
.button-secondary {
  background: var(--k-color-surface);
  border: 1px solid var(--k-color-border-strong);
  color: var(--k-color-accent);
}
.button-secondary:hover { color: var(--k-color-accent-hover); }
.button-secondary[aria-pressed="true"] { border-color: var(--k-color-accent); }

/* Icon button (DESIGN.md Icon button): subdued, icon only, 44 x 44 px target. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--k-radius-s);
  background: transparent;
  color: var(--k-color-text-muted);
  cursor: pointer;
  transition: background-color var(--k-duration) ease-out, color var(--k-duration) ease-out;
}
.icon-button:hover { color: var(--k-color-text); background: var(--k-color-surface-code); }
.icon-button .icon { display: block; width: 20px; height: 20px; }

/* The theme switch shows the moon in the light theme and the sun in the dark theme. It follows
   the theme that shows (data-theme, else the system setting), not aria-pressed, so the right icon
   shows before js/app.js runs. The same 3 cases as the theme tokens in css/tokens.css. */
.theme-button .icon-sun { display: none; }
:root[data-theme="dark"] .theme-button .icon-moon { display: none; }
:root[data-theme="dark"] .theme-button .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-button .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-button .icon-sun { display: block; }
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-s);
  margin: 0 0 var(--k-space-m);
}

/* The menu button shows only on narrow screens (see the media query below). */
.menu-button { display: none; }

/* ---------- Sections ---------- */
main {
  padding: var(--k-space-xl) var(--k-space-l) var(--k-space-xxxl);
}

/* The sections (display boxes) have the width of the Full standard text: 120ch (in the body
   font, like the text) plus the padding and the 1px border at each side, centered (DESIGN.md
   Layout, AC-3). A narrower window keeps main's side space. */
.section {
  max-width: calc(var(--k-measure-wide) + 2 * var(--k-space-xl) + 2px);
  margin-left: auto;
  margin-right: auto;
  background: var(--k-color-surface);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-m);
  padding: var(--k-space-xl);
  margin-bottom: var(--k-space-xxl);
}
.section[hidden] { display: none; }
/* Long words (such as a bare URL in KEEL.md) break instead of widening the page (AC-3). */
.section { overflow-wrap: break-word; }

.lead { font-size: var(--k-font-size-l); }

/* Logo panel on Home (DESIGN.md Layout and Brand, AC-18). The panel has the background of
   the logo that shows: #f5f6f8 for the light logo, #123a66 (blueprint blue) for the dark logo.
   These are logo colors, fixed on purpose, not theme tokens. Never recolor the logo itself. */
.logo-panel {
  background: #f5f6f8;
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-m);
  overflow: hidden;
  margin: 0 0 var(--k-space-l);
  /* The logo, the Home text, and both links fit in the first screen (DESIGN.md, AC-18).
     23rem = header + section padding + Home text; 1.6 = the 16:10 logo shape.
     Never wider than the section; never narrower than 24rem, so a very short window scrolls.
     0.9 makes the logo 10% smaller at every size, for a better fit. */
  width: calc(0.9 * min(100%, max(24rem, calc((100svh - 23rem) * 1.6))));
}
.logo-panel img,
.logo-panel svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Both logos are inline (js/content.js); show the one for the theme that shows. The same
   3 cases as the theme tokens in css/tokens.css: the switch (data-theme), else the system. */
.logo-panel .keel-logo-dark { display: none; }
:root[data-theme="dark"] .logo-panel { background: #123a66; }
:root[data-theme="dark"] .logo-panel .keel-logo-light { display: none; }
:root[data-theme="dark"] .logo-panel .keel-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-panel { background: #123a66; }
  :root:not([data-theme="light"]) .logo-panel .keel-logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-panel .keel-logo-dark { display: block; }
}
.muted { color: var(--k-color-text-muted); }

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--k-space-m);
  margin: 0 0 var(--k-space-m);
}
.card {
  background: var(--k-color-surface);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-m);
  padding: var(--k-space-l);
}
.card h4 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* ---------- Steps ---------- */
.steps { padding-left: var(--k-space-l); }
.steps li + li { margin-top: var(--k-space-s); }

/* ---------- Code block with a copy button ---------- */
.code-block {
  display: flex;
  align-items: flex-start;
  gap: var(--k-space-s);
  background: var(--k-color-surface-code);
  border-radius: var(--k-radius-m);
  padding: var(--k-space-s) var(--k-space-m);
  margin: 0 0 var(--k-space-m);
  max-width: var(--k-measure);
}
.code-block pre {
  flex: 1;
  margin: 0;
  overflow-x: auto;
  font-family: var(--k-font-code);
  font-size: var(--k-font-size-s);
  line-height: var(--k-line-height-text);
  align-self: center;
}
.code-block code { background: none; padding: 0; font-size: inherit; }

/* ---------- Callout ---------- */
.callout {
  border-left: 4px solid var(--k-color-accent);
  background: var(--k-color-surface);
  padding: var(--k-space-xs) var(--k-space-m);
  margin: 0 0 var(--k-space-m);
  max-width: var(--k-measure);
}
.callout-label { font-weight: var(--k-font-weight-strong); margin-right: var(--k-space-xxs); }
.callout-warning { border-left-color: var(--k-color-warning); }
.callout-warning .callout-label { color: var(--k-color-warning); }

/* Polite status text, such as "Copied" or a download error. */
.status { font-size: var(--k-font-size-s); color: var(--k-color-text-muted); min-height: 1.6em; }
.status.is-error { color: var(--k-color-danger); }
/* An empty status line takes no space, so it leaves no gap (such as under Getting started
   step 1). It stays in the page, not display:none, so screen readers still read a new message. */
.status:empty { min-height: 0; margin: 0; }

/* ---------- Point lists (Summary, Tips): a list of cards ---------- */
.point-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--k-space-m);
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--k-space-m);
}
.point-list li + li { margin-top: 0; }
.point-list .card p { margin: 0; }

/* ---------- Live content states (js/content.js) ---------- */
.loading-line { color: var(--k-color-text-muted); font-size: var(--k-font-size-s); }

/* ---------- Rendered Markdown (js/markdown.js output in the Full standard) ---------- */
/* Every block uses the same wide measure, so text lines up with the tables (DESIGN.md Reading width).
   The measure is set on the container, not on each block: ch follows each element's own font, so
   120ch in a code block (14px monospace) is narrower than 120ch in a paragraph. */
.markdown { max-width: var(--k-measure-wide); }
.markdown p,
.markdown ul,
.markdown ol,
.markdown pre,
.markdown blockquote,
.markdown .callout,
.markdown .table-scroll { max-width: none; }
.markdown h3 {
  margin-top: var(--k-space-xxl);
  padding-top: var(--k-space-l);
  border-top: 1px solid var(--k-color-border);
}
.markdown h4 { margin-top: var(--k-space-l); }
.markdown li > p { margin-bottom: var(--k-space-xs); }
.markdown li > ul,
.markdown li > ol { margin: var(--k-space-xs) 0; }
.markdown hr { border: 0; border-top: 1px solid var(--k-color-border); margin: var(--k-space-xl) 0; }

.markdown pre {
  background: var(--k-color-surface-code);
  border-radius: var(--k-radius-m);
  padding: var(--k-space-s) var(--k-space-m);
  margin: 0 0 var(--k-space-m);
  overflow-x: auto;
  font-family: var(--k-font-code);
  font-size: var(--k-font-size-s);
  line-height: var(--k-line-height-text);
}
.markdown pre code { background: none; padding: 0; font-size: inherit; }

.markdown blockquote {
  margin: 0 0 var(--k-space-m);
  padding: var(--k-space-xs) var(--k-space-m);
  border-left: 4px solid var(--k-color-border-strong);
}
.markdown blockquote p:last-child,
.markdown .callout p:last-child { margin-bottom: 0; }
.callout-title { margin-bottom: var(--k-space-xxs); }

/* Tables scroll inside their container on narrow screens, never the page (DESIGN.md Table). */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--k-space-m);
  border-radius: var(--k-radius-s);
}
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--k-font-size-s);
}
.table-scroll th,
.table-scroll td {
  text-align: left;
  vertical-align: top;
  padding: var(--k-space-xs) var(--k-space-s);
  border-bottom: 1px solid var(--k-color-border);
}
.table-scroll th { font-weight: var(--k-font-weight-strong); }
.table-scroll:focus-visible { outline: 2px solid var(--k-color-accent); outline-offset: 2px; }

/* ---------- Footer ---------- */
/* The footer is a surface, like every other content area (Background > Surface > Content). */
.site-footer {
  background: var(--k-color-surface);
  border-top: 1px solid var(--k-color-border);
  font-size: var(--k-font-size-s);
  color: var(--k-color-text-muted);
}
.footer-inner {
  padding: var(--k-space-m) var(--k-space-l);
}
.footer-inner p { margin: 0; }

/* ---------- Narrow screens (phones) ---------- */
@media (max-width: 767px) {
  .header-inner { padding-left: var(--k-space-m); padding-right: var(--k-space-m); }
  main { padding: var(--k-space-l) var(--k-space-m) var(--k-space-xxxl); }
  .footer-inner { padding-left: var(--k-space-m); padding-right: var(--k-space-m); }
  .section { padding: var(--k-space-l) var(--k-space-m); margin-bottom: var(--k-space-l); }

  /* With script, the navigation folds into a menu; without script, it stays open.
     The open menu scrolls inside itself, so its last links can be reached on short
     screens and at 400% zoom (WCAG 1.4.10 Reflow). */
  .js-ready .menu-button { display: inline-flex; }
  /* The navigation is after the Menu button in the DOM and before the theme switch. On phones it
     moves to its own row below (order: 1), so the site name, Menu, and the theme switch stay on
     the first row (DESIGN.md Header). */
  /* A full row of its own, also without script (no js-ready), where the navigation stays open. */
  .site-nav { order: 1; flex: 0 0 100%; width: 100%; }
  .js-ready .site-nav { display: none; }
  .js-ready .site-nav.is-open {
    display: block;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .site-nav ul { flex-direction: column; }
  .site-nav a { width: 100%; font-size: var(--k-font-size-m); }
}