/* Shared chrome injected into every built concept page. Every colour here is
   derived from the host page's own text colour, so the footer and controls
   inherit each explainer's palette instead of imposing one. */

#ce-footer {
  --ce-line: color-mix(in oklab, currentColor 14%, transparent);
  --ce-line-strong: color-mix(in oklab, currentColor 26%, transparent);
  --ce-faint: color-mix(in oklab, currentColor 62%, transparent);
  --ce-wash: color-mix(in oklab, currentColor 5%, transparent);
}

.ce-footer {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 40px;
  padding: 28px 20px 0;
  color: inherit;
  font-family: "Public Sans", system-ui, sans-serif;
}

.ce-footer *,
.ce-footer *::before,
.ce-footer *::after {
  box-sizing: border-box;
}

.ce-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(1160px, 100%);
  margin: 0 auto 26px;
}

.ce-actions[hidden] {
  display: none;
}

.ce-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ce-line-strong);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 12px/1 "Public Sans", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ce-button:hover,
.ce-button:focus-visible {
  background: var(--ce-wash);
  border-color: currentColor;
}

.ce-neighbours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1160px, 100%);
  margin-inline: auto;
}

.ce-neighbour {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--ce-line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ce-neighbour:hover,
.ce-neighbour:focus-visible {
  background: var(--ce-wash);
  border-color: var(--ce-line-strong);
}

/* Keeps "Older" flush right even when it is the only neighbour. */
.ce-neighbour-next {
  grid-column: 2;
  text-align: right;
}

.ce-neighbour-dir {
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-faint);
}

.ce-neighbour-title {
  font: 400 18px/1.3 "Spectral", Georgia, serif;
  text-wrap: pretty;
}

.ce-related {
  width: min(1160px, 100%);
  margin: 28px auto 0;
}

.ce-related-heading {
  margin: 0 0 12px;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-faint);
}

.ce-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ce-related-list a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--ce-line);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.ce-related-list a:hover,
.ce-related-list a:focus-visible {
  background: var(--ce-wash);
  border-color: var(--ce-line-strong);
}

.ce-related-title {
  font: 400 16px/1.3 "Spectral", Georgia, serif;
  text-wrap: pretty;
}

.ce-related-field {
  font: 400 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-faint);
}

.ce-footer-back {
  width: 100%;
  max-width: none;
  margin: 26px 0 0;
  text-align: center;
}

.ce-footer-back a {
  color: inherit;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.7;
}

.ce-footer-back a:hover,
.ce-footer-back a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* Reading progress */

.ce-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.ce-progress-fill {
  display: block;
  height: 100%;
  background: currentColor;
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Section rail */

.ce-dots {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 35;
  display: none;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}

.ce-dot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 22px;
  height: 12px;
  color: inherit;
  text-decoration: none;
}

.ce-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  border-radius: 50%;
  background: transparent;
  transition: background 0.18s ease, transform 0.18s ease;
}

.ce-dot:hover::after,
.ce-dot:focus-visible::after {
  background: color-mix(in oklab, currentColor 45%, transparent);
}

.ce-dot.is-active::after {
  background: currentColor;
  border-color: currentColor;
  transform: scale(1.25);
}

.ce-dot-label {
  position: absolute;
  right: 26px;
  max-width: 210px;
  padding: 5px 9px;
  border: 1px solid rgba(28, 26, 23, 0.1);
  border-radius: 6px;
  background: rgba(250, 248, 243, 0.78);
  color: #1c1a17;
  box-shadow: 0 5px 16px rgba(28, 26, 23, 0.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  font: 500 11px/1.2 "Public Sans", system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.ce-dot:hover .ce-dot-label,
.ce-dot:focus-visible .ce-dot-label {
  opacity: 1;
}

@media (min-width: 1200px) {
  .ce-dots { display: flex; }
}

/* Back to top */

.ce-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.18s ease;
}

.ce-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ce-top:hover,
.ce-top:focus-visible {
  outline: none;
  background: color-mix(in oklab, currentColor 8%, transparent);
}

/* Toast */

.ce-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 999px;
  background: color-mix(in oklab, currentColor 90%, transparent);
  color: var(--ce-surface, Canvas);
  font: 500 12px/1 "Public Sans", system-ui, sans-serif;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ce-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Quiz */

.ce-quiz {
  --ce-line: color-mix(in oklab, currentColor 14%, transparent);
  --ce-line-strong: color-mix(in oklab, currentColor 26%, transparent);
  --ce-faint: color-mix(in oklab, currentColor 62%, transparent);
  --ce-wash: color-mix(in oklab, currentColor 5%, transparent);
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  padding: 24px 26px 26px;
  border: 1px solid var(--ce-line-strong);
  border-radius: 14px;
  background: var(--ce-surface, Canvas);
  color: inherit;
  font-family: "Public Sans", system-ui, sans-serif;
  box-shadow: 0 24px 64px -28px rgba(20, 18, 14, 0.5);
  overflow: auto;
  overscroll-behavior: contain;
}

.ce-quiz[open] {
  animation: ce-quiz-in 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ce-quiz::backdrop {
  background: rgba(20, 18, 14, 0.5);
  backdrop-filter: blur(3px);
  animation: ce-quiz-backdrop-in 0.24s ease-out;
}

@keyframes ce-quiz-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes ce-quiz-backdrop-in {
  from {
    opacity: 0;
  }
}

.ce-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ce-quiz-step {
  margin: 0;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-faint);
}

.ce-quiz-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
}

.ce-quiz-seg {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--ce-line);
  transition: background 0.25s ease;
}

.ce-quiz-seg.is-current {
  background: var(--ce-line-strong);
}

