/**
 * The instruments.
 *
 * ---------------------------------------------------------------------------
 * The four questions in the rail — what changed, why, what next, what should I
 * do — are answered by readings, not by prose: a dial, a band of the year, a
 * row of signals, a confidence bar, a verdict card. This is what draws them.
 *
 * It used to live in the back half of os.css, behind the old shell, and went
 * out with it. Which is how four of the most considered pages on the site came
 * to render as raw headings and a black SVG blob — the markup was intact the
 * whole time and nothing was there to draw it.
 *
 * Nothing here paints a colour of its own. Every value comes from the one
 * palette in sensorium.css, so an instrument is the same green as the rail
 * beside it and turns with the season like everything else.
 *
 * The motion rule from the original still stands and is not negotiable: every
 * animation encodes a quantity. The dial breathes at the rate the system is
 * receiving; a spoke's length is a confidence; the fan's angle is a yield
 * spread; the marker is today. An animation that cannot name what it is
 * expressing does not ship.
 * ---------------------------------------------------------------------------
 */

/* The states an instrument can report, drawn from the one palette. */
:root {
	--sx-open: var(--sx-leaf);
	--sx-close: var(--sx-loam);
	--sx-gap: var(--sx-control);
	--sx-open-w: color-mix(in srgb, var(--sx-open) 12%, transparent);
	--sx-close-w: color-mix(in srgb, var(--sx-close) 12%, transparent);
	--sx-gap-w: color-mix(in srgb, var(--sx-gap) 10%, transparent);
	--sx-max: var(--sx-page);
}

/* ═════════════════════════════════════════════════════════════════
   THE TWIN
   ══════════════════════════════════════════════════════════════════════ */

.sx-twin {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: var(--an-space-8);
	align-items: center;
	max-width: var(--sx-max); margin: 0 auto;
	padding: var(--an-space-9) 0 var(--an-space-8);
}

/* .sx-eyebrow and .sx-sec are the shell's; see sensorium.css. */

.sx-twin-h {
	font-size: var(--an-t-h1); line-height: 1.06; letter-spacing: -.022em;
	font-weight: 600; margin: 0 0 var(--an-space-4);
}
.sx-twin-h em { font-style: normal; color: var(--sx-open); }
.sx-twin-h b { font-weight: 600; font-family: var(--an-font-mono); font-size: .88em; }

.sx-twin-sub { font-size: 16.5px; color: var(--an-text-2); max-width: 54ch; margin: 0 0 var(--an-space-5); }
.sx-twin-sub b { font-family: var(--an-font-mono); font-weight: 500; color: var(--an-text); }

.sx-hold {
	display: flex; gap: 10px; align-items: flex-start;
	padding: 12px 14px; border-radius: var(--an-radius-md);
	background: var(--sx-gap-w); border: 1px dashed var(--an-line);
	font-size: 13.5px; color: var(--an-text-2);
	margin-bottom: var(--an-space-5);
}
.sx-hold.is-known { background: var(--sx-open-w); border-style: solid; }
.sx-hold p { margin: 0; }
.sx-hold a { color: var(--an-text); text-decoration: underline; text-underline-offset: 3px; }
.sx-hold-dot {
	width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none;
	border: 1.5px dashed var(--sx-gap);
}
.sx-hold.is-known .sx-hold-dot { background: var(--sx-open); border: 0; }

.sx-twin-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* Page furniture — headings, surfaces, buttons — is the shell's; see
   sensorium.css. An instrument only draws the reading. */

/* ── the dial ──────────────────────────────────────────────────── */

.sx-twin-fig { position: relative; }
.sx-dial { width: 100%; height: auto; overflow: visible; }

/* No year ring. The horizon band below draws those twelve numbers properly,
   with an axis, and drawing them twice on one screen was the redundancy this
   redesign exists to remove. */

.sx-spoke-tr { stroke: var(--an-line-soft); stroke-width: 1.4; }
.sx-spoke-fl { stroke: var(--sx-open); stroke-width: 3.2; stroke-linecap: round; }
.sx-spoke-dot { fill: var(--sx-open); }

/* Partial knowledge is drawn dashed. Not a lighter colour — a dashed line
   reads as "incomplete" at any size and in any theme, and a lighter one just
   reads as less important. */
.sx-spoke.is-partial .sx-spoke-fl { stroke-dasharray: 5 4; }
.sx-spoke.is-blind .sx-spoke-tr { stroke-dasharray: 3 5; stroke: var(--sx-gap); opacity: .6; }

.sx-spoke-l {
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase;
	fill: var(--an-text-3);
}
.sx-spoke:hover .sx-spoke-l,
.sx-spoke:focus .sx-spoke-l { fill: var(--an-text); }
.sx-spoke:focus { outline: none; }
.sx-spoke:focus .sx-spoke-fl { stroke-width: 5; }
.sx-spoke.is-blind .sx-spoke-l { fill: var(--sx-gap); }

