/* ═══════════════════════════════════════════════════════════════════════
   ⚙️ «גרפיט» — מערכת-העיצוב של J-sheet (הכרעת-חיים 8.10.2026)

   הבקשה: «שתסדר את כל ה-UI של האפליקציה שתהיה קלאסית, הייטקית
   ואלגנטית, וכמובן הכל רק SVG». נבחר «א · גרפיט» מתוך שלושה כיוונים.
   מסמך: docs/graphite-design.md.

   שלוש החלטות שמחזיקות את הקובץ:
   1. **משטחים אטומים, לא זכוכית.** הזכוכית (טשטוש + שקיפות) עמדה מאחורי
      שלוש תקלות-קריאה שנמצאו ב-8.10: הפעמון, הסרגל-התחתון וכותרת-המסך —
      טשטוש מקונן לא מטשטש, ותוכן נקרא דרך השכבה.
   2. **צבע אחד — כחול.** כל מצב «פעיל/נבחר» בכחול; אדום רק לסכנה, צהוב
      רק לאזהרה ולאישור. אף פאנל צבעוני.
   3. **קו-שיער במקום צל.** היררכיה משלוש דרגות-משטח וקו 1px — בלי צללים,
      חוץ מחלון שצף מעל הדף.

   ⚠️ נטען **אחרון** (אחרי platform.css ו-glass.css) ומגדיר מחדש את
      המשתנים של שניהם — כל מה שכבר כתוב עם var() מתעדכן לבד.
   ⚠️ `!important` רק מול כללים ב-glass.css שכבר משתמשים בו; בלעדיו
      הכלל כאן פשוט לא היה חל (ראו «.mini-btn.armed» — 8.10.2026).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── הפלטה — המקור היחיד ── */
  --g-bg: #0a0c10;           /* רקע הדף */
  --g-bar: #0d1015;          /* סרגלים */
  --g-surface: #11151c;      /* כרטיס, שדה, חלון */
  --g-surface-2: #171c25;    /* מורם / ריחוף */
  --g-surface-3: #1f2531;    /* נבחר-שקט (מתג-שפה) */
  --g-line: #232937;         /* קו-שיער */
  --g-line-soft: #1a1f29;
  /* ניגודיות — **נמדדה** (WCAG, 8.10.2026), על הרקע · על כרטיס */
  --g-text: #e8eaf0;         /* 16.3:1 · 15.2:1 */
  --g-text-2: #a1aabb;       /*  8.4:1 ·  7.8:1 */
  /* ⚠️ (8.10.2026) היה #6f7890: 4.44 על הרקע, 4.15 על כרטיס, 3.88 על מורם —
     מתחת לסף 4.5 של טקסט רגיל (נמדד ב-79 מקומות, כולל תוויות הסרגל-התחתון). */
  --g-text-3: #838ca3;       /*  5.8:1 ·  5.4:1 · מורם 5.1 · נבחר-שקט 4.6 */
  /* ⚠️⚠️ הכחול של המוקאפ (#5b8cff) נתן ללבן עליו **3.2:1** — מתחת לסף
     4.5:1 של טקסט בגודל-כפתור. זה: לבן עליו 5.0:1, ומול הרקע 3.9:1
     (רכיב גרפי — סף 3:1). לטקסט כחול על הרקע — `--g-accent-ink`. */
  --g-accent: #3568e0;
  --g-accent-hover: #3a6ee8; /* לבן עליו 4.6:1 */
  --g-accent-soft: rgba(53, 104, 224, .16);
  --g-accent-ink: #9ab8ff;   /*  9.9:1 ·  9.3:1 */
  --g-on-accent: #ffffff;
  --g-danger: #ff6b6b;
  --g-warn: #f2c14e;
  --g-ok: #3ccf91;
  --g-r-sm: 9px;
  --g-r: 12px;
  --g-r-lg: 16px;
  --g-focus: 0 0 0 3px rgba(53, 104, 224, .45);

  /* ── מיפוי המשתנים של glass.css ── */
  --bg-deep: var(--g-bg);
  --bg-base: var(--g-bg);
  --bg-elev: var(--g-surface);
  --glass: var(--g-surface);
  --glass-strong: var(--g-surface);
  --hair: var(--g-line);
  --hair-soft: var(--g-line-soft);
  --fg: var(--g-text);
  --fg-dim: var(--g-text-2);
  --fg-faint: var(--g-text-3);
  --accent: var(--g-accent);
  --accent-soft: var(--g-accent-soft);
  --danger: var(--g-danger);
  --ok: var(--g-ok);
  --blur: none;
  --shadow-1: none;
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .5);
  --r-sm: var(--g-r-sm);
  --r: var(--g-r);
  --r-lg: var(--g-r-lg);

  /* ── ושל platform.css ── */
  --bg: var(--g-bg);
  --card: var(--g-surface);
  --card-edge: var(--g-line);
  --txt: var(--g-text);
  --dim: var(--g-text-2);
  --acc: var(--g-accent);
  --acc2: var(--g-accent-ink);
  --on-accent: var(--g-on-accent);
  --err: var(--g-danger);
  --grad: var(--g-accent);

  /* ── ושל אולפן-העיבוד ── ⚠️ (8.10.2026) `--line` ו-`--muted` לא הוגדרו
     **בשום מקום** מאז מיזוג האולפן: מסגרות האקורדים, שורות-הכלים ותיבות-הבחירה
     פשוט לא צוירו, והטקסט המשני ירש צבע רגיל. smoke בודק את זה מעכשיו. */
  --line: var(--g-line);
  --muted: var(--g-text-3);
}

