/* The documentation site's whole palette lives here as tokens, in three
   blocks — light, prefers-dark, explicit dark — the same discipline the app
   itself keeps (hcpe/static/app.css), and the *same values*: this site
   documents the editor, so it carries the editor's own plot-table palette
   rather than an invented one. Copy hcpe/static/app.css's tokens here
   verbatim when the app's palette changes; do not reinvent a colour.

   --accent is the "contact" teal the app reserves for links and anything
   interactive. --mark is the amber the track leader carries — identity
   only (the header mark, and nothing else) — which is why this stylesheet
   never uses it for a warning or a button.

   A hard-coded hex outside this block is invisible in the theme it was not
   written for. If you need a new colour, add a token to all three blocks. */
:root {
  color-scheme: light;
  --bg: #E8ECEF;
  --panel: #FFFFFF;
  --sunken: #F2F5F7;
  --fg: #0B1B26;
  --muted: #55707E;
  --border: #C7D3D9;
  --row: #E2EAEE;
  --accent: #0E7C93;
  --link: var(--accent);
  --mark: #C07708;
  --warn-bg: #FAEAD1;
  --warn-fg: #6B4A12;
  --code-bg: rgba(11, 27, 38, .07);
  --shadow: rgba(11, 27, 38, .22);
}
@media (prefers-color-scheme: dark) {
  /* :not() so an explicit "light" still wins on a dark desktop. */
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #071219;
    --panel: #0E1F2A;
    --sunken: #08161E;
    --fg: #E4EEF3;
    --muted: #8CA1AD;
    --border: #1D3542;
    --row: #142833;
    --accent: #2FC2DA;
    --link: var(--accent);
    --mark: #F5A524;
    --warn-bg: #4E3A17;
    --warn-fg: #FFE6C0;
    --code-bg: rgba(255, 255, 255, .07);
    --shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #071219;
  --panel: #0E1F2A;
  --sunken: #08161E;
  --fg: #E4EEF3;
  --muted: #8CA1AD;
  --border: #1D3542;
  --row: #142833;
  --accent: #2FC2DA;
  --link: var(--accent);
  --mark: #F5A524;
  --warn-bg: #4E3A17;
  --warn-fg: #FFE6C0;
  --code-bg: rgba(255, 255, 255, .07);
  --shadow: rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* Same family the app uses (hcpe/static/app.css); a reading surface can
     afford a bit more air between lines than a dense editor, so the
     line-height runs longer than the app's 1.5. */
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--link); }
a:hover { text-decoration: none; }
.muted { color: var(--muted); }

/* Header ------------------------------------------------------------- */
.site-head {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .8rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 650; color: var(--fg); text-decoration: none;
}
/* The mark inline, so it takes its colour from the page (the dome from
   currentColor, the leader from --mark) — see hcpe/templates/_mark.html for
   why this is inlined SVG rather than an <img>: a baked file cannot see a
   custom property and disappears in the theme it was not drawn for. */
.brand .mark { display: block; flex: none; width: 22px; height: 22px; }
.site-head nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .95em; }
.site-head nav a { color: var(--muted); text-decoration: none; }
.site-head nav a:hover { color: var(--fg); }
.site-head nav a.here { color: var(--fg); font-weight: 600; }

/* Body --------------------------------------------------------------- */
main { max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }
.crumbs { color: var(--muted); font-size: .9em; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: .2rem 0 .6rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .35rem; }
.lede { font-size: 1.1em; color: var(--muted); margin: 0 0 1.5rem; }

.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem 1.2rem;
  box-shadow: 0 1px 3px var(--shadow);
  margin: 0 0 1.2rem;
}

/* A card grid, for the landing page's sections. */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cards .panel { margin: 0; }
.cards h3 { margin-top: 0; }

/* Tables — the field reference is mostly these. Wide ones scroll in their
   own container rather than handing the page a horizontal scrollbar. */
