/* astra-opus component styles. Values come from tokens.css; logical properties only.
   Sections follow bundle.js. `data-ao-state` reproduces hover / focus / pressed for documentation previews only. */

:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

.ao-visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ==== shared control surface: Button, IconButton, page buttons ==== */
.ao-control {
  box-sizing: border-box;
  position: relative;
  margin: 0;
  block-size: var(--control-height);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 14px; line-height: 24px; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
.ao-control--primary { background-color: var(--action); border-color: var(--action-border); color: var(--on-action); }
.ao-control--primary:hover, .ao-control--primary[data-ao-state~="hover"] { box-shadow: var(--state-hover); }
.ao-control--primary:active, .ao-control--primary[data-ao-state~="pressed"] { box-shadow: var(--state-pressed); }
.ao-control--secondary { background-color: transparent; border-color: var(--control); color: var(--text); }
.ao-control--secondary:hover, .ao-control--secondary[data-ao-state~="hover"] { background-color: var(--subtle); }
.ao-control--secondary:active, .ao-control--secondary[data-ao-state~="pressed"] { background-color: var(--line); }
.ao-control--ghost { background-color: transparent; border-color: transparent; color: var(--text); }
.ao-control--ghost:hover, .ao-control--ghost[data-ao-state~="hover"] { background-color: var(--subtle); }
.ao-control--ghost:active, .ao-control--ghost[data-ao-state~="pressed"] { background-color: var(--line); }
/* destructive: danger label and edge on the ground; danger-bg fill on hover/press (≥4.6:1 light, ≥6.0:1 dark) */
.ao-control--danger { background-color: transparent; border-color: var(--danger); color: var(--danger); }
.ao-control--danger:hover, .ao-control--danger[data-ao-state~="hover"] { background-color: var(--danger-bg); }
.ao-control--danger:active, .ao-control--danger[data-ao-state~="pressed"] { background-color: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger); }
/* inverse: the one CTA on a `copper-deep` band only — `on-fill` ground and edge, `copper-deep` label; the focus ring
   resolves to the band's dark `focus`. Its states stay warm: hover and press tint the ground toward `copper-fill`
   (a step, then a deeper step) instead of greying it with the black state overlay, and the edge always follows the
   ground (one --ao-inverse-ground), so there is no white halo. Label ≥ 7:1 in every state. Disabled on the band:
   no ground, a faint `on-fill` edge and a `muted` label — never the dark `subtle` slab. */
.ao-control--inverse { --ao-inverse-ground: var(--on-fill); background-color: var(--ao-inverse-ground); border-color: var(--ao-inverse-ground); color: var(--copper-deep); }
.ao-control--inverse:hover, .ao-control--inverse[data-ao-state~="hover"] { --ao-inverse-ground: color-mix(in srgb, var(--copper-fill) 18%, var(--on-fill)); }
.ao-control--inverse:active, .ao-control--inverse[data-ao-state~="pressed"] { --ao-inverse-ground: color-mix(in srgb, var(--copper-fill) 32%, var(--on-fill)); }

.ao-control:focus { outline: none; }
.ao-control:focus-visible, .ao-control[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

.ao-control:disabled,
.ao-control:disabled:hover,
.ao-control:disabled:active {
  background-color: var(--subtle);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
.ao-control--inverse:disabled,
.ao-control--inverse:disabled:hover,
.ao-control--inverse:disabled:active {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--on-fill) 40%, transparent);
  color: var(--muted);
}
.ao-control[data-loading] { cursor: progress; }
.ao-control--primary[data-loading]:hover, .ao-control--primary[data-loading]:active { box-shadow: none; }
.ao-control--inverse[data-loading]:hover, .ao-control--inverse[data-loading]:active { --ao-inverse-ground: var(--on-fill); }
.ao-control--secondary[data-loading]:hover, .ao-control--secondary[data-loading]:active,
.ao-control--ghost[data-loading]:hover, .ao-control--ghost[data-loading]:active,
.ao-control--danger[data-loading]:hover, .ao-control--danger[data-loading]:active { background-color: transparent; box-shadow: none; }

/* ==== Button: the label-centring primitive ====
   [slot | label | slot]; both slots --icon-md wide whether filled or empty; symmetric padding.
   An inline button never shrinks below its label; a block button truncates the label inside its own track. */
