/* ============================================================
   קלוד בדפדפן שלכם, עיצוב מדריך זה בלבד.
   כל סלקטור כאן מתחיל ב-.guide-claude-in-chrome כדי שהעיצוב
   לא ידלוף לשאר האתר. אל תשתמשו בקובץ הזה מחוץ לדף הזה.

   הקובץ שוכפל מ-guides/organize-folder-with-claude-code.css - אותה פלטה,
   אותה שיטת עבודה, ואף ערך צבע, גופן, רדיוס או צל חדש לא נוסף כאן.

   הווריאנט rtl-prompt של code-block נשאר מהמקור, ובכוונה. תשעת
   מקטעי הקוד כאן מתחלקים לשניים: שניים הם פקודות טרמינל באנגלית
   ונשארים ltr, ושבעה הם פרומפטים בעברית שהקורא מעתיק לקלוד, והם
   הצרכן של הכלל הזה. במדריך הפלאגינים הכלל הוסר כי שם לא היה לו
   צרכן, וכאן יש לו שבעה.

   הווריאנט rtl-inline לא הועתק, כי ארבעת צ׳יפי הקוד בשורה בדף הזה
   הם באנגלית. */

.guide-claude-in-chrome{
  /* 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 genuinely local to this guide are
     declared below. */
  --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-claude-in-chrome h1,
.guide-claude-in-chrome h2,
.guide-claude-in-chrome h3,
.guide-claude-in-chrome h4,
.guide-claude-in-chrome p,
.guide-claude-in-chrome ul,
.guide-claude-in-chrome ol,
.guide-claude-in-chrome figure{ margin:0; }
.guide-claude-in-chrome ul,
.guide-claude-in-chrome ol{ padding:0; list-style:none; }
.guide-claude-in-chrome p,
.guide-claude-in-chrome li,
.guide-claude-in-chrome h1,
.guide-claude-in-chrome h2,
.guide-claude-in-chrome h3,
.guide-claude-in-chrome h4{ overflow-wrap:anywhere; }
.guide-claude-in-chrome img,
.guide-claude-in-chrome svg,
.guide-claude-in-chrome video,
.guide-claude-in-chrome canvas{ display:block; max-width:100%; height:auto; }
.guide-claude-in-chrome button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.guide-claude-in-chrome a{ color:inherit; }

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

/* ---------- Latin / numerals / labels ---------- */
.guide-claude-in-chrome .en,
.guide-claude-in-chrome .num,
.guide-claude-in-chrome .section-label,
.guide-claude-in-chrome .logo-en{
  font-family:var(--font-en);
}

/* ---------- Layout helpers ---------- */
.guide-claude-in-chrome .wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding-inline:20px;
}
.guide-claude-in-chrome{ z-index:1; }
.guide-claude-in-chrome section{
  position:relative;
  z-index:1;
  padding-block:72px;
}

.guide-claude-in-chrome .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-claude-in-chrome 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-claude-in-chrome h3{
  font-weight:700;
  font-size:1.1875rem;
  margin-bottom:8px;
  letter-spacing:0;
  color:var(--ink);
}

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

/* ---------- Progress bar ---------- */
.guide-claude-in-chrome .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-claude-in-chrome .gds-progress-bar{ transition:none; }
}

/* ---------- Hero ---------- */
.guide-claude-in-chrome .hero{
  padding-block:76px 60px;
  text-align:center;
}
.guide-claude-in-chrome .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-claude-in-chrome .hero-sub{
  color:var(--ink-muted);
  font-size:clamp(1rem, 2.2vw, 1.1875rem);
  max-width:620px;
  margin:0 auto 32px;
}

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

.guide-claude-in-chrome .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-claude-in-chrome .btn:hover{ transform:translateY(-1px); }
html.link-emphasis .guide-claude-in-chrome .btn{
  text-decoration:underline;text-underline-offset:3px;
}
@media (prefers-reduced-motion: reduce){ .guide-claude-in-chrome .btn{ transition:none; } .guide-claude-in-chrome .btn:hover{ transform:none; } }

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

.guide-claude-in-chrome .btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink-muted);
}
.guide-claude-in-chrome .btn-secondary:hover{
  border-color:var(--accent-hover);
  color:var(--accent-hover);
}

.guide-claude-in-chrome .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-claude-in-chrome .hero-note .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.guide-claude-in-chrome .hero-note-text{
  min-width:0;
  overflow-wrap:anywhere;
}

.guide-claude-in-chrome .subsection{ margin-top:28px; }

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

/* ---------- Code blocks (stay dark on purpose - see DESIGN.md) ---------- */
.guide-claude-in-chrome .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-claude-in-chrome .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-claude-in-chrome .code-block code{
  display:inline-block;
  min-width:max-content;
}
.guide-claude-in-chrome .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-claude-in-chrome .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-claude-in-chrome .copy-btn:hover{ border-color:var(--accent); }
.guide-claude-in-chrome .copy-btn.is-copied{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
.guide-claude-in-chrome .copy-btn svg{ width:14px; height:14px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){ .guide-claude-in-chrome .copy-btn{ transition:none; } }

.guide-claude-in-chrome .inline-code{
  font-family:var(--font-mono);
  font-size:0.88em;
  background:var(--surface-sunk);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 6px;
  direction:ltr;
  unicode-bidi:embed;
  display:inline-block;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- Hebrew prompt block, ported verbatim from guides/hyperframes.css.
   Same dark .code-block shell, but the content is Hebrew prose rather than a
   terminal command, so the direction flips back to rtl and the text wraps
   instead of scrolling. Nothing here introduces a new token value. ---------- */
.guide-claude-in-chrome .code-block.rtl-prompt pre{
  direction:rtl;
  text-align:start;
  white-space:pre-wrap;
  overflow-x:hidden;
}
.guide-claude-in-chrome .code-block.rtl-prompt::after{
  /* wrapped text never overflows horizontally, so the LTR blocks' edge-fade
     (which signals more content off-screen) doesn't apply here */
  display:none;
}
.guide-claude-in-chrome .code-block.rtl-prompt .copy-btn{
  inset-inline-start:auto;
  inset-inline-end:8px;
}
.guide-claude-in-chrome .code-block.rtl-prompt code{
  min-width:0;
  display:block;
}

/* ---------- Small closing note (page-bottom update note) ---------- */
.guide-claude-in-chrome .page-note{
  color:var(--ink-muted);
  font-size:0.84375rem;
  max-width:68ch;
  margin-top:8px;
  padding-top:20px;
  border-top:var(--border-w) solid var(--border);
}

/* ---------- Reveal on scroll ---------- */
.guide-claude-in-chrome .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.guide-claude-in-chrome .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .guide-claude-in-chrome .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- aria-live copy status ---------- */
.guide-claude-in-chrome .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;
}