/* components.css: רכיבים לשימוש חוזר */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.card.clickable{display:block;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.card.clickable{width:100%;text-align:inherit}
.card-action-title{display:block;font-size:1.4rem;font-weight:700;line-height:1.25}
.card-action-copy{display:block;margin:8px 0;font-size:.9rem;color:var(--text-2);font-weight:400;line-height:1.6}
/* בלי הרמה של הכרטיס: תזוזה בכל ריחוף היא סימן היכר של תבנית מוכנה.
   מסמנים בקו דק וברקע, כמו שורה נבחרת בטופס. */
.card.clickable:hover{border-color:var(--primary);background:var(--surface-2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;border-radius:var(--radius-btn);font-weight:700;font-size:.95rem;
  border:1px solid transparent;
  transition:transform .12s,box-shadow .15s,background .15s,opacity .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-strong)}
.btn-outline{border-color:var(--rule);color:var(--text);background:var(--surface)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost{color:var(--text-2)} .btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-success{background:var(--accent);color:#fff}
.btn-lg{padding:13px 28px;font-size:1.04rem}
.btn-sm{padding:6px 12px;font-size:.84rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* כותרת תחתונה */
.app-footer{margin-top:56px;border-top:1px solid var(--border);background:var(--surface);
  padding:22px 0 90px;font-size:.86rem;color:var(--text-3)}
.app-footer .container{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.app-footer .foot-brand{font-weight:700;color:var(--text-2)}
.app-footer nav{display:flex;gap:18px;flex-wrap:wrap}
.app-footer nav a{color:var(--text-2)}
.app-footer nav a:hover{color:var(--primary)}
@media (min-width:900px){ .app-footer{padding-bottom:22px} }

/* פס אזהרה על אחסון שאינו נשמר */
.storage-warn{background:#7c2d12;color:#fff;padding:9px 16px;font-size:.88rem;text-align:center;line-height:1.6}
.storage-warn a{color:#fff;text-decoration:underline;white-space:nowrap}

/* ===== "ספרו לנו" בסרגל העליון =====
   הדבר היחיד בסרגל שצבוע. הוא לא צריך להיות רועש, רק להיות מה שהעין
   נעצרת עליו כשהיא סורקת את השורה. */
.nav-cta{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;flex:none;
  background:var(--primary-soft);color:var(--primary);border-radius:999px;
  font-size:.85rem;font-weight:700;white-space:nowrap;
  transition:background .15s,color .15s;
}
.nav-cta:hover,.nav-cta.active{background:var(--primary);color:#fff}
@media(max-width:520px){ .cta-label{display:none} .nav-cta{padding:0 9px} }

/* מצב הסנכרון בסרגל העליון */
.account-btn{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;
  border-radius:999px;font-size:.82rem;font-weight:600;white-space:nowrap;
  border:1px solid var(--border);color:var(--text-2);background:transparent;
  transition:border-color .15s,color .15s;
}
.account-btn:hover{border-color:var(--primary);color:var(--text)}
.account-btn.signed{border-color:var(--good);color:var(--good)}
@media(max-width:900px){ .account-label{display:none} .account-btn{padding:0 9px} }

/* ===== תיבת ההתחברות =====
   שתי שורות טקסט ושדה אחד. כל מה שגדול מזה נקרא כטופס הרשמה, ומי שרצה
   רק לתרגל עוזב במקום למלא. */
.auth-box{
  background:var(--primary-soft);border:1px solid var(--primary-line);
  border-radius:var(--radius);padding:15px 17px;margin-bottom:20px;text-align:start;
}
.auth-box .auth-text b{display:block;font-size:1rem}
.auth-box .auth-sub{display:block;font-size:.87rem;color:var(--text-2);margin-top:3px;line-height:1.55}
.auth-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.auth-mail{display:flex;gap:8px;flex:1;min-width:230px}
.auth-mail input{
  flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font-family:inherit;font-size:.92rem;
}
.auth-mail input:focus{outline:none;border-color:var(--primary)}
.auth-or{font-size:.83rem;color:var(--text-3)}
.btn-google{
  background:var(--surface);color:var(--text);border:1.5px solid var(--border);
  display:flex;align-items:center;gap:8px;font-weight:600;
}
.btn-google:hover{border-color:var(--text-3)}
.btn-google .g-mark{
  font-weight:800;font-family:Arial,sans-serif;
  background:conic-gradient(from -45deg,#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.05rem;
}
.auth-msg{font-size:.86rem;color:var(--text-2);margin-top:9px;line-height:1.55}
.auth-msg:empty{display:none}
.auth-msg.ok{color:var(--good)}
.auth-msg.bad{color:var(--danger)}
.auth-box.signed{
  display:flex;align-items:center;gap:11px;
  background:transparent;border-color:var(--good);
}
.auth-box.signed .auth-text{flex:1}
.auth-box.signed .auth-tick{
  width:24px;height:24px;border-radius:50%;background:var(--good);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;
}

/* שורת התזכורת בדשבורד. שורה, לא כרטיס. */
.sync-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:8px 12px;margin-bottom:20px;font-size:.87rem;color:var(--text-2);
}
.sync-strip a{color:var(--primary);font-weight:600}
.sync-strip button{
  margin-inline-start:auto;color:var(--text-3);font-size:.85rem;
  min-width:32px;min-height:32px;border-radius:8px;
}
.sync-strip button:hover{color:var(--text)}

/* מסך החשבון */
.acct-line{font-size:.9rem;color:var(--text-2);margin-bottom:20px}
.acct-tools{border-top:1px solid var(--border);padding-top:14px}
.acct-tools summary{cursor:pointer;font-size:.88rem;color:var(--text-3);font-weight:600}
.acct-tools summary:hover{color:var(--text-2)}

/* ===== הודעת המשוב שקופצת בסוף מבחן =====
   מעוגנת לתחתית המסך ולא במרכזו: היא מבקשת ולא עוצרת, ואפשר להמשיך לקרוא
   את הדוח בזמן שהיא פתוחה. בנייד היא יושבת מעל סרגל הניווט התחתון. */
.fb-pop{
  position:fixed;z-index:70;inset-inline-end:22px;bottom:22px;width:min(340px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(0,0,0,.17);padding:16px 18px 15px;
  animation:fbPopIn .32s cubic-bezier(.2,.9,.3,1.2);
}
.fb-pop.leaving{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
.fb-pop b{font-size:1.02rem}
.fb-pop p{font-size:.87rem;color:var(--text-2);margin-top:3px;line-height:1.6}
.fb-pop-x{
  position:absolute;inset-inline-start:8px;top:8px;width:28px;height:28px;border-radius:8px;
  color:var(--text-3);font-size:.85rem;display:flex;align-items:center;justify-content:center;
}
.fb-pop-x:hover{background:var(--surface-2);color:var(--text)}
.fb-pop-chips{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.fb-pop-chip{
  text-align:start;padding:9px 12px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);font-size:.88rem;font-weight:600;color:var(--text);
  transition:border-color .15s,background .15s;
}
.fb-pop-chip:hover{border-color:var(--primary);background:var(--primary-soft)}
@keyframes fbPopIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  .fb-pop{inset-inline:12px;width:auto;bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion: reduce){ .fb-pop{animation:none} }

/* בדיקת חיבור לשרת */
.chk-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.chk-row:last-child{border-bottom:none}
.chk-mark{flex:none;padding-top:3px}
.chk-dot{display:inline-block;width:14px;height:14px;border-radius:50%}
.chk-dot.pending{background:var(--border)}
.chk-dot.ok{background:var(--good)}
.chk-dot.bad{background:var(--danger)}
.chk-body{flex:1;min-width:0}
.chk-body b{font-size:.95rem}
.chk-msg{font-size:.88rem;color:var(--text-2);margin-top:3px;line-height:1.7}
.chk-msg code{font-family:monospace;font-size:.85rem;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.setup-kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:.9rem;flex-wrap:wrap}
.setup-kv span{color:var(--text-2)}
.setup-kv code{font-family:monospace;font-size:.85rem;background:var(--surface-2);padding:2px 7px;border-radius:6px;
  word-break:break-all}

/* טופס משוב */
.fb-field{margin-bottom:14px}
.fb-field label{display:block;font-weight:600;font-size:.93rem;margin-bottom:6px}
.fb-field textarea,.fb-field input[type="text"]{width:100%;padding:10px 12px;border:1.5px solid var(--border);
  border-radius:10px;background:var(--surface-2);color:var(--text);font-family:inherit;font-size:.94rem;
  line-height:1.6;resize:vertical}
.fb-field textarea:focus,.fb-field input:focus{outline:none;border-color:var(--primary)}
/* השדה שהגיעו אליו מההודעה שבסוף המבחן, כדי שיהיה ברור איפה לכתוב */
.fb-field-focus textarea{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.fb-check{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;color:var(--text-2);cursor:pointer}
.fb-preview{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px;
  font-family:inherit;font-size:.9rem;white-space:pre-wrap;line-height:1.7;max-height:280px;overflow:auto}

/* אזור מתקדם. הכול בפנים מקבל ברירת מחדל טובה, ולכן הוא סגור כברירת מחדל
   ואינו מופיע כרעש על המסך. */
.adv-box{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:18px}
.adv-box > summary{padding:13px 18px;cursor:pointer;font-weight:600;font-size:.94rem;color:var(--text-2);
  list-style:none;display:flex;align-items:center;gap:8px}
.adv-box > summary::-webkit-details-marker{display:none}
.adv-box > summary::before{content:'▸';font-size:.8rem;transition:transform .15s}
.adv-box[open] > summary::before{transform:rotate(-90deg)}
.adv-box > summary:hover{color:var(--text)}
.adv-body{padding:4px 18px 18px}
.adv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--border)}
.adv-row:last-of-type{border-bottom:none}
.adv-row label{font-size:.93rem;font-weight:600}
.adv-select{padding:8px 11px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface-2);
  color:var(--text);font-family:inherit;font-size:.9rem;min-width:190px}
.adv-topics{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.adv-topics-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;
  font-size:.93rem;font-weight:600}

/* מחשבון צף. נשאר מעל התוכן כדי שאפשר יהיה לקרוא את השאלה ולחשב במקביל,
   ונצמד לפינה כדי שלא יסתיר את אפשרויות התשובה. */
.calc-panel{position:fixed;inset-inline-start:16px;inset-block-end:16px;z-index:60;width:236px;
  background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);padding:10px;direction:rtl}
.calc-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.9rem;margin-bottom:8px}
.calc-close{background:none;border:none;cursor:pointer;color:var(--text-2);font-size:1rem;padding:2px 6px;border-radius:6px}
.calc-close:hover{background:var(--surface-2)}
.calc-display{width:100%;padding:9px 10px;border:1.5px solid var(--border);border-radius:9px;
  background:var(--surface-2);color:var(--text);font-family:monospace;font-size:1.05rem;text-align:left;margin-bottom:8px}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.calc-key{padding:9px 0;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);
  color:var(--text);font-size:1rem;font-family:inherit;cursor:pointer}
.calc-key:hover{background:var(--border)}
.calc-key.calc-op{color:var(--primary);font-weight:700}
.calc-key.calc-eq{background:var(--primary);color:#fff;border-color:transparent;font-weight:700}
.calc-hint{margin-top:7px;font-size:.74rem;color:var(--text-3);text-align:center}
@media (max-width:640px){ .calc-panel{width:calc(100% - 32px)} }

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.chip.primary{background:var(--primary-soft);color:var(--primary);border-color:transparent}
.chip.good{background:rgba(31,107,61,.10);color:var(--good);border-color:transparent}
.chip.bad{background:rgba(155,44,44,.09);color:var(--bad);border-color:transparent}
.chip.warn{background:var(--signal-soft);color:var(--signal);border-color:transparent}

.progress-track{height:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--primary);transition:width .45s cubic-bezier(.4,0,.2,1)}
.progress-fill.good{background:var(--good)}
.progress-fill.warn{background:var(--signal)}
.progress-fill.bad{background:var(--bad)}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;text-align:start}
.stat-tile .stat-value{font-size:1.6rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-tile .stat-label{font-size:.76rem;color:var(--text-3);margin-top:3px;letter-spacing:.02em}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

.modal-backdrop{position:fixed;inset:0;background:rgba(21,24,28,.5);backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:var(--surface);border-radius:var(--radius);border:1px solid var(--rule);max-width:520px;width:100%;padding:26px;box-shadow:var(--shadow-lg);max-height:88vh;overflow-y:auto}

.spinner{width:38px;height:38px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}

.toast-wrap{position:fixed;bottom:20px;inset-inline-start:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--surface);border:1px solid var(--border);border-inline-start:4px solid var(--primary);border-radius:11px;padding:12px 18px;box-shadow:var(--shadow-lg);font-weight:600;animation:slideUp .3s}
.toast.success{border-inline-start-color:var(--accent)}
.toast.achievement{border-inline-start-color:var(--warning)}

.empty-state{text-align:center;padding:50px 20px;color:var(--text-2)}
.empty-state .big{font-size:3rem;margin-bottom:10px}

.data-table{width:100%;font-size:.92rem}
.data-table th{background:var(--surface-2);padding:8px 12px;border:1px solid var(--border);font-weight:700}
.data-table td{padding:8px 12px;border:1px solid var(--border)}

.ring-wrap{position:relative;width:120px;height:120px;margin:0 auto}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem}
.ring-label small{font-size:.7rem;color:var(--text-2);font-weight:600}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}
.section-title h2{display:flex;align-items:center;gap:10px}

.badge-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);text-align:center}
.badge-item .badge-icon{font-size:2.1rem;filter:grayscale(1);opacity:.35}
.badge-item.earned .badge-icon{filter:none;opacity:1}
.badge-item.earned{border-color:var(--signal);background:var(--signal-soft)}
.badge-item .badge-name{font-weight:700;font-size:.85rem}
.badge-item .badge-desc{font-size:.72rem;color:var(--text-2)}

