/* ============================================================
   Reggie Ebook Reader — Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variables ──────────────────────────────────────────────────────── */
.rer-reader {
    --rer-bg:          #f5e9c4;
    --rer-surface:     #ede0b0;
    --rer-border:      #d4c080;
    --rer-text:        #2e2510;
    --rer-muted:       #7a6a3a;
    --rer-accent:      #a0620a;
    --rer-accent-glow: rgba(160,98,10,0.2);
    --rer-toolbar-bg:  #ede0b0;
    --rer-nav-bg:      #e8d898;
    --rer-toc-bg:      #f0dfa0;
    --rer-viewer-bg:   #f9f4e8;
    --rer-radius:      12px;
    --rer-font-sans:   'DM Sans', system-ui, sans-serif;
    --rer-font-serif:  'Playfair Display', Georgia, serif;
    --rer-reader-height: 72vh;
}

/* Night mode overrides */
.rer-reader.rer-night {
    --rer-bg:         #1a1612;
    --rer-surface:    #221e18;
    --rer-border:     #3d3428;
    --rer-text:       #e8d8b8;
    --rer-muted:      #8a7a5a;
    --rer-accent:     #c9935a;
    --rer-toolbar-bg: #1e1a14;
    --rer-nav-bg:     #1e1a14;
    --rer-toc-bg:     #221e18;
    --rer-viewer-bg:  #1a1612;
}

/* ── Shell ──────────────────────────────────────────────────────────── */
.rer-reader {
    background:    var(--rer-bg);
    color:         var(--rer-text) !important;
    font-family:   var(--rer-font-sans);
    border-radius: var(--rer-radius);
    border:        1px solid var(--rer-border);
    max-width:     900px;
    margin:        2rem auto;
    overflow:      hidden;
    box-shadow:    0 12px 40px rgba(100,80,0,0.15), 0 2px 8px rgba(100,80,0,0.1);
    display:       flex;
    flex-direction: column;
    transition:    background .3s, color .3s, border-color .3s;
}

.rer-reader *, .rer-reader *::before, .rer-reader *::after { box-sizing: border-box; }

/* ── Toolbar ────────────────────────────────────────────────────────── */
.rer-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .65rem 1.1rem;
    background:      var(--rer-toolbar-bg);
    border-bottom:   1px solid var(--rer-border);
    gap:             1rem;
    flex-shrink:     0;
    transition:      background .3s, border-color .3s;
}

.rer-toolbar-left {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    min-width:   0;
    flex:        1;
}

.rer-toolbar-right {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-shrink: 0;
}

.rer-book-title {
    font-size:     .88rem !important;
    font-weight:   500 !important;
    color:         var(--rer-text) !important;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.rer-book-author {
    font-weight: 300;
    color:       var(--rer-muted) !important;
    font-size:   .83rem !important;
}

.rer-progress-label {
    font-size:   .75rem;
    color:       var(--rer-muted);
    min-width:   2.5rem;
    text-align:  right;
}

/* Toolbar buttons */
.rer-reader .rer-btn {
    background:    rgba(0,0,0,0.06) !important;
    border:        1px solid var(--rer-border) !important;
    color:         var(--rer-text) !important;
    border-radius: 6px !important;
    cursor:        pointer !important;
    font-family:   var(--rer-font-sans) !important;
    font-size:     .78rem !important;
    padding:       .35rem .65rem !important;
    line-height:   1 !important;
    display:       inline-flex !important;
    align-items:   center !important;
    gap:           .3rem !important;
    transition:    background .15s, border-color .15s, color .15s !important;
    text-decoration: none !important;
    white-space:   nowrap !important;
}
.rer-reader .rer-btn:hover {
    background:  rgba(160,98,10,0.12) !important;
    border-color: var(--rer-accent) !important;
    color:        var(--rer-accent) !important;
}
.rer-reader.rer-night .rer-btn {
    background: rgba(255,255,255,0.06) !important;
}

.rer-login-btn {
    background: var(--rer-accent) !important;
    color:      #fff8ec !important;
    border-color: var(--rer-accent) !important;
    font-weight: 500 !important;
}
.rer-login-btn:hover {
    background:   #b87010 !important;
    border-color: #b87010 !important;
    color:        #fff !important;
}

/* ── Body (TOC + Viewer) ────────────────────────────────────────────── */
.rer-body {
    display:   flex;
    flex:      1;
    min-height: 0;
    position:  relative;
    height:    var(--rer-reader-height);
}

/* ── TOC panel ──────────────────────────────────────────────────────── */
.rer-toc-panel {
    width:          260px;
    flex-shrink:    0;
    background:     var(--rer-toc-bg);
    border-right:   1px solid var(--rer-border);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    transition:     background .3s, border-color .3s;
}

.rer-toc-header {
    padding:        1rem;
    border-bottom:  1px solid var(--rer-border);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .5rem;
    text-align:     center;
}

.rer-toc-cover {
    width:         80px;
    height:        80px;
    object-fit:    cover;
    border-radius: 6px;
    box-shadow:    0 4px 12px rgba(0,0,0,0.2);
}

.rer-toc-title {
    font-family: var(--rer-font-serif) !important;
    font-size:   .9rem !important;
    color:       var(--rer-text) !important;
    line-height: 1.3;
}
.rer-toc-author {
    font-size: .78rem !important;
    color:     var(--rer-muted) !important;
}

.rer-toc-nav {
    flex:       1;
    overflow-y: auto;
    padding:    .5rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rer-border) transparent;
}
.rer-toc-nav::-webkit-scrollbar       { width: 4px; }
.rer-toc-nav::-webkit-scrollbar-thumb { background: var(--rer-border); border-radius: 99px; }