.sx-core-bg { fill: url(#sx-core); stroke: var(--an-line); stroke-width: 4; }
.sx-core-arc {
	fill: none; stroke: var(--sx-open); stroke-width: 4;
	stroke-dasharray: var(--dash) var(--circ);
	transform: rotate(-90deg); transform-origin: 200px 200px;
	stroke-linecap: round;
}
.sx-core-n { font-family: var(--an-font-mono); font-size: 26px; fill: var(--an-text); }
.sx-core-t {
	font-family: var(--an-font-mono); font-size: 12px; letter-spacing: .2em;
	text-transform: uppercase; fill: var(--an-text-3);
}

.sx-dial-read {
	margin-top: var(--an-space-4); min-height: 66px;
	padding: 12px 14px; border-radius: var(--an-radius-md);
	background: var(--an-surface); border: 1px solid var(--an-line);
	font-size: 13.5px; color: var(--an-text-2);
}
.sx-dial-read h4 { margin: 0 0 4px; font-size: 13.5px; color: var(--an-text); }
.sx-dial-read p { margin: 0; }
.sx-dial-read-idle { color: var(--an-text-3); }

.sx-twin-table { grid-column: 1 / -1; margin-top: var(--an-space-5); }
.sx-twin-table summary {
	cursor: pointer; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3);
	padding: 8px 0;
}

/* ══════════════════════════════════════════════════════════════════════
   CONFIDENCE
   The one component that is never allowed to be decorative.
   ══════════════════════════════════════════════════════════════════════ */

.sx-conf { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sx-conf-bar {
	width: 34px; height: 4px; border-radius: 2px;
	background: var(--an-line); overflow: hidden; display: block;
}
.sx-conf-bar > span { display: block; height: 100%; background: var(--sx-open); }
.sx-conf.is-partial .sx-conf-bar > span { background: repeating-linear-gradient(90deg, var(--sx-open) 0 3px, transparent 3px 6px); }
.sx-conf.is-blind .sx-conf-bar > span { background: var(--sx-gap); }
.sx-conf-t {
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--an-text-3);
}
.sx-conf-n { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3); }

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS + SIGNALS
   ══════════════════════════════════════════════════════════════════════ */

.sx-sec--gap { border-top: 1px solid var(--an-line); }
.sx-sec-foot { margin-top: var(--an-space-5); }


.sx-sigs { display: grid; gap: var(--an-space-3); }

.sx-sig {
	display: grid; grid-template-columns: 132px 1fr; gap: var(--an-space-5);
	padding: var(--an-space-5);
	background: var(--an-surface);
	border: 1px solid var(--an-line); border-radius: var(--an-radius-lg);
	border-left-width: 3px;
}
.sx-sig--open  { border-left-color: var(--sx-open); }
.sx-sig--close { border-left-color: var(--sx-close); }
.sx-sig--gap   { border-left-color: var(--sx-gap); border-left-style: dashed; }
.sx-sig--note  { border-left-color: var(--an-line); }

.sx-sig-num { text-align: right; }
/*
 * The text column of a signal is a grid child in a `1fr` track, and a grid
 * child's min-width defaults to `auto` — so one long unbreakable figure or
 * URL in a signal widened the card past its column (trap #5).
 */
.sx-sig-body { min-width: 0; }
.sx-sig-metric {
	display: block; font-family: var(--an-font-mono);
	font-size: 30px; line-height: 1; font-weight: 500; color: var(--an-text);
	font-variant-numeric: tabular-nums;
}
.sx-sig--close .sx-sig-metric { color: var(--sx-close); }
/* Not --sx-gap (the control grey): at the phone's metric size this is body
   text, and the grey measured 3.68:1. The dashed rule carries the "gap". */
.sx-sig--gap .sx-sig-metric { color: var(--an-text-3); }
.sx-sig-unit {
	display: block; margin-top: 5px; font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3);
}

.sx-sig-head { font-size: 18px; line-height: 1.28; font-weight: 600; margin: 0 0 6px; }
.sx-sig-sub { color: var(--an-text-2); font-size: 14.5px; margin: 0 0 var(--an-space-3); }

/* ── evidence ──────────────────────────────────────────────────── */

.sx-ev summary {
	display: inline-flex; align-items: center; gap: 8px;
	cursor: pointer; list-style: none;
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3);
	padding: 5px 0;
}
.sx-ev summary::-webkit-details-marker { display: none; }
.sx-ev summary:hover { color: var(--an-text); }

/* The marker is a short rule that becomes a corner when opened — the visual
   of a trail turning down into its steps. */
.sx-ev-mark {
	width: 14px; height: 8px; border-left: 1px solid currentColor;
	border-bottom: 1px solid currentColor; display: block;
	transition: height var(--an-fast) var(--an-ease);
}
.sx-ev[open] .sx-ev-mark { height: 14px; }

