/* Load after the base article styles. All copy stays visible without the enhancement script. */
.reading-magic-checklist,
.reading-magic-widget,
.reading-magic-affiliate {
  --rm-paper: #fffcf6;
  --rm-navy: #0b1930;
  --rm-gold: #dcc18a;
  --rm-ink: #344357;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
}

/* Six small lights show actual checked items; the existing controls own their state. */
.checklist-box.reading-magic-checklist {
  position: relative;
  background: linear-gradient(135deg, #fffcf6, #faf3e4);
  border: 1px solid #d8c49b;
  border-radius: 9px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px #0b193007;
}
.reading-magic-checklist .checklist-head { color: #506075; border-color: #dcccab; }
.reading-magic-checklist .checklist-head strong { color: #73582a; }
.magic-check-meter { margin: 0 0 13px; padding: 0 0 11px; }
.magic-check-segments { display: grid; grid-template-columns: repeat(var(--check-total, 6), minmax(0, 1fr)); gap: 6px; }
.magic-check-segment {
  position: relative;
  display: block;
  height: 7px;
  border: 1px solid #d8c9ac;
  border-radius: 3px;
  background: #eae2d1;
  overflow: hidden;
}
.magic-check-segment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #a47d3c, #e0c58d 60%, #f5e5be);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.2,.75,.2,1) var(--segment-delay, 0ms);
}
.magic-check-segment.is-filled::before { transform: scaleX(1); }
.magic-check-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: #765e33;
  font-size: 12px;
  line-height: 1.6;
}
.magic-check-status { font-weight: 600; font-variant-numeric: tabular-nums; }
.magic-check-star { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.magic-checklist-complete .magic-check-caption { color: #6d4b14; }
.magic-checklist-complete .magic-check-star { fill: #dcc18a; stroke: #8c672b; }
.reading-magic-checklist .check-row { color: #344357; border-color: #e4d8c1; }
.reading-magic-checklist .check-row input { accent-color: #a27d3f; }
.reading-magic-checklist .check-row:has(input:checked) { background: #e6d2a52b; }
.reading-magic-checklist .checklist-foot,
.reading-magic-checklist .checklist-foot button { color: #71634b; }

/* A chosen answer opens as a sheet of paper inside the navy frame. */
.reader-widget.reading-magic-widget {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 100% 0, #dcc18a13, transparent 62%), #0b1930;
  border: 1px solid #dcc18a68;
  border-radius: 8px;
  box-shadow: 0 8px 25px #0b193016, inset 0 1px 0 #f7dfb51c;
}
.reader-widget.reading-magic-widget::before {
  width: 180px;
  height: 180px;
  right: -70px;
  top: -80px;
  background: radial-gradient(circle, #dcc18a16, transparent 68%);
}
.article-prose .reader-widget.reading-magic-widget h2 { color: #fffcf6; }
.article-prose .reading-magic-widget .widget-kicker { color: #dcc18a; }
.article-prose .reading-magic-widget .widget-description { color: #c6cddb; }
.magic-choice-progress { position: relative; margin: 0 0 16px; }
.magic-choice-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: #d0c4aa;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.magic-choice-count { color: #f0d8a9; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.magic-choice-rule { height: 2px; overflow: hidden; background: #e8cf9d23; }
.magic-choice-line {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #8a692e, #dcc18a 60%, #fff3d3);
  transform: scaleX(0);
  transform-origin: left;
}
.magic-choice-selected .magic-choice-line { transform: scaleX(1); }
.reading-magic-widget .choice-list { min-width: 0; gap: 9px; }
.reading-magic-widget .choice-button {
  min-width: 0;
  width: 100%;
  min-height: 49px;
  border-color: #dcc18a4f;
  border-radius: 5px;
  background: #fffcf605;
  color: #f1eee7;
  box-shadow: inset 0 1px 0 #fffcf606;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.reading-magic-widget .choice-button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.reading-magic-widget .choice-letter { color: #e6cd9b; border-color: #dcc18a72; }
.reading-magic-widget .choice-button[aria-pressed="true"] {
  background: linear-gradient(105deg, #ead4a6, #d9bb7f);
  border-color: #f5e2b8;
  color: #0b1930;
  box-shadow: 0 0 0 1px #dcc18a18, 0 3px 12px #00000013;
}
.reading-magic-widget .choice-button[aria-pressed="true"] .choice-letter {
  background: #0b1930;
  color: #f1dba9;
  border-color: #0b1930;
}
.reading-magic-widget .choice-button:hover { transform: none; }
.reading-magic-widget .choice-button:focus-visible,
.reading-magic-widget .result-next:focus-visible {
  outline: 2px solid #f9e6be;
  outline-offset: 3px;
}
.reader-widget .widget-result.reading-magic-result {
  position: relative;
  padding: 22px 23px 20px;
  margin-top: 20px;
  background: #fffcf6;
  color: #344357;
  border: 1px solid #dcc18a;
  border-top: 3px solid #e5cf9f;
  border-radius: 3px 0 5px 5px;
  box-shadow: 0 9px 16px #00000018, inset 0 1px 0 #fff;
  transform-origin: top center;
  animation: none;
}
.widget-result.reading-magic-result[hidden] { display: none !important; }
.reading-magic-result::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  top: -3px;
  right: -1px;
  pointer-events: none;
  background: linear-gradient(225deg, #0b1930 47%, #d8c093 49%, #f8e9c9 54%, #ead6ad 100%);
}
.article-prose .reading-magic-widget .widget-result .result-label { color: #7d602c; }
.article-prose .reading-magic-widget .widget-result h3 { color: #0b1930; }
.article-prose .reading-magic-widget .widget-result p { color: #455264; }
.article-prose .reading-magic-widget .widget-result a.source-ref { color: #79602e; }
.reading-magic-widget .result-next {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #28415d;
  border-radius: 4px;
  background: #10253f;
  color: #fffcf6;
  white-space: normal;
  text-align: left;
}
.reading-magic-widget .result-next > span { flex-shrink: 0; color: #dcc18a; }

/* The ticket treatment surrounds the editorial explanation, not a fabricated offer. */
.affiliate-card.reading-magic-affiliate {
  --ticket-seam: 45px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, #fffcf6 50%, #faf2e3);
  border: 1px solid #c9ac74;
  border-top: 2px solid #d8bd85;
  border-radius: 8px 2px 8px 8px;
  box-shadow: 0 8px 23px #6d51200b, inset 0 0 0 3px #fffcf6;
}
.reading-magic-affiliate .affiliate-label {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 45px;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 11px 25px 11px 20px;
  background: linear-gradient(110deg, #12243a, #0b1930);
  border-bottom: 1px dashed #dcc18aab;
  color: #e0ccaa;
  line-height: 1.6;
}
.reading-magic-affiliate .affiliate-label strong { position: relative; z-index: 1; color: #f1d9a6; }
.reading-magic-affiliate .affiliate-label > span:not(.magic-ticket-foil) { position: relative; z-index: 1; color: #e4ded2; }
.magic-ticket-notch {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  top: calc(var(--ticket-seam) - 7px);
  border: 1px solid #c9ac74;
  border-radius: 50%;
  background: #fffcf6;
  pointer-events: none;
}
.magic-ticket-notch-left { left: -8px; }
.magic-ticket-notch-right { right: -8px; }
.magic-ticket-fold {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: linear-gradient(225deg, #fffcf6 47%, #b99756 49%, #f6e5ba 53%, #dcc18a 100%);
  pointer-events: none;
}
.reading-magic-affiliate .magic-ticket-foil {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  background: linear-gradient(110deg, transparent 25%, #fff1c347 46%, #fff7dfb3 50%, #dcc18a30 57%, transparent 76%);
  opacity: 0;
  transform: translateX(-125%);
  pointer-events: none;
}
.reading-magic-affiliate .affiliate-product { min-width: 0; }
.reading-magic-affiliate .affiliate-copy { min-width: 0; }
.reading-magic-affiliate .affiliate-visual {
  position: relative;
  isolation: isolate;
  background: #f0e5ce;
  border: 1px solid #e4d4b5;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 #fff;
}
.reading-magic-affiliate .affiliate-visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.reading-magic-affiliate .affiliate-visual figcaption { position: relative; z-index: 2; background: #f3ead8; color: #716249; }
.magic-product-reflection {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: linear-gradient(110deg, transparent 24%, #fffdf37a 44%, #fff 49%, #f5e1ac47 56%, transparent 76%);
  opacity: 0;
  transform: translateX(-125%) skewX(-12deg);
  pointer-events: none;
}
.article-prose .reading-magic-affiliate .affiliate-copy .product-type { color: #7e6131; }
.article-prose .reading-magic-affiliate .affiliate-copy h3 { color: #0b1930; }
.article-prose .reading-magic-affiliate .affiliate-copy p { color: #4e5967; }
.article-prose .reading-magic-affiliate .affiliate-fit p { color: #526071; border-color: #cfb47e; }
.reading-magic-affiliate .affiliate-fit b { color: #74582c; }
.reading-magic-affiliate .affiliate-shops { min-width: 0; }
.reading-magic-affiliate .shop-button {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 48px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 3px 0 #63471d15, inset 0 1px 0 #fff5;
  font-family: inherit;
}
.reading-magic-affiliate .shop-button > span:first-child { min-width: 0; line-height: 1.7; }
.reading-magic-affiliate .shop-button > span:last-child { flex-shrink: 0; }
.reading-magic-affiliate .shop-button:focus-visible { outline: 2px solid #0b1930; outline-offset: 3px; }
.article-prose .reading-magic-affiliate .affiliate-footnote { color: #706450; }

@media (hover: hover) and (pointer: fine) {
  .reading-magic-widget .choice-button:not([aria-pressed="true"]):hover {
    border-color: #dcc18ab0;
    background: #dcc18a12;
    box-shadow: inset 0 0 0 1px #dcc18a12;
  }
  .reading-magic-affiliate .shop-button:hover { transform: translateY(-1px); }
}

@media (max-width: 600px) {
  .magic-check-segments { gap: 5px; }
  .magic-check-caption { font-size: 11px; }
  .magic-choice-progress { margin-bottom: 13px; }
  .reader-widget .widget-result.reading-magic-result { padding: 19px 16px 17px; }
  .reading-magic-widget .result-next { width: 100%; justify-content: space-between; }
  .reading-magic-affiliate .affiliate-label { padding-left: 16px; padding-right: 23px; }
  .reading-magic-affiliate .affiliate-product { gap: 13px; }
  .reading-magic-affiliate .affiliate-shops { gap: 8px; }
  .reading-magic-affiliate .shop-button { padding: 10px 9px; }
}

@media (max-width: 360px) {
  .reader-widget.reading-magic-widget { padding: 19px 14px; }
  .reading-magic-widget .choice-button { padding: 12px 10px; gap: 8px; }
  .reading-magic-affiliate .affiliate-product { grid-template-columns: 1fr; padding: 17px 15px 14px; }
  .reading-magic-affiliate .affiliate-visual { width: 138px; max-width: 100%; }
  .reading-magic-affiliate .affiliate-visual img { aspect-ratio: 4 / 3; }
  .reading-magic-affiliate .affiliate-shops { grid-template-columns: 1fr; }
  .reading-magic-affiliate .shop-button { font-size: 12px; }
}

/* Pausing motion leaves the result, selected state, and progress fully readable. */
body.motion-paused :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *,
body.motion-paused :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *::before,
body.motion-paused :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *::after,
body.reduce-motion :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *,
body.reduce-motion :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *::before,
body.reduce-motion :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *::after {
  animation: none !important;
  transition: none !important;
}
body.motion-paused :is(.magic-ticket-foil, .magic-product-reflection),
body.reduce-motion :is(.magic-ticket-foil, .magic-product-reflection) { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *,
  :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *::before,
  :is(.reading-magic-checklist, .reading-magic-widget, .reading-magic-affiliate) *::after {
    animation: none !important;
    transition: none !important;
  }
  .magic-ticket-foil, .magic-product-reflection { opacity: 0 !important; }
}