/**
 * Docs feedback widget styles. Theme-agnostic: every value resolves through the
 * exaba-theme design tokens (variables.css), so the widget follows
 * exaba-light / exaba-dark automatically with no per-theme rules.
 *
 * A quiet surface card at the end of the article: labelled pill ratings, a
 * progressively-revealed comment box, and a restrained (outline) send button so
 * the intense accent reads as an accent, not a wall.
 *
 * Text colours come from tokens the theme redeclares per theme (`--text-*`,
 * `--accent-text-on`). `--accent` is not one of them: it sits on `:root` as the same
 * intense yellow for both, so it is only ever a background (behind `--accent-text-on`),
 * a border, or an outline here — never type, which on the light theme's white surface
 * would be yellow on white.
 */
/* Full-width divider separating the article from the feedback block. */
#exaba-docs-feedback {
    display: block;
    margin-top: var(--space-7, 48px);
    padding-top: var(--space-5, 24px);
    border-top: 1px solid var(--border, #2a4972);
}

.exaba-feedback {
    padding: var(--space-4, 16px) var(--space-5, 24px);
    border: 1px solid var(--border, #2a4972);
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-surface, transparent);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    font-family: var(--font-sans, sans-serif);
}

/* Prompt and rating pills share one row, wrapping on narrow viewports. */
.exaba-feedback__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-4, 16px);
}

.exaba-feedback__prompt {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-body, #e8ecf1);
}

.exaba-feedback__buttons {
    display: flex;
    gap: var(--space-2, 8px);
}

/* Labelled pills: comfortable target, subtle until hovered/chosen. */
.exaba-feedback__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    cursor: pointer;
    border: 1px solid var(--border-strong, #3a5a85);
    border-radius: 999px;
    background: transparent;
    transition:
        border-color var(--transition, 120ms ease-out),
        background-color var(--transition, 120ms ease-out),
        opacity var(--transition, 120ms ease-out);
}

/* Hover darkens the edge rather than accenting it: `--bg-surface-hover` is a near
   neighbour of the light theme's white card, so the border carries the state there,
   and `--accent` cannot — at 1.07:1 on white it would erase the edge the resting
   `--border-strong` already draws. */
.exaba-feedback__btn:hover {
    background: var(--bg-surface-hover, rgba(255, 255, 255, 0.05));
    border-color: var(--text-muted, #a8b5c7);
}

.exaba-feedback__btn:focus-visible {
    outline: 2px solid var(--accent, #ff0);
    outline-offset: 2px;
}

.exaba-feedback__btn.is-selected {
    border-color: var(--accent, #ff0);
    background: color-mix(in srgb, var(--accent, #ff0) 14%, transparent);
    font-weight: 600;
}

/* Once a choice is made, fade the road not taken. */
.exaba-feedback__buttons.has-choice .exaba-feedback__btn:not(.is-selected) {
    opacity: 0.55;
}

/* Pointing at the faded option restores it, so changing a rating never means
   aiming at something that still looks disabled. Matches the selector above class
   for class, since a shorter one loses to it. */
.exaba-feedback__buttons.has-choice .exaba-feedback__btn:not(.is-selected):hover {
    opacity: 1;
}

/* Follow-up (revealed after a rating): comment box + send. The `:not([hidden])`
   guard is load-bearing: JS toggles the `hidden` attribute to gate the box behind
   a rating, but an author-origin `display` beats the UA `[hidden] { display: none }`
   rule, so an unguarded `display: flex` would leave the box visible before any
   rating. Scoping it to `:not([hidden])` lets the attribute actually hide it. */
.exaba-feedback__followup:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    width: 100%;
}

.exaba-feedback__comment {
    width: 100%;
    min-height: 3.25rem;
    resize: vertical;
    padding: var(--space-3, 12px);
    border: 1px solid var(--border, #2a4972);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-page, transparent);
    color: var(--text-body, inherit);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.exaba-feedback__comment::placeholder {
    color: var(--text-muted, #a8b5c7);
}

.exaba-feedback__comment:focus-visible {
    outline: none;
    border-color: var(--accent, #ff0);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #ff0) 22%, transparent);
}

/* Quiet outline at rest, filling with the accent on hover, so the accent marks the
   action rather than decorating it. Both the border and the label take theme tokens:
   `--accent` is one theme-agnostic yellow that sits at 1.07:1 against the light
   theme's white surface, so it can carry neither an edge nor type there — only a
   fill, where `--accent-text-on` supplies the contrast. */
.exaba-feedback__send {
    align-self: flex-start;
    padding: 0.45rem 1rem;
    font-family: var(--font-display, var(--font-sans, sans-serif));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-heading, #fff);
    background: transparent;
    border: 1px solid var(--border-strong, #3a5a85);
    border-radius: var(--radius-md, 8px);
    transition:
        background-color var(--transition, 120ms ease-out),
        border-color var(--transition, 120ms ease-out),
        color var(--transition, 120ms ease-out);
}

.exaba-feedback__send:hover {
    background: var(--accent, #ff0);
    border-color: var(--accent, #ff0);
    color: var(--accent-text-on, #000);
}

.exaba-feedback__send:focus-visible {
    outline: 2px solid var(--accent, #ff0);
    outline-offset: 2px;
}

.exaba-feedback__thanks {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted, #a8b5c7);
}

/* `--text-danger`, not the `--color-danger` admonition accent: only the former
   flips per theme, and a mid-tone red legible on the dark surface washes out on
   the light one. The fallback stays the dark-theme value to match the rest of
   this file. */
.exaba-feedback__error {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-danger, #f28b82);
}

/* Honeypot: present for bots, hidden from humans and assistive tech. */
.exaba-feedback__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .exaba-feedback__btn,
    .exaba-feedback__send {
        transition: none;
    }
}