/**
 * Chargie Fleet dashboard — "instrument panel, native to Chargie".
 *
 * Light, precise, calm. Structure in brand navy, exactly one orange action
 * accent, every number the user reads set in a monospaced face so the panel
 * reads like an instrument for a physical device.
 *
 * Self-contained: no webfonts, no CDNs, no @import. Poppins is already loaded
 * site-wide; the monospace stack is system fonts only.
 *
 * ---------------------------------------------------------------------------
 * SPECIFICITY CONTRACT — read before adding a rule
 * ---------------------------------------------------------------------------
 * The page body carries `.chargie-page` and the site theme ships global resets:
 *
 *     .chargie-page svg { max-width:24px; max-height:24px; width:24px; height:24px }
 *     .chargie-page img { max-width:100%; height:auto }
 *
 * Those are (0,1,1), and WordPress prints plugin stylesheets BEFORE the theme's,
 * so an equal-specificity rule of ours loses the tie too. This file therefore
 * runs a strict three-tier cascade, and every selector states its tier:
 *
 *   tier 0  theme         `.chargie-page svg`                        (0,1,1)
 *   tier 1  our reset     `.chargie-fleet.chargie-fleet p`           (0,2,1)
 *   tier 2  our components`.chargie-fleet.chargie-fleet .cf-btn`     (0,3,0)
 *
 * `.chargie-fleet.chargie-fleet` is the scope prefix for EVERY rule below.
 * Doubling a class is a legal compound selector matching the same element; it
 * exists purely to win these ties without `!important`.
 *
 * The tiers are not decoration. A single `.chargie-fleet` prefix puts component
 * rules at (0,2,0), which LOSES to our own bare-element reset at (0,2,1) —
 * type count breaks the tie at equal class count — and that silently strips
 * every button, input and heading back to the reset. Verified by rendering.
 *
 * Two further rules:
 *   - Any rule that sizes an <svg> or <img> must ALSO reset `max-width` and
 *     `max-height`, because the theme pins those too.
 *   - New rules take the same doubled prefix. A rule with one `.chargie-fleet`
 *     is a bug, not a shortcut.
 *
 * No `!important` here except `[hidden]` and the reduced-motion block. If a rule
 * does not apply, raise its specificity — do not reach for the hammer.
 *
 * Contrast: every text/background pair below meets WCAG AA (4.5:1 normal,
 * 3:1 large/non-text). Ratios are noted inline wherever the pair is not
 * obviously safe.
 */

/* ==========================================================================
   1. DESIGN TOKENS
   Adjust the panel's whole look from here. Nothing below hard-codes a colour.
   ========================================================================== */

