/* extensions.css — ASG-only modifiers on design-system v2 blocks.
   Rules (same as components.css): tokens only, modifiers on existing blocks, no one-off classes.
   Anything here is a candidate to upstream into design-system/components.css.
   Load after components.css. */

/* [hidden] must win over component display values (.callout grid, .pager grid, .load-more flex…) */
[hidden] { display: none !important; }


/* lists used as layout primitives (.stack/.cluster on <ul>/<ol>) drop browser list chrome */
ul.stack, ol.stack, ul.cluster, ol.cluster { list-style: none; margin: 0; padding: 0; }
.card__footer.stack { align-items: flex-start; justify-content: flex-start; }

/* section that sits directly under breadcrumbs — the .page-head inside supplies the top space */
.section--flush-top { padding-top: 0; }

/* .callout--calc doubles as the generic accent CTA (gift guide engraving, product customization).
   With several actions the action column wraps under the copy instead of squeezing it. */
.callout--calc .callout__actions:has(> :nth-child(3)) { grid-column: 1 / -1; grid-row: auto; }

/* native <meter> as a bar inside .table (admin stats) */
.table meter { width: 100%; min-width: 80px; height: var(--space-2); accent-color: var(--c-primary); }

/* zone cards: 8 across on wide containers, wrapping down to 4 / 2 */
.grid--zones { --grid-min: 96px; gap: var(--space-3); }

/* Image-less cards (no article has a featured image yet): a deliberate, skin-colored panel
   instead of an empty box. Tinted by article type; a fine diagonal "grain" keeps it from reading
   as a broken image. Swap-in is automatic — ASG.cardMedia renders <img> once featured_image exists. */
.card__media.card__media--placeholder {
  --ph: var(--c-badge-standard);
  border-bottom: 0;
  color: var(--ph);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background-color: color-mix(in srgb, var(--ph) 14%, var(--c-surface));
  background-image: repeating-linear-gradient(-45deg, transparent 0 var(--space-3), color-mix(in srgb, var(--ph) 9%, transparent) var(--space-3) calc(var(--space-3) + var(--border-1)));
}
.card__media--placeholder[data-type="guide"] { --ph: var(--c-badge-guide); }
.card__media--placeholder[data-type="comparison"] { --ph: var(--c-badge-comparison); }
.card__media--placeholder[data-type="seasonal"] { --ph: var(--c-badge-seasonal); }
.card__media--placeholder[data-type="beginner"] { --ph: var(--c-badge-beginner); }
.card__media--placeholder[data-type="buying-guide"] { --ph: var(--c-badge-buying-guide); }
.card__media--placeholder[data-type="infographic"] { --ph: var(--c-badge-infographic); }
.card__media--placeholder[data-type="product"] { --ph: var(--c-accent); }
/* placeholders are decorative: shorter on article grids so text leads */
.card--article .card__media.card__media--placeholder, .card--product .card__media.card__media--placeholder,
.card--article.card--skeleton .skeleton--media, .card--product.card--skeleton .skeleton--media { aspect-ratio: 3 / 1; }

/* thumbnails rendered as <img> rather than a background box */
img.modal__option-thumb, img.compare__thumb { object-fit: cover; width: 100%; }
img.modal__option-thumb { width: var(--space-7); }
.modal__option { width: 100%; }

/* empty compare slot as a button filling its grid cell (next to product cards) */
button.compare__slot { width: 100%; height: 100%; min-height: var(--space-9); aspect-ratio: auto; }
.compare__slot:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* calculator notes inside the green .calc__results panel (tips, breakdowns, mix recipes) */
.calc__note { font-size: var(--text-sm); line-height: var(--leading-normal); padding: var(--space-3) var(--space-4); border-radius: var(--radius-ctl); background: color-mix(in srgb, currentColor 10%, transparent); }
.calc__note:empty { display: none; }
.calc__note > * + * { margin-top: var(--space-2); }
.calc__note h4 { font-size: var(--text-sm); }
.calc__note a, .calc__results a:not(.btn) { color: inherit; }
/* tables rendered inside the results panel inherit its ink */
.calc__results .table { color: inherit; }
.calc__results .table th { color: inherit; opacity: .75; border-bottom-color: currentColor; }
.calc__results .table td { border-bottom-color: color-mix(in srgb, currentColor 25%, transparent); }
.calc__results .table tbody tr:hover { background: transparent; }
.calc__fix .btn { align-self: flex-start; }
/* the sticky tag row is the narrow-screen nav; the sidebar .toc takes over from 1200px */
@container page (min-width: 1200px) { .with-sidebar .scrollspy-nav { display: none; } }
.calc__inputs .field-row + .field-row, .calc__inputs .field + .field-row, .calc__inputs .field-row + .field { margin-top: 0; }
/* fix panel sits on the green results surface but has its own light background */
.calc__results .calc__fix { color: var(--c-ink); }
.calc__results .calc__fix a { color: var(--c-link); }

