/* Component Library: all visual values come from the canonical token sheets. */

.reference-body .page-shell{width:min(calc(100% - var(--spacing-48)),calc(16rem + var(--spacing-36) + 60rem));grid-template-columns:16rem minmax(0,60rem)}
.reference-main{grid-area:content;min-width:0;width:100%}
.reference-intro{max-width:var(--content-measure)}
.reference-intro h1{margin:0 0 var(--spacing-12);color:var(--color-ink);font-size:clamp(2rem,5vw,2.75rem);line-height:1.2;letter-spacing:-.02em}
.reference-intro p{margin:0 0 var(--spacing-24);color:var(--color-ink-muted)}
.profile-switch,.ref-toggle-group{display:inline-flex;flex-wrap:wrap;gap:var(--spacing-micro-4);padding:var(--spacing-micro-4);border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-control);background:var(--color-surface)}
.profile-switch button,.ref-toggle-group button{appearance:none;min-height:36px;padding:var(--control-padding-block) var(--control-padding-inline);border:var(--control-border-width) solid transparent;border-radius:calc(var(--radius-control) - var(--spacing-micro-3));background:transparent;color:var(--color-ink-muted);font:600 .875rem/1.4 var(--font-ui);cursor:pointer}
.profile-switch button:is(:hover,.is-demo-hover,.is-hover-demo),.ref-toggle-group button:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
.profile-switch button[aria-pressed="true"],.ref-toggle-group button[aria-pressed="true"]{border-color:var(--color-brand-primary-hover);background:var(--color-surface);color:var(--color-brand-primary-strong);font-weight:700;box-shadow:inset 0 -2px 0 var(--color-brand-primary-hover)}
.profile-switch button:disabled,.ref-toggle-group button:disabled{border-color:transparent;background:var(--color-surface);color:var(--color-ink-muted);box-shadow:none;cursor:not-allowed}
.profile-view-status{min-height:1.4em;margin:var(--spacing-micro-6) 0 0;color:var(--color-ink-muted);font-size:.8125rem}
.library-search{margin-bottom:var(--spacing-24);padding-bottom:var(--spacing-24);border-bottom:var(--control-border-width) solid var(--color-divider)}
.library-search .search-status{min-height:1.4em;margin:var(--spacing-micro-6) 0 0}
.library-navigation{padding-bottom:var(--spacing-48)}
.library-navigation__group+.library-navigation__group{margin-top:var(--spacing-24)}
.library-navigation__group h2{margin:0 0 var(--spacing-micro-6);color:var(--color-ink);font-size:.875rem;line-height:1.4}
.library-navigation__group ul{margin:0;padding:0;list-style:none}
.library-navigation__group a{display:block;padding:var(--spacing-micro-4) 0 var(--spacing-micro-4) var(--spacing-12);border-left:var(--control-border-width) solid var(--color-divider);color:var(--color-ink-muted);font-size:.8125rem;line-height:1.45;text-decoration:none}
.library-navigation__group a:hover{border-left-color:var(--color-brand-primary-hover);color:var(--color-brand-primary-strong);text-decoration:underline;text-decoration-thickness:2px}
[data-library-link][hidden],[data-library-item][hidden],[data-profile-item][hidden],[data-library-group][hidden],[data-library-group-main][hidden]{display:none}
.reference-library-group,.reference-section{margin-top:var(--spacing-72);scroll-margin-top:var(--spacing-24)}
.reference-library-group>h2{margin:0 0 var(--spacing-12);color:var(--color-ink);font-size:1.8rem;line-height:1.25}
.reference-library-group>p,.reference-section>p{max-width:var(--content-measure);margin:0;color:var(--color-ink-muted)}
.reference-section>h3{margin:0 0 var(--spacing-12);color:var(--color-heading-section);font-size:1.45rem;line-height:1.3}
.reference-section>p{margin-bottom:var(--spacing-24)}
.spec-link{font-size:.875rem}
.example-stage{min-width:0;padding:var(--spacing-24);border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-surface);background:var(--color-surface)}
.reference-example{container-type:inline-size;display:grid;gap:var(--spacing-36);min-width:0}
.reference-example__live{min-width:0;padding-bottom:var(--spacing-36);border-bottom:var(--control-border-width) solid var(--color-divider)}
.state-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-36) var(--spacing-24);min-width:0}
.state-specimen{container-type:inline-size;min-width:0;padding-top:var(--spacing-12);border-top:var(--control-border-width) solid var(--color-divider)}
.state-specimen--wide{grid-column:1/-1}
.state-specimen__name{margin:0 0 var(--spacing-12);color:var(--color-ink);font:700 .8125rem/1.4 var(--font-ui)}
.state-specimen__body{display:grid;min-width:0;align-content:start;justify-items:start;gap:var(--spacing-12)}
.state-specimen__body>:only-child{max-width:100%}
.state-specimen__note,.ref-example-note{margin:var(--spacing-12) 0 0;color:var(--color-ink-muted);font-size:.8125rem;line-height:1.6}
.example-row,.ref-actions,.ref-overlay-triggers{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-12)}
.example-stack{display:grid;gap:var(--spacing-24)}
.ref-icon{display:inline-block;width:1.25em;height:1.25em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;pointer-events:none}