.chargie-fleet.chargie-fleet {
	/* Ink -------------------------------------------------------------- */
	--cf-ink: #0b1b2b;          /* primary text            17.41:1 on white */
	--cf-ink-2: #475569;        /* secondary text           7.58:1 on white */
	--cf-ink-3: #64748b;        /* meta/labels — NEVER below 14px, and never
	                               on --cf-surface-2 (4.47:1 there, fails AA).
	                               4.76:1 on white. */
	--cf-navy: #1e3a5f;         /* structure, rails, marks 11.50:1 on white */

	/* Surfaces --------------------------------------------------------- */
	--cf-surface: #ffffff;      /* cards, modal                            */
	--cf-surface-2: #f6f8fb;    /* plinths, rails, panel backgrounds       */
	--cf-line: #e2e8f0;         /* hairlines                               */
	--cf-line-2: #cbd5e1;       /* hairlines that need to read as a border */

	/* State ------------------------------------------------------------ */
	/* Both state inks are one palette step darker than the obvious choice
	   (amber-800 / green-800 rather than 700). On white either would pass, but
	   these inks are also used as chip text on their own soft background, and
	   there the 700s measured 4.51:1 and 4.57:1 against a 4.5:1 requirement —
	   passing by 0.01 and 0.07. A margin that thin is not a pass worth keeping:
	   any later tweak to a chip background, or a browser rounding difference,
	   silently drops the status labels below AA. These clear it on every
	   surface they are used on, and on white they now reach AAA. */
	--cf-charge: #166534;       /* charging                 7.13:1 on white */
	--cf-charge-soft: #dcfce7;  /* charging chip bg  (charge on it: 6.49:1) */
	--cf-hold: #475569;         /* paused / holding         7.58:1 on white */
	--cf-warn: #92400e;         /* offline                  7.09:1 on white */
	--cf-warn-soft: #fef3c7;    /* offline chip bg     (warn on it: 6.37:1) */

	/* Action — exactly one accent -------------------------------------- */
	--cf-action: #ff6b35;       /* primary button FILL only. NEVER as text:
	                               2.84:1 on white. */
	--cf-action-hover: #f2551b;
	--cf-action-ink: #c2410c;   /* orange as TEXT           5.18:1 on white */
	--cf-alert-soft: #ffece4;   /* error/alert bg (action-ink on it: 4.53:1) */

	/* Type -------------------------------------------------------------- */
	--cf-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cf-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

	/* Shape ------------------------------------------------------------- */
	--cf-r-card: 14px;
	--cf-r-md: 10px;
	--cf-r-sm: 8px;
	--cf-r-pill: 999px;

	--cf-shadow: 0 1px 2px rgba(15, 30, 50, 0.06);
	--cf-shadow-lift: 0 6px 18px rgba(15, 30, 50, 0.10), 0 1px 2px rgba(15, 30, 50, 0.06);
	--cf-shadow-modal: 0 24px 60px rgba(11, 27, 43, 0.28);

	/* Motion — state/hover only, nothing decorative --------------------- */
	--cf-t: 150ms;

	color: var(--cf-ink);
	font-family: var(--cf-font);
	font-size: 1rem;
	line-height: 1.45;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. SCOPED RESET + THEME-CONFLICT DEFEATS
   ========================================================================== */

.chargie-fleet.chargie-fleet,
.chargie-fleet.chargie-fleet *,
.chargie-fleet.chargie-fleet *::before,
.chargie-fleet.chargie-fleet *::after {
	box-sizing: border-box;
}

.chargie-fleet.chargie-fleet[hidden],
.chargie-fleet.chargie-fleet [hidden] {
	display: none !important; /* the sole !important: [hidden] must always win */
}

/*
 * TIER 1 — bare-element reset, (0,2,1). Beats any `.chargie-page h2`-style theme
 * rule regardless of stylesheet order, and is deliberately out-specified by
 * every component rule below (tier 2, (0,3,0)).
 *
 * `margin` here is kept for readability but does NOT win on this page — see
 * tier 1a immediately below, which is what actually lands it.
 */
.chargie-fleet.chargie-fleet h1,
.chargie-fleet.chargie-fleet h2,
.chargie-fleet.chargie-fleet h3,
.chargie-fleet.chargie-fleet h4,
.chargie-fleet.chargie-fleet p,
.chargie-fleet.chargie-fleet ul,
.chargie-fleet.chargie-fleet ol,
.chargie-fleet.chargie-fleet li,
.chargie-fleet.chargie-fleet figure {
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	list-style: none;
	font: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

/*
 * TIER 1a — the same margin reset again, at (0,4,1), because at (0,2,1) it never
 * actually won. The theme carries a (0,3,1) rule of its own (a
 * `.chargie-page .page-body.prose p`-shape) and fleet.css is 11th of 36 sheets
 * on this page, so even a (0,3,1) of ours would lose the tie on source order.
 * Every <p> in this dashboard was silently carrying the theme's 24px bottom
 * margin, and every heading its 32px top one.
 *
 * Mostly that only added space nobody asked for, since this file lays everything
 * out with flex/grid `gap`. In a row with `align-items: center` it did worse: the
 * margin is part of the box being centred, so the text sits half the margin above
 * the line it should share — which is what pushed "2 devices · 1 charging · 1 no
 * link" off "Select all".
 *
 * Margin only, and deliberately NOT folded into tier 1 above: tier 1 is designed
 * to be out-specified by the tier-2 component rules at (0,3,0), and raising the
 * whole reset to (0,4,1) would take every component's padding, font and colour
 * with it.
 *
 * THE COST, which the first version of this comment denied. At (0,4,1) this also
 * out-specifies the component rules, so any component margin on one of these
 * elements silently lost — 23 rules did, including `.cf-panel-status`,
 * `.cf-set-help` and `.cf-settings-state`. Those rules therefore carry a third
 * `.chargie-fleet` (tier 2a, (0,4,x)) and win on source order, being declared
 * later. **A component rule setting a margin on p/h1-h4/ul/ol/li/dl/dd/dt/figure
 * must use the tier-2a prefix (FOUR `.chargie-fleet`, giving (0,5,0) — three gives only (0,4,0), which still loses to the type selector here), or it will not apply.**
 *
 * The original claim — "no component rule loses a margin it set" — came from
 * checking that every element moved FROM a theme margin TO 0. That measured the
 * theme losing, not the components winning, which are different questions; the
 * second one was never asked. The check that belongs here is the one now used:
 * for every margin-setting rule in this file, does its target still compute the
 * value it asks for.
 */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h1,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h2,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h3,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h4,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet p,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet ul,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet ol,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet li,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet dl,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet dd,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet dt,
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet figure {
	margin: 0;
}

/*
 * The theme decorates headings with an accent rule — as a border on the heading
 * and/or a generated bar. Both would render as a stray line under our panel
 * title, directly above our own header hairline. `border: 0` above kills the
 * first; this kills the second. (0,2,2) beats the theme's `.chargie-page h2::after`
 * (0,1,2). No heading of ours uses generated content, so nothing of ours is lost.
 */
.chargie-fleet.chargie-fleet h1::before,
.chargie-fleet.chargie-fleet h1::after,
.chargie-fleet.chargie-fleet h2::before,
.chargie-fleet.chargie-fleet h2::after,
.chargie-fleet.chargie-fleet h3::before,
.chargie-fleet.chargie-fleet h3::after,
.chargie-fleet.chargie-fleet h4::before,
.chargie-fleet.chargie-fleet h4::after {
	content: none;
	display: none;
}

.chargie-fleet.chargie-fleet button,
.chargie-fleet.chargie-fleet input,
.chargie-fleet.chargie-fleet select,
.chargie-fleet.chargie-fleet textarea {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	/* Themes commonly float or absolutely position buttons. Left unreset, that
	   pulls the device-name button out of flow (the model line wraps around it)
	   and lets the header button escape the row its divider is drawn under. */
	float: none;
	position: static;
	-webkit-appearance: none;
	appearance: none;
}

.chargie-fleet.chargie-fleet button {
	cursor: pointer;
}

.chargie-fleet.chargie-fleet a {
	color: var(--cf-navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.chargie-fleet.chargie-fleet svg {
	display: block;
}

/*
 * Focus. Navy ring on white is 11.50:1 — far past the 3:1 non-text floor, and
 * it stays legible sitting next to the orange action fill.
 */
.chargie-fleet.chargie-fleet :focus-visible {
	outline: 2px solid var(--cf-navy);
	outline-offset: 2px;
	border-radius: var(--cf-r-sm);
}

@media (prefers-reduced-motion: reduce) {
	.chargie-fleet.chargie-fleet *,
	.chargie-fleet.chargie-fleet *::before,
	.chargie-fleet.chargie-fleet *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------------
   THEME DEFEAT: images and inline SVG.
   `.chargie-page svg`/`img` (0,1,1) pins these to 24px / height:auto. Each rule
   below is (0,3,0) or higher AND restates max-width/max-height explicitly.
   -------------------------------------------------------------------------- */

/* (0,3,0) — PHONE_SILHOUETTE has only a viewBox, so the wrapper sets the size. */
.chargie-fleet.chargie-fleet .cf-phone-svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
}

/* (0,3,0) — device photos, letterboxed into a fixed 80x144 plinth. */
.chargie-fleet.chargie-fleet .cf-phone-img {
	display: block;
	width: 100%;
	height: 128px;
	max-width: none;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

/* (0,3,1) — the QR library injects a raw <img>/<canvas>/<table>. */
.chargie-fleet.chargie-fleet .cf-qr img,
.chargie-fleet.chargie-fleet .cf-qr canvas,
.chargie-fleet.chargie-fleet .cf-qr table {
	display: block;
	width: 220px;
	height: 220px;
	max-width: 100%;
	max-height: none;
}

/* ==========================================================================
   3. TYPE PRIMITIVES
   Every number the user reads goes through .cf-num. That pairing — Poppins for
   language, tabular mono for data — is the panel's voice.
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-num {
	font-family: var(--cf-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.01em;
}

/* Micro-label: 12px uppercase. --cf-ink-2 (7.58:1), never --cf-ink-3. */
.chargie-fleet.chargie-fleet .cf-microlabel {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cf-ink-2);
}

/*
 * Screen-reader-only text. Every reading and icon-only control on this panel
 * carries one: "5.09 V" and a row of three dots announce badly on their own.
 * Not `display:none` — that would hide it from assistive tech too.
 */
.chargie-fleet.chargie-fleet .cf-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3b. CHECKBOX
   The tier-1 reset strips `appearance`, `background` and `border` from every
   input, which erases a native checkbox completely — so every checkbox on this
   panel has to be drawn here. (0,3,0) beats that reset's (0,2,1).

   Unchecked border --cf-ink-3 on white is 4.76:1 and on the plinth 4.47:1,
   both past the 3:1 floor for a control boundary. Checked is a --cf-navy fill
   (11.50:1 on white) with a white tick on it (11.50:1).
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-check {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	/* A whole pixel: a 1.5px border is floored to 1px on a 1x display, which
	   is a thinner box than the one this was drawn for. */
	border: 2px solid var(--cf-ink-3);
	background: var(--cf-surface);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color var(--cf-t) ease, border-color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-check:hover:not(:disabled) {
	border-color: var(--cf-navy);
}

.chargie-fleet.chargie-fleet .cf-check:checked,
.chargie-fleet.chargie-fleet .cf-check:indeterminate {
	background: var(--cf-navy);
	border-color: var(--cf-navy);
}

/*
 * The tick: two borders of an empty box, rotated. No SVG, so the theme's global
 * `svg { width: 24px }` reset has nothing to catch.
 *
 * Placed by centring rather than by offsets measured from an edge, so it stays
 * put if the box or its border is ever resized. The -60% lifts it by the usual
 * optical correction — a checkmark centred on its bounding box reads low.
 */
.chargie-fleet.chargie-fleet .cf-check:checked::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 8px;
	border: solid var(--cf-surface);
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

.chargie-fleet.chargie-fleet .cf-check:indeterminate::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 2px;
	background: var(--cf-surface);
	border-radius: 1px;
	transform: translate(-50%, -50%);
}

.chargie-fleet.chargie-fleet .cf-check:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	padding: 0.7em 1.15em;
	border: 1px solid transparent;
	border-radius: var(--cf-r-md);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color var(--cf-t) ease, border-color var(--cf-t) ease,
		color var(--cf-t) ease, box-shadow var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/*
 * PRIMARY — the brand orange at full vividness, with INK text rather than white.
 *
 * White on #ff6b35 is 2.84:1: it fails AA (4.5:1) and also fails AA-large
 * (3:1), at any weight or size. Darkening the fill enough to carry white text
 * would have cost the accent its vividness, so the label is --cf-ink instead:
 *   #0b1b2b on #ff6b35 = 6.14:1  (AA at any size)
 *   #0b1b2b on #f2551b = 5.05:1  (hover, AA at any size)
 */
.chargie-fleet.chargie-fleet .cf-btn-primary {
	background: var(--cf-action);
	color: var(--cf-ink);
	font-size: 1rem;
	box-shadow: 0 1px 2px rgba(194, 65, 12, 0.24);
}

.chargie-fleet.chargie-fleet .cf-btn-primary:hover:not(:disabled) {
	background: var(--cf-action-hover);
}

.chargie-fleet.chargie-fleet .cf-btn-primary:active:not(:disabled) {
	background: var(--cf-action-hover);
	box-shadow: inset 0 1px 3px rgba(11, 27, 43, 0.22);
}

/* SECONDARY — navy outline. Text 11.50:1, border well past the 3:1 UI floor. */
.chargie-fleet.chargie-fleet .cf-btn-secondary {
	background: var(--cf-surface);
	border-color: var(--cf-navy);
	color: var(--cf-navy);
}

.chargie-fleet.chargie-fleet .cf-btn-secondary:hover:not(:disabled) {
	background: var(--cf-navy);
	color: var(--cf-surface); /* 11.50:1 */
}

/* QUIET — real text buttons (Refresh). --cf-ink-2 on --cf-surface-2 = 7.12:1. */
.chargie-fleet.chargie-fleet .cf-btn-quiet {
	padding: 0.5em 0.85em;
	background: var(--cf-surface-2);
	border-color: var(--cf-line);
	color: var(--cf-ink-2);
	font-size: 0.875rem;
}

.chargie-fleet.chargie-fleet .cf-btn-quiet:hover:not(:disabled) {
	background: var(--cf-surface);
	border-color: var(--cf-line-2);
	color: var(--cf-ink); /* 17.41:1 */
}

/* DANGER — a neutral that darkens on hover; never pale grey. */
.chargie-fleet.chargie-fleet .cf-btn-danger {
	background: transparent;
	border-color: transparent;
	color: var(--cf-ink-2); /* 7.58:1 on the white card */
}

.chargie-fleet.chargie-fleet .cf-btn-danger:hover:not(:disabled) {
	background: var(--cf-alert-soft);
	border-color: rgba(194, 65, 12, 0.24);
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
}

/*
 * DESTRUCTIVE — the confirm button of a removal dialog, and nowhere else. It
 * is not a second action accent: --cf-action-ink is already this file's orange,
 * used as error text and as the stopped-charge mark. Filled, it carries white:
 *   #ffffff on #c2410c = 5.18:1  (AA at any size)
 *   #ffffff on #9a3412 = 7.31:1  (hover)
 */
.chargie-fleet.chargie-fleet .cf-btn-destructive {
	background: var(--cf-action-ink);
	color: var(--cf-surface);
	box-shadow: 0 1px 2px rgba(154, 52, 18, 0.28);
}

.chargie-fleet.chargie-fleet .cf-btn-destructive:hover:not(:disabled) {
	background: #9a3412;
}

/* STOP — sits on the card beside the charge track. */
.chargie-fleet.chargie-fleet .cf-btn-stop {
	padding: 0.4em 0.8em;
	background: var(--cf-surface);
	border-color: var(--cf-line-2);
	color: var(--cf-ink-2);
	font-size: 0.8125rem;
}

.chargie-fleet.chargie-fleet .cf-btn-stop:hover:not(:disabled) {
	border-color: rgba(194, 65, 12, 0.45);
	color: var(--cf-action-ink); /* 5.18:1 on white */
}

.chargie-fleet.chargie-fleet .cf-btn-stop.is-active {
	background: var(--cf-alert-soft);
	border-color: rgba(194, 65, 12, 0.28);
	color: var(--cf-action-ink); /* 4.53:1 */
}

/* ==========================================================================
   5. INPUTS
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-input {
	width: 100%;
	padding: 0.7em 0.85em;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line-2);
	border-radius: var(--cf-r-md);
	color: var(--cf-ink);
	font-size: 0.9375rem;
	transition: border-color var(--cf-t) ease, box-shadow var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-input::placeholder {
	color: var(--cf-ink-3); /* 4.76:1 on white */
	opacity: 1;
}

.chargie-fleet.chargie-fleet .cf-input:focus {
	border-color: var(--cf-navy);
	box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
	outline: none;
}

.chargie-fleet.chargie-fleet .cf-input:focus-visible {
	outline: 2px solid var(--cf-navy);
	outline-offset: 1px;
}

.chargie-fleet.chargie-fleet select.cf-input {
	padding-right: 2.4em;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* ==========================================================================
   6. SHELL
   ========================================================================== */

/*
 * (0,2,0). Also matches the modal overlay and the <noscript> block, both of
 * which carry `.chargie-fleet` directly; the overlay resets max-width/margin in
 * section 13 at (0,3,0).
 */
.chargie-fleet.chargie-fleet {
	display: block;
	max-width: 1000px;
	margin: 0 auto;
}

/* ---- Panel header ------------------------------------------------------ */

.chargie-fleet.chargie-fleet .cf-header {
	margin-bottom: 1.75rem;
}

/*
 * The divider belongs to the header ROW, not to the summary strip below it.
 * As a border-top on the strip it was rendering across the "Add device" button,
 * which escapes the row's box when the theme floats or repositions buttons.
 * Owning it here puts the line below the row's padding box unconditionally; the
 * tier-1 `float: none; position: static` reset keeps the button inside that box.
 */
.chargie-fleet.chargie-fleet .cf-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--cf-line-2);
}


.chargie-fleet.chargie-fleet .cf-title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--cf-ink);
}

/*
 * The theme styles `.chargie-info-page .page-body.prose h2` — specificity
 * (0,3,1) — which outranks both the reset at the top of this file (0,2,0) and
 * the doubled-wrapper form used everywhere else (0,3,0), because a type
 * selector breaks the class-count tie. Unchecked it re-adds a 2px underline
 * directly above the header's own divider, plus a 3rem top margin.
 *
 * A THIRD `.chargie-fleet` plus the class on the element itself reaches (0,4,1),
 * which wins outright rather than depending on stylesheet order — and needs no
 * knowledge of the header's internal structure.
 */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h2.cf-title {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Legible, not a whisper: --cf-ink-2 at 14px = 7.58:1. */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-meta {
	margin-top: 0.3rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cf-ink-2);
}

.chargie-fleet.chargie-fleet .cf-header-actions {
	display: flex;
	gap: 0.6rem;
}

/* ---- Fleet summary strip / batch action bar ---------------------------- */
/*
 * One row under the header, carrying one of two things: the fleet summary at
 * rest, or the batch action bar once anything is selected. Select all stays put
 * across the swap, so the control the user just used does not move under them.
 */

