/*
 * Aquifer design system v0.2 -- components.
 *
 * One block per Figma component (ETEN x Aquifer -> Components, 508:1157),
 * named aq-<component> to match the Figma descriptions. Bind only to the
 * semantic tokens in tokens.css. DOM builders for every block live in
 * components.js; the living reference is /design-system/ (static/design-system/index.html).
 *
 * Logical properties (padding-inline, inset-inline-start, ...) throughout so
 * RTL mirrors for free.
 */

/* ------------------------------------------------------------------ base */

.aq-page {
  margin: 0;
  min-height: 100vh;
  background: var(--aq-color-surface-page);
  color: var(--aq-color-text-primary);
  font: 400 15px/24px var(--aq-font-body);
  -webkit-font-smoothing: antialiased;
}
.aq-page *, .aq-page *::before, .aq-page *::after { box-sizing: border-box; }

.aq-container {
  width: 100%;
  max-width: calc(var(--aq-content-max) + 2 * var(--aq-page-margin));
  margin-inline: auto;
  padding-inline: var(--aq-page-margin);
}

.aq-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* One focus treatment everywhere: 2px border/focus ring, 2px offset. */
.aq-focusable:focus-visible,
.aq-btn:focus-visible, .aq-chip:focus-visible, .aq-segmented__item:focus-visible,
.aq-nav-item:focus-visible, .aq-resource-card:focus-visible, .aq-language-card:focus-visible,
.aq-purpose-tile:focus-visible, .aq-purpose-nav-item:focus-visible, .aq-book-cell:focus-visible,
.aq-icon-btn:focus-visible, .aq-lang-switch:focus-visible {
  outline: 2px solid var(--aq-color-border-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ icon */
/*
 * Lucide icons exported from Figma (1.75 stroke) live in icons/*.svg with
 * a fixed #192024 stroke. They're used as masks so color follows
 * currentColor ("Color follows text/primary; override per use").
 */
.aq-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--aq-icon-size, 16px);
  height: var(--aq-icon-size, 16px);
  background-color: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.aq-icon--14 { --aq-icon-size: 14px; }
.aq-icon--16 { --aq-icon-size: 16px; }
.aq-icon--18 { --aq-icon-size: 18px; }
.aq-icon--20 { --aq-icon-size: 20px; }
.aq-icon--24 { --aq-icon-size: 24px; }

.aq-icon--globe { -webkit-mask-image: url(icons/globe.svg); mask-image: url(icons/globe.svg); }
.aq-icon--search { -webkit-mask-image: url(icons/search.svg); mask-image: url(icons/search.svg); }
.aq-icon--chevron-down { -webkit-mask-image: url(icons/chevron-down.svg); mask-image: url(icons/chevron-down.svg); }
.aq-icon--key { -webkit-mask-image: url(icons/key.svg); mask-image: url(icons/key.svg); }
.aq-icon--x { -webkit-mask-image: url(icons/x.svg); mask-image: url(icons/x.svg); }
.aq-icon--check { -webkit-mask-image: url(icons/check.svg); mask-image: url(icons/check.svg); }
.aq-icon--download { -webkit-mask-image: url(icons/download.svg); mask-image: url(icons/download.svg); }
.aq-icon--share-2 { -webkit-mask-image: url(icons/share-2.svg); mask-image: url(icons/share-2.svg); }
.aq-icon--link { -webkit-mask-image: url(icons/link.svg); mask-image: url(icons/link.svg); }
.aq-icon--qr-code { -webkit-mask-image: url(icons/qr-code.svg); mask-image: url(icons/qr-code.svg); }
.aq-icon--copy { -webkit-mask-image: url(icons/copy.svg); mask-image: url(icons/copy.svg); }
.aq-icon--info { -webkit-mask-image: url(icons/info.svg); mask-image: url(icons/info.svg); }
.aq-icon--wifi-off { -webkit-mask-image: url(icons/wifi-off.svg); mask-image: url(icons/wifi-off.svg); }
.aq-icon--book-open { -webkit-mask-image: url(icons/book-open.svg); mask-image: url(icons/book-open.svg); }
.aq-icon--list { -webkit-mask-image: url(icons/list.svg); mask-image: url(icons/list.svg); }
.aq-icon--image { -webkit-mask-image: url(icons/image.svg); mask-image: url(icons/image.svg); }
.aq-icon--video { -webkit-mask-image: url(icons/video.svg); mask-image: url(icons/video.svg); }
.aq-icon--file-text { -webkit-mask-image: url(icons/file-text.svg); mask-image: url(icons/file-text.svg); }
.aq-icon--languages { -webkit-mask-image: url(icons/languages.svg); mask-image: url(icons/languages.svg); }
.aq-icon--sliders-horizontal { -webkit-mask-image: url(icons/sliders-horizontal.svg); mask-image: url(icons/sliders-horizontal.svg); }
.aq-icon--arrow-left { -webkit-mask-image: url(icons/arrow-left.svg); mask-image: url(icons/arrow-left.svg); }
.aq-icon--arrow-right { -webkit-mask-image: url(icons/arrow-right.svg); mask-image: url(icons/arrow-right.svg); }
.aq-icon--external-link { -webkit-mask-image: url(icons/external-link.svg); mask-image: url(icons/external-link.svg); }
.aq-icon--scale { -webkit-mask-image: url(icons/scale.svg); mask-image: url(icons/scale.svg); }
.aq-icon--building-2 { -webkit-mask-image: url(icons/building-2.svg); mask-image: url(icons/building-2.svg); }
.aq-icon--lightbulb { -webkit-mask-image: url(icons/lightbulb.svg); mask-image: url(icons/lightbulb.svg); }
.aq-icon--list-checks { -webkit-mask-image: url(icons/list-checks.svg); mask-image: url(icons/list-checks.svg); }
.aq-icon--graduation-cap { -webkit-mask-image: url(icons/graduation-cap.svg); mask-image: url(icons/graduation-cap.svg); }
.aq-icon--images { -webkit-mask-image: url(icons/images.svg); mask-image: url(icons/images.svg); }
.aq-icon--triangle-alert { -webkit-mask-image: url(icons/triangle-alert.svg); mask-image: url(icons/triangle-alert.svg); }
.aq-icon--circle-check { -webkit-mask-image: url(icons/circle-check.svg); mask-image: url(icons/circle-check.svg); }
.aq-icon--message-circle { -webkit-mask-image: url(icons/message-circle.svg); mask-image: url(icons/message-circle.svg); }

/* "Mirror arrows in RTL." */
[dir="rtl"] :is(.aq-icon--arrow-left, .aq-icon--arrow-right, .aq-icon--external-link) { transform: scaleX(-1); }

/* --------------------------------------------------------------- button */
/*
 * Primary = the one filled action per view. Secondary = hairline pill.
 * Quiet = text button. Medium 44px is the touch minimum; Small 36px for
 * dense rows. Loading: .is-loading swaps the icon for a spinner.
 */
.aq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 18px;
  border: 1px solid transparent;
  border-radius: var(--aq-radius-full);
  background: transparent;
  color: var(--aq-color-text-primary);
  font: 600 14px/20px var(--aq-font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  --aq-icon-size: 18px;
}
.aq-btn--sm { height: 36px; padding-inline: 14px; font-size: 13px; line-height: 18px; --aq-icon-size: 16px; }
.aq-btn--block { display: flex; width: 100%; }

.aq-btn--primary { background: var(--aq-color-action-primary); color: var(--aq-color-text-inverse); }
.aq-btn--primary:hover { background: var(--aq-color-action-primary-hover); }

.aq-btn--secondary { background: var(--aq-color-surface-raised); border-color: var(--aq-color-action-secondary-border); }
.aq-btn--secondary:hover { background: var(--aq-color-action-hover); }

.aq-btn--quiet:hover { background: var(--aq-color-action-hover); }

.aq-btn:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; color: var(--aq-color-action-disabled-text); }
.aq-btn--primary:is(:disabled, [aria-disabled="true"]) { background: var(--aq-color-action-disabled-bg); }
.aq-btn--secondary:is(:disabled, [aria-disabled="true"]) { background: var(--aq-color-surface-raised); border-color: var(--aq-color-border-subtle); }
.aq-btn--quiet:is(:disabled, [aria-disabled="true"]) { background: transparent; }

