/* agent-native-os/portal/lab/lab-blueprint.css
   A blueprint's page in the Vault. Loads after lab-session.css (the lesson body,
   which this page reuses whole). Adds the brand banner at the top of the side column,
   plus a code block and the words list. Grounds and mark boxes are the Vault card's (lab.css). 09-19-2026. */
.bp-banner { aspect-ratio: 16 / 9; border: var(--fm-border-w) solid var(--on-accent); border-radius: 4px; box-shadow: var(--fm-shadow); display: grid; place-items: center; margin: 0 0 16px; background: var(--acc, var(--cream-2)); }
.bp-banner.b-n8n   { --acc: #EA4B71; }
.bp-banner.b-slack { --acc: #4A154B; }
.bp-banner.b-zoom  { --acc: #2D8CFF; }
.bp-banner.b-yt    { --acc: #FF0000; }
.bp-banner.a-violet { --acc: #A78BFA; }
.bp-banner .mark { width: 76px; height: 76px; fill: currentColor; color: var(--on-accent); }
.bp-banner .mark.wide { width: 116px; height: 56px; }
.bp-banner.has-art { position: relative; overflow: hidden; }   /* studio art fills the 16:9 banner (vault covers, 10-17-2026) */
.bp-banner.has-art img.is-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-banner.b-n8n .mark, .bp-banner.b-zoom .mark, .bp-banner.b-yt .mark { color: #FFFFFF; }
.lab-blueprint .rc-sec code, .lab-blueprint .ess-obj-tile code, .lab-blueprint .co code { font-family: var(--font-mono); font-size: 0.88em; background: var(--cream-2); border: 1px solid var(--cream-border); border-radius: 2px; padding: 1px 5px; }
.bp-code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--on-ink); background: var(--ink); border-radius: 4px; padding: 14px 16px; margin: 10px 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }   /* wraps: a long command must never widen the page on a phone */
.lab-blueprint .co-check { --acc: var(--neon); background: var(--neon-tint); }
.bp-words { list-style: none; margin: 12px 0 0 !important; padding: 0; border-top: 1px dashed var(--ink-3); }
.bp-words li { padding: 10px 0; border-bottom: 1px dashed var(--ink-3); margin: 0 !important; }
.lab-blueprint .side-actions .btn-primary { text-decoration: none; }


/* rule 8 pins: fm-sweep.mjs */
/* Text, border and icon stroke on an accent fill stay dark in the terminal theme (decision 6). */
 { color: var(--on-accent); border-color: var(--on-accent); }
/* Light-accent wrappers, ink-filled chips and hard-coded light fills (fm-terminal-fixes.mjs). */
html[data-design="terminal"] .bp-banner:is(:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-check) *) { color: var(--on-accent); }
html[data-design="terminal"] .bp-banner:is(.a-blue, .a-coral, .a-neon, .a-teal, .a-camp, .a-orange, .a-lime, .co-check) { color: var(--on-accent); }
html[data-design="terminal"] .bp-code { background: var(--cream-2); color: var(--ink); border-color: var(--fm-border-c); }
/* end rule 8 pins */