/* Review Atlas 1.20: the Cover tab, and the Overview panel's day chart and selection cue. A one-game Atlas's own;
   atlas-single.js draws what these style. The cover takes the Review Map's language (Travis, 20 Oct): sections opened
   by a heavy rule and a heading, data in cards, one idea per block, each theme its own box. */

/* ---- The cover's band: the game's art large over a darkened wash of itself, then three headline cards ---- */
.cv-hero{position:relative;overflow:hidden;isolation:isolate;padding-bottom:0}
.cv-hero::before{content:"";position:absolute;inset:-60px;z-index:-2;background:var(--cv-art) center/cover no-repeat;filter:blur(26px) saturate(1.15);opacity:.42}
.cv-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,15,26,.35) 0%,rgba(11,15,26,.82) 46%,#0b0f1a 72%)}
.cv-hero .chg-hero-top{grid-template-columns:600px minmax(0,1fr);gap:44px;padding:10px 0 32px}
.cv-hero .chg-hero-art{border-radius:6px;box-shadow:0 22px 50px rgba(0,0,0,.55)}
.cv-hero h2{font-size:50px}
.cv-heads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-bottom:30px}
.cv-head{display:grid;align-content:start;gap:10px;min-width:0;padding:22px 24px 24px;border:1px solid rgba(236,237,240,.13);border-radius:10px;background:rgba(255,255,255,.055)}
.cv-head-q{margin:0;color:var(--bone,#ecedf0);font:650 18px/1.25 var(--font-sans)}
.cv-head-fig{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cv-big{padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:left}
.cv-big b{display:block;font:300 58px/1 var(--font-display);font-variation-settings:'opsz' 72;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cv-head.is-good .cv-big b{color:#8cc4f5}.cv-head.is-hard .cv-big b{color:#f2a27c}
.cv-head-label{margin:0;color:var(--bone-soft,#b9c0cf);font:15px/1.45 var(--font-sans);text-wrap:pretty}
/* A card's supporting figures: a label, then its figure, row by row. */
.cv-facts{display:grid;margin:4px 0 6px;border-top:1px solid rgba(236,237,240,.14)}
.cv-fact{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid rgba(236,237,240,.14)}
.cv-fact dt{flex:1 1 auto;min-width:0;font:14px/1.35 var(--font-sans);color:var(--bone-soft,#b9c0cf)}
.cv-fact dd{flex:0 1 auto;min-width:0;margin:0;font:700 15px/1.3 var(--font-sans);color:var(--bone,#ecedf0);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cv-fact dd .chg-delta{margin-left:8px}
.cv-head .chg-delta{padding:2px 8px;font-size:14px}
.cv-vs{margin:0 6px;font-weight:400;color:var(--bone-soft,#b9c0cf)}
.cv-arrow{margin:0 7px;color:var(--bone-soft,#b9c0cf);font-weight:400}
.cv-hero .cv-fig{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--bone,#ecedf0);text-decoration:underline dotted rgba(236,237,240,.45);text-underline-offset:3px;cursor:pointer;font-variant-numeric:tabular-nums}
.cv-head.is-good .cv-fig{color:#8cc4f5}.cv-head.is-hard .cv-fig,.cv-head.is-split .cv-fact .cv-fig{color:#f2a27c}
/* The line over the cover's days, its end values beside their points and its days under them. */
.cv-spark{display:block;width:100%;max-width:340px;height:auto;overflow:visible}
.cv-spark path{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.cv-spark circle{stroke:none}.cv-spark circle.is-mid{opacity:.7}
.cv-spark text{font:700 13px var(--font-sans);font-variant-numeric:tabular-nums}
.cv-spark .cv-spark-day{font-weight:500;font-size:12px;fill:var(--bone-soft,#b9c0cf)}
.cv-head.is-good .cv-spark path{stroke:#8cc4f5}.cv-head.is-good .cv-spark circle,.cv-head.is-good .cv-spark text:not(.cv-spark-day){fill:#8cc4f5}
.cv-head.is-hard .cv-spark path{stroke:#f2a27c}.cv-head.is-hard .cv-spark circle,.cv-head.is-hard .cv-spark text:not(.cv-spark-day){fill:#f2a27c}
/* The split: both sides named under their figures, their sizes on one bar. */
.cv-split{display:flex;gap:18px}
.cv-split-side{flex:1 1 0;display:grid;align-content:start;gap:4px;min-width:0}
.cv-split-side span{color:var(--bone,#ecedf0);font:500 15px/1.35 var(--font-sans)}
.cv-split-side small{margin-top:2px;color:var(--bone-soft,#b9c0cf);font:14px/1.4 var(--font-sans)}
.cv-split-side.is-yes .cv-big b,.cv-split-side.is-yes .cv-fig{color:#8cc4f5}.cv-split-side.is-no .cv-big b,.cv-split-side.is-no .cv-fig{color:#f2a27c}
.cv-split-side.is-no{text-align:right;justify-items:end}
.cv-split-bar{display:flex;gap:3px;height:10px;margin:4px 0 2px}.cv-split-bar i{border-radius:2px}.cv-split-bar .is-yes{background:#3f86c6}.cv-split-bar .is-no{background:#c0643a}
.cv-head.is-split .cv-fact{flex-direction:column;align-items:flex-start;gap:4px}.cv-head.is-split .cv-fact dd{text-align:left}

/* ---- On paper: one hint, then sections as the Review Map draws them ---- */
.cv-hint{display:inline-flex;align-items:center;gap:12px;margin:0;padding:10px 18px 10px 12px;background:#fff;border:1px solid var(--rule);border-left:4px solid #d4a012;border-radius:6px;font:500 15px/1.4 var(--font-sans);color:#15161a}
.cv-hint-mark{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#d4a012;color:#15161a;font:700 13px var(--font-sans)}
.cv-sec{margin:44px 0 0;padding-top:24px;border-top:2px solid #15161a}
.cv-sec-head h3{margin:0 0 6px;font:600 28px/1.15 var(--font-sans);letter-spacing:-.01em;color:#15161a}
.cv-sec-head p{max-width:84ch;margin:0 0 20px;font:15px/1.5 var(--font-sans);color:#4a4c52}
.cv-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.cv-view{padding:28px 32px 30px;background:#fff;border:1px solid var(--rule);border-radius:10px}
.cv-view>p{margin:0 0 16px;font:400 18px/1.62 var(--font-sans);color:#15161a;text-wrap:pretty}.cv-view>p:last-child{margin-bottom:0}
.cv-fig{padding:0;border:0;background:none;font:inherit;font-weight:700;color:#1f6aa6;text-decoration:underline dotted rgba(31,106,166,.5);text-underline-offset:3px;cursor:pointer;font-variant-numeric:tabular-nums}
.cv-fig.is-small{color:#15161a}
.cv-view .cv-vs{margin:0 .3em;color:inherit}
.cv-chart{min-width:0;padding:24px;background:#fff;border:1px solid var(--rule);border-radius:10px}

/* ---- The themes in columns, each theme its own box ---- */
.cv-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.cv-col{display:flex;flex-direction:column;min-width:0;padding:24px 24px 22px;background:#fff;border:1px solid var(--rule);border-top:4px solid #3f86c6;border-radius:10px}
.cv-col.is-hard{border-top-color:#a34c25}
.cv-col-head{margin:0 0 4px;font:650 22px/1.2 var(--font-sans)}
.cv-col.is-good .cv-col-head{color:#1f6aa6}.cv-col.is-hard .cv-col-head{color:#a34c25}
.cv-col-sub,.cv-also h4{font:700 12px/1.4 var(--font-sans);letter-spacing:.07em;text-transform:uppercase;color:#6b6e75}
.cv-col-sub{margin:2px 0 14px;padding-bottom:12px;border-bottom:2px solid rgba(21,22,26,.2)}
.cv-rows{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.cv-row{padding:12px 14px 13px;border:1px solid #e3ddcf;border-radius:8px;background:#faf8f3}
.cv-also{margin:8px 0 18px}.cv-also h4{margin:0 0 6px}.cv-also .cv-rows{margin:0}
.cv-pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 13px 5px 11px;border:1px solid;border-radius:999px;white-space:nowrap}
.cv-pill i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.cv-theme{padding:0;border:0;background:none;font:600 15px/1.25 var(--font-sans);color:inherit;text-align:left;cursor:pointer}.cv-theme:hover{text-decoration:underline}
.cv-pill.grp-praise{background:#e8f0f9;border-color:#bcd2ea;color:#1f4f7d}
.cv-pill.grp-complaint{background:#f9ebe4;border-color:#e8c3b2;color:#7d3519}
.cv-pill.grp-suggestion{background:#efebfb;border-color:#d1c6f1;color:#4b3a92}
.cv-pill.grp-context{background:#edeff3;border-color:#cdd2db;color:#3d4555}
.cv-row-data{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;margin-top:9px}
.cv-bar{display:block;height:8px;background:#efece4;border-radius:4px;overflow:hidden}.cv-bar i{display:block;height:100%;border-radius:4px}
.cv-row.grp-praise .cv-bar i{background:#3f86c6}.cv-row.grp-complaint .cv-bar i{background:#a34c25}.cv-row.grp-suggestion .cv-bar i{background:#8b74d6}.cv-row.grp-context .cv-bar i{background:#8a93a3}
.cv-row-share{min-width:52px;padding:0;border:0;background:none;text-align:right;cursor:pointer}
.cv-row-share b{font:700 19px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.cv-row.grp-praise .cv-row-share b{color:#1f6aa6}.cv-row.grp-complaint .cv-row-share b{color:#a34c25}.cv-row.grp-suggestion .cv-row-share b{color:#5a45a8}.cv-row.grp-context .cv-row-share b{color:#4c5566}
/* How often a theme's reviewers recommend the game, in Steam's band, white on colours deep enough to carry it. */
.cv-rate{min-width:118px;padding:4px 9px;border:0;border-radius:999px;font:700 13px/1.2 var(--font-sans);font-variant-numeric:tabular-nums;color:#fff;text-align:center;white-space:nowrap;cursor:pointer}
.cv-rate small{font-weight:500;font-size:12px}
.cv-rate.is-positive{background:#2f72b0}.cv-rate.is-mixed{background:#8f7642}.cv-rate.is-negative{background:#a34c25}
/* A day-to-day move, where it is the point: a labelled pair. */
.cv-trend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:9px 0 0;font:13.5px/1.4 var(--font-sans);color:#4a4c52}
.cv-trend-k{flex-basis:100%;font:700 11.5px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:#6b6e75}
.cv-nw{white-space:nowrap}.cv-day{margin-right:6px}
.cv-trend-arrow{font-size:11px;color:#a34c25}.cv-row.grp-praise .cv-trend-arrow{color:#1f6aa6}
.cv-col .theme-quote{margin-top:auto}

/* ---- Into the rest of the Atlas ---- */
.cv-explore{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:48px 0 30px;padding:28px 34px;background:var(--night,#0b0f1a);box-shadow:inset 0 3px 0 var(--gold);border-radius:6px;color:var(--bone,#ecedf0)}
.cv-explore h3{margin:0 0 6px;font:300 32px/1.1 var(--font-display);letter-spacing:-.02em}
.cv-explore p{max-width:62ch;margin:0;font:15px/1.5 var(--font-sans);color:var(--bone-soft,#b9c0cf)}
.cv-explore-go{flex:none;display:grid;justify-items:end;gap:12px}
.cv-go{padding:15px 22px;border:0;border-radius:4px;background:var(--gold);color:#15161a;font:700 17px/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.cv-explore-links{display:flex;gap:18px}.cv-explore .text-action{font-size:14px;color:var(--bone,#ecedf0)}

@media (max-width:1180px){
 .cv-hero .chg-hero-top{grid-template-columns:minmax(0,1fr)}.cv-hero .chg-hero-art{max-width:640px}
 .cv-heads,.cv-story,.cv-cols{grid-template-columns:minmax(0,1fr)}
}
/* The cover on a phone (the phone edition's own block): cards stacked, labels above their figures. */
.ap-cover .cv-hero{margin:0 0 18px;padding:20px 16px 4px}
.ap-cover .cv-hero .chg-hero-top{grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:18px}
.ap-cover .cv-hero h2{font-size:28px}
.ap-cover .cv-heads{grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:16px}
.ap-cover .cv-head{padding:16px 16px 18px}
.ap-cover .cv-big b{font-size:48px}
.ap-cover .cv-split{flex-direction:column;gap:12px}.ap-cover .cv-split-side.is-no{text-align:left;justify-items:start}
.ap-cover .cv-fact{flex-direction:column;align-items:flex-start;gap:3px}.ap-cover .cv-fact dd{text-align:left;white-space:normal}
.ap-cover .cv-sec-head{margin-top:6px}.ap-cover .cv-sec-head h3{font-size:24px}
.ap-cover .cv-view{margin:0 0 22px;padding:20px 18px}.ap-cover .cv-view>p{font-size:16px;line-height:1.6}

/* ---- The Overview: the selected theme day by day in the map's panel, drawn in the panel's own night ---- */
/* Room for the chart (Travis, 20 Oct: "even HARDER to see"): on a desktop the map gives the panel 420px, and the block is
   its own padded card, its title and chart clear of the edge. */
@media (min-width:1101px){.atlas-single .atl-cues .atl-layout{grid-template-columns:minmax(0,1fr) 420px}}
.atl-days{margin:24px 0 6px;padding:16px 16px 10px;border:1px solid rgba(236,237,240,.18);border-radius:8px;background:rgba(255,255,255,.035);color:var(--bone,#ecedf0);--praise:#8cc4f5;--complaint:#f2a27c;--suggestion:#b9a8f0;--context:#c3c9d4;--ink:#ecedf0;--panel:#0f1522}
.atl-days.grp-praise{--grp:#8cc4f5}.atl-days.grp-complaint{--grp:#f2a27c}.atl-days.grp-suggestion{--grp:#b9a8f0}.atl-days.grp-context{--grp:#c3c9d4}
.atl-days h4{color:var(--bone,#ecedf0);font:600 17px var(--font-sans)}
.atl-days .td-chart-head{align-items:center;margin-bottom:4px}
.atl-days .td-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 2px}
.atl-days .td-key{color:var(--bone-soft,#b9c0cf)}.atl-days .td-key i{border-top-color:#ecedf0}
.atlas-single .atl-days .td-key.is-line i{border-top:2px solid var(--grp)}
.atlas-single .atl-days.td-chart svg .td-tick{fill:#b9c0cf}
.atlas-single .atl-days.td-chart svg .td-axis,.atlas-single .atl-days.td-chart svg .td-ref{fill:#d5d8de;stroke:none}
.atlas-single .atl-days.td-chart svg .td-peak{fill:#ecedf0;stroke:none}
.atl-days svg .grid-line{stroke:rgba(236,237,240,.12)}.atl-days svg .axis-base{stroke:rgba(236,237,240,.35)}
.atl-days .td-open{background:transparent;border:1px solid rgba(236,237,240,.55);color:var(--bone,#ecedf0)}
.atl-days .td-open:hover{background:var(--bone,#ecedf0);border-color:var(--bone,#ecedf0);color:#0f1522}
.atl-days .xh-card{background:#ecedf0;color:#15161a}.atl-days .xh-card *{color:inherit}
/* The selection's cue (theme-landscape.js), on the one-game Atlas only: the selected tile points at the panel, and a
   click runs one pass of light across the tile, a flare on the panel's edge, the day line drawing in and one ring
   round Open in Trends. Light and outlines only: nothing moves or resizes in the layout. */
.atl-cues .atl-tile.is-selected::before{content:"";position:absolute;z-index:3;right:2px;top:50%;width:0;height:0;margin-top:-8px;border-style:solid;border-width:8px 0 8px 9px;border-color:transparent transparent transparent #e3d7a4;pointer-events:none}
.atl-cues .atl-tile.is-selected.is-small::before{display:none}
@keyframes atl-sweep{from{transform:translateX(-105%)}to{transform:translateX(105%)}}
@keyframes atl-arrive{0%{box-shadow:inset 0 0 0 0 rgba(212,160,18,0)}30%{box-shadow:inset 5px 0 0 0 #d4a012}100%{box-shadow:inset 0 0 0 0 rgba(212,160,18,0)}}
@keyframes atl-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes atl-ring{0%{box-shadow:0 0 0 0 rgba(212,160,18,.8)}100%{box-shadow:0 0 0 12px rgba(212,160,18,0)}}
.atl-tile.is-cue::after{content:"";position:absolute;z-index:3;inset:2px;pointer-events:none;background:linear-gradient(100deg,transparent 25%,rgba(255,230,160,.55) 50%,transparent 75%);transform:translateX(-105%);animation:atl-sweep .55s cubic-bezier(.3,.6,.4,1) 1 forwards}
.atl-detail.is-cue{animation:atl-arrive .9s ease-out .3s 1 both}
.atl-detail.is-cue .td-chart svg{animation:atl-draw .8s ease-out .45s 1 both}
.atl-detail.is-cue .td-open{animation:atl-ring .7s ease-out 1.2s 1 both}
@media (prefers-reduced-motion:reduce){.atl-tile.is-cue::after{display:none}.atl-detail.is-cue,.atl-detail.is-cue .td-chart svg,.atl-detail.is-cue .td-open{animation:none}}

/* The pins (1.20; Travis, 21 Oct): on the left, the language pin leading the chart's controls on a line of its own and the
   theme pin leading its panel, both the same outlined pill. */
.atlas-single .td-chips .pin-toggle{margin-left:0}
.atlas-single .flow-controls .lang-pin{display:inline-flex;align-items:center;gap:8px;flex-basis:100%;max-width:max-content;padding:4px 6px 4px 12px;border:1.5px solid #15161a;border-radius:999px;background:#fff;font:600 14px var(--font-sans);color:#15161a}
.atlas-single .flow-controls .lang-pin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.atlas-single .flow-controls .lang-pin select{height:34px;min-width:190px;border:1px solid #d9d2c1;border-radius:999px;padding:0 30px 0 12px;font:500 14px var(--font-sans);background-color:#faf8f2}

/* Where the pinned languages differ most (1.20): the Themes table's drawing, with the gap last. */
.lc-diff-table{margin-top:14px}
.lc-diff-table .mx-row{gap:0}
.lc-gap,.lc-gap-head{display:flex;align-self:stretch;align-items:center;justify-content:flex-end;padding-left:12px;border-left:1px solid #e3ddcf}
.lc-gap{font:700 16px var(--font-sans);font-variant-numeric:tabular-nums;color:#15161a}.lc-gap small{margin-left:3px;font-weight:500;font-size:12px;color:#4a4c52}
.lc-gap-head{display:grid;justify-items:end;align-content:end;gap:2px;padding-bottom:4px;text-align:right}.lc-gap-head b{font:650 15px var(--font-sans)}
.mx-n-plain{font:500 13px var(--font-sans);color:#4a4c52}
.mx-row:not(.mx-head)>.mx-name{display:flex;align-items:center;gap:8px;min-width:0}
/* The row pin drawn as the one-language list draws it. */
.atlas-page .mx .pin-toggle{width:30px;height:30px;border:1.5px solid #bfb9aa;color:var(--ink-soft,#3d4047);background:#fbfaf6}
.atlas-page .mx .mx-row:hover .pin-toggle:not(.is-pinned){border-color:var(--ink);color:var(--ink)}