/* Actions */
.ref-button,.ref-icon-button{appearance:none;display:inline-flex;min-height:var(--control-important-target);align-items:center;justify-content:center;gap:var(--spacing-micro-6);padding:calc(var(--control-padding-block) + var(--spacing-micro-2)) calc(var(--control-padding-inline) + var(--spacing-micro-6));border:var(--control-border-width) solid transparent;border-radius:var(--radius-control);font:650 .9375rem/1.4 var(--font-ui);text-decoration:none;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.ref-button--pill{border-radius:var(--radius-pill)}
.ref-button--primary,.ref-icon-button--primary{border-color:var(--button-primary-action-background);background:var(--button-primary-action-background);color:var(--button-primary-action-color)}
.ref-button--primary:is(:hover,.is-demo-hover,.is-hover-demo),.ref-icon-button--primary:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--button-primary-action-background-hover);background:var(--button-primary-action-background-hover);color:var(--button-primary-action-color)}
.ref-button--primary:is(:active,.is-demo-active),.ref-icon-button--primary:is(:active,.is-demo-active){border-color:var(--color-brand-primary-strong);background:var(--color-brand-primary-strong);color:var(--color-on-brand)}
.ref-button--secondary{border-color:var(--button-secondary-background);background:var(--button-secondary-background);color:var(--button-secondary-color)}
.ref-button--secondary:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--button-secondary-background-hover);background:var(--button-secondary-background-hover);color:var(--button-secondary-color-hover)}
.ref-button--quiet,.ref-icon-button{border-color:var(--color-border);background:var(--button-quiet-background);color:var(--button-quiet-color)}
.ref-button--quiet:is(:hover,.is-demo-hover,.is-hover-demo),.ref-icon-button:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--color-brand-primary-hover);background:var(--button-secondary-background);color:var(--color-brand-primary-strong)}
.ref-button--danger{border-color:var(--color-danger);background:var(--color-danger);color:var(--color-on-brand)}
.ref-button--danger:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--color-danger-hover);background:var(--color-danger-hover);color:var(--color-on-brand)}
.ref-button--warning{border-color:var(--color-warning);background:var(--color-surface);color:var(--color-warning)}
.ref-button--warning:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--color-warning);background:var(--color-surface);color:var(--color-warning);box-shadow:inset 0 0 0 var(--control-border-width) var(--color-warning);text-decoration:underline;text-decoration-thickness:2px}
.ref-icon-button{width:var(--control-important-target);min-width:var(--control-important-target);padding:0;border-radius:50%}
.ref-button:disabled,.ref-button[aria-disabled="true"],.ref-icon-button:disabled,.ref-icon-button[aria-disabled="true"]{border-color:var(--color-divider);background:var(--color-surface);color:var(--color-ink-muted);box-shadow:none;text-decoration:none;cursor:not-allowed}
:is(.ref-button,.ref-icon-button,.profile-switch button,.ref-toggle-group button,.ref-tab,.ref-accordion__trigger,.ref-toolbar button,.ref-navigation-menu button,.ref-link,.ref-breadcrumbs a,.ref-pagination a,.ref-error-summary):is(.is-demo-focus,.is-focus-demo){outline:3px solid var(--color-focus);outline-offset:3px}
.ref-link{color:var(--color-brand-primary-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ref-link:is(:hover,.is-demo-hover,.is-hover-demo){color:var(--button-secondary-color-hover);text-decoration-thickness:2px}
.ref-link--current{color:var(--color-ink);font-weight:700;text-decoration-thickness:2px}
.ref-prose-example{max-width:var(--content-measure);margin:0}

/* Fields and selection controls */
.ref-field{display:grid;gap:var(--spacing-micro-6);width:min(100%,28rem);min-width:0}
.ref-field label,.ref-field__label,.ref-field__heading{color:var(--color-ink);font-weight:650}
.ref-field__heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-12)}
.ref-field small,.ref-input-status,.ref-status,.ref-composer__status{color:var(--color-ink-muted);font-size:.8125rem;line-height:1.55}
.ref-field small,.ref-field__error,.ref-status,.ref-composer__status,.ref-field__value{margin:0}
.ref-input,.ref-textarea,.ref-field>input,.ref-field>textarea,.ref-composer__input,.ref-composer>textarea{appearance:none;width:100%;min-width:0;min-height:var(--control-important-target);padding:var(--control-padding-block) var(--control-padding-inline);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:transparent;color:var(--color-ink);font:400 1rem/1.6 var(--font-ui);caret-color:var(--color-brand-primary-strong)}
.ref-textarea,.ref-field>textarea{min-height:7rem;overflow:auto;resize:none}
:is(.ref-input,.ref-textarea,.ref-field input,.ref-field textarea,.ref-composer textarea)::placeholder{color:var(--color-ink-muted)}
:is(.ref-input,.ref-textarea,.ref-field>input,.ref-field>textarea):hover:not(:disabled){border-color:var(--color-brand-primary-hover)}
:is(.ref-input,.ref-textarea,.ref-field>input,.ref-field>textarea):focus-visible,.ref-field:is(.is-demo-focus,.is-focus-demo) :is(.ref-input,input,textarea){border-color:var(--color-brand-primary-strong);outline:none;box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-strong)}
:is(.ref-input,.ref-textarea,.ref-field>input,.ref-field>textarea,.ref-composer textarea):disabled{border-color:var(--color-divider);background:var(--color-surface);color:var(--color-ink-muted);-webkit-text-fill-color:var(--color-ink-muted);cursor:not-allowed}
.ref-field--read-only .ref-field__value{min-height:var(--control-important-target);padding:var(--control-padding-block) var(--control-padding-inline);border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink)}
.ref-field--success :is(.ref-input,input,textarea){border-color:var(--color-brand-primary-hover)}
.ref-input-status{position:relative}
.ref-input-status>.ref-icon{position:absolute;top:50%;right:var(--spacing-12);color:var(--color-brand-primary-strong);transform:translateY(-50%);pointer-events:none}
.ref-input-status>.ref-input{padding-right:var(--spacing-36)}
.ref-field--error :is(.ref-input,.ref-textarea,input,textarea),.ref-choice--error .ref-choice__input,.ref-choice-group--error .ref-choice__input{border-color:var(--color-danger)}
.ref-field__error,.ref-status--error,.ref-composer--error .ref-composer__status,.ref-count--error,.ref-progress-status--error,.ref-message-meta--error{color:var(--color-danger);font-weight:600}
.ref-status--success,.ref-status--information{color:var(--color-brand-primary-strong)}
.ref-status--warning,.ref-count--warning{color:var(--color-warning);font-weight:600}
.ref-status--loading,.ref-status--empty{color:var(--color-ink-muted)}
.ref-search-form{margin:0}
.ref-search{position:relative;width:min(100%,22rem)}
.ref-search>.ref-icon,.ref-search__icon,.ref-search__icon>.ref-icon{position:absolute;z-index:1;top:50%;left:var(--spacing-12);width:1rem;height:1rem;color:var(--color-brand-primary-hover);transform:translateY(-50%);pointer-events:none}
.ref-search input{appearance:none;width:100%;height:var(--control-search-height);padding:var(--control-padding-block) var(--control-padding-inline) var(--control-padding-block) calc(var(--spacing-12) + 1rem + var(--spacing-12));border:var(--control-border-width) solid var(--color-brand-primary-hover);border-radius:var(--radius-pill);background:transparent;color:var(--color-ink);font:400 .9375rem/1.4 var(--font-ui);caret-color:var(--color-brand-primary-strong)}
.ref-search input::-webkit-search-cancel-button{appearance:none}
.ref-search input:hover:not(:disabled){border-color:var(--color-brand-primary-strong)}
.ref-search input:focus-visible,.ref-search:is(.is-demo-focus,.is-focus-demo) input{border-color:var(--color-brand-primary-strong);outline:none;box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-strong)}
.ref-search input:disabled,.ref-search.is-demo-disabled input{border-color:var(--color-divider);background:var(--color-surface);color:var(--color-ink-muted);-webkit-text-fill-color:var(--color-ink-muted);cursor:not-allowed}
.ref-choice-group{display:grid;gap:var(--spacing-12);margin:0;padding:0;border:0}
.ref-choice-group legend{margin-bottom:var(--spacing-12);color:var(--color-ink);font-weight:650}
.ref-choice{position:relative;display:grid;grid-template-columns:var(--control-minimum-target) minmax(0,1fr);align-items:center;gap:var(--spacing-12);width:fit-content;min-height:var(--control-important-target);color:var(--color-ink);cursor:pointer}
.ref-choice__input{appearance: none;grid-area:1/1;width:var(--control-minimum-target);height:var(--control-minimum-target);margin:0;border:var(--control-border-width) solid var(--color-border);border-radius:calc(var(--radius-control) - var(--spacing-micro-3));background:var(--color-surface);cursor:pointer}
.ref-choice--radio .ref-choice__input{border-radius:50%}
.ref-choice__mark{display:grid;grid-area:1/1;width:var(--control-minimum-target);height:var(--control-minimum-target);place-items:center;color:transparent;pointer-events:none}
.ref-choice__mark .ref-icon{width:1rem;height:1rem}
.ref-choice__input:hover:not(:disabled){border-color:var(--color-brand-primary-hover)}
.ref-choice__input:checked,.ref-choice__input[data-mixed="true"]{border:var(--control-focus-border-width) solid var(--color-brand-primary-strong);background:var(--color-surface)}
.ref-choice__input:checked+.ref-choice__mark,.ref-choice__input[data-mixed="true"]+.ref-choice__mark{color:var(--color-brand-primary-strong)}
.ref-choice--radio .ref-choice__input:checked{border:6px solid var(--color-brand-primary-strong)}
.ref-choice--radio .ref-choice__mark{display:none}
.ref-choice__input:focus-visible,.is-demo-focus .ref-choice__input,.is-focus-demo .ref-choice__input{outline:3px solid var(--color-focus);outline-offset:3px}
.ref-choice__input:disabled{border-color:var(--color-divider);background:var(--color-surface);cursor:not-allowed}
.ref-choice:has(.ref-choice__input:disabled){color:var(--color-ink-muted);cursor:not-allowed}
.ref-choice:has(.ref-choice__input:disabled) .ref-choice__mark{color:var(--color-ink-muted)}
.ref-select{position:relative}
.ref-select__trigger{appearance:none;display:flex;width:100%;min-height:var(--control-important-target);align-items:center;justify-content:space-between;gap:var(--spacing-12);padding:var(--control-padding-block) var(--control-padding-inline);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink);font:400 1rem/1.4 var(--font-ui);text-align:left;cursor:pointer}
.ref-select__trigger:hover:not(:disabled){border-color:var(--color-brand-primary-hover)}
.ref-select__trigger:focus-visible,.ref-select:is(.is-demo-focus,.is-focus-demo) .ref-select__trigger{border-color:var(--color-brand-primary-strong);outline:none;box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-strong)}
.ref-select__trigger[aria-expanded="true"] .ref-icon{transform:rotate(180deg)}
.ref-select__trigger:disabled{border-color:var(--color-divider);color:var(--color-ink-muted);cursor:not-allowed}
.ref-options{display:grid;gap:var(--spacing-micro-3);width:100%;max-width:28rem;margin:0;padding:var(--spacing-micro-6);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);list-style:none}
.ref-options[hidden]{display:none}
.ref-options li{display:flex;min-height:36px;align-items:center;gap:var(--spacing-micro-6);padding:var(--spacing-micro-6) var(--spacing-12);border:var(--control-border-width) solid transparent;border-radius:calc(var(--radius-control) - var(--spacing-micro-3));color:var(--color-ink);cursor:pointer}
.ref-options li:is(:hover,:focus-visible){border-color:var(--color-brand-primary-hover);outline:none;background:var(--color-brand-soft);color:var(--color-brand-primary-strong)}
.ref-options li[aria-selected="true"]{border-color:var(--color-brand-primary-hover);background:var(--color-brand-soft);color:var(--color-brand-primary-strong);font-weight:700;box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-hover)}
.ref-combobox__control{display:flex;align-items:center;gap:var(--spacing-micro-6);min-height:var(--control-important-target);padding-inline:var(--spacing-12);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-brand-primary-hover)}
.ref-combobox__control:hover{border-color:var(--color-brand-primary-hover)}
.ref-combobox__control:focus-within,.ref-combobox.is-demo-focus .ref-combobox__control{border-color:var(--color-brand-primary-strong);box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-strong)}
.ref-combobox__control .ref-input{min-height:calc(var(--control-important-target) - var(--spacing-micro-2));padding-inline:0;border:0;box-shadow:none}
.ref-combobox__control .ref-input:focus-visible{outline:none;box-shadow:none}
.ref-combobox__control--selected{border-color:var(--color-brand-primary-hover);color:var(--color-brand-primary-strong)}
.ref-switch-row{display:flex;width:min(100%,28rem);align-items:center;justify-content:space-between;gap:var(--spacing-24)}
.ref-switch-control{display:inline-flex;align-items:center;gap:var(--spacing-12)}
.ref-switch{appearance:none;display:inline-flex;min-width:48px;min-height:var(--control-important-target);align-items:center;gap:var(--spacing-12);padding:0;border:0;background:transparent;color:var(--color-ink-muted);font:600 .8125rem/1.4 var(--font-ui);cursor:pointer}
.ref-switch__track,.ref-switch>span[aria-hidden="true"]:not(.ref-switch__track){position:relative;display:block;width:48px;height:28px;flex:0 0 48px;padding:var(--spacing-micro-3);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface)}
.ref-switch__track>span,.ref-switch>span[aria-hidden="true"]:not(.ref-switch__track)::after{display:block;width:20px;height:20px;border-radius:50%;background:var(--color-ink-muted);content:"";transition:transform var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}
.ref-switch:hover :is(.ref-switch__track,span[aria-hidden="true"]:not(.ref-switch__track)){border-color:var(--color-brand-primary-hover)}
.ref-switch[aria-checked="true"] :is(.ref-switch__track,span[aria-hidden="true"]:not(.ref-switch__track)){border-color:var(--color-brand-primary-strong);background:var(--button-secondary-background)}
.ref-switch[aria-checked="true"] .ref-switch__track>span,.ref-switch[aria-checked="true"]>span[aria-hidden="true"]:not(.ref-switch__track)::after{background:var(--color-brand-primary-strong);transform:translateX(18px)}
.ref-switch:focus-visible,.ref-switch-control:is(.is-demo-focus,.is-focus-demo) .ref-switch{outline:3px solid var(--color-focus);outline-offset:3px}
.ref-switch:is(:disabled,[aria-disabled="true"]){color:var(--color-ink-muted);cursor:not-allowed}
.ref-switch:is(:disabled,[aria-disabled="true"]) :is(.ref-switch__track,span[aria-hidden="true"]:not(.ref-switch__track)){border-color:var(--color-divider);background:var(--color-surface)}
.ref-switch-state,.ref-switch__state{min-width:2.5em;color:var(--color-ink-muted);font-size:.8125rem}
.ref-slider{display:grid;gap:var(--spacing-12)}
.ref-range{appearance:none;width:100%;height:8px;margin:var(--spacing-12) 0;border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-pill);outline:none;background:var(--color-surface);cursor:pointer}
.ref-range::-webkit-slider-runnable-track{height:8px;border-radius:var(--radius-pill);background:var(--color-divider)}
.ref-range::-webkit-slider-thumb{appearance:none;width:var(--control-minimum-target);height:var(--control-minimum-target);margin-top:-8px;border:var(--control-focus-border-width) solid var(--color-brand-primary-strong);border-radius:50%;background:var(--color-surface)}
.ref-range::-moz-range-track{height:8px;border-radius:var(--radius-pill);background:var(--color-divider)}
.ref-range::-moz-range-thumb{width:var(--control-minimum-target);height:var(--control-minimum-target);border:var(--control-focus-border-width) solid var(--color-brand-primary-strong);border-radius:50%;background:var(--color-surface)}
.ref-range:focus-visible::-webkit-slider-thumb,.ref-slider:is(.is-demo-focus,.is-focus-demo) .ref-range::-webkit-slider-thumb{outline:3px solid var(--color-focus);outline-offset:3px}
.ref-range:focus-visible::-moz-range-thumb,.ref-slider:is(.is-demo-focus,.is-focus-demo) .ref-range::-moz-range-thumb{outline:3px solid var(--color-focus);outline-offset:3px}
.ref-range:active::-webkit-slider-thumb,.ref-slider.is-demo-active .ref-range::-webkit-slider-thumb,.ref-range:active::-moz-range-thumb,.ref-slider.is-demo-active .ref-range::-moz-range-thumb{background:var(--button-secondary-background)}
.ref-range:disabled{border-color:var(--color-divider);background:var(--color-surface);cursor:not-allowed}
.ref-range:disabled::-webkit-slider-thumb,.ref-range:disabled::-moz-range-thumb{border-color:var(--color-divider);background:var(--color-surface)}
.ref-slider__scale,.ref-slider__direct,.ref-slider__direct>span{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-12)}
.ref-slider__scale{color:var(--color-ink-muted);font-size:.75rem}
.ref-slider__direct{justify-content:flex-start;color:var(--color-ink-muted);font-size:.8125rem}
.ref-slider__direct .ref-input{width:5rem}
.ref-stepper,.ref-input-suffix,.ref-input-action{display:flex;width:min(100%,28rem);min-width:0;align-items:center;gap:var(--spacing-micro-6)}
.ref-stepper{padding:var(--spacing-micro-3);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface)}
.ref-stepper .ref-input{min-width:3rem;border:0;text-align:end;box-shadow:none}
.ref-stepper button,.ref-calendar button,.ref-menu button{appearance:none;display:inline-grid;min-width:36px;min-height:36px;place-items:center;padding:var(--spacing-micro-6);border:var(--control-border-width) solid transparent;border-radius:calc(var(--radius-control) - var(--spacing-micro-3));background:transparent;color:var(--color-ink);font:600 .875rem/1.4 var(--font-ui);cursor:pointer}
:is(.ref-stepper,.ref-calendar,.ref-menu) button:hover:not(:disabled){border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
:is(.ref-stepper,.ref-calendar,.ref-menu) button:disabled{color:var(--color-ink-muted);cursor:not-allowed}
.ref-number:is(.is-demo-focus,.is-focus-demo) .ref-stepper{border-color:var(--color-brand-primary-strong);box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-strong)}
.ref-input-suffix input,.ref-input-action input{min-width:0;flex:1}
.ref-calendar{display:grid;gap:var(--spacing-12);width:min(100%,22rem);padding:var(--spacing-12);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface)}
.ref-calendar[hidden]{display:none}
.ref-calendar__header,.ref-calendar__week,.ref-calendar__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:var(--spacing-micro-3);text-align:center}
.ref-calendar__header{grid-template-columns:36px 1fr 36px}
.ref-calendar__week{color:var(--color-ink-muted);font-size:.75rem}
.ref-calendar button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.ref-calendar__days button[data-outside-month="true"]{color:var(--color-ink-muted);font-weight:400}
.ref-calendar__days button[aria-pressed="true"]{border-color:var(--color-brand-primary-hover);background:var(--color-surface);color:var(--color-brand-primary-strong);font-weight:700;box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-hover)}
.ref-date,.ref-password,.ref-tabs-example{min-width:0}
.ref-file{display:grid;justify-items:start;gap:var(--spacing-12);width:min(100%,28rem)}
.ref-file__native{appearance:none}
.ref-file p{margin:0;color:var(--color-ink-muted)}
.ref-file__native:focus-visible+.ref-button{outline:3px solid var(--color-focus);outline-offset:3px}
.ref-count{justify-self:end;color:var(--color-ink-muted);font-variant-numeric:tabular-nums}
.ref-composer-field{display:grid;gap:var(--spacing-micro-6);width:min(100%,40rem)}
.ref-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--spacing-micro-6);width:100%;padding:var(--spacing-micro-6);border:var(--control-border-width) solid var(--color-brand-primary-hover);border-radius:var(--radius-pill);background:var(--color-surface)}
.ref-composer__input,.ref-composer>textarea{box-sizing:border-box;height:var(--control-important-target);min-height:var(--control-important-target);max-height:9.5rem;padding:10px var(--spacing-12);overflow:auto;border:0;resize:none;box-shadow:none;font:400 1rem/1.5 var(--font-ui)}
.ref-composer__input:focus-visible,.ref-composer>textarea:focus-visible{outline:none;box-shadow:none}
.ref-composer:focus-within{border-color:var(--color-brand-primary-strong);box-shadow:inset 0 0 0 var(--control-border-width) var(--color-brand-primary-strong)}
.ref-composer-field>.ref-composer__status,.ref-composer-field>.ref-field__error{padding-inline:var(--spacing-12)}
.ref-composer--multiline,.ref-composer:has(textarea[rows="2"]){border-radius:var(--radius-control)}
.ref-composer--error{border-color:var(--color-danger)}
.ref-composer :is(.ref-icon-button,.ref-button){align-self:center}.ref-composer--multiline :is(.ref-icon-button,.ref-button){align-self:end}

