/* =========================================================
   321 Enterprise Labs — suite styles
   LAB-159 §5c.

   LOADS AFTER /assets/css/style.css AND EXTENDS IT.
   It does not redefine the palette, the type scale, or any
   base component. Everything below either composes existing
   tokens or adds something the main site genuinely lacks.

   RULE: if a value can be expressed as an existing token, it
   must be. A raw hex outside the :root block below is a bug.
   ========================================================= */

:root {
  /* Surfaces — aliases so Labs components read intentionally
     rather than reaching for elevation levels directly. */
  --labs-card-bg:      var(--bg-elev-1);
  --labs-card-bg-hi:   var(--bg-elev-2);
  --labs-card-border:  var(--border);
  --labs-accent:       var(--brand-blue);

  /* Status — the one genuinely new scale. The site has no
     status vocabulary because nothing on it has a lifecycle. */
  --labs-status-live:  #4ADE80;
  --labs-status-beta:  var(--brand-purple);
  --labs-status-wip:   #E8B84B;
  --labs-status-plan:  var(--text-tertiary);

  /* Muted body text. The site's --text-tertiary (#6B7388) is tuned for
     labels and metadata and lands at 4.15:1 on the page background — under
     AA for normal-size copy. Labs uses tertiary-toned text for real sentences
     (planned-card blurbs, host labels), so it needs a value that clears 4.5:1
     on BOTH the page and the elevated card. Same hue, lifted value.
       #747D93 -> 4.77:1 on --bg-base, 4.50:1 on --bg-elev-1 */
  --labs-text-muted:   #747D93;

  /* Layout */
  --labs-tool-max:     1120px;
  --labs-grid-gap:     20px;
}

/* =========================================================
   SHELL — header additions
   Composes .site-nav / .nav-row / .brand from style.css.
   ========================================================= */

.labs-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.labs-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.labs-nav-back:hover {
  color: var(--text-primary);
  background: var(--bg-elev-1);
}
.labs-nav-back-arrow {
  transition: transform var(--t-fast) var(--ease-out);
}
.labs-nav-back:hover .labs-nav-back-arrow { transform: translateX(-2px); }

.labs-nav-sep {
  color: var(--text-tertiary);
  opacity: 0.5;
  font-size: 14px;
}

.labs-nav-current {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- project switcher ---------- */

.labs-switcher { position: relative; }

.labs-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.labs-switch-btn:hover {
  color: var(--text-primary);
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.labs-switch-btn:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}
.labs-switch-caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform var(--t-fast) var(--ease-out);
}
.labs-switch-btn[aria-expanded="true"] .labs-switch-caret { transform: rotate(180deg); }

.labs-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 250px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
}
.labs-switch-menu[hidden] { display: none; }

.labs-switch-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--text-secondary);
}
.labs-switch-menu a:hover {
  background: var(--bg-elev-1);
  color: var(--text-primary);
}
.labs-switch-ext { font-size: 11px; opacity: 0.55; }

@media (max-width: 720px) {
  .labs-nav-right { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .labs-nav-current { max-width: 46vw; }
  .labs-switch-menu { right: auto; left: 50%; transform: translateX(-50%); }
}

/* =========================================================
   STATUS BADGE
   Shared by the hub grid and the tool header.
   ========================================================= */

.labs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.labs-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.labs-badge--live {
  color: var(--labs-status-live);
  border-color: color-mix(in srgb, var(--labs-status-live) 30%, transparent);
  background: color-mix(in srgb, var(--labs-status-live) 10%, transparent);
}
.labs-badge--beta {
  color: var(--labs-status-beta);
  border-color: color-mix(in srgb, var(--labs-status-beta) 34%, transparent);
  background: color-mix(in srgb, var(--labs-status-beta) 12%, transparent);
}
.labs-badge--wip {
  color: var(--labs-status-wip);
  border-color: color-mix(in srgb, var(--labs-status-wip) 30%, transparent);
  background: color-mix(in srgb, var(--labs-status-wip) 10%, transparent);
}
.labs-badge--planned {
  color: var(--labs-status-plan);
  border-color: var(--border);
  background: transparent;
}
.labs-badge--planned::before { opacity: 0.6; }

/* =========================================================
   HUB — hero
   ========================================================= */

.labs-hero {
  position: relative;
  padding-block: clamp(72px, 11vh, 132px) clamp(40px, 6vh, 64px);
  overflow: hidden;
}
.labs-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: min(900px, 120vw);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--brand-blue) 16%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}
.labs-hero > .container { position: relative; z-index: 1; }

