/* ============================================================
   המקרר הווירטואלי
   ------------------------------------------------------------
   הפריסה: עמודת דלת צרה + ארון ראשי עם שלושה מדפים, ומתחת
   ארון צדדי (מקפיא + מזווה). כל אזור הוא שכבת רשת מנוקדת
   שמעליה אריחים ב-position:absolute — כך שגרירה מרחפת בין
   תאים בלי להזיז את הפריסה.
   ============================================================ */

.kb-urgency {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: none;
}
.kb-urgency::-webkit-scrollbar { display: none; }
.kb-urgency-empty { font-size: .82rem; color: var(--kb-ink-soft); padding: 4px 2px; }

.kb-urgency-chip {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--kb-line); background: var(--kb-surface);
  border-radius: 999px; padding: 6px 12px; font-size: .78rem;
}
.kb-urgency-chip b { font-weight: 700; }
.kb-urgency-chip i { font-style: normal; color: var(--kb-ink-soft); }
.kb-urgency-chip[data-state="critical"] { background: var(--kb-amber-lo); border-color: transparent; }
.kb-urgency-chip[data-state="expired"]  { background: var(--kb-red-lo);   border-color: transparent; }

/* ---------- ארונות ---------- */
/* המקרר נשאר בעמודה ברוחב טלפון גם על מסך רחב. בלי התקרה הזו הרשת
   נמתחת עם המסך, כל תא הופך לאריח ענק, והמקרר כולו נעשה גבוה משמעותית
   מהמסך — כלומר גרירה בין מדפים דורשת גלילה. זה מכשיר-נייד מלכתחילה. */
.kb-fridge {
  display: grid; gap: 12px;
  max-width: 520px; margin-inline: auto;
}
.kb-fridge-body { display: grid; grid-template-columns: 78px 1fr; gap: 10px; }

.kb-cabinet {
  display: grid; gap: 10px;
  background: linear-gradient(180deg, var(--kb-surface) 0%, var(--kb-surface-2) 100%);
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-r-l);
  padding: 12px;
  box-shadow: var(--kb-shadow);
}
/* גוון קר לתא הקירור — סימן ויזואלי מיידי לאיזו טמפרטורה
   הפריט נגרר, בלי לקרוא את הכותרת. */
.kb-cabinet--cold { background: linear-gradient(180deg,
    color-mix(in srgb, var(--kb-chill) 35%, var(--kb-surface)) 0%, var(--kb-surface) 60%); }
.kb-cabinet--side { grid-template-columns: 1fr 1fr; }

.kb-door {
  display: grid; align-content: start;
  background: var(--kb-surface); border: 1px solid var(--kb-line);
  border-radius: var(--kb-r-l); padding: 10px 8px; box-shadow: var(--kb-shadow);
}

.kb-zone { display: grid; gap: 6px; }
.kb-zone-head {
  display: flex; align-items: center; gap: 6px;
  font-size: .7rem; color: var(--kb-ink-soft);
}
.kb-zone-name { font-weight: 700; }
.kb-zone-temp {
  background: var(--kb-chill); color: var(--kb-ink);
  border-radius: 6px; padding: 1px 6px; font-size: .64rem;
}
/* מד תפוסה: קו דק שמתמלא. מקרר מלא הוא מידע שימושי — הוא
   הרגע שבו כדאי לבשל במקום לקנות. */
.kb-zone-fill {
  margin-inline-start: auto; width: 42px; height: 4px;
  border-radius: 999px; background: var(--kb-line); position: relative; overflow: hidden;
}
.kb-zone-fill::after {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: calc(var(--f, 0) * 100%); background: var(--kb-green); transition: width .3s;
}
.kb-zone-fill.is-full::after { background: var(--kb-amber); }

.kb-zone-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  aspect-ratio: calc(var(--cols) / var(--rows) * 0.92);
  border-radius: var(--kb-r-m);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols) - 1px),
      color-mix(in srgb, var(--kb-line) 70%, transparent) 0 calc(100% / var(--cols))),
    color-mix(in srgb, var(--kb-surface-2) 80%, transparent);
  border: 1px dashed transparent;
  transition: border-color .15s, background-color .15s;
}
.kb-zone-grid.is-target {
  border-color: var(--kb-green);
  background-color: var(--kb-green-lo);
}
.kb-cell { pointer-events: none; }

