/* =====================================================================
   PAPYRUS SITE — STYLESHEET
   ---------------------------------------------------------------------
   One file. Organized in banded sections:

     1. Tokens            — colors, spacing, fonts (edit here to retheme)
     2. Reset & base
     3. Layout            — header, nav column, main column, footer
     4. Typography
     5. Content blocks    — lists, steps, definitions, tables, callouts,
                            code, figures, placeholders, diagrams, cards
     6. Navigation & TOC
     7. Responsive
     8. Print

   The owner does not normally need to edit this file. All wording lives
   in content.json. If you want to change the accent color or the paper
   tone, edit the tokens in section 1 only.
   ===================================================================== */


/* ===== 1. Tokens ===================================================== */

:root {
  /* Paper and ink */
  --paper:        #fbfaf7;
  --paper-sunk:   #f4f2ec;
  --paper-raised: #ffffff;
  --ink:          #1c1c1a;
  --ink-muted:    #55534d;
  --ink-faint:    #7a776f;

  /* Single restrained accent: muted ink blue */
  --accent:       #2f4f77;
  --accent-weak:  #dde4ee;

  /* Rules and borders */
  --rule:         #ddd9d0;
  --rule-strong:  #c3beb2;

  /* Callout tints (kept very light) */
  --tint-note:    #f2f4f8;
  --tint-caution: #f8f4ec;
  --tint-status:  #f1f5f1;
  --rule-note:    #7d8fab;
  --rule-caution: #b08b4f;
  --rule-status:  #6d8a6d;

  /* Type stacks — system fonts only, no web fonts, no network */
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Measure and rhythm */
  --measure:     42rem;   /* ~70 characters of prose */
  --measure-wide: 54rem;  /* tables, figures, diagrams may break out */
  --gap:         1.25rem;
  --stack:       1.6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #16171a;
    --paper-sunk:   #1d1e22;
    --paper-raised: #202226;
    --ink:          #e6e4df;
    --ink-muted:    #b0aca4;
    --ink-faint:    #8d8981;

    --accent:       #9db9dd;
    --accent-weak:  #2a3542;

    --rule:         #33353a;
    --rule-strong:  #4a4d54;

    --tint-note:    #1e2229;
    --tint-caution: #24211c;
    --tint-status:  #1c211c;
    --rule-note:    #6d84a5;
    --rule-caution: #9c7f4c;
    --rule-status:  #6a8a6a;
  }
}


/* ===== 2. Reset & base ============================================== */

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1.62;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.06em;
  transition: color 120ms linear;
}
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

.noscript-note {
  max-width: var(--measure);
  margin: 2rem auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--accent);
  background: var(--paper-sunk);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}


/* ===== 3. Layout ==================================================== */

/* Work-in-progress strip — appears on every page, above the masthead. */
.wip {
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.wip__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
}
.wip__label {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 0.1rem 0.42rem;
}
.wip__text { margin: 0; }

.site-header {
  border-bottom: 1px solid var(--rule-strong);
}
.site-header__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.9rem 1.5rem 1.5rem;
}
.site-header__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-header__title a {
  color: inherit;
  text-decoration: none;
}
.site-header__title a:hover { color: var(--accent); }
.site-header__tagline {
  margin: 0.3rem 0 0;
  color: var(--ink-muted);
  font-size: 1rem;
}

.layout {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 1.5rem;
  padding: 2.2rem 0 2rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

main {
  padding: 2.2rem 0 4rem;
  min-width: 0;
}

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
}
.site-footer__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 3rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.site-footer__inner p { margin: 0.25rem 0; max-width: var(--measure-wide); }


/* ===== 4. Typography ================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  font-size: 1.95rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  max-width: var(--measure-wide);
}

.page-subtitle {
  margin: 0 0 2.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.1rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

h2 {
  font-size: 1.3rem;
  margin: 3rem 0 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure-wide);
  scroll-margin-top: 1.5rem;
}

h3 {
  font-size: 1.06rem;
  margin: 2.1rem 0 0.6rem;
  max-width: var(--measure-wide);
  scroll-margin-top: 1.5rem;
}

h4 {
  font-size: 0.95rem;
  margin: 1.6rem 0 0.5rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  scroll-margin-top: 1.5rem;
}

p {
  margin: 0 0 1.05rem;
  max-width: var(--measure);
}

strong { font-weight: 700; }
em { font-style: italic; }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.06em 0.3em;
  word-break: break-word;
}


/* ===== 5. Content blocks ============================================ */

