/* SPDX-License-Identifier: LicenseRef-Proprietary */
/* Copyright (C) 2026, araCreate Group */
/* Author: Vishnu <vishnu@aracreate.group> */
/* Description: This file contains the component library */

/* ==========================================================================
   araCreate Design System — Components
   Load after tokens.css, base.css and signature.css.
   --------------------------------------------------------------------------
   Every component here is built from the SEMANTIC token layer only. No raw
   colour, size or timing appears below — if you find one, it is a bug.

   Structure:
     1  Button            9  Card              17  Tooltip
     2  Field             10 Accordion         18  Progress
     3  Input             11 Tabs              19  Stat
     4  Choice            12 Breadcrumb        20  Testimonial
     5  Switch            13 Pagination        21  Pricing
     6  Badge             14 Table             22  Steps
     7  Avatar            15 Alert             23  Logo strip
     8  Icon              16 Modal             24  Utilities
   ========================================================================== */


/* ==========================================================================
   1 · BUTTON
   The one component deliberately without the dotted edge — a yellow fill is
   its signature, and a dotted border round it reads as a rendering fault.
   ========================================================================== */

/* The button's five colour slots. These were private, underscore-prefixed
   locals declared on .ac-btn itself, which meant the base button's own colours
   were not reachable as tokens: a consumer could re-theme the action colour but
   not the button. They are named tokens at :root now. The variants below
   re-point them — the same mechanism as before, with public names. */
:root {
  --ac-btn-bg:        var(--ac-accent);
  --ac-btn-text:      var(--ac-text-on-accent);
  --ac-btn-border:    transparent;
  --ac-btn-bg-hover:  var(--ac-accent-hover);
  --ac-btn-bg-active: var(--ac-accent-active);
}

.ac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ac-space-2);
  padding: var(--ac-space-5) var(--ac-space-7);
  border: var(--ac-border-width) solid var(--ac-btn-border);
  border-radius: var(--ac-edge-radius);
  background-color: var(--ac-btn-bg);
  color: var(--ac-btn-text);
  font-family: var(--ac-font-text);
  font-size: var(--ac-text-ui);
  font-weight: var(--ac-weight-medium);
  line-height: 1em;
  letter-spacing: var(--ac-tracking-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color var(--ac-duration-fast) var(--ac-ease),
              border-color var(--ac-duration-fast) var(--ac-ease),
              color var(--ac-duration-fast) var(--ac-ease),
              transform var(--ac-duration) var(--ac-ease),
              box-shadow var(--ac-duration) var(--ac-ease);
}

.ac-btn:hover {
  background-color: var(--ac-btn-bg-hover);
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--ac-shadow-lift);
}

.ac-btn:active {
  background-color: var(--ac-btn-bg-active);
  transform: translateY(-2px) scale(1.01);
}

/* --- Variants ---------------------------------------------------------- */

/* Outline. The border is --ac-border-control, not the divider grey, because a
   button outline is a control edge and has to reach 3:1. */
/* KNOWN, ACCEPTED: this label is graphite on Golden Sun at 4.45:1, 0.05 under
   4.5:1, and cannot be repaired inside the palette — since 1 Sep 2026 graphite
   is the darkest colour in the system. It is the LAST such case: every other
   small-text accent fill moved to --ac-surface-accent-soft on 1 Sep 2026.
   Repairing this one means a graphite-filled primary button with a white
   label, which is a brand decision. See docs/accessibility.md. */
.ac-btn--outline {
  --ac-btn-bg: transparent;
  --ac-btn-text: var(--ac-text-heading);
  --ac-btn-border: var(--ac-border-control);
  --ac-btn-bg-hover: var(--ac-surface-accent);
  --ac-btn-bg-active: var(--ac-accent-active);
}
.ac-btn--outline:hover { color: var(--ac-text-on-accent); border-color: var(--ac-surface-accent); }

.ac-btn--ghost {
  --ac-btn-bg: transparent;
  --ac-btn-text: var(--ac-text-heading);
  --ac-btn-bg-hover: var(--ac-info-surface);
  --ac-btn-bg-active: var(--ac-surface-subtle);
}
.ac-btn--ghost:hover { transform: none; box-shadow: none; }

.ac-btn--inverse {
  --ac-btn-bg: var(--ac-surface-dark);
  --ac-btn-text: var(--ac-text-inverse);
  --ac-btn-bg-hover: var(--ac-inverse-bg-hover);
  --ac-btn-bg-active: var(--ac-inverse-bg-hover);
}

.ac-btn--danger {
  --ac-btn-bg: var(--ac-danger);
  --ac-btn-text: var(--ac-pure-white);
  --ac-btn-bg-hover: var(--ac-danger-bg-hover);
  --ac-btn-bg-active: var(--ac-danger-bg-hover);
}

/* Link. ACDS shipped a fourth "variant" that was really a text link, and
   consumers still ask for it by that name. It is a button that reads as an
   inline link: no fill, no box, no lift — an underlined word that jumps on
   hover reads as a rendering fault, not an affordance. Typography matches the
   `a` rule in base.css so it sits inside a sentence without disturbing it.
   Sizes do not apply: `Button` withholds the size class for this variant. */
.ac-btn--link {
  --ac-btn-bg: transparent;
  --ac-btn-text: var(--ac-text-primary);
  --ac-btn-bg-hover: transparent;
  --ac-btn-bg-active: transparent;
  display: inline;
  padding: 0;
  border-color: transparent;
  font-size: var(--ac-text-link);
  font-weight: var(--ac-weight-medium);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}
.ac-btn--link:hover,
.ac-btn--link:active {
  color: var(--ac-text-heading);
  transform: none;
  box-shadow: none;
}