.aq-btn.is-loading { cursor: progress; }
.aq-btn.is-loading .aq-icon {
  background: none;
  -webkit-mask-image: none; mask-image: none;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: aq-spin 0.8s linear infinite;
}
@keyframes aq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aq-btn.is-loading .aq-icon { animation-duration: 2.4s; } }

/* Bare icon button (dialog close, mobile header actions). 44px hit area. */
.aq-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: -12px;
  border: 0;
  border-radius: var(--aq-radius-full);
  background: transparent;
  color: var(--aq-color-text-primary);
  cursor: pointer;
  --aq-icon-size: 20px;
}
.aq-icon-btn:hover { background: var(--aq-color-action-hover); }

/* ----------------------------------------------------------------- chip */
/*
 * Filters, formats, language editions. Selected uses the ice tint -- never
 * solid black. Count is optional. Show a check on selected filter chips.
 * Toggle chips are <button aria-pressed>; link chips may use .is-selected.
 */
.aq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 12px;
  border: 1px solid var(--aq-color-border-default);
  border-radius: var(--aq-radius-full);
  background: var(--aq-color-surface-raised);
  color: var(--aq-color-text-primary);
  font: 600 13px/18px var(--aq-font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  --aq-icon-size: 14px;
}
.aq-chip:hover { background: var(--aq-color-action-hover); }
.aq-chip__count { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-tertiary); }
.aq-chip .aq-icon--check { display: none; }
.aq-chip.aq-chip--check:is([aria-pressed="true"], .is-selected) .aq-icon--check { display: inline-block; }
.aq-chip:is([aria-pressed="true"], [aria-current="true"], .is-selected) {
  background: var(--aq-color-selected-bg);
  border-color: var(--aq-color-selected-border);
  color: var(--aq-color-selected-text);
}
.aq-chip:is([aria-pressed="true"], [aria-current="true"], .is-selected) .aq-chip__count { color: var(--aq-color-selected-text); }
.aq-chip:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  background: var(--aq-color-surface-raised);
  border-color: var(--aq-color-border-subtle);
  color: var(--aq-color-action-disabled-text);
}
.aq-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ tag */
/*
 * Badges are neutral. "Data TBD" (dashed) marks metadata not yet confirmed
 * by engineering: publisher, license, sizes, formats.
 */