.sx-ev-trail { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--an-line); }
.sx-ev-trail li { padding: 7px 0 7px 14px; position: relative; }
.sx-ev-trail li::before {
	content: ""; position: absolute; left: -4px; top: 15px;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--an-surface); border: 1px solid var(--an-line);
}
.sx-ev-step {
	display: block; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--an-text-3);
	margin-bottom: 3px;
}
.sx-ev-text { font-size: 13.5px; color: var(--an-text-2); }

.sx-sig-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--an-space-4); }
.sx-sig-act--wide { margin: var(--an-space-6) 0; }
.sx-sig-perm {
	font-family: var(--an-font-mono); font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--an-text-3);
	text-decoration: underline; text-underline-offset: 4px;
}
.sx-sig-perm:hover { color: var(--an-text); }

/* ══════════════════════════════════════════════════════════════════════
   THE HORIZON BAND
   ══════════════════════════════════════════════════════════════════════ */

.sx-band { max-width: var(--sx-max); margin: 0 auto; padding: var(--an-space-6) 0; }
.sx-band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: var(--an-space-4); }
.sx-band-h { font-size: 15px; font-weight: 600; margin: 0; }
.sx-band-note { font-size: 13px; color: var(--an-text-3); margin: 0; }

.sx-band-svg { width: 100%; height: 190px; display: block; }
.sx-band-grid { stroke: var(--an-line-soft); stroke-width: 1; }
.sx-band-area { fill: color-mix(in srgb, var(--sx-open) 10%, transparent); }
.sx-band-line { fill: none; stroke: var(--sx-open); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sx-band-dot { fill: var(--an-bg); stroke: var(--sx-open); stroke-width: 1.6; }
.sx-band-dot.is-now { fill: var(--sx-open); r: 5.5; }
.sx-band-today { stroke: var(--an-accent); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

.sx-band-axis {
	list-style: none; display: grid; grid-template-columns: repeat(12, 1fr);
	margin: 6px 0 0; padding: 0; text-align: center;
}
.sx-band-axis li { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.sx-band-axis b { font-size: 12px; font-weight: 500; color: var(--an-text-3); }
.sx-band-axis em {
	font-style: normal; font-family: var(--an-font-mono); font-size: 12px;
	color: var(--an-text-2); font-variant-numeric: tabular-nums;
}
.sx-band-axis li.is-now b { color: var(--sx-open); }
.sx-band-axis li.is-now em { color: var(--an-text); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   WINDOW LIST
   ══════════════════════════════════════════════════════════════════════ */

.sx-window { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--an-line); }
.sx-win {
	display: flex; align-items: center; gap: var(--an-space-4);
	border-bottom: 1px solid var(--an-line-soft);
}
.sx-win-a {
	flex: 1; display: grid;
	grid-template-columns: minmax(140px, 1.4fr) 1fr 1fr 1fr auto;
	gap: var(--an-space-4); align-items: baseline;
	padding: 13px 4px;
}
.sx-win:hover { background: var(--an-surface); }
.sx-win-n { font-weight: 600; font-size: 14.5px; }
.sx-win-g, .sx-win-d, .sx-win-w { font-size: 12.5px; color: var(--an-text-3); }
.sx-win-d, .sx-win-w { font-family: var(--an-font-mono); }
.sx-win-tag {
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--sx-close);
	border: 1px solid color-mix(in srgb, var(--sx-close) 40%, transparent);
	border-radius: 3px; padding: 2px 7px;
}
.sx-win.is-closing { box-shadow: inset 2px 0 0 var(--sx-close); }
.sx-win-sim {
	flex: none; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3);
	padding: 8px 12px; border: 1px solid var(--an-line); border-radius: var(--an-radius-sm);
}
.sx-win-sim:hover { color: var(--an-text); background: var(--an-surface); }

/* ══════════════════════════════════════════════════════════════════════
   THE MIND SURFACE
   ══════════════════════════════════════════════════════════════════════ */

.sx-facs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--an-space-4); }

.sx-fac {
	padding: var(--an-space-5);
	background: var(--an-surface);
	border: 1px solid var(--an-line); border-radius: var(--an-radius-lg);
}
.sx-fac.is-blind { border-style: dashed; background: none; }

.sx-fac-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sx-fac-h h3 { font-size: 16px; margin: 0; font-weight: 600; flex: 1; }
.sx-fac-ic { color: var(--sx-open); display: grid; place-items: center; }
.sx-fac.is-blind .sx-fac-ic { color: var(--sx-gap); }
.sx-fac-ans { font-size: 13.5px; color: var(--an-text-2); margin: 0 0 var(--an-space-3); }
.sx-fac-blind { font-size: 12.5px; color: var(--an-text-3); margin: var(--an-space-3) 0 0; font-style: italic; }

.sx-src { list-style: none; margin: 0; padding: 0; }
.sx-src-row {
	display: grid; grid-template-columns: 10px auto 1fr; gap: 9px;
	align-items: baseline; padding: 5px 0; font-size: 12.5px;
}
.sx-src-dot {
	width: 7px; height: 7px; border-radius: 50%; align-self: center;
	border: 1px dashed var(--sx-gap);
}
.sx-src-row.is-on .sx-src-dot { background: var(--sx-open); border: 0; }
.sx-src-id { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-2); }
.sx-src-note { color: var(--an-text-3); }

