/* css/crowd.css — דירוגי הקהל, בתוך כרטיס השחקן.
   נשאר בפלטה הכהה של האפליקציה. משטח לבן כאן נקרא כתקלת רינדור, לא כהדגשה —
   זה נאמר בפרויקט הזה שלוש פעמים.

   ולכן הכל כאן בטוקנים ולא בהקסים. הכרטיס המארח צבוע ב-var(--panel), ו-js/theme.js
   הופך אותו ללבן במצב בהיר ומחליף את var(--accent) לפי המועדון. ווידג'ט שכתוב
   בהקסים קבועים לא היה משתתף באף אחד משני הדברים: במצב בהיר הוא היה אי כהה בתוך
   כרטיס לבן, עם שדה טקסט כמעט שחור וטקסט אפור על לבן מתחת לסף הקריאות — כלומר
   בדיוק ה"חרא הלבן" מהצד השני, ובזהב שהמצב הבהיר כבר מסמן כבלתי קריא. */

/* nowrap במכוון. עם flex-wrap הכפתור נופל לשורה משלו ונשאר נטוש בקצה ברגע
   שהטקסט מתארך — וזה קורה בדיוק למי שכבר הצביע, כלומר במצב הרגיל ברגע שיש
   לפיצ'ר משתמשים. נמדד בדפדפן, לא נוחש: ב-390px הכפתור ירד שורה גם אחרי
   שהטקסט נעטף ב-span. בלי wrap הטקסט חייב להתכווץ ולגלוש בתוך עצמו, וזה מה
   שצריך לקרות. */
.crowd-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: 12px; color: var(--dim); line-height: 1.7;
}
/* הטקסט הוא פריט flex אחד שמותר לו להתכווץ, כך שהגלישה קורית בתוך המשפט
   ולא בינו לבין הכפתור. בלי זה "אתה 86 · " שנוסף למי שכבר הצביע דוחף את
   הכפתור לשורה משלו, נטוש. */
.crowd-sum { flex: 1 1 auto; min-width: 0; }
.crowd-n   { opacity: .65; }
.crowd-you { color: var(--text); font-weight: 600; }
/* התגית מוסיפה הערה למספר, אז היא לא יכולה לצעוק חזק ממנו. */
.crowd-tag { color: var(--dim); }

.crowd-open {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 12px; font: inherit; font-size: 11px; cursor: pointer;
}
.crowd-open:hover { background: var(--hover); color: var(--text); }

/* css/style.css נותן לכל button מינימום 44px גובה מתחת ל-700px — נכון, זה
   גודל מטרה למגע. אבל pill ברוחב 41px וגובה 44px הוא עיגול שהטקסט נמחץ
   מתוכו, וכך הכפתור הזה נראה בפועל על כל טלפון: עיגול אפור ריק שנקרא
   כאווטאר שבור. הריפוי הוא לתת לו רוחב, לא להילחם במינימום. */
@media (max-width: 700px) {
  .crowd-open { padding-inline: 18px; }
}

.crowd-panel { display: flex; flex-direction: column; gap: 8px; }

.crowd-dial-row { display: flex; align-items: center; gap: 10px; }

/* הפס מצויר כאן ולא מושאר לדפדפן.
   הניסיון הראשון היה accent-color בלבד, והפס הלא-מלא יצא rgb(59,59,59) —
   כמעט שחור — גם על כרטיס לבן. גם color-scheme על הפקד לא הזיז אותו: Chrome
   מתעלם ממנו לטובת ניטרלי קבוע ברגע ש-accent-color מוגדר. נמדד בפיקסלים,
   לא נוחש. הדרך היחידה שהפס באמת מציית לערכת הצבעים היא לצבוע אותו בעצמנו.

   אין מילוי מצטבר, וזו ויתור מודע: מילוי דורש gradient שמתעדכן מ-JS, והמספר
   הגדול שליד החוגה כבר אומר את אותו דבר במדויק. */
.crowd-dial {
  flex: 1; min-width: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; height: 18px; cursor: pointer;
}
.crowd-dial::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--surface2);
  border: 1px solid var(--border);
}
.crowd-dial::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: none; margin-top: -6px;
}
.crowd-dial::-moz-range-track {
  height: 5px; border-radius: 999px; background: var(--surface2);
  border: 1px solid var(--border);
}
.crowd-dial::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: none;
}
.crowd-dial:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text); outline-offset: 2px; }
.crowd-dial:focus-visible::-moz-range-thumb     { outline: 2px solid var(--text); outline-offset: 2px; }
.crowd-val {
  min-width: 34px; text-align: center;
  font-weight: 700; font-size: 15px; color: var(--accent);
}
.crowd-dial-note { font-size: 11px; color: var(--dim); }

