/* ============================================================================
   SnapSkill — Studio
   The shared layer: brand tokens, the fonts, the reset, the green rail, and the
   accessibility widget. Everything in this file appears on every page and is
   meant to be identical on every page.

   Load it BEFORE a page's own <style>, so a page can still override a shared
   rule without reaching for !important.

   What is deliberately NOT here: layout containers (.wrap, main's offset),
   buttons, headings, and anything else a page composes for itself. Those differ
   per page for real reasons — the articles indent with body, index.html indents
   with main — and hoisting them would break one page to tidy another.

   Sourced from index.html, the live and most-evolved expression of the design.
   The previous version of this file was something else: a complete alternative
   landing-page design (marked "כיוון C") with its own .hero, .chapters, .quote,
   .faq and footer that no shipped page ever used and that contradicted
   index.html rule for rule. Only its sidebar was ever adopted, by being copied
   back into each page by hand. That file is preserved verbatim in
   ../public-backup-20260803-011519/studio.css if the direction is wanted later.
   ========================================================================== */

/* ── tokens ───────────────────────────────────────────────────────────────
   Two generations of names, on purpose. --paper/--green/--brass is the studio
   palette. The short --p/--g/--bg/--t set is the earlier naming, kept and
   remapped onto the same values so older components recolor themselves instead
   of having to be rewritten. Add new names to the studio set only. */
:root{
  /* studio palette */
  --paper:#FAF9F5;--paper2:#F2F0E8;--ink:#191713;--soft:#6A665A;--faint:#96917F;
  --line:#E4E1D5;--line2:#D6D2C2;--green:#0E3B2C;--green2:#155540;--green-deep:#092B1F;--wash:#EDF3EE;
  --brass:#D99A2B;--brass-ink:#8F5F00;--brass-wash:rgba(217,154,43,.14);
  /* The rail has two widths. --sb-rail is what the page is indented by and never changes;
     --sb is how wide the rail becomes when opened, and it opens OVER the content so that
     nothing reflows. Pages offset their content by --sb-rail, not --sb. */
  --sb-rail:72px;--sb:264px;--ease:cubic-bezier(.32,.72,0,1);

  /* earlier names, remapped onto the studio palette */
  --p:#0E3B2C;--pl:#8F5F00;--p2:#155540;
  --g:#0E3B2C;--g2:#155540;--glow:rgba(14,59,44,.18);
  --bg:#FAF9F5;--card:#FFFEFB;--glass:#FFFEFB;
  --border:#E4E1D5;--border2:#D6D2C2;
  --t:#191713;--m:#6A665A;--r:14px;
  --ease-out:cubic-bezier(.32,.72,0,1);
  color-scheme:light;
}

/* ── fonts ────────────────────────────────────────────────────────────────
   Self-hosted and split by script, so a browser rendering Hebrew never
   downloads the Latin file. Heebo sets text in both scripts; Frank Ruhl Libre
   is the display face and is only used at heading sizes. */
