/* "Who decides?" path explorer — Inside Michigan, Energy Files.
   Uses the site's tokens (--page, --paper, --ink, --ink-2, --muted, --line,
   --accent, --flame, --pine …) so it inherits the host page's theme. */
[data-widget="who-decides"] {
	container-type: inline-size;
	max-width: 68rem;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.5;
}
[data-widget="who-decides"] *,
[data-widget="who-decides"] *::before { box-sizing: border-box; }

.wd-eyebrow {
	margin: 0 0 .4rem;
	color: var(--accent-text);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.wd-title {
	margin: 0;
	font-family: "Source Serif 4", "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Georgia, serif;
	font-size: clamp(1.7rem, 5cqi, 2.5rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.05;
}
.wd-lede { max-width: 62ch; margin: .6rem 0 1.25rem; color: var(--ink-2); }

/* ---- static text version (shown as-is without JavaScript) ---- */
.wd-static ol { margin: 0; padding-left: 1.3rem; }
.wd-static li { margin: 0 0 .7rem; padding-left: .2rem; color: var(--ink-2); }
.wd-static li strong { color: var(--ink); }
.wd-static ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.wd-static ul li { margin-bottom: .25rem; }
.wd-cite { color: var(--muted); font-size: .8125rem; white-space: nowrap; }

.wd-read, .wd-src, .wd-caution {
	max-width: 78ch;
	margin: .7rem 0 0;
	color: var(--muted);
	font-size: .8125rem;
	line-height: 1.55;
}
.wd-read strong, .wd-caution strong { color: var(--ink-2); }
.wd-src a { color: var(--ink-2); text-underline-offset: .18em; }
.wd-src a:hover { color: var(--accent-text); }

/* ---- controls ---- */
.wd-controls { display: grid; gap: .75rem; margin: 0; }
.wd-field {
	min-width: 0;
	margin: 0;
	padding: .8rem .9rem 1rem;
	border: 1px solid var(--line);
	background: var(--paper);
}
.wd-field legend {
	float: left;
	width: 100%;
	padding: 0;
	color: var(--ink);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.3;
}
.wd-field:disabled { opacity: .55; }
.wd-opts { display: flex; flex-wrap: wrap; gap: .5rem; clear: both; padding-top: .6rem; }
.wd-opt { position: relative; display: inline-flex; cursor: pointer; }
.wd-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wd-opt span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .35rem .85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--page);
	color: var(--ink-2);
	font-size: .9375rem;
	line-height: 1.2;
}
.wd-opt input:checked + span {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent);
	color: var(--ink);
	font-weight: 600;
}
.wd-opt input:checked + span::before { content: "✓"; margin-right: .4rem; color: var(--accent-text); }
.wd-opt input:focus-visible + span,
.wd-btn:focus-visible,
.wd-unit input:focus-visible,
.wd-all summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wd-field:disabled .wd-opt, .wd-field:disabled .wd-opt input { cursor: not-allowed; }

.wd-nums { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin-top: .75rem; }
.wd-num[hidden] { display: none; }
.wd-num label { display: block; margin-bottom: .2rem; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
.wd-unit { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); font-size: .9375rem; }
.wd-unit input {
	width: 6.5rem;
	min-height: 44px;
	padding: .3rem .6rem;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--page);
	color: var(--ink);
	font: inherit;
	font-variant-numeric: tabular-nums;
}
.wd-hint { margin: .7rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }

.wd-preset { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; justify-items: start; gap: .5rem .75rem; }
.wd-presetlab { color: var(--ink-2); font-size: .875rem; }
.wd-btn {
	min-height: 44px;
	padding: .35rem 1.1rem;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: transparent;
	color: var(--accent-text);
	font: inherit;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
}
.wd-btn:hover, .wd-btn[aria-pressed="true"] { background: var(--accent-soft); }
.wd-preset .wd-hint { grid-column: 1 / -1; max-width: 86ch; margin-top: 0; }

