/* ============================================================
   FOLIO — a private reading room
   Literary library theme: warm paper, slab serifs, leather & wood
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --paper:#efe6d2;
  --paper-2:#e7dabd;
  --paper-3:#ddcca9;
  --card:#f6efe0;
  --ink:#2a2018;
  --ink-2:#4b3f31;
  --ink-soft:#75695625;
  --muted:#897a5f;
  --leather:#5e261d;
  --leather-2:#7c3327;
  --wood:#6e4a29;
  --wood-2:#523316;
  --wood-hi:#8a6038;
  --brass:#b3853a;
  --brass-hi:#dcb064;
  --rule:#c9b88f;
  --rule-soft:#d8caa6;
  --green:#3c5340;
  --shadow-1:0 1px 2px rgba(60,40,20,.10);
  --shadow-2:0 6px 22px -8px rgba(60,40,20,.35);
  --shadow-3:0 18px 50px -16px rgba(40,26,12,.55);
  --display:'Zilla Slab',Georgia,serif;
  --read:'Spectral',Georgia,'Times New Roman',serif;
  --maxw:1280px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--read);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,250,238,.7), transparent 60%),
    radial-gradient(100% 60% at 100% 110%, rgba(110,74,41,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(178,133,58,.28)}

/* hairline ornament */
.rule-orn{display:flex;align-items:center;gap:14px;color:var(--brass)}
.rule-orn::before,.rule-orn::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--rule),transparent)}
.rule-orn .dot{font-size:13px;letter-spacing:.3em}

.smallcaps{font-family:var(--display);text-transform:uppercase;letter-spacing:.22em;font-weight:600;font-size:11px;color:var(--muted)}

/* ============================================================
   LOGIN
   ============================================================ */
#login{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:40}
#login .vignette{position:absolute;inset:0;background:
  radial-gradient(60% 70% at 50% 38%, rgba(246,239,224,.0), rgba(94,38,29,.10) 120%);
  pointer-events:none}
