/* ADRICAL system.css v0.1.0
   Components only. Every value is a semantic or component token from tokens.css.
   Layout keywords (0, auto, 100%, 1fr, none) are not values. Logical properties only: start = right in Hebrew.
   Load order: tokens.css, then system.css. Icons: <svg class="aq-icon"><use href="/lib/icons.svg#name"/></svg> */

/* ───────────── 1. Base ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-block-size: 100svh;
  font-family: var(--font-text); font-size: var(--font-size-body); line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular); color: var(--color-text);
  background-color: var(--color-surface-page); background-image: var(--grid-image); background-size: var(--grid-size, var(--space-6)) var(--grid-size, var(--space-6));
  font-variant-numeric: tabular-nums lining-nums;
}
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(img, svg, video) { display: block; max-inline-size: 100%; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: var(--color-text-link); text-underline-offset: 0.2em; }
:where(a:hover) { color: var(--color-action-hover); }
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-halo);
}
::placeholder { color: var(--color-text-muted); opacity: 1; }
::selection { background: var(--color-action-subtle); color: var(--color-action-subtle-text); }

/* ───────────── 2. Utilities ───────────── */
.aq-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aq-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.aq-icon { inline-size: var(--icon-size-m); block-size: var(--icon-size-m); flex: none; stroke-width: var(--icon-stroke); }
.aq-icon--s { inline-size: var(--icon-size-s); block-size: var(--icon-size-s); }
.aq-icon--l { inline-size: var(--icon-size-l); block-size: var(--icon-size-l); }
.aq-icon--xl { inline-size: var(--space-8); block-size: var(--space-8); }
.aq-icon--xxl { inline-size: var(--space-12); block-size: var(--space-12); }
.aq-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.aq-stack--s { gap: var(--space-2); } .aq-stack--l { gap: var(--space-8); }
.aq-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.aq-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

/* ───────────── 3. Type ───────────── */
.aq-display { font-size: var(--font-size-display); line-height: var(--line-height-tight); font-weight: var(--font-weight-heavy); text-wrap: balance; }
.aq-h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); text-wrap: balance; }
.aq-h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); font-weight: var(--font-weight-bold); }
.aq-h3 { font-size: var(--font-size-h3); line-height: var(--line-height-heading); font-weight: var(--font-weight-medium); }
.aq-body-l { font-size: var(--font-size-body-l); }
.aq-small { font-size: var(--font-size-small); line-height: var(--line-height-snug); }
.aq-caption { font-size: var(--font-size-caption); line-height: var(--line-height-snug); font-weight: var(--font-weight-medium); }
.aq-muted { color: var(--color-text-muted); }
.aq-quote { font-family: var(--font-quote); font-size: var(--font-size-body-l); line-height: var(--line-height-body); padding-inline-start: var(--space-4); border-inline-start: var(--border-width-ui) solid var(--color-source-official-border); }
.aq-rule-double { block-size: var(--space-1); border-block: var(--border-width-ui) solid var(--color-text); }

/* Regulation text: numbered clauses with the number in the margin (borrowed from direction B) */
.aq-prose { max-inline-size: var(--reading-width); font-size: var(--font-size-body-l); line-height: var(--line-height-body); }
.aq-prose > * + * { margin-block-start: var(--space-4); }
.aq-clause { display: grid; grid-template-columns: var(--margin-number-width) minmax(0, 1fr); column-gap: var(--space-3); }
.aq-clause__num { direction: ltr; unicode-bidi: isolate; text-align: end; color: var(--color-margin-number); font-weight: var(--font-weight-medium); font-size: var(--font-size-small); padding-block-start: var(--space-1); }
.aq-clause__text { font-family: var(--font-quote); }
.aq-clause--sub { padding-inline-start: var(--space-6); }

/* ───────────── 4. Skip link ───────────── */
.aq-skip { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: var(--z-skip); padding: var(--space-3) var(--space-5); background: var(--color-surface-inverse); color: var(--color-text-inverse); border-radius: var(--radius-m); font-weight: var(--font-weight-bold); transform: translateY(-200%); }
.aq-skip:focus-visible { transform: none; }

/* ───────────── 5. Shell (UX 1a: rail that expands in place + ⌘K; UX 7a on phone) ───────────── */
.aq-shell { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-block-size: 100svh; }
.aq-rail { position: sticky; inset-block-start: 0; block-size: 100svh; overflow-y: auto; z-index: var(--z-rail); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-3); background: var(--color-rail-bg); color: var(--color-rail-text); border-inline-end: var(--border-width-ui) solid var(--color-border); }
.aq-rail__brand { padding: var(--space-1) var(--space-3) var(--space-2); }
.aq-rail__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.aq-rail__group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-block-size: var(--button-height-s); padding-inline: var(--space-3); border-radius: var(--radius-m); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-rail-muted); cursor: pointer; }
.aq-rail__group > summary::-webkit-details-marker { display: none; }
.aq-rail__group > summary .aq-icon { transition: transform var(--duration-base) var(--easing-out); }
.aq-rail__group[open] > summary .aq-icon { transform: rotate(180deg); }
.aq-rail__link { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--button-height-s); padding-inline: var(--space-3); border-radius: var(--radius-m); color: var(--color-rail-text); text-decoration: none; font-size: var(--font-size-small); border-inline-start: var(--focus-width) solid transparent; }
.aq-rail__link:hover { background: var(--color-rail-active-bg); color: var(--color-rail-text); }
.aq-rail__link[aria-current="page"] { background: var(--color-rail-active-bg); color: var(--color-rail-active-text); font-weight: var(--font-weight-bold); border-inline-start-color: var(--color-action); }
.aq-rail__foot { margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-main { min-inline-size: 0; padding: var(--space-8) var(--space-10) var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); }
.aq-container { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; }
.aq-page-header { display: flex; flex-direction: column; gap: var(--space-3); }
.aq-page-header__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.aq-page-header__title { flex: 1 1 20rem; min-inline-size: 0; }
.aq-appbar, .aq-tabbar { display: none; }
@media (max-width: 899.98px) {
  .aq-shell { grid-template-columns: minmax(0, 1fr); padding-block-end: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); }
  .aq-rail { display: none; }
  .aq-main { padding: var(--space-5) var(--space-4) var(--space-6); gap: var(--space-6); }
  .aq-appbar { display: flex; position: sticky; inset-block-start: 0; z-index: var(--z-sticky); align-items: center; gap: var(--space-2); min-block-size: var(--appbar-height); padding-block-start: env(safe-area-inset-top); padding-inline: var(--space-4) var(--space-2); background: var(--color-rail-bg); color: var(--color-rail-text); border-block-end: var(--border-width-ui) solid var(--color-border); }
  .aq-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom)); background: var(--color-rail-bg); border-block-start: var(--border-width-ui) solid var(--color-border); }
}
.aq-appbar__spacer { flex: 1; }
.aq-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-block-size: var(--tabbar-height); border-radius: var(--radius-m); color: var(--color-rail-text); text-decoration: none; font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.aq-tabbar__item[aria-current="page"] { background: var(--color-rail-active-bg); color: var(--color-rail-active-text); font-weight: var(--font-weight-bold); }

/* Section bar on phone (UX 4 / 7a): the current section, opens the index sheet */
.aq-sectionbar { position: sticky; inset-block-end: calc(var(--tabbar-height) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); inline-size: 100%; min-block-size: var(--button-height-m); padding-inline: var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--radius-m); font-weight: var(--font-weight-bold); cursor: pointer; }

/* ───────────── 6. Search + command palette ───────────── */
.aq-search { display: flex; align-items: center; gap: var(--space-3); inline-size: 100%; min-block-size: var(--input-height); padding-inline: var(--input-padding-inline); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--input-radius); color: var(--color-text-muted); cursor: text; text-align: start; }
.aq-search--hero { min-block-size: var(--button-height-l); font-size: var(--font-size-body-l); }
.aq-search__input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: none; color: var(--color-text); }
.aq-kbd { direction: ltr; unicode-bidi: isolate; padding-inline: var(--space-2); border: var(--border-width-ui) solid var(--color-border-strong); border-radius: var(--radius-s); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.aq-cmdk { inline-size: min(100% - var(--space-8), var(--modal-width)); margin-block-start: 12svh; padding: 0; border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--elevation-3); }
.aq-cmdk::backdrop { background: var(--color-scrim); }
.aq-cmdk__field { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-block-end: var(--border-width-ui) solid var(--color-border); }
.aq-cmdk__list { max-block-size: 50svh; overflow-y: auto; padding: var(--space-2); }
.aq-cmdk__group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }

/* ───────────── 7. Buttons ───────────── */
.aq-btn { --_bg: var(--color-surface-card); --_fg: var(--color-text); --_bd: var(--color-border-input);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--button-height-m); padding-inline: var(--button-padding-inline);
  background: var(--_bg); color: var(--_fg); border: var(--border-width-ui) solid var(--_bd); border-radius: var(--button-radius);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-small); line-height: var(--line-height-tight); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); }
.aq-btn:hover { --_bg: var(--color-action-subtle); --_fg: var(--color-action-subtle-text); }
.aq-btn:active { --_bd: var(--color-text); }
.aq-btn--primary { --_bg: var(--color-action); --_fg: var(--color-text-on-action); --_bd: var(--color-action); }
.aq-btn--primary:hover { --_bg: var(--color-action-hover); --_fg: var(--color-text-on-action); --_bd: var(--color-action-hover); }
.aq-btn--primary:active { --_bg: var(--color-action-active); --_bd: var(--color-action-active); }
.aq-btn--ghost { --_bg: transparent; --_bd: transparent; }
.aq-btn--link { --_bg: transparent; --_bd: transparent; --_fg: var(--color-text-link); padding-inline: var(--space-2); text-decoration: underline; text-underline-offset: 0.2em; }
.aq-btn--link:hover { --_bg: transparent; --_fg: var(--color-action-hover); }
.aq-btn--danger { --_bg: var(--color-danger); --_fg: var(--color-text-on-action); --_bd: var(--color-danger); }
.aq-btn--danger:hover { --_bg: var(--color-danger-hover); --_fg: var(--color-text-on-action); --_bd: var(--color-danger-hover); }
.aq-btn--s { min-block-size: var(--button-height-s); padding-inline: var(--space-4); }
.aq-btn--l { min-block-size: var(--button-height-l); padding-inline: var(--space-6); font-size: var(--font-size-body); }
.aq-btn--icon { padding-inline: 0; inline-size: var(--button-height-m); }
.aq-btn--icon.aq-btn--s { inline-size: var(--button-height-s); }
.aq-btn--block { display: flex; inline-size: 100%; }
.aq-btn:disabled, .aq-btn[aria-disabled="true"] { --_bg: var(--color-surface-sunk); --_fg: var(--color-text-muted); --_bd: var(--color-border); cursor: not-allowed; }
.aq-btn[aria-busy="true"] { cursor: progress; }
.aq-btn[aria-busy="true"]::before { content: ""; inline-size: var(--icon-size-s); block-size: var(--icon-size-s); border: var(--border-width-ui) solid currentColor; border-block-start-color: transparent; border-radius: var(--radius-pill); animation: aq-spin calc(var(--duration-slow) * 3) linear infinite; }
.aq-btn-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aq-btn-group--attached { gap: 0; flex-wrap: nowrap; }
.aq-btn-group--attached > .aq-btn { border-radius: 0; }
.aq-btn-group--attached > .aq-btn:first-child { border-start-start-radius: var(--button-radius); border-end-start-radius: var(--button-radius); }
.aq-btn-group--attached > .aq-btn:last-child { border-start-end-radius: var(--button-radius); border-end-end-radius: var(--button-radius); }
.aq-btn-group--attached > .aq-btn + .aq-btn { margin-inline-start: calc(-1 * var(--border-width-ui)); }
.aq-copy[data-copied="true"] { --_fg: var(--color-compliant); }
@keyframes aq-spin { to { transform: rotate(360deg); } }

