/* styles/accordion.css
 * Disclosure list (board d9A7tI): each question row is <h3><button aria-expanded aria-controls>,
 * toggled by js/accordion.js; several items may be open at once. Markup comes from
 * renderAccordion() in scripts/lib/accordion.js. The open animation is CSS and is off under
 * prefers-reduced-motion. Colors flow from custom properties so inverse is one rule.
 * Board HmWBl: 69px closed row (20 + 27 + 22, rule included), 18px question to answer, Border / soft rules,
 * Material Symbols add / remove (exported to assets/figures/ds) at 22px, fern on hover,
 * focus ring inset 2px around the row with a 4px radius. */
@layer components {
  .accordion {
    --accordion-fg: var(--ink);
    --accordion-body: var(--ink);
    --accordion-accent: var(--fern);
    --accordion-rule: var(--line);
    --accordion-icon: 22px;

    /* The list's top rule lies inside it, as the board draws it (no extra height) */
    box-shadow: inset 0 1px 0 var(--accordion-rule);
  }

  :is(.surface--inverse, .surface--inverse-textured) .accordion {
    --accordion-fg: var(--white);
    --accordion-body: var(--mist);
    --accordion-accent: var(--white);
    --accordion-rule: var(--field-edge);
  }

  .accordion__item {
    border-bottom: 1px solid var(--accordion-rule);
  }

  /* The question row is the control (board d9A7tI): <h3><button aria-expanded aria-controls>.
     js/accordion.js toggles aria-expanded and the panel's hidden attribute. */
  .accordion__heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-body-size);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
  }

  /* The board's 22px bottom inset includes the item's 1px rule, hence 21px. The focus ring
     sits inside the row (utilities.css reads --focus-offset). */
  .accordion__trigger {
    --focus-offset: -2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    width: 100%;
    margin: 0;
    padding: var(--space-20) 0 21px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: start;
    cursor: pointer;
    color: var(--accordion-fg);
  }

  .accordion__trigger[aria-expanded="true"] {
    padding-bottom: 18px;
    font-weight: 600;
  }

  /* Plus when closed, minus when open: the board's Material Symbols glyphs as masks. */
  .accordion__icon {
    flex: none;
    width: var(--accordion-icon);
    height: var(--accordion-icon);
    background: var(--accordion-fg);
    mask: url("/assets/figures/ds/add.svg") center / contain no-repeat;
    transition: background-color var(--dur-fast);
  }

  .accordion__trigger[aria-expanded="true"] .accordion__icon {
    mask-image: url("/assets/figures/ds/remove.svg");
  }

  @media (hover: hover) {
    .accordion__trigger:hover .accordion__icon {
      background: var(--accordion-accent);
    }
  }

  .accordion__panel {
    max-width: 600px;
    padding-bottom: 21px;
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
    color: var(--accordion-body);
  }

  .accordion__panel[hidden] {
    display: none;
  }

  .accordion__panel:not([hidden]) {
    animation: accordion-reveal var(--dur-overlay) ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion__panel:not([hidden]) {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .accordion__icon {
      background: CanvasText;
      forced-color-adjust: none;
    }
  }

  @keyframes accordion-reveal {
    from {
      opacity: 0;
      transform: translateY(calc(var(--space-4) * -1));
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}