/* --- Sizes ------------------------------------------------------------- */

.ac-btn--sm { padding: var(--ac-space-3) var(--ac-space-5);
              font-size: var(--ac-text-xs); }
.ac-btn--lg { padding: var(--ac-space-7) var(--ac-space-9);
              font-size: var(--ac-text-base); }

.ac-btn--block { display: flex; width: 100%; }

/* Icon-only. A visible label is gone, so an aria-label is mandatory — the
   selector below makes the omission obvious in the browser. */
.ac-btn--icon { padding: var(--ac-space-4); aspect-ratio: 1; }
.ac-btn--icon:not([aria-label]):not([title]) { outline: 2px dashed var(--ac-danger); }

/* --- States ------------------------------------------------------------ */

.ac-btn:disabled,
.ac-btn[aria-disabled="true"] {
  background-color: var(--ac-disabled-bg);
  border-color: transparent;
  color: var(--ac-disabled-text);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* Loading. The label stays in the DOM for screen readers and is hidden
   visually, so the button does not change width mid-action and the change is
   announced through aria-busy. */
.ac-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.ac-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1em; height: 1em;
  margin: -.5em 0 0 -.5em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--ac-radius-pill);
  color: var(--ac-text-on-accent);
  animation: ac-spin var(--ac-duration-slow) linear infinite;
}
.ac-btn--danger[aria-busy="true"]::after,
.ac-btn--inverse[aria-busy="true"]::after { color: var(--ac-pure-white); }

@keyframes ac-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ac-btn:hover, .ac-btn:active { transform: none; }
  .ac-btn[aria-busy="true"]::after { animation-duration: 2s; }
}

/* A row of buttons. */
.ac-btn-group { display: flex; flex-wrap: wrap; gap: var(--ac-space-4); }


/* ==========================================================================
   2 · FIELD
   Label, control, hint and error as one unit. The error is wired to the
   control with aria-describedby in the markup; this styles the result.
   ========================================================================== */

.ac-field { display: flex; flex-direction: column; gap: var(--ac-space-2); }

.ac-field__label {
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-label);
  text-transform: uppercase;
  color: var(--ac-text-heading);
}

/* Required marker. Never colour alone — the asterisk carries the meaning and
   the colour only reinforces it. */
.ac-field__label[data-ac-required]::after {
  content: " *";
  color: var(--ac-danger);
}

.ac-field__hint {
  font-size: var(--ac-text-xs);
  color: var(--ac-text-muted);
  line-height: var(--ac-leading-tight);
}

.ac-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-1);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  color: var(--ac-danger);
  line-height: var(--ac-leading-tight);
}

.ac-field[data-ac-invalid] .ac-input,
.ac-input[aria-invalid="true"] {
  border-color: var(--ac-danger);
  border-style: solid;
}

.ac-field--inline { flex-direction: row; align-items: center; gap: var(--ac-space-4); }


/* ==========================================================================
   3 · INPUT
   The dotted edge arrives from signature.css; this adds the box model. Focus
   switches the edge to solid so a dotted border and a dotted focus ring can
   never be confused.
   ========================================================================== */

.ac-input {
  width: 100%;
  padding: var(--ac-space-4) var(--ac-space-5);
  background-color: var(--ac-surface-raised);
  color: var(--ac-text-primary);
  font-family: var(--ac-font-text);
  font-size: var(--ac-text-base);
  font-weight: var(--ac-weight-light);
  line-height: var(--ac-leading-tight);
  transition: border-color var(--ac-duration-fast) var(--ac-ease);
}

.ac-input::placeholder { color: var(--ac-text-placeholder); opacity: 1; }

.ac-input:disabled {
  background-color: var(--ac-disabled-bg);
  color: var(--ac-disabled-text);
  cursor: not-allowed;
}

.ac-input--sm { padding: var(--ac-space-2) var(--ac-space-4); font-size: var(--ac-text-sm); }
.ac-input--lg { padding: var(--ac-space-5) var(--ac-space-7); }

textarea.ac-input { min-height: 7em; resize: vertical; line-height: var(--ac-leading-body); }

select.ac-input {
  appearance: none;
  padding-right: var(--ac-space-10);
  cursor: pointer;
  /* Chevron drawn in CSS so the control needs no icon font and no image. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - var(--ac-space-7)) calc(50% - 2px),
    calc(100% - var(--ac-space-5)) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Search box: an input with an icon slot on the left. */
.ac-search { position: relative; display: flex; align-items: center; }
.ac-search .ac-icon {
  position: absolute;
  left: var(--ac-space-5);
  color: var(--ac-text-muted);
  pointer-events: none;
}
.ac-search .ac-input { padding-left: var(--ac-space-10); }


/* ==========================================================================
   4 · CHOICE — checkbox and radio
   Built from the real control with appearance:none, so keyboard, form
   submission and screen readers all work without a line of JavaScript.
   ========================================================================== */

.ac-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-4);
  cursor: pointer;
  font-size: var(--ac-text-base);
  font-weight: var(--ac-weight-light);
  line-height: var(--ac-leading-tight);
}

.ac-choice input[type="checkbox"],
.ac-choice input[type="radio"] {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  margin-top: .12em;
  border: var(--ac-border-width) solid var(--ac-border-control);
  background-color: var(--ac-surface-raised);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--ac-duration-fast) var(--ac-ease),
              border-color var(--ac-duration-fast) var(--ac-ease);
}

.ac-choice input[type="radio"] { border-radius: var(--ac-radius-pill); }

.ac-choice input[type="checkbox"]::before {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid var(--ac-text-on-accent);
  border-bottom: 2px solid var(--ac-text-on-accent);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--ac-duration-fast) var(--ac-ease);
}

