/**
 * Kick Up A Fuss Engine — functional styles.
 *
 * The Kick Up A Fuss theme styles these components properly. What is here is a
 * usable fallback so the tools and tracker still work under another theme, plus
 * the few rules that belong to behaviour rather than to the look.
 */

.kuaf-tracker [data-kuaf-message]:empty { display: none; }
.kuaf-tracker [data-kuaf-message] { margin-top: 12px; }
.tool .result[hidden] { display: none; }
.tool .result:focus { outline: 2px solid currentColor; outline-offset: 6px; }
.tool button[disabled] { opacity: .6; cursor: progress; }

/* Fallback only: zero-specificity so ANY theme rule wins outright. */
:where(.tool) {
	background: #1B1A16;
	color: #FAF7F0;
	padding: 30px;
	margin: 0 0 38px;
	max-width: 62ch;
	border-radius: 2px;
}
:where(.tool) .field { margin: 0 0 18px; display: block; }
:where(.tool) .field span { display: block; font-size: 14.5px; margin-bottom: 7px; opacity: .8; }
:where(.tool) .field input,
:where(.tool) .field select {
	width: 100%;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 2px solid currentColor;
	padding: 8px 0;
	border-radius: 0;
}
:where(.tool) .field select option { color: #1B1A16; }
:where(.tool) button { background: #83332A; color: #FAF7F0; border: 0; padding: 14px 24px; font: inherit; font-weight: 600; cursor: pointer; border-radius: 2px; }
:where(.tiles) { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
:where(.tile) input { position: absolute; opacity: 0; pointer-events: none; }
:where(.tile) span { display: block; background: #FFFDF9; color: #1B1A16; border: 1px solid #DED7C7; border-radius: 2px; padding: 13px 15px; font-size: 15px; line-height: 1.35; }
:where(.tile) input:checked + span { background: #83332A; border-color: #83332A; color: #FAF7F0; }
:where(.result-next) a { color: inherit; font-weight: 600; }

.adslot-live { margin: 0 0 38px; max-width: 62ch; }
:where(.start-group) { border: 0; padding: 0; margin: 0 0 26px; }
:where(.start-group) legend { font-weight: 700; font-size: 20px; margin: 0 0 12px; padding: 0; }
:where(a.status) { display: block; text-decoration: none; color: inherit; }
:where(.status-group) { display: grid; gap: 12px; }