/* ============================================================
   CODEXIAN — Design tokens
   Palette:  white/paper base · leather-red primary · gilt-gold accent
   Type:     Fraunces (display, serif) + Inter (UI, sans)
   Signature: cards read as book spines/covers pulled off a shelf
   ============================================================ */

:root{
  --white:      #FFFFFF;
  --paper:      #FAF9F6;
  --paper-dim:  #F1EFE8;
  --line:       #E7E2D8;
  --ink:        #1A1A1D;
  --ink-soft:   #4A4A4F;
  --ink-faint:  #8A8781;

  --wine:       #7A1B2E;
  --wine-dark:  #571326;
  --gold:       #B08D3E;
  --gold-soft:  #D9C48E;

  --shadow-card: 0 10px 24px -12px rgba(26,26,29,.35);
  --shadow-pop:  0 30px 60px -20px rgba(26,26,29,.45);

  --drawer-w: 88px;
  --drawer-w-open: 250px;
  --topbar-h: 72px;

  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces',serif; margin:0; color:var(--ink); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold-soft); }

.icon{ width:22px; height:22px; stroke:currentColor; flex-shrink:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   SLIDING SIDE DRAWER
   Collapsed = icon rail. Click the menu icon (or any menu item)
   and it slides open to reveal labels — "sliding" per the brief.
   ============================================================ */
.drawer{
  position:fixed; top:0; left:0; bottom:0;
  width:var(--drawer-w);
  background:var(--ink);
  color:var(--white);
  display:flex; flex-direction:column;
  z-index:60;
  transition:width .38s var(--ease);
  overflow:hidden;
}
.drawer.is-open{ width:var(--drawer-w-open); box-shadow:var(--shadow-pop); }

.drawer-top{
  display:flex; align-items:center; gap:14px;
  height:var(--topbar-h);
  padding:0 22px;
  flex-shrink:0;
}
.drawer-toggle{
  background:none; border:none; color:var(--white);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; flex-shrink:0;
}
.drawer-toggle:hover{ background:rgba(255,255,255,.1); }
.drawer-logo{ display:flex; align-items:center; gap:10px; color:var(--white); text-decoration:none; overflow:hidden; }
.logo-mark{ color:var(--gold); flex-shrink:0; }
.drawer-logo-text{
  font-family:'Fraunces',serif; font-weight:600; letter-spacing:.06em;
  font-size:16px; white-space:nowrap;
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease) .05s, transform .3s var(--ease) .05s;
}
.drawer.is-open .drawer-logo-text{ opacity:1; transform:translateX(0); }

.drawer-nav{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.drawer-link{
  position:relative;
  width:100%; background:none; border:none; color:rgba(255,255,255,.72);
  display:flex; align-items:center; gap:16px;
  padding:13px 22px;
  font-size:14.5px; font-weight:500;
  white-space:nowrap; overflow:hidden;
  transition:background .2s, color .2s;
}
.drawer-link:hover{ color:var(--white); background:rgba(255,255,255,.06); }
.drawer-link.is-active{ color:var(--white); }
.drawer-link.is-active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--gold); border-radius:0 3px 3px 0;
}
.drawer-link span:not(.drawer-badge){
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease) .05s, transform .3s var(--ease) .05s;
}
.drawer.is-open .drawer-link span:not(.drawer-badge){ opacity:1; transform:translateX(0); }
.drawer-badge{
  margin-left:auto; background:var(--wine); color:var(--white);
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:20px;
  opacity:0; transition:opacity .2s var(--ease) .1s;
}
.drawer.is-open .drawer-badge{ opacity:1; }

.drawer-bottom{ margin-top:auto; padding-bottom:18px; border-top:1px solid rgba(255,255,255,.1); padding-top:10px; }

.drawer-scrim{
  position:fixed; inset:0; background:rgba(10,10,10,.35);
  opacity:0; pointer-events:none; z-index:55; transition:opacity .3s;
}
.drawer-scrim.is-visible{ opacity:1; pointer-events:auto; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:fixed; top:0; right:0; left:var(--drawer-w);
  height:var(--topbar-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  z-index:40;
  transition:left .38s var(--ease);
}
.topbar-brand{
  display:none; /* shown only on phones, where the side drawer is hidden */
  align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  flex-shrink:0;
}
.topbar-brand img{ width:28px; height:28px; border-radius:7px; }
.topbar-brand span{ font-family:'Fraunces',serif; font-weight:600; font-size:15px; letter-spacing:.02em; }
.topbar-search{
  display:flex; align-items:center; gap:10px;
  background:var(--paper-dim); border:1px solid var(--line);
  border-radius:10px; padding:9px 14px; width:min(360px,38vw);
  color:var(--ink-faint);
}
.topbar-search .icon{ width:18px; height:18px; }
.topbar-search input{
  border:none; background:none; outline:none; width:100%;
  font-size:14px; color:var(--ink); font-family:inherit;
}
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative; background:none; border:none; color:var(--ink-soft);
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ background:var(--paper-dim); color:var(--ink); }
.icon-btn .dot{
  position:absolute; top:8px; right:8px; width:7px; height:7px;
  border-radius:50%; background:var(--wine); border:1.5px solid var(--white);
}
.avatar-btn{ background:none; border:none; padding:0; width:38px; height:38px; border-radius:50%; overflow:hidden; border:2px solid var(--paper-dim); }
.avatar-btn img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   ANDROID-STYLE BOTTOM TAB BAR (phones only — see media query)
   ============================================================ */