/* ===== שכבת ההדרכה: תדריכים, כללי עבודה והמלצות אישיות ===== */
.guide-list{margin:0;padding-inline-start:20px;color:var(--text-2);font-size:.93rem}
.guide-list li{margin-bottom:7px;line-height:1.65}
.guide-list li::marker{color:var(--primary)}
/* פס עליון דק במקום מסילת אקסנט בצד: פחות תבנית, יותר טופס. */
.briefing-card{box-shadow:inset 0 2px 0 var(--primary);background:var(--surface)}
.advice-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--border)}
.advice-row:last-child{border-bottom:none}
.advice-icon{font-size:1.35rem;line-height:1.2}
.explain-sec.check{background:rgba(6,182,212,.1);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text)}
.explain-sec.rule{background:rgba(124,58,237,.1);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text)}
.explain-sec.solution{background:rgba(16,185,129,.12);border-inline-start:3px solid var(--accent);border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);font-weight:500}
.level-card{border-inline-start:4px solid var(--text-3)}
.level-card.good{border-inline-start-color:var(--accent)}
.level-card.warn{border-inline-start-color:var(--warning)}
/* מילות שלילה בשאלה, מודגשות כדי למנוע בחירת תשובה תקפה בשאלה הפוכה */
.q-text .neg{color:var(--bad);font-weight:800;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* פריטי גריד מקבלים כברירת מחדל min-width:auto, ולכן תוכן רחב (קנבס של גרף)
   מותח את התא מעבר למסך. אפס מונע גלישה אופקית בנייד. */
.grid-2 > *, .grid-3 > *{min-width:0}
.chart-card canvas{max-width:100%}

/* ===== חלון השיטה =====
   מוצג רק כשטועים. פסקה אחת שקוראים ברצף, בלי לפזר את העין על ארבעה בלוקים. */
.method-box{
  border:1px solid var(--primary);border-radius:var(--radius);
  background:var(--primary-soft);padding:16px 18px;
}
.method-box .eyebrow{color:var(--primary)}
.method-text{color:var(--text);font-size:1.02rem;line-height:1.75;margin:0}
.method-why,.method-yours{
  font-size:.92rem;color:var(--text-2);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--border);
}
.method-yours b{color:var(--bad)}
.method-video{font-size:.88rem;margin-top:10px}
.method-video a{font-weight:600}

.explain-more{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.explain-more summary{
  cursor:pointer;font-size:.9rem;font-weight:600;color:var(--text-2);
  list-style:none;padding:2px 0;
}
.explain-more summary::-webkit-details-marker{display:none}
.explain-more summary::before{content:'+ ';color:var(--text-3)}
.explain-more[open] summary::before{content:'− '}
.explain-more summary:hover{color:var(--text)}
.explain-more-body{padding-top:8px;display:flex;flex-direction:column;gap:10px}
.explain-time{font-size:.85rem;color:var(--text-3);margin-top:12px}
/* מחוון מצב: נקודה צבועה במקום עיגול אימוג'י, כדי שהצבע יהיה חלק מהמערכת */
.status-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-inline-end:9px;vertical-align:middle;background:var(--text-3);
}
.status-dot.good{background:var(--good)}
.status-dot.warn{background:var(--signal)}
.status-dot.bad{background:var(--bad)}