/* ───────────── 8. Links ───────────── */
.aq-link { color: var(--color-text-link); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 0.2em; }
.aq-link:hover { color: var(--color-action-hover); text-decoration-thickness: 0.12em; }
.aq-link--quiet { text-decoration: none; } .aq-link--quiet:hover { text-decoration: underline; }
.aq-link .aq-icon { display: inline-block; vertical-align: -0.15em; margin-inline-start: var(--space-1); }

/* ───────────── 9. Forms ───────────── */
.aq-field { display: flex; flex-direction: column; gap: var(--space-2); }
.aq-field__label { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.aq-field__optional { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.aq-field__hint { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.aq-field__error { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--color-error); }
.aq-input, .aq-select, .aq-textarea {
  inline-size: 100%; min-block-size: var(--input-height); padding-inline: var(--input-padding-inline);
  background: var(--color-surface-card); color: var(--color-text); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--input-radius);
  transition: border-color var(--duration-fast) var(--easing-out); }
.aq-input:hover, .aq-select:hover, .aq-textarea:hover { border-color: var(--color-text); }
.aq-textarea { padding-block: var(--space-3); min-block-size: calc(var(--input-height) * 2.5); resize: vertical; line-height: var(--line-height-body); }
.aq-select { appearance: none; padding-inline-end: var(--space-10); }
.aq-select-wrap { position: relative; }
.aq-select-wrap > .aq-icon { position: absolute; inset-inline-end: var(--space-4); inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-muted); }
.aq-input[aria-invalid="true"], .aq-select[aria-invalid="true"], .aq-textarea[aria-invalid="true"], .aq-input-group:has([aria-invalid="true"]) { border-color: var(--color-error); box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-error); }
.aq-input:disabled, .aq-select:disabled, .aq-textarea:disabled { background: var(--color-surface-sunk); color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; }
.aq-input[readonly] { background: var(--color-surface-sunk); }
/* number with unit: the unit is a quieter suffix inside the field */
.aq-input-group { display: flex; align-items: center; inline-size: 100%; min-block-size: var(--input-height); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--input-radius); }
.aq-input-group:hover { border-color: var(--color-text); }
.aq-input-group:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-halo); }
.aq-input-group > input { flex: 1; min-inline-size: 0; align-self: stretch; padding-inline: var(--input-padding-inline); border: 0; background: transparent; outline: none; box-shadow: none; }
.aq-input-group > input[inputmode="decimal"], .aq-input-group > input[type="number"] { direction: ltr; text-align: end; font-weight: var(--font-weight-bold); font-size: var(--font-size-body-l); }
.aq-input-group__unit { padding-inline: var(--space-1) var(--input-padding-inline); color: var(--color-value-unit); font-size: var(--font-size-small); white-space: nowrap; }
.aq-input-group__addon { display: flex; align-items: center; padding-inline: var(--space-3); color: var(--color-text-muted); }
.aq-input-group > .aq-btn { border: 0; min-block-size: calc(var(--input-height) - var(--space-2)); margin-inline-end: var(--space-1); }
/* checkbox, radio, toggle */
.aq-check, .aq-radio { display: inline-flex; align-items: flex-start; gap: var(--space-3); min-block-size: var(--button-height-s); padding-block: var(--space-2); cursor: pointer; }
.aq-check > input, .aq-radio > input { appearance: none; flex: none; inline-size: var(--icon-size-l); block-size: var(--icon-size-l); margin: 0; display: grid; place-content: center; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); cursor: pointer; }
.aq-check > input { border-radius: var(--radius-s); }
.aq-radio > input { border-radius: var(--radius-pill); }
.aq-check > input:checked, .aq-radio > input:checked { background: var(--color-action); border-color: var(--color-action); }
.aq-check > input:checked::after { content: ""; inline-size: var(--space-2); block-size: var(--space-3); border: solid var(--color-text-on-action); border-width: 0 0.15em 0.15em 0; /* glyph drawing, not layout */ transform: translateY(-10%) rotate(45deg); }
.aq-radio > input:checked::after { content: ""; inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-pill); background: var(--color-text-on-action); }
.aq-check > input:disabled, .aq-radio > input:disabled { background: var(--color-surface-sunk); border-color: var(--color-border); }
.aq-check > input[aria-invalid="true"] { border-color: var(--color-error); }
.aq-toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-block-size: var(--button-height-s); cursor: pointer; }
.aq-toggle > input { appearance: none; flex: none; margin: 0; inline-size: calc(var(--space-12) - var(--space-1)); block-size: var(--space-6); border-radius: var(--radius-pill); background: var(--color-surface-sunk); border: var(--border-width-ui) solid var(--color-border-input); position: relative; cursor: pointer; transition: background-color var(--duration-base) var(--easing-out); }
.aq-toggle > input::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: var(--space-1); inline-size: var(--space-4); block-size: var(--space-4); border-radius: var(--radius-pill); background: var(--color-text-muted); transform: translateY(-50%); transition: inset-inline-start var(--duration-base) var(--easing-out); }
.aq-toggle > input:checked { background: var(--color-action); border-color: var(--color-action); }
.aq-toggle > input:checked::after { inset-inline-start: calc(100% - var(--space-5)); background: var(--color-text-on-action); }
.aq-toggle__state { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
/* segmented control */
.aq-segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--radius-m); overflow: hidden; background: var(--color-surface-card); }
.aq-segmented > label { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--button-height-s); padding-inline: var(--space-4); font-size: var(--font-size-small); cursor: pointer; }
.aq-segmented > label + label { border-inline-start: var(--border-width-ui) solid var(--color-border); }
.aq-segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.aq-segmented > label:has(input:checked) { background: var(--color-action); color: var(--color-text-on-action); font-weight: var(--font-weight-bold); }
.aq-segmented > label:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: calc(-1 * var(--focus-width)); }
/* selection tile */
.aq-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--radius-l); cursor: pointer; }
.aq-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.aq-tile:hover { border-color: var(--color-text); }
.aq-tile:has(input:checked) { border-color: var(--color-action); box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-action); background: var(--color-action-subtle); }
.aq-tile:has(input:checked) .aq-tile__check { display: flex; }
.aq-tile:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.aq-tile__check { display: none; position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); color: var(--color-action); }
.aq-tile__title { font-weight: var(--font-weight-bold); }
/* stepper */
.aq-stepper { display: inline-flex; align-items: center; border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--input-radius); background: var(--color-surface-card); }
.aq-stepper > button { display: grid; place-content: center; inline-size: var(--button-height-m); block-size: var(--input-height); border: 0; background: transparent; cursor: pointer; }
.aq-stepper > button:hover { background: var(--color-action-subtle); }
.aq-stepper > input { inline-size: var(--space-16); min-block-size: var(--input-height); border: 0; border-inline: var(--border-width-ui) solid var(--color-border); text-align: center; direction: ltr; font-weight: var(--font-weight-bold); background: transparent; }
/* upload with drop zone and progress */
.aq-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; background: var(--color-surface-card); border: var(--border-width-ui) dashed var(--color-border-input); border-radius: var(--radius-l); cursor: pointer; transition: background-color var(--duration-fast) var(--easing-out); }
.aq-upload:hover, .aq-upload[data-dragover="true"] { background: var(--color-action-subtle); border-color: var(--color-action); border-style: solid; }
.aq-upload:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.aq-upload > input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.aq-upload__title { font-weight: var(--font-weight-bold); }
.aq-upload[aria-invalid="true"] { border-color: var(--color-error); border-style: solid; }
.aq-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); }
.aq-file__name { direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; font-weight: var(--font-weight-medium); }
.aq-file .aq-progress { grid-column: 1 / -1; }
/* password and one-time code */
.aq-password > input { direction: ltr; text-align: end; }
.aq-otp { display: flex; gap: var(--space-2); direction: ltr; }
.aq-otp > input { inline-size: var(--button-height-m); min-block-size: var(--button-height-l); padding: 0; text-align: center; font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--input-radius); }
/* combobox */
.aq-combobox { position: relative; }
.aq-listbox { position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--space-1)); z-index: var(--z-overlay); max-block-size: 20rem; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; background: var(--color-surface-raised); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--elevation-2); }
.aq-listbox[hidden] { display: none; }
.aq-option { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--button-height-s); padding-inline: var(--space-3); border-radius: var(--radius-s); cursor: pointer; }
.aq-option[aria-selected="true"], .aq-option:hover { background: var(--color-action-subtle); color: var(--color-action-subtle-text); }
.aq-option mark { background: transparent; color: inherit; font-weight: var(--font-weight-bold); }
.aq-listbox__empty { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }

/* ───────────── 10. Navigation ───────────── */
.aq-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: 0; margin: 0; list-style: none; font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-breadcrumbs li { display: flex; align-items: center; gap: var(--space-1); }
.aq-breadcrumbs li + li::before { content: "‹"; color: var(--color-text-muted); padding-inline-end: var(--space-1); }
.aq-breadcrumbs a { color: var(--color-text-link); }
/* section index: sticky side list on desktop (UX 4a) */
.aq-index { position: sticky; inset-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.aq-index__title { padding-inline: var(--space-3); padding-block-end: var(--space-2); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.aq-index a { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--button-height-s); padding-inline: var(--space-3); border-inline-start: var(--focus-width) solid transparent; border-start-end-radius: var(--radius-s); border-end-end-radius: var(--radius-s); color: var(--color-text); text-decoration: none; font-size: var(--font-size-small); }
.aq-index a:hover { background: var(--color-action-subtle); }
.aq-index a[aria-current="true"], .aq-index a[aria-current="location"] { border-inline-start-color: var(--color-action); background: var(--color-action-subtle); color: var(--color-action-subtle-text); font-weight: var(--font-weight-bold); }
.aq-index__n { direction: ltr; min-inline-size: var(--space-5); color: var(--color-text-muted); }
.aq-index__flag { margin-inline-start: auto; }
/* tabs (≤ 5; more than that is a section index) */
.aq-tabs { display: flex; gap: var(--space-1); border-block-end: var(--border-width-ui) solid var(--color-border); overflow-x: auto; scrollbar-width: none; }
.aq-tabs [role="tab"] { min-block-size: var(--button-height-s); padding-inline: var(--space-4); border: 0; border-block-end: var(--focus-width) solid transparent; background: transparent; color: var(--color-text-muted); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.aq-tabs [role="tab"]:hover { color: var(--color-text); }
.aq-tabs [role="tab"][aria-selected="true"] { color: var(--color-text); font-weight: var(--font-weight-bold); border-block-end-color: var(--color-action); }
.aq-tabpanel { padding-block-start: var(--space-5); }
.aq-tabpanel[hidden] { display: none; }
.aq-pagination { display: flex; align-items: center; gap: var(--space-1); }
.aq-pagination a, .aq-pagination span { display: grid; place-content: center; min-inline-size: var(--button-height-s); min-block-size: var(--button-height-s); padding-inline: var(--space-2); border-radius: var(--radius-m); text-decoration: none; color: var(--color-text); }
.aq-pagination a:hover { background: var(--color-action-subtle); }
.aq-pagination [aria-current="page"] { background: var(--color-action); color: var(--color-text-on-action); font-weight: var(--font-weight-bold); }
.aq-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-block-start: auto; padding-block-start: var(--space-4); border-block-start: var(--border-width-ui) solid var(--color-border); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.aq-footer a { display: inline-flex; align-items: center; min-block-size: var(--button-height-s); color: var(--color-text-muted); }
.aq-disclaimer { max-inline-size: var(--reading-width); font-size: var(--font-size-caption); color: var(--color-text-muted); }

/* ───────────── 11. Feedback and overlays ───────────── */
.aq-alert { --_c: var(--color-info); --_bg: var(--color-info-bg);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-4); background: var(--_bg); color: var(--color-text); border: var(--border-width-ui) solid var(--_c); border-radius: var(--radius-m); }
.aq-alert > .aq-icon { color: var(--_c); }
.aq-alert__title { font-weight: var(--font-weight-bold); }
.aq-alert--success { --_c: var(--color-success); --_bg: var(--color-success-bg); }
.aq-alert--warning { --_c: var(--color-warning); --_bg: var(--color-warning-bg); }
.aq-alert--error { --_c: var(--color-error); --_bg: var(--color-error-bg); }
/* "Verify before submission": fixed place = last element of every source block, result and analysis */
.aq-verify { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--color-surface-sunk); color: var(--color-text); font-size: var(--font-size-small); border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-verify > .aq-icon { color: var(--color-needs-check); margin-block-start: var(--space-1); }
.aq-verify__link { margin-inline-start: auto; white-space: nowrap; }
.aq-verify--standalone { border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); }
.aq-toaster { position: fixed; inset-block-end: calc(var(--space-6) + env(safe-area-inset-bottom)); inset-inline-end: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); inline-size: min(100% - var(--space-8), var(--toast-width)); }
@media (max-width: 899.98px) { .aq-toaster { inset-inline: var(--space-4); inset-block-end: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom)); inline-size: auto; } }
.aq-toast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding-block: var(--space-3); padding-inline: var(--space-4) var(--space-3); background: var(--color-surface-inverse); color: var(--color-text-inverse); border-radius: var(--radius-m); box-shadow: var(--elevation-3); animation: aq-rise var(--duration-base) var(--easing-out); }
.aq-toast .aq-btn { --_fg: var(--color-text-inverse); --_bg: transparent; --_bd: transparent; }
.aq-modal { inline-size: min(100% - var(--space-8), var(--modal-width)); max-block-size: calc(100dvh - var(--space-16)); padding: 0; border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--elevation-3); }
.aq-modal::backdrop, .aq-sheet::backdrop, .aq-drawer::backdrop { background: var(--color-scrim); }
.aq-modal[open] { animation: aq-rise var(--duration-base) var(--easing-out); }
.aq-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-3); }
.aq-modal__body { padding: 0 var(--space-6) var(--space-5); overflow-y: auto; }
.aq-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-sheet { inline-size: 100%; max-inline-size: 100%; max-block-size: 85dvh; margin: auto 0 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-start-start-radius: var(--sheet-radius); border-start-end-radius: var(--sheet-radius); background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--elevation-3); }
.aq-sheet[open] { animation: aq-up var(--duration-slow) var(--easing-out); }
.aq-sheet__grip { inline-size: var(--space-10); block-size: var(--space-1); margin: var(--space-2) auto; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.aq-drawer { --_from: -1; margin: 0; margin-inline-start: auto; inline-size: min(100%, 28rem); max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; padding: 0; border: 0; border-inline-start: var(--border-width-ui) solid var(--color-border); background: var(--color-surface-raised); color: var(--color-text); }
.aq-drawer:dir(ltr) { --_from: 1; }
.aq-drawer[open] { animation: aq-in-start var(--duration-slow) var(--easing-out); }
.aq-tooltip { position: absolute; z-index: var(--z-overlay); max-inline-size: var(--tooltip-max-width); padding: var(--space-2) var(--space-3); background: var(--color-surface-inverse); color: var(--color-text-inverse); border-radius: var(--radius-s); font-size: var(--font-size-small); pointer-events: none; }
.aq-tooltip[hidden], .aq-popover[hidden] { display: none; }
.aq-popover { position: absolute; z-index: var(--z-overlay); inline-size: max-content; max-inline-size: min(22rem, 90vw); padding: var(--space-4); background: var(--color-surface-raised); color: var(--color-text); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--elevation-2); }
.aq-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); min-block-size: var(--space-6); border-radius: var(--radius-pill); background: var(--color-surface-sunk); color: var(--color-text); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); white-space: nowrap; }
.aq-badge--sample { background: transparent; border: var(--border-width-ui) dashed var(--color-text-muted); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.aq-badge--ai { background: var(--color-ai-generated-bg); color: var(--color-ai-generated); }
.aq-badge--changed { background: var(--color-changed-bg); color: var(--color-changed); }
.aq-badge--official { background: var(--color-source-official-bg); color: var(--color-source-official); box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-source-official-border); }
.aq-counter { display: inline-grid; place-content: center; min-inline-size: var(--space-6); block-size: var(--space-6); padding-inline: var(--space-1); border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-text-on-action); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); direction: ltr; }
.aq-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--button-height-s); padding-inline: var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--font-size-small); text-decoration: none; cursor: pointer; }
.aq-chip:hover { border-color: var(--color-text); }
.aq-chip[aria-pressed="true"] { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-on-action); font-weight: var(--font-weight-bold); }
.aq-chip__remove { display: grid; place-content: center; margin-inline-end: calc(-1 * var(--space-2)); inline-size: var(--space-8); block-size: var(--space-8); border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; }
.aq-tag { display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-s); background: var(--color-qualifier-bg); color: var(--color-qualifier); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); white-space: nowrap; }
.aq-progress { --progress-value: 0%; inline-size: 100%; block-size: var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-sunk); overflow: hidden; box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-border); }
.aq-progress__bar { block-size: 100%; inline-size: var(--progress-value); background: var(--color-action); transition: inline-size var(--duration-base) var(--easing-out); }
.aq-progress--indeterminate .aq-progress__bar { inline-size: 40%; animation: aq-indet calc(var(--duration-slow) * 4) var(--easing-in-out) infinite; }
.aq-skeleton { display: block; block-size: 1em; border-radius: var(--radius-s); background: var(--color-surface-sunk); animation: aq-pulse calc(var(--duration-slow) * 5) var(--easing-in-out) infinite; }
.aq-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; }
.aq-empty__art { color: var(--color-action); }
.aq-empty__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); }
.aq-empty__text { max-inline-size: 32rem; color: var(--color-text-muted); }
.aq-offline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-inverse); color: var(--color-text-inverse); font-size: var(--font-size-small); }
.aq-offline[hidden] { display: none; }
.aq-consent { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface-raised); border: var(--border-width-ui) solid var(--color-border-strong); border-radius: var(--radius-l); box-shadow: var(--elevation-3); }
.aq-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@keyframes aq-rise { from { opacity: 0; transform: translateY(var(--space-2)); } }
@keyframes aq-up { from { transform: translateY(100%); } }
@keyframes aq-in-start { from { transform: translateX(calc(var(--_from) * 100%)); } }
@keyframes aq-indet { from { margin-inline-start: -40%; } to { margin-inline-start: 100%; } }
@keyframes aq-pulse { 50% { opacity: 0.5; } }

/* ───────────── 12. Data and content ───────────── */
.aq-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-padding); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); color: var(--color-text); }
.aq-card--link { text-decoration: none; transition: border-color var(--duration-fast) var(--easing-out); }
.aq-card--link:hover { border-color: var(--color-border-input); color: var(--color-text); }
.aq-card--raised { box-shadow: var(--elevation-2); }
.aq-card__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); }
.aq-card__meta { font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-card__foot { display: flex; align-items: center; gap: var(--space-2); margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: var(--border-width-ui) solid var(--color-border); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
.aq-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; }
.aq-list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-block-size: var(--row-min-height); padding: var(--row-padding-block) var(--row-padding-inline); border-block-end: var(--border-width-ui) solid var(--color-border); color: var(--color-text); text-decoration: none; }
.aq-list-row:last-child { border-block-end: 0; }
a.aq-list-row:hover { background: var(--color-action-subtle); color: var(--color-text); }
.aq-table-wrap { overflow-x: auto; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-table { inline-size: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
.aq-table th { padding: var(--space-3) var(--space-4); text-align: start; font-weight: var(--font-weight-bold); background: var(--color-surface-sunk); border-block-end: var(--border-width-ui) solid var(--color-border-strong); }
.aq-table td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: var(--border-width-ui) solid var(--color-border); vertical-align: top; }
.aq-table td.aq-num, .aq-table th.aq-num { text-align: end; white-space: nowrap; }
.aq-table tbody tr:hover { background: var(--color-action-subtle); }
@media (max-width: 599.98px) {
  .aq-table--stack thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .aq-table--stack tr { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-block-end: var(--border-width-ui) solid var(--color-border); }
  .aq-table--stack td { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0; border: 0; }
  .aq-table--stack td::before { content: attr(data-label); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
}
.aq-kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); }
.aq-kpi__label { font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-kpi__source { font-size: var(--font-size-caption); }
.aq-kpi-strip { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.aq-accordion { border-block: var(--border-width-ui) solid var(--color-border); }
.aq-accordion + .aq-accordion { border-block-start: 0; }
.aq-accordion > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--button-height-m); padding-block: var(--space-3); font-weight: var(--font-weight-bold); cursor: pointer; }
.aq-accordion > summary::-webkit-details-marker { display: none; }
.aq-accordion > summary .aq-icon { transition: transform var(--duration-base) var(--easing-out); }
.aq-accordion[open] > summary .aq-icon { transform: rotate(180deg); }
.aq-accordion__body { padding-block-end: var(--space-4); }
.aq-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aq-timeline__step { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); gap: var(--space-3); }
.aq-timeline__marker { position: relative; display: flex; justify-content: center; }
.aq-timeline__marker::before { content: ""; position: absolute; inset-block: var(--space-6) 0; inline-size: var(--border-width-ui); background: var(--color-border-strong); }
.aq-timeline__step:last-child .aq-timeline__marker::before { display: none; }
.aq-timeline__dot { position: relative; display: grid; place-content: center; inline-size: var(--space-6); block-size: var(--space-6); border-radius: var(--radius-pill); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); color: var(--color-text-muted); }
.aq-timeline__step[data-state="done"] .aq-timeline__dot { background: var(--color-compliant); border-color: var(--color-compliant); color: var(--color-text-on-action); }
.aq-timeline__step[data-state="current"] .aq-timeline__dot { background: var(--color-action); border-color: var(--color-action); color: var(--color-text-on-action); }
.aq-timeline__body { padding-block-end: var(--space-6); }
.aq-divider { border: 0; block-size: var(--border-width-ui); background: var(--color-border); margin-block: var(--space-6); }
.aq-avatar { display: inline-grid; place-content: center; inline-size: var(--button-height-s); block-size: var(--button-height-s); border-radius: var(--radius-pill); background: var(--color-action-subtle); color: var(--color-action-subtle-text); font-weight: var(--font-weight-bold); font-size: var(--font-size-small); }

