/* ============================================================
   העיצוב המשותף לכל עמודי המדריכים.

   הקובץ הזה נולד מתוך המדידה: 48 הכללים שכאן היו זהים בייט
   בבייט ב-17 קבצי העיצוב של המדריכים, כל אחד עם ההיקף הפרטי
   שלו. במקום 17 עותקים יש עותק אחד.

   ההיקף כאן הוא .guide-page ולא .guide-<slug>. שתי המחלקות יושבות על
   אותו אלמנט main, אז העברת כלל מאחת לשנייה לא יכולה לשנות את שרשרת
   הירושה של משתני ה-CSS. גיליון המדריך עצמו נטען אחרי הקובץ הזה, אז
   מדריך יכול עדיין לדרוס כל דבר שכתוב כאן, וזה מה שקורה בפועל בכמה
   מקרים.

   מה לא נכנס לכאן, ולמה: כללים שאינם משותפים לכל 17 המדריכים.
   .code-block.rtl-prompt נמצא ב-8 מהם, .page-note ב-13, .inline-code
   בשתי גרסאות שונות. כלל שאינו זהה בכל מקום נשאר אצל המדריך שלו, כי
   העברה שלו לכאן הייתה משנה עמודים שלא ביקשו אותה.

   שלושה מדריכים אינם משתמשים בקובץ הזה כלל, כי הם דור עיצוב אחר ואינם
   נושאים את הליבה: claude-code-design-stack, hyperframes ו-
   claude-code-first-automation. ועוד ארבעה מטמיעים את העיצוב בתוך
   העמוד עצמו. אף אחד מהשבעה לא נגע.

   אין כאן אף ערך צבע, גופן, רדיוס או צל חדש. כל טוקן מגיע מ-:root
   ב-../styles.css. ============================================ */

.guide-page{
  /* No palette here. Every colour token comes from :root in ../styles.css
     and inherits down to this element.

     A full copy of the palette used to live in blocks like this one. Because
     the block sits on <main>, that copy won for everything inside the page by
     proximity in the custom-property inheritance chain - not by load order
     and not by specificity - so a token edited in :root silently never
     reached guide pages. Only values shared by every guide are declared
     below; anything genuinely local stays in the guide's own sheet. */
  --accent-dim:rgba(117,31,253,0.14);
  --code-surface:#23262D;
  --code-border:rgba(232,238,242,0.16);

  --font-en:'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  --font-he:'Rubik', 'Rubik Fallback', 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  --font-mono:'JetBrains Mono', 'JetBrains Mono Fallback', monospace;

  --radius:14px;
  --radius-sm:8px;
  --max-w:980px;

  display:block;
  position:relative;
  direction:rtl;
  color:var(--ink);
  font-family:var(--font-he);
  font-weight:400;
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  max-width:100%;
  overflow-x:clip;
}

.guide-page h1,
.guide-page h2,
.guide-page h3,
.guide-page h4,
.guide-page p,
.guide-page ul,
.guide-page ol,
.guide-page figure{ margin:0; }

.guide-page ul,
.guide-page ol{ padding:0; list-style:none; }

.guide-page p,
.guide-page li,
.guide-page h1,
.guide-page h2,
.guide-page h3,
.guide-page h4{ overflow-wrap:anywhere; }

.guide-page img,
.guide-page svg,
.guide-page video,
.guide-page canvas{ display:block; max-width:100%; height:auto; }

.guide-page button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

.guide-page a{ color:inherit; }

.guide-page a:focus-visible,
.guide-page button:focus-visible,
.guide-page [tabindex]:focus-visible,
.guide-page input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.guide-page .en,
.guide-page .num,
.guide-page .section-label,
.guide-page .logo-en{
  font-family:var(--font-en);
}

.guide-page .wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding-inline:20px;
}

.guide-page{ z-index:1; }

.guide-page section{
  position:relative;
  z-index:1;
  padding-block:72px;
}

.guide-page .section-label{
  display:inline-block;
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--accent-deep);
  text-transform:uppercase;
  margin-bottom:12px;
}

.guide-page h2{
  font-family:var(--font-he);
  font-weight:700;
  font-size:clamp(1.5rem, 4vw, 2.125rem);
  margin-bottom:12px;
  letter-spacing:0;
  color:var(--ink);
}