/* ---- outcome ---- */
.wd-out {
	margin: 1rem 0 0;
	padding: .9rem 1rem 1rem 1.1rem;
	border-left: .3rem solid var(--accent);
	background: var(--accent-soft);
}
.wd-held { margin: 0 0 .35rem; color: var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.wd-held strong { color: var(--ink); font-size: .9375rem; letter-spacing: 0; }
.wd-sum { max-width: 78ch; margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }

/* ---- diagram ---- */
.wd-fig { margin: 1rem 0 0; padding: .5rem .75rem .85rem; border: 1px solid var(--line); background: var(--paper); }
.wd-figbox { overflow: hidden; }
.wd-svg { display: block; max-width: 100%; height: auto; font-family: inherit; }
.wd-seg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wd-seg--off { stroke: var(--line); stroke-width: 2; }
.wd-seg--open { stroke: var(--ink-2); stroke-width: 2.5; stroke-dasharray: .1 8; }
.wd-seg--taken { stroke: var(--accent); stroke-width: 5; }
.wd-node { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.wd-node--A.is-on { fill: var(--ink); stroke: var(--ink); }
.wd-node--T.is-on, .wd-node--P.is-on { fill: var(--pine); stroke: var(--paper); }
.wd-node--L.is-on, .wd-node--C.is-on { fill: var(--flame); stroke: var(--paper); }
.wd-ring { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.wd-lab { fill: var(--ink-2); font-size: 13px; }
.wd-name { fill: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .09em; }
.wd-clock tspan:first-child { fill: var(--ink); font-weight: 700; }
.wd-t2 { fill: var(--muted); }
.wd-clock .wd-t2 { fill: var(--ink-2); }
.is-dim, .is-dim .wd-t2 { fill: var(--muted); }
.wd-clock.is-dim tspan:first-child { fill: var(--ink-2); font-weight: 600; }

.wd-key { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: .8125rem; }
.wd-k { display: inline-flex; align-items: center; gap: .5rem; }
.wd-k::before { content: ""; flex: none; width: 1.75rem; height: 0; border-top: 4px solid var(--accent); border-radius: 2px; }
.wd-k--open::before { border-top: 3px dotted var(--ink-2); border-radius: 0; }
.wd-k--off::before { border-top: 2px solid var(--line); }
.wd-k--ring::before { width: .95rem; height: .95rem; border: 2.5px solid var(--accent); border-radius: 50%; }

/* ---- step list ---- */
.wd-h { margin: 1.6rem 0 .6rem; color: var(--ink-2); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wd-steps { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: wd; }
.wd-step {
	counter-increment: wd;
	display: grid;
	grid-template-columns: 1.9rem minmax(0, 1fr);
	column-gap: .6rem;
	padding: .75rem .9rem .8rem .7rem;
	border: 1px solid var(--line-soft);
	border-left: .3rem solid var(--line);
	background: var(--paper);
}
.wd-step::before { content: counter(wd); grid-row: 1 / span 5; color: var(--muted); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.wd-step > * { grid-column: 2; }
.wd-step--T { border-left-color: var(--pine); }
.wd-step--M { border-left-color: var(--flame); }
.wd-step--D { border-left-color: var(--ink-2); }
.wd-step.is-cond { border-left-style: dashed; background: transparent; }
.wd-who { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wd-step--T .wd-who { color: var(--good-text, var(--pine)); }
.wd-step--M .wd-who { color: var(--serious-text, var(--flame)); }
.wd-st { margin: .1rem 0 .15rem; color: var(--ink); font-size: 1rem; }
.wd-sd { max-width: 78ch; color: var(--ink-2); font-size: .9375rem; }
.wd-ck { margin-top: .4rem; color: var(--ink); font-size: .875rem; font-weight: 600; }
.wd-ci { margin-top: .3rem; color: var(--muted); font-size: .8125rem; }

.wd-all { margin-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.wd-all summary { display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.wd-all .wd-static { padding: .4rem 0 .6rem; }

@container (min-width: 760px) {
	.wd-controls { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
	.wd-preset { grid-column: 1 / -1; }
	.wd-fig { padding: .75rem 1rem 1rem; }
}
@media (max-width: 480px) {
  .wd-preset { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
  .wd-preset .wd-btn { width: 100%; text-align: center; }
}