/* מונה מילואים -- style.css
   כל הטוקנים מ-DESIGN.md (colors/typography/rounded/spacing) כ-CSS custom
   properties. :root = פלטה כהה (ברירת מחדל), @media (prefers-color-scheme:
   light) = פלטה בהירה -- אין מנגנון [data-theme] נוסף: prefers-color-scheme
   בלבד קובע (ר' spec-1-1-pwa-foundation.md Design Notes). */

:root {
  /* DESIGN.md.colors -- פלטה כהה (ברירת מחדל) */
  --bg-base: #10161f;
  --bg-elev: #1a2230;
  --surface-card: #212b3d;
  --surface-border: rgba(255, 255, 255, 0.08);
  --accent-gold: #c9a44c;
  --accent-gold-on-fill: #10161f;
  /* accent-gold כטקסט/אייקון ישיר על bg-base/surface-card עומד ב-AA (ר'
     DESIGN.md.Colors) -- בכהה זהה ל-accent-gold עצמו. */
  --accent-gold-onlight: #c9a44c;
  --info-teal: #5fb3b3;
  --text-primary: #f2f0ea;
  --text-secondary: #a9b0bd;
  --text-disabled: #5c6472;
  --danger: #ff6b5e;
  /* טקסט על מילוי --danger -- Story 1.3, אותו דפוס הפרדה כמו
     accent-gold-on-fill/accent-gold-onlight: כהה על --danger הכהה-יחסית
     של המצב הכהה, בהיר על --danger הכהה-יותר של המצב הבהיר (ר' למטה). */
  --danger-on-fill: #10161f;

  /* DESIGN.md.typography */
  --font-family: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
  /* font-size/weight of the digits drawn *inside* the Progress Ring
     (Story 1.4) -- not the ring's own diameter, which is layout, not a
     typography token.
     Story 1.7: כל טוקן font-size שמייצג טקסט-תוכן הומר מ-px ל-rem (יחס
     16px=1rem, זהה ל-body-size) כדי לכבד הגדלת-טקסט של המשתמש/דפדפן;
     אייקוני-גליף (⚙️ ב-.settings-btn, "+" ב-.fab) *לא* עברו המרה -- הם
     אייקונים, לא טקסט-תוכן (ר' Design Notes ב-spec-1-7). */
  --ring-hero-font-size: 3rem; /* 48px */
  --ring-hero-font-weight: 800;
  --stat-value-size: 1.5rem; /* 24px */
  --stat-value-weight: 700;
  --title-size: 1.1875rem; /* 19px */
  --title-weight: 700;
  --body-size: 1rem; /* 16px */
  --body-weight: 400;
  --meta-size: 0.8125rem; /* 13px */
  --meta-weight: 400;

  /* DESIGN.md.rounded */
  --rounded-sm: 8px;
  --rounded-md: 14px;
  --rounded-lg: 20px;

  /* DESIGN.md.spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;

  /* Story 3.1: גובה-הבאנר בפועל כשהוא מוצג (56px + safe-area), 0px כשהוא
     מוסתר -- מוזרק ע"י refreshAdBanner() (billing.js) בכל שינוי-נראות.
     משתנה-CSS גלובלי יחיד, לא class על body, כי גם .fab (bottom) וגם
     #app (padding-bottom) צריכים לצרוך את אותו ערך (ר' spec-3-1-ad-
     banner.md Design Notes). ברירת המחדל 0px כאן נשארת נכונה גם אם
     billing.js לא רץ מסיבה כלשהי -- FAB/#app מתנהגים כאילו אין באנר. */
  --bottom-bar-offset: 0px;

  color-scheme: dark light;
}

/* פלטה בהירה -- ר' DESIGN.md.Colors, ערכי "(בהיר: ...)" ליד כל טוקן כהה.
   text-primary/text-secondary בבהיר: לא נמסר hex מפורש ב-DESIGN.md, רק יחסי
   ניגודיות יעד (14.11:1 / 5.33:1 מול bg-base הבהיר #f4f2ec) -- הערכים
   שנבחרו כאן נבדקו בפועל לעמוד ביחסים האלה בפועל (~13.97:1 / ~5.61:1,
   שניהם מעל היעד המתועד). */