/* ── tables ────────────────────────────────────────────────────── */

.sx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sx-table caption { text-align: left; font-size: 13px; color: var(--an-text-3); padding-bottom: 10px; }
.sx-table th, .sx-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--an-line-soft); vertical-align: top; }
.sx-table thead th {
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--an-text-3);
	border-bottom-color: var(--an-line);
}
.sx-table tbody th { font-weight: 600; }
.sx-table .sx-num { font-family: var(--an-font-mono); font-variant-numeric: tabular-nums; }
.sx-table .sx-num.is-mid { color: var(--an-text); font-weight: 500; }
.sx-table .sx-from { color: var(--an-text-3); font-size: 12.5px; }
/* An absent layer reads quieter, not fainter: `opacity: .55` took its text
   to 3.85:1 and its "absent" pill to 2.29:1. The muted ink is 5.6:1. */
.sx-table tr.is-off th, .sx-table tr.is-off td { color: var(--an-text-3); }
.sx-table tr.is-off code { color: inherit; }

.sx-pill {
	display: inline-block; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase;
	padding: 3px 8px; border-radius: 3px;
	border: 1px dashed var(--an-line); color: var(--an-text-3);
}
.sx-pill.is-on { border-style: solid; border-color: color-mix(in srgb, var(--sx-open) 45%, transparent); color: var(--sx-open); }

/* ── abilities grid ────────────────────────────────────────────── */

.sx-abgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--an-space-5); }
.sx-abcol-h { margin: 0 0 var(--an-space-3); padding-bottom: 8px; border-bottom: 1px solid var(--an-line); }
.sx-abcol-h span { display: block; font-size: 15px; font-weight: 600; }
.sx-abcol-h em { font-style: normal; font-size: 12.5px; color: var(--an-text-3); }
.sx-abcol ul { list-style: none; margin: 0; padding: 0; }
.sx-abcol li { padding: 9px 0; border-bottom: 1px solid var(--an-line-soft); }
.sx-abcol b { display: block; font-size: 14px; font-weight: 600; }
.sx-abcol em { display: block; font-style: normal; font-size: 12.5px; color: var(--an-text-3); margin-top: 2px; }
.sx-abcol code { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3); }
.sx-abcol-none { font-size: 13px; color: var(--an-text-3); }

/* ══════════════════════════════════════════════════════════════════════
   HORIZON SURFACE
   ══════════════════════════════════════════════════════════════════════ */

.sx-months { list-style: none; margin: 0; padding: 0; }
.sx-month { border-bottom: 1px solid var(--an-line-soft); }
.sx-month summary {
	display: flex; align-items: baseline; gap: var(--an-space-4);
	padding: 15px 4px; cursor: pointer; list-style: none;
}
.sx-month summary::-webkit-details-marker { display: none; }
.sx-month summary:hover { background: var(--an-surface); }
.sx-month-n { font-size: 16px; font-weight: 600; min-width: 130px; }
.sx-month.is-now .sx-month-n { color: var(--sx-open); }
.sx-month-tag {
	font-family: var(--an-font-mono); font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--sx-open);
	border: 1px solid color-mix(in srgb, var(--sx-open) 40%, transparent);
	border-radius: 3px; padding: 2px 6px;
}
.sx-month-fig { margin-left: auto; display: flex; align-items: baseline; gap: 6px; }
.sx-month-fig:not(:last-child) { margin-left: 0; }
.sx-month-fig b { font-family: var(--an-font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.sx-month-fig em { font-style: normal; font-size: 12px; color: var(--an-text-3); letter-spacing: .08em; text-transform: uppercase; }
.sx-month-fig--open b { color: var(--sx-open); }
.sx-month-fig--close b { color: var(--sx-close); }

/*
 * Two columns where there is room for two, one where there is not. `1fr 1fr`
 * is `minmax(auto, 1fr)` twice, so each column was as wide as its widest crop
 * row — with the rail open at 768px that made /horizon/ 1124px wide (trap #5
 * wearing a grid). And each column's list is itself in two text columns,
 * which now appear only when they have 180px each.
 */
.sx-month-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--an-space-6); padding: 0 4px var(--an-space-5); }
.sx-month-col { min-width: 0; }
.sx-month-col h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3); margin: 0 0 10px; }
.sx-month-col h3 span { font-family: var(--an-font-mono); color: var(--an-text-2); }
/* Opening and closing windows wear the same colours as everywhere else on
   the horizon: open is the season, closing is the warning. The two columns
   printed these modifiers from the start and nothing ever read them. */
