/* Story engine pages. Uses the dashboard's theme tokens only, so every theme works. */
.story-na { color: var(--text-tertiary); font-size: var(--font-size-sm, 0.85em); font-weight: 500; font-style: italic; }
.story-hint { color: var(--text-secondary); font-size: var(--font-size-sm, 0.85em); margin: 2px 0 var(--space-sm); display: block; }
.story-warn { color: var(--accent-warning); font-weight: 600; }
.story-channel, .story-create, .story-detail { margin-bottom: var(--space-lg); }
.story-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-lg); }
.story-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.story-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0; }
.story-day { display: inline-flex; align-items: center; gap: 4px; margin-right: var(--space-sm); font-size: var(--font-size-sm, 0.85em); text-transform: uppercase; }
.story-save-state { color: var(--accent-success); font-size: var(--font-size-sm, 0.85em); }
.story-filters { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.story-filters label { display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); font-size: var(--font-size-sm, 0.85em); }
.story-chart { overflow-x: auto; }
.story-scroll { overflow-x: auto; }
.story-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm, 0.9em); }
.story-table th, .story-table td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.story-table th { color: var(--text-secondary); font-weight: 600; }
.story-sort, .story-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.story-link { color: var(--accent-primary); }
.story-sort:hover, .story-link:hover { text-decoration: underline; }
.story-ep { display: inline-block; margin-right: var(--space-sm); }
.story-verdict-worked { background: rgba(46, 213, 115, 0.15); color: var(--accent-success); }
.story-verdict-average { background: rgba(255, 179, 64, 0.15); color: var(--accent-warning); }
.story-verdict-failed { background: rgba(255, 71, 87, 0.15); color: var(--accent-danger); }
.story-verdict-early { background: var(--glass-bg); color: var(--text-secondary); }
.story-lessons { list-style: none; padding: 0; margin: 0; }
.story-lessons li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--glass-border); }
.story-lessons li > span:first-child { flex: 1 1 280px; }
.story-lesson-off > span:first-child { text-decoration: line-through; color: var(--text-tertiary); }
@media (max-width: 640px) { .story-card-head { flex-direction: column; align-items: flex-start; } }
.story-check { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.story-check input { width: auto; margin: 0; }
/* Five tiles: three-per-row (the shared default) would orphan two. */
@media (min-width: 1000px) { .stats-grid.story-tiles { grid-template-columns: repeat(5, 1fr); } }
.story-h2 { font-size: var(--font-size-lg, 1.1em); margin: var(--space-lg) 0 var(--space-sm); }
.story-video { width: 100%; max-width: 270px; aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius-md); display: block; margin: var(--space-sm) 0; }
.story-reject { margin: var(--space-sm) 0; display: grid; gap: var(--space-sm); max-width: 520px; }
.story-reject[hidden] { display: none; }
.story-cast { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.story-cast-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--border-color, rgba(127,127,127,.25)); }
.story-cast-row select.input { width: auto; min-width: 12rem; }
.story-cast-rate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs, 4px); }
.story-cast-rate input[type="number"] { width: 5rem; }
.story-cast-rate input[type="text"] { width: 14rem; }

/* Rate videos: ten score pills; the radio stays in the DOM for keyboard use. */
.story-scores { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: var(--space-sm) 0; }
.story-scores legend { width: 100%; margin-bottom: 4px; }
.story-score { position: relative; cursor: pointer; }
.story-score input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.story-score span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
    border-radius: 8px; border: 1px solid var(--glass-border); font-variant-numeric: tabular-nums; }
.story-score input:checked + span { background: var(--accent, #6366f1); color: #fff; border-color: transparent; }
.story-score input:focus-visible + span { outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; }
.story-rate-card textarea { width: 100%; resize: vertical; }
.story-profile h3 { margin: var(--space-sm) 0 4px; font-size: 0.95rem; }
.story-applied { margin: var(--space-sm) 0; }
.story-repeat { color: var(--accent-warning); font-weight: 600; font-size: var(--font-size-sm, 0.85em); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.story-cast-row [data-cast-flag] { display: block; flex-basis: 100%; }