/* Reader styles ported from felipemautner-site/src/components/TargumPage.astro.
   Keep the original JPS/Targum presentation; scope it away from the library. */
#reader{font-family:Garamond,Georgia,serif;color:#111;--scale:1}
body[data-reading]>.site-header{display:none}
  /* ---- header (sefaria-ish chrome) ---- */
  #reader .reader-header { position: fixed; inset: 0 0 auto 0; height: 60px; z-index: 10;
           background: #FBFBFA; border-bottom: 1px solid #EDEDEC;
           display: flex; align-items: center; justify-content: space-between; padding: 0 1.2rem; }
  /* the title is also the button that opens the contents */
  #reader .htitle { position: absolute; left: 50%; transform: translateX(-50%); text-align: center;
            font-family: inherit; background: none; border: none; border-radius: 6px;
            padding: 0.2rem 0.5rem; color: inherit; cursor: pointer; }
  #reader .htitle:hover { background: #F3F3F2; }
  #reader .htitle[aria-expanded="true"] { background: #EDEDEC; }
  #reader .htitle .book { display: inline-block; font-size: 1.05rem; letter-spacing: 0.02em; color: #000; }
  #reader .htitle .caret { font-size: 0.55rem; color: #BBB; margin-left: 0.3rem; vertical-align: 0.28em; }
  #reader .htitle .where { display: block; font-size: 0.78rem; color: #999; margin-top: 1px; }
  #reader .reader-brand { font-size: 0.95rem; color: #999; font-style: italic; text-decoration: none; }
  #reader .reader-brand:hover { color: #666; }
  #reader .controls { display: flex; gap: 0.35rem; }
  #reader .controls button { font-family: inherit; background: none; border: 1px solid #E3E3E2; border-radius: 6px;
           color: #666; min-width: 2rem; height: 2rem; padding: 0 0.45rem; cursor: pointer; font-size: 0.95rem; }
  #reader .controls button:hover { background: #F3F3F2; }
  #reader .controls button[aria-pressed="true"] { background: #EDEDEC; color: #000; }
  #reader .controls .heb { font-family: Frank, serif; }

  /* ---- text column ---- */
  #reader .reading-page { max-width: 600px; margin: 0 auto; padding: 7rem 3.2rem 9rem; }
  /* the two edges of the rendered window: nothing to see, they only exist so
     the script can ask how far the reader is from the end of what is rendered */
  #reader .edge { height: 1px; }
  #reader .chapter { margin: 5.5rem 0 3.2rem; text-align: center; }
  #reader .chapter:first-child { margin-top: 2.5rem; }
  #reader .chnum { font-size: 1.7rem; color: #000; }
  #reader .chrule { width: 30px; height: 4px; background: #E9E9E8; margin: 0.9rem auto 0; }

  #reader .verse { position: relative; margin: 2.1rem 0; padding: 0.55rem 0.9rem; border-radius: 6px; cursor: pointer; }
  #reader .verse:focus { outline: none; }
  #reader .verse.selected { background: #EDF3F8; }
  #reader .verse::before { content: '\2022'; position: absolute; left: -1.5rem; top: 0.95em;
                   font-size: 0.75rem; color: #C7C7C6; }
  #reader .vnum { position: absolute; right: -1.9rem; top: 0.55em; font-size: calc(0.7rem * var(--scale)); color: #AAA; }
  #reader .he { font-family: Frank, 'SBL Hebrew', 'Times New Roman', serif;
        font-size: calc(1.6rem * var(--scale)); line-height: 1.85; text-align: right; color: #000; }
  #reader .he:empty { display: none; }
  #reader .en { margin-top: 0.7rem; font-size: calc(1.13rem * var(--scale)); line-height: 1.8; color: #545454; }
  /* a verse waiting on the translator: a glyph, never a word */
  #reader .verse.pending .en::after { content: ' \2026'; color: #C7C7C6; }

  /* layout modes */
  #reader[data-layout="hebrew"] .en { display: none; }
  #reader[data-layout="english"] .he { display: none; }
  #reader[data-layout="english"] .en { margin-top: 0; color: #111; }
  /* nothing to stack yet: an untranslated verse reads as plain english */
  #reader .verse .he:empty + .en { margin-top: 0; }

  /* ---- original-text panel (the "commentary" pane) ---- */
  #reader aside { position: fixed; top: 60px; right: 0; bottom: 0; width: 340px; z-index: 9;
          background: #FBFBFA; border-left: 1px solid #EDEDEC; padding: 2.2rem 2rem;
          transform: translateX(100%); transition: transform 0.22s ease; overflow-y: auto; }
  #reader aside.open { transform: translateX(0); }
  #reader aside .label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #999; }
  #reader aside .ref { font-size: 1rem; color: #000; margin-top: 0.4rem; }
  #reader aside .orig { margin-top: 1.4rem; font-size: 1.08rem; line-height: 1.75; color: #333; }
  #reader aside .close, #reader .contents .close, #reader .tmodal .close { position: absolute; top: 0.8rem; right: 1rem; border: none; background: none;
                 font-size: 1.1rem; color: #999; cursor: pointer; }

  /* ---- contents (the chapter picker) ---- */
  /* a sheet under the header, the same chrome as the aside; the grid scrolls on
     its own so a 126-chapter book still fits on a laptop screen */
  #reader .contents { position: fixed; top: 68px; left: 50%; transform: translateX(-50%) translateY(-8px);
              width: min(600px, calc(100% - 1.6rem)); max-height: calc(100vh - 88px); z-index: 12;
              display: flex; flex-direction: column;
              background: #FBFBFA; border: 1px solid #EDEDEC; border-radius: 10px;
              box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05); padding: 1.5rem 1.5rem 1.2rem;
              opacity: 0; visibility: hidden;
              /* visibility keeps the cells out of the tab order while closed; it
                 flips at once on the way in (so a cell can take focus) and only
                 after the fade on the way out */
              transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s; }
  #reader .contents.open { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible;
              transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0s; }
  #reader .contents .ctitle { font-size: 1.15rem; color: #000; padding-right: 2rem; }
  #reader .contents .grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 1.2rem; padding: 2px;
                    display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: 0.4rem; }
  #reader .contents .grid button { font-family: inherit; font-size: 1rem; color: #444; background: #fff;
                    border: 1px solid #E3E3E2; border-radius: 4px; height: 2.6rem; padding: 0; cursor: pointer; }
  #reader .contents .grid button:hover { background: #EDEDEC; color: #000; }
  #reader .contents .grid button.at { background: #EDF3F8; border-color: #D3E0EA; color: #000; }
  #reader .contents .csource { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid #EDEDEC;
                    font-size: 0.8rem; color: #999; line-height: 1.6; }
  #reader .contents .csource .label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
                    color: #BBB; margin-right: 0.5rem; }
  #reader .contents .csource a { color: #999; overflow-wrap: anywhere; }
  #reader .contents .csource a:hover { color: #666; }

  @media (max-width: 900px) {
    #reader aside { top: auto; left: 0; width: 100%; max-height: 45vh; border-left: none; border-top: 1px solid #EDEDEC;
            transform: translateY(100%); }
    #reader aside.open { transform: translateY(0); }
    #reader .reader-brand { display: none; }
    #reader .reading-page { padding: 6rem 2.4rem 6rem; }
    #reader .verse::before { left: -1.2rem; }
    #reader .vnum { right: -1.5rem; }
    #reader .landing { padding: 4rem 2.4rem 5rem; }
    #reader .htitle .book { font-size: 0.95rem; }
  }

  /* a phone has no room to centre the title over the controls: park it on the
     right of the bar and let a long book name trail off */
  @media (max-width: 620px) {
    #reader .reader-header { padding: 0 0.7rem; }
    #reader .controls { order: -1; }
    #reader .htitle { position: static; transform: none; text-align: right; margin-left: auto; min-width: 0; padding: 0.2rem 0.3rem; }
    #reader .htitle .book { font-size: 0.9rem; max-width: 50vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* a phone gets the whole screen for the contents */
    #reader .contents { top: 60px; left: 0; right: 0; bottom: 0; width: auto; max-height: none;
                transform: translateY(10px); border: none; border-top: 1px solid #EDEDEC; border-radius: 0;
                box-shadow: none; padding: 1.4rem 1.2rem 1.6rem; }
    #reader .contents.open { transform: translateY(0); }
    #reader .contents .grid { grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); }
  }
