/* Episode player, its results panel and the small data charts. Extracted from
   home.css on October 17 so the Frontier article page can load them without
   the old home layout. /insights styles its copy of the results panel in
   insights-page.css. */
.episode-stage{position:relative;margin-bottom:64px;scroll-margin-top:85px}
.ep-seg{display:block;min-width:0;flex:1;background:#8c8781}
.ep-seg--G{background:var(--pass,#3987e5)}
.ep-seg--B{background:var(--miss,#d95926)}
.ep-seg--W{background:#c6bba6}
.ep-seg--N{background:#6e737d}
.ep-seg--R{background:#2c2c2c}
.player{border:1px solid #c3ab7966;border-radius:3px;background:#212326;box-shadow:0 20px 70px #0003;overflow:hidden}
.player-head{position:relative;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);min-height:184px;align-items:center;background:#0b1b2e}
.player-art{position:relative;min-height:184px;height:100%;overflow:hidden}
.player-art>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.player-art-shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,#0b1b2e)}
.player-title{padding:28px 84px 28px 30px}
.player-title .eyebrow{font-size:11px;letter-spacing:1.1px;margin-bottom:10px;color:#cabb9d}
.player-title h3{font-size:33px;line-height:1.1;letter-spacing:-.025em;font-weight:500}
.player-meta{font-size:12px;line-height:1.6;margin-top:13px;color:#b1b8c2}
/* Episode 1 is a demo (comms and Kyle, 3 Nov): the notice under the player's heading, on every view. */
.player-demo{margin:8px 0 0;font:400 11px/1.4 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-gold,#f2cf7a)}
.player-close{position:absolute;top:22px;right:22px;width:44px;height:44px;border:1px solid #d2c09a66;border-radius:50%;background:#09152880;cursor:pointer}
.player-close span:before,.player-close span:after{content:"";position:absolute;left:13px;top:20px;width:16px;height:1px;background:#f5ead2;transform:rotate(45deg)}
.player-close span:after{transform:rotate(-45deg)}
.player-close:hover{border-color:var(--gold);background:#1434cb}
.player-tabs{display:flex;gap:32px;padding:0 32px;border-bottom:1px solid #d1bd9644;background:#25272a;overflow-x:auto;scrollbar-width:thin}
.player-tabs button{flex:none;min-height:60px;padding:15px 0;border:0;border-bottom:2px solid transparent;background:none;color:#b4b6bb;font-size:14px;cursor:pointer;white-space:nowrap}
.player-tabs button:hover{color:var(--white)}
.player-tabs button[aria-selected=true]{border-color:var(--gold);color:#f2dfb5}
.player-panel{padding:32px;min-width:0}
.player-panel .panel-intro{display:flex;justify-content:space-between;gap:30px;align-items:start;margin-bottom:28px}
.panel-intro h4{font-size:23px;line-height:1.2;font-weight:500;max-width:14ch;flex:0 0 28%}
.panel-intro p{font-size:14px;line-height:1.65;max-width:74ch}
.ep-results-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.ep-results-stats strong{display:block;font-size:43px;font-weight:500;line-height:1.1;letter-spacing:-.03em;color:#e8d5b0}
.ep-results-stats strong>span{font-size:22px;color:#aaa69e;font-weight:400}
.ep-results-stats small{display:block;font-size:12px;line-height:1.5;margin-top:10px;color:var(--ink)}
.ep-legend{display:flex;flex-wrap:wrap;gap:12px 24px;padding:22px 0;margin:0;list-style:none;font-size:12px;color:var(--ink-strong)}
.ep-legend li{display:flex;gap:8px;align-items:center}
.ep-legend .ep-seg{width:9px;height:9px;flex:none;border-radius:1px}
.ep-legend b{font-weight:500;color:#fff}
.ep-table{width:100%;border-collapse:collapse;font-size:14px}
.ep-table th{text-align:left;font-weight:500;color:var(--white)}
.ep-table thead th{padding:13px 8px;border-bottom:1px solid var(--line-strong);font-size:11px;font-weight:400;color:var(--ink)}
.ep-table td,.ep-table tbody th{padding:13px 8px;border-bottom:1px solid var(--line)}
.ep-table th small{display:block;font-size:11px;color:var(--ink);font-weight:400;margin-top:3px}
.ep-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ep-runs{display:inline-flex;gap:7px;vertical-align:middle}
/* The count sits beside a model's three squares (research team's note D7, Kyle 19 Oct): no Passed column. */
.ep-run-count{display:inline-block;min-width:3ch;margin-left:12px;vertical-align:middle;font:400 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.ep-run{width:16px;height:16px;border-radius:2px}
.mini-chart{position:relative;margin:0;min-width:0}
.mini-chart>svg{width:100%;height:auto;overflow:visible}
.mini-chart svg text{font:400 11px var(--display);fill:#bbb5aa}
.mini-chart .grid line{stroke:#aaa08b25;stroke-width:1;stroke-dasharray:2 4}
.mini-chart .axis text{fill:#a9a49b;font-size:10px}
.mini-chart .track{fill:#d2bc8e0c}
.mini-chart .bar{fill:#4c7eb1;transform-box:fill-box;transform-origin:left center;transition:fill .2s}
.mini-chart .bar.is-sam{fill:#dfbc74}
.mini-chart .label.is-sam{fill:#f2dbad;font-weight:500}
.mini-chart .value{fill:#d5d2cc;font-size:10px}
.mini-chart .dot{fill:#e0c17d;stroke:#26231f;stroke-width:2;transition:fill .2s,stroke .2s}
.mini-chart .dot:hover,.mini-chart .dot:focus{fill:#fff0cc;stroke:#fff0cc}
.mini-chart .bar:hover,.mini-chart .bar:focus,.mini-chart .episode-mark:hover .bar,.mini-chart .episode-mark:focus .bar{fill:#f4dca5}
.mini-chart .episode-mark:focus-visible{outline:1px solid #dfbc74;outline-offset:3px}
.mini-chart .tip{position:absolute;z-index:5;width:min(250px,100%);padding:9px 12px;background:#f0e5ce;color:#1c2430;font-size:12px;line-height:1.5;border-radius:3px;box-shadow:0 6px 20px #0005;pointer-events:none}
.chart-table summary{padding:14px 0 0;border-top:1px solid #ffffff18;font-size:12px;color:#d5c6a9}
.chart-table .data-table{font-size:12px}
.chart-table .data-table th{font-size:10px;letter-spacing:.3px}
.chart-table .data-table td,.chart-table .data-table th{padding:10px 6px}
@media(max-width:860px){
  .player-title{padding:25px 66px 25px 22px}
  .player-title h3{font-size:29px}
  .player-meta{font-size:11px}
  .player-close{top:18px;right:16px}
  .player-panel{padding:24px}
  .player-panel .panel-intro{display:block}
  .panel-intro h4{max-width:none;margin-bottom:15px}
  .player-tabs{gap:26px;padding-inline:24px}
}
@media(max-width:640px){
  .episode-stage{margin-bottom:43px}
  .player-head{grid-template-columns:1fr;min-height:0}
  .player-art{height:150px;min-height:0}
  .player-art>img{object-position:center 40%}
  .player-art-shade{background:linear-gradient(0deg,#0b1b2e,transparent 85%)}
  .player-title{padding:13px 23px 26px}
  .player-title h3{font-size:31px;max-width:18ch}
  .player-title .eyebrow{font-size:10px}
  .player-meta{font-size:12px;max-width:34ch}
  .player-close{top:16px;right:16px}
  .player-tabs{padding-inline:20px;gap:24px}
  .player-tabs button{font-size:12px;min-height:54px}
  .player-panel{padding:22px 17px}
  .panel-intro h4{font-size:22px}
  .panel-intro p{font-size:13px}
  .player-panel .card{padding:19px}
  .episode-request blockquote{font-size:17px}
  .ep-results-stats{gap:13px;padding-bottom:22px}
  .ep-results-stats strong{font-size:31px}
  .ep-results-stats strong>span{font-size:16px}
  .ep-results-stats small{font-size:10px;margin-top:8px}
  .ep-legend{gap:12px 17px;font-size:11px}
  .ep-table{font-size:12px}
  .ep-table th small{font-size:10px}
  .ep-table td,.ep-table tbody th{padding:12px 4px}
  .ep-table thead th{font-size:10px;padding-inline:4px}
  .ep-runs{gap:4px}
  .ep-run{width:12px;height:12px}
  .ep-table .num{white-space:nowrap}
  .market-strip{padding:18px}
  .market-head h4{font-size:17px}
  .market-legend{font-size:12px}
  .mini-chart svg text{font-size:16px}
  .mini-chart .axis text,.mini-chart .value{font-size:14px}
  .chart-table .data-table{font-size:11px}
  .chart-table .data-table th{font-size:9px;letter-spacing:0}
}
@media(max-width:420px){
  .player-title h3{font-size:28px}
  .player-panel{padding:20px 14px}
  .player-tabs{gap:22px;padding-inline:18px}
  .ep-results-stats strong{font-size:28px}
  .ep-results-stats strong>span{font-size:14px}
  .ep-results-stats small{font-size:10px}
  .ep-table th:first-child{width:52%}
}
.loading-state{display:flex;align-items:center;gap:10px;min-height:120px;justify-content:center;color:var(--muted);font-size:15px}
/* The Play tab: one way into the game, which runs full screen. */
.game-launch{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center}
.game-launch-art{aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#0a0a0a}
.game-launch-art img{width:100%;height:100%;object-fit:cover;display:block}
.game-launch-copy h4{margin:6px 0 10px;font:700 28px/1.15 var(--display);letter-spacing:-.02em;color:#fff}
.game-launch-copy>p:not(.eyebrow):not(.note){margin:0 0 20px;font:400 17px/1.4 var(--display);color:#fff}
.game-launch-copy .note{margin-top:18px}
@media (max-width:767px){.game-launch{grid-template-columns:1fr;gap:18px}}