.ao-btn {
  display: inline-grid;
  grid-template-columns: var(--icon-md) minmax(auto, 1fr) var(--icon-md);
  align-items: center;
  column-gap: var(--space-8);
  padding-block: 0;
  padding-inline: var(--space-16);
  max-inline-size: 100%;
  vertical-align: middle;
}
.ao-btn--block { display: grid; inline-size: 100%; grid-template-columns: var(--icon-md) minmax(0, 1fr) var(--icon-md); }
.ao-btn__slot { display: flex; align-items: center; justify-content: center; inline-size: var(--icon-md); block-size: var(--icon-md); }
.ao-btn__slot > svg { inline-size: var(--icon-md); block-size: var(--icon-md); flex: none; }
.ao-btn__label { min-inline-size: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==== IconButton ==== */
.ao-iconbtn { display: inline-grid; place-items: center; inline-size: var(--control-height); padding: 0; vertical-align: middle; flex: none; }
.ao-iconbtn > svg { inline-size: var(--icon-md); block-size: var(--icon-md); }
.ao-iconbtn--compact { block-size: var(--control-height-compact); inline-size: var(--control-height-compact); }
.ao-iconbtn--compact::before { content: ""; position: absolute; inset: calc((var(--control-height-compact) - var(--touch-target)) / 2 - 1px); }

/* ==== Icon / Spinner ==== */
.ao-icon { display: block; flex: none; }
.ao-icon--flip:dir(rtl) { transform: scaleX(-1); }
.ao-spinner { display: block; flex: none; animation: ao-spin 800ms linear infinite; }
@keyframes ao-spin { to { transform: rotate(360deg); } }
@keyframes ao-pulse { 50% { opacity: .45; } }

/* ==== category hues ==== identity, never state. `ao-hue--<hue>` sets the paints a mark reads: ink (glyph, text-free
   marks), swatch, tint (chip, tile and avatar ground), fill (solid tile) and the glyph on that fill. */
.ao-hue--copper { --ao-hue-ink: var(--copper); --ao-hue-swatch: var(--copper); --ao-hue-bg: var(--copper-bg); --ao-hue-fill: var(--copper-fill); --ao-hue-on-fill: var(--on-fill); }
.ao-hue--patina { --ao-hue-ink: var(--patina); --ao-hue-swatch: var(--patina); --ao-hue-bg: var(--patina-bg); --ao-hue-fill: var(--patina-fill); --ao-hue-on-fill: var(--on-fill); }
.ao-hue--indigo { --ao-hue-ink: var(--indigo); --ao-hue-swatch: var(--indigo); --ao-hue-bg: var(--indigo-bg); --ao-hue-fill: var(--indigo-fill); --ao-hue-on-fill: var(--on-fill); }
.ao-hue--moss { --ao-hue-ink: var(--moss); --ao-hue-swatch: var(--moss); --ao-hue-bg: var(--moss-bg); --ao-hue-fill: var(--moss-fill); --ao-hue-on-fill: var(--on-fill); }
.ao-hue--plum { --ao-hue-ink: var(--plum); --ao-hue-swatch: var(--plum); --ao-hue-bg: var(--plum-bg); --ao-hue-fill: var(--plum-fill); --ao-hue-on-fill: var(--on-fill); }
.ao-hue--neutral { --ao-hue-ink: var(--muted); --ao-hue-swatch: var(--control); --ao-hue-bg: var(--subtle); --ao-hue-fill: var(--subtle); --ao-hue-on-fill: var(--text); }

/* ==== Swatch / ToolTile ==== a category is a SQUARE: the 8px swatch, or a 28–44px tile */
.ao-swatch { display: inline-block; flex: none; box-sizing: border-box; inline-size: 8px; block-size: 8px; border-radius: var(--radius-mark); background: var(--ao-hue-swatch); vertical-align: middle; }
.ao-tooltile { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; vertical-align: middle; }
.ao-tooltile--sm { inline-size: 28px; block-size: 28px; border-radius: var(--radius-control); }
.ao-tooltile--md { inline-size: 32px; block-size: 32px; border-radius: var(--radius-control); }
.ao-tooltile--lg { inline-size: 44px; block-size: 44px; border-radius: var(--radius-card); }
.ao-tooltile--tint { background: var(--ao-hue-bg); color: var(--ao-hue-ink); }
.ao-tooltile--fill { background: var(--ao-hue-fill); color: var(--ao-hue-on-fill); }
/* neutral solid tile: `subtle` with a `line` edge and a `text` glyph, so it holds on `subtle` sections too */
.ao-tooltile--fill.ao-hue--neutral { box-shadow: inset 0 0 0 1px var(--line); }
/* `ao-selected`: the selection ground for a consumer's own list or grid item (full-area `copper-bg`, hover included) */
.ao-selected, .ao-selected:hover { background-color: var(--copper-bg); }
/* selection grounds (a selected table row, the current NavList item, `ao-selected`) are `copper-bg`, the copper tint itself: a copper
   chip, tile or avatar there would lose its shape and leave a bare glyph. Inside them the copper tint becomes `surface`
   with a `line` edge; the other hues keep their tint, which already reads on copper-bg. */
:is(.ao-table tbody tr.is-selected, .ao-navlist__item.is-current, .ao-selected) .ao-hue--copper { --ao-hue-bg: var(--surface); }
:is(.ao-table tbody tr.is-selected, .ao-navlist__item.is-current, .ao-selected) :is(.ao-tooltile--tint, .ao-avatar).ao-hue--copper { box-shadow: inset 0 0 0 1px var(--line); }
:is(.ao-table tbody tr.is-selected, .ao-navlist__item.is-current, .ao-selected) .ao-chip.ao-hue--copper:not(.is-selected) { border-color: var(--line); }

/* ==== Field ==== */
.ao-field { display: grid; gap: var(--space-4); min-inline-size: 0; font-family: var(--font-sans); color: var(--text); }
.ao-field__label { font-size: 14px; line-height: 24px; font-weight: 500; color: var(--text); }
.ao-field__optional { font-weight: 400; color: var(--muted); }
.ao-field__msg { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); min-block-size: 24px; }
.ao-field__help, .ao-field__error { margin: 0; font-size: 14px; line-height: 24px; font-weight: 400; }
.ao-field__help { color: var(--muted); }
.ao-field__error { display: flex; align-items: flex-start; gap: var(--space-4); color: var(--danger); }
.ao-field__error > svg { margin-block-start: 4px; }
.ao-field__counter { flex: none; font-size: 12px; line-height: 24px; color: var(--muted); font-variant-numeric: tabular-nums; }

.ao-input {
  box-sizing: border-box; position: relative;
  display: flex; align-items: center; gap: var(--space-8);
  min-block-size: var(--control-height);
  padding-inline: var(--space-12);
  border: 1px solid var(--control); border-radius: var(--radius-control);
  background: transparent; color: var(--text);
  transition: border-color 120ms ease;
}
.ao-input:hover, .ao-input[data-ao-state~="hover"] { border-color: var(--muted); }
.ao-input:focus-within, .ao-input[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-field--invalid .ao-input, .ao-field--invalid .ao-input:hover { border-color: var(--danger); }
.ao-input[data-disabled], .ao-input[data-disabled]:hover { background: var(--subtle); border-color: var(--line); color: var(--muted); }
.ao-input__el {
  flex: 1 1 auto; min-inline-size: 0; block-size: 42px;
  margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit;
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: 0;
}
.ao-input__el::placeholder { color: var(--muted); opacity: 1; }
.ao-input__el:disabled { cursor: not-allowed; }
.ao-input__el[dir="ltr"] { text-align: left; }
.ao-input__icon { display: flex; color: var(--muted); flex: none; }
.ao-input--multiline { align-items: stretch; padding-block: var(--space-8); }
.ao-input--multiline .ao-input__el { block-size: auto; min-block-size: 96px; resize: vertical; }
/* Select: native list, custom chevron */
.ao-select { padding: 0; }
.ao-select__el { appearance: none; -webkit-appearance: none; inline-size: 100%; padding-inline: var(--space-12) 40px; cursor: pointer; }
.ao-select__el[data-empty] { color: var(--muted); }
.ao-select__el option { color: var(--text); background: var(--surface); }
.ao-select__chev { position: absolute; inset-block: 0; inset-inline-end: var(--space-12); display: flex; align-items: center; color: var(--muted); pointer-events: none; }
/* Combobox */
.ao-combo { padding-inline-end: 0; }
.ao-combo__toggle { flex: none; display: flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 42px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--radius-control); }