.guide-page h3{
  font-weight:700;
  font-size:1.1875rem;
  margin-bottom:8px;
  letter-spacing:0;
  color:var(--ink);
}

.guide-page .section-intro{
  color:var(--ink-muted);
  max-width:620px;
  margin-bottom:32px;
  font-size:1rem;
}

.guide-page .gds-progress-bar{
  position:fixed;
  top:0;
  inset-inline-start:0;
  inset-inline-end:0;
  height:3px;
  width:0%;
  background:var(--accent);
  transition:width 0.1s linear;
  z-index:150;
}

@media (prefers-reduced-motion: reduce){
  .guide-page .gds-progress-bar{ transition:none; }
}

.guide-page .hero{
  padding-block:76px 60px;
  text-align:center;
}

.guide-page .hero h1{
  font-family:var(--font-he);
  font-weight:700;
  font-size:clamp(1.75rem, 5.5vw, 2.875rem);
  line-height:1.25;
  max-width:780px;
  margin:0 auto 20px;
  letter-spacing:0;
  color:var(--ink);
}

.guide-page .hero-sub{
  color:var(--ink-muted);
  font-size:clamp(1rem, 2.2vw, 1.1875rem);
  max-width:620px;
  margin:0 auto 32px;
}

.guide-page .hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.guide-page .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:0.9375rem;
  text-decoration:none;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border:1px solid transparent;
}

.guide-page .btn:hover{ transform:translateY(-1px); }

html.link-emphasis .guide-page .btn{
  text-decoration:underline;text-underline-offset:3px;
}

@media (prefers-reduced-motion: reduce){ .guide-page .btn{ transition:none; } .guide-page .btn:hover{ transform:none; } }

.guide-page .btn-primary{
  background:var(--accent);
  color:var(--on-accent);
}

.guide-page .btn-primary:hover{
  background:var(--accent-hover);
  box-shadow:0 6px 24px rgba(var(--accent-rgb), 0.28);
}

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

.guide-page .btn-secondary:hover{
  border-color:var(--accent-hover);
  color:var(--accent-hover);
}

.guide-page .hero-note{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  max-width:100%;
  font-size:0.84375rem;
  color:var(--ink-muted);
  background:var(--surface);
  border:1px solid var(--border);
  padding:8px 16px;
  border-radius:999px;
}

.guide-page .hero-note .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}

.guide-page .hero-note-text{
  min-width:0;
  overflow-wrap:anywhere;
}

.guide-page .subsection{ margin-top:28px; }

.guide-page p.body-text{
  color:var(--ink-muted);
  font-size:0.9375rem;
  max-width:68ch;
  margin-bottom:14px;
}

.guide-page .code-block{
  position:relative;
  max-width:100%;
  background:var(--code-bg);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  margin-block:12px;
  overflow:hidden;
}

.guide-page .code-block pre{
  direction:ltr;
  text-align:start;
  font-family:var(--font-mono);
  font-size:0.84375rem;
  color:var(--code-text);
  margin:0;
  padding:60px 16px 16px 16px;
  max-width:100%;
  overflow-x:auto;
  white-space:pre;
  line-height:1.6;
}

.guide-page .code-block code{
  display:inline-block;
  min-width:max-content;
}

.guide-page .code-block::after{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:60px;
  bottom:0;
  width:20px;
  background:linear-gradient(to left, var(--code-bg), transparent);
  pointer-events:none;
}

.guide-page .copy-btn{
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:44px;
  min-height:44px;
  padding:6px 14px;
  background:var(--code-surface);
  border:1px solid var(--code-border);
  border-radius:999px;
  font-family:var(--font-en);
  font-size:0.75rem;
  font-weight:600;
  color:var(--code-text);
  direction:ltr;
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.guide-page .copy-btn:hover{ border-color:var(--accent); }

.guide-page .copy-btn.is-copied{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}

.guide-page .copy-btn svg{ width:14px; height:14px; flex-shrink:0; }

@media (prefers-reduced-motion: reduce){ .guide-page .copy-btn{ transition:none; } }

.guide-page .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}

.guide-page .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .guide-page .reveal{ opacity:1; transform:none; transition:none; }
}

.guide-page .visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}