/*
 * Page-level layout. Components come from
 * /design-system/components.css; this file only arranges them. Bind to --aq-* tokens.
 */

#next-main { padding-block: 48px 96px; outline: none; }
@media (max-width: 599px) { #next-main { padding-block: 28px 64px; } }

.next-skip {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: -48px;
  z-index: 30;
  padding: 8px 14px;
  border-radius: var(--aq-radius-full);
  background: var(--aq-color-action-primary);
  color: var(--aq-color-text-inverse);
  font: 600 14px/20px var(--aq-font-body);
}
.next-skip:focus { inset-block-start: 10px; }

.next-stack { display: flex; flex-direction: column; gap: 24px; }
.next-stack > .aq-btn { align-self: flex-start; }
.next-stack > .aq-btn--quiet { margin-inline-start: -14px; } /* label aligns with the text column */
.next-page-head { display: flex; flex-direction: column; gap: 6px; }
.next-page-head h1 { margin: 0; }
.next-page-head h1:focus { outline: none; } /* focused programmatically on navigation, for screen readers */
.next-page-head p { margin: 0; color: var(--aq-color-text-secondary); }
@media (max-width: 599px) {
  .next-page-head .aq-t-display { font-size: 30px; line-height: 36px; } /* aq/display-mobile */
}
.next-overline { color: var(--aq-color-text-secondary); }

.next-placeholder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px dashed var(--aq-color-border-default);
  border-radius: var(--aq-radius-md);
  color: var(--aq-color-text-secondary);
}
.next-placeholder dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.next-placeholder dt { font: 400 12px/20px var(--aq-font-data); color: var(--aq-color-text-tertiary); }
.next-placeholder dd { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }

/* Language picker dialog. */
.next-lang-list { display: flex; flex-direction: column; gap: 4px; max-height: min(420px, 55vh); overflow: auto; margin-inline: -8px; padding-inline: 8px; }
.next-lang-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--aq-radius-sm);
  background: transparent;
  color: var(--aq-color-text-primary);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.next-lang-option:hover { background: var(--aq-color-action-hover); }
.next-lang-option:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.next-lang-option[aria-current="true"] { background: var(--aq-color-selected-bg); border-color: var(--aq-color-selected-border); color: var(--aq-color-selected-text); }
.next-lang-option__native { font: 600 15px/24px system-ui, var(--aq-font-body); }
.next-lang-option__english { flex: 1; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-lang-option[aria-current="true"] .next-lang-option__english { color: inherit; }
.next-lang-option__meta { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-tertiary); white-space: nowrap; }
.next-lang-empty { padding: 12px; color: var(--aq-color-text-secondary); font: 400 13px/20px var(--aq-font-body); }

.next-status { min-height: 40px; }

.next-mobile-only { display: none !important; }
@media (max-width: 599px) {
  .next-desktop-only { display: none !important; }
  .next-mobile-only { display: flex !important; }
}

/* ------------------------------------------------------------------ Home */
/* Figma "Home — Desktop" 517:6 / "Home — Mobile" 523:6. */

#next-main.next-main--flush { padding-block: 0; }

.next-hero { background: var(--aq-color-surface-page); }
.next-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 72px 56px; text-align: center; }
.next-hero__title {
  max-width: 640px;
  margin: 0;
  font: 500 48px/56px var(--aq-font-display);
  letter-spacing: -0.02em;
  color: var(--aq-color-text-brand);
}
.next-hero__title:focus { outline: none; }
.next-hero__sub { max-width: 520px; margin: 0; font: 400 17px/26px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-hero__search { width: 100%; max-width: 476px; margin-block-start: 8px; }

.next-home-body { display: flex; flex-direction: column; gap: 56px; padding-block: 48px 80px; }
.next-home-section { display: flex; flex-direction: column; gap: 16px; }
.next-home-section .aq-section-head { min-height: 36px; }
.next-home-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.next-home-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.next-originals {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-raised);
}
.aq-surface-tint .next-originals { border-color: transparent; box-shadow: var(--aq-elevation-1); }
.next-originals__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.next-originals__desc { color: var(--aq-color-text-secondary); }
.next-originals__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }


/* ---------------------------------------------------------------- Strata */
/* Figma 573:2769. Stratum 1 is the language index; 2-5 are decorative rows. */