/* --- Lists --- */
.content ul,
.content ol {
  max-width: var(--measure);
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}
.content li { margin: 0 0 0.45rem; }
.content li > ul,
.content li > ol { margin-top: 0.45rem; }

/* --- Steps (numbered, with bold titles) --- */
.steps {
  max-width: var(--measure);
  margin: 0 0 1.4rem;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 0.9rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.6rem;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.steps__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
}
.steps__title::after {
  content: " — ";
  font-weight: 400;
  color: var(--ink-faint);
}

/* --- Definition lists --- */
.defs {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}
.defs dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.93rem;
  margin-top: 1.05rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}
.defs dt:first-child { margin-top: 0; }
.defs dd {
  margin: 0.3rem 0 0;
  color: var(--ink-muted);
}

/* --- Tables --- */
.table-wrap {
  max-width: var(--measure-wide);
  margin: 0 0 1.7rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
}
caption {
  caption-side: top;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-muted);
  background: var(--paper-sunk);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}
th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-strong);
}
tbody tr:last-child td { border-bottom: none; }
td code { background: transparent; border: none; padding: 0; }

/* --- Callouts --- */
.callout {
  max-width: var(--measure);
  margin: 1.5rem 0;
  padding: 0.95rem 1.1rem;
  border-left: 3px solid var(--rule-note);
  background: var(--tint-note);
  font-size: 0.95rem;
}
.callout p { margin: 0 0 0.7rem; max-width: none; }
.callout p:last-child { margin-bottom: 0; }
.callout__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}
.callout--caution { border-left-color: var(--rule-caution); background: var(--tint-caution); }
.callout--status  { border-left-color: var(--rule-status);  background: var(--tint-status); }

/* --- Code blocks --- */
pre {
  max-width: var(--measure-wide);
  margin: 0 0 1.6rem;
  padding: 0.95rem 1.05rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.6;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
  white-space: pre;
}

/* --- Figures & placeholders --- */
.fig {
  max-width: var(--measure-wide);
  margin: 2rem 0;
}
.fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}
.media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.media-link:focus-visible img { outline: 2px solid var(--accent); outline-offset: 3px; }
.fig figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.fig__num {
  color: var(--ink);
  font-weight: 600;
}

.fig-placeholder {
  border: 1px dashed var(--rule-strong);
  padding: 2.4rem 1.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
}
.fig-placeholder__label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fig-placeholder__file {
  margin: 0;
  font-size: 0.85rem;
}
.fig-placeholder__file code {
  background: var(--paper-sunk);
  color: var(--ink);
}
.fig-placeholder__desc {
  margin: 0.3rem 0 0;
  max-width: 34rem;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* --- Images outside a full-width figure ---------------------------
   Four size variants, set by the renderer:
     .img--figure  full width of the figure column (a figure block)
     .img--block   fills whatever contains it (card, callout, cell)
     .img--thumb   small, capped width (the default in a table cell)
     .img--inline  line-height sized, for an icon inside a sentence
   ------------------------------------------------------------------ */

.img {
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}
.img--figure {
  display: block;
  width: 100%;
  height: auto;
}
/* Natural size, capped at the container: a small image is not blown up
   and blurred. Use this variant (size: "block") for anything narrower
   than the text column. */
.img--block {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0 0;
}
.img--thumb {
  display: block;
  width: 100%;
  max-width: 13rem;
  height: auto;
  margin: 0.4rem 0 0;
}
.img--inline {
  display: inline-block;
  height: 1.35em;
  width: auto;
  vertical-align: -0.28em;
  margin: 0 0.15em;
  border-color: var(--rule);
}

/* Video shares every .img--* size with images. It gets a dark backing so
   letterboxed clips look deliberate, and no zoom cursor: clicking a video
   works its own controls, and its controls carry a fullscreen button. */
video.img {
  background: #000;
  cursor: default;
}

/* Compact placeholder, for every image that is not a full-width figure. */
.img-placeholder {
  display: block;
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.6rem;
  border: 1px dashed var(--rule-strong);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-faint);
  text-align: center;
}
.img-placeholder--thumb { max-width: 13rem; }
.img-placeholder--inline {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0.05em 0.4em;
  vertical-align: baseline;
}
.img-placeholder__file {
  display: block;
  font-family: var(--font-mono);
  color: var(--ink-muted);
  word-break: break-all;
}
.img-placeholder__desc { display: block; margin-top: 0.2rem; }
.img-placeholder--inline .img-placeholder__desc { display: none; }

