/* ============================================================================
   Valutorio — /support/ (v1)
   Loaded AFTER main.css + compare.css and depends on them: tokens, fonts,
   .wrap, .cmp-article prose measure. Same guardrails as main.css (D-21):
   radius 0, no gradients, the one raised surface is --surface + hairlines.
   ==========================================================================*/

.sup-form { display: grid; gap: .5rem; margin: 2rem 0; }
.sup-form label {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-quiet); margin-top: .8rem;
}
.sup-form input, .sup-form textarea {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 0;
  font: inherit; padding: .6rem .7rem; width: 100%;
}
.sup-form input:focus-visible, .sup-form textarea:focus-visible {
  outline: 2px solid var(--accent-lift); outline-offset: 1px;
  border-color: var(--accent);
}
.sup-form button {
  justify-self: start; margin-top: 1rem; cursor: pointer;
  background: var(--accent); color: #fff; border: 0; border-radius: 0;
  font-family: var(--mono); font-size: .9rem; letter-spacing: .04em;
  padding: .7rem 1.6rem;
}
.sup-form button:hover { background: var(--accent-lift); }
.sup-form button:disabled { opacity: .55; cursor: wait; }

/* Honeypot: visually gone, still in the DOM for bots that render nothing. */
.sup-hp { position: absolute; left: -9999px; width: 1px; height: 1px;
          overflow: hidden; }

.sup-captcha { font-family: var(--mono); font-size: .8rem; color: var(--ink-quiet);
               border-top: 1px solid var(--rule); padding-top: .8rem; margin-top: 1rem; }
.sup-error { color: #F0A8A8; font-size: .9rem; }
.sup-quiet { color: var(--ink-quiet); font-size: .85rem; }
.sup-done { border: 1px solid var(--rule-lift); background: var(--surface);
            padding: 1.2rem 1.4rem; margin: 2rem 0; }

/* Thread view */
.sup-thread { display: grid; gap: 1rem; margin: 1.5rem 0; }
.sup-msg { border: 1px solid var(--rule); background: var(--surface);
           padding: .9rem 1.1rem; }
.sup-msg-support { border-left: 3px solid var(--accent); }
.sup-msg-meta { font-family: var(--mono); font-size: .75rem;
                color: var(--ink-quiet); margin: 0 0 .4rem; }
.sup-msg-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sup-status { font-family: var(--mono); font-size: .8rem; }
.sup-status-open { color: var(--accent-num); }
.sup-status-answered { color: #A8E0B0; }
.sup-status-closed { color: var(--ink-quiet); }