/* ==========================================================================
   Atlas of Wales — shared feedback widget
   Self-contained styling for the floating trigger + feedback drawer.
   Namespace: `atlas-feedback` (classes, ids, storage keys, data-attrs).
   Tokens are baked here (`--afb-*`) because index.html and location pages do
   not share landing.html's :root palette — the widget must not depend on any
   page's own tokens. Palette mirrors the Atlas .wm-field-sheet surface.
   ========================================================================== */

.atlas-feedback {
    --afb-ink: #050c07;
    --afb-forest: #0d1e13;
    --afb-forest-2: #07100a;
    --afb-gold: #d8bd85;
    --afb-gold-bright: #efce92;
    --afb-amber: #d9823b;
    --afb-cream: #f4ead7;
    --afb-cream-soft: rgba(248, 240, 220, 0.86);
    --afb-cream-help: rgba(248, 240, 220, 0.82);   /* privacy/helper text — AA readable */
    --afb-cream-place: rgba(248, 240, 220, 0.72);  /* select placeholder — readable, not disabled-grey */
    --afb-cream-faint: rgba(248, 240, 220, 0.66);  /* supplementary glyphs (minimise) */
    --afb-border: rgba(218, 176, 95, 0.22);
    --afb-border-strong: rgba(224, 194, 122, 0.5);
    --afb-serif: Georgia, "Times New Roman", serif;
    --afb-sans: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    /* Sits above the map's own UI (index.html tops out at z-index 44). */
    --afb-z-trigger: 900;
    --afb-z-overlay: 950;
}

/* ---- Floating trigger -------------------------------------------------- */

/* Always the compact round icon (never the wider labelled pill this used to
   be). Location pages pack practical-brief grids, safety lists and accordion
   controls right out to the page's own .wrap gutter, and at in-between
   desktop widths (~1280px) that gutter shrinks below what a labelled pill
   needs to clear it - a fixed corner button that size WILL eventually sit on
   top of real text or a summary toggle at some scroll position. A 46px icon
   with an accessible name (no visible label to collide with) fits inside the
   gutter at every breakpoint this site supports, closed or open, still opens
   the same dialog. */
.atlas-feedback-trigger {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    z-index: var(--afb-z-trigger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 46px;
    height: 46px;
    border: 1px solid var(--afb-border);
    border-radius: 50%;
    background:
        linear-gradient(170deg, rgba(13, 30, 19, 0.94), rgba(5, 12, 7, 0.9));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(218, 176, 95, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--afb-gold-bright);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.atlas-feedback-trigger:hover {
    background: linear-gradient(170deg, rgba(20, 42, 28, 0.96), rgba(8, 18, 11, 0.92));
    border-color: var(--afb-border-strong);
    transform: translateY(-1px);
}

.atlas-feedback-trigger:focus-visible {
    outline: 2px solid var(--afb-gold-bright);
    outline-offset: 3px;
}

.atlas-feedback-trigger__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: block;
}

/* Visually hidden but present in the accessible name/tab order — the icon
   alone plus the button's aria-label carries the same meaning. */
.atlas-feedback-trigger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hide the trigger while the drawer is open (drawer has its own close). */
.atlas-feedback.is-open .atlas-feedback-trigger {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* ---- Page-context positioning ---------------------------------------- */

/* Location pages centre their content in `.wrap { width: min(1180px, 100%) }`.
   That leaves a comfortable side gutter at wide desktop widths (~123px at
   1440px) but only ~40px in the narrow-desktop/tablet band, too little for a
   46px corner button plus its offset to clear text that runs to the column
   edge (an accordion <summary>, a stat grid). Shrinking the trigger there
   keeps its footprint inside that gutter at every width down to full mobile,
   where `.wrap` itself goes edge-to-edge and single-column pages already
   expect a small floating control in the corner. */
@media (min-width: 641px) and (max-width: 1400px) {
    .atlas-feedback-trigger {
        width: 30px;
        height: 30px;
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
    .atlas-feedback-trigger .atlas-feedback-trigger__icon {
        width: 15px;
        height: 15px;
    }
}

/* Map page: bottom-right holds the map-key + attribution, top-right holds the
   zoom control. Lift the trigger clear of the map-key toggle (bottom ~30px,
   ~40px tall) so both stay reachable. */
.atlas-feedback--map .atlas-feedback-trigger {
    bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 84px));
}

@media (max-width: 768px) {
    /* Mobile map: the discovery bottom sheet + raised attribution own the
       bottom edge; map-key sits top-right. Keep the trigger clear of the sheet
       peek and above the raised attribution. */
    .atlas-feedback--map .atlas-feedback-trigger {
        bottom: max(128px, calc(env(safe-area-inset-bottom, 0px) + 128px));
    }
}

/* ---- Overlay + drawer -------------------------------------------------- */

.atlas-feedback-overlay[hidden] { display: none; }  /* wins over the display:flex below */

.atlas-feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--afb-z-overlay);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 24px clamp(20px, 5vw, 90px);
    background: rgba(4, 10, 8, 0.44);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.atlas-feedback.is-open .atlas-feedback-overlay {
    opacity: 1;
    pointer-events: auto;
}