/* Figures nested inside a step, list item, definition, card or cell.
   Same figure, smaller vertical footprint so the host block stays
   readable while its picture is still a placeholder. */
.fig--nested,
.fig--gallery { margin: 0.7rem 0 0.3rem; max-width: none; }
.fig--cell { margin: 0; max-width: none; }

.fig--nested figcaption,
.fig--gallery figcaption { margin-top: 0.45rem; font-size: 0.78rem; }
.fig--cell figcaption { margin-top: 0.35rem; font-size: 0.75rem; }

.fig--nested .fig-placeholder,
.fig--gallery .fig-placeholder { min-height: 150px; padding: 1.4rem 1rem; }
.fig--cell .fig-placeholder { min-height: 0; padding: 0.9rem 0.7rem; }

/* --- Gallery: a grid of captioned images --- */
.gallery {
  display: grid;
  gap: 1.5rem 1.2rem;
  max-width: var(--measure-wide);
  margin: 1.8rem 0;
}
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery > .fig { margin-top: 0; }

/* --- Automatically collected screenshots and demonstrations --- */
.media-collection {
  max-width: var(--measure-wide);
  margin: 1.8rem 0;
}
.media-collection__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem 1rem;
  min-height: 2.4rem;
  margin-bottom: 1rem;
  font-family: var(--font-sans);
}
.media-filters { display: flex; gap: 0.35rem; }
.media-filters button {
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink-muted);
  font: 600 0.78rem/1.2 var(--font-sans);
  cursor: pointer;
}
.media-filters button:hover { border-color: var(--accent); color: var(--accent); }
.media-filters button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}
.media-filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-collection__status {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.76rem;
}
.media-collection__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.media-card {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}
.media-card[hidden] { display: none; }
.media-card .fig { margin: 0; max-width: none; }
.media-card .fig figcaption { margin-top: 0.65rem; }
.media-card__fullscreen {
  margin-top: 0.65rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--accent);
  font: 600 0.72rem/1.2 var(--font-sans);
  cursor: pointer;
}
.media-card__fullscreen:hover { border-color: var(--accent); }
.media-card__fullscreen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-card__source {
  margin: 0.55rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font: 0.72rem/1.45 var(--font-sans);
}
.media-collection__empty { color: var(--ink-muted); font-style: italic; }

/* --- Lightbox: click any image to see it full screen --------------
   Behavior lives in js/site.js. The scrim is deliberately dark in both
   themes: it is a viewer, and a picture reads best against neutral
   surroundings.

   Videos are deliberately excluded: a click belongs to the player, and
   the browser's own controls already offer fullscreen.
   ------------------------------------------------------------------ */

img.img { cursor: zoom-in; }
.has-lightbox { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.4rem 1.5rem 2rem;
  background: rgba(18, 18, 17, 0.94);
}
.lightbox[hidden] { display: none; }

.lightbox__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 82vh;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #fff;
  cursor: default;
}

.lightbox__caption {
  max-width: 44rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}
.lightbox__caption[hidden] { display: none; }

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms linear, border-color 120ms linear;
}
.lightbox__close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 42rem) {
  .media-collection__bar { align-items: flex-start; flex-direction: column; }
  .media-collection__grid { grid-template-columns: 1fr; }
}

