/* Perguntas & respostas, from _prototype/perguntas.html. */
.item-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--muted)}
.item-meta span{display:inline-flex;align-items:center;gap:5px}
.item-meta svg{width:14px;height:14px}

/* ---- list ---- */
.qa-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.qa-filters .pill-row{flex:1}
.qa-only{display:flex;gap:8px;align-items:center}
.qa-only select{max-width:230px}
.qa-list{display:grid;gap:12px;margin-top:6px}
.qa-card{padding:18px 20px}
.qa-title{font-size:17px;line-height:1.3;margin:0}
.qa-title a{color:var(--ink);text-decoration:none}
.qa-title a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.qa-card p{margin:6px 0 10px;font-size:14.5px;color:var(--muted);line-height:1.55}
.qa-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qa-count{margin-left:auto;font-size:12.5px;color:var(--faint)}

/* The ask form: a <details>, so it opens without a script. */
.qa-form{padding:0;margin-bottom:18px;box-shadow:none;background:none;border:0}
.qa-form>summary{list-style:none;display:inline-flex;cursor:pointer}
.qa-form>summary::-webkit-details-marker{display:none}
.qa-form[open]>summary{margin-bottom:14px}
.qa-form form{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.qa-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .qa-form .row{grid-template-columns:1fr} }
.qa-form .lbl{margin-bottom:-4px}
.cl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- detail ---- */
.q-title{font-size:clamp(22px,3vw,30px)}
.q-head{padding:24px}
.q-head p{font-size:15.5px;line-height:1.65;margin:12px 0 14px;max-width:70ch}
.qa-h{margin:24px 0 0;font-size:20px}
.answers{margin-top:14px;display:grid;gap:12px}
.ans{padding:20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.ans.is-best{border-color:#BFE8CC;box-shadow:0 4px 16px rgba(30,127,79,.10)}
.ans-who{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:6px;font-size:14px}
.ans-who b{font-weight:600}
.ans-who a{color:var(--ink);text-decoration:none}
.ans-who a:hover{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
.ans-who small{color:var(--faint)}
.ans p{margin:0;font-size:15px;line-height:1.65;color:var(--ink)}
.ans-foot{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ans-foot .btn-wa{margin-left:auto}
.reply{padding:20px;margin-top:18px}
.reply h2{font-size:17px;margin:0 0 10px}
.reply form{display:grid;gap:10px}
.reply-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---- aside ---- */
.rules{padding:18px 20px;margin-bottom:14px}
.rules h3{font-size:15px;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.rules h3 svg{width:16px;height:16px;color:var(--petrol)}
.rules ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--muted);line-height:1.55;display:grid;gap:6px}
/* Yellow is geometry, never a surface: a 3px rule on a pale green card. */
.pro-cta{background:var(--petrol-wash);padding:18px 20px;box-shadow:inset 0 3px 0 var(--coral)}
.pro-cta b{font-family:var(--font-display);font-weight:var(--display-weight);font-size:16px;display:block;margin-bottom:5px}
.pro-cta p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.55}
/* Combobox (2026-09-25): a caixa ocupa o lugar do select. */
.qa-only .bcb{flex:0 1 230px;min-width:0}
@media (max-width:560px){ .qa-only{width:100%} .qa-only .bcb{flex:1 1 auto} }