/**
 * Theme display only: the expandable part of the site's own alert banner.
 *
 * In this shape the theme styles the bar and Foxtrot ships no stylesheet, because the whole
 * point is that the banner keeps the site's approved look. The panel behind "All notices" has
 * no counterpart in the theme, so these are the only rules Foxtrot adds, and they are written
 * to stand on their own: every size, weight and margin is stated, so a theme's heading and
 * paragraph rules cannot reach in and blow the panel up. No colors: the banner sets those.
 */

/**
 * Open, the bar is one surface: the message at the top, its live updates under it, then each
 * other notice. No panel background of its own and no heavy rule under the message, because a
 * band of alert color with a grey panel stitched beneath it reads as two components, and the
 * updates stop looking like they belong to the message above them.
 */
.foxtrot-theme-updates {
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 400;
}

.foxtrot-theme-updates .foxtrot-theme-more {
	padding-top: 0.9rem;
}

/* One block per notice, divided by a hairline that is present but not loud. */
.foxtrot-theme-more__item + .foxtrot-theme-more__item {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

/**
 * The panel reuses the theme's own wrapper so it lines up with the message above it. That
 * wrapper is a flex row in this theme (message on the left, close button on the right), so the
 * panel has to claim the whole row or it is pushed into the space the button would occupy.
 */
.foxtrot-theme-more {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

.foxtrot-theme-more > * {
	margin: 0;
	padding: 0;
	color: inherit;
}

.foxtrot-theme-more__headline {
	margin-top: 0;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

/* The count and the close button ride together on the right of the message row. */
.foxtrot-theme-controls {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.foxtrot-theme-more__status {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.foxtrot-theme-more__text {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.foxtrot-theme-more__text p {
	margin: 0 0 0.4rem;
	font-size: inherit;
	line-height: inherit;
}

.foxtrot-theme-more__text p:last-child {
	margin-bottom: 0;
}

.foxtrot-theme-more__subhead {
	margin-top: 0.85rem;
	font-size: 0.75rem;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.9;
}

.foxtrot-theme-more__links {
	margin-top: 0.6rem;
	font-size: 0.875rem;
}

.foxtrot-theme-updates__list {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0 0 0 0.85rem;
	border-left: 2px solid currentColor;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.foxtrot-theme-updates__item + .foxtrot-theme-updates__item {
	margin-top: 0.7rem;
}

.foxtrot-theme-updates__time {
	margin: 0 0 0.1rem;
	font-size: 0.75rem;
	line-height: 1.3;
	font-weight: 400;
}

.foxtrot-theme-updates__body {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 400;
}

.foxtrot-theme-updates__item.is-pinned .foxtrot-theme-updates__time {
	font-weight: 700;
}

/**
 * The count that opens the panel. A theme's blanket `button` rule will happily give this a
 * background, a border and a padding of its own, so every one of those is stated here, and the
 * class is doubled to outrank a rule like `button:not(.a, .b, …)` whichever way the two
 * stylesheets end up ordered. Color is inherited, so the banner keeps deciding it.
 */
button.foxtrot-theme-toggle.foxtrot-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	cursor: pointer;
	transition: none;
}

button.foxtrot-theme-toggle.foxtrot-theme-toggle:hover,
button.foxtrot-theme-toggle.foxtrot-theme-toggle:focus {
	background: none;
	border: 0;
	color: inherit;
}

/* A chevron drawn in CSS, so no icon has to load and it takes the banner's color. */
button.foxtrot-theme-toggle.foxtrot-theme-toggle::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	background: none;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transform: none;
	transition: transform 0.15s ease-in-out;
}

button.foxtrot-theme-toggle.foxtrot-theme-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/**
 * The message row. The theme's own wrapper is a flex row that does not wrap, which is right for
 * a message and a close button and wrong once a notice count joins them: on a phone the message
 * gets crushed to a few characters. This lets the row wrap, keeps the message whole, and drops
 * the controls onto their own line aligned with the text rather than centered under it.
 */
.foxtrot-theme-row {
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

.foxtrot-theme-row > .banner-content {
	flex: 1 1 18rem;
	min-width: 0;
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 0.4rem;
}


.foxtrot-theme-controls {
	flex-wrap: wrap;
}

@media (max-width: 782px) {
	.foxtrot-theme-controls {
		margin-inline-start: 0;
		width: 100%;
		justify-content: flex-start;
		gap: 1.25rem;
	}

	/* The theme stacks the message and its button into a column here and centers them. Centered
	   is fine for one short line and wrong for a paragraph with a link under it, which reads as
	   floating. Everything in the bar starts on the same left edge instead. */
	.foxtrot-theme-row > .banner-content {
		align-items: flex-start;
		text-align: left;
	}
}

/* Announced to a screen reader, invisible on screen: the same trick core uses. */
.foxtrot-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The message row keeps the same breathing room open or closed, so nothing tightens up when
   the panel appears. The banner's own vertical padding is the bar's; this is the gap between
   the message and what opens under it. */
.foxtrot-theme-banner.is-open .foxtrot-theme-row {
	padding-bottom: 0.25rem;
}