/* Component styles. Every value resolves to a token — no literal colors or sizes here.
   Class prefix: .ap- (Apple HIG). Components set these classes from JSX. */

/* ============ Reset scoped to design-system surfaces ============ */
.ap-root { font-family: var(--font-ui); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ap-root *, .ap-root *::before, .ap-root *::after { box-sizing: border-box; }
.ap-root button, .ap-root input, .ap-root select, .ap-root textarea { font: inherit; color: inherit; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--tint-pressed); text-decoration: none; }

/* ============ Icon ============ */
.ap-icon { display: inline-block; flex: none; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }

/* ============ Button ============ */
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-075); border: 0; background: none; cursor: pointer; font-family: var(--font-ui); letter-spacing: var(--tracking-body); white-space: nowrap; transition: opacity var(--transition-control), transform var(--transition-control), background-color var(--transition-control); -webkit-tap-highlight-color: transparent; }
.ap-btn:active:not(:disabled) { transform: scale(var(--press-scale)); opacity: 0.85; }
.ap-btn:disabled { opacity: 0.35; cursor: default; }
.ap-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.ap-btn--sz-sm { min-height: var(--target-ios-min); padding: 0 var(--space-15); font-size: var(--type-subheadline-size); border-radius: var(--radius-md); }
.ap-btn--sz-md { min-height: 38px; padding: 0 var(--space-2); font-size: var(--type-callout-size); border-radius: var(--radius-lg); }
.ap-btn--sz-lg { min-height: 50px; padding: 0 var(--space-25); font-size: var(--type-body-size); border-radius: var(--radius-2xl); }

.ap-btn--filled { background: var(--tint-filled); color: var(--label-on-accent); font-weight: var(--weight-semibold); }
.ap-btn--filled:hover:not(:disabled) { background: var(--tint-filled-pressed); }
.ap-btn--tinted { background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint); font-weight: var(--weight-semibold); }
.ap-btn--tinted:hover:not(:disabled) { background: color-mix(in srgb, var(--tint) 22%, transparent); }
.ap-btn--gray { background: var(--fill-tertiary); color: var(--tint); font-weight: var(--weight-semibold); }
.ap-btn--gray:hover:not(:disabled) { background: var(--fill-secondary); }
.ap-btn--plain { background: none; color: var(--tint); font-weight: var(--weight-regular); padding-left: var(--space-05); padding-right: var(--space-05); }
.ap-btn--plain:hover:not(:disabled) { opacity: 0.65; }
.ap-btn--bordered { background: var(--surface-card); color: var(--text-body); font-weight: var(--weight-regular); border: var(--hairline) solid var(--border-hairline); box-shadow: var(--shadow-raised); border-radius: var(--radius-sm); }
.ap-btn--bordered:hover:not(:disabled) { background: color-mix(in srgb, var(--label-primary) 4%, var(--surface-card)); }
.ap-btn--destructive { color: var(--signal-destructive); }
.ap-btn--destructive.ap-btn--filled { background: var(--on-accent-safe-error); color: var(--label-on-accent); }
.ap-btn--destructive.ap-btn--tinted { background: color-mix(in srgb, var(--signal-destructive) 15%, transparent); color: var(--signal-destructive); }
.ap-btn--capsule { border-radius: var(--radius-capsule); }
.ap-btn--full { width: 100%; }

/* ============ IconButton ============ */
.ap-iconbtn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--tint); cursor: pointer; border-radius: var(--radius-capsule); transition: background-color var(--transition-control), transform var(--transition-control), opacity var(--transition-control); -webkit-tap-highlight-color: transparent; }
.ap-iconbtn:active:not(:disabled) { transform: scale(var(--press-scale)); opacity: 0.6; }
.ap-iconbtn:disabled { opacity: 0.35; cursor: default; }
.ap-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ap-iconbtn--plain:hover:not(:disabled) { background: var(--fill-quaternary); }
.ap-iconbtn--gray { background: var(--fill-tertiary); }
.ap-iconbtn--gray:hover:not(:disabled) { background: var(--fill-secondary); }
.ap-iconbtn--filled { background: var(--tint); color: var(--label-on-accent); }
.ap-iconbtn--glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); box-shadow: inset 0 0 0 var(--hairline) var(--glass-edge), var(--glass-shadow); }