/* ==== floating layers (listbox, menu, tooltip) ==== */
.ao-popup {
  position: fixed; inset: auto; margin: 0; z-index: 1000;
  box-sizing: border-box; padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay);
  font-family: var(--font-sans); overflow: visible;
}
.ao-popup:not([data-open]) { display: none; }
.ao-listbox { max-block-size: 288px; overflow-y: auto; }
.ao-option { display: flex; align-items: center; gap: var(--space-8); min-block-size: var(--touch-target); padding-inline: var(--space-8) var(--space-12); border-radius: var(--radius-control); font-size: 14px; line-height: 24px; cursor: pointer; }
.ao-option.is-active { background: var(--subtle); }
.ao-option__check { display: flex; inline-size: 16px; flex: none; color: var(--text); }
.ao-option__label { min-inline-size: 0; }
.ao-option__meta { margin-inline-start: auto; padding-inline-start: var(--space-12); font-size: 12px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.ao-listbox__empty { padding: var(--space-12); font-size: 14px; line-height: 24px; color: var(--muted); }

/* ==== Checkbox / Radio / Switch ==== the row is the 44px target; the box is 20px */
.ao-check {
  position: relative; box-sizing: border-box;
  display: inline-flex; align-items: flex-start; gap: var(--space-12);
  min-block-size: var(--touch-target); padding-block: 10px;
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; color: var(--text);
  cursor: pointer;
}
.ao-check--bare { justify-content: center; align-items: center; min-inline-size: var(--touch-target); padding: 0; }
.ao-check__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: inherit; }
.ao-check__box {
  flex: none; box-sizing: border-box; position: relative;
  display: grid; place-items: center;
  inline-size: 20px; block-size: 20px; margin-block-start: 2px;
  border: 1px solid var(--control); border-radius: var(--radius-badge);
  background: transparent; color: var(--on-action);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ao-check--bare .ao-check__box { margin: 0; }
/* the drawn parts never take the pointer: the real input underneath does */
.ao-check__box, .ao-switch__track { pointer-events: none; }
.ao-check__tick, .ao-check__dash { display: none; }
.ao-check__dash { inline-size: 10px; block-size: 2px; border-radius: 1px; background: currentColor; }
.ao-check:hover .ao-check__input:enabled:not(:checked):not(:indeterminate) + .ao-check__box,
.ao-check[data-ao-state~="hover"] .ao-check__box { border-color: var(--muted); }
.ao-check__input:checked + .ao-check__box,
.ao-check__input:indeterminate + .ao-check__box { background: var(--action); border-color: var(--action-border); }
.ao-check__input:checked:not(:indeterminate) + .ao-check__box .ao-check__tick { display: block; }
.ao-check__input:indeterminate + .ao-check__box .ao-check__dash { display: block; }
.ao-check__input:focus-visible + .ao-check__box,
.ao-check__input:focus-visible + .ao-switch__track,
.ao-check[data-ao-state~="focus"] .ao-check__box,
.ao-check[data-ao-state~="focus"] .ao-switch__track { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-check--invalid .ao-check__box { border-color: var(--danger); }
.ao-check--disabled { color: var(--muted); cursor: not-allowed; }
.ao-check__input:disabled + .ao-check__box { background: var(--subtle); border-color: var(--line); color: var(--muted); }
.ao-check__text { display: grid; min-inline-size: 0; }
.ao-check__label { font-weight: 500; }
.ao-check__desc { color: var(--muted); }
.ao-radio .ao-check__box { border-radius: 50%; }
.ao-radio__dot { display: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.ao-radio .ao-check__input:checked + .ao-check__box .ao-radio__dot { display: block; }
.ao-choicegroup { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: var(--space-4); }
.ao-choicegroup > legend { padding: 0; margin-block-end: var(--space-4); }
.ao-choicegroup__items { display: grid; }
.ao-choicegroup--row .ao-choicegroup__items { display: flex; flex-wrap: wrap; column-gap: var(--space-24); }
.ao-switch__track {
  flex: none; position: relative; box-sizing: border-box;
  inline-size: 40px; block-size: 24px;
  border: 1px solid var(--control); border-radius: var(--radius-card);
  background: var(--control);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ao-switch__thumb {
  position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--on-action);
  transition: inset-inline-start 120ms ease;
}
.ao-check__input:checked + .ao-switch__track { background: var(--action); border-color: var(--action-border); }
.ao-check__input:checked + .ao-switch__track .ao-switch__thumb { inset-inline-start: 18px; }
.ao-check__input:disabled + .ao-switch__track { background: var(--subtle); border-color: var(--line); }
.ao-check__input:disabled + .ao-switch__track .ao-switch__thumb { background: var(--line); }

/* ==== Segmented ==== */
.ao-seg {
  box-sizing: border-box; display: inline-flex; align-items: stretch; gap: var(--space-2);
  block-size: var(--control-height); max-inline-size: 100%;
  padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--subtle); font-family: var(--font-sans);
}
.ao-seg--block { display: flex; inline-size: 100%; }
.ao-seg--block .ao-seg__item { flex: 1 1 0; }
.ao-seg__item {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
  min-inline-size: var(--control-height); padding-inline: var(--space-12);
  border-radius: var(--radius-badge); color: var(--muted);
  font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.ao-seg__item::before { content: ""; position: absolute; inset: -3px -1px; }
.ao-seg__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ao-seg__item:hover { color: var(--text); }
.ao-seg__item.is-selected { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--action-border); }
.ao-seg__item:has(.ao-seg__input:focus-visible), .ao-seg__item[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); z-index: 1; }
.ao-seg__item.is-disabled { color: var(--control); cursor: not-allowed; }

/* ==== Tabs ==== */
.ao-tabs { min-inline-size: 0; }
.ao-tabs__list { display: flex; gap: var(--space-4); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.ao-tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: var(--space-8);
  block-size: var(--tab-height); margin: 0; padding-inline: var(--space-12);
  border: 0; border-radius: var(--radius-control) var(--radius-control) 0 0;
  background: transparent; color: var(--muted);
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: color 120ms ease;
}
.ao-tab:hover, .ao-tab[data-ao-state~="hover"] { color: var(--text); }
.ao-tab[aria-selected="true"] { color: var(--text); }
.ao-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: var(--space-12); inset-block-end: 0; block-size: 2px; background: var(--action-border); }
.ao-tab:focus { outline: none; }
.ao-tab:focus-visible, .ao-tab[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
.ao-tab:disabled { color: var(--control); cursor: not-allowed; }
.ao-tab__count { min-inline-size: 20px; padding-inline: 6px; box-sizing: border-box; border-radius: var(--radius-badge); background: var(--subtle); color: var(--muted); font-size: 12px; line-height: 20px; text-align: center; }
.ao-tabs__panel { padding-block-start: var(--space-24); }
.ao-tabs__panel:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

/* ==== Breadcrumb ==== */
.ao-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); }
.ao-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-4); min-inline-size: 0; }
.ao-breadcrumb__link { display: inline-flex; align-items: center; min-block-size: var(--touch-target); border-radius: var(--radius-badge); color: var(--muted); text-decoration: none; font-size: 14px; line-height: 24px; }
.ao-breadcrumb__link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.ao-breadcrumb__link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-breadcrumb__current { color: var(--text); font-size: 14px; line-height: 24px; font-weight: 500; }
.ao-breadcrumb__sep { color: var(--control); }

