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

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

   שני הבדלים מהמקור, ושניהם נובעים מהתוכן של הדף הזה:

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

   2. הווריאנט rtl-inline של inline-code הוחזר, מילה במילה
      מ-guides/claude-code-agent-view.css. פירוט בהערה שליד הכלל עצמו. */

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

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

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

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

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

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

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

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

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

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

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

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

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

.guide-claude-code-permissions .subsection{ margin-top:28px; }

.guide-claude-code-permissions 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-code-permissions .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-code-permissions .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-code-permissions .code-block code{
  display:inline-block;
  min-width:max-content;
}
.guide-claude-code-permissions .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-code-permissions .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-code-permissions .copy-btn:hover{ border-color:var(--accent); }
.guide-claude-code-permissions .copy-btn.is-copied{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
.guide-claude-code-permissions .copy-btn svg{ width:14px; height:14px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){ .guide-claude-code-permissions .copy-btn{ transition:none; } }

.guide-claude-code-permissions .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 inline chip, ported verbatim from
   guides/claude-code-agent-view.css. .inline-code above forces direction:ltr,
   which is right for the 20 Latin chips on this page and wrong for the one
   whose content is Hebrew: כלי(מה בדיוק). Without this the parenthesis lands
   on the wrong side and the phrase reads backwards. isolate rather than embed
   so the chip cannot disturb the direction of the sentence around it. ------- */
.guide-claude-code-permissions .inline-code.rtl-inline{
  direction:rtl;
  unicode-bidi:isolate;
}

/* ---------- Small closing note (page-bottom update note) ---------- */
.guide-claude-code-permissions .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-code-permissions .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.guide-claude-code-permissions .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .guide-claude-code-permissions .reveal{ opacity:1; transform:none; transition:none; }
}

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