.site-main p.example-eyebrow { font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--focus); font-weight:650; margin-bottom:12px; }
.site-main h1.example-hero { font-size:clamp(1.9rem,3.5vw,3rem); font-weight:400; max-width:18ch; line-height:1.08; margin:12px 0 20px; }
.site-main p.example-lede { font-size:1.1rem; max-width:58ch; }
.example-links { display:flex; gap:12px 26px; flex-wrap:wrap; margin:24px 0 32px; }
.example-section { border-top:1px solid var(--rule); padding:32px 0; scroll-margin-top:80px; }
.site-main .example-section h2 { font-weight:400; font-size:2rem; margin:0 0 14px; }
.site-main .example-section h3 { font-family:var(--font-ui); font-size:1.12rem; font-weight:600; margin:20px 0 8px; }
.case-controls { display:inline-flex; gap:4px; border:1px solid var(--rule); padding:4px; border-radius:0; margin:14px 0 0; background:var(--cream-raised); }
.case-controls button, [data-diagram-case] > button { background:transparent; color:var(--ink); border:0; border-radius:0; padding:10px 18px; font:inherit; cursor:pointer; }
.case-controls button[aria-pressed="true"] { background:var(--focus); color:var(--code-bg); }
.case-controls button:focus-visible, [data-diagram-case] summary:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
[data-diagram-case] .map-caption { border-bottom:0; }
[data-diagram-case] .map-caption > span { color:var(--ink-muted); font-size:.78rem; }
[data-diagram-case] details { margin:16px 0; }
[data-diagram-case] summary { cursor:pointer; padding:6px 0; font-size:.9rem; }
[data-diagram-case] pre { padding:16px; background:var(--cream-raised); border:1px solid var(--rule); border-radius:0; overflow:auto; max-height:360px; font-size:.8rem; }
.site-main [data-diagram-case] .case-selection { font-size:.82rem; overflow-wrap:anywhere; max-width:none; }
.site-main [data-diagram-case] .case-observation { border-left:3px solid var(--warning); padding:8px 14px; font-size:.86rem; max-width:none; }
.case-links { font-size:.85rem; }
.example-note { border-top:1px solid var(--rule); padding:16px 0; font-size:.9rem; }
.lens-questions { margin:24px 0; }
.lens-questions > div { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(0,2fr); gap:12px 28px; padding:18px 0; border-top:1px solid var(--rule); }
.lens-questions dt { color:var(--focus); }
.lens-questions dd { margin:0; line-height:1.7; }
#authoring-limits summary { cursor:pointer; }
@media(max-width:600px) { .lens-questions > div { grid-template-columns:1fr; gap:8px; } }
@media(max-width:600px) { .case-controls { display:flex; } .case-controls button { flex:1; } }

.site-main .case-controls button[aria-pressed="true"] { background:var(--focus); color:var(--code-bg); }
/* Match the artifact's exact verdict categories; status text stays visible. */
.abstraction-map [data-status] { --verdict:var(--warning); }
.abstraction-map [data-status="holds"] { --verdict:var(--focus); }
.abstraction-map [data-status="violated"] { --verdict:var(--danger); }
.abstraction-map [data-status] rect { fill:var(--cream-raised); stroke:var(--verdict); rx:0; }
.abstraction-map [data-status] path { stroke:var(--verdict); }
.abstraction-map [data-status] text:not([class]) { fill:var(--verdict); }
[data-diagram-case] .map-figure { margin-top:8px; }