.atlas-feedback-drawer {
    position: relative;
    box-sizing: border-box;
    width: clamp(340px, 40vw, 460px);
    max-width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    overflow: hidden auto;
    padding: 22px 24px 24px;
    border: 1px solid var(--afb-border);
    border-radius: 20px;
    background: linear-gradient(170deg, var(--afb-forest) 0%, var(--afb-forest-2) 60%, var(--afb-ink) 100%);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.62), 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(218, 176, 95, 0.07);
    color: var(--afb-cream-soft);
    font-family: var(--afb-sans);
    transform: translateX(28px) scale(0.985);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    scrollbar-width: thin;
    scrollbar-color: rgba(218, 176, 95, 0.18) transparent;
}
.atlas-feedback.is-open .atlas-feedback-drawer {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.atlas-feedback-drawer__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(248, 240, 220, 0.22);
    background: rgba(5, 12, 7, 0.55);
    color: var(--afb-cream-soft);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.atlas-feedback-drawer__close:hover {
    background: rgba(218, 176, 95, 0.14);
    border-color: var(--afb-border-strong);
}
.atlas-feedback-drawer__close:focus-visible {
    outline: 2px solid var(--afb-gold-bright);
    outline-offset: 2px;
}

.atlas-feedback-drawer__eyebrow {
    margin: 0 0 6px;
    font-family: var(--afb-serif);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--afb-gold);
}
.atlas-feedback-drawer__title {
    margin: 0 34px 5px 0;
    font-family: var(--afb-serif);
    font-size: 23px;
    line-height: 1.15;
    color: var(--afb-cream);
}
.atlas-feedback-drawer__intro {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--afb-cream-soft);
}

/* ---- Form ------------------------------------------------------------- */

.atlas-feedback-field {
    margin: 0 0 13px;
    padding: 0;
    border: 0;
}
.atlas-feedback-field__label {
    display: block;
    padding: 0;
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--afb-cream);
}
.atlas-feedback-field__req {
    color: var(--afb-amber);
    font-weight: 600;
}
.atlas-feedback-field__hint {
    display: block;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--afb-cream-help);
}

/* Contact-permission checkbox. A native control, unchecked by default, with a
   full-width label so the tap target is the sentence rather than the 18px box.
   Deliberately quiet: consent is not a call to action. */
.atlas-feedback-field--check {
    margin-top: -4px;   /* sits close under the email field it qualifies */
}
.atlas-feedback-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.atlas-feedback-check__box {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--afb-gold);
    cursor: pointer;
}
.atlas-feedback-check__label {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--afb-cream);
    cursor: pointer;
}
.atlas-feedback-check__box:focus-visible {
    outline: 2px solid var(--afb-gold-bright);
    outline-offset: 2px;
}
.atlas-feedback-field--check .atlas-feedback-field__hint { margin-left: 28px; }
.atlas-feedback-field--check .atlas-feedback-error { margin-left: 28px; }

/* Native <select> question — the closed control is the styled surface; the
   open option list keeps the OS/browser's own reliable appearance. */
