/* BookChat - app styles.
   Default brand: Burnt Orange #B9531D (deepened from #C65A20 so white button text meets 4.5:1), White #FFFFFF, Apricot #F9E7D9. Other palettes are in the Appearance section at the end.
   Self-contained: does not depend on css/theme.css. */
:root{
  color-scheme:light;
  /* Keep legacy aliases: current markup and inline styles use these names. */
  --plum-deep:#8B351B; --cream:#FFFFFF; --plum:#8B351B; --gold:#B9531D;
  --bg:#FFF7F0; --surface:#FFFDFA; --surface-soft:#F9E7D9; --ink:#3A211D; --ink-2:#765E56; --line:#EEDDD3;
  --warm-brown:#8B351B; --burgundy:#7A2E3A; --blush:#F7E4DC;
  --accent:#B9531D; --accent-ink:#FFFFFF; --link:#8B351B;
  --accent-rgb:185,83,29; --deep-rgb:139,53,27;
  --danger:#A12B4A; --ok:#2F7D5B; --warn:#8A5A12;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 10px 28px rgba(var(--deep-rgb),.08);
  --shadow-lift:0 1px 0 rgba(255,255,255,.8) inset,0 16px 38px rgba(var(--deep-rgb),.14);
  --font:"Nunito","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Editorial headings use the reader's installed book serif; nothing is downloaded. */
  --font-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --cream:#FFF7F0; --bg:#191614; --surface:#26211E; --surface-soft:#3A2C25; --ink:#FFF7F0; --ink-2:#D1C4BB; --line:#4A3E37;
  --warm-brown:#F0B28E; --burgundy:#A8434F; --blush:#33241F;
  --accent:#B9531D; --gold:#B9531D; --accent-ink:#FFFFFF; --link:#F4B28E;
  --danger:#FFAAA6; --ok:#9BD7B0; --warn:#F0C58B;
  --shadow:0 1px 0 rgba(255,255,255,.035) inset,0 10px 28px rgba(0,0,0,.2);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04) inset,0 16px 38px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;font-size:calc(100% * var(--text-scale,1))}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;
  overflow-x:hidden;min-height:100vh}
h1,h2,h3{line-height:1.2;margin:0 0 .4em;font-family:var(--font-serif);letter-spacing:-.005em}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:.3em 0 .8em}
a{color:var(--link)}
img{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#FFFFFF;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.muted{color:var(--ink-2)} .small{font-size:.88rem} .center{text-align:center}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .grow{flex:1 1 0;min-width:0}
.stack>*+*{margin-top:12px}

/* ---------- shell ---------- */
.shell{min-height:100vh}
.top{position:sticky;top:0;z-index:30;background:var(--surface);color:var(--ink);
  padding:calc(env(safe-area-inset-top) + 8px) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));
  display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;
  font-size:1.2rem;letter-spacing:.01em}
