/* A shared editorial light, with accents that follow the subject. */
:where(body[data-kyh-palette]) {
  --kyh-detail: #326d60;
  --kyh-halo: #8dd5a0;
  --kyh-flare: #d5b478;
  --kyh-wash: #e7f0e5;
  --kyh-deep: #183c34;
}
body[data-kyh-palette="pantry"] { --kyh-detail: #8b5e39; --kyh-halo: #e5b77e; --kyh-flare: #bb8654; --kyh-wash: #f5ece0; --kyh-deep: #553d2b; }
body[data-kyh-palette="quiet"] { --kyh-detail: #665880; --kyh-halo: #c4aee9; --kyh-flare: #cca686; --kyh-wash: #eeebf4; --kyh-deep: #403450; }
body[data-kyh-palette="motion"] { --kyh-detail: #316779; --kyh-halo: #7ccbdc; --kyh-flare: #b3cf87; --kyh-wash: #e5eff1; --kyh-deep: #214955; }
body[data-kyh-palette="atlas"] { --kyh-detail: #6d526f; --kyh-halo: #c7b0ea; --kyh-flare: #a4deec; --kyh-wash: #f0e9f4; --kyh-deep: #462d49; }

.kyh-heading-rule {
  position: relative;
  display: block;
  inline-size: min(6.5rem, 32%);
  block-size: 2px;
  margin-block-start: .45em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kyh-detail), var(--kyh-flare), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  [data-kyh-seen] > .kyh-heading-rule {
    animation: kyh-editorial-line .75s cubic-bezier(.17,.72,.21,1) both;
    transform-origin: left center;
  }
  [data-kyh-seen] > .kyh-heading-rule::after {
    content: "";
    position: absolute;
    inset-block-start: -3px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--kyh-flare);
    box-shadow: 0 0 10px var(--kyh-flare);
    animation: kyh-editorial-flare .83s ease-out both;
  }
}
@keyframes kyh-editorial-line { from { transform: scaleX(.32); } to { transform: scaleX(1); } }
@keyframes kyh-editorial-flare { from { inset-inline-start: 8%; opacity: 0; } 32% { opacity: .95; } to { inset-inline-start: 90%; opacity: 0; } }

.kyh-lit-card { position: relative; }
.kyh-card-light {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 9rem 7rem at var(--kyh-x, 50%) var(--kyh-y, 50%), var(--kyh-halo), transparent 84%);
  opacity: .19;
  pointer-events: none;
}
:where(.article-card, .world-card, .topic, .next-choice, .pw-path-card, .sheet-card, .atlas-study, .next-card, .path-card):focus-within {
  outline: 2px solid var(--kyh-detail);
  outline-offset: 3px;
}
:where(main) :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--kyh-detail);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .prose > section:not(.red-flags):not(#sources) > p:hover {
    background: linear-gradient(90deg, var(--kyh-wash), transparent);
    box-shadow: -3px 0 var(--kyh-detail);
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(main) :is(.button, .solid-button, .outline-button, .primary-button):active {
    translate: 0 1px;
  }
}

:root body .kyh-chapters {
  display: block;
  border: 1px solid var(--kyh-wash);
  border-radius: 15px;
  padding: .85rem;
  background: #fffdf8;
  box-shadow: 0 8px 26px #26362b0a;
}
.kyh-chapters details { max-block-size: calc(100dvh - 155px); overflow: auto; }
.kyh-chapters summary {
  position: relative;
  padding: 0 1.1rem .5rem .18rem;
  color: var(--kyh-deep);
  cursor: pointer;
  list-style: none;
}
.kyh-chapters summary::-webkit-details-marker { display: none; }
.kyh-chapters summary::after {
  content: "";
  position: absolute;
  inset: .32rem .2rem auto auto;
  inline-size: .45rem;
  block-size: .45rem;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.kyh-chapters details[open] summary::after { transform: rotate(225deg); }
.kyh-chapter-kicker, .kyh-chapter-current { display: block; }
.kyh-chapter-kicker { color: var(--kyh-detail); font-size: .64rem; font-weight: 740; letter-spacing: .13em; text-transform: uppercase; }
.kyh-chapter-current { margin-block-start: .25rem; color: var(--kyh-deep); font-size: .81rem; font-weight: 700; line-height: 1.35; }
.kyh-chapter-links { display: grid; gap: .15rem; }
:root body .kyh-chapters .kyh-chapter-links a {
  margin: 0;
  padding: .36rem .47rem;
  border: 0;
  border-radius: 6px;
  font-size: .76rem;
  line-height: 1.35;
}
:root body .kyh-chapters .kyh-chapter-links a:is(:hover,[aria-current="location"]) {
  color: var(--kyh-deep);
  background: var(--kyh-wash);
  box-shadow: inset 2px 0 var(--kyh-detail);
}
.kyh-chapter-steps {
  display: flex;
  justify-content: space-between;
  margin-block-start: .5rem;
  border-top: 1px solid var(--kyh-wash);
}
.kyh-chapter-steps[hidden], .kyh-chapter-steps a[hidden] { display: none; }
:root body .kyh-chapters .kyh-chapter-steps a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin: 0;
  padding-inline: .25rem;
  border: 0;
  color: var(--kyh-detail);
  font-size: .73rem;
  font-weight: 720;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.kyh-chapter-steps [data-kyh-next] { margin-inline-start: auto !important; }
.prose > section[data-kyh-current-section]:not(.red-flags) > h2 .kyh-heading-rule { block-size: 3px; inline-size: min(8rem, 38%); }

.atlas-stations { margin-block: 0 .8rem; }
.atlas-stations > div { display: flex; gap: .4rem; flex-wrap: wrap; }
.atlas-stations a {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
  min-block-size: 44px;
  padding: .24rem .72rem;
  border: 1px solid #dcd0df;
  border-radius: 999px;
  background: #fffcf7;
  color: var(--kyh-deep);
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
}
.atlas-stations a span { color: var(--kyh-detail); font-size: .61rem; font-variant-numeric: tabular-nums; }
.atlas-stations a:is(:hover,[aria-current="location"]) {
  background: var(--kyh-wash);
  border-color: var(--kyh-detail);
}

@media (max-width: 780px) {
  .kyh-chapters details { max-block-size: none; }
  .kyh-chapters summary { min-block-size: 44px; padding-block-end: 0; }
  :root body .kyh-chapters .kyh-chapter-links a { display: flex; align-items: center; min-block-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kyh-card-light { display: none; }
}
@media print {
  .kyh-card-light, .kyh-heading-rule, .kyh-chapters, .atlas-stations { display: none !important; }
}
