/* The design-language reference: /technology/language, /technology/language/{page}. Uses the tokens in kj.css (loaded
   by every page), so both colour schemes follow the site's toggle. The only colours of its own
   are the --hl-* syntax tokens below: one set per scheme, each checked against the code
   background for a 4.5:1 contrast by `language::tests::the_highlight_palette_is_readable`.

   The token blocks mirror kj.css: light on :root, dark under prefers-color-scheme (unless the
   viewer chose light) and under [data-theme="dark"]. The class names are the ones
   `ww_docs::highlight` emits (Kind::class). */

:root {
  --hl-pun: #5b5750;
  --hl-com: #566652;
  --hl-node: #1f4e4c;
  --hl-key: #7a3a10;
  --hl-str: #2a6a2c;
  --hl-cel: #6b3fa0;
  --hl-cnum: #9a3412;
  --hl-cid: #1d5a99;
  --hl-cfn: #99286a;
  --hl-cop: #5b5750;
  --hl-cstr: #2a6a2c;
  --hl-ckw: #6b3fa0;
  --hl-num: #9a3412;
  --hl-unit: #7e5c12;
  --hl-kw: #6b3fa0;
  --hl-id: #1d5a99;
  --hl-part: #1f4e4c;
  --hl-at: #5b5750;
  --hl-mark: #9a3412;
  --hl-slot: #6b3fa0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl-pun: #b2cae2;
    --hl-com: #a8c8a0;
    --hl-node: #ffbe94;
    --hl-key: #f5d06a;
    --hl-str: #a6e3a1;
    --hl-cel: #d3b3ff;
    --hl-cnum: #ffb38a;
    --hl-cid: #8ec8ff;
    --hl-cfn: #ff9ec8;
    --hl-cop: #b2cae2;
    --hl-cstr: #a6e3a1;
    --hl-ckw: #d3b3ff;
    --hl-num: #ffb38a;
    --hl-unit: #f5d06a;
    --hl-kw: #d3b3ff;
    --hl-id: #8ec8ff;
    --hl-part: #ffbe94;
    --hl-at: #b2cae2;
    --hl-mark: #ffb38a;
    --hl-slot: #d3b3ff;
  }
}

:root[data-theme="dark"] {
  --hl-pun: #b2cae2;
  --hl-com: #a8c8a0;
  --hl-node: #ffbe94;
  --hl-key: #f5d06a;
  --hl-str: #a6e3a1;
  --hl-cel: #d3b3ff;
  --hl-cnum: #ffb38a;
  --hl-cid: #8ec8ff;
  --hl-cfn: #ff9ec8;
  --hl-cop: #b2cae2;
  --hl-cstr: #a6e3a1;
  --hl-ckw: #d3b3ff;
  --hl-num: #ffb38a;
  --hl-unit: #f5d06a;
  --hl-kw: #d3b3ff;
  --hl-id: #8ec8ff;
  --hl-part: #ffbe94;
  --hl-at: #b2cae2;
  --hl-mark: #ffb38a;
  --hl-slot: #d3b3ff;
}

/* Paper is light: whatever the screen theme, a printout uses the light palette. */
@media print {
  :root:root:root {
    --bg: #ffffff;
    --surface: #f6f0e3;
    --surface-2: #fbf7ee;
    --ink: #22262a;
    --ink-soft: #4a4843;
    --ink-faint: #6e6a62;
    --accent-strong: #1f4e4c;
    --line: #d8ccb4;
    --line-strong: #bfb29a;
    --hl-pun: #5b5750;
    --hl-com: #566652;
    --hl-node: #1f4e4c;
    --hl-key: #7a3a10;
    --hl-str: #2a6a2c;
    --hl-cel: #6b3fa0;
    --hl-cnum: #9a3412;
    --hl-cid: #1d5a99;
    --hl-cfn: #99286a;
    --hl-cop: #5b5750;
    --hl-cstr: #2a6a2c;
    --hl-ckw: #6b3fa0;
    --hl-num: #9a3412;
    --hl-unit: #7e5c12;
    --hl-kw: #6b3fa0;
    --hl-id: #1d5a99;
    --hl-part: #1f4e4c;
    --hl-at: #5b5750;
    --hl-mark: #9a3412;
    --hl-slot: #6b3fa0;
  }
}

/* ---------- syntax colours ---------- */
.hl-pun { color: var(--hl-pun); }
.hl-com { color: var(--hl-com); font-style: italic; }
.hl-node { color: var(--hl-node); font-weight: 700; }
.hl-key { color: var(--hl-key); }
.hl-str { color: var(--hl-str); }
.hl-cel { color: var(--hl-cel); }
.hl-cnum { color: var(--hl-cnum); }
.hl-cid { color: var(--hl-cid); }
.hl-cfn { color: var(--hl-cfn); }
.hl-cop { color: var(--hl-cop); }
.hl-cstr { color: var(--hl-cstr); }
.hl-ckw { color: var(--hl-ckw); }
.hl-num { color: var(--hl-num); }
.hl-unit { color: var(--hl-unit); }
.hl-kw { color: var(--hl-kw); }
.hl-id { color: var(--hl-id); }
.hl-part { color: var(--hl-part); font-weight: 600; }
.hl-at { color: var(--hl-at); }
.hl-mark { color: var(--hl-mark); }
.hl-slot { color: var(--hl-slot); }

