/* The design comparison is independent of the light/dark appearance setting. */
.design-switch { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--m5-border); border-radius: 8px; background: var(--m5-surface); }
.design-switch > span { padding: 0 6px; color: var(--m5-muted); font-size: .72rem; }
.design-switch button { min-width: 40px; min-height: 40px; padding: 6px; border: 1px solid transparent; border-radius: 5px; color: var(--m5-text); background: transparent; font-size: .8rem; cursor: pointer; }
.design-switch button:hover { background: var(--m5-surface-soft); }
.design-switch button[aria-pressed="true"] { border-color: var(--m5-border-strong); background: var(--m5-selected-bg); color: var(--m5-selected-ink); font-weight: 650; }
.nav-share-v2 { display: none; }

/* Keep the 44px hit area while making the visible arrow control quieter and inset. */
:root .shelf-controls {
  gap: 0;
  padding-inline: 4px;
}

:root .shelf-controls button {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--m5-link);
  font-size: 1rem;
  cursor: pointer;
}

:root .shelf-controls button:disabled {
  cursor: default;
}

:root .shelf-controls button::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border: 1px solid var(--m5-border-soft);
  border-radius: 8px;
  background: var(--m5-surface);
}

:root .shelf-controls button:hover:not(:disabled) {
  background: transparent;
}

:root .shelf-controls button:hover:not(:disabled)::before {
  border-color: var(--m5-border-strong);
  background: var(--m5-surface-raised);
}

/* V1 keeps its existing tokens. V2 and V3 share refined controls; V3 layers its palette afterward. */
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) {
  --m5-page: #fdfdfe;
  --m5-surface: #ffffff;
  --m5-surface-soft: #f8f9fa;
  --m5-surface-raised: #eff1f5;
  --m5-featured: #f8f9fa;
  --m5-ink: #151b29;
  --m5-text: #253147;
  --m5-muted: #505c6e;
  --m5-link: #28438a;
  --m5-border: #b2bdcd;
  --m5-border-soft: #d7dce4;
  --m5-border-strong: #53627c;
  --m5-accent: #801c35;
  --m5-accent-hover: #65152a;
  --m5-on-accent: #ffffff;
  --m5-selected-bg: #f0f3fa;
  --m5-selected-ink: #21365f;
  --m5-focus: #28438a;
  --m5-coral: #932541;
  --m5-blue: #405273;
  --m5-purple: #5e4668;
  --m5-blue-soft: #f6f7fa;
  --m5-purple-soft: #f8f7fa;
  --m5-warm-soft: #f8f9fa;
  --m5-shadow: #18233812;
  --m5-cloud-1: #273c5d;
  --m5-cloud-2: #932541;
  --m5-cloud-3: #364c77;
  --m5-cloud-4: #5e4668;
  --m5-cloud-5: #505c6e;
  --m5-cloud-hover: #eff1f5;
  --m5-cloud-count: #f0f3fa;
  --m5-cloud-footer: #fbfbfd;
  --v2-group-edge: #bec6d2;
  --v2-button-bg: #fcfcfd;
  --v2-share-bg: #fffafb;
  --v2-share-hover: #f8eef1;
  --v2-share-edge: #a04b5d;
  --v2-cloud-bg: #fbfbfd;
  --v2-footer: #1c2842;
}

:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"])[data-theme="dark"] {
  --m5-page: #11141b;
  --m5-surface: #1b202a;
  --m5-surface-soft: #181d26;
  --m5-surface-raised: #2a3140;
  --m5-featured: #181d26;
  --m5-ink: #f5f6fa;
  --m5-text: #e0e5ef;
  --m5-muted: #b8c2d2;
  --m5-link: #b6c8f5;
  --m5-border: #647189;
  --m5-border-soft: #3c4658;
  --m5-border-strong: #93a3bd;
  --m5-accent: #f3b4c3;
  --m5-accent-hover: #ffd1dd;
  --m5-on-accent: #211820;
  --m5-selected-bg: #2a3448;
  --m5-selected-ink: #e3eaff;
  --m5-focus: #b6c8f5;
  --m5-coral: #f3b4c3;
  --m5-blue: #b6c8f5;
  --m5-purple: #cfb9d7;
  --m5-blue-soft: #222b3c;
  --m5-purple-soft: #2c2534;
  --m5-warm-soft: #181d26;
  --m5-shadow: #00000040;
  --m5-cloud-1: #d2def6;
  --m5-cloud-2: #f3b4c3;
  --m5-cloud-3: #b6c8f5;
  --m5-cloud-4: #cfb9d7;
  --m5-cloud-5: #b8c2d2;
  --m5-cloud-hover: #2a3140;
  --m5-cloud-count: #2a3448;
  --m5-cloud-footer: #1a1f29;
  --v2-group-edge: #4a566b;
  --v2-button-bg: #202632;
  --v2-share-bg: #2c222c;
  --v2-share-hover: #392a36;
  --v2-share-edge: #bd8599;
  --v2-cloud-bg: #1a1f29;
  --v2-footer: #182238;
}

:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-links .site-nav-link { border-bottom: 0; border-radius: 5px; text-decoration: none; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-links .site-nav-link.active { background: var(--m5-surface-soft); color: var(--m5-ink); }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-links .nav-share-original { display: none; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-share-v2 { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--v2-share-edge); border-radius: 6px; background: var(--v2-share-bg); color: var(--m5-accent); font-size: .85rem; font-weight: 600; text-decoration: none; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-share-v2:hover { background: var(--v2-share-hover); }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .NavBody .nav-tools { gap: 8px; }
:root:is([data-design="v2"], [data-design="v3"]) .theme-switch { background: var(--v2-button-bg); border-radius: 8px; }
:root:is([data-design="v2"], [data-design="v3"]) .theme-switch button { border: 1px solid transparent; border-radius: 5px; }
:root:is([data-design="v2"], [data-design="v3"]) .theme-switch button[aria-pressed="true"] { background: var(--m5-selected-bg); color: var(--m5-selected-ink); border-color: var(--m5-border-strong); }

:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .explore-stories { padding-top: 16px; }
/* One open shelf per topic avoids a card inside a card inside a reading-strip frame. */
:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-row {
  margin-bottom: 12px;
  padding: 12px 12px 20px;
  border: 0;
  border-bottom: 1px solid var(--m5-border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-row .shelf-heading { padding-bottom: 8px; border-bottom: 0; }
:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-row .shelf-heading h3 { border-left-width: 3px; font-size: 1.2rem; padding-left: 10px; }
:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .shelf-card { border-color: var(--m5-border-soft); border-radius: 10px; box-shadow: 0 2px 8px var(--m5-shadow); }
:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-shelf .reading-compact {
  padding-top: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-shelf .reading-links {
  gap: 8px;
  padding: 4px 1px;
}

:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-shelf .reading-chip {
  border-color: transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--m5-surface) 75%, transparent);
  color: var(--m5-link);
  font-weight: 500;
}

:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .topic-shelf .reading-chip:hover {
  border-color: var(--m5-border-soft);
  background: var(--m5-surface-raised);
  color: var(--m5-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .share-invitation h2 { font-size: 1.15rem; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .share-invitation a,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .primary-action,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .primary-button { padding: 9px 14px; border: 1px solid var(--v2-share-edge); border-radius: 6px; background: var(--v2-share-bg); color: var(--m5-accent); font-weight: 600; text-decoration: none; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .share-invitation a:hover,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .primary-action:hover,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .primary-button:hover { background: var(--v2-share-hover); color: var(--m5-accent-hover); }

:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .story-watch,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .story-panel { border-color: var(--m5-border); border-radius: 8px; background: var(--m5-surface); box-shadow: 0 2px 6px var(--m5-shadow); }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .reaction-option,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .secondary-action,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .secondary-button,
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .timecode { border: 1px solid var(--m5-border-strong); background: var(--v2-button-bg); color: var(--m5-text); }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .reaction-option.selected { border-width: 1px; border-color: var(--m5-border-strong); background: var(--m5-selected-bg); color: var(--m5-selected-ink); }
:root:is([data-design="v1"], [data-design="v2"], [data-design="v3"], [data-design="v4"]) .transcript-panel { padding: 12px; border: 1px solid var(--m5-border); border-radius: 8px; background: var(--m5-surface); box-shadow: 0 2px 6px var(--m5-shadow); }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .transcript-heading { padding-bottom: 8px; border-bottom: 1px solid var(--m5-border); }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .transcript-tools { padding: 8px 0; gap: 8px 16px; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .transcript-line { padding: 12px 8px; border-left-width: 2px; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .transcript-line[aria-current="true"] { border-left-color: var(--m5-blue); }

:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .site-footer { margin-top: 16px; padding: 18px 20px; border-top: 1px solid #556680; background: var(--v2-footer); color: #f3f5ff; --m5-link: #dce5ff; --m5-muted: #d2dbef; --m5-focus: #b6c8f5; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .site-footer a { color: #dce5ff; }
:root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .site-footer a:hover { color: #ffffff; }

@media (max-width: 1100px) {
  .design-switch > span { display: none; }
}
@media (max-width: 600px) {
  .NavBody .nav-tools { gap: 6px; }
  :root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-tools .nav-share-v2 { display: none; }
  :root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .nav-links .nav-share-original { display: flex; border: 1px solid var(--v2-share-edge); background: var(--v2-share-bg); color: var(--m5-accent); }
  :root:is([data-design="v2"], [data-design="v3"], [data-design="v4"]) .explore-stories { padding-inline: 12px; }
}