/* Page-local layout for the skill-scanner Space. Tokens and components come from assets/css. */
.chapter--hero { border-top: 0; }
.chapter--hero .chapter__title {
  font-size: var(--fs-h1-mobile);
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
@media (min-width: 640px) {
  .chapter--hero .chapter__title { font-size: var(--fs-h1); }
}
.chapter--hero .lede { margin-top: var(--sp-4); }

/* hover readout under the hero plot */
.readout {
  min-height: 1.5em;
  margin: var(--sp-2) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

/* small multiples: one panel per arm x corpus */
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-5) var(--sp-5);
}
.sm-panel { min-width: 0; }
.sm-panel__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
}

.chapter > .subhead,
.prose > .subhead {
  margin-top: var(--sp-7);
  font-size: var(--fs-h3);
}
.chapter > [data-settings],
.chapter > [data-usecases] { max-width: var(--content-max); }

.misread { padding-left: 1.4em; }
.misread > li + li { margin-top: var(--sp-2); }

.measured .table-scroll { margin-top: var(--sp-3); }
.measured > div > p,
.measured > div > ul { max-width: var(--measure); }
.measured ul { padding-left: 1.2em; }
.measured li + li { margin-top: var(--sp-2); }
.variant-list { list-style: none; padding: 0; }
.variant-list .badge { margin-right: var(--sp-2); }

.code-cell { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 13px; overflow-wrap: anywhere; }

.site-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-small);
  max-width: var(--measure);
}
.site-footer p + p { margin-top: var(--sp-3); }
.site-footer .badge { margin-right: var(--sp-2); }

/* appendix */
.appendix-section { padding: var(--sp-8) 0; border-top: 1px solid var(--line); }
.appendix-section > * + * { margin-top: var(--sp-4); }
.appendix-section > p, .appendix-section > ul, .appendix-section > ol, .appendix-section > dl { max-width: var(--measure); }
.glossary-list dt { font-weight: 600; margin-top: var(--sp-4); }
.glossary-list dd { margin: var(--sp-1) 0 0; color: var(--ink-2); }
.cmd-list { padding-left: 1.4em; }
.cmd-list > li + li { margin-top: var(--sp-4); }
.cmd-list pre {
  margin: var(--sp-2) 0;
  padding: var(--sp-3);
  overflow-x: auto;
  border-radius: 6px;
  background: var(--raised);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Revision 1: the question under each chapter title */
.chapter__question {
  max-width: 72ch;
  margin: var(--sp-3) 0 8px;
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: 18px;
  font-style: normal;
  line-height: 1.45;
}
.chapter__question + .takeaway,
.chapter__question + .lede { margin-top: 0; }

/* Revision 1: "How to read it" under each figure subtitle, and the labelled caption */
.figure__read {
  max-width: 72ch;
  margin: var(--sp-1) 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.figure__read strong,
.figure__caption strong,
.why strong { color: var(--ink); font-weight: 600; }

/* Revision 1: the intro chapter and its two-tool pipeline diagram */
.chapter--intro > .takeaway { max-width: 26em; }
.pipeline {
  max-width: var(--content-max, 1120px);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
}
.pipeline__title {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
}
.pipeline__row { display: grid; gap: var(--sp-2); }
.pipeline__row + .pipeline__row { margin-top: var(--sp-4); }
.pipeline__tool { font-family: var(--font-display); font-weight: 600; }
.pipeline__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pipeline__step {
  position: relative;
  display: grid;
  flex: 1 1 180px;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--step, var(--muted));
  border-radius: 4px;
  background: var(--surface);
}
/* a small chevron between steps, drawn in CSS so the text holds no arrow characters */
.pipeline__step + .pipeline__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--sp-5) + 6px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
}
.pipeline__step--1 { --step: var(--tier-1); }
.pipeline__step--2 { --step: var(--tier-2); }
.pipeline__step--3 { --step: var(--tier-3); }
.pipeline__step--other { --step: var(--other); }
.pipeline__name { font-weight: 600; }
.pipeline__note { color: var(--ink-2); font-size: var(--fs-small); }
@media (max-width: 639.98px) {
  .pipeline__steps { flex-direction: column; }
  .pipeline__step { flex: 0 0 auto; }
  .pipeline__step + .pipeline__step::before { display: none; }
}

/* long environment-variable names in appendix lists must wrap on phones */
.appendix-section li, .appendix-section p { overflow-wrap: anywhere; }