.next-strata {
  overflow: hidden; /* the tracks are wider than the page; never scroll it */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--aq-color-surface-tint) 0%, transparent), var(--aq-color-surface-tint));
}
.next-stratum { position: relative; overflow: hidden; }
.next-strata:not(.is-entered) .next-stratum {
  animation: next-strata-in var(--aq-motion-enter-duration) var(--aq-motion-ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--aq-motion-enter-stagger));
}
@keyframes next-strata-in {
  from { opacity: 0; transform: translate3d(0, var(--aq-motion-enter-distance), 0); }
}

.next-stratum--1 { padding-block: 20px; }
.next-stratum__row { display: flex; align-items: center; gap: 32px; }
.next-stratum__langs { display: flex; flex: 1; align-items: center; gap: 32px; min-width: 0; }
.next-stratum__lang {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  border-radius: var(--aq-radius-xs);
  color: var(--aq-color-text-primary);
  text-decoration: none;
  transition: color var(--aq-motion-fast);
}
.next-stratum__endonym { font: 400 20px/28px var(--aq-font-body); text-decoration: underline transparent; text-underline-offset: 4px; transition: text-decoration-color var(--aq-motion-fast); }
.next-stratum__count { color: var(--aq-color-text-tertiary); }
.next-stratum__lang:hover { color: var(--aq-color-selected-text); }
.next-stratum__lang:hover .next-stratum__endonym { text-decoration-color: currentColor; }
.next-stratum__lang:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.next-stratum__all { flex-shrink: 0; }

/* Decorative layers: lower = larger, fainter, slower. */
.next-stratum--2, .next-stratum--3, .next-stratum--4, .next-stratum--5 {
  display: flex;
  align-items: center;
  border-block-start: 1px solid color-mix(in srgb, var(--aq-color-border-brand) var(--hair), transparent);
  pointer-events: none;
  user-select: none;
  color: var(--aq-color-text-tertiary);
  font-size: var(--size);
  height: var(--h);
  opacity: var(--layer-opacity, 1);
}
.next-stratum--2 { --h: 62px; --size: 22px; --gap: 48px; --hair: 80%; color: var(--aq-color-text-secondary); }
.next-stratum--3 { --h: 70px; --size: 24px; --gap: 56px; --hair: 60%; }
.next-stratum--4 { --h: 78px; --size: 26px; --gap: 64px; --hair: 40%; --layer-opacity: 0.55; }
.next-stratum--5 { --h: 86px; --size: 28px; --gap: 72px; --hair: 20%; --layer-opacity: 0.28; }
.next-stratum__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap);
  padding-inline-end: var(--gap); /* the seam between the two halves matches the gap */
  width: max-content;
  transform: translate3d(var(--x0, 0), 0, 0);
  animation: next-drift-left var(--dur, 120s) linear infinite;
  will-change: transform;
}
.next-stratum__name { flex-shrink: 0; font: 400 var(--size)/1.36 var(--aq-font-body); white-space: nowrap; }
.next-strata.is-paused .next-stratum__track { animation-play-state: paused; }
@keyframes next-drift-left {
  from { transform: translate3d(var(--x0, 0), 0, 0); }
  to { transform: translate3d(calc(var(--x0, 0px) - 50%), 0, 0); }
}
@keyframes next-drift-right {
  from { transform: translate3d(calc(var(--x0, 0px) - 50%), 0, 0); }
  to { transform: translate3d(var(--x0, 0), 0, 0); }
}

/* The right Noto face per script (the catalog's endonyms, not a fixed list). */
.next-stratum :lang(hi), .next-stratum :lang(ne) { font-family: "Noto Sans Devanagari", var(--aq-font-body); }
.next-stratum :lang(gu) { font-family: "Noto Sans Gujarati", var(--aq-font-body); }
.next-stratum :lang(ar), .next-stratum :lang(fa) { font-family: "Noto Sans Arabic", var(--aq-font-body); }
.next-stratum :lang(he) { font-family: "Noto Sans Hebrew", var(--aq-font-body); }
.next-stratum :lang(zh-Hant) { font-family: "Noto Sans TC", var(--aq-font-body); }
.next-stratum :lang(zh-Hans) { font-family: "Noto Sans SC", var(--aq-font-body); }

