/* ==========================================================================
   צד העובד (/). נשען על ui.css: רק טוקנים ורכיבים משם, בלי ערכים קשיחים.
   טלפון: כותרת עם לוגו, תוכן ברוחב מלא, כפתור ראשי דביק בתחתית.
   מחשב (1024 ומעלה): כרטיס מרכזי רחב, ולצדו אזור מותג.
   ========================================================================== */

.emp-page { min-block-size: 100vh; }
.emp-top { position: sticky; inset-block-start: 0; z-index: var(--z-nav); display: flex; align-items: center; justify-content: center; block-size: calc(var(--s-12) + var(--s-4)); padding-inline: var(--s-4); background: var(--color-surface); border-block-end: var(--bw) solid var(--color-border); }
.emp-top .logo { block-size: var(--s-8); }
.emp-shell { max-inline-size: calc(var(--form-max) + var(--s-8)); margin-inline: auto; }
.emp-main { padding: var(--s-5) var(--s-4) var(--s-10); display: flex; flex-direction: column; gap: var(--s-5); }
.emp-brand { display: none; }

@media (min-width: 1024px) {
  .emp-top { display: none; }
  .emp-shell {
    max-inline-size: var(--content-max); padding: var(--s-12) var(--s-8);
    display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--s-16) * 5.5); gap: var(--s-8); align-items: start;
  }
  .emp-main { background: var(--color-surface); border: var(--bw) solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--sh-2); padding: var(--s-10) var(--s-12); min-block-size: calc(var(--s-16) * 9); gap: var(--s-6); }
  .emp-brand { position: sticky; inset-block-start: var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); }
  .emp-brand__logo { display: flex; justify-content: center; padding: var(--s-10) var(--s-6); background: var(--color-surface); border: var(--bw) solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--sh-1); }
}

/* איך זה עובד: שלושה שלבים באזור המותג */
.emp-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.emp-howto li { display: flex; gap: var(--s-3); align-items: flex-start; }
.emp-howto__n { display: grid; place-items: center; inline-size: var(--s-8); block-size: var(--s-8); flex: none; border-radius: var(--r-full); background: var(--color-surface); border: var(--bw) solid var(--color-border-strong); font-weight: var(--fw-bold); font-size: var(--fs-sm); }

/* כותרת מסך: חזרה, כותרת, ומחוון שלבים */
.emp-head { display: flex; flex-direction: column; gap: var(--s-4); }
.emp-head__row { display: flex; align-items: center; gap: var(--s-3); }
.emp-head__back { inline-size: var(--touch); min-block-size: var(--touch); flex: none; }
.emp-head__meta { margin-inline-start: auto; font-size: var(--fs-sm); color: var(--color-text-3); white-space: nowrap; }
.emp-hello { display: flex; flex-direction: column; gap: var(--s-1); }

.emp-section { display: flex; flex-direction: column; gap: var(--s-3); }
.emp-section__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-2); }

/* הקריאות שלי */
.emp-mine .list__item { min-block-size: calc(var(--touch) + var(--s-4)); padding-block: var(--s-2); }
.emp-mine__text { display: flex; flex-direction: column; gap: var(--s-1); min-inline-size: 0; }
.emp-mine__title { font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-mine__meta { font-size: var(--fs-xs); color: var(--color-text-3); }
.emp-mine .tag { margin-inline-start: auto; }
.emp-mine .list__item > .ic:last-child { margin-inline-start: 0; }

/* קטגוריות: רשימה נפתחת. תתי-הקטגוריות מוזחות פנימה */
.emp-cats .list__item[aria-expanded="true"] { background: var(--color-brand-soft); font-weight: var(--fw-bold); }
.emp-cats .list__item--sub { padding-inline-start: var(--s-8); background: var(--color-surface-2); font-size: var(--fs-md); }
.emp-cats .list__item--sub:hover { background: var(--color-surface-hover); }

/* סיכום הבחירה בראש הטופס */
.emp-picked { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--color-surface-2); border: var(--bw) solid var(--color-border); }
.emp-picked__text { display: flex; flex-direction: column; min-inline-size: 0; font-size: var(--fs-sm); }
.emp-picked__text b { font-size: var(--fs-md); }
.emp-picked .btn { margin-inline-start: auto; }
.emp-two { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .emp-two { grid-template-columns: 1fr 1fr; } }

/* כפתור ראשי: דביק בתחתית בטלפון, רגיל במחשב.
   הסרגל הוא ילד ישיר של #emp, כדי שיידבק לתחתית המסך לאורך כל הטופס (sticky לא יוצא מגבולות ההורה שלו). */
@media (max-width: 1023px) {
  .emp-actionbar { margin-inline: calc(var(--s-4) * -1); margin-block-end: calc(var(--s-10) * -1); }
}
@media (min-width: 1024px) {
  .emp-actionbar { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
}

/* מסך הצלחה */
.emp-done { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-8) var(--s-5); text-align: center; }
.emp-done__icon { display: grid; place-items: center; inline-size: calc(var(--s-16) + var(--s-2)); block-size: calc(var(--s-16) + var(--s-2)); border-radius: var(--r-full); background: var(--color-success-bg); color: var(--color-success); }
.emp-done__num { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-8); border-radius: var(--r-lg); background: var(--color-brand-soft); border: var(--bw) solid var(--color-brand-soft-border); }

.emp-done .cluster { justify-content: center; }
@media (max-width: 599px) { .emp-done .cluster { flex-direction: column; align-items: stretch; align-self: stretch; } }

/* מעקב אחר קריאה */
.emp-ticket__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.emp-ticket__desc { white-space: pre-wrap; color: var(--color-text-2); }
.emp-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-16) + var(--s-8)), 1fr)); gap: var(--s-3); }
.emp-imgs img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--sh-1); cursor: zoom-in; display: block; }
.emp-summary { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: var(--color-success-bg); color: var(--color-text); }
.emp-summary__title { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); color: var(--color-success); }
.emp-summary p { white-space: pre-wrap; }

/* שני מסלולים: כפתור ראשי לכניסה עם חשבון הארגון, ומתחתיו קישור ברור למסלול בלי כניסה */
.emp-gate { display: flex; flex-direction: column; gap: var(--s-4); }
.emp-gate__alt { align-self: center; min-block-size: var(--touch); padding-inline: var(--s-2); border: 0; border-radius: var(--r-md); background: none;
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--color-text); text-decoration: underline; text-underline-offset: var(--s-1); cursor: pointer; }
.emp-gate__alt:hover { background: var(--color-surface-hover); }

/* חשבון הארגון: העובד המחובר, או שורה שמחזירה לכניסה מהמסלול בלי כניסה */
.emp-account { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.emp-account--anon { flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.emp-account--in { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--color-surface); border: var(--bw) solid var(--color-border); }
.emp-account__avatar { display: grid; place-items: center; inline-size: var(--s-10); block-size: var(--s-10); flex: none; border-radius: var(--r-full); background: var(--color-brand-soft); font-weight: var(--fw-bold); }
.emp-account__text { display: flex; flex-direction: column; min-inline-size: 0; margin-inline-end: auto; }
.emp-account__text .t-ltr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.input[readonly] { background: var(--color-surface-2); border-color: var(--color-border-strong); }