/**
 * Urgent notice banner.
 *
 * Colours reference the theme's design tokens, with fallbacks so the plugin
 * still looks right if dropped into a site that does not define them. Every
 * fallback pair has been checked against WCAG AA:
 *   ink on info tint    14.03:1   accent on tint 8.67:1
 *   ink on warning tint 14.31:1   accent on tint 6.80:1
 *   ink on urgent tint  13.65:1   accent on tint 7.19:1
 *   ink on cleared tint 13.64:1   accent on tint 6.74:1
 */

.ac-notices {
	display: block;
}

.ac-notice {
	align-items: flex-start;
	background-color: var( --wp--custom--notice--info-bg, #edf3f0 );
	border-left: 4px solid var( --wp--custom--notice--info-accent, #1c554a );
	color: var( --wp--preset--color--contrast, #182320 );
	display: flex;
	gap: var( --wp--preset--spacing--30, 1.25rem );
	justify-content: space-between;
	padding: var( --wp--preset--spacing--30, 1.25rem );
}

.ac-notice--warning {
	background-color: var( --wp--custom--notice--warning-bg, #fde0a8 );
	border-left-color: var( --wp--custom--notice--warning-accent, #8a5300 );
}

.ac-notice--urgent {
	background-color: var( --wp--custom--notice--urgent-bg, #fdeceb );
	border-left-color: var( --wp--custom--notice--urgent-accent, #96231c );
}

.ac-notice__body {
	max-width: var( --wp--custom--measure--prose, 68ch );
}

/* The severity in words, so colour is never the only signal. */
.ac-notice__label {
	font-size: var( --wp--preset--font-size--x-small, 0.8125rem );
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
	color: var( --wp--custom--notice--info-accent, #1c554a );
}

.ac-notice--warning .ac-notice__label {
	color: var( --wp--custom--notice--warning-accent, #8a5300 );
}

.ac-notice--urgent .ac-notice__label {
	color: var( --wp--custom--notice--urgent-accent, #96231c );
}

.ac-notice__title {
	font-size: var( --wp--preset--font-size--large, 1.25rem );
	line-height: 1.25;
	margin: 0.25rem 0 0;
}

.ac-notice__text,
.ac-notice__more,
.ac-notice__where {
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	margin: 0.5rem 0 0;
}

/*
 * The way out of the banner, once, at the foot of all of it — not inside a notice. A
 * notice used to be a dead end unless it happened to carry a link or a map pin, and the
 * commonest notice of all is words and a photograph.
 *
 * Styled as a control rather than left as a bare underlined link: at the foot of a stack of
 * coloured notices, an unadorned link reads as a stray bit of page rather than as the way
 * on — which is exactly how it looked when a reader had dismissed the notices above it.
 * `hidden` on the paragraph is what the script uses to take it away in that case, and
 * `[hidden]` needs saying explicitly because the flex display below would otherwise win.
 */
.ac-notice__all {
	background-color: var( --wp--preset--color--surface, #f3f0ea );
	border-bottom: 1px solid var( --wp--preset--color--border, #d8d3ca );
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0.5rem var( --wp--preset--spacing--30, 1.25rem );
}

.ac-notice__all[hidden] {
	display: none;
}

.ac-notice__all a {
	align-items: center;
	border: 1px solid var( --wp--preset--color--primary, #1c554a );
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	color: var( --wp--preset--color--primary-dark, #17423a );
	display: inline-flex;
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	font-weight: 600;
	gap: 0.5rem;

	/* A full touch target: this is read on a phone, at the top of the page, in the rain. */
	min-height: 44px;
	padding: 0.4rem 1rem;
	text-decoration: none;
}

/* The arrow is decoration, so it is spoken by nothing and named by nothing. */
.ac-notice__all a::after {
	content: "\2192";
	font-weight: 400;
}

.ac-notice__all a:hover {
	background-color: var( --wp--preset--color--primary, #1c554a );
	color: var( --wp--preset--color--base, #faf8f6 );
}

.ac-notice__all a:focus-visible {
	outline: var( --wp--custom--focus--width, 3px ) solid var( --wp--preset--color--primary, #1c554a );
	outline-offset: var( --wp--custom--focus--offset, 2px );
}

/*
 * "See where this is on the village map", when somebody stood at the problem and
 * photographed it. Tightened against the photograph above it, because the two are one
 * offer — look at it, and see where it is — rather than two separate lines.
 */
.ac-notice__evidence + .ac-notice__where {
	margin-top: 0.25rem;
}

/*
 * The lightbox is not styled here. It is site-wide, in
 * ac-core/assets/lightbox.css — a reported photograph and a venue photograph should
 * not open in two different ways.
 */

/* -------------------------------------------------------------------------
 * Sending, and how far it has got.
 *
 * A photograph from a phone on the shore road takes long enough that a silent form
 * reads as a broken one — and what people do about that is press the button again.
 * So the form dims, the controls stop responding, and a percentage climbs.
 *
 * The scrim covers the FORM and not the page, for one reason: "if anybody is in
 * danger, ring 999" sits inside this form, and dimming the page would dim the one
 * sentence on this site that must always be readable. It is repeated inside the
 * overlay instead — on top, at the moment somebody is waiting and most likely to
 * need it.
 * ---------------------------------------------------------------------- */

.ac-report {
	position: relative;
}

.ac-sending {
	align-items: center;
	background-color: color-mix( in srgb, var( --wp--preset--color--base, #faf8f6 ) 88%, transparent );
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 1rem;
	position: absolute;
	z-index: 2;
}

/*
 * The controls stop taking input as well as looking as though they have. A scrim
 * alone still lets a keyboard reach the button underneath it.
 */
.ac-report.is-sending :is( input, textarea, select, button ) {
	pointer-events: none;
}

.ac-sending__box {
	background-color: var( --wp--preset--color--surface, #f3f0ea );
	border: 1px solid var( --wp--preset--color--border-strong, #7c8783 );
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	max-width: 26rem;
	padding: var( --wp--preset--spacing--30, 1.25rem );
	position: sticky;
	text-align: center;
	top: 1rem;
}

.ac-sending__box p {
	margin: 0 0 0.5rem;
}

.ac-sending__what {
	font-size: var( --wp--preset--font-size--medium, 1.125rem );
	font-weight: 600;
}

.ac-sending__bar {
	appearance: none;
	block-size: 0.6rem;
	border: 0;
	border-radius: 999px;
	inline-size: 100%;
	margin-block-end: 0.5rem;
	overflow: hidden;
}

.ac-sending__bar::-webkit-progress-bar {
	background-color: var( --wp--preset--color--border, #d8d3ca );
	border-radius: 999px;
}

.ac-sending__bar::-webkit-progress-value {
	background-color: var( --wp--preset--color--primary, #1c554a );
	border-radius: 999px;
}

.ac-sending__bar::-moz-progress-bar {
	background-color: var( --wp--preset--color--primary, #1c554a );
	border-radius: 999px;
}

/*
 * A `<progress>` with no value is indeterminate, and browsers animate it themselves
 * — which is the spinner, without a spinner. It becomes a real bar the moment the
 * first progress event arrives.
 */
.ac-sending__how {
	color: var( --wp--preset--color--muted, #58625d );
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
}

.ac-sending__urgent {
	color: var( --wp--custom--notice--urgent-accent, #96231c );
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
 * Taking a photograph, on the report form.
 *
 * The camera routes are buttons and the picker is a plain input below them,
 * because somebody reporting a flooded road is standing in front of it and the
 * photograph does not exist yet. The visual order is the priority: two buttons
 * that open the camera, then "or use one you have already taken".
 *
 * Full width and a 48px minimum on the buttons — this control is used one-handed,
 * outdoors, quite possibly in rain, which is the worst set of conditions a target
 * on this site has to survive.
 * ---------------------------------------------------------------------- */

.ac-evidence__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

.ac-evidence__choices button {
	background-color: var( --wp--preset--color--primary, #1c554a );
	border: 0;
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	color: var( --wp--preset--color--base, #faf8f6 );
	cursor: pointer;
	flex: 1 1 14rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	font-weight: 600;
	min-height: 48px;
	padding: 0.7rem 1rem;
}

.ac-evidence__choices button:hover {
	background-color: var( --wp--preset--color--primary-dark, #133b33 );
}

/*
 * "Use where I am now", offered because the file usually cannot say.
 *
 * A quieter button than the camera's: it is an offer, not the thing the form is for, and
 * the report is sent whether or not anybody presses it. Outlined rather than filled so it
 * reads as secondary without needing to be small — it is still pressed on a phone, in the
 * rain, so it keeps a 48px target.
 */
.ac-evidence__where {
	margin: 0.75rem 0 0;
}

.ac-evidence__here {
	background-color: transparent;
	border: 1px solid var( --wp--preset--color--primary, #1c554a );
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	color: var( --wp--preset--color--primary-dark, #17423a );
	cursor: pointer;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	font-weight: 600;
	min-height: 48px;
	padding: 0.7rem 1.1rem;
}

.ac-evidence__here:hover {
	background-color: var( --wp--preset--color--primary, #1c554a );
	color: var( --wp--preset--color--base, #faf8f6 );
}

.ac-evidence__here:disabled {
	cursor: progress;
	opacity: 0.6;
}

/*
 * "Do not use my location" — the way out of a remembered yes.
 *
 * It takes the place of the offer button once a location is in the form, so there is always
 * exactly one control here and it always names what pressing it will do. Quieter than the
 * offer, because undoing something is not what anybody came to the page for, but the same
 * 48px target: this is the button somebody presses when they have changed their mind about
 * being findable, and it must not be the fiddly one.
 */
.ac-evidence__not-here {
	background-color: transparent;
	border: 1px solid var( --wp--preset--color--border-strong, #7c8783 );
	border-radius: var( --wp--custom--radius--md, 0.375rem );
	color: var( --wp--preset--color--muted, #58625d );
	cursor: pointer;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	min-height: 48px;
	padding: 0.7rem 1.1rem;
}

.ac-evidence__not-here:hover {
	border-color: var( --wp--preset--color--primary, #1c554a );
	color: var( --wp--preset--color--primary-dark, #17423a );
}

/*
 * Video is the second choice, and looks like it: a phone's video of more than a
 * few seconds will not fit through the upload limit, so it should not be the
 * button somebody presses without reading.
 */
.ac-evidence__film {
	background-color: transparent !important;
	border: 1px solid var( --wp--preset--color--border-strong, #7c8783 ) !important;
	color: var( --wp--preset--color--primary-dark, #133b33 ) !important;
}

.ac-evidence__film:hover {
	background-color: var( --wp--preset--color--surface, #f3f0ea ) !important;
}

/* The picker route, deliberately quieter than the camera. */
.ac-evidence__existing {
	color: var( --wp--preset--color--muted, #58625d );
	display: block;
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	margin-top: 0.75rem;
}

/*
 * What was chosen, said out loud. A file input reports nothing on some phones, and
 * somebody unsure whether their photograph attached will either send it twice or
 * not at all.
 */
.ac-evidence__chosen {
	background-color: var( --wp--custom--notice--cleared-bg, #dff0e4 );
	border-radius: var( --wp--custom--radius--sm, 0.1875rem );
	color: var( --wp--custom--notice--cleared-accent, #1c5b2e );
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
	margin: 0.5rem 0 0;
	padding: 0.4rem 0.6rem;
}

/*
 * The same line, saying the opposite thing: the photograph did not come back, because
 * Android threw this page away while the camera had the screen. Amber rather than green,
 * and never colour alone — the sentence itself says what happened, because a green box
 * with bad news in it is worse than no box.
 */
.ac-evidence__chosen.is-amiss {
	background-color: var( --wp--custom--notice--warning-bg, #fde0a8 );
	color: var( --wp--custom--notice--warning-accent, #8a5300 );
	font-weight: 600;
}

/*
 * The photograph somebody sent in with the report.
 *
 * Small, because this banner is on every page and one of the things this site is
 * for is being usable on a phone in a power cut — a thumbnail answers "is the
 * water over the road or across a corner of it" for a few kilobytes. It is a
 * link to the full size for anybody who wants to look properly, and a video is
 * only ever a link: see AC\Notices\Evidence::banner().
 *
 * Capped in `em` rather than `px` so it scales with a reader who has turned their
 * text up, which on this village's audience is a lot of them.
 */
.ac-notice__evidence {
	margin: 0.5rem 0 0;
}

.ac-notice__photo {
	border-radius: var( --wp--custom--radius--sm, 0.1875rem );
	display: block;
	height: auto;
	max-width: min( 100%, 14em );
}

.ac-notice__evidence-note {
	display: block;
	font-size: var( --wp--preset--font-size--x-small, 0.8125rem );
	margin-top: 0.25rem;
	opacity: 0.85;
}

/* A video is a link, and says how big it is before anybody commits to it. */
.ac-notice__evidence--video {
	font-size: var( --wp--preset--font-size--small, 0.9375rem );
}

.ac-notice__dismiss {
	background: none;
	border: 1px solid currentColor;
	border-radius: var( --wp--custom--radius--sm, 0.1875rem );
	color: inherit;
	cursor: pointer;
	flex: none;
	font-size: var( --wp--preset--font-size--x-small, 0.8125rem );
	line-height: 1;
	/* 44px minimum touch target (WCAG 2.5.5). */
	min-height: 44px;
	min-width: 44px;
	padding: 0.5rem;
}

.ac-notice__dismiss:hover {
	background-color: rgba( 0, 0, 0, 0.06 );
}

/* The button's label is for assistive technology; sighted users see a cross. */
.ac-notice__dismiss {
	overflow: hidden;
	position: relative;
	text-indent: -9999px;
}

.ac-notice__dismiss::after {
	content: "\00d7";
	font-size: 1.5rem;
	left: 50%;
	position: absolute;
	text-indent: 0;
	top: 50%;
	transform: translate( -50%, -50% );
}

.ac-notice__dismiss:focus-visible {
	outline: var( --wp--custom--focus--width, 3px ) solid var( --wp--custom--focus--color, #17423a );
	outline-offset: var( --wp--custom--focus--offset, 2px );
}

/* Until the script runs, nothing is hidden — the notice must survive a
   JavaScript failure, because that is exactly when an emergency notice
   matters most. */
.ac-notice[hidden] {
	display: none;
}

/* An all-clear: the thing is over, or has been put right.
   Green, but never green alone — it carries a "Cleared" label like every other
   severity, because a reader who cannot tell the tints apart still has to be
   able to tell good news from bad (WCAG 1.4.1). */
.ac-notice--cleared {
	background-color: var( --wp--custom--notice--cleared-bg, #dff0e4 );
	border-left-color: var( --wp--custom--notice--cleared-accent, #1c5b2e );
}

/* A withdrawal is not an all-clear and must not look like one: nothing was
   resolved, the notice was simply wrong. It keeps the neutral tint inherited
   from .ac-notice and says "Withdrawn". */

/* An urgent notice follows the reader down the page.
   Only urgent. A notice that arrives in a page somebody is already reading
   lands above their viewport, which is fine for a change of bin day and
   useless for a flooded road. Sticky on the region rather than the notice
   because a sticky child stops sticking once its own containing block
   scrolls away, and the notice's box is a couple of hundred pixels tall;
   the region's is the page. If an ancestor ever turns out to clip its
   overflow this degrades to sitting at the top of the page, which is
   exactly where it used to be. */
.ac-notices-live.is-urgent {
	max-height: 40vh;
	overflow-y: auto;
	position: sticky;
	top: 0;

	/* Above the page's own stacking contexts, below the skip link. */
	z-index: 10;
}

/* Where a change to the banner is said out loud.
   A notice that arrives in a page nobody reloaded is obvious to somebody
   looking at it and invisible to somebody listening, so the change is
   announced here. Kept out of sight rather than hidden: display:none and
   visibility:hidden are both unreadable to a screen reader, which would
   make this element an elaborate way of saying nothing. */
.ac-notices__announce {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}