.sx-month-col--opens h4 { color: var(--sx-open); }
.sx-month-col--closes h4 { color: var(--sx-close); }
.sx-month-col ul { list-style: none; margin: 0; padding: 0; columns: 180px 2; column-gap: var(--an-space-5); }
.sx-month-col li { break-inside: avoid; padding: 4px 0; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.sx-month-col li a:first-child { font-weight: 500; }
.sx-month-col li em { font-style: normal; font-size: 12px; color: var(--an-text-3); }
.sx-mini {
	margin-left: auto; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--an-text-3);
	opacity: 0; transition: opacity var(--an-fast) var(--an-ease);
}
.sx-month-col li:hover .sx-mini, .sx-mini:focus { opacity: 1; }
.sx-month-none, .sx-month-more { font-size: 13px; color: var(--an-text-3); margin: 0; }

.sx-caveats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--an-space-4); max-width: 74ch; }
.sx-caveats li { font-size: 14.5px; color: var(--an-text-2); padding-left: 16px; border-left: 2px solid var(--an-line); }
.sx-caveats b { display: block; color: var(--an-text); margin-bottom: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   DECIDE SURFACE
   ══════════════════════════════════════════════════════════════════════ */

.sx-decide-form {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--an-space-4);
	padding: var(--an-space-5) 0; border-bottom: 1px solid var(--an-line);
}
.sx-field { display: flex; flex-direction: column; gap: 6px; }
.sx-field label {
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--an-text-3);
}
.sx-field select, .sx-field input {
	font: inherit; font-size: 14px; padding: 10px 12px; min-width: 200px;
	background: var(--an-surface); color: var(--an-text);
	border: 1px solid var(--an-line); border-radius: var(--an-radius-md);
}

.sx-fan { width: 100%; height: auto; margin: var(--an-space-4) 0 var(--an-space-6); }
.sx-fan-axis { stroke: var(--an-line); stroke-width: 1; stroke-dasharray: 2 4; }
.sx-fan-p { fill: none; stroke-width: 2; stroke-linecap: round; }
.sx-fan-p--mid { stroke: var(--an-text); }
.sx-fan-p--hi  { stroke: var(--sx-open); stroke-dasharray: 6 4; }
.sx-fan-p--lo  { stroke: var(--sx-close); stroke-dasharray: 6 4; }
.sx-fan-now { fill: var(--an-text); }
.sx-fan-l, .sx-fan-v {
	font-family: var(--an-font-mono); font-size: 12px; fill: var(--an-text-3);
}
.sx-fan-v--hi { fill: var(--sx-open); }
.sx-fan-v--lo { fill: var(--sx-close); }
.sx-fan-v--mid { fill: var(--an-text); }

.sx-verdict {
	margin: var(--an-space-6) 0; padding: var(--an-space-5);
	border-radius: var(--an-radius-lg); border: 1px solid var(--an-line);
}
.sx-verdict.is-in { background: var(--sx-open-w); border-color: color-mix(in srgb, var(--sx-open) 35%, transparent); }
.sx-verdict.is-out { background: var(--sx-close-w); border-color: color-mix(in srgb, var(--sx-close) 35%, transparent); }
.sx-verdict h3 { margin: 0 0 6px; font-size: 17px; }
.sx-verdict p { margin: 0; color: var(--an-text-2); font-size: 14px; }

.sx-refused {
	margin: var(--an-space-6) 0; padding: var(--an-space-5);
	border: 1px dashed var(--an-line); border-radius: var(--an-radius-lg);
}
.sx-refused h3 { margin: 0 0 12px; font-size: 15px; }
.sx-refused ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sx-refused li { font-size: 13.5px; color: var(--an-text-2); padding-left: 18px; position: relative; }
.sx-refused li::before {
	content: "—"; position: absolute; left: 0; color: var(--sx-gap);
	font-family: var(--an-font-mono);
}
.sx-refused-why { margin: var(--an-space-4) 0 0; font-size: 12.5px; color: var(--an-text-3); font-style: italic; }

.sx-commit {
	margin: var(--an-space-6) 0; padding: var(--an-space-6);
	background: var(--an-surface); border: 1px solid var(--an-line);
	border-radius: var(--an-radius-lg); max-width: 68ch;
}
.sx-commit h3 { margin: 0 0 10px; font-size: 17px; }
.sx-commit p { margin: 0 0 var(--an-space-4); font-size: 14px; color: var(--an-text-2); }
.sx-commit-where { font-size: 12.5px !important; color: var(--an-text-3) !important; }
.sx-commit-done { margin-top: var(--an-space-3) !important; color: var(--sx-open) !important; }

.sx-empty-state { color: var(--an-text-2); max-width: 64ch; }

/* ══════════════════════════════════════════════════════════════════════
   MEMORY SURFACE
   ══════════════════════════════════════════════════════════════════════ */

.sx-idcard {
	padding: var(--an-space-6); border-radius: var(--an-radius-lg);
	border: 1px dashed var(--an-line); max-width: 74ch;
}
.sx-idcard.is-known { border-style: solid; background: var(--sx-open-w); }
.sx-idcard h2 { margin: 0 0 10px; font-size: 19px; }
.sx-idcard p { margin: 0; color: var(--an-text-2); font-size: 14px; }

