/**
 * disclosure.css
 *
 * Native `details`/`summary` disclosure, accordion, and details-based tabs.
 * Semantic HTML first — zero JS required.
 * Progressive enhancement via @starting-style and interpolate-size.
 * --------------------------------------------------------------------------
 * Selectors: details, summary, .accordion / [data-accordion],
 *            .tabs-details / [data-tabs-details]
 *
 * Variants:
 *   [data-disclosure="compact"]   Tighter padding
 *   [data-disclosure="flush"]     No border, no background (inline toggle)
 *   [data-disclosure="bordered"]  Heavier bordered container style
 *   summary[data-summary-end]     Chevron on the left, text on the right
 *
 * Tokens (all optional, sensible defaults derive from theme):
 *   --disclosure-border-color       Outer border color
 *   --disclosure-border-width       Outer border width
 *   --disclosure-bg                 Panel background
 *   --disclosure-radius             Corner rounding
 *   --disclosure-padding            Content + summary inline/block padding
 *   --disclosure-gap                Gap around content area
 *   --disclosure-transition         Duration for open/close animation
 *
 *   --disclosure-summary-bg         Summary resting background
 *   --disclosure-summary-color      Summary resting text color
 *   --disclosure-summary-weight     Summary font weight
 *   --disclosure-summary-hover-bg   Summary hover background
 *   --disclosure-summary-hover-color Summary hover text color
 *
 *   --disclosure-content-bg         Content-area background (if distinct)
 *
 *   --accordion-gap                 Gap between accordion items
 *   --accordion-radius              Outer radius on first/last items
 */


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  BASE DETAILS / SUMMARY                                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

details {
  --_border-color: var(--disclosure-border-color, var(--outline-subtle));
  --_border-width: var(--disclosure-border-width, var(--border-width, 1px));
  --_bg:           var(--disclosure-bg, var(--surface-default, transparent));
  --_radius:       var(--disclosure-radius, var(--radius-md, 0.5rem));
  --_padding:      var(--disclosure-padding, 1rem);
  --_transition:   var(--disclosure-transition, 200ms);

  border: var(--_border-width) solid var(--_border-color);
  border-radius: var(--_radius);
  background: var(--_bg);
  overflow: hidden;
}

summary {
  --_bg:          var(--disclosure-summary-bg, transparent);
  --_color:       var(--disclosure-summary-color, var(--text-overt, inherit));
  --_weight:      var(--disclosure-summary-weight, var(--font-weight-medium, 500));
  --_hover-bg:    var(--disclosure-summary-hover-bg, var(--highlight-bg-subtle));
  --_hover-color: var(--disclosure-summary-hover-color, var(--text-overt, inherit));

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--_padding);
  background: var(--_bg);
  color: var(--_color);
  font-weight: var(--_weight);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition:
    background-color var(--_transition) ease-out,
    color            var(--_transition) ease-out;
}

/* Hide default marker across engines */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

/* Chevron indicator via ::after */
summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-inline-end: 2px solid currentColor;
  border-block-end:  2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--_transition) ease;
  margin-inline-start: auto;
}

details[open] > summary::after {
  transform: rotate(45deg);
}

/* Hover & Focus */
summary:hover {
  background: var(--_hover-bg);
  color: var(--_hover-color);
}

summary:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--outline-focus));
  outline-offset: calc(-1 * var(--focus-ring-width, 2px));
}

/* ── Content area ── */
details > :not(summary) {
  padding-inline: var(--disclosure-padding, 1rem);
  background: var(--disclosure-content-bg, transparent);
}

details > summary + * {
  padding-block-start: var(--disclosure-padding, 1rem);
}

