/* booklet-reader.css — גיליון קורא החוברות המשותף לרזא דפרשתא ולחומש רשב"י.
   הוצא כלשונו מן הדף רזא-דפרשתא.html (14.9.2026), יחד עם booklet-reader.js,
   כדי ששני המדורים יציגו את אותו צופה בדיוק ותיקון אחד יחול על שניהם. */

:root {
  --paper: #fbfaf7; --card: #ffffff; --ink: #1d2433; --ink-2: #5b6373;
  --blue: #1f3a63; --blue-hover: #2c4f84; --line: #e4e1d8;
  --gold: #b99552; --gold-soft: rgba(185, 149, 82, 0.12);
  --serif: 'Frank Ruhl Libre', 'David', Georgia, serif;
  --sans: 'Heebo', 'Segoe UI', Arial, sans-serif;
  --stage: #efece4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14171f; --card: #1c212c; --ink: #e8e6df; --ink-2: #9aa1b0;
    --blue: #8fb0dd; --blue-hover: #a8c4ea; --line: #2b3140;
    --gold: #c2a468; --gold-soft: rgba(194, 164, 104, 0.14);
    --stage: #0e1118;
  }
}
/* ══════════════════════════════════════════════════════════════════════
   קורא החוברות
   ----------------------------------------------------------------------
   ארבע פריסות: עמוד בודד / שני עמודים / גלילה רציפה / שני עמודים ברצף.
   מודל אחד לכולן: "שורה" היא עמוד אחד או כפולה, וכל הפריסות מציגות
   שורות. בפריסות הדפדוף מוצגת שורה אחת בכל רגע; בפריסות הרצף כל
   השורות בתוך הטור, בגובה קבוע מראש (מן המידות שבמפתח), כדי שהגלילה
   לא תקפוץ כשעמוד נטען באמצעה.

   כיוון: ספר עברי. הכפולה היא [עמוד זוגי מימין · עמוד אי-זוגי משמאל],
   השער עומד לבדו משמאל, "הבא" משמאל ו"הקודם" מימין - בכפתורים,
   במקלדת, בהחלקה, בלחיצה על צד המסך, בגלגלת ובסרגל ההתקדמות.
   ══════════════════════════════════════════════════════════════════════ */
#read { flex: 1 1 auto; display: none; flex-direction: column; min-height: 0; }
body.reading #pick { display: none; }
body.reading #read { display: flex; }
body.reading .site-head { display: none; }

.bar { background: var(--card); border-bottom: 1px solid var(--line); flex: 0 0 auto;
       position: relative; z-index: 60; }
.bar .wrap { display: flex; align-items: center; gap: 7px; min-height: 50px; max-width: 1400px;
             font-family: var(--sans); font-size: 0.84rem; padding: 0 12px; }
.bar select, .bar input { font-family: inherit; font-size: 0.84rem; color: var(--ink);
      background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; }
.bar input { width: 58px; text-align: center; }
.bar button { font-family: inherit; font-size: 0.88rem; color: var(--ink); background: var(--paper);
      border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; cursor: pointer;
      line-height: 1.35; }
.bar button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.bar button:disabled { opacity: .32; cursor: default; }
.bar button.on { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.bar .nav { font-size: 1.05rem; padding: 2px 11px; }
.bar .cnt { color: var(--ink-2); white-space: nowrap; min-width: 4.4em; text-align: center; }
.bar .sp { flex: 1 1 auto; }
.bar .sep { width: 1px; height: 22px; background: var(--line); flex: 0 0 auto; }
.bar .home { font-weight: 600; white-space: nowrap; }
.lay { display: inline-flex; gap: 0; flex: 0 0 auto; }
.lay button { border-radius: 0; padding: 4px 8px; }
.lay button:first-child { border-radius: 0 7px 7px 0; }
.lay button:last-child { border-radius: 7px 0 0 7px; }
.lay button + button { border-inline-start: 0; }
.lay svg { display: block; width: 17px; height: 15px; }
.lay svg rect { fill: none; stroke: currentColor; stroke-width: 1.1; }
#zPct { min-width: 4.2em; }
#bMore { display: none; }

/* ===== הבמה ===== */
#stage { flex: 1 1 auto; overflow: auto; background: var(--stage); position: relative;
         scroll-behavior: auto; -webkit-overflow-scrolling: touch; }
#doc { display: flex; flex-direction: column; align-items: center; gap: var(--gap);
       padding: var(--pad); width: max-content; min-width: 100%; }
.row { display: grid; grid-template-columns: var(--cols); gap: var(--gap); direction: rtl;
       align-items: start; }
.cell { width: var(--pw); }
.pg { position: relative; width: var(--pw); height: var(--ph); background: #fff;
      border-radius: 2px; box-shadow: 0 2px 14px rgba(0,0,0,.22); overflow: hidden; flex: 0 0 auto; }
.pg.blank { background: transparent; box-shadow: none; }
.pg img { position: absolute; width: var(--iw); height: var(--ih);
          inset-inline-start: var(--ix); top: var(--iy); display: block; }
.pg.wait::after { content: ''; position: absolute; inset: 0;
      background: linear-gradient(100deg, transparent 30%, rgba(0,0,0,.045) 50%, transparent 70%);
      background-size: 240% 100%; animation: shim 1.25s linear infinite; }
@keyframes shim { from { background-position: 100% 0; } to { background-position: -140% 0; } }
.pn { display: block; width: 100%; text-align: center; line-height: 20px; height: 20px;
      font-family: var(--sans); font-size: 0.72rem; color: var(--ink-2); }

