/* Story X-ray — the report card rendered by story-xray.js.
   Lives on the Import page (dashboard theme) and on /tools/story-xray (public
   theme); everything is keyed to the shared tokens with plain fallbacks. */

.et-xray {
    --xray-line: var(--et-ui-line, rgba(255, 255, 255, 0.12));
    --xray-muted: var(--et-text-muted, #9ca3af);
    --xray-text: var(--et-text-primary, #f4f4f5);
    --xray-accent: var(--et-accent-primary, #2dd4bf);
    --xray-good: #34d399;
    --xray-fair: #fbbf24;
    --xray-low: #f87171;
    --xray-panel: var(--et-ws-panel, rgba(255, 255, 255, 0.03));
    color: var(--xray-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.et-xray[aria-busy="true"] { min-height: 6rem; }

.et-xray-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}
.et-xray-tile {
    border: 1px solid var(--xray-line);
    background: var(--xray-panel);
    padding: 0.7rem 0.85rem;
    min-width: 0;
}
.et-xray-tile__val { font-size: 1.35rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.et-xray-tile__lbl { font-size: 0.75rem; color: var(--xray-muted); margin-top: 0.15rem; }
.et-xray-tile.is-good .et-xray-tile__val { color: var(--xray-good); }
.et-xray-tile.is-fair .et-xray-tile__val { color: var(--xray-fair); }
.et-xray-tile.is-low .et-xray-tile__val { color: var(--xray-low); }

.et-xray-section { margin: 0 0 1.5rem; }
.et-xray-h {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--xray-accent);
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--xray-line);
}
.et-xray-h__sub { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--xray-muted); }

/* Folded sections (long books) and the "N more names" cast fold */
.et-xray-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.et-xray-fold > summary::-webkit-details-marker { display: none; }
.et-xray-fold > summary::before { content: ''; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); flex: none; opacity: 0.7; transition: transform 0.15s; }
.et-xray-fold[open] > summary::before { transform: rotate(45deg); }
.et-xray-fold__hint { margin-left: auto; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--xray-muted); }
.et-xray-fold[open] > summary .et-xray-fold__hint { visibility: hidden; }
.et-xray-more { margin-top: 0.35rem; }
.et-xray-more > summary { cursor: pointer; font-size: 0.8125rem; color: var(--xray-muted); padding: 0.25rem 0; }
.et-xray-more > summary:hover { color: var(--xray-accent); }

/* Forecast */
.et-xray-forecast__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.et-xray-forecast__item {
    display: grid;
    grid-template-columns: 0.75rem 1fr;
    gap: 0.75rem;
    border: 1px solid var(--xray-line);
    background: var(--xray-panel);
    padding: 0.75rem 0.9rem 0.75rem 0.75rem;
}
.et-xray-sev { display: block; width: 0.5rem; margin-top: 0.35rem; border-radius: 999px; background: var(--xray-muted); align-self: stretch; }
.et-xray-sev--high .et-xray-sev { background: var(--xray-low); }
.et-xray-sev--mid .et-xray-sev { background: var(--xray-fair); }
.et-xray-sev--low .et-xray-sev { background: var(--xray-good); }
.et-xray-forecast__title { font-weight: 700; margin-bottom: 0.15rem; }
.et-xray-forecast__detail { margin: 0 0 0.4rem; color: var(--xray-text); opacity: 0.92; }
.et-xray-forecast__action { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--xray-muted); }
.et-xray-forecast__action i { color: var(--xray-accent); }

.et-xray-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.et-xray-chip {
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--xray-line);
    background: transparent;
    color: var(--xray-text);
    cursor: default;
}
button.et-xray-chip { cursor: pointer; }
button.et-xray-chip:hover { border-color: var(--xray-accent); color: var(--xray-accent); }
.et-xray-chip--more { color: var(--xray-muted); }

