/* A quiet list keeps one output and one decision in view at a time. */
.blueprint-page .bp-sample-section { display:block; }
.blueprint-page .bp-sample-section>h2 { font-size:clamp(1.875rem,3.3vw,2.75rem); max-width:24ch; }
.bp-sample-intro { font-size:1.0625rem; max-width:62ch; margin:1rem 0 0; }
.bp-simulation-label { color:var(--muted); font-size:.875rem; margin-top:1.25rem; }
.blueprint-page .bp-sample-list { display:block; list-style:none; padding:0; margin:2rem 0 0; }
.blueprint-page .bp-sample-list>li { display:grid; grid-template-columns:1.75rem minmax(0,1fr) minmax(0,.82fr); align-items:center; gap:1rem 1.5rem; border-top:1px solid var(--line); padding:2rem 0; }
.bp-sample-number { color:var(--mid); align-self:start; font-size:.875rem; padding-top:.25rem; }
.blueprint-page .bp-sample-copy h3 { font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.3; font-weight:700; max-width:32ch; }
.blueprint-page .bp-sample-copy p { font-size:1rem; line-height:1.65; margin-top:.875rem; max-width:39ch; }
.bp-sample-link { display:block; min-width:0; color:var(--green); text-decoration:none; }
.bp-sample-link img { display:block; width:100%; height:auto; aspect-ratio:12/5; background:white; border:1px solid var(--line); border-radius:4px; }
.bp-sample-link>span { display:flex; align-items:center; gap:.75rem; font-size:.9375rem; font-weight:650; margin-top:.625rem; min-height:2rem; text-decoration:underline; text-underline-offset:4px; }
.bp-sample-link:hover img { border-color:var(--mid); }
.bp-sample-link:focus-visible { outline:3px solid var(--gold); outline-offset:6px; }
.bp-sample-footer { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 3rem; padding-top:1.5rem; border-top:1px solid var(--line); align-items:start; }
.bp-sample-download { font-size:1rem; line-height:1.6; font-weight:650; color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.bp-sample-download>span { display:block; font-size:.875rem; color:var(--muted); font-weight:400; text-decoration:none; margin-top:.25rem; }
.bp-sample-scope summary { display:flex; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none; font-size:1rem; font-weight:650; line-height:1.6; padding:0 0 .75rem; }
.bp-sample-scope summary::-webkit-details-marker { display:none; }
.bp-sample-scope[open] .bp-disclosure-icon::after { transform:rotate(0); }
.bp-sample-scope>div>p { font-size:1rem; line-height:1.65; margin-top:.75rem; }
body.sample-open { overflow:hidden; }
dialog.bp-sample-dialog { width:min(1400px,calc(100vw - 32px)); max-width:none; height:min(950px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); padding:0; margin:auto; border:0; border-radius:8px; color:var(--ink); background:white; }
dialog.bp-sample-dialog[open] { display:flex; flex-direction:column; }
.bp-sample-dialog::backdrop { background:rgb(8 25 21 / .76); }
.bp-sample-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; padding:1.25rem 1.5rem .875rem; }
.blueprint-page .bp-sample-toolbar h2 { font-size:1.25rem; line-height:1.35; letter-spacing:-.02em; max-width:65ch; margin:0; }
.bp-sample-dialog .bp-sample-toolbar p { font-size:.875rem; line-height:1.5; margin:.5rem 0 0; color:var(--muted); }
.bp-sample-close { display:flex; align-items:center; gap:.625rem; min-height:44px; padding:.5rem .75rem; background:var(--sage); color:var(--green); border:1px solid var(--line); border-radius:4px; font:650 .9375rem var(--font); cursor:pointer; flex:none; }
.bp-sample-close span { font-size:1.5rem; line-height:1; }
.bp-sample-controls { display:flex; align-items:center; gap:.5rem; padding:0 1.5rem 1rem; flex-wrap:wrap; }
.bp-sample-controls button { min-width:44px; min-height:44px; padding:.5rem .75rem; border:1px solid var(--line); border-radius:4px; background:white; color:var(--green); font:650 .9375rem var(--font); cursor:pointer; }
.bp-sample-controls button:disabled { opacity:.4; cursor:default; }
.bp-sample-controls a { color:var(--green); font-size:.875rem; line-height:1.5; text-decoration:underline; text-underline-offset:4px; margin-left:auto; min-height:44px; display:flex; align-items:center; }
.bp-sample-dialog button:focus-visible,.bp-sample-dialog a:focus-visible,.bp-sample-viewport:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.bp-sample-viewport { flex:1; min-height:0; overflow:auto; background:#edf1ee; overscroll-behavior:contain; padding:16px; }
.bp-sample-viewport img { display:block; max-width:none; height:auto; margin:0 auto; }
.bp-sample-viewport img[hidden] { display:none; }
.bp-sample-status { font-size:1rem; max-width:48ch; margin:2rem auto; }
@media(max-width:700px) {
  .blueprint-page .bp-sample-list>li { grid-template-columns:1.25rem minmax(0,1fr); gap:.75rem 1rem; padding-block:1.75rem; }
  .bp-sample-link { grid-column:2; }
  .blueprint-page .bp-sample-copy h3 { font-size:1.25rem; max-width:none; }
  .blueprint-page .bp-sample-copy p { margin-top:.5rem; max-width:none; }
  .bp-sample-footer { grid-template-columns:1fr; gap:1.75rem; }
  .bp-sample-scope { border-top:1px solid var(--line); padding-top:1rem; }
}
@media(max-width:500px) {
  dialog.bp-sample-dialog { width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  .bp-sample-toolbar { gap:.75rem; padding:1rem; }
  .blueprint-page .bp-sample-toolbar h2 { font-size:1rem; }
  .bp-sample-close { padding:.5rem; }
  .bp-sample-controls { padding:0 1rem .75rem; }
  .bp-sample-controls a { width:100%; margin-left:0; min-height:36px; }
}


.blueprint-page .bp-sample-copy .bp-sample-output { font-size:.8125rem; font-weight:600; color:var(--mid); margin-top:1rem; }