/* interactive — view transitions, anchor clearances, hover/focus grammar, reduced motion */

/* ---- view transitions (cross-document, SPA feel) ---- */

/* same-origin navigations cross-fade; shared view-transition-names morph */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation-duration: 0.2s;
  }
  /* incoming content slides up under the pinned nav */
  ::view-transition-new(root) {
    animation: 0.3s ease vt-enter;
  }
  /* the nav is identical on both sides: skip its cross-fade */
  ::view-transition-old(nav) {
    display: none;
  }
  ::view-transition-new(nav) {
    animation: none;
  }
  @keyframes vt-enter {
    from {
      opacity: 0;
      translate: 0 1.5rem;
    }
  }
}
/* identical and always visible, so view transitions never move it */
.b-navigation-section {
  view-transition-name: nav;
}

/* ---- scroll: where anchor jumps land ---- */

/* anchor jumps land clear of the sticky nav; code blocks are toc CODE-tab stops */
.editor-content :is(h2, h3, h4, h5, h6, .code-block) {
  scroll-margin-block-start: 6rem;
}

/* ---- hover/focus grammar ---- */

/* one focus ring for everything keyboard-reachable */
:focus-visible {
  outline: 2px solid var(--text-brand-secondary);
  outline-offset: 2px;
}

/* buttons: surfaces dim a touch; icon glyphs sharpen */
[data-button=""]:hover,
[data-button="primary"]:hover {
  filter: brightness(0.96);
}
[data-button="icon"]:hover,
[data-button="icon"]:focus-visible {
  color: var(--text-primary);
}

/* card titles answer in brand; the thumb dims via a filter on the <a> */
.b-card h3 a:hover {
  color: var(--text-brand-secondary);
}
.b-card .card-thumb:hover {
  filter: brightness(0.94);
}
/* frontendmentor arrows: aria-label doubles as a wrapping hover tooltip pill */
.hero-external:hover {
  color: var(--text-primary);
}
.card-external,
.hero-external {
  position: relative;
}
.card-external::after,
.hero-external::after {
  content: attr(aria-label);
  position: absolute;
  inset-block-end: calc(100% + 0.375rem);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--text-primary);
  color: var(--bg-primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal; /* the h1's -0.02em would inherit in */
  inline-size: max-content;
  max-inline-size: min(18rem, 60vi);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 2;
}
/* the card arrow's pill hangs from the icon's end edge, growing inward */
.card-external::after {
  inset-inline-end: 0;
}
/* the page h1 sits mid-viewport — its pill centers on the icon */
.hero-external::after {
  inset-inline-start: 50%;
  translate: -50% 0;
  text-align: center;
}
.card-external:hover::after,
.hero-external:hover::after {
  opacity: 1;
  transition-delay: 0.2s;
}
/* nav menu items (search button included) answer in brand */
.b-navigation-section ul a:hover span,
.b-navigation-section ul button:hover,
.b-navigation-section ul button:hover span {
  color: var(--text-brand-secondary);
}
/* account text links answer in brand; sign up (already brand) underlines */
.b-navigation-section > div:last-child a:not(.nav-account):hover {
  color: var(--text-brand-secondary);
}
.b-navigation-section > div:last-child a.nav-signup:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

/* quiet link lists reveal on hover; the toc's accent current stays */
.b-toc-inline a:not([aria-current]):hover,
.b-breadcrumbs a:hover,
.pagination a:hover {
  color: var(--text-primary);
}

/* post footer: author links answer in brand; refs answer in underline */
.b-post-footer a:hover:not(.card-ref, .card-tag) {
  color: var(--text-brand-secondary);
}

/* challenge filter: fields sharpen their border on hover */
.b-filter-bar input:hover,
.b-filter-bar select:hover {
  border-color: var(--fg-quaternary);
}

/* post-body links thicken their underline */
.editor-content :is(p, li) a:hover {
  text-decoration-thickness: 2px;
}
/* code toolbar buttons sharpen */
.editor-content .code-toolbar button:hover {
  color: var(--text-primary);
}

/* ---- reading progress — injected by assets/js/progress.js ---- */

.b-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 0.1875rem;
  inline-size: 0;
  z-index: 1000;
  /* editor skins tint it via --editor-accent; the default is brand */
  background-color: var(--editor-accent, var(--utility-brand-700));
}

/* ---- account modal: the phone nav's visitor <dialog>, account-sheet.js ---- */

.b-account-sheet {
  /* the UA's centered modal, sized and skinned */
  position: fixed;
  inset: 0;
  margin: auto;
  block-size: fit-content;
  inline-size: min(20rem, calc(100% - 2.5rem));
  border: 0;
  border-radius: 1rem;
  background-color: var(--bg-primary);
  color: var(--text-tertiary);
  /* deliberately compact: tight paddings, type and buttons */
  padding: 1.25rem 1.25rem 1.375rem;
  text-align: center;
}
.b-account-sheet::backdrop {
  background-color: rgb(0 0 0 / 40%);
}
/* entry: fade + settle via @starting-style; others appear in place */
.b-account-sheet[open] {
  opacity: 1;
  scale: 1;
  transition: opacity 0.2s ease, scale 0.2s ease;
  @starting-style {
    opacity: 0;
    scale: 0.96;
  }
}
.b-account-sheet h2 {
  /* side room keeps the title clear of the corner close button */
  padding-inline: 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}
/* 44px close button, top end corner; last in DOM so the first door keeps focus */
.b-account-sheet [data-account-close] {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
}
.b-account-sheet h2 span {
  color: var(--accent-text);
}
.b-account-sheet p {
  margin-block-start: 0.375rem;
  font-size: 0.875rem;
}
.b-account-sheet a[data-button] {
  display: flex;
  inline-size: 100%;
  margin-block-start: 0.625rem;
  padding-block: calc(0.6875rem - 1px);
  border-radius: 0.625rem;
  font-size: 0.9375rem;
}
.b-account-sheet a[data-button="primary"] {
  margin-block-start: 1.25rem;
}

/* ---- reduced motion: one global damper ---- */

/* every transition and animation collapses to imperceptible */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}