/* Keep the same palette in the panel and in portaled artwork dialogs. */
.character-dossier, .dossier-lightbox {
  color-scheme: dark;
  --dossier-bg: #1e1e1e;
  --dossier-ink: #fff;
  --dossier-muted: rgb(255 255 255 / 56%);
  --dossier-source: rgb(255 255 255 / 64%);
  --dossier-border: #ffffff14;
  --dossier-border-strong: #ffffff20;
  --dossier-control-border: #ffffff40;
  --dossier-focus: #ffffff90;
  --dossier-scrollbar: #ffffff32;
  --dossier-raised: #303030;
  --dossier-raised-hover: #454545;
  --dossier-tag: #ffffff08;
  --dossier-tag-hover: #ffffff14;
  --dossier-shadow: #0007;
  --foreground: var(--dossier-ink);
  --muted-foreground: var(--dossier-source);
  --background: var(--dossier-bg);
}
.character-dossier[data-dossier-theme='light'], .dossier-lightbox[data-dossier-theme='light'] {
  color-scheme: light;
  --dossier-bg: #f9f5ed;
  --dossier-ink: #302119;
  --dossier-muted: #7b6859;
  --dossier-source: #705e50;
  --dossier-border: #30211924;
  --dossier-border-strong: #30211933;
  --dossier-control-border: #30211940;
  --dossier-focus: #926721;
  --dossier-scrollbar: #30211940;
  --dossier-raised: #eee7da;
  --dossier-raised-hover: #e7ddcc;
  --dossier-tag: #30211908;
  --dossier-tag-hover: #30211914;
  --dossier-shadow: #30211920;
  --muted: #eee7da;
  --ring: #926721;
}
:root[data-canvas-theme='light'] .dossier-page-shell { background: #f6f1e7; }
.dossier-lightbox-overlay[data-dossier-theme='light'] { background: #30211966; }
.character-dossier[data-dossier-theme='light'] .dossier-divider > img { filter: brightness(0) sepia(1); }
.character-dossier[data-dossier-theme='light'] .dossier-divider > span { background-image: none; background-color: var(--dossier-border); }

/* Transparent fades preserve the source portrait against the milk background. */
.dossier-light-portrait { display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; width: 100%; height: 100%; }
.dossier-light-portrait::before { content: ''; position: absolute; z-index: -1; inset: 5% -5%; background: repeating-linear-gradient(125deg, var(--portrait-accent) 0 1px, transparent 1px 4px); opacity: .30; mask-image: radial-gradient(ellipse at 50% 50%, #000 15%, transparent 70%); }
.dossier-light-portrait > img { display: block; width: 92%; height: 96%; object-fit: contain; max-width: none; mask-image: linear-gradient(#000 70%, #000c 82%, transparent 100%); }
.dossier-light-portrait > span { font: 600 28px/1 'Cormorant Garamond', serif; color: var(--dossier-ink); }
.dossier-light-portrait--hero { width: 438px; height: 473px; padding: 5px 32px 24px; }
.dossier-light-portrait--hero::before { inset: 16% 0 12%; opacity: .22; }

@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/cormorant-font-0.ttf') format('truetype'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/cormorant-font-1.ttf') format('truetype'); }
.character-dossier { background: var(--dossier-bg); color: var(--dossier-ink); flex: none; width: 498px; max-width: 46vw; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 0; font-family: 'Roboto Flex', sans-serif; border-left: 1px solid var(--dossier-border); scrollbar-width: thin; scrollbar-color: var(--dossier-scrollbar) transparent; }
.character-dossier { overflow-x: hidden; isolation: isolate; }
.character-dossier button, .character-dossier a { cursor: pointer; }
.character-dossier button:focus-visible, .character-dossier a:focus-visible, .character-dossier summary:focus-visible { outline: 2px solid var(--dossier-focus); outline-offset: 4px; border-radius: 2px; }
.dossier-page-shell { min-height: 100svh; background: var(--dossier-bg, #1e1e1e); display: flex; justify-content: center; }
.character-dossier--page { width: 720px; max-width: 100%; height: 100svh; border: 0; }
 .dossier-content { padding: 24px; }
.dossier-navigation { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 24px; background: var(--dossier-bg); border-bottom: 1px solid var(--dossier-border); color: var(--dossier-muted); font: 600 18px/24px 'Cormorant Garamond', serif; }
.dossier-navigation > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-navigation .dossier-back { flex: none; padding: 4px; }
.dossier-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--dossier-control-border); border-radius: 50%; background: var(--dossier-raised); color: var(--dossier-ink); box-shadow: 0 4px 20px var(--dossier-shadow); }
.character-dossier--page .dossier-to-top { right: max(24px, calc((100vw - 720px) / 2 + 24px)); }
.dossier-to-top:hover { background: var(--dossier-raised-hover); }
.dossier-graph-link { display: block; margin-bottom: 16px; color: var(--dossier-muted); font: 600 18px/24px 'Cormorant Garamond', serif; }
.dossier-header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.dossier-header > div { min-width: 0; flex: 1; }
.dossier-header :is(h1, h2) { font-size: 48px; line-height: 48px; font-weight: 600; overflow-wrap: anywhere; outline: none; margin: 0; }
.dossier-header p { font-size: 16px; line-height: 24px; color: var(--dossier-muted); margin: 0; }
.dossier-open { flex: none; padding-top: 20px; font-size: 16px; line-height: 24px; color: var(--dossier-muted); white-space: nowrap; }
.dossier-open:hover, .dossier-graph-link:hover { color: var(--dossier-ink); }
.dossier-scaled { position: relative; width: 100%; margin-inline: auto; }
.dossier-scaled > div { position: absolute; left: 50%; top: 0; transform-origin: top center; }
/* Let exported glow layers fade beyond the portrait frame. Keep surrounding
   text above this stacking context so the fade cannot dim it. */
.dossier-hero { isolation: isolate; z-index: 0; pointer-events: none; overflow: visible; }
.dossier-hero--existing .character-specimen__label, .dossier-hero--existing .character-specimen__dot { display: none; }
.dossier-zeus { position: relative; width: 438px; height: 473px; }
.dossier-zeus img, .quote-portrait--achilles img { position: absolute; max-width: none; }
.dossier-zeus__glow { position: absolute; width: 336px; height: 180px; }
.dossier-zeus__glow img { left: -124px; top: -124px; }
.dossier-zeus__glow--one { left: 11.14px; top: 131.03px; transform: rotate(60deg); }
.dossier-zeus__glow--two { left: 69.7px; top: 76.48px; transform: rotate(120.98deg); }
.dossier-zeus__base { left: -2px; top: 304px; }
.dossier-zeus__portrait { left: 43px; top: 5px; width: 352px; height: 424px; object-fit: fill; }
.dossier-zeus__fade-one { left: 43px; top: 324px; }
.dossier-zeus__fade-two { left: 0; top: 324px; }
.dossier-credit { display: block; color: var(--dossier-muted); font-size: 11px; line-height: 16px; text-align: center; margin-top: -12px; position: relative; z-index: 1; }
.dossier-credit:hover { color: var(--dossier-ink); }
.dossier-introduction { position: relative; z-index: 1; margin-top: 24px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.dossier-introduction > p { margin: 0; }
.dossier-introduction__sources { margin-top: 8px; color: var(--dossier-source); font-size: 12px; line-height: 18px; }
.dossier-introduction__sources summary { width: fit-content; cursor: pointer; }
.dossier-introduction__sources > div { margin-top: 6px; }
.dossier-introduction__sources p { margin: 2px 0 0; }
.dossier-introduction__sources a { text-decoration: underline; text-underline-offset: 2px; }
.dossier-introduction button:focus-visible { outline: 2px solid var(--quote-accent); outline-offset: 3px; border-radius: 2px; }
.dossier-divider { display: flex; align-items: center; gap: 8px; height: 16px; margin-block: 24px; }
.dossier-divider > img { flex: none; max-width: none; }
.dossier-divider > span { flex: 1; height: 2px; background-image: var(--dossier-divider-image); background-repeat: repeat-x; background-position: center; }
.dossier-section__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-family: 'Cormorant Garamond', serif; font-weight: 600; }
.dossier-section__heading :is(h2, h3) { flex: 1; min-width: 0; font-size: 28px; line-height: 36px; font-weight: 600; margin: 0; }
.dossier-section__heading > button { white-space: nowrap; color: var(--dossier-muted); font-size: 16px; line-height: 24px; }
.dossier-section__heading > button:hover { color: var(--dossier-ink); }
.dossier-filters { display: flex; align-items: center; gap: 20px; overflow-x: auto; scrollbar-width: thin; padding-block: 8px; margin-bottom: 8px; font: 600 16px/24px 'Cormorant Garamond', serif; }
.dossier-filters button { color: var(--dossier-muted); flex: none; white-space: nowrap; }
.dossier-filters button[aria-pressed='true'], .dossier-filters button:hover { color: var(--dossier-ink); }
.dossier-quotes { display: flex; flex-direction: column; gap: 12px; }
.dossier-quote { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.dossier-quote blockquote { margin: 0; font-weight: 400; line-height: 21px; }
.dossier-quote figcaption { color: var(--dossier-source); font-size: 12px; font-weight: 400; line-height: 16px; }
.dossier-quote__name { position: relative; display: inline; font: inherit; color: var(--dossier-ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--quote-accent); text-underline-offset: 3px; padding: 0; }
.dossier-quote__name[data-state='delayed-open'], .dossier-quote__name[data-state='instant-open'] { z-index: 2; }
.character-dossier[data-quote-active] .dossier-quote blockquote,
.character-dossier[data-quote-active] .dossier-quote figcaption,
.character-dossier[data-quote-active] .dossier-quote__name { color: var(--dossier-muted); }
.character-dossier[data-quote-active] .dossier-quote__name { text-decoration-color: transparent; }
.character-dossier[data-quote-active] .dossier-quote__name[data-highlighted='true'] { color: var(--dossier-ink); text-decoration-color: var(--quote-accent); }
.dossier-quote-preview { z-index: 1; width: 74.08px; height: 80px; pointer-events: none; outline: none; }
[data-radix-popper-content-wrapper]:has(.dossier-quote-preview) { pointer-events: none; }
.quote-portrait { display: block; position: relative; width: 74.08px; height: 80px; }
.quote-portrait__ring { left: 5.24px; top: -1.86px; }
.quote-portrait__dot { left: 36.03px; top: .17px; }
.quote-portrait__glow { position: absolute; width: 56.829px; height: 30.444px; }
.quote-portrait__glow img { left: -20.972px; top: -20.972px; }
.quote-portrait__glow--one { left: 1.886px; top: 22.157px; transform: rotate(60deg); }
.quote-portrait__glow--two { left: 11.786px; top: 12.935px; transform: rotate(120.98deg); }
.quote-portrait__base { left: -.338px; top: 51.412px; }
.quote-portrait__image { left: 13.14px; top: .85px; width: 47.8px; height: 71.712px; }
.quote-portrait__fade-one { left: 7.273px; top: 54.8px; }
.quote-portrait__fade-two { left: 0; top: 54.8px; }
.quote-portrait--dynamic { display: flex; align-items: flex-end; justify-content: center; padding-top: 6px; }
.quote-portrait--dynamic::before { content: ''; position: absolute; inset: -12px -16px 0; background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--quote-accent) 65%, transparent), transparent 70%); }
.quote-portrait--dynamic img { position: relative; max-width: 60px; max-height: 74px; object-fit: contain; mask-image: linear-gradient(transparent, #000 6px, #000 80%, transparent); }
.quote-portrait--dynamic > span { align-self: center; font: 600 36px 'Cormorant Garamond', serif; }
.dossier-see-all, .dossier-carousel-actions { margin-top: 8px; color: var(--dossier-muted); font: 600 16px/24px 'Cormorant Garamond', serif; }
.dossier-see-all:hover { color: var(--dossier-ink); }
.dossier-relations { display: flex; flex-direction: column; gap: 8px; }
.dossier-relation { min-width: 0; width: 100%; }
.dossier-relation__row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.dossier-relation__character { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; text-align: left; }
.dossier-relation__portrait { display: flex; align-items: center; justify-content: center; width: 70.452px; height: 64px; flex: none; pointer-events: none; }
.dossier-relation__portrait .character-specimen__art { max-width: none; }
.dossier-relation__portrait .character-specimen__label, .dossier-relation__portrait .character-specimen__dot { display: none; }
.dossier-relation__info { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.dossier-relation__info strong { color: var(--dossier-ink); font-size: 16px; line-height: 21px; font-weight: 500; }
.dossier-relation__info > span { color: var(--dossier-source); font-size: 12px; line-height: 16px; }
.dossier-relation__character:hover .dossier-relation__info strong { text-decoration: underline; text-underline-offset: 3px; }
.dossier-relation__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 50%; flex: 0 1 auto; }
.dossier-relation__tag { border-radius: 9999px; padding: 4px 8px; background: var(--dossier-tag); color: var(--dossier-source); font-size: 12px; line-height: 16px; text-align: center; overflow-wrap: anywhere; }
.dossier-relation__tag:hover, .dossier-relation__tag[aria-expanded='true'] { background: var(--dossier-tag-hover); color: var(--dossier-ink); }
.dossier-relation__sources { color: var(--dossier-source); font-size: 12px; line-height: 16px; padding: 12px; border: 1px solid var(--dossier-border); border-radius: 8px; margin-top: 8px; }
.dossier-relation__source-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dossier-relation__source-heading strong { font-weight: 500; }
.dossier-relation__sources p, .dossier-relation__sources .dossier-quote { margin-top: 12px; }
.dossier-relation__sources a { display: block; text-decoration: underline; margin-top: 4px; }
.dossier-genealogy-path { line-height: 1.8; }
.dossier-evidence-line { display: block; }
.dossier-genealogy-path button { color: inherit; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.dossier-genealogy-path button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.dossier-artworks { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 16px; }
.dossier-artwork { display: block; flex: none; width: min-content; max-width: 100%; text-align: left; }
.dossier-artwork__viewport { max-width: 100%; overflow-x: auto; }
.dossier-artwork__image { display: block; width: 100%; height: 100%; max-width: none; }
.dossier-artwork__caption { display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding-inline: 4px; max-width: 389px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.dossier-artwork__caption strong { font-weight: 500; }
.dossier-artwork__caption > span { color: var(--dossier-source); font-size: 12px; line-height: 16px; }
.dossier-artwork:hover .dossier-artwork__caption strong { text-decoration: underline; text-underline-offset: 3px; }
.dossier-list-caption { font: 600 18px/24px 'Cormorant Garamond', serif; color: var(--dossier-muted); margin-top: 16px; }
.dossier-about { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--dossier-border-strong); color: var(--dossier-source); font-size: 13px; line-height: 20px; }
.dossier-about summary { cursor: pointer; color: var(--dossier-muted); }
.dossier-about p, .dossier-about h3, .dossier-about details { margin-top: 12px; }
.dossier-data-status { color: var(--dossier-muted); font-size: 13px; line-height: 20px; margin-top: 24px; }
.dossier-lightbox-overlay { position: fixed; inset: 0; z-index: 80; background: #000b; backdrop-filter: blur(8px); }
.dossier-lightbox { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 81; background: var(--dossier-bg, #1e1e1e); color: var(--dossier-ink); width: min(880px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; padding: 24px; border: 1px solid var(--dossier-border-strong); border-radius: 8px; font-family: 'Roboto Flex', sans-serif; }
.dossier-lightbox h2 { font-size: 20px; font-weight: 600; padding-right: 36px; }
.dossier-lightbox > button { position: absolute; top: 16px; right: 16px; }
.dossier-lightbox > img { display: block; max-width: 100%; max-height: 62svh; margin: 20px auto; object-fit: contain; }
.dossier-lightbox p { color: var(--dossier-source); font-size: 13px; line-height: 20px; margin-top: 8px; overflow-wrap: anywhere; }
.dossier-lightbox > div { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; }
.dossier-lightbox a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .character-dossier:not(.character-dossier--page) { position: fixed; z-index: 40; right: 0; top: 0; height: 100svh; max-width: 100vw; box-shadow: -24px 0 64px var(--dossier-shadow); } }
@media (max-width: 497px) { .character-dossier { width: 100vw; } .dossier-content { padding: 20px; } .dossier-navigation { padding-inline: 20px; } .dossier-section__heading { gap: 12px; } .dossier-section__heading :is(h2, h3) { font-size: 26px; line-height: 32px; } }
@media (prefers-reduced-motion: reduce) { .character-dossier * { scroll-behavior: auto !important; transition: none !important; } }

/* Dossier typography is independent of the graph's global heading presets. */
.dossier-header :is(h1, h2), .dossier-header p, .dossier-section__heading :is(h2, h3) { font-family: "Cormorant Garamond", serif; font-variation-settings: normal; color: var(--dossier-ink); }
.dossier-header p { color: var(--dossier-muted); }
.dossier-quote blockquote { border: 0; padding: 0; font-style: normal; color: var(--dossier-ink); }
.dossier-lightbox h2 { color: var(--dossier-ink); }

.dossier-zeus__portrait { mask-image: linear-gradient(#000 72%, #000c 83%, transparent 100%); }
.dossier-lightbox .dossier-artwork__caption { display: flex; flex-direction: column; margin-block: 8px; max-width: none; }

.dossier-artwork__frame { position: relative; }
.dossier-artwork__status { position: absolute; inset: 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: #51483f; font-size: 13px; line-height: 20px; padding: 12px; }