/* guide-sections.css — "הדבר החי" מסוג sections (7.10.2026, גל 2B). ההתנהגות ב-/js/guide-sections.js.
   נטען רק בעמודים שמשתמשים בו (מבנה המבחן, אסטרטגיה), אחרי guide-v3.css. הכרטיס הכהה, הכפתור והצ'יפים — מ-guide-v3.css. */

/* כותרות בתוך הכרטיס: חלק מהעמודים מגדירים h2{display:flex} בסגנון של עצמם, וזה מבטל את ה-<br> */
body.g3 .g3-live h2{display:block}

/* ── blocks: פס הפרקים ─────────────────────────────────────────────────── */
body.g3 .gs-strip{display:flex;gap:4px;height:66px;margin-top:14px;align-items:flex-end}
body.g3 .gs-blk{position:relative;flex:1 1 0;min-width:0;height:100%;padding:0;border:0;border-radius:10px;cursor:pointer;font:inherit;color:#fff;
  background:var(--obj-sheen),var(--c);box-shadow:var(--obj-depth),0 6px 14px -8px rgba(0,0,0,.6);
  transform-origin:50% 100%;transform:scaleY(0);opacity:0;
  transition:transform .55s var(--d,0ms) cubic-bezier(.34,1.56,.64,1),opacity .3s var(--d,0ms),filter .2s,translate .2s}
body.g3 .gs-strip.in .gs-blk{transform:none;opacity:1}
body.g3 .gs-blk b{font-family:var(--serif);font-weight:900;font-size:20px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.35)}
body.g3 .gs-blk.exp{background:rgba(255,255,255,.06);border:2px dashed rgba(255,255,255,.55);box-shadow:none}
body.g3 .gs-blk:hover{filter:brightness(1.12)}
body.g3 .gs-blk[aria-pressed=true]{translate:0 -6px;outline:3px solid var(--hero-accent);outline-offset:2px}
body.g3 .gs-blk:focus-visible{outline:3px solid var(--hero-accent);outline-offset:2px}
body.g3 .gs-legend{display:flex;flex-wrap:wrap;gap:4px 12px;list-style:none;margin:10px 0 0;padding:0}
body.g3 .gs-legend li{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:700;color:rgba(255,255,255,.8)}
body.g3 .gs-legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
body.g3 .gs-legend li.exp i{background:none;border:1.5px dashed rgba(255,255,255,.7)}
body.g3 .gs-total{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.7)}
body.g3 .gs-card{margin-top:12px}
body.g3 .gs-hint{margin:0;padding:14px;border-radius:16px;border:1px dashed rgba(255,255,255,.3);text-align:center;font-weight:800;font-size:14px;color:rgba(255,255,255,.75)}
body.g3 .gs-in{background:#fff;color:var(--ink);border-radius:18px;padding:12px 14px;box-shadow:var(--obj-depth),var(--shadow-lift)}
body.g3 .gs-k{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:900;color:#5A637B}
body.g3 .gs-k::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
body.g3 .gs-k em{font-style:normal;padding:2px 9px;border-radius:99px;background:#FFF4D6;color:#7A5200;border:1px solid #F2D58A}
body.g3 .gs-in h3{margin:2px 0 0;font-size:16.5px;font-weight:800;line-height:1.4}
body.g3 .gs-nums{display:flex;gap:22px;margin-top:6px}
body.g3 .gs-nums div{display:flex;align-items:baseline;gap:6px}
body.g3 .gs-nums b{font-family:var(--serif);font-weight:900;font-size:38px;line-height:1;color:var(--hero-b)}
body.g3 .gs-nums span{font-weight:800;font-size:14px;color:#5A637B}
body.g3 .gs-types{margin:6px 0 0;padding:0 1.1rem 0 0;font-size:13.5px;line-height:1.55}
body.g3 .gs-types li{margin:0 0 4px}
body.g3 .gs-alt{margin:6px 0 0;font-size:13px;line-height:1.55;color:#4A5372}
body.g3 .gs-fn{margin:8px 0 0;padding:7px 10px;border-radius:10px;background:#F3F5FA;font-size:13px;font-weight:700;line-height:1.5}

/* ── clock: תקציב לשאלה ───────────────────────────────────────────────── */
body.g3 .gs-pick{margin-top:12px}
body.g3 .gs-pick button{display:inline-flex;align-items:center;gap:7px}
body.g3 .gs-pick button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
body.g3 .gs-clock{display:flex;align-items:center;gap:14px;margin-top:14px;--c:#FFD45C}
body.g3 .gs-dial{position:relative;flex:none;width:150px;height:150px}
body.g3 .gs-dial svg{width:100%;height:100%;overflow:visible}
body.g3 .gs-dial .face{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.18);stroke-width:1}
body.g3 .gs-dial .sl{fill:none;stroke:rgba(255,255,255,.22);stroke-width:7;stroke-linecap:butt}
body.g3 .gs-dial .sl.lead{stroke:rgba(255,255,255,.12);stroke-dasharray:2 2}
body.g3 .gs-dial .run path{fill:none;stroke-width:5;stroke-linecap:round}
body.g3 .gs-dial .r-lead{stroke:rgba(255,255,255,.55)}
body.g3 .gs-dial .r-ok{stroke:var(--hero-accent)}
body.g3 .gs-dial .r-over{stroke:#FF9F7A}
body.g3 .gs-dial .flag{fill:#FF9F7A;stroke:#fff;stroke-width:1.4}
body.g3 .gs-dial .hand{stroke:#fff;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
body.g3 .gs-mid{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none}
body.g3 .gs-mid b{display:block;font-family:var(--serif);font-weight:900;font-size:26px;line-height:1;direction:ltr;color:#fff}
body.g3 .gs-mid span{display:block;margin-top:3px;font-size:11.5px;font-weight:800;color:rgba(255,255,255,.75)}
body.g3 .gs-mid.r-ok b{color:var(--hero-accent)}
body.g3 .gs-mid.r-over b,body.g3 .gs-mid.r-over span{color:#FFB79A}
body.g3 .gs-rows{flex:1;min-width:0;margin:0}
body.g3 .gs-rows div{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.12)}
body.g3 .gs-rows div:last-child{border-bottom:0}
body.g3 .gs-rows dt{font-size:11.5px;font-weight:800;color:rgba(255,255,255,.6)}
body.g3 .gs-rows dd{margin:1px 0 0;font-size:14px;font-weight:800;line-height:1.4;color:#fff}
body.g3 .gs-rows .g dd{color:#FFB79A}
body.g3 .gs-rule{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.08);font-size:13px;line-height:1.55;color:rgba(255,255,255,.85)}
body.g3 .gs-rule b{color:var(--hero-accent)}

@media (max-width:420px){
  body.g3 .gs-clock{gap:10px}
  body.g3 .gs-dial{width:132px;height:132px}
  body.g3 .gs-mid b{font-size:23px}
}
@media (min-width:900px){
  body.g3 .gs-strip{height:84px;gap:6px}
  body.g3 .gs-blk b{font-size:24px}
  body.g3 .gs-in{padding:16px 18px}
  body.g3 .gs-in h3{font-size:18px}
  body.g3 .gs-dial{width:190px;height:190px}
  body.g3 .gs-mid b{font-size:32px}
  body.g3 .gs-clock{gap:28px}
  body.g3 .gs-rows dd{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  body.g3 .gs-blk{transform:none;opacity:1;transition:none}
  body.g3 .gs-blk[aria-pressed=true]{translate:none}
}