/**
 * Accordion row icons (0.33.0, B-FP-467): a decorative icon on a small,
 * light colour tile in front of the label of a row that can be opened, with
 * the icon in a stronger shade of the same colour. The label carries the
 * meaning; the icon is `aria-hidden`.
 *
 * Keyed on `.ut-ui-accordion__icon[data-ut-icon][data-ut-tone]`, which both
 * renderers emit only for a name from the fixed icon list
 * (src/components/accordionIcons.ts, mirrored by public-views). The SVG is
 * line art stroked in `currentColor`.
 *
 * Colour families (`data-ut-tone`): `brand`, `info`, `neutral` and `warm`
 * reuse existing roles (brand-strong/brand-surface — so the tile follows each
 * site's own brand — and the info, neutral and warning intents). `teal`,
 * `plum` and `rose` are the decorative families added for icons; their values
 * are defined once, below, on `.ut-ui`. Every icon/tile pair is at least
 * 3:1 (WCAG 1.4.11), asserted in scripts/check-contrast.mjs, which reads the
 * three new values from this file.
 *
 * Dark theme: under the structural `[data-theme="dark"] .ut-ui` hook the
 * tile and the icon swap, so a strong tile carries a light icon. Swapping
 * keeps the exact same contrast ratio as the light pair.
 *
 * Its own registered handle `ut-ui-core-accordion-icon` (depends on
 * `ut-ui-core`), NOT part of dist/ui-core.css: a consumer enqueues it on the
 * pages that show icons, and dist/ui-core.css stays byte-identical, so the
 * rendered-profile approvals bound to it stay valid (as ut-help-link.css).
 */

.ut-ui {
  --ut-tone-teal: #1F6F6A;
  --ut-tone-teal-surface: #E1F1EF;
  --ut-tone-plum: #6B4E9B;
  --ut-tone-plum-surface: #EFE9F7;
  --ut-tone-rose: #A3405A;
  --ut-tone-rose-surface: #F8E6EB;
}

.ut-ui-accordion__icon {
  --ut-accordion-icon-fg: var(--ut-neutral);
  --ut-accordion-icon-surface: var(--ut-neutral-surface);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.125rem; /* 34px */
  height: 2.125rem;
  border-radius: var(--ut-radius-card);
  background: var(--ut-accordion-icon-surface);
  color: var(--ut-accordion-icon-fg);
}

.ut-ui-accordion__icon svg {
  display: block;
  width: 1.1875rem; /* 19px */
  height: 1.1875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ut-ui-accordion__icon[data-ut-tone="brand"] {
  --ut-accordion-icon-fg: var(--ut-brand-strong);
  --ut-accordion-icon-surface: var(--ut-brand-surface);
}

.ut-ui-accordion__icon[data-ut-tone="info"] {
  --ut-accordion-icon-fg: var(--ut-info);
  --ut-accordion-icon-surface: var(--ut-info-surface);
}

.ut-ui-accordion__icon[data-ut-tone="warm"] {
  --ut-accordion-icon-fg: var(--ut-warning);
  --ut-accordion-icon-surface: var(--ut-warning-surface);
}

.ut-ui-accordion__icon[data-ut-tone="teal"] {
  --ut-accordion-icon-fg: var(--ut-tone-teal);
  --ut-accordion-icon-surface: var(--ut-tone-teal-surface);
}

.ut-ui-accordion__icon[data-ut-tone="plum"] {
  --ut-accordion-icon-fg: var(--ut-tone-plum);
  --ut-accordion-icon-surface: var(--ut-tone-plum-surface);
}

.ut-ui-accordion__icon[data-ut-tone="rose"] {
  --ut-accordion-icon-fg: var(--ut-tone-rose);
  --ut-accordion-icon-surface: var(--ut-tone-rose-surface);
}

[data-theme="dark"] .ut-ui .ut-ui-accordion__icon {
  background: var(--ut-accordion-icon-fg);
  color: var(--ut-accordion-icon-surface);
}

/* A row with an icon gets a little more room between tile and label. */
.ut-ui-accordion__summary:has(> .ut-ui-accordion__icon) {
  gap: 0.75rem;
}

/* With the 0.28.0 summary line the row is a grid: the tile takes its own
   first column and spans both rows (label / summary line). */
.ut-ui-accordion__summary:has(> .ut-ui-accordion__icon):has(> .ut-ui-accordion__summary-text) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 0.75rem;
}

.ut-ui-accordion__summary:has(> .ut-ui-accordion__summary-text) > .ut-ui-accordion__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.ut-ui-accordion__summary:has(> .ut-ui-accordion__icon):has(> .ut-ui-accordion__summary-text) > :is(.ut-ui-accordion__label, .ut-ui-accordion__heading, .ut-ui-accordion__summary-text) {
  grid-column: 2;
}

.ut-ui-accordion__summary:has(> .ut-ui-accordion__icon):has(> .ut-ui-accordion__summary-text) > .ut-ui-accordion__badge {
  grid-column: 3;
}

.ut-ui-accordion__summary:has(> .ut-ui-accordion__icon):has(> .ut-ui-accordion__summary-text)::after {
  grid-column: 4;
}