/* Cast */
.et-xray-cast { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.et-xray-cast__row {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) 1fr minmax(6rem, 12rem);
    gap: 0.75rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--xray-line);
}
.et-xray-cast__row.is-faded .et-xray-cast__name { opacity: 0.7; }
.et-xray-cast__name { font-weight: 700; overflow-wrap: anywhere; }
.et-xray-cast__meta { font-size: 0.8125rem; color: var(--xray-muted); }
.et-xray-cast__curve { display: flex; align-items: flex-end; gap: 1px; height: 18px; justify-self: end; width: 100%; }
.et-xray-cast__curve i { display: block; flex: 1 1 0; min-width: 1px; background: var(--xray-accent); opacity: 0.85; }
@media (max-width: 575.98px) {
    .et-xray-cast__row { grid-template-columns: 1fr; gap: 0.15rem; }
    .et-xray-cast__curve { justify-self: stretch; }
}

/* Voice */
.et-xray-bullets { margin: 0 0 0.75rem; padding-left: 1.1rem; }
.et-xray-bullets li { margin-bottom: 0.2rem; }
.et-xray-voice__spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin: 0.25rem 0 0.35rem; }
.et-xray-voice__spark i { display: block; flex: 1 1 0; min-width: 2px; background: var(--xray-good); }
.et-xray-voice__spark i.is-fair { background: var(--xray-fair); }
.et-xray-voice__spark i.is-low { background: var(--xray-low); }

/* Repetition / continuity / health */
.et-xray-phrases { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.et-xray-phrases li { break-inside: avoid; margin-bottom: 0.25rem; font-size: 0.9rem; }
.et-xray-phrases q { font-style: italic; }
.et-xray-phrases span { color: var(--xray-muted); font-size: 0.8125rem; }
@media (max-width: 575.98px) { .et-xray-phrases { columns: 1; } }
.et-xray-cont { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.et-xray-cont__chs { color: var(--xray-muted); font-size: 0.8125rem; margin-left: 0.35rem; }
.et-xray-cont__detail { font-size: 0.875rem; color: var(--xray-muted); }
.et-xray-flags { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.25rem; max-width: 30rem; }
.et-xray-flags li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--xray-line); padding: 0.25rem 0; }
.et-xray-flags__n { color: var(--xray-muted); font-size: 0.8125rem; white-space: nowrap; }

/* Table */
.et-xray-table-wrap { overflow-x: auto; }
.et-xray-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.et-xray-table th, .et-xray-table td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--xray-line); vertical-align: top; }
.et-xray-table th { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xray-muted); font-weight: 600; }
.et-xray-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.et-xray-table .ttl { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-xray-table .markers { color: var(--xray-muted); max-width: 16rem; }
.et-xray-table .is-off { color: var(--xray-low); font-weight: 700; }
.et-xray-table .is-good { color: var(--xray-good); }
.et-xray-table .is-fair { color: var(--xray-fair); }
.et-xray-table .is-low { color: var(--xray-low); }
.et-xray-table tbody tr.is-highlight td { background: color-mix(in srgb, var(--xray-accent) 14%, transparent); }

/* Notes, footer, states */
.et-xray-note { font-size: 0.875rem; color: var(--xray-muted); margin: 0.35rem 0 0.5rem; }
.et-xray-note--warn { color: var(--xray-text); }
.et-xray-note--warn i { color: var(--xray-fair); }
.et-xray-foot { font-size: 0.78rem; color: var(--xray-muted); margin: 0.5rem 0 0; }
.et-xray-loading { display: flex; gap: 0.85rem; align-items: center; padding: 1rem 0.25rem; }
.et-xray-loading__pulse { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--xray-accent); animation: et-xray-pulse 1.1s ease-in-out infinite; flex: 0 0 auto; }
.et-xray-loading__note { font-size: 0.85rem; color: var(--xray-muted); }
@keyframes et-xray-pulse { 0%, 100% { transform: scale(0.75); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } }
.et-xray-error { color: var(--xray-low); padding: 0.75rem 0; }