/* ---------- layout ---------- */
.lg-page {
  display: grid;
  grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
  gap: 2rem;
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  align-items: start;
}
.lg-page [hidden] { display: none !important; }
.lg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- sidebar ---------- */
.lg-side {
  position: sticky;
  top: 4.75rem;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  font-size: 0.9rem;
}
.lg-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}
.lg-results {
  list-style: none;
  margin: 0.4rem 0 0.8rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.lg-results li { margin: 0; }
.lg-results a {
  display: block;
  padding: 0.35rem 0.6rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.lg-results li:last-child a { border-bottom: 0; }
.lg-results a:hover, .lg-results a[aria-selected="true"] { background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: -2px; }
.lg-results code { font-weight: 700; }
.lg-results small { display: block; color: var(--ink-soft); }
.lg-toc-top { margin: 0.8rem 0 0.2rem; font-weight: 600; }
.lg-toc-group {
  margin: 1.1rem 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lg-toc ul, .lg-toc ol { list-style: none; margin: 0; padding: 0; }
.lg-toc li { margin: 0; }
.lg-toc a { display: block; padding: 0.2rem 0.5rem; border-radius: 6px; color: var(--ink); text-decoration: none; }
.lg-toc a:hover { background: var(--surface); }
.lg-toc a[aria-current="page"] { background: var(--surface); color: var(--accent-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.lg-outline { margin: 0.15rem 0 0.4rem 0.9rem !important; border-left: 1px solid var(--line-strong); }
.lg-outline a { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- document ---------- */
.lg-doc { min-width: 0; }
.lg-bar { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 1rem; font-size: 0.85rem; }
.lg-md { max-width: 52rem; line-height: 1.6; overflow-wrap: anywhere; }
.lg-md h1 { margin-top: 0; font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem); }
.lg-md h2 { margin-top: 2.2rem; font-size: 1.6rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
.lg-md h3 { margin-top: 1.6rem; font-size: 1.2rem; }
.lg-md h4 { margin-top: 1.2rem; font-size: 1.05rem; }
.lg-md h1, .lg-md h2, .lg-md h3, .lg-md h4 { scroll-margin-top: var(--kj-anchor-offset, 5rem); position: relative; }
.lg-anchor {
  margin-left: 0.4rem;
  text-decoration: none;
  color: var(--ink-faint);
  font-weight: 400;
  opacity: 0;
}
h1:hover .lg-anchor, h2:hover .lg-anchor, h3:hover .lg-anchor, h4:hover .lg-anchor, .lg-anchor:focus { opacity: 1; }
.lg-md :target { animation: lg-flash 1.6s ease-out; }
@keyframes lg-flash { from { background: var(--surface); } to { background: transparent; } }
.lg-md code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.lg-md li { margin: 0.2rem 0; }

.lg-code {
  position: relative;
  margin: 1rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.lg-code pre { margin: 0; padding: 0.85rem 1rem; overflow-x: auto; tab-size: 4; }
.lg-code code {
  display: block;
  padding: 0;
  background: none;
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
}
.lg-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.25rem;
  left: 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
}
.lg-code pre { padding-top: 1.35rem; }
.lg-copy {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.lg-copy:hover { border-color: var(--accent); }

.lg-scroll { overflow-x: auto; margin: 1rem 0; }
.lg-md table { border-collapse: collapse; font-size: 0.9rem; min-width: 100%; }
.lg-md th, .lg-md td { padding: 0.35rem 0.6rem; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: normal; }
.lg-md th { background: var(--surface); }
.lg-md td code { white-space: nowrap; }

/* ---------- narrow screens: the contents go above the page ---------- */
@media (max-width: 860px) {
  .lg-page { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .lg-side { position: static; max-height: 16rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; }
}

/* ---------- print: the article only, on white, code wrapped ---------- */
@media print {
  .kj-header, .kj-footer, .lg-side, .lg-bar, .lg-copy, .lg-anchor, .lg-code::before { display: none !important; }
  body { background: #fff; color: #000; }
  .lg-page { display: block; padding: 0; }
  .lg-md { max-width: none; font-size: 10.5pt; }
  .lg-md h2, .lg-md h3 { break-after: avoid; }
  .lg-code { break-inside: avoid; border-color: #999; }
  .lg-code pre { white-space: pre-wrap; overflow: visible; padding-top: 0.6rem; }
  .lg-code code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .lg-md a { color: inherit; text-decoration: underline; }
  .lg-scroll { overflow: visible; }
}