@font-face{font-family:'Heebo';src:url('fonts/heebo-var-hebrew.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200C-2010,U+20AA}
@font-face{font-family:'Heebo';src:url('fonts/heebo-var-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'Frank Ruhl Libre';src:url('fonts/frank-ruhl-libre-700-hebrew.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:'Frank Ruhl Libre';src:url('fonts/frank-ruhl-libre-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

/* ── reset + base ─────────────────────────────────────────────────────────
   Only what every page already agreed on. Page-level differences that are real
   decisions — 1.85 line-height on the long-form articles, overflow-x on the
   landing page, min-height where a short page still needs a full-height
   background — stay with those pages and override from there. */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Heebo',sans-serif;
  background:var(--bg);
  color:var(--t);
  direction:rtl;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── keyboard access ──────────────────────────────────────────────────────
   The skip link is off-screen until focused, which is the first thing a
   keyboard user hits on every page. */
.skip-link{position:absolute;top:-100%;right:50%;transform:translateX(50%);background:var(--p);color:#fff;padding:.5rem 1.25rem;border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;z-index:9999;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}
/* Green, not brass: index.html's later polish pass moved the ring to the rail's
   green and the other pages never caught up. Unifying on the newer decision. */
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

/* ── the green rail ───────────────────────────────────────────────────────
   studio-nav.js writes this markup into every page, so there is exactly one
   author for the structure — and now one for the styling too. Until this file,
   seven copies of these rules existed (five pages, legal.css, and this file),
   and they had already drifted: four of them had lost var(--ease) from the item
   and CTA transitions and were easing on the browser default.

   The rail rests at 72px, showing icons only, and opens to 264px on top of the
   page rather than pushing it. Opening therefore costs one width transition and
   no layout of the document at all. Labels stay in the DOM at every width — they
   are clipped, never removed — so the accessibility tree is the same whether the
   rail is open or shut, and each item keeps a tooltip for the closed state. */
/* Overflow flips with the state, and it has to. Closed, the rail must let the tooltips
   escape its 72px, and it can afford to: nine icons and a chip fit any viewport without
   scrolling. Open, it may genuinely need to scroll, and by then no tooltip is shown.
   (overflow-y:auto with overflow-x:visible is not an option — CSS computes the visible
   axis to auto as soon as the other one is not visible, and clips anyway.) */
aside{position:fixed;inset-block:0;inset-inline-start:0;width:var(--sb-rail);background:var(--green);color:#EDEFE6;display:flex;flex-direction:column;z-index:100;padding:18px 12px 22px;overflow:visible;transition:width .42s var(--ease)}
.rail-open aside{width:var(--sb);padding-inline:18px;overflow-x:hidden;overflow-y:auto;box-shadow:0 0 60px -12px rgba(9,43,31,.45)}

/* the toggle, at the top of the rail */
.sb-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-bottom:10px;border:0;border-radius:11px;background:none;color:#EDEFE6;cursor:pointer;transition:background .3s var(--ease)}
.sb-toggle:hover{background:rgba(255,255,255,.1)}
.sb-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}

.sb-mark{display:flex;align-items:baseline;gap:10px;padding:0 8px 18px;white-space:nowrap}
.sb-mark .en{font-family:'Frank Ruhl Libre',serif;font-weight:700;font-size:21px;color:#fff}
.sb-mark .he{font-size:10.5px;letter-spacing:.26em;color:rgba(237,239,230,.55)}
.sb-group{margin-top:14px}
.sb-cap{padding:0 12px 8px;font-size:10px;letter-spacing:.24em;color:rgba(237,239,230,.45);white-space:nowrap}

/* text-decoration:none is load-bearing. Rail items are <a> elements, and on the
   five pages that had no blanket `a` rule the whole rail — gold CTA included —
   was rendering underlined. The three pages that did have one were not. */
.sb-item{position:relative;display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;font-size:14.5px;color:rgba(237,239,230,.85);text-decoration:none;cursor:pointer;border:0;background:none;width:100%;text-align:start;font-family:inherit;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease)}
.sb-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.85}
.sb-item:hover{background:rgba(255,255,255,.09);color:#fff}
.sb-item.active{background:var(--paper);color:var(--green);font-weight:700}
.sb-item.active svg{opacity:1}
.sb-item.locked{color:rgba(237,239,230,.45);cursor:default}
.sb-item.locked .lock{margin-inline-start:auto;opacity:.7}
.sb-item.shake{animation:shakex .4s var(--ease)}
@keyframes shakex{25%{transform:translateX(3px)}50%{transform:translateX(-3px)}75%{transform:translateX(2px)}}

/* Closed: the label collapses to nothing but stays readable to a screen reader.
   opacity carries the fade because width alone would animate layout. */
/* The label is clipped at the label, not at the rail, so the rail itself can stay
   overflow:visible for the tooltips. It keeps its box in the accessibility tree either way. */
.sb-label{width:0;overflow:hidden;opacity:0;transition:opacity .2s var(--ease)}
.rail-open .sb-label{width:auto;overflow:visible;opacity:1;transition:opacity .3s var(--ease) .1s}

/* Closed, the wordmark and the footnote collapse rather than fade in place: an invisible
   line of text still holds its height, and 72px of rail has no room to spend on a gap that
   looks like a mistake. The group caption keeps its place as a hairline, which is what it
   was doing anyway — separating one group from the next. Text stays in the accessibility
   tree in every case, because none of this uses display:none. */
.sb-mark,.sb-note{height:0;margin:0;padding:0;overflow:hidden;opacity:0;transition:height .3s var(--ease),opacity .2s var(--ease)}
.rail-open .sb-mark{height:auto;padding:0 8px 18px;opacity:1;transition:opacity .3s var(--ease) .1s}
.rail-open .sb-note{height:auto;opacity:1;transition:opacity .3s var(--ease) .1s}
.sb-cap{height:1px;padding:0;margin:18px 12px 16px;overflow:hidden;color:transparent;background:rgba(237,239,230,.16);transition:margin .3s var(--ease),color .2s var(--ease)}
.rail-open .sb-cap{height:auto;padding:0 12px 8px;margin:0;color:rgba(237,239,230,.45);background:none;transition:color .3s var(--ease) .1s}

/* Tooltip for the closed state, on hover and on keyboard focus alike. Suppressed
   while the rail is open, where the label is already legible. */
.sb-item::after{content:attr(data-label);position:absolute;inset-inline-start:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.96);transform-origin:center right;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:1}
.sb-item:hover::after,.sb-item:focus-visible::after{opacity:1;transform:translateY(-50%) scale(1)}
.rail-open .sb-item::after{content:none}

.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:18px 2px 0}
.sb-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--brass);color:#241A05;font-weight:700;font-size:15px;padding:12px 14px;border-radius:10px;text-decoration:none;white-space:nowrap;transition:background .3s var(--ease)}
.sb-cta:hover{background:#E5A93C}
.sb-cta svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail-open .sb-cta svg{display:none}
.sb-note{font-size:11px;color:rgba(237,239,230,.5);text-align:center;white-space:nowrap}

/* ── who is signed in ─────────────────────────────────────────────────────
   The rail foot used to offer "מתחילים בשאלון" to everyone, including people
   with sprints already behind them. Signed in, it now identifies the account and
   opens it. Initials, because the product has no avatars and inventing one would
   be inventing data. */
.sb-user{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;text-decoration:none;color:rgba(237,239,230,.85);white-space:nowrap;transition:background .3s var(--ease)}
.sb-user:hover{background:rgba(255,255,255,.1);color:#fff}
.sb-user.active{background:var(--paper);color:var(--green)}
.sb-initials{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--brass);color:#241A05;font-weight:700;font-size:13px;letter-spacing:.02em}
.sb-user .who{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.sb-user .who b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.sb-user .who span{font-size:11px;opacity:.65;overflow:hidden;text-overflow:ellipsis}

/* ── mobile ───────────────────────────────────────────────────────────────
   Under 880px there is no room for even an icon rail, so it goes fully
   off-canvas and a bar takes its place. The closed state translates by the rail
   width rather than a percentage: under overflow-x:clip in RTL a percentage
   translateX resolves to 0. */
.mbar{display:none;position:sticky;top:0;z-index:110;background:var(--green);color:#fff;height:58px;align-items:center;justify-content:space-between;padding:0 18px}
.mbar .en{font-family:'Frank Ruhl Libre',serif;font-size:19px}
.mbar button{background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.mbar svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}

/* The scrim catches the click-anywhere-to-close at every width, but only dims on
   mobile, where the rail covers the page and the moment really is modal. On the
   desktop the rail merely widens, so a dimmed page would overstate it. */
.scrim{display:none;position:fixed;inset:0;background:transparent;z-index:99}
.rail-open .scrim{display:block}
@media(max-width:880px){
  #sidebar{width:var(--sb);padding-inline:18px;transform:translateX(calc(var(--sb) + 12px));transition:transform .42s var(--ease)}
  .rail-open #sidebar{transform:none}
  .sb-toggle{display:none}
  .sb-label{width:auto;overflow:visible;opacity:1}
  .sb-mark{height:auto;padding:0 8px 18px;opacity:1}
  .sb-note{height:auto;opacity:1}
  .sb-cap{height:auto;padding:0 12px 8px;margin:0;color:rgba(237,239,230,.45);background:none}
  .sb-item::after{content:none}
  .sb-cta svg{display:none}
  .mbar{display:flex}
  .scrim{background:rgba(15,20,15,.45)}
  /* Removing the content offset stays with the page: index.html indents with
     main, the articles and generate.html indent with body. */
}
@media(prefers-reduced-motion:reduce){
  aside,#sidebar{transition:none}
}

/* ── accessibility widget ─────────────────────────────────────────────────
   Required under IS 5568, and present on every page. It was still wearing the
   violet of a design the site no longer uses, which made the one control that
   appears everywhere the one control that matched nothing around it. It is now
   the rail in miniature: green surface, brass for the active state. */
/* Offset by the rail, not pinned to the viewport edge. The rail sits at
   inset-inline-start, and a widget pinned to that same edge lands on top of it: at 264px
   the rail's foot was wide enough that the overlap only clipped a corner, but at 72px the
   button covered the account chip completely and elementFromPoint returned the widget.
   Offsetting by --sb-rail (which never changes) also means the widget does not jump when
   the rail opens. */
#a11y-widget{position:fixed;bottom:1.5rem;inset-inline-start:calc(1.5rem + var(--sb-rail));inset-inline-end:auto;z-index:9999;direction:rtl;transition:inset-inline-start .42s var(--ease)}
/* It slides out of the way with the rail rather than being covered by it. Staying put
   would put the button on top of the account chip the moment the rail opened, which is
   the same collision one width earlier. */
.rail-open #a11y-widget{inset-inline-start:calc(1.5rem + var(--sb))}
@media(max-width:880px){
  #a11y-widget{inset-inline-start:1.5rem}
  /* Under the scrim while the drawer is open, like the rest of the page. The widget is
     fixed at z-index 9999 and was the one element still floating above a modal overlay,
     landing on top of the drawer. It is not hidden, only layered honestly. */
  .rail-open #a11y-widget{inset-inline-start:1.5rem;z-index:98}
}
@media(prefers-reduced-motion:reduce){ #a11y-widget{transition:none} }
#a11y-toggle{width:52px;height:52px;border-radius:50%;background:var(--green);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px -6px rgba(9,43,31,.55),0 2px 8px rgba(25,23,19,.18);transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .15s var(--ease);color:#F6F5EF}
#a11y-toggle:hover{background:var(--green2);box-shadow:0 10px 30px -8px rgba(9,43,31,.6),0 2px 8px rgba(25,23,19,.2)}
#a11y-toggle:active{transform:scale(.96)}
#a11y-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
#a11y-panel{position:absolute;bottom:64px;right:0;width:276px;background:var(--green-deep);border:1px solid rgba(237,239,230,.12);border-radius:16px;padding:1.25rem;box-shadow:0 24px 60px -20px rgba(9,43,31,.7),0 2px 12px rgba(25,23,19,.25)}
#a11y-panel[hidden]{display:none}
.a11y-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.a11y-hdr h2{font-family:'Frank Ruhl Libre',Georgia,serif;font-size:1rem;font-weight:700;color:#F6F5EF;margin:0}
.a11y-close{background:none;border:none;color:rgba(237,239,230,.6);font-size:1.1rem;cursor:pointer;padding:.25rem .45rem;border-radius:6px;transition:color .2s var(--ease),background .2s var(--ease);font-family:'Heebo',sans-serif;line-height:1}
.a11y-close:hover{color:#F6F5EF;background:rgba(255,255,255,.09)}
.a11y-close:active{transform:scale(.96)}
.a11y-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid rgba(237,239,230,.1)}
.a11y-row:last-child{border:none}
.a11y-lbl{font-size:.84rem;color:rgba(237,239,230,.82);font-weight:500}
.a11y-grp{display:flex;gap:.3rem}
.a11y-btn{background:rgba(255,255,255,.06);border:1px solid rgba(237,239,230,.14);color:rgba(237,239,230,.7);font-size:.76rem;font-weight:600;padding:.3rem .55rem;border-radius:8px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);font-family:'Heebo',sans-serif;min-width:32px;text-align:center;line-height:1.4}
.a11y-btn:hover{background:rgba(255,255,255,.12);color:#F6F5EF;border-color:rgba(237,239,230,.28)}
.a11y-btn.on{background:var(--brass);border-color:var(--brass);color:#241A05}
.a11y-btn:active{transform:scale(.96)}
.a11y-stmt{display:block;text-align:center;font-size:.78rem;color:var(--brass);text-decoration:none;margin-top:.85rem;padding:.4rem;border-radius:8px;transition:background .2s var(--ease)}
.a11y-stmt:hover{background:var(--brass-wash)}

/* the modes the widget switches on <html> */
html.font-boost-1{font-size:112%}
html.font-boost-2{font-size:128%}
html.high-contrast body{background:#000!important;color:#fff!important}
html.high-contrast nav,html.high-contrast .quiz-card,html.high-contrast .price-card,html.high-contrast .sprint-card,html.high-contrast .day-card,html.high-contrast .tcard,html.high-contrast .b{background:#111!important;border-color:#777!important}
html.high-contrast p,html.high-contrast h1,html.high-contrast h2,html.high-contrast h3,html.high-contrast li{color:#e0e0e0!important}
html.high-contrast a{color:#ffff00!important;text-decoration:underline!important}
html.high-contrast .opt{background:#111!important;border-color:#888!important;color:#fff!important}
html.high-contrast .opt.sel{border-color:#fff!important;background:#2a2a2a!important}
html.highlight-links a{outline:2px solid #ffff00;text-decoration:underline!important;text-underline-offset:3px;color:#ffff00!important}
html.no-motion *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){#a11y-panel{transition:none}}