/* ==========================================================================
   SIGMA SCANNER — assets/css/faq.css
   FAQ-page section styles. Loaded only by faq.html.

   ---------------------------------------------------------------------------
   WHAT THIS FILE DELIBERATELY DOES NOT DO
   ---------------------------------------------------------------------------
   It no longer declares its own tokens, reset, base type, buttons, header or
   footer. It used to — a full parallel design system with a "satoshi_font"
   family that doesn't exist in this project and its own .ss-header/.ss-footer
   components — which is exactly why the page rendered as a different site.
   All of that now comes from the real thing, linked ahead of this file in
   faq.html:

     css/style.css       @font-face Satoshi · --ink-… · --signal-… · --sp-… ·
                         --r-… · --shadow-… · .ss-container · .ss-btn ·
                         .ss-eyebrow · .ss-metric · .ss-sr-only
     css/responsive.css  --gutter and --nav-h steps per breakpoint
     css/animations.css  --dur-* · --ease-* · reveal states
     css/nav.css         .ss-nav — the header component
     css/footer.css      .ss-footer — the footer component

   So the only job left here is the FAQ page's own sections, styled with those
   tokens. Nothing in this file introduces a colour, radius, shadow, font size
   or spacing value that isn't already in the system.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Everything lives in @layer components, base rules and responsive overrides
   alike — the same rule css/faq.css and css/nav.css document. The layer order
   is declared once in style.css (reset, tokens, base, layout, components,
   utilities); an override stranded in an earlier layer loses to a
   components-layer base rule no matter its specificity or media query.

   ---------------------------------------------------------------------------
   MARKUP CONTRACT WITH assets/js/faq.js
   ---------------------------------------------------------------------------
   Every class below that JS generates is styled here exactly as named — do
   not rename: .faq-tab (+ .is-active) · .faq-tab__label · .faq-tab__count ·
   .faq-topic-card (+ __title/__desc/__count) · .faq-cat (+ __header/__title/
   __desc/__count) · .faq-list · .faq-item (a real <details>) ·
   .faq-item__trigger (<summary>) · .faq-item__q · .faq-item__toggle ·
   .faq-item__panel · <mark> for search hits.

   Filtering works by setting the `hidden` property on .faq-item / .faq-cat /
   the wrapper elements, so nothing here may set `display` on those without
   respecting it. style.css's reset already carries
   `[hidden] { display: none !important; }`, which is what makes that safe.

   .faq-item__toggle ships as an EMPTY <span> from JS (index.html's own §10
   markup puts an <svg use="#i-plus"> inside it instead). The plus is drawn
   with two pseudo-elements here so the identical "plus rotates into a cross"
   behaviour is reproduced without touching the JS.
   ========================================================================== */