/* ── רקע: אחיד. הגרדיאנט נראה כמו כתם בטלפון ── */
html, body { background: var(--g-bg) !important; }
body { background-attachment: scroll; }
::selection { background: rgba(53, 104, 224, .45); }
a { color: var(--g-accent-ink); }

/* ── סרגל עליון: אטום, קו-שיער ── */
.topbar {
  background: var(--g-bar);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--g-line);
}
.brand-name { letter-spacing: -.02em; }

/* ── כותרת-המסך: על הרקע, לא בפס נפרד ── */
.screenbar {
  background: var(--g-bg);
  border-bottom: 1px solid var(--g-line-soft);
  padding-block: 14px 12px;
}
.screen-title { color: var(--g-text); font-size: 1.42rem; font-weight: 700;
  letter-spacing: -.025em; }

/* ── סרגל תחתון: מלא לרוחב ואטום (לא צף ושקוף) ── */
.navbar {
  inset-inline: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--g-line) !important;
  background: var(--g-bar) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
.navbar .nb { height: 58px; border-radius: 0; color: var(--g-text-3); }
.navbar .nb.on { color: var(--g-accent-ink) !important; font-weight: 700; }
.navbar .nb.on::before {
  top: 0 !important; bottom: auto !important; inset-inline: 32% !important;
  height: 2px !important; border-radius: 0 0 2px 2px !important;
  background: var(--g-accent) !important;
}
.navbar .nb::after { inset: 4px 10px; border-radius: var(--g-r-sm); }
.navbar .nb:active::after { background: var(--g-surface-2); }
body.has-nav .page {
  padding-bottom: calc(58px + 24px + env(safe-area-inset-bottom, 0px));
}
.fab {
  bottom: calc(58px + 16px + env(safe-area-inset-bottom, 0px));
  background: var(--g-accent) !important;
  color: var(--g-on-accent) !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45) !important;
}

