/* Blurt's stat window (blurt-stat.js, docs/mockups/endcard-info-labels.html), laid on blurt.css by the
   blurt-stat-window release */

/* the info box in the end card's title bar: a square the size of the ? and ↻ boxes, a pixel bar chart in it, and an
   orange dot on its corner until it's been looked at */
.statbox{position:relative;flex:none;display:grid;place-items:center;width:20px;height:20px;margin-left:-4px;padding:0;background:none;border:1px solid var(--paper);color:var(--paper);cursor:pointer}
.statbox[hidden]{display:none}
.statbox::after{content:"";position:absolute;inset:-10px}
.statbox:hover,.statbox:focus-visible{background:var(--paper);color:var(--ink);outline:0}
.statbox:active{transform:translateY(1px)}
.statbox svg{width:13.85px;height:13.85px;fill:currentColor;shape-rendering:crispEdges}
.statbox .dot{display:none;position:absolute;right:-5px;top:-5px;width:8px;height:8px;background:#ff5a1f;border:1px solid var(--ink)}
.statbox.new .dot{display:block}

/* the window: System 1's, 490 wide on a laptop, over the greyed page */
.statwin{--w:490px;outline:0}
.statwin.alertwin{--w:420px}
/* notes hang below their labels, past the window's foot if they must */
.statwin>.body{padding:24px 24px 26px}
.statwin.popwin{max-height:none}
.statwin.alertwin>.body{padding:20px 20px 18px}
/* the i box, opposite the close box: opens every label's note at once */
.statwin .allnotes{position:absolute;right:8px;top:4px;width:14px;height:14px;padding:0;display:grid;place-items:center;background:#1e1e1e;border:1px solid #fefefe;cursor:help}
.statwin .allnotes::before{content:"";position:absolute;inset:-8px}
.statwin .allnotes svg{fill:#fefefe;shape-rendering:crispEdges}
.statwin.all .allnotes{background:#fefefe}
.statwin.all .allnotes svg{fill:#1e1e1e}

/* two parts, each a black tag over its two, two to a row; a line kept in from the window's sides between them */
.gi{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:28px;margin:0;font:12px/1.2 "Departure Mono",monospace;color:#1e1e1e}
.gi .head{grid-column:1/-1;justify-self:start;margin:0 0 -12px;padding:3px 6px 2px;background:#1e1e1e;color:#fefefe;font-size:13px;text-shadow:.045em 0 0 currentColor}
.gi hr{grid-column:1/-1;border:0;border-top:1px solid #1e1e1e;margin:0}
.gi .it{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.gi .lab{position:relative;display:flex;align-items:center;gap:7px;margin:0 0 8px;white-space:nowrap;cursor:help;outline:0}
.gi .lab svg{flex:none;width:auto;fill:#1e1e1e;shape-rendering:crispEdges}
.gi .sp{display:inline-block;max-width:100%;font:400 26px/1.1 "Sedgwick Ave";overflow-wrap:anywhere}
/* a label's note: a small window of the machine's, plain words, under the label while it's pointed at or tapped */
.gi .lab:hover::after,.gi .lab:focus::after,.statwin.all .gi .lab::after{content:attr(data-means);position:absolute;left:0;top:calc(100% + 6px);z-index:5;width:190px;white-space:normal;padding:7px 9px;background:#fefefe;border:1px solid #1e1e1e;box-shadow:2px 2px 0 #1e1e1e;font:12px/1.35 "Departure Mono",monospace;color:#1e1e1e}

/* under 20 players, an alert: the box's chart, one run of words, then System 1's rounded buttons at the far right */
.st-alert{display:flex;gap:20px;align-items:flex-start;font:14px/1.45 "Departure Mono",monospace;color:#1e1e1e}
.st-alert svg{flex:none;margin-top:3px;fill:#1e1e1e;shape-rendering:crispEdges}
.st-alert p{margin:0}
.st-btns{display:flex;justify-content:flex-end;gap:14px;margin-top:18px}

/* a phone: one to a line, notes kept inside the window */
@media (max-width:600px){
  .statwin>.body{padding:20px 18px 22px}
  .gi{grid-template-columns:1fr;row-gap:22px}
  .gi .head{margin-bottom:-8px}
  .gi .lab::after{max-width:calc(100vw - 90px)}
}