.rer-toc-loading {
    padding:   1rem;
    font-size: .82rem;
    color:     var(--rer-muted);
}

.rer-toc-list, .rer-toc-sub {
    list-style: none;
    margin:     0;
    padding:    0;
}

.rer-toc-list a, .rer-toc-sub a {
    display:       block;
    padding:       .55rem 1rem;
    font-size:     .85rem !important;
    color:         var(--rer-text) !important;
    text-decoration: none !important;
    transition:    background .12s;
    line-height:   1.35;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.rer-toc-list a:hover, .rer-toc-sub a:hover {
    background: rgba(160,98,10,0.1);
    color:      var(--rer-accent) !important;
}

.rer-toc-sub a {
    padding-left: 1.75rem;
    font-size:    .8rem !important;
    color:        var(--rer-muted) !important;
}
.rer-toc-sub a:hover { color: var(--rer-accent) !important; }

.rer-toc-list a.rer-toc-active,
.rer-toc-sub  a.rer-toc-active {
    color:       var(--rer-accent) !important;
    font-weight: 500 !important;
    background:  rgba(160,98,10,0.1);
}

/* ── Stage / Viewer ─────────────────────────────────────────────────── */
.rer-stage {
    flex:       1;
    min-width:  0;
    position:   relative;
    background: var(--rer-viewer-bg);
    transition: background .3s;
}

.rer-loading {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    color:           var(--rer-muted);
    font-size:       .9rem;
    background:      var(--rer-viewer-bg);
    z-index:         10;
}

.rer-spinner {
    width:        36px;
    height:       36px;
    border:       3px solid var(--rer-border);
    border-top:   3px solid var(--rer-accent);
    border-radius: 50%;
    animation:    rer-spin .8s linear infinite;
}
@keyframes rer-spin { to { transform: rotate(360deg); } }

.rer-viewer {
    width:    100%;
    height:   100%;
    display:  none; /* shown after book loads */
}
.rer-viewer iframe {
    border: none !important;
}

/* ── Bottom nav ─────────────────────────────────────────────────────── */
.rer-nav {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    padding:        .7rem 1.1rem;
    background:     var(--rer-nav-bg);
    border-top:     1px solid var(--rer-border);
    flex-shrink:    0;
    transition:     background .3s, border-color .3s;
}

.rer-nav .rer-btn {
    padding:    .45rem .9rem !important;
    font-size:  .82rem !important;
    min-width:  70px;
    justify-content: center !important;
}

.rer-progress-bar-wrap {
    flex:    1;
    padding: 6px 0;
}
.rer-progress-bar {
    height:        5px;
    background:    var(--rer-border);
    border-radius: 99px;
    overflow:      hidden;
}
.rer-progress-fill {
    height:        100%;
    width:         0%;
    background:    linear-gradient(90deg, #c8900a, var(--rer-accent));
    border-radius: 99px;
    transition:    width .5s ease;
}

/* ── Guest nudge ────────────────────────────────────────────────────── */
.rer-sync-nudge {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    padding:     .55rem 1.1rem;
    font-size:   .75rem;
    color:       var(--rer-muted);
    background:  rgba(0,0,0,0.03);
    border-top:  1px solid var(--rer-border);
    flex-wrap:   wrap;
    flex-shrink: 0;
}
.rer-sync-nudge a { color: var(--rer-accent); }

/* ── Save status toast ──────────────────────────────────────────────── */
.rer-save-status {
    position:      absolute;
    bottom:        60px;
    right:         16px;
    background:    rgba(160,98,10,0.9);
    color:         #fff;
    font-size:     .78rem;
    padding:       .4rem .85rem;
    border-radius: 20px;
    z-index:       100;
    pointer-events: none;
}

/* ── Error ──────────────────────────────────────────────────────────── */
.rer-error {
    color:         #8a2020;
    font-size:     .9rem;
    padding:       1rem 1.25rem;
    background:    #f8e8c0;
    border:        1px solid #d4a040;
    border-radius: 8px;
    margin:        1rem;
    font-family:   var(--rer-font-sans, sans-serif);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .rer-reader { --rer-reader-height: 65vh; margin: 1rem; border-radius: 8px; }

    .rer-toc-panel {
        position:   absolute;
        top:        0; left: 0; bottom: 0;
        z-index:    50;
        width:      80vw;
        max-width:  280px;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
    }

    .rer-book-title  { max-width: 120px; }
    .rer-book-author { display: none; }

    .rer-nav .rer-btn { min-width: 56px; padding: .4rem .65rem !important; }
}