/* ==== Pagination ==== */
.ao-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); font-family: var(--font-sans); }
.ao-pagination__summary { margin: 0; color: var(--muted); font-size: 14px; line-height: 24px; }
.ao-pagination__controls { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
.ao-pagination ul { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ao-page { display: inline-grid; place-items: center; min-inline-size: var(--control-height); padding-inline: var(--space-8); font-weight: 500; font-variant-numeric: tabular-nums; }
.ao-page.is-current, .ao-page.is-current:hover { background: var(--subtle); box-shadow: inset 0 0 0 1px var(--action-border); }
.ao-pagination__gap { min-inline-size: 24px; text-align: center; color: var(--muted); }
.ao-pagination__status { padding-inline: var(--space-12); color: var(--text); font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; }

/* ==== NavList ==== */
.ao-navlist ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ao-navlist__item {
  position: relative; display: flex; align-items: center; gap: var(--space-12);
  min-block-size: var(--control-height); padding-inline: var(--space-12);
  border-radius: var(--radius-control); color: var(--muted); text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 500;
}
.ao-navlist__item:hover { background: var(--subtle); color: var(--text); }
.ao-navlist__item.is-current, .ao-navlist__item.is-current:hover { background: var(--copper-bg); color: var(--text); font-weight: 600; }
.ao-navlist__item.is-current::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 12px; inline-size: 2px; border-radius: 1px; background: var(--action-border); }
.ao-navlist__item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
.ao-navlist__icon { display: flex; }
.ao-navlist__item:has(.ao-navlist__tile) { padding-inline-start: var(--space-8); }
.ao-navlist__label { min-inline-size: 0; }
.ao-navlist__count { margin-inline-start: auto; font-size: 12px; line-height: 20px; color: var(--muted); }

/* ==== BrandMark ==== always `brand` (the inline style pins it too); a link keeps a 44px target */
.ao-brandmark { display: block; flex: none; color: var(--brand); fill: currentColor; }
.ao-brandmark--sm { block-size: var(--brand-mark-sm); inline-size: auto; }
.ao-brandmark--md { block-size: var(--brand-mark-md); inline-size: auto; }
.ao-brandmark--lg { block-size: var(--brand-mark-lg); inline-size: auto; }
.ao-brandmark-link {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-block-size: var(--touch-target); min-inline-size: var(--touch-target);
  border-radius: var(--radius-control); color: var(--brand); text-decoration: none;
}
.ao-brandmark-link:focus { outline: none; }
.ao-brandmark-link:focus-visible, .ao-brandmark-link[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

/* ==== AppHeader ==== */
.ao-appbar {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--space-24);
  min-block-size: 64px; padding-inline: var(--space-24);
  border-block-end: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
}
.ao-appbar--compact { gap: var(--space-12); padding-inline: var(--space-16); }
.ao-appbar__brand { flex: none; display: flex; align-items: center; gap: var(--space-8); font-size: 15px; line-height: 26px; font-weight: 600; }
/* the product name with no BrandMark is the wordmark: `brand`, like every logo (never `text`) */
.ao-appbar__name { color: var(--brand); white-space: nowrap; }
.ao-appbar__product { padding-inline-start: var(--space-12); margin-inline-start: var(--space-4); border-inline-start: 1px solid var(--line); white-space: nowrap; }
.ao-appbar--compact .ao-appbar__product { display: none; }
/* «منو» is the only route to the links below 768px: it keeps its label; the consumer's actions give way first */
.ao-appbar__end > .ao-appbar__menu { flex: none; max-inline-size: none; }
.ao-appbar__nav ul { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ao-appbar__link {
  position: relative; display: inline-flex; align-items: center;
  block-size: var(--tab-height); padding-inline: var(--space-12);
  border-radius: var(--radius-control); color: var(--muted); text-decoration: none;
  font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap;
}
.ao-appbar__link:hover { color: var(--text); }
.ao-appbar__link[aria-current="page"] { color: var(--text); font-weight: 600; }
/* the label reserves the width of its 600 weight (an invisible copy), so the current link never shifts the row */
.ao-appbar__label { display: inline-flex; flex-direction: column; }
.ao-appbar__label::after { content: attr(data-label); content: attr(data-label) / ""; block-size: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; }
.ao-appbar__link[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--space-12); inset-block-end: -8px; block-size: 2px; background: var(--action-border); }
.ao-appbar__link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
.ao-appbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-12); min-inline-size: 0; }
.ao-appbar__drawer-search { margin-block-end: var(--space-16); }

/* ==== Badge / Status ==== */
.ao-badge {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-4);
  block-size: 24px; padding-inline: var(--space-8); border-radius: var(--radius-badge);
  background: var(--subtle); color: var(--muted);
  font-family: var(--font-sans); font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; vertical-align: middle;
}
.ao-badge__dot, .ao-status__dot { flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.ao-badge--success { background: var(--success-bg); color: var(--success); }
.ao-badge--info { background: var(--info-bg); color: var(--info); }
.ao-badge--warning { background: var(--warning-bg); color: var(--warning); }
.ao-badge--danger { background: var(--danger-bg); color: var(--danger); }
.ao-status { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--muted); font-family: var(--font-sans); font-size: 14px; line-height: 24px; }
.ao-status__dot { inline-size: 8px; block-size: 8px; background: var(--control); }
.ao-status--success .ao-status__dot { background: var(--success); }
.ao-status--info .ao-status__dot { background: var(--info); }
.ao-status--warning .ao-status__dot { background: var(--warning); }
.ao-status--danger .ao-status__dot { background: var(--danger); }

/* ==== Alert ==== */
.ao-alert {
  box-sizing: border-box; display: grid; grid-template-columns: var(--icon-md) minmax(0, 1fr) auto; gap: var(--space-12); align-items: start;
  padding: var(--space-16); border-radius: var(--radius-card); background: var(--info-bg); color: var(--text); font-family: var(--font-sans);
}
.ao-alert__icon { display: flex; margin-block-start: 3px; color: var(--info); }
.ao-alert--success { background: var(--success-bg); } .ao-alert--success .ao-alert__icon { color: var(--success); }
.ao-alert--warning { background: var(--warning-bg); } .ao-alert--warning .ao-alert__icon { color: var(--warning); }
.ao-alert--danger { background: var(--danger-bg); } .ao-alert--danger .ao-alert__icon { color: var(--danger); }
.ao-alert__content { min-inline-size: 0; }
.ao-alert__title { margin: 0; font-size: 15px; line-height: 26px; font-weight: 600; }
.ao-alert__body { font-size: 14px; line-height: 24px; }
.ao-alert__body p { margin: 0; }
.ao-alert__action { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block-start: var(--space-12); }

/* ==== Toast ==== */
.ao-toasts { position: fixed; inset-block-end: var(--space-24); inset-inline-end: var(--space-24); z-index: 1100; display: grid; gap: var(--space-8); inline-size: min(420px, calc(100vw - 32px)); pointer-events: none; font-family: var(--font-sans); }
.ao-toasts__stack { display: grid; gap: var(--space-8); }
.ao-toast {
  pointer-events: auto; box-sizing: border-box;
  display: grid; grid-template-columns: var(--icon-md) minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-8);
  padding-block: var(--space-8); padding-inline: var(--space-16) var(--space-8);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay);
}
.ao-toast__icon { display: flex; color: var(--info); }
.ao-toast--success .ao-toast__icon { color: var(--success); }
.ao-toast--warning .ao-toast__icon { color: var(--warning); }
.ao-toast--danger .ao-toast__icon { color: var(--danger); }
.ao-toast__content { min-inline-size: 0; padding-block: var(--space-4); }
.ao-toast__title { margin: 0; font-size: 14px; line-height: 24px; font-weight: 500; }
.ao-toast__body { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted); }
@media (max-width: 599px) { .ao-toasts { inset-inline: var(--space-16); inset-block-end: var(--space-16); inline-size: auto; } }