.sx-void {
	padding: var(--an-space-8) var(--an-space-6); text-align: center;
	border: 1px dashed var(--an-line); border-radius: var(--an-radius-lg);
}
.sx-void-why { color: var(--an-text-2); max-width: 52ch; margin: 0 auto var(--an-space-5); }
.sx-void-note { font-size: 13px; color: var(--an-text-3); margin: 0; }

.sx-decisions { display: grid; gap: var(--an-space-3); }
.sx-decisions-idle { color: var(--an-text-3); font-size: 14px; }
.sx-dec {
	display: grid; grid-template-columns: 1fr auto; gap: var(--an-space-4);
	padding: var(--an-space-4) var(--an-space-5);
	background: var(--an-surface); border: 1px solid var(--an-line);
	border-radius: var(--an-radius-md); align-items: center;
}
.sx-dec b { font-size: 15px; }
.sx-dec em { font-style: normal; display: block; font-size: 12.5px; color: var(--an-text-3); margin-top: 3px; }
.sx-dec time { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3); }
.sx-dec-x {
	border: 0; background: none; cursor: pointer; color: var(--an-text-3);
	font-family: var(--an-font-mono); font-size: 12px; text-decoration: underline;
	text-underline-offset: 3px;
}

.sx-steps { list-style: none; counter-reset: sx; margin: 0; padding: 0; display: grid; gap: var(--an-space-4); max-width: 74ch; }
.sx-steps li { counter-increment: sx; position: relative; padding-left: 40px; font-size: 14.5px; color: var(--an-text-2); }
.sx-steps li::before {
	content: counter(sx); position: absolute; left: 0; top: 0;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--an-line); display: grid; place-items: center;
	font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3);
}
.sx-steps b { display: block; color: var(--an-text); margin-bottom: 3px; }

/* ══════════════════════════════════════════════════════════════════════
   WHY SURFACE
   ══════════════════════════════════════════════════════════════════════ */

.sx-why-meta { display: flex; align-items: center; gap: var(--an-space-4); margin-top: var(--an-space-4); flex-wrap: wrap; }
.sx-why-meta code { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3); }

.sx-trail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--an-space-5); }
.sx-trail li { display: grid; grid-template-columns: 34px 1fr; gap: var(--an-space-4); }
.sx-trail-n {
	width: 28px; height: 28px; border-radius: 50%;
	border: 1px solid var(--an-line); display: grid; place-items: center;
	font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3);
}
.sx-trail h3 { margin: 3px 0 5px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--an-text-3); }
.sx-trail p { margin: 0; font-size: 15px; color: var(--an-text); }

.sx-whylist { list-style: none; margin: 0; padding: 0; }
.sx-whylist li { border-bottom: 1px solid var(--an-line-soft); }
.sx-whylist a { display: flex; justify-content: space-between; gap: var(--an-space-4); padding: 13px 4px; align-items: baseline; }
.sx-whylist a:hover { background: var(--an-surface); }
.sx-whylist b { font-weight: 500; font-size: 14.5px; }
.sx-whylist code { font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3); }
/* Everything below the composer waits its turn — it is the answer to "what is
   true right now", and that is a second question. */
.sx-below { border-top: 1px solid var(--an-line-soft); }

.sx-groups {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.sx-groups a {
	display: flex; align-items: baseline; gap: 8px;
	padding: 11px 13px; border: 1px solid var(--an-line);
	border-radius: var(--an-radius-md); background: var(--an-surface);
}
.sx-groups a:hover { border-color: var(--sx-open); }
.sx-groups b { font-family: var(--an-font-mono); font-size: 15px; }
.sx-groups em { font-style: normal; font-size: 12.5px; color: var(--an-text-3); }

.sx-sec-note { display: block; margin-top: 10px; font-size: 12.5px; color: var(--an-text-3); }

/* ══════════════════════════════════════════════════════════════════════
   THE VERDICT CARD

   Returned when the question was a work order rather than a lookup.
   `would_change_this` is the highest-value block in the system — it tells the
   grower what to go and measure — so it is given its own rule and its own
   colour rather than being folded in with the reasons.
   ══════════════════════════════════════════════════════════════════════ */

.sx-verdict {
	margin: var(--an-space-4) 0 0;
	padding: var(--an-space-5);
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-lg);
	border-left-width: 3px;
	background: var(--an-surface);
}
.sx-verdict--go                { border-left-color: var(--sx-open); }
.sx-verdict--conditional       { border-left-color: var(--sx-hold); }
.sx-verdict--no_go             { border-left-color: var(--sx-close); }
.sx-verdict--insufficient_data { border-left-color: var(--sx-gap); border-left-style: dashed; }

.sx-verdict-k {
	display: inline-block; margin-bottom: 8px;
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .16em; text-transform: uppercase; color: var(--an-text-3);
	border: 1px solid var(--an-line); border-radius: 3px; padding: 3px 8px;
}
.sx-verdict--go .sx-verdict-k                { color: var(--sx-open); border-color: color-mix(in srgb, var(--sx-open) 45%, transparent); }
.sx-verdict--conditional .sx-verdict-k       { color: var(--sx-hold); border-color: color-mix(in srgb, var(--sx-hold) 45%, transparent); }
.sx-verdict--insufficient_data .sx-verdict-k { border-style: dashed; }

