/* המטבח המשפחתי - פריסה ורכיבים.
   הצבעים מגיעים כולם מהטוקנים ב-theme.css. אין כאן שום קוד צבע קשיח. */

/* ---------- פריסה ---------- */
/* design.md סעיף 4: עמודה אחת ממורכזת ~560px, גם במחשב. פנקס מונח על שולחן. */

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 20px 64px;
  min-height: 100vh;
}

/* רק מסך הרשימה מתרחב, כדי לתת מקום לשלושה כרטיסים בשורה.
   הטפסים נשארים צרים - שדה טקסט ברוחב 900px קשה לקריאה. */
.page--wide {
  max-width: 960px;
}

@media (min-width: 720px) {
  .page {
    padding: 56px 24px 88px;
  }
}

/* ---------- כותרת ---------- */

.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

/* מסך ההתחברות: אין כותרת/קישור חזרה, רק מתג הערכה - שיישאר במקומו
   הרגיל (משמאל ב-RTL) גם כשהוא הילד היחיד בכותרת */
.masthead--login {
  justify-content: flex-end;
}

/* יציאה + מתג הערכה מקובצים יחד בקצה הכותרת, בכל מסך שאחרי ההתחברות */
.masthead__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logout-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 4px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.logout-link:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.logout-link[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* איור הפתיחה בהשראת מטבח מרוקאי. פלטת הצבעים שלו עצמאית ולא נגזרת
   מהטוקנים - זו חריגה מכוונת ויחידה, ראו design.md סעיף 3 */
.login-hero {
  margin-bottom: 24px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.login-hero svg {
  display: block;
  width: 100%;
  height: auto;
}

.masthead__titles {
  display: grid;
  gap: 4px;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 400;
}

h1 {
  margin: 0;
  font-size: 35px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.counter {
  font-size: 14px;
  color: var(--muted);
}

.screen-title {
  margin: 0 0 28px;
  font-size: 27px;
  font-weight: 600;
}

/* ---------- מתג התצוגה ---------- */

.theme-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--shade);
  border: 1px solid var(--rule);
  border-radius: 999px;
  flex: none;
}

.theme-switch__option {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.theme-switch__option[aria-pressed='true'] {
  background: var(--panel);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.theme-switch__option:hover:not([aria-pressed='true']) {
  color: var(--ink);
}

/* ---------- כפתורים ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.btn--secondary:hover {
  background: var(--shade);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.btn--block {
  width: 100%;
}

.actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

/* padding-block מרים את יעד המגע מעל 24px בלי לשנות את המראה */
.link-back {
  display: inline-block;
  padding-block: 4px;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.link-back:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

/* ---------- לוח / גיליון ---------- */

.sheet {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px 20px;
}

/* ---------- חיפוש וסינון ---------- */
/* design.md סעיף 6: הפקדים משניים ושקטים. אותו קו תחתון של שדות הטופס,
   בלי מסגרת ובלי רקע - כדי שהמסך לא ייראה כמו טבלה עם סרגל כלים. */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 20px;
}

.filters__search {
  flex: 1 1 180px;
  min-width: 0;
}

.filters__category {
  flex: 1 1 120px;
  min-width: 0;
}

.filters__control {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 2px;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
}

.filters__control::placeholder {
  color: var(--muted);
}

.filters__favorites {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  flex: 0 0 auto;
  padding-block: 8px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
}

.filters__favorites:hover {
  color: var(--ink);
}

.filters__favorites input {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  /* הוי מקבל את הטרהקוטה של המוצר במקום הכחול של מערכת ההפעלה */
  accent-color: var(--accent);
}

.filters__control:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* ---------- רשימת המתכונים ---------- */

.list-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--muted);
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--rule);
}

.recipe-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* השורה כולה לחיצה ומובילה לעריכה, שהיא גם הצפייה במתכון (PRD סעיף 3.6) */
.recipe-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s ease;
}