.bottom-nav{
  display:none; /* enabled at phone widths */
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  height:calc(64px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.96); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  align-items:center; justify-content:space-around;
}
.bn-item{
  position:relative; background:none; border:none; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:600; padding:6px 10px; flex:1;
}
.bn-item .icon{ width:23px; height:23px; }
.bn-item.is-active{ color:var(--wine); }
.bn-badge{
  position:absolute; top:2px; right:16px; background:var(--wine); color:var(--white);
  font-size:9.5px; font-weight:700; border-radius:20px; padding:0 5px; line-height:14px;
}

/* ============================================================
   CREATE SHEET (mobile-native bottom sheet)
   ============================================================ */
.sheet-scrim{
  position:fixed; inset:0; background:rgba(15,13,10,.5); z-index:110;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.sheet-scrim.is-open{ opacity:1; pointer-events:auto; }
.sheet{
  width:100%; max-width:480px; background:var(--white);
  border-radius:20px 20px 0 0; padding:10px 22px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .32s var(--ease);
  box-shadow:0 -20px 50px -20px rgba(26,26,29,.35);
}
.sheet-scrim.is-open .sheet{ transform:translateY(0); }
.sheet-handle{ width:38px; height:4px; border-radius:3px; background:var(--line); margin:6px auto 16px; }
.sheet h3{ font-size:17px; margin-bottom:14px; }
.sheet-option{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-bottom:10px;
}
.sheet-option:hover{ border-color:var(--gold); }
.sheet-option-icon{
  width:42px; height:42px; border-radius:50%; background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--wine); flex-shrink:0;
}
.sheet-option-text strong{ display:block; font-size:14px; }
.sheet-option-text small{ font-size:12px; color:var(--ink-faint); }
.sheet-cancel{ width:100%; margin-top:6px; }

/* ============================================================
   COMMENTS SHEET — sizing model borrowed from TikTok:
   half-screen for the comment list, full-screen the moment a
   reply thread opens. Same physical sheet, just a height class swap.
   ============================================================ */
.comments-sheet{
  height:50vh; max-width:560px; padding:10px 0 0; display:flex; flex-direction:column;
  transition:transform .32s var(--ease), height .32s var(--ease);
}
.comments-sheet.is-full{ height:100vh; height:100dvh; border-radius:0; }
.comments-list-stage, .comments-thread-stage{
  display:none; flex-direction:column; flex:1; min-height:0;
}
.comments-sheet.is-half .comments-list-stage{ display:flex; }
.comments-sheet.is-full .comments-thread-stage{ display:flex; }

.comments-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px 10px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.comments-head h3{ font-size:15px; display:flex; align-items:center; gap:6px; }
.comments-head .reader-back{ margin-right:auto; }

.comments-list{ flex:1; overflow-y:auto; padding:12px 20px; }
.comment-row{ display:flex; gap:12px; margin-bottom:18px; }
.comment-row img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.comment-body strong{ font-size:13px; }
.comment-time{ font-size:11px; color:var(--ink-faint); }
.comment-body p{ font-size:13.5px; line-height:1.5; margin-top:3px; }
.comment-actions{ display:flex; align-items:center; gap:16px; margin-top:6px; }
.comment-like{
  display:flex; align-items:center; gap:5px; background:none; border:none; color:var(--ink-faint); font-size:12px;
}
.comment-like .icon{ width:15px; height:15px; }
.comment-reply-btn, .comment-viewreplies{
  background:none; border:none; color:var(--ink-faint); font-size:12px; font-weight:600;
}
.comment-reply-btn:hover, .comment-viewreplies:hover{ color:var(--wine); }
.comment-row-root{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.thread-divider{ font-size:11.5px; color:var(--ink-faint); font-weight:600; margin-bottom:14px; }

.comment-input-row{
  display:flex; align-items:center; gap:10px; padding:12px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); flex-shrink:0;
}
.comment-input-row img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.comment-input-row input{
  flex:1; border:1px solid var(--line); border-radius:20px; padding:9px 15px; font-size:13px;
  outline:none; font-family:inherit;
}
.comment-input-row input:focus{ border-color:var(--wine); }