.login-card{
  position:relative;width:min(440px,100%);
  background:linear-gradient(180deg,#f8f1e3,#f1e7d2);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:46px 44px 38px;
  box-shadow:var(--shadow-3),inset 0 1px 0 rgba(255,255,255,.6);
}
.login-card::before{
  content:"";position:absolute;inset:7px;border:1px solid var(--rule-soft);border-radius:2px;pointer-events:none}
.crest{width:54px;height:54px;margin:0 auto 18px;display:grid;place-items:center;
  border:2px solid var(--leather);border-radius:50%;color:var(--leather);
  font-family:var(--display);font-weight:700;font-size:24px;position:relative}
.crest::after{content:"";position:absolute;inset:4px;border:1px solid var(--leather-2);border-radius:50%;opacity:.4}
.login-card h1{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:.04em;
  text-align:center;margin:0;color:var(--ink)}
.login-card .tag{text-align:center;font-style:italic;color:var(--muted);margin:4px 0 26px;font-size:15px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;
  font-size:10.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.field input{
  width:100%;padding:12px 14px;font-family:var(--read);font-size:16px;color:var(--ink);
  background:#fdfaf2;border:1px solid var(--rule);border-radius:3px;outline:none;transition:.18s}
.field input:focus{border-color:var(--leather-2);box-shadow:0 0 0 3px rgba(124,51,39,.12);background:#fff}
.btn-primary{
  width:100%;margin-top:8px;padding:13px;border:1px solid var(--wood-2);border-radius:3px;
  font-family:var(--display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:13px;
  color:#f6ead0;background:linear-gradient(180deg,var(--leather-2),var(--leather));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--shadow-1);transition:.18s}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:active{transform:translateY(1px)}
.login-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px;font-style:italic}

/* ============================================================
   APP CHROME / MASTHEAD
   ============================================================ */
#app{min-height:100%;display:flex;flex-direction:column}
.masthead{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,var(--leather-2),var(--leather));
  border-bottom:3px solid var(--wood-2);
  box-shadow:0 2px 0 rgba(0,0,0,.18),var(--shadow-2);
  color:#f3e6cd;
}
.masthead-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:22px;
  padding:0 26px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;cursor:pointer;user-select:none}
.brand .mark{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:.06em;color:#f7ecd5}
.brand .sub{font-style:italic;font-size:12.5px;color:var(--brass-hi);opacity:.9;letter-spacing:.02em;white-space:nowrap}
.masthead .spacer{flex:1}

.viewswitch{display:flex;background:rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.25);
  border-radius:4px;padding:3px;gap:2px}
.viewswitch button{
  display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#e9d6b3;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;
  padding:7px 13px;border-radius:3px;transition:.16s}
.viewswitch button svg{width:15px;height:15px}
.viewswitch button:hover{color:#fff}
.viewswitch button.active{background:linear-gradient(180deg,#f3e7cf,#e6d6b4);color:var(--leather);
  box-shadow:var(--shadow-1)}

.mast-btn{display:flex;align-items:center;gap:8px;border:1px solid rgba(0,0,0,.28);
  background:rgba(0,0,0,.12);color:#f3e6cd;border-radius:4px;padding:9px 15px;white-space:nowrap;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:600;transition:.16s}
.mast-btn svg{width:16px;height:16px}
.mast-btn:hover{background:rgba(0,0,0,.22);border-color:rgba(0,0,0,.4)}
.mast-btn.brass{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#3a2410;border-color:var(--wood-2)}
.mast-btn.brass:hover{filter:brightness(1.06)}

.usermenu{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--brass-hi);
  background:radial-gradient(circle at 35% 30%,#7c3327,#3f1a14);color:#f3e6cd;
  font-family:var(--display);font-weight:700;font-size:16px;display:grid;place-items:center;cursor:pointer}
.dropdown{position:absolute;right:0;top:48px;width:210px;background:var(--card);
  border:1px solid var(--rule);border-radius:5px;box-shadow:var(--shadow-3);padding:8px;z-index:30}
.dropdown .who{padding:8px 10px 10px;border-bottom:1px solid var(--rule-soft);margin-bottom:6px}
.dropdown .who .n{font-family:var(--display);font-weight:600;font-size:15px}
.dropdown .who .e{font-size:12px;color:var(--muted);font-style:italic}
.dropdown button{width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:4px;
  font-family:var(--read);font-size:14px;color:var(--ink);display:flex;gap:9px;align-items:center}
.dropdown button svg{width:15px;height:15px;color:var(--muted)}
.dropdown button:hover{background:rgba(110,74,41,.10)}

/* ============================================================
   LIBRARY
   ============================================================ */
#library{flex:1}
.lib-wrap{max-width:var(--maxw);margin:0 auto;padding:34px 26px 90px}

.lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:8px}
.lib-head h2{font-family:var(--display);font-weight:700;font-size:30px;margin:0;letter-spacing:.01em}
.lib-head .count{font-style:italic;color:var(--muted);font-size:15px}
.lib-sub{margin:4px 0 26px}

/* Continue reading hero */
.continue{display:none;margin:0 0 34px;background:linear-gradient(100deg,#f6efe0,#efe3ca);
  border:1px solid var(--rule);border-radius:8px;box-shadow:var(--shadow-2);overflow:hidden;
  color:var(--ink);text-decoration:none}
.continue *{text-decoration:none}
.continue.show{display:flex}
.continue .ribbon{width:6px;background:linear-gradient(180deg,var(--brass-hi),var(--leather))}
.continue .cv{margin:18px 0 18px 22px;width:104px;height:138px;flex:none;border-radius:2px;
  box-shadow:var(--shadow-2);background:#fff;background-size:cover;background-position:center;
  border:1px solid rgba(0,0,0,.08)}
.continue .meta{padding:22px 26px;flex:1;display:flex;flex-direction:column;justify-content:center}
.continue .kicker{margin-bottom:6px}
.continue .ct{font-family:var(--display);font-weight:700;font-size:24px;margin:2px 0 3px;line-height:1.15}
.continue .ca{font-style:italic;color:var(--muted);font-size:15px;margin-bottom:14px}
.continue .progline{display:flex;align-items:center;gap:14px;max-width:440px}
.continue .resume{align-self:flex-start;margin-top:4px;display:flex;align-items:center;gap:9px;
  padding:11px 20px;border:1px solid var(--wood-2);border-radius:4px;color:#f6ead0;
  background:linear-gradient(180deg,var(--leather-2),var(--leather));
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:600}
.continue .resume:hover{filter:brightness(1.08)}
.continue .resume svg{width:15px;height:15px}

/* progress bar */
.progress{flex:1;height:6px;background:rgba(94,38,29,.14);border-radius:99px;overflow:hidden}
.progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--leather-2));border-radius:99px}
.progress-num{font-family:var(--display);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:.03em}

/* ---- SHELF VIEW ---- */
.shelf-section{margin-bottom:18px}
.shelf{position:relative;display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;
  padding:26px 30px 0;min-height:200px}
.shelf-plank{height:20px;margin:0 6px 46px;border-radius:2px;
  background:
    linear-gradient(180deg,var(--wood-hi),var(--wood) 40%,var(--wood-2));
  box-shadow:0 10px 18px -6px rgba(40,24,10,.5),inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 6px rgba(0,0,0,.3);
  position:relative}
.shelf-plank::before{content:"";position:absolute;inset:0;border-radius:2px;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px,rgba(0,0,0,.06) 9px 11px)}
.book{position:relative;width:128px;cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.book .cover{position:relative;width:128px;height:170px;border-radius:2px 4px 4px 2px;
  background:#efe2c5;background-size:cover;background-position:center;
  box-shadow:var(--shadow-2);border:1px solid rgba(0,0,0,.12);overflow:hidden}
.book .cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.04) 8%,rgba(255,255,255,.16) 12%,transparent 20%)}
.book .spine{position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent)}
.book:hover{transform:translateY(-12px)}
.book . tip{display:none}
.book .pct{position:absolute;right:5px;bottom:5px;background:rgba(42,32,24,.82);color:#f3e6cd;
  font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.04em;padding:2px 7px;border-radius:99px}