.chargie-fleet.chargie-fleet .cf-strip {
	margin-top: 0.85rem;
}

.chargie-fleet.chargie-fleet .cf-strip-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
	min-height: 2.15rem;
}

.chargie-fleet.chargie-fleet .cf-select-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cf-ink-2); /* 7.58:1 on white */
	cursor: pointer;
}

/*
 * The divider only exists when there is something to its left. `[hidden]` keeps
 * an element in the sibling chain, so without the :not() a single-device fleet
 * would draw a rule with nothing before it.
 */
.chargie-fleet.chargie-fleet .cf-select-all:not([hidden]) + .cf-summary,
.chargie-fleet.chargie-fleet .cf-select-all:not([hidden]) + .cf-summary + .cf-batch-bar {
	padding-left: 0.85rem;
	border-left: 1px solid var(--cf-line-2);
}

.chargie-fleet.chargie-fleet .cf-batch-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
}

.chargie-fleet.chargie-fleet .cf-batch-count {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	margin-right: 0.25rem;
	font-size: 0.875rem;
}

.chargie-fleet.chargie-fleet .cf-batch-count .cf-num {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 */
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-batch-status {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.chargie-fleet.chargie-fleet .cf-batch-status.is-busy {
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet .cf-batch-status.is-success {
	color: var(--cf-charge); /* 7.13:1 on white */
}

.chargie-fleet.chargie-fleet .cf-batch-status.is-error {
	color: var(--cf-action-ink); /* 5.18:1 on white */
}

/* Counts derived from the already-fetched device list. Zero-count segments
   are omitted in JS, so nothing here ever reads "0 charging". */

.chargie-fleet.chargie-fleet .cf-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.85rem;
	font-size: 0.875rem;
}

.chargie-fleet.chargie-fleet .cf-summary-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-summary-item + .cf-summary-item::before {
	content: '·';
	margin-right: 0.5em;
	color: var(--cf-ink-3);
}

.chargie-fleet.chargie-fleet .cf-summary-item .cf-num {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 */
}

.chargie-fleet.chargie-fleet .cf-summary-label {
	color: var(--cf-ink-3); /* 4.76:1 on white, 14px — at the size floor */
}

/* ---- Boot / noscript --------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-boot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 3rem 1rem;
	color: var(--cf-ink-2);
	font-size: 0.9375rem;
	text-align: center;
}

.chargie-fleet.chargie-fleet .cf-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--cf-line);
	border-top-color: var(--cf-navy);
	animation: cf-spin 0.8s linear infinite;
}

@keyframes cf-spin {
	to {
		transform: rotate(360deg);
	}
}

.chargie-fleet.chargie-fleet.cf-noscript {
	padding: 2rem 1.25rem;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-card);
	color: var(--cf-ink-2);
	text-align: center;
}

/* ---- Service banner ---------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	padding: 0.85rem 1.1rem;
	margin-bottom: 1.25rem;
	background: var(--cf-warn-soft);
	border: 1px solid rgba(180, 83, 9, 0.28);
	border-left: 3px solid var(--cf-warn);
	border-radius: var(--cf-r-md);
	font-size: 0.9375rem;
	color: var(--cf-ink); /* 15.64:1 on --cf-warn-soft */
}

.chargie-fleet.chargie-fleet .cf-banner strong {
	font-weight: 600;
	color: var(--cf-warn); /* 6.37:1 on --cf-warn-soft */
}

/* ==========================================================================
   7. HERO (logged out)
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding: 2.5rem 1.5rem;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-card);
	box-shadow: var(--cf-shadow);
	text-align: center;
}

.chargie-fleet.chargie-fleet .cf-hero-art {
	flex: none;
	width: 104px;
	padding: 1rem;
	background: var(--cf-surface-2);
	border-radius: var(--cf-r-card);
	color: var(--cf-navy);
}

.chargie-fleet.chargie-fleet .cf-hero-copy {
	max-width: 34em;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-hero-title {
	margin-bottom: 0.6rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-hero-sub {
	margin-bottom: 1.35rem;
	color: var(--cf-ink-2); /* 7.58:1 */
	font-size: 1rem;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-hero-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 28em;
	margin: 0 auto 1.6rem;
	font-size: 0.9375rem;
	color: var(--cf-ink-2);
	text-align: left;
}

.chargie-fleet.chargie-fleet .cf-hero-list li {
	position: relative;
	padding-left: 1.6em;
}

.chargie-fleet.chargie-fleet .cf-hero-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cf-navy);
}

.chargie-fleet.chargie-fleet .cf-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

@media (min-width: 640px) {
	.chargie-fleet.chargie-fleet .cf-hero {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 3rem;
		text-align: left;
	}

	.chargie-fleet.chargie-fleet .cf-hero-art {
		width: 132px;
	}

	.chargie-fleet.chargie-fleet.chargie-fleet .cf-hero-list {
		margin-left: 0;
	}

	.chargie-fleet.chargie-fleet .cf-hero-actions {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   8. (removed) ORDERS PANEL
   ==========================================================================

   The "Your Chargie orders" panel — a form asking the customer to type an
   order number, and the list it built — was removed along with its markup.
   It asked for something the site already knows: the visitor is signed in
   to the WooCommerce account that holds their orders, so proof of purchase
   was never theirs to supply.

   The section number is kept so the numbering below does not shift. If
   order information is ever wanted on this page it should be DERIVED from
   the session, not asked for, and it will want new styles anyway.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   9. EMPTY STATE
   An invitation to act, not an apology.
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-empty {
	padding: 0.5rem 0 2rem;
}

.chargie-fleet.chargie-fleet .cf-empty-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1rem;
	padding: 2.75rem 1.5rem;
	background: var(--cf-surface);
	border: 1px dashed var(--cf-line-2);
	border-radius: var(--cf-r-card);
	text-align: center;
}

.chargie-fleet.chargie-fleet .cf-empty-art {
	width: 76px;
	color: var(--cf-navy);
}

.chargie-fleet.chargie-fleet .cf-empty-title {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cf-ink);
}

/*
 * Onboarding is one instruction now, so it is a sentence rather than a list of
 * one. `.cf-steps` below still numbers the pairing modal's three steps.
 */
.chargie-fleet.chargie-fleet .cf-empty-step {
	max-width: 34em;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet .cf-empty-step strong {
	color: var(--cf-ink); /* 17.41:1 on white */
	font-weight: 600;
}

.chargie-fleet.chargie-fleet .cf-steps {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 28em;
	counter-reset: cf-step;
	font-size: 0.9375rem;
	color: var(--cf-ink-2);
	text-align: left;
}

.chargie-fleet.chargie-fleet .cf-steps li {
	position: relative;
	padding-left: 2.25em;
	counter-increment: cf-step;
}

.chargie-fleet.chargie-fleet .cf-steps li::before {
	content: counter(cf-step);
	position: absolute;
	left: 0;
	top: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--cf-navy);
	color: var(--cf-surface); /* 11.50:1 */
	font-family: var(--cf-mono);
	font-size: 0.75em;
	font-weight: 600;
}