.table-scroll { overflow-x: auto; margin: 0 0 1.2rem; }
table { border-collapse: collapse; width: 100%; font-size: .93em; }
th, td { text-align: left; padding: .4rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
/* Same token the app's own grid rows hover with (--row), not --sunken —
   --sunken reads as an inset surface (an input, a code block); a hovered
   row is a highlight, which is what --row means everywhere in the app. */
tbody tr:hover { background: var(--row); }
td.nowrap, th.nowrap { white-space: nowrap; }

code, .mono {
  font-family: ui-monospace, Consolas, "Cascadia Mono", monospace;
  font-size: .92em; background: var(--code-bg); padding: .08em .35em; border-radius: 4px;
}
pre { background: var(--code-bg); padding: .8rem 1rem; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; }

/* A limit callout: the five kinds of value limitation (plan §2). */
.limit { display: inline-block; font-size: .82em; padding: .05em .45em;
         border: 1px solid var(--border); border-radius: 999px; color: var(--muted);
         white-space: nowrap; margin: 0 .25rem .25rem 0; }
/* The one place amber (--mark) would look right is exactly the place it must
   not appear: --mark is identity-only in the app (the track leader), never a
   warning. Sentinels and overloads reuse the app's own warn tokens instead —
   the same ink /check and the read-only banner warn in. */
.limit.sentinel { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; }

.note {
  background: var(--warn-bg); color: var(--warn-fg);
  border-radius: 6px; padding: .7rem 1rem; margin: 0 0 1.2rem;
}
.note strong { color: inherit; }

/* Media -------------------------------------------------------------- */
figure { margin: 1.2rem 0; }
figure img, figure video {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 2px 8px var(--shadow);
}
figcaption { color: var(--muted); font-size: .9em; margin-top: .45rem; }
/* The product page's opening shot. Same frame as every other figure — it is
   a screenshot, not a different kind of object — with room around it, since
   it is the first thing under the lede and a first impression crowded
   against the paragraph above reads as an afterthought. */
.hero-shot { margin: 1.4rem 0 2rem; }
.hero-shot img { width: 100%; }

/* Steps in a guide. */
ol.steps { padding-left: 1.3rem; }
ol.steps > li { margin: 0 0 .9rem; }

/* Per-page field table of contents (annex pages) — a compact index of the
   rows below it, so a reader who did not arrive via search can still jump
   straight to a field instead of scrolling a 20-30 row table. */
.field-toc {
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1.2rem;
  font-size: .88em; line-height: 2;
}
.field-toc a { margin-right: .5rem; white-space: nowrap; }

/* Whole-page table of contents (the coded-values page: critique #5 — a
   short jump list over the standalone tables and each family, distinct
   from .field-toc's per-row index on the annex pages). Same box language,
   but its links are grouped under sub-headings rather than run together. */
.page-toc {
  background: var(--sunken); border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .9rem; margin: 0 0 1.5rem;
  font-size: .88em; line-height: 2;
}
.page-toc p { margin: .6rem 0 0; }
.page-toc p:first-child { margin-top: 0; }
.page-toc a { margin-right: .5rem; white-space: nowrap; }

/* A family of coded-value tables (PROPULSION, PLATFORM_TYPES,
   PLATFORM_CODES on the lookups page) sharing one heading over several
   member panels, and the "Standalone tables" run above them. */
.lookup-group { margin: 0 0 1.5rem; }
.lookup-group .panel > h3:first-child { margin-top: 0; }

/* Anchored field rows: give the browser's scroll-into-view a little
   headroom (this site has no sticky header, but a row flush against the
   very top edge still reads as "did the link even do anything?"), and
   flash the row itself on arrival so a copied field link or a search
   result visibly lands where it says it will. */
tbody tr[id] { scroll-margin-top: .75rem; }
tbody tr:target { background: var(--row); }

/* Search --------------------------------------------------------------- */
/* Hidden by the `hidden` attribute until assets/search.js reveals it, so a
   reader with JavaScript off never sees a dead input (site-wide: this is
   the one script the no-JavaScript stance makes room for). */
.search { position: relative; margin-left: auto; }
.search input[type="search"] {
  width: 15rem; max-width: 42vw;
  background: var(--sunken); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .4rem .6rem; font: inherit;
}
.search input[type="search"]:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.search-results {
  position: absolute; top: calc(100% + .35rem); right: 0;
  width: 23rem; max-width: 92vw; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px var(--shadow);
  padding: .3rem; z-index: 20;
}
/* The picker look the app's own record/id pickers use: a plain row that
   only differentiates on hover/keyboard-active, via --row — the same
   token a hovered grid row uses everywhere else on this site. */
.search-results .result {
  display: block; padding: .45rem .65rem; border-radius: 5px;
  text-decoration: none; color: var(--fg);
}
.search-results .result .title { display: block; font-weight: 600; }
.search-results .result .sub { display: block; color: var(--muted); font-size: .85em; }
.search-results .result:hover,
.search-results .result.active { background: var(--row); }
.search-results .search-empty,
.search-results .search-more {
  padding: .45rem .65rem; color: var(--muted); font-size: .85em;
}

/* Footer ------------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--border); margin-top: 2rem;
  padding: 1.2rem 1.5rem 2.5rem; color: var(--muted); font-size: .9em;
}
.site-foot p { max-width: 62rem; margin: 0 auto .4rem; }