/* ==========================================================================
   Aspect 10 components — ported verbatim from the Aspect 10 design system
   (prototype/_ds/aspect10-design-system-73d0287f…/components/components.css).
   ========================================================================== */
/* Aspect 10 components. Colours, spacing, sizes and type come from tokens.css. */

body { margin: 0; background: var(--ground); color: var(--ink); font: var(--text-body); -webkit-font-smoothing: antialiased; }
.a10-glyph { display: block; flex: none; }

/* Preview layout helpers */
.a10-demo { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-6); }
.a10-demo--stack { flex-direction: column; align-items: stretch; }
.a10-demo--top { align-items: flex-start; }

/* Button */
.a10-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); margin: 0; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); font: var(--text-button); letter-spacing: var(--tracking-button); text-transform: uppercase; white-space: nowrap; max-width: 100%; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.a10-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-btn:active:not(:disabled) { transform: translateY(1px); }
.a10-btn--sm { height: var(--control-sm); padding: 0 var(--space-4); }
.a10-btn--lg { height: var(--control-xl); padding: 0 22px; }
.a10-btn--block { display: flex; width: 100%; }
.a10-btn__icon { display: inline-flex; }
.a10-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-highlight); }
.a10-btn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.a10-btn--secondary { border-color: var(--frame-edge); }
.a10-btn--secondary:hover:not(:disabled),
.a10-btn--ghost:hover:not(:disabled) { background: var(--carpet); }
.a10-btn--copper { background: var(--copper); border-color: var(--copper); color: var(--office-white); }
.a10-btn--copper:hover:not(:disabled) { background: var(--copper-pressed); border-color: var(--copper-pressed); }
.a10-btn--moss { background: var(--moss); border-color: var(--moss); color: var(--office-white); }
.a10-btn--moss:hover:not(:disabled) { background: var(--moss-pressed); border-color: var(--moss-pressed); }
.a10-btn--prussian-blue { background: var(--prussian-blue); border-color: var(--prussian-blue); color: var(--office-white); }
.a10-btn--prussian-blue:hover:not(:disabled) { background: var(--prussian-blue-pressed); border-color: var(--prussian-blue-pressed); }
.a10-btn--aubergine { background: var(--aubergine); border-color: var(--aubergine); color: var(--office-white); }
.a10-btn--aubergine:hover:not(:disabled) { background: var(--aubergine-pressed); border-color: var(--aubergine-pressed); }
.a10-btn--inverse { background: var(--office-white); border-color: var(--office-white); color: var(--pinstripe); }
.a10-btn--inverse:hover:not(:disabled) { background: var(--carpet); border-color: var(--carpet); }
.a10-btn--inverse:focus-visible { box-shadow: var(--focus-ring-inverse); }
.a10-btn:disabled { background: var(--carpet); border-color: var(--carpet); color: var(--secondary-text); cursor: not-allowed; }
.a10-btn--ghost:disabled { background: transparent; border-color: transparent; color: var(--suit-grey); }

/* IconButton */
.a10-iconbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); margin: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.a10-iconbtn--round { width: var(--control-round); height: var(--control-round); }
.a10-iconbtn--glass { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }
.a10-iconbtn--glass:hover:not(:disabled) { background: var(--raised-surface); }
.a10-iconbtn--sm { width: var(--control-sm); height: var(--control-sm); }
.a10-iconbtn--lg { width: var(--control-lg); height: var(--control-lg); }
.a10-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-iconbtn:active:not(:disabled) { transform: translateY(1px); }
.a10-iconbtn--ghost:hover:not(:disabled),
.a10-iconbtn--secondary:hover:not(:disabled) { background: var(--carpet); }
.a10-iconbtn--secondary { border-color: var(--frame-edge); }
.a10-iconbtn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-highlight); }
.a10-iconbtn--primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.a10-iconbtn--inverse { color: var(--office-white); }
.a10-iconbtn--inverse:hover:not(:disabled) { outline: 1px solid currentColor; outline-offset: -4px; }
.a10-iconbtn--inverse:focus-visible { box-shadow: var(--focus-ring-inverse); }
.a10-iconbtn:disabled { color: var(--suit-grey); cursor: not-allowed; }
.a10-iconbtn--secondary:disabled { border-color: var(--suit-grey); }
.a10-iconbtn--primary:disabled { background: var(--carpet); border-color: var(--carpet); color: var(--secondary-text); }

