/* ===========================================================
   Viewer · אפשרות D — עיגולים צפים + ציר עמודים + דפדוף כרטיסים
   הרקע נגזר מהפריסט של הדיירת: --hue בלבד משתנה.
   =========================================================== */

/* 🔴 נפילה אחורה ל-oklch
   כל הצבעים כאן בנויים על oklch — נכון, ולא מוכר לספארי מלפני 15.4.
   דפדפן שאינו מכיר פונקציית צבע מתעלם מההכרזה כולה, והתוצאה היא
   טקסט בלי צבע: בלתי נראה. ולכן כל טוקן מוכרז פעמיים — ערך רגיל
   קודם, ו-oklch אחריו. הישן לוקח את הראשון, החדש דורס בשני.
   ⚠️ הערכים כאן הם קירוב של אותם צבעים בדיוק, לא פלטה שנייה. */
:root{
  --ink:#f4f2ef;  --dim:#c4bfb7;
  --bg:#2a2724;   --bg-2:#38342f;
  --sheet:rgba(33,30,27,.97);
  --ctl:rgba(72,67,60,.72);
  --ctl-2:rgba(92,86,77,.88);
}
[data-theme="light"]{
  --ink:#3a3631;  --dim:#6d675f;
  --bg:#e8e4dd;   --bg-2:#f3f0ea;
  --sheet:rgba(248,246,242,.97);
  --ctl:rgba(250,249,246,.82);
  --ctl-2:rgba(255,255,255,.94);
}

:root{
  --hue:32;
  --sat:.014;
  --paper-ring:rgba(0,0,0,.3);
  --dur:.44s;
  --ease:cubic-bezier(.22,.8,.28,1);
  --dock:78px;
  --glass:rgba(255,255,255,.10);
  --glass-2:rgba(255,255,255,.19);
  --line:rgba(255,255,255,.14);
  --ink:oklch(.96 .008 var(--hue));
  --dim:oklch(.80 .012 var(--hue));
  --bg:oklch(.21 var(--sat) var(--hue));
  --bg-2:oklch(.27 var(--sat) var(--hue));
  --sheet:oklch(.17 var(--sat) var(--hue) / .97);
  --ctl:oklch(.31 .016 var(--hue) / .72);
  --ctl-2:oklch(.38 .020 var(--hue) / .88);
  --ctl-line:rgba(255,255,255,.17);
}
[data-theme="light"]{
  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.85);
  --line:rgba(0,0,0,.10);
  --ink:oklch(.30 .02 var(--hue));
  --dim:oklch(.48 .02 var(--hue));
  --bg:oklch(.90 var(--sat) var(--hue));
  --bg-2:oklch(.95 var(--sat) var(--hue));
  --paper-ring:rgba(0,0,0,.14);
  --sheet:oklch(.97 var(--sat) var(--hue) / .97);
  --ctl:oklch(.975 .010 var(--hue) / .82);
  --ctl-2:oklch(1 0 0 / .94);
  --ctl-line:rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  background-image:radial-gradient(120% 90% at 50% 0%,var(--bg-2),transparent 62%);
  color:var(--ink);
  /* פונט המערכת. ראה ההערה ב-index.html — אין בקשה חיצונית */
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Hebrew",Arial,sans-serif;
  font-weight:300;
  overflow:hidden;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit}
a:hover{color:var(--ink)}

.stage{position:fixed;inset:0;display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:env(safe-area-inset-bottom);transition:padding-inline-start var(--dur) var(--ease)}
.stage[hidden]{display:none}
.frame{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:20px 20px 26px;touch-action:pan-y}

/* ---------------------------------------------------------- הערימה */
/* שכבות הערימה נגזרות מהרקע ולא מהעמוד — הן מחזיקות גם עמוד כהה וגם בהיר */
.ghost{position:absolute;border-radius:8px;background:var(--ctl);border:1px solid var(--ctl-line);
  box-shadow:0 14px 40px -18px var(--paper-ring);pointer-events:none;transition:transform .3s var(--ease)}
.g1{transform:translateY(16px) scale(.962);opacity:.55}
.g2{transform:translateY(32px) scale(.924);opacity:.3}

.page{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;position:relative;
  border-radius:8px;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.2),0 30px 80px -24px var(--paper-ring);
  outline:1px solid var(--line);
  user-select:none;-webkit-user-drag:none;will-change:transform,opacity;touch-action:pan-y;
  transition:opacity .16s ease}
.page.load{opacity:.5}

