/* כרטיס-פרוטוקול · ספריית מדיקלאס · תבנית משותפת ל-7 הפרוטוקולים (21.10.2026) */
/* ===== כרטיס-פרוטוקול · תבנית אחת לכל 7 הפרוטוקולים ===== */
/* חוק «זהב ולבן»: טקסט = לבן או זהב בלבד · ציאן = נקודת-בדיקה · אדום = טעויות */

.card-wrap {
    position: fixed; top: var(--hdr-h); bottom: var(--ftr-h); left: 0; right: 0;
    padding: 2vh 3vw;
    display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); gap: 1.6vh;
    max-width: 1440px; margin: 0 auto; overflow: hidden;
}

/* --- פס עליון: מה זה · מה צריך · כמה זמן --- */
.pc-top {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    background: var(--glass-blue); border: 1px solid var(--border-gold);
    border-radius: 16px; padding: 12px 20px;
}
.pc-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pc-num {
    font-family: var(--font-mono); color: var(--gold); font-size: 0.8rem; letter-spacing: 2px;
    border: 1px solid var(--gold); border-radius: 50px; padding: 4px 12px; white-space: nowrap;
}
.pc-id h2 { font-family: var(--font-ui); font-weight: 900; font-size: clamp(1.05rem, 2.4vh, 1.45rem); color: var(--gold-light); line-height: 1.2; }
.pc-id p { font-size: 0.85rem; color: #fff; font-weight: 500; margin-top: 2px; }

.pc-kit { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.kit-chip {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: 0.82rem; font-weight: 500; color: #fff;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px; padding: 5px 12px;
}
.kit-chip i { color: var(--gold); }
.kit-chip.time { border-color: var(--gold); color: var(--gold-light); }

/* --- השלבים --- */
.pc-steps { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 1.6vw; min-height: 0; }

.step {
    position: relative; display: flex; flex-direction: column; min-height: 0;
    background: var(--glass-blue); border: 1.5px solid var(--border-gold);
    border-radius: 18px; overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.step:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 18px var(--gold-glow); }
.step.done { border-color: var(--blue-tech); }

.step-art { flex: 1 1 auto; min-height: 90px; position: relative; background: radial-gradient(circle at 50% 40%, #0d1d3d 0%, #050b1a 75%); border-bottom: 1px solid var(--border-gold); }
.step-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.step-badge {
    position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500; color: #000;
    background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 0 16px var(--gold-glow);
}
.step.done .step-badge { background: var(--blue-tech); }

.step-body { flex: 0 0 auto; padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.step-body h3 { font-family: var(--font-ui); font-weight: 900; font-size: clamp(1rem, 2.3vh, 1.3rem); color: var(--gold-light); line-height: 1.2; }
.step-body ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.step-body li { position: relative; padding-right: 18px; font-size: clamp(0.85rem, 1.75vh, 0.98rem); line-height: 1.45; color: #fff; font-weight: 400; }
.step-body li::before { content: ''; position: absolute; right: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.step-body li b { color: var(--gold-light); font-weight: 800; }

.check {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; cursor: pointer;
    font-family: var(--font-ui); font-size: clamp(0.82rem, 1.7vh, 0.93rem); font-weight: 500; color: #fff; line-height: 1.35;
    background: rgba(0,212,255,0.06); border: 1px dashed rgba(0,212,255,0.55); border-radius: 12px; padding: 9px 12px;
    transition: background .25s, border-color .25s;
}
.check .box {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--blue-tech);
    display: flex; align-items: center; justify-content: center; color: transparent; font-size: .75rem; transition: .25s;
}
.check:hover { background: rgba(0,212,255,0.12); }
.step.done .check { border-style: solid; border-color: var(--blue-tech); background: rgba(0,212,255,0.14); }
.step.done .check .box { background: var(--blue-tech); color: #000; }

.why {
    align-self: flex-start; background: none; border: none; cursor: pointer;
    font-family: var(--font-ui); font-size: 0.82rem; font-weight: 700; color: var(--gold);
    display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.why:hover { color: var(--gold-light); }

/* --- פס הטעויות --- */
.pc-stop {
    display: flex; align-items: stretch; gap: 10px;
    background: linear-gradient(135deg, rgba(255,68,68,0.10), rgba(0,0,0,0.35));
    border: 1px solid rgba(255,68,68,0.55); border-right: 4px solid var(--danger);
    border-radius: 14px; padding: 10px 14px;
}
.stop-title { display: flex; align-items: center; gap: 8px; color: var(--danger); font-weight: 900; font-size: 0.95rem; white-space: nowrap; padding-left: 6px; }
.stop-item {
    flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: right;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,68,68,0.3); border-radius: 10px; padding: 7px 10px;
    font-family: var(--font-ui); font-size: clamp(0.8rem, 1.65vh, 0.9rem); color: #fff; font-weight: 500; line-height: 1.3;
}
.stop-item i { color: var(--danger); }
.stop-item:hover { border-color: var(--danger); }
.stop-mob { display: none; }

/* --- שכבת «למה?» — הטקסט הקליני המלא, מילה במילה --- */
.why-layer {
    position: fixed; top: var(--hdr-h); bottom: var(--ftr-h); left: 0; right: 0; z-index: 9000;
    background: rgba(3,7,18,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 3vh 4vw;
    opacity: 0; visibility: hidden; transition: .3s;
}
.why-layer.on { opacity: 1; visibility: visible; }
.why-panel {
    position: relative; width: min(760px, 100%); max-height: 100%; overflow-y: auto;
    background: rgba(11,20,35,0.97); border: 1px solid var(--gold); border-radius: 18px;
    padding: 26px 30px; box-shadow: 0 24px 60px rgba(0,0,0,.8), 0 0 24px var(--gold-glow);
}
.why-panel h4 { font-family: var(--font-ui); font-weight: 900; font-size: 1.25rem; color: var(--gold-light); margin-bottom: 14px; padding-left: 40px; }
.why-panel p { font-size: 1rem; line-height: 1.75; color: #fff; font-weight: 300; margin-bottom: 14px; }
.why-panel p strong, .why-panel li strong { color: var(--gold-light); font-weight: 800; }
.why-panel ul { padding-right: 20px; }
.why-panel li { font-size: 1rem; line-height: 1.7; color: #fff; font-weight: 300; margin-bottom: 10px; }
.why-panel .tip { border: 1px dashed var(--gold); border-radius: 12px; padding: 14px 16px; margin-top: 6px; background: rgba(197,160,89,0.06); }
.why-panel .tip h5 { font-size: 1rem; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.why-panel .tip p { margin: 0; }
.why-panel .tip.cyan { border-color: var(--blue-tech); background: rgba(0,212,255,0.05); }
.why-panel .tip.cyan h5 { color: var(--blue-tech); }
.why-close { position: absolute; top: 16px; left: 16px; }


/* --- נייד: שלב אחד בכל פעם · החלקה ימינה/שמאלה · בלי גלילה למטה --- */
.pc-dots { display: none; }
@media (max-width: 900px) {
    .card-wrap { padding: 12px 14px; gap: 10px; grid-template-rows: auto auto 1fr auto; }
    .pc-top { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px; min-width: 0; }
    .pc-id h2 { font-size: 1rem; }
    .pc-id p { display: none; }
    .pc-kit { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .pc-kit::-webkit-scrollbar { display: none; }
    .kit-chip { font-size: .76rem; padding: 4px 10px; }

    .pc-dots { display: flex; justify-content: center; gap: 8px; }
    .pc-dots button {
        width: 38px; height: 30px; border-radius: 50px; cursor: pointer;
        font-family: var(--font-mono); font-size: .9rem; color: var(--gold);
        background: transparent; border: 1px solid var(--border-gold);
    }
    .pc-dots button.on { background: var(--gold); color: #000; border-color: var(--gold); }
    .pc-dots button.done { border-color: var(--blue-tech); color: var(--blue-tech); }
    .pc-dots button.on.done { background: var(--blue-tech); color: #000; }

    .pc-steps {
        display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .pc-steps::-webkit-scrollbar { display: none; }
    .step { flex: 0 0 100%; scroll-snap-align: center; }
    .step-body { padding: 12px 14px 14px; }

    .pc-stop .stop-item, .pc-stop .stop-title { display: none; }
    .pc-stop { padding: 0; border: none; background: none; }
    .stop-mob {
        display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
        font-family: var(--font-ui); font-weight: 800; font-size: .92rem; color: #fff;
        background: rgba(255,68,68,0.10); border: 1px solid rgba(255,68,68,0.6); border-right: 4px solid var(--danger);
        border-radius: 12px; padding: 10px;
    }
    .stop-mob i { color: var(--danger); }
    .why-panel { padding: 22px 18px; }
}

/* --- הדפסה: דף A4 אחד, נקי, שחור-לבן --- */
@media print {
    @page { size: A4; margin: 12mm; }
    body, html { background: #fff !important; color: #000 !important; height: auto !important; overflow: visible !important; }
    .master-header, .master-footer, .why-layer, .why, .pc-dots, .stop-mob { display: none !important; }
    .card-wrap { position: static; padding: 0; display: block; max-width: none; }
    .pc-top, .step, .pc-stop { background: #fff !important; border: 1px solid #000 !important; box-shadow: none !important; }
    .pc-top { margin-bottom: 8mm; }
    .pc-id h2, .pc-id p, .kit-chip, .step-body h3, .step-body li, .check, .stop-item, .stop-title { color: #000 !important; }
    .pc-steps { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5mm; margin-bottom: 8mm; }
    .step { break-inside: avoid; }
    .step-art { height: 34mm; flex: none; background: #fff !important; border-bottom: 1px solid #000; }
    .step-art svg * { stroke: #000 !important; }
    .step-art svg text { fill: #000 !important; stroke: none !important; }
    .step-badge { background: #000 !important; color: #fff !important; box-shadow: none; }
    .check { border: 1px solid #000 !important; background: #fff !important; }
    .check .box { border-color: #000 !important; }
    .pc-stop .stop-item, .pc-stop .stop-title { display: flex !important; border-color: #000 !important; background: #fff !important; }
}

/* --- פרוטוקול של 5 שלבים (הדבקה) — צפוף יותר במחשב --- */
@media (min-width: 901px) {
    .pc-steps.n5 { gap: 1vw; }
    .pc-steps.n5 .step-body { padding: 12px 12px 14px; gap: 8px; }
    .pc-steps.n5 .step-body li { font-size: clamp(0.78rem, 1.6vh, 0.9rem); }
    .pc-steps.n5 .check { font-size: clamp(0.76rem, 1.55vh, 0.86rem); padding: 8px 10px; }
    .pc-steps.n5 .step-badge { width: 36px; height: 36px; font-size: 1.05rem; }
}

/* --- כפתור «להעמקה ⇐ המאמר» ליד ההדפסה (21.10) --- */
.master-footer .ftr-center { gap: 10px; }
@media (max-width: 480px) { .master-footer .ftr-center .btn-pill { padding: 0 12px; font-size: .82rem; } }
@media print { .master-footer { display: none !important; } }