.book .lbl{margin-top:11px;text-align:center}
.book .lbl .t{font-family:var(--display);font-weight:600;font-size:13.5px;line-height:1.2;
  color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book .lbl .a{font-style:italic;font-size:12px;color:var(--muted);margin-top:2px}

/* placeholder cover (no render yet) generated text cover */
.gen-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 12px;background:linear-gradient(160deg,#6a2a20,#4a1c15);color:#f0dcb4}
.gen-cover .gt{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.12;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gen-cover .ga{font-style:italic;font-size:11px;opacity:.85}
.gen-cover .grule{height:1px;background:rgba(220,176,100,.5)}

/* ---- GRID VIEW ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:34px 28px}
.grid .book{width:auto}
.grid .book .cover{width:100%;height:0;padding-bottom:132%}
.grid .book .gen-cover{padding-bottom:0}

/* ---- LIST VIEW ---- */
.list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.row{display:flex;align-items:center;gap:22px;padding:18px 8px;border-bottom:1px solid var(--rule-soft);
  cursor:pointer;transition:background .15s}
.row:hover{background:rgba(110,74,41,.06)}
.row .rcv{width:60px;height:80px;flex:none;border-radius:2px;background:#efe2c5;background-size:cover;
  background-position:center;box-shadow:var(--shadow-1);border:1px solid rgba(0,0,0,.1);position:relative;overflow:hidden}
.row .rcv .gen-cover{padding:7px 6px}.row .rcv .gen-cover .gt{font-size:9px;-webkit-line-clamp:3}
.row .rcv .gen-cover .ga,.row .rcv .gen-cover .grule{display:none}
.row .rmeta{flex:1;min-width:0}
.row .rt{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2}
.row .ra{font-style:italic;color:var(--muted);font-size:14px;margin-top:1px}
.row .rprog{width:230px;flex:none;display:flex;align-items:center;gap:12px}
.row .rwhen{width:140px;flex:none;text-align:right;font-size:13px;color:var(--muted);font-style:italic}
.row .rresume{flex:none;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:4px;
  border:1px solid var(--rule);background:#f3ead6;color:var(--leather);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600}
.row .rresume:hover{background:#fff;border-color:var(--leather-2)}
.row .rresume svg{width:14px;height:14px}
.row .rmenu{flex:none}

/* book context delete button (shared) */
.book .del,.row .del{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(42,32,24,.78);color:#f3e6cd;border:0;display:none;place-items:center;z-index:3}
.book{position:relative}
.book:hover .del{display:grid}
.row .del{position:static;display:grid;background:transparent;color:var(--muted)}
.row .del:hover{color:var(--leather)}
.book .del svg,.row .del svg{width:13px;height:13px}
.book .del:hover{background:var(--leather)}

/* empty state */
.empty{text-align:center;padding:70px 20px}
.empty .ic{font-size:48px;color:var(--rule);margin-bottom:8px}
.empty h3{font-family:var(--display);font-weight:700;font-size:24px;margin:10px 0 6px}
.empty p{color:var(--muted);font-style:italic;max-width:380px;margin:0 auto 22px}

/* drop overlay */
#drop{position:fixed;inset:0;z-index:50;display:none;place-items:center;
  background:rgba(94,38,29,.34);backdrop-filter:blur(2px)}
#drop.show{display:grid}
#drop .box{background:var(--card);border:2px dashed var(--leather-2);border-radius:10px;
  padding:48px 70px;text-align:center;box-shadow:var(--shadow-3)}
#drop .box .smallcaps{font-size:13px;color:var(--leather)}
#drop .box h3{font-family:var(--display);font-size:26px;margin:8px 0 0}

/* ============================================================
   READER
   ============================================================ */
#reader{position:fixed;inset:0;z-index:35;display:none;flex-direction:column;
  background:#2c2218;
  background-image:radial-gradient(120% 90% at 50% 0%,#3a2c1d,#241a11);}
#reader.show{display:flex}

.rbar{display:flex;align-items:center;gap:16px;height:56px;padding:0 18px;flex:none;
  background:linear-gradient(180deg,rgba(50,30,18,.96),rgba(40,24,14,.96));
  border-bottom:1px solid rgba(0,0,0,.5);color:#ecdcbf;
  box-shadow:0 2px 14px rgba(0,0,0,.4);transition:transform .3s,opacity .3s;z-index:5}
.rbar .ico{width:38px;height:38px;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#ecdcbf;display:grid;place-items:center}
.rbar .ico:hover{background:rgba(255,255,255,.12)}
.rbar .ico svg{width:18px;height:18px}
.rbar .rtitle{min-width:0}
.rbar .rtitle .t{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.rbar .rtitle .a{font-style:italic;font-size:12px;color:#b9a886}
.rbar .rspacer{flex:1}
.rbar .pager{display:flex;align-items:center;gap:6px}
.rbar .pageinput{width:54px;text-align:center;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);
  color:#f3e6cd;border-radius:5px;padding:6px;font-family:var(--display);font-weight:600;font-size:14px;outline:none}
.rbar .pageinput:focus{border-color:var(--brass)}
.rbar .pgtotal{font-family:var(--display);color:#b9a886;font-size:14px}
.rbar .seg{display:flex;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:2px}
.rbar .seg button{border:0;background:transparent;color:#cbb78f;padding:6px 12px;border-radius:4px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;font-weight:600}
.rbar .seg button.active{background:var(--brass);color:#2a1808}
.rbar .zoom{display:flex;align-items:center;gap:2px}

.rstage{flex:1;overflow:auto;position:relative;scroll-behavior:smooth}
.rstage::-webkit-scrollbar{width:12px;height:12px}
.rstage::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.rcanvas-wrap{display:flex;justify-content:center;padding:34px 24px 60px;min-height:100%}
.rcanvas-col{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%}
.rpage{background:#fff;box-shadow:0 24px 60px -18px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.05);
  border-radius:1px;max-width:100%}
.rpage canvas{display:block;border-radius:1px}

/* reading progress strip */
.rprogress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.3);z-index:6}
.rprogress > i{display:block;height:100%;background:linear-gradient(90deg,var(--brass-hi),var(--brass));transition:width .2s}

/* floating nav arrows */
.rnav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:74px;
  display:grid;place-items:center;border:0;border-radius:8px;z-index:6;
  background:rgba(30,18,10,.5);color:#ecdcbf;backdrop-filter:blur(3px);transition:.18s,opacity .3s}
.rnav:hover{background:rgba(30,18,10,.8)}
.rnav.prev{left:18px}.rnav.next{right:18px}
.rnav svg{width:24px;height:24px}
.rnav:disabled{opacity:.25;cursor:default}

/* distraction-free: hide chrome, reveal on hover */
#reader.zen .rbar{transform:translateY(-100%);opacity:0;pointer-events:none}
#reader.zen .rnav{opacity:0;pointer-events:none}
#reader.zen.peek .rbar{transform:none;opacity:1;pointer-events:auto}
#reader.zen.peek .rnav{opacity:1;pointer-events:auto}
#reader.zen .rstage{}
.zen-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:7;
  background:rgba(30,18,10,.7);color:#cbb78f;font-family:var(--display);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 16px;border-radius:99px;opacity:0;transition:opacity .4s;pointer-events:none}
#reader.zen .zen-hint.show{opacity:1}

.spinner{width:34px;height:34px;border:3px solid rgba(236,220,191,.25);border-top-color:var(--brass-hi);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.rloading{position:absolute;inset:0;display:grid;place-items:center;z-index:4}

/* toast */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);z-index:60;
  background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:6px;box-shadow:var(--shadow-3);
  font-size:14px;opacity:0;transition:.25s;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:760px){
  .masthead-inner{gap:12px;padding:0 14px}
  .brand .sub{display:none}
  .viewswitch button span{display:none}
  .viewswitch button{padding:8px 10px}
  .mast-btn span{display:none}
  .lib-wrap{padding:24px 16px 80px}
  .row .rprog,.row .rwhen{display:none}
  .rbar .rtitle .t{max-width:38vw}
  .rbar .seg,.continue .ca{}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation-duration:.01ms !important}}