/* הכרטיס הבא עולה מתחת לערימה */
@keyframes rise{from{opacity:.35;transform:translateY(16px) scale(.94) rotate(-.6deg)}to{opacity:1;transform:none}}
@keyframes riseback{from{opacity:.35;transform:translateY(-14px) scale(1.04)}to{opacity:1;transform:none}}
.frame.to-next .paper{animation:rise var(--dur) var(--ease)}
.frame.to-prev .paper{animation:riseback var(--dur) var(--ease)}
.frame.to-next .g1{animation:rise calc(var(--dur) + .08s) var(--ease)}

.frame.zoom{touch-action:none}
.frame.zoom .ghost{opacity:0}

/* 🔴 למה העמוד נראה מפוקסל בהגדלה
   `will-change:transform` מקדם את התמונה לשכבת GPU — והדפדפן
   מצייר אותה פעם אחת, ברזולוציה של *לפני* ההגדלה, ואז מותח את
   הציור. על SVG זה בזבוז כפול: הקובץ הוא וקטור ויכול להיות חד
   בכל גודל, אבל הוא כבר הפך לתמונה.
   ⚠️ ה-will-change נחוץ לגרירה, ומזיק בזום. ולכן: מכובה בזום. */
.frame.zoom .page{will-change:auto;image-rendering:auto}

/* ---------------------------------------------------------- שכבת־על */
.over{position:absolute;inset:0;pointer-events:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px}
.hint{background:rgba(20,18,16,.72);color:#fff;font-size:12px;padding:7px 14px;border-radius:999px;backdrop-filter:blur(8px);animation:fade .5s var(--ease)}
.hint[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}

/* ---------------------------------------------------------- לוח תחתון */
.chrome{flex:0 0 auto;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 20px 14px;transition:opacity .4s ease,transform .4s var(--ease)}
.track{width:min(560px,100%);display:flex;flex-direction:column;gap:10px}

/* העיגולים הצפים */
.fab{position:fixed;z-index:6;width:46px;height:46px;border-radius:50%;border:1px solid var(--ctl-line);
  background:var(--ctl);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:opacity .3s ease,background .2s ease,transform .2s var(--ease)}
.fab svg{width:20px;height:20px}
.fab:hover{background:var(--ctl-2)}
.fab:active{transform:scale(.94)}
.save{inset-inline-end:16px;bottom:calc(var(--dock) + 16px + env(safe-area-inset-bottom))}
.mark{inset-inline-end:16px;bottom:calc(var(--dock) + 74px + env(safe-area-inset-bottom))}
.zoomb{inset-inline-start:16px;bottom:calc(var(--dock) + 74px + env(safe-area-inset-bottom))}
.mark.on{background:var(--ctl-2);color:oklch(.72 .12 var(--hue))}
.mark.on svg{fill:currentColor}
.count{direction:ltr;unicode-bidi:isolate;font-size:11px;letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums;text-align:center}
.barhit{position:relative;padding:18px 0;margin:-18px 0;cursor:ew-resize;touch-action:none}
.bar{position:relative;height:2px;background:var(--line);border-radius:2px}
.bar i{position:absolute;inset-block:0;inset-inline-start:0;display:block;width:0;background:var(--ink);opacity:.8;border-radius:2px;transition:width .42s var(--ease)}
.seg{display:none}
.scrub{position:absolute;bottom:26px;padding:5px 10px;border-radius:8px;
  background:var(--ctl-2);backdrop-filter:blur(16px);border:1px solid var(--ctl-line);
  font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.scrub[hidden]{display:none}
.scrubbing .bar i{transition:none}
.scrubbing .bar{height:3px}
.by{direction:ltr;font-size:10px;letter-spacing:.02em;color:var(--dim);opacity:.55;transition:opacity .4s}
.by a{text-decoration:none;border-bottom:1px solid var(--line)}

/* 🔴 ההסתרה האוטומטית פועלת רק במגע. בנייח הפקדים גלויים תמיד. */
@media (hover:none){
  .idle:not(.scrubbing) .chrome{opacity:0;transform:translateY(10px);pointer-events:none}
  .idle .fab,.idle .railtog{opacity:0;pointer-events:none}
  .idle .nav{opacity:0}
}

/* ---------------------------------------------------------- פרקים */
.railtog{position:fixed;z-index:6;inset-inline-start:16px;bottom:calc(var(--dock) + 16px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ctl-line);
  background:var(--ctl);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  transition:opacity .3s,background .2s,transform .2s var(--ease)}
.railtog:hover{background:var(--ctl-2)}
.railtog i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.85;transition:transform .28s var(--ease),opacity .2s,width .28s,height .28s}
.rail-open .railtog i:nth-child(1){transform:translateY(8px) rotate(45deg);width:14px;height:1.5px;border-radius:2px}
.rail-open .railtog i:nth-child(2){opacity:0}
.rail-open .railtog i:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:14px;height:1.5px;border-radius:2px}