/* ───────────── 13. Domain components ───────────── */
/* Value + unit: one component, one spoken label (aria-label on the wrapper) */
.aq-value { display: inline-flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; }
.aq-value__num { direction: ltr; unicode-bidi: isolate; font-weight: var(--value-weight); color: var(--color-value); font-variant-numeric: tabular-nums lining-nums; }
.aq-value__unit { color: var(--color-value-unit); font-size: var(--font-size-small); font-weight: var(--font-weight-regular); }
.aq-value__q { margin-inline-start: var(--space-1); }
.aq-value--row .aq-value__num { font-size: var(--value-size-row); }
.aq-value--kpi .aq-value__num { font-size: var(--value-size-kpi); line-height: var(--line-height-tight); }
.aq-value--hero .aq-value__num { font-size: var(--value-size-hero); line-height: 1; }
.aq-value--hero .aq-value__unit { font-size: var(--font-size-h3); }
/* Compliance status: always icon + word */
.aq-status { --_c: var(--color-text); --_bg: var(--color-surface-sunk); display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--space-8); padding-inline: var(--space-3); border-radius: var(--radius-pill); background: var(--_bg); color: var(--_c); box-shadow: inset 0 0 0 var(--border-width-ui) var(--_c); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.aq-status--compliant { --_c: var(--color-compliant); --_bg: var(--color-compliant-bg); }
.aq-status--non-compliant { --_c: var(--color-non-compliant); --_bg: var(--color-non-compliant-bg); }
.aq-status--needs-check { --_c: var(--color-needs-check); --_bg: var(--color-needs-check-bg); }
/* Source block: the product's most important component */
.aq-source { background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-source-official-border); border-radius: var(--card-radius); overflow: hidden; }
.aq-source__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); border-block-end: var(--border-width-ui) solid var(--color-border); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-text-muted); }
.aq-source__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.aq-source__item + .aq-source__item { border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-source__item--official { background: var(--color-source-official-bg); }
.aq-source__item--official > .aq-icon { color: var(--color-source-official); }
.aq-source__item--secondary > .aq-icon { color: var(--color-source-secondary); }
.aq-source__kind { font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-source-secondary); }
.aq-source__item--official .aq-source__kind { color: var(--color-source-official); }
.aq-source__title { font-weight: var(--font-weight-bold); }
.aq-source__meta { font-size: var(--font-size-small); color: var(--color-text-muted); }
@media (max-width: 599.98px) { .aq-source__item { grid-template-columns: auto minmax(0, 1fr); } .aq-source__item > .aq-btn { grid-column: 1 / -1; } }
/* Requirement row: label · source line · value · unit · qualifier · changed flag */
.aq-req { display: grid; grid-template-columns: var(--margin-number-width) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); min-block-size: var(--row-min-height); padding-block: var(--row-padding-block); padding-inline: var(--space-2) var(--row-padding-inline); border-block-end: var(--border-width-ui) solid var(--color-border); color: var(--color-text); text-decoration: none; }
.aq-req:last-child { border-block-end: 0; }
.aq-req[aria-current="true"], .aq-req[aria-expanded="true"] { background: var(--color-action-subtle); }
a.aq-req:hover, button.aq-req:hover { background: var(--color-action-subtle); color: var(--color-text); }
button.aq-req { inline-size: 100%; border-inline: 0; border-block-start: 0; background: transparent; text-align: start; cursor: pointer; }
.aq-req__num { direction: ltr; unicode-bidi: isolate; text-align: end; color: var(--color-margin-number); font-weight: var(--font-weight-medium); font-size: var(--font-size-small); }
.aq-req__body { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.aq-req__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); }
.aq-req__source { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.aq-req--changed .aq-req__num::after { content: "•"; color: var(--color-changed); padding-inline-start: var(--space-1); }
@media (max-width: 599.98px) { .aq-req { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4); } .aq-req__num { display: none; } }
.aq-req-list { margin: 0; padding: 0; list-style: none; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; }
.aq-req-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.aq-clause-panel { position: sticky; inset-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--color-surface-raised); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
@media (max-width: 1199.98px) { .aq-req-split { grid-template-columns: minmax(0, 1fr); } .aq-req-split > .aq-clause-panel { display: none; } }
/* Calculator (UX 6b: live result beside the inputs) */
.aq-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 899.98px) { .aq-calc { grid-template-columns: minmax(0, 1fr); } .aq-calc__result { order: -1; position: sticky; inset-block-start: calc(var(--appbar-height) + var(--space-2)); z-index: var(--z-sticky); } }
.aq-calc__inputs { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--card-padding); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-calc__result { display: flex; flex-direction: column; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--elevation-2); }
.aq-calc__main { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-6); }
.aq-calc__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-calc__rule { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6); background: var(--color-source-official-bg); border-block-start: var(--border-width-ui) solid var(--color-source-official-border); }
.aq-calc__rule-kind { font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-source-official); }
.aq-calc__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-block-start: var(--border-width-ui) solid var(--color-border); }
/* AI answer with citations (UX 5a footnotes, 5c quote on demand) */
.aq-ai { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-ai__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.aq-ai__answer { font-size: var(--font-size-body-l); line-height: var(--line-height-body); max-inline-size: var(--reading-width); }
.aq-cite { display: inline-grid; place-content: center; min-inline-size: var(--space-6); block-size: var(--space-6); margin-inline: var(--space-1); padding-inline: var(--space-1); vertical-align: 0.3em; border: var(--border-width-ui) solid var(--color-action); border-radius: var(--radius-s); background: var(--color-action-subtle); color: var(--color-action-subtle-text); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); line-height: 1; text-decoration: none; direction: ltr; position: relative; }
.aq-cite::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)); }
.aq-ai__unknown { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--color-needs-check-bg); border-radius: var(--radius-m); font-size: var(--font-size-small); }
.aq-ai__unknown > .aq-icon { color: var(--color-needs-check); }
.aq-ai__sources { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-3) 0 0; list-style: none; border-block-start: var(--border-width-ui) solid var(--color-border); font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-ai__sources li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); }
.aq-ai__sources li:target { background: var(--color-action-subtle); }
.aq-ai__sources q { font-family: var(--font-quote); color: var(--color-text); quotes: "״" "״"; }
.aq-ai[aria-busy="true"] .aq-ai__answer::after { content: "▍"; color: var(--color-ai-generated); animation: aq-pulse var(--duration-slow) steps(2) infinite; }
.aq-ask { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-ask__row { display: flex; gap: var(--space-2); }
.aq-ask__row > .aq-input { flex: 1; }
/* Plan analysis */
.aq-plan-header { display: flex; flex-direction: column; gap: var(--space-3); }
.aq-plan-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-plan-header__meta strong { color: var(--color-text); font-weight: var(--font-weight-bold); }
.aq-report { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1199.98px) { .aq-report { grid-template-columns: minmax(0, 1fr); } .aq-report > .aq-index { display: none; } }
.aq-steps-progress { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.aq-steps-progress li { display: flex; align-items: center; gap: var(--space-3); }
.aq-steps-progress li[data-state="done"] { color: var(--color-text-muted); }
.aq-steps-progress li[data-state="done"] .aq-icon { color: var(--color-compliant); }
.aq-steps-progress li[data-state="current"] { font-weight: var(--font-weight-bold); }
/* Parcel, project, workspace */
.aq-parcel-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--card-padding); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-parcel-card__ids { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--font-size-small); }
.aq-parcel-card__map { grid-column: 1 / -1; aspect-ratio: 16 / 7; border-radius: var(--radius-m); background: repeating-linear-gradient(135deg, var(--color-surface-sunk) 0 var(--space-2), var(--color-surface-card) var(--space-2) var(--space-4)); border: var(--border-width-ui) solid var(--color-border); }
.aq-ws-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block-end: var(--space-4); border-block-end: var(--border-width-ui) solid var(--color-border); }
.aq-ws-header__switch { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--button-height-s); padding-inline: var(--space-3); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--radius-m); background: var(--color-surface-card); font-weight: var(--font-weight-bold); cursor: pointer; }
/* Glossary term + A–ת index */
.aq-term { color: inherit; text-decoration: underline dotted var(--color-text-link); text-decoration-thickness: 0.1em; text-underline-offset: 0.25em; background: none; border: 0; padding: 0; font: inherit; cursor: help; }
.aq-term:hover { color: var(--color-text-link); }
.aq-az { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.aq-az a, .aq-az span { display: grid; place-content: center; inline-size: var(--button-height-s); block-size: var(--button-height-s); border-radius: var(--radius-m); font-weight: var(--font-weight-bold); text-decoration: none; color: var(--color-text); }
.aq-az a:hover { background: var(--color-action-subtle); }
.aq-az span { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.aq-az [aria-current="true"] { background: var(--color-action); color: var(--color-text-on-action); }
/* Update item, software card */
.aq-update { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); }
.aq-update__logo { grid-row: span 3; inline-size: var(--space-12); block-size: var(--space-12); border-radius: var(--radius-m); border: var(--border-width-ui) dashed var(--color-border-strong); display: grid; place-content: center; font-size: var(--font-size-caption); color: var(--color-text-muted); text-align: center; }
.aq-update__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.aq-update__title { font-weight: var(--font-weight-bold); }
.aq-software-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--card-padding); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-software-card__logo { grid-row: span 2; inline-size: var(--space-12); block-size: var(--space-12); border-radius: var(--radius-m); background: var(--color-surface-sunk); display: grid; place-content: center; color: var(--color-text-muted); }

/* ───────────── 14. Account ───────────── */
.aq-auth { display: flex; flex-direction: column; gap: var(--space-5); inline-size: 100%; max-inline-size: 26rem; margin-inline: auto; padding: var(--space-8); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-auth__or { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }
.aq-auth__or::before, .aq-auth__or::after { content: ""; flex: 1; block-size: var(--border-width-ui); background: var(--color-border); }
.aq-account-menu { display: flex; flex-direction: column; min-inline-size: 16rem; padding: var(--space-2); }
.aq-account-menu a, .aq-account-menu button { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--button-height-s); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--color-text); text-decoration: none; text-align: start; cursor: pointer; }
.aq-account-menu a:hover, .aq-account-menu button:hover { background: var(--color-action-subtle); }

/* ───────────── 15. Marketing ───────────── */
.aq-mheader { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) var(--space-12); border-block-end: var(--border-width-ui) solid var(--color-border); }
.aq-mheader__nav { display: flex; gap: var(--space-6); flex: 1; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
.aq-mheader__nav a { color: var(--color-text); text-decoration: none; }
@media (max-width: 899.98px) { .aq-mheader { padding-inline: var(--space-4); gap: var(--space-2); } .aq-mheader__nav { display: none; } }
.aq-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-16) var(--space-12); }
@media (max-width: 899.98px) { .aq-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-4); gap: var(--space-8); } }
.aq-hero__eyebrow { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-source-official); }
.aq-hero__title { font-size: calc(var(--font-size-display) * 1.15); line-height: var(--line-height-tight); font-weight: var(--font-weight-heavy); text-wrap: balance; }
@media (max-width: 899.98px) { .aq-hero__title { font-size: var(--font-size-h1); } }
.aq-hero__lead { font-size: var(--font-size-h3); color: var(--color-text-muted); max-inline-size: 34em; text-wrap: pretty; }
.aq-section { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16) var(--space-12); }
@media (max-width: 899.98px) { .aq-section { padding: var(--space-10) var(--space-4); } }
.aq-section--card { background: var(--color-surface-card); border-block: var(--border-width-ui) solid var(--color-border); }
.aq-props { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-8); }
.aq-props__item { display: flex; flex-direction: column; gap: var(--space-3); }
.aq-props__item > .aq-icon { color: var(--color-action); }
.aq-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: aq-step; }
.aq-howto > li { counter-increment: aq-step; display: flex; flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-4); border-block-start: var(--focus-width) solid var(--color-action); }
.aq-howto > li::before { content: counter(aq-step); font-size: var(--font-size-h2); font-weight: var(--font-weight-heavy); color: var(--color-action); }
.aq-showcase { display: flex; flex-direction: column; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--elevation-2); }
.aq-showcase__caption { padding: var(--space-3) var(--space-5); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-text-muted); border-block-end: var(--border-width-ui) solid var(--color-border); }
.aq-testimonial { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-padding); border-inline-start: var(--focus-width) solid var(--color-accent); }
.aq-testimonial__text { font-family: var(--font-quote); font-size: var(--font-size-h3); line-height: var(--line-height-body); }
.aq-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); }
.aq-pricing__plan { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-padding); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--card-radius); }
.aq-pricing__plan--featured { border-color: var(--color-action); box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-action); }
.aq-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-10) var(--space-12); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.aq-cta .aq-btn--primary { --_bg: var(--color-surface-page); --_fg: var(--color-text); --_bd: var(--color-surface-page); }
.aq-mfooter { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); padding: var(--space-12); background: var(--color-surface-sunk); font-size: var(--font-size-small); }
.aq-mfooter ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aq-mfooter a { display: inline-flex; align-items: center; min-block-size: var(--button-height-s); color: var(--color-text); }
.aq-mfooter__legal { grid-column: 1 / -1; padding-block-start: var(--space-4); border-block-start: var(--border-width-ui) solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-caption); }
@media (max-width: 899.98px) { .aq-mfooter { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-4); gap: var(--space-4); } }

