/* Contact form + modal, for the app pages (js/contact.js builds the markup).
 *
 * Marketing pages carry their own copy of these rules inline (contact.html)
 * because they don't load styles.css and use the landing palette. This file is
 * the in-app half: same class names, but drawn with the app's design tokens so
 * the dialog follows dark mode like everything else. Using
 * --color-bg-secondary rather than a hard-coded #fff is deliberate — see the
 * note in ask.html about --color-bg-card, which never existed and rendered
 * every card white-on-white in dark mode.
 *
 * Every var() carries a light-mode fallback because account.html is
 * self-styled — it has its own inline <style> and never loads
 * styles.css, so none of these tokens are defined there. Without the
 * fallbacks the dialog would render with inherited/unset colors on the
 * one page most likely to open it.
 */

.nc-contact-field { margin-bottom: 1rem; }

.nc-contact-field label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--color-text, #111827);
}

.nc-contact-field input,
.nc-contact-field select,
.nc-contact-field textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--color-text, #111827);
    background: var(--color-bg-secondary, #ffffff);
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: var(--border-radius-lg, 0.75rem);
}

.nc-contact-field textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.55;
}

.nc-contact-field input:focus,
.nc-contact-field select:focus,
.nc-contact-field textarea:focus {
    outline: none;
    border-color: var(--color-primary, #0d9488);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.nc-contact-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted, #6b7280);
    margin: 0.375rem 0 0;
}

.nc-contact-submit {
    display: inline-block;
    width: auto;  /* same defence: host pages set button { width: 100% } */
    padding: 0.7rem 1.5rem;
    border: 0;
    border-radius: var(--border-radius-lg, 0.75rem);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: var(--color-primary, #0d9488);
    color: #fff;
}

.nc-contact-submit:disabled { opacity: 0.6; cursor: default; }

.nc-contact-status { margin: 0.875rem 0 0; font-size: 0.9rem; min-height: 1px; }
.nc-contact-status.is-ok { color: var(--color-primary-dark, #0f766e); font-weight: 600; }
.nc-contact-status.is-error { color: #dc2626; font-weight: 600; }
.nc-contact-status.is-pending { color: var(--color-text-muted, #6b7280); }

.nc-contact-fallback {
    font-size: 0.825rem;
    color: var(--color-text-muted, #6b7280);
    margin: 0.875rem 0 0;
}

/* styles.css sets no global `a` colour, so without this the support address
   falls back to the browser default (#0000EE) — effectively unreadable on the
   dark dialog, which is exactly where the fallback matters most. */
.nc-contact-fallback a,
.nc-contact-intro a {
    color: var(--color-primary, #0d9488);
}

.nc-contact-turnstile:not(:empty) { margin-bottom: 1rem; }

/* Honeypot. Off-screen rather than display:none — bots that skip hidden
   inputs still fill this one in, which is the entire point of it. */
.nc-contact-hp-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- modal ---------- */
.nc-contact-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.nc-contact-dialog {
    background: var(--color-bg-secondary, #ffffff);
    color: var(--color-text, #111827);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--border-radius-lg, 0.75rem);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 33rem;
    margin: auto;
    padding: 1.25rem 1.5rem 1.5rem;
}

.nc-contact-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.nc-contact-dialog-head h2 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-text, #111827);
    flex: 1 1 auto;
    min-width: 0;
}

/* width/padding pinned explicitly: the dialog mounts into self-styled pages
   whose element selectors leak in — billing.html's global
   ``button { width: 100% }`` turned this × into a full-width bar and crushed
   the title to min-content. Class specificity already wins for the
   properties declared here, but a property NOT declared here is a property
   the host page decides — so every layout-affecting one must be. */
.nc-contact-close {
    flex: none;
    width: auto;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    padding: 0 0.25rem;
}

.nc-contact-close:hover { color: var(--color-text, #111827); }

.nc-contact-intro {
    margin: 0.5rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary, #4b5563);
}

@media (max-width: 480px) {
    .nc-contact-overlay { padding: 0.75rem 0.5rem; }
    .nc-contact-dialog { padding: 1rem 1rem 1.25rem; }
}