@media (max-width: 767px) {
  .next-hero__title { font-size: 30px; line-height: 36px; } /* aq/display-mobile */
  .next-hero__search { max-width: none; }
  /* Stratum 1 scrolls sideways instead of wrapping; only layers 2-3 show. */
  .next-stratum__row { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .next-stratum__row::-webkit-scrollbar { display: none; }
  .next-stratum__langs { flex: none; gap: 24px; }
  .next-stratum--4, .next-stratum--5 { display: none; }
}

/* Reduced motion: nothing moves; layers sit at their offset positions. */
@media (prefers-reduced-motion: reduce) {
  .next-stratum, .next-strata:not(.is-entered) .next-stratum { animation: none; }
  .next-stratum__track { animation: none !important; will-change: auto; }
  .next-stratum__lang, .next-stratum__endonym { transition: none; }
}

@media (max-width: 1023px) {
  .next-home-featured, .next-home-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .next-hero__inner { align-items: flex-start; gap: 12px; padding-block: 28px 0; text-align: start; }
  .next-hero__title { font-size: 30px; line-height: 36px; } /* aq/display-mobile */
  .next-hero__sub { font-size: 15px; line-height: 24px; }
  .next-hero__sub-more { display: none; } /* mobile copy is the short form */
  .next-hero__search { max-width: none; margin-block-start: 0; }
  /* Mobile uses the Default search field: no shadow, no Search button. */
  .next-hero .aq-search--hero { height: 48px; padding-inline: 18px; box-shadow: none; }
  .next-hero .aq-search--hero .aq-btn { display: none; }

  .next-home-body { gap: 28px; padding-block-start: 28px; }
  .next-home-section { gap: 12px; }
  .next-home-section .aq-section-head { min-height: 0; }
  .next-home-featured, .next-home-types { grid-template-columns: 1fr; }
  .next-home-featured > :nth-child(n + 2) { display: none; }
  .next-originals { flex-direction: column; align-items: stretch; }
  .next-originals__chips { justify-content: flex-start; gap: 8px; }
}

/* -------------------------------------------------------- Language page */
/* Figma 518:477 (desktop), 523:303 (mobile), 522:2484 (thin). */

.next-lang-head {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding-block-end: 28px;
  border-block-end: 1px solid var(--aq-color-border-subtle);
}
.next-lang-head .next-page-head { flex: 1; min-width: 0; }
.next-lang-head__actions { display: flex; gap: 24px; }

.next-lang { display: flex; flex-direction: column; gap: 28px; padding-block-start: 4px; }
.next-lang-columns { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.next-lang-nav { position: sticky; inset-block-start: calc(var(--aq-header-height) + 24px); }
.next-lang-nav .aq-purpose-nav-item { width: 100%; }
.next-lang-groups { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.next-lang-group { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--aq-header-height) + 24px); }
.next-lang-gap { scroll-margin-top: calc(var(--aq-header-height) + 24px); }
.next-lang-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.next-lang-subhead { margin-block-start: 6px; }
.next-lang-chips { display: none; }
.aq-chip.is-empty:not([aria-pressed="true"]) { border-color: var(--aq-color-border-subtle); color: var(--aq-color-action-disabled-text); }

.next-lang--thin { gap: 28px; }
.next-lang--thin .next-lang-cards { gap: 16px; }
.next-lang-missing { display: flex; flex-direction: column; gap: 8px; }
.next-lang-missing > .next-overline { margin-block-end: 0; }
.next-lang-others { display: flex; flex-direction: column; gap: 10px; }
.next-lang-others h2 { margin: 0; }

/* Kit dialog list. */
.next-kit-list { display: flex; flex-direction: column; max-height: min(420px, 50vh); overflow: auto; }
.next-kit-row { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-block-end: 1px solid var(--aq-color-border-subtle); }
.next-kit-row__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.next-kit-row__name { font: 600 14px/20px var(--aq-font-body); color: var(--aq-color-text-primary); }
.next-kit-row__meta { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-kit-row__size { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); white-space: nowrap; }
.next-kit-row__links { display: flex; gap: 6px; }

@media (max-width: 1023px) {
  .next-lang-columns { grid-template-columns: 1fr; }
  .next-lang-nav { display: none; }
  .next-lang-chips { display: flex; }
}
@media (max-width: 599px) {
  .next-lang-head { flex-direction: column; align-items: stretch; gap: 16px; padding-block-end: 0; border-block-end: 0; }
  .next-lang-head__actions .aq-btn { flex: 1; }
  .next-lang-cards { grid-template-columns: 1fr; gap: 12px; }
  .next-lang-groups { gap: 28px; }
  .next-lang-group { gap: 12px; }
  .next-lang-group .aq-section-head__desc { display: none; }
  .next-kit-row { flex-wrap: wrap; }
}

/* -------------------------------------------------------- Resource page */
/* Figma 519:1190 (desktop), 523:579 (mobile). One 760px column. */

.next-res { display: flex; flex-direction: column; max-width: 760px; margin-inline: auto; }
.next-res-back { align-self: flex-start; margin-inline-start: -14px; margin-block-end: 4px; }

.next-res-head { display: flex; align-items: flex-start; gap: 24px; padding-block: 12px 28px; }
.next-res-head__titles { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.next-res-head__actions { display: flex; gap: 8px; }
.next-res-title { margin: 0; }
.next-res-title:focus { outline: none; }
.next-res-title__lang { color: var(--aq-color-text-secondary); }
.next-res-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.next-res-meta { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); white-space: pre-wrap; }

.next-res-section { display: flex; flex-direction: column; gap: 14px; padding-block: 24px; border-block-start: 1px solid var(--aq-color-border-subtle); scroll-margin-top: calc(var(--aq-header-height) + 16px); }
.next-res-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.next-res-section__head h2 { margin: 0; }
.next-res-section__aside, .next-res-section__note { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-res-loading { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-tertiary); }

.next-res-coverage__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.next-res-coverage__head h2 { margin: 0; }
.next-res-coverage__context { flex: 1; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-res-coverage__line { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-tertiary); }
.next-res-coverage { display: flex; flex-direction: column; gap: 16px; }

.next-book-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--aq-radius-md); background: var(--aq-color-surface-sunken); }
.next-extras { display: flex; flex-direction: column; gap: 12px; margin-block-start: 20px; }
.next-extras h3 { margin: 0; }
.next-book-panel__hint { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-book-panel__head { display: flex; align-items: baseline; gap: 10px; }
.next-book-panel__pct { font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); }