@media (prefers-color-scheme: light) {
  :root {
    --bg-base: #f4f2ec;
    --bg-elev: #ebe7dd;
    --surface-card: #ffffff;
    --surface-border: rgba(10, 20, 30, 0.08);
    --accent-gold-onlight: #7d5f16;
    --info-teal: #1f7a7a;
    --text-primary: #1b2430;
    --text-secondary: #57616f;
    --text-disabled: #9a9584;
    --danger: #b8382b;
    --danger-on-fill: #ffffff;
  }
}

* {
  box-sizing: border-box;
}

/* html מצייר את הקנבס המלא (לא רק תיבת body) -- עקבי עם הדפוס שהוכח
   בסופרים ימים (מונע פס לא-צבוע מתחת ל-body בקפיצות dvh ב-iOS Safari). */
html {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  min-height: 100vh;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: 1.5;
  direction: rtl;
  text-align: right;
  padding: var(--space-4);
}

/* Story 2.1: #app (הכולל את רשימת התקופות/Milestone List) חייב מרווח-
   תחתון שמפנה מקום ל-FAB (56px + 20px offset, ר' .fab) + safe-area --
   בלי זה, הפריט האחרון ברשימה (סף-שנחצה או תקופת-שירות) נשאר תמיד חלקית
   מתחת ל-FAB הצף גם בגלילה מלאה עד הסוף. נבדק ונתפס אמפירית -- לפני
   התוספת הזו, כרטיס-הסף האחרון ברשימה ארוכה היה חופף ל-FAB ללא אפשרות
   לגלול הלאה. גם סוגר את הפער שתועד ב-deferred-work.md (Story 1.1:
   viewport-fit=cover בלי צריכת env(safe-area-inset-*) בשום מקום).
   Story 3.1: + var(--bottom-bar-offset) -- כש-הבאנר מוצג בפועל, ה-FAB
   עצמו זז מעליו (ר' .fab למטה), אז גם #app צריך את אותו מרווח-נוסף כדי
   שהפריט האחרון ברשימה יישאר נגיש מתחת ל-FAB *במיקומו-החדש*, לא רק
   במיקומו הרגיל. */
#app {
  padding-bottom: calc(56px + var(--space-5) + var(--space-4) + env(safe-area-inset-bottom) + var(--bottom-bar-offset));
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.app-header h1 {
  margin: 0;
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--text-primary);
}

/* Story 1.5: כפתור הגדרות (⚙️) בכותרת -- עיגול קטן, surface-card, *לא*
   מילוי-זהב. accent-gold שמור למבטא-יחיד (FAB/Progress Ring/פעולה ראשית,
   ר' DESIGN.md); זו פעולה משנית, אז surface-card + surface-border עקבי עם
   שאר המשטחים השטוחים-האטומים באפליקציה. */
.settings-btn {
  flex-shrink: 0;
  /* Story 1.7: יעד-נגיעה מינימלי 48dp (בעבר 44px, מתחת לסף) -- ר'
     Boundaries "יעד-נגיעה מינימלי 48dp לכל כפתור/שורה לחיצה". */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-border);
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.settings-btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.empty-state {
  margin: 0;
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--rounded-md);
  color: var(--text-secondary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

/* ספרות טבלאיות (tabular numerals) -- חובה בכל מקום שמספר משתנה (Progress
   Ring, Stat Chip). אין עדיין רכיב כזה ב-Story 1.1, אך ה-utility מוגדר כאן
   כדי שסטוריז הבאים (1.4+) לא יצטרכו לגעת בטוקנים שוב. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Story 1.4: Progress Ring + Stat Chips --------------------------------- */

.progress-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}

.progress-section[hidden] {
  display: none;
}

.progress-ring-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  max-width: 100%;
}

/* r=85 -- היקף המעגל (2*π*85) קבוע מראש כי רדיוס ה-SVG קבוע (לא מחושב
   דינמית ב-JS); רק אחוז-המילוי (--ring-fill-percent) מוזרק ב-JS. הקשת
   מתחילה מ-12 השעון (rotate(-90deg)) ללא תלות בכיוון RTL/LTR של הטקסט --
   זהו ציור SVG גיאומטרי, לא טקסט. */
.progress-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring__track {
  fill: none;
  stroke: var(--surface-border);
  stroke-width: 14;
}

