/**
 * Status Additional — public accordion styles.
 * Loaded ONLY on the configured status page, and only when at least one
 * enabled section exists. Everything is namespaced with "status-additional".
 *
 * The design deliberately inherits the surrounding font and text colour so
 * the accordion blends into the existing status card in light and dark
 * designs alike. Neutral separators are derived from currentColor.
 */

.status-additional {
	/* Neutral defaults; --status-additional-accent is only set when the
	   administrator chooses an accent colour in the settings. */
	--status-additional-border: rgba(128, 128, 128, 0.38);
	--status-additional-soft: rgba(128, 128, 128, 0.12);
	--status-additional-surface: rgba(128, 128, 128, 0.06);
	--status-additional-radius: 8px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0.6em 0 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	line-height: 1.5;
}

/* When the trigger sits inside a horizontal entry bar (name, status and
   buttons side by side), the wrapper holds only the compact button and must
   not stretch or add odd spacing inside the row. */
.status-additional--split {
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	align-self: center;
	flex: 0 1 auto;
}

/* The detached panel holder: a full-width block directly below the entry.
   flex-basis / grid-column make it take its own full-width line even when
   the entry's parent is a wrapping flex container or a CSS grid.
   Closed, it takes NO space at all so the page rhythm is untouched; open,
   it finishes with a neutral divider line so the next entry keeps its
   separator. */
.status-additional-holder {
	margin: 0;
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
	grid-column: 1 / -1;
}

.status-additional-holder.is-open {
	margin: 0.35em 0 0;
	padding-bottom: 0.7em;
	border-bottom: 1px solid var(--status-additional-border);
}

/* Seamless mode: the whole unit sits below the entry (nothing is ever added
   inside the entry itself). It always draws the divider line, because it
   stands where the theme's own row separator would otherwise sit. */
.status-additional--detached {
	margin: 0;
	width: 100%;
	max-width: 100%;
	flex-basis: 100%;
	grid-column: 1 / -1;
	border-bottom: 1px solid var(--status-additional-border);
	padding-bottom: 2px;
}

.status-additional--detached.is-open {
	padding-bottom: 0.7em;
}

/* "Joined" look: the open list reads as one connected unit with the entry
   directly above it — a soft grouped surface with a quiet accent down the
   left edge, tucked flush under the entry (no floating gap). */
.status-additional--joined.is-open .status-additional__content,
.status-additional--joined.is-open .status-additional__panel {
	position: relative;
}

.status-additional--joined.is-open .status-additional__content {
	background: var(--status-additional-surface);
	border-radius: 0 0 var(--status-additional-radius) var(--status-additional-radius);
	box-shadow: inset 2px 0 0 0 var(--status-additional-accent, var(--status-additional-border));
}

.status-additional--joined.status-additional--flat.is-open .status-additional__content {
	border-radius: 0;
}

/* Header replacement pill: sits in the entry, exactly where the old status
   box was. Compact and self-contained, whatever the global trigger style. */
.status-additional--headerpill {
	display: inline-flex;
	width: auto;
	max-width: 100%;
	margin: 0;
	vertical-align: middle;
	align-self: center;
	flex: 0 0 auto;
}

.status-additional--headerpill .status-additional__toggle,
.status-additional--headerpill .status-additional__toggle--strip,
.status-additional--headerpill .status-additional__toggle--icon,
.status-additional--headerpill .status-additional__toggle--minimal {
	display: inline-flex;
	width: auto;
	justify-content: center;
	gap: 0.5em;
	padding: 0.42em 0.95em;
	border: 1px solid var(--status-additional-accent, var(--status-additional-trigger, var(--status-additional-border)));
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 1;
	min-height: 0;
}

.status-additional--headerpill .status-additional__toggle:hover {
	background: var(--status-additional-soft);
}

/* The label must be visible in the pill even when the global style is the
   arrow-only strip/icon (the renderer already omits the hidden class here,
   but guard against any inherited hiding). */
.status-additional--headerpill .status-additional__toggle-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

/* When the host theme draws its own separator on the NEXT entry (a border
   that survives our insertion), the plugin's divider would double it — the
   script detects that case and suppresses ours. */
.status-additional--detached.status-additional--no-divider {
	border-bottom: 0;
	padding-bottom: 0;
}

.status-additional--detached.status-additional--no-divider.is-open {
	padding-bottom: 0.35em;
}