.next-files { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.next-files__empty { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-files__multi > summary { list-style: none; }
.next-files__multi > summary::-webkit-details-marker { display: none; }
.next-files__multi[open] > summary { background: var(--aq-color-selected-bg); border-color: var(--aq-color-selected-border); color: var(--aq-color-selected-text); }
.next-files__list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; margin: 8px 0 0; padding: 8px 12px; border-radius: var(--aq-radius-sm); background: var(--aq-color-surface-raised); list-style: none; }
.next-files__list li { display: flex; justify-content: space-between; gap: 12px; font: 400 12px/20px var(--aq-font-data); }
.next-files__list a { color: var(--aq-color-text-primary); }
.next-files__size { color: var(--aq-color-text-tertiary); white-space: nowrap; }

.next-parts { display: flex; flex-direction: column; }
.next-group-cell { width: auto; min-width: 40px; padding: 0 6px; }
.next-part > summary { cursor: pointer; list-style: none; }
.next-part > summary::-webkit-details-marker { display: none; }
.next-part > summary:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.next-part > summary:hover .aq-parts-row__name { text-decoration: underline; }
.next-part[open] > .next-files { padding-block: 12px; }
.next-parts + .aq-btn { align-self: flex-start; margin-block-start: 12px; }

.next-adapt-wrap { display: flex; flex-direction: column; gap: 4px; margin-block-start: 12px; }
.next-adapt { font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-adapt p { margin: 0 0 6px; }
.next-statement a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.next-adapt a { color: var(--aq-color-text-primary); }
#license .aq-notice { margin-block-start: 12px; }

.next-res-sticky {
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  gap: 8px;
  margin-block-start: 16px;
  margin-inline: calc(-1 * var(--aq-page-margin)); /* edge to edge, as in Figma 523:888 */
  padding: 12px 16px max(20px, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--aq-color-border-subtle);
  background: var(--aq-color-surface-raised);
}
.next-res-sticky .aq-btn--primary { flex: 1; }

/* QR well in the share dialog. */
.next-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.next-qr__code { width: 180px; height: 180px; padding: 8px; border-radius: var(--aq-radius-sm); background: #ffffff; } /* QR stays dark-on-white in every theme so it scans */
.next-qr__code svg { display: block; width: 100%; height: 100%; }
.next-dl-parts { display: flex; flex-direction: column; gap: 8px; }
.next-dl-parts:empty { display: none; }
.next-dl-group { margin-block-start: 8px; }

/* --- Preview module (static/shared/preview.js, aligned.js, audio.js) restyled
   with design-system tokens. Class names are the module's own. */
.next-preview .preview { display: flex; flex-direction: column; gap: 12px; height: auto; }
.next-preview .preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.next-preview .preview-lookup, .next-preview .preview-nav, .next-preview .preview-view-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.next-preview .preview-input, .next-preview .preview-select {
  height: 36px;
  padding-inline: 14px;
  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: 400 14px/20px var(--aq-font-body);
}
.next-preview .preview-input { width: 16rem; max-width: 100%; }
.next-preview .preview-input:focus-visible, .next-preview .preview-select:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.next-preview .preview-nav-btn {
  height: 36px;
  padding-inline: 14px;
  border: 1px solid var(--aq-color-action-secondary-border);
  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);
  cursor: pointer;
}
.next-preview .preview-nav-btn:hover:not(:disabled) { background: var(--aq-color-action-hover); }
.next-preview .preview-nav-btn:disabled { cursor: not-allowed; border-color: var(--aq-color-border-subtle); color: var(--aq-color-action-disabled-text); }
.next-preview .preview-nav-btn:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.next-preview .preview-view-toggle .preview-nav-btn.active { background: var(--aq-color-selected-bg); border-color: var(--aq-color-selected-border); color: var(--aq-color-selected-text); }
.next-preview .preview-position { min-width: 4rem; text-align: center; font: 400 12px/16px var(--aq-font-data); color: var(--aq-color-text-secondary); }
.next-preview .preview-message { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-preview .preview-message:empty { display: none; }
.next-preview .preview-body {
  max-height: 70vh;
  overflow-y: auto;
  padding: 18px 20px;
  border: 1px solid var(--aq-color-border-subtle);
  border-radius: var(--aq-radius-md);
  background: var(--aq-color-surface-raised);
  font: 400 15px/24px var(--aq-font-body);
  color: var(--aq-color-text-primary);
}
.next-preview .preview-body.loading { opacity: 0.5; }
.next-preview .preview-title { margin: 0 0 8px; font: 600 16px/24px var(--aq-font-body); }
.next-preview .preview-content img { max-width: 100%; height: auto; }
.next-preview .preview-content a { color: var(--aq-color-text-primary); text-decoration: underline; }
.next-preview .preview-content data.bible-ref { border-block-end: 1px dotted var(--aq-color-text-tertiary); }
.next-preview .preview-content table { border-collapse: collapse; }
.next-preview .preview-content td, .next-preview .preview-content th { padding: 4px 8px; border: 1px solid var(--aq-color-border-default); }
.next-preview .preview-verses { line-height: 1.9; }
.next-preview .preview-vnum { margin: 0 3px 0 6px; vertical-align: super; font: 400 10px/1 var(--aq-font-data); color: var(--aq-color-text-tertiary); }
.next-preview .preview-vnum:first-child { margin-inline-start: 0; }
.next-preview .preview-chapter-label { margin: 12px 0 4px; font: 600 11px/16px var(--aq-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aq-color-text-secondary); }
.next-preview .al-cell { display: inline-block; min-width: 1.2em; padding: 1px 4px; vertical-align: top; text-align: center; }
.next-preview .al-tgt { display: block; min-height: 1.2em; margin-block-end: 2px; }
.next-preview .al-src { display: block; font-size: 90%; color: var(--aq-color-text-secondary); }
.next-preview .al-arr, .next-preview .al-punct, .next-preview .al-neq, .next-preview .al-unaligned { color: var(--aq-color-text-tertiary); }
.next-preview .al-tri { font-size: 90%; vertical-align: 1px; }
.next-preview .al-sub { font-size: 60%; }
.next-preview .audio-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--aq-radius-full); background: var(--aq-color-surface-sunken); font: 400 12px/16px var(--aq-font-data); }
.next-preview .audio-bar[hidden] { display: none; }
.next-preview .audio-btn { height: 30px; padding-inline: 12px; border: 1px solid var(--aq-color-action-secondary-border); 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); cursor: pointer; }
.next-preview .audio-scrub { flex: 1; min-width: 0; accent-color: var(--aq-color-coverage-filled); cursor: pointer; }
.next-preview .audio-verse { min-width: 2.5em; font-weight: 700; color: var(--aq-color-selected-text); }
.next-preview .audio-time { color: var(--aq-color-text-secondary); font-variant-numeric: tabular-nums; }
.next-preview .audio-active { border-radius: 2px; background: var(--aq-color-selected-bg); }

