/* Compare follows a period (TASK-161): the period bar in Compare's head (the game page's, period-bar.css, with one strip
   of every game's reviews stacked), the date chip beside each section's heading, the parts that wait for the press, and
   the chart of the picked days or the launches lined up. Compare's tokens (compare.css). */

/* ---- the bar, under the games ---- */
.cp-pbar:empty{display:none}
.cp-pbar{margin-top:22px}
.gp-bar.pb.cpb{padding:18px 0 2px;border-top:1px solid rgba(156,188,245,.2)}
.cpb .pb-row{gap:10px 14px}
.cpb .pb-seg.cpb-mode{margin-left:0}
.cpb .pb-seg.cpb-seg{margin-left:auto}
.cpb-mode button[aria-pressed="true"]{background:rgba(236,237,240,.14);color:#fff}
@container pbar (max-width:960px){
  .cpb .pb-seg.cpb-seg,.cpb .pb-pick:not(.is-sheet){display:none}
  .cpb .pb-seg.cpb-mode{display:none}
  .cpb .pb-pill{display:flex;flex:1 1 100%;width:100%;align-items:center;gap:9px;border:1px solid rgba(156,188,245,.5);background:rgba(84,134,224,.18);color:#fff;border-radius:8px;padding:11px 14px;font:600 15.5px var(--sans);white-space:nowrap;cursor:pointer}
  .cpb .pb-pill span{flex:1;text-align:left}
  .cpb .pb-pill svg:last-child{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
}

/* one strip: every game's reviews stacked in its colour, one window */
.cpb-stripwrap{display:flex;flex-direction:column}
.cpb-zoom{order:-1;align-self:flex-end;display:inline-flex;gap:2px;margin:0 0 6px;padding:2px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(236,237,240,.12)}
.cpb-zoom button{border:0;background:none;padding:5px 11px;border-radius:999px;font:600 12.5px var(--sans);color:var(--bone-mute);cursor:pointer}
.cpb-zoom button:hover{color:#fff}
.cpb-zoom button[aria-pressed="true"]{background:rgba(236,237,240,.14);color:#fff}
.cpb-strip{position:relative;padding-top:6px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cpb-cols{display:flex;height:80px;align-items:stretch;cursor:crosshair}
.cpb-strip.is-locked .cpb-cols{cursor:pointer}
.cpb-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column-reverse;padding:0 clamp(.2px,calc(60px / var(--n,30)),2px);transition:opacity .25s}
.cpb-col i{display:block;min-height:0}
.cpb-col i:last-child{border-radius:2px 2px 0 0}
.cpb-col.is-dim{opacity:.22}
.cpb-col:hover{filter:brightness(1.18)}
.cpb-win{position:absolute;top:0;height:92px;margin-left:-3px;padding:0 3px;box-sizing:content-box;border:1.5px solid #9cbcf5;background:rgba(84,134,224,.12);border-radius:8px;cursor:grab;transition:left .22s cubic-bezier(.3,.9,.3,1),width .22s cubic-bezier(.3,.9,.3,1)}
.cpb-strip.is-dragging .cpb-win{transition:none;cursor:grabbing}
.cpb-strip.is-locked .cpb-win{pointer-events:none}
.cpb-win.is-latest{border-style:dashed;border-color:rgba(156,188,245,.7);background:none;pointer-events:none}
.cpb-win.is-latest span{position:absolute;right:calc(100% + 6px);top:5px;padding:2px 7px;border-radius:4px;background:var(--night-2);font:600 12px var(--sans);color:#9cbcf5;white-space:nowrap}
.cpb-h{position:absolute;top:50%;width:8px;height:28px;margin-top:-14px;border-radius:4px;background:#e8efff;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:ew-resize}
.cpb-h.l{left:-5px}.cpb-h.r{right:-5px}
.cpb-strip.is-locked .cpb-h{display:none}
.cpb-ticks{position:relative;height:16px;margin-top:9px;font-size:12px;color:var(--bone-mute)}
.cpb-ticks span{position:absolute;left:var(--x);transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.cpb-ticks span.is-first{left:0;transform:none}
.cpb-ticks span.is-last{left:auto;right:0;transform:none}
.cpb-tip{position:absolute;bottom:calc(100% - 2px);z-index:4;min-width:200px;background:#fff;color:var(--ink);border-radius:8px;padding:9px 12px;font-size:13px;line-height:1.35;box-shadow:0 10px 26px rgba(0,0,0,.35);pointer-events:none}
.cpb-tip[hidden]{display:none}
.cpb-tip>b{display:block;font-weight:600;margin-bottom:4px}
.cpb-tip ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cpb-tip li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:8px;align-items:baseline}
.cpb-tip li i{width:9px;height:9px;border-radius:2px}
.cpb-tip li span{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpb-tip li b{font-weight:600;font-variant-numeric:tabular-nums}
.cpb-tip em{display:block;margin-top:4px;font-style:normal;font-size:12px;color:#2f63c2}

.cpb .pb-foot{margin-top:4px;padding-top:12px;border-top:1px dashed rgba(236,237,240,.12)}
.cpb-go{display:flex;align-items:center;gap:14px;margin-left:auto}
.cpb-go .pb-go[disabled]{opacity:.6;cursor:default}
.cpb-uses{margin:0;font-size:13px;line-height:1.35;color:var(--bone-mute)}
.cpb-reading{margin:0;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:#cfe0ff}
.cpb-mapped{margin:0;font-size:14.5px;font-weight:600;color:#bfe3c3}
.cpb-mapped::before{content:'✓ ';color:#8fd19a}
.cpb-spin{width:11px;height:11px;border-radius:50%;border:2px solid rgba(156,188,245,.3);border-top-color:#9cbcf5;animation:pb-spin .8s linear infinite;flex:none}
.cpb .pb-pick{right:0;top:58px}
.cpb-sgroup{margin:14px 0 2px;font-size:12.5px;font-weight:600;color:#6a7080}

/* ---- the comparison for a period ---- */
.cp .gp-sec-ht{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.cp .gp-sec-ht h2{margin:0}
.cp-sec-h .gp-pchip{font-size:13px}
.cp-pdays{font-variant-numeric:tabular-nums}
.cp-later{font-weight:500;font-size:14px;color:var(--muted)}
.cp-pmap{max-width:none;margin-top:6px}
.cp-pmap-go{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.cp-pmap-go span{font-size:13.5px;color:var(--muted)}
.cp-perr{margin:0;font-size:14.5px;line-height:1.5;color:#a34c25}
.cp-perr a{color:inherit}
.cp-preading{padding:18px 22px;background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--blue);border-radius:0 8px 8px 0}
.cp-preading .gp-reading-t{margin:0 0 4px}
.cp-preading .gp-reading-s{margin:0 0 12px}
.cp-preading ul{list-style:none;margin:0;padding:0;max-width:640px}
.cp-preading li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--rule-soft)}
.cp-preading li>i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.cp-preading li span{font-weight:600;font-size:14.5px;color:var(--ink)}
.cp-preading li small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.cp-rd{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--blue)}
.cp-rd.is-done{color:#3f8f2a}
.cp-rd.is-done::before{content:'✓'}
.cp-rd.is-wait{color:var(--muted);font-weight:500}
.cp-rd.is-err{color:#a34c25}
.cp.is-period-reading #cp-body .cp-sec:not(#cp-glance):not(#cp-themes){opacity:.55;transition:opacity .2s}
.cp.pb-switching #cp-body{opacity:.45;transition:opacity .14s}

/* the chart: the picked days up close, or the launches lined up */
.cpc-box{position:relative;overflow-x:auto;background:#fff;border:1px solid var(--rule-soft);border-radius:8px;padding:8px 6px 0}
.cpc-svg{display:block;width:100%;min-width:680px;height:auto}
.cpc-grid{stroke:#e6e2d8;stroke-width:1}
.cpc-yl,.cpc-xl{font:12px var(--sans);fill:var(--muted);font-variant-numeric:tabular-nums}
.cpc-nm{font:600 13.5px var(--sans);fill:var(--ink-soft)}
.cpc-lead{stroke-width:1.2;stroke-dasharray:2 3;opacity:.55}
.cpc-cross{stroke:var(--ink);stroke-width:1;opacity:.3}
.cpc-hit{cursor:crosshair}
.cpc-tip{position:absolute;z-index:4;min-width:220px;background:#fff;color:var(--ink);border:1px solid var(--rule-soft);border-radius:8px;box-shadow:0 10px 28px rgba(20,24,40,.16);padding:10px 12px;font-size:13px;pointer-events:none}
.cpc-tip[hidden]{display:none}
.cpc-th{display:block;font-size:13.5px;margin-bottom:6px}
.cpc-tip ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cpc-tip li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:8px;align-items:baseline}
.cpc-tip li i{width:9px;height:9px;border-radius:2px}
.cpc-tip li span{color:var(--ink-soft)}
.cpc-tip li small{color:var(--muted)}
.cpc-tip li b{font-weight:600;font-variant-numeric:tabular-nums}
.cpc .cp-foot{margin-top:10px}

@media(max-width:700px){
  .gp-bar.pb.cpb{padding:14px 0 0}
  .cpb-cols{height:64px}
  .cpb-win{height:76px}
  .cpb-h{display:none}
  .cpb-ticks span:not(.is-first):not(.is-last){display:none}
  .cpb-go{margin-left:0;flex-wrap:wrap}
  .cp-preading{padding:14px 14px}
}
@media(prefers-reduced-motion:reduce){
  .cpb-win,.cpb-col{transition:none!important}
  .cpb-spin{animation:none}
}