.crowd-shelf { display: flex; flex-wrap: wrap; gap: 4px; }
.crowd-chip {
  background: var(--surface); color: var(--dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 8px; font: inherit; font-size: 11px; cursor: pointer;
}
.crowd-chip:hover { border-color: var(--dim); color: var(--text); }
/* התגית הנבחרת מסומנת במסגרת ובדיו, לא במילוי זהב כהה: מילוי קבוע היה נשאר
   כהה גם כשהכרטיס מסביבו לבן. */
.crowd-chip.on {
  background: var(--surface2); border-color: var(--accent); color: var(--accent);
}

.crowd-note-row { display: flex; gap: 6px; }
.crowd-note {
  flex: 1; min-width: 0;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 12px;
}
.crowd-note:disabled { opacity: .6; }
.crowd-note-send, .crowd-done {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.crowd-note-send:disabled, .crowd-done:disabled { opacity: .55; cursor: default; }
.crowd-done { align-self: flex-start; border-color: var(--accent); color: var(--accent); }
.crowd-note-hint { font-size: 11px; color: var(--dim); }

/* השורות שהבעלים אישר. הן ציטוט של אדם, ולכן נטויות ושקטות — הן לא מתחרות
   בשורת הדירוג שמעליהן. */
.crowd-notes { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.crowd-note-row-r {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--dim); font-style: italic;
}
/* הדגל שקט בכוונה: הוא צריך להיות שם למי שמחפש אותו, לא להזמין לחיצות. */
.crowd-report {
  flex: 0 0 auto; margin-inline-start: auto;
  background: none; border: none; padding: 0 2px;
  color: var(--dim); opacity: .45; font-size: 11px; cursor: pointer;
  line-height: 1; font-style: normal;
}
.crowd-report:hover:not(:disabled) { opacity: 1; color: var(--accent); }
.crowd-report:disabled { opacity: .7; cursor: default; }

/* ═══ ארבעת הרמזים ═════════════════════════════════════════════════════════
   js/crowd-nudges.js מסביר מה כל אחד עושה ומתי הוא נעלם. כאן רק איך הם נראים,
   ובאותם טוקנים כמו כל השאר: --accent הוא #FFD700 כהה ו-#b8860b בהיר, ורק דרכו
   התג הזהוב נשאר קריא בשני המצבים. */

/* 1. "חדש" בתוך כפתור הדירוג, עד ההצבעה הראשונה.
   זה אותו תג שקריירה קיבלה (.label-new ב-css/style.css) — מילוי זהב, דיו כהה,
   9px במשקל 900 — ובכוונה לא המצאנו שפה שנייה לאותה הודעה.
   ההבדל היחיד הוא הפעימה: .label-new פועם כי הוא יושב במסך עמוס בצ'יפים ובלי
   תנועה הוא נבלע. כאן הוא יושב בכרטיס שנפתח רק במכוון, בשורה אחת ולידה כפתור
   אחד — פעימה כאן היא רעש, לא הדגשה. */
.crowd-new {
  display: inline-block;
  margin-inline-start: 5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .4px;
  line-height: 1.5;
  vertical-align: middle;
}

/* ‎.crowd-open מקבל מתחת ל-700px ריפוד רוחבי של 18px, כדי שלא ייראה כעיגול אפור
   ריק. עם התג בפנים הרוחב הזה כבר מיותר — ‎.crowd-line הוא nowrap, וכפתור רחב
   מדי חותך את המשפט שלצידו. התג עצמו נותן את הרוחב. */
@media (max-width: 700px) {
  .crowd-open-new { padding-inline: 10px; }
}

/* 3. הנקודה על 👥 שחקנים. הצורה של ‎.wn-dot ("מה חדש"), בזהב של הערכה במקום
   באדום קבוע — אדום כאן הוא התראה, וזה לא. */
.crowd-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-inline-start: 5px;
  vertical-align: 3px;
}

/* 2 ו-4. שורת הרמז. קו זהב על הקצה המוביל (ב-RTL זה הימני) במקום מילוי צבעוני:
   מילוי היה מושך את העין חזק מהתוכן שהוא מצביע עליו. */
.crowd-tip {
  margin: 6px 0;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 2px solid var(--accent);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--dim);
}
.crowd-tip b { color: var(--text); font-weight: 700; }

/* הרמז של מסך התוצאות יושב בראש פאנל המגרש, ולכן הוא רצועה ולא כרטיס מרחף:
   בדסקטופ הפאנל הזה צבוע ברקע אצטדיון כהה קבוע (css/style.css) שלא מתחלף במצב
   בהיר, וכרטיס מעוגל עם שוליים היה נראה שם כמו פתק שנשכח. רצועה עם קו תחתון היא
   בדיוק מה ש-.progress-bar-wrap עושה בראש אותו פאנל במסך הדראפט. */
.crowd-tip-xi {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.crowd-tip-xi .cn-t { display: block; }

/* הגרסה הנכונה לכל מכשיר. אותה שאילתה בדיוק שמדליקה את כפתור ה-ⓘ ב-
   css/style.css — שתיהן חייבות לומר את אותו דבר על אותו מכשיר. */
.cn-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .cn-hover { display: none; }
  .cn-touch { display: inline; }
}

