/* Fossil — A Guided Tour
   Shared stylesheet. The visual identity: a city map drawn on warm paper.
   Slate ink, a depth-gauge of strata, one amber district that matters most. */

:root {
  /* paper & ink */
  --paper:        #faf8f3;
  --paper-edge:   #f0ece1;
  --card:         #ffffff;
  --ink:          #26303f;
  --ink-soft:     #51606f;
  --ink-faint:    #8a95a3;
  --rule:         #e3ddd0;
  --rule-strong:  #cfc8b8;

  /* the depth gauge — a blue-slate ramp, deep at bedrock, lighter at the
     skyline. district 4 deliberately breaks the ramp; see --d4. */
  --d1: #2f3e57;   /* Bedrock         */
  --d2: #3a4d68;   /* The Vault       */
  --d3: #465a79;   /* The Chronicle   */
  --d4: #c87f1e;   /* The Engine Room — amber: embedding-critical */
  --d5: #576f91;   /* The Exchange    */
  --d6: #6a82a3;   /* The Workshop    */
  --d7: #8090ad;   /* Upper Districts */

  --amber:        #c87f1e;
  --amber-soft:   #f5e4c8;

  /* type */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* scale */
  --measure: 60rem;
  --gap:     1.5rem;
  --radius:  7px;
  --shadow:  0 1px 2px rgba(38,48,63,.06), 0 6px 18px rgba(38,48,63,.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(255,255,255,.7), transparent 55%);
  line-height: 1.6;
  font-size: 17px;
  padding: 3rem 1.25rem 5rem;
}

.page { max-width: var(--measure); margin: 0 auto; }

a { color: #1f5fa8; }

code, .mono { font-family: var(--mono); font-size: .86em; }

/* ── header ─────────────────────────────────────────────────────────── */

.tour-header { text-align: center; margin-bottom: 2.75rem; }

.kicker {
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}

.tour-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.intro {
  max-width: 44rem;
  margin: 1.3rem auto 0;
  color: var(--ink-soft);
  text-align: left;
}

.intro + .intro { margin-top: .8rem; }

/* ── the cross-section ──────────────────────────────────────────────── */

.crosssection { margin: 2.5rem 0 3.25rem; }

.crosssection__edge {
  text-align: center;
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: .35rem 0;
}

.crosssection__edge--ground {
  border-top: 3px solid var(--rule-strong);
  margin-top: -1px;
  padding-top: .55rem;
}

/* a stratum is a <details> element — native, keyboard-accessible, no JS */
.stratum {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left-width: 0;
  position: relative;
}
.stratum + .stratum { margin-top: 3px; }
.stratum:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.stratum:last-of-type  { border-radius: 0 0 var(--radius) var(--radius); }

/* the depth-gauge stripe down the left edge */
.stratum::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--stripe, var(--ink-faint));
}

.stratum--1 { --stripe: var(--d1); }
.stratum--2 { --stripe: var(--d2); }
.stratum--3 { --stripe: var(--d3); }
.stratum--4 { --stripe: var(--d4); }
.stratum--5 { --stripe: var(--d5); }
.stratum--6 { --stripe: var(--d6); }
.stratum--7 { --stripe: var(--d7); }

/* summary — the always-visible band */
.stratum__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.stratum__summary::-webkit-details-marker { display: none; }
.stratum__summary:hover { background: var(--paper-edge); }
.stratum__summary:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

.stratum__num {
  flex: none;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  background: var(--stripe);
  color: #fff;
  font-family: var(--serif);
  font-size: 1.2rem;
  border-radius: 5px;
}

.stratum__head { flex: 1 1 auto; min-width: 0; }

.stratum__name {
  display: block;
  font-weight: 700;
  font-size: 1.13rem;
  letter-spacing: .01em;
}

.stratum__tagline {
  display: block;
  color: var(--ink-soft);
  font-size: .94rem;
}

