/* ═══════════════════════════════════════════════════════════════════════════
   forre_pulse — SPRITES: HÄRNÄST, GENOMGÅNGEN, SNABBSTARTEN
   ═══════════════════════════════════════════════════════════════════════════
   Byggd 2026-09-13. Ett LAGER ovanpå pulse-sprites.css och -rad.css, aldrig en
   ändring i dem: brickan, toppraden, väljaren och delningsbilden är orörda.

   §0.5  Inga lodräta färgstreck. Hela ytan tonas i stället.
   §2.1  YTFÄRG ≠ TEXTFÄRG. --accent på en yta, --accent-ink i text.
   §4    Radier ur var(--r) / var(--r-sm). Runt bara på prickar.
   §8    Inga inline-stilar, inga hårdkodade hex där en token finns, ingen
         gradient som yta, högst två accenter samtidigt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── VAD SOM SLUTAR SÄGAS TVÅ GÅNGER ──────────────────────────────────────
   "Närmast klart" (sq-nara, ritad av sprites-page.js väljare) listade fyra
   sprites med "1 kvar". Härnäst listar samma sprites, men namnger VARIANTEN
   som saknas, skriver ut skälet och rankar efter värde kontra jobb — den är
   alltså samma information plus tre saker till. Två ytor med samma innehåll
   glider isär vid första avbockningen, och då tror man på fel en.
   Funktionen är inte borta, den har flyttat. Finns ingen Härnäst — någon
   annans hylla, arkivfliken, allt redan bockat — står strippen kvar. */
.sq4[data-sq-harnast="1"] .sq-nara{display:none}

/* ── HÖGERRAILEN ─────────────────────────────────────────────────────────── */
.sq-hr{display:flex;flex-direction:column;gap:14px}
.sq-hr .card{padding:0;overflow:hidden}

.sq-nx-h{display:flex;align-items:baseline;gap:8px;padding:11px 13px 9px;border-bottom:1px solid var(--line)}
.sq-nx-h h2{margin:0;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.sq-nx-s{margin-left:auto;font-size:10.5px;color:var(--dim)}

/* ── HÄRNÄST ─────────────────────────────────────────────────────────────── */
.sq-nx-l{display:flex;flex-direction:column}
.sq-nx-r{display:flex;align-items:center;gap:9px;width:100%;padding:9px 13px;border:0;
  border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink)}
.sq-nx-r:last-child{border-bottom:0}
.sq-nx-r:hover{background:var(--inset)}
.sq-nx-r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sq-nx-i{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-sm);object-fit:contain;
  background:var(--inset)}
.sq-nx-ph{display:grid;place-items:center;font:800 12px/1 var(--font-family,Roboto,sans-serif);
  color:var(--dim);border:1px solid var(--line)}