.railin{position:fixed;z-index:5;inset-block:0;inset-inline-start:0;width:min(84vw,290px);
  background:var(--sheet);backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);
  border-inline-end:1px solid var(--line);
  display:flex;flex-direction:column;padding:clamp(26px,6vh,52px) 22px calc(var(--dock) + 90px);
  transform:translateX(calc(var(--dirs,-1) * 105%));transition:transform var(--dur) var(--ease);overflow:auto}
[dir=rtl] .railin{--dirs:1}
.rail-open .railin{transform:none}
.railin h2{margin:0 0 22px;font-size:12px;font-weight:500;letter-spacing:.14em;color:var(--dim)}
.railin ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.railin button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;font:inherit;font-size:15px;font-weight:400;color:var(--ink);
  background:none;border:0;border-radius:13px;padding:13px 14px;cursor:pointer;text-align:start;opacity:.82;transition:background .18s,opacity .18s}
.railin button:hover{background:var(--glass);opacity:1}
.railin button.on{opacity:1;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line)}
.railin button i{font-style:normal;flex:0 0 auto;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;
  background:var(--glass);border-radius:7px;padding:4px 7px;letter-spacing:.04em}
.railin button.on i{color:var(--ink)}

/* ---------------------------------------------------------- חצים */
.nav{position:fixed;z-index:4;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid var(--ctl-line);border-radius:50%;
  background:var(--ctl);backdrop-filter:blur(14px);color:var(--ink);cursor:pointer;opacity:0;transition:opacity .25s,background .2s}
.nav:hover{background:var(--ctl-2)}
.nav:disabled{opacity:0!important;pointer-events:none}
.nav::before{content:"";display:block;width:9px;height:9px;margin:auto;border-top:1.8px solid currentColor;border-left:1.8px solid currentColor}
.prev{inset-inline-start:16px}
.next{inset-inline-end:16px}
.prev::before{transform:rotate(-45deg) translate(2px,2px)}
.next::before{transform:rotate(135deg) translate(2px,2px)}
@media (hover:hover) and (pointer:fine){.nav{opacity:.5}.nav:hover{opacity:1}}

.zoomb.on{background:var(--ctl-2)}

/* ---------------------------------------------------------- הודעות */
.msg{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center;background:var(--bg)}
.msg[hidden]{display:none}
.msg h1{font-size:19px;font-weight:500;margin:0}
.msg p{margin:0;color:var(--dim);font-size:14px;line-height:1.75;font-weight:300}