.status-additional-holder.status-additional--no-divider.is-open {
	border-bottom: 0;
}

@supports (border-color: color-mix(in srgb, currentColor 24%, transparent)) {
	.status-additional {
		--status-additional-border: color-mix(in srgb, currentColor 24%, transparent);
		--status-additional-soft: color-mix(in srgb, currentColor 7%, transparent);
		--status-additional-surface: color-mix(in srgb, currentColor 4%, transparent);
	}
}

.status-additional *,
.status-additional *::before,
.status-additional *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Toggle button                                                       */
/* ------------------------------------------------------------------ */

.status-additional__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.45em;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0.34em 0.85em;
	background: transparent;
	border: 1px solid var(--status-additional-accent, var(--status-additional-trigger, var(--status-additional-border)));
	border-radius: 999px;
	font: inherit;
	font-size: 0.82em;
	font-weight: inherit;
	color: var(--status-additional-trigger, inherit);
	text-align: left;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: inherit;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}

.status-additional__toggle:hover {
	background: var(--status-additional-soft);
}

/* "Subtle" style (default): a quiet little arrow with small text beside it —
   no box, so the entry looks like every other entry until you notice it. */
.status-additional__toggle--minimal,
.status-additional__toggle--icon {
	border: 0;
	padding: 0.22em 0.4em;
	border-radius: 6px;
	opacity: 0.72;
}

.status-additional__toggle--minimal {
	font-size: 0.78em;
}

/* "Arrow only" style: the text stays for screen readers but is not shown. */
.status-additional__toggle--icon {
	font-size: 1em;
	padding: 0.28em 0.34em;
}

.status-additional__toggle--minimal:hover,
.status-additional__toggle--icon:hover {
	opacity: 1;
	background: var(--status-additional-soft);
}

/* Keyboard focus must never be dimmed. */
.status-additional__toggle--minimal:focus-visible,
.status-additional__toggle--icon:focus-visible,
.status-additional__toggle--strip:focus-visible {
	opacity: 1;
}

/* Seamless strip trigger: a quiet full-width bar with just the arrow. */
.status-additional__toggle--strip {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	border: 0;
	border-radius: 6px;
	/* Slim, but never below the 24px minimum touch-target height. */
	padding: 0.32em 0;
	min-height: 24px;
	font-size: 1em;
	opacity: 0.55;
}

.status-additional__toggle--strip:hover {
	opacity: 1;
	background: var(--status-additional-soft);
}

.status-additional.is-open .status-additional__toggle--strip {
	opacity: 0.9;
}

.status-additional__toggle--strip .status-additional__chevron {
	width: 1.05em;
	height: 1.05em;
}

.status-additional.is-open .status-additional__toggle--minimal,
.status-additional.is-open .status-additional__toggle--icon {
	opacity: 1;
}

/* Always-visible mode: no toggle exists; the information is simply part of
   the entry. */
.status-additional--static .status-additional__content {
	margin-top: 0.4em;
}

/* Flat panel style (default): no box at all — the rows sit directly on the
   page like native entries. --status-additional-align is set by the script
   to the entry's own left padding, so text columns line up with the theme's
   gutter. */
.status-additional--flat .status-additional__content {
	border: 0;
	background: transparent;
	border-radius: 0;
	margin-top: 0.15em;
	padding: 0.4em var(--status-additional-align, 0.25em) 0.55em;
}

.status-additional--flat .status-additional__row:first-child {
	padding-top: 0;
}

/* Visually hidden, still announced by screen readers. */
.status-additional__sr-only {
	position: absolute;
	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;
}

.status-additional__toggle:focus {
	outline: none;
}

.status-additional__toggle:focus-visible {
	outline: 2px solid var(--status-additional-accent, currentColor);
	outline-offset: 2px;
}

.status-additional__toggle-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.status-additional__chevron {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	color: var(--status-additional-accent, currentColor);
	transition: transform 0.22s ease;
}

.status-additional.is-open .status-additional__chevron {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ */
/* Panel: smooth expand/collapse without layout jumps                  */
/* ------------------------------------------------------------------ */

.status-additional__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.24s ease;
}

.status-additional.is-open .status-additional__panel {
	grid-template-rows: 1fr;
}

