/* Counselling Q&A: the sheet (qa.js) and the server-rendered /q/:id and /community pages. Uses the tokens from app.css. */
#qa { height:min(92dvh, 900px) }
#qa .sh-head { padding-left:8px }
#qa .qa-back[hidden] + h2 { padding-left:12px }
#qa .sh-head h2 { font-size:17px }
#qa .sh-foot:empty, #qa .sh-foot[hidden] { display:none }
.qa-search { margin:10px 0 4px }
.qa-search .input { padding-left:40px }
.qa-sort, .qa-topics { margin-top:8px }
.qa-topics { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-20px; margin-right:-20px; padding:0 20px 2px }
.qa-topics::-webkit-scrollbar { display:none }
.qa-topics .chip { flex:none }
.qa-sort .chip[aria-pressed="true"], .qa-topics .chip[aria-pressed="true"], .qa-filters .chip[aria-current] { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600 }
.qa-seatf { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 0; padding:4px 4px 4px 14px; border-radius:var(--r); background:var(--accent-soft); font-size:14px }
#qa-res { margin-top:14px }
#qa-res .skel + .skel { margin-top:10px }
.qa-list { list-style:none; margin:0; padding:0; overflow:hidden }
.qa-list > li + li { border-top:1px solid var(--line) }
.qa-item { display:flex; flex-direction:column; gap:4px; width:100%; min-height:64px; padding:12px 14px; border:0; background:none; text-align:left; color:inherit; text-decoration:none }
.qa-item:hover { background:var(--bg) }
.qa-item:focus-visible { outline-offset:-2px }
.qa-it-t { font-size:15px; font-weight:550; line-height:1.35 }
.qa-it-m { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.qa-it-n { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--muted) }
.qa-it-n .num { color:var(--ink) }
.qa-more { margin-top:12px }

.qa-tags { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; font-size:13px; color:var(--muted) }
.qa-topic { color:var(--accent); background:var(--accent-soft) }
.qa-title, .qa-q h1 { margin:10px 0 4px; font-size:21px; line-height:1.3; font-weight:600 }
.qa-meta { margin:4px 0 0; font-size:13px; color:var(--muted) }
.qa-text { font-size:15px; overflow-wrap:anywhere }
.qa-text p { margin:10px 0 0 }
.qa-acts { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px }
.qa-vote { display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:64px; padding:0 14px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:600 }
.qa-vote[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.qa-vote:disabled { opacity:.7 }
.qa-rep { color:var(--muted); font-size:14px; padding:0 10px }
.qa-rep:disabled { cursor:default }
.qa-flash { font-size:13px; color:var(--likely) }
.qa-answers h4, .qa-answers h2, .qa-form h4 { margin:24px 0 0; font-size:16px; font-weight:600 }
.qa-ans { padding:12px 0 6px; border-bottom:1px solid var(--line) }
.qa-ans .qa-text p:first-child { margin-top:0 }
.qa-form { margin-top:8px }
.qa-form h4 { margin-bottom:4px }
.qa-rules { margin:8px 0 0; padding:10px 14px; border-radius:var(--r); background:var(--bg); font-size:13.5px; color:var(--muted) }
.qa-form .lbl { margin-top:18px }
.qa-form textarea.input { font:inherit; resize:vertical; min-height:96px; margin-top:10px }
.qa-form .lbl + textarea.input { margin-top:0 }
.qa-count { margin:4px 0 0; font-size:12px; text-align:right }
.qa-tag { margin-top:14px; font-size:14px }
.qa-msg { margin:10px 0; font-size:14px; color:var(--likely) }
.qa-msg:empty { display:none }
.qa-form > .btn { margin-top:12px }
.qa-err p { margin:14px 0 0 }

/* Server-rendered pages */
.qa-top { background:var(--surface); border-bottom:1px solid var(--line) }
.qa-top .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px }
.qa-top .brand { color:var(--ink); text-decoration:none; min-height:44px; display:inline-flex; align-items:center }
.qa-main { padding-top:12px; padding-bottom:64px }
.qa-main > h1 { margin-top:20px; font-size:26px }
.qa-crumb a { display:inline-flex; align-items:center; text-decoration:none }
.qa-main .qa-q { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:6px 16px 12px }
.qa-filters { margin:18px 0 14px; display:grid; gap:8px }
.qa-filters .chip { text-decoration:none; color:var(--ink) }
.qa-filters .chips:last-child { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px }
.qa-filters .chips:last-child .chip { flex:none }
.qa-pager { display:flex; gap:10px; justify-content:center }
.qa-cta { margin-top:32px; padding:16px; display:grid; gap:12px }
.qa-cta p { margin:0 }
.qa-cta .btn { justify-self:start }
.qa-main .empty b { display:block }