/* Field, Input and Select */
.a10-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.a10-field__label { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); }
.a10-field__hint { margin: 0; font: var(--text-caption); color: var(--secondary-text); }
.a10-field__error { margin: 0; font: var(--text-caption); color: var(--copper); }
.a10-field.is-disabled .a10-field__label { color: var(--secondary-text); }
.a10-input,
.a10-select__control { box-sizing: border-box; width: 100%; height: var(--control-xl); margin: 0; padding: 0 18px; border: 1px solid var(--control-edge); border-radius: var(--radius-sm); background: var(--raised-surface); color: var(--ink); font: var(--text-body); -webkit-appearance: none; appearance: none; }
.a10-input::placeholder { color: var(--secondary-text); opacity: 1; }
.a10-input:hover:not(:disabled),
.a10-select__control:hover:not(:disabled) { border-color: var(--ink); }
.a10-input:focus,
.a10-select__control:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.a10-input[aria-invalid="true"],
.a10-select__control[aria-invalid="true"] { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.a10-input:disabled,
.a10-select__control:disabled { background: var(--carpet); border-color: var(--carpet); color: var(--secondary-text); cursor: not-allowed; }
.a10-select { position: relative; }
.a10-select__control { padding-right: var(--space-12); cursor: pointer; }
.a10-select__control:has(option[value=""]:checked) { color: var(--secondary-text); }
.a10-select__chevron { position: absolute; top: 50%; right: var(--space-4); margin-top: -8px; color: var(--ink); pointer-events: none; }

/* Checkbox and Radio */
.a10-choice { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-4); color: var(--ink); font: var(--text-body); cursor: pointer; }
.a10-choice__input { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: inherit; }
.a10-check__box,
.a10-radio__box { position: relative; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--suit-grey); background: var(--raised-surface); color: var(--on-highlight); }
.a10-check__box { border-radius: var(--radius-xs); }
.a10-radio__box { border-radius: var(--radius-round); }
.a10-check__tick,
.a10-check__dash { position: absolute; opacity: 0; }
.a10-choice__input:checked + .a10-check__box,
.a10-choice__input:indeterminate + .a10-check__box { background: var(--ink); border-color: var(--ink); }
.a10-choice__input:checked + .a10-check__box .a10-check__tick { opacity: 1; }
.a10-choice__input:indeterminate + .a10-check__box .a10-check__tick { opacity: 0; }
.a10-choice__input:indeterminate + .a10-check__box .a10-check__dash { opacity: 1; }
.a10-radio__dot { width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--ink); opacity: 0; }
.a10-choice__input:checked + .a10-radio__box { border-color: var(--ink); }
.a10-choice__input:checked + .a10-radio__box .a10-radio__dot { opacity: 1; }
.a10-choice:hover .a10-choice__input:not(:disabled) + .a10-check__box,
.a10-choice:hover .a10-choice__input:not(:disabled) + .a10-radio__box { border-color: var(--ink); }
.a10-choice__input:focus-visible + .a10-check__box,
.a10-choice__input:focus-visible + .a10-radio__box { box-shadow: var(--focus-ring); }
.a10-choice__text { display: flex; flex-direction: column; gap: var(--space-1); }
.a10-choice__desc { font: var(--text-caption); color: var(--secondary-text); }
.a10-choice.is-disabled { color: var(--secondary-text); cursor: not-allowed; }
.a10-choice.is-disabled .a10-check__box,
.a10-choice.is-disabled .a10-radio__box { background: var(--carpet); border-color: var(--carpet); }
.a10-choice.is-disabled .a10-choice__input:checked + .a10-check__box { background: var(--suit-grey); border-color: var(--suit-grey); }
.a10-choice.is-disabled .a10-radio__dot { background: var(--suit-grey); }