/* Homepage lens switcher: one program, several lenses. */
.lens-program { margin:20px 0 8px; border:1px solid var(--rule); background:var(--cream-raised); }
.try-panel .lens-program { margin:12px 16px; border-color:var(--try-rule); background:transparent; }
.try-panel .lens-detail { background:var(--try-bg); box-shadow:0 -8px 12px var(--try-bg); }
.try-panel .map-figure { background:var(--cream-raised); }
.lens-tabs { display:flex; border-bottom:1px solid var(--rule); }
.site-main .lens-program .lens-tabs button { flex:1; background:transparent; color:var(--ink); border:0; border-right:1px solid var(--rule); padding:12px 10px; font:inherit; font-size:.88rem; cursor:pointer; }
.site-main .lens-program .lens-tabs button:last-child { border-right:0; }
.site-main .lens-program .lens-tabs button[aria-selected="true"] { background:var(--focus); color:var(--code-bg); }
.site-main .lens-program .lens-tabs button:focus-visible, .site-main .lens-program .lens-chip:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.lens-panel { padding:14px 16px 4px; }
.site-main .lens-panel p { max-width:none; }
.site-main .lens-question { margin:0 0 12px; font-size:.9rem; color:var(--ink-muted); }
.lens-layers { list-style:none; margin:0; padding:0; }
.lens-layers > li { display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:8px; padding:8px 0; border-top:1px dashed var(--rule); }
.lens-layers > li:first-child { border-top:0; }
.lens-layer-label { font-size:.74rem; color:var(--ink-muted); padding-top:5px; }
.lens-row { display:flex; flex-wrap:wrap; gap:6px; }
.site-main .lens-program .lens-chip { font:12px var(--mono); padding:4px 8px; border:1px solid var(--rule); background:var(--cream); color:var(--ink); cursor:pointer; border-radius:0; }
.site-main .lens-program .lens-chip[data-relation="dep"] { border-color:var(--focus); background:var(--signal-bg); color:var(--focus); }
.site-main .lens-program [data-has-selection] .lens-chip[data-relation=""]:not([aria-pressed="true"]) { opacity:.45; }
.site-main .lens-program .lens-chip[data-relation="user"] { border-color:var(--violet); background:transparent; color:var(--violet); }
.site-main .lens-program .lens-chip[aria-pressed="true"] { background:var(--warning); border-color:var(--warning); color:var(--code-bg); }
.lens-bars { list-style:none; margin:0; padding:0; }
.lens-bars > li { display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) 5.5rem; align-items:center; gap:10px; padding:4px 0; }
.site-main .lens-program .lens-bars .lens-chip { justify-self:start; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.lens-bar { height:10px; background:var(--focus); opacity:.7; width:calc(var(--share) * 100%); }
.lens-count { font-size:.78rem; color:var(--ink-muted); text-align:right; }
.lens-family { padding:10px 0; border-top:1px dashed var(--rule); }
.lens-family:first-child { border-top:0; padding-top:0; }
.site-main .lens-family h4 { margin:0 0 2px; font-size:.86rem; font-weight:400; overflow-wrap:anywhere; }
.site-main .lens-family > p { margin:0 0 6px; font-size:.8rem; color:var(--ink-muted); }
.lens-family[data-ways="2"] > p, .lens-family[data-ways="3"] > p { color:var(--warning); }
.lens-form { display:grid; grid-template-columns:10rem minmax(0,1fr); gap:8px; padding:3px 0; }
.lens-form > span { font-size:.76rem; color:var(--ink-muted); padding-top:5px; }
.site-main .lens-detail { position:sticky; bottom:0; background:var(--cream-raised); box-shadow:0 -8px 12px var(--cream-raised); margin:12px 0 10px; padding:8px 12px; border-left:3px solid var(--warning); font-size:.84rem; overflow-wrap:anywhere; }
.site-main .lens-note { margin:8px 0 0; font-size:.76rem; color:var(--ink-muted); }
.site-main .lens-source { margin:0; padding:8px 16px 12px; font-size:.78rem; color:var(--ink-muted); border-top:1px solid var(--rule); }
.site-main h3.lens-followup { margin-top:28px; }
@media(max-width:600px) {
  .site-main .lens-program .lens-tabs button { font-size:.8rem; padding:12px 4px; }
  .lens-layers > li, .lens-form { grid-template-columns:1fr; gap:4px; }
  .lens-layer-label, .lens-form > span { padding-top:0; }
  .lens-bars > li { grid-template-columns:minmax(0,8rem) minmax(0,1fr) 4.6rem; gap:6px; }
}
.site-main .lens-detail .lens-dep { color:var(--focus); }
.site-main .lens-detail .lens-user { color:var(--violet); }
.site-main .lens-detail code { font-size:.78rem; color:var(--ink-muted); }
.site-main .lens-detail { max-height:40vh; overflow:auto; }
/* On the homepage the drawing is small; the browse toolbar and the generic
   map hint would push it away from the buttons that change it. The examples
   page keeps both. */
[data-diagram-case] .case-controls { margin:0 16px 12px; }
#home-stock-example .structure-toolbar, #home-stock-example .map-summary { display:none; }
@media(max-width:600px) { [data-diagram-case] .case-controls { margin:0 10px 10px; } }
/* Layer diagram (layer-diagram.js): packages in rows, arrows to what each is built from. */
.layer-program { margin:12px 16px; }
.layer-scroll { overflow-x:auto; border:1px solid var(--try-rule, var(--rule)); background:var(--cream-raised); }
.layer-svg { display:block; margin:0 auto; max-width:100%; height:auto; }
.layer-box rect { fill:var(--cream); stroke:var(--rule); stroke-width:1; }
.layer-box[data-io="true"] rect { stroke:var(--ink); stroke-width:1.5; }
.layer-box { cursor:pointer; }
.layer-box:focus-visible { outline:none; }
.layer-box:focus-visible rect { stroke:var(--focus); stroke-width:3; }
.layer-name { font:12.5px var(--mono); fill:var(--ink); }
.layer-does { font:11px var(--font-ui, sans-serif); fill:var(--ink-muted); }
.layer-box[data-io="true"] .layer-does { fill:var(--ink); font-weight:600; }
.layer-band { fill:var(--ink); opacity:.035; }
.layer-band[data-shade="1"] { opacity:0; }
.layer-edge { fill:none; stroke:var(--ink-muted); stroke-width:1.2; opacity:.55; }
.layer-svg marker path { fill:var(--ink-muted); }
.layer-svg[data-has-selection] .layer-edge { opacity:.14; }
.layer-svg[data-has-selection] .layer-edge[data-relation="uses"] { stroke:var(--focus); opacity:1; stroke-width:2; }
.layer-svg[data-has-selection] .layer-edge[data-relation="used"] { stroke:var(--violet); opacity:1; stroke-width:2; }
.layer-svg[data-has-selection] .layer-box[data-relation=""] { opacity:.8; }
.layer-box[data-relation="selected"] rect { fill:var(--warning); stroke:var(--warning); }
.layer-box[data-relation="selected"] text { fill:var(--code-bg); }
.layer-box[data-relation="uses"] rect { stroke:var(--focus); stroke-width:2; }
.layer-box[data-relation="used"] rect { stroke:var(--violet); stroke-width:2; }
.site-main .layer-key { font-size:.8rem; color:var(--ink-muted); margin:8px 0 0; max-width:none; }
.layer-key-io { font-weight:600; color:var(--ink); }
.layer-key-selected { background:var(--warning); color:var(--code-bg); padding:0 3px; }
.layer-key-uses, .layer-uses { color:var(--focus); }
.layer-key-used, .layer-used { color:var(--violet); }
.layer-detail { font-size:.86rem; line-height:1.6; padding:10px 0 4px; overflow-wrap:anywhere; }

/* Access results use the panel's available width, including nested phone
   panels and desktop zoom. Native text wraps without rescaling labels. */
.site-main .access-checks { container-type:inline-size; list-style:none; max-width:none; margin:0; padding:12px; }
.site-main .access-checks > li { max-width:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"handler verdict resource"; gap:12px; margin:0 0 12px; padding:14px; border:1px solid var(--verdict); background:var(--cream-raised); font:12px/1.5 var(--mono); overflow-wrap:anywhere; }
.access-handler { grid-area:handler; }
.access-result { grid-area:verdict; }
.access-resource { grid-area:resource; }
.access-checks li > div { display:flex; flex-direction:column; min-width:0; }
.access-checks .access-label { font-size:10px; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px; }
.access-checks strong { color:var(--ink); }
.access-checks .access-result strong, .access-checks .access-result code { color:var(--verdict); }
@container (max-width:640px) {
  .site-main .access-checks > li { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"handler resource" "verdict verdict"; }
  .access-result { border-top:1px solid var(--rule); padding-top:8px; }
}