/* The verdict's headline is the card's heading — a <h2> under the page's
   <h1>, so the card's "Because" and "What would change this" are <h3> and no
   level is skipped (tools/a11y.mjs). It was a <b>. */
.sx-verdict > .sx-verdict-h { display: block; margin: 0 0 var(--an-space-4); font-size: 17px; line-height: 1.35; font-weight: 600; }

.sx-verdict-part + .sx-verdict-part { margin-top: var(--an-space-4); }
.sx-verdict-part h3 {
	margin: 0 0 6px; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--an-text-3);
}
.sx-verdict-part ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-verdict-part li {
	font-size: 14px; color: var(--an-text-2);
	padding-left: 15px; position: relative; line-height: 1.5;
}
.sx-verdict-part li::before {
	content: ""; position: absolute; left: 0; top: 9px;
	width: 5px; height: 5px; border-radius: 50%; background: var(--an-line);
}
.sx-verdict-part--change li::before { background: var(--an-accent); }
.sx-verdict-part--change li { color: var(--an-text); }

/* ── assumption chips ──────────────────────────────────────────── */

.sx-assume { margin-top: var(--an-space-4); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sx-assume-h {
	font-family: var(--an-font-mono); font-size: 12px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--an-text-3); margin-right: 2px;
}
.sx-assume-c {
	display: inline-flex; align-items: baseline; gap: 5px;
	font-size: 12px; padding: 4px 9px; border-radius: 999px;
	border: 1px dashed var(--an-line); color: var(--an-text-2);
}
.sx-assume-c b { font-weight: 600; color: var(--an-text); }
.sx-assume-c em { font-style: normal; font-family: var(--an-font-mono); font-size: 12px; color: var(--an-text-3); }
/* A value the system does not hold at all is marked, not quietly styled like
   a value it does hold with low confidence. */
.sx-assume-c.is-none { border-color: color-mix(in srgb, var(--sx-close) 50%, transparent); color: var(--sx-close); }
.sx-assume-c.is-high { border-style: solid; }

/* ── provenance ────────────────────────────────────────────────── */

.sx-prov { margin-top: var(--an-space-4); }
.sx-prov summary {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--an-text-3);
	padding: 4px 0;
}
.sx-prov summary::-webkit-details-marker { display: none; }
.sx-prov summary:hover { color: var(--an-text); }
.sx-prov-mark {
	width: 13px; height: 8px; display: block;
	border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
	transition: height var(--an-fast) var(--an-ease);
}
.sx-prov[open] .sx-prov-mark { height: 13px; }

.sx-prov-body {
	margin-top: 8px; padding: 12px 14px;
	background: var(--an-bg); border: 1px solid var(--an-line-soft);
	border-radius: var(--an-radius-md);
	font-size: 13px; color: var(--an-text-2);
}
.sx-prov-body p { margin: 0 0 10px; }

.sx-prov-senses { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sx-prov-sense {
	display: inline-flex; align-items: baseline; gap: 5px;
	font-family: var(--an-font-mono); font-size: 12px;
	padding: 3px 8px; border-radius: 3px;
	border: 1px solid var(--an-line); color: var(--an-text-2);
}
.sx-prov-sense em { font-style: normal; color: var(--an-text-3); }

.sx-prov-src { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.sx-prov-src li {
	font-size: 12.5px; padding-left: 14px; position: relative; color: var(--an-text-2);
}
.sx-prov-src li::before { content: "—"; position: absolute; left: 0; color: var(--an-text-3); }

.sx-prov-nc { border-top: 1px solid var(--an-line-soft); padding-top: 10px; }
.sx-prov-nc h4 {
	margin: 0 0 6px; font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--sx-close);
}
.sx-prov-nc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sx-prov-nc li { font-size: 12.5px; padding-left: 14px; position: relative; }
.sx-prov-nc li::before { content: "·"; position: absolute; left: 4px; color: var(--sx-close); }

.sx-prov-why { margin: 10px 0 0 !important; }
.sx-prov-why a { color: var(--an-text); text-decoration: underline; text-underline-offset: 3px; }
/* ══════════════════════════════════════════════════════════════════════
   THE SEASON CHART

   One picture: soil water across five real past seasons at the grower's own
   location. Deliberately small and deliberately plain — a grower reading it in
   a field has one question, "did it run dry and when", and every extra mark
   makes that slower to answer.
   ══════════════════════════════════════════════════════════════════════ */

/* `sx-run`, not `sx-season` — that name is already the month chip in the top
   bar, and the chart inherited its `display: flex`. */
.sx-run {
	margin-top: var(--an-space-4);
	padding: 12px 14px 10px;
	border: 1px solid var(--an-line);
	border-radius: var(--an-radius-lg);
	background: var(--an-bg);
	cursor: crosshair;
	touch-action: none;   /* dragging the chart must not scroll the page */
}
.sx-run:focus-visible { outline: 2px solid var(--sx-open); outline-offset: 2px; }
.sx-run canvas { display: block; width: 100%; }

.sx-run-h {
	margin: 0 0 8px !important;
	font-family: var(--an-font-mono); font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase; color: var(--an-text-3);
}
.sx-run-read {
	margin: 6px 0 0 !important;
	font-size: 13px; color: var(--an-text-2); min-height: 1.5em;
}
.sx-run-read b { color: var(--an-text); font-weight: 600; }
.sx-run-read i { font-style: normal; color: var(--sx-close); }
.sx-run-note {
	margin: 6px 0 0 !important;
	font-size: 12px; line-height: 1.45; color: var(--an-text-3);
}

/* ── /decide/ : four fields and one answer ─────────────────────── */

.sx-runform {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--an-space-4);
	align-items: end;
	padding: var(--an-space-5) 0;
	border-bottom: 1px solid var(--an-line);
}
.sx-runform .sx-field--wide { grid-column: span 1; }
.sx-runform .sx-btn { grid-column: 1 / -1; justify-content: center; }
.sx-runform input, .sx-runform select { width: 100%; min-width: 0; }

