/* ============================================================================
   FAQ — a reference page, read top down.

   What was here: a hidden decorative bitcoin glyph carrying a hardcoded
   #f7931a and an Arial ₿ (Arial exists nowhere else in this system), and a
   list whose every answer was a lone YouTube iframe. There was no text to
   scan, search, print, or read on a slow connection, and the page emitted
   FAQPage structured data whose acceptedAnswer was a fixed sentence telling
   the reader to go watch a video. The answer is now text; the video is the
   companion the text can afford to have.

   The accordion is <details>. The open/close, the keyboard and find-in-page
   are the browser's, so the page is fully usable with no JavaScript at all;
   the controller adds only what long lists need — a query, a section filter,
   expand-all, and a player mounted on click rather than on page load.

   Namespaced .faq* throughout, and it names nothing generic: this sheet loads
   on every page from the layout's ordered cascade, and the sheets that got
   this wrong (admin.css, the pre-pass ranking.css) are why the cascade is
   explicit in the first place.
   ========================================================================= */

.faq {
  padding-block: var(--sp-10) var(--sp-20);

  /* <details> animates its content box to `auto`, which is not an
     interpolable length without this. Declared on the surface rather than on
     :root so one page's accordion does not change how the whole site
     interpolates keywords. */
  interpolate-size: allow-keywords;
}

/* Narrower than `.container--narrow`, because everything on this page is
   measured against the answer: the prose caps at 68ch, and a 960px frame
   leaves a third of every row empty to the end of the line. Sized so the row
   is the reading measure plus its own padding. */
.faq .faq__frame {
  max-width: 52rem;
}

/* ---------------------------------------------------------------------------
   Head — states the page, does not stage it.
   ------------------------------------------------------------------------ */

.faq__head {
  margin-block-end: var(--sp-8);
}

.faq__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
}

.faq__lede {
  color: var(--ink-300);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Tools — query and expand-all.

   Rendered `hidden` and revealed by the controller on connect: a search field
   that cannot search is worse than no search field. Wraps rather than
   compressing, because "Expandir todas" is a long label in five of the six
   locales and squeezing the input to fit it is the wrong trade.
   ------------------------------------------------------------------------ */

.faq__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}

.faq__tools[hidden] {
  display: none;
}

.faq__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 15rem;
  min-inline-size: 0;
}

.faq__search-icon {
  position: absolute;
  inset-inline-start: var(--sp-3);
  color: var(--ink-400);
  pointer-events: none;
}

.faq__search-input {
  inline-size: 100%;
  /* The icon is 14px and sits at sp-3; the text clears both. */
  padding: 0.5rem var(--sp-3);
  padding-inline-start: calc(var(--sp-3) * 2 + 14px);
  padding-inline-end: calc(var(--sp-2) * 2 + 26px);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink-050);
  background: var(--ink-800);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

/* ink-400 is 5.0:1 on the page ground but 4.31:1 on the input fill. */
.faq__search-input::placeholder {
  color: var(--ink-300);
}

/* The UA's own clear affordance, replaced by ours so it can be labelled and
   take the system focus ring. */
.faq__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.faq__search-input:hover {
  border-color: var(--line-hard);
}

.faq__search-input:focus-visible {
  outline: none;
  background: var(--ink-850);
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.faq__search-clear {
  position: absolute;
  inset-inline-end: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  color: var(--ink-400);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.faq__search-clear[hidden] {
  display: none;
}

.faq__search-clear:hover {
  color: var(--ink-050);
  background: var(--ink-750);
}

.faq__search-clear:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.faq__expand {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Section filter.

   Pills that wrap, not a scrolling tab rail: a rail needs an edge fade to
   admit it is scrollable, and an edge fade is written in a physical direction
   that fades the wrong side under `dir="rtl"`. Selection is a fill step and a
   harder edge, never the accent — the same way the mobile drawer draws its
   current row. Orange is money here.
   ------------------------------------------------------------------------ */

.faq__rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-8);
}

.faq__rail[hidden] {
  display: none;
}

.faq__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.375rem 0.6875rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-300);
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.faq__filter:hover {
  color: var(--ink-100);
  background: var(--ink-800);
  border-color: var(--line-hi);
}

.faq__filter[aria-pressed="true"] {
  color: var(--ink-050);
  background: var(--ink-750);
  border-color: var(--line-hard);
}

.faq__filter:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.faq__filter-count {
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

.faq__filter[aria-pressed="true"] .faq__filter-count {
  color: var(--ink-200);
}

/* ---------------------------------------------------------------------------
   Sections — a micro-label, a rule to the end of the measure, a count.
   ------------------------------------------------------------------------ */

.faq__group[hidden] {
  display: none;
}

.faq__group + .faq__group {
  margin-block-start: var(--sp-10);
}

.faq__group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}

.faq__group-title {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-300);
}

.faq__group-rule {
  flex: 1;
  block-size: 1px;
  background: var(--line);
}

