/*
 * feedback-form.css - shared contact/feedback footer block (card kJe8UEee, r1977-1979).
 *
 * External file on purpose: a strict style-src kills inline <style> the same quiet
 * way it kills inline <script> (UMG-DESIGN-STANDARD defect catalogue #15). Served
 * same-origin from each app's /css/feedback-form.css, a symlink to this file.
 *
 * Design notes, craft floor binding:
 *  - Focus ring in OUTLINE, never box-shadow (defect #14): outline survives any
 *    component that also sets box-shadow.
 *  - One authored moment: the success panel rises 6px with a fade, 240ms ease-out;
 *    prefers-reduced-motion swaps it for a plain fade.
 *  - Both themes are two colour decisions: light and dark are separate blocks.
 *  - Browser surfaces themed: ::selection and caret-color follow the accent.
 *  - Body measure under 75ch; controls 44px tall; inputs 16px so iOS never zooms.
 */

/*
 * THE PALETTE SEAM (r2044, Tab, Oct 15 2026). The colour variables below are the
 * NEUTRAL defaults, and every app that mounts this block is expected to override
 * them from its own stylesheet with a selector at least as specific as
 * .umgf-block. The block was written with its own palette (a teal accent, a cool
 * blue-black ink, pure white fields), and inside a footer whose own palette is
 * warm that reads as a different site's colours, which is exactly what Tab saw
 * on ummah.directory. The directory now overrides all six variables; the other
 * apps still do not. Measured own-ink and ground per app, so nobody measures
 * again:
 *
 *   ummah.directory / ummahplaces  ink #1c1b18  soft #4a453b  accent #0f4a26  ground #fbfaf6
 *   ummahart.com      ink rgb(27,24,20)  warm, ground rgb(250,247,241)
 *   ummaharmy.com     ink rgb(27,30,43)  cool, closest to these defaults
 *   ummahpass.io      ink rgb(15,31,23)  green-black, ground rgb(250,248,243)
 *   ummahplaces.com   ink rgb(42,36,28)  DARK footer ground rgb(42,36,28)
 *   ummahsocial.com   ink rgb(15,31,23)  white footer ground
 *   ummah.me          ink rgb(15,31,23)  DARK footer ground rgb(15,31,23)
 *
 * A LIGHT-ONLY app must override with a MORE specific selector than .umgf-block,
 * because the dark-scheme block below redefines these same variables for any
 * visitor whose operating system prefers dark. An app that is light-only and
 * overrides with equal specificity would show a dark form inside a light footer.
 */

.umgf-block {
    --umgf-accent: #0f766e;
    --umgf-accent-strong: #115e59;
    --umgf-ink: #1a1a2e;
    --umgf-ink-soft: #46564d;
    --umgf-line: #9aa79f;
    --umgf-ground: #ffffff;
    --umgf-good-ink: #14532d;
    --umgf-good-ground: #e7f6ec;
    --umgf-good-line: #166534;
    --umgf-bad-ink: #7f1d1d;
    --umgf-bad-ground: #fdecec;
    --umgf-bad-line: #b91c1c;
    max-width: 640px;
    margin: 24px auto 8px; /* r2064: was 40px. The block follows a feed band that
                              already carries its own separation, so 40px stacked
                              into roughly 90px of dead space above the heading. */
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--umgf-ink);
}

@media (prefers-color-scheme: dark) {
    .umgf-block {
        --umgf-accent: #2dd4bf;
        --umgf-accent-strong: #5eead4;
        --umgf-ink: #e8e8ef;
        --umgf-ink-soft: #b9c2bd;
        --umgf-line: #5c6b62;
        --umgf-ground: #20242a;
        --umgf-good-ink: #bbf7d0;
        --umgf-good-ground: #14291b;
        --umgf-good-line: #4ade80;
        --umgf-bad-ink: #fecaca;
        --umgf-bad-ground: #2a1515;
        --umgf-bad-line: #f87171;
    }
}

.umgf-block ::selection { background: var(--umgf-accent); color: var(--umgf-ground); }
.umgf-block textarea, .umgf-block input[type=email] { caret-color: var(--umgf-accent); }

.umgf-block h2 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.umgf-contactline {
    margin: 0 0 18px;
    color: var(--umgf-ink-soft);
}
.umgf-contactline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.umgf-contactline a:hover { color: var(--umgf-ink); }

.umgf-block label { display: block; font-weight: 600; margin: 10px 0 5px; } /* r2064: was 14px 0 6px */
.umgf-opt { font-weight: 400; color: var(--umgf-ink-soft); }

.umgf-block textarea,
.umgf-block input[type=email] {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--umgf-line);
    border-radius: 10px;
    background: var(--umgf-ground);
    color: var(--umgf-ink);
}
.umgf-block textarea { min-height: 116px; resize: vertical; } /* r2064: was 132px, a phone-height saving that still holds five lines */

.umgf-block textarea:focus-visible,
.umgf-block input:focus-visible,
.umgf-block button:focus-visible,
.umgf-block a:focus-visible {
    outline: 2px solid var(--umgf-accent);
    outline-offset: 2px;
}

.umgf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.umgf-block button {
    min-height: 44px;
    margin-top: 16px;
    padding: 10px 22px;
    font-size: 16px;
    border: 0;
    border-radius: 10px;
    background: var(--umgf-accent);
    color: #ffffff;
    cursor: pointer;
    transition: transform 100ms ease-out, background-color 150ms ease-out;
}
.umgf-block button:hover { background: var(--umgf-accent-strong); }
.umgf-block button:active { transform: scale(0.97); }
.umgf-block button[disabled] { opacity: 0.65; cursor: default; }

/* r2064: on a phone the button was 156px wide under a 326px field, so the one
   action on the block sat off the fields' left edge and read as an afterthought.
   It now matches the field width below 640px and keeps its own width above it,
   where a 608px-wide button would be a heavy bar. Measured at 390: 156 -> 326. */
@media (max-width: 639px) {
    .umgf-block button[type="submit"] { width: 100%; }
}

.umgf-note { margin-top: 8px; font-size: 14px; color: var(--umgf-ink-soft); } /* r2064: was 10px */
.umgf-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.umgf-block .umgf-panel {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
}
.umgf-success { background: var(--umgf-good-ground); border: 1px solid var(--umgf-good-line); color: var(--umgf-good-ink); }
.umgf-error { background: var(--umgf-bad-ground); border: 1px solid var(--umgf-bad-line); color: var(--umgf-bad-ink); }

/* [hidden] must beat any author display rule (defect #1). */
.umgf-block [hidden] { display: none !important; }

/* The one authored moment: the panels rise into place. */
.umgf-panel:not([hidden]) {
    animation: umgf-rise 240ms cubic-bezier(0, 0, 0.2, 1);
}
@keyframes umgf-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .umgf-panel:not([hidden]) { animation: umgf-fade 200ms ease; }
    .umgf-block button { transition: none; }
    .umgf-block button:active { transform: none; }
    @keyframes umgf-fade { from { opacity: 0; } to { opacity: 1; } }
}

.umgf-legal {
    margin: 18px 0 0; /* r2064: was 26px */
    padding-top: 14px;
    border-top: 1px solid var(--umgf-line);
    font-size: 13px;
    color: var(--umgf-ink-soft);
}
.umgf-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* The space after a CSS hex escape ends the escape and is swallowed, so " \00b7 " rendered "LLC ·Privacy".
   \00b7 then \0020 keeps a real space on both sides (review seats, Oct 15 2026). */
.umgf-legal span + span::before { content: " \00b7\0020"; }