/**
 * iRobot skin — the redesign's My Account look on the warranty pages (owner 19.09.2026:
 * "borrow the My Account room's design, its colours").
 *
 * Source of truth: content/account/account.css + DESIGN.md in the iRobot redesign repo.
 *   sand ground · white cards with no border, 24px corners, one faint hunter shadow ·
 *   mint tints for icons and good news · black pill buttons, black outline for the second
 *   action · clover focus ring · no red: an error is ink + an icon, a closed state is grey.
 *
 * Loaded after swr-base.css (swr_enqueue_brand_skin), iRobot only. Colours come from the
 * --swr-* tokens in brands/irobot.php, which point at the theme's --brand-color-* with the
 * hex as fallback, so the old theme (live until the switch) gets the same colours.
 * Selectors carry at least the base rule's specificity; the old theme's content rules are
 * (0,2,1), so anything that fights them is (0,3,x).
 */

.swr {
	--swr-shadow: 0 1px 2px rgba(var(--swr-primary-rgb), .04), 0 10px 24px -18px rgba(var(--swr-primary-rgb), .16);
	--swr-ink-2: rgba(var(--swr-text-rgb, 30, 30, 30), .62);
	--swr-hair: rgba(var(--swr-primary-rgb), .08);
	--swr-tint: rgba(var(--swr-bg-note-rgb, 220, 233, 213), .6);
	--swr-field-border: rgba(var(--swr-border-rgb, 159, 156, 147), .55);
	--swr-ring: 0 0 0 3px rgba(var(--swr-success-rgb, 0, 167, 122), .35);
	--swr-grey-tint: rgba(var(--swr-muted-rgb, 118, 118, 118), .14);
}

/* ---------- Ground: the account pages' sand, cards sit on it ---------- */
.swr.swr--register,
.swr.swr--check {
	background: var(--swr-bg-soft);
	border-radius: 28px;
	padding: clamp(12px, 3vw, 32px);
}
.swr.swr--check { max-width: 744px; }
@media (max-width: 600px) {
	.swr.swr--register,
	.swr.swr--check { border-radius: 20px; }
}

/* ---------- Cards ---------- */
.swr .swr-step,
.swr .swr-thankyou-block,
.swr.swr--check .swr-check-form,
.swr.swr--check .swr-check-result-card,
.swr .swr-device-card {
	border: 0;
	border-radius: var(--swr-radius-card);
	background: var(--swr-bg);
	box-shadow: var(--swr-shadow);
}
.swr .swr-step { padding: clamp(20px, 3vw, 28px); }

/* Step number: a mint tile with a hunter figure, like the account icon tiles (no solid circles). */
.swr .swr-step-num { width: 36px; height: 36px; line-height: 36px; font-size: 15px; background: var(--swr-tint); color: var(--swr-primary); }
.swr .swr-step-head p { font-size: 14px; color: var(--swr-ink-2); }

/* ---------- Text ---------- */
.swr .swr-hint { color: var(--swr-ink-2); }
.swr .swr-optional { color: var(--swr-ink-2); }
.swr .swr-req { color: var(--swr-text); }

/* ---------- Fields: 48px, 14px corners, soft border, hunter + clover ring on focus ---------- */
.swr .swr-field .swr-input,
.swr .swr-field select.swr-input,
.swr .swr-field input.swr-input { border-color: var(--swr-field-border); min-height: 48px; }
.swr .swr-field .swr-input:focus { border-color: var(--swr-primary); box-shadow: var(--swr-ring); }
.swr .swr-field.is-invalid .swr-input { border-color: var(--swr-text); border-width: 2px; }

/* Errors: ink with a round "!" — never colour alone. */
.swr .swr-error { color: var(--swr-text); }
.swr .swr-error:not(:empty)::before {
	content: "!";
	display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px;
	border-radius: 50%; background: var(--swr-text); color: var(--swr-bg);
	font-size: 11px; font-weight: 700; line-height: 1;
}
.swr .swr-unit-errors { color: var(--swr-text); }
.swr .swr-note.is-error { background: var(--swr-mushroom); color: var(--swr-text); }

