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

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

   שני הבדלים מהמקור:
   1. --success סונכרן ל-#0A7351, הערך הנוכחי ב-:root של ../styles.css.
      במקור נשאר #0B815A, שהוחלף אחרי שנמצא שהוא מגיע ל-4.12:1 בלבד על
      הגוון של עצמו. הקובץ הזה נולד מסונכרן ולא עם ערך ישן.
   2. נוסף הווריאנט rtl-inline של inline-code, לשתי דוגמאות הפרומפט
      בעברית שמופיעות בתוך משפט. פירוט בהערה שליד הכלל עצמו.

   הווריאנט rtl-prompt של code-block נשאר מהמקור. */

.guide-claude-code-agent-view{
  --bg:#FEFEFE;
  --surface:#FFFFFF;
  --surface-sunk:#F7F6FC;
  --ink:#181A1E;
  --ink-muted:#4A4D5A;
  --accent:#751FFD;
  --accent-deep:#751FFD;
  --accent-hover:#6417E0;
  --accent-rgb:117,31,253;
  --accent-dim:rgba(117,31,253,0.14);
  --on-accent:#FFFFFF;
  --border:#E8E6F2;
  --border-strong:#D5D2E6;
  --code-bg:#181A1E;
  --code-text:#E8EEF2;
  --code-text-muted:#A8B0BE;
  --code-surface:#23262D;
  --code-border:rgba(232,238,242,0.16);
  --danger:#D92020;
  --danger-rgb:217,32,32;
  --success:#0A7351;
  --success-rgb:10,115,81;

  --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;
}

/* takes precedence over html.hc by proximity in the custom-property
   inheritance chain, not selector specificity - see the identical note
   in claude-code-install.css. Values mirror html.hc in ../styles.css. */
html.hc .guide-claude-code-agent-view{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-sunk:#FFFFFF;
  --ink:#000000;
  --ink-muted:#000000;
  --accent:#4C00C7;
  --accent-deep:#4C00C7;
  --on-accent:#FFFFFF;
  --border:#000000;
  --border-strong:#000000;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.guide-claude-code-agent-view .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-code-agent-view .code-block.rtl-prompt pre{
  direction:rtl;
  text-align:start;
  white-space:pre-wrap;
  overflow-x:hidden;
}
.guide-claude-code-agent-view .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-code-agent-view .code-block.rtl-prompt .copy-btn{
  inset-inline-start:auto;
  inset-inline-end:8px;
}
.guide-claude-code-agent-view .code-block.rtl-prompt code{
  min-width:0;
  display:block;
}

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

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

/* ---------- inline Hebrew example prompts ----------
   Two backticked strings in this guide's source are Hebrew prompts sitting
   inside a sentence, not terminal commands: the /bg example and the
   claude --bg example. .inline-code is dir=ltr like every other code chip
   here, which would push the Hebrew words to the wrong side of the Latin
   command. This variant flips just those two back to rtl and isolates them
   so they cannot disturb the sentence around them. The Latin command inside
   each one is wrapped in <bdi> in the markup, so it keeps its own ltr run.
   Same pattern as guides/ai-jobs-three-tools.css. */
.guide-claude-code-agent-view .inline-code.rtl-inline{
  direction:rtl;
  unicode-bidi:isolate;
}