/* Navigation */
.ref-tabs{display:flex;max-width:100%;gap:var(--spacing-micro-3);overflow-x:auto;border-bottom:var(--control-border-width) solid var(--color-divider)}
.ref-tab{appearance:none;min-height:var(--control-important-target);flex:0 0 auto;margin-bottom:-1px;padding:var(--control-padding-block) var(--control-padding-inline);border:0;border-bottom:2px solid transparent;border-radius:var(--radius-control) var(--radius-control) 0 0;background:transparent;color:var(--color-ink-muted);font:600 .9375rem/1.4 var(--font-ui);cursor:pointer}
.ref-tab:is(:hover,.is-demo-hover,.is-hover-demo){border-bottom-color:var(--color-divider);background:var(--color-brand-soft);color:var(--color-brand-primary-strong)}
.ref-tab[aria-selected="true"]{border-color:var(--color-brand-primary-hover);color:var(--color-ink);font-weight:700}
.ref-tab:focus-visible,.ref-tab:is(.is-demo-focus,.is-focus-demo){outline:none;background:var(--color-brand-soft);box-shadow:inset 0 0 0 var(--control-focus-border-width) var(--color-focus)}
.ref-tab:is(:disabled,[aria-disabled="true"]){border-color:transparent;color:var(--color-ink-muted);cursor:not-allowed}
.ref-tabpanel{padding-top:var(--spacing-24)}
.ref-tabpanel p{margin:0}
.ref-accordion{border-block:var(--control-border-width) solid var(--color-divider)}
.ref-accordion+.ref-accordion{border-top:0}
.ref-accordion h3{margin:0}
.ref-accordion__trigger{appearance:none;display:flex;width:100%;min-height:var(--control-important-target);align-items:center;justify-content:space-between;gap:var(--spacing-12);padding:var(--spacing-12) 0;border:0;background:transparent;color:var(--color-ink);font:650 1rem/1.4 var(--font-ui);text-align:left;cursor:pointer}
.ref-accordion__trigger:is(:hover,.is-demo-hover,.is-hover-demo){color:var(--color-brand-primary-strong);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.ref-accordion__trigger .ref-icon{transition:transform var(--duration-fast) var(--ease-standard)}
.ref-accordion__trigger[aria-expanded="true"] .ref-icon{transform:rotate(180deg)}
.ref-accordion__trigger:disabled{color:var(--color-ink-muted);text-decoration:none;cursor:not-allowed}
.ref-accordion__panel{padding:0 0 var(--spacing-24)}
.ref-accordion__panel p{margin:0}
.ref-breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--spacing-micro-6);margin:0;padding:0;list-style:none}
.ref-breadcrumbs li span{margin-right:var(--spacing-micro-6);color:var(--color-ink-muted)}
.ref-breadcrumbs li[aria-current="page"]{color:var(--color-ink);font-weight:650}
.ref-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-micro-6)}
.ref-pagination a,.ref-pagination>span{display:inline-flex;min-width:36px;min-height:36px;align-items:center;justify-content:center;padding:var(--spacing-micro-4) var(--spacing-micro-6);border:var(--control-border-width) solid transparent;border-radius:var(--radius-control)}
.ref-pagination a:is(:hover,.is-demo-hover,.is-hover-demo){border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
.ref-pagination a[aria-current="page"]{border-color:var(--color-brand-primary-hover);background:var(--color-surface);color:var(--color-brand-primary-strong);font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.ref-pagination>span[aria-disabled="true"]{border-color:var(--color-divider);color:var(--color-ink-muted)}
.ref-toolbar{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-micro-3);padding:var(--spacing-micro-3);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface)}
.ref-toolbar button,.ref-navigation-menu button{appearance:none;min-width:36px;min-height:36px;padding:var(--spacing-micro-6) var(--spacing-12);border:var(--control-border-width) solid transparent;border-radius:calc(var(--radius-control) - var(--spacing-micro-3));background:transparent;color:var(--color-ink);font:600 .875rem/1.4 var(--font-ui);cursor:pointer}
:is(.ref-toolbar,.ref-navigation-menu) button:hover:not(:disabled){border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
.ref-toolbar button[aria-pressed="true"]{border-color:var(--color-brand-primary-hover);background:var(--color-surface);color:var(--color-brand-primary-strong);box-shadow:inset 0 -2px 0 var(--color-brand-primary-hover)}
.ref-toolbar button:disabled{border-color:transparent;background:var(--color-surface);color:var(--color-ink-muted);box-shadow:none;cursor:not-allowed}
.ref-separator{width:var(--control-border-width);height:var(--control-minimum-target);margin:0 var(--spacing-micro-3);background:var(--color-divider)}
.ref-navigation-menu{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-24)}
.ref-navigation-menu a[aria-current="page"]{color:var(--color-ink);font-weight:700;text-decoration-thickness:2px}