/* הקישור יושב מחוץ ל-.crowd-body ולכן שורד כל רינדור מחדש של הווידג'ט. */
.crowd-full {
  display: inline-block; margin-top: 6px;
  font-size: 11px; color: var(--dim); text-decoration: none;
}
.crowd-full:hover { color: var(--accent); }

/* ═══ הצעת צמדים ═══════════════════════════════════════════════════════════
   יושב בתוך סקשן "צמדים" שכבר קיים בכרטיס, ולכן שקט יותר מווידג'ט הדירוג:
   הוא תוספת לרשימה שכבר שם, לא כותרת משלו. */
.cd-wrap { margin-top: 6px; }
.cd-open {
  background: none; border: 1px dashed var(--border); border-radius: 999px;
  color: var(--dim); padding: 2px 10px;
  font: inherit; font-size: 11px; cursor: pointer;
}
.cd-open:hover { border-color: var(--accent); color: var(--accent); }
.cd-note { font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.cd-shelf { display: flex; flex-wrap: wrap; gap: 4px; }
.cd-chip {
  background: var(--surface); color: var(--dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 8px; font: inherit; font-size: 11px; cursor: pointer;
}
.cd-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
/* הוצע כבר — נשאר על המסך כדי שלא תציע שוב, ושקט כדי שלא יתחרה בשאר. */
.cd-chip.done { border-color: var(--accent); color: var(--accent); opacity: .6; cursor: default; }
.cd-chip:disabled { cursor: default; }

/* חיפוש והורדה בפאנל הצמדים */
.cd-search-row { margin-top: 6px; }
.cd-q {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 12px;
}
.cd-results:not(:empty) { margin-top: 4px; }
.cd-drop-note { margin-top: 8px; }
/* הצעה להוריד היא הצעה נגדית, ולכן היא לא נראית כמו הצעה. אותו גודל וצורה,
   דיו אדמדם ומסגרת מקווקוות — כדי שלא יילחץ בטעות במקום להוסיף. */
.cd-chip.drop { border-style: dashed; }
.cd-chip.drop:hover:not(:disabled) { border-color: #f85149; color: #f85149; }
.cd-chip.drop.done { border-color: #f85149; color: #f85149; }

/* צמדי הקהל בכרטיס. מוצגים בכל מוד ומשפיעים רק במוד הקהל, אז הם צריכים
   להיראות כמו קבוצה משלהם ולא כמו עוד צמדים רגילים. */
.pc-duos-crowd { margin-top: 4px; }
.pc-duo-crowd { border-style: dashed !important; }
/* צמד שהקהל אמר שהוא שגוי — מסומן, לא מועלם. במשחק הרגיל הוא עדיין נספר. */
.pc-duo-off { opacity: .5; text-decoration: line-through; }

/* צמדי הקהל שאושרו — נשלפים חי מהמסד, לא מחכים לבנייה. */
.cd-approved:not(:empty) { margin-bottom: 8px; }
.cd-approved-t { margin-bottom: 4px; }
.cd-chip-on, .cd-chip-off {
  border-style: dashed; cursor: default;
}
.cd-chip-on  { border-color: var(--accent); color: var(--accent); }
.cd-chip-off { opacity: .55; text-decoration: line-through; }

/* רמז אחד, רק לשחקן שאף אחד לא נגע בו — כלומר בדיוק מי שצריך את ההזמנה.
   "דרג" הבטיח מספר, והתגיות שמאחורי הכפתור היו בלתי נראות בלי ללחוץ. */
.crowd-hint { display: block; font-size: 10.5px; color: var(--dim); opacity: .8; margin-top: 2px; }
.crowd-shelf-t { margin-top: 2px; }

/* המתג בין עונה לשיא. שני מספרים שונים, ולכן שתי הצבעות נפרדות — לא שני
   מצבי תצוגה של אותו דבר. */
.crowd-switch { display: flex; gap: 4px; }
.crowd-sw {
  flex: 1 1 0; min-width: 0;
  background: var(--surface); color: var(--dim);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; font: inherit; font-size: 11px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crowd-sw.on { border-color: var(--accent); color: var(--accent); }
.crowd-sw:disabled { opacity: .5; cursor: default; }

/* שש התכונות. שורה לכל אחת, שם ומספר משני צידי הסליידר, כדי שאפשר יהיה
   לסרוק את כולן בבת אחת במקום לקרוא שש שורות נפרדות. */
.crowd-attr-row { display: flex; align-items: center; gap: 8px; }
.crowd-attr-l { flex: 0 0 52px; font-size: 11px; color: var(--dim); }
.crowd-attr-d { flex: 1 1 auto; min-width: 0; }
.crowd-attr-hint { font-size: 11px; color: var(--dim); }