/* ============ Toggle (switch) ============ */
.ap-toggle { position: relative; display: inline-flex; align-items: center; flex: none; width: 51px; height: 31px; border-radius: var(--radius-capsule); border: 0; padding: 2px; cursor: pointer; background: var(--fill-primary); transition: background-color var(--duration-base) var(--ease-spring); }
.ap-toggle[data-on="true"] { background: var(--signal-success); }
.ap-toggle:disabled { opacity: 0.4; cursor: default; }
.ap-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ap-toggle__knob { width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16); transition: transform var(--transition-move); }
.ap-toggle[data-on="true"] .ap-toggle__knob { transform: translateX(20px); }
.ap-toggle--sm { width: 38px; height: 22px; position: relative; }
/* The small switch draws at 38x22 but must still be hittable at 44x44 (accessibility.md > Mobility). */
.ap-toggle--sm::after { content: ''; position: absolute; inset: -11px -3px; }
.ap-toggle--sm .ap-toggle__knob { width: 18px; height: 18px; }
.ap-toggle--sm[data-on="true"] .ap-toggle__knob { transform: translateX(16px); }

/* ============ SegmentedControl ============ */
.ap-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 2px; background: var(--fill-tertiary); border-radius: var(--radius-lg); position: relative; width: 100%; }
.ap-seg__item { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 0 var(--space-15); min-height: 28px; font-size: var(--type-subheadline-size); font-weight: var(--weight-medium); color: var(--text-body); border-radius: var(--radius-md); transition: color var(--transition-control), opacity var(--transition-control); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-05); }
.ap-seg__item:active { opacity: 0.5; }
.ap-seg__item:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ap-seg__thumb { position: absolute; top: 2px; bottom: 2px; background: var(--bg-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); transition: left var(--transition-move), width var(--transition-move); z-index: 0; }
.ap-seg__sep { position: absolute; width: var(--hairline); background: var(--separator); top: 7px; bottom: 7px; z-index: 0; }

/* ============ Slider ============ */
.ap-slider { display: flex; align-items: center; gap: var(--space-15); width: 100%; }
.ap-slider__track { position: relative; flex: 1; height: 4px; border-radius: var(--radius-capsule); background: var(--fill-secondary); cursor: pointer; }
.ap-slider__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-capsule); background: var(--tint); }
.ap-slider__knob { position: absolute; top: 50%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #FFFFFF; transform: translateY(-50%); box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.16); transition: transform var(--transition-control); }
.ap-slider__input { position: absolute; inset: -10px 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }
.ap-slider__glyph { color: var(--text-secondary); display: inline-flex; }

/* ============ Stepper ============ */
.ap-stepper { display: inline-flex; align-items: stretch; background: var(--fill-tertiary); border-radius: var(--radius-md); overflow: hidden; }
.ap-stepper__btn { border: 0; background: none; color: var(--text-body); width: 45px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--transition-control); }
.ap-stepper__btn:hover:not(:disabled) { background: var(--fill-secondary); }
.ap-stepper__btn:active:not(:disabled) { background: var(--fill-primary); }
.ap-stepper__btn:disabled { opacity: 0.3; cursor: default; }
.ap-stepper__sep { width: var(--hairline); background: var(--separator); margin: 7px 0; }

