/* Momentum Bell — "How to read the score" screenshot simulator (sample data).
   Shared by index.html, how-it-works.html and learn-reading-the-score.html. */
.sg{
  --sg-ease:cubic-bezier(.4,0,.2,1);
  max-width:760px; margin:18px 0 22px; position:relative;
  font-family:var(--sans); -webkit-tap-highlight-color:transparent;
  /* v0.157 — set apart from the live watchlist: its own blue-tinted panel with a dashed
     "diagram" border, a label saying these are examples, and stacked-paper screenshots. */
  background:linear-gradient(180deg,#0d1522,#0a1019);
  border:1px dashed #2b4466; border-radius:16px; padding:12px 10px 14px;
}
.sg-tag{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 4px 10px; font-size:11.5px; color:#7f97b8; line-height:1.4; }
.sg-tag b{
  font-size:10px; font-weight:800; letter-spacing:.1em; color:#0b111a; background:#6ea8fe;
  border-radius:20px; padding:2px 9px;
}
.sg *{ box-sizing:border-box; }

/* All slides sit in ONE grid cell, so the box is always as tall as the tallest
   slide and nothing on the page jumps when the slides change. */
.sg-frame{ display:flex; align-items:flex-start; gap:8px; }
.sg-stage{ display:grid; flex:1 1 auto; min-width:0; }
.sg-slide{
  grid-area:1/1; margin:0; min-width:0;
  opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity 1.1s var(--sg-ease), transform 1.1s var(--sg-ease), visibility 0s linear 1.1s;
}
.sg-slide.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 1.1s var(--sg-ease) .12s, transform 1.1s var(--sg-ease) .12s, visibility 0s;
}
.sg-slide[data-color="green"]  { --sg-c:var(--hot);  --sg-dim:var(--hot-dim);  --sg-tint:rgba(46,160,67,.14);  --sg-ink:var(--hot); }
.sg-slide[data-color="amber"]  { --sg-c:var(--warn); --sg-dim:var(--warn-dim); --sg-tint:rgba(227,179,65,.12); --sg-ink:var(--warn); }
.sg-slide[data-color="neutral"]{ --sg-c:#7b8492;     --sg-dim:#1c2127;         --sg-tint:rgba(123,132,146,.13); --sg-ink:#a3abb6; }
/* "How to use the site" slides (All Movers / Focus, Sound) use blue so it is never confused with a score color */
.sg-slide[data-color="view"]   { --sg-c:#6ea8fe;     --sg-dim:#16243a;         --sg-tint:rgba(110,168,254,.13); --sg-ink:#8dbcff; }
.sg-row.g{ --sg-c:var(--hot);  --sg-dim:var(--hot-dim);  --sg-tint:rgba(46,160,67,.14);  --sg-ink:var(--hot); }
.sg-row.a{ --sg-c:var(--warn); --sg-dim:var(--warn-dim); --sg-tint:rgba(227,179,65,.12); --sg-ink:var(--warn); }
.sg-row.n{ --sg-c:#7b8492;     --sg-dim:#1c2127;         --sg-tint:rgba(123,132,146,.13); --sg-ink:#a3abb6; }
.sg-slide[data-color="view"] .sg-h-score{ color:var(--dim); border-bottom-color:transparent; text-shadow:none; font-weight:400; }

/* ── the "screenshot" ─────────────────────────────────────────── */
.sg-shot{
  position:relative; overflow:hidden; margin:0 8px 8px 0;
  border:1px solid #2b4466; border-radius:10px;
  background:repeating-linear-gradient(135deg, rgba(110,168,254,.045) 0 9px, transparent 9px 18px), #0b111a;
  box-shadow:7px 7px 0 -1px #0e1826, 7px 7px 0 0 #24405f;
}
.sg-shot::after{   /* big faint diagonal watermark so nobody mistakes it for the live list */
  content:"EXAMPLE"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(38px,11vw,70px); font-weight:900; letter-spacing:.22em; color:rgba(110,168,254,.07);
  transform:rotate(-14deg); pointer-events:none;
}
.sg-chrome{
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  background:#12213a; border-bottom:1px solid #2b4466;
}
.sg-ex{ font-size:10px; font-weight:800; letter-spacing:.12em; color:#8dbcff; }
.sg-sample{
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--warn);
  border:1px solid var(--warn-dim); border-radius:20px; padding:2px 8px;
}
.sg-appbar{ display:flex; align-items:center; gap:8px; padding:10px 12px 6px; }
.sg-pill{
  font-size:11.5px; font-weight:600; color:var(--dim); padding:4px 12px;
  border:1px solid #2a3a52; border-radius:20px;
}
.sg-pill.on{ color:#f2f3f4; background:#12213a; border-color:#3a5a86; }
/* annotation row above the column names: explains each column in plain words */
.sg-legend, .sg-head, .sg-row{
  display:grid; grid-template-columns:1.1fr .9fr .9fr 1.35fr .9fr; align-items:center;
  padding:0 12px; column-gap:6px;
}
.sg-legend{ padding-top:10px; padding-bottom:2px; }
.sg-legend span{
  font-size:9.5px; font-weight:600; color:#8dbcff; border:1px dashed #3a5a86; border-radius:20px;
  padding:1px 7px; width:fit-content; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sg-legend span.hi{ color:var(--sg-ink); border-color:var(--sg-c); background:var(--sg-tint); font-weight:800; }
.sg-head{
  font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim);
  border-bottom:1px solid var(--line); padding-top:8px; padding-bottom:0; margin-top:4px;
}
.sg-head > div{ padding:6px 0 8px; }
.sg-h-score{
  color:var(--sg-ink); font-weight:700; border-bottom:2px solid var(--sg-c); margin-bottom:-1px;
  text-shadow:0 0 12px var(--sg-tint);
}
.sg-row{ position:relative; overflow:hidden; padding-top:11px; padding-bottom:11px; border-bottom:1px solid var(--line); font-size:13.5px; }
.sg-row:last-child{ border-bottom:none; }
.sg-row > *{ position:relative; z-index:1; }
.sg-bar{ position:absolute; left:0; top:0; bottom:0; z-index:0; background:linear-gradient(90deg, var(--sg-dim), transparent); }
.sg-sym{ font-family:var(--mono); font-weight:700; color:#f2f3f4; font-size:14.5px; }
.sg-chg{ font-family:var(--mono); font-weight:600; color:var(--hot); }
.sg-px, .sg-mx{ font-family:var(--mono); color:var(--text); font-weight:600; }
.sg-sc span{
  display:inline-block; min-width:52px; text-align:center; padding:2px 12px; border-radius:20px;
  font-family:var(--mono); font-weight:700; font-size:14.5px;
  color:var(--sg-ink); background:var(--sg-tint); border:1px solid var(--sg-c);
}

.sg-ring{ box-shadow:0 0 0 2px var(--sg-c), 0 0 14px var(--sg-tint); color:#f2f3f4 !important; }
.sg-tags{ display:flex; flex-wrap:wrap; gap:6px 8px; padding:2px 12px 8px; }
.sg-tags span{
  font-size:11px; font-weight:600; color:var(--sg-ink); border:1px dashed var(--sg-c);
  background:var(--sg-tint); border-radius:20px; padding:3px 10px;
}
.sg-soundbtn{
  font-size:11.5px; font-weight:600; color:var(--dim); padding:4px 11px; white-space:nowrap;
  border:1px solid var(--line); border-radius:20px; background:var(--panel);
}
.sg-soundbtn.on{ color:#f2f3f4; }
.sg-arrowsym{ color:var(--dim); font-size:14px; }
.sg-ann{
  grid-column:1 / -1; margin-top:8px; font-size:11.5px; font-weight:600; color:var(--dim);
  padding:4px 10px; border:1px dashed #2a3037; border-radius:8px; width:fit-content; max-width:100%;
}
.sg-ann.hot{ color:var(--sg-ink,#8dbcff); border-color:#6ea8fe; background:rgba(110,168,254,.13); }
.sg-slide[data-color="view"] .sg-ann.hot{ color:#8dbcff; }

/* ── the explanation, tied to the score column by the notch ───── */
.sg-callout{
  --notch:69%;
  position:relative; margin-top:14px; padding:14px 16px 14px;
  background:var(--panel); border:1px solid var(--sg-c); border-radius:12px;
}
.sg-callout::before{
  content:""; position:absolute; top:-7px; left:var(--notch); width:12px; height:12px;
  background:var(--panel); border-left:1px solid var(--sg-c); border-top:1px solid var(--sg-c);
  transform:translateX(-50%) rotate(45deg);
}
.sg-scale{ display:flex; gap:4px; margin-bottom:12px; }
.sg-scale .seg{
  flex:1; text-align:center; padding:6px 4px; border-radius:8px; font-size:12px; font-weight:700;
  font-family:var(--mono); border:1px solid var(--line); color:var(--dim); opacity:.5; line-height:1.25;
}
.sg-scale .seg em{ display:block; font-style:normal; font-family:var(--sans); font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.sg-scale .seg.n{ color:#a3abb6; } .sg-scale .seg.a{ color:var(--warn); } .sg-scale .seg.g{ color:var(--hot); }
.sg-scale.two .seg{ opacity:1; border-color:var(--sg-c); background:var(--sg-tint); color:var(--sg-ink); font-family:var(--sans); font-size:12.5px; }
.sg-slide[data-color="view"] .sg-callout::before{ display:none; }
.sg-slide[data-color="neutral"] .seg.n,
.sg-slide[data-color="amber"] .seg.a,
.sg-slide[data-color="green"] .seg.g{ opacity:1; border-color:var(--sg-c); background:var(--sg-tint); }
.sg-title{ font-size:15.5px; font-weight:700; color:#f2f3f4; margin:0 0 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sg-chip{
  font-size:10.5px; letter-spacing:.09em; font-weight:800; color:var(--bg);
  background:var(--sg-c); padding:2px 9px; border-radius:20px;
}
.sg .sg-callout p{ margin:0 0 8px; font-size:13.5px; line-height:1.6; color:#c3c8cf; max-width:none; }
.sg .sg-callout p:last-child{ margin-bottom:0; }
.sg .sg-callout p b{ color:#f2f3f4; }
.sg .sg-callout p.sg-fine{ font-size:11.5px; color:var(--dim); }

/* ── controls ─────────────────────────────────────────────────── */
.sg-ctl{ display:flex; align-items:center; justify-content:center; margin-top:12px; }
.sg-arrow{
  width:28px; height:28px; flex:0 0 auto; border-radius:50%; cursor:pointer; margin-top:108px;
  background:#12213a; border:1px solid #2b4466; color:#8dbcff;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.sg-arrow:hover{ border-color:#6ea8fe; color:#fff; background:#183055; }
.sg-arrow:focus-visible, .sg-tab:focus-visible{ outline:2px solid #6ea8fe; outline-offset:2px; }
.sg-arrow svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sg-tabs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.sg-tab{
  display:flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--sans);
  font-size:12.5px; font-weight:600; color:var(--dim); background:transparent;
  border:1px solid #223650; border-radius:20px; padding:6px 13px;
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.sg-tab i{ width:9px; height:9px; border-radius:50%; display:block; }
.sg-tab[data-color="green"] i{ background:var(--hot); }
.sg-tab[data-color="amber"] i{ background:var(--warn); }
.sg-tab[data-color="neutral"] i{ background:#7b8492; }
.sg-tab i.sym{ background:none !important; width:auto; height:auto; font-style:normal; font-size:13px; line-height:1; }
.sg-tab[data-color="view"]{ }
.sg-tab:hover{ color:var(--text); }
.sg-tab[aria-current="true"]{ color:#f2f3f4; border-color:#3a5a86; background:#12213a; }

@media (max-width:600px){
  .sg-legend, .sg-head, .sg-row{ grid-template-columns:1.05fr .95fr .9fr 1.3fr; }
  .sg-head .sg-c-max, .sg-row .sg-mx{ display:none; }
  .sg-callout{ --notch:82%; padding:12px 13px; }
  .sg .sg-callout p{ font-size:13px; }
  .sg .sg-callout p.sg-fine{ font-size:11.5px; }
  .sg-tab{ padding:7px 10px; font-size:12px; }
  .sg-tab:not([aria-current="true"]) span{ display:none; }
  .sg{ padding:10px 6px 12px; }
  .sg-frame{ gap:4px; }
  .sg-arrow{ width:24px; height:24px; margin-top:96px; }
  .sg-arrow svg{ width:12px; height:12px; }
  .sg-legend span{ font-size:9px; padding:1px 5px; }
  .sg-legend .lg-max{ display:none; }
  .sg-shot{ margin:0 6px 6px 0; box-shadow:5px 5px 0 -1px #0e1826, 5px 5px 0 0 #24405f; }
}
@media (prefers-reduced-motion:reduce){
  .sg-slide, .sg-slide.is-active{ transition:opacity .2s linear, visibility 0s; transform:none; }
}