@media (max-width: 599px) {
  .next-res-head { padding-block: 8px 20px; }
  .next-res-title { font-size: 24px; line-height: 30px; } /* aq/title-mobile */
  .next-res-section__head { flex-direction: column; gap: 2px; }
  .next-res-section__aside { display: none; }
  .next-preview .preview-body { max-height: none; padding: 14px; }
}
/* preview.js toggles parts with the `hidden` attribute; keep that winning over the display rules above. */
.next-preview [hidden] { display: none !important; }

/* ---------------------------------------------------------------- Browse */
/* Figma 521:2191: search across the top; filters 232px | results. */

.next-browse { display: flex; flex-direction: column; gap: 28px; }
.next-browse-columns { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }
.next-browse-filters > summary { display: none; }
.next-browse-filters__body { display: flex; flex-direction: column; gap: 28px; }
.next-browse-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.next-browse-group legend { margin-block-end: 6px; padding: 0; }
.next-browse-group__options { display: flex; flex-direction: column; }
.next-browse-group__options .aq-checkbox { display: flex; }
.next-browse-group__options .aq-checkbox > span:not(.aq-checkbox__count) { min-width: 0; }
.next-browse-group__options .aq-checkbox.is-zero { color: var(--aq-color-text-tertiary); }
.next-browse-group .aq-btn--quiet { align-self: flex-start; margin-inline-start: -14px; }
.next-browse-group__note { margin: 0; font: 400 13px/20px var(--aq-font-body); color: var(--aq-color-text-secondary); }
.next-browse-group__note--warn { color: var(--aq-color-signal-warning-text); }
.next-browse-group .aq-chip-row { gap: 6px; }
.next-browse-book { height: 48px; }
.next-browse-book__input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: 400 15px/24px var(--aq-font-body); }
.next-browse-book__input:focus { outline: none; }
.next-browse-book__input::placeholder { color: var(--aq-color-text-tertiary); opacity: 1; }
.next-browse-more { display: flex; flex-direction: column; gap: 20px; padding-block-start: 20px; border-block-start: 1px solid var(--aq-color-border-subtle); }
.next-browse-more > summary { cursor: pointer; }
.next-browse-more[open] > summary { margin-block-end: 20px; }
.next-browse-more > summary:focus-visible { outline: 2px solid var(--aq-color-border-focus); outline-offset: 2px; }
.next-browse-more > .next-browse-group + .next-browse-group { margin-block-start: 20px; }