/* ============ TextField ============ */
.ap-field { display: flex; flex-direction: column; gap: var(--space-075); width: 100%; }
.ap-field__label { font-size: var(--type-footnote-size); color: var(--label-primary); letter-spacing: var(--tracking-caption); }
.ap-field__box { display: flex; align-items: center; gap: var(--space-1); background: var(--fill-quaternary); border: var(--hairline) solid transparent; border-radius: var(--radius-lg); padding: 0 var(--space-15); min-height: var(--target-ios-default); transition: border-color var(--transition-control), background-color var(--transition-control); }
.ap-field__box:focus-within { border-color: var(--tint); background: var(--surface-card); box-shadow: var(--shadow-focus-ring); }
.ap-field__box--bordered { background: var(--surface-card); border-color: var(--border-hairline); box-shadow: var(--shadow-raised); border-radius: var(--radius-sm); min-height: var(--target-macos-default); }
.ap-field__box--plain { background: none; border-radius: 0; padding: 0; min-height: var(--height-list-row); }
.ap-field__box--invalid { border-color: var(--signal-error); }
.ap-field__input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: var(--type-body-size); line-height: var(--type-body-line); letter-spacing: var(--tracking-body); color: var(--text-body); }
.ap-field__input::placeholder { color: var(--text-placeholder); }
.ap-field__input:disabled { color: var(--text-disabled); }
.ap-field__help { font-size: var(--type-caption-1-size); color: var(--text-secondary-strong); }
.ap-field__help--error { color: var(--signal-error); }
.ap-field__affix { color: var(--text-secondary); display: inline-flex; align-items: center; }

/* ============ SearchField ============ */
.ap-search { display: flex; align-items: center; gap: var(--space-075); background: var(--fill-tertiary); border-radius: var(--radius-lg); padding: 0 var(--space-1); min-height: 36px; width: 100%; transition: background-color var(--transition-control); }
.ap-search:focus-within { background: var(--surface-card); box-shadow: inset 0 0 0 var(--hairline) var(--border-hairline), var(--shadow-focus-ring); }
.ap-search__input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: var(--type-body-size); color: var(--text-body); }
.ap-search__input::placeholder { color: var(--text-secondary); }
.ap-search__glyph { color: var(--text-secondary); }
.ap-search__clear { border: 0; background: none; padding: 0; color: var(--label-tertiary); cursor: pointer; display: inline-flex; }

/* ============ Checkbox / Radio (macOS-first) ============ */
.ap-check { display: inline-flex; align-items: flex-start; gap: var(--space-1); cursor: pointer; font-size: var(--type-mac-body-size); line-height: 18px; }
.ap-check__box { flex: none; width: 16px; height: 16px; border-radius: var(--radius-xs); border: var(--hairline) solid var(--separator-opaque); background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; color: var(--label-on-accent); box-shadow: var(--shadow-raised); transition: background-color var(--transition-control), border-color var(--transition-control); }
.ap-check[data-checked="true"] .ap-check__box { background: var(--tint); border-color: var(--tint); }
.ap-check--radio .ap-check__box { border-radius: 50%; }
.ap-check[data-disabled="true"] { opacity: 0.4; cursor: default; }
.ap-check__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============ Picker (pop-up button) ============ */
.ap-picker { position: relative; display: inline-flex; align-items: center; }
.ap-picker__btn { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--surface-card); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-sm); box-shadow: var(--shadow-raised); min-height: var(--target-macos-default); padding: 0 var(--space-1) 0 var(--space-15); cursor: pointer; font-size: var(--type-subheadline-size); color: var(--text-body); transition: background-color var(--transition-control); }
.ap-picker__btn:hover { background: color-mix(in srgb, var(--label-primary) 4%, var(--surface-card)); }
.ap-picker__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ap-picker__chev { color: var(--text-secondary); }
.ap-picker__menu { position: absolute; top: calc(100% + var(--space-05)); left: 0; min-width: 100%; z-index: 40; padding: var(--space-05); background: var(--material-thick); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-popover); }
.ap-picker__opt { display: flex; align-items: center; gap: var(--space-1); width: 100%; border: 0; background: none; text-align: left; padding: var(--space-075) var(--space-1); border-radius: var(--radius-xs); font-size: var(--type-subheadline-size); color: var(--text-body); cursor: pointer; }
.ap-picker__opt:hover { background: var(--tint); color: var(--label-on-accent); }
.ap-picker__opt[data-selected="true"] { font-weight: var(--weight-medium); }

