@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..700&family=DM+Sans:wght@300..700&family=Fira+Mono:wght@400;500&display=swap");
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F4F1E8;--bg2:#EAE6D8;--surface:#FFFFFF;--surface2:#F9F7F1;
  --green:#2D6A35;--green-h:#1E4F26;--green-tint:rgba(45,106,53,.09);--green-ring:rgba(45,106,53,.22);
  --green2:#3D8247;--green2-tint:rgba(61,130,71,.1);
  --moss:#5A7A3A;--moss-tint:rgba(90,122,58,.1);
  --amber:#7A5C1E;--amber-tint:rgba(122,92,30,.1);
  --rust:#8B3A2A;--rust-tint:rgba(139,58,42,.08);
  --text:#12190F;--text2:#1E2E1A;--text3:#4A5E42;--text4:#5E7156;--text4-dark:#8A9E82;
  --line:#D4CFC0;--line2:#BFB9A8;
  --ok:#166534;--ok-bg:rgba(22,101,52,.08);
  --err:#B91C1C;--err-bg:rgba(185,28,28,.08);
  --font-d:"Fraunces",serif;--font-b:"DM Sans",sans-serif;
  --font-m:"Fira Mono",monospace;--font-s:"Fraunces",serif;
  --e1:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --e2:0 4px 14px rgba(0,0,0,.09),0 2px 4px rgba(0,0,0,.05);
  --e3:0 12px 36px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.06);
  --ease:cubic-bezier(.22,1,.36,1);
  /* alias vars for backwards compat */
  --border:var(--line);--border2:var(--line2);
  --shadow-sm:var(--e1);
  --red:#B91C1C;--red-bg:rgba(185,28,28,.08);
  --green-bg:rgba(45,106,53,.08);
  --orange:var(--green);--orange-h:var(--green-h);
  --orange-tint:var(--green-tint);--orange-ring:var(--green-ring);
  --orange-light:rgba(45,106,53,.06);
  --amber-tint:rgba(122,92,30,.1);
}
html{font-size:16px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-b);background:var(--bg);color:var(--text2);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;max-width:100vw}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
input,textarea,select,button{font-family:var(--font-b)}

/* NAV */
.mnav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:var(--e1)}
.mnav-inner{display:flex;align-items:center;gap:8px;padding:0 32px;height:62px;width:100%}
.mlogo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-icon{display:flex;align-items:flex-end;gap:2px;height:22px}
.logo-leaf{width:5px;background:var(--green);border-radius:2px 2px 0 0;flex-shrink:0}
.logo-word{font-family:var(--font-d);font-size:19px;font-weight:900;color:var(--text);letter-spacing:-.4px}
.logo-word em{font-style:italic;color:var(--green)}
.mnav-links{display:flex;gap:0;flex:1;justify-content:center;overflow:visible}
.nl{font-size:13px;color:var(--text3);padding:6px 10px;border-radius:7px;transition:.15s;font-family:var(--font-b);font-weight:500}
.nl:hover{color:var(--text);background:var(--bg2)}.nl.active{color:var(--green);background:var(--green-tint);font-weight:600}
.mnav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;justify-content:flex-end}
.nsearch{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1.5px solid var(--line);border-radius:8px;padding:5px 10px;width:160px;transition:.2s}
.nsearch:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.nsearch input{background:none;border:none;outline:none;color:var(--text);font-size:12.5px;width:100%}
.nsearch input::placeholder{color:var(--text4)}
.nav-user{position:relative}
.nu-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:11px;font-weight:700;flex-shrink:0;overflow:hidden;color:#fff}
.nu-name{font-size:12px;color:var(--text);padding:4px 8px 4px 5px;border-radius:8px;background:var(--surface2);border:1.5px solid var(--line);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;transition:.15s;font-weight:500}
.nu-name:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.nu-name:hover{background:var(--bg2);border-color:var(--line2)}
.nu-pts{font-size:9px;background:var(--green-tint);color:var(--green);padding:2px 7px;border-radius:8px;font-weight:700;font-family:var(--font-m)}
.nu-caret{font-size:8px;color:var(--text4);margin-left:1px}
.nu-drop{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:6px;min-width:190px;z-index:400;box-shadow:var(--e3)}
.nu-drop.open{display:flex;flex-direction:column}
.nu-sep{height:1px;background:var(--line);margin:4px 6px}
.nu-drop a,.nu-drop button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;font-size:13px;color:var(--text2);border-radius:7px;background:none;border:none;cursor:pointer;text-align:left;transition:.12s;text-decoration:none}
.nu-drop a:hover,.nu-drop button:hover{background:var(--bg2);color:var(--text)}
.btn-ghost-nav{font-size:13px;color:var(--text2);padding:6px 12px;border-radius:7px;border:1.5px solid var(--line);transition:.15s;font-weight:500}
.btn-ghost-nav:hover{border-color:var(--line2);color:var(--text)}
.btn-green-nav{background:var(--green);color:#fff;font-size:13px;padding:6px 12px;border-radius:7px;font-weight:600;transition:.15s}
.btn-green-nav:hover{background:var(--green-h)}
.nav-burger{display:none;background:none;border:none;color:var(--text);font-size:18px;cursor:pointer;padding:6px}

/* ANNOUNCE BAR */
.announce-bar{background:var(--green);padding:9px 40px;font-size:12px;font-weight:500;text-align:center;font-family:var(--font-m);letter-spacing:.3px;color:#fff}
.announce-bar a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:9px;font-family:var(--font-b);font-size:13.5px;font-weight:600;cursor:pointer;border:none;transition:.15s;letter-spacing:-.1px;text-decoration:none}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 4px rgba(45,106,53,.35)}.btn-primary:hover{background:var(--green-h);box-shadow:0 4px 14px rgba(45,106,53,.4)}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--line2)}.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--line)}.btn-ghost:hover{background:var(--bg2);border-color:var(--line2)}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{opacity:.9}
.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:7px}
.btn-full{width:100%;justify-content:center}
.hidden{display:none!important}
.author-filter-toolbar{display:flex;flex-direction:column;gap:12px}
.author-alpha-row{display:flex;gap:4px;flex-wrap:wrap}
.award-row{display:grid;grid-template-columns:minmax(0,1.8fr) 150px 110px auto;gap:10px;align-items:end;margin-top:10px}
.award-row .fg{margin:0}
.award-remove{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:8px;border:1.5px solid var(--line);background:transparent;color:var(--text3);cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font-b);transition:.15s}
.award-remove:hover{border-color:var(--line2);color:var(--text)}
/* v3.25.0 - author page Awards and Recognition; mirrors book-award-card */
.ap-awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.ap-award-card{display:flex;flex-direction:column;padding:12px 14px 12px 18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,247,241,.98));border:1px solid rgba(212,207,192,.92);border-radius:10px;min-width:0;position:relative}
.ap-award-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:999px;background:rgba(180,178,169,.85)}
.ap-award-card.win::before{background:rgba(186,117,23,.7)}
.ap-award-badge{font-family:var(--font-m);font-size:9.5px;letter-spacing:1px;padding:2px 8px;border-radius:5px;background:#F1EFE8;color:#5F5E5A;white-space:nowrap}
.ap-award-badge.win{background:#FAEEDA;color:#854F0B}
/* v3.30.0 - reader signal band and award badges. No apostrophes anywhere in
   this file: CSS.php is a single-quoted PHP string and one would break it. */
/* v3.31.0 - card shell. The main column was a flat run of headings and text,
   which is why it read as a document rather than a set of community surfaces.
   No apostrophes in this file: it is a single-quoted PHP string. */
.bd-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--e1)}
.bd-card>.bd-sec-title,.bd-card summary .bd-sec-title{margin-top:0}
.bd-fold>summary{cursor:pointer;list-style:none;display:block;margin-bottom:10px}
.bd-fold>summary::-webkit-details-marker{display:none}
.bd-fold>summary::after{content:" \25BE";color:var(--text4);font-size:13px}
.bd-fold[open]>summary::after{content:" \25B4"}
.bd-fold>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.bd-card .bd-desc{margin-bottom:0}
.bd-card .bd-meta-grid{margin:0}
@media(max-width:640px){.bd-card{padding:18px 16px;border-radius:14px}}
/* v3.32.0 - star rating at exact fractions. Two stacked rows of five stars;
   the gold row is clipped to rating / 5, so any value renders truthfully.
   No apostrophes in this file: it is a single-quoted PHP string. */
.nr-stars{display:inline-block;vertical-align:middle;height:1em;width:5em}
.nr-stars .nrs-off{fill:var(--line2)}
.nr-stars .nrs-on{fill:#C8912B}
.nr-stars-sm{font-size:11px}
.nr-stars-md{font-size:15px}
.nr-stars-lg{font-size:22px}
.bd-hero .nr-stars .nrs-off,.bd-hero-rate .nr-stars .nrs-off{fill:rgba(255,255,255,.24)}
.bd-hero-rate .nr-stars .nrs-on{fill:#E8B84B}
.bd-hero-rate{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:5px}
.bd-hero-num{font-family:var(--font-d);font-size:21px;font-weight:700;color:#F2EEE1}
.bd-hero-meta{font-family:var(--font-m);font-size:12px;color:rgba(255,255,255,.6);margin-bottom:16px}
.bd-hero-meta a{color:rgba(255,255,255,.85)}
/* verdict card */
.bd-verdict{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.bd-vnum{text-align:center;min-width:112px}
.bd-vnum b{display:block;font-family:var(--font-d);font-size:2.5rem;font-weight:700;line-height:1;color:var(--text)}
.bd-vnum .nr-stars{margin:8px 0 5px;width:7.4em}
.bd-vask{flex:1;min-width:210px;display:flex;flex-direction:column;justify-content:center;gap:11px;align-items:flex-start;border-left:1px solid var(--line);padding-left:24px}
.bd-vask p{font-size:13.5px;color:var(--text3);font-family:var(--font-b);line-height:1.6;margin:0}
@media(max-width:620px){.bd-vask{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:16px}}
.bd-vnum span{font-family:var(--font-m);font-size:11px;color:var(--text4);display:block}
.bd-hist{flex:1;min-width:210px}
.bd-hrow{display:flex;align-items:center;gap:9px;margin-bottom:5px;font-family:var(--font-m);font-size:11px;color:var(--text4)}
.bd-hbarwrap{flex:1;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}
.bd-hbar{height:100%;background:#C8912B;border-radius:4px}
.bd-hrow em{font-style:normal;min-width:16px;text-align:right}
/* clamped description */
.bd-clamp{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
/* v3.38.0 — reading status row. Replaces the bordered card that spent about 130px
   of height on a four-way toggle sitting above About this book. */
.rs-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rs-lbl{font-family:var(--font-m);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text4);flex-shrink:0}
.rs-seg{display:flex;background:var(--surface2);border:1.5px solid var(--line);border-radius:22px;padding:3px;flex:1;min-width:280px}
.rs-seg-btn{flex:1;border:none;background:none;cursor:pointer;font-family:var(--font-b);font-size:13px;font-weight:500;color:var(--text3);padding:8px 6px;border-radius:19px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px;transition:.15s}
.rs-seg-btn:hover{color:var(--green)}
.rs-seg-btn.on{background:var(--green);color:#fff;box-shadow:var(--e1)}
.rs-seg-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.rs-seg-short{display:none}
.rs-thought-input{font-size:13px;resize:vertical;outline:none;background:var(--surface);color:var(--text)}
/* v3.38.1 - nothing in the status row may set the page width. Flex children default
   to min-width auto, so an intrinsically wide child (a textarea has one) pushes the
   row past the viewport instead of shrinking. */
#track{max-width:100%}
.rs-row{max-width:100%;min-width:0}
.rs-seg{min-width:0}
.rs-seg-btn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rs-meta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.rs-streak{font-family:var(--font-m);font-size:11.5px;color:var(--green);font-weight:500}
.rs-meta-link{background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-m);font-size:11.5px;color:var(--text3);white-space:nowrap}
.rs-meta-link:hover{color:var(--green)}

/* v3.38.0 — favourite lines carousel. Scroll-snap rather than a slider library:
   every quote stays in the DOM and therefore indexable, touch swipe is native,
   and the arrows only scroll the track. */
.q-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:4px;min-width:0;max-width:100%}
.q-track::-webkit-scrollbar{display:none}
.q-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:34px 30px 20px;position:relative;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.q-mark{position:absolute;top:2px;left:16px;font-family:var(--font-d);font-size:76px;line-height:1;color:var(--green);opacity:.16;pointer-events:none;user-select:none}
.q-text{font-family:var(--font-d);font-style:italic;font-weight:400;font-size:20px;line-height:1.6;color:var(--text);margin:0 0 16px;position:relative}
.q-foot{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-m);font-size:11px;color:var(--text4);gap:10px}
.q-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.q-dots{display:flex;gap:7px}
.q-dot{width:7px;height:7px;border-radius:50%;background:var(--line2);border:none;padding:0;cursor:pointer;transition:.2s}
.q-dot.on{background:var(--green);width:20px;border-radius:4px}
.q-arrows{display:flex;gap:8px}
.q-arrow{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;color:var(--text3);font-size:14px;display:flex;align-items:center;justify-content:center}
.q-arrow:hover{border-color:var(--green);color:var(--green)}
.bd-morebtn{margin-top:10px;background:none;border:none;color:var(--green);font-family:var(--font-b);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.bd-src{font-family:var(--font-m);font-size:10.5px;color:var(--text4);margin-top:10px}
/* member lists */
.bd-lists{display:flex;gap:9px;flex-wrap:wrap}
.bd-lst{border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;text-decoration:none;color:var(--text2)}
.bd-lst:hover{border-color:var(--green);color:var(--green)}
.bd-lst span{font-family:var(--font-m);font-size:10.5px;color:var(--text4)}
.bd-signal{display:flex;border:1px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.05);margin:14px 0 16px;max-width:520px}
.bd-sig{flex:1;padding:10px 6px;text-align:center;border-right:1px solid rgba(255,255,255,.13)}
.bd-sig:last-child{border-right:none}
.bd-sig b{display:block;font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:#F2EEE1;line-height:1.2}
.bd-sig span{font-family:var(--font-m);font-size:.58rem;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bd-signal-empty{font-family:var(--font-m);font-size:12px;color:rgba(255,255,255,.55);margin:12px 0 15px}
.bd-award-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.bd-awb{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--text2);border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 10px;line-height:1.35}
.bd-awb em{font-family:var(--font-m);font-style:normal;font-size:10.5px;font-weight:400;color:var(--text4)}
.bd-awb.win{color:var(--amber);border-color:var(--amber);background:var(--amber-tint)}
.bd-awb.more{cursor:pointer;color:var(--green);border-color:var(--green);background:var(--green-tint)}
.bd-editorial{border-left:3px solid var(--green);background:var(--green-tint);border-radius:0 10px 10px 0;padding:16px 18px;margin-bottom:22px}
.bd-ed-eyebrow{font-family:var(--font-m);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green);margin-bottom:7px}
.bd-ed-body{font-family:var(--font-d);font-size:16px;line-height:1.62;color:var(--text)}
.bd-ed-by{font-family:var(--font-m);font-size:11px;color:var(--text4);margin-top:10px}
.book-awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:20px}
.book-award-card{display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px 16px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,247,241,.98));border:1px solid rgba(212,207,192,.92);border-radius:10px;min-width:0;position:relative}
.book-award-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:999px;background:rgba(122,92,30,.3)}
.book-award-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.book-award-title{font-family:var(--font-b);font-size:14px;font-weight:700;color:var(--text);line-height:1.28;min-width:0;letter-spacing:-.1px;padding-left:4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.book-award-meta{font-size:11px;color:var(--text3);font-family:var(--font-m);letter-spacing:.15px;padding-left:4px}
.book-award-pill{font-family:var(--font-m);font-size:9px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(218,165,32,.11);color:#b8860b;letter-spacing:.55px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;line-height:1.1}

/* DARK ZONE BUTTON OVERRIDES */
.bd-hero .btn-outline,.page-hero .btn-outline,
.hero-section .btn-outline,.profile-hero .btn-outline,.reading-goal-hero .btn-outline{
  color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.07);
}
.bd-hero .btn-outline:hover,.page-hero .btn-outline:hover,
.hero-section .btn-outline:hover,.profile-hero .btn-outline:hover,.reading-goal-hero .btn-outline:hover{
  border-color:#fff;background:rgba(255,255,255,.15);color:#fff;
}
.bd-hero .btn-ghost,.page-hero .btn-ghost,
.hero-section .btn-ghost,.profile-hero .btn-ghost,.reading-goal-hero .btn-ghost{
  color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06);
}
.bd-hero .btn-ghost:hover,.page-hero .btn-ghost:hover,
.hero-section .btn-ghost:hover,.profile-hero .btn-ghost:hover,.reading-goal-hero .btn-ghost:hover{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.44);color:#fff;
}
.bd-hero .mood-tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.88)}

/* FLASH */
.flash{padding:13px 20px;border-radius:9px;margin:14px 40px;font-size:13.5px;display:flex;align-items:center;gap:10px}
.flash-success{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(22,101,52,.22)}
.flash-error{background:var(--err-bg);color:var(--err);border:1px solid rgba(185,28,28,.22)}

/* LAYOUT */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.section{padding:80px 0;background:var(--bg)}

/* TYPOGRAPHY */
.label{font-family:var(--font-m);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green)}
.label-amber{color:var(--amber)}.label-muted{color:var(--text3)}
.h1{font-family:var(--font-d);font-size:clamp(34px,5.5vw,66px);font-weight:900;line-height:1.05;letter-spacing:-.5px;color:var(--text)}
.h2{font-family:var(--font-d);font-size:clamp(22px,3.5vw,40px);font-weight:700;line-height:1.15;color:var(--text)}
.h3{font-family:var(--font-d);font-size:clamp(17px,2.5vw,24px);font-weight:700;line-height:1.25;color:var(--text)}
.sec-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:16px;flex-wrap:wrap}
.see-all{font-family:var(--font-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:6px;transition:gap .2s}.see-all:hover{gap:10px}

/* PAGE HERO */
.page-hero{background:linear-gradient(135deg,#0D1A0F 0%,#162B18 100%);padding:52px 40px 40px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 50%,rgba(45,106,53,.18) 0%,transparent 60%);pointer-events:none}
.ph-label{font-family:var(--font-m);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--green2);margin-bottom:10px;position:relative;z-index:1}
.ph-h1{font-family:var(--font-d);font-size:clamp(26px,5vw,48px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:8px;position:relative;z-index:1}
.ph-h1 em{font-style:italic;color:var(--green2)}
.ph-sub{font-size:14.5px;color:rgba(255,255,255,.5);max-width:560px;font-family:var(--font-b);position:relative;z-index:1}

/* HERO SECTION */
.hero-section{background:linear-gradient(150deg,#0D1A0F 0%,#091209 100%);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,360px);justify-content:space-between;align-items:center;gap:24px;padding:72px clamp(20px,5vw,56px) 64px;position:relative;overflow:hidden;width:100%}
.hero-section::before{content:"";position:absolute;top:-30%;right:-10%;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(45,106,53,.12) 0%,transparent 65%);pointer-events:none}
/* Subtle bamboo texture lines */
.hero-section::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(255,255,255,.012) 120px,rgba(255,255,255,.012) 121px);pointer-events:none}
.hero-left{max-width:none;position:relative;z-index:1;padding-right:8px}
.hero-right{position:relative;z-index:1;justify-self:end}
.hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green2);flex-shrink:0}
.hero-h1{font-family:var(--font-d);font-size:clamp(38px,5.5vw,66px);font-weight:900;color:#fff;line-height:1.06;letter-spacing:-.5px;margin-bottom:18px}
.hero-h1 .line-green{color:var(--green2)}
.hero-h1 .line-serif{font-family:var(--font-d);font-style:italic;font-weight:300}
.hero-sub{font-size:15px;color:rgba(255,255,255,.45);line-height:1.75;max-width:520px;margin-bottom:24px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.hero-stats{display:flex;align-items:center;gap:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;row-gap:10px}
.hs-item{display:inline-flex;align-items:baseline;gap:7px;padding:0 20px}
.hs-item:first-child{padding-left:0}
.hs-sep{width:1px;height:18px;background:rgba(255,255,255,.12);flex-shrink:0}
.hs-num{font-family:var(--font-d);font-size:26px;font-weight:900;color:#fff;line-height:1;white-space:nowrap}
.hs-lbl{font-size:12px;color:rgba(255,255,255,.4);font-family:var(--font-m);letter-spacing:.5px;white-space:nowrap}


/* FEATURED CARD */
.featured-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px;position:relative;overflow:hidden;backdrop-filter:blur(8px)}
.featured-card::before{content:"";position:absolute;top:-20%;right:-15%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(45,106,53,.15),transparent 70%);pointer-events:none}
.fc-badge{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--green2);margin-bottom:20px}
.fc-dot{width:5px;height:5px;border-radius:50%;background:var(--green2);flex-shrink:0}
.fc-book{display:flex;gap:16px;margin-bottom:20px}
.fc-cover{width:110px;height:162px;border-radius:10px;overflow:hidden;flex-shrink:0;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.fc-meta{flex:1}
.fc-cat{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green2);margin-bottom:6px}
.fc-title{font-family:var(--font-d);font-size:16px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}
.fc-author{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:10px}
.fc-stars{margin-bottom:8px}
.fc-verdict{font-family:var(--font-d);font-style:italic;font-weight:300;font-size:12.5px;color:rgba(255,255,255,.35);line-height:1.5}
.fc-cta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.btn-buy{background:var(--green);color:#fff;padding:9px 16px;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none;transition:.15s;display:inline-flex;align-items:center;gap:5px}
.btn-buy:hover{background:var(--green-h)}
.btn-review-sm{border:1.5px solid rgba(255,255,255,.22);color:rgba(255,255,255,.78);padding:9px 14px;border-radius:8px;font-size:12.5px;transition:.15s;text-decoration:none}
.btn-review-sm:hover{border-color:rgba(255,255,255,.5);color:#fff}
.affiliate-note{font-family:var(--font-m);font-size:9px;color:rgba(255,255,255,.2);letter-spacing:.3px}

/* ── AUTHOR ONBOARDING STEP (v3.21.11) ────────────────────────────────────── */
.ob-author-search-wrap{position:relative;max-width:440px;margin:0 auto 10px}
.ob-author-search-input{width:100%;padding:12px 16px;border:2px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--font-b);background:var(--surface);color:var(--text);outline:none;box-sizing:border-box}
.ob-author-search-input:focus{border-color:var(--green)}
.ob-author-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;box-shadow:var(--e2);z-index:50;overflow:hidden}
.ob-author-drop-row{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;font-size:14px;font-family:var(--font-b);transition:background .12s}
.ob-author-drop-row:hover{background:var(--green-tint)}
.ob-author-drop-name{font-weight:600;color:var(--text)}
.ob-author-drop-state{font-size:12px;color:var(--text4)}
.ob-author-feedback{max-width:440px;margin:10px auto 0;padding:11px 14px;border-radius:8px;font-size:13px;font-family:var(--font-b);text-align:center}
.ob-author-feedback-loading{background:var(--bg2);color:var(--text3)}
.ob-author-feedback-ok{background:#d1fae5;color:#065f46}
.ob-author-feedback-err{background:#fee2e2;color:#991b1b}
.ob-author-form-grid{display:flex;flex-direction:column;gap:14px;max-width:440px;margin:0 auto 18px}
.ob-author-form-grid .fg{display:flex;flex-direction:column;gap:5px}
.ob-author-form-grid label{font-size:12.5px;font-family:var(--font-b);color:var(--text3);font-weight:600}
.ob-author-form-grid input,.ob-author-form-grid textarea,.ob-author-form-grid select{padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13.5px;font-family:var(--font-b);background:var(--surface);color:var(--text)}
.ob-author-form-grid input:focus,.ob-author-form-grid textarea:focus,.ob-author-form-grid select:focus{outline:none;border-color:var(--green)}
/* Author prompt banner */
.au-prompt{display:flex;align-items:center;gap:10px;background:var(--green-tint);border-bottom:1.5px solid var(--green-ring);padding:10px 28px;font-size:13px;font-family:var(--font-b)}
.au-prompt-icon{font-size:16px;flex-shrink:0}
.au-prompt-text{flex:1;color:var(--text2)}
.au-prompt-link{color:var(--green);font-weight:700;text-decoration:none}
.au-prompt-link:hover{text-decoration:underline}
.au-prompt-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text4);line-height:1;padding:0 4px;flex-shrink:0}
.au-prompt-close:hover{color:var(--text)}
/* Join-as-author page */
.ja-wrap{max-width:760px;margin:0 auto;padding:48px 28px 80px}
.ja-hero{text-align:center;margin-bottom:44px}
.ja-badge{display:inline-block;background:var(--green-tint);color:var(--green);border:1.5px solid var(--green-ring);border-radius:20px;padding:5px 14px;font-size:12px;font-family:var(--font-b);font-weight:700;margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase}
.ja-h1{font-family:var(--font-d);font-size:clamp(26px,5vw,40px);font-weight:800;color:var(--text);margin:0 0 14px;line-height:1.2}
.ja-sub{font-size:16px;color:var(--text3);font-family:var(--font-b);line-height:1.65;max-width:520px;margin:0 auto 26px}
.ja-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ja-cta{display:inline-block;padding:13px 28px;border-radius:10px;font-size:15px;font-family:var(--font-b);font-weight:700;text-decoration:none;cursor:pointer;border:none;transition:.15s}
.ja-cta-primary{background:var(--green);color:#fff}
.ja-cta-primary:hover{background:var(--green-dk,#1f5429)}
.ja-cta-secondary{background:var(--surface);color:var(--text2);border:1.5px solid var(--line)}
.ja-cta-secondary:hover{background:var(--bg2)}
.ja-perks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:40px}
.ja-perk{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:20px 18px;text-align:center}
.ja-perk-icon{font-size:26px;margin-bottom:9px}
.ja-perk-title{font-size:14px;font-weight:700;font-family:var(--font-b);color:var(--text);margin-bottom:6px}
.ja-perk-desc{font-size:12.5px;color:var(--text3);font-family:var(--font-b);line-height:1.55}
.ja-authors{margin-bottom:40px}
.ja-section-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-b);font-weight:700;color:var(--text4);margin-bottom:14px}
.ja-author-strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ja-author-pill{display:flex;align-items:center;gap:7px;padding:7px 12px;background:var(--surface);border:1.5px solid var(--line);border-radius:24px;font-size:13px;font-family:var(--font-b);color:var(--text2)}
.ja-author-pill-av{width:24px;height:24px;border-radius:50%;object-fit:cover;background:hsl(145,40%,35%);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.ja-more-pill{padding:7px 12px;background:var(--green-tint);border:1.5px solid var(--green-ring);border-radius:24px;font-size:12.5px;font-family:var(--font-b);color:var(--green);font-weight:700}
@media(max-width:760px){
  .ja-perks{grid-template-columns:1fr}
  .ja-wrap{padding:32px 16px 60px}
}

/* SHARED AUTHOR Q&A + NETWORK */
.nr-qa-compose{background:var(--bg);border:1px dashed var(--green-ring);border-radius:12px;padding:16px}
.nr-qa-compose textarea{width:100%;min-height:120px;display:block;box-sizing:border-box;resize:vertical}
.nr-qa-compose-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.nr-network-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.nr-network-stat{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--e1)}
.nr-network-stat-num{font-family:var(--font-d);font-size:30px;font-weight:700;color:var(--text)}
.nr-network-stat-sub{font-size:12px;color:var(--text3);font-family:var(--font-b)}

/* TICKER */
.ticker{background:#0A1A0C;padding:10px 0;overflow:hidden;width:100%}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 32s linear infinite}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.t-item{padding:0 32px;font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.3);letter-spacing:.5px;display:inline-flex;align-items:center;gap:8px}
.t-hl{color:var(--green2)}.tsep{display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.14);margin-left:8px}

/* STATE PILLS — NE 8 states */
.state-pill{display:inline-block;padding:5px 14px;border-radius:20px;font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;border:1.5px solid var(--line);color:var(--text3);cursor:pointer;white-space:nowrap;transition:.15s;background:transparent;text-decoration:none}
.state-pill:hover{border-color:var(--green);color:var(--green)}
.state-pill.active{background:var(--green);color:#fff;border-color:var(--green)}
.state-pill.sp-ar{--sc:#5B8C6B}
.state-pill.sp-as{--sc:#7A8C3A}
.state-pill.sp-mn{--sc:#8C5B2A}
.state-pill.sp-me{--sc:#2A7A8C}
.state-pill.sp-mz{--sc:#6B2A8C}
.state-pill.sp-ng{--sc:#8C2A4A}
.state-pill.sp-sk{--sc:#2A5B8C}
.state-pill.sp-tr{--sc:#8C7A2A}

/* STATE CATEGORY BADGE */
.badge-state{position:absolute;top:8px;right:8px;background:var(--green);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;font-family:var(--font-m)}
.badge-ne{position:absolute;top:8px;left:8px;background:var(--moss);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;font-family:var(--font-m)}
.badge-new{position:absolute;top:8px;left:8px;background:var(--green2);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;font-family:var(--font-m)}

/* BOOK CARDS */
.books-grid{display:grid;gap:18px}
.g5{grid-template-columns:repeat(5,1fr)}.g5 .cover-wrap{aspect-ratio:unset;height:160px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.books-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}
.book-card{word-break:break-word;background:var(--surface);border-radius:12px;border:1.5px solid var(--line);overflow:hidden;transition:.2s;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.book-card>a{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%}
.book-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.cover-wrap{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--bg2);display:block;flex-shrink:0;width:100%}
.cover-gen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;width:100%;height:100%}
.cover-spine{position:absolute;left:0;top:0;bottom:0;width:5px}
.cover-title{font-family:var(--font-d);font-size:11px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}
.cover-author-s{font-size:9px;color:rgba(255,255,255,.5)}
.bc-info{padding:12px 14px 14px;flex:1;background:var(--surface)}
.bc-cat{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.bc-title{font-family:var(--font-d);font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:4px}
.bc-author{font-size:11.5px;color:var(--text3)}
.bc-verified{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:var(--green);color:#fff;font-size:8px;font-weight:900;margin-left:4px;vertical-align:1px;cursor:help}
/* v3.5.1 — verified badge on book detail hero (dark background, slightly larger) */
.bd-verified{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#9EE4A0;color:#0F2A18;font-size:10px;font-weight:900;margin-left:6px;vertical-align:2px;cursor:help;box-shadow:0 2px 8px rgba(158,228,160,.25)}
.bc-price{font-family:var(--font-b);font-size:11px;color:var(--amber);margin-top:5px;font-weight:600}
.bc-state{font-family:var(--font-m);font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--green-tint);color:var(--green);margin-top:4px;display:inline-block}
.bc-rating{display:flex;align-items:center;gap:3px;margin-top:5px}
.stars{display:flex;gap:1px}
.rt-txt{font-size:10.5px;color:var(--text4);margin-left:3px;font-family:var(--font-m)}

/* MOOD TAGS */
.mood-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.mood-tag{font-size:10.5px;padding:3px 10px;border-radius:20px;background:var(--surface2);color:var(--text2);border:1px solid var(--line);font-family:var(--font-b);font-weight:500}
.mood-sm{font-size:9.5px;padding:2px 8px}

/* CATEGORY PILLS */
.cat-strip{padding:14px 40px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border-bottom:1.5px solid var(--line)}
.cat-strip::-webkit-scrollbar{display:none}
.cat-pill{padding:6px 16px;border-radius:20px;font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;border:1.5px solid var(--line);color:var(--text3);cursor:pointer;white-space:nowrap;transition:.15s;background:transparent;text-decoration:none;display:inline-block}
.cat-pill:hover{border-color:var(--green);color:var(--green)}.cat-pill.active{background:var(--green);color:#fff;border-color:var(--green)}

/* FILTER BAR */
.filter-bar{background:var(--surface);padding:14px 40px;border-bottom:1.5px solid var(--line);position:sticky;top:62px;z-index:100;box-shadow:var(--e1)}
.fb-inner{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fb-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--surface2);border:1.5px solid var(--line);border-radius:8px;padding:8px 14px;transition:.2s}
.fb-search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.fb-search input{background:none;border:none;outline:none;font-size:13px;color:var(--text);width:100%}
.fb-search input::placeholder{color:var(--text4)}
.fb-select{border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text2);background:var(--surface2);cursor:pointer;outline:none;transition:.2s}
.fb-select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}

/* BOOKS BROWSE LAYOUT */
.books-layout{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:32px 40px;background:var(--bg)}
.bk-sb{background:var(--surface);border-radius:12px;border:1.5px solid var(--line);padding:18px;position:sticky;top:150px;align-self:start;box-shadow:var(--e1)}
.bk-filter-toggle{display:none}
.bs-hd{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text4);margin-bottom:10px}
.bs-hd+.bs-hd{margin-top:16px}
.bs-item{display:flex;align-items:center;justify-content:space-between;padding:7px 0;font-size:12.5px;color:var(--text3);border-bottom:1px solid var(--line);text-decoration:none;transition:.15s}
.bs-item:last-child{border-bottom:none}.bs-item:hover{color:var(--text)}.bs-item.active{color:var(--green);font-weight:600}
.bs-cnt{font-size:10.5px;color:var(--text4);font-family:var(--font-m)}

/* BOOK DETAIL HERO */
.bd-hero{background:linear-gradient(180deg,#0D1A0F 0%,#122114 100%);padding:68px 40px 0;display:grid;grid-template-columns:230px 1fr;gap:52px;align-items:end;width:100%}
.bd-cover-wrap{width:230px;height:340px;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(40px)}
.bd-cover-wrap .cover-gen{height:340px;font-size:15px}
/* v3.4.13 cover lightbox */
.bd-cover-zoomable{position:relative;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease}
.bd-cover-zoomable:hover{transform:translateY(38px) scale(1.02);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.bd-cover-zoomable:focus-visible{outline:3px solid var(--green2);outline-offset:4px}
.bd-cover-zoom-hint{position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;backdrop-filter:blur(4px)}
.bd-cover-zoomable:hover .bd-cover-zoom-hint,.bd-cover-zoomable:focus-visible .bd-cover-zoom-hint{opacity:1}
.bd-lb{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:10000;padding:40px;opacity:0;transition:opacity .2s;backdrop-filter:blur(6px)}
.bd-lb.is-open{display:flex;opacity:1}
.bd-lb-img{max-width:min(90vw,700px);max-height:90vh;border-radius:8px;box-shadow:0 40px 80px rgba(0,0,0,.6);object-fit:contain;animation:bdLbIn .25s ease}
@keyframes bdLbIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.bd-lb-close{position:absolute;top:20px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;backdrop-filter:blur(4px)}
.bd-lb-close:hover{background:rgba(255,255,255,.22);transform:scale(1.08)}
@media(max-width:720px){.bd-lb{padding:20px}.bd-lb-img{max-width:94vw}.bd-lb-close{top:12px;right:14px;width:38px;height:38px;font-size:24px}.bd-cover-zoomable:hover{transform:none}}
.bd-text{padding-bottom:48px}
.bd-crumb{font-family:var(--font-m);font-size:10px;letter-spacing:.5px;color:rgba(255,255,255,.3);margin-bottom:14px}
.bd-crumb a{transition:.2s}.bd-crumb a:hover{color:var(--green2)}
.bd-title{font-family:var(--font-d);font-size:clamp(24px,4vw,46px);font-weight:900;color:#fff;line-height:1.08;margin-bottom:7px}
.bd-author{font-size:16px;color:rgba(255,255,255,.5);display:block;margin-bottom:16px;font-family:var(--font-d);font-style:italic;font-weight:300}
/* v3.4.13 — secondary contributors line */
.bd-contribs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-10px 0 14px;font-size:12.5px;color:rgba(255,255,255,.45);font-family:var(--font-b)}
.bd-contribs-lbl{font-family:var(--font-m);font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.32);margin-right:3px}
.bd-contribs-nm{color:rgba(255,255,255,.65)}
.bd-contribs-sep{color:rgba(255,255,255,.22)}
.bd-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{display:inline-block;font-family:var(--font-m);font-size:10px;font-weight:600;padding:4px 11px;border-radius:20px;letter-spacing:.5px}
.pill-green{background:rgba(45,106,53,.2);color:#6DD47E;border:1px solid rgba(45,106,53,.38)}
.pill-orange{background:rgba(45,106,53,.15);color:#5CB870;border:1px solid rgba(45,106,53,.3)}
.pill-amber{background:rgba(122,92,30,.15);color:#D4A24A;border:1px solid rgba(122,92,30,.3)}
.pill-border{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.18)}
.bd-rating{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.bd-rt{font-size:12.5px;color:rgba(255,255,255,.4);font-family:var(--font-m)}
.bd-actions{display:flex;gap:10px;flex-wrap:wrap}
.bd-share{display:flex;gap:10px}
.bd-body{padding:52px 40px;display:grid;grid-template-columns:1fr 260px;gap:40px;background:var(--bg)}
/* v3.38.2 - grid items default to min-width:auto, which means a column refuses to
   shrink below the min-content width of what is inside it. The favourite-lines
   carousel is a flex row of slides at flex-basis 100%, and Safari takes its
   min-content from those slides rather than treating the scroller as zero-width.
   The main column therefore grew wider than the phone and every card in it -
   description, book details, the lot - was rendered at that width and clipped by
   the overflow-x:hidden on .bd-body. The carousel was the source; the whole column
   was the casualty. This one line is the fix, and it is why the symptom looked
   like a description bug rather than a quotes bug. */
.bd-body>div{min-width:0}
.bd-sec-title{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--text);margin-bottom:14px}
.bd-desc{font-family:var(--font-b);font-style:normal;font-weight:400;font-size:16.5px;color:var(--text2);line-height:1.65;margin-bottom:24px}
@media(max-width:760px){.bd-desc{font-size:16px;line-height:1.6}}
.bd-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.bd-mi{background:var(--surface);border-radius:8px;padding:11px 14px;border:1.5px solid var(--line)}
.bd-mi-lbl{font-family:var(--font-m);font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text4);margin-bottom:4px}
.bd-mi-val{font-size:13px;font-weight:500;color:var(--text)}

/* STATE MAP SECTION */
.ne-map{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:32px 40px;background:var(--bg)}
.ne-state-card{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:18px 16px;cursor:pointer;transition:.2s;text-decoration:none;display:block;color:inherit}
.ne-state-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--e2)}
.nsc-flag{font-size:26px;margin-bottom:8px}
.nsc-name{font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.nsc-count{font-family:var(--font-m);font-size:10px;color:var(--text4);letter-spacing:.5px}
.nsc-bar{height:3px;background:var(--bg2);border-radius:2px;margin-top:8px;overflow:hidden}
.nsc-fill{height:3px;background:var(--green);border-radius:2px}

/* REVIEW CARDS */
.review-card{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:18px;margin-bottom:12px;box-shadow:var(--e1)}
.rv-header{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rv-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.rv-name{font-size:13px;font-weight:600;color:var(--text)}.rv-date{font-size:11px;color:var(--text3);font-family:var(--font-m)}
.rv-title{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px}
.rv-body{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:10px}
.rv-comments{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.rv-comment{display:flex;gap:8px;margin-bottom:8px}
.rv-comment-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;color:#fff}
.rv-comment-body{background:var(--bg2);border-radius:8px;padding:8px 12px;flex:1;font-size:13px;color:var(--text2)}
.rv-comment-name{font-weight:600;color:var(--text);margin-right:6px}
.rv-comment-time{font-size:10px;color:var(--text4);display:block;margin-top:3px;font-family:var(--font-m)}
.comment-form{display:flex;gap:8px;margin-top:10px}
.comment-form input{flex:1;border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;outline:none;background:var(--surface2);color:var(--text);transition:.2s}
.comment-form input::placeholder{color:var(--text4)}
.comment-form input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}

/* STAR INPUT */
.star-input{display:flex;gap:2px;flex-direction:row-reverse;justify-content:flex-end;margin-bottom:6px}
.star-input input{display:none}
.star-input label{cursor:pointer;font-size:26px;color:var(--line2);transition:.15s;line-height:1}
.star-input input:checked~label,.star-input label:hover,.star-input label:hover~label{color:var(--green)}

/* FORMS */
.auth-page{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px;background:var(--bg)}
.auth-card{background:var(--surface);border-radius:16px;border:1.5px solid var(--line);padding:36px;width:100%;max-width:440px;box-shadow:var(--e3)}
.auth-title{font-family:var(--font-d);font-size:26px;font-weight:900;color:var(--text);margin-bottom:5px;text-align:center}
.auth-sub{font-size:14px;color:var(--text3);text-align:center;margin-bottom:26px}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--text3)}
.auth-switch a{color:var(--green);font-weight:600}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:5px;letter-spacing:.1px}
.fg input,.fg textarea,.fg select{width:100%;border:1.5px solid var(--line2);border-radius:8px;padding:10px 13px;font-size:13.5px;color:var(--text);background:#fff;outline:none;transition:.2s}
.fg input::placeholder,.fg textarea::placeholder{color:var(--text4)}
.fg select option{background:var(--surface);color:var(--text)}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--green);background:var(--surface);box-shadow:0 0 0 3px var(--green-tint)}
.fg textarea{resize:vertical;min-height:96px}
.fg input[type=file]{padding:8px 10px;font-size:12px;color:var(--text3);cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* READING GOAL */
.reading-goal-hero{background:linear-gradient(135deg,#0D1A0F,#162B18);padding:60px 40px;text-align:center;position:relative;overflow:hidden}
.reading-goal-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(45,106,53,.12),transparent 70%)}
.rg-year{font-family:var(--font-m);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--green2);margin-bottom:14px;position:relative;z-index:1}
.rg-title{font-family:var(--font-d);font-size:clamp(30px,6vw,64px);font-weight:900;color:#fff;line-height:1.06;margin-bottom:8px;position:relative;z-index:1}
.rg-sub{font-size:15px;color:rgba(255,255,255,.45);margin-bottom:28px;position:relative;z-index:1}
.progress-ring{position:relative;width:180px;height:180px;margin:0 auto 20px}
.progress-ring svg{transform:rotate(-90deg)}
.pr-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:12}
.pr-fill{fill:none;stroke:var(--green2);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.pr-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.pr-num{font-family:var(--font-d);font-size:38px;font-weight:900;color:#fff;line-height:1}
.pr-goal{font-size:13px;color:rgba(255,255,255,.4);font-family:var(--font-m);margin-top:4px}
.cg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cg-card{background:var(--surface);border-radius:12px;padding:20px;border:1.5px solid var(--line);text-align:center;box-shadow:var(--e1)}
.cg-num{font-family:var(--font-d);font-size:30px;font-weight:900;color:var(--text)}
.cg-lbl{font-size:12px;color:var(--text3);font-family:var(--font-m);margin-top:4px;letter-spacing:.5px;text-transform:uppercase}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:var(--surface);border-radius:12px;border:1.5px solid var(--line);padding:20px;text-align:center;box-shadow:var(--e1)}
.stat-num{font-family:var(--font-d);font-size:30px;font-weight:900;color:var(--text)}
.stat-lbl{font-size:11px;color:var(--text3);font-family:var(--font-m);margin-top:4px;letter-spacing:.5px;text-transform:uppercase}
.chart-wrap{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:22px;box-shadow:var(--e1)}
.chart-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--text);margin-bottom:18px}
.genre-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gb-label{font-size:12.5px;color:var(--text2);min-width:96px}
.gb-bar-wrap{flex:1;height:14px;background:var(--bg2);border-radius:8px;overflow:hidden}
.gb-bar{height:14px;border-radius:8px;background:var(--green);transition:.6s}
.gb-count{font-size:12px;color:var(--text3);min-width:24px;text-align:right;font-family:var(--font-m)}

/* SHELVES */
.shelves-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.shelf-card{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:20px;cursor:pointer;transition:.2s;text-decoration:none;display:block;color:inherit;box-shadow:var(--e1)}
.shelf-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--e2)}
.shelf-name{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--text);margin-bottom:5px}

/* v3.16.5 — Profile Overview reflow (4 bands) */
.pf-band-2up{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.pf-band-3up{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.pf-band-2up{grid-template-columns:1fr;gap:28px}.pf-band-3up{grid-template-columns:1fr;gap:12px}}

/* Band 1 — Now Reading cards (bigger covers, side-by-side) */
.pf-now-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px}
.pf-now-card{display:flex;gap:16px;align-items:center;padding:16px;background:var(--surface);border-radius:14px;border:1.5px solid var(--line);text-decoration:none;color:inherit;transition:.2s;box-shadow:var(--e1)}
.pf-now-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--e2)}
.pf-now-cover{width:60px;height:90px;border-radius:7px;overflow:hidden;flex-shrink:0;box-shadow:var(--e1)}
.pf-now-cover img{width:100%;height:100%;object-fit:cover}
.pf-now-body{flex:1;min-width:0}
.pf-now-title{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-now-author{font-family:var(--font-m);font-size:11.5px;color:var(--text3);font-weight:600}

/* Band 2 — Collection modules */
.pf-mod{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--surface);border-radius:14px;border:1.5px solid var(--line);text-decoration:none;color:inherit;transition:.2s;box-shadow:var(--e1);min-height:140px}
.pf-mod:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--e2)}
.pf-mod-eyebrow{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)}
.pf-mod-title{font-family:var(--font-d);font-size:24px;font-weight:800;color:var(--text);line-height:1.1}
.pf-mod-bar{height:6px;background:var(--surface2);border-radius:4px;overflow:hidden}
.pf-mod-fill{height:100%;border-radius:4px;transition:width .4s}
.pf-mod-foot{font-family:var(--font-m);font-size:11px;color:var(--text4);font-weight:600;margin-top:auto}
.pf-mod-stamps{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:auto}
.pf-mod-stamp{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:5px;background:rgba(100,100,100,.05);border:1px solid var(--line);filter:grayscale(1);opacity:.4}
.pf-mod-stamp.on{background:rgba(45,106,53,.14);border-color:rgba(45,106,53,.35);filter:none;opacity:1}
.pf-mod-covers{display:flex;gap:4px;margin-top:auto}
.pf-mod-mini{width:30px;height:45px;border-radius:4px;overflow:hidden;flex-shrink:0}
.pf-mod-mini img{width:100%;height:100%;object-fit:cover}
.pf-mod-cta{border-style:dashed;background:var(--bg)}
.pf-mod-cta .pf-mod-title{color:var(--text2)}
.shelf-meta{font-size:12px;color:var(--text3);font-family:var(--font-m);margin-bottom:12px}
.shelf-covers{display:flex;gap:4px}
.sc-mini{width:36px;height:54px;border-radius:5px;overflow:hidden}

/* PROFILE */
.profile-hero{background:linear-gradient(135deg,#0D1A0F,#091209);padding:48px 40px;display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.profile-av{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:26px;font-weight:900;flex-shrink:0;border:3px solid rgba(45,106,53,.45);overflow:hidden}
.profile-name{font-family:var(--font-d);font-size:28px;font-weight:900;color:#fff;margin-bottom:3px}
.profile-meta-txt{font-size:12px;color:rgba(255,255,255,.4);font-family:var(--font-m);margin-bottom:14px;letter-spacing:.3px}
.profile-stats{display:flex;gap:24px;margin-bottom:18px;flex-wrap:wrap}
.ps-num{font-family:var(--font-d);font-size:22px;font-weight:900;color:#fff}
.ps-lbl{font-size:10px;color:rgba(255,255,255,.3);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.5px}

/* BUDDY READS */
.buddy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.br-card{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:20px;cursor:pointer;transition:.2s;text-decoration:none;display:block;color:inherit;box-shadow:var(--e1)}
.br-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:var(--e2)}
.br-status{font-family:var(--font-m);font-size:10px;font-weight:700;padding:2px 9px;border-radius:8px;display:inline-block;margin-bottom:10px;letter-spacing:.5px}
.br-open{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(22,101,52,.22)}
.br-full{background:var(--err-bg);color:var(--err);border:1px solid rgba(185,28,28,.22)}
.br-title{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;line-height:1.3}
.buddy-post{background:var(--surface);border-radius:12px;border:1.5px solid var(--line);padding:16px;margin-bottom:10px}
.bp-header{display:flex;gap:9px;align-items:center;margin-bottom:10px}
.bp-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.bp-name{font-size:13px;font-weight:500;color:var(--text)}.bp-meta{font-size:11px;color:var(--text3);font-family:var(--font-m)}
.bp-page-badge{font-family:var(--font-m);font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--green-tint);color:var(--green);margin-left:auto;border:1px solid var(--green-ring)}
.bp-body{font-size:14px;color:var(--text2);line-height:1.7}
.journal-entry{background:var(--surface);border-radius:12px;border:1.5px solid var(--line);padding:16px;margin-bottom:10px;border-left:3px solid var(--moss)}
.je-page{font-family:var(--font-m);font-size:10px;font-weight:700;color:var(--moss);margin-bottom:5px;text-transform:uppercase;letter-spacing:1px}
.je-body{font-size:14px;color:var(--text2);line-height:1.7}
.je-date{font-family:var(--font-m);font-size:11px;color:var(--text4);margin-top:6px}

/* TRACKER */
.tracker-layout{display:grid;grid-template-columns:1fr 280px;gap:28px;padding:36px 40px}
.author-layout{display:grid;grid-template-columns:1fr 270px;gap:32px;align-items:start;padding:36px 40px;max-width:1200px;margin:0 auto}
.author-sidebar-card{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:20px;position:sticky;top:80px}
.tc{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;box-shadow:var(--e1)}
.tc-cov{height:76px;border-radius:7px;overflow:hidden;background:var(--bg2)}
.tc-title{font-family:var(--font-d);font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.tc-auth{font-size:12px;color:var(--text3);margin-bottom:7px}
.tc-prog-wrap{height:4px;background:var(--bg2);border-radius:2px;margin-bottom:4px}
.tc-prog-fill{height:4px;border-radius:2px;background:var(--green);transition:.4s}
.tc-prog-text{font-family:var(--font-m);font-size:10.5px;color:var(--text3)}
.tc-badge{font-family:var(--font-m);font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;letter-spacing:.5px}
.s-reading{background:var(--green-tint);color:var(--green);border:1px solid var(--green-ring)}
.s-finished{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(22,101,52,.22)}
.s-want{background:var(--amber-tint);color:var(--amber);border:1px solid rgba(122,92,30,.22)}
.s-dnf{background:var(--bg2);color:var(--text4);border:1px solid var(--line)}

/* SIDEBAR WIDGET */
.sw{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:var(--e1)}
.sw-title{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text4);margin-bottom:14px}
.related-mini{display:flex;gap:9px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:.15s}
.related-mini:last-child{border-bottom:none}.related-mini:hover .rm-title{color:var(--green)}
.rm-cov{width:32px;height:46px;border-radius:5px;overflow:hidden;flex-shrink:0}
.rm-title{font-family:var(--font-d);font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:2px;transition:.2s}
.rm-cat{font-size:10.5px;color:var(--text3);font-family:var(--font-m)}

/* COMMUNITY */
.community-layout{display:grid;grid-template-columns:220px 1fr 210px;gap:22px;padding:32px 40px}
.comm-sidebar{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:16px;position:sticky;top:80px;align-self:start;box-shadow:var(--e1)}
.space-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:.15s;text-decoration:none;color:inherit}
.space-link:hover{background:var(--bg2)}.space-link.active{background:var(--green-tint)}
.si{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.sn{font-size:13px;font-weight:500;color:var(--text)}.sc{font-size:10px;color:var(--text4);margin-left:auto;font-family:var(--font-m)}
.comm-feed{display:flex;flex-direction:column;gap:12px}
.post-compose{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:16px;box-shadow:var(--e1)}
.pc-textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px 13px;font-size:14px;color:var(--text);resize:none;outline:none;min-height:80px;background:var(--surface2);transition:.2s}
.pc-textarea::placeholder{color:var(--text4)}
.pc-textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.pc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.pc-hint{font-family:var(--font-m);font-size:10.5px;color:var(--text3)}
.comm-post{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:16px;box-shadow:var(--e1)}
.cp-header{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.cp-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#fff}
.cp-name{font-size:13px;font-weight:600;color:var(--text)}.cp-time{font-size:11px;color:var(--text3);font-family:var(--font-m)}
.cp-sbadge{font-family:var(--font-m);font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--bg2);color:var(--text3);margin-left:auto;letter-spacing:.5px;text-transform:uppercase}
.cp-pinned{background:var(--moss-tint);color:var(--moss);border:1px solid rgba(90,122,58,.2)}
.cp-body{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:10px;white-space:pre-line}
.cp-actions{display:flex;gap:14px}
.cp-act{background:none;border:none;font-size:12px;color:var(--text3);cursor:pointer;font-family:var(--font-m);display:flex;align-items:center;gap:4px;padding:0;transition:.2s;letter-spacing:.3px}
.cp-act:hover{color:var(--green)}
.lb-widget{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:16px;position:sticky;top:80px;box-shadow:var(--e1)}
.lb-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:none}
.lb-rank{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--text3);width:14px}
.lb-rank.gold{color:var(--amber)}
.lb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;color:#fff}
.lb-name{font-size:12px;font-weight:500;color:var(--text);flex:1}
.lb-pts{font-family:var(--font-m);font-size:10px;color:var(--text3)}

/* POLL */
.poll-card{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:22px;margin-bottom:16px;max-width:600px;box-shadow:var(--e1)}
.poll-q{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.3}
.poll-opt{position:relative;border:1.5px solid var(--line);border-radius:8px;padding:11px 14px;margin-bottom:8px;overflow:hidden;transition:.15s;display:block;cursor:pointer;background:var(--surface2)}
.poll-opt:hover{border-color:var(--green)}.poll-opt.voted{border-color:var(--green);background:var(--green-tint)}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:var(--green-tint);border-radius:8px;transition:.6s}
.poll-opt-text{position:relative;z-index:1;font-size:13.5px;font-weight:500;color:var(--text)}
.poll-pct{position:relative;z-index:1;font-family:var(--font-m);font-size:12px;color:var(--green);float:right;font-weight:700}
.poll-footer{display:flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--font-m);font-size:10.5px;color:var(--text3)}

/* READING LISTS */
.lists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.list-card{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:22px;cursor:pointer;transition:.2s;text-decoration:none;display:block;color:inherit;position:relative;overflow:hidden;box-shadow:var(--e1)}
.list-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:var(--e2)}
.lc-count{font-family:var(--font-d);font-size:44px;font-weight:900;color:rgba(0,0,0,.035);position:absolute;top:10px;right:16px;line-height:1}
.lc-icon{font-size:28px;margin-bottom:12px}
.lc-title{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.3}
.lc-sub{font-size:12px;color:var(--text3);line-height:1.55}
.lc-arrow{font-family:var(--font-d);font-size:20px;color:var(--green);margin-top:14px;display:block}

/* ADMIN */
.admin-layout{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 62px)}
.admin-sb{background:var(--surface);padding:20px 14px;border-right:1.5px solid var(--line)}
.admin-ni{display:block;padding:9px 13px;border-radius:8px;font-size:13px;color:var(--text3);margin-bottom:3px;transition:.15s;text-decoration:none;font-weight:500}
.admin-ni:hover,.admin-ni.active{background:var(--green-tint);color:var(--green)}
/* v4.11.1 — the report queue announces itself. Until now the only way to learn
   a report existed was to open the page that lists them, which meant a flagged
   post could sit for days. .admin-ni-n rides the sidebar entry on every tab;
   .admin-alert is the row above the content, suppressed on Reports itself
   where the list IS the alert. Red because this is the one thing in Admin with
   a person waiting at the other end of it. */
.admin-ni-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;
  background:var(--red);color:#fff;border-radius:9px;font-family:var(--font-m);
  font-size:10px;line-height:18px;text-align:center;font-weight:700;vertical-align:middle}
/* 4.16.0 submissions: review panel, notes, actions */
.sub-review{background:var(--surface);border:1.5px solid var(--green);border-radius:12px;padding:18px 20px;margin-bottom:16px;display:grid;grid-template-columns:1fr 150px;gap:6px 22px}
.sub-review-h,.sub-review-p,.sub-review-note,.sub-review-dups{grid-column:1}
.sub-review-cover{grid-column:2;grid-row:1 / span 4}
.sub-review-h{font-size:14px;color:var(--text)}
.sub-review-p{font-size:13px;color:var(--text3);margin:0;line-height:1.6}
.sub-review-note span,.sub-review-cover span,.sub-review-dups span{display:block;font-family:var(--font-m);font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text4);margin:10px 0 4px}
.sub-review-note p{margin:0;font-size:13.5px;color:var(--text2);line-height:1.6;background:var(--bg2);border-radius:8px;padding:10px 12px}
.sub-review .is-none{color:var(--text4);font-style:italic;font-size:12.5px;background:none;padding:0}
.sub-review-cover img{width:150px;max-height:220px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.sub-review-dup{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.sub-review-dup em{font-style:normal;font-family:var(--font-m);font-size:10px;color:var(--amber);margin-left:6px}
.sub-review-dup form{margin:0}
.sub-note{font-size:12.5px;color:var(--text2);margin:0 0 6px;line-height:1.6;max-width:600px}
.sub-acts{display:flex;gap:8px;flex-shrink:0;align-items:flex-start;flex-wrap:wrap}
.sub-decline summary{list-style:none;cursor:pointer}
.sub-decline summary::-webkit-details-marker{display:none}
.sub-decline form{margin-top:8px;display:flex;flex-direction:column;gap:6px;min-width:240px}
.sub-decline label{font-size:12px;color:var(--text3)}
.sub-decline textarea{border:1.5px solid var(--line2);border-radius:8px;padding:8px;font-size:13px;font-family:var(--font-b)}
@media (max-width:640px){.sub-review{grid-template-columns:1fr}.sub-review-cover{grid-column:1;grid-row:auto}}
/* 4.15.0 dashboard tiles that open a page */
.admin-tile{transition:border-color .15s,transform .15s}
.admin-tile:hover{border-color:var(--green)!important;transform:translateY(-1px)}
.admin-tile:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.admin-alert{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:12px 16px;
  border-radius:10px;background:var(--red-bg);border:1.5px solid rgba(185,28,28,.25);
  color:var(--red);font-size:13px;text-decoration:none}
.admin-alert strong{font-family:var(--font-m)}
.admin-alert-go{margin-left:auto;font-family:var(--font-m);font-size:11px;white-space:nowrap}
.admin-alert:hover{background:rgba(185,28,28,.12)}
.admin-content{padding:30px 36px;background:var(--bg);min-width:0;overflow-x:auto}
.admin-title{font-family:var(--font-d);font-size:24px;font-weight:900;color:var(--text);margin-bottom:22px}
.atbl{width:100%;border-collapse:collapse;font-size:13px;background:var(--surface);border-radius:12px;overflow:hidden;border:1.5px solid var(--line);box-shadow:var(--e1)}
.atbl th{padding:11px 14px;background:var(--bg2);border-bottom:1.5px solid var(--line);font-weight:600;color:var(--text3);font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;text-align:left}
.atbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--text2);vertical-align:middle}
.atbl tr:hover td{background:var(--surface2)}.atbl tr:last-child td{border-bottom:none}
.admin-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.asc{background:var(--surface);border-radius:12px;border:1.5px solid var(--line);padding:18px;box-shadow:var(--e1)}
.asc-num{font-family:var(--font-d);font-size:28px;font-weight:900;color:var(--text)}
.asc-lbl{font-family:var(--font-m);font-size:10px;color:var(--text3);margin-top:3px;letter-spacing:.5px;text-transform:uppercase}

/* NAV DROPDOWN */
.nl-group{position:relative;display:inline-flex;align-items:center}
.nl-group-btn{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;color:var(--text2);padding:6px 10px;border-radius:7px;cursor:pointer;transition:.15s;font-family:var(--font-b);font-weight:500;border:none;background:none;white-space:nowrap}
.nl-group-btn:hover,.nl-group-btn.open{color:var(--green);background:var(--green-tint)}
.nl-group-btn .nl-caret{font-size:8px;opacity:.5;transition:.2s;display:inline-block}
.nl-group-btn.open .nl-caret{transform:rotate(180deg);opacity:.8}
.nl-group-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:170px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;box-shadow:var(--e2);padding:6px;z-index:400;display:none;flex-direction:column;gap:2px}
.nl-group-drop.open{display:flex}
.nl-group-drop a{display:block;padding:8px 12px;border-radius:7px;font-size:13px;color:var(--text2);text-decoration:none;transition:.15s;font-weight:500;white-space:nowrap}
.nl-group-drop a:hover{background:var(--green-tint);color:var(--green)}
.nl-group-drop a.active{color:var(--green);font-weight:600}

/* MENU EDITOR */
.menu-row{display:flex;align-items:stretch;gap:0;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;transition:.15s;cursor:default}
.menu-row:hover{border-color:var(--line2);box-shadow:var(--e1)}
.menu-row.drag-over{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);background:var(--surface2)}
.menu-row.dragging{opacity:.45;border-style:dashed}
.menu-drag-handle{display:flex;align-items:center;justify-content:center;width:36px;flex-shrink:0;background:var(--surface2);border-right:1.5px solid var(--line);cursor:grab;color:var(--text4);font-size:16px;transition:.15s;user-select:none}
.menu-drag-handle:active{cursor:grabbing;background:var(--green-tint);color:var(--green)}
.menu-row-body{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.menu-row-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.menu-row-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.menu-toggle input{position:absolute;opacity:0;width:0;height:0}
.menu-toggle-track{width:36px;height:20px;border-radius:999px;background:var(--line2);transition:.2s;flex-shrink:0;position:relative}
.menu-toggle input:checked~.menu-toggle-track{background:var(--green)}
.menu-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.menu-toggle input:checked~.menu-toggle-track .menu-toggle-thumb{transform:translateX(16px)}
.menu-toggle-label{font-size:12.5px;font-weight:600;color:var(--text3)}
.menu-row-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--surface2);border:1.5px solid var(--line);font-family:var(--font-m);font-size:10px;font-weight:700;color:var(--text4);flex-shrink:0}
.menu-row.inactive-row{opacity:.65}
.menu-preview{background:var(--text);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:42px}
.menu-preview-item{font-size:12px;color:rgba(255,255,255,.6);padding:4px 10px;border-radius:6px;transition:.15s;font-family:var(--font-b);font-weight:500;white-space:nowrap}
.menu-preview-item.active{color:#fff;background:rgba(255,255,255,.12)}
.menu-preview-logo{font-family:var(--font-d);font-size:13px;font-weight:700;color:#fff;margin-right:8px;padding-right:12px;border-right:1px solid rgba(255,255,255,.15);white-space:nowrap}
.menu-add-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;border:1.5px dashed var(--line2);background:transparent;color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--font-b)}
.menu-add-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)}

/* MAP */
.map-wrap{background:var(--surface);border-radius:16px;border:1.5px solid var(--line);padding:24px;box-shadow:var(--e1)}

/* FOOTER */
/* v3.24.2 - accessibility baseline: visible keyboard focus + reduced motion */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* v3.24.0 - blog single post: one continuous article surface + typography */
.nr-post-metawrap{background:var(--surface);padding:20px 36px 0;border:1px solid var(--line);border-top:none;box-shadow:var(--e1)}
.nr-post-bodywrap{background:var(--surface);padding:30px 36px 44px;border:1px solid var(--line);border-top:none;border-radius:0 0 16px 16px;box-shadow:var(--e1)}
.nr-post-metawrap.nocover{background:transparent;border:none;box-shadow:none;padding:28px 0 0}
.nr-post-bodywrap.nocover{background:transparent;border:none;box-shadow:none;border-radius:0;padding:26px 0 40px}
.nr-post-body{font-size:16.5px;line-height:1.85;color:var(--text2);font-family:var(--font-b)}
.nr-post-body p{margin:0 0 18px}
.nr-post-body h2{font-family:var(--font-d);font-size:25px;font-weight:800;color:var(--text);margin:34px 0 14px;line-height:1.25}
.nr-post-body h3{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--text);margin:28px 0 12px;line-height:1.3}
.nr-post-body blockquote{margin:26px 0;padding:14px 22px;border-left:3px solid var(--green);background:var(--green-tint);border-radius:0 10px 10px 0;font-style:italic;color:var(--text)}
.nr-post-body blockquote p{margin:0 0 8px}
.nr-post-body blockquote p:last-child{margin:0}
.nr-post-body img{max-width:100%;height:auto;border-radius:12px;margin:22px 0;display:block}
.nr-post-body a{color:var(--green);font-weight:600}
.nr-post-body ul,.nr-post-body ol{margin:0 0 18px 24px}
.nr-post-body li{margin-bottom:7px}
.nr-post-body hr{border:none;border-top:1px solid var(--line);margin:32px 0}
.site-footer{background:#0A1A0C;padding:52px 40px 26px}
.footer-inner{display:grid;grid-template-columns:2fr 3fr;gap:52px;margin-bottom:44px}
.footer-cols-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.fb-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-size:18px;font-weight:900;color:#fff;margin-bottom:12px}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.3);line-height:1.75}
.fc h4{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:14px}
.fc a{display:block;font-size:13px;color:rgba(255,255,255,.35);margin-bottom:9px;transition:.15s}.fc a:hover{color:var(--green2)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.3px}
.footer-disclaimer{font-family:var(--font-m);font-size:10px;color:rgba(255,255,255,.14);max-width:360px;text-align:right;line-height:1.5}

/* YEAR SELECTOR */
.yr-active{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.yr-inactive:hover{border-color:var(--green)!important;color:var(--green)!important}

/* RESPONSIVE */
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.grid-rg{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.personal-bar{background:var(--surface);border-bottom:1px solid var(--line);padding:20px 40px;border-top:1px solid var(--line)}
.personal-bar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.personal-bar-books{max-width:1200px;margin:14px auto 0}

/* BLOG */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* v3.16.5 — referral pill: hide label on narrow screens, icon stays */
@media(max-width:760px){.nav-ref-pill-l{display:none}.nav-ref-pill{padding:5px 8px}}

/* ── TABLET 900px ─────────────────────────────────────────────────────────── */
@media(max-width:1200px){
  .nsearch{width:130px}
  .nav-rg-widget{display:none!important}
  .nl{font-size:12.5px;padding:6px 8px}
}
/* v3.21.8 — Nav fix superseding v3.21.7. The previous 1180px breakpoint was
   below MacBook Air width (~1440 CSS px) so the username never collapsed on
   that device. 1380px is high enough to catch MacBook Air at full window
   while leaving room for >1440px screens to keep the username visible. The
   username is still discoverable via the title attribute (hover the avatar)
   and stays in the dropdown My Profile link.

   Note: an attempt to also force nav links onto a single line (white-space:
   nowrap on .nl + min-width:0 on .mnav-links) was reverted because at MBA
   width the nav simply has too many top-level items to fit horizontally
   without overlap. The previous wrap-to-second-line behaviour (which the
   site has had for some time) is the graceful fallback. To genuinely fit on
   one line at MBA width, items would need to be moved into the More dropdown
   (a content decision, not a CSS one). */
@media(max-width:1380px){
  .nu-name .nu-label{display:none}
}
@media(max-width:900px){
  .mnav-inner{padding:0 16px;justify-content:space-between}
  .mnav-links{display:none;position:absolute;top:62px;left:0;right:0;background:var(--surface);flex-direction:column;padding:8px 16px 16px;border-bottom:1.5px solid var(--line);z-index:300;box-shadow:var(--e2)}.mnav-links.open{display:flex}
  .nl-group{width:100%}.nl-group-btn{width:100%;justify-content:space-between;padding:8px 4px}
  .nl-group-drop{position:static;border:none;box-shadow:none;background:var(--bg2);border-radius:8px;padding:4px 8px;margin-top:2px}
  .nl-group-drop.open{display:flex}
  .mnav-right{gap:6px}
  .nav-burger{display:block}.nsearch{display:none}
  .hero-section{grid-template-columns:1fr;min-height:auto;padding:64px 20px 44px}.hero-right{display:none}
  .g5,.g4{grid-template-columns:repeat(3,1fr)}.g3{grid-template-columns:repeat(2,1fr)}
  .books-grid-auto{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .books-layout{grid-template-columns:1fr;padding:16px;gap:0}.bk-sb{position:static}
  .bk-filter-toggle{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);font-family:var(--font-b)}
  .bk-sb{display:none;margin-bottom:16px;position:static;top:auto}
  .bk-sb.bk-sb-open{display:block}
  /* Book detail — side-by-side on tablet */
  .bd-hero{grid-template-columns:150px 1fr;gap:20px;padding:36px 16px 0;align-items:start;width:100%}
  .bd-cover-wrap{width:150px;height:222px;transform:none;margin:0;flex-shrink:0}
  .bd-body{grid-template-columns:1fr;padding:28px 20px}
  .community-layout{grid-template-columns:1fr;padding:20px}.comm-sidebar,.lb-widget{position:static}
  .tracker-layout{grid-template-columns:1fr;padding:20px}
  .author-layout{grid-template-columns:1fr;padding:20px;gap:20px}
  .author-sidebar-card{position:static}
  .author-hero-grid{grid-template-columns:1fr!important;gap:24px!important}
  .author-books-wrap{padding:20px!important}
  .buddy-grid,.shelves-grid,.lists-grid{grid-template-columns:1fr 1fr}
  .states-grid{grid-template-columns:repeat(2,1fr)!important}
  .cg-grid,.stats-grid{grid-template-columns:1fr 1fr}
  .profile-hero{flex-direction:column;gap:16px;padding:32px 20px}
  .footer-inner{grid-template-columns:1fr;gap:0}
  .footer-brand{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08)}
  .footer-cols-row{grid-template-columns:1fr 1fr 1fr;gap:20px}
  .admin-layout{grid-template-columns:1fr}.admin-sb{display:flex;gap:4px;flex-wrap:wrap;padding:10px;border-right:none;border-bottom:1.5px solid var(--line)}
  .admin-stats-grid{grid-template-columns:repeat(2,1fr)}
  .admin-content{padding:20px 12px}
  .nr-post-metawrap{padding:16px 20px 0}
  .nr-post-bodywrap{padding:24px 20px 34px}
  .nr-post-body{font-size:15.5px}
  .form-row{grid-template-columns:1fr}
  .page-hero,.filter-bar,.cat-strip{padding-left:20px;padding-right:20px}
  .wrap{padding:0 16px}.site-footer{padding:40px 20px 20px}.reading-goal-hero{padding:48px 20px}
  .flash{margin:10px 16px}
  .ne-map{grid-template-columns:repeat(2,1fr);padding:20px}
  .announce-bar{padding:8px 16px;font-size:11.5px}
  .nr-network-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── MOBILE 760px ─────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .wrap,.bd-body,.books-layout,.community-layout,.tracker-layout,.profile-hero{max-width:100%;overflow-x:hidden}
  .grid-2col{grid-template-columns:1fr;gap:32px}
  .grid-rg{grid-template-columns:1fr;gap:28px}
  .section{padding:32px 0;width:100%;overflow-x:hidden}
  .cta-banner{padding:40px 16px!important}
  .personal-bar{padding:14px 16px}
  .personal-bar-inner{flex-direction:column;align-items:flex-start;gap:10px}
  /* Hero */
  .hero-section{padding:48px 16px 36px;width:100%;max-width:100vw}
  .hero-h1{font-size:clamp(28px,8vw,40px)}
  .hero-sub{font-size:14px;line-height:1.7}
  .hero-actions{gap:8px;flex-wrap:wrap}
  .hero-stats{gap:0;row-gap:8px;padding-top:16px}
  .hs-item{padding:0 14px}.hs-item:first-child{padding-left:0}
  .hs-num{font-size:22px!important}
  .hs-lbl{font-size:11px!important}
  /* Page heroes */
  .page-hero{padding:40px 16px 28px!important}
  .ph-h1{font-size:clamp(20px,7vw,32px)}
  .ph-sub{font-size:13.5px}
  /* Announce bar */
  .announce-bar{padding:8px 14px;font-size:11px;line-height:1.6;width:100%}
  .nr-network-summary{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;margin-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nr-network-summary::-webkit-scrollbar{display:none}
  .nr-network-stat{padding:10px 12px;border-radius:14px;min-width:190px;flex:0 0 190px}
  .nr-network-stat-num{font-size:22px}
  .nr-network-stat-sub{font-size:11px;line-height:1.35}
  .nr-qa-compose{padding:14px}
  .nr-qa-compose textarea{min-height:110px}
  .nr-qa-compose-actions .btn{width:100%;justify-content:center}
  /* Book detail — STACKED on mobile, cover LEFT aligned */
  .bd-hero{grid-template-columns:1fr;padding:24px 16px 0;gap:0;width:100%;max-width:100%}
  .bd-cover-wrap{width:180px;height:266px;transform:none;margin:0 0 20px 0;border-radius:10px}
  .bd-cover-wrap .cover-gen{height:266px;font-size:12px}
  .bd-title{font-size:clamp(20px,6vw,32px)!important}
  .bd-author{font-size:14px!important;margin-bottom:12px!important}
  .bd-pills{gap:6px;margin-bottom:12px}
  .pill{font-size:9.5px;padding:3px 9px}
  .bd-body{grid-template-columns:1fr;padding:20px 16px}
  .bd-actions{gap:8px;flex-wrap:wrap}
  .bd-actions .btn{padding:10px 16px;font-size:13px;flex:1;min-width:130px;text-align:center;justify-content:center}

  /* v3.38.0 — mobile lines are shorter, so the same clamp shows less text. */
  .bd-clamp{-webkit-line-clamp:8}
  /* v3.38.1 - v3.38.0 kept the label on the active segment and collapsed the other
     three to their icon, so a reader could not tell what the other three were. All
     four carry a short word now and the icons drop out to make room: at 390px that
     is about 92px a segment, and Finished is the longest at roughly 70px. */
  .rs-row{gap:10px}
  .rs-seg{width:100%}
  .rs-seg-btn{font-size:12px;padding:9px 2px;gap:0}
  .rs-seg-btn .rs-seg-ico{display:none}
  .rs-seg-btn .rs-seg-txt{display:none}
  .rs-seg-btn .rs-seg-short{display:inline}
  /* wrap rather than overflow: three items at nowrap only just cleared 390px and
     did not clear 360px at all. */
  .rs-meta{width:100%;justify-content:flex-start;gap:8px 16px;flex-wrap:wrap}
  /* iOS Safari magnifies the viewport when a focused field is under 16px and does
     not restore it afterwards - that is what read as the page overflowing. */
  .rs-thought-input{font-size:16px}
  .q-slide{padding:30px 22px 18px;min-height:150px}
  .q-text{font-size:17px}
  .q-mark{font-size:60px}
  /* v3.36.0 - tracking is the action worth a full row on a phone; sharing splits the next one. */
  .bd-actions .btn-primary{flex:1 0 100%}
  .bd-share{width:100%;gap:8px}
  .bd-share .btn{flex:1;min-width:0}
  /* Author page */
  .auth-hero-inner{flex-direction:column;gap:16px;align-items:flex-start!important}
  .auth-av-lg{width:80px!important;height:80px!important;font-size:28px!important}
  /* Books grid */
  .books-grid-auto{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
  .g4,.g5{grid-template-columns:repeat(2,1fr)!important}
  /* Blog */
  .blog-grid{grid-template-columns:1fr}
  .blog-layout-wrap{grid-template-columns:1fr!important;padding:20px!important}
  /* Community */
  .community-layout{padding:14px}
  .tracker-layout{padding:14px}
  /* Forms */
  .auth-card{padding:24px 16px}
  .wrap{padding:0 16px}
  .mnav-inner{padding:0 14px}
  .mnav-right{gap:4px}
  .nav-rg-widget{display:none!important}
  .nsearch{display:none!important}
  .nu-name .nu-pts{display:none}
  .nu-name .nu-caret{display:none}
  .nu-name .nu-label{display:none}
  .nu-name{padding:3px;gap:0;background:none;border-color:transparent;border-radius:50%;min-width:40px;min-height:40px;justify-content:center}
  .nu-name:hover{background:none;border-color:var(--line)}
  .nu-avatar{width:34px;height:34px;font-size:12px}
  .btn-ghost-nav{padding:5px 8px;font-size:12px;border-color:transparent}
  .btn-green-nav{padding:5px 10px;font-size:12px}
  .author-filter-toolbar form{width:100%}
  .author-filter-toolbar .fb-search{width:100%!important}
  .author-alpha-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .award-row{grid-template-columns:1fr}
  .award-remove{width:100%}
  .book-award-head{flex-direction:column;align-items:flex-start}
  /* Filter/cat strips */
  .filter-bar,.cat-strip{padding:0 16px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .state-pill{white-space:nowrap;flex-shrink:0}
  .cat-pill{white-space:nowrap;flex-shrink:0}
  /* Section headers */
  .sec-header{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:20px}
  /* Flash */
  .flash{margin:8px 14px;font-size:13px}
  /* Footer — brand full width, then 3 cols */
  .footer-inner{grid-template-columns:1fr;gap:0}
  .footer-brand{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08)}
  .footer-cols-row{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:16px}
  /* Editorial strip */
  .editorial-grid{grid-template-columns:1fr!important;gap:24px!important;padding:40px 16px!important}
  .quote-strip{padding:18px 16px!important}
  /* CTA */
  .cta-banner{padding:40px 16px!important}
  /* Reading goal */
  .reading-goal-hero{padding:36px 16px}
  .rg-title{font-size:clamp(22px,7vw,38px)}
}

/* ── SMALL MOBILE 480px ───────────────────────────────────────────────────── */
@media(max-width:480px){
  .editorial-grid{grid-template-columns:1fr!important;gap:28px!important;padding:36px 16px!important}
  .g4,.g5,.g3{grid-template-columns:repeat(2,1fr)!important}
  .books-grid-auto{grid-template-columns:repeat(2,1fr);gap:10px}
  /* Book detail — stacked, cover left */
  .bd-hero{grid-template-columns:1fr;padding:24px 14px 0}
  .bd-cover-wrap{width:160px;height:236px;margin:0 0 18px 0}
  .bd-cover-wrap .cover-gen{height:236px;font-size:11px}
  .bd-title{font-size:clamp(18px,6vw,28px)!important}
  .profile-hero{padding:20px 14px}
  .profile-name{font-size:20px}
  .hero-h1{font-size:26px}
  .hero-stats{gap:12px}
  .footer-inner{grid-template-columns:1fr}
  .footer-cols-row{grid-template-columns:1fr 1fr!important}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .footer-disclaimer{text-align:center;max-width:100%}
  .buddy-grid,.shelves-grid,.lists-grid,.cg-grid,.stats-grid{grid-template-columns:1fr}
  .states-grid{grid-template-columns:1fr!important}
}

/* Book format pill toggles */
.fmt-pill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:20px;font-size:12.5px;font-weight:500;cursor:pointer;border:1.5px solid var(--line);color:var(--text3);background:var(--surface2);transition:.15s;user-select:none;font-family:var(--font-b)}
.fmt-pill:hover{border-color:var(--green);color:var(--green)}
.fmt-pill.fmt-on{border-color:var(--green);background:var(--green);color:#fff;font-weight:600}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE v3.3.19 — New components
══════════════════════════════════════════════════════════════ */

/* ── Social proof bar (logged-out) ───────────────────────────── */
.hp-proof-bar{background:var(--surface);border-bottom:1.5px solid var(--line);padding:10px 40px}
.hp-proof-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:0;flex-wrap:wrap;row-gap:8px}
.hp-proof-item{display:flex;align-items:center;gap:7px;padding:0 20px}
.hp-proof-item:first-child{padding-left:0}
.hp-proof-num{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--green)}
.hp-proof-lbl{font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text4)}
.hp-proof-div{width:1px;height:18px;background:var(--line2)}
.hp-proof-cta{margin-left:auto;font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:.5px;padding:5px 14px;border:1.5px solid var(--green);border-radius:7px;transition:.15s;white-space:nowrap}
.hp-proof-cta:hover{background:var(--green);color:#fff}
/* ── v3.4.15: Currently trending ticker (logged-out) ─────────── */
/* v3.5.1 — trending ticker emphasis: subtle green tint, stronger label, left-edge accent */
.hp-trending{background:linear-gradient(90deg,rgba(45,106,53,.05),rgba(45,106,53,.02));border-top:1px solid rgba(45,106,53,.1);border-bottom:1.5px solid var(--line);padding:12px 40px;position:relative}
.hp-trending::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green) 0%,var(--green2) 50%,var(--green) 100%);opacity:.45}
.hp-trending-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;row-gap:6px;min-height:28px}
.hp-trending-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green);font-weight:700;flex-shrink:0}
.hp-trending-dot{width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:hpTrendingPulse 1.8s ease-out infinite}
@keyframes hpTrendingPulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}70%{box-shadow:0 0 0 10px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.hp-trending-track{position:relative;flex:1;min-width:0;min-height:24px;display:flex;align-items:center}
.hp-trending-slide{position:absolute;top:0;left:0;display:inline-flex;align-items:center;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hp-trending-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;position:relative}
.hp-trending-ico{font-size:15px;flex-shrink:0}
.hp-trending-num{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--green)}
.hp-trending-txt{font-family:var(--font-b);font-size:13.5px;color:var(--text2);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.hp-trending-dots{display:flex;align-items:center;gap:5px;flex-shrink:0}
.hp-trending-dot-btn{width:6px;height:6px;border-radius:50%;background:var(--line2);border:none;padding:0;cursor:pointer;transition:.15s}
.hp-trending-dot-btn.active{background:var(--green);transform:scale(1.4)}
.hp-trending-dot-btn:hover{background:var(--green2)}
@media(max-width:720px){.hp-trending{padding:11px 20px}.hp-trending-inner{gap:10px}.hp-trending-txt{font-size:12.5px}.hp-trending-num{font-size:14px}.hp-trending-label{font-size:10px;letter-spacing:.8px}}
/* ── Personalized dashboard (slim — v3.6.6.2) ───────────────── */
.hp-slim{background:var(--surface);border-bottom:1.5px solid var(--line);padding:12px 40px}
.hp-slim-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hp-slim-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:1;min-width:0}
.hp-slim-hi{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:15px;font-weight:500;color:var(--text3);letter-spacing:-.1px}
.hp-slim-hi strong{font-family:var(--font-d);font-weight:800;color:var(--text);letter-spacing:-.2px}
.hp-slim-wave{font-size:17px;line-height:1;display:inline-block}
.hp-slim-pill{display:inline-flex;align-items:baseline;gap:5px;padding:5px 11px;background:var(--surface2);border:1.5px solid var(--line);border-radius:20px;font-family:var(--font-m);font-size:12px;font-weight:700;color:var(--text2);text-decoration:none;letter-spacing:.1px;transition:.15s;line-height:1.1;white-space:nowrap}
.hp-slim-pill:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)}
.hp-slim-pill-l{font-family:var(--font-m);font-size:9.5px;font-weight:600;color:var(--text4);text-transform:uppercase;letter-spacing:.8px}
.hp-slim-pill:hover .hp-slim-pill-l{color:var(--green)}
.hp-slim-streak{border-color:var(--green-ring);background:var(--green-tint);color:var(--green)}
.hp-slim-streak:hover{background:var(--green);color:#fff;border-color:var(--green)}
.hp-slim-receipt{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08);color:var(--amber)}
.hp-slim-receipt:hover{background:var(--amber);color:#fff;border-color:var(--amber)}

/* Continue Reading slim card */
.hp-slim-continue{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;text-decoration:none;transition:.15s;min-width:0;max-width:320px;flex-shrink:0}
.hp-slim-continue:hover{border-color:var(--green);background:var(--green-tint)}
.hp-slim-cov{width:28px;height:42px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--bg2)}
.hp-slim-cov>*{width:100%;height:100%;object-fit:cover;display:block}
.hp-slim-cov-ph{width:28px;height:42px;border-radius:4px;background:var(--bg2);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.hp-slim-cmeta{min-width:0;flex:1}
.hp-slim-clabel{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text4);margin-bottom:2px}
.hp-slim-ctitle{font-family:var(--font-b);font-size:12.5px;font-weight:700;color:var(--text);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-slim-continue:hover .hp-slim-ctitle{color:var(--green)}
.hp-slim-carrow{font-family:var(--font-d);font-size:14px;color:var(--text4);flex-shrink:0;transition:.15s}
.hp-slim-continue:hover .hp-slim-carrow{color:var(--green);transform:translateX(2px)}
.hp-slim-continue-empty{border-style:dashed;border-color:var(--line2)}
.hp-slim-continue-empty .hp-slim-ctitle{color:var(--text3)}
/* ── Hero ────────────────────────────────────────────────────── */
.hp-hero{background:linear-gradient(150deg,#0B1A0D 0%,#091209 100%);position:relative;overflow:hidden;padding:72px clamp(20px,5vw,56px) 64px}
.hp-hero-glow{position:absolute;top:-20%;right:-5%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(45,106,53,.14) 0%,transparent 65%);pointer-events:none}
.hp-hero-grid-lines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(255,255,255,.012) 120px,rgba(255,255,255,.012) 121px);pointer-events:none}
.hp-hero-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,400px);gap:48px;align-items:center;position:relative;z-index:1}
.hp-hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.hp-eyebrow-pulse{width:6px;height:6px;border-radius:50%;background:var(--green2);flex-shrink:0;animation:hpPulse 2s ease-in-out infinite}
@keyframes hpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hp-hero-eyebrow span{font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.hp-hero-h1{font-family:var(--font-d);font-size:clamp(38px,5.5vw,68px);font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.5px;margin-bottom:18px}
.hp-h1-accent{color:var(--green2)}
.hp-h1-italic{font-style:italic;font-weight:300}
.hp-hero-sub{font-size:15px;color:rgba(255,255,255,.42);line-height:1.78;max-width:520px;margin-bottom:28px}
.hp-hero-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.hp-hero-ghost{display:inline-flex;align-items:center;padding:11px 20px;border-radius:9px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);font-family:var(--font-b);font-size:13.5px;font-weight:600;text-decoration:none;transition:.15s}
.hp-hero-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff}
.hp-hero-stats{display:flex;align-items:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;row-gap:10px}
.hp-hs{display:flex;flex-direction:column;align-items:center;padding:0 20px}
.hp-hs:first-child{padding-left:0}
.hp-hs-n{font-family:var(--font-d);font-size:26px;font-weight:900;color:#fff;line-height:1}
.hp-hs-l{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--font-m);letter-spacing:.5px;margin-top:2px}
.hp-hs-sep{width:1px;height:28px;background:rgba(255,255,255,.1);flex-shrink:0}
/* v3.16.13 — text-only hero stat tile for the Growing Community phrase. */
.hp-hs-text{display:flex;align-items:center}
.hp-hs-tagline{font-family:var(--font-d);font-style:italic;font-weight:600;font-size:16px;line-height:1.15;color:rgba(255,255,255,.9);letter-spacing:.2px}
/* ── Quote rotator ────────────────────────────────────────────── */
.hp-quote-rotator{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:24px;backdrop-filter:blur(8px);min-height:220px;display:flex;flex-direction:column}
.hp-qr-label{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--green2);margin-bottom:16px}
.hp-qr-label-dot{width:5px;height:5px;border-radius:50%;background:var(--green2)}
.hp-qr-track{flex:1;position:relative}
.hp-qr-slide{display:none;animation:hpQrIn .4s ease}
.hp-qr-slide.active{display:block}
@keyframes hpQrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hp-qr-open{font-family:var(--font-d);font-size:48px;line-height:.8;color:var(--green2);opacity:.5;margin-bottom:6px}
.hp-qr-text{font-family:var(--font-d);font-style:italic;font-weight:300;font-size:15px;color:rgba(255,255,255,.85);line-height:1.65;margin:0 0 14px;border:none;padding:0}
.hp-qr-book{font-family:var(--font-m);font-size:10px;letter-spacing:.5px;font-weight:700;margin-bottom:2px}
.hp-qr-reader{font-family:var(--font-m);font-size:10px;color:rgba(255,255,255,.3)}
.hp-qr-dots{display:flex;gap:6px;margin-top:14px}
.hp-qr-dot-btn{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);border:none;padding:0;cursor:pointer;transition:.2s}
.hp-qr-dot-btn.on{background:var(--green2);width:18px;border-radius:3px}
.hp-qr-link{font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--green2);text-decoration:none;margin-top:10px;display:inline-block;transition:.15s}
.hp-qr-link:hover{color:#fff}
/* ── States mosaic strip ──────────────────────────────────────── */
.hp-states-strip{background:var(--surface);border-bottom:1.5px solid var(--line);padding:20px 40px;text-align:center}
.hp-states-label{font-family:var(--font-m);font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text4);margin-bottom:14px}
.hp-states-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:center;flex-wrap:nowrap;max-width:100%}
.hp-states-scroll::-webkit-scrollbar{display:none}
/* When content overflows, align to start so users can scroll from the first tile */
@media(max-width:1180px){
  .hp-states-scroll{justify-content:flex-start}
}
.hp-state-card{flex:0 0 160px;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);background:var(--surface);text-decoration:none;transition:.2s;cursor:pointer}
.hp-state-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--e2)}
.hp-sc-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:100px;overflow:hidden}
.hp-sc-thumb{overflow:hidden;background:var(--bg2)}
.hp-sc-empty{background:var(--bg2)}
.hp-sc-foot{display:flex;align-items:center;gap:7px;padding:9px 11px;background:var(--surface);border-top:1px solid var(--line)}
.hp-sc-icon{font-size:14px;flex-shrink:0}
.hp-sc-name{font-family:var(--font-b);font-size:11px;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-sc-cnt{font-family:var(--font-m);font-size:9px;color:var(--text4);flex-shrink:0}
/* ── Monthly pick ────────────────────────────────────────────── */
.hp-pick-section{background:linear-gradient(135deg,#f9f6ee,#f0ede3);padding:64px 40px;border-bottom:1.5px solid var(--line)}
.hp-pick-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:center}
.hp-pick-badge{font-family:var(--font-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.hp-pick-state{font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text4);margin-bottom:8px}
.hp-pick-title{font-family:var(--font-d);font-size:clamp(26px,4vw,44px);font-weight:900;color:var(--text);line-height:1.1;margin-bottom:6px}
.hp-pick-author{font-size:15px;color:var(--text3);font-family:var(--font-b);margin-bottom:6px}
.hp-pick-desc{font-size:14px;color:var(--text3);line-height:1.75;margin:12px 0 20px;max-width:520px}
.hp-pick-btns{display:flex;gap:10px;flex-wrap:wrap}
.hp-pick-cover{display:flex;justify-content:center;align-items:center}
.hp-pick-cover-wrap{width:200px;height:296px;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18)}
/* ── Readers are saying ──────────────────────────────────────── */
.hp-readers-section{padding:56px 0;background:var(--bg)}
.hp-reviews-scroll{display:flex;gap:16px;overflow-x:auto;padding:4px 0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hp-reviews-scroll::-webkit-scrollbar{display:none}
.hp-review-card{flex:0 0 280px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;transition:.2s}
.hp-review-card:hover{border-color:var(--green);box-shadow:var(--e2)}
.hp-rv-header{display:flex;align-items:center;gap:10px}
.hp-rv-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.hp-rv-name{font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--text)}
.hp-rv-stars{font-size:11px;color:var(--amber);letter-spacing:1px;margin-top:1px}
.hp-rv-body{font-family:var(--font-d);font-style:italic;font-weight:300;font-size:13.5px;color:var(--text2);line-height:1.65;flex:1;margin:0}
.hp-rv-book{display:flex;align-items:center;gap:8px;text-decoration:none;padding:8px 10px;background:var(--bg);border-radius:8px;border:1px solid var(--line);margin-top:auto}
.hp-rv-book:hover{border-color:var(--green)}
.hp-rv-bcover{width:24px;height:36px;border-radius:3px;overflow:hidden;flex-shrink:0}
.hp-rv-book span{font-family:var(--font-b);font-size:11px;color:var(--text2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Poll ────────────────────────────────────────────────────── */
.hp-poll-section{background:linear-gradient(135deg,#0D1A0F 0%,#122114 100%);padding:56px 0}
.hp-poll-inner{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.hp-poll-cta{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-family:var(--font-m);font-size:11px;font-weight:600;color:var(--green2);letter-spacing:.5px;text-decoration:none;transition:.15s}
.hp-poll-cta:hover{color:#fff}
/* ── Editorial ────────────────────────────────────────────────── */
.hp-editorial{background:linear-gradient(135deg,#0D1A0F 0%,#122114 100%);padding:64px 40px}
.hp-ed-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.hp-ed-bar{width:32px;height:3px;background:var(--green2);border-radius:2px;margin-bottom:16px}
.hp-ed-title{font-family:var(--font-d);font-size:17px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.3}
.hp-ed-body{font-size:13.5px;color:rgba(255,255,255,.42);line-height:1.78}
.hp-ed-join{display:inline-flex;margin-top:14px;font-family:var(--font-m);font-size:11px;font-weight:600;color:var(--green2);text-decoration:none;letter-spacing:.5px;transition:.15s}
.hp-ed-join:hover{color:#fff}
/* ── CTA ─────────────────────────────────────────────────────── */
.hp-cta{background:linear-gradient(135deg,#162B18,#0D1A0F);padding:80px 40px;text-align:center;position:relative;overflow:hidden}
.hp-cta-bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,.007) 80px,rgba(255,255,255,.007) 81px)}
.hp-cta-content{position:relative;z-index:1}
.hp-cta-h{font-family:var(--font-d);font-size:clamp(28px,5vw,52px);font-weight:900;color:#fff;line-height:1.1;margin-bottom:14px}
.hp-cta-sub{font-size:15px;color:rgba(255,255,255,.4);max-width:480px;margin:0 auto 32px;line-height:1.8}
/* ── Responsive ──────────────────────────────────────────────── */
/* ── Author Spotlight ─────────────────────────────────────────────────── */

/* v3.6.5 — Monthly Pick standalone section */
.hp-monthly-pick{padding:56px 40px;background:linear-gradient(135deg,#f9f6ee 0%,#f4efe2 100%);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.hp-mp-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center}
.hp-mp-cover-link{display:block;text-decoration:none}
.hp-mp-cover{width:220px;height:330px;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.22),0 8px 18px rgba(0,0,0,.14);transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s ease}
.hp-mp-cover>*:first-child{width:100%;height:100%;object-fit:cover;display:block}
.hp-mp-cover-link:hover .hp-mp-cover{transform:translateY(-6px);box-shadow:0 32px 72px rgba(0,0,0,.28),0 12px 22px rgba(0,0,0,.18)}
.hp-mp-content{min-width:0}
.hp-mp-eyebrow-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hp-mp-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:10.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:#fff;background:var(--green);padding:5px 12px;border-radius:20px}
.hp-mp-state{font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text4)}
.hp-mp-title{font-family:var(--font-d);font-size:clamp(26px,3vw,36px);font-weight:900;line-height:1.1;margin:0 0 8px;letter-spacing:-.4px}
.hp-mp-title a{color:var(--text);text-decoration:none}
.hp-mp-title a:hover{color:var(--green)}
.hp-mp-author{font-family:var(--font-b);font-size:15px;color:var(--text3);margin-bottom:10px}
.hp-mp-stars{margin-bottom:14px}
.hp-mp-desc{font-size:14.5px;color:var(--text2);line-height:1.75;margin:0 0 22px;max-width:620px}
.hp-mp-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hp-mp-reviews{font-family:var(--font-m);font-size:13px;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:.3px}
.hp-mp-reviews:hover{text-decoration:underline}
@media(max-width:780px){
  .hp-monthly-pick{padding:44px 20px}
  .hp-mp-inner{grid-template-columns:1fr;gap:24px;text-align:center;justify-items:center}
  .hp-mp-cover{width:170px;height:255px}
  .hp-mp-content{text-align:center}
  .hp-mp-eyebrow-row{justify-content:center}
  .hp-mp-actions{justify-content:center}
  .hp-mp-desc{text-align:left}
}

.hp-spotlight{padding:56px 40px;background:var(--bg)}
.hp-spotlight{background:var(--surface);border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);padding:64px 40px}
.hp-spotlight-inner{max-width:1100px;margin:0 auto}
.hp-spotlight-hd{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:36px;gap:16px;flex-wrap:wrap}
.hp-spotlight-feature{display:grid;grid-template-columns:200px 1fr 300px;gap:48px;align-items:start}
.hp-spf-photo{width:200px;height:260px;border-radius:14px;overflow:hidden;flex-shrink:0;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.hp-spf-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hp-spf-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:800;color:#fff;font-family:var(--font-d)}
.hp-spf-name{font-family:var(--font-d);font-size:28px;font-weight:800;color:var(--text);margin-bottom:6px;line-height:1.15}
.hp-spf-verified{font-size:14px;color:var(--green);font-family:var(--font-m);font-weight:700}
.hp-spf-roles{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:16px}
.hp-spf-bio{font-family:var(--font-b);font-size:14px;color:var(--text2);line-height:1.75;margin:0 0 20px}
.hp-spf-books{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.hp-spf-bcover{width:40px;height:58px;border-radius:4px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.2);transition:.2s;flex-shrink:0}
.hp-spf-bcover:hover{transform:translateY(-3px)}
.hp-spf-bcover img,.hp-spf-bcover>*{width:100%;height:100%;object-fit:cover;display:block}
.hp-spf-bcount{font-family:var(--font-m);font-size:11px;color:var(--text3);margin-left:4px}
.hp-spf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hp-spf-works{font-family:var(--font-m);font-size:12.5px;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:.3px}
.hp-spf-works:hover{text-decoration:underline}
.hp-spf-quote{background:var(--surface2);border-left:3px solid var(--green);border-radius:0 12px 12px 0;padding:28px 24px;align-self:center}
.hp-spf-qmark{font-family:var(--font-d);font-size:56px;line-height:.7;color:var(--green);opacity:.6;margin-bottom:10px}
.hp-spf-qtext{font-family:var(--font-d);font-style:italic;font-size:16px;font-weight:300;color:var(--text);line-height:1.65;margin:0 0 16px;border:none;padding:0}
.hp-spf-qattr{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.5px}
@media(max-width:900px){
  .hp-spotlight-feature{grid-template-columns:160px 1fr;gap:28px}
  .hp-spf-quote{grid-column:1/-1}
  .hp-spf-photo{width:160px;height:210px}
}
@media(max-width:600px){
  .hp-spotlight{padding:40px 16px}
  .hp-spotlight-feature{grid-template-columns:1fr;gap:20px}
  .hp-spf-photo{width:120px;height:160px}
  .hp-spf-name{font-size:22px}
}
.hp-spotlight-info{flex:1;min-width:0}
.hp-spotlight-name{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-spotlight-state{font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:7px}
.hp-spotlight-bio{font-size:12.5px;color:var(--text3);line-height:1.6;margin:0 0 8px;font-family:var(--font-b)}
.hp-spotlight-meta{display:flex;gap:10px;align-items:center;font-family:var(--font-m);font-size:10.5px;color:var(--text4)}
.hp-spotlight-verified{color:var(--green);font-weight:700}

@media(max-width:1000px){
.hp-hero-content{grid-template-columns:1fr;gap:32px}
.hp-pick-inner{grid-template-columns:1fr}
.hp-pick-cover{display:none}
.hp-poll-inner{grid-template-columns:1fr;gap:28px}
.hp-ed-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:760px){
.hp-proof-bar,.hp-slim,.hp-states-strip,.hp-pick-section,.hp-editorial,.hp-cta{padding-left:16px;padding-right:16px}
.hp-proof-inner{gap:0;justify-content:space-between}
.hp-proof-item{padding:0 10px}
.hp-proof-item:first-child{padding-left:0}
.hp-proof-cta{display:none}
/* Slim dash mobile */
.hp-slim{padding:10px 16px}
.hp-slim-inner{gap:10px;flex-direction:column;align-items:stretch}
.hp-slim-left{gap:7px;row-gap:7px}
.hp-slim-hi{font-size:14px;flex-basis:100%}
.hp-slim-pill{font-size:11.5px;padding:4px 10px}
.hp-slim-continue{max-width:100%;width:100%}
.hp-ed-grid{grid-template-columns:1fr;gap:24px}
.hp-hero-right{display:none}
.hp-poll-inner{padding:0}
/* v3.5.1 — hero stats: keep all 4 on one row on mobile */
.hp-hero-stats{flex-wrap:nowrap;justify-content:space-between;gap:0;row-gap:0}
.hp-hs{padding:0;flex:1;min-width:0;text-align:center;align-items:center}
.hp-hs:first-child{padding-left:0}
.hp-hs-n{font-size:19px}
.hp-hs-l{font-size:9.5px;letter-spacing:.3px;white-space:nowrap}
.hp-hs-sep{height:22px}
}
@media(max-width:380px){
/* v3.5.1 — extra-small phones: hide the 4 separator pipes so text breathes */
.hp-hs-sep{display:none}
.hp-hs-n{font-size:17px}
.hp-hs-l{font-size:9px}
}

/* ═══════════════════════════════════════════════════════════════
   LITERARY PASSPORT (v3.5.0)
═══════════════════════════════════════════════════════════════ */
.pp-landing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;padding:30px 0}
.pp-land-tile{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:22px 12px;text-align:center;transition:.2s}
.pp-land-tile:hover{transform:translateY(-2px);border-color:var(--green)}
.pp-land-ico{font-size:38px;margin-bottom:8px}
.pp-land-nm{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text)}

.pp-card{background:linear-gradient(145deg,#0F2A18,#163A22 40%,#1E4A2D);border-radius:16px;padding:24px;color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.25);margin-bottom:24px;border:1px solid rgba(255,255,255,.08)}
.pp-card::before{content:"";position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none}
.pp-card::after{content:"🎫";position:absolute;top:40%;right:-20px;font-size:260px;opacity:.025;pointer-events:none;transform:rotate(-15deg)}
.pp-card-header{display:flex;align-items:center;gap:14px;margin-bottom:22px;position:relative;z-index:2}
.pp-card-crest{width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.pp-card-meta{flex:1;min-width:0}
.pp-card-sub{font-family:var(--font-m);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:2px}
.pp-card-name{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff;line-height:1.15}
.pp-card-user{font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.pp-card-full-badge{background:linear-gradient(135deg,#f9a825,#ffd54f);color:#2a1a00;font-family:var(--font-d);font-weight:900;font-size:10px;text-align:center;padding:8px 12px;border-radius:10px;line-height:1;flex-shrink:0;box-shadow:0 4px 14px rgba(249,168,37,.4)}
.pp-card-full-badge span{font-size:10px;letter-spacing:1px;margin-top:3px;display:inline-block}

.pp-progress-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;position:relative;z-index:2}
.pp-progress-bar{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.pp-progress-fill{height:100%;background:linear-gradient(90deg,#3D8247,#9EE4A0,#F4650A);border-radius:4px;transition:width .6s ease}
.pp-progress-num{font-family:var(--font-d);font-size:16px;font-weight:800;color:#fff;flex-shrink:0}

.pp-stamps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:2}
.pp-stamp{background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.12);border-radius:10px;padding:14px 8px;text-align:center;position:relative;transition:.2s;opacity:.5}
.pp-stamp.is-stamped{background:rgba(255,255,255,.08);border-style:solid;border-color:rgba(158,228,160,.35);opacity:1;box-shadow:inset 0 0 0 1px rgba(158,228,160,.08)}
.pp-stamp-ico{font-size:26px;margin-bottom:6px;filter:grayscale(1) brightness(1.3);opacity:.7}
.pp-stamp.is-stamped .pp-stamp-ico{filter:none;opacity:1}
.pp-stamp-nm{font-family:var(--font-d);font-size:11px;font-weight:700;color:#fff;margin-bottom:3px}
.pp-stamp-cnt{font-family:var(--font-m);font-size:9px;color:rgba(255,255,255,.45);letter-spacing:.5px}
.pp-stamp.is-stamped .pp-stamp-cnt{color:rgba(158,228,160,.7)}
.pp-stamp-mark{position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:#9EE4A0;color:#0F2A18;font-weight:900;font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(158,228,160,.4)}

.pp-achievements{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:26px}
.pp-ach{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;opacity:.55;transition:.2s}
.pp-ach.earned{opacity:1;border-color:var(--green-ring);background:linear-gradient(135deg,var(--surface),rgba(45,106,53,.04))}
.pp-ach-ico{font-size:28px;flex-shrink:0;filter:grayscale(1) opacity(.5)}
.pp-ach.earned .pp-ach-ico{filter:none}
.pp-ach-nm{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text)}
.pp-ach-d{font-family:var(--font-b);font-size:11px;color:var(--text3);margin-top:2px}
.pp-ach-tick{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}

.pp-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.pp-nextup{background:rgba(244,101,10,.05);border:1.5px dashed rgba(244,101,10,.25);border-radius:12px;padding:18px 20px;text-align:center}
.pp-nextup-lbl{font-family:var(--font-m);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:10px;font-weight:700}
.pp-nextup-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pp-nextup-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:8px;color:var(--text2);text-decoration:none;font-family:var(--font-b);font-size:12.5px;font-weight:600;transition:.15s}
.pp-nextup-chip:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)}

/* Passport award toast (fires on book-page finish) */
.pp-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-80px);background:linear-gradient(135deg,#0F2A18,#1E4A2D);color:#fff;padding:16px 22px;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);font-family:var(--font-d);font-size:14px;font-weight:700;z-index:10001;opacity:0;transition:transform .5s ease,opacity .3s ease;max-width:420px;text-align:center;border:1px solid rgba(158,228,160,.3)}
.pp-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.pp-toast-sub{font-family:var(--font-b);font-size:12px;font-weight:400;color:rgba(255,255,255,.7);margin-top:4px}

@media(max-width:600px){
  .pp-stamps-grid{grid-template-columns:repeat(4,1fr)}
  .pp-card{padding:18px}
  .pp-card-name{font-size:17px}
  .pp-card-crest{width:44px;height:44px;font-size:24px}
  .pp-stamp-ico{font-size:22px}
  .pp-stamp-nm{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════
   MY QUESTIONS PAGE (v3.5.3)
═══════════════════════════════════════════════════════════════ */
.mq-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font-family:var(--font-b);font-size:13.5px;font-weight:600;color:var(--text3);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:.15s;border-radius:6px 6px 0 0}
.mq-tab:hover{color:var(--text);background:var(--surface)}
.mq-tab.is-active{color:var(--green);border-bottom-color:var(--green);font-weight:700}
.mq-tab-ct{font-family:var(--font-m);font-size:11px;font-weight:700;padding:1px 8px;background:var(--surface2);color:var(--text3);border-radius:12px;letter-spacing:.3px}
.mq-tab.is-active .mq-tab-ct{background:var(--green-tint);color:var(--green)}

.mq-status-badge{display:inline-flex;align-items:center;font-family:var(--font-m);font-size:10px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:12px}
.mq-status-badge.is-answered{background:var(--green-tint);color:var(--green);border:1px solid var(--green-ring)}
.mq-status-badge.is-awaiting{background:var(--surface2);color:var(--text3);border:1px solid var(--line)}

.mq-card{transition:.15s}
.mq-card:hover{border-color:var(--green-ring)!important}

@media(max-width:600px){
  .mq-tab{padding:8px 12px;font-size:12.5px}
  .mq-tab-ct{font-size:10px;padding:1px 6px}
  .mq-card{padding:14px 16px!important}
}

/* ── v3.6.4: Hero Book Covers ──────────────────────────────────────── */
.hp-hero-books{display:flex;align-items:flex-end;justify-content:center;gap:0;padding:20px 0 0;position:relative;min-height:400px}
.hp-hero-book{display:block;text-decoration:none;flex-shrink:0;position:relative;margin-right:-22px;transition:transform .3s cubic-bezier(.25,.8,.25,1)}
.hp-hero-book:last-child{margin-right:0}
.hp-hero-book:nth-child(1){z-index:1;transform:translateY(10px)}
.hp-hero-book:nth-child(2){z-index:2;transform:translateY(0)}
.hp-hero-book:nth-child(3){z-index:1;transform:translateY(10px)}
.hp-hero-book:hover{transform:translateY(-14px) scale(1.06)!important;z-index:10}
.hp-hb-cover{width:180px;height:270px;border-radius:7px;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.65),0 6px 16px rgba(0,0,0,.5);position:relative;transition:box-shadow .3s ease}
.hp-hero-book:hover .hp-hb-cover{box-shadow:0 28px 60px rgba(0,0,0,.82),0 10px 24px rgba(0,0,0,.6)}
.hp-hb-cover>*:first-child{width:100%;height:100%;object-fit:cover;display:block}
.hp-hb-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:14px 12px;opacity:0;transition:opacity .25s ease;border-radius:7px}
.hp-hero-book:hover .hp-hb-overlay{opacity:1}
.hp-hb-overlay-title{font-family:var(--font-d);font-size:12px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:3px}
.hp-hb-overlay-author{font-family:var(--font-m);font-size:10px;color:rgba(255,255,255,.65);margin-bottom:8px}
.hp-hb-overlay-cta{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:.8px;color:var(--green2);text-transform:uppercase}

/* ── v3.6.4: Curated Collections ──────────────────────────────────── */
.hp-collections-section{padding:64px 40px;background:var(--bg)}
.hp-collections-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp-coll-card{position:relative;border-radius:16px;padding:28px 24px 24px;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;overflow:hidden;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease;border:1px solid rgba(255,255,255,.08)}
.hp-coll-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.35)}
.hp-coll-top{position:relative;z-index:2}
.hp-coll-eyebrow{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:12px}
.hp-coll-title{font-family:var(--font-d);font-size:26px;font-weight:800;color:#fff;line-height:1.15;margin:0 0 12px}
.hp-coll-desc{font-family:var(--font-b);font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;margin:0}
.hp-coll-foot{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;margin-top:20px}
.hp-coll-explore{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.55);transition:color .2s}
.hp-coll-card:hover .hp-coll-explore{color:#fff}
.hp-coll-count{font-family:var(--font-m);font-size:10px;color:rgba(255,255,255,.3)}
.hp-coll-peek{position:absolute;bottom:-8px;right:-12px;width:100px;transform:rotate(8deg);border-radius:6px;overflow:hidden;box-shadow:-4px 4px 20px rgba(0,0,0,.45);transition:transform .3s ease,box-shadow .3s ease;z-index:1}
.hp-coll-card:hover .hp-coll-peek{transform:rotate(4deg) translateY(-10px);box-shadow:-6px 8px 28px rgba(0,0,0,.55)}
.hp-coll-peek img,.hp-coll-peek>*{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}

/* ── v3.6.4: Handpicked Carousel ──────────────────────────────────── */
.hp-picks-scroll{display:flex;gap:18px;overflow-x:auto;padding:4px 0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.hp-picks-scroll::-webkit-scrollbar{display:none}
.hp-pick-card{flex:0 0 160px;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.hp-pick-cover-link{position:relative;display:block;text-decoration:none}
.hp-pick-card-cover{width:160px;height:230px;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .25s ease,box-shadow .25s ease}
.hp-pick-cover-link:hover .hp-pick-card-cover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(0,0,0,.45)}
.hp-pick-card-cover img,.hp-pick-card-cover>*{width:100%;height:100%;object-fit:cover;display:block}
.hp-pick-award{position:absolute;top:6px;right:6px;font-size:14px;background:rgba(0,0,0,.6);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.hp-pick-card-meta{padding:0 2px}
.hp-pick-card-title{font-family:var(--font-b);font-size:12.5px;font-weight:700;color:var(--text);line-height:1.35;margin-bottom:2px}
.hp-pick-card-author{font-family:var(--font-m);font-size:11px;color:var(--text3);margin-bottom:3px}
.hp-pick-card-stars{line-height:1}
.hp-carousel-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;flex-shrink:0}
.hp-carousel-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)}

@media(max-width:900px){
  .hp-collections-grid{grid-template-columns:repeat(2,1fr)}
  .hp-hero-books{min-height:240px}
  .hp-hb-cover{width:110px;height:165px}
  .hp-hero-book{margin-right:-12px}
}
@media(max-width:600px){
  .hp-collections-section{padding:40px 16px}
  .hp-collections-grid{grid-template-columns:1fr 1fr;gap:12px}
  .hp-coll-card{min-height:220px;padding:20px 16px 16px}
  .hp-coll-title{font-size:18px}
  .hp-coll-peek{width:70px}
  .hp-hero-books{min-height:190px}
  .hp-hb-cover{width:84px;height:126px}
  .hp-hero-book{margin-right:-10px}
  .hp-pick-card{flex:0 0 130px}
  .hp-pick-card-cover{width:130px;height:188px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.6.5 — My Reading (merged Tracker + Stats)
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero stat strip */
.mr-hero{padding-bottom:0}
.mr-hero-stats{display:flex;align-items:center;gap:0;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;row-gap:16px;position:relative;z-index:1}
.mr-hs{display:flex;flex-direction:column;gap:3px;padding:0 28px;position:relative;min-width:0}
.mr-hs:first-child{padding-left:0}
.mr-hs-sep{width:1px;height:36px;background:rgba(255,255,255,.12);flex-shrink:0}
.mr-hs-n{font-family:var(--font-d);font-size:26px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.5px}
.mr-hs-l{font-family:var(--font-m);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}
.mr-hs-goal{min-width:120px}
.mr-hs-bar{margin-top:6px;height:4px;width:100%;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.mr-hs-fill{height:100%;background:linear-gradient(90deg,var(--green2),var(--green));border-radius:2px;transition:width .6s cubic-bezier(.25,.8,.25,1)}

/* Tab bar — sticky, modern */
.mr-tabs-wrap{background:var(--surface);border-bottom:1.5px solid var(--line);position:sticky;top:62px;z-index:90;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.mr-tabs{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.mr-tabs::-webkit-scrollbar{display:none}
.mr-tab{display:inline-flex;align-items:center;gap:8px;padding:16px 20px;font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--text3);border-bottom:2.5px solid transparent;text-decoration:none;transition:color .15s,border-color .15s,background .15s;white-space:nowrap;margin-bottom:-1.5px;position:relative}
.mr-tab:hover{color:var(--text);background:linear-gradient(180deg,transparent 0%,rgba(45,106,53,.03) 100%)}
.mr-tab.on{color:var(--green);border-bottom-color:var(--green);font-weight:700}
.mr-tab-icon{font-size:16px;line-height:1}
.mr-tab-label{letter-spacing:.1px}
.mr-tab-count{font-family:var(--font-m);font-size:11px;font-weight:700;padding:2px 8px;background:var(--bg2);color:var(--text3);border-radius:10px;letter-spacing:.3px;transition:.15s}
.mr-tab.on .mr-tab-count{background:var(--green);color:#fff}
.mr-tabs-spacer{flex:1;min-width:16px}
.mr-tab-ext{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-family:var(--font-m);font-size:12px;font-weight:600;color:var(--text4);text-decoration:none;border-radius:8px;transition:.15s;white-space:nowrap;letter-spacing:.2px}
.mr-tab-ext:hover{color:var(--green);background:var(--green-tint)}
/* v3.16.4 — data pill on cross-link tabs (count or fraction). */
.mr-tab-ext-icon{font-size:13px}
.mr-tab-ext-label{}
.mr-tab-ext-data{font-family:var(--font-m);font-weight:700;color:var(--text2);background:var(--bg2);padding:1px 7px;border-radius:10px;font-size:11px;letter-spacing:.3px}
.mr-tab-ext:hover .mr-tab-ext-data{background:var(--surface);color:var(--green)}
.mr-tab-ext-arrow{color:var(--text4);font-family:var(--font-m);opacity:.6}

/* v3.16.5 — slim referral strip on /my-reading, between hero and tabs */
.mr-ref-strip{background:linear-gradient(90deg,var(--green-tint) 0%,rgba(45,106,53,.04) 100%);border-bottom:1.5px solid var(--green-ring)}
.mr-ref-strip-inner{display:flex;align-items:center;gap:12px;padding:11px 40px}
.mr-ref-strip-icon{font-size:18px;flex-shrink:0}
.mr-ref-strip-text{flex:1;font-family:var(--font-b);font-size:13px;color:var(--text2);line-height:1.4}
.mr-ref-strip-text strong{color:var(--text)}
.mr-ref-strip-cta{font-family:var(--font-m);font-size:12px;font-weight:700;color:#fff;background:var(--green);padding:7px 14px;border-radius:8px;text-decoration:none;white-space:nowrap;flex-shrink:0;letter-spacing:.2px}
.mr-ref-strip-cta:hover{background:#1f4e2c}
.mr-ref-strip-x{background:none;border:0;color:var(--text4);font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;flex-shrink:0;opacity:.6;transition:.15s}
.mr-ref-strip-x:hover{opacity:1;color:var(--text)}
@media(max-width:700px){
  .mr-ref-strip-inner{padding:10px 20px;gap:10px}
  .mr-ref-strip-text{font-size:12px}
  .mr-ref-strip-cta{font-size:11px;padding:6px 11px}
}

.mr-tab-body{padding:32px 0}

/* ── NOW tab ───────────────────────────────────────────────────────── */

/* Quick Add card */
.mr-quickadd{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:22px;box-shadow:var(--e1);transition:border-color .2s,box-shadow .2s}
.mr-quickadd:focus-within{border-color:var(--green);box-shadow:0 0 0 4px var(--green-tint),var(--e1)}
.mr-qa-head{margin-bottom:14px}
.mr-qa-title{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--text);margin:0 0 4px;letter-spacing:-.2px}
.mr-qa-sub{font-size:12.5px;color:var(--text4);font-family:var(--font-m);letter-spacing:.1px}
.mr-qa-search-wrap{position:relative}
.mr-qa-input{width:100%;box-sizing:border-box;border:1.5px solid var(--line2);border-radius:10px;padding:11px 14px 11px 40px;font-family:var(--font-b);font-size:13.5px;color:var(--text);background:var(--surface2);outline:none;transition:.15s}
.mr-qa-input:hover{border-color:var(--text4)}
.mr-qa-input.focus{border-color:var(--green);background:var(--surface)}
.mr-qa-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;color:var(--text4)}
.mr-qa-drop{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1.5px solid var(--green);border-radius:12px;z-index:200;max-height:320px;overflow-y:auto;box-shadow:0 18px 40px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.08)}
.mr-qa-noresults{padding:12px 0 0;font-size:12.5px;color:var(--text4);font-family:var(--font-m)}
.mr-qa-noresults a{color:var(--green);font-weight:600}
.mr-qa-row{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;border-bottom:1px solid var(--line);transition:background .12s;color:inherit}
.mr-qa-row:last-child{border-bottom:none}
.mr-qa-row:hover{background:var(--green-tint)}
.mr-qa-cov{width:30px;height:45px;object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--bg2)}
.mr-qa-cov-ph{background:var(--green);opacity:.3}
.mr-qa-meta{overflow:hidden;flex:1;min-width:0}
.mr-qa-title-r{font-family:var(--font-b);font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.mr-qa-auth{font-size:11.5px;color:var(--text4);font-family:var(--font-m);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-qa-cta{font-size:10.5px;font-family:var(--font-m);font-weight:700;color:var(--green);white-space:nowrap;flex-shrink:0;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;background:var(--green-tint);border-radius:6px}

/* Status group header */
.mr-group-header{display:flex;align-items:center;justify-content:space-between;margin:28px 0 12px;padding:0 4px}
.mr-group-header>span:first-child{font-family:var(--font-d);font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.mr-group-count{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--text4);padding:3px 10px;background:var(--bg2);border-radius:10px;letter-spacing:.3px}

/* Tracker card tweaks */
.mr-tc-note{margin-top:5px;font-size:11.5px;color:var(--text3);font-family:var(--font-b);font-style:italic;line-height:1.45;border-left:2px solid var(--green-ring);padding-left:8px}
.mr-tc-actions{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mr-tc-update{font-family:var(--font-m);font-size:10.5px;font-weight:600;color:var(--green);letter-spacing:.3px;text-decoration:none;padding:3px 0}
.mr-tc-update:hover{text-decoration:underline}
.mr-tc-rate{margin-top:4px;padding:9px 10px;background:var(--green-tint);border-radius:9px;border:1px solid var(--green-ring);text-align:center;min-width:120px}
.mr-tc-rate-lbl{font-family:var(--font-m);font-size:9px;font-weight:700;letter-spacing:1.2px;color:var(--green);margin-bottom:5px}
.mr-tc-rate-form{display:flex;gap:2px;justify-content:center}
.mr-rstar{cursor:pointer;font-size:17px;color:var(--line2);transition:color .1s}
.mr-rstar input{display:none}

/* Empty state */
.mr-empty{background:var(--surface);border-radius:16px;border:1.5px dashed var(--line2);padding:56px 32px;text-align:center}
.mr-empty-ico{font-size:40px;margin-bottom:16px;opacity:.85}
.mr-empty-h{font-family:var(--font-d);font-size:19px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.2px}
.mr-empty-sub{color:var(--text3);margin-bottom:22px;font-family:var(--font-b);font-size:14px;line-height:1.6}

/* Points/rewards sidebar card */
.mr-points-card{background:linear-gradient(150deg,#0D1A0F 0%,#162B18 100%);border-color:rgba(255,255,255,.08);color:#fff;overflow:hidden;position:relative}
.mr-points-card::before{content:"";position:absolute;top:-20px;right:-20px;width:120px;height:120px;background:radial-gradient(circle,rgba(127,176,105,.25),transparent 70%);pointer-events:none}
.mr-pc-head{font-family:var(--font-m);font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--green2);margin-bottom:10px;position:relative;z-index:1}
.mr-pc-points{font-family:var(--font-d);font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px;margin-bottom:3px;position:relative;z-index:1}
.mr-pc-lbl{font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase;margin-bottom:18px;position:relative;z-index:1}
.mr-pc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;position:relative;z-index:1}
.mr-pc-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,.05);border-radius:8px;border:1px solid rgba(255,255,255,.06)}
.mr-pc-row span{font-size:12.5px;color:rgba(255,255,255,.75);font-family:var(--font-b)}
.mr-pc-row strong{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--green2);letter-spacing:.3px}
.mr-pc-cta{display:block;text-align:center;padding:10px;background:rgba(127,176,105,.12);border:1px solid rgba(127,176,105,.3);border-radius:9px;font-family:var(--font-m);font-size:11.5px;font-weight:700;color:var(--green2);letter-spacing:.5px;text-decoration:none;transition:.15s;position:relative;z-index:1}
.mr-pc-cta:hover{background:rgba(127,176,105,.22);border-color:var(--green2)}

/* Quick links sidebar */
.mr-ql{display:flex;align-items:center;gap:8px;padding:9px 0;font-size:13.5px;color:var(--text3);border-bottom:1px solid var(--line);font-family:var(--font-b);transition:color .15s,padding-left .15s;text-decoration:none}
.mr-ql:last-child{border-bottom:none}
.mr-ql:hover{color:var(--green);padding-left:3px}

/* ── STATS tab ─────────────────────────────────────────────────────── */

/* Year sub-header */
.mr-stats-subhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;padding-bottom:22px;border-bottom:1.5px solid var(--line);flex-wrap:wrap}
.mr-ss-eyebrow{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text4);margin-bottom:4px}
.mr-ss-h2{font-family:var(--font-d);font-size:clamp(24px,3vw,34px);font-weight:900;color:var(--text);line-height:1.1;letter-spacing:-.5px;margin-bottom:6px}
.mr-ss-sub{font-family:var(--font-b);font-size:14px;color:var(--text3)}

.mr-year-switch{display:flex;gap:6px;flex-wrap:wrap}
.mr-yr{padding:6px 14px;border-radius:8px;font-family:var(--font-m);font-size:12px;font-weight:700;letter-spacing:.5px;text-decoration:none;border:1.5px solid var(--line);color:var(--text3);transition:.15s;background:var(--surface)}
.mr-yr:hover{border-color:var(--green);color:var(--green)}
.mr-yr.on{background:var(--green);color:#fff;border-color:var(--green)}

/* Monthly pace bars */
.mr-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap}
.mr-chart-meta{font-family:var(--font-m);font-size:11.5px;color:var(--text3);font-weight:600;letter-spacing:.3px;padding:5px 12px;background:var(--green-tint);border-radius:20px;border:1px solid var(--green-ring)}
.mr-bars{display:flex;gap:6px;align-items:flex-end;height:140px;padding:0 4px}
.mr-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.mr-bar-n{font-family:var(--font-d);font-size:11px;color:var(--text4);font-weight:600;height:14px;line-height:14px}
.mr-bar-n.on{color:var(--green);font-weight:800;font-size:12px}
.mr-bar{width:100%;max-width:42px;background:var(--bg2);opacity:.5;border-radius:6px 6px 0 0;min-height:4px;transition:height .5s cubic-bezier(.25,.8,.25,1),opacity .3s;position:relative}
.mr-bar.filled{background:linear-gradient(180deg,var(--green2),var(--green));opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.mr-bar.current{outline:2px solid var(--green-ring);outline-offset:2px;box-shadow:0 0 0 4px rgba(45,106,53,.1),inset 0 1px 0 rgba(255,255,255,.3)}
.mr-bar-m{font-family:var(--font-m);font-size:10px;color:var(--text4);font-weight:500;letter-spacing:.2px}
.mr-bar-m.on{color:var(--green);font-weight:700}
.mr-nochart{text-align:center;padding:14px 0 0;font-size:13px;color:var(--text4);font-family:var(--font-b);font-style:italic}

/* ROI card */
.mr-roi{background:linear-gradient(140deg,var(--surface) 0%,var(--green-tint) 140%);border-radius:14px;border:1.5px solid var(--green-ring);padding:24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--e1)}
.mr-roi-label{font-family:var(--font-m);font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.mr-roi-row{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:var(--surface2);border-radius:9px;border:1px solid var(--line);transition:.15s}
.mr-roi-row:hover{border-color:var(--green-ring);transform:translateX(2px)}
.mr-roi-row span{font-size:13px;color:var(--text2);font-family:var(--font-b)}
.mr-roi-row strong{font-family:var(--font-d);font-weight:800;color:var(--text);font-size:14px;letter-spacing:-.2px}
.mr-roi-quote{padding:12px 14px;background:var(--green-tint);border-radius:9px;border:1px solid var(--green-ring);font-family:var(--font-s);font-style:italic;font-size:13px;color:var(--text3);line-height:1.65;margin-top:4px}

/* All-time portfolio */
.mr-alltime{background:var(--surface);border-radius:14px;border:1.5px solid var(--line);padding:24px;margin-bottom:28px;box-shadow:var(--e1)}
.mr-at-h{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--text);margin:0 0 20px;letter-spacing:-.2px}
.mr-at-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.mr-at-cell{background:var(--surface2);border-radius:11px;padding:16px 14px;text-align:center;border:1.5px solid var(--line);transition:.2s}
.mr-at-cell:hover{border-color:var(--green-ring);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.05)}
.mr-at-n{font-family:var(--font-d);font-size:26px;font-weight:900;line-height:1;letter-spacing:-.5px}
.mr-at-l{font-family:var(--font-m);font-size:10px;color:var(--text4);margin-top:6px;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.mr-at-first{font-size:13px;color:var(--text3);font-family:var(--font-b);padding-top:16px;border-top:1px solid var(--line)}
.mr-at-first a{color:var(--green);font-weight:600;text-decoration:none}
.mr-at-first a:hover{text-decoration:underline}
.mr-at-first span{color:var(--text4)}

/* Shareable card */
.mr-share{background:linear-gradient(135deg,#0D1A0F 0%,#162B18 100%);border-radius:18px;padding:36px 32px;text-align:center;border:2px solid var(--green);position:relative;overflow:hidden}
.mr-share::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(127,176,105,.15),transparent 60%);pointer-events:none}
.mr-share-eyebrow{font-family:var(--font-m);font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--green2);margin-bottom:18px;position:relative;z-index:1}
.mr-share-stats{display:flex;justify-content:center;gap:40px;margin-bottom:22px;flex-wrap:wrap;position:relative;z-index:1}
.mr-share-stat{min-width:80px}
.mr-share-n{font-family:var(--font-d);font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
.mr-share-l{font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.8px;margin-top:4px;text-transform:uppercase;font-weight:600}
.mr-share-cat{font-size:14px;color:rgba(255,255,255,.55);font-family:var(--font-b);position:relative;z-index:1}
.mr-share-cat strong{color:var(--green2);font-weight:700}
.mr-share-url{margin-top:10px;font-family:var(--font-m);font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.8px;position:relative;z-index:1}
.mr-share-btns{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap;position:relative;z-index:1}
.mr-share-wa{background:#25D366;color:#fff;gap:6px;font-weight:700}
.mr-share-wa:hover{background:#1ea952;color:#fff}
.mr-share-tw{background:#1DA1F2;color:#fff;font-weight:700}
.mr-share-tw:hover{background:#0d8ed9;color:#fff}

/* Responsive */
@media(max-width:900px){
  .mr-hero-stats{padding-top:18px;margin-top:20px;gap:0}
  .mr-hs{padding:0 16px}
  .mr-hs-n{font-size:21px}
  .mr-hs-l{font-size:9.5px}
  .mr-hs-sep{height:30px}
  .mr-tabs{padding:0 20px}
  .mr-tab{padding:14px 14px;font-size:13.5px}
  /* v3.16.4 — show cross-link pills on mobile (was display:none).
     Tighter sizing; mr-tabs container already scrolls horizontally. */
  .mr-tab-ext{padding:8px 10px;font-size:11.5px;gap:5px}
  .mr-tab-ext-icon{font-size:12px}
  .mr-tab-ext-data{font-size:10.5px;padding:1px 6px}
  .mr-tabs-spacer{display:none}
  .mr-bars{height:110px}
}
@media(max-width:600px){
  .mr-hero-stats{gap:0;justify-content:space-between;padding-top:16px}
  .mr-hs{padding:0 8px;flex:1;min-width:70px}
  .mr-hs:first-child{padding-left:0}
  .mr-hs-goal{flex-basis:100%;padding:12px 0 0;margin-top:10px;border-top:1px solid rgba(255,255,255,.08);align-items:flex-start}
  .mr-hs-sep{display:none}
  .mr-hs-n{font-size:18px}
  .mr-tab-count{display:none}
  .mr-stats-subhead{flex-direction:column;align-items:flex-start;gap:16px}
  .mr-year-switch{width:100%;overflow-x:auto;padding-bottom:4px}
  .mr-bars{height:90px;gap:3px}
  .mr-bar-n{font-size:10px}
  .mr-bar-m{font-size:9px}
  .mr-share{padding:28px 20px}
  .mr-share-stats{gap:24px}
  .mr-share-n{font-size:30px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v3.6.6 — Community UI Refresh (.cv2-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* Spaces strip — horizontal pill row */
.cv2-spaces-bar{background:var(--surface);border-bottom:1.5px solid var(--line);padding:14px 40px;position:sticky;top:62px;z-index:80}
.cv2-spaces-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cv2-spaces-label{font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text4);flex-shrink:0}
.cv2-spaces-pills{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.cv2-spaces-pills::-webkit-scrollbar{display:none}
.cv2-space-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--line);border-radius:20px;font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--text3);background:var(--surface);text-decoration:none;white-space:nowrap;transition:.15s}
.cv2-space-pill:hover{border-color:var(--green-ring);color:var(--text);background:var(--green-tint)}
.cv2-space-pill.on{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}
.cv2-sp-ico{font-size:14px;line-height:1}
.cv2-sp-name{letter-spacing:.1px}
/* v3.16.15: recency dot on space tabs with new posts in last 14 days */
.cv2-sp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--surface);margin-left:2px;flex-shrink:0}
.cv2-space-pill.on .cv2-sp-dot{display:none}
.cv2-spaces-admin{display:flex;gap:6px;flex-shrink:0}
.cv2-admin-link{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1.5px solid var(--line);border-radius:8px;font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--text4);text-decoration:none;transition:.15s}
.cv2-admin-link:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)}
.cv2-admin-link.cv2-reports{border-color:rgba(185,28,28,.3);color:var(--red)}
.cv2-admin-link.cv2-reports:hover{background:var(--red-bg)}

/* Layout */
.cv2-layout{max-width:1200px;margin:0 auto;padding:28px 40px;display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}
.cv2-feed{min-width:0;display:flex;flex-direction:column;gap:14px}
.cv2-sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:140px;align-self:start}

/* Space header */
.cv2-space-head{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;align-items:center;gap:18px;box-shadow:var(--e1)}
.cv2-sh-ico{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.cv2-sh-meta{flex:1;min-width:0}
.cv2-sh-title{font-family:var(--font-d);font-size:22px;font-weight:900;color:var(--text);margin:0;letter-spacing:-.3px;line-height:1.1}
.cv2-sh-desc{font-size:13.5px;color:var(--text3);margin:4px 0 0;font-family:var(--font-b);line-height:1.5}
.cv2-sh-count{text-align:right;flex-shrink:0}
.cv2-sh-count-n{font-family:var(--font-d);font-size:22px;font-weight:800;color:var(--green);line-height:1;letter-spacing:-.5px}
.cv2-sh-count-l{font-family:var(--font-m);font-size:10px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;margin-top:3px;font-weight:600}

/* v3.8.1 — Slim space header for logged-in users */
.cv2-space-head-slim{padding:8px 14px;gap:10px;border-radius:10px;margin-bottom:0}
.cv2-sh-ico-slim{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.cv2-sh-meta-slim{flex:1;display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.cv2-sh-title-slim{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px;line-height:1}
.cv2-sh-count-slim{font-family:var(--font-m);font-size:11px;color:var(--text4);font-weight:600}
@media(max-width:480px){.cv2-space-head-slim{padding:6px 12px}.cv2-sh-ico-slim{width:28px;height:28px;font-size:14px}.cv2-sh-title-slim{font-size:14px}}

/* Poll card */
.cv2-poll-card{background:var(--surface);border:1.5px solid var(--green-ring);border-radius:16px;padding:20px;box-shadow:var(--e1)}
.cv2-poll-eyebrow{font-family:var(--font-m);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:14px}

/* Compose — collapsed teaser */
.cv2-compose{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--e1);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.cv2-compose:focus-within,.cv2-compose.editing{border-color:var(--green);box-shadow:0 0 0 4px var(--green-tint),var(--e1)}
.cv2-compose-collapsed{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background .15s}
.cv2-compose-collapsed:hover{background:var(--bg2)}
.cv2-compose-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0;overflow:hidden}
.cv2-compose-av img{width:100%;height:100%;object-fit:cover}
.cv2-compose-placeholder{flex:1;font-family:var(--font-b);font-size:14px;color:var(--text4);letter-spacing:.1px}
.cv2-compose-plus{width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;line-height:1;flex-shrink:0}

/* Compose — expanded form */
.cv2-compose-expanded{padding:18px 20px}
.cv2-compose-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cv2-compose-meta{flex:1;min-width:0}
.cv2-compose-name{font-family:var(--font-b);font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
.cv2-compose-target{font-family:var(--font-m);font-size:11.5px;color:var(--text4);margin-top:2px;letter-spacing:.2px}
.cv2-compose-target strong{color:var(--text3);font-weight:700}
.cv2-compose-close{background:none;border:none;width:30px;height:30px;border-radius:50%;color:var(--text4);font-size:14px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.cv2-compose-close:hover{background:var(--bg2);color:var(--text)}
.cv2-compose-edit-head{padding:14px 20px 0;font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber)}
.cv2-compose-ta{width:100%;box-sizing:border-box;border:none;border-radius:0;padding:8px 0;font-family:var(--font-b);font-size:15px;color:var(--text);resize:vertical;outline:none;min-height:100px;background:transparent;line-height:1.6}
.cv2-compose-ta::placeholder{color:var(--text4)}
.cv2-compose .cv2-compose-ta{padding:0 20px 8px}
.cv2-compose form[method=post]:not(.cv2-compose-expanded) .cv2-compose-ta{padding:8px 20px 12px}
.cv2-compose-toolbar{display:flex;align-items:center;gap:6px;padding:8px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.cv2-compose.editing .cv2-compose-toolbar{border-top:none;padding:10px 20px 4px}
.cv2-tb-btn{padding:5px 10px;border:1.5px solid var(--line);border-radius:7px;background:var(--surface2);font-family:var(--font-b);font-size:12.5px;color:var(--text2);cursor:pointer;transition:.15s;line-height:1}
.cv2-tb-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-tint)}
.cv2-compose-hint{font-family:var(--font-m);font-size:10.5px;color:var(--text4);margin-left:6px;letter-spacing:.2px}
.cv2-compose-footer{display:flex;align-items:center;gap:10px;padding:10px 20px 16px;border-top:1px solid var(--line)}
.cv2-compose.editing .cv2-compose-footer{padding-top:14px}
.cv2-compose-type{font-family:var(--font-m);font-size:11.5px;font-weight:600;border:1.5px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--surface2);color:var(--text2);outline:none;cursor:pointer}
.cv2-compose-type:focus{border-color:var(--green)}
.cv2-link-muted{font-size:13px;color:var(--text3);text-decoration:none;font-family:var(--font-b)}
.cv2-link-muted:hover{color:var(--text)}

/* Sign-in CTA */
.cv2-signin-cta{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:22px;text-align:center;box-shadow:var(--e1)}
.cv2-signin-cta p{color:var(--text3);margin:0 0 14px;font-family:var(--font-b);font-size:14px}
.cv2-signin-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* Filter + sort bar */
.cv2-filter-bar{display:flex;align-items:center;gap:12px;padding:4px 0;flex-wrap:wrap}
.cv2-filter-pills{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.cv2-filter-pills::-webkit-scrollbar{display:none}
.cv2-fp{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1.5px solid var(--line);border-radius:16px;font-family:var(--font-m);font-size:12px;font-weight:700;color:var(--text3);background:var(--surface);text-decoration:none;white-space:nowrap;transition:.15s;letter-spacing:.2px}
.cv2-fp:hover{border-color:var(--green-ring);color:var(--green)}
.cv2-fp.on{background:var(--text);color:#fff;border-color:var(--text)}
.cv2-fp-ico{font-size:13px;line-height:1}
.cv2-sort-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cv2-sort-label{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text4)}
.cv2-sort-select{font-family:var(--font-b);font-size:12.5px;font-weight:600;border:1.5px solid var(--line);border-radius:8px;padding:6px 12px;background:var(--surface);color:var(--text2);outline:none;cursor:pointer;transition:.15s}
.cv2-sort-select:hover,.cv2-sort-select:focus{border-color:var(--green);color:var(--text)}

/* Post card */
.cv2-post{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--e1);transition:border-color .15s}
.cv2-post:hover{border-color:var(--line2)}
.cv2-post.pinned{border-color:var(--moss);box-shadow:0 0 0 1px rgba(90,122,58,.15),var(--e1)}
.cv2-post.pt-question{border-left:3px solid #d97706}
.cv2-post.pt-review{border-left:3px solid var(--amber)}
.cv2-post.pt-recommendation{border-left:3px solid var(--green)}
.cv2-post.pt-insight{border-left:3px solid #7c3aed}

/* Post header */
.cv2-post-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.cv2-post-av-link{flex-shrink:0;text-decoration:none}
.cv2-post-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;overflow:hidden}
.cv2-post-av img{width:100%;height:100%;object-fit:cover}
.cv2-post-meta{flex:1;min-width:0}
.cv2-post-byline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.2}
.cv2-post-name{font-family:var(--font-b);font-size:14px;font-weight:700;color:var(--text);text-decoration:none}
.cv2-post-name:hover{color:var(--green)}
.cv2-post-handle{font-family:var(--font-m);font-size:11.5px;color:var(--text4);font-weight:500}
.cv2-post-dot{color:var(--text4);font-size:11px}
.cv2-post-time{font-family:var(--font-m);font-size:11.5px;color:var(--text4)}
.cv2-new-pill{display:inline-block;padding:2px 7px;font-family:var(--font-m);font-size:9px;font-weight:800;letter-spacing:.8px;color:#fff;background:var(--green);border-radius:10px;margin-left:4px}
.cv2-post-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.cv2-pt-badge{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-m);font-size:10px;font-weight:700;padding:2px 8px;border-radius:7px;background:var(--bg2);color:var(--text3);letter-spacing:.3px}
.cv2-pt-badge.pt-question{background:rgba(217,119,6,.12);color:#b45309}
.cv2-pt-badge.pt-review{background:var(--amber-tint);color:var(--amber)}
.cv2-pt-badge.pt-recommendation{background:var(--green-tint);color:var(--green)}
.cv2-pt-badge.pt-insight{background:rgba(124,58,237,.1);color:#6d28d9}
.cv2-pt-badge.cv2-pinned{background:var(--moss-tint);color:var(--moss);border:1px solid rgba(90,122,58,.2)}

/* More menu */
.cv2-more-wrap{position:relative;flex-shrink:0}
.cv2-more-btn{background:none;border:none;width:32px;height:32px;border-radius:8px;font-size:18px;line-height:1;color:var(--text4);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.cv2-more-btn:hover{background:var(--bg2);color:var(--text)}
.cv2-more-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.06);min-width:170px;z-index:50;padding:4px;display:none}
.cv2-more-menu.open{display:block}
.cv2-more-menu form{margin:0}
.cv2-mm-item{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:8px 12px;font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--text2);background:none;border:none;border-radius:7px;cursor:pointer;text-decoration:none;text-align:left;transition:.15s}
.cv2-mm-item:hover{background:var(--bg2);color:var(--text)}
.cv2-mm-item.cv2-mm-danger{color:var(--red)}
.cv2-mm-item.cv2-mm-danger:hover{background:var(--red-bg)}

/* Post body */
.cv2-post-body{font-size:14.5px;color:var(--text2);line-height:1.7;margin-bottom:14px;white-space:pre-line;word-wrap:break-word}
.cv2-post-body a{color:var(--green);text-decoration:none;font-weight:600}
.cv2-post-body a:hover{text-decoration:underline}

/* Action bar */
.cv2-post-actions{display:flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.cv2-act-form{margin:0;display:inline-flex}
.cv2-act{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;background:none;border:1.5px solid transparent;border-radius:9px;font-family:var(--font-m);font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;text-decoration:none;transition:.15s;line-height:1}
.cv2-act:hover{background:var(--bg2);color:var(--text)}
.cv2-act.on{color:var(--green);background:var(--green-tint)}
.cv2-act.on.bookmark{color:var(--amber);background:var(--amber-tint)}
.cv2-act-ico{font-size:14px;line-height:1;display:inline-flex;align-items:center}
.cv2-act-n{font-family:var(--font-d);font-weight:700;font-size:12.5px}
.cv2-act-l{font-weight:500}
.cv2-act-views{margin-left:auto;font-family:var(--font-m);font-size:10.5px;color:var(--text4);letter-spacing:.2px}

/* Report box */
.cv2-report-box{margin-top:12px;padding:14px;background:var(--red-bg);border-radius:10px;border:1px solid rgba(185,28,28,.2)}
.cv2-report-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.cv2-rf-field{flex:1;min-width:200px}
.cv2-rf-label{font-family:var(--font-m);font-size:10px;font-weight:700;color:var(--red);letter-spacing:.8px;text-transform:uppercase;display:block;margin-bottom:5px}
.cv2-rf-select{width:100%;box-sizing:border-box;border:1.5px solid rgba(185,28,28,.3);border-radius:8px;padding:8px 12px;font-size:13px;background:var(--surface);outline:none}
.cv2-rf-submit{background:var(--red);color:#fff}
.cv2-rf-submit:hover{background:#991b1b}

/* Replies */
.cv2-replies{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cv2-reply{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.cv2-reply-av-link{flex-shrink:0;text-decoration:none}
.cv2-reply-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;overflow:hidden}
.cv2-reply-av img{width:100%;height:100%;object-fit:cover}
.cv2-reply-body{flex:1;background:var(--bg2);border-radius:12px;padding:10px 14px;border:1px solid var(--line);min-width:0}
.cv2-reply-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.cv2-reply-name{font-family:var(--font-b);font-size:12.5px;font-weight:700;color:var(--text);text-decoration:none}
.cv2-reply-name:hover{color:var(--green)}
.cv2-reply-handle{font-family:var(--font-m);font-size:10.5px;color:var(--text4);font-weight:500}
.cv2-reply-time{font-family:var(--font-m);font-size:10.5px;color:var(--text4);margin-left:auto}
.cv2-reply-like-form,.cv2-reply-del-form{margin:0}
.cv2-reply-like{background:none;border:none;cursor:pointer;font-family:var(--font-m);font-size:11px;color:var(--text4);padding:2px 5px;border-radius:5px;display:inline-flex;align-items:center;gap:3px;transition:.15s}
.cv2-reply-like:hover{background:var(--bg)}
.cv2-reply-like.on{color:var(--green)}
.cv2-reply-del{background:none;border:none;cursor:pointer;font-size:11px;color:var(--text4);padding:2px 5px;border-radius:5px;transition:.15s}
.cv2-reply-del:hover{background:var(--red-bg);color:var(--red)}
/* v3.26.1 - pre-line added. Replies used to get their line breaks from nl2br
   in render_community_body; that call is gone because it was doubling every
   newline on posts, so replies now need the same whitespace handling the post
   body already had. */
.cv2-reply-text{font-size:13.5px;color:var(--text2);line-height:1.6;white-space:pre-line;word-wrap:break-word}
.cv2-reply-compose{display:flex;gap:10px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.cv2-reply-compose-form{flex:1;display:flex;gap:8px;flex-wrap:wrap}
.cv2-reply-input{flex:1;min-width:180px;border:1.5px solid var(--line2);border-radius:9px;padding:8px 13px;font-family:var(--font-b);font-size:13px;color:var(--text);background:var(--surface);outline:none;transition:.15s}
.cv2-reply-input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.cv2-reply-signin{display:block;margin-top:10px;font-family:var(--font-m);font-size:13px;color:var(--green);text-decoration:none;font-weight:600}

/* Empty state */
.cv2-empty{background:var(--surface);border:1.5px dashed var(--line2);border-radius:16px;padding:52px 32px;text-align:center}
.cv2-empty-ico{font-size:40px;margin-bottom:14px;opacity:.7}
.cv2-empty-h{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-.2px}
.cv2-empty-sub{color:var(--text3);font-family:var(--font-b);font-size:13.5px;margin:0}

/* Pagination */
.cv2-pagination{display:flex;justify-content:center;gap:6px;padding:20px 0;flex-wrap:wrap}
.cv2-pg{padding:7px 14px;border-radius:9px;font-family:var(--font-m);font-size:12.5px;font-weight:700;text-decoration:none;border:1.5px solid var(--line);background:var(--surface);color:var(--text3);transition:.15s}
.cv2-pg:hover{border-color:var(--green);color:var(--green)}
.cv2-pg.on{background:var(--green);color:#fff;border-color:var(--green)}

/* Sidebar cards */
.cv2-side-card{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--e1)}
.cv2-side-head{font-family:var(--font-m);font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:var(--text4);margin-bottom:12px}
.cv2-side-head-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cv2-side-head-row .cv2-side-head{margin-bottom:0}
.cv2-side-cta{font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green);text-decoration:none}
.cv2-side-cta:hover{text-decoration:underline}

/* Saved posts link */
.cv2-saved-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;transition:.15s}
.cv2-saved-link:hover{border-color:var(--amber);background:var(--amber-tint)}
.cv2-saved-ico{font-size:22px;flex-shrink:0}
.cv2-saved-meta{flex:1;min-width:0}
.cv2-saved-h{font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--text)}
.cv2-saved-sub{font-family:var(--font-m);font-size:11px;color:var(--text3);margin-top:2px}
.cv2-saved-arrow{font-family:var(--font-m);font-size:14px;color:var(--green);font-weight:700;flex-shrink:0}

/* Leaderboard */
.cv2-lb-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.cv2-lb-row:last-of-type{border-bottom:none}
.cv2-lb-rank{font-family:var(--font-d);font-size:14px;font-weight:800;color:var(--text3);width:22px;text-align:center;flex-shrink:0}
.cv2-lb-rank.rank-1,.cv2-lb-rank.rank-2,.cv2-lb-rank.rank-3{font-size:18px;font-weight:400}
.cv2-lb-av-link{flex-shrink:0;text-decoration:none}
.cv2-lb-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;overflow:hidden}
.cv2-lb-av img{width:100%;height:100%;object-fit:cover}
.cv2-lb-name{font-family:var(--font-b);font-size:13px;font-weight:600;color:var(--text);flex:1;min-width:0;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv2-lb-name:hover{color:var(--green)}
.cv2-lb-pts{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--green);flex-shrink:0;letter-spacing:.2px}
.cv2-lb-cta{display:block;margin-top:12px;padding:8px 0;text-align:center;font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green);text-decoration:none;border-top:1px solid var(--line);padding-top:12px}
.cv2-lb-cta:hover{color:var(--green2)}

/* Circles mini */
.cv2-circle-row{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:.15s}
.cv2-circle-row:last-of-type{border-bottom:none}
.cv2-circle-row:hover{background:var(--bg2);margin:0 -8px;padding:10px 8px;border-radius:8px;border-bottom-color:transparent}
.cv2-circle-cov{width:32px;height:48px;border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--bg2)}
.cv2-circle-cov>*{width:100%;height:100%;object-fit:cover;display:block}
.cv2-circle-meta{flex:1;min-width:0}
.cv2-circle-title{font-family:var(--font-b);font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv2-circle-sub{font-family:var(--font-m);font-size:10.5px;color:var(--text4);margin-top:2px}
.cv2-circle-badge{font-family:var(--font-m);font-size:9px;font-weight:800;padding:3px 8px;border-radius:8px;background:var(--green-tint);color:var(--green);flex-shrink:0;letter-spacing:.5px}

/* Responsive */
@media(max-width:900px){
  .cv2-spaces-bar{padding:12px 20px}
  .cv2-spaces-label{display:none}
  .cv2-layout{grid-template-columns:1fr;padding:20px;gap:20px}
  .cv2-sidebar{position:static;flex-direction:column}
  .cv2-space-head{padding:18px}
  .cv2-sh-title{font-size:19px}
  .cv2-sh-count-n{font-size:19px}
}
@media(max-width:600px){
  .cv2-spaces-bar{padding:10px 14px}
  .cv2-layout{padding:14px}
  .cv2-post{padding:14px 16px}
  .cv2-compose-collapsed{padding:12px 14px}
  .cv2-compose-expanded{padding:14px}
  .cv2-compose-ta{font-size:15px}
  .cv2-filter-bar{gap:8px}
  .cv2-fp{padding:5px 10px;font-size:11.5px}
  .cv2-sort-label{display:none}
  .cv2-act-l{display:none}
  .cv2-act-views{font-size:10px}
  .cv2-post-body{font-size:14px}
}

/* ─── v3.7.0 — accepted answers, attached books, sticky CTA, bottom sheet ─── */

/* Accepted answer badge on post tags */
.cv2-pt-badge.cv2-answered{background:var(--green-tint);color:var(--green);border:1px solid var(--green-ring);font-weight:700}

/* Reply: accepted state */
.cv2-reply-accepted{background:linear-gradient(135deg,rgba(45,106,53,.05),rgba(45,106,53,.09));border:1.5px solid var(--green-ring);border-radius:10px;padding:14px;margin-bottom:10px;position:relative}
.cv2-accepted-banner{position:absolute;top:-10px;left:14px;background:var(--green);color:#fff;font-family:var(--font-m);font-size:10px;font-weight:700;letter-spacing:.5px;padding:2px 10px;border-radius:6px;text-transform:uppercase}

/* Mark as answer button */
.cv2-reply-accept-form{display:inline-flex;margin-left:auto}
.cv2-reply-accept{background:transparent;border:1.5px solid var(--green-ring);color:var(--green);font-family:var(--font-m);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;cursor:pointer;transition:.15s;letter-spacing:.3px}
.cv2-reply-accept:hover{background:var(--green-tint)}
.cv2-reply-accept.on{background:var(--green);color:#fff;border-color:var(--green)}

/* Books attached strip on post */
.cv2-books-strip{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px;padding:10px 0 0;border-top:1px dashed var(--line)}
.cv2-book-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;background:var(--surface2);border:1.5px solid var(--line);border-radius:8px;text-decoration:none;transition:.15s;max-width:280px}
.cv2-book-pill:hover{border-color:var(--green);background:var(--green-tint)}
.cv2-book-pill-cov{flex-shrink:0;width:28px;height:42px;border-radius:3px;overflow:hidden;background:var(--bg2)}
.cv2-book-pill-cov img{width:100%;height:100%;object-fit:cover;display:block}
.cv2-book-pill-text{display:flex;flex-direction:column;min-width:0}
.cv2-book-pill-title{font-family:var(--font-d);font-size:12px;font-weight:700;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.cv2-book-pill-auth{font-family:var(--font-m);font-size:10px;color:var(--text4);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}

/* Compose: attached books area */
.cv2-attached-books{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;margin-top:8px}
.cv2-attached-label{font-family:var(--font-m);font-size:11px;color:var(--text3);font-weight:700}
.cv2-attached-list{display:flex;flex-wrap:wrap;gap:6px}
.cv2-attached-pill{display:inline-flex;align-items:center;gap:6px;background:var(--green-tint);border:1px solid var(--green-ring);color:var(--green);padding:4px 10px;border-radius:6px;font-family:var(--font-m);font-size:11px;font-weight:700}
.cv2-attached-pill button{background:none;border:none;color:var(--green);cursor:pointer;font-size:12px;line-height:1;padding:0;margin-left:2px;opacity:.6}
.cv2-attached-pill button:hover{opacity:1}
.cv2-tb-attach{color:var(--green) !important;font-weight:700}
.cv2-draft-status{margin-left:auto;font-family:var(--font-m);font-size:10px;color:var(--text4);font-style:italic}

/* Book search modal */
.cv2-book-search-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;backdrop-filter:blur(4px)}
.cv2-book-search-card{background:var(--surface);border-radius:14px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.4);overflow:hidden;animation:nr-slide-up .2s ease}
.cv2-book-search-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.cv2-book-search-head strong{font-family:var(--font-d);font-size:15px;color:var(--text)}
.cv2-book-search-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text3);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.cv2-book-search-close:hover{background:var(--bg2)}
.cv2-book-search-input{width:100%;padding:14px 18px;border:none;border-bottom:1px solid var(--line);font-family:var(--font-b);font-size:14px;outline:none;background:var(--surface);color:var(--text)}

/* v3.16.6 — admin typeahead picker (Monthly Pick + Featured Author).
   Single dark surface that fits inside the dark Settings cards. */
.adm-tpa{position:relative;background:var(--bg);border:1.5px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:0}
.adm-tpa:focus-within{border-color:var(--green)}
.adm-tpa-input{flex:1;padding:10px 12px;border:0;background:transparent;font-family:var(--font-b);font-size:13px;color:var(--text);outline:none}
.adm-tpa-input::placeholder{color:var(--text4)}
.adm-tpa-clear{background:none;border:0;color:var(--text4);font-size:18px;cursor:pointer;padding:6px 12px;line-height:1;flex-shrink:0;opacity:.5;transition:.15s}
.adm-tpa-clear:hover{opacity:1;color:var(--text2)}
.adm-tpa-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;max-height:280px;overflow-y:auto;z-index:50;box-shadow:var(--e2)}
.adm-tpa-row{padding:9px 14px;font-family:var(--font-b);font-size:13px;color:var(--text);cursor:pointer;border-bottom:1px solid var(--line)}
.adm-tpa-row:last-child{border-bottom:0}
.adm-tpa-row:hover{background:var(--green-tint);color:var(--green)}
.adm-tpa-empty{padding:14px;font-family:var(--font-m);font-size:12px;color:var(--text4);text-align:center}
.adm-tpa-current{font-family:var(--font-m);font-size:11px;color:var(--text3);margin-bottom:10px;letter-spacing:.3px}
.adm-tpa-current strong{color:var(--text);font-weight:700}
.adm-tpa-current-empty em{color:var(--text4);font-style:normal}
.cv2-book-search-input:focus{border-bottom-color:var(--green)}
.cv2-book-search-results{max-height:340px;overflow-y:auto}
.cv2-book-search-empty{padding:28px;text-align:center;color:var(--text4);font-family:var(--font-m);font-size:13px}
.cv2-bsr-item{display:flex;align-items:center;gap:12px;padding:10px 16px;background:none;border:none;width:100%;text-align:left;cursor:pointer;border-bottom:1px solid var(--line);transition:.1s}
.cv2-bsr-item:hover{background:var(--green-tint)}
.cv2-bsr-cov{flex-shrink:0;width:32px;height:48px;border-radius:3px;overflow:hidden;background:var(--bg2);object-fit:cover}
.cv2-bsr-cov-empty{display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text4)}
.cv2-bsr-meta{flex:1;min-width:0}
.cv2-bsr-title{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv2-bsr-auth{font-family:var(--font-m);font-size:11px;color:var(--text4);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sticky mobile CTA bar (hidden on desktop) */
/* v4.9.1 — sits ABOVE the tab bar, not under it. This is the v3 book-page CTA,
   ancestor of .v4-bookbar in Design.php, and it had exactly the same collision:
   fixed at bottom:0 with z-index 90 against a tab bar at 350, so from 4.9.0
   onward it was painted over completely on any phone rendering v3. The offset
   reads --nr-tabh, declared once in the tab bar block below, so the two cannot
   drift. translateY is 200% rather than 100% because the off-state now has to
   clear its own height AND the bar beneath it.
   NOTE: this whole file is a single-quoted PHP string. No apostrophes. */
.bd-sticky{position:fixed;left:0;right:0;bottom:calc(var(--nr-tabh,60px) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1.5px solid var(--line);padding:10px 14px;display:none;align-items:center;gap:10px;z-index:90;box-shadow:0 -4px 20px rgba(0,0,0,.08);transform:translateY(200%);transition:transform .25s ease}
.bd-sticky.on{transform:translateY(0)}
.bd-sticky-cov{flex-shrink:0;width:36px;height:54px;border-radius:4px;overflow:hidden;background:var(--bg2)}
.bd-sticky-cov img{width:100%;height:100%;object-fit:cover;display:block}
.bd-sticky-title{flex:1;min-width:0}
.bd-sticky-t1{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-sticky-cta{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-family:var(--font-b);font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;white-space:nowrap}
.bd-sticky-cta:active{transform:scale(.97)}
/* v4.9.1 — the reserved room has to cover both bars now, not just this one.
   This selector is more specific than the plain body{padding-bottom} the tab
   bar sets further down the file, so it wins outright: if it did not name the
   tab height too, a v3 book page would reserve 80px for a stack 140 tall and
   the footer would sit under the tabs. */
@media(max-width:720px){.bd-sticky{display:flex} body.bd-page{padding-bottom:calc(80px + var(--nr-tabh,60px) + env(safe-area-inset-bottom,0px))}}

/* Bottom sheet */
/* v4.9.1 — z-index above the tab bar, both of them. A modal that a fixed
   navigation paints through is not a modal: at 99/100 against a tab bar at
   350, the dim stopped short of the tabs, the last row of the sheet sat
   underneath them, and the tabs stayed lit and tappable over an open sheet.
   Now the backdrop covers the bar and the sheet covers the backdrop. */
.bd-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:360;opacity:0;pointer-events:none;transition:opacity .2s}
.bd-sheet-backdrop.on{opacity:1;pointer-events:auto}
.bd-sheet{position:fixed;left:0;right:0;bottom:0;max-height:80vh;background:var(--surface);border-radius:16px 16px 0 0;padding:8px 18px 24px;z-index:370;transform:translateY(100%);transition:transform .25s ease;overflow-y:auto;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
.bd-sheet.on{transform:translateY(0)}
.bd-sheet-grip{width:40px;height:4px;background:var(--line2);border-radius:2px;margin:6px auto 14px}
.bd-sheet-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--text);margin-bottom:14px;text-align:center}
.bd-sheet-section-title{font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--text4);margin:18px 0 8px;letter-spacing:.5px;text-transform:uppercase}
.bd-sheet-list{display:flex;flex-direction:column;gap:6px}
.bd-sheet-item{display:flex;align-items:center;gap:14px;background:var(--surface2);border:1.5px solid var(--line);border-radius:10px;padding:12px 16px;font-family:var(--font-b);font-size:14px;color:var(--text);text-decoration:none;cursor:pointer;text-align:left;width:100%;transition:.1s}
.bd-sheet-item:hover{border-color:var(--green);background:var(--green-tint)}
.bd-sheet-item.on{background:var(--green);border-color:var(--green);color:#fff}
.bd-sheet-item.on .bd-sheet-lbl{color:#fff}
.bd-sheet-item.bd-sheet-cta{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.bd-sheet-ico{font-size:18px;width:24px;text-align:center}
.bd-sheet-lbl{flex:1;color:var(--text)}
.bd-sheet-check{color:#fff;font-weight:700}
@media(min-width:721px){.bd-sticky,.bd-sheet,.bd-sheet-backdrop{display:none !important}}

/* v3.8.1 — Mobile: review on line 1, readers + finished pair on line 2 */
@media(max-width:720px){
  .bd-rating{flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:6px}
  /* Review (rating + count) takes full first row */
  .bd-rating .bd-rt{flex-basis:100%}
  /* Reset any inline margin-left so readers/finished group cleanly on row 2 */
  .bd-rating .bd-readers-stat,
  .bd-rating .bd-finished-stat,
  .bd-rating-stats .bd-readers-stat,
  .bd-rating-stats .bd-finished-stat{margin-left:0 !important}
}

/* ─── v3.8.1 — Book completion celebration modal ─── */
.bd-celebrate-backdrop{position:fixed;inset:0;background:rgba(15,28,18,.7);z-index:1200;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(6px)}
.bd-celebrate-backdrop.on{opacity:1;pointer-events:auto}
.bd-celebrate{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%) scale(.94);background:var(--surface);border-radius:18px;padding:28px 28px 24px;width:calc(100% - 40px);max-width:420px;z-index:1201;box-shadow:0 30px 80px rgba(0,0,0,.4),0 0 0 1px rgba(45,106,53,.15);text-align:center;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .35s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.bd-celebrate.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.bd-celebrate-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--text4);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;z-index:2}
.bd-celebrate-close:hover{background:var(--bg2);color:var(--text)}
.bd-celebrate-confetti{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;overflow:hidden}
.bd-celebrate-confetti span{position:absolute;top:-30px;left:var(--x);font-size:22px;animation:bd-fall 2.4s var(--d) ease-in forwards;opacity:0}
.bd-celebrate.on .bd-celebrate-confetti span{opacity:1}
@keyframes bd-fall{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(420px) rotate(360deg);opacity:0}
}
.bd-celebrate-cov{width:90px;margin:0 auto 16px;border-radius:6px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25);position:relative;z-index:1}
.bd-celebrate-cov img{width:100%;height:auto;display:block}
.bd-celebrate-eyebrow{font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--green);margin-bottom:6px;position:relative;z-index:1}
.bd-celebrate-title{font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--text);margin:0 0 8px;line-height:1.2;position:relative;z-index:1}
.bd-celebrate-book{font-family:var(--font-d);font-size:15px;color:var(--text2);font-style:italic;margin:0 0 14px;line-height:1.4;position:relative;z-index:1}
.bd-celebrate-points{display:inline-block;background:linear-gradient(135deg,var(--green),var(--moss));color:#fff;font-family:var(--font-d);font-size:18px;font-weight:700;padding:6px 18px;border-radius:30px;margin-bottom:8px;box-shadow:0 4px 12px rgba(45,106,53,.3);position:relative;z-index:1}
.bd-celebrate-via{font-family:var(--font-m);font-size:11px;color:var(--text4);margin:0 0 18px;letter-spacing:.3px;position:relative;z-index:1}
.bd-celebrate-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.bd-celebrate-actions .btn{flex:1;min-width:140px}
@media(max-width:480px){
  .bd-celebrate{padding:24px 20px 20px}
  .bd-celebrate-title{font-size:21px}
  .bd-celebrate-actions{flex-direction:column}
  .bd-celebrate-actions .btn{width:100%}
}


/* ─── v3.18.0 Activity Feed module (.ac-*) ────────────────────────────────
   For homepage teaser and /activity page. Self-contained module.
   Note: this entire stylesheet is inside a PHP single-quoted string in
   CSS.php; do NOT use apostrophes anywhere in this CSS, even in comments. */

.hp-activity{padding:20px 0 4px}
.ac-card{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 18px 12px;box-shadow:var(--e1)}
.ac-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;max-width:720px;margin-left:auto;margin-right:auto;width:100%}
.ac-head-l{min-width:0}
.ac-head-label{font-family:var(--font-m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--text4);margin-bottom:4px}
.ac-head-title{font-family:var(--font-d);font-size:21px;font-weight:800;color:var(--text);margin:0}

.ac-tabs{display:inline-flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap}
.ac-tab{display:inline-block;padding:7px 13px;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--text3);background:var(--bg2);border:1.5px solid var(--line);border-radius:999px;text-decoration:none;transition:.15s;white-space:nowrap;line-height:1.2}
.ac-tab:hover{color:var(--text);border-color:var(--text4)}
.ac-tab-on{background:var(--green);color:#fff;border-color:var(--green)}
.ac-tab-on:hover{color:#fff;background:var(--green-h);border-color:var(--green-h)}
.ac-tab-count{display:inline-block;margin-left:4px;padding:1px 6px;background:rgba(255,255,255,.18);border-radius:999px;font-size:10.5px;font-weight:700}
.ac-tabs-page .ac-tab{font-size:12.5px;padding:8px 16px}

.ac-list{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto}
.ac-ev{display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line)}
.ac-ev:last-child{border-bottom:0}
.ac-list-page .ac-ev{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:var(--e1)}
.ac-list-page .ac-ev:last-child{margin-bottom:0}
.ac-spotlight-banner{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:0 auto 14px;max-width:720px;background:var(--green-tint);border:1.5px solid var(--green-ring);border-radius:10px;font-family:var(--font-b);font-size:13px;color:var(--green-h);font-weight:600}
.ac-spotlight-banner .ac-spotlight-icon{font-size:15px;line-height:1}
.ac-spotlight-banner .ac-spotlight-clear{margin-left:auto;font-family:var(--font-m);font-size:11.5px;color:var(--green);text-decoration:none;font-weight:700;padding:4px 10px;border:1.5px solid var(--green-ring);border-radius:999px;background:transparent;cursor:pointer;transition:.15s}
.ac-spotlight-banner .ac-spotlight-clear:hover{background:var(--green);color:#fff;border-color:var(--green)}
.ac-list-page .ac-ev-spotlight{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint),var(--e1);scroll-margin-top:80px}
.ac-cmt-box-preopen{border-top-style:solid;border-top-color:var(--green-ring)}
/* v3.20.0 — supplementary styles for new event types */
.ac-pill-silent{display:inline-block;font-family:var(--font-m);font-size:11px;font-weight:700;color:var(--green);text-decoration:none;padding:2px 8px;border-radius:999px;background:var(--green-tint);border:1px solid var(--green-ring);margin-left:6px;vertical-align:middle;letter-spacing:.3px;transition:.15s;white-space:nowrap}
.ac-pill-silent:hover{background:var(--green);color:#fff}
.ac-excerpt-qa{display:flex;flex-direction:column;gap:6px;font-style:normal}
.ac-qa-q{font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--text2);line-height:1.5}
.ac-qa-a{font-family:var(--font-b);font-size:12.5px;color:var(--text3);line-height:1.55;padding-left:14px;border-left:2px solid var(--green-ring)}
.ac-note-title{font-family:var(--font-d);font-size:13.5px;font-weight:700;color:var(--text);margin-top:6px;line-height:1.35}
/* v3.21.0 — content-type filter pills row on /activity */
.ac-pills{display:flex;gap:8px;flex-wrap:wrap;max-width:720px;margin:0 auto 18px;padding:0 4px}
.ac-pill{display:inline-block;padding:6px 14px;font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--text3);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;text-decoration:none;transition:.15s;white-space:nowrap;line-height:1.3}
.ac-pill:hover{color:var(--text);border-color:var(--text4)}
.ac-pill-on{background:var(--text);color:var(--bg);border-color:var(--text)}
.ac-pill-on:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
@media (max-width:720px){
  .ac-pills{margin-left:14px;margin-right:14px;gap:6px}
  .ac-pill{font-size:12px;padding:5px 11px}
}


/* v3.19.1 — Activity on your posts strip (top of /activity) */
.ac-unseen-strip{max-width:720px;margin:0 auto 18px;background:linear-gradient(135deg, rgba(194,139,58,.10), rgba(45,106,53,.05));border:1.5px solid var(--green-ring);border-radius:12px;padding:14px 16px;box-shadow:var(--e1)}
.ac-unseen-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--font-d);font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.2px}
.ac-unseen-icon{font-size:16px;line-height:1}
.ac-unseen-title{flex:1 1 auto}
.ac-unseen-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;background:var(--green);color:#fff;border-radius:999px;font-family:var(--font-m);font-size:11px;font-weight:700;line-height:1}
.ac-unseen-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.ac-unseen-item{border-top:1px dashed var(--green-ring)}
.ac-unseen-item:first-child{border-top:0}
.ac-unseen-link{display:flex;align-items:center;gap:10px;padding:9px 4px;text-decoration:none;color:var(--text2);font-family:var(--font-b);font-size:13px;line-height:1.4;transition:.12s}
.ac-unseen-link:hover{background:rgba(255,255,255,.5);border-radius:6px}
.ac-unseen-typeicon{font-size:14px;line-height:1;flex-shrink:0;width:18px;text-align:center}
.ac-unseen-msg{flex:1 1 auto;min-width:0;color:var(--text);font-weight:500}
.ac-unseen-time{font-family:var(--font-m);font-size:11px;color:var(--text4);flex-shrink:0;letter-spacing:.2px}
@media (max-width:720px){
  .ac-unseen-strip{margin-left:14px;margin-right:14px}
  .ac-unseen-link{flex-wrap:wrap}
  .ac-unseen-time{margin-left:auto}
}


.ac-av{display:block;text-decoration:none;flex-shrink:0;width:36px;height:36px}
.ac-av img.ac-av-img,.ac-av-img{width:36px !important;height:36px !important;border-radius:50%;object-fit:cover;display:block;max-width:36px}
.ac-av-fb{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-size:11.5px;font-weight:700}

.ac-main{flex:1 1 auto;min-width:0}
.ac-line{font-family:var(--font-b);font-size:13.5px;line-height:1.5;color:var(--text2);word-wrap:break-word}
.ac-actor{color:var(--text);font-weight:700;text-decoration:none}
.ac-actor:hover{color:var(--green)}
.ac-verb{color:var(--text3)}
.ac-target{color:var(--text2)}
.ac-bk-link{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--text4)}
.ac-bk-link:hover{color:var(--green);border-bottom-color:var(--green)}
.ac-rating{display:inline-flex;align-items:center;gap:3px;margin-left:4px;vertical-align:middle}
.ac-rating svg{width:12px !important;height:12px !important}
.ac-excerpt{margin-top:6px;padding:8px 11px;background:var(--bg2);border-left:3px solid var(--text4);border-radius:0 6px 6px 0;font-family:var(--font-b);font-size:12.5px;color:var(--text2);line-height:1.55;font-style:italic}
.ac-excerpt-q{border-left-color:var(--green)}
.ac-meta{margin-top:5px;font-family:var(--font-m);font-size:11px;color:var(--text4);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ac-act{background:none;border:none;cursor:pointer;font-family:var(--font-m);font-size:11px;color:var(--text4);padding:2px 6px;border-radius:6px;transition:.15s;display:inline-flex;align-items:center;gap:3px}
.ac-act:hover{color:var(--text2);background:var(--bg2)}
.ac-act-on{color:#e11d48}
.ac-act-rct-static{color:var(--text4);cursor:default}

/* Book cover thumb on the right — defensively sized, no flex grow */
.ac-cover{flex-shrink:0;flex-grow:0;display:block;text-decoration:none;width:44px;height:66px;overflow:hidden;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.ac-cover img{width:44px !important;height:66px !important;max-width:44px !important;max-height:66px !important;object-fit:cover;display:block}
.ac-cover-fb{width:44px;height:66px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-size:8px;font-weight:700;text-align:center;padding:4px;line-height:1.1;border-radius:4px}

.ac-foot{margin-top:10px;padding-top:8px;text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.ac-see-all{font-family:var(--font-m);font-size:12.5px;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:.4px}
.ac-see-all:hover{color:var(--green-h);text-decoration:underline}

/* Inline comment box under an event */
.ac-cmt-box{flex-basis:100%;width:100%;margin-top:10px;padding-top:10px;border-top:1.5px dashed var(--line);order:99}
.ac-cmt-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;font-family:var(--font-b);font-size:12.5px;color:var(--text3)}
.ac-cmt-list[data-loading]{color:var(--text4);font-style:italic}
.ac-cmt-empty{color:var(--text4);font-size:12px;font-style:italic;padding:6px 0}
.ac-cmt-item{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:flex-start}
.ac-cmt-av{display:block;flex-shrink:0;text-decoration:none}
.ac-cmt-av-img{width:28px !important;height:28px !important;border-radius:50%;object-fit:cover;display:block;max-width:28px}
.ac-cmt-av-fb{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-size:10px;font-weight:700}
.ac-cmt-body{min-width:0}
.ac-cmt-meta{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;flex-wrap:wrap}
.ac-cmt-name{color:var(--text);font-weight:700;text-decoration:none;font-size:12.5px}
.ac-cmt-name:hover{color:var(--green)}
.ac-cmt-time{font-family:var(--font-m);font-size:10.5px;color:var(--text4)}
.ac-cmt-text{font-family:var(--font-b);font-size:13px;color:var(--text2);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ac-cmt-form textarea{width:100%;min-height:48px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg2);font-family:var(--font-b);font-size:13px;color:var(--text);resize:vertical}
.ac-cmt-form textarea:focus{outline:none;border-color:var(--green)}
.ac-cmt-form-foot{display:flex;justify-content:flex-end;margin-top:6px}

@media (max-width:720px){
  .ac-head{flex-direction:column;align-items:flex-start;gap:10px}
  .ac-tabs{align-self:stretch;width:100%}
  .ac-tab{flex:1;text-align:center}
  .ac-ev{gap:10px}
  .ac-cover{width:38px;height:57px}
  .ac-cover img{width:38px !important;height:57px !important;max-width:38px !important;max-height:57px !important}
  .ac-av,.ac-av img.ac-av-img,.ac-av-img{width:32px !important;height:32px !important;max-width:32px}
  .ac-line{font-size:13px}
}

/* ─── v3.19.0 Onboarding wizard (.ob-*) ──────────────────────────────────────
   Renders at /welcome plus a slim resume banner on the homepage for
   state=0 users. Note: no apostrophes anywhere in this CSS block
   (this file is a PHP single-quoted string). */

.ob-wrap{background:var(--bg);min-height:80vh;padding:30px 0 80px}
.ob-shell{max-width:780px;margin:0 auto;padding:0 18px}

.ob-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:32px;padding:0 4px}
.ob-progress{display:flex;align-items:center;gap:8px}
.ob-pdot{width:36px;height:5px;border-radius:3px;background:var(--bg2);border:1px solid var(--line);transition:.25s}
.ob-pdot-on{background:var(--green);border-color:var(--green)}
.ob-skip-all{background:none;border:none;color:var(--text3);font-family:var(--font-m);font-size:12px;font-weight:600;cursor:pointer;padding:6px 12px;border-radius:6px;text-decoration:none;letter-spacing:.3px}
.ob-skip-all:hover{color:var(--text);background:var(--bg2)}

.ob-step{display:none;text-align:center}
.ob-step.ob-active{display:block;animation:obFadeIn .25s ease-out}
@keyframes obFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ob-illus{font-size:54px;line-height:1;margin-bottom:14px;display:inline-block}
.ob-eyebrow{font-family:var(--font-m);font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.ob-h1{font-family:var(--font-d);font-size:34px;font-weight:900;color:var(--text);line-height:1.2;margin:0 0 14px;letter-spacing:-.5px}
.ob-h2{font-family:var(--font-d);font-size:26px;font-weight:800;color:var(--text);line-height:1.25;margin:0 0 10px;letter-spacing:-.3px}
.ob-h2 em{font-style:italic;color:var(--green);font-weight:700}
.ob-sub{font-family:var(--font-b);font-size:14.5px;color:var(--text3);line-height:1.6;max-width:520px;margin:0 auto 28px}

.ob-step-cta{margin-top:18px}
.ob-btn{display:inline-block;padding:13px 26px;font-family:var(--font-b);font-size:14px;font-weight:700;letter-spacing:.3px;border-radius:10px;border:1.5px solid var(--green);background:var(--green);color:#fff;cursor:pointer;text-decoration:none;transition:.15s}
.ob-btn:hover{background:var(--green-h);border-color:var(--green-h)}
.ob-btn-primary[disabled]{background:var(--bg2);border-color:var(--line);color:var(--text4);cursor:not-allowed;opacity:.7}
.ob-btn-primary[disabled]:hover{background:var(--bg2);border-color:var(--line)}

/* Grid for books / authors */
.ob-grid{display:grid;gap:14px;margin:8px 0 24px;text-align:left}
.ob-book-grid{grid-template-columns:repeat(4, 1fr)}
.ob-author-grid{grid-template-columns:repeat(4, 1fr)}

.ob-card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:.15s;text-align:left;font-family:var(--font-b);font-size:13px;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.ob-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--e1)}
.ob-card.ob-picked{border-color:var(--green);background:var(--green-tint);box-shadow:0 0 0 3px var(--green-ring) inset}

.ob-pick-tick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:none;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1}
.ob-card.ob-picked .ob-pick-tick{display:flex}

/* Book card */
.ob-bk-cover{width:90px;height:135px;border-radius:6px;overflow:hidden;background:var(--bg2);flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ob-bk-cover img{width:100% !important;height:100% !important;object-fit:cover;display:block}
.ob-bk-cover-fb{display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-size:10px;font-weight:700;padding:8px;text-align:center;line-height:1.2}
.ob-bk-meta{display:flex;flex-direction:column;gap:2px;text-align:center;width:100%}
.ob-bk-title{font-family:var(--font-d);font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3}
.ob-bk-author{font-family:var(--font-m);font-size:11px;color:var(--text3);letter-spacing:.2px}

/* Author card */
.ob-au-photo{width:80px;height:80px;border-radius:50%;overflow:hidden;background:var(--bg2);flex-shrink:0;display:block}
.ob-au-photo img{width:100% !important;height:100% !important;object-fit:cover;display:block;border-radius:50%}
.ob-au-photo-fb{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-d);font-size:22px;font-weight:700}
.ob-au-meta{display:flex;flex-direction:column;gap:2px;text-align:center;width:100%}
.ob-au-name{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
.ob-au-verified{display:inline-block;font-size:10px;color:var(--green)}
.ob-au-state{font-family:var(--font-m);font-size:11px;color:var(--text3);letter-spacing:.2px}

/* Step footer (skip + continue side by side) */
.ob-step-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;border-top:1.5px dashed var(--line);margin-top:8px}
.ob-skip-step{background:none;border:none;color:var(--text3);font-family:var(--font-m);font-size:13px;font-weight:600;cursor:pointer;padding:8px 0;letter-spacing:.3px}
.ob-skip-step:hover{color:var(--text)}
.ob-next-btn{min-width:200px}

/* Giveaway card */
.ob-giveaway-card{display:flex;gap:18px;align-items:center;padding:20px;background:linear-gradient(135deg, rgba(194,139,58,.08), rgba(45,106,53,.05));border:1.5px solid var(--green-ring);border-radius:14px;margin:8px 0 24px;text-align:left}
.ob-gw-cover{width:120px;height:180px;flex-shrink:0;border-radius:8px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.ob-gw-cover img{width:120px !important;height:180px !important;object-fit:cover;display:block}
.ob-gw-cover-fb{display:flex;align-items:center;justify-content:center;font-size:48px;background:var(--bg2)}
.ob-gw-body{flex:1 1 auto;min-width:0}
.ob-gw-title{font-family:var(--font-d);font-size:19px;font-weight:800;color:var(--text);line-height:1.3;margin-bottom:6px}
.ob-gw-prize{font-family:var(--font-b);font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:12px}
.ob-gw-cost{font-family:var(--font-m);font-size:12px;color:var(--text3);margin-bottom:6px}
.ob-gw-cost-tag{display:inline-block;background:var(--amber);color:#fff;padding:3px 10px;border-radius:999px;font-family:var(--font-m);font-size:11px;font-weight:700;letter-spacing:.5px;margin-right:6px}
.ob-gw-deadline{font-family:var(--font-m);font-size:11.5px;color:var(--text3);letter-spacing:.3px}

.ob-step-foot-gw{justify-content:flex-end;gap:14px}
.ob-step-foot-gw .ob-skip-step{margin-right:auto}

/* Done step extras */
.ob-recap{list-style:none;padding:0;margin:8px auto 28px;max-width:380px;text-align:left}
.ob-recap li{font-family:var(--font-b);font-size:15px;color:var(--text2);padding:10px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;margin-bottom:8px}
.ob-recap li strong{color:var(--green);font-weight:800}
.ob-secondary-links{margin-top:22px;font-family:var(--font-m);font-size:12.5px;color:var(--text3);letter-spacing:.2px}
.ob-secondary-links a{color:var(--green);text-decoration:none;font-weight:700;margin:0 4px}
.ob-secondary-links a:hover{text-decoration:underline}

/* ── Resume banner (homepage) ── */
.ob-resume-bar{background:linear-gradient(135deg, var(--green-tint), rgba(194,139,58,.08));border-bottom:1.5px solid var(--green-ring);padding:10px 0}
.ob-resume-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:0 18px;flex-wrap:wrap}
.ob-resume-emoji{font-size:18px;line-height:1;flex-shrink:0}
.ob-resume-text{font-family:var(--font-b);font-size:13.5px;color:var(--text);flex:1 1 auto;min-width:200px;line-height:1.4}
.ob-resume-cta{flex-shrink:0;background:var(--green);color:#fff;text-decoration:none;padding:7px 14px;border-radius:8px;font-family:var(--font-m);font-size:12px;font-weight:700;letter-spacing:.3px;transition:.15s;white-space:nowrap}
.ob-resume-cta:hover{background:var(--green-h);color:#fff}
.ob-resume-dismiss-form{margin:0;display:inline-block}
.ob-resume-x{background:transparent;border:none;color:var(--text3);font-size:22px;line-height:1;cursor:pointer;padding:0 6px;font-weight:300;transition:.15s}
.ob-resume-x:hover{color:var(--text)}

/* Responsive */
@media (max-width:720px){
  .ob-wrap{padding:18px 0 50px}
  .ob-shell{padding:0 14px}
  .ob-h1{font-size:26px}
  .ob-h2{font-size:21px}
  .ob-sub{font-size:13.5px}
  .ob-book-grid{grid-template-columns:repeat(2, 1fr)}
  .ob-author-grid{grid-template-columns:repeat(2, 1fr)}
  .ob-bk-cover{width:80px;height:120px}
  .ob-au-photo,.ob-au-photo-fb{width:64px;height:64px;font-size:18px}
  .ob-step-foot{flex-direction:column;align-items:stretch;gap:10px}
  .ob-step-foot .ob-skip-step{order:2;text-align:center}
  .ob-step-foot .ob-next-btn{order:1;width:100%}
  .ob-giveaway-card{flex-direction:column;text-align:center}
  .ob-gw-body{text-align:center}
  .ob-step-foot-gw{flex-direction:column;align-items:stretch}
  .ob-step-foot-gw .ob-skip-step{order:2;margin:0;text-align:center}
  .ob-step-foot-gw .ob-btn{order:1;width:100%}
  .ob-resume-inner{flex-wrap:wrap}
  .ob-resume-text{font-size:12.5px}
  .ob-pdot{width:24px}
}

/* ─── v3.21.1 /network compact card module (.nw-*) ───────────────────────── */
.nw-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.nw-sec-title{font-family:var(--font-d);font-size:23px;font-weight:800;color:var(--text);line-height:1.2;letter-spacing:-.3px}
.nw-sec-count{display:inline-block;margin-left:6px;padding:2px 9px;background:var(--bg2);color:var(--text3);border-radius:999px;font-family:var(--font-m);font-size:12px;font-weight:700;vertical-align:middle}
.nw-sec-sub{font-family:var(--font-b);font-size:13px;color:var(--text3);margin-top:3px;line-height:1.4}
.nw-sec-link{font-family:var(--font-m);font-size:12.5px;font-weight:700;color:var(--green);text-decoration:none;letter-spacing:.3px;padding:6px 12px;border-radius:8px;transition:.15s;white-space:nowrap}
.nw-sec-link:hover{background:var(--green-tint);color:var(--green-h)}
.nw-sec-foot{margin-top:12px;text-align:center}

.nw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}

.nw-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;transition:.12s;min-width:0}
.nw-card:hover{border-color:var(--text4);box-shadow:var(--e1)}
.nw-card-av-link{flex-shrink:0;text-decoration:none;display:block}
.nw-card-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.nw-card-name{font-family:var(--font-d);font-size:14.5px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.nw-card-name:hover{color:var(--green)}
.nw-card-handle{font-family:var(--font-m);font-size:11px;color:var(--text4);margin-top:0;line-height:1.3}
.nw-card-meta{font-family:var(--font-b);font-size:11.5px;color:var(--text3);line-height:1.4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-card-verified{display:inline-block;font-size:11px;color:var(--green);font-weight:900;margin-left:2px;vertical-align:baseline}

.nw-card-btn-form{margin:0;flex-shrink:0}
.nw-card-btn{padding:7px 14px;font-family:var(--font-b);font-size:12px;font-weight:700;letter-spacing:.3px;border-radius:8px;cursor:pointer;transition:.12s;white-space:nowrap;border:1.5px solid var(--green)}
.nw-card-btn-follow{background:var(--green);color:#fff}
.nw-card-btn-follow:hover{background:var(--green-h);border-color:var(--green-h)}
.nw-card-btn-following{background:var(--surface);color:var(--text2);border-color:var(--line)}
.nw-card-btn-following:hover{background:var(--bg2);color:var(--text);border-color:var(--text4)}

.nw-empty{background:var(--surface);border:1.5px dashed var(--line);border-radius:12px;padding:20px;color:var(--text3);font-family:var(--font-b);font-size:13.5px;text-align:center}

@media (max-width:520px){
  .nw-grid{grid-template-columns:1fr;gap:8px}
  .nw-card{padding:11px 12px;gap:10px}
  .nw-card-btn{padding:6px 12px;font-size:11.5px}
  .nw-sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .nw-sec-title{font-size:21px}
}
.nr-tabs{display:none}
@media(max-width:900px){
  /* v4.9.1 — the bar's height, stated once. Design.php's book bar sits on top
     of this bar and has to know how tall it is; when the two carried the number
     separately they drifted by 4px within one release and the book bar clipped
     it. One custom property, two readers, no drift. */
  :root{--nr-tabh:60px}
  .nr-tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:350;
    justify-content:space-around;align-items:stretch;
    /* Opaque, not translucent. A blurred bar over cream still let the page
       read through behind the labels, and a nav you can see the page through
       is a nav you have to look twice at. */
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(18,25,15,.06);
    /* env() is 0 wherever there is no inset, so this is safe everywhere and
       correct on a phone with a home indicator. */
    padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px))}
  .nr-tab{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;min-height:46px;padding:4px 2px;
    font-family:var(--font-b);font-size:10px;font-weight:500;letter-spacing:.01em;
    color:var(--text4);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .nr-tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .nr-tab.on{color:var(--green);font-weight:700}
  .nr-tab.on svg{stroke-width:2}
  .nr-tab:focus-visible{outline:2px solid var(--green);outline-offset:-3px;border-radius:8px}
  /* Room for it. Without this the bar sits on top of the last thing on
     every page, which on the Commons is the reply box. */
  body{padding-bottom:calc(var(--nr-tabh) + 4px + env(safe-area-inset-bottom,0px))}
  /* An installed app has no browser chrome, so the sticky nav sits under the
     status bar unless it is told about it. */
  @media(display-mode:standalone){
    .mnav{padding-top:env(safe-area-inset-top,0px)}
  }
}[hidden]{display:none!important}

.nr-install{border-top:1px solid rgba(255,255,255,.08);margin-top:8px;
  padding:16px 0 4px;text-align:center}
.nr-install-btn{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-b);font-size:13px;font-weight:600;color:#0A1A0C;
  background:var(--green2);border:0;border-radius:8px;padding:9px 18px;
  cursor:pointer;transition:filter .15s}
.nr-install-btn:hover{filter:brightness(1.08)}
.nr-install-btn:focus-visible{outline:2px solid var(--green2);outline-offset:3px}
.nr-install-help{font-size:12.5px;color:rgba(255,255,255,.45);
  max-width:52ch;margin:0 auto;line-height:1.7}
.nr-install-help b{display:block;color:rgba(255,255,255,.7);
  font-family:var(--font-d);font-size:14px;font-weight:600;margin-bottom:5px}
.nr-install-help p b{display:inline;font-family:var(--font-b);font-size:inherit;
  color:rgba(255,255,255,.8)}.ag-offer-row{border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:14px;background:var(--surface2)}
.ag-offer-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.ag-offer-cover{width:54px;height:80px;object-fit:cover;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.18);flex-shrink:0;background:var(--bg2)}
.ag-offer-who{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--text)}
.ag-offer-who a{font-family:var(--font-b);font-size:12px;font-weight:500;color:var(--green);margin-left:6px}
.ag-offer-what{font-size:13.5px;color:var(--text2);margin:3px 0 6px}
.ag-offer-what a{color:var(--text)}
.ag-record{font-family:var(--font-m);font-size:11px;color:var(--text3);letter-spacing:.3px}
.ag-offer-note{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--green);background:var(--surface);border-radius:0 8px 8px 0;font-size:14px;color:var(--text);line-height:1.5}
.ag-offer-note span{display:block;margin-top:4px;font-size:11.5px;color:var(--text3)}
.ag-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ag-offer-form .fg{margin-bottom:12px}
.ag-offer-form .fg label:not(.fmt-pill) small,.ag-offer-decline .fg label:not(.fmt-pill) small{font-weight:400;color:var(--text3);margin-left:4px}
.ag-offer-check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:0 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.ag-offer-check input{width:auto;margin-top:3px;accent-color:var(--green);flex-shrink:0}
.ag-offer-check b{display:block;font-size:13px;color:var(--text);font-weight:600}
.ag-offer-check small{display:block;font-size:12px;color:var(--text3);line-height:1.45;margin-top:2px}
.ag-offer-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.ag-offer-actions span{font-size:12px;color:var(--text3)}
.ag-offer-decline{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.ag-offer-decline summary{cursor:pointer;font-size:12.5px;color:var(--err);font-weight:600;list-style:none}
.ag-offer-decline summary::-webkit-details-marker{display:none}
.ag-offer-decline form{margin-top:10px}
.ag-decline-btn{color:var(--err)!important;border-color:var(--err)!important}
@media (max-width:700px){.ag-offer-grid{grid-template-columns:1fr}}

.nla{max-width:1240px}
.nla-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.nla-head .admin-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nla-intro{font-size:13px;color:var(--text3);margin:6px 0 0;max-width:760px;line-height:1.55}
.nla-head-btns{display:flex;gap:8px;flex-wrap:wrap}
.nla-note{padding:11px 14px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-size:13px;color:var(--text2);margin:0 0 14px;line-height:1.55}
.nla-note.is-warn{background:#FFF8EB;border-color:#F3D9A4;color:#7A4B0B}
.nla-note.is-bad{background:#FDF0EE;border-color:#F0C4BB;color:#8B2A1A}
.nla-note a{color:inherit;font-weight:600;text-decoration:underline}
.nla-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 10px}
.nla-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
a.nla-tile:hover{border-color:var(--green);transform:translateY(-1px)}
.nla-tile.is-on{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.nla-tile.is-warn .nla-tile-n{color:var(--err)}
.nla-tile-n{font-family:var(--font-d);font-size:28px;font-weight:700;line-height:1.1}
.nla-tile-n small{font-size:15px;color:var(--text3);font-weight:500}
.nla-tile-l{font-size:13px;font-weight:600;color:var(--text)}
.nla-tile-s{font-size:11.5px;color:var(--text3);line-height:1.4}
.nla-small{font-size:12px;color:var(--text3);margin:0 0 14px}
.nla-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 14px}
.nla-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.nla-card-head h3{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--text);margin:0}
.nla-card-head h3 small,.nla-card-head>small{font-family:var(--font-m);font-size:11px;color:var(--text3);font-weight:400;letter-spacing:.3px}
.nla-x{font-size:12px;color:var(--text3)}
.nla-p{font-size:13px;color:var(--text2);line-height:1.6;margin:0 0 12px}
.nla-muted{font-size:13px;color:var(--text3);margin:0}
.nla-ask{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;border-color:var(--green-ring);background:var(--surface2)}
.nla-ask h3{font-family:var(--font-d);font-size:16px;margin:0 0 4px}
.nla-ask p{font-size:13px;color:var(--text2);margin:0;max-width:760px;line-height:1.55}
.nla-who{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;max-height:420px;overflow:auto}
.nla-who-row{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text);min-width:0}
.nla-who-row:hover{border-color:var(--green)}
.nla-who-row b{font-size:13px}
.nla-who-row span{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nla-who-row small{font-size:11px;color:var(--text3)}
.nla-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.nla-card-head+.nla-row,.nla-card-head+.nla-muted+.nla-row{border-top:0}
.nla-row-main{min-width:0;flex:1}
.nla-row-t{font-weight:600;color:var(--text);font-size:14.5px;text-decoration:none}
.nla-row-t:hover{color:var(--green)}
.nla-row-s{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.5}
.nla-bad{color:var(--err)}
.nla-ok{color:var(--green);font-weight:600}
.nla-tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:2px}
.nla-pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--surface2);color:var(--text2);white-space:nowrap;font-family:var(--font-b);letter-spacing:0}
.nla-pill.is-sent{background:var(--green-tint);color:var(--green)}
.nla-pill.is-sending{background:#FFF1DB;color:#9A5B07}
.nla-pill.is-scheduled{background:#E8EFFD;color:#1D4ED8}
.nla-pill.is-paused,.nla-pill.is-cancelled{background:var(--surface2);color:var(--text3)}
.nla-pill.is-bad{background:#FDE8E4;color:#9B2C1B}
.nla-bar{height:6px;background:var(--surface2);border-radius:3px;margin-top:8px;overflow:hidden;max-width:420px}
.nla-bar i{display:block;height:100%;background:var(--green);border-radius:3px}
.nla-bar.is-big{max-width:none;margin:2px 0 14px}
.nla-batch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 12px}
.nla-batch span{font-size:12px;color:var(--text3)}
.nla-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.nla-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text);cursor:pointer;line-height:1.45}
.nla-check input{width:auto!important;margin-top:3px;accent-color:var(--green)}
.nla-check small{display:block;font-size:11.5px;color:var(--text3)}
.nla-check-fg{display:flex;align-items:flex-end;padding-bottom:10px}
.nla .fg label:not(.fmt-pill) small{font-weight:400;color:var(--text3);margin-left:4px}
.nla-steps{margin:0 0 0 18px;font-size:13px;color:var(--text2);line-height:1.7;max-width:920px}
.nla-steps li{margin-bottom:8px}
.nla-steps code{font-size:12px;background:var(--surface2);padding:1px 5px;border-radius:4px}
.nla-code{display:block;user-select:all;font-family:var(--font-m);font-size:12px;padding:8px 10px;background:var(--surface2)!important;border:1px solid var(--line);border-radius:8px;margin:6px 0;word-break:break-all}
.nla-editor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.nla-ed-side{position:sticky;top:84px}
.nla-tools{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px;border:1.5px solid var(--line2);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface2)}
.nla-tools button{border:1px solid transparent;background:none;border-radius:6px;padding:5px 9px;font-size:12.5px;color:var(--text2);cursor:pointer;font-family:var(--font-b);line-height:1.2}
.nla-tools button:hover{background:var(--surface);border-color:var(--line);color:var(--text)}
.nla-sep{width:1px;height:18px;background:var(--line2);margin:0 3px}
.nla-blocks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border:1.5px solid var(--line2);border-bottom:0;background:var(--surface)}
.nla-blocks>span{font-size:11.5px;color:var(--text3);margin-right:2px}
.nla-chip{border:1px solid var(--green-ring);background:var(--green-tint);color:var(--green);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-b)}
.nla-chip:hover{background:var(--green);color:#fff}
.nla .nla-editor textarea#nl-body{border-radius:0 0 8px 8px;min-height:440px;font-size:14.5px;line-height:1.7;font-family:var(--font-b);resize:vertical}
.nla-help{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--text3);margin-top:6px}
.nla-actions{display:flex;flex-direction:column;gap:12px}
.nla-act-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.nla-act-send{padding-top:12px;border-top:1px solid var(--line)}
.nla .fg label.nla-check:not(.fmt-pill){font-family:var(--font-b);font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text)}
.nla-grow{flex:1}
.nla-when{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--text3)}
.nla-when input{border:1.5px solid var(--line2);border-radius:8px;padding:6px 8px;font-size:12.5px;font-family:var(--font-b);color:var(--text);background:#fff}
.nla-del{color:var(--err)!important}
.nla-preview iframe{width:100%;height:720px;border:1px solid var(--line);border-radius:8px;background:#f3f4f6}
.nla-controls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.nla-link{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.nla-link span{word-break:break-all;color:var(--text2)}
.nla-fail{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.nla-fail span{color:var(--text3);font-size:12px}
.nla-fail small{display:block;color:var(--text3);font-size:11.5px}
@media (max-width:1100px){.nla-editor{grid-template-columns:1fr}.nla-ed-side{position:static}.nla-preview iframe{height:560px}}
@media (max-width:760px){.nla-2col{grid-template-columns:1fr}.nla-card{padding:14px}}.admin-sb-h{font-family:var(--font-m);font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--text4,#9ca3af);padding:14px 13px 6px;font-weight:600}
.admin-sb-h:first-child{padding-top:2px}
@media (max-width:900px){.admin-sb-h{flex-basis:100%;padding:8px 4px 2px}.admin-sb-h:first-child{padding-top:0}}
.nla-tag.is-author{color:#7A4B0B;border-color:#F3D9A4;background:#FFF8EB}.nla-set-btn{display:inline-flex;align-items:center;gap:6px}
.nla-todo-n{display:inline-block;font-size:10.5px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;background:#FDECEA;color:var(--err);border:1px solid #F5C2BC}
#nl-ppl,#nl-settings,#nl-import,#nl-setup{scroll-margin-top:96px}
.nla-ppl{display:flex;flex-direction:column;max-height:520px;overflow:auto;border-top:1px solid var(--line)}
.nla-ppl-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:4px 14px;align-items:baseline;padding:9px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);font-size:13px}
a.nla-ppl-row:hover{background:var(--green-tint)}
.nla-ppl-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nla-ppl-n i{font-style:normal;color:var(--text3);font-size:12px}
.nla-ppl-e{min-width:0;color:var(--text2);word-break:break-all;font-size:12.5px}
.nla-ppl-e small{display:block;color:var(--text3);font-size:11.5px;word-break:normal}
.nla-ppl-row time{font-family:var(--font-m);font-size:11.5px;color:var(--text3);white-space:nowrap}
@media (max-width:760px){.nla-ppl-row{grid-template-columns:1fr auto}.nla-ppl-e{grid-column:1/-1;grid-row:2}}.nr-mail-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:0 0 18px;max-width:720px;font-size:13.5px;line-height:1.55;color:var(--text2);scroll-margin-top:96px}
.nr-mail-card h3{font-family:var(--font-d);font-size:15px;color:var(--text);margin:0 0 6px}
.nr-mail-card p{margin:0 0 8px}
.nr-mail-card code{background:var(--bg2);padding:1px 6px;border-radius:4px;font-size:12px;word-break:break-all}
.nr-mail-warn{color:#8a5a00;background:#FFF8EB;border:1px solid #F3D9A4;border-radius:8px;padding:8px 10px}
.nr-mail-small{font-size:12px;color:var(--text3)}.gwa-deliv{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr);gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.gwa-h{font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text4);margin-bottom:6px}
.gwa-addr{font-size:13px;line-height:1.55;color:var(--text);user-select:all}
.gwa-copy{margin-top:8px;font-size:11.5px;padding:4px 10px;border-radius:7px;border:1px solid var(--line2,#d6d1c4);background:var(--surface2);color:var(--text2);cursor:pointer;font-family:var(--font-b)}
.gwa-copy:hover{border-color:var(--green);color:var(--green)}
.gwa-muted{font-size:12.5px;color:var(--text3);margin:0;line-height:1.5}
.gwa-tl{list-style:none;margin:0 0 12px;padding:0;position:relative}
.gwa-tl li{position:relative;padding:0 0 12px 22px;font-size:13px;color:var(--text);line-height:1.4}
.gwa-tl li:last-child{padding-bottom:0}
.gwa-tl li::before{content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.gwa-tl li:last-child::before{display:none}
.gwa-tl li.is-done::before{background:var(--green)}
.gwa-dot{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line2,#cfc9bb);background:var(--surface);box-sizing:border-box}
.gwa-tl li.is-done .gwa-dot{background:var(--green);border-color:var(--green)}
.gwa-tl li.is-now .gwa-dot{box-shadow:0 0 0 4px var(--green-tint)}
.gwa-tl li.is-todo b{color:var(--text4);font-weight:500}
.gwa-tl time{font-family:var(--font-m);font-size:11px;color:var(--text4);margin-left:8px}
.gwa-tl-sub{display:block;font-size:12px;color:var(--text3);margin-top:2px}
.gwa-tl-sub a{color:var(--green)}
.gwa-ok{color:var(--green);font-weight:700}
.gwa-next>summary{list-style:none;display:inline-flex;cursor:pointer;font-size:12.5px}
.gwa-next>summary::-webkit-details-marker,.gwa-more>summary::-webkit-details-marker{display:none}
.gwa-next[open]>summary{opacity:.55}
.gwa-more{margin-top:10px}
.gwa-more>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--text3);text-decoration:underline;text-underline-offset:2px;display:inline-block}
.gwa-more>p{margin:8px 0 0}
.gwa-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;padding:12px;background:var(--surface2);border:1px solid var(--line);border-radius:10px}
.gwa-f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--text3);font-weight:600}
.gwa-f small{font-weight:400;color:var(--text4)}
.gwa-f input,.gwa-f select{width:100%;box-sizing:border-box;border:1.5px solid var(--line2,#d6d1c4);border-radius:8px;padding:8px 10px;font-size:13px;font-family:var(--font-b);background:#fff;color:var(--text);min-height:38px}
.gwa-wide{grid-column:1/-1}
.gwa-tell{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2)}
.gwa-tell input{width:16px;height:16px;accent-color:var(--green)}
.gwa-tell{flex-wrap:wrap}.gwa-tell small{color:var(--text4);font-size:11.5px}
.gwa-settle{background:#FFF8EB;border:1px solid #F3D9A4;border-radius:12px;padding:16px 18px;margin-bottom:18px}
.gwa-settle h3{font-family:var(--font-d);font-size:15px;margin:0 0 4px;color:var(--text)}
.gwa-settle p{font-size:12.5px;color:var(--text2);margin:0 0 10px;line-height:1.5;max-width:760px}
.gwa-settle-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid #F3E3BF;font-size:13px;cursor:pointer}
.gwa-settle-row input{margin-top:2px;width:16px;height:16px;accent-color:var(--green);flex-shrink:0}
.gwa-settle-row small{color:var(--text4)}
.gwa-settle .btn{margin-top:10px}
@media (max-width:760px){
  #gw-winners{padding:14px!important}
  #gw-winners .atbl thead{display:none}
  #gw-winners .atbl,#gw-winners .atbl tbody,#gw-winners .atbl tr,#gw-winners .atbl td{display:block;width:100%;box-sizing:border-box}
  #gw-winners .atbl tr.gw-row{padding:12px 12px 6px;border-top:1px solid var(--line)}
  #gw-winners .atbl tr.gw-row td{padding:2px 0;border:none}
  #gw-winners .atbl tr.gw-row td:first-child{font-weight:700}
  #gw-winners .atbl tr.gw-deliv td{padding:0 10px 12px;border:none}
  #gw-winners .atbl tr.gw-deliv td:first-child{display:none}
  .gwa-deliv{grid-template-columns:1fr;gap:12px;padding:12px}
  .gwa-form{grid-template-columns:1fr}
}.mnav-scrim{display:none}
@media(max-width:900px){
  .mnav-links{max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 14px}
  .mnav-links>a.nl{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;border-radius:10px}
  .nl-group{display:flex;flex-direction:column;align-items:stretch;width:100%;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
  .nl-group-btn{pointer-events:none;justify-content:flex-start;padding:2px 12px 4px;font-family:var(--font-m);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text4);background:none!important}
  .nl-group-btn .nl-caret{display:none}
  .nl-group-drop,.nl-group-drop.open{display:flex;position:static;background:none;border:none;box-shadow:none;padding:0;margin:0;min-width:0}
  .nl-group-drop a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;border-radius:10px;white-space:normal}
  .mnav-scrim{display:block;position:fixed;inset:0;background:rgba(15,29,22,.38);z-index:380;opacity:0;pointer-events:none;transition:opacity .18s}
  .mnav-scrim.open{opacity:1;pointer-events:auto}
  /* 4.26.0 (applied by hand on production 19 Oct 2026) — the page is locked
     on body only. body always carries overflow-x:hidden; while html is
     visible that passes up to the window, but once html was hidden too,
     body became its own scroll box, the sticky nav measured itself
     against body (scrolled 0) and went back to the top of the page,
     taking the open menu off-screen. Never hide overflow on html here. */
  html.nr-nav-open body{overflow:hidden}
  .mnav-links{overscroll-behavior:contain}
  .mnav-scrim{touch-action:none}
  html.nr-nav-open .mnav{z-index:400}
  .nav-burger{min-width:40px;min-height:40px;font-size:20px;line-height:1}
}
/* ══════════════════════════════════════════════════════════════════════════
   V4 TOKENS
   Colour tokens are inherited from the v3 :root block, which is already
   well-disciplined (1758 var() uses against 195 raw hexes). Nothing here
   redefines a colour. What was missing was type, space, and rhythm.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Type scale. 1.25 ratio, rounded to whole pixels. */
  /* v4.1.0 — five steps that are actually distinguishable, not nine that are
     not. The old --t-sm 13 against --t-xs 12 meant a card title and its author
     line were the same thing to a reader; the gap between adjacent steps is now
     at least 2px below 20 and proportional above it. */
  --t-2xs:10px;   /* tag caps only, never body text       */
  --t-xs:12px;    /* meta, timestamps, tags               */
  --t-sm:14px;    /* secondary body, captions             */
  --t-base:16px;  /* body                                 */
  --t-md:16px;    /* MINIMUM for any input. See note below */
  --t-lg:18px;    /* the thought / quote voice            */
  --t-xl:22px;    /* panel headings                       */
  --t-2xl:27px;   /* page title, mobile                   */
  --t-3xl:34px;   /* page title, desktop                  */
  --t-4xl:42px;   /* hero only, used sparingly            */

  /* v4.1.0 — two weights, used deliberately. Almost everything was 500, which
     reads as neither bold nor regular. A name or a title is 600; everything
     else is 400 and gets its emphasis from size and colour instead. */
  --w-name:600;
  --w-body:400;
  /* v4.1.2 — display type needs LESS weight than UI type to read as equally
     emphatic. That is optical sizing: at 34px a stroke that reads as confident
     is heavy at 14px, and the reverse. 4.1.1 put page titles on --w-name (600)
     to fix them reading thin at 400, and overshot — on a phone the hero came
     out as a slab. Headings get their own token; card titles and reader names
     keep 600, because small text does need it. */
  --w-display:300;
  /* v4.6.4 — the weight for the NAME of something: a book title, an author.
     --w-display stays light because the only other thing wearing .v4-h1 is
     the homepage hero, which is a sentence rather than a name. Both live
     inside the loaded 300-900 range, so both render as asked. */
  --w-title:600;

  /* Line heights, paired to the scale rather than set ad hoc. */
  --lh-tight:1.2;
  --lh-snug:1.45;
  --lh-body:1.6;

  /* Space scale. Every margin, padding and gap picks from these eight. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* Radius */
  --rad-sm:6px; --rad:10px; --rad-lg:14px; --rad-full:999px;

  /* Measure. Prose never runs wider than this. */
  --measure:62ch;

  /* Avatar sizes, so face stacks line up across pages. */
  --face-sm:26px; --face:31px; --face-lg:44px; --face-xl:96px;

  /* v4.0.0-beta.4 — stars. --amber (#7A5C1E) is a dark olive-brown that reads
     as mud at star size. It is consumed by v3 award chips and .btn-amber, so it
     is left alone; this token is used only by .v4 .v4-star-on. */
  --star:#D9A32B;
  --star-off:rgba(217,163,43,.18);
}

/* v4.6.0 — the CSS half of the colour-scheme declaration. The meta tag tells
   the browser before the stylesheet arrives; this tells form controls,
   scrollbars and the rest of the UA chrome to stay light too. */
:root{color-scheme:light}

/* iOS Safari magnifies the viewport when a focused input is under 16px and
   never restores it. That shipped as v3.38.1. It is now structural: any v4
   control inherits the floor and cannot opt out by accident. */
.v4 input,.v4 textarea,.v4 select{font-size:var(--t-md)}

/* ══════════════════════════════════════════════════════════════════════════
   V4 SCOPE + LAYOUT PRIMITIVES
   Everything is namespaced under .v4 so a v4 page and a v3 page can coexist
   on the same site during the migration.
   ══════════════════════════════════════════════════════════════════════════ */
.v4{font-family:var(--font-b);font-size:var(--t-base);line-height:var(--lh-body);color:var(--text)}
/* v4.0.0-beta.6 — 1080, matching body.v4skin .wrap.
   900 was chosen for reading and it is still right for reading, but it was
   never the constraint on prose: .v4-prose caps text at --measure (62ch, about
   465px) independently, so text lines do not get longer here. What 900 was
   actually capping was everything that is not prose — the browse grid at six
   covers, the author directory at two columns, book details at two.
   The other half of the reason is the seam. v4 pages were 900 and the 22 v3
   pages under the skin were 1080, so clicking from the Commons to the Quote
   Wall stepped the content 180px wider. One number for the whole site.
   Not v3's 1200: five cards across a main column reads as a directory, and
   narrowing that was one of the deliberate v4 changes. */
.v4 .v4-wrap{max-width:1080px;margin:0 auto;padding:0 var(--s5)}
.v4 .v4-prose{max-width:var(--measure)}

/* The two-column shell. minmax(0,...) on both tracks is not optional: grid
   items default to min-width:auto, which is what blew the main column out in
   v3.38.2 when a carousel wider than its track refused to shrink. */
.v4 .v4-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s6);margin-top:var(--s5)}
.v4 .v4-stack>*+*{margin-top:var(--s5)}
.v4 .v4-stack-tight>*+*{margin-top:var(--s3)}

/* Any flex row that contains text. min-width:0 on the growing child is the
   other half of the same bug class. Baked in so call sites cannot forget. */
.v4 .v4-row{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.v4 .v4-row:last-child{border-bottom:none}
.v4 .v4-row>.v4-grow{flex:1;min-width:0}

/* ── type ─────────────────────────────────────────────────────────────────── */
/* v4.1.1 — back to weight. 4.1.0 dropped these to 400 on the theory that a
   display face at 34px does not also need weight. It does: Fraunces is
   fine-stroked and at 400 a book title read thin rather than confident. */
.v4 .v4-h1{font-family:var(--font-d);font-weight:var(--w-display);font-size:var(--t-3xl);line-height:var(--lh-tight);letter-spacing:-.015em;margin:0 0 var(--s1)}
/* v4.6.4 — .is-name marks a heading that names a thing rather than saying
   something. Book pages and author pages carry it; the homepage hero does
   not. */
.v4 .v4-h1.is-name{font-weight:var(--w-title);letter-spacing:-.02em}
.v4 .v4-h2{font-family:var(--font-d);font-weight:var(--w-display);font-size:var(--t-xl);line-height:var(--lh-snug);letter-spacing:-.01em;margin:0 0 var(--s3)}
/* v4.1.0 — an eyebrow is a label, not content. It was --t-xs at weight 700,
   the same size as the meta text under it and heavier than most titles, so it
   competed with the section it was introducing. Smaller, lighter, wider. */
/* v4.1.1 — 600, not 500. Dropping an eyebrow from 700 to 500 took it one step
   too far: ABOUT THE BOOK and BOOK DETAILS receded until they stopped working
   as section markers. The smaller size and wider tracking were right; the
   weight was not. */
.v4 .v4-eyebrow{font-family:var(--font-m);font-weight:600;font-size:var(--t-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin:0 0 var(--s4)}
/* v4.1.0 — a panel's own label sits below a page section's. Every heading on
   the page carried identical weight, so the giveaway and "Nobody can find a
   copy" felt equally urgent. */
.v4 .v4-panel > .v4-eyebrow:first-child{margin-bottom:var(--s3);color:var(--text4)}

/* v4.1.0 — the reading voice. A thought is somebody speaking and should sound
   like it: larger than the meta around it, with room to breathe. */
/* Italic now survives only on the presence lede, which is always one sentence. */
.v4 .v4-thought q{line-height:var(--lh-body)}
.v4 .v4-meta{font-family:var(--font-m);font-size:var(--t-xs);color:var(--text4);letter-spacing:.02em}
.v4 .v4-sub{color:var(--text3);font-size:var(--t-sm);line-height:var(--lh-snug)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.v4 .v4-btn{display:inline-block;background:var(--green);color:#fff;font-family:var(--font-b);font-size:var(--t-base);font-weight:500;padding:var(--s3) var(--s4);border-radius:var(--rad);border:none;cursor:pointer;text-align:center;line-height:1.3}
.v4 .v4-btn:hover{background:var(--green-h)}
/* beta.8 — a secondary action. The status pills are what a reader is doing
   with the book; a follow is about the author, and at equal weight it read as
   the loudest control on the page. */
.v4 .v4-btn.is-sm{font-size:var(--t-sm);padding:var(--s2) var(--s3)}
.v4 .v4-btn.is-ghost{background:transparent;color:var(--green-h);border:1.5px solid var(--line2)}
.v4 .v4-btn.is-ghost:hover{border-color:var(--green);background:var(--green-tint)}
.v4 .v4-btn.is-wide{display:block;width:100%}

.v4 .v4-tag{display:inline-block;font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.05em;text-transform:uppercase;padding:var(--s1) var(--s2);border-radius:var(--rad-sm);background:var(--bg2);color:var(--text3)}
.v4 .v4-tag.is-now{background:var(--green-tint);color:var(--green-h)}
.v4 .v4-tag.is-ask{background:var(--rust-tint);color:var(--rust)}
/* 4.15.3 — a tag with a drawn glyph (Pinned), and the pin itself: the same
   line icon as Save beside it, filled in the brand green once pinned. */
.v4 .v4-tag.has-icon{display:inline-flex;align-items:center;gap:4px}
.v4 .v4-tag .v4-pin-ico{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.v4 .v4-pin .v4-pin-ico{stroke-linecap:round;stroke-linejoin:round}

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.v4 .v4-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--s4)}
.v4 .v4-panel{background:var(--surface2);border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--s4)}
/* v4.10.2 — the signed-out compose prompt. Shaped like .v4-compose so the
   page does not rearrange when somebody signs in: the ghost is replaced by the
   real box in the same place at about the same height.

   It is an <a>, not a form, and the "Sign in" pill inside it is a <span> —
   nesting a real button inside a link gives assistive tech two controls where
   there is one. The whole row is the link; the pill is how it looks. */
.v4 .v4-compose-ghost{display:flex;align-items:center;gap:var(--s3);
  text-decoration:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-lg);padding:var(--s3);margin:0 0 var(--s4)}
.v4 .v4-compose-ghost:hover{border-color:var(--green-ring)}
.v4 .v4-compose-ghost:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.v4 .v4-compose-ghost-av{width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--bg2)}
.v4 .v4-compose-ghost-t{flex:1;min-width:0;font-family:var(--font-b);
  font-size:var(--t-base);color:var(--text4);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* v4.10.3 — the book page needs a rating alongside the line, so its ghost
   carries five off stars.

   A GRID, not the base rule's flex row. On a 342px phone row the placeholder,
   the stars and the pill do not all fit, and flex resolved that by shrinking
   the placeholder to "One line about th..." -- the one string that carries the
   message. Here the avatar and the pill each span both rows and the stars sit
   on their own row directly under the placeholder they qualify, so nothing is
   truncated and the height is the same 64px the Commons ghost has.

   Wrapping the stars and pill into a flex group was tried first: on a phone it
   pushed them to a second line hard right, under nothing, and the two halves
   read as separate objects. */
.v4 .v4-compose-ghost.is-rate{display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;column-gap:var(--s3);row-gap:5px}
.v4 .v4-compose-ghost.is-rate .v4-compose-ghost-av{grid-column:1;grid-row:1/3}
.v4 .v4-compose-ghost.is-rate .v4-compose-ghost-t{grid-column:2;grid-row:1}
.v4 .v4-compose-ghost.is-rate .v4-ghoststars{grid-column:2;grid-row:2}
.v4 .v4-compose-ghost.is-rate .v4-btn{grid-column:3;grid-row:1/3}
.v4 .v4-ghoststars{display:block;width:66px;height:13px;fill:var(--line2)}

/* v4.10.4 — the website link on a public profile. v3 rendered one; the v4 port
   dropped it, so the field was collected and never read back for four releases.
   Mono because it is a machine address, not prose. */
.v4 .v4-weblink{display:inline-block;margin-top:var(--s2);font-family:var(--font-m);
  font-size:var(--t-xs);color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--green-ring);padding-bottom:1px}
.v4 .v4-weblink:hover{border-bottom-color:var(--green)}
/* v4.10.4 — the reading-from question on onboarding step 1. */
.v4 .v4ob-place{margin:var(--s5) 0 0;max-width:340px}
.v4 .v4ob-place select{width:100%;margin-top:var(--s2)}

.v4 .v4-empty{border:1px dashed var(--line2);border-radius:var(--rad-lg);padding:var(--s5);text-align:center}
/* v4.1.0 — italic is reserved for a person's own words (a thought) and the
   editorial lede (the presence line). An empty state is the site talking to
   you about nothing being there; in italic it read as wistful. */
.v4 .v4-empty p{margin:0 0 var(--s3);font-family:var(--font-d);font-size:var(--t-lg);color:var(--text3)}

/* ══════════════════════════════════════════════════════════════════════════
   THE PRESENCE LINE — the signature element of v4
   Named people, not counts. At 121 members a count of 18 reads as small;
   three named people reading right now reads as a room with people in it.
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-presence{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:var(--s4) 0}
.v4 .v4-presence p{margin:0;font-family:var(--font-d);font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--text2);flex:1;min-width:220px}
.v4 .v4-presence p em{font-style:italic}

.v4 .v4-faces{display:flex;flex-shrink:0}
.v4 .v4-face{width:var(--face);height:var(--face);border-radius:var(--rad-full);background:var(--bg2);border:2px solid var(--bg);margin-left:-9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-b);font-size:var(--t-xs);font-weight:700;color:var(--text3);flex-shrink:0;overflow:hidden}
.v4 .v4-face:first-child{margin-left:0}
.v4 .v4-face.is-live{background:var(--green-tint);color:var(--green-h);border-color:var(--green)}
.v4 .v4-face.is-sm{width:var(--face-sm);height:var(--face-sm);font-size:var(--t-2xs)}
.v4 .v4-face.is-lg{width:var(--face-lg);height:var(--face-lg);font-size:var(--t-sm)}
.v4 .v4-face.is-xl{width:var(--face-xl);height:var(--face-xl);font-family:var(--font-d);font-size:var(--t-2xl);font-weight:400;margin-left:0}

/* ══════════════════════════════════════════════════════════════════════════
   THE THOUGHT — the atomic unit of the community
   One reader, one line, in the display face. Everything else on a book page
   is arrangement around these.
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-thought{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
/* 4.5.2 — in the Commons stream a post is three siblings: the thought, its
   replies, and the reply control. The rule above draws the separator under the
   FIRST of them, so Reply appeared below the line and read as the opening of
   the next post. The line belongs to the whole post, so it moves to a wrapper
   and comes off the thought inside one. */
.v4 .v4-post{border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.v4 .v4-post>.v4-thought{border-bottom:none}
/* 4.5.3 — a reply belongs to the post above it, so it should sit closer to it
   than to the next post. Three paddings were stacking to about 36px: the
   thought's own bottom padding, the reply block's top margin, and the first
   nested thought's top padding. Pulled in only INSIDE a post — the thought
   keeps its normal rhythm everywhere else. */
.v4 .v4-post>.v4-thought{padding-bottom:var(--s1)}
.v4 .v4-post>.v4-replies>.v4-thought:first-child{padding-top:var(--s1)}
/* 4.5.4 — the reply BOX, which 4.5.3 missed. .v4-replies is the nested comment
   column and only exists once somebody has answered; <details class="v4-reply">
   is the Reply control itself and is on every post. Tightening only the first
   left the common case — a post nobody has replied to yet — carrying the box's
   own --s2 margin on top of the thought's padding. The margin BELOW it stays:
   the control should sit against the post it belongs to and away from the rule
   that closes it. */
/* 4.5.12 — the rules above were written when a post was three siblings and
   the Reply control was the last of them. It now sits inside .v4-acts, so
   .v4-post>.v4-reply matches nothing and the margin-bottom it carried is
   replaced by padding on .v4-post itself. The replies column now follows the
   acts row rather than the thought, so it needs the wider gap back: pulling it
   to --s1 was right when it sat under a sentence and wrong under a row of
   controls. */
.v4 .v4-post>.v4-replies{margin-top:var(--s3)}
.v4 .v4-thought:last-child{border-bottom:none}
.v4 .v4-thought-who{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}
/* v4.1.0 — the name carries. On a site whose premise is who else here has read
   this, the reader was quieter than their own sentence. */
.v4 .v4-thought-who b{font-size:var(--t-sm);font-weight:var(--w-name);letter-spacing:-.005em}
/* v4.3.0 — the poll. It sits directly under the dark week bar and belongs to
   it, so it takes the same width and a matching top edge. */
.v4 .v4-poll{background:var(--surface);border:1px solid var(--line);
  border-top:0;border-radius:0 0 var(--rad-lg) var(--rad-lg);
  padding:var(--s4);margin-top:calc(var(--rad-lg) * -1);padding-top:var(--s5)}
.v4 .v4-poll-res{position:relative;padding:var(--s3);margin-bottom:var(--s2);
  border-radius:var(--rad-sm);overflow:hidden;background:var(--bg)}
.v4 .v4-poll-res.is-mine{box-shadow:inset 0 0 0 1.5px var(--green)}
/* The bar is behind the text, not beside it: a row that is both the label and
   the measurement reads faster than a label with a chart next to it. */
.v4 .v4-poll-bar{position:absolute;inset:0 auto 0 0;background:var(--green-tint);
  transition:width .3s ease}
.v4 .v4-poll-row{position:relative;display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--s3)}
.v4 .v4-poll-label{font-size:var(--t-sm);font-weight:var(--w-name);color:var(--text)}
.v4 .v4-poll-n{font-family:var(--font-m);font-size:var(--t-sm);color:var(--green);
  font-weight:600;flex-shrink:0}
.v4 .v4-poll-who{position:relative;display:flex;align-items:center;gap:var(--s1);
  margin-top:var(--s2)}
.v4 .v4-poll-who .v4-face{margin-left:0;border:2px solid var(--bg)}
.v4 .v4-poll-who .v4-face+.v4-face{margin-left:-8px}
.v4 .v4-poll-form{margin-top:var(--s3)}
.v4 .v4-poll-opt{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  margin-bottom:var(--s2);border:1.5px solid var(--line2);border-radius:var(--rad-sm);
  cursor:pointer;font-size:var(--t-sm);background:var(--bg)}
.v4 .v4-poll-opt:hover{border-color:var(--green)}
.v4 .v4-poll-opt.is-mine{border-color:var(--green);background:var(--green-tint)}
.v4 .v4-poll-opt input{flex-shrink:0;accent-color:var(--green);width:18px;height:18px}
.v4 .v4-poll-form textarea{width:100%;box-sizing:border-box;margin-top:var(--s2);
  border:1px solid var(--line2);border-radius:var(--rad-sm);background:var(--bg);
  padding:var(--s2) var(--s3);font-family:var(--font-b);font-size:var(--t-md);
  color:var(--text);resize:vertical;line-height:var(--lh-snug)}
.v4 .v4-poll-form textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint)}
.v4 .v4-poll-form button{margin-top:var(--s2)}

/* v4.2.0 — replies under a thought. Indented and quieter than the thought
   itself: a reply is a response to something, and should read as subordinate to
   the line it answers rather than as another verdict. */
.v4 .v4-replies{margin-top:var(--s3);padding-left:var(--s4);
  border-left:2px solid var(--line)}
/* 4.5.1 — scoped to div. .v4-reply names TWO different elements: the comment
   row here, and the <details> that ui_reply_box wraps its form in. Unscoped,
   display:flex turned that <details> into a flex container and stood the
   summary beside the form, squeezing the box to content width — the reason the
   Commons reply area and the book-page thread boxes have never been full width.
   The <details> rules further down already target it on their own. */
.v4 div.v4-reply{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0}
.v4 div.v4-reply+div.v4-reply{border-top:1px solid var(--line)}
.v4 div.v4-reply .v4-face{margin-left:0;border:none;flex-shrink:0}
.v4 .v4-reply-who{font-size:var(--t-sm);font-weight:var(--w-name);color:var(--text)}
.v4 div.v4-reply p{margin:var(--s1) 0 0;font-size:var(--t-sm);line-height:var(--lh-snug);
  color:var(--text2);overflow-wrap:anywhere}
.v4 .v4-reply-cue{display:inline-block;margin-top:var(--s2);font-family:var(--font-m);
  font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);text-decoration:none;cursor:pointer}
.v4 .v4-reply-cue:hover{text-decoration:underline}
.v4 .v4-replyform>summary{list-style:none;display:block}
.v4 .v4-replyform>summary::-webkit-details-marker{display:none}
.v4 .v4-replyform[open]>summary{display:none}
.v4 .v4-replyform textarea{width:100%;box-sizing:border-box;margin-top:var(--s2);
  border:1px solid var(--line2);border-radius:var(--rad-sm);background:var(--bg);
  padding:var(--s2) var(--s3);font-family:var(--font-b);font-size:var(--t-md);
  color:var(--text);resize:vertical;line-height:var(--lh-snug)}
.v4 .v4-replyform textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint)}
.v4 .v4-replyform button{margin-top:var(--s2)}

/* v4.1.1 — plain, not italic. 4.1.0 made italic mean "a person's own words",
   which is right for one line and wrong for six: a full review set in italic at
   18px is tiring, and reviews here run long. The voice is carried by the
   display face, the size and the colour instead. */
/* v4.6.3 — stated rather than inherited. This text had been rendering at 300
   because Fraunces 400 upright was never loaded; once it was, every review
   and every Commons post got heavier overnight. 300 is the weight the page
   was designed against, so 300 is what it asks for now. */
.v4 .v4-thought q{font-weight:var(--w-display);display:block;quotes:none;font-family:var(--font-d);font-style:normal;font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--text);overflow-wrap:anywhere}
.v4 .v4-thought.is-plain q{font-family:var(--font-b);font-style:normal;font-size:var(--t-base);line-height:var(--lh-body)}
.v4 .v4-thought.is-plain q em{font-style:normal;font-weight:var(--w-name);color:var(--text)}
/* v4.11.2: Read more on a long Commons post (ui_long_text). */
.v4 .v4-more-t{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.v4 .v4-more-body{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.v4 .v4-more-t:checked~.v4-more-body{display:block;-webkit-line-clamp:unset;overflow:visible}
.v4 .v4-more-btn{display:inline-block;margin-top:var(--s1);font-size:var(--t-sm);color:var(--green);cursor:pointer;font-weight:var(--w-name)}
.v4 .v4-more-t:checked~.v4-more-btn{display:none}
.v4 .v4-more-t:focus-visible~.v4-more-btn{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.v4 .v4-thought.is-author{background:var(--green-tint);border-radius:var(--rad);border-bottom:none;padding:var(--s4)}
.v4 .v4-thought-act{margin-top:var(--s2);display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t-sm);color:var(--text3)}

/* ══════════════════════════════════════════════════════════════════════════
   BOOK CARD — one component, three variants.
   v3 calls book_card() once per page and then renders covers inline 29 more
   times across eight files. Every v4 cover goes through here.
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-cover{display:block;width:100%;aspect-ratio:2/3;border-radius:var(--rad-sm);background:linear-gradient(160deg,var(--green),var(--green-h));box-shadow:var(--e1);overflow:hidden;position:relative}
.v4 .v4-cover img{width:100%;height:100%;object-fit:cover;display:block}
.v4 .v4-cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s3);color:var(--bg2);font-family:var(--font-d);font-size:var(--t-sm);line-height:var(--lh-tight)}

/* The card wrapper itself. Carried no rule at all until alpha.19 — the grid gap
   positioned the cards and nothing needed it, but a class with no rule is a
   class nobody can safely change. min-width:0 is the load-bearing part: without
   it a long unbroken title makes the card refuse to shrink below its content
   and pushes the whole grid track wide. */
.v4 .v4-bc{min-width:0}
/* beta.9 — the guest hero. Text left, three covers right. The covers are the
   first thing that proves the claim beside them, so they get real size; below
   900 they drop away entirely rather than shrinking to stamps, because on a
   phone the search bar should be reachable without scrolling past decoration. */
.v4 .v4-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s6);align-items:center}
.v4 .v4-hero-say{min-width:0}
/* At 42px even 500 reads heavy; the hero carries its emphasis by size alone. */
.v4 .v4-hero-say .v4-h1{font-weight:450}
.v4 .v4-hero-fan{display:flex;align-items:flex-start;flex-shrink:0;
  padding-right:var(--s4)}
.v4 .v4-hero-fan-i{display:block;width:112px;flex-shrink:0;text-decoration:none;
  transition:transform .18s ease}
.v4 .v4-hero-fan-i:nth-child(1){transform:rotate(-6deg)}
.v4 .v4-hero-fan-i:nth-child(2){margin-left:-22px;z-index:2;transform:translateY(-10px)}
.v4 .v4-hero-fan-i:nth-child(3){margin-left:-22px;transform:rotate(6deg)}
.v4 .v4-hero-fan-i:hover{transform:translateY(-14px) rotate(0)}
.v4 .v4-hero-fan .v4-cover{box-shadow:var(--e2,0 8px 24px rgba(0,0,0,.16))}

/* beta.9 — who someone follows, as a face and a name. Not a face alone: at this
   scale several members share a first name and some have no photo, so a bare
   avatar row is a guessing game. */
/* v4.0.5 — the author spotlight portrait. A round 44px face is how you show
   somebody in a list; this panel introduces a writer at length and was showing
   them smaller than the covers below it. */
.v4 .v4-spot{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--s5);
  align-items:start}
.v4 .v4-spot-face{display:block;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--rad-sm);background:var(--surface2)}
.v4 .v4-spot-face img{width:100%;height:100%;object-fit:cover;display:block}
.v4 .v4-spot-initials{display:flex;width:100%;height:100%;align-items:center;
  justify-content:center;font-family:var(--font-m);font-size:var(--t-2xl);
  color:var(--text4)}

/* v4.0.5 — the featured strip. Scroll-snap, not a carousel: v4 has shipped
   almost no JavaScript and this is the last place worth starting. Swipes on a
   phone, scrolls with a trackpad, and degrades to a plain row where scroll-snap
   is unsupported. */
.v4 .v4-bstrip{display:grid;grid-auto-flow:column;grid-auto-columns:132px;
  gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);scrollbar-width:thin;overscroll-behavior-x:contain}
.v4 .v4-bstrip > *{scroll-snap-align:start}
.v4 .v4-bstrip::-webkit-scrollbar{height:6px}
.v4 .v4-bstrip::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

/* v4.0.6 — the strip says it scrolls. A peeking half-card was the only cue and
   a mouse user has no gesture that would discover it.
   The fade is decorative and pointer-events:none so it never eats a click on
   the card beneath it. */
.v4 .v4-striproll{position:relative}
.v4 .v4-striproll::after{content:'';position:absolute;top:0;right:0;bottom:var(--s3);
  width:56px;pointer-events:none;opacity:.9;
  background:linear-gradient(90deg,transparent,var(--bg))}
.v4 .v4-striproll.is-end::after{opacity:0}
.v4 .v4-strip-nav{display:flex;gap:var(--s2);margin-left:auto}
.v4 .v4-strip-head{display:flex;align-items:center;gap:var(--s3)}
.v4 .v4-strip-btn{width:30px;height:30px;flex-shrink:0;display:none;
  align-items:center;justify-content:center;padding:0;border-radius:var(--rad-full);
  border:1.5px solid var(--line2);background:var(--bg);color:var(--text2);
  font-size:var(--t-sm);line-height:1;cursor:pointer}
.v4 .v4-strip-btn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.v4 .v4-strip-btn:disabled{opacity:.3;cursor:default}
/* Shown only where a pointer exists. On a phone the gesture IS the affordance
   and two buttons would be clutter. */
@media (hover:hover) and (pointer:fine){
  .v4 .v4-strip-btn{display:inline-flex}
}

/* The two grid rows show 8; a phone shows 6. Done in CSS rather than by
   querying twice, so the server never has to guess a viewport it cannot see. */
.v4 .v4-brow{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Collections: four across, and a way through to the rest. */
.v4 .v4-colls{grid-template-columns:repeat(4,minmax(0,1fr))}

/* v4.6.9 — the giveaway index, two across.
   .v4-give was drawn for the home page's 385px rail. Stacked full-width on
   /giveaway each card ran the whole measure, which left a full-width button
   under two short lines and a mostly empty row. Two columns give the card
   about the width it was designed for. Two rather than three or four: the
   prize is a real sentence, and there are rarely more than a few running.
   align-items:start so a card with a longer prize line does not stretch the
   one beside it into matching whitespace. */
.v4 .v4-gives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s5);align-items:start}

.v4 .v4-morelink{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);text-decoration:none}
.v4 .v4-morelink:hover{text-decoration:underline}

/* v4.0.4 — the author bio disclosure. The summary carries the opening while
   closed and is replaced by the full text when open, so no state of this
   element can ever render as an empty "Show more". */
.v4 .v4-bio{display:block}
.v4 .v4-bio>summary{cursor:pointer;list-style:none;display:block}
.v4 .v4-bio>summary::-webkit-details-marker{display:none}
.v4 .v4-bio[open]>summary{display:none}
.v4 .v4-bio-cue{display:inline-block;margin-top:var(--s2);font-size:var(--t-sm);
  color:var(--green-h)}
.v4 .v4-bio>summary:hover .v4-bio-cue{text-decoration:underline}

/* Where else a writer is. */
.v4 .v4-alinks{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s3)}
.v4 .v4-alinks a{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text3);text-decoration:none;
  border-bottom:1px solid var(--line2)}
.v4 .v4-alinks a:hover{color:var(--green);border-bottom-color:var(--green)}

/* Titles and bylines are links now; they inherit rather than turning green so a
   grid of cards does not read as a wall of hyperlinks. */
.v4 .v4-bc-title a,.v4 .v4-bc-author a{color:inherit;text-decoration:none}
.v4 .v4-bc-title a:hover{color:var(--green)}
.v4 .v4-bc-author a:hover{color:var(--green);text-decoration:underline}

/* The pick of the month, with its cover. */
.v4 .v4-pick{display:grid;grid-template-columns:82px minmax(0,1fr);gap:var(--s4);
  align-items:start}
.v4 .v4-pick-cover{display:block}
.v4 .v4-pick-say{min-width:0}
.v4 .v4-pick-say .v4-h2 a{color:inherit;text-decoration:none}
.v4 .v4-pick-say .v4-h2 a:hover{color:var(--green)}

/* Curated collections: four covers fanned, a name, a count. */
/* v4.0.6 — the column count moved to the single rule above. This one used to
   repeat grid-template-columns and, being LATER in the file at equal
   specificity, silently won: minmax(210px) in a 615px main column resolves to
   two columns, which is what the laptop was showing. Layout properties only
   from here on. */
.v4 .v4-colls{display:grid;gap:var(--s5)}
.v4 .v4-coll{display:block;text-decoration:none;color:inherit}
.v4 .v4-coll-fan{display:flex;margin-bottom:var(--s3)}
/* v4.0.6 — sized to the track. Four columns of a 615px main column give 136px
   each; the old fan measured 52 + 38x3 = 166px and would have overflowed even
   once the column count was fixed. 44 - 16 x3 = 128px fits with room. */
.v4 .v4-coll-fan .v4-cover{width:44px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.v4 .v4-coll-fan .v4-cover+.v4-cover{margin-left:-16px}
.v4 .v4-coll-name{display:block;font-family:var(--font-d);font-size:var(--t-lg);
  font-weight:400;line-height:var(--lh-tight);margin-bottom:2px}
.v4 .v4-coll:hover .v4-coll-name{color:var(--green)}

/* v4.8.1 — the same collection card, laid out for the 385px rail: a row
   instead of a stack. Scoped under .v4-coll-rail on purpose. /lists renders
   .v4-coll three times over and must not move, so every declaration here is
   one level deeper than the base rule (0,3,0 against 0,2,0) and cannot reach
   it. Four covers at 34 with a 13 overlap measure 34 + 21x3 = 97px, which
   leaves the name a comfortable ~230px of the rail. */
.v4 .v4-coll-rail{display:flex;flex-direction:column;gap:var(--s4)}
.v4 .v4-coll-rail .v4-coll{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s3);align-items:center}
.v4 .v4-coll-rail .v4-coll-fan{margin-bottom:0}
.v4 .v4-coll-rail .v4-coll-fan .v4-cover{width:34px}
.v4 .v4-coll-rail .v4-coll-fan .v4-cover+.v4-cover{margin-left:-13px}
.v4 .v4-coll-rail .v4-coll-say{min-width:0}
.v4 .v4-coll-rail .v4-coll-name{font-size:var(--t-base);margin-bottom:1px}

/* v4.0.3 — the giveaway card. The image leads: a giveaway is the one panel on
   the home page whose job is to be looked at rather than read. Full-bleed to
   the panel edge, which is why the panel's own padding is cancelled here. */
.v4 .v4-give{margin:calc(var(--s4) * -1)}
.v4 .v4-give-img{display:block;overflow:hidden;background:var(--surface2)}
.v4 .v4-give-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease}
.v4 .v4-give-img:hover img{transform:scale(1.03)}
.v4 .v4-give-say{padding:var(--s4)}

/* v4.0.5 — two shapes, because two different kinds of picture end up here.
   is-cover: the prize book's own cover, left, matching Reading together.
   is-plain (4.1.1): no picture at all. A promotional banner has no workable
   size in a 385px rail, so the decorated header announces the giveaway and the
   poster stays on /giveaway where it has the width for it. */
/* v4.1.1 — the banner is gone entirely. There is no size at which a 16:9
   poster works in a 385px rail: cropped it lost its headline, uncropped it took
   a third of the column. A decorated header does the announcing instead, and
   the poster still does its job on /giveaway where it has the width for it.
   A prize BOOK cover is different and stays: it is portrait, and it is the
   thing being won. */
.v4 .v4-give-head{display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  border-radius:var(--rad-lg) var(--rad-lg) 0 0;
  background:var(--green);color:var(--bg2);
  font-family:var(--font-m);font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.v4 .v4-give-head::before{content:'\25C6';letter-spacing:0;opacity:.7}
/* 4.5.2 — TWO negative margins were stacking. .v4-give already cancels the
   panel's padding for the plain shape, and the header then cancelled it a
   SECOND time, pushing itself a full --s4 past the panel edge on both sides.
   is-cover is unaffected: it resets .v4-give's margin to 0 and pads itself, so
   its header still needs the pull. Radius kept, or the corners square off. */
.v4 .v4-give:not(.is-cover) .v4-give-head{margin:0 0 var(--s4)}
.v4 .v4-give.is-cover .v4-give-head{margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  grid-column:1 / -1}
.v4 .v4-give.is-cover{display:grid;grid-template-columns:82px minmax(0,1fr);
  gap:var(--s4);padding:var(--s4);margin:0;align-items:start}
.v4 .v4-give.is-cover .v4-give-img{border-radius:var(--rad-sm);aspect-ratio:2/3}
.v4 .v4-give.is-cover .v4-give-say{padding:0;min-width:0}
.v4 .v4-give-say .v4-h2{line-height:var(--lh-tight)}

/* ── v4.7.0 — the Quote Wall ───────────────────────────────────────────────
   A wall, not a feed: columns rather than rows, because quotes are different
   lengths and a single column of ragged cards reads as a list of interruptions.
   Multi-column layout rather than grid, so a short quote does not leave a
   tall gap beside a long one — the browser packs them.
   (Careful: this file is a nowdoc. A line starting with optional whitespace
   then the terminator word ends the block early, so no comment line here may
   begin with it. That is a silent, confusing parse error.)

   break-inside:avoid is what keeps a card from being sawn in half across a
   column boundary; without it the wall looks broken at exactly the moment a
   quote runs long, which is the moment it is most worth reading. */
.v4 .v4-quotes{columns:2;column-gap:var(--s5)}
.v4 .v4-quote{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:block;margin:0 0 var(--s5);padding:var(--s5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--rad-lg)}
.v4 .v4-quote.is-verified{border-color:var(--green-ring)}
.v4 .v4-quote-badge{display:inline-block;font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:var(--s3)}

/* The line itself carries the page. Fraunces, stated weight rather than
   inherited — see the 4.6.3 note on .v4-thought q: an unset weight walks to
   whatever the variable font has loaded and the quote comes out thin. */
.v4 .v4-quote-t{margin:0 0 var(--s3);font-family:var(--font-d);font-weight:var(--w-display);
  font-size:var(--t-lg);line-height:var(--lh-snug);color:var(--text);cursor:pointer}
.v4 .v4-quote-t:hover{color:var(--green-h)}
.v4 .v4-quote-t:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px}

.v4 .v4-quote-book{display:flex;gap:var(--s3);align-items:center;text-decoration:none;
  color:inherit;padding-top:var(--s3);border-top:1px solid var(--line)}
.v4 .v4-quote-book .v4-cover{width:34px;flex:none}
.v4 .v4-quote-bt{display:block;min-width:0}
.v4 .v4-quote-bt b{display:block;font-size:var(--t-sm);font-weight:var(--w-title)}
.v4 .v4-quote-book:hover .v4-quote-bt b{color:var(--green-h)}

.v4 .v4-quote-acts{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
  margin-top:var(--s3)}
.v4 .v4-quote-acts > .v4-meta:first-child{margin-right:auto}

/* One shape that fills in when saved, so the state change is the same object
   changing rather than two unrelated pictures (v3.29.0). */
.v4 .v4-quote-save{display:inline-flex;align-items:center;gap:var(--s1);background:none;
  border:0;padding:var(--s1);cursor:pointer;color:var(--text4);font-family:var(--font-m);
  font-size:var(--t-2xs);line-height:1}
.v4 .v4-quote-save svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.v4 .v4-quote-save:hover{color:var(--green-h)}
.v4 .v4-quote-save.saved{color:var(--green)}
.v4 .v4-quote-save.saved svg{fill:currentColor;stroke:currentColor}
.v4 .v4-quote-n[hidden]{display:none}

.v4 .v4-quote-tool{background:none;border:0;padding:var(--s1);cursor:pointer;
  color:var(--text4);font-family:var(--font-m);font-size:var(--t-2xs);line-height:1}
.v4 .v4-quote-tool:hover{color:var(--green-h)}

/* Reach without redrawing: the 4.6.3 lesson. min-height would fatten these
   controls; an invisible band under them only grows what a thumb can hit. */
.v4 .v4-quote-save,.v4 .v4-quote-tool{position:relative}
.v4 .v4-quote-save::before,.v4 .v4-quote-tool::before{content:'';position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}

/* ── v4.7.1 — the eight states ─────────────────────────────────────────────
   Four across, like the collections grid it sits closest to in kind: a small
   set of fixed, named things you pick one of. Each card carries its own line
   of writing, so these are taller than a collection card and the covers sit
   at the foot rather than leading. */
.v4 .v4-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.v4 .v4-state{display:block;text-decoration:none;color:inherit;padding:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg)}
.v4 .v4-state:hover{border-color:var(--green)}
.v4 .v4-state-n{display:block;font-family:var(--font-d);font-size:var(--t-lg);
  line-height:var(--lh-tight);margin-bottom:2px}
.v4 .v4-state:hover .v4-state-n{color:var(--green-h)}
.v4 .v4-state-d{display:block;margin-top:var(--s2);font-size:var(--t-sm);
  color:var(--text3);line-height:var(--lh-body)}
.v4 .v4-state-fan{display:flex;margin-top:var(--s3)}
.v4 .v4-state-fan .v4-cover{width:30px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.v4 .v4-state-fan .v4-cover+.v4-cover{margin-left:-10px}

/* ── v4.7.2 — bookshops ────────────────────────────────────────────────────
   Three across: a shop card is a logo, a name, a place and a line, which needs
   more width than a book cover and less than a collection. The mark is the
   stand-in when a shop has no logo — two letters on a hue derived from the
   name, so a shop keeps its colour between the list and its own page. */
.v4 .v4-shops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.v4 .v4-shop{display:flex;gap:var(--s3);align-items:flex-start;text-decoration:none;color:inherit;
  padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg)}
.v4 .v4-shop:hover{border-color:var(--green)}
.v4 .v4-shop-b{display:block;min-width:0}
.v4 .v4-shop-b b{display:block;font-size:var(--t-md);line-height:var(--lh-tight)}
.v4 .v4-shop:hover .v4-shop-b b{color:var(--green-h)}
.v4 .v4-shop-bio{display:block;margin:var(--s2) 0;font-size:var(--t-sm);color:var(--text3);
  line-height:var(--lh-body)}
.v4 .v4-shop-logo{width:48px;height:48px;flex:none;object-fit:contain;border-radius:var(--rad-sm);
  background:var(--surface2)}
.v4 .v4-shop-mark{width:48px;height:48px;flex:none;border-radius:var(--rad-sm);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-d);
  font-size:var(--t-md);font-weight:var(--w-title);letter-spacing:.02em}
.v4 .v4-shop-hero{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s4)}
.v4 .v4-shop-logo.is-big,.v4 .v4-shop-mark.is-big{width:76px;height:76px;font-size:var(--t-xl)}

/* ── v4.7.4 — blog ─────────────────────────────────────────────────────────
   A post in the list is a card with an optional lead image beside it. Two
   columns when there is an image, one when there is not, so a post without a
   cover does not sit in a column with a hole in it. */
.v4 .v4-post{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);
  padding:var(--s4)}
.v4 .v4-post.has-cover{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s4);
  align-items:start}
.v4 .v4-post-img{display:block;overflow:hidden;border-radius:var(--rad-sm);background:var(--surface2)}
.v4 .v4-post-img img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.v4 .v4-post-b{min-width:0}

/* The article body is editor-written HTML, so it is styled by element rather
   than by class — there are no hooks to add to it. */
.v4 .v4-article{margin-top:var(--s5);max-width:var(--measure);font-size:var(--t-md);
  line-height:var(--lh-body);color:var(--text2)}
.v4 .v4-article > *{margin:0 0 var(--s4)}
.v4 .v4-article h2,.v4 .v4-article h3{font-family:var(--font-d);color:var(--text);
  line-height:var(--lh-snug);margin:var(--s6) 0 var(--s3)}
.v4 .v4-article h2{font-size:var(--t-xl)}
.v4 .v4-article h3{font-size:var(--t-lg)}
.v4 .v4-article img{max-width:100%;height:auto;border-radius:var(--rad-sm);display:block}
.v4 .v4-article blockquote{margin:var(--s5) 0;padding-left:var(--s4);
  border-left:2px solid var(--green);font-family:var(--font-d);font-size:var(--t-lg);
  line-height:var(--lh-snug);color:var(--text)}
.v4 .v4-article ul,.v4 .v4-article ol{padding-left:var(--s5)}
.v4 .v4-article li{margin-bottom:var(--s2)}
.v4 .v4-article a{color:var(--green-h)}
.v4 .v4-article code{font-family:var(--font-m);font-size:.92em;background:var(--surface2);
  padding:2px 5px;border-radius:var(--rad-sm)}
.v4 .v4-article pre{background:var(--surface2);padding:var(--s4);border-radius:var(--rad-sm);
  overflow-x:auto}
.v4 .v4-article hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}

/* ── v4.7.6 — a page for reading ───────────────────────────────────────────
   The article page was a reading measure inside a full-width wrap, so the
   column sat hard against the left edge with half the screen empty. This
   centres the whole page — heading, body, attachments and comments — on one
   measure, which is what a page whose job is reading needs. */
.v4 .v4-read{max-width:var(--measure);margin-left:auto;margin-right:auto;
  padding-top:var(--s5);padding-bottom:var(--s8)}
.v4 .v4-read-lead{width:100%;height:auto;border-radius:var(--rad-lg);
  margin:var(--s5) 0 0;display:block}
.v4 .v4-read .v4-article{max-width:none}

/* What the piece is about: the book, the writer, or both. This used to sit in
   a sidebar BELOW the comments, which is the last place anybody looks. It
   belongs under the body and before the comments, and it shows the cover and
   the face rather than a bare name. */
.v4 .v4-attach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);
  margin-top:var(--s6)}
.v4 .v4-attach:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.v4 .v4-attach-i{display:flex;gap:var(--s4);align-items:center;text-decoration:none;color:inherit;
  padding:var(--s4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-lg)}
.v4 .v4-attach-i:hover{border-color:var(--green)}
.v4 .v4-attach-i .v4-cover{width:56px;flex:none}
.v4 .v4-attach-face{width:56px;height:56px;flex:none;border-radius:var(--rad-full);
  object-fit:cover;display:block}
.v4 .v4-attach-t{display:block;min-width:0}
.v4 .v4-attach-t b{display:block;font-size:var(--t-md);line-height:var(--lh-tight);
  margin:2px 0}
.v4 .v4-attach-i:hover .v4-attach-t b{color:var(--green-h)}

/* v4.7.7 — save a post. Sits beside the like in the same row, and reads as a
   different kind of thing on purpose: the heart is public approval, this is a
   private "come back to it". Same bookmark shape as the Quote Wall's save, so
   one glyph means one thing across the site. */
.v4 .v4-bm-f{display:inline;margin:0}
.v4 .v4-bm{display:inline-flex;align-items:center;gap:var(--s1);background:none;border:0;
  padding:var(--s1);cursor:pointer;color:var(--text4);font-family:var(--font-m);
  font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;line-height:1;
  position:relative}
.v4 .v4-bm svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.v4 .v4-bm:hover{color:var(--green-h)}
.v4 .v4-bm.is-on{color:var(--green)}
.v4 .v4-bm.is-on svg{fill:currentColor}
/* Reach, not size — 4.6.3. */
.v4 .v4-bm::before{content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}

/* v4.0.1 — the owner's tools on their own author page. */
.v4 .v4-owner-acts{display:flex;flex-direction:column;gap:var(--s2)}
.v4 .v4-field{display:block;margin-top:var(--s3)}
.v4 .v4-field > span{display:block;font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:var(--s1)}
/* v4.6.1 — these values used to differ from the .v4-field input rule ~700
   lines below: cream not white, --rad-sm not --rad, --s2 padding not --s3.
   Because [type=text] adds specificity, this block won for text inputs and
   lost for every other type, so one form showed two kinds of field. They are
   now identical, which means the cascade no longer decides anything. The
   selector list stays because select and input[type=file] are sized nowhere
   else. */
.v4 .v4-field input[type=text],.v4 .v4-field textarea,.v4 .v4-field select,
.v4 .v4-field input[type=file]{width:100%;box-sizing:border-box;
  border:1px solid var(--line2);border-radius:var(--rad);background:var(--surface);
  padding:var(--s3);font-family:var(--font-b);font-size:var(--t-md);color:var(--text)}
.v4 .v4-field textarea{resize:vertical;line-height:var(--lh-snug)}
.v4 .v4-field input:focus,.v4 .v4-field textarea:focus,.v4 .v4-field select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}

/* The follower figures row on /author-dashboard/followers. */
.v4 .v4-figs{display:flex;gap:var(--s6);flex-wrap:wrap}
.v4 .v4-figs > div{display:flex;flex-direction:column;gap:2px}
.v4 .v4-figs span{font-family:var(--font-d);font-size:var(--t-2xl);color:var(--green);line-height:1}
.v4 .v4-figs em{font-style:normal;font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.1em;color:var(--text4)}

.v4 .v4-follow-list{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0}
.v4 .v4-follow-i{display:inline-flex;align-items:center;gap:var(--s2);
  text-decoration:none;color:var(--text2);font-size:var(--t-sm);min-width:0}
.v4 .v4-follow-i .v4-face{margin-left:0;border:none}
.v4 .v4-follow-i:hover{color:var(--green)}
.v4 .v4-follow-i:hover .v4-face{box-shadow:0 0 0 2px var(--green)}

.v4 .v4-bc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s4)}
/* beta.9 — 74px packed 7 covers across the wrap and none of them was legible.
   At 92px it fits 6 and the cover art starts doing its job. */
.v4 .v4-bc-grid.is-mini{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--s3)}
/* v4.1.0 — the title leads. It was 13px/500 against an author at 12px/400:
   one pixel and one weight step apart, so a grid of cards read as an
   undifferentiated block of text. */
/* v4.1.1 — clamped. "Whispers from the Mist of Tripura Hills: True Hauntings
   and Supernatural Tales from Tripura" ran five lines next to "Arachnid" at
   one, so a row of cards sat at five different heights and read as a mess.
   Two lines for a title, one for an author, ellipsis after. The information
   stays; the raggedness does not. */
.v4 .v4-bc-title{font-size:var(--t-sm);font-weight:var(--w-name);line-height:var(--lh-snug);
  margin:var(--s2) 0 0;color:var(--text);overflow-wrap:anywhere;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v4 .v4-bc-author{font-size:var(--t-xs);font-weight:var(--w-body);color:var(--text3);margin:3px 0 0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
/* The verified mark. Sized to the byline rather than the body so it reads as
   part of the name, and given a little optical lift because a check glyph sits
   low in most faces. */
/* 4.5.7 — renamed from .v4-verified to .v4-vmark. This rule and the pill rule
   further down both claimed .v4-verified, and the later one won for both, so
   the bare mark was inheriting a flex box and a gap it had no use for. */
.v4 .v4-vmark{display:inline-flex;align-items:center;margin-left:4px;
  vertical-align:-1px;line-height:0}
.v4 .v4-vmark .v4-vdisc{width:11px;height:11px}
/* The rating row on a card. Only rendered where the sample size earns it, so
   most cards have nothing here and the row costs nothing when absent. */
.v4 .v4-bc-rating{display:flex;align-items:center;gap:var(--s2);margin-top:4px}
/* beta.9 — 44px was narrower than the text beside it was tall, so the row read
   as a list with a stamp rather than as a book. 64px is still a row, not a card. */
.v4 .v4-bc-row-cover{width:64px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════════════════════
   THE WEEK BAR — the host prompt that opens the Commons
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-week{background:var(--text);color:var(--bg2);border-radius:var(--rad-lg);padding:var(--s5)}
/* v4.6.2 — the dark panel keeps the original value. --text4 was darkened for
   the cream ground where it failed at 2.55:1; on this near-black panel that
   same original value is already 6.23:1, and darkening it here would take it
   to 3.39:1 and break the one place it worked. */
.v4 .v4-week .v4-meta{color:var(--text4-dark)}
.v4 .v4-week h2{font-family:var(--font-d);font-weight:var(--w-display);font-size:var(--t-2xl);line-height:var(--lh-tight);color:var(--bg);margin:var(--s2) 0 var(--s3)}
.v4 .v4-week p{margin:0 0 var(--s4);color:#C8CFC2;font-size:var(--t-base);max-width:56ch}
/* beta.7 — .v4-btn-face is gone with the face it held: the author's photo moved
   to the byline, so nothing renders that class any more and leaving the rules
   behind would be dead CSS shadowing nothing.
   is-on outlived it and is still on the book page's Following link, so it is
   promoted here rather than dropped with its old parent. */
.v4 .v4-btn.is-on{border-color:var(--green);color:var(--green)}

/* beta.7 — online sellers, inside the Where to find it panel and under the
   indie shops. A top border only when there are stockists above to divide from,
   which is what :not(:first-child) is doing. */
.v4 .v4-sellers{margin-top:var(--s4)}
.v4 .v4-sellers:not(:first-child){border-top:1px solid var(--line);padding-top:var(--s4)}
.v4 .v4-sellers .v4-btn{margin-top:var(--s2)}

/* beta.7 — a checkbox row that also carries a link somewhere. The anchor is a
   sibling of the label, never a child: a link inside a label that toggles a
   checkbox is one click doing two things. */
.v4 .v4-check-wrap{display:flex;flex-direction:column;gap:var(--s2)}
/* 4.16.0 — book formats on the author's Add your book form: tappable pills. */
.v4 .v4-subfmts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.v4 .v4-subfmt{position:relative;display:inline-flex}
.v4 .v4-subfmt input{position:absolute;opacity:0;width:1px;height:1px}
.v4 .v4-subfmt span{display:inline-block;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;font-size:var(--t-sm);color:var(--text2);cursor:pointer;background:var(--surface)}
.v4 .v4-subfmt input:checked + span{background:var(--green-tint);border-color:var(--green);color:var(--green-h)}
.v4 .v4-subfmt input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
.v4 .v4-submine{margin:var(--s3) 0 var(--s2)}
.v4 .v4-check-link{align-self:flex-start;font-family:var(--font-m);
  font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);text-decoration:none;padding-left:calc(var(--s5) + var(--s2))}
.v4 .v4-check-link:hover{text-decoration:underline}

.v4 .v4-week-acts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
/* "No answers yet" is a plain line, not a button — it sits on the dark week bar
   so it needs the light text the rest of that block uses. */
.v4 .v4-week-acts .v4-meta{color:var(--text4-dark)}
.v4 .v4-week .v4-btn{background:var(--bg2);color:var(--text)}
.v4 .v4-week .v4-btn.is-ghost{background:transparent;color:var(--bg2);border-color:var(--text3)}

/* ══════════════════════════════════════════════════════════════════════════
   THE DIGEST — not a stream.
   Follow bursts collapse to one line and quiet days are absorbed. A raw
   chronological feed at this volume renders eight near-identical follow rows
   and reads like a bot log.
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-digest{border-left:2px solid var(--line);padding-left:var(--s5);margin-left:var(--s1)}
.v4 .v4-digest-item{position:relative;padding:var(--s3) 0}
.v4 .v4-digest-item::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 5px);top:22px;width:9px;height:9px;border-radius:var(--rad-full);background:var(--line2)}
.v4 .v4-digest-item.is-hot::before{background:var(--rust)}
.v4 .v4-digest-item p{margin:var(--s1) 0 0;font-size:var(--t-base);color:var(--text2)}
.v4 .v4-digest-item p b{font-weight:500;color:var(--text)}
/* A notification inside the digest. The whole message is the link, and the
   timestamp sits under it rather than beside it so a long message does not
   squeeze the time into a column of its own. */
.v4 .v4-notif-link{color:var(--text2);text-decoration:none}
.v4 .v4-notif-link:hover{color:var(--green);text-decoration:underline}
.v4 .v4-notif-when{display:block;margin-top:2px;font-family:var(--font-m);
  font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}

/* ==========================================================================
   LIVE SEARCH
   A real form around a real input: with the script blocked it submits to
   /search and still works. The dropdown is the only enhancement.
   ========================================================================== */
.v4 .v4-search{position:relative;display:flex;gap:var(--s2);margin-top:var(--s5)}
.v4 .v4-search input[type=search]{flex:1;min-width:0;padding:var(--s3) var(--s4);
  border:1px solid var(--line2);border-radius:var(--rad);background:var(--surface);
  font-family:var(--font-b);font-size:var(--t-md);color:var(--text)}
.v4 .v4-search input[type=search]:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint)}
.v4 .v4-search-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--rad);
  box-shadow:0 8px 28px rgba(0,0,0,.12);overflow:hidden;max-height:60vh;overflow-y:auto}
.v4 .v4-search-results.is-open{display:block}
/* beta.7 — a thumbnail beside each hit. The row becomes a two-column flex
   (thumb, text stack) rather than a single text column. A 2:3 cover and a round
   face both occupy the same 30px box, so mixed lists stay aligned. */
.v4 .v4-search-img{width:30px;height:45px;flex-shrink:0;object-fit:cover;
  border-radius:var(--rad-sm,4px);background:var(--surface2)}
.v4 .v4-search-img.is-round{height:30px;border-radius:var(--rad-full);
  margin-top:7px;margin-bottom:8px}
.v4 .v4-search-img.is-empty{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-size:var(--t-2xs);font-weight:700;color:var(--text4)}
.v4 .v4-search-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.v4 .v4-search-txt .v4-search-t,.v4 .v4-search-txt .v4-search-a{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4 .v4-search-hit{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  text-decoration:none;border-bottom:1px solid var(--line)}
.v4 .v4-search-hit:last-child{border-bottom:none}
.v4 .v4-search-hit:hover{background:var(--surface2)}
.v4 .v4-search-t{font-size:var(--t-sm);font-weight:500;color:var(--text)}
.v4 .v4-search-a{font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-search-empty{padding:var(--s3) var(--s4);font-size:var(--t-sm);color:var(--text4)}

/* ==========================================================================
   BOOK HERO, DETAILS, LIGHTBOX
   ========================================================================== */
/* Four areas rather than a cover beside one tall column. Desktop keeps the
   arrangement it has always had — everything to the right of the cover — but
   expressing it as areas is what lets the phone reflow without touching the
   markup. align-content:start stops the three right-hand rows stretching to the
   height of the cover. */
.v4 .v4-book-hero{display:grid;grid-template-columns:168px minmax(0,1fr);
  grid-template-areas:"cover head" "cover acts";
  grid-template-rows:auto 1fr;
  gap:var(--s3) var(--s5);align-items:start;align-content:start}
.v4 .v4-bh-cover{grid-area:cover}
.v4 .v4-bh-head{grid-area:head;min-width:0}
/* beta.8 — .v4-bh-meta is gone: the award moved in beside the rating and the
   grid area it held would only ever have been empty.
   flex-wrap lets the sample line and the award chip drop under the stars in a
   narrow column rather than being squeezed onto one line. */
.v4 .v4-bh-rating{display:flex;align-items:center;gap:var(--s2) var(--s3);
  flex-wrap:wrap;margin-top:var(--s3)}
.v4 .v4-bh-acts{grid-area:acts;display:flex;gap:var(--s3);flex-wrap:wrap;
  align-items:center;margin-top:var(--s2)}
.v4 .v4-cover-link{display:block;text-decoration:none}
.v4 .v4-cover-link:hover .v4-cover{box-shadow:0 4px 18px rgba(0,0,0,.18)}

/* Show more, without script. The hidden tail is inside the paragraph so the
   text reflows as one block when opened, rather than appearing as a second
   detached paragraph. The summary sits after the content so it reads as a
   control beneath the text. */
.v4 .v4-more{display:block}
.v4 .v4-more .v4-more-rest{display:none}
.v4 .v4-more[open] .v4-more-rest{display:inline}
.v4 .v4-more>summary{cursor:pointer;list-style:none;margin-top:var(--s2);
  font-size:var(--t-sm);color:var(--green-h)}
.v4 .v4-more>summary::-webkit-details-marker{display:none}
.v4 .v4-more>summary:hover{text-decoration:underline}
.v4 .v4-more[open]>summary{visibility:hidden;height:0;margin:0}

.v4 .v4-detailwrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s2) 0}
.v4 .v4-detailwrap>summary{cursor:pointer;list-style:none;display:flex;gap:var(--s3);align-items:baseline;
  flex-wrap:wrap;padding:var(--s2) 0}
.v4 .v4-detailwrap>summary::-webkit-details-marker{display:none}
.v4 .v4-detailwrap>summary::after{content:"+";margin-left:auto;color:var(--text4);font-family:var(--font-m)}
.v4 .v4-detailwrap[open]>summary::after{content:"\2212"}
.v4 .v4-detail-teaser{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.v4 .v4-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0 var(--s5);margin-top:var(--s2)}
/* v4.11.2: one line under the open list, not two. Every row draws its own
   bottom border and the wrapper draws another, with padding between them. The
   last row now sits ON the wrapper border (-1px), whatever the column count. */
.v4 .v4-detailwrap[open]{padding-bottom:0}
.v4 .v4-detailwrap[open]>.v4-details{margin-bottom:-1px}
.v4 .v4-detail{display:flex;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);min-width:0}
.v4 .v4-detail dt{margin:0;flex:0 0 88px;font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.05em;text-transform:uppercase;color:var(--text4);padding-top:2px}
.v4 .v4-detail dd{margin:0;flex:1;min-width:0;font-size:var(--t-sm);color:var(--text2);overflow-wrap:anywhere}

/* Lightbox with no script. :target opens it, the whole overlay is the close
   link. Only rendered when there is a real image — a generated cover has
   nothing to enlarge. */
/* v4.9.1 — 400, was 200. The tab bar is 350, so an enlarged cover was a
   full-screen dark overlay with five lit tabs sitting on top of it, and the
   overlay is itself the close link, so the strip they occupied could not be
   tapped to dismiss it. Above the bar, the picture is the whole screen. */
.v4 .v4-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(18,25,15,.88);z-index:400;padding:var(--s5)}
.v4 .v4-lightbox:target{display:flex}
.v4 .v4-lightbox img{max-width:min(92vw,520px);max-height:90vh;border-radius:var(--rad);
  box-shadow:0 10px 50px rgba(0,0,0,.5)}

/* ==========================================================================
   FIGURES — the only numbers on a profile
   Points, streaks and rank are deliberately absent. These three are counts of
   things a person did, not a score they earned.
   ========================================================================== */
.v4 .v4-figures{display:flex;gap:var(--s5);flex-wrap:wrap}
.v4 .v4-figures div{min-width:0}
.v4 .v4-figures span{display:block;font-family:var(--font-d);font-size:var(--t-2xl);line-height:1.1;color:var(--text)}
.v4 .v4-figures em{font-style:normal;font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.06em;color:var(--text4)}

/* ==========================================================================
   RATINGS AND AWARDS
   Stars are a bookstore idiom, so they are small, muted, and never appear
   without a name attached. Awards are editorial signal and carry more weight
   here than any score does — a win is amber, everything else is quiet.
   ========================================================================== */
/* Two layers: grey stars beneath, amber clipped to a percentage above. This is
   what makes a half star possible — reviews.rating is 1-10, so 7 is three and a
   half, and rounding it to whole stars loses the thing the scale exists for. */
/* Stars are inline SVG, sized in px and filled by class. They were text glyphs
   clipped by percentage until alpha.16; the geometry now comes from the path,
   so a half star is exactly half regardless of what font is available.
   An svg with no width and no fill expands to its container and paints black,
   which is what happened when the markup changed and these rules did not. */
.v4 .v4-stars{display:inline-block;vertical-align:-2px;width:66px;height:13px;flex-shrink:0}
/* beta.4 — the book hero passes 'lg'. 130px is a visible step up from 110 at
   the top of a page without competing with the h1 beside it. */
.v4 .v4-stars.is-lg{width:130px;height:26px;vertical-align:-5px}
.v4 .v4-star-off{fill:var(--star-off)}
.v4 .v4-star-on{fill:var(--star)}

/* The picker. Ten invisible half-width labels laid over one SVG star strip.
   The previous version clipped a text glyph to .5em per half, which assumes a
   star character is exactly one em wide. It is not, and it varies by fallback
   font — that is what produced ragged halves and an apparent sixth star.
   Geometry now comes from the SVG, and fill is driven by which radio is checked
   through sibling selectors, so there is still no script. */
/* v4.12.3 one-tap rating; 4.14.2 — now the same star control as the review
   form, in save mode (ui_quick_rate wraps ui_rate_picker). */
.v4 .v4-qrate{display:inline-block;margin:0}
.v4 .v4-rateask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.v4 .v4-rateask-h{font-family:var(--font-d);font-size:var(--t-lg);color:var(--text);margin:0}
.v4 .v4-rateask-sub{margin:var(--s1) 0 0;font-size:var(--t-sm);color:var(--text3)}
.v4 .v4-ratelist{list-style:none;margin:0;padding:0}
.v4 .v4-ratelist li{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line);flex-wrap:wrap}
.v4 .v4-ratelist li:first-child{border-top:0}
.v4 .v4-ratelist-t{flex:1 1 140px;min-width:0}
.v4 .v4-ratelist-t a{color:var(--text);font-weight:500;text-decoration:none}
.v4 .v4-ratelist-t a:hover{text-decoration:underline}
.v4 .v4-ratelist-t span{display:block;font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 4.14.2 — the star control (ui_rate_picker): five stars of 44px, press and
   slide in half stars. Ten radios hold the value; fill and the value beside the
   stars come from the checked radio. Without script the five labels are
   whole-star choices. With script (html.v4-rate-js) the strip takes the finger:
   .is-pv previews a value through --pv while pressing or hovering, and
   touch-action:pan-y leaves vertical moves to the page so a scroll cancels. */
.v4 .v4-rate{position:relative;display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap;line-height:0}
.v4 .v4-rate input{position:absolute;opacity:0;width:0;height:0}
.v4 .v4-rate-stars{position:relative;display:inline-block;width:220px;height:44px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.v4 .v4-rate-stars .v4-stars{width:220px;height:44px;display:block;pointer-events:none}
.v4 .v4-rate-stars .v4-star-off{fill:var(--line2)}
.v4 .v4-rate-stars .v4-star-on{fill:var(--star);opacity:0}
.v4 .v4-rate-whole{position:absolute;top:0;height:100%;width:44px;cursor:pointer;z-index:2}
.v4 .v4-rate-whole:nth-of-type(1){left:0}
.v4 .v4-rate-whole:nth-of-type(2){left:44px}
.v4 .v4-rate-whole:nth-of-type(3){left:88px}
.v4 .v4-rate-whole:nth-of-type(4){left:132px}
.v4 .v4-rate-whole:nth-of-type(5){left:176px}
.v4-rate-js .v4 .v4-rate-stars{touch-action:pan-y;cursor:pointer}
.v4-rate-js .v4 .v4-rate-save{display:none}
.v4 .v4-rate.is-pv .v4-rate-stars .v4-star-on{opacity:1!important;clip-path:inset(0 calc(100% - var(--pv)) 0 0)!important}
.v4 .v4-rate.is-pv .v4-rate-val::after{content:attr(data-pv)!important}
.v4 .v4-rate-bubble{position:absolute;bottom:100%;left:0;transform:translate(-50%,-4px);padding:3px 8px;border-radius:8px;background:var(--text);color:var(--bg);font-family:var(--font-m);font-size:var(--t-sm);line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;z-index:3}
.v4 .v4-rate.is-press .v4-rate-bubble{opacity:1}
.v4 .v4-rate.is-saving{opacity:.55;pointer-events:none}
.v4 .v4-rate input[value="1"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 90% 0 0)}
.v4 .v4-rate input[value="2"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 80% 0 0)}
.v4 .v4-rate input[value="3"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 70% 0 0)}
.v4 .v4-rate input[value="4"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 60% 0 0)}
.v4 .v4-rate input[value="5"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 50% 0 0)}
.v4 .v4-rate input[value="6"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 40% 0 0)}
.v4 .v4-rate input[value="7"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 30% 0 0)}
.v4 .v4-rate input[value="8"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 20% 0 0)}
.v4 .v4-rate input[value="9"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 10% 0 0)}
.v4 .v4-rate input[value="10"]:checked ~ .v4-rate-stars .v4-star-on{opacity:1;clip-path:inset(0 0% 0 0)}
.v4 .v4-rate input:focus-visible ~ .v4-rate-stars{outline:2px solid var(--green);outline-offset:3px}
.v4 .v4-rate-val{font-family:var(--font-m);font-size:var(--t-sm);color:var(--text2);min-width:2.2em;line-height:1}
.v4 .v4-rate input[value="1"]:checked ~ .v4-rate-val::after{content:"0.5"}
.v4 .v4-rate input[value="2"]:checked ~ .v4-rate-val::after{content:"1"}
.v4 .v4-rate input[value="3"]:checked ~ .v4-rate-val::after{content:"1.5"}
.v4 .v4-rate input[value="4"]:checked ~ .v4-rate-val::after{content:"2"}
.v4 .v4-rate input[value="5"]:checked ~ .v4-rate-val::after{content:"2.5"}
.v4 .v4-rate input[value="6"]:checked ~ .v4-rate-val::after{content:"3"}
.v4 .v4-rate input[value="7"]:checked ~ .v4-rate-val::after{content:"3.5"}
.v4 .v4-rate input[value="8"]:checked ~ .v4-rate-val::after{content:"4"}
.v4 .v4-rate input[value="9"]:checked ~ .v4-rate-val::after{content:"4.5"}
.v4 .v4-rate input[value="10"]:checked ~ .v4-rate-val::after{content:"5"}
/* Just rated: what you gave, with the same stars pre-filled to change it. */
.v4 .v4-ratetweak-h{margin:0 0 var(--s2);font-size:var(--t-sm);color:var(--text2);line-height:1.5}
.v4 .v4-ratetweak-h b{font-weight:500;color:var(--text)}
.v4 .v4-ratelist-just{padding:var(--s3);margin-bottom:var(--s3);border:1px solid var(--green);border-radius:10px;background:var(--green-tint)}
/* Skip, beside the stars in the list and under the card on a book page. */
.v4 .v4-rateskip{display:inline-block;margin:0}
.v4 .v4-rateskip button{background:none;border:0;padding:var(--s2) 0;cursor:pointer;color:var(--text3)}
.v4 .v4-rateskip button:hover{color:var(--green-h)}
/* The folded list on your profile: one line, like Edit your profile above it. */
.v4 .v4-ratefold>summary{cursor:pointer;list-style:none;display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
.v4 .v4-ratefold>summary::-webkit-details-marker{display:none}

.v4 .v4-award{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--line)}
.v4 .v4-award:last-child{border-bottom:none}
.v4 .v4-award-res{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.06em;
  color:var(--text4);white-space:nowrap;flex-shrink:0;min-width:74px}
.v4 .v4-award.is-win .v4-award-res{color:var(--amber);font-weight:500}
.v4 .v4-award-name{font-size:var(--t-sm);color:var(--text2);line-height:var(--lh-snug);min-width:0}
.v4 .v4-award-name i{font-style:normal;color:var(--text4)}
.v4 .v4-award-strip{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);
  border-radius:var(--rad-full);background:rgba(122,92,30,.10);color:var(--amber);
  font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════════════════
   COMPOSE — saying something in a room, not filling in a form

   Collapsed it is one line that sits in the same rhythm as a thought: avatar,
   then text. It opens on focus-within, which is pure CSS and needs no script.
   Native selects are the least designed element available, so the options are
   radio pills that reuse the tag shape already on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-compose{border:1px solid var(--line);border-radius:var(--rad-lg);background:var(--surface);
  padding:var(--s3) var(--s4);transition:border-color .18s ease,box-shadow .18s ease}
.v4 .v4-compose:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.v4 .v4-compose-head{display:flex;gap:var(--s3);align-items:flex-start}
/* 4.5.1 — width:100% added. flex:1 sizes this only inside .v4-compose-head;
   as a direct child of .v4-compose it was inert and the textarea fell back to
   its default cols. Harmless in the flex case, where flex-basis:0% wins. */
.v4 .v4-compose textarea{flex:1;min-width:0;width:100%;box-sizing:border-box;
  border:none;background:transparent;resize:none;
  padding:var(--s2) 0;font-family:var(--font-b);font-size:var(--t-md);line-height:var(--lh-snug);
  color:var(--text);height:40px;transition:height .18s ease}
.v4 .v4-compose textarea::placeholder{color:var(--text4)}
.v4 .v4-compose textarea:focus{outline:none}
.v4 .v4-compose:focus-within textarea{height:104px}

/* The controls stay out of the way until there is something to control. */
.v4 .v4-compose-foot{max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .2s ease,opacity .2s ease,margin-top .2s ease}
.v4 .v4-compose:focus-within .v4-compose-foot{max-height:900px;opacity:1;margin-top:var(--s3)}
/* 4.13.2 — and it STAYS open while there is something in it. It used to close
   the moment focus left the form: picking a book from the list (the button you
   tapped is replaced by the chosen book) and, in Safari, tapping Post (Safari
   does not focus a button you click) both collapsed the box under the finger.
   Browsers without :has() keep the old behaviour. 900px, not 260px, so an open
   poll plus a list of books is not cut off. */
.v4 .v4-compose:has(textarea:not(:placeholder-shown)) textarea{height:104px}
.v4 .v4-compose:has(textarea:not(:placeholder-shown)) .v4-compose-foot,
.v4 .v4-compose.has-book .v4-compose-foot{max-height:900px;opacity:1;margin-top:var(--s3)}
/* 4.14.1 — the review stars stay out once a star is picked or a line typed, so a tap that moves focus does not fold them away mid-rating. */
.v4 .v4-compose:has(.v4-rate input:checked) .v4-compose-foot,.v4 .v4-compose:has(.v4-rate.is-pv) .v4-compose-foot,.v4 .v4-compose:has(textarea:not(:placeholder-shown)) .v4-compose-foot{max-height:900px;opacity:1;margin-top:var(--s3)}
.v4 .v4-compose-bar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.v4 .v4-compose-bar .v4-btn{margin-left:auto}

.v4 .v4-pills{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
/* An author row. A writer is a person, so the row leads with a face rather than
   a cover, and the whole row is the link. */
.v4 .v4-arow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  align-items:center;padding:var(--s4) 0;text-decoration:none;color:inherit;
  border-top:1px solid var(--line)}
.v4 .v4-arow:hover .v4-bc-title{color:var(--green)}
.v4 .v4-arow-now{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--text2)}
.v4 .v4-arow-now em{font-style:normal}
/* Columns, because production has 128 writers and one column of them is a very
   long page. auto-fill against a 300px minimum gives three columns on a wide
   desktop, two on a laptop or landscape tablet, one on a phone — without a
   media query, and without a fixed count that would strand a single card in a
   row of three. The border-top on every row rather than on siblings is what
   makes the columns line up: a sibling selector would skip whichever row
   happens to start each column. */
.v4 .v4-arow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  column-gap:var(--s6)}
/* A filter row: label at the side, controls beside it. Three stacked
   eyebrow-over-chips groups read as six rows of equal weight with nothing
   saying which label owns which chips; pulling the label out makes the
   grouping structural. Collapses to stacked below 760. */
/* v4.10.0 — the poll compose box and the in-post poll.

   .v4-pollbox is a <details>: opening it IS choosing to make a poll, so there
   is no radio to keep in sync with a reveal and nothing to fail if script or
   :has() is unavailable. The server reads the same fact — two or more filled
   answers — so the control and the payload cannot disagree.

   .v4-poll.is-inpost drops the card chrome: inside a post it is part of the
   post, not a second panel sitting on one. */
.v4 .v4-pollbox{margin-top:var(--s3)}
.v4 .v4-pollbox>summary{list-style:none;display:inline-block;cursor:pointer}
.v4 .v4-pollbox>summary::-webkit-details-marker{display:none}
.v4 .v4-polloptions{display:grid;gap:var(--s2);margin-bottom:var(--s2)}
/* v4.11.0 — .v4-reportbox. Same disclosure shape as .v4-pollbox above and for
   the same reason: the reason select has to live somewhere, and a <details>
   needs no script and no query parameter. Sits in the .v4-acts row beside Like
   and Reply, so it borrows their rhythm rather than announcing itself — a
   report control that catches the eye invites reports nobody meant to file. */
.v4 .v4-reportbox{display:inline-block}
.v4 .v4-reportbox>summary{list-style:none;display:inline-block;cursor:pointer}
.v4 .v4-reportbox>summary::-webkit-details-marker{display:none}
.v4 .v4-reportbox[open]{display:block;width:100%;margin-top:var(--s2)}
.v4 .v4-reportbox form{display:grid;gap:var(--s2);margin-top:var(--s2);max-width:320px}
/* v4.10.1 — the collapsed change-your-answer control, and the read-only
   option rows a signed-out reader sees. .is-static borrows the option row's
   shape but has no input: it shows WHAT is on offer without pretending to be
   something you can pick. */
.v4 .v4-poll-change{margin-top:var(--s3)}
.v4 .v4-poll-change>summary{list-style:none;display:inline-block;cursor:pointer}
.v4 .v4-poll-change>summary::-webkit-details-marker{display:none}
.v4 .v4-poll-opt.is-static{cursor:default;opacity:.85}
.v4 .v4-poll-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line2);
  flex:none;display:inline-block}
.v4 .v4-poll.is-inpost{background:none;border:0;border-left:2px solid var(--line);
  border-radius:0;padding:var(--s1) 0 var(--s1) var(--s3);margin:var(--s3) 0 0}

/* v4.9.6 — facets that share a line. The label sits beside its own chips
   rather than above them, and the groups wrap as units, so "Show" never ends
   up on one line with "Sort"'s chips underneath it. */
.v4 .v4-facetrow{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  align-items:center;padding:var(--s3) 0}
.v4 .v4-facetgrp{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.v4 .v4-facetgrp .v4-facet-label{padding-top:0}
.v4 .v4-facet{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s3);
  align-items:start;padding:var(--s3) 0}
/* v4.10.5 — the filter block on /books. Not a .v4-panel: a border, a fill and a
   radius all announce a separate object, and this is a row of controls attached
   to the list under it. */
.v4 .v4-filters{margin-top:var(--s4)}
.v4 .v4-morefilters>summary{list-style:none;display:block;cursor:pointer;padding:var(--s2) 0}
.v4 .v4-morefilters>summary::-webkit-details-marker{display:none}
.v4 .v4-morefilters[open]>summary{padding-bottom:0}
.v4 .v4-facet + .v4-facet{border-top:1px solid var(--line)}
.v4 .v4-facet-label{font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);padding-top:7px}
/* The bar between the filters and the grid: count on the left, order on the
   right. Separating narrowing from arranging, and giving the grid room to
   start — it previously butted straight up against the last chip row. */
.v4 .v4-listbar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0 var(--s5)}

/* A chip is a pill that submits. Same shape as the radio pills so the shelf
   control and the compose options read as one family. */
/* v4.10.5 — 13px, and tighter. The chips are a filter, not body copy, and on a
   phone eight state names at 14px pushed the first book cover 823px down the
   page. The control itself shrinks; the reach does not -- the ::before band
   below stays 44px, which is exactly what the 4.6.3 pattern is for. */
.v4 .v4-chip{font-family:var(--font-b);font-size:13px;padding:3px 10px;
  border-radius:var(--rad-full);border:1px solid var(--line2);color:var(--text3);
  background:transparent;cursor:pointer;white-space:nowrap;transition:all .14s}
/* v4.10.5 — the count beside a chip label. It was inline opacity:.6 in five
   places, which on cream resolves to 2.40:1 -- under the 4.5 AA floor, and it
   had been that way at full size too. NO opacity below 1 passes against this
   text colour, so the hierarchy is carried by SIZE instead, and the colour is
   inherited so the selected chip's white count stays white. Same lesson as
   --text4 in 4.10.2: de-emphasise by size, never by transparency. */
.v4 .v4-chip-n{font-size:11px;color:inherit;opacity:1;margin-left:1px}
.v4 .v4-chip:hover{border-color:var(--green);color:var(--green-h)}
.v4 .v4-chip.is-on{background:var(--green);border-color:var(--green);color:#fff;font-weight:500}
.v4 .v4-pill{position:relative;display:inline-flex}
.v4 .v4-pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.v4 .v4-pill span{display:inline-block;font-family:var(--font-b);font-size:var(--t-sm);
  padding:var(--s1) var(--s3);border-radius:var(--rad-full);border:1px solid var(--line2);
  color:var(--text3);background:transparent;white-space:nowrap}
.v4 .v4-pill input:checked + span{background:var(--green-tint);border-color:var(--green);
  color:var(--green-h);font-weight:500}
.v4 .v4-pill input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}

/* Only surfaces when the host actually switches to asking a question.
   :has() is unsupported on very old browsers, where the hint simply stays
   hidden — the control still works. */
.v4 .v4-reply{margin-top:var(--s2)}
.v4 .v4-reply>summary{cursor:pointer;font-size:var(--t-sm);color:var(--green-h);list-style:none;
  display:inline-block;padding:var(--s1) 0}
.v4 .v4-reply>summary::-webkit-details-marker{display:none}
.v4 .v4-reply>summary:hover{text-decoration:underline}
.v4 .v4-reply[open]>summary{color:var(--text4)}
.v4 .v4-replies{margin:var(--s3) 0 0 var(--s4);padding-left:var(--s4);border-left:2px solid var(--line)}
.v4 .v4-replies .v4-thought{padding:var(--s2) 0}

/* v4.4.0 — the acts row under a thought: like, comment, and edit when it is
   yours. Sits outside .v4-replies, so it is flush with the thought rather than
   inside the indented comment column. Wraps rather than overflowing on a narrow
   phone, and an open form is forced onto a full line of its own so it never
   shares one with the heart. */
/* 4.5.2 — EQUAL HEIGHTS, not centred guesses. Signed out, the like and the cue
   are both direct children of this row and line up; signed in, the like is a
   <button> in a <form> and the cue is a <span> in a <summary> in a <details>,
   so the two flex items are boxes of different heights built from different
   line-heights and padding. align-items:center then centres two unequal boxes,
   which is close but never exact. Giving every item and every wrapper the SAME
   fixed height removes the variance instead of compensating for it. */
.v4 .v4-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  margin-top:var(--s2);--act-h:20px}
.v4 .v4-acts>form{margin:0;display:flex;align-items:center;height:var(--act-h)}
.v4 .v4-acts>details>summary{display:flex;align-items:center;height:var(--act-h)}
.v4 .v4-acts>details[open]>summary{height:auto}
/* 4.5.1 — the cue gets the SAME box as the like button. align-items:center
   centres boxes, not text, so two items with different line-heights and
   padding sit on different baselines however they are aligned. */
.v4 .v4-acts .v4-reply-cue{margin-top:0;display:inline-flex;align-items:center;
  height:var(--act-h);line-height:var(--act-h);padding:0}
.v4 .v4-acts>details[open]{flex:1 1 100%}
/* 4.5.12 — the Commons reply control joins this row. .v4-reply carries its own
   margin-top and its summary its own font-size and padding, all set for when it
   stood alone under a post. Inside the row those are exactly the unequal boxes
   that align-items:center cannot fix, so they are removed rather than
   compensated for. The label inside is a .v4-reply-cue, which the rule above
   has already given the shared height. */
/* 4.5.13 — the tools <details> too, which 4.5.12 missed. .v4-tools carries
   margin-top:--s2 for when it hangs under a thought on its own, and in a row
   aligned on centre an 8px top margin lowers the item by four. That is the
   whole of the misalignment: EDIT was on the line, just not on the same one.
   BOTH classes have to be named. .v4-tools is declared 450 lines below this
   block, so .v4-acts>* at equal specificity would lose on source order — the
   reason this is written as two explicit selectors rather than one tidy one. */
.v4 .v4-acts>.v4-reply,
.v4 .v4-acts>.v4-tools{margin-top:0}
.v4 .v4-acts>.v4-reply>summary{padding:0;font-size:var(--t-2xs)}
.v4 .v4-acts>.v4-reply[open]>summary{height:var(--act-h)}
/* 4.5.12 — the folded answer box. Same idiom as .v4-tools: a cue that gets out
   of the way once the box it opens is open. */
.v4 .v4-answer{margin-top:var(--s2)}
.v4 .v4-answer>summary{list-style:none;display:block;cursor:pointer}
.v4 .v4-answer>summary::-webkit-details-marker{display:none}
.v4 .v4-answer[open]>summary{display:none}
.v4 .v4-like{display:inline-flex;align-items:center;gap:5px;background:none;border:none;
  padding:0;height:var(--act-h,20px);cursor:pointer;font-family:var(--font-m);
  font-size:var(--t-xs);letter-spacing:.04em;color:var(--text3);line-height:var(--act-h,20px)}
.v4 .v4-like:hover{color:var(--rust)}
.v4 .v4-like.is-on{color:var(--rust)}
.v4 .v4-like.is-static{cursor:default}
.v4 .v4-like svg{display:block;flex-shrink:0}
/* 4.5.0 — the word, matching .v4-reply-cue exactly so LIKE and 1 COMMENT read
   as one row of controls rather than an icon next to some text. */
.v4 .v4-like-t{font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase}

/* 4.5.1 — a quote that links to itself. Inherits the quote's own type rather
   than turning the line green: it is still the line, not a link with a line in
   it. The affordance is the underline on hover. */
/* 4.5.2 — the cover beside a book-scoped post, and the face beside a digest
   line. .v4-face carries margin-left:-9px and a ring because it is built for
   overlapping stacks; both are reset wherever it stands alone. */
.v4 .v4-postbook{display:inline-flex;align-items:center;gap:var(--s2)}
.v4 .v4-postbook img{width:20px;height:29px;object-fit:cover;border-radius:2px;
  display:block;flex-shrink:0}
/* 4.5.4 — the face and the sentence are a flex row, centred on each other.
   .v4-face carries margin-left:-9px and a 2px ring because it is built for
   overlapping stacks; both are reset here, where it stands alone. */
.v4 .v4-digest-line{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1)}
.v4 .v4-digest-line>p{margin:0}
.v4 .v4-digest-line .v4-face{margin-left:0;border:none}
/* BOOK 3 — a stockist is a shop, so it gets a shop's mark. At one or two rows
   this is a face on a name, not a grid of logos. The initials fall back tinted,
   the same pattern the partner directory already uses at 54px. */
.v4 .v4-shopmark{width:28px;height:28px;border-radius:6px;flex-shrink:0;
  overflow:hidden;border:1px solid var(--line);background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-size:var(--t-2xs);font-weight:600;color:#fff}
.v4 .v4-shopmark img{width:100%;height:100%;object-fit:cover;display:block}
.v4 .v4-shoprow{display:flex;align-items:center;gap:var(--s3)}
.v4 .v4-quote-link{color:inherit;text-decoration:none}
.v4 .v4-quote-link:hover{text-decoration:underline;text-underline-offset:3px}
.v4 .v4-editform>summary{list-style:none;display:block;cursor:pointer}
.v4 .v4-editform>summary::-webkit-details-marker{display:none}
.v4 .v4-editform[open]>summary{display:none}

/* 4.5.0 — the control that starts a conversation about a book. */
.v4 .v4-discuss{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
/* v4.10.3 — first thing in the card, so there is nothing for the rule above to
   separate it from. A divider with nothing on one side of it reads as a broken
   component, which is what an empty book page has looked like since 4.5.0. */
.v4 .v4-discuss.is-first{margin-top:0;padding-top:0;border-top:0}
.v4 .v4-ask{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.v4 .v4-ask-t{flex:1 1 180px;font-family:var(--font-b);font-size:var(--t-sm);
  color:var(--text3);line-height:1.45}
.v4 .v4-discuss>summary{list-style:none;display:block;cursor:pointer}
.v4 .v4-discuss>summary::-webkit-details-marker{display:none}
.v4 .v4-discuss[open]>summary{display:none}
.v4 .v4-discuss-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s2)}
.v4 .v4-hint{font-size:var(--t-xs);color:var(--text3)}

/* 4.5.0 — Share. Sits with the other things a reader does, and keeps the
   quieter weight: it is an offer, not the primary action on the page. */
.v4 .v4-share{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:var(--s2) var(--s3);font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--text2);line-height:1}
.v4 .v4-share:hover{border-color:var(--green);color:var(--green-h)}
.v4 .v4-share.is-done{border-color:var(--green);color:var(--green-h)}
.v4 .v4-share svg{flex-shrink:0}

/* 4.5.0 — the sticky bar. Phone only: on a laptop the hero controls have never
   left the screen, so there is nothing to bring back. */
.v4 .v4-bookbar{display:none}
.v4 .v4-bookbar-space{display:none}
/* v4.9.1 — the section strip. Links that look like tabs; see ui_segments().
   Scrollable sideways rather than wrapping, so a third item never drops to a
   second line and shifts the page under a thumb.

   v4.9.4 — and it is PHONE ONLY, hidden by default and revealed below 900px.
   This strip is the tab bar's second level: it exists because Discover and
   Commons are single tabs that stand for three pages and two. Above 900px
   there is no tab bar, and the top navigation already lists Books, Authors,
   Lists, Community and the Quote Wall as siblings of each other — so on a
   laptop the strip was a second, smaller copy of a row already on screen.

   900px is not a number chosen for this rule. It is the tab bar's breakpoint,
   in CSS.php, and the two must stay equal: a strip that appeared at a width
   where the bar did not would be a sub-navigation for a navigation that is
   not there. They live in different files, so a guard checks they match —
   the same drift that put the giveaway swap at 1000px while the columns
   stacked at 760. */
.v4 .v4-segs{display:none;gap:var(--s5);align-items:flex-end;
  border-bottom:1px solid var(--line);margin:0 0 var(--s5);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media (max-width:900px){
  .v4 .v4-segs{display:flex}
}
.v4 .v4-segs::-webkit-scrollbar{display:none}
.v4 .v4-seg{display:block;flex:none;padding:0 0 var(--s2);
  font-family:var(--font-b);font-size:var(--t-base);font-weight:500;
  color:var(--text3);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.v4 .v4-seg:hover{color:var(--text)}
.v4 .v4-seg.is-on{color:var(--text);font-weight:600;border-bottom-color:var(--green)}
.v4 .v4-seg:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

/* v4.9.2 — the giveaway, in the main column on a phone and in the rail on a
   desktop. One render in HomeV4.php, echoed into two slots; these two rules
   are the whole mechanism that keeps exactly one of them on screen.

   This replaces 4.9.0's .is-lead-rail, which hoisted the entire <aside> — all
   seven panels — above the main column, and did it at 1000px when the columns
   themselves do not stack until 760px, so it also collapsed the tablet
   layout. Both rules are gone; do not reintroduce an order: -1 on the rail.

   The swap width is the same 760px the grid collapses at, deliberately: above
   it there is a rail for the panel to sit in, below it there is not. */
.v4 .v4-give-m{display:none}
@media (max-width:760px){
  .v4 .v4-give-m{display:block}
  .v4 .v4-give-d{display:none}
}
/* 4.37.0 — the promo slot (src/Pages/Promo.php). Same swap as the giveaway on
   the home page; elsewhere it is one card in the rail. Quieter than the giveaway
   on purpose: a grey label, not a green bar, and an outlined button, so the one
   thing with a deadline stays the loudest. */
.v4 .v4-promo-m{display:none}
@media (max-width:760px){
  .v4 .v4-promo-m{display:block}
  .v4 .v4-promo-d{display:none}
}
/* 4.38.0 — Talking now (HomeV4.php home_v4_talk()), same 760px swap, and a
   thought's stars in Recently (CommonsV4.php). */
.v4 .v4-talk-m{display:none}
@media (max-width:760px){
  .v4 .v4-talk-m{display:block}
  .v4 .v4-talk-d{display:none}
}
.v4 .v4-talk-q{display:block;font-family:var(--font-d);font-size:var(--t-lg);font-weight:var(--w-name);line-height:1.3;
  color:var(--text);text-decoration:none;margin:var(--s2) 0 var(--s1)}
.v4 .v4-talk-q:hover{color:var(--green-h)}
.v4 .v4-talk-on{font-size:var(--t-sm);color:var(--text3);margin:0 0 var(--s3)}
.v4 .v4-talk-on a{color:inherit}
.v4 .v4-talk-who{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--text3);margin:0 0 var(--s3)}
.v4 .v4-talk-faces{display:flex;flex-shrink:0}
.v4 .v4-talk-faces>*{margin-left:-6px;box-shadow:0 0 0 2px var(--surface);border-radius:50%}
.v4 .v4-talk-faces>:first-child{margin-left:0}
.v4 .v4-digest-stars{display:inline-block;vertical-align:-2px;margin-left:4px}
.v4 .v4-digest-stars .v4-stars{height:13px;width:65px}
.v4 .v4-promo{position:relative}
.v4 .v4-promo-head{font-family:var(--font-m);font-size:var(--t-2xs);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text4);margin:0 var(--s6) var(--s3) 0}
.v4 .v4-promo-head.is-sponsored{color:var(--text3)}
.v4 .v4-promo-x{position:absolute;top:var(--s2);right:var(--s2);width:32px;height:32px;padding:0;border:0;
  background:transparent;color:var(--text4);font-size:20px;line-height:1;border-radius:50%;cursor:pointer}
.v4 .v4-promo-x:hover{background:var(--bg2);color:var(--text)}
.v4 .v4-promo-row{display:flex;gap:var(--s3);align-items:flex-start;margin:0 0 var(--s3)}
.v4 .v4-promo-ico{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--green-tint);
  color:var(--green);display:flex;align-items:center;justify-content:center}
.v4 .v4-promo-h{font-family:var(--font-d);font-size:var(--t-lg);font-weight:var(--w-name);line-height:1.25;color:var(--text);margin:0 0 var(--s1)}
.v4 .v4-promo-p{font-size:var(--t-sm);color:var(--text3);margin:0;line-height:1.5}
.v4 .v4-promo.is-img{padding:var(--s3)}
.v4 .v4-promo.is-img .v4-promo-head{margin:var(--s1) var(--s6) var(--s3) var(--s1)}
.v4 .v4-promo-img{display:block;border-radius:var(--rad);overflow:hidden}
.v4 .v4-promo-img img{display:block;width:100%;height:auto}
.v4 .v4-promo-html{overflow:hidden;overflow-wrap:anywhere;font-size:var(--t-sm);color:var(--text2)}
.v4 .v4-promo-html img{max-width:100%;height:auto}
.v4 .v4-promo-html>:first-child{margin-top:0}
.v4 .v4-promo-html>:last-child{margin-bottom:0}
/* v4.10.6 — Browse by state, same swap and the same 760px, for the same reason.
   The rail is the right home for it on a desktop; below 760px the rail stacks
   AFTER the main column, so a straight move would push the section further from
   the reader on the screen most of them use. One render, two slots, one visible. */
.v4 .v4-states-m{display:none}
@media (max-width:760px){
  .v4 .v4-states-m{display:block}
  .v4 .v4-states-d{display:none}
}

/* v4.9.5 — the pager. Was inline styles inside books_v4_pager(); it is a
   class now because a second page uses it. space-between with an empty
   <span> holding each end means "Next" stays on the right when there is no
   "Previous" to balance it, rather than sliding to the middle. */
.v4 .v4-pager{margin-top:var(--s6);display:flex;gap:var(--s3);align-items:center;
  justify-content:space-between;flex-wrap:wrap}

/* v4.9.5 — your questions. Composed from what already exists — .v4-panel,
   .v4-chip, .v4-tag, .v4-prose — so these five rules are only the parts that
   have no component: the card head, the reply block, and the foot. */
.v4 .v4-qhead{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.v4 .v4-ansbox{background:var(--green-tint);border:1px solid var(--green-ring);
  border-radius:var(--rad);padding:var(--s3);margin:0 0 var(--s3)}
.v4 .v4-qfoot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);
  border-top:1px solid var(--line);padding-top:var(--s3)}
.v4 .v4-qedit>summary{list-style:none;display:inline-block;cursor:pointer}
.v4 .v4-qedit>summary::-webkit-details-marker{display:none}
/* A destructive action that is a link, not a button: it must not look like
   the one beside it that only navigates. */
.v4 .v4-linkbtn{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-b);font-size:var(--t-sm);color:var(--text4);
  text-decoration:underline;text-underline-offset:2px}
.v4 .v4-linkbtn:hover{color:var(--err,#9C3F2A)}

@media (max-width:760px){
  /* v4.9.1 — ABOVE the tab bar, not under it. Both were fixed at bottom:0
     and the tab bar's z-index of 350 beat this one's 60, so from 4.9.0 until
     now "Track this book" was painted over completely — the control existed,
     was focusable, and could not be seen. The offset reads --nr-tabh, set
     alongside the bar itself in the stylesheet that draws it, so the two
     cannot drift — they already did once, by 4px, inside one release.
     (And no line of this comment may begin with the nowdoc terminator: an
     earlier one started with the word C-S-S and silently closed the block.) */
  .v4 .v4-bookbar{display:flex;align-items:center;gap:var(--s3);
    position:fixed;left:0;right:0;z-index:60;
    bottom:calc(var(--nr-tabh,60px) + env(safe-area-inset-bottom,0px));
    /* Out of the way while the hero's own status pills are still on screen —
       see book_v4_bookbar_js(). Transform rather than display, so the spacer
       below never changes height and the page cannot jump. */
    transition:transform .18s ease;
    padding:var(--s2) var(--s3);background:var(--bg);
    border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(0,0,0,.07)}
  .v4 .v4-bookbar-book{display:flex;align-items:center;gap:var(--s2);
    min-width:0;flex:1 1 auto}
  .v4 .v4-bookbar-cover{width:28px;height:40px;object-fit:cover;border-radius:2px;
    flex-shrink:0}
  .v4 .v4-bookbar-title{font-size:var(--t-sm);font-weight:var(--w-name);color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v4 .v4-bookbar-menu{flex-shrink:0}
  .v4 .v4-bookbar-menu>summary{list-style:none;display:block;cursor:pointer}
  .v4 .v4-bookbar-menu>summary::-webkit-details-marker{display:none}
  .v4 .v4-bookbar-btn{display:inline-block;background:var(--green);color:#fff;
    border-radius:999px;padding:var(--s2) var(--s3);font-size:var(--t-sm);
    font-weight:var(--w-name);white-space:nowrap}
  /* The panel opens UPWARD, because there is nothing below it to open into. */
  .v4 .v4-bookbar-panel{position:absolute;left:var(--s3);right:var(--s3);
    bottom:calc(100% + var(--s2));background:var(--bg);border:1px solid var(--line);
    border-radius:12px;padding:var(--s3);box-shadow:0 6px 24px rgba(0,0,0,.14)}
  .v4 .v4-bookbar-menu[open]>summary .v4-bookbar-btn{background:var(--green-h)}
  /* Clearance. NOT padding on the wrapper: .v4-wrap carries an inline
     padding-bottom, which no stylesheet rule can beat. A spacer element is
     the only thing that reliably keeps the footer out from under the bar. */
  .v4 .v4-bookbar-space{display:block;height:76px}
  /* Slides down behind the tab bar. 200% clears its own height and the bar
     beneath it whatever the inset turns out to be. */
  .v4 .v4-bookbar.is-away{transform:translateY(200%);pointer-events:none}
  @media (prefers-reduced-motion:reduce){
    .v4 .v4-bookbar{transition:none}
  }
}

.v4 .v4-compose-hint{display:none;margin:var(--s3) 0 0;font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-compose:has(input[value="prompt"]:checked) .v4-compose-hint{display:block}

/* ══════════════════════════════════════════════════════════════════════════
   ONBOARDING (alpha.26)

   Classes are v4ob-* rather than ob-*, because v3 declares .ob-* globally in
   the v3 stylesheet and those rules would otherwise bleed in. Element ids are
   shared with v3 deliberately — only one of the two pages renders per request,
   so they cannot collide, and keeping them is what let the behaviour layer be
   ported without edits.
   ══════════════════════════════════════════════════════════════════════════ */

/* Only the active step is in the document flow. The script toggles v4ob-active. */
.v4 .v4ob-step{display:none}
.v4 .v4ob-step.v4ob-active{display:block}

.v4 .v4ob-topbar{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s6)}
.v4 .v4ob-progress{display:flex;gap:var(--s2);align-items:center}
.v4 .v4ob-pdot{width:24px;height:3px;border-radius:2px;background:var(--line2);
  transition:background .2s}
.v4 .v4ob-pdot.v4ob-pdot-on{background:var(--green)}
.v4 .v4ob-skip,.v4 .v4ob-textbtn{background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-m);font-size:var(--t-xs);color:var(--text3);text-decoration:underline}
.v4 .v4ob-skip:hover,.v4 .v4ob-textbtn:hover{color:var(--green)}

/* Every step ends in the same place, so the primary action never moves. */
.v4 .v4ob-foot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

/* A pickable card. The tick is hidden until the script adds v4ob-picked, so the
   selected state is a single class change and cannot get out of sync. */
.v4 .v4ob-card{position:relative;display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s2);background:none;border:1.5px solid transparent;border-radius:var(--rad);
  cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .15s}
.v4 .v4ob-card:hover{border-color:var(--line2)}
.v4 .v4ob-card.v4ob-picked{border-color:var(--green);background:var(--green-tint)}
.v4 .v4ob-card-t{font-family:var(--font-d);font-size:var(--t-sm);color:var(--text);
  line-height:1.3;margin-top:var(--s1)}
.v4 .v4ob-card-a{font-size:var(--t-xs);color:var(--text3)}
.v4 .v4ob-tick{position:absolute;top:var(--s2);right:var(--s2);width:22px;height:22px;
  border-radius:var(--rad-full);background:var(--green);color:#fff;display:none;
  align-items:center;justify-content:center;font-size:12px;font-weight:700}
.v4 .v4ob-card.v4ob-picked .v4ob-tick{display:flex}

.v4 .v4ob-bookgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:var(--s3);margin-top:var(--s3)}
.v4 .v4ob-authorgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:var(--s3);margin-top:var(--s3)}
.v4 .v4ob-acard{align-items:center;text-align:center}

/* Inputs inherit the 16px floor from the base rules; nothing here may lower it. */
.v4 .v4ob-input{width:100%;padding:var(--s3);border:1px solid var(--line2);
  border-radius:var(--rad);background:var(--surface);color:var(--text);
  font-family:var(--font-b);font-size:var(--t-md)}
.v4 .v4ob-searchwrap{position:relative}
.v4 .v4ob-drop{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:320px;
  overflow:auto;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--rad);box-shadow:var(--e2);z-index:20}
.v4 .v4ob-drop button{display:flex;gap:var(--s3);align-items:center;width:100%;
  padding:var(--s2) var(--s3);background:none;border:none;border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;color:var(--text);font:inherit}
.v4 .v4ob-drop button:hover{background:var(--surface2)}
.v4 .v4ob-author-drop-row{padding:var(--s2) var(--s3);cursor:pointer;
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s3)}
.v4 .v4ob-author-drop-row:hover{background:var(--surface2)}
.v4 .v4ob-author-drop-name{font-family:var(--font-d);font-size:var(--t-sm);color:var(--text)}
.v4 .v4ob-author-drop-state{font-family:var(--font-m);font-size:var(--t-xs);color:var(--text3)}

.v4 .v4ob-author-feedback{margin-top:var(--s3);padding:var(--s3);border-radius:var(--rad);
  font-size:var(--t-sm);border:1px solid var(--line2);background:var(--surface2);color:var(--text2)}
.v4 .v4ob-author-feedback-ok{border-color:var(--green);color:var(--green)}
.v4 .v4ob-author-feedback-err{border-color:var(--rust);color:var(--rust)}

.v4 .v4ob-formgrid{display:grid;gap:var(--s3)}
.v4 .v4ob-field{display:block}
.v4 .v4ob-field span{display:block;margin-bottom:var(--s1);
  font-family:var(--font-m);font-size:var(--t-xs);color:var(--text3)}
.v4 .v4ob-submitown{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.v4 .v4ob-recap{list-style:none;padding:0;margin:var(--s4) 0;max-width:520px}
.v4 .v4ob-recap-row{padding:var(--s3) 0;border-bottom:1px solid var(--line);
  font-size:var(--t-base);color:var(--text2)}

/* ══════════════════════════════════════════════════════════════════════════
   THE SKIN LAYER (alpha.27)

   Twenty-two pages that have no v4 counterpart yet — quotes, lists, giveaway,
   partners, blog, states, circles, refer, stats and the rest — share one header
   pattern: a dark gradient banner with .ph-label / .ph-h1 / .ph-sub. That
   banner is the loudest v3 signal on the site, and with v4 as the default a
   reader crosses it constantly: light paper page, dark green slab, light paper
   page.

   Restyling it here reaches all twenty-two at once with no PHP change and no
   per-page risk. It does NOT make those pages v4 — their bodies are still v3
   layout — but it removes the jarring seam at the top of each, which is the
   part a reader notices first.

   Scoped to body.v4skin, which layout.php adds only when use_v4() is true. With
   the toggle off, every one of these rules is inert and v3 renders exactly as
   it always has.
   ══════════════════════════════════════════════════════════════════════════ */

/* The banner becomes a page opening rather than a slab.

   4.5.5 — AND IT IS CONTAINED. In v3 this was a full-bleed dark slab, so its
   40px padding was baked in and it never needed a wrapper; the skin removed the
   background and left it running to the viewport edge, while everything beneath
   it sat centred in a 1080px column. On a wide screen the title stood alone out
   at the left margin. Same max-width and same horizontal padding as
   `body.v4skin .wrap` and `.v4 .v4-wrap`, so a skinned page now lines up with a
   ported one to the pixel — box-sizing is border-box globally, so the padding
   is inside the max-width in all three.

   The rule under it is contained too, matching the hairline under the v4 shelf
   header rather than spanning the window.

   Roughly twenty pages ride on this component: Lists and its list pages, States
   and its state pages, Blog, Giveaway and its giveaway pages, the Partners
   directory, Contact, and a dozen more. */
body.v4skin .page-hero{background:none;max-width:1080px;margin:0 auto;
  padding:var(--s6) var(--s5) var(--s5);border-bottom:1px solid var(--line)}

/* The phone case is a SECOND misalignment, and a quieter one. v3 sets
   `.page-hero{padding:40px 16px 28px!important}` below 760, while
   `body.v4skin .wrap` overrides the wrap to 24px at every width — its
   specificity beats the media query's. So on a phone the header sat 8px inside
   the content it heads. !important is required to answer !important; between
   two important declarations the more specific selector wins, and this one is. */
@media (max-width:760px){
  body.v4skin .page-hero{padding:var(--s6) var(--s5) var(--s5)!important}
}
body.v4skin .page-hero::after{display:none}
body.v4skin .ph-label{font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:var(--s2)}
body.v4skin .ph-h1{font-family:var(--font-d);font-weight:400;
  font-size:var(--t-3xl);line-height:1.1;color:var(--text);margin-bottom:var(--s2)}
body.v4skin .ph-h1 em{font-style:italic;color:var(--text)}
body.v4skin .ph-sub{font-family:var(--font-b);font-size:var(--t-base);
  color:var(--text2);max-width:60ch}

/* The hero used to sit on a dark field, so buttons inside it were inverted.
   On paper they need the normal treatment back. */
body.v4skin .page-hero .btn-outline,
body.v4skin .page-hero .btn-ghost{color:var(--text2);border-color:var(--line2)}
body.v4skin .page-hero .btn-outline:hover,
body.v4skin .page-hero .btn-ghost:hover{color:var(--green);border-color:var(--green)}

/* v3 sections are 80px top and bottom, which reads as cavernous next to the v4
   rhythm. Bring them onto the same scale. */
body.v4skin .section{padding:var(--s7) 0}

/* The reading goal panel. One number against a target — no projection, no pace
   warning, no ranking. A goal is a commitment, not a score. */
.v4 .v4-goal-n{display:flex;align-items:baseline;gap:var(--s2)}
.v4 .v4-goal-n b{font-family:var(--font-d);font-size:var(--t-3xl);font-weight:400;
  line-height:1;color:var(--text)}
.v4 .v4-goal-n span{font-family:var(--font-m);font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-goal-bar{margin-top:var(--s3);height:4px;border-radius:2px;background:var(--line2);overflow:hidden}
.v4 .v4-goal-bar span{display:block;height:100%;background:var(--green);border-radius:2px}
.v4 .v4-goal-form{display:flex;gap:var(--s2);align-items:center}
.v4 .v4-goal-form input[type="number"]{width:80px;padding:var(--s2);border:1px solid var(--line2);
  border-radius:var(--rad);background:var(--surface);color:var(--text);font-size:var(--t-md)}

/* An author's note on their own book. Display face, because it is the author
   speaking rather than metadata about them. */
.v4 .v4-note + .v4-note{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.v4 .v4-note-t{display:block;margin-top:2px;font-family:var(--font-d);
  font-size:var(--t-lg);font-weight:400;color:var(--text)}

/* The profile edit panel. Fields inherit the 16px floor from the skin rules. */
.v4 .v4-edit summary{cursor:pointer;list-style:none;display:flex;gap:var(--s3);
  align-items:baseline;flex-wrap:wrap}
.v4 .v4-edit summary::-webkit-details-marker{display:none}
.v4 .v4-formgrid{display:grid;gap:var(--s4)}
.v4 .v4-field{display:block}
.v4 .v4-field > span:first-child{display:block;margin-bottom:var(--s1);
  font-family:var(--font-m);font-size:var(--t-xs);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text3)}
.v4 .v4-field input,.v4 .v4-field textarea{width:100%;padding:var(--s3);
  border:1px solid var(--line2);border-radius:var(--rad);background:var(--surface);
  color:var(--text);font-family:var(--font-b);font-size:var(--t-md)}
/* v4.6.1 — an explicit floor rather than one inferred from padding and
   line-height. Applies to every v4 form, not only the two auth pages. */
.v4 .v4-field input{min-height:44px}
.v4 .v4-field .v4-meta{display:block;margin-top:var(--s1)}
.v4 .v4-edit-checks{display:grid;gap:var(--s3);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.v4 .v4-check{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer}
.v4 .v4-check input{margin-top:3px;width:18px;height:18px;accent-color:var(--green);flex:none}
.v4 .v4-check b{display:block;font-weight:500;font-size:var(--t-sm);color:var(--text)}
.v4 .v4-check .v4-meta{display:block;margin-top:2px;text-transform:none;letter-spacing:0}

/* Answer tools: two quiet links on one row, opening into the box only when
   asked. The closed state is what an author scrolling their own page sees. */
.v4 .v4-ans-tools{display:flex;gap:var(--s4);align-items:baseline;
  margin:var(--s2) 0 var(--s4) var(--s6);flex-wrap:wrap}
.v4 .v4-ans summary{cursor:pointer;list-style:none;font-family:var(--font-m);
  font-size:var(--t-xs);color:var(--green-h);padding:2px 0}
.v4 .v4-ans summary::-webkit-details-marker{display:none}
.v4 .v4-ans summary:hover{text-decoration:underline}
.v4 .v4-ans[open]{flex:1 1 100%}
.v4 .v4-ans[open] summary{margin-bottom:var(--s2)}
.v4 .v4-ans-del button{background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-m);font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-ans-del button:hover{color:var(--err,#b3261e);text-decoration:underline}

/* The author answering. Indented and quieter than the ask form below it, so
   the page reads as: question, answer box, question, answer box — rather than
   a row of identical compose boxes. */
.v4 .v4-compose.is-answer{margin:0;border-color:var(--line)}
.v4 .v4-compose.is-answer textarea{font-size:var(--t-md)}

/* A clickable face and name. The hover state has to be visible without a
   colour change on the avatar itself, since many are photographs. */
.v4 .v4-face.is-link{cursor:pointer;text-decoration:none;transition:box-shadow .15s}
.v4 .v4-face.is-link:hover{box-shadow:0 0 0 2px var(--green)}
.v4 .v4-who-link{color:inherit;text-decoration:none}
.v4 .v4-who-link:hover{color:var(--green);text-decoration:underline}

/* ── shared primitives ────────────────────────────────────────────────────
   The five pages that matter most here — lists, quotes, giveaway, partners,
   blog — each carry their own bespoke class prefix, but they all sit on the
   same handful of shared primitives. Restyling those reaches every one of the
   twenty-two, not just the five.

   These are token swaps, not redesigns. Radius, weight, spacing and type come
   from the v4 scale; colour is untouched because the v3 palette was already
   disciplined and v4 inherited it wholesale. The page bodies keep their own
   layout — the brief was consistency, not a rewrite. */

body.v4skin .btn{border-radius:var(--rad);font-family:var(--font-b);
  font-size:var(--t-sm);font-weight:500;letter-spacing:0;padding:10px 18px}
body.v4skin .btn-sm{padding:6px 12px;font-size:var(--t-xs);border-radius:var(--rad-sm,6px)}
/* v3 primaries carry a coloured drop shadow, which is the single most dated
   thing on those pages next to a v4 button that has none. */
body.v4skin .btn-primary{box-shadow:none}
body.v4skin .btn-primary:hover{box-shadow:none;background:var(--green-h)}
body.v4skin .btn-outline,body.v4skin .btn-ghost{border-width:1px}

/* Form fields: same 16px floor as v4, same border weight, same radius.
   v4.11.2: not .fmt-pill. The category and format chips on the add-book form
   are labels too, so this rule (0,2,1) outranked .fmt-pill.fmt-on (0,2,0) and
   painted grey uppercase caption text onto a selected chip green background. */
body.v4skin .fg label:not(.fmt-pill){font-family:var(--font-m);font-size:var(--t-xs);
  font-weight:400;color:var(--text3);letter-spacing:.04em;text-transform:uppercase}
body.v4skin .fg input,body.v4skin .fg textarea,body.v4skin .fg select{
  border-width:1px;border-radius:var(--rad);padding:var(--s3);
  font-size:var(--t-md);background:var(--surface)}

/* Content width. v3 wraps at 1200px, which throws prose lines twice as long as
   the v4 pages beside them. */
/* 1080 rather than v4-wrap's 900: these pages carry grids and tables that 900
   would crush, and the goal is a family resemblance, not an identical column. */
body.v4skin .wrap{max-width:1080px;padding-left:var(--s5);padding-right:var(--s5)}

/* The input floor is the one v4 rule that is a bug fix rather than a style, so
   it applies everywhere once the skin is on. Anything under 16px makes iOS
   Safari zoom the viewport and never restore it. */
body.v4skin input[type="text"],body.v4skin input[type="search"],
body.v4skin input[type="email"],body.v4skin input[type="password"],
body.v4skin input[type="number"],body.v4skin input[type="url"],
body.v4skin textarea,body.v4skin select{font-size:var(--t-md)}

/* ══════════════════════════════════════════════════════════════════════════
   BREAKPOINT 760 — the only structural one. Two columns become one.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .v4 .v4-cols{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  /* 4.16.1 — on a phone the Commons rail stacks under the posts; Recently leads it. */
  .v4 .v4-commons-rail{display:flex;flex-direction:column;gap:var(--s5)}
  .v4 .v4-commons-rail>*{margin-top:0}
  .v4 .v4-commons-rail>.v4-recent{order:-1}
  .v4 .v4-facet{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .v4 .v4-facet-label{padding-top:0}
  /* The screenshot fix. The cover ran out after ~180px and left an empty
     gutter beside a 500px stack, while three status pills wrapped to three rows
     in a column too narrow for two. The cover now keeps only the title and
     byline company; the rating and the actions take the full width. */
  /* beta.9 — the fan goes rather than shrinks. On a phone the search bar
     should be reachable without scrolling past decoration. */
  /* v4.0.5 — six books on a phone, not eight: the last two are hidden rather
     than the row being queried twice server-side. */
  .v4 .v4-brow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v4 .v4-brow > *:nth-child(n+7){display:none}
  .v4 .v4-bstrip{grid-auto-columns:112px}
  .v4 .v4-spot{grid-template-columns:104px minmax(0,1fr);gap:var(--s4)}
  .v4 .v4-colls{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  /* v4.6.9 — one giveaway across on a phone. Two would put the prize sentence
     in a column too narrow to read it in. */
  .v4 .v4-gives{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  /* v4.7.0 — the wall goes to one column on a phone. A quote set in two
     narrow columns breaks mid-clause on nearly every line. */
  .v4 .v4-quotes{columns:1}
  .v4 .v4-quote{padding:var(--s4);margin-bottom:var(--s4)}
  /* v4.7.1 — two states across on a phone, not four. */
  .v4 .v4-states{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .v4 .v4-state{padding:var(--s3)}
  /* v4.7.6 — one attachment across on a phone. */
  .v4 .v4-attach{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  /* v4.7.4 — a blog card stacks on a phone; 180px of image beside text is
     not a layout, it is two slivers. */
  .v4 .v4-post.has-cover{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  /* v4.7.2 — one shop across on a phone; the bio needs the width. */
  .v4 .v4-shops{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .v4 .v4-shop-hero{gap:var(--s3)}
  .v4 .v4-shop-logo.is-big,.v4 .v4-shop-mark.is-big{width:56px;height:56px;font-size:var(--t-lg)}
  .v4 .v4-pick{grid-template-columns:64px minmax(0,1fr);gap:var(--s3)}
  .v4 .v4-hero{grid-template-columns:minmax(0,1fr);gap:0}
  .v4 .v4-hero-fan{display:none}

  .v4 .v4-book-hero{grid-template-columns:118px minmax(0,1fr);
    grid-template-areas:"cover head" "acts acts";
    grid-template-rows:auto auto;
    gap:var(--s3) var(--s4);align-content:start}
  /* A pill row that fits is worth more than a pill row that is centred. */
  .v4 .v4-bh-acts{gap:var(--s2)}
  .v4 .v4-bh-acts .v4-btn{flex:0 1 auto}
  .v4 .v4-h1{font-size:var(--t-2xl)}
  .v4 .v4-presence p{font-size:var(--t-base)}
  .v4 .v4-week{padding:var(--s4)}
  .v4 .v4-week h2{font-size:var(--t-xl)}
}

/* ══════════════════════════════════════════════════════════════════════════
   BREAKPOINT 480 — small phones. Density only, never structure.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:480px){
  .v4 .v4-book-hero{grid-template-columns:96px minmax(0,1fr)}
  .v4 .v4-stars.is-lg{width:112px;height:22px}
}
@media (max-width:480px){
  .v4 .v4-wrap{padding:0 var(--s3)}
  .v4 .v4-bc-grid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:var(--s3)}
  .v4 .v4-thought q{font-size:var(--t-base)}
  .v4 .v4-digest{padding-left:var(--s4)}
  .v4 .v4-digest-item::before{left:calc(-1 * var(--s4) - 5px)}
}
/* ══════════════════════════════════════════════════════════════════════════
   V4.0.0-BETA.4
   ══════════════════════════════════════════════════════════════════════════ */

/* The verified mark. One treatment for both the author hero (standalone chip)
   and the book byline (is-inline, sitting beside a name in running text).
   Green rather than gold: gold is now load-bearing for ratings, and a claim is
   not a score. */
.v4 .v4-verified{display:inline-flex;align-items:center;gap:4px;
  padding:2px var(--s2);border-radius:var(--rad-full);
  background:var(--green-tint,rgba(74,140,80,.12));color:var(--green);
  font-family:var(--font-m);font-size:var(--t-2xs);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  vertical-align:middle}
.v4 .v4-verified .v4-vdisc{width:12px;height:12px;flex-shrink:0}
/* The disc, everywhere it appears. Green fill, tick knocked out in white —
   NOT currentColor, because inside the pill currentColor is green and the tick
   would vanish into the circle. */
.v4 .v4-vdisc circle{fill:var(--green)}
.v4 .v4-vdisc path{stroke:#FFFFFF}
.v4 .v4-verified.is-inline{margin-left:var(--s2)}

/* 4.5.7 — the claim, as a line inside the Ask panel. Quiet on purpose: it is
   addressed to one person who is almost never the one reading the page. */
/* 4.5.9 — Edit / Delete on something you wrote. Quiet: it belongs to one person
   and everyone else on the page should not have to read past it. */
/* 4.5.10 — the same control on the dark question panel. Only the colours
   change; the markup is identical, so there is one control to maintain. */
.v4 .v4-week-tools{margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.16)}
.v4 .v4-week-tools .v4-reply-cue{color:#C8CFC2}
.v4 .v4-week-tools .v4-danger{border-top-color:rgba(255,255,255,.16)}
.v4 .v4-week-tools .v4-danger>summary .v4-reply-cue{color:#E8A08C}
.v4 .v4-week-tools .v4-sub{color:#C8CFC2}
.v4 .v4-week-tools .v4-compose{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.20)}
.v4 .v4-week-tools .v4-compose textarea{color:var(--bg)}

.v4 .v4-tools{margin-top:var(--s2)}
.v4 .v4-tools>summary,.v4 .v4-danger>summary{list-style:none;display:block;cursor:pointer}
.v4 .v4-tools>summary::-webkit-details-marker,
.v4 .v4-danger>summary::-webkit-details-marker{display:none}
.v4 .v4-tools[open]>summary{display:none}
.v4 .v4-danger{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.v4 .v4-danger>summary .v4-reply-cue{color:var(--rust)}
.v4 .v4-btn.is-danger{background:var(--rust)}
.v4 .v4-btn.is-danger:hover{background:#71301F}

.v4 .v4-claimline{margin:var(--s3) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--text3)}
.v4 .v4-claimform{display:inline}
.v4 .v4-claimform button{background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;color:var(--green-h);font-weight:500;
  text-decoration:underline;text-underline-offset:2px}
.v4 .v4-claimform button:hover{color:var(--green)}

/* The follow control in the hero. Capped, so a full-width button does not run
   the whole measure of a laptop; unconstrained on a phone, where it should. */
.v4 .v4-follow-hero{margin-top:var(--s4);max-width:420px}
/* 4.5.8 — the button was carried over from the sidebar still wearing is-wide,
   which was right in a narrow panel and wrong here: "Follow Chetan" is a short
   label and it was being stretched to a 320px slab beside it. Sized to its text
   on a laptop. On a phone it goes back to full width, where a tap target that
   spans the column is the correct shape. */
.v4 .v4-follow-hero .v4-btn.is-wide{display:inline-flex;align-items:center;
  justify-content:center;width:auto;min-width:180px;
  /* 4.5.9 — and shorter. --s3 top and bottom put it at about 45px, which is a
     primary-action height; a follow is an offer, not the point of the page. */
  padding-top:var(--s2);padding-bottom:var(--s2)}
@media (max-width:760px){
  .v4 .v4-follow-hero{max-width:none}
  .v4 .v4-follow-hero .v4-btn.is-wide{display:flex;width:100%}
}

/* The book byline. The author name is a link now, so it needs the same
   underline-on-hover the rest of the page uses rather than turning green. */
/* beta.7 — the byline holds a face, the name and the verified chip. inline-flex
   keeps them on a baseline together and lets the chip wrap as a unit rather
   than stranding the tick on its own line. */
/* v4.6.4 — the byline is the author's NAME, so it takes the name weight in
   the body face. It sat at the inherited 400 and read lighter than the
   title above it, which put the person second to the object. */
.v4 .v4-byline{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  font-weight:var(--w-name);color:var(--text2)}
/* beta.8 — .v4-face carries margin-left:-9px and a 2px ring because it was
   built for overlapping face stacks, where the pull and the ring are what
   separate one face from the next. A byline has nothing to overlap, so on the
   phone both showed as a misplaced avatar with an arc around it. */
.v4 .v4-byline .v4-face{flex-shrink:0;margin-left:0;border:none}
/* beta.8 — the permanent border-bottom made a large name on a pale surface read
   as a text input. The link is legible from its position; the underline is only
   needed to confirm it on hover. */
.v4 .v4-byline a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.v4 .v4-byline a:hover{border-bottom-color:var(--green);color:var(--green)}

/* The profile edit disclosure. The summary marker is suppressed above, which
   left the panel with no affordance at all and reading as a heading. */
.v4 .v4-caret{margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:1.5px solid var(--text3);border-bottom:1.5px solid var(--text3);
  transform:rotate(45deg);transition:transform .15s ease}
.v4 details[open] > summary .v4-caret{transform:rotate(-135deg)}

/* Author activity rows. Single column of text, unlike .v4-arow which is a
   two-column grid built for a cover beside a title. */
.v4 .v4-lrow{display:block;text-decoration:none;color:inherit}
.v4 .v4-lrow:last-child{border-bottom:0;padding-bottom:0}
.v4 .v4-lrow:first-child{padding-top:0}
.v4 .v4-lrow:hover .v4-meta{color:var(--green)}

/* ── v3 PAGE HEADERS, UNDER THE V4 SKIN ───────────────────────────────────
   4.0.0. Quotes, Lists, Giveaway, Blog and States each open with a full-bleed
   dark gradient band. Under v4 that band is louder than anything v4 itself
   does, so arriving from the Commons feels like leaving the site.

   The band is full-bleed and sits OUTSIDE the .wrap that constrains the page
   below it, which is why beta.9's version left the heading hard against the
   viewport edge: removing the horizontal padding did not pull the text into
   the wrap, it pushed it out to nothing. So the band keeps its full width —
   it carries the rule beneath it, which should span the page — and its CONTENT
   is given the wrap's own geometry: 1080px, centred, same gutter. The h1 now
   sits directly above the first card.

   Only the band is restyled. No markup on those pages is touched, every class
   name is theirs, and with the toggle off not one of these rules applies.
   Deliberately NOT a port: the page below is still v3, and a v4 header over a
   v3 body would be a worse lie than an honest seam. */

/* The band: no gradient, no giant quote mark, a rule instead of an edge. */
body.v4skin .page-hero,
body.v4skin .qw-hero-wrap{background:none;background-color:transparent;
  padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line);
  text-align:left;overflow:visible}
body.v4skin .page-hero::after,
body.v4skin .page-hero::before,
body.v4skin .qw-hero-wrap::before{display:none;content:none}

/* The content: exactly the wrap the page below uses. This is the alignment fix. */
body.v4skin .page-hero > *,
body.v4skin .qw-hero{max-width:1080px;margin-left:auto;margin-right:auto;
  padding-left:var(--s5);padding-right:var(--s5);text-align:left}
body.v4skin .qw-hero > *{max-width:none;padding-left:0;padding-right:0}

/* Type, in v4's voice rather than v3's. */
body.v4skin .ph-label,
body.v4skin .qw-hero .qw-eyebrow{font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:var(--s2)}
body.v4skin .ph-h1,
body.v4skin .qw-hero h1{font-family:var(--font-d);font-weight:400;
  font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.12;letter-spacing:-.01em;
  color:var(--text);margin:0 0 var(--s2)}
body.v4skin .ph-h1 em,
body.v4skin .qw-hero h1 em{font-style:italic;color:var(--text)}
body.v4skin .ph-sub,
body.v4skin .qw-hero p{font-family:var(--font-b);font-size:var(--t-base);
  line-height:var(--lh-snug);color:var(--text3);margin:0;max-width:62ch}

/* The stat row reads as figures, not as a scoreboard. */
body.v4skin .qw-stats{justify-content:flex-start;gap:var(--s6);margin:var(--s5) 0 0;
  flex-wrap:wrap}
body.v4skin .qw-stat{text-align:left}
body.v4skin .qw-stat-n{font-family:var(--font-d);font-weight:400;color:var(--green);
  font-size:var(--t-2xl)}
body.v4skin .qw-stat-l{font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--text4)}

/* Buttons inside the band were white-on-dark. */
body.v4skin .page-hero .btn-outline,
body.v4skin .page-hero .btn-ghost,
body.v4skin .qw-hero-wrap .btn-outline,
body.v4skin .qw-hero-wrap .btn-ghost{color:var(--text2);border-color:var(--line2)}

/* States and Blog write their breadcrumbs as inline styles sized for white text
   on a dark band. Once the band is pale those are invisible, so they are pulled
   back to readable colours here. Specificity has to beat an inline style, hence
   the !important — the alternative is editing two v3 pages, which this release
   deliberately does not do. */
body.v4skin .page-hero a[style],
body.v4skin .page-hero div[style],
body.v4skin .page-hero span[style]{color:var(--text3) !important}
body.v4skin .page-hero a[style]:hover{color:var(--green) !important}

/* ══════════════════════════════════════════════════════════════════════════
   V4.6.0 — SIGN IN AND JOIN
   Composed almost entirely from components that already exist: .v4-cols,
   .v4-panel, .v4-field, .v4-check, .v4-facet, .v4-week, .v4-btn. What is new
   here is the shell around them and the username availability affordance,
   which has no equivalent anywhere else on the site.
   ══════════════════════════════════════════════════════════════════════════ */
.v4 .v4-auth{padding-top:var(--s6);padding-bottom:var(--s8)}
/* Narrower than the 1080 browse shell. A form does not want six covers of
   width, and a login page that fills a desktop monitor reads as a dashboard. */
.v4 .v4-auth-cols{max-width:900px;margin-left:auto;margin-right:auto;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s7);
  align-items:start;margin-top:var(--s5)}
.v4 .v4-auth-go{margin-top:var(--s5)}
.v4 .v4-auth-alt{margin-top:var(--s4);font-family:var(--font-m);
  font-size:var(--t-xs);color:var(--text3);letter-spacing:.02em}
.v4 .v4-auth-alt a{color:var(--green-h)}
.v4 .v4-auth-alt span{margin:0 var(--s2);color:var(--line2)}
.v4 .v4-auth-p{margin:0 0 var(--s3);font-size:var(--t-sm);color:var(--text3)}
.v4 .v4-auth-note{margin-top:var(--s4);padding:var(--s3);border-radius:var(--rad);
  background:var(--green-tint);border:1px solid var(--green-ring);
  font-size:var(--t-sm);color:var(--text2)}
/* The two consent rows. Separated from the fields above them by a rule, because
   they are a different kind of decision: everything above is required, these
   two are choices. */
.v4 .v4-auth-opts{margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s4)}
.v4 .v4-auth-ts{margin-top:var(--s5)}
.v4 .v4-panel.is-live{background:var(--green-tint);border-color:var(--green-ring)}
.v4 .v4-live-t{margin:0 0 var(--s1);font-family:var(--font-d);font-size:var(--t-lg);
  line-height:var(--lh-snug);color:var(--text)}

/* Username availability. The status sits inside the field, so the input needs
   room reserved for it; the hint below reserves its own height so the form does
   not jump every time the answer arrives. */
.v4 .v4-un{position:relative}
.v4 .v4-un input{padding-right:96px}
.v4 .v4-un-status{position:absolute;right:var(--s3);top:50%;transform:translateY(-50%);
  font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);pointer-events:none}
.v4 .v4-un-status.is-good{color:var(--green)}
.v4 .v4-un-status.is-bad{color:var(--rust)}
.v4 .v4-un-hint{display:block;min-height:18px;margin-top:var(--s1)}
.v4 .v4-un-sug{color:var(--green-h);font-weight:var(--w-name)}

/* Touch targets. The live checkboxes are 18px, which is a miss on a phone.
   Growing the box to 22px and giving the row a 44px floor makes the whole line
   tappable without making the control look oversized. */
.v4 .v4-auth-opts .v4-check{min-height:44px;padding:var(--s1) 0}
.v4 .v4-auth-opts .v4-check input{width:22px;height:22px;margin-top:2px}

/* v4.6.1 — a panel that is a link. Whole-panel targets rather than a link
   inside them: on a phone the panel is the affordance, and a 12px "View
   giveaway" line at the bottom would be the smallest target on the page. */
.v4 .v4-panel.is-link{display:block;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s}
.v4 .v4-panel.is-link:hover{border-color:var(--green);box-shadow:var(--e1)}
.v4 .v4-panel.is-link .v4-eyebrow,.v4 .v4-panel.is-link .v4-live-t,
.v4 .v4-panel.is-link .v4-meta{display:block}
.v4 .v4-pick-row{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s3)}
.v4 .v4-pick-cover{width:56px;flex-shrink:0}
.v4 .v4-pick-txt{min-width:0}
.v4 .v4-pick-card .v4-live-t{margin-bottom:2px}

@media (max-width:760px){
  /* Form first. Nobody signing in on a phone should scroll past a panel about
     how nice the community is to reach the password field. */
  .v4 .v4-auth-cols{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .v4 .v4-auth-aside{order:2}
  .v4 .v4-auth{padding-top:var(--s5);padding-bottom:var(--s7)}
}

/* ══════════════════════════════════════════════════════════════════════════
   V4.6.2 — TOUCH TARGETS, FOCUS, MOTION
   ══════════════════════════════════════════════════════════════════════════ */

/* A 28px chip and an 18px checkbox are misses on a phone, and this audience is
   phone-first. The visible size does not change: the box keeps its drawn
   dimensions and the ROW around it grows to 44px, so the whole line is
   pressable. Growing the visuals instead would have coarsened every one of
   these components. */
/* v4.6.3 — 4.6.2 used min-height here and grew the controls themselves, which
   is what min-height does: it sizes the border box, so background, border and
   radius all follow. The chips visibly fattened.

   This is the technique that grows the reach without touching the drawing. The
   control keeps its own dimensions; an invisible band, centred on it and 44px
   tall, catches the press. Chips sit in rows with a --s4 (16px) gap, so 8px of
   reach on each side leaves adjacent targets touching rather than overlapping,
   which is the line you do not want to cross. */
/* v4.6.4 — three components, three height formulas, one row. A shared floor
   plus centring is the only thing that makes them agree, and unlike 4.6.2's
   chips this IS a change to the drawing, which is what was wanted: the row is
   supposed to look like one row. 38px is the current tallest rounded up, so
   Following barely moves and the other two rise to meet it. */
.v4 .v4-bh-acts .v4-pill span,
.v4 .v4-bh-acts .v4-btn,
.v4 .v4-bh-acts .v4-share{min-height:38px;display:inline-flex;align-items:center;
  justify-content:center;box-sizing:border-box}

.v4 .v4-chip,.v4 .v4-pill span,.v4 .v4-reply>summary,.v4 .v4-ans summary,
.v4 .v4-btn.is-sm,.v4 .v4-bookbar-btn{position:relative}
.v4 .v4-chip::before,.v4 .v4-pill span::before,.v4 .v4-reply>summary::before,
.v4 .v4-ans summary::before,.v4 .v4-btn.is-sm::before,
.v4 .v4-bookbar-btn::before{content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;pointer-events:auto}
/* The acts row is excluded. Its children are levelled on --act-h (20px) and a
   44px band inside one of them would reintroduce exactly the misalignment
   4.5.13 spent a release removing. */
.v4 .v4-acts>.v4-reply>summary::before{display:none}
/* These two are rows of text that already clear 44px; the floor only matters
   when a row happens to be short, and it changes nothing visible when it does
   not. The input is the exception worth drawing bigger: 18px is too small to
   hit accurately, and 22px still reads as a checkbox. */
.v4 .v4-check,.v4 .v4-poll-opt{min-height:44px}
.v4 .v4-check input,.v4 .v4-poll-opt input{width:22px;height:22px}

/* v4.6.2 — every other outline:none in this sheet pairs with a box-shadow.
   This one did not, so tabbing into the main Commons compose box left a
   keyboard user with no idea where they were. */
.v4 .v4-compose textarea:focus{box-shadow:0 0 0 3px var(--green-tint);
  border-color:var(--green)}

/* 4.13.0 — conversations. Mentions and links inside a post or reply are the
   room green, and break anywhere so a long address cannot widen a phone. The
   time on a post is its own address: it keeps the meta colour and shows it is
   a link only on hover, as people expect a timestamp to behave. */
.v4 .v4-thought q a.v4-mention,
.v4 .v4-thought q a.v4-link{color:var(--green-h);text-decoration:none;overflow-wrap:anywhere}
.v4 .v4-thought q a.v4-mention{font-weight:500}
.v4 .v4-thought q a.v4-mention:hover,
.v4 .v4-thought q a.v4-link:hover{text-decoration:underline}
.v4 a.v4-permalink{color:inherit;text-decoration:none}
.v4 a.v4-permalink:hover{text-decoration:underline;color:var(--green-h)}
/* The reply count beside Reply: a count, so it is quieter than the control. */
.v4 .v4-acts .v4-reply-n{color:var(--text3);font-family:var(--font-m);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;height:var(--act-h)}
.v4 .v4-acts a.v4-reply-n:hover{color:var(--green-h)}
/* Reply and Edit under a single reply: the same row, smaller and closer. */
.v4 .v4-acts.is-sub{margin-top:var(--s1);gap:var(--s3)}
/* Show all N replies: a fold with no script. Once open, the label goes. */
.v4 .v4-replies-more>summary{list-style:none;cursor:pointer;padding:var(--s2) 0}
.v4 .v4-replies-more>summary::-webkit-details-marker{display:none}
.v4 .v4-replies-more>summary .v4-reply-cue{margin-top:0}
.v4 .v4-replies-more[open]>summary{display:none}
/* 4.16.1 — Recently in the Commons rail. The fold's timeline continues the first. */
.v4 .v4-recent-more>summary{padding:var(--s2) 0 0}
.v4 .v4-recent-more[open]>.v4-digest{margin-top:0}
/* Newer and older posts, under the last post in the room. */
.v4 .v4-pager{display:flex;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.v4 .v4-pager a[rel=next]{margin-left:auto}

/* 4.13.2 — the @mention picker, under the box being typed in. In the page
   flow, not floating: on a phone a floating list over the keyboard covers the
   very text it completes. */
.v4 .v4-mpick{list-style:none;margin:var(--s2) 0 0;padding:var(--s1);background:var(--surface);
  border:1px solid var(--line2);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.v4 .v4-mpick li{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border-radius:8px;
  cursor:pointer;min-height:44px}
.v4 .v4-mpick li[aria-selected=true],.v4 .v4-mpick li:hover{background:var(--green-tint)}
.v4 .v4-mpick b{font-weight:500;font-size:var(--t-sm);color:var(--text)}
.v4 .v4-mpick li>span:last-child{font-family:var(--font-m);font-size:var(--t-2xs);color:var(--text3);
  margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4 .v4-mpick-av{width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;background:var(--surface2);
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-2xs);color:var(--text2)}
/* Places a link lands on: a post or reply opened from a notification, the
   stars after Finished, the answers. Without a margin the sticky header covers
   the first line of what the link was for. */
.v4 [id^="post-"],.v4 [id^="reply-"],.v4 #rate-it,.v4 #answers{scroll-margin-top:88px}
/* 4.13.3 — the extras row in the post box: "Add poll" and "About a book" on
   one line, each opening its own panel below. Checkbox and label, no script
   for the poll; the checkboxes are hidden but stay focusable. */
.v4 .v4-extras{margin-top:var(--s3)}
.v4 .v4-extra-t{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.v4 .v4-extras-bar{display:flex;flex-wrap:wrap;gap:var(--s2)}
.v4 .v4-extra-l{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:32px;
  padding:0 var(--s3);border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-family:var(--font-m);font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--green-h)}
.v4 .v4-extra-l[hidden]{display:none}
.v4 .v4-extra-l::before{content:"+";font-family:var(--font-b);font-size:var(--t-sm);line-height:1}
.v4 .v4-extra-l:hover{border-color:var(--green)}
.v4 #v4-x-poll:checked ~ .v4-extras-bar .is-poll,
.v4 #v4-x-book:checked ~ .v4-extras-bar .is-book{background:var(--green-tint);border-color:var(--green)}
.v4 #v4-x-poll:checked ~ .v4-extras-bar .is-poll::before,
.v4 #v4-x-book:checked ~ .v4-extras-bar .is-book::before{content:"\2212"}
.v4 #v4-x-poll:focus-visible ~ .v4-extras-bar .is-poll,
.v4 #v4-x-book:focus-visible ~ .v4-extras-bar .is-book{outline:2px solid var(--green);outline-offset:2px}
.v4 .v4-extra-p{display:none;margin-top:var(--s3)}
.v4 #v4-x-poll:checked ~ .v4-extra-p.is-poll{display:block}
.v4 #v4-x-book:checked ~ .v4-extra-p.is-book{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.v4 .v4-extra-hint{margin:0 0 var(--s2);font-size:var(--t-xs);color:var(--text3)}
/* One input style for the post box: the poll answers and the book search.
   (They carried .v4-field, which styles a WRAPPER, so the inputs themselves
   were the browser default box.) */
.v4 .v4-xinput{display:block;width:100%;box-sizing:border-box;min-height:42px;
  border:1px solid var(--line2);border-radius:10px;background:var(--surface2);
  padding:var(--s2) var(--s3);font-family:var(--font-b);font-size:var(--t-md);color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.v4 .v4-xinput::placeholder{color:var(--text4)}
.v4 .v4-xinput:focus{outline:none;background:var(--surface);border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.v4 .v4-bookpick-search{position:relative}
.v4 .v4-bookpick-search[hidden]{display:none}
.v4 .v4-bookpick-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.v4 .v4-bookpick-search .v4-xinput{padding-left:36px;-webkit-appearance:none;appearance:none}
.v4 .v4-bookpick-search .v4-xinput::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.v4 .v4-bookpick-list{list-style:none;margin:0;padding:var(--s1);display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.v4 .v4-bookpick-list:empty{display:none}
.v4 .v4-bookpick-list li{min-width:0}
.v4 .v4-bookpick-list button{display:flex;align-items:center;gap:var(--s3);width:100%;min-width:0;text-align:left;
  background:none;border:0;border-radius:8px;padding:var(--s2);cursor:pointer;min-height:48px}
.v4 .v4-bookpick-list button:hover,.v4 .v4-bookpick-list button:focus-visible{background:var(--green-tint);outline:none}
.v4 .v4-bookpick-cv{width:28px;height:40px;flex:none;border-radius:3px;object-fit:cover;background:var(--surface2)}
.v4 .v4-bookpick-tx{display:flex;flex-direction:column;min-width:0;flex:1}
.v4 .v4-bookpick-tx b{font-weight:500;font-size:var(--t-sm);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4 .v4-bookpick-tx span{font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-bookpick-none{padding:var(--s2) var(--s3);font-size:var(--t-sm);color:var(--text3)}
.v4 .v4-bookpick-chip{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3);
  border:1px solid var(--green);border-radius:10px;background:var(--green-tint);font-size:var(--t-sm);color:var(--text2)}
.v4 .v4-bookpick-chip[hidden]{display:none}
.v4 .v4-bookpick-chip img{width:24px;height:34px;border-radius:2px;object-fit:cover;flex:none}
.v4 .v4-bookpick-chip img[hidden]{display:none}
.v4 .v4-bookpick-chip span{flex:1;min-width:0}
.v4 .v4-bookpick-clear{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;cursor:pointer;
  font-size:20px;line-height:1;color:var(--text3)}
.v4 .v4-bookpick-clear:hover{background:var(--surface);color:var(--text)}

/* v4.6.2 — 11 transitions in this sheet and nothing honouring the setting.
   Someone who has asked their device to stop moving things has usually asked
   for a reason. */
@media (prefers-reduced-motion:reduce){
  .v4 *,.v4 *::before,.v4 *::after{transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important}
}

/* 4.18.0 — giveaway deliveries: the winner's tracker and address form. */
.v4 .gw-track{list-style:none;margin:var(--s3) 0 0;padding:0 0 0 var(--s5);border-left:2px solid var(--line)}
.v4 .gw-track li{position:relative;padding:0 0 var(--s4);font-size:var(--t-sm);color:var(--text3)}
.v4 .gw-track li:last-child{padding-bottom:0}
.v4 .gw-track li::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 6px);top:5px;width:10px;height:10px;border-radius:var(--rad-full);background:var(--surface);border:2px solid var(--line2)}
.v4 .gw-track li.is-done{color:var(--text)}
.v4 .gw-track li.is-done::before{background:var(--green);border-color:var(--green)}
.v4 .gw-track li.is-now b{color:var(--green-h)}
.v4 .gw-track b{font-weight:600}
.v4 .gw-track-note{display:block;margin-top:2px;color:var(--text3);font-size:var(--t-sm)}
.v4 .gw-track-note a{color:var(--green);text-decoration:underline}
.v4 .gw-claim{scroll-margin-top:96px}
.v4 .gw-addr-row{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:var(--s3)}
.v4 .gw-addr-edit>summary{list-style:none;cursor:pointer}
.v4 .gw-addr-edit>summary::-webkit-details-marker{display:none}
@media (max-width:420px){.v4 .gw-addr-row{grid-template-columns:minmax(0,1fr) 110px}}

/* 4.19.0 — author-sponsored giveaways. */
.v4 .ag-sponsor-tag{display:inline-block;margin:0 0 var(--s2)}
.v4 .ag-byline{display:flex;align-items:center;gap:var(--s2)}
.v4 .ag-check{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s3);font-size:var(--t-sm);line-height:var(--lh-snug);cursor:pointer}
.v4 .ag-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green);flex-shrink:0}
.v4 .ag-agree{margin-top:var(--s4);padding:var(--s3);border:1px solid var(--line);border-radius:var(--rad);background:var(--surface2)}
.v4 .ag-offer .v4-btn{margin-top:var(--s4)}
.v4 .ag-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.v4 .ag-tag{white-space:nowrap;text-decoration:none}
.v4 .ag-addr{margin-top:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--rad);background:var(--surface2);font-size:var(--t-base);line-height:var(--lh-snug);user-select:all}
.v4 .ag-how{margin:0;padding-left:var(--s5);font-size:var(--t-sm);line-height:var(--lh-snug);display:flex;flex-direction:column;gap:var(--s2)}
.v4 .ag-decline{color:var(--rust)}
.v4 .ag-share{margin-top:var(--s3)}
.v4 a.ag-banner{display:flex;gap:var(--s3);align-items:center;margin-top:var(--s4);padding:var(--s4);border-radius:var(--rad-lg);background:var(--green-h);color:#F4F1E8;text-decoration:none}
.v4 a.ag-banner span{display:flex;flex-direction:column;gap:2px;font-size:var(--t-sm);color:#C8D9C4}
.v4 a.ag-banner b{color:#F4F1E8;font-weight:600;font-size:var(--t-base)}
.v4 a.ag-banner svg{flex-shrink:0}

/* 4.20.0 — From the author. */
.v4 .as-block{display:flex;flex-direction:column;gap:4px;margin:0 0 var(--s4);padding:var(--s4);background:var(--surface);border:1px solid var(--green-ring);border-radius:var(--rad)}
.v4 .as-kicker{color:var(--green-h)}
.v4 .as-title{font-family:var(--font-d);font-weight:500;font-size:var(--t-lg);color:var(--text);line-height:var(--lh-tight)}
.v4 .as-line{font-size:var(--t-sm);color:var(--text2)}
.v4 .as-line.is-quiet{color:var(--text3)}
.v4 .as-go{margin-top:var(--s2)}
.v4 .as-fine{font-size:var(--t-xs);color:var(--text3);line-height:var(--lh-snug);margin-top:var(--s1)}
.v4 .as-book{margin-bottom:var(--s3)}
.v4 .as-book>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.v4 .as-book>summary::-webkit-details-marker{display:none}
.v4 .as-sum-t{font-weight:600;color:var(--text)}
.v4 .as-hint{margin:var(--s1) 0 0;font-size:var(--t-xs)}
.v4 .as-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.v4 .as-preview{margin-top:var(--s4)}
.v4 .as-preview .as-block{margin:var(--s2) 0 0;border-style:dashed}
.v4 .as-agree{padding:var(--s3);border:1px solid var(--line);border-radius:var(--rad);background:var(--surface2)}
.v4 .as-form .v4-btn{margin-top:var(--s4)}
.v4 .as-tips{list-style:none;margin:var(--s4) 0;padding:0;display:flex;flex-direction:column;gap:var(--s3);font-size:var(--t-sm);line-height:var(--lh-snug)}
.v4 .as-tips li{padding-left:var(--s5);position:relative}
.v4 .as-tips li::before{content:"";position:absolute;left:2px;top:3px;width:10px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.v4 .as-tips li.is-warn::before{width:8px;height:8px;border:2px solid var(--rust);border-radius:var(--rad-full);transform:none;top:4px}
.v4 .as-shelf{display:inline-block;margin-top:var(--s2)}
.v4 .as-tips a{color:var(--green);text-decoration:underline}

/* 4.21.0 — the letter: archive, one letter, the join box, the rail card. */
.v4 a.nl-item{display:flex;flex-direction:column;gap:4px;margin-top:var(--s3);text-decoration:none;color:var(--text)}
.v4 a.nl-item b{font-family:var(--font-d);font-weight:500;font-size:var(--t-lg);line-height:var(--lh-tight)}
.v4 a.nl-item:hover b{color:var(--green)}
.v4 .nl-body{margin-top:var(--s4);font-size:var(--t-base);line-height:1.7;color:var(--text)}
.v4 .nl-body p{margin:0 0 var(--s4)}
.v4 .nl-body .nl-h{font-family:var(--font-d);font-weight:500;font-size:var(--t-xl);margin:var(--s6) 0 var(--s3);line-height:var(--lh-tight)}
.v4 .nl-body a{color:var(--green);text-decoration:underline;overflow-wrap:anywhere}
.v4 .nl-body h3{font-weight:600;font-size:var(--t-lg);margin:var(--s5) 0 var(--s2)}
.v4 .nl-body ul,.v4 .nl-body ol{margin:0 0 var(--s4);padding-left:var(--s5)}
.v4 .nl-body li{margin:0 0 var(--s2)}
.v4 .nl-body blockquote{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border-left:3px solid var(--green);background:var(--surface2);border-radius:0 var(--rad) var(--rad) 0}
.v4 .nl-body hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
.v4 .nl-body img{max-width:100%;height:auto;border-radius:var(--rad);margin:0 0 var(--s4)}
.v4 .nl-join{margin:var(--s5) 0}
.v4 .nl-link .v4-btn{min-height:44px}

/* 4.23.0 — the post box held open by the script (see ui_thread_js), and by
   by the stylesheet alone when Add poll or About a book is ticked. */
.v4 .v4-compose.is-open textarea,.v4 .v4-compose:has(.v4-extra-t:checked) textarea{height:104px}
.v4 .v4-compose.is-open .v4-compose-foot,.v4 .v4-compose:has(.v4-extra-t:checked) .v4-compose-foot{max-height:900px;opacity:1;margin-top:var(--s3)}
/* 4.23.0 — the author dashboard's two buttons: small, side by side. */
.v4 .at-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.v4 .at-actions .v4-btn{white-space:nowrap}

/* 4.26.0 — partner bookshops take orders (PartnerOrders.php).
   Book page: a small outlined Order at the end of the shop row, how they
   take orders on a line under the town. The author's card stays the one
   solid button; Amazon stays last. */
.v4 .v4-row:has(.po-go){align-items:center}
.v4 .po-go{flex:none;min-height:40px;min-width:84px;justify-content:center;text-align:center;font-weight:600}
.v4 .po-how{font-size:var(--t-xs);margin-top:2px}
/* Shop page: the order panel leads the aside; an Order link under each book. */
.v4 .po-shop{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg,14px);background:var(--surface)}
.v4 .po-kicker{color:var(--green)}
.v4 .po-line{font-size:var(--t-sm);color:var(--text2)}
.v4 .po-line.is-quiet{color:var(--text3)}
.v4 .po-fine{font-size:var(--t-xs);color:var(--text3)}
.v4 .v4-bc-action{margin-top:var(--s2)}
/* 4.31.2 — the action at the foot of its card, so a row lines up; the Order a
   small quiet pill (the shop panel's button is the main way to order). */
.v4 .v4-bc.has-action{display:flex;flex-direction:column}
.v4 .v4-bc.has-action .v4-bc-action{margin-top:auto;padding-top:var(--s2)}
.v4 .po-cardgo{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:999px;
  background:var(--surface);color:var(--green);font-size:var(--t-xs);font-weight:600;text-decoration:none;position:relative}
.v4 .po-cardgo::after{content:'\2192';font-weight:400}
.v4 .po-cardgo:hover{border-color:var(--green);background:var(--green-tint)}
@media (pointer:coarse){.v4 .po-cardgo::before{content:'';position:absolute;inset:-8px -4px}}
.v4 .po-copy{margin-top:var(--s3)}
/* Admin: the Takes orders section of a partner. */
.po-admin{border:1.5px dashed rgba(45,106,53,.3);border-radius:10px;padding:14px 16px 16px;margin:0 0 18px}
.po-admin legend{font-family:var(--font-m);font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--green);padding:0 6px}
.po-admin-p{font-size:12.5px;color:var(--text3);margin:0 0 10px}
.po-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);margin:0 0 8px;cursor:pointer}
.po-check input{margin:0}
.po-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
@media(max-width:640px){.po-grid{grid-template-columns:1fr}}
/* 4.27.0 — delivery is three tick boxes inside a .fg, so they must undo the
   field label and input styles (uppercase labels, full-width inputs). */
.po-admin .fg .po-ships{display:flex;flex-direction:column;gap:2px;padding-top:4px}
.po-admin .fg .po-ships label.po-check{display:flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text2);margin:0 0 6px}
.po-admin .fg .po-ships input[type=checkbox]{width:auto;margin:0;padding:0;box-shadow:none;flex:none}

/* 4.30.0 — the member and the author page, joined up (AuthorLinks.php). */
.v4 .al-owner{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s3);margin:0 0 var(--s4);
  padding:8px var(--s3);border:1px solid var(--green-ring);border-radius:10px;
  background:var(--green-tint)}
.v4 .al-owner-t{margin:0;font-size:var(--t-xs);color:var(--text3)}
.v4 .al-owner-t b{color:var(--text);font-weight:600}
.v4 .al-owner-chips{display:flex;flex-wrap:wrap;gap:6px}
.v4 .al-chip{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:0 10px;border-radius:999px;
  font-size:var(--t-xs);color:var(--green);background:var(--surface);border:1px solid var(--line2);text-decoration:none;white-space:nowrap}
.v4 .al-chip b{font-weight:700}
.v4 .al-chip.is-soft{color:var(--text2)}
.v4 .al-owner-go{margin-left:auto;font-size:var(--t-sm);font-weight:600;color:var(--green);text-decoration:none;white-space:nowrap;
  min-height:30px;display:inline-flex;align-items:center}
.v4 .al-owner-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.v4 .al-owner-acts .v4-btn{white-space:nowrap}
@media (max-width:640px){
  .v4 .al-owner-sub{display:none}
  .v4 .al-owner-chips{order:3;flex-basis:100%}
}
.v4 .al-strip{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:12px;background:var(--surface);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4)}
.v4 .al-strip-t{margin:0;font-size:var(--t-sm);color:var(--text2)}
.v4 .al-strip-t a,.v4 .al-writes a{color:var(--green);font-weight:600}
.v4 .al-writes{margin:var(--s2) 0 0;font-size:var(--t-sm);color:var(--text2)}
.v4 .al-writes-go{color:var(--text3)}
.v4 .al-alsoreads{margin:var(--s2) 0 0;text-transform:none;letter-spacing:0}
.v4 .al-alsoreads a{color:var(--green)}
.v4 .al-check{margin-top:var(--s4)}
.v4 .al-check{scroll-margin-top:88px}
.v4 .at-edit{margin-top:var(--s4)}
.v4 .au-nw{white-space:nowrap}
.v4 .bk-aw-main{display:none}
@media (max-width:760px){.v4 .bk-aw-main{display:block}.v4 .bk-aw-side{display:none}.v4 .bk-aw-side+*{margin-top:0}}
.v4 .au-rating{margin-top:var(--s1);display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0}
.v4 #edit-page{scroll-margin-top:88px}
.v4 .bk-state-books{margin-bottom:var(--s3)}
.v4 .at-tools{display:flex;flex-wrap:wrap;gap:2px var(--s5);margin-top:var(--s4);padding:6px var(--s3);border:1px solid var(--line);border-radius:10px}
/* 4.31.2 — one slim bar, plain by default: a tool is green-tinted only when
   something waits on the author (winners to post to). */
.v4 .at-tool{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-height:36px;align-content:center;padding:4px 8px;margin:0 -8px;
  border-radius:8px;text-decoration:none;color:var(--text);min-width:0}
.v4 .at-tool:hover{background:var(--bg2)}
.v4 .at-tool.is-due{background:var(--green-tint)}
.v4 .at-tool-k{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.v4 .at-tool-t{color:var(--green);font-weight:600;font-size:var(--t-sm)}
.v4 .at-tool-s{font-size:var(--t-xs);color:var(--text3)}
@media (max-width:760px){.v4 .at-tools{flex-direction:column;gap:0}.v4 .at-tool-s{display:none}}
.v4 .al-steps{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.v4 .al-step{display:flex;gap:var(--s3);align-items:flex-start}
.v4 .al-step b{display:block;font-weight:600;font-size:var(--t-sm)}
.v4 .al-step b a{color:var(--green)}
.v4 .al-why{display:block;font-size:var(--t-xs);color:var(--text3);margin-top:2px}
.v4 .al-tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:#fff;margin-top:1px}
.v4 .al-step.is-done .al-tick{background:var(--green);border-color:var(--green)}
.v4 .al-step.is-done b{color:var(--text3);text-decoration:line-through;font-weight:500}

/* 4.28.0 — Share on giveaway, author, shop and collection pages. */
.v4 .v4-share-line{margin-top:var(--s3)}
/* 4.29.0 — author page: Follow and Share on one row. On a phone Follow takes
   the rest of the row, so it stays a full-width tap target beside Share. */
.v4 .v4-follow-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.v4 .v4-follow-row>form{margin:0}
.v4 .v4-follow-row>.v4-sub{flex:1 1 100%}
@media (max-width:760px){
  /* The column beside the photo is about 230px, so Share becomes its round
     icon (the word stays for screen readers) and Follow keeps the rest. */
  .v4 .v4-follow-row{flex-wrap:nowrap}
  .v4 .v4-follow-row>form,.v4 .v4-follow-row>a.v4-btn{flex:1 1 0;min-width:0}
  .v4 .v4-follow-hero .v4-follow-row .v4-btn.is-wide{min-width:0}
  .v4 .v4-follow-row .v4-share{flex:none;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
  .v4 .v4-follow-row .v4-share .v4-share-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .v4 .v4-follow-row .v4-share svg{width:18px;height:18px}
}
.v4 .gw-share{margin-top:var(--s3);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.v4 .gw-share-note{margin:0;text-transform:none;letter-spacing:0;font-size:var(--t-xs);color:var(--text3)}
/* 4.29.0 — the share menu on a computer. It is added to <body>, outside .v4,
   so these rules are not scoped. */
.v4-sh-menu{position:absolute;z-index:1000;min-width:190px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,29,22,.16);padding:6px;display:flex;flex-direction:column;font-family:var(--font-b)}
.v4-sh-menu a,.v4-sh-menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font:inherit;font-size:14px;color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;min-height:40px}
.v4-sh-menu a:hover,.v4-sh-menu button:hover,.v4-sh-menu a:focus-visible,.v4-sh-menu button:focus-visible{background:var(--green-tint);outline:none}
.v4-sh-menu svg{color:var(--green);flex:none}


/* 4.33.0 — author questions: Hide from page / Restore, and the folded list of
   hidden ones (author and admins only); a heart on Commons replies. */
.v4 #author-qa{scroll-margin-top:88px}
.v4 .v4-ans-hide button:hover{color:var(--green-h)}
.v4 .v4-qhidden{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s2)}
.v4 .v4-qhidden>summary{cursor:pointer;list-style:none;font-family:var(--font-m);font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:var(--s2) 0}
.v4 .v4-qhidden>summary::-webkit-details-marker{display:none}
.v4 .v4-qhidden>summary::before{content:"\25B8\00a0"}
.v4 .v4-qhidden[open]>summary::before{content:"\25BE\00a0"}
.v4 .v4-qhidden .v4-ans-hide button{color:var(--green-h)}
.v4 .v4-note-tools{margin-top:var(--s2)}

/* 4.35.0 — profile: Read across the eight (the Literary Passport, shown again). */
.v4 .pv-eight{scroll-margin-top:88px}
.v4 .pv-eight-n{margin:0 0 var(--s3);font-size:var(--t-sm);color:var(--text2)}
.v4 .pv-eight-n b{font-family:var(--font-d);font-size:var(--t-lg);font-weight:600;color:var(--text)}
.v4 .pv-sts{display:flex;flex-wrap:wrap;gap:6px}
.v4 .pv-st{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:3px 10px;border-radius:999px;
  border:1px dashed var(--line2,var(--line));font-size:var(--t-xs);color:var(--text3);text-decoration:none;background:transparent}
.v4 .pv-st:hover{border-color:var(--green);color:var(--green-h)}
.v4 .pv-st.is-on{border:1px solid var(--green-ring,var(--green));background:var(--green-tint);color:var(--green-h);font-weight:500}
.v4 .pv-tick{font-size:11px}
.v4 .pv-eight-next{margin:var(--s3) 0 0;font-size:var(--t-sm)}

/* 4.36.0 — Author dashboard: readers as a compact grid. */
.v4 .at-r-sum{margin:0 0 var(--s3);font-size:var(--t-sm)}
.v4 .at-r-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s3) var(--s4)}
.v4 .at-r{display:flex;align-items:center;gap:var(--s2);min-width:0}
.v4 .at-r-t{display:flex;flex-direction:column;min-width:0}
.v4 .at-r-n{font-size:var(--t-sm);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4 .at-r-n a{color:inherit;text-decoration:none}
.v4 .at-r-n a:hover{text-decoration:underline}
.v4 .at-r-tag{font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.v4 .at-r-tag.is-read{color:var(--green-h)}
.v4 .at-r-more{margin-top:var(--s3)}
.v4 .at-r-more>summary{cursor:pointer;list-style:none;font-family:var(--font-m);font-size:var(--t-xs);color:var(--green-h);padding:var(--s2) 0}
.v4 .at-r-more>summary::-webkit-details-marker{display:none}
.v4 .at-r-more[open]>summary{display:none}
@media (max-width:480px){.v4 .at-r-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}}