/* Shared primitives; route composition remains with the owning application. */
:where(*, *::before, *::after){box-sizing:border-box}
:where(html){font-size:100%;scroll-padding-block:6rem}
html:has(dialog[open]){overflow:hidden}
:where(body){margin:0;background:var(--ds-canvas);color:var(--ds-text);font:var(--ds-type-body)/var(--ds-leading) var(--ds-font-ui);-webkit-text-size-adjust:100%}
:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}
:where(button,a,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
:where(button,a,summary){touch-action:manipulation}
:where(button){cursor:pointer}
:where(button:disabled){cursor:not-allowed;opacity:.55}
:where(a){color:var(--ds-brand-ink);text-underline-offset:.2em}
:where(h1,h2,h3,h4){color:var(--ds-ink);line-height:1.25;text-wrap:balance}
:where(p){max-inline-size:var(--ds-reading-width)}
:where(img,video){max-inline-size:100%;height:auto}
:where(:focus-visible){outline:3px solid var(--ds-focus);outline-offset:4px}
/* Route focus is an announcement target; do not draw an attention frame around the page. */
main[tabindex="-1"]:focus{outline:none}
:where([hidden]){display:none!important}
.ds-icon{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.2em;stroke-width:1.8}
:where(.view-switch){display:inline-flex;align-items:center;gap:4px;padding:4px;background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:16px}
:where(.view-switch button){display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--ds-target);min-block-size:var(--ds-target);padding:10px;border:0;border-radius:10px;background:transparent;color:var(--ds-muted)}
:where(.view-switch button[aria-pressed=true],.view-switch button.active){background:var(--ds-soft);color:var(--ds-brand-ink)}
.ds-brand{display:block;inline-size:124px;block-size:36px;object-fit:contain;object-position:left center}
.ds-brand[dir=rtl]{object-position:right center}.ds-brand--mark{inline-size:36px;block-size:36px}
:where(.button,.icon-button){min-block-size:var(--ds-target);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);background:var(--ds-surface);padding:11px 18px;font-size:calc(1rem * var(--ds-scale,1));font-weight:600;line-height:1.35;color:var(--ds-ink);text-decoration:none;transition:background var(--ds-duration-fast),border-color var(--ds-duration-fast),box-shadow var(--ds-duration-fast)}
.button.primary{background:var(--ds-brand);color:#fff;border-color:var(--ds-brand)}
.button.secondary{background:var(--ds-soft);color:var(--ds-brand-ink);border-color:transparent}
:where(.button.ghost){background:transparent;border-color:transparent}
:where(.icon-button){inline-size:var(--ds-target);min-inline-size:var(--ds-target);padding:10px}
@media(hover:hover){:where(.button:not(:disabled):hover,.icon-button:not(:disabled):hover){background:var(--ds-soft);border-color:#c7b5ff}.button.primary:not(:disabled):hover{background:var(--ds-brand-hover);border-color:var(--ds-brand-hover);color:#fff}}
:where(.chip,.badge){display:inline-flex;align-items:center;gap:6px;max-inline-size:100%;border-radius:var(--ds-radius-pill);padding:5px 10px;font-size:calc(.875rem * var(--ds-scale,1));line-height:1.4;background:var(--ds-soft);color:var(--ds-brand-ink)}
:where(.chip img){inline-size:20px;block-size:20px;object-fit:contain}
:where(.badge.success){background:var(--ds-success-soft);color:var(--ds-success)}
:where(.badge.warning){background:var(--ds-warning-soft);color:var(--ds-warning)}
:where(.badge.error){background:var(--ds-error-soft);color:var(--ds-error)}
:where(input:not([type=checkbox],[type=radio],[type=range]),select,textarea){max-inline-size:100%;min-block-size:var(--ds-target);border:1px solid var(--ds-control-line);border-radius:var(--ds-radius-sm);padding:11px 13px;background:var(--ds-surface);color:var(--ds-ink);font-size:calc(1rem * var(--ds-scale,1));line-height:1.5}
:where(input[type=checkbox],input[type=radio]){accent-color:var(--ds-brand);inline-size:20px;block-size:20px}
:where(input[aria-invalid=true],textarea[aria-invalid=true]){border-color:var(--ds-error)}
:where(input:not([type=checkbox],[type=radio],[type=range]),textarea){font-weight:400;min-inline-size:0}
:where(textarea){resize:vertical}
:where(input:disabled,textarea:disabled,select:disabled){background:var(--ds-canvas);color:var(--ds-muted);cursor:not-allowed}
.ds-choice-group{min-inline-size:0;margin:0;padding:0;border:0;display:grid;gap:8px}.ds-choice-group>legend{padding:0;margin-block-end:12px;font-size:1rem;font-weight:600;color:var(--ds-ink)}
.ds-choice{display:flex;align-items:center;gap:12px;min-block-size:48px;border:1px solid var(--ds-line);border-radius:12px;padding:12px 14px;background:var(--ds-surface);font-weight:400;cursor:pointer;line-height:var(--ds-leading)}.ds-choice input{flex:none;margin:0}.ds-choice:has(input:checked){border-color:color-mix(in srgb,var(--ds-brand) 55%,var(--ds-line));background:var(--ds-soft)}.ds-choice:has(input:focus-visible){outline:3px solid var(--ds-focus);outline-offset:3px}.ds-choice:has(input:disabled){cursor:not-allowed;color:var(--ds-muted);background:var(--ds-canvas)}
.ds-native-progress{display:block;appearance:none;width:100%;height:8px;border:0;overflow:hidden;border-radius:999px;background:var(--ds-soft);color:var(--ds-brand)}.ds-native-progress::-webkit-progress-bar{background:var(--ds-soft);border-radius:999px}.ds-native-progress::-webkit-progress-value{background:var(--ds-brand);border-radius:999px}.ds-native-progress::-moz-progress-bar{background:var(--ds-brand);border-radius:999px}
:where(dialog){max-inline-size:min(620px,calc(100vw - 32px));max-block-size:calc(100dvh - 32px);border:1px solid var(--ds-line);border-radius:var(--ds-radius-lg);padding:24px;box-shadow:var(--ds-shadow-overlay);color:var(--ds-text);background:var(--ds-surface);overflow:auto}
:where(dialog::backdrop){background:#211a3566;backdrop-filter:blur(3px)}
.ds-reading{font-family:var(--ds-font-reading);font-size:var(--ds-type-reading);line-height:var(--ds-reading-leading);max-inline-size:var(--ds-reading-width)}
.ds-panel{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:clamp(20px,3vw,32px);box-shadow:var(--ds-shadow-sm);min-inline-size:0}
.ds-stack{display:grid;gap:24px}.ds-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.ds-muted{color:var(--ds-muted)}
.ds-sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ds-notice{--attention:var(--ds-brand);--attention-soft:var(--ds-soft);background:var(--attention-soft);border:1px solid color-mix(in srgb,var(--attention) 30%,transparent);border-radius:var(--ds-radius);padding:24px;line-height:var(--ds-leading)}
.ds-notice.success{--attention:var(--ds-success);--attention-soft:var(--ds-success-soft)}.ds-notice.warning{--attention:var(--ds-warning);--attention-soft:var(--ds-warning-soft)}.ds-notice.error{--attention:var(--ds-error);--attention-soft:var(--ds-error-soft)}
.ds-notice h3{color:var(--attention);display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ds-attention{border-color:color-mix(in srgb,var(--attention,var(--ds-brand)) 65%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--attention,var(--ds-brand)) 12%,transparent);transition:border-color var(--ds-duration),box-shadow var(--ds-duration)}
.ds-highlight{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:4px;padding:.03em .12em;background:color-mix(in srgb,var(--attention,var(--ds-brand)) 18%,transparent);color:inherit;text-decoration:none}
@media(forced-colors:active){.ds-attention{outline:2px solid Highlight}.ds-highlight{background:Highlight;color:HighlightText}.button,.chip,.badge{border:1px solid ButtonText}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

:where(.field){display:grid;gap:8px;min-inline-size:0}