/* ============ Bars ============ */
.ap-navbar { display: flex; align-items: center; gap: var(--space-1); min-height: var(--height-nav-bar); padding: 0 var(--space-1); background: var(--material-chrome); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); border-bottom: var(--hairline) solid var(--separator); position: relative; }
.ap-navbar--transparent { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.ap-navbar__title { font-size: var(--type-headline-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-body); position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.ap-navbar__side { display: inline-flex; align-items: center; gap: var(--space-05); z-index: 1; }
.ap-navbar__side--trailing { margin-left: auto; }
.ap-navbar__large { font-family: var(--font-title); font-size: var(--type-large-title-size); line-height: var(--type-large-title-line); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); padding: var(--space-05) var(--margin-screen-compact) var(--space-1); }

.ap-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; min-height: var(--height-tab-bar); background: var(--material-chrome); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); border-top: var(--hairline) solid var(--separator); }
.ap-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; cursor: pointer; color: var(--text-secondary); padding: var(--space-05) 0; transition: color var(--transition-control); }
.ap-tabbar__item[data-active="true"] { color: var(--tint); }
.ap-tabbar__item:active { opacity: 0.5; }
.ap-tabbar__label { font-size: var(--type-caption-2-size); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caption); }

.ap-toolbar { display: flex; align-items: center; gap: var(--space-1); min-height: var(--height-toolbar-macos); padding: 0 var(--space-15); background: var(--material-chrome); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); border-bottom: var(--hairline) solid var(--separator); }
.ap-toolbar__spacer { flex: 1; }
.ap-toolbar__group { display: inline-flex; align-items: center; gap: var(--space-05); }

.ap-sidebar { display: flex; flex-direction: column; gap: var(--space-025); padding: var(--space-1) var(--space-125); background: var(--material-thin); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); min-width: 220px; overflow-y: auto; }
.ap-sidebar__heading { font-size: var(--type-mac-subheadline-size); font-weight: var(--weight-semibold); color: var(--text-secondary); padding: var(--space-15) var(--space-1) var(--space-05); letter-spacing: var(--tracking-caption); }
.ap-sidebar__item { display: flex; align-items: center; gap: var(--space-1); border: 0; background: none; cursor: pointer; text-align: left; width: 100%; padding: var(--space-075) var(--space-1); border-radius: var(--radius-sm); font-size: var(--type-subheadline-size); color: var(--text-body); min-height: var(--target-macos-default); transition: background-color var(--transition-control); }
.ap-sidebar__item:hover { background: var(--fill-quaternary); }
.ap-sidebar__item[data-active="true"] { background: var(--fill-secondary); font-weight: var(--weight-medium); }
.ap-sidebar__item[data-active="true"][data-emphasized="true"] { background: var(--tint-filled); color: var(--label-on-accent); }
.ap-sidebar__count { margin-left: auto; font-size: var(--type-caption-1-size); color: var(--label-primary); font-variant-numeric: tabular-nums; }

/* ============ Lists ============ */
.ap-list { display: flex; flex-direction: column; background: var(--surface-card); border-radius: var(--radius-lg); overflow: hidden; }
.ap-list--inset { margin: 0 var(--margin-screen-compact); }
.ap-list--plain { border-radius: 0; background: var(--surface-page); }
.ap-list__header { font-size: var(--type-footnote-size); color: var(--text-secondary-strong); text-transform: uppercase; letter-spacing: var(--tracking-caps); padding: var(--space-3) var(--margin-screen-compact) var(--space-075); }
.ap-list__footer { font-size: var(--type-footnote-size); color: var(--text-secondary-strong); padding: var(--space-075) var(--margin-screen-compact) var(--space-2); }