.labs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  margin-bottom: 22px;
}

.labs-hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 0 0 22px;
  max-width: 16ch;
}
/* Longer headline sentence — the 16ch measure above is tuned for a
   short two-line hook and forces a 54-character line into four lines
   with orphaned words. This widens the measure, steps the size down
   one notch, and lets the browser balance the breaks. */
.labs-hero-headline--long {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  max-width: 24ch;
  text-wrap: balance;
}

.labs-hero-headline .labs-accent {
  background: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.labs-hero-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}
.labs-hero-lede em {
  font-style: normal;
  color: var(--text-primary);
}

.labs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 30px;
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.labs-hero-meta strong {
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.labs-hero-meta .labs-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.6;
}

/* =========================================================
   HUB — grid
   ========================================================= */

.labs-grid-section {
  padding-block: 0 clamp(56px, 8vh, 96px);
}

.labs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--labs-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 960px) { .labs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .labs-grid { grid-template-columns: 1fr; } }

.labs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 24px;
  background: var(--labs-card-bg);
  border: 1px solid var(--labs-card-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  /* Own stacking context, so the z-index:-1 hover glow below paints
     above this card's background rather than escaping to the root and
     disappearing behind it. No layout effect. */
  isolation: isolate;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}

/* Hover glow — same idiom as .pillar / .specialty on the main site */
.labs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at 50% 0%,
    color-mix(in srgb, var(--brand-blue) 12%, transparent) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
  /* Negative z-index so the glow paints above the card background but
     below the in-flow content. This is what lets the content elements
     below drop their own position/z-index — which is what was breaking
     the stretched link (see .labs-card-hit). */
  z-index: -1;
}

.labs-card--link:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--labs-card-bg-hi);
}
.labs-card--link:hover::before { opacity: 1; }

.labs-card--link:focus-within {
  border-color: var(--brand-blue-light);
}

/* The whole card is clickable via a stretched link, but the
   accessible name stays on the real anchor text.

   BUG FIX 2026-08-01: this anchor lives inside .labs-card-name, so it
   resolves `inset: 0` against its nearest POSITIONED ancestor. While
   .labs-card-name carried `position: relative`, that ancestor was the
   <h2> — the hit area was 331x25 (the title line) instead of the whole
   381x280 card, and clicking the blurb or the call-to-action did
   nothing. The content elements below no longer position themselves;
   the ::before glow sits at z-index -1 instead, which was the only
   reason they needed to. */
.labs-card-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.labs-card-hit:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

.labs-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.labs-card-index {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.labs-card-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.labs-card-blurb {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* Action over destination, always stacked. Side-by-side looked
   fine until a long hostname wrapped and orphaned itself — this
   is stable at every card width and needs no truncation. */
.labs-card-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin-top: auto;
  padding-top: 20px;
}

.labs-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-blue-light);
  white-space: nowrap;   /* never orphan the arrow onto its own line */
}
.labs-card-action .arrow {
  transition: transform var(--t-fast) var(--ease-out);
}
.labs-card--link:hover .labs-card-action .arrow { transform: translateX(3px); }

/* Host label — only carries its weight when it tells you something
   the card doesn't already say, i.e. that you're leaving this site.
   Internal tools omit it entirely rather than padding the row. */
.labs-card-host {
  font-size: 11.5px;
  color: var(--labs-text-muted);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ---------- planned cards ----------
   Deliberately not links. Showing the roadmap builds trust;
   clicking into a stub destroys it. The dashed border and the
   PLANNED badge carry that on their own — no footer text, which
   would only restate the badge. */
.labs-card--planned {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-subtle);
  min-height: 0;
}
.labs-card--planned .labs-card-name { color: var(--text-secondary); }
.labs-card--planned .labs-card-blurb { color: var(--labs-text-muted); }

/* =========================================================
   HUB — closing band
   ========================================================= */

.labs-closer {
  padding-block: clamp(56px, 8vh, 88px);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}
.labs-closer-heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.labs-closer-lede {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 auto 28px;
  max-width: 54ch;
}
.labs-closer-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* =========================================================
   TOOL PAGE — shared frame
   Every tool page composes this so they share a silhouette
   without each one re-inventing a layout.
   ========================================================= */