.stratum__tags {
  flex: none;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.stratum__chevron {
  flex: none;
  width: .62rem; height: .62rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-left: .15rem;
}
.stratum[open] .stratum__chevron { transform: rotate(-135deg); }

/* badges & pills */
.badge, .pill {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .26rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge--embedding {
  background: var(--amber-soft);
  color: #8a5410;
  border: 1px solid #e6c98c;
}
.pill {
  background: var(--paper-edge);
  color: var(--ink-faint);
  border: 1px solid var(--rule);
}
.pill--next {
  background: #e7f0e7;
  color: #3a6b3f;
  border-color: #bcd6bc;
}

/* expanded body */
.stratum__body {
  padding: .35rem 1.5rem 1.6rem 1.5rem;
  border-top: 1px dashed var(--rule);
  margin: 0 0 0 0;
}
.stratum__body .field { margin-top: 1.15rem; }
.stratum__body h3 {
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .3rem;
}
.stratum__body p { color: var(--ink-soft); }

.files {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .15rem;
}
.files li {
  font-family: var(--mono);
  font-size: .82rem;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .2rem .5rem;
  color: var(--ink-soft);
}

.stratum__enter {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.25rem;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: #fff;
  background: var(--stripe, var(--d1));
  padding: .5rem .95rem;
  border-radius: 6px;
}
.stratum__enter:hover { filter: brightness(1.12); }

/* ── legend & walkthrough ───────────────────────────────────────────── */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-top: 1.5rem;
  box-shadow: var(--shadow);
}

.panel h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: .7rem;
}

.panel p { color: var(--ink-soft); }
.panel p + p { margin-top: .6rem; }

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem 1.4rem;
  margin-top: .4rem;
}
.legend-item { display: flex; gap: .7rem; align-items: flex-start; }
.legend-item .swatch {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 4px;
  margin-top: .1rem;
}
.legend-item .swatch--amber { background: var(--amber); }
.legend-item .swatch--ramp {
  background: linear-gradient(var(--d1), var(--d7));
}
.legend-item .label { font-size: .92rem; }
.legend-item .label strong { color: var(--ink); }
.legend-item .label span { color: var(--ink-soft); display: block; }

.route {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .55rem .7rem;
  margin-top: .8rem;
  line-height: 1.9;
}

/* ── footer ─────────────────────────────────────────────────────────── */

.tour-footer {
  margin-top: 3rem;
  text-align: center;
  font-size: .82rem;
  color: var(--ink-faint);
}
.tour-footer code { color: var(--ink-soft); }

/* ── motion / responsive ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .stratum__chevron { transition: none; }
}

@media (max-width: 34rem) {
  body { padding-top: 2rem; }
  .stratum__summary { flex-wrap: wrap; }
  .stratum__tags { width: 100%; padding-left: 3.3rem; }
}

/* ════════════════════════════════════════════════════════════════════
   DISTRICT PAGES — shared components for a single street of the tour
   ════════════════════════════════════════════════════════════════════ */

.backlink {
  display: inline-block;
  font-size: .85rem;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.backlink:hover { color: var(--ink); }
.backlink::before { content: "\2190\00a0"; }

/* ── district header ────────────────────────────────────────────────── */

.district-header {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.5rem;
  border-bottom: 3px solid var(--district, var(--d1));
  margin-bottom: 2.25rem;
}

.district-header__num {
  flex: none;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  background: var(--district, var(--d1));
  color: #fff;
  font-family: var(--serif);
  font-size: 1.9rem;
  border-radius: 8px;
}

.district-header__kicker {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.district-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.12;
  margin: .15rem 0 .35rem;
}

.district-header__tagline { color: var(--ink-soft); font-size: 1.05rem; }

/* ── streets (content sections) ─────────────────────────────────────── */

.street { margin: 2.75rem 0; }

.street > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.2;
  margin-bottom: .9rem;
}
.street > h2 .street__no {
  color: var(--district, var(--d1));
  font-size: 1.1rem;
  margin-right: .4rem;
  vertical-align: .12em;
}

.street p { margin-bottom: .85rem; }
.street p:last-child { margin-bottom: 0; }

.lede { font-size: 1.12rem; color: var(--ink-soft); }

.street h3.subhead {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5rem 0 .5rem;
}

/* inline code already styled; emphasize key terms */
.term-key { font-weight: 700; color: var(--ink); }

/* ── C aside — a recurring callout that explains a C concept ────────── */

