/* film-room.css — shared chrome for The Professor's Film Room (Phase 6.6).
 *
 * Terminal aesthetic only: reuses the css/styles.css :root tokens (--text-main #00ff88,
 * --text-orange #ffb84d, --font-mono, --lv-ink for readable long-form body copy). No
 * gradients, no shadows beyond the existing glow tokens. Charts are inline SVG generated
 * by scripts/generate_film_room_charts.py and embedded as same-origin <img> (CSP-safe).
 * Every rule here is fr-prefixed so it never touches an existing page's styles.
 */

/* ── breadcrumb ─────────────────────────────────────────────────────────────── */
.fr-breadcrumb {
    font-size: 0.65rem;
    color: rgba(0, 255, 136, 0.4);
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}
.fr-breadcrumb a { color: rgba(0, 255, 136, 0.4); text-decoration: none; }
.fr-breadcrumb a:hover { color: var(--text-main); }

/* ── article shell ──────────────────────────────────────────────────────────── */
.fr-article { max-width: 840px; }

.fr-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 26px;
}
.fr-tag {
    font-size: 0.6rem;
    color: var(--text-orange);
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.fr-tag.diamond { color: var(--text-main); }
.fr-title {
    font-size: 1.35rem;
    letter-spacing: 1.5px;
    line-height: 1.35;
    text-shadow: var(--glow-green);
    margin-bottom: 12px;
}
.fr-dek {
    font-size: 0.85rem;
    color: var(--lv-ink);
    line-height: 1.65;
    max-width: 680px;
    margin-bottom: 12px;
}
.fr-meta {
    font-size: 0.62rem;
    color: rgba(0, 255, 136, 0.35);
    letter-spacing: 1px;
}

/* ── score box ──────────────────────────────────────────────────────────────── */
.fr-scorebox {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 20px 24px;
    margin-bottom: 22px;
}
.fr-score-team { text-align: center; }
.fr-score-abbr { font-size: 1.4rem; letter-spacing: 3px; text-shadow: var(--glow-green); }
.fr-score-name { font-size: 0.6rem; color: rgba(0, 255, 136, 0.45); margin: 4px 0 12px; }
.fr-score-num { font-size: 2.4rem; letter-spacing: 2px; }
.fr-score-num.winner { color: var(--text-main); text-shadow: var(--glow-green); }
.fr-score-num.loser { color: rgba(0, 255, 136, 0.4); }
.fr-score-divider { font-size: 1.5rem; color: rgba(0, 255, 136, 0.2); text-align: center; }
.fr-score-label { font-size: 0.6rem; color: rgba(0, 255, 136, 0.35); letter-spacing: 2px; text-align: center; margin-top: 4px; }

/* ── KPI row ────────────────────────────────────────────────────────────────── */
.fr-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}
.fr-kpi-card { background: var(--panel-bg); border: 1px solid var(--border-color); padding: 14px; text-align: center; }
.fr-kpi-label { font-size: 0.56rem; color: rgba(0, 255, 136, 0.4); letter-spacing: 1.5px; margin-bottom: 6px; }
.fr-kpi-val { font-size: 1.1rem; color: var(--text-main); text-shadow: var(--glow-green); }
.fr-kpi-val.orange { color: var(--text-orange); text-shadow: none; }
.fr-kpi-val.neg { color: #ff5555; text-shadow: none; }
.fr-kpi-sub { font-size: 0.58rem; color: rgba(0, 255, 136, 0.35); margin-top: 2px; }

/* ── prose + section heads ──────────────────────────────────────────────────── */
.fr-section-head {
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    color: var(--text-main);
    text-shadow: var(--glow-green);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin: 32px 0 16px;
}
.fr-prose {
    font-size: 0.86rem;
    color: var(--lv-ink);
    line-height: 1.85;
    margin-bottom: 16px;
    max-width: 720px;
}
.fr-prose a { color: var(--text-orange); text-decoration: none; border-bottom: 1px dotted rgba(255, 184, 77, 0.5); }
.fr-prose a:hover { color: var(--text-main); border-bottom-color: var(--text-main); }
.fr-prose strong { color: var(--text-main); }

.fr-callout {
    background: var(--panel-bg);
    border-left: 3px solid var(--text-orange);
    padding: 14px 18px;
    margin: 20px 0;
    font-size: 0.84rem;
    color: var(--lv-ink);
    line-height: 1.7;
    max-width: 720px;
}
.fr-callout strong { color: var(--text-orange); }

/* the "numbers say / story says" split panel */
.fr-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 22px 0;
}
.fr-split-cell { background: var(--panel-bg); border: 1px solid var(--border-color); padding: 16px 18px; }
.fr-split-cell.story { border-left: 3px solid var(--text-orange); }
.fr-split-cell.numbers { border-left: 3px solid var(--text-main); }
.fr-split-tag { font-size: 0.6rem; letter-spacing: 2px; margin-bottom: 8px; }
.fr-split-cell.numbers .fr-split-tag { color: var(--text-main); }
.fr-split-cell.story .fr-split-tag { color: var(--text-orange); }
.fr-split-text { font-size: 0.8rem; color: var(--lv-ink); line-height: 1.7; }

