/* The reading pages of openeik.org (/why, /roadmap). The lander's tokens, type and rhythm: birch ground, bog-oak ink, oak gold, IFC blue; one column, sections divided by a hairline. */
:root {
  --ground: #f2f3ee;  /* birch */
  --panel: #e8eae2;
  --ink: #1b2016;     /* bog oak */
  --muted: #5e6658;
  --oak: #a8771c;     /* oak gold */
  --oak-soft: #efe3c8;
  --ifc: #2f6fc0;
  --ifc-soft: #dde7f3;
  --bad: #c2412f;
  --good: #2e7d43;
  --good-soft: #dcefe0;
  --line: #d6d9cf;
  --display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #11140f; --panel: #181c15; --ink: #e9ece4; --muted: #9aa292; --oak: #d2a03a; --oak-soft: #2b2414; --ifc: #5b95e0; --ifc-soft: #16233a; --bad: #ef6a55; --good: #7fcf86; --good-soft: #1b2f1e; --line: #2a3024; color-scheme: dark; } }
:root[data-theme="dark"] { --ground: #11140f; --panel: #181c15; --ink: #e9ece4; --muted: #9aa292; --oak: #d2a03a; --oak-soft: #2b2414; --ifc: #5b95e0; --ifc-soft: #16233a; --bad: #ef6a55; --good: #7fcf86; --good-soft: #1b2f1e; --line: #2a3024; color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.55 var(--display); }
.wrap { max-width: 64rem; margin: 0 auto; padding-inline: 1.25rem; }
section { padding-block: clamp(3rem, 8vw, 5.5rem); border-top: 1px solid var(--line); }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.04; }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0; max-width: 62ch; }
.eyebrow { font: 500 0.78rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--oak); }
.lede { font-size: clamp(1.15rem, 2.4vw, 1.4rem); color: var(--muted); }
.stack { display: grid; gap: 1.2rem; }
.muted { color: var(--muted); }
code, .mono { font-family: var(--mono); font-size: 0.86em; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; }
.note { font: 0.8rem/1.5 var(--mono); color: var(--muted); }