.ac-choice input[type="radio"]::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--ac-radius-pill);
  background-color: var(--ac-text-on-accent);
  transform: scale(0);
  transition: transform var(--ac-duration-fast) var(--ac-ease);
}

.ac-choice input:checked {
  background-color: var(--ac-surface-accent);
  border-color: var(--ac-surface-accent);
}
.ac-choice input:checked::before { transform: rotate(-45deg) scale(1); }
.ac-choice input[type="radio"]:checked::before { transform: scale(1); }

.ac-choice input:indeterminate { background-color: var(--ac-surface-accent);
                                 border-color: var(--ac-surface-accent); }
.ac-choice input:indeterminate::before {
  width: 10px; height: 0;
  border-left: 0;
  border-bottom: 2px solid var(--ac-text-on-accent);
  transform: none;
}

.ac-choice input:disabled {
  background-color: var(--ac-disabled-bg);
  border-color: var(--ac-disabled-bg);
  cursor: not-allowed;
}
.ac-choice:has(input:disabled) { color: var(--ac-disabled-text); cursor: not-allowed; }

.ac-choice__hint {
  display: block;
  font-size: var(--ac-text-xs);
  color: var(--ac-text-muted);
  margin-top: 2px;
}

.ac-choice-group { display: flex; flex-direction: column; gap: var(--ac-space-4); }
.ac-choice-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--ac-space-7); }


/* ==========================================================================
   5 · SWITCH
   A checkbox that looks like a switch. Still a checkbox underneath.
   ========================================================================== */

.ac-switch { display: flex; align-items: center; gap: var(--ac-space-4);
             cursor: pointer; font-weight: var(--ac-weight-light); }

.ac-switch input {
  appearance: none;
  flex: none;
  width: 42px; height: 24px;
  margin: 0;
  border: var(--ac-border-width) solid var(--ac-border-control);
  border-radius: var(--ac-radius-pill);
  background-color: var(--ac-surface-raised);
  cursor: pointer;
  position: relative;
  transition: background-color var(--ac-duration-fast) var(--ac-ease),
              border-color var(--ac-duration-fast) var(--ac-ease);
}

.ac-switch input::after {
  content: "";
  position: absolute;
  top: 50%; left: 3px;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: var(--ac-radius-pill);
  background-color: var(--ac-border-control);
  transition: transform var(--ac-duration-fast) var(--ac-ease),
              background-color var(--ac-duration-fast) var(--ac-ease);
}

.ac-switch input:checked { background-color: var(--ac-surface-accent);
                           border-color: var(--ac-surface-accent); }
.ac-switch input:checked::after { transform: translateX(18px);
                                  background-color: var(--ac-text-on-accent); }

.ac-switch input:disabled { background-color: var(--ac-disabled-bg);
                            border-color: var(--ac-disabled-bg); cursor: not-allowed; }


/* ==========================================================================
   6 · BADGE, TAG, PILL
   ========================================================================== */

.ac-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ac-space-1);
  padding: 3px var(--ac-space-2);
  border: var(--ac-border-width) solid transparent;
  border-radius: var(--ac-edge-radius);
  background-color: var(--ac-info-surface);
  color: var(--ac-text-heading);
  font-size: var(--ac-text-label);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* GOLDEN SOFT, NOT GOLDEN SUN — 1 Sep 2026. This fill carries text below
   19px, where graphite on Golden Sun is 4.45:1. Golden Soft measures 6.63:1
   and passes at every size. Fills that carry NO text (ticks, switches, slider
   tracks, bars, rules) stay Golden Sun. See docs/accessibility.md. */
.ac-badge--accent  { background-color: var(--ac-surface-accent-soft); color: var(--ac-text-on-accent); }
.ac-badge--inverse { background-color: var(--ac-surface-dark); color: var(--ac-text-inverse); }
.ac-badge--success { background-color: var(--ac-success-surface); color: var(--ac-success); }
.ac-badge--error   { background-color: var(--ac-danger-surface);   color: var(--ac-danger); }
.ac-badge--warning { background-color: var(--ac-warning-surface); color: var(--ac-text-heading); }
.ac-badge--outline { background-color: transparent; border-color: var(--ac-border-control); }
.ac-badge--pill    { border-radius: var(--ac-radius-pill); padding-inline: var(--ac-space-4); }

/* A dot for status, paired with text — never colour alone. */
.ac-badge__dot {
  width: 6px; height: 6px;
  border-radius: var(--ac-radius-pill);
  background-color: currentColor;
  flex: none;
}

/* Removable tag. The remove control is a real button, so it is reachable by
   keyboard and announced. */
.ac-tag { display: inline-flex; align-items: center; gap: var(--ac-space-2);
          padding: var(--ac-space-1) var(--ac-space-2) var(--ac-space-1) var(--ac-space-4);
          border: var(--ac-border-width) solid var(--ac-border);
          border-radius: var(--ac-radius-pill);
          background-color: var(--ac-surface-raised);
          font-size: var(--ac-text-xs); color: var(--ac-text-primary); }

.ac-tag__remove {
  display: grid; place-content: center;
  width: 16px; height: 16px;
  padding: 0;
  border: 0; border-radius: var(--ac-radius-pill);
  background-color: var(--ac-info-surface);
  color: var(--ac-text-heading);
  font-size: var(--ac-text-micro); line-height: 1; cursor: pointer;
  transition: background-color var(--ac-duration-fast) var(--ac-ease);
}
.ac-tag__remove:hover { background-color: var(--ac-danger); color: var(--ac-pure-white); }

.ac-tag-group { display: flex; flex-wrap: wrap; gap: var(--ac-space-2); }


/* ==========================================================================
   7 · AVATAR
   ========================================================================== */