/* ==== Progress / Skeleton ==== */
.ao-progress { display: grid; gap: var(--space-8); font-family: var(--font-sans); }
.ao-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); font-size: 14px; line-height: 24px; }
.ao-progress__label { color: var(--muted); }
.ao-progress__value { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.ao-progress__track { position: relative; display: block; block-size: 6px; border-radius: var(--radius-badge); background: var(--line); overflow: hidden; }
.ao-progress--thin .ao-progress__track { block-size: 4px; }
.ao-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--progress-fill); transition: inline-size 240ms ease; }
.ao-progress__track.is-indeterminate .ao-progress__fill { inline-size: 32%; animation: ao-indeterminate 1.4s ease-in-out infinite; }
@keyframes ao-indeterminate { from { margin-inline-start: -32%; } to { margin-inline-start: 100%; } }
.ao-skeleton { display: block; border-radius: var(--radius-badge); background: var(--line); animation: ao-pulse 1.6s ease-in-out infinite; }
.ao-skeleton-lines { display: grid; }
.ao-skeleton--text { block-size: 12px; margin-block: 7px; }

/* ==== EmptyState ==== */
.ao-empty { display: grid; justify-items: center; gap: var(--space-8); padding: var(--space-48) var(--space-24); text-align: center; font-family: var(--font-sans); color: var(--text); }
.ao-empty--compact { padding: var(--space-32) var(--space-16); }
.ao-empty__icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; margin-block-end: var(--space-8); border-radius: var(--radius-card); background: var(--copper-bg); color: var(--copper); }
.ao-empty__icon--hue { background: var(--ao-hue-bg); color: var(--ao-hue-ink); }
/* error vs empty never rests on the glyph alone: the danger tile adds a `danger` edge (copper warmth = empty / no results) */
.ao-empty--danger .ao-empty__icon { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ao-empty__title { margin: 0; font-size: 15px; line-height: 26px; font-weight: 600; }
.ao-empty__desc { margin: 0; max-inline-size: 44ch; font-size: 14px; line-height: 24px; color: var(--muted); text-wrap: pretty; }
.ao-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); margin-block-start: var(--space-8); }

/* ==== Menu / Tooltip ==== */
.ao-menu { min-inline-size: 208px; max-inline-size: min(320px, calc(100vw - 16px)); }
.ao-menu__item {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--space-8);
  inline-size: 100%; min-block-size: var(--touch-target); margin: 0; padding-inline: var(--space-12);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 500; text-align: start; cursor: pointer;
}
.ao-menu__item:hover, .ao-menu__item:focus { background: var(--subtle); outline: none; }
.ao-menu__item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
.ao-menu__item--danger { color: var(--danger); }
.ao-menu__item[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.ao-menu__icon { display: flex; inline-size: var(--icon-md); flex: none; color: var(--muted); }
.ao-menu__item--danger .ao-menu__icon { color: inherit; }
.ao-menu__label { min-inline-size: 0; }
.ao-menu__hint { margin-inline-start: auto; padding-inline-start: var(--space-16); font-size: 12px; line-height: 20px; font-weight: 400; color: var(--muted); }
.ao-menu__sep { block-size: 1px; margin-block: var(--space-4); background: var(--line); }
.ao-tooltip { padding: var(--space-4) var(--space-8); border-radius: var(--radius-badge); max-inline-size: 240px; font-size: 12px; line-height: 20px; font-weight: 500; pointer-events: none; }

/* ==== Dialog / Drawer ==== native <dialog>; the scrim is `scrim` */
.ao-dialog, .ao-drawer {
  box-sizing: border-box; padding: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-dialog); font-family: var(--font-sans);
  max-inline-size: none; overflow: hidden;
}
.ao-dialog::backdrop, .ao-drawer::backdrop { background: rgba(0, 0, 0, .4); background: var(--scrim, rgba(0, 0, 0, .4)); }
.ao-dialog { inline-size: min(560px, calc(100vw - 32px)); max-block-size: calc(100vh - 32px); margin: auto; border-radius: var(--radius-large); }
.ao-dialog--sm { inline-size: min(420px, calc(100vw - 32px)); }
.ao-dialog__inner { display: flex; flex-direction: column; max-block-size: calc(100vh - 34px); }
.ao-dialog__head { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-16) var(--space-24) 0; padding-inline-end: var(--space-12); }
.ao-dialog__titles { flex: 1 1 auto; min-inline-size: 0; padding-block-start: var(--space-4); }
.ao-dialog__title { margin: 0; font-size: 20px; line-height: 34px; font-weight: 600; }
.ao-dialog__desc { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted); }
.ao-dialog__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-16) var(--space-24) var(--space-24); }
.ao-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-12); padding: var(--space-16) var(--space-24); border-block-start: 1px solid var(--line); }
@media (max-width: 479px) {
  .ao-dialog__foot { flex-direction: column-reverse; }
  .ao-dialog__foot > .ao-btn { display: grid; inline-size: 100%; }
}
.ao-drawer { position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0; inline-size: min(400px, calc(100vw - 48px)); block-size: 100%; max-block-size: none; border-block: 0; border-inline-end: 0; border-radius: 0; }
.ao-drawer--start { inset-inline-start: 0; inset-inline-end: auto; border-inline-start: 0; border-inline-end: 1px solid var(--line); }
.ao-drawer .ao-dialog__inner { block-size: 100%; max-block-size: none; }

/* ==== Card ==== */
.ao-card {
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-16); min-inline-size: 0;
  padding: var(--space-24); border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); font-family: var(--font-sans);
}
.ao-card--compact { gap: var(--space-12); padding: var(--space-16); }
.ao-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-12); }
.ao-card__titles { display: grid; min-inline-size: 0; }
.ao-card__lead { display: flex; align-items: flex-start; gap: var(--space-12); min-inline-size: 0; }
.ao-card__tile { margin-block-start: 1px; }
.ao-card--compact .ao-card__tile { margin-block-start: -3px; }
.ao-card__title { margin: 0; font-size: 20px; line-height: 34px; font-weight: 600; }
.ao-card--compact .ao-card__title { font-size: 15px; line-height: 26px; }
.ao-card__meta { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted); }
.ao-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ao-card__body { min-inline-size: 0; }
.ao-card__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-12); padding-block-start: var(--space-16); border-block-start: 1px solid var(--line); }