.ce-quiz-seg.is-right {
  background: color-mix(in oklab, currentColor 78%, transparent);
}

.ce-quiz-seg.is-wrong {
  background: repeating-linear-gradient(
    -45deg,
    var(--ce-line-strong) 0 2px,
    transparent 2px 5px
  );
}

.ce-quiz-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.ce-quiz-close:hover {
  background: var(--ce-wash);
}

.ce-quiz-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.ce-quiz-title {
  margin: 0 0 20px;
  font: 400 24px/1.28 "Spectral", Georgia, serif;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.ce-quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ce-quiz-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--ce-line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: 400 15.5px/1.45 "Spectral", Georgia, serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.ce-quiz-choice::after {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 10px;
  font: 600 13px/1.7 "IBM Plex Mono", ui-monospace, monospace;
}

.ce-quiz-choice:hover:not(:disabled),
.ce-quiz-choice:focus-visible {
  background: var(--ce-wash);
  border-color: var(--ce-line-strong);
}

.ce-quiz-choice:disabled {
  cursor: default;
  opacity: 0.72;
}

.ce-quiz-choice.is-right,
.ce-quiz-choice.is-wrong {
  opacity: 1;
  font-weight: 500;
}

.ce-quiz-choice.is-right {
  border-color: currentColor;
  background: var(--ce-wash);
}

.ce-quiz-choice.is-right::after {
  content: "✓";
}

.ce-quiz-choice.is-wrong {
  border-style: dashed;
  border-color: var(--ce-line-strong);
}

.ce-quiz-choice.is-wrong::after {
  content: "✗";
  color: var(--ce-faint);
}

.ce-quiz-choice.is-wrong .ce-quiz-choice-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ce-quiz-letter {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--ce-line-strong);
  border-radius: 50%;
  color: var(--ce-faint);
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.ce-quiz-choice:hover:not(:disabled) .ce-quiz-letter,
.ce-quiz-choice:focus-visible .ce-quiz-letter,
.ce-quiz-choice.is-right .ce-quiz-letter {
  border-color: currentColor;
  color: inherit;
}

.ce-quiz-choice-text {
  flex: 1;
  min-width: 0;
}

.ce-quiz-hint {
  margin: 12px 2px 0;
  font: 500 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ce-faint);
  opacity: 0.7;
}

@media (hover: none), (pointer: coarse) {
  .ce-quiz-hint {
    display: none;
  }
}

.ce-quiz-feedback:not(:empty) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ce-line);
}

.ce-quiz-verdict {
  margin: 0 0 6px;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ce-quiz-verdict.is-right::before,
.ce-quiz-verdict.is-wrong::before {
  margin-right: 7px;
}

.ce-quiz-verdict.is-right::before {
  content: "✓";
}

.ce-quiz-verdict.is-wrong {
  color: var(--ce-faint);
}

.ce-quiz-verdict.is-wrong::before {
  content: "✗";
}

.ce-quiz-why {
  margin: 0 0 16px;
  font: 400 15px/1.55 "Spectral", Georgia, serif;
  color: var(--ce-faint);
  text-wrap: pretty;
}

/* The primary action is filled with the page's own ink; the label span
   carries the surface colour so currentColor stays the ink. */
.ce-quiz-next {
  border-color: transparent;
  background: color-mix(in oklab, currentColor 92%, transparent);
}

.ce-quiz-next:hover,
.ce-quiz-next:focus-visible {
  border-color: transparent;
  background: currentColor;
}

.ce-quiz-next-label {
  color: var(--ce-surface, Canvas);
}

.ce-quiz-result-score {
  margin: 2px 0 0;
  text-align: center;
}

.ce-quiz-result-n {
  font: 400 72px/1 "Spectral", Georgia, serif;
  letter-spacing: -0.02em;
}

.ce-quiz-result-total {
  font: 400 26px/1 "Spectral", Georgia, serif;
  color: var(--ce-faint);
}

.ce-quiz-result-caption {
  margin: 8px 0 20px;
  text-align: center;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-faint);
}

.ce-quiz.is-result .ce-quiz-title {
  text-align: center;
}

.ce-quiz.is-result .ce-quiz-why {
  max-width: 42ch;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ce-quiz-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.ce-quiz.is-result .ce-quiz-foot {
  justify-content: center;
}

.ce-quiz-stamp {
  display: inline-block;
  margin: 0;
  padding: 9px 18px;
  border: 2px solid currentColor;
  border-radius: 8px;
  font: 700 13px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.ce-confetti {
  position: relative;
  padding: 26px 0 6px;
  text-align: center;
}

.ce-confetti-piece {
  position: absolute;
  top: 0;
  width: 6px;
  height: 10px;
  border-radius: 1px;
  background: currentColor;
  animation: ce-fall 1.5s ease-in forwards;
}

@keyframes ce-fall {
  from {
    transform: translateY(-14px) rotate(0deg);
  }
  to {
    transform: translateY(112px) rotate(320deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ce-confetti-piece {
    display: none;
  }

  .ce-quiz[open],
  .ce-quiz::backdrop {
    animation-duration: 0.01ms;
  }

  .ce-progress-fill,
  .ce-top,
  .ce-toast,
  .ce-dot::after,
  .ce-dot-label,
  .ce-quiz-seg {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 639px) {
  .ce-footer {
    padding: 28px 16px 0;
  }

  .ce-quiz {
    padding: 20px 20px 22px;
  }

  .ce-quiz-result-n {
    font-size: 60px;
  }

  .ce-neighbours {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-neighbour-next {
    grid-column: 1;
    text-align: left;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media print {
  #ce-footer,
  #site-back-nav,
  #ce-progress,
  #ce-dots,
  #ce-top,
  #ce-toast,
  #ce-quiz {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }
}