/* World of Warcraft: Forever, counting down to launch: the crest cut from the key art, the countdown
   beside it, and the three published dates on a rail. Shared by the members' front page and the
   sign-in page; it hides itself at launch (forever.js). */

.fv{grid-column:1/-1;position:relative;display:grid;grid-template-columns:230px auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 26px;padding:0 24px 0 0;overflow:hidden;
  border:3px solid var(--pr-bronze);border-radius:6px;color:#eef3ef;background:linear-gradient(90deg,#06303d,#04222c 70%);
  box-shadow:inset 0 0 0 1px var(--pr-gold),0 0 0 1px #2a1a08,0 12px 26px rgba(0,0,0,.4)}
.fv:before,.fv:after{content:"";position:absolute;z-index:3;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe6a6,#b98a3e 55%,#5c3c16);box-shadow:0 1px 2px rgba(0,0,0,.6)}
.fv:before{top:5px;left:5px}.fv:after{top:5px;right:5px}
/* The crest, cut from the key art: the image scaled so the Forever crest fills the slice. */
.fv-art{grid-row:1/-1;align-self:stretch;min-height:104px;border-right:2px solid var(--pr-bronze-2);
  background:linear-gradient(90deg,transparent 72%,rgba(6,48,61,.85)),url(/forever-plains.jpg) 50% 40%/210% auto no-repeat,#5d8aa6}
.fv-bar{display:flex;align-items:center;gap:22px;padding:14px 0 6px}
.fv-count{display:flex;align-items:center;gap:12px}
.fv-kicker{font:600 13px var(--font-ui);color:var(--pr-gold-2);white-space:nowrap}
.fv-units{display:flex;gap:6px}
.fv-units>span{display:grid;justify-items:center;min-width:52px;padding:4px 6px 3px;border:1px solid rgba(210,162,75,.55);border-radius:4px;background:linear-gradient(#0e4a5c,#06303d)}
.fv-units b{font:600 1.45rem/1 var(--font-ui);font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.01em}
.fv-units small{margin-top:2px;font-size:12px;color:var(--gold-label)}
.fv-units>span:first-child{border-color:var(--pr-gold);background:var(--plaque-fill)}
.fv-units>span:first-child b{color:var(--pr-ui-gold)}
.fv-live{display:none;align-items:center;gap:10px}
.fv-live strong{display:flex;align-items:center;gap:8px;font:600 1.4rem/1 var(--font-display);color:#7be07b}
.fv-live strong:before{content:"";width:9px;height:9px;border-radius:50%;background:#40c040;box-shadow:0 0 0 3px rgba(64,192,64,.2)}
.fv-live span{font-size:13px;color:#d7e3e2}
.fv.live .fv-units{display:none}.fv.live .fv-live{display:flex}
.fv-when{display:grid;gap:1px;padding-left:22px;border-left:1px solid rgba(210,162,75,.45);white-space:nowrap}
.fv-when strong{font:600 1.05rem var(--font-display);color:#fff}
.fv-when span{font-size:13px;color:#d7e3e2}
.fv-when small{font-size:12px;color:#8fb0b3}
/* The roadmap: three dates on one line, the next one lit. */
.fv-rail{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:14px 0 6px;list-style:none}
.fv-rail:before{content:"";position:absolute;left:5px;right:24px;top:20px;height:2px;background:linear-gradient(90deg,var(--pr-bronze-2),var(--pr-gold),var(--pr-bronze-2))}
.fv-rail li{position:relative;display:grid;align-content:start;gap:1px;min-width:0;padding-top:18px}
.fv-rail li:before{content:"";position:absolute;top:1px;left:0;width:10px;height:10px;border-radius:50%;background:#06303d;border:2px solid var(--pr-gold)}
.fv-rail li.done:before{background:var(--pr-gold)}
.fv-rail li.next:before{background:var(--pr-ui-gold);box-shadow:0 0 0 3px rgba(255,209,0,.18)}
.fv-rail time{font-size:12px;color:#8fb0b3}
.fv-rail strong{font:600 .98rem/1.2 var(--font-display);color:#fff}
.fv-rail li.next strong{color:var(--pr-ui-gold)}
.fv-rail span{font-size:12px;line-height:1.35;color:#b9cfcf}
.fv-note{grid-column:2/-1;margin:0;padding:2px 0 10px;font-size:12px;color:#8fb0b3}
@media (max-width:1100px){
  .fv{grid-template-columns:150px minmax(0,1fr);gap:0 20px}
  .fv-art{background-size:300% auto}
  .fv-rail{grid-column:2;padding-top:4px}
}
@media (max-width:800px){
  .fv{grid-template-columns:minmax(0,1fr);padding:0 14px}
  .fv-art{display:none}
  .fv-bar{flex-wrap:wrap;gap:10px 16px;padding:14px 0 4px}
  .fv-count{flex-wrap:wrap;gap:6px 10px}
  .fv-units>span{min-width:46px}
  .fv-when{padding-left:0;border-left:0}
  .fv-rail{grid-column:1;padding:10px 0 4px}
  .fv-rail span{display:none}
  .fv-note{grid-column:1;padding-bottom:12px}
}
/* Nothing under 12 px. */
.fv-when small,.fv-note,.fv-units small,.fv-kicker,.fv-rail time{font-size:12px}
.fv-note{color:#8fb0b3}