.ap-row { display: flex; align-items: center; gap: var(--space-15); width: 100%; border: 0; background: none; text-align: left; padding: var(--space-1) var(--inset-list-row); min-height: var(--height-list-row); position: relative; color: var(--text-body); font-size: var(--type-body-size); transition: background-color var(--duration-instant) var(--ease-standard); }
.ap-row + .ap-row::before { content: ""; position: absolute; top: 0; left: var(--inset-list-row); right: 0; height: var(--hairline); background: var(--separator); }
.ap-row--tappable { cursor: pointer; }
.ap-row--tappable:active { background: var(--fill-quaternary); }
.ap-row__glyph { flex: none; width: 29px; height: 29px; border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; color: var(--label-on-accent); }
.ap-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ap-row__title { letter-spacing: var(--tracking-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-row__subtitle { font-size: var(--type-footnote-size); color: var(--text-secondary-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-row__value { color: var(--text-secondary); font-size: var(--type-body-size); flex: none; }
.ap-row__chev { color: var(--label-tertiary); flex: none; }
.ap-row--destructive .ap-row__title { color: var(--signal-destructive); }

/* ============ Card ============ */
.ap-card { background: var(--surface-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.ap-card--flat { box-shadow: none; border: var(--hairline) solid var(--border-hairline); }
.ap-card--glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); box-shadow: inset 0 0 0 var(--hairline) var(--glass-edge), var(--glass-shadow); }
.ap-card__body { padding: var(--inset-card); display: flex; flex-direction: column; gap: var(--space-1); }
.ap-card__title { font-size: var(--type-headline-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-body); }
.ap-card__text { font-size: var(--type-subheadline-size); color: var(--text-secondary-strong); line-height: var(--type-subheadline-line); }

/* ============ Sheet ============ */
.ap-sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.28); z-index: 30; animation: ap-fade var(--duration-base) var(--ease-standard); }
.ap-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--surface-card); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet); display: flex; flex-direction: column; animation: ap-sheet-in var(--duration-sheet) var(--ease-spring); overflow: hidden; }
.ap-sheet__grabber { width: 36px; height: 5px; border-radius: var(--radius-capsule); background: var(--label-quaternary); margin: var(--space-075) auto var(--space-05); flex: none; }
.ap-sheet__head { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--margin-screen-compact); min-height: var(--height-nav-bar); }
.ap-sheet__title { font-size: var(--type-headline-size); font-weight: var(--weight-semibold); flex: 1; text-align: center; }
.ap-sheet__body { padding: var(--space-1) var(--margin-screen-compact) var(--space-3); overflow-y: auto; }
@keyframes ap-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ap-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes ap-spin { to { transform: rotate(360deg); } }
@keyframes ap-indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

/* ============ Popover ============ */
.ap-popover { position: absolute; z-index: 40; min-width: 200px; padding: var(--space-1); background: var(--material-thick); -webkit-backdrop-filter: var(--material-thick-blur); backdrop-filter: var(--material-thick-blur); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-popover); animation: ap-pop var(--duration-fast) var(--ease-spring); }
.ap-popover__arrow { position: absolute; width: 12px; height: 12px; background: inherit; border: inherit; transform: rotate(45deg); }

/* ============ Alert ============ */
.ap-alert-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; z-index: 50; padding: var(--space-5) var(--space-4); animation: ap-fade var(--duration-fast) var(--ease-standard); }
.ap-alert { width: 270px; max-width: 100%; background: var(--material-thick); -webkit-backdrop-filter: var(--material-thick-blur); backdrop-filter: var(--material-thick-blur); border-radius: var(--radius-2xl); overflow: hidden; text-align: center; box-shadow: var(--shadow-popover); animation: ap-pop var(--duration-fast) var(--ease-spring); }
.ap-alert__body { padding: var(--space-25) var(--space-2) var(--space-2); display: flex; flex-direction: column; gap: var(--space-05); }
.ap-alert__title { font-size: var(--type-headline-size); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-body); }
.ap-alert__message { font-size: var(--type-footnote-size); line-height: var(--type-footnote-line); color: var(--text-body); }
.ap-alert__actions { display: flex; flex-direction: column; border-top: var(--hairline) solid var(--separator); }
.ap-alert__actions--row { flex-direction: row; }
.ap-alert__action { flex: 1; border: 0; background: none; min-height: var(--target-ios-default); font-size: var(--type-body-size); color: var(--tint); cursor: pointer; position: relative; }
.ap-alert__action:active { background: var(--fill-quaternary); }
.ap-alert__action + .ap-alert__action::before { content: ""; position: absolute; background: var(--separator); }
.ap-alert__actions--row .ap-alert__action + .ap-alert__action::before { left: 0; top: 0; bottom: 0; width: var(--hairline); }
.ap-alert__actions:not(.ap-alert__actions--row) .ap-alert__action + .ap-alert__action::before { top: 0; left: 0; right: 0; height: var(--hairline); }
.ap-alert__action--default { font-weight: var(--weight-semibold); }
.ap-alert__action--destructive { color: var(--signal-destructive); }