/* the stack/section around .prose already supplies the top gap */
.prose > :first-child { margin-top: 0; }

/* homepage quick calc: room for two digits plus the number spinner */
.quick-calc__inputs .field__input { width: calc(var(--space-8) + var(--space-2)); padding-inline: var(--space-2); }

/* Phones: compact listings so long pages (the homepage was ~15,000px) stay scannable.
   .grid--trim shows the first four items; .grid--tiles turns cards into two-up name tiles. */
@container page (max-width: 640px) {
  .card--article .card__media.card__media--placeholder, .card--product .card__media.card__media--placeholder,
  .card--article.card--skeleton .skeleton--media, .card--product.card--skeleton .skeleton--media { display: none; }
  .card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .grid--trim > :nth-child(n + 5) { display: none; }
  .grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .grid--tiles .card__excerpt, .grid--tiles .card__footer { display: none; }
  .grid--tiles .card__body { padding: var(--space-4); }
  .grid--tiles .card__title { font-size: var(--text-base); }
  .grid--tiles .card--space { min-height: var(--space-9); }
}
@container chrome (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}

/* No headings to list (short articles, not-found page): keep the sidebar column, hide the empty TOC */
.toc:has(.toc__nav:empty) { visibility: hidden; }

/* Contrast (launch audit 2026-10-10, measured with axe). Accent-colored TEXT uses the darker
   --c-accent-text role; text de-emphasized with opacity fails AA on colored tiles, so it stays
   opaque there; highlight text on the primary tile uses --c-on-primary-highlight (the dark-mode
   primary is light green). Candidates to upstream into components.css. */
.kicker--accent, .field__required { color: var(--c-accent-text); }
.callout--calc { --co-color: var(--c-accent-text); }
.tile--accent .tile__kicker, .tile--accent .zone-chip { opacity: 1; }
.tile--accent .zone-readout { background: color-mix(in srgb, var(--c-ink-surface) 18%, transparent); }
.tile--accent .zone-readout .link--arrow { color: inherit; }
.tile--primary .tile__title em, .tile--primary .link--on-dark { color: var(--c-on-primary-highlight); }
.email-capture--inline .email-capture__fine { opacity: .9; }
.email-capture .kicker { color: var(--c-highlight); }

/* Zone picker on a light surface (/zones): the component's selected chip is styled for the
   accent tile, where --c-surface-alt contrasts; on a light card it needs the primary fill. */
.calc__inputs .zone-chip[aria-selected="true"] { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }

/* Dark mode comfort (2026-10-25): the brand-filled blocks (hero tile, zone tile, calculator results)
   stayed light pastel fills with dark text on a near-black page, which reads as glare. In dark mode
   they become deep tinted surfaces with light text; the brand colors stay as accents. Done by
   re-pointing the tokens these components read, so their children follow. */
[data-theme="dark"] .tile--primary,
[data-theme="dark"] .calc__results {
  --c-primary: var(--c-primary-soft); --c-primary-ink: var(--c-ink); --c-on-primary-highlight: var(--c-highlight);
  border: var(--border-1) solid color-mix(in srgb, var(--c-link) 30%, transparent);
}
[data-theme="dark"] .tile--accent {
  --c-accent: var(--c-accent-soft); --c-accent-ink: var(--c-ink);
  border: var(--border-1) solid color-mix(in srgb, var(--c-accent-text) 35%, transparent);
}
[data-theme="dark"] .tile--accent .tile__kicker { color: var(--c-accent-text); }
[data-theme="dark"] .tile--accent .zone-chip[aria-selected="true"] { background: var(--c-accent-text); color: var(--c-accent-soft); border-color: var(--c-accent-text); }