.faq__group-count {
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

/* ---------------------------------------------------------------------------
   The list.

   One panel per section, hairline-separated rows. The panel is not clipped:
   the focus ring sits 4px outside the summary and `overflow: hidden` here
   would eat it. Instead the row's own hover fill and ring carry the panel's
   radius, so a highlighted row nests inside the corners rather than
   overrunning them.
   ------------------------------------------------------------------------ */

.faq__panel {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.faq__item {
  border-block-end: 1px solid var(--line);
}

/* The last row still showing after a filter carries no rule: the panel's own
   border is already directly beneath it. `:has()` re-resolves this on every
   filter pass, so the controller never has to mark which row is last. */
.faq__item:not(:has(~ .faq__item:not([hidden]))) {
  border-block-end-color: transparent;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-050);
  border-radius: calc(var(--r-lg) - 1px);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-1) var(--ease);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  background: var(--ink-800);
}

.faq__q:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.faq__q-text {
  text-wrap: pretty;
}

.faq__chev {
  flex-shrink: 0;
  color: var(--ink-400);
  transition: transform var(--dur-2) var(--ease-out),
    color var(--dur-1) var(--ease);
}

.faq__q:hover .faq__chev {
  color: var(--ink-200);
}

.faq__item[open] > .faq__q .faq__chev {
  color: var(--ink-100);
  transform: rotate(180deg);
}

/* The one authored moment on this page: the row grows to the height of its
   own answer while the answer settles into it. Browsers without
   ::details-content simply open instantly, which is not a defect. */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dur-3) var(--ease-out),
    content-visibility var(--dur-3) var(--ease-out) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-5);
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--dur-3) var(--ease-out),
    translate var(--dur-3) var(--ease-out);
}

@starting-style {
  .faq__item[open] > .faq__a {
    opacity: 0;
    translate: 0 -6px;
  }
}

/* ---------------------------------------------------------------------------
   The answer.
   ------------------------------------------------------------------------ */

.faq__prose {
  max-width: var(--w-prose);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-100);
}

.faq__prose p {
  margin: 0;
  text-wrap: pretty;
}

.faq__prose p + p {
  margin-block-start: var(--sp-3);
}

.faq__prose strong {
  font-weight: 600;
  color: var(--ink-050);
}

/* Underlined at rest, not on hover: inside a paragraph, colour alone is the
   one cue a colour-blind reader does not get. */
.faq__prose a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 0.2em;
}

.faq__prose a:hover {
  color: var(--accent-hi);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   The video.

   A control, not a media block. Twelve collapsed iframes on a reference page
   is a third-party request per question for a visitor who may open none, so
   the player is built on click. The id is shown because this is a site where
   the machine value is worth seeing.
   ------------------------------------------------------------------------ */

.faq__video {
  max-width: var(--w-prose);
}

.faq__video-cue {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-100);
  text-align: start;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.faq__video-cue:hover {
  background: var(--ink-800);
  border-color: var(--line-hard);
}

.faq__video-cue:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* The triangle points along the timeline, not along the text: it stays
   pointing the same way under `dir="rtl"`. */
.faq__video-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 28px;
  block-size: 28px;
  color: var(--ink-100);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-full);
}

.faq__video-cue:hover .faq__video-glyph {
  border-color: var(--line-hard);
}

.faq__video-label {
  flex: 1;
  min-inline-size: 0;
}

.faq__video-id {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

.faq__video-close {
  display: inline-flex;
  align-items: center;
  margin-block-end: var(--sp-2);
  padding: 0.3125rem 0.625rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-200);
  background: var(--ink-800);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.faq__video-close:hover {
  color: var(--ink-050);
  background: var(--ink-750);
}

.faq__video-close:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.faq__video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq__video-stage iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Nothing to show.

   Both cases sit in the same panel the questions would have occupied, so the
   page keeps its shape instead of dropping one grey sentence into a viewport
   of nothing, and both name the way forward.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   ≥768px
   ------------------------------------------------------------------------ */

@media (min-width: 768px) {
  .faq {
    padding-block: var(--sp-12) var(--sp-24);
  }

  /* One row, so the chrome that follows the reader down a long page is 44px,
     not a third of the viewport. The section pills below it scroll away: once
     a section is chosen its heading says where you are. */
  .faq__tools {
    position: sticky;
    inset-block-start: var(--h-header);
    z-index: 2;
    flex-wrap: nowrap;
    margin-inline: calc(var(--sp-6) * -1);
    margin-block-start: calc(var(--sp-3) * -1);
    padding: var(--sp-3) var(--sp-6);
    background: var(--ink-950);
    border-block-end: 1px solid var(--line);
  }

  .faq__q {
    padding: var(--sp-5) var(--sp-6);
    font-size: var(--fs-lg);
  }

  .faq__a {
    padding: 0 var(--sp-6) var(--sp-6);
  }
}

/* The global reduced-motion reset in base.css targets `*`, `*::before` and
   `*::after`, and none of those reach `::details-content`. Without this the
   panel still grows over 280ms for a visitor who asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 639px) {
  /* The label is what the control says; the id is what it loads. On a 390px
     row only one of them fits. */
  .faq__video-id {
    display: none;
  }
}