details > :last-child:not(summary) {
  padding-block-end: var(--disclosure-padding, 1rem);
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  CONTENT ANIMATION — @starting-style + interpolate-size              ║
   ║  Progressive enhancement: browsers without support get instant toggle ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/*
 * Allow height to transition from 0 → auto using interpolate-size.
 * Wrap the content in a <div> or <p> directly after <summary> for best results.
 * Falls back to instant show/hide in older browsers.
 */
@supports (interpolate-size: allow-keywords) {
  details {
    interpolate-size: allow-keywords;
  }

  details > :not(summary) {
    overflow: hidden;
    block-size: auto;
    transition:
      block-size    var(--disclosure-transition, 200ms) ease-out,
      opacity       var(--disclosure-transition, 200ms) ease-out,
      padding-block var(--disclosure-transition, 200ms) ease-out;
  }

  details:not([open]) > :not(summary) {
    block-size: 0;
    opacity: 0;
    padding-block: 0;
  }

  /* Entry animation: start collapsed, transition to auto */
  @starting-style {
    details[open] > :not(summary) {
      block-size: 0;
      opacity: 0;
      padding-block: 0;
    }
  }
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  VARIANT: compact                                                     ║
   ║  Tighter spacing for dense UIs (sidebars, settings panels)            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

details[data-disclosure="compact"],
:is(.accordion, [data-accordion])[data-disclosure="compact"] > details {
  --disclosure-padding: 0.625rem 0.875rem;
}

details[data-disclosure="compact"] > summary {
  font-size: 0.875rem;
  gap: 0.5rem;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  VARIANT: flush                                                       ║
   ║  No border, no background — inline toggle (e.g. "Show code ▸")       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

details[data-disclosure="flush"] {
  border: none;
  background: transparent;
  border-radius: 0;
}

details[data-disclosure="flush"] > summary {
  padding-inline: 0;
  background: transparent;
  color: var(--text-link, var(--accent));
  font-weight: var(--font-weight-normal, 400);
  gap: 0.375rem;
  justify-content: flex-start;
}

details[data-disclosure="flush"] > summary:hover {
  background: transparent;
  color: var(--text-link-hover, var(--accent-overt));
}

details[data-disclosure="flush"] > summary::after {
  transform: rotate(-45deg);
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0;
}

details[data-disclosure="flush"][open] > summary::after {
  transform: rotate(45deg);
}

details[data-disclosure="flush"] > :not(summary) {
  padding-inline: 0;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  VARIANT: bordered                                                    ║
   ║  Heavier bordered container with distinct summary/content split       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

details[data-disclosure="bordered"] {
  --disclosure-border-width: var(--border-width-thick, 2px);
  --disclosure-border-color: var(--outline-default, var(--outline-subtle));
  --disclosure-radius: var(--radius-lg, 0.75rem);
  box-shadow: 0 1px 3px oklch(from var(--base, #fff) calc(l - 50%) 0.02 h / 0.08);
}

details[data-disclosure="bordered"] > summary {
  background: var(--surface-subtle);
  border-block-end: var(--disclosure-border-width, var(--border-width-thick, 2px)) solid var(--disclosure-border-color, var(--outline-default));
  font-weight: var(--font-weight-semibold, 600);
}

details[data-disclosure="bordered"]:not([open]) > summary {
  border-block-end-color: transparent;
}

details[data-disclosure="bordered"] > :not(summary) {
  background: var(--disclosure-content-bg, var(--surface-default, transparent));
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  VARIANT: summary-end — right-aligned text, chevron leads            ║
   ║  Usage: <summary data-summary-end>Show code</summary>               ║
   ║  Ideal for "Code" toggles, debug info, footnotes                     ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

summary[data-summary-end] {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

summary[data-summary-end]::after {
  margin-inline-start: 0;
  margin-inline-end: 0;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  ACCORDION — .accordion / [data-accordion]                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:is(.accordion, [data-accordion]) {
  --_radius: var(--accordion-radius, var(--disclosure-radius, var(--radius-md, 0.5rem)));
  --_gap:    var(--accordion-gap, 0px);

  display: flex;
  flex-direction: column;
  gap: var(--_gap);
}

/* Strip individual radii when stacked together */
:is(.accordion, [data-accordion]) > details {
  border-radius: 0;
}

/* First child: round top corners */
:is(.accordion, [data-accordion]) > details:first-child {
  border-start-start-radius: var(--_radius);
  border-start-end-radius:   var(--_radius);
}

/* Last child: round bottom corners */
:is(.accordion, [data-accordion]) > details:last-child {
  border-end-start-radius: var(--_radius);
  border-end-end-radius:   var(--_radius);
}

/* Collapse shared borders when gap = 0 */
:is(.accordion, [data-accordion]) > details + details {
  margin-block-start: calc(-1 * var(--disclosure-border-width, var(--border-width, 1px)));
}

/* Open item gets subtle emphasis in accordion context */
:is(.accordion, [data-accordion]) > details[open] > summary {
  background: var(--disclosure-summary-hover-bg, var(--highlight-bg-subtle));
}


/* ── Accordion with explicit gap — each item is standalone ── */

:is(.accordion, [data-accordion])[style*="--accordion-gap"] > details,
:is(.accordion, [data-accordion])[gap] > details {
  border-radius: var(--_radius);
  margin-block-start: 0;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  DETAILS-BASED TABS (stacked) — .tabs-details-stacked                 ║
   ║  Vertical disclosure-driven tabs. Each summary is a full-width row.   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:is(.tabs-details-stacked, [data-tabs-details-stacked]) {
  display: flex;
  flex-direction: column;
  gap: 0;
}

:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details {
  border-radius: 0;
}

:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details + details {
  margin-block-start: calc(-1 * var(--disclosure-border-width, var(--border-width, 1px)));
}

:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details:first-child {
  border-start-start-radius: var(--disclosure-radius, var(--radius-md, 0.5rem));
  border-start-end-radius:   var(--disclosure-radius, var(--radius-md, 0.5rem));
}

:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details:last-child {
  border-end-start-radius: var(--disclosure-radius, var(--radius-md, 0.5rem));
  border-end-end-radius:   var(--disclosure-radius, var(--radius-md, 0.5rem));
}

:is(.tabs-details-stacked, [data-tabs-details-stacked]) > details[open] > summary {
  background: var(--disclosure-summary-hover-bg, var(--highlight-bg-subtle));
  color: var(--text-overt);
  border-inline-start: 3px solid var(--accent, currentColor);
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  GRID TABS — .tabs-details / [data-tabs-details]                      ║
   ║  Horizontal tab bar using CSS subgrid + ::details-content.            ║
   ║  Pure CSS, zero JS. Set --tab-count to match the number of tabs.      ║
   ║                                                                        ║
   ║  Tokens:                                                               ║
   ║    --tab-count           Number of tabs (for grid columns)             ║
   ║    --tabs-gap            Column gap between tab buttons                ║
   ║    --tabs-border-color   Bottom border of tab row                      ║
   ║    --tabs-active-color   Active tab indicator color                    ║
   ║    --tabs-panel-padding  Padding inside the tab panel                  ║
   ║    --tabs-radius         Border radius for boxed variant               ║
   ║                                                                        ║
   ║  Usage:                                                                ║
   ║    <div class="tabs-details" style="--tab-count: 3">                  ║
   ║      <details name="my-tabs" open style="--n: 1">                     ║
   ║        <summary>Tab 1</summary>                                       ║
   ║        <p>Panel 1 content</p>                                         ║
   ║      </details>                                                        ║
   ║      <details name="my-tabs" style="--n: 2">                          ║
   ║        <summary>Tab 2</summary>                                       ║
   ║        <p>Panel 2 content</p>                                         ║
   ║      </details>                                                        ║
   ║      <details name="my-tabs" style="--n: 3">                          ║
   ║        <summary>Tab 3</summary>                                       ║
   ║        <p>Panel 3 content</p>                                         ║
   ║      </details>                                                        ║
   ║    </div>                                                              ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:is(.tabs-details, [data-tabs-details]) {
  --_tab-count:      var(--tab-count, 3);
  --_gap:            var(--tabs-gap, 0rem);
  --_border-color:   var(--tabs-border-color, var(--outline-subtle));
  --_active-color:   var(--tabs-active-color, var(--accent, currentColor));
  --_panel-padding:  var(--tabs-panel-padding, var(--disclosure-padding, 1rem));
  --_radius:         var(--tabs-radius, var(--disclosure-radius, var(--radius-md, 0.5rem)));
  --_transition:     var(--disclosure-transition, 200ms);

  display: grid;
  grid-template-columns: repeat(var(--_tab-count), minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--_gap);
}

/* Each details element spans the full grid */
:is(.tabs-details, [data-tabs-details]) > details {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  margin: 0;

  /* Reset base details styles in tab context */
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* Summary acts as the tab button */
:is(.tabs-details, [data-tabs-details]) > details > summary {
  grid-row: 1;
  grid-column: var(--n, 1) / span 1;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  gap: 0.5rem;

  color: var(--text-subtle);
  font-weight: var(--font-weight-medium, 500);
  background: transparent;
  border: none;
  border-block-end: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  transition:
    color        var(--_transition) ease-out,
    border-color var(--_transition) ease-out;
}

/* Remove chevron in tab context */
:is(.tabs-details, [data-tabs-details]) > details > summary::after {
  display: none;
}

/* Tab hover */
:is(.tabs-details, [data-tabs-details]) > details > summary:hover {
  color: var(--text-overt);
  background: transparent;
}

/* Tab focus */
:is(.tabs-details, [data-tabs-details]) > details > summary:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--outline-focus));
  outline-offset: -2px;
}

/* Active tab */
:is(.tabs-details, [data-tabs-details]) > details[open] > summary {
  color: var(--text-overt);
  font-weight: var(--font-weight-semibold, 600);
  border-block-end-color: var(--_active-color);
  background: transparent;
  border-inline-start: none;
}

/* Tab panel — uses ::details-content for native open/close */
:is(.tabs-details, [data-tabs-details]) > details::details-content {
  grid-row: 2;
  grid-column: 1 / -1;
  padding: var(--_panel-padding);

  /* Smooth open/close */
  opacity: 1;
  block-size: auto;
  overflow: visible;
  transition:
    opacity var(--_transition) ease-out,
    display var(--_transition) ease-out allow-discrete;
}

:is(.tabs-details, [data-tabs-details]) > details:not([open])::details-content {
  display: none;
  opacity: 0;
}

/* Content inside panel — reset disclosure content padding */
:is(.tabs-details, [data-tabs-details]) > details > :not(summary) {
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Entry animation */
@starting-style {
  :is(.tabs-details, [data-tabs-details]) > details[open]::details-content {
    opacity: 0;
  }
}


/* ── Boxed variant — card-style tabs that visually connect to panel ── */

:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details > summary {
  border: var(--border-width, 1px) solid var(--_border-color);
  border-block-end: none;
  border-radius: var(--_radius) var(--_radius) 0 0;
  background: var(--surface-subtle, var(--highlight-bg-muted));
  margin-inline-end: -1px;
  position: relative;
}

/* Active boxed tab — connects visually to the panel */
:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details[open] > summary {
  background: var(--surface-default, var(--base));
  z-index: 2;
  border-block-end-color: transparent;
}

/* Bridge between active tab and panel */
:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details[open] > summary::after {
  display: block;
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--surface-default, var(--base));
  border: none;
  width: auto;
  height: auto;
  transform: none;
}

/* Boxed panel styling */
:is(.tabs-details, [data-tabs-details]):is(.boxed, [data-tabs-boxed]) > details::details-content {
  border: var(--border-width, 1px) solid var(--_border-color);
  border-radius: 0 0 var(--_radius) var(--_radius);
  margin-block-start: -1px;
  background: var(--surface-default, var(--base));
}


/* ── Pill variant — rounded tab buttons with filled active state ── */

:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) {
  column-gap: 0.25rem;
}

:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details > summary {
  border: none;
  border-radius: var(--radius-full, 9999px);
  padding: 0.5rem 1.25rem;
}

:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details > summary:hover {
  background: var(--highlight-bg-subtle);
}

:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details[open] > summary {
  background: var(--accent);
  color: var(--text-on-base, #fff);
  border-block-end: none;
}

:is(.tabs-details, [data-tabs-details]):is(.pills, [data-tabs-pills]) > details[open] > summary::after {
  display: none;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  REDUCED MOTION — respect user preference                             ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion: reduce) {
  summary,
  summary::after,
  details > :not(summary),
  details::details-content {
    transition-duration: 0ms !important;
  }
}