/* השורה מתבהרת ב-hover ולא מתכהה: על --shade הטקסט המשני יורד ל-4.34
   בערכה הבהירה, מתחת ל-AA. על --panel הוא 5.06, והשורה נראית מורמת מהנייר. */
.recipe-row:hover {
  background: var(--panel);
}

.recipe-row__num {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: 22px;
}

/* השם מתכווץ ונשבר לשורות כשצריך. בלי זה, שם ארוך גולש מהשורה בטלפון. */
.recipe-row__name {
  font-size: 18px;
  font-weight: 500;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  /* קישור לצורך נגישות ומקלדת, אבל נקרא כשם בתוך רשימה ולא כקישור */
  color: inherit;
  text-decoration: none;
}

/* קו הנקודות ממלא את מה שנשאר, ומתכווץ עד שנגמר המקום */
.recipe-row__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-4px);
  min-width: 8px;
}

/* טקסט התגית ב-ink ולא ב-muted: muted על tag נותן ניגודיות 4.11 בערכה
   הבהירה, מתחת לסף AA לטקסט רגיל. ההיררכיה נשמרת דרך הגודל והמשקל. */
.recipe-row__tag {
  flex: none;
  font-size: 13px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tag);
  color: var(--ink);
  white-space: nowrap;
}

/* כוכב המועדף. שקט כשהוא כבוי, טרהקוטה כשהוא דלוק - בלי אימוג'י,
   כדי שהצורה והצבע יהיו שלנו ולא של מערכת ההפעלה (design.md סעיף 7). */
.recipe-row__star {
  flex: none;
  align-self: center;
  appearance: none;
  border: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.recipe-row__star svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.recipe-row__star:hover {
  color: var(--accent);
  background: var(--shade);
}

.recipe-row__star[aria-pressed='true'] {
  color: var(--accent);
}

.recipe-row__star[aria-pressed='true'] svg {
  fill: currentColor;
}

/* ---------- רשת הכרטיסים ---------- */
/* design.md סעיף 7 פריט 6: זו רשת כרטיסים, אבל לא הכרטיס הגנרי.
   --panel עם קו --rule דק, פינה מתונה, ובלי צל בכלל - תמונה שטוחה
   על נייר, לא כרטיס שמרחף. */

.recipe-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.recipe-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.recipe-card:hover {
  border-color: var(--accent);
}

/* flex: none - בלי זה הכרטיס מותח את אזור התמונה כשהוא צריך להשוות
   גובה לשכניו, ואז כל תמונה יוצאת בגובה אחר */
/* היחס יושב גם על המעטפת וגם על התמונה, כדי ששני סוגי הריבועים
   ייצאו מאותו חישוב בדיוק. הקו המפריד עבר לשם, אחרת הוא נספר בגובה
   של ריבוע אחד ולא של השני והם נבדלים בפיקסל. */
.recipe-card__media {
  flex: none;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--shade);
}

/* היחס יושב על התמונה עצמה ולא על המעטפת: height: 100% מול מעטפת
   בגובה אוטומטי לא נפתר, והתמונה נופלת ליחס המקורי של הקובץ.
   object-fit: cover חותך אותה ליחס במקום למתוח (design.md סעיף 7 פריט 1). */
.recipe-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* מתכון בלי תמונה: מלבן נייר חשוף באותו יחס 3:2 בדיוק כמו תמונה אמיתית.
   בלי flex-grow - הוא היה מותח את המלבן מעבר לגודל של התמונות, וכל
   העניין הוא שכל הריבועים ייראו זהים. */
.recipe-card__media--blank {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: var(--paper);
}

.recipe-card__blank-note {
  font-size: 13px;
  color: var(--muted);
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 8px 14px;
}

/* min-height שומר מקום לשתי שורות שם בכל כרטיס, גם כשהשם קצר.
   בלי זה כרטיס עם שם בשורה אחת נמוך משכנו, והרשת יוצאת לא אחידה. */