.labs-tool {
  max-width: var(--labs-tool-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(40px, 6vh, 72px) clamp(72px, 10vh, 120px);
}

.labs-tool-head {
  margin-bottom: clamp(28px, 4vh, 48px);
  max-width: 68ch;
}

.labs-tool-head h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.labs-tool-intro {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Panel — the default container for a tool's working surface. */
.labs-panel {
  background: var(--labs-card-bg);
  border: 1px solid var(--labs-card-border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
}

/* =========================================================
   MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .labs-card,
  .labs-card::before,
  .labs-card-action .arrow,
  .labs-nav-back-arrow,
  .labs-switch-caret {
    transition: none !important;
  }
  .labs-card--link:hover { transform: none; }
}

/* =========================================================
   WIP PANEL
   Shown on a tool page whose status is 'wip'. Says what is
   coming instead of faking an interface — a 'wip' card on the
   hub is a link, so what it lands on has to be worth landing on.
   ========================================================= */

.labs-wip-badge { margin: 0 0 18px; }

.labs-wip-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.labs-wip-lede {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 34px;
  max-width: 62ch;
}

.labs-wip-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 680px) { .labs-wip-cols { grid-template-columns: 1fr; gap: 26px; } }

.labs-wip-subhead {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  margin: 0 0 14px;
}

.labs-wip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.labs-wip-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.labs-wip-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
}
.labs-wip-list em { font-style: normal; color: var(--text-primary); }

.labs-wip-foot {
  font-size: 14px;
  line-height: 1.6;
  color: var(--labs-text-muted);
  margin: 0 0 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  max-width: 62ch;
}

.labs-wip-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================================================
   TOOL PRIMITIVES
   Added for Color Studio (LAB-172) but deliberately generic —
   these are the parts every Labs tool needs, and the start of
   the `_template/` the ADR wants extracted before tool #3.
   Nothing here is color-specific. Anything that is belongs in
   the tool's own stylesheet.
   ========================================================= */

/* `hidden` must actually hide.
   The UA default is `[hidden] { display: none }` at specificity 0-1-0,
   which ANY component rule setting `display: flex` or `display: grid`
   beats. Tools progressively reveal their controls by clearing the
   attribute, so without this every flex/grid container in the page
   still rendered its dead controls with JavaScript off — the exact
   thing the hiding exists to prevent. labs.css already carried a
   one-off `.labs-switch-menu[hidden]` for the same reason; this
   generalizes it. */
[hidden] { display: none !important; }

/* Visually hidden, still announced. */
.labs-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- section rhythm ---------- */

.labs-section {
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--border-subtle);
}

.labs-section-head {
  max-width: 68ch;
  margin-bottom: clamp(20px, 3vh, 32px);
}

.labs-section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 12px;
}

.labs-section-lede {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- fields ---------- */

.labs-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.labs-field > label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.labs-input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 14px;
  width: 100%;
  outline: none;
  transition:
    border-color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.labs-input:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
.labs-input:focus-visible {
  border-color: var(--brand-blue-light);
  background: var(--bg-elev-2);
  box-shadow: 0 0 0 3px rgba(101, 162, 208, 0.18);
}
/* Invalid state is carried by the border AND aria-invalid.
   Color alone would be the only signal for a colorblind user,
   which on a color tool would be a particularly bad joke. */
.labs-input.is-invalid {
  border-color: var(--labs-status-wip);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--labs-status-wip) 16%, transparent);
}

.labs-field-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--labs-text-muted);
  margin: 0;
}

/* ---------- small button ---------- */

.labs-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
}
.labs-btn-sm:hover {
  color: var(--text-primary);
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.labs-btn-sm:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 3px;
}

/* ---------- tabs ---------- */

.labs-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.labs-tab {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}
.labs-tab:hover { color: var(--text-secondary); }
.labs-tab.is-active {
  background: var(--bg-elev-2);
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.labs-tab:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}

/* ---------- code block ---------- */

.labs-code {
  margin: 0;
  padding: 20px 22px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  /* A long token block should scroll itself, not the page. */
  max-height: 460px;
  overflow: auto;
}
.labs-code:focus-visible {
  outline: 2px solid var(--brand-blue-light);
  outline-offset: 2px;
}
.labs-code code { font: inherit; color: inherit; white-space: pre; }