.chargie-fleet.chargie-fleet .cf-steps strong {
	color: var(--cf-ink);
	font-weight: 600;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-steps-tight {
	gap: 0.55rem;
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   10. STAGE — one device in detail, the rest in a list
   ==========================================================================

   The page is a detail position and a list beneath it, not a grid of equals.
   One device is shown in full — photo, charge track, readings and its settings
   inline — and every other device is a row you can either focus (it swaps into
   the detail position) or expand where it sits.

   With a single device the list is empty and hidden, and what is left is the
   one card this page has always been.
   -------------------------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-stage {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* The detail position. `min-width: 0` so a long device name ellipsises inside
   the card instead of widening it past the viewport. */
.chargie-fleet.chargie-fleet .cf-focus {
	min-width: 0;
}

/*
 * The focused card is the full page width, where the card's single column was
 * drawn for a ~320px grid track. Left as one column it strands the identity
 * block — name, model, chip — in a third of the width with two thirds empty
 * beside it, and pushes the charge track, the readings and the settings a
 * screenful further down.
 *
 * Two columns instead: who this phone is on the left, what it is doing on the
 * right, and everything that wants the full measure — settings, errors, the
 * footer — spanning both. Below 720px it falls back to the stacked card, which
 * is what the expanded rows use at every width.
 */
@media (min-width: 720px) {
	/*
	 * (0,3,1), not (0,3,0). `.cf-card` below sets `display: flex` and `gap` at
	 * (0,3,0) and is declared LATER in this file, so an equal-specificity rule
	 * here loses the tie and leaves a grid-templated flex container: the columns
	 * compute, and nothing uses them. The card root is an <article>, so the type
	 * selector is the cheapest way to win outright rather than by ordering.
	 */
	.chargie-fleet.chargie-fleet article.cf-card-focus {
		display: grid;
		grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
		column-gap: 2rem;
		align-items: start;
	}

	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-top {
		grid-column: 1;
	}

	.chargie-fleet.chargie-fleet .cf-card-focus .cf-meter {
		grid-column: 2;
	}

	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-error,
	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-settings,
	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-info,
	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-schedule,
	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-foot {
		grid-column: 1 / -1;
	}

	/* `margin-top: auto` is the flex trick that pins the footer to the bottom of
	   a stretched grid-of-cards row. There is no row to line up with here. */
	.chargie-fleet.chargie-fleet .cf-card-focus .cf-card-foot {
		margin-top: 0;
	}
}

.chargie-fleet.chargie-fleet .cf-card {
	position: relative; /* anchors the selection checkbox and the open menu */
	min-width: 0;
	height: 100%; /* fill the stretched grid row so footers can align */
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: 1.25rem;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-card);
	box-shadow: var(--cf-shadow);
	transition: box-shadow var(--cf-t) ease, border-color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-card:hover {
	border-color: var(--cf-line-2);
	box-shadow: var(--cf-shadow-lift);
}

/* An open menu must paint over the cards after it in the grid, and a grid item
   only takes part in that ordering once it is positioned. */
.chargie-fleet.chargie-fleet .cf-card.is-menu-open {
	z-index: 20;
}

.chargie-fleet.chargie-fleet .cf-card.is-selected {
	border-color: var(--cf-navy);
	box-shadow: 0 0 0 1px var(--cf-navy), var(--cf-shadow-lift);
}

/* ---- Batch selection --------------------------------------------------- */
/* Out of the way until it is wanted: shown on hover, on keyboard focus, and
   permanently once any card in the fleet is selected. */

.chargie-fleet.chargie-fleet .cf-card-select {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	opacity: 0;
	transition: opacity var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-card:hover .cf-card-select,
.chargie-fleet.chargie-fleet .cf-card-select:focus-visible,
.chargie-fleet.chargie-fleet .cf-card-select:checked,
.chargie-fleet.chargie-fleet .cf-stage.is-selecting .cf-card-select {
	opacity: 1;
}

.chargie-fleet.chargie-fleet .cf-card.is-pending {
	border-color: rgba(30, 58, 95, 0.35);
}

.chargie-fleet.chargie-fleet .cf-card.is-busy {
	opacity: 0.9;
}

/* Offline is carried by the chip and the desaturated track fill, not by dimming
   the card. The old blanket 0.72 opacity is exactly what made "Last seen",
   Refresh and Remove illegible — only the photo fades now. */
.chargie-fleet.chargie-fleet .cf-card.is-offline .cf-plinth {
	opacity: 0.6;
}

.chargie-fleet.chargie-fleet .cf-card-top {
	display: flex;
	gap: 1.1rem;
}

/* ---- Phone plinth ------------------------------------------------------ */
/* A soft block behind every device photo, so a bright PNG and a dark PNG read
   as the same object. Fixed geometry = consistent card rhythm. */

.chargie-fleet.chargie-fleet .cf-plinth {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 144px;
	padding: 8px;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-radius: 12px;
	overflow: hidden;
}

.chargie-fleet.chargie-fleet .cf-phone,
.chargie-fleet.chargie-fleet .cf-phone-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.chargie-fleet.chargie-fleet .cf-phone-fallback {
	color: var(--cf-navy);
}

/* (0,4,0) — inside the plinth the silhouette is height-led, not width-led. */
.chargie-fleet.chargie-fleet .cf-phone-fallback .cf-phone-svg {
	width: auto;
	height: 126px;
	max-width: 100%;
	max-height: none;
}

/* ---- Card head --------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-card-head {
	flex: 1;
	min-width: 0;
}

.chargie-fleet.chargie-fleet .cf-name-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.chargie-fleet.chargie-fleet .cf-name-wrap {
	flex: 1;
	min-width: 0;
	margin-bottom: 0.1rem;
}

.chargie-fleet.chargie-fleet .cf-name {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-bottom: 1px dashed transparent;
	color: var(--cf-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	transition: border-color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-name:hover {
	border-bottom-color: var(--cf-line-2);
}

.chargie-fleet.chargie-fleet .cf-name-input {
	width: 100%;
	padding: 0.15em 0.4em;
	margin: -0.15em -0.4em;
	background: var(--cf-surface);
	border: 1px solid var(--cf-navy);
	border-radius: var(--cf-r-sm);
	color: var(--cf-ink);
	font-size: 1.0625rem;
	font-weight: 600;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-model {
	margin-bottom: 0.55rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cf-ink-3); /* 4.76:1 on white at exactly 14px */
}

/* ---- Card context menu ------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-menu {
	position: relative;
	flex: none;
}

.chargie-fleet.chargie-fleet .cf-menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: -0.2rem -0.35rem 0 0;
	border: 1px solid transparent;
	border-radius: var(--cf-r-sm);
	color: var(--cf-ink-2); /* dots inherit: 7.58:1 on white, past the 3:1 floor */
	transition: background-color var(--cf-t) ease, border-color var(--cf-t) ease,
		color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-menu-btn:hover,
.chargie-fleet.chargie-fleet .cf-menu-btn[aria-expanded='true'] {
	background: var(--cf-surface-2);
	border-color: var(--cf-line);
	color: var(--cf-ink); /* 16.37:1 on --cf-surface-2 */
}

/*
 * Three spans, not an <svg> and not U+22EF: nothing here depends on a font
 * shipping the glyph, and nothing is caught by the theme's global
 * `.chargie-page svg { width: 24px }` reset.
 */
.chargie-fleet.chargie-fleet .cf-menu-dots {
	display: flex;
	align-items: center;
	gap: 3px;
}

.chargie-fleet.chargie-fleet .cf-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}

.chargie-fleet.chargie-fleet .cf-menu-list {
	position: absolute;
	top: calc(100% + 4px);
	right: -0.35rem;
	z-index: 30;
	min-width: 12rem;
	padding: 0.3rem;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line-2);
	border-radius: var(--cf-r-md);
	box-shadow: var(--cf-shadow-lift);
}

.chargie-fleet.chargie-fleet .cf-menu-item {
	display: block;
	width: 100%;
	padding: 0.5rem 0.65rem;
	border-radius: var(--cf-r-sm);
	color: var(--cf-ink); /* 17.41:1 on white */
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	transition: background-color var(--cf-t) ease, color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-menu-item:hover:not(:disabled),
.chargie-fleet.chargie-fleet .cf-menu-item:focus-visible {
	background: var(--cf-surface-2);
	color: var(--cf-ink); /* 16.37:1 on --cf-surface-2 */
}

.chargie-fleet.chargie-fleet .cf-menu-item:disabled {
	color: var(--cf-ink-3); /* 4.76:1 on white, at 15px */
	cursor: not-allowed;
}

.chargie-fleet.chargie-fleet .cf-menu-item-danger {
	margin-top: 0.3rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--cf-line);
	border-radius: 0 0 var(--cf-r-sm) var(--cf-r-sm);
	color: var(--cf-ink-2); /* 7.58:1 — quiet until it is aimed at */
}

.chargie-fleet.chargie-fleet .cf-menu-item-danger:hover:not(:disabled),
.chargie-fleet.chargie-fleet .cf-menu-item-danger:focus-visible {
	background: var(--cf-alert-soft);
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
}

/* ---- Status chip ------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.6rem;
	padding: 0.3em 0.75em 0.3em 0.65em;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-pill);
	background: var(--cf-surface-2);
	color: var(--cf-ink-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.chargie-fleet.chargie-fleet .cf-chip-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.chargie-fleet.chargie-fleet .cf-chip-charging {
	background: var(--cf-charge-soft);
	border-color: rgba(21, 128, 61, 0.22);
	color: var(--cf-charge); /* 6.49:1 on --cf-charge-soft */
}

.chargie-fleet.chargie-fleet .cf-chip-paused {
	background: var(--cf-surface-2);
	border-color: var(--cf-line);
	color: var(--cf-hold); /* 7.12:1 on --cf-surface-2 */
}

.chargie-fleet.chargie-fleet .cf-chip-offline {
	background: var(--cf-warn-soft);
	border-color: rgba(180, 83, 9, 0.26);
	color: var(--cf-warn); /* 6.37:1 on --cf-warn-soft */
}

.chargie-fleet.chargie-fleet .cf-chip-stale {
	background: var(--cf-alert-soft);
	border-color: rgba(194, 65, 12, 0.26);
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
	cursor: help;
}

/*
 * No Bluetooth link to the Chargie unit. Warn-coloured rather than neutral: the
 * battery is unprotected, which is a condition to act on, not a resting state.
 * It shares the offline palette because both mean "not in control right now" —
 * the chip text and the line beneath say which.
 */
.chargie-fleet.chargie-fleet .cf-chip-nolink {
	background: var(--cf-warn-soft);
	border-color: rgba(180, 83, 9, 0.26);
	color: var(--cf-warn); /* 6.37:1 on --cf-warn-soft */
	cursor: help;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-nolink {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--cf-warn); /* 7.09:1 on --cf-surface */
}

/* ---- Over temperature -------------------------------------------------- */
/*
 * The alert palette, not the warn palette that offline and nolink share. That
 * is deliberate and it is the whole point of the distinction: offline and
 * nolink mean "not in control right now", which is a condition to look into.
 * This means the hardware is protecting itself from damage this minute and the
 * owner should go and unplug something. A third shade of amber would file it
 * with the other two.
 */
.chargie-fleet.chargie-fleet .cf-chip-overtemp {
	background: var(--cf-alert-soft);
	border-color: rgba(194, 65, 12, 0.32);
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
	cursor: help;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-overtemp {
	margin-top: 0.5rem;
	padding: 0.5rem 0.7rem;
	background: var(--cf-alert-soft);
	border: 1px solid rgba(194, 65, 12, 0.28);
	border-left: 3px solid var(--cf-action-ink);
	border-radius: var(--cf-r-sm);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
}

/* The card's own edge picks it up too, so the condition is legible from the
   shape of the page and not only from reading the words. */
.chargie-fleet.chargie-fleet .cf-card.is-overtemp,
.chargie-fleet.chargie-fleet .cf-row-item.is-overtemp {
	border-color: rgba(194, 65, 12, 0.45);
}

/*
 * The same fact after the phone has gone quiet — and deliberately NOT in the
 * alert palette above.
 *
 * A device that was too hot forty minutes ago and has since dropped off the
 * network is not an emergency on this screen; a device that is too hot right
 * now is. If both wore the same orange, the one you must act on would stop
 * standing out — the loud style would be spent on history. So this reads as
 * what it is: a quiet note of record, in the same register as .cf-note.
 * --cf-ink-2 on --cf-surface-2 is 7.12:1.
 */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-overtemp-past {
	margin-top: 0.5rem;
	padding: 0.5rem 0.7rem;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-left: 3px solid var(--cf-line-2);
	border-radius: var(--cf-r-sm);
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--cf-ink-2);
}

/* (0,4,0) — the expanded row's card gives up its frame, so its top rule is the
   only edge it has left to carry this. */
.chargie-fleet.chargie-fleet .cf-row-panel .cf-card.is-overtemp {
	border-top-color: rgba(194, 65, 12, 0.45);
}

/* ---- Linked Chargie unit ----------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-chargie {
	font-size: 0.875rem;
	color: var(--cf-ink-2); /* 7.58:1 */
}

.chargie-fleet.chargie-fleet .cf-chargie.is-detached {
	color: var(--cf-ink-3); /* 4.76:1 at 14px */
	font-style: italic;
}

/* ==========================================================================
   11. THE CHARGE TRACK — the one bold move
   ==========================================================================

   ONE rail per device instead of a battery bar plus a separate slider:

     ┌────────────────────────────────────────────────┐
     │███████████████████░░░░░░░░│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
     │ fill = battery            ▲ mark = charge limit│
     └────────────────────────────────────────────────┘
       87%                                    Limit 90%

   It states the product's actual promise: the fill stops at the mark.

   Geometry is driven by two custom properties written by fleet.js:
     --cf-level  battery_level, 0–100%
     --cf-limit  the effective charge limit, 0–100%
     --cf-min    MIN_LIMIT, so the CSS never hard-codes the JS constant

   The real <input type="range"> is overlaid across the adjustable span of the
   track, transparent but NOT `opacity:0` — an opacity-0 element cannot paint a
   focus ring, and keyboard users need one. Its parts are individually
   transparent instead, so :focus-visible still draws.
   -------------------------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-meter {
	padding-top: 1rem;
	border-top: 1px solid var(--cf-line);
}

.chargie-fleet.chargie-fleet .cf-meter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.chargie-fleet.chargie-fleet .cf-track {
	--cf-level: 0%;
	--cf-limit: 100%;
	--cf-min: 50%;
	position: relative;
	height: 34px;
	display: flex;
	align-items: center;
}

.chargie-fleet.chargie-fleet .cf-track-rail {
	position: relative;
	width: 100%;
	height: 18px;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line-2);
	border-radius: var(--cf-r-pill);
	overflow: hidden;
}

/* Fill = battery level. Colour = state, not level; the exact number is stated
   in mono directly below, so the bar carries state instead of duplicating it. */
