/* The Room: a profile page that feels like a room. Loaded after shell.css and uses its skin variables, so every skin and theme works. */

/* The room needs more width than the other pages: it hides the right rail and widens the column. */
/* Only on wide screens, where the right rail would have fitted anyway. Narrower windows keep the same column as every other page, so nothing jumps sideways. */
@media (min-width:1280px){
  .shell.wide .rail-r{display:none!important}
  .shell.wide .col{width:min(940px,calc(100vw - 330px))}
}

.room{--plank:rgba(var(--gd),.42);--plank-d:rgba(0,0,0,.32)}
.room .av.av-g svg{display:block}
.av-g{color:inherit}
.av-b{position:relative}
.av-b .cvr-img{border-radius:inherit}

/* ───── hero: the door, the sign, who lives here ───── */
.room-hero{padding:0;overflow:hidden;position:relative}
.room-banner{position:relative;height:clamp(180px,26vw,280px);overflow:hidden;background:#14101C}
.room-banner-svg{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.room-sign{position:absolute;right:18px;bottom:18px;max-width:min(46%,340px);padding:10px 16px;border-radius:12px;background:rgba(var(--pn),.92);border:1px solid rgba(var(--gd),.45);font:500 1.1875rem/1.25 'Cormorant Garamond',Georgia,serif;color:var(--ink);box-shadow:0 10px 22px rgba(0,0,0,.4);overflow-wrap:anywhere}
.room-sign::before,.room-sign::after{content:'';position:absolute;top:-16px;width:2px;height:16px;background:rgba(var(--gd),.7)}
.room-sign::before{left:20%}.room-sign::after{right:20%}
.room-bn-btn{position:absolute;top:12px;right:12px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(var(--gd),.45);background:rgba(var(--pn),.82);color:var(--ink);font:500 .8125rem 'DM Sans',sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.room-bn-btn:hover{color:var(--gold2);border-color:var(--gold)}
button.room-sign{cursor:pointer;font-size:.9375rem;font-family:'DM Sans',sans-serif;color:var(--mute);border-style:dashed}
button.room-sign:hover{color:var(--gold2);border-color:var(--gold)}
.room-id{display:flex;gap:20px;align-items:flex-start;padding:0 24px 10px;margin-top:-64px;position:relative}
.room-av{flex:none}
.room-av .av{border:4px solid rgb(var(--pn));box-shadow:0 10px 24px rgba(0,0,0,.4)}
@media (max-width:720px){.room-av .av{width:96px!important;height:96px!important;font-size:48px!important}}
.room-who{min-width:0;flex:1;padding-top:70px;display:flex;flex-direction:column;gap:4px}
.room-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:76px}
.room-counts{display:flex;gap:20px;flex-wrap:wrap;padding:8px 0 4px;font-size:.875rem}
.room-counts .lnk{font:inherit;display:inline-flex;gap:.3em;align-items:baseline}

/* ───── bookcase ───── */
.room-case{padding:16px 22px 18px;position:relative;overflow:hidden}
.room-rail{position:relative;padding-top:14px;margin-bottom:16px;min-height:44px}
.room-rail::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;border-radius:4px;background:linear-gradient(180deg,var(--plank),var(--plank-d))}
.room-hooks{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:flex-start}
.charm{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:88px;padding:16px 4px 4px;border:0;background:transparent;border-radius:12px;color:var(--ink);cursor:pointer;font:inherit;transform-origin:50% 0}
.charm::before{content:'';position:absolute;top:0;left:50%;width:2px;height:16px;background:rgba(var(--gd),.7);transform:translateX(-1px)}
.charm-n{font-size:.75rem;line-height:1.2;text-align:center;color:var(--ink2);max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.charm:hover,.charm:focus-visible{background:rgba(var(--gd),.1)}
.charm.sel{outline:2px solid var(--gold);outline-offset:2px;background:rgba(var(--gd),.12)}
.charm.dim{opacity:.45}
@media (prefers-reduced-motion:no-preference){
  .room .charm:not(.sel){animation:rmsway 5.2s ease-in-out infinite}
  .room .charm:nth-child(2n){animation-duration:6.1s;animation-delay:-1.3s}
  .room .charm:nth-child(3n){animation-duration:4.6s;animation-delay:-2.4s}
  .room-case.editing .charm{animation:none}
}
@keyframes rmsway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.room-shelf{display:flex;align-items:flex-end;gap:3px;padding:0 6px;min-height:200px;border-bottom:11px solid var(--plank);box-shadow:0 16px 16px -14px rgba(0,0,0,.55);margin-bottom:16px;position:relative}
.room-shelf:last-of-type{margin-bottom:6px}
.spine{--k:1;position:relative;flex:none;display:block;box-sizing:border-box;width:calc(var(--w)*var(--k)*1px);height:calc(var(--h)*var(--k)*1px);border:0;border-radius:3px 3px 1px 1px;padding:0;cursor:pointer;color:#F0E6C8;overflow:hidden;text-decoration:none;box-shadow:inset 2px 0 0 rgba(255,255,255,.1),inset -2px 0 0 rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.4);transition:transform .18s ease,box-shadow .18s ease}
.spine.face{background:none;box-shadow:none;border-radius:0;overflow:visible}
.spine.face .cvr{width:100%!important;border-radius:1px 3px 3px 1px;box-shadow:0 3px 9px rgba(0,0,0,.55)}
.spine.face::after{content:'';position:absolute;left:0;top:0;bottom:0;width:8%;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.14) 55%,transparent)}
.spine.charm-s{background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:flex-end;justify-content:center}
/* ───── generated spines: colours come from the cover the reader chose ───── */
.spine.bk-s,.spine.eo{background-color:var(--c1)}
.spine.bk-s::after,.spine.eo::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(255,255,255,.15) 15%,rgba(255,255,255,0) 38%,rgba(0,0,0,.14) 70%,rgba(0,0,0,.46) 100%)}
.bk-s>i,.bk-s>span{position:absolute;display:block}
.bk-s.sp-pic{background:var(--sp) center/cover no-repeat var(--c1)}
.sp-t{writing-mode:vertical-rl;white-space:nowrap;max-height:100%;overflow:hidden;text-overflow:ellipsis;font-size:calc(var(--fs)*var(--k)*1px);line-height:1}
.sp-lbl{left:0;right:0;display:flex;align-items:center;justify-content:center}
.sp-a,.sp-b,.sp-r1,.sp-r2,.sp-mk{left:0;right:0}
.sp-au{display:none;writing-mode:vertical-rl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 calc(8px*var(--k))/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tx)}
/* cloth and foil */
.sf-cloth{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
.sf-cloth .sp-a,.sf-cloth .sp-b{height:calc(6px*var(--k));border-top:1.5px solid var(--c2);border-bottom:1.5px solid var(--c2)}
.sf-cloth .sp-a{top:8%}.sf-cloth .sp-b{bottom:8%}
.sf-cloth .sp-lbl{top:17%;bottom:21%}
.sf-cloth .sp-t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;color:var(--c2);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.sf-cloth .sp-mk{bottom:12.5%;left:50%;right:auto;width:calc(8px*var(--k));height:calc(8px*var(--k));margin-left:calc(-4px*var(--k));background:var(--c2);transform:rotate(45deg)}
.sf-cloth .sp-r1,.sf-cloth .sp-r2{display:none}
/* modern block */
.sf-modern .sp-a{top:0;height:25%;background:var(--c2)}
.sf-modern .sp-b{top:25%;height:2px;background:rgba(255,255,255,.55)}
.sf-modern .sp-lbl{top:29%;bottom:24%}
.sf-modern .sp-t{white-space:normal;text-align:center;line-height:1.15;font-family:'DM Sans',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx)}
.sf-modern .sp-au{display:block;bottom:3%;height:21%;left:50%;right:auto;margin-left:calc(-4px*var(--k));font-size:calc(7px*var(--k))}
.sf-modern .sp-mk{top:12.5%;left:50%;right:auto;width:calc(var(--w)*var(--k)*.5px);height:calc(var(--w)*var(--k)*.5px);margin:calc(var(--w)*var(--k)*-.25px) 0 0 calc(var(--w)*var(--k)*-.25px);border-radius:50%;border:2px solid var(--c1)}
.sf-modern .sp-r1,.sf-modern .sp-r2{display:none}
/* leather and raised bands */
.sf-leather{background-image:radial-gradient(rgba(0,0,0,.28) 1px,transparent 1.4px),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:4px 4px,5px 5px;background-position:0 0,2px 2px}
.sf-leather .sp-a,.sf-leather .sp-b,.sf-leather .sp-r1,.sf-leather .sp-r2{height:calc(5px*var(--k));background:linear-gradient(180deg,rgba(255,255,255,.4),var(--c2) 40%,rgba(0,0,0,.45));box-shadow:0 1px 2px rgba(0,0,0,.6)}
.sf-leather .sp-a{top:9%}.sf-leather .sp-r1{top:16%}.sf-leather .sp-r2{bottom:16%}.sf-leather .sp-b{bottom:9%}
.sf-leather .sp-lbl{top:25%;bottom:25%;left:13%;right:13%;border:1px solid var(--c2);background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.sf-leather .sp-t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;color:var(--gilt,var(--c2));text-shadow:0 1px 1px rgba(0,0,0,.55)}
.sf-leather .sp-mk,.sf-leather .sp-au{display:none}

