/* =============================================================================
   QuickCare Design System — COMPONENTS   (@layer qc.components)
   -----------------------------------------------------------------------------
   Early shared components: button, card, badge, breadcrumb, form controls.
   All qc-namespaced (no Bootstrap collision), mobile-first, token-driven,
   accessible (44px touch targets, visible focus, AA intent). Split into
   per-component files once the optional build/bundle step lands.
   ========================================================================== */
@layer qc.components {

  /* ==========================================================================
     BUTTON
     ========================================================================== */
  .qc-btn {
    --_qc-btn-bg: var(--qc-color-primary);
    --_qc-btn-fg: var(--qc-text-on-primary);
    --_qc-btn-bg-hover: var(--qc-color-primary-dark);
    --_qc-btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qc-space-2);
    min-height: 44px;                 /* WCAG 2.5.5 target size */
    padding: var(--qc-space-3) var(--qc-space-5);
    font-family: inherit;
    font-size: var(--qc-fs-base);
    font-weight: var(--qc-fw-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--_qc-btn-fg);
    background: var(--_qc-btn-bg);
    border: 1px solid var(--_qc-btn-border);
    border-radius: var(--qc-radius-md);
    cursor: pointer;
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard),
                color var(--qc-dur-fast) var(--qc-ease-standard),
                border-color var(--qc-dur-fast) var(--qc-ease-standard),
                box-shadow var(--qc-dur-fast) var(--qc-ease-standard),
                transform var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-btn:hover { color: var(--_qc-btn-fg); background: var(--_qc-btn-bg-hover); }
  .qc-btn:active { transform: translateY(1px); }
  .qc-btn:focus-visible {
    outline: none;
    box-shadow: var(--qc-focus-ring);
  }
  .qc-btn[disabled], .qc-btn.is-disabled, .qc-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }
  .qc-btn .material-icons { font-size: 1.25em; }

  /* Variants */
  .qc-btn--secondary {
    --_qc-btn-bg: var(--qc-color-secondary);
    --_qc-btn-bg-hover: var(--qc-color-secondary-dark);
    --_qc-btn-fg: #ffffff;
  }
  .qc-btn--accent {
    --_qc-btn-bg: var(--qc-color-accent);
    --_qc-btn-bg-hover: var(--qc-color-accent-dark);
    --_qc-btn-fg: #ffffff;
  }
  .qc-btn--outline {
    --_qc-btn-bg: transparent;
    --_qc-btn-bg-hover: var(--qc-color-primary);
    --_qc-btn-fg: var(--qc-color-primary);
    --_qc-btn-border: currentColor;
  }
  .qc-btn--outline:hover { --_qc-btn-fg: var(--qc-text-on-primary); }
  .qc-btn--ghost {
    --_qc-btn-bg: transparent;
    --_qc-btn-bg-hover: var(--qc-surface-sunken);
    --_qc-btn-fg: var(--qc-color-primary);
  }
  /* For dark/coloured surfaces (dark masthead, inverse sections, CTA gradient). */
  .qc-btn--on-dark {
    --_qc-btn-bg: transparent;
    --_qc-btn-bg-hover: #ffffff;
    --_qc-btn-fg: #ffffff;
    --_qc-btn-border: rgba(255, 255, 255, 0.55);
  }
  .qc-btn--on-dark:hover { --_qc-btn-fg: var(--qc-color-primary-dark); border-color: #ffffff; }
  /* Solid light button — the primary action on a coloured/gradient band. */
  .qc-btn--light {
    --_qc-btn-bg: #ffffff;
    --_qc-btn-bg-hover: var(--qc-neutral-100);
    --_qc-btn-fg: var(--qc-color-primary-dark);
  }
  /* Panel-accent primary — ties a CTA to its container's own identity color
     via the locally-scoped --_acc custom property (set by .qc-mega-panel).
     Falls back to brand violet outside a .qc-mega-panel context. White text
     is only correct for dark/saturated accents (violet: 6.1:1) — lighter
     accents (green/cyan/amber) get a dark-text override scoped in
     navigation.css where those accent modifiers live, since white text on
     them fails WCAG contrast (see that override's comment for measured
     ratios). */
  .qc-btn--mega-primary {
    --_qc-btn-bg: var(--_acc, var(--qc-color-primary));
    --_qc-btn-bg-hover: color-mix(in srgb, var(--_acc, var(--qc-color-primary)) 85%, #000);
    --_qc-btn-fg: #ffffff;
    --_qc-btn-border: transparent;
  }

  /* Sizes */
  .qc-btn--sm { min-height: 36px; padding: var(--qc-space-2) var(--qc-space-4); font-size: var(--qc-fs-sm); }
  .qc-btn--lg { min-height: 52px; padding: var(--qc-space-4) var(--qc-space-8); font-size: var(--qc-fs-lg); }
  .qc-btn--block { display: flex; width: 100%; }

  /* ==========================================================================
     CARD
     ========================================================================== */
  .qc-card {
    display: flex;
    flex-direction: column;
    background: var(--qc-surface);
    border: 1px solid var(--qc-border);
    border-radius: var(--qc-radius-lg);
    box-shadow: var(--qc-shadow-sm);
    overflow: hidden;
  }
  .qc-card__media { display: block; width: 100%; height: auto; object-fit: cover; }
  .qc-card__body { padding: var(--qc-space-6); display: flex; flex-direction: column; gap: var(--qc-space-3); }
  .qc-card__title { margin: 0; font-size: var(--qc-fs-xl); font-weight: var(--qc-fw-bold); }
  .qc-card__text { margin: 0; color: var(--qc-text-muted); }
  .qc-card__footer { margin-top: auto; padding-top: var(--qc-space-2); }

  .qc-card--interactive { transition: transform var(--qc-dur-base) var(--qc-ease-standard), box-shadow var(--qc-dur-base) var(--qc-ease-standard); }
  .qc-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--qc-shadow-lg); }
  .qc-card--interactive:focus-within { box-shadow: var(--qc-focus-ring); }

  /* ==========================================================================
     BADGE / PILL
     ========================================================================== */
  .qc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--qc-space-1);
    padding: 0.25em 0.75em;
    font-size: var(--qc-fs-sm);
    font-weight: var(--qc-fw-medium);
    line-height: 1.4;
    border-radius: var(--qc-radius-pill);
    background: var(--qc-surface-sunken);
    color: var(--qc-text-muted);
    white-space: nowrap;
  }
  .qc-badge .material-icons { font-size: 1.1em; }
  .qc-badge--primary { background: color-mix(in srgb, var(--qc-color-primary) 14%, white); color: var(--qc-color-primary-dark); }
  .qc-badge--success { background: color-mix(in srgb, var(--qc-color-success) 16%, white); color: var(--qc-color-accent-dark); }
  .qc-badge--warning { background: color-mix(in srgb, var(--qc-color-warning) 20%, white); color: #8a5a00; }
  .qc-badge--danger  { background: color-mix(in srgb, var(--qc-color-danger) 14%, white); color: var(--qc-color-danger-dark); }

  /* ==========================================================================
     BREADCRUMB
     ========================================================================== */
  .qc-breadcrumb { font-size: var(--qc-fs-sm); }
  .qc-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qc-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .qc-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--qc-space-2); color: var(--qc-text-muted); }
  .qc-breadcrumb__item + .qc-breadcrumb__item::before {
    content: "/";
    color: var(--qc-text-subtle);
    user-select: none;
  }
  .qc-breadcrumb__link { color: var(--qc-text-muted); text-decoration: none; }
  .qc-breadcrumb__link:hover { color: var(--qc-color-primary); text-decoration: underline; }
  .qc-breadcrumb__item[aria-current="page"] { color: var(--qc-text); font-weight: var(--qc-fw-medium); }

  /* ==========================================================================
     FORM CONTROLS
     ========================================================================== */
  .qc-field { display: flex; flex-direction: column; gap: var(--qc-space-2); margin-bottom: var(--qc-space-4); }
  .qc-label { font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-medium); color: var(--qc-text); }
  .qc-label__required { color: var(--qc-color-danger); }

  .qc-input, .qc-textarea, .qc-select {
    width: 100%;
    min-height: 44px;
    padding: var(--qc-space-3) var(--qc-space-4);
    font-family: inherit;
    font-size: var(--qc-fs-base);
    color: var(--qc-text);
    background: var(--qc-surface);
    border: 1px solid var(--qc-border-strong);
    border-radius: var(--qc-radius-md);
    transition: border-color var(--qc-dur-fast) var(--qc-ease-standard), box-shadow var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-textarea { min-height: 7rem; resize: vertical; }
  .qc-input::placeholder, .qc-textarea::placeholder { color: var(--qc-text-subtle); }
  .qc-input:focus, .qc-textarea:focus, .qc-select:focus {
    outline: none;
    border-color: var(--qc-color-primary);
    box-shadow: var(--qc-focus-ring);
  }
  .qc-input[aria-invalid="true"], .qc-textarea[aria-invalid="true"], .qc-select[aria-invalid="true"] {
    border-color: var(--qc-color-danger);
  }
  .qc-field__help { font-size: var(--qc-fs-sm); color: var(--qc-text-subtle); }
  .qc-field__error { font-size: var(--qc-fs-sm); color: var(--qc-color-danger-dark); }

  /* Checkbox / radio rows */
  .qc-check { display: flex; align-items: flex-start; gap: var(--qc-space-2); }
  .qc-check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--qc-color-primary); }

  /* ==========================================================================
     MASTHEAD / HERO  (qc-hero is taken by legacy per-page CSS → use qc-masthead)
     ========================================================================== */
  .qc-masthead { position: relative; padding-block: var(--qc-section-y); background: var(--qc-surface); color: var(--qc-text); }
  .qc-masthead--dark { background: var(--qc-gradient-header); color: var(--qc-text-on-dark); }
  .qc-masthead--primary { background: var(--qc-gradient-primary); color: var(--qc-text-on-primary); }
  .qc-masthead__inner { display: grid; gap: var(--qc-space-8); align-items: center; }
  .qc-masthead__eyebrow {
    display: inline-flex; align-items: center; gap: var(--qc-space-2);
    margin-bottom: var(--qc-space-3);
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold);
    letter-spacing: var(--qc-ls-wide); text-transform: uppercase;
  }
  .qc-masthead__title { font-size: var(--qc-fs-h1); margin: 0 0 var(--qc-space-4); }
  .qc-masthead__subtitle { font-size: var(--qc-fs-lg); line-height: var(--qc-lh-base); max-width: 60ch; margin: 0 0 var(--qc-space-6); }
  .qc-masthead__actions { display: flex; flex-wrap: wrap; gap: var(--qc-space-3); }
  .qc-masthead__fineprint { margin: var(--qc-space-5) 0 0; font-size: var(--qc-fs-sm); opacity: 0.85; }
  .qc-masthead__media img { display: block; width: 100%; height: auto; border-radius: var(--qc-radius-lg); box-shadow: var(--qc-shadow-lg); }
  @media (min-width: 1024px) {
    .qc-masthead--split .qc-masthead__inner { grid-template-columns: 1.1fr 0.9fr; }
  }

  /* ==========================================================================
     APPBAR (header shell) + NAVLIST + MENU TOGGLE  (distinct from legacy qc-navbar)
     ========================================================================== */
  .qc-appbar {
    position: sticky; top: 0; z-index: var(--qc-z-sticky);
    background: var(--qc-gradient-header); color: var(--qc-text-on-dark);
    box-shadow: var(--qc-shadow-md);
  }
  .qc-appbar__inner { display: flex; align-items: center; gap: var(--qc-space-4); min-height: var(--qc-header-height); }
  .qc-appbar__brand { display: inline-flex; align-items: center; margin-right: auto; }
  .qc-appbar__brand img { display: block; height: 36px; width: auto; }
  .qc-appbar__actions { display: flex; align-items: center; gap: var(--qc-space-3); }

  .qc-navlist { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qc-space-1); margin: 0; padding: 0; list-style: none; }
  .qc-navlist__link {
    display: inline-flex; align-items: center; gap: var(--qc-space-2);
    padding: var(--qc-space-2) var(--qc-space-3);
    color: inherit; text-decoration: none; font-weight: var(--qc-fw-medium);
    border-radius: var(--qc-radius-md);
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard), color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-navlist__link:hover { background: var(--qc-surface-sunken); color: inherit; }
  .qc-navlist__link[aria-current="page"], .qc-navlist__link--active { font-weight: var(--qc-fw-semibold); }
  .qc-navlist__link--cta { background: var(--qc-color-primary); color: #fff; }
  .qc-navlist__link--cta:hover { background: var(--qc-color-primary-light); color: #fff; }
  .qc-navlist__link:focus-visible { outline: none; box-shadow: var(--qc-focus-ring); }
  /* On the dark appbar, tint hovers light instead of the light sunken surface. */
  .qc-appbar .qc-navlist__link:hover { background: rgba(255, 255, 255, 0.12); }
  .qc-appbar .qc-navlist__link[aria-current="page"], .qc-appbar .qc-navlist__link--active { background: rgba(255, 255, 255, 0.16); }

  .qc-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; /* never shrink below the 44px min touch target under flex pressure */
    width: 44px; height: 44px; padding: 0;
    color: inherit; background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--qc-radius-md);
    cursor: pointer;
  }
  .qc-menu-toggle:focus-visible { outline: none; box-shadow: var(--qc-focus-ring); }
  .qc-menu-toggle .material-icons { font-size: 1.6rem; }

  /* ==========================================================================
     SITEFOOTER  (global, premium — distinct from legacy qc-footer)
     -----------------------------------------------------------------------------
     Rendered on every page (hardcoded in base.html.twig). Bootstrap's UNLAYERED
     `a { color; text-decoration }` outranks any layered rule, so footer link
     colours are re-asserted with !important. Every selector is a qc-sitefooter__*
     class with no other consumer, so the override is safe and self-contained —
     drop the !important once Bootstrap is retired.
     Focus is re-rung on dark via --_qc-foot-ring (the global purple ring is too
     low-contrast on the navy surface).
     ========================================================================== */
  .qc-sitefooter {
    --_qc-foot-ring: 0 0 0 3px rgba(255, 255, 255, 0.65);
    --_qc-foot-hairline: 1px solid rgba(255, 255, 255, 0.10);
    position: relative;
    background: var(--qc-surface-inverse);
    color: var(--qc-text-on-dark);
    padding-block: var(--qc-section-y);
  }
  /* Restrained brand accent along the very top edge. */
  .qc-sitefooter::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
    background: linear-gradient(90deg, var(--qc-color-primary), var(--qc-color-secondary));
  }

  /* --- A. Top band: brand + trust  |  contact ---------------------------- */
  .qc-sitefooter__top {
    display: grid; gap: var(--qc-space-10);
    padding-bottom: var(--qc-space-10); margin-bottom: var(--qc-space-10);
    border-bottom: var(--_qc-foot-hairline);
  }
  .qc-sitefooter__logo { display: block; height: 40px; width: auto; margin-bottom: var(--qc-space-5); }
  .qc-sitefooter__tagline { margin: 0; max-width: 52ch; color: var(--qc-neutral-300); line-height: var(--qc-lh-base); }

  .qc-sitefooter__trust {
    display: grid; gap: var(--qc-space-3);
    margin: var(--qc-space-6) 0 0; padding: 0; list-style: none;
  }
  .qc-sitefooter__trust li {
    display: flex; align-items: center; gap: var(--qc-space-3);
    color: var(--qc-neutral-200); font-size: var(--qc-fs-sm);
  }
  .qc-sitefooter__trust .material-icons { font-size: 20px; color: var(--qc-color-secondary); flex: none; }

  .qc-sitefooter__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--qc-space-3); }
  .qc-sitefooter__contact-title {
    margin: 0 0 var(--qc-space-1) !important;
    font-size: var(--qc-fs-sm) !important; font-weight: var(--qc-fw-semibold) !important;
    letter-spacing: var(--qc-ls-normal) !important; line-height: var(--qc-lh-snug) !important;
    color: var(--qc-neutral-400) !important;
  }
  .qc-sitefooter__contact-row {
    display: inline-flex; align-items: center; gap: var(--qc-space-2); min-height: 44px;
    color: var(--qc-neutral-200) !important; text-decoration: none !important;
    transition: color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-sitefooter__contact-row .material-icons { font-size: 20px; color: var(--qc-color-secondary); }
  .qc-sitefooter__contact-row:hover { color: #fff !important; }
  .qc-sitefooter__contact-row:focus-visible { outline: none; box-shadow: var(--_qc-foot-ring); border-radius: var(--qc-radius-sm); }
  .qc-sitefooter__contact-phone { font-size: var(--qc-fs-lg); font-weight: var(--qc-fw-semibold); }

  .qc-sitefooter__social { display: flex; flex-wrap: wrap; gap: var(--qc-space-3); margin: var(--qc-space-2) 0 0; padding: 0; list-style: none; }
  .qc-sitefooter__social-link {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--qc-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--qc-neutral-300) !important; text-decoration: none !important;
    transition: background-color var(--qc-dur-fast) var(--qc-ease-standard),
                color var(--qc-dur-fast) var(--qc-ease-standard),
                transform var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-sitefooter__social-link:hover { background: var(--qc-color-primary); color: #fff !important; transform: translateY(-2px); }
  .qc-sitefooter__social-link:focus-visible { outline: none; box-shadow: var(--_qc-foot-ring); }
  .qc-sitefooter__social-link .material-icons { font-size: 20px; }
  .qc-sitefooter__social-link svg { width: 18px; height: 18px; fill: currentColor; }

  /* --- B. Link columns (auto-fit: 2-up on phones → up to 6-up on desktop) - */
  .qc-sitefooter__grid { display: grid; gap: var(--qc-space-8) var(--qc-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  /* !important beats Bootstrap's UNLAYERED h2 typography (font-size/weight/etc.),
     same coexistence reason as the link colours above. */
  .qc-sitefooter__heading {
    margin: 0 0 var(--qc-space-4) !important;
    font-size: var(--qc-fs-base) !important; font-weight: var(--qc-fw-semibold) !important;
    letter-spacing: var(--qc-ls-normal) !important; line-height: var(--qc-lh-snug) !important;
    color: var(--qc-neutral-100) !important;
  }
  .qc-sitefooter__list { display: flex; flex-direction: column; gap: var(--qc-space-1); margin: 0; padding: 0; list-style: none; }
  .qc-sitefooter__link {
    display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--qc-space-1);
    color: var(--qc-neutral-300) !important; text-decoration: none !important;
    transition: color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-sitefooter__link:hover { color: #fff !important; }
  .qc-sitefooter__link:focus-visible { outline: none; box-shadow: var(--_qc-foot-ring); border-radius: var(--qc-radius-sm); }

  /* --- D. Popular local-service chips (data-driven, published-only) ------- */
  .qc-sitefooter__localseo { margin-top: var(--qc-space-10); padding-top: var(--qc-space-8); border-top: var(--_qc-foot-hairline); }
  .qc-sitefooter__localseo-label {
    display: inline-flex; align-items: center; gap: var(--qc-space-2); margin-bottom: var(--qc-space-4);
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold); color: var(--qc-neutral-300);
  }
  .qc-sitefooter__localseo-label .material-icons { font-size: 1.1em; color: var(--qc-color-secondary); }
  .qc-sitefooter__localseo-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qc-space-2) var(--qc-space-3); margin: 0; padding: 0; list-style: none; }
  .qc-sitefooter__localseo-link {
    display: inline-block; padding: var(--qc-space-1) var(--qc-space-4); font-size: var(--qc-fs-sm); line-height: 1.7;
    color: var(--qc-neutral-300) !important; text-decoration: none !important;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--qc-radius-pill);
    transition: border-color var(--qc-dur-fast) var(--qc-ease-standard),
                color var(--qc-dur-fast) var(--qc-ease-standard),
                background-color var(--qc-dur-fast) var(--qc-ease-standard);
  }
  .qc-sitefooter__localseo-link:hover { border-color: var(--qc-color-primary); background: rgba(106, 61, 232, 0.12); color: #fff !important; }
  .qc-sitefooter__localseo-link:focus-visible { outline: none; box-shadow: var(--_qc-foot-ring); }
  .qc-sitefooter__localseo-all {
    font-size: var(--qc-fs-sm); font-weight: var(--qc-fw-semibold);
    color: var(--qc-color-secondary) !important; text-decoration: none !important;
  }
  .qc-sitefooter__localseo-all:hover { color: #fff !important; }
  .qc-sitefooter__localseo-all:focus-visible { outline: none; box-shadow: var(--_qc-foot-ring); border-radius: var(--qc-radius-sm); }

  /* --- E. Bottom bar: micro-line/copyright + legal links ----------------- */
  .qc-sitefooter__bottom {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--qc-space-3) var(--qc-space-6);
    margin-top: var(--qc-space-10); padding-top: var(--qc-space-6);
    border-top: var(--_qc-foot-hairline);
    color: var(--qc-neutral-400); font-size: var(--qc-fs-sm);
  }
  .qc-sitefooter__bottom p { margin: 0; }
  .qc-sitefooter__bottom-brand { color: var(--qc-neutral-200); font-weight: var(--qc-fw-semibold); }
  .qc-sitefooter__bottom-links { display: flex; flex-wrap: wrap; gap: var(--qc-space-2) var(--qc-space-5); }
  .qc-sitefooter__bottom-link { color: var(--qc-neutral-300) !important; text-decoration: none !important; }
  .qc-sitefooter__bottom-link:hover { color: #fff !important; text-decoration: underline !important; }
  .qc-sitefooter__bottom-link:focus-visible { outline: none; box-shadow: var(--_qc-foot-ring); border-radius: var(--qc-radius-sm); }

  /* Tablet: bottom row goes inline. Desktop: top band splits brand | contact. */
  @media (min-width: 768px) {
    .qc-sitefooter__bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  }
  @media (min-width: 1024px) {
    .qc-sitefooter__top { grid-template-columns: 1.6fr 1fr; align-items: start; gap: var(--qc-space-16); }
  }

  /* ==========================================================================
     ACCORDION / FAQ  (built on <details>/<summary> — keyboard-accessible, no JS)
       <details class="qc-accordion__item"><summary class="qc-accordion__trigger">…
       …</summary><div class="qc-accordion__panel">…</div></details>
     ========================================================================== */
  .qc-accordion { display: flex; flex-direction: column; gap: var(--qc-space-3); }
  .qc-accordion__item { background: var(--qc-surface); border: 1px solid var(--qc-border); border-radius: var(--qc-radius-md); }
  .qc-accordion__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: var(--qc-space-3);
    width: 100%; padding: var(--qc-space-4) var(--qc-space-5);
    font-size: var(--qc-fs-lg); font-weight: var(--qc-fw-semibold); color: var(--qc-text);
    cursor: pointer; list-style: none;
  }
  .qc-accordion__trigger::-webkit-details-marker { display: none; }
  .qc-accordion__trigger::after {
    content: ""; flex: none; width: 0.6em; height: 0.6em; opacity: 0.6;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--qc-dur-base) var(--qc-ease-standard);
  }
  .qc-accordion__item[open] .qc-accordion__trigger::after { transform: rotate(225deg); }
  .qc-accordion__trigger:focus-visible { outline: none; box-shadow: var(--qc-focus-ring); border-radius: var(--qc-radius-md); }
  .qc-accordion__panel { padding: 0 var(--qc-space-5) var(--qc-space-5); color: var(--qc-text-muted); }
  .qc-accordion__panel > :first-child { margin-top: 0; }
}