.chargie-fleet.chargie-fleet .cf-track-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--cf-level);
	background: var(--cf-hold);
	transition: width 220ms ease, background-color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-track-charging .cf-track-fill {
	background: var(--cf-charge); /* 6.70:1 vs rail — past the 3:1 UI floor */
}

.chargie-fleet.chargie-fleet .cf-track-paused .cf-track-fill {
	background: var(--cf-hold); /* 7.12:1 vs rail */
}

.chargie-fleet.chargie-fleet .cf-track-offline .cf-track-fill {
	background: var(--cf-ink-3); /* desaturated; 4.47:1 vs rail, still >3:1 */
}

.chargie-fleet.chargie-fleet .cf-track-stale .cf-track-fill {
	background: var(--cf-warn); /* 6.66:1 vs rail */
}

/*
 * Stated rather than inherited. Without this the bar falls through to the
 * default hold colour, which is the same bar a paused phone draws — and a
 * phone that stopped charging because it is too hot is not a phone sitting
 * comfortably at its limit. Ratio measured against the rail below.
 */
.chargie-fleet.chargie-fleet .cf-track-overtemp .cf-track-fill {
	background: var(--cf-action-ink); /* 4.87:1 vs rail — past the 3:1 UI floor */
}

/* "Won't charge past here". A translucent scrim rather than an opaque block, so
   a battery already above its limit still shows its true fill underneath. The
   hatch is texture, not noise: 1px navy at 12% every 7px. */
.chargie-fleet.chargie-fleet .cf-track-beyond {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cf-limit);
	right: 0;
	background-color: rgba(246, 248, 251, 0.78);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(30, 58, 95, 0.12) 0 1px,
		transparent 1px 7px
	);
	transition: left 220ms ease;
}

/* The stop mark. Lives outside the rail so its thumb is not clipped. */
.chargie-fleet.chargie-fleet .cf-track-mark {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cf-limit);
	width: 2px;
	margin-left: -1px;
	background: var(--cf-navy); /* 10.81:1 vs rail */
	border-radius: 1px;
	pointer-events: none;
	transition: left 220ms ease;
}

.chargie-fleet.chargie-fleet .cf-track-thumb {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	background: var(--cf-surface);
	border: 3px solid var(--cf-navy);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(11, 27, 43, 0.25);
}

/* Pending limit change: dashed mark + dashed thumb ring. No spinner. */
.chargie-fleet.chargie-fleet .cf-track.is-pending .cf-track-mark {
	background: repeating-linear-gradient(
		to bottom,
		var(--cf-navy) 0 4px,
		transparent 4px 8px
	);
}

.chargie-fleet.chargie-fleet .cf-track.is-pending .cf-track-thumb {
	border-style: dashed;
}

/* Charging stopped: the mark parks at 0, so the whole rail shades over. Tinting
   it with the alert ink says "off" rather than "limited". */
.chargie-fleet.chargie-fleet .cf-track.is-stopped .cf-track-mark {
	background: var(--cf-action-ink);
}

.chargie-fleet.chargie-fleet .cf-track.is-stopped .cf-track-thumb {
	border-color: var(--cf-action-ink);
}

/* No limit known yet — nothing to mark. */
.chargie-fleet.chargie-fleet .cf-track.is-unset .cf-track-mark,
.chargie-fleet.chargie-fleet .cf-track.is-unset .cf-track-beyond {
	display: none;
}

/* ---- The real control -------------------------------------------------- */
/*
 * Spans only the adjustable range (MIN_LIMIT…100), because a range input maps
 * its min value to its own left edge. Stretched across the full 0–100 rail,
 * dragging to x=0 would yield 50 while the mark jumped to mid-rail. Anchoring
 * the input's left edge at --cf-min keeps pointer position and mark position
 * in agreement.
 */
.chargie-fleet.chargie-fleet .cf-slider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--cf-min);
	right: 0;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: grab;
	touch-action: pan-y;
	-webkit-appearance: none;
	appearance: none;
}

.chargie-fleet.chargie-fleet .cf-slider:active:not(:disabled) {
	cursor: grabbing;
}

.chargie-fleet.chargie-fleet .cf-slider:disabled {
	cursor: not-allowed;
}

.chargie-fleet.chargie-fleet .cf-slider::-webkit-slider-runnable-track {
	height: 100%;
	background: transparent;
	border: 0;
}

.chargie-fleet.chargie-fleet .cf-slider::-moz-range-track {
	height: 100%;
	background: transparent;
	border: 0;
}

.chargie-fleet.chargie-fleet .cf-slider::-moz-range-progress {
	background: transparent;
}

/* A deliberately narrow thumb: the browser insets the usable track by half the
   thumb width, so a wide thumb would offset every value from the visual mark. */
.chargie-fleet.chargie-fleet .cf-slider::-webkit-slider-thumb {
	width: 4px;
	height: 34px;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
}

.chargie-fleet.chargie-fleet .cf-slider::-moz-range-thumb {
	width: 4px;
	height: 34px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.chargie-fleet.chargie-fleet .cf-slider:focus-visible {
	outline: 2px solid var(--cf-navy);
	outline-offset: 2px;
	border-radius: var(--cf-r-pill);
}

/* ---- Legend ------------------------------------------------------------ */

.chargie-fleet.chargie-fleet .cf-meter-legend {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

.chargie-fleet.chargie-fleet .cf-level {
	font-family: var(--cf-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 */
	letter-spacing: -0.01em;
}

.chargie-fleet.chargie-fleet .cf-limit-label {
	font-family: var(--cf-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cf-navy); /* 11.50:1 */
	text-align: right;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-pending {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cf-navy); /* 11.50:1 */
}

/*
 * The settings bundle's own state, kept separate from the limit's pending line
 * above — different sources (desired_settings vs desired_limit), and they can
 * legitimately disagree.
 */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-settings-state {
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cf-navy); /* 11.50:1 on white */
}

/*
 * Stalled: asked repeatedly, still not confirmed. It reads as a problem to act
 * on rather than a slow spinner, because that is what it is.
 * --cf-action-ink on --cf-alert-soft = 4.53:1.
 */
.chargie-fleet.chargie-fleet .cf-settings-state.is-stalled {
	padding: 0.4rem 0.6rem;
	background: var(--cf-alert-soft);
	border-left: 3px solid var(--cf-action-ink);
	border-radius: var(--cf-r-sm);
	color: var(--cf-action-ink);
	cursor: help;
}

/* ---- Readings strip ----------------------------------------------------- */
/*
 * Volts / amps / watts / temperature, under the track. Mono numbers so the
 * columns hold still between polls, and a literal "—" for anything the device
 * did not send: a stale number here would be read as live hardware truth.
 */

.chargie-fleet.chargie-fleet .cf-readings {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.1rem;
	margin-top: 0.75rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--cf-line);
}

.chargie-fleet.chargie-fleet .cf-reading {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2em;
}

.chargie-fleet.chargie-fleet .cf-reading-value {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 */
}

/* 12px, so --cf-ink-2 (7.58:1) — never --cf-ink-3, which is only cleared
   for use at 14px and up. */
.chargie-fleet.chargie-fleet .cf-reading-unit {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--cf-ink-2);
}

.chargie-fleet.chargie-fleet .cf-reading.is-empty .cf-reading-value {
	color: var(--cf-ink-3); /* 4.76:1 at 15px — an absent reading, stated plainly */
	font-weight: 500;
}

/*
 * The temperature cell is either real degrees or a labelled thermal state, and
 * the two are never interchanged: iOS exposes no battery-temperature API at
 * all, so a degree figure there would be invented. Each state reuses a chip
 * pair already proven in section 10.
 */
.chargie-fleet.chargie-fleet .cf-reading-temp.is-state .cf-reading-value {
	padding: 0.15em 0.55em;
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-pill);
	background: var(--cf-surface-2);
	color: var(--cf-hold); /* 7.12:1 on --cf-surface-2 */
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/*
 * These carry `.is-state` too, so they out-specify the neutral chip above
 * rather than tying with it — a (0,4,0) tone rule would silently lose to the
 * (0,5,0) base and every state would render grey. `cf-tone-hold` needs no rule:
 * the base chip is already the held/Fair colour.
 */
.chargie-fleet.chargie-fleet .cf-reading-temp.is-state.cf-tone-ok .cf-reading-value {
	background: var(--cf-charge-soft);
	border-color: rgba(21, 128, 61, 0.22);
	color: var(--cf-charge); /* 6.49:1 on --cf-charge-soft */
}

.chargie-fleet.chargie-fleet .cf-reading-temp.is-state.cf-tone-warn .cf-reading-value {
	background: var(--cf-warn-soft);
	border-color: rgba(180, 83, 9, 0.26);
	color: var(--cf-warn); /* 6.37:1 on --cf-warn-soft */
}

.chargie-fleet.chargie-fleet .cf-reading-temp.is-state.cf-tone-alert .cf-reading-value {
	background: var(--cf-alert-soft);
	border-color: rgba(194, 65, 12, 0.26);
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
}

/*
 * Readings that can no longer be trusted are dimmed, not hidden — they were
 * true once and the strip's `title` says when. Dimming is done by moving the
 * colour, not by dropping opacity: an opacity of 0.7 on the 12px units lands
 * at 3.59:1 and fails AA, whereas these two pairs still pass.
 *   value  --cf-ink-3 on white  4.76:1 (at 15px)
 *   unit   --cf-ink-2 on white  7.58:1 (at 12px)
 */
.chargie-fleet.chargie-fleet .cf-readings.is-stale {
	cursor: help;
}

.chargie-fleet.chargie-fleet .cf-readings.is-stale .cf-reading-value {
	color: var(--cf-ink-3);
	font-weight: 500;
}

.chargie-fleet.chargie-fleet .cf-readings.is-stale .cf-reading-temp.is-state .cf-reading-value {
	background: var(--cf-surface-2);
	border-color: var(--cf-line);
	color: var(--cf-ink-2); /* 7.12:1 on --cf-surface-2 */
}

/* ==========================================================================
   12. CARD FOOT
   ========================================================================== */

.chargie-fleet.chargie-fleet .cf-card-error {
	padding: 0.6rem 0.8rem;
	background: var(--cf-alert-soft);
	border: 1px solid rgba(194, 65, 12, 0.24);
	border-radius: var(--cf-r-sm);
	color: var(--cf-action-ink); /* 4.53:1 on --cf-alert-soft */
	font-size: 0.875rem;
	font-weight: 500;
}

/*
 * `margin-top: auto` eats the leftover height in the card's flex column, so the
 * footer sits on the card's bottom edge. Cards in a row are already equal height
 * (grid stretch); this is what makes their footers line up when one card carries
 * an extra line such as the pending-limit notice.
 */
.chargie-fleet.chargie-fleet .cf-card-foot {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--cf-line);
}