/* ============================================================
   SHARE-A-BOOK PICKER (required attachment)
   ============================================================ */
.share-pick-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:50vh; overflow-y:auto; }
.share-pick-card{
  aspect-ratio:2/3; border:none; border-radius:8px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:8px; color:var(--white); font-size:11px; font-weight:600; text-align:left;
}
.share-pick-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6) 100%); }
.share-pick-card span{ position:relative; z-index:1; line-height:1.25; }
.share-pick-card:hover{ outline:2px solid var(--gold); outline-offset:2px; }

.share-compose-preview{
  display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
}
.share-preview-cover{ width:48px; height:70px; border-radius:4px; flex-shrink:0; }
.share-compose-preview strong{ display:block; font-size:13.5px; }
.share-compose-preview span{ font-size:11.5px; color:var(--ink-faint); }

/* ============================================================
   APP SHELL / VIEW SWITCHING
   ============================================================ */
.app{
  margin-left:var(--drawer-w);
  margin-top:var(--topbar-h);
  transition:margin-left .38s var(--ease);
  min-height:calc(100vh - var(--topbar-h));
  background:var(--white);
}

.view{
  display:none;
  animation:viewIn .42s var(--ease);
}
.view.is-active{ display:block; }
@keyframes viewIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   HOME — HERO
   ============================================================ */
.hero{
  position:relative;
  height:64vh; min-height:420px;
  display:flex; align-items:flex-end;
  padding:48px;
  color:var(--white);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,26,29,0) 0%, rgba(26,26,29,.15) 55%, var(--white) 100%),
             linear-gradient(90deg, rgba(26,26,29,.75) 0%, rgba(26,26,29,.15) 55%);
}
.hero-content{ position:relative; z-index:2; max-width:560px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:14px;
}
.hero-title{ font-size:clamp(32px,4.4vw,54px); font-weight:600; line-height:1.05; margin-bottom:14px; color:var(--white); }
.hero-desc{ font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.85); max-width:480px; margin-bottom:22px; }
.hero-meta{ display:flex; gap:14px; align-items:center; margin-bottom:22px; font-size:13.5px; color:rgba(255,255,255,.75); }
.hero-meta .stars{ display:flex; gap:2px; color:var(--gold); }
.hero-meta .stars .icon{ width:15px; height:15px; }
.hero-actions{ display:flex; gap:12px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  border:none; border-radius:9px; padding:12px 22px;
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, background .2s, opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--white); color:var(--ink); }
.btn-primary:hover{ background:var(--gold-soft); }
.btn-ghost{ background:rgba(255,255,255,.16); color:var(--white); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:rgba(255,255,255,.26); }
.btn-outline{ background:none; border:1.5px solid var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-round{ border-radius:30px; padding:12px 26px; }
.btn .icon{ width:17px; height:17px; }

/* ============================================================
   SHELVES (Netflix-style horizontal rows) — signature: cards
   look like book covers/spines, lifting off the shelf on hover
   ============================================================ */
.shelves{ padding:8px 0 60px; }
.shelf{ margin-bottom:34px; }
.shelf-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 48px 12px; }
.shelf-head h2{ font-size:19px; font-weight:600; }
.shelf-head .see-all{ font-size:12.5px; color:var(--ink-faint); font-weight:600; background:none; border:none; }
.shelf-head .see-all:hover{ color:var(--wine); }

.shelf-track-wrap{ position:relative; }
.shelf-track{
  display:flex; gap:14px;
  overflow-x:auto; overflow-y:visible;
  padding:10px 48px 24px;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.shelf-track::-webkit-scrollbar{ display:none; }

.shelf-nav{
  position:absolute; top:0; bottom:24px; width:56px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, var(--white), rgba(255,255,255,0));
  border:none; color:var(--ink); z-index:5; opacity:0;
  transition:opacity .2s;
}
.shelf-track-wrap:hover .shelf-nav{ opacity:1; }
.shelf-nav.right{ right:0; left:auto; background:linear-gradient(270deg, var(--white), rgba(255,255,255,0)); }
.shelf-nav .icon{ width:26px; height:26px; }