/* ============ Badge ============ */
.ap-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-075); border-radius: var(--radius-capsule); background: var(--signal-error); color: #FFFFFF; font-size: var(--type-caption-2-size); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-caption); }
.ap-badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }
.ap-badge--neutral { background: var(--fill-primary); color: var(--text-secondary); }
.ap-badge--tint { background: var(--tint); }
.ap-badge--success { background: var(--signal-success); }
.ap-badge--warning { background: var(--signal-warning); color: #000; }

/* ============ Progress ============ */
.ap-progress { width: 100%; height: 4px; border-radius: var(--radius-capsule); background: var(--fill-secondary); overflow: hidden; }
.ap-progress__fill { height: 100%; border-radius: var(--radius-capsule); background: var(--tint); transition: width var(--transition-control); }
.ap-spinner { display: inline-block; border-radius: 50%; border-style: solid; border-color: var(--label-quaternary); border-top-color: var(--text-secondary); animation: ap-spin 0.7s linear infinite; }

/* ============ Banner (in-place feedback) ============ */
.ap-banner { display: flex; align-items: flex-start; gap: var(--space-15); padding: var(--space-15) var(--space-2); border-radius: var(--radius-xl); background: var(--fill-quaternary); font-size: var(--type-subheadline-size); line-height: var(--type-subheadline-line); }
.ap-banner__glyph { flex: none; margin-top: 1px; }
.ap-banner--info { background: color-mix(in srgb, var(--signal-info) 12%, transparent); color: var(--text-body); }
.ap-banner--info .ap-banner__glyph { color: var(--signal-info); }
.ap-banner--success { background: color-mix(in srgb, var(--signal-success) 14%, transparent); }
.ap-banner--success .ap-banner__glyph { color: var(--signal-success); }
.ap-banner--warning { background: color-mix(in srgb, var(--signal-warning) 16%, transparent); }
.ap-banner--warning .ap-banner__glyph { color: var(--signal-warning); }
.ap-banner--error { background: color-mix(in srgb, var(--signal-error) 12%, transparent); }
.ap-banner--error .ap-banner__glyph { color: var(--signal-error); }
.ap-banner__title { font-weight: var(--weight-semibold); }

/* ============ Glass surface ============ */
.ap-glass { background: var(--glass-fill); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); box-shadow: inset 0 0 0 var(--hairline) var(--glass-edge), var(--glass-shadow); border-radius: var(--radius-capsule); }
.ap-glass--thin { -webkit-backdrop-filter: var(--material-thin-blur); backdrop-filter: var(--material-thin-blur); background: var(--material-thin); }
.ap-glass--thick { -webkit-backdrop-filter: var(--material-thick-blur); backdrop-filter: var(--material-thick-blur); background: var(--material-thick); }

/* Glass shape: capsule is the system default for controls, panel radius for surfaces */
.ap-glass--control { border-radius: var(--glass-radius-control); }
.ap-glass--panel { border-radius: var(--glass-radius-panel); }
/* Tint = prominence, the glass equivalent of a filled button */
.ap-glass--prominent { background: color-mix(in srgb, var(--glass-tint-color) calc(var(--glass-tint-strength) * 100%), transparent); color: var(--label-on-accent); }
/* Interactive glass brightens and lifts under touch/pointer; static panels do not */
.ap-glass--interactive { cursor: pointer; transition: background var(--transition-control), transform var(--transition-control); }
.ap-glass--interactive:hover { background: color-mix(in srgb, var(--glass-interactive-brighten), var(--glass-fill)); }
.ap-glass--interactive:active { transform: scale(var(--glass-interactive-press-scale)); }
/* A glass group: children closer than the merge distance read as ONE surface, so the
   group carries the glass and the children carry none. This is the toolbar model —
   items share a single glass background rather than each getting its own pill. */