.chargie-fleet.chargie-fleet .cf-last-seen {
	font-family: var(--cf-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem; /* --cf-ink-3 is only cleared for use at >=14px */
	color: var(--cf-ink-3); /* 4.76:1 on white */
}

/* ==========================================================================
   12b. INLINE SETTINGS — the focused card's own settings section
   ==========================================================================

   The settings the app shows, in the card rather than behind a click. It reuses
   the .cf-set-* rows from section 13b unchanged; only the frame around them is
   new, because the frame is the one thing a card needs and a dialog does not.
   -------------------------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-card-settings:empty,
.chargie-fleet.chargie-fleet .cf-card-info:empty,
.chargie-fleet.chargie-fleet .cf-card-schedule:empty {
	display: none;
}

/*
 * Each section is its heading and, under it, the panel that heading opens —
 * together, in the band between the card body and the footer, across the full
 * width of the card.
 *
 * No rule above the heading. That rule is what made these read as two more
 * sections bolted onto the card; without it the headings sit on the band's own
 * line and the card stays one thing. The panel brings its own rule below, where
 * a form does need separating from what it opened under.
 */
.chargie-fleet.chargie-fleet .cf-card-settings .cf-inline-panel,
.chargie-fleet.chargie-fleet .cf-card-info .cf-inline-panel,
.chargie-fleet.chargie-fleet .cf-card-schedule .cf-inline-panel {
	padding-top: 1.1rem;
	border-top: 1px solid var(--cf-line);
}

/*
 * The heading is a neutral wrapper; the button inside it carries the type. A
 * heading containing a button is the disclosure pattern that keeps BOTH: the
 * section stays navigable by heading, and the control is a real button.
 *
 * (0,3,1). The theme's `.chargie-page h3`-shaped rules are (0,1,1) and the
 * tier-1 reset is (0,2,1); a type selector here breaks the tie against both.
 */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h3.cf-inline-title {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

/*
 * Shares the group titles' 12px uppercase scale but takes full ink and a wider
 * letterspace, so "Settings" reads as the section and "Charging", "Protection"
 * as the groups inside it. Identical styling on both made the two levels look
 * like one flat list of headings.
 */
.chargie-fleet.chargie-fleet .cf-inline-toggle {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: -0.35rem -0.5rem;
	padding: 0.35rem 0.5rem;
	border-radius: var(--cf-r-sm);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--cf-ink); /* 17.41:1 on white, at 12px */
	transition: background-color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-inline-toggle:hover {
	background: var(--cf-surface-2); /* --cf-ink on it: 16.37:1 */
}

/* The chevron is 2px of border on a rotated square; at this weight it needs a
   touch more room from the word than the row's does. */
.chargie-fleet.chargie-fleet .cf-inline-toggle .cf-chevron {
	flex: none;
}

.chargie-fleet.chargie-fleet .cf-inline-panel {
	padding-top: 1rem;
}

/* ---- Information: what the unit reports about itself -------------------- */
/*
 * Read-only reference data, so it reads as a table of facts rather than a form:
 * labels quiet on the left, values in the mono face on the right.
 *
 * The values are what a customer reads out to support, so they are selectable
 * in one click and are allowed to wrap rather than being clipped — a truncated
 * serial or firmware string is worse than a wrapped one. `auto` rather than a
 * fixed label column so an unrecognised label the app invents tomorrow still
 * lines up with the rest.
 */
.chargie-fleet.chargie-fleet .cf-info-list {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.5rem 1.25rem;
	align-items: baseline;
}

.chargie-fleet.chargie-fleet .cf-info-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: baseline;
}

/* Subgrid is not universal. Without it each row is its own two-column grid,
   which still reads correctly — the columns simply stop aligning across rows. */
@supports not (grid-template-columns: subgrid) {
	.chargie-fleet.chargie-fleet .cf-info-row {
		grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
	}
}

.chargie-fleet.chargie-fleet .cf-info-label {
	font-size: 0.8125rem;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-info-value {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--cf-ink); /* 17.41:1 on white */
	overflow-wrap: anywhere; /* a long value wraps; it is never cut off */
	user-select: all; /* one click takes the whole value, not a word of it */
	-webkit-user-select: all;
}

/*
 * Two columns once there is room. A card in the detail position is the full
 * page width, and a single column of settings rows across 1000px puts a
 * checkbox half a metre from its label.
 */
@media (min-width: 720px) {
	.chargie-fleet.chargie-fleet .cf-inline-body {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 2rem;
		align-items: start;
	}

	/*
	 * The group rule is a separator between stacked groups, and `:first-child`
	 * is enough to suppress it in one column. In two columns the first group of
	 * the SECOND column is not the first child, so it drew a rule its neighbour
	 * did not and sat a border's height lower than it. With exactly two columns
	 * the top row is children 1 and 2, and both must go bare.
	 */
	.chargie-fleet.chargie-fleet .cf-inline-body .cf-set-group:nth-child(-n + 2) {
		padding-top: 0;
		border-top: 0;
	}
}

.chargie-fleet.chargie-fleet .cf-inline-foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 1rem;
}

/* ==========================================================================
   12b-2. CHARGING SCHEDULE — the week, one row per weekday
   ==========================================================================

   Seven rows in Monday-first ISO order, which is the order they go on the wire.
   The frame is the disclosure the other two card sections already use; only the
   week itself is new.

   Four columns at width — day, time, hold, top-up — and a stacked block below
   720px, which is where the focused card gives up its own two columns. The
   column headings are for the eye alone: each control carries a label naming
   both its day and its field, so nothing depends on a header being associated
   with a cell.
   -------------------------------------------------------------------------- */

/*
 * SPACING HERE IS `gap`, NEVER `margin`, AND THAT IS NOT A STYLE CHOICE.
 *
 * Tier 1a resets `margin` on every <p> at (0,4,1). A component rule carrying
 * the doubled prefix is (0,3,0) and LOSES to it, so a margin set on any <p>
 * below would silently compute to 0 — measured on the live dashboard, where
 * `.cf-set-help`, `.cf-settings-state` and `.cf-panel-status` are all already
 * doing exactly that. The panel and the rows therefore space their own children
 * from the parent, which no reset touches.
 */
.chargie-fleet.chargie-fleet .cf-card-schedule .cf-inline-panel {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

/* The footer's own margin is a <div>'s and does survive; on top of the gap
   above it would double the space before Apply. */
.chargie-fleet.chargie-fleet .cf-card-schedule .cf-inline-foot {
	margin-top: 0;
}

/* What the week does, said once above the grid rather than as help text on
   fourteen controls. --cf-ink-2 on white = 7.58:1. */
.chargie-fleet.chargie-fleet .cf-sched-lede {
	font-size: 0.8125rem;
	color: var(--cf-ink-2);
}

/* The week's own state, in the same register as .cf-settings-state — a pending
   bundle and a pending week are the same kind of news. */
.chargie-fleet.chargie-fleet .cf-sched-state {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cf-navy); /* 11.50:1 on white */
}

/* Stalled: asked repeatedly, still not confirmed. It reads as a problem to act
   on rather than a slow spinner, because that is what it is.
   --cf-action-ink on --cf-alert-soft = 4.53:1. */
.chargie-fleet.chargie-fleet .cf-sched-state.is-stalled {
	padding: 0.4rem 0.6rem;
	background: var(--cf-alert-soft);
	border-left: 3px solid var(--cf-action-ink);
	border-radius: var(--cf-r-sm);
	color: var(--cf-action-ink);
}

/* The chip rides the section heading, whose flex row would otherwise stretch
   it to the line's full height. */
.chargie-fleet.chargie-fleet .cf-sched-chip {
	flex: none;
	align-self: center;
	letter-spacing: 0.04em;
}

.chargie-fleet.chargie-fleet .cf-sched-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

/* "Set up a schedule" must not stretch the width of the panel just because it
   is a child of a stretching flex column. */
.chargie-fleet.chargie-fleet .cf-sched-body .cf-btn {
	align-self: flex-start;
}

.chargie-fleet.chargie-fleet .cf-sched-grid {
	display: grid;
	/* The day column takes the slack; the three field columns take exactly what
	   their inputs need, so the week reads as an aligned table rather than as
	   seven independently-sized rows. */
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	gap: 0 1.25rem;
	align-items: center;
}

.chargie-fleet.chargie-fleet .cf-sched-head,
.chargie-fleet.chargie-fleet .cf-sched-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
}

/* Subgrid is not universal. Without it each row is its own four-column grid,
   which still reads correctly — the columns simply stop aligning across rows. */
@supports not (grid-template-columns: subgrid) {
	.chargie-fleet.chargie-fleet .cf-sched-head,
	.chargie-fleet.chargie-fleet .cf-sched-row {
		grid-template-columns: minmax(0, 1fr) auto auto auto;
	}
}

.chargie-fleet.chargie-fleet .cf-sched-head {
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--cf-line);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cf-ink-2); /* 7.58:1 on white, and never the only carrier of a
	                           field's meaning — see the cell labels below. */
}

/* The row's own gap, not a margin on the error <p> below it — see the note at
   the head of this section. */
.chargie-fleet.chargie-fleet .cf-sched-row {
	padding: 0.5rem 0;
	row-gap: 0.3rem;
}

.chargie-fleet.chargie-fleet .cf-sched-row + .cf-sched-row {
	border-top: 1px solid var(--cf-line);
}

/*
 * A day that is switched off. Dimmed rather than disabled: its values are still
 * sent, and setting a day up before turning it on is a reasonable thing to
 * want. 0.55 takes --cf-ink to about 8.9:1 and --cf-ink-2 to about 4.6:1, both
 * still past AA — this is a de-emphasis, not a "you cannot read this".
 */
.chargie-fleet.chargie-fleet .cf-sched-row.is-off .cf-sched-cell {
	opacity: 0.55;
}

.chargie-fleet.chargie-fleet .cf-sched-day {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-width: 0;
	cursor: pointer;
}

/* The day name IS the checkbox's label — "Monday" checked means Monday is
   scheduled — so there is no second control to explain it. */
.chargie-fleet.chargie-fleet .cf-sched-day-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 */
}

.chargie-fleet.chargie-fleet .cf-sched-cell {
	display: flex;
	align-items: center;
	gap: 0.4em;
	justify-self: end;
}

/* Shown only in the stacked layout, where the heading row is gone. */
.chargie-fleet.chargie-fleet .cf-sched-cell-label {
	display: none;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

/*
 * The time field. `appearance: none` from the tier-1 input reset leaves the
 * segmented hour/minute editor intact in every current browser — only the
 * picker glyph goes — so it is left alone rather than fought with
 * `appearance: auto`, which would drag the native border and background back in
 * over .cf-input's own.
 */
.chargie-fleet.chargie-fleet .cf-input-time {
	width: auto;
	min-width: 7rem;
	padding-top: 0.45em;
	padding-bottom: 0.45em;
	font-family: var(--cf-mono); /* a time is a number the user reads off */
	font-size: 0.875rem;
}

.chargie-fleet.chargie-fleet .cf-input-level {
	width: 4.75rem;
	min-width: 0;
	padding-top: 0.45em;
	padding-bottom: 0.45em;
	font-family: var(--cf-mono);
	font-size: 0.875rem;
	text-align: right;
}

.chargie-fleet.chargie-fleet .cf-sched-error {
	grid-column: 1 / -1;
}

/*
 * Below the focused card's own two-column breakpoint the four columns stop
 * fitting: a 320px phone would give the day name about 60px and clip every
 * number. Each row becomes a block instead, with the column headings replaced
 * by a label in each cell — the same words, moved to where they still fit.
 */
@media (max-width: 719px) {
	.chargie-fleet.chargie-fleet .cf-sched-grid {
		display: block;
	}

	.chargie-fleet.chargie-fleet .cf-sched-head {
		display: none;
	}

	.chargie-fleet.chargie-fleet .cf-sched-row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 0.6rem 1.1rem;
		padding: 0.75rem 0;
	}

	.chargie-fleet.chargie-fleet .cf-sched-day {
		flex: 1 0 100%;
	}

	.chargie-fleet.chargie-fleet .cf-sched-cell {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-self: auto;
	}

	.chargie-fleet.chargie-fleet .cf-sched-cell-label {
		display: block;
		flex: 1 0 100%;
		margin-bottom: 0.2rem;
	}

	.chargie-fleet.chargie-fleet .cf-sched-error {
		flex: 1 0 100%;
	}
}