/* Feedback, progress, and overlays */
.ref-label{display:inline-flex;min-height:var(--control-minimum-target);align-items:center;gap:var(--spacing-micro-4);padding:var(--spacing-micro-3) var(--spacing-micro-6);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink);font:650 .8125rem/1.4 var(--font-ui)}
.ref-label--success{border-color:var(--color-brand-primary-hover);color:var(--color-brand-primary-strong)}
.ref-label--warning{border-color:var(--color-warning);color:var(--color-warning)}
.ref-label--danger{border-color:var(--color-danger);color:var(--color-danger)}
.ref-label .ref-icon{width:1em;height:1em}
.ref-alert,.ref-error-summary,.ref-inline-message{display:flex;width:min(100%,38rem);align-items:flex-start;gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-24);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink)}
:is(.ref-alert,.ref-error-summary,.ref-inline-message) :is(p,h4,ul){margin:var(--spacing-micro-6) 0 0}
.ref-inline-message{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.ref-inline-message>:is(strong,h4,p){grid-column:1}
.ref-inline-message>.ref-button{grid-column:2;grid-row:1/span 2;align-self:center;white-space:nowrap}
.ref-alert__icon{display:grid;width:var(--control-minimum-target);height:var(--control-minimum-target);flex:0 0 var(--control-minimum-target);place-items:center}
.ref-alert--information,.ref-alert--success{border-color:var(--color-brand-primary-hover)}
:is(.ref-alert--information,.ref-alert--success) .ref-alert__icon{color:var(--color-brand-primary-strong)}
.ref-alert--warning{border-color:var(--color-warning)}
.ref-alert--warning .ref-alert__icon{color:var(--color-warning)}
.ref-alert--error,.ref-error-summary,.ref-inline-message--error{border-color:var(--color-danger)}
.ref-alert--error .ref-alert__icon,.ref-error-summary h4,.ref-inline-message--error>:is(strong,h4){color:var(--color-danger)}
.ref-error-summary{display:block}
.ref-toast-demo{display:grid;justify-items:start;gap:var(--spacing-12)}
.ref-toast-region{min-height:var(--control-important-target)}
.ref-toast{display:flex;width:min(100%,30rem);align-items:center;justify-content:space-between;gap:var(--spacing-24);padding:var(--spacing-12) var(--spacing-24);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink)}
.ref-toast.is-entering{transform:translateY(var(--spacing-12))}
.ref-toast.is-visible{transform:translateY(0)}
.ref-absence{margin:0;color:var(--color-ink-muted)}
.ref-progress-block,.ref-progress-status{width:min(100%,28rem)}
.ref-progress-block>p,.ref-progress-status{margin:0 0 var(--spacing-micro-6)}
.ref-progress{width:min(100%,28rem);height:8px;overflow:hidden;border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-pill);background:var(--color-surface)}
.ref-progress__bar,.ref-progress>span{display:block;width:62%;height:100%;background:var(--color-brand-primary-hover);transform-origin:left center;transition:width var(--duration-standard) var(--ease-standard)}
.ref-progress[data-progress-value="0"] .ref-progress__bar{width:0}.ref-progress[data-progress-value="25"] .ref-progress__bar{width:25%}.ref-progress[data-progress-value="50"] .ref-progress__bar{width:50%}.ref-progress[data-progress-value="60"] .ref-progress__bar{width:60%}.ref-progress[data-progress-value="62"] .ref-progress__bar{width:62%}.ref-progress[data-progress-value="75"] .ref-progress__bar{width:75%}.ref-progress[data-progress-value="100"] .ref-progress__bar{width:100%}
.ref-progress--half>span{width:50%}
.ref-progress--paused :is(.ref-progress__bar,span){background:var(--color-warning)}
.ref-progress--success :is(.ref-progress__bar,span){background:var(--color-brand-primary-strong)}
.ref-progress--error :is(.ref-progress__bar,span){background:var(--color-danger)}
.ref-progress-status--success{color:var(--color-brand-primary-strong);font-weight:650}
.ref-progress--indeterminate .ref-progress__bar{width:36%;animation:ref-progress-indeterminate 1.2s linear infinite}
.ref-spinner{display:inline-block;width:1.25rem;height:1.25rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ref-spin .9s linear infinite;vertical-align:-.25em}
.ref-spinner--inline,.ref-spinner--small{width:1rem;height:1rem}
@keyframes ref-spin{to{transform:rotate(360deg)}}
@keyframes ref-progress-indeterminate{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
.ref-dialog{width:min(calc(100% - var(--spacing-24)),32rem);max-height:calc(100% - var(--spacing-48));padding:var(--spacing-24);overflow:auto;border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-surface);background:var(--color-surface);color:var(--color-ink);box-shadow:0 var(--spacing-12) var(--spacing-36) color-mix(in srgb,var(--color-ink) 20%,transparent)}
.ref-dialog::backdrop{background:color-mix(in srgb,var(--color-ink) 36%,transparent)}
:is(.ref-dialog,.ref-dialog-surface) :is(h3,h4){margin:0 0 var(--spacing-12);color:var(--color-ink)}
:is(.ref-dialog,.ref-dialog-surface)>p{margin:0 0 var(--spacing-24)}
.ref-dialog__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--spacing-12);margin-top:var(--spacing-24)}
.ref-dialog__actions .ref-button{white-space:nowrap}
.ref-dialog-surface{container-type:inline-size;width:min(100%,32rem);padding:var(--spacing-24);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-surface);background:var(--color-surface)}
.ref-dialog-surface--danger{border-color:var(--color-danger)}
.ref-dialog-surface.is-opening{transform:translateY(var(--spacing-12))}.ref-dialog-surface.is-closing{transform:translateY(var(--spacing-micro-6))}
@container(max-width:20rem){.ref-dialog__actions{align-items:stretch;flex-direction:column-reverse}.ref-dialog__actions .ref-button{width:100%}}
.ref-overlays,.ref-overlay-state{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--spacing-24)}
.ref-overlay-anchor,.ref-menu-anchor,.ref-tooltip-anchor{position:relative;display:inline-block}
.ref-popover,.ref-menu,.ref-tooltip{z-index:5;border:var(--control-border-width) solid var(--color-border);background:var(--color-surface);color:var(--color-ink);box-shadow:0 var(--spacing-micro-6) var(--spacing-24) color-mix(in srgb,var(--color-ink) 16%,transparent)}
.ref-popover,.ref-menu{width:max-content;max-width:min(22rem,calc(100vw - var(--spacing-48)));padding:var(--spacing-12);border-radius:var(--radius-card)}
:is(.ref-overlay-anchor,.ref-menu-anchor)>:is(.ref-popover,.ref-menu){position:absolute;top:calc(100% + var(--spacing-micro-6));left:0}
.ref-menu{display:grid;gap:var(--spacing-micro-3);min-width:min(12rem,100%)}
:is(.ref-popover,.ref-menu,.ref-tooltip)[hidden]{display:none}
.ref-popover :is(h4,p){margin:0}.ref-popover p{margin-top:var(--spacing-micro-6)}
.ref-tooltip{position:absolute;bottom:calc(100% + var(--spacing-micro-6));left:50%;width:max-content;max-width:min(18rem,calc(100vw - var(--spacing-48)));padding:var(--spacing-micro-6) var(--spacing-12);border-radius:var(--radius-control);font-size:.8125rem;transform:translateX(-50%)}
.ref-overlay-state :is(.ref-popover,.ref-menu,.ref-tooltip),.ref-menu-anchor--static .ref-menu,:is(.ref-popover,.ref-menu,.ref-tooltip).is-open{position:static;display:grid;transform:none}