/* top bar: the oak and the name lead home */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; flex-wrap: wrap; }
.mark { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-size: 1.35rem; letter-spacing: -0.03em; }
.mark canvas { width: 3.4rem; height: 2.1rem; display: block; }
.mark b { color: var(--oak); }
.mark .tld { font-size: 0.62em; color: var(--oak); font-weight: 500; letter-spacing: -0.01em; }
.top nav { display: flex; gap: 0.3rem 1.2rem; flex-wrap: wrap; font: 500 0.82rem var(--mono); }
.top nav a { text-decoration: none; color: var(--muted); padding-block: 0.2rem; border-bottom: 1px solid transparent; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"] { color: var(--oak); border-bottom-color: var(--oak); }

/* the page's own title */
.intro { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.intro h1 b { color: var(--oak); font-weight: inherit; }
.intro .lede { color: var(--ink); max-width: 44ch; }
.toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.toc a { display: inline-block; font: 500 0.8rem var(--mono); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; }
.toc a:hover { border-color: var(--oak); color: var(--oak); }

/* two-column beats and big numbers, as on the lander */
.beat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.beat.wide-l { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.beat.wide-r { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.big { font-size: clamp(3.4rem, 9vw, 6rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.big.ifc { color: var(--ifc); } .big.oak { color: var(--oak); }
.stats { display: grid; gap: 1.4rem; align-content: start; }
.stats p { margin-top: 0.3rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem 1.2rem; font: 0.84rem/1.65 var(--mono); overflow-x: auto; white-space: pre; margin: 0; min-width: 0; }
.panel .k { color: var(--oak); } .panel .m { color: var(--muted); } .panel .del { color: var(--bad); } .panel .add { color: var(--good); } .panel .i { color: var(--ifc); }
.ref { font: 500 0.72em var(--mono); color: var(--oak); text-decoration: none; vertical-align: super; margin-left: 0.15em; }
.ref:hover { text-decoration: underline; }
.refs { margin: 0; padding-left: 1.6rem; display: grid; gap: 0.4rem; font: 0.8rem/1.5 var(--mono); color: var(--muted); max-width: 76ch; }
.refs li { overflow-wrap: anywhere; }
.refs li::marker { color: var(--oak); }
.refs li:target { color: var(--ink); }
.refs li span { color: var(--ink); }

/* cards with a rule on top */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.5rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.card { border-top: 2px solid var(--ink); padding-top: 0.8rem; display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.card.oak { border-top-color: var(--oak); } .card.ifc { border-top-color: var(--ifc); }
.card p { color: var(--muted); }
.card .n { font: 500 0.78rem var(--mono); color: var(--oak); letter-spacing: 0.08em; }

/* a figure: a diagram in its own frame */
.fig { margin: 0; display: grid; gap: 0.6rem; min-width: 0; }
.fig svg { width: 100%; height: auto; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.fig figcaption { font: 0.78rem/1.5 var(--mono); color: var(--muted); }
svg text { font-family: var(--display); fill: var(--ink); }
svg .mono { font-family: var(--mono); }
svg .m { fill: var(--muted); } svg .o { fill: var(--oak); } svg .b { fill: var(--ifc); }
svg .card-bg { fill: var(--ground); stroke: var(--line); stroke-width: 1.2; }
svg .card-ifc { fill: var(--ground); stroke: var(--ifc); stroke-width: 1.6; }
svg .card-oak { fill: var(--oak-soft); stroke: var(--oak); stroke-width: 1.6; }
svg .str { fill: none; stroke: var(--ifc); stroke-width: 1.6; stroke-dasharray: 5 4; }
svg .str-o { fill: none; stroke: var(--oak); stroke-width: 1.8; }
svg .edge { fill: none; stroke: var(--muted); stroke-width: 1.2; }
svg .dot { fill: var(--ink); } svg .dot-o { fill: var(--oak); } svg .dot-b { fill: var(--ifc); }
svg .arr-b { fill: var(--ifc); } svg .arr-o { fill: var(--oak); }
svg .node { fill: var(--ground); stroke: var(--ink); stroke-width: 1.6; }
svg .hub { fill: var(--ifc-soft); stroke: var(--ifc); stroke-width: 2; }
svg .edge-b { fill: none; stroke: var(--ifc); stroke-width: 2; }

/* compare: IFC against OpenEik */
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--line); }
th { font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
td:first-child { font-weight: 500; }
th.ifc { color: var(--ifc); } th.oak { color: var(--oak); }
.compare td:nth-child(2) { color: var(--muted); }

/* the five steps of a small change */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.2rem 0.8rem; counter-increment: s; }
.steps li::before { content: counter(s); grid-row: span 2; width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--ifc); color: var(--ifc); display: grid; place-items: center; font: 500 0.9rem var(--mono); }
.steps h3 { align-self: center; }
.steps p { color: var(--muted); }

/* a timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.timeline li { border-top: 2px solid var(--ifc); padding-top: 0.7rem; display: grid; gap: 0.3rem; align-content: start; min-width: 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ifc); }
.timeline b { font: 700 1.5rem var(--display); letter-spacing: -0.03em; }
.timeline span { color: var(--muted); font-size: 0.92rem; }

/* choices and their upsides */
.choices { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.choice { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.4rem 1.6rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.choice h3 { font-size: 1.1rem; }
.choice h3 code { font-size: 0.8em; color: var(--ifc); }
.choice .up { color: var(--ink); }
.choice .up::before { content: "Then: "; font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--good); }
.choice .now { color: var(--muted); }
.choice .now::before { content: "Now: "; font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bad); }

/* keep and change */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ticks li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.4rem; align-items: baseline; }
.ticks li::before { content: "✓"; color: var(--good); font-weight: 700; }
.ticks.change li::before { content: "→"; color: var(--oak); }
.ticks b { font-weight: 700; }
.ticks span { color: var(--muted); }

/* the closing call */
.next { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.btn { display: inline-block; font: 500 0.88rem var(--mono); text-decoration: none; border: 1px solid var(--oak); color: var(--oak); border-radius: 999px; padding: 0.55rem 1.05rem; }
.btn.solid { background: var(--oak); color: var(--ground); }
.btn:hover { filter: brightness(1.08); }

footer { border-top: 1px solid var(--line); padding-block: 2rem 3rem; display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; font: 0.82rem var(--mono); color: var(--muted); }
footer a { text-decoration: none; } footer a:hover { color: var(--ink); text-decoration: underline; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

@media (max-width: 900px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .beat, .beat.wide-l, .beat.wide-r, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .choice { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { font-size: 0.76rem; padding: 0.9rem; }
  table { font-size: 0.88rem; }
}

/* a table that becomes a list of rows on a phone */
@media (max-width: 640px) {
  table.stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; width: 100%; }
  table.stacked tr { border-bottom: 1px solid var(--line); padding-block: 0.7rem; }
  table.stacked tr:first-child { border-top: 2px solid var(--ink); }
  table.stacked td { border: 0; padding: 0.12rem 0; }
  table.stacked td:first-child { font-weight: 700; padding-bottom: 0.35rem; }
  table.stacked td[data-l]::before { content: attr(data-l) " · "; font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
  table.stacked td[data-l="IFC"]::before { color: var(--ifc); }
  table.stacked td[data-l="OpenEik"]::before { color: var(--oak); }
  .compare td:nth-child(2) { color: var(--muted); }
}
td code { overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the roadmap: statuses as pills with a dot */
.st { display: inline-flex; align-items: center; gap: 0.4rem; font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.02em; border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.6rem 0.22rem 0.5rem; white-space: nowrap; color: var(--ink); background: var(--ground); justify-self: start; }
.st::before, .rm-chip i { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; display: inline-block; box-sizing: border-box; }
.st-draft::before, .rm-chip.st-draft i { background: var(--good); }
.st-next::before, .rm-chip.st-next i { background: var(--oak); }
.st-v1::before, .rm-chip.st-v1 i { border: 2px solid var(--oak); }
.st-planned::before, .rm-chip.st-planned i { border: 2px solid var(--ink); }
.st-exploring::before, .rm-chip.st-exploring i { border: 1.5px dashed var(--muted); }
.st-draft { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.st-next { border-color: var(--oak); }
.rm-glance { display: grid; gap: 1.6rem; padding-top: clamp(2rem, 5vw, 3rem); }
.rm-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.8rem; font: 0.84rem var(--mono); color: var(--muted); }
.rm-meta b { font-weight: 500; color: var(--oak); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; margin-right: 0.35rem; }
.rm-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.rm-legend li { display: grid; gap: 0.45rem; align-content: start; font-size: 0.88rem; color: var(--muted); min-width: 0; }
.rm-map { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rm-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.7rem; background: var(--panel); }
.rm-chip:hover { border-color: var(--oak); }
.rm-doms { display: grid; margin-top: 2.2rem; border-top: 2px solid var(--ink); }
.rm-dom { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.6rem 1.8rem; padding-block: 1.2rem; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.rm-dom.rm-head { padding-block: 0.6rem; font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rm-dom.rm-head span:last-child { color: var(--ifc); }
.rm-dom:target { background: linear-gradient(90deg, var(--oak-soft), transparent); }
.rm-name { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.rm-name h3 { font-size: 1.2rem; }
.rm-body { display: grid; gap: 0.7rem; align-content: start; min-width: 0; }
.rm-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rm-parts li { display: grid; grid-template-columns: 9.4rem minmax(0, 1fr); gap: 0.7rem; align-items: start; color: var(--muted); font-size: 0.94rem; }
.rm-parts .st { border: 0; background: none; padding: 0.2rem 0 0; color: var(--muted); font-size: 0.7rem; white-space: normal; }
.rm-proof { border-left: 3px solid var(--oak); padding-left: 0.8rem; font-size: 0.94rem; }
.rm-proof b { color: var(--oak); }
.rm-ifc { display: grid; gap: 0.3rem; align-content: start; min-width: 0; color: var(--muted); font-size: 0.94rem; }
.rm-lbl { display: none; font: 500 0.7rem var(--mono); letter-spacing: 0.1em; color: var(--ifc); }
.rm-src { margin-top: 1rem; overflow-wrap: anywhere; }
.rm-std { display: grid; margin-top: 2.2rem; border-top: 2px solid var(--ink); }
.rm-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr) minmax(0, 0.75fr); gap: 0.5rem 1.8rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.rm-row p { color: var(--muted); }
.rm-where { font: 0.76rem var(--mono); color: var(--muted); white-space: nowrap; }
.rm-row .rm-where { justify-self: end; }
.rm-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.2rem; }
.rm-three ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.65rem; font-size: 0.95rem; }
.rm-three li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: 0.2rem; color: var(--muted); }
.rm-three li > * { grid-column: 2; }
.rm-done li::before { content: "✓"; color: var(--good); font-weight: 700; }
.rm-open li::before { content: "?"; color: var(--oak); font-weight: 700; font-family: var(--mono); }
.rm-not li::before { content: "✕"; color: var(--bad); font-weight: 700; }
.rm-three li b { color: var(--ink); }
.rm-three li { display: block; position: relative; padding-left: 1.4rem; }
.rm-three li::before { position: absolute; left: 0; top: 0; }
.rm-foot { display: grid; gap: 0.6rem; }
@media (max-width: 1000px) { .rm-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rm-dom { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
  .rm-ifc { grid-column: 2; }
  .rm-lbl { display: block; }
  .rm-dom.rm-head span:last-child { display: none; }
  .rm-three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rm-legend { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .rm-legend li { grid-template-columns: 10rem minmax(0, 1fr); align-items: start; }
  .rm-dom, .rm-row { grid-template-columns: minmax(0, 1fr); }
  .rm-ifc { grid-column: auto; }
  .rm-dom.rm-head { display: none; }
  .rm-name { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rm-parts li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .rm-row .rm-where { justify-self: start; }
}
@media (max-width: 420px) { .rm-legend li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } .rm-name { grid-template-columns: minmax(0, 1fr); } }

/* the apps: a directory, each app a card with its status, its relation to OpenEik, and what it reads and writes */
.st-live::before { background: var(--good); }
.st-testing::before { background: var(--oak); }
.st-development::before { border: 2px solid var(--oak); }
.st-pilot::before { border: 2px solid var(--ink); }
.st-research::before { border: 1.5px dashed var(--muted); }
.st-live { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.st-testing { border-color: var(--oak); }
.ap-top { display: grid; gap: 1.8rem; padding-top: clamp(2rem, 5vw, 3rem); }
.ap-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.ap { display: grid; gap: 0.8rem; align-content: start; border: 1px solid var(--line); border-top: 3px solid var(--oak); border-radius: 10px; background: var(--panel); padding: 1.1rem 1.2rem 1.2rem; min-width: 0; scroll-margin-top: 1rem; }
.ap-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; }
.ap-head h3 { font-size: 1.45rem; margin-right: auto; }
.ap-head h3 code { font-size: 0.82em; }
.ap-sn { flex-basis: 100%; font: 0.76rem var(--mono); color: var(--muted); }
.ap-what { color: var(--ink); }
.ap-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ap-rel li { font: 500 0.74rem var(--mono); border: 1px solid var(--oak); color: var(--oak); border-radius: 999px; padding: 0.2rem 0.6rem; }
.ap-rel li.planned { border-style: dashed; color: var(--muted); border-color: var(--muted); }
.ap-rel i, .ap-legend i { font-style: normal; font-size: 0.9em; opacity: 0.85; }
.ap-io { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.35rem 0.6rem; margin: 0; font-size: 0.94rem; }
.ap-io dt { font: 500 0.7rem/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oak); }
.ap-io dd { margin: 0; color: var(--muted); }
.ap-note { font-size: 0.9rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 0.7rem; }
.ap-link { font: 500 0.84rem var(--mono); color: var(--oak); text-decoration: none; justify-self: start; }
.ap-link:hover { text-decoration: underline; }
.ap-link.none { color: var(--muted); }
.ap-more { font: 500 0.84rem var(--mono); color: var(--oak); justify-self: start; text-underline-offset: 3px; }
.ap-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.4rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.ap-legend ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.ap-legend li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.9rem; color: var(--muted); }
.ap-legend li b { color: var(--ink); font-weight: 500; }
.ap-steps { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.ap-steps li { border-top: 2px solid var(--oak); padding-top: 0.9rem; display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.ap-steps span { font: 500 0.78rem var(--mono); color: var(--oak); letter-spacing: 0.08em; }
.ap-steps p { color: var(--muted); }
.ap-ex { margin-top: 1.8rem; max-width: 70ch; }
#pattern .note { margin-top: 0.6rem; }
@media (max-width: 900px) { .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-legend { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ap-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ap-steps { grid-template-columns: minmax(0, 1fr); } .ap-legend li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .ap-io { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } .ap-io dd + dt { margin-top: 0.4rem; } }

/* suppliers and apps: a call-out line */
.sp-call { margin-top: 1.6rem; border-left: 3px solid var(--oak); padding-left: 0.9rem; max-width: 70ch; }
.card .st { justify-self: start; }

/* /apps: the apps deck as a reading page. Its classes are scoped to .ad, so they do not meet the site's own. */
:root { --paper: #fbfbf8; --bad-soft: #f6e1dc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #161a14; --bad-soft: #35201b; } }
:root[data-theme="dark"] { --paper: #161a14; --bad-soft: #35201b; }
.ad .eyebrow b { color: var(--ink); font-weight: 500; margin-right: 0.5rem; }
.ad .eyebrow i.ex, .ad i.ex { font-style: normal; color: var(--bad); }
.ad h2 b { color: var(--oak); }
.ad h3 { font-size: 1.1rem; }
.ad .hl { color: var(--oak); }
.ad .callout { border-left: 3px solid var(--oak); padding: 0.2rem 0 0.2rem 0.9rem; max-width: 80ch; margin-top: 1.6rem; }
.ad .stack .callout { margin-top: 0.4rem; }
.ad .ex2 { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-top: 2rem; }
.ad .ex2.wide-l { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.ad .ex2.wide-r { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.ad .cols { display: grid; gap: 1.2rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 1.8rem; }
.ad .cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.ad .cell { border-top: 2px solid var(--ink); padding-top: 0.7rem; display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.ad .cell.oak { border-top-color: var(--oak); } .ad .cell.bad { border-top-color: var(--bad); } .ad .cell.good { border-top-color: var(--good); }
.ad .cell p, .ad .cell li { color: var(--muted); font-size: 0.94rem; }
.ad ul.l { margin: 0; padding-left: 1.05rem; display: grid; gap: 0.35rem; }
.ad ul.l li::marker { color: var(--oak); }
.ad .flow { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; counter-reset: s; }
.ad .flow li { counter-increment: s; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 0.8rem; font-size: 0.9rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ad .flow li::before { content: counter(s, decimal-leading-zero); font: 500 0.74rem var(--mono); color: var(--oak); }
.ad .flow b { display: block; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.ad .flow .in { margin-top: auto; padding-top: 0.4rem; border-top: 1px dashed var(--line); font: 0.72rem/1.4 var(--mono); color: var(--muted); }
.ad .flow li.gate { border-color: var(--oak); background: var(--oak-soft); }
.ad .tree, .ad .code { font: 0.78rem/1.55 var(--mono); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.95rem 0.8rem; white-space: pre; overflow-x: auto; margin: 0; min-width: 0; color: var(--ink); }
.ad .tree .o, .ad .code .o { color: var(--oak); font-weight: 500; } .ad .tree .m, .ad .code .c { color: var(--muted); }
.ad .code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
.ad .code .h { display: block; color: var(--muted); border-bottom: 1px solid var(--line); margin: 0 -0.95rem 0.45rem; padding: 0 0.95rem 0.4rem; }
.ad .code .a { color: var(--good); background: var(--good-soft); } .ad .code .d { color: var(--bad); background: var(--bad-soft); }
.ad .facts { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); margin: 0; font-size: 0.94rem; border-top: 2px solid var(--ink); }
.ad .facts dt, .ad .facts dd { padding: 0.5rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.ad .facts dt { font: 500 0.68rem/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oak); }
.ad .facts dd { color: var(--ink); }
.ad .flag { border: 1.5px solid var(--bad); background: var(--bad-soft); border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.9rem; }
.ad .flag b { color: var(--bad); }
.ad .ok { border: 1.5px solid var(--good); background: var(--good-soft); border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.9rem; }
.ad .ok b { color: var(--good); }
.ad .box { border-radius: 12px; padding: 0.9rem 1.1rem; }
.ad .box.oak { background: var(--oak-soft); border: 1px solid color-mix(in srgb, var(--oak) 40%, var(--line)); }
.ad .rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 2rem; border-top: 2px solid var(--ink); margin-top: 2rem; }
.ad .rule { padding: 0.6rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.4rem; }
.ad .rule .n { font: 500 0.8rem var(--mono); color: var(--oak); padding-top: 0.15rem; }
.ad .rule b { display: block; font-size: 1.02rem; }
.ad .rule span { color: var(--muted); font-size: 0.92rem; }
.ad table.plain td:first-child { font-weight: 400; }
.ad table td:first-child { font-weight: 500; }
.ad table { font-size: 0.92rem; }
.ad .note { margin-top: 1rem; max-width: 100ch; }
.ad .round-steps { margin: 1.2rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.94rem; max-width: 80ch; }
.ad .round-steps li::marker { color: var(--oak); font: 500 0.85rem var(--mono); }
.ad .dia-fig { margin-top: 2rem; }
/* the deck's diagrams */
svg.dia { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
svg.dia text { fill: var(--ink); font: 13px var(--display); }
svg.dia text.h { font: 500 11px var(--mono); letter-spacing: 0.06em; fill: var(--oak); }
svg.dia text.m { fill: var(--muted); font-size: 12px; }
svg.dia text.mono { font: 500 11.5px var(--mono); }
svg.dia text.b { font-weight: 700; fill: var(--ink); }
svg.dia text.bad { fill: var(--bad); } svg.dia text.good { fill: var(--good); }
svg.dia .edge { stroke: var(--ink); stroke-width: 2.2; fill: none; }
svg.dia .edge.o { stroke: var(--oak); }
svg.dia .cm { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2; }
svg.dia .cm.o { stroke: var(--oak); }
svg.dia .rs { fill: var(--oak); stroke: var(--oak); stroke-width: 1.5; }
svg.dia .ring { fill: none; stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 4 3; }
svg.dia .ln { stroke: var(--muted); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; marker-end: url(#ar); }
svg.dia .ln.o { stroke: var(--oak); marker-end: url(#aro); }
svg.dia .ln.solid { stroke-dasharray: none; }
svg.dia .bx { fill: var(--ground); stroke: var(--line); }
svg.dia .bx.c { fill: var(--oak-soft); stroke: var(--oak); }
svg.dia .bandf { fill: var(--good-soft); stroke: var(--good); stroke-width: 1; }
svg.dia .bands { fill: var(--bad-soft); stroke: var(--bad); stroke-width: 1; }
svg.dia .lane { fill: var(--ground); }
svg.dia .st circle { fill: var(--oak); }
svg.dia .st text { fill: var(--paper); font: 700 12px var(--display); text-anchor: middle; }
svg .ar { fill: var(--muted); } svg .aro { fill: var(--oak); }
@media (max-width: 1000px) { .ad .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ad .ex2, .ad .ex2.wide-l, .ad .ex2.wide-r { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ad .flow { grid-template-columns: minmax(0, 1fr); }
  .ad .cols.two { grid-template-columns: minmax(0, 1fr); }
  .ad .facts { grid-template-columns: minmax(0, 1fr); } .ad .facts dt { border-bottom: 0; padding-bottom: 0; }
  .ad .tree, .ad .code { font-size: 0.68rem; padding: 0.6rem 0.7rem; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; } .ad .code .h { margin-inline: -0.7rem; padding-inline: 0.7rem; }
  .ad table.stacked td:first-child { font-weight: 700; }
}
.ad .cell p.note { font: 0.78rem/1.5 var(--mono); color: var(--muted); }
@media (max-width: 640px) { .ad .tree .m { display: none; } }

/* /suppliers: the suppliers deck as a reading page, scoped to .ad like /apps */
:root { --warn: #b88a00; --warn-soft: #f6edcc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --warn: #e3bf4a; --warn-soft: #30290f; } }
:root[data-theme="dark"] { --warn: #e3bf4a; --warn-soft: #30290f; }
.ad .flow.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ad .flow.seven li { color: var(--ink); font-size: 0.88rem; }
.ad .cell.warn { border-top-color: var(--warn); }
.ad .chip { display: inline-flex; align-items: center; gap: 0.35rem; font: 500 0.74rem var(--mono); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.55rem; background: var(--paper); white-space: nowrap; }
.ad .chip::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); flex: none; }
.ad .chip.g::before { background: var(--good); } .ad .chip.y::before { background: var(--warn); } .ad .chip.r::before { background: var(--bad); }
.ad .chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ad .status { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); border-top: 2px solid var(--ink); font-size: 0.94rem; }
.ad .status > * { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.ad .status .k { display: flex; flex-direction: column; gap: 0.3rem; }
.ad .status b { display: block; }
.ad .status span.muted { font-size: 0.9rem; }
.ad .scalebar { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.ad .scalebar .mid { flex: 1; text-align: center; color: var(--oak); position: relative; }
.ad .scalebar .mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--oak-soft), var(--oak)); z-index: 0; }
.ad .scalebar .mid i { font-style: normal; position: relative; z-index: 1; background: var(--ground); padding: 0 0.6rem; }
.ad .scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.ad .scale > div { padding: 0.65rem 0.8rem 0.7rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--muted); }
.ad .scale > div b { color: var(--ink); font-size: 1rem; line-height: 1.2; }
.ad .scale > div .k { font: 500 0.66rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--oak); }
.ad .scale > div.min { background: var(--oak-soft); border-radius: 0 0 8px 8px; }
svg.dia .dg { fill: var(--good); } svg.dia .dy { fill: var(--warn); } svg.dia .dr { fill: var(--bad); }
svg.dia text.warn { fill: var(--warn); }
svg.dia .env { fill: none; stroke: var(--oak); stroke-width: 1.8; stroke-dasharray: 7 4; }
svg.dia .sp { fill: var(--panel); stroke: var(--ink); stroke-width: 1.4; }
svg.dia .hole { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
svg.dia .fix { fill: var(--paper); stroke: var(--oak); stroke-width: 2.2; }
svg.dia .dim { stroke: var(--muted); stroke-width: 1; fill: none; }
svg.dia .hz { fill: url(#hatch); stroke: var(--muted); stroke-width: 1; }
svg.dia .wl { fill: var(--ink); }
svg.dia .ink { fill: var(--ink); }
svg.dia .bx.s { fill: var(--panel); stroke: var(--muted); }
svg.dia text.s { font-size: 11.5px; }
svg.dia text.wh { fill: var(--paper); }
.hatchl { stroke: var(--muted); stroke-width: 1.1; }
@media (max-width: 1000px) { .ad .flow.seven { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ad .scale { grid-template-columns: minmax(0, 1fr); } .ad .scale > div.min { border-radius: 8px; } }
@media (max-width: 640px) { .ad .flow.seven { grid-template-columns: minmax(0, 1fr); } .ad .scalebar .mid i { padding: 0 0.3rem; } }
svg.dia text.mono { white-space: pre; }