/* The Suggestion box page (js/views/suggest.js). Solid colours only, like the rest of the site. Everything is scoped to .sg. */
.sg { --sg-ink: #191814; --sg-forest: #25493D; --sg-lime: #D4F65B; }
.sg .sg-h { margin: 0 0 12px; font: 700 12px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.sg-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 26px; padding: 24px 28px; background: var(--paper); color: var(--paper-ink); border: var(--bw) solid var(--sg-ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--lime-shadow); }
.sg-card .sg-h { color: var(--sg-forest); }
.sg-art { line-height: 0; }
.sg-form { min-width: 0; }
.sg-label { display: block; margin: 0 0 8px; font-weight: 700; }
.sg-card .sg-input { width: 100%; min-height: 120px; resize: vertical; font: 500 16px/1.45 var(--f-body); background: #fff; color: #10140A; border-color: var(--sg-ink); } .sg-card .sg-input::placeholder { color: #6A5E49; opacity: 1; } .sg-card .sg-input:disabled { opacity: .6; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.sg-count { font-size: 13px; } .sg-card .sg-count { color: var(--paper-ink); opacity: .7; }
.sg-row .btn { min-height: 46px; justify-content: center; }
.sg-card .btn-primary { background: var(--sg-lime); color: #10140A; border-color: var(--sg-ink); box-shadow: 4px 4px 0 var(--lime-shadow); }
.sg-card :focus-visible { outline: 3px solid var(--sg-ink); outline-offset: 3px; }
.sg-thanks { margin: 12px 0 0; padding: 10px 14px; background: #DDE9B0; border: 2px solid var(--sg-ink); border-radius: 12px; font-weight: 700; color: #10140A; overflow-wrap: anywhere; }
.sg-prize { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 20px; text-align: center; border-left: 2px dashed var(--paper-line); }
.sg-amt { font: 800 clamp(44px, 6vw, 70px) var(--f-display); letter-spacing: -.06em; line-height: .9; }
.sg-prize span { font-size: 15px; line-height: 1.3; }
.sg-sec { margin-top: 30px; }
.sg-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sg-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; background: var(--card); border: var(--bw) solid var(--line-soft); border-radius: 14px; min-width: 0; }
.sg-item.liked { border-color: var(--sg-lime); }
.sg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sg-state { padding: 4px 12px; border: 2px solid var(--line); border-radius: 999px; font: 700 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sg-state.liked { border-color: var(--sg-lime); color: var(--sg-lime); } .sg-state.sent { color: var(--text-2); }
.sg-when { font-size: 13px; }
.sg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.sg-earned { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sg-earn { font: 700 13px var(--f-mono); color: var(--text-2); overflow-wrap: anywhere; } .sg-earn.more { color: var(--sg-lime); }
.sg-empty { padding: 20px 22px; background: var(--card); border: var(--bw) dashed var(--line-soft); border-radius: 14px; } .sg-empty p { margin: 0; color: var(--text-2); }
@media (max-width: 1000px) { .sg-card { grid-template-columns: minmax(0, 1fr) auto; } .sg-art { display: none; } }
@media (max-width: 640px) {
  .sg-card { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .sg-prize { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 0 0; text-align: left; border-left: 0; border-top: 2px dashed var(--paper-line); }
}
@media (max-width: 480px) { .sg-row .btn { flex: 1 1 100%; } }