/* Book card — designed like a cloth-bound spine/cover, not a flat thumbnail */
.book-card{
  position:relative;
  flex:0 0 168px; height:246px;
  border-radius:6px 10px 10px 6px;
  cursor:pointer;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
  transform-origin:left center;
  box-shadow:var(--shadow-card);
}
.book-card::before{ /* spine highlight */
  content:""; position:absolute; left:0; top:0; bottom:0; width:9px;
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.12));
  border-radius:6px 0 0 6px; z-index:2;
}
.book-card::after{ /* gilt page edge */
  content:""; position:absolute; right:-3px; top:4px; bottom:4px; width:5px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-radius:0 3px 3px 0; opacity:.85; z-index:0;
}
.book-card-face{
  position:relative; z-index:1; height:100%; padding:18px 14px 14px 20px;
  border-radius:6px 10px 10px 6px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--white);
}
.book-card-face::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.book-card-rank{
  position:absolute; top:10px; right:12px; font-family:'Fraunces',serif;
  font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.55); z-index:1;
}
.book-card-title{ position:relative; font-family:'Fraunces',serif; font-weight:600; font-size:15px; line-height:1.25; margin-bottom:4px; }
.book-card-author{ position:relative; font-size:11.5px; color:rgba(255,255,255,.75); }

.book-card:hover{
  transform:translateY(-14px) scale(1.06);
  box-shadow:var(--shadow-pop);
  z-index:10;
}

/* Progress bar on "Continue Reading" cards */
.book-card-progress{ height:4px; border-radius:3px; background:rgba(255,255,255,.28); margin-top:8px; overflow:hidden; }
.book-card-progress span{ display:block; height:100%; background:var(--gold); border-radius:3px; }

/* ============================================================
   STREAK CARD
   ============================================================ */
.streak-card{
  margin:30px 48px 0; padding:20px 24px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.streak-headline{ display:flex; align-items:center; gap:14px; }
.streak-flame{ font-size:28px; }
.streak-current{ font-size:15px; font-weight:600; }
.streak-current strong{ font-family:'Fraunces',serif; font-size:19px; color:var(--wine); }
.streak-longest{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.streak-days{ display:flex; gap:5px; }
.streak-day{ width:14px; height:14px; border-radius:4px; background:var(--paper-dim); border:1px solid var(--line); }
.streak-day.is-hit{ background:var(--gold); border-color:var(--gold); }

/* ============================================================
   BADGES
   ============================================================ */
.badges-block{ padding:26px 48px 0; }
.badges-block h3{ font-size:16px; margin-bottom:14px; }
.badges-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:14px; }
.badge{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 10px; border-radius:10px; border:1px solid var(--line);
  text-align:center; background:var(--white);
}
.badge-icon{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim); color:var(--ink-faint);
}
.badge.is-earned .badge-icon{ background:linear-gradient(160deg, var(--gold-soft), var(--gold)); color:var(--white); }
.badge.is-earned .badge-name{ color:var(--ink); font-weight:600; }
.badge.is-locked{ opacity:.55; }
.badge-name{ font-size:11.5px; color:var(--ink-faint); }

/* ============================================================
   HIGHLIGHTS (shared between reader sidebar and profile tab)
   ============================================================ */
mark.hl{ background:none; padding:1px 2px; border-radius:3px; box-decoration-break:clone; }
mark.hl-gold{ background:rgba(176,141,62,.22); border-bottom:2px solid var(--gold); }
mark.hl-wine{ background:rgba(122,27,46,.14); border-bottom:2px solid var(--wine); }
mark.hl-ink{ background:rgba(26,26,29,.1); border-bottom:2px solid var(--ink); }

.hl-item{ padding:10px 12px; border-radius:8px; font-size:12.5px; line-height:1.55; margin-bottom:8px; background:var(--paper); border-left:3px solid var(--ink-faint); }
.hl-item.hl-gold{ border-left-color:var(--gold); }
.hl-item.hl-wine{ border-left-color:var(--wine); }
.hl-item.hl-ink{ border-left-color:var(--ink); }
.hl-item-wide{ cursor:pointer; padding:14px 16px; }
.hl-item-wide p{ font-size:13.5px; margin-bottom:6px; }
.hl-item-wide span{ font-size:11px; color:var(--ink-faint); }

.highlights-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; padding:28px 48px 60px; }

.highlight-popover{
  position:absolute; z-index:200; display:none; gap:6px;
  background:var(--ink); padding:7px; border-radius:20px; box-shadow:var(--shadow-pop);
}
.highlight-popover.is-visible{ display:flex; }
.highlight-popover button{
  width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.5);
  background:var(--hc); padding:0;
}
.highlight-popover button:hover{ border-color:var(--white); }

/* ============================================================
   READER VIEW
   ============================================================ */