.progress-ring__fill {
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 534.071;
  stroke-dashoffset: calc(534.071 * (1 - var(--ring-fill-percent, 0) / 100));
  transition: stroke-dashoffset 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-ring__fill {
    transition: none;
  }
}

.progress-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  pointer-events: none;
}

.progress-ring__value {
  font-size: var(--ring-hero-font-size);
  font-weight: var(--ring-hero-font-weight);
  color: var(--text-primary);
  line-height: 1;
}

.progress-ring__unit {
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  color: var(--text-secondary);
}

.progress-ring__subtext {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
}

.stats-chips {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
}

.stat-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--rounded-md);
  padding: var(--space-3);
  min-height: 48px;
  box-sizing: border-box;
}

.stat-chip__label {
  color: var(--text-secondary);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
}

.stat-chip__value {
  color: var(--text-primary);
  font-size: var(--stat-value-size);
  font-weight: var(--stat-value-weight);
}

/* Story 1.5: צ'יפ "שנת ייחוס" הוא גם קיצור-דרך ל-#settingsDialog (ר'
   EXPERIENCE.md Stat Chip) -- cursor בלבד, אין שינוי-מראה נוסף כדי לא
   להתחרות ב-accent-gold כמבטא-היחיד. */
.stat-chip--clickable {
  cursor: pointer;
}

/* Story 1.7: הצ'יפ הפך ל-focusable (tabindex=0/role=button ב-app.js) --
   אותו outline עקבי כמו .period-row/.fab/.settings-btn. */
.stat-chip--clickable:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Story 2.1: Milestone List ---------------------------------------------
   שלוש קבוצות: נחצו (accent-gold, עם תיאור+הבהרה+קישור), הבא (info-teal,
   מבטא-משני שמור *רק* לסף עתידי טרם-נחצה -- ר' DESIGN.md.Colors), עתידיים
   (text-disabled, שורה מסכמת יחידה בלי תיאור מורחב). */

.milestone-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.milestone-section[hidden] {
  display: none;
}

.milestone-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.milestone-list[hidden] {
  display: none;
}

.milestone-item {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--rounded-md);
  padding: var(--space-4);
}

/* Patch (Story 2.1 review): הפריט-הראשון-שנחשף מקבל פוקוס תכנותי אחרי
   לחיצה על "הצג עוד" (ר' renderMilestones ב-app.js) -- outline עקבי עם
   שאר האלמנטים הפוקוסביליים באפליקציה, גם כשה-focus הגיע תכנותית ולא
   מ-:focus-visible הטבעי בכל דפדפן. */
.milestone-item:focus-visible,
.milestone-item:focus {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* וריאנט "נחצה" -- accent-gold-onlight (לא accent-gold ישירות) לכותרת,
   כדי לעמוד ב-AA כטקסט על surface-card בשני מצבי בהיר/כהה (ר' style.css
   הערת accent-gold-onlight למעלה). פס-צד גם ב-accent-gold עצמו (עיטור, לא
   טקסט) -- מזהה חזותי מהיר לשורה "נחצתה" ברשימה. */
.milestone-item--crossed {
  border-inline-start: 3px solid var(--accent-gold);
}

.milestone-item__title {
  margin: 0 0 var(--space-1);
  color: var(--accent-gold-onlight);
  font-size: var(--body-size);
  font-weight: 700;
}

.milestone-item__description {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
}

/* ההבהרה המשפטית -- מלווה *תמיד* כל סף-שנחצה (NFR-2/FR-5), meta כפי
   שנקבע ב-Code Map ("הבהרה משפטית ב-meta"). */
.milestone-item__disclaimer {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
}

/* צבע-הקישור נשאר accent-gold-onlight, לא info-teal -- info-teal שמור
   בלעדית לסף-הבא (ר' DESIGN.md.Colors), אין להשתמש בו כאן גם אם זה נראה
   "כמו קישור" -- היה מוסיף צבע-סטטוס שלישי בניגוד ל-Do's/Don'ts. */
.milestone-item__link {
  display: inline-block;
  color: var(--accent-gold-onlight);
  font-size: var(--meta-size);
  font-weight: 700;
  text-decoration: none;
}

.milestone-item__link:hover,
.milestone-item__link:focus-visible {
  text-decoration: underline;
}

.milestone-item__link:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.milestone-show-more {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--surface-border);
  border-radius: var(--rounded-sm);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: var(--meta-size);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  min-height: 48px;
  cursor: pointer;
}