/* Content and composition patterns */
.ref-card{width:min(100%,24rem);padding:var(--spacing-24);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface)}
.ref-card :is(h3,h4,p){margin:0}.ref-card :is(h3,h4){margin-bottom:var(--spacing-12);color:var(--color-ink);font-size:1.125rem}.ref-card p{color:var(--color-ink-muted)}.ref-card a{display:inline-block;margin-top:var(--spacing-12)}
.ref-person{display:flex;align-items:center;gap:var(--spacing-12)}
.ref-avatar{display:grid;width:var(--control-important-target);height:var(--control-important-target);place-items:center;flex:0 0 var(--control-important-target);border:var(--control-border-width) solid var(--color-border);border-radius:50%;background:var(--color-surface);color:var(--color-brand-primary-strong);font-size:.75rem;font-weight:700}
.ref-avatar--image{fill:var(--button-secondary-background);stroke:var(--color-brand-primary-strong);stroke-width:1.5}
.ref-person small{display:block;color:var(--color-ink-muted)}
.ref-separated{width:min(100%,36rem)}
.ref-separated section :is(h4,p){margin:0 0 var(--spacing-micro-6)}
.ref-separated hr,.ref-separator-line{width:100%;height:var(--control-border-width);margin:var(--spacing-24) 0;border:0;background:var(--color-divider)}
.ref-collection{display:grid;gap:var(--spacing-12);width:100%;min-width:0}
.table-scroll{max-width:100%;overflow-x:auto;border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-control)}
.table-scroll:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.example-stage table{width:100%;min-width:28rem;border-collapse:collapse;background:var(--color-surface)}
.example-stage :is(th,td){padding:var(--spacing-12);border-bottom:var(--control-border-width) solid var(--color-divider);color:var(--color-ink);text-align:left}
.example-stage th{background:var(--color-surface);font-weight:700}.example-stage tbody tr:last-child td{border-bottom:0}
.example-stage tr.is-selected{background:var(--color-surface);box-shadow:inset 0 0 0 var(--control-focus-border-width) var(--color-brand-primary-hover)}
.ref-sort{appearance:none;padding:var(--spacing-micro-4);border:var(--control-border-width) solid transparent;border-radius:calc(var(--radius-control) - var(--spacing-micro-3));background:transparent;color:var(--color-ink);font:inherit;cursor:pointer}
.ref-sort:hover{border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
.ref-row-state{color:var(--color-brand-primary-strong);font-weight:650}
.ref-empty{width:min(100%,36rem);padding-block:var(--spacing-24);border-block:var(--control-border-width) solid var(--color-divider)}
.ref-empty :is(h4,h5,p){margin:0}.ref-empty p{margin-top:var(--spacing-micro-6);color:var(--color-ink-muted)}.ref-empty .ref-button{margin-top:var(--spacing-12)}
.ref-tree{display:grid;gap:var(--spacing-micro-6);width:min(100%,28rem)}
.ref-tree [role="treeitem"]{min-height:36px;padding:var(--spacing-micro-4) var(--spacing-micro-6);border:var(--control-border-width) solid transparent;border-radius:var(--radius-control);color:var(--color-ink)}
.ref-tree [role="group"]{margin:var(--spacing-micro-6) 0 0 var(--spacing-24);padding-left:var(--spacing-12);border-left:var(--control-border-width) solid var(--color-divider)}
.ref-tree__toggle{display:inline-grid;width:28px;height:28px;margin-right:var(--spacing-micro-4);place-items:center;border:var(--control-border-width) solid transparent;border-radius:calc(var(--radius-control) - var(--spacing-micro-3));background:transparent;color:var(--color-ink);cursor:pointer}
.ref-tree__toggle:hover{border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
.ref-tree__toggle .ref-icon{transition:transform var(--duration-fast) var(--ease-standard)}
.ref-tree__toggle.is-expanded .ref-icon{transform:rotate(90deg)}
.ref-tree [aria-selected="true"]{border-color:var(--color-brand-primary-hover);background:var(--color-surface);color:var(--color-brand-primary-strong);font-weight:700}
.ref-tree [aria-disabled="true"]{border-color:transparent;color:var(--color-ink-muted)}
.ref-tree [role="treeitem"]:is(.is-demo-focus,.is-focus-demo){outline:3px solid var(--color-focus);outline-offset:2px}
.ref-tree__loading{display:flex;align-items:center;gap:var(--spacing-12)}
.ref-data-loading td{height:5rem;text-align:center}.ref-data-loading__status{display:inline-flex;align-items:center;gap:var(--spacing-12);color:var(--color-ink-muted)}
.ref-chat{display:grid;gap:var(--spacing-12);width:min(100%,42rem)}
.ref-bubble{width:fit-content;max-width:82%;padding:var(--spacing-12) calc(var(--spacing-12) + var(--spacing-micro-4));border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink)}
.ref-bubble--user{justify-self:end;border-end-end-radius:var(--spacing-micro-4)}.ref-bubble--assistant{border-end-start-radius:var(--spacing-micro-4)}
html[data-profile="schedia"] .ref-bubble--user{background:var(--schedia-chat-user-surface)}html[data-profile="schedia"] .ref-bubble--assistant{background:var(--schedia-chat-assistant-surface)}
.ref-bubble--sending,.ref-bubble--streaming{border-style:dashed}.ref-bubble--failed{border-color:var(--color-danger)}
.ref-bubble small{display:block;margin-bottom:var(--spacing-micro-4);color:var(--color-ink-muted);font:600 .75rem/1.4 var(--font-ui)}
.ref-bubble p{margin:0;overflow-wrap:anywhere}.ref-message-meta{display:block;margin-top:var(--spacing-micro-6);color:var(--color-ink-muted);font-size:.75rem}.ref-bubble .ref-button{margin-top:var(--spacing-12)}
.ref-app-shell{display:grid;grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"sidebar main";min-height:20rem;overflow:hidden;border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-surface);background:var(--color-surface)}
.ref-app-shell__topbar{display:none;grid-area:topbar;min-height:var(--control-important-target);align-items:center;justify-content:space-between;gap:var(--spacing-12);padding:var(--spacing-12);border-bottom:var(--control-border-width) solid var(--color-divider);background:var(--color-surface)}
.ref-app-shell__sidebar{grid-area:sidebar;padding:var(--spacing-24);border-right:var(--control-border-width) solid var(--color-divider);background:var(--color-surface)}
.ref-app-shell__sidebar>strong{display:block;margin-bottom:var(--spacing-24)}.ref-app-shell__sidebar nav{display:grid;gap:var(--spacing-micro-6)}
.ref-app-shell__sidebar a{display:block;padding:var(--spacing-micro-6) var(--spacing-12);border:var(--control-border-width) solid transparent;border-radius:var(--radius-control);color:var(--color-ink-muted);text-decoration:none}
.ref-app-shell__sidebar a:hover{border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}
.ref-app-shell__sidebar a[aria-current="page"]{border-color:var(--color-brand-primary-hover);background:var(--color-surface);color:var(--color-brand-primary-strong);font-weight:700;text-decoration:underline;text-decoration-thickness:2px}
.ref-app-shell__main{grid-area:main;min-width:0;padding:var(--spacing-36)}
.ref-app-shell__main :is(h4,h5,p){margin-top:0}.ref-app-shell__main>section{margin-top:var(--spacing-36);padding-top:var(--spacing-24);border-top:var(--control-border-width) solid var(--color-divider)}
.ref-navigation-trigger{flex:0 0 auto}.ref-navigation-trigger--compact{border-radius:var(--radius-control)}.ref-navigation-trigger-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-24)}.ref-navigation-trigger-variants>section{display:grid;align-content:start;gap:var(--spacing-12)}.ref-navigation-trigger-variants h4{margin:0;color:var(--color-ink);font-size:.875rem}.ref-navigation-trigger-demo{display:grid;justify-items:start;gap:var(--spacing-12);width:min(100%,22rem)}.ref-navigation-trigger-panel{width:100%;padding:var(--spacing-12);border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface)}.ref-navigation-trigger-panel a{display:block;padding:var(--spacing-micro-6) var(--spacing-12)}
.ref-app-shell--tablet{grid-template-columns:9rem minmax(0,1fr)}.ref-app-shell--tablet :is(.ref-app-shell__sidebar,.ref-app-shell__main){padding:var(--spacing-24)}
.ref-app-shell--mobile{grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "sidebar" "main"}.ref-app-shell--mobile .ref-app-shell__topbar{display:flex}.ref-app-shell--mobile .ref-app-shell__sidebar{border-right:0;border-bottom:var(--control-border-width) solid var(--color-divider)}.ref-app-shell--mobile .ref-app-shell__sidebar>strong{display:none}.ref-app-shell--mobile .ref-app-shell__main{padding:var(--spacing-24)}
.ref-app-shell--mobile.ref-app-shell--responsive:not(.is-navigation-open) .ref-app-shell__sidebar{display:none}.ref-app-shell--mobile.ref-app-shell--responsive.is-navigation-open .ref-app-shell__sidebar{display:block}
.ref-form,.ref-auth,.ref-settings,.ref-step-flow,.ref-status-surface,.ref-chat-composition,.ref-dashboard,.ref-search-results{display:grid;gap:var(--spacing-24);width:min(100%,44rem);padding:var(--spacing-24);border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-surface);background:var(--color-surface)}
:is(.ref-form,.ref-auth,.ref-settings,.ref-step-flow,.ref-status-surface,.ref-chat-composition,.ref-dashboard,.ref-search-results) :is(h4,p){margin-top:0}
.ref-form>h4,.ref-auth>h4{margin-bottom:0}.ref-auth{width:min(100%,30rem)}.ref-auth>.ref-button{justify-self:start}
.ref-chat-composition .ref-chat{max-height:24rem;overflow-y:auto;padding:var(--spacing-12);border-block:var(--control-border-width) solid var(--color-divider)}
.ref-status-demo{display:grid;gap:var(--spacing-24)}.ref-confirmation-demo{display:grid;justify-items:start;gap:var(--spacing-12)}
.ref-dashboard__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-block:var(--control-border-width) solid var(--color-divider)}
.ref-dashboard__metrics>section{padding:var(--spacing-24)}.ref-dashboard__metrics>section+section{border-left:var(--control-border-width) solid var(--color-divider)}.ref-dashboard__metrics :is(h5,p){margin:0}
.ref-metric{margin-block:var(--spacing-micro-6)!important;color:var(--color-ink);font-size:1.75rem;font-variant-numeric:tabular-nums;font-weight:700}
.ref-list-detail{display:grid;grid-template-columns:14rem minmax(0,1fr);width:100%;min-height:16rem;overflow:hidden;border:var(--control-border-width) solid var(--color-divider);border-radius:var(--radius-surface);background:var(--color-surface)}
.ref-list-detail nav{padding:var(--spacing-24);border-right:var(--control-border-width) solid var(--color-divider)}.ref-list-detail nav h4{margin-top:0}
.ref-list-detail nav a{display:block;padding:var(--spacing-micro-6) var(--spacing-12);border:var(--control-border-width) solid transparent;border-radius:var(--radius-control);color:var(--color-ink-muted);text-decoration:none}
.ref-list-detail nav a:hover{border-color:var(--color-divider);background:var(--button-secondary-background);color:var(--button-secondary-color-hover)}.ref-list-detail nav a[aria-current="page"]{border-color:var(--color-brand-primary-hover);color:var(--color-brand-primary-strong);font-weight:700}
.ref-list-detail>section{min-width:0;padding:var(--spacing-36)}
.ref-search-results>form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-12)}.ref-search-results>form .ref-search{flex:1 1 18rem}
.ref-result-list{margin:0;padding:0;border-top:var(--control-border-width) solid var(--color-divider);list-style:none}.ref-result-list li{border-bottom:var(--control-border-width) solid var(--color-divider)}
.ref-result-list a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-24);padding:var(--spacing-12) 0;text-decoration:none}.ref-result-list a:hover strong{text-decoration:underline;text-decoration-thickness:2px}.ref-result-list span{color:var(--color-ink-muted);font-size:.8125rem}
.ref-setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-24);padding-block:var(--spacing-24);border-block:var(--control-border-width) solid var(--color-divider)}.ref-setting-row small{display:block;color:var(--color-ink-muted)}
.ref-step-flow>header{display:grid;gap:var(--spacing-micro-6)}.ref-step-flow>header p,.ref-progress-block p{margin:0}.ref-step-flow [data-step-panel]{padding-block:var(--spacing-24);border-block:var(--control-border-width) solid var(--color-divider)}.ref-step-flow [data-step-panel]>:last-child{margin-bottom:0}.ref-step-summary{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--spacing-micro-6) var(--spacing-24);margin:var(--spacing-24) 0 0}.ref-step-summary :is(dt,dd){margin:0}.ref-step-summary dt{color:var(--color-ink-muted)}.ref-step-summary dd{font-weight:700}
.danger-section{padding-top:var(--spacing-24);border-top:var(--control-border-width) solid var(--color-danger)}