.reader-shell{ display:flex; flex-direction:column; min-height:calc(100vh - var(--topbar-h)); }
.reader-head{
  display:flex; align-items:center; gap:16px; padding:16px 28px;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); z-index:10;
}
.reader-back{ background:none; border:none; color:var(--ink); width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.reader-back:hover{ background:var(--paper-dim); }
.reader-head-meta strong{ display:block; font-size:14px; }
.reader-head-meta span{ font-size:11.5px; color:var(--ink-faint); }
.reader-progress-wrap{ flex:1; }
.reader-progress-track{ height:5px; border-radius:4px; background:var(--paper-dim); overflow:hidden; }
.reader-progress-fill{ height:100%; background:linear-gradient(90deg, var(--gold), var(--wine)); border-radius:4px; transition:width .3s var(--ease); }

.reader-body{ display:flex; flex:1; }
.reader-page{
  flex:1; max-width:680px; margin:0 auto; padding:52px 32px 80px;
  font-family:'Fraunces',serif; font-size:17.5px; line-height:1.85; color:var(--ink);
}
.reader-page-title{ font-size:26px; margin-bottom:26px; }
.reader-page p{ margin-bottom:20px; user-select:text; }

.reader-sidebar{
  width:280px; flex-shrink:0; border-left:1px solid var(--line);
  padding:26px 22px; background:var(--paper);
}
.reader-sidebar h3{ font-size:14.5px; margin-bottom:6px; }
.reader-hint{ font-size:11.5px; color:var(--ink-faint); margin-bottom:14px; line-height:1.5; }

.reader-foot{
  display:flex; justify-content:space-between; padding:22px 32px 48px; max-width:680px; margin:0 auto; width:100%;
}

@media (max-width: 860px){
  .reader-sidebar{ display:none; }
  .reader-sidebar.is-open{
    display:block; position:fixed; right:0; top:var(--topbar-h); bottom:0; width:78vw; z-index:50; box-shadow:var(--shadow-pop);
  }
}

/* ============================================================
   MESSAGES VIEW
   ============================================================ */
.messages-app{ display:flex; height:calc(100vh - var(--topbar-h)); }
.conv-list{ width:340px; border-right:1px solid var(--line); flex-shrink:0; overflow-y:auto; }
.conv-list-head{ padding:24px 24px 14px; }
.conv-items{ display:flex; flex-direction:column; }
.conv-item{
  display:flex; gap:12px; align-items:center; padding:12px 24px;
  border:none; background:none; text-align:left; width:100%;
  border-left:3px solid transparent;
}
.conv-item:hover{ background:var(--paper); }
.conv-item.is-active{ background:var(--paper); border-left-color:var(--wine); }
.conv-item img{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.conv-item-body{ min-width:0; flex:1; }
.conv-item-top{ display:flex; justify-content:space-between; gap:8px; }
.conv-item-top strong{ font-size:14px; font-weight:600; }
.conv-item-top span{ font-size:11.5px; color:var(--ink-faint); flex-shrink:0; }
.conv-item-preview{ font-size:12.5px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.conv-unread{
  background:var(--wine); color:var(--white); font-size:10.5px; font-weight:700;
  border-radius:20px; padding:1px 6px; margin-left:6px;
}

.conv-thread{ flex:1; display:flex; flex-direction:column; background:var(--paper); }
.conv-thread-head{ display:flex; align-items:center; gap:12px; padding:18px 28px; border-bottom:1px solid var(--line); background:var(--white); }
.conv-thread-head img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
.conv-thread-head strong{ font-size:14.5px; }
.conv-thread-head .status{ font-size:11.5px; color:var(--ink-faint); }
.conv-back{ display:none; background:none; border:none; color:var(--ink); width:30px; height:30px; align-items:center; justify-content:center; flex-shrink:0; margin-right:-4px; }
.conv-messages{ flex:1; overflow-y:auto; padding:26px 28px; display:flex; flex-direction:column; gap:10px; }
.msg-bubble{ max-width:60%; padding:10px 15px; border-radius:16px; font-size:13.5px; line-height:1.5; }
.msg-bubble.them{ background:var(--white); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; }
.msg-bubble.me{ background:var(--wine); color:var(--white); align-self:flex-end; border-bottom-right-radius:4px; }
.conv-input{ display:flex; gap:10px; padding:18px 28px; background:var(--white); border-top:1px solid var(--line); }
.conv-input input{
  flex:1; border:1px solid var(--line); border-radius:10px; padding:11px 16px;
  font-size:13.5px; outline:none; font-family:inherit;
}
.conv-input input:focus{ border-color:var(--wine); }
.conv-send{ background:var(--wine); color:var(--white); border:none; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.conv-send .icon{ width:18px; height:18px; }

/* ============================================================
   PROFILE VIEW
   ============================================================ */
.profile-banner{ height:180px; background:linear-gradient(120deg, var(--wine), var(--ink)); }
.profile-head{ display:flex; align-items:flex-end; gap:22px; padding:0 48px; margin-top:-58px; }
.profile-avatar{ width:120px; height:120px; border-radius:50%; border:5px solid var(--white); object-fit:cover; box-shadow:var(--shadow-card); }
.profile-meta{ padding-bottom:6px; flex:1; }
.profile-meta h1{ font-size:26px; margin-bottom:2px; }
.profile-handle{ font-size:13.5px; color:var(--ink-faint); margin-bottom:14px; }
.profile-stats{ display:flex; gap:26px; }
.profile-stats div{ display:flex; flex-direction:column; }
.profile-stats strong{ font-size:17px; font-family:'Fraunces',serif; }
.profile-stats span{ font-size:11.5px; color:var(--ink-faint); }

.profile-tabs{ display:flex; gap:6px; padding:34px 48px 0; border-bottom:1px solid var(--line); }
.ptab{ background:none; border:none; padding:12px 6px; margin-right:22px; font-size:13.5px; font-weight:600; color:var(--ink-faint); border-bottom:2px solid transparent; }
.ptab.is-active{ color:var(--ink); border-color:var(--wine); }

.profile-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:22px 16px; padding:28px 48px 60px;
}

/* ============================================================
   WRITE / CREATE VIEW
   ============================================================ */
.write-wrap{ max-width:760px; margin:0 auto; padding:48px 32px 80px; }
.write-wrap h1{ font-size:28px; margin-bottom:6px; }
.write-sub{ color:var(--ink-faint); font-size:14px; margin-bottom:30px; }
.write-cover-row{ display:flex; gap:22px; margin-bottom:22px; }
.write-cover{
  flex:0 0 140px; height:200px; border-radius:8px; border:1.5px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--ink-faint); font-size:12.5px; background:var(--paper);
  cursor:pointer; overflow:hidden; background-size:cover; background-position:center;
}
.write-cover.has-image svg, .write-cover.has-image span{ display:none; }
.write-fields{ flex:1; display:flex; flex-direction:column; gap:16px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.write-block{ margin-bottom:20px; }
input[type=text], select, textarea{
  font-family:inherit; font-size:14px; color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:11px 13px;
  outline:none; resize:vertical; background:var(--white);
}
input[type=text]:focus, select:focus, textarea:focus{ border-color:var(--wine); }
.write-actions{ display:flex; gap:12px; justify-content:flex-end; }
.write-actions .btn-ghost{ background:var(--paper-dim); color:var(--ink); }
.write-actions .btn-ghost:hover{ background:var(--line); }
.write-actions .btn-primary{ background:var(--wine); color:var(--white); }
.write-actions .btn-primary:hover{ background:var(--wine-dark); }

/* ============================================================
   NETFLIX-STYLE BOOK DETAIL MODAL
   ============================================================ */
.modal-scrim{
  position:fixed; inset:0; background:rgba(15,13,10,.7);
  display:flex; align-items:flex-start; justify-content:center;
  padding:4vh 20px; overflow-y:auto; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-scrim.is-open{ opacity:1; pointer-events:auto; }
.modal{
  width:min(820px,92vw); background:var(--white); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow-pop);
  transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.modal-scrim.is-open .modal{ transform:translateY(0) scale(1); opacity:1; }
.modal-close{
  position:absolute; top:18px; right:18px; z-index:5;
  background:rgba(20,20,20,.55); color:var(--white); border:none;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.modal-banner{
  height:320px; background-size:cover; background-position:center; position:relative;
  display:flex; align-items:flex-end; padding:32px;
}
.modal-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,26,29,0) 40%, rgba(26,26,29,.9) 100%);
}
.modal-banner-actions{ position:relative; z-index:1; display:flex; gap:10px; }
.icon-btn.ring{ border:1.5px solid rgba(255,255,255,.6); color:var(--white); width:42px; height:42px; position:relative; }
.icon-btn.ring:hover{ border-color:var(--white); background:rgba(255,255,255,.12); }
.comment-count{
  position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  background:var(--wine); color:var(--white); font-size:9.5px; font-weight:700;
  border-radius:20px; padding:0 5px; line-height:14px; white-space:nowrap;
}

.modal-body{ display:flex; gap:28px; padding:26px 32px 6px; }
.modal-main{ flex:1.5; }
.modal-info-row{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-soft); margin-bottom:14px; }
.modal-match{ color:#3a7d44; font-weight:700; }
.modal-badge{ border:1px solid var(--line); padding:1px 8px; border-radius:4px; font-size:11px; }
.modal-synopsis{ font-size:14.5px; line-height:1.65; color:var(--ink); }
.modal-side{ flex:1; font-size:12.5px; color:var(--ink-soft); line-height:1.8; }
.modal-side span{ color:var(--ink-faint); }

.modal-chapters{ padding:20px 32px 6px; }
.modal-chapters h3, .modal-more h3{ font-size:16px; margin-bottom:12px; }
.chapter-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:8px; margin-bottom:8px;
}
.chapter-num{ font-family:'Fraunces',serif; font-size:20px; color:var(--ink-faint); width:26px; }
.chapter-row strong{ font-size:13.5px; display:block; }
.chapter-row span{ font-size:11.5px; color:var(--ink-faint); }

.modal-more{ padding:20px 32px 34px; }
.modal-more-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; }