.sq-nx-t{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.sq-nx-t b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-nx-t span{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Poängen är en rangordning, inte ett resultat: den ska gå att jämföra mellan
   raderna och annars vara tyst. */
.sq-nx-p{flex:0 0 auto;min-width:24px;height:19px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;
  background:var(--inset);color:var(--dim);border:1px solid var(--line)}
.sq-nx-klar{margin:0;padding:13px;font-size:12px;color:var(--ink2)}

/* ── VEM KAN HJÄLPA ──────────────────────────────────────────────────────── */
.sq-hj-l{display:flex;flex-direction:column}
.sq-hj-r{display:flex;align-items:center;gap:9px;padding:8px 13px;border-bottom:1px solid var(--line)}
.sq-hj-r:last-child{border-bottom:0}
.sq-hj-a{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--inset);border:1px solid var(--line);
  font:800 9.5px/1 var(--font-family,Roboto,sans-serif);letter-spacing:.04em;color:var(--ink2)}
.sq-hj-t{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1px}
.sq-hj-t b{font-size:12.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-hj-t span{font-size:10.5px;color:var(--dim)}
.sq-hj-m{flex:0 0 auto;height:26px;padding:0 11px;border-radius:999px;display:inline-flex;
  align-items:center;border:1px solid var(--line2);background:var(--card);
  color:var(--accent-ink);font-size:11.5px;font-weight:700;text-decoration:none}
.sq-hj-m:hover{background:var(--accent-wash);border-color:var(--accent)}

/* ── GENOMGÅNGEN: KNAPPEN I VERKTYGSRADEN ────────────────────────────────── */
/* §2.1: fylld accent bär vit text bara när ytan är mörkad. I mörkt tema är
   --accent redan ljus mot mörk botten och bär då mörk text. */
.sq-gg-start{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:0;border-radius:var(--r);cursor:pointer;
  background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;
  font:700 12px/1 var(--font-family,Roboto,sans-serif)}
html[data-theme="dark"] .sq-gg-start{background:var(--accent);color:#06121f}
.sq-gg-start:hover{filter:brightness(1.06)}
.sq-gg-start b{font-size:11px;opacity:.85;font-weight:800}

/* ── SNABBSTARTEN ────────────────────────────────────────────────────────── */
.sq-snabb{display:flex;align-items:center;gap:11px;margin:0 0 10px;padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:var(--r);
  background:color-mix(in srgb,var(--gold) 9%,var(--card))}
html[data-theme="dark"] .sq-snabb{background:color-mix(in srgb,var(--gold) 13%,var(--card))}
.sq-snabb-t{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.sq-snabb-t b{font-size:13px;font-weight:800;color:var(--ink)}
.sq-snabb-t span{font-size:11px;color:var(--ink2);line-height:1.35}
.sq-snabb-b{flex:0 0 auto;height:32px;padding:0 14px;border:0;border-radius:var(--r);cursor:pointer;
  background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff;
  font:700 12.5px/1 var(--font-family,Roboto,sans-serif)}
html[data-theme="dark"] .sq-snabb-b{background:var(--accent);color:#06121f}

/* ── GENOMGÅNGENS RUTA ───────────────────────────────────────────────────── */
.sq-gg{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:16px;background:color-mix(in srgb,var(--bg) 90%,#000);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sq-gg[hidden]{display:none}
body.sq-gg-pa{overflow:hidden}
.sq-gk{width:min(440px,100%);max-height:calc(100vh - 32px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 18px 48px rgba(0,0,0,.26)}

.sq-gt{display:flex;align-items:center;gap:9px;padding:10px 13px 8px}
.sq-gt .lb{font:800 8.5px/1 var(--font-family,Roboto,sans-serif);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.sq-gn2{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--ink2)}
.sq-gx{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);background:transparent;
  color:var(--ink2);cursor:pointer;display:grid;place-items:center;font-size:11px;padding:0;flex:0 0 auto}
.sq-gx:hover{background:var(--inset);color:var(--ink)}
.sq-gp{height:3px;margin:0 13px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 11%,transparent)}
.sq-gp i{display:block;height:100%;width:var(--sq-p,0);background:var(--accent);
  border-radius:999px;transition:width .18s}

.sq-gb-kropp{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 13px 4px;
  display:flex;flex-direction:column;gap:10px}
.sq-gtop{display:flex;align-items:center;gap:12px;min-width:0}
.sq-gic{flex:0 0 auto;width:76px;height:76px;border-radius:var(--r);background:var(--inset);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.sq-gic img{max-width:100%;height:auto;display:block}
.sq-gph{font:800 26px/1 var(--font-family,Roboto,sans-serif);color:var(--dim)}
.sq-gmeta{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.sq-gn{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.015em;line-height:1.1}
.sq-grar{font:800 9px/1 var(--font-family,Roboto,sans-serif);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;border-radius:var(--r-sm);background:var(--inset);color:var(--ink2)}
.sq-gkal{margin:0;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
.sq-gkal i{color:var(--dim)}
.sq-gab{margin:0;padding:9px 11px;border-radius:var(--r);background:var(--inset);
  font-size:12px;line-height:1.45;color:var(--ink2)}

/* Finishraden. Fyra brickor, tummen når alla fyra. */
.sq-gv{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:7px}
.sq-gvb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:62px;padding:8px 4px;border:1.5px solid var(--line2);border-radius:var(--r);
  background:var(--card);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sq-gvb:hover{border-color:var(--accent)}
.sq-gvn{font:800 10px/1 var(--font-family,Roboto,sans-serif);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink2)}
.sq-gvp{font-size:11px;color:var(--dim)}
.sq-gvb.is-agd{border-color:transparent;background:var(--accent-wash)}
.sq-gvb.is-agd .sq-gvn{color:var(--accent-ink)}
.sq-gvb.is-max{border-color:transparent;background:color-mix(in srgb,var(--gold) 20%,transparent)}
.sq-gvb.is-max .sq-gvn{color:color-mix(in srgb,var(--gold) 88%,#000)}
html[data-theme="dark"] .sq-gvb.is-max .sq-gvn{color:var(--gold)}
/* Osläppt: syns, går inte att bocka. Streckad kant säger "ännu inte". */
.sq-gvb.is-kom{border-style:dashed;background:transparent;cursor:default;opacity:.62}

.sq-ghj{display:flex;flex-direction:column;gap:4px;margin-top:auto;
  padding-top:9px;border-top:1px solid var(--line)}
.sq-ghh{font:800 8.5px/1 var(--font-family,Roboto,sans-serif);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);text-align:center;padding-bottom:3px}
.sq-ghr{display:flex;align-items:center;gap:8px}
.sq-ghn{flex:1 1 0;min-width:0;font-size:12px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-ghn b{color:var(--ink);font-weight:700}

.sq-gf{display:flex;gap:8px;padding:11px 13px;flex:0 0 auto}
.sq-gb{flex:1 1 0;height:42px;border-radius:var(--r);cursor:pointer;
  font:700 13.5px/1 var(--font-family,Roboto,sans-serif)}
.sq-gb.g{border:1px solid var(--line2);background:var(--card);color:var(--ink)}
.sq-gb.g:hover{background:var(--inset)}
.sq-gb.p{border:0;background:color-mix(in srgb,var(--accent) 80%,#000);color:#fff}
html[data-theme="dark"] .sq-gb.p{background:var(--accent);color:#06121f}
.sq-gtip{margin:0;padding:0 13px 11px;text-align:center;font-size:11px;color:var(--dim)}

.sq-gklar{display:flex;flex-direction:column;align-items:center;gap:9px;padding:34px 16px}
.sq-gklar b{font-size:19px;color:var(--ink)}
.sq-gklar span{font-size:12.5px;color:var(--ink2)}

/* ── NÄR RAILEN VIKER ────────────────────────────────────────────────────────
   forre_pulse.css döljer .right under 900 px. Här är det tvärtom rätt: på en
   telefon är "vad gör jag nu" och "vem frågar jag" det man öppnar sidan för,
   och listan är det man bläddrar i efteråt. Railen visas alltså — men överst,
   inte längst ner, för ett svar under trettio rader är inget svar. */
@media (max-width:900px){
  /* display:contents löser upp railen så de två korten blir egna barn i
     sidgriden och kan ordnas var för sig. Utan det är de en klump: antingen
     ligger BÅDA ovanför listan (522 px innan man ser en enda bricka) eller
     båda under. Härnäst är det man öppnar sidan för och står överst; "vem kan
     hjälpa" är nästa steg när man vet vad man saknar, och står under. */
  .shell.c3 > .rail.right.sq-hr{display:contents}
  .shell.c3 > .sq-hr > .sq-nx{order:-1}
  .shell.c3 > .sq-hr > .sq-hj{order:2}
  /* Tre rader räcker på en telefon. Fem trycker ner listan med 80 px till för
     två rader man ändå scrollar förbi. */
  .sq-nx-l .sq-nx-r:nth-child(n+4){display:none}
}

/* ── TELEFONEN ───────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .sq-gg{padding:0}
  .sq-gk{width:100%;height:100%;max-height:100%;border:0;border-radius:0}
  /* Namnet på SAMMA höjd på varje kort. Centrerat innehåll flyttar det upp och
     ner med hur lång förmågetexten är, och när man svarar tjugo i rad är det
     ögat som får jobba. Identiteten överst, hjälplistan närmast tummen. */
  .sq-gb-kropp{justify-content:flex-start}
  .sq-gb-kropp > :last-child:not(:first-child){margin-top:auto}
  .sq-gv{grid-template-columns:repeat(4,1fr);gap:6px}
  .sq-gvb{min-height:74px}
  /* EN RAD på telefonen. pulse-sprites-rad.css slogs för att få första
     brickan inom 230 px; ett tvåradigt kort på 114 px hade ätit halva den
     vinsten. Antalet och knappen räcker — vilka sprites det gäller står i
     listan direkt under, och Ångra ligger ett tryck bort. */
  /* TVÅ rader Härnäst på telefonen, tre på surfplattan. Med tre börjar
     rutnätet 501 px ner och man ser inte att det finns en lista; med två
     ligger både Genomgången och listans första rad inom första skärmen.
     pulse-sprites-rad.css vann en gång tillbaka 220 px här — lagret ovanpå
     får inte äta upp dem igen. */
  .sq-nx-l .sq-nx-r:nth-child(n+3){display:none}
  .sq-nx-h{padding:9px 13px 7px}

  .sq-snabb{gap:9px;padding:7px 10px;margin-bottom:8px}
  .sq-snabb-t span{display:none}
  .sq-snabb-t b{font-size:12.5px}
  .sq-snabb-b{height:30px;padding:0 12px;font-size:12px}
}