/* Switch */
.a10-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-4); color: var(--ink); font: var(--text-body); cursor: pointer; }
.a10-switch .a10-choice__input { top: 50%; right: 0; left: auto; width: 50px; height: 30px; margin-top: -15px; }
.a10-switch__track { position: relative; box-sizing: border-box; flex: none; width: 50px; height: 30px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--track-off); transition: background-color 120ms linear; }
.a10-switch__thumb { position: absolute; top: 3px; left: 3px; box-sizing: border-box; width: 22px; height: 22px; border: 1px solid rgba(38, 39, 42, 0.1); border-radius: var(--radius-xs); background: var(--thumb); transition: transform 120ms ease-out; }
.a10-choice__input:checked + .a10-switch__track { background: var(--ink); border-color: var(--ink); }
.a10-choice__input:checked + .a10-switch__track .a10-switch__thumb { transform: translateX(20px); }
.a10-switch:hover .a10-choice__input:not(:disabled):not(:checked) + .a10-switch__track { background: rgba(38, 39, 42, 0.2); }
.a10-choice__input:focus-visible + .a10-switch__track { box-shadow: var(--focus-ring); }
.a10-switch.is-disabled { color: var(--secondary-text); cursor: not-allowed; }
.a10-switch.is-disabled .a10-switch__track { background: var(--carpet); border-color: var(--carpet); }
.a10-switch.is-disabled .a10-choice__input:checked + .a10-switch__track { background: var(--suit-grey); border-color: var(--suit-grey); }

/* Card */
.a10-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-card); color: var(--ink); font: var(--text-body); }
.a10-card--raised { background: var(--raised-surface); border: 1px solid var(--hairline); }
.a10-card--carpet { background: var(--carpet); }
.a10-card--cream { background: var(--monitor-cream); }
.a10-card--ink { background: var(--pinstripe); color: var(--office-white); }
.a10-card--glass { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }
.a10-card__head { display: flex; flex-direction: column; gap: var(--space-2); }
.a10-card__eyebrow { margin: 0; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--secondary-text); }
.a10-card--carpet .a10-card__eyebrow,
.a10-card--glass .a10-card__eyebrow { color: var(--ink); }
.a10-card--ink .a10-card__eyebrow { color: var(--secondary-text); }
.a10-card__title { margin: 0; font: var(--text-title); }
.a10-card__body > p { margin: 0; }
.a10-card__footer { padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.a10-card--carpet .a10-card__footer,
.a10-card--cream .a10-card__footer,
.a10-card--glass .a10-card__footer { border-top-color: var(--hairline); }
.a10-card--ink .a10-card__footer { border-top-color: var(--suit-grey); }

/* Badge */
.a10-badge { box-sizing: border-box; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-control-sm); font: var(--text-chip); letter-spacing: var(--tracking-chip); text-transform: uppercase; white-space: nowrap; }
.a10-badge--neutral { background: var(--carpet); color: var(--ink); }
.a10-badge--ink { background: var(--pinstripe); color: var(--office-white); }
.a10-badge--copper { background: var(--copper); color: var(--office-white); }
.a10-badge--moss { background: var(--moss); color: var(--office-white); }
.a10-badge--prussian-blue { background: var(--prussian-blue); color: var(--office-white); }
.a10-badge--aubergine { background: var(--aubergine); color: var(--office-white); }

/* Tag */
.a10-tag { box-sizing: border-box; display: inline-flex; align-items: stretch; height: var(--control-sm); border: 1px solid var(--frame-edge); border-radius: var(--radius-control); background: transparent; color: var(--ink); overflow: hidden; }
.a10-tag__main { display: inline-flex; align-items: center; margin: 0; padding: 0 14px; border: 0; border-radius: var(--radius-control); background: none; color: inherit; font: var(--text-chip); letter-spacing: var(--tracking-chip); text-transform: uppercase; white-space: nowrap; }
button.a10-tag__main { cursor: pointer; }
.a10-tag.is-interactive:not(.is-selected):not(.is-disabled):hover { background: var(--carpet); }
.a10-tag.is-selected { background: var(--ink); border-color: var(--ink); color: var(--on-highlight); }
.a10-tag__remove { display: inline-flex; align-items: center; justify-content: center; width: 30px; margin: 0 0 0 calc(var(--space-2) * -1); padding: 0 4px 0 0; border: 0; border-radius: var(--radius-control); background: none; color: inherit; cursor: pointer; }
.a10-tag:not(.is-selected) .a10-tag__remove:hover:not(:disabled) { background: var(--carpet); }
.a10-tag__main:focus-visible,
.a10-tag__remove:focus-visible { position: relative; z-index: 1; outline: none; box-shadow: var(--focus-ring); }
.a10-tag.is-selected .a10-tag__main:focus-visible,
.a10-tag.is-selected .a10-tag__remove:focus-visible { box-shadow: var(--focus-ring-inverse); }
.a10-tag.is-disabled { border-color: var(--carpet); color: var(--suit-grey); }
.a10-tag.is-disabled button { cursor: not-allowed; }