.aq-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 6px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-sm);
  background: var(--aq-color-surface-sunken);
  color: var(--aq-color-text-secondary);
  font: 600 11px/18px var(--aq-font-body);
  white-space: nowrap;
  vertical-align: middle;
}
/*
 * Warning tag -- a deliberate exception to "only notices take color"
 * (docs/ux_merge_plan.md D4): restrictive (NC/ND) licenses must stand out
 * before someone relies on a resource. Reuses the warning signal tokens, so
 * no new color enters the palette. Not in Figma yet.
 */
.aq-tag--warning {
  border-color: transparent;
  background: var(--aq-color-signal-warning-bg);
  color: var(--aq-color-signal-warning-text);
}
.aq-tag--tbd {
  border: 1px dashed var(--aq-color-border-control);
  border-radius: var(--aq-radius-xs);
  background: transparent;
  font: 400 12px/16px var(--aq-font-data);
}

/* --------------------------------------------------------------- notice */
/* Info is neutral (sunken). Only warning/error/success take color. Fills its container. */
.aq-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--aq-radius-sm);
  background: var(--aq-color-surface-sunken);
  color: var(--aq-color-text-secondary);
  font: 400 13px/20px var(--aq-font-body);
  --aq-icon-size: 16px;
}
.aq-notice .aq-icon { margin-block-start: 2px; }
.aq-notice__body { flex: 1; min-width: 0; }
.aq-notice--warning { background: var(--aq-color-signal-warning-bg); color: var(--aq-color-signal-warning-text); }
.aq-notice--error { background: var(--aq-color-signal-error-bg); color: var(--aq-color-signal-error-text); }
.aq-notice--success { background: var(--aq-color-signal-success-bg); color: var(--aq-color-signal-success-text); }