/* ───────────── 16. Logo ───────────── */
.aq-logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.aq-logo__mark { inline-size: var(--space-8); block-size: var(--space-8); flex: none; }
.aq-logo__word { direction: ltr; unicode-bidi: isolate; font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; color: var(--color-text); }
.aq-logo__iq { color: var(--color-source-official); }
.aq-rail .aq-logo, .aq-appbar .aq-logo { --color-logo-primary: var(--color-rail-logo-primary); --color-logo-accent: var(--color-rail-logo-accent); }
.aq-rail .aq-logo__word, .aq-appbar .aq-logo__word { color: var(--color-rail-text); }
.aq-rail .aq-logo__iq, .aq-appbar .aq-logo__iq { color: var(--color-rail-logo-iq); }
.aq-rail .aq-search, .aq-appbar .aq-search { background: transparent; color: var(--color-rail-muted); border-color: var(--color-rail-muted); }
.aq-rail .aq-kbd { color: var(--color-rail-muted); border-color: var(--color-rail-muted); }
.aq-appbar .aq-btn--ghost { --_fg: var(--color-rail-text); }
.aq-logo--l .aq-logo__mark { inline-size: var(--space-16); block-size: var(--space-16); }
.aq-logo--l .aq-logo__word { font-size: var(--font-size-display); }


/* ───────────── 16b. Depth (v0.2) ─────────────
   Light comes from above. Resting surfaces sit on elevation 1 with a lit top edge; results, forms and the source block are raised (2);
   overlays float (3). Inputs and drop zones are inset wells. Controls carry their own shadow and press inward when active. */
body { background-image: var(--surface-light), var(--grid-image); background-size: 100% 28rem, var(--grid-size, var(--space-6)) var(--grid-size, var(--space-6)); background-repeat: no-repeat, repeat; }
.aq-card, .aq-list, .aq-req-list, .aq-table-wrap, .aq-kpi, .aq-update, .aq-software-card, .aq-parcel-card, .aq-pricing__plan, .aq-ask, .aq-calc__inputs, .aq-file, .aq-ws-header__switch { box-shadow: var(--highlight), var(--elevation-1); }
.aq-card--raised, .aq-source, .aq-calc__result, .aq-ai, .aq-auth, .aq-showcase, .aq-clause-panel, .aq-consent, .aq-pricing__plan--featured, .aq-sectionbar { box-shadow: var(--highlight), var(--elevation-2); }
.aq-pricing__plan--featured { box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-action), var(--highlight), var(--elevation-2); }
.aq-card--link, a.aq-list-row, a.aq-req, .aq-chip, .aq-tile { transition: box-shadow var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out), background-color var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out); }
.aq-card--link:hover { box-shadow: var(--highlight), var(--elevation-2); transform: translateY(-2px); }
.aq-card--link:active { box-shadow: var(--highlight), var(--elevation-1); transform: none; }
.aq-modal, .aq-cmdk, .aq-sheet, .aq-drawer, .aq-toast { box-shadow: var(--elevation-3); }
.aq-popover, .aq-listbox, .aq-tooltip { box-shadow: var(--elevation-2); }
.aq-source__item--official { box-shadow: var(--highlight); }
/* wells */
.aq-input, .aq-select, .aq-textarea, .aq-input-group, .aq-stepper, .aq-otp > input, .aq-progress, .aq-segmented, .aq-toggle > input { box-shadow: var(--shadow-inset); }
.aq-search { box-shadow: var(--shadow-inset); }
.aq-rail .aq-search, .aq-appbar .aq-search { box-shadow: none; }
.aq-upload { box-shadow: var(--shadow-inset); background-color: var(--color-surface-sunk); }
.aq-upload:hover, .aq-upload[data-dragover="true"] { box-shadow: var(--shadow-inset), 0 0 0 var(--border-width-ui) var(--color-action); }
.aq-input[aria-invalid="true"], .aq-select[aria-invalid="true"], .aq-textarea[aria-invalid="true"], .aq-input-group:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-error), var(--shadow-inset); }
/* controls */
.aq-btn { box-shadow: var(--highlight), var(--shadow-control); }
.aq-btn--primary, .aq-btn--danger { box-shadow: var(--highlight-strong), var(--shadow-control-strong); }
.aq-btn:active, .aq-btn.is-active { box-shadow: var(--shadow-press); transform: translateY(1px); }
.aq-btn--ghost, .aq-btn--link, .aq-input-group > .aq-btn, .aq-btn:disabled, .aq-btn[aria-disabled="true"] { box-shadow: none; transform: none; }
.aq-chip { box-shadow: var(--highlight), var(--shadow-control); }
.aq-chip[aria-pressed="true"] { box-shadow: var(--highlight-strong), var(--shadow-control-strong); }
.aq-segmented > label:has(input:checked) { box-shadow: var(--highlight-strong), var(--shadow-control-strong); border-radius: var(--radius-s); }
.aq-toggle > input::after { box-shadow: var(--shadow-control-strong); }
.aq-tile:has(input:checked) { box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-action), var(--elevation-1); }
.aq-tile { box-shadow: var(--highlight), var(--elevation-1); }
.aq-tile:hover { box-shadow: var(--highlight), var(--elevation-2); }
.aq-progress__bar { box-shadow: var(--highlight-strong); }
.aq-avatar, .aq-timeline__dot, .aq-counter { box-shadow: var(--shadow-control); }
.aq-rail__link[aria-current="page"], .aq-tabbar__item[aria-current="page"], .aq-index a[aria-current="true"], .aq-index a[aria-current="location"] { box-shadow: var(--highlight-strong), var(--shadow-control); }
/* keep the focus halo above all of the above */
.aq-btn:focus-visible, .aq-chip:focus-visible, .aq-input:focus-visible, .aq-select:focus-visible, .aq-textarea:focus-visible, .aq-otp > input:focus-visible, .aq-search:focus-visible, .aq-card--link:focus-visible, a.aq-req:focus-visible, a.aq-list-row:focus-visible { box-shadow: 0 0 0 var(--focus-offset) var(--color-focus-halo), var(--elevation-1); }
/* shell: the rail casts onto the content (shadow falls toward the inline end) */
.aq-rail { --_side: -1; box-shadow: calc(var(--_side) * var(--border-width-ui)) 0 0 var(--color-border), var(--rail-shadow); clip-path: inset(0 -3rem 0 -3rem); }
.aq-rail:dir(ltr) { --_side: 1; }
.aq-appbar { box-shadow: var(--elevation-2); }
.aq-tabbar { box-shadow: 0 calc(-1 * var(--space-1)) var(--space-5) var(--color-shadow); }
.aq-table th { box-shadow: inset 0 calc(-1 * var(--border-width-ui)) 0 var(--color-border-strong); }
.aq-cta { box-shadow: var(--highlight-strong), var(--elevation-2); }
.aq-mheader { box-shadow: var(--elevation-1); background: var(--color-surface-card); }


/* ───────────── 18. Booking lessons (L = lesson number in docs/Lessons) ───────────── */
/* L4 · objection answered next to the action */
.aq-reassure { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-reassure > .aq-icon { flex: none; margin-block-start: 0.15em; color: var(--color-compliant); }
.aq-reassure--info > .aq-icon { color: var(--color-text-link); }
.aq-reassure-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
/* L3 · real dates only, removed when they pass (data-aq-until="YYYY-MM-DD") */
.aq-badge--date { background: var(--color-surface-sunk); color: var(--color-text); box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-border-strong); }
.aq-badge--deadline { background: var(--color-needs-check-bg); color: var(--color-needs-check); box-shadow: inset 0 0 0 var(--border-width-ui) var(--color-needs-check); }
[data-aq-until][data-expired="true"] { display: none; }
/* L8 · phone: one pill for the whole context, tap a part to change it */
.aq-context { display: flex; align-items: center; gap: var(--space-1); inline-size: 100%; min-block-size: var(--button-height-s); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); overflow-x: auto; scrollbar-width: none; background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--radius-pill); box-shadow: var(--highlight), var(--elevation-1); font-size: var(--font-size-small); }
.aq-context > a, .aq-context > button { display: inline-flex; align-items: center; min-block-size: calc(var(--button-height-s) - var(--space-2)); padding-inline: var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text); font: inherit; font-weight: var(--font-weight-medium); text-decoration: none; white-space: nowrap; cursor: pointer; }
.aq-context > a:hover, .aq-context > button:hover { background: var(--color-action-subtle); }
.aq-context > span { color: var(--color-text-muted); }
/* L8 · the four values an architect checks first, before the list */
.aq-keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 900px) { .aq-keyfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } }
.aq-keyfacts .aq-kpi { padding: var(--space-3); gap: 0; }
/* L8 · a bar that brings you back to an unfinished task */
.aq-continue { position: sticky; inset-block-end: var(--space-4); z-index: var(--z-sticky); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--color-surface-inverse); color: var(--color-text-inverse); border-radius: var(--radius-l); box-shadow: var(--elevation-3); }
@media (max-width: 899.98px) { .aq-continue { inset-block-end: calc(var(--tabbar-height) + var(--space-3) + env(safe-area-inset-bottom)); } }
.aq-continue .aq-progress { background: rgba(255,255,255,.18); box-shadow: none; }
.aq-continue .aq-btn--primary { --_bg: var(--color-surface-page); --_fg: var(--color-text); --_bd: var(--color-surface-page); }
/* L7 · form progress with the first step already done */
.aq-form-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: aq-fs; font-size: var(--font-size-caption); }
.aq-form-steps > li { counter-increment: aq-fs; display: flex; flex-direction: column; gap: var(--space-1); padding-block-start: var(--space-2); border-block-start: var(--focus-width) solid var(--color-border); color: var(--color-text-muted); }
.aq-form-steps > li[data-state="done"] { border-color: var(--color-compliant); color: var(--color-text); }
.aq-form-steps > li[data-state="current"] { border-color: var(--color-action); color: var(--color-text); font-weight: var(--font-weight-bold); }
.aq-form-steps > li > span::before { content: counter(aq-fs) " · "; }
.aq-form-steps > li[data-state="done"] > span::before { content: "✓ "; color: var(--color-compliant); }
/* pattern · "architects ask": 3–4 questions answered in one line with the source */
.aq-asks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aq-asks > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-block-end: var(--border-width-ui) solid var(--color-border); }
.aq-asks > li > .aq-icon { grid-row: span 3; color: var(--color-text-link); margin-block-start: 0.15em; }
.aq-asks__q { font-weight: var(--font-weight-bold); }
.aq-asks__src { font-size: var(--font-size-caption); color: var(--color-text-muted); }
/* pattern · restate what was used (selection summary after a calculation or upload) */
.aq-restate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-5); background: var(--color-surface-sunk); border-block-start: var(--border-width-ui) solid var(--color-border); font-size: var(--font-size-small); }
.aq-restate dt { color: var(--color-text-muted); }
.aq-restate dd { margin: 0; font-weight: var(--font-weight-bold); }
.aq-restate dl { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; }
.aq-restate dl > div { display: flex; gap: var(--space-1); }
/* pattern · four trust tiles under the landing hero (claims to be confirmed) */
.aq-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3); }
.aq-trust > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-m); box-shadow: var(--highlight), var(--elevation-1); }
.aq-trust > div > .aq-icon { grid-row: span 2; color: var(--color-text-link); }
.aq-trust strong { font-size: var(--font-size-small); }
.aq-trust span { font-size: var(--font-size-caption); color: var(--color-text-muted); }
/* L6 · social proof ladder: zero, one and many states, never an invented number */
.aq-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border: var(--border-width-ui) dashed var(--color-border-strong); border-radius: var(--radius-m); font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-proof[data-level="one"], .aq-proof[data-level="many"] { border-style: solid; background: var(--color-surface-card); color: var(--color-text); box-shadow: var(--highlight), var(--elevation-1); }
.aq-proof__count { font-size: var(--font-size-h2); font-weight: var(--font-weight-heavy); color: var(--color-text); direction: ltr; unicode-bidi: isolate; }
/* lesson 1 · the fourth question in every unit: what could go wrong */
.aq-req__risk { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--font-size-caption); color: var(--color-needs-check); }
/* lesson 2 · one colour acts: links take the action colour, underlined */
.aq-link, :where(a) { color: var(--color-text-link); }