.cnote {
  background: #f3f5f8;
  border: 1px solid #d9e0ea;
  border-left: 5px solid var(--d3);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.cnote__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--d3);
  margin-bottom: .45rem;
}
.cnote__label::before {
  content: "C";
  font-family: var(--mono);
  background: var(--d3);
  color: #fff;
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: 4px;
  letter-spacing: 0;
}
.cnote p { font-size: .95rem; color: var(--ink-soft); }
.cnote p:last-child { margin-bottom: 0; }

/* ── simulated terminal ─────────────────────────────────────────────── */

.terminal {
  background: #1b2530;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin: 1.3rem 0;
}
.terminal__bar {
  display: flex; align-items: center; gap: .45rem;
  background: #2b3743;
  padding: .55rem .8rem;
}
.terminal__dot {
  width: .72rem; height: .72rem; border-radius: 50%;
  background: #5b6772;
}
.terminal__dot:nth-child(1) { background: #e0635b; }
.terminal__dot:nth-child(2) { background: #e0b04a; }
.terminal__dot:nth-child(3) { background: #5fb86a; }
.terminal__title {
  margin-left: .5rem;
  font-size: .78rem;
  color: #93a1ad;
  font-family: var(--mono);
}
.terminal__body {
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.65;
  color: #d6e0e8;
  padding: .9rem 1rem;
  min-height: 7rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal__body .t-prompt  { color: #6fb87f; }
.terminal__body .t-cmd     { color: #f0f4f7; }
.terminal__body .t-sqlite  { color: #79b0d8; }
.terminal__body .t-out     { color: #97a6b3; }
.terminal__body .t-note    { color: #d8a657; font-style: italic; }
.terminal__body .t-caret {
  display: inline-block;
  width: .55rem; height: 1rem;
  background: #6fb87f;
  vertical-align: -.16rem;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.terminal__controls {
  display: flex; gap: .6rem; align-items: center;
  background: #222e39;
  padding: .6rem .8rem;
}

.btn {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  border: 0;
  border-radius: 5px;
  padding: .42rem .85rem;
  cursor: pointer;
}
.btn--primary { background: #4f8a5e; color: #fff; }
.btn--primary:hover { background: #5b9a6a; }
.btn--ghost { background: transparent; color: #93a1ad; }
.btn--ghost:hover { color: #d6e0e8; }
.btn:disabled { opacity: .4; cursor: default; }
.terminal__step {
  margin-left: auto;
  font-size: .74rem;
  color: #6c7a87;
  font-family: var(--mono);
}

/* ── the three databases ────────────────────────────────────────────── */

.dbset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .9rem;
  margin: 1.3rem 0;
}
.dbcard {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent, var(--d1));
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.dbcard h4 {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--ink);
}
.dbcard .dbpath {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--accent, var(--d1));
  margin: .2rem 0 .6rem;
  word-break: break-all;
}
.dbcard dl { font-size: .86rem; }
.dbcard dt {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .55rem;
}
.dbcard dd { color: var(--ink-soft); }

/* ── interactive schema explorer ────────────────────────────────────── */

.schema-explorer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.3rem 0;
}
@media (min-width: 46rem) {
  .schema-explorer { grid-template-columns: 1.05fr .95fr; }
}

.schema-code {
  background: #1b2530;
  color: #d6e0e8;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.85;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  margin: 0;
}
.schema-code .kw { color: #79b0d8; }
.schema-code .col {
  cursor: pointer;
  border-bottom: 1px dashed #5e7080;
  transition: background .12s ease;
  padding: 0 .1rem;
}
.schema-code .col:hover { background: #33424f; }
.schema-code .col.is-active {
  background: var(--amber);
  color: #1b2530;
  border-bottom-color: transparent;
  border-radius: 3px;
}

.schema-note {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
}
.schema-note__col {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--amber);
  font-size: .95rem;
}
.schema-note__hint {
  font-size: .82rem;
  color: var(--ink-faint);
  margin-bottom: .5rem;
}
.schema-note p { font-size: .92rem; color: var(--ink-soft); }

/* ── rid / uuid duality ─────────────────────────────────────────────── */

.duality {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin: 1.3rem 0;
}
@media (min-width: 40rem) {
  .duality { grid-template-columns: 1fr 1fr; }
}
.duality__side {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  background: var(--card);
}
.duality__side h4 {
  font-family: var(--mono);
  font-size: 1.05rem;
  margin-bottom: .1rem;
}
.duality__side--rid  { border-top: 4px solid var(--d6); }
.duality__side--rid h4 { color: var(--d6); }
.duality__side--uuid { border-top: 4px solid var(--d4); }
.duality__side--uuid h4 { color: var(--d4); }
.duality__tag {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.duality__side ul { margin: .6rem 0 0 1.1rem; }
.duality__side li { font-size: .9rem; color: var(--ink-soft); margin-bottom: .3rem; }

/* ── table map (the grouped tables) ─────────────────────────────────── */

.tablemap { margin: 1.3rem 0; }
.tgroup {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  background: var(--card);
}
.tgroup + .tgroup { margin-top: .6rem; }
.tgroup__head {
  display: flex; align-items: baseline; gap: .6rem;
  flex-wrap: wrap;
}
.tgroup__name { font-weight: 700; }
.tgroup__where {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.tgroup__desc { font-size: .9rem; color: var(--ink-soft); margin: .2rem 0 .5rem; }
.tchips { display: flex; flex-wrap: wrap; gap: .35rem; }
.tchip {
  font-family: var(--mono);
  font-size: .76rem;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .15rem .45rem;
  color: var(--ink-soft);
}
.tchip--source {
  background: #ecf3ec;
  border-color: #c4ddc4;
  color: #3a6b3f;
}

/* ── recap & next street ────────────────────────────────────────────── */

.recap {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--district, var(--d1));
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin: 2.5rem 0 1.5rem;
}
.recap h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: .6rem;
}
.recap ul { margin-left: 1.1rem; }
.recap li { margin-bottom: .4rem; color: var(--ink-soft); }
.recap li strong { color: var(--ink); }

.next-street {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  text-decoration: none;
  color: inherit;
}
.next-street:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }
.next-street__label {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.next-street__name {
  font-family: var(--serif);
  font-size: 1.35rem;
}
.next-street__arrow { font-size: 1.6rem; color: var(--ink-faint); }
.next-street--soon { opacity: .6; }

@media (max-width: 34rem) {
  .district-header { flex-wrap: wrap; }
}

/* ── blueprint panels — inline annotated source excerpts ────────────────
   In the city metaphor, source code is a building's blueprint: unfold one
   in place, study it, fold it away, keep walking. A <details> element. */

.blueprint {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #1b2530;
  margin: 1.4rem 0;
  overflow: hidden;
}
/* widen past the text column when unfolded, so code has room to breathe */
.blueprint[open] { margin-inline: calc(-1 * clamp(0rem, 2.5vw, 2rem)); }

.blueprint__summary {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .9rem;
  cursor: pointer;
  list-style: none;
  background: #243140;
}
.blueprint__summary::-webkit-details-marker { display: none; }
.blueprint__summary:hover { background: #2a3a4b; }
.blueprint__summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.blueprint__icon {
  flex: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .78rem;
  color: #1b2530;
  background: var(--amber);
  border-radius: 4px;
  padding: .14rem .4rem;
}
.blueprint__label { flex: 1 1 auto; min-width: 0; }
.blueprint__title {
  display: block;
  color: #eef2f5;
  font-size: .92rem;
  font-weight: 600;
}
.blueprint__cite {
  display: block;
  font-family: var(--mono);
  font-size: .73rem;
  color: #8b9aa6;
}
.blueprint__chevron {
  flex: none;
  width: .55rem; height: .55rem;
  border-right: 2px solid #8b9aa6;
  border-bottom: 2px solid #8b9aa6;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.blueprint[open] .blueprint__chevron { transform: rotate(-135deg); }

.blueprint__code {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.7;
  padding: .7rem 0;
  overflow-x: auto;
}

.cline {
  display: flex;
  gap: .9rem;
  padding: 0 1rem;
  width: max-content;
  min-width: 100%;
}
.cline .lno {
  flex: none;
  width: 2.2rem;
  text-align: right;
  color: #4f6170;
  user-select: none;
}
.cline .csrc { color: #d6e0e8; white-space: pre; }
.ccmt { color: #6f8b7d; }            /* Fossil's own comments — real source */

.ctok {                              /* a clickable C-syntax term */
  color: #e4b765;
  border-bottom: 1px dashed #7d6a3f;
  cursor: pointer;
}
.ctok:hover { background: #3a4350; }
.ctok.is-active {
  background: var(--amber);
  color: #1b2530;
  border-bottom-color: transparent;
  border-radius: 3px;
}

/* a tour-added explanation — deliberately NOT styled like source code,
   so it can never be mistaken for part of the real file */
.cnote-row {
  display: flex;
  gap: .55rem;
  margin: .3rem 1rem;
  padding: .45rem .7rem;
  background: #243845;
  border-left: 3px solid var(--amber);
  border-radius: 3px;
}
.cnote-row__mark { flex: none; color: var(--amber); font-weight: 700; }
.cnote-row__text {
  font-family: var(--sans);
  font-size: .82rem;
  font-style: italic;
  color: #b9c6cf;
}
.cnote-row__text code {
  font-style: normal;
  background: #2f3e4b;
  padding: 0 .25rem;
  border-radius: 3px;
}

.blueprint__explain {
  border-top: 1px solid #33424f;
  background: #222e39;
  padding: .9rem 1.1rem;
}
.blueprint__explain-hint { font-size: .8rem; color: #7d8b97; margin: 0; }
.blueprint__explain-hint code,
.blueprint__explain code {
  background: #2f3e4b;
  color: #e4b765;
  padding: 0 .25rem;
  border-radius: 3px;
}
.blueprint__explain-title {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--amber);
  font-size: .88rem;
  margin-bottom: .3rem;
}
.blueprint__explain p:last-child {
  font-size: .88rem;
  color: #c4cfd8;
  margin: 0;
}

/* ── big stat — a headline figure (District 2 storage numbers) ───────── */

.bigstat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem 2rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow);
}
.bigstat__fig { text-align: center; }
.bigstat__num {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1;
  color: var(--d2);
}
.bigstat__lbl {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-faint);
  margin-top: .35rem;
}
.bigstat__arrow { font-size: 1.7rem; color: var(--ink-faint); }
.bigstat__ratio {
  text-align: center;
  border-left: 1px solid var(--rule);
  padding-left: 2rem;
}
.bigstat__ratio .bigstat__num { color: var(--amber); }
@media (max-width: 32rem) {
  .bigstat__ratio { border-left: 0; padding-left: 0; }
}

/* ── delta demo — a worked copy/insert example (District 2) ──────────── */

.delta-demo {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.2rem 1.3rem;
  margin: 1.5rem 0;
}
.delta-row { margin-bottom: 1rem; }
.delta-row:last-child { margin-bottom: 0; }
.delta-row__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-faint);
  margin-bottom: .35rem;
}
.delta-str {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: .02em;
  padding: .55rem .6rem;
  background: var(--paper-edge);
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre;
}
.dseg { padding: .15rem 0; border-radius: 3px; }
.dseg--copy   { background: #d4e6f0; box-shadow: 0 0 0 1px #b3d0e0 inset; }
.dseg--insert { background: var(--amber-soft); box-shadow: 0 0 0 1px #e6c98c inset; }
.dseg.is-hot  { box-shadow: 0 0 0 2px var(--d2); }

.delta-ops {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.dop {
  font-family: var(--mono);
  font-size: .83rem;
  text-align: left;
  cursor: pointer;
  padding: .45rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper-edge);
  color: var(--ink);
}
.dop:hover { border-color: var(--rule-strong); }
.dop--copy   { border-left: 4px solid #5b8aa8; }
.dop--insert { border-left: 4px solid var(--amber); }
.dop.is-hot { background: #fff; box-shadow: var(--shadow); }
.dop__kind { font-weight: 700; }
.dop__kind--copy   { color: #3d6f8c; }
.dop__kind--insert { color: #9a6512; }
.delta-demo__hint {
  font-size: .82rem;
  color: var(--ink-faint);
  margin-top: .3rem;
}