/* Tabs */
.a10-tabs__list { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--hairline); }
.a10-tab { position: relative; flex: none; height: var(--control-md); margin: 0; padding: 0; border: 0; border-radius: var(--radius-none); background: none; color: var(--secondary-text); font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; }
.a10-tab:hover:not(:disabled),
.a10-tab.is-selected { color: var(--ink); }
.a10-tab.is-selected::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--ink); }
.a10-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-tab:disabled { color: var(--suit-grey); cursor: not-allowed; }
.a10-tabs__panel { padding-top: var(--space-6); font: var(--text-body); }
.a10-tabs__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Dialog */
.a10-dialog__scrim { position: fixed; inset: 0; z-index: 100; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--scrim); }
.a10-dialog { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 440px; max-height: 100%; overflow: auto; padding: var(--space-6); border: 1px solid var(--hairline); border-radius: var(--radius-dialog); background: var(--raised-surface); color: var(--ink); }
.a10-dialog:focus { outline: none; }
.a10-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.a10-dialog__title { margin: 0; font: var(--text-title); }
.a10-dialog__close { flex: none; margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0; }
.a10-dialog__body { font: var(--text-body); }
.a10-dialog__body > p { margin: 0; }
/* Dialog buttons stack full width so no label runs outside its button. The action first, the quiet choice below. */
.a10-dialog__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); padding-top: var(--space-2); }
.a10-dialog__actions > .a10-btn { display: flex; width: 100%; height: var(--control-xl); }
.a10-dialog__actions > .a10-btn--ghost { height: var(--control-round); }

/* Toast */
.a10-toast { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-4); width: 100%; max-width: 420px; min-height: var(--control-lg); padding: var(--space-4) var(--space-2) var(--space-4) 18px; border-radius: var(--radius-toast); background: var(--pinstripe); color: var(--office-white); }
.a10-toast--copper { background: var(--copper); }
.a10-toast--moss { background: var(--moss); }
.a10-toast--prussian-blue { background: var(--prussian-blue); }
.a10-toast--aubergine { background: var(--aubergine); }
.a10-toast__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.a10-toast__title { margin: 0; font: var(--text-button); }
.a10-toast__message { margin: 0; font: var(--text-body-s); }
.a10-toast__action { flex: none; height: var(--control-sm); margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius-control); background: none; color: inherit; font: var(--text-button); letter-spacing: var(--tracking-button); text-transform: uppercase; cursor: pointer; }
.a10-toast__close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm); margin: 0; padding: 0; border: 0; border-radius: var(--radius-control); background: none; color: inherit; cursor: pointer; }
.a10-toast__action:hover,
.a10-toast__close:hover { background: rgba(244, 243, 239, 0.14); }
.a10-toast__action:focus-visible,
.a10-toast__close:focus-visible { outline: none; box-shadow: var(--focus-ring-inverse); }

/* Tooltip */
.a10-tooltip { position: relative; display: inline-flex; }
.a10-tooltip__bubble { position: absolute; left: 50%; z-index: 50; box-sizing: border-box; width: max-content; max-width: 240px; padding: 6px 10px; border-radius: var(--radius-xs); background: var(--pinstripe); color: var(--office-white); font: var(--text-caption); text-align: left; pointer-events: none; visibility: hidden; opacity: 0; transform: translateX(-50%); transition: opacity 100ms linear; }
.a10-tooltip__bubble--top { bottom: calc(100% + var(--space-2)); }
.a10-tooltip__bubble--bottom { top: calc(100% + var(--space-2)); }
.a10-tooltip__bubble.is-open { visibility: visible; opacity: 1; }