/* ------------------------------------------------------------- checkbox */
/* Filter lists. Boundary uses border/control (3.3:1). Checked fill is action/primary. */
.aq-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 4px;
  color: var(--aq-color-text-primary);
  font: 400 15px/24px var(--aq-font-body);
  cursor: pointer;
}
.aq-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--aq-color-border-control);
  border-radius: var(--aq-radius-xs);
  background: var(--aq-color-surface-raised);
  cursor: pointer;
}
.aq-checkbox input::after {
  content: "";
  width: 14px; height: 14px;
  background-color: var(--aq-color-text-inverse);
  -webkit-mask: url(icons/check.svg) center / contain no-repeat;
  mask: url(icons/check.svg) center / contain no-repeat;
  visibility: hidden;
}
.aq-checkbox input:checked { background: var(--aq-color-action-primary); border-color: var(--aq-color-action-primary); }
.aq-checkbox input:checked::after { visibility: visible; }
.aq-checkbox input:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.aq-checkbox__count { margin-inline-start: auto; font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-tertiary); }

/* ---------------------------------------------------- segmented control */
/* Sort control on Browse. role=radiogroup with arrow-key behavior (components.js). */
.aq-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--aq-radius-full);
  background: var(--aq-color-surface-sunken);
}
.aq-segmented__item {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--aq-radius-full);
  background: transparent;
  color: var(--aq-color-text-secondary);
  font: 600 13px/18px var(--aq-font-body);
  white-space: nowrap;
  cursor: pointer;
}
.aq-segmented__item[aria-checked="true"] { background: var(--aq-color-surface-raised); color: var(--aq-color-text-primary); }

/* --------------------------------------------------------- search field */
/*
 * Matches languages (native, English, ISO), resources, publishers and Bible
 * books. Hero size on Home with a Search button; Default on Browse.
 */
.aq-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding-inline: 18px;
  border: 1px solid var(--aq-color-border-default);
  border-radius: var(--aq-radius-full);
  background: var(--aq-color-surface-raised);
  color: var(--aq-color-text-primary);
  --aq-icon-size: 18px;
}
.aq-search:focus-within { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.aq-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: 400 15px/24px var(--aq-font-body);
  text-overflow: ellipsis;
}
.aq-search input:focus { outline: none; }
.aq-search input::placeholder { color: var(--aq-color-text-tertiary); opacity: 1; }
.aq-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.aq-search--hero { height: 56px; padding-inline: 18px 6px; box-shadow: var(--aq-elevation-1); }
.aq-search--hero .aq-btn { flex-shrink: 0; }

/* ------------------------------------------------------------- coverage */
/*
 * Filled is coverage/filled; not-yet is coverage/empty. Every graphic sits
 * next to its number. OT and NT keep 39:27 proportions. Count-based
 * resources get no fill (no denominator). Unknown coverage gets a "Data TBD"
 * tag and no graphic.
 */
.aq-coverage-strip { display: flex; gap: 4px; width: 100%; }
.aq-coverage-strip__testament { display: flex; gap: 1px; height: 6px; min-width: 0; overflow: hidden; }
.aq-coverage-strip__testament--ot { flex: 39 1 0; }
.aq-coverage-strip__testament--nt { flex: 27 1 0; }
.aq-coverage-strip__seg { flex: 1 1 0; min-width: 1px; height: 6px; border-radius: 1px; background: var(--aq-color-coverage-empty); }
.aq-coverage-strip__seg.is-filled { background: var(--aq-color-coverage-filled); }