/* ── כפתורים: ראשי (כחול מלא) · משני (קו) ── */
.btn-primary, .mini-join, .sed-post {
  background: var(--g-accent) !important;
  color: var(--g-on-accent) !important;
  border: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-primary:hover, .mini-join:hover, .sed-post:hover { background: var(--g-accent-hover) !important; }
.mini-btn {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  color: var(--g-text) !important;
  border-radius: var(--g-r-sm) !important;
}
.mini-btn:hover { background: var(--g-surface-2) !important; }
.mini-btn:active, .btn-primary:active, .mini-join:active { transform: scale(.98); }
.mini-btn:focus-visible, .btn-primary:focus-visible, .cat-chip:focus-visible,
.sc-filt:focus-visible, .fol-btn:focus-visible {
  outline: none; box-shadow: var(--g-focus) !important;
}

/* ── צ'יפים ומסננים: קו; הנבחר — כחול-רך ── */
.cat-chip, .sed-chip, .int-chip, .sc-filt {
  background: transparent !important;
  border: 1px solid var(--g-line) !important;
  color: var(--g-text-2) !important;
  border-radius: var(--g-r-sm) !important;
  font-weight: 500 !important;
}
.cat-chip.sel, .cat-chip.on, .sed-chip.on, .int-chip.on, .sc-filt.on {
  background: var(--g-accent-soft) !important;
  border-color: var(--g-accent) !important;
  color: var(--g-accent-ink) !important;
  font-weight: 600 !important;
}

/* ── שדות ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
textarea, select, .sed-in, .search-inp {
  background: var(--g-surface) !important;
  border: 1px solid var(--g-line) !important;
  color: var(--g-text) !important;
  border-radius: var(--g-r-sm);
}
input::placeholder, textarea::placeholder { color: var(--g-text-3) !important; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus, select:focus, .sed-in:focus {
  outline: none;
  border-color: var(--g-accent) !important;
  box-shadow: var(--g-focus);
}
.sh-search input { border-radius: var(--g-r) !important; }

/* ── כרטיסים: משטח אחד, קו אחד, בלי צל ובלי זכוכית ── */
.card, .sc-card, .sh-tile, .sd-card, .cm-draft, .ar-album, .ar-stats,
.ar-tile, .sp-fmt, .glass {
  background: var(--g-surface);
  border-color: var(--g-line);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sh-person { background: transparent; border-color: transparent; }
.sh-tile:hover, .sc-card:hover { border-color: #2e3646; }

/* ── חלונות, תפריטים, הודעות: אטומים ── */
.sheet-body, .meta-sheet, .bell-panel, .menu-body, .st-menu, .sed-panel {
  background: var(--g-surface) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-color: var(--g-line) !important;
}
.meta-wrap { background: rgba(5, 6, 9, .78); }
.sheet-scrim { background: rgba(5, 6, 9, .6); }
.plat-toast {
  background: var(--g-surface-3) !important;
  border: 1px solid var(--g-line) !important;
  color: var(--g-text) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ── תגים ── */
.sp-badge { background: transparent; border: 1px solid var(--g-line); color: var(--g-text-2); }
.sp-badge.on { background: var(--g-accent-soft); border-color: transparent; color: var(--g-accent-ink); }

/* ── מתג-השפה: הנבחר — דרגת-משטח, לא צבע ── */
.lang-sw { border-color: var(--g-line); background: transparent; }

/* ── כותרות-משנה וקווים ── */
.sub-title { color: var(--g-text); font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.sp-table { border-top-color: var(--g-line); }
.sp-row { border-bottom-color: var(--g-line-soft); }
hr { border-color: var(--g-line); }

/* ═══════════════════════════════ שלב 2 — אחרי צילום כל המסכים ═══════════ */

/* ── אווטאר/סמל נבחר בפרופיל: צבע-מצב, לא אפור-לבן ── */
.icon-opt { background: var(--g-surface); border-color: var(--g-line); }
.icon-opt:hover { background: var(--g-surface-2); }
.icon-opt:has(input:checked), .icon-opt.on {
  background: var(--g-accent-soft); border-color: var(--g-accent); color: var(--g-accent-ink);
}

/* ── מתג-השפה: קטן ושקט — הוא לא הפעולה הראשית בסרגל ── */
.lang-sw { padding: 2px; gap: 0; background: transparent; }
.lang-seg { min-width: 34px; min-height: 32px; padding: 0 8px; font-size: .76rem; }
.lang-seg.on { background: var(--g-surface-3); color: var(--g-text); }

/* ── כיוון החצים: «חזרה» מצביע לתחילת-השורה, «קדימה» לסופה ──
   `i-back` מצויר ←, `i-arrow` מצויר →. בעברית **שניהם** מתהפכים.
   ⚠️ חוץ מבתוך `dir="ltr"` (שם-משתמש → שם-משתמש בכספים) — שם הכיוון לטיני.
   ⚠️ חץ «קדימה» = `i-arrow`, לעולם לא `i-back` «כי בעברית הוא מצביע נכון»:
      באנגלית הוא היה מצביע אחורה (כך היו לוח-הבקרה וכרטיס-ההצטרפות). */
html[dir=rtl] .ic:has(> use[href="#i-back"]):not([dir=ltr] *),
html[dir=rtl] .ic:has(> use[href="#i-arrow"]):not([dir=ltr] *) { transform: scaleX(-1); }

/* ── מסננים בקטלוג: שורה אחת נגללת, לא שלוש שורות צפופות ──
   ⚠️ רק בקטלוג; בטופס-ההעלאה (`.sc-upvocab`) הם נשברים לשורות — שם בוחרים. */
.sc-filters {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
  mask-image: linear-gradient(to left, #000 88%, transparent);
}
.sc-filters::-webkit-scrollbar { height: 0; }
.sc-filters .sc-filt { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; }

/* ═══════════════════════════════ שלב 3 — צבעים שנכתבו ישירות (לא דרך משתנה) ═══ */

/* ── מונה הפעמון: לבן על כחול (5.0:1). ⚠️ צבע-הרקע עליו נתן 3.9:1 ── */
.bell-badge { color: #ffffff !important; }

/* ── התראה שלא נקראה: דרגת-משטח ונקודה כחולה — לא רקע סגול ── */
.bell-item.unread { background: var(--g-surface-2) !important; }

/* ── כפתור-ההשמעה בכרטיס: ⚠️ `#08121a` נכתב לתכלת; על הכחול הוא כהה-על-כהה ── */
.sc-play { background: var(--g-accent-soft); border-color: var(--g-line); color: var(--g-accent-ink); }
.sc-play.on { background: var(--g-accent); color: #ffffff; }

/* ── לוח-הבקרה: הגרף והאריח הנבחר (היו `#0e9bb4`) ──
   ⚠️ הכחול-הרגיל ולא הבהיר: נמדד (OKLab) — הבהיר 0.79, כמו התכלת שנפסל
      כסימן-נתונים (0.80); הרגיל 0.55, וניגוד 3.67 מול הכרטיס (≥3 לגרפיקה). */
.dash-kpi.sel { border-color: var(--g-accent); }
.dash-area { fill: var(--g-accent); }
.dash-line { stroke: var(--g-accent); }
.dash-end { fill: var(--g-accent); }

/* ── «הצטרפו לצוות היוצרים» (היה גרדיאנט-תכלת) ── */
.wr-join { border-color: var(--g-accent); background: var(--g-accent-soft); }
.wr-join-ic { background: var(--g-accent-soft); color: var(--g-accent-ink); }

/* ── תיבת-מידע על קטינים (בטיחות) ── */
.minor-box { background: var(--g-accent-soft); border-color: rgba(53, 104, 224, .4); }

/* ═══════════════════════════════ שלב 4 — «בלי מלל, מיושר, תפריט נפתח» ═══
   בקשת-חיים 8.10.2026: «אני לא רוצה הרבה מלל ליד פונקציות … הכל מסודר
   בצורה מיושרת … מה שאפשר להכניס לתפריט נפתח — עדיף». */

/* ── ▾ תפריט נפתח (platDropdown ב-platform.js) ──
   ⚠️ `!important` מול `.cat-chip` של glass.css — הפריטים בתפריט הם עדיין
      אותם כפתורים, ובלי זה היו נראים כצ'יפים בתוך רשימה. */
.dd { position: relative; display: flex; justify-content: flex-start; margin-bottom: 12px; }
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px;
  padding-inline: 12px 10px; border-radius: var(--g-r-sm);
  border: 1px solid var(--g-line); background: var(--g-surface); color: var(--g-text);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.dd-btn:hover { background: var(--g-surface-2); }
.dd-btn:focus-visible { outline: none; box-shadow: var(--g-focus); }
.dd-btn .ic { width: 17px; height: 17px; color: var(--g-text-2); }
.dd-btn .dd-chev { width: 15px; height: 15px; color: var(--g-text-3); transition: transform .15s ease; }
.dd.open .dd-btn { border-color: var(--g-accent); }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd > .dd-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 45;
  display: none !important; flex-direction: column; flex-wrap: nowrap !important; gap: 2px;
  min-width: max(100%, 210px); max-width: min(320px, calc(100vw - 32px));
  max-height: 60dvh; overflow-y: auto; overflow-x: hidden;
  margin: 0 !important; padding: 6px !important;
  background: var(--g-surface) !important; border: 1px solid var(--g-line) !important;
  border-radius: var(--g-r) !important; box-shadow: var(--shadow-2) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.dd.open > .dd-menu { display: flex !important; }
.dd-menu > .dd-it {
  display: flex !important; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 12px !important; margin: 0 !important;
  border: 0 !important; border-radius: var(--g-r-sm) !important;
  background: transparent !important; color: var(--g-text) !important;
  font-size: .95rem !important; font-weight: 500 !important;
  text-align: start; text-decoration: none; white-space: nowrap;
}
.dd-menu > .dd-it:hover { background: var(--g-surface-2) !important; }
.dd-menu > .dd-it.sel, .dd-menu > .dd-it.on, .dd-menu > .dd-it[aria-current="page"] {
  background: var(--g-accent-soft) !important; color: var(--g-accent-ink) !important;
  font-weight: 600 !important;
}
.dd-ck { width: 16px; height: 16px; margin-inline-start: auto; color: var(--g-accent-ink); }

/* ── לשוניות: שורה אחת ברוחב מלא, חלקים שווים ──
   ⚠️ עד היום `.cat-row` לא היה מעוצב בכלל — כפתורים בשורה עם רווח-מילים
      ביניהם, ו«בקשה חדשה» קפצה לשורה שנייה **צמודה** ללשונית שמעליה. */
.seg {
  display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; padding: 4px; margin: 0 0 14px;
  border-radius: var(--g-r); background: var(--g-surface); border: 1px solid var(--g-line);
}
.seg > .cat-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; min-height: 40px; padding: 0 8px !important; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-decoration: none;
  border: 0 !important; border-radius: var(--g-r-sm) !important;
  background: transparent !important; color: var(--g-text-2) !important; font-weight: 500;
}
.seg > .cat-chip:hover { color: var(--g-text) !important; }
.seg > .cat-chip.sel, .seg > .cat-chip.on {
  background: var(--g-accent-soft) !important; color: var(--g-accent-ink) !important; font-weight: 600;
}

/* ═══════════════════════════════ שלב 4ב — מיושר ═══════════════════════════ */

/* ── כפתור: אייקון ומילה **באותה שורה** ──
   ⚠️ `.ic` הוא `display:block` (platform.css), ולכן בכפתור שאינו flex
      האייקון ישב **מעל** המילה: «שמירה», «גבה עכשיו», «מחיקת החשבון». */
.mini-btn, .mini-join, .btn-primary, .sed-post {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-decoration: none; line-height: 1.2; min-height: 40px;
}
.btn-primary { display: flex; width: 100%; min-height: 46px; }
.mini-btn > .ic, .mini-join > .ic, .btn-primary > .ic { width: 17px; height: 17px; }

/* ── «ראשי» גובר על «משני» ──
   ⚠️ `.mini-btn` בא **אחרי** `.mini-join` למעלה, באותה ספציפיות — ולכן כל
      «mini-btn mini-join» (שליחה · שמירה · שליחת הבקשה) יצא כהה ולא כחול. */
.mini-btn.mini-join {
  background: var(--g-accent) !important; color: var(--g-on-accent) !important;
  border: 0 !important; font-weight: 600 !important;
}
.mini-btn.mini-join:hover { background: var(--g-accent-hover) !important; }

/* ── פעולה הרסנית: אדום — מחיקה, ביטול ── */
.mini-btn.danger { color: var(--g-danger) !important; border-color: rgba(255, 107, 107, .38) !important; }
.mini-btn.danger:hover { background: rgba(255, 107, 107, .09) !important; }

/* ── שורת-פעולות: מאותו צד, עם מרווח מהטופס ── */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;
  align-items: center; margin-top: 14px; }

/* ── טפסים: מרווח אחד בין כל השדות, וכפתור-השליחה ברוחב מלא ── */
.cm-form { gap: 10px; }
.cm-form > button[type=submit] { width: 100%; min-height: 46px; margin-top: 4px; }
.cm-form .fld { margin: 0; }

/* ── כרטיס «הצטרפות»: ⚠️ <button> לא יורש צבע — הכותרת יצאה שחורה ── */
.wr-join { color: var(--g-text); }
.wr-join-txt { align-items: flex-start; }

/* ── הקטלוג: מיון ותצוגה בשורה אחת, מאותו צד ── */
.sc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sc-tools .dd, .sc-tools .sc-views { margin: 0; }
.dd { width: fit-content; max-width: 100%; }

/* ── דף-השיר: תווית קצרה על התצוגה («תצוגה חלקית») ── */
.sp-prevwrap { position: relative; }
.sp-prevtag {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border-radius: 999px; font-size: .76rem; font-weight: 600;
  background: rgba(10, 12, 16, .82); color: var(--g-text); border: 1px solid var(--g-line);
}
.sp-prevtag .ic { width: 13px; height: 13px; }

/* ── דף-השיר: שורת-ההורדה ──
   ⚠️⚠️ בטלפון `.fld-row` הופכת לעמודה, ו-`flex: 0 1 220px` של הבורר הפך
      ל-**גובה** 220px: חור ריק מתחת לבורר, והכל נצמד לצד השמאלי
      (`align-items:flex-end` בעמודה). עכשיו: בורר · חתימה · כפתור — זה מתחת לזה. */
.sp-dlrow .mini-btn { margin-inline-start: 0 !important; }
@media (max-width: 560px) {
  .sp-dlrow { align-items: stretch !important; gap: 10px; }
  .sp-dlrow .fld { flex: none !important; margin: 0; }
  .sp-dlrow .sc-sig { align-self: flex-start !important; margin: 0; }
  .sp-dlrow .mini-btn { width: 100%; min-height: 46px; }
}

/* ── טופס-ההעלאה: בוררי-הסיווג כשדות-בחירה בשתי עמודות, לא צ'יפים מפוזרים ── */
.sc-upvocab { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 10px; }
.sc-upvocab .sc-filt {
  display: flex; align-items: center; gap: 7px; width: 100%; min-height: 44px;
  padding: 0 12px !important; border-radius: var(--g-r-sm) !important; font-size: .9rem !important;
}
.sc-upvocab .sc-filt > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: start; }
.sc-upvocab .sc-filt > .ic:last-child { width: 15px; height: 15px; opacity: .55; }
.sc-upvocab .up-off, .sc-upvocab .sc-vocal { grid-column: 1 / -1; justify-self: start; }
.sc-uprow { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#scFileBtn { width: 100%; min-height: 46px; border-style: dashed !important; }

/* ── מערכת-הניהול: תפריט נפתח + «חזרה לאתר» באותו קו ── */
.adm-nav { padding-bottom: 12px; }
.adm-nav-head { align-items: center; gap: 8px; margin: 0; }
.adm-nav-head .dd { margin: 0; }
.adm-back { color: var(--g-text-2) !important; }

/* ═══════════════════════════════ שלב 4ג — שורות אחידות ════════════════════ */

/* ── ניהול-הסיווגים: שם ופרטים מימין, פעולות משמאל — **תמיד באותה שורה** ──
   ⚠️ עד היום שם ארוך («ליטאי-ישיבתי») שבר את הכפתורים לשורה שנייה, ושם
      קצר השאיר אותם צמודים — כל שורה נראתה אחרת. במצב-עריכה: כמו קודם. */
.as-comm:not(:has(.as-cname)) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name acts" "meta acts"; column-gap: 10px; row-gap: 2px;
}
.as-comm:not(:has(.as-cname)) > b { grid-area: name; }
.as-comm:not(:has(.as-cname)) > small { grid-area: meta; }
.as-comm:not(:has(.as-cname)) > .as-acts { grid-area: acts; margin: 0; }

/* ── אישור-יוצר: הערה ברוחב מלא, ומתחתיה «אישור» ו«דחייה» זה לצד זה ── */
.as-act { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-act .as-note { grid-column: 1 / -1; order: -1; min-height: 44px; font-size: 16px; }
.as-act .mini-btn { width: 100%; }

/* ── עמלה-לכל-אחד: השם בשורה משלו (הוא נחתך בקצה), הפקדים מתחתיו ── */
.fee-row { flex-wrap: wrap; }
.fee-who { flex: 1 0 100%; }

/* ── רשימת-מופע: שם-השיר והסולם **באותה שורה** גם בטלפון ── */
.sl-add .fld-row { flex-direction: row !important; gap: 8px; }
.sl-add .fld-row input[name=title] { flex: 1; min-width: 0; }
.sl-add .fld-row input[name=key] { flex: 0 0 96px; }
.sl-drop { margin-top: 12px; }

/* ── «חזרה» מעל כותרת — עם מרווח, לא צמוד לה ── */
.cm-back { margin-bottom: 12px; }

/* ── לשוניות במחשב: ברוחב התוכן, לא מתוחות על כל המסך ──
   ⚠️ שתי לשוניות ברוחב מלא במחשב = שתי מילים במרחק 391px זו מזו — בדיוק
      «זוג שנצמד לשני הקצוות» שהסריקה אוסרת (נמדד בעמוד-הכותבים, 1280px).
      בטלפון — ברוחב מלא, כמו כל פקד-מקטעים. */
@media (min-width: 561px) {
  .seg { width: fit-content; max-width: 100%; }
  .seg > .cat-chip { padding: 0 16px !important; }
}

/* ── קישור עם אייקון (לדף הבית · חזרה לכניסה): באותה שורה ── */
.auth-flip { display: inline-flex; align-items: center; gap: 6px; }
.auth-flip .ic { width: 17px; height: 17px; }

/* ── מגמה בלוח-הבקרה: חץ SVG (היה ▲▼ כתו) — למטה = אותו חץ, הפוך ── */
.d-up .ic, .d-down .ic { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }
.d-down .ic { transform: rotate(180deg); }

/* ── «הצטרפות ככותב»: כותרת, לא כרטיס ריק שכל תוכנו כותרת ── */
.wr-intro { background: none !important; border: 0 !important; padding: 0 !important;
  margin: 0 0 6px !important; box-shadow: none !important; }
.wr-intro .card-title { margin: 0; font-size: 1.15rem; }

/* ── עמלה-לכל-אחד: ארבעת הפקדים בשורה אחת מתחת לשם ── */
.fee-row .mini-btn { padding: 0 10px !important; min-height: 38px; }
.fee-in { width: 64px; }

/* ═══════════════════════════════ שלב 5 — מקצועי (סקירה 8.10.2026) ═════════ */

/* ── ניווט עליון: אייקון **ומילה** ──
   ⚠️ היה 44×44 אייקון בלבד. במחשב — זה לצד זה; בטאבלט (אין מקום לשש מילים
      בשורה) — המילה **מתחת** לאייקון, כמו בסרגל-התחתון של הטלפון. */
/* ⚠️ `.topnav .nav-ic` ולא `.nav-ic`: גם הפעמון ו«עוד» הם nav-ic, והמונה של
      הפעמון ירד מתחת לאייקון בטאבלט (נראה בצילום 900px). */
.topnav .nav-ic { width: auto; min-width: 44px; padding: 0 12px; gap: 7px; }
.topnav .nav-ic .nav-l { font-size: .86rem; font-weight: 500; white-space: nowrap; }
.topnav .nav-ic.on .nav-l { font-weight: 600; }
.topnav .nav-ic.on::after { inset-inline: 12px; bottom: 3px; }
.topnav .nav-ic .ic { width: 20px; height: 20px; }
@media (min-width: 761px) and (max-width: 1180px) {
  .topnav .nav-ic { flex-direction: column; gap: 2px; height: 52px; padding: 4px 9px; }
  .topnav .nav-ic .nav-l { font-size: .7rem; }
  .topnav .nav-ic.on::after { display: none; }
  .screenbar { top: 68px; }
}

/* ── יעדי-מגע ≥ 40px (נמדדו קטנים יותר) ── */
.brand { min-height: 44px; }
.lang-seg { min-width: 40px; min-height: 40px; }
.auth-flip { display: flex; justify-content: center; min-height: 44px; margin-top: 8px; }
.gt-web { display: inline-flex; align-items: center; min-height: 44px; }
.sl-ops button { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
.sl-item .sd-main a { display: block; padding-block: 8px; }
.sc-dl { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; }
.fee-in { height: 40px; }

/* ── דף-השגיאה: באמצע, אייקון · משפט · פעולה אחת ── */
.err-wrap { min-height: 60dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; }
.err-ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center;
  background: var(--g-surface); border: 1px solid var(--g-line); color: var(--g-accent-ink); }
.err-ic .ic { width: 34px; height: 34px; }
.err-title { margin: 0; font-size: 1.45rem; font-weight: 700; }
.err-home { width: auto !important; padding: 0 26px !important; }

/* ── במחשב: טפסים ודפי-פרטים ברוחב קריא, גלריות ברוחב מלא ──
   ⚠️ עד היום `.wrap` נמתח לכל 1008px: כפתור «שליחה» כחול באורך המסך,
      ושם-ערך מימין עם כפתורים בקצה השני (ניהול-הסיווגים). */
@media (min-width: 900px) {
  .wrap { max-width: 760px; margin-inline: auto; }
  .wrap:has(.sh-shelf), .wrap:has(.dash-kpis),
  .wrap:has(#wrBox .vm-rows), .wrap:has(#sdBox .vm-rows) { max-width: none; }
  .feed-wrap.sc-wide { max-width: none; }
}

/* ── דף-השיר: הבורר והכפתור **באותו גובה** בשורת-ההורדה ── */
.sp-dlrow .fld { margin-bottom: 0; }
.sp-dlrow .mini-btn { min-height: 48px; }

/* ── סיכום-הכספים בלוח-הבקרה: מאותו צד, לא מפוזר על כל הרוחב ── */
.dash-money { grid-template-columns: repeat(auto-fill, minmax(140px, 190px)); justify-content: start; }

/* ── האולפן: אפשרויות — תווית מעל שדה, ברשת אחידה (היו תוויות לצד שדות,
      «חזרה שנייה» נשברה לשתי שורות) ── */
.fld-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 14px; align-items: end; }
.fld-grid .ar-opt { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.fld-grid .ar-opt span { font-size: .86rem; color: var(--g-text-2); }
.fld-grid .ar-opt select, .fld-grid .ar-opt input { width: 100%; min-height: 44px;
  background: var(--g-surface); border: 1px solid var(--g-line); border-radius: var(--g-r-sm); }

/* ═══════════════════════════════ שלב 5ב — קו-התחלה אחד (מחשב) ════════════
   ⚠️ אחרי שהטפסים צומצמו ל-760px הם התמרכזו — ותפריט-הניהול, כותרת-המסך
      והלשוניות נשארו בקצה: שלושה קווים ימניים שונים באותו מסך (נראה בצילום
      1280px). «הכל מיושר לאותו קו» (חיים): כל גוש מתחיל **מאותו צד**, הצר
      צמוד אליו, והשטח הפנוי בסוף השורה. דפי-כניסה ודף-שגיאה — במרכז, כמקובל. */
@media (min-width: 900px) {
  .screenbar { padding-inline: max(16px, calc((100% - 1040px) / 2 + 16px)); }
  .wrap, .feed-wrap, .wrap-read { margin-inline: 0 auto; }
  /* ⚠️ `wrap wrap-read` (דף-השיר): `.wrap {max-width:760px}` דרס את רוחב-הקריאה
        680px, ובדיקת-המסך «ל-.wrap יש רוחב-קריאה» נכשלה — ובצדק. */
  .wrap.wrap-read { max-width: 680px; }
  body.has-nav .auth-wrap { margin-inline: 0 auto; }
}

/* ── האולפן: «ליווי לזמר» / «מקהלה» — כחול **רק כשמסומן** ──
   ⚠️ `.ar-vocalmode` צבע את המסגרת בכחול תמיד; עד שהוגדר `--line` לא היה
      לה קו בכלל ולכן זה לא נראה. עכשיו זה היה נראה «מסומן» גם כשלא. */
.ar-vocalmode { border-color: var(--g-line) !important; }
.ar-vocalmode:has(input:checked) { border-color: var(--g-accent) !important;
  background: var(--g-accent-soft); }

/* ── האולפן: שורת-כלי — שם, תפקיד והסרה **באותה שורה** ──
   ⚠️ בטלפון תיבת-התפקיד של הקונטרבס התרחבה לפי האפשרות הארוכה, ו-× נשבר
      לשורה משלו בצד השני (נראה בצילום 412px). */
.ar-inst > select { flex: 0 1 auto; min-width: 0; max-width: 58%; }

/* ═══════════════════════════════ שלב 5ג — פקדים מובנים · טעינה ═══════════ */

/* ── 🌗 הפקדים של הדפדפן — כהים ──
   ⚠️ בלי `color-scheme` פס-הגלילה, תיבות-הסימון, בוחר-התאריך ורשימות-הבחירה
      צוירו **בהירים** על המסך הכהה (נראה בצילום-מחשב: תיבת-סימון לבנה באולפן). */
:root { color-scheme: dark; accent-color: var(--g-accent); }

/* ── ⏳ שלד-טעינה: מלבנים עדינים במקום מסך ריק עד שהרשימה מגיעה ──
   ⚠️ רק במכולות שה-JS **תמיד** ממלא (רשימה או «אין…») — אחרת השלד היה
      נשאר לנצח. כשהתוכן מגיע, `:empty` כבר לא חל והשלד נעלם לבד. */
#scList:empty, #shBox:empty, #sdBox:empty, #cmBox:empty, #wrBox:empty,
#crBox:empty, #apBox:empty, #avBox:empty {
  min-height: 240px; border-radius: var(--g-r);
  background:
    linear-gradient(var(--g-surface) 0 0) 0 0 / 100% 64px no-repeat,
    linear-gradient(var(--g-surface) 0 0) 0 80px / 100% 64px no-repeat,
    linear-gradient(var(--g-surface) 0 0) 0 160px / 72% 64px no-repeat;
  animation: g-skel 1.4s ease-in-out infinite;
}
@keyframes g-skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  #scList:empty, #shBox:empty, #sdBox:empty, #cmBox:empty, #wrBox:empty,
  #crBox:empty, #apBox:empty, #avBox:empty { animation: none; }
}

/* ── ✋ חלון-אישור (platConfirm) ── */
.cf-body { padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
.cf-list { margin: 6px 0 16px; padding-inline-start: 20px; display: flex; flex-direction: column;
  gap: 8px; color: var(--g-text-2); line-height: 1.55; }
.cf-list li:first-child { color: var(--g-text); font-weight: 600; list-style: none;
  margin-inline-start: -20px; }
.cf-acts { display: flex; flex-direction: column; gap: 8px; }
.cf-acts .mini-btn { min-height: 44px; }
@media (min-width: 761px) {
  .cf-body { inset: 50% auto auto 50% !important; transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px)); border-radius: var(--g-r-lg) !important;
    border: 1px solid var(--g-line) !important; animation: none !important; }
}

/* ═══════════════════════════════ סבב-אפיון 2 ══════════════════════════════ */
/* טמפו ואורך — שורה של שניים, מתחת לסולם/משקל/עמודים */
.sc-uprow.two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 8px; }
/* «הוספת פורמט» — אותה צורה כמו הפורמטים, בקו מקווקו: «עוד לא קיים» */
.sp-fmt.sp-add { border-style: dashed !important; color: var(--g-accent-ink); cursor: pointer; }
/* קטגוריות בדף-הבית — שורה אחת נגללת, כמו המסננים */
.sh-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sh-cats::-webkit-scrollbar { height: 0; }
.sh-cat { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 16px; border-radius: 999px; border: 1px solid var(--g-line);
  background: var(--g-surface); color: var(--g-text); text-decoration: none; font-size: .9rem; }
.sh-cat:hover { border-color: var(--g-accent); color: var(--g-accent-ink); }

/* ═══════════════════════════════ סבב-אפיון 3 (9.10.2026) ══════════════════ */
/* ── 📋 בריף בשלבים: שלוש תחנות — אייקון + מילה; הנוכחית בכחול ── */
.cm-stepbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin: 0 0 6px; padding: 0; list-style: none; counter-reset: none; }
.cm-stepbar li { display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; border-radius: 999px; border: 1px solid var(--g-line);
  background: var(--g-surface); color: var(--g-text-3); font-size: .86rem; }
.cm-stepbar li .ic { width: 16px; height: 16px; }
.cm-stepbar li.on { border-color: var(--g-accent); color: var(--g-accent-ink);
  background: var(--g-accent-soft); font-weight: 600; }
.cm-stepbar li.done { color: var(--g-text-2); }
.cm-step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex;
  flex-direction: column; gap: 10px; }
.cm-step[hidden] { display: none; }
.cm-stepnav { display: flex; gap: 8px; margin-top: 6px; }
.cm-stepnav > button { flex: 1; min-height: 46px; justify-content: center; }
.cm-stepnav > button[hidden] { display: none; }
.cm-to { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--g-text-2);
  font-size: .9rem; }
