/* 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-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}}