.aq-phone-only { display: none; }
@media (max-width: 899.98px) { .aq-phone-only { display: flex; } .aq-desktop-only { display: none; } }

/* ───────────── 19. Moments: small, quiet, earned ─────────────
   Every moment is tied to something the user did, lasts ≤ 0.9 s, and stops under reduced motion (durations are tokens). */
@keyframes aq-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes aq-stamp { 0% { transform: scale(1.8) rotate(-10deg); opacity: 0; } 55% { transform: scale(.94) rotate(-3deg); opacity: 1; } 100% { transform: scale(1) rotate(-3deg); } }
@keyframes aq-rise-in { from { opacity: 0; transform: translateY(var(--space-3)); } }
@keyframes aq-dash { to { stroke-dashoffset: 0; } }
@keyframes aq-underline { 0% { background-size: 0 0.12em; } 40%, 80% { background-size: 100% 0.12em; } 100% { background-size: 100% 0.12em; opacity: 1; } }
@keyframes aq-rule { from { transform: scaleX(0); } }
@keyframes aq-ring { 0% { box-shadow: 0 0 0 0 var(--color-needs-check-bg); } 100% { box-shadow: 0 0 0 var(--space-3) transparent; } }
@keyframes aq-nudge { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
/* a new value draws its own underline once (direction A's motion, kept) */
.aq-value.is-settled .aq-value__num { background-image: linear-gradient(var(--color-action), var(--color-action)); background-repeat: no-repeat; background-position: 100% 100%; background-size: 0 0.12em; animation: aq-underline calc(var(--duration-slow) * 3) var(--easing-out) both; }
/* values are never animated through intermediate numbers; only their emphasis moves (v0.4) */
[data-aq-count] { font-variant-numeric: tabular-nums; }
/* the logo's section cut turns over on hover */
.aq-logo__mark { transition: transform calc(var(--duration-slow) * 2) var(--easing-in-out); }
.aq-logo:hover .aq-logo__mark { transform: rotate(180deg); }
/* titles: the double rule is drawn in from the start */
.aq-rule-double { transform-origin: 100% 50%; animation: aq-rule calc(var(--duration-slow) * 2) var(--easing-out) both; }
.aq-rule-double:dir(ltr) { transform-origin: 0 50%; }
/* staggered entrance for KPI strips, result lines, search results (data-aq-reveal on the parent) */
[data-aq-reveal].is-revealed > * { animation: aq-rise-in var(--duration-slow) var(--easing-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.aq-cmdk[open] .aq-option { animation: aq-rise-in var(--duration-base) var(--easing-out) both; }
.aq-cmdk[open] .aq-option:nth-child(2) { animation-delay: 30ms; } .aq-cmdk[open] .aq-option:nth-child(3) { animation-delay: 60ms; } .aq-cmdk[open] .aq-option:nth-child(4) { animation-delay: 90ms; }
/* saved: the button confirms in place, the check pops, then it settles */
.aq-btn[data-state="saved"] { --_bg: var(--color-compliant); --_fg: var(--color-text-on-action); --_bd: var(--color-compliant); }
.aq-btn[data-state="saved"] .aq-icon, .aq-copy[data-copied="true"] .aq-icon, .aq-toast > .aq-icon, .aq-steps-progress li[data-state="done"] .aq-icon, .aq-file[data-state="done"] > .aq-icon { animation: aq-pop calc(var(--duration-slow) * 1.5) var(--easing-out) both; }
/* the source was checked: a small stamp, once, when the block first comes into view */
.aq-stamp { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--border-width-ui) solid var(--color-compliant); border-radius: var(--radius-s); color: var(--color-compliant); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); transform: rotate(-3deg); }
.is-revealed .aq-stamp, .aq-stamp.is-revealed { animation: aq-stamp calc(var(--duration-slow) * 2) var(--easing-out) both; animation-delay: var(--duration-base); }
/* a changed flag rings once when it scrolls into view */
.aq-badge--changed.is-revealed, .is-revealed .aq-badge--changed { animation: aq-ring calc(var(--duration-slow) * 3) var(--easing-out) 2; }
/* empty-state drawings draw themselves (shapes carry pathLength="1") */
.aq-draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: aq-dash calc(var(--duration-slow) * 3) var(--easing-out) forwards; }
.aq-draw [pathLength]:nth-child(2) { animation-delay: 150ms; } .aq-draw [pathLength]:nth-child(3) { animation-delay: 300ms; } .aq-draw [pathLength]:nth-child(4) { animation-delay: 450ms; }
/* the continue bar nudges once when it appears */
.aq-continue { animation: aq-rise-in var(--duration-slow) var(--easing-out) both; }
.aq-continue > .aq-icon { animation: aq-nudge calc(var(--duration-slow) * 2) var(--easing-in-out) 2; animation-delay: 600ms; }
/* a milestone, said plainly: the first project, the first analysis */
.aq-milestone { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-compliant); border-radius: var(--radius-l); box-shadow: var(--highlight), var(--elevation-2); animation: aq-rise-in var(--duration-slow) var(--easing-out) both; }
.aq-milestone > svg { color: var(--color-compliant); }
@media not all { .aq-logo:hover .aq-logo__mark { transform: none; } .aq-draw [pathLength] { stroke-dashoffset: 0; } }
@media print { .aq-continue, .aq-context { display: none !important; } }


/* ───────────── 20. v0.4 fixes (review-v0.3) ───────────── */
/* Tabs that open a dialog are buttons styled as tabs */
button.aq-tabbar__item { appearance: none; border: 0; background: none; color: var(--color-rail-text); font: inherit; font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); cursor: pointer; }
/* "More" sheet and any list of destinations: the current page reads as current, as in the rail */
.aq-list-row[aria-current="page"] { background: var(--color-action-subtle); color: var(--color-action-subtle-text); font-weight: var(--font-weight-bold); box-shadow: inset calc(-1 * var(--focus-width)) 0 0 var(--color-action); }
.aq-list-row[aria-current="page"]:dir(ltr) { box-shadow: inset var(--focus-width) 0 0 var(--color-action); }
.aq-more { padding: 0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.aq-more .aq-list-row { min-block-size: 3.5rem; }
.aq-more__group { font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); }
.aq-more__account { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-block-start: var(--space-3); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); color: var(--color-text); text-decoration: none; box-shadow: var(--highlight), var(--elevation-1); }
/* Phone search: ⌘K becomes full screen, field at the top, keyboard up */
@media (max-width: 899.98px) {
  .aq-cmdk { inline-size: 100%; max-inline-size: 100%; block-size: 100dvh; max-block-size: 100dvh; margin: 0; border: 0; border-radius: 0; padding-block-start: env(safe-area-inset-top); }
  .aq-cmdk[open] { display: flex; flex-direction: column; animation: aq-up var(--duration-slow) var(--easing-out); }
  .aq-cmdk__field { position: sticky; inset-block-start: 0; z-index: 1; min-block-size: var(--appbar-height); background: var(--color-surface-raised); box-shadow: var(--elevation-1); }
  .aq-cmdk__field .aq-search__input { font-size: var(--font-size-body-l); min-block-size: var(--button-height-m); }
  .aq-cmdk__list { flex: 1; max-block-size: none; padding-block-end: env(safe-area-inset-bottom); }
  .aq-cmdk .aq-option { min-block-size: 3.5rem; }
}
/* Targets: rail group headers and the logo link ≥ 44 px; AI footnote hit area ≥ 44 × 44 (the mark stays small) */
.aq-rail__group > summary { inline-size: 100%; min-block-size: var(--button-height-s); padding-block: var(--space-2); }
.aq-rail__brand .aq-logo, .aq-appbar .aq-logo, .aq-mheader .aq-logo { min-block-size: var(--button-height-s); }
.aq-cite::after { inset: calc((var(--button-height-s) - var(--space-6)) / -2); }


