/* Rocoto UI, part 2: everything the real site needs on top of the design mock (links, forms, real avatars,
   the sidebar, the feed, the comments tray, the other pages). Same tokens as rocoto-ui.css. */

a { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2 { color: var(--head); }
[hidden] { display: none !important; }
button { font-family: var(--f-body); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ac); font: 700 10px var(--f-body); text-transform: uppercase; }
.linkbtn:hover { text-decoration: underline; }

/* ---- shell ------------------------------------------------------------------------ */
.rail a { color: #b9b9b9; }
.rail a:hover { color: #fff; text-decoration: none; }
.rail .rl2 { margin-left: auto; white-space: nowrap; }
.nav-badge { display: inline-block; min-width: 15px; margin-left: 4px; padding: 0 4px; border-radius: 8px; background: linear-gradient(#f58a7d, #c8271b); border: 1px solid #500; color: #fff; font: 700 9px/13px var(--f-body); text-align: center; vertical-align: 1px; }
.brand:hover { text-decoration: none; }
.brand .pepper { flex: none; width: 62px; height: 62px; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .6)); }
.tab { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.tab:hover { text-decoration: none; }
main { min-width: 0; }
aside { min-width: 0; }

/* real avatars: the mock's .av frame with a picture in it instead of the drawn silhouette */
.av.img:before, .av.img:after { display: none; }
.av.img { background: #2a2a2a; }
.av.img img, .av.img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.av { text-decoration: none; }
.av.s30 { width: 30px; height: 30px; }
.post > .av { width: 40px; height: 40px; }

/* ---- generic card content --------------------------------------------------------- */
.card h3 small a { color: var(--ac); }
.card p { margin: 0 0 8px; }
.card h3 + p.muted { margin-top: 0; }
.card h4 { margin: 12px 0 6px; font: 700 12px var(--f-body); color: var(--head); }
.card hr { border: 0; border-top: 1px dotted #666; margin: 10px 0; }

/* ---- posts ------------------------------------------------------------------------ */
.feedcard h3 small { text-transform: uppercase; }
.page + .page > .post:first-child { border-top: 1px dotted #666; }
.post .pn a { color: var(--head); }
.post .pn b a { color: var(--pw, var(--ac)); }
.post .pt { word-wrap: anywhere; }
.post .pic img, .post .pic video { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #000; }
.post .pic { width: fit-content; }
.post .inset audio { width: 100%; height: 32px; margin-top: 4px; }
.songinfo { flex: 1; min-width: 0; }
.art { background: linear-gradient(135deg, var(--ac), var(--ac2)); }
.acts { display: flex; flex-wrap: wrap; align-items: center; }
.acts .rx { text-transform: none; }
.acts .mod { margin-left: auto; }
.acts .report-btn, .acts .delete-post-btn { opacity: .75; }
.acts .report-btn:hover, .acts .delete-post-btn:hover { opacity: 1; }
.rx:hover { filter: brightness(1.15); }
.feed-empty { padding: 20px 0; text-align: center; }
.cm a.av { width: 28px; height: 28px; }
.cm > div { min-width: 0; word-wrap: anywhere; }
.morecm:hover { text-decoration: underline; }

/* ---- composer --------------------------------------------------------------------- */
.compose textarea { min-height: 82px; }
.tool:disabled { opacity: .4; cursor: default; }
.attached { margin-top: 6px; font-size: 11px; color: var(--muted); }
.viewmode { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; }

/* ---- sidebar ---------------------------------------------------------------------- */
.top8 .t8 { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
.top8 .t8:hover { color: #fff; text-decoration: none; }
.top8 .t8 .av { width: 100%; height: auto; aspect-ratio: 1; }
.top8 .t8 .av img { position: absolute; inset: 0; }
.top8 .t8.empty { opacity: .35; }
.t8-hint { margin: 8px 0 0; }
.soon { opacity: .8; }
.soon h3 small { color: var(--muted); }
.photo.blank { height: 60px; background: linear-gradient(#cfcfc8, #bcbcb4); }
.eq.idle i { animation: none; height: 4px; box-shadow: none; opacity: .5; }
.pwchip { text-decoration: none; }
.pwchip:hover { text-decoration: none; filter: brightness(1.15); }

/* dialogs (Top 8 editor) */
.dlg { border: 0; padding: 0; background: transparent; max-width: 440px; width: calc(100% - 24px); color: var(--text); }
.dlg::backdrop { background: rgba(0, 0, 0, .7); }
.dlg-card { margin: 0; }
.top8-list { max-height: 50vh; overflow: auto; margin-bottom: 8px; }
.top8-row { cursor: pointer; }
.top8-row input { margin: 0 2px 0 0; }
.top8-row .top8-slot { margin-left: auto; width: auto; color: var(--ac); }

/* ---- comments tray (slides in from the right) -------------------------------------- */
.comments-tray { position: fixed; z-index: 60; top: 0; right: 0; width: 380px; max-width: 100%; height: 100vh; display: flex; flex-direction: column;
    background: var(--card-b); border-left: 1px solid #000; box-shadow: -3px 0 12px rgba(0, 0, 0, .7); transform: translateX(105%); transition: transform .2s ease-out; }
.comments-tray.open { transform: none; }
.comments-tray-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px;
    background: linear-gradient(#5a5a5a, #404040 50%, #303030 51%, #383838); border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.comments-tray-header h3 { margin: 0; font: 700 12px var(--f-body); text-transform: uppercase; color: #f0f0f0; text-shadow: 0 -1px 0 #000; }
.close-tray-btn { width: 24px; height: 22px; padding: 0; cursor: pointer; font-size: 16px; line-height: 1; color: #eee;
    background: linear-gradient(#5a5a5a, #3c3c3c); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
.comments-container { flex: 1; overflow: auto; padding: 10px; }
.comments-list { display: flex; flex-direction: column; gap: 8px; }
.comment-item { padding: 8px; border-radius: 2px; background: linear-gradient(var(--inset-a), var(--inset-b)); border: 1px solid #000; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8); }
.comment-header { display: flex; align-items: center; gap: 8px; }
.comment-avatar { width: 28px; height: 28px; flex: none; border: 1px solid #000; box-shadow: 0 0 0 1px #777; overflow: hidden; }
.comment-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.comment-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.comment-author { color: var(--ac); font-weight: 700; }
.comment-time { color: var(--muted); font-size: 10px; }
.comment-actions { display: flex; gap: 4px; }
.comment-content { margin-top: 5px; word-wrap: anywhere; white-space: pre-wrap; }
.no-comments { color: var(--muted); text-align: center; padding: 20px 0; }
.comment-input-area { padding: 10px; border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--hi); }
.comment-input-area textarea { height: 64px; }
.submit-comment-btn { width: 100%; height: 28px; margin-top: 8px; cursor: pointer; font: 700 12px var(--f-body); border-radius: 3px; border: 1px solid #000;
    color: var(--ac-text); background: linear-gradient(var(--g-hi), var(--g-lo)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .6); }
.submit-comment-btn:disabled { opacity: .5; cursor: default; }
.comment-mini, .comment-actions button { cursor: pointer; padding: 1px 6px; font: 700 10px var(--f-body); color: #ddd; background: linear-gradient(#5a5a5a, #3e3e3e); border: 1px solid #000; border-radius: 3px; }
.emoji { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- error page ------------------------------------------------------------------- */
html:has(.error-box) { background: var(--bg) var(--page-tile); }
body:has(.error-box) { background: none; }
.error-box { position: static; transform: none; display: block; width: 360px; max-width: calc(100% - 32px); margin: 15vh auto 0; padding: 0 0 16px; text-align: center;
    background: var(--card-b); border: 1px solid #000; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1); }
.error-box h1 { margin: 0 0 12px; padding: 6px 10px; font: 700 13px var(--f-body); text-transform: uppercase; color: #f0f0f0;
    background: linear-gradient(#5a5a5a, #404040 50%, #303030 51%, #383838); border-bottom: 1px solid #000; }

@media (max-width: 860px) {
    .cols { grid-template-columns: minmax(0, 1fr); }
    .cols > main, .cols > aside { min-width: 0; }
    .rail { flex-wrap: wrap; height: auto; padding: 4px 8px; gap: 6px 12px; }
    .rail .search { width: 100%; }
    .rail .rl2 { margin-left: 0; }
    .face { text-align: left; flex-direction: row; flex-wrap: wrap; }
    .wm { font-size: 44px; }
    .brand .pepper { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
    .face { flex-direction: column; align-items: flex-start; }
    .tab { font-size: 11px; }
    .comments-tray { width: 100%; }
}

/* ---- pathway page, pathways list, explore, city ------------------------------------ */
.av.sq { border-radius: 2px; }
.av.s44 { width: 44px; height: 44px; }
.pwhead { --pw: var(--ac); }
.pwhead h3 small { color: var(--ac); }
.pwbanner { height: 90px; margin: 0 0 10px; overflow: hidden; border: 1px solid #000; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8); background: var(--inset-b); }
.pwbanner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pwbanner.none { background: linear-gradient(color-mix(in srgb, var(--pw) 65%, #fff), var(--pw) 50%, color-mix(in srgb, var(--pw) 60%, #000)); }
.pwinfo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.pwtext { flex: 1; min-width: 0; }
.pwtext p { margin: 0 0 4px; word-wrap: anywhere; }
.pwactions { display: flex; gap: 6px; flex: none; }
.seg.grey-box { margin: 0; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.compose.tab-content-flex { display: none; }
.compose.tab-content-flex.active { display: flex; }
.grid-item { grid-row-end: auto !important; }
.image-grid { grid-template-columns: repeat(3, 1fr); }
.pic-thumb { height: 100px; background: #000; }
.pic-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.snap a { display: block; }
.pw-row { --pw: var(--ac); }
.pwbar { flex: none; align-self: stretch; width: 4px; background: var(--pw); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .4); }
.pw-text { flex: 1; min-width: 0; }
.pw-name { font-weight: 700; color: var(--pw); }
.pw-count { flex: none; margin-left: 0 !important; }
.pw-row .slab { min-width: 74px; justify-content: center; }
.track a { color: var(--text); }
.track.person > span:last-child { margin-left: auto; }
.bulletin-text { margin-left: 0 !important; color: var(--text) !important; font-size: 12px !important; }
.track .role-tag, .role-tag { display: inline-block; margin-left: 4px; padding: 0 6px; font: 700 9px/14px var(--f-body); text-transform: uppercase; color: var(--ac-text); background: linear-gradient(var(--g-hi), var(--g-lo)); border: 1px solid #000; border-radius: 2px; }
.role-tag-pending { color: #ddd; background: linear-gradient(#5a5a5a, #3e3e3e); }
.role-you { color: var(--muted); }
.notif-row { display: flex; align-items: center; gap: 10px; }
.notif-text { flex: 1; min-width: 0; }
.notif-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.notif-actions .chip { margin: 0; }
.bulletin-icon { width: 16px; height: 16px; flex: none; }
.faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.face-tile { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 10px; color: var(--text); }
.face-tile .av { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 3px; }
.face-tile .av img { position: absolute; inset: 0; }

.city-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #000; box-shadow: inset 0 3px 10px #000; background: linear-gradient(#0e1a2a, #2b3a55 70%, #3a3a3a); }
.city { min-width: max-content; height: 260px; display: flex; align-items: flex-end; gap: 10px; padding: 0 30px; color: #cfd6e2; font: 700 10px/12px var(--f-body); text-align: center; }
.tower { display: flex; flex-direction: column; align-items: center; }
.tower .label { margin-bottom: 4px; white-space: pre; opacity: .9; }
.building { position: relative; background: #1f1f1f; border-top: 3px solid var(--ac); transition: height .6s ease; }
.building.round { border-radius: 14px 14px 0 0; }
.building.steps { clip-path: polygon(0 100%, 0 70%, 20% 70%, 20% 50%, 40% 50%, 40% 30%, 60% 30%, 60% 10%, 80% 10%, 80% 100%); border-top: 0; }
.building.spire { clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); border-top: 0; }
.building.central { background: #2a2a2a; clip-path: polygon(50% 0, 90% 100%, 10% 100%); border-top: 0; }
.building.rect { background: #262626; }

/* ---- profile ---------------------------------------------------------------------- */
:root { --dark-button-submit: var(--g-lo); --light-button-submit: var(--g-hi); --floating-text: var(--text); --mid-primary: #5769a1; }
.pbanner { position: relative; height: 110px; margin-bottom: 10px; overflow: hidden; border: 1px solid #000; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .8); background: var(--inset-b); }
.pbanner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pbanner.none { background: linear-gradient(var(--g-hi), var(--g-mid) 50%, var(--g-lo) 51%, var(--g-mid2)); }
.friend-actions { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pinfo { display: flex; gap: 12px; margin-bottom: 10px; }
.av.big { width: 110px; height: 110px; flex: none; }
.pname { font: 700 18px var(--f-logo); color: var(--head); margin-bottom: 4px; }
.pinfo p { margin: 0 0 6px; word-wrap: anywhere; }
.profile-info-info { flex: 1; min-width: 0; }
.pactions { display: flex; gap: 6px; margin-top: 8px; }
.friend-btn, .pactions .slab { cursor: pointer; padding: 4px 12px; font: 700 11px var(--f-body); color: #eee; background: linear-gradient(#5a5a5a, #3c3c3c); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .6); text-shadow: 0 -1px 0 #000; }
.friend-btn:hover { filter: brightness(1.15); }
.friend-btn:disabled { opacity: .5; cursor: default; }
.friend-btn-accept { color: var(--ac-text); background: linear-gradient(var(--g-hi), var(--g-lo)); text-shadow: none; }
.friend-btn.chip { padding: 2px 8px; font-size: 10px; }
.notif-empty { color: var(--muted); padding: 12px 0; }
.song-container { margin-top: 8px; }
@media (max-width: 560px) { .pinfo { flex-direction: column; } .av.big { width: 96px; height: 96px; } }

/* ---- post page, chat, search -------------------------------------------------------- */
#post-view .post { border-top: 0; padding-top: 4px; }
.chatbox { display: flex; gap: 10px; min-height: 260px; }
.chat-side { width: 30%; margin: 0; }
.chat-main { flex: 1; margin: 0; display: flex; flex-direction: column; justify-content: space-between; }
.chat-main .compose textarea { min-height: 60px; }
@media (max-width: 560px) { .chatbox { flex-direction: column; } .chat-side { width: auto; } }
.big-search { width: 100%; height: 30px; }
.big-search input { padding-left: 10px; }
.result-post { flex-wrap: wrap; }
.result-post .pn { color: var(--muted); }
.result-post .pn b { color: var(--head); }
.result-text { flex: 1; margin-left: 0 !important; color: var(--text) !important; font-size: 12px !important; word-wrap: anywhere; }

/* ---- notifications ---------------------------------------------------------------- */
.notif-row .notif-text { color: var(--text); }
.notif-row .notif-text a { color: var(--ac); font-weight: 700; }
.notif-time { display: block; font-size: 10px; color: var(--muted); }
.notif-unread { border-color: var(--g-line); box-shadow: inset 3px 0 0 var(--ac), inset 0 1px 0 rgba(255, 255, 255, .08); }
.notif-avatar { flex: none; }

/* ---- forms (settings, editing, sign in) ---------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], select {
    font: 13px var(--f-body); color: var(--text); min-width: 0; padding: 5px 8px; outline: 0;
    background: #1c1c1c; border: 1px solid #000; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9); }
select { padding-right: 4px; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 0 0 2px #6aa9ea; }
.settings-form, .stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.settings-field, .field { display: flex; flex-direction: column; gap: 3px; font-weight: 700; width: 100%; max-width: 380px; }
.settings-field input, .settings-field select, .field input, .field select { font-weight: 400; width: 100%; }
.settings-note, .note { max-width: 520px; margin: 0; color: var(--muted); font-size: 11px; }
.settings-flash { margin: 0 0 12px; padding: 6px 10px; border-radius: 2px; border: 1px solid #000; background: linear-gradient(var(--inset-a), var(--inset-b)); }
.settings-flash.success { border-left: 4px solid var(--ac); }
.settings-flash.error, .settings-flash.danger { border-left: 4px solid #d9261a; }
button[type="submit"]:not(.slab):not(.search .go):not(.submit-comment-btn) { cursor: pointer; }

/* ---- editing pages ----------------------------------------------------------------- */
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field.wide { max-width: none; margin-bottom: 8px; }
.card .settings-form { margin-top: 10px; }
.slab.filepick { position: relative; max-width: 260px; overflow: hidden; }
.slab.filepick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .colorpick, .colorpick { width: 60px; height: 30px; padding: 0; cursor: pointer; background: none; }
.swatches { margin-bottom: 10px; }
.sw { width: 24px; height: 24px; }
textarea.cssbox { display: block; width: 100%; }

/* ---- sign in / register ------------------------------------------------------------- */
.authcols { margin-top: 12px; }
.authlinks { margin: 12px 0 0; }
.authhero { display: flex; align-items: center; gap: 12px; }
.authhero p { margin: 0; }
.authhero img { flex: none; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .6)); }
.flash { margin-bottom: 10px; }

/* ---- small fixes and additions (round 3) ------------------------------------------- */
.ico { width: 16px; height: 16px; vertical-align: -3px; image-rendering: auto; }
.rx .ico { margin-right: 1px; }
.rail .nav-badge, .nav-badge { color: #fff; }
.track > .av, .track.person > .av { margin-left: 0; }
.track.person { text-decoration: none; }
.track.person > span:last-child { margin-left: auto; }
.pw-row .slab, .pwactions .slab { height: 22px; min-width: 0; padding: 0 10px; font-size: 11px; }
.pwactions { align-items: center; }
.pwactions .slab, .pwinfo .slab { flex: none; }
.snaps.two .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snaps.two .snap a { display: block; }

/* comments slide out from underneath the post */
.post.cm-open .cmpreview { display: none; }
.cmdrawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease-out; }
.cmdrawer.open { grid-template-rows: 1fr; }
.cmdrawer-in { overflow: hidden; min-height: 0; }
.cmdrawer.open .cmdrawer-in { padding-top: 4px; }
.cmdrawer .cm { position: relative; }
.cmbody { flex: 1; min-width: 0; }
.cmbody .cmtop { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cmbody .cmtext { margin-top: 2px; white-space: pre-wrap; word-wrap: anywhere; }
.cmtime { color: var(--muted); font-size: 10px; }
.cmacts { margin-left: auto; display: inline-flex; gap: 8px; }
.cmact { cursor: pointer; color: var(--muted); font-size: 10px; }
.cmact:hover { color: var(--ac); }
.cmform { display: flex; gap: 6px; align-items: flex-end; margin: 8px 0 2px; }
.cmform textarea { flex: 1; min-height: 34px; resize: vertical; }
.cmform .slab { height: 30px; flex: none; }
.no-comments { margin: 6px 0; }

/* settings: your look */
.colorrow { display: flex; align-items: center; gap: 10px; }
.colorrow input[type=color] { width: 44px; height: 26px; padding: 0; border: 1px solid #000; background: none; cursor: pointer; }
.tilepick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.tilechoice { cursor: pointer; position: relative; }
.tilechoice input { position: absolute; opacity: 0; pointer-events: none; }
.tilebox { display: flex; width: 54px; height: 40px; align-items: center; justify-content: center; border: 2px solid #000; border-radius: 3px; background-color: #222; font-size: 10px; color: #d0d0d0; }
.tilebox.nochoice { background: linear-gradient(#4a4a4a, #333); }
.tilechoice input:checked + .tilebox { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }

/* ---- chat ------------------------------------------------------------------------- */
.chatbox { min-height: 420px; }
.chat-side { width: 32%; min-width: 0; overflow: auto; max-height: 560px; }
.chat-main { min-width: 0; justify-content: flex-start !important; gap: 8px; }
.chatrow { display: flex; align-items: center; gap: 8px; padding: 6px; margin-top: 4px; border-radius: 3px; border: 1px solid transparent; color: var(--text); text-decoration: none; }
.chatrow:hover { background: rgba(255, 255, 255, .06); }
.chatrow.on { border-color: #000; background: linear-gradient(var(--inset-b), var(--inset-a)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); }
.chatmid { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chatname { font-weight: 700; }
.chatprev { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatrow .nav-badge { margin-left: auto; }
.chat-head { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 700; }
.chat-thread { flex: 1; min-height: 240px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.bub { max-width: 78%; padding: 6px 9px; border-radius: 6px; border: 1px solid #000; word-wrap: anywhere; }
.bub.me { align-self: flex-end; background: linear-gradient(var(--g-hi), var(--g-lo)); color: var(--ac-text); }
.bub.them { align-self: flex-start; background: linear-gradient(#4a4a4a, #363636); color: #eee; }
.bubtext { white-space: pre-wrap; }
.bubtime { margin-top: 2px; font-size: 9px; opacity: .7; text-align: right; }
.chatpic { display: block; max-width: 100%; max-height: 220px; border-radius: 3px; margin-bottom: 4px; }
.chat-compose textarea { width: 100%; box-sizing: border-box; resize: none; }
.chat-tools { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 6px; }
.chat-older { align-self: center; }
@media (max-width: 560px) { .chat-side { width: auto; max-height: 200px; } .bub { max-width: 92%; } }
.chatrow, .chatrow:hover, .chatrow * { text-decoration: none; }
.chatrow:hover .chatname { color: var(--ac); }
.filepick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.slab.filepick { position: relative; }
.cmdrawer-in { padding-left: 3px; padding-right: 3px; }
.cmform .slab { flex: 0 0 auto; width: 64px; min-width: 0; justify-content: center; }
.cmform textarea { flex: 1 1 auto; min-width: 0; width: auto; }

/* ---- picture frames toggle (Settings > Picture frames): off = plain pictures ---- */
.settings-check { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 4px 0 10px; }
body.no-frames .pic { background: none; padding: 0; border: 0; box-shadow: none; transform: none; }
body.no-frames .pic.tilt, body.no-frames .pic:hover { transform: none; }
body.no-frames .pic .ph { box-shadow: none; border-radius: 0; }
body.no-frames .pic .ph:after { display: none; }
body.no-frames .snap { background: none; padding: 0; box-shadow: none; transform: none !important; }
body.no-frames .snap .photo { border-radius: 0; }

/* ---- small fixes: centred like/comment/share labels, fixed-size comment box ---- */
.acts .rx { display: inline-flex; align-items: center; gap: 4px; line-height: 1; padding-top: 3px; padding-bottom: 3px; }
.acts .rx .ico { margin: 0; vertical-align: 0; flex: none; }
.cmform { align-items: center; }
.cmform textarea { resize: none; height: 30px; min-height: 30px; max-height: 30px; box-sizing: border-box; padding: 6px 8px; line-height: 16px; overflow: hidden; }
.cmform .slab { height: 30px; margin: 0; }

/* composer tool buttons use the 3D icons from icon_pool */
.tool .tico { display: block; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.tool:disabled .tico { opacity: .45; filter: grayscale(.6); }

/* ---- polls ---- */
.pollbox { grid-column: 1 / -1; padding: 8px 0 2px; }
.pollbox[hidden] { display: none; }
.pollhead { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 12px; }
.pollhead .linkbtn { margin-left: auto; }
#poll-options { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
input.polltext { width: 100%; box-sizing: border-box; }
.poll { margin: 10px 0 4px; max-width: 440px; display: flex; flex-direction: column; gap: 5px; }
.pollopt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; overflow: hidden;
  min-height: 28px; padding: 4px 10px; font: 700 12px var(--f-body); color: #eee; cursor: pointer; border-radius: 3px;
  background: linear-gradient(#5a5a5a, #3c3c3c); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.pollopt:hover { filter: brightness(1.12); }
.pollopt .polltext, .pollopt .pollpct { position: relative; z-index: 1; width: auto; }
.pollopt .pollbar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.16); transition: width .3s; }
.pollopt.mine { border-color: var(--ac, #7cc04a); }
.pollopt.mine .pollbar { background: linear-gradient(var(--g-hi, #8fd35f), var(--g-lo, #5aa02a)); opacity: .55; }
.pollmeta { font-size: 11px; color: #999; }

/* ---- emoji picker in the composer ---- */
.emojipick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; max-height: 120px; overflow-y: auto; padding: 8px; margin-top: 6px;
  background: linear-gradient(#262626, #1c1c1c); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.9); }
.emojipick[hidden] { display: none; }
.emojiopt { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(#5a5a5a, #3c3c3c); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.emojiopt:hover { filter: brightness(1.2); }
.emojiopt .emoji { width: 20px; height: 20px; vertical-align: 0; }

/* composer panels (emoji picker, poll answers) sit on their own row under the text and buttons */
.compose:not(.chat-compose) { flex-wrap: wrap; }
.compose .emojipick, .compose .pollbox { flex: 1 1 100%; order: 5; margin-top: 2px; }
.compose textarea { min-width: 160px; }

/* ---- feed filter indicator ---- */
.feednav a.on { color: var(--ac-text, #111); background: linear-gradient(var(--g-hi, #8fd35f), var(--g-lo, #5aa02a)); padding: 1px 8px; border-radius: 9px;
  text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.5); font-weight: 700; }
.feednav a { padding: 1px 4px; }
.feedshow { font-size: 12px; margin: -2px 0 8px; color: #ccc; }
.feedshow b { color: var(--ac, #7cc04a); }

/* ---- tags, replies, suggestions ---- */
a.tag { font-weight: 700; text-decoration: none; }
a.tag-user { color: var(--ac, #7cc04a); }
a.tag-path { color: #7fb2f0; }
a.tag:hover { text-decoration: underline; }
.cthread { display: block; }
.creplies { margin-left: 30px; padding-left: 8px; border-left: 2px solid rgba(255,255,255,.14); }
.creplies:empty { display: none; }
.replybar { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: #aaa; margin: 6px 0 -2px; }
.replybar[hidden] { display: none; }
.replybar b { color: var(--ac, #7cc04a); }
.cmact.reply-btn { cursor: pointer; }
.tagpop { position: absolute; z-index: 1000; max-width: 300px; background: #262626; border: 1px solid #000; border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0,0,0,.7); overflow: hidden; }
.tagpop[hidden] { display: none; }
.tagopt { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; cursor: pointer; color: #eee; }
.tagopt img, .tagopt i { width: 20px; height: 20px; object-fit: cover; border-radius: 3px; background: #444; flex: none; }
.tagopt.on, .tagopt:hover { background: linear-gradient(var(--g-hi, #8fd35f), var(--g-lo, #5aa02a)); color: var(--ac-text, #111); }
a.tag { text-transform: none; }
.feednav a:not(.on) { color: #d0d0d0; }
.feednav a.on { text-decoration: none; }

/* ===== Cookie notice ===== */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px;
    padding: 12px 16px; background: #1b1b1b; border-top: 1px solid #000; box-shadow: 0 -4px 14px rgba(0, 0, 0, .55); color: var(--text); font-size: 13px; line-height: 1.4; }
.consent[hidden] { display: none; }
.consent-text { max-width: 720px; }
.consent-text a { color: var(--ac); }
.consent-buttons { display: flex; gap: 8px; flex: none; }
.consent .slab { height: 34px; }

/* ===== Front page and legal pages ===== */
.landing h1 { margin: 0 0 8px; font: 700 30px/1.15 var(--f-body); color: var(--head); }
.landing .lead { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.landing .cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 2px; }
.landing .slab.cta { height: 48px; min-width: 220px; justify-content: center; font-size: 17px; text-decoration: none; }
.landing .cta-row a:not(.slab) { color: var(--ac); }
.landing .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.landing .features .card { margin: 0; }
.landing h2, .landing h3 { color: var(--head); margin-top: 0; }
.landing details { border-top: 1px solid rgba(0, 0, 0, .5); padding: 8px 0; }
.landing details:first-of-type { border-top: 0; }
.landing summary { cursor: pointer; font-weight: 700; color: var(--head); }
.landing details p { margin: 6px 0 2px; line-height: 1.5; }
.prose { max-width: 760px; line-height: 1.55; }
.prose h1 { margin: 0 0 4px; color: var(--head); font-size: 26px; }
.prose h2 { margin: 22px 0 6px; color: var(--head); font-size: 18px; }
.prose a { color: var(--ac); }
.prose ul { padding-left: 20px; }
.prose li { margin: 3px 0; }
.foot a { color: var(--ac); }
@media (max-width: 720px) {
    .landing .features { grid-template-columns: 1fr; }
    .landing h1 { font-size: 25px; }
    .landing .slab.cta { width: 100%; }
}

/* ===== Spam trap (real people never see or fill this) ===== */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.pwchip .muted { color: #e6e6e6; }