/* Inline galleries and legacy composition hooks retained by the site builder. */
.guideline-reference-gallery{margin:var(--spacing-48) 0 var(--spacing-72);padding:var(--spacing-24) 0;border-block:var(--control-border-width) solid var(--color-divider);font-family:var(--font-ui)}
.guideline-reference-gallery__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--spacing-24);margin-bottom:var(--spacing-24)}
.guideline-reference-gallery__header h4{margin:0 0 var(--spacing-micro-6);color:var(--color-ink);font-size:1.25rem}.guideline-reference-gallery__header p{max-width:38rem;margin:0;color:var(--color-ink-muted);font-family:var(--font-ui)}
.guideline-reference-gallery__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-24)}.guideline-reference-example{min-width:0}.guideline-reference-example h5{margin:0 0 var(--spacing-12);color:var(--color-heading-detail);font-size:1rem}.guideline-reference-example .example-stage{height:calc(100% - var(--spacing-36))}
.guideline-reference-gallery__links{display:flex;flex-wrap:wrap;gap:var(--spacing-12) var(--spacing-24);margin:var(--spacing-24) 0 0;font-family:var(--font-ui)}
.profile-boundary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-24);margin-top:var(--spacing-36);padding-block:var(--spacing-24);border-block:var(--control-border-width) solid var(--color-divider)}.profile-boundary p{margin:0;color:var(--color-ink)}
.profile-page-document{max-width:var(--content-measure)}.profile-source-link{margin-top:var(--spacing-48);padding-top:var(--spacing-24);border-top:var(--control-border-width) solid var(--color-divider)}
:is(.auth-example,.dashboard-example,.list-detail-example) h3{margin-top:0}.dashboard-example{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-24)}.dashboard-example section+section{padding-left:var(--spacing-24);border-left:var(--control-border-width) solid var(--color-divider)}
.list-detail-example{display:grid;grid-template-columns:12rem minmax(0,1fr);min-height:14rem}.list-detail-example nav{padding-right:var(--spacing-24);border-right:var(--control-border-width) solid var(--color-divider)}.list-detail-example nav a{display:block;padding:var(--spacing-micro-6) 0}.list-detail-example nav a[aria-current="page"]{color:var(--color-ink);font-weight:700}.list-detail-example section{padding-left:var(--spacing-24)}
.pattern-shell{display:grid;grid-template-columns:11rem 1fr;min-height:18rem;overflow:hidden;border:var(--control-border-width) solid var(--color-border);border-radius:var(--radius-surface);background:var(--color-surface)}.pattern-sidebar{padding:var(--spacing-24);border-right:var(--control-border-width) solid var(--color-divider);background:var(--color-surface)}.pattern-sidebar strong{display:block;margin-bottom:var(--spacing-24)}.pattern-sidebar a{display:block;padding:var(--spacing-micro-6) 0}.pattern-content{padding:var(--spacing-36)}.pattern-content h3{margin-top:0}
.status-example{display:grid;min-height:12rem;place-items:center;text-align:center}.status-example p{margin:var(--spacing-12) 0}