.ac-avatar {
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 40px; height: 40px;
  border-radius: var(--ac-radius-pill);
  background-color: var(--ac-surface-dark);
  color: var(--ac-text-inverse);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-label);
  overflow: hidden;
  text-transform: uppercase;
}

.ac-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.ac-avatar--sm { width: 28px; height: 28px; font-size: var(--ac-text-micro); }
.ac-avatar--lg { width: 64px; height: 64px; font-size: var(--ac-text-base); }
.ac-avatar--xl { width: 96px; height: 96px; font-size: var(--ac-h5); }
.ac-avatar--square { border-radius: var(--ac-edge-radius); }
.ac-avatar--accent { background-color: var(--ac-surface-accent-soft); color: var(--ac-text-on-accent); }

/* Overlapping group. The ring is the page surface, so avatars read as
   separate even where they overlap. */
.ac-avatar-group { display: flex; }
.ac-avatar-group .ac-avatar { box-shadow: 0 0 0 2px var(--ac-surface-page); }
.ac-avatar-group .ac-avatar + .ac-avatar { margin-left: -12px; }


/* ==========================================================================
   8 · ICON
   Icons are inline SVG using currentColor, so they inherit text colour and
   never need a variant per surface.
   ========================================================================== */

.ac-icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}

.ac-icon--sm { width: .9em;  height: .9em; }
.ac-icon--lg { width: 1.5em; height: 1.5em; }
.ac-icon--xl { width: 2.5em; height: 2.5em; }
.ac-icon--filled { fill: currentColor; stroke: none; }

/* A decorative icon must be hidden from screen readers; a meaningful one
   needs a label. This flags the case where neither was declared. */
.ac-icon:not([aria-hidden]):not([role]) { outline: 1px dashed var(--ac-danger); }


/* ==========================================================================
   9 · CARD
   The dotted edge arrives by default from signature.css. Six purpose-built
   kinds, all the same box.
   ========================================================================== */

.ac-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ac-surface-raised);
  color: var(--ac-text-primary);
  overflow: hidden;
  text-decoration: none;
}

.ac-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
                  background-color: var(--ac-surface-subtle); }
.ac-card__media img { width: 100%; height: 100%; object-fit: cover;
                      transition: transform var(--ac-duration-slow) var(--ac-ease); }
.ac-card__media--square  { aspect-ratio: 1; }
.ac-card__media--portrait { aspect-ratio: 3 / 4; }

.ac-card__body { display: flex; flex-direction: column; gap: var(--ac-space-2);
                 padding: var(--ac-space-8); flex: 1; }

.ac-card__eyebrow {
  font-size: var(--ac-text-label);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-wide);
  text-transform: uppercase;
  color: var(--ac-text-muted);
}

.ac-card__title {
  font-size: var(--ac-h5);
  font-weight: var(--ac-weight-regular);
  line-height: 1.3;
  color: var(--ac-text-heading);
  margin: 0;
}
.ac-card__title--sm { font-size: var(--ac-h6); }

.ac-card__text { font-size: var(--ac-text-sm); color: var(--ac-text-primary);
                 margin: 0; max-width: none; }

.ac-card__meta { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--ac-space-4); font-size: var(--ac-text-xs);
                 color: var(--ac-text-muted); margin-top: auto;
                 padding-top: var(--ac-space-4); }

.ac-card__footer { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--ac-space-4); padding: var(--ac-space-6) var(--ac-space-8);
                   border-top: var(--ac-border-width) solid var(--ac-border); }

/* A block-level link must not pass link typography down to its contents.
   base.css styles `a` at 12px weight 600 — correct for a link in a sentence,
   wrong for a card. Without this reset every paragraph inside a card-as-link
   renders bold, which is exactly what it did until someone looked at it. The
   contrast and behaviour gates both passed while it was broken; only reading
   the page caught it. */
a.ac-card,
a.ac-post,
a.ac-service-list__item,
a.ac-price,
a.ac-panel {
  font-size: var(--ac-text-base);
  font-weight: var(--ac-weight-light);
  letter-spacing: var(--ac-tracking-normal);
  line-height: var(--ac-leading-body);
}

/* A whole card that is a link. Hover closes the dotted sides and lifts it —
   the same gesture the edge uses everywhere else. */
a.ac-card,
.ac-card--link {
  transition: border-color var(--ac-duration-fast) var(--ac-ease),
              border-style var(--ac-duration-fast) var(--ac-ease),
              transform var(--ac-duration) var(--ac-ease),
              box-shadow var(--ac-duration) var(--ac-ease);
}
a.ac-card:hover,
.ac-card--link:hover,
.ac-card--link:focus-within {
  border-style: solid;
  transform: translateY(-4px);
  box-shadow: var(--ac-shadow-lift);
}
a.ac-card:hover .ac-card__media img,
.ac-card--link:hover .ac-card__media img { transform: scale(1.04); }

/* --- Kinds -------------------------------------------------------------- */

/* Course — the Academy case. Price and duration are the deciding facts, so
   they sit in the footer rather than buried in the body. */
.ac-card--course .ac-card__footer { background-color: var(--ac-info-surface); }
.ac-card--course .ac-card__price { font-size: var(--ac-h5);
                                   color: var(--ac-text-heading);
                                   font-weight: var(--ac-weight-regular); }

/* Service — no image, a large icon instead. */
.ac-card--service .ac-card__body { gap: var(--ac-space-4); }
.ac-card--service .ac-icon { color: var(--ac-text-heading); }

/* Person — portrait, name, role, links. */
.ac-card--person { text-align: left; }
.ac-card--person .ac-card__title { font-size: var(--ac-h6); }
.ac-card--person .ac-card__role { font-size: var(--ac-text-xs);
                                  color: var(--ac-text-muted); }