/* ==== DataTable ==== */
.ao-table-wrap { box-sizing: border-box; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); scrollbar-width: thin; }
.ao-table-wrap:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-table { inline-size: 100%; min-inline-size: 720px; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; line-height: 24px; color: var(--text); }
.ao-table__caption { caption-side: top; padding: var(--space-16) var(--space-16) var(--space-8); text-align: start; font-size: 15px; line-height: 26px; font-weight: 600; }
.ao-table th, .ao-table td { padding: var(--space-16); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--line); }
.ao-table tbody tr:last-child > * { border-block-end: 0; }
.ao-table thead th { padding-block: 10px; font-size: 12px; line-height: 24px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ao-table tbody th { font-weight: 500; }
.ao-table tbody tr:hover { background: var(--subtle); }
/* selection: the `copper-bg` tint over the whole row, hovered or not; the checkbox carries the meaning */
.ao-table tbody tr.is-selected, .ao-table tbody tr.is-selected:hover { background: var(--copper-bg); }
.ao-table__cell--end { text-align: end !important; font-variant-numeric: tabular-nums; }
.ao-table__cell--nowrap { white-space: nowrap; }
.ao-table .ao-table__select { inline-size: 44px; padding-block: 0; padding-inline: var(--space-8) 0; }
.ao-table .ao-table__actions { inline-size: 44px; padding-block: 0; padding-inline: 0 var(--space-8); text-align: end; }
.ao-table__sort {
  display: inline-flex; align-items: center; gap: var(--space-4);
  min-block-size: var(--touch-target); margin-block: -10px; padding: 0;
  border: 0; border-radius: var(--radius-badge); background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.ao-table__sort:hover { color: var(--text); }
.ao-table__sort:focus { outline: none; }
.ao-table__sort:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-table__sorticon { display: inline-flex; opacity: 0; transition: opacity 120ms ease, transform 120ms ease; }
.ao-table__sort:hover .ao-table__sorticon, .ao-table__sort:focus-visible .ao-table__sorticon { opacity: .7; }
.ao-table__sorticon.is-on { opacity: 1; color: var(--text); }
.ao-table__sorticon.is-asc { transform: rotate(180deg); }
.ao-table--compact .ao-table th, .ao-table--compact .ao-table td { padding-block: 10px; }
.ao-table--compact .ao-table thead th { padding-block: 10px; }
.ao-table .ao-table__emptycell { padding: 0; }

/* ==== Chip ==== category: square swatch + `text` label on the hue tint; selected: `copper-bg` + `action-border` + check.
   The 16px mark slot holds the swatch or the check, so selecting never changes the chip's width. */
.ao-chip {
  position: relative; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: var(--space-4);
  block-size: 32px; max-inline-size: 100%; margin: 0; padding-block: 0; padding-inline: var(--space-8) var(--space-12);
  border: 1px solid transparent; border-radius: var(--radius-badge);
  background: var(--ao-hue-bg); color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; vertical-align: middle;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ao-chip.ao-hue--neutral { border-color: var(--line); }
.ao-chip__mark { flex: none; display: grid; place-items: center; inline-size: 16px; block-size: 16px; color: var(--text); }
.ao-chip__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.ao-chip__count { flex: none; padding-inline-start: var(--space-4); color: var(--muted); font-variant-numeric: tabular-nums; }
.ao-chip.is-selected { background: var(--copper-bg); border-color: var(--action-border); }
.ao-chip--toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ao-chip--toggle::before { content: ""; position: absolute; inset: -7px -1px; }
.ao-chip--toggle:not(.is-selected):not(:disabled):hover, .ao-chip--toggle:not(.is-selected):not(:disabled)[data-ao-state~="hover"] { border-color: var(--control); }
.ao-chip--toggle:focus { outline: none; }
.ao-chip--toggle:focus-visible, .ao-chip--toggle[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
/* disabled reads as unavailable, not as another category: the control's disabled paints (`subtle` ground, `line`
   edge, `muted` label) and a `control` swatch; a selected one keeps its check, muted */
.ao-chip--toggle:disabled { --ao-hue-swatch: var(--control); background: var(--subtle); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.ao-chip--toggle:disabled .ao-chip__mark, .ao-chip--toggle:disabled .ao-chip__count { color: var(--muted); }
/* «همه» (hue 'none', ao-chip--all): the neutral ground and an EMPTY mark slot (bundle.js draws no swatch), which the
   check fills when selected — the same width either way */
/* sm: a static category label at the Badge's size (24px, 12/20, 8px inline padding, 4px after the mark) */
.ao-chip--sm { block-size: 24px; padding-inline: var(--space-8); font-size: 12px; line-height: 20px; }
.ao-chip--sm .ao-chip__mark { inline-size: auto; min-inline-size: 8px; block-size: 20px; }

/* ==== Avatar ==== initials in the hue ink on its tint; a `radius-control` square, never a circle */
.ao-avatar {
  display: inline-grid; place-items: center; flex: none; box-sizing: border-box; overflow: hidden;
  border-radius: var(--radius-control); background: var(--ao-hue-bg); color: var(--ao-hue-ink);
  font-family: var(--font-sans); font-weight: 600; white-space: nowrap; vertical-align: middle; user-select: none;
}
.ao-avatar--32 { inline-size: 32px; block-size: 32px; font-size: 12px; line-height: 20px; }
.ao-avatar--40 { inline-size: 40px; block-size: 40px; font-size: 14px; line-height: 24px; }

/* ==== SplitBar ==== part-to-whole: series colours, `space-2` gaps, `radius-mark` at the ends; every segment named in the legend */
.ao-splitbar { display: grid; gap: var(--space-12); min-inline-size: 0; font-family: var(--font-sans); color: var(--text); }
.ao-splitbar__bar { display: flex; gap: var(--space-2); block-size: 12px; border-radius: var(--radius-mark); overflow: hidden; }
.ao-splitbar__seg { flex: 1 1 0; min-inline-size: 2px; background: currentColor; }
.ao-splitbar__legend { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 24px; }
.ao-splitbar__legend li { display: flex; align-items: center; gap: var(--space-8); min-inline-size: 0; }
.ao-splitbar__swatch { flex: none; inline-size: 8px; block-size: 8px; border-radius: var(--radius-mark); background: currentColor; }
.ao-splitbar__label { min-inline-size: 0; color: var(--text); }
.ao-splitbar__share { margin-inline-start: auto; padding-inline-start: var(--space-12); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==== chart series ==== for consumers' inline-SVG charts: a→f in fixed order, never cycled. Put `ao-series--x` on a
   line (`path`, `line`, `polyline`: ink, 2px, dash pattern, no fill) or on any element to set `color` (bars, swatches:
   paint with currentColor). Markers: `ao-series__marker` (filled, `surface` ring) or `--ring` (hollow, series e). */
.ao-series--a { color: var(--series-a); }
.ao-series--b { color: var(--series-b); }
.ao-series--c { color: var(--series-c); }
.ao-series--d { color: var(--series-d); }
.ao-series--e { color: var(--series-e); }
.ao-series--f { color: var(--series-f); }
:is(path, line, polyline):is(.ao-series--a, .ao-series--b, .ao-series--c, .ao-series--d, .ao-series--e, .ao-series--f) {
  fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none;
}
:is(path, line, polyline).ao-series--b { stroke-dasharray: 6 3; }
:is(path, line, polyline).ao-series--c { stroke-dasharray: 1.5 3.5; }
:is(path, line, polyline).ao-series--d { stroke-dasharray: 8 3 1.5 3; }
:is(path, line, polyline).ao-series--e { stroke-dasharray: 12 4; }
:is(path, line, polyline).ao-series--f { stroke-width: 1.5px; }
svg .ao-series__marker { fill: currentColor; stroke: var(--surface); stroke-width: 2px; stroke-dasharray: none; }
svg .ao-series__marker--ring { fill: var(--surface); stroke: currentColor; stroke-width: 2.25px; }

/* ==== Composer / AI ==== */
.ao-composer {
  box-sizing: border-box; display: grid; gap: var(--space-8);
  padding: var(--space-12); border: 1px solid var(--control); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); font-family: var(--font-sans);
}
.ao-composer:focus-within { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-composer.is-error { border-color: var(--danger); }
.ao-composer.is-disabled { background: var(--subtle); border-color: var(--line); }
.ao-composer__input {
  box-sizing: border-box; inline-size: 100%; min-block-size: 52px; max-block-size: 168px;
  margin: 0; padding: var(--space-4); border: 0; outline: 0; resize: none;
  background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: 15px; line-height: 26px; letter-spacing: 0;
}
.ao-composer__input::placeholder { color: var(--muted); opacity: 1; }
.ao-composer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.ao-composer__msg { flex: 1 1 160px; min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); font-size: 12px; line-height: 20px; color: var(--muted); }
.ao-composer.is-error .ao-composer__msg { color: var(--danger); font-size: 14px; line-height: 24px; }
.ao-composer__msg kbd { padding-inline: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-badge); font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text); }
.ao-composer__action { flex: none; inline-size: 136px; margin-inline-start: auto; }
/* narrow composer: the keyboard hint goes (touch keyboards), status and errors take their own row */
.ao-composer { container-type: inline-size; }
@container (max-width: 440px) {
  .ao-composer__hint { display: none; }
  .ao-composer__msg:has(> .ao-composer__hint:only-child) { display: none; }
  .ao-composer__msg { order: -1; flex-basis: 100%; }
}
.ao-ai { display: grid; gap: var(--space-12); font-family: var(--font-sans); color: var(--text); }
.ao-ai:focus { outline: none; }
.ao-ai:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--space-4); border-radius: var(--radius-control); }
.ao-ai__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); }
.ao-ai__who { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 14px; line-height: 24px; font-weight: 600; }
.ao-ai__who svg { color: var(--link); }
.ao-ai__status { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 12px; line-height: 20px; color: var(--muted); }
.ao-ai__status:empty { display: none; }
.ao-ai__status.is-error { color: var(--danger); }
.ao-ai__body { font-size: 15px; line-height: 26px; }
.ao-ai__body > p { margin: 0 0 var(--space-12); }
.ao-ai__body > p:last-child, .ao-ai__body > ul:last-child { margin-block-end: 0; }
.ao-ai__body ul { margin: 0 0 var(--space-12); padding-inline-start: var(--space-20); }
.ao-ai__sources { display: grid; gap: var(--space-4); padding-block-start: var(--space-12); border-block-start: 1px solid var(--line); }
.ao-ai__sources-title { margin: 0; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--muted); }
.ao-ai__sources ol { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ao-ai__source {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--space-8);
  inline-size: 100%; min-block-size: var(--touch-target); margin: 0; padding-inline: var(--space-8);
  border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 24px; text-align: start; cursor: pointer;
}
.ao-ai__source:hover { background: var(--subtle); }
.ao-ai__source:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(var(--focus-width) * -1); }
.ao-ai__source > svg { color: var(--muted); }
.ao-ai__source-n { flex: none; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: var(--radius-badge); background: var(--subtle); color: var(--muted); font-size: 12px; line-height: 20px; font-weight: 500; }
.ao-ai__source-title { min-inline-size: 0; overflow-wrap: anywhere; }
.ao-ai__source-detail { margin-inline-start: auto; padding-inline-start: var(--space-8); font-size: 12px; line-height: 20px; color: var(--muted); white-space: nowrap; }
.ao-ai__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ao-cite {
  display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; margin-inline: var(--space-2) 0; padding-inline: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-badge); background: var(--subtle); color: var(--link);
  font-family: var(--font-sans); font-size: 12px; line-height: 20px; font-weight: 500; vertical-align: 2px; cursor: pointer;
}
.ao-cite:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.ao-usermsg { display: flex; justify-content: flex-end; }
.ao-usermsg__bubble { max-inline-size: min(80%, 560px); padding: var(--space-12) var(--space-16); border-radius: var(--radius-card); background: var(--subtle); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 26px; overflow-wrap: anywhere; }

