/* Shared component layout. Values come from tokens.generated.css in OpenDesign. */
:root {
  --chrome-top: var(--shell-studio-min-height);
  --product-nav-height: var(--shell-product-min-height);
  --shell-height: calc(var(--chrome-top) + var(--product-nav-height));
}
:root[data-shell-page="studio"] { --product-nav-height: 0px; }
.site-shell, .site-shell * { box-sizing: border-box; }
.site-shell {
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: var(--shell-ink); font-family: var(--shell-font);
  --shell-inset: clamp(var(--shell-inset-compact), 2vw, var(--shell-inset-wide));
}
.site-shell a { color: inherit; text-decoration: none; }
.site-shell button {
  appearance: none; color: inherit; cursor: pointer;
}
.site-shell :is(a, button):focus-visible {
  outline: var(--shell-focus-width) solid var(--shell-house-accent);
  outline-offset: var(--shell-focus-offset);
}
.shell-studio {
  position: relative; --shell-stage-layout: centered;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--shell-gap); min-height: var(--shell-studio-min-height);
  padding: 0 var(--shell-inset); background: var(--shell-studio);
  border-bottom: 1px solid var(--shell-line);
  --signal: var(--shell-house-accent);
}
.shell-home {
  display: inline-flex; flex: none; align-items: center; min-height: var(--shell-target-min);
  color: var(--shell-identity-studio) !important;
  --signal: var(--shell-identity-studio);
}
.shell-home .shell-art { width: calc(var(--shell-art-ratio) * var(--shell-studio-cap)); }
.shell-art { display: block; flex: none; }
.shell-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.shell-art--dark { display: none; }
:root[data-theme="dark"] .shell-art--light:has(+ .shell-art--dark) { display: none; }
:root[data-theme="dark"] .shell-art--dark { display: block; }
.shell-studio__controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--shell-control-gap); min-width: 0; max-width: 100%; margin-left: auto; }
.shell-button, .shell-links a, .shell-view-options button, .shell-staging {
  font-family: var(--shell-font); font-size: var(--shell-label-size);
  line-height: var(--shell-line-height); letter-spacing: var(--shell-tracking);
  text-transform: var(--shell-text-transform);
}
.shell-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--shell-control-gap); min-height: var(--shell-target-min); min-width: var(--shell-target-min);
  padding: var(--shell-control-gap) var(--shell-gap);
  border: 1px solid var(--shell-line); border-radius: var(--shell-radius); background: transparent;
}
.shell-theme { color: var(--shell-theme-control-ink); border-color: var(--shell-theme-control-border); background: var(--shell-theme-control-background); padding: var(--shell-control-gap); border-radius: 50%; flex: none; }
.shell-theme svg { width: 1rem; height: 1rem; fill: currentColor; }
.shell-theme .shell-sun, :root[data-theme="dark"] .shell-theme .shell-moon { display: none; }
:root[data-theme="dark"] .shell-theme .shell-sun { display: block; }
.shell-caret { width: .45em; height: .45em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-.15em); flex: none; }
[aria-expanded="true"] > .shell-caret { transform: rotate(225deg) translate(-.1em, -.1em); }
.shell-studio .shell-button:hover, .shell-view-options button:hover { color: var(--shell-ink); border-color: var(--shell-ink); }
/* Product navigation uses neutral ink, including sticky touch hover. */
.shell-product .shell-button, .shell-product .shell-links a { color: var(--shell-ink); }
.shell-product .shell-button:hover, .shell-product .shell-links a:hover { color: var(--shell-ink); }
.shell-product .shell-links a:hover { text-decoration: underline; text-underline-offset: .3em; }
/* Preserve the original Carbon control's neutral normal/hover treatment. */
.site-shell .shell-theme { color: var(--shell-theme-control-ink); }
.site-shell .shell-theme:hover { color: var(--shell-ink); border-color: var(--shell-ink); }
.shell-product {
  --shell-layout: menu;
  position: relative; display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 var(--shell-gap); min-height: var(--shell-product-min-height);
  padding: 0 var(--shell-inset); background: var(--shell-product);
  border-bottom: 1px solid var(--shell-line);
}
.shell-product__identity {
  display: inline-flex; align-items: center; flex: none; max-width: 100%;
  min-height: var(--shell-target-min);
  padding-block: calc(var(--shell-product-cap) * var(--shell-clear-space-ratio));
}
.shell-product__identity .shell-art { width: calc(var(--shell-art-ratio) * var(--shell-product-cap)); max-width: 100%; }
.shell-product__identity .shell-art > svg { max-width: 100%; }
.shell-product__name { font-size: var(--shell-product-cap); }
.shell-links { display: flex; align-items: center; gap: var(--shell-link-gap); margin: 0 0 0 auto; padding: 0; list-style: none; }
.shell-links li { margin: 0; padding: 0; }
.shell-links a { display: flex; align-items: center; min-height: var(--shell-target-min); white-space: nowrap; }
.shell-menu { display: none; margin-left: auto; flex: none; }
/* Unenhanced HTML keeps every destination reachable. */
.site-shell:not([data-enhanced]) .shell-product[data-layout="inline"] .shell-links { flex-wrap: wrap; }
.site-shell:not([data-enhanced]) .shell-product[data-layout="inline"] .shell-links a { white-space: normal; }
.shell-product[data-layout="auto"] .shell-menu,
.shell-product[data-layout="menu"] .shell-menu,
.shell-product[data-layout="wrapped"] .shell-menu { display: inline-flex; }
.shell-product[data-layout="wrapped"] .shell-menu { width: 100%; justify-content: space-between; margin: 0 0 var(--shell-control-gap); }
.shell-product:not([data-layout="inline"]) > .shell-links {
  display: none; position: absolute; inset: 100% 0 auto; margin: 0;
  background: var(--shell-panel); padding: var(--shell-control-gap) var(--shell-inset);
  border-bottom: 1px solid var(--shell-line);
  max-height: calc(100dvh - var(--shell-height) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.shell-product[data-open="true"] > .shell-links { display: block; }
.shell-product:not([data-layout="inline"]) > .shell-links a { white-space: normal; overflow-wrap: anywhere; padding-block: var(--shell-control-gap); }
.shell-product:not([data-layout="inline"]) > .shell-links li + li { border-top: 1px solid var(--shell-line); }
.shell-product a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }
.shell-view { position: relative; }
.shell-view-options { display: flex; gap: var(--shell-control-gap); }
.shell-view-options button[aria-pressed="true"] { color: var(--shell-ink); border-color: var(--shell-ink); background: var(--shell-home-control-selected); }
.shell-view-toggle { display: none; }
.shell-view[data-compact="true"] .shell-view-toggle { display: inline-flex; }
.shell-view[data-compact="true"] .shell-view-options {
  display: none; position: absolute; top: 100%; right: 0; padding: var(--shell-control-gap);
  background: var(--shell-panel); border: 1px solid var(--shell-line); min-width: max-content;
}
.shell-view[data-open="true"] .shell-view-options { display: flex; flex-direction: column; }
.shell-measure {
  position: absolute !important; top: 0 !important; left: 0 !important;
  visibility: hidden !important; pointer-events: none !important;
  width: max-content !important; height: auto !important; max-height: none !important;
  display: flex !important; flex-wrap: nowrap !important;
}
.shell-measure a { white-space: nowrap !important; }
.shell-menu.shell-measure { gap: var(--shell-control-gap) !important; }
/* One server-rendered flag. A content-derived rule gives it its own line only
   when exact centering would overlap the identity or compact controls. */
.shell-staging-slot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.site-shell .shell-staging {
  display: inline-flex; flex: none; align-items: center; justify-content: center; white-space: nowrap;
  width: calc(7 * (var(--shell-label-advance) + var(--shell-staging-tracking)) + 2 * var(--shell-staging-pad-inline) + 2px);
  font-size: var(--shell-staging-label-size); letter-spacing: var(--shell-staging-tracking);
  padding: var(--shell-staging-pad-block) var(--shell-staging-pad-inline);
  border: 1px solid var(--shell-house-accent); border-radius: var(--shell-radius);
  color: var(--shell-house-accent); background: color-mix(in srgb,var(--shell-product) 85%,transparent);
}
.shell-view-icon { width: var(--shell-home-chip-icon-size); height: var(--shell-home-chip-icon-size); fill: currentColor; flex: none; }
.site-shell[data-page="studio"] .shell-button {
  font-size: var(--shell-home-label-size); letter-spacing: var(--shell-home-tracking);
  gap: var(--shell-home-chip-gap); padding: var(--shell-home-chip-pad-block) var(--shell-home-chip-pad-inline);
  border-radius: var(--shell-home-chip-radius); color: var(--shell-home-control-ink);
}
.site-shell[data-page="studio"] .shell-theme svg { width: var(--shell-home-chip-icon-size); height: var(--shell-home-chip-icon-size); }
.site-shell[data-page="studio"] .shell-theme { background: transparent; border-color: var(--shell-line); }
.site-shell[data-page="studio"] .shell-button:hover,
.site-shell[data-page="studio"] .shell-button[aria-pressed="true"] { color: var(--shell-ink); border-color: var(--shell-ink); }
.site-shell[data-page="studio"] .shell-button[aria-pressed="true"] { background: var(--shell-home-control-selected); }
.shell-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell-skip { position: fixed; z-index: 201; top: .5rem; left: var(--shell-inset-compact); padding: .5rem 1rem; background: var(--shell-panel); color: var(--shell-ink); transform: translateY(-200%); }
.shell-skip:focus { transform: none; }
html[data-shell-page] { scroll-padding-top: calc(var(--shell-height) + var(--shell-anchor-gap)); }
/* Old page offsets already include the stack; do not count it twice on anchors. */
html[data-shell-page="product"] #landing [id] { scroll-margin-top: var(--shell-anchor-gap); }
@supports (padding: max(0px)) {
  .shell-studio, .shell-product { padding-left: max(var(--shell-inset), env(safe-area-inset-left)); padding-right: max(var(--shell-inset), env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: no-preference) {
  .shell-button { transition: color var(--shell-duration) var(--shell-easing), border-color var(--shell-duration) var(--shell-easing); }
}

.shell-measure-host { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }

.shell-product__identity .shell-art--custom { width: calc(var(--shell-art-ratio) * var(--shell-custom-artwork-height)); }

.shell-product__identity { --signal: var(--shell-brand-accent-light, currentColor); }
:root[data-theme="dark"] .shell-product__identity { --signal: var(--shell-brand-accent-dark, currentColor); }

.shell-product[data-layout="inline"] { --shell-layout: inline; }
.shell-product[data-layout="wrapped"] { --shell-layout: wrapped; }

/* Canonical mono budgets reserve the final widths before the font arrives. */
.site-shell[data-page="studio"] .shell-view-options .shell-button {
  width: max(var(--shell-target-min),calc(var(--shell-view-label-length) * (var(--shell-label-advance) + var(--shell-home-tracking)) + var(--shell-home-chip-icon-size) + var(--shell-home-chip-gap) + 2 * var(--shell-home-chip-pad-inline) + 2px));
}
.site-shell[data-page="studio"] .shell-view-toggle {
  width: max(var(--shell-target-min),calc(4 * (var(--shell-label-advance) + var(--shell-home-tracking)) + .45em + var(--shell-home-chip-gap) + 2 * var(--shell-home-chip-pad-inline) + 2px));
}

/* Theme bootstrap knows the mode before enhancement reflects aria-pressed. */
:root[data-theme="dark"] .site-shell[data-page="studio"] .shell-theme {
  color: var(--shell-ink); border-color: var(--shell-ink); background: var(--shell-home-control-selected);
}
/* The website applies its saved body view before paint; preserve its active chip
   while the shared controls are awaiting enhancement. */
body[data-view="index"] .site-shell:not([data-enhanced]) #view-diagram {
  color: var(--shell-home-control-ink); border-color: var(--shell-line); background: transparent;
}
body[data-view="index"] .site-shell:not([data-enhanced]) #view-index {
  color: var(--shell-ink); border-color: var(--shell-ink); background: var(--shell-home-control-selected);
}
/* Retain the prior desktop theme pill; coarse pointers keep a 44px target. */
@media (hover: hover) and (pointer: fine) {
  .site-shell[data-page="studio"] .shell-theme { min-height: 0; }
}