/* A quiet, editorial home for the daily question. */
.topics-page { --coffee-dark:#38281e; --coffee-medium:#786958; --cream:#f2ece2; --vote-agree:#587662; --vote-disagree:#a45f48; background:#faf8f2; color:#38281e; }
.topics-page button,.topics-page input,.topics-page textarea { font:inherit; }
.topics-page .top-nav { background:#faf8f2ed; border-bottom:1px solid #ded8cd; }
.pick-intro { max-width:1000px; margin:0 auto; padding:44px 24px 30px; }
.pick-eyebrow { color:#b2643c; font-size:10px; font-weight:700; letter-spacing:2px; }
.pick-intro h1 { font-size:clamp(27px,4vw,40px); letter-spacing:-1.5px; margin:9px 0; line-height:1.4; }
.pick-intro h1 span { color:#db7040; }
.pick-intro>p:last-child { color:#786958; font-size:14px; }
.topics-page .container { max-width:1000px; padding:0 24px 32px; }
.topics-page .opinion-section { padding:30px; border:1px solid #e2d8ca; border-radius:16px; background:#fffdf8; box-shadow:0 8px 30px #38281e04; }
.topics-page #opinionSection { background:radial-gradient(ellipse at 95% 0%,#eed5b444,transparent 50%),linear-gradient(120deg,#ffffffbf,#fffaf2b3); }
@supports (backdrop-filter:blur(12px)) { .topics-page #opinionSection { backdrop-filter:blur(12px); } }
.topics-page .opinion-section h2 { font-size:21px; letter-spacing:-.7px; margin:0 0 22px; }
.topics-page .topic-display { display:grid; grid-template-columns:minmax(0,1fr) 160px; column-gap:24px; text-align:left; padding:0 0 24px; border:0; border-bottom:1px solid #e4dacd; border-radius:0; background:none; }
.topics-page .topic-label { grid-column:1; font-size:12px; margin:0 0 8px; align-self:end; }
.topics-page .current-topic { grid-column:1; grid-row:2; font-size:clamp(20px,2.5vw,27px); line-height:1.55; letter-spacing:-.6px; align-self:start; }
.topics-page .topic-image { grid-column:2; grid-row:1 / 3; width:160px; height:140px; margin:0; border-radius:12px; box-shadow:none; }
.vote-guide { text-align:center; font-size:12px; color:#786958; margin:20px 0 14px; }
.vote-guide span { padding:0 8px; color:#bca68e; }
/* Compact paired choices: color appears only on the selected option. */
.topics-page .vote-buttons { display:flex; flex-direction:row; align-self:center; width:min(100%,360px); gap:4px; padding:5px; margin:0; border:1px solid #e5ddd1; border-radius:999px; background:#eee8de99; box-shadow:inset 0 1px 2px #38281e04; }
.topics-page .vote-btn { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-width:0; min-height:48px; max-width:none; padding:12px 18px; border:1px solid transparent; border-radius:999px; background:transparent; color:#817568; font-size:14px; font-weight:500; box-shadow:none; transform:none; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.topics-page .vote-check { width:0; height:18px; opacity:0; transition:width .2s ease,opacity .2s ease; }
.topics-page .vote-btn.selected .vote-check { width:18px; opacity:1; }
.topics-page .vote-btn.agree.selected { background:#fffefb; border-color:#dce4d8; color:#47644f; box-shadow:0 2px 6px #38281e08; }
.topics-page .vote-btn.disagree.selected { background:#fffaf5; border-color:#ebdacf; color:#965b43; box-shadow:0 2px 6px #38281e08; }
.topics-page .vote-btn:disabled { cursor:default; opacity:.5; transform:none; }
.topics-page .vote-btn.selected:disabled { opacity:1; }
@media(hover:hover) {
 .topics-page .vote-btn.agree:not(.selected):not(:disabled):hover { background:#ffffff94; color:#47644f; border-color:transparent; transform:none; }
 .topics-page .vote-btn.disagree:not(.selected):not(:disabled):hover { background:#ffffff94; color:#965b43; border-color:transparent; transform:none; }
}
.topics-page .opinion-write-area { width:100%; max-width:620px; min-width:0; margin:24px auto 0; padding-right:6px; padding-bottom:6px; }
.topics-page .opinion-write-area label { font-size:13px; font-weight:700; margin-bottom:-12px; }
.topics-page label small { color:#786958; font-weight:400; margin-left:8px; }
.topics-page .nickname-input,.topics-page #opinionText { background:#fffcf7; border:1px solid #d9cfc1; border-radius:8px; width:100%; }
.topics-page .submit-btn { background:#38281e; border-radius:8px; box-shadow:none; }
.topics-page .submit-btn:disabled { opacity:.6; cursor:wait; }
.vote-status { text-align:center; font-size:13px; color:#66533f; margin:18px 0; }
.vote-status:empty { display:none; }
.vote-empty { text-align:center; padding:24px 16px; background:#f4efe5; border-radius:10px; font-size:14px; }
.vote-empty p { font-size:12px; color:#786958; margin-top:4px; }
.topics-page .vote-stats { margin:22px 0 0; }
.topics-page .vote-bar { height:10px; border-radius:20px; }
.topics-page .vote-labels { font-size:12px; }
.topics-page .opinions-toggle-btn { border:1px solid #ded8cd; font-size:14px; margin-top:24px; background:transparent; }
.topics-page .opinions-toggle-btn>div { display:flex; align-items:center; gap:12px; }
.topics-page .opinions-collapsible.show { max-height:none; }
.topics-page .opinion-item { box-shadow:none; border:1px solid #e5ddd2; border-radius:10px; }
.topics-page .vote-badge.agree { background:#e6eee6; color:var(--vote-agree); }
.topics-page .vote-badge.disagree { background:#f6e7de; color:var(--vote-disagree); }
.history-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.topics-page .history-heading h2 { margin:0; }
.latest-topic-link { background:none; border:0; color:#786958; text-decoration:underline; text-underline-offset:4px; cursor:pointer; font-size:12px!important; }
.topics-page .topic-history-item { width:100%; text-align:left; border:1px solid #e1d8cb; border-radius:10px; background:transparent; }
.topics-page :is(button,a,input,textarea):focus-visible { outline:2px solid #b2643c; outline-offset:4px; }
@media(prefers-reduced-motion:no-preference) {
 .topics-page .opinion-write-area { animation:pick-reveal .25s ease; }
 @keyframes pick-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
}
@media(max-width:600px) {
 .pick-intro { padding:30px 18px 24px; }
 .pick-intro>p:last-child { font-size:12px; }
 .topics-page .container { padding:0 14px 24px; }
 .topics-page .opinion-section { padding:22px 16px; margin-bottom:24px; }
 .topics-page .topic-display { grid-template-columns:minmax(0,1fr) 76px; column-gap:12px; }
 .topics-page .topic-image { width:76px; height:84px; padding:4px!important; }
 .topics-page .current-topic { font-size:20px; }
 .topics-page .vote-btn { padding:11px 14px; font-size:14px; }
 .vote-guide { font-size:11px; }
 .vote-guide span { padding:0 4px; }
}
@media(prefers-reduced-motion:reduce) {
 .topics-page *, .topics-page *::before, .topics-page *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
.topics-page .opinion-form { gap:12px; margin-bottom:20px; }
.topics-page .vote-buttons { flex-direction:row; margin-bottom:0; }
.topics-page .vote-guide { margin:0 0 8px; }