/* Community layer (bell, notifications, moderation queue, holds, notices, pause,
   announcement bar) in the forum's own palette. Loaded after the theme files
   through `extra_css` in site.local.php. Paper theme overrides at the end. */

/* Registration opt-in */
.agreements{border:1px solid var(--hair-strong);border-radius:var(--radius);padding:12px 14px;margin:14px 0 18px}
.agreements legend{font-weight:600;padding:0 6px;color:var(--ink-dim);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.agreements .check{display:flex;gap:10px;align-items:flex-start;margin:6px 0;font-size:14px;line-height:1.5}
.agreements input{margin-top:.25em;flex:0 0 auto;width:18px;height:18px;accent-color:var(--brand)}

/* Links out of member posts, and the warning page they open */
.ext-mark{font-size:.8em;margin-left:2px;opacity:.7}
.out-page .kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.78rem;color:var(--brand);margin:0 0 6px}
.out-host{font:600 1.5rem/1.2 var(--serif);margin:14px 0 4px;color:var(--ink);word-break:break-all}
.out-url code{display:block;white-space:normal;word-break:break-all;background:var(--panel);border:1px solid var(--hair);padding:8px 10px;border-radius:6px;font-size:13px}
.out-warnings{margin:16px 0;padding-left:20px;line-height:1.55}
.out-warnings li{margin:6px 0}