.ap-glass-group { display: flex; align-items: center; gap: var(--space-025); padding: var(--space-05); border-radius: var(--glass-radius-control); background: var(--glass-fill); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); box-shadow: inset 0 0 0 var(--hairline) var(--glass-edge), var(--glass-shadow); }
.ap-glass-group > * { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
/* Opt an item out of the shared background when it must read as separate */
.ap-glass-group > .ap-glass-detached { background: var(--glass-fill); -webkit-backdrop-filter: var(--material-regular-blur); backdrop-filter: var(--material-regular-blur); box-shadow: inset 0 0 0 var(--hairline) var(--glass-edge); border-radius: var(--glass-radius-control); }
/* Scroll edge effect — THREE styles (scroll-views.md). automatic is the DEFAULT and the more
   opaque one; soft is the gentle variable-blur fade; hard adds a defined edge at the boundary. */
.ap-scroll-edge--automatic { background: var(--scroll-edge-top); height: var(--scroll-edge-height); }
.ap-scroll-edge--soft { background: var(--scroll-edge-soft); height: var(--scroll-edge-height); }
.ap-scroll-edge--hard { background: var(--scroll-edge-top); height: var(--scroll-edge-height); border-bottom: var(--scroll-edge-hard-line); }

/* ============ Divider ============ */
.ap-divider { height: var(--hairline); background: var(--separator); border: 0; margin: 0; width: 100%; }
.ap-divider--vertical { width: var(--hairline); height: auto; align-self: stretch; }
.ap-divider--inset { margin-left: var(--inset-list-row); }

/* ============ Menu (pull-down, pop-up, context) ============ */
.ap-menu { display: flex; flex-direction: column; min-width: 180px; padding: var(--space-05) 0; background: var(--material-thick); -webkit-backdrop-filter: var(--material-thick-blur); backdrop-filter: var(--material-thick-blur); border: var(--hairline) solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); overflow: hidden; animation: ap-pop var(--duration-fast) var(--ease-spring); }
.ap-menu__title { font-size: var(--type-caption-1-size); color: var(--text-secondary-strong); padding: var(--space-05) var(--space-15) var(--space-075); }
.ap-menu__group + .ap-menu__group { border-top: var(--hairline) solid var(--separator); margin-top: var(--space-05); padding-top: var(--space-05); }
.ap-menu__item { display: flex; align-items: center; gap: var(--space-1); width: 100%; border: 0; background: none; text-align: left; cursor: pointer; padding: var(--space-075) var(--space-15); min-height: var(--target-macos-default); font-size: var(--type-subheadline-size); color: var(--text-body); transition: background-color var(--duration-instant) var(--ease-standard); }
.ap-menu__item:hover:not(:disabled) { background: var(--fill-quaternary); }
.ap-menu__item:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ap-menu__item:disabled { color: var(--label-tertiary); cursor: default; }
.ap-menu__item[data-destructive="true"] { color: var(--signal-destructive); }
.ap-menu__label { flex: 1; min-width: 0; }
.ap-menu__check { flex: none; color: var(--text-body); }
.ap-menu__trail { flex: none; color: var(--text-secondary); }
.ap-menu__item[data-destructive="true"] .ap-menu__trail { color: var(--signal-destructive); }

/* ============ PullDownButton ============ */
.ap-pulldown { position: relative; display: inline-flex; }
.ap-pulldown__btn { gap: var(--space-075); }
.ap-pulldown__menu { position: absolute; top: calc(100% + var(--space-075)); z-index: 40; }
.ap-pulldown__menu--start { left: 0; }
.ap-pulldown__menu--end { right: 0; }

/* ============ PageControl ============ */
/* Indicator colour is deliberately not themeable — custom colours cut the contrast that
   separates the current page from the rest (page-controls.md). */
