/* Environment page components — ported from the environment-preview build
   (we-x20, 2026-09-21) onto the site's design tokens. Page prose, headings,
   CTAs and blockquotes use the site's native .doc-inner grammar; this file
   carries only the figure/interaction components the site didn't have. */

.doc-inner{--env-green:#8fbf9d;--env-purple:#b9a3d6}
:root[data-theme="light"] .doc-inner{--env-green:#4e7a5c;--env-purple:#6f5694}

/* page-level provenance note */
.example-note{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink-3);margin:10px 0 26px}
.example-note a{color:var(--ink-2)}

.native-board{margin:26px 0}
.native-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.native-board iframe{width:100%;height:520px;display:block;border:0;border-radius:0;background:transparent}
.native-board figcaption{font-family:var(--body);font-size:13.5px;line-height:1.6;color:var(--ink-2);padding:10px 2px 0;margin:0}
/* hero: break out past the text column, as systems-building's hub does */
@media(min-width:1100px){.native-board.breakout{width:calc(100% + 144px);margin-left:-72px;margin-right:-72px}}
/* the hero is recognition, not reading: no border, no caption */
.native-board.hero iframe{border:0;border-radius:12px}

/* state tabs on figure frames (kept for any figure that still offers views) */
.state-tabs{display:flex;gap:7px;flex-wrap:wrap}
.state-tabs button{padding:7px 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--paper-3);border:1px solid var(--line-2);border-radius:4px;cursor:pointer;transition:.15s}
.state-tabs button:hover{color:var(--ink);border-color:var(--ink-2)}
.state-tabs button.selected{background:var(--accent);color:var(--cta-ink);border-color:var(--accent)}

/* collapsible mechanism notes */
.mechanism{margin:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.mechanism summary{cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--accent);list-style-position:inside}
.mechanism>.reading{margin-top:14px}
.mechanism .native-board{margin-top:14px}

/* 03: the tappable phone beside the desktop seat lives inside one figure (figures/phone-pair.html) */
.native-board.pair iframe{min-height:640px}

/* bridge card to the knowledge-system page (same quiet family as the depth card) */
.page-bridge{display:block;box-sizing:border-box;width:100%;text-decoration:none;border:1px solid var(--line-2);background:var(--paper-2);border-radius:8px;padding:20px 24px;margin:16px 0 0;transition:.15s}
.page-bridge:hover{border-color:var(--accent)}
.page-bridge .eyebrow{display:block;margin-bottom:8px}
.page-bridge>strong{display:flex;justify-content:space-between;gap:20px;font-family:var(--head);font-weight:500;font-size:22px;line-height:1.35;color:var(--ink)}
.page-bridge>strong>span{color:var(--accent)}
.bridge-copy{display:block;font-family:var(--body);font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:9px}

/* optional depth: the extended-system map */
.architecture-depth{margin:44px 0 0;border:1px solid var(--line-2);border-radius:8px;background:var(--paper-2);transition:.15s}
.architecture-depth:hover{border-color:var(--accent)}
.architecture-depth>summary{list-style:none;display:flex;gap:20px;align-items:center;padding:16px 24px 16px 16px;cursor:pointer}
.architecture-depth>summary::-webkit-details-marker{display:none}
.depth-thumb{flex:none;width:160px;height:auto;border-radius:5px;border:1px solid var(--line-2);display:block}
.architecture-depth>summary strong{flex:1;font-family:var(--head);font-weight:500;font-size:22px;line-height:1.35;color:var(--ink)}
.depth-toggle{font-size:24px;color:var(--accent);transition:.15s}
.architecture-depth[open] .depth-toggle{transform:rotate(45deg)}
.map-content{border-top:1px solid var(--line);padding:24px 26px}
.map-intro{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--ink-soft);margin:0 0 20px}
.system-map{margin:0 0 22px}
.map-tier{padding:16px;border:1px solid var(--line-2);border-radius:6px;background:var(--paper)}
.map-tier>span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.map-tier>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.map-tier>div>*{font-family:var(--body);font-size:13.5px;line-height:1.4;color:var(--ink-soft);text-decoration:none;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper-3)}
.map-tier.record-tier{border-color:var(--gold)}
.record-tier>div>*{color:var(--cog-ink);border-color:var(--line-2)}
.map-connector{font-size:20px;line-height:1.6;text-align:center;color:var(--ink-3)}
.map-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:18px}
.map-notes p{font-family:var(--body);font-size:13px;line-height:1.6;color:var(--ink-2);margin:0}
.map-notes b{font-weight:600;color:var(--ink)}
.map-content .text-link{font-family:var(--mono);font-size:12px;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line-2)}

/* a11y live region */
.env-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:900px){
  .map-tier>div{grid-template-columns:1fr;gap:8px}
  .map-notes{grid-template-columns:1fr;gap:14px}
  .page-bridge>strong{font-size:20px}
  .architecture-depth>summary{padding:14px 18px 14px 14px;gap:14px}
  .depth-thumb{width:110px}
  .architecture-depth>summary strong{font-size:19px}
  .map-content{padding:18px 20px}
}