@container(max-width:36rem){
 .state-gallery{grid-template-columns:minmax(0,1fr)}
 .ref-overlays{display:grid;grid-template-columns:minmax(0,1fr)}
 :is(.ref-overlay-anchor,.ref-menu-anchor,.ref-tooltip-anchor){width:100%}
 .ref-overlay-state{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;width:auto;max-width:100%}
 :is(.ref-overlay-anchor,.ref-menu-anchor,.ref-tooltip-anchor,.ref-overlay-state) :is(.ref-popover,.ref-menu,.ref-tooltip){width:max-content;max-width:100%}
 .ref-overlay-state>:is(.ref-popover,.ref-menu,.ref-tooltip){width:100%}
 .ref-app-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "sidebar" "main";min-height:0}
 .ref-app-shell .ref-app-shell__topbar{display:flex}
 .ref-app-shell .ref-app-shell__sidebar{border-right:0;border-bottom:var(--control-border-width) solid var(--color-divider)}
 .ref-app-shell .ref-app-shell__sidebar>strong{display:none}
 .ref-app-shell .ref-app-shell__main{padding:var(--spacing-24)}
 .ref-app-shell--responsive:not(.is-navigation-open) .ref-app-shell__sidebar{display:none}
 .ref-app-shell--responsive.is-navigation-open .ref-app-shell__sidebar{display:block}
 .ref-list-detail{grid-template-columns:minmax(0,1fr);min-height:0}
 .ref-list-detail nav{padding:var(--spacing-24);border-right:0;border-bottom:var(--control-border-width) solid var(--color-divider)}
 .ref-list-detail>section{padding:var(--spacing-24)}
 .ref-inline-message{grid-template-columns:minmax(0,1fr)}
 .ref-inline-message>.ref-button{grid-column:1;grid-row:auto;justify-self:start}
}