#reader .reader-brand{letter-spacing:normal}
#reader .verse:hover{background:transparent}
#reader .verse.selected{background:#EDF3F8}
#reader .verse:focus-visible{outline:2px solid #D3E0EA;outline-offset:2px}
#reader[data-layout="hebrew"] .he:empty + .en{display:block}
#reader .translation-status{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:15;background:#FBFBFA;border:1px solid #EDEDEC;border-radius:6px;padding:.7rem 1rem;font-size:.9rem;max-width:calc(100% - 2rem);width:max-content;box-shadow:0 2px 10px #0001}
#reader .translation-status button{border:0;background:none;text-decoration:underline;font:inherit;margin-left:.7rem;color:inherit}
#reader .vnum{font-family:inherit;line-height:normal}
#reader .contents,#reader aside{visibility:hidden}
#reader .contents.open,#reader aside.open{visibility:visible}
#reader .htitle .book{max-width:calc(100vw - 520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
#reader .controls button:disabled{cursor:default;opacity:.35}
#reader .reader-header{gap:1rem}
#reader .reader-home-mobile{display:none}
@media(max-width:900px){#reader .reader-home-mobile{display:inline-block}#reader .htitle .book{max-width:calc(100vw - 490px)}}
@media(max-width:620px){#reader .htitle{flex:1;padding-right:0}#reader .htitle .book{max-width:calc(100vw - 255px)}#reader .reader-header{gap:.25rem}#reader .controls{gap:.2rem;flex-shrink:0}#reader .controls button{min-width:1.8rem;padding:0 .25rem}}
@media(prefers-reduced-motion:reduce){#reader aside,#reader .contents{transition:none}}