.qa-meta { display:flex; align-items:center; gap:8px }
.qa-av { width:28px; height:28px; border-radius:99px; background:#e8ebfa; flex:none }

/* Stories row (Instagram style) and For you / Trending / New tabs */
.qa-stories { list-style:none; display:flex; gap:14px; margin:12px -20px 0; padding:2px 20px 4px; overflow-x:auto; scrollbar-width:none }
.qa-stories::-webkit-scrollbar { display:none }
.qa-story { display:flex; flex-direction:column; align-items:center; gap:6px; width:68px; border:0; background:none; padding:0; color:inherit }
.qa-story .ring { width:64px; height:64px; border-radius:99px; padding:3px; background:conic-gradient(from 200deg, #ffd93d, #f58529, #dd2a7b, #2446c7, #ffd93d); display:grid; place-items:center }
.qa-story.seen .ring { background:#c9c9c2 }
.qa-story .ring > * { width:100%; height:100%; border-radius:99px; border:3px solid var(--surface); background:#e8ebfa; display:grid; place-items:center; object-fit:cover }
.qa-story .ini { font:600 16px var(--mono); color:var(--accent) }
.qa-story .lbl { font-size:11.5px; line-height:1.2; text-align:center; max-width:68px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.qa-tabs { display:flex; border-bottom:1px solid var(--line); margin-top:12px }
.qa-tabs button { flex:1; min-height:44px; border:0; background:none; font-weight:500; color:var(--muted); border-bottom:2px solid transparent }
.qa-tabs button[aria-pressed="true"] { color:var(--ink); font-weight:700; border-bottom-color:var(--ink) }

.qa-joke { margin:18px 0 0; padding:14px; border-radius:14px; background:#fffaf0; border:1.5px solid var(--ink) }
.qa-joke p { display:flex; align-items:flex-end; gap:8px; margin:0 0 8px; font-size:14px; line-height:1.4 }
.qa-joke p:last-child { margin:0 }
.qa-joke p.k { flex-direction:row-reverse }
.qa-joke span { background:#fff; border:1px solid var(--line); border-radius:12px 12px 12px 4px; padding:8px 10px }
.qa-joke p.k span { background:#ffd93d; border-color:var(--ink); border-radius:12px 12px 4px 12px; font-weight:600 }
.qa-joke img { width:32px; height:32px; border-radius:99px; background:#e8ebfa; flex:none }
.qa-story .lbl { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:12px; font-weight:500; color:var(--ink); min-height:2.4em }
.qa-story { width:72px } .qa-story .lbl { max-width:72px }

/* Story viewer */
.sv { position:fixed; inset:0; z-index:10; background:#17181c; color:#fff; display:flex; flex-direction:column; padding:max(10px, env(safe-area-inset-top)) 16px 24px }
.sv-bars { display:flex; gap:4px }
.sv-bars i { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.3); overflow:hidden }
.sv-bars i b { display:block; height:100%; width:0; background:#fff }
.sv-bars i.done b { width:100% }
.sv-bars i.on b { animation:svfill 6s linear forwards }
@keyframes svfill { to { width:100% } }
@media (prefers-reduced-motion: reduce) { .sv-bars i.on b { animation:none; width:100% } }
.sv-head { display:flex; align-items:center; justify-content:space-between; margin-top:12px; position:relative; z-index:2 }
.sv-name { font-weight:700; font-size:15px }
.sv-x { width:44px; height:44px; border:0; background:none; color:#fff; font-size:20px }
.sv-tap { position:absolute; top:80px; bottom:140px; width:35%; border:0; background:none; z-index:1 }
.sv-tap.prev { left:0 } .sv-tap.next { right:0; width:65% }
.sv-body { position:relative; z-index:2; margin:auto 0; display:flex; flex-direction:column; gap:14px; pointer-events:none }
.sv-body a, .sv-body button { pointer-events:auto; align-self:flex-start }
.sv-k { margin:0; font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#ffd93d }
.sv-big { margin:0; font:800 26px/1.15 "Bricolage Grotesque", Geist, sans-serif; letter-spacing:-.02em }
.sv-ex { margin:0; font-size:15px; color:#d6d6d0 }
.sv-src { color:#b9c2ec; font-size:13px }
.sv .qa-joke { color:var(--ink) }