/* ---------- אריח ---------- */
.kb-tile {
  position: absolute;
  display: grid; align-content: center; justify-items: center; gap: 1px;
  padding: 2px;
  border-radius: var(--kb-r-s);
  background: color-mix(in srgb, var(--kb-surface) calc(88% - var(--decay, 0) * 18%), var(--kb-red-lo));
  border: 1px solid var(--kb-line);
  /* הדהייה היא הסיפור כולו: פריט טרי רווי ובהיר, פריט שפג
     מאבד צבע ונוטה הצידה. */
  filter: saturate(calc(0.35 + var(--fresh, 1) * 0.85));
  transform: rotate(var(--tilt, 0deg));
  transition: left .22s cubic-bezier(.2,.9,.3,1), top .22s cubic-bezier(.2,.9,.3,1),
              filter .4s, background .4s, opacity .2s, transform .2s;
  touch-action: none;
  overflow: hidden;
}
.kb-tile-emoji { font-size: clamp(1.1rem, 4.4vw, 1.7rem); line-height: 1; }
.kb-tile-name  { font-size: .56rem; text-align: center; line-height: 1.05;
                 max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-tile-qty   { position: absolute; top: 2px; inset-inline-end: 3px;
                 font-size: .56rem; font-weight: 700; color: var(--kb-ink-soft); }

.kb-tile-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

.kb-tile[data-state="soon"]     { border-color: var(--kb-amber); }
.kb-tile[data-state="critical"] { border-color: var(--kb-amber); background: var(--kb-amber-lo);
                                  animation: kb-nudge 2.6s ease-in-out infinite; }
.kb-tile[data-state="expired"]  { border-color: var(--kb-red); background: var(--kb-red-lo); opacity: .72; }
.kb-tile[data-state="stable"]   { filter: none; }

/* פריט במקום הלא נכון — סימון עדין בפינה, לא אזהרה צעקנית. */
.kb-tile.is-misplaced .kb-tile-ring {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kb-amber) 60%, transparent);
}
.kb-tile.is-pending { opacity: .55; }
.kb-tile.is-lifted  { opacity: .18; }
.kb-tile.is-leaving { opacity: 0; transform: scale(.7) rotate(-8deg); }

@keyframes kb-nudge {
  0%, 88%, 100% { transform: rotate(var(--tilt, 0deg)); }
  92%  { transform: rotate(calc(var(--tilt, 0deg) - 4deg)); }
  96%  { transform: rotate(calc(var(--tilt, 0deg) + 4deg)); }
}

/* האריח הצף בזמן גרירה */
.kb-ghost {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 80;
  pointer-events: none; opacity: .96;
  transform-origin: center;
  scale: 1.12;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: none;
}

/* צללית הנחיתה */
.kb-cell-hint {
  position: absolute; z-index: 5; pointer-events: none;
  border-radius: var(--kb-r-s);
  border: 2px dashed var(--kb-green);
  background: color-mix(in srgb, var(--kb-green) 12%, transparent);
  transition: all .08s linear;
}
.kb-cell-hint.is-swap {
  border-color: var(--kb-amber);
  background: color-mix(in srgb, var(--kb-amber) 14%, transparent);
}

/* מתחת ל-480px עמודת הדלת גוזלת רבע מהרוחב, והתאים בגוף המקרר יורדים
   ל-~39px — קטן מדי גם לאצבע וגם לשם המוצר. הדלת יורדת לשורה משלה,
   הגוף מקבל את כל הרוחב, והתא גדל ל-~58px. הגאומטריה (6×2 וכו׳) לא
   משתנה: היא מאומתת בשרת, ורשת שונה לפי מסך הייתה שוברת אותה. */
@media (max-width: 480px) {
  .kb-fridge-body { grid-template-columns: 1fr; }
  /* גם המקפיא והמזווה יורדים לעמודה אחת. בשניים-לרוחב המזווה (6×3)
     קיבל חצי מסך והתא שלו התכווץ ל-24px — קטן מכל אצבע. */
  .kb-cabinet--side { grid-template-columns: 1fr; }
  .kb-door        { order: 2; }
  /* הדלת רחבה ונמוכה (4×3): ביחס הרגיל התאים שלה היו יוצאים שטוחים
     בעמוד רחב. 1.6 מחזיר אותם לגובה של תא מדף רגיל. */
  .kb-door .kb-zone-grid { aspect-ratio: calc(4 / 3 * 1.6); }
}

@media (min-width: 720px) {
  .kb-fridge-body { grid-template-columns: 92px 1fr; }
  .kb-tile-name   { font-size: .62rem; }
}