/* ───────────── 21. v0.5 (Part 2 rebuild findings) ───────────── */
/* Fix 5 (v0.4 brief): the section bar is the phone's stand-in for the section index */
@media (min-width: 1200px) { .aq-sectionbar { display: none; } }
@media (min-width: 900px) and (max-width: 1199.98px) { .aq-sectionbar { inset-block-end: var(--space-4); } }
@media (max-width: 899.98px) { .aq-sectionbar { inset-block-end: calc(var(--tabbar-height) + 2 * var(--space-1) + var(--space-2) + env(safe-area-inset-bottom)); } }
/* Every component that sets display also honours [hidden] (cards, rows, alerts… were staying on screen) */
[class*="aq-"][hidden] { display: none !important; }
/* 44 px targets for small text links: breadcrumbs and "איך לוודא?" (text stays small, the hit area grows) */
.aq-breadcrumbs a, .aq-verify__link { position: relative; display: inline-flex; align-items: center; min-block-size: var(--button-height-s); }
.aq-breadcrumbs a::after, .aq-verify__link::after { content: ""; position: absolute; inset-inline: calc(-1 * var(--space-2)); inset-block: 0; }
.aq-verify { align-items: center; }
/* Group crumbs (מידע, כלים לפרויקט) have no page: plain text, not a link */
.aq-breadcrumbs li > span:not([aria-current]) { color: var(--color-text-muted); }
/* Calculator on the phone: the card stays in the flow; only a one-line summary pins (aria-hidden; never animates) */
.aq-calc-pin { display: none; }
@media (max-width: 899.98px) {
  .aq-calc--pin .aq-calc__result { position: static; order: 0; }
  .aq-calc-pin[data-shown] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); position: fixed; inset-block-start: calc(var(--appbar-height) + env(safe-area-inset-top) + var(--space-2)); inset-inline: var(--space-4); z-index: var(--z-sticky); padding: var(--space-3) var(--space-5); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border-input); border-radius: var(--card-radius); box-shadow: var(--highlight), var(--elevation-2); }
}
/* Equal-weight pair: two answers to one question, same width and height at every width; stacked when they do not fit */
.aq-btn-group--equal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-2); inline-size: 100%; }
.aq-btn-group--equal > .aq-btn { inline-size: 100%; }
.aq-modal__foot > .aq-btn-group--equal, .aq-consent__actions.aq-btn-group--equal { flex: 1 1 100%; }
/* Modal whose content is a form (method="dialog" so native validation runs): head and foot fixed, body scrolls */
.aq-modal__form { display: flex; flex-direction: column; max-block-size: inherit; margin: 0; }
.aq-modal__form > .aq-modal__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }
.aq-modal__form > .aq-modal__body > * { flex-shrink: 0; }
.aq-modal__head > .aq-btn--icon { flex: none; }
/* List row with a value at the inline end ("3 פרויקטים", "48 MB") */
.aq-list-row__value { font-weight: var(--font-weight-bold); text-align: end; white-space: nowrap; unicode-bidi: isolate; }
/* Before → after value (updates, changed rows) */
.aq-diff { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-5); border-block-end: var(--border-width-ui) solid var(--color-border); }
.aq-diff:last-child { border-block-end: 0; }
.aq-diff__before .aq-value__num { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 0.08em; font-weight: var(--font-weight-medium); }
.aq-diff__arrow { color: var(--color-text-muted); }
.aq-diff__after { padding: 0 var(--space-2); border-radius: var(--radius-s); background: var(--color-changed-bg); }
.aq-diff__label { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; }
.aq-diff__label small { font-size: var(--font-size-caption); color: var(--color-text-muted); }
@media (max-width: 599.98px) { .aq-diff { grid-template-columns: auto auto auto; } .aq-diff__label { grid-column: 1 / -1; } }
/* AI answer additions: question as heading, next steps, the feedback row */
.aq-ai__question { font-weight: var(--font-weight-bold); font-size: var(--font-size-h3); }
.aq-ai__next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.aq-ai__notbinding { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.aq-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: var(--border-width-ui) solid var(--color-border); margin: 0; }
.aq-feedback > .aq-small { margin-inline-end: var(--space-2); }
.aq-feedback--done { gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }
.aq-feedback [aria-pressed="true"] { --_bg: var(--color-action-subtle); --_fg: var(--color-action-subtle-text); --_bd: var(--color-action); }
/* ⌘K: the AI answer above the results */
.aq-cmdk__ai { padding: var(--space-3) var(--space-3) 0; }
.aq-cmdk__ai .aq-ai { padding: var(--space-4); }
/* Drawers that become bottom sheets on the phone (report an error, ask about this topic) */
.aq-panel { inline-size: min(100%, 32rem); }
.aq-panel--wide { inline-size: min(100%, 36rem); }
.aq-panel__body { display: flex; flex-direction: column; padding: var(--space-5) var(--space-6) var(--space-8); gap: var(--space-5); overflow-y: auto; }
@media (max-width: 899.98px) {
  .aq-panel { inline-size: 100%; block-size: auto; max-block-size: 90dvh; margin: auto 0 0; border-inline-start: 0; border-start-start-radius: var(--sheet-radius); border-start-end-radius: var(--sheet-radius); padding-block-end: env(safe-area-inset-bottom); }
  .aq-panel[open] { animation: aq-up var(--duration-slow) var(--easing-out); }
  .aq-panel__body { padding: var(--space-4) var(--space-4) var(--space-6); }
}
.aq-quote-box { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-sunk); border-inline-start: var(--focus-width) solid var(--color-border-strong); border-radius: var(--radius-s); }
.aq-quote-box blockquote { margin: var(--space-1) 0; font-family: var(--font-quote); font-size: var(--font-size-body); }
.aq-context-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-sunk); border-radius: var(--radius-m); font-size: var(--font-size-small); }
.aq-context-list div { display: flex; gap: var(--space-2); }
.aq-context-list dt { color: var(--color-text-muted); }
.aq-context-list dd { margin: 0; font-weight: var(--font-weight-bold); }
/* Rail: the menu scrolls on its own, the foot (account, settings) stays put and never covers a link */
.aq-rail:has(> .aq-rail__scroll) { overflow: hidden; }
.aq-rail__scroll { flex: 1; min-block-size: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); }
.aq-rail:has(> .aq-rail__scroll) > .aq-rail__foot { flex: none; margin-block-start: 0; }
.aq-rail__account { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-block-size: var(--button-height-m); padding: var(--space-2) var(--space-3); color: var(--color-rail-text); text-decoration: none; border-radius: var(--radius-m); }
.aq-rail__account:hover, .aq-rail__account[aria-current="page"] { background: var(--color-rail-active-bg); color: var(--color-rail-active-text); }
.aq-rail__account > span:last-child { display: flex; flex-direction: column; min-inline-size: 0; }
.aq-rail__account small { font-size: var(--font-size-caption); opacity: .85; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: end; }
.aq-rail__signedout { display: grid; gap: var(--space-2); }
/* Signed out, on a screen that needs an account */
.aq-signin-prompt { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-10) var(--space-6); text-align: center; max-inline-size: 40rem; margin-inline: auto; }
.aq-signin-prompt > .aq-icon { color: var(--color-text-muted); }
/* Legal / policy page: version line and a "questions about this page" line */
.aq-legal__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--font-size-small); color: var(--color-text-muted); }
.aq-legal section { scroll-margin-block-start: calc(var(--appbar-height) + var(--space-4)); }
.aq-legal section + section { margin-block-start: var(--space-8); }
/* Added / replaces markers on a city guideline item, against the national rule */
.aq-badge--adds { background: var(--color-compliant-bg); color: var(--color-compliant); }
.aq-badge--replaces { background: var(--color-needs-check-bg); color: var(--color-needs-check); }

/* ───────────── 17. Print / PDF: requirement list and plan analysis ───────────── */
@media print {
  :root, [data-theme] { --grid-image: none; --surface-light: none; --elevation-1: 0 0 0 0 transparent; --elevation-2: 0 0 0 0 transparent; --elevation-3: 0 0 0 0 transparent; --highlight: 0 0 0 0 transparent; --highlight-strong: 0 0 0 0 transparent; --shadow-inset: 0 0 0 0 transparent; --shadow-control: 0 0 0 0 transparent; --shadow-control-strong: 0 0 0 0 transparent; }
  body { background: none; font-size: 11pt; color: black; }
  .aq-rail, .aq-appbar, .aq-tabbar, .aq-sectionbar, .aq-index, .aq-ask, .aq-skip, .aq-toaster, .aq-btn, .aq-offline, .aq-consent { display: none !important; }
  .aq-shell, .aq-report, .aq-req-split, .aq-calc { display: block; }
  .aq-main { padding: 0; }
  .aq-req, .aq-kpi, .aq-source__item, .aq-ai { break-inside: avoid; }
  .aq-req { grid-template-columns: var(--margin-number-width) minmax(0, 1fr) auto; }
  .aq-req__num { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; direction: ltr; unicode-bidi: isolate; font-size: 9pt; color: var(--color-text-muted); }
  .aq-print-only { display: block !important; }
}
.aq-print-only { display: none; }

/* ═══ v0.7 (23.10.2026) · from the review of v0.6 ═══ */
:root { --font-quote: var(--font-text); --color-logo-tile: #22506F; --color-logo-gold: #B8902F; }

/* Logo: today's ADRICAL mark (lib/logo/archiq-mark.png). Its white half needs a dark ground, so it sits on a navy tile, as on the current site. */
.aq-logo__tile { inline-size: var(--space-8); block-size: var(--space-8); flex: none; display: grid; place-items: center; border-radius: var(--radius-m); background: var(--color-logo-tile); box-shadow: var(--highlight), var(--elevation-1); }
.aq-logo__tile img { inline-size: 74%; block-size: 74%; object-fit: contain; display: block; }
.aq-logo__word { font-size: var(--font-size-body-l); font-weight: var(--font-weight-regular); letter-spacing: 0.17em; }
.aq-logo__iq, .aq-rail .aq-logo__iq, .aq-appbar .aq-logo__iq { color: var(--color-logo-gold); font-weight: var(--font-weight-medium); }
.aq-logo--l .aq-logo__tile { inline-size: var(--space-16); block-size: var(--space-16); border-radius: var(--radius-l); }
.aq-logo--l .aq-logo__word { font-size: var(--font-size-h1); }

/* Home: the original two-line title and the four big tiles */
.aq-home-title { margin: 0; text-align: center; line-height: 1.05; text-wrap: balance; }
.aq-home-title__a { display: block; font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--color-text); }
.aq-home-title__b { display: block; font-size: calc(var(--font-size-display) * 1.35); font-weight: var(--font-weight-heavy); color: var(--color-source-official); letter-spacing: -0.01em; }
.aq-home-tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899.98px) { .aq-home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .aq-home-title__b { font-size: var(--font-size-display); } .aq-home-title__a { font-size: var(--font-size-h2); } }
.aq-home-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-block-size: 8.5rem; padding: var(--space-5) var(--space-3); text-align: center; text-decoration: none; color: var(--color-text); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); box-shadow: var(--highlight), var(--elevation-1); transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out); }
.aq-home-tile:hover { border-color: var(--color-action); box-shadow: var(--highlight), var(--elevation-2); }
.aq-home-tile:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.aq-home-tile__ic { display: grid; place-items: center; inline-size: var(--space-12); block-size: var(--space-12); border-radius: 50%; background: var(--color-action); color: var(--color-text-on-action); }
.aq-home-ask { display: flex; flex-direction: column; gap: var(--space-2); max-inline-size: 40rem; inline-size: 100%; margin-inline: auto; padding: var(--space-4); text-align: center; background: var(--color-action-subtle); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); }
.aq-home-ask__label { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* Number with unit: small up / down arrows, for changing the value without typing */
.aq-spin { display: flex; flex-direction: column; align-self: stretch; flex: none; border-inline-start: var(--border-width-ui) solid var(--color-border); }
.aq-spin > button { flex: 1; display: grid; place-items: center; inline-size: 1.75rem; padding: 0; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.aq-spin > button:hover { color: var(--color-action); background: var(--color-action-subtle); }
.aq-spin > button:first-child { border-start-end-radius: var(--input-radius); }
.aq-spin > button:last-child { border-end-end-radius: var(--input-radius); border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-spin svg { inline-size: 0.7rem; block-size: 0.7rem; }

/* AI answer: the answer itself first, in green; details after; the AI label at the bottom; smaller source numbers */
.aq-ai__verdict { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-compliant); background: var(--color-compliant-bg); border-radius: var(--radius-m); }
.aq-ai__verdict > .aq-icon { flex: none; margin-block-start: 0.1em; }
.aq-ai__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: var(--border-width-ui) solid var(--color-border); }
.aq-cite { min-inline-size: 1.15rem; block-size: 1.15rem; padding-inline: 0.2rem; margin-inline: 0.15rem; font-size: 0.6875rem; vertical-align: 0.45em; }

/* No underline under KPI values and their section links (the "settle" line stays only for a value that just changed) */
.aq-kpi__source { text-decoration: none; }
.aq-kpi__source:hover { text-decoration: underline; }

/* Continue bar: light, so it stands out on the blue of the page */
.aq-continue { background: var(--color-surface-card); color: var(--color-text); border: var(--border-width-ui) solid var(--color-action); box-shadow: var(--highlight), var(--elevation-3); }
.aq-continue > .aq-icon { color: var(--color-action); }
.aq-continue .aq-btn--primary { --_bg: var(--color-action); --_fg: var(--color-text-on-action); --_bd: var(--color-action); }
.aq-continue .aq-progress { background: var(--color-surface-sunk); }

/* One-time code: six cells that always fit the screen */
.aq-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); inline-size: 100%; max-inline-size: 22rem; }
.aq-otp > input { inline-size: 100%; min-inline-size: 0; }

/* Surface option "sheet": the content sits on a clear white sheet over the page, instead of directly on the paper */
:root[data-surface="sheet"] .aq-main { margin: var(--space-4); background-color: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); box-shadow: var(--highlight), var(--elevation-2); }
:root[data-surface="sheet"] .aq-main .aq-card, :root[data-surface="sheet"] .aq-main .aq-kpi, :root[data-surface="sheet"] .aq-main .aq-list, :root[data-surface="sheet"] .aq-main .aq-req-list { background-color: var(--color-surface-page); }
@media (max-width: 899.98px) { :root[data-surface="sheet"] .aq-main { margin: var(--space-2); } }

/* Phone: nothing wider than the screen */
@media (max-width: 599.98px) { .aq-main { overflow-wrap: anywhere; } .aq-main img, .aq-main svg, .aq-main table { max-inline-size: 100%; } }

/* ═══ v0.8 (24.10.2026) · from the review of v0.7 ═══ */
/* Home: the four main tools as regular-size buttons, not big tiles */
.aq-home-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.aq-home-tile { flex-direction: row; min-block-size: var(--button-height-m); padding: 0 var(--space-5); gap: var(--space-2); font-size: var(--font-size-body); border-radius: var(--radius-m); box-shadow: var(--shadow-control); }
.aq-home-tile__ic { inline-size: auto; block-size: auto; background: none; color: var(--color-action); border-radius: 0; }
.aq-home-tile__ic .aq-icon { inline-size: 1.25rem; block-size: 1.25rem; }
@media (max-width: 899.98px) { .aq-home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Numbers: no line stays under a value. A changed value gets a short sweep, right to left, that then disappears */
@keyframes aq-underline {
  0% { background-size: 0 0.12em; background-position: 100% 100%; }
  45% { background-size: 100% 0.12em; background-position: 100% 100%; }
  55% { background-size: 100% 0.12em; background-position: 0 100%; }
  100% { background-size: 0 0.12em; background-position: 0 100%; }
}

/* Lists (calculators, guidelines…): the row lights up under the cursor */
a.aq-list-row { transition: background-color var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out); }
a.aq-list-row:hover { background-color: var(--color-action-subtle); color: var(--color-action-subtle-text); }
a.aq-list-row:hover > .aq-icon { color: var(--color-action); }