.cm-to .ic { width: 16px; height: 16px; }
/* ── 📎 קבצים ── */
.cm-attach { position: relative; cursor: pointer; align-self: flex-start;
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.cm-attach input[type=file] { display: none; }
.cm-attach.busy { opacity: .55; pointer-events: none; }
.cm-flist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cm-flist li { display: flex; align-items: center; gap: 6px; color: var(--g-text-2);
  font-size: .86rem; overflow-wrap: anywhere; }
.cm-flist .ic { width: 15px; height: 15px; flex: none; }
.cm-msgacts { display: flex; gap: 8px; }
.cm-msgacts > button { flex: 1; min-height: 46px; justify-content: center; }
.cm-file a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--g-accent-ink); overflow-wrap: anywhere; }
.cm-file a .ic { width: 16px; height: 16px; flex: none; }
/* ── ⚖️ מחלוקת ── */
.cm-dispute { margin-top: 18px; }
.cm-dispute summary { color: var(--g-text-3); }
.cm-settle { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g-line); }
/* ── 🛂 מתג במצב «דלוק» — כחול (כלל-חיים: צבע-מצב). ⚠️ `!important` מול
      `.mini-btn` שקובע רקע עם !important. גם «מסלול מהיר» בכספים. */
.mini-btn.on, .mini-btn[aria-pressed="true"] { background: var(--g-accent-soft) !important;
  border-color: var(--g-accent) !important; color: var(--g-accent-ink) !important; }