/* ============================================================
   AUTH GATE (sign in / sign up)
   ============================================================ */
.pre-auth .topbar, .pre-auth .drawer, .pre-auth .drawer-scrim, .pre-auth .bottom-nav, .pre-auth .app{
  display:none !important;
}
.auth-gate{
  position:fixed; inset:0; z-index:300; background:var(--white);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.auth-gate.is-visible{ display:flex; }
.auth-card{ width:100%; max-width:360px; text-align:center; }
.auth-logo{ width:64px; height:64px; border-radius:16px; margin-bottom:14px; }
.auth-card h1{ font-size:24px; letter-spacing:.04em; margin-bottom:4px; }
.auth-tagline{ font-size:13px; color:var(--ink-faint); margin-bottom:26px; }
.auth-tabs{ display:flex; border:1px solid var(--line); border-radius:10px; padding:3px; margin-bottom:22px; }
.auth-tab{ flex:1; background:none; border:none; padding:9px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink-faint); }
.auth-tab.is-active{ background:var(--ink); color:var(--white); }
.auth-form{ display:flex; flex-direction:column; gap:14px; text-align:left; }
.auth-form[hidden]{ display:none; }
.auth-form label{ font-size:12px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:6px; }
.auth-form input{
  font-family:inherit; font-size:14px; border:1px solid var(--line); border-radius:8px; padding:11px 13px; outline:none;
}
.auth-form input:focus{ border-color:var(--wine); }
.auth-form .btn{ width:100%; justify-content:center; margin-top:4px; }
.auth-error{ font-size:12.5px; color:var(--wine); min-height:1em; margin:0; }

