/* Author: Codex | Project: Polaris | Date: 2026-09-27
 * File: styles.css | Description: Semantic-token components and opt-in typography roles. */
.polaris-surface {
  color: var(--polaris-text, #fff);
  background: color-mix(in srgb, var(--polaris-surface, #141719) calc(var(--polaris-glass-opacity, .8) * 100%), transparent);
  border: 1px solid color-mix(in srgb, var(--polaris-border, #7b8984) calc(var(--polaris-glass-border-opacity, .3) * 100%), transparent);
  backdrop-filter: blur(var(--polaris-glass-blur, 24px)) saturate(var(--polaris-glass-saturation, 1.2));
  -webkit-backdrop-filter: blur(var(--polaris-glass-blur, 24px)) saturate(var(--polaris-glass-saturation, 1.2));
}
.polaris-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-block-size: max(44px, 2.75em); padding: .65em 1.1em;
  border: 1px solid var(--polaris-border, #67756f); border-radius: 999px;
  color: var(--polaris-text, #fff); background: var(--polaris-surface, #131816);
  font-family: var(--polaris-font-control-family, system-ui, sans-serif);
  font-size: var(--polaris-font-control-size, 14px); font-weight: var(--polaris-font-control-weight, 600);
  line-height: var(--polaris-font-control-line-height, 1.3); letter-spacing: var(--polaris-font-control-tracking, 0);
  font-stretch: var(--polaris-font-control-width, normal); font-variation-settings: var(--polaris-font-control-variation, normal);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.polaris-button:hover { filter: brightness(1.15); }
.polaris-button:disabled { opacity: .5; cursor: not-allowed; }
.polaris-button-primary { background: var(--polaris-primary-fill); color: var(--polaris-primary-text); border-color: var(--polaris-primary-fill); }
.polaris-button-secondary { background: var(--polaris-secondary-fill); color: var(--polaris-secondary-text); border-color: var(--polaris-secondary-fill); }
.polaris-icon-button { inline-size: max(44px, 2.75em); block-size: max(44px, 2.75em); padding: 0; flex: 0 0 auto; border-radius: 50%; }
:where(.polaris-button, .polaris-header-brand, .polaris-lab input, .polaris-lab select, .polaris-lab textarea):focus-visible { outline: 3px solid var(--polaris-focus, #ccee44); outline-offset: 4px; }
.polaris-header-host { position: sticky; top: 0; z-index: 20; }
.polaris-header {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr); align-items: center;
  box-sizing: border-box; width: 100%; min-height: 82px; gap: 16px; padding: 14px 16px;
  color: var(--polaris-header-text, #fff); background: color-mix(in srgb, var(--polaris-header-fill, #07090b) 94%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--polaris-border, #67756f) 25%, transparent); backdrop-filter: blur(var(--polaris-glass-blur, 24px));
}
.polaris-header-side { min-width: 0; display: flex; gap: 8px; align-items: center; }
.polaris-header-right { justify-content: flex-end; }
/* Keep a reachable escape hatch even when experimental control text becomes very large. */
.polaris-overflow-trigger { inline-size: 44px; block-size: 44px; min-block-size: 44px; font-size: 20px; }
.polaris-header-brand { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: calc(100vw - 144px); font: 600 17px/1.2 system-ui, sans-serif; letter-spacing: .04em; text-align: center; text-decoration: none; overflow-wrap: anywhere; color: inherit; }
.polaris-header-brand img { width: 30px; height: 30px; object-fit: contain; }
.polaris-header-measure { position: fixed; inset: -10000px auto auto -10000px; display: flex; gap: 8px; width: max-content; visibility: hidden; pointer-events: none; }
.polaris-header-menu { width: min(360px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--polaris-border); border-radius: 20px; background: var(--polaris-surface-raised); color: var(--polaris-text); }
.polaris-header-menu h2 { margin: 0 0 20px; font: 600 20px/1.3 system-ui, sans-serif; }
.polaris-menu-actions { display: grid; gap: 10px; margin-bottom: 20px; }
.polaris-menu-actions .polaris-button { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.polaris-header-menu::backdrop, .polaris-lab::backdrop { background: #0008; }
/* Polaris owns launcher branding; the lab panels below continue to follow the consuming app. */
.polaris-lab-launcher {
  --polaris-tool-dark: #07090b; --polaris-tool-glass: #07090bf5; --polaris-tool-text: #f3f5f4;
  --polaris-tool-gold: #d9a55d; --polaris-tool-gold-light: #fff4cf;
  --polaris-tool-aurora-emerald: #3dffa6; --polaris-tool-aurora-teal: #20e7ee;
  --polaris-tool-aurora-cyan: #638bff; --polaris-tool-aurora-violet: #dc76ff;
  position: fixed; z-index: 1000; right: 20px; bottom: 20px; color-scheme: dark;
}
.polaris-lab-launcher .polaris-lab-trigger { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--polaris-tool-gold) 25%, transparent); border-radius: 14px; background: var(--polaris-tool-glass); color: var(--polaris-tool-gold); cursor: pointer; box-shadow: 0 6px 20px #0004; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.polaris-lab-launcher .polaris-lab-trigger:hover { background: var(--polaris-tool-dark); color: var(--polaris-tool-gold-light); border-color: color-mix(in srgb, var(--polaris-tool-gold) 50%, transparent); filter: none; }
.polaris-lab-trigger svg { display: block; width: 40px; height: 40px; overflow: visible; }
.polaris-lab-launcher :is(.polaris-lab-trigger, .polaris-button):focus-visible { outline: 3px solid var(--polaris-tool-gold-light); outline-offset: 4px; }
.polaris-lab-choices { position: absolute; right: -7px; bottom: 54px; display: grid; gap: 6px; box-sizing: border-box; width: 58px; padding: 6px; border: 1px solid color-mix(in srgb, var(--polaris-tool-gold) 45%, transparent); border-radius: 14px; background: var(--polaris-tool-glass); box-shadow: 0 12px 40px #0008; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.polaris-lab-choices[hidden] { display: none; }
.polaris-lab-choices .polaris-button { justify-content: center; border-radius: 8px; }
.polaris-lab-launcher .polaris-button { box-sizing: border-box; width: 44px; height: 44px; min-block-size: 44px; padding: 0; color: var(--polaris-tool-gold); background: transparent; border: 0; box-shadow: none; font: 600 13px/1.3 system-ui, sans-serif; font-variation-settings: normal; }
.polaris-lab-choices svg { display: block; width: 26px; height: 26px; stroke-width: 2.5; pointer-events: none; }
.polaris-lab-launcher .polaris-button:hover { color: var(--polaris-tool-gold-light); background: transparent; box-shadow: none; filter: none; }
.polaris-lab-launcher .polaris-button:hover svg { filter: brightness(1.15); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .polaris-lab-launcher { --polaris-tool-glass: var(--polaris-tool-dark); }
  .polaris-lab-launcher :is(.polaris-lab-trigger, .polaris-lab-choices) { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (forced-colors: active) {
  .polaris-lab-launcher .polaris-lab-choices { background: Canvas; border-color: ButtonText; }
  .polaris-lab-launcher :is(.polaris-lab-trigger, .polaris-button), .polaris-lab-launcher :is(.polaris-lab-trigger, .polaris-button):hover { background: transparent; color: CanvasText; }
  .polaris-lab-launcher :is(.polaris-lab-trigger, .polaris-button):focus-visible { outline-color: Highlight; }
  .polaris-lab-trigger path { fill: ButtonText; }
  .polaris-lab-choices svg { stroke: ButtonText; }
  .polaris-lab-choices svg [fill^="url("] { fill: ButtonText; }
}
.polaris-lab { --polaris-lab-edge: color-mix(in srgb, var(--polaris-border, #7b9b8d) 16%, transparent); --polaris-lab-control: color-mix(in srgb, var(--polaris-surface-inset, #050505) 65%, var(--polaris-surface-raised, #101010)); box-sizing: border-box; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: 12px 12px 12px auto; padding: 0; color: var(--polaris-text, #eff5f1); background: color-mix(in srgb, var(--polaris-surface-raised, #101816) 94%, transparent); border: 1px solid var(--polaris-lab-edge); border-radius: 14px; font: 400 14px/1.5 system-ui, sans-serif; box-shadow: 0 18px 44px #0005; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.polaris-lab *, .polaris-lab *::before, .polaris-lab *::after { box-sizing: border-box; }
.polaris-lab-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; background: var(--polaris-surface-raised, #101816); border-bottom: 1px solid var(--polaris-lab-edge); }
.polaris-lab-head h2 { margin: 0; font: 600 16px/1.3 system-ui, sans-serif; }
.polaris-lab .polaris-button { min-block-size: 44px; padding: 10px 14px; border: 0; border-radius: 10px; color: var(--polaris-text, #fff); background: var(--polaris-lab-control); box-shadow: none; font: 600 12px/1.3 system-ui, sans-serif; letter-spacing: normal; font-variation-settings: normal; white-space: normal; }
.polaris-lab .polaris-button:hover { background: color-mix(in srgb, var(--polaris-text, #fff) 8%, var(--polaris-lab-control)); filter: none; }
.polaris-lab-head .polaris-button { color: var(--polaris-text-muted, #bacac1); }
.polaris-lab-body { padding: 0 20px 20px; }
.polaris-lab-note, .polaris-lab-status { margin: 14px 20px; color: var(--polaris-text-muted, #bacac1); font: 400 12px/1.5 system-ui, sans-serif; }
.polaris-lab-body > .polaris-lab-note { margin-inline: 0; }
.polaris-lab-status { color: var(--polaris-text, #e1f0d0); }
.polaris-fieldset { min-width: 0; margin: 24px 0; padding: 8px 0 0; border: 0; border-radius: 0; }
.polaris-fieldset legend { padding: 0; color: var(--polaris-text-muted, #bacac1); font: 700 12px/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.polaris-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-block: 10px; font: 400 13px/1.5 system-ui, sans-serif; }
.polaris-field > span { flex: 1; }
.polaris-field input, .polaris-field select, .polaris-field textarea { max-width: 60%; min-height: 44px; min-width: 0; width: 180px; border: 1px solid var(--polaris-lab-edge); border-radius: 10px; color: var(--polaris-text, #fff); background: var(--polaris-lab-control); font: 400 14px/1.4 system-ui, sans-serif; padding: 8px; }
.polaris-field input[type=color] { width: 100%; height: 44px; padding: 4px; }
.polaris-field input:disabled { opacity: .45; cursor: not-allowed; }
.polaris-field:has(textarea) { display: block; }
.polaris-field textarea { display: block; width: 100%; max-width: none; margin-top: 8px; resize: vertical; font-family: ui-monospace, monospace; font-size: 11px; }
.polaris-shades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.polaris-shades .polaris-field { display: flex; flex-direction: column; gap: 5px; font-size: 10px; text-align: center; }
.polaris-shades input { max-width: 100%; }
.polaris-lab-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.polaris-checkbox { display: flex; gap: 10px; align-items: center; padding: 12px 0; }
.polaris-checkbox input { width: 20px; height: 20px; accent-color: var(--polaris-primary-fill); }
.polaris-glass-preview { display: grid; place-items: center; min-height: 150px; padding: 24px; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(120deg, var(--polaris-primary-300) 0 18px, var(--polaris-secondary-700) 18px 36px, var(--polaris-accent-300) 36px 54px); }
.polaris-glass-sample { width: 100%; padding: 28px 16px; border-radius: 12px; text-align: center; }
.polaris-glass-control { display: grid; gap: 8px; margin-bottom: 20px; }
.polaris-glass-caption { display: flex; justify-content: space-between; gap: 12px; }
.polaris-glass-caption output { font-variant-numeric: tabular-nums; }
.polaris-lab .polaris-glass-control input { width: 100%; min-height: 44px; margin: 0; padding: 0; accent-color: var(--polaris-primary-fill); }
.polaris-glass-advanced { margin-bottom: 16px; }
.polaris-glass-advanced summary { min-height: 44px; cursor: pointer; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .polaris-lab { background: var(--polaris-surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) { .polaris-lab { --polaris-lab-edge: var(--polaris-border); } }
@media (forced-colors: active) {
  .polaris-lab { --polaris-lab-edge: ButtonText; --polaris-lab-control: Canvas; }
  .polaris-lab .polaris-button, .polaris-field input, .polaris-field select, .polaris-field textarea { color: ButtonText; background: Canvas; border: 1px solid ButtonText; }
}
[data-polaris-role] { font-family: var(--role-family, system-ui, sans-serif); font-weight: var(--role-weight, 400); font-size: var(--role-size, 16px); line-height: var(--role-line-height, 1.5); letter-spacing: var(--role-tracking, 0); font-stretch: var(--role-width, normal); font-variation-settings: var(--role-variation, normal); font-synthesis: none; }
@media (max-width: 480px) { .polaris-lab-launcher { right: 12px; bottom: 12px; } .polaris-header-brand { font-size: 14px; gap: 6px; } .polaris-header-brand img { width: 24px; height: 24px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .polaris-surface, .polaris-header { background: var(--polaris-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--polaris-border); } }
@media (forced-colors: active) { .polaris-surface, .polaris-button, .polaris-header, .polaris-lab { background: Canvas; color: CanvasText; border-color: CanvasText; backdrop-filter: none; } .polaris-button-primary, .polaris-button-secondary { background: ButtonFace; color: ButtonText; } }

[data-polaris-role="serif_heading"] { --role-family: var(--polaris-font-serif-heading-family); --role-weight: var(--polaris-font-serif-heading-weight); --role-size: var(--polaris-font-serif-heading-size); --role-line-height: var(--polaris-font-serif-heading-line-height); --role-tracking: var(--polaris-font-serif-heading-tracking); --role-width: var(--polaris-font-serif-heading-width); --role-variation: var(--polaris-font-serif-heading-variation); }
[data-polaris-role="sans_heading"] { --role-family: var(--polaris-font-sans-heading-family); --role-weight: var(--polaris-font-sans-heading-weight); --role-size: var(--polaris-font-sans-heading-size); --role-line-height: var(--polaris-font-sans-heading-line-height); --role-tracking: var(--polaris-font-sans-heading-tracking); --role-width: var(--polaris-font-sans-heading-width); --role-variation: var(--polaris-font-sans-heading-variation); }
[data-polaris-role="serif_body"] { --role-family: var(--polaris-font-serif-body-family); --role-weight: var(--polaris-font-serif-body-weight); --role-size: var(--polaris-font-serif-body-size); --role-line-height: var(--polaris-font-serif-body-line-height); --role-tracking: var(--polaris-font-serif-body-tracking); --role-width: var(--polaris-font-serif-body-width); --role-variation: var(--polaris-font-serif-body-variation); }
[data-polaris-role="sans_body"] { --role-family: var(--polaris-font-sans-body-family); --role-weight: var(--polaris-font-sans-body-weight); --role-size: var(--polaris-font-sans-body-size); --role-line-height: var(--polaris-font-sans-body-line-height); --role-tracking: var(--polaris-font-sans-body-tracking); --role-width: var(--polaris-font-sans-body-width); --role-variation: var(--polaris-font-sans-body-variation); }
[data-polaris-role="label"] { --role-family: var(--polaris-font-label-family); --role-weight: var(--polaris-font-label-weight); --role-size: var(--polaris-font-label-size); --role-line-height: var(--polaris-font-label-line-height); --role-tracking: var(--polaris-font-label-tracking); --role-width: var(--polaris-font-label-width); --role-variation: var(--polaris-font-label-variation); }
[data-polaris-role="control"] { --role-family: var(--polaris-font-control-family); --role-weight: var(--polaris-font-control-weight); --role-size: var(--polaris-font-control-size); --role-line-height: var(--polaris-font-control-line-height); --role-tracking: var(--polaris-font-control-tracking); --role-width: var(--polaris-font-control-width); --role-variation: var(--polaris-font-control-variation); }
[data-polaris-role="script"] { --role-family: var(--polaris-font-script-family); --role-weight: var(--polaris-font-script-weight); --role-size: var(--polaris-font-script-size); --role-line-height: var(--polaris-font-script-line-height); --role-tracking: var(--polaris-font-script-tracking); --role-width: var(--polaris-font-script-width); --role-variation: var(--polaris-font-script-variation); }
[data-polaris-role="mono"] { --role-family: var(--polaris-font-mono-family); --role-weight: var(--polaris-font-mono-weight); --role-size: var(--polaris-font-mono-size); --role-line-height: var(--polaris-font-mono-line-height); --role-tracking: var(--polaris-font-mono-tracking); --role-width: var(--polaris-font-mono-width); --role-variation: var(--polaris-font-mono-variation); }

/* Explicit material roles keep appearance independent of structural component selectors. */
[data-polaris-glass] { background: color-mix(in srgb, var(--glass-tint) calc(var(--glass-opacity) * 100%), transparent); border: 1px solid color-mix(in srgb, var(--polaris-border) calc(var(--glass-edge) * 100%), transparent); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); }
[data-polaris-glass="background"] { --glass-tint: var(--polaris-glass-background-tint); --glass-opacity: var(--polaris-glass-background-opacity); --glass-blur: var(--polaris-glass-background-blur); --glass-saturation: var(--polaris-glass-background-saturation); --glass-edge: var(--polaris-glass-background-border-opacity); }
[data-polaris-glass="container"] { --glass-tint: var(--polaris-glass-container-tint); --glass-opacity: var(--polaris-glass-container-opacity); --glass-blur: var(--polaris-glass-container-blur); --glass-saturation: var(--polaris-glass-container-saturation); --glass-edge: var(--polaris-glass-container-border-opacity); }
[data-polaris-glass="surface"] { --glass-tint: var(--polaris-glass-surface-tint); --glass-opacity: var(--polaris-glass-surface-opacity); --glass-blur: var(--polaris-glass-surface-blur); --glass-saturation: var(--polaris-glass-surface-saturation); --glass-edge: var(--polaris-glass-surface-border-opacity); }
[data-polaris-glass="functional"] { --glass-tint: var(--polaris-glass-functional-tint); --glass-opacity: var(--polaris-glass-functional-opacity); --glass-blur: var(--polaris-glass-functional-blur); --glass-saturation: var(--polaris-glass-functional-saturation); --glass-edge: var(--polaris-glass-functional-border-opacity); }
/* Lyra's quiet control treatment keeps each choice a button without a heavy filled state. */
.polaris-glass-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 10px; }
.polaris-glass-switch-label { grid-column: 1 / -1; margin-bottom: 2px; color: var(--polaris-text-muted); font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.polaris-lab .polaris-glass-option { justify-content: center; min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--polaris-text, #fff) 12%, transparent); border-radius: 10px; color: var(--polaris-text-muted); background: color-mix(in srgb, var(--polaris-text, #fff) 4.5%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--polaris-text, #fff) 6%, transparent); font: 600 13px/1.3 system-ui, sans-serif; text-align: center; }
.polaris-lab .polaris-glass-option:hover { color: var(--polaris-text); background: color-mix(in srgb, var(--polaris-text, #fff) 9.5%, transparent); border-color: color-mix(in srgb, var(--polaris-text, #fff) 26%, transparent); }
.polaris-lab .polaris-glass-option[aria-pressed="true"] { border-color: color-mix(in srgb, var(--polaris-primary-fill) 48%, transparent); color: var(--polaris-text); background: color-mix(in srgb, var(--polaris-primary-fill) 10%, transparent); box-shadow: inset 0 1px color-mix(in srgb, var(--polaris-text, #fff) 10%, transparent); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .polaris-lab .polaris-glass-option, .polaris-lab .polaris-glass-option:hover { border-color: var(--polaris-border); background: var(--polaris-lab-control); } .polaris-lab .polaris-glass-option[aria-pressed="true"] { border-color: var(--polaris-primary-fill); background: var(--polaris-surface-raised); } }
@media (forced-colors: active) { .polaris-lab .polaris-glass-option, .polaris-lab .polaris-glass-option:hover, .polaris-lab .polaris-glass-option[aria-pressed="true"] { color: ButtonText; background: ButtonFace; border-color: ButtonText; box-shadow: none; } .polaris-lab .polaris-glass-option[aria-pressed="true"] { border-width: 2px; } }
.polaris-glass-endpoints { display: flex; justify-content: space-between; font-size: 11px; color: var(--polaris-text-muted); }
.polaris-glass-preview { position: relative; gap: 12px; isolation: isolate; margin-top: 16px; }
.polaris-glass-backdrop { position: absolute; inset: 0; z-index: -1; }
.polaris-glass-sample { box-sizing: border-box; padding: 12px; }
.polaris-glass-sample > .polaris-glass-sample { margin-top: 12px; }
.polaris-glass-function { padding: 7px 14px; border-radius: 8px; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { [data-polaris-glass] { background: var(--glass-tint); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (forced-colors: active) { [data-polaris-glass] { background: Canvas; border-color: CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none; } }

.polaris-lab .polaris-glass-control input { touch-action: pan-y; cursor: ew-resize; }