.aq-coverage-summary { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.aq-coverage-summary__row { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
.aq-coverage-summary--count .aq-coverage-summary__row { align-items: center; }
.aq-coverage-summary__value { font: 600 13px/18px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-coverage-summary__context { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }

.aq-coverage-grid { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.aq-coverage-grid__testament { display: flex; flex-direction: column; gap: 6px; }
.aq-coverage-grid__head { display: flex; justify-content: space-between; align-items: flex-start; white-space: nowrap; }
.aq-coverage-grid__label { font: 600 13px/18px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-coverage-grid__count { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); }
.aq-coverage-grid__cells { display: flex; flex-wrap: wrap; gap: 4px; }

/* Each cell is a button named e.g. "Mark: available". */
.aq-book-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--aq-radius-xs);
  background: var(--aq-color-coverage-empty-cell);
  color: var(--aq-color-text-secondary);
  font: 400 10px/16px var(--aq-font-data);
  cursor: pointer;
}
.aq-book-cell.is-filled { background: var(--aq-color-coverage-filled); color: var(--aq-color-text-inverse); font-weight: 700; }
/* Graded cell: a heat ramp of the cyan primitives. data-level 0-8 (set by
   AQ.setCoverageLevels) picks a bg/ink pair from tokens.css, every pair AA
   (4.5:1) in both themes. Level 0 (nothing translated yet) is the plain
   unfilled cell, same as a book the edition lacks; in a graded grid the latter
   adds a diagonal slash (.is-graded-grid), so the two stay distinguishable
   without color. Other levels get a faint ring so the palest fills keep an edge. */
.aq-book-cell.is-graded {
  background: var(--aq-cell-bg);
  color: var(--aq-cell-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aq-color-coverage-filled) 40%, transparent);
}
.aq-book-cell[data-level="0"] { --aq-cell-bg: var(--aq-color-coverage-empty-cell); --aq-cell-fg: var(--aq-color-text-secondary); box-shadow: none; }
.aq-book-cell[data-level="1"] { --aq-cell-bg: var(--aq-coverage-level-1-bg); --aq-cell-fg: var(--aq-coverage-level-1-fg); }
.aq-book-cell[data-level="2"] { --aq-cell-bg: var(--aq-coverage-level-2-bg); --aq-cell-fg: var(--aq-coverage-level-2-fg); }
.aq-book-cell[data-level="3"] { --aq-cell-bg: var(--aq-coverage-level-3-bg); --aq-cell-fg: var(--aq-coverage-level-3-fg); }
.aq-book-cell[data-level="4"] { --aq-cell-bg: var(--aq-coverage-level-4-bg); --aq-cell-fg: var(--aq-coverage-level-4-fg); }
.aq-book-cell[data-level="5"] { --aq-cell-bg: var(--aq-coverage-level-5-bg); --aq-cell-fg: var(--aq-coverage-level-5-fg); }
.aq-book-cell[data-level="6"] { --aq-cell-bg: var(--aq-coverage-level-6-bg); --aq-cell-fg: var(--aq-coverage-level-6-fg); }
.aq-book-cell[data-level="7"] { --aq-cell-bg: var(--aq-coverage-level-7-bg); --aq-cell-fg: var(--aq-coverage-level-7-fg); }
.aq-book-cell[data-level="8"] { --aq-cell-bg: var(--aq-coverage-level-8-bg); --aq-cell-fg: var(--aq-coverage-level-8-fg); box-shadow: none; font-weight: 700; }
.aq-coverage-grid.is-graded-grid .aq-book-cell:not(.is-filled) { position: relative; }
.aq-coverage-grid.is-graded-grid .aq-book-cell:not(.is-filled)::after, .aq-coverage-legend__step--na::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A vector line (stretched to the cell, constant 1px stroke) used as a mask,
     so the slash is anti-aliased instead of a stepped gradient edge. */
  background: var(--aq-color-border-control);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' preserveAspectRatio='none'%3E%3Cline x1='1' y1='23' x2='39' y2='1' stroke='black' stroke-width='1.25' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' preserveAspectRatio='none'%3E%3Cline x1='1' y1='23' x2='39' y2='1' stroke='black' stroke-width='1.25' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.aq-coverage-legend { display: flex; align-items: center; gap: 8px; font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); }