.status-additional__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.status-additional__content {
	padding: 0.85em 1em 0.95em;
	margin-top: 0.45em;
	border: 1px solid var(--status-additional-border);
	border-radius: var(--status-additional-radius);
	background: var(--status-additional-surface);
	color: var(--status-additional-text, inherit);
	font-size: 0.95em;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* Older browsers without 0fr-grid animation support still work: the grid
   simply snaps between states, and content stays fully usable. */

/* ------------------------------------------------------------------ */
/* Intro                                                               */
/* ------------------------------------------------------------------ */

.status-additional__intro {
	margin: 0 0 0.7em;
	opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Rows                                                                */
/* ------------------------------------------------------------------ */

.status-additional__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.status-additional__row {
	margin: 0;
	padding: 0.5em 0;
	border-top: 1px solid var(--status-additional-soft);
}

.status-additional__row:first-child {
	border-top: 0;
	padding-top: 0.1em;
}

.status-additional__row-main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.6em;
}

.status-additional__row-dot {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	align-self: center;
}

.status-additional__row-title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.status-additional__row-value {
	overflow-wrap: anywhere;
	padding: 0.05em 0.55em;
	border: 1px solid var(--status-additional-border);
	border-radius: 999px;
	font-size: 0.95em;
}

.status-additional__row-desc {
	margin: 0.3em 0 0;
	font-size: 0.95em;
	opacity: 0.85;
}

/* Status-list layout: label left, long status box right. */
.status-additional__row--badge .status-additional__row-main {
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em 1em;
}

/* Quiet dotted leader between the name and its status box. */
.status-additional__leader {
	flex: 1 1 2em;
	min-width: 2em;
	align-self: center;
	border-bottom: 1px dotted var(--status-additional-border);
	opacity: 0.55;
	transform: translateY(0.15em);
}

@media (max-width: 600px) {
	.status-additional__leader {
		display: none;
	}
}

.status-additional__row--badge {
	padding: 0.55em 0;
}

.status-additional__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-left: auto;
	min-width: 11em;
	max-width: 100%;
	padding: 0.55em 1.1em;
	border-radius: 6px;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	/* The badge is a self-contained dark chip: the status colour is the text,
	   the background is a dark tint of the same colour. This guarantees
	   legible contrast on light AND dark host pages, and matches the classic
	   status-badge look. Without a colour, a neutral light grey is used. */
	color: var(--status-additional-badge-color, #dfe3ee);
	background: rgba(15, 17, 23, 0.95);
	border: 1px solid rgba(128, 136, 152, 0.4);
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
	.status-additional__badge {
		background: color-mix(in srgb, var(--status-additional-badge-color, #8b95a8) 15%, rgb(15 17 23));
		border-color: color-mix(in srgb, var(--status-additional-badge-color, #8b95a8) 42%, rgb(15 17 23));
	}
}

/* When the linked status option defines an explicit background colour, use it
   verbatim (text colour stays the option's own text colour). */
.status-additional__badge.has-bg {
	background: var(--status-additional-badge-bg);
	border-color: var(--status-additional-badge-bg);
}

@supports (color: color-mix(in srgb, red 10%, transparent)) {
	.status-additional__badge.has-bg {
		background: var(--status-additional-badge-bg);
		border-color: color-mix(in srgb, var(--status-additional-badge-color, #8b95a8) 45%, var(--status-additional-badge-bg));
	}
}

/* ------------------------------------------------------------------ */
/* Note + updated line                                                 */
/* ------------------------------------------------------------------ */

.status-additional__note {
	margin-top: 0.7em;
	padding-top: 0.7em;
	border-top: 1px solid var(--status-additional-soft);
}

.status-additional__note > :first-child {
	margin-top: 0;
}

.status-additional__note > :last-child {
	margin-bottom: 0;
}

.status-additional__note ul,
.status-additional__note ol {
	margin: 0.4em 0 0.4em 1.4em;
	padding: 0;
}

.status-additional__note ul {
	list-style: disc;
}

.status-additional__note ol {
	list-style: decimal;
}

.status-additional__note a {
	color: var(--status-additional-accent, inherit);
	text-decoration: underline;
}

.status-additional__updated {
	margin: 0.7em 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

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

@media (prefers-reduced-motion: reduce) {
	.status-additional__panel,
	.status-additional__chevron,
	.status-additional__toggle {
		transition: none;
	}
}