/* Contact us reuses the problem-report panel/field/button styling so the three
   System pages (report a problem, suggest an idea, contact us) stay visually
   identical; only the accent colour and the two notes below are specific here. */
@import url(report-problem.css);

/* A message to the team is not an incident report, so the submit button uses the
   brand gradient instead of the danger red the problem report carries. */
.contact-us-page .problem-report-btn-primary { background: var(--gradient-primary); }

/* Matches .suggest-idea-counter — the shared char-counter component drops its
   text into the [data-counter-for] div already in the markup. */
.contact-us-counter {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    align-self: flex-end;
}

.contact-us-counter.is-over { color: #fecaca; }

.contact-us-note {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    gap: 10px;
    display: flex;
}

.contact-us-note a {
    color: var(--color-gold);
    text-decoration: none;
    font-weight: 600;
}

.contact-us-note a:hover { text-decoration: underline; }