/* Topic 05 — The Passholder.
   One life as a sequence of entrances, so the page is built out of door
   furniture: a tally plate, a ledger of openings with the handle named on each,
   and one escalator drawn as the steps it actually has. Same two materials as
   the rest of the yard: drafting stock, enamelled steel.
   The shared components below are the yard's, not local reinventions. */

.pass-standfirst{ margin-bottom:0 }
.berth[id]{ scroll-margin-top:4.6rem }

/* ─── section rail ───────────────────────────────────────────────────────── */
.pass-rail{
  position:sticky; top:0; z-index:10; display:flex; gap:.25rem; overflow-x:auto;
  padding:.5rem max(.75rem,calc((100vw - 62rem)/2));
  background:var(--steel); border-block:2px solid var(--rule-hard);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pass-rail::-webkit-scrollbar{ display:none }
.pass-rail a{
  display:flex; flex:0 0 auto; align-items:center; gap:.45rem; min-height:42px; padding:.5rem .6rem;
  color:var(--bone); font:600 .64rem/1 var(--mono); letter-spacing:.07em;
  text-decoration:none; text-transform:uppercase; white-space:nowrap;
}
.pass-rail a:hover,.pass-rail a:focus-visible{ background:var(--steel-2); color:var(--bone) }
.pass-rail a:focus-visible{ outline:3px solid var(--amber); outline-offset:-3px }
.pass-rail a.is-here{ background:var(--steel-2) }
.pass-rail a.is-here b{ color:var(--red) }
.pass-rail b{ color:var(--amber) }

/* ─── the evidence filter: an instrument, so it is steel ─────────────────── */
.tier-panel{
  margin:1.1rem 0 1.3rem; padding:.85rem .9rem 1rem;
  background:var(--steel); border:2px solid var(--rule-hard); color:var(--bone);
}
.tier-panel .instrument-label{ color:var(--amber) }
.tier-btns{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem }
.tier-btn{
  display:flex; align-items:center; gap:.45rem; min-height:44px; padding:.45rem .7rem;
  background:var(--steel-2); color:var(--bone); border:2px solid var(--steel-lit);
  font:600 .68rem/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; cursor:pointer;
}
.tier-btn:focus-visible{ outline:3px solid var(--amber); outline-offset:2px }
.tier-btn .pip{ width:.6rem; height:.6rem; border:2px solid currentColor; border-radius:50% }
.tier-btn[aria-pressed="true"]{ border-color:var(--bone) }
.tier-btn[aria-pressed="true"] .pip{ background:currentColor }
.tier-btn[aria-pressed="false"]{ color:#7d8a92 }
.tier-btn[data-how="application"][aria-pressed="true"]{ color:#6fd3a0 }
.tier-btn[data-how="appointment"][aria-pressed="true"]{ color:var(--amber) }
.tier-btn[data-how="invitation"][aria-pressed="true"]{ color:#e0c07a }
.tier-btn[data-how="circumstance"][aria-pressed="true"]{ color:#9fc4d8 }
.tier-btn[data-how="closed"][aria-pressed="true"]{ color:#ff8e93 }
.tier-note{ margin:.7rem 0 0; color:#b6c2c9; font:600 .68rem/1.5 var(--mono); letter-spacing:.04em }

/* ─── reading panels and slabs ───────────────────────────────────────────── */
.read-panel{
  margin:1.1rem 0 0; padding:.9rem; background:var(--stock-2);
  border:2px solid var(--rule-hard); border-top-width:7px;
}
.read-panel p{ margin:.4rem 0 0; color:var(--ink-2); font-size:.9rem; line-height:1.55 }
.read-panel.is-refusal{ border-top-color:var(--red); background:#fff }
.read-panel.is-refusal p{ color:var(--ink) }
.slab{ min-width:0; padding:.9rem; background:var(--stock-2); border:2px solid var(--rule-hard) }
.slab.is-amber{ border-top:7px solid var(--amber) }
.slab p{ margin:.4rem 0 0; color:var(--ink-2); font-size:.89rem; line-height:1.5 }
.two-up{ display:grid; gap:.75rem; margin-top:1rem }
@media (min-width:46rem){ .two-up{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ─── pull quotes: the page's only large type besides headings ──────────── */
.quote-slab{ margin:1.1rem 0 0; padding:1rem; background:var(--steel); border:2px solid var(--rule-hard) }
.quote-slab blockquote{
  margin:0; color:var(--bone);
  font:600 clamp(1rem,4vw,1.3rem)/1.4 var(--body); font-style:italic;
}
.quote-slab blockquote::before{ content:"\201C" }
.quote-slab blockquote::after{ content:"\201D" }
.quote-slab figcaption{
  margin-top:.75rem; padding-top:.6rem; border-top:1px solid var(--steel-lit);
  color:#b6c2c9; font-size:.76rem; line-height:1.5;
}
.quote-slab.is-rule blockquote{ color:#ffd98a }
.quote-slab.is-small blockquote{ font-size:clamp(.95rem,3.4vw,1.1rem) }

/* ─── chips, limits, sources, figures ────────────────────────────────────── */
.chips{ display:grid; gap:.5rem; margin-top:1rem }
@media (min-width:44rem){ .chips{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)) } }
.chip{ min-width:0; padding:.65rem .75rem; background:var(--stock-2); border:2px solid var(--rule-hard) }
.chip b{ display:block; font:700 1rem/1.1 var(--display); text-transform:uppercase }
.chip span{ display:block; margin-top:.25rem; color:var(--ink-2); font-size:.82rem; line-height:1.45 }
.limits{ display:grid; gap:.7rem; margin-top:1rem }
.limit{ min-width:0; padding:.9rem; background:var(--stock-2); border:2px solid var(--rule-hard); border-top-width:7px; border-top-color:var(--amber) }
.limit h3{ margin:0 0 .45rem; font:700 clamp(1rem,3.4vw,1.2rem)/1.15 var(--display); text-transform:uppercase }
.limit p{ margin:0 0 .5rem; color:var(--ink-2); font-size:.88rem; line-height:1.5 }
.limit .needs{ margin:0; padding-top:.5rem; border-top:1px dashed var(--rule); color:var(--ink-3); font-size:.82rem }
.limit .needs b{ color:var(--ink); font:600 .62rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase }
.sources{ margin:1rem 0 0; padding:0 0 0 1.4rem; display:grid; gap:.7rem }
.sources li{ padding-left:.3rem }
.sources .st{ display:block; font:700 .98rem/1.25 var(--body) }
.sources .sp{ display:block; margin-top:.15rem; color:var(--ink-3); font:600 .66rem/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase }
.sources .sn{ display:block; margin-top:.3rem; color:var(--ink-2); font-size:.85rem; line-height:1.5 }
.figures{ display:grid; gap:.6rem; margin-top:1.3rem }
@media (min-width:40rem){ .figures{ grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)) } }
.fig{ min-width:0; padding:.8rem; background:var(--steel); border:2px solid var(--rule-hard); color:var(--bone) }
.fig b{ display:block; font:700 clamp(1.7rem,6vw,2.3rem)/1 var(--display); color:var(--amber) }
.fig span{ display:block; margin-top:.35rem; font-size:.8rem; line-height:1.4; color:#cad2d6 }

@media (prefers-reduced-motion:no-preference){
  .chain-step{ transition:opacity .18s ease }
}

/* ─── the tally plate ────────────────────────────────────────────────────── */
.tally{ display:grid; gap:.5rem; margin:1.1rem 0 }
@media (min-width:34rem){ .tally{ grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)) } }
.tally-cell{
  min-width:0; padding:.75rem .8rem; background:var(--steel); color:var(--bone);
  border:2px solid var(--rule-hard); border-top-width:7px;
}
.tally-cell b{ display:block; font:700 clamp(1.9rem,8vw,2.6rem)/1 var(--display); color:var(--amber) }
.tally-cell span{ display:block; margin-top:.2rem; font:600 .64rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:#cad2d6 }
.tally-cell small{ display:block; margin-top:.35rem; font-size:.75rem; line-height:1.4; color:#9fb0b8 }
.tally-cell[data-how="closed"]{ border-top-color:var(--red) }
.tally-cell[data-how="closed"] b{ color:#ff8e93 }
.tally-cell[data-how="application"]{ border-top-color:var(--green) }
.tally-cell[data-how="application"] b{ color:#6fd3a0 }
.tally-cell[data-how="election"]{ border-top-color:var(--red); background:#fff; color:var(--ink) }
.tally-cell[data-how="election"] b{ color:var(--red) }
.tally-cell[data-how="election"] span{ color:var(--ink-3) }
.tally-cell[data-how="election"] small{ color:var(--ink-2) }

/* ─── the ledger of doors ────────────────────────────────────────────────── */
.doors{ margin:0; padding:0; list-style:none; display:grid; gap:.6rem }
.door{ min-width:0 }
.door[hidden]{ display:none }
.door-card{
  padding:.8rem .85rem; background:var(--stock-2);
  border:2px solid var(--rule-hard); border-left-width:7px;
  box-shadow:4px 4px 0 rgba(19,26,31,.1);
}
.door[data-how="application"]  .door-card{ border-left-color:var(--green) }
.door[data-how="appointment"]  .door-card{ border-left-color:var(--amber) }
.door[data-how="invitation"]   .door-card{ border-left-color:var(--brass) }
.door[data-how="circumstance"] .door-card{ border-left-color:var(--rule) }
.door[data-how="closed"]       .door-card{ border-left-color:var(--red); background:#fff }
.door-when{ color:var(--red); font:600 .66rem/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase }
.door-card h3{ margin:.28rem 0 .45rem; font:700 clamp(1.08rem,3.6vw,1.4rem)/1.04 var(--display); text-transform:uppercase }
.door-card p{ margin:0; color:var(--ink-2); font-size:.88rem; line-height:1.5 }
.door-quote{ margin:.6rem 0 0; padding:.55rem .7rem; background:#fff; border-left:3px solid var(--rule-hard); font-size:.86rem; line-height:1.5 }
.door[data-how="closed"] .door-quote{ background:var(--stock-2) }
.door-quote q{ font-style:italic }
.door-quote cite{ display:block; margin-top:.35rem; color:var(--ink-3); font:600 .61rem/1.3 var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase }
.door-slip{
  display:flex; flex-wrap:wrap; gap:.3rem .6rem; margin-top:.6rem; padding-top:.5rem;
  border-top:1px dashed var(--rule); font:600 .61rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.door-slip .how{ padding:.12rem .4rem; background:var(--rule-hard); color:var(--bone) }
.door[data-how="closed"] .door-slip .how{ background:var(--red) }
.door[data-how="application"] .door-slip .how{ background:var(--green) }
.door-slip .who{ color:var(--ink-3) }
.door-slip a{ color:var(--ink-3) }

/* ─── the two crossings ──────────────────────────────────────────────────── */
.pairs{ margin-top:1.1rem; border:2px solid var(--rule-hard); background:var(--stock-2) }
.pair-head{ display:none }
.pair-row{ display:grid; gap:.25rem; padding:.7rem .8rem; border-top:2px solid var(--rule-hard) }
.pair-row:first-of-type{ border-top:0 }
.pair-row .k{ color:var(--ink-3); font:600 .62rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase }
.pair-row .v{ font-size:.89rem; line-height:1.45 }
.pair-row .v b{ display:inline-block; min-width:5.6rem; color:var(--red); font:600 .62rem/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase }
@media (min-width:46rem){
  .pair-head{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.7rem; padding:.55rem .8rem; background:var(--steel); color:var(--amber); font:600 .62rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase }
  .pair-row{ grid-template-columns:1fr 1fr 1fr; align-items:baseline }
  .pair-row .v b{ display:none }
}

/* ─── the escalator ──────────────────────────────────────────────────────── */
.escalator{ margin:1.1rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem }
.escalator li{ display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:.7rem; align-items:start; padding:.65rem .75rem; background:var(--stock-2); border:2px solid var(--rule-hard) }
.escalator .n{ font:700 1.25rem/1 var(--display); color:var(--brass) }
.escalator .s{ display:block; font:700 .98rem/1.25 var(--body) }
.escalator .him{ display:block; margin-top:.2rem; color:var(--ink-3); font:600 .74rem/1.45 var(--mono); letter-spacing:.01em }

/* ─── worked ledger, Q&A rows, facts, the memo ───────────────────────────── */
.worked{ margin:1.1rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem }
.worked li{ display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:.7rem; padding:.65rem .75rem; background:var(--stock-2); border:2px solid var(--rule-hard) }
.worked .y{ font:700 1.1rem/1.1 var(--display); color:var(--red) }
.worked .w{ margin:0; font-size:.88rem; line-height:1.5 }
.qa-rows{ display:grid; gap:.55rem; margin-top:1.1rem }
.qa-row{ padding:.8rem .85rem; background:var(--steel); color:var(--bone); border:2px solid var(--rule-hard) }
.qa-row .q{ display:block; color:var(--amber); font:600 .64rem/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase }
.qa-row .a{ margin:.4rem 0 0; font-size:.92rem; line-height:1.5; font-style:italic }
.qa-row .c{ display:block; margin-top:.5rem; color:#9fb0b8; font:600 .61rem/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase }
.facts{ margin:1.1rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem }
.facts li{ padding:.6rem .7rem .6rem 2rem; position:relative; background:var(--stock-2); border:2px solid var(--rule-hard); font-size:.88rem; line-height:1.5 }
.facts li::before{ position:absolute; top:.95rem; left:.75rem; width:.5rem; height:.5rem; background:var(--amber); content:"" }
.memo{ margin-top:1rem; padding:1rem; background:#fff; border:2px solid var(--rule-hard); border-top:7px solid var(--red) }
.memo h3{ margin:.3rem 0 .2rem; font:700 clamp(1.15rem,4vw,1.5rem)/1.05 var(--display); text-transform:uppercase }
.memo-meta{ margin:0 0 .7rem; color:var(--ink-3); font:600 .63rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase }
.memo p{ font-size:.89rem; line-height:1.5 }
.memo-what{ margin:0 0 .6rem; color:var(--ink-2) }
.memo-reply{ margin:0 0 .6rem; padding:.6rem .7rem; background:var(--stock-2); border-left:3px solid var(--amber) }
.memo-reply b{ display:block; color:var(--ink-3); font:600 .61rem/1.6 var(--mono); letter-spacing:.07em; text-transform:uppercase }
.memo-out{ margin:0; padding-top:.55rem; border-top:1px dashed var(--rule); color:var(--ink-3); font-size:.83rem }