.atlas-feedback-select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 10px 40px 10px 13px;   /* right padding leaves room for the arrow */
    border: 1px solid rgba(218, 176, 95, 0.28);
    border-radius: 12px;
    background-color: rgba(5, 12, 7, 0.5);
    /* inline gold chevron — no external icon; sits in the right padding gutter */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23d8bd85' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--afb-cream);
    font-family: var(--afb-sans);
    font-size: 14px;
    line-height: 1.4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Placeholder state (required + no value = :invalid): readable, not disabled-grey. */
.atlas-feedback-select:invalid { color: var(--afb-cream-place); }
.atlas-feedback-select:focus {
    outline: none;
    border-color: var(--afb-border-strong);
    box-shadow: 0 0 0 1px rgba(224, 194, 122, 0.28);
}
.atlas-feedback-select:focus-visible {
    outline: 2px solid var(--afb-gold-bright);
    outline-offset: 2px;
}
/* The open native list is OS-rendered; force legible colours where the UA honours them. */
.atlas-feedback-select option { color: #10120c; background-color: #f4ead7; }

.atlas-feedback-input,
.atlas-feedback-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(218, 176, 95, 0.24);
    border-radius: 12px;
    background: rgba(5, 12, 7, 0.5);
    color: var(--afb-cream);
    font-family: var(--afb-sans);
    font-size: 14px;
    line-height: 1.45;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.atlas-feedback-textarea {
    min-height: 68px;    /* ~3 comfortable lines; grows/scrolls normally */
    max-height: 220px;
    resize: vertical;
}
.atlas-feedback-input::placeholder,
.atlas-feedback-textarea::placeholder { color: rgba(248, 240, 220, 0.52); }
.atlas-feedback-input:focus,
.atlas-feedback-textarea:focus {
    outline: none;
    border-color: var(--afb-border-strong);
    box-shadow: 0 0 0 1px rgba(224, 194, 122, 0.28);
}

/* Conditional "Something else" field — a compact subordinate field tucked
   directly under its select. No card/border wrapper; just a small reveal gap. */
.atlas-feedback-conditional {
    margin-top: 8px;
}
.atlas-feedback-conditional[hidden] { display: none; }   /* keeps it out of tab order + AT */
.atlas-feedback-conditional__label {
    margin-bottom: 5px;
    font-size: 12.5px;
    font-weight: 600;
}
.atlas-feedback-conditional .atlas-feedback-field__hint {
    margin-top: 5px;
}
/* Subtle reveal — only when motion is welcome; instant under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .atlas-feedback-conditional:not([hidden]) {
        animation: atlas-feedback-reveal 0.22s ease;
    }
}
@keyframes atlas-feedback-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Honeypot — hidden from everyone, incl. keyboard + AT. */
.atlas-feedback-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Inline field error. */
.atlas-feedback-error {
    display: none;
    margin: 7px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #f0a86a;
}
.atlas-feedback-field.has-error .atlas-feedback-error { display: block; }
.atlas-feedback-field.has-error .atlas-feedback-select,
.atlas-feedback-field.has-error .atlas-feedback-input,
.atlas-feedback-field.has-error .atlas-feedback-textarea {
    border-color: #d9823b;
}

/* ---- Actions ---------------------------------------------------------- */

.atlas-feedback-actions {
    margin-top: 16px;
}
.atlas-feedback-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 18px;
    min-height: 46px;
    border: 1px solid var(--afb-gold);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(216, 189, 133, 0.96), rgba(198, 160, 96, 0.96));
    color: #1a1206;
    font-family: var(--afb-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: filter 0.16s ease, opacity 0.16s ease;
}
.atlas-feedback-submit:hover { filter: brightness(1.06); }
.atlas-feedback-submit:focus-visible {
    outline: 2px solid var(--afb-gold-bright);
    outline-offset: 3px;
}
.atlas-feedback-submit[disabled] {
    opacity: 0.75;
    cursor: progress;
}
.atlas-feedback-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(26, 18, 6, 0.35);
    border-top-color: #1a1206;
    border-radius: 50%;
    animation: atlas-feedback-spin 0.7s linear infinite;
}
.atlas-feedback-submit.is-sending .atlas-feedback-spinner { display: inline-block; }
@keyframes atlas-feedback-spin { to { transform: rotate(360deg); } }