/* ==========================================================================
   12c. THE LIST — every device that is not the focused one
   ==========================================================================

   A row carries what the spec asks a row to carry: thumbnail, name, battery,
   status chip, limit. It offers two gestures as two separate controls, never
   one control with two meanings:

     ┌──┬────────────────────────────────────────────┬───┬───┐
     │☐ │ ▯  Kitchen phone   87%  ● Charging  Lim 90%│ ⌄ │ ⋯ │
     └──┴────────────────────────────────────────────┴───┴───┘
        └─ focus: swaps into the detail position       └─ expand in place

   Both are real buttons, so both are a tab stop and both answer Enter and
   Space with no key handling of our own.
   -------------------------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-list-wrap {
	min-width: 0;
}

/* (0,3,1) — same defeat as .cf-title; see section 6. */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h3.cf-list-title {
	margin: 0 0 0.7rem;
	padding: 0;
	border: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cf-ink-2); /* 7.58:1 on white, at 12px */
}

.chargie-fleet.chargie-fleet .cf-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.chargie-fleet.chargie-fleet .cf-row-item {
	min-width: 0;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-md);
	transition: border-color var(--cf-t) ease, box-shadow var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-row-item:hover {
	border-color: var(--cf-line-2);
	box-shadow: var(--cf-shadow);
}

.chargie-fleet.chargie-fleet .cf-row-item.is-selected {
	border-color: var(--cf-navy);
	box-shadow: 0 0 0 1px var(--cf-navy);
}

/* An open menu must paint over the rows after it. */
.chargie-fleet.chargie-fleet .cf-row-item.is-menu-open {
	position: relative;
	z-index: 20;
}

.chargie-fleet.chargie-fleet .cf-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.7rem;
}

/* Matches the card's checkbox: out of the way until it is wanted. */
.chargie-fleet.chargie-fleet .cf-row-select {
	flex: none;
	opacity: 0;
	transition: opacity var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-row-item:hover .cf-row-select,
.chargie-fleet.chargie-fleet .cf-row-select:focus-visible,
.chargie-fleet.chargie-fleet .cf-row-select:checked,
.chargie-fleet.chargie-fleet .cf-stage.is-selecting .cf-row-select {
	opacity: 1;
}

/* ---- The row body: focus this device ------------------------------------ */

.chargie-fleet.chargie-fleet .cf-row-main {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.35rem 0.4rem;
	border-radius: var(--cf-r-sm);
	text-align: left;
	transition: background-color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-row-main:hover {
	background: var(--cf-surface-2);
}

.chargie-fleet.chargie-fleet .cf-row-thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 46px;
	padding: 3px;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-radius: 7px;
	overflow: hidden;
}

.chargie-fleet.chargie-fleet .cf-row-item.is-offline .cf-row-thumb {
	opacity: 0.6;
}

/* (0,4,0) — height-led inside the thumbnail, and the theme pins both maxima. */
.chargie-fleet.chargie-fleet .cf-row-thumb .cf-phone-img {
	width: 100%;
	height: 40px;
	max-width: none;
	max-height: none;
}

.chargie-fleet.chargie-fleet .cf-row-thumb .cf-phone-fallback .cf-phone-svg {
	width: auto;
	height: 38px;
	max-width: 100%;
	max-height: none;
}

.chargie-fleet.chargie-fleet .cf-row-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.chargie-fleet.chargie-fleet .cf-row-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--cf-ink); /* 17.41:1 on white */
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.chargie-fleet.chargie-fleet .cf-row-model {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.8125rem; /* --cf-ink-3 is only cleared at >=14px */
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

/*
 * The metrics wrap BETWEEN items and never inside one.
 *
 * Left to wrap freely, "No Chargie link" breaks into three lines inside its own
 * pill and triples the row's height — the longest chip label in the vocabulary
 * setting the row height for the whole fleet. Pinning `nowrap` on the container
 * instead only moves the problem: the group then overflows the row and the
 * limit is clipped. Each item holds its own line; the group is free to wrap.
 */
.chargie-fleet.chargie-fleet .cf-row-metrics {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.85rem;
}

.chargie-fleet.chargie-fleet .cf-row-level {
	min-width: 3.1em;
	text-align: right;
	white-space: nowrap;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 on white */
}

/* The chip is the card's, with its card-only bottom margin taken back. */
.chargie-fleet.chargie-fleet .cf-row-chip {
	margin-bottom: 0;
	white-space: nowrap;
}

.chargie-fleet.chargie-fleet .cf-row-limit {
	min-width: 6.2em;
	text-align: right;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

/* Commanded but not yet confirmed — the same dashed-navy language the settings
   rows use for a pending value. --cf-navy on white is 11.50:1. */
.chargie-fleet.chargie-fleet .cf-row-limit.is-pending {
	color: var(--cf-navy);
	border-bottom: 1px dashed rgba(30, 58, 95, 0.5);
}

/* ---- The chevron: expand in place --------------------------------------- */

.chargie-fleet.chargie-fleet .cf-row-expand {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid transparent;
	border-radius: var(--cf-r-sm);
	color: var(--cf-ink-2); /* the chevron inherits: 7.58:1, past the 3:1 floor */
	transition: background-color var(--cf-t) ease, border-color var(--cf-t) ease,
		color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-row-expand:hover,
.chargie-fleet.chargie-fleet .cf-row-expand[aria-expanded='true'] {
	background: var(--cf-surface-2);
	border-color: var(--cf-line);
	color: var(--cf-ink); /* 16.37:1 on --cf-surface-2 */
}

/*
 * Two borders on a rotated square, not an <svg> and not a glyph: nothing here
 * depends on a font shipping U+2304, and nothing is caught by the theme's
 * global `.chargie-page svg { width: 24px }` reset.
 */
.chargie-fleet.chargie-fleet .cf-chevron {
	width: 7px;
	height: 7px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-row-expand[aria-expanded='true'] .cf-chevron,
.chargie-fleet.chargie-fleet .cf-inline-toggle[aria-expanded='true'] .cf-chevron {
	margin-top: 3px;
	transform: rotate(225deg);
}

/* ---- The panel a row expands into --------------------------------------- */

.chargie-fleet.chargie-fleet .cf-row-panel {
	padding: 0 0.7rem 0.7rem;
}

/*
 * (0,4,0). The card inside a row is the same card as the one in the detail
 * position; it just gives up its own frame, because a bordered card inside a
 * bordered row is a box in a box.
 */
.chargie-fleet.chargie-fleet .cf-row-panel .cf-card {
	padding: 1rem 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--cf-line);
	border-radius: 0;
	box-shadow: none;
}

.chargie-fleet.chargie-fleet .cf-row-panel .cf-card:hover {
	border-color: var(--cf-line);
	box-shadow: none;
}

/* Its checkbox would sit on top of the row's own. The row has one already. */
.chargie-fleet.chargie-fleet .cf-row-panel .cf-card-select {
	display: none;
}

.chargie-fleet.chargie-fleet .cf-row-error {
	padding: 0 1.1rem 0.6rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cf-action-ink); /* 5.18:1 on white */
}

/* ==========================================================================
   13. ADD-DEVICE MODAL
   ========================================================================== */

/*
 * The overlay is appended to <body> carrying `.chargie-fleet`, so it picks up
 * the shell's centring box. A fixed backdrop must not be clamped to 1000px —
 * reset both explicitly. (0,3,0) beats the shell rule's (0,2,0) outright.
 */
.chargie-fleet.chargie-fleet.cf-overlay {
	max-width: none;
	margin: 0;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	overflow-y: auto;
	background: rgba(11, 27, 43, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.chargie-fleet.chargie-fleet .cf-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: auto;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-card);
	box-shadow: var(--cf-shadow-modal);
}

.chargie-fleet.chargie-fleet .cf-modal-close {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--cf-ink-2); /* 7.58:1 */
	font-size: 1.4rem;
	line-height: 1;
	transition: background-color var(--cf-t) ease, color var(--cf-t) ease;
}

.chargie-fleet.chargie-fleet .cf-modal-close:hover {
	background: var(--cf-surface-2);
	color: var(--cf-ink);
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-modal-title {
	margin-bottom: 1.15rem;
	padding-right: 2.25rem;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cf-ink);
}

.chargie-fleet.chargie-fleet .cf-modal-body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.chargie-fleet.chargie-fleet .cf-modal-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cf-ink-2); /* 7.58:1 */
}

.chargie-fleet.chargie-fleet .cf-qr {
	display: flex;
	justify-content: center;
	padding: 14px;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-md);
}

.chargie-fleet.chargie-fleet .cf-code {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.9rem;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-md);
	text-align: center;
}

.chargie-fleet.chargie-fleet .cf-code-label {
	font-size: 0.8125rem;
	color: var(--cf-ink-2); /* 7.12:1 on --cf-surface-2 */
}

.chargie-fleet.chargie-fleet .cf-code-value {
	font-family: var(--cf-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-indent: 0.2em; /* balance the trailing letter-spacing */
	color: var(--cf-ink); /* 16.37:1 */
}

.chargie-fleet.chargie-fleet .cf-modal-expiry {
	font-family: var(--cf-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	color: var(--cf-ink-2); /* 7.58:1 */
	text-align: center;
}

/* Bulk pairing: how many phones one code should cover. Two class selectors on the
   root, matching every other component here — the theme's bare-element resets are
   (0,2,1) and a single class would lose to them. */
.chargie-fleet.chargie-fleet .cf-bulk-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.5em 0.75em;
	margin: 0 0 1em;
	padding: 0.85em 1em;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-md);
}

.chargie-fleet.chargie-fleet .cf-bulk-label {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink);
}

.chargie-fleet.chargie-fleet .cf-bulk-count {
	width: 5.5em;
	padding: 0.5em 0.6em;
	background: var(--cf-surface);
	border: 1px solid var(--cf-line-2);
	border-radius: var(--cf-r-sm);
	color: var(--cf-ink);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.chargie-fleet.chargie-fleet .cf-bulk-count:focus-visible {
	outline: 2px solid var(--cf-navy);
	outline-offset: 1px;
}

/* Spans both columns so the explanation sits under the label and the field
   rather than being squeezed into one of them. */
.chargie-fleet.chargie-fleet .cf-bulk-help {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--cf-ink-2);
}

