/* The tour pages' own CSS, shared by index.html and every feature page.
   Built from artifactkit tokens only: no literal colours, so the theme lives in one
   place. Lifted out of index.html in M18 so the v1 pages and the map look the same. */
html { scroll-behavior: smooth; scroll-padding-top: var(--ak-s4); }
[hidden] { display: none !important; }
body { line-height: 1.6; }
.tour-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--ak-s7); }
@media (max-width: 960px) {
  .tour-layout { grid-template-columns: minmax(0, 1fr); gap: var(--ak-s5); }
  .ak-toc { position: static; max-height: none; }
  .ak-pagehead { flex-direction: column; align-items: flex-start; }
  .ak-meta { text-align: left; }
}
.ak-toc { max-height: calc(100vh - var(--ak-s6)); overflow-y: auto; padding-right: var(--ak-s2); scrollbar-width: thin; }
.ak-toc .toc-part { display: flex; justify-content: space-between; margin-top: var(--ak-s5); }
.ak-toc .toc-part a { color: inherit; text-decoration: none; }
.ak-toc .count { letter-spacing: 0; text-transform: none; font-weight: 500; }
.ak-nav a { display: flex; gap: var(--ak-s2); }
.ak-nav .n { min-width: 1.6em; color: var(--ak-ink-soft); }
.ak-nav li.planned a { color: var(--ak-ink-soft); font-style: italic; }
.ak-nav li.read a { color: var(--ak-accent); border-left-color: var(--ak-accent); }
.ak-nav li.read .n::after { content: " ✓"; }

.tour-main { max-width: 760px; min-width: 0; }
.tour-main > p, .stop > p { max-width: 70ch; }
.part-head { margin-top: var(--ak-s8); border-bottom-color: var(--ak-rule-mid); }
.part-head h2 { font-size: 28px; margin: 0; }
.part-head .ak-pill { margin-left: auto; }
.part-intro { color: var(--ak-ink-muted); font-size: 17px; }
h3.stage { font-size: 19px; margin: var(--ak-s7) 0 var(--ak-s2); }
h3.stage small { font-size: 13px; font-weight: 500; color: var(--ak-ink-soft); margin-left: var(--ak-s2); }

/* A stop is an artifactkit exhibit; a planned one is its dashed outline. */
article.stop { position: relative; background: var(--ak-surface); border: 1px solid var(--ak-rule);
  border-radius: var(--ak-radius); padding: var(--ak-s5) var(--ak-s5) var(--ak-s2); margin: var(--ak-s5) 0; }
article.stop.planned { background: transparent; border-style: dashed; border-color: var(--ak-rule-mid); }
article.stop h4 { font-size: 18px; margin: 0 0 var(--ak-s2); padding-right: 6rem; }
article.stop h4 .n { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ak-accent); margin-bottom: var(--ak-s1); }
article.stop h4 .n::before { content: "Stop "; }
article.stop.planned h4 .n { color: var(--ak-warn); }
.files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ak-s2) var(--ak-s3); font-size: 14px; }
.files a code, .look code { background: var(--ak-fill-2); border: 1px solid var(--ak-rule); padding: 1px 6px; border-radius: 3px; }
.files a { text-decoration: none; }
.files a:hover code { border-color: var(--ak-accent); }
p.look { font-size: 13px; line-height: 2; color: var(--ak-ink-muted); }
code { overflow-wrap: anywhere; }
label.done { position: absolute; top: var(--ak-s5); right: var(--ak-s5); display: flex; align-items: center;
  gap: var(--ak-s1); font-size: 12px; color: var(--ak-ink-muted); cursor: pointer; user-select: none; }
label.done input { accent-color: var(--ak-accent); margin: 0; }

.take { border-left: 3px solid var(--ak-accent); background: var(--ak-accent-wash);
  padding: var(--ak-s3) var(--ak-s4); border-radius: 0 var(--ak-radius) var(--ak-radius) 0; }

.diagram { margin: var(--ak-s4) 0 var(--ak-s5); padding: var(--ak-s4); background: var(--ak-bg);
  border: 1px solid var(--ak-rule); border-radius: var(--ak-radius); overflow-x: auto; }
pre.mermaid { margin: 0; font-size: 12.5px; color: var(--ak-ink-muted); white-space: pre; }
pre.mermaid[data-processed] { text-align: center; white-space: normal; }

#sizes td.loc, #sizes th.loc { text-align: right; white-space: nowrap; padding-right: var(--ak-s4); }

/* Added when stops moved from dense prose to bullets and pseudocode boxes:
   a plain key-points list, and a pseudocode block that must not look like
   pre.mermaid or mermaid.js's auto-scan (class "mermaid") will try to parse it. */
.stop ul.points { margin: var(--ak-s3) 0; padding-left: 1.3em; }
.stop ul.points li { margin: var(--ak-s2) 0; }
.stop ul.points code { background: var(--ak-fill-2); border: 1px solid var(--ak-rule); padding: 1px 6px; border-radius: 3px; }
pre.pseudo { margin: var(--ak-s4) 0 var(--ak-s5); padding: var(--ak-s4); background: var(--ak-bg);
  border: 1px dashed var(--ak-rule-mid); border-radius: var(--ak-radius); overflow-x: auto;
  font: 13px/1.6 var(--ak-mono); color: var(--ak-ink); white-space: pre; }
pre.pseudo::before { content: "pseudocode"; display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ak-ink-soft); margin-bottom: var(--ak-s2); }

.ak-stepper .ak-step a { color: inherit; text-decoration: none; }
.ak-footer p { max-width: 80ch; }
@media print {
  .ak-toc, label.done { display: none !important; }
  .tour-layout { display: block; }
  article.stop, .diagram { break-inside: avoid; }
}

/* Added in M18: the header's list of pages, and the per-file size table the v1
   feature pages carry in place of Core's per-package one. */
.pages { display: flex; flex-wrap: wrap; gap: var(--ak-s2) var(--ak-s3); font-size: 13px;
  margin: var(--ak-s3) 0 0; list-style: none; padding: 0; }
.pages a { text-decoration: none; padding: 2px 8px; border: 1px solid var(--ak-rule);
  border-radius: 999px; color: var(--ak-ink-muted); }
.pages a:hover { border-color: var(--ak-accent); color: var(--ak-accent); }
.pages a[aria-current="page"] { border-color: var(--ak-accent); color: var(--ak-accent);
  background: var(--ak-accent-wash); }
table.sizes td.loc, table.sizes th.loc { text-align: right; white-space: nowrap;
  padding-right: var(--ak-s4); }