/* Form-level error banner (submit failure). */
.atlas-feedback-formerror {
    display: none;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(217, 130, 59, 0.5);
    border-radius: 12px;
    background: rgba(217, 130, 59, 0.12);
    color: #f2c79c;
    font-size: 13px;
    line-height: 1.45;
}
.atlas-feedback-formerror.is-visible { display: block; }

/* ---- Privacy choices (map variant only) --------------------------------
   The map page has no footer, so this drawer carries the one "Privacy choices"
   entry for it. Quiet by design: a hairline and a text link under the form, not
   a second call to action competing with "Send feedback". Rendered only when
   the widget is on the map page, so no other page gets a duplicate of the
   control its own footer already has. */

.atlas-feedback-drawer__privacy {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(250, 241, 218, 0.1);
}

/* Success replaces the form, so the privacy line goes with it. */
.atlas-feedback.is-success .atlas-feedback-drawer__privacy { display: none; }

.atlas-feedback-drawer__privacy .atlas-privacy-choices {
    min-height: 44px;
    color: rgba(250, 241, 218, 0.5);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.atlas-feedback-drawer__privacy .atlas-privacy-choices:hover {
    color: rgba(250, 241, 218, 0.82);
}

/* ---- Success ---------------------------------------------------------- */

.atlas-feedback-success {
    display: none;
    text-align: left;
}
.atlas-feedback-success.is-visible { display: block; }
.atlas-feedback-success__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 50%;
    border: 1px solid var(--afb-gold);
    color: var(--afb-gold-bright);
    background: rgba(218, 176, 95, 0.12);
}
.atlas-feedback-success__title {
    margin: 0 0 8px;
    font-family: var(--afb-serif);
    font-size: 22px;
    color: var(--afb-cream);
}
.atlas-feedback-success__body {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--afb-cream-soft);
}
.atlas-feedback-success__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    min-height: 44px;
    border: 1px solid var(--afb-gold);
    border-radius: 12px;
    background: rgba(218, 176, 95, 0.16);
    color: var(--afb-cream);
    font-family: var(--afb-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.atlas-feedback-success__continue:hover { background: rgba(218, 176, 95, 0.24); }
.atlas-feedback-success__continue:focus-visible {
    outline: 2px solid var(--afb-gold-bright);
    outline-offset: 3px;
}
.atlas-feedback.is-success .atlas-feedback-form { display: none; }

/* ---- Mobile: bottom sheet -------------------------------------------- */

@media (max-width: 640px) {
    .atlas-feedback-overlay {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }
    .atlas-feedback-drawer {
        width: 100%;
        max-width: none;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 22px 22px 0 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
    }
    .atlas-feedback.is-open .atlas-feedback-drawer {
        transform: translateY(0);
    }
    .atlas-feedback-drawer::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 4px;
        border-radius: 2px;
        background: rgba(248, 240, 220, 0.4);
    }
    .atlas-feedback-drawer { padding-top: 30px; }

    /* Mobile-only: at this width the trigger can sit over a paragraph mid-
       scroll (see feedback-widget.js for the scroll/idle/focus logic that
       toggles this class). It retracts mostly off the right edge - not
       fully off-screen - while the visitor is actively scrolling down, and
       is restored on scroll-up, once scrolling settles, on focus, or when
       the drawer closes. Never applied while the drawer is open - that
       state already hides the trigger via .is-open above, which wins
       regardless of this class. pointer-events:none while retracted so a
       half-visible circle never intercepts a tap meant for the content
       underneath it. */
    .atlas-feedback-trigger.is-scroll-retracted {
        transform: translateX(60%);
        opacity: 0.55;
        pointer-events: none;
    }
}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .atlas-feedback-trigger,
    .atlas-feedback-overlay,
    .atlas-feedback-drawer {
        transition-duration: 0.01ms;
    }
    .atlas-feedback-drawer { transform: none; }
    .atlas-feedback-spinner { animation-duration: 1.4s; }
}