.as-review { margin-bottom: 8px; }
.as-review .card-title { margin: 0; }
/* ── ⚖️ מחלוקות בכספים ── */
.dp-row { text-decoration: none; color: inherit; }
.dp-row .dp-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.urow-st.dp-open { color: var(--g-warn); }
/* ── 👣 «במעקב» באזור האישי ── */
.sd-fol { display: grid; gap: 8px; }
.sd-person { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.sd-person .avatar { flex: none; }
/* ── 📊 נתוני-אמן: שישה אריחים — 3×2 במחשב, 2×3 בטלפון (לא 4+2) ── */
@media (min-width: 640px) { .ar-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.ar-top { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: arTop; }
.ar-top li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--g-line); counter-increment: arTop; }
.ar-top li::before { content: counter(arTop); color: var(--g-text-3); min-width: 1.4em;
  font-variant-numeric: tabular-nums; }
.ar-top a { flex: 1; min-width: 0; color: var(--g-text); overflow-wrap: anywhere; }
.ar-top small { color: var(--g-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ── 🛂 דף-שיר שממתין / נדחה — שורת-מצב בראש הדף ── */
.sp-state { margin: 0 0 12px; }
/* «ממתין» אינו שגיאה — כחול-שקט, לא אדום (גרפיט: אדום רק לסכנה) */
.sp-state.pend { background: var(--g-accent-soft) !important; border-color: transparent !important; }
.sp-state.pend .ic { color: var(--g-accent-ink) !important; }
/* ⚖️ מחלוקת פתוחה — אזהרה ⇒ צהוב (גרפיט: צהוב רק לאזהרה) */
.cm-disp { background: rgba(242, 193, 78, .09) !important;
  border-color: rgba(242, 193, 78, .35) !important; }
.cm-disp .ic { color: var(--g-warn) !important; }

/* ⚠️⚠️ (9.10.2026) **`hidden` חייב לנצח.** `.seg{display:grid !important}` (שלב
   «גרפיט», 8.10) דרס את הכלל הגלובלי `[hidden]` של platform.css — אותה
   ספציפיות, ו-graphite נטען אחרון. בפועל שורת-הלשוניות «הבקשות שלי / פתוחות /
   חדשה» הופיעה **בתוך חדר-העבודה**, אף שהקוד הסתיר אותה. אותו דבר לכל רכיב
   שקיבל כאן `display … !important`. */
.seg[hidden], .dd-menu > .dd-it[hidden], .sc-upvocab[hidden], .fld-grid[hidden],
.as-act[hidden] { display: none !important; }

/* ═══════════════════════════════ סבב-אפיון 4 (9.10.2026) ══════════════════ */
/* 🪜 שלבי-העבודה בחדר — חמש תחנות; בטלפון אייקון מעל מילה */
.cm-track { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; margin: 4px 0 12px; }
.cm-track li { flex-direction: column; gap: 2px; min-height: 52px; border-radius: var(--g-r-sm);
  font-size: .78rem; padding: 4px 2px; text-align: center; }
.cm-track li.done { color: var(--g-ok); }
.cm-track li.done .ic { color: var(--g-ok); }
@media (min-width: 761px) {
  .cm-track li { flex-direction: row; min-height: 40px; font-size: .84rem; border-radius: 999px; }
}
/* 📊 לוח-הכותב: שישה נתונים — 3×2 */
.sd-stats.sd-six { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cm-st.cm-st-disp { display: inline-flex; align-items: center; gap: 4px;
  color: var(--g-warn) !important; background: rgba(242, 193, 78, .1) !important; }
.cm-st.cm-st-disp .ic { width: 13px; height: 13px; }

/* ═══════════════════════════ 🛡️ הגנת-תווים (9.10.2026) ═══════════════════════
   ⚠️ בדפדפן זו הרתעה, לא חסימה — ראו platShield ב-platform.js. */
.score-prev, .vm-sheet { -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
.score-prev img, .vm-sheet img { -webkit-user-drag: none; pointer-events: none; }
html.shield-on .score-prev, html.shield-on .vm-sheet { filter: blur(18px) !important;
  transition: filter .05s; }
@media print {
  /* 🖨️ התווים לא מודפסים מהדף — רק הודעה (ההורדה היא הדרך המסודרת) */
  .score-prev, .vm-sheet { visibility: hidden !important; }
  .score-prev::before { content: "J-sheet"; visibility: visible; display: block;
    padding: 40px; text-align: center; font: 700 22px Heebo, Arial, sans-serif; color: #000; }
}

/* ⚖️ הדפים המשפטיים + שורת-ההסכמה בהרשמה (9.10.2026) */
.legal-list { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 8px;
  line-height: 1.7; color: var(--g-text-2); }
.legal-list b { color: var(--g-text); }
.legal-doc .post-text { white-space: pre-line; line-height: 1.75; }
.reg-agree { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px;
  font-size: .92rem; color: var(--g-text-2); min-height: 44px; cursor: pointer; }
.reg-agree input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.reg-agree a { color: var(--g-accent-ink); }
.sp-rev-rm { margin-top: 6px; }