.recipe-card__name {
  display: block;
  padding: 14px 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  min-height: calc(2.7em + 14px);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* margin-top: auto מצמיד את התחתית לתחתית הכרטיס, וכך התגיות
   והכוכבים מיושרים בין כרטיסים בעלי שמות באורך שונה */
.recipe-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.recipe-card__foot .recipe-row__star {
  margin-inline-start: auto;
}

/* ---------- דפדוף ---------- */
/* design.md סעיף 5: שקט כמו שאר הפקדים. עם 20 עמודים סרגל של 20 מספרים
   היה הופך לדבר הכי בולט במסך, ולכן מוצג חלון סביב העמוד הנוכחי. */

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
}

.pager__btn {
  appearance: none;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.pager__btn:hover:not([disabled]):not([aria-current='page']) {
  background: var(--shade);
  border-color: var(--accent);
}

.pager__btn[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
}

.pager__btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.pager__gap {
  min-width: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- מצבים ---------- */

.state {
  text-align: center;
  padding: 48px 16px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.state__title {
  font-size: 20px;
  font-weight: 500;
}

.state__hint {
  font-size: 15px;
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.7;
}

.state--blocked {
  background: var(--shade);
  border: 1px dashed var(--rule);
  border-radius: 14px;
}

/* שלד טעינה בצורת הכרטיסים, לא spinner */
.skeleton-card {
  display: grid;
  gap: 12px;
  padding: 0 0 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}

.skeleton-card__media {
  aspect-ratio: 3 / 2;
  background: var(--shade);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--shade);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton-bar--name {
  width: 60%;
  margin-inline-start: 14px;
}

.skeleton-bar--tag {
  width: 32%;
  margin-inline-start: 14px;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-bar {
    animation: none;
  }
}

/* ---------- טפסים ---------- */

.form {
  display: grid;
  gap: 22px;
}

.field {
  display: grid;
  gap: 7px;
}

.field__label {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.field__control {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 9px 2px;
  font-size: 17px;
  font-weight: 300;
  border-radius: 0;
}

.field__control:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* resize: none כי השדה גדל לבד עם התוכן. ידית מתיחה שהגרירה שלה
   נמחקת בהקשה הבאה היא אפשרות שבורה, לא אפשרות נוספת. */
textarea.field__control {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px;
  resize: none;
  line-height: 1.7;
}

textarea.field__control:focus {
  border-color: var(--accent);
}

select.field__control,
select.filters__control {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: 12px calc(50% - 2px), 17px calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* החץ מצויר בשמאל, ולכן הריפוד חייב להיות בצד הסיום - לא בצד ההתחלה */
  padding-inline-end: 32px;
}

.field--invalid .field__control {
  border-color: var(--accent);
}

.field__error {
  font-size: 14px;
  color: var(--accent);
  min-height: 0;
}

.field__error:empty {
  display: none;
}

/* ---------- אזור התמונה ---------- */

.dropzone {
  border: 1px dashed var(--rule);
  border-radius: 12px;
  background: var(--shade);
  /* היחס 3:2 נשמר, אבל מוגבל ברוחב כדי ששדה לא-חובה לא ישתלט על הטופס */
  aspect-ratio: 3 / 2;
  max-width: 340px;
  display: grid;
  place-content: center;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  overflow: hidden;
  position: relative;
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--accent);
}

/* שדה הקובץ עצמו מוסתר ויזואלית, ולכן טבעת המיקוד שלו לא נראית.
   כשהוא מקבל מיקוד במקלדת, מסמנים את האזור שהמשתמש רואה. */
.field:has(input[type='file']:focus-visible) .dropzone {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent);
}

.dropzone__hint {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.dropzone__cta {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
}

.dropzone__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- מסך הקטגוריות ---------- */

#existing {
  margin-top: 32px;
}

.list-note {
  margin: 14px 2px 0;
  font-size: 13px;
  color: var(--muted);
}

.category-row__count {
  flex: none;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* השורה הפתוחה יוצאת ממבנה השורה הרגיל: השדה והפעולות מתחתיו */
.recipe-row--editing {
  align-items: flex-start;
  cursor: default;
  background: var(--shade);
  border-radius: 8px;
}

.recipe-row--editing:hover {
  background: var(--shade);
}

.category-edit {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.category-edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.category-edit__actions .btn {
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px;
}

/* המחיקה נדחפת לקצה השני, כדי שלא תישב צמוד ל"שמור" */
.category-edit__actions .btn-danger {
  margin-inline-start: auto;
}

/* ---------- מסך המתכון ---------- */

.recipe__head {
  margin-bottom: 22px;
}

.recipe__name {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.recipe__meta {
  margin: 0;
}

.recipe__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 26px;
}

.recipe__section + .recipe__section {
  margin-top: 26px;
}

.recipe__section-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* pre-wrap שומר את ירידות השורה שהמשתמש הקליד ואת אלה שהגיעו מהייבוא.
   בלעדיו רשימת מרכיבים מתמוטטת לפסקה אחת ארוכה. */
.recipe__body {
  margin: 0;
  white-space: pre-wrap;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

/* ---------- הדפסה ---------- */
/* design.md סעיף 7: בדף המודפס אין כותרת אפליקציה, אין מתג תצוגה,
   אין כפתורים ואין ניווט - רק המתכון. */

@media print {
  /* הטוקנים נדרסים גם בערכה הכהה: דף מודפס בשחור מבזבז דיו ולא נקרא.
     הכלל יושב אחרי theme.css ולכן גובר עליו. */
  [data-theme] {
    --paper: #FFFFFF;
    --panel: #FFFFFF;
    --ink: #000000;
    --muted: #444444;
    --accent: #000000;
    --accent-ink: #FFFFFF;
    --rule: #999999;
    --tag: #FFFFFF;
    --shade: #FFFFFF;
    color-scheme: light;
  }

  .no-print,
  .masthead,
  .actions,
  .theme-switch,
  .pager,
  .filters {
    display: none !important;
  }

  /* שוליים צרים מברירת המחדל של הדפדפן, כדי להרוויח מקום לעמוד אחד */
  @page {
    margin: 1.2cm;
  }

  .page {
    max-width: none;
    padding: 0;
    min-height: 0;
  }

  /* כל המידות מכווצות ביחס למסך: המטרה היא מתכון שלם בדף אחד */
  .recipe__head {
    margin-bottom: 8pt;
  }

  .recipe__name {
    font-size: 17pt;
    margin-bottom: 5pt;
  }

  .recipe__body {
    font-size: 10pt;
    line-height: 1.45;
  }

  .recipe__section-title {
    font-size: 9pt;
    color: #000;
    margin-bottom: 3pt;
  }

  .recipe__section + .recipe__section {
    margin-top: 10pt;
  }

  .recipe-row__tag {
    border: 1px solid #999;
    padding: 1px 7px;
    font-size: 9pt;
  }

  /* חצי מהגובה שהיה. התמונה היא ההקשר, לא הנושא - בדף מודפס
     המרכיבים וההוראות הם מה שצריך מקום */
  .recipe__image {
    max-height: 4.5cm;
    width: auto;
    max-width: 100%;
    margin-bottom: 10pt;
    border-color: #999;
  }

  /* בכוונה בלי break-inside: avoid. הוא נשמע נכון אבל פועל נגד המטרה -
     מקטע שלא נכנס בשלמותו נדחף כולו לעמוד הבא, ואז חצי מהעמוד הראשון
     נשאר ריק. עדיף שהטקסט יזרום. */
  .recipe__body {
    orphans: 3;
    widows: 3;
  }

  /* מתכונים ארוכים בלבד. ה-JS מדליק את זה לפי מספר השורות, ולכן
     הרוב המכריע נשאר בגודל הנוח לקריאה ליד הכיריים. */
  .recipe[data-print='compact'] .recipe__body {
    font-size: 8.5pt;
    line-height: 1.3;
  }

  .recipe[data-print='compact'] .recipe__image {
    max-height: 3cm;
    margin-bottom: 7pt;
  }

  .recipe[data-print='compact'] .recipe__name {
    font-size: 15pt;
  }

  .recipe[data-print='compact'] .recipe__section + .recipe__section {
    margin-top: 7pt;
  }

  a[href]::after {
    content: '';
  }
}

/* ---------- מחיקה ---------- */
/* design.md סעיף 5: המחיקה לא יושבת בשורה אחת עם "שמור" ולא נושאת את
   אותו משקל. אזור משלה, מתחת לקו, והכי שקט במסך. */

.link-quiet {
  justify-self: start;
  appearance: none;
  border: 0;
  background: none;
  padding: 5px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-quiet:hover {
  color: var(--accent);
}

.danger-zone {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
}

.btn-danger {
  appearance: none;
  border: 0;
  background: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.btn-danger:hover {
  color: var(--accent);
  background: var(--shade);
}

/* ---------- אישור מחיקה ---------- */
/* דיאלוג של הדף ולא confirm של הדפדפן: אותו לבן-כחול של מערכת ההפעלה
   שהוצא מרשימת הקטגוריות אין לו מקום גם כאן. */

.dialog {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  padding: 24px 22px 20px;
  max-width: 380px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}

.dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.dialog__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dialog__body {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.dialog__actions {
  display: flex;
  gap: 10px;
}

.dialog__actions .btn {
  flex: 1;
}

/* ---------- הודעות ---------- */

.notice {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.6;
  border: 1px solid var(--rule);
  background: var(--shade);
}

.notice--error {
  border-color: var(--accent);
  color: var(--accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- החלון הנפתח של רשימת הקטגוריות ---------- */
/* כברירת מחדל החלון מצויר על ידי מערכת ההפעלה ולא על ידי הדף: רקע לבן
   וסימון כחול, שני צבעים שלא קיימים בפנקס. appearance: base-select מעביר
   אותו לרשות ה-CSS. בדפדפן שלא תומך, החלון נשאר כפי שהיה - בלי שבירה. */

@supports (appearance: base-select) {
  select.field__control,
  select.filters__control,
  ::picker(select) {
    appearance: base-select;
  }

  /* השדה עצמו חוזר למראה שלנו: קו תחתון בלבד, בלי מסגרת ובלי רקע */
  select.field__control,
  select.filters__control {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: start;
    /* החץ הוא כבר אלמנט ולא תמונת רקע, ולכן אין צורך לפנות לו מקום בריפוד */
    padding-inline-end: 2px;
  }

  select.field__control::picker-icon,
  select.filters__control::picker-icon {
    color: var(--muted);
    transition: transform 0.18s ease;
  }

  select.field__control:open::picker-icon,
  select.filters__control:open::picker-icon {
    transform: rotate(180deg);
  }

  /* החלון בצבע הנייר של העמוד, לא לבן של מערכת ההפעלה. הצל והמסגרת הם
     מה שמפריד אותו מהרקע, כי הצבע עצמו זהה - במיוחד בערכה הכהה. */
  ::picker(select) {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 34px rgb(0 0 0 / 0.22);
  }

  option {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 300;
    color: var(--ink);
    background: transparent;
  }

  /* הסימון בטרהקוטה - אותו צבע של כפתור "הוספת מתכון" בכל המסכים */
  option:hover,
  option:focus,
  option:checked {
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* וי הסימון שהדפדפן מוסיף מיותר כאן: השורה המסומנת כבר צבועה */
  option::checkmark {
    display: none;
  }
}