/* ══════════════════════════════════════════════════════════════════════════
   ארגז הכלים — גיליון הסגנון של המעטפת.

   המבנה, המידות וההיררכיה הם של המצג שאושר ב-14/09/2026 (ece3a894): כפתור
   ראשי מלא, סמל מלא בכותרת, כרטיסים צמודים, וארגז הכלים עצמו כאריחים
   קומפקטיים בשתי עמודות. **הפלטה הוחלפה** לפלטת קאספריו (K-6.12): אין כאן
   יותר אף ערך צבע קשיח — כל אחד מהם קורא מ-‎assets/css/tokens.css, שאותו
   ‎view.php טוען לפני הקובץ הזה.

   ── איך לקרוא את הטבלה שלמטה ─────────────────────────────────────────────
   כל משתנה הוא ‎var(--ks-*, <הערך של אתמול>). ה-fallback הוא בדיוק הצבע
   שהיה כאן לפני ההחלפה, כדי שאם ‎tokens.css לא נמסר (קאש, 404) המסך ייראה
   כמו קודם ולא יתפרק. שני הבלוקים — בהיר וכהה — קוראים מאותה שכבה א׳
   (‎--ks-*), ולכן מצב כהה מגיע מ-tokens ולא מכאן; בלוק הכהה נשאר רק בשביל
   אותו מקרה של „הקובץ לא נמסר".

   ⚠ שלוש הכרעות שחוזרות על עצמן, ולכן כתובות פעם אחת:
   1) ‎--gold התפצל לשניים. הכתום ‎--ks-accent (#C2410C בהיר / #E2622A כהה)
      הוא כל מה שהוא *טקסט, קישור, אייקון או מסגרת*. הצהוב של המותג
      ‎--ks-accent-brand (#FFCC15) הוא **מילוי בלבד**, ורק בכפתור הראשי
      ובכפתור החידוש, תמיד עם ‎--ks-accent-brand-ink עליו (12.4:1). צהוב
      כטקסט או כמסגרת הוא 1.62:1 ונכשל — ולכן הוא לא מופיע כאן באף תפקיד אחר.
   2) ‎--txt3 (האפור השלישי, ‎#9A9FAA) היה 2.7:1 על הרקע הבהיר — כשל AA
      שהיה כאן מלכתחילה. אין בטוקנים אפור שלישי שעובר AA, ולכן ‎--txt2
      ו---txt3 מצביעים שניהם על ‎--ks-txt-dim. ההיררכיה נשמרת בגודל
      ובמשקל הגופן, שממילא נבדלים בכל מקום שבו השניים נפגשים.
   3) אריח נעול מוצג עמום (‎opacity), ולכן הטקסט שבתוכו הוא ‎--txt המלא ולא
      ‎--txt3: אפור משני כפול שקיפות יורד מתחת ל-4.5:1.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Heebo';src:url('/assets/fonts/Heebo-VF.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root{
  /* משטחים. ‎--panel הוא ה*כרטיס* (‎--ks-card), ‎--page הוא רקע הדף */
  --page:var(--ks-bg,#EEEBE4);
  --panel:var(--ks-card,#FFFFFF);
  --panel-2:var(--ks-bg-soft,#F5F4F1);
  --edge:var(--ks-line,#DCD7CC);
  --edge-2:var(--ks-g300,#CFCBC1);

  /* טקסט */
  --txt:var(--ks-txt,#1F2229);
  --txt2:var(--ks-txt-dim,#5F6572);
  --txt3:var(--ks-txt-dim,#9A9FAA);   /* ראה הערה 2 למעלה */

  /* פעולה — ראה הערה 1 למעלה */
  --gold:var(--ks-accent,#D48821);          /* אייקון, מסגרת, hover */
  --gold-d:var(--ks-accent,#96681C);        /* אותו צבע כטקסט/קישור */
  --gold-ink:var(--ks-accent-ink,#FFFFFF);  /* הטקסט שיושב על מילוי --gold */
  --gold-bg:var(--ks-accent-tint,#FDF6EA);  /* רקע רך בגוון המותג */
  --gold-soft:var(--ks-accent-soft,#FDF6EA);/* הילת פוקוס */
  --brand:var(--ks-accent-brand,#D48821);   /* הצהוב — מילוי בלבד */
  --brand-ink:var(--ks-accent-brand-ink,#FFFFFF);

  /* סטטוס */
  --bad:var(--ks-red-ink,#A3241B);
  --bad-bg:var(--ks-err-bg,#F9E7E4);
  --ok:var(--ks-green-ink,#3E6B46);
  --ok-bg:var(--ks-ok-bg,#E7EFE7);

  /* צל ורדיוס */
  --shadow:var(--ks-shadow-lg,0 10px 30px -14px rgba(28,30,32,.28));
  --shadow-sm:var(--ks-shadow,0 1px 2px rgba(28,30,32,.06));
  --r:var(--ks-r-md,9px);
}
/* מצב כהה מגיע מ-tokens.css: כל המשתנים למעלה קוראים משכבה א׳, שמתהפכת שם.
   הבלוק הזה קיים רק בשביל המקרה שבו tokens.css לא נמסר — ואז הוא מחזיר את
   ערכי הכהה של אתמול. כשהקובץ כן נמסר, ‎--ks-* כבר כהים והשורות כאן זהות. */
@media(prefers-color-scheme:dark){:root{
  --page:var(--ks-bg,#15171C);
  --panel:var(--ks-card,#1D2026);
  --panel-2:var(--ks-bg-soft,#22252C);
  --edge:var(--ks-line,#2C3038);
  --edge-2:var(--ks-g300,#3A3F49);
  --txt:var(--ks-txt,#ECEDF1);
  --txt2:var(--ks-txt-dim,#A6ACB8);
  --txt3:var(--ks-txt-dim,#767C88);
  --gold:var(--ks-accent,#E5A040);
  --gold-d:var(--ks-accent,#E5A040);
  --gold-ink:var(--ks-accent-ink,#15171C);
  --gold-bg:var(--ks-accent-tint,#2A2318);
  --gold-soft:var(--ks-accent-soft,#2A2318);
  --brand:var(--ks-accent-brand,#E5A040);
  --brand-ink:var(--ks-accent-brand-ink,#15171C);
  --bad:var(--ks-red-ink,#E5877A);
  --bad-bg:var(--ks-err-bg,#33201D);
  --ok:var(--ks-green-ink,#85B58D);
  --ok-bg:var(--ks-ok-bg,#1C2A1E);
  --shadow:var(--ks-shadow-lg,0 16px 40px -18px rgba(0,0,0,.65));
  --shadow-sm:var(--ks-shadow,0 1px 2px rgba(0,0,0,.4));
}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--page); color:var(--txt);
  font-family:var(--font,'Heebo',-apple-system,"Segoe UI",Rubik,Arial,system-ui,sans-serif);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:var(--gold-d)}
.tb-ico{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-.16em}

/* ─── טבעת פוקוס ──────────────────────────────────────────────────────
   עד היום לא הייתה כאן טבעת משלנו, ומקלדת קיבלה את ברירת המחדל של
   הדפדפן — שעל כפתור מלא כמעט לא נראית. ‎--focus הוא הכתום של המותג,
   5.0:1 על רקע הדף בשני המצבים (הרף לרכיב ממשק הוא 3:1). ⚠ ל-.tb-btn
   ול-.tb-tile יש transition שמנפיש גם את outline-width. */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus,#96681C); outline-offset:2px;
}

/* ─── סרגל עליון ─────────────────────────────────────────────────────── */
.tb-top{background:var(--panel); border-bottom:1px solid var(--edge); position:sticky; top:0; z-index:20}
.tb-top-in{max-width:900px; margin:0 auto; padding:9px 14px; display:flex; align-items:center; gap:9px}
.tb-logo{height:32px; width:auto; max-width:110px; object-fit:contain; border-radius:var(--r-xs,6px); flex:none}
.tb-mark{width:32px; height:32px; border-radius:var(--r-xs,7px); background:var(--gold); color:var(--gold-ink);
  display:grid; place-items:center; flex:none}
.tb-mark .tb-ico{width:19px; height:19px; stroke-width:2.1}
.tb-top-t{display:flex; flex-direction:column; line-height:1.22; min-width:0}
.tb-name{color:var(--txt); font-weight:700; font-size:15px}
.tb-sub{color:var(--txt3); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-out{margin-inline-start:auto; color:var(--txt2); text-decoration:none; font-size:14px;
  font-weight:600; padding:9px 14px; border-radius:var(--r-sm,8px); flex:none; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:var(--tap,44px)}
.tb-out:hover{color:var(--gold-d); background:var(--panel-2)}
/* „חזרה" הוא הכפתור שהכי לוחצים עליו בנייד — הוא מקבל מסגרת כדי שייראה כפתור */
.tb-out.tb-back{border:1px solid var(--edge-2); color:var(--txt)}
.tb-out.tb-back:hover{border-color:var(--gold); color:var(--gold-d)}
.tb-out + .tb-out{margin-inline-start:6px}

/* ─── מעטפת התוכן ────────────────────────────────────────────────────── */
.tb-wrap{max-width:900px; margin:0 auto; padding:20px 14px 60px}
.tb-head{margin-bottom:16px}
.tb-h1{font-size:22px; font-weight:800; color:var(--txt); margin:0 0 3px; letter-spacing:-.01em}
.tb-h2{font-size:17px; font-weight:700; color:var(--txt); margin:26px 0 10px}
.tb-lead{color:var(--txt2); font-size:14px; margin:0; max-width:60ch}
.tb-mini{color:var(--txt3); font-size:12px}

.tb-card{background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow-sm); margin-bottom:10px}

.tb-flash{border-radius:var(--r-sm,8px); padding:10px 13px; margin-bottom:14px; font-weight:600; font-size:13.5px}
.tb-info{background:var(--panel-2); border:1px solid var(--edge); color:var(--txt)}
.tb-success{background:var(--ok-bg); border:1px solid var(--ok); color:var(--ok)}
.tb-error{background:var(--bad-bg); border:1px solid var(--bad); color:var(--bad)}
.tb-alert{background:var(--bad-bg); border:1px solid var(--bad); color:var(--bad);
  border-radius:var(--r-sm,8px); padding:10px 13px; margin-bottom:14px; font-size:13.5px}

/* ─── כפתורים ────────────────────────────────────────────────────────
   הראשי במילוי הצהוב של המותג — זה המקום היחיד במסך שבו הצהוב מופיע
   כשטח גדול, ועליו ‎--brand-ink הכהה. ראה הערה 1 בראש הקובץ. */
.tb-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--brand); color:var(--brand-ink); border:1px solid var(--brand); border-radius:var(--r-sm,7px);
  padding:10px 18px; min-height:var(--tap,44px); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:.15s}
.tb-btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.tb-btn.tb-ghost{background:var(--panel); color:var(--txt); border-color:var(--edge-2)}
.tb-btn.tb-ghost:hover{border-color:var(--gold); color:var(--gold-d); filter:none}
.tb-btn.tb-danger{background:var(--panel); color:var(--bad); border-color:var(--bad)}
.tb-btn.tb-danger:hover{background:var(--bad-bg); filter:none}
.tb-btn.tb-sm{padding:8px 13px; font-size:12.5px}
.tb-btn.tb-block{width:100%}
.tb-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}

/* ─── טפסים ──────────────────────────────────────────────────────────── */
.tb-form{display:flex; flex-direction:column; gap:11px}
.tb-form label, .tb-field{display:flex; flex-direction:column; gap:4px;
  font-size:11.5px; font-weight:600; color:var(--txt2)}
.tb-form input, .tb-field input, .tb-field select{
  font:inherit; font-size:14px; color:var(--txt); background:var(--panel);
  border:1px solid var(--edge-2); border-radius:var(--r-sm,7px); padding:9px 11px; outline:none;
  width:100%; max-width:100%; min-height:var(--tap,44px); transition:.15s}
.tb-form input:focus, .tb-field input:focus, .tb-field select:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
.tb-row2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
@media(max-width:560px){ .tb-row2{grid-template-columns:1fr} }

/* ─── מסך הכניסה ─────────────────────────────────────────────────────── */
.tb-login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px}
.tb-login-card{width:100%; max-width:340px; background:var(--panel); border:1px solid var(--edge);
  border-radius:var(--r-lg,14px); padding:28px 22px; box-shadow:var(--shadow); text-align:center}
/* הלוגו של קאספריו — המותג של הפלטפורמה, לפני שידוע לאיזה עסק נכנסים */
.tb-brand{display:block; margin:0 auto 14px}
.tb-brand img{display:block; height:42px; width:auto; margin:0 auto}
.tb-mono{width:48px; height:48px; margin:0 auto 12px; border-radius:var(--r-md,11px); background:var(--gold);
  color:var(--gold-ink); display:grid; place-items:center}
.tb-mono .tb-ico{width:26px; height:26px; stroke-width:2.1}
.tb-login-card h1{font-size:19px; font-weight:800; color:var(--txt); margin:0 0 2px}
.tb-login-sub{color:var(--txt3); font-size:13px; margin:0 0 18px}
.tb-login-card .tb-form{text-align:start}
.tb-login-help{margin-top:14px; font-size:12.5px; line-height:2; color:var(--txt2)}

/* ─── ארגז הכלים: אריחים ─────────────────────────────────────────────── */
.tb-tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media(min-width:620px){ .tb-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
.tb-tile{display:block; background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:14px 9px; text-align:center; text-decoration:none; color:inherit;
  box-shadow:var(--shadow-sm); transition:.16s}
.tb-tile:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow)}
.tb-tile-ic{width:34px; height:34px; margin:0 auto 7px; border-radius:var(--r-sm,9px); background:var(--gold-bg);
  color:var(--gold); display:grid; place-items:center}
.tb-tile-ic .tb-ico{width:19px; height:19px; stroke-width:2}
.tb-tile-nm{display:block; font-size:13.5px; font-weight:700; color:var(--txt)}
.tb-tile-st{display:block; font-size:11px; color:var(--txt3); margin-top:1px}
/* עמום — אבל קריא. ‎.55/.5 היו מורידים גם את הטקסט מתחת ל-4.5:1, ולכן
   האריח העמום לוקח את ‎--txt המלא בשורת המצב. ראה הערה 3 בראש הקובץ. */
.tb-tile.is-locked{opacity:.72}
.tb-tile.is-locked .tb-tile-ic{background:var(--panel-2); color:var(--txt2)}
.tb-tile.is-locked:hover{opacity:1; border-color:var(--gold)}
.tb-tile.is-soon{opacity:.68; cursor:default}
.tb-tile.is-soon:hover{transform:none; border-color:var(--edge); box-shadow:var(--shadow-sm)}
.tb-tile.is-locked .tb-tile-st, .tb-tile.is-soon .tb-tile-st{color:var(--txt)}
.tb-tile-st.is-exp{color:var(--bad); font-weight:600}
.tb-tile-st.is-warn{color:var(--gold-d); font-weight:600}

/* ─── באנר חידוש מנוי ────────────────────────────────────────────────── */
.tb-banner{display:flex; align-items:center; gap:10px; padding:11px 13px; margin-bottom:14px;
  border:1px solid var(--edge); border-radius:var(--r); box-shadow:var(--shadow-sm)}
.tb-banner .tb-ico{width:1.4em; height:1.4em; flex:none}
.tb-banner-txt{flex:1; font-size:13px; font-weight:600; line-height:1.4}
.tb-renew{flex:none; background:var(--brand); color:var(--brand-ink); font-weight:700; font-size:12.5px;
  text-decoration:none; padding:8px 13px; border-radius:var(--r-sm,7px); white-space:nowrap;
  display:inline-flex; align-items:center; min-height:var(--tap,44px)}
.tb-banner-warn{background:var(--gold-bg); border-color:var(--gold)}
.tb-banner-warn .tb-ico{color:var(--gold-d)}
.tb-banner-alert{background:var(--bad-bg); border-color:var(--bad)}
.tb-banner-alert .tb-ico{color:var(--bad)}
@media(max-width:520px){ .tb-banner{flex-wrap:wrap} .tb-banner-txt{flex:1 1 100%} }

/* ── הכלי כאפליקציה: הודעה קטנה מעל האריחים ── */
.tb-pwa{display:flex; align-items:flex-start; gap:10px; padding:10px 8px 10px 12px; margin-bottom:12px;
  background:var(--gold-bg); border:1px solid var(--gold); border-radius:var(--r)}
/* בלי זה display:flex גובר על hidden: ה-✕ לא סגר, וההודעה הופיעה גם באפליקציה */
.tb-pwa[hidden]{display:none}
.tb-pwa-ic{flex:none; width:30px; height:30px; margin-top:1px; border-radius:var(--r-sm,8px); background:var(--gold);
  color:var(--gold-ink); display:grid; place-items:center}
.tb-pwa-ic .tb-ico{width:17px; height:17px}
.tb-pwa-txt{flex:1; min-width:0}
.tb-pwa-txt p{margin:0}
.tb-pwa-txt .tb-pwa-t{font-size:13.5px; font-weight:700; color:var(--txt); line-height:1.35}
.tb-pwa-txt .tb-pwa-d{font-size:12.5px; color:var(--txt2); line-height:1.5; margin-top:2px}
/* ⚠ על משטח מוטבע בגוון המותג הכתום יורד ל-3.8:1 במצב כהה. הדגשה כאן
   נעשית במשקל הגופן, והצבע נשאר --txt. אותו כלל ב-.tb-biz.is-current. */
.tb-pwa-d b{color:var(--txt); font-weight:800}
.tb-pwa-txt .tb-pwa-s{font-size:11.5px; color:var(--txt3); line-height:1.45; margin-top:3px}
.tb-pwa-x{flex:none; min-width:var(--tap,44px); min-height:var(--tap,44px); margin-top:-4px; border:0;
  border-radius:var(--r-xs,6px); background:transparent; color:var(--txt2); font:inherit; font-size:14px;
  line-height:1; cursor:pointer}
.tb-pwa-x:hover{color:var(--txt); background:var(--panel)}

/* ─── רצועת הניהול ───────────────────────────────────────────────────── */
.tb-strip-t{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--txt3); margin:20px 0 6px}
.tb-strip{display:flex; align-items:center; gap:9px; background:var(--panel);
  border:1px solid var(--edge); border-radius:var(--r); padding:11px 12px; margin-bottom:7px;
  text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:.15s}
.tb-strip:hover{border-color:var(--gold)}
.tb-strip .tb-ico{color:var(--gold); width:1.15em; height:1.15em; flex:none}
.tb-strip-nm{display:block; font-size:13.5px; font-weight:700; color:var(--txt)}
.tb-strip-ds{display:block; font-size:11px; color:var(--txt3)}
.tb-strip-go{margin-inline-start:auto; font-size:13px; color:var(--gold-d); font-weight:700; flex:none}

/* ─── בורר העסק ──────────────────────────────────────────────────────── */
.tb-biz{display:flex; align-items:center; gap:9px; width:100%; text-align:start;
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:13px 12px; margin-bottom:8px; font:inherit; color:inherit; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.15s}
.tb-biz:hover{border-color:var(--gold); transform:translateY(-1px)}
/* העסק הפעיל בולט משאר הכרטיסים — מסגרת בגוון הפעולה ורקע רך בגוון המותג */
.tb-biz.is-current{border-color:var(--gold); background:var(--gold-bg)}
.tb-biz.is-current .tb-biz-go{color:var(--txt)}
.tb-biz-logo{height:34px; width:34px; object-fit:contain; border-radius:var(--r-sm,7px); flex:none; background:var(--panel-2)}
.tb-biz-t{display:flex; flex-direction:column; min-width:0}
.tb-biz-nm{font-size:14.5px; font-weight:700; color:var(--txt)}
.tb-biz-ds{font-size:11px; color:var(--txt3)}
.tb-biz-go{margin-inline-start:auto; font-size:12px; color:var(--gold-d); font-weight:700; flex:none}

/* ─── אקורדיון ───────────────────────────────────────────────────────
   כל עובד סגור כברירת מחדל. כשכולם פתוחים המסך הוא גליל אינסופי ואי
   אפשר למצוא אף אחד. ─────────────────────────────────────────────── */
.tb-acc{background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  box-shadow:var(--shadow-sm); margin-bottom:8px; overflow:hidden}
.tb-acc > summary{display:flex; align-items:center; gap:9px; padding:11px 13px;
  min-height:var(--tap,44px); cursor:pointer; list-style:none}
.tb-acc > summary::-webkit-details-marker{display:none}
.tb-acc > summary::marker{content:''}
.tb-acc > summary:hover{background:var(--panel-2)}
.tb-acc[open] > summary{border-bottom:1px solid var(--edge)}
.tb-acc-t{display:flex; flex-direction:column; min-width:0; flex:1 1 auto}
.tb-caret{margin-inline-start:auto; color:var(--txt2); font-size:11px; flex:none;
  transition:transform .15s}
.tb-acc[open] .tb-caret{transform:rotate(180deg)}
.tb-acc-body{padding:13px}
.tb-acc-add > summary{color:var(--gold-d); font-weight:700; font-size:14px}
.tb-acc-add > summary .tb-ico{color:var(--gold); width:1.15em; height:1.15em}

/* ─── הצוות ──────────────────────────────────────────────────────────── */
.tb-member{padding:14px}
.tb-who{display:flex; align-items:center; gap:9px; padding-bottom:11px;
  border-bottom:1px solid var(--edge); margin-bottom:11px}
.tb-av{width:34px; height:34px; border-radius:50%; background:var(--panel-2); color:var(--txt2);
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:none}
.tb-who-nm{display:block; font-size:14.5px; font-weight:700; color:var(--txt)}
.tb-who-ds{display:block; font-size:11px; color:var(--txt3)}
.tb-grants{display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:8px; margin-bottom:11px}
/* ⚠ הכלל של label בתוך טופס (עמודה) גבר על השורה הזאת, וכל הרשאה נפרשה
   לשתי שורות מרוכזות. הבורר מתחיל כאן בשם המחלקה כדי לגבור עליו. */
.tb-grants .tb-grant{display:flex; flex-direction:row; align-items:center;
  justify-content:space-between; gap:8px; border:1px solid var(--edge); border-radius:var(--r-sm,7px);
  padding:6px 10px; min-height:var(--tap,44px); background:var(--panel); font-size:13px; font-weight:600; color:var(--txt)}
.tb-grants .tb-grant > span{font-size:13px; font-weight:600; color:var(--txt); flex:1 1 auto}
.tb-grants .tb-grant select{font:inherit; font-size:12.5px; color:var(--txt); background:var(--panel);
  border:1px solid var(--edge-2); border-radius:var(--r-xs,6px); padding:5px 7px; outline:none;
  width:auto; flex:0 0 auto; max-width:56%; min-height:var(--tap,44px)}
/* ⚠ ל-‎.tb-grants .tb-grant select יש outline:none בסלקטור ספציפי יותר
   מהכלל הכללי בראש הקובץ, ולכן הטבעת נכתבת כאן שוב במפורש. */
.tb-grants .tb-grant select:focus{border-color:var(--gold)}
.tb-grants .tb-grant select:focus-visible{outline:2px solid var(--focus,#96681C); outline-offset:2px}
.tb-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  border-top:1px solid var(--edge); padding-top:11px; margin-top:11px}
.tb-inline{display:flex; gap:6px; align-items:center}
.tb-inline input{font:inherit; font-size:13px; border:1px solid var(--edge-2); border-radius:var(--r-sm,7px);
  padding:7px 10px; min-height:var(--tap,44px); background:var(--panel); color:var(--txt); outline:none; max-width:150px}
.tb-inline input:focus{border-color:var(--gold)}

@media(max-width:560px){ .tb-grants{grid-template-columns:1fr} }