@media(forced-colors:active){.ref-tab:focus-visible,.ref-tab:is(.is-demo-focus,.is-focus-demo){box-shadow:inset 0 0 0 3px Highlight}.ref-options li:is(:hover,:focus-visible){border-color:Highlight;background:Highlight;color:HighlightText}}

@media(max-width:62rem){.reference-body .page-shell{grid-template-columns:minmax(0,60rem)}}
@media(max-width:48rem){
 .example-stage{padding:var(--spacing-12)}
 .state-gallery,.guideline-reference-gallery__grid,.profile-boundary,.dashboard-example,.ref-dashboard__metrics{grid-template-columns:minmax(0,1fr)}
 .ref-dialog__actions{align-items:stretch;flex-direction:column-reverse}.ref-dialog__actions .ref-button{width:100%}
 .guideline-reference-gallery__header{align-items:flex-start;flex-direction:column}
 .dashboard-example section+section,.ref-dashboard__metrics>section+section{padding:var(--spacing-24) 0 0;border-top:var(--control-border-width) solid var(--color-divider);border-left:0}
 .ref-list-detail,.list-detail-example{grid-template-columns:minmax(0,1fr)}
 .ref-list-detail nav,.list-detail-example nav{padding:var(--spacing-24);border-right:0;border-bottom:var(--control-border-width) solid var(--color-divider)}
 .list-detail-example section{padding:var(--spacing-24) 0 0}.ref-list-detail>section{padding:var(--spacing-24)}
 .pattern-shell,.ref-app-shell--responsive{grid-template-columns:minmax(0,1fr);grid-template-areas:"topbar" "sidebar" "main"}
 .pattern-sidebar,.ref-app-shell--responsive .ref-app-shell__sidebar{border-right:0;border-bottom:var(--control-border-width) solid var(--color-divider)}
 .ref-app-shell--responsive:not(.is-navigation-open) .ref-app-shell__sidebar{display:none}
 .ref-app-shell--responsive.is-navigation-open .ref-app-shell__sidebar{display:block}
 .ref-app-shell--responsive .ref-app-shell__topbar{display:flex}.ref-app-shell--responsive .ref-app-shell__sidebar>strong{display:none}.ref-app-shell__main,.pattern-content{padding:var(--spacing-24)}
 .ref-setting-row{align-items:flex-start;flex-direction:column}
 .ref-search-results>form,.ref-search-results>form .ref-search,.ref-search-results>form .ref-button{width:100%}.ref-result-list a{align-items:flex-start;flex-direction:column;gap:var(--spacing-micro-3)}
}
@media(max-width:30rem){
 .profile-switch,.ref-toggle-group{width:100%}.profile-switch button,.ref-toggle-group button{flex:1 1 auto}
 .ref-form,.ref-auth,.ref-settings,.ref-step-flow,.ref-status-surface,.ref-chat-composition,.ref-dashboard,.ref-search-results,.ref-dialog-surface{padding:var(--spacing-12)}
 .ref-bubble{max-width:92%}
}
@media(prefers-reduced-motion:reduce){
 .ref-button,.ref-icon-button,.ref-accordion__trigger .ref-icon,.ref-switch__track>span,.ref-switch>span[aria-hidden="true"]:not(.ref-switch__track)::after,.ref-progress__bar,.ref-progress>span{transition:none}
 .ref-spinner,.ref-progress--indeterminate .ref-progress__bar{animation:none}.ref-progress--indeterminate .ref-progress__bar{width:100%;transform:none}
 .ref-toast.is-entering,.ref-dialog-surface.is-opening,.ref-dialog-surface.is-closing{transform:none}
}
@media (forced-colors: active){
 :is(.ref-button,.ref-icon-button,.profile-switch button,.ref-toggle-group button,.ref-select__trigger,.ref-options li,.ref-choice__input,.ref-switch__track,.ref-switch>span[aria-hidden="true"]:not(.ref-switch__track),.ref-tab,.ref-pagination a,.ref-toolbar button,.ref-navigation-menu button,.ref-label,.ref-calendar button,.ref-tree [role="treeitem"],.ref-app-shell__sidebar a,.ref-list-detail nav a){background:Canvas;color:CanvasText;box-shadow:none;forced-color-adjust:auto}
 :is(.ref-button--primary,.ref-button--danger,.ref-icon-button--primary,.profile-switch button[aria-pressed="true"],.ref-toggle-group button[aria-pressed="true"],.ref-options li[aria-selected="true"],.ref-pagination a[aria-current="page"],.ref-toolbar button[aria-pressed="true"],.ref-tab[aria-selected="true"],.ref-tree [aria-selected="true"],.ref-app-shell__sidebar a[aria-current="page"]){border-color:Highlight;background:Highlight;color:HighlightText}
 :is(.ref-button,.ref-icon-button,.ref-tab):is(:disabled,[aria-disabled="true"]),.ref-pagination>span[aria-disabled="true"]{border-color:GrayText;color:GrayText}
 .ref-choice__input:checked,.ref-choice__input[data-mixed="true"],.ref-switch[aria-checked="true"] :is(.ref-switch__track,span[aria-hidden="true"]:not(.ref-switch__track)){border-color:Highlight;background:Canvas}
 .ref-choice__input:checked+.ref-choice__mark,.ref-choice__input[data-mixed="true"]+.ref-choice__mark,.ref-switch[aria-checked="true"] .ref-switch__track>span,.ref-switch[aria-checked="true"]>span[aria-hidden="true"]:not(.ref-switch__track)::after{color:Highlight;background:Highlight}
 .ref-range,.ref-range::-webkit-slider-runnable-track,.ref-range::-moz-range-track,.ref-progress{border-color:ButtonBorder;background:Canvas}
 .ref-range::-webkit-slider-thumb,.ref-range::-moz-range-thumb,.ref-progress__bar,.ref-progress>span{border-color:Highlight;background:Highlight}
 .ref-search input:focus-visible,.ref-search.is-demo-focus input,.ref-input:focus-visible,.ref-field.is-demo-focus .ref-input,.ref-select__trigger:focus-visible,.ref-select.is-demo-focus .ref-select__trigger{border-color:Highlight;box-shadow:inset 0 0 0 var(--control-border-width) Highlight}
 .ref-dialog::backdrop{background:Canvas}
}
@media print{
 .profile-switch,.library-search,.ref-toast-demo>.ref-button,.ref-dialog-demo>.ref-button,.ref-confirmation-demo>.ref-button{display:none}
 .reference-example,.state-specimen,.example-stage,.ref-card,.ref-alert,.ref-error-summary,.ref-dialog-surface,.ref-form,.ref-auth,.ref-settings,.ref-step-flow,.ref-status-surface,.ref-chat-composition,.ref-dashboard,.ref-search-results{break-inside:avoid;box-shadow:none}
 .ref-popover,.ref-menu,.ref-tooltip{position:static;box-shadow:none;transform:none}
}