/* Stat — one number doing the work. */
.ac-card--stat { align-items: flex-start; }
.ac-card--stat .ac-card__body { gap: var(--ac-space-1); }
.ac-card__number { font-size: var(--ac-text-figure); font-weight: var(--ac-weight-medium);
                   line-height: 1; color: var(--ac-text-heading);
                   letter-spacing: -.02em; }

/* Project — image-led, text over nothing. */
.ac-card--project .ac-card__media { aspect-ratio: 4 / 3; }

/* Article — the blog case. */
.ac-card--article .ac-card__meta { border-top: 0; }

.ac-card--accent  { background-color: var(--ac-surface-accent-soft);
                    color: var(--ac-text-on-accent); }
.ac-card--accent .ac-card__title,
.ac-card--accent .ac-card__number { color: var(--ac-text-on-accent); }
.ac-card--accent .ac-card__eyebrow { color: var(--ac-text-on-accent); }

.ac-card--flat { background-color: transparent; }
.ac-card--pad-sm .ac-card__body { padding: var(--ac-space-6); }

/* A grid of cards. */
/* The grid's minimum column. All three at :root so they are tokens a consumer
   can retune, rather than values hidden inside modifier classes. */
:root {
  --ac-card-min:        260px;
  --ac-card-min-wide:   340px;
  --ac-card-min-narrow: 200px;
}

.ac-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ac-card-min), 1fr));
  gap: var(--ac-space-8);
}
.ac-card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(var(--ac-card-min-wide), 1fr)); }
.ac-card-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(var(--ac-card-min-narrow), 1fr)); }


/* ==========================================================================
   10 · ACCORDION
   Built on <details>, so it opens and closes with no JavaScript at all and
   is keyboard-operable for free.
   ========================================================================== */

.ac-accordion { border-top: var(--ac-border-width) solid var(--ac-border); }

.ac-accordion__item { border-bottom: var(--ac-border-width) solid var(--ac-border); }

.ac-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-space-7);
  padding: var(--ac-space-7) 0;
  cursor: pointer;
  font-size: var(--ac-h6);
  font-weight: var(--ac-weight-medium);
  color: var(--ac-text-heading);
  list-style: none;
  transition: color var(--ac-duration-fast) var(--ac-ease);
}
.ac-accordion__head::-webkit-details-marker { display: none; }
.ac-accordion__head:hover { color: var(--ac-text-primary); }

.ac-accordion__head .ac-icon {
  flex: none;
  color: var(--ac-text-muted);
  transition: transform var(--ac-duration-fast) var(--ac-ease);
}
.ac-accordion__item[open] .ac-accordion__head .ac-icon { transform: rotate(180deg); }

.ac-accordion__body {
  padding-bottom: var(--ac-space-8);
  font-size: var(--ac-text-base);
  max-width: var(--ac-content-max);
}
.ac-accordion__body > :last-child { margin-bottom: 0; }

/* Compact: the live site's service lists — 14px light rows, 12px of padding,
   many items in a column. Added 1 Sep 2026 for acds-template-web vertical. */
.ac-accordion--compact .ac-accordion__head {
  padding: var(--ac-space-4) var(--ac-space-3);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-light);
}
.ac-accordion--compact .ac-accordion__head .ac-icon { font-size: 1em; }
.ac-accordion--compact .ac-accordion__body { padding: 0 var(--ac-space-3) var(--ac-space-6); font-size: var(--ac-text-sm); }


/* ==========================================================================
   11 · TABS
   ARIA tabs. components.js wires the keyboard behaviour; the styling holds
   up on its own if the script never loads, because the panels are ordinary
   sections and only get hidden once the script takes over.
   ========================================================================== */

.ac-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ac-space-1);
  border-bottom: var(--ac-border-width) solid var(--ac-border);
}

.ac-tabs__tab {
  padding: var(--ac-space-4) var(--ac-space-7);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--ac-text-muted);
  font-family: var(--ac-font-text);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ac-duration-fast) var(--ac-ease),
              border-color var(--ac-duration-fast) var(--ac-ease);
}
.ac-tabs__tab:hover { color: var(--ac-text-heading); }
.ac-tabs__tab[aria-selected="true"] {
  color: var(--ac-text-heading);
  border-bottom-color: var(--ac-surface-accent);
}

.ac-tabs__panel { padding-top: var(--ac-space-8); }
.ac-tabs__panel[hidden] { display: none; }


/* ==========================================================================
   12 · BREADCRUMB
   ========================================================================== */

.ac-breadcrumb { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--ac-space-2); font-size: var(--ac-text-xs); }
.ac-breadcrumb a { font-size: inherit; font-weight: var(--ac-weight-regular);
                   color: var(--ac-text-muted); text-decoration: none; }
.ac-breadcrumb a:hover { color: var(--ac-text-heading); text-decoration: underline; }
/* The separator is visible text, so it takes a text token, not the divider
   grey. Using --ac-border here measured 1.67:1 — a border colour is
   not a text colour, and the two are separate tokens for this reason. */
.ac-breadcrumb__sep { color: var(--ac-text-muted); }
.ac-breadcrumb [aria-current="page"] { color: var(--ac-text-heading);
                                        font-weight: var(--ac-weight-medium); }


/* ==========================================================================
   13 · PAGINATION
   ========================================================================== */

.ac-pagination { display: flex; flex-wrap: wrap; align-items: center;
                 gap: var(--ac-space-1); }