@layer components {

  /* ========================================================================
     PAGE BANNER
     The nav is position:fixed (see nav.css's note on why), so it occupies no
     normal-flow space — this section owns the clearance for it.
     ======================================================================== */
  .faq-page-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: calc(var(--nav-h) + var(--sp-8)) var(--sp-5);
  }

  /* Same two-radial signal wash as the site's §10 FAQ section (css/faq.css
     .faq__bg) — this is what makes the top of the page read as Sigma
     Scanner rather than as plain white. */
  .faq-page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(50% 45% at 6% 10%,  rgb(16 160 80 / .07) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(55% 50% at 98% 92%, rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .faq-page-hero__crumbs {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-6);
    font-size: var(--fs-xs);
    color: var(--ink-400);
  }
  .faq-page-hero__crumbs a {
    color: var(--ink-500);
    transition: color var(--dur-fast) var(--ease-out-quad);
  }
  .faq-page-hero__crumbs a:hover { color: var(--signal-700); }
  .faq-page-hero__crumbs span { color: var(--ink-700); font-weight: var(--fw-medium); }
  .faq-page-hero__crumbs .ss-icon {
    inline-size: 12px;
    block-size: 12px;
    color: var(--ink-300);
  }

  /* Text left, stat counts right — stacked on mobile since there is no
     "right" until the viewport is wide enough to hold both without
     crowding the lead paragraph. */
  .faq-page-hero__row {
    display: flex;
    flex-direction: column;
  }

  .faq-page-hero__title {
    margin-block-start: var(--sp-3);
    max-inline-size: 20ch;
    font-size: 45px;
  }

  .faq-page-hero__lead {
    margin-block-start: var(--sp-4);
    max-inline-size: var(--measure);
    font-size: 15px;
    line-height: var(--lh-lead);
    color: var(--ink-500);
  }

  /* .ss-metric supplies the value/label typography; this only lays them out. */
  .faq-page-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-6) var(--sp-9);
    margin-block-start: var(--sp-8);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--ink-200);
  }
  .faq-page-hero__stat .ss-metric__value {  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  color: var(--signal-700); }

  @media (min-width: 900px) {
    .faq-page-hero__row {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-9);
    }
    .faq-page-hero__content { flex: 1 1 auto; min-inline-size: 0; }
    .faq-page-hero__stats {
      flex: none;
      flex-wrap: nowrap;
      margin-block-start: 0;
      padding-block-start: 0;
      padding-inline-start: var(--sp-9);
      border-block-start: none;
      border-inline-start: 1px solid var(--ink-200);
    }
  }

  /* ========================================================================
     TOOLBAR — search + expand/collapse all
     Sticks directly beneath the compressed nav. --nav-h-scrolled, not
     --nav-h: by the time anything has scrolled far enough for this bar to
     pin, js/nav.js has already put the header in its scrolled state.
     ======================================================================== */
  .faq-toolbar {
    position: sticky;
    inset-block-start: var(--nav-h-scrolled);
    z-index: var(--z-sticky);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-block: 1px solid var(--ink-200);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .faq-toolbar { background: rgb(255 255 255 / .98); }
  }

  .faq-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }

  /* ---------- SEARCH FIELD ------------------------------------------------- */
  .faq-search { position: relative; flex: 1 1 260px; min-inline-size: 0; }

  .faq-search input {
    inline-size: 100%;
    block-size: 44px;                    /* --touch-min */
    padding-inline: calc(var(--sp-4) + var(--icon-md) + var(--sp-2)) var(--sp-9);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: var(--ink-050);
    font-size: var(--fs-sm);
    color: var(--ink-800);
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      background-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-fast) var(--ease-out-quad);
  }
  .faq-search input::placeholder { color: var(--ink-400); }

  /* The system's focus treatment is --shadow-focus (halo + ring), the same
     one :focus-visible applies globally in style.css. */
  .faq-search input:focus {
    outline: none;
    background: var(--paper);
    border-color: var(--signal-600);
    box-shadow: var(--shadow-focus);
  }
  /* Safari's own search affordance would sit on top of .faq-search__clear. */
  .faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

  .faq-search__icon {
    position: absolute;
    inset-inline-start: var(--sp-4);
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--ink-400);
    pointer-events: none;
  }

  .faq-search__clear {
    position: absolute;
    inset-inline-end: var(--sp-2);
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--r-full);
    color: var(--ink-400);
    transition:
      background-color var(--dur-fast) var(--ease-out-quad),
      color var(--dur-fast) var(--ease-out-quad);
  }
  .faq-search__clear:hover { background: var(--ink-100); color: var(--ink-900); }
  .faq-search__clear .ss-icon { inline-size: 14px; block-size: 14px; }

  .faq-toolbar__actions { display: flex; gap: var(--sp-2); flex: none; }

  .faq-results-summary {
    flex-basis: 100%;
    min-block-size: 1em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--ink-500);
  }

  /* ========================================================================
     CATEGORY TABS
     ======================================================================== */
  .faq-tabs-wrap {
    padding-block: var(--sp-4);
    background: var(--ink-050);
    border-block-end: 1px solid var(--ink-200);
  }

  /* Same horizontal-rail behaviour as .ss-rail: the row scrolls inside its
     own container, the page body never scrolls sideways. */
  .faq-tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-block-end: var(--sp-1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .faq-tabs::-webkit-scrollbar { display: none; }

  .faq-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
    block-size: 36px;                    /* .ss-btn--sm */
    padding-inline: var(--sp-4);
    border-radius: var(--r-full);
    border: 1px solid var(--ink-200);
    background: var(--paper);
    color: var(--ink-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      background-color var(--dur-fast) var(--ease-out-quad),
      color var(--dur-fast) var(--ease-out-quad);
  }
  .faq-tab:hover { border-color: var(--ink-300); color: var(--ink-900); }

  /* --signal-600, never --signal-500: white on 500 is 3.1:1. */
  .faq-tab.is-active {
    background: var(--signal-600);
    border-color: var(--signal-600);
    color: var(--paper);
    box-shadow: var(--shadow-sm);
  }
  .faq-tab.is-active:hover { background: var(--signal-700); border-color: var(--signal-700); }

  .faq-tab__count {
    padding-inline: var(--sp-2);
    border-radius: var(--r-full);
    background: var(--ink-100);
    color: var(--ink-500);
    font-size: var(--fs-eyebrow);
    font-variant-numeric: tabular-nums;
  }
  .faq-tab.is-active .faq-tab__count { background: rgb(255 255 255 / .22); color: var(--paper); }

  /* ========================================================================
     SECTION SHELL — both .faq-content sections use .ss-section--dense for
     their block padding, so nothing is set here beyond the hidden contract.
     ======================================================================== */
  .faq-content { position: relative; padding: 15px; }

  /* ========================================================================
     TOPICS GRID — the default landing view. One card per category; clicking
     one reveals that category's questions in the section below, which keeps
     the page from ever rendering all 175 questions at once.
     ======================================================================== */
  .faq-topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: var(--gap);
  }

  .faq-topic-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    text-align: start;
    padding: var(--sp-6);
    border: 1px solid var(--ink-200);
    /* Nesting rule: inner = outer − padding, min --r-xs. --r-lg here so the
       __count pill inside still reads as nested. */
    border-radius: var(--r-lg);
    background: var(--paper);
    transition:
      border-color var(--dur-fast) var(--ease-out-quad),
      box-shadow var(--dur-base) var(--ease-out-cubic),
      transform var(--dur-base) var(--ease-out-cubic);
  }
  @media (hover: hover) and (pointer: fine) {
    .faq-topic-card:hover {
      border-color: var(--signal-200);
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }
  }
  .faq-topic-card:active { transform: translateY(-1px); }

  .faq-topic-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
  }
  .faq-topic-card__desc {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--ink-500);
  }
  .faq-topic-card__count {
    margin-block-start: var(--sp-2);
    padding: 3px var(--sp-3);
    border-radius: var(--r-full);
    background: var(--signal-050);
    color: var(--signal-700);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* ========================================================================
     BACK TO TOPICS
     ======================================================================== */
  .faq-back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: var(--sp-7);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--signal-700);
    transition: color var(--dur-fast) var(--ease-out-quad);
  }
  .faq-back:hover { color: var(--ink-900); }
  .faq-back .ss-icon {
    inline-size: var(--icon-sm);
    block-size: var(--icon-sm);
    transition: transform var(--dur-fast) var(--ease-out-quad);
  }
  @media (hover: hover) and (pointer: fine) {
    .faq-back:hover .ss-icon { transform: translateX(-3px); }
  }

  /* ========================================================================
     CATEGORY SECTIONS
     ======================================================================== */
  .faq-cat + .faq-cat {
    /* margin-block-start: var(--sp-9);
    padding-block-start: var(--sp-8); */
    border-block-start: 1px solid var(--ink-200);
  }

  .faq-cat__header { margin-block-end: var(--sp-6); }
  .faq-cat__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
  }
  .faq-cat__desc {
    margin-block-start: var(--sp-2);
    max-inline-size: var(--measure);
    font-size: var(--fs-sm);
    color: var(--ink-500);
  }
  .faq-cat__count {
    display: inline-flex;
    margin-block-start: var(--sp-3);
    padding: 3px var(--sp-3);
    border-radius: var(--r-full);
    background: var(--signal-050);
    color: var(--signal-700);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
  }

  /* ========================================================================
     ACCORDION — a real <details>/<summary>, styled to match the site's §10
     FAQ list exactly: hairline-separated rows, no card chrome, the open
     state keyed off the browser's own [open] attribute rather than a class.
     ======================================================================== */
  .faq-list { display: flex; flex-direction: column; }

  .faq-item { border-block-end: 1px solid var(--ink-150); }
  .faq-item:first-child { border-block-start: 1px solid var(--ink-150); }

  .faq-item__trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-block: var(--sp-5);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--dur-fast) var(--ease-out-quad);
  }
  /* Two selectors, one purpose: Chrome/Firefox use the standard pseudo-
     element, Safari still needs its own — both must go for the custom
     plus/cross icon to be the only disclosure indicator. */
  .faq-item__trigger::marker { content: ""; }
  .faq-item__trigger::-webkit-details-marker { display: none; }

  .faq-item__trigger:hover { background: var(--ink-050); }
  .faq-item__trigger:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--r-sm);
  }

  .faq-item__q {
    flex: 1;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: normal;
    color: var(--ink-900);
  }

  /* ---------- TOGGLE — plus rotates into a cross ---------------------------
     Drawn from pseudo-elements because JS emits an empty <span> here. The
     45° rotation is the same gesture index.html's §10 accordion makes by
     rotating its #i-plus svg. */
  .faq-item__toggle {
    position: relative;
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    border: 1px solid var(--ink-200);
    color: var(--ink-500);
    transition:
      border-color var(--dur-base) var(--ease-out-cubic),
      color var(--dur-base) var(--ease-out-cubic),
      transform var(--dur-base) var(--ease-out-cubic);
  }
  .faq-item__toggle::before,
  .faq-item__toggle::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    background: currentColor;
    border-radius: var(--r-full);
  }
  .faq-item__toggle::before {
    inline-size: 12px;
    block-size: 1.5px;
    transform: translate(-50%, -50%);
  }
  .faq-item__toggle::after {
    inline-size: 1.5px;
    block-size: 12px;
    transform: translate(-50%, -50%);
  }

  .faq-item[open] .faq-item__toggle {
    border-color: var(--signal-200);
    background: var(--signal-050);
    color: var(--signal-600);
    transform: rotate(45deg);
  }

  /* ---------- PANEL ------------------------------------------------------- */
  .faq-item__panel { overflow: hidden; }
  .faq-item__panel p {
    max-inline-size: 62ch;
    padding-block-end: var(--sp-6);
    padding-inline-end: var(--sp-8);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-600);
  }

  /* ---------- SEARCH HIT HIGHLIGHT ------------------------------------------
     assets/js/faq.js wraps matches in <mark>. --signal-100 rather than the
     browser default yellow, which has no place in this palette; ink-900 on
     it stays well past 4.5:1. */
  .faq-item__q mark,
  .faq-item__panel mark {
    padding-inline: 2px;
    border-radius: var(--r-xs);
    background: var(--signal-100);
    color: var(--ink-900);
    font-weight: inherit;
  }

  /* ========================================================================
     EMPTY STATE
     ======================================================================== */
  .faq-empty {
    padding: var(--sp-11) var(--sp-6);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-xl);
    background: var(--ink-050);
    text-align: center;
  }
  .faq-empty strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
  }
  .faq-empty p {
    margin-block: var(--sp-2) var(--sp-5);
    margin-inline: auto;
    font-size: var(--fs-sm);
    color: var(--ink-500);
  }

  /* ========================================================================
     SUPPORT CTA — the same treatment as the site's .faq__aside card.
     ======================================================================== */
  .faq-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-block-start: var(--sp-9);
    padding: var(--sp-6) var(--sp-7);
    border: 1px solid var(--ink-150);
    border-radius: var(--r-xl);
    background: var(--ink-050);
  }
  .faq-support__label {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    font-weight: var(--fw-semibold);
    color: var(--ink-900);
  }
  .faq-support__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see the file header
     ======================================================================== */
  @media (min-width: 640px) {
    .faq-toolbar__inner { flex-wrap: nowrap; }
    .faq-results-summary { flex-basis: auto; text-align: end; }

    .faq-item__trigger { gap: var(--sp-5); padding-block: var(--sp-6); }
    .faq-item__q { font-size: var(--fs-lead); }
    .faq-item__panel p { font-size: var(--fs-body); }
  }

  /* Two buttons side by side in a 375px-wide toolbar is a design error, not
     a responsive strategy — below 640px they get their own full-width row. */
  @media (max-width: 639px) {
    .faq-toolbar__actions { inline-size: 100%; }
    .faq-toolbar__actions .ss-btn { flex: 1; }

    .faq-support { justify-content: stretch; }
    .faq-support__links { inline-size: 100%; }
    .faq-support__links .ss-btn { flex: 1; }
  }

  @media (min-width: 1024px) {
    .faq-page-hero { padding-block-end: var(--sp-10); }
    .faq-cat__header { margin-block-end: var(--sp-7); }
  }

  @media (min-width: 390px) {
    .faq-page-hero__title{ font-size: 39px;}
  }
}