/* Dark action tokens read from Figma on 2026-10-05. See the dated evidence
   for the inherited library's unresolved orange focus/pressed palette. */
:root {
  --action-primary-hover: #d9d9d9;
  --action-primary-pressed: var(--muted);
  --action-primary-disabled: #212023;
  --action-secondary-hover: #212023;
  --action-disabled-text: #515151;
  --action-inverse-disabled-text: #929498;
  --action-focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--text);
}

.button,
.circle-button {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

@media (hover: hover) {
  .button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--action-primary-hover);
  }

  .button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--action-secondary-hover);
    border-color: var(--text);
  }

  .circle-button:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--divider);
    border-color: var(--white);
  }

  .button--text:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--muted);
  }
}

/* Preserve a neutral keyboard indicator until the dark focus palette is
   confirmed. Its 2px gap / 4px outer extent follows the source component. */
:root:not([data-focus-input="pointer"])
  .button:focus-visible:not(:disabled):not([aria-disabled="true"]),
:root:not([data-focus-input="pointer"])
  .circle-button:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  outline: none;
  box-shadow: var(--action-focus-ring);
}

.button--primary:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--action-primary-hover);
}

.button--outline:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--action-secondary-hover);
}

:root:not([data-focus-input="pointer"])
  .button--text:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 -2px var(--text);
}

/* Source pressed geometry, with a distinct neutral pressed fill while
   the linked library still lacks the matching dark pressed palette. */
.button:where(a, button):active:not(:disabled):not([aria-disabled="true"]) {
  padding-top: 16px;
  padding-bottom: 14px;
}

.button--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--action-primary-pressed);
}

.button--outline:active:not(:disabled):not([aria-disabled="true"]),
.circle-button:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--action-secondary-hover);
  border-color: var(--text);
  box-shadow: inset 0 0 0 1px var(--text);
}

:root:not([data-focus-input="pointer"])
  .button--outline:active:focus-visible:not(:disabled):not(
    [aria-disabled="true"]
  ),
:root:not([data-focus-input="pointer"])
  .circle-button:active:focus-visible:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  box-shadow:
    inset 0 0 0 1px var(--text),
    var(--action-focus-ring);
}

.circle-button:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--border);
}

.button--text:where(a, button):active:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  padding-top: 17px;
  padding-bottom: 15px;
  color: var(--muted);
}

.button:disabled,
.button[aria-disabled="true"],
.circle-button:disabled,
.circle-button[aria-disabled="true"] {
  cursor: not-allowed;
  transition: none;
  box-shadow: none;
  outline: none;
  color: var(--action-disabled-text);
}

.button--primary:disabled,
.button--primary[aria-disabled="true"] {
  background-color: var(--action-primary-disabled);
  color: var(--action-inverse-disabled-text);
}

.button--outline:disabled,
.button--outline[aria-disabled="true"],
.circle-button:disabled,
.circle-button[aria-disabled="true"] {
  background-color: var(--surface);
  border-color: var(--action-disabled-text);
}

.button--text:disabled,
.button--text[aria-disabled="true"] {
  background: transparent;
}

.button:disabled .icon,
.button[aria-disabled="true"] .icon,
.circle-button:disabled .icon,
.circle-button[aria-disabled="true"] .icon {
  opacity: 0.4;
}

/* Shared states for controls outside the three CTA variants. Resting
   geometry stays unchanged; fills, inset borders and rings do not reflow. */
:is(
  .chip,
  .icon-button,
  .round-link,
  .site-search,
  .nav-trigger,
  .desktop-nav > a,
  .mobile-menu-links > :is(a, button),
  .mobile-submenu-group > a,
  .mobile-menu-back,
  .guide-nav a,
  .contents-panel nav a,
  .compact-contents nav a,
  .menu-choice,
  .trending-story,
  .researched-box,
  .accordion > summary,
  .compact-contents > summary,
  .footer-links a,
  .footer-bottom a,
  .story-copy h3 a,
  .article-card h3 a,
  .related-grid h3 a,
  .explore-topic h4 a,
  .breadcrumbs a
) {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

/* Only keyboard-style focus gets an outline; clicking/tapping stays quiet. */
:root:not([data-focus-input="pointer"])
  :where(.site-header, .mobile-menu, .mobile-search-panel, main, .site-footer)
  :is(a, button, input, summary):focus-visible:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}
:where(.site-header, .mobile-menu, .mobile-search-panel, main, .site-footer)
  :is(a, button, input, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}
.button:focus:not(:disabled):not([aria-disabled="true"]),
.circle-button:focus:not(:disabled):not([aria-disabled="true"]) {
  outline: none;
}