.ac-pagination__link {
  display: grid; place-content: center;
  min-width: 38px; height: 38px;
  padding: 0 var(--ac-space-2);
  border: var(--ac-border-width) solid transparent;
  color: var(--ac-text-primary);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  text-decoration: none;
  transition: background-color var(--ac-duration-fast) var(--ac-ease),
              border-color var(--ac-duration-fast) var(--ac-ease);
}
.ac-pagination__link:hover { border-color: var(--ac-border-control); }
.ac-pagination__link[aria-current="page"] {
  background-color: var(--ac-surface-accent-soft);
  color: var(--ac-text-on-accent);
}
.ac-pagination__link[aria-disabled="true"] { color: var(--ac-disabled-text);
                                              pointer-events: none; }
.ac-pagination__gap { padding: 0 var(--ac-space-1); color: var(--ac-text-muted); }


/* ==========================================================================
   14 · TABLE
   The table takes the dotted edge from signature.css. Cells deliberately do
   not — a dotted box round every cell is unreadable.
   ========================================================================== */

.ac-table-wrap { overflow-x: auto; }

.ac-table { width: 100%; border-collapse: collapse; font-size: var(--ac-text-sm); }

.ac-table th {
  position: sticky; top: 0;
  background-color: var(--ac-surface-dark);
  color: var(--ac-text-inverse);
  text-align: left;
  font-size: var(--ac-text-label);
  font-weight: var(--ac-weight-medium);
  letter-spacing: var(--ac-tracking-label);
  text-transform: uppercase;
  padding: var(--ac-space-4) var(--ac-space-6);
  border-bottom: 0;
  white-space: nowrap;
}

.ac-table td { padding: var(--ac-space-4) var(--ac-space-6);
               border-bottom: var(--ac-border-width) solid var(--ac-border);
               vertical-align: top; }

.ac-table tbody tr:last-child td { border-bottom: 0; }
.ac-table tbody tr { transition: background-color var(--ac-duration-fast) var(--ac-ease); }
.ac-table--hover tbody tr:hover { background-color: var(--ac-info-surface); }
.ac-table--striped tbody tr:nth-child(even) { background-color: var(--ac-info-surface); }
.ac-table--compact th, .ac-table--compact td { padding: var(--ac-space-2) var(--ac-space-4); }

.ac-table__num { text-align: right; font-family: var(--ac-font-mono);
                 white-space: nowrap; }

/* Sortable header. The button is real, so it is reachable and announced. */
.ac-table__sort {
  display: inline-flex; align-items: center; gap: var(--ac-space-1);
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}
.ac-table__sort .ac-icon { opacity: .4; transition: opacity var(--ac-duration-fast) var(--ac-ease); }
.ac-table__sort:hover .ac-icon { opacity: 1; }
.ac-table th[aria-sort] .ac-table__sort .ac-icon { opacity: 1; color: var(--ac-golden-sun); }
.ac-table th[aria-sort="descending"] .ac-table__sort .ac-icon { transform: rotate(180deg); }


/* ==========================================================================
   15 · ALERT AND TOAST
   Every one pairs its colour with an icon and a word, so the meaning never
   rests on colour alone.
   ========================================================================== */

.ac-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ac-space-4);
  padding: var(--ac-space-6) var(--ac-space-7);
  border-left: 3px solid var(--ac-info);
  background-color: var(--ac-info-surface);
  color: var(--ac-text-heading);
  font-size: var(--ac-text-sm);
  line-height: var(--ac-leading-tight);
}
.ac-alert__title { display: block; font-weight: var(--ac-weight-medium);
                   margin-bottom: 2px; }
.ac-alert__body { flex: 1; }
.ac-alert__body > :last-child { margin-bottom: 0; }
.ac-alert .ac-icon { margin-top: .1em; }

.ac-alert--success { border-left-color: var(--ac-success);
                     background-color: var(--ac-success-surface); }
.ac-alert--success .ac-icon, .ac-alert--success .ac-alert__title { color: var(--ac-success); }
.ac-alert--error   { border-left-color: var(--ac-danger);
                     background-color: var(--ac-danger-surface); }
.ac-alert--error .ac-icon, .ac-alert--error .ac-alert__title { color: var(--ac-danger); }
.ac-alert--warning { border-left-color: var(--ac-warning);
                     background-color: var(--ac-warning-surface); }

.ac-alert__close { margin-left: auto; }

/* Toast — the same thing, floating. aria-live in the markup announces it. */
.ac-toast-region {
  position: fixed;
  right: var(--ac-space-7);
  bottom: var(--ac-space-7);
  z-index: var(--ac-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ac-space-4);
  width: min(360px, calc(100% - var(--ac-space-10)));
  pointer-events: none;
}
.ac-toast {
  pointer-events: auto;
  background-color: var(--ac-surface-raised);
  box-shadow: var(--ac-shadow-md);
  animation: ac-toast-in var(--ac-duration) var(--ac-ease);
}
@keyframes ac-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ac-toast { animation: none; } }


/* ==========================================================================
   16 · MODAL
   Built on <dialog>, so the browser supplies focus trapping, Escape to close
   and the backdrop. Far less to get wrong than a div.
   ========================================================================== */

.ac-modal {
  width: min(560px, calc(100% - var(--ac-space-10)));
  max-height: min(80vh, 720px);
  padding: 0;
  background-color: var(--ac-surface-raised);
  color: var(--ac-text-primary);
  box-shadow: var(--ac-shadow-lg);
  overflow: auto;
}
.ac-modal::backdrop { background-color: var(--ac-scrim); }

.ac-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ac-space-7);
  padding: var(--ac-space-8);
  border-bottom: var(--ac-border-width) solid var(--ac-border);
}
.ac-modal__title { font-size: var(--ac-h5); font-weight: var(--ac-weight-regular);
                   color: var(--ac-text-heading); margin: 0; }