.boot{gap:52px;background:radial-gradient(90% 70% at 50% 40%,var(--bg-2),var(--bg) 72%)}
.logoslot{width:min(46vw,180px);animation:fadein 1s .1s both;aspect-ratio:5/2;border:1px dashed var(--line);border-radius:6px;display:grid;place-items:center;opacity:.5}
.logoslot span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.06em;color:var(--dim)}
.begin{position:relative;width:64px;height:64px;border-radius:50%;border:1px solid var(--ctl-line);background:var(--ctl);backdrop-filter:blur(14px);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  animation:breathe 3.4s ease-in-out infinite;transition:transform .22s var(--ease),background .22s}
.begin::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid currentColor;opacity:.5;animation:halo 3.4s ease-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes halo{0%{transform:scale(1);opacity:.42}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.begin svg{width:24px;height:24px}
[dir=rtl] .begin svg{transform:scaleX(-1)}
.begin:hover{background:var(--ctl-2);transform:scale(1.08);animation-play-state:paused}
.begin:hover::after{animation-play-state:paused}

.ghostbtn{font:inherit;font-size:12px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;margin-top:6px}
.ghostbtn:hover{background:var(--glass)}

/* ---------------------------------------------------------- טוסט */
.toast{position:fixed;z-index:8;inset-inline:0;bottom:calc(var(--dock) + 80px + env(safe-area-inset-bottom));margin:auto;width:max-content;max-width:82vw;
  display:flex;align-items:center;gap:14px;padding:9px 9px 9px 16px;background:var(--ctl-2);backdrop-filter:blur(20px);
  border:1px solid var(--ctl-line);border-radius:999px;font-size:13px;animation:fade .3s var(--ease)}
.toast[hidden]{display:none}

/* ---------------------------------------------------------- העמודים ששמרת */
.marksbox{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.marksbox[hidden]{display:none}
#marklist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
#marklist button{
  font:inherit;font-size:12px;font-variant-numeric:tabular-nums;
  background:var(--ctl);color:var(--ink);
  border:1px solid var(--ctl-line);border-radius:999px;
  padding:5px 12px;cursor:pointer;transition:background .2s}
#marklist button:hover{background:var(--ctl-2)}

/* מצב כהה/בהיר — שורה בתחתית התפריט, לא עיגול צף.
   🔴 כעיגול הוא ישב מעל העמוד כל הזמן והפריע לקריאה. הוא הגדרה
   ולא פעולה על עמוד, ולכן מקומו בתפריט — שנפתח בכוונה. */
.lumrow{
  display:flex;align-items:center;gap:10px;width:100%;
  margin-top:20px;padding:11px 12px;
  font:inherit;font-size:13px;text-align:start;
  background:var(--ctl);color:var(--ink);
  border:1px solid var(--ctl-line);border-radius:10px;cursor:pointer;
  transition:background .2s}
.lumrow:hover{background:var(--ctl-2)}
.lumrow svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.toast button{font:inherit;font-size:12.5px;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:6px 14px;cursor:pointer}

/* ---------------------------------------------------------- טעינה */
.spin{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.spin.big{position:static}
.spin[hidden]{display:none}
.spin i{width:24px;height:24px;display:block;border:1.5px solid var(--line);border-top-color:var(--dim);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:.5;transform:none}}

/* ---------------------------------------------------------- נייח */
@media (min-width:900px){
  .frame{padding:38px 38px 30px}
  .stage{padding-inline-start:290px}
  .railtog{display:none}
  .railin{transform:none;padding-bottom:30px}
  .prev{inset-inline-start:calc(290px + 16px)}
  .zoomb{inset-inline-start:calc(290px + 16px)}
}

/* ---------------------------------------------------------- תחתית הסרגל
   יצירת קשר עם הדיירת ולוגו. יושבים במגירה בכוונה — לא מעל הדוח. */
.railfoot{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:20px}
.ctrow{display:flex;gap:8px}
.ct{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 8px;border-radius:12px;border:1px solid var(--ctl-line);background:var(--ctl);
  font-size:12.5px;color:var(--ink);text-decoration:none;transition:background .18s}
.ct svg{width:16px;height:16px;flex:0 0 auto}
.ct:hover{background:var(--ctl-2)}
.raillogo{display:none}
@media (min-width:900px){
  .raillogo{display:grid;place-items:center;justify-self:start;opacity:.45}
  .raillogo span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.06em;color:var(--dim);
    border:1px dashed var(--line);border-radius:5px;padding:16px 20px}
}
/* ---------------------------------------------------------- הדפסה */
.sheet{position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden}
@media print{
  .railfoot,.stage,.msg,.nav,.chrome,.rail,.railin,.railtog,.toast{display:none!important}
  html,body{background:#fff;height:auto;overflow:visible}
  .sheet{position:static;width:auto;height:auto;overflow:visible}
  /* 🔴 העמוד לא נחתך. אף פעם.
     הניסוח הראשון היה width:100% — והוא מתח עמוד 1080×1920 לרוחב
     דף A4, כך שגובהו יצא 373 מ"מ מול 297 של הדף. מיכל קיבלה קובץ
     עם עמודים חתוכים.

     שתי שכבות, ובכוונה:
       1. JS מזריק @page עם מידות אמיתיות של העמוד (ראה app.js).
          מי שתומך — מקבל דף תפור למידה, בלי שוליים כלל.
       2. והמגבלות כאן הן רשת הביטחון: אם הדפדפן התעלם מ-(1),
          העמוד מתכווץ ומתמרכז עם שוליים לבנים — ולא נחתך.
     ⚠️ ספארי בנייד תומך חלקית ב-@page size, ולכן (2) אינה מותרות. */
  .sheet img{
    display:block; margin:0 auto;
    width:auto; height:auto;
    max-width:100%; max-height:100vh;
    break-inside:avoid; page-break-inside:avoid;
    break-after:page;  page-break-after:always;
  }
  .sheet img:last-child{break-after:auto;page-break-after:auto}
  @page{margin:0}
}

@media (prefers-reduced-motion:reduce){
  .spin i,.begin,.begin::after,.logoslot{animation:none}
  .page,.paper,.railin,.bar i{transition:none}
  .frame.to-next .paper,.frame.to-prev .paper,.frame.to-next .g1{animation:none}
}