/* AINT markdown-page additions.
   Layered on top of style-sans.css (ungoldman/style.css, ISC), the theme used by
   the Markdown Viewer Chrome extension. Everything here is additive — the vendored
   file stays byte-identical so it can be re-copied when the extension updates.
   Light only, by preference. */

:root {
  --ink: #303030;
  --ink-soft: #575757;
  --ink-faint: #7d7d7d;
  --rule: #e2e2e2;
  --rule-soft: #efefef;
  --link: #0074d9;
  --tier3: #b45309;   /* amber — lead exhibit */
  --tier2: #6b7280;   /* grey  — supporting  */
  --tier1: #b8bcc4;   /* faint — background  */
  --warn: #9a3412;
  --measure: 46rem;
  --sidebar: 19rem;
}

/* ---------- shell ---------- */

body {
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

.masthead {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
  padding: 2.25rem 0 1.25rem;
}
.masthead .kicker {
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .5rem;
}
.masthead .kicker a { color: inherit; }
.masthead h1 {
  font-size: 2.1rem;
  margin: 0 0 .4rem;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.masthead .dateline {
  color: var(--ink-faint);
  font-size: .9rem;
  font-style: italic;
  margin: 0;
}

.layout { display: block; }

@media (min-width: 60rem) {
  .layout {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

/* ---------- table of contents ---------- */

.toc {
  font-size: .84rem;
  line-height: 1.45;
  margin-bottom: 3rem;
}
@media (min-width: 60rem) {
  .toc {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 0;
    padding-right: .75rem;
    border-right: 1px solid var(--rule-soft);
  }
}
.toc h2 {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .75rem;
  font-weight: 600;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }
.toc a {
  display: block;
  padding: .2rem 0 .2rem .6rem;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
}
.toc a:hover { color: var(--link); border-left-color: var(--rule); text-decoration: none; }
.toc a.is-current { color: var(--ink); border-left-color: var(--tier3); font-weight: 600; }
.toc .lvl-2 > a { font-weight: 600; color: var(--ink); margin-top: .55rem; }
.toc .lvl-3 > a { padding-left: 1.3rem; }
.toc .lvl-4 > a { padding-left: 2rem; font-size: .95em; }

/* narrow screens: collapse the TOC into a disclosure */
.toc-toggle { display: none; }
@media (max-width: 59.99rem) {
  .toc { border: 1px solid var(--rule); border-radius: 4px; padding: .25rem 1rem 1rem; }
  .toc[data-collapsed="true"] { padding-bottom: .25rem; }
  .toc-toggle::before { content: "\25BE\00a0\00a0"; display: inline-block; }
  .toc[data-collapsed="true"] .toc-toggle::before { content: "\25B8\00a0\00a0"; }
  .toc-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: .5rem 0;
    font: inherit;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
    cursor: pointer;
  }
  .toc h2 { display: none; }
  .toc[data-collapsed="true"] ul { display: none; }
}

/* ---------- body copy ---------- */

.content { max-width: var(--measure); }
.content > h1:first-child { margin-top: 0; }

.content h2 {
  font-size: 1.5rem;
  margin-top: 3.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  letter-spacing: -.01em;
}
.content h3 {
  font-size: 1.18rem;
  margin-top: 2.5rem;
  margin-bottom: .9rem;
  letter-spacing: -.005em;
}
.content h4 { font-size: 1.02rem; margin-top: 2rem; }

/* anchor links on hover */
.content h2, .content h3, .content h4 { scroll-margin-top: 1.5rem; }
.anchor {
  position: absolute;
  left: -1.25rem;
  width: 1.25rem;
  color: var(--tier1);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }
.anchor:hover { text-decoration: none; color: var(--link); }

.content ul, .content ol { padding-left: 1.35rem; }
.content li { margin-bottom: .7rem; }
.content li > ul, .content li > ol { margin-top: .55rem; }

.content a { text-decoration: none; border-bottom: 1px solid rgba(0,116,217,.28); }
.content a:hover { text-decoration: none; border-bottom-color: var(--link); }

.content blockquote {
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-size: .95em;
}

/* tables: scroll inside their own box, never the page */
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.content table { display: table; font-size: .9rem; margin-bottom: 0; }
.content table th,
.content table td { border: 0; border-bottom: 1px solid var(--rule); vertical-align: top; padding: .5rem .8rem; }
.content table th { border-bottom: 2px solid #ccc; text-align: left; font-weight: 600; }
.content table tr { border-top: 0; background: none; }
.content table tr:nth-child(2n) { background: none; }
.content table tbody tr:hover { background: #fafafa; }

.content hr { height: 1px; background-color: var(--rule); margin: 2.5rem 0; }

/* ---------- ranking tiers ---------- */

.tier {
  font-variant-emoji: text;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tier-3 { color: var(--tier3); }
.tier-2 { color: var(--tier2); }
.tier-1 { color: var(--tier1); }

/* a lead-exhibit bullet gets a subtle marker so it is findable while scrolling */
.content li.has-tier-3 {
  border-left: 2px solid rgba(180,83,9,.35);
  padding-left: .85rem;
  margin-left: -1rem;
  list-style: none;
}
.content li.has-tier-3::marker { content: none; }

.warn { color: var(--warn); }

/* ---------- footer ---------- */

.colophon {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .8rem;
  color: var(--ink-faint);
  max-width: var(--measure);
}
.colophon a { color: var(--ink-faint); }

/* ---------- print ---------- */

@media print {
  body { max-width: none; padding: 0; }
  .layout { display: block; }
  .toc, .toc-toggle { display: none; }
  .content { max-width: none; }
  .content a { border-bottom: 0; color: #000; }
  .content h2 { page-break-after: avoid; }
  .content li, .content table { page-break-inside: avoid; }
  .tier-3, .tier-2, .tier-1 { color: #000; }
}

/* ---------- landing page: flow diagram ----------
   Reproduces the readme.pptx diagram in HTML/CSS rather than a raster export,
   so it stays selectable, linkable, and legible at any zoom. Colours are the
   deck's own theme tints: dk2 #0E2841 lighter-90/25 for done, accent2 #E97132
   lighter-60 / darker-25 for outstanding. */

:root {
  --node-done-fill: #DCEAF7;
  --node-done-line: #215F9A;
  --node-todo-fill: #F6C6AD;
  --node-todo-line: #C04F15;
  --flow-line: #156082;
  --node-min-h: 6.25rem;
  --arrow-v-h: clamp(1.4rem, 3vw, 2.4rem);
  --gap-w: clamp(1.4rem, 3.5vw, 2.6rem);
  --elbow-inset: 1.5rem;   /* how far the riser sits inside the last box */
}

/* the figure bleeds symmetrically past the reading measure — wide enough that
   boxes do not break words, narrow enough that it still reads as one column */
.flow {
  --bleed: 0rem;
  width: calc(100% + 2 * var(--bleed));
  margin: 2.75rem calc(-1 * var(--bleed)) 2rem;
  padding: 0;
  max-width: none;
}

.flow-grid {
  display: grid;
  grid-template-columns: 1fr var(--gap-w) 1fr var(--gap-w) 1fr;
  grid-template-rows: auto var(--arrow-v-h) auto;
}
/* row 1 auto-sizes to the tallest top box, so all three match */
.n1 { grid-area: 1 / 1; }
.a1 { grid-area: 1 / 2; }
.n3 { grid-area: 1 / 3; }
.a2 { grid-area: 1 / 4; }
.n5 { grid-area: 1 / 5; }
.v1 { grid-area: 2 / 1; }
.v2 { grid-area: 2 / 3; }
.e1 { grid-area: 2 / 4 / 4 / 6; }   /* spans the gap AND the last column */
.n2 { grid-area: 3 / 1; }
.n4 { grid-area: 3 / 3; }

.node {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--node-min-h);
  padding: .9rem 1.1rem;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink);
  border: 1px solid;
  border-radius: 2px;
  text-wrap: balance;
}
.node-done { background: var(--node-done-fill); border-color: var(--node-done-line); }
.node-todo { background: var(--node-todo-fill); border-color: var(--node-todo-line); }

/* the two boxes that already exist are links to the documents */
a.node {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33,95,154,.55);
  border-bottom-width: 1px;          /* override .content a */
  transition: box-shadow .12s ease;
}
a.node:hover,
a.node:focus-visible {
  box-shadow: 0 0 0 3px rgba(33,95,154,.22);
  text-decoration-color: var(--node-done-line);
}

/* arrows, drawn with a rule plus a CSS triangle */
.arrow { position: relative; background: var(--flow-line); }
.arrow::after { content: ""; position: absolute; border: 6px solid transparent; }

.arrow-h { height: 1.5px; align-self: center; justify-self: stretch; }
.arrow-h::after {
  right: -1px; top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid var(--flow-line);
  border-right: 0;
}
.arrow-v { width: 1.5px; justify-self: center; align-self: stretch; }
.arrow-v::after {
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  border-top: 10px solid var(--flow-line);
  border-bottom: 0;
}

/* Elbow: leaves the lower box, runs right, then rises into the base of the
   last box. Two-way — a head at each end. The cell spans the gap column plus
   the last column, so the riser can sit inside the box it points at; its row
   span is [arrow row + lower box row], which puts the corner at the vertical
   centre of the lower row, i.e. 50% of the cell offset by half the arrow row. */
.elbow { position: relative; }
.elbow i { position: absolute; background: var(--flow-line); display: block; }
.elbow i::after { content: ""; position: absolute; border: 6px solid transparent; }

.elbow .run {
  left: 0;
  width: calc(var(--gap-w) + var(--elbow-inset));
  height: 1.5px;
  top: calc(50% + var(--arrow-v-h) / 2);
}
.elbow .run::after {                 /* head pointing back into the lower box */
  left: -1px; top: 50%;
  transform: translateY(-50%);
  border-right: 10px solid var(--flow-line);
  border-left: 0;
}
.elbow .rise {
  left: calc(var(--gap-w) + var(--elbow-inset) - .75px);
  width: 1.5px;
  top: 0;
  height: calc(50% + var(--arrow-v-h) / 2 + 1.5px);
}
.elbow .rise::before { content: ""; position: absolute; display: none; }
.elbow .rise::after {                /* head pointing up into the last box */
  top: -1px; left: 50%;
  transform: translateX(-50%);
  border-bottom: 10px solid var(--flow-line);
  border-top: 0;
}

.flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.4rem;
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: normal;
}
.key { display: inline-flex; align-items: center; gap: .5rem; }
.swatch {
  width: 2.1rem; height: 1rem;
  border: 1px solid;
  border-radius: 2px;
  flex: none;
}
.sw-done { background: var(--node-done-fill); border-color: var(--node-done-line); }
.sw-todo { background: var(--node-todo-fill); border-color: var(--node-todo-line); }

/* stack the stages on narrow screens; the connectors turn vertical */
@media (max-width: 46rem) {
  /* Rotate the diagram rather than flattening it: the main flow runs down the
     left spine (compile -> identify -> forums) and each branch sits beside its
     parent, so the two-row structure of the deck survives. */
  .flow-grid {
    /* taller connector rows: a two-way arrow needs room for a head at each end */
    --arrow-v-h: 2.15rem;
    grid-template-columns: 1fr var(--gap-w) 1fr;
    grid-template-rows: auto var(--arrow-v-h) auto var(--arrow-v-h) auto;
  }
  .n1 { grid-area: 1 / 1; }
  .v1 { grid-area: 1 / 2; }          /* branch, now horizontal */
  .n2 { grid-area: 1 / 3; }
  .a1 { grid-area: 2 / 1; }          /* spine, now vertical */
  .n3 { grid-area: 3 / 1; }
  .v2 { grid-area: 3 / 2; }
  .n4 { grid-area: 3 / 3; }
  .a2 { grid-area: 4 / 1; }
  .e1 { grid-area: 4 / 3; }
  .n5 { grid-area: 5 / 1 / 6 / 4; }  /* no branch, so it spans the full width */

  /* the spine arrows become vertical */
  .a1, .a2 {
    width: 1.5px; height: auto;
    justify-self: center; align-self: stretch;
  }
  .a1::after, .a2::after {
    right: auto; top: auto;
    bottom: -1px; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top: 10px solid var(--flow-line);
    border-bottom: 0;
  }
  /* the branch arrows become horizontal */
  .v1, .v2 {
    width: auto; height: 1.5px;
    align-self: center; justify-self: stretch;
  }
  .v1::after, .v2::after {
    bottom: auto; left: auto;
    right: -1px; top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left: 10px solid var(--flow-line);
    border-right: 0;
  }
  /* the elbow straightens into a two-way vertical link from n4 down to n5 */
  .elbow .run { display: none; }
  .elbow .rise {
    left: calc(50% - .75px);
    top: 0; height: 100%;
  }
  .elbow .rise::before {
    display: block;
    bottom: -1px; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top: 10px solid var(--flow-line);
    border-bottom: 0;
  }
}

/* very narrow: tighten the gutters so two columns still fit */
@media (max-width: 26rem) {
  .flow-grid { --gap-w: 1rem; }
  .node { padding: .7rem .6rem; font-size: .88rem; }
}

/* ---------- landing page: shell ----------
   No sidebar here, so the whole page is a single centred column. The figure
   bleeds a little past the reading measure on both sides; the page max-width
   leaves room for that bleed inside the body padding. */

body.landing { max-width: 60rem; }
body.landing .masthead,
body.landing .content { max-width: var(--measure); margin-inline: auto; }

.lede { font-size: 1.06rem; }
.lede strong { font-weight: 600; }

.what-exists { margin-top: 2.5rem; }
.what-exists h2 { margin-top: 0; border-top: 0; padding-top: 0; font-size: 1.25rem; }

.closing {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .95rem;
}

@media print {
  a.node::after { display: none; }
  .node { break-inside: avoid; }
}