.milestone-show-more[hidden] {
  display: none;
}

.milestone-show-more:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* וריאנט "הבא" -- <p> יחיד (לא <li> ברשימה, ר' Code Map), אבל אותו מקצב
   חזותי (surface-card + rounded/md) כמו שורות-הרשימה כדי שירגיש כהמשך
   טבעי של אותה רשימה, לא רכיב זר. */
.milestone-item--next {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-inline-start: 3px solid var(--info-teal);
  border-radius: var(--rounded-md);
  color: var(--info-teal);
  font-size: var(--body-size);
  font-weight: 700;
}

.milestone-item--next[hidden] {
  display: none;
}

.milestone-collapsed-summary {
  margin: 0;
  color: var(--text-disabled);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
}

.milestone-collapsed-summary[hidden] {
  display: none;
}

/* Story 1.2: רשימת תקופות-שירות ---------------------------------------- */

.periods-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* מקום לפנות ל-FAB הקבוע בתחתית המסך */
  padding-bottom: calc(56px + var(--space-6));
}

.periods-list[hidden] {
  display: none;
}

.period-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--rounded-md);
  padding: var(--space-4);
}

.period-row--active {
  border-color: var(--accent-gold);
}

/* Story 1.7: השורה הפכה ל-focusable (tabindex=0/role=button ב-app.js) --
   outline עקבי עם שאר האלמנטים האינטראקטיביים (.fab/.settings-btn). */
.period-row:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.period-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--body-size);
  font-weight: 500;
}

.period-row__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--rounded-sm);
  background: var(--accent-gold);
  color: var(--accent-gold-on-fill);
  font-size: var(--meta-size);
  font-weight: 700;
}

.period-row__range {
  color: var(--text-secondary);
  font-size: var(--meta-size);
  font-weight: var(--meta-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Story 1.2: FAB --------------------------------------------------------- */

/* Story 3.1: bottom + var(--bottom-bar-offset) -- כש-הבאנר מוצג, ה-FAB
   זז מעליו (0px נוסף כשהבאנר מוסתר, אז ה-FAB חוזר למיקומו הרגיל -- ר'
   spec-3-1-ad-banner.md I/O matrix "הבאנר מוסתר -- FAB חוזר לערך הרגיל,
   לא נשאר רווח מיותם"). */
.fab {
  position: fixed;
  inset-inline-end: var(--space-5);
  bottom: calc(var(--space-5) + var(--bottom-bar-offset));
  width: 56px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--rounded-md);
  background: var(--accent-gold);
  color: var(--accent-gold-on-fill);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

.fab:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Story 1.2: דיאלוג הוספת-תקופה (bottom-sheet) -------------------------- */
/* Story 1.5: #settingsDialog משתמש באותה מחלקה .add-period-dialog (ולכן
   באותו דפוס bottom-sheet: נפתח מהתחתית, כרטיס surface-card אטום,
   rounded/lg) -- אין CSS ייעודי נוסף לדיאלוג-הגדרות עצמו, רק לכפתור שפותח
   אותו (.settings-btn למעלה) ולצ'יפ-הקיצור (.stat-chip--clickable למעלה). */

.add-period-dialog {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  top: auto;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  border: none;
  border-top-right-radius: var(--rounded-lg);
  border-top-left-radius: var(--rounded-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  padding: var(--space-5);
  box-sizing: border-box;
}

.add-period-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.add-period-dialog h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  color: var(--text-primary);
}

.add-period-dialog .field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.add-period-dialog .field--checkbox {
  flex-direction: row;
}

.add-period-dialog .field--checkbox label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.add-period-dialog label {
  font-size: var(--meta-size);
  color: var(--text-secondary);
}

.add-period-dialog input[type='text'],
.add-period-dialog input[type='date'] {
  font-family: var(--font-family);
  font-size: var(--body-size);
  color: var(--text-primary);
  background: var(--bg-elev);
  border: 1px solid var(--surface-border);
  border-radius: var(--rounded-sm);
  padding: var(--space-3);
  min-height: 48px;
  box-sizing: border-box;
}

.add-period-dialog input[type='checkbox'] {
  width: 20px;
  height: 20px;
}

.field-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--meta-size);
}