/* גווני נייר. התמונות הן גווני-אפור, ולכן היפוך פשוט נותן טקסט בהיר
   על רקע כהה בלי לפגוע בניקוד. */
body.tone-sepia #stage { background: #e6ddc9; }
body.tone-sepia .pg img { filter: sepia(.34) saturate(1.15) brightness(1.02); }
body.tone-night #stage { background: #0b0d11; }
body.tone-night .pg img { filter: invert(1) contrast(.9) brightness(.92); }
body.tone-night .pg { background: #111; box-shadow: 0 2px 14px rgba(0,0,0,.6); }

#msg { position: absolute; inset-inline: 0; top: 34vh; text-align: center;
       font-family: var(--sans); font-size: 0.95rem; color: var(--ink-2); }

/* ===== סרגל התקדמות (מתמלא מימין לשמאל) ===== */
#prog { flex: 0 0 auto; height: 12px; background: var(--card); border-top: 1px solid var(--line);
        position: relative; cursor: pointer; z-index: 60; }
#prog i { position: absolute; top: 3px; right: 0; height: 6px; background: var(--gold);
          border-radius: 3px 0 0 3px; width: 0; }
#prog b { position: absolute; top: -1px; width: 2px; height: 14px; background: var(--ink-2);
          opacity: 0; }

/* ===== שורת "להמשיך מן המקום" ===== */
#resume { position: absolute; top: 12px; inset-inline-start: 50%; transform: translateX(-50%);
          z-index: 70; background: var(--card); border: 1px solid var(--gold); border-radius: 9px;
          padding: 7px 12px; font-family: var(--sans); font-size: 0.85rem;
          box-shadow: 0 4px 18px rgba(0,0,0,.2); display: none; align-items: center; gap: 9px; }
#resume.show { display: flex; }
#resume button { font: inherit; padding: 3px 10px; border-radius: 6px; cursor: pointer;
                 border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
#resume button:hover { border-color: var(--gold); color: var(--gold); }

/* ===== בועת-הודעה קטנה (מסך צר, קישור הועתק) ===== */
#flash { position: absolute; bottom: 16px; inset-inline-start: 50%; transform: translateX(-50%);
         z-index: 70; background: #2a2620; color: #f3ecdc; padding: 6px 13px; border-radius: 7px;
         font-family: var(--sans); font-size: 0.82rem; opacity: 0; transition: opacity .18s;
         pointer-events: none; }
#flash.show { opacity: 1; }

/* ===== סקירת עמודים ===== */
#thumbs { position: fixed; inset: 0; z-index: 300; background: rgba(16,14,10,.72);
          display: none; flex-direction: column; }
#thumbs.show { display: flex; }
#thHead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
          background: var(--card); border-bottom: 1px solid var(--line);
          font-family: var(--sans); font-size: 0.9rem; }
#thHead .sp { flex: 1 1 auto; }
#thHead button { font: inherit; padding: 4px 11px; border-radius: 7px; cursor: pointer;
                 border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
#thBody { flex: 1 1 auto; overflow: auto; padding: 16px; display: grid;
          grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 14px;
          background: var(--paper); }
.th { cursor: pointer; border: 2px solid transparent; border-radius: 4px; background: #fff;
      position: relative; overflow: hidden; }
.th.cur { border-color: var(--gold); }
.th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.th span { position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; text-align: center;
           font-family: var(--sans); font-size: 0.7rem; background: rgba(255,255,255,.86);
           color: #333; }

/* ===== מצב קריאה ===== */
body.zen .site-head, body.zen .corner-home { display: none; }
body.zen .bar, body.zen #prog { position: fixed; inset-inline: 0; opacity: 0; pointer-events: none;
       transition: opacity .18s; }
body.zen .bar { top: 0; }
body.zen #prog { bottom: 0; }
body.zen.peek .bar, body.zen.peek #prog { opacity: 1; pointer-events: auto; }
body.zen #stage { padding-top: 0; }

/* ===== פינה קבועה: חזרה לבית + מסך-מלא (תמיד למעלה-מימין) ===== */
.corner-home { position: fixed; top: 10px; right: 10px; z-index: 200; display: flex; align-items: center; gap: 8px; }
.corner-home a, .corner-home button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--gold); border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); text-decoration: none; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.14); font-family: var(--sans); }
.corner-home a:hover, .corner-home button:hover { border-color: var(--gold); color: var(--blue); }
body.reading .corner-home { display: none; }

/* ===== מסך בינוני: הסרגל עוטף, ואינו גולש ===== (14.9.2026)
   נמדד באתר החי ברוחב 1280: הסרגל רחב מן המסך (רזא 1,435 פיקסלים, חומש
   רשב"י 1,519), והעמוד כולו נגרר הצידה — בספר עברי הצד הימני, ובו כפתורי
   הניווט, נחתך. מתחת ל-760 כבר יש תפריט "עוד"; מעליו — שורה שנייה. */
@media (min-width: 761px) {
  .bar .wrap { flex-wrap: wrap; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
}

/* ===== טלפון: חמישה כפתורים, והשאר בתפריט "עוד" ===== */
@media (max-width: 760px) {
  .bar .wrap { gap: 5px; padding: 0 8px; }
  .bar .opt { display: none; }
  .bar.more .wrap { flex-wrap: wrap; padding-bottom: 8px; }
  .bar.more .opt { display: inline-flex; }
  .bar.more .sep.opt { display: block; }
  #bMore { display: inline-flex; }
  .bar .cnt { min-width: 0; font-size: 0.79rem; }
  #thBody { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; padding: 10px; }
}