/* --- Diagrams --- */
.diagram {
  max-width: var(--measure-wide);
  margin: 2rem 0;
}
.diagram__frame {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: 1.2rem;
  overflow-x: auto;
}
.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 30rem;
  color: var(--ink);
}
.diagram svg text {
  font-family: var(--font-sans);
  fill: currentColor;
}
.diagram svg .d-box {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.diagram svg .d-box-sunk { fill: var(--paper-sunk); stroke: var(--rule-strong); stroke-width: 1; }
.diagram svg .d-line { stroke: var(--rule-strong); stroke-width: 1; fill: none; }
.diagram svg .d-line-accent { stroke: var(--accent); stroke-width: 1.2; fill: none; }
.diagram svg .d-label { font-size: 12px; }
.diagram svg .d-label-sm { font-size: 10.5px; fill: var(--ink-muted); }
.diagram svg .d-label-hd { font-size: 12px; font-weight: 600; }
.diagram svg .d-arrow { fill: var(--rule-strong); }
.diagram__caption {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
}

/* --- Cards (restrained two-column definition grid) --- */
.cards {
  max-width: var(--measure-wide);
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 1.1rem;
}
.card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 0.35rem;
}
.card__body {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-muted);
  max-width: none;
}

/* --- Render errors (missing page key, etc.) --- */
.render-error {
  max-width: var(--measure);
  margin: 2rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule-caution);
  border-left: 3px solid var(--rule-caution);
  background: var(--tint-caution);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}

/* --- Compact page navigation, disclosures and status notes --- */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  max-width: var(--measure-wide);
  margin: 0 0 1.6rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 0.86rem;
}
.page-links span { color: var(--ink-faint); }
.content-details {
  max-width: var(--measure-wide);
  margin: 1.4rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
}
.content-details summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
}
.content-details p { margin: 0.85rem 0 0; }
.status-date,
.document-link {
  max-width: var(--measure);
  margin: 0 0 1.4rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--rule-status);
  background: var(--tint-status);
  font-family: var(--font-sans);
  font-size: 0.86rem;
}
.status-date span { color: var(--ink-muted); }


/* ===== 6. Navigation & TOC ========================================== */

.nav-heading {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
  font-weight: 600;
}

.nav-list {
  list-style: none;
  margin: 0 0 2.2rem;
  padding: 0;
  border-left: 1px solid var(--rule);
}
.nav-list li { margin: 0; }
.nav-list a {
  display: block;
  padding: 0.32rem 0 0.32rem 0.8rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-muted);
  text-decoration: none;
  line-height: 1.4;
}
.nav-list a:hover {
  color: var(--ink);
  border-left-color: var(--rule-strong);
}
.nav-list a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
  font-size: 0.85rem;
}
.toc-list a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.8rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-faint);
  text-decoration: none;
  line-height: 1.4;
}
.toc-list a:hover {
  color: var(--ink);
  border-left-color: var(--rule-strong);
}

/* The nav is wrapped in <details> so it can collapse on narrow screens.
   On wide screens the disclosure summary is hidden and it is always open. */
.nav-disclosure > summary {
  display: none;
}


/* ===== 7. Responsive ================================================ */

@media (max-width: 60rem) {
  html { font-size: 16px; }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .sidebar {
    position: static;
    padding: 1.2rem 0 0;
    border-bottom: 1px solid var(--rule);
  }

  main { padding-top: 1.6rem; }

  .nav-disclosure > summary {
    display: list-item;
    list-style-position: inside;
    cursor: pointer;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--rule-strong);
    background: var(--paper-sunk);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .nav-disclosure[open] > summary { margin-bottom: 1rem; }

  .nav-list { margin-bottom: 1.4rem; }
  .toc-list { margin-bottom: 0.4rem; }

  .cards { grid-template-columns: minmax(0, 1fr); }

  .gallery--3,
  .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .diagram svg { min-width: 26rem; }
}

@media (max-width: 30rem) {
  .site-header__inner,
  .wip__inner,
  .site-footer__inner,
  .layout { padding-left: 1rem; padding-right: 1rem; }

  .wip__inner { flex-direction: column; gap: 0.45rem; }
  .wip__label { align-self: flex-start; }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.18rem; }

  .fig-placeholder { padding: 1.6rem 1rem; }
  .diagram__frame { padding: 0.7rem; }

  .gallery--2,
  .gallery--3,
  .gallery--4 { grid-template-columns: minmax(0, 1fr); }
}


/* ===== 8. Print ===================================================== */

@media print {
  .sidebar, .wip, .skip-link, .lightbox { display: none; }
  body { background: #fff; color: #000; }
  .layout { display: block; max-width: none; }
  a { color: #000; }
  .fig, .table-wrap, pre, .diagram { break-inside: avoid; }
}