/* רשימת הבחירה שלנו (דולב, 10/09/2026).
 *
 * שתי צורות שנבחרו: "חלון בחירה" בבורד המשימות, ו"רשימה מרווחת" בכל שאר
 * המערכת. שתיהן נשענות על משתני התמה, ולכן הן מתחלפות לבד בין בהיר לכהה.
 *
 * --c הוא צבע האפשרות, ומגיע מוטבע מה-JS. אם לאפשרות אין צבע משלה היא
 * נופלת לצבע הדיו, ולא לשקוף.
 */

/* ══ רשימה מרווחת ══════════════════════════════════════════════════ */
.xp{
  position:fixed;z-index:1200;box-sizing:border-box;
  min-width:230px;max-width:min(340px,92vw);
  max-height:min(70vh,440px);overflow:hidden auto;overscroll-behavior:contain;
  padding:6px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line2);
  box-shadow:0 18px 48px rgba(21,29,56,.16),0 2px 8px rgba(21,29,56,.08);
  animation:xpIn .15s ease}
:root[data-theme="dark"] .xp{
  box-shadow:0 20px 56px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4)}
@keyframes xpIn{from{transform:translateY(-6px) scale(.98)}}

.xp-h{padding:9px 12px 6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:var(--ink3)}
.xp-div{height:1px;background:var(--line);margin:6px 8px}

.xp-opt{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  border:0;cursor:pointer;padding:11px 12px;border-radius:10px;
  background:transparent;font:inherit;font-size:14px;line-height:1.35;
  color:var(--c,var(--ink));text-align:start;transition:background .12s}
.xp-opt:hover{background:color-mix(in srgb,var(--c,var(--accent)) 12%,transparent)}
.xp-opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.xp-opt[disabled]{opacity:.45;cursor:not-allowed}
.xp-opt[aria-selected="true"]{
  background:color-mix(in srgb,var(--c,var(--accent)) 15%,transparent);font-weight:600}
.xp-dot{width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--c,var(--line2))}
.xp-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-ok{flex:none;font-size:13px;color:var(--c,var(--accent));opacity:0}
.xp-opt[aria-selected="true"] .xp-ok{opacity:1}

/* ══ חלון בחירה ════════════════════════════════════════════════════ */
.xs-back{position:fixed;inset:0;z-index:1190;background:var(--scrim,rgba(5,9,20,.4));
}
.xs{
  position:fixed;z-index:1200;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(560px,94vw);max-height:86vh;overflow:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 24px 70px rgba(21,29,56,.22);
  animation:xsIn .18s ease}
:root[data-theme="dark"] .xs{box-shadow:0 26px 80px rgba(0,0,0,.6)}
@keyframes xsIn{from{transform:translate(-50%,-46%) scale(.97)}}

.xs-h{padding:16px 18px 13px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px}
.xs-h b{font-size:17px;font-weight:600;color:var(--ink)}
.xs-b{padding:15px 18px 18px}
.xs-sec{margin:0 0 9px;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:var(--ink3)}
.xs-cards + .xs-sec{margin-top:18px}
.xs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.xs-card{
  display:flex;align-items:center;gap:9px;box-sizing:border-box;cursor:pointer;
  border:1px solid var(--line2);border-radius:11px;padding:12px 13px;
  background:var(--surface);font:inherit;font-size:13.5px;line-height:1.35;
  color:var(--ink2);text-align:start;
  transition:border-color .14s,background .14s,color .14s}
.xs-card:hover{border-color:var(--c,var(--accent));
  background:color-mix(in srgb,var(--c,var(--accent)) 8%,transparent)}
.xs-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xs-card[disabled]{opacity:.45;cursor:not-allowed}
.xs-card .xp-t{white-space:normal;overflow:visible}
.xs-card[aria-selected="true"]{border-color:var(--c,var(--accent));
  background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent);
  color:var(--ink);font-weight:600}

/* במסך צר החלון עולה מלמטה: שם האגודל מגיע, ולא באמצע המסך */
@media (max-width:640px){
  .xs{top:auto;bottom:0;left:0;transform:none;
    width:100%;max-width:none;border-radius:20px 20px 0 0;max-height:88vh;
    padding-bottom:env(safe-area-inset-bottom);animation:xsUp .2s ease}
  @keyframes xsUp{from{transform:translateY(16px)}}
  .xs-cards{grid-template-columns:1fr 1fr}
  .xs-card{padding:14px 13px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .xp,.xs,.xs-back{animation:none}
}