/* help.js: the ⓘ tip and its hint, plus the one-time "how to read a scenario" guide. Uses the page's tokens. */

.tip{display:inline-grid;place-items:center;width:18px;height:18px;margin:0 0 0 6px;padding:0;vertical-align:1px;
  border:1px solid var(--line-2);border-radius:50%;background:var(--panel-2,var(--panel));color:var(--bone-dim);
  font:italic 600 11px/1 Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none;cursor:pointer;
  position:relative;transition:border-color .15s,color .15s,background .15s}
.tip::before{content:"";position:absolute;inset:-9px}   /* a comfortable tap target (36px) */
.tip:hover{border-color:var(--led-dim);color:var(--led)}
.tip[aria-expanded="true"]{border-color:var(--led);color:var(--ink);background:var(--led)}
.tip-b{display:block;margin:8px 0 4px;padding:9px 12px;border-left:2px solid var(--led);border-radius:0 6px 6px 0;
  background:var(--led-soft);color:var(--bone);font:400 14px/1.5 var(--sans);letter-spacing:normal;text-transform:none;
  max-width:var(--measure,64ch);text-align:left}

/* first scenario only: how to read the card, in three steps */
.guide{position:relative;margin-top:18px;padding:14px 16px 14px 18px;border:1px solid var(--led-dim);border-radius:10px;
  background:linear-gradient(90deg,var(--led-soft),transparent 80%),var(--panel)}
.guide-h{margin:0;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--led)}
.guide ol{margin:10px 0 0;padding:0;list-style:none;counter-reset:g;display:grid;gap:6px}
.guide li{counter-increment:g;display:grid;grid-template-columns:24px 1fr;gap:8px;font-size:15px;color:var(--bone)}
.guide li::before{content:counter(g);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--led);color:var(--ink);font:700 12px var(--sans)}
.guide li span{color:var(--bone-dim)}
.guide .guide-x{margin-top:10px}