/* Uma folha de correspondência e um apoio curto para escrever. */
body[data-area="sugestoes"] { --area-color: var(--play-coral); }
.suggestions-page { --suggestion-accent: var(--play-coral, #e9a28d); max-width: 1180px; margin-inline: auto; }
.suggestions-heading { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin: .4rem 0 2rem; }
.suggestions-heading h1 { max-width: 20ch; margin: 0 0 .7rem; font-size: clamp(2rem, 3.1vw, 2.8rem); letter-spacing: -.04em; }
.suggestions-heading p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.suggestions-envelope { flex: 0 0 auto; display: grid; justify-items: center; gap: .15rem; width: 120px; color: var(--suggestion-accent); transform: rotate(6deg); }
.suggestions-envelope svg { display: block; width: 100px; height: 80px; stroke-width: 1; }
.suggestions-envelope span { font-size: .71rem; font-weight: 650; }
.suggestions-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); align-items: start; gap: clamp(1.5rem, 3vw, 2.6rem); }
.suggestion-sheet { min-width: 0; padding: clamp(1.2rem, 2.5vw, 2rem); border: 1px solid var(--line); border-top: 4px solid var(--suggestion-accent); border-radius: 7px 7px 15px 15px; background: var(--panel); box-shadow: 0 6px 0 var(--play-floor, #0002); }
.suggestion-sheet-heading { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.suggestion-sheet-heading h2 { margin: 0; font-size: .94rem; font-weight: 650; letter-spacing: 0; }
.suggestion-private { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .72rem; }
.suggestion-private svg { width: 13px; height: 13px; }
.suggestion-kinds { min-width: 0; padding: 0; margin: 0 0 1.5rem; border: 0; }
.suggestion-kinds legend { padding: 0; margin-bottom: .65rem; color: var(--text); font-size: .88rem; font-weight: 600; }
.suggestion-kinds > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.suggestion-kinds button { min-height: 40px; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--muted); font-size: .75rem; line-height: 1.4; text-align: left; }
.suggestion-kinds button[aria-pressed="true"] { color: var(--text); border-color: var(--suggestion-accent); background: color-mix(in srgb, var(--suggestion-accent) 9%, var(--panel)); box-shadow: inset 0 -2px var(--suggestion-accent); }
.suggestion-kinds button:hover:not(:disabled) { color: var(--text); border-color: var(--suggestion-accent); }
.suggestion-field { margin-top: 1.4rem; min-width: 0; }
.suggestion-field label { display: block; margin: 0 0 .45rem; color: var(--text); font-size: .88rem; font-weight: 600; }
.suggestion-field input, .suggestion-field textarea { box-sizing: border-box; width: 100%; margin: 0; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: .93rem; line-height: 1.6; padding: .7rem .8rem; border-radius: 8px; }
.suggestion-field textarea { display: block; min-height: 210px; resize: vertical; }
.suggestion-field input::placeholder, .suggestion-field textarea::placeholder { color: var(--muted); opacity: .85; }
.suggestion-field-help { margin: .4rem 0 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.suggestion-comment-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .2rem .7rem; }
.suggestion-count { color: var(--muted); font-size: .69rem; white-space: nowrap; }
.suggestion-count[data-full="true"] { color: var(--suggestion-accent); font-weight: 650; }
.suggestion-consent { display: flex; align-items: flex-start; gap: .65rem; margin: 1.2rem 0 0; color: var(--muted); font-size: .77rem; line-height: 1.6; }
.suggestion-consent > input { flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; padding: 0; margin: .2rem 0 0; accent-color: var(--suggestion-accent); }
.suggestion-consent a, .suggestion-writing-guide a, .suggestion-success a { color: var(--suggestion-accent); text-decoration: underline; text-underline-offset: .2em; }
.suggestion-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.suggestion-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 1.5rem; }
.suggestion-send-row > p { flex: 1 1 140px; max-width: 29ch; margin: 0; color: var(--muted); font-size: .71rem; line-height: 1.5; }
.suggestion-send.primary { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .65rem 1rem; border-color: var(--suggestion-accent); background: var(--suggestion-accent); color: var(--bg); font-size: .86rem; }
.suggestion-send.primary:hover:not(:disabled) { background: var(--suggestion-accent); filter: brightness(1.06); }
.suggestion-send svg { width: 18px; height: 18px; transition: transform .15s ease; }
.suggestion-send:hover:not(:disabled) svg { transform: translate(2px, -2px); }
.suggestion-sheet [aria-busy="true"] { cursor: progress; }
.suggestion-status { margin: 1rem 0 0; padding: .8rem; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--bg); font-size: .81rem; line-height: 1.55; overflow-wrap: anywhere; }
.suggestion-status[data-state="error"] { border-color: var(--error); color: var(--error); }
.suggestion-writing-guide { padding-top: 1.3rem; min-width: 0; }
.suggestion-writing-guide h2 { font-size: 1.03rem; font-weight: 650; letter-spacing: -.015em; margin: 0 0 .6rem; }
.suggestion-writing-guide p, .suggestion-writing-guide li { color: var(--muted); font-size: .83rem; line-height: 1.65; }
.suggestion-writing-guide p { margin: 0 0 .7rem; }
.suggestion-writing-guide ul { padding-left: 1.1rem; margin: .75rem 0 0; }
.suggestion-writing-guide li { padding-left: .15rem; margin-block: .4rem; }
.suggestion-writing-guide li::marker { color: var(--suggestion-accent); }
.suggestion-privacy-note { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.suggestion-privacy-note > span { display: block; margin-bottom: .65rem; color: var(--suggestion-accent); }
.suggestion-privacy-note svg { width: 22px; height: 22px; }
.suggestion-privacy-note a { display: inline-block; min-height: 35px; padding-block: .3rem; font-size: .78rem; }
.suggestion-success { min-height: 380px; padding: 2rem .4rem 1rem; }
.suggestion-received { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1.5rem; color: var(--suggestion-accent); border: 2px solid currentColor; border-radius: 50%; transform: rotate(-7deg); }
.suggestion-received svg { width: 30px; height: 30px; }
.suggestion-success h2 { margin: 0 0 .8rem; font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.suggestion-success > p { max-width: 45ch; color: var(--muted); font-size: .92rem; line-height: 1.7; }
.suggestion-success-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.suggestion-success-actions button { border: 1px solid var(--line); color: var(--text); background: transparent; font-size: .83rem; }
.suggestion-success-actions a { display: inline-flex; align-items: center; min-height: 42px; font-size: .82rem; }
.suggestions-page :is(button, input, textarea, a):focus-visible { outline: 2px solid var(--suggestion-accent); outline-offset: 4px; }
.suggestion-success h2:focus { outline: 2px solid var(--suggestion-accent); outline-offset: 6px; border-radius: 3px; }
@media (max-width: 760px) {
  .suggestions-layout { grid-template-columns: 1fr; gap: 1.7rem; }
  .suggestions-heading { gap: 1rem; margin-bottom: 1.5rem; }
  .suggestions-envelope { width: 88px; }
  .suggestions-envelope svg { width: 76px; height: 66px; }
  .suggestion-writing-guide { padding: 0 .2rem; }
  .suggestion-privacy-note { margin-top: 1.2rem; padding-top: 1.2rem; }
}
@media (max-width: 440px) {
  .suggestions-heading { align-items: flex-start; }
  .suggestions-heading h1 { font-size: 1.9rem; }
  .suggestions-heading p { font-size: .89rem; }
  .suggestions-envelope { display: none; }
  .suggestion-sheet { padding: 1.05rem; }
  .suggestion-sheet-heading { align-items: flex-start; flex-direction: column; }
  .suggestion-kinds button { flex: 1 1 130px; font-size: .74rem; }
  .suggestion-comment-heading { display: block; }
  .suggestion-count { display: block; margin: -.1rem 0 .4rem; }
  .suggestion-send-row { display: block; }
  .suggestion-send.primary { width: 100%; }
  .suggestion-send-row > p { max-width: none; margin-top: .7rem; }
  .suggestion-success { min-height: 310px; padding-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .suggestion-send svg { transition: none; } .suggestion-send:hover:not(:disabled) svg { transform: none; } }