/* ==========================================================================
   Scryglass site — support articles: the two-column shell, the sidebar, and
   every body component the handoff specifies.
   Depends on tokens.css, site.css and components.css, in that order.

   One structural note that explains the margins below. In the artboards the
   article body is a flex column with `gap:0`, so margins between blocks add
   rather than collapse: a 16px paragraph followed by a 26px heading leaves
   42px. `.article__content` is a flex column here for the same reason — the
   handoff's per-element margins only produce the handoff's rhythm if nothing
   collapses.
   ========================================================================== */

.doc {
  /* Three values the handoff names in prose but not in its colour table.
     They belong in tokens.css the next time that file is opened. */
  --code-text: #B9B4C6;   /* code-block text */
  --ui-bg: #161320;       /* inline UI reference ground */
  --ui-border: #241F30;   /* inline UI reference outline */

  display: grid;
  grid-template-columns: 270px 1fr;
}

/* --- Sidebar ---------------------------------------------------------------
   Fills the row, so its recessed ground runs the height of the article.     */

.doc-nav {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 36px 28px 48px var(--page-gutter);
  background: var(--bg-recessed);
  border-right: 1px solid var(--hairline);
}

.doc-nav__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-nav__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doc-nav__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.doc-nav__link.is-current {
  color: var(--text-primary);
}

/* --- Search affordance -----------------------------------------------------
   The field and its Pagefind results panel are `.doc-search` and
   `.doc-results` in components.css: the support index carries the same
   component one step larger, so it is shared rather than owned here. All this
   file has to say about it is where it sits in the sidebar grid, which only
   arises below 900 — see the responsive block near the foot.               */

/* --- Body column ----------------------------------------------------------- */

.doc__body {
  display: flex;
  flex-direction: column;
  /* content-box, deliberately, as on .page-card: the handoff's 820px is the
     measure of the prose, not of the padded column. Under the global
     border-box the gutters would eat 88px of it and every line would break
     early against the design. */
  box-sizing: content-box;
  max-width: 820px;
  padding: 36px var(--page-gutter) 56px;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}

.article__title {
  margin: 18px 0 14px;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--text-primary);
}

.article__standfirst {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.article__content {
  display: flex;
  flex-direction: column;
}

/* --- Prose ----------------------------------------------------------------
   `em` is set upright and bright throughout: the articles use it for labels
   the app itself shows — "I have a license key" — never for stress.        */

.article__content h2 {
  margin: 26px 0 12px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
}

.article__content h3 {
  margin: 6px 0 9px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.article__content p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}

.article__standfirst em,
.article__content em {
  font-style: normal;
  color: var(--text-primary);
}

.article__content strong {
  font-weight: 700;
  color: var(--text-primary);
}

.article__content a {
  color: var(--accent-cyan);
}

.article__content code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
}

.article__content pre {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--bg-well);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.article__content pre code {
  font-size: 13px;
  line-height: 1.6;
  color: var(--code-text);
  white-space: pre;
}

.ui {
  padding: 1px 6px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
}

/* --- Numbered steps -------------------------------------------------------- */

.steps {
  display: flex;
  flex-direction: column;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--hairline);
}

.steps__row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}

.steps__n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-pink);
}

.steps__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.steps__body > * {
  margin: 0;
}

.steps__body p {
  line-height: 1.65;
}

/* --- Reference table -------------------------------------------------------
   One rule above every row and one under the last, so the table reads as a
   closed block whether or not it carries column headers.                    */

.reftable {
  --reftable-key: 220px;

  display: flex;
  flex-direction: column;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--hairline);
}

.reftable--k110 { --reftable-key: 110px; }
.reftable--k180 { --reftable-key: 180px; }
.reftable--k240 { --reftable-key: 240px; }

.reftable__head {
  display: grid;
  grid-template-columns: var(--reftable-key) 1fr;
  gap: 20px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-faint);
}

.reftable__row {
  display: grid;
  grid-template-columns: var(--reftable-key) 1fr;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

.reftable__head + .reftable__row {
  border-top: 0;
}

.reftable__key {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
}

.reftable__val {
  color: var(--text-muted);
}

.reftable__val a {
  color: var(--accent-cyan);
}

/* Per-OS file paths: the key names the platform, the value is a path.       */

.reftable--path .reftable__row {
  align-items: baseline;
}

.reftable--path .reftable__key {
  color: var(--accent-pink);
}

.reftable--path .reftable__val {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-all;
}

/* --- Callouts -------------------------------------------------------------- */

.callout {
  display: flex;
  gap: 14px;
  margin: 0 0 26px;
  padding: 20px 22px;
}

.callout--neutral {
  border-left: 2px solid var(--accent-cyan);
  background: var(--callout-neutral-bg);
}

.callout--warning {
  border-left: 2px solid var(--accent-pink);
  background: var(--callout-warn-bg);
}

.callout--panel {
  border: 1px solid var(--hairline);
  background: var(--bg-panel);
}

.callout__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  white-space: nowrap;
}

