/* ============================================================
 *  FAN CHART VIEW  (#view-fanchart, static/fanchart.js)
 *
 *  Wedge colours: each wedge carries only --h (hue), --s (saturation, 0-100)
 *  and --t (tint, 0..1: 0 = strongest, 1 = palest) inline. The lightness
 *  band is a theme token pair below, so the light theme gets light fills
 *  under dark text and the dark theme dark fills under light text — the
 *  label colour is one token, readable on every wedge, and a theme toggle
 *  repaints without a re-render.
 * ============================================================ */

:root {
    --fc-l0: 67;            /* lightness at t = 0 */
    --fc-ldelta: 21;        /* added at t = 1 (light: paler toward white) */
    --fc-label: #1b1b24;
    --fc-label-soft: #3d3d48;
    --fc-stroke: var(--bg-surface);
    --fc-unk-fill: rgba(0, 0, 0, 0.03);
    --fc-unk-stroke: #b7ae9f;
    --fc-void: rgba(0, 0, 0, 0.025);
    --fc-dup: #7a3b00;
    --fc-hl: #d35400;
    --fc-focus: #1a1a2e;
    --fc-disc: var(--accent);
    --fc-disc-text: #fff;
}
:root[data-theme="dark"] {
    --fc-l0: 27;
    --fc-ldelta: -8;       /* dark: fade toward the page instead */
    --fc-label: #eef0ef;
    --fc-label-soft: #c9cdcb;
    --fc-unk-fill: rgba(255, 255, 255, 0.03);
    --fc-unk-stroke: #5d6368;
    --fc-void: rgba(255, 255, 255, 0.025);
    --fc-dup: #ffc27a;
    --fc-hl: #ff9f43;
    --fc-focus: #ffffff;
    --fc-disc: #3f6e4c;
    --fc-disc-text: #fff;
}

#view-fanchart .view-header { text-align: center; }
#view-fanchart .fc-controls { max-width: 440px; margin: 0 auto 16px; }
#view-fanchart #fc-results { position: relative; left: 0; right: 0; top: 0; }

.fc-muted { color: var(--text-muted); font-size: 0.85rem; }
.fc-h3 { font-size: 1rem; color: var(--text-heading); margin: 0 0 6px; }

.fc-empty {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    color: var(--text-primary);
    line-height: 1.5;
}
.fc-empty > p:first-child { margin-top: 0; }
.fc-empty .fc-muted { margin-left: 8px; }