.aq-coverage-legend__steps { display: flex; gap: 2px; }
.aq-coverage-legend__step { width: 14px; height: 10px; border-radius: 2px; background: var(--aq-cell-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aq-color-coverage-filled) 40%, transparent); }
.aq-coverage-legend__step[data-level="0"] { --aq-cell-bg: var(--aq-color-coverage-empty-cell); box-shadow: none; }
.aq-coverage-legend__step--na { position: relative; --aq-cell-bg: var(--aq-color-coverage-empty-cell); box-shadow: none; }
.aq-coverage-legend__step[data-level="1"] { --aq-cell-bg: var(--aq-coverage-level-1-bg); }
.aq-coverage-legend__step[data-level="2"] { --aq-cell-bg: var(--aq-coverage-level-2-bg); }
.aq-coverage-legend__step[data-level="3"] { --aq-cell-bg: var(--aq-coverage-level-3-bg); }
.aq-coverage-legend__step[data-level="4"] { --aq-cell-bg: var(--aq-coverage-level-4-bg); }
.aq-coverage-legend__step[data-level="5"] { --aq-cell-bg: var(--aq-coverage-level-5-bg); }
.aq-coverage-legend__step[data-level="6"] { --aq-cell-bg: var(--aq-coverage-level-6-bg); }
.aq-coverage-legend__step[data-level="7"] { --aq-cell-bg: var(--aq-coverage-level-7-bg); }
.aq-coverage-legend__step[data-level="8"] { --aq-cell-bg: var(--aq-coverage-level-8-bg); box-shadow: none; }
.aq-book-cell:not(button) { cursor: default; }
.aq-book-cell[aria-expanded="true"] { outline: 2px solid var(--aq-color-text-primary); outline-offset: 1px; }

/* -------------------------------------------------------- resource card */
/*
 * One card per resource (never per resource x language). The whole card is
 * one link. Hover adds elevation-1 + darker hairline; no lift or scale.
 */
.aq-resource-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-raised);
  color: inherit;
  text-decoration: none;
}
a.aq-resource-card:hover, button.aq-resource-card:hover { border-color: var(--aq-color-border-default); box-shadow: var(--aq-elevation-1); }
.aq-resource-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; flex: 1; }
.aq-resource-card__purpose { color: var(--aq-color-text-secondary); }
.aq-resource-card__title { margin: 0; font: 600 17px/24px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-resource-card__publisher { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-resource-card .aq-coverage-summary { margin-block-start: 8px; }
.aq-resource-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-block-start: 1px solid var(--aq-color-border-subtle);
  white-space: nowrap;
}
.aq-resource-card__langs { display: flex; flex-shrink: 0; gap: 6px; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-resource-card__more { color: var(--aq-color-text-secondary); }
.aq-resource-card__formats { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); }

/* -------------------------------------------------------- language card */
/*
 * Native name leads, set in the language's own script (system fonts -- the
 * picker never loads script files). Every language string carries lang + dir.
 */
.aq-language-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  height: 112px;
  padding: 14px 14px 12px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-raised);
  color: inherit;
  text-decoration: none;
}
.aq-language-card:hover { border-color: var(--aq-color-border-default); box-shadow: var(--aq-elevation-1); }
.aq-language-card__native {
  font: 600 20px/28px system-ui, var(--aq-font-body);
  letter-spacing: -0.01em;
  color: var(--aq-color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aq-language-card__english { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-language-card__footer {
  margin-block-start: auto;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--aq-color-border-subtle);
  font: 400 13px/20px var(--aq-font-body);
  color: var(--aq-color-text-secondary);
}

/* ----------------------------------------------------- purpose nav item */
/*
 * Left nav on a language page. Empty shows "--" but stays visible -- gaps are
 * information.
 */
.aq-purpose-nav { display: flex; flex-direction: column; gap: 4px; }
.aq-purpose-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px; /* 40px per Figma; grows for a label that wraps */
  padding: 10px 12px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--aq-color-text-primary);
  font: 600 14px/20px var(--aq-font-body);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  --aq-icon-size: 16px;
}
.aq-purpose-nav-item:hover { background: var(--aq-color-action-hover); }
.aq-purpose-nav-item__label { flex: 1; min-width: 0; }
.aq-purpose-nav-item__count { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-tertiary); }
.aq-purpose-nav-item:is([aria-current="true"], .is-selected) { background: var(--aq-color-selected-bg); color: var(--aq-color-selected-text); }
.aq-purpose-nav-item:is([aria-current="true"], .is-selected) .aq-purpose-nav-item__count { color: var(--aq-color-selected-text); }
.aq-purpose-nav-item.is-empty { color: var(--aq-color-text-secondary); }