/* ==== Marketing: Eyebrow, SectionHeader, Hero, FeatureTile, Stat, BrandBand ====
   Expressive surfaces only (marketing, storefront heroes, onboarding, empty-state heroes). Display sizes step down by
   the component's own width (the --narrow modifiers), never the window. */
.ao-eyebrow { display: flex; align-items: center; gap: var(--space-8); margin: 0; color: var(--copper); font-family: var(--font-sans); font-size: 14px; line-height: 24px; font-weight: 600; }
.ao-eyebrow__mark { flex: none; inline-size: 10px; block-size: 10px; border-radius: var(--radius-mark); background: var(--brand); }

.ao-sechead { display: grid; gap: var(--space-16); min-inline-size: 0; font-family: var(--font-sans); color: var(--text); }
.ao-sechead__titles { display: grid; gap: var(--space-8); min-inline-size: 0; }
.ao-sechead__title { margin: 0; font-size: 36px; line-height: 56px; font-weight: 600; letter-spacing: 0; color: var(--text); text-wrap: balance; }
.ao-sechead__lead { margin: 0; max-inline-size: 56ch; font-size: 18px; line-height: 32px; color: var(--muted); text-wrap: pretty; }
.ao-sechead--narrow .ao-sechead__title { font-size: 26px; line-height: 42px; }
.ao-sechead--narrow .ao-sechead__lead { font-size: 15px; line-height: 26px; }
.ao-sechead--center { justify-items: center; text-align: center; }
.ao-sechead--center .ao-eyebrow { justify-content: center; }
.ao-sechead--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--space-48); }

