/* ============================================================
   AI כבר לוקח עבודות ושלושת הכלים להתחיל איתם, עיצוב מדריך זה בלבד.
   כל סלקטור כאן מתחיל ב-.guide-ai-jobs-three-tools כדי שהעיצוב
   לא ידלוף לשאר האתר. אל תשתמשו בקובץ הזה מחוץ לדף הזה.

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

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

   התוספת היחידה שאין באף אחד מקובצי המדריכים הקודמים היא הווריאנט
   rtl-inline של inline-code, בסוף הקובץ. שתי הדוגמאות בפרק "הטעות
   שכולם עושים בהתחלה" יושבות בתוך משפט רץ ולא בבלוק נפרד, ו-
   inline-code הרגיל מקבע direction:ltr שהיה הופך אותן. */

.guide-ai-jobs-three-tools{
  --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:#0B815A;
  --success-rgb:11,129,90;

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

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

/* ---------- Latin / numerals / labels ---------- */
.guide-ai-jobs-three-tools .en,
.guide-ai-jobs-three-tools .num,
.guide-ai-jobs-three-tools .section-label,
.guide-ai-jobs-three-tools .logo-en{
  font-family:var(--font-en);
}

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

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

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

/* ---------- Progress bar ---------- */
.guide-ai-jobs-three-tools .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-ai-jobs-three-tools .gds-progress-bar{ transition:none; }
}

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

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

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

.guide-ai-jobs-three-tools .btn-primary{
  background:var(--accent);
  color:var(--on-accent);
}
.guide-ai-jobs-three-tools .btn-primary:hover{
  background:var(--accent-hover);
  box-shadow:0 6px 24px rgba(var(--accent-rgb), 0.28);
}

.guide-ai-jobs-three-tools .btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink-muted);
}
.guide-ai-jobs-three-tools .btn-secondary:hover{
  border-color:var(--accent-hover);
  color:var(--accent-hover);
}

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

.guide-ai-jobs-three-tools .subsection{ margin-top:28px; }

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

.guide-ai-jobs-three-tools .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 example, the one rule in this file that isn't a
   duplicate. inline-code above hard-codes direction:ltr for terminal commands,
   which reverses a Hebrew string. isolate (not embed) keeps the chip from
   bleeding its direction into the sentence around it, and does it in CSS so
   no bidi control character is needed in the HTML. ---------- */
.guide-ai-jobs-three-tools .inline-code.rtl-inline{
  direction:rtl;
  unicode-bidi:isolate;
}

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

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

/* ---------- aria-live copy status ---------- */
.guide-ai-jobs-three-tools .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;
}