/* ============================================================================
   סיפורון · staff-nav.css
   The sidebar shared by every page, staff only. Pairs with staff-nav.js.

   TWO MODES, because the pages are not alike:

     DOCK   the staff tools (admin, content-admin, …). The rail is part of the
            layout: it sits open and the page is padded across from it.

     FLOAT  the public pages (index, library, shows, …). The rail must NEVER be
            part of the layout — index.html alone has four clip-path rules and a
            100vw hero, and padding the body would visibly break the design. So
            here it overlays on top, closed until asked for.

   Either way the state is remembered, so it stays how you left it.

   NOT A REDESIGN. No page's own CSS is touched. Everything below applies only
   when staff-nav.js has decided to render, which it does for staff only.

   DIRECTION. The rail sits on the RIGHT in RTL and on the LEFT in LTR, and it
   follows the page the instant html[dir] changes - index.html's language
   switch flips that attribute, and everything below keys off it.

   ⚠ AN EARLIER VERSION OF THIS FILE CLAIMED inset-inline-start "would flip
   correctly if a page were ever LTR". It did not, and that comment is why it
   went unnoticed. A logical inset resolves against the ELEMENT'S OWN writing
   mode, and .snav used to hard-code `direction: rtl` on itself - so
   inset-inline-start meant `right` in both languages. Choosing English left
   the rail anchored right, then translated 232px left, floating mid-screen
   (measured: 801..1033 in a 1280px viewport) and unable to open or close.
   The content direction is now scoped to the rail's children instead.
   ========================================================================== */

/* --snav-out     how far a CLOSED rail sits outside its own edge
   --snav-push    how far the toggle rides when the page is docked
   --snav-shadow-x which way the drop shadow falls, into the page

   All three flip with the document direction, so each state needs ONE rule
   rather than a pair that can out-specify each other. Custom properties
   re-resolve when html[dir] changes, so switching language repositions the
   rail immediately - no reload, and no JavaScript involved. */
:root {
  --snav-w: 232px;
  --snav-out: -100%;                 /* no dir attribute means ltr */
  --snav-push: var(--snav-w);
  --snav-shadow-x: 18px;
}
html[dir="rtl"] {
  --snav-out: 100%;
  --snav-push: calc(-1 * var(--snav-w));
  --snav-shadow-x: -18px;
}

.snav {
  position: fixed;
  inset-block: 0;
  /* RIGHT in RTL, LEFT in LTR. Correct only because .snav no longer sets
     its own `direction` - see the header note. */
  inset-inline-start: 0;
  width: var(--snav-w);
  z-index: 2147483000;               /* above the site, below the help widget */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px 18px;
  overflow-y: auto;
  background: #070b24;
  border-inline-end: 1px solid rgba(255, 255, 255, .1);
  font-family: "Assistant", system-ui, sans-serif;
  /* NO `direction` here. It would pin inset-inline-start to one physical
     side forever. Content direction lives on the children, below. */
  transition: transform .22s ease;
  box-shadow: var(--snav-shadow-x) 0 48px -24px rgba(0, 0, 0, .8);
}

/* The labels are Hebrew, so the CONTENT is RTL whatever the page is doing.
   Scoped to the children so the positioning box above stays neutral;
   `direction` inherits, so this covers the whole subtree.
   (The labels stay Hebrew on purpose - translating the staff rail is a
   separate, optional future task. See the note at the end of this file.) */
.snav > * { direction: rtl; }

/* Closed is the default in BOTH directions, so a page can never be pushed or
   covered before JavaScript has decided what should happen.

   Written as :not(.is-open) so the closed and open rules are MUTUALLY
   EXCLUSIVE and cannot out-specify one another. The previous version lost
   exactly that contest: html[dir="ltr"] .snav scored (0,2,1) and beat
   .snav.is-open at (0,2,0), so in English the open state never applied and
   the toggle appeared to do nothing. */
.snav:not(.is-open) { transform: translateX(var(--snav-out)); }

/* Open. Stated for each direction as well as bare, so no future
   direction-qualified rule can outweigh it by specificity. */
.snav.is-open,
html[dir="rtl"] .snav.is-open,
html[dir="ltr"] .snav.is-open { transform: translateX(0); }

/* Only ever applied in dock mode on a wide screen. This is the single rule that
   moves a page, and it is deliberately hard to trigger by accident. */
body.snav-push { padding-inline-start: var(--snav-w); }

