/*
 * 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.
 */

.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: 40px auto 8px;
    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: 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: 132px; resize: vertical; }

.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; }

.umgf-note { margin-top: 10px; font-size: 14px; color: var(--umgf-ink-soft); }
.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: 26px 0 0;
    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; }
.umgf-legal span + span::before { content: " \\00b7 "; }