/* ============================================================================
   Hayaanshufiya — שכבת הרכיבים
   ============================================================================

   זהו גיליון הרכיבים של לוחות העיצוב, מועבר לאתר החי כפי שהוא.

   למה כפי שהוא ולא בשכתוב
   ------------------------
   הלוחות מדברים בשמות קצרים — --bg, --muted, --line, --hero-veil. תעתוק של
   חמש מאות שורות לשמות --color-* היה מזמין טעויות העתקה שאיש לא היה מוצא
   עד שמישהו מסתכל על מסך מסוים. במקום זה, מפת השמות שלמטה — ארבעים שורות —
   ממפה את השמות הקצרים לטוקנים, והרכיבים עצמם עוברים בייט‑לבייט. אותה שיטה
   בדיוק כמו aliases.css.

   למה הכול תחום ל‑.hay
   ---------------------
   שמות המחלקות כאן גנריים במתכוון: .card, .chip, .badge, .alert, .pill,
   .icon, .box, .fill, .track. על עמוד שמריץ גם ווקומרס, אלמנטור ואסטרה הם
   יתנגשו. כל חוק כאן מתוחם ל‑.hay, ולכן הוא נוגע רק במארקאפ שאנחנו כתבנו.
   השימוש: <div class="hay"> סביב הקטע שמצויר לפי הלוחות.

   תלוי ב‑tokens.css. נרשם כ‑hayaan-components ב‑mu-plugins/hayaan-design-system.php.
   ========================================================================= */

