/*
 * My Beer Note. Colours are two variables a site can set once, with defaults that clear
 * WCAG AAA on white and on a dark background.
 */
.beer-note {
    --beer-note-ink: #101010;
    --beer-note-accent: #74260c;
    --beer-note-border: #595959;
    --beer-note-surface: #ffffff;

    margin: 1.5rem 0;
    color: var(--beer-note-ink);
    max-width: 42rem;
}

.beer-note-heading {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    color: var(--beer-note-ink);
}

.beer-note-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .95rem;
    color: var(--beer-note-ink);
}

.beer-note-input {
    width: 100%;
    padding: .6rem .7rem;
    font: inherit;
    line-height: 1.5;
    color: var(--beer-note-ink);
    background: var(--beer-note-surface);
    border: 2px solid var(--beer-note-border);
    border-radius: 6px;
    resize: vertical;
}

.beer-note-input:focus-visible {
    outline: 3px solid var(--beer-note-accent);
    outline-offset: 2px;
}

.beer-note-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

.beer-note-save {
    font: inherit;
    font-weight: 700;
    min-height: 2.75rem;
    padding: .45rem 1.1rem;
    cursor: pointer;
    color: var(--beer-note-surface);
    background: var(--beer-note-accent);
    border: 2px solid var(--beer-note-accent);
    border-radius: 6px;
}

.beer-note-save:hover,
.beer-note-save:focus-visible {
    outline: 3px solid var(--beer-note-accent);
    outline-offset: 2px;
}

.beer-note-status {
    font-size: .95rem;
    color: var(--beer-note-ink);
}

/* Never colour alone: an error is also stated in words by the script. */
.beer-note-status.is-error {
    color: #8a1020;
    font-weight: 700;
}

/* The word countdown. Full ink, never a faded grey: it is information, and a limit somebody
   is about to hit is the least useful thing on the page to make hard to read. */
.beer-note-count {
    margin: .35rem 0 0;
    font-size: .95rem;
    color: var(--beer-note-ink);
}

/* Never colour alone. Over the limit the counter changes its WORDS, from "N words left" to
   "N words over", and the weight carries it as well, so neither a monochrome screen nor a
   colour-blind reader depends on the red. */
.beer-note-count.is-over {
    color: #8a1020;
    font-weight: 700;
}

.beer-note-privacy,
.beer-note-signin {
    margin: .4rem 0 0;
    font-size: .95rem;
    color: var(--beer-note-ink);
}

.beer-note-signin a {
    color: var(--beer-note-accent);
    font-weight: 700;
    text-decoration: underline;
}


/*
 * NO prefers-color-scheme block, deliberately.
 *
 * This stylesheet controls the widget's text but not the page behind it. On a site whose
 * pages stay light while the visitor's system is set to dark, flipping the text to a pale
 * colour puts pale text on a white page: measured at well under 3:1 on a real page, which is
 * how it was caught. The defaults above are AAA on a light surface.
 *
 * A site with genuinely dark pages sets the variables once, in its own stylesheet, where it
 * DOES know what the background is:
 *
 *   .uk-section-secondary .beer-note { --beer-note-ink: #ffffff; }
 */