/* Nav */
.a10-nav { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-8); min-height: 64px; padding: 0 var(--space-6); color: var(--ink); }
.a10-nav--ground { background: var(--ground); border-bottom: 1px solid var(--hairline); }
.a10-nav--glass { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); border-bottom: 1px solid var(--glass-edge); }
.a10-nav--ink { background: var(--pinstripe); color: var(--office-white); }
.a10-nav__brand { display: flex; flex: none; align-items: center; }
.a10-nav__brand img,
.a10-nav__brand svg { display: block; width: auto; height: 30px; }
.a10-nav__nav { flex: 1; min-width: 0; }
.a10-nav__list { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.a10-nav__link { position: relative; display: inline-flex; align-items: center; height: 64px; color: var(--secondary-text); font: var(--text-button); letter-spacing: var(--tracking-button); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.a10-nav__link:hover,
.a10-nav__link.is-current { color: var(--ink); }
.a10-nav__link.is-current::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: currentColor; }
.a10-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-nav--glass .a10-nav__link { color: var(--ink); }
.a10-nav--ink .a10-nav__link { color: rgba(244, 243, 239, 0.72); }
.a10-nav--ink .a10-nav__link:hover,
.a10-nav--ink .a10-nav__link.is-current { color: var(--office-white); }
.a10-nav--ink .a10-nav__link:focus-visible { box-shadow: var(--focus-ring-inverse); }
.a10-nav__actions { display: flex; flex: none; align-items: center; gap: var(--space-4); margin-left: auto; }

/* TabBar: the floating bar of the app. */
.a10-tabbar { box-sizing: border-box; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; height: var(--tabbar-height); padding: 5px; border-radius: var(--radius-tabbar); color: var(--ink); }
.a10-tabbar--glass { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }
.a10-tabbar--raised { background: var(--raised-surface); border: 1px solid var(--hairline); }
.a10-tabbar__item { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; min-width: 0; margin: 0; padding: 0 4px; border: 0; border-radius: var(--radius-control); background: none; color: inherit; font: var(--text-chip); letter-spacing: var(--tracking-chip); text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.74; cursor: pointer; }
.a10-tabbar__item:hover { opacity: 1; }
.a10-tabbar__item.is-current { opacity: 1; background: var(--ink); color: var(--on-highlight); }
.a10-tabbar__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Ground: a blurred office photograph behind a glass screen. Set --ground-photo on the element. This file reads it, so a relative url
   resolves from components/, wherever the page lives: style="--ground-photo: url(../assets/photos/office-07.jpg)". */
.a10-ground { position: relative; isolation: isolate; overflow: hidden; background: var(--ground); }
.a10-ground::before { content: ""; position: absolute; inset: calc(var(--blur-ground) * -2); z-index: -2; background: var(--ground-photo, none) center / cover no-repeat; filter: blur(var(--blur-ground)) saturate(1.15); }
.a10-ground::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--photo-veil); }
/* On glass, raised surfaces become tinted glass. */
[data-theme="glass"] .a10-card--raised,
[data-theme="glass"] .a10-dialog,
[data-theme="glass"] .a10-tabbar--raised,
[data-theme="glass"] .a10-input,
[data-theme="glass"] .a10-select__control { -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); border-color: var(--glass-edge); }
[data-theme="glass"] .a10-card--glass,
[data-theme="glass"] .a10-tabbar--glass,
[data-theme="glass"] .a10-iconbtn--glass,
[data-theme="glass"] .a10-nav--glass { -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); }
[data-theme="glass"] .a10-iconbtn--glass:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
[data-theme="glass"] .a10-choice__input:checked + .a10-switch__track .a10-switch__thumb { background: var(--pinstripe); border-color: transparent; }
[data-theme="glass"] .a10-select__control option { color: #26272a; }

/* Shared by the app components */
.a10-glass { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4); backdrop-filter: blur(var(--blur-glass)) saturate(1.4); }
.a10-solid { background: var(--raised-surface); border: 1px solid var(--hairline); }
.a10-inkpanel { --ink: var(--office-white); --secondary-text: rgba(244, 243, 239, 0.72); --hairline: rgba(244, 243, 239, 0.18); background: var(--pinstripe); border: 1px solid var(--pinstripe); color: var(--ink); }
.a10-tone { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--suit-grey); }
.a10-tone--copper { background: var(--copper); } .a10-tone--moss { background: var(--moss); } .a10-tone--prussian-blue { background: var(--prussian-blue); } .a10-tone--aubergine { background: var(--aubergine); }