/* Calculator drawings (ported from today's site), live with the inputs */
.aq-dg { margin: 0; padding: var(--space-4) var(--space-6) 0; --dl: var(--color-border-strong); --dh: var(--color-action); --dd: var(--color-text-muted); --dt: var(--color-text-muted); --dg: var(--color-text); --dbad: var(--color-error); }
.aq-dg:empty { display: none; }
.aq-dg svg { display: block; inline-size: 100%; max-inline-size: 30rem; block-size: auto; margin-inline: auto; direction: ltr; }
.aq-dg.is-anim .hv { stroke-dasharray: 1; stroke-dashoffset: 1; animation: aq-dg-draw 0.8s var(--easing-out) forwards; }
@keyframes aq-dg-draw { to { stroke-dashoffset: 0; } }
@media not all { .aq-dg.is-anim .hv { animation: none; stroke-dashoffset: 0; } }

/* Background motion (lib/motion.js): the "grid" mode replaces the CSS grid */
:root[data-motion="grid"]:not([data-background]) body, :root[data-motion="dots"]:not([data-background]) body { background-image: none !important; }
/* v0.9.2 · "חלק" is truly plain: no grid, no light, no lines */
:root[data-background="plain"] body { background-image: none !important; }

/* Width option for large screens: "מוגבל" keeps the content in a centred column instead of stretching to the window */
:root[data-width="capped"] .aq-main { inline-size: 100%; max-inline-size: 80rem; margin-inline: auto; } /* v0.10.3: the content area is capped and centred; each element keeps its own width (the AI bar stays short) */

/* v0.9.2 · CAD cursor: the pointer itself becomes a short crosshair with a pick box, as in AutoCAD — everywhere, including
   buttons and fields. A white halo keeps it visible on light and dark; over anything clickable it turns blue. */
:root[data-motion="cad"], :root[data-motion="cad"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22 fill=%22none%22%3E%3Cpath d=%22M3 16H12.5M19.5 16H29M16 3V12.5M16 19.5V29%22 stroke=%22white%22 stroke-opacity=%22.9%22 stroke-width=%223.2%22/%3E%3Crect x=%2212.5%22 y=%2212.5%22 width=%227%22 height=%227%22 stroke=%22white%22 stroke-opacity=%22.9%22 stroke-width=%223.2%22/%3E%3Cpath d=%22M3 16H12.5M19.5 16H29M16 3V12.5M16 19.5V29%22 stroke=%22%23213546%22 stroke-width=%221.3%22/%3E%3Crect x=%2212.5%22 y=%2212.5%22 width=%227%22 height=%227%22 stroke=%22%23213546%22 stroke-width=%221.2%22/%3E%3C/svg%3E") 16 16, crosshair !important; }
:root[data-motion="cad"] :is(a, button, summary, label, select, [role="button"], [role="option"], [role="switch"], .aq-chip, input[type="radio"], input[type="checkbox"]),
:root[data-motion="cad"] :is(a, button, summary, label, select, [role="button"], [role="option"], [role="switch"], .aq-chip) * { cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22 fill=%22none%22%3E%3Cpath d=%22M3 16H12.5M19.5 16H29M16 3V12.5M16 19.5V29%22 stroke=%22white%22 stroke-opacity=%22.9%22 stroke-width=%223.2%22/%3E%3Crect x=%2212.5%22 y=%2212.5%22 width=%227%22 height=%227%22 stroke=%22white%22 stroke-opacity=%22.9%22 stroke-width=%223.2%22/%3E%3Cpath d=%22M3 16H12.5M19.5 16H29M16 3V12.5M16 19.5V29%22 stroke=%22%232A5679%22 stroke-width=%221.3%22/%3E%3Crect x=%2212.5%22 y=%2212.5%22 width=%227%22 height=%227%22 stroke=%22%232A5679%22 stroke-width=%221.2%22/%3E%3C/svg%3E") 16 16, pointer !important; }

/* ═══ v0.10 (24.10.2026) · topic and calculator tiles with the site's icons in a blue circle ═══
   <html data-tile="solid | soft | ring"> picks the circle style (solid is the default). */
.aq-topics { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.aq-topic { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-block-size: 9.5rem; padding: var(--space-6) var(--space-3) var(--space-4); text-align: center; text-decoration: none; color: var(--color-text); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-radius: var(--radius-l); box-shadow: var(--highlight), var(--elevation-1); transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out); }
a.aq-topic:hover { border-color: var(--color-action); box-shadow: var(--highlight), var(--elevation-2); transform: translateY(-2px); }
a.aq-topic:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.aq-topic[aria-disabled="true"] { opacity: 0.7; }
.aq-topic__label { font-weight: var(--font-weight-bold); font-size: var(--font-size-body); line-height: var(--line-height-tight); }
.aq-topic > .aq-badge { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); }
.aq-topic__ic { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; flex: none;
  color: var(--color-text-on-action); background: linear-gradient(160deg, var(--color-action), var(--color-action-active)); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px -4px var(--color-shadow); }
.aq-topic__ic > i { display: block; inline-size: 56%; block-size: 56%; background: currentColor; -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
.aq-topic__ic > svg { inline-size: 52%; block-size: 52%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* B · soft: a light blue disc with a blue icon and a fine ring */
:root[data-tile="soft"] .aq-topic__ic { color: var(--color-action); background: var(--color-action-subtle); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-action) 35%, transparent); }
/* C · gold ring: the solid circle with a thin gold ring around it */
:root[data-tile="ring"] .aq-topic__ic { box-shadow: 0 0 0 3px var(--color-surface-card), 0 0 0 4.5px var(--color-accent), 0 6px 12px -6px var(--color-shadow); }
@media (max-width: 599.98px) { .aq-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .aq-topic { min-block-size: 8.5rem; } }

/* Planning stages (as on today's site): stage rail + stage dashboard (links, licensing process, checklist) */
.aq-stages { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.aq-stages__rail { position: sticky; inset-block-start: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.aq-stages__rb { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); border-radius: var(--radius-l); text-decoration: none; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); text-align: center; }
.aq-stages__rb .aq-topic__ic { inline-size: 2.75rem; block-size: 2.75rem; }
.aq-stages__rb[aria-current="page"] { color: var(--color-text); background: var(--color-surface-card); box-shadow: var(--highlight), var(--elevation-1); }
.aq-stages__rb:not([aria-current]) .aq-topic__ic { filter: saturate(.5); opacity: .75; }
.aq-stages__rb:hover { color: var(--color-action); }
.aq-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--space-6); align-items: start; }
@media (max-width: 1199.98px) { .aq-stage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699.98px) { .aq-stages { grid-template-columns: minmax(0, 1fr); } .aq-stages__rail { position: static; flex-direction: row; overflow-x: auto; } .aq-stages__rb { min-inline-size: 5rem; } }
.aq-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: flow; }
.aq-flow__step { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: var(--color-surface-card); border: var(--border-width-ui) solid var(--color-border); border-inline-start: 4px solid var(--k, var(--color-action)); border-radius: var(--radius-m); }
.aq-flow__n { counter-increment: flow; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--color-surface-sunk); font-weight: var(--font-weight-bold); font-size: var(--font-size-small); }
.aq-flow__n::before { content: counter(flow); }
.aq-flow__days { font-size: var(--font-size-small); color: var(--color-text-muted); white-space: nowrap; }
.aq-flow__kind { font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); color: var(--k); }
.aq-flow__more { grid-column: 2 / -1; display: grid; gap: var(--space-2); font-size: var(--font-size-small); }
.aq-ck__bar { block-size: 6px; border-radius: 3px; background: var(--color-surface-sunk); overflow: hidden; }
.aq-ck__bar > i { display: block; block-size: 100%; background: var(--color-action); }

/* v0.10.1 · "רך" with relief (chosen 24.10.2026, the default): a light disc lit from above, slightly raised, with the icon
   pressed into it — a white light edge under the icon and a soft shadow over it. */
.aq-topic__ic { position: relative; }
.aq-topic__ic > i { position: relative; z-index: 1; -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
:root[data-tile="soft"] .aq-topic__ic {
  color: var(--color-action);
  background: radial-gradient(130% 130% at 35% 18%, var(--color-surface-card) 0%, var(--color-action-subtle) 58%, color-mix(in srgb, var(--color-action-subtle) 78%, var(--color-action) 22%) 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.85), inset 0 -3px 6px color-mix(in srgb, var(--color-action) 22%, transparent),
              0 0 0 1px color-mix(in srgb, var(--color-action) 22%, transparent), 0 6px 12px -5px color-mix(in srgb, var(--color-action) 50%, transparent), 0 1px 0 rgba(255,255,255,.7);
}
:root[data-tile="soft"] .aq-topic__ic[style]::before { content: ""; position: absolute; inset: 22%; transform: translateY(1px); background: rgba(255,255,255,.95); -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
:root[data-tile="soft"] .aq-topic__ic > svg { filter: drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 color-mix(in srgb, var(--color-action) 30%, transparent)); }
:root[data-tile="soft"] a.aq-topic:hover .aq-topic__ic { box-shadow: inset 0 2px 1px rgba(255,255,255,.85), inset 0 -3px 6px color-mix(in srgb, var(--color-action) 26%, transparent),
              0 0 0 1px color-mix(in srgb, var(--color-action) 35%, transparent), 0 9px 16px -6px color-mix(in srgb, var(--color-action) 55%, transparent), 0 1px 0 rgba(255,255,255,.7); }
:root[data-tile="soft"][data-theme="dark"] .aq-topic__ic { box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--color-action) 30%, transparent), 0 6px 12px -5px rgba(0,0,0,.6); }
:root[data-tile="soft"][data-theme="dark"] .aq-topic__ic[style]::before { background: rgba(0,0,0,.45); transform: translateY(-1px); }

/* v0.10.2 · "מלא" with relief (chosen 24.10.2026, the default): the blue disc is domed and lit from above
   (lighter at the top, a fine light rim, a soft shadow under it) and the white icon stands slightly raised on it. */
:root:not([data-tile]) .aq-topic__ic {
  background: radial-gradient(120% 120% at 35% 15%, color-mix(in srgb, var(--color-action) 70%, white 30%) 0%, var(--color-action) 48%, var(--color-action-active) 100%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,.38), inset 0 -3px 6px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--color-action-active) 60%, transparent),
              0 7px 14px -6px color-mix(in srgb, var(--color-action-active) 80%, transparent), 0 1px 0 rgba(255,255,255,.6);
}
:root:not([data-tile]) .aq-topic__ic[style]::before { content: ""; position: absolute; inset: 22%; transform: translateY(1.5px); background: rgba(0,0,0,.30); -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
:root:not([data-tile]) .aq-topic__ic > svg { filter: drop-shadow(0 1.5px 0 rgba(0,0,0,.30)); }
:root:not([data-tile]) a.aq-topic:hover .aq-topic__ic { box-shadow: inset 0 1.5px 1px rgba(255,255,255,.42), inset 0 -3px 6px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--color-action-active) 60%, transparent),
              0 11px 18px -7px color-mix(in srgb, var(--color-action-active) 85%, transparent), 0 1px 0 rgba(255,255,255,.6); }
:root:not([data-tile])[data-theme="dark"] .aq-topic__ic { box-shadow: inset 0 1.5px 1px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.25), 0 7px 14px -6px rgba(0,0,0,.7); }