@media (hover: hover) {
  .chip:not(.is-active):hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--divider);
    box-shadow: inset 0 0 0 1px var(--muted);
  }
  .chip.is-active:hover:not(:disabled):not([aria-disabled="true"]) {
    background-color: var(--action-primary-hover);
  }
  :is(.icon-button, .round-link):hover:not(:disabled):not(
      [aria-disabled="true"]
    ) {
    background-color: var(--divider);
    box-shadow: inset 0 0 0 1px var(--muted);
  }
  :is(
      .nav-trigger,
      .desktop-nav > a,
      .mobile-menu-links > :is(a, button),
      .mobile-submenu-group > a,
      .mobile-menu-back,
      .story-copy h3 a,
      .article-card h3 a,
      .related-grid h3 a,
      .explore-topic h4 a,
      .breadcrumbs a
    ):hover:not([aria-disabled="true"]) {
    color: var(--muted);
  }
  :is(.menu-choice, .trending-story, .researched-box):hover {
    background-color: var(--header);
  }
  :is(
    .footer-links a,
    .footer-bottom a,
    .guide-nav a,
    .contents-panel nav a,
    .compact-contents nav a
  ):hover {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  :is(.accordion, .compact-contents) > summary:hover {
    color: var(--white);
    background-color: var(--header);
  }
  .site-search:hover {
    border-color: var(--muted);
  }
}

:is(.icon-button, .round-link):focus:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  background-color: var(--divider);
}
:is(.icon-button, .round-link, .chip:not(.is-active)):active:not(:disabled):not(
    [aria-disabled="true"]
  ) {
  background-color: var(--border);
  box-shadow: inset 0 0 0 1px var(--text);
}
.chip.is-active:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--action-primary-pressed);
}
:is(
    .nav-trigger,
    .desktop-nav > a,
    .mobile-menu-links > :is(a, button),
    .mobile-submenu-group > a,
    .mobile-menu-back,
    .story-copy h3 a,
    .article-card h3 a,
    .related-grid h3 a,
    .explore-topic h4 a,
    .breadcrumbs a
  ):focus:not([aria-disabled="true"]) {
  color: var(--white);
}
:is(.menu-choice, .trending-story, .researched-box):focus {
  background-color: var(--header);
}
:is(.menu-choice, .trending-story, .researched-box):active {
  background-color: var(--divider);
}
:is(.accordion, .compact-contents) > summary:focus {
  outline-offset: -3px;
  color: var(--white);
  background-color: var(--header);
}
:is(.accordion, .compact-contents) > summary:active {
  background-color: var(--divider);
}
.site-search:focus-within {
  border-color: var(--text);
  background-color: var(--header);
}
.site-search input:focus {
  outline: none;
}
:is(.chip, .icon-button, .round-link):is(:disabled, [aria-disabled="true"]) {
  color: var(--action-disabled-text);
  cursor: not-allowed;
  transition: none;
  outline: none;
  box-shadow: none;
}

/* The play artwork stays unchanged; a ring supplies interaction feedback. */
.video-poster > button {
  border-radius: 50%;
  transition: box-shadow 180ms ease;
}
@media (hover: hover) {
  .video-poster > button:hover:not(:disabled):not([aria-disabled="true"]) {
    box-shadow: 0 0 0 4px #d9d9d940;
  }
  .site-search button:hover:not(:disabled) {
    background-color: var(--divider);
  }
}
.video-poster > button:active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 0 0 2px var(--text);
}
.site-search button:active:not(:disabled) {
  background-color: var(--border);
}

/* This export represents the Figma crop already; object-fit: cover cropped
   it a second time and enlarged the coin beyond the supplied composition. */
.guide-card--1 .guide-artwork {
  object-fit: fill;
  object-position: bottom;
}

@media (min-width: 1100px) {
  .guide-card:focus .guide-card-art {
    opacity: 1;
  }

  .guide-card--1 .guide-card-art > span {
    background: linear-gradient(#1b1b1c 0%, #1b1b1c00 120.27%);
  }

  .guide-card--3 .guide-card-art > span {
    background: linear-gradient(#1b1b1c 15.536%, #1b1b1c00 120.27%);
  }

  .guide-card:is(:hover, :focus) .card-title,
  .guide-card:is(:hover, :focus) > .button:not([aria-disabled="true"]) {
    color: var(--white);
  }

  .guide-card:is(:hover, :focus) .guide-card-copy p {
    color: #d9d9d9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .circle-button,
  .guide-card-art {
    transition: none;
  }
}

:is(.mobile-submenu-group > a, .mobile-menu-back):active {
  background-color: var(--divider);
}

html[data-focus-input="pointer"]
  :where(.site-header, .mobile-menu, .mobile-search-panel, main, .site-footer)
  :is(a, button, input, summary, [tabindex]):focus {
  outline: none;
}