/* MonthCard */
.a10-month { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; margin: 0; padding: var(--space-6); border-radius: var(--radius-l); color: var(--ink); font: var(--text-body); text-align: left; text-decoration: none; }
button.a10-month, a.a10-month { cursor: pointer; }
button.a10-month:focus-visible, a.a10-month:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-month__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.a10-month__when { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; white-space: nowrap; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.a10-month__posture { margin: var(--space-4) 0 0; font: var(--text-posture-title); letter-spacing: var(--tracking-posture-title); text-transform: uppercase; white-space: nowrap; }
.a10-month__theme { margin: var(--space-2) 0 0; font: var(--text-body); font-weight: 500; color: var(--ink); }
.a10-month__line { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--hairline); font: var(--text-body-s); text-wrap: pretty; }
.a10-month--compact { padding: var(--space-4); }
.a10-month--compact .a10-month__posture { margin-top: var(--space-2); font: var(--text-caps-title); letter-spacing: var(--tracking-caps-title); white-space: nowrap; }
.a10-month--compact .a10-month__theme { font: var(--text-body-s); font-weight: 500; }

/* ReadingCard */
.a10-reading { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-l); color: var(--ink); }
.a10-reading__label { margin: 0; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--secondary-text); }
.a10-reading__figure { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0 0; }
.a10-reading__unit { font: var(--text-body-s); color: var(--secondary-text); }
.a10-reading__text { margin: 0; font: var(--text-body); text-wrap: pretty; }
.a10-reading__caption { margin: 0; font: var(--text-caption); color: var(--secondary-text); }

/* TimelineLane */
.a10-lane { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--ink); }
.a10-lane__name { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.a10-lane__track { position: relative; display: flex; gap: 2px; height: 44px; }
.a10-lane__period { box-sizing: border-box; display: flex; flex: none; align-items: center; gap: var(--space-2); min-width: 0; height: 100%; margin: 0; padding: 0 var(--space-2) 0 12px; border-radius: var(--radius-m); color: inherit; font: var(--text-chip); letter-spacing: var(--tracking-chip); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-align: left; }
button.a10-lane__period { cursor: pointer; }
button.a10-lane__period:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-lane__period > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.a10-lane__now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); pointer-events: none; }
.a10-lane__axis { display: flex; }
.a10-lane__month { flex: none; font: var(--text-caption); color: var(--secondary-text); font-variant-numeric: tabular-nums; }
.a10-lane__month.is-current { color: var(--ink); font-weight: 600; }

/* PersonRow */
.a10-person { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 72px; margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--hairline); background: none; color: var(--ink); font: var(--text-body); text-align: left; text-decoration: none; }
button.a10-person, a.a10-person { cursor: pointer; }
button.a10-person:focus-visible, a.a10-person:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.a10-person__avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border-radius: var(--radius-m); background: var(--carpet); font: var(--text-label); letter-spacing: 0.06em; }
.a10-person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.a10-person__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.a10-person__name { font-weight: 500; }
.a10-person__meta { display: flex; align-items: center; gap: var(--space-2); font: var(--text-body-s); color: var(--secondary-text); }
.a10-person__note { font: var(--text-caption); color: var(--secondary-text); }
.a10-person__end { display: flex; flex: none; color: var(--secondary-text); }

/* NotificationPreview */
.a10-notif { box-sizing: border-box; display: flex; align-items: flex-start; gap: 12px; width: 100%; max-width: 370px; padding: 14px var(--space-4); border-radius: var(--radius-l); color: var(--ink); }
.a10-notif__icon { flex: none; width: 38px; height: 38px; border-radius: var(--radius-m); overflow: hidden; background: var(--pinstripe); }
.a10-notif__icon img { display: block; width: 100%; height: 100%; }
.a10-notif__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.a10-notif__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.a10-notif__app { font: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--secondary-text); }
.a10-notif__time { font: var(--text-caption); color: var(--secondary-text); font-variant-numeric: tabular-nums; }
.a10-notif__title { margin: 0; font: var(--text-body-s); font-weight: 600; }
.a10-notif__body { margin: 0; font: var(--text-body-s); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .a10-switch__track,
  .a10-switch__thumb,
  .a10-tooltip__bubble { transition: none; }
}