.ac-modal__body { padding: var(--ac-space-8); }
.ac-modal__body > :last-child { margin-bottom: 0; }
.ac-modal__foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ac-space-4);
  padding: var(--ac-space-7) var(--ac-space-8);
  border-top: var(--ac-border-width) solid var(--ac-border);
  background-color: var(--ac-info-surface);
}
.ac-modal--wide { width: min(880px, calc(100% - var(--ac-space-10))); }


/* ==========================================================================
   17 · DROPDOWN AND TOOLTIP
   ========================================================================== */

.ac-dropdown { position: relative; display: inline-block; }

.ac-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--ac-space-1));
  left: 0;
  z-index: var(--ac-z-dropdown);
  min-width: 200px;
  padding: var(--ac-space-2) 0;
  background-color: var(--ac-surface-raised);
  box-shadow: var(--ac-shadow-md);
  border: var(--ac-border-width) solid var(--ac-border);
}
.ac-dropdown__menu[hidden] { display: none; }
.ac-dropdown__menu--right { left: auto; right: 0; }

.ac-dropdown__item {
  display: flex; align-items: center; gap: var(--ac-space-4);
  width: 100%;
  padding: var(--ac-space-3) var(--ac-space-6);
  border: 0; background: none;
  color: var(--ac-text-primary);
  font-family: var(--ac-font-text);
  font-size: var(--ac-text-sm);
  font-weight: var(--ac-weight-light);
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ac-duration-fast) var(--ac-ease);
}
.ac-dropdown__item:hover { background-color: var(--ac-info-surface);
                           color: var(--ac-text-heading); }
.ac-dropdown__sep { height: 1px; margin: var(--ac-space-2) 0;
                    background-color: var(--ac-border); }

/* Tooltip. Pure CSS on hover and focus. Anything a visitor MUST read does
   not belong in a tooltip — a hint under the field is where that goes. */
.ac-tooltip { position: relative; display: inline-flex; }
.ac-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + var(--ac-space-2));
  left: 50%;
  z-index: var(--ac-z-overlay);
  width: max-content;
  max-width: 240px;
  padding: var(--ac-space-2) var(--ac-space-4);
  background-color: var(--ac-surface-dark);
  color: var(--ac-text-inverse);
  font-size: var(--ac-text-xs);
  line-height: var(--ac-leading-tight);
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity var(--ac-duration-fast) var(--ac-ease),
              transform var(--ac-duration-fast) var(--ac-ease);
}
.ac-tooltip:hover .ac-tooltip__bubble,
.ac-tooltip:focus-within .ac-tooltip__bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ==========================================================================
   18 · PROGRESS AND METER
   ========================================================================== */

.ac-progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--ac-surface-subtle);
  overflow: hidden;
}
.ac-progress-bar__fill {
  height: 100%;
  width: var(--ac-value, 0%);
  background-color: var(--ac-surface-accent);
  transition: width var(--ac-duration) var(--ac-ease);
}
.ac-progress-bar--tall { height: 12px; }
.ac-progress-bar__fill--inverse { background-color: var(--ac-surface-dark); }

/* An indeterminate bar, for when the length is unknown. */
.ac-progress-bar--indeterminate .ac-progress-bar__fill {
  width: 35%;
  animation: ac-indeterminate 1.4s var(--ac-ease) infinite;
}
@keyframes ac-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-progress-bar--indeterminate .ac-progress-bar__fill { animation: none; width: 100%; }
}


/* ==========================================================================
   19 · STAT
   ========================================================================== */

.ac-stat { display: flex; flex-direction: column; gap: var(--ac-space-1); }
.ac-stat__value { font-size: var(--ac-text-figure); font-weight: var(--ac-weight-medium); line-height: 1;
                  color: var(--ac-text-heading); letter-spacing: -.02em; }
.ac-stat__label { font-size: var(--ac-text-label); letter-spacing: var(--ac-tracking-label);
                  text-transform: uppercase; color: var(--ac-text-muted); }
.ac-stat__note  { font-size: var(--ac-text-xs); color: var(--ac-text-muted); }
.ac-stat--lg .ac-stat__value { font-size: var(--ac-display-xl); }
.ac-stat--accent .ac-stat__value { color: var(--ac-text-heading); }

.ac-stat-row { display: flex; flex-wrap: wrap; gap: var(--ac-space-11); }


/* ==========================================================================
   20 · TESTIMONIAL
   ========================================================================== */

.ac-quote { display: flex; flex-direction: column; gap: var(--ac-space-7);
            padding: var(--ac-space-9); background-color: var(--ac-surface-raised); }
/* Charcoal, not yellow. Yellow at this size on a light card measured 1.67:1 —
   technically permitted because the mark is decorative and aria-hidden, but a
   decoration nobody can see is a smudge. On an inverse surface it becomes
   yellow, where it measures 8.11:1 and looks right. */
.ac-quote__mark { font-size: var(--ac-text-quote); line-height: .6; color: var(--ac-text-heading);
                  font-weight: var(--ac-weight-bold); }
[data-ac-surface="inverse"] .ac-quote__mark,
.ac-surface-inverse .ac-quote__mark { color: var(--ac-golden-sun); }
.ac-quote__text { font-size: var(--ac-h6); font-weight: var(--ac-weight-light);
                  line-height: var(--ac-leading-body); color: var(--ac-text-heading);
                  margin: 0; max-width: none; }
.ac-quote__by { display: flex; align-items: center; gap: var(--ac-space-4);
                margin-top: auto; }
.ac-quote__name { font-size: var(--ac-text-xs); font-weight: var(--ac-weight-medium);
                  color: var(--ac-text-heading); }
.ac-quote__role { font-size: var(--ac-text-xs); color: var(--ac-text-muted); }