.hay {
  /* ── מפת השמות ────────────────────────────────────────────────────────
     שכבה 2 של tokens.css, בשמות שהלוחות משתמשים בהם. אין כאן ערך אחד
     קשיח: הכול מצביע לטוקן, ולכן מצב כהה עובד בלי בלוק כהה משלו. */
  --bg:            var(--color-bg);
  --surface:       var(--color-surface);
  --raised:        var(--color-surface-raised);
  --sunken:        var(--color-surface-sunken);
  --text:          var(--color-text);
  --muted:         var(--color-text-muted);
  --faint:         var(--color-text-faint);
  --line:          var(--color-border);
  --line-soft:     var(--color-border-soft);
  --line-strong:   var(--color-border-strong);
  --primary:       var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-subtle:var(--color-primary-subtle);
  --primary-deep:  var(--color-primary-deep);
  --on-primary:    var(--color-on-primary);
  --success:       var(--color-success);   --success-bg: var(--color-success-bg);
  --warning:       var(--color-warning);   --warning-bg: var(--color-warning-bg);
  --danger:        var(--color-danger);    --danger-bg:  var(--color-danger-bg);
  --info:          var(--color-info);      --info-bg:    var(--color-info-bg);
  --success-ink:   var(--color-success-ink);
  --warning-ink:   var(--color-warning-ink);
  --danger-ink:    var(--color-danger-ink);
  --info-ink:      var(--color-info-ink);
  --on-status:     var(--color-on-status);
  --chart-bar:     var(--color-chart-bar);
  --chart-peak:    var(--color-chart-peak);
  --on-hero:       var(--color-on-hero);
  --hero-quiet:    var(--color-hero-quiet);
  --hero-veil:     var(--color-hero-veil);

  /* ‎.hay עצמו הוא מה ש‑body היה בלוחות. */
  direction: rtl;
  font-family: 'Heebo', 'Assistant', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.hay, .hay *{ box-sizing: border-box; }

/* ‎[hidden] חייב לנצח סגנון מוטבע.
   כלל ברירת המחדל של הדפדפן הוא ‎[hidden]{display:none}, בעל סגוליות
   נמוכה, וכל ‎style="display:flex" על אותו אלמנט גובר עליו. התוצאה שקטה
   ומטעה: סרגל הפעולות המרובות נשאר גלוי כשאין בחירה, והמשפט המתקפל
   של כל מילה נפתח כבר בטעינה. שני המקומות משתמשים ב‑hidden כמתג. */
.hay [hidden]{ display: none !important; }
/* ‎.hay עצמו ולא רק צאצאיו. הכלל היה ‎.hay * בלבד, ולכן אלמנט השורש —
   זה שנושא את המחלקה — נשאר ב‑content-box: ‎width:100% ועוד ריפוד של
   24px לכל צד נתנו 828px בתוך 780, והמסך גלש ונחתך בקצה. */
.hay{
  margin: 0; direction: rtl;
  font-family: 'Heebo', 'Assistant', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.hay a{ color: var(--primary-deep); text-decoration: none; }
.hay a:hover{ color: var(--primary-hover); text-decoration: underline; }

/* אסטרה פולטת ‎<style> מוטבע מהמתאים־אישית עם
   ‎.ast-single-post .entry-content a { text-decoration: underline } —
   סגוליות (0,2,1), גבוהה מ‑.hay a שהוא (0,1,1). התוצאה היא קו תחתון על כל
   קישור בתוך המסכים שלנו, כולל כרטיס שכולו קישור: גם הכותרת וגם תת‑הכותרת
   שלו נמתחו. הלוחות אינם מכילים קו תחתון בשום מקום במצב הרגיל.
   הסלקטור מאויית במלואו ולא נעטף ב‑:where(), כי :where() מאפס סגוליות
   ואז הכלל של אסטרה היה ממשיך לנצח. */
.ast-single-post .entry-content .hay a{ text-decoration: none; }
.ast-single-post .entry-content .hay a:hover{ text-decoration: underline; }

/* אסטרה פולטת גם ‎.entry-content[data-ast-blocks-layout] > * עם
   ‎max-width: var(--wp--custom--ast-content-width-size) ו‑margin אוטומטי —
   סגוליות (0,2,1). כל מסך שלנו שמרונדר דרך the_content הוא בדיוק "ילד
   ישיר של .entry-content", ולכן נחתך ל‑1200px וממורכז, בעוד הלוחות
   מצוירים ב‑1440 מלא־רוחב. זה חל רק על עמודים שהתוכן שלהם נוצר בעורך
   הבלוקים — כלומר הפער מופיע בעמוד אחד ולא בשני, וזה מה שמקשה לתפוס
   אותו. (0,3,1) מנצח. */
.entry-content[data-ast-blocks-layout] > .hay {
  max-width: none;
  margin-inline: 0;
}

/* כרטיס או כפתור שכולו קישור אינו קישור טקסט: אין לו קו תחתון גם בריחוף.
   הלוחות כותבים את זה כסגנון מוטבע (text-decoration: none על ה‑<a> עצמו),
   ולכן שם הכלל של אסטרה נוצח מאליו. */
.hay a.card, .hay a.btn, .hay a.nav-item, .hay a.pill,
.ast-single-post .entry-content .hay a.card,
.ast-single-post .entry-content .hay a.btn,
.ast-single-post .entry-content .hay a.nav-item,
.ast-single-post .entry-content .hay a.pill,
.hay a.card:hover, .hay a.btn:hover, .hay a.nav-item:hover, .hay a.pill:hover,
.ast-single-post .entry-content .hay a.card:hover,
.ast-single-post .entry-content .hay a.btn:hover,
.ast-single-post .entry-content .hay a.nav-item:hover,
.ast-single-post .entry-content .hay a.pill:hover{ text-decoration: none; }
/* כותרות יורשות את הדיו של המכולה, ולא את זו של התבנית.
   אסטרה מגדירה ‎h1..h6 { color: var(--ast-global-color-2) } — כלל על
   שם אלמנט, שגובר על הורשה מ‑.hay. הוא נפתר ל‑#1E293B, כחול־פלדה כהה,
   ובמצב כהה זה 1.17:1 מול המשטח: כותרת שקיימת ואי אפשר לקרוא אותה.
   הסלקטור כאן הוא (0,1,1) ולכן הוא מנצח את (0,0,1) שלה. */
.hay h1, .hay h2, .hay h3, .hay h4, .hay h5, .hay h6{ color: inherit; }
/* ‎label ו‑legend מאותה סיבה בדיוק, ומאותו קובץ: אסטרה צובעת אותם בשם
   האלמנט, וכל תווית טופס יצאה ‎#1E293B — 1.27:1 על ‎--bg במצב כהה. נמצא
   על מסך ההתחברות, שבו כל תוכן העמוד הוא טופס. */
.hay label, .hay legend{ color: inherit; }
.hay h1, .hay h2, .hay h3, .hay p{ margin: 0; }
.hay .num{ font-variant-numeric: tabular-nums; }

/* .glass-card in input.css: bg-surface, border line-soft, rounded-xl
   (--radius-xl 1.5rem), shadow-2. */
/* max-width: none אינו מיותר — הוא הגנה.
   ל‑wp-admin יש מחלקה .card משלו עם max-width: 520px, ומכיוון שגיליון
   הרכיבים שלנו לא הצהיר על התכונה הזאת בכלל, הערך של וורדפרס חל בלי
   התנגדות: טבלת הלידים נכלאה ב‑520px בתוך מכולה של 1,285.
   תיחום ל‑.hay מונע מהחוקים שלנו לדלוף החוצה; הוא לא מונע מחוקים
   זרים לדלוף פנימה. שם מחלקה גנרי מחייב גם את ההגנה ההפוכה. */
.hay .card{
  background: #FFFFFF !important;
  border: 2px solid #1F1914 !important;
  border-radius: 4px !important;
  box-shadow: -5px 5px 0 #F0EAE3 !important;
  padding: 24px;
  display: flex; flex-direction: column;
  max-width: none;
  transition: transform var(--duration-fast, 120ms) ease, box-shadow var(--duration-fast, 120ms) ease;
}
.hay .card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hay .card-title{ font-size: 1.0625rem; font-weight: 800; line-height: 1.35; color: #1F1914; }
.hay .card-sub{ font-size: 0.8125rem; font-weight: 500; color: var(--muted); line-height: 1.4; margin-top: 2px; }

.hay .page-title{ font-size: 1.875rem; font-weight: 800; line-height: 1.2; color: #1F1914; }
.hay .page-sub{ font-size: 0.875rem; font-weight: 500; color: var(--muted); margin-top: 4px; }

/* .label-chip in input.css: rounded-sm (6px), text-xs, font-bold.
   The uppercase + letter-spacing the old markup applied is dropped —
   Hebrew has no uppercase and the tracking only hurt legibility. */
.hay .chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4;
  border: 1.5px solid #1F1914;
  background: #FAF8F5; color: #1F1914;
}
.hay .chip--success{ background: #E8F5E9; color: #256F46; border-color: #256F46; }
.hay .chip--warning{ background: #FFF8E1; color: #D97706; border-color: #D97706; }
.hay .chip--primary{ background: #FFF4E5; color: #E07818; border-color: #E07818; }

.hay .pill{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 4px;
  background: #FFFFFF !important; border: 2px solid #1F1914 !important;
  box-shadow: -2px 2px 0 #1F1914 !important;
  font-weight: 700; color: #1F1914;
}

/* .btn in input.css: tactile comic button */
.hay .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 4px;
  font-family: inherit; font-size: 0.90625rem; font-weight: 800;
  border: 2px solid #1F1914 !important; cursor: pointer;
  box-shadow: -2.5px 2.5px 0 #1F1914 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease !important;
}
.hay .btn:hover{ transform: translate(1.5px, -1.5px); box-shadow: -3.8px 3.8px 0 #1F1914 !important; }
.hay .btn:active{ transform: translate(-1.5px, 1.5px) scale(0.985); box-shadow: -1px 1px 0 #1F1914 !important; }
.hay .btn--primary{ background: #E07818 !important; color: #FFFFFF !important; }
.hay .btn--ghost{ background: #FFFFFF !important; color: #1F1914 !important; }
.hay .btn--quiet{ background: #FAF8F5 !important; color: #1F1914 !important; }
.hay .btn--sm{ min-height: 38px; padding: 0 14px; font-size: 0.84375rem; }

.hay .track{ width: 100%; height: 8px; border-radius: 9999px; background: var(--sunken); overflow: hidden; }
.hay .fill{ height: 100%; border-radius: 9999px; background: var(--primary-deep); }

.hay .stat-number{ font-size: 1.875rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hay .stat-label{ font-size: 0.8125rem; font-weight: 500; color: var(--muted); line-height: 1.4; }

.hay .page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 16px 36px;
  border-bottom: 2px solid #1F1914 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.03);
}
.hay .brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 1.25rem; font-weight: 900; color: #1F1914 !important;
  letter-spacing: -0.02em; text-decoration: none !important;
}
.hay .brand > span { color: #E07818 !important; display: inline-flex; }

.hay .nav-item{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: 4px;
  font-size: 0.90625rem; font-weight: 700; color: #62564B;
  transition: all 0.15s ease; text-decoration: none !important;
}
.hay .nav-item:hover{
  color: #1F1914; background: #FAF8F5; text-decoration: none !important;
}
.hay .nav-item[aria-current='page']{
  background: #FFF4E5 !important;
  color: #E07818 !important;
  border: 2px solid #1F1914 !important;
  box-shadow: -2px 2px 0 #1F1914 !important;
  font-weight: 800 !important;
}
.hay .icon{
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.hay .icon--sm{ width: 16px; height: 16px; stroke-width: 2; }
.hay .icon--lg{ width: 24px; height: 24px; }

.hay .icon-tile{
  width: 36px; height: 36px; border-radius: 4px;
  border: 1.5px solid #1F1914;
  display: flex; align-items: center; justify-content: center;
  background: #FAF8F5; color: #1F1914; flex: none;
}
.hay .icon-tile--primary{ background: #FFF4E5; color: #E07818; }

.hay .chip--danger{ background: var(--danger-bg); color: var(--danger); }
.hay .chip--info{ background: var(--info-bg); color: var(--info); }

/* .field in input.css: tactile comic input */
.hay .field{
  width: 100%; min-height: 46px; padding: 0 16px; border-radius: 4px;
  background: #FFFFFF !important; border: 2px solid #1F1914 !important;
  box-shadow: -2px 2px 0 #F0EAE3 !important;
  color: #1F1914; font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  transition: all 0.15s ease;
}
.hay .field:focus, .hay .field--focus{
  outline: none; border-color: #E07818 !important; box-shadow: -3px 3px 0 #E07818 !important;
}
.hay .field--ltr{ direction: ltr; text-align: start; }
.hay .field::placeholder{ color: #978778; }

/* .filter-pill in input.css: tactile comic filter button */
.hay .filter-pill{
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border-radius: 4px; font-size: 0.875rem; font-weight: 700;
  border: 2px solid #1F1914 !important; color: #62564B !important; background: #FFFFFF !important;
  box-shadow: -2px 2px 0 #F0EAE3 !important;
  cursor: pointer; transition: all 0.15s ease;
}
.hay .filter-pill:hover{
  transform: translate(1px, -1px);
  box-shadow: -3px 3px 0 #F0EAE3 !important;
  color: #1F1914 !important;
  text-decoration: none;
}
.hay .filter-pill[aria-pressed='true'], .hay .filter-pill[aria-current]{
  background: #FFF4E5 !important; color: #E07818 !important; border-color: #1F1914 !important;
  box-shadow: -2.5px 2.5px 0 #1F1914 !important;
  font-weight: 800 !important;
}

.hay .card-accent-top{ position: relative; overflow: hidden; }
.hay .card-accent-top::before{
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--primary);
}

.hay .skeleton{ border-radius: 4px; background: #FAF8F5; }

/* Segmented control — tactile container */
.hay .seg{ display: inline-flex; gap: 4px; padding: 4px; border-radius: 4px; background: #FAF8F5; border: 2px solid #1F1914; }
.hay .seg > button, .hay .seg > a{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px; border-radius: 4px; border: 0;
  font-family: inherit; font-size: 0.875rem; font-weight: 700;
  background: transparent; color: #62564B; cursor: pointer;
  transition: all 0.15s ease;
}
.hay .seg > button[aria-pressed='true'], .hay .seg > a[aria-current]{
  background: #FFF4E5 !important; color: #E07818 !important; font-weight: 800;
  border: 1.5px solid #1F1914 !important;
  box-shadow: -1.5px 1.5px 0 #1F1914;
}

/* Word row. One row = one word — tactile paper card. */
.hay .word-row{
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 4px;
  background: #FFFFFF !important; border: 2px solid #1F1914 !important;
  box-shadow: -3px 3px 0 #F0EAE3 !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hay .word-row:hover{
  transform: none !important;
  box-shadow: -3px 3px 0 #F0EAE3 !important;
  border-color: #E07818 !important;
}
.hay .word-row--selected{
  border-color: #1F1914 !important;
  background: #FFFDF8 !important;
  box-shadow: -3.5px 3.5px 0 #1F1914 !important;
}
.hay .word-row--shufi-context{
  border-color: #E07818 !important;
  box-shadow: -3px 3px 0 #E07818 !important;
}

.hay .box{
  width: 24px; height: 24px; border-radius: 4px; flex: none;
  border: 2px solid #1F1914; background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; color: transparent;
  cursor: pointer; transition: all 0.15s ease;
}
.hay .box:hover{
  border-color: #E07818;
}
.hay .box--on{ background: #E07818 !important; border-color: #1F1914 !important; color: #FFFFFF !important; }

.hay .ghost-btn::after, .hay .field-action::after{
  content: ''; position: absolute; inset: -6px;
}
.hay .ghost-btn{
  position: relative;
  width: 34px; height: 34px; border-radius: 4px; flex: none;
  border: 1.5px solid #1F1914;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #1F1914; cursor: pointer;
  box-shadow: -1.5px 1.5px 0 #F0EAE3;
  transition: all 0.15s ease;
}
.hay .ghost-btn:hover{
  background: #FFF4E5;
  box-shadow: -2px 2px 0 #1F1914;
}

/* Tri-state status control: יודע / לא בטוח / לא יודע. */
.hay .tri{
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 4px;
  background: #FAF8F5; border: 2px solid #1F1914; flex: none;
}
.hay .tri > button{
  width: 34px; height: 34px; border-radius: 3px; border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #978778;
  position: relative; transition: all 0.15s ease;
}
.hay .tri > button::after{ content: ''; position: absolute; inset: -4px; }
.hay .tri > button:hover{
  background: #FFFFFF; color: #1F1914;
}
.hay .tri > button[aria-pressed='true']{
  box-shadow: -1.5px 1.5px 0 #1F1914;
}
.hay .tri > button[data-state='mastered'][aria-pressed='true']{
  background: #E8F5E9 !important; border-color: #256F46 !important; color: #256F46 !important; font-weight: 800;
  box-shadow: -1.5px 1.5px 0 #256F46 !important;
}
.hay .tri > button[data-state='learning'][aria-pressed='true']{
  background: #FFF8E1 !important; border-color: #D97706 !important; color: #D97706 !important; font-weight: 800;
  box-shadow: -1.5px 1.5px 0 #D97706 !important;
}
.hay .tri > button[data-state='new'][aria-pressed='true']{
  background: #FFEBEE !important; border-color: #B3261E !important; color: #B3261E !important; font-weight: 800;
  box-shadow: -1.5px 1.5px 0 #B3261E !important;
}

/* Flashcard. */
.hay .fc{
  position: relative; border-radius: 8px;
  background: #FFFFFF !important; border: 2.5px solid #1F1914 !important;
  box-shadow: -6px 6px 0 #F0EAE3 !important; padding: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
}

/* Three equal choices get three equal tactile buttons. */
.hay .swipe-btn{
  width: 64px; height: 64px; border-radius: 9999px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2.5px solid #1F1914 !important;
  box-shadow: -3px 3px 0 #1F1914 !important;
  transition: all 0.15s ease;
}
.hay .swipe-btn:hover{
  transform: translate(1px, -1px);
  box-shadow: -4px 4px 0 #1F1914 !important;
}
.hay .swipe-btn:active{
  transform: translate(-1px, 1px);
  box-shadow: -1.5px 1.5px 0 #1F1914 !important;
}
.hay .swipe-btn--mastered{ background: #E8F5E9 !important; color: #256F46 !important; }
.hay .swipe-btn--learning{ background: #FFF8E1 !important; color: #D97706 !important; }
.hay .swipe-btn--new{ background: #FFEBEE !important; color: #B3261E !important; }

/* Touch sizing. */
.hay .ghost-btn--lg{ width: 44px; height: 44px; border-radius: 4px; }
.hay .tri--lg{ padding: 2px; background: #FAF8F5; gap: 6px; }
.hay .tri--lg > button{
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--sunken); color: var(--faint);
}
.hay .tri--lg > button[aria-pressed='true']{ background: var(--surface); box-shadow: var(--shadow-1); }

.hay .status-dot{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 0.75rem; font-weight: 600;
}
.hay .status-dot > i{ width: 8px; height: 8px; border-radius: 9999px; display: block; }

/* Game card. Depth is the point of this screen, so it keeps the floating
   character, the contact shadow and the lift — what changed is that the
   four invented brand gradients (#E69138→#F57F17, #4FC3F7→#0288D1,
   #9C27B0→#7B1FA2, #455A64→#263238) with white text on all of them —
   #FFF on #E69138 measures 2.4:1 — became four tints already in
   tokens.css, each carrying dark ink. */
.hay .game-card{
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 32px;                    /* --radius-2xl, the largest the system has */
  box-shadow: var(--shadow-3);
}
.hay .game-stage{
  position: relative; border-radius: 32px 32px 0 0;
  display: flex; align-items: flex-end; justify-content: center;
}
/* The character overhangs the card's top edge — that overhang is what
   reads as "floating", so the grid reserves room for it. */
.hay .game-owl{
  position: absolute; left: 50%; transform: translateX(-50%);
  filter: drop-shadow(0 14px 18px var(--shadow-cast));
  pointer-events: none;
}
/* Contact shadow. Without it the character reads as pasted on. */
.hay .game-owl-shadow{
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 9999px; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--shadow-contact) 0%, transparent 70%);
}
.hay .game-body{ padding: 20px; display: flex; flex-direction: column; gap: 10px; }

/* Hover, shown as its own specimen on the states board. */
.hay .game-card--hover{ transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-3), 0 28px 48px -20px var(--shadow-lift); }

/* Settings. The current screen ships its own :root — --bg #FAF9F6,
   --radius 1.25rem, --card-border rgba(194,158,80,.22) — and redefines
   .glass-card and .label-chip inline, so it silently overrides two design
   system classes for the whole page. Everything here reads the real tokens. */
.hay .setting-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 0;
}
.hay .setting-row + .setting-row{ border-top: 1px solid var(--line-soft); }
.hay .setting-name{ font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.hay .setting-desc{ font-size: 0.8125rem; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 2px; }

/* The segmented control in the current screen is built from <div>s, so it
   takes no focus and no keyboard. These are buttons. */
.hay .seg-wide{ display: flex; gap: 3px; padding: 3px; border-radius: 14px; background: var(--sunken); }
.hay .seg-wide > button{
  flex: 1; min-height: 44px; border-radius: 11px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 0.875rem; font-weight: 500;
  background: transparent; color: var(--muted);
}
.hay .seg-wide > button[aria-pressed='true']{
  background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow-1);
}
.hay .seg-wide > button:focus-visible{ outline: 2px solid var(--primary-deep); outline-offset: 2px; }

.hay .toggle{
  /* 44px of tappable height around a 32px track: the padding belongs to
     the button, not to a wrapper span, or the target stays 32. */
  position: relative; width: 52px; height: 44px; flex: none;
  padding: 6px 0; background-clip: content-box;
  border-radius: 9999px; background: var(--faint); border: 0; cursor: pointer;
}
.hay .toggle > i{
  position: absolute; top: 9px; inset-inline-start: 3px;
  width: 26px; height: 26px; border-radius: 9999px; display: block;
  background: var(--surface); box-shadow: var(--shadow-1);
}
.hay .toggle--on{ background: var(--primary-deep); }
.hay .toggle--on > i{ inset-inline-start: calc(100% - 29px); }

.hay .danger-card{ border-color: var(--danger); }

/* Exercise library. The current screen renders all 94 PDFs as seven
   accordions with no search, no filter, no sort, and every interactive
   control — add to cart, remove, checkout, accordion header — is a
   <div>. There is not one <button> or <a> in the whole purchase flow. */
.hay .ex-card{
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
}
.hay .ex-card--in-cart{ border-color: var(--primary); background: var(--primary-subtle); }
.hay .ex-card--owned{ background: var(--sunken); }
.hay .ex-title{ font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
.hay .ex-meta{ display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--muted); }

/* The discount ladder. The tiers exist in wp_pdf_discounts — 3 files 10%,
   5 files 15% — and the screen never names them: the only hint is the
   sentence "טיפ: רכוש מספר קבצי PDF כדי לקבל הנחות", with no numbers. */
.hay .ladder{ display: flex; flex-direction: column; gap: 8px; }
.hay .ladder-step{
  display: flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; color: var(--muted);
}
.hay .ladder-step--done{ color: var(--success); font-weight: 600; }
.hay .ladder-dot{
  width: 22px; height: 22px; border-radius: 9999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--faint);
}
.hay .ladder-step--done .ladder-dot{ background: var(--success-bg); color: var(--success-ink); }

/* Interactive practice. The current test app is a fourth palette on top of
   the three already in the project: cool gray-50/200/700, blue-50/200/800
   for the reading panel, green-600 for the timer, and `font-english` —
   a class that is not defined anywhere in the codebase. */
.hay .answer{
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px; border-radius: 16px;
  background: var(--surface); border: 2px solid var(--line-soft);
  cursor: pointer; text-align: start; width: 100%; font-family: inherit;
}
.hay .answer-key{
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sunken); color: var(--muted);
  font-size: 0.875rem; font-weight: 700;
}
.hay .answer-text{ font-size: 1rem; font-weight: 500; line-height: 1.5; flex: 1; min-width: 0; }

.hay .answer--selected{ border-color: var(--primary); background: var(--primary-subtle); }
.hay .answer--selected .answer-key{ background: var(--primary); color: var(--on-primary); }

.hay .answer--correct{ border-color: var(--success); background: var(--success-bg); }
.hay .answer--correct .answer-key{ background: var(--success); color: var(--on-status); }

.hay .answer--wrong{ border-color: var(--danger); background: var(--danger-bg); }
.hay .answer--wrong .answer-key{ background: var(--danger); color: var(--on-status); }

.hay .answer:focus-visible{ outline: 2px solid var(--primary-deep); outline-offset: 2px; }

/* Reading passage. Was blue-50 on blue-200 with blue-800 text. */
.hay .passage{
  background: var(--info-bg); border: 1px solid var(--line-soft);
  border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}

/* Yanushofiya — the interactive practice system. Its own stylesheet is a
   fifth palette on top of the four already in the project: #F59E0B,
   #FBBF24, #8B5E3C, #1a120b, #f5f5f5. It also loads Heebo at 300;400;500;700
   while the rest of the app loads 400..900 — two weight sets of one family. */
.hay .mode-card{
  display: flex; flex-direction: column; gap: 8px; padding: 18px;
  border-radius: 20px; cursor: pointer; text-align: start;
  background: var(--surface); border: 2px solid var(--line-soft);
  font-family: inherit;
}
.hay .mode-card[aria-pressed='true']{ border-color: var(--primary); background: var(--primary-subtle); }

/* Audio is first class here — questions carry an attachment and a
   transcript, and the app limits how many times a clip may be played. */
.hay .audio{
  display: flex; align-items: center; gap: 16px; padding: 18px;
  border-radius: 20px; background: var(--info-bg); border: 1px solid var(--line-soft);
}
.hay .audio-play{
  width: 56px; height: 56px; border-radius: 9999px; flex: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--info); color: var(--on-status);
}
.hay .wave{ display: flex; align-items: center; gap: 3px; height: 34px; flex: 1; min-width: 0; }
.hay .wave > i{ flex: 1; border-radius: 9999px; background: var(--info); display: block; opacity: .75; }
.hay .wave > i.on{ opacity: 1; }

/* Admin. The exercise manager is default WordPress markup, in English. */
.hay .adm-row{
  display: grid; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft); font-size: 0.875rem;
}
.hay .adm-head{ font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.hay .badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 8px; border-radius: 6px;
  font-size: 0.75rem; font-weight: 700;
  background: var(--sunken); color: var(--text);
}

/* Auth. In the current forms the email and confirm-password inputs carry
   no name and no id, and every <label> is bare — no `for`. So no label is
   bound to its field: clicking it does nothing and a screen reader
   announces an unlabelled box. On the front door of the whole product. */
.hay .field-group{ display: flex; flex-direction: column; gap: 6px; }
.hay .field-label{ font-size: 0.875rem; font-weight: 600; color: var(--text); }
.hay .field-wrap{ position: relative; display: flex; }
.hay .field-icon{
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); display: flex; pointer-events: none;
}
.hay .field-action{
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
}
/* Declared AFTER .field-action: equal specificity, so order decides. */
.hay .field-action--lg{ width: 44px; height: 44px; }

.hay .field--error{ border-color: var(--danger); }
.hay .field-note{ font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.hay .field-note--error{ color: var(--danger); display: flex; align-items: center; gap: 6px; }

.hay .link-touch{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.875rem; font-weight: 600;
}

/* ── מצבי ריק, טעינה, הצלחה ושגיאה ──────────────────────────────────────
   לוח States מונה חמישה־עשר מצבים שהמערכת כבר מייצרת, ומעיר עליהם:
   "עד היום כל אחד מהם מעוצב אחרת בכל אפליקציה". וזה מדויק — הטעינה
   הייתה ‎text-sm text-stone-400 ‏(sand-400 כטקסט, 2.32:1)‎, השגיאה
   ‎text-xs text-red-500 ‏(אדום גולמי של Tailwind)‎, וה"אין יחידות" היה
   ‎style="opacity:0.6" עם אמוג׳י ⚠️.

   הלוח קובע ארבע משפחות, וכל אחת עם אייקון מהסט:
     טעינה  i-refresh · ריק  i-bulb · הצלחה  i-check על אריח כתום ·
     שגיאה  i-alert
   האמוג׳י יוצאים במכוון — גליף אמוג׳י נצבע בצבעים שלו, אינו מתורגם
   בקוראי מסך, ונראה אחרת בכל מערכת הפעלה. */
.hay .state{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  gap: 10px; min-height: 172px; padding: 20px;
}
.hay .state-title{ font-size: 0.9375rem; font-weight: 700; line-height: 1.45; }
.hay .state-sub{ font-size: 0.8125rem; color: var(--muted); line-height: 1.6; max-width: 40ch; }
.hay .state .icon-tile{ width: 42px; height: 42px; }

/* הסיבוב הוא הדבר היחיד שמבדיל טעינה משגיאה בהיעדר צבע, ולכן הוא
   נכבה תחת ‎prefers-reduced-motion ומשאיר את האייקון עומד. */
.hay .state--loading .icon{ animation: hay-spin 1.1s linear infinite; }
@keyframes hay-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .hay .state--loading .icon{ animation: none; }
}

.hay .alert{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 14px; font-size: 0.875rem; line-height: 1.5;
}
.hay .alert--error{ background: var(--danger-bg); color: var(--danger-ink); }
.hay .alert--ok{ background: var(--success-bg); color: var(--success-ink); }
.hay .alert--info{ background: var(--info-bg); color: var(--info); }

.hay .auth-brand{
  flex: none; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; padding: 40px;
  background: var(--primary); color: var(--on-hero);
}

/* Pricing. The page ships its own palette — --yellow #FCD34D,
   --amber #D97706, --brown #3B1F0A, --cream #FFFBF5, --warm #FEF3C7,
   --border #F3D99A — and loads BOTH Assistant and Heebo. */
.hay .plan{
  display: flex; flex-direction: column; gap: 16px; padding: 28px;
  border-radius: 24px; background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-2);
}
.hay .plan--featured{
  background: var(--primary); color: var(--on-hero);
  border-color: var(--primary); box-shadow: var(--shadow-3);
}
.hay .plan-price{ font-size: 3.25rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hay .plan-list{ display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hay .plan-list > li{ display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; line-height: 1.5; }

/* Shufiel. The tutor's entire interface is English — "Shufiel",
   "Online Assistant", "Message Shufiel...", "Upload Image",
   "Voice Typing" — and it loads Inter, a family tailwind.config.js
   lists among the ones to remove. */
.hay .bubble{
  max-width: 78%; padding: 14px 16px; border-radius: 20px;
  font-size: 0.9375rem; line-height: 1.6;
}
.hay .bubble--bot{ background: var(--surface); border: 1px solid var(--line-soft); border-start-start-radius: 6px; }
.hay .bubble--me{ background: var(--primary); color: var(--on-hero); border-start-end-radius: 6px; }
.hay .bubble-time{ font-size: 0.75rem; color: var(--muted); margin-top: 6px; }

.hay .typing{ display: inline-flex; align-items: center; gap: 5px; }
.hay .typing > i{ width: 7px; height: 7px; border-radius: 9999px; background: var(--faint); display: block; }
/* No opacity ladder: at .7 and .45 the dots measured 2.80:1 and
   1.85:1. Motion carries the sequence in the build; here they are
   three equal dots that are all actually visible. */

.hay .prompt-chip{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 9999px;
  background: var(--surface); border: 1px solid var(--faint);
  font-family: inherit; font-size: 0.875rem; font-weight: 500;
  color: var(--text); cursor: pointer; text-align: start;
}
.hay .composer{
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 24px; background: var(--surface); border: 2px solid var(--faint);
}

/* CTA on the featured plan. --sunken on the orange plate measured 2.30:1;
   the surface white clears the 3:1 component floor at 3.08:1 and carries
   orange-800 text at 6.13:1. */
.hay .btn--on-hero{ background: var(--surface); color: var(--primary-deep); }

/* A control still needs a real <label>; aria-label alone leaves the
   relationship out of the accessibility tree for some AT. */
.hay .sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Row actions sit at 36px so table rows stay dense; the cushion brings the
   pointer target to 44 without changing the row rhythm. Rows are 48px+ apart,
   so neighbouring cushions never meet. */
.hay .btn--sm{ position: relative; }
.hay .btn--sm::after{ content: ''; position: absolute; inset: -4px; }

/* ============================================================================
   שכבת העיצוב העריכותית — ‎.hay-ed
   ============================================================================

   עשרה לוחות בקנבס אינם מדברים באוצר המילים של האפליקציה. דף הבית, דף
   הנחיתה, צור קשר, קורות חיים והתבנית המשפטית בנויים כ״נייר ודיו״:
   ‎--paper, --ink, --rule, --mark — לא ‎--surface ו‑--text.

   למה שכבה נפרדת ולא הוספה למפה של ‎.hay
   --------------------------------------
   ‎.hay ממפה לסמנטיקה (‎--color-*), ולכן הוא מתהפך במצב כהה. זה נכון
   לאפליקציה ושגוי כאן: הדפים האלה בנויים מרצועות כהות בתוך עמוד בהיר,
   והיפוך היה הופך את הרצועות הכהות לבהירות ושובר את הקומפוזיציה.
   לכן כל שם כאן מצביע לפרימיטיב — ‎--sand-*, --orange-* — שאינו משתנה
   עם הנושא. זו בדיוק ההבחנה ש‑aliases.css כבר עושה בין שיווק לאפליקציה.

   למה זה כאן ולא ב‑aliases.css
   -----------------------------
   התבניות האלה אינן קוראות ל‑wp_head() — במכוון, כדי לא לגרור את
   הגיליונות של אסטרה, אלמנטור וווקומרס. גיליון שנטען רק דרך
   wp_enqueue_style לא היה מגיע אליהן כלל. הקובץ הזה כן מגיע: הוא
   מקושר ישירות ב‑hayaan_page_head().

   התקדים שהחליף את זה: landing-page-v2.php מחזיק היום את תשעת הערכים
   האלה בתוך בלוק ‎:root משלו, כהקסה קשיחה עם שם הטוקן בהערה. זה עבד
   ללוח אחד. לעשרה לוחות זה עשרה עותקים שייפרדו זה מזה, בדיוק כמו
   שהכותרת נפרדה בין pricing ל‑guide וילדה את page.css.
   ========================================================================= */

.hay-ed {
  --paper:   var(--sand-50);    /* #FBF9F6 */
  --ink:     var(--sand-950);   /* #1F1914 */
  --ink2:    var(--sand-700);   /* #62564B */
  --ink3:    var(--sand-600);   /* #7B6D60 */
  --mark:    var(--orange-600); /* #E07818 — העוגן. כלל, ספרה, ורצועה אחת */
  --mark-ui: var(--orange-700); /* #BE6313 — ריחוף ומצבים */
  --mark-d:  var(--orange-800); /* #964F13 — טקסט על נייר, 6.13:1 */

  /* ‎--rule הוא קישוט בלבד ולא קצה של פקד: ‎#B6A89A על הנייר הוא 2.21:1,
     מתחת לרצפת 3:1 של רכיב. הלוחות מתעדים את זה במפורש ומשתמשים
     ב‑--ink3 (4.76:1) לכל קצה שמקיף שדה או כפתור. */
  --rule:    var(--sand-400);   /* #B6A89A */

  /* מחוץ לסולם. ‎#F0EAE3 יושב בין sand-100 ל‑sand-200 והוא הקרקע
     המוטבעת של הרצועות. לא עוגל לאף אחד מהם — ההפרש נראה על שטח גדול.
     מועמד לצעד חדש בסולם אם יופיע שוב. */
  --paper2:  #F0EAE3;

  /* מצבי הצלחה וכישלון בשמות של הלוחות. שלושתם בכל צד הם זוגות קיימים
     בסולם, ולכן זה מיפוי ולא הגדרה חדשה. */
  --ok:      var(--green-600);  /* #33734D */
  --ok-bg:   var(--green-100);  /* #DCEDE2 */
  --ok-ink:  var(--green-900);  /* #1B3D29 */
  --no:      var(--red-600);    /* #A33328 */
  --no-bg:   var(--red-100);    /* #F7DEDB */
  --no-ink:  var(--red-900);    /* #571A14 */

  /* שוליים אופקיים של הקטע. משתנה עם רוחב המסך — ההתאמות יושבות
     ב‑editorial.css לצד שאר שאילתות המדיה. */
  --gutter:  64px;

  /* ── מיפוי אוצר המילים של האפליקציה אל הנייר ──────────────────────
     השכבה הזאת מחויבת לאור. אין בקנבס ‎HomeDark, ‎ContactDark או
     ‎LegalDark — הלוחות העריכותיים הם נייר ודיו, בלי וריאנט כהה. כל
     הטוקנים שלמעלה נגזרים מהפרימיטיבים ‎(--sand-*, --orange-*) שאינם
     מתהפכים, ולכן הנייר נשאר נייר.

     אבל עמוד עריכותי נושא גם ‎.hay, כי ‎.card, ‎.field ו‑.btn מגיעים
     מ‑components.css והכותרת והפוטר מ‑page.css — וכל אלה קוראים את
     אוצר המילים הסמנטי, שכן מתהפך. התוצאה הייתה היפוך למחצה: נמדד
     בעמוד "צור קשר" ‎23 אלמנטים מתחת ל‑AA במצב כהה, ובהם דיו בהיר
     ‎#F5F0EB על נייר ‎#FBF9F6 ‏(1.08:1) ולוגו כהה על כותרת כהה ‏(1.01:1).

     המיפוי כאן פותר את זה בשורש: בתוך ‎.hay-ed כל שם סמנטי נפתר אל
     הערך העריכותי המקביל, ולכן שום כלל של ‎.hay אינו מתהפך תחת הנייר.
     שני אוצרות המילים ממופים — הקצר ‎(--text) והמלא ‎(--color-text) —
     כי הקבצים משתמשים בשניהם. */
  --bg: var(--paper);            --color-bg: var(--paper);
  --surface: var(--paper);       --color-surface: var(--paper);
  --color-surface-raised: var(--paper);
  --sunken: var(--paper2);       --color-surface-sunken: var(--paper2);
  --text: var(--ink);            --color-text: var(--ink);
  --muted: var(--ink2);          --color-text-muted: var(--ink2);
  --faint: var(--ink3);          --color-text-faint: var(--ink3);
  --line: var(--ink3);           --color-border: var(--ink3);
  --line-soft: var(--rule);      --color-border-soft: var(--rule);
  --line-strong: var(--ink3);    --color-border-strong: var(--ink3);

  --primary: var(--mark);        --color-primary: var(--mark);
  --primary-hover: var(--mark-ui);   --color-primary-hover: var(--mark-ui);
  --primary-deep: var(--mark-d);     --color-primary-deep: var(--mark-d);
  --primary-subtle: var(--paper2);   --color-primary-subtle: var(--paper2);
  /* דיו כהה על כתום, כמו בכל שאר המערכת. */
  --on-primary: var(--ink);      --color-on-primary: var(--ink);
  --on-hero: var(--ink);         --color-on-hero: var(--ink);
  --on-status: var(--paper);     --color-on-status: var(--paper);

  --success: var(--ok);          --color-success: var(--ok);
  --success-bg: var(--ok-bg);    --color-success-bg: var(--ok-bg);
  --success-ink: var(--ok-ink);  --color-success-ink: var(--ok-ink);
  --danger: var(--no);           --color-danger: var(--no);
  --danger-bg: var(--no-bg);     --color-danger-bg: var(--no-bg);
  --danger-ink: var(--no-ink);   --color-danger-ink: var(--no-ink);

  /* לשכבה העריכותית אין ענבר וכחול משלה. הפרימיטיבים אינם מתהפכים,
     ולכן הם הבחירה הנכונה כאן ולא הטוקן הסמנטי. */
  --warning: var(--amber-600);   --color-warning: var(--amber-600);
  --warning-bg: var(--amber-100);--color-warning-bg: var(--amber-100);
  --warning-ink: var(--amber-900);--color-warning-ink: var(--amber-900);
  --info: var(--blue-600);       --color-info: var(--blue-600);
  --info-bg: var(--blue-100);    --color-info-bg: var(--blue-100);
  --color-info-ink: var(--blue-900);

  direction: rtl;
  font-family: 'Heebo', 'Assistant', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  /* הלוחות קוראים לשורש התיחום ‎.ed ומגדירים עליו בדיוק את החמישה שלמעלה
     ועוד ‎position: relative — עוגן למסגרות, לקווים ולרעש שמצוירים
     בהיסט מוחלט בתוך הקטע. ‎.ed ו‑.hay-ed הם אותו דבר; בהטמעה השם משתנה. */
  position: relative;
}

/* דף הנחיתה מדבר ניב שני של אותה שפה: דיו עמוק יותר, ושני שמות
   שמתנגשים עם השכבה שמעל — ‎--ink שם הוא ‎#100C09 ולא ‎#1F1914,
   ו‑#B6A89A נקרא שם ‎--paper-2 ולא ‎--rule. לכן ניב ולא דריסה גלובלית.
   שימוש: <div class="hay-ed hay-ed--deep">. */
.hay-ed--deep {
  /* עמוק מתחתית הסולם. sand-950 הוא ‎#1F1914; זה נבחר להיות כהה ממנו. */
  --ink:     #100C09;

  /* ‎#1E1712 ו‑#33291F בלוחות. ההפרש מ‑sand-950 ומ‑sand-900 הוא
     (1,2,2) ו‑(2,4,8) לערוץ — מתחת לסף הנראות. מוצמדים לסולם במכוון,
     כדי שלא ייווצרו שני שחורים כמעט־זהים שאיש לא יוכל לתחזק. */
  --ink-2:   var(--sand-950);   /* היה #1E1712 */
  --ink-3:   var(--sand-900);   /* היה #33291F */

  --paper-2: var(--sand-400);   /* #B6A89A — ‎--rule בניב האחר */
  --paper-3: var(--sand-500);   /* #978778 */
  --lume:    var(--orange-600); /* #E07818 */
  --lume-hi: var(--orange-300); /* #F8B772 */
}

/* ══════════════════════════════════════════════════════════════════
   הישגים — לוחות Badges, BadgesDark, BadgesMobile
   ══════════════════════════════════════════════════════════════════
   ‎.hayaanshufiya-container ולא ‎.hay. מסכי האפליקציה אינם ‎.hay —
   ‎.hay יושב רק על סרגל הצד, על ניווט התחתית ועל המגירה, שהם הרכיבים
   שהוסבו ללוחות. הכתיבה הראשונה כאן הייתה ‎.hay .ach-*, וכל החוקים
   פשוט לא חלו. ‎aliases.css מגדיר את ‎--muted, ‎--line-soft ושות׳ גם על
   ‎.hayaanshufiya-container, ולכן הטוקנים נפתרים כרגיל.

   הפריסה בלבד. הכרטיסים, השבבים, הפסים והאריחים כבר קיימים
   ‏(.card, .chip, .track, .fill, .icon-tile, .stat-label, .stat-number)‎
   ולא נכתב כאן אף רכיב חדש.

   ‎--color-* ולא הכינויים הקצרים. ‎aliases.css ממפה את ‎--muted, ‎--text
   ו‑--card בתוך מכולת האפליקציה אל **פרימיטיבים** ‏(--sand-700, --sand-950)‎
   ואל ‎#FFFFFF, כלומר הם אינם מתהפכים. הכתיבה הראשונה כאן השתמשה בהם
   ונמדדו 46 אלמנטים מתחת ל‑AA במצב כהה, ובהם דיו ‎#1F1914 על ‎#17120E
   ‏(1.07:1)‎. ‎.hay, לעומת זאת, ממפה את אותם שמות אל ‎--color-* ולכן שם הם
   כן מתהפכים — וזה בדיוק ההבדל שהפיל את זה.
   */

.hayaanshufiya-container .ach-head h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.hayaanshufiya-container .ach-head p  { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 4px; }

.hayaanshufiya-container .ach-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hayaanshufiya-container .ach-stats .card { gap: 8px; }
.hayaanshufiya-container .ach-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hayaanshufiya-container .ach-tile { width: 32px; height: 32px; border-radius: 10px; }
.hayaanshufiya-container .ach-stat-sub { font-size: 0.8125rem; color: var(--color-text-muted); }

.hayaanshufiya-container .ach-rank { gap: 18px; }
.hayaanshufiya-container .ach-rank-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hayaanshufiya-container .ach-rank-tile { width: 44px; height: 44px; }
.hayaanshufiya-container .ach-rank-meta { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 8px; color: var(--color-text-muted); }
.hayaanshufiya-container .ach-rank-meta .num { font-weight: 700; color: var(--color-text); }

.hayaanshufiya-container .ach-ladder { display: flex; gap: 10px; padding-top: 4px; }
.hayaanshufiya-container .ach-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hayaanshufiya-container .ach-step-bar { width: 100%; height: 6px; border-radius: 9999px; background: var(--color-border-soft); }
/* ‎--primary-deep ולא ‎--primary: זה סימון על משטח בהיר, וכתום מלא אינו
   עובר שם את רצפת 3:1 לרכיב שאינו טקסט. */
.hayaanshufiya-container .ach-step-bar--on { background: var(--color-primary-deep); }
.hayaanshufiya-container .ach-step-name { font-size: 0.8125rem; font-weight: 500; color: var(--color-text); }
.hayaanshufiya-container .ach-step--here .ach-step-name { font-weight: 700; }
.hayaanshufiya-container .ach-step-xp { font-size: 0.75rem; color: var(--color-text-muted); }

.hayaanshufiya-container .ach-badges-head h2 { font-size: 1.25rem; font-weight: 700; }
.hayaanshufiya-container .ach-badges-head p  { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 14px; }
.hayaanshufiya-container .ach-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hayaanshufiya-container .ach-badge { gap: 12px; }
.hayaanshufiya-container .ach-badge-top { display: flex; align-items: flex-start; gap: 14px; }
.hayaanshufiya-container .ach-badge-icon {
  width: 52px; height: 52px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.625rem; background: var(--color-primary-subtle);
}
.hayaanshufiya-container .ach-badge-copy { flex: 1; min-width: 0; }
.hayaanshufiya-container .ach-badge-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.0625rem; font-weight: 700; }
.hayaanshufiya-container .ach-badge-desc { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.6; margin-top: 4px; }
.hayaanshufiya-container .ach-badge-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 6px; }
.hayaanshufiya-container .ach-chip-done   { background: var(--color-success-bg); color: var(--color-success-ink); }
.hayaanshufiya-container .ach-chip-locked { background: var(--color-surface-sunken);     color: var(--color-text-muted); }
.hayaanshufiya-container .ach-fill-done   { background: var(--color-success); }
/* תג נעול נשאר קריא — הוא עדיין אומר מה צריך לעשות כדי לפתוח אותו.
   ‎opacity על הכרטיס כולו היה מוריד גם את הטקסט מתחת לרצפת הניגודיות,
   ולכן רק האריח מתעמעם. */
.hayaanshufiya-container .ach-badge--locked .ach-badge-icon { filter: grayscale(1); opacity: .55; }

@media (max-width: 1100px) {
  .hayaanshufiya-container .ach-stats  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hayaanshufiya-container .ach-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hayaanshufiya-container .ach-stats  { grid-template-columns: 1fr; }
  .hayaanshufiya-container .ach-badges { grid-template-columns: 1fr; }
  .hayaanshufiya-container .ach-head h1 { font-size: 1.5rem; }
  /* שש דרגות ב‑390px הן 55px לכל אחת — הסולם עובר לגלילה אופקית
     במקום להידחס לטקסט שאי אפשר לקרוא. */
  .hayaanshufiya-container .ach-ladder { overflow-x: auto; gap: 14px; padding-bottom: 6px; }
  .hayaanshufiya-container .ach-step   { min-width: 74px; }
}

/* אסטרה צובעת ‎h1..h6 בגיליון המוטבע שלה, והכלל על שם האלמנט גובר על
   הורשה. בתוך מכולת האפליקציה זה נמדד ‎#1E293B על ‎#17120E — 1.27:1
   במצב כהה. אותו תיקון שכבר קיים ל‑.hay למעלה. */
.hayaanshufiya-container h1, .hayaanshufiya-container h2,
.hayaanshufiya-container h3, .hayaanshufiya-container h4,
.hayaanshufiya-container h5, .hayaanshufiya-container h6,
.hayaanshufiya-container label, .hayaanshufiya-container legend { color: inherit; }

/* ══════════════════════════════════════════════════════════════════
   החשבון — לוחות Account ו‑AccountMobile
   ══════════════════════════════════════════════════════════════════
   המסך חי ב‑game-subscription (השורטקוד ‎[game_subscription_dashboard])‎
   ועטוף ב‑.hay, ולכן הכרטיסים, השדות, הכפתורים והשבבים מגיעים
   מ‑components.css ואין כאן אף רכיב חדש. */

.hay.acc-shell { display: flex; flex-direction: column; gap: 20px; padding: 28px 20px 48px; max-width: 1100px; margin: 0 auto; }

.hay .acc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hay .acc-hello { font-size: 0.875rem; color: var(--muted); }
.hay .acc-head h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; margin: 2px 0 0; }

.hay .acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.hay .acc-card { gap: 18px; }
.hay .acc-card--wide { grid-column: 1 / -1; }

.hay .acc-form { display: flex; flex-direction: column; gap: 16px; }
.hay .acc-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hay .acc-row > .field-group { flex: 1 1 190px; }
.hay .acc-submit { align-self: flex-start; }

.hay .acc-sub { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.hay .acc-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hay .acc-sub-name { font-size: 1.0625rem; font-weight: 700; }
.hay .acc-chip-on  { background: var(--success-bg); color: var(--success-ink); }
.hay .acc-chip-off { background: var(--sunken);     color: var(--muted); }

.hay .acc-facts { display: flex; gap: 26px; margin: 0; flex-wrap: wrap; }
.hay .acc-facts > div { display: flex; flex-direction: column; gap: 2px; }
.hay .acc-facts dt { font-size: 0.8125rem; color: var(--muted); }
.hay .acc-facts dd { margin: 0; font-size: 1rem; font-weight: 700; }

@media (max-width: 860px) {
  .hay .acc-grid { grid-template-columns: 1fr; }
  .hay .acc-head h1 { font-size: 1.5rem; }
  .hay .acc-submit { align-self: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════════
   מודאל ההישגים והדירוג — AchieveModal.dc.html
   ═══════════════════════════════════════════════════════════════════════
   ‎components/leaderboard.js בונה את המרקאפ; כאן הפריסה בלבד. הכרטיס
   עצמו אינו ‎.card: הלוח נותן לו רדיוס 26 ו‑overflow:hidden כדי שהלשוניות
   יישבו בתוך הפינות, ולא 24 של ‎.card.
   ══════════════════════════════════════════════════════════════════════ */

/* ‎z-index 1000000 ולא 10000: האפליקציה עצמה, ‎#hayaanshufiya-app, היא
   ‎position:fixed עם ‎z-index: 999999 !important (student-app-styles.css).
   מודאל שמתווסף ל‑body מתחת לערך הזה נפתח, מקבל פוקוס ומגיב למקלדת —
   ונשאר בלתי נראה מתחת לאפליקציה. בדיוק זה קרה. */
.hay.lb-overlay,
.lb-overlay.hay {
  position: fixed; inset: 0; z-index: 1000000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(31, 25, 20, .55);
  backdrop-filter: blur(6px);
  min-height: 0;
}
.lb-card {
  width: 520px; max-width: 100%; max-height: 85vh;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 26px;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.lb-head {
  padding: 26px 26px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  flex: none;
}
.lb-title { font-size: 1.375rem; font-weight: 800; margin: 0; }
.lb-sub { font-size: 0.875rem; color: var(--muted); margin: 2px 0 0; }
.lb-tabs { margin: 18px 26px 0; flex: none; }
.lb-body { padding: 6px 26px 26px; overflow-y: auto; flex: 1; }

/* ── שורות הטבלה ───────────────────────────────────────────────────── */

.lb-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.lb-row.is-last { border-bottom: 0; }
.lb-rank { width: 20px; font-size: 0.875rem; font-weight: 700; flex: none; }
.lb-avatar {
  width: 34px; height: 34px; border-radius: 9999px; flex: none;
  background: var(--sunken);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.0625rem;
}
.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-name { font-size: 0.9375rem; font-weight: 500; }
.lb-you { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.lb-tier { font-size: 0.75rem; color: var(--muted); }
.lb-xp { font-size: 0.9375rem; font-weight: 700; flex: none; }
.lb-xp-label { font-size: 0.75rem; color: var(--muted); flex: none; }

/* ── לשונית הגביעים ────────────────────────────────────────────────── */

.lb-progress { padding: 14px 0 8px; }
.lb-progress-row { display: flex; justify-content: space-between; font-size: 0.8125rem; margin-bottom: 8px; gap: 10px; }
.lb-progress-label { color: var(--muted); }
.lb-progress-value { font-weight: 700; }

.lb-badges {
  padding: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.lb-badge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px;
  border-radius: 16px;
  background: var(--sunken);
  opacity: .7;
}
.lb-badge.is-on { background: var(--primary-subtle); opacity: 1; }
.lb-badge-icon { font-size: 1.875rem; line-height: 1; }
/* תג נעול מוצג באפור — הצבע הוא המידע, ולכן הצ׳יפ "נעול" נושא אותו
   גם בטקסט: מי שאינו מבחין בגווני אפור עדיין יודע. */
.lb-badge-icon.is-locked { filter: grayscale(1); }
.lb-badge-name { font-size: 0.75rem; font-weight: 500; text-align: center; line-height: 1.4; }
.lb-badge.is-on .lb-badge-name { font-weight: 700; }
.lb-lock { font-size: 0.75rem; }

@media (max-width: 560px) {
  .hay.lb-overlay { padding: 12px; align-items: flex-end; }
  .lb-card { max-height: 92vh; border-radius: 22px; }
  .lb-head { padding: 20px 18px 0; }
  .lb-tabs { margin: 14px 18px 0; }
  .lb-body { padding: 6px 18px 20px; }
  .lb-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   הגדרות אוצר מילים — Vocab.dc.html / VocabMobile.dc.html
   ═══════════════════════════════════════════════════════════════════════
   ‎main.hay.voc — ולכן ‎--muted, --line-soft ושות׳ ממופים ל‑‎--color-*
   ומתהפכים. הרכיבים (.card, .chip, .track, .pill, .field) קיימים; כאן
   הפריסה, והכפתורים הגדולים שהלוח מצייר בסגנון מוטבע.
   ══════════════════════════════════════════════════════════════════════ */

.hay.voc { display: flex; flex-direction: column; gap: 24px; }

.hay .voc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hay .voc-title { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.hay .voc-sub { font-size: 0.875rem; color: var(--muted); margin-top: 4px; }
.hay .voc-count { font-size: 0.9375rem; font-weight: 700; }
.hay .voc-count-label { font-size: 0.8125rem; color: var(--muted); }

.hay .voc-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hay .voc-unit { flex: 0 1 320px; min-width: 220px; }
.hay .voc-select { padding-inline-start: 46px; appearance: none; -webkit-appearance: none; }
.hay .voc-select-chev {
  position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); display: flex; pointer-events: none;
}
.hay .voc-progress { flex: 1 1 320px; max-width: 520px; }
.hay .voc-progress-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.hay .voc-progress-label { font-size: 0.8125rem; color: var(--muted); }
.hay .voc-progress-value { font-size: 0.8125rem; font-weight: 700; }

.hay .voc-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.hay .voc-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ── כרטיס המילה ───────────────────────────────────────────────────── */

.hay .voc-word-card { gap: 16px; }
.hay .voc-word { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 12px; text-align: center; }
.hay .voc-en { font-size: 3.25rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.hay .voc-en[dir="rtl"] { font-size: 1.5rem; }
.hay .voc-he { font-size: 1.25rem; font-weight: 500; color: var(--muted); }
/* הלוח כותב את התעתיק ב‑‎--faint בגודל 13px. ‎--faint נמדד 4.42:1 על
   הרקע ו‑tokens.css מתעד אותו כלא־טקסט — לכן ‎--muted. */
.hay .voc-tr { font-size: 0.8125rem; color: var(--muted); }

.hay .voc-marks { display: flex; gap: 12px; }
.hay .voc-mark {
  flex: 1; min-height: 72px; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid #1F1914 !important; background: #FFFFFF; color: #1F1914;
  box-shadow: -2.5px 2.5px 0 #1F1914 !important;
  transition: all 0.15s ease;
}
.hay .voc-mark:hover:not(:disabled) {
  transform: translate(1px, -1px);
  box-shadow: -3.5px 3.5px 0 #1F1914 !important;
}
.hay .voc-mark:active:not(:disabled) {
  transform: translate(-1px, 1px);
  box-shadow: -1px 1px 0 #1F1914 !important;
}
.hay .voc-mark:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; }
.hay .voc-mark:disabled { cursor: default; opacity: .55; }
.hay .voc-mark[aria-pressed="true"] { font-weight: 900; }
.hay .voc-mark--known   { background: #FAFDFB; }
.hay .voc-mark--unsure  { background: #FFFCF5; }
.hay .voc-mark--unknown { background: #FFFBFB; }

.hay .voc-mark--known[aria-pressed="true"]   { border-color: #1F1914 !important; background: #E8F5E9 !important; color: #256F46 !important; box-shadow: -3px 3px 0 #256F46 !important; }
.hay .voc-mark--unsure[aria-pressed="true"]  { border-color: #1F1914 !important; background: #FFF8E1 !important; color: #D97706 !important; box-shadow: -3px 3px 0 #D97706 !important; }
.hay .voc-mark--unknown[aria-pressed="true"] { border-color: #1F1914 !important; background: #FFEBEE !important; color: #B3261E !important; box-shadow: -3px 3px 0 #B3261E !important; }

.hay .voc-status { min-height: 20px; margin: 0; font-size: 0.84375rem; font-weight: 600; color: var(--muted); text-align: center; }
.hay .voc-status.is-error { color: var(--danger); font-weight: 700; }

/* ── הרשימה ────────────────────────────────────────────────────────── */

.hay .voc-list-card { gap: 16px; }
.hay .voc-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hay .voc-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.hay .voc-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; min-height: 44px;
  border-radius: 4px;
  border: 1px solid #E5DFD5; margin-bottom: 6px;
  background: #FFFFFF; color: inherit; font-family: inherit; text-align: start; cursor: pointer;
  transition: all 0.12s ease;
}
.hay .voc-row:hover {
  background: #FFFDF8; border-color: #1F1914; transform: translate(1px, -1px); box-shadow: -2px 2px 0 #F0EAE3;
}
.hay .voc-row:hover .voc-row-en { color: #E07818; }
.hay .voc-row:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; border-radius: 4px; }
.hay .voc-dot { width: 12px; height: 12px; border-radius: 9999px; flex: none; border: 1.5px solid #1F1914; }
.hay .voc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hay .voc-row-en { font-size: 1rem; font-weight: 700; text-align: start; color: #1F1914; }
.hay .voc-row-he { font-size: 0.84375rem; font-weight: 500; color: var(--muted); }
.hay .voc-empty { font-size: 0.875rem; color: var(--muted); margin: 0; padding: 8px 0; }

/* ── המקרא ─────────────────────────────────────────────────────────── */

.hay .voc-legend, .hay .voc-where { gap: 16px; }
.hay .voc-legend-head { display: flex; align-items: center; gap: 10px; }
.hay .voc-legend-rows { display: flex; flex-direction: column; gap: 12px; }
.hay .voc-legend-row { display: flex; align-items: flex-start; gap: 12px; }
.hay .voc-legend-ic { width: 32px; height: 32px; border-radius: 4px; border: 1.5px solid #1F1914; flex: none; display: flex; align-items: center; justify-content: center; }
.hay .voc-legend-ic--known   { background: #E8F5E9; color: #256F46; }
.hay .voc-legend-ic--unsure  { background: #FFF8E1; color: #D97706; }
.hay .voc-legend-ic--unknown { background: #FFEBEE; color: #B3261E; }
.hay .voc-legend-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; }
.hay .voc-legend-text > span { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }
.hay .voc-where-rows { display: flex; flex-direction: column; gap: 10px; }
.hay .voc-where-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 4px; border: 1.5px solid #E5DFD5; background: #FAF8F5; font-size: 0.875rem; font-weight: 600; }
.hay .voc-where-ic { width: 34px; height: 34px; border: 1.5px solid #1F1914; border-radius: 4px; }

/* ── נייד — VocabMobile.dc.html ────────────────────────────────────── */

@media (max-width: 900px) {
  .hay .voc-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hay.voc { gap: 16px; }
  .hay .voc-title { font-size: 1.5rem; }
  .hay .voc-sub-long { display: none; }
  .hay .voc-en { font-size: 2.5rem; }
  .hay .voc-unit, .hay .voc-progress { flex: 1 1 100%; max-width: none; }
  /* ‎VocabMobile משמיט את הרשימה ואת "איפה זה משפיע": כרטיס, מקרא, זהו.
     הרשימה נשארת נגישה מהמחשב, והאיפוס איתה. */
  .hay .voc-desktop-only { display: none; }
}

/* ==========================================================================
   Hayaanshufiya Components — Dark Mode Overrides
   ========================================================================== */

.dark .hay,
[data-theme="dark"] .hay {
  --bg: #17120E;
  --surface: #211A15;
  --raised: #2A221B;
  --sunken: #120E0B;
  --text: #F5F0EB;
  --muted: #B6A89A;
  --faint: #978778;
  --line: #3A302A;
  --line-soft: #2C241E;
  --line-strong: #4C4039;
  --primary: #EC8522;
  --primary-hover: #F29940;
  --primary-subtle: rgba(224, 120, 24, .16);
  --primary-deep: #EC8522;
  --on-primary: #17120E;
  background: #17120E !important;
  color: #F5F0EB !important;
}

.dark .hay .page-head,
[data-theme="dark"] .hay .page-head {
  background: #17120E !important;
  border-bottom: 2px solid #3A302A !important;
}

.dark .hay .brand,
[data-theme="dark"] .hay .brand {
  color: #F5F0EB !important;
}

.dark .hay .card,
[data-theme="dark"] .hay .card {
  background: #211A15 !important;
  border-color: #3A302A !important;
  box-shadow: -5px 5px 0 #0D0A08 !important;
  color: #F5F0EB !important;
}

.dark .hay .pill,
[data-theme="dark"] .hay .pill {
  background: #211A15 !important;
  border-color: #3A302A !important;
  box-shadow: -2px 2px 0 #000000 !important;
  color: #F5F0EB !important;
}

.dark .hay .btn--ghost,
[data-theme="dark"] .hay .btn--ghost {
  background: #211A15 !important;
  color: #F5F0EB !important;
  border-color: #3A302A !important;
  box-shadow: -2.5px 2.5px 0 #000000 !important;
}

.dark .hay .btn--quiet,
[data-theme="dark"] .hay .btn--quiet {
  background: #2A2018 !important;
  color: #F5F0EB !important;
  border-color: #3A302A !important;
}

.dark .hay .word-row,
[data-theme="dark"] .hay .word-row {
  background: #211A15 !important;
  border-color: #3A302A !important;
  box-shadow: -3px 3px 0 #0D0A08 !important;
  color: #F5F0EB !important;
}

.dark .hay .word-row:hover,
[data-theme="dark"] .hay .word-row:hover {
  transform: none !important;
  border-color: #E07818 !important;
  box-shadow: -3px 3px 0 #0D0A08 !important;
}

.dark .hay .word-row--selected,
[data-theme="dark"] .hay .word-row--selected {
  background: #2E2218 !important;
  border-color: #E07818 !important;
  box-shadow: -3.5px 3.5px 0 #000000 !important;
}

.dark .hay .box,
[data-theme="dark"] .hay .box {
  background: #1A1511 !important;
  border-color: #3A302A !important;
}

.dark .hay .filter-pill,
[data-theme="dark"] .hay .filter-pill {
  background: #211A15 !important;
  border-color: #3A302A !important;
  color: #B6A89A !important;
  box-shadow: -2px 2px 0 #000000 !important;
}

.dark .hay .filter-pill:hover,
[data-theme="dark"] .hay .filter-pill:hover {
  color: #F5F0EB !important;
  border-color: #E07818 !important;
}

.dark .hay .filter-pill[aria-pressed="true"],
[data-theme="dark"] .hay .filter-pill[aria-pressed="true"] {
  background: #382314 !important;
  border-color: #E07818 !important;
  color: #F29940 !important;
  box-shadow: -2.5px 2.5px 0 #000000 !important;
}

/* Flashcards Dark Mode */
.dark .hay .fc,
[data-theme="dark"] .hay .fc {
  background: #211A15 !important;
  border-color: #3A302A !important;
  box-shadow: -6px 6px 0 #0D0A08 !important;
  color: #F5F0EB !important;
}

.dark .hay .fc-front,
.dark .hay .fc-back,
[data-theme="dark"] .hay .fc-front,
[data-theme="dark"] .hay .fc-back {
  background: #211A15 !important;
  color: #F5F0EB !important;
}

.dark .hay .fc-en,
[data-theme="dark"] .hay .fc-en {
  color: #F5F0EB !important;
}

.dark .hay .swipe-btn,
[data-theme="dark"] .hay .swipe-btn {
  background: #211A15 !important;
  border-color: #3A302A !important;
  box-shadow: -3px 3px 0 #000000 !important;
}

/* Vocab Settings Dark Mode */
.dark .hay .voc-card,
[data-theme="dark"] .hay .voc-card {
  background: #211A15 !important;
  border-color: #3A302A !important;
  box-shadow: -6px 6px 0 #0D0A08 !important;
}

.dark .hay .voc-en,
[data-theme="dark"] .hay .voc-en {
  color: #F5F0EB !important;
}

.dark .hay .voc-he,
[data-theme="dark"] .hay .voc-he {
  color: #B6A89A !important;
}

.dark .hay .voc-btn,
[data-theme="dark"] .hay .voc-btn {
  background: #2A2018 !important;
  border-color: #3A302A !important;
  box-shadow: -3px 3px 0 #000000 !important;
}

.dark .hay .voc-btn--known:hover,
[data-theme="dark"] .hay .voc-btn--known:hover {
  background: #143522 !important;
  border-color: #256F46 !important;
}

.dark .hay .voc-btn--unsure:hover,
[data-theme="dark"] .hay .voc-btn--unsure:hover {
  background: #3B2A10 !important;
  border-color: #D97706 !important;
}

.dark .hay .voc-btn--unknown:hover,
[data-theme="dark"] .hay .voc-btn--unknown:hover {
  background: #3B1614 !important;
  border-color: #B3261E !important;
}

.dark .hay .voc-row,
[data-theme="dark"] .hay .voc-row {
  background: #211A15 !important;
  border-color: #3A302A !important;
  color: #F5F0EB !important;
}

.dark .hay .voc-row:hover,
[data-theme="dark"] .hay .voc-row:hover {
  background: #2D231C !important;
  border-color: #E07818 !important;
}

.dark .hay .voc-row-en,
[data-theme="dark"] .hay .voc-row-en {
  color: #F5F0EB !important;
}

.dark .hay .voc-where-row,
[data-theme="dark"] .hay .voc-where-row {
  background: #2A2018 !important;
  border-color: #3A302A !important;
  color: #F5F0EB !important;
}

/* ── Accessible Tactile Focus Rings ── */
.hay a:focus-visible,
.hay button:focus-visible,
.hay input:focus-visible,
.hay [tabindex="0"]:focus-visible,
.hay .pill:focus-visible,
.hay .btn:focus-visible,
.hay .filter-pill:focus-visible {
  outline: 2px solid var(--color-primary, #E07818) !important;
  outline-offset: 2px !important;
}

/* ── Tactile Toast Notifications ── */
#hayaan-toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 24px;
  z-index: 200000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.hayaan-toast {
  pointer-events: auto;
  background: var(--color-surface, #FFFFFF);
  color: var(--color-text, #1F1914);
  border: 2px solid #1F1914;
  border-radius: 8px;
  box-shadow: -3px 3px 0 #1F1914;
  padding: 12px 18px;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  max-width: 360px;
  transform: translateY(16px);
  opacity: 0;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.hayaan-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.dark .hayaan-toast,
[data-theme="dark"] .hayaan-toast {
  background: #211A15 !important;
  color: #F5F0EB !important;
  border-color: #3A302A !important;
  box-shadow: -3px 3px 0 #000000 !important;
}

/* ── Card Styling ─────────────────────────────────────────────────── */
.hay .card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.hay .card:hover {
  transform: none !important;
}
.hay .word-row,
.hay .word-row:hover,
.hay .hub-list,
.hay .hub-list:hover {
  transform: none !important;
}
.hay .game-card:hover,
.hay .card--interactive:hover {
  transform: translate(2.5px, -2.5px) !important;
  box-shadow: -7px 7px 0 #1F1914 !important;
}

/* ── Skeleton Shimmer (Warm Paper Theme) ─────────────────────────────── */
.hayaan-skeleton {
  background: linear-gradient(90deg, #FAF8F5 0%, #EFE9E0 50%, #FAF8F5 100%);
  background-size: 200% 100%;
  animation: hayaan-shimmer-wave 1.6s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes hayaan-shimmer-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.dark .hayaan-skeleton,
[data-theme="dark"] .hayaan-skeleton {
  background: linear-gradient(90deg, #211A15 0%, #2E241C 50%, #211A15 100%);
  background-size: 200% 100%;
}

/* ── Reactive Owl Mascot Animations (Emotional UX) ───────────────────── */
.owl-fire {
  position: relative;
  filter: drop-shadow(0 0 12px rgba(224, 120, 24, 0.65)) drop-shadow(0 0 4px #FFB347);
  animation: owl-pulse-fire 1.8s ease-in-out infinite alternate;
}
@keyframes owl-pulse-fire {
  0% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(224, 120, 24, 0.5)); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 16px rgba(224, 120, 24, 0.85)) drop-shadow(0 0 6px #FFB347); }
}

.owl-wink {
  animation: owl-wink-anim 0.6s ease-in-out;
}
@keyframes owl-wink-anim {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.08) rotate(-4deg); }
  65% { transform: scale(0.96) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.owl-cheer {
  animation: owl-cheer-hop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes owl-cheer-hop {
  0% { transform: translateY(0); }
  30% { transform: translateY(-14px) scale(1.08); }
  60% { transform: translateY(2px) scale(0.96); }
  85% { transform: translateY(-4px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}