.ao-hero { box-sizing: border-box; display: grid; align-items: center; gap: var(--space-40); min-inline-size: 0; padding-block: var(--space-64); font-family: var(--font-sans); color: var(--text); }
.ao-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-48); }
.ao-hero--narrow { gap: var(--space-32); padding-block: var(--space-40); }
.ao-hero__copy { display: grid; min-inline-size: 0; }
.ao-hero__copy > .ao-eyebrow { margin-block-end: var(--space-16); }
.ao-hero__title { margin: 0 0 var(--space-20); font-size: 52px; line-height: 76px; font-weight: 600; letter-spacing: 0; color: var(--text); text-wrap: balance; }
.ao-hero--narrow .ao-hero__title { font-size: 36px; line-height: 56px; }
.ao-hero__accent { color: var(--brand); }
.ao-hero__lead { margin: 0; max-inline-size: 56ch; font-size: 18px; line-height: 32px; color: var(--muted); text-wrap: pretty; }
.ao-hero--narrow .ao-hero__lead { font-size: 15px; line-height: 26px; }
.ao-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-block-start: var(--space-32); }
/* narrow: one column, every action the same width (the lead's measure), as in the Button card's stacked pair */
.ao-hero--narrow .ao-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); max-inline-size: 56ch; }
.ao-hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-40); margin: var(--space-40) 0 0; padding-block-start: var(--space-24); border-block-start: 1px solid var(--line); }
.ao-hero--narrow .ao-hero__facts { gap: var(--space-12) var(--space-24); margin-block-start: var(--space-32); }
.ao-hero__fact { display: flex; flex-direction: column; min-inline-size: 0; }
.ao-hero__fact dt { font-size: 14px; line-height: 24px; color: var(--muted); text-wrap: pretty; }
.ao-hero__fact dd { order: -1; margin: 0; font-size: 26px; line-height: 42px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ao-hero__media { display: flex; justify-content: center; min-inline-size: 0; }

.ao-feature {
  box-sizing: border-box; position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-16);
  min-inline-size: 0; padding: var(--space-24);
  border: 1px solid transparent; border-radius: var(--radius-card);
  background: var(--ao-hue-bg); color: var(--text); font-family: var(--font-sans); text-decoration: none;
  transition: border-color 120ms ease;
}
.ao-feature--neutral { background: var(--surface); border-color: var(--line); }
.ao-feature__body { display: grid; gap: var(--space-4); min-inline-size: 0; }
.ao-feature__title { margin: 0; font-size: 20px; line-height: 34px; font-weight: 600; color: var(--text); }
.ao-feature__text { margin: 0; font-size: 14px; line-height: 24px; color: var(--muted); text-wrap: pretty; }
.ao-feature__meta { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-8) 0 0; font-size: 14px; line-height: 24px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.ao-feature__arrow { color: var(--ao-hue-ink); }
.ao-feature--link { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ao-feature--link:hover, .ao-feature--link[data-ao-state~="hover"] { border-color: var(--control); }
.ao-feature--link:focus { outline: none; }
.ao-feature--link:focus-visible, .ao-feature--link[data-ao-state~="focus"] { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

.ao-stat { display: grid; align-content: start; min-inline-size: 0; font-family: var(--font-sans); }
/* a figure is one unit («۲ ساعت» never splits); rows pack at the top, so a neighbour's wrapping label never pushes this one down */
.ao-stat__value { font-size: 40px; line-height: 56px; font-weight: 600; color: var(--copper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ao-stat--compact .ao-stat__value { font-size: 26px; line-height: 42px; }
.ao-stat--neutral .ao-stat__value { color: var(--text); }
.ao-stat__label { font-size: 14px; line-height: 24px; color: var(--muted); text-wrap: pretty; }

/* BrandBand: `copper-deep`, the same paint in both themes; data-theme="dark" on the band supplies its inks */
.ao-band { box-sizing: border-box; inline-size: 100%; background: var(--copper-deep); color: var(--text); font-family: var(--font-sans); }
.ao-band__inner {
  box-sizing: border-box; display: grid; align-items: center; justify-items: start; gap: var(--space-24);
  max-inline-size: 1280px; margin-inline: auto; padding: var(--space-64) var(--space-40);
}
.ao-band--row .ao-band__inner { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-48); }
.ao-band--row.ao-band--mark .ao-band__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
.ao-band--narrow .ao-band__inner { padding: var(--space-40) var(--space-16); }
.ao-band__copy { min-inline-size: 0; }
.ao-band__title { margin: 0; font-size: 36px; line-height: 56px; font-weight: 600; letter-spacing: 0; color: var(--text); text-wrap: balance; }
.ao-band--narrow .ao-band__title { font-size: 26px; line-height: 42px; }
.ao-band__sub { margin: var(--space-4) 0 0; font-size: 18px; line-height: 32px; color: var(--muted); text-wrap: pretty; }
.ao-band--narrow .ao-band__sub { font-size: 15px; line-height: 26px; }
.ao-band__cta { display: grid; justify-items: start; gap: var(--space-4); }
.ao-band--row .ao-band__cta { justify-items: center; }
.ao-band__link { display: inline-flex; align-items: center; min-block-size: var(--touch-target); border-radius: var(--radius-badge); color: var(--link); font-size: 14px; line-height: 24px; text-decoration: underline; text-underline-offset: 4px; }
.ao-band__link:focus { outline: none; }
.ao-band__link:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

/* ==== Stage (preview shell) ==== an explicit themed ground; the preview frame forces html/body transparent */
.ao-stage { position: relative; min-block-size: 100vh; box-sizing: border-box; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.ao-stage::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg); }
.ao-stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) var(--space-24); border-block-end: 1px solid var(--line); }
.ao-stage__title { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--muted); }
.ao-stage__controls { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.ao-stage__canvas { box-sizing: border-box; padding: var(--space-24); }
.ao-stage__canvas--framed { margin-inline: auto; max-inline-size: 100%; padding: 0; outline: 1px dashed var(--line); background: var(--bg); }
.ao-stage--flush .ao-stage__canvas { padding: 0; }
.ao-stage__section { display: grid; gap: var(--space-12); margin-block-end: var(--space-32); min-inline-size: 0; }
.ao-stage__section:last-child { margin-block-end: 0; }
.ao-stage__h { margin: 0; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--muted); }
.ao-stage__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); min-inline-size: 0; }
.ao-stage__row--top { align-items: flex-start; }
.ao-stage__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-8) var(--space-24); align-items: start; }
.ao-stage__note { margin: 0; font-size: 12px; line-height: 20px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .ao-control, .ao-input, .ao-check__box, .ao-switch__track, .ao-seg__item, .ao-tab, .ao-table__sorticon, .ao-progress__fill, .ao-chip, .ao-feature { transition: none; }
  .ao-switch__thumb { transition: none; }
  .ao-spinner { animation: ao-pulse 1.6s ease-in-out infinite; }
  .ao-skeleton { animation: none; }
  .ao-progress__track.is-indeterminate .ao-progress__fill { inline-size: 100%; margin: 0; animation: ao-pulse 1.6s ease-in-out infinite; }
}
@media (forced-colors: active) {
  .ao-control, .ao-input, .ao-check__box, .ao-switch__track, .ao-seg, .ao-card, .ao-table-wrap, .ao-popup { border-color: CanvasText; }
  .ao-control:focus-visible, .ao-input:focus-within { outline-color: Highlight; }
  .ao-control:disabled { border-color: GrayText; color: GrayText; }
  .ao-tab[aria-selected="true"]::after, .ao-appbar__link[aria-current="page"]::after, .ao-navlist__item.is-current::before { background: Highlight; }
  /* category marks lose their paint: keep the square shape as an outline; the label still names the category */
  .ao-swatch, .ao-splitbar__swatch, .ao-eyebrow__mark { border: 1px solid CanvasText; }
  .ao-chip, .ao-feature, .ao-tooltile, .ao-avatar { border: 1px solid CanvasText; }
  .ao-chip.is-selected { border-color: Highlight; outline: 1px solid Highlight; }
  .ao-chip.is-selected .ao-chip__mark { color: Highlight; }
  .ao-splitbar__seg { background: CanvasText; }
  .ao-band { border-block: 1px solid CanvasText; }
  .ao-chip--toggle:focus-visible, .ao-feature--link:focus-visible, .ao-brandmark-link:focus-visible, .ao-band__link:focus-visible { outline-color: Highlight; }
  /* a focused selected chip gets the full 2px ring, never the 1px selection outline */
  .ao-chip--toggle.is-selected:focus-visible, .ao-chip--toggle.is-selected[data-ao-state~="focus"] { outline: var(--focus-width) solid Highlight; outline-offset: var(--focus-offset); }
  /* the wordmark follows the user's palette (the one exception to "always brand"): its authored ink would fall below
     3:1 on a forced Canvas. !important beats BrandMark's inline colour, here only. */
  .ao-brandmark, .ao-brandmark-link { color: CanvasText !important; }
  /* Progress keeps a visible track and fill when every ground is forced to Canvas */
  .ao-progress__track { border: 1px solid CanvasText; }
  .ao-progress__fill { background: CanvasText; }
}