.sx-runyears-h {
	margin: var(--an-space-6) 0 var(--an-space-3);
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--an-text-3);
}
.sx-nudge {
	padding: 14px 16px; border: 1px dashed var(--an-line);
	border-radius: var(--an-radius-md); color: var(--an-text-2);
	font-size: 14px; margin: 0;
}

@media (max-width: 640px) {
	.sx-runform { grid-template-columns: 1fr; }
}

/* ———————————————————— keep this decision ————————————————————
   /decide/ → Farm memory. The button is printed hidden and shown by
   memory.js; the status line under it is a live region. */

.sx-keep {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: var(--an-space-5);
}
.sx-keep-done {
	margin: 0;
	color: var(--an-text-2);
	font-size: 14px;
}
.sx-dec p {
	margin: 6px 0 0;
	color: var(--an-text-2);
	font-size: 14px;
	line-height: 1.5;
}
.sx-dec a {
	color: inherit;
}

/* ———————————————————— reference ranges ————————————————————
   The label / value list on /decide/ ("Season water  4,000 – 6,000 m³").
   The class came from the conversation's message card and its rules left
   with os.css in 2.0, so the list rendered as a browser-default <dl> with
   each value indented under its label. Restyled in 2.1 as what it is: a
   two-column reading of ranges. */

.sx-msg-facts {
	display: grid;
	margin: var(--an-space-4) 0 0;
	max-width: 560px;
}
.sx-msg-facts > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 16px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var(--an-line);
}
.sx-msg-facts dt {
	color: var(--an-text-2);
	font-size: 14px;
}
.sx-msg-facts dd {
	margin: 0;
	font-family: var(--an-font-mono);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════
   SOURCES

   One entry in the source registry on /sources/: the citation, what it is
   used for here, and when somebody last checked it. It reads as a reference
   list rather than a card deck — a citation is a claim to be checked, and a
   box with a shadow invites it to be skimmed instead.
   ══════════════════════════════════════════════════════════════════════ */

.sx-source {
	padding-left: var(--an-space-5);
	/* The rule down the left is the only ornament: it marks where one
	   citation ends and the next begins without drawing a frame. */
	border-left: 2px solid var(--an-line);
	max-width: 76ch;
}
.sx-source h3 {
	margin: 0 0 var(--an-space-3);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	/* A citation carries DOIs and long titles; it may break anywhere rather
	   than widen the page (trap #14). */
	overflow-wrap: anywhere;
}
.sx-source p {
	margin: 0 0 var(--an-space-3);
	font-size: 14.5px;
	color: var(--an-text-2);
}
.sx-source__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--an-space-3);
	font-size: 13px;
	color: var(--an-text-3);
}
.sx-source__meta a {
	/* 46, not 44: the border is inside the box (trap #10). */
	min-height: 46px;
	display: inline-flex;
	align-items: center;
}
/* "Due a check" is the one thing on this page somebody has to act on, so it
   is the one thing that is not grey. --an-stop is the token the modules read;
   it resolves in both themes (C1). */
.sx-source__stale {
	color: var(--an-stop);
	font-weight: 500;
}

/*
 * A table row whose first cell is a link.
 *
 * /health/ lists every route with a link to it, and a link that is nothing
 * but 15px of text is a 15px touch target — WCAG 2.5.8 asks for 44, and on
 * a phone it is the difference between opening a route and opening the one
 * above it. The height goes on the anchor rather than the cell so the target
 * IS the link; 46 because the row's border sits inside the box (trap #10).
 *
 * Every instrument table gets this, not just the one that failed: the next
 * table with a link in its row header should not have to rediscover it.
 */
.sx-table th a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
}