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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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