.brand img{width:auto;height:34px}
/* Wordmark colours come from the official logo and stay the same in every colour theme. */
.brand>span{color:#8B351B}
.brand b{color:#B9531D}
:root[data-theme="dark"] .brand>span{color:#FFF7F0}
:root[data-theme="dark"] .brand b{color:#C7754A}
.auth-head{text-align:center;margin-bottom:6px}
.auth-mark{display:block;width:auto;height:72px;margin:2px auto 12px}
.top .spacer{flex:1}
.top .btn{min-height:38px;padding:6px 14px}
.layout{max-width:1320px;margin:0 auto;
  padding:16px max(20px,env(safe-area-inset-right)) calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.side{display:none}
/* Mobile tab bar: five equal slots, Create raised in the middle, clear of the home indicator (safe area). */
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;min-height:var(--nav-h);
  padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));
  border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(var(--deep-rgb),.07)}
.bottom a,.side a{color:var(--ink-2);text-decoration:none;display:flex;flex-direction:column;align-items:center;
  gap:2px;font-size:.7rem;font-weight:700;padding:4px 2px;min-width:0;min-height:52px;justify-content:center;border-radius:14px}
.bottom a>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottom a .ico{display:grid;place-items:center;width:48px;height:30px;border-radius:999px;transition:background .15s ease}
.bottom a[aria-current=page]{color:var(--link);font-weight:850}
.bottom a[aria-current=page] .ico{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.bottom .ico,.side .ico{font-size:1.3rem;line-height:1}
.ico svg,.theme-toggle svg,.story-ring svg,.post-book-link svg,.feed-state>svg{display:block;width:21px;height:21px}
.theme-toggle{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:7px 12px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
#topActions{flex-wrap:nowrap;gap:8px}
@media (max-width:520px){
  .theme-toggle{width:40px;padding:0}
  .theme-toggle .theme-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .brand{font-size:1.1rem}
}
@media (min-width:900px){
  .layout{display:grid;grid-template-columns:176px minmax(0,1fr);gap:22px;padding-bottom:40px}
  .side{display:block;position:sticky;top:76px;align-self:start}
  .side a{flex-direction:row;gap:10px;font-size:.92rem;padding:10px 11px;justify-content:flex-start;color:var(--ink);
    border-radius:14px}
  .side a[aria-current=page]{background:var(--plum-deep);color:#FFFFFF;font-weight:800}
  .side a:hover{background:rgba(var(--accent-rgb),.10)}
  .bottom{display:none}
}
#view{min-width:0}

/* ---------- components ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow);
  padding:calc(var(--card-pad) + 2px);transition:transform .25s ease,box-shadow .25s ease}
.card.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card.gold{border-top:4px solid var(--gold)}
.btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:800;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px rgba(var(--deep-rgb),.20);
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn.gold{background:var(--gold);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line);box-shadow:none}
.btn.danger{background:var(--danger);color:#fff}
.btn.block{width:100%}
label{display:block;font-weight:700;margin:12px 0 4px}
.hint{font-weight:400;color:var(--ink-2);font-size:.85rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],input[type=number],
textarea,select{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:2px solid var(--line);
  border-radius:var(--radius-sm);padding:11px 12px;min-height:46px}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
.field-msg{font-size:.85rem;min-height:1.2em;margin-top:4px}
.ok{color:var(--ok)} .bad{color:var(--danger)} .warn{color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{background:var(--surface-soft);color:var(--ink);border-radius:999px;padding:3px 11px;font-size:.82rem;font-weight:700}
.chip.gold{background:var(--gold);color:var(--accent-ink)}
.chip.warn{background:rgba(138,90,18,.16);color:var(--warn)}
.alert{border-radius:var(--radius-sm);padding:12px 14px;border:1px solid var(--line);background:var(--surface)}
.alert.error{border-color:var(--danger);color:var(--danger)}
.alert.info{border-color:var(--gold)}
.avatar{border-radius:50%;object-fit:cover;background:var(--plum);color:var(--cream);display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;flex:none;overflow:hidden}
.stars{color:var(--gold);letter-spacing:1px;white-space:nowrap}
.stars .off{color:var(--line)}
.divider{height:1px;background:var(--line);margin:16px 0;border:0}
.empty{text-align:center;padding:30px 16px}
.empty .big{font-size:2.4rem}
.hero{background:linear-gradient(140deg,var(--plum-deep),var(--plum));color:var(--cream);border-radius:var(--radius);
  padding:28px 22px;box-shadow:var(--shadow-lift);position:relative;overflow:hidden}
.hero h1{color:var(--cream)} .hero .gold{color:#FFF7F0}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,231,217,.55),transparent 70%)}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- books ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.book{display:block;text-decoration:none;color:inherit}
.cover{aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,var(--plum),var(--plum-deep));
  display:flex;align-items:center;justify-content:center;color:#FFFFFF;font-weight:800;font-size:2.4rem;
  box-shadow:0 8px 20px rgba(var(--deep-rgb),.22);width:100%}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.book h3{font-size:.95rem;margin:8px 0 2px}
.book .by{font-size:.82rem;color:var(--ink-2)}
.detail{display:grid;gap:16px}
@media (min-width:640px){.detail{grid-template-columns:200px 1fr}}
.filters{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:640px){.filters{grid-template-columns:2fr 1fr 1fr}}
.review{border-top:1px solid var(--line);padding:14px 0}
.spoiler-body{filter:blur(7px);user-select:none}
.starpick{display:flex;gap:4px}
.starpick button{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--line);min-width:44px;min-height:44px}
.starpick button.on{color:var(--gold)}

/* ---------- feedback ---------- */
.sk{background:linear-gradient(90deg,var(--line),var(--surface),var(--line));background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;border-radius:10px;height:16px;margin:10px 0}
.sk.t{height:28px;width:60%} .sk.b{height:160px}
@keyframes shimmer{to{background-position:-200% 0}}
#toasts{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));z-index:60;display:flex;
  flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
@media (min-width:900px){#toasts{bottom:24px}}
.toast{pointer-events:auto;background:var(--plum-deep);color:var(--cream);padding:12px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-lift);max-width:460px;font-weight:700}
.toast.error{background:var(--danger);color:#fff;border-color:transparent}
:root[data-theme="dark"] .btn.danger{background:#8C302E;color:#FFF7F0}
table.check{width:100%;border-collapse:collapse;font-size:.92rem}
table.check td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .card.lift:hover,.btn:hover{transform:none}
}

/* ---------- social home ---------- */
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--accent);margin:0 0 8px}
.feed-tabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.feed-tab{appearance:none;position:relative;flex:0 0 auto;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:.92rem;font-weight:750;
  padding:12px 14px;min-height:46px;cursor:pointer;border-radius:10px 10px 0 0}
.feed-tab[aria-selected=true]{color:var(--accent)}
.feed-tab[aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px;background:var(--accent)}
.feed-panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.feed-panel-content{padding:14px}
.feed-list{display:grid;gap:12px}
.feed-loading,.feed-state{min-height:112px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.feed-loading{color:var(--ink-2)}
.feed-state>svg{color:var(--accent);width:28px;height:28px;margin-bottom:3px}
.feed-state h3,.feed-state p{margin:0}
.feed-state p{max-width:46ch}
.feed-unavailable{background:var(--bg);border-radius:14px}
.post-author-name:hover,.text-link:hover{text-decoration:underline;color:var(--accent)}
.verified-label{color:var(--warm-brown);font-size:.75rem;font-weight:800}
.post-warning{color:var(--warn);font-size:.82rem;font-weight:700;margin:0 0 8px}
.spoiler-body{filter:blur(7px);user-select:none}
.spoiler-reveal{border:0;background:var(--surface-soft);color:var(--ink);padding:7px 10px;border-radius:9px;font:inherit;font-size:.8rem;font-weight:750;cursor:pointer;margin-bottom:6px}
.module-unavailable{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.module-unavailable p{margin:0;flex:1 1 130px;line-height:1.35}
.module-unavailable .btn{flex:none}
.text-link{color:var(--link);font-size:.88rem;font-weight:800;text-decoration:none}
.btn-small{min-height:38px;padding:7px 14px;font-size:.86rem}
.btn-outline{background:transparent;color:var(--accent);border:1px solid var(--accent);box-shadow:none}
@media (max-width:1050px){.layout{padding-left:14px;padding-right:14px}}

.featured-book-link{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink);text-decoration:none}
.featured-book-link img,.featured-book-initial{width:36px;height:50px;flex:none;object-fit:cover;border-radius:6px;background:var(--surface-soft)}
.featured-book-initial{display:grid;place-items:center;color:var(--warm-brown);font-weight:800}
.featured-book-link>span:last-child{display:grid;min-width:0;gap:2px}
.featured-book-link strong,.featured-book-link small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-book-link strong{font-size:.83rem}
.featured-book-link small{font-size:.74rem}
.owner-dashboard{max-width:900px;margin:0 auto;display:grid;gap:14px}
.owner-heading{padding:8px 2px}
.owner-heading h1{margin-bottom:5px}
.owner-heading p:last-child{margin:0}
.owner-card h2{font-size:1.12rem}
.owner-form,.owner-collections{display:grid;gap:12px}
.owner-check{display:flex;align-items:center;gap:8px;font-weight:650}
.owner-check input{width:18px;height:18px;accent-color:var(--accent)}
.owner-collection-form{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.owner-collection-form+.owner-collection-form{margin-top:12px}
.owner-collection-form select[multiple]{min-height:160px}

/* ---------- five-screen interface: shared pieces ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-narrow{max-width:760px;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 16px}
.page-head h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 2px}
.page-head p{margin:0}
.section{margin-top:22px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.section-head h2{margin:0}
.section-head p{margin:2px 0 0}
.top{border-bottom:1px solid var(--line)}
.icon-btn{appearance:none;position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  background:var(--surface);color:var(--ink-2);cursor:pointer;text-decoration:none}
.icon-btn:hover,.icon-btn[aria-expanded=true],.icon-btn[aria-current=page]{color:var(--accent);border-color:var(--accent)}
.icon-btn svg{width:20px;height:20px}
.badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--plum-deep);color:#fff;
  font-size:.68rem;font-weight:800;line-height:1;display:grid;place-items:center;border:2px solid var(--surface)}
.btn svg{width:18px;height:18px}
.check-label{display:flex;align-items:center;gap:8px;font-weight:600}
.check-label input{width:18px;height:18px;accent-color:var(--accent)}
.form-group{margin-top:6px}
.counter{float:right;font-weight:700}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ico-circle{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--surface-soft);color:var(--accent)}
.ico-circle svg{width:22px;height:22px}

/* navigation: a prominent Create button on the mobile bar */
.bottom a.nav-create .ico{display:grid;place-items:center;width:50px;height:50px;margin-top:-22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 18px rgba(var(--deep-rgb),.3);border:3px solid var(--surface)}
.bottom a.nav-create[aria-current=page] .ico{background:var(--plum-deep);color:#fff}
.side a.nav-create .ico{color:var(--accent)}
.side a.nav-create[aria-current=page] .ico{color:#fff}
/* Log out at the end of the desktop side menu: styled like the menu links, set apart by a divider. */
.side .nav-logout{appearance:none;display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:12px 11px 10px;border:0;
  border-top:1px solid var(--line);border-radius:0 0 14px 14px;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer;text-align:left}
.side .nav-logout:hover{background:rgba(var(--accent-rgb),.10)}
.side .nav-logout[disabled],.profile-logout[disabled]{opacity:.6;cursor:progress}
.side .nav-logout .ico svg{width:21px;height:21px}

/* overflow menus */
.menu-wrap{position:relative;flex:none}
.menu-wrap>.icon-btn{border-color:transparent;background:transparent}
.menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:25;min-width:190px;display:grid;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift)}
.menu-item{appearance:none;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;font-weight:650;text-align:left;
  padding:10px 12px;min-height:42px;border-radius:10px;cursor:pointer}
.menu-item:hover,.menu-item:focus-visible{background:var(--surface-soft);outline:none}
.menu-item.danger{color:var(--danger)}

/* search and chip filters */
.search-field{position:relative;margin-bottom:12px}
.search-field>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-2);pointer-events:none}
.search-field input{padding-left:46px;border-radius:999px;background:var(--surface)}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.chip-toggle{appearance:none;flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 15px;
  min-height:40px;font:inherit;font-size:.86rem;font-weight:750;white-space:nowrap;cursor:pointer}
.chip-toggle:hover{border-color:var(--accent);color:var(--accent)}
.chip-toggle[aria-pressed=true]{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.chip-toggle[disabled]{opacity:.6;cursor:progress}
.segmented{display:flex;flex-wrap:wrap;gap:8px}
.sort-select{max-width:220px;min-height:40px;padding:7px 12px}

/* books */
.book.card{background:var(--surface)}
.book h3{font-family:var(--font-serif);font-size:1rem;line-height:1.25}
.book .cover{border-radius:10px;box-shadow:0 10px 22px rgba(var(--deep-rgb),.2)}
.book-note{font-size:.76rem;font-weight:700;color:var(--accent);margin-top:2px}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(138px,158px);gap:14px;overflow-x:auto;padding:4px 2px 14px;
  scroll-snap-type:x proximity;scrollbar-width:thin}
.shelf-row>*{scroll-snap-align:start}
.book-compact{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:12px;align-items:start}
.book-compact .cover{grid-row:1 / span 4;width:58px;height:86px;font-size:1.3rem;border-radius:7px;box-shadow:0 6px 14px rgba(var(--deep-rgb),.18)}
.book-compact h3,.book-compact .by,.book-compact .row{grid-column:2;margin:0}
.book-compact h3{font-size:.95rem;margin-top:2px}
.book-links .btn svg{width:17px;height:17px}
@media (max-width:639px){.detail>.cover{width:min(200px,60%);margin:0 auto}}

/* book picker (Create forms) */
.book-picker,.picker-results{display:grid;gap:6px}
.picker-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
button.picker-option:hover,button.picker-option:focus-visible{border-color:var(--accent)}
.picker-option.is-chosen{background:var(--blush);cursor:default}
.picker-option .grow{display:grid;min-width:0}
.picker-option strong,.picker-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-thumb{flex:none;width:34px;height:50px;border-radius:5px;object-fit:cover;background:var(--surface-soft);color:var(--warm-brown);
  font-weight:800;display:grid;place-items:center}

/* home: composer, feed paging and a two-column layout on wide screens */
.composer-card h2{margin:0 0 4px}
.composer-prompt:hover{border-color:var(--accent);color:var(--ink)}
.quick-link:hover{color:var(--accent)}
.quick-link svg{width:17px;height:17px;color:var(--accent)}
.feed-more{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:14px 0 4px}
.feed-more:empty{display:none}

/* post cards */
.post-action[disabled]{opacity:.6;cursor:progress}
.post-action.is-liked,.post-action.is-saved{color:var(--accent)}
.post-action.is-liked svg,.post-action.is-saved svg{fill:currentColor}
.post-action.push{margin-left:auto}
.inline-panel{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.inline-panel h3{margin:0}
.post-comments{display:grid;gap:10px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.comment-item{margin-left:calc(var(--reply-depth,0) * 16px);padding:10px 12px;border-radius:12px;background:var(--bg)}
.comment-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.comment-author{font-weight:800;font-size:.88rem;color:var(--ink);text-decoration:none}
.comment-author:hover{color:var(--accent)}
.comment-body{margin:6px 0 2px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.93rem}
.comment-reply{border:0;background:none;padding:4px 0;color:var(--link);font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.reply-box{margin-top:6px}
.comment-form{display:grid;gap:6px}
.comment-form textarea{min-height:64px}
.comment-form .btn{justify-self:start}

/* polls */
.poll{display:grid;gap:8px;margin-top:12px}
.poll-option{appearance:none;width:100%;text-align:left;padding:11px 14px;min-height:44px;border:1.5px solid var(--accent);border-radius:12px;
  background:var(--surface);color:var(--ink);font:inherit;font-weight:750;cursor:pointer}
.poll-option:hover{background:var(--blush)}
.poll-result{position:relative;overflow:hidden;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.poll-result.mine{border-color:var(--accent)}
.poll-bar{position:absolute;inset:0 auto 0 0;background:var(--surface-soft)}
.poll-label{position:relative;display:flex;justify-content:space-between;gap:10px;font-weight:650}
.poll-foot{margin:2px 0 0}

/* create */
.create-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.create-option{display:flex;align-items:flex-start;gap:12px;color:var(--ink);text-decoration:none}
.create-option>span:last-child{display:grid;gap:2px}
.create-option strong{font-family:var(--font-serif);font-size:1.08rem}
.form-title{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.form-title h1{margin:0;font-size:1.5rem}
.form-title p{margin:0}
.photo-previews{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-top:8px}
.photo-preview{margin:0;display:grid;gap:6px}
.photo-preview img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.photo-preview input{min-height:40px;padding:8px 10px;font-size:.85rem}
.poll-inputs{display:grid;gap:8px;margin-bottom:8px}
.poll-input-row{flex-wrap:nowrap}

/* chats */
.chat-list{display:grid;gap:2px}
.chat-row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:14px;color:var(--ink);text-decoration:none}
a.chat-row:hover{background:var(--bg)}
.chat-row .grow{display:grid;gap:2px;min-width:0}
.chat-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-preview{color:var(--ink-2);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-row.unread .chat-preview{color:var(--ink);font-weight:700}
.chat-meta{display:grid;justify-items:end;gap:5px;flex:none;font-size:.75rem;color:var(--ink-2)}
.count-pill{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--plum-deep);color:#fff;font-size:.72rem;font-weight:800}
.avatar.group-avatar{border-radius:14px}
.thread-page{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:calc(100vh - 150px);min-height:440px;padding:0;overflow:hidden}
.thread-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.thread-head .grow{display:grid;min-width:0}
.thread-title{font-size:1.1rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-log{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.bubble{align-self:flex-start;display:grid;gap:3px;max-width:min(78%,520px);padding:9px 13px;border-radius:18px 18px 18px 6px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.bubble.mine{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--plum-deep);border-color:transparent;color:#fff}
.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere}
.bubble-name{font-size:.76rem;font-weight:800;color:var(--accent);text-decoration:none}
.bubble-reply{font-size:.8rem;padding:4px 8px;border-left:3px solid currentColor;opacity:.8}
.bubble-pin{font-size:.72rem;font-weight:800}
.bubble-meta{font-size:.7rem;opacity:.8;justify-self:end}
.bubble.mine a{color:#fff}
.bubble-media img{max-width:100%;border-radius:12px;display:block}
.bubble-media audio{max-width:100%}
.thread-note{margin:0;padding:0 12px;min-height:0}
.thread-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.thread-form textarea{min-height:46px;max-height:140px;resize:none;border-radius:22px}
.send-btn{flex:none;width:46px;height:46px;padding:0;border-radius:50%}
@media (max-width:899px){.thread-page{height:calc(100vh - 200px);height:calc(100dvh - 200px)}}

/* notifications */
.notif-list{display:grid;gap:4px}
.notif{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;color:var(--ink);text-decoration:none}
.notif:hover{background:var(--bg)}
.notif.unread{background:var(--blush)}
.notif .grow{display:grid;gap:2px;min-width:0}
.unread-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* profile */
.profile-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile-name{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 2px}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.profile-bio{margin-top:14px;white-space:pre-wrap}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0 0}
.stat{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:var(--bg);text-align:center}
.stat dt{font-size:.74rem;color:var(--ink-2);font-weight:700}
.stat dd{margin:0;font-family:var(--font-serif);font-size:1.3rem;font-weight:700}
.reading-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.reading-card{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.reading-card p{margin:0}
.progress{height:8px;border-radius:999px;background:var(--surface-soft);overflow:hidden}
.progress>span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.profile-review:first-child{border-top:0;padding-top:4px}
.review-body{white-space:pre-wrap;margin:6px 0}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .post-action{padding:8px}
}
:root[data-theme="dark"] .book .cover{box-shadow:0 10px 22px rgba(0,0,0,.35)}

/* ---------- phase 1: profile hero ---------- */
.profile-page{max-width:1040px;margin:0 auto}
.profile-hero{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;padding-bottom:18px}
.profile-cover{position:relative;height:clamp(150px,26vw,250px);background:var(--surface-soft);overflow:hidden}
.profile-cover-img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
:root[data-theme="dark"] .profile-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,16,12,.15),rgba(25,16,12,.45));pointer-events:none}
.cover-edit{position:absolute;right:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;min-height:38px;border:0;border-radius:999px;
  background:rgba(255,253,250,.88);color:#5A3322;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(58,33,29,.18)}
.cover-edit[aria-disabled=true]{cursor:help}
.cover-edit svg{width:17px;height:17px}
.profile-identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:6px 18px;padding:12px 24px 0;position:relative}
.profile-avatar{position:relative;flex:none;width:max-content}
.profile-identity>.profile-avatar{margin-top:-84px}
.profile-avatar>.avatar{border:5px solid var(--surface);box-shadow:0 10px 26px rgba(58,33,29,.22);background-color:var(--plum)}
.profile-avatar.is-busy>.avatar{opacity:.55}
.avatar-edit{position:absolute;right:4px;bottom:6px;display:grid;place-items:center;width:38px;height:38px;border:3px solid var(--surface);border-radius:50%;
  background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(var(--deep-rgb),.3)}
.avatar-edit svg{width:18px;height:18px}
.profile-names{padding-bottom:6px;min-width:0}
.profile-name{font-size:clamp(1.55rem,3.2vw,2.15rem);margin:0;overflow-wrap:anywhere}
.profile-handle{margin:0 0 6px;color:var(--ink-2);font-weight:650}
.profile-names .chips{margin:0}
.role-chip{background:var(--burgundy);color:#fff}
.soft-chip{background:var(--blush);color:var(--ink)}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:10px;margin:0}
.profile-bio{margin:14px 24px 0;max-width:68ch;white-space:pre-wrap;line-height:1.6}
.stats-panel{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 24px 0;padding:0;border-radius:18px;background:var(--blush);border:1px solid var(--line);overflow:hidden}
.stats-panel li+li{border-left:1px solid var(--line)}
.stat-item{appearance:none;display:grid;justify-items:center;gap:2px;width:100%;padding:14px 6px;border:0;background:transparent;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}
.stat-item:hover{background:rgba(var(--accent-rgb),.08)}
.stat-value{font-family:var(--font-serif);font-size:1.45rem;font-weight:700;line-height:1.1}
.stat-label{font-size:.78rem;font-weight:750;color:var(--ink-2)}
.stats-note{margin:8px 24px 0}
.profile-tabs{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.profile-tab-panel{padding:18px}
.profile-section{padding:4px 0 18px}
.profile-section+.profile-section{border-top:1px solid var(--line);padding-top:16px}
.profile-section h2{font-size:1.2rem}
.overview-grid{display:grid}
.overview-pair{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);padding-top:16px}
.overview-pair .profile-section{padding-top:0;border:0}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;background:var(--blush);border:1px solid var(--line);color:var(--ink);font-size:.85rem;font-weight:700}
.empty-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px dashed var(--line);border-radius:16px;background:var(--bg)}
.empty-note strong{font-family:var(--font-serif);font-size:1rem}
.empty-note p{margin:2px 0 4px}
.empty-icon{font-size:1.5rem;line-height:1}
.settings-card{padding:0;overflow:hidden}
.settings-cover{height:130px}
.settings-body{padding:18px}
.settings-avatar>.avatar{border-width:3px}
input[readonly]{background:var(--bg);color:var(--ink-2)}
@media (max-width:720px){
  .profile-identity{grid-template-columns:1fr;justify-items:center;text-align:center;padding:0 16px}
  .profile-identity>.profile-avatar{margin-top:-70px}
  .profile-names .chips,.profile-actions{justify-content:center}
  .profile-bio{margin:12px 16px 0;text-align:center}
  .stats-panel{margin:16px 12px 0}
  .stats-note{margin:8px 16px 0;text-align:center}
  .overview-pair{grid-template-columns:1fr}
  .profile-tab-panel{padding:14px}
}
@media (max-width:420px){.stat-value{font-size:1.2rem}.stat-label{font-size:.72rem}}

/* ---------- find friends ---------- */
.people-list{display:grid;gap:4px;margin-top:8px}
.person-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px}
.person-row:hover{background:var(--bg)}
.person-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--ink);text-decoration:none}
.person-text{display:grid;gap:2px;min-width:0}
.person-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800}
.person-name .chip{font-size:.7rem;padding:2px 8px}
.person-bio{font-size:.86rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- boyfriend wall of fame ---------- */
.wall-banner{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 16px;border-radius:18px;text-decoration:none;color:var(--ink);
  background:linear-gradient(110deg,var(--blush),var(--surface-soft));border:1px solid var(--line)}
.wall-banner>span:nth-child(2){display:grid;flex:1;min-width:0}
.wall-banner strong{font-family:var(--font-serif);font-size:1.08rem}
.wall-banner-go{font-size:1.3rem;color:var(--accent)}
.wall-banner:hover{border-color:var(--accent)}
.wall-page{max-width:1100px;margin:0 auto}
.wall-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:22px;margin-bottom:14px;border-radius:24px;
  background:radial-gradient(circle at 90% 10%,rgba(var(--accent-rgb),.18),transparent 45%),linear-gradient(120deg,var(--blush),var(--surface-soft));border:1px solid var(--line)}
.wall-hero h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:0}
.wall-subtitle{margin:4px 0 0;font-family:var(--font-serif);font-style:italic;color:var(--burgundy);font-size:1.05rem}
:root[data-theme="dark"] .wall-subtitle{color:var(--warm-brown)}
.chip-toggle[aria-current=page]{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
a.chip-toggle{text-decoration:none;display:inline-flex;align-items:center}
.bf-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bf-grid-small{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.bf-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.bf-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.bf-art{display:block;aspect-ratio:4/5;background:var(--surface-soft);overflow:hidden}
.bf-art img{width:100%;height:100%;object-fit:cover;display:block}
.bf-placeholder{position:relative;width:100%;height:100%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 40%),linear-gradient(150deg,rgba(var(--accent-rgb),.55),var(--accent) 55%,var(--burgundy))}
.bf-placeholder-heart{position:absolute;top:12px;right:12px;color:rgba(255,255,255,.85)}
.bf-placeholder-heart svg{width:22px;height:22px;fill:currentColor}
.bf-placeholder-initial{font-family:var(--font-serif);font-size:3.4rem;font-weight:700;color:#fff;text-shadow:0 4px 18px rgba(58,33,29,.35)}
.bf-body{display:grid;gap:6px;padding:12px 14px 14px}
.bf-name{margin:0;font-size:1.12rem}
.bf-name a{color:var(--ink);text-decoration:none}
.bf-name a:hover{color:var(--accent)}
.bf-book{margin:0;font-size:.86rem}
.bf-book a{font-weight:750}
.bf-nominator{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-2);text-decoration:none}
.bf-nominator:hover{color:var(--accent)}
.bf-actions{display:flex;align-items:center;gap:6px;margin-top:4px}
.bf-like,.bf-comments{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:.86rem;font-weight:800;text-decoration:none;cursor:pointer}
.bf-like svg,.bf-comments svg{width:18px;height:18px}
.bf-like:hover,.bf-comments:hover{border-color:var(--accent);color:var(--accent)}
.bf-like.is-liked{color:#fff;background:var(--burgundy);border-color:var(--burgundy)}
.bf-like.is-liked svg{fill:currentColor}
.bf-like.btn{min-height:46px;padding:10px 20px;font-size:.95rem;color:var(--ink);background:var(--surface)}
.bf-like.btn.is-liked{color:#fff;background:var(--burgundy)}
.bf-like[disabled]{opacity:.6;cursor:progress}
.bf-detail{display:grid;gap:20px;grid-template-columns:minmax(0,300px) minmax(0,1fr);padding:18px}
.bf-detail-art{border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--surface-soft)}
.bf-detail-art img{width:100%;height:100%;object-fit:cover;display:block}
.bf-detail h1{font-size:clamp(1.7rem,4vw,2.3rem);margin:0}
.bf-description{white-space:pre-wrap;line-height:1.6}
.bf-photo-preview{display:grid;gap:8px;justify-items:start}
.bf-photo-preview img{max-width:220px;aspect-ratio:4/5;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
@media (max-width:640px){.bf-detail{grid-template-columns:1fr}.bf-detail-art{max-width:300px;width:100%;margin:0 auto}.bf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bf-body{padding:10px}}

/* ---------- post photo picker ---------- */
.photo-add{margin-top:2px}
.photo-field .photo-preview .row{gap:6px}

/* ---------- chats: messages, reactions and voice notes ---------- */
.msg{align-self:flex-start;display:grid;justify-items:start;gap:3px;max-width:min(80%,540px)}
.msg.mine{align-self:flex-end;justify-items:end}
.msg>.bubble{max-width:100%}
.msg-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.msg.mine .msg-tools{flex-direction:row-reverse}
.reaction-chips{display:flex;gap:4px;flex-wrap:wrap}
.reaction-chip{appearance:none;display:inline-flex;align-items:center;gap:3px;min-height:30px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.reaction-chip.mine{background:var(--blush);border-color:var(--accent)}
.react-wrap{position:relative}
.react-btn{appearance:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;opacity:.7}
.react-btn:hover,.react-btn:focus-visible,.react-btn[aria-expanded=true]{opacity:1;border-color:var(--line);background:var(--surface)}
.react-btn svg{width:17px;height:17px}
.react-picker{position:absolute;bottom:calc(100% + 4px);left:0;z-index:20;display:flex;gap:2px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-lift)}
.msg.mine .react-picker{left:auto;right:0}
.react-option{appearance:none;width:38px;height:38px;border:0;border-radius:50%;background:transparent;font-size:1.25rem;cursor:pointer}
.react-option:hover,.react-option:focus-visible{background:var(--blush);outline:none}
.mic-btn{width:46px;height:46px}
.mic-btn[disabled]{opacity:.45;cursor:not-allowed}
.recorder{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap;min-height:46px}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#D0342C;animation:rec-pulse 1.2s ease-in-out infinite}
@keyframes rec-pulse{50%{opacity:.35}}
.rec-time{font-weight:800;font-variant-numeric:tabular-nums;flex:1}
.voice-player{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:min(240px,100%)}
.recorder .voice-player{flex:1}
.vp-btn{appearance:none;flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer}
.vp-btn svg{width:16px;height:16px;fill:currentColor}
.bubble.mine .vp-btn{background:#fff;color:var(--plum-deep)}
.vp-range{flex:1;min-width:90px;min-height:0;padding:0;border:0;background:transparent;accent-color:var(--accent)}
.bubble.mine .vp-range{accent-color:#fff}
.vp-time{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.vp-error{flex-basis:100%;font-size:.78rem}
.vp-error:empty{display:none}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}}

/* ==========================================================================================
   Redesign: appearance tokens, mobile-first Home and post cards, cover galleries, Discover.
   ========================================================================================== */

/* ---------- appearance: palettes (light, then dark), density, text size ---------- */
:root{--nav-h:62px;--text-scale:1;--card-pad:16px;--feed-gap:12px;--grid-gap:14px;--card-radius:18px}
:root[data-density="compact"]{--card-pad:12px;--feed-gap:8px;--grid-gap:10px;--card-radius:14px}
:root[data-density="spacious"]{--card-pad:22px;--feed-gap:18px;--grid-gap:20px;--card-radius:22px}
:root[data-text="small"]{--text-scale:.92}
:root[data-text="large"]{--text-scale:1.12}
:root[data-text="larger"]{--text-scale:1.25}

:root[data-palette="lavender"]{
  --accent:#6E4FB0; --gold:#6E4FB0; --accent-ink:#FFFFFF; --accent-rgb:110,79,176; --deep-rgb:74,51,128;
  --plum-deep:#4A3380; --plum:#5B3F99; --warm-brown:#4A3380; --burgundy:#6B3A7A; --link:#5A3E99;
  --bg:#F8F5FC; --surface:#FEFDFF; --surface-soft:#ECE5F7; --blush:#F1EAF9; --line:#E2D9F0; --ink:#2A2238; --ink-2:#625A72}
:root[data-palette="sage"]{
  --accent:#3F7151; --gold:#3F7151; --accent-ink:#FFFFFF; --accent-rgb:63,113,81; --deep-rgb:44,81,57;
  --plum-deep:#2C5139; --plum:#3F6A4C; --warm-brown:#2C5139; --burgundy:#4A6538; --link:#33613F;
  --bg:#F5F8F3; --surface:#FDFEFC; --surface-soft:#E3EDE0; --blush:#EAF2E6; --line:#D8E3D4; --ink:#1F2A22; --ink-2:#56645A}
:root[data-palette="rose"]{
  --accent:#B03A5B; --gold:#B03A5B; --accent-ink:#FFFFFF; --accent-rgb:176,58,91; --deep-rgb:126,36,64;
  --plum-deep:#7E2440; --plum:#8E2C4A; --warm-brown:#7E2440; --burgundy:#8A2E4E; --link:#962E4C;
  --bg:#FFF6F7; --surface:#FFFDFD; --surface-soft:#F8E1E6; --blush:#FBE8EC; --line:#F0D6DC; --ink:#3A1F26; --ink-2:#775A61}
:root[data-palette="midnight"]{
  --accent:#2F5BB7; --gold:#2F5BB7; --accent-ink:#FFFFFF; --accent-rgb:47,91,183; --deep-rgb:30,58,117;
  --plum-deep:#1E3A75; --plum:#2B4B8F; --warm-brown:#1E3A75; --burgundy:#34427A; --link:#2A4F9E;
  --bg:#F4F6FB; --surface:#FDFEFF; --surface-soft:#E1E7F5; --blush:#E8EDF8; --line:#D7DEEC; --ink:#1A2134; --ink-2:#566078}
:root[data-palette="lavender"][data-theme="dark"]{
  --accent:#785BB6; --gold:#785BB6; --accent-rgb:120,91,182;
  --plum-deep:#4A3380; --plum:#5B3F99; --burgundy:#6B3A7A; --link:#C7B3F0; --warm-brown:#C7B3F0;
  --bg:#17141D; --surface:#221E2A; --surface-soft:#322B3F; --blush:#2A2335; --line:#40384F; --ink:#F6F2FC; --ink-2:#C9C0D8}
:root[data-palette="sage"][data-theme="dark"]{
  --accent:#477758; --gold:#477758; --accent-rgb:71,119,88;
  --plum-deep:#2C5139; --plum:#3F6A4C; --burgundy:#4A6538; --link:#A3D3B0; --warm-brown:#A3D3B0;
  --bg:#131814; --surface:#1C231E; --surface-soft:#29352C; --blush:#222C25; --line:#36443A; --ink:#EFF5EF; --ink-2:#BFCDC1}
:root[data-palette="rose"][data-theme="dark"]{
  --accent:#B34262; --gold:#B34262; --accent-rgb:179,66,98;
  --plum-deep:#7E2440; --plum:#8E2C4A; --burgundy:#A1395A; --link:#F4A9BC; --warm-brown:#F4A9BC;
  --bg:#1A1315; --surface:#261C1F; --surface-soft:#3A272D; --blush:#30212A; --line:#4A353B; --ink:#FFF3F5; --ink-2:#D8C1C7}
:root[data-palette="midnight"][data-theme="dark"]{
  --accent:#4068BD; --gold:#4068BD; --accent-rgb:64,104,189;
  --plum-deep:#1E3A75; --plum:#2B4B8F; --burgundy:#3E5394; --link:#A9C1F5; --warm-brown:#A9C1F5;
  --bg:#0F131C; --surface:#182030; --surface-soft:#233047; --blush:#1C2639; --line:#2F3D57; --ink:#EEF2FA; --ink-2:#BAC4D8}

/* ---------- header ---------- */
.top-avatar{display:inline-flex;border-radius:50%;text-decoration:none}
.top-avatar[aria-current=page]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
@media (max-width:899px){.layout{padding-top:12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}
@media (max-width:360px){.brand span{font-size:1rem}.brand img{width:auto;height:30px}#topActions{gap:6px}}

/* ---------- Home: one focused column ---------- */
.home-page{max-width:640px;margin:0 auto}
.composer-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow);
  padding:var(--card-pad);margin-bottom:var(--feed-gap)}
.composer-row{display:flex;align-items:center;gap:10px}
.composer-prompt{flex:1;min-width:0;display:block;padding:11px 16px;min-height:44px;border-radius:999px;background:var(--bg);border:1px solid var(--line);
  color:var(--ink-2);text-decoration:none;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer-quick{display:flex;gap:6px;margin:10px calc(var(--card-pad) * -1) 0;padding:0 var(--card-pad) 2px;overflow-x:auto;scrollbar-width:none}
.composer-quick::-webkit-scrollbar{display:none}
.quick-link{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;min-height:40px;border-radius:999px;color:var(--ink);
  text-decoration:none;font-size:.84rem;font-weight:750;background:var(--blush)}
.home-page .feed-panel{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
.home-page .feed-tabs{gap:6px;padding:2px 0 4px;border-bottom:0;scrollbar-width:none}
.home-page .feed-tabs::-webkit-scrollbar{display:none}
.home-page .feed-tab{min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.88rem}
.home-page .feed-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.home-page .feed-tab[aria-selected=true]::after{display:none}
.home-page .feed-panel-content{padding:10px 0 0}
.feed-list{gap:var(--feed-gap)}
.home-page .feed-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius)}

/* ---------- post cards ---------- */
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:var(--card-pad);
  box-shadow:0 1px 2px rgba(var(--deep-rgb),.05),0 6px 18px rgba(var(--deep-rgb),.05);min-width:0}
:root[data-theme="dark"] .post-card{box-shadow:none}
.post-head{display:flex;align-items:flex-start;gap:10px;min-width:0}
.post-avatar{flex:none;display:block;line-height:0;border-radius:50%}
.post-author{flex:1;min-width:0;padding-top:1px}
.post-author-line{display:flex;align-items:center;gap:6px;min-width:0}
.post-author-name{font-weight:800;color:var(--ink);text-decoration:none;font-size:.98rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.verified-label{flex:none;font-size:.7rem;padding:1px 7px;border-radius:999px;background:var(--blush)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;margin-top:1px;font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.post-handle{max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post-kind{display:inline-flex;align-items:center;margin-left:2px;padding:1px 8px;border-radius:999px;background:rgba(var(--accent-rgb),.12);
  color:var(--link);font-size:.7rem;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.post-head .menu-wrap{margin:-6px -8px 0 auto}
.post-copy{margin:10px 0 0;min-width:0}
.post-body{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:1rem;line-height:1.55}
.post-card.kind-question .post-body,.post-card.kind-poll .post-body{font-family:var(--font-serif);font-size:1.12rem;font-weight:700;line-height:1.4}
.post-card.kind-review .post-body{border-left:3px solid var(--accent);padding-left:12px}
.post-images{display:grid;gap:3px;margin-top:12px;border-radius:14px;overflow:hidden;background:var(--surface-soft)}
.post-images.count-2,.post-images.count-3,.post-images.count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.post-image{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface-soft)}
.post-images.count-1 .post-image{height:auto;max-height:min(70vh,540px)}
.post-images:not(.count-1) .post-image{aspect-ratio:1/1}
.post-images.count-3 .post-image:first-child{grid-row:span 2;aspect-ratio:auto}
.post-book-card{margin-top:12px}
.post-book-card .book.book-compact{grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 12px!important;
  border-radius:14px;background:var(--bg);box-shadow:none;transform:none}
.post-book-card .book-compact .cover{width:48px;height:72px;font-size:1.1rem;border-radius:6px}
.post-book-card .book-compact h3{font-size:.92rem;margin:0}
.post-book-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 12px;min-height:40px;border-radius:12px;background:var(--surface-soft);
  color:var(--link);font-weight:750;text-decoration:none;max-width:100%}
.post-actions{display:flex;align-items:center;gap:2px;margin:10px calc(var(--card-pad) * -.4) 0;padding-top:6px;border-top:1px solid var(--line)}
.post-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:8px 12px;
  border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;font-size:.86rem;font-weight:750;cursor:pointer}
.post-action:hover{background:rgba(var(--accent-rgb),.1);color:var(--link)}
.post-action svg{width:21px;height:21px}
.poll-option{border-radius:12px}
.poll-result.mine .poll-bar{background:rgba(var(--accent-rgb),.2)}
@media (max-width:420px){.post-action{padding:8px 9px}.post-handle{max-width:9em}}

/* ---------- book covers: shared tile and grid (grid or list, per Appearance) ---------- */
.book h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.book .by{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-grid{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:540px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:760px){.book-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.book-grid>.book.card{padding:10px}
.book-tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink);text-decoration:none;border-radius:14px}
.book-tile .cover{position:relative;font-size:2.2rem;border-radius:12px;box-shadow:0 8px 20px rgba(var(--deep-rgb),.18);transition:transform .2s ease,box-shadow .2s ease}
:root[data-theme="dark"] .book-tile .cover{box-shadow:0 8px 20px rgba(0,0,0,.35)}
.book-tile:hover .cover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(var(--deep-rgb),.22)}
.book-tile-text{display:grid;gap:1px;min-width:0}
.book-tile-title{font-family:var(--font-serif);font-weight:700;font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.book-tile-author{font-size:.8rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-tile-note{font-size:.76rem;font-weight:800;color:var(--link)}
.book-tile-meta{font-size:.72rem;color:var(--ink-2);line-height:1.35}
.book-rank{position:absolute;top:8px;left:8px;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;
  background:var(--plum-deep);color:#fff;font-size:.8rem;font-weight:850;box-shadow:0 2px 8px rgba(0,0,0,.25)}
:root[data-book-layout="list"] .book-grid{grid-template-columns:minmax(0,1fr);gap:calc(var(--grid-gap) * .7)}
:root[data-book-layout="list"] .book-grid>.book-tile{flex-direction:row;align-items:center;gap:14px;padding:8px;background:var(--surface);border:1px solid var(--line)}
:root[data-book-layout="list"] .book-grid>.book-tile .cover{flex:none;width:64px;font-size:1.3rem;border-radius:8px;box-shadow:none}
:root[data-book-layout="list"] .book-grid>.book-tile .book-rank{top:4px;left:4px;min-width:22px;height:22px;font-size:.7rem}
:root[data-book-layout="list"] .book-grid>.book-tile .book-tile-title{font-size:1rem}
:root[data-book-layout="list"] .book-grid>.book{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;align-items:center}
:root[data-book-layout="list"] .book-grid>.book .cover{grid-row:1 / span 4;width:64px;font-size:1.3rem;border-radius:8px}
:root[data-book-layout="list"] .book-grid>.book>*:not(.cover){grid-column:2;margin:0}

/* ---------- Discover ---------- */
.discover-page{max-width:1100px;margin:0 auto}
.discover-section{margin-top:26px}
.discover-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.discover-head h2{margin:0;font-size:1.25rem}
.discover-head p{margin:2px 0 0}
.botw{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr);gap:18px;align-items:center;padding:var(--card-pad);
  border-radius:calc(var(--card-radius) + 4px);background:linear-gradient(120deg,var(--blush),var(--surface-soft));border:1px solid var(--line);
  color:var(--ink);text-decoration:none}
.botw .cover{font-size:2.4rem;box-shadow:0 14px 30px rgba(var(--deep-rgb),.25)}
.botw-text{display:grid;gap:4px;min-width:0}
.botw .eyebrow{margin:0}
.botw-title{font-family:var(--font-serif);font-size:clamp(1.3rem,4vw,1.9rem);font-weight:700;line-height:1.15;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.botw-author{color:var(--ink-2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.botw-go{justify-self:start;margin-top:6px;padding:8px 16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.88rem}
.botw:hover .botw-go{background:var(--plum-deep);color:#fff}
.prompt-chips{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.prompt-chips li{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  font-weight:650;line-height:1.4}
.prompt-chips svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:1px}
.collection{padding:var(--card-pad);border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}
.collection+.collection{margin-top:var(--feed-gap)}
.collection h3{font-size:1.08rem;margin:0 0 2px}
.collection>p{margin:0 0 12px}
.collection .book-grid{margin-top:10px}
@media (max-width:420px){.botw{grid-template-columns:96px minmax(0,1fr);gap:14px}}

/* ---------- Appearance panel ---------- */
.appearance-panel{display:grid;gap:20px}
.ap-group{border:0;margin:0;padding:0;min-width:0}
.ap-group legend{font-weight:800;padding:0;margin-bottom:8px}
.ap-hint{margin:-4px 0 8px}
.ap-options{display:flex;flex-wrap:wrap;gap:8px}
.ap-choice{position:relative;display:inline-flex;margin:0;font-weight:700;cursor:pointer}
.ap-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ap-choice-face{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:.9rem}
.ap-choice:hover .ap-choice-face{border-color:var(--accent)}
.ap-choice input:checked+.ap-choice-face{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px var(--accent);color:var(--ink)}
.ap-choice input:focus-visible+.ap-choice-face{outline:3px solid var(--gold);outline-offset:2px}
.ap-swatch{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 0 1px rgba(0,0,0,.12)}
.ap-custom{display:inline-flex;align-items:center;gap:6px}
.ap-colour{width:48px;height:44px;padding:3px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.ap-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:var(--card-pad);border-radius:var(--card-radius);
  background:var(--bg);border:1px solid var(--line)}
.ap-preview-card{padding:var(--card-pad);border-radius:var(--card-radius);background:var(--surface);border:1px solid var(--line);min-width:0}
.ap-preview-card .btn{pointer-events:none}
.ap-preview-books{display:grid;grid-template-columns:repeat(3,34px);gap:6px}
.ap-preview-cover{aspect-ratio:2/3;border-radius:5px;background:linear-gradient(160deg,var(--plum),var(--plum-deep))}
.ap-preview-cover:nth-child(2){background:linear-gradient(160deg,var(--accent),var(--burgundy))}
.ap-preview-cover:nth-child(3){background:var(--surface-soft)}
.ap-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}
.ap-status{margin:0;flex:1 1 220px}
@media (max-width:520px){.ap-preview{grid-template-columns:1fr}.ap-preview-books{display:none}}

/* ==========================================================================================
   Reading Moments (Stories) — js/stories.js. Book-card shapes, not circles.
   ========================================================================================== */
.moment-card{position:relative;flex:0 0 118px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:172px;padding:10px;
  border-radius:12px 14px 14px 12px;overflow:hidden;text-decoration:none;scroll-snap-align:start;color:#3A211D;background:#FFF7F0;
  border:1px solid var(--line);box-shadow:inset 6px 0 0 rgba(0,0,0,.06),0 6px 16px rgba(var(--deep-rgb),.12);transition:transform .15s ease}
.moment-card:hover{transform:translateY(-2px)}
.moment-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.moment-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.moment-card.has-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.05) 30%,rgba(20,12,8,.78));z-index:1}
.moment-card.has-cover>*:not(.moment-cover){position:relative;z-index:2;color:#fff}
.moment-kind{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.8);
  color:#3A211D;font-size:.68rem;font-weight:800}
.moment-card.has-cover .moment-kind{color:#3A211D}
.moment-kind svg{width:13px;height:13px}
.moment-snippet{font-family:var(--font-serif);font-size:.86rem;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;overflow-wrap:anywhere}
.moment-foot{display:flex;align-items:center;gap:6px;min-width:0;font-size:.74rem;font-weight:800}
/* card styles: fixed colours, readable in every theme */
.style-paper{background:#FFF7F0;color:#3A211D}
.style-ink{background:#2A211D;color:#FFF7F0}
.style-terracotta{background:#B9531D;color:#FFFFFF}
.style-sage{background:#3F7151;color:#FFFFFF}
.style-midnight{background:#1E3A75;color:#FFFFFF}
.moment-card.style-ink,.moment-card.style-terracotta,.moment-card.style-sage,.moment-card.style-midnight{border-color:transparent}

/* viewer */
.moment-viewer{max-width:520px;margin:0 auto;display:grid;gap:12px}
.moment-page{position:relative;min-height:min(62vh,560px);display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:20px 24px 24px 20px;
  box-shadow:inset 10px 0 0 rgba(0,0,0,.05),0 14px 34px rgba(var(--deep-rgb),.18);overflow:hidden}
.moment-page.is-preview{min-height:240px}
.moment-page.turn-next{animation:moment-turn-next .38s ease both}
.moment-page.turn-prev{animation:moment-turn-prev .38s ease both}
@keyframes moment-turn-next{from{opacity:.2;transform:perspective(900px) rotateY(-18deg);transform-origin:left center}to{opacity:1;transform:none}}
@keyframes moment-turn-prev{from{opacity:.2;transform:perspective(900px) rotateY(18deg);transform-origin:right center}to{opacity:1;transform:none}}
.moment-page-head{display:flex;align-items:center;gap:10px}
.moment-page-head .menu-wrap{margin-left:auto}
.moment-page-head .menu-wrap>.icon-btn{color:inherit}
.moment-author{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.moment-author span{display:grid;min-width:0}
.moment-author strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moment-author small{opacity:.85;font-size:.78rem}
.moment-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.moment-text,.moment-question{font-family:var(--font-serif);font-size:clamp(1.3rem,5vw,1.7rem);font-weight:700;line-height:1.35;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center}
.moment-quote{margin:0;padding:0 0 0 16px;border-left:4px solid currentColor}
.moment-quote p{font-family:var(--font-serif);font-size:clamp(1.15rem,4.5vw,1.45rem);font-style:italic;line-height:1.45;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.moment-quote footer{margin-top:8px;font-size:.85rem;font-weight:700;opacity:.85}
.moment-note{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;opacity:.92}
.moment-book{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:rgba(255,255,255,.16);color:inherit;text-decoration:none;min-width:0}
.style-paper .moment-book{background:rgba(var(--deep-rgb),.07)}
.moment-book img,.moment-book-initial{flex:none;width:40px;height:60px;object-fit:cover;border-radius:5px;background:rgba(255,255,255,.3);display:grid;place-items:center;font-weight:800}
.moment-book span{display:grid;min-width:0}
.moment-book strong,.moment-book small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moment-progress .progress{height:12px;background:rgba(255,255,255,.3)}
.style-paper .moment-progress .progress{background:var(--surface-soft)}
.moment-progress .progress>span{background:currentColor}
.style-paper .moment-progress .progress>span{background:var(--accent)}
.moment-progress-label{margin:8px 0 0;font-weight:800}
.moment-photos{display:grid;gap:4px;border-radius:14px;overflow:hidden}
.moment-photos.count-2,.moment-photos.count-3,.moment-photos.count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.moment-photos img{display:block;width:100%;max-height:min(56vh,520px);object-fit:cover;background:rgba(0,0,0,.08)}
.moment-photos:not(.count-1) img{aspect-ratio:1/1}
.moment-photo-missing{padding:30px 10px;text-align:center;font-size:.85rem;opacity:.85}
.moment-poll{display:grid;gap:8px}
.moment-page .poll-option,.moment-page .poll-result{color:#3A211D;background:#FFFDFA}
.moment-page .poll-result .poll-bar{background:rgba(var(--accent-rgb),.22)}
.moment-page .poll-foot{color:inherit;opacity:.85}
.moment-pageno{margin:0;align-self:center;font-size:.78rem;font-weight:800;letter-spacing:.08em;opacity:.8}
.moment-nav{display:flex;justify-content:space-between;gap:8px}
.moment-panel{display:grid;gap:10px}
.moment-panel-title{font-size:1rem;margin:6px 0 0}
.moment-reactions{display:flex;justify-content:space-between;gap:4px}
.moment-react{appearance:none;flex:1;min-height:46px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:1.35rem;cursor:pointer}
.moment-react:hover:not([disabled]){border-color:var(--accent)}
.moment-react.is-mine{background:rgba(var(--accent-rgb),.14);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.moment-react[disabled]{opacity:.5;cursor:not-allowed}
.moment-thread{display:grid;gap:6px}
.moment-msg{justify-self:start;max-width:85%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--bg);border:1px solid var(--line)}
.moment-msg.mine{justify-self:end;border-radius:14px 14px 4px 14px;background:var(--plum-deep);color:#fff;border-color:transparent}
.moment-msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.moment-msg small{opacity:.8;font-size:.7rem}
.moment-reply-form{display:flex;gap:8px;align-items:flex-end}
.moment-reply-form textarea{min-height:46px;border-radius:16px}
.moment-reply-form .btn{flex:none}
.moment-owner-row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.moment-inline-label{display:grid;gap:4px;margin:0;font-size:.85rem;flex:1 1 180px}
.moment-inline-label select{min-height:40px;padding:7px 10px}
.moment-viewers,.moment-friends{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.moment-viewers li,.moment-friends li{display:flex;align-items:center;gap:10px;padding:6px 4px;min-width:0}
.moment-viewers a{font-weight:800;color:var(--ink);text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moment-viewer-react{font-size:1.1rem}
.moment-thread-card{padding:10px;border:1px solid var(--line);border-radius:14px;display:grid;gap:8px}
.moment-thread-who{display:flex;align-items:center;gap:8px;margin:0}
/* creator */
.moment-kinds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:10px}
.moment-kind-btn{appearance:none;display:grid;justify-items:center;gap:4px;min-height:60px;padding:8px 4px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.moment-kind-btn[aria-checked=true]{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px var(--accent)}
.moment-kind-btn svg{width:20px;height:20px}
.moment-styles{display:flex;flex-wrap:wrap;gap:6px}
.moment-style-btn{appearance:none;min-height:40px;padding:7px 14px;border-radius:999px;border:2px solid transparent;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.moment-style-btn.style-paper{border-color:var(--line)}
.moment-style-btn[aria-checked=true]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.moment-progress-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.label-like{display:block;font-weight:700;margin:12px 0 4px}
.moment-preview{max-width:520px;margin:14px auto 0}
.moment-archive{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.moment-archive .moment-card{flex:none}
@media (prefers-reduced-motion:reduce){.moment-page.turn-next,.moment-page.turn-prev{animation:none}.moment-card:hover{transform:none}}
@media (max-width:420px){.moment-kinds{grid-template-columns:repeat(3,minmax(0,1fr))}.moment-progress-fields{grid-template-columns:1fr 1fr}}

/* ==========================================================================================
   Master redesign: shared tokens, header, navigation, Home rows, story rings, sheets, search, Discover.
   ========================================================================================== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--dur:.18s;--r-sm:10px;--r-md:14px;--r-lg:20px;--shadow-soft:0 1px 2px rgba(var(--deep-rgb),.06),0 8px 22px rgba(var(--deep-rgb),.07)}
.sr-only{position:absolute!important}

/* header: logo, search, notifications, avatar (theme switch only where there is room) */
@media (max-width:899px){#themeToggle{display:none}}
.top{min-height:56px}
.top .icon-btn{border-color:transparent;background:transparent}
.top .icon-btn:hover,.top .icon-btn[aria-current=page]{background:rgba(var(--accent-rgb),.1)}

/* desktop side menu: primary destinations, then a quieter group */
.side a.nav-secondary{font-size:.86rem;color:var(--ink-2);padding-top:8px;padding-bottom:8px}
.side a.nav-secondary .ico svg{width:19px;height:19px}
.side a.nav-secondary:first-of-type,.side a:not(.nav-secondary)+a.nav-secondary{margin-top:10px;border-top:1px solid var(--line);border-radius:0 0 14px 14px;padding-top:14px}

/* section headings used by Home rows and Discover */
.section-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 10px}
.section-row-head h2{margin:0;font-size:1.12rem;letter-spacing:-.01em}
.section-sub{margin:-4px 2px 10px}
.text-button{appearance:none;border:0;background:none;padding:6px 4px;color:var(--link);font:inherit;font-size:.86rem;font-weight:800;cursor:pointer}

/* horizontal book shelf (Home "Trending Books"/"New on BookChat", Discover rows) */
.home-books{margin-bottom:18px}
.book-shelf{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.book-shelf::-webkit-scrollbar{display:none}
.book-shelf>.book-tile{flex:0 0 108px;scroll-snap-align:start}
@media (min-width:760px){.book-shelf>.book-tile{flex-basis:132px}}
.book-tile .cover{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.book-tile:active .cover{transform:scale(.97)}
@media (hover:hover){.book-tile:hover .cover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(var(--deep-rgb),.24)}}
.shelf-skeleton{flex:0 0 108px;aspect-ratio:2/3;border-radius:12px;background:linear-gradient(90deg,var(--line),var(--surface),var(--line));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@media (min-width:760px){.shelf-skeleton{flex-basis:132px}}

/* Reading Moments: story rings */
.stories{margin:0 0 16px}
.story-rail{list-style:none;margin:0;padding:4px 2px 6px;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.story-rail::-webkit-scrollbar{display:none}
.story-item{position:relative;flex:0 0 72px;display:grid;justify-items:center;gap:6px}
.story-ring{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;padding:3px;text-decoration:none;transition:transform var(--dur) var(--ease)}
.story-ring:active{transform:scale(.95)}
.story-ring>.avatar{width:100%!important;height:100%!important;border:3px solid var(--bg);font-size:1.3rem!important}
.story-ring.is-unseen{background:conic-gradient(from 200deg,var(--accent),rgba(var(--accent-rgb),.55),var(--accent),var(--plum-deep),var(--accent))}
.story-ring.is-seen{background:rgba(var(--accent-rgb),.28)}
.story-ring.is-own{background:var(--accent)}
.story-ring.is-empty{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.story-ring:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.story-plus{position:absolute;top:50px;left:50px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:2px solid var(--bg)}
.story-plus svg{width:14px;height:14px;stroke-width:2.6}
.story-label{max-width:76px;font-size:.74rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* story viewer: author's "Seen by" button and the viewers bottom sheet */
.moment-page{cursor:pointer;user-select:none;-webkit-user-select:none}
.moment-page input,.moment-page textarea{user-select:text}
.moment-seen{appearance:none;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:0;border-radius:999px;
  background:rgba(0,0,0,.18);color:inherit;font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.style-paper .moment-seen{background:rgba(var(--deep-rgb),.1)}
.moment-seen svg{width:18px;height:18px}
.sheet-shade{position:fixed;inset:0;z-index:80;background:rgba(15,10,8,.42);animation:fade-in var(--dur) ease both}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:81;max-height:72vh;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);
  border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);padding:6px 16px calc(16px + env(safe-area-inset-bottom));animation:sheet-up .24s var(--ease) both}
@media (min-width:640px){.sheet{left:50%;right:auto;width:520px;transform:translateX(-50%);animation-name:sheet-up-centered}}
.sheet.is-closing{animation:sheet-down .18s ease both}.sheet-shade.is-closing{animation:fade-out .18s ease both}
@media (min-width:640px){.sheet.is-closing{animation-name:sheet-down-centered}}
.sheet:focus{outline:none}
.sheet-grip{width:40px;height:5px;border-radius:999px;background:var(--line);margin:4px auto 8px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 8px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font-size:1.05rem}
.sheet-body{overflow-y:auto;padding-top:6px}
.sheet-empty{padding:18px 0;text-align:center}
.viewer-list{list-style:none;margin:0;padding:0;display:grid}
.viewer-list li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.viewer-list li:last-child{border-bottom:0}
.viewer-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--ink);text-decoration:none}
.viewer-text{display:grid;min-width:0}
.viewer-text strong,.viewer-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-text small{color:var(--ink-2)}
.viewer-react{font-size:1.25rem}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-down{to{transform:translateY(100%)}}
@keyframes sheet-up-centered{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@keyframes sheet-down-centered{to{transform:translate(-50%,100%)}}
@keyframes fade-in{from{opacity:0}}@keyframes fade-out{to{opacity:0}}
.thread-stack{display:grid;gap:10px}

/* search */
.search-page{max-width:640px}
.search-field-lg input{min-height:52px;font-size:1.02rem}
.search-entry{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 16px;margin:0 0 18px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-weight:650}
.search-entry svg{width:20px;height:20px}
.search-entry:hover{border-color:var(--accent);color:var(--ink)}
.search-section-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 4px}
.search-section-head h2,.search-section-title{margin:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.search-section-title{margin:14px 2px 4px}
.search-list{list-style:none;margin:0;padding:0;display:grid}
.search-row{display:flex;align-items:center;gap:6px;border-radius:var(--r-md)}
.search-row:hover{background:rgba(var(--accent-rgb),.06)}
.search-row-link{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:8px 6px;color:var(--ink);text-decoration:none;min-height:56px}
.search-row-text{display:grid;min-width:0}
.search-row-text strong,.search-row-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-row-text small{color:var(--ink-2)}
.search-thumb{flex:none;width:36px;height:54px;border-radius:6px;object-fit:cover;background:var(--surface-soft);display:grid;place-items:center;color:var(--accent)}
.search-thumb.is-portrait{width:44px;height:44px;border-radius:12px}
.search-thumb-initial svg{width:18px;height:18px}
.search-remove svg{width:16px;height:16px}
.search-hint{padding:24px 4px;text-align:center}
.search-loading{display:grid;gap:8px;padding-top:8px}

/* Discover */
.discover-page{max-width:1100px}
.discover-section{margin:0 0 26px}
.discover-sections .botw{margin-bottom:26px}
.genre-cloud{display:flex;flex-wrap:wrap;gap:8px}
.genre-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:750;transition:border-color var(--dur) var(--ease)}
.genre-chip:hover{border-color:var(--accent)}
.genre-count{font-size:.72rem;color:var(--ink-2);font-weight:800}
.people-shelf{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.people-shelf::-webkit-scrollbar{display:none}
.people-shelf-item{flex:0 0 84px;display:grid;justify-items:center;gap:6px;text-align:center;color:var(--ink);text-decoration:none}
.people-shelf-name{max-width:84px;font-size:.8rem;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.people-shelf-badge{font-size:.66rem;font-weight:800;color:var(--link)}
.portrait-shelf{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;scroll-snap-type:x proximity}
.portrait-shelf::-webkit-scrollbar{display:none}
.portrait-shelf>.bf-card{flex:0 0 168px;scroll-snap-align:start}
.wall-entry{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(110deg,var(--blush),var(--surface-soft));color:var(--ink);text-decoration:none}
.wall-entry-text{display:grid;flex:1;min-width:0}
.wall-entry-text strong{font-family:var(--font-serif);font-size:1.05rem}
.wall-entry-text small{color:var(--ink-2)}
.bf-art-note{display:block;margin-top:4px;font-size:.72rem;color:var(--ink-2)}

/* small consistency pass on the remaining screens */
.chat-row{min-height:64px}
.chat-row .avatar{box-shadow:0 0 0 2px var(--surface)}
.bubble{box-shadow:0 1px 1px rgba(0,0,0,.04)}
.thread-form{gap:10px}
.notif{min-height:64px}
.notif:hover{background:rgba(var(--accent-rgb),.06)}
.profile-hero{box-shadow:var(--shadow-soft)}
.auth-head h1{margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-shade,.sheet.is-closing,.sheet-shade.is-closing{animation:none}.book-tile .cover,.story-ring{transition:none}}
/* touch targets in the header are at least 44px; file pickers never overflow their column */
.brand{min-height:44px}
.top-avatar{display:inline-grid;place-items:center;min-width:44px;min-height:44px}
input[type=file]{max-width:100%}

/* ==========================================================================================
   BookChat 2026 redesign (reference: warm ivory, burnt orange #C65324, near-black ink).
   Overrides the default palette only; Lavender / Sage / Rose / Midnight / custom accents and dark mode still apply,
   because their selectors are more specific. Density and text-size settings are untouched.
   ========================================================================================== */
:root{
  --accent:#C65324; --gold:#C65324; --accent-rgb:198,83,36; --deep-rgb:96,44,20;
  --plum-deep:#8F3A17; --plum:#A6461D; --warm-brown:#8F3A17; --burgundy:#8F3A17; --link:#A3441C;
  --bg:#FCF8F3; --surface:#FFFFFF; --surface-soft:#F5EDE5; --blush:#FBF0E7; --line:#EEE4DA; --ink:#1E1915; --ink-2:#6E645C;
  --badge:#E0352B;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nav-h:60px;
}
:root[data-theme="dark"]{
  --bg:#141110; --surface:#1D1916; --surface-soft:#2A2420; --blush:#2A201B; --line:#352D28; --ink:#F6EFE8; --ink-2:#B9AEA5;
  --accent:#C65324; --gold:#C65324; --link:#F0A57F; --plum-deep:#8F3A17; --warm-brown:#F0A57F; --badge:#F0473C;
}
h1,h2,h3{font-family:var(--font);letter-spacing:-.01em;font-weight:700}
h1{font-size:1.55rem} h2{font-size:1.12rem} h3{font-size:1rem}
.btn{box-shadow:none;font-weight:700;min-height:44px}
.btn:hover{transform:none;filter:brightness(.95)}
.btn-outline{border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--accent);color:var(--link)}
.btn-tonal{background:rgba(var(--accent-rgb),.1);color:var(--link);border:1px solid rgba(var(--accent-rgb),.35)}
.card{box-shadow:none}
.back-link{margin:0 0 10px;font-size:.9rem}
.back-link a{text-decoration:none;font-weight:700}

/* ---------- header: wordmark, search, bell, create ---------- */
.top{background:var(--bg);border-bottom:1px solid var(--line);min-height:54px;padding-top:calc(env(safe-area-inset-top) + 6px);padding-bottom:6px}
@supports (backdrop-filter:blur(1px)){.top{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px)}}
.brand{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;letter-spacing:-.01em;gap:8px}
.brand img{height:28px}
.brand>span,.brand b{color:var(--accent)}
:root[data-theme="dark"] .brand>span,:root[data-theme="dark"] .brand b{color:#E07A4C}
.top .icon-btn{width:42px;height:42px;color:var(--ink)}
.top .icon-btn svg{width:23px;height:23px}
.top-create{display:inline-grid;place-items:center;width:34px;height:34px;margin:0 4px;border-radius:50%;background:var(--accent);color:#fff;text-decoration:none}
.top-create svg{width:20px;height:20px;stroke-width:2.4}
.top-create:hover{filter:brightness(.92)}
.badge{background:var(--badge);border-color:var(--bg)}
@media (max-width:899px){.top-avatar{display:none}.top-create{display:none}}

/* ---------- mobile tab bar ---------- */
.bottom{background:var(--surface);box-shadow:none;border-top:1px solid var(--line);align-items:center;padding-top:6px}
.bottom a{font-size:.66rem;font-weight:600;color:var(--ink-2);gap:3px;min-height:50px}
.bottom a .ico{position:relative;width:auto;height:26px;background:none!important}
.bottom a .ico svg{width:25px;height:25px}
.bottom a[aria-current=page]{color:var(--accent);font-weight:700}
.bottom a[aria-current=page] .ico{color:var(--accent)}
.bottom a[aria-current=page] .ico svg{stroke-width:2.2}
.bottom a.nav-create .ico{width:46px;height:36px;margin-top:0;border-radius:12px;border:0;box-shadow:none;background:var(--accent)!important;color:#fff}
.bottom a.nav-create .ico svg{width:22px;height:22px;stroke-width:2.4}
.bottom a.nav-create>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.bottom a.nav-create[aria-current=page] .ico{background:var(--plum-deep)!important}
.nav-badge{position:absolute;top:-5px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--badge);color:#fff;
  font-size:.66rem;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.side a .ico{position:relative}
.side a .nav-badge{top:-6px;right:-8px}
.side a[aria-current=page]{background:rgba(var(--accent-rgb),.12);color:var(--link)}

/* ---------- Home ---------- */
.home-page{max-width:620px}
.stories{margin:2px -2px 14px}
.story-item{flex-basis:70px}
.story-ring{width:68px;height:68px;padding:2.5px}
.story-ring.is-unseen{background:linear-gradient(140deg,#E8914F,var(--accent) 55%,#8F3A17)}
.story-ring.is-own{background:var(--line)}
.story-plus{top:47px;left:47px;width:22px;height:22px;background:var(--accent)}
.story-label{font-size:.72rem;font-weight:500;color:var(--ink-2)}
.home-books{margin-bottom:8px}
.section-row-head h2{font-size:1.06rem}
.join-card{padding:16px;margin:0 0 14px;border-radius:16px;background:var(--blush);border:1px solid var(--line)}
.join-card h2{margin:0 0 4px}
.join-card p{margin:0 0 12px}
.home-page .feed-tabs{gap:0;border-bottom:1px solid var(--line);padding:0}
.home-page .feed-tab{border:0;border-radius:0;background:none;min-height:44px;padding:10px 14px;font-weight:600;color:var(--ink-2)}
.home-page .feed-tab[aria-selected=true]{background:none;color:var(--ink)}
.home-page .feed-tab[aria-selected=true]::after{display:block;left:14px;right:14px;height:2px;background:var(--accent)}
.home-page .feed-panel-content{padding-top:0}

/* ---------- post cards: open layout separated by hairlines, not boxed cards ---------- */
.feed-list{gap:0}
.post-card{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:14px 0 6px}
.page-narrow>.post-card{border-bottom:0}
.post-repost-line{display:flex;align-items:center;gap:6px;margin:0 0 8px 50px;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.post-repost-line svg{width:15px;height:15px}
.post-head{align-items:center;gap:10px}
.post-author-line{gap:8px}
.post-author-name{font-weight:700;font-size:.95rem}
.post-time{flex:none;font-size:.8rem;color:var(--ink-2)}
.post-meta{font-size:.78rem}
.post-kind{background:none;padding:0;color:var(--link);font-weight:600;font-size:.76rem}
.verified-label{font-size:.68rem;font-weight:700;padding:1px 7px;background:rgba(var(--accent-rgb),.12);color:var(--link)}
.post-head .menu-wrap{margin:0 -8px 0 auto}
.post-copy{margin-top:8px}
.post-copy:empty{display:none}
.post-body{font-size:.98rem;line-height:1.55}
.post-card.kind-review .post-body{border-left:0;padding-left:0}
.post-images{margin-top:10px;border-radius:14px;gap:2px;background:var(--line)}
.post-image-btn{display:block;width:100%;padding:0;margin:0;border:0;background:var(--surface-soft);cursor:zoom-in;aspect-ratio:1/1;overflow:hidden}
.post-image-btn img,.post-images .post-image{display:block;width:100%;height:100%;max-height:none;object-fit:cover;aspect-ratio:auto}
.post-images.count-1 .post-image{height:100%;max-height:none}
.post-images.count-3 .post-image-btn:first-child{grid-row:span 2;aspect-ratio:auto}
.post-images+.post-copy{margin-top:10px}
.spoiler-body .post-image-btn{cursor:default}
.post-review{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start;margin-top:10px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.post-review-cover{display:block;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--surface-soft);box-shadow:0 6px 16px rgba(var(--deep-rgb),.18);text-decoration:none}
.post-review-cover img{display:block;width:100%;height:100%;object-fit:cover}
.post-review-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.post-review-title{font-family:var(--font-serif);font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--ink);text-decoration:none}
.post-review-title:hover{color:var(--link)}
.post-review-author{font-size:.82rem;color:var(--ink-2)}
.post-review-rating .stars{font-size:.95rem;color:var(--accent)}
.post-review-headline{font-size:.95rem;margin-top:4px}
.post-review-text .post-body{margin-top:4px;font-size:.94rem}
.post-book-card .book.book-compact{background:var(--surface);border:1px solid var(--line)}
.post-actions{border-top:0;margin:6px -10px 0;padding-top:0;gap:0}
.post-action{min-height:44px;min-width:44px;padding:8px 10px;color:var(--ink);font-weight:600;font-size:.84rem}
.post-action svg{width:23px;height:23px}
.post-action:hover{background:transparent;color:var(--link)}
.post-action.is-liked{color:var(--accent)}
.post-action.is-reposted{color:var(--ok)}

/* comments: sheet on feeds, inline on a post's page */
.comments-sheet{height:86vh;height:86dvh;max-height:none;padding-bottom:0}
.comments-sheet .sheet-head{justify-content:center;position:relative}
.comments-sheet .sheet-head h2{font-size:1rem}
.comments-sheet .sheet-close{position:absolute;right:0;top:-6px;border:0;background:none}
.comments-sheet .sheet-body{flex:1;min-height:0;padding-top:10px}
.comment-list{display:grid;gap:16px}
.comment-thread{display:grid;gap:8px}
.comment-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0;padding:0;background:none;border-radius:0}
.comment-item.is-reply{margin-left:42px}
.comment-main{min-width:0}
.comment-line{display:flex;align-items:baseline;gap:8px;margin:0}
.comment-author{font-weight:700;font-size:.86rem}
.comment-time{font-size:.76rem;color:var(--ink-2)}
.comment-body{margin:2px 0 0;font-size:.92rem;line-height:1.45}
.comment-mention{color:var(--link);font-weight:600}
.comment-reply{padding:4px 0;color:var(--ink-2);font-size:.78rem;font-weight:700;min-height:32px}
.comment-reply:hover{color:var(--link)}
.comment-toggle{appearance:none;display:flex;align-items:center;gap:10px;margin-left:42px;padding:2px 0;border:0;background:none;color:var(--ink-2);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;min-height:32px}
.comment-toggle-rule{width:24px;height:1px;background:var(--ink-2);opacity:.5}
.comment-replies{display:grid;gap:12px}
.comment-more{display:flex;justify-content:center;padding:14px 0 6px}
.comment-more:empty{display:none}
.comment-empty{text-align:center;padding:28px 0}
.comment-composer{border-top:1px solid var(--line);padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:var(--surface)}
.comment-composer-row{display:flex;align-items:center;gap:10px}
.comment-composer textarea{flex:1;min-height:42px;max-height:120px;padding:10px 14px;border:1px solid var(--line);border-radius:22px;background:var(--surface-soft);resize:none}
.comment-send{appearance:none;border:0;background:none;color:var(--accent);font:inherit;font-weight:700;padding:8px 6px;cursor:pointer;min-height:44px}
.comment-send:hover{color:var(--plum-deep)}
.reply-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;padding:4px 4px 4px 12px;border-radius:12px;background:var(--surface-soft);font-size:.82rem;color:var(--ink-2)}
.reply-chip .icon-btn{width:32px;height:32px;border:0;background:none}
.comment-signin{padding:12px 0;text-align:center}
.post-comments{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);display:block}
.post-comments-title{font-size:1rem;margin:0 0 12px}
.post-comments .comment-composer{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));margin-top:12px}
@media (min-width:900px){.post-comments .comment-composer{bottom:0}}

/* sheets: action list (Repost / Copy link / Share / Cancel) */
.sheet{background:var(--surface)}
.sheet-head{padding-bottom:10px}
.action-sheet .sheet-head{border-bottom:0}
.action-list{display:grid;padding-bottom:4px}
.action-item{appearance:none;display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:10px 4px;border:0;border-bottom:1px solid var(--line);
  background:none;color:var(--ink);font:inherit;font-size:.98rem;font-weight:500;text-align:left;cursor:pointer}
.action-item svg{width:22px;height:22px}
.action-item:hover{color:var(--link)}
.action-item.danger{color:var(--danger)}
.action-item.action-cancel{justify-content:center;margin-top:10px;border:1px solid var(--line);border-radius:14px;font-weight:700}
.action-note{margin:8px 4px 0}
html.has-sheet body{overflow:hidden}

/* full-size photo viewer */
.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
  background:rgba(12,9,8,.94);animation:fade-in .16s ease both}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.lightbox-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer}

/* ---------- book covers: designed fallback when there is no cover image ---------- */
.cover-fallback{display:flex;flex-direction:column;justify-content:center;gap:.6em;width:100%;height:100%;padding:14% 12%;text-align:center;
  background:linear-gradient(165deg,#4A3326,#2A1C14);color:#F6E9DC;font-size:12px;font-weight:400;
  box-shadow:inset 6px 0 0 rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.06)}
.cover-fallback>span{font-family:var(--font-serif);font-size:1.15em;font-weight:700;line-height:1.2;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.cover-fallback>small{font-size:.75em;letter-spacing:.12em;text-transform:uppercase;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail .cover-fallback,.botw .cover-fallback{font-size:16px}
.post-review-cover .cover-fallback{font-size:9px}
.book-tile .cover{border-radius:6px;box-shadow:0 6px 16px rgba(var(--deep-rgb),.16)}
.book-tile-title{font-size:.88rem}
.book-shelf>.book-tile{flex-basis:104px}
@media (min-width:760px){.book-shelf>.book-tile{flex-basis:128px}}
.book-rank{background:var(--accent)}

/* ---------- Discover ---------- */
.discover-page .search-entry{border-radius:12px;background:var(--surface-soft);border-color:transparent;min-height:46px;margin-bottom:10px}
.discover-page .feed-tabs{border-bottom:1px solid var(--line);padding:0;margin-bottom:16px;scrollbar-width:none}
.discover-page .feed-tab{font-weight:600;padding:10px 14px}
.discover-page .feed-tab[aria-selected=true]{color:var(--ink)}
.discover-page .feed-tab[aria-selected=true]::after{height:2px;left:14px;right:14px}
.review-stream{display:grid}
.review-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.review-card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.review-card-body{margin:4px 0 2px;font-size:.92rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.review-card-by{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none}
.botw{background:var(--surface);border:1px solid var(--line)}
.wall-entry{background:var(--surface);border-color:var(--line)}
.wall-entry>svg{width:20px;height:20px;color:var(--ink-2)}

/* ---------- Book Boyfriend Wall: editorial portraits ---------- */
.bf-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.bf-card:hover{transform:none;box-shadow:none}
.bf-art{position:relative;display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--surface-soft);text-decoration:none;
  box-shadow:0 8px 22px rgba(var(--deep-rgb),.14)}
.bf-art img{transition:transform .35s var(--ease)}
@media (hover:hover){.bf-art:hover img{transform:scale(1.03)}}
.bf-caption{position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;background:linear-gradient(180deg,transparent,rgba(16,10,7,.78));color:#fff}
.bf-caption-name{display:block;font-family:var(--font-serif);font-size:1.02rem;font-weight:700;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.35);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:
  radial-gradient(120% 80% at 50% 0%,rgba(var(--accent-rgb),.16),transparent 60%),linear-gradient(180deg,var(--surface-soft),var(--blush))}
.bf-placeholder-initial{font-family:var(--font-serif);font-size:3.2rem;font-weight:700;color:var(--accent);text-shadow:none;line-height:1}
.bf-placeholder-note{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.bf-card.no-art .bf-caption{background:none;color:var(--ink)}
.bf-card.no-art .bf-caption-name{text-shadow:none}
.bf-body{padding:8px 2px 0;gap:4px}
.bf-book{font-size:.8rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-book a{color:var(--ink);font-weight:600;text-decoration:none}
.bf-nominator{font-size:.76rem}
.bf-actions{margin-top:0;gap:2px}
.bf-like,.bf-comments{border:0;background:none;padding:6px 8px 6px 0;min-height:40px;color:var(--ink-2)}
.bf-like:hover,.bf-comments:hover{background:none}
.bf-like.is-liked{background:none;color:var(--accent)}
.bf-like.btn,.bf-like.btn.is-liked{border:1px solid var(--line);padding:10px 18px}
.bf-like.btn.is-liked{background:rgba(var(--accent-rgb),.1);color:var(--link)}
.portrait-shelf>.bf-card{flex:0 0 132px}
.portrait-shelf .bf-nominator,.portrait-shelf .bf-actions{display:none}
@media (min-width:760px){.portrait-shelf>.bf-card{flex-basis:160px}}
.bf-grid{gap:18px 14px}
.wall-hero{background:var(--surface);border-radius:18px}

/* ---------- Chats inbox ---------- */
.chats-page .page-head{margin-bottom:10px}
.chats-page .search-field input{border-radius:12px;background:var(--surface-soft);border-color:transparent;min-height:44px}
.chat-filters{display:flex;gap:8px;margin:0 0 6px;overflow-x:auto;scrollbar-width:none}
.chat-filter{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.chat-filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.chat-filter-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--badge);color:#fff;font-size:.68rem;font-weight:700}
.chat-filter[aria-pressed=true] .chat-filter-count{background:#fff;color:var(--accent)}
ul.chat-list{list-style:none;margin:0;padding:0}
.chat-row{gap:12px;padding:10px 4px;border-radius:12px}
.chat-row .avatar{box-shadow:none}
.chat-name{font-weight:600;font-size:.97rem}
.chat-row.unread .chat-name{font-weight:800}
.chat-preview{display:flex;align-items:center;gap:4px;font-size:.86rem}
.chat-voice{display:inline-flex;align-items:center;gap:4px}
.chat-voice svg{width:14px;height:14px}
.chat-meta{font-size:.74rem}
.chat-row.unread .chat-meta time{color:var(--accent);font-weight:700}
.count-pill{background:var(--badge);min-width:20px;height:20px;font-size:.7rem}
.chat-empty{text-align:center;padding:30px 0}
.chat-section{margin-top:22px}
.chat-section h2{font-size:.86rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin:0 4px 6px}

/* ---------- conversation ---------- */
.thread-wrap{max-width:760px;margin:0 auto}
.thread-page{border-radius:18px;height:calc(100vh - 110px);height:calc(100dvh - 110px);background:var(--surface)}
.thread-head{gap:8px;padding:8px 10px;background:var(--surface)}
.thread-back{border:0;background:none;color:var(--ink)}
.thread-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--ink);text-decoration:none}
.thread-who .grow{display:grid;min-width:0}
.thread-title{font-size:1rem;font-weight:700}
.thread-sub{font-size:.76rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-log{background:var(--bg);gap:4px;padding:14px 12px}
.msg{max-width:min(78%,520px)}
.bubble{border:0;border-radius:20px 20px 20px 6px;padding:9px 14px;background:var(--surface-soft);color:var(--ink);box-shadow:none}
.bubble.mine{border-radius:20px 20px 6px 20px;background:var(--accent);color:#fff}
.bubble-meta{font-size:.68rem;opacity:.75}
.bubble-name{color:var(--link);font-weight:700}
.bubble-reply{border-left-width:2px;border-radius:2px}
.bubble-media img{border-radius:14px;max-height:360px;object-fit:cover}
.msg .react-btn{opacity:0;width:28px;height:28px;transition:opacity var(--dur) ease}
.msg:hover .react-btn,.msg:focus-within .react-btn,.msg.is-active .react-btn,.msg .react-btn[aria-expanded=true]{opacity:1}
.reaction-chip{min-height:24px;padding:1px 7px;font-size:.76rem;border-color:var(--line);background:var(--surface)}
.reaction-chip.mine{border-color:var(--accent)}
.thread-form{align-items:flex-end;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.thread-form textarea{min-height:42px;padding:10px 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface-soft)}
.thread-form .mic-btn{width:42px;height:42px;border:0;background:none;color:var(--ink)}
.send-btn{width:42px;height:42px;min-height:42px;background:var(--accent)}
/* voice notes */
.voice-player{flex-wrap:nowrap;gap:10px;min-width:min(250px,100%)}
.vp-btn{width:34px;height:34px;background:var(--accent)}
.bubble.mine .vp-btn{background:#fff;color:var(--accent)}
.vp-track{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.vp-range{min-width:70px}
.vp-time{font-size:.72rem;white-space:nowrap}
.vp-speed{appearance:none;flex:none;min-width:38px;height:26px;padding:0 8px;border:0;border-radius:999px;background:rgba(var(--deep-rgb),.1);color:inherit;
  font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.bubble.mine .vp-speed{background:rgba(255,255,255,.22)}
.voice-player .vp-error{flex-basis:auto}
/* full screen on phones: the conversation replaces the header and tab bar */
@media (max-width:899px){
  :root[data-view="thread"] .top,:root[data-view="thread"] .bottom{display:none}
  :root[data-view="thread"] .layout{padding:0}
  :root[data-view="thread"] .thread-page{height:100vh;height:100dvh;min-height:0;border:0;border-radius:0}
  :root[data-view="thread"] .thread-head{padding-top:calc(8px + env(safe-area-inset-top))}
  :root[data-view="thread"] #toasts{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ---------- immersive story viewer ---------- */
:root[data-view="story"] body{background:#0E0B0A}
:root[data-view="story"] .top,:root[data-view="story"] .bottom,:root[data-view="story"] .side{display:none}
:root[data-view="story"] .layout{padding:0;display:block;max-width:none}
.story-stage{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:#0E0B0A;color:#fff;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.story-frame{position:relative;flex:1;min-height:0;width:100%;max-width:480px;margin:0 auto;padding:8px 8px 0}
.story-frame .moment-page{height:100%;min-height:0;border-radius:16px;padding:30px 16px 18px;overflow-y:auto;box-shadow:none}
.story-segments{position:absolute;z-index:3;top:16px;left:20px;right:20px;display:flex;gap:4px}
.story-segments span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4);box-shadow:0 0 0 .5px rgba(0,0,0,.15)}
.story-segments .is-done,.story-segments .is-current{background:#fff}
.story-close{display:grid;place-items:center;width:44px;height:44px;margin:-6px -8px 0 auto;border-radius:50%;color:inherit;text-decoration:none}
.story-close svg{width:24px;height:24px}
.moment-page-head .menu-wrap+.story-close{margin-left:0}
.story-arrows{display:none}
@media (min-width:700px){
  .story-arrows{display:block}
  .story-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
    background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
  .story-arrow:hover{background:rgba(255,255,255,.28)}
  .story-arrow.prev{left:-56px}.story-arrow.next{right:-56px}
}
.story-bottom{width:100%;max-width:480px;margin:0 auto;display:grid;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
.story-bottom.is-own{display:flex;justify-content:center;gap:10px}
.story-pill{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.story-pill svg{width:18px;height:18px}
.story-reply-form{display:flex;align-items:center;gap:8px}
.story-reply-form input{flex:1;min-height:44px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:transparent;color:#fff}
.story-reply-form input::placeholder{color:rgba(255,255,255,.7)}
.story-reply-form input:focus{border-color:#fff}
.story-send{appearance:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer}
.story-bottom .moment-reactions{justify-content:space-between;gap:6px}
.story-bottom .moment-react{min-height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.08);font-size:1.25rem}
.story-bottom .moment-react.is-mine{background:rgba(var(--accent-rgb),.45);box-shadow:inset 0 0 0 1px #fff}
.story-bottom .field-msg{color:rgba(255,255,255,.85);margin:0;min-height:0}
.story-bottom .field-msg.bad{color:#FFB4A8}
.story-thread-btn{appearance:none;justify-self:center;border:0;background:none;color:rgba(255,255,255,.85);font:inherit;font-size:.82rem;font-weight:600;text-decoration:underline;cursor:pointer;min-height:36px}
.story-ended{margin:0;text-align:center;color:rgba(255,255,255,.75)}
:root[data-view="story"] .inline-panel{position:relative;z-index:41;max-width:480px;margin:8px auto;background:var(--surface);color:var(--ink)}
.sheet .moment-panel{border:0;padding:0;background:none}

/* ---------- profile ---------- */
.profile-hero{border:0;border-radius:0;background:transparent;box-shadow:none;padding-bottom:6px;overflow:visible}
.profile-cover{height:clamp(140px,30vw,230px);border-radius:16px}
.cover-edit{right:10px;bottom:10px;min-height:36px;padding:6px 12px;background:rgba(255,255,255,.9);color:#2A1C14;font-weight:700}
.profile-identity{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 4px;grid-template-columns:none}
.profile-identity>.profile-avatar{margin-top:-52px}
.profile-avatar>.avatar{width:104px!important;height:104px!important;border-width:4px;box-shadow:none}
.profile-corner{display:flex;align-items:center;gap:4px;padding-bottom:4px}
.profile-names{padding:10px 4px 0}
.profile-name{display:flex;align-items:center;gap:8px;font-size:1.4rem}
.profile-handle{margin:0;color:var(--ink-2);font-weight:500;font-size:.9rem}
.profile-kind{color:var(--ink-2)}
.stats-panel{display:flex;gap:28px;margin:12px 4px 0;background:none;border:0;border-radius:0;overflow:visible}
.stats-panel li+li{border:0}
.stat-item{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:0;background:none;min-height:44px;justify-content:center}
.stat-item:hover{background:none;color:var(--link)}
.stat-value{font-family:var(--font);font-size:1.12rem;font-weight:700}
.stat-label{font-size:.78rem;font-weight:500}
.stats-note{margin:6px 4px 0;text-align:left}
.profile-bio{margin:12px 4px 0;text-align:left;font-size:.95rem}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 4px 0;padding:0}
.profile-actions .btn{width:100%}
.profile-tabs{border:0;border-radius:0;background:transparent;box-shadow:none;margin-top:18px}
.profile-tabs .feed-tabs{border-bottom:1px solid var(--line);padding:0}
.profile-tab-panel{padding:14px 0}
@media (max-width:720px){
  .profile-identity{display:flex;padding:0 2px;text-align:left}
  .profile-identity>.profile-avatar{margin-top:-46px}
  .profile-avatar>.avatar{width:92px!important;height:92px!important}
  .profile-bio,.stats-note{text-align:left;margin-left:2px}
  .stats-panel{margin-left:2px}
}

/* ---------- settings ---------- */
.settings-group{margin-bottom:18px}
.settings-group h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);margin:0 6px 6px}
.settings-list{list-style:none;margin:0;padding:0;border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.settings-list>li+li{border-top:1px solid var(--line)}
.settings-row{appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:0;border-radius:0;background:none;color:var(--ink);
  font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
a.settings-row:hover,button.settings-row:hover{background:rgba(var(--accent-rgb),.05)}
.settings-row.is-static{cursor:default}
.settings-row>svg{width:18px;height:18px;color:var(--ink-2);flex:none}
.settings-row.danger{color:var(--danger)}
.settings-row .ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.settings-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.settings-ico svg,.settings-row .ico svg{width:19px;height:19px}
.settings-text{display:grid;gap:1px;flex:1;min-width:0}
.settings-text strong{font-weight:600;font-size:.95rem}
.settings-text small{color:var(--ink-2);font-size:.8rem;font-weight:400;line-height:1.35}

/* ---------- notifications & search ---------- */
.list-surface{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px}
.notif{border-radius:12px}
.notif.unread{background:rgba(var(--accent-rgb),.07)}
.search-page .search-field-lg input{border-radius:14px;background:var(--surface-soft);border-color:transparent}
.search-page .search-field-lg input:focus{border-color:var(--accent);background:var(--surface)}
.search-suggest{margin:4px 0 14px}
.search-suggest:empty{display:none}

/* ---------- desktop: a centred column beside the side menu, not a stretched phone ---------- */
@media (min-width:900px){
  .layout{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .side a{font-size:.95rem}
  .post-card{padding:18px 0 8px}
}
@media (prefers-reduced-motion:reduce){.lightbox{animation:none}.bf-art img{transition:none}}

/* ==========================================================================================
   Round 2: verification mark, book clubs, favourite authors, notification settings.
   ========================================================================================== */
/* Verification: an open book with a check, in the reader's accent. Dark mode uses the lighter link tone for contrast;
   custom themes follow their accent through the same variables. */
.verified-badge{display:inline-flex;align-items:center;flex:none;vertical-align:-.12em;margin-left:4px;color:var(--accent);line-height:0}
:root[data-theme="dark"] .verified-badge{color:var(--link);--verified-ink:#1D1916}
.badge-slot{display:inline-flex}
.badge-slot:empty{display:none}
.post-count{min-width:1ch}

/* book clubs */
.group-cards{list-style:none;margin:8px 0 0;padding:0;display:grid}
.group-card{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.group-card-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--ink);text-decoration:none}
.group-card-text{display:grid;gap:2px;min-width:0}
.group-card-text strong{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-desc{font-size:.84rem;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.group-meta{color:var(--ink-2);font-size:.78rem}
.group-vis{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--ok)}
.group-vis.is-private{color:var(--link)}
.group-vis svg{width:12px;height:12px}
.group-card-action{flex:none}
.group-state{display:inline-block;padding:7px 12px;border-radius:999px;background:var(--surface-soft);font-size:.82rem;font-weight:700;color:var(--ink)}
.group-state.is-muted{color:var(--ink-2)}
.group-hero{display:grid;justify-items:center;text-align:center;gap:8px;padding:8px 0 18px;border-bottom:1px solid var(--line)}
.group-hero h1{margin:6px 0 0;font-family:var(--font-serif)}
.group-hero .avatar{border-radius:20px}
.group-hero-action{display:flex;gap:8px;justify-content:center;margin-top:6px}
.group-about{white-space:pre-wrap;margin:0;max-width:60ch}
.group-section{padding:16px 0;border-bottom:1px solid var(--line)}
.group-section h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin:0 0 8px}
.group-leave{margin-top:18px;text-align:center}
.danger-text{color:var(--danger)}
.member-list{list-style:none;margin:0;padding:0;display:grid}
.member-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.member-row:last-child{border-bottom:0}
.member-row .grow{display:grid;min-width:0}
.member-name{color:var(--ink);text-decoration:none}
.member-row .icon-btn{width:36px;height:36px;border:0;background:none}
.icon-btn.flip svg{transform:rotate(180deg)}
.vis-choice{display:grid;gap:8px;margin:4px 0 6px}
.vis-option{appearance:none;display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.vis-option[aria-checked=true]{border-color:var(--accent);background:rgba(var(--accent-rgb),.07);box-shadow:inset 0 0 0 1px var(--accent)}
.vis-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--surface-soft);color:var(--accent)}
.vis-icon svg{width:18px;height:18px}
.vis-text{display:grid;gap:2px}
.vis-text small{color:var(--ink-2);font-size:.8rem;line-height:1.4}
.group-img-preview img{display:block;width:96px;height:96px;object-fit:cover;border-radius:18px;margin-top:8px}
.chat-section .wall-entry+.wall-entry{margin-top:8px}

/* favourite authors */
.fav-authors{margin:18px 0 0;padding:0 2px}
.author-rail{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.author-rail::-webkit-scrollbar{display:none}
.author-chip{flex:0 0 72px;display:grid;justify-items:center;gap:6px;text-align:center;color:var(--ink);text-decoration:none;scroll-snap-align:start}
.author-chip .avatar,.author-chip-photo{width:60px!important;height:60px!important;border-radius:50%}
.author-chip-photo{display:grid;place-items:center;background:var(--surface-soft);color:var(--ink-2);font-weight:700;font-size:1.3rem}
.author-chip.is-add .author-chip-photo{border:1.5px dashed var(--line);background:none;color:var(--accent)}
.author-chip-photo svg{width:22px;height:22px}
.author-chip-name{display:flex;align-items:center;justify-content:center;max-width:76px;font-size:.76rem;font-weight:600;line-height:1.25}
.author-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.author-chip:hover .author-chip-name{color:var(--link)}
.author-grid{display:grid;gap:18px 10px;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.author-grid .author-chip{flex:none}
.fav-hint{margin:2px 2px 0}

/* notification settings */
.settings-list label.settings-row{margin:0;cursor:pointer}
.settings-row .btn{flex:none}
.settings-note{padding:12px 14px;border:1px dashed var(--line);border-radius:14px}
.switch{appearance:none;flex:none;position:relative;width:46px;height:28px;margin:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background var(--dur) ease}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur) ease}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(18px)}
.switch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.switch[disabled]{opacity:.6;cursor:progress}

/* visitors on Home */
.feed-signin{background:var(--blush);border:1px solid var(--line);border-radius:16px;margin-top:12px}

/* ==========================================================================================
   Compact chat bubbles: time on the last line of text, no hidden row under each message,
   tighter padding, grouped consecutive messages. Colours still come from the theme tokens.
   ========================================================================================== */
.thread-log{gap:6px;padding:12px 10px}
.msg{position:relative;gap:2px;max-width:min(78%,480px)}
.msg.is-cont{margin-top:-4px}
.bubble{display:block;position:relative;padding:6px 10px 6px 11px;border-radius:16px 16px 16px 5px;font-size:.94rem;line-height:1.36;max-width:100%}
.bubble.mine{border-radius:16px 16px 5px 16px}
.msg.is-cont:not(.mine) .bubble{border-top-left-radius:5px}
.msg.is-cont.mine .bubble{border-top-right-radius:5px}
.bubble-name,.bubble-pin{display:block;margin:0 0 1px;font-size:.74rem;line-height:1.3}
.bubble-reply{display:block;margin:0 0 4px;padding:3px 8px;font-size:.78rem;line-height:1.3;border-radius:4px;background:rgba(0,0,0,.05);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bubble.mine .bubble-reply{background:rgba(255,255,255,.16)}
.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere}
.bubble-meta{display:block;text-align:right;margin-top:2px;font-size:.66rem;line-height:1.2;opacity:.72;white-space:nowrap}
/* inline time: the spacer reserves the time's width at the end of the text; the time sits over it */
.bubble-spacer{display:inline-block;visibility:hidden;padding-left:10px;font-size:.66rem;line-height:1;white-space:nowrap}
.bubble.inline-meta .bubble-meta{position:absolute;right:10px;bottom:6px;margin:0}
.bubble-media img{max-height:300px;border-radius:12px}
.bubble .voice-player{min-width:min(220px,100%)}
/* the reaction button sits beside the bubble instead of taking a row under it */
.msg-tools{min-height:0}
.msg .react-wrap{position:absolute;top:2px}
.msg:not(.mine) .react-wrap{left:100%;margin-left:4px}
.msg.mine .react-wrap{right:100%;margin-right:4px}
.reaction-chips:empty{display:none}
.reaction-chip{min-height:22px;padding:0 7px;font-size:.74rem}
@media (max-width:420px){.msg{max-width:80%}.bubble{font-size:.93rem}}

/* ==========================================================================================
   Creation: Create tiles, book cover picker, photo-first story editor, upload progress.
   ========================================================================================== */
.create-page .page-head{margin-bottom:12px}
.create-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.create-tile{appearance:none;display:grid;justify-items:center;align-content:center;gap:4px;min-height:112px;padding:14px 8px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;text-align:center;text-decoration:none;cursor:pointer;transition:border-color var(--dur) ease,transform var(--dur) ease}
.create-tile:hover{border-color:var(--accent)}
.create-tile:active{transform:scale(.98)}
.create-tile strong{font-size:.95rem}
.create-tile small{font-size:.74rem;color:var(--ink-2);line-height:1.3}
.create-tile-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(var(--accent-rgb),.12);color:var(--accent);margin-bottom:2px}
.create-tile-ico svg{width:22px;height:22px}
.create-more-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);margin:22px 2px 8px}
.create-page .create-option{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
@media (max-width:360px){.create-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* book cover picker: a 2:3 tap target that becomes the exact preview of the saved cover */
.cover-picker{margin:4px 0 14px}
.cover-picker-main{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cover-pick{appearance:none;flex:none;width:132px;aspect-ratio:2/3;padding:0;border:1.5px dashed var(--line);border-radius:10px;background:var(--surface-soft);
  color:var(--ink-2);cursor:pointer;overflow:hidden;font:inherit}
.cover-pick:hover,.cover-pick:focus-visible{border-color:var(--accent);color:var(--accent)}
.cover-pick img{display:block;width:100%;height:100%;object-fit:cover}
.cover-pick-empty{display:grid;justify-items:center;gap:4px;padding:10px;text-align:center}
.cover-pick-empty svg{width:28px;height:28px}
.cover-pick-empty strong{font-size:.86rem;color:var(--ink)}
.cover-pick-empty small{font-size:.72rem}
.cover-picker-side{display:grid;gap:8px;flex:1;min-width:180px}
.cover-modes{gap:6px}
.cover-rights{font-weight:500;font-size:.84rem;line-height:1.4;align-items:flex-start}
.cover-rights input{margin-top:2px}
.upload-progress{height:6px;border-radius:999px;background:var(--surface-soft);overflow:hidden}
.upload-progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}
.detail-cover{display:grid;gap:8px;justify-items:center;align-content:start}
.cover-change{justify-self:center}
.cover-sheet{display:grid;gap:10px}

/* photo-first story editor: the photo leads, controls sit underneath */
.moment-create:has(.story-photo-panel){display:flex;flex-direction:column}
.moment-create:has(.story-photo-panel) .moment-preview{order:-1;margin:0 0 12px}
.moment-create:has(.story-photo-panel) .moment-preview>.label-like{display:none}
.moment-create:has(.story-photo-panel) .moment-page.is-preview{min-height:min(58vh,540px);padding:10px;background:#0E0B0A;color:#fff;border-radius:18px;
  justify-content:center;box-shadow:none}
.moment-create:has(.story-photo-panel) .moment-photos img{max-height:min(54vh,520px);object-fit:contain;background:#0E0B0A}
.story-photo-panel{display:grid;gap:10px}
.story-thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.story-thumbs:empty{display:none}
.story-thumb{position:relative;flex:none;width:64px;height:84px;border-radius:10px;overflow:hidden;background:var(--surface-soft)}
.story-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.story-thumb-remove{appearance:none;position:absolute;top:3px;right:3px;display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.story-thumb-remove svg{width:14px;height:14px}
.story-pick-row{gap:8px}

/* ==========================================================================================
   Members-only: visitors see only the welcome and sign-in screens (no header, tabs or side menu).
   ========================================================================================== */
:root[data-view="welcome"] .top,:root[data-view="welcome"] .bottom,:root[data-view="welcome"] .side,:root[data-view="welcome"] .skip{display:none}
:root[data-view="welcome"] .layout{display:block;max-width:none;padding:0}
:root[data-view="welcome"] #toasts{bottom:24px}
.welcome-page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--accent-rgb),.10),transparent 60%),var(--bg)}
.welcome-card{width:100%;max-width:420px;display:grid;justify-items:center;text-align:center;gap:10px}
.welcome-mark{width:96px;height:auto}
.welcome-word{margin:4px 0 0;font-family:var(--font-serif);font-size:clamp(2.2rem,9vw,2.8rem);letter-spacing:-.01em;color:#8B351B}
.welcome-word b{color:var(--accent)}
:root[data-theme="dark"] .welcome-word{color:#FFF7F0}
:root[data-theme="dark"] .welcome-word b{color:#E07A4C}
.welcome-lead{margin:0;font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--ink)}
.welcome-sub{margin:0 0 8px;max-width:34ch;color:var(--ink-2);line-height:1.55}
.welcome-actions{display:grid;gap:10px;width:100%;margin-top:6px}
.welcome-actions .btn{width:100%;min-height:50px;font-size:1rem}
.welcome-note{margin:10px 0 0;font-size:.8rem;color:var(--ink-2)}
.auth-page{min-height:100vh;min-height:100dvh;display:grid;align-content:center;gap:10px;max-width:480px;margin:0 auto;
  padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}
.auth-back{justify-self:start;font-weight:700;text-decoration:none;color:var(--link)}
.auth-card{width:100%}
:root[data-view="page"] .auth-page{min-height:0}