/* Mosaic Forms web components: the layout half (bead claude-code-gs7ph, FORMS-CORE-SPEC section 17).
   Link this in <head> so the space each component needs is reserved before any script runs (no layout shift);
   drive-frame.js only adds an absolutely positioned, aria-hidden SVG layer and never moves text.
   No brand colors here: the mosaic is drawn from brand-tokens.js. Fallbacks (scripts off) use currentColor. */

/* frame: hugs its text; the band sits in the outer --mf-band of the padding, the rest is breathing room */
[data-mf="frame"] {
  --mf-band: clamp(6px, 0.42em, 14px);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: calc(var(--mf-band) + 0.45em) calc(var(--mf-band) + 0.8em);
  border-radius: 0.9em;
}

/* inset: the text sits in an ink pill framed by mosaic; the driver sets the ink color */
[data-mf="inset"] {
  --mf-band: clamp(6px, 0.42em, 12px);
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: calc(var(--mf-band) + 0.4em) calc(var(--mf-band) + 1em);
  border-radius: 999px;
}

/* logo inset (FORMS-CORE-SPEC 17.7): an <img> logo child on an inset. Size the logo with --mf-logo-h on the element; the pill
   keeps half the brand-guide clear space around it (marks 12.5 percent of the logo height, the STEMsaic lockup 11, the BTD
   lockup tighter so the pill reads as its frame) and the band is 0.125 x the logo height, 10 to 14 px (drive-frame.js
   applies the same numbers). data-mf-logo="mark" (rounded square), "round" (circle), "lockup", "lockup-tight". */
[data-mf="inset"][data-mf-logo] {
  --mf-logo-h: 96px; --mf-clear-k: 0.125; --mf-r-k: 0.27;
  --mf-band: clamp(10px, calc(var(--mf-logo-h) * 0.125), 14px);
  --mf-clear: calc(var(--mf-logo-h) * var(--mf-clear-k));
  display: block; line-height: 0;
  padding: calc(var(--mf-band) + var(--mf-clear));
  border-radius: calc(var(--mf-band) + var(--mf-logo-h) * var(--mf-r-k));
}
[data-mf="inset"][data-mf-logo="round"] { border-radius: 999px; }
[data-mf="inset"][data-mf-logo="lockup"] { --mf-clear-k: 0.11; --mf-r-k: 0.26; }
[data-mf="inset"][data-mf-logo="lockup-tight"] { --mf-clear-k: 0.14; --mf-r-k: 0.3; }
[data-mf="inset"][data-mf-logo] > img { display: block; height: var(--mf-logo-h); width: auto; max-width: none; }

/* mark: keeps the 2px the old active underline took, so the nav does not move by a pixel */
[data-mf="mark"] { border-bottom: 2px solid transparent; }

/* card: the band is drawn inside the container's own edge; layout untouched. Set style="--mf-band:9px" to size it. */

/* label: data-mf-label="text" on a frame or card. drive-frame.js adds span.mf-label as the first child (real text) and sets its
   background (the page color behind the frame) and ink (contrast-chosen). It is centered on the top band at the upper left,
   like a tab on the wire, and takes no layout space (it rises about 5px above the box, inside the page margin). */
span.mf-label {   /* span only: render-svg.js draws its pill text as <text class="mf-label"> (G-227 collision fix) */
  position: absolute; z-index: 1;
  left: calc(var(--mf-band, 8px) + 0.9em); top: calc(var(--mf-band, 8px) * 0.5);
  transform: translateY(-50%);
  padding: 0.18em 0.7em;
  font: 600 12px/1.2 "Montserrat", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; white-space: nowrap; pointer-events: none;
}

/* scripts off or not yet run: a quiet outline in the text color, never gold */
[data-mf="frame"]:not(.mf-on) { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
[data-mf="inset"]:not(.mf-on) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent); }
[data-mf="mark"]:not(.mf-on) { border-bottom-color: currentColor; }

@media print { .mf-layer { display: block !important; } }