/* IA LIBRARY v0.2 (preview). "A site plan you can argue with."
   One motif: the ruled module bar. Solid edge = always; dashed = depends on your brief; dotted = if it earns its
   place; struck = left out. One accent: --brand marks the primary action and nothing else. House tokens only. */

.il-head { margin: 0 0 2.5rem; max-width: 54rem; }
.il-head--index .lc-h1 { max-width: 14ch; }
.il-for { margin: 0 0 .75rem; font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; max-width: 46ch; }
.il-leads { margin: 1rem 0 0; color: var(--ink-2); max-width: 60ch; line-height: 1.5; }
.il-leads span { display: inline-block; min-width: 6.5rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-thin { margin: 1rem 0 0; padding: .6rem .8rem; border: 1px dashed var(--rule-firm); font-size: var(--t-sm); max-width: 60ch; }
.il-h2 { margin: 0 0 1rem; font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; line-height: 1.12; }
.il-h2 span { font: var(--t-xs) var(--mono); font-weight: 400; color: var(--ink-3); margin-inline-start: .5rem; }
.il-h3 { margin: 1.5rem 0 .6rem; font-family: var(--display); font-size: var(--t-md); font-weight: 700; }
.il-sec { margin: 0 0 3.5rem; max-width: 76rem; }
.il-two, .il-use { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem 3rem; }
.il-dim { color: var(--ink-3); font-size: var(--t-xs); font-weight: 400; }

/* statements with their basis */
.il-notes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.il-notes > li { padding: .7rem 0; border-bottom: 1px solid var(--rule); line-height: 1.5; max-width: 68ch; }
.il-meta { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: baseline; margin-inline-start: .2rem; }
.il-b, .il-cite, .il-claim { font: var(--t-xs) var(--mono); line-height: 1.6; padding: 0 .35rem; white-space: nowrap; }
.il-b { color: var(--ink-2); border: 1px solid var(--rule-firm); }
.il-b--sourced { color: var(--ink); border-color: var(--ink-2); }
.il-b--convention { border-style: dotted; }
.il-b--synthesis, .il-b--ruling { border-color: var(--rule-firm); }
.il-b--hypothesis { border-style: dashed; }
.il-b--unknown { border-style: dashed; font-style: italic; }
.il-cite { color: var(--ink-2); text-decoration: underline; text-underline-offset: .15em; }
.il-claim { color: var(--ink-3); border-bottom: 0; padding-inline: .25rem 0; } /* R5: provenance kept, visually subordinate */
.il-instead { font-weight: 650; white-space: nowrap; }

/* ---------- the site plan ---------- */
.il-map { max-width: none; }
.il-map__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; margin-bottom: .75rem; }
.il-map__head .il-h2 { margin: 0; }
.il-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-lg::before { content: ""; display: inline-block; width: 1.4rem; height: .7rem; margin-inline-end: .35rem; vertical-align: -1px; border: 1px solid var(--ink-2); }
.il-lg--ask::before { border-style: dashed; }
.il-lg--opt::before { border-style: dotted; }
.il-lg--out::before { border-color: var(--rule-firm); background: linear-gradient(to bottom right, transparent 47%, var(--ink-3) 49%, transparent 51%); }
.il-lg--act::before { border-color: var(--rule-firm); border-left: 3px solid var(--brand); }

.il-action { margin: 0 0 1.25rem; padding: .7rem 0 .7rem 1rem; border-left: 3px solid var(--brand); max-width: 70ch; line-height: 1.5; }
.il-action:empty { display: none; }
.il-action.is-static { margin-top: 1rem; }

.il-plan { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.75rem 1.25rem; align-items: start; }
.il-plan--one { grid-template-columns: minmax(0, 40rem); }
@media (min-width: 72rem) { .il-plan:not(.il-plan--one) .il-pg--home { grid-column: span 2; grid-row: span 3; } }
.il-pg { border-top: 3px solid var(--ink); padding-top: .75rem; min-width: 0; }
.il-pg[data-state="ask"] { border-top-style: dashed; border-top-width: 2px; }
.il-pg[data-state="out"] { border-top-color: var(--rule-firm); border-top-width: 1px; }
.il-pg[data-state="out"] h3 { text-decoration: line-through; color: var(--ink-3); }
.il-pg__head h3 { display: inline; margin: 0; font-family: var(--display); font-size: var(--t-md); font-weight: 750; letter-spacing: -.015em; }
.il-pg--home .il-pg__head h3 { font-size: var(--t-lg); }
.il-pg__per { margin-inline-start: .5rem; font: var(--t-xs) var(--mono); color: var(--ink-3); white-space: nowrap; }
.il-pg__job { margin: .35rem 0 .25rem; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; }
.il-pg__need { margin: 0 0 .25rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-pg__via { display: inline-block; font: var(--t-xs) var(--mono); color: var(--ink-2); padding-block: .2rem; }
.il-bars { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.il-pg--home .il-bars { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

.il-bar { border: 1px solid var(--ink-2); background: var(--paper); min-width: 0; }
.il-bar[data-state="ask"] { border-style: dashed; }
.il-bar[data-state="optional"] { border-style: dotted; }
.il-bar[data-state="out"] { border-color: var(--rule); }
.il-bar[data-state="out"] .il-bar__n { text-decoration: line-through; color: var(--ink-3); }
.il-bar--act { border-left: 3px solid var(--brand); }
.il-bar[data-state="out"].il-bar--act { border-left-color: var(--rule-firm); }
.il-bar summary { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; padding: .5rem .65rem .55rem; cursor: pointer; list-style: none; min-height: 2.75rem; }
.il-bar summary::-webkit-details-marker { display: none; }
.il-bar summary::after { content: "+"; content: "+" / ""; grid-column: 2; grid-row: 1; font: var(--t-sm) var(--mono); color: var(--ink-3); }
.il-bar details[open] summary::after { content: "–"; }
.il-bar summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.il-bar__n { grid-column: 1; font-weight: 650; line-height: 1.25; }
.il-bar__j, .il-bar__s, .il-bar__p { grid-column: 1 / -1; font: var(--t-xs) var(--mono); color: var(--ink-3); line-height: 1.45; }
.il-bar__s { color: var(--ink-2); }
.il-bar__p { color: var(--ink); }
.il-bar__body { padding: 0 .65rem .7rem; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.il-bar__body p { margin: 0 0 .5rem; }
.il-bar__body ul { margin: 0 0 .6rem; padding-inline-start: 1.1rem; }
.il-bar__body i { font: var(--t-xs) var(--mono); color: var(--ink-3); font-style: normal; }
.il-bar__k { font: var(--t-xs) var(--mono); color: var(--ink-3); }

.il-frame { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 0 0 1.5rem; padding: .6rem 0; border-block: 1px solid var(--rule); }
.il-frame__k { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-frame ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.il-frame li { padding: .3rem .6rem; border: 1px solid var(--ink-2); font-size: var(--t-sm); }
.il-frame li[data-state="ask"] { border-style: dashed; }
.il-frame li[data-state="out"] { border-color: var(--rule); color: var(--ink-3); }
.il-frame li[data-state="out"] b { text-decoration: line-through; }
.il-frame li span { font: var(--t-xs) var(--mono); color: var(--ink-3); }

/* ---------- the brief ---------- */
.il-brief { margin: 0 0 2rem; padding: 1.25rem 0 1rem; border-block: 1px solid var(--rule-firm); max-width: 76rem; }
.il-brief__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; }
.il-brief__top .il-h2 { margin: 0; font-size: var(--t-md); }
.il-brief__top p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); flex: 1 1 24rem; max-width: 62ch; }
.il-ex { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 1rem 0 0; }
.il-ex__k { margin: 0 .4rem 0 0; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-ex__b, .il-btn { min-height: 2.75rem; padding: .45rem .8rem; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-firm); cursor: pointer; }
.il-ex__b:hover, .il-btn:hover { border-color: var(--ink-2); }
.il-ex__b[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.il-ex__b--clear { color: var(--ink-2); border-style: dashed; }
.il-ex__b:focus-visible, .il-btn:focus-visible, .il-q select:focus-visible, .il-q--many input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.il-ex__q { margin: .9rem 0 0; padding: 0 0 0 1rem; border-left: 1px solid var(--ink-2); max-width: 70ch; }
.il-ex__q p { margin: 0 0 .3rem; font-family: var(--display); line-height: 1.45; }
.il-ex__q cite { font: var(--t-xs) var(--mono); color: var(--ink-3); font-style: normal; }
.il-qs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem 1.5rem; margin-top: 1.1rem; }
.il-q label, .il-q--many legend { display: block; margin-bottom: .3rem; font-size: var(--t-sm); font-weight: 650; line-height: 1.3; }
.il-q select { width: 100%; min-height: 2.75rem; padding: .4rem .5rem; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-firm); }
.il-q--many { margin: 0; padding: 0; border: 0; min-width: 0; }
.il-q--many label { display: flex; align-items: center; gap: .5rem; min-height: 2rem; font-size: var(--t-sm); }
.il-q--many input { width: 1.1rem; height: 1.1rem; accent-color: var(--ink); }
.il-status { margin: 1rem 0 0; font: var(--t-xs) var(--mono); color: var(--ink-2); }

/* ---------- rules, tables ---------- */
.il-rules { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-firm); max-width: 64rem; }
.il-rules li { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 12rem) minmax(0, 1fr); gap: .4rem 1.25rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.il-rules p { margin: 0; line-height: 1.45; }
.il-rules__w { font: var(--t-xs) var(--mono); color: var(--ink-2); padding-top: .15rem; }
.il-rules__y { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 48rem) { .il-rules li { grid-template-columns: 1fr; } }