/* --------------------------------------------------------- purpose tile */
/* "Browse by purpose" tile on Home. Icon well is neutral -- icons never take color. */
.aq-purpose-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-raised);
  color: inherit;
  text-decoration: none;
}
.aq-purpose-tile:hover { border-color: var(--aq-color-border-default); box-shadow: var(--aq-elevation-1); }
.aq-purpose-tile__well {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--aq-radius-sm);
  background: var(--aq-color-surface-sunken);
  color: var(--aq-color-text-primary);
}
.aq-purpose-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aq-purpose-tile__title { font: 600 14px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-purpose-tile__blurb { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }

/* --------------------------------------------------------------- header */
/*
 * Solid page color + hairline (no blur -- costly on low-end phones).
 * Context=Language shows the working-language switcher. Active nav item uses
 * the surface/sunken pill.
 */
.aq-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--aq-header-height);
  padding-inline: 32px;
  border-block-end: 1px solid var(--aq-color-border-subtle);
  background: var(--aq-color-surface-page);
}
.aq-header__logo { display: block; flex-shrink: 0; line-height: 0; }
.aq-header__logo img { display: block; width: 82px; height: 32px; }
.aq-header__spacer { flex: 1; }
.aq-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--aq-radius-sm);
  background: transparent;
  color: var(--aq-color-text-primary);
  cursor: pointer;
  --aq-icon-size: 14px;
}
.aq-lang-switch:hover { background: var(--aq-color-action-hover); }
.aq-lang-switch__sep { font: 400 15px/24px var(--aq-font-body); color: var(--aq-color-text-tertiary); }
.aq-lang-switch__name { font: 600 14px/20px var(--aq-font-body); }
.aq-lang-switch__code { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-tertiary); }
.aq-header__nav { display: flex; gap: 4px; }
.aq-nav-item {
  padding: 8px 14px;
  border-radius: var(--aq-radius-full);
  color: var(--aq-color-text-secondary);
  font: 600 14px/20px var(--aq-font-body);
  text-decoration: none;
}
.aq-nav-item:hover { color: var(--aq-color-text-primary); }
.aq-nav-item[aria-current="page"] { background: var(--aq-color-surface-sunken); color: var(--aq-color-text-primary); }
.aq-header__cta { display: inline-flex; margin-inline-start: 8px; }
.aq-header__mobile-actions { display: none; gap: 20px; }
@media (max-width: 599px) {
  .aq-header { padding-inline: 16px; }
  .aq-header__nav { display: none; }
  .aq-header__cta { display: none; }
  .aq-header__mobile-actions { display: flex; }
}

/* ---------------------------------------------------- resource page blocks */
/* Parts row: a component part of a parent resource. Last row keeps its hairline. */
.aq-parts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-block-end: 1px solid var(--aq-color-border-subtle);
}
.aq-parts-row__name { font: 400 15px/24px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-parts-row__coverage { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); white-space: nowrap; }

/* License block: producer, exact license (linked), last updated, plus copy-ready attribution. */
.aq-license {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-sunken);
}
.aq-license__meta { display: flex; gap: 16px; padding: 4px 8px 0; }
.aq-license__field { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.aq-license__label { display: flex; align-items: center; gap: 6px; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-license__value { font: 600 14px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }
a.aq-license__value { text-decoration: underline; text-underline-offset: 2px; }
.aq-license__credit { display: flex; align-items: center; gap: 12px; }
.aq-license__credit-text {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--aq-radius-sm);
  background: var(--aq-color-surface-raised);
  font: 400 13px/20px var(--aq-font-body);
  color: var(--aq-color-text-primary);
}
@media (max-width: 599px) {
  .aq-license__meta { flex-direction: column; gap: 12px; }
  .aq-license__credit { flex-direction: column; align-items: stretch; }
}

/* -------------------------------------------------------------- gap row */
/* Not-yet-available row on a language page. Gray, never hidden. */
.aq-gap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-sunken);
  color: var(--aq-color-text-secondary);
  --aq-icon-size: 16px;
}
.aq-gap-row__message { flex: 1; min-width: 0; font: 400 15px/24px var(--aq-font-body); }
.aq-gap-row .aq-btn { color: var(--aq-color-text-primary); }
@media (max-width: 599px) {
  .aq-gap-row { flex-wrap: wrap; }
  .aq-gap-row .aq-btn { margin-inline-start: 16px; }
}