.next-browse-results { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.next-browse-title { margin: 0; }
.next-browse-title:focus { outline: none; }
.next-browse-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--aq-color-text-secondary); }
.next-browse-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-self: stretch; align-items: start; }
.next-browse-results > .aq-notice { align-self: stretch; }

@media (max-width: 1023px) {
  .next-browse-columns { grid-template-columns: 1fr; gap: 20px; }
  .next-browse-filters > summary { display: inline-flex; list-style: none; }
  .next-browse-filters > summary::-webkit-details-marker { display: none; }
  .next-browse-filters[open] > summary { margin-block-end: 20px; background: var(--aq-color-selected-bg); border-color: var(--aq-color-selected-border); color: var(--aq-color-selected-text); }
  .next-browse-filters__body { padding: 20px; border: 1px solid var(--aq-color-border-subtle); border-radius: var(--aq-radius-md); background: var(--aq-color-surface-raised); }
}
@media (max-width: 599px) {
  .next-browse { gap: 20px; }
  .next-browse-cards { grid-template-columns: 1fr; gap: 12px; }
  .next-browse-results .aq-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .next-browse-results .aq-segmented::-webkit-scrollbar { display: none; }
}

/* Catalog-error banner and footer (theme + API key link). */
.next-catalog-warning { margin-block-end: 24px; }
#next-main.next-main--flush .next-catalog-warning { margin-block: 16px 0; }
.next-footer { border-block-start: 1px solid var(--aq-color-border-subtle); }
.next-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 20px 28px; }
.next-footer__theme { display: flex; align-items: center; gap: 10px; color: var(--aq-color-text-secondary); }
.next-footer__note { color: var(--aq-color-text-secondary); }
.next-footer__note a { color: var(--aq-color-text-primary); }
#next-main { min-height: calc(100vh - var(--aq-header-height) - 80px); }
.next-footer__link { padding: 0; border: 0; background: none; color: var(--aq-color-text-secondary); text-decoration: underline; cursor: pointer; font-family: inherit; }
.next-footer__link:hover { color: var(--aq-color-text-primary); }