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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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