.callout--neutral .callout__label { color: var(--accent-cyan); }
.callout--warning .callout__label { color: var(--accent-pink); }

.callout__body {
  flex: 1;
  min-width: 0;
}

.callout__body > * {
  margin: 0;
}

.callout__body > * + * {
  margin-top: 14px;
}

.callout p {
  font-size: 15px;
  line-height: 1.65;
}

.callout code {
  font-size: 13px;
}

.callout--neutral .callout__body { color: var(--callout-neutral-text); }
.callout--warning .callout__body { color: var(--callout-warn-text); }
.callout--panel .callout__body { color: var(--text-muted); }

/* --- Figures --------------------------------------------------------------- */

.fig {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 26px;
}

.fig__mount {
  display: flex;
  background: var(--bg-recessed);
  border: 1px solid var(--border);
  overflow: hidden;
}

.fig__mount img {
  width: 100%;
  height: auto;
}

.fig__cap {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

.fig__cap em {
  font-style: normal;
  color: var(--text-muted);
}

/* --- Related cards --------------------------------------------------------- */

.related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 6px;
}

.related__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

/* Underline the title rather than all three lines of the card. */
.related__card:hover {
  text-decoration: none;
}

.related__card:hover .related__title {
  text-decoration: underline;
}

.related__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-faint);
}

.related__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.related__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* --- Contact strip ---------------------------------------------------------
   Closes every article.                                                     */

.contact-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding: 20px 22px;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
}

.contact-strip__copy {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.contact-strip__btn {
  padding: 12px 18px;
  white-space: nowrap;
}

/* ==========================================================================
   WP9 — responsive
   See the breakpoint table at the foot of site.css. Nothing here matches at
   1240px or wider.
   ========================================================================== */

/* The upper bound is the artboard's 40px, and the middle term still resolves
   to it at 1239px, so there is no step across the breakpoint. */
@media (max-width: 1239px) {
  .article__title { font-size: clamp(28px, 3.24vw, 40px); }
}

/* --- The sidebar moves above the body --------------------------------------
   The sidebar is first in the DOM, so folding the grid to one column puts it
   where it belongs without touching the markup. It does not stay a column,
   though: three stacked groups of links would push the article most of a
   screen down. Laying .doc-nav out as its own auto-fitting grid puts the
   three groups side by side and gives the search field the full width above
   them, which is a block rather than a rail — about six lines deep.

   The results panel widens with it, but that is the component's own business
   and lives with the rest of it in components.css.                         */

@media (max-width: 900px) {
  .doc { grid-template-columns: 1fr; }

  .doc-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: start;
    gap: 22px 28px;
    padding: 26px var(--page-gutter) 30px;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  /* Placement inside .doc-nav's grid — the field's, not the component's. */
  .doc-search { grid-column: 1 / -1; }

  .doc__body { padding: 30px var(--page-gutter) 48px; }
}

/* --- Body components -------------------------------------------------------
   The reference table's key column is a fixed pixel width chosen per article
   — 110, 180, 220 or 240. Below 700 it becomes a fraction with a floor
   instead, so the widest of them cannot take two thirds of a phone. The two
   columns stay two columns: the head labels the pair, and stacking the rows
   would leave that head describing nothing.                                */

@media (max-width: 700px) {
  .reftable { --reftable-key: minmax(80px, .8fr); }

  .reftable__head,
  .reftable__row { gap: 14px; }

  .reftable__key { overflow-wrap: anywhere; }
}

@media (max-width: 620px) {
  .related { grid-template-columns: 1fr; }

  .contact-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .article__standfirst { font-size: 17px; }

  .article__content h2 { font-size: 22px; }
}

@media (max-width: 520px) {
  /* The label is a nowrap mono word — "NOTE", "IF THIS HAPPENS" — and beside
     a 15px paragraph in 260px there is nothing left for the paragraph. */
  .callout {
    flex-direction: column;
    gap: 10px;
    padding: 18px;
  }

  .steps__row { gap: 12px; }

  .related__card,
  .contact-strip { padding: 18px; }
}