.field-error[hidden] {
  display: none;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.btn {
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--rounded-sm);
  border: none;
  font-family: var(--font-family);
  font-size: var(--body-size);
  font-weight: 500;
  cursor: pointer;
}

.btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--surface-border);
}

.btn--primary {
  background: var(--accent-gold);
  color: var(--accent-gold-on-fill);
}

/* Story 1.3: כפתור "מחק" ו-sheet-אישור מחיקה --------------------------- */

.btn--danger {
  background: var(--danger);
  color: var(--danger-on-fill);
}

/* כפתור "מחק" בתוך #addPeriodDialog.dialog-actions -- דחוף לצד ההתחלה,
   מנוגד מ"ביטול"/"שמירה" שנשארים בקצה כברירת המחדל (justify-content:
   flex-end) כדי שפעולה הרסנית לא תשב צמוד לפעולות הרגילות. */
#deletePeriodBtn {
  margin-inline-end: auto;
}

.confirm-delete-dialog__text {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
}

/* Story 3.2: שורת רכישת הסרת-פרסומות (#settingsDialog) -----------------
   .settings-row -- דפוס Settings Row הכללי (בקרה משמאל, ר' EXPERIENCE.md),
   משמש כרגע רק כאן אבל לא ספציפי-לרכישה בכוונה, כדי שדיאלוג ההגדרות יוכל
   להוסיף שורות דומות בעתיד (למשל "אודות") בלי CSS חדש -- אין span-תווית
   נפרד כרגע (ר' Patch code review -- כפתור-פעולה עצמאי לא צריך תווית
   כפולה, בניגוד לשורת שדה-התאריך למעלה). .purchase-btn* -- מצבי הכפתור
   עצמו (spinner-בתוך-הכפתור, לא מודאל חוסם נפרד; מצב-קבוע אחרי הצלחה) --
   ר' spec-3-2-remove-ads-purchase.md Boundaries/Code Map. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.purchase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 140px;
}

.purchase-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

/* מצב-"טקסט-קבוע" אחרי רכישה מוצלחת -- שטוח, לא מנוגד-חזותית כמו
   .btn--secondary הפעיל, כדי שלא יתבלבל במבט חטוף עם מצב-spinner/פעיל (ר'
   Design Notes -- אין מיקרו-אינטראקציות חגיגיות, טון עניני-רגוע). */
.purchase-btn--done {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.purchase-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-inline-start-color: transparent;
  border-radius: 50%;
  animation: purchase-spin 0.7s linear infinite;
}

.purchase-btn__spinner[hidden] {
  display: none;
}

@keyframes purchase-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Story 3.1: Ad Banner --------------------------------------------------
   #ad-banner סטטי ב-index.html (AD-8) -- billing.js אף פעם לא יוצר/מוחק
   אותו, רק קובע hidden + --bottom-bar-offset (ר' spec-3-1-ad-banner.md
   Boundaries). height קבוע + overflow:hidden הם ה-backstop: גם אם
   AdSense כותב style="height:...!important" על ה-<ins> הפנימי (הבאג
   שנתפס בסופרים ימים -- קריאת push() עם client לא-תקין עדיין מתמרנת את
   גודל-האלמנט לפני שהיא נכשלת, ר' Design Notes), שום מצב לא יכול להרחיב
   את .ad-banner עצמו מעבר לגובה הזה. bg-elev (לא surface-card) -- רצועה
   שקטה, לא מתחרה חזותית עם כרטיסי-התוכן (עקבי עם epic-3-context.md UX
   & Interaction Patterns). */
.ad-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: calc(56px + env(safe-area-inset-bottom));
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border-top: 1px solid var(--surface-border);
  box-sizing: border-box;
  z-index: 4;
}

/* [hidden] וכלל display מ-class נמצאים באותה ספציפיות -- קובעים
   display:none במפורש (אותו דפוס כמו .progress-section[hidden]/.
   milestone-section[hidden] למעלה) כדי ש-refreshAdBanner() יסתיר בפועל,
   לא רק ישאיר רצועה ריקה. */
.ad-banner[hidden] {
  display: none;
}