/* ---- hero ---- */
.fc-hero { text-align: center; margin-bottom: 10px; }
.fc-hero-kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.fc-hero-name {
    background: none;
    border: none;
    padding: 2px 4px;
    font: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.fc-hero-name:hover, .fc-hero-name:focus-visible { color: var(--accent); text-decoration: underline; }
.fc-hero-sub { color: var(--text-soft); font-size: 0.88rem; }
.fc-up { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 4px; }
.fc-link-btn {
    background: none;
    border: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 6px 8px;
    min-height: 32px;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

/* ---- toolbar ---- */
.fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 14px;
    margin-bottom: 10px;
}
.fc-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.fc-field select {
    font: inherit;
    padding: 6px 8px;
    min-height: 36px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
}
.fc-tool-btn {
    font: inherit;
    font-size: 0.85rem;
    padding: 6px 12px;
    min-height: 36px;
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
}
.fc-tool-btn:hover, .fc-tool-btn:focus-visible { border-color: var(--accent); background: var(--bg-hover-soft); }

/* ---- stage: chart + info card ---- */
/* The chart gets the whole width the view allows (#view-fanchart is 1500px,
   like Relationship), centred on the page. The info card is a bar directly
   UNDER it rather than a column beside it: beside, it pushed the fan off
   centre and took a quarter of the width; under, a change in its content as
   you hover can never shift the chart. */
.fc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.fc-stage .fc-chart { width: 100%; box-sizing: border-box; }
/* A half-circle on a phone is ~180px tall and its names unreadable. Draw it
   at a legible 760px and let the box scroll sideways (fanchart.js starts it
   centred); the page itself never scrolls horizontally. */
@media (max-width: 700px) {
    .fc-stage .fc-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fc-stage .fc-svg { width: 760px; max-width: none; }
}
.fc-chart {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    min-width: 0;
}
/* As wide as the column, but chart + info bar never taller than the screen:
   the fan is ~1.95x as wide as it is tall, so cap the width at that multiple
   of the viewport height less the sticky header (~60px) and the bar (~110px).
   Centred when the height cap binds. */
.fc-svg {
    display: block;
    width: min(100%, calc((100vh - 170px) * 1.95));
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.fc-w {
    fill: hsl(var(--h) calc(var(--s) * 1%) calc((var(--fc-l0) + var(--fc-ldelta) * var(--t)) * 1%));
    stroke: var(--fc-stroke);
    stroke-width: 1.5;
    cursor: pointer;
    transition: filter 0.12s;
}
.fc-w:hover { filter: brightness(1.06) saturate(1.15); }
:root[data-theme="dark"] .fc-w:hover { filter: brightness(1.25); }
.fc-w:focus { outline: none; }
.fc-w:focus-visible, .fc-disc:focus-visible .fc-disc-bg {
    stroke: var(--fc-focus);
    stroke-width: 3;
}
.fc-disc:focus { outline: none; }
.fc-w.fc-dup { stroke: var(--fc-dup); stroke-width: 2.2; }
.fc-chart.fc-has-hl .fc-w:not(.fc-hl) { opacity: 0.55; }
.fc-w.fc-hl { stroke: var(--fc-hl); stroke-width: 3.5; opacity: 1; }
.fc-dupdot { fill: var(--fc-dup); stroke: var(--fc-stroke); stroke-width: 0.8; }

.fc-unk {
    fill: var(--fc-unk-fill);
    stroke: var(--fc-unk-stroke);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}
.fc-void { fill: var(--fc-void); stroke: none; }

.fc-labels { pointer-events: none; }
.fc-lbl { fill: var(--fc-label); font-family: inherit; }
.fc-lbl-name { font-weight: 600; }
.fc-lbl-yr { fill: var(--fc-label-soft); font-weight: 400; }
.fc-lbl-unk { fill: var(--text-muted); font-style: italic; font-weight: 400; }

.fc-disc { cursor: pointer; }
.fc-disc-bg { fill: var(--fc-disc); stroke: var(--fc-stroke); stroke-width: 1.5; }
.fc-disc:hover .fc-disc-bg { filter: brightness(1.1); }
.fc-disc-name { fill: var(--fc-disc-text); font-weight: 700; pointer-events: none; }
.fc-disc-yr { fill: var(--fc-disc-text); opacity: 0.9; pointer-events: none; }

/* ---- info card ---- */
.fc-card {
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 18px;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.4;
    min-height: 84px;
}
/* Text stacks in the left column; the buttons sit to its right. */
.fc-card > * { grid-column: 1; }
.fc-card > .fc-card-actions {
    grid-column: 2;
    grid-row: 1 / span 8;
    margin-top: 0;
}
@media (max-width: 560px) {
    .fc-card { grid-template-columns: minmax(0, 1fr); }
    .fc-card > .fc-card-actions { grid-column: 1; grid-row: auto; margin-top: 8px; }
}
.fc-card-rel {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.fc-card-name { font-size: 1.05rem; font-weight: 700; color: var(--text-heading); overflow-wrap: anywhere; }
.fc-card-meta { color: var(--text-soft); margin: 2px 0 0; }
.fc-card-path { color: var(--text-secondary); font-size: 0.8rem; margin-top: 6px; }
.fc-card-dup {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-primary);
    border-left: 3px solid var(--fc-dup);
    padding-left: 6px;
}
.fc-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fc-tag {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--tag-chip-bg);
    color: var(--tag-chip-fg);
    border: 1px solid var(--tag-chip-border);
}
.fc-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fc-card-btn { min-height: 36px; font-size: 0.85rem; padding: 6px 12px; }

.fc-hint { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin: 10px 0; }

/* ---- legend ---- */
.fc-legend, .fc-summary {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.fc-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.fc-legend-list li { display: inline-flex; align-items: center; gap: 6px; }
.fc-legend-detail { margin: 8px 0 0; }
.fc-sw {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex: 0 0 auto;
    background: hsl(var(--h) calc(var(--s) * 1%) calc((var(--fc-l0) + var(--fc-ldelta) * var(--t)) * 1%));
    border: 1px solid var(--border-strong);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.fc-sw-unk { background: var(--fc-unk-fill); border: 1.5px dashed var(--fc-unk-stroke); }
.fc-sw-dup { background: transparent; border: 2.5px solid var(--fc-dup); border-radius: 50%; }

/* ---- summary ---- */
.fc-summary p { margin: 0 0 6px; line-height: 1.45; }
.fc-summary .fc-h3 { margin-top: 10px; }
.fc-gens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fc-gens li {
    display: grid;
    grid-template-columns: 1.6em minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}
.fc-gen-n { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.fc-gen-bar { height: 8px; background: var(--border-faint); border-radius: 4px; overflow: hidden; }
.fc-gen-bar > span { display: block; height: 100%; background: var(--accent); }
.fc-gen-c { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.fc-footnote { font-size: 0.75rem; color: var(--text-faint); margin: 8px 0 0 !important; }

@media (max-width: 480px) {
    .fc-hero-name { font-size: 1.25rem; }
    .fc-chart { padding: 4px; }
    .fc-toolbar { gap: 6px 10px; }
}

/* ---- print (the copy PrintDoc-style lives in #print-root) ----
   Force the light lightness band and dark labels whatever the theme: the
   variables are set on the printed article itself, so they beat the
   :root[data-theme="dark"] values it would otherwise inherit. */
.fc-print {
    --fc-l0: 68;
    --fc-ldelta: 24;
    --fc-label: #111;
    --fc-label-soft: #333;
    --fc-stroke: #fff;
    --fc-unk-fill: #fff;
    --fc-unk-stroke: #999;
    --fc-void: #fafafa;
    --fc-dup: #000;
    --fc-disc: #e8e8e8;
    --fc-disc-text: #000;
    --border-strong: #999;
}
@media print {
    .fc-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .fc-print-chart { text-align: center; }
    .fc-print .fc-svg {
        width: 100%;
        max-height: 150mm;
        height: auto;
        overflow: visible;
    }
    .fc-print .fc-disc-bg { stroke: #000; stroke-width: 1; }
    .fc-print-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 4pt 12pt;
        font-size: 9pt;
        margin-top: 6pt;
    }
    .fc-print-key { display: inline-flex; align-items: center; gap: 4pt; }
    .fc-print-summary { font-size: 9pt; color: #333; margin: 4pt 0 0; }
}