.snav-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 12px; text-decoration: none; }
.snav-brand img { height: 34px; width: auto; display: block; }
.snav-brand b { font-family: "Suez One", serif; font-size: 1.02rem; color: #fff4dc; font-weight: 400; }

.snav-who { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.snav-who .nm { display: block; font-size: .82rem; font-weight: 700; color: #fff4dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav-who .rl { display: inline-block; margin-top: 4px; padding: 1px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; background: rgba(245,197,90, .2); color: #ffe3a1; }

.snav-sec { padding: 12px 10px 5px; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a80ad; }

.snav a.snav-item {
  display: flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 7px 10px; border-radius: 10px;
  color: #cbc8dc; font-size: .88rem; font-weight: 700; text-decoration: none;
  transition: background .15s, color .15s;
}
.snav a.snav-item:hover { background: rgba(255, 255, 255, .07); color: #fff4dc; }
.snav a.snav-item .ic { flex: 0 0 20px; text-align: center; font-size: 1rem; }
.snav a.snav-item[aria-current="page"] { background: rgba(245,197,90, .16); color: #ffe3a1; box-shadow: inset 2px 0 0 #f5c55a; }

/* Unread-reports badge. margin-inline-start:auto pushes it to the far edge of
   the row in both directions, so it does not need a hard-coded side.
   :empty collapses it completely - no padding, no dot, no width - because the
   slot is always present in the markup and only sometimes has a number. */
.snav a.snav-item .snav-badge {
  margin-inline-start: auto; min-width: 20px; padding: 1px 6px;
  border-radius: 999px; background: #ff7163; color: #2a0f0c;
  font-size: .74rem; font-weight: 800; line-height: 1.5; text-align: center;
  font-variant-numeric: tabular-nums;
}
.snav a.snav-item .snav-badge:empty { display: none; }

.snav-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .09); }
.snav-foot a.snav-item { color: #a99fc9; font-size: .84rem; }

/* ---- the handle ----------------------------------------------------------
   Always present for staff, on every page, in both modes. It is how you hide
   the rail as well as show it, so there is never a state you cannot get out of. */
.snav-toggle {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 2147483001;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(11, 7, 38, .92);
  color: #ffe3a1;
  font-size: 1.15rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .22s ease, opacity .15s;
}
.snav-toggle:hover { border-color: #f5c55a; }
/* When the rail is open in dock mode it would sit underneath, so it rides across
   with it and becomes the close button. */
/* One rule for both directions: --snav-push already carries the sign, so the
   toggle always rides toward the page and stays on the rail's edge. */
body.snav-push .snav-toggle { transform: translateX(var(--snav-push)); }

.snav-scrim { display: none; position: fixed; inset: 0; z-index: 2147482999; background: rgba(4, 3, 16, .55); }
.snav-scrim.show { display: block; }

.snav a.snav-item:focus-visible, .snav-toggle:focus-visible { outline: 3px solid #f5c55a; outline-offset: 2px; }

/* The floating dock on index.html and library.html duplicates these links.
   Hidden whenever the rail renders, so staff see one navigation, not two.
   Without the rail (no JS, not staff) the dock is untouched and still works. */
body.snav-on .staff-dock { display: none !important; }

@media (max-width: 900px) {
  /* Never push on a phone — there is not enough width to give any away. */
  body.snav-push { padding-inline-start: 0; }
  body.snav-push .snav-toggle { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .snav, .snav-toggle { transition: none; }
}

/* ==========================================================================
   FUTURE, OPTIONAL: ENGLISH STAFF NAVIGATION
   The rail's labels are Hebrew literals in staff-nav.js - ROLE_HE, the
   section headings ("תוכן" / "אנשים" / "מעקב") and every item label. There is
   no dictionary and no re-render hook, so index.html's language switch cannot
   reach them: render() only rewrites elements carrying data-k, and the rail's
   nodes are built by staff-nav.js without one.

   That is deliberate for now. This file fixes only the GEOMETRY - in English
   the rail now sits on the left, opens and closes, and the labels stay
   Hebrew, which is honest for a Hebrew-only admin surface.

   Translating it later means: a label map keyed by language, a
   retranslate(lang) entry point on the rail, and index.html's render()
   calling it. `.snav > * { direction: rtl }` would then need to follow the
   chosen language instead of being fixed. Not a launch blocker - the rail is
   staff-only, and an English public site needs its own privacy and legal
   review first.
   ========================================================================== */