/* ── charts ─────────────────────────────────────────────────────────────────── */
.fr-figure { margin: 22px 0 26px; }
.fr-chart {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-color);
    background: var(--panel-bg);
}
.fr-figcap {
    font-size: 0.68rem;
    color: var(--lv-ink-dim);
    line-height: 1.6;
    margin-top: 8px;
    letter-spacing: 0.3px;
}
.fr-figcap strong { color: var(--text-orange); }
.fr-chart-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.66rem;
    letter-spacing: 1.5px;
    color: var(--text-orange);
    text-decoration: none;
}
.fr-chart-link:hover { color: var(--text-main); }

/* ── drive log table (accessible data behind the charts) ────────────────────── */
.fr-drivelog { width: 100%; border-collapse: collapse; margin: 12px 0 26px; font-size: 0.72rem; }
.fr-drivelog caption { text-align: left; font-size: 0.66rem; color: rgba(0, 255, 136, 0.4); letter-spacing: 1px; margin-bottom: 8px; }
.fr-drivelog th, .fr-drivelog td { border: 1px solid var(--border-color); padding: 6px 9px; text-align: left; }
.fr-drivelog th { color: rgba(0, 255, 136, 0.5); font-weight: normal; letter-spacing: 1px; font-size: 0.62rem; }
.fr-drivelog td { color: var(--lv-ink-dim); }
.fr-drivelog td.pos { color: var(--text-main); }
.fr-drivelog td.neg { color: #ff5555; }
.fr-drivelog td.res-td { color: var(--text-main); }
.fr-drivelog td.res-fg { color: var(--text-orange); }
.fr-drivelog td.res-to { color: #ff5555; }

/* ── verdict ────────────────────────────────────────────────────────────────── */
.fr-verdict { background: var(--panel-bg); border: 1px solid var(--text-main); padding: 20px; margin: 26px 0; max-width: 760px; }
.fr-verdict-tag { font-size: 0.6rem; color: var(--text-orange); letter-spacing: 2px; margin-bottom: 8px; }
.fr-verdict-text { font-size: 0.88rem; color: var(--text-main); line-height: 1.75; }

/* ── CTA strip ──────────────────────────────────────────────────────────────── */
.fr-cta-strip { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.fr-cta-btn {
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    color: var(--text-orange);
    border: 1px solid var(--text-orange);
    padding: 8px 16px;
    text-decoration: none;
    transition: background 0.15s;
}
.fr-cta-btn:hover { background: rgba(255, 184, 77, 0.1); }

/* ── index page ─────────────────────────────────────────────────────────────── */
.fr-index-header { padding: 28px 0 20px; border-bottom: 1px solid var(--border-color); margin-bottom: 28px; }
.fr-index-title { font-size: 1.5rem; letter-spacing: 3px; text-shadow: var(--glow-green); margin-bottom: 10px; overflow-wrap: anywhere; }
.fr-index-sub { font-size: 0.84rem; color: var(--lv-ink); max-width: 660px; line-height: 1.75; }

.fr-genres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; }
.fr-genre { background: var(--panel-bg); border: 1px solid var(--border-color); padding: 22px; }
.fr-genre.big { border-top: 2px solid var(--text-orange); }
.fr-genre.diamond { border-top: 2px solid var(--text-main); }
.fr-genre-tag { font-size: 0.62rem; letter-spacing: 2px; margin-bottom: 10px; }
.fr-genre.big .fr-genre-tag { color: var(--text-orange); }
.fr-genre.diamond .fr-genre-tag { color: var(--text-main); }
.fr-genre-desc { font-size: 0.76rem; color: var(--lv-ink-dim); line-height: 1.7; }

.fr-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 36px; }
.fr-card { background: var(--panel-bg); border: 1px solid var(--border-color); padding: 20px; text-decoration: none; display: block; transition: border-color 0.2s; }
.fr-card:hover { border-color: var(--text-main); }
.fr-card-tag { font-size: 0.58rem; color: var(--text-orange); letter-spacing: 2px; margin-bottom: 10px; }
.fr-card.diamond .fr-card-tag { color: var(--text-main); }
.fr-card-title { font-size: 0.98rem; letter-spacing: 0.5px; color: var(--text-main); margin-bottom: 8px; line-height: 1.4; }
.fr-card-desc { font-size: 0.74rem; color: var(--lv-ink-dim); line-height: 1.65; margin-bottom: 12px; }
.fr-card-meta { font-size: 0.58rem; color: rgba(0, 255, 136, 0.3); letter-spacing: 0.5px; }

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .fr-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .fr-genres { grid-template-columns: 1fr; }
    .fr-split { grid-template-columns: 1fr; }
    .fr-card-grid { grid-template-columns: 1fr; }
    .fr-title { font-size: 1.1rem; overflow-wrap: anywhere; }
    .fr-index-title { font-size: 1.15rem; letter-spacing: 1.5px; }
    .fr-drivelog { font-size: 0.66rem; }
    .fr-drivelog th, .fr-drivelog td { padding: 5px 6px; }
}