.il-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); max-width: 76rem; }
.il-tbl caption { text-align: left; padding-bottom: .6rem; color: var(--ink-2); font-size: var(--t-sm); }
.il-tbl th, .il-tbl td { text-align: left; vertical-align: top; padding: .55rem .9rem .55rem 0; border-bottom: 1px solid var(--rule); line-height: 1.45; }
.il-tbl thead th { font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; border-bottom-color: var(--rule-firm); }
.il-tbl tbody th { font-weight: 650; min-width: 10rem; }
.il-tbl tbody th b { font-weight: 650; color: var(--ink); }
.il-tbl td { color: var(--ink-2); }
.il-tbl code, .il-mod code { font: var(--t-xs) var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.il-tbl i { font: var(--t-xs) var(--mono); color: var(--ink-3); font-style: normal; }
@media (max-width: 40rem) {
  .il-tbl, .il-tbl tbody, .il-tbl tr, .il-tbl th, .il-tbl td { display: block; width: auto; }
  .il-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .il-tbl tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  .il-tbl th, .il-tbl td { border: 0; padding: .1rem 0; }
  .il-tbl tbody th { min-width: 0; }
}

.il-cov { margin: 1rem 0 0; color: var(--ink-2); font-size: var(--t-sm); max-width: 70ch; line-height: 1.5; }
.il-pre { margin: 1rem 0 0; font-size: var(--t-sm); }

/* ---------- the IA file ---------- */
.il-file__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.il-copied { font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-file pre { margin: 0; max-height: 30rem; overflow: auto; padding: 1rem; background: var(--paper-deep); border: 1px solid var(--rule); font: var(--t-xs)/1.5 var(--mono); color: var(--ink); white-space: pre; }
.il-file pre:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.il-file__pre summary { cursor: pointer; font-weight: 650; padding-block: .5rem; }

/* ---------- index ---------- */
.il-pick { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.il-pick a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto; grid-template-areas: "t f s" "e e m"; gap: .35rem 2rem; align-items: start; padding: 1.25rem 0; border-bottom: 1px solid var(--rule-firm); text-decoration: none; color: var(--ink); }
.il-pick a:hover .il-pick__t { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.il-pick a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.il-pick__t { grid-area: t; font-family: var(--display); font-size: var(--t-lg); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; }
.il-pick__f { grid-area: f; color: var(--ink); line-height: 1.45; max-width: 46ch; }
.il-pick__e { grid-area: e; font-size: var(--t-sm); color: var(--ink-3); }
.il-pick__m { grid-area: m; font: var(--t-xs) var(--mono); color: var(--ink-3); text-align: right; }
.il-sil { grid-area: s; display: inline-flex; gap: 4px; align-items: flex-start; padding-top: .35rem; }
.il-sil__c { display: flex; flex-direction: column; gap: 2px; width: 12px; }
.il-sil__c:first-child { width: 22px; }
.il-sil__c i { display: block; height: 4px; background: var(--ink-2); }
.il-sil__c i[data-state="ask"], .il-sil__c i[data-state="optional"] { background: none; border: 1px dashed var(--ink-3); height: 4px; }
.il-sil__c[data-state="ask"] { opacity: .75; }
@media (max-width: 48rem) { .il-pick a { grid-template-columns: 1fr auto; grid-template-areas: "t s" "f f" "e e" "m m"; } .il-pick__m { text-align: left; } }

.il-q-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0 2rem; border-top: 1px solid var(--rule-firm); }
.il-q-list a { display: flex; flex-direction: column; gap: .3rem; padding: .9rem 0 1rem; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); height: 100%; }
.il-q-list__q { font-family: var(--display); font-size: var(--t-md); font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }
.il-q-list__n { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-q-list a:hover .il-q-list__q { text-decoration: underline; text-underline-offset: .12em; }

.il-route { margin: 0; padding: 0; list-style: none; counter-reset: r; border-top: 1px solid var(--rule-firm); max-width: 64rem; }
.il-route li { counter-increment: r; display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 18rem); gap: .3rem 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.il-route li::before { content: counter(r); font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-route p { margin: 0; line-height: 1.45; }
.il-route a { font-weight: 650; padding-block: .2rem; }
@media (max-width: 40rem) { .il-route li { grid-template-columns: 1.5rem 1fr; } .il-route a { grid-column: 2; } }

.il-gaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem 2.5rem; }
.il-gaps li { padding-top: .8rem; border-top: 1px dashed var(--rule-firm); }
.il-gaps h3 { margin: 0 0 .25rem; font-family: var(--display); font-size: var(--t-md); font-weight: 700; }
.il-gaps p { margin: 0 0 .5rem; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.il-gaps__e { color: var(--ink-3) !important; }
.il-gaps__n span { display: block; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-more { max-width: 52rem; }

.il-others { margin: 4rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.il-others ul, .il-used { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.il-others a, .il-used a { display: inline-block; padding-block: .35rem; font-weight: 650; }
.il-used-line { margin: .75rem 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.il-mod { scroll-margin-top: 1.5rem; }
.il-mod__d { margin: 0 0 1rem; max-width: 64ch; line-height: 1.5; }

/* model test */
.il-tests { margin: 0; padding: 0; list-style: none; }
.il-test { padding: 1.25rem 0 1.75rem; border-top: 2px solid var(--ink); }
.il-test[data-v="partial"], .il-test[data-v="does not hold"] { border-top-style: dashed; }
.il-test__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .6rem; }
.il-test__h h3 { margin: 0; font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; }
.il-test__v { font-weight: 650; }
.il-test__s { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-test blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 1px solid var(--ink-2); font-family: var(--display); color: var(--ink-2); max-width: 70ch; line-height: 1.45; }
.il-test__f { margin: .9rem 0 0; max-width: 70ch; line-height: 1.5; }

/* coverage */
.il-cv { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: .3rem 1.5rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--rule); max-width: 64rem; }
.il-cv__l { margin: 0; font-size: var(--t-sm); font-weight: 650; }
.il-cv__bar { display: flex; height: .75rem; margin: 0; border: 1px solid var(--rule-firm); }
.il-cv__bar i { display: block; height: 100%; }
.il-cv__bar .f { background: var(--ink); }
.il-cv__bar .p { background: repeating-linear-gradient(45deg, var(--ink-3) 0 2px, transparent 2px 5px); }
.il-cv__bar .n { background: var(--paper); }
.il-cv__bar .u { background: var(--paper-3); }
.il-cv__n { grid-column: 2; margin: 0; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-cv__n b { font-size: var(--t-sm); color: var(--ink); }
.il-cv__n span { color: var(--ink-3); }
@media (max-width: 40rem) { .il-cv { grid-template-columns: 1fr; } .il-cv__n { grid-column: 1; } }

/* =================================================================== WIREFRAMES
   Aesthetary's architectural drawing of a site. The page is neutral (ink on paper, greys) so any Aesthetic can be
   applied later; violet (--brand) is annotation and state only. Container queries make the Mobile view a real
   narrow layout with its own module order, not a shrunk desktop. */
.il-head--pattern { margin-bottom: 1.75rem; }
.il-head--pattern .il-for { font-size: var(--t-md); max-width: 62ch; font-weight: 500; color: var(--ink-2); }
.il-head--pattern .il-for::first-line { color: var(--ink); }
.il-h4 { margin: 1.25rem 0 .4rem; font-size: var(--t-sm); font-weight: 700; }
.wf-root { --wf-v: var(--brand); --wf-wash: color-mix(in srgb, var(--brand) 9%, transparent); }

/* toolbar */
.wf-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 2rem; padding: .6rem 0; background: var(--paper); border-bottom: 1px solid var(--rule-firm); }
.wf-seg, .wf-var { display: inline-flex; flex-wrap: wrap; align-items: center; }
.wf-seg button, .wf-var button, .wf-tabs button, .il-vars button { min-height: 2.5rem; padding: .35rem .75rem; font: inherit; font-size: var(--t-sm); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule-firm); cursor: pointer; }
.wf-seg button + button { border-left: 0; }
.wf-seg button[aria-pressed="true"], .wf-tabs button[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.wf-var { gap: .3rem; }
.wf-var__k { font: var(--t-xs) var(--mono); color: var(--ink-3); margin-inline-end: .2rem; }
.wf-var button[aria-pressed="true"], .il-vars button[aria-pressed="true"] { color: var(--ink); border-color: var(--wf-v); box-shadow: inset 0 -2px 0 var(--wf-v); }
.wf-var__clr { border-style: dashed !important; }
.wf-tools button:focus-visible, .wf-tabs button:focus-visible, .il-vars button:focus-visible, .ism-node:focus-visible, .wf-tag:focus-visible, .il-mx:focus-visible { outline: 2px solid var(--wf-v); outline-offset: 2px; }

/* legend */
.wf-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.wf-lg::before { content: ""; display: inline-block; width: 1.5rem; height: .75rem; margin-inline-end: .35rem; vertical-align: -1px; border: 1px solid var(--ink-2); }
.wf-lg--cond::before { border: 1.5px dashed var(--wf-v); }
.wf-lg--com::before { border-style: dotted; }
.wf-lg--out::before { border-color: var(--rule-firm); background: linear-gradient(to bottom right, transparent 47%, var(--ink-3) 49%, transparent 51%); }
.wf-lg--you::before { border: 0; border-bottom: 2px dotted var(--wf-v); height: .5rem; }

/* sitemap */
.il-ism { max-width: none; }
.ism { overflow-x: auto; padding: .5rem 0 1rem; }
.ism-frame { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 1.25rem; font-size: var(--t-sm); }
.ism-frame span { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.ism-frame b { font-weight: 600; padding: .2rem .55rem; border: 1px dashed var(--wf-v); }
.ism-frame b[data-state="in"] { border-style: solid; border-color: var(--ink-2); }
.ism-frame b[data-state="out"] { border-color: var(--rule); color: var(--ink-3); text-decoration: line-through; }
.ism-tree, .ism-tree ul { list-style: none; margin: 0; padding: 0; }
.ism-tree > li { display: flex; flex-direction: column; align-items: flex-start; }
.ism-tree > li > ul { position: relative; display: flex; flex-wrap: wrap; gap: 1.5rem .9rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--wf-v); }
.ism-tree > li > ul::before { content: ""; position: absolute; left: 2rem; top: -1.5rem; height: 1.5rem; border-left: 1px solid var(--wf-v); }
.ism-tree > li > ul > li { position: relative; display: flex; flex-direction: column; gap: .75rem; }
.ism-tree > li > ul > li::before { content: ""; position: absolute; left: 1.25rem; top: -1.25rem; height: 1.25rem; border-left: 1px solid var(--wf-v); }
.ism-tree ul ul { padding-left: 1.25rem; border-left: 1px solid var(--wf-v); margin-left: 1.25rem; }
.ism-node { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 9.5rem; max-width: 13rem; padding: .6rem .75rem .65rem; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); cursor: pointer; }
.ism-node--home { min-width: 15rem; padding: .85rem 1rem; border-width: 2px; }
.ism-node--home .ism-node__n { font-family: var(--display); font-size: var(--t-md); font-weight: 750; }
.ism-node--many { box-shadow: 4px 4px 0 -1.5px var(--paper), 4px 4px 0 0 var(--ink-2), 8px 8px 0 -1.5px var(--paper), 8px 8px 0 0 var(--ink-3); margin-right: 8px; margin-bottom: 8px; }
.ism-node[data-state="ask"], .ism-node[data-state="optional"] { border: 1.5px dashed var(--wf-v); }
.ism-node[data-state="out"] { border: 1px solid var(--rule-firm); color: var(--ink-3); }
.ism-node[data-state="out"] .ism-node__n { text-decoration: line-through; }
.ism-node--proposed { border: 1.5px dotted var(--ink-3) !important; color: var(--ink-2); }
.ism-node:hover { background: var(--wf-wash); }
.ism-node__n { font-weight: 700; line-height: 1.2; }
.ism-node__per { font: var(--t-xs) var(--mono); color: var(--ink-2); }
.ism-node__s { font: var(--t-xs) var(--mono); color: var(--ink-3); line-height: 1.35; }

/* work area: drawings + inspector */
.wf-work { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; align-items: start; }
@media (max-width: 70rem) { .wf-work { grid-template-columns: 1fr; } }
.wf-sec { max-width: none; }
.wf-job { margin: 0; color: var(--ink-2); font-size: var(--t-sm); flex: 1 1 20rem; }
.wf-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; }
.wf-tabs button[data-state="out"] { text-decoration: line-through; color: var(--ink-3); }
.wf-tabs button[data-state="ask"] { border-style: dashed; }
.wf-panel > .wf-job { margin-bottom: .9rem; }
.wf-out { margin: 0 0 1rem; padding: .6rem .8rem; border: 1px dashed var(--rule-firm); font-size: var(--t-sm); }

.wf-insp { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow: auto; padding: 1rem 1.1rem; border: 1px solid var(--wf-v); background: var(--paper); font-size: var(--t-sm); line-height: 1.45; }
@media (max-width: 70rem) { .wf-insp { position: static; max-height: none; } }
.wf-insp p { margin: 0 0 .5rem; }
.wf-insp__k, .wf-insp__h { font: var(--t-xs) var(--mono) !important; color: var(--wf-v); margin-top: .9rem !important; }
.wf-insp__k { margin-top: 0 !important; }
.wf-insp__t { margin: .1rem 0 .4rem; font-family: var(--display); font-size: var(--t-md); font-weight: 750; letter-spacing: -.01em; }
.wf-insp__hint { color: var(--ink-2); }
.wf-insp ul { margin: 0 0 .5rem; padding-inline-start: 1rem; }
.wf-insp li { margin-bottom: .25rem; }
.wf-insp__slots span { color: var(--ink-3); font: var(--t-xs) var(--mono); }
.wf-insp__need { font: var(--t-xs) var(--mono); color: var(--ink-2); }
.wf-insp__more { font-weight: 650; display: inline-block; padding-block: .3rem; }

/* the drawing */
.wf { margin: 0 0 1rem; }
.wf figcaption { margin-top: .6rem; font: var(--t-xs) var(--mono); color: var(--ink-3); max-width: 80ch; }
.wf-browser { border: 1px solid var(--ink-2); background: var(--paper); margin-inline: auto; transition: max-width .25s ease; max-width: 72rem; }
.wf-root[data-view="mobile"] .wf-browser { max-width: 390px; }
.wf-url { padding: .35rem .7rem; border-bottom: 1px solid var(--rule-firm); font: var(--t-xs) var(--mono); color: var(--ink-3); background: var(--paper-deep); }
.wf-frame { container: wf / inline-size; display: flex; flex-direction: column; position: relative; color: var(--ink); }
.wf-site-h { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.wf-site-h b { font-weight: 750; margin-inline-end: auto; }
.wf-nav { display: flex; gap: 1rem; color: var(--ink-2); }
.wf-fx { font: var(--t-xs) var(--mono); padding: .25rem .55rem; border: 1px solid var(--ink-2); }
.wf-fx--act { background: var(--ink); color: var(--paper); border-color: var(--ink); font-family: inherit; font-size: var(--t-xs); font-weight: 650; }
.wf-fx[data-state="ask"] { outline: 1.5px dashed var(--wf-v); outline-offset: 2px; }
.wf-fx[data-state="out"], .wf-pbar[data-state="out"] { display: none; }
.wf-burger { display: none; font: var(--t-xs) var(--mono); border: 1px solid var(--ink-2); padding: .2rem .45rem; }
.wf-body { display: flex; flex-direction: column; }
.wf-pbar { display: none; }
.wf-site-f { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 1.25rem; border-top: 1px solid var(--rule); background: var(--paper-deep); order: 99; }

/* one module = one band, separated by a hairline; annotation sits on the boundary */
.wf-mod { position: relative; order: var(--o); padding: 1.5rem 1.25rem 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 6rem; }
.wf-body > .wf-mod:first-child { border-top: 0; }
.wf-mod[data-state="ask"] { background: repeating-linear-gradient(-45deg, transparent 0 9px, var(--wf-wash) 9px 10px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent); }
.wf-mod[data-state="optional"] { box-shadow: inset 0 0 0 1px var(--rule-firm); }
.wf-mod[data-state="out"] .wf-draw { opacity: .28; filter: grayscale(1); }
.wf-mod[data-state="out"] .wf-tag__n { text-decoration: line-through; }
.wf-root[data-show="brief"] .wf-mod[data-state="out"], .wf-root[data-show="brief"] figure[data-pgstate="out"] .wf-browser { display: none; }
.wf-mod.is-hl { box-shadow: inset 0 0 0 2px var(--wf-v); background: var(--wf-wash); }
.wf-draw { cursor: pointer; }

.wf-tag { position: absolute; top: -.7rem; left: .9rem; z-index: 2; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; max-width: calc(100% - 1.8rem); padding: .12rem .5rem .15rem; font: var(--t-xs) var(--mono); line-height: 1.4; color: var(--paper); background: var(--wf-v); border: 0; cursor: pointer; text-align: left; }
.wf-tag__r { opacity: .85; }
.wf-tag__n { font-weight: 700; }
.wf-tag__s { padding-left: .4rem; border-left: 1px solid color-mix(in srgb, var(--paper) 50%, transparent); }
.wf-tag[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.wf-mod[data-state="out"] .wf-tag { background: var(--ink-3); }
.wf-root[data-annot="off"] .wf-tag:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wf-root[data-annot="off"] .wf-mod[data-state="ask"] { background: none; box-shadow: none; }

/* drawing primitives */
.wl { display: block; height: .55rem; width: var(--w); background: var(--rule-firm); margin: .35rem 0; }
.wls { display: block; }
.wh { display: block; font-family: var(--display); font-weight: 750; letter-spacing: -.02em; line-height: 1.08; color: var(--ink); }
.wh--1 { font-size: clamp(1.6rem, 4.2cqi, 3.1rem); max-width: 18ch; margin-bottom: .7rem; }
.wh--3 { font-size: var(--t-md); margin-bottom: .8rem; }
.wsub { display: block; color: var(--ink-2); max-width: 46ch; line-height: 1.45; }
.wk { display: inline-block; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.wyou { text-decoration: underline dotted var(--wf-v); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--ink-2); }
.wimg { position: relative; display: block; aspect-ratio: var(--r); background: var(--paper-3); border: 1px solid var(--rule-firm); overflow: hidden; }
.wimg::before, .wimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .5px), var(--rule-firm) 50%, transparent calc(50% + .5px)); }
.wimg::after { transform: scaleX(-1); }
.wimg span { position: absolute; left: .5rem; bottom: .4rem; right: .5rem; z-index: 1; font: var(--t-xs) var(--mono); color: var(--ink-2); background: var(--paper-3); }
.wimg span:empty { display: none; }
.wbtn { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .4rem 1.1rem; font-size: var(--t-sm); font-weight: 650; border: 1.5px solid var(--ink); }
.wbtn--p { background: var(--ink); color: var(--paper); }
.wbtn--s { background: var(--paper); color: var(--ink); }
.wlink, .wcheck { font-size: var(--t-xs); font-weight: 650; text-decoration: underline; color: var(--ink); }
.wnote { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .6rem; }
.wnote .wl { margin: 0; }
.wg { display: grid; gap: 1.25rem 2rem; align-items: center; }
.wg--hero { grid-template-columns: 1.2fr 1fr; }
.wg--act { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.wterms { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; font-size: var(--t-xs); }
.wg--bar { display: flex; gap: 1rem; align-items: center; }
.wrows, .wtable, .wquotes, .wsteps, .wfaq, .wform, .wdl { display: grid; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.5rem; gap: 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.wrow span .wl { margin: 0; width: 6rem; }
.warr { color: var(--ink-3); text-align: right; }
.wtr { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.wproof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.wpf { display: grid; gap: .15rem; padding-left: .75rem; border-left: 2px solid var(--ink); font-size: var(--t-sm); }
.wquotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.wq .wl { height: .5rem; }
.wattr { display: block; margin-top: .5rem; }
.wpeople { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.wperson { display: grid; gap: .3rem; font-size: var(--t-sm); }
.wperson .wimg { max-width: 9rem; }
.wsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.wstep { display: grid; gap: .25rem; font-size: var(--t-sm); align-content: start; }
.wstep span { display: flex; gap: .4rem; align-items: center; }
.wstep .wl { margin: 0; }
.wn { font: var(--t-md) var(--display); font-weight: 750; }
.wchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wchip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid var(--ink-2); font-size: var(--t-xs); }
.wchip i { display: inline-block; height: .45rem; background: var(--rule-firm); }
.wopen { display: block; margin-bottom: .6rem; font-size: var(--t-md); }
.wg--hours, .wg--loc, .wg--about, .wg--dates { grid-template-columns: 1fr 1fr; align-items: start; }
.waddr { display: block; margin-bottom: .4rem; }
.wcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.wcard { display: grid; gap: .3rem; font-size: var(--t-sm); }
.wfilters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.wsel { padding: .4rem .7rem; border: 1px solid var(--ink-2); font-size: var(--t-xs); }
.wsel--m { display: none; }
.wfacts-in { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 .7rem; font-size: var(--t-sm); }
.wfacts-in .wl { margin: 0; width: 5rem; }
.wdl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.wdl > span { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--rule); }
.wdl .wl { margin: 0; }
.wgal { display: grid; grid-template-columns: 3fr 1fr; gap: .6rem; }
.wthumbs { display: grid; gap: .6rem; }
.wcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wcal i { aspect-ratio: 1; border: 1px solid var(--rule-firm); }
.wcal i.x { background: var(--paper-3); }
.wbig { display: block; font: 750 3rem/1 var(--display); }
.wfq { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-top: 1px solid var(--rule); }
.wfq .wl { margin: 0; }
.wform { gap: .8rem; max-width: 34rem; }
.wfield { display: grid; gap: .25rem; }
.wfield i { display: block; height: 2.4rem; border: 1px solid var(--ink-2); }
.wfield--t i { height: 5rem; }
.wdrop { display: block; padding: 1rem; border: 1px dashed var(--ink-3); text-align: center; }
.wg--conf { display: grid; gap: .3rem; justify-items: start; max-width: 30rem; }
.wg--cont { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.wg--cont .wls { flex: 1 1 12rem; }
.wlang { font: var(--t-xs) var(--mono); }

/* the narrow frame: order changes, persistent action becomes a bottom bar */
@container wf (max-width: 560px) {
  .wf-mod { order: var(--mo); padding: 1.4rem 1rem 1.2rem; }
  .wf-nav, .wf-fx--act { display: none; }
  .wf-burger { display: inline-block; }
  .wf-site-h { padding: .7rem 1rem; gap: .6rem; }
  .wf-pbar { display: flex; order: 98; position: sticky; bottom: 0; z-index: 3; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--paper); border-top: 1.5px solid var(--ink); }
  .wf-pbar[data-state="ask"] { border-top: 1.5px dashed var(--wf-v); }
  .wf-pbar .wbtn { flex: 1; justify-content: center; }
  .wg--hero, .wg--hours, .wg--loc, .wg--about, .wg--dates { grid-template-columns: 1fr; }
  .wproof { grid-template-columns: 1fr 1fr; }
  .wquotes, .wpeople, .wsteps, .wcards, .wdl { grid-template-columns: 1fr; }
  .wpeople .wperson { grid-template-columns: 4rem 1fr; align-items: center; }
  .wpeople .wperson .wimg { grid-row: span 4; }
  .wpeople .wimg span { display: none; }
  .wsel { display: none; }
  .wsel--m { display: inline-block; }
  .wgal { grid-template-columns: 1fr; }
  .wthumbs { grid-template-columns: repeat(4, 1fr); }
  .wdl > span { grid-template-columns: 6rem 1fr; }
}

/* module logic matrix */
.il-mxwrap { overflow-x: auto; max-width: 100%; }
.il-mxwrap:focus-visible { outline: 2px solid var(--wf-v); outline-offset: 2px; }
.il-matrix { border-collapse: collapse; font-size: var(--t-sm); min-width: 40rem; }
.il-matrix th, .il-matrix td { padding: .35rem .7rem .35rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.il-matrix thead th { font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; vertical-align: bottom; max-width: 7rem; }
.il-matrix tbody th { font-weight: 400; white-space: nowrap; }
.il-role { display: block; margin-top: .5rem; font: var(--t-xs) var(--mono); color: var(--wf-v); }
.il-mx { padding: .2rem 0; min-height: 2rem; font: inherit; font-weight: 650; color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; }
.il-mx.is-hl { box-shadow: inset 0 -2px 0 var(--wf-v); }
.il-mk { display: inline-block; font: var(--t-xs) var(--mono); padding: .05rem .4rem; border: 1px solid var(--ink-2); white-space: nowrap; }
.il-mk--conditional { border: 1.5px dashed var(--wf-v); }
.il-mk--optional { border-style: dotted; }

.il-vars { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--rule); }
.il-vars li { display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: .5rem 1.25rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.il-vars button { justify-self: start; font-weight: 650; color: var(--ink); }
@media (max-width: 40rem) { .il-vars li { grid-template-columns: 1fr; } }
.il-ev2 { margin-top: 1rem; }

/* ---- revision after first render: drawings on a white sheet, annotations in flow, drawer inspector ---- */
.wf-browser, .ism { --paper: #FFFFFF; --paper-deep: #F2F5F8; --paper-3: #E6EBF1; --ink: #0B0D12; --ink-2: #454C57; --ink-3: #626977; --rule: #DFE4EA; --rule-firm: #B6BEC9; --wf-v: #5B21D6; --wf-wash: #F4F0FF; color: var(--ink); background: var(--paper); }
.ism { padding: 1.5rem 1.5rem 1.75rem; border: 1px solid var(--rule-firm); }
.wf-browser { box-shadow: 0 0 0 1px var(--rule-firm); border: 0; }
.wf-mod { padding-top: 1rem; }
.wf-tag { position: static; margin: 0 0 .35rem; max-width: 100%; }
.wf-dep { margin: 0 0 .9rem; font: var(--t-xs)/1.45 var(--mono); color: var(--wf-v); max-width: 70ch; }
.wf-dep:empty { display: none; }
.wf-mod[data-state="out"] .wf-dep { color: var(--ink-3); }
.wf-root[data-annot="off"] .wf-dep { display: none; }
.wf-root[data-annot="off"] .wf-mod { padding-top: 1.5rem; }
.wf-work { grid-template-columns: minmax(0, 1fr); }
.wf-insp__x { display: none; float: right; min-height: 2.25rem; padding: .2rem .6rem; font: var(--t-xs) var(--mono); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule-firm); cursor: pointer; }
@media (min-width: 100rem) { .wf-work { grid-template-columns: minmax(0, 1fr) 19rem; } }
@media (max-width: 99.99rem) {
  .wf-insp { display: none; position: fixed; right: 1rem; bottom: 1rem; top: auto; z-index: 20; width: min(24rem, calc(100vw - 2rem)); max-height: 55vh; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
  .wf-root.has-sel .wf-insp { display: block; }
  .wf-insp__x { display: inline-block; }
}

/* sitemap: one row on wide screens (scrolls inside its sheet if it must); a vertical tree on narrow ones */
.ism-tree > li > ul { flex-wrap: nowrap; }
.ism-node { min-width: 8.5rem; }
@media (max-width: 52rem) {
  .ism-tree > li > ul { display: block; margin: 1rem 0 0 1rem; padding: 0 0 0 1rem; border-top: 0; border-left: 1px solid var(--wf-v); }
  .ism-tree > li > ul::before { display: none; }
  .ism-tree > li > ul > li { padding: .5rem 0; }
  .ism-tree > li > ul > li::before { left: -1rem; top: 1.6rem; width: 1rem; height: 0; border-left: 0; border-top: 1px solid var(--wf-v); }
  .ism-node, .ism-node--home { max-width: none; min-width: 0; width: 100%; }
}

/* index miniatures: the real drawing, scaled; a picture of a page, not part of this one */
.il-thumb { grid-area: s; display: block; width: 300px; height: 210px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--rule-firm); }
.il-thumb__in { display: block; width: 1200px; transform: scale(.25); transform-origin: 0 0; }
.il-thumb .wf-tag, .il-thumb .wf-dep, .il-thumb .wf-url { display: none; }
.il-thumb .wf-browser { box-shadow: none; max-width: none; }
.il-thumb .wf-mod[data-state="ask"] { background: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, #5B21D6 45%, transparent); }
.il-pick a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 300px; grid-template-areas: "t f s" "e e s" "m m s"; }
.il-pick__m { text-align: left; }
@media (max-width: 60rem) { .il-pick a { grid-template-columns: 1fr; grid-template-areas: "t" "f" "s" "e" "m"; } .il-thumb { width: 100%; max-width: 300px; } }
.il-q-list a { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: .3rem 1rem; align-items: start; }
.il-thumb--page { grid-row: span 2; width: 120px; height: 160px; }
.il-thumb--page .il-thumb__in { width: 1200px; transform: scale(.1); }
@media (max-width: 99.99rem) { .wf-insp { bottom: 4.5rem; } }
.il-q-list .il-thumb--page { grid-area: auto; grid-column: 1; grid-row: 1 / span 2; }
.il-q-list__q, .il-q-list__n { grid-column: 2; }
.wf-url, .wf-site-f .wk { color: var(--ink-2); }
@media (max-width: 48rem) { .wf-tools { position: static; } }

/* =================================================================== v0.2 founder-review pass */
.il-mat { padding: 0 .35rem; border: 1px solid var(--rule-firm); }
.il-mat--reference { border-style: dashed; }
.il-mat--blind-tested, .il-mat--preset { border-color: var(--ink-2); color: var(--ink-2); }
.il-cap { margin: .6rem 0 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-2); max-width: 80ch; }
.il-k { margin: 1rem 0 .3rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-notes--tight > li { padding: .45rem 0; font-size: var(--t-sm); }
.wf-tag__f { padding-left: .4rem; border-left: 1px solid color-mix(in srgb, var(--paper) 50%, transparent); font-style: italic; }

/* miniatures: a real drawing at small scale */
.il-th { display: block; flex: none; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--rule-firm); }
.il-th__in { display: block; transform-origin: 0 0; }
.il-th .wf-tag, .il-th .wf-dep, .il-th .wf-url { display: none; }
.il-th .wf-browser { box-shadow: none; max-width: none; }
.il-th .wf-mod[data-state="ask"] { background: none; box-shadow: inset 0 0 0 3px color-mix(in srgb, #5B21D6 45%, transparent); }
.il-th--desk { width: 300px; height: 210px; } .il-th--desk .il-th__in { width: 1200px; transform: scale(.25); }
.il-th--mob { width: 110px; height: 210px; } .il-th--mob .il-th__in { width: 390px; transform: scale(.282); }
.il-th--page { width: 160px; height: 210px; } .il-th--page .il-th__in { width: 1000px; transform: scale(.16); }
.il-th--map { width: 300px; height: 150px; } .il-th--map .il-th__in { width: 1250px; transform: scale(.24); }
.il-th--map .ism { border: 0; }

/* variants */
.il-vcs { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem 1.5rem; }
.il-vc { display: flex; flex-direction: column; gap: .45rem; }
.il-vc__dims { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; }
.il-vc__dims span { font: var(--t-xs) var(--mono); color: var(--paper); background: var(--brand); padding: 0 .35rem; }
.il-vc__t { margin: 0; font-family: var(--display); font-size: var(--t-md); font-weight: 750; letter-spacing: -.01em; }
.il-vc__a { margin: 0; font-size: var(--t-sm); } .il-vc__a span, .il-vc__b { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-vc__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-vc__pages s { color: var(--ink-3); }
.il-vc__n { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.il-vc__b { margin: 0; }
.il-vc__go { align-self: flex-start; min-height: 2.5rem; padding: .35rem .75rem; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-firm); cursor: pointer; }
.il-vc__go[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.il-more { margin: .5rem 0; border-top: 1px solid var(--rule); }
.il-more > summary { cursor: pointer; padding: .7rem 0; font-weight: 650; min-height: 2.75rem; display: flex; align-items: center; }

/* desktop + phone pairs */
.il-pair { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.il-pair figure { margin: 0; } .il-pair figcaption { margin-top: .4rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-pair .il-notes { flex: 1 1 18rem; border-top: 0; }
.il-pair--big > figure.wf { flex: 1 1 36rem; min-width: 0; }

/* boundary cases */
.il-bthumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.il-bthumbs a { display: flex; flex-direction: column; gap: .35rem; text-decoration: none; color: var(--ink); }
.il-bthumbs b { font-weight: 700; } .il-bthumbs span:not(.il-th):not(.il-th__in) { font-size: var(--t-sm); color: var(--ink-2); }
.il-bthumbs a:hover b { text-decoration: underline; }
.il-bcases { list-style: none; margin: 0; padding: 0; }
.il-bc { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 2rem; padding: 2rem 0 2.5rem; border-top: 2px solid var(--ink); scroll-margin-top: 1rem; }
@media (max-width: 64rem) { .il-bc { grid-template-columns: 1fr; } }
.il-bc .il-h2 { font-size: var(--t-lg); }
.il-routes { list-style: none; margin: 0 0 1rem; padding: 0; }
.il-routes li { display: grid; gap: .1rem; padding: .6rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.il-routes a { font-weight: 700; } .il-routes i { font-style: normal; color: var(--ink-2); }
.il-bc__r { font: var(--t-xs) var(--mono); color: var(--ink-3); } .il-bc__n { font-size: var(--t-sm); line-height: 1.5; }
.il-bc__w { min-width: 0; }

/* specimen steps and handoff flow */
.il-steps, .il-flow { list-style: none; margin: 0; padding: 0; }
.il-step, .il-flow__s { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--rule-firm); }
.il-step__n, .il-flow__n { margin: 0; font: 750 var(--t-lg)/1 var(--display); color: var(--brand); }
.il-flow__n { font: var(--t-xs) var(--mono); padding-top: .5rem; }
.il-flow__s { grid-template-columns: 6rem minmax(0, 1fr); position: relative; }
.il-quote { margin: 0 0 1rem; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--brand); max-width: 64ch; }
.il-quote p { margin: 0 0 .4rem; font-family: var(--display); font-size: var(--t-md); line-height: 1.4; }
.il-quote--sm p { font-size: var(--t-base); }
.il-quote cite { font: var(--t-xs) var(--mono); color: var(--ink-3); font-style: normal; }
.il-read, .il-dec, .il-open, .il-reads { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.il-read li, .il-dec li, .il-reads li { padding: .5rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); line-height: 1.45; }
.il-read b, .il-dec b, .il-reads b { display: inline-block; min-width: 11rem; font-weight: 650; }
.il-read i { display: block; font-style: normal; font-family: var(--mono); font-size: var(--t-xs); color: var(--brand); }
.il-dec span { display: block; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-open li { padding: .3rem 0 .3rem 1rem; border-left: 1.5px dashed var(--brand); margin: .3rem 0; font-size: var(--t-sm); }
.il-md { max-height: 24rem; overflow: auto; padding: 1rem; background: var(--paper-deep); border: 1px solid var(--rule); font: var(--t-xs)/1.5 var(--mono); white-space: pre-wrap; }

/* the IA file, drawn */
.iaf-wrap { max-width: 72rem; }
.iaf-sheet { --paper: #FFFFFF; --paper-deep: #F2F5F8; --ink: #0B0D12; --ink-2: #454C57; --ink-3: #626977; --rule: #DFE4EA; --rule-firm: #B6BEC9; color: var(--ink); background: var(--paper); box-shadow: 0 0 0 1px var(--rule-firm); padding: 1.25rem 1.4rem 1.5rem; font-size: var(--t-sm); line-height: 1.45; }
.iaf-sheet ul, .iaf-sheet ol { list-style: none; margin: 0; padding: 0; }
.iaf-top { padding-bottom: .8rem; border-bottom: 2px solid var(--ink); margin-bottom: 1rem; }
.iaf-k { margin: .9rem 0 .35rem; font: var(--t-xs) var(--mono); color: #5B21D6; }
.iaf-top .iaf-k { margin-top: 0; }
.iaf-t { margin: 0; font: 750 var(--t-lg)/1.1 var(--display); letter-spacing: -.02em; }
.iaf-m { margin: .2rem 0 0; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.iaf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 2rem; }
.iaf-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-top: 1px solid var(--rule); }
.iaf-facts span { color: var(--ink-2); } .iaf-facts li.is-open b { color: #5B21D6; font-weight: 400; font-family: var(--mono); font-size: var(--t-xs); }
.iaf-act { border-left: 3px solid #5B21D6; padding-left: 1rem; }
.iaf-act__l { margin: 0; font: 750 var(--t-md)/1.2 var(--display); }
.iaf-act p { margin: 0 0 .25rem; }
.iaf-s { font: var(--t-xs) var(--mono); font-style: normal; color: var(--ink-3); border: 1px solid var(--rule-firm); padding: 0 .3rem; }
.iaf-s--depends { color: #5B21D6; border: 1px dashed #5B21D6; }
.iaf-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.iaf-page { border-top: 2px solid var(--ink); padding-top: .5rem; }
.iaf-page.is-dep { border-top: 2px dashed #5B21D6; }
.iaf-page__n { margin: 0 0 .4rem; font-weight: 700; } .iaf-page__n span { font: var(--t-xs) var(--mono); color: var(--ink-2); font-weight: 400; }
.iaf-page ol li { padding: .3rem .45rem; margin-bottom: .25rem; border: 1px solid var(--ink-2); font-size: var(--t-xs); }
.iaf-page ol li.is-dep { border: 1px dashed #5B21D6; } .iaf-page ol li.is-opt { border-style: dotted; }
.iaf-page ol li span, .iaf-page ol li em { display: block; font-family: var(--mono); color: var(--ink-3); font-style: normal; }
.iaf-ent li, .iaf-dec li, .iaf-q li, .iaf-out li, .iaf-frame li { padding: .3rem 0; border-top: 1px solid var(--rule); }
.iaf-dec span { display: block; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.iaf-out s { color: var(--ink-3); }
.iaf-hand { margin-top: 1.2rem; padding-top: .8rem; border-top: 2px solid var(--ink); display: grid; gap: .4rem; }
.iaf-hand p { margin: 0; } .iaf-hand b { display: inline-block; min-width: 6.5rem; font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: #5B21D6; }
.iaf-wrap--sm { display: block; max-height: 28rem; overflow: hidden; }

/* evidence disclosure */
.il-ev { border-top: 2px solid var(--ink); padding-top: .25rem; }
.il-ev > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: .8rem 0; cursor: pointer; }
.il-ev > summary .il-h2 { margin: 0; display: inline; }
.il-ev__n { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-ev[open] > summary { margin-bottom: 1rem; }

/* review */
.il-rv-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.il-rv-sites a, .il-rv-pages a { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--ink); }
.il-rv__t { font: 750 var(--t-md)/1.2 var(--display); display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.il-rv__t .il-mat { font: var(--t-xs) var(--mono); color: var(--ink-3); font-weight: 400; }
.il-rv__row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.il-rv__k { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-rv-pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.75rem 1.25rem; }
.il-rv-pages b { font-weight: 700; }
.il-rv-vars { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.il-rv-vars li { display: flex; flex-direction: column; gap: .3rem; flex: none; width: 300px; }
.il-rv-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink); }
.il-rv-arrow { font: 750 var(--t-lg) var(--display); color: var(--brand); }
.il-rv-brief { max-width: 20rem; font-family: var(--display); line-height: 1.4; }
.il-rv-art { display: block; text-decoration: none; color: inherit; }
.il-rv-cov { margin-bottom: 1.25rem; max-width: 60ch; }

/* text audit bars */
.il-ab { list-style: none; margin: 0; padding: 0; max-width: 64rem; }
.il-ab li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: .2rem 1.25rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.il-ab__l { font-size: var(--t-sm); font-weight: 650; }
.il-ab__b { position: relative; display: flex; height: .8rem; }
.il-ab__b i { display: block; height: 100%; }
.il-ab__b .o { position: absolute; left: 0; top: -3px; height: calc(100% + 6px); border: 1px dashed var(--ink-3); }
.il-ab__b .p { background: var(--ink); } .il-ab__b .a { background: var(--brand); opacity: .55; }
.il-ab__n { grid-column: 2; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-key { display: inline-block; width: 1rem; height: .6rem; margin: 0 .3rem 0 .8rem; vertical-align: 0; }
.il-key--o { border: 1px dashed var(--ink-3); } .il-key--p { background: var(--ink); } .il-key--a { background: var(--brand); opacity: .55; }
.il-tbl--audit td, .il-tbl--audit th { font-size: var(--t-xs); }
@media (max-width: 40rem) { .il-ab li { grid-template-columns: 1fr; } .il-ab__n { grid-column: 1; } }
.il-th .wf-pbar { position: static; }
.il-bc { display: block; }
.il-bc__q { max-width: 60rem; margin-bottom: 1.5rem; }
.il-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 2rem; }
.il-read b, .il-dec b, .il-reads b { margin-right: .5rem; }
.il-sv--n, .il-sv--u { color: var(--ink-3); } .il-sv--p { color: var(--ink-2); font-style: italic; }
.il-rv-vars:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 30rem) { .il-th--desk { width: 100%; max-width: 300px; } .il-th--map { width: 100%; max-width: 300px; } .il-meta { flex-wrap: wrap; white-space: normal; } .il-b, .il-cite, .il-claim { white-space: normal; } }
@media (max-width: 40rem) { .il-flow__s, .il-step { grid-template-columns: minmax(0, 1fr); gap: .4rem; } }
.il-th--file { width: min(100%, 560px); height: 380px; } .il-th--file .il-th__in { width: 1100px; transform: scale(.5); }
.iaf-route { margin: -.3rem 0 .4rem; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.iaf-rule { display: block; margin-top: .2rem; padding: .1rem .3rem; font: var(--t-xs) var(--mono); font-style: normal; color: #5B21D6; background: #F4F0FF; }
.iaf-eff li { padding: .25rem 0 .25rem .6rem; border-left: 2px solid #5B21D6; margin: .25rem 0; }
.iaf-eff li.is-na { border-left-style: dashed; color: var(--ink-3); }
.iaf-eff span { display: block; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.ism-node__r { font: var(--t-xs) var(--mono); color: var(--wf-v); }
.wf-mnote { display: none; margin: 0 0 .8rem; padding: .3rem .5rem; font: var(--t-xs)/1.45 var(--mono); color: var(--wf-v); border-left: 2px solid var(--wf-v); background: var(--wf-wash); max-width: 46ch; }
@container wf (max-width: 560px) { .wf-mnote { display: block; } }
.wf-rule { margin: 0 0 .8rem; padding: .3rem .5rem; font: var(--t-xs)/1.45 var(--mono); color: var(--paper); background: var(--wf-v); max-width: 60ch; }
.wf-root[data-annot="off"] .wf-mnote, .il-th .wf-mnote, .il-th .wf-rule { display: none; }
.il-phonefig { margin: 0; }
.il-phoneframe { width: 392px; max-width: 100%; height: 760px; overflow-y: auto; overflow-x: hidden; border: 6px solid var(--ink-3); border-radius: 22px; background: #fff; }
.il-phoneframe .wf-browser { max-width: none; box-shadow: none; }
.il-phoneframe:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.il-eq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin: 0 0 3rem; padding: 1.25rem; border: 1px solid var(--rule-firm); }
.il-eq figure { margin: 0; display: flex; flex-direction: column; gap: .4rem; width: 300px; max-width: 100%; }
.il-eq figcaption { font: var(--t-xs)/1.45 var(--mono); color: var(--ink-2); }
.il-eq__k { font: var(--t-xs) var(--mono); color: var(--brand); }
.il-eq__op { align-self: center; font: 750 var(--t-xl) var(--display); color: var(--brand); }
.il-eq__rules { margin: 0; padding: .6rem .8rem; list-style: none; background: var(--brand); color: var(--paper); font-size: var(--t-sm); line-height: 1.4; min-height: 210px; }
.il-eq__rules li { padding: .25rem 0; border-bottom: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); }
.il-eq__brief { margin: 0; padding: .7rem .8rem; border-left: 3px solid var(--brand); font-family: var(--display); line-height: 1.4; min-height: 210px; }
.il-before { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; }
.il-before figure { margin: 0; display: grid; gap: .4rem; }
.il-crop { max-height: 620px; overflow: hidden; }
.il-eff { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: 72ch; }
.il-eff li { padding: .5rem 0 .5rem .8rem; border-left: 3px solid var(--brand); margin: .4rem 0; font-size: var(--t-sm); line-height: 1.45; }
.il-eff li.is-na { border-left-style: dashed; color: var(--ink-2); }
.il-eff span { display: block; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-eff i { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-2); }

/* ===== final readiness pass ===== */
.il-terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem 1.5rem; }
.il-terms li { display: grid; grid-template-columns: 3.25rem 1fr; grid-auto-rows: min-content; column-gap: .8rem; font-size: var(--t-sm); line-height: 1.45; }
.il-terms b { grid-column: 2; font-weight: 700; font-size: var(--t-base); }
.il-terms span:not(.il-gl):not(.il-term__sub) { grid-column: 2; color: var(--ink-2); }
.il-term__sub { grid-column: 2; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.il-gl { grid-row: 1 / span 3; position: relative; width: 3.25rem; height: 3.25rem; border: 1px solid var(--rule-firm); background: var(--paper); }
.il-gl i { position: absolute; display: block; border: 1px solid var(--ink-2); }
.il-gl--site i:nth-child(1) { left: 1.2rem; top: .35rem; width: .8rem; height: .55rem; }
.il-gl--site i:nth-child(2) { left: .35rem; top: 1.7rem; width: .8rem; height: .55rem; }
.il-gl--site i:nth-child(3) { left: 2rem; top: 1.7rem; width: .8rem; height: .55rem; }
.il-gl--page i { left: .9rem; width: 1.45rem; height: .45rem; } .il-gl--page i:nth-child(1) { top: .45rem; height: .8rem; } .il-gl--page i:nth-child(2) { top: 1.45rem; } .il-gl--page i:nth-child(3) { top: 2.15rem; }
.il-gl--mod i { left: .45rem; width: 2.35rem; height: .45rem; border-color: var(--rule-firm); } .il-gl--mod i:nth-child(1) { top: .6rem; } .il-gl--mod i:nth-child(2) { top: 1.35rem; border: 2px solid var(--brand); } .il-gl--mod i:nth-child(3) { top: 2.1rem; }
.il-gl--var i { top: .5rem; width: 1.15rem; height: 2.2rem; } .il-gl--var i:nth-child(1) { left: .35rem; } .il-gl--var i:nth-child(2) { left: 1.75rem; border-style: dashed; border-color: var(--brand); } .il-gl--var i:nth-child(3) { display: none; }
.il-gl--rule i { left: .45rem; width: 2.35rem; height: .45rem; } .il-gl--rule i:nth-child(1) { top: .6rem; } .il-gl--rule i:nth-child(2) { top: 1.35rem; background: var(--brand); border-color: var(--brand); } .il-gl--rule i:nth-child(3) { top: 2.1rem; }
.il-gl--plan i:nth-child(1) { left: .7rem; top: .35rem; width: 1.85rem; height: 2.5rem; border-top-width: 3px; } .il-gl--plan i:nth-child(2) { left: 1.05rem; top: 1.2rem; width: 1.15rem; height: 0; } .il-gl--plan i:nth-child(3) { left: 1.05rem; top: 1.8rem; width: 1.15rem; height: 0; }
.il-gl--code i { display: none; } .il-gl--code::after { content: "{ }"; position: absolute; inset: 0; display: grid; place-items: center; font: var(--t-sm) var(--mono); color: var(--ink-2); }
.il-stage { max-width: 76rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-firm); }
.il-stage__ex { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.5rem; }
.il-stage__ex figure { margin: 0; display: grid; gap: .4rem; }
.il-stage__ex figcaption { font: var(--t-xs) var(--mono); color: var(--ink-2); max-width: 300px; }
.il-stage__ex .il-th--file { width: 300px; height: 210px; } .il-stage__ex .il-th--file .il-th__in { transform: scale(.2727); }
.il-stage__k { margin: 0 0 .8rem; font-weight: 700; }
.il-stage__picks { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
.il-stage__picks a { display: grid; gap: .3rem; text-decoration: none; color: var(--ink); }
.il-stage__picks .il-th--desk { width: 100%; max-width: 300px; height: 150px; }
.il-stage__picks b { font-weight: 700; } .il-stage__picks span:not(.il-th):not(.il-th__in) { font-size: var(--t-sm); color: var(--ink-2); }
.il-stage__picks a:hover b { text-decoration: underline; }
.il-stage__more { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; } .il-stage__more a { font-weight: 650; padding-block: .3rem; }
.il-toc { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 2.5rem; padding: .7rem 0; border-block: 1px solid var(--rule); font: var(--t-xs) var(--mono); }
.il-toc a { padding-block: .25rem; }
.il-sheet-note { margin-bottom: .8rem; font: var(--t-xs) var(--mono); color: var(--ink-2); }
.il-chk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .2rem 1rem; }
.il-chk li { font-size: var(--t-xs); line-height: 1.4; } .il-chk li.ok b { color: var(--ink); } .il-chk li.note b { color: var(--brand); } .il-chk span { color: var(--ink-2); }
.il-ready { min-width: 0; width: 100%; }
.il-block { margin: 0; padding: 0; list-style: none; counter-reset: b; max-width: 72ch; }
.il-block li { counter-increment: b; display: grid; grid-template-columns: 2rem 1fr; gap: .1rem .5rem; padding: .7rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); line-height: 1.45; }
.il-block li::before { content: counter(b); grid-row: span 2; font: 750 var(--t-md) var(--display); color: var(--brand); }
.il-block b { font-weight: 700; } .il-block span { color: var(--ink-2); }
.il-rv-rules { max-width: 16rem; padding: .6rem .8rem; background: var(--brand); color: var(--paper); font-size: var(--t-xs); line-height: 1.5; }
@container wf (max-width: 560px) { .wg--hero .wimg { aspect-ratio: 16 / 7; } .wg--loc .wimg, .wg--about .wimg { aspect-ratio: 16 / 7; } }
.il-phonefig { min-width: 0; max-width: 100%; }
.il-eq figure { width: min(300px, 100%); } .il-eq .il-th--desk { width: 100%; max-width: 300px; }
.il-vc__pages { margin: 0; font: var(--t-xs) var(--mono); color: var(--ink-3); } .il-vc__pages span { color: var(--ink-2); margin-right: .3rem; } .il-vc__pages s { margin-right: .4rem; }
.il-vc__b { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .il-vc__b .il-vc__go { margin-left: auto; min-height: 2.25rem; padding: .2rem .7rem; }
.il-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.il-matrix .il-mk { border: 0; padding: 0; font-size: var(--t-md); line-height: 1; color: var(--ink); } .il-matrix .il-mk--conditional { color: var(--brand); border: 0; } .il-matrix .il-mk--optional { color: var(--ink-2); }
.il-mxwrap { position: relative; }
@media (max-width: 52rem) {
  .il-tbl--audit, .il-tbl--audit tbody, .il-tbl--audit tr, .il-tbl--audit th, .il-tbl--audit td { display: block; width: auto; }
  .il-tbl--audit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .il-tbl--audit tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); } .il-tbl--audit th, .il-tbl--audit td { border: 0; padding: .15rem 0; }
}

/* release QA (breakfinder): miniatures and their grids never exceed the column they sit in */
.il-vcs, .il-bthumbs, .il-rv-pages { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.il-th--desk, .il-th--map, .il-th--file { max-width: 100%; }
.il-pair figure, .il-bthumbs a, .il-vc { min-width: 0; max-width: 100%; }
.wf-browser .wk, .wf-browser .wyou { overflow-wrap: anywhere; }
.wfacts-in > * { min-width: 0; }
.wf-tag { min-height: 24px; }
/* sitemap: first-level pages share the row (text wraps) instead of overflowing the sheet */
@media (min-width: 52.01rem) {
  .ism-tree > li > ul > li { flex: 1 1 0; min-width: 0; }
  .ism-tree > li > ul > li > .ism-node { min-width: 0; max-width: none; width: 100%; }
  .ism-tree ul ul .ism-node { min-width: 0; max-width: none; }
}
.il-stage__ex figure { min-width: 0; max-width: 100%; }
@media (min-width: 52.01rem) {
  .ism-tree > li > ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ism-tree > li > ul > li { min-width: 0; }
  .ism-node--many { width: calc(100% - 8px) !important; }
}
.ism-node__r, .ism-node__n, .ism-node__s, .ism-node__per { overflow-wrap: anywhere; }
.il-stage__ex figure { grid-template-columns: minmax(0, 1fr); }
.il-stage__ex figcaption { max-width: 100%; }

/* ================================================================ EXPERIMENT: the drawing is the page (.ilx)
   docs/ia-library/PRESENTATION-EXPERIMENT.md. One pattern page only. Hierarchy from order, scale and space;
   no new containers, colours or type. Violet stays the annotation language. */
.ilx-head { margin-bottom: 3.5rem; }
.ilx-head .il-for { margin-bottom: .5rem; }
.ilx-eg { margin: 0 0 1.25rem; font: var(--t-xs) var(--mono); color: var(--ink-3); max-width: 62ch; }
.ilx-whylink { margin: 0; font-size: var(--t-sm); }
.ilx-whylink a { color: var(--ink-2); text-underline-offset: 3px; }
.ilx-whylink a::after { content: " ↓"; }
.ilx-whylink a:hover { color: var(--ink); }

.ilx-sec { margin: 0 0 3.5rem; }
.ilx-h2 { margin: 0; font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; line-height: 1.12; }
.ilx-pages > .ilx-h2 { margin-bottom: 1rem; }
.ilx-job { margin: .5rem 0 1.25rem; color: var(--ink-2); font-size: var(--t-sm); max-width: 70ch; }

/* the lens: one line of text choices, not a grid of cards */
.ilx-lens { margin: 0 0 1.5rem; }
.ilx-lens__k { margin: 0 0 .25rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
.ilx-lens__opts { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.ilx-lens__opts button { min-height: 2.75rem; padding: .25rem 0; font: inherit; font-size: var(--t-sm); color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.ilx-lens__opts button:hover { color: var(--ink); }
.ilx-lens__opts button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--wf-v); }
.ilx-lens__opts button:focus-visible, .ilx-own summary:focus-visible, .ilx-why > summary:focus-visible, .ilx-whylink a:focus-visible { outline: 2px solid var(--wf-v); outline-offset: 2px; }
.ilx-varnote { margin: .5rem 0 0; min-height: 1.45em; font-size: var(--t-sm); color: var(--ink-2); max-width: 75ch; }
.ilx-varnote:empty { min-height: 0; margin: 0; }
.ilx-own { margin: .5rem 0 0; }
.ilx-own summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.ilx-own summary::-webkit-details-marker { display: none; }
.ilx-own[open] summary { color: var(--ink); }
.ilx-own .il-brief { margin-top: .5rem; }
.ilx-pages .wf-legend { margin-top: 1rem; }
.ilx .ism-frame { margin-bottom: 1rem; }

/* the homepage: the largest object on the page; nothing beside it */
.ilx-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; }
.ilx .ilx-tools { position: static; margin: 0; padding: 0; border: 0; background: none; gap: .5rem; }
.ilx-action { display: inline; margin: 0; padding: 0; border: 0; }
.ilx-action b { color: var(--ink); font-weight: 650; }
.ilx-action::before { content: "· "; color: var(--ink-3); }
.ilx-action:empty::before { content: none; }
.ilx-mnotes { display: none; }
.wf-root[data-view="mobile"] .ilx-mnotes { display: inline; color: var(--wf-v); }
.ilx-keys figure.wf { max-width: 50rem; }
.ilx-tabs { margin-top: 1rem; }

/* the inspector is a drawer at every width, shown only once something is selected */
.ilx .wf-work { grid-template-columns: minmax(0, 1fr); }
.ilx .wf-insp { display: none; position: fixed; right: 1rem; bottom: 1rem; top: auto; z-index: 20; width: min(24rem, calc(100vw - 2rem)); max-height: 60vh; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.ilx.has-sel .wf-insp { display: block; }
.ilx .wf-insp__x { display: inline-block; }

/* ready for design: a sentence, four actions, a picture of the file */
.ilx-ready { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; padding-top: 2.5rem; border-top: 1px solid var(--rule-firm); }
/* side by side only when the picture of the file gets a real column */
@media (min-width: 78rem) { .ilx-ready { grid-template-columns: minmax(30rem, 1fr) minmax(0, 1.1fr); } }
.ilx-ready__t p { margin: .75rem 0 1.25rem; color: var(--ink-2); max-width: 40ch; line-height: 1.5; }
.ilx-ready__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.ilx-go { color: var(--paper); background: var(--ink); border-color: var(--ink); font-weight: 650; }
.ilx-go:hover { background: var(--ink-2); border-color: var(--ink-2); }
.ilx-ready .il-copied { min-height: 1.45em; margin: .5rem 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.ilx-crop { height: 22rem; overflow: hidden; }
.ilx-crop .iaf-sheet { min-height: 100%; }
.ilx-crop .iaf-facts { display: none; } /* the picture shows the structure; the brief answers are in Preview */
@media (max-width: 40rem) { .ilx-crop { height: 15rem; } }

.ilx-dlg { width: min(64rem, calc(100vw - 2rem)); max-height: 88vh; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-firm); }
.ilx-dlg::backdrop { background: rgb(0 0 0 / .6); }
.ilx-dlg__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ilx-dlg .iaf-wrap { padding: 1.25rem; max-width: none; }
.ilx-dlg__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0 1.25rem 1rem; }
.ilx-dlg .il-file__pre { padding: 0 1.25rem 1.25rem; }
.ilx-dlg pre { max-height: 30rem; overflow: auto; padding: 1rem; background: var(--paper-deep); border: 1px solid var(--rule); font: var(--t-xs)/1.5 var(--mono); white-space: pre; }

/* why this pattern works: one disclosure for everything that proves the answer */
.ilx-why { margin: 3.5rem 0; border-top: 1px solid var(--rule-firm); border-bottom: 1px solid var(--rule-firm); }
.ilx-why > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; padding: 1.25rem 0; cursor: pointer; list-style: none; }
.ilx-why > summary::-webkit-details-marker { display: none; }
.ilx-why__t { font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; }
.ilx-why__t::after { content: "→"; display: inline-block; margin-left: .4rem; transition: transform .15s; }
.ilx-why[open] .ilx-why__t::after { transform: rotate(90deg); }
.ilx-why__n { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.ilx-why__body { padding: .5rem 0 2rem; max-width: 76rem; }
.ilx-wsec { margin: 0 0 2.5rem; }
.ilx-wsec > p { max-width: 70ch; line-height: 1.5; }
.ilx-wk { margin: 1rem 0 .25rem; font: var(--t-xs) var(--mono); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .ilx-why__t::after { transition: none; } }

@media (max-width: 40rem) {
  .ilx-lens__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: .25rem; }
  .ilx-lens__opts button { flex: none; }
}
.ilx-per { font: var(--t-xs) var(--mono); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.ilx-rule { margin: 1rem 0 0; max-width: 70ch; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.ilx-rule b { color: var(--ink); font-weight: 650; }
.ilx-home > .wf-legend { margin-top: 1rem; }
.ilx-also { margin: .75rem 0 0; font-size: var(--t-sm); }
/* on a phone, "Used by" is a list of names: four stacked thumbnails would outweigh the page's own drawing */
@media (max-width: 40rem) { .ilx-used .il-th { display: none; } .ilx-used .il-bthumbs { gap: .75rem; } }

/* ================================================================ BOARD TEMPLATE (.ilx-b): "the board, then the drawing set"
   render/ia-pattern-board.ts, proposal 2026-10-08, Trades only until approved. House tokens, type and spacing scales
   only (--t-*, --s*); the lilac (--brand) marks state, keys and the selected thing. The one exception is the
   illustration skin (.ilx-concept--*): it is artwork inside a frame, like a room's specimen, and says so on the page. */
.ilx-b { --ilx-gap: var(--s9); }
.ilx-b .ilx-h2 { margin: 0 0 var(--s3); font-size: clamp(var(--t-lg), 3.2vw, var(--t-xl)); letter-spacing: -.03em; line-height: 1.05; }
.ilx-h3 { margin: var(--s7) 0 var(--s4); font-family: var(--display); font-size: var(--t-md); font-weight: 700; letter-spacing: -.012em; line-height: 1.2; }
.ilx-lede { margin: 0 0 var(--s6); max-width: 54ch; font-size: var(--t-md); line-height: 1.45; color: var(--ink-2); }
.ilx-small { margin: 0 0 var(--s4); max-width: 62ch; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
.ilx-small b { color: var(--ink); font-weight: 650; }
.ilx-part { margin: 0 0 var(--ilx-gap); scroll-margin-top: var(--s6); }
.ilx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--s7); }
.ilx-cols > div > .ilx-h3:first-child { margin-top: var(--s7); }

/* pictures of drawings: real width inside, scaled to the box (ia-library.js sets --k) */
.ilx-shot { position: relative; display: block; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px var(--rule-firm); container-type: inline-size; }
/* tan(atan2()) turns two lengths into a ratio: the drawing keeps its real width and scales to the box (as stage-gallery.css) */
.ilx-shot__in { position: absolute; top: 0; left: 0; display: block; width: var(--w, 1200px); transform: scale(tan(atan2(100cqi, var(--w, 1200px)))); transform-origin: 0 0; }
.ilx-shot[data-full] { height: 40rem; }
.ilx-shot .wf-tag, .ilx-shot .wf-dep, .ilx-shot .wf-url, .ilx-shot .wf-mnote, .ilx-shot .wf-rule { display: none; }
.ilx-shot .wf-browser { max-width: none; box-shadow: none; }
.ilx-shot .wf-mod, .ilx-shot .wf-mod.is-hl { background: none; box-shadow: none; }
.ilx-shot .wf-mod[data-state="out"] .wf-draw { opacity: .28; }

/* 1 hero: the board */
.ilx-hero { margin: 0 0 var(--ilx-gap); }
.ilx-hero__h { max-width: 15ch; margin-bottom: var(--s6); }
.ilx-hero__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5) var(--s7); align-items: start; margin: 0 0 var(--s7); }
.ilx-hero__for { margin: 0 0 var(--s3); max-width: 30ch; font-size: var(--t-md); line-height: 1.4; color: var(--ink); }
.ilx-hero__eg { margin: 0; max-width: 46ch; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
.ilx-hero__eg span { color: var(--ink-3); }
.ilx-hero__k { margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--ink-3); }
.ilx-hero__q { margin: 0; max-width: 24ch; font-family: var(--display); font-size: var(--t-lg); font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }
.ilx-status { grid-column: 1 / -1; margin: 0; max-width: 72ch; padding-left: var(--s4); border-left: 2px solid var(--brand); font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
.ilx-hero__fig { display: grid; grid-template-columns: minmax(0, 1fr) clamp(8rem, 20%, 12.5rem); align-items: end; margin: 0; }
.ilx-hero__desk { grid-column: 1; margin-right: calc(-1 * clamp(1.5rem, 5%, 3.5rem)); }
.ilx-tagline { display: block; margin: 0 0 var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.ilx-shot--hero { aspect-ratio: 16 / 10; }
.ilx-hero__phone { position: relative; z-index: 1; grid-column: 2; }
.ilx-hero__phone .ilx-tagline { position: relative; margin: 0; padding: var(--s2) 0 0 var(--s2); margin-left: calc(-1 * var(--s2)); background: var(--paper); }
.ilx-hero__phone .ilx-tagline { color: var(--ink); }
.ilx-shot--phone { aspect-ratio: 390 / 800; outline: 6px solid var(--paper); }
/* the call bar is the pattern's signature: pinned to the bottom of the phone picture, as a phone shows it */
.ilx-shot--phone .wf-pbar { position: absolute; left: 0; right: 0; top: 742px; bottom: auto; }
.ilx-hero__fig figcaption { grid-column: 1; margin-top: var(--s5); max-width: 62ch; font: var(--t-xs)/1.55 var(--mono); color: var(--ink-3); }
.ilx-jump { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: var(--s7) 0 var(--s2); }
.ilx-jump a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-sm); color: var(--ink); text-underline-offset: 4px; }
.ilx-jump a:hover { color: var(--brand); }
.ilx-depth { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
@media (max-width: 52rem) {
  .ilx-hero__text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .ilx-hero__fig { display: block; }
  .ilx-hero__desk { margin-right: 0; }
  .ilx-hero__phone { width: 52%; margin: calc(-1 * var(--s8)) 0 0 auto; }
  .ilx-hero__phone .ilx-tagline { position: static; }
  .ilx-hero__fig figcaption { margin-top: var(--s4); }
}

/* the illustration skins: one palette per pattern over the same drawing (artwork inside a frame, labelled on the page).
   Each picks a register from the trade itself, not from a category stereotype: van livery for trades, ledger green for
   advisers, wine and plaster for a café-bar, a signboard red for an agent, gallery white for a studio, a signal orange
   for a product. Raw colours live here only, as the specimen rooms keep theirs. */
.ilx-concept .wf-browser { --c-head: var(--ink); --c-head-ink: #FFFFFF; --c-head-ink-2: #D5D8DD; --c-on: #FFFFFF; --c-photo-ink: #C7CCD3; --c-h1w: 800; }
.ilx-concept--local-trade .wf-browser { --paper: #FFFFFF; --paper-deep: #F3F1EC; --paper-3: #E8E4DA; --ink: #111418; --ink-2: #3E444D; --ink-3: #6B717A; --rule: #E4E0D6; --rule-firm: #CFC9BC; --wf-v: #111418; --c-acc: #FFD23F; --c-on: #111418; --c-photo: #2A3037; }
.ilx-concept--practice .wf-browser { --paper: #FFFFFF; --paper-deep: #F2F1EB; --paper-3: #E5E3DA; --ink: #15211C; --ink-2: #3F4A45; --ink-3: #69736E; --rule: #E2E0D8; --rule-firm: #C9C6BB; --wf-v: #15211C; --c-acc: #1E5A44; --c-photo: #38463F; --c-h1w: 700; }
.ilx-concept--local-venue .wf-browser { --paper: #FBF7F1; --paper-deep: #F1E7DA; --paper-3: #E6D8C6; --ink: #2B1517; --ink-2: #5A3F3F; --ink-3: #85696A; --rule: #EADCCB; --rule-firm: #D4C0A9; --wf-v: #2B1517; --c-head: #5B1A24; --c-head-ink-2: #EBD7D2; --c-acc: #8E2433; --c-photo: #4B2D2B; --c-photo-ink: #E5CFC8; }
.ilx-concept--listings .wf-browser { --paper: #FFFFFF; --paper-deep: #EEF1EC; --paper-3: #DFE4DD; --ink: #1A1F1B; --ink-2: #434B45; --ink-3: #6B746E; --rule: #E1E5E0; --rule-firm: #C4CBC4; --wf-v: #1A1F1B; --c-head: #FFFFFF; --c-head-ink: #1A1F1B; --c-head-ink-2: #434B45; --c-acc: #C8402A; --c-photo: #6A7A6C; --c-photo-ink: #F1F4F0; }
.ilx-concept--portfolio .wf-browser { --paper: #FFFFFF; --paper-deep: #F3F3F1; --paper-3: #E4E4E1; --ink: #0B0B0B; --ink-2: #444444; --ink-3: #737373; --rule: #E6E6E3; --rule-firm: #CCCCC8; --wf-v: #0B0B0B; --c-head: #FFFFFF; --c-head-ink: #0B0B0B; --c-head-ink-2: #444444; --c-acc: #0B0B0B; --c-photo: #9A9892; --c-photo-ink: #FFFFFF; --c-h1w: 600; }
.ilx-concept--saas .wf-browser { --paper: #FFFFFF; --paper-deep: #F5F4F0; --paper-3: #E7E5DE; --ink: #101114; --ink-2: #41444C; --ink-3: #6C707A; --rule: #E6E4DE; --rule-firm: #CDCAC1; --wf-v: #101114; --c-head: #FFFFFF; --c-head-ink: #101114; --c-head-ink-2: #41444C; --c-acc: #F25C05; --c-on: #101114; --c-photo: #E9E6DE; --c-photo-ink: #41444C; }
.ilx-concept .wf-site-h { padding: 1.1rem 2.25rem; color: var(--c-head-ink); background: var(--c-head); border-bottom: 1px solid var(--rule); font-size: 1rem; }
.ilx-concept .wf-site-h b { font-size: 1.15rem; letter-spacing: -.01em; }
.ilx-concept .wf-nav { gap: 1.5rem; color: var(--c-head-ink-2); }
.ilx-concept .wf-fx { color: var(--c-head-ink); border-color: var(--c-head-ink-2); outline: 0; }
.ilx-concept .wf-fx--act, .ilx-concept .wbtn--p { color: var(--c-on); background: var(--c-acc); border-color: var(--c-acc); }
.ilx-concept .wf-fx--act { padding: .45rem .9rem; font-size: .9rem; }
.ilx-concept .wf-mod { padding: 2.6rem 2.25rem; }
.ilx-concept .wg--hero { grid-template-columns: 1.15fr 1fr; gap: 2.75rem; }
.ilx-concept .wh--1 { max-width: 12ch; font-size: 4.25rem; font-weight: var(--c-h1w); line-height: .97; letter-spacing: -.04em; }
.ilx-concept .wh--3 { font-size: 1.75rem; letter-spacing: -.025em; }
.ilx-concept .wsub { font-size: 1.3rem; }
.ilx-concept .wimg { background: var(--c-photo); border: 0; }
.ilx-concept .wimg::before, .ilx-concept .wimg::after { display: none; }
.ilx-concept .wimg span { color: var(--c-photo-ink); background: none; font-size: .8rem; }
.ilx-concept .wbtn { min-height: 3.4rem; padding: .6rem 1.7rem; font-size: 1.1rem; border-width: 2px; }
.ilx-concept .wbtn--s { background: transparent; }
.ilx-concept .wf-mod[data-m="action"] { background: var(--paper-deep); }
.ilx-concept .wyou { text-decoration: none; color: inherit; font-weight: 650; }
.ilx-concept .wl, .ilx-concept .wchip i { background: var(--paper-3); }
.ilx-concept .wchip { padding: .55rem .95rem; font-size: .95rem; border: 1.5px solid var(--ink); }
.ilx-concept .wn { color: var(--c-on); background: var(--c-acc); padding: 0 .45rem; justify-self: start; }
.ilx-concept .wpf { border-left-color: var(--c-acc); border-left-width: 4px; }

/* 2 explore: the lens, the board, the routes, the gallery */
.ilx-b .ilx-lens { margin: 0 0 var(--s5); }
.ilx-b .ilx-lens__k { font-size: var(--t-sm); font-family: var(--ui); color: var(--ink-3); }
.ilx-b .ilx-lens__opts button[aria-pressed="true"] { border-bottom-color: var(--brand); }
.ilx-board { margin: 0 0 var(--s4); }
.ilx-map__frame { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s5); font-size: var(--t-sm); }
.ilx-map__frame span { color: var(--ink-3); }
.ilx-map__frame b { padding: var(--s1) var(--s3); font-weight: 650; border: 1.5px dashed var(--brand); }
.ilx-map__frame b[data-state="in"] { border-style: solid; border-color: var(--ink-2); }
.ilx-map__frame b[data-state="out"] { color: var(--ink-3); border-color: var(--rule-firm); text-decoration: line-through; }
.ilx-map__tree, .ilx-map__kids { margin: 0; padding: 0; list-style: none; }
.ilx-map__li { position: relative; }
.ilx-map__tree > .ilx-map__li > .ilx-map__kids { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s4); align-items: start; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--brand); }
.ilx-map__tree > .ilx-map__li > .ilx-map__kids::before { content: ""; position: absolute; left: var(--s6); top: calc(-1 * var(--s5) - 1px); height: var(--s5); border-left: 1px solid var(--brand); }
.ilx-map__li--d1 > .ilx-map__kids { display: grid; gap: var(--s2); margin: var(--s2) 0 0 var(--s5); padding: var(--s2) 0 0 var(--s4); border-left: 1px solid var(--brand); }
.ilx-node { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); width: 100%; padding: var(--s3) var(--s4) var(--s4); font: inherit; text-align: left; color: var(--ink); background: var(--paper-deep); border: 1.5px solid var(--ink-2); cursor: pointer; }
@media (min-width: 40rem) { .ilx-map__li--d1 > .ilx-node { min-height: 8.5rem; } }
.ilx-node--home { max-width: 26rem; height: auto; padding: var(--s4) var(--s5) var(--s5); border-width: 2px; border-color: var(--ink); }
.ilx-node__n { font-family: var(--display); font-weight: 700; line-height: 1.2; }
.ilx-node--home .ilx-node__n { font-size: var(--t-lg); letter-spacing: -.02em; }
.ilx-node__j { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.ilx-node__s { margin-top: auto; padding-top: var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.ilx-node[data-state="ask"], .ilx-node[data-state="optional"] { border: 1.5px dashed var(--brand); }
.ilx-node[data-state="out"] { color: var(--ink-3); background: transparent; border: 1px solid var(--rule-firm); }
.ilx-node[data-state="out"] .ilx-node__n { text-decoration: line-through; }
.ilx-node[data-state="out"] .ilx-node__j { color: var(--ink-3); }
.ilx-node--proposed { border: 1.5px dotted var(--ink-3) !important; }
.ilx-node--many { box-shadow: 5px 5px 0 -1.5px var(--paper), 5px 5px 0 0 var(--rule-firm); }
.ilx-node:hover { background: var(--brand-wash); }
.ilx-node[aria-pressed="true"] { background: var(--brand-wash); outline: 2px solid var(--brand); outline-offset: 2px; }
.ilx-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.ilx-detail { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--rule-firm); }
.ilx-detail__pg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5) var(--s6); align-items: start; }
.ilx-detail__pg[hidden] { display: none; }
@media (max-width: 52rem) { .ilx-detail__pg { grid-template-columns: minmax(0, 1fr); } }
.ilx-detail__h { margin: 0 0 var(--s2); font-family: var(--display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.ilx-detail__q { margin: 0 0 var(--s4); font-size: var(--t-md); line-height: 1.35; }
.ilx-detail__dl { margin: 0; }
.ilx-detail__dl div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.ilx-detail__dl dt { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.ilx-detail__dl dd { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.ilx-detail__dl code { font: var(--t-xs) var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.ilx-detail__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin: var(--s4) 0 0; font-size: var(--t-sm); }
.ilx-b .wf-legend { margin: var(--s5) 0 0; }
.ilx-routes { margin-top: var(--s7); }
.ilx-routes .ilx-h3 { margin-top: 0; }
.ilx-routes__list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); max-width: 70ch; }
.ilx-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.ilx-route span { font-weight: 650; color: var(--ink); }
.ilx-route i { font-style: normal; color: var(--brand); }

/* galleries: the shared gallery (render/stage-gallery.ts, stage-gallery.css); only what this page adds */
.ilx-b .ilx-gal { margin: var(--s8) 0 0; }
.ilx-b .ilx-gal .stg-gal__h { font-size: var(--t-md); }
.ilx-b #ilx-related .stg-gal__h { font-family: var(--display); font-size: clamp(var(--t-lg), 3.2vw, var(--t-xl)); letter-spacing: -.03em; }
.ilx-gal .stg-gal__card { position: relative; }
.ilx-card__s { display: block; font: var(--t-xs)/1.35 var(--mono); color: var(--ink-2); }
.ilx-card__go { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: var(--s2); padding: 0; font: 650 var(--t-sm)/1.2 var(--ui); color: var(--ink); background: none; border: 0; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 4px; cursor: pointer; }
.ilx-card__go::after { content: ""; position: absolute; inset: 0; }
.ilx-card__go:focus-visible { outline: 0; }
.stg-gal__card:has(.ilx-card__go:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.stg-gal__card:has(.ilx-card__go):hover { border-color: var(--rule-firm); }
.stg-gal__card:has(.ilx-card__go):hover .stg-gal__t { color: var(--brand); }
.stg-gal__card:has([data-card][data-state="out"]) { opacity: .5; }
.stg-gal__card:has([data-card][data-state="out"]) .stg-gal__t { text-decoration: line-through; }
.ilx-detail__pv .stg-gal__media { aspect-ratio: 16 / 10; border: 0; box-shadow: 0 0 0 1px var(--rule-firm); }
.ilx-badge { display: inline-block; margin-right: var(--s2); padding: 0 var(--s2); font: 700 var(--t-xs)/1.75 var(--ui); color: var(--ink); border: 1px solid var(--ink-2); vertical-align: 1px; }

/* 3 why it works */
.ilx-big { margin: var(--s5) 0 var(--s5); max-width: 26ch; font-family: var(--display); font-size: clamp(var(--t-lg), 3.4vw, var(--t-xl)); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; }
.ilx-leads { margin: 0; max-width: 54ch; font-size: var(--t-md); line-height: 1.45; color: var(--ink-2); }
.ilx-leads span { display: block; margin-bottom: var(--s1); font-size: var(--t-sm); color: var(--ink-3); }
.ilx-keyed { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--s5) var(--s7); align-items: start; }
.ilx-keyed__draw { position: sticky; top: var(--s6); }
.ilx-shot--anno .wf-body { counter-reset: m; }
.ilx-shot--anno .wf-mod { counter-increment: m; }
.ilx-shot--anno .wf-mod::before { content: counter(m); position: absolute; top: 1.1rem; left: -.1rem; z-index: 3; min-width: 4.2rem; padding: .2rem .7rem; font: 800 3rem/1.15 var(--display); text-align: center; color: #FFFFFF; background: #5B21D6; }
.ilx-keyed__notes { margin: 0; padding: 0; list-style: none; counter-reset: n; }
.ilx-keyed__notes li, .ilx-keyed__frame li { position: relative; padding: var(--s3) 0 var(--s3) var(--s7); border-top: 1px solid var(--rule); }
.ilx-keyed__notes li { counter-increment: n; }
.ilx-keyed__notes li::before { content: counter(n); position: absolute; left: 0; top: var(--s3); min-width: 1.75rem; font: 750 var(--t-sm)/1.65 var(--display); text-align: center; color: var(--paper); background: var(--brand); }
.ilx-keyed__notes b, .ilx-keyed__frame b { font-weight: 700; }
.ilx-keyed__need { font: var(--t-xs) var(--mono); color: var(--ink-3); }
.ilx-keyed__notes p, .ilx-keyed__frame p { margin: var(--s1) 0 0; max-width: 60ch; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.ilx-keyed__frame { grid-column: 2; }
.ilx-keyed__fk { margin: var(--s4) 0 var(--s2); font-size: var(--t-sm); color: var(--ink-3); }
.ilx-keyed__frame ul { margin: 0; padding: 0; list-style: none; }
.ilx-keyed__frame li::before { content: ""; position: absolute; left: .8rem; top: var(--s3); bottom: var(--s3); border-left: 2px dashed var(--brand); }
@media (max-width: 52rem) {
  .ilx-keyed { grid-template-columns: minmax(0, 1fr); }
  .ilx-keyed__draw { position: static; max-width: 22rem; }
  .ilx-keyed__frame { grid-column: auto; }
}

/* 4 make it yours */
.ilx-fixed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s5) var(--s6); }
.ilx-fixed > div:nth-child(2):not(:last-child) ul, .ilx-fixed > div:only-child ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); column-gap: var(--s5); }
.ilx-fixed > div:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 52rem) { .ilx-fixed { grid-template-columns: minmax(0, 1fr); } }
.ilx-fixed .ilx-h3 { margin-top: 0; }
.ilx-fixed ul { margin: 0; padding: 0; list-style: none; }
.ilx-fixed li { padding: var(--s2) 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.ilx-fixed li b { display: block; color: var(--ink); font-weight: 650; }
.ilx-fixed li span { font-size: var(--t-xs); }
.ilx-cmp__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.ilx-cmp__one { margin: 0; }
.ilx-shot--cmp { aspect-ratio: 4 / 5; }
.ilx-cmp__one figcaption { margin-top: var(--s3); font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.ilx-cmp__one figcaption b { display: block; margin-bottom: var(--s1); font-family: var(--display); font-size: var(--t-md); font-weight: 700; color: var(--ink); }
@media (max-width: 40rem) { .ilx-cmp__pair { gap: var(--s3); } .ilx-cmp__one figcaption b { font-size: var(--t-base); } }
.ilx-supply { margin: 0; }
.ilx-supply div { padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.ilx-supply dt { font-weight: 650; font-size: var(--t-sm); }
.ilx-supply dd { margin: var(--s1) 0 0; font-size: var(--t-sm); color: var(--ink-2); }
.ilx-qs { margin: 0; padding-left: var(--s5); font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.ilx-qs li { padding: var(--s1) 0; }
.ilx-b .ilx-own { margin-top: var(--s6); }

/* 5 inspect: one viewer for every page */
.ilx-view .ilx-tools { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s4); }
.ilx-view__grid { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s5); align-items: start; }
.ilx-vtabs { display: flex; flex-direction: column; gap: 0; margin: 0; border-top: 1px solid var(--rule); }
.ilx-vtabs button { justify-content: flex-start; min-height: 2.75rem; padding: var(--s2) var(--s3); text-align: left; color: var(--ink-2); background: none; border: 0; border-bottom: 1px solid var(--rule); border-left: 2px solid transparent; }
.ilx-vtabs button:hover { color: var(--ink); background: var(--paper-deep); }
.ilx-vtabs button[aria-pressed="true"] { color: var(--ink); background: var(--brand-wash); border-color: var(--rule); border-left-color: var(--brand); }
.ilx-vtabs button[data-state="ask"] { border-style: solid; border-color: var(--rule); border-left-color: transparent; }
.ilx-vtabs button[data-state="ask"][aria-pressed="true"] { border-left-color: var(--brand); }
@media (max-width: 64rem) {
  .ilx-view__grid { grid-template-columns: minmax(0, 1fr); }
  .ilx-vtabs { flex-direction: row; overflow-x: auto; border: 0; scrollbar-width: thin; }
  .ilx-vtabs button { flex: none; border: 0; border-bottom: 2px solid transparent; }
  .ilx-vtabs button[aria-pressed="true"], .ilx-vtabs button[data-state="ask"][aria-pressed="true"] { border-bottom-color: var(--brand); border-left-color: transparent; }
}
.ilx-view .ilx-job { margin-top: 0; }
.ilx-view .ilx-job b { color: var(--ink); }
.ilx-win { max-height: min(78vh, 54rem); overflow: auto; overscroll-behavior: contain; box-shadow: 0 0 0 1px var(--rule-firm); scrollbar-width: thin; }
.ilx-win:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ilx-view[data-len="full"] .ilx-win { max-height: none; overflow: visible; box-shadow: none; }
.ilx-view .wf-browser { margin-inline: auto; }

/* 6 use it in Design and Build */
.ilx-hand__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--s7); align-items: start; }
@media (min-width: 72rem) { .ilx-hand__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ilx-hand__dl { margin: 0 0 var(--s5); }
.ilx-hand__dl div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.ilx-hand__dl dt { font-size: var(--t-sm); font-weight: 700; }
.ilx-hand__dl dd { margin: 0; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-2); }
@media (max-width: 40rem) { .ilx-hand__dl div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }
.ilx-hand .ilx-ready__btns { margin-bottom: var(--s2); }
.ilx-hand .il-copied { min-height: 1.45em; margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.ilx-hand .ilx-crop { height: 26rem; }
.ilx-tech { margin-top: var(--s6); border-top: 1px solid var(--rule-firm); }
.ilx-tech > summary { display: flex; align-items: center; min-height: 3rem; font-size: var(--t-sm); font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.ilx-tech > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ilx-codes { margin: 0 0 var(--s3); padding-left: var(--s4); font: var(--t-xs)/1.6 var(--mono); color: var(--ink-2); }
.ilx-dlg .ilx-h2 { font-size: var(--t-lg); }

/* 7 the research: readable summary at every width */
.ilx-b .ilx-why { margin: 0 0 var(--ilx-gap); }
.ilx-b .ilx-why__t, .ilx-b .ilx-why__n { color: var(--ink); }
.ilx-b .ilx-why__n { color: var(--ink-2); }

.ilx-checks { max-width: 76ch; }
.ilx-cmp__dl { margin: var(--s3) 0 0; }
.ilx-cmp__dl div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s2); padding: var(--s1) 0; border-top: 1px solid var(--rule); }
.ilx-cmp__dl dt { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }
.ilx-cmp__dl dd { margin: 0; color: var(--ink); }
@media (max-width: 40rem) { .ilx-cmp__dl div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.ilx-legend { --wf-v: var(--brand); font-family: var(--ui); font-size: var(--t-xs); color: var(--ink-2); }
.ilx-legend .wf-lg::before { border-color: var(--ink-2); }
.ilx-legend .wf-lg--cond::before { border-color: var(--brand); }
.ilx-legend .wf-lg--out::before { border-color: var(--rule-firm); }
.ilx-lg--many::before { box-shadow: 3px 3px 0 -1px var(--paper), 3px 3px 0 0 var(--rule-firm); }
/* clip drawings to their box for hit-testing tools too (axe read the clipped overflow as an overlapping white ground) */
.ilx-shot, .ilx-b .ilx-crop { contain: paint; clip-path: inset(0); }
.ilx-hero__phone { box-shadow: 0 0 0 6px var(--paper); }