/* Header: bell and queue link */
.bell{position:relative;display:inline-flex;align-items:center;gap:3px;text-decoration:none;font-size:15px;padding:2px 4px;color:var(--ink-dim)}
.bell:hover{color:var(--ink)}
.bell-on{color:var(--brand);font-weight:700}
.mod-queue-link.mq-crisis{background:#a33a2a;color:#fff!important;border-radius:999px;padding:3px 10px}

/* Banners across the top of every page */
.pause-banner{margin:0;padding:10px 18px;background:#6a4a1e;color:#fbe9c8;font:14px/1.5 var(--sans);text-align:center;border-bottom:1px solid var(--brand-dim)}
.site-banner{background:linear-gradient(90deg,rgba(207,168,96,.16),rgba(125,159,216,.14));border-bottom:1px solid var(--brand-dim);color:var(--ink);text-align:center;padding:9px 16px;font:600 14px/1.4 var(--sans);letter-spacing:.02em}
.site-banner a{color:var(--brand-bright);text-decoration:underline;text-underline-offset:3px}
.site-notice{margin:0;padding:10px 18px;background:var(--panel);color:var(--ink);font:14px/1.5 var(--sans);text-align:center;border-bottom:1px solid var(--hair)}

/* Notifications page */
.notif-list{list-style:none;margin:0;padding:0}
.notif{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 6px;border-bottom:1px solid var(--hair)}
.notif a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.notif-unread{background:rgba(207,168,96,.07)}
.notif-unread .notif-title{font-weight:700}
.notif-time{font-size:12px;color:var(--ink-muted)}
.settings-table select{min-width:180px}

/* Moderation transparency in threads */
.mod-note{font-size:13px;background:rgba(207,168,96,.08);border-left:3px solid var(--brand);padding:6px 10px;margin:0 0 10px;border-radius:3px;color:var(--ink-dim)}
.removed-stub{color:var(--ink-muted);font-style:italic}
.held-body{background:rgba(207,168,96,.07);border-radius:6px;padding:10px}
.held-actions{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.staff-banner{margin:10px 0}
.inline-mod{display:inline-block}
.inline-mod>summary{list-style:none;cursor:pointer}
.inline-mod>summary::-webkit-details-marker{display:none}
.inline-mod[open]>form{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mod-tools>summary{list-style:none;cursor:pointer}
.mod-tools>summary::-webkit-details-marker{display:none}
.mod-tools-panel{margin-top:10px;padding:12px;border:1px solid var(--hair-strong);border-radius:var(--radius);background:var(--panel)}
.mod-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.follow-btn{margin-left:8px;font-size:12px}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font:inherit;font-size:13px}
.linkbtn:hover{color:var(--ink)}

/* Moderation queue */
.queue-section h2{display:flex;align-items:center;gap:8px}
.queue-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.queue-item.crisis{border-left:4px solid #c0503c;padding-left:12px;background:rgba(192,80,60,.08)}
.queue-excerpt{margin-top:8px;font-size:14px;max-height:14em;overflow:auto;background:var(--field);border:1px solid var(--hair);padding:8px 10px;border-radius:6px}
.queue-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;min-width:260px}
.queue-act{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.reason-input{min-width:200px}
.claim{font-size:13px;color:var(--brand);font-weight:600}
.small-btn{padding:4px 10px!important;font-size:12px!important}
@media(max-width:720px){.queue-item{grid-template-columns:1fr}.queue-actions{align-items:stretch;min-width:0}.queue-act{justify-content:flex-start}.reason-input{min-width:0;width:100%}}

/* Paper (light) theme */
html[data-theme=paper] .pause-banner{background:#f3dfb8;color:#3b2a10}
html[data-theme=paper] .site-banner{background:#efe4cf;color:#2b2620}
html[data-theme=paper] .site-banner a{color:#7a5320}
html[data-theme=paper] .notif-unread{background:rgba(154,106,42,.08)}
html[data-theme=paper] .mod-note{background:#f3ebdf;color:#3a342c}
html[data-theme=paper] .queue-excerpt,html[data-theme=paper] .out-url code,html[data-theme=paper] .mod-tools-panel{background:#fffdf8}
html[data-theme=paper] .queue-item.crisis{background:#fbeeea}

/* The bell and the queue link made the header one item too wide: for a signed-in
   member the main-site links (Home, Books, Universe, Listen) step out of the header. They
   stay in the footer and the phone menu. */
.sitebar-in:has(.bell) .nav-site{display:none}

/* ---- moderation queue (community_queue.php): one dense list, phone-first ---- */
.q-head h1{margin:.2em 0 .15em}
.q-head p{margin:0 0 14px;font-size:14px}
.q-clear{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--hair);border-radius:var(--radius);background:rgba(138,200,168,.06);color:var(--ink);font-size:15px}
.q-clear-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ok);color:#0b1020;font-weight:700;flex:0 0 auto}
.q-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding-bottom:2px}
.q-chips::-webkit-scrollbar{display:none}
.q-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--hair-strong);border-radius:999px;color:var(--ink-dim);font:600 13px/1 var(--sans);text-decoration:none}
.q-chip b{font-weight:700;color:var(--ink)}
.q-chip.on{background:var(--brand);border-color:var(--brand);color:#14110a}
.q-chip.on b{color:#14110a}
.q-chip-crisis:not(.on){border-color:var(--err);color:var(--err)}
.q-none{color:var(--ink-muted)}
.q-item{border:1px solid var(--hair);border-radius:var(--radius);background:var(--panel);padding:12px 14px;margin:0 0 8px;transition:opacity .2s,transform .2s}
.q-item.q-urgent{border-color:var(--err);box-shadow:inset 3px 0 0 var(--err)}
.q-item.q-gone{display:none}
.q-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--ink-muted)}
.q-pill{font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(207,168,96,.14);color:var(--brand)}
.q-crisis .q-pill,.q-urgent .q-pill{background:rgba(208,138,138,.16);color:var(--err)}
.q-appeal .q-pill{background:rgba(125,159,216,.14);color:var(--blue)}
.q-flag{font-size:11px;padding:3px 7px;border-radius:999px;border:1px solid var(--hair-strong);color:var(--ink-dim)}
.q-age{margin-left:auto}
.q-claim{font-size:12px;color:var(--brand)}
.q-title{margin:6px 0 2px;font:600 16px/1.35 var(--sans);letter-spacing:0;text-transform:none}
.q-title a{color:var(--ink)}
.q-meta{margin:0;font-size:13px;color:var(--ink-dim)}
.q-quote{margin:6px 0 0;padding:6px 10px;border-left:2px solid var(--brand-dim);font-size:13px;color:var(--ink-dim)}
.q-text{margin:6px 0 0;font-size:14px;color:var(--ink-dim)}
details.q-text summary{cursor:pointer;list-style:none}
details.q-text summary::-webkit-details-marker{display:none}
.q-show{color:var(--brand);font-size:12px;white-space:nowrap}
details.q-text[open] summary{display:none}
.q-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin-top:10px}
.q-form{display:contents}
.q-actions .btn{min-height:38px;margin:0}
.q-claim-btn{margin-left:auto !important}
.q-more{display:contents}
.q-more>summary{list-style:none;cursor:pointer}
.q-more>summary::-webkit-details-marker{display:none}
.q-more[open]>summary{background:var(--hair)}
.q-more-body{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 2px}
.q-more-body .q-form{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.q-more-body .select,.q-more-body .input{flex:1 1 12rem;min-width:0;max-width:100%;min-height:38px;margin:0}
.q-foot{display:grid;gap:8px;margin-top:18px}
.q-foot-item{border:1px solid var(--hair);border-radius:var(--radius);padding:10px 14px}
.q-foot-item>summary{cursor:pointer;font-weight:600;color:var(--ink-dim)}
.q-pause{display:flex;flex-wrap:wrap;gap:6px}
.q-pause .input{flex:1 1 14rem}
.q-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0}
.q-toasts{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:grid;gap:8px;justify-items:center;pointer-events:none}
.q-toast{pointer-events:auto;display:flex;align-items:center;gap:14px;max-width:32rem;width:100%;padding:12px 14px;border-radius:10px;background:#0e1427;border:1px solid var(--hair-strong);color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.5);font-size:14px}
.q-toast span{flex:1}
.q-toast button{background:none;border:0;color:var(--brand-bright);font:700 14px var(--sans);cursor:pointer;padding:6px 4px}
@media (min-width:900px){.q-item{padding:12px 16px}.q-text,.q-quote{max-width:70ch}}
html[data-theme=paper] .q-item{background:#fbf8f2}
html[data-theme=paper] .q-chip.on,html[data-theme=paper] .q-chip.on b{color:#fbf8f2}
html[data-theme=paper] .q-toast{background:#fbf8f2;color:#1e1b17}
html[data-theme=paper] .q-toast button{color:#8a651f}
html[data-theme=paper] .q-clear-mark{color:#fbf8f2}
/* Signed-in staff header on the narrowest phones (320px): the easy-read toggle
   gives way so the menu button stays on screen. */
@media (max-width:350px){.mobile-shell{gap:2px}.mobile-shell .ui-toggle.read-toggle-compact{display:none}}

/* ---- Reading comfort, matched to the main site (29 Sep) ----------------------
   The main site reads easiest: EB Garamond 20px in the bright ink (#e8e3d8) on a
   solid dark ground. The forum asked for "Source Serif 4", which it never loads
   (so Windows showed Georgia), at 17px in a dimmer ink on 55% glass over the
   star field. Text now sits on near-solid panels in the site's face, size and ink;
   small print moves off 10px mono and the dimmest grey. */
:root{--read-serif:"EB Garamond",Georgia,serif;--ink-read:#e8e3d8}
.post-body,.rules-copy,.hero p,.setup-intro,.dm-placeholder,.dm-empty,.reply-state p{font-family:var(--read-serif);font-weight:400;color:var(--ink-read)}
.post-body{font-size:20px;line-height:1.625;background:rgba(8,11,20,.94)}
.whim-message .post-body{font-family:var(--read-serif);font-size:18px;line-height:1.6;font-weight:400;color:var(--ink-read)}
.textarea{font:400 18px/1.6 var(--read-serif);color:var(--ink-read)}
.rules-copy{font-size:19px;line-height:1.65}
.post-body blockquote{color:#c9c4b8}
.post,.panel,.forum-row,.thread-row,.whim-message,.profile-activity-list{background-color:rgba(10,14,24,.94)}
.post-meta{font:12px/1.4 var(--sans);color:var(--ink-dim)}
.post-meta a{color:var(--ink-dim)}
.hint,.muted,.crumbs,.crumbs a,.count,.whim-meta,.dm-item-time{color:var(--ink-dim)}
.forum-desc,.thread-meta,.last-meta{font-size:14px;color:#b8c0ce}
.dm-item-snippet{font-size:14px;color:var(--ink-dim)}
.post-mod-link{font-size:12px}
@media(max-width:600px){.post-body{font-size:18px;line-height:1.6}.textarea{font-size:17px}}
html[data-theme=paper]{--ink-read:#1e1b17}
html[data-theme=paper] .post-body{background:rgba(255,253,249,.96)}
html[data-theme=paper] .post,html[data-theme=paper] .panel,html[data-theme=paper] .forum-row,html[data-theme=paper] .thread-row,html[data-theme=paper] .whim-message{background-color:rgba(251,248,242,.96)}
html[data-theme=paper] .forum-desc,html[data-theme=paper] .thread-meta,html[data-theme=paper] .last-meta,html[data-theme=paper] .post-meta,html[data-theme=paper] .muted,html[data-theme=paper] .hint{color:#4a453d}
.q-more-body,.q-more-body .q-form{min-width:0;max-width:100%}
.q-more{display:block;min-width:0}
.q-more[open]{flex:1 1 100%}

/* ---- The Mod panel (community_modkit.php): phone sheet, tablet drawer, desktop dock ---- */
.mod-panel{position:fixed;z-index:80;left:0;right:0;bottom:0;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;background:#0b1020;color:var(--ink);border-top:1px solid var(--hair-strong);border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom);font-size:.9rem}
.mod-panel[hidden]{display:none}
.mod-panel-head{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;background:#0b1020;border-bottom:1px solid var(--hair)}
.mod-panel-head strong{font:600 1rem var(--sans);letter-spacing:.02em}
.mod-close{margin-left:auto;width:40px;height:40px;border-radius:999px;border:1px solid var(--hair-strong);background:none;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.mod-tabs{order:3;display:flex;gap:4px;width:100%}
.mod-tabs button{flex:1;min-height:38px;border-radius:999px;border:1px solid var(--hair-strong);background:none;color:var(--ink-dim);font:600 .8rem var(--sans);cursor:pointer}
.mod-tabs button b{margin-left:4px;color:var(--brand)}
.mod-tabs button[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:#14110a}
.mod-tabs button[aria-selected=true] b{color:#14110a}
.mod-pane{padding:12px 14px 16px}
.mod-sub{margin:10px 0 4px;font:700 .7rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.mod-entry{margin:0;padding:7px 0;border-bottom:1px solid var(--hair);font-size:.85rem;line-height:1.45;overflow-wrap:anywhere}
.mod-entry a{color:var(--brand)}
.mod-when{color:var(--ink-muted);margin-right:4px}
.mod-note-line{margin:4px 0;color:var(--ink-dim);font-size:.85rem}
.mod-full{display:block;width:100%;margin-top:12px;text-align:center}
.mod-panel .q-item{padding:10px 11px}
.mod-panel .q-title{font-size:.95rem}
.mod-member-name{margin:0;font:600 1.15rem var(--sans);color:var(--ink)}
.mod-pills{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.mod-pill{font-size:.75rem;padding:3px 9px;border-radius:999px;border:1px solid var(--hair-strong);color:var(--ink-dim)}
.mod-pill.warn{border-color:var(--err);color:var(--err)}
.mod-member-acts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.mod-shadow-d{width:100%}.mod-shadow-d>summary{list-style:none;display:inline-flex}.mod-shadow-d>summary::-webkit-details-marker{display:none}
.mod-shadow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.mod-shadow .input{flex:1 1 12rem;min-width:0}
.modlog-row{padding:6px 0;border-bottom:1px solid var(--hair)}.modlog-row .mod-entry{border:0;padding:0}
@media(min-width:768px){.mod-panel{left:auto;top:0;bottom:0;width:min(23rem,92vw);max-height:none;border-top:0;border-left:1px solid var(--hair-strong);border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.45)}}
@media(min-width:1280px){.mod-panel{width:21rem;box-shadow:none}html.mod-docked body{padding-right:21rem}html.mod-docked .sitebar{right:21rem}}
html[data-theme=paper] .mod-panel,html[data-theme=paper] .mod-panel-head{background:#fbf8f2;color:#1e1b17}
html[data-theme=paper] .mod-tabs button[aria-selected=true],html[data-theme=paper] .mod-tabs button[aria-selected=true] b{color:#fbf8f2}
/* post menu: one "Moderate" per post, and the writer's own Delete */
.post-mod{display:inline-block;position:relative}
.post-mod>summary{list-style:none;cursor:pointer}.post-mod>summary::-webkit-details-marker{display:none}
.post-mod[open]>summary{color:var(--brand-bright)}
.post-mod-panel{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;width:min(22rem,86vw);display:grid;gap:8px;padding:12px;background:#0e1427;border:1px solid var(--hair-strong);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);text-align:left}
.post-mod-panel form{display:flex;flex-wrap:wrap;gap:6px}
.post-mod-panel .input,.post-mod-panel .select{flex:1 1 100%;min-width:0;margin:0}
.post-mod-sub>summary{cursor:pointer;color:var(--ink);font-weight:600}
.post-mod-sub[open]>summary{margin-bottom:6px}
.post-mod-panel .linkbtn{justify-self:start}
html[data-theme=paper] .post-mod-panel{background:#fbf8f2}
.purged-body .struck{text-decoration:line-through;opacity:.6}
.removed-stub .staff-read{margin-top:8px;padding-top:8px;border-top:1px dashed var(--hair-strong);opacity:.75}
@media(max-width:600px){.post-mod-panel{position:fixed;left:12px;right:12px;bottom:12px;width:auto}}
/* the post menu reads like the other post actions (Quote, Edit), with the same spacing */
.post-actions .post-mod>summary.linkbtn{font:12px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-dim);margin-left:12px;padding:0;background:none;border:0}
.post-actions .post-mod>summary.linkbtn:hover{color:var(--brand-bright)}
/* Phone menu: it opens inside the fixed header, so when it is taller than the screen
   (landscape, or signed in as staff) it scrolls within itself; otherwise the lower
   items could not be reached. */
.mobile-menu-panel{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Autosave drafts (assets/forum-drafts.js): the "your unsent draft is back" note. */
.draft-note{margin:.35rem 0 0;font-size:.85rem;color:var(--ink-dim)}
.draft-note .linkbtn{font:inherit;text-decoration:underline;padding:0;margin-left:.2rem}

/* Affiliate disclosure in the footer (shown only when a link on the page carries a code). */
.aff-note{margin:0 auto;padding:.6rem 1rem 0;max-width:72rem;font-size:.78rem;color:var(--ink-dim);text-align:center}