/* The cover look: the cover's own colors blend down the spine, a small copy of the cover sits at the top, the title is set large.
   Sizes are in design units times --k, like the other spines, so it scales on phones and in the pull-out. */
.spine.bk-s.sf-e,.bm-spine.sf-e{background:var(--e-bg,var(--c1))}
.spine.bk-s.sf-e::after{background:linear-gradient(90deg,rgba(0,0,0,.26) 0,rgba(255,255,255,.07) 13%,rgba(255,255,255,0) 36%,rgba(0,0,0,.06) 76%,rgba(0,0,0,.3) 100%)}
.sf-e .sp-bd{left:calc((var(--w) - var(--bw))/2*var(--k)*1px);top:calc(5px*var(--k));width:calc(var(--bw)*var(--k)*1px);height:calc(var(--bh)*var(--k)*1px);overflow:hidden;border-radius:1px;background:var(--e-tile,var(--c1));box-shadow:inset 0 0 0 calc(2px*var(--k)) rgba(255,255,255,.22),0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.45);z-index:1}
.sf-e .sp-bd.has-img{box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.45)}
.sf-e .sp-r2{display:block;left:max(calc(3px*var(--k)),calc(var(--w)*var(--k)*.1px));right:max(calc(3px*var(--k)),calc(var(--w)*var(--k)*.1px));top:72.5%;height:1px;background:var(--e-hair);z-index:1}
.sf-e .sp-lbl{left:0;right:0;top:calc(var(--e-top)*var(--k)*1px);bottom:auto;height:calc(var(--e-ah)*var(--k)*1px);align-items:flex-start;z-index:1}
.sf-e .sp-t{white-space:pre;text-align:left;max-height:none;overflow:visible;text-overflow:clip;font:700 calc(var(--e-fs)*var(--k)*1px)/1.06 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.03em;color:var(--e-ti);text-shadow:none}
.sf-e .sp-au{display:flex;justify-content:center;align-items:flex-start;writing-mode:horizontal-tb;left:0;right:0;top:74.5%;height:21%;margin:0;overflow:hidden;z-index:1}
.sf-e .sp-au>span{display:block;writing-mode:vertical-rl;white-space:nowrap;font:700 calc(var(--e-afs)*var(--k)*1px)/1 'DM Sans',sans-serif;letter-spacing:.08em;color:var(--e-ai);opacity:.86}
.room-credit{margin:4px 2px 0;font-size:.75rem;line-height:1.4;color:var(--mute)}
.room-credit[hidden]{display:none}
#cv .room-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* a book standing with its paper end out */
.spine.eo{background-color:var(--c1d)}
.spine.eo .eo-pages{position:absolute;left:calc(3px*var(--k));right:calc(3px*var(--k));top:calc(3px*var(--k));bottom:calc(3px*var(--k));display:block;border-radius:1px}
.spine:hover,.spine:focus-visible{transform:translateY(-9px)}
.spine:focus-visible,.charm:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.spine.sel{outline:2px solid var(--gold);outline-offset:3px;transform:translateY(-12px)}
.spine.dim{opacity:.42}
.spine.drop-b{box-shadow:-5px 0 0 var(--gold),inset 2px 0 0 rgba(255,255,255,.1)}
.room-case.editing .spine,.room-case.editing .charm{cursor:grab}
.room-case-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8125rem;color:var(--mute);margin-top:4px}
.room-empty{align-self:center;margin:auto;padding:18px 10px;text-align:center;color:var(--mute);font-size:.875rem;flex:1}
.charm-ghost{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:1px dashed rgba(var(--gd),.5);border-radius:12px;color:var(--mute);background:transparent;font:500 .875rem 'DM Sans',sans-serif;cursor:pointer}
.charm-ghost:hover{color:var(--gold2);border-color:var(--gold)}