/* ============================================================
   PROFILE AVATAR UPLOAD
   ============================================================ */
.profile-avatar-wrap{ position:relative; flex-shrink:0; }
.avatar-edit-btn{
  position:absolute; bottom:4px; right:4px; width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:var(--white); border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center;
}
.avatar-edit-btn .icon{ width:15px; height:15px; }
.avatar-edit-btn:hover{ background:var(--wine); }

.profile-name-row{ display:flex; align-items:center; gap:8px; }
.profile-name-row .icon-btn{ width:28px; height:28px; }
.profile-name-row .icon-btn .icon{ width:14px; height:14px; }
.edit-profile-form{
  max-width:360px; margin:14px 48px 0; padding:16px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); display:flex; flex-direction:column; gap:12px;
}
.edit-profile-form[hidden]{ display:none; }
.edit-profile-form label{ font-size:12px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:5px; }
.edit-profile-form input{ font-family:inherit; font-size:14px; border:1px solid var(--line); border-radius:8px; padding:9px 12px; outline:none; }
.edit-profile-form input:focus{ border-color:var(--wine); }

/* ============================================================
   MODAL ACTION STATES — like / add-to-shelf toggle feedback
   ============================================================ */
.icon-btn.ring.is-active{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.icon-btn.ring.is-active .icon path{ fill:currentColor; }
.comment-like.is-active{ color:var(--wine); }
.comment-like.is-active .icon path{ fill:currentColor; }

/* ============================================================
   SEARCH
   ============================================================ */
.search-clear{ background:none; border:none; color:var(--ink-faint); display:flex; padding:2px; flex-shrink:0; }
.search-clear[hidden]{ display:none; }
.search-clear .icon{ width:14px; height:14px; }
.search-empty{ padding:60px 24px; text-align:center; color:var(--ink-faint); }
.search-empty strong{ display:block; color:var(--ink); font-size:15px; margin-bottom:6px; }

/* ============================================================
   NOTIFICATIONS DROPDOWN
   ============================================================ */
.notif-wrap{ position:relative; }
.notif-dropdown{
  position:absolute; top:48px; right:0; width:300px; background:var(--white);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-pop);
  display:none; z-index:90; overflow:hidden;
}
.notif-dropdown.is-open{ display:block; }
.notif-head{ padding:14px 16px; font-weight:600; font-size:13.5px; border-bottom:1px solid var(--line); }
.notif-item{ display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); }
.notif-item:last-child{ border-bottom:none; }
.notif-item img{ width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.notif-item p{ font-size:12.5px; line-height:1.45; }
.notif-item span{ font-size:11px; color:var(--ink-faint); }
.notif-empty{ padding:24px 16px; text-align:center; font-size:12.5px; color:var(--ink-faint); }

/* ============================================================
   EMPTY STATES (profile tabs with nothing in them yet)
   ============================================================ */
.grid-empty{
  grid-column:1/-1; text-align:center; padding:50px 24px; color:var(--ink-faint);
}
.grid-empty strong{ display:block; color:var(--ink); font-size:15px; margin-bottom:6px; }

/* ============================================================
   USER-WRITTEN POST DETAIL SHEET
   ============================================================ */
.user-post-cover{
  width:100%; height:160px; border-radius:10px; background-size:cover; background-position:center;
  margin-bottom:16px;
}
.user-post-chapter{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.user-post-chapter p{ font-size:13.5px; line-height:1.7; white-space:pre-wrap; }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-stack{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:400;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
  width:calc(100% - 40px); max-width:380px;
}
.toast{
  background:var(--ink); color:var(--white); font-size:13px; font-weight:500;
  padding:12px 18px; border-radius:10px; box-shadow:var(--shadow-pop);
  opacity:0; transform:translateY(10px); transition:opacity .25s, transform .25s;
  text-align:center; width:100%;
}
.toast.is-visible{ opacity:1; transform:translateY(0); }
.toast.is-error{ background:var(--wine); }

/* ============================================================
   RESPONSIVE — tablet (drawer collapses, still available via toggle)
   ============================================================ */
@media (max-width: 860px){
  :root{ --drawer-w:0px; }
  .drawer{ width:var(--drawer-w-open); transform:translateX(-100%); transition:transform .38s var(--ease); }
  .drawer.is-open{ transform:translateX(0); width:var(--drawer-w-open); }
  .drawer .drawer-logo-text, .drawer .drawer-link span:not(.drawer-badge){ opacity:1; transform:none; }
  .topbar{ left:0; padding:0 16px; }
  .app{ margin-left:0; }
  .hero{ padding:28px; }
  .messages-app{ flex-direction:column; height:auto; }
  .conv-list{ width:100%; max-height:280px; }
  .modal-body{ flex-direction:column; }
  .profile-head{ flex-wrap:wrap; }
}

/* ============================================================
   RESPONSIVE — phone (Android-first): side drawer is replaced
   entirely by the bottom tab bar, header simplifies to brand + actions
   ============================================================ */
@media (max-width: 768px){
  .drawer, .drawer-scrim, .drawer-toggle{ display:none !important; }
  .bottom-nav{ display:flex; }
  .topbar-brand{ display:flex; }
  .topbar{ gap:10px; padding:0 14px; }
  .topbar-brand span{ display:none; } /* icon alone is enough once space is tight; avoids crowding the search bar */
  .topbar-search{ width:auto; flex:1; min-width:0; }

  .app{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .reader-shell{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .reader-foot{ padding-bottom:calc(22px + 64px + env(safe-area-inset-bottom)); }

  /* Messages: full-size-fit native pattern — tapping a conversation
     slides a full-screen thread in; the back arrow slides it back out.
     Two 100%-width panes sit side by side in a 200%-wide track. */
  .messages-app{
    display:flex; flex-direction:row; width:200%;
    height:calc(100vh - var(--topbar-h) - 64px - env(safe-area-inset-bottom));
    transition:transform .32s var(--ease);
  }
  .messages-app.thread-open{ transform:translateX(-50%); }
  .conv-list{ width:50%; max-height:none; height:100%; }
  .conv-thread{ width:50%; height:100%; }
  .conv-back{ display:flex; }

  .hero{ padding:22px; height:56vh; min-height:380px; }
  .hero-title{ font-size:30px; }
  .shelf-head, .shelf-track{ padding-left:20px; padding-right:20px; }
  .profile-head, .profile-tabs, .profile-grid, .streak-card, .badges-block, .write-wrap, .highlights-list{ padding-left:20px; padding-right:20px; }

  /* Comments sheet: full width, no side margins wasted on a small screen */
  .comments-sheet, .sheet{ max-width:none; }
}