.ap-pagecontrol { display: inline-flex; align-items: center; gap: var(--space-025); padding: var(--space-05) var(--space-075); border-radius: var(--radius-capsule); background: transparent; transition: background-color var(--transition-control); }
.ap-pagecontrol--bg-prominent { background: var(--glass-fill); -webkit-backdrop-filter: var(--material-thin-blur); backdrop-filter: var(--material-thin-blur); }
.ap-pagecontrol--bg-automatic:hover, .ap-pagecontrol--bg-automatic:focus-within { background: var(--glass-fill); -webkit-backdrop-filter: var(--material-thin-blur); backdrop-filter: var(--material-thin-blur); }
.ap-pagecontrol__dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 22px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--label-primary); }
.ap-pagecontrol__dot:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-xs); }
.ap-pagecontrol__pip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.25; transition: opacity var(--transition-control); }
.ap-pagecontrol__glyph { opacity: 0.25; transition: opacity var(--transition-control); }
.ap-pagecontrol__dot[data-current="true"] .ap-pagecontrol__pip, .ap-pagecontrol__dot[data-current="true"] .ap-pagecontrol__glyph { opacity: 1; }

/* ============ DisclosureGroup ============ */
.ap-disclosure { display: flex; flex-direction: column; width: 100%; }
.ap-disclosure__summary { display: flex; align-items: center; gap: var(--space-075); border: 0; background: none; cursor: pointer; text-align: left; padding: var(--space-075) 0; min-height: var(--target-macos-default); font-size: var(--type-subheadline-size); color: var(--text-body); }
.ap-disclosure__summary:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-xs); }
.ap-disclosure__marker { flex: none; color: var(--text-secondary); transition: transform var(--transition-move); }
.ap-disclosure--triangle[data-open="true"] .ap-disclosure__marker { transform: rotate(90deg); }
.ap-disclosure--button[data-open="true"] .ap-disclosure__marker { transform: rotate(180deg); }
.ap-disclosure__label { font-weight: var(--weight-medium); }
.ap-disclosure__content { padding: var(--space-05) 0 var(--space-1) var(--space-25); display: flex; flex-direction: column; gap: var(--space-1); }
.ap-disclosure--button .ap-disclosure__content { padding-left: 0; }

/* ============ Gauge ============ */
.ap-gauge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-05); }
.ap-gauge--linear { display: flex; align-items: stretch; width: 100%; }
.ap-gauge__dial { position: relative; }
.ap-gauge__svg { width: 100%; height: 100%; display: block; }
.ap-gauge__track { fill: none; stroke: var(--fill-secondary); stroke-width: 10; stroke-linecap: round; }
.ap-gauge__fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray var(--transition-control); }
.ap-gauge__needle { fill: none; stroke-width: 14; stroke-linecap: butt; transition: transform var(--transition-control); }
/* Inset off the 270° arc's terminals — the stroke eats ~10% of the dial on each side. */
.ap-gauge__center { position: absolute; inset: 18%; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.ap-gauge__value { font-family: var(--font-numeric); font-size: var(--type-title-3-size); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--label-primary); letter-spacing: var(--tracking-20); }
.ap-gauge__value--inline { font-size: var(--type-footnote-size); font-weight: var(--weight-medium); }
.ap-gauge__caption { font-size: var(--type-caption-1-size); color: var(--text-secondary-strong); }
.ap-gauge__ends { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--type-caption-2-size); color: var(--text-secondary-strong); font-variant-numeric: tabular-nums; }
.ap-gauge__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1); margin-bottom: var(--space-05); }
.ap-gauge__bar { position: relative; height: 6px; border-radius: var(--radius-capsule); background: var(--fill-secondary); }
.ap-gauge__barfill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-capsule); transition: width var(--transition-control); }
.ap-gauge__barmark { position: absolute; top: -3px; width: 3px; height: 12px; border-radius: var(--radius-capsule); margin-left: -1.5px; transition: left var(--transition-control); }
/* Discrete level indicator: segments fill completely, never partially (gauges.md). */
.ap-gauge__segments { display: flex; gap: 2px; }
.ap-gauge__segment { flex: 1; height: 10px; border-radius: var(--radius-xs); background: var(--fill-secondary); }