/* safety-practice.css - אזור התרגול לבטיחות בבנייה. כל המחלקות עם sp- כדי לא להתנגש ב-Tailwind של האתר. */
.sp{--sp-p:#2563eb;--sp-pd:#1d4ed8;--sp-dark:#0f172a;--sp-ink:#1e293b;--sp-mute:#64748b;--sp-line:#e2e8f0;--sp-bg:#f8fafc;--sp-ok:#059669;--sp-okbg:#ecfdf5;--sp-bad:#dc2626;--sp-badbg:#fef2f2;--sp-amber:#d97706;
  background:var(--sp-bg);padding-bottom:4rem;color:var(--sp-ink)}
.sp *{box-sizing:border-box}
.sp a{color:var(--sp-p)}
.sp [hidden]{display:none!important}

/* hero */
.sp-hero{position:relative;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#2563eb 100%);color:#fff;padding:6.5rem 0 3.5rem;overflow:hidden}
.sp-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(56,189,248,.18),transparent 60%);pointer-events:none}
.sp-hero--compact{padding:6rem 0 2.5rem}
.sp-hero-in{position:relative;max-width:72rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.sp-hero-in{padding:0 1.5rem}}
.sp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.85rem;color:#bfdbfe;margin-bottom:1.1rem}
.sp-crumbs a{color:#bfdbfe;text-decoration:none}
.sp-crumbs a:hover{color:#fff}
.sp-crumbs span[aria-hidden]{opacity:.6}
.sp-crumbs [aria-current]{color:rgba(255,255,255,.85)}
.sp-badge{display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:.6rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;color:#eff6ff;margin-bottom:.9rem}
.sp-hero h1{font-size:1.75rem;line-height:1.2;font-weight:900;margin:0 0 .8rem;letter-spacing:-.01em}
@media(min-width:768px){.sp-hero h1{font-size:2.6rem}.sp-hero--compact h1{font-size:2.1rem}}
.sp-lead{color:#dbeafe;font-size:1rem;line-height:1.7;max-width:48rem;margin:0;font-weight:500}
@media(min-width:768px){.sp-lead{font-size:1.1rem}}
.sp-lead b{color:#fff}
.sp-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* buttons */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.9rem;padding:.65rem 1.4rem;border-radius:999px;font-weight:800;font-size:.98rem;text-decoration:none;border:0;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s;font-family:inherit;line-height:1.2}
.sp-btn:active{transform:translateY(1px)}
.sp a.sp-btn--white,.sp-btn--white{background:#fff;color:var(--sp-p);box-shadow:0 8px 24px rgba(15,23,42,.25)}
.sp-btn--white:hover{background:#eff6ff}
.sp a.sp-btn--ghost,.sp-btn--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35)}
.sp-btn--ghost:hover{background:rgba(255,255,255,.2)}
.sp a.sp-btn--primary,.sp-btn--primary{background:var(--sp-p);color:#fff}
.sp-btn--primary:hover{background:var(--sp-pd)}
.sp-btn--primary:disabled{background:#94a3b8;cursor:not-allowed}
.sp a.sp-btn--soft,.sp-btn--soft{background:#eff6ff;color:var(--sp-pd);border:1px solid #bfdbfe}
.sp-btn--soft:hover{background:#dbeafe}
.sp-btn--sm{min-height:2.4rem;padding:.4rem 1rem;font-size:.88rem;background:var(--sp-p);color:#fff!important}
.sp-btn--lg{min-height:3.3rem;font-size:1.08rem;padding:.8rem 2rem;width:100%}
@media(min-width:640px){.sp-btn--lg{width:auto}}
.sp-link{background:none;border:0;padding:0;color:var(--sp-p);font-weight:800;cursor:pointer;font-family:inherit;font-size:inherit;text-decoration:none}
.sp-link:hover{text-decoration:underline}

/* layout */
.sp-wrap{max-width:72rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.sp-wrap{padding:0 1.5rem}}
.sp-wrap--ex{max-width:64rem}
.sp-card{background:#fff;border:1px solid var(--sp-line);border-radius:1.4rem;box-shadow:0 1px 2px rgba(15,23,42,.04);padding:1.25rem}
@media(min-width:768px){.sp-card{padding:1.75rem}}
.sp-section{margin-top:2.75rem}
.sp-h2{font-size:1.45rem;font-weight:900;color:var(--sp-ink);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem;line-height:1.3}
.sp-h2::before{content:"";width:.28rem;height:1.6rem;border-radius:999px;background:#60a5fa;flex:none}
@media(min-width:768px){.sp-h2{font-size:1.65rem}}
.sp-h3{font-size:1.1rem;font-weight:900;color:var(--sp-ink);margin:1.75rem 0 .8rem}
.sp-p{color:#475569;line-height:1.75;font-weight:500;margin:0 0 1rem}
.sp-note{color:#475569;background:#fff;border:1px solid var(--sp-line);border-right:4px solid #93c5fd;border-radius:.8rem;padding:.75rem 1rem;font-size:.93rem;line-height:1.65;margin:1rem 0}
.sp-brief{margin-top:-1.75rem;position:relative;background:#fff;border:1px solid var(--sp-line);border-radius:1.2rem;padding:1rem 1.25rem;box-shadow:0 10px 30px rgba(15,23,42,.08);line-height:1.75;color:#334155}
.sp-brief p{margin:0}
.sp-list{margin:0;padding:0 1.1rem 0 0;line-height:1.8;color:#475569}
.sp-list li{margin-bottom:.45rem}
.sp-list b{color:var(--sp-ink)}

/* progress */
.sp-progress{margin-top:1.5rem}
.sp-progress-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.sp-progress-head h2{font-size:1.15rem;font-weight:900;margin:0}
.sp-sync{font-size:.8rem;font-weight:700;color:var(--sp-ok);background:var(--sp-okbg);border-radius:999px;padding:.2rem .7rem;white-space:nowrap}
.sp-stats{display:grid;gap:.9rem}
@media(min-width:640px){.sp-stats{grid-template-columns:repeat(3,1fr)}}
.sp-stat{background:var(--sp-bg);border:1px solid var(--sp-line);border-radius:1rem;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.sp-stat-n{font-size:1.4rem;font-weight:900;color:var(--sp-ink)}
.sp-stat-n b{color:var(--sp-p)}
.sp-stat-l{font-size:.85rem;color:var(--sp-mute);font-weight:700}
.sp-stat-link{font-size:.88rem;font-weight:800}
.sp-bar{display:block;height:.45rem;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:.2rem}
.sp-bar i{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,var(--sp-p));border-radius:999px;transition:width .6s ease}
.sp-bar--amber i{background:linear-gradient(90deg,#fbbf24,var(--sp-amber))}
.sp-login-note{margin:1rem 0 0;font-size:.9rem;line-height:1.6;color:#475569;background:#fffbeb;border:1px solid #fde68a;border-radius:.8rem;padding:.65rem .9rem}
.sp-login-note a{font-weight:800}

/* modes / sets / topics */
.sp-modes{display:grid;gap:.75rem}
@media(min-width:640px){.sp-modes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sp-modes{grid-template-columns:2fr 1fr 1fr 1fr}}
.sp-mode{display:flex;flex-direction:column;gap:.35rem;background:#fff;border:1px solid var(--sp-line);border-radius:1.1rem;padding:1rem 1.1rem;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.sp-mode:hover{border-color:#93c5fd;box-shadow:0 6px 20px rgba(37,99,235,.1)}
.sp-mode-t{font-weight:900;color:var(--sp-ink);font-size:1.02rem}
.sp-mode-d{color:var(--sp-mute);font-size:.86rem;line-height:1.5;font-weight:600}
.sp-mode--main{background:linear-gradient(135deg,#1e3a8a,#2563eb);border-color:transparent}
.sp-mode--main .sp-mode-t{color:#fff;font-size:1.15rem}
.sp-mode--main .sp-mode-d{color:#dbeafe}
.sp-sets{display:grid;gap:.75rem}
@media(min-width:768px){.sp-sets{grid-template-columns:repeat(3,1fr)}}
.sp-set{background:#fff;border:1px solid var(--sp-line);border-radius:1.1rem;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem}
.sp-set-t{font-weight:900;font-size:1.05rem;color:var(--sp-ink)!important;text-decoration:none}
.sp-set-t:hover{color:var(--sp-p)!important}
.sp-set-n{color:var(--sp-mute);font-size:.86rem;font-weight:700}
.sp-set-a{display:flex;align-items:center;gap:1rem;margin-top:.4rem}
.sp-topics{display:flex;flex-wrap:wrap;gap:.55rem}
.sp-topic{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--sp-line);border-radius:.85rem;padding:.6rem .9rem;text-decoration:none;color:var(--sp-ink)!important;font-weight:700;font-size:.93rem;min-height:2.75rem;transition:border-color .15s,background .15s}
.sp-topic:hover{border-color:#93c5fd;background:#eff6ff}
.sp-topic b{background:#eff6ff;color:var(--sp-pd);border-radius:999px;padding:.05rem .55rem;font-size:.78rem}

/* exercise cards */
.sp-ex-grid{display:grid;gap:.75rem}
@media(min-width:640px){.sp-ex-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.sp-ex-grid{grid-template-columns:repeat(3,1fr)}}
.sp-ex-card{position:relative;display:flex;flex-direction:column;gap:.4rem;background:#fff;border:1px solid var(--sp-line);border-radius:1.1rem;padding:1rem 1.1rem;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.sp-ex-card:hover{border-color:#fcd34d;box-shadow:0 6px 20px rgba(217,119,6,.12)}
.sp-ex-name{font-weight:900;color:var(--sp-ink);font-size:1rem}
.sp-ex-card.is-done .sp-ex-name{padding-left:4.5rem}
.sp-ex-teaser{color:#475569;font-size:.86rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-ex-meta{color:var(--sp-amber);font-size:.8rem;font-weight:800}
.sp-ex-done{display:none;position:absolute;top:.9rem;left:.9rem;background:var(--sp-okbg);color:var(--sp-ok);font-size:.75rem;font-weight:900;border-radius:999px;padding:.15rem .6rem}
.sp-ex-card.is-done{border-color:#a7f3d0}
.sp-ex-card.is-done .sp-ex-done{display:block}
.sp-kiz{display:flex;flex-direction:column;gap:.3rem;margin-top:1.25rem;background:#fffbeb;border:1px solid #fde68a;border-radius:1.1rem;padding:1rem 1.2rem;text-decoration:none}
.sp-kiz-t{font-weight:900;color:#92400e}
.sp-kiz-d{color:#78350f;font-size:.9rem}

/* FAQ */
.sp-faq{display:flex;flex-direction:column;gap:.7rem}
.sp-faq details{background:#fff;border:1px solid var(--sp-line);border-radius:1rem;overflow:hidden;transition:border-color .15s}
.sp-faq details:hover{border-color:#bfdbfe}
.sp-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"⌄";color:var(--sp-p);font-weight:900;transition:transform .2s}
.sp-faq details[open] summary::after{transform:rotate(180deg)}
.sp-faq summary h3{margin:0;font-size:1rem;font-weight:800;color:var(--sp-ink)}
.sp-faq details[open] summary h3{color:var(--sp-p)}
.sp-faq-a{padding:0 1.2rem 1.1rem;border-top:1px solid #f1f5f9;padding-top:.9rem;color:#475569;line-height:1.75}
.sp-more{display:grid;gap:.6rem}
@media(min-width:640px){.sp-more{grid-template-columns:repeat(2,1fr)}}
.sp-more a{background:#fff;border:1px solid var(--sp-line);border-radius:1rem;padding:.9rem 1.1rem;font-weight:800;color:#334155;text-decoration:none}
.sp-more a:hover{border-color:#bfdbfe;color:var(--sp-p)}
.sp-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0}

/* quiz */
.sp-quiz{margin-top:-1.5rem;position:relative;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.sp-setup fieldset{border:0;padding:0;margin:0 0 1.1rem}
.sp-setup legend{font-weight:900;font-size:1.05rem;margin-bottom:.6rem;color:var(--sp-ink)}
.sp-chips-h{font-size:.82rem;font-weight:800;color:var(--sp-mute);margin:.8rem 0 .4rem}
.sp-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.sp-chips label{position:relative;cursor:pointer}
.sp-chips input{position:absolute;opacity:0;pointer-events:none}
.sp-chips span{display:inline-flex;align-items:center;min-height:2.6rem;padding:.45rem .95rem;border-radius:999px;border:1px solid var(--sp-line);background:#fff;font-weight:700;font-size:.92rem;color:#334155;transition:all .12s}
.sp-chips label:hover span{border-color:#93c5fd}
.sp-chips input:checked+span{background:var(--sp-p);border-color:var(--sp-p);color:#fff}
.sp-chips input:focus-visible+span{outline:3px solid #93c5fd;outline-offset:2px}
.sp-setup-row{display:grid;gap:0}
@media(min-width:768px){.sp-setup-row{grid-template-columns:1fr 1fr;gap:1.5rem}}
.sp-setup-note{margin:.9rem 0 0;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:.8rem;padding:.6rem .9rem;font-weight:700}
.sp-run-top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-weight:800;color:#334155;font-size:.95rem}
.sp-run-top small{color:var(--sp-mute);font-weight:700;margin-right:.35rem}
.sp-run-score b{color:var(--sp-ok)}
.sp-bar--run{margin:.7rem 0 1.2rem;height:.4rem}
.sp-run-q{font-size:1.18rem;line-height:1.6;font-weight:800;color:var(--sp-ink);margin:0 0 1.1rem;outline:0}
@media(min-width:768px){.sp-run-q{font-size:1.3rem}}
.sp-opts{display:flex;flex-direction:column;gap:.6rem}
.sp-opt{display:flex;align-items:flex-start;gap:.75rem;width:100%;text-align:right;background:#fff;border:2px solid var(--sp-line);border-radius:1rem;padding:.8rem .95rem;font-family:inherit;font-size:1rem;line-height:1.55;color:var(--sp-ink);cursor:pointer;transition:border-color .12s,background .12s;min-height:3.2rem}
.sp-opt:hover:not(:disabled){border-color:#93c5fd;background:#f8fbff}
.sp-opt:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.sp-opt:disabled{cursor:default}
.sp-opt-l{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:.6rem;background:#f1f5f9;color:#475569;font-weight:900;font-size:.9rem}
.sp-opt-t{padding-top:.15rem;font-weight:600}
.sp-opt.is-picked{border-color:var(--sp-p);background:#eff6ff}
.sp-opt.is-picked .sp-opt-l{background:var(--sp-p);color:#fff}
.sp-opt.is-correct{border-color:var(--sp-ok);background:var(--sp-okbg)}
.sp-opt.is-correct .sp-opt-l{background:var(--sp-ok);color:#fff}
.sp-opt.is-wrong{border-color:var(--sp-bad);background:var(--sp-badbg)}
.sp-opt.is-wrong .sp-opt-l{background:var(--sp-bad);color:#fff}
.sp-feedback{min-height:.5rem;margin-top:.9rem}
.sp-fb-ok,.sp-fb-bad{margin:0;font-weight:900;font-size:1.02rem}
.sp-fb-ok{color:var(--sp-ok)}
.sp-fb-bad{color:var(--sp-bad)}
.sp-why{margin:.45rem 0 0;color:#475569;line-height:1.7;background:var(--sp-bg);border-radius:.7rem;padding:.6rem .8rem;font-size:.95rem}
.sp-run-nav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-start;margin-top:1.2rem}
.sp-run-nav .sp-btn{min-width:9rem}
@media(max-width:639px){.sp-run-nav .sp-btn{flex:1}}
.sp-kbd{display:none;margin:.9rem 0 0;color:#94a3b8;font-size:.8rem}
@media(hover:hover) and (pointer:fine){.sp-kbd{display:block}}
.sp-result{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.sp-result-h{font-size:1.4rem;font-weight:900;margin:0 0 .3rem}
.sp-result p{margin:0;color:#475569;font-weight:600}
.sp-ring{--p:0;width:6.5rem;height:6.5rem;border-radius:50%;background:conic-gradient(var(--sp-p) calc(var(--p)*1%),#e2e8f0 0);display:grid;place-items:center;flex:none}
.sp-ring span{width:5.1rem;height:5.1rem;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:900;font-size:1.6rem;color:var(--sp-ink)}
.sp-ring small{font-size:.9rem}
.sp-run-nav--res{margin:1.2rem 0 .5rem}
.sp-review{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.sp-review li{border:1px solid var(--sp-line);border-radius:1rem;padding:.85rem 1rem}
.sp-review-q{margin:0 0 .45rem;font-weight:800;line-height:1.6}
.sp-review-bad{margin:0 0 .25rem;color:var(--sp-bad);font-weight:700}
.sp-review-ok{margin:0;color:var(--sp-ok);font-weight:800}

/* question list pages */
.sp-set-tools{position:sticky;top:4.5rem;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1px solid var(--sp-line);border-radius:999px;padding:.55rem 1.1rem;margin:1.25rem 0;font-size:.9rem;font-weight:700;color:#475569}
.sp-set-tools b{color:var(--sp-ink)}
.sp-qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.sp-q{background:#fff;border:1px solid var(--sp-line);border-radius:1.2rem;padding:1.1rem 1.1rem 1rem;scroll-margin-top:7rem}
@media(min-width:768px){.sp-q{padding:1.4rem 1.5rem 1.2rem}}
.sp-q-t{font-size:1.05rem;line-height:1.65;font-weight:800;color:var(--sp-ink);margin:0 0 .9rem}
.sp-q-n{display:inline-block;background:#eff6ff;color:var(--sp-pd);font-size:.78rem;font-weight:900;border-radius:.5rem;padding:.1rem .5rem;margin-left:.35rem;vertical-align:middle}
.sp-q-ans{margin-top:.8rem}
.sp-q-ans summary{cursor:pointer;color:var(--sp-p);font-weight:800;font-size:.9rem;list-style:none}
.sp-q-ans summary::-webkit-details-marker{display:none}
.sp-q-ans summary::before{content:"+ "}
.sp-q-ans[open] summary::before{content:"− "}
.sp-q-ans p{margin:.5rem 0 0;line-height:1.7}
.sp-q-ans p b{color:var(--sp-ok)}

/* exercise page */
.sp--ex .sp-wrap{margin-top:-1.25rem;position:relative}
.sp-ex-box{overflow:hidden}
.sp-ex-box .container{max-width:none!important}
.sp-ex-box svg{max-width:100%}
.sp-ex-box .math-block{overflow-x:auto!important}
.sp-ex-box mjx-container{max-width:100%;overflow-x:auto;overflow-y:hidden}
.sp-ex-box .math-block mjx-container,.sp-ex-box .math-block>span{display:inline-block;max-width:100%;overflow-x:auto;overflow-y:hidden;vertical-align:middle}
.sp-ex-box .step-custom-content{min-width:0;max-width:100%;width:100%}
.sp-ex-box .step-card,.sp-ex-box .scenario-box,.sp-ex-box .regulations{overflow-wrap:anywhere}
@media(max-width:767px){.sp-ex-box .step-card{padding:14px}.sp-ex-box .math-block{padding:12px 44px 12px 12px}}
.sp-ex-actions{text-align:center;margin-top:1rem}
.sp-ex-status{background:var(--sp-okbg);color:var(--sp-ok);border:1px solid #a7f3d0;border-radius:999px;padding:.45rem 1rem;font-weight:900;display:inline-block;margin-bottom:.8rem;position:relative}
.sp-ex-nav{display:flex;justify-content:space-between;gap:1rem;margin:1.25rem 0 0}
.sp-ex-nav-a{background:#fff;border:1px solid var(--sp-line);border-radius:.9rem;padding:.7rem 1rem;font-weight:800;text-decoration:none;font-size:.92rem;max-width:48%}
.sp-ex-nav-a:hover{border-color:#bfdbfe}
.sp-ex-nav-next{margin-right:auto;text-align:left}
.sp-tabs{display:flex;gap:.5rem;margin-bottom:.9rem;position:relative}
.sp-tab{flex:1;min-height:2.9rem;border:1px solid var(--sp-line);background:#fff;border-radius:999px;font-weight:800;font-family:inherit;font-size:.95rem;color:#334155;cursor:pointer}
@media(min-width:640px){.sp-tab{flex:none;padding:0 1.4rem}}
.sp-tab.is-on{background:var(--sp-p);border-color:var(--sp-p);color:#fff}