/* ==========================================================================
   21 · PRICING
   ========================================================================== */

.ac-price { display: flex; flex-direction: column; gap: var(--ac-space-7);
            padding: var(--ac-space-9); background-color: var(--ac-surface-raised); }
.ac-price__name { font-size: var(--ac-h6); color: var(--ac-text-heading);
                  letter-spacing: var(--ac-tracking-label); text-transform: uppercase;
                  font-weight: var(--ac-weight-medium); }
.ac-price__amount { display: flex; align-items: baseline; gap: var(--ac-space-1); }
.ac-price__figure { font-size: var(--ac-text-figure); font-weight: var(--ac-weight-medium); line-height: 1;
                    color: var(--ac-text-heading); letter-spacing: -.02em; }
.ac-price__period { font-size: var(--ac-text-xs); color: var(--ac-text-muted); }
.ac-price__list { list-style: none; margin: 0; padding: 0;
                  display: flex; flex-direction: column; gap: var(--ac-space-3); }
.ac-price__list li { display: flex; align-items: flex-start; gap: var(--ac-space-2);
                     font-size: var(--ac-text-sm); margin: 0; }
.ac-price__list .ac-icon { color: var(--ac-success); margin-top: .15em; }
.ac-price__list li[data-ac-absent] { color: var(--ac-text-muted); }
.ac-price__list li[data-ac-absent] .ac-icon { color: var(--ac-text-muted); }
.ac-price--featured { background-color: var(--ac-surface-dark);
                      color: var(--ac-text-inverse); }


/* ==========================================================================
   22 · STEPS
   ========================================================================== */

.ac-steps { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; }
.ac-steps__item { display: flex; gap: var(--ac-space-7); padding-bottom: var(--ac-space-9);
                  position: relative; margin: 0; }
.ac-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 32px; bottom: 0; left: 15px;
  width: 1px;
  background-color: var(--ac-border);
}
.ac-steps__marker {
  flex: none;
  display: grid; place-content: center;
  width: 32px; height: 32px;
  border: var(--ac-border-width) solid var(--ac-border-control);
  border-radius: var(--ac-radius-pill);
  background-color: var(--ac-surface-page);
  font-size: var(--ac-text-xs);
  font-weight: var(--ac-weight-medium);
  color: var(--ac-text-heading);
}
.ac-steps__item[data-ac-state="done"] .ac-steps__marker {
  background-color: var(--ac-surface-accent-soft);
  border-color: var(--ac-accent-active);
  color: var(--ac-text-on-accent);
}
.ac-steps__item[data-ac-state="current"] .ac-steps__marker {
  border-color: var(--ac-border-strong);
  border-width: var(--ac-border-width-strong);
}
.ac-steps__title { font-size: var(--ac-h6); color: var(--ac-text-heading);
                   margin-bottom: var(--ac-space-1); }
.ac-steps__text { font-size: var(--ac-text-sm); color: var(--ac-text-primary);
                  margin: 0; }


/* ==========================================================================
   23 · LOGO STRIP
   ========================================================================== */

.ac-logos { display: flex; flex-wrap: wrap; align-items: center;
            gap: var(--ac-space-9); }
.ac-logo-tile {
  display: grid; place-content: center;
  width: 100px; height: 100px;
  padding: var(--ac-space-3);
  background-color: var(--ac-surface-raised);
  font-size: var(--ac-text-micro);
  color: var(--ac-text-muted);
  text-align: center;
  letter-spacing: var(--ac-tracking-label);
  text-transform: uppercase;
}
.ac-logo-tile img { max-width: 100%; max-height: 60%; object-fit: contain;
                    filter: grayscale(1); opacity: .7;
                    transition: filter var(--ac-duration) var(--ac-ease),
                                opacity var(--ac-duration) var(--ac-ease); }
.ac-logo-tile:hover img { filter: none; opacity: 1; }


/* ==========================================================================
   24 · UTILITIES
   A deliberately short list. A design system that needs fifty utilities has
   components that are not doing their job.
   ========================================================================== */

.ac-stack   { display: flex; flex-direction: column; gap: var(--ac-space-7); }
.ac-stack--sm { gap: var(--ac-space-3); }
.ac-stack--lg { gap: var(--ac-space-10); }
.ac-row     { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-space-6); }
.ac-row--between { justify-content: space-between; }
.ac-row--end     { justify-content: flex-end; }
.ac-grid    { display: grid; gap: var(--ac-space-8);
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ac-container { max-width: var(--ac-container-wide); margin: 0 auto;
                padding: 0 var(--ac-space-8); }
/* 940px — what every .container on aracreate.group actually measures. The
   default above is the 1200px outer bound, kept because that is what this
   system was built and reviewed at. A page that should feel exactly like the
   live site wants this one. Added 20 Aug 2026; see docs/decisions.md.       */
.ac-container--narrow { max-width: var(--ac-container); }
.ac-prose   { max-width: var(--ac-content-max); }
.ac-center  { text-align: center; }
.ac-muted   { color: var(--ac-text-muted); }
.ac-strong  { color: var(--ac-text-heading); }
.ac-nowrap  { white-space: nowrap; }

/* Two text primitives that were missing. Without them a standfirst or a photo
   caption has to be sized by hand, which is the one thing rule one forbids —
   and the adherence gate now catches, so the gap had to close.              */
.ac-lead    { font-size: var(--ac-text-lead); font-weight: var(--ac-weight-light);
              line-height: var(--ac-leading-tight); max-width: 58ch;
              color: var(--ac-text-primary); }
.ac-caption { font-size: var(--ac-text-xs); color: var(--ac-text-muted);
              line-height: var(--ac-leading-tight); }