/* --------------------------------------------------------------- dialog */
/*
 * Radius lg, elevation-2, scrim surface/scrim @40%. Focus trap + Esc in
 * components.js. Below 600px it becomes a bottom sheet.
 */
.aq-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}
.aq-dialog-scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--aq-color-surface-scrim);
  opacity: var(--aq-scrim-opacity);
}
.aq-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px 24px;
  border-radius: var(--aq-radius-lg);
  background: var(--aq-color-surface-raised);
  box-shadow: var(--aq-elevation-2);
  color: var(--aq-color-text-primary);
}
.aq-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.aq-dialog__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aq-dialog__title { margin: 0; }
.aq-dialog__subtitle { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-dialog__head .aq-icon-btn { margin: -10px -12px 0 0; }
.aq-dialog__options { display: flex; flex-direction: column; gap: 8px; }
.aq-dialog__footer { display: flex; align-items: center; gap: 12px; }
.aq-dialog__meta { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-dialog__caption { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-dialog__well { padding: 16px; border-radius: var(--aq-radius-md); background: var(--aq-color-surface-sunken); }

@media (max-width: 599px) {
  .aq-dialog-scrim { place-items: end stretch; padding: 0; }
  .aq-dialog {
    max-width: none;
    max-height: 90vh;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-block-end: max(22px, env(safe-area-inset-bottom));
  }
}

/* Single-choice row in the Download dialog. Unavailable rows explain why. */
.aq-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-sm);
  cursor: pointer;
}
.aq-option-row input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin: 0;
  border: 1px solid var(--aq-color-border-control);
  border-radius: 50%;
  background: var(--aq-color-surface-raised);
  cursor: inherit;
}
.aq-option-row input:checked { border: 5px solid var(--aq-color-selected-text); }
.aq-option-row input:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.aq-option-row:has(input:checked) { background: var(--aq-color-selected-bg); border-color: var(--aq-color-selected-border); }
.aq-option-row__label { flex: 1; min-width: 0; font: 600 14px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-option-row__meta { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); white-space: nowrap; }
.aq-option-row:has(input:disabled) { cursor: not-allowed; }
.aq-option-row:has(input:disabled) input { opacity: 0.4; }
.aq-option-row:has(input:disabled) .aq-option-row__label { color: var(--aq-color-text-tertiary); }

/* Share link. The URL preserves resource + language. */
.aq-link-field { display: flex; align-items: center; gap: 8px; }
.aq-link-field__url {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--aq-radius-full);
  background: var(--aq-color-surface-sunken);
  color: var(--aq-color-text-primary);
  font: 400 12px/16px var(--aq-font-data);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Link-unfurl preview inside the share dialog. */
.aq-unfurl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(300px, 100%);
  margin-inline-start: auto;
  padding: 10px 12px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-sm);
  background: var(--aq-color-surface-raised);
}
.aq-unfurl__host { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-tertiary); }
.aq-unfurl__title { font: 600 14px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }
.aq-unfurl__desc { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }

/* ------------------------------------------------- page-level patterns */
/* Section head: heading + optional quiet action (Home, Language page). */
.aq-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aq-section-head__titles { display: flex; flex-direction: column; gap: 2px; }
.aq-section-head__titles h2, .aq-section-head__titles h3 { margin: 0; }
.aq-section-head__desc { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.aq-divider { height: 1px; border: 0; margin: 0; background: var(--aq-color-border-subtle); }

/*
 * Tinted surface. Cards (resource card, purpose tile, and page banners that
 * opt in) sitting on surface/tint drop their hairline for elevation-1;
 * hover steps up to elevation-2 so it still reads against the resting
 * shadow. Cards on surface/page keep the bordered style. Applied by context
 * (an ancestor), so any card placed on tint picks it up with no prop.
 */
.aq-surface-tint { background: var(--aq-color-surface-tint); }
.aq-surface-tint :is(.aq-resource-card, .aq-purpose-tile) {
  border-color: transparent;
  box-shadow: var(--aq-elevation-1);
}
.aq-surface-tint :is(a.aq-resource-card, button.aq-resource-card, .aq-purpose-tile):hover {
  border-color: transparent;
  box-shadow: var(--aq-elevation-2);
}