/* ---------- Buttons: black pill first, black outline second, links stay hunter ---------- */
.swr button:where(:not(.swr-textlink, .swr-scanner-close, .swr-scanner-torch, .swr-unit-remove)) {
	background: var(--swr-text);
	color: var(--swr-bg);
	font-weight: 600;
}
.swr .swr-btn-photo,
.swr .swr-btn-secondary {
	background: transparent;
	color: var(--swr-text);
	border: 2px solid var(--swr-text);
}
.swr .swr-btn-photo:hover,
.swr .swr-btn-secondary:hover { background: var(--swr-bg-soft); }
.swr .swr-file-btn { border: 2px solid var(--swr-text); color: var(--swr-text); font-weight: 600; }
.swr .swr-file:hover .swr-file-btn { background: var(--swr-bg-soft); }
.swr .swr-file-input:focus-visible + .swr-file-btn,
.swr .swr-choice input:focus-visible + span { box-shadow: var(--swr-ring); }
.swr a:focus-visible,
.swr button:focus-visible { outline: 3px solid var(--swr-success); outline-offset: 2px; }
.swr .swr-suggestion-btn { background: var(--swr-bg-note); color: var(--swr-primary); }
.swr .swr-choice input:checked + span { border-color: var(--swr-primary); background: var(--swr-tint); }

/* ---------- Units, the typing box ---------- */
.swr .swr-unit { border: 0; border-radius: 18px; background: var(--swr-bg-soft); }
.swr .swr-unit.is-duplicate { outline-color: var(--swr-text); }
.swr .swr-unit-chip { background: var(--swr-bg-note); color: var(--swr-primary); }
.swr .swr-unit-flags span { background: var(--swr-bg-note); color: var(--swr-primary); }
.swr .swr-manual-more { border-radius: 18px; }
.swr .swr-manual-intro::before,
.swr .swr-manual-intro::after { background: var(--swr-hair); opacity: 1; height: 2px; }

/* Signed-in / log-in bar sits on the sand ground → a white card of its own. */
.swr .swr-account p { background: var(--swr-bg); box-shadow: var(--swr-shadow); border-radius: 18px; }
.swr .swr-account .swr-account-user { background: var(--swr-bg-note); box-shadow: none; }
.swr .swr-note { border-radius: 18px; }

/* ---------- Thank-you ---------- */
.swr .swr-ty-mark { width: 56px; height: 56px; background: var(--swr-tint); color: var(--swr-primary); }
.swr .swr-ty-ref { border-radius: 18px; }
.swr .swr-ty-units li { border: 0; border-radius: 16px; background: var(--swr-bg-soft); }
.swr .swr-ty-steps li.is-review { border-radius: 16px; background: rgba(var(--swr-mushroom-rgb, 222, 209, 199), .55); }
.swr .swr-ty-steps li.is-review svg { color: var(--swr-text); }
.swr .swr-ty-steps li.is-good { border-radius: 16px; }

/* ---------- Status check ---------- */
.swr.swr--check .swr-check-mark { background: var(--swr-tint); }
.swr.swr--check .swr-check-account { border-radius: 16px; }
.swr .swr-check-row { border-bottom-color: var(--swr-hair); }
.swr .swr-check-row:first-child { border-top-color: var(--swr-hair); }
.swr.swr--check .swr-check-cta,
.swr.swr--check .swr-check-cta:visited { background: var(--swr-text); font-weight: 600; }
.swr.swr--check .swr-check-cta--line,
.swr.swr--check .swr-check-cta--line:visited { background: #06C755; }

/* Status pills — the account's set: good = mint, waiting = mushroom, closed = grey. */
.swr .swr-check-status,
.swr .swr-device-status { font-weight: 600; background: var(--swr-bg-soft); color: var(--swr-text); }
.swr .swr-check-status.swr-status-active,
.swr .swr-device-status.swr-status-active { background: var(--swr-bg-note); color: var(--swr-primary); }
.swr .swr-check-status.swr-status-pending,
.swr .swr-check-status.swr-status-info_requested,
.swr .swr-device-status.swr-status-pending,
.swr .swr-device-status.swr-status-info_requested { background: var(--swr-mushroom); color: var(--swr-text); }
.swr .swr-check-status.swr-status-not_registered,
.swr .swr-check-status.swr-status-expired,
.swr .swr-check-status.swr-status-rejected,
.swr .swr-check-status.swr-status-voided,
.swr .swr-device-status.swr-status-expired,
.swr .swr-device-status.swr-status-rejected,
.swr .swr-device-status.swr-status-voided { background: var(--swr-grey-tint); color: var(--swr-muted); }

.swr .swr-order-verify-result.is-error { color: var(--swr-text); font-weight: 600; }