.chargie-fleet.chargie-fleet .cf-modal-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 1.4em;
	font-size: 0.9375rem;
	color: var(--cf-ink-2);
	text-align: center;
}

.chargie-fleet.chargie-fleet .cf-modal-status.is-busy::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cf-navy);
	animation: cf-pulse 1.1s ease-in-out infinite;
}

@keyframes cf-pulse {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 1;
	}
}

.chargie-fleet.chargie-fleet .cf-modal-status.is-error {
	color: var(--cf-action-ink); /* 5.18:1 on white */
	font-weight: 500;
}

.chargie-fleet.chargie-fleet .cf-modal-status.is-success {
	color: var(--cf-charge); /* 7.13:1 on white */
	font-weight: 600;
}

.chargie-fleet.chargie-fleet .cf-modal-actions {
	display: flex;
	justify-content: center;
}

.chargie-fleet.chargie-fleet .cf-modal-actions .cf-btn {
	width: 100%;
}

/* ==========================================================================
   13b. PANEL DIALOGS — settings, batch, and the removal confirmation
   ==========================================================================

   These reuse the modal shell from section 13 and add what a form needs: a
   subtitle naming what is being changed, grouped rows, and a footer whose
   buttons sit at the end rather than filling the width.
   -------------------------------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-modal-wide {
	max-width: 560px;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-modal-sub {
	margin: -0.9rem 0 1.15rem;
	padding-right: 2.25rem;
	font-size: 0.875rem;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet .cf-dialog-copy {
	font-size: 0.9375rem;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet .cf-modal-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--cf-line);
}

/* Left-aligned, unlike the pairing modal's centred one-liners: these carry
   whole sentences about what a batch did and to how many phones. */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-panel-status {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet .cf-panel-status.is-busy {
	color: var(--cf-ink-2);
}

.chargie-fleet.chargie-fleet .cf-panel-status.is-success {
	color: var(--cf-charge); /* 7.13:1 on white */
}

.chargie-fleet.chargie-fleet .cf-panel-status.is-error {
	color: var(--cf-action-ink); /* 5.18:1 on white */
}

/* ---- Settings groups ---------------------------------------------------- */

.chargie-fleet.chargie-fleet .cf-set-group {
	padding-top: 1rem;
	border-top: 1px solid var(--cf-line);
}

.chargie-fleet.chargie-fleet .cf-set-group:first-child {
	padding-top: 0;
	border-top: 0;
}

/*
 * (0,3,0). It beats the tier-1 reset at (0,2,1) on class count, and the theme's
 * `.chargie-page h4`-shaped rules at (0,1,1) outright. The one theme rule in
 * this file's history that needed (0,4,1) —
 * `.chargie-info-page .page-body.prose h2` — is h2-only and needs a
 * `.page-body.prose` ancestor, which a dialog appended to <body> never has.
 */
.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet h4.cf-set-group-title {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cf-ink-2); /* 7.58:1 on white, at 12px */
}

.chargie-fleet.chargie-fleet .cf-set-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.35rem 1rem;
	padding: 0.6rem 0;
}

.chargie-fleet.chargie-fleet .cf-set-row + .cf-set-row {
	border-top: 1px solid var(--cf-line);
}

.chargie-fleet.chargie-fleet .cf-set-copy {
	min-width: 0;
}

.chargie-fleet.chargie-fleet .cf-set-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.chargie-fleet.chargie-fleet .cf-set-name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cf-ink); /* 17.41:1 */
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-set-help {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

.chargie-fleet.chargie-fleet .cf-set-field {
	display: flex;
	align-items: center;
	gap: 0.45em;
	justify-self: end;
}

.chargie-fleet.chargie-fleet .cf-set-field .cf-input {
	width: auto;
	min-width: 9rem;
	padding-top: 0.45em;
	padding-bottom: 0.45em;
}

.chargie-fleet.chargie-fleet .cf-set-field .cf-input-number {
	min-width: 0;
	width: 6.5rem;
}

.chargie-fleet.chargie-fleet .cf-set-unit {
	font-family: var(--cf-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cf-ink-2); /* 7.58:1 on white */
}

/* A pending field is one the phone has been told about but has not confirmed.
   --cf-navy on --cf-surface-2 is 10.81:1. */
.chargie-fleet.chargie-fleet .cf-set-pending {
	padding: 0.1em 0.5em;
	background: var(--cf-surface-2);
	border: 1px dashed rgba(30, 58, 95, 0.4);
	border-radius: var(--cf-r-pill);
	color: var(--cf-navy);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: help;
}

/* Pending that has stopped being plausible: solid rather than dashed, because
   it is no longer waiting for anything. --cf-action-ink on --cf-alert-soft is
   4.53:1 — and at 11px this chip is never the only carrier of the message; the
   card states it in full sentences too. */
.chargie-fleet.chargie-fleet .cf-set-pending.is-stalled {
	background: var(--cf-alert-soft);
	border-style: solid;
	border-color: rgba(194, 65, 12, 0.4);
	color: var(--cf-action-ink);
}

/*
 * A note explaining why a panel is shorter than usual. Not an error: the phone
 * simply has not reported its capabilities yet.
 * --cf-ink-2 on --cf-surface-2 = 7.12:1.
 */
.chargie-fleet.chargie-fleet .cf-note {
	padding: 0.7rem 0.85rem;
	background: var(--cf-surface-2);
	border: 1px solid var(--cf-line);
	border-radius: var(--cf-r-md);
	color: var(--cf-ink-2);
	font-size: 0.8125rem;
}

.chargie-fleet.chargie-fleet .cf-set-error {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--cf-action-ink); /* 5.18:1 on white */
}

.chargie-fleet.chargie-fleet .cf-input.is-invalid {
	border-color: var(--cf-action-ink);
	box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12);
}

/* Boolean rows put the checkbox where the other controls put their input. */
.chargie-fleet.chargie-fleet .cf-set-bool .cf-set-field {
	padding-top: 0.2rem;
}

/* ---- Batch intersection warning ---------------------------------------- */
/*
 * What a partial apply will actually do, stated before it happens. --cf-ink on
 * --cf-warn-soft is 15.64:1.
 */
.chargie-fleet.chargie-fleet .cf-batch-warning {
	margin-top: 1.1rem;
	padding: 0.8rem 0.95rem;
	background: var(--cf-warn-soft);
	border: 1px solid rgba(180, 83, 9, 0.28);
	border-left: 3px solid var(--cf-warn);
	border-radius: var(--cf-r-md);
	color: var(--cf-ink);
	font-size: 0.875rem;
}

.chargie-fleet.chargie-fleet.chargie-fleet.chargie-fleet .cf-batch-warning-line + .cf-batch-warning-line {
	margin-top: 0.4rem;
}

/* ==========================================================================
   14. NARROW SCREENS — everything must work down to 360px
   ========================================================================== */

/*
 * The row's metrics are the first thing to go. Below about 640px the name and
 * three numbers cannot share a line without the name shrinking to nothing, and
 * the name is what identifies the phone. The chip stays — it is the one metric
 * that says whether anything is wrong — and battery and limit drop under the
 * name, where they have the full row width.
 */
@media (max-width: 640px) {
	.chargie-fleet.chargie-fleet .cf-row-main {
		flex-wrap: wrap;
		gap: 0.5rem 0.75rem;
	}

	.chargie-fleet.chargie-fleet .cf-row-metrics {
		flex: 1 1 100%;
		justify-content: flex-start;
		gap: 0.75rem;
		padding-left: calc(34px + 0.85rem); /* clears the thumbnail */
	}

	.chargie-fleet.chargie-fleet .cf-row-level,
	.chargie-fleet.chargie-fleet .cf-row-limit {
		min-width: 0;
		text-align: left;
	}
}

@media (max-width: 440px) {
	.chargie-fleet.chargie-fleet .cf-header-row {
		flex-direction: column;
		align-items: stretch;
	}

	.chargie-fleet.chargie-fleet .cf-header-actions .cf-btn {
		width: 100%;
	}

	.chargie-fleet.chargie-fleet .cf-card {
		padding: 1.1rem;
	}

	.chargie-fleet.chargie-fleet .cf-plinth {
		width: 68px;
		height: 124px;
	}

	.chargie-fleet.chargie-fleet .cf-phone-fallback .cf-phone-svg {
		height: 106px;
	}

	.chargie-fleet.chargie-fleet .cf-phone-img {
		height: 108px;
	}

	.chargie-fleet.chargie-fleet .cf-card-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Stack the settings rows: a label and its control fight for width below
	   about 420px, and the control is the thing that must stay usable. */
	.chargie-fleet.chargie-fleet .cf-set-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.chargie-fleet.chargie-fleet .cf-set-field {
		justify-self: start;
	}

	.chargie-fleet.chargie-fleet .cf-modal-foot {
		flex-direction: column-reverse;
	}

	.chargie-fleet.chargie-fleet .cf-modal-foot .cf-btn {
		width: 100%;
	}

	.chargie-fleet.chargie-fleet .cf-row {
		padding: 0.45rem 0.5rem;
	}

	.chargie-fleet.chargie-fleet .cf-row-main {
		gap: 0.6rem;
	}

	/* The indent that aligns the metrics under the name is worth 40px, and at
	   this width 40px is the difference between the status chip and the limit
	   sharing a line and not. */
	.chargie-fleet.chargie-fleet .cf-row-metrics {
		padding-left: 0;
		gap: 0.5rem 0.6rem;
	}

	.chargie-fleet.chargie-fleet .cf-row-thumb {
		width: 30px;
		height: 40px;
	}

	.chargie-fleet.chargie-fleet .cf-row-thumb .cf-phone-img {
		height: 34px;
	}

	.chargie-fleet.chargie-fleet .cf-row-thumb .cf-phone-fallback .cf-phone-svg {
		height: 32px;
	}

	.chargie-fleet.chargie-fleet .cf-inline-foot .cf-btn {
		width: 100%;
	}
}

/* ==========================================================================
   15. PAGE BANNER — theme-owned markup, scoped to the /fleet page ONLY
   ==========================================================================

   The theme renders `header.page-hero > .page-hero-content > h1.page-title`
   plus a "Last updated: …" chip — blog chrome on a control panel. These rules
   are the only ones in this file that touch markup we do not own, and every
   one is pinned to `body.page-id-173913` so no other page on the site moves.

   The chip is hidden by targeting the title's following siblings rather than a
   class name we would have to guess; that can never hide the title itself.
   -------------------------------------------------------------------------- */

body.page-id-173913 .page-hero {
	padding-top: 2rem;
	padding-bottom: 1.75rem;
}

body.page-id-173913 .page-hero .page-title {
	margin-bottom: 0;
	font-size: clamp(1.75rem, 4vw, 2.125rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* (0,3,1) — hides the "Last updated" chip and anything else trailing the title. */
body.page-id-173913 .page-hero .page-title ~ * {
	display: none;
}