/* ───── wall: what is being read ───── */
.room-reading{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.room-reading a{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;padding:8px;border-radius:14px}
.room-reading a:hover{background:rgba(var(--gd),.08)}

/* ───── shelf tabs ───── */
.room-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.room-tabs::-webkit-scrollbar{display:none}
.room-tabs .chip{flex:none}
.room-tabs .chip .n{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 14px}
.room-grid a{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none;min-width:0}
.room-grid .t{font-size:.7812rem;font-weight:500;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.room-grid .a{font-size:.75rem;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-grid .cvr{width:100%!important}
.room-grid .w{font-size:.7188rem;line-height:1.3;color:var(--mute)}

/* ───── arrange mode ───── */
.room-edit{position:sticky;top:0;z-index:6;padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-color:rgba(var(--gd),.55)}
.room.sheet-open .room-edit,.room.dock-top .room-edit{position:static}
.room-edit .grow{flex:1 1 100%;min-width:0}
.room-edit .room-saved{margin-right:auto}
.room-tray{padding:14px 16px}
[data-sel]:empty,[data-tray]:empty{display:none}
/* The tab body adds no box of its own, so the pinned book controls (sticky) can rise as far as the top of the page, as they did before the header was added */
.room.pf > [data-pbody]{display:contents}
.room-sel{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.room-sel .row{display:flex;gap:8px;flex-wrap:wrap}
/* The controls for the selected thing stay on screen while you arrange: pinned to the bottom (or the top), never lost below the bookcase. */
.room-sel .dk-head{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.room-sel .dk-name{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.room-sel .dk-tools{display:flex;gap:6px;flex-wrap:wrap}
.room-sel .dk-body{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-start}
.room-sel .dk-more{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-start}
.room-sel .dk-more[hidden]{display:none}
.room-sel .dk-more:not([hidden]){flex:1 1 100%}
@media (min-width:721px){
  .room.fc [data-sel]:has(.has-sel){position:sticky;z-index:5}
  .room.fc [data-sel][data-dock="bottom"]:has(.has-sel){bottom:calc(10px - var(--view-pb,28px))}
  .room.fc [data-sel][data-dock="top"]:has(.has-sel){top:calc(var(--bar-h,0px) + 8px)}
  .room-sel.has-sel{background:rgba(var(--pn),.97);border-color:rgba(var(--gd),.55);box-shadow:0 10px 34px rgba(0,0,0,.45);max-height:44vh;overflow-y:auto}
}
.room .spine.sel,.room .charm.sel{scroll-margin-bottom:calc(max(var(--dock-bot-h,0px) + 10px,var(--sheet-h,0px)) + 24px);scroll-margin-top:calc(var(--bar-h,0px) + var(--dock-top-h,0px) + 24px)}
.room-saved{font-size:.75rem;color:var(--teal);min-width:56px}
@media (max-width:720px){
  .room-banner{height:170px}
  .room-sign{font-size:1rem;max-width:60%;bottom:14px;right:12px;padding:8px 12px}
  .room-id{padding:0 16px 6px;gap:12px;margin-top:-52px;flex-wrap:wrap}
  .room-who{padding-top:58px}
  .room-acts{padding-top:0;width:100%}
  .room-counts{gap:16px}
  .room-case{padding:14px 12px 14px}
  .spine{--k:.8}
  .room-shelf{min-height:160px;padding:0 2px}
  .charm{width:74px}.charm-n{max-width:70px}
  .room-edit{position:static;padding:10px 12px}
  .room.fc [data-sel]:has(.has-sel){position:sticky;bottom:calc(84px - var(--view-pb,158px) + env(safe-area-inset-bottom,0px));z-index:5}
  .room.fc [data-sel][data-dock="top"]:has(.has-sel){top:0;bottom:auto}
  .room-sel{max-height:40vh;overflow-y:auto;background:rgba(var(--pn),.97);padding:10px 12px;gap:8px}
  .room-sel .row{gap:6px}
  .room-sel .row.mv{display:grid;grid-template-columns:repeat(4,1fr)}
  .room-sel .btn-sm{min-height:40px;padding:0 10px;font-size:.8125rem}
  .room .spine.sel,.room .charm.sel{scroll-margin-bottom:calc(max(var(--dock-bot-h,0px) + 84px,var(--sheet-h,0px)) + 24px)}
}

/* ───── pickers inside dialogs ───── */
.bn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.bn-opt{position:relative;border:2px solid transparent;border-radius:14px;overflow:hidden;background:none;padding:0;cursor:pointer;text-align:left;color:var(--ink);font:inherit;display:flex;flex-direction:column}
.bn-opt .room-banner-svg{position:static;height:78px;width:100%}
.bn-opt .nm{padding:7px 10px;font-size:.8125rem;font-weight:500;background:rgba(var(--fg),.06);display:flex;justify-content:space-between;gap:6px;align-items:center}
.bn-opt.on{border-color:var(--gold)}
.bn-opt:hover:not([disabled]){border-color:rgba(var(--gd),.6)}
.bn-opt[disabled]{opacity:.55;cursor:not-allowed}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.gl-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;border:2px solid transparent;background:rgba(var(--fg),.05);cursor:pointer;color:var(--ink);font:500 .6875rem 'DM Sans',sans-serif}
.gl-opt:hover{border-color:rgba(var(--gd),.6)}
.gl-opt.on{border-color:var(--gold);background:rgba(var(--gd),.14)}
.sw-row{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}
.sw.on{border-color:var(--ink)}
.pk-list{display:flex;flex-direction:column;gap:2px;max-height:min(52vh,430px);overflow-y:auto;margin:0 -6px;padding:0 6px}
.pk-row{display:flex;gap:12px;align-items:center;padding:6px 8px;border-radius:12px;cursor:pointer;min-height:56px}
.pk-row:hover{background:rgba(var(--gd),.08)}
.pk-row input{width:22px;height:22px;accent-color:var(--gold);flex:none}
.tm-row{display:flex;gap:6px;align-items:center}
.tm-row .input{min-height:44px;padding:8px 12px}
.tm-row .ic{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--edge);background:transparent;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1rem}
.tm-row .ic:hover:not([disabled]){border-color:var(--gold);color:var(--gold2)}
.tm-row .ic[disabled]{opacity:.35;cursor:default}

/* ───── milestones: the list on your page, and the card that appears when you earn one ───── */
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.ms-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:rgba(var(--fg),.05);border:1px solid var(--edge)}
.ms-card.on{border-color:rgba(var(--gd),.4);background:rgba(var(--gd),.08)}
.ms-medal{flex:none;display:flex;width:52px}
.ms-medal.dim{filter:grayscale(1);opacity:.4}
.ms-pop{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;width:min(420px,calc(100vw - 24px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.ms-pop .ms-note{pointer-events:auto;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(var(--pn),.97);border:1px solid var(--gold);box-shadow:0 12px 36px rgba(0,0,0,.45);animation:msin .45s cubic-bezier(.2,.9,.3,1.2)}
.ms-pop .ms-note .ms-medal{width:48px}
.ms-pop .ms-note .txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ms-pop .ms-note .txt b{font-weight:600;font-size:.9375rem}
.ms-pop .ms-note .txt span{font-size:.75rem;color:var(--mute)}
.ms-pop .ms-note .x{flex:none;border:0;background:transparent;color:var(--mute);cursor:pointer;font-size:1.25rem;line-height:1;padding:6px;border-radius:8px}
@keyframes msin{from{transform:translateY(24px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ms-pop .ms-note{animation:none}}
@media (max-width:720px){.ms-pop{bottom:calc(150px + env(safe-area-inset-bottom,0px))}}

/* Goals and challenges */
.goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.goal-card.met,.ch-card.met{border-color:rgba(var(--gd),.45)}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ch-prize{display:flex;flex-direction:column;gap:6px}
.ch-banner{position:relative;border-radius:12px;overflow:hidden;height:74px;border:1px solid var(--edge)}
.ch-banner svg{display:block;width:100%;height:100%}
.room-goals{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.room-goals>div{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:rgba(var(--fg),.05);border:1px solid var(--edge)}
.room-goals>div.met{border-color:rgba(var(--gd),.45)}

/* ───── picture cards (made by the site from a post's words) ───── */
.pcard{margin:12px 0 8px;border-radius:16px;padding:26px 24px 16px;display:flex;flex-direction:column;gap:18px;min-height:190px;justify-content:space-between;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pcard blockquote{margin:0}
.pcard p{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.6875rem;line-height:1.28;white-space:pre-wrap;overflow-wrap:anywhere}
.pcard figcaption{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;letter-spacing:.04em;opacity:.82}
.pcard figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pc-dusk{background:linear-gradient(165deg,#1B2547 0%,#4C3A70 100%);color:#FFF4E2}
.pc-paper{background:#F4ECD8;color:#2B2418;border-color:rgba(60,40,10,.18)}
.pc-moss{background:linear-gradient(165deg,#1B3326 0%,#2E5A43 100%);color:#EFF7EA}
.pc-ember{background:linear-gradient(165deg,#34170E 0%,#7A2E14 100%);color:#FFEBD6}
.pc-harbor{background:linear-gradient(165deg,#0E2B3C 0%,#1D5A70 100%);color:#E6F7FB}
.pc-night{background:linear-gradient(165deg,#080F1E 0%,#1A2342 100%);color:#F0E6C8;border-color:rgba(201,160,82,.45)}
.pcsw{width:48px;height:48px;border-radius:12px;border:2px solid transparent;cursor:pointer;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;display:inline-flex;align-items:center;justify-content:center;padding:0}
.pcsw.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--gd),.35)}
.pcsw.none{background:rgba(var(--fg),.06);color:var(--mute);font-family:inherit;font-size:.8125rem;width:auto;padding:0 14px;border-color:rgba(var(--gd),.25)}
.pcsw.none.on{border-color:var(--gold)}
.pcard.prev{min-height:120px;padding:18px 18px 12px}
.pcard.prev p{font-size:1.375rem}
@media (max-width:720px){.pcard{padding:20px 18px 14px;min-height:160px}.pcard p{font-size:1.4375rem}}

/* ───── reposts ───── */
.rp-line{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--mute);margin:-4px 0 10px 56px}
.rp-line a{color:inherit}

/* ───── tabs under the bookcase: Posts, Pictures, Reading, Reviews, Clubs ───── */
.feed-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.feed-tabs .chip{flex:none}
.rd-row,.rv-card{display:flex;gap:14px;align-items:flex-start}
.rd-row .f1,.rv-card .f1{min-width:0}

/* ───── club plaques ───── */
.plaques{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.plaque{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;color:inherit;text-decoration:none;background:rgba(var(--fg),.05);border:1px solid var(--edge);box-shadow:inset 0 0 0 3px rgba(var(--pn),.55),inset 0 0 0 4px rgba(var(--gd),.22)}
.plaque:hover{border-color:var(--gold)}
.plaque .crest{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:600;color:#0B1220;border:2px solid rgba(255,255,255,.45)}
.plaque .pb{min-width:0;display:flex;flex-direction:column;gap:3px;flex:1}
.plaque .hid{font-size:.75rem;color:var(--mute);margin-top:2px}
.plaque .prog{height:6px;border-radius:99px;background:rgba(var(--fg),.12);overflow:hidden;margin-top:3px}
.plaque .prog i{display:block;height:100%;background:var(--teal,#2DD4BF);border-radius:99px}
.plq-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--edge)}
.plq-row.on{border-color:var(--gold);background:rgba(var(--gd),.08)}

/* ───── recommendations ───── */
.rec-card{display:flex;gap:14px;align-items:flex-start;padding:14px}
.rec-card.new{border-color:rgba(var(--gd),.55)}

/* ───── the pull-out: a book lifted off the shelf, turned toward you and opened ───── */
.bm{--m:3;--bk:1;--pw:calc(var(--w)*var(--bk)*var(--m)*1px);--ph:calc(var(--h)*var(--bk)*var(--m)*1px);--pd:calc(var(--d)*var(--bk)*var(--m)*1px);--ins:calc(3px*var(--m));position:absolute;left:0;top:0;width:var(--pd);height:var(--ph);transform-style:preserve-3d;transform-origin:0 0}
.bm-f{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transform-origin:0 0}
.bm-front{left:0;top:0;width:var(--pd);height:var(--ph);transform:translateZ(var(--pw));background:var(--c1d)}
.bm-front .cvr{width:100%!important;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.bm-front::after{content:'';position:absolute;left:0;top:0;bottom:0;width:7.5%;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.1) 55%,transparent)}
.bm-back{left:0;top:0;width:var(--pd);height:var(--ph);transform-origin:50% 50%;transform:rotateY(180deg);background:var(--c1d)}
.bm-spine{left:0;top:0;width:var(--pw);height:var(--ph);transform:rotateY(-90deg);background-color:var(--c1);--k:calc(var(--bk)*var(--m));border-radius:2px 2px 1px 1px}
.bm-spine::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.4) 0,rgba(255,255,255,.15) 15%,rgba(255,255,255,0) 38%,rgba(0,0,0,.14) 70%,rgba(0,0,0,.46) 100%)}
.bm-fore{left:calc(var(--pd) - var(--ins));top:var(--ins);width:calc(var(--pw) - var(--ins)*2);height:calc(var(--ph) - var(--ins)*2);transform:translateZ(calc(var(--pw) - var(--ins))) rotateY(90deg)}
.bm-top{left:var(--ins);top:var(--ins);width:calc(var(--pd) - var(--ins)*2);height:calc(var(--pw) - var(--ins)*2);transform:translateZ(var(--ins)) rotateX(90deg)}
.bm-bot{left:var(--ins);top:calc(var(--ph) - var(--ins));width:calc(var(--pd) - var(--ins)*2);height:calc(var(--pw) - var(--ins)*2);transform:translateZ(calc(var(--pw) - var(--ins))) rotateX(-90deg)}
.bm-ce1{left:var(--pd);top:0;width:var(--ins);height:var(--ph);background:var(--c1d);transform:translateZ(var(--ins)) rotateY(90deg)}
.bm-ce2{left:var(--pd);top:0;width:var(--ins);height:var(--ph);background:var(--c1d);transform:translateZ(var(--pw)) rotateY(90deg)}
.bm-ct1{left:0;top:0;width:var(--pd);height:var(--ins);background:var(--c1d);transform:rotateX(90deg)}
.bm-ct2{left:0;top:0;width:var(--pd);height:var(--ins);background:var(--c1d);transform:translateZ(calc(var(--pw) - var(--ins))) rotateX(90deg)}
.bm-spine.sf-cloth{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 calc(1px*var(--m)),transparent calc(1px*var(--m)) calc(3px*var(--m))),repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 calc(1px*var(--m)),transparent calc(1px*var(--m)) calc(3px*var(--m)))}
.bm-spine.sf-cloth .sp-a,.bm-spine.sf-cloth .sp-b{border-top-width:calc(1.5px*var(--m));border-bottom-width:calc(1.5px*var(--m))}
.bm-spine.sf-modern .sp-b{height:calc(2px*var(--m))}
.bm-spine.sf-modern .sp-mk{border-width:calc(2px*var(--m))}
.bm-spine.sf-leather{background-image:radial-gradient(rgba(0,0,0,.28) calc(1px*var(--m)),transparent calc(1.4px*var(--m))),radial-gradient(rgba(255,255,255,.07) calc(1px*var(--m)),transparent calc(1.4px*var(--m)));background-size:calc(4px*var(--m)) calc(4px*var(--m)),calc(5px*var(--m)) calc(5px*var(--m));background-position:0 0,calc(2px*var(--m)) calc(2px*var(--m))}
.bm-spine.sf-leather .sp-lbl{border-width:calc(1px*var(--m));box-shadow:inset 0 0 0 calc(2px*var(--m)) rgba(0,0,0,.25)}
.bm-spine.sf-leather .sp-a,.bm-spine.sf-leather .sp-b,.bm-spine.sf-leather .sp-r1,.bm-spine.sf-leather .sp-r2{box-shadow:0 calc(1px*var(--m)) calc(2px*var(--m)) rgba(0,0,0,.6)}

.stage{position:absolute;top:0;right:0;bottom:0;left:0;outline:0}
.po{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;overscroll-behavior:contain;touch-action:none;outline:0}
.po-scrim{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;padding:0;background:rgba(3,6,14,.84);opacity:0;transition:opacity .45s ease;cursor:pointer}
.po.on .po-scrim{opacity:1}
.po-slot{position:absolute;display:block;pointer-events:none}
.po-bar{position:absolute;top:12px;right:14px;z-index:6;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .35s ease;touch-action:manipulation}
.po.open .po-bar{opacity:1;pointer-events:auto}
.po-x{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;border:1px solid rgba(240,230,200,.4);background:rgba(8,16,30,.78);color:#F0E6C8;font:500 .875rem 'DM Sans',sans-serif;cursor:pointer}
.po-x:hover{border-color:var(--gold);color:var(--gold2)}
.po-x:focus-visible,.po-pg a:focus-visible,.po-pg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the two pages, and the cover that swings over to open them */
.po-spread{position:absolute;perspective:2400px;perspective-origin:50% 50%;visibility:hidden;touch-action:pan-y}
.po-spread.on{visibility:visible}
.po-spread::before{content:'';position:absolute;left:1%;right:-1%;top:3%;bottom:-3%;border-radius:10px;background:#000;filter:blur(26px);opacity:.6;pointer-events:none}
.po-pg{--ink:#2b2218;--ink2:#5a4a36;--mute:#65553e;--gold:#8a6118;--gold2:#744809;--gd:138,97,24;--fg:43,34,24;--on-gold:#fff8e8;--red:#98342a;--teal:#1a5f51;color:var(--ink);position:absolute;top:0;height:100%;width:50%;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:clamp(22px,5.2%,40px) clamp(20px,6%,38px) 26px;font-size:.9375rem;line-height:1.5;scrollbar-width:thin;scrollbar-color:rgba(43,34,24,.3) transparent}
.po-pgl{left:0;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#efe5cf,#f7efdc 55%,#e4d8be);box-shadow:inset 1px 0 0 rgba(255,255,255,.5);visibility:hidden}
.po-spread.lp .po-pgl{visibility:visible}
.po-spread:not(.pr) .po-pgr{box-shadow:none}
.po.wide .po-sheet,.po.narrow .po-spread .po-pg{display:none}
.po-pgr{left:50%;border-radius:0 6px 6px 0;background:linear-gradient(90deg,#e4d8be,#f7efdc 14%,#f3ead4);box-shadow:inset -1px 0 0 rgba(255,255,255,.5),3px 3px 0 -1px #e6dbc0,6px 6px 0 -2px #d6c9a7}
.po-pg .tag.t-plain{background:rgba(43,34,24,.08)}
.po-fade{opacity:0;transition:opacity .35s ease}
.po-fade.on{opacity:1}
.po-leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;z-index:4;transition:transform .85s cubic-bezier(.45,.05,.25,1)}
.po-leaf.flip{transform:rotateY(-180deg)}
.po-lf{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.po-lf-f{background:var(--c1d,#222)}
.po-lf-f .cvr{width:100%!important;height:100%;aspect-ratio:auto;border-radius:0 4px 4px 0;box-shadow:none}
.po-lf-f::after{content:'';position:absolute;left:0;top:0;bottom:0;width:7.5%;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.1) 55%,transparent)}
.po-lf-b{transform:rotateY(180deg);border-radius:6px 0 0 6px;background:linear-gradient(90deg,#efe5cf,#f7efdc 55%,#e4d8be)}
.po-sheet{position:absolute;left:10px;right:10px;top:62px;bottom:10px;border-radius:10px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;visibility:hidden;background:linear-gradient(180deg,#f7efdc,#f1e7d0);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.po-sheet.on{visibility:visible}
.po-sheet .po-pg{position:static;width:auto;height:auto;overflow:visible;border-radius:0;background:none;box-shadow:none;padding:22px 20px 8px}
.po-sheet .po-pgr{border-top:1px solid rgba(43,34,24,.18);margin:0 20px;padding:20px 0 28px}

/* what is written on the pages */
.po-pg .disp{font-weight:600}
.po-title{font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.04;margin-top:0;overflow-wrap:anywhere}
.po-mini{flex:none;box-shadow:0 4px 10px rgba(43,34,24,.35)!important}
.po-status{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;line-height:1.1;font-weight:600}
.po-rule{height:1px;background:rgba(43,34,24,.16);margin:14px 0}
.po-dates{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:.875rem}
.po-dates dt{color:var(--mute)}.po-dates dd{margin:0}
.po-note{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3125rem;line-height:1.38;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 4px}
.po-note.blur{filter:blur(7px);user-select:none}
.po-log{list-style:none;margin:6px 0 0;padding:0}
.po-log li{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:baseline;padding:9px 0;border-top:1px solid rgba(43,34,24,.12);font-size:.875rem}
.po-log li:first-child{border-top:0}
.po-log .d{min-width:84px;font-weight:500}
.po-log .q{flex:1 1 160px;color:var(--ink2)}
.po-log .n{flex:1 0 100%;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.0625rem;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.po-pg .rate{color:var(--gold2)}
.po-pg .btn-line{border-color:rgba(43,34,24,.35)}
.po-sk{height:14px;border-radius:7px;background:rgba(43,34,24,.1);margin:10px 0}
@media (prefers-reduced-motion:reduce){.po-scrim,.po-bar,.po-fade,.po-leaf{transition:none!important}}

/* ───────────── the sprayed-edge shop ───────────── */
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ep-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;border-radius:14px;border:1px solid var(--edge);background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:center;min-height:44px;transition:border-color .2s ease,background .2s ease,transform .15s ease}
.ep-card:hover:not(:disabled){border-color:var(--gold);background:rgba(var(--gd),.06)}
.ep-card:active:not(:disabled){transform:scale(.97)}
.ep-card.on{border-color:var(--gold);background:rgba(var(--gd),.12)}
.ep-card.blocked{opacity:.55;cursor:not-allowed}
.ep-nm{font-size:.8125rem;font-weight:600;line-height:1.2}
.ep-sub{font-size:.6875rem;color:var(--mute);line-height:1.25}
.ep-sub.own{color:var(--gold2)}
.ep-strip{display:inline-flex;border-radius:3px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.35);flex:none}
.ep-strip>i{display:block;flex:none;width:7%}
.ep-strip>i.ep-pg{flex:1;width:auto}
.ep-detail{display:flex;gap:16px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid var(--edge);background:rgba(var(--gd),.05)}
.ep-big{flex:none;display:flex}
.ep-col{display:flex;flex-direction:column;gap:6px}
.ep-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--edge);cursor:pointer;padding:0;flex:none}
.ep-dot.on{border-color:var(--fg);box-shadow:0 0 0 2px var(--gold)}
.ep-pick{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ep-pick input{width:34px;height:28px;padding:0;border:0;background:none;cursor:pointer}
@media (max-width:520px){.ep-detail{flex-direction:column;align-items:center}.ep-detail>.fc{width:100%}}
@media (prefers-reduced-motion:reduce){.ep-card{transition:none}}

/* ───── the random edge ───── */
.ep-h3{font-size:1rem;font-weight:600;margin:6px 0 0;line-height:1.25}
.ep-h3:focus{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.ep-card{position:relative}
.ep-tag{position:absolute;top:4px;right:4px;font-size:.625rem;line-height:1;padding:3px 5px;border-radius:999px;background:rgba(var(--gd),.22);color:var(--gold2);font-weight:600;letter-spacing:.02em}
.ep-roll{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px solid rgba(var(--gd),.5);background:rgba(var(--gd),.07)}
.ep-roll-row{display:flex;gap:16px;align-items:flex-start}
.ep-roll-pending{border-color:var(--gold);background:rgba(var(--gd),.12)}
.ep-roll-result{border-color:var(--teal);background:rgba(var(--tl),.08)}
.ep-opt{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);background:rgba(var(--fg),.03)}
.ep-chance{padding:8px 10px;border-left:3px solid var(--gold);background:rgba(var(--gd),.1);border-radius:0 8px 8px 0}
.ep-odds summary{cursor:pointer;font-size:.8125rem;color:var(--gold2);padding:6px 0;min-height:32px;display:flex;align-items:center}
.ep-odds-l{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr auto auto;gap:2px 12px;font-size:.8125rem;max-height:280px;overflow-y:auto}
.ep-odds-l li{display:contents}
.ep-od-t{color:var(--mute)}
.ep-od-p{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:520px){.ep-roll-row{flex-direction:column;align-items:center}.ep-roll-row>.fc{width:100%}}

/* ───── uploaded pictures: crop screen, photo banner, portrait avatar ───── */
.crop-wrap{display:flex;justify-content:center}
.crop-frame{position:relative;overflow:hidden;width:min(var(--fw,280px),100%);border-radius:14px;background:#0008;touch-action:none;cursor:grab;outline-offset:3px;user-select:none}
.crop-frame.drag{cursor:grabbing}
.crop-img{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none}
.crop-guide{position:absolute;border:2px dashed rgba(255,255,255,.92);border-radius:22%;box-shadow:0 0 0 9999px rgba(0,0,0,.28);pointer-events:none}
.crop-zone{position:absolute;border:2px dashed rgba(255,255,255,.75);border-radius:10px;background:rgba(0,0,0,.18);color:#fff;font:500 .6875rem 'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.room-banner-photo{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.room-banner.has-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.room-banner.has-photo .room-sign,.room-banner.has-photo .room-bn-btn{z-index:2}
.room-av-photo .av{border-radius:18px}
.room-av-photo .av .cvr-img{border-radius:inherit}
.pic-state{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.up-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.up-btn input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.up-btn:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.room-bn-note{position:absolute;left:14px;top:12px;z-index:2;max-width:60%;padding:6px 12px;border-radius:999px;background:rgba(var(--pn),.9);border:1px solid rgba(var(--gd),.45);font:500 .75rem 'DM Sans',sans-serif;color:var(--ink)}
.room-av-photo .av{width:104px!important;height:130px!important}
@media (max-width:720px){.room-av-photo .av{width:88px!important;height:110px!important}}

/* ── Pictures tab: photos and picture cards in a grid, four to a row ── */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.pgrid-i{position:relative;aspect-ratio:1/1;min-width:0}
.ptile{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:6px;overflow:hidden;background:rgba(var(--fg),.08);color:inherit;cursor:pointer;font:inherit}
.ptile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.ptile:hover img,.ptile:focus-visible img{transform:scale(1.04)}
.ptile:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ptile-n{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:14px;padding:22px 6px 7px;background:linear-gradient(transparent,rgba(0,0,0,.66));color:#fff;font-size:.8125rem;font-weight:600;opacity:0;transition:opacity .2s ease;pointer-events:none}
.ptile-n span{display:inline-flex;align-items:center;gap:4px}
.ptile:hover .ptile-n,.ptile:focus-visible .ptile-n{opacity:1}
@media (hover:none){.ptile-n{opacity:1;font-size:.6875rem;gap:8px;padding:16px 4px 4px}.ptile-n svg{width:12px;height:12px}}
.ptile-wait{position:absolute;top:5px;left:5px;right:5px;padding:2px 6px;border-radius:999px;background:rgba(8,16,30,.82);color:#E8C97A;font-size:.6875rem;font-weight:600;text-align:center;line-height:1.35}
.ptile-card{display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 10px 22px}
.ptile-text{font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow-wrap:anywhere}
@media (max-width:420px){.pgrid{gap:3px}.ptile-text{font-size:.8125rem;-webkit-line-clamp:4}.ptile-card{padding:6px 6px 18px}}

/* A photo inside a post card, and in the viewer */
.pimg{margin:12px -18px 8px}
.pimg-b{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pimg-i{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:rgba(0,0,0,.2)}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;padding-right:44px}
.pv-layer .post{box-shadow:none}

/* The sheet for sharing a photo */
.photo-drop{border:1px dashed var(--edge2);border-radius:14px;min-height:140px;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center}
.photo-prev{display:block;max-width:100%;max-height:320px;border-radius:10px}

/* ───── the tab row under the header (Posts, Books, Photos, Reviews, Clubs, About, and for the owner Stats, Keeps, Orders) ───── */
.ptabs{border-top:1px solid var(--edge);padding:0 12px}
.ptabs-in{display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ptabs-in::-webkit-scrollbar{display:none}
.ptabs .ptab{position:relative;flex:none;display:inline-flex;align-items:center;min-height:50px;padding:0 16px;font:500 .9375rem 'DM Sans',sans-serif;text-decoration:none;border-radius:10px;transition:color .2s ease,background .2s ease}
#cv .ptabs .ptab{color:var(--mute)}
.ptabs .ptab:hover{background:rgba(var(--fg),.05)}
#cv .ptabs .ptab:hover{color:var(--ink)}
.ptabs .ptab:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
#cv .ptabs .ptab.on{color:var(--gold2)}
.ptab.on::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--gold)}
.ptabs-sep{flex:none;width:1px;margin:12px 8px;background:var(--edge2)